/* Cinematic review direction: architectural scale, real imagery, restrained motion. */
:root { --cinematic-serif: Georgia, 'Times New Roman', serif; }
html { scroll-padding-top: 24px; }
.site-header { position:absolute; top:0; left:0; width:100%; height:108px; padding:8px 5vw; background:linear-gradient(#14232ed9,#14232e55); backdrop-filter:none; border-bottom:1px solid #f8f7f32e; color:var(--paper); }
.site-header nav a:hover { color:var(--champagne); }
.brand img { width:218px; height:91px; }
.site-header nav .nav-inquiry { border-color:#d4bb9175; padding:13px 19px; }
.cinematic-hero { position:relative; isolation:isolate; min-height:780px; height:100svh; max-height:1100px; color:var(--paper); background:var(--ink); overflow:hidden; }
.cinematic-media { position:absolute; inset:0; z-index:-2; }
.cinematic-image { width:100%; height:100%; max-width:none; object-fit:cover; object-position:58% 54%; }
.cinematic-hero::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#10232edb 0%,#142833a6 32%,#14283314 75%),linear-gradient(0deg,#0b1b27e8 0%,transparent 48%,#10232e28 100%); }
.cinematic-copy { position:absolute; top:25%; left:6vw; right:6vw; max-width:1080px; }
.cinematic-copy>.eyebrow { font-size:10px; letter-spacing:.18em; color:#ead8ba; margin-bottom:30px; }
.cinematic-copy h1 { font-size:clamp(76px,7.45vw,128px); font-weight:400; line-height:.99; letter-spacing:-.052em; }
.headline-window { display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.04em; }
.headline-line { display:block; width:fit-content; }
.headline-em { font-family:var(--cinematic-serif); font-style:italic; font-weight:400; letter-spacing:-.055em; color:var(--champagne); }
.cinematic-description { max-width:480px; font-size:15px; line-height:1.75; color:#f1f0e7d9; margin-top:27px; }
.cinematic-actions { display:flex; align-items:center; flex-wrap:wrap; gap:30px; margin-top:30px; }
.cinematic-primary,.cinematic-secondary { display:inline-flex; align-items:center; justify-content:space-between; min-height:52px; font-size:12px; letter-spacing:.02em; gap:42px; }
.cinematic-primary { background:var(--champagne); color:var(--ink); padding:17px 22px; }
.cinematic-primary:hover { background:#e4d0b0; }
.cinematic-secondary { color:var(--paper); border-bottom:1px solid #f8f7f359; gap:25px; }
.cinematic-actions a:focus-visible,.cinematic-footer a:focus-visible,.cinematic-footer button:focus-visible { outline-color:var(--champagne); }
.cinematic-footer { position:absolute; bottom:0; left:6vw; right:6vw; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:25px 0 27px; border-top:1px solid #f8f7f342; }
.hero-project-link { background:none; text-align:left; color:var(--paper); padding:0; display:grid; gap:7px; }
.hero-project-index { text-transform:uppercase; font-size:9px; letter-spacing:.16em; color:var(--champagne); }
.hero-project-link>span:nth-child(2) { font-size:17px; }
.hero-project-link>span:nth-child(2)>span { margin-left:25px; color:var(--champagne); }
.hero-project-link small { font-size:9px; color:#c7d0d1; letter-spacing:.02em; }
.hero-scroll { display:flex; align-items:center; gap:28px; text-transform:uppercase; letter-spacing:.14em; font-size:9px; }
.scroll-arrow { display:grid; place-items:center; border:1px solid #d4bb9177; width:42px; height:42px; font-size:19px; }
.introduction { padding-top:100px; padding-bottom:96px; }
.section-kicker { margin-bottom:34px; }
.intro-main h2 { font-size:clamp(48px,4.7vw,72px); }
.intro-main h2 em { font-family:var(--cinematic-serif); font-style:italic; font-weight:400; color:var(--gold); }
.design-services { margin-top:60px; }
.design-services h3 { font-size:24px; }
.approach { background:#142631; color:var(--paper); padding-top:100px; }
.approach-heading { grid-template-columns:1fr 2fr; margin-bottom:54px; align-items:start; gap:7%; }
.approach-heading>.eyebrow { color:var(--champagne); font-size:10px; padding-top:14px; }
.approach-heading h2 { font-size:clamp(58px,5.6vw,86px); line-height:1.03; }
.approach-heading h2 em { color:var(--champagne); font-family:var(--cinematic-serif); font-style:italic; font-weight:400; }
.approach-heading p { color:#c0cbce; max-width:540px; font-size:15px; margin-top:25px; }
.story-instruction { max-width:1440px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:0 0 18px; color:#b4c2c7; text-transform:uppercase; font-size:9px; letter-spacing:.13em; }
.story-instruction>span:last-child { color:var(--champagne); }
.story-instruction>span:last-child>span { margin-left:18px; }
.design-stage { max-width:1440px; border:1px solid #d4bb9140; background:#21343f; }
.stage-image-wrap { aspect-ratio:16/8.5; background:#10212c; }
.stage-image-wrap img { object-fit:contain; }
.stage-caption { display:flex; flex-direction:column; align-items:stretch; gap:22px; padding:24px 30px 28px; background:#10212c; border-top:1px solid #d4bb9140; }
.stage-caption>span { flex-direction:row; justify-content:space-between; align-items:center; }
.stage-caption .eyebrow { color:var(--paper); font-size:14px; letter-spacing:.01em; }
#stage-description { color:#a4b7c0; font-size:11px; }
.stage-controls { display:grid; grid-template-columns:repeat(4,1fr); border:0; border-top:1px solid #d4bb9138; padding:0; gap:0; background:none; }
.stage-controls button { display:flex; align-items:center; text-align:left; min-height:76px; border-top:2px solid transparent; padding:18px 16px; color:#b6c6cc; font-size:10px; margin-top:-1px; transition:background .25s,color .25s; }
.stage-controls button span { font-size:14px; margin-left:24px; }
.stage-controls button[aria-pressed=true] { border-top-color:var(--champagne); background:#d4bb9114; color:var(--champagne); box-shadow:none; }
.stage-controls button:hover { background:#ffffff0b; }
.stage-controls button:focus-visible { outline-color:var(--champagne); outline-offset:-4px; }
.process { padding-top:54px; padding-bottom:80px; gap:7%; }
.process>div>.eyebrow { color:var(--champagne); font-size:19px; }
.process>div p,.process li p { color:#aebfc5; font-size:14px; }
.process li { border-top:1px solid #8d9aa244; padding:22px 0; }
.process h3 { font-size:23px; }
.work { background:var(--paper); padding-top:104px; padding-bottom:90px; }
.work-heading h2 { font-size:clamp(52px,5.7vw,86px); line-height:1; }
.work-heading .eyebrow { color:var(--gold); font-size:10px; }
.work-intro>p { font-size:14px; }
.project-grid,.project-grid.filtered { grid-template-columns:repeat(2,minmax(0,1fr)); gap:65px 36px; }
.project-card { position:relative; border-bottom:1px solid #c3c6bf; }
.project-card:nth-child(3n+1) { grid-column:1/-1; }
.project-card:nth-child(3n+1) .project-image img { aspect-ratio:16/8; object-fit:cover; }
.project-image img { aspect-ratio:16/10; object-fit:cover; transition:transform .8s cubic-bezier(.22,.61,.36,1),filter .4s; }
.project-image:hover img { transform:scale(1.025); filter:brightness(1.04); }
.open-arrow { width:51px; height:51px; right:22px; bottom:22px; font-size:28px; border:1px solid #d4bb9190; }
.project-heading { display:flex; justify-content:space-between; align-items:flex-end; padding:26px 0 20px; gap:20px; }
.project-heading h3 { font-size:34px; margin-top:13px; margin-bottom:12px; }
.project-card:nth-child(3n+1) .project-heading h3 { font-size:48px; }
.project-heading .eyebrow { font-size:9px; }
.project-heading p { font-size:14px; }
.project-type { font-size:9px; text-transform:uppercase; letter-spacing:.1em; text-align:right; }
.company-credit { color:var(--muted); font-size:10px; margin-bottom:25px; }
.project-detail-link { font-size:11px; }
.work:has([data-filter="commercial"][aria-pressed="true"]) .project-card { grid-column:1/-1; }
.work:has([data-filter="commercial"][aria-pressed="true"]) .project-image img { aspect-ratio:16/8; }
.studio h2,.engagement h2,.contact h2 { font-size:clamp(48px,5vw,76px); }
.studio h2 em,.contact h2 em { font-family:var(--cinematic-serif); font-style:italic; }
@media(min-width:1600px) { .cinematic-copy { left:max(6vw,calc((100vw - 1500px)/2)); } }
@media(max-width:1550px) { .story-instruction,.design-stage { margin-inline:5vw; } }
@media(max-width:1050px) and (min-width:761px) {
 .site-header { height:98px; padding-inline:4vw; }.site-header nav { gap:20px; }.brand img { width:190px; height:80px; }
 .cinematic-copy { top:27%; }.cinematic-copy h1 { font-size:clamp(70px,8.8vw,92px); }
 .cinematic-description { max-width:420px; }.stage-controls button { padding-inline:12px; }.stage-controls button span { margin-left:12px; }
}
@media(max-width:760px) {
 html { scroll-padding-top:20px; }
 .site-header { height:84px; padding:4px 22px; }.brand img { width:180px; height:75px; }.menu-toggle { color:var(--paper); gap:14px; font-size:12px; }
 .mobile-menu { top:84px; background:#192a35; color:var(--paper); border-color:#d4bb9140; }.mobile-menu a { font-size:18px; }
 .cinematic-hero { min-height:760px; height:100svh; max-height:960px; }
 .cinematic-image { object-position:58% 50%; }
 .cinematic-hero::before { background:linear-gradient(90deg,#122630ab,#12263033 85%),linear-gradient(0deg,#0b1b27f0 0%,#10232e7a 45%,#10232e15 75%,#10232e55); }
 .cinematic-copy { top:auto; bottom:154px; left:25px; right:25px; }
 .cinematic-copy>.eyebrow { font-size:8px; letter-spacing:.15em; max-width:250px; line-height:1.8; margin-bottom:25px; }
 .cinematic-copy h1 { font-size:clamp(45px,12vw,82px); line-height:1.04; letter-spacing:-.05em; }
 .headline-em { font-size:1.01em; }.headline-window { padding-bottom:.12em; margin-bottom:0; }
 .cinematic-description { font-size:12px; line-height:1.7; max-width:370px; margin-top:23px; color:#edf0e7df; }
 .cinematic-actions { gap:18px; margin-top:24px; align-items:stretch; }.cinematic-primary,.cinematic-secondary { font-size:10px; min-height:48px; gap:18px; }.cinematic-primary { padding:14px 15px; }.cinematic-secondary { gap:12px; }
 .cinematic-footer { left:25px; right:25px; padding:22px 0; gap:14px; }.hero-project-index { font-size:8px; }.hero-project-link>span:nth-child(2) { font-size:14px; }.hero-project-link small { max-width:250px; font-size:8px; line-height:1.7; }.hero-project-link>span:nth-child(2)>span { margin-left:14px; }.hero-scroll>span:first-child { display:none; }.scroll-arrow { width:34px; height:44px; }
 .introduction { padding:68px 25px; }.section-kicker { margin-bottom:28px; }.intro-main h2 { font-size:45px; }.intro-copy .lead { font-size:20px!important; }.design-services { gap:25px; margin-top:38px; }.design-services h3 { font-size:24px; margin-top:15px; }.design-services p { font-size:14px; }
 .approach { padding-top:67px; }.approach-heading { display:block; padding-inline:25px; margin-bottom:32px; }.approach-heading>.eyebrow { font-size:9px; margin-bottom:28px; }.approach-heading h2 { font-size:50px; }.approach-heading p { font-size:14px; margin-top:24px; }
 .story-instruction { margin-inline:25px; padding-bottom:15px; font-size:8px; line-height:1.6; gap:18px; }.story-instruction>span:first-child { max-width:160px; }.story-instruction>span:last-child { text-align:right; max-width:120px; }.story-instruction>span:last-child>span { margin-left:6px; }
 .design-stage { margin-inline:12px; }.stage-image-wrap { aspect-ratio:4/3; }.stage-caption { padding:18px 16px 6px; gap:16px; }.stage-caption>span { flex-direction:column; align-items:flex-start; gap:5px; }.stage-caption .eyebrow { font-size:12px; }#stage-description { font-size:10px; }
 .stage-controls { grid-template-columns:repeat(2,1fr); margin-top:0; }.stage-controls button { min-height:64px; padding:14px 9px; }.stage-controls button span { font-size:11px; margin-left:12px; }
 .process { padding:37px 25px 60px; }.process h3 { font-size:21px; }.process li p { font-size:13px; }
 .work { padding:68px 25px 60px; }.work-heading { padding:0; margin-bottom:30px; }.work-heading h2 { font-size:49px; }.work-intro { margin-top:23px; }.work-intro>p { font-size:14px; }
 .project-grid,.project-grid.filtered { display:grid; grid-template-columns:1fr; gap:36px; }.project-card:nth-child(n) { grid-column:1; }.project-card:nth-child(n) .project-image img { aspect-ratio:4/3; object-fit:cover; }.project-heading { padding-top:22px; display:block; }.project-card:nth-child(n) .project-heading h3 { font-size:32px; }.project-type { text-align:left; font-size:8px; }.project-heading p { font-size:13px; }.open-arrow { width:40px; height:40px; right:13px; bottom:13px; font-size:24px; }.company-credit { font-size:9px; margin-bottom:20px; }.portfolio-note { padding:0; }
 .studio h2,.engagement h2,.contact h2 { font-size:46px; }
}
@media(max-width:360px) { .cinematic-actions { gap:12px; }.cinematic-primary,.cinematic-secondary { font-size:9px; gap:12px; }.cinematic-copy { bottom:150px; }.cinematic-copy h1 { font-size:43px; } }
@media(prefers-reduced-motion:reduce) { .cinematic-image,.headline-line,.hero-enter,.project-image img { transform:none!important; animation:none!important; transition:none!important; } }