/* ============================================================
   KINDRA MECHANIC — workshop OS
   Paper base so the dark app screens read as objects on the
   page. Structure borrowed from a carbon job card: ruled rows,
   stamped numbers, hard rules, mono for anything measured.
   Distinct from the Plumbing site (dark/cyan/WebGL) and the
   Care Desk site (lilac/sticky rail): here the signature is a
   working approval loop you can actually tick through.
   ============================================================ */
@font-face{font-family:'InterD';src:url('assets/fonts/InterDisplay-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'InterD';src:url('assets/fonts/InterDisplay-Black.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Plex';src:url('assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url('assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex';src:url('assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --ink:#0E110B; --ink-2:#181C15; --paper:#F4F4EE; --paper-2:#EAEAE1;
  --accent:#E63B18;        /* accent on light */
  --accent-ink:#FF6B4A;    /* accent on ink */
  --desc:#992108;
  --body:#4A4E45; --meta:#7C8078; --line:#DAD9CE; --line-2:#C9C8BB;
  --ok:#2F7D4F; --warn:#B8791A;
  --shell:min(1320px,92vw);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
.wrap{width:var(--shell);margin:0 auto}

/* ── type: the lockup's own voice ───────────── */
h1,h2,h3{font-family:'InterD','Inter',sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:-.024em;line-height:.98}
h1{font-size:clamp(2.6rem,5.6vw,5.2rem);font-weight:900}
h2{font-size:clamp(1.9rem,3.6vw,3.1rem)}
h3{font-size:clamp(1.1rem,1.6vw,1.4rem);letter-spacing:-.018em}
.lede{font-size:clamp(1.05rem,1.3vw,1.22rem);line-height:1.6;color:var(--body);max-width:58ch}
p{color:var(--body)}
.mono{font-family:'Plex',monospace}
.acc{color:var(--accent)}
.eyebrow{font-family:'Plex',monospace;font-size:.74rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);flex:none;
  transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.in .eyebrow::before,.eyebrow.in::before{transform:scaleX(1)}

/* ── nav ────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:1.2rem;
  padding:1rem max(4vw,calc((100vw - var(--shell))/2));
  background:rgba(244,244,238,.86);backdrop-filter:blur(14px);
  border-bottom:2px solid transparent;transition:.28s}
.nav.small{padding-top:.55rem;padding-bottom:.55rem;background:rgba(244,244,238,.97);border-color:var(--ink)}
.nav-lockup{width:172px;transition:width .28s}
.nav.small .nav-lockup{width:146px}
.nav-links{margin-left:auto;display:flex;gap:1.5rem;font-size:.9rem;font-weight:500;color:var(--body);
  font-family:'Plex',monospace;letter-spacing:.02em}
.nav-links a:hover{color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Inter',sans-serif;font-weight:700;font-size:.98rem;text-transform:uppercase;
  letter-spacing:.02em;padding:.85rem 1.5rem;border-radius:4px;border:2px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;transition:.18s}
.btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-sm{font-size:.85rem;padding:.55rem 1.05rem}

/* ── bands ──────────────────────────────────── */
section{position:relative}
.band{padding:clamp(3.6rem,7vw,7rem) 0}
.band-ink{background:var(--ink);color:#DCDCD2}
.band-ink h1,.band-ink h2,.band-ink h3{color:var(--paper)}
.band-ink p,.band-ink .lede{color:#A6AA9E}
.band-ink .eyebrow{color:var(--accent-ink)}
.band-ink .eyebrow::before{background:var(--accent-ink)}
.rule{border-top:2px solid var(--ink)}
.head{max-width:min(100%,940px)}
.head h2{margin-top:.9rem;max-width:19ch}
.head .lede{margin-top:1.1rem}

/* ── hero ───────────────────────────────────── */
.hero{padding:8.5rem 0 3.5rem}
.hero-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(2rem,4vw,4rem);align-items:center}
.hero h1{margin-top:1rem}
.hero .lede{margin-top:1.3rem}
.hero-sub{margin-top:1rem;font-size:1.02rem;color:var(--ink);font-weight:500;max-width:52ch;
  border-left:3px solid var(--accent);padding-left:1rem}
.hero-cta{display:flex;gap:.7rem;margin-top:2rem;flex-wrap:wrap}
.hero-note{font-family:'Plex',monospace;font-size:.76rem;color:var(--meta);margin-top:1.4rem;letter-spacing:.03em}
.hero-shot{position:relative;display:flex;align-items:flex-end;gap:clamp(.7rem,1.4vw,1.2rem)}
.hero-shot .mac{flex:1 1 auto;min-width:0}
.hero-phone{flex:0 0 auto;width:clamp(100px,12.5vw,146px);margin-bottom:-1.4rem}

/* ── device frames ──────────────────────────── */
.mac{position:relative;border-radius:10px;overflow:hidden;background:var(--ink-2);
  padding:28px 0 0;border:1px solid var(--ink);cursor:zoom-in;
  box-shadow:10px 10px 0 rgba(14,17,11,.14);transition:transform .3s,box-shadow .3s}
.mac::before{content:"";position:absolute;top:10px;left:13px;width:8px;height:8px;border-radius:50%;
  background:#3B4034;box-shadow:13px 0 0 #3B4034,26px 0 0 #3B4034;z-index:2}
.mac .url{position:absolute;top:7px;left:0;right:0;text-align:center;z-index:2;
  font-family:'Plex',monospace;font-size:.62rem;color:#7C8078;letter-spacing:.04em}
.mac img{display:block;width:100%}
.mac:hover{transform:translate(-3px,-3px);box-shadow:16px 16px 0 rgba(230,59,24,.22)}
.iph{position:relative;border-radius:26px;background:var(--ink-2);padding:7px;max-width:270px;
  margin-inline:auto;border:1px solid var(--ink);cursor:zoom-in;
  box-shadow:8px 8px 0 rgba(14,17,11,.14);transition:transform .3s,box-shadow .3s}
.iph::after{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:30%;height:15px;background:var(--ink-2);border-radius:0 0 10px 10px;z-index:2}
.iph img{border-radius:20px;display:block;width:100%}
.iph:hover{transform:translate(-3px,-3px);box-shadow:14px 14px 0 rgba(230,59,24,.22)}

/* ── the approval loop: the argument ────────── */
.loop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,3vw,3rem);
  align-items:start;margin-top:2.8rem}
.quote{background:var(--ink);border-radius:10px;padding:1.3rem;color:var(--paper);
  box-shadow:12px 12px 0 rgba(14,17,11,.16)}
.quote-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.9rem;border-bottom:1px solid #2A2F24}
.quote-top b{font-family:'InterD',sans-serif;font-weight:800;text-transform:uppercase;font-size:1.1rem;letter-spacing:-.02em}
.quote-top span{font-family:'Plex',monospace;font-size:.7rem;color:#8B8F84;letter-spacing:.08em}
.qitem{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:.85rem;align-items:center;
  padding:.85rem 0;border-bottom:1px solid #23281D}
.qitem:last-of-type{border-bottom:0}
.qthumb{width:46px;height:38px;border-radius:5px;background:linear-gradient(135deg,#33382C,#22261C);
  display:grid;place-items:center;font-family:'Plex',monospace;font-size:.58rem;color:#8B8F84}
.qname{font-weight:600;font-size:.98rem;color:var(--paper)}
.qmeta{font-family:'Plex',monospace;font-size:.74rem;color:#8B8F84;margin-top:.15rem}
.qmeta b{color:var(--accent-ink);font-weight:500}
.qright{display:flex;align-items:center;gap:.6rem}
.qprice{font-family:'Plex',monospace;font-weight:600;font-size:.95rem;color:var(--paper);min-width:64px;text-align:right}
.qbtns{display:flex;gap:.3rem}
.qb{font-family:'Inter',sans-serif;font-weight:700;font-size:.72rem;text-transform:uppercase;
  padding:.36rem .6rem;border-radius:4px;border:1.5px solid #3B4034;background:transparent;
  color:#A6AA9E;cursor:pointer;transition:.16s;letter-spacing:.02em}
.qb:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
.qitem.yes .qb.y{background:var(--ok);border-color:var(--ok);color:#fff}
.qitem.no  .qb.n{background:#3B4034;border-color:#3B4034;color:#DCDCD2}
.qitem.no .qname,.qitem.no .qprice{opacity:.42;text-decoration:line-through}
.qfoot{margin-top:1rem;padding-top:1rem;border-top:1px solid #2A2F24;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.qfoot .lbl{font-family:'Plex',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#8B8F84}
.qtotal{font-family:'InterD',sans-serif;font-weight:900;font-size:clamp(1.9rem,3.4vw,2.7rem);
  line-height:1;color:var(--accent-ink);letter-spacing:-.02em}
.qdecl{font-family:'Plex',monospace;font-size:.76rem;color:#8B8F84;text-align:right}
.qdecl b{display:block;color:var(--paper);font-size:1.02rem;font-weight:500;margin-top:.2rem}
.loop-note{margin-top:1.2rem;font-size:.9rem;color:var(--meta)}

/* ── ledger rows: the job-card look ─────────── */
.ledger{margin-top:2.6rem;border-top:2px solid var(--ink)}
.lrow{display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;gap:1.2rem;align-items:baseline;
  padding:1.15rem 0;border-bottom:1px solid var(--line);transition:background .2s}
.lrow:hover{background:rgba(230,59,24,.045)}
.lnum{font-family:'Plex',monospace;font-size:.78rem;color:var(--accent);padding-top:.15rem}
.lrow h3{margin-bottom:.35rem}
.lrow p{font-size:.98rem;max-width:62ch}
.ltag{font-family:'Plex',monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--meta);white-space:nowrap}

/* ── screen walkthrough ─────────────────────── */
.walk{display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr);
  gap:clamp(1.4rem,3.4vw,3.4rem);align-items:start;margin-top:2.8rem}
.rail{position:sticky;top:6rem;display:grid;gap:0;border-top:1px solid var(--line-2)}
.rail button{display:flex;align-items:baseline;gap:.7rem;width:100%;text-align:left;
  background:transparent;border:0;border-bottom:1px solid var(--line-2);cursor:pointer;
  padding:.72rem .6rem;font-family:'Inter',sans-serif;font-size:.96rem;font-weight:600;
  color:var(--body);transition:.2s}
.rail button i{font-style:normal;font-family:'Plex',monospace;font-size:.7rem;color:var(--meta)}
.rail button:hover{background:var(--paper-2);color:var(--ink);padding-left:.9rem}
.rail button.on{background:var(--ink);color:var(--paper);padding-left:.9rem}
.rail button.on i{color:var(--accent-ink)}
.rail-h{font-family:'Plex',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--meta);padding:1.1rem .6rem .4rem;border-bottom:1px solid var(--line-2)}
.rail-h:first-child{padding-top:.2rem}
.pane{display:none}
.pane.on{display:block;animation:fade .45s cubic-bezier(.22,1,.36,1)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pane-lede{font-size:1.04rem;color:var(--body);max-width:66ch;margin-top:1.2rem}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:0;margin-top:1.4rem;
  border-top:1px solid var(--line)}
.feat{padding:.95rem 1rem .95rem 0;border-bottom:1px solid var(--line)}
.feat b{font-weight:700;font-size:.96rem;display:block}
.feat span{font-size:.88rem;color:var(--meta);display:block;margin-top:.2rem;line-height:1.45}

/* ── stat strip ─────────────────────────────── */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;margin-top:2.6rem;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.st{padding:1.5rem 1.2rem 1.5rem 0;border-right:1px solid var(--line)}
.st:last-child{border-right:0}
.st b{font-family:'InterD',sans-serif;font-weight:900;font-size:clamp(1.5rem,2.6vw,2.1rem);
  display:block;line-height:1;text-transform:uppercase;letter-spacing:-.02em}
.st span{display:block;margin-top:.5rem;font-size:.92rem;color:var(--body)}
.band-ink .st{border-color:#2A2F24}
.band-ink .st b{color:var(--accent-ink)}

/* ── cards ──────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:2.8rem;
  background:var(--line);border:1px solid var(--line)}
.card{background:var(--paper);padding:1.6rem}
.card .n{font-family:'Plex',monospace;font-size:.7rem;letter-spacing:.1em;color:var(--accent);text-transform:uppercase}
.card h3{margin:.65rem 0 .45rem}
.card p{font-size:.95rem}
.band-ink .cards{background:#2A2F24;border-color:#2A2F24}
.band-ink .card{background:var(--ink)}
.band-ink .card .n{color:var(--accent-ink)}

/* ── objections ─────────────────────────────── */
.obj{margin-top:2.6rem;border-top:2px solid var(--ink)}
.obj details{border-bottom:1px solid var(--line)}
.obj summary{cursor:pointer;list-style:none;padding:1.3rem 2.5rem 1.3rem 0;position:relative;
  font-family:'InterD',sans-serif;font-weight:800;text-transform:uppercase;font-size:1.12rem;
  letter-spacing:-.018em;line-height:1.25}
.obj summary::-webkit-details-marker{display:none}
.obj summary::after{content:"+";position:absolute;right:.3rem;top:1.15rem;color:var(--accent);
  font-family:'Plex',monospace;font-size:1.35rem;transition:transform .28s}
.obj details[open] summary::after{transform:rotate(45deg)}
.obj .a{padding:0 0 1.4rem;max-width:70ch;font-size:1rem;color:var(--body)}

/* ── photo ──────────────────────────────────── */
.photo{position:relative;overflow:hidden;border-radius:8px;height:clamp(230px,34vw,440px);
  margin-top:2.8rem;background:linear-gradient(135deg,#2A2F24,#12150F)}
.photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;will-change:transform}
.photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(14,17,11,.05) 45%,rgba(14,17,11,.32) 72%,rgba(14,17,11,.72))}
.photo figcaption{position:absolute;left:1.5rem;right:1.5rem;bottom:1.2rem;z-index:2;
  font-size:.94rem;font-weight:500;color:#fff;max-width:46ch;
  text-shadow:0 1px 3px rgba(14,17,11,.9),0 2px 16px rgba(14,17,11,.7)}
.photo.drawn::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,107,74,.05) 22px 44px)}

/* ── form ───────────────────────────────────── */
.enq{margin-top:2.6rem;max-width:720px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.1rem;background:var(--paper);border:2px solid var(--ink);border-radius:8px;
  padding:clamp(1.4rem,2.8vw,2.3rem);box-shadow:12px 12px 0 rgba(14,17,11,.12)}
.enq::before{content:"";grid-column:1/-1;width:44px;height:4px;background:var(--accent)}
.fld{display:flex;flex-direction:column;gap:.35rem}
.fld.full{grid-column:1/-1}
.fld label{font-family:'Plex',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--meta)}
.fld label i{font-style:normal;text-transform:none;letter-spacing:0;color:var(--line-2);margin-left:.4rem}
.fld input{font-family:inherit;font-size:1.02rem;padding:.88rem 1rem;background:#fff;
  border:1.5px solid var(--line-2);border-radius:5px;color:var(--ink);transition:.18s}
.fld input::placeholder{color:#A9A99E}
.fld input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(230,59,24,.16)}
.f-foot{grid-column:1/-1;display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.f-note{font-family:'Plex',monospace;font-size:.78rem;color:var(--meta)}
.f-msg{grid-column:1/-1;font-size:.95rem;padding:.85rem 1rem;border-radius:5px;display:none}
.f-msg.ok{display:block;background:#E4F1E9;color:var(--ok)}
.f-msg.bad{display:block;background:#FBF0DF;color:var(--warn)}
.hp{position:absolute;left:-9999px}

/* ── footer ─────────────────────────────────── */
.foot{background:var(--ink);color:#A6AA9E;padding:3.6rem 0 2.2rem}
.foot-top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot-lockup{width:196px}
.foot-links{display:flex;flex-direction:column}
.foot-links a{color:#DCDCD2;min-height:40px;display:inline-flex;align-items:center;font-size:.94rem}
.foot-links a:hover{color:var(--accent-ink)}
.parent{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid #2A2F24;display:flex;
  flex-wrap:wrap;gap:1rem;justify-content:space-between;font-family:'Plex',monospace;font-size:.76rem;color:#7C8078}
.parent a{color:#DCDCD2;min-height:40px;display:inline-flex;align-items:center;gap:.4rem}

/* ── lightbox ───────────────────────────────── */
.lb{position:fixed;inset:0;z-index:200;background:rgba(14,17,11,.95);display:none;
  align-items:center;justify-content:center;padding:3vh 3vw}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:86vh;border-radius:6px}
.lb figcaption{position:absolute;bottom:2vh;left:0;right:0;text-align:center;
  font-family:'Plex',monospace;font-size:.8rem;color:#A6AA9E}
.lb button{position:absolute;background:transparent;border:2px solid #3B4034;color:var(--paper);
  width:44px;height:44px;border-radius:5px;cursor:pointer;font-size:1.25rem;line-height:1}
.lb button:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
.lb .x{top:2.5vh;right:3vw}.lb .p{left:2vw;top:50%;transform:translateY(-50%)}
.lb .n{right:2vw;top:50%;transform:translateY(-50%)}

.rv{opacity:0;transform:translateY(16px);transition:opacity .65s,transform .65s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}

/* ── responsive ─────────────────────────────── */
@media (max-width:1040px){
  .hero-grid,.loop{grid-template-columns:minmax(0,1fr);gap:2.2rem}
  .walk{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;display:flex;overflow-x:auto;gap:.4rem;border:0;padding-bottom:.5rem;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail button{white-space:nowrap;border:1px solid var(--line-2);border-radius:4px;width:auto}
  .rail-h{display:none}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav-links{display:none}
  .nav-lockup{width:146px}
  .hero{padding-top:7rem}
  .hero-cta .btn{width:100%}
  .hero-shot{display:block;position:relative}
  .hero-phone{position:absolute;right:0;bottom:-1rem;width:31%;max-width:112px;margin:0}
  .enq{grid-template-columns:minmax(0,1fr);box-shadow:6px 6px 0 rgba(14,17,11,.12)}
  .f-foot .btn{width:100%}
  .lrow{grid-template-columns:2.4rem minmax(0,1fr);gap:.8rem}
  .ltag{grid-column:2;margin-top:.3rem}
  .qitem{grid-template-columns:36px minmax(0,1fr);row-gap:.5rem}
  .qright{grid-column:2;justify-content:space-between}
  .mac{box-shadow:6px 6px 0 rgba(14,17,11,.14)}
}
@media (max-width:420px){.nav-lockup{width:130px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}


/* ════════════════════════════════════════════════════════════
   MOTION, PATTERN AND CINEMA
   The first pass was flat: one screen in the hero and the other
   26 hidden behind a rail. Screens now run the length of the
   page, with the workshop's own visual language carrying the
   spaces between them.
   ════════════════════════════════════════════════════════════ */

/* ── hazard stripe: the shop-floor motif ─────────────────── */
.hazard{height:12px;background:repeating-linear-gradient(135deg,
  var(--accent) 0 14px, var(--ink) 14px 28px);background-size:39.6px 39.6px;
  animation:haz 2.4s linear infinite}
@keyframes haz{to{background-position:39.6px 0}}
.band-ink .hazard{background:repeating-linear-gradient(135deg,
  var(--accent-ink) 0 14px, #23281D 14px 28px);background-size:39.6px 39.6px}

/* ── ticker ──────────────────────────────────────────────── */
.ticker{overflow:hidden;border-block:2px solid var(--ink);padding:.85rem 0;background:var(--paper-2)}
.band-ink .ticker{border-color:#2A2F24;background:#12150F}
.tick-track{display:flex;gap:2.6rem;width:max-content;animation:tick 38s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}
.tick-track span{font-family:'Plex',monospace;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--body);white-space:nowrap;display:flex;align-items:center;gap:2.6rem}
.tick-track span::after{content:"◆";color:var(--accent);font-size:.55rem}
.band-ink .tick-track span{color:#8B8F84}
.band-ink .tick-track span::after{color:var(--accent-ink)}

/* ── grain + vignette on ink bands ───────────────────────── */
.band-ink{overflow:hidden}
.band-ink::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;animation:gr 800ms steps(3) infinite}
@keyframes gr{0%{background-position:0 0}33%{background-position:-11px 7px}
  66%{background-position:9px -9px}100%{background-position:0 0}}
.band-ink > .wrap{position:relative;z-index:1}

/* a slow orange sweep behind ink bands, so they are never dead */
.band-ink::after{content:"";position:absolute;z-index:0;pointer-events:none;
  width:80vw;height:80vw;left:-20vw;top:-30%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,74,.13),transparent 62%);
  animation:sweep 26s ease-in-out infinite alternate}
@keyframes sweep{from{transform:translate3d(0,0,0)}to{transform:translate3d(48vw,14vw,0)}}

/* ── the day: a stage per step, each with its screen ─────── */
.stage{padding:clamp(3rem,5.5vw,5rem) 0;border-bottom:1px solid var(--line)}
.stage:last-child{border-bottom:0}
.stage-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(1.6rem,3.4vw,3.4rem);align-items:center}
.stage:nth-child(even) .stage-grid{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.stage:nth-child(even) .stage-copy{order:2}
.stage-copy .tag{font-family:'Plex',monospace;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:.6rem}
.stage-copy .tag i{font-style:normal;color:var(--meta)}
.stage-copy h3{font-size:clamp(1.5rem,2.6vw,2.2rem);margin:.7rem 0 .6rem}
.stage-copy p{font-size:1.02rem;max-width:52ch}
.stage-shot{position:relative}
.stage .mac,.stage .iph{clip-path:inset(0 0 100% 0);
  transition:clip-path .95s cubic-bezier(.19,1,.22,1),transform .3s,box-shadow .3s}
.stage.in .mac,.stage.in .iph{clip-path:inset(0 0 0 0)}
.stage-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}

/* ── filmstrip: many screens at once ─────────────────────── */
.strip-wrap{margin-top:2.4rem;position:relative}
.filmstrip{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1rem;scrollbar-width:none;cursor:grab}
.filmstrip::-webkit-scrollbar{display:none}
.filmstrip.drag{cursor:grabbing;scroll-snap-type:none}
.cell{flex:0 0 auto;width:min(520px,74vw);scroll-snap-align:center}
.cell.ph{width:min(210px,40vw)}
.cell figcaption{font-family:'Plex',monospace;font-size:.68rem;color:var(--meta);
  margin-top:.6rem;letter-spacing:.04em}
.band-ink .cell figcaption{color:#8B8F84}
.strip-ctl{display:flex;align-items:center;gap:.9rem;margin-top:.5rem}
.strip-ctl button{width:40px;height:40px;border-radius:4px;background:transparent;
  border:2px solid var(--line-2);color:var(--ink);cursor:pointer;font-size:1.15rem}
.strip-ctl button:hover{border-color:var(--accent);color:var(--accent)}
.band-ink .strip-ctl button{border-color:#3B4034;color:var(--paper)}
.band-ink .strip-ctl button:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
.strip-bar{flex:1;height:2px;background:var(--line);position:relative}
.band-ink .strip-bar{background:#2A2F24}
.strip-bar i{position:absolute;inset:0 auto 0 0;background:var(--accent);width:20%}

/* ── counters ────────────────────────────────────────────── */
.counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;
  margin-top:2.4rem;border-top:2px solid var(--ink)}
.band-ink .counts{border-color:var(--accent-ink)}
.cnt{padding:1.4rem 1.2rem 1.4rem 0;border-right:1px solid var(--line)}
.band-ink .cnt{border-color:#2A2F24}
.cnt:last-child{border-right:0}
.cnt b{font-family:'InterD',sans-serif;font-weight:900;font-size:clamp(2.4rem,4.6vw,3.6rem);
  line-height:.9;display:block;letter-spacing:-.03em}
.band-ink .cnt b{color:var(--accent-ink)}
.cnt > span{display:block;margin-top:.5rem;font-size:.9rem;color:var(--body);max-width:26ch}
.cnt b span{font-size:inherit;color:inherit;display:inline;margin:0;max-width:none}
.band-ink .cnt > span{color:#8B8F84}

/* ── masked line reveal on the big headings ─────────────── */
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln > i{display:block;font-style:inherit;transform:translateY(105%);opacity:0;
  transition:transform .8s cubic-bezier(.19,1,.22,1),opacity .55s}
.ln.in > i{transform:none;opacity:1}

/* ── hero: parallax drift + tilt ─────────────────────────── */
.hero-shot .mac,.hero-shot .iph{will-change:transform}

@media (max-width:1040px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage-grid,.stage:nth-child(even) .stage-grid{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .stage:nth-child(even) .stage-copy{order:0}
}
@media (max-width:760px){
  .cards{grid-template-columns:minmax(0,1fr)}
  .stage-pair{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .hazard{height:9px}
}
@media (prefers-reduced-motion:reduce){
  .hazard,.tick-track,.band-ink::before,.band-ink::after{animation:none}
  .stage .mac,.stage .iph{clip-path:none}
  .ln > i{transform:none;opacity:1}
}


/* ── paper texture: a faint workshop grid ────────────────── */
body{background-image:
  linear-gradient(rgba(14,17,11,.028) 1px,transparent 1px),
  linear-gradient(90deg,rgba(14,17,11,.028) 1px,transparent 1px);
  background-size:46px 46px;background-attachment:fixed}
.band-ink,.ticker{position:relative}

/* stages: tighter, and the copy pinned rather than floating */
.stage{padding:clamp(2.4rem,4.4vw,4rem) 0}
.stage-grid{align-items:center}
.stage-copy{position:relative;padding-left:1.3rem}
.stage-copy::before{content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;width:3px;
  background:var(--line-2);transition:background .5s,transform .7s cubic-bezier(.22,1,.36,1);
  transform:scaleY(0);transform-origin:top}
.stage.in .stage-copy::before{transform:scaleY(1);background:var(--accent)}

/* section headings sit on a rule, like a job-card header */
.head{position:relative}
.band .wrap > .head::after{content:"";display:block;height:2px;background:var(--ink);
  margin-top:1.6rem;transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
.band .wrap > .head.in::after{transform:scaleX(1)}
.band-ink .wrap > .head::after{background:var(--accent-ink)}

/* screens lift on scroll, so the page is never static */
.stage .mac,.stage .iph{transform-origin:center}


/* ── drawn technical bands ───────────────────────────────────
   The OpenArt photography could not be fetched into the build,
   and an empty grey box is worse than no band at all. These are
   drawn instead: SVG technical illustrations in the brand
   colours, animated on scroll. They stand on their own, and a
   photograph can replace any of them later. */
.artband{position:relative;margin-top:2.8rem;border-radius:8px;overflow:hidden;
  height:clamp(230px,32vw,420px);border:2px solid var(--ink)}
.band-ink .artband{border-color:#2C3226}
.artband .art,.artband svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.artband figcaption{position:absolute;left:1.5rem;right:1.5rem;bottom:1.2rem;z-index:3;
  font-size:.94rem;font-weight:500;color:#fff;max-width:48ch;
  text-shadow:0 1px 3px rgba(11,14,8,.95),0 2px 16px rgba(11,14,8,.8)}
.artband[data-art="plan"] figcaption{color:var(--ink);text-shadow:0 1px 2px rgba(244,244,238,.9)}
.artband::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(11,14,8,.6))}
.artband[data-art="plan"]::after{background:linear-gradient(180deg,transparent 60%,rgba(244,244,238,.75))}

/* each band animates when it arrives */
.a-paper g{opacity:0;transform:translateY(26px);
  transition:opacity .8s ease,transform .9s cubic-bezier(.19,1,.22,1)}
.artband.in .a-paper g{opacity:1;transform:none}
.artband.in .a-paper g:nth-child(2){transition-delay:.12s}
.artband.in .a-paper g:nth-child(3){transition-delay:.24s}

.a-disc{transform-origin:600px 210px;animation:spin 42s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.a-pad{opacity:0;transition:opacity .7s ease .3s}
.artband.in .a-pad{opacity:1}
.a-call{opacity:0;transform:translateX(22px);
  transition:opacity .7s ease .55s,transform .8s cubic-bezier(.19,1,.22,1) .55s}
.artband.in .a-call{opacity:1;transform:none}

.a-bay g{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .8s cubic-bezier(.19,1,.22,1)}
.artband.in .a-bay g{opacity:1;transform:none}
.artband.in .a-bay g:nth-child(2){transition-delay:.14s}
.artband.in .a-bay g:nth-child(3){transition-delay:.28s}

.a-door{transform:translateY(-100%);transition:transform 1.5s cubic-bezier(.22,1,.36,1) .1s}
.artband.in .a-door{transform:translateY(0)}
.a-glow{opacity:0;transition:opacity 1.2s ease .9s}
.artband.in .a-glow{opacity:1}

@media (prefers-reduced-motion:reduce){
  .a-disc{animation:none}
  .a-paper g,.a-bay g,.a-pad,.a-call,.a-glow{opacity:1;transform:none}
  .a-door{transform:none}
}


/* ── photo bands ─────────────────────────────────────────── */
.photo{position:relative;overflow:hidden;border-radius:8px;height:clamp(250px,36vw,470px);
  margin-top:2.8rem;border:2px solid var(--ink);
  background:linear-gradient(135deg,#23281D,#0F120B)}
.band-ink .photo{border-color:#2C3226}
.photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;will-change:transform}
.photo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,14,8,.05) 42%,rgba(11,14,8,.34) 70%,rgba(11,14,8,.78))}
.photo figcaption{position:absolute;left:1.5rem;right:1.5rem;bottom:1.2rem;z-index:3;
  font-size:.95rem;font-weight:500;color:#fff;max-width:48ch;
  text-shadow:0 1px 3px rgba(11,14,8,.95),0 2px 16px rgba(11,14,8,.8)}
/* fallback only if the file is missing */
.photo.drawn::before{content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(118deg,transparent 0 24px,rgba(255,107,74,.07) 24px 48px)}

/* ── background: less flat ───────────────────────────────── */
body{background-image:
  radial-gradient(1100px 620px at 88% -6%, rgba(230,59,24,.07), transparent 60%),
  radial-gradient(900px 520px at -8% 42%, rgba(230,59,24,.05), transparent 62%),
  linear-gradient(rgba(14,17,11,.032) 1px,transparent 1px),
  linear-gradient(90deg,rgba(14,17,11,.032) 1px,transparent 1px);
  background-size:auto,auto,46px 46px,46px 46px;background-attachment:fixed}