/* Layout: Swiss two-column grid (index rail + content) on a white page, hairline rules instead of boxes, 3px image corners, Sora headlines, Geist body, Geist Mono labels. */
  :root{
    --ink:#121418; --ink-soft:#555B64; --ink-faint:#8A9099; --bg:#FFFFFF; --tile:#FFFFFF;
    --rule:#121418; --hair:rgba(18,20,24,0.12);
    --band-gray:#F3F4F6; --band-blue:#EDF2FA;
    --accent:#2F4FF0; --accent2:#2F7A55; --accent-warm:#C2571C;
    --benign:#3E9A6A; --vus:#A3ABB5; --path:#C8602A;
    --on-accent:#FFFFFF;
    --av1-bg:#DDE4FF; --av1-fg:#2F4FF0; --av2-bg:#DCF0E3; --av2-fg:#2F7A55; --av3-bg:#FBE4D4; --av3-fg:#C2571C; --av4-bg:#ECE3FB; --av4-fg:#6B46C9;
    --bar-bg:#FFFFFF; --hero-mint:#E1FEF7; --bar-h:80px; --radius-card:10px; --about-bg:#090708; --lime:#B9FF00; --band-dark:#0E1116; --text-w:640px; --fact-bg:rgba(47,79,240,0.08); --top-green:rgba(62,154,106,0.16); --top-blue:rgba(47,79,240,0.14);
    --f-display:'Sora', system-ui, sans-serif;
    --f-body:'Geist', 'Helvetica Neue', Arial, system-ui, sans-serif;
    --f-mono:'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
    --f-logo:'Unbounded', var(--f-display);
  }
  /* The site is light only: it never switches to dark colors, even when the visitor's system is in dark mode.
     The dark values below are kept for reference and only apply if a page sets data-theme="dark" on purpose. */
  :root{color-scheme:light;}
  :root[data-theme="dark"]{
    --av1-bg:#22306B; --av1-fg:#93A6FF; --av2-bg:#1E3A2B; --av2-fg:#8FD1A8; --av3-bg:#43281A; --av3-fg:#E8A06A; --av4-bg:#33264F; --av4-fg:#B9A0F2;
    --ink:#F0F1F3; --ink-soft:#B4BAC2; --ink-faint:#7F8690; --bg:#121418; --tile:#1C1F24;
    --rule:#F0F1F3; --hair:rgba(240,241,243,0.14);
    --band-gray:#1A1D21; --band-blue:#16202C;
    --bar-bg:#121418; --hero-mint:#0F2A26; --band-dark:#0A0C10; --fact-bg:rgba(147,166,255,0.12); --accent:#93A6FF; --accent2:#8FD1A8; --accent-warm:#E8A06A;
    --benign:#8FD1A8; --vus:#7E8792; --path:#E8A06A; --on-accent:#121418;
    color-scheme:dark;
  }
  *{box-sizing:border-box;}
  [hidden]{display:none!important;}
  html{-webkit-text-size-adjust:100%; scroll-padding-top:var(--bar-h);}
  @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }
  @media (max-width:640px){ :root{--bar-h:64px;} }
  h1,h2,h3,h4,.big,.n,b{font-kerning:normal; font-feature-settings:'kern' 1, 'liga' 1;}
  body{margin:0; text-rendering:optimizeLegibility; font-kerning:normal; font-optical-sizing:auto; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; -webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{font-family:var(--f-display); color:var(--ink); margin:0; text-wrap:balance;}
  p{margin:0;}
  a{color:var(--accent);}
  a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
  .mono{font-family:var(--f-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;}
  img{display:block; max-width:100%; height:auto;}

  /* frame */
  .band{padding-inline:24px; padding-block:96px;}
  .band.gray{background:var(--band-gray);}
  .band.blue{background:var(--band-blue);}
  .band.tight{padding-block:40px;}
  .frame{max-width:1180px; margin:0 auto;}
  .grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:200px minmax(0,1fr); gap:0 48px; border-top:1.5px solid var(--rule); padding-top:20px;}
  .idx{display:grid; align-content:start; gap:4px; position:sticky; top:88px; align-self:start;}
  .idx .n{font-family:var(--f-mono); font-size:12px; color:var(--accent);}
  .idx .l{font-family:var(--f-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink);}
  .body{min-width:0; display:grid; gap:32px; align-content:start;}
  h2{font-size:clamp(34px,5vw,64px); line-height:1.08; letter-spacing:-0.022em; font-weight:600; max-width:17ch; hyphens:none;}
  .lede{font-size:clamp(19px,1.7vw,22px); line-height:1.5; color:var(--ink); max-width:34em; letter-spacing:0;}
  .copy{font-size:17px; line-height:1.7; color:var(--ink-soft); max-width:38em;}
  .copy strong{color:var(--ink); font-weight:600;}
  .cols2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 48px;}

  /* top + hero */
  /* site bar: ZIK wordmark left, Works | About right. Transparent at the top, solid page color once scrolled. */
  .sitebar{position:sticky; top:0; z-index:50; padding-inline:24px; padding-top:env(safe-area-inset-top,0px); background:transparent; transition:background .2s ease, box-shadow .2s ease;}
  .sitebar.scrolled{background:var(--bar-bg);}
  .topbar{display:flex; justify-content:space-between; align-items:center; gap:12px; height:var(--bar-h); font-family:var(--f-display); font-size:16px;}
  .topbar a{color:var(--ink); text-decoration:none; transition:color .2s ease;}
  .topbar a:hover{color:var(--accent);}
  .topbar .logo{font-family:var(--f-logo); font-size:24px; line-height:1; letter-spacing:0;}
  .topbar .nav{display:flex; align-items:center; gap:12px;}
  .topbar .nav i{font-style:normal; color:var(--ink);}
  .under-bar, .band.under-bar{margin-top:calc(-1 * var(--bar-h)); padding-top:var(--bar-h);}
  .band.flush-b{padding-bottom:0;}
  @media (max-width:640px){ .sitebar{padding-inline:16px;} }
  .hero{padding-block:40px 56px;}
  .hero h1{color:var(--accent); font-size:clamp(40px,7.4vw,104px); line-height:1.04; letter-spacing:-0.028em; font-weight:600; max-width:13ch;}
  .facts{list-style:none; margin:28px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
  .facts li{display:inline-flex; align-items:baseline; gap:0; padding:9px 16px; border-radius:100px; background:var(--fact-bg); backdrop-filter:blur(6px);}
  .facts .k{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  .facts .v{font-size:14.5px; font-weight:500; color:var(--ink);}
  .hero-foot{display:grid; grid-template-columns:minmax(0,1fr); gap:32px; margin-top:44px;}
  .hero-foot .lede{max-width:36em;}
  .meta{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px 24px; max-width:900px;}
  .meta div{border-top:1px solid var(--hair); padding-top:10px; display:grid; gap:4px; align-content:start;}
  .meta .k{font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint);}
  .meta .v{font-family:var(--f-display); font-size:20px; font-weight:600; letter-spacing:-0.012em;}
  .acmg{height:4px; background:linear-gradient(90deg, var(--benign), var(--vus) 50%, var(--path)); margin-top:40px;}
  .acmg-scale{display:flex; justify-content:space-between; margin-top:8px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint);}

  .hero h1, .hero .facts, .hero .lede{will-change:opacity, transform, filter;}
  /* centered hero */
  .hero{text-align:center;}
  .hero h1{margin-inline:auto;}
  .hero .facts{justify-content:center;}
  .hero .hero-foot{justify-items:center;}
  .hero .lede{margin-inline:auto;}
  /* hero photo */
    .top-glow{background:radial-gradient(70% 120% at 0% 0%, var(--top-green), transparent 70%), radial-gradient(70% 120% at 100% 0%, var(--top-blue), transparent 70%), var(--bg);}
  .top-glow{position:relative; isolation:isolate;}
  .top-glow > *:not(.waves){position:relative; z-index:1;}
  .waves{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:0; transition:opacity 1.2s ease;}
  .waves.on{opacity:1;}
  .hero-photo{padding-inline:24px; max-width:1228px; margin:0 auto;}
  .hero-photo img{width:100%; height:auto; border-radius:0;}
  .hero-photo .shot{cursor:default;}
  /* white space under the hero image, and a shorter band top for the section right after it */
  .hero-photo{padding-bottom:72px;}
  .hero-photo + .band{padding-top:48px;}
  @media (max-width:640px){ .hero-photo{padding-bottom:40px;} .hero-photo + .band{padding-top:32px;} }
  /* full-bleed hero: the image runs to the window edges, centered on its main object; the window crops the sides, no white gap */
  .hero-photo.bleed{max-width:none; padding-inline:0; overflow:hidden;}
  .hero-photo.bleed img{width:min(126vw, 1818px); max-width:none; margin-left:50%; transform:translateX(-50%);}
  /* .xl: a wider frame (5440 instead of 3349) with the side screens complete. Same tablet size, so the image is 1.624x wider (up to 2953px); on wider screens it ends where the side tablets end, so there is no cut edge. */
  .hero-photo.bleed.xl img{width:min(204.7vw, 2953px);}
  .hero-photo.bleed.xl.n5400 img{width:min(203.2vw, 2930px);} /* a 5400-wide frame (Dreamplace) */
  @media (max-width:640px){ .hero-photo.bleed{padding-inline:0;} .hero-photo.bleed img, .hero-photo.bleed.xl img, .hero-photo.bleed.xl.n5400 img{width:100%; margin-left:0; transform:none;} }
  /* viewer */
  .seg{display:flex; gap:24px; margin-bottom:16px; border-bottom:1px solid var(--hair);}
  .seg button{font:500 12px var(--f-mono); letter-spacing:0.08em; text-transform:uppercase; border:0; background:none; color:var(--ink-faint); padding:0 0 12px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
  .seg button[aria-pressed="true"]{color:var(--ink); border-bottom-color:var(--accent);}
  .shot{cursor:zoom-in;}
  .mat{background:none; padding:0;}
  .mat img, .shot img{border-radius:3px;}

  /* shift list */
  .shift{display:grid; border-top:1px solid var(--hair);}
  .shift div{display:grid; grid-template-columns:minmax(0,1fr) 40px minmax(0,1.4fr); align-items:baseline; gap:16px; padding-block:18px; border-bottom:1px solid var(--hair);}
  .shift .from{font-family:var(--f-mono); font-size:13px; color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--hair);}
  .shift .ar{font-family:var(--f-mono); color:var(--accent2);}
  .shift .to{font-family:var(--f-display); font-size:clamp(20px,2.4vw,30px); font-weight:600; letter-spacing:-0.018em; line-height:1.1;}

  /* summary definition grid */
  .defs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 24px;}
  .defs div{border-top:1px solid var(--rule); padding-top:12px; display:grid; gap:10px; align-content:start;}
  .defs .k{font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent);}
  .defs p{font-size:15px; line-height:1.6; color:var(--ink-soft);}
  .more{display:grid; gap:14px;}
  .toggle{justify-self:start; font:500 12px var(--f-mono); letter-spacing:0.08em; text-transform:uppercase; background:none; border:0; border-bottom:1px solid currentColor; color:var(--accent); cursor:pointer; padding:0 0 2px;}

  /* role */
  .role{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 24px;}
  .role div{border-top:1px solid var(--hair); padding-top:12px; display:grid; gap:8px; align-content:start;}
  .role .k{font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint);}
  .role p{font-size:16px; line-height:1.55;}
  .quote{font-family:var(--f-display); font-weight:300; font-size:clamp(24px,2.8vw,36px); line-height:1.25; letter-spacing:-0.018em; max-width:24em; color:var(--accent);}
  .quote::before{content:'“'; color:var(--accent);}
  .quote::after{content:'”'; color:var(--accent);}

  /* era */
  .era{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 48px;}
  .era div{border-top:1px solid var(--hair); padding-top:14px; display:grid; gap:6px; align-content:start;}
  .era .k{font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint);}
  .era h3{font-size:clamp(28px,3.4vw,44px); font-weight:300; letter-spacing:-0.022em;}
  .era .now h3{font-weight:600; color:var(--accent);}
  .era p{font-size:15.5px; line-height:1.55; color:var(--ink-soft); max-width:26em;}

  /* users */
  .users{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 24px;}
  .users .user{ display:grid; gap:12px; align-content:start;}
  .av{position:relative; width:100%; margin-bottom:6px; border-radius:8px; overflow:hidden;}
  .av > img{transition:transform .8s cubic-bezier(.2,.7,.2,1);}
  .av::after{content:''; position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.2,1);}
  .users .user h3{transition:color .3s ease, text-shadow .3s ease;}
  @media (hover:hover) and (pointer:fine){
    .users .user:hover .av > img{transform:scale(1.06);}
    .users .user:hover .av::after{transform:scaleX(1);}
    .users .user:hover h3{color:var(--accent); text-shadow:1px 0 rgba(255,42,109,.55), -1px 0 rgba(5,217,232,.55);}
  }
  @media (prefers-reduced-motion: reduce){ .av > img, .av::after{transition:none;} .users .user:hover .av > img{transform:none;} }
  .av > img{width:100%; height:auto; aspect-ratio:2/3; display:block; border-radius:8px; object-fit:cover; background:var(--av-bg);}
  .av-badge{position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:50%; background:var(--tile); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(18,20,24,0.18);}
  .av-badge svg{width:18px; height:18px; fill:none; stroke:var(--av-fg); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
  .users h3{font-size:19px; font-weight:600; letter-spacing:-0.012em; line-height:1.2;}
  .needs{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
  .needs li{font-size:12.5px; font-weight:500; line-height:1; padding:7px 11px; border-radius:100px; background:var(--tile); color:var(--av-fg-text, var(--ink));}
  .users p{font-size:14.5px; line-height:1.55; color:var(--ink-soft);}

  /* challenge / solution */
  .cs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px;}
  .cs div{display:grid; gap:12px; align-content:start; border-top:4px solid var(--accent-warm); padding-top:16px;}
  .cs .so{border-top-color:var(--accent2);}
  .cs .k{font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-warm);}
  .cs .so .k{color:var(--accent2);}
  .cs h3{font-size:clamp(22px,2.4vw,30px); font-weight:600; letter-spacing:-0.018em; line-height:1.12;}
  .cs p{font-size:16px; line-height:1.65; color:var(--ink-soft);}

  .cmp{--pos:50%; position:relative; aspect-ratio:1500/748; background:#FFFFFF; border-radius:3px; overflow:hidden; user-select:none; touch-action:pan-y; box-shadow:0 0 0 1px var(--hair), 0 8px 28px rgba(18,20,24,0.06);} /* light frame: the white Before image would otherwise merge with the page */
  .cmp-layer{position:absolute; inset:0;}
  .cmp-layer img{width:100%; height:100%; object-fit:contain; pointer-events:none; display:block;}
  .cmp-after img{object-fit:cover;}
  .cmp-before{padding:2% 0;}
  .cmp-before{background:#FFFFFF; clip-path:inset(0 calc(100% - var(--pos)) 0 0);}
  .cmp-after{background:#FFFFFF;}
  .cmp-handle{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:var(--accent); pointer-events:none;}
  .cmp-handle span{position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:var(--accent); box-shadow:0 2px 10px rgba(18,20,24,0.18);}
  .cmp-handle span::before, .cmp-handle span::after{content:''; position:absolute; top:50%; width:0; height:0; margin-top:-5px; border:5px solid transparent;}
  .cmp-handle span::before{left:9px; border-right-color:#FFFFFF;}
  .cmp-handle span::after{right:9px; border-left-color:#FFFFFF;}
  .cmp-tag{position:absolute; bottom:14px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:6px 10px; border-radius:100px; background:rgba(255,255,255,0.9); color:#555B64; pointer-events:none;}
  .cmp-tag-l{left:14px;} .cmp-tag-r{right:14px; color:#2F4FF0;}
  .cmp-range{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none;}
  .cmp-range:focus-visible + *{outline:none;}
  .cmp:focus-within .cmp-handle span{outline:2px solid var(--accent); outline-offset:3px;}
  .role-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:0 56px; align-items:start; margin-top:8px;}
  .role-split .role{grid-template-columns:minmax(0,1fr); gap:0; position:sticky; top:96px;}
  .role-split .role div{border-top:1px solid var(--hair); padding-block:14px 18px;}
  .role-split .role div:last-child{border-bottom:1px solid var(--hair);}
  .role-split .role p{font-size:15.5px; line-height:1.55; color:var(--ink);}
  .role-split .defs{grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 40px;}
  .role-split .defs div{gap:10px;}
  .role-split .defs p{font-size:16px; line-height:1.65;}
  @media (max-width:900px){ .role-split{grid-template-columns:minmax(0,1fr); gap:32px;} .role-split .role{position:static;} }
  @media (max-width:640px){ .role-split .defs{grid-template-columns:minmax(0,1fr); gap:24px;} }
  /* tensions */
  .tensions{display:grid;}
  .tension{display:grid; grid-template-columns:140px minmax(0,1fr); gap:24px; padding-block:28px; border-top:1px solid var(--hair);}
  .tension .n{font-family:var(--f-display); font-weight:300; font-size:clamp(56px,7vw,96px); line-height:0.95; letter-spacing:-0.03em; color:var(--accent);}
  .tension h3{font-size:clamp(22px,2.4vw,30px); font-weight:600; letter-spacing:-0.018em; margin-bottom:6px;}
  .tension .pull{font-family:var(--f-body); font-weight:500; font-size:16px; color:var(--accent2); margin-bottom:10px;}
  .tension p{font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:36em;}

  /* flow */
  .flow-wrap{overflow-x:auto; background:var(--tile); padding:24px;}
  .flow{min-width:760px; width:100%; height:auto; display:block;}
  .flow .box{fill:var(--band-gray); stroke:var(--hair); stroke-width:1.2;}
  .flow .box.algo{fill:var(--band-blue); stroke:var(--accent);}
  .flow .box.human{fill:var(--band-gray); stroke:var(--accent2);}
  .flow .box.out{fill:var(--bg); stroke:var(--accent-warm);}
  .flow text{font-family:var(--f-body); font-size:13px; fill:var(--ink);}
  .flow .small{font-family:var(--f-mono); font-size:10.5px; fill:var(--ink-soft); letter-spacing:0.06em;}
  .flow .edge{stroke:var(--ink-soft); stroke-width:1.3; fill:none;}
  .flow .edge.dash{stroke-dasharray:4 4;}
  .flow .arrowhead{fill:var(--ink-soft);}
  .legend{display:flex; flex-wrap:wrap; gap:18px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);}
  .legend span{display:inline-flex; align-items:center; gap:8px;}
  .legend i{width:14px; height:3px; display:inline-block;}

  /* interface */
  .chapter{display:grid; grid-template-columns:200px minmax(0,1fr); gap:0 48px; align-items:end; margin-bottom:28px;}
  .chapter .n{font-family:var(--f-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent);}
  .chapter h3{font-size:clamp(30px,4vw,52px); font-weight:600; letter-spacing:-0.022em; line-height:1;}
  .chapter-text{display:grid; grid-template-columns:200px minmax(0,1fr); gap:0 48px; margin-bottom:40px;}
  .chapter-text .copy{grid-column:2;}
  .stack{display:grid; gap:16px;}
  .pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
  .chapter-gap{height:96px;}

  /* mascot */
  .m-intro{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:center;}
  .m-intro img{max-width:380px; width:100%; justify-self:center;}
  .tiles{display:grid; gap:12px;}
  .tiles.t3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .tiles.t5{grid-template-columns:repeat(5,minmax(0,1fr));}
  .tile{border-radius:3px; background:#FFFFFF; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:12%;}
  .tile img{max-height:100%; width:auto; object-fit:contain;}
  .tile img.tiny{max-height:50%;}
  .sub{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin-bottom:16px;}
  .sub h4{font-size:22px; font-weight:600; letter-spacing:-0.015em;}
  .feed-row{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:48px; align-items:center;}

  /* outcomes */
  .outs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px;}
  .out{border-top:1px solid var(--rule); padding-block:16px 36px; display:grid; gap:10px; align-content:start;}
  .out .k{font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-warm);}
  .out .big{font-family:var(--f-display); font-size:clamp(44px,6vw,84px); font-weight:600; letter-spacing:-0.025em; line-height:1.02; font-variant-numeric:tabular-nums;}
  .out p{font-size:15.5px; line-height:1.6; color:var(--ink-soft); max-width:30em;}

  /* related work */
  .rel-head{display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:32px;}
  .rel-head h2{max-width:none;}
  .next{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
  .card{position:relative; display:block; aspect-ratio:4/5; overflow:hidden; border-radius:3px; color:#FFFFFF; text-decoration:none; background:#121418;}
  .card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
  .card::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,12,16,0) 40%, rgba(10,12,16,0.55) 68%, rgba(10,12,16,0.92) 100%);}
  .card .txt{position:absolute; left:0; right:0; bottom:0; padding:28px; z-index:1; display:grid; gap:10px;}
  .card b{font-family:var(--f-display); font-size:clamp(26px,2.6vw,36px); font-weight:600; letter-spacing:-0.02em; line-height:1;}
  .card .d{font-size:15px; line-height:1.5; color:rgba(255,255,255,0.86); max-width:28em;}
  .card .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;}
  .card .tags span{font-size:12.5px; border:1px solid rgba(255,255,255,0.55); border-radius:100px; padding:5px 11px; color:#FFFFFF;}
  .card:hover img{transform:scale(1.03);}
  .card:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){ .card img{transition:none;} .card:hover img{transform:none;} }
  .foot{display:grid; gap:20px;}
  .foot .big{font-family:var(--f-display); font-size:clamp(30px,4.2vw,56px); font-weight:600; letter-spacing:-0.022em; line-height:1.05; max-width:18ch;}
  .foot-contact{display:flex; gap:24px; flex-wrap:wrap; font-family:var(--f-mono); font-size:13px;}
  .foot-contact a, .foot-contact span{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hair); padding-bottom:2px;}
  .foot-contact span{user-select:all;}

  .lb{position:fixed; inset:0; background:rgba(8,10,12,0.94); display:flex; align-items:center; justify-content:center; z-index:100; padding:28px; cursor:zoom-out;}
  .lb img{max-width:96vw; max-height:92vh;}

  @media (max-width:900px){
    .grid, .chapter, .chapter-text{grid-template-columns:minmax(0,1fr); gap:16px;}
    .chapter-text .copy{grid-column:1;}
    .idx{position:static; grid-auto-flow:column; justify-content:start; gap:12px;}
    .defs, .users{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;}
    .hero-foot{grid-template-columns:minmax(0,1fr);}
    .tiles.t5{grid-template-columns:repeat(3,minmax(0,1fr));}
  }
  @media (max-width:900px){ .next{grid-template-columns:minmax(0,1fr);} .card{aspect-ratio:4/3;} }
  @media (max-width:640px){
    .band{padding-block:64px; padding-inline:16px;}
    .meta{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px;}
    .defs, .users, .cols2, .cs, .era, .role, .outs, .next, .pair, .m-intro, .feed-row{grid-template-columns:minmax(0,1fr); gap:24px;}
    .shift div{grid-template-columns:minmax(0,1fr); gap:4px;}
    .shift .ar{display:none;}
    .tension{grid-template-columns:minmax(0,1fr); gap:8px;}
    .tiles.t3{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
    .tiles.t5{display:flex; overflow-x:auto; gap:8px; scroll-snap-type:x mandatory; margin-inline:-16px; padding-inline:16px;}
    .tiles.t5 .tile{flex:0 0 42%; scroll-snap-align:start;}
  }

  /* ---------- Home ---------- */
  /* home hero: white to mint to white, centered greeting, headline, two outline buttons, then the screenshot collage */
  .home-hero{background:linear-gradient(179deg, var(--bg) 1%, var(--hero-mint) 79%, var(--bg) 99%); overflow:hidden; padding-bottom:clamp(48px,8vw,117px);}
  .home-hero .intro{max-width:1180px; margin:0 auto; padding:clamp(40px,4.3vw,62px) 24px 0; text-align:center; display:grid; justify-items:center;}
  .home-hero .hi{font-family:var(--f-display); font-weight:300; font-size:clamp(30px,3.5vw,50px); line-height:1.26; letter-spacing:-0.01em; color:var(--ink);}
  .home-hero h1{margin-top:14px; font-size:clamp(34px,4.3vw,62px); font-weight:700; line-height:1.26; letter-spacing:-0.02em; color:var(--ink); max-width:1040px;}
  .home-hero.fill{min-height:100vh; min-height:100svh;} /* 404: the gradient fills the screen */
  .cta{display:flex; flex-wrap:wrap; justify-content:center; gap:11px; margin-top:43px;}
  .btn{display:inline-flex; align-items:center; justify-content:center; min-width:161px; height:38px; padding:0 20px; border:1px solid var(--accent); border-radius:13px; font-family:var(--f-body); font-size:18px; color:var(--accent); text-decoration:none; transition:background .2s ease, color .2s ease;}
  .btn:hover{background:var(--accent); color:var(--on-accent);}
  .btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
  @media (max-width:640px){ .btn{min-width:0; flex:1 1 0; max-width:161px; padding:0 12px; font-size:16px; height:40px;} .cta{flex-wrap:nowrap; width:100%; margin-top:32px;} }

  /* collage: the stage is 1681x552 in Figma and sits 187px left of a 1440 page; items are placed in % of the stage.
     Each item: --x/--y center, --w width, --ar aspect ratio, --r rotation, --d parallax depth. site.js sets --mx/--my (-1..1) on the stage. */
  .collage{--W:min(116.74vw, 1960px); position:relative; width:var(--W); aspect-ratio:1681/552; margin-top:clamp(64px,11.4vw,164px); margin-left:calc(50% - 0.5396 * var(--W)); --mx:0; --my:0;}
  .ci{position:absolute; left:var(--x); top:var(--y); width:var(--w); aspect-ratio:var(--ar);
      transform:translate(-50%,-50%) translate(calc(var(--mx) * var(--d) * 26px), calc(var(--my) * var(--d) * 18px)) rotate(var(--r));}
  .ci .cb{position:relative; width:100%; height:100%; border-radius:10px; overflow:hidden; transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;}
  .ci .cb img{width:100%; height:100%; object-fit:cover; display:block;}
  .ci .cb.line{border:1px solid #DDDDDD;}
  .ci .cb.line-soft{border:1px solid #F3F5F8;}
  .ci .cb.line-cyan{border:2px solid #00B0F8; border-radius:16px;}
  .ci .cb.line-teal{border:2px solid #017EAA;}
  .ci .cb.sh{box-shadow:0 4px 4px rgba(0,0,0,0.25);}
  .ci .cb.sh-soft{box-shadow:0 4px 4px rgba(0,0,0,0.1);}
  .ci .cb.free{border-radius:0; overflow:visible;}
  .ci .cb.free img{object-fit:contain; filter:drop-shadow(0 4px 2px rgba(0,0,0,0.12));}
  .ci .cb.dot{border-radius:50%; background:var(--c);}
  .ci.lift{z-index:1;}
  /* optional soft edges: pieces far from the center blur, like a camera focused on the middle (site.js sets --blur). Remove the class to switch off. */
  .collage.soft-edges .ci .cb{filter:blur(var(--blur,0px));}
  /* touch screens have no hover: the pieces float gently on their own */
  @keyframes ci-float{from{translate:0 -5px;} to{translate:0 5px;}}
  @media (hover:none){ .ci .cb{animation:ci-float 4.5s ease-in-out infinite alternate; animation-delay:calc(var(--d) * -2.7s);} }
  @media (prefers-reduced-motion: reduce){ .ci{transform:translate(-50%,-50%) rotate(var(--r));} .ci .cb{animation:none; transition:none;} }
  /* phones: zoom into the middle of the collage instead of shrinking all 15 pieces */
  @media (max-width:760px){ .collage{--W:230vw; margin-left:calc(50% - 0.4164 * var(--W));} .ci .cb{border-radius:6px;} }

  /* works: centered section title, intro line, full-width project cards */
  .works{padding-block:16px 96px;}
  .section-title{max-width:none; font-family:var(--f-display); font-size:clamp(36px,4.3vw,62px); font-weight:600; line-height:1.26; letter-spacing:-0.01em; text-transform:uppercase; text-align:center;}
  .section-intro{max-width:902px; margin:16px auto 0; text-align:center; font-size:17px; line-height:1.65; color:var(--ink-soft);}
  .work-list{max-width:1000px; margin:72px auto 0; display:grid; gap:31px;}
  .work{position:relative; display:block; aspect-ratio:1298/580; border-radius:var(--radius-card); overflow:hidden; background:#121418; color:#FFFFFF; text-decoration:none; isolation:isolate;}
  .work > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); z-index:-1;}
  .work::after{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,0) 54%, rgba(0,0,0,0.75) 100%);}
  .work .txt{position:absolute; left:26px; right:26px; bottom:35px; display:grid; gap:0;}
  .work b{font-family:var(--f-display); font-size:26px; font-weight:700; line-height:1.43; letter-spacing:-0.01em;}
  .work .d{font-family:var(--f-display); font-size:16px; font-weight:400; line-height:1.43;}
  .work .tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:17px;}
  .work .tags span{font-family:var(--f-mono); font-size:12px; line-height:1.3; padding:7px 14px; border:1px solid #FFFFFF; border-radius:999px; background:rgba(16,42,42,0.2);}
  .work:hover > img{transform:scale(1.03);}
  .work:focus-visible{outline:2px solid var(--accent); outline-offset:4px;}
  @media (prefers-reduced-motion: reduce){ .work > img{transition:none;} .work:hover > img{transform:none;} }
  @media (max-width:760px){ .work-list{margin-top:40px; gap:16px;} .work{aspect-ratio:4/5;} .work .txt{left:20px; right:20px; bottom:22px;} .work::after{background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.82) 100%);} .works{padding-block:8px 64px;} }

  /* about (home) and live-product link (case-study hero) */
  .about .role{row-gap:28px;}
  .live-link{font-family:var(--f-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px;}
  @media (max-width:900px){ .about .role{grid-template-columns:repeat(2,minmax(0,1fr));} }

  /* ---------- Style guide page (/styleguide/) ---------- */
  .sg-swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:24px 16px;}
  .sg-swatch{display:grid; gap:6px; align-content:start;}
  .sg-swatch i{display:block; height:64px; border-radius:var(--radius-card); background:var(--v); box-shadow:inset 0 0 0 1px var(--hair);}
  .sg-swatch b{font-family:var(--f-mono); font-size:12px; font-weight:500;}
  .sg-swatch span{font-family:var(--f-mono); font-size:11px; color:var(--ink-soft);}
  .sg-type{display:grid; border-top:1px solid var(--hair);}
  .sg-type > div{display:grid; grid-template-columns:180px minmax(0,1fr); gap:8px 24px; align-items:baseline; padding-block:20px; border-bottom:1px solid var(--hair);}
  .sg-type .k{font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); line-height:1.6;}
  .sg-row{display:flex; flex-wrap:wrap; gap:16px; align-items:center;}
  .sg-demo{background:var(--band-gray); border-radius:var(--radius-card); padding:32px; overflow:hidden;}
  .sg-demo .collage-one{position:relative; width:260px; height:200px; margin:0 auto;}
  .sg-demo .collage-one .ci{--mx:0; --my:0;}
  @media (max-width:640px){ .sg-type > div{grid-template-columns:minmax(0,1fr);} .sg-demo{padding:20px;} }

  /* about (home, from Figma): near-black band, white Sora text, lime highlights, portrait on the right */
  .band.dark{background:var(--about-bg); color:#FFFFFF;}
  .about{padding-block:88px 133px; overflow-x:clip;}
  .about-in{max-width:1280px; margin:0 auto;}
  .about .section-title{text-align:left; color:#FFFFFF;}
  .about-grid{display:grid; grid-template-columns:minmax(0,672px) minmax(0,502px); justify-content:space-between; gap:48px; margin-top:52px; align-items:start;}
  .about-text{display:grid; gap:36px; font-family:var(--f-display); font-size:clamp(18px,1.53vw,22px); line-height:1.65; color:#FFFFFF;}
  .about-text em{font-style:normal; color:var(--lime);}
  .about-text .cta{justify-content:flex-start; margin-top:16px;}
  .about-photo{width:100%; aspect-ratio:502/669; object-fit:cover; border-radius:var(--radius-card); margin-top:7px;}
  .btn.lime{border-color:var(--lime); color:#FFFFFF; border-radius:10px;}
  .btn.lime:hover{background:var(--lime); color:#090708;}
  .btn.lime:focus-visible{outline-color:var(--lime);}
  @media (max-width:900px){ .about-grid{grid-template-columns:minmax(0,1fr); gap:40px;} .about-photo{max-width:420px; margin-top:0;} }
  @media (max-width:640px){ .about{padding-block:64px 80px;} .about-grid{margin-top:28px;} .about-text{gap:24px;} }

  /* previous / next project, at the bottom of every case study (order loops: Franklin, ThetaRay, Dreamplace, Sixgill) */
  .pager{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; border-top:1.5px solid var(--rule); margin-bottom:64px;}
  .pager a{display:grid; gap:8px; align-content:start; padding-top:20px; color:var(--ink); text-decoration:none;}
  .pager a + a{text-align:right;}
  .pager .k{font-family:var(--f-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);}
  .pager b{font-family:var(--f-display); font-size:clamp(24px,3.2vw,44px); font-weight:600; letter-spacing:-0.02em; line-height:1.05; transition:color .2s ease;}
  .pager .d{font-size:15px; color:var(--ink-soft);}
  .pager a:hover b{color:var(--accent);}
  @media (max-width:640px){ .pager{gap:16px; margin-bottom:40px;} .pager .d{display:none;} }

  /* about: hovering a green word fans out two or three small photo cards under it (taps toggle on touch screens).
     Markup: <em class="peek" data-peek="path-1 path-2">word</em>; site.js builds the cards. */
  .peek{position:relative; cursor:default; outline:none; white-space:nowrap;}
  .peek[data-peek]{border-bottom:1px dashed rgba(185,255,0,0.55);}
  .lime-link{color:var(--lime); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:5px; transition:text-underline-offset .2s ease;}
  .lime-link:hover{text-underline-offset:3px;}
  .lime-link:focus-visible{outline:2px solid var(--lime); outline-offset:3px;}
  .peek:focus-visible{outline:2px solid var(--lime); outline-offset:3px; border-radius:2px;}
  .peek-pop{--pw:clamp(120px,11vw,160px); position:absolute; left:50%; bottom:calc(100% + 14px); width:0; height:0; z-index:40; pointer-events:none;}
  .peek-pop img{position:absolute; bottom:0; max-width:none; width:var(--pw); aspect-ratio:3/4; object-fit:cover; border-radius:6px; box-shadow:0 18px 40px rgba(0,0,0,0.55);
    opacity:0; visibility:hidden; transform:translate(var(--tx),12px) rotate(0deg) scale(.9); transition:opacity .25s ease, transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s .45s; transition-delay:calc(var(--i) * 60ms);}
  .peek.open .peek-pop img{opacity:1; visibility:visible; transform:translate(var(--tx),0) rotate(var(--rot)) scale(1); transition:opacity .25s ease, transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s;}
  @media (max-width:640px){ .peek-pop{--pw:104px;} }
  @media (prefers-reduced-motion: reduce){ .peek-pop img{transition:opacity .15s ease; transform:translate(var(--tx),0) rotate(var(--rot));} }

  /* about background: faint topographic lines that fade toward the bottom, a lime glow top right and a smaller light-blue glow beside it */
  .about.bg-topo{position:relative; isolation:isolate; background:radial-gradient(70% 80% at 92% 4%, rgba(185,255,0,0.17), rgba(185,255,0,0) 72%), radial-gradient(36% 44% at 58% 0%, rgba(126,162,255,0.32), rgba(126,162,255,0) 72%), var(--about-bg);}
  .about.bg-topo::before{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url('../img/about/topo.svg') center / cover no-repeat; opacity:0.05;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 30%, transparent 85%); mask-image:linear-gradient(180deg, #000 0%, #000 30%, transparent 85%);}
  @media (max-width:900px){ .about.bg-topo::before{background-size:1100px auto; background-repeat:repeat-y; background-position:30% 0;} }


  /* ---------- Short case study (story format) ----------
     One narrow text column (640px) between wide image blocks (1180px, .frame). Short numbered chapters, images do the talking.
     Uses the shared site bar, case hero (.hero.compact), Related work (.next/.card), pager and contact band. */
  .gut{padding-inline:24px;}
  .s-col{max-width:var(--text-w); margin:0 auto;}
  .hero.compact h1{font-size:clamp(32px,4.9vw,70px); line-height:1.06; letter-spacing:-0.026em; max-width:none;}
  .s-summary{margin-top:56px; background:var(--band-blue); border-radius:3px; padding:28px 32px; display:grid; gap:12px;}
  .s-summary .k{font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent);}
  .s-summary p{font-size:18px; line-height:1.6; color:var(--ink);}
  .s-hook{margin-top:64px; font-family:var(--f-display); font-weight:300; font-size:clamp(24px,2.6vw,32px); line-height:1.35; letter-spacing:-0.015em; color:var(--ink);}
  .s-hook strong{font-weight:600; color:var(--accent);}
  .s-divider{display:flex; justify-content:center; padding-block:88px 72px;}
  .s-divider span{display:block; width:56px; height:4px; border-radius:2px; background:var(--accent);}
  .s-ch{display:grid; gap:18px;}
  .s-ch .n{font-family:var(--f-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent);}
  .s-ch h2{font-size:clamp(30px,3.6vw,46px); line-height:1.1; letter-spacing:-0.02em; max-width:none;}
  .s-ch p{font-size:18px; line-height:1.65; color:var(--ink-soft);}
  .s-ch p strong{color:var(--ink); font-weight:600;}
  .s-media{margin-top:40px;}
  .s-media img, .s-dark img{border-radius:3px; width:100%;}
  .duo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start;}
  .trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
  /* dark band behind dark product UIs, so dark screenshots don't float on white */
  .s-dark{background:var(--band-dark); padding-block:56px; margin-top:40px;}
  .s-dark .duo, .s-dark .stack{gap:20px;}
  .narrow{max-width:820px; margin-inline:auto;}
  .narrow.sm{max-width:560px;}
  .tiles.t6{grid-template-columns:repeat(6,minmax(0,1fr));}
  @media (max-width:900px){ .tiles.t6{grid-template-columns:repeat(3,minmax(0,1fr));} }
  .crop .shot img{aspect-ratio:3/4; object-fit:cover; object-position:top;}
  .phones{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}
  .phones .shot img{aspect-ratio:9/16; object-fit:cover; object-position:top;}
  .people{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}
  .person{position:relative; border-radius:8px; overflow:hidden;}
  .person img{aspect-ratio:2/3; object-fit:cover; width:100%; border-radius:8px; transition:transform .8s cubic-bezier(.2,.7,.2,1);}
  .person::after{content:''; position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(180deg, rgba(10,12,16,0), rgba(10,12,16,.78)); pointer-events:none;}
  .person b{position:absolute; left:16px; right:16px; bottom:16px; z-index:1; font-family:var(--f-display); font-size:17px; line-height:1.2; font-weight:600; color:#FFFFFF; letter-spacing:-0.01em; transition:text-shadow .3s ease;}
  @media (hover:hover) and (pointer:fine){
    .person:hover img{transform:scale(1.05);}
    .person:hover b{text-shadow:1px 0 rgba(255,42,109,.6), -1px 0 rgba(5,217,232,.6);}
  }
  .nums{max-width:var(--text-w); margin:36px auto 0; display:grid; border-bottom:1px solid var(--hair);}
  .num{display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; align-items:baseline; border-top:1px solid var(--hair); padding-block:18px;}
  .num b{font-family:var(--f-display); font-size:clamp(26px,2.8vw,34px); font-weight:600; letter-spacing:-0.022em; line-height:1.1; color:var(--accent); font-variant-numeric:tabular-nums;}
  .num span{font-size:16px; line-height:1.5; color:var(--ink-soft);}
  .learned{margin-block:96px; border-top:1px solid var(--hair); padding-top:24px; display:grid; gap:12px;}
  .learned .k{font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent);}
  .learned p{font-family:var(--f-display); font-size:clamp(22px,2.4vw,30px); font-weight:400; line-height:1.3; letter-spacing:-0.015em; color:var(--ink);}
  @media (max-width:900px){ .people{grid-template-columns:repeat(2,minmax(0,1fr));} .trio{grid-template-columns:repeat(2,minmax(0,1fr));} .phones{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (max-width:640px){
    .gut{padding-inline:16px;}
    .hero.compact{text-align:left;} .hero.compact h1{margin-inline:0;} .hero.compact .facts{justify-content:flex-start;} .hero.compact .hero-foot{justify-items:start;}
    .hero h1 .lb-d{display:none;}
    .num{grid-template-columns:minmax(0,1fr); gap:4px;}
    .duo, .trio{grid-template-columns:minmax(0,1fr);}
    .s-summary{padding:22px;}
    .s-divider{padding-block:64px 52px;}
    .learned{margin-block:72px;}
  }
  @media (prefers-reduced-motion: reduce){ .person img{transition:none;} .person:hover img{transform:none;} }