/* Hero refinements: film, aligned teaser, and dimensional marquee separators. */
.dark-journey{--marquee-size:48px}.marquee{padding-block:48px}.marquee-track>span{font-size:48px;gap:28px}.marquee .marquee-shape{width:34px;height:34px;flex:none;filter:drop-shadow(0 3px 4px #0008)}
.hero .hero-copy{width:70%;padding-right:0;max-width:none;pointer-events:none}.hero .hero-copy h1{pointer-events:auto}
.hero-video-field{position:absolute;top:148px;right:0;width:55%;height:min(62svh,520px);z-index:1;overflow:hidden;mask-image:radial-gradient(ellipse 68% 64% at 62% 50%,#000 20%,#000c 45%,transparent 74%);-webkit-mask-image:radial-gradient(ellipse 68% 64% at 62% 50%,#000 20%,#000c 45%,transparent 74%)}
.hero-video{display:block;width:100%;height:100%;object-fit:cover;object-position:58% center;filter:grayscale(1) brightness(.66) contrast(1.05);transition:filter .7s ease}
.hero-video-field:is(:hover,:focus-visible) .hero-video{filter:grayscale(0) brightness(.85) contrast(1.05)}
.hero-video-field:focus-visible{outline:0}
.hero-footer{position:relative;z-index:3;margin:28px var(--gutter) 0;display:flex;align-items:center;justify-content:space-between;gap:32px}
.hero-continue{font-size:12px;line-height:18px;display:inline-flex;align-items:center;gap:24px;white-space:nowrap}.hero-continue:hover{color:var(--green)}.hero-continue>span{font-size:18px;line-height:1}
.hero-footer .case-teaser{margin:0;width:320px;max-width:100%;flex:none}
.teaser-link{grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto;align-items:center;column-gap:12px}
.case-teaser .live-art{grid-column:1;grid-row:1;height:96px}
.teaser-copy{grid-column:2;grid-row:1;align-self:center;display:flex;flex-direction:column;gap:4px}
.teaser-copy>.eyebrow{font-size:12px;line-height:18px;margin:0;color:#a6b1b4}
.teaser-copy>.teaser-title{margin:0;padding:0;min-height:0;font-size:12px;line-height:1.4}
.case-teaser .teaser-controls{top:calc(100% + 13px);bottom:auto;left:0;right:0;height:8px;justify-content:center;gap:6px}
.case-teaser .teaser-dot{height:8px;width:12px}.case-teaser .teaser-dot:after{top:2px;left:4px}.case-teaser .teaser-dot.active:after{top:1.5px;left:3.5px}
.manifesto-scene .manifesto-aside{left:var(--gutter);right:auto;text-align:left}.manifesto-scene .manifesto-aside>p{text-align:left}.manifesto-scene .manifesto-actions{justify-content:flex-start}
@media(max-width:760px){.hero{min-height:760px}.hero .hero-copy{width:100%;padding-inline:24px}.hero-video-field{top:245px;right:-8%;width:100%;height:330px;mask-image:radial-gradient(ellipse 65% 62% at 65% 50%,#000a 15%,#0008 35%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 65% 62% at 65% 50%,#000a 15%,#0008 35%,transparent 75%)}.hero-footer{margin:220px 24px 0;flex-direction:column-reverse;align-items:flex-start;gap:40px}.hero-footer .case-teaser{align-self:flex-end;width:320px}.hero-continue{align-self:flex-start}.hero{height:auto;min-height:100svh;padding-bottom:40px}.manifesto-scene .manifesto-aside{left:24px;right:24px;width:auto}.dark-journey{--marquee-size:48px}.marquee-track>span{font-size:48px}.marquee{padding-block:48px}}
@media(prefers-reduced-motion:reduce){.hero-video{transition:none}}
.hero{overflow:clip}

/* Reference diamond turns: eight rotations per marquee pass. */
.dark-journey{--marquee-size:32px;--marquee-height:106px}.marquee{padding-block:32px}.marquee-track>span{font-size:32px;gap:24px}
.marquee .marquee-shape{display:block;width:40px;height:40px;flex:none;filter:none}
.marquee .diamond-sprite{background-repeat:no-repeat;background-size:1600% 1200%;background-position:0 0;transform-origin:center}

/* Film blends into black beneath the particle layer, matching the reference. */
.visual-sticky .hero-video-field{inset:0;top:0;right:0;width:100%;height:100%;z-index:0;pointer-events:none;mask-image:linear-gradient(90deg,transparent 8%,#0001 30%,#000 66%);-webkit-mask-image:linear-gradient(90deg,transparent 8%,#0001 30%,#000 66%)}
.hero-video-window{position:absolute;left:17%;top:13%;width:99%;height:66%;opacity:.25;overflow:hidden;pointer-events:auto;mask-image:radial-gradient(ellipse 68% 66% at 62% 48%,#000 12%,#000c 35%,transparent 73%);-webkit-mask-image:radial-gradient(ellipse 68% 66% at 62% 48%,#000 12%,#000c 35%,transparent 73%)}
.hero-video{pointer-events:none;filter:grayscale(1) brightness(.75) contrast(1.05)}
.hero-video-field:is(:hover,:focus-visible) .hero-video{filter:grayscale(0) brightness(.75) contrast(1.05)}
#logo-stage{z-index:1;pointer-events:none}
.hero{pointer-events:none}.hero a,.hero button,.hero .hero-copy h1{pointer-events:auto}
@media(max-width:760px){.visual-sticky .hero-video-field{mask-image:linear-gradient(180deg,transparent 20%,#0007 42%,#000 65%);-webkit-mask-image:linear-gradient(180deg,transparent 20%,#0007 42%,#000 65%)}.hero-video-window{left:-8%;top:36%;width:180%;height:42%}}

/* Responsive folds: the teaser closes the opening scene. */
.hero{height:100svh;min-height:560px;padding-bottom:0}
.hero .section-label{height:100px}
.hero h1{text-transform:none;font-size:clamp(36px,5.1vw,76px);line-height:1.06}
.hero-footer{position:absolute;inset:auto var(--gutter) 44px;margin:0;flex-direction:row;align-items:center}
.hero-footer .case-teaser{align-self:auto}
.case-teaser .teaser-controls{justify-content:flex-end;left:auto;right:0;top:calc(100% + 12px)}
.manifesto{height:100svh}
.manifesto-scene .manifesto-aside{bottom:calc(var(--marquee-height) + 56px)}
.hero-video-window{left:8%;top:8%;width:110%;height:80%;opacity:.20;mask-image:radial-gradient(ellipse 53% 48% at 60% 48%,#000b 0%,#0008 22%,#0004 43%,#0001 62%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 53% 48% at 60% 48%,#000b 0%,#0008 22%,#0004 43%,#0001 62%,transparent 80%)}
@media(min-width:1650px){.hero h1{font-size:76px}.manifesto{height:100svh}}
@media(max-width:760px){.hero{height:100svh;min-height:560px}.hero .section-label{height:100px}.hero h1{font-size:clamp(34px,5.6vw,43px)}.hero-footer{inset:auto 24px 44px;gap:20px}.hero-footer .case-teaser{width:280px}.hero-continue{gap:12px}.hero-video-window{left:-12%;top:12%;width:160%;height:70%}.manifesto{height:100svh}.manifesto-scene .manifesto-aside{bottom:calc(var(--marquee-height) + 56px)}}
@media(max-width:520px){.hero{min-height:660px}.hero-footer{flex-direction:column-reverse;align-items:flex-start;gap:32px}.hero-footer .case-teaser{align-self:flex-end;width:280px}.hero h1{font-size:clamp(31px,7.8vw,40px)}.manifesto-scene h2{font-size:30px}.manifesto-scene .manifesto-actions{gap:10px}.manifesto-scene .manifesto-aside>p{max-width:370px}}

/* The tag and heading share a precise 56px gap. */
.hero .section-label{height:calc(var(--label-y) + 65.5px)}
.manifesto{z-index:2}.manifesto h2{top:96px;left:var(--gutter);font-size:clamp(32px,3.8vw,56px);line-height:1.1;letter-spacing:-.025em;font-weight:500}
/* A shared center anchor makes both header edges arrive together. */
.header,.header.scrolled{left:50%;right:auto;transform:translateX(-50%);transition:width .6s cubic-bezier(.65,0,.25,1),height .6s cubic-bezier(.65,0,.25,1),top .6s cubic-bezier(.65,0,.25,1),padding .6s cubic-bezier(.65,0,.25,1),border-radius .6s cubic-bezier(.65,0,.25,1),background .3s,color .3s,opacity .25s}
.header.menu-open{opacity:0;pointer-events:none}
.header .brand img{transition:width .6s cubic-bezier(.65,0,.25,1),height .6s cubic-bezier(.65,0,.25,1)}
@media(max-height:650px) and (min-width:761px){.hero h1{font-size:clamp(34px,4.7vw,58px)}}
@media(max-width:760px){.manifesto h2{top:102px;left:24px;font-size:34px}}
@media(max-width:520px){.manifesto h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){.header,.header.scrolled,.header .brand img{transition:none}}

/* Static hero portrait shares the headline row and teaser width. */
.hero-content{position:relative;z-index:2;margin-inline:var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:stretch;pointer-events:none}
.hero .hero-content .hero-copy{width:auto;padding:0;margin:0;max-width:none}
.hero-photo{position:relative;margin:0;min-width:0;border-radius:8px;overflow:hidden;pointer-events:auto}
.hero-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:grayscale(1);transition:filter .6s ease}
.hero-photo:hover img{filter:grayscale(0)}
.latest-cases-label{position:absolute;left:0;top:-30px;font:500 12px/18px Public Sans,Arial,sans-serif;color:#a6b1b4;text-transform:uppercase}
@media(max-height:650px) and (min-width:761px){.hero h1{font-size:clamp(34px,4.25vw,54px)}.hero-footer{bottom:32px}}
@media(max-width:900px) and (min-width:601px){.hero-content{grid-template-columns:minmax(0,1fr) 280px;gap:24px}.hero-footer .case-teaser{width:280px}}
@media(max-width:760px){.hero-content{margin-inline:24px}.hero .hero-content .hero-copy{padding:0}}
@media(max-width:600px){.hero{min-height:760px}.hero-content{grid-template-columns:1fr;gap:24px}.hero-photo{width:280px;max-width:100%;height:var(--hero-title-height);justify-self:end}.hero-footer .case-teaser{width:280px}}
@media(prefers-reduced-motion:reduce){.hero-photo img{transition:none}}
/* Match the shared CTA interaction in both header layouts and themes. */
.header .header-cta.split-cta:is(:hover,:focus-visible) .header-cta-label{background:var(--green);color:var(--ink)}
.header .header-cta:is(:hover,:focus-visible)>img{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.header .header-cta .header-cta-label,.header .header-cta>img{transition:none}}

/* A longer complete-logo phase separates assembly from dissolution. */
.dark-journey .manifesto{height:190svh;padding-top:96px}
.dark-journey .manifesto h2{position:static;margin:0;padding:0 var(--gutter);transform:none;opacity:1;visibility:visible;animation:none;transition:none}
@media(max-width:760px){.dark-journey .manifesto{padding-top:102px}.dark-journey .manifesto h2{padding-inline:24px}}
@media(prefers-reduced-motion:reduce){.dark-journey .manifesto{height:100svh}}

/* The complete manifesto copy travels as one normal-flow block above the marquee. */
.dark-journey .manifesto{display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gutter) 56px}
.manifesto-content{width:min(429px,100%)}
.dark-journey .manifesto h2{padding:0;margin:0 0 24px}
.manifesto .manifesto-aside{position:static;inset:auto;width:100%;max-width:none;margin:0;transform:none;opacity:1;visibility:visible}
.manifesto .manifesto-aside>p{font-size:clamp(14px,1.45vw,18px);line-height:1.45;max-width:none}
.manifesto .manifesto-actions{margin-top:16px;flex-wrap:nowrap;gap:12px}
.hero h1{text-transform:uppercase}
@media(max-width:760px){.dark-journey .manifesto{padding:0 24px 56px}.dark-journey .manifesto h2{padding:0}.manifesto .manifesto-aside>p{font-size:14px}.manifesto .manifesto-actions{gap:14px}}

/* The complete second fold enters immediately after the opening hero. */
.dark-journey{padding-bottom:0}
.dark-journey .manifesto{display:block;padding:0;height:190svh;pointer-events:auto}
.manifesto-pin{position:sticky;top:0;height:100svh}
.manifesto-content{width:auto;height:calc(100svh - var(--marquee-height));margin-inline:var(--gutter);padding:96px 0 56px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:24px}
.dark-journey .manifesto h2{margin:0;flex:none}
.manifesto .manifesto-aside{width:min(429px,100%);flex:none}
.manifesto-pin .marquee{position:absolute;inset:auto var(--rail) 0;margin:0}
@media(max-width:760px){.dark-journey .manifesto{padding:0}.manifesto-content{margin-inline:24px;padding-top:102px}}
@media(prefers-reduced-motion:reduce){.dark-journey .manifesto{height:100svh}.manifesto-pin{position:relative}}
@media(max-height:650px){.strategy>span{left:-100px;top:-140px}.strategy>img:not(.dot):not(.dot-core){left:-80px;top:-115px;width:80px;height:115px}.branding>img:not(.dot):not(.dot-core){height:70px}.branding>span{top:80px}}
@media(min-width:601px) and (max-width:760px) and (max-height:650px){.hero h1{font-size:clamp(28px,4.3vw,34px)}}

/* Figma 2401:10960: larger central mark and a narrower lower-left copy column. */
.dark-journey .manifesto{height:calc(190svh + var(--marquee-height))}
.manifesto-pin{height:calc(100svh + var(--marquee-height))}
.manifesto-content{height:100svh}
.manifesto .manifesto-aside{width:min(429px,33.333vw)}
.manifesto .manifesto-aside>p{line-height:1.5}
@media(max-width:760px){.manifesto .manifesto-aside{width:min(370px,100%)}}
@media(prefers-reduced-motion:reduce){.dark-journey .manifesto{height:calc(100svh + var(--marquee-height))}}

.manifesto .manifesto-aside>p{font-size:clamp(12px,1.25vw,18px)}
@media(max-height:650px) and (min-width:761px){.strategy>span{left:-286px;top:-126px}.strategy>img:not(.dot):not(.dot-core){left:-230px;top:-105px;width:230px;height:105px}.branding>img:not(.dot):not(.dot-core){height:110px}.branding>span{top:120px}}
@media(max-width:760px){.manifesto .manifesto-aside>p{font-size:14px}}