@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-italic-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/space-grotesk-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/space-grotesk-normal-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  @font-face{font-family:'Newsreader Fallback';src:local('Georgia');size-adjust:98%;ascent-override:94%;descent-override:24%;line-gap-override:0%;}
  :root{
    --midnight:#0B1642; --depth:#070E2E; --porcelain:#F5F2EC; --bone:#E8E2D6;
    --klein:#2447E0; --klein-bright:#8CA3FF; --klein-deep:#1F3BB3;
    --mist:rgba(245,242,236,.68); --line:rgba(245,242,236,.16); --line-ink:rgba(23,25,27,.16);
    --ink:#17191B; --slate:#565B60;
    --serif:'Newsreader','Newsreader Fallback',Georgia,serif; --sans:'Space Grotesk',system-ui,sans-serif;
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:auto;}
  body{font-family:var(--sans);font-weight:300;color:var(--porcelain);background:var(--midnight);
    line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  ::selection{background:var(--klein);color:var(--porcelain);}
  img,video{max-width:100%;display:block;}
  h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.01em;text-wrap:balance;}
  h2,h3{color:var(--porcelain);}
  .it{font-style:italic;color:var(--klein-bright);display:inline-block;}
  .light .it{color:var(--klein-deep);}
  .eyebrow{font-weight:500;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mist);}
  .light .eyebrow{color:var(--slate);}
  .wrap{width:min(1160px,92vw);margin-inline:auto;}
  .sec{padding:clamp(4.5rem,11vh,8rem) 0;}
  .rule{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;}
  .light .rule{background:var(--line-ink);}
  .rule--klein{background:var(--klein-bright);}
  .light .rule--klein{background:var(--klein-deep);}
  .no-js .rule{transform:scaleX(1);}

  .fnav{display:flex;gap:1.1rem;flex-wrap:wrap;margin:.6rem 0 .2rem;}
  .fnav a{color:var(--klein-bright);text-decoration:underline;text-underline-offset:2px;font-size:.82rem;}
  .light{background:var(--bone);color:var(--ink);}
  .light h2,.light h3{color:var(--ink);}

  .frame{overflow:hidden;position:relative;border:1px solid var(--line);background:var(--depth);}
  .light .frame{border-color:var(--line-ink);background:var(--porcelain);}
  .frame>img,.frame>video{width:100%;height:100%;object-fit:cover;}

  .pre{display:none;}
  .js .pre{position:fixed;inset:0;z-index:200;background:var(--midnight);display:grid;place-items:center;}
  .pre__mark{font-family:var(--serif);font-size:clamp(1.8rem,5.5vw,2.8rem);opacity:0;color:var(--porcelain);}
  .pre__mark em{color:var(--klein-bright);}
  .pre__line{width:0;height:1px;background:var(--klein-bright);margin:.9rem auto 0;}

  .topbar{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;
    justify-content:space-between;padding:.9rem clamp(1rem,4vw,2.4rem);
    transform:translateY(-110%);transition:transform .5s var(--ease);
    background:rgba(11,22,66,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
  .topbar.show{transform:translateY(0);}
  .topbar__mark{font-family:var(--serif);font-size:1.15rem;color:var(--porcelain);}
  .topbar__mark i{font-style:italic;color:var(--klein-bright);}
  .topbar__nav{display:flex;gap:1.4rem;align-items:center;}
  .topbar__nav a{font-size:.78rem;letter-spacing:.04em;color:var(--mist);text-decoration:none;}
  .topbar__nav a:hover{color:var(--porcelain);}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--sans);
    font-weight:500;font-size:.8rem;letter-spacing:.05em;cursor:pointer;text-decoration:none;
    padding:.85rem 1.7rem;border:1px solid var(--klein);color:var(--porcelain);background:var(--klein);
    border-radius:2px;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);}
  .btn:hover{background:var(--porcelain);border-color:var(--porcelain);color:var(--midnight);transform:translateY(-1px);}
  .btn:focus-visible{outline:2px solid var(--klein-bright);outline-offset:3px;}
  .btn--ghost{background:transparent;color:var(--porcelain);border-color:rgba(245,242,236,.5);}
  .btn--ghost:hover{background:var(--porcelain);color:var(--midnight);border-color:var(--porcelain);}
  .light .btn--ghost{color:var(--ink);border-color:var(--ink);}
  .light .btn--ghost:hover{background:var(--ink);color:var(--bone);}
  .topbar .btn{padding:.5rem 1rem;}

  /* HERO: The Threshold */
  .hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--depth);}
  .hero__media{position:absolute;inset:0;z-index:0;will-change:transform;}
  .hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .hero__media video{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);object-fit:cover;}
  .hero__media video{opacity:0;transition:opacity 1.4s ease;}
  .hero__media video.on{opacity:1;}
  .hero__scrim{position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(7,14,46,.5) 0%,rgba(7,14,46,.12) 45%,rgba(7,14,46,.78) 100%);}
  .hero__inner{position:relative;z-index:2;width:min(1160px,92vw);margin:0 auto;
    padding:7rem 0 clamp(3.4rem,9vh,6rem);}
  .hero h1{font-size:clamp(2.8rem,7.8vw,6.2rem);font-weight:400;max-width:14ch;color:var(--porcelain);}
  .hero__tag{margin-bottom:1.2rem;}
  .hero__row{margin-top:1.6rem;display:flex;gap:clamp(1.4rem,4vw,3.5rem);align-items:flex-end;flex-wrap:wrap;}
  .hero__sub{max-width:44ch;color:var(--mist);font-size:1.02rem;}
  .hero__cta{display:flex;gap:.9rem;flex-wrap:wrap;}
  .hero__note{margin-top:1.4rem;font-size:.84rem;color:var(--mist);}
  .hero__note a{color:var(--klein-bright);text-decoration:underline;text-underline-offset:2px;}
  .hero__cue{position:absolute;right:clamp(1rem,4vw,2.4rem);bottom:2rem;z-index:2;
    font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mist);
    display:flex;flex-direction:column;align-items:center;gap:.5rem;}
  .hero__cue span{width:1px;height:36px;background:linear-gradient(var(--klein-bright),transparent);}

  /* STATEMENT (light) */
  .statement h2{font-size:clamp(2rem,5.4vw,3.8rem);max-width:22ch;}
  .statement .facts{margin-top:2.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2.4rem);}
  .statement .fact{border-top:1px solid var(--line-ink);padding-top:1rem;}
  .statement .fact b{font-family:var(--serif);font-weight:400;font-size:1.15rem;display:block;color:var(--ink);}
  .statement .fact span{font-size:.86rem;color:var(--slate);}

  /* PROOF REEL */
  .reel{height:340vh;position:relative;background:var(--depth);}
  .reel__pin{position:sticky;top:0;height:100vh;overflow:hidden;}
  .scene{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;}
  .scene.is-on{opacity:1;}
  .scene img,.scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .scene video{opacity:0;transition:opacity .8s ease;}
  .scene video.on{opacity:1;}
  .reel__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(7,14,46,.3),rgba(7,14,46,.72));}
  .reel__cap{position:absolute;left:6vw;bottom:11vh;z-index:3;max-width:min(34ch,84vw);}
  .rcap{position:absolute;bottom:0;left:0;opacity:0;transform:translateY(12px);
    transition:opacity .6s ease,transform .6s ease;}
  .rcap.is-on{opacity:1;transform:translateY(0);}
  .rcap .eyebrow{color:var(--porcelain);opacity:.85;}
  .rcap h3{color:var(--porcelain);font-size:clamp(1.7rem,4.2vw,2.8rem);font-weight:400;margin-top:.5rem;}
  .rcap p{color:var(--mist);margin-top:.5rem;font-size:.95rem;}
  .reel__rail{position:absolute;right:6vw;bottom:11vh;z-index:3;display:flex;gap:.5rem;}
  .reel__rail b{width:26px;height:2px;background:rgba(245,242,236,.3);display:block;transition:background .4s;}
  .reel__rail b.on{background:var(--klein-bright);}
  .reel__head{position:absolute;top:9vh;left:6vw;z-index:3;}
  .reel__head .eyebrow{color:var(--porcelain);opacity:.85;}

  /* PROCESS (midnight) */
  .process h2{font-size:clamp(2rem,5.2vw,3.4rem);}
  .steps{margin-top:2.4rem;}
  .step{display:grid;grid-template-columns:4.5rem 13rem 1fr;gap:1.4rem;align-items:baseline;
    padding:1.4rem 0;border-bottom:1px solid var(--line);}
  .step:first-child{border-top:1px solid var(--line);}
  .step .n{font-family:var(--serif);font-style:italic;color:var(--klein-bright);}
  .step h3{font-size:1.35rem;}
  .step p{color:var(--mist);font-size:.94rem;max-width:52ch;}

  /* CLOSING (midnight) */
  .closing{text-align:center;padding:clamp(5rem,13vh,9rem) 0;}
  .closing h2{font-size:clamp(2.2rem,6.4vw,4.4rem);max-width:20ch;margin-inline:auto;}
  .closing p{color:var(--mist);margin:1.1rem auto 0;max-width:44ch;}
  .closing .hero__cta{margin-top:2rem;justify-content:center;}

  footer{background:var(--depth);border-top:1px solid var(--line);padding:2.2rem 0;font-size:.82rem;color:var(--mist);}
  footer .wrap{display:flex;flex-direction:column;gap:.4rem;}
  footer .fmark{font-family:var(--serif);font-size:1.1rem;color:var(--porcelain);}
  footer .fmark i{font-style:italic;color:var(--klein-bright);}
  footer a{color:var(--klein-bright);text-decoration:underline;text-underline-offset:2px;}

  [data-reveal],[data-hero]{will-change:transform,opacity;}

  /* ============ PRODUCT STUDIO (21 Sep 2026) ============
     New sections for the product-first homepage. Everything above this line is the site's
     original cinematic system, shared in spirit with /websites/. Each product owns an accent
     so it reads as its own brand inside the studio frame: AniPrint's is lifted from its own
     key art (neon magenta and cyan). */
  :root{ --ap-pink:#ff5ad1; --ap-cyan:#7df3ff; }
  .sec__head{max-width:62ch;}
  .sec__head h2{font-size:clamp(2rem,5.2vw,3.4rem);margin-top:.9rem;}
  .lead{color:var(--mist);margin-top:1rem;max-width:58ch;font-size:1.02rem;}
  .light .lead{color:var(--slate);}
  .badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.64rem;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase;padding:.42rem .75rem;border:1px solid currentColor;border-radius:999px;}
  .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}

  /* ACT ONE: AniPrint, the current focus. The one product with a film. */
  .focus{background:var(--depth);padding-top:clamp(4rem,10vh,7rem);}
  .focus__label{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;}
  .focus__label .badge{color:var(--ap-pink);}
  .focus__label .badge.alt{color:var(--mist);}
  .focus__band{position:relative;margin-top:2rem;aspect-ratio:2.34/1;overflow:hidden;background:#05081c;}
  .focus__band img,.focus__band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .focus__band video{opacity:0;transition:opacity 1.2s ease;}
  .focus__band video.on{opacity:1;}
  .focus__band::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(5,8,28,0) 40%,rgba(5,8,28,.88) 100%);}
  .focus__title{position:absolute;left:6vw;right:6vw;bottom:clamp(1.4rem,5vh,3rem);z-index:2;}
  .focus__title h2{font-size:clamp(3.2rem,11vw,8.4rem);line-height:.9;letter-spacing:-.02em;color:var(--porcelain);}
  .focus__title p{font-family:var(--serif);font-style:italic;color:var(--ap-pink);
    font-size:clamp(1.3rem,3vw,2rem);margin-top:.5rem;}
  .focus__body{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,6vw,5rem);
    padding:clamp(3rem,8vh,5rem) 0 clamp(4rem,10vh,7rem);}
  .focus__body h3{font-size:clamp(1.6rem,3.4vw,2.4rem);}
  .focus__body h3 .it{color:var(--ap-cyan);}
  .focus__body p{color:var(--mist);margin-top:1rem;max-width:52ch;}
  .tonight{border-left:2px solid var(--ap-pink);padding:.3rem 0 .3rem 1.4rem;}
  .tonight .k{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ap-pink);font-weight:500;}
  .tonight b{display:block;font-family:var(--serif);font-weight:400;font-size:1.5rem;margin-top:.5rem;color:var(--porcelain);}
  .focus__foot{margin-top:2rem;display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;}
  .focus__by{font-size:.78rem;color:var(--mist);letter-spacing:.04em;}

  /* ACT TWO: exploring. Deliberately smaller, lighter and without film. */
  .xgrid{margin-top:2.6rem;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.6rem);}
  .xcard{border:1px solid var(--line-ink);background:var(--porcelain);padding:clamp(1.5rem,3vw,2.2rem);}
  .xcard .badge{color:var(--slate);}
  .xcard h3{font-size:clamp(1.6rem,3vw,2.1rem);margin-top:1.1rem;}
  .xcard .tag{font-family:var(--serif);font-style:italic;color:var(--klein-deep);font-size:1.12rem;margin-top:.3rem;}
  .xcard p{color:var(--slate);font-size:.95rem;margin-top:.9rem;max-width:46ch;}
  .verbs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem;}
  .verbs span{font-size:.7rem;font-weight:500;letter-spacing:.18em;border:1px solid var(--line-ink);
    padding:.35rem .6rem;color:var(--ink);}

  /* ACT THREE: experiments. Text only, on purpose: no graveyard of names. */
  .rnd h2{font-size:clamp(2rem,5.4vw,3.8rem);max-width:20ch;margin-top:.9rem;}
  .qlist{margin-top:2.6rem;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,6vw,5rem);}
  .qlist div{border-top:1px solid var(--line);padding:1.3rem 0;}
  .qlist b{font-family:var(--serif);font-weight:400;font-size:1.3rem;color:var(--porcelain);display:block;}
  .qlist p{color:var(--mist);font-size:.93rem;margin-top:.35rem;max-width:44ch;}
  .rnd__note{margin-top:1.8rem;font-size:.86rem;color:var(--mist);max-width:60ch;}

  /* ACT FOUR: how the studio builds. Reuses .steps from the original process block. */
  .how__out{margin-top:1.8rem;font-size:.95rem;color:var(--mist);max-width:60ch;}
  .how__out b{font-family:var(--serif);font-weight:400;color:var(--porcelain);}

  /* ACT FIVE: selected studio work. The reel is reused; it is shorter here than on /websites/. */
  .reel{height:260vh;}
  .svc{padding:clamp(3.5rem,9vh,6rem) 0;}
  .svc__lead{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(1.4rem,4vw,3rem);align-items:end;}
  .svc__main{margin-top:2.4rem;border:1px solid var(--line);padding:clamp(1.6rem,3.4vw,2.4rem);
    display:grid;grid-template-columns:1.4fr 1fr;gap:1.6rem;align-items:center;}
  .svc__main .k{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--klein-bright);font-weight:500;}
  .svc__main h3{font-size:clamp(1.5rem,3vw,2.1rem);margin-top:.5rem;}
  .svc__main p{color:var(--mist);margin-top:.6rem;font-size:.95rem;max-width:50ch;}
  .svc__main .cta{display:flex;flex-direction:column;gap:.7rem;}
  .svc__list{margin-top:1px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-top:0;}
  .svc__list a{background:var(--midnight);padding:1.3rem 1.4rem;text-decoration:none;display:block;transition:background .3s var(--ease);}
  .svc__list a:hover,.svc__list a:focus-visible{background:var(--depth);}
  .svc__list b{font-family:var(--serif);font-weight:400;font-size:1.15rem;color:var(--porcelain);display:block;}
  .svc__list span{font-size:.84rem;color:var(--mist);}
  .svc__list i{font-style:normal;color:var(--klein-bright);}

  /* ACT SIX: the studio. Reuses .statement facts. */
  .thesis p.big{font-family:var(--serif);font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.3;
    color:var(--ink);max-width:34ch;margin-top:1.2rem;}

  /* CLOSING SCENE: the Threshold returns, smaller, as the full stop. */
  .scene-end{position:relative;overflow:hidden;background:var(--depth);}
  .scene-end__media{position:absolute;inset:0;}
  .scene-end__media img,.scene-end__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .scene-end__media video{opacity:0;transition:opacity 1.4s ease;}
  .scene-end__media video.on{opacity:1;}
  .scene-end__media::after{content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse at 50% 55%,rgba(7,14,46,.6) 0%,rgba(7,14,46,.9) 70%);}
  .scene-end .closing{position:relative;z-index:2;}

  footer .fcols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:1.6rem;margin-bottom:1.6rem;}
  footer .fcols h4{font-family:var(--sans);font-weight:500;font-size:.66rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--porcelain);margin-bottom:.6rem;}
  footer .fcols a{display:block;text-decoration:none;color:var(--mist);margin-bottom:.35rem;}
  footer .fcols a:hover,footer .fcols a:focus-visible{color:var(--porcelain);}

  [data-reveal],[data-hero]{will-change:transform,opacity;}
  @media (max-width:860px){
    .topbar__nav a:not(.btn){display:none;}
    .statement .facts,.xgrid,.qlist,.focus__body,.svc__lead,.svc__main{grid-template-columns:1fr;}
    .svc__list{grid-template-columns:1fr;}
    .step{grid-template-columns:3rem 1fr;grid-template-rows:auto auto;}
    .step p{grid-column:2;}
    .hero__cta .btn{flex:1 1 auto;max-width:340px;}
    .reel{height:230vh;}
    .reel__rail{display:none;}
    .reel__cap{left:6vw;right:6vw;}
    .hero__cue{display:none;}
    footer .fcols{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:560px){
    .focus__band{aspect-ratio:1/1;}
    footer .fcols{grid-template-columns:1fr;}
  }
  @media (prefers-reduced-motion:reduce){
    .rule{transform:scaleX(1);}
    .scene{transition:none;}
    .topbar{transition:none;}
  }

/* Product studio, October 2026. Reuses the original palette, fonts and films. */
:root{--mist:#c8ccd9;--trace:#F8F4EC;--trace-ink:#222222;--trace-accent:#2563EB;}
body{font-weight:400;overflow-x:clip;}
html{scroll-padding-top:6rem;}
.wrap{width:min(1320px,90vw);}
a,button,input{touch-action:manipulation;}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--klein-bright);outline-offset:5px;}
.light a:focus-visible,.light input:focus-visible{outline-color:var(--klein);}
button{font:inherit;}
[hidden]{display:none!important;}
.skip-link{position:fixed;top:1rem;left:1rem;z-index:300;transform:translateY(-200%);padding:.7rem 1rem;background:var(--porcelain);color:var(--midnight);}
.skip-link:focus{transform:none;}
.topbar{transform:none;background:rgba(7,14,46,.96);padding:1rem 5vw;backdrop-filter:none;}
.topbar__mark{font-size:1.5rem;}
.topbar__nav a{font-size:.875rem;color:var(--porcelain);min-height:44px;display:inline-flex;align-items:center;}
.menu-toggle{display:none;}
.eyebrow{font-size:.75rem;letter-spacing:.18em;}
.btn{font-size:.9rem;min-height:48px;}
.hero{min-height: min(940px,100svh);}
.hero__inner{width:min(1320px,90vw);padding:10rem 0 5rem;}
.hero h1{font-size:clamp(3.6rem,7.5vw,7.5rem);line-height:.99;max-width:13ch;letter-spacing:-.035em;}
.hero__scrim{background:linear-gradient(90deg,rgba(7,14,46,.75),rgba(7,14,46,.18)),linear-gradient(0deg,rgba(7,14,46,.8),transparent 70%);}
.hero__row{align-items:center;justify-content:space-between;max-width:1100px;margin-top:2.4rem;}
.hero__sub{max-width:39ch;color:var(--porcelain);font-size:1.1rem;}
.hero__note{margin-top:2.5rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center;font-size:.875rem;}
.hero__note a{color:var(--porcelain);}
.hero__cue{display:none;}
.motion-toggle{position:fixed;right:1.2rem;bottom:1.2rem;z-index:95;padding:.6rem .9rem;background:var(--depth);border:1px solid #7d87a6;color:var(--porcelain);font-size:.8rem;min-height:44px;cursor:pointer;}
.product-intro{padding:3rem 0 0;}
.section-line{display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--line-ink);padding-bottom:2rem;}
.section-line h2{font-size:clamp(1.8rem,3vw,2.6rem);}
.collection-note{font-size:.85rem;text-align:right;color:var(--slate);}
.product-meta{display:flex;justify-content:space-between;gap:1rem;padding:1.8rem 0;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;}
.trace{background:var(--trace);padding-bottom:3rem;color:var(--trace-ink);}
.trace h2{color:var(--trace-ink);font-size:clamp(3rem,5.6vw,5.5rem);letter-spacing:-.04em;line-height:1.02;}
.trace h2 em{color:var(--trace-accent);}
.trace-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,7rem);align-items:center;padding:2rem 0 3rem;}
.product-wordmark{font-size:1.45rem;font-weight:500;letter-spacing:-.06em;margin-bottom:1.6rem;}
.trace-copy>p:not(.product-wordmark){max-width:41ch;margin-top:1.3rem;}
.trace-copy>p:nth-of-type(2){font-size:1.2rem;line-height:1.5;}
.trace .btn{margin-top:1.8rem;background:var(--trace-accent);border-color:var(--trace-accent);}
.trace .btn:hover{background:var(--trace-ink);color:white;}
.trace-copy .product-note{font-size:.8rem;color:#586158;}
.trace-compare{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:768/714;border:1px solid #d4d7cc;background:#fff;}
.trace-photo,.trace-guide,.trace-guide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.trace-guide{background:#fff;clip-path:inset(0 0 0 calc(100% - var(--reveal)));}
.compare-line{position:absolute;top:0;bottom:0;left:calc(100% - var(--reveal));width:2px;background:var(--trace-accent);pointer-events:none;}
.compare-labels{position:absolute;inset:1rem 1rem auto;display:flex;justify-content:space-between;pointer-events:none;}
.compare-labels span{background:var(--porcelain);color:var(--ink);padding:.35rem .65rem;font-size:.75rem;}
.compare-control{display:flex;gap:1.4rem;align-items:center;margin-top:1rem;}
.compare-control label{font-size:.8rem;flex-shrink:0;}
.compare-control input{width:100%;accent-color:var(--trace-accent);min-height:44px;cursor:ew-resize;}
.trace-demo figcaption{font-size:.75rem;color:#586158;margin-top:.5rem;}
.trace-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-ink);padding-top:1.4rem;gap:1rem;}
.trace-steps li{font-size:.9rem;}
.trace-steps span{font-family:var(--serif);font-style:italic;margin-right:.8rem;color:var(--trace-accent);}
.focus{padding:0 0 5rem;background:#10152d;}
.focus__band{aspect-ratio:2.4/1;max-height:610px;}
.focus__title{left:5vw;bottom:2.5rem;}
.focus__title h2{font-size:clamp(3.2rem,7vw,6.6rem);}
.focus__title p{font-size:1.2rem;}
.focus__body{padding-top:3rem;gap:6vw;}
.focus__body h3{font-size:clamp(2.2rem,4vw,3.8rem);margin-top:.8rem;}
.focus__body p{max-width:46ch;font-size:1rem;}
.text-link{display:inline-block;font-size:1rem;color:var(--porcelain);text-decoration:underline;text-underline-offset:6px;padding:.5rem 0;min-height:44px;}
.focus .text-link{margin-top:1.3rem;color:#a4f0f6;}
.tonight{border:0;border-left:1px solid #586082;padding:0 0 0 3rem;background:transparent;}
.tonight .k{font-size:.8rem;}
.tonight b.three{display:flex;align-items:center;gap:1.4rem;font-size:9rem;font-weight:400;line-height:1;color:#a4f0f6;margin:.8rem 0;}
.three span{font-size:clamp(1.6rem,2.5vw,2.4rem);line-height:1.1;color:var(--porcelain);}
.tonight-tail{display:block;font-size:.8rem;color:var(--mist);margin-top:1rem;}
.experiment{background:#e9e1d3;color:#29241f;padding-top:0;}
.experiment .product-meta{border-bottom:1px solid #bfb4a4;}
.experiment-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:5rem;padding:4rem 0;align-items:end;}
.experiment h2{font-size:clamp(2.7rem,5.5vw,5rem);color:#29241f;line-height:1.02;margin-top:1rem;}
.experiment h2 em{color:#6d4434;}
.experiment .eyebrow{color:#5f5044;}
.experiment-layout p+p{margin-top:1rem;}
.game-beats{display:flex;gap:1.3rem;flex-wrap:wrap;border-top:1px solid #bfb4a4;margin-top:2rem;padding-top:1.4rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.07em;}
.territories{display:flex;justify-content:space-between;gap:1.5rem;border-top:1px solid #bfb4a4;padding-top:1.4rem;font-size:.875rem;}
.territories>span{color:#5f5044;}
.process{background:var(--midnight);}
.process h2{font-size:clamp(2.5rem,5vw,4.4rem);margin-top:1rem;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0 2.5rem;}
.step,.step:first-child{display:block;border:0;border-top:1px solid var(--line);padding:1.4rem 0;}
.step .n{font-size:.95rem;}
.step h3{font-size:1.6rem;margin:.6rem 0;}
.step p{font-size:.95rem;}
.how__out{max-width:65ch;}
.svc{padding-bottom:2rem;}
.svc__lead h2{font-size:clamp(3rem,5.6vw,5rem);}
.work-films{padding-bottom:6rem;}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;}
.work-film:nth-child(2){margin-top:5rem;}
.work-media{position:relative;aspect-ratio:1280/732;overflow:hidden;}
.work-media img,.work-media video{position:absolute;width:100%;height:100%;object-fit:cover;}
.work-media video{opacity:0;transition:opacity .6s;}
.work-media video.on{opacity:1;}
.work-film figcaption{margin-top:1.1rem;}
.work-film h3{font-size:2rem;margin:.4rem 0;}
.work-film p{font-size:.95rem;color:var(--mist);}
.work-film--small{max-width:80%;}
.work-invitation{align-self:center;max-width:38ch;padding:1rem 0;}
.work-invitation h3{font-size:clamp(2.2rem,3.6vw,3.4rem);margin:.8rem 0 1rem;}
.work-invitation p{color:var(--mist);}
.work-invitation .text-link{display:table;margin-top:.8rem;}
.thesis h2{font-size:clamp(2.6rem,5vw,4.3rem);}
.thesis p.big{max-width:49ch;}
footer .fcols{grid-template-columns:1.5fr repeat(4,1fr);}
footer .footer-label{font-size:.8rem;text-transform:uppercase;color:var(--porcelain);margin-bottom:1rem;letter-spacing:.1em;}
footer .fcols a{font-size:.875rem;min-height:36px;overflow-wrap:anywhere;}
footer .fcols>div{font-size:.85rem;}
.scene-end .closing{padding-bottom:7rem;}
@media(max-width:1000px){
 .section-line{grid-template-columns:1fr 1.4fr;}.collection-note{display:none;}
 .trace-layout{gap:2rem;}.trace h2{font-size:3.7rem;}
 .hero__row{display:block;}.hero__cta{margin-top:1.5rem;}
 .experiment-layout{gap:2.5rem;}.work-grid{gap:2rem;}
 footer .fcols{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:860px){
 .topbar{flex-wrap:wrap;padding:.65rem 5vw;}.topbar__mark{font-size:1.4rem;}
 .menu-toggle{display:block;min-height:44px;background:none;border:1px solid #7681a2;color:var(--porcelain);padding:.4rem .9rem;cursor:pointer;}
 .topbar__nav{display:flex;width:100%;gap:.25rem;flex-wrap:wrap;padding:.5rem 0;}
 .topbar__nav a:not(.btn){display:inline-flex;}.topbar__nav a{padding:.3rem .8rem;font-size:.9rem;}
 .js .topbar__nav:not(.is-open){display:none;}
 .hero{min-height:850px;min-height:100svh;}.hero__inner{padding-top:8rem;padding-bottom:4rem;}
 .hero h1{font-size:clamp(3.5rem,9vw,6rem);}.hero__sub{font-size:1rem;}
 .hero__note{gap:.7rem;font-size:.8rem;margin-top:2rem;}
 .hero__cta .btn{max-width:none;flex:0 1 auto;}
 .trace-layout{grid-template-columns:1fr;gap:2.5rem;}.trace-copy{max-width:620px;}
 .trace h2{font-size:clamp(3rem,9vw,5.5rem);}.trace-demo{max-width:640px;width:100%;margin:auto;}
 .trace-steps{grid-template-columns:repeat(2,1fr);}
 .focus__body{grid-template-columns:1fr;gap:2.5rem;}.tonight{border-left:0;border-top:1px solid #586082;padding:2rem 0 0;}
 .focus__band{aspect-ratio:1.5/1;}.focus__title{bottom:1.5rem;}
 .experiment-layout{grid-template-columns:1fr;padding:3rem 0;}.territories{display:block;}.territories p{margin-top:.8rem;}
 .steps{grid-template-columns:repeat(2,1fr);}
 .work-film:nth-child(2){margin-top:3rem;}.work-film--small{max-width:100%;}
 .svc__lead{grid-template-columns:1fr;}
}
@media(max-width:560px){
 .hero h1{font-size:clamp(3.1rem,12vw,4.8rem);}.hero__inner{padding-bottom:3rem;}
 .hero__row{margin-top:1.5rem;}.hero__cta{gap:.6rem;}.hero__cta .btn{padding:.8rem 1rem;}
 .hero__note{max-width:28ch;}.hero__note>a{white-space:nowrap;}
 .product-meta{font-size:.75rem;letter-spacing:.02em;gap:.8rem;}.product-meta>span:last-child{text-align:right;max-width:19ch;}
 .section-line{display:block;}.section-line h2{margin-top:1rem;font-size:2rem;}
 .trace-layout{padding-top:1rem;}.compare-control{gap:.8rem;}.compare-control label{font-size:.75rem;}
 .trace-steps li{font-size:.85rem;}.focus{padding-bottom:3.5rem;}.focus__band{aspect-ratio:1.1/1;}
 .focus__title h2{font-size:3.7rem;}.focus__title p{font-size:1rem;}
 .work-grid{grid-template-columns:1fr;gap:2.5rem;}.work-film:nth-child(2){margin:0;}.work-invitation{margin-top:.5rem;}
 .steps{gap:0 1.5rem;}.step p{font-size:.9rem;}.step h3{font-size:1.4rem;}
 footer .fcols{grid-template-columns:1fr 1fr;gap:2rem 1.2rem;}footer .fcols>div{grid-column:1/-1;}
 .motion-toggle{right:.6rem;bottom:.6rem;font-size:.75rem;}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

.no-js .trace-demo figcaption{font-size:0;}
.no-js .trace-demo figcaption::after{content:"Photo and line guide from the TraceLift demo.";font-size:.75rem;}

/* Keep enlarged text inside grid tracks rather than forcing horizontal scrolling. */
.trace-layout>*,.experiment-layout>*,.focus__body>*,.steps>*,.work-grid>*,.fcols>*{min-width:0;}
h1,h2,h3,.btn,.hero__note,.product-meta{overflow-wrap:anywhere;}
.compare-control{flex-wrap:wrap;}
.compare-control input{flex:1 1 140px;min-width:0;}
@media(max-width:560px){.trace-steps{gap:1rem;}.compare-control{gap:0;}}
.tonight b.three{flex-wrap:wrap;}
.three span{min-width:0;overflow-wrap:anywhere;max-width:100%;}