/* Inter Tight, self-hosted (SIL OFL 1.1, see fonts/OFL.txt). Latin-ext covers ő and ű. */
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-tight-latin-ext-wght-normal.woff2") format("woff2-variations"), url("fonts/inter-tight-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f5f5f7;
  --white: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #515154;
  --muted: #8e8e93;
  --faint: #c7c7cc;
  --line: #e3e3e8;
  --red: #c8402a;
  --red-2: #e6735a;
  --sand: #ebe4d6;
  --sage: #dbe5dc;
  --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --r: 22px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --S: 1;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- type ---------- */
.display, .hero-a, .hero-b { font-weight: 500; letter-spacing: -.045em; line-height: .96; font-size: clamp(2.5rem, 6.6vw, 6rem); }
.huge { font-size: clamp(3rem, 8.4vw, 7.8rem); }
.muted { color: var(--muted); }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.lead { font-size: 1.08rem; color: var(--ink-2); max-width: 44ch; line-height: 1.5; }
.lead.center { margin-top: 28px; }
.num { display: inline-block; font-size: .78rem; font-weight: 500; border: 1px solid #cfcfd4; border-radius: 999px; padding: 4px 12px; color: var(--ink-2); }

/* letter blur-in */
.split-in .w { display: inline-block; white-space: nowrap; }
.js .split-in .ch { display: inline-block; opacity: 0; transform: translateY(50%) scaleY(1.4); transform-origin: 50% 0; transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js .intro .split-in .ch, .js .intro.split-in .ch, .js .split-in.in .ch { opacity: 1; transform: none; }

/* inverse text: white + difference = dark on the page, inverted over cards */
.js .invert { mix-blend-mode: difference; color: #fff; }
.js .invert-title { mix-blend-mode: difference; color: #fff; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: .95rem; padding: 13px 20px; border-radius: 999px; transition: background .2s, box-shadow .2s; white-space: nowrap; }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-ghost { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--faint); }
.btn-sm { padding: 9px 16px; font-size: .88rem; }
.btn-block { width: 100%; justify-content: center; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.center-row { justify-content: center; }
.soon { font-size: .88rem; color: var(--muted); margin-left: 6px; }

/* ---------- loader + ruler ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-content: center; justify-items: center; gap: 12px; transition: opacity .6s var(--ease), visibility .6s; }
.loader .logo-mark { width: 44px; height: 44px; border-radius: 12px; font-size: 1.4rem; }
.loader-n { font-size: .8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.loaded .loader { opacity: 0; visibility: hidden; }
html:not(.js) .loader { display: none; }
.ruler { position: fixed; right: 10px; top: 20px; bottom: 20px; width: 10px; z-index: 40; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 8px); -webkit-mask: linear-gradient(90deg, #000 40%, transparent 41%); mask: linear-gradient(90deg, #000 40%, transparent 41%); }
.ruler i { position: absolute; right: 0; top: 0; width: 10px; height: 2px; background: var(--ink); }

/* ---------- nav ---------- */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; padding: 0 20px; pointer-events: none; }
.nav-pill { pointer-events: auto; max-width: 1180px; margin: 0 auto; height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 8px 0 16px; border-radius: 999px;
  background: rgba(255,255,255,.72); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 8px 30px -12px rgba(0,0,0,.15); }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; }
.logo-mark { width: 24px; height: 24px; border-radius: 7px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: .82rem; }
.nav-links { display: flex; gap: 28px; font-size: .9rem; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }

/* ---------- story ---------- */
.story { position: relative; }
.stage { position: relative; }
.js .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); } /* opaque so the difference blend has a backdrop */
.cards-layer { position: absolute; inset: 0; z-index: 1; perspective: 1500px; overflow: hidden; pointer-events: none; }
.cards { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; pointer-events: none; }
html:not(.js) .cards { display: none; }

.card {
  position: absolute; left: 0; top: 0;
  width: calc(178px * var(--S)); height: calc(236px * var(--S));
  margin: calc(-118px * var(--S)) 0 0 calc(-89px * var(--S));
  transform-style: preserve-3d; will-change: transform, opacity;
}
.card .face, .card .back { position: absolute; inset: 0; border-radius: calc(14px * var(--S)); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card .face {
  padding: calc(14px * var(--S)); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  background: var(--white); color: var(--ink); container-type: size;
  box-shadow: 0 30px 50px -30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.04);
}
.card .back { transform: rotateY(180deg); filter: brightness(.92); }
.card .face::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: var(--dim, 0); pointer-events: none; }
.card small { font-size: 7.5cqw; font-weight: 500; opacity: .6; line-height: 1.2; }
.card .v-q { font-weight: 500; font-size: 11.5cqw; letter-spacing: -.035em; line-height: 1.04; margin-top: 6%; flex: 1; }
.card .v-a { font-size: 8cqw; font-weight: 500; line-height: 1.2; padding-top: 8%; border-top: 1px solid currentColor; border-top-color: rgba(127,127,127,.35); }
.card .v-a i { font-style: normal; opacity: .55; }
.card .v-n { font-weight: 500; font-size: 26cqw; letter-spacing: -.06em; line-height: .9; }
.card .v-n em { display: block; font-style: normal; font-size: 7.5cqw; letter-spacing: -.01em; line-height: 1.2; margin-top: 5px; opacity: .65; }
.c-ink .face { background: var(--ink); color: #fff; }
.c-red .face { background: var(--red); color: #fff; }
.c-sand .face { background: var(--sand); }
.c-sage .face { background: var(--sage); }
.rain { height: 16%; flex: none; margin: 0 0 8%; border-radius: 6px; background: repeating-linear-gradient(105deg, currentColor 0 1px, transparent 1px 9px); opacity: .25; }

/* scenes */
.scene { padding: 0 40px; }
.js .scene { z-index: 2; position: absolute; inset: 0; visibility: hidden; opacity: 0; will-change: opacity, transform, filter; pointer-events: none; }
.js .scene.live { pointer-events: auto; }
html:not(.js) .scene { min-height: 80vh; padding-top: 120px; }

/* 0 hero */
.s-hero { display: grid; grid-template-columns: 1fr 1fr; align-content: start; padding-top: 110px; }
.s-hero .hero-a { grid-column: 1; }
.s-hero .hero-b { grid-column: 2; text-align: right; color: #67676a; }
.s-hero-foot { display: flex; align-items: flex-end; padding-bottom: 44px; }
.hero-foot { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.hero-foot p { max-width: 40ch; color: var(--ink-2); font-size: 1.05rem; }
.hero-foot .cta-row { margin: 0; }
.js .hero-foot { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease) .6s, transform .9s var(--ease) .6s; }
.js .intro .hero-foot, .js .s-hero-foot.intro .hero-foot { opacity: 1; transform: none; }

/* 1 line */
.s-line { display: grid; align-items: end; justify-items: center; padding-bottom: 8vh; }
.s-line p { font-size: clamp(1.2rem, 2.2vw, 1.8rem); font-weight: 500; letter-spacing: -.03em; color: var(--ink-2); }

/* 2 booking + 6 staff: text on one side */
.s-booking, .s-staff { display: grid; align-items: center; }
.side { justify-self: end; width: min(44vw, 560px); margin-right: 3vw; }
.side .display { margin: 18px 0 22px; }
.side-left { justify-self: start; margin: 0 0 0 3vw; width: min(44vw, 600px); padding-top: 60px; }
.side-left .display { font-size: clamp(2.3rem, min(4.6vw, 7.4vh), 4.4rem); }

/* 3 cats list */
.s-cats { display: grid; align-content: center; padding: 80px 0 20px 5vw; }
.cats { list-style: none; padding: 0; margin: 0; font-size: clamp(2.2rem, min(4.8vw, 7.6vh), 4.6rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; }
.cats li { color: var(--faint); transition: color .5s var(--ease), transform .5s var(--ease); transform-origin: left center; }
.cats li.past { color: #a1a1a6; }
.cats li.on { color: var(--ink); transform: translateX(.1em); }
.cats li.on::before { content: "→ "; }
.cat-d { margin-top: 28px; max-width: 34ch; color: var(--ink-2); font-size: 1.02rem; min-height: 3em; opacity: 0; transform: translateY(8px); }
.cat-d.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }

/* 4 marquee */
.s-marquee { padding: 0; }
.marquee { position: absolute; top: 50%; left: 0; white-space: nowrap; font-size: clamp(3.5rem, 10vw, 9.5rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; z-index: 2; mix-blend-mode: normal; }

/* 5 brief */
.s-brief { display: grid; grid-template-columns: 1.5fr 1fr; gap: 5vw; align-items: center; padding: 90px 4vw 40px; perspective: 1400px; }
.frame { background: #111; border-radius: 26px; padding: 10px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.6); transform-origin: 50% 60%; }
.frame-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px 12px; }
.frame-bar span { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3c; }
.frame-bar em { margin-left: auto; font-style: normal; font-size: .72rem; color: #8e8e93; }
.brief { background: var(--white); border-radius: 18px; padding: 28px 32px 32px; font-size: 1rem; color: var(--ink-2); display: grid; gap: 14px; }
.brief b { color: var(--ink); font-weight: 600; }
.brief-meta { font-size: .78rem; color: var(--muted); }
.brief-lead { font-size: 1.15rem; color: var(--ink); letter-spacing: -.01em; margin-bottom: 6px; }
.brief h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.brief ol, .brief ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.brief i { font-style: normal; font-weight: 600; color: var(--red); }
.bstep { padding: 12px 14px; margin: 0 -14px; border-radius: 12px; transition: background .5s var(--ease), opacity .5s var(--ease); opacity: .38; }
.bstep.on { opacity: 1; background: #f5f5f7; }
.steps-col { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.steps-viewport { height: 300px; overflow: hidden; margin-top: 24px; -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; transition: transform .7s var(--ease); }
.steps li { transition: opacity .5s var(--ease); opacity: .3; }
.steps li.on { opacity: 1; }
.steps h3 { font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; margin: 12px 0 8px; }
.steps p { color: var(--ink-2); max-width: 32ch; }

/* 6 staff */
.labour { display: flex; align-items: center; gap: 28px; margin: 8px 0 22px; }
.mega { font-size: clamp(4.5rem, min(9vw, 15vh), 9rem); font-weight: 500; letter-spacing: -.07em; line-height: .85; font-variant-numeric: tabular-nums; }
.mega .pct { font-size: .42em; color: var(--muted); margin-left: .05em; }
.labour-l { color: var(--ink-2); font-size: .92rem; margin-bottom: 14px; }
.bars { display: grid; gap: 10px; width: 240px; }
.bar { display: grid; grid-template-columns: 62px 1fr 40px; align-items: center; gap: 10px; font-size: .85rem; }
.bar i { display: block; height: 8px; border-radius: 4px; background: var(--red-2); transform-origin: left; transform: scaleX(0); }
.bar b { text-align: right; font-weight: 500; }
.demo-note { display: block; margin-top: 14px; font-size: .75rem; color: var(--muted); }

/* 6 phone */
.s-devices { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 80px 5vw 40px; }
.dev-words .display { margin: 18px 0 26px; }
.dev-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 1.15rem; letter-spacing: -.01em; }
.dev-list li { color: var(--faint); transition: color .5s var(--ease); }
.dev-list li b { font-weight: 500; margin-right: 6px; }
.dev-list li.on { color: var(--ink); }
.phone-wrap { display: grid; place-items: center; perspective: 1600px; }
.phone {
  position: relative; width: calc(290px * var(--S)); height: calc(600px * var(--S)); border-radius: calc(50px * var(--S));
  background: #1d1d1f; padding: calc(10px * var(--S)); transform-style: preserve-3d; will-change: transform;
  box-shadow: inset 0 0 0 2px #48484a, 0 50px 90px -40px rgba(0,0,0,.55);
}
.phone::before, .phone::after { content: ""; position: absolute; top: 3%; bottom: 3%; width: calc(16px * var(--S)); border-radius: 8px;
  background: linear-gradient(#c7c7cc, #8e8e93 30%, #d1d1d6 60%, #8e8e93); }
.phone::before { right: calc(-8px * var(--S)); transform: rotateY(90deg); }
.phone::after { left: calc(-8px * var(--S)); transform: rotateY(-90deg); }
.phone-screen { position: relative; height: 100%; border-radius: calc(40px * var(--S)); background: #fff; overflow: hidden; }
.island { position: absolute; top: calc(10px * var(--S)); left: 50%; width: 32%; height: calc(26px * var(--S)); margin-left: -16%; border-radius: 99px; background: #1d1d1f; z-index: 2; }
.pscreen { position: absolute; inset: 0; padding: calc(52px * var(--S)) calc(18px * var(--S)) calc(18px * var(--S)); display: flex; flex-direction: column; gap: calc(10px * var(--S));
  opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); font-size: calc(13px * var(--S)); }
.pscreen.on { opacity: 1; transform: none; }
.ps-top { display: flex; justify-content: space-between; font-size: .9em; color: var(--ink-2); }
.ps-top span { color: var(--muted); }
.pscreen h3 { font-size: 1.9em; font-weight: 500; letter-spacing: -.04em; line-height: 1.05; margin: 4px 0 6px; }
.ps-field { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; display: grid; }
.ps-field small { color: var(--muted); font-size: .8em; }
.ps-field b { font-weight: 500; font-size: 1.15em; }
.ps-btn { margin-top: 6px; background: var(--ink); color: #fff; border-radius: 99px; text-align: center; padding: 11px; font-weight: 500; }
.ps-note { text-align: center; color: var(--muted); font-size: .85em; }
.ps-rows { list-style: none; padding: 0; margin: 0; display: grid; }
.ps-rows li { display: grid; grid-template-columns: 3.4em 3em 1fr; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ps-rows b { font-weight: 600; }
.ps-rows em { font-style: normal; color: var(--muted); text-align: right; }
.ps-h { font-size: .75em; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; margin-top: 6px; }
.ps-p { color: var(--ink-2); line-height: 1.35; }
.ps-demo { position: absolute; bottom: calc(10px * var(--S)); left: 0; right: 0; text-align: center; font-size: calc(10px * var(--S)); color: var(--faint); }

/* ---------- tiers ---------- */
.tiers { padding: 160px 32px 120px; position: relative; z-index: 2; background: var(--bg); }
.tiers .display { max-width: 16ch; }
.tier-grid { max-width: 1180px; margin: 80px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier { background: var(--white); border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; }
.tier small { font-size: .82rem; color: var(--ink-2); }
.tier h3 { font-size: 2.1rem; font-weight: 500; letter-spacing: -.04em; margin: 6px 0 28px; }
.price { font-size: 3.4rem; font-weight: 500; letter-spacing: -.05em; line-height: 1; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.price em { display: block; font-style: normal; font-size: .82rem; letter-spacing: 0; color: var(--muted); margin-top: 10px; font-weight: 400; }
.price-sm { font-size: 1.7rem; letter-spacing: -.03em; line-height: 1.1; }
.tier ul { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.tier li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.tier-pro { box-shadow: inset 0 0 0 1.5px var(--ink); }
.data-note { max-width: 70ch; margin: 56px auto 0; text-align: center; color: var(--ink-2); font-size: .95rem; }
.data-note b { color: var(--ink); }

/* ---------- final CTA ---------- */
.start { min-height: 110vh; padding: 0 32px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.start .display, .start .lead, .start .cta-row { position: relative; z-index: 2; }
.float-field { position: absolute; inset: 0; z-index: 1; }
.card.float { left: 0; top: 0; margin: 0; transform-origin: center; }

/* ---------- footer (dark) + handoff into signup ---------- */
.footer { background: #0b0b0c; color: #a1a1a6; padding: 56px 32px 40px; font-size: .9rem; position: relative; z-index: 2; }
.footer-top { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer .logo { color: #fff; }
.footer .logo-mark { background: #fff; color: #0b0b0c; }
.footer nav { display: flex; gap: 24px; }
.footer nav a:hover { color: #fff; }
.footer .keep { text-align: center; color: #fff; margin: 72px 0 8px; font-size: 1rem; }
.footer .fine { text-align: center; font-size: .78rem; color: #6e6e73; }
.handoff { height: 170vh; background: #0b0b0c; }
.handoff-layer { position: fixed; inset: 0; z-index: 60; visibility: hidden; pointer-events: none; }
.handoff-layer.open { pointer-events: auto; }
.handoff-screen { position: absolute; inset: 0; background: var(--bg); overflow: hidden; transform-origin: 50% 0; border-radius: 28px; will-change: transform;
  box-shadow: 0 -20px 80px -20px rgba(0,0,0,.6); display: flex; flex-direction: column; }
.hs-bar { display: flex; align-items: center; gap: 6px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.hs-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.hs-bar em { margin-left: auto; font-style: normal; font-size: .78rem; color: var(--muted); }
.hs-body { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 6vw; align-items: center; padding: 6vh 7vw; }
.hs-copy .display { margin: 18px 0 22px; font-size: clamp(2.4rem, 5vw, 4.6rem); }
.hs-form { background: #fff; border-radius: 24px; padding: 32px; display: grid; gap: 16px; box-shadow: 0 30px 60px -40px rgba(0,0,0,.35); }
.hs-form label { display: grid; gap: 6px; font-size: .88rem; color: var(--ink-2); }
.hs-form input { font: inherit; font-size: 1rem; color: var(--ink); padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); outline: none; }
.hs-form input:focus { border-color: var(--ink); background: #fff; }
.hs-form .btn { margin-top: 6px; }
.capsule { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: rgba(29,29,31,.88); color: #fff; padding: 10px 16px; border-radius: 99px; font-size: .82rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity .4s; }
.cap-t { width: 90px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.cap-t i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.open .capsule { opacity: 0; }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); filter: blur(8px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .js .split-in .ch, .js .reveal, .js .hero-foot { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .tier-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav { padding: 0 12px; }
  .scene { padding: 0 16px; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 16px; background: linear-gradient(transparent, var(--bg) 30%); padding-top: 30px; }
  .hero-foot p { font-size: .95rem; }
  .side, .side-left { justify-self: stretch; width: auto; margin: 0; align-self: end; padding: 28px 0 32px; background: linear-gradient(transparent, var(--bg) 22%); }
  .s-staff .side-left { align-self: start; padding-top: 88px; background: linear-gradient(var(--bg) 78%, transparent); }
  .s-cats { align-content: start; padding-top: 92px; padding-left: 16px; }
  .cats { font-size: 2.1rem; }
  .cat-d { margin-top: 14px; font-size: .9rem; min-height: 0; }
  .s-brief { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 16px; padding: 80px 16px 20px; align-items: start; }
  .frame { padding: 6px; border-radius: 18px; }
  .brief { padding: 16px; font-size: .8rem; gap: 6px; }
  .brief-lead { font-size: .95rem; }
  .bstep { padding: 8px 10px; margin: 0 -10px; }
  .steps-viewport { height: 150px; margin-top: 10px; }
  .steps h3 { font-size: 1.8rem; margin: 6px 0 4px; }
  .steps p { font-size: .9rem; }
  .labour { gap: 16px; }
  .bars { width: 170px; }
  .tiers { padding: 110px 16px 80px; }
  .start { padding: 0 16px; }
  .footer { padding: 24px 16px; }
  .ruler { display: none; }
  .s-hero { grid-template-columns: 1fr; padding-top: 92px; }
  .s-hero .hero-b { grid-column: 1; text-align: left; margin-top: 10px; }
  .s-hero-foot { padding-bottom: 28px; }
  .s-devices { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 84px 16px 16px; align-items: start; }
  .dev-words .display { margin: 10px 0 12px; font-size: 2.6rem; }
  .dev-list { font-size: .95rem; gap: 4px; }
  .hs-body { grid-template-columns: 1fr; padding: 28px 16px; gap: 20px; align-content: start; }
  .hs-form { padding: 20px; }
  .footer { padding: 40px 16px 32px; }
}