.work-option-page{background:#020b1d;color:#f8f5e8}.work2-hero{min-height:78svh;display:flex;flex-direction:column;justify-content:flex-end;padding:8.5rem var(--safe-x) 4rem;background:radial-gradient(circle at 79% 22%,rgba(145,232,255,.45),transparent 20%),radial-gradient(circle at 18% 80%,rgba(255,215,0,.25),transparent 24%),#020b1d}.work2-hero p,.work2-card p{margin:0;color:#91e8ff;font:400 .7rem "Bray DIN",Arial,sans-serif;letter-spacing:.12em}.work2-hero h1{margin:.75rem 0 1.2rem;font:700 clamp(4.5rem,12vw,13rem)/.68 "Josefin Sans",Arial,sans-serif;letter-spacing:-.1em}.work2-hero h1 em{color:#ffd700;font-family:"Bray Instrument Serif",Georgia,serif;font-weight:400}.work2-hero>span{max-width:28rem;font-size:clamp(.95rem,1.4vw,1.35rem);line-height:1.45}.work2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(145,232,255,.25)}.work2-card{position:relative;min-height:42vw;overflow:hidden;background:#00173d}.work2-card--wide{grid-column:span 2;min-height:52vw}.work2-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;filter:grayscale(1) brightness(.62);transition:filter .45s ease,transform .65s cubic-bezier(.22,1,.36,1)}.work2-card::after{position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,11,29,.94),rgba(2,11,29,.02) 65%);content:""}.work2-card>div{position:absolute;z-index:1;right:clamp(1.2rem,3vw,3rem);bottom:clamp(1.2rem,3vw,3rem);left:clamp(1.2rem,3vw,3rem)}.work2-card h2{max-width:45rem;margin:.65rem 0 1.15rem;font:500 clamp(1.7rem,4vw,5rem)/.87 "Josefin Sans",Arial,sans-serif;letter-spacing:-.07em;text-transform:uppercase}.work2-card button{padding:0;border:0;border-bottom:1px solid #ffd700;background:transparent;color:#ffd700;cursor:pointer;font:400 .7rem "Bray DIN",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}.work2-card:hover img,.work2-card:focus-within img{filter:grayscale(0) brightness(.83);transform:scale(1.035)}.work2-video{width:min(92vw,70rem);padding:0;border:0;background:transparent}.work2-video::backdrop{background:rgba(2,11,29,.9);backdrop-filter:blur(8px)}.work2-video>div{position:relative;background:#00173d;border:1px solid #91e8ff;border-radius:1rem;overflow:hidden}.work2-video video{display:block;width:100%;max-height:80svh;background:#000}.work2-video__close{position:absolute;z-index:1;top:.75rem;right:.75rem;width:2.5rem;height:2.5rem;border:1px solid #f8f5e8;border-radius:50%;background:#00173d;color:#f8f5e8;font-size:1.5rem;cursor:pointer}.work2-video__close:hover{background:#ffd700;border-color:#ffd700;color:#00173d}@media(max-width:700px){.work2-hero{min-height:65svh;padding-top:7rem}.work2-grid{grid-template-columns:1fr}.work2-card,.work2-card--wide{grid-column:auto;min-height:115vw}.work2-card h2{font-size:clamp(2rem,9vw,3.5rem)}}

/* Full-screen option-two masthead keeps the section label distinct from the headline. */
.work2-hero { --parallax-x: 0px; --parallax-y: 0px; position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; align-items: start; padding: calc(72px + clamp(2rem, 5vh, 4rem)) var(--safe-x) clamp(3rem, 7vw, 6rem); overflow: hidden; text-align: left; isolation: isolate; }
.work2-hero::before { position: absolute; z-index: 0; inset: -8%; background: radial-gradient(circle at 79% 22%,rgba(145,232,255,.45),transparent 20%),radial-gradient(circle at 18% 80%,rgba(255,215,0,.25),transparent 24%),#020b1d; content: ""; transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1.08); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.work2-hero { background: #020b1d; }
.work2-hero > * { position: relative; z-index: 1; }
.work2-hero { grid-template-rows: 1fr auto 1fr; }
.work2-hero h1 { grid-row: 2; align-self: end; max-width: 78rem; margin: 0; font-size: clamp(3.3rem, 7.2vw, 8.8rem); line-height: .82; }
.work2-hero > span { grid-row: 3; align-self: start; margin-top: clamp(1.1rem, 2vw, 1.8rem); color: #f8f5e8; font: 400 clamp(.68rem, .82vw, .85rem)/1 "Bray DIN", Arial, sans-serif; letter-spacing: .08em; }
.work2-hero > p { align-self: start; }
.work2-hero h1 { align-self: center; margin: clamp(2.5rem, 7vh, 5.5rem) 0 0; }
.work2-hero > span { align-self: end; }
@media (max-width: 700px) { .work2-hero { min-height: 100svh; padding-top: calc(70px + 2rem); } .work2-hero h1 { align-self: end; margin: 0; font-size: clamp(3rem, 11vw, 5rem); } }
@media (prefers-reduced-motion: reduce) { .work2-hero::before { transform: none; transition: none; } }
.work-option-page .site-footer { margin-top: 100px; }