/* =========================================================
   ZEN CREATIVE LAB — shared stylesheet
   Brand: Zen Navy #101727 · Growth Lime #B7FE3C · Cloud White #F5F6F1
   ========================================================= */
:root{
  --ink:#101727;
  --ink-2:#161f36;
  --surface:#232E4E;
  --slate:#7F88A5;
  --paper:#F5F6F1;
  --lime:#B7FE3C;
  --grey:rgba(244,242,238,.55);
  --line:rgba(244,242,238,.16);
  --font:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'Space Mono',monospace;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--ink);color:var(--paper);font-family:var(--font);font-weight:400;
  line-height:1.5;overflow-x:hidden}
::selection{background:var(--lime);color:#0d1b05}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-weight:400;letter-spacing:-.02em;line-height:1}
em,i{font-style:normal}   /* the brand runs upright — accents are carried by lime, not slant */

/* ---------- mesh gradient (per-section canvas) ---------- */
.mesh{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}

/* ---------- grain ---------- */
.grain{position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.38;overflow:hidden;mix-blend-mode:overlay}
.grain::after{content:"";position:absolute;inset:-150%;width:400%;height:400%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:96px;animation:grain .45s steps(1) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}10%{transform:translate(-3%,-4%)}20%{transform:translate(-8%,2%)}
  30%{transform:translate(4%,-6%)}40%{transform:translate(-2%,7%)}50%{transform:translate(-8%,3%)}
  60%{transform:translate(6%,0)}70%{transform:translate(0,5%)}80%{transform:translate(3%,-4%)}
  90%{transform:translate(-4%,2%)}100%{transform:translate(2%,5%)}}
@media (prefers-reduced-motion:reduce){.grain::after{animation:none}}

/* ---------- cursor ---------- */
.cursor{position:fixed;top:0;left:0;width:40px;height:40px;border:1px solid var(--paper);border-radius:50%;
  z-index:10000;pointer-events:none;transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s,opacity .3s;mix-blend-mode:difference}
.cursor.on{width:74px;height:74px;background:rgba(244,242,238,.08)}
.cursor.hide{opacity:0}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:99999;background:var(--ink);display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:30px;
  clip-path:inset(0 0 0 0);transition:clip-path 1s var(--ease)}
.js .loader{display:flex}
.loader__logo{width:clamp(56px,6vw,84px);height:auto;opacity:0;
  animation:loaderIn .9s var(--ease) .1s forwards}
@keyframes loaderIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* the word fills with lime left-to-right as the progress variable climbs */
.loader__word{font-size:clamp(1.9rem,5.6vw,3.8rem);font-weight:300;letter-spacing:-.03em;
  color:var(--paper);text-align:center;line-height:1.25}
.loader__word b{color:var(--lime);font-weight:300}
.loader__num{position:absolute;right:clamp(20px,4vw,64px);bottom:clamp(20px,4vw,54px);
  font-family:var(--mono);font-size:clamp(2rem,6vw,4.4rem);font-weight:400;
  color:rgba(245,246,241,.12);letter-spacing:-.02em;line-height:1}
/* exit: the panel wipes upward instead of fading */
.loader.done{clip-path:inset(0 0 100% 0)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;width:100%;z-index:9000;display:flex;align-items:center;
  justify-content:space-between;padding:26px clamp(20px,3.5vw,52px);gap:24px}
.nav__l{display:flex;align-items:baseline;gap:26px;flex-shrink:0}
.brand{font-size:17px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:baseline;gap:7px}
.brand b{color:var(--lime);font-weight:600}
.brand span{font-weight:400;opacity:.7;font-size:15px}
.lang{font-family:var(--mono);font-size:12px;letter-spacing:.05em;display:flex;gap:7px;align-items:center}
.lang button{background:none;border:none;color:var(--paper);font:inherit;cursor:pointer;opacity:.45;padding:0}
.lang button.on{opacity:1}
.lang i{opacity:.3;font-style:normal}
.nav__c{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:clamp(14px,1.6vw,30px);font-size:14px}
.nav__c a{position:relative;opacity:.85;transition:opacity .3s,color .3s}
.nav__c a:hover{opacity:1}
.nav__c a sup{font-family:var(--mono);font-size:9px;opacity:.6;margin-left:1px}
.nav__c a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--lime);transition:width .4s var(--ease)}
.nav__c a:hover::after{width:100%}
.nav__c a.on{opacity:1;color:var(--lime)}
.nav__c a.on::after{width:100%}
.menu-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(244,242,238,.04);
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;flex-shrink:0;
  transition:background .3s,border-color .3s;backdrop-filter:blur(6px)}
.menu-btn:hover{border-color:var(--paper)}
.menu-btn span{display:block;width:16px;height:1.5px;background:var(--paper);transition:.4s var(--ease)}
.menu-btn.open span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.menu-btn.open span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
@media(max-width:1180px){.nav__c{display:none}}
/* with the overlay open the centre row is redundant — fade it out */
.nav__c{transition:opacity .3s var(--ease),visibility .3s}
.menu-open .nav__c{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- overlay menu ---------- */
.overlay{position:fixed;inset:0;z-index:8000;background:var(--ink-2);clip-path:circle(0% at 100% 0);
  transition:clip-path .8s var(--ease);display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(24px,7vw,90px)}
.overlay.open{clip-path:circle(160% at 100% 0)}

/* left rail (logo + thanks) — nav pushed to the right half */
.overlay__inner{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,60px);
  width:100%;align-items:center}
@media(min-width:900px){.overlay__inner{grid-template-columns:minmax(0,1fr) auto;
  column-gap:clamp(40px,6vw,110px);justify-content:space-between}}
.overlay__side{display:none}
/* the side div only reserves the grid column — its two children are pinned to the
   overlay itself, so the logo sits near the top of the screen rather than being
   dragged down to wherever the nav block happens to start */
@media(min-width:900px){
  .overlay__side{display:block;align-self:stretch}
  .overlay__logo{position:absolute;top:clamp(96px,13vh,165px);left:clamp(24px,7vw,90px)}
  .overlay__thanks{position:absolute;bottom:clamp(64px,9vh,112px);left:clamp(24px,7vw,90px);
    width:min(30vw,360px)}
}
.overlay__logo{width:clamp(46px,4.6vw,72px);height:auto;opacity:.95}
.overlay__thanks{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey);line-height:2.1}
.overlay__thanks b{display:block;color:var(--lime);font-weight:400;margin-bottom:12px;
  letter-spacing:.11em}
.overlay__thanks .co{display:block;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--line);font-size:10.5px;opacity:.65;letter-spacing:.1em}

.overlay nav{display:grid;grid-template-columns:1fr;gap:clamp(2px,.6vw,8px)}
@media(min-width:820px){.overlay nav{grid-template-columns:auto auto;
  column-gap:clamp(40px,7vw,130px);align-items:start}}
.overlay .mcol{display:grid;gap:clamp(2px,.6vw,8px);align-content:start}
.overlay a.mlink{position:relative;font-size:clamp(1.7rem,4.6vw,3.9rem);font-weight:300;
  letter-spacing:-.02em;line-height:1.14;display:inline-flex;align-items:baseline;
  transition:color .3s;width:max-content}
.overlay a.mlink:hover{color:var(--lime)}
/* ▸ marker on the page you're currently viewing */
.overlay a.mlink.on{color:var(--lime)}
.overlay a.mlink.on::before{content:"\25B8";position:absolute;left:-.62em;top:.06em;
  font-size:.62em;color:var(--lime);line-height:1.6}

.msocial{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,44px)}
.msocial a{display:inline-flex;align-items:center;justify-content:center;min-width:52px;
  padding:9px 16px;border:1px solid var(--line);border-radius:50px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--grey);
  transition:color .3s,border-color .3s}
.msocial a:hover{color:var(--lime);border-color:rgba(183,254,60,.5)}
.msocial a[data-soon]{opacity:.45}

.overlay__foot{position:absolute;bottom:5vh;left:clamp(24px,7vw,90px);right:clamp(24px,7vw,90px);
  font-family:var(--mono);font-size:11px;color:var(--grey);letter-spacing:.05em}
@media(min-width:900px){.overlay__foot{display:none}}

/* ---------- page shell (footer curtain) ---------- */
.page{position:relative;z-index:1;background:var(--ink)}
.section{padding:clamp(80px,12vw,180px) clamp(20px,4vw,64px);position:relative}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);display:flex;align-items:center;gap:12px;margin-bottom:38px}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--lime)}

/* reveal */
.js [data-fade]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js [data-fade].in{opacity:1;transform:none}
/* words stay sharp and simply light up as you scroll — no blur, the way the
   reference does it. JS drives `color`, so the type never goes soft. */
.js .reveal-words .w{display:inline-block;color:rgba(245,246,241,.09);
  transition:none;will-change:color}
@media (prefers-reduced-motion:reduce){
  .js [data-fade]{opacity:1!important;transform:none!important}
  .js .reveal-words .w{color:inherit!important}}

/* ---------- hero (home) — animated mesh + centred type + disc ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;position:relative;padding:0 20px;overflow:hidden;background:var(--ink)}
/* .sun must stay absolutely positioned — this rule used to override it to
   relative, which dropped the disc into the flex flow and shoved the type down */
.hero>*:not(.mesh):not(.sun){position:relative;z-index:2}
/* vignette: only the far corners go dark, so colour still reaches every edge */
.hero::after,.contact::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(112% 104% at 50% 50%,transparent 54%,rgba(10,14,27,.62) 100%)}
/* disc: crisp rim, translucent fill so the mesh still moves behind it */
.sun{position:absolute;top:50%;left:50%;width:min(60vmin,600px);height:min(60vmin,600px);border-radius:50%;transform:translate(-50%,-50%);z-index:2;background:linear-gradient(180deg,rgba(183,254,60,.42) 0%, rgba(245,246,241,.30) 38%,rgba(200,214,206,.20) 68%, rgba(16,23,39,.10) 100%)}
.hero__wm{font-weight:300;letter-spacing:-.03em;font-size:clamp(2.5rem,8.4vw,8.4rem);line-height:.98}
.hero__wm i{font-style:normal;font-weight:300}
.hero__wm .lime{color:var(--lime)}
.hero__sub{margin-top:26px;font-size:clamp(.56rem,.72vw,.68rem);letter-spacing:.22em;font-weight:600;
  text-transform:uppercase;line-height:1.9;max-width:44ch;opacity:.92}
.hero__mark{position:absolute;left:clamp(20px,3.5vw,52px);bottom:34px;opacity:.9;z-index:2}
.hero__mark svg{width:40px;height:40px}
.hero__scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.hero__scroll .ln{width:1px;height:40px;background:var(--line);position:relative;overflow:hidden}
.hero__scroll .ln::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--paper);animation:sd 2.2s var(--ease) infinite}
@keyframes sd{0%{top:-60%}100%{top:110%}}

/* ---------- page header (inner pages) ---------- */
.phead{position:relative;overflow:hidden;background:var(--ink);
  padding:clamp(104px,8.5vw,124px) clamp(20px,4vw,64px) clamp(40px,4.5vw,58px);
  border-bottom:1px solid var(--line)}
.phead>*:not(.mesh):not(.sun){position:relative;z-index:2}
.phead .sun{width:min(42vmin,400px);height:min(42vmin,400px);top:50%;left:auto;right:6%;transform:translate(0,-50%);opacity:.6}
.phead__idx{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--lime);margin-bottom:18px;display:block}
.phead h1{font-size:clamp(2.8rem,9vw,7.4rem);font-weight:300;letter-spacing:-.03em;line-height:.96;max-width:16ch}
.phead h1 i{font-style:normal;color:var(--lime)}
.phead__sub{margin-top:22px;max-width:50ch;font-size:clamp(.98rem,1.2vw,1.1rem);color:#cdccc8;line-height:1.6}

/* ---------- pill button ---------- */
/* ---------- action buttons: outline only, lime blooms out from the centre on hover ---------- */
.pill,.cbtn,.submit{position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  border:1px solid rgba(245,246,241,.6);border-radius:50px;
  /* barely-there scrim so a white outline still reads over the bright hero mesh */
  background:rgba(16,23,39,.16);backdrop-filter:blur(3px);
  color:var(--paper);font-family:inherit;font-size:.98rem;font-weight:400;letter-spacing:.01em;
  padding:18px 36px;cursor:pointer;
  transition:color .35s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.pill>*,.cbtn>*,.submit>*{position:relative;z-index:2}
/* z-index:-1, NOT 1 — the label is a bare text node living in the inline layer, which
   paints below any positioned descendant with a positive index. At 1 the lime disc
   covered the words (the arrow survived only because it is a real <span> at z-index 2).
   Negative keeps the disc above the button's own background but under all its content. */
.pill::before,.cbtn::before,.submit::before{content:"";position:absolute;z-index:-1;
  left:50%;bottom:0;width:170%;aspect-ratio:1;border-radius:50%;background:var(--lime);
  transform:translate(-50%,50%) scale(0);   /* origin = midpoint of the bottom edge */
  transition:transform .62s var(--ease)}
.pill:hover,.cbtn:hover,.submit:hover{color:#0d1b05;border-color:var(--lime);
  box-shadow:0 0 46px rgba(183,254,60,.28);
  /* hold the dark text back until the lime has actually swept under it */
  transition:color .3s var(--ease) .17s,border-color .5s var(--ease),box-shadow .5s var(--ease)}
.pill:hover::before,.cbtn:hover::before,.submit:hover::before{transform:translate(-50%,50%) scale(1)}
.pill .ar,.cbtn .a,.submit .a{transition:transform .45s var(--ease)}
.pill:hover .ar,.cbtn:hover .a,.submit:hover .a{transform:translateX(5px)}
.pill-wrap{display:flex;justify-content:center;padding:clamp(56px,7vw,96px) 0 0}

/* ---------- category filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(40px,5vw,66px)}
.chip{border:1px solid var(--line);border-radius:50px;padding:12px 22px;font-size:.9rem;color:#c3c2be;
  background:none;font-family:inherit;cursor:pointer;white-space:nowrap;
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s}
.chip:hover{border-color:var(--paper);color:var(--paper)}
.chip.on{background:var(--paper);border-color:var(--paper);color:#0d1b05}
.chip .c{font-family:var(--mono);font-size:10.5px;opacity:.6;margin-left:6px}
.work.hidden{display:none}
.grid-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);margin-bottom:22px}

/* ---------- pagination ---------- */
.pager{display:flex;align-items:center;justify-content:flex-end;gap:clamp(6px,1vw,14px);
  padding:clamp(48px,6vw,84px) 0 0;flex-wrap:wrap}
.pager button{width:clamp(42px,4vw,54px);height:clamp(42px,4vw,54px);border-radius:50%;
  border:1px solid var(--line);background:none;color:var(--paper);font-family:inherit;
  font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .35s var(--ease),background .35s var(--ease),color .3s}
.pager button:hover:not(:disabled){border-color:var(--paper)}
.pager button.on{background:var(--surface);border-color:var(--surface);color:var(--paper)}
.pager button:disabled{opacity:.28;cursor:default}
.pager .gap{color:var(--grey);padding:0 4px}

/* ---------- services: text-only offset grid ---------- */
.svc-grid{display:grid;grid-template-columns:1fr;gap:clamp(48px,6vw,90px)}
@media(min-width:860px){.svc-grid{grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,110px)}
  .svc-grid>div:nth-child(2){margin-top:clamp(30px,4vw,70px)}
  .svc-grid>div:nth-child(3){margin-top:clamp(-30px,-3vw,-10px)}
  .svc-grid>div:nth-child(4){margin-top:clamp(20px,3vw,50px)}}
.svc-cell h3{font-size:clamp(2rem,5.4vw,4.2rem);font-weight:300;letter-spacing:-.03em;
  line-height:1.02;margin-bottom:clamp(22px,2.6vw,38px)}
.svc-cell h3 i{font-style:normal;color:var(--lime)}
.svc-cell ul{list-style:none;display:grid;gap:9px}
.svc-cell li{color:#c3c2be;font-size:clamp(.98rem,1.25vw,1.12rem);line-height:1.5}

/* ---------- lead statement (arrow + big line + body) ---------- */
.lead{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,44px)}
@media(min-width:900px){.lead{grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);
  column-gap:clamp(40px,7vw,120px);align-items:start}}
.lead__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);line-height:1.9;max-width:26ch}
/* block, NOT flex — the reveal-words script turns every word into an inline-block,
   and as flex items they refuse to wrap and run off the right edge of the page */
/* the arrow is positioned, NOT indented: text-indent is an inherited property and every
   word span is an inline-block, so an indent here gets re-applied to each word and stacks
   the whole line on one spot. padding-left + absolute arrow has nothing to inherit. */
.lead__h{position:relative;font-size:clamp(1.35rem,2.9vw,2.6rem);font-weight:300;
  letter-spacing:-.02em;line-height:1.18;text-transform:uppercase;
  max-width:calc(21ch + 1.9em);padding-left:1.9em}   /* border-box: add the padding back on */
.lead__h .ar{position:absolute;left:0;top:0;color:var(--lime)}
.lead__b{font-size:clamp(1.02rem,1.6vw,1.5rem);font-weight:300;line-height:1.5;
  color:#d6d5d1;margin-top:clamp(26px,3vw,44px);max-width:44ch}

/* ---------- value / culture blocks (rule + label left, statement right) ---------- */
.creed{border-top:1px solid var(--line);padding-top:clamp(30px,3.6vw,52px);
  display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,40px)}
@media(min-width:900px){.creed{grid-template-columns:minmax(0,.55fr) minmax(0,2fr);
  column-gap:clamp(40px,7vw,120px);align-items:start}}
.creed + .creed{margin-top:clamp(56px,7vw,100px)}
.creed__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);display:flex;align-items:center;gap:9px}
.creed__k::before{content:"\25B8";font-size:11px}
.creed__b{font-size:clamp(1.02rem,1.5vw,1.34rem);font-weight:300;line-height:1.62;
  color:#d6d5d1;margin-top:clamp(24px,2.8vw,38px);max-width:46ch}

/* empty slot waiting for the real team photo */
.photoslot{margin-top:clamp(34px,4vw,60px);aspect-ratio:16/7;border-radius:16px;
  border:1px dashed rgba(244,242,238,.22);background:rgba(35,46,78,.35);
  display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.photoslot span:last-child{font-size:10px;opacity:.6;letter-spacing:.1em}

/* ---------- show reel (full-bleed, no caption) ---------- */
.reel{position:relative;width:100%;background:var(--ink)}
.reel__frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
/* brand gradient sits underneath so the frame still reads as designed
   before the real file is dropped in */
.reel__frame .viz{position:absolute;inset:0;filter:saturate(.7) brightness(.42)}
.reel__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  cursor:pointer;background:transparent}
.reel__frame{--play:clamp(66px,6.5vw,102px)}
.reel__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:var(--play);aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;
  background:var(--paper);display:flex;align-items:center;justify-content:center;
  transition:transform .5s var(--ease),background .4s var(--ease),
             opacity .4s var(--ease),visibility .4s}
.reel__play::before{content:"";width:0;height:0;margin-left:6px;
  border-left:clamp(16px,1.5vw,22px) solid #0d1b05;
  border-top:clamp(11px,1vw,15px) solid transparent;
  border-bottom:clamp(11px,1vw,15px) solid transparent}
.reel__play:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--lime)}
/* caption sits directly under the circle — offset by half the button plus a gap,
   so it stays put whatever size the button clamps to */
.reel__cap{position:absolute;left:50%;top:50%;z-index:3;transform:translateX(-50%);
  margin-top:calc(var(--play) / 2 + 24px);white-space:nowrap;
  font-size:clamp(.92rem,1.2vw,1.08rem);color:var(--paper);letter-spacing:.01em;
  text-shadow:0 2px 18px rgba(11,17,32,.7);pointer-events:none;
  transition:opacity .4s var(--ease),visibility .4s}
.reel.playing .reel__play,.reel.playing .reel__cap{opacity:0;visibility:hidden}

/* ---------- reel controls ---------- */
.reel__ui{position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);
  padding:clamp(26px,3vw,40px) clamp(16px,2vw,28px) clamp(13px,1.5vw,20px);
  background:linear-gradient(to top,rgba(11,17,32,.9),rgba(11,17,32,0));
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.reel:hover .reel__ui,.reel__ui:focus-within{opacity:1;visibility:visible}
.reel__frame:fullscreen:hover .reel__ui{opacity:1;visibility:visible}
@media (hover:none),(pointer:coarse){.reel__ui{opacity:1;visibility:visible}}

.reel__pp,.reel__ic{display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;
  color:var(--paper);transition:color .3s,background .3s}
.reel__pp:hover,.reel__ic:hover{color:var(--lime);background:rgba(245,246,241,.1)}
.reel__pp svg{width:13px;height:13px;fill:currentColor;margin-left:1px}
.reel__ic svg{width:17px;height:17px}
.i-pause{display:none}
.reel.playing .i-play{display:none}
.reel.playing .i-pause{display:block}
/* arrows point inward once we're actually in fullscreen */
.i-fs-in{display:none}
.reel.fs .i-fs-out{display:none}
.reel.fs .i-fs-in{display:block}
.reel__ic[disabled]{opacity:.35;cursor:default}
.reel__ic[disabled]:hover{color:var(--paper);background:none}

/* scrubber — the ::before gives it a tall invisible hit area so it's easy to grab */
.reel__bar{position:relative;flex:1;min-width:60px;height:3px;border-radius:2px;
  background:rgba(245,246,241,.24);cursor:pointer;outline:none}
.reel__bar::before{content:"";position:absolute;left:0;right:0;top:-11px;bottom:-11px}
.reel__bar:focus-visible{box-shadow:0 0 0 2px rgba(183,254,60,.6)}
.reel__fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--lime)}
.reel__fill::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%) scale(0);
  width:12px;height:12px;border-radius:50%;background:var(--lime);
  transition:transform .25s var(--ease)}
.reel__bar:hover .reel__fill::after,.reel__bar:focus-visible .reel__fill::after{transform:translateY(-50%) scale(1)}
.reel__t{flex-shrink:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--grey);font-variant-numeric:tabular-nums}
@media(max-width:560px){.reel__t{display:none}}

/* in fullscreen the 16:9 box has to give way, and the video letterboxes instead of cropping */
.reel__frame:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;background:#0b1120}
.reel__frame:fullscreen .reel__v{object-fit:contain}
.reel__frame:fullscreen .viz{display:none}
.reel__frame:-webkit-full-screen{aspect-ratio:auto;width:100vw;height:100vh;background:#0b1120}
.reel__frame:-webkit-full-screen .reel__v{object-fit:contain}

/* ---------- identity split (image + line) ---------- */
.idsplit{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,60px);align-items:center}
@media(min-width:900px){.idsplit{grid-template-columns:1.15fr .85fr}}
.idsplit__vis{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:4/3.2;background:var(--surface)}
.idsplit__vis .viz{position:absolute;inset:-8%;filter:saturate(.9) brightness(.92)}
.idsplit__t{font-size:clamp(1.15rem,2.2vw,1.85rem);font-weight:300;line-height:1.45;
  color:#e2e1dd;max-width:30ch}
.idsplit__mark{display:block;margin-top:26px}
.idsplit__mark svg{width:48px;height:48px;opacity:.8}

/* ---------- two-image row ---------- */
.duo{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,44px)}
@media(min-width:760px){.duo{grid-template-columns:1fr 1fr}}
.duo__i{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:4/5;background:var(--surface)}
.duo__i .viz{position:absolute;inset:-8%;filter:saturate(.9) brightness(.92)}

/* ---------- join / CTA with drifting tiles behind ---------- */
.join{position:relative;overflow:hidden;text-align:center;background:var(--ink);
  padding:clamp(90px,12vw,170px) clamp(20px,4vw,64px)}
.join>*:not(.jfloat){position:relative;z-index:3}
.join__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin-bottom:clamp(26px,3vw,44px)}
.join__h{font-size:clamp(1.9rem,6vw,4.6rem);font-weight:300;letter-spacing:-.03em;
  line-height:1.2;text-transform:uppercase;max-width:20ch;margin:0 auto}
.jfloat{position:absolute;border-radius:8px;overflow:hidden;z-index:1;opacity:.5;
  box-shadow:0 26px 70px rgba(5,8,16,.5)}
.jfloat i{position:absolute;inset:0;display:block;filter:saturate(.85) brightness(.85)}
.jfloat.j1{width:clamp(120px,13vw,220px);aspect-ratio:3/4;top:6%;left:12%;
  animation:driftR 30s linear infinite}
.jfloat.j2{width:clamp(120px,13vw,220px);aspect-ratio:3/4;top:2%;right:14%;
  animation:driftL 34s linear infinite -6s}
.jfloat.j3{width:clamp(110px,12vw,200px);aspect-ratio:3/4;bottom:6%;left:28%;
  animation:driftR 38s linear infinite -14s}
.jfloat.j4{width:clamp(110px,12vw,200px);aspect-ratio:3/4;bottom:10%;right:22%;
  animation:driftL 32s linear infinite -20s}
@media(max-width:760px){.jfloat.j3,.jfloat.j4{display:none}}
@media (prefers-reduced-motion:reduce){.jfloat{animation:none!important}}

/* ---------- vision: floating tiles behind big type ---------- */
.vstage{position:relative;min-height:88svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;overflow:hidden;padding:clamp(70px,9vw,120px) clamp(20px,4vw,64px);background:var(--ink)}
.vstage__type{position:relative;z-index:3;text-align:center;font-size:clamp(2.6rem,10.5vw,10rem);
  font-weight:300;letter-spacing:-.035em;line-height:1.1;pointer-events:none;mix-blend-mode:difference}
/* tiles drift horizontally, on a loop — they never stop, scroll or no scroll */
.vfloat{position:absolute;border-radius:6px;overflow:hidden;will-change:transform;z-index:2;
  box-shadow:0 30px 80px rgba(5,8,16,.55)}
.vfloat i{position:absolute;inset:0;display:block;filter:saturate(.9) brightness(.9)}
.vfloat.f1{width:clamp(150px,17vw,300px);aspect-ratio:16/10;top:8%;left:38%;
  animation:driftR 26s linear infinite, bob 9s ease-in-out infinite alternate}
.vfloat.f2{width:clamp(140px,16vw,280px);aspect-ratio:4/3;top:38%;left:4%;
  animation:driftL 32s linear infinite, bob 11s ease-in-out infinite alternate -3s}
.vfloat.f3{width:clamp(160px,18vw,320px);aspect-ratio:16/10;bottom:10%;right:6%;
  animation:driftL 29s linear infinite -8s, bob 10s ease-in-out infinite alternate -5s}
.vfloat.f4{width:clamp(120px,13vw,220px);aspect-ratio:1/1;bottom:14%;left:26%;
  animation:driftR 35s linear infinite -12s, bob 12s ease-in-out infinite alternate -2s}
@keyframes driftR{from{translate:-42vw 0}to{translate:52vw 0}}
@keyframes driftL{from{translate:46vw 0}to{translate:-48vw 0}}
@keyframes bob{from{transform:translateY(-14px)}to{transform:translateY(14px)}}
@media(max-width:760px){.vfloat.f4{display:none}}
@media (prefers-reduced-motion:reduce){.vfloat{animation:none!important}}

/* long manifesto paragraph */
/* set out across two thirds of the page, like the reference */
.manifesto{font-size:clamp(1.15rem,2.4vw,2.05rem);font-weight:300;line-height:1.46;
  letter-spacing:-.015em;max-width:100%}
.manifesto em{font-style:normal;color:var(--lime)}
@media(min-width:900px){.manifesto{max-width:67%}}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,3.4vw,52px)}
@media(min-width:640px){.team-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.team-grid{grid-template-columns:repeat(3,1fr)}}
.tcard{display:block;position:relative}
.tcard.lead{grid-column:span 1}
@media(min-width:1040px){.team-grid.leads{grid-template-columns:1fr 1fr}}
.tcard__ph{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:4/5;background:var(--surface)}
.tcard.lead .tcard__ph{aspect-ratio:4/3.4}
.tcard__ph .viz{position:absolute;inset:-8%;transition:transform 1.1s var(--ease);filter:saturate(.85) brightness(.9)}
.tcard:hover .tcard__ph .viz{transform:scale(1.05)}
.tcard__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,23,39,.05),rgba(17,23,39,.55))}
.tcard__ini{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  font-size:clamp(2.4rem,5vw,4rem);font-weight:300;letter-spacing:-.03em;color:rgba(244,242,238,.9)}
.tcard__badge{position:absolute;top:14px;left:14px;z-index:3;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:#0d1b05;background:var(--lime);border-radius:40px;padding:5px 11px}
.tcard__role{margin-top:18px;font-size:clamp(1.15rem,2vw,1.6rem);font-weight:400;letter-spacing:-.01em;transition:color .3s}
.tcard:hover .tcard__role{color:var(--lime)}
.tcard__name{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);margin-top:8px}
.tcard__line{color:#b9b8b4;font-size:.95rem;line-height:1.6;margin-top:12px;max-width:34ch}

/* ---------- careers ---------- */
.jobs{border-top:1px solid var(--line)}
.job{display:grid;grid-template-columns:1fr;gap:12px;padding:clamp(26px,3.2vw,44px) 0;
  border-bottom:1px solid var(--line);transition:padding .5s var(--ease)}
@media(min-width:900px){.job{grid-template-columns:1.3fr 1fr .9fr auto;align-items:center;gap:24px}}
.job:hover{padding-left:clamp(8px,1.4vw,22px)}
.job h3{font-size:clamp(1.4rem,3.2vw,2.2rem);font-weight:300;letter-spacing:-.02em;transition:color .3s}
.job:hover h3{color:var(--lime)}
.job__meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.job__desc{color:#c3c2be;font-size:.96rem;line-height:1.6;max-width:40ch}
.job__apply{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lime);white-space:nowrap}

/* form */
.form{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,40px);max-width:760px}
@media(min-width:700px){.form .half{grid-column:span 1}.form{grid-template-columns:1fr 1fr}
  .form .full{grid-column:1/-1}}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);margin-bottom:12px}
.field input,.field textarea,.field select{width:100%;background:none;border:0;border-bottom:1px solid var(--line);
  color:var(--paper);font-family:inherit;font-size:1.02rem;padding:10px 0;transition:border-color .35s}
.field textarea{resize:vertical;min-height:110px;line-height:1.6}
.field select{cursor:pointer}
.field select option{background:var(--ink-2);color:var(--paper)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--lime)}
.field input::placeholder,.field textarea::placeholder{color:rgba(244,242,238,.3)}
/* .submit shares the outline button style defined with .pill / .cbtn */
.form-note{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--grey);
  line-height:1.8;margin-top:20px;max-width:56ch}

/* ---------- statement ---------- */
.statement h2{font-size:clamp(1.8rem,5.2vw,4.6rem);font-weight:300;line-height:1.08;max-width:20ch;letter-spacing:-.02em}
.statement h2 em{font-style:normal;color:var(--lime)}
.statement__grid{display:grid;grid-template-columns:1fr;gap:40px;margin-top:64px}
@media(min-width:900px){.statement__grid{grid-template-columns:1.4fr 1fr;align-items:end}}
.statement__p{font-size:1.02rem;color:#cdccc8;line-height:1.7;max-width:46ch}
.statement__p strong{color:var(--paper);font-weight:600}

/* ---------- services ---------- */
.svc__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px}
.svc__head h2{font-size:clamp(2rem,6.2vw,5.2rem);font-weight:300;letter-spacing:-.025em}
.svc-list{border-top:1px solid var(--line)}
.svc-item{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
  padding:clamp(28px,3.4vw,50px) 0;border-bottom:1px solid var(--line);position:relative;transition:padding .5s var(--ease)}
.svc-item__no{font-family:var(--mono);font-size:12px;color:var(--lime)}
@media(min-width:820px){.svc-item{grid-template-columns:80px 1.1fr 1.1fr auto}}
.svc-item h3{font-size:clamp(1.6rem,4vw,2.8rem);font-weight:300;letter-spacing:-.02em;transition:transform .5s var(--ease),color .4s}
.svc-item__desc{color:#c3c2be;max-width:38ch;font-size:.98rem;line-height:1.6}
.svc-item__tags{display:flex;gap:7px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;color:var(--grey);letter-spacing:.04em;text-transform:uppercase}
@media(max-width:819px){.svc-item__desc,.svc-item__tags{grid-column:1/-1}}
.svc-item__tags span{border:1px solid var(--line);border-radius:40px;padding:5px 11px;white-space:nowrap}
.svc-item:hover{padding-left:clamp(8px,1.4vw,24px)}
.svc-item:hover h3{color:var(--lime)}
@media(min-width:820px){.svc-item:hover h3{transform:translateX(6px)}}

/* service detail blocks (services page) */
.svc-block{display:grid;grid-template-columns:1fr;gap:34px;padding:clamp(50px,7vw,96px) 0;border-bottom:1px solid var(--line)}
@media(min-width:900px){.svc-block{grid-template-columns:.9fr 1.1fr;gap:60px}}
.svc-block:last-child{border-bottom:0}
.svc-block__vis{border-radius:18px;aspect-ratio:5/4;position:relative;overflow:hidden}
.svc-block__vis .ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(3rem,7vw,5.4rem);z-index:2}
.svc-block h3{font-size:clamp(1.8rem,4.4vw,3.2rem);font-weight:300;letter-spacing:-.025em;margin-bottom:20px}
.svc-block .num{font-family:var(--mono);font-size:12px;color:var(--lime);letter-spacing:.1em;margin-bottom:18px;display:block}
.svc-block p{color:#c3c2be;font-size:1.04rem;line-height:1.7;max-width:48ch;margin-bottom:26px}
.svc-block ul{list-style:none;display:grid;gap:11px;max-width:46ch}
.svc-block li{display:flex;gap:14px;color:#cdccc8;font-size:.98rem;line-height:1.55;
  padding-bottom:11px;border-bottom:1px solid rgba(244,242,238,.08)}
.svc-block li::before{content:"→";color:var(--lime);flex-shrink:0}

/* ---------- works ---------- */
.works__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:60px}
.works__head h2{font-size:clamp(2rem,6.2vw,5.2rem);font-weight:300;letter-spacing:-.025em}
.works-grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,4vw,72px)}
@media(min-width:760px){.works-grid{grid-template-columns:1fr 1fr}}
.work{display:block;position:relative}
.work.big{grid-column:1/-1}
@media(min-width:760px){.work.stagger{transform:translateY(56px)}}
.work__media{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:4/3;background:var(--surface)}
.work.big .work__media{aspect-ratio:16/7.5}
.work__media .viz{position:absolute;inset:-10%;transition:transform 1.1s var(--ease);will-change:transform;
  filter:saturate(.95) brightness(.95)}
.work:hover .work__media .viz{transform:scale(1.05)}
.work__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,23,39,.05),rgba(17,23,39,.5))}
.work__tag{position:absolute;top:16px;left:16px;z-index:3;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:#0d1b05;background:var(--lime);border-radius:40px;padding:6px 12px}
.work__plus{position:absolute;bottom:16px;right:16px;z-index:3;width:48px;height:48px;border-radius:50%;
  background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:20px;
  transform:scale(.5);opacity:0;transition:.5s var(--ease)}
.work:hover .work__plus{transform:scale(1);opacity:1}
.work__info{display:flex;justify-content:space-between;gap:16px;margin-top:22px;align-items:flex-start}
.work__info h3{font-size:clamp(1.3rem,2.2vw,1.85rem);font-weight:400;letter-spacing:-.01em;transition:color .3s}
.work:hover .work__info h3{color:var(--lime)}
.work__info .cat{font-family:var(--mono);font-size:10.5px;color:var(--grey);text-transform:uppercase;
  letter-spacing:.05em;text-align:right;line-height:1.7;min-width:80px}
.work__deliv{font-family:var(--mono);font-size:11px;color:var(--grey);margin-top:9px;text-transform:uppercase;letter-spacing:.04em}

/* brand-safe generative visuals */
.viz-1{background:radial-gradient(120% 100% at 25% 20%,#B8FF3C,transparent 50%),linear-gradient(150deg,#2b3763,#111727)}
.viz-2{background:radial-gradient(120% 100% at 70% 30%,#3f5088,transparent 56%),linear-gradient(200deg,#232E4E,#111727)}
.viz-3{background:radial-gradient(120% 100% at 40% 70%,#7F88A5,transparent 55%),linear-gradient(120deg,#2b3763,#111727)}
.viz-4{background:radial-gradient(140% 120% at 60% 40%,#B8FF3C,#3f5088 40%,#232E4E 72%,#111727)}
.viz-5{background:radial-gradient(120% 100% at 30% 40%,#B8FF3C,transparent 46%),linear-gradient(160deg,#2b3763,#111727)}

/* ---------- vision ---------- */
.vision__grid{display:grid;grid-template-columns:1fr;gap:clamp(44px,5vw,84px)}
@media(min-width:860px){.vision__grid{grid-template-columns:1fr 1fr}}
.vcard .num{font-family:var(--mono);font-size:12px;color:var(--lime);letter-spacing:.1em;margin-bottom:26px;display:block}
.vcard h3{font-size:clamp(2.2rem,5.6vw,4.2rem);font-weight:300;letter-spacing:-.025em;margin-bottom:24px}
.vcard h3 i{font-style:normal;color:var(--lime)}
.vcard p{color:#c3c2be;font-size:1.05rem;line-height:1.7;max-width:44ch}

/* principles list */
.princ{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line);margin-top:20px}
@media(min-width:820px){.princ{grid-template-columns:1fr 1fr}}
.princ__i{padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid var(--line)}
@media(min-width:820px){.princ__i:nth-child(odd){padding-right:44px}.princ__i:nth-child(even){padding-left:44px;border-left:1px solid var(--line)}}
.princ__i .n{font-family:var(--mono);font-size:11px;color:var(--lime);letter-spacing:.12em;display:block;margin-bottom:14px}
.princ__i h4{font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:400;margin-bottom:12px;letter-spacing:-.01em}
.princ__i p{color:#b9b8b4;font-size:.98rem;line-height:1.65;max-width:44ch}

/* ---------- agency snapshot (staggered circle cluster) ---------- */
.snap{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,2vw,26px);margin-top:clamp(26px,3.4vw,48px)}
/* row 2 sits one whole column to the left of row 1, so the cluster
   runs diagonally down-left — and the whole block is pushed to the
   right half of the page, leaving the left side open like the reference */
@media(min-width:900px){
  .snap{grid-template-columns:repeat(4,1fr);width:min(100%,74%);margin-left:auto}
  .snap__i:nth-child(1){grid-area:1/2}
  .snap__i:nth-child(2){grid-area:1/3}
  .snap__i:nth-child(3){grid-area:1/4}
  .snap__i:nth-child(4){grid-area:2/1}
  .snap__i:nth-child(5){grid-area:2/2}
  .snap__i:nth-child(6){grid-area:2/3}
}
.snap__i{position:relative;width:100%;max-width:clamp(140px,15vw,208px);justify-self:center;
  aspect-ratio:1;border-radius:50%;
  border:1px solid var(--line);display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
  transition:border-color .5s var(--ease),transform .6s var(--ease)}
.snap__i:hover{border-color:rgba(183,254,60,.5);transform:translateY(-6px)}
.snap__n{font-size:clamp(1.3rem,2.4vw,2.1rem);font-weight:300;letter-spacing:-.03em;line-height:1}
.snap__l{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey);margin-top:10px;padding:0 12%}

/* ---------- contact ---------- */
.contact{position:relative;overflow:hidden;text-align:center;background:var(--ink);
  min-height:86svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:clamp(90px,11vw,150px) clamp(20px,4vw,64px)}
.contact>*:not(.mesh):not(.sun){position:relative;z-index:2}
.contact h2{font-size:clamp(2.4rem,8vw,7.6rem);font-weight:300;letter-spacing:-.03em;line-height:1.12;max-width:16ch}
.contact h2 i{font-style:normal;color:var(--lime)}
.contact__p{max-width:42ch;margin:34px auto 0;color:#e7e6e2;font-size:1.08rem;line-height:1.6}
.cbtn{margin-top:44px}

/* ---------- contact page: chip + headline, info row, form/photo split ---------- */
.cinfo{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,44px);
  margin-top:clamp(46px,6vw,84px);padding-top:clamp(30px,3.4vw,48px);border-top:1px solid var(--line)}
@media(min-width:640px){.cinfo{grid-template-columns:1fr 1fr}
  .cinfo>div+div{border-left:1px solid var(--line);padding-left:clamp(26px,4vw,60px)}}
.cinfo h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin-bottom:18px}
.cinfo a{display:block;font-size:clamp(1.02rem,1.5vw,1.3rem);color:#e2e1dd;transition:color .3s}
.cinfo a.strong{font-weight:600;color:var(--paper)}
.cinfo a:hover{color:var(--lime)}
.cinfo span{display:block;margin-top:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}

.csplit{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px);align-items:stretch}
@media(min-width:980px){.csplit{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
/* no panel — the form sits straight on the page, like the reference */
.cform{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.2vw,28px)}
@media(min-width:560px){.cform{grid-template-columns:1fr 1fr}.cform .full{grid-column:1/-1}}
.cform .flabel{display:block;font-size:.94rem;color:#c3c2be;margin-bottom:8px}
.cform .flabel em{font-style:normal;color:var(--lime);margin-left:2px}
/* :not([type=radio]) — without it this rule stretches the radio buttons to 100% width
   and the border-radius:50% turns each one into a flat lime ellipse */
.cform .field input:not([type=radio]),.cform .field select,.cform .field textarea{
  width:100%;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;
  color:var(--paper);font-family:inherit;font-size:1rem;padding:8px 0;
  transition:border-color .35s var(--ease)}
.cform .field textarea{resize:vertical;min-height:84px;line-height:1.6}
.cform .field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(244,242,238,.5) 50%),
                   linear-gradient(135deg,rgba(244,242,238,.5) 50%,transparent 50%);
  background-position:calc(100% - 11px) 16px,calc(100% - 5px) 16px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.cform .field select:invalid{color:rgba(244,242,238,.42)}
.cform .field input:focus,.cform .field select:focus,.cform .field textarea:focus{
  outline:none;border-bottom-color:var(--lime)}

/* "how did you hear about us" radio row */
.radios{display:flex;flex-wrap:wrap;gap:12px 30px;padding-top:6px}
.cform .radios label{display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  white-space:nowrap;font-size:.98rem;color:#c3c2be;transition:color .3s}
.cform .radios label:hover{color:var(--paper)}
.cform .radios input[type=radio]{appearance:none;-webkit-appearance:none;position:relative;
  flex:0 0 auto;width:18px;height:18px;min-width:18px;padding:0;margin:0;
  background:none;border:1px solid var(--line);border-radius:50%;cursor:pointer;
  transition:border-color .3s}
.cform .radios input[type=radio]::after{content:"";position:absolute;inset:4px;border-radius:50%;
  background:var(--lime);transform:scale(0);transition:transform .28s var(--ease)}
.cform .radios input[type=radio]:checked{border-color:var(--lime)}
.cform .radios input[type=radio]:checked::after{transform:scale(1)}
.cform .radios input[type=radio]:checked+span{color:var(--paper)}
.cphoto{margin-top:0;aspect-ratio:auto;min-height:340px;border-radius:20px}
@media(min-width:980px){.cphoto{min-height:100%}}
.steps{display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:20px}
@media(min-width:700px){.steps{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1120px){.steps{grid-template-columns:repeat(5,1fr)}}
.steps div{background:var(--ink);padding:clamp(26px,3vw,40px)}
.steps .n{font-family:var(--mono);font-size:11px;color:var(--lime);letter-spacing:.12em;display:block;margin-bottom:16px}
.steps h4{font-size:1.2rem;font-weight:400;margin-bottom:10px}
.steps p{color:#b9b8b4;font-size:.95rem;line-height:1.6}

/* ---------- next page link ---------- */

/* ---------- footer (curtain reveal) ---------- */
.footer{background:var(--ink-2);border-top:1px solid var(--line);
  padding:clamp(56px,7vw,96px) clamp(20px,4vw,64px) 40px;position:relative;z-index:0}
.js .curtain .footer{position:fixed;left:0;bottom:0;width:100%}
.footer__inner{will-change:transform,opacity}
.footer__top{display:grid;grid-template-columns:1fr;gap:44px}
@media(min-width:820px){.footer__top{grid-template-columns:1.6fr 1fr 1fr}}
.footer__brand .big{font-size:clamp(1.5rem,3.1vw,2.5rem);font-weight:300;letter-spacing:-.02em;
  line-height:1;white-space:nowrap}
.footer__brand .big b{color:var(--lime);font-weight:300}
.footer__brand .tag{color:var(--grey);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-top:16px}
.footer__col h4{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;color:var(--grey);text-transform:uppercase;margin-bottom:18px}
.footer__col a,.footer__col p{display:block;color:#c3c2be;font-size:.95rem;margin-bottom:12px;transition:color .3s}
.footer__col a:hover{color:var(--lime)}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:56px;padding-top:24px;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--grey);letter-spacing:.04em;text-transform:uppercase}
.footer__bottom a:hover{color:var(--lime)}
.foot-spacer{display:none}
.js .curtain .foot-spacer{display:block}

/* ---------- ảnh tải lên từ WordPress ----------
   Ô gradient .viz là ảnh tạm; khi bạn gán Ảnh đại diện cho một mục,
   WordPress in ra <img class="zen-cover"> và nó phải lấp đầy đúng khung đó. */
.zen-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.work__media .zen-cover,.tcard__ph .zen-cover{
  transition:transform 1.1s var(--ease);will-change:transform}
.work:hover .work__media .zen-cover,
.tcard:hover .tcard__ph .zen-cover{transform:scale(1.05)}
.reel__frame .zen-cover{object-fit:cover}


/* ── thư viện ảnh trong trang dự án ─────────────────────────────── */
.zen-gallery{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.8vw,26px)}
.zen-gallery__i{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:4/3;background:var(--surface);margin:0}
.zen-gallery__i .zen-cover{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.zen-gallery__i:hover .zen-cover{transform:scale(1.04)}
@media(min-width:760px){
  .zen-gallery{grid-template-columns:1fr 1fr}
  .zen-gallery__i:nth-child(3n+1){grid-column:1/-1;aspect-ratio:16/8}
}

/* ── trang riêng của một thành viên ─────────────────────────────── */
.mprofile{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px);align-items:start}
@media(min-width:900px){.mprofile{grid-template-columns:.82fr 1.18fr}}
.mprofile__ph{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:4/5;background:var(--surface)}
.mprofile__ph .viz{position:absolute;inset:-8%}
.mprofile__role{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-bottom:18px}
.mprofile__bio{font-size:1.02rem;color:#cdccc8;line-height:1.75;max-width:52ch;white-space:pre-line}
.mprofile__links{display:flex;flex-wrap:wrap;gap:26px;margin-top:clamp(28px,3.4vw,44px);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.mprofile__links a{color:#9d9c98;transition:color .3s}
.mprofile__links a:hover{color:var(--lime)}