/* v4: a considered project journey, without changing the approved identity. */
html { scroll-padding-top:96px; }
.cinematic-copy { top:25%; }
.cinematic-copy h1 { font-size:clamp(76px,7.4vw,124px); }
.cinematic-description { max-width:410px; font-size:15px; line-height:1.7; }
.chapter-nav { position:sticky; top:0; z-index:7; display:flex; align-items:center; justify-content:space-between; gap:32px; min-height:76px; padding:10px 5vw; color:var(--paper); background:#192a35f7; border-bottom:1px solid #d4bb9133; backdrop-filter:blur(14px); }
.chapter-brand { display:flex; align-items:center; min-height:44px; }
.chapter-brand img { width:165px; height:auto; }
.chapter-links { display:flex; gap:32px; }
.chapter-links a { position:relative; display:flex; gap:10px; align-items:center; min-height:50px; font-size:12px; color:#ccd1cf; }
.chapter-links a>span { font-size:9px; color:#b3a78e; }
.chapter-links a::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--champagne); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.chapter-links a[aria-current=location],.chapter-links a:hover { color:var(--champagne); }
.chapter-links a[aria-current=location]::after,.chapter-links a:hover::after { transform:scaleX(1); }
.chapter-inquiry { font-size:12px; display:flex; gap:26px; min-height:44px; align-items:center; }
.chapter-inquiry>span { color:var(--champagne); }
.chapter-nav :focus-visible { outline:2px solid var(--champagne); outline-offset:4px; }
.page-progress { position:absolute; height:2px; left:0; right:0; bottom:-1px; background:var(--champagne); transform-origin:left; transform:scaleX(var(--page-progress,0)); opacity:.65; pointer-events:none; }
.introduction { padding-top:80px; padding-bottom:78px; }
.intro-label { display:flex; align-items:center; gap:25px; margin-bottom:30px; color:var(--gold); }
.intro-rule { height:1px; width:90px; background:#b5a78c; }
.intro-label .eyebrow { font-size:9px; }
.intro-main { grid-template-columns:1.4fr 1fr; gap:9%; align-items:center; }
.intro-main h2 { font-size:clamp(42px,4.2vw,66px); line-height:1.05; }
.intro-copy .lead { font-size:21px!important; }
.intro-copy>p+p { font-size:14px; line-height:1.8; margin-top:12px; }
.intro-copy .text-link { margin-top:19px; font-size:11px; gap:20px; }
.work { padding-top:80px; padding-bottom:78px; background:#efeee9; border-top:1px solid #d9d8d0; }
.work-heading { display:grid; grid-template-columns:1.3fr 1fr; gap:9%; align-items:end; margin-bottom:44px; }
.work-heading h2 { font-size:clamp(52px,4.7vw,76px); line-height:1.03; }
.work-heading h2 em { color:var(--gold); font-family:var(--cinematic-serif); }
.work-intro { max-width:490px; margin-top:0; }
.work-intro>p { font-size:14px; line-height:1.75; }
.work-intro .work-disclosure { margin:16px 0; font-size:10px; color:#59636a; }
.filters { display:flex; flex-wrap:wrap; gap:0; padding:0; background:none; border-radius:0; border-bottom:1px solid #c8c9c2; }
.filters button { padding:12px 17px; border-radius:0; color:#59636a; position:relative; font-size:12px; background:none; border:0; border-bottom:2px solid transparent; }
.filters button.active { color:#192a35; border-bottom-color:#816b48; background:#e4e2d9; box-shadow:none; }
.filters button:hover { background:#e6e4dc; }
.project-grid,.project-grid.filtered { gap:44px 48px; }
.project-card:first-child .project-image img { aspect-ratio:16/7.4; }
.project-card:nth-child(2) .project-image img { aspect-ratio:4/3; }
.project-card:nth-child(3) { margin-top:64px; }
.project-card:nth-child(3) .project-image img { aspect-ratio:4/3; }
.project-card:nth-child(n+4) { margin-top:0; }
.project-card .project-image { overflow:hidden; }
.project-card .project-image::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px #192a3512; pointer-events:none; }
.project-card .project-heading { padding-top:22px; }
.project-card:first-child .project-heading h3 { font-size:42px; }
.project-card .project-heading h3 { margin-block:10px; }
.project-card .company-credit { font-size:11px; }
.project-explore { opacity:1; transform:none; }
.project-detail-link { min-height:30px; display:inline-flex; align-items:center; }
.portfolio-controls { border-top:0; padding-top:0; margin-top:35px; }
.outline-button { display:flex; align-items:center; justify-content:space-between; gap:35px; }
.portfolio-note { max-width:880px; font-size:10px; line-height:1.7; margin-top:28px; }
.approach { background:var(--ink); padding-top:90px; }
.approach-heading { display:grid; grid-template-columns:1fr 2fr; gap:6%; margin-bottom:55px; text-align:left; }
.approach-heading>.eyebrow { font-size:9px; }
.approach-heading h2 { font-size:clamp(42px,4.2vw,64px); line-height:1.08; }
.approach-heading h2 em { color:var(--champagne); }
.approach-heading p { margin-left:0; max-width:520px; font-size:14px; line-height:1.8; }
.design-story { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,2fr); gap:5%; align-items:start; }
.story-rail { min-width:0; }
.story-rail-label { font-size:9px; line-height:1.6; letter-spacing:.12em; text-transform:uppercase; color:#b2c0c3; margin-bottom:22px; }
.story-rail .stage-controls { display:flex; flex-direction:column; gap:0; border:0; margin:0; padding:0; }
.story-rail .stage-controls button { position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; width:100%; padding:25px 0; min-height:170px; background:none; border-radius:0; border-top:1px solid #8b9ba04d; margin:0; text-align:left; }
.story-rail .stage-controls button:last-child { border-bottom:1px solid #8b9ba04d; }
.story-rail .stage-controls button[aria-pressed=true] { border-top-color:var(--champagne); background:none; }
.story-rail .stage-controls button img { position:absolute; right:0; bottom:19px; width:60px; height:38px; margin:0; opacity:.75; filter:saturate(.7); }
.story-rail .stage-controls button[aria-pressed=true] img { width:60px; opacity:1; filter:none; }
.story-rail .stage-controls button .story-step-number { font-size:10px; letter-spacing:.06em; color:#a3b3b9; margin:7px 0 0; align-self:start; text-align:left; }
.story-rail .stage-controls button .view-choice { gap:0; margin:0; display:flex; align-items:flex-start; flex-direction:column; }
.story-rail .stage-controls button .view-name { margin:0; font-size:23px; letter-spacing:-.035em; line-height:1.2; color:#dfe4e1; }
.story-rail .stage-controls button .view-note { margin:12px 0 0; max-width:250px; font-size:12px; line-height:1.7; color:#9fb0b8; }
.story-rail .stage-controls button .view-label { display:flex; gap:10px; margin:19px 65px 0 0; font-size:10px; color:#aabac1; min-height:20px; align-items:center; }
.story-rail .stage-controls button .view-label>span { margin:0; font-size:12px; }
.story-rail .stage-controls button[aria-pressed=true] .view-name,.story-rail .stage-controls button[aria-pressed=true] .story-step-number,.story-rail .stage-controls button[aria-pressed=true] .view-label { color:var(--champagne); }
.story-rail .stage-controls button:hover .view-name { color:var(--champagne); }
.story-rail .stage-controls button:focus-visible { outline:2px solid var(--champagne); outline-offset:5px; }
.story-full-study { min-height:50px; font-size:11px; display:flex; justify-content:space-between; gap:15px; align-items:center; color:var(--champagne); margin-top:12px; }
.design-story .design-stage { position:sticky; top:108px; max-width:none; width:100%; margin:0; border-radius:0; overflow:hidden; background:#10212c; }
.design-story .stage-image-wrap { width:100%; height:min(500px,calc(100svh - 390px)); aspect-ratio:auto; background:#0f202a; }
.design-story .stage-caption { padding:25px 26px; display:block; }
.design-story .stage-caption-top { display:flex; flex-direction:column; align-items:flex-start; gap:13px; }
.design-story .stage-title-meta { width:100%; justify-content:space-between; flex-direction:row-reverse; }
.design-story #stage-scene-number { font-size:10px; }
.design-story .stage-caption .eyebrow { font-size:17px; }
.design-story #stage-description { font-size:12px; color:var(--champagne); }
.design-story #stage-detail { font-size:12px; line-height:1.7; margin:12px 0 0; min-height:42px; max-width:580px; }
.study-credit { font-size:9px; color:#9fb0b8; margin-top:18px; padding-top:16px; border-top:1px solid #a6b4ba2e; line-height:1.7; }
.design-path { display:grid; grid-template-columns:.9fr 2fr; gap:5%; padding-top:65px; padding-bottom:80px; }
.design-path-intro .eyebrow { color:var(--champagne); font-size:10px; }
.design-path-intro p { font-size:13px; line-height:1.8; color:#b2c0c5; max-width:260px; margin-top:18px; }
.path-disclosures details { border-top:1px solid #8b9ba04d; }
.path-disclosures details:last-child { border-bottom:1px solid #8b9ba04d; }
.path-disclosures summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:30px 1fr 25px; gap:14px; align-items:center; min-height:77px; padding-block:18px; font-size:21px; line-height:1.3; letter-spacing:-.02em; }
.path-disclosures summary::-webkit-details-marker { display:none; }
.path-number { font-size:10px; letter-spacing:.06em; color:var(--champagne); }
.path-disclosures summary>span:last-child { color:var(--champagne); font-size:21px; transition:transform .2s; }
.path-disclosures details[open] summary>span:last-child { transform:rotate(45deg); }
.path-disclosures details>div { padding:0 40px 22px 44px; }
.path-disclosures p { color:#b2c0c5; line-height:1.8; font-size:13px; }
.path-disclosures a { display:inline-flex; align-items:center; min-height:44px; color:var(--champagne); font-size:11px; margin-top:8px; }
.path-disclosures :focus-visible { outline:2px solid var(--champagne); outline-offset:5px; }
.studio { border-top:1px solid #d4bb9159; padding-top:85px; padding-bottom:85px; }
.studio h2 { font-size:clamp(44px,4.2vw,66px); }
.studio-copy>.lead { font-size:24px!important; }
.studio-copy>p:not(.lead) { font-size:14px; line-height:1.85; }
.engagement { padding-top:85px; padding-bottom:85px; }
.engagement h2 { font-size:clamp(44px,4.2vw,66px); }
.contact { border-top:1px solid #d4bb9159; }
.contact h2 { font-size:clamp(64px,6.6vw,104px); line-height:.98; }
.contact-main { grid-template-columns:1.25fr 1fr; gap:10%; }
.contact-main>div p { font-size:15px; line-height:1.8; }
.contact-cta { min-height:58px; font-size:14px; }
@media(min-width:1600px) { .chapter-nav { padding-inline:max(5vw,calc((100vw - 1440px)/2)); } }
@media(max-width:1100px) {
 .chapter-brand { display:none; }.chapter-nav { gap:20px; }.chapter-links { gap:24px; }
 .design-story,.design-path { grid-template-columns:minmax(230px,.85fr) minmax(0,1.5fr); gap:5%; }
 .story-rail .stage-controls button .view-name { font-size:21px; }
 .design-story .design-stage { top:96px; }.design-story .stage-caption { padding:22px; }
}
@media(max-width:760px) {
 html { scroll-padding-top:78px; }
 .cinematic-copy { top:auto; bottom:158px; }.cinematic-copy h1 { font-size:clamp(43px,12vw,82px); }.cinematic-description { font-size:13px; max-width:340px; }
 .chapter-nav { padding:7px 18px; gap:16px; min-height:62px; }.chapter-links { gap:20px; }.chapter-links a { font-size:11px; min-height:46px; }.chapter-links a>span { display:none; }.chapter-inquiry { font-size:0; gap:0; }.chapter-inquiry::before { content:'Enquire'; font-size:11px; }.chapter-inquiry>span { font-size:13px; margin-left:7px; }
 .introduction { padding:55px 25px 58px; }.intro-label { margin-bottom:25px; }.intro-main { display:block; }.intro-main h2 { font-size:43px; }.intro-copy { margin-top:26px; }.intro-copy .lead { font-size:19px!important; }.intro-copy>p+p { font-size:14px; }.intro-copy .text-link { font-size:11px; }.intro-rule { width:60px; }
 .work { padding:58px 25px; }.work-heading { display:block; margin-bottom:30px; }.work-heading h2 { font-size:49px; }.work-intro { margin-top:25px; }.work-intro>p { font-size:13px; }.work-intro .work-disclosure { font-size:9px; }.filters button { padding-inline:15px; font-size:11px; }
 .project-grid,.project-grid.filtered { gap:32px; }.project-card:nth-child(n) { margin:0; }.project-card:nth-child(n) .project-image img { aspect-ratio:4/3; }.project-card:nth-child(n) .project-heading h3 { font-size:30px; }.project-card .project-heading { padding-top:18px; }.project-heading .project-type { font-size:8px; }.project-card .company-credit { font-size:10px; }.project-heading p { font-size:12px; }.portfolio-controls { gap:15px; margin-top:22px; }.portfolio-controls p { font-size:11px; }.outline-button { width:100%; font-size:12px; }.portfolio-note { font-size:10px; margin-top:22px; }
 .approach { padding-top:60px; }.approach-heading { display:block; padding-inline:25px; margin-bottom:30px; }.approach-heading h2 { font-size:41px; }.approach-heading p { font-size:13px; }.approach-heading>.eyebrow { margin-bottom:23px; }
 .design-story { display:flex; flex-direction:column; padding-inline:15px; gap:22px; }.design-story .design-stage { order:0; position:static; width:100%; }.story-rail { order:1; width:100%; padding-inline:10px; }.story-rail-label { font-size:8px; margin-bottom:16px; }.design-story .stage-image-wrap { aspect-ratio:4/3; height:auto; }.design-story .stage-caption { padding:20px 18px; }.design-story .stage-caption .eyebrow { font-size:15px; }.design-story #stage-detail { font-size:12px; min-height:61px; margin-top:9px; }.design-story #stage-description { font-size:11px; }.study-credit { font-size:8px; margin-top:12px; padding-top:12px; }.design-story .stage-caption-top { gap:12px; }
 .story-rail .stage-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }.story-rail .stage-controls button { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:82px; padding:15px 0; }.story-rail .stage-controls button:last-child { border-bottom:0; }.story-rail .stage-controls button img { display:none; }.story-rail .stage-controls button .story-step-number { margin:0; font-size:10px; }.story-rail .stage-controls button .view-name,.story-rail .stage-controls button .view-note { display:none; }.story-rail .stage-controls button .view-label { margin:0; font-size:13px; }.story-full-study { font-size:11px; margin-top:4px; }
 .design-path { display:block; padding:36px 25px 55px; }.design-path-intro p { max-width:none; font-size:12px; margin:12px 0 24px; }.path-disclosures summary { font-size:19px; grid-template-columns:24px 1fr 20px; gap:10px; min-height:75px; }.path-disclosures details>div { padding:0 0 17px 34px; }.path-disclosures p { font-size:12px; }
 .studio { padding-block:60px; }.studio h2,.engagement h2 { font-size:44px; }.studio-copy>.lead { font-size:23px!important; }.studio-copy>p:not(.lead) { font-size:14px; }.engagement { padding-block:60px; }
 .contact { padding-top:60px; }.contact-main { display:block; }.contact-main>div { margin-top:28px; }.contact h2 { font-size:60px; }.contact-main>div p { font-size:14px; }
}
@media(max-width:360px) { .chapter-nav { padding-inline:13px; gap:10px; }.chapter-links { gap:15px; }.chapter-links a { font-size:10px; }.chapter-inquiry::before { font-size:10px; }.cinematic-copy h1 { font-size:43px; }.cinematic-description { font-size:12px; }.intro-main h2 { font-size:38px; }.work-heading h2 { font-size:44px; }.filters button { padding-inline:11px; }.approach-heading h2 { font-size:36px; }.story-rail .stage-controls { gap:0 15px; }.story-rail .stage-controls button .view-name { font-size:18px; }.contact h2 { font-size:53px; } }
@media(min-width:761px) and (max-height:680px) { .design-story .design-stage { position:static; }.design-story .stage-image-wrap { height:auto; aspect-ratio:16/10; } }
@media(prefers-reduced-motion:reduce) { .chapter-links a::after,.path-disclosures summary>span:last-child { transition:none; } }