/* ZC site, test build (Option B v2). Mobile first. Shared by every page. */
:root{
  --ink:#0a0a0a; --grey:#9e9e9e; --meta:#6f6f6f; --body:#333; --line:#e0e0e0;
  --bg:#fff; --ph:#f6f6f5; --ph-line:#c4c4c4;
  --pad:20px; --bar:58px;
  --ease:cubic-bezier(.2,.7,0,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:15px;letter-spacing:-.01em;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
img{display:block;max-width:100%}
.wrap{padding:0 var(--pad);max-width:560px;margin:0 auto}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:flex-start;padding:12px var(--pad) 8px 16px;background:var(--bg);pointer-events:none}
.hdr>*{pointer-events:auto}
.logo{width:66px;height:50px;display:block}
body[data-page=home] .logo{width:152px;height:115px;margin-top:55px}
body[data-page=home] .hdr{background:none}
.logo video,.logo .logo-anim{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;display:block}
.logo .logo-anim{mix-blend-mode:normal}
.logo video::-webkit-media-controls,.logo video::-webkit-media-controls-start-playback-button,.logo video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}
@keyframes spin{to{transform:rotateY(360deg)}}
.hdr-r{text-align:right;font-size:15px;line-height:20px;padding-top:8px}
.hdr-r button{display:block;margin-left:auto;font-weight:500}
.hdr-r a{color:var(--meta)}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;padding-top:min(231px,27.4svh)}
.see{display:inline-block;margin-top:min(122px,12svh);font-weight:500;font-size:min(40px,10.25vw);line-height:1.02;letter-spacing:-.05em;color:var(--grey);align-self:flex-start}
.see b{font-weight:500;color:var(--ink)}
.see i{font-style:normal;font-size:.7em;position:relative;top:-.55em;margin-left:.08em;color:var(--ink);display:inline-block;transition:transform .4s var(--ease)}
.see:active i{transform:translate(3px,-3px)}
.hlinks{margin-top:auto;display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:500;padding:40px 0 calc(21px + env(safe-area-inset-bottom))}
.page{padding-top:96px;padding-bottom:40px}
.page .lab{margin-top:0}
@view-transition{navigation:auto}
.h1{font-weight:500;font-size:min(47px,12.05vw);line-height:1;letter-spacing:-.05em}
.h1 .w{color:#9e9e9e;transition:color .9s var(--ease)}
.h1.on .w.k{color:var(--ink)}
.ph{background:var(--ph);border:1px dashed var(--ph-line);color:var(--meta);font-size:13px;line-height:1.4;padding:12px 14px}

/* section label */
.lab{border-top:1px solid var(--line);padding-top:12px;display:flex;gap:16px;font-size:13px;margin-top:96px}
.lab .n{color:var(--meta);width:16px;font-variant-numeric:tabular-nums}
.lab b{font-weight:500}
.lab sup{font-size:9px;font-weight:500;margin-left:2px}

/* accordion (work + facts) */
.acc{margin-top:24px;border-bottom:1px solid var(--line)}
.it{border-top:1px solid var(--line)}
.hd{width:100%;display:flex;align-items:flex-start;gap:16px;padding:11px 0 12px;color:var(--grey);transition:color .4s}
.hd .n{font-size:13px;width:16px;padding-top:6px;font-variant-numeric:tabular-nums}
.hd .t{flex:1;font-size:21px;font-weight:500;letter-spacing:-.025em;line-height:1.25}
.pm{width:14px;height:14px;position:relative;margin-top:8px;flex:none}
.pm:before,.pm:after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .5s var(--ease)}
.pm:after{transform:rotate(90deg)}
.it.open .hd{color:var(--ink)}
.it.open .pm:after{transform:rotate(0)}
.bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.it.open .bd{grid-template-rows:1fr}
.bd>div{overflow:hidden;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 0 calc(32px + var(--pad))}
.shot{position:relative;margin-left:calc(-32px - var(--pad));margin-right:calc(-1 * var(--pad))}
.shot{display:block}
.strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease) .1s}
.strip::-webkit-scrollbar{display:none}
.it.open .strip{clip-path:inset(0 0 0 0)}
.strip a{flex:0 0 100%;scroll-snap-align:start}
.strip img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ph)}
.shot .count{position:absolute;left:var(--pad);bottom:12px;color:#fff;font-size:13px;font-variant-numeric:tabular-nums;mix-blend-mode:difference;pointer-events:none}
.more{display:inline-flex;gap:6px;font-size:13px;font-weight:500;margin:17px 0 22px}
.more span:first-child{border-bottom:1px solid var(--ink);padding-bottom:1px}
.more span:last-child{transition:transform .3s var(--ease)}
.more:active span:last-child{transform:translateX(4px)}

/* about */
.h2{font-weight:500;font-size:min(58px,14.8vw);line-height:.98;letter-spacing:-.05em;margin-top:24px}
.h2 .g{color:var(--grey)}
.portrait{margin-top:32px;aspect-ratio:350/300}
.big{margin-top:32px;font-size:22.5px;font-weight:500;line-height:1.2;letter-spacing:-.025em}
.big .w{color:var(--grey);transition:color .25s}
.big .w.on{color:var(--ink)}
.copy{margin-top:32px;color:var(--body);font-size:16px;line-height:1.55;max-width:342px}
.copy p+p{margin-top:1.55em}
.pull{margin-top:48px;border-top:1px solid var(--ink);padding-top:20px;font-size:29px;font-weight:500;line-height:1.12;letter-spacing:-.03em}
.facts-title{margin-top:24px;min-height:76px}
.fact .ph.media{aspect-ratio:318/212}

/* cta */
.cta-h{margin-top:96px}
.btn{display:flex;justify-content:space-between;align-items:center;height:54px;padding:0 18px;font-size:15px;font-weight:500;border:1px solid var(--ink);transition:background .3s,color .3s}
.btn.dark{background:var(--ink);color:#fff}
.btn .sub{color:#fff;font-weight:400;margin-left:auto;margin-right:14px;font-size:13px}
.btns{display:grid;gap:10px;margin-top:26px}
.btn .ar{font-size:23px;line-height:1}
.contact{min-height:100svh;display:flex;flex-direction:column;padding-top:233px}
.contact .h2{margin-top:0;font-size:min(59px,15.2vw)}
.contact .btns{margin-top:31px}
.contact .ft{margin-top:auto;border:0;padding-bottom:calc(21px + env(safe-area-inset-bottom))}
.btns .pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn:active{background:#2a2a2a;color:#fff}
.ft{display:flex;gap:20px;font-size:14px;font-weight:500;border-top:1px solid var(--line);margin-top:64px;padding:20px 0 28px}
.ft span{margin-left:auto;color:var(--meta);font-weight:400}


/* menu */
.menu{position:fixed;inset:0;z-index:35;background:var(--bg);padding:219px var(--pad) 0;display:flex;flex-direction:column;visibility:hidden;opacity:0;transition:opacity .4s,visibility 0s .4s}
body.menu-open .menu{visibility:visible;opacity:1;transition:opacity .4s}
.menu .k{font-size:13px;color:var(--meta);margin-bottom:10px}
.mi{display:flex;gap:16px;align-items:flex-start;border-top:1px solid var(--line);padding:5px 0 7px;overflow:hidden}
.mi:last-of-type{border-bottom:1px solid var(--line)}
.mi .n{font-size:13px;line-height:1;width:16px;color:var(--meta);margin-top:7px}
.mi .t{font-size:min(59px,15.2vw);line-height:1;font-weight:500;letter-spacing:-.05em;color:var(--grey);transform:translateY(110%);transition:transform .7s var(--ease)}
.mi.cur .t{color:var(--ink)}
body.menu-open .mi .t{transform:none}
body.menu-open .mi:nth-of-type(2) .t{transition-delay:.06s}
body.menu-open .mi:nth-of-type(3) .t{transition-delay:.12s}
body.menu-open .mi:nth-of-type(4) .t{transition-delay:.18s}
.menu .btns{margin-top:36px}
.menu .ft{margin-top:auto;border:0;padding-bottom:calc(24px + env(safe-area-inset-bottom))}

/* reveal on scroll (only hidden when JS is running) */
html.js .rise{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .rise.in{opacity:1;transform:none}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:#fff;font-size:13px;padding:10px 14px;opacity:0;transition:.3s;z-index:60;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html.js .rise{opacity:1;transform:none}
}

/* case study */
.back{text-decoration:none}
.back span{margin-left:auto;color:var(--meta);font-variant-numeric:tabular-nums}
.t1{text-wrap:balance;font-weight:500;font-size:min(40px,10.25vw);line-height:1.02;letter-spacing:-.05em;margin-top:24px}
.stack{display:grid;gap:8px;margin:28px calc(-1 * var(--pad)) 0}
.stack img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ph)}
.disc{margin-top:28px;font-size:13px;line-height:1.5;color:var(--meta)}
.case .copy{margin-top:20px}
.next{display:block;border-top:1px solid var(--line);margin-top:72px;padding-top:12px}
.next small{font-size:13px;color:var(--meta)}
.next span{text-wrap:balance;display:block;margin-top:6px;font-weight:500;font-size:min(40px,10.25vw);line-height:1.02;letter-spacing:-.05em;color:var(--grey);transition:color .3s}
.next:active span{color:var(--ink)}
.portrait-img{margin-top:32px;width:100%;height:auto}

/* about (Dario's V5 tweaks) */
.about-h{font-size:min(38px,9.75vw);line-height:.98;margin-top:24px}
.portrait-img{margin-top:16px;width:100%;aspect-ratio:350/366;object-fit:cover}
body[data-page=about] .big{margin-top:23px;font-size:17.5px;line-height:1.2}
body[data-page=about] .big .g{color:var(--grey)}
body[data-page=about] .big p+p{margin-top:1.2em}
body[data-page=about] .copy{margin-top:32px;font-size:12px;line-height:1.5}
body[data-page=about] .copy p+p{margin-top:1.5em}
body[data-page=about] .pull{margin-top:29px;padding-top:23px;font-size:20px;letter-spacing:-.03em;line-height:1.12}

/* facts: flick reel (same motion as the Stories animation) */
.page .facts-lab{margin-top:32px}
.facts-lab span{margin-left:auto;color:var(--meta);font-variant-numeric:tabular-nums}
.facts{list-style:none;margin-top:8px}
.facts li{text-wrap:balance;font-size:26px;font-weight:500;line-height:1.12;letter-spacing:-.03em;padding:14px 0;border-top:1px solid var(--line)}
.facts em{display:block;font-style:normal;color:var(--grey);margin-top:.3em}
.facts.live{position:relative;overflow:hidden;height:var(--fh);cursor:pointer;-webkit-mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}
.facts.live li{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;border:0;padding:0;opacity:0;transform:translateY(100%);filter:blur(6px);transition:transform .8s cubic-bezier(.3,1.35,.5,1),filter .5s,opacity .3s}
.facts.live li.on{opacity:1;transform:none;filter:none}
.facts.live li.out{opacity:0;transform:translateY(-100%);filter:blur(6px);transition:transform .5s cubic-bezier(.6,0,.8,.3),filter .4s,opacity .45s}
.facts.measure li{position:relative;inset:auto;display:block}
.fbar{height:1px;background:var(--line);margin-top:8px;display:none}
.fbar i{display:block;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left}
.facts.live + .fbar{display:block}
.calendly-overlay{z-index:1000!important}

/* ============================================================
   DESKTOP (1024px and up). Phones never see any of this.
   Left third is fixed: logo, headline, menu, contact links.
   Right two thirds scroll.
   ============================================================ */
.side{display:none}
@media (min-width:1024px){
  :root{--L:33.3333vw;--gut:40px}
  .hdr-r,.menu{display:none!important}
  .hdr{position:fixed;top:0;left:0;right:auto;width:var(--L);padding:0;background:none;z-index:45}
  .logo,body[data-page=home] .logo{position:absolute;left:var(--gut);top:var(--gut);margin:0;width:152px;height:114px}

  .side{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:var(--L);padding:200px var(--gut) 28px;border-right:1px solid var(--line);background:var(--bg);z-index:40}
  .side-h{font-weight:500;font-size:40px;line-height:1.02;letter-spacing:-.05em;color:var(--ink)}
  .side-h .g{color:#9e9e9e}
  .side-k{font-size:13px;color:var(--meta);margin-top:42px;margin-bottom:8px}
  .side-nav .mi{display:flex;gap:16px;align-items:flex-start;border-top:1px solid var(--line);padding:5px 0 7px;overflow:visible}
  .side-nav .mi:last-child{border-bottom:1px solid var(--line)}
  .side-nav .mi .n{font-size:13px;line-height:1;width:16px;color:var(--meta);margin-top:6px}
  .side-nav .mi .t{font-size:48px;line-height:1;font-weight:500;letter-spacing:-.05em;color:var(--grey);transform:none;transition:color .3s}
  .side-nav .mi.cur .t,.side-nav .mi:hover .t{color:var(--ink)}
  .side-links{display:flex;flex-direction:column;gap:3px;font-size:14px;font-weight:500;margin-top:auto}
  .side .ft{margin:24px 0 0;border:0;padding:0}

  main.wrap{max-width:none;margin:0 0 0 var(--L);padding-left:var(--gut);padding-right:var(--gut)}
  .page{padding-top:var(--gut);padding-bottom:96px}

  /* home */
  .hero{min-height:100vh;padding:var(--gut) 0;display:flex;flex-direction:column}
  .hero .h1,.hlinks{display:none}
  .reel-bars{display:flex;gap:6px;height:2px}
  .reel-bars i{flex:1;background:var(--line);position:relative;overflow:hidden}
  .reel-bars i b{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
  .reel-bars i.done b{transform:scaleX(1)}
  .reel-bars i.now b{animation:reelbar 4s linear forwards}
  @keyframes reelbar{to{transform:scaleX(1)}}
  .reel-img{display:block;position:relative;aspect-ratio:16/9;margin-top:14px;background:var(--ph);overflow:hidden}
  .reel-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease)}
  .reel-img img.on{opacity:1}
  .reel-cap{display:flex;gap:24px;align-items:baseline;margin-top:14px;font-size:13px}
  .reel-n{color:var(--meta);font-variant-numeric:tabular-nums}
  .reel-t{font-size:15px;font-weight:500}
  .reel-more{margin-left:auto;font-weight:500}
  .see{margin-top:auto;font-size:40px}
  html.js .hero .see{opacity:1;transform:none}
  .hero{padding-bottom:80px}

  /* work */
  .acc{margin-top:0}
  .hd{padding:14px 0 15px}
  .hd .n{width:32px;padding-top:12px}
  .hd .t{font-size:32px;letter-spacing:-.03em;line-height:1.1}
  .pm{width:20px;height:20px;margin-top:11px}
  .it:not(.open) .hd:hover{color:var(--ink)}
  .bd>div{margin:0;padding:0 0 0 48px}
  .shot{margin:0}
  .more{margin:18px 0 28px}

  /* case study */
  .t1{font-size:56px;line-height:1;margin-top:48px}
  .stack{margin:40px calc(-1 * var(--gut)) 0}
  .disc{margin-top:40px}
  .case .copy{max-width:600px;font-size:17px;line-height:1.55}
  .next span{font-size:56px;line-height:1}

  /* contact: buttons 60% of the old size */
  .contact{min-height:100vh;padding-top:284px}
  .contact .h2{font-size:96px}
  .contact .btns{display:flex;gap:6px;margin-top:24px}
  .contact .btn{height:35px;padding:0 12px;font-size:12px}
  .contact .btn.dark{width:252px}
  .contact .btns>.btn:not(.dark){width:132px}
  .contact .btn .ar{font-size:15px}
  .contact .btn .sub{font-size:10px;margin-right:10px}
  .contact .ft{display:none}

  /* about */
  body[data-page=about] .page{display:grid;grid-template-columns:420px 1fr;column-gap:30px;align-items:start}
  body[data-page=about] .page>*{grid-column:1 / -1}
  .about-h{font-size:56px;margin-top:48px}
  .portrait-img{grid-column:1!important;margin-top:40px;width:420px;aspect-ratio:420/439}
  body[data-page=about] .big{grid-column:2!important;margin-top:36px;font-size:21px;max-width:430px}
  body[data-page=about] .copy{max-width:none;columns:2;column-gap:30px;font-size:13px;margin-top:56px}
  body[data-page=about] .copy p{break-inside:avoid}
  body[data-page=about] .copy p+p{margin-top:0}
  body[data-page=about] .pull{font-size:32px;max-width:700px;margin-top:64px;padding-top:24px}
  .page .facts-lab{margin-top:48px}
  .facts li{font-size:40px;letter-spacing:-.04em;line-height:1.08;max-width:760px}
}