/* --- neutralise the Webflow template's element styles on this page (must stay first) --- */
h1,h2,h3,h4,h5,h6,p,a,span,small,b,em,label,figcaption,li{color:inherit}
a{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;text-decoration:none}
p,li,label{font-size:inherit;line-height:inherit;font-weight:inherit;letter-spacing:inherit}
h1,h2,h3,h4,h5,h6,p,figure,ul,ol{margin:0}
h1,h2,h3,h4,h5,h6{text-transform:none}
em{font-style:normal}

:root{
  --cloud:#F0F8F9; --shell:#DBE6E1; --steel:#2A4650; --deep:#04262C; --black:#000; --frost:#C7FEFC;
  --head:'Stack Sans Headline', 'Helvetica Neue', Arial, sans-serif;
  --text:'Stack Sans Text', 'Helvetica Neue', Arial, sans-serif;
  --gutter:clamp(20px, 4vw, 64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--cloud); color:var(--deep);
  font-family:var(--text); font-weight:300; letter-spacing:-0.02em; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,.display{font-family:var(--head);font-weight:500;letter-spacing:-0.025em;line-height:1.02;text-wrap:balance}
.display{text-transform:uppercase;letter-spacing:-0.04em;line-height:.9}
.cs-eyebrow{font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.02em;text-transform:uppercase;opacity:.72}
p{max-width:52ch}
.cs-wrap{padding-left:var(--gutter);padding-right:var(--gutter);width:100%}
.cs-cut{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut,96px) * .683),calc(100% - var(--cut,96px)) 100%,0 100%)}
::selection{background:var(--frost);color:var(--deep)}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--deep);display:flex;align-items:flex-end;padding:var(--gutter);transition:opacity .9s var(--ease),visibility .9s}
.loader svg{width:min(60vw,520px);fill:var(--frost)}
.loader.done{opacity:0;visibility:hidden}

/* ---------- header ---------- */
.cs-site-header{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);color:#fff;transition:color .5s}
.cs-site-header::before{content:"";position:absolute;inset:0 0 auto 0;height:190%;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(2,14,17,.62),rgba(2,14,17,0));transition:opacity .5s}
.cs-site-header.cs-on-light{color:var(--deep)}
.cs-site-header.cs-on-light::before{opacity:1;background:linear-gradient(to bottom,rgba(240,248,249,.94) 0,rgba(240,248,249,.94) 55%,rgba(240,248,249,0))}
.cs-brand{display:flex;align-items:center;gap:14px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.cs-site-header.cs-brand-on .cs-brand{opacity:1;transform:none;pointer-events:auto}
.cs-brand svg{height:54px;width:auto;fill:currentColor;filter:drop-shadow(0 1px 10px rgba(0,0,0,.35))}
.cs-site-header.cs-on-light .cs-brand svg{filter:none}
.cs-brand span{font-family:var(--head);font-size:12px;letter-spacing:.02em;text-transform:uppercase;opacity:.8;display:none}
nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);font-family:var(--head);font-weight:500;font-size:13px;letter-spacing:.01em;text-shadow:0 1px 18px rgba(0,0,0,.45)}
.cs-site-header.cs-on-light nav{text-shadow:none}
.cs-soon{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.cs-soon i{width:7px;height:7px;background:var(--frost);clip-path:polygon(0 0,100% 0,100% 55%,45% 100%,0 100%);animation:soon 2.4s ease-in-out infinite}
.cs-soon .cs-short{display:none}
.cs-site-header.cs-on-light .cs-soon i{background:var(--deep)}
@keyframes soon{0%,100%{opacity:1}50%{opacity:.25}}
nav a{position:relative;padding:6px 0;opacity:.88}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:currentColor;transition:right .4s var(--ease)}
nav a:hover::after{right:0}
nav .cs-cta{opacity:1;padding:10px 16px;border:1px solid currentColor;clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 13px) 100%,0 100%);transition:background .3s,color .3s}
nav .cs-cta:hover{background:var(--frost);color:var(--deep);border-color:var(--frost)}
nav .cs-cta::after{display:none}
.cs-site-header.cs-on-light nav .cs-cta:hover{background:var(--deep);color:var(--cloud);border-color:var(--deep)}
@media (max-width:760px){nav a:not(.cs-cta){display:none}.cs-soon .cs-long{display:none}.cs-soon .cs-short{display:inline}}

/* ---------- film ---------- */
.film{position:relative;height:660vh;background:var(--deep)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--black)}
.plate{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
.plate:first-child{opacity:1}
.plate img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:50% 50%;will-change:transform,filter}
.plate.p1 img{object-position:50% 45%}
.plate.p2 img{object-position:50% 55%}
.plate.p3 img{object-position:50% 60%;filter:grayscale(1) contrast(1.05)}
.plate.p4 img{object-position:42% 50%}
.plate.p5 img{object-position:52% 40%}
@media (max-width:760px){
  .plate.p1 img{object-position:40% 50%}
  .plate.p2 img{object-position:55% 50%}
  .plate.p3 img{object-position:62% 50%}
  .plate.p4 img{object-position:30% 50%}
  .plate.p5 img{object-position:58% 35%}
}
.grain{position:absolute;inset:-20%;pointer-events:none;opacity:.55;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .5s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(4%,4%)}}
.vignette{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 90% at 50% 40%,transparent 50%,rgba(1,10,12,.55) 100%),
  linear-gradient(to top,rgba(1,10,12,.72),rgba(1,10,12,0) 48%)}
.stage-fade{position:absolute;inset:0;background:var(--deep);opacity:0;pointer-events:none}

/* hero wordmark */
.hero{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(22px,4vh,48px);display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px;color:#fff;will-change:transform,opacity}
.hero svg{width:100%;height:auto;fill:currentColor;filter:drop-shadow(0 2px 24px rgba(0,0,0,.45))}
.hero .char{display:inline-block;will-change:transform}
.hero-meta{display:flex;flex-direction:column;gap:6px;padding-bottom:1.4%;font-family:var(--head);font-weight:500;font-size:clamp(12px,1vw,14px);letter-spacing:.02em;text-transform:uppercase;text-shadow:0 1px 18px rgba(0,0,0,.5);white-space:nowrap}
.hero-meta b{font-weight:500;color:var(--frost)}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero-meta{flex-direction:row;gap:18px;padding-bottom:0}}

/* readout */
.readout{position:absolute;top:calc(var(--header-h) + 10px);right:var(--gutter);display:grid;justify-items:end;gap:6px;color:var(--frost);text-shadow:none;text-align:right;font-family:var(--head);background:rgba(4,38,44,.72);padding:14px 18px 16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 15px) 100%,0 100%)}
.readout .yr{font-size:clamp(28px,3.2vw,46px);font-weight:500;letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums}
.readout .loc{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cloud);opacity:.9}
.readout .seg{display:flex;gap:4px;margin-top:6px}
.readout .seg i{display:block;width:26px;height:2px;background:rgba(240,248,249,.3);overflow:hidden;position:relative}
.readout .seg i::after{content:"";position:absolute;inset:0;background:var(--frost);transform:scaleX(var(--f,0));transform-origin:left}
@media (max-width:760px){.readout{top:calc(var(--header-h) + 2px)}.readout .yr{font-size:26px}.readout .seg i{width:18px}}

/* beats */
.beat{position:absolute;left:var(--gutter);bottom:clamp(26px,9vh,96px);max-width:min(620px,78vw);opacity:0;color:#fff;will-change:transform,opacity;pointer-events:none}
.beat::before{content:"";position:absolute;z-index:-1;inset:-60% -30% -60% -24%;background:radial-gradient(58% 60% at 26% 55%,rgba(1,10,12,.66),rgba(1,10,12,.34) 48%,transparent 78%)}
.beat h2{font-size:clamp(34px,5.6vw,84px);font-weight:500;letter-spacing:-0.035em;line-height:.96;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.beat p{margin-top:16px;font-size:clamp(15px,1.25vw,19px);max-width:40ch;opacity:.9;text-shadow:0 1px 16px rgba(0,0,0,.45)}
.beat.finale{z-index:3}
.beat.finale h2{color:var(--frost)}
.stage-fade{z-index:4}

/* ---------- sections ---------- */
.cs-section{position:relative;min-height:min(92vh,900px);display:flex;align-items:center;padding-top:clamp(72px,10vh,140px);padding-bottom:clamp(72px,10vh,140px)}
.cs-section .cs-wrap > *{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.cs-section.cs-in .cs-wrap > *{opacity:1;transform:none}
.cs-section.cs-in .cs-wrap > :nth-child(2){transition-delay:.09s}
.cs-section.cs-in .cs-wrap > :nth-child(3){transition-delay:.18s}
.cs-section.cs-in .cs-wrap > :nth-child(4){transition-delay:.27s}
.landing{background:linear-gradient(to bottom,var(--deep) 0,var(--deep) 100%);min-height:100vh}
.landing .display{font-size:clamp(56px,11.5vw,196px);color:var(--frost)}
.landing .display em{font-style:normal;color:var(--cloud)}
.landing .lede{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:clamp(36px,6vh,72px)}
.landing .lede p{grid-column:1/span 6;font-size:clamp(17px,1.5vw,22px);max-width:44ch}
.landing .lede .meta{grid-column:9/span 4;font-family:var(--head);font-size:13px;letter-spacing:.02em;text-transform:uppercase;display:grid;gap:8px;align-content:end;opacity:.75}
@media (max-width:900px){.landing .lede{grid-template-columns:1fr;gap:28px}.landing .lede p,.landing .lede .meta{grid-column:1}}

/* services */
.services{background:var(--shell);color:var(--deep)}
.services .head{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end;margin-bottom:clamp(36px,5vh,64px)}
.services h2{font-size:clamp(36px,5vw,76px)}
.services .head p{font-size:clamp(15px,1.2vw,18px);max-width:46ch;justify-self:start}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.card{display:grid;gap:18px;align-content:start}
.card figure{aspect-ratio:4/5;overflow:hidden;background:var(--steel);--cut:72px}
.card figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--ease-out)}
.card:hover figure img{transform:scale(1)}
.card .cs-n{font-family:var(--head);font-size:12px;letter-spacing:.04em;opacity:.6}
.card h3{font-size:clamp(22px,2vw,30px);margin-top:-8px}
.card p{font-size:15px;opacity:.85}
@media (max-width:1000px){.grid{grid-template-columns:1fr 1fr}.services .head{grid-template-columns:1fr}}
@media (max-width:520px){.grid{grid-template-columns:1fr}.card figure{aspect-ratio:16/11}}

/* marquee */
.marquee{background:var(--deep);color:var(--cloud);border-top:1px solid rgba(240,248,249,.1);border-bottom:1px solid rgba(240,248,249,.1);overflow:hidden;padding:18px 0;font-family:var(--head);font-weight:500;font-size:clamp(14px,1.3vw,18px);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.marquee .row{display:inline-flex;gap:0;will-change:transform}
.marquee span{display:inline-block;padding:0 28px;opacity:.75}
.marquee span::after{content:"";display:inline-block;width:6px;height:6px;background:var(--frost);margin-left:56px;vertical-align:middle;clip-path:polygon(0 0,100% 0,100% 55%,45% 100%,0 100%)}

/* work */
.work{background:var(--deep);color:var(--cloud)}
.work-pin{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:var(--header-h)}
.work .head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}
.work h2{font-size:clamp(36px,5vw,76px)}
.work .head p{font-family:var(--head);font-size:13px;letter-spacing:.02em;text-transform:uppercase;opacity:.65;white-space:nowrap}
.track{display:flex;align-items:flex-end;gap:clamp(16px,2vw,32px);width:max-content;padding-left:var(--gutter);padding-right:var(--gutter);will-change:transform}
.shot{flex:0 0 auto;display:grid;gap:14px}
.shot .cs-cut{height:min(52vh,560px);aspect-ratio:3/2;width:auto;overflow:hidden;background:var(--steel)}
.shot.tall .cs-cut{aspect-ratio:2/3}
.shot .cs-cut img{width:110%;height:100%;object-fit:cover;max-width:none;margin-left:-5%;will-change:transform}
.shot .cap{display:flex;justify-content:space-between;gap:16px;font-family:var(--head);font-size:13px;letter-spacing:.01em}
.shot .cap span:last-child{opacity:.55}
@media (max-width:760px){
  .work-pin{height:auto;padding:clamp(56px,10vh,96px) 0;overflow:visible}
  .work .head{padding:0 var(--gutter)}
  .track{overflow-x:auto;width:100%;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .track::-webkit-scrollbar{display:none}
  .shot{scroll-snap-align:start}
  .shot .cs-cut{height:auto;width:78vw}.shot.tall .cs-cut{width:58vw}
  .shot .cs-cut img{width:100%;margin:0}
}

/* years */
.years{background:var(--steel);color:var(--cloud)}
.years .cs-cols{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.years .big{grid-column:1/span 7}
.years .big h2{font-size:clamp(40px,5.6vw,88px)}
.years .big p{margin-top:22px;font-size:clamp(16px,1.3vw,20px);max-width:46ch;opacity:.9}
.stats{grid-column:9/span 4;display:grid;gap:26px}
.stat{border-top:1px solid rgba(240,248,249,.22);padding-top:14px}
.stat .num{font-family:var(--head);font-weight:500;font-size:clamp(44px,5vw,80px);letter-spacing:-0.04em;line-height:1;color:var(--frost);font-variant-numeric:tabular-nums}
.stat .num small{font-size:.42em;letter-spacing:-0.02em;margin-left:6px;color:var(--cloud)}
.stat .lab{margin-top:8px;font-family:var(--head);font-size:13px;letter-spacing:.02em;text-transform:uppercase;opacity:.7}
.strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);margin-top:clamp(40px,7vh,88px)}
.strip figure{aspect-ratio:3/2;overflow:hidden;background:var(--deep);--cut:84px;clip-path:inset(0 0 100% 0)}
.strip figure img{width:100%;height:100%;object-fit:cover}
.strip figcaption{margin-top:10px;font-family:var(--head);font-size:13px;letter-spacing:.01em;display:flex;justify-content:space-between}
.strip figcaption span:last-child{opacity:.55}
@media (max-width:900px){.years .cs-cols{grid-template-columns:1fr}.years .big,.stats{grid-column:1}.stats{grid-template-columns:repeat(3,1fr)}.strip{grid-template-columns:1fr}}
@media (max-width:520px){.stats{grid-template-columns:1fr}}

/* reel */
.reel{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--black);color:#fff}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(1,10,12,.82),rgba(1,10,12,.1) 55%,rgba(1,10,12,.25))}
.reel .cs-wrap{position:relative;z-index:1;padding-bottom:clamp(48px,8vh,96px);padding-top:30vh}
.reel .display{font-size:clamp(48px,9.5vw,160px);color:#fff;max-width:12ch}
.reel .display em{font-style:normal;color:var(--frost)}
.reel p{margin-top:20px;font-size:clamp(15px,1.3vw,19px);max-width:44ch;opacity:.9}

/* contact */
.contact{background:var(--cloud);color:var(--deep);min-height:auto;padding-bottom:clamp(40px,6vh,72px)}
.contact .top{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.contact h2{grid-column:1/span 8;font-size:clamp(44px,7.4vw,124px);letter-spacing:-0.04em;line-height:.94}
.cs-btn{grid-column:9/span 4;justify-self:start;display:inline-flex;align-items:center;gap:14px;background:var(--deep);color:var(--frost);font-family:var(--head);font-weight:500;font-size:clamp(15px,1.2vw,18px);padding:20px 26px;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 18px) 100%,0 100%);position:relative;overflow:hidden;box-shadow:0 20px 50px -20px rgba(4,38,44,.55);transition:transform .25s var(--ease),box-shadow .25s}
.cs-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(199,254,252,.35),transparent);transform:skewX(-18deg);transition:left .7s var(--ease)}
.cs-btn:hover::after{left:120%}
.cs-btn:hover{transform:translateY(-2px);box-shadow:0 26px 60px -20px rgba(4,38,44,.7)}
.cs-btn:active{transform:translateY(1px)}
.cs-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.addr{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:clamp(56px,9vh,120px);font-size:14px;line-height:1.55}
.addr > div{grid-column:span 3}
.addr b{display:block;font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;opacity:.6}
.addr a:hover{text-decoration:underline;text-underline-offset:3px}
.cs-social{display:flex;gap:16px;margin-top:4px}
.cs-social a{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(4,38,44,.25);transition:background .3s,color .3s,border-color .3s}
.cs-social a:hover{background:var(--deep);color:var(--frost);border-color:var(--deep)}
.cs-social svg{width:16px;height:16px;fill:currentColor}
.cs-foot{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-top:clamp(56px,9vh,120px);padding-top:22px;border-top:1px solid rgba(4,38,44,.16);font-family:var(--head);font-size:12px;letter-spacing:.03em;text-transform:uppercase;opacity:.7}
.cs-foot svg{height:18px;width:auto;fill:currentColor}
@media (max-width:900px){.contact .top{grid-template-columns:1fr}.contact h2,.cs-btn{grid-column:1}.addr{grid-template-columns:1fr 1fr}.addr>div{grid-column:span 1}}
@media (max-width:520px){.addr{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .cs-soon i{animation:none}
  .cs-section .cs-wrap > *{opacity:1;transform:none;transition:none}
  .card figure img,.strip figure{transform:none;clip-path:none;transition:none}
}

/* ---------- holding page ---------- */
.hero-kicker{grid-column:1/-1;font-family:var(--head);font-weight:500;font-size:clamp(30px,4.4vw,68px);letter-spacing:-0.035em;line-height:.98;max-width:14ch;color:var(--frost);text-shadow:0 2px 24px rgba(0,0,0,.45);margin-bottom:clamp(6px,1vw,14px)}
.hero-kicker small{display:block;margin-top:14px;font-family:var(--text);font-weight:300;font-size:clamp(15px,1.25vw,20px);letter-spacing:-0.01em;color:#fff;opacity:.9}
/* the cloud page slides up over the end of the story */
.rise{position:relative;z-index:5;margin-top:-100vh;margin-top:-100svh;background:var(--cloud);color:var(--deep);box-shadow:0 -50px 100px -40px rgba(1,10,12,.6)}
.rise .cs-section{min-height:0;display:block;padding-top:clamp(64px,10vh,130px);padding-bottom:clamp(24px,4vh,56px)}
.rise .cs-section.top{min-height:min(100svh,1000px);display:flex;align-items:flex-start;padding-top:clamp(120px,18vh,220px)}
.rise .cs-eyebrow{color:var(--steel);opacity:1}
.top .cs-eyebrow{display:block;margin-bottom:clamp(18px,3vh,32px)}
.top h2{font-size:clamp(44px,7vw,120px);letter-spacing:-0.04em;line-height:.94;max-width:16ch}
.top h2 em{font-style:normal;color:var(--steel)}
.top .lede{margin-top:clamp(28px,4.5vh,52px);font-size:clamp(17px,1.5vw,22px);max-width:46ch}
.notice{--cut:44px;background:var(--shell);color:var(--deep);padding:18px 24px 20px;display:grid;gap:6px;max-width:58ch;margin-bottom:clamp(36px,6vh,72px)}
.notice b{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.notice b::before{content:"";width:7px;height:7px;background:var(--deep);clip-path:polygon(0 0,100% 0,100% 55%,45% 100%,0 100%)}
.notice p{font-size:15px;opacity:.9;max-width:none}
.sec-h{font-size:clamp(34px,4.6vw,72px);letter-spacing:-0.035em;line-height:.98;max-width:18ch}
.cols3,.cols4{display:grid;gap:clamp(20px,2.6vw,40px);margin-top:clamp(32px,5vh,64px)}
.cols3{grid-template-columns:repeat(3,1fr)}
.cols4{grid-template-columns:repeat(4,1fr)}
.cs-item{border-top:1px solid rgba(4,38,44,.28);padding-top:16px;display:grid;gap:12px;align-content:start}
.cs-item .cs-n{font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.04em;opacity:.6}
.cs-item h3{font-size:clamp(22px,2.1vw,32px);letter-spacing:-0.03em;line-height:1.02}
.cs-item p{font-size:15px;opacity:.85;max-width:34ch}
.how{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.how .sec-h{grid-column:1/span 6}
.how p{grid-column:8/span 5;font-size:clamp(16px,1.3vw,20px);max-width:46ch}

/* partnership */
.deal{background:var(--deep);color:var(--cloud);--cut:120px;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3vw,48px);padding:clamp(28px,4vw,64px);padding-bottom:calc(clamp(28px,4vw,64px) + 28px)}
.deal .copy{grid-column:1/span 6;display:grid;gap:18px;align-content:start}
.deal .k{font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.deal .big{font-family:var(--head);font-weight:500;font-size:clamp(72px,9vw,150px);line-height:.85;letter-spacing:-0.05em;color:var(--frost)}
.deal h2{font-size:clamp(30px,3.6vw,56px);letter-spacing:-0.035em;line-height:1}
.deal p{font-size:clamp(15px,1.15vw,18px);opacity:.88;max-width:46ch}
.deal form{grid-column:8/span 5;display:grid;gap:12px;align-content:end}
.deal label{display:grid;gap:6px}
.deal label span{font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.deal input,.deal select{width:100%;min-width:0;background-color:rgba(240,248,249,.08);border:1px solid rgba(240,248,249,.3);border-radius:0;color:var(--cloud);font:300 15px var(--text);letter-spacing:-0.01em;padding:15px 16px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .3s,background-color .3s}
.deal select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C7FEFC' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:40px}
.deal option{color:var(--deep);background:var(--cloud)}
.deal input::placeholder{color:rgba(240,248,249,.55)}
.deal input:focus,.deal select:focus{border-color:var(--frost);background-color:rgba(240,248,249,.12)}
.deal .cs-btn{grid-column:auto;justify-self:start;margin-top:8px;border:0;cursor:pointer}
.deal .note{font-size:12px;opacity:.6;max-width:none}
.cs-btn.cs-sm{padding:16px 20px;font-size:15px;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 15px) 100%,0 100%)}
.cs-btn.cs-frost{background:var(--frost);color:var(--deep);box-shadow:0 20px 50px -20px rgba(199,254,252,.35)}
.cs-btn.cs-frost::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent)}

/* project + updates panels */
.panels{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px)}
.panel{grid-column:span 6;background:var(--steel);color:var(--cloud);padding:clamp(24px,3vw,44px);padding-bottom:calc(clamp(24px,3vw,44px) + 20px);display:grid;gap:18px;align-content:start;--cut:120px;min-height:min(46vh,420px)}
.panel.light{background:var(--shell);color:var(--deep)}
.panel > *{grid-column:1}
.panel .k{font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.65}
.panel h3{font-size:clamp(26px,2.6vw,40px);letter-spacing:-0.03em;line-height:1}
.panel p{font-size:15px;opacity:.85;max-width:40ch}
.panel form{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:auto;max-width:520px}
.panel input{min-width:0;width:100%;background:rgba(240,248,249,.08);border:1px solid rgba(240,248,249,.3);border-radius:0;color:var(--cloud);font:300 15px var(--text);letter-spacing:-0.01em;padding:16px 18px;outline:none;transition:border-color .3s,background .3s}
.panel input::placeholder{color:rgba(240,248,249,.55)}
.panel input:focus{border-color:var(--frost);background:rgba(240,248,249,.12)}
.panel .note{font-size:12px;opacity:.6;max-width:none;padding-right:clamp(60px,12%,130px)}
.panel .cs-btn{grid-column:auto;border:0;cursor:pointer}
.panel.light .cs-btn{margin-top:auto;justify-self:start}

/* credibility + contact */
.cs-who{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.cs-who .cs-lead{grid-column:1/span 6;font-size:clamp(17px,1.5vw,22px);max-width:46ch}
.cs-who .cs-cols{grid-column:8/span 5;display:grid;grid-template-columns:1fr 1fr;gap:24px;font-size:14px;line-height:1.55}
.cs-who b{display:block;font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;opacity:.6}
.cs-who a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
  .cols3,.cols4{grid-template-columns:1fr 1fr}
  .how,.cs-ask,.cs-who,.deal{grid-template-columns:1fr}
  .how .sec-h,.how p,.cs-ask h3,.cs-ask p,.cs-ask .cs-btn,.cs-who .cs-lead,.cs-who .cs-cols,.deal .copy,.deal form{grid-column:1}
  .deal{--cut:84px}
  .panel{grid-column:1/-1;min-height:auto;--cut:84px}
}
@media (max-width:520px){.panel form{grid-template-columns:1fr}.cols3,.cols4{grid-template-columns:1fr}.cs-who .cs-cols{grid-template-columns:1fr}}

/* imagery between sections */
.pic{padding:clamp(8px,2vh,24px) var(--gutter)}
.pic figure{position:relative;overflow:hidden;background:var(--shell)}
.pic.wide figure{aspect-ratio:21/9}
.pic figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s var(--ease-out)}
.pic.cs-in figure img{transform:none}
.pic figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-family:var(--head);font-size:13px;letter-spacing:.01em;color:var(--deep)}
.pic figcaption span:last-child{opacity:.55}
.pic.pair{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px);align-items:end}
.pic.pair figure{aspect-ratio:4/5}
.pic.pair .a{grid-column:1/span 5}
.pic.pair .b{grid-column:7/span 6;aspect-ratio:3/2}
.pic.pair .b figure{aspect-ratio:3/2}
.pic.pair .a figure{aspect-ratio:4/5}
.pic.pair p{grid-column:1/span 5;font-size:clamp(15px,1.2vw,18px);max-width:38ch;margin-top:12px}
.behind{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center;margin-bottom:clamp(40px,7vh,96px)}
.behind figure{grid-column:1/span 5;aspect-ratio:7/6;overflow:hidden;background:var(--shell)}
.behind figure img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.behind .cs-t{grid-column:7/span 5;display:grid;gap:14px}
.behind h3{font-size:clamp(26px,3vw,46px);letter-spacing:-0.035em;line-height:1;max-width:14ch}
.behind p{font-size:clamp(15px,1.2vw,18px);max-width:42ch}
@media (max-width:900px){
  .pic.wide figure{aspect-ratio:4/3}
  .pic.pair{grid-template-columns:1fr}.pic.pair .a,.pic.pair .b,.pic.pair p{grid-column:1}
  .behind{grid-template-columns:1fr}.behind figure,.behind .cs-t{grid-column:1}.behind figure{aspect-ratio:4/3}
}

/* case study */
.case{background:var(--deep);color:var(--cloud);--cut:150px;padding:clamp(28px,4vw,64px);padding-bottom:calc(clamp(28px,4vw,64px) + 40px);display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.6vw,40px)}
.case .k{grid-column:1/-1;font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.case .cs-lead{grid-column:1/span 5;display:grid;gap:18px;align-content:start}
.case h2{font-size:clamp(32px,4vw,64px);letter-spacing:-0.035em;line-height:.98}
.case h2 em{font-style:normal;color:var(--frost)}
.case .cs-lead p{font-size:clamp(15px,1.2vw,18px);opacity:.88;max-width:44ch}
.case .nums{display:grid;grid-template-columns:repeat(2,auto);gap:clamp(18px,2.4vw,40px);justify-content:start;margin-top:8px}
.case .num b{display:block;font-family:var(--head);font-weight:500;font-size:clamp(30px,3.2vw,52px);letter-spacing:-0.04em;line-height:1;color:var(--frost)}
.case .num span{display:block;margin-top:6px;font-family:var(--head);font-size:12px;letter-spacing:.03em;text-transform:uppercase;opacity:.65}
.eps{grid-column:7/span 6;display:grid;align-content:center}
.ep{display:grid;gap:10px;color:var(--cloud)}
.ep:first-child{grid-column:1/-1}
.ep figure{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--steel)}
.ep figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.2s var(--ease-out)}
.ep:hover figure img{transform:scale(1.08)}
.ep .play{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;background:rgba(4,38,44,.82);color:var(--frost);font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.03em;text-transform:uppercase;padding:9px 12px;clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 10px) 100%,0 100%)}
.ep .play svg{width:10px;height:10px;fill:currentColor}
.ep .cs-t{font-family:var(--head);font-size:13px;letter-spacing:.01em;display:flex;justify-content:space-between;gap:12px}
.ep .cs-t span:last-child{opacity:.55;white-space:nowrap}
.case .note{grid-column:1/-1;font-size:12px;opacity:.55}
@media (max-width:900px){.case{grid-template-columns:1fr;--cut:100px}.case .cs-lead,.eps,.case .note{grid-column:1}}
@media (max-width:520px){.eps{grid-template-columns:1fr}.case .nums{grid-template-columns:1fr 1fr}}

/* clients */
.clients{border-top:1px solid rgba(4,38,44,.2);border-bottom:1px solid rgba(4,38,44,.2);padding:clamp(28px,4vh,48px) 0}
.clients .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px clamp(28px,3vw,56px);margin-top:22px}
.clients .row a,.clients .row span{display:block;color:var(--deep);opacity:.85;transition:opacity .3s}
.clients .row a:hover{opacity:1}
.clients svg,.clients img{height:calc(var(--h,30px) * var(--s,1));width:auto;max-width:none;flex:none;display:block;fill:currentColor}
@media (max-width:1100px){.clients{--s:.85}}
@media (max-width:760px){.clients{--s:.8}.clients .row{display:grid;grid-template-columns:1fr 1fr;gap:34px 20px;justify-content:start}}

/* shared photo treatment: same frame, same drift */
.pic figure img,.behind figure img,.ep figure img{transform:none;transition:none;will-change:transform;filter:saturate(.92) contrast(1.03)}
.pic figure,.behind figure,.ep figure{overflow:hidden}
.pic figure img,.behind figure img,.ep figure img{height:116%;margin-top:-8%}
@media (prefers-reduced-motion:reduce){.pic figure img,.behind figure img,.ep figure img{height:100%;margin-top:0}}

.pic.grid8{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,22px)}
.pic.grid8 figure{aspect-ratio:3/2;margin:0}
.pic.grid8 figure img{object-position:50% 50%}
@media (max-width:900px){.pic.grid8{grid-template-columns:1fr 1fr}}

/* ---------- about page ---------- */
.cs-a-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;background:var(--deep);color:var(--cloud);overflow:hidden}
.cs-a-hero figure{position:absolute;inset:0;margin:0}
.cs-a-hero figure img{width:100%;height:112%;object-fit:cover;object-position:50% 60%;filter:saturate(.92) contrast(1.03);will-change:transform}
.cs-a-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,38,44,.92) 0,rgba(4,38,44,.55) 45%,rgba(4,38,44,.35) 100%)}
.cs-a-hero .cs-wrap{position:relative;z-index:1;padding-top:calc(var(--header-h) + 12vh);padding-bottom:clamp(40px,8vh,96px)}
.cs-a-hero .cs-eyebrow{display:block;margin-bottom:clamp(14px,2.4vh,26px);color:var(--cloud);opacity:.85}
.cs-a-hero h1{font-family:var(--head);font-weight:500;font-size:clamp(44px,7.6vw,128px);letter-spacing:-0.04em;line-height:.94;color:var(--frost);max-width:12ch}
.cs-a-hero p{margin-top:clamp(18px,3vh,32px);font-size:clamp(17px,1.5vw,22px);max-width:46ch}
.cs-a-do{background:var(--cloud);color:var(--deep)}
.cs-a-do .cs-cols{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,48px);align-items:start}
.cs-a-do .cs-say{grid-column:1/span 6;display:grid;gap:clamp(16px,2.4vh,26px)}
.cs-a-do .cs-say h2{font-size:clamp(32px,4.2vw,66px);letter-spacing:-0.035em;line-height:.98}
.cs-a-do .cs-say p{font-size:clamp(16px,1.3vw,20px);max-width:42ch;opacity:.9}
.cs-a-do .cs-outs{grid-column:8/span 5;display:grid;gap:clamp(18px,3vh,30px)}
.cs-a-me{background:var(--shell);color:var(--deep)}
.cs-a-me .cs-cols{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,48px);align-items:center}
.cs-a-me figure{grid-column:1/span 5;aspect-ratio:4/5;overflow:hidden;background:var(--steel);margin:0}
.cs-a-me figure img{width:100%;height:112%;object-fit:cover;object-position:50% 20%;filter:saturate(.92) contrast(1.03);will-change:transform}
.cs-a-me .cs-t{grid-column:7/span 6;display:grid;gap:clamp(14px,2.2vh,24px)}
.cs-a-me h2{font-size:clamp(30px,3.8vw,60px);letter-spacing:-0.035em;line-height:.98;max-width:14ch}
.cs-a-me p{font-size:clamp(16px,1.3vw,20px);max-width:46ch}
.cs-a-me .cs-sig{font-family:var(--head);font-weight:500;font-size:13px;letter-spacing:.02em;text-transform:uppercase;display:grid;gap:4px;border-top:1px solid rgba(4,38,44,.28);padding-top:14px;margin-top:6px;max-width:46ch}
.cs-a-me .cs-sig span{opacity:.65}
.cs-a-close{background:var(--cloud);color:var(--deep)}
.cs-a-close .cs-cols{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,48px);align-items:center}
.cs-a-close .cs-h{grid-column:1/span 6;display:grid;gap:14px}
.cs-a-close .cs-h h2{font-size:clamp(36px,5vw,84px);letter-spacing:-0.04em;line-height:.94;max-width:11ch}
.cs-a-close .cs-h p{font-family:var(--head);font-weight:500;font-size:13px;letter-spacing:.02em;text-transform:uppercase;opacity:.65}
.cs-a-close .cs-ask{grid-column:8/span 5;background:var(--deep);color:var(--cloud);--cut:120px;padding:clamp(26px,3.4vw,52px);padding-bottom:calc(clamp(26px,3.4vw,52px) + 26px);display:grid;gap:16px;align-content:start}
.cs-a-close .cs-ask h3{font-size:clamp(26px,2.8vw,42px);letter-spacing:-0.03em;line-height:1;color:var(--frost)}
.cs-a-close .cs-ask p{font-size:clamp(15px,1.15vw,18px);opacity:.88;max-width:34ch}
.cs-a-close .cs-ask .cs-btn{grid-column:auto;justify-self:start;margin-top:6px}
@media (max-width:900px){
  .cs-a-do .cs-cols,.cs-a-me .cs-cols,.cs-a-close .cs-cols{grid-template-columns:1fr}
  .cs-a-do .cs-say,.cs-a-do .cs-outs,.cs-a-me figure,.cs-a-me .cs-t,.cs-a-close .cs-h,.cs-a-close .cs-ask{grid-column:1}
  .cs-a-me figure{aspect-ratio:4/4.4;max-width:520px}
  .cs-a-close .cs-ask{--cut:84px}
}
@media (prefers-reduced-motion:reduce){.cs-a-hero figure img,.cs-a-me figure img{height:100%}}

/* ---------- contact page + shared form fixes ---------- */
.cs-c-page{background:var(--cloud);color:var(--deep);align-items:flex-start;padding-top:calc(var(--header-h) + clamp(40px,9vh,110px))}
.cs-c-page .cs-cols{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3vw,48px);align-items:start}
.cs-c-page .cs-say{grid-column:1/span 5;display:grid;gap:clamp(16px,2.4vh,26px);align-content:start}
.cs-c-page h1{font-family:var(--head);font-weight:500;font-size:clamp(40px,5.6vw,92px);letter-spacing:-0.04em;line-height:.94;max-width:9ch}
.cs-c-page .cs-say p{font-size:clamp(16px,1.3vw,20px);max-width:38ch;opacity:.9}
.cs-c-page .cs-direct{font-size:15px;border-top:1px solid rgba(4,38,44,.28);padding-top:14px;margin-top:8px;max-width:38ch;display:grid;gap:4px}
.cs-c-page .cs-direct b{font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.6}
.cs-c-page .cs-direct a:hover{text-decoration:underline;text-underline-offset:3px}
.cs-c-form{grid-column:7/span 6;background:var(--deep);color:var(--cloud);--cut:120px;padding:clamp(24px,3.4vw,52px);padding-bottom:calc(clamp(24px,3.4vw,52px) + 44px)}
.cs-c-form h2{font-size:clamp(24px,2.4vw,36px);letter-spacing:-0.03em;line-height:1;color:var(--frost);margin-bottom:22px}
.cs-c-form form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cs-c-form label{display:grid;gap:6px;margin:0;align-content:start}
.cs-c-form label.cs-full{grid-column:1/-1}
.cs-c-form label span{font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.cs-c-form input:not([type=submit]),.cs-c-form select,.cs-c-form textarea{width:100%;min-width:0;background-color:rgba(240,248,249,.08);border:1px solid rgba(240,248,249,.3);border-radius:0;color:var(--cloud);font:300 15px var(--text);letter-spacing:-0.01em;padding:15px 16px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .3s,background-color .3s}
.cs-c-form textarea{min-height:150px;resize:vertical;display:block}
.cs-c-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C7FEFC' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:40px}
.cs-c-form option{color:var(--deep);background:var(--cloud)}
.cs-c-form input::placeholder,.cs-c-form textarea::placeholder{color:rgba(240,248,249,.55)}
.cs-c-form input:not([type=submit]):focus,.cs-c-form select:focus,.cs-c-form textarea:focus{border-color:var(--frost);background-color:rgba(240,248,249,.12)}
.cs-c-form .cs-btn{grid-column:1/-1;justify-self:start;margin-top:8px}
.cs-c-form .cs-note{grid-column:1/-1;font-size:12px;opacity:.6;max-width:none;padding-right:clamp(60px,14%,140px)}
@media (max-width:900px){
  .cs-c-page .cs-cols{grid-template-columns:1fr}
  .cs-c-page .cs-say,.cs-c-form{grid-column:1}
  .cs-c-form{--cut:84px}
}
@media (max-width:520px){.cs-c-form form{grid-template-columns:1fr}}
/* Webflow form defaults that fight the design */
.cs-formlike{margin:0}
.cs-formlike input:not([type=submit]),.cs-formlike select,.cs-formlike textarea{height:auto;margin-bottom:0;line-height:1.4}
.cs-formlike label{margin-bottom:0}
input.cs-btn{-webkit-appearance:none;appearance:none;border:0;border-radius:0;cursor:pointer;line-height:1.2;height:auto}
.cs-formlike .w-form-done,.cs-formlike .w-form-fail{background:transparent;text-align:left;padding:16px 18px;border:1px solid rgba(199,254,252,.55);color:var(--cloud);margin-top:0}
.cs-formlike .w-form-fail{border-color:rgba(240,248,249,.35);margin-top:12px}
.cs-formmsg{font-size:15px;opacity:1;max-width:none}