/* ==========================================================================
   Mohd Zubair: portfolio stylesheet
   Theme: Bone, Paper, Canvas, Ink and Lime; Newsreader, Inter Tight and
   IBM Plex Mono. Lime is a fill only: never text, never a thin line on a
   light surface.
   Sections:
    1. Fonts            9. Page transition       17. Footer
    2. Tokens          10. Hero (home)           18. Work index
    3. Base            11. Stats                 19. Case pages
    4. Layout          12. Manifesto             20. Frames: phone, browser, design
    5. Type            13. Product stack         21. About
    6. UI parts        14. Design gallery        22. Contact
    7. Header, menu    15. AI cards, marquee     23. 404
    8. Cursor          16. Call to action        24. Inspect mode
                                                 25. Motion states, reduced motion
   Motion states (hidden before a reveal) only apply under html.motion, which
   the head script sets when motion is allowed and site.js removes if the
   libraries are missing. Without JavaScript every page shows complete.
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-tight-var-latin.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:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-tight-var-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 400;font-display:swap;src:url("../fonts/newsreader-300-400-latin.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:300 400;font-display:swap;src:url("../fonts/newsreader-300-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/newsreader-italic-400-latin.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:italic;font-weight:400;font-display:swap;src:url("../fonts/newsreader-italic-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400-latin.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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500-latin.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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* 2. Tokens --------------------------------------------------------------- */
:root{
  /* Palette */
  --bone:#F4F1EA;        /* page base */
  --paper:#FFFFFF;       /* cards, frames, pills */
  --canvas:#EAE6DC;      /* plates behind screenshots */
  --canvas-2:#E3DED2;
  --ink:#111814;         /* text and the primary fill. 15.99:1 on Bone */
  --ink-2:#3B4842;       /* secondary text. 8.49:1 on Bone */
  --ink-3:#5E6862;       /* captions, meta. 5.13:1 on Bone */
  --rule:#D6D1C5;
  --rule-2:#C9C3B5;
  --lime:#C6F432;        /* the one highlight: a fill only */
  --moss:#1C2621;        /* raised surface on Ink */
  --on-dark:#F4F1EA;     /* text on Ink */
  --on-dark-2:#A3B0A8;   /* secondary text on Ink. 8.01:1 */
  --rule-dark:#2C3832;

  /* Roles (dark surfaces re-point these under .on-dark) */
  --bg:var(--bone);
  --fg:var(--ink);
  --fg-2:var(--ink-2);
  --fg-3:var(--ink-3);
  --line:var(--rule);
  --line-2:var(--rule-2);
  --line-3:rgba(17,24,20,.45);

  --font-serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --font-sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --pad:clamp(20px,4.4vw,72px);
  --gutter:clamp(16px,2vw,28px);
  --maxw:1520px;
  --header-h:76px;

  --r-s:10px;--r-m:18px;--r-l:28px;--r-xl:40px;
  --shadow:0 30px 70px -38px rgba(17,24,20,.42);
  --shadow-lg:0 50px 110px -50px rgba(17,24,20,.5);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
@media (max-width:899px){:root{--header-h:64px}}
.on-dark{--fg:var(--on-dark);--fg-2:var(--on-dark-2);--fg-3:var(--on-dark-2);--line:var(--rule-dark);--line-2:#3A4841;--line-3:rgba(244,241,234,.4);color:var(--on-dark)}

/* 3. Base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bone);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light}
body{margin:0;min-height:100vh;background:var(--bone);color:var(--ink);font-family:var(--font-sans);font-size:1.0625rem;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible{outline-color:var(--on-dark)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:10000;background:var(--ink);color:var(--bone);padding:12px 18px;border-radius:999px;font-weight:600;transition:top .3s var(--ease-out)}
.skip:focus{top:16px}

/* Paper grain over everything, very faint */
.grain{position:fixed;inset:-100%;z-index:9400;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");animation:grain 1.4s steps(5) infinite}
@media (hover:none){.grain{display:none}}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* 4. Layout --------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(88px,11vw,170px);position:relative}
.section--tight{padding-block:clamp(56px,7vw,110px)}

/* 5. Type ----------------------------------------------------------------- */
/* Inter Tight carries the big moving type; Newsreader the section headings. */
.t-h2{font-family:var(--font-serif);font-size:clamp(2.3rem,1.5rem + 3.3vw,4.9rem);line-height:1;letter-spacing:-.025em;font-weight:400}
.t-h2 em,.t-h3 em{font-style:italic}
.t-h3{font-family:var(--font-serif);font-size:clamp(1.5rem,1.2rem + 1.1vw,2.2rem);line-height:1.1;letter-spacing:-.015em;font-weight:400}
.t-lead{font-size:clamp(1.12rem,1.5vw,1.45rem);line-height:1.5;letter-spacing:-.01em;color:var(--fg-2);font-weight:400}
.t-mono,.kicker,.chip{font-family:var(--font-mono);font-weight:400;letter-spacing:.01em}
.kicker{display:inline-flex;align-items:center;gap:.7em;font-size:.8rem;color:var(--fg-2);text-transform:lowercase}
.kicker::before{content:"";width:9px;height:9px;flex:none;background:var(--lime);box-shadow:0 0 0 1px var(--ink);border-radius:2px}
.on-dark .kicker::before{box-shadow:none}
.mark-lime{background:linear-gradient(transparent 58%,var(--lime) 58%,var(--lime) 92%,transparent 92%);padding-inline:.06em;margin-inline:-.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.muted{color:var(--fg-2)}
.dim{color:var(--fg-3)}

/* 6. UI parts ------------------------------------------------------------- */
.btn{--h:54px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;height:var(--h);padding:0 26px;border-radius:999px;font-size:.98rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;isolation:isolate;transition:color .5s var(--ease-out),border-color .5s var(--ease-out)}
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;transform:translate3d(0,101%,0);transition:transform .65s var(--ease-out)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn--primary{background:var(--ink);color:var(--bone)}
.btn--primary::before{background:var(--lime)}
.btn--primary:hover,.btn--primary:focus-visible{color:var(--ink)}
.btn--ghost{border:1px solid var(--ink);color:var(--ink)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--bone)}
.on-dark .btn--ghost{border-color:var(--on-dark);color:var(--on-dark)}
.on-dark .btn--ghost::before{background:var(--on-dark)}
.on-dark .btn--ghost:hover{color:var(--ink)}
.btn .ico{width:1.05em;height:1.05em;flex:none;transition:transform .6s var(--ease-out)}
.btn:hover .ico--r{transform:translateX(4px)}
.btn:hover .ico--d{transform:translateY(3px)}
.btn:hover .ico--ne{transform:translate(3px,-3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* Text that rolls up to a copy of itself on hover */
.roll{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.3;height:1.3em}
.roll>span{display:block;text-shadow:0 1.3em currentColor;transition:transform .6s var(--ease-out)}
a:hover .roll>span,button:hover .roll>span,a:focus-visible .roll>span{transform:translate3d(0,-1.3em,0)}

.link-u{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .6s var(--ease-out)}
.link-u:hover,.link-u:focus-visible{background-size:100% 1px}
.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:600;padding-bottom:2px;border-bottom:1px solid currentColor}
.link-arrow .ico{width:1em;height:1em;transition:transform .6s var(--ease-out)}
.link-arrow:hover .ico{transform:translateX(5px)}

.chip{display:inline-flex;align-items:center;gap:.45em;font-size:.74rem;line-height:1;padding:.62em .95em;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);white-space:nowrap}
.chip--solid{background:var(--canvas);border-color:transparent;color:var(--ink)}
.chip--lime{background:var(--lime);border-color:var(--ink);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

.dot{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px var(--ink);flex:none;position:relative}
.dot::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--ink);animation:pulse 2.4s var(--ease-out) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.6);opacity:0}}

.store-badges{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.store-badge{display:block;height:44px;border-radius:9px;transition:transform .5s var(--ease-out)}
.store-badge img{height:44px;width:auto}
.store-badge:hover{transform:translateY(-3px)}

/* Section head: kicker, title and a side note */
.shead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:end;margin-bottom:clamp(40px,6vw,92px)}
.shead .kicker{grid-column:1/-1}
.shead__title{grid-column:1/span 8;margin-top:18px}
.shead__aside{grid-column:9/span 4;display:flex;flex-direction:column;gap:20px;align-items:flex-start;justify-self:end;max-width:34ch}
.shead__aside p{color:var(--fg-2)}
@media (max-width:899px){.shead__title,.shead__aside{grid-column:1/-1}.shead__aside{justify-self:start;margin-top:8px}}

/* 7. Header and menu ------------------------------------------------------ */
.site-header{position:fixed;inset:0 0 auto 0;z-index:500;height:var(--header-h);transition:transform .7s var(--ease-out),background-color .5s,border-color .5s;border-bottom:1px solid transparent}
.site-header.is-scrolled{background:rgba(244,241,234,.82);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-color:var(--rule)}
.site-header.is-hidden{transform:translate3d(0,-105%,0)}
.site-header__inner{height:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:600;letter-spacing:-.02em;font-size:1.02rem}
.brand__mark{width:38px;height:32px;flex:none;color:var(--ink)}
.brand__mark path{fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.brand:hover .brand__mark path{animation:redraw 1.1s var(--ease-io)}
@keyframes redraw{0%{stroke-dashoffset:0}45%{stroke-dashoffset:1}46%{stroke-dashoffset:-1}100%{stroke-dashoffset:0}}
.brand__tick{width:7px;height:7px;background:var(--lime);box-shadow:0 0 0 1px var(--ink);border-radius:1px;margin-left:-6px;align-self:flex-end;margin-bottom:9px}
.nav{display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--rule);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav__link{position:relative;padding:9px 18px;border-radius:999px;font-size:.92rem;font-weight:550;color:var(--ink-2);transition:color .35s,background-color .35s}
.nav__link:hover{color:var(--ink)}
.nav__link[aria-current="page"]{color:var(--bone);background:var(--ink)}
.site-header__end{display:flex;align-items:center;gap:10px}
.status{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 14px;border-radius:999px;border:1px solid var(--ink);font-size:.86rem;font-weight:550;background:var(--paper);transition:background-color .3s}
.status:hover{background:var(--lime)}
.inspect-toggle{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--rule-2);background:var(--paper);font-family:var(--font-mono);font-size:.78rem;color:var(--ink-2);transition:color .3s,border-color .3s,background-color .3s}
.inspect-toggle svg{width:16px;height:16px}
.inspect-toggle:hover{color:var(--ink);border-color:var(--ink)}
.inspect-toggle[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);background:var(--paper);position:relative}
.menu-btn i{position:absolute;left:13px;right:13px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .6s var(--ease-out),top .6s var(--ease-out)}
.menu-btn i:first-of-type{top:17px}
.menu-btn i:last-of-type{top:25px}
.menu-open .menu-btn i:first-of-type{top:21px;transform:rotate(45deg)}
.menu-open .menu-btn i:last-of-type{top:21px;transform:rotate(-45deg)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress span{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:899px){
  .nav,.inspect-toggle{display:none}
  .menu-btn{display:block}
  .status{height:44px}
}
@media (max-width:419px){.status__text{display:none}.status{padding:0 16px}}

.menu{position:fixed;inset:0;z-index:480;background:var(--ink);color:var(--on-dark);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--header-h) + 28px) var(--pad) 32px;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-io);visibility:hidden}
.menu-open .menu{clip-path:inset(0 0 0% 0);visibility:visible}
.menu-open .site-header{color:var(--on-dark)}
.menu-open .brand__mark{color:var(--on-dark)}
.menu-open .menu-btn{background:var(--on-dark)}
.menu__links{display:flex;flex-direction:column;gap:2px}
.menu__link{display:block;overflow:hidden;font-size:clamp(2.6rem,13vw,4.6rem);line-height:1.05;letter-spacing:-.05em;font-weight:600}
.menu__link span{display:inline-block}
.menu__link small{font-family:var(--font-mono);font-size:.8rem;letter-spacing:0;color:var(--on-dark-2);vertical-align:super;margin-left:8px;font-weight:400}
.menu__foot{display:flex;flex-direction:column;gap:14px;color:var(--on-dark-2);font-size:.95rem}
.menu__foot a{color:var(--on-dark)}
.menu__row{display:flex;flex-wrap:wrap;gap:10px 22px}

/* 8. Cursor (fine pointers only) ----------------------------------------- */
.cursor{position:fixed;left:0;top:0;z-index:9600;pointer-events:none;display:none;transition:opacity .3s}
.has-cursor .cursor{display:block}
.has-cursor body,.has-cursor a,.has-cursor button,.has-cursor [role="button"],.has-cursor label,.has-cursor input[type="range"]{cursor:none}
.cursor__dot,.cursor__follow{position:fixed;left:0;top:0;will-change:transform}
.cursor__dot i{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px rgba(244,241,234,.85);transition:transform .3s var(--ease-out),opacity .3s}
.cursor__ring{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:1px solid rgba(17,24,20,.5);box-shadow:0 0 0 1px rgba(244,241,234,.35);transition:transform .55s var(--ease-out),background-color .4s,border-color .4s,opacity .3s}
.cursor__label{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(0);background:var(--lime);color:var(--ink);box-shadow:0 0 0 1px var(--ink);font-size:.82rem;font-weight:650;letter-spacing:-.01em;padding:13px 18px;border-radius:999px;white-space:nowrap;transition:transform .5s var(--ease-out)}
.cursor.is-link .cursor__ring{transform:scale(1.6);background:rgba(198,244,50,.45);border-color:var(--ink)}
.cursor.is-link .cursor__dot i{transform:scale(.5)}
.cursor.has-label .cursor__label{transform:translate(-50%,-50%) scale(1)}
.cursor.has-label .cursor__ring,.cursor.has-label .cursor__dot i{opacity:0}
.cursor.is-down .cursor__ring{transform:scale(.8)}
.cursor.is-hidden{opacity:0}

/* 9. Page transition and intro ------------------------------------------- */
.pt{position:fixed;inset:0;z-index:9000;pointer-events:none}
.pt__a,.pt__b{position:absolute;inset:0;clip-path:inset(100% 0% 0% 0%)}
.pt__a{background:var(--lime)}
.pt__b{background:var(--ink);color:var(--on-dark);display:grid;place-items:center}
.pt__label{overflow:hidden;padding:0 var(--pad);text-align:center}
.pt__label span{display:block;font-size:clamp(2.6rem,9vw,8.4rem);line-height:1.02;letter-spacing:-.055em;font-weight:600;transform:translate3d(0,110%,0)}
.pt-enter .pt__a,.pt-enter .pt__b,.intro .pt__a,.intro .pt__b{clip-path:inset(0% 0% 0% 0%)}
.pt-enter .pt__label span{transform:none}
.pt-leaving .pt{pointer-events:auto}
.pt__intro{display:none}
.intro .pt__label{display:none}
.intro .pt__intro{display:flex;flex-direction:column;align-items:center;gap:26px}
.pt__mark{width:clamp(84px,11vw,132px);height:auto;color:var(--on-dark)}
.pt__mark path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.pt__meta{display:flex;gap:18px;align-items:center;font-family:var(--font-mono);font-size:.78rem;color:var(--on-dark-2)}
.pt__count{color:var(--on-dark);min-width:3ch;text-align:right;font-variant-numeric:tabular-nums}
.pt__bar{width:160px;height:6px;border-radius:9px;background:var(--moss);overflow:hidden}
.pt__bar span{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}

/* 10. Hero (home) --------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--header-h) + 3vh);padding-bottom:clamp(26px,4.4vh,52px);overflow:clip;isolation:isolate}
.hero__dots{position:absolute;inset:0;z-index:-3;background-image:radial-gradient(rgba(17,24,20,.17) 1px,transparent 1.3px);background-size:30px 30px;background-position:center;-webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 35%,transparent 85%);mask-image:radial-gradient(120% 90% at 50% 40%,#000 35%,transparent 85%)}
.hero__canvas{position:absolute;inset:0;z-index:-2;width:100%;height:100%;-webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 35%,transparent 85%);mask-image:radial-gradient(120% 90% at 50% 40%,#000 35%,transparent 85%)}
.has-canvas .hero__dots{display:none}
.hero__glow{position:absolute;z-index:-1;width:70vw;height:70vw;max-width:1100px;max-height:1100px;right:-20vw;top:-28vw;border-radius:50%;background:radial-gradient(closest-side,rgba(198,244,50,.30),rgba(198,244,50,.10) 50%,transparent 72%);animation:drift 22s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6vw,4vw,0) scale(1.08)}100%{transform:translate3d(-2vw,9vw,0) scale(.96)}}
.hero__inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.hero__top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:clamp(18px,3vh,40px)}
.hero__kicker{font-family:var(--font-mono);font-size:clamp(.72rem,.9vw,.84rem);color:var(--ink-2);max-width:72ch}
.hero__kicker b{font-weight:400;color:var(--ink-3)}
.hero__name{font-size:clamp(4.6rem,min(20.5vw,30vh),21rem);line-height:.82;letter-spacing:-.06em;font-weight:440;margin:0 0 clamp(26px,4vh,52px) -.04em;user-select:none;color:var(--ink)}
.hero__name .row{display:block;white-space:nowrap}
.hero__name .row--2{text-align:right}
.vf-ch{display:inline-block}
.hero__bottom{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:end}
.hero__intro{grid-column:1/span 7;font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.4;letter-spacing:-.015em;color:var(--ink);max-width:44ch}
.hero__ctas{grid-column:1/span 7;grid-row:2;display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(16px,2.4vh,26px)}
.hero__meta{grid-column:9/span 4;grid-row:1/span 2;align-self:end;justify-self:end;display:grid;grid-template-columns:auto auto;gap:6px 18px;font-family:var(--font-mono);font-size:.76rem;line-height:1.5}
.hero__meta dt{color:var(--ink-3)}
.hero__meta dd{color:var(--ink);margin:0}
.floats{position:absolute;inset:0;z-index:-1;pointer-events:none}
.float{position:absolute;will-change:transform}
.float__in{will-change:transform}
.float--1{right:4.5%;top:15%;width:clamp(96px,10vw,176px);--rot:7deg}
.float--2{left:60%;top:10%;width:clamp(170px,17vw,300px);--rot:-4deg}
.float--3{left:24%;top:45%;width:clamp(80px,7vw,128px);--rot:-9deg}
.float .phone,.float .browser{transform:rotate(var(--rot))}
/* Phones: the floating screens get their own band above the name, sized by
   the band's height, so they can never cover the text on any phone size */
@media (max-width:899px){
  .hero{justify-content:flex-start;padding-top:calc(var(--header-h) + 6px);--band:clamp(180px,calc(100vh - 640px),330px)}
  @supports (height:100svh){.hero{--band:clamp(180px,calc(100svh - 640px),330px)}}
  .floats{position:relative;inset:auto;z-index:0;flex:none;height:var(--band);margin-bottom:clamp(6px,1.8vh,18px)}
  .hero__name{font-size:clamp(4.2rem,23vw,8rem)}
  .hero__top{flex-direction:column;gap:10px}
  .hero__intro,.hero__ctas,.hero__meta{grid-column:1/-1;justify-self:start}
  .hero__meta{grid-row:3;margin-top:18px}
  .float--2{left:auto;right:-7%;top:8%;width:min(58vw,calc(var(--band) * 1.18))}
  .float--1{right:auto;left:37%;top:14%;width:min(20vw,calc(var(--band) * .37))}
  .float--3{left:5%;top:5%;width:min(21vw,calc(var(--band) * .4))}
}

/* 11. Stats --------------------------------------------------------------- */
.stats{border-block:1px solid var(--rule);background:var(--paper)}
.stats__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:clamp(26px,3.4vw,50px) clamp(16px,2vw,32px);border-left:1px solid var(--rule)}
.stat:first-child{border-left:0;padding-left:0}
.stat__num{font-size:clamp(2.6rem,5.4vw,5.2rem);font-weight:500;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums}
.stat__num em{font-style:normal;background:var(--lime);border-radius:.12em;padding:0 .08em;margin-left:.04em}
.stat__label{margin-top:14px;color:var(--ink-2);font-size:.95rem;line-height:1.45;max-width:24ch}
@media (max-width:899px){
  .stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:26px 16px}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* 12. Manifesto ----------------------------------------------------------- */
.manifesto{padding-block:clamp(110px,15vw,240px)}
.manifesto__text{font-family:var(--font-serif);font-size:clamp(2rem,1.3rem + 3.6vw,4.6rem);line-height:1.1;letter-spacing:-.02em;font-weight:300;max-width:22ch;margin-top:28px}
.inline-icon{display:inline-block;width:.82em;height:.82em;border-radius:23%;overflow:hidden;vertical-align:-.08em;margin:0 .08em 0 .02em;background:#fff;box-shadow:0 0 0 1px var(--rule-2),0 8px 18px -8px rgba(17,24,20,.45)}
.inline-icon img{width:100%;height:100%;object-fit:cover}
.manifesto__foot{display:flex;flex-wrap:wrap;gap:14px 32px;margin-top:clamp(40px,5vw,72px);color:var(--ink-2)}
.manifesto__foot li{display:flex;align-items:center;gap:10px}
.manifesto__foot li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}

/* 13. Product stack (Ink cards) ------------------------------------------ */
.stack{display:grid;gap:clamp(20px,3vw,40px);padding-bottom:clamp(20px,6vh,60px)}
.motion .stack{padding-bottom:clamp(48px,14vh,140px)}
.stack-card{position:relative}
.motion .stack-card{position:sticky;top:calc(var(--header-h) + 18px)}
.stack-card__inner{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:min(82vh,800px);border-radius:var(--r-xl);overflow:hidden;background:var(--ink);color:var(--on-dark);transform-origin:50% 0;isolation:isolate;box-shadow:var(--shadow-lg)}
.stack-card__glow{position:absolute;inset:-25%;z-index:-1;background:radial-gradient(40% 44% at 72% 52%,rgba(198,244,50,var(--glow-a,.2)),transparent 72%);pointer-events:none}
.stack-card__grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--rule-dark) 1px,transparent 1px),linear-gradient(90deg,var(--rule-dark) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(60% 70% at 72% 50%,#000,transparent 80%);mask-image:radial-gradient(60% 70% at 72% 50%,#000,transparent 80%);opacity:.8}
.stack-card__shade{position:absolute;inset:0;z-index:20;background:var(--bone);opacity:0;pointer-events:none}
.stack-card__info{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:clamp(28px,3.6vw,58px)}
.stack-card__top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--font-mono);font-size:.78rem;color:var(--on-dark-2)}
.stack-card__num{color:var(--on-dark)}
.stack-card__icon{width:clamp(56px,5vw,76px);height:clamp(56px,5vw,76px);border-radius:24%;overflow:hidden;background:#fff;box-shadow:0 16px 40px -14px rgba(0,0,0,.7);margin-bottom:22px}
.stack-card__icon img{width:100%;height:100%;object-fit:cover}
.stack-card__title{font-size:clamp(3rem,6.2vw,6.3rem);line-height:.9;letter-spacing:-.06em;font-weight:600}
.stack-card__line{margin-top:18px;font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.45;color:var(--on-dark-2);max-width:32ch}
.stack-card__facts{display:grid;border-top:1px solid var(--rule-dark);margin-top:26px}
.stack-card__facts div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule-dark);font-size:.9rem}
.stack-card__facts dt{font-family:var(--font-mono);font-size:.74rem;color:var(--on-dark-2);padding-top:2px}
.stack-card__facts dd{margin:0;color:var(--on-dark)}
.stack-card__cta{display:inline-flex;align-items:center;gap:12px;font-weight:600}
.stack-card__cta .circle{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--on-dark);color:var(--ink);transition:transform .6s var(--ease-out),background-color .4s}
.stack-card__cta .circle svg{width:18px;height:18px}
.stack-card:hover .stack-card__cta .circle{transform:rotate(-45deg);background:var(--lime)}
.stack-card__visual{position:relative;min-height:420px}
.comp{position:absolute;inset:0}
.comp .phone,.comp .browser,.comp .frame{position:absolute}
.comp--phones .p1{width:31%;left:9%;top:18%;transform:rotate(-7deg)}
.comp--phones .p2{width:34%;left:33%;top:9%;z-index:2}
.comp--phones .p3{width:31%;left:60%;top:20%;transform:rotate(7deg)}
.comp--duo .b1{width:88%;left:4%;top:16%}
.comp--duo .p1{width:27%;right:5%;top:40%;z-index:2}
.comp [data-depth]{will-change:transform}
@media (max-width:899px){
  .stack-card__inner{display:flex;flex-direction:column;min-height:0;height:calc(100vh - var(--header-h) - 48px);height:calc(100svh - var(--header-h) - 48px);max-height:780px}
  .stack-card__visual{flex:1 1 auto;min-height:150px;aspect-ratio:auto;order:-1}
  .stack-card__info{flex:none;padding:16px 20px 20px;gap:12px}
  .stack-card__icon{width:44px;height:44px;margin-bottom:10px}
  .stack-card__title{font-size:clamp(2.3rem,11vw,3.4rem)}
  .stack-card__line{font-size:.98rem;margin-top:8px}
  .stack-card__facts{display:none}
  .stack-card__cta .circle{width:40px;height:40px}
}

/* 14. Design gallery (horizontal) ---------------------------------------- */
.hs{position:relative}
.hs__sticky{position:relative}
.hs__head{margin-bottom:clamp(24px,3vw,44px)}
.hs__head .shead{margin-bottom:0}
.hs__track{display:flex;gap:clamp(16px,2vw,30px);width:max-content;padding-inline:var(--pad)}
.dcard{position:relative;flex:none;width:clamp(290px,min(31vw,(100vh - 330px) * 1.15),560px);display:block}
.dcard__media{position:relative;aspect-ratio:16/11;border-radius:var(--r-l);overflow:hidden;background:var(--canvas);isolation:isolate}
.dcard__img{position:absolute;inset:0 -8%;width:116%;max-width:none;height:100%;object-fit:cover;object-position:top center;transition:transform 1.1s var(--ease-out)}
.dcard:hover .dcard__img{transform:scale(1.04)}
.dcard__phone{position:absolute;right:6%;bottom:-16%;width:21%;z-index:2;transition:transform 1s var(--ease-out)}
.dcard:hover .dcard__phone{transform:translateY(-7%) rotate(-3deg)}
.dcard__shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(17,24,20,.28));z-index:1;pointer-events:none}
.dcard__meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:20px}
.dcard__title{font-size:clamp(1.6rem,2.5vw,2.4rem);letter-spacing:-.045em;font-weight:600;line-height:1.05}
.dcard__type{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-3);white-space:nowrap}
.dcard__line{margin-top:8px;color:var(--ink-2);max-width:40ch;font-size:.98rem}
.dcard--end{width:clamp(240px,22vw,360px)}
.dcard--end .dcard__media{display:grid;place-items:center;background:var(--lime);box-shadow:inset 0 0 0 1px var(--ink)}
.dcard--end .dcard__media span{font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:600;letter-spacing:-.04em;display:flex;align-items:center;gap:.4em}
.dcard--end svg{width:.9em;height:.9em;transition:transform .6s var(--ease-out)}
.dcard--end:hover svg{transform:translateX(6px)}
.hs__progress{width:100%;max-width:var(--maxw);margin:clamp(28px,4vw,52px) auto 0;padding-inline:var(--pad);display:flex;align-items:center;gap:16px;font-family:var(--font-mono);font-size:.76rem;color:var(--ink-3)}
.hs__bar{flex:1;height:4px;border-radius:9px;background:var(--canvas-2);overflow:hidden}
.hs__bar span{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.motion .hs--pin{height:calc(100vh + var(--hs-dist,0px));padding-block:0}
.motion .hs__sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
@supports (height:100svh){.motion .hs--pin{height:calc(100svh + var(--hs-dist,0px))}.motion .hs__sticky{height:100svh}}
.no-motion .hs__viewport,.no-js .hs__viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.no-motion .hs__viewport::-webkit-scrollbar,.no-js .hs__viewport::-webkit-scrollbar{display:none}
.no-motion .dcard,.no-js .dcard{scroll-snap-align:start;scroll-margin-inline:var(--pad)}
.no-motion .hs__progress,.no-js .hs__progress{display:none}
@media (max-width:899px){
  .dcard{width:80vw}
  .dcard__media{aspect-ratio:4/3.3}
  .dcard--end{width:52vw}
  .motion .hs--pin .shead__aside{display:none}
  .hs__head .shead__title{font-size:clamp(2rem,8.6vw,2.6rem)}
}

/* 15. AI cards and marquee ----------------------------------------------- */
.ai-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden}
.ai-card{position:relative;background:var(--paper);padding:clamp(26px,2.8vw,44px);min-height:clamp(240px,22vw,320px);display:flex;flex-direction:column;gap:18px;isolation:isolate;overflow:hidden;transition:background-color .5s}
.ai-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(198,244,50,.42),transparent 62%);opacity:0;transition:opacity .5s}
.ai-card:hover::before{opacity:1}
.ai-card__num{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-3)}
.ai-card__title{margin-top:auto;font-family:var(--font-serif);font-size:clamp(1.5rem,1.25rem + .8vw,2.05rem);line-height:1.08;letter-spacing:-.015em;font-weight:400}
.ai-card__text{color:var(--ink-2);font-size:.98rem;line-height:1.55}
.ai-card__ico{width:36px;height:36px;color:var(--ink);transition:transform .8s var(--ease-out)}
.ai-card:hover .ai-card__ico{transform:rotate(-8deg) scale(1.08)}
@media (max-width:999px){.ai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.ai-grid{grid-template-columns:1fr}.ai-card{min-height:0}}

.marquees{display:flex;flex-direction:column;gap:14px;padding-block:clamp(26px,4vw,56px);overflow:hidden}
.marquee{will-change:transform}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__group{display:flex;gap:14px;flex:none;padding-right:14px}
.pill{display:inline-flex;align-items:center;gap:.55em;font-size:clamp(1.05rem,1.9vw,1.75rem);font-weight:500;letter-spacing:-.03em;padding:.5em 1.05em;border-radius:999px;border:1px solid var(--rule-2);background:var(--paper);white-space:nowrap;color:var(--ink)}
.pill i{width:.42em;height:.42em;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px var(--ink);flex:none}
.pill--alt{background:transparent;color:var(--ink-2)}
.pill--alt i{background:var(--ink);box-shadow:none}
.marquee__track.is-static{flex-wrap:wrap;width:auto;padding-inline:var(--pad)}
.marquee__track.is-static .marquee__group{flex-wrap:wrap}

/* 16. Call to action (Lime) ---------------------------------------------- */
.cta{padding-block:clamp(30px,4vw,60px)}
.cta__panel{position:relative;background:var(--lime);color:var(--ink);border-radius:var(--r-xl);padding:clamp(48px,8vw,140px) var(--pad);overflow:hidden;isolation:isolate}
.cta__panel::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(17,24,20,.16) 1px,transparent 1.3px);background-size:26px 26px;-webkit-mask-image:radial-gradient(60% 80% at 85% 20%,#000,transparent 75%);mask-image:radial-gradient(60% 80% at 85% 20%,#000,transparent 75%)}
.cta__inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:end}
.cta__kicker{grid-column:1/-1;font-family:var(--font-mono);font-size:.82rem}
.cta__title{grid-column:1/span 9;font-size:clamp(3rem,8.8vw,9.4rem);line-height:.88;letter-spacing:-.06em;font-weight:650;margin-top:18px}
.cta__side{grid-column:10/span 3;display:flex;flex-direction:column;align-items:flex-end;gap:24px;justify-self:end}
.cta__text{font-size:1.05rem;line-height:1.5;max-width:28ch;text-align:right;color:var(--ink)}
.cta__btn{display:grid;place-items:center;width:clamp(136px,12.5vw,190px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--bone);font-weight:600;font-size:1.04rem;letter-spacing:-.01em;text-align:center;line-height:1.2}
.cta__btn .mag-inner{display:flex;flex-direction:column;align-items:center;gap:8px}
.cta__btn svg{width:20px;height:20px}
.cta__mail{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(28px,4vw,56px);padding-top:24px;border-top:1px solid rgba(17,24,20,.25);font-family:var(--font-mono);font-size:.86rem}
.cta__mail a{font-weight:500}
@media (max-width:899px){
  .cta__title,.cta__side{grid-column:1/-1}
  .cta__side{align-items:flex-start;justify-self:start;margin-top:12px}
  .cta__text{text-align:left}
}

/* 17. Footer ------------------------------------------------------------- */
.footer{position:relative;padding-top:clamp(72px,9vw,130px);overflow:hidden}
.footer__top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--gutter)}
.footer__lead{font-family:var(--font-serif);font-size:clamp(1.7rem,1.2rem + 1.6vw,2.6rem);line-height:1.08;letter-spacing:-.02em;font-weight:400;max-width:16ch}
.footer__lead a{display:inline-flex;align-items:center;gap:.3em;font-family:var(--font-sans);font-size:.44em;font-weight:600;letter-spacing:-.01em;margin-top:.6em;padding:.45em .9em;border-radius:999px;background:var(--ink);color:var(--bone);transition:background-color .4s,color .4s}
.footer__lead a:hover{background:var(--lime);color:var(--ink)}
.footer__lead a svg{width:.9em;height:.9em}
.footer__col h2{font-family:var(--font-mono);font-size:.74rem;font-weight:400;color:var(--ink-3);margin-bottom:16px}
.footer__col ul{display:grid;gap:9px}
.footer__col a{color:var(--ink-2);transition:color .3s}
.footer__col a:hover{color:var(--ink)}
.footer__big{display:block;width:max-content;max-width:none;margin-top:clamp(56px,8vw,120px);padding-right:.04em;font-size:clamp(3.6rem,15.6vw,19.5rem);line-height:.8;letter-spacing:-.065em;font-weight:700;white-space:nowrap;color:transparent;background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 0/var(--fill,0%) 100%,linear-gradient(rgba(17,24,20,.07),rgba(17,24,20,.07));-webkit-background-clip:text;background-clip:text;user-select:none;transform:translateY(8%)}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-block:22px 28px;border-top:1px solid var(--rule);font-family:var(--font-mono);font-size:.76rem;color:var(--ink-3);position:relative;z-index:2;background:var(--bone)}
.footer__bottom button{color:var(--ink-2);display:inline-flex;gap:8px;align-items:center}
.footer__bottom button:hover{color:var(--ink)}
@media (max-width:899px){.footer__top{grid-template-columns:1fr 1fr}.footer__lead{grid-column:1/-1;margin-bottom:16px}}

/* 18. Work index --------------------------------------------------------- */
.page-hero{padding-top:calc(var(--header-h) + clamp(48px,9vw,140px));padding-bottom:clamp(40px,6vw,80px);position:relative}
.page-hero__title{font-size:clamp(4.4rem,17vw,17rem);line-height:.82;letter-spacing:-.065em;font-weight:440;margin-top:clamp(14px,2vw,28px);user-select:none}
.page-hero__title sup{font-family:var(--font-mono);font-size:max(.11em,.9rem);letter-spacing:0;font-weight:400;vertical-align:top;margin-left:.2em;position:relative;top:.5em;background:var(--lime);padding:.25em .5em;border-radius:99px;box-shadow:0 0 0 1px var(--ink)}
.page-hero__lead{margin-top:clamp(24px,3vw,40px);max-width:46ch}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.filter{height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--rule-2);background:var(--paper);font-size:.9rem;font-weight:550;color:var(--ink-2);transition:color .3s,background-color .3s,border-color .3s}
.filter sup{font-family:var(--font-mono);font-size:.68rem;margin-left:4px}
.filter:hover{color:var(--ink);border-color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.wlist{border-top:1px solid var(--ink)}
.wrow{position:relative;display:block;border-bottom:1px solid var(--rule);overflow:hidden}
.wrow__in{position:relative;display:grid;grid-template-columns:64px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 48px;align-items:center;gap:var(--gutter);padding-block:clamp(22px,2.8vw,40px);transition:opacity .45s}
.wrow__fill{position:absolute;inset:0;background:var(--paper);transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s var(--ease-out)}
.wrow:hover .wrow__fill{transform:scaleY(1);transform-origin:50% 0}
.wrow__num{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-3)}
.wrow__name{font-size:clamp(2.1rem,5.2vw,4.8rem);line-height:1;letter-spacing:-.055em;font-weight:500;transition:transform .7s var(--ease-out)}
.wrow:hover .wrow__name{transform:translateX(18px)}
.wrow__type{font-size:.92rem;color:var(--ink-2)}
.wrow__plat{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-2)}
.wrow__arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;transition:transform .6s var(--ease-out),background-color .4s}
.wrow__arrow svg{width:16px;height:16px}
.wrow:hover .wrow__arrow{transform:rotate(-45deg);background:var(--lime)}
.wrow__thumb{display:none}
@media (hover:hover){.wlist:hover .wrow:not(:hover) .wrow__in{opacity:.38}}
.wpreview{position:fixed;left:0;top:0;z-index:300;width:clamp(260px,24vw,400px);aspect-ratio:4/3;pointer-events:none;border-radius:18px;overflow:hidden;opacity:0;transform:translate3d(-50%,-50%,0) scale(.6);background:var(--canvas);box-shadow:var(--shadow-lg)}
.wpreview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transform:scale(1.12);transition:opacity .5s,transform .9s var(--ease-out)}
.wpreview img.is-on{opacity:1;transform:none}
@media (max-width:899px){
  .wrow__in{grid-template-columns:1fr auto;gap:10px 16px;padding-block:22px}
  .wrow__num{grid-column:1/-1}
  .wrow__type,.wrow__plat{grid-column:1/2}
  .wrow__arrow{grid-row:2/span 3;grid-column:2;align-self:center}
  .wrow__thumb{display:block;grid-column:1/-1;border-radius:16px;overflow:hidden;aspect-ratio:16/10;margin-top:6px;background:var(--canvas)}
  .wrow__thumb img{width:100%;height:100%;object-fit:cover;object-position:top center}
  .wpreview{display:none}
}

/* 19. Case pages --------------------------------------------------------- */
.crumb{display:flex;gap:10px;align-items:center;font-family:var(--font-mono);font-size:.8rem;color:var(--ink-3)}
.crumb a{color:var(--ink-2);transition:color .3s}
.crumb a:hover{color:var(--ink)}
.case-hero{padding-top:calc(var(--header-h) + clamp(40px,7vw,110px));position:relative}
.case-hero__kicker{margin-top:28px}
.case-title{line-height:.84;letter-spacing:-.065em;font-weight:600;margin-top:12px}
.case-hero__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);margin-top:clamp(24px,3vw,44px);align-items:end}
.case-line{grid-column:1/span 7;font-family:var(--font-serif);font-size:clamp(1.45rem,1.1rem + 1.3vw,2.3rem);line-height:1.2;letter-spacing:-.015em;color:var(--ink);max-width:30ch}
.case-links{grid-column:8/span 5;justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;align-items:center}
.case-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);margin-top:clamp(36px,5vw,72px);border-top:1px solid var(--ink)}
.case-meta div{padding-top:18px}
.case-meta dt{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);margin-bottom:8px}
.case-meta dd{margin:0;font-size:.98rem;line-height:1.45}
@media (max-width:899px){
  .case-line,.case-links{grid-column:1/-1}
  .case-links{justify-self:start;justify-content:flex-start}
  .case-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.case-visual{position:relative;margin-top:clamp(44px,6vw,90px);border-radius:var(--r-xl);overflow:hidden;background:var(--canvas);isolation:isolate;aspect-ratio:16/9}
.case-visual__glow{position:absolute;inset:-20%;z-index:-1;background:radial-gradient(42% 52% at 62% 56%,rgba(198,244,50,.5),transparent 70%)}
.case-visual__grid{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(17,24,20,.16) 1px,transparent 1.3px);background-size:26px 26px;-webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent 90%);mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent 90%)}
.case-visual .comp--duo .b1{width:72%;left:7%;top:10%}
.case-visual .comp--duo .p1{width:20%;right:8%;top:28%}
.wall{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,26px);padding-inline:4%}
.wall .phone{width:clamp(110px,15.5vw,250px);flex:none}
.wall .phone:nth-child(even){margin-top:10%}
.wall .phone:nth-child(odd){margin-top:-6%}
@media (max-width:899px){
  .case-visual{aspect-ratio:4/4.4;border-radius:var(--r-l)}
  .case-visual .comp--duo .b1{width:92%;left:4%;top:9%}
  .case-visual .comp--duo .p1{width:34%;right:6%;top:42%}
  .wall{justify-content:flex-start;padding-inline:6%}
  .wall .phone{width:34vw}
}

.overview{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.overview__label{grid-column:1/span 3}
.overview__body{grid-column:4/span 8}
.overview__title{margin-bottom:28px}
.overview__text{font-size:clamp(1.1rem,1.4vw,1.32rem);line-height:1.6;color:var(--ink-2);max-width:60ch}
.overview__text p+p{margin-top:1em}
.overview__note{margin-top:22px;font-size:.92rem;color:var(--ink-3);max-width:60ch;padding-left:14px;border-left:3px solid var(--lime)}
.hl{margin-top:clamp(36px,4vw,56px);counter-reset:hl;border-bottom:1px solid var(--rule)}
.hl li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding-block:22px;border-top:1px solid var(--rule);font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.55;color:var(--ink)}
.hl li::before{counter-increment:hl;content:counter(hl,decimal-leading-zero);font-family:var(--font-mono);font-size:.8rem;color:var(--ink-3);padding-top:4px}
.scope{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-m);overflow:hidden;margin-top:clamp(32px,4vw,52px)}
.scope li{background:var(--paper);padding:22px 22px 24px;font-size:1rem;line-height:1.4;display:flex;flex-direction:column;gap:14px}
.scope li span{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3)}
@media (max-width:899px){
  .overview__label,.overview__body{grid-column:1/-1}
  .overview__label{margin-bottom:14px}
  .scope{grid-template-columns:1fr 1fr}
}
@media (max-width:519px){.scope{grid-template-columns:1fr}}

.block{padding-block:clamp(70px,9vw,140px)}
.block+.block{padding-top:0}
.block__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);margin-bottom:clamp(32px,4.4vw,66px);align-items:start}
.block__head .kicker{grid-column:1/span 3;padding-top:.9em}
.block__title{grid-column:4/span 7}
.block__text{grid-column:4/span 6;margin-top:18px;color:var(--ink-2);font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.6}
.caption{margin-top:18px;font-family:var(--font-mono);font-size:.76rem;line-height:1.6;color:var(--ink-3);max-width:70ch}
@media (max-width:899px){.block__head .kicker,.block__title,.block__text{grid-column:1/-1}.block__head .kicker{padding-top:0}.block__title{margin-top:12px}}

/* Scroll-told steps: text on the left, a sticky device on the right */
.scrolly{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,90px)}
.scrolly__steps{display:flex;flex-direction:column}
.step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding-block:4vh;opacity:.3;transition:opacity .6s var(--ease-out)}
.step.is-active{opacity:1}
.step:first-child{min-height:60vh}
.step__num{align-self:flex-start;font-family:var(--font-mono);font-size:.78rem;padding:4px 10px;border-radius:99px;border:1px solid var(--ink);transition:background-color .4s}
.step.is-active .step__num{background:var(--lime)}
.step__title{font-family:var(--font-serif);font-size:clamp(2rem,1.4rem + 2vw,3.4rem);letter-spacing:-.02em;line-height:1;font-weight:400;margin-top:16px}
.step__text{margin-top:14px;color:var(--ink-2);font-size:clamp(1.02rem,1.25vw,1.2rem);max-width:36ch}
.step__img{display:none}
.scrolly__stage{position:sticky;top:calc(var(--header-h) + 4vh);height:calc(100vh - var(--header-h) - 8vh)}
.scrolly__box{position:relative;height:100%;display:grid;place-items:center;border-radius:var(--r-xl);background:var(--canvas);overflow:hidden;isolation:isolate}
.scrolly__box::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(42% 46% at 50% 55%,rgba(198,244,50,.55),transparent 72%),radial-gradient(rgba(17,24,20,.14) 1px,transparent 1.3px) 0 0/26px 26px}
.scrolly__screens{position:relative;height:84%;aspect-ratio:var(--ar,.47)}
.scrolly__screens>*{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transform:translate3d(0,6%,0) scale(.96);transition:opacity .7s var(--ease-out),transform 1s var(--ease-out)}
.scrolly__screens>.is-active{opacity:1;transform:none}
.scrolly__screens .phone{width:100%}
.scrolly__count{position:absolute;left:22px;bottom:18px;font-family:var(--font-mono);font-size:.76rem;color:var(--ink-3)}
.scrolly__count b{color:var(--ink);font-weight:500}
@media (max-width:899px){
  .scrolly{display:flex;flex-direction:column}
  .scrolly__stage{order:-1;top:0;z-index:2;height:auto;margin-inline:calc(var(--pad) * -1);padding:calc(var(--header-h) + 8px) var(--pad) 0;background:var(--bone)}
  .scrolly__stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(var(--bone),rgba(244,241,234,0));pointer-events:none}
  .scrolly__box{height:min(54vh,520px);height:min(54svh,520px);border-radius:var(--r-l)}
  .scrolly__screens{height:88%}
  .step{min-height:38vh;justify-content:flex-start;padding:3vh 0 0;opacity:1}
  .step:first-child{min-height:32vh}
  .step:last-child{min-height:50vh}
  .step__title{font-size:clamp(1.8rem,8vw,2.4rem);margin-top:12px}
}
.no-js .scrolly{grid-template-columns:1fr}
.no-js .scrolly__stage{display:none}
.no-js .step{min-height:0;opacity:1}
.no-js .step__img{display:block;margin-top:22px;width:min(68vw,300px)}

/* Phones in a row, with a gentle stagger */
.phones{display:flex;justify-content:center;align-items:flex-start;gap:clamp(12px,2vw,30px);flex-wrap:wrap}
.phones>*{width:clamp(140px,17vw,260px)}
.phones>*:nth-child(even){margin-top:clamp(20px,4vw,64px)}
.phones--4>*{width:clamp(130px,15vw,240px)}
.phones--5>*{width:clamp(120px,13vw,210px)}
@media (max-width:899px){
  .phones{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:4px var(--pad) 24px;margin-inline:calc(var(--pad)*-1);scroll-snap-type:x mandatory;scrollbar-width:none}
  .phones::-webkit-scrollbar{display:none}
  .phones>*{flex:none;width:58vw!important;scroll-snap-align:center}
  .phones>*:nth-child(even){margin-top:0}
}

/* Draggable strip of screens */
.strip{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;padding:6px var(--pad) 30px;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;user-select:none}
.strip::-webkit-scrollbar{display:none}
.strip.is-dragging{cursor:grabbing}
.strip>*{flex:none;width:clamp(200px,20vw,290px)}
.strip img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.strip .shot{border-radius:18px;overflow:hidden;background:var(--canvas);box-shadow:0 0 0 1px var(--rule),var(--shadow)}
.strip figcaption{margin-top:12px;font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3)}
.strip-bar{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3)}
.strip-bar__track{flex:1;height:4px;border-radius:9px;background:var(--canvas-2);overflow:hidden}
.strip-bar__track span{display:block;height:100%;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(.1)}
@media (hover:none){.strip{scroll-snap-type:x mandatory}.strip>*{scroll-snap-align:start;scroll-margin-inline:var(--pad)}}
@media (max-width:899px){.strip>*{width:58vw}}

/* Frames side by side */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);align-items:start}
.pair--wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.stack-v{display:grid;gap:clamp(16px,2.4vw,36px)}
@media (max-width:899px){.pair,.pair--wide{grid-template-columns:1fr}}

/* Desktop and phone together */
.duo{position:relative;padding-bottom:9%}
.duo>.browser,.duo>.frame{width:82%}
.duo>.phone{position:absolute;right:2%;bottom:0;width:23%;z-index:2}
@media (max-width:899px){.duo{padding-bottom:16%}.duo>.browser,.duo>.frame{width:88%}.duo>.phone{width:32%}}

/* Light and dark, compared with a slider */
.compare{--pos:50%;position:relative;border-radius:16px;overflow:hidden;isolation:isolate;box-shadow:0 0 0 1px var(--rule-2),var(--shadow-lg);touch-action:pan-y}
.compare img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
.compare__top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare__top img{height:100%;object-fit:cover;object-position:left top}
.compare__line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--ink);box-shadow:0 0 0 1px rgba(244,241,234,.7);z-index:2;pointer-events:none}
.compare__knob{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--lime);color:var(--ink);box-shadow:0 0 0 1.5px var(--ink),0 10px 30px -8px rgba(17,24,20,.5);display:grid;place-items:center}
.compare__knob svg{width:22px;height:22px}
.compare__tag{position:absolute;top:14px;z-index:3;font-family:var(--font-mono);font-size:.72rem;padding:7px 11px;border-radius:999px;background:var(--ink);color:var(--bone);pointer-events:none}
.compare__tag--l{left:14px}
.compare__tag--r{right:14px}
.compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:4;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.compare:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:4px}

/* A tall screenshot inside a frame that scrolls on its own */
.scrollwin{height:min(76vh,760px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--rule-2) transparent}
.scrollwin img{width:100%;height:auto}
.scrollwin-hint{display:flex;align-items:center;gap:10px;margin-top:14px;font-family:var(--font-mono);font-size:.76rem;color:var(--ink-3)}
.scrollwin-hint svg{width:14px;height:14px;animation:bob 1.8s var(--ease-io) infinite}
@media (max-width:899px){.scrollwin{height:auto;overflow:visible}.scrollwin-hint{display:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* Chai Mahel: the pour, pinned and played by scrolling */
.pour{position:relative}
.pour__stage{display:grid;grid-template-columns:min(62vw,(100vh - 240px) * 1.55) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;justify-content:center}
.pour__phone .phone{width:min(100%,(100vh - 250px) * .46);margin:0 auto}
.pour__frames{position:relative}
.pour__frames>img{display:block;width:100%;height:auto}
.pour__frames>img+img{position:absolute;inset:0}
.pour__caps{position:relative;min-height:3em;margin-top:24px}
.pour__cap{display:flex;gap:16px;align-items:center;font-family:var(--font-serif);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.4rem);letter-spacing:-.02em;font-weight:400}
.pour__cap span{font-family:var(--font-mono);font-size:.78rem;letter-spacing:0;padding:4px 10px;border-radius:99px;background:var(--lime);box-shadow:0 0 0 1px var(--ink)}
.js .pour__cap+.pour__cap{position:absolute;inset:0}
.pour__list{display:none;gap:16px;overflow-x:auto;padding:4px var(--pad) 24px;margin-inline:calc(var(--pad)*-1);scroll-snap-type:x mandatory;scrollbar-width:none}
.pour__list::-webkit-scrollbar{display:none}
.pour__list figure{flex:none;width:min(58vw,280px);scroll-snap-align:center}
.pour__list figcaption{margin-top:12px;font-weight:600;letter-spacing:-.02em}
.pour__list figcaption span{display:block;font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);font-weight:400;margin-bottom:4px}
.motion .pour__frames>img+img{opacity:0}
.motion .pour__cap{opacity:0}
.motion .pour__cap:first-child{opacity:1}
.pour__sticky{position:relative}
.motion .pour{height:calc(100vh * (1 + var(--steps,5) * .7))}
.motion .pour__sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center}
@supports (height:100svh){.motion .pour{height:calc(100svh * (1 + var(--steps,5) * .7))}.motion .pour__sticky{height:100svh}}
@media (max-width:899px){
  .pour__stage{grid-template-columns:1fr;justify-items:center}
  .pour__desk{display:none}
  .pour__phone .phone{width:min(64vw,(100vh - 230px) * .46);width:min(64vw,(100svh - 230px) * .46)}
  .pour__caps{text-align:center}
  .pour__cap{justify-content:center;font-size:clamp(1.3rem,6vw,1.8rem)}
}
.no-motion .pour__stage,.no-js .pour__stage,.no-motion .pour__caps,.no-js .pour__caps{display:none}
.no-motion .pour__list,.no-js .pour__list{display:flex}

/* Next project */
.next{display:block;position:relative;padding-block:clamp(80px,12vw,180px);border-top:1px solid var(--ink);overflow:hidden;isolation:isolate}
.next__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--gutter);align-items:end}
.next__label{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-2);display:flex;align-items:center;gap:10px}
.next__label span{width:9px;height:9px;background:var(--lime);box-shadow:0 0 0 1px var(--ink);border-radius:2px}
.next__name{display:block;line-height:.84;letter-spacing:-.065em;font-weight:600;margin-top:16px;transition:letter-spacing 1s var(--ease-out)}
.next:hover .next__name{letter-spacing:-.045em}
.next__line{margin-top:20px;color:var(--ink-2);max-width:44ch}
.next__media{width:clamp(180px,25vw,420px);aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:var(--canvas);transform:rotate(-5deg) scale(.92);transition:transform 1s var(--ease-out);box-shadow:var(--shadow-lg)}
.next__media img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 1.2s var(--ease-out)}
.next:hover .next__media{transform:rotate(0) scale(1)}
@media (hover:none){.next__media{transition:none}}
.next:hover .next__media img{transform:scale(1.06)}
.next__bg{position:absolute;inset:0;z-index:-1;background:var(--lime);transform:scaleY(0);transform-origin:50% 100%;transition:transform .9s var(--ease-io)}
.next:hover .next__bg{transform:scaleY(1)}
@media (max-width:899px){.next__in{grid-template-columns:1fr}.next__media{width:70%;margin-top:28px}}

/* 20. Frames ------------------------------------------------------------- */
/* The bezel scales with the phone: the inner padding is a % of the phone's own width */
.phone{position:relative;border-radius:15% / 7%;background:linear-gradient(160deg,#2A3630,var(--ink) 55%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),inset 0 0 0 4px rgba(0,0,0,.45),var(--shadow)}
.phone__in{padding:3.6%}
.phone__in>img,.phone__in>.pour__frames{display:block;width:100%;height:auto;border-radius:11.6% / 5.4%;overflow:hidden}
.browser{position:relative;border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--rule-2),var(--shadow-lg)}
.browser__bar{display:flex;align-items:center;gap:7px;height:clamp(26px,2.4vw,36px);padding:0 14px;background:var(--canvas);border-bottom:1px solid var(--rule)}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:var(--rule-2);flex:none}
.browser__bar i:first-child{background:var(--ink)}
.browser__url{margin:0 auto;transform:translateX(-24px);font-family:var(--font-mono);font-size:clamp(9px,.72vw,11px);color:var(--ink-3);background:var(--paper);padding:4px 16px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.browser>img{display:block;width:100%;height:auto}
.on-dark .browser{box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
.frame{position:relative}
.frame__label{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-family:var(--font-mono);font-size:.72rem;color:var(--ink-3)}
.frame__label svg{width:12px;height:12px;color:var(--ink);flex:none}
.frame__body{position:relative;border-radius:8px;overflow:hidden;background:var(--canvas);box-shadow:0 0 0 1px var(--rule-2),var(--shadow-lg)}
.frame__body>img{display:block;width:100%;height:auto}

/* 21. About -------------------------------------------------------------- */
.about-hero{padding-top:calc(var(--header-h) + clamp(40px,7vw,110px));position:relative}
.about-hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,90px);align-items:center}
.about-hero__title{font-family:var(--font-serif);font-size:clamp(3.6rem,2rem + 7.4vw,10rem);line-height:.9;letter-spacing:-.035em;font-weight:400;margin-top:18px}
.about-hero__lead{margin-top:clamp(24px,3vw,40px);max-width:46ch;color:var(--ink-2);font-size:clamp(1.1rem,1.45vw,1.38rem);line-height:1.6}
.about-hero__ctas{margin-top:32px}
.idcard-wrap{perspective:1300px;display:flex;justify-content:center}
.idcard{position:relative;width:min(390px,84vw);aspect-ratio:5/7.2;border-radius:28px;padding:26px;display:flex;flex-direction:column;gap:18px;background:var(--ink);color:var(--on-dark);box-shadow:var(--shadow-lg);transform-style:preserve-3d;will-change:transform;overflow:hidden;--sx:50%;--sy:30%;--hx:50%}
.idcard__hole{position:absolute;top:14px;left:50%;width:62px;height:10px;margin-left:-31px;border-radius:99px;background:var(--bone);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.idcard__head{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-family:var(--font-mono);font-size:.7rem;color:var(--on-dark-2)}
.idcard__photo{position:relative;aspect-ratio:1/.86;border-radius:20px;overflow:hidden;background:var(--lime);display:grid;place-items:center;isolation:isolate}
.idcard__photo::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(17,24,20,.18) 1px,transparent 1.3px);background-size:18px 18px}
.idcard__photo svg{width:46%;height:auto;color:var(--ink)}
.idcard__photo path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.idcard__name{font-size:1.7rem;line-height:1;letter-spacing:-.045em;font-weight:650}
.idcard__role{margin-top:6px;font-size:.88rem;color:var(--on-dark-2);line-height:1.45}
.idcard__rows{display:grid;gap:7px;margin-top:auto;font-family:var(--font-mono);font-size:.7rem}
.idcard__rows div{display:flex;justify-content:space-between;gap:14px;border-top:1px dashed var(--rule-dark);padding-top:7px}
.idcard__rows dt{color:var(--on-dark-2)}
.idcard__rows dd{margin:0;text-align:right;color:var(--on-dark)}
.idcard__code{display:flex;gap:2px;height:22px;align-items:stretch;opacity:.7}
.idcard__code i{flex:var(--w,1);background:var(--on-dark)}
.idcard__sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(520px circle at var(--sx) var(--sy),rgba(255,255,255,.12),transparent 42%),linear-gradient(115deg,transparent 34%,rgba(198,244,50,.14) 48%,rgba(255,255,255,.08) 54%,transparent 66%);background-size:100% 100%,260% 260%;background-position:center,var(--hx) 50%}
@media (max-width:899px){.about-hero__grid{grid-template-columns:1fr}.idcard-wrap{margin-top:20px}}

.roles{position:relative;border-top:1px solid var(--ink)}
.role{position:relative;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:var(--gutter);padding-block:clamp(26px,3vw,40px);border-bottom:1px solid var(--rule);align-items:baseline}
.role__when{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-3)}
.role__name{font-size:clamp(1.7rem,3.4vw,3.1rem);letter-spacing:-.05em;font-weight:600;line-height:1}
.role__title{display:block;margin-top:12px;font-family:var(--font-serif);font-style:italic;font-size:1.15rem;letter-spacing:0;font-weight:400;color:var(--ink-2)}
.role__text{color:var(--ink-2);font-size:1rem}
.role__text a{color:var(--ink)}
.role__bar{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:899px){.role{grid-template-columns:1fr;gap:10px}}

.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.principle{padding-top:22px;border-top:1px solid var(--ink)}
.principle__num{font-size:clamp(2.6rem,4.2vw,4rem);letter-spacing:-.05em;line-height:1;font-weight:200;color:var(--ink-3)}
.principle h3{margin-top:22px;font-family:var(--font-serif);font-size:1.6rem;letter-spacing:-.015em;font-weight:400;line-height:1.1}
.principle p{margin-top:10px;color:var(--ink-2);font-size:.98rem}
@media (max-width:999px){.principles{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}}
@media (max-width:599px){.principles{grid-template-columns:1fr}}

.toolbox{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden}
.tool{position:relative;background:var(--paper);padding:24px 22px 26px;transition:background-color .5s}
.tool:hover{background:var(--bone)}
.tool h3{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:1.06rem;letter-spacing:-.02em;font-weight:600}
.tool h3 span{font-family:var(--font-mono);font-size:.7rem;font-weight:400;color:var(--ink-3)}
.tool ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.tool li{font-size:.82rem;padding:6px 10px;border-radius:999px;background:var(--canvas);color:var(--ink-2);transition:background-color .3s,color .3s}
.tool:hover li{background:var(--lime);color:var(--ink)}
@media (max-width:1199px){.toolbox{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:799px){.toolbox{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:519px){.toolbox{grid-template-columns:1fr}}

.edu{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:end;padding-block:clamp(30px,4vw,56px);border-block:1px solid var(--ink)}
.edu__label{grid-column:1/span 3}
.edu__main{grid-column:4/span 6}
.edu__main strong{display:block;font-family:var(--font-serif);font-size:clamp(1.8rem,1.2rem + 2vw,3.2rem);letter-spacing:-.02em;line-height:1.05;font-weight:400}
.edu__main span{display:block;margin-top:8px;color:var(--ink-2)}
.edu__side{grid-column:10/span 3;justify-self:end}
@media (max-width:899px){.edu__label,.edu__main,.edu__side{grid-column:1/-1;justify-self:start}}

/* 22. Contact ------------------------------------------------------------ */
.contact-hero{padding-top:calc(var(--header-h) + clamp(40px,8vw,130px));padding-bottom:clamp(40px,6vw,90px)}
.contact-title{font-size:clamp(4.6rem,18vw,18.5rem);line-height:.82;letter-spacing:-.065em;font-weight:440;margin-top:16px;user-select:none}
.contact-lead{margin-top:clamp(24px,3vw,44px);max-width:44ch}
.mailbox{margin-top:clamp(40px,6vw,90px);padding-block:clamp(28px,3.6vw,48px);border-block:1px solid var(--ink);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.mailbox__label{display:block;font-family:var(--font-mono);font-size:.78rem;color:var(--ink-3);margin-bottom:12px}
.mailbox__email{font-family:var(--font-serif);font-size:clamp(1.25rem,.55rem + 3.7vw,4.4rem);letter-spacing:-.02em;font-weight:400;line-height:1.05;overflow-wrap:anywhere}
.copy-btn .copy-btn__done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5em;opacity:0;transform:translateY(60%);transition:opacity .4s,transform .6s var(--ease-out)}
.copy-btn .copy-btn__idle{display:flex;align-items:center;gap:.6em;transition:opacity .4s,transform .6s var(--ease-out)}
.copy-btn.is-copied .copy-btn__idle{opacity:0;transform:translateY(-60%)}
.copy-btn.is-copied .copy-btn__done{opacity:1;transform:none}
.links3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin-top:clamp(28px,4vw,56px)}
.lcard{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:42px;min-height:220px;padding:26px;border-radius:var(--r-l);border:1px solid var(--rule-2);background:var(--paper);overflow:hidden;isolation:isolate;transition:border-color .4s}
.lcard::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lime);transform:translate3d(0,101%,0);transition:transform .8s var(--ease-out)}
.lcard:hover{border-color:var(--ink)}
.lcard:hover::before{transform:none}
.lcard__top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.76rem;color:var(--ink-3)}
.lcard__top svg{width:20px;height:20px;color:var(--ink);transition:transform .6s var(--ease-out)}
.lcard:hover .lcard__top svg{transform:translate(4px,-4px)}
.lcard__name{font-size:clamp(1.7rem,2.6vw,2.4rem);letter-spacing:-.045em;font-weight:600;line-height:1}
.lcard__sub{margin-top:8px;font-size:.92rem;color:var(--ink-2);overflow-wrap:anywhere}
.facts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin-top:clamp(48px,6vw,90px)}
.facts3 div{padding-top:18px;border-top:1px solid var(--rule-2)}
.facts3 dt{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3)}
.facts3 dd{margin:10px 0 0;font-size:1.2rem;letter-spacing:-.02em;font-weight:500}
@media (max-width:899px){.links3,.facts3{grid-template-columns:1fr}.lcard{min-height:170px}}

/* 23. 404 ---------------------------------------------------------------- */
.nf{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--header-h)}
.nf__num{font-size:clamp(7rem,34vw,34rem);line-height:.8;letter-spacing:-.07em;font-weight:300;user-select:none}
.nf__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-top:clamp(24px,3vw,40px)}

/* 24. Inspect mode ------------------------------------------------------- */
.inspect-layer{display:none}
.inspect .inspect-layer{display:block}
.inspect-grid{position:fixed;inset:0;z-index:590;pointer-events:none}
.inspect-grid__cols{height:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.inspect-grid__cols span{background:rgba(198,244,50,.16);border-inline:1px solid rgba(17,24,20,.07)}
.inspect [data-c]{outline:1px dashed rgba(17,24,20,.3);outline-offset:-1px}
.inspect,.inspect *{cursor:crosshair!important}
.inspect .cursor{display:none}
.inspect-x,.inspect-y{position:fixed;z-index:595;pointer-events:none;background:rgba(17,24,20,.4)}
.inspect-x{left:0;right:0;top:0;height:1px}
.inspect-y{top:0;bottom:0;left:0;width:1px}
.inspect-box{position:fixed;left:0;top:0;z-index:596;pointer-events:none;border:1.5px solid var(--ink);opacity:0;transition:opacity .25s}
.inspect-box.is-on{opacity:1}
.inspect-box i{position:absolute;width:8px;height:8px;background:var(--paper);border:1.5px solid var(--ink)}
.inspect-box i:nth-of-type(1){left:-5px;top:-5px}
.inspect-box i:nth-of-type(2){right:-5px;top:-5px}
.inspect-box i:nth-of-type(3){left:-5px;bottom:-5px}
.inspect-box i:nth-of-type(4){right:-5px;bottom:-5px}
.inspect-tag{position:absolute;left:-1.5px;bottom:100%;margin-bottom:6px;display:flex;gap:6px;white-space:nowrap}
.inspect-tag b,.inspect-tag em{font:500 11px/1 var(--font-mono);font-style:normal;padding:6px 8px;border-radius:5px}
.inspect-tag b{background:var(--lime);color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.inspect-tag em{background:var(--paper);color:var(--ink-2);box-shadow:0 0 0 1px var(--rule-2)}
.inspect-size{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;font:500 11px/1 var(--font-mono);padding:6px 8px;border-radius:5px;background:var(--ink);color:var(--bone);white-space:nowrap}
.inspect-hud{position:fixed;left:16px;bottom:16px;z-index:597;display:grid;gap:6px;padding:12px 14px;border-radius:12px;background:var(--ink);color:var(--on-dark-2);font:400 11px/1.4 var(--font-mono);pointer-events:none}
.inspect-hud b{color:var(--on-dark);font-weight:500}
.inspect-hud__xy{color:var(--on-dark);font-variant-numeric:tabular-nums;white-space:pre}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* 25. Motion states ------------------------------------------------------ */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin:0 -.04em -.12em}
.wi{display:inline-block}
.motion [data-split] .wi{transform:translate3d(0,112%,0)}
.motion [data-split].is-in .wi{transform:none;transition:transform 1.15s var(--ease-out);transition-delay:calc(var(--li,0) * 85ms + var(--d,0s))}
.motion [data-reveal]{opacity:0;transform:translate3d(0,40px,0)}
.motion [data-reveal].is-in{opacity:1;transform:none;transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out);transition-delay:var(--d,0s)}
.motion [data-stagger]>*{opacity:0;transform:translate3d(0,34px,0)}
.motion [data-stagger].is-in>*{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:var(--d,0s)}
.motion [data-img]{clip-path:inset(100% 0 0 0)}
.motion [data-img].is-in{clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--ease-io)}
.motion [data-lit] .wi{opacity:.15}
.motion [data-hero]{opacity:0;transform:translate3d(0,30px,0)}
.motion [data-hero].is-in{opacity:1;transform:none;transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out);transition-delay:var(--d,0s)}
.motion .hero__name .vf-ch,.motion [data-chars] .vf-ch{transform:translate3d(0,105%,0)}
.motion .is-in .vf-ch{transform:none;transition:transform 1.25s var(--ease-out);transition-delay:calc(var(--ci,0) * 45ms + var(--d,0s))}
.hero__name .row,[data-chars] .row{overflow:hidden;padding:.1em .02em .07em;margin:-.1em -.02em -.07em}
[data-chars] .row{display:inline-block;vertical-align:top}
.hero__name[data-chars] .row{display:block}
.case-title{font-size:clamp(3.4rem,min(13.6vw,calc(150vw / var(--len,8))),14rem)}
.next__name{font-size:clamp(3.2rem,min(13vw,calc(150vw / var(--len,8))),13.5rem)}
.next__line,.next__media,.lcard__name,.lcard__sub{display:block}
.motion .float{opacity:0;transition-delay:var(--d,0s)}
.motion .float.is-in{opacity:1;transition:opacity 1.2s var(--ease-out)}
.motion .float .phone,.motion .float .browser{transform:rotate(calc(var(--rot) * 2.2)) translate3d(0,60px,0) scale(.8);transition:transform 1.7s var(--ease-out);transition-delay:var(--d,0s)}
.motion .float.is-in .phone,.motion .float.is-in .browser{transform:rotate(var(--rot))}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .grain{display:none}
}
@media print{.site-header,.menu,.pt,.cursor,.grain,.inspect-layer,.hero__canvas{display:none!important}body{background:#fff}}