/* Ziton shared layout and motion system. Linked from every page after tokens.css. */

*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary)}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}

h1,h2,h3{font-family:var(--font-display);font-weight:800;font-stretch:112%;letter-spacing:-.01em;line-height:1.06}
h1{font-size:clamp(32px,3.6vw,56px)}
h2{font-size:clamp(26px,2.6vw,40px)}
h3{font-size:clamp(19px,1.5vw,23px)}
p{max-width:58ch}
a{color:inherit}
img,svg,video{max-width:100%;display:block}

.mono{font-family:var(--font-mono);font-weight:500;text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--gridline)}
.kicker{display:block;margin-bottom:14px}
.caps{letter-spacing:.26em}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--canvas);padding:10px 18px;z-index:100}
.skip:focus{left:0}

/* ---------- surfaces ---------- */
/* anchored to wherever .wrap's own padded content edge actually sits, so a vertical grid line
   always lands exactly under the text, at any viewport width. Below .wrap's own max-width
   (1320px @ 5vw+5vw padding, i.e. under ~1467px) .wrap spans the full section with no auto-margin,
   so the edge is simply 5vw in. At or above that width .wrap caps out and centers itself, adding
   an auto-margin the plain 5vw math doesn't know about, so the anchor is restated in those terms. */
.grid-bg{background-image:linear-gradient(var(--grid-light) 1px,transparent 1px),linear-gradient(90deg,var(--grid-light) 1px,transparent 1px);background-size:var(--grid-cell) var(--grid-cell);background-position:5vw 0}
@media (min-width:1467px){
  .grid-bg{background-position:calc(50% - 660px + 5vw) 0}
}
.ink-section{background:var(--ink);color:var(--text-on-ink)}
.ink-section .mono{color:var(--gridline)}
.ink-section p{color:var(--text-secondary-on-ink)}
.ink-section.grid-bg{background-image:linear-gradient(var(--grid-dark) 1px,transparent 1px),linear-gradient(90deg,var(--grid-dark) 1px,transparent 1px)}

.wrap{max-width:1320px;margin:0 auto;padding-left:5vw;padding-right:5vw}
section{padding:clamp(72px,9vw,130px) 0}

/* ---------- nav ---------- */
.site-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:26px;
  padding:0 5vw;height:68px;background:transparent;
  transition:background .18s var(--ease),box-shadow .18s var(--ease)}
.site-nav.solid{background:rgba(245,244,240,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.site-nav__brand{margin-right:auto}
.site-nav__brand img{height:26px;width:auto}
.site-nav__menu{display:flex;align-items:baseline;gap:22px;list-style:none}
.site-nav__menu a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--text-secondary);transition:color .25s}
.site-nav__menu a:hover{color:var(--text-primary)}
.site-nav__menu a[aria-current="page"]{color:var(--text-primary);font-weight:600;position:relative}
.site-nav__menu a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--accent)}
.site-nav__cta{color:var(--text-primary) !important;font-weight:600 !important;
  border:1.5px solid var(--line-strong);padding:7px 14px;transition:background .25s,color .25s,border-color .25s}
.site-nav__cta:hover,.site-nav__cta:focus-visible{background:var(--accent-hover);color:var(--canvas) !important;border-color:var(--accent-hover)}
.site-nav__toggle{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.site-nav__toggle span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s}
@media (max-width:1200px){
  .site-nav__toggle{display:flex}
  .site-nav__menu{position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--canvas);box-shadow:0 1px 0 var(--line),0 18px 40px rgba(20,23,28,.12);
    max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
  .site-nav__menu.open{max-height:70vh}
  .site-nav__menu li{border-top:1px solid var(--line)}
  .site-nav__menu a{display:block;padding:16px 6vw}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--accent-hover);color:var(--canvas);text-decoration:none;
  font-family:var(--font-body);font-weight:600;font-size:15px;padding:15px 28px;border:0;cursor:pointer;
  transition:transform .3s var(--ease),background .3s var(--ease)}
.btn:hover{background:#a52f1f;transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--accent-hover);color:var(--text-primary)}
.ink-section .btn.ghost{background:transparent;color:var(--text-on-ink);box-shadow:inset 0 0 0 1.5px var(--line-on-ink)}
.ink-section .btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.ink-section .btn:focus-visible{outline-color:var(--canvas)}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---------- entrances (choreography, retired after play) ---------- */
.rv .part{opacity:0;transform:translate3d(0,22px,0)}
.rv.in .part{opacity:1;transform:translate3d(0,0,0);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rv.in .part:nth-child(2){transition-delay:.09s}
.rv.in .part:nth-child(3){transition-delay:.18s}
.rv.in .part:nth-child(4){transition-delay:.27s}
.rv.in .part:nth-child(5){transition-delay:.36s}
.rv.done .part:nth-child(2),.rv.done .part:nth-child(3),
.rv.done .part:nth-child(4),.rv.done .part:nth-child(5){transition-delay:0s}
/* text stays crisp mid-transition: promote to a stable compositor layer only while animating,
   so the browser never resamples glyph edges at fractional-pixel translate offsets */
.rv.in:not(.done) .part{will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* self-drawing red rule under a kicker: counts as the viewport's red dose where used */
.red-rule{display:block;width:44px;height:5px;background:var(--accent);transform-origin:left center;transform:scaleX(0)}
.rv.in .red-rule{transform:scaleX(1);transition:transform .8s var(--ease-out) .1s}

/* ---------- inner page header ---------- */
.page-head{position:relative;isolation:isolate;min-height:54vh;display:flex;align-items:flex-end;overflow:hidden}
.page-head__art{position:absolute;inset:0;z-index:-1}
.page-head__art img{width:100%;height:100%;object-fit:cover;object-position:var(--head-pos,50% 50%)}
.page-head__art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(245,244,240,.7),rgba(245,244,240,.32) 45%,rgba(245,244,240,.84))}
.page-head__art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;opacity:.55;
  background:radial-gradient(ellipse 70% 60% at 30% 20%,rgba(255,250,240,.9) 0%,rgba(255,250,240,0) 60%);
  animation:head-glow 14s ease-in-out infinite}
.page-head .wrap{padding-top:140px;padding-bottom:56px;width:100%}
.page-head h1{max-width:18ch;text-shadow:var(--tshadow-vellum)}
.page-head .sub{color:var(--text-secondary);margin-top:16px;max-width:52ch;text-shadow:var(--tshadow-vellum)}
@keyframes head-glow{
  0%,100%{transform:translate(0,0);opacity:.4}
  50%{transform:translate(6%,4%);opacity:.62}
}
@media (max-width:720px){
  .page-head{min-height:44vh}
  .page-head__art::after{background:linear-gradient(rgba(245,244,240,.84),rgba(245,244,240,.66) 45%,rgba(245,244,240,.94))}
}

/* ---------- sheet list (services index) ---------- */
.sheet-list{margin-top:48px;border-bottom:1px solid var(--line)}
.sheet{display:grid;grid-template-columns:280px 1fr auto;gap:20px;align-items:baseline;
  padding:22px 4px;border-top:1px solid var(--line);text-decoration:none;transition:background .25s}
.sheet:hover{background:rgba(20,23,28,.04)}
.sheet::after{content:"→";color:var(--gridline);transition:transform .3s var(--ease),color .3s var(--ease)}
.sheet:hover::after{transform:translateX(5px);color:var(--accent-hover)}
.sheet span:nth-child(2){color:var(--text-secondary);font-size:15.5px}
@media (max-width:860px){.sheet{grid-template-columns:1fr auto}.sheet span:nth-child(2){grid-column:1 / -1}}

/* ---------- founder portrait (a real cutout photo, no frame, grounded by a datum line) ---------- */
.founder-grid{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start;justify-content:center}
.founder-portrait{position:relative;width:320px}
.founder-portrait img{width:100%;height:auto;display:block}
.founder-portrait__line{display:block;height:1.5px;background:var(--line-strong);margin-top:10px}
.founder-portrait__cap{display:inline-block;margin-top:16px;padding:2px 10px;background:var(--canvas)}
.ink-section .founder-portrait__cap{background:var(--ink)}
.founder-portrait{text-align:center}
@media (max-width:860px){.founder-grid{grid-template-columns:1fr}.founder-portrait{order:-1;width:220px;justify-self:center}}

/* ---------- board nav (industries page jump strip) ---------- */
.board-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.board-nav a{text-decoration:none;border:1.5px solid var(--line-strong);color:var(--text-secondary);
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 15px;display:inline-block;
  transition:border-color .25s,color .25s,background .25s,transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.board-nav a:hover{color:var(--text-primary);border-color:var(--accent-hover);transform:translateY(-2px);box-shadow:0 8px 18px rgba(20,23,28,.09)}
.board-nav a.is-current{color:var(--text-primary);border-color:var(--accent-hover);background:var(--accent-muted)}
section[id^="board-"]{scroll-margin-top:88px}
@keyframes board-pulse{
  0%{box-shadow:0 0 0 0 var(--accent-muted)}
  50%{box-shadow:0 0 0 10px var(--accent-muted)}
  100%{box-shadow:0 0 0 0 rgba(216,67,47,0)}
}
.board-pulse .kicker{animation:board-pulse 1.1s var(--ease) 1}

/* ---------- interactive moments (shared across pages, wired by interactive.js) ---------- */
.interactive{margin-top:44px}
.interactive-frame{border:1px solid var(--line);background:var(--panel);padding:32px clamp(20px,4vw,44px)}
.ink-section .interactive-frame{background:var(--panel-ink);border-color:var(--line-on-ink)}

/* hold */
.drive-btn{display:inline-flex;align-items:center;gap:12px;background:transparent;border:1.5px solid var(--line-strong);
  color:var(--text-primary);font:inherit;font-weight:600;font-size:14.5px;padding:13px 22px;cursor:pointer;
  position:relative;overflow:hidden;user-select:none;touch-action:none;transition:border-color .25s,color .25s}
.drive-btn::before{content:"";position:absolute;inset:0;background:var(--accent-hover);z-index:-1;
  transform:scaleX(var(--progress,0));transform-origin:left center;transition:transform .05s linear}
.drive-btn.is-holding,.drive-btn.is-done{color:var(--canvas);border-color:var(--accent-hover)}
.ink-section .drive-btn{border-color:var(--line-on-ink);color:var(--text-on-ink)}
.drive-hint{margin-top:10px;font-size:12.5px;color:var(--gridline)}

/* drag */
.drive-track{position:relative;height:34px;cursor:grab;touch-action:none;margin-top:8px}
.drive-track::before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;background:var(--line-strong);transform:translateY(-50%)}
.drive-track__fill{position:absolute;top:50%;left:0;height:2px;background:var(--accent-hover);transform:translateY(-50%);width:0%;pointer-events:none}
.drive-track__handle{position:absolute;top:50%;left:0%;width:16px;height:16px;border-radius:50%;background:var(--accent-hover);
  transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 4px var(--canvas)}
.ink-section .drive-track__handle{box-shadow:0 0 0 4px var(--ink)}
.drive-track:active{cursor:grabbing}
.drive-captions{position:relative;margin-top:18px;min-height:2.6em}
.drive-captions p{position:absolute;inset:0;opacity:0;transition:opacity .3s var(--ease);font-size:15px;color:var(--text-secondary)}
.drive-captions p.is-active{opacity:1;position:relative}
.ink-section .drive-captions p{color:var(--text-secondary-on-ink)}

/* select */
.select-buttons{display:flex;flex-wrap:wrap;gap:10px}
.select-buttons button{background:transparent;border:1.5px solid var(--line-strong);color:var(--text-secondary);
  font:inherit;font-size:13.5px;font-weight:600;padding:10px 16px;cursor:pointer;
  transition:border-color .25s,color .25s,background .25s,transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.select-buttons button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(20,23,28,.09)}
.select-buttons button.is-active{border-color:var(--accent-hover);color:var(--text-primary);background:var(--accent-muted)}
[data-select]{opacity:.28;transition:opacity .35s var(--ease),stroke .35s var(--ease)}
[data-select].is-active{opacity:1;stroke:var(--accent-hover) !important}
[data-select-caption]{display:none;font-size:15px;color:var(--text-secondary)}
[data-select-caption].is-active{display:block}

/* run */
[data-run]{background:var(--accent-hover);color:var(--canvas);border:0;font:inherit;font-weight:600;font-size:14.5px;
  padding:13px 22px;cursor:pointer;transition:background .25s,transform .25s}
[data-run]:hover{transform:translateY(-2px)}
[data-run].is-running{opacity:.7;pointer-events:none}
[data-run-item]{transition:opacity .3s var(--ease),background .3s var(--ease)}
[data-run-item] [data-run-fill]{opacity:0;transition:opacity .3s var(--ease)}
[data-run-item].is-done [data-run-fill]{opacity:1}
[data-run-item].is-done [data-run-check]{opacity:1;stroke-dashoffset:0 !important}
[data-run-check]{opacity:0;transition:opacity .2s,stroke-dashoffset .3s var(--ease)}

/* ---------- self-drawing scenes ---------- */
.scene svg{width:100%;height:auto;display:block}
.scene [data-d]{transition:stroke-dashoffset var(--dur,.9s) cubic-bezier(.4,0,.2,1) var(--delay,0s)}
.scene.in [data-d]{stroke-dashoffset:0 !important}
.scene [data-f]{opacity:0;transition:opacity .7s var(--ease) var(--delay,.3s)}
.scene.in [data-f]{opacity:1}
/* progress-driven scenes (interactive.js) set dashoffset every frame themselves;
   a CSS transition on top would lag behind a fast drag, so it's switched off here */
.scene[data-drive] [data-d]{transition:none}
.scene[data-drive] [data-f]{transition:opacity .1s linear}

/* ---------- paper tilt ---------- */
[data-tilt]{will-change:transform;transform:perspective(1100px)}

/* sheet-list rows lift like paper */
.sheet{transform-origin:left center;transition:background .25s,transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.sheet:hover{transform:perspective(900px) rotateX(1.4deg) translateY(-2px);box-shadow:0 14px 34px rgba(20,23,28,.08)}

/* commitments strip */
.commit-row{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:52px;border-top:1px solid var(--line)}
.commit{padding-top:18px}
.commit p{font-size:14.5px;color:var(--text-secondary);margin-top:6px}
@media (max-width:860px){.commit-row{grid-template-columns:1fr 1fr}}

/* ---------- end-cap CTA ---------- */
.endcap{border-top:1px solid var(--line)}
.endcap h2{max-width:20ch}
.endcap p{color:var(--text-secondary);margin-top:14px}
.endcap .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* ---------- prose blocks for service pages ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:52px}
.duo h3{margin-bottom:10px}
.duo p{font-size:15.5px;color:var(--text-secondary)}
@media (max-width:860px){.duo{grid-template-columns:1fr}}
.plain-list{list-style:none;margin-top:34px}
.plain-list li{border-top:1px solid var(--line);padding:16px 4px;display:grid;grid-template-columns:210px 1fr;gap:18px;font-size:15.5px;
  transform-origin:left center;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .25s}
.plain-list li:hover{transform:perspective(900px) rotateX(1.2deg) translateY(-2px);box-shadow:0 12px 28px rgba(20,23,28,.07);background:rgba(20,23,28,.02)}
.plain-list li .mono{color:var(--text-primary)}
.plain-list li p{color:var(--text-secondary)}
@media (max-width:860px){.plain-list li{grid-template-columns:1fr}}
.ink-section .plain-list li:hover{box-shadow:0 12px 28px rgba(0,0,0,.28);background:rgba(245,244,240,.03)}

/* ---------- live work grid ---------- */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.work-card{display:block;text-decoration:none;border:1px solid var(--line-strong);transform-origin:center;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .25s}
.work-card:hover{transform:perspective(900px) rotateX(1.2deg) translateY(-2px);box-shadow:0 14px 34px rgba(20,23,28,.08)}
.work-card__art{aspect-ratio:16/10;background-size:cover;background-position:50% 20%;background-color:var(--panel);border-bottom:1px solid var(--line-strong)}
.work-card__body{padding:16px 18px 20px}
.work-card__body h3{font-size:17px;color:var(--text-primary)}
.work-card__body p{color:var(--text-secondary);font-size:14px;margin-top:6px}
.work-card__body .mono{color:var(--gridline);font-size:12px;margin-top:10px;display:block}
@media (max-width:860px){.work-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--text-secondary-on-ink);font-size:14px}
.site-footer .wrap{padding-top:64px;padding-bottom:44px}
.site-footer__top{display:flex;flex-wrap:wrap;gap:34px;align-items:flex-start;justify-content:space-between;margin-bottom:44px}
.site-footer img{height:24px;width:auto}
.site-footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:18px}
.site-footer a{color:var(--text-secondary-on-ink);text-decoration:none;transition:color .25s}
.site-footer a:hover{color:var(--text-on-ink)}
.site-footer__legal{border-top:1px solid var(--line-on-ink);padding-top:24px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:12.5px}
.site-footer__contact{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.site-footer__cities{border-top:1px solid var(--line-on-ink);padding-top:22px;margin-bottom:28px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:18px}
.site-footer__cities[hidden]{display:none}
.site-footer__cities ul{list-style:none;display:flex;flex-wrap:wrap;gap:16px;font-size:13.5px}
.footer-social-row{display:flex;flex-wrap:wrap;gap:10px}
.footer-social{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--text-on-ink);
  border:1.5px solid var(--line-on-ink);border-radius:3px;padding:10px 16px;text-decoration:none;
  font-weight:600;font-size:14px;transition:border-color .25s,color .25s}
.footer-social[hidden]{display:none}
.footer-social:hover{border-color:var(--accent);color:var(--accent)}
.footer-social svg{width:16px;height:16px;flex:0 0 auto}

/* ---------- helpers ---------- */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}