/* tasteskill / scenes / stage.css — the held stage under every scroll scene (references/scenes.md).
   Without .is-live (no script, a failed CDN, reduced motion, a phone set to 'rest') a scene is an ordinary
   section showing its finished composition. With it, the section is (hold + 1) screens tall and the
   stage sticks to the viewport for the hold. */

.scene { position: relative; }
.scene > .scene-stage { position: relative; }

html.js .scene.is-live { height: calc((var(--hold, 2) + 1) * 100svh); }
html.js .scene.is-live > .scene-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;       /* clip, not hidden: hidden would make the stage a scroll container */
  contain: layout paint;
}

/* Everything a scene moves is composited; nothing it moves is laid out again. */
.scene.is-live [data-move] { will-change: transform, opacity; }

/* Lenis */
html.is-smooth { scroll-behavior: auto; }
html.is-smooth body { overscroll-behavior: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .scene.is-live { height: auto; }
  html.js .scene.is-live > .scene-stage { position: relative; height: auto; }
}

/* Vermeulen Elektriciteit — demo
   Direction: "One motif" (taste-skill). The motif is the Belgian wall socket: a circle with two holes and a pin.
   It is the hero, the mask for photographs, the bullet, the footer mark. Palette: oxblood on grey.
   Type: League Spartan / Figtree (self-hosted). */

@font-face { font-family: "League Spartan"; src: url("../fonts/league-spartan-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --bg: #e2e2e2;
  --surface: #d6d6d6;
  --pale: #ececec;
  --ink: #7d0c14;
  --ink-deep: #5c0910;
  --text: #2a0d10;          /* running text: near-black with a red cast, 13:1 on --bg */
  --muted: #6e3f43;         /* 6.3:1 on --bg */
  --accent: #7d0c14;
  --accent-hover: #5c0910;
  --accent-ink: #f2f2f2;
  --night: #140708;
  --night-2: #1f0b0d;
  --night-ink: #b9a7a8;

  --display: "League Spartan", "Arial Black", sans-serif;
  --font: "Figtree", system-ui, sans-serif;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.2rem + 4.2vw, 5rem);
  --step-hero: clamp(2.75rem, 0.6rem + 4.8vw, 5.5rem);

  --margin: clamp(20px, 2.6vw, 40px);
  --gap: 16px;
  --section: clamp(110px, 13vw, 200px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast: 160ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (pointer: fine) { html { overscroll-behavior: none; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--step-body)/1.5 var(--font); overflow-x: clip; transition: background-color 700ms var(--ease-out), color 700ms var(--ease-out); }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; text-wrap: balance; color: var(--ink); }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.tile-red :focus-visible, .contact :focus-visible, .faq__head :focus-visible { outline-color: var(--accent-ink); }
::selection { background: var(--ink); color: var(--accent-ink); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--ink); color: var(--accent-ink); padding: 12px 16px; }
.skip:focus { top: 12px; }
.head { font-size: var(--step-head); }
.dot { display: inline-block; width: 0.42em; height: 0.42em; border-radius: 50%; background: currentColor; vertical-align: 0.12em; margin: 0 0.5em; }

/* buttons: the motif's round end on a solid block */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; font: 600 1rem/1 var(--font); text-decoration: none; cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform 300ms var(--ease-out); }
.btn:active { transform: scale(0.96) !important; }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--ghost { background: var(--pale); color: var(--ink); }
.btn--ghost:hover { background: #f6f6f6; }
.btn--light { background: var(--accent-ink); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--big { min-height: 60px; padding: 0 32px; font-size: 1.125rem; }
.btn--small { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }

/* cursor: a small socket dot that follows the pointer and grows over controls (desktop only) */
.cursor { position: fixed; z-index: 70; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ink); pointer-events: none; opacity: 0; transition: opacity 300ms, width 300ms var(--ease-out), height 300ms var(--ease-out), margin 300ms var(--ease-out); }
.has-cursor .cursor { opacity: 1; }
.cursor.is-big { width: 54px; height: 54px; margin: -27px 0 0 -27px; opacity: 0.18; }

/* bar */
.bar { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 28px; height: 68px; padding: 0 var(--margin); background: var(--bg); transition: transform 360ms var(--ease-out), background-color 700ms var(--ease-out); }
.bar.is-hidden { transform: translateY(-100%); }
.bar__mark { display: inline-flex; align-items: center; font: 700 1.625rem/1 var(--display); letter-spacing: -0.04em; color: var(--ink); text-decoration: none; }
.bar__mark .dot { margin: 0 8px 0 0; width: 18px; height: 18px; vertical-align: 0; }
.bar__nav { display: flex; gap: 26px; margin-left: auto; }
.bar__nav a { padding: 12px 0; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1rem; }
.bar__nav a:hover { text-decoration: underline; }
.bar__cta { min-height: 44px; }

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 100svh; padding: 120px var(--margin) 64px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; overflow: hidden; }
.hero__socket { position: absolute; top: 54%; right: -16vh; width: 88vh; aspect-ratio: 1; border-radius: 50%; background: var(--ink); overflow: hidden; transform: translateY(-50%); transition: background-color 700ms var(--ease-out); }
.hero__socket img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); mix-blend-mode: luminosity; opacity: 0.42; transition: opacity 900ms var(--ease-out); }
.hole { position: absolute; top: 50%; width: 9.5%; aspect-ratio: 1; border-radius: 50%; background: var(--bg); transform: translateY(-50%); transition: background-color 700ms var(--ease-out); }
.hole--l { left: 31%; } .hole--r { left: 59.5%; }
.pin { position: absolute; left: 50%; top: 21%; width: 5%; height: 11%; border-radius: 999px; background: var(--bg); transform: translateX(-50%); transition: background-color 700ms var(--ease-out); }
.hero__text { position: relative; z-index: 2; grid-column: 1 / 9; display: grid; gap: 32px; justify-items: start; }
.hero__title { font-size: var(--step-hero); line-height: 0.86; }
.hero__title .line { display: block; }
.hero__lead { max-width: 30ch; font-size: var(--step-lead); line-height: 1.3; color: var(--text); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* the switch: a rocker in the motif's round frame */
.switch { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 18px 6px 6px; border: 0; border-radius: 999px; background: var(--pale); color: var(--ink); font: 600 1rem/1 var(--font); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.switch:hover { background: #f6f6f6; }
.switch:active { transform: scale(0.97); }
.switch__rocker { position: relative; width: 64px; height: 36px; border-radius: 999px; background: var(--surface); transition: background-color 300ms var(--ease-out); }
.switch__rocker::after { content: ""; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); transition: transform 380ms var(--ease-out); }
.switch[aria-pressed="true"] .switch__rocker::after { transform: translateX(28px); }

/* lights off: the whole page goes to night until the switch (or the intro) turns it on */
html.is-off body, html.is-off .bar { background: var(--night); }
html.is-off .hero__title, html.is-off .bar__mark, html.is-off .bar__nav a { color: #3a1418; }
html.is-off .hero__lead { color: var(--night-ink); }
html.is-off .hero__socket { background: #2a0c0f; }
html.is-off .hero__socket img { opacity: 0; }
html.is-off .hole, html.is-off .pin { background: var(--night); }
html.is-off .switch { background: var(--night-2); color: var(--night-ink); }
html.is-off .switch__rocker { background: #2a0c0f; }
html.is-off .switch__rocker::after { background: var(--night-ink); }
html.is-off .btn--ghost { background: var(--night-2); color: var(--night-ink); }
html.is-off .btn--accent { background: #4a0a10; color: var(--night-ink); }
html.is-off .hero__title, html.is-off .hero__lead, html.is-off .bar a { transition: color 700ms var(--ease-out); }
html.is-flicker .hero__socket { animation: flicker 600ms steps(1) 1; }
@keyframes flicker { 0%, 30%, 55% { opacity: 1; } 15%, 42% { opacity: 0.35; } }

/* ---------- BAND ---------- */
.band { position: relative; display: flex; align-items: center; gap: 12px; background: var(--ink); color: var(--accent-ink); padding: 22px var(--margin) 22px 0; }
.band__clip { flex: 1; min-width: 0; overflow: hidden; }
.band__track { display: flex; width: max-content; }
.band__track p { flex: none; padding-right: 0.5em; font: 700 clamp(2rem, 1rem + 3.4vw, 4.25rem)/1 var(--display); letter-spacing: -0.03em; white-space: nowrap; }
.pause { position: absolute; z-index: 3; right: 10px; bottom: 10px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--night); color: var(--accent-ink); font: 600 0.875rem/1 var(--font); cursor: pointer; transition: background-color var(--t-fast), transform var(--t-fast) var(--ease-out); }
.pause:hover { background: #000; }
.pause:active { transform: scale(0.95); }
.band .pause { position: static; flex: none; background: var(--accent-ink); color: var(--ink); }
.band .pause:hover { background: #fff; }

/* ---------- INTRO ---------- */
.intro { padding: var(--section) var(--margin) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gap); }
.intro__title { grid-column: 1 / 9; font-size: var(--step-head); }
.intro__text { grid-column: 7 / 13; font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.4; max-width: 38ch; }
.counts { grid-column: 1 / 13; margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.counts > div { padding: 24px; background: var(--pale); border-radius: 28px 28px 28px 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; min-height: 210px; }
.counts dd { font: 700 clamp(3rem, 1.6rem + 3.6vw, 5.5rem)/0.9 var(--display); letter-spacing: -0.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.counts dt { font-size: 1rem; color: var(--text); max-width: 24ch; }

/* ---------- SCENE 1: schema ---------- */
.schema { margin-top: var(--section); }
.schema__stage { display: grid; grid-template-rows: auto 1fr; gap: 24px; padding: 104px var(--margin) 40px; background: var(--bg); }
.schema__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gap); align-items: start; }
.schema__head h2 { grid-column: 1 / 6; }
.schema__steps { grid-column: 7 / 13; display: grid; gap: 18px; }
.schema__steps h3 { font-size: 1.5rem; letter-spacing: -0.03em; margin-bottom: 6px; }
.schema__steps p { font-size: 1rem; max-width: 46ch; }
.schema__fig { align-self: center; }
.schema__svg { width: 100%; height: auto; max-height: 52svh; margin: 0 auto; font-family: var(--font); }
.wire { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.schema.is-live .wire { stroke-dasharray: 1; stroke-dashoffset: 1; }
.part rect, .part circle { fill: var(--pale); stroke: var(--ink); stroke-width: 4; }
.part text { fill: var(--ink); font-weight: 600; font-size: 20px; text-anchor: middle; }
.part text.lbl { fill: var(--text); font-weight: 400; font-size: 18px; }
.part.is-on rect, .part.is-on circle { fill: var(--ink); }
.part.is-on text:not(.lbl) { fill: var(--accent-ink); }
.schema.is-live .schema__steps li { opacity: 0.32; transition: opacity 400ms var(--ease-out); }
.schema.is-live[data-beat="0"] [data-beat-step="0"], .schema.is-live[data-beat="1"] [data-beat-step="1"], .schema.is-live[data-beat="2"] [data-beat-step="2"] { opacity: 1; }

/* ---------- LIVE: keuring nodig? ---------- */
.check { margin-top: var(--section); padding: 0 var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.check__head { grid-column: 1 / 6; display: grid; gap: 20px; align-content: start; }
.check__head p { font-size: var(--step-lead); line-height: 1.3; max-width: 26ch; }
.check__choices { grid-column: 6 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 150px; padding: 22px; border: 0; border-radius: 32px; background: var(--pale); color: var(--ink); font: 700 clamp(1.25rem, 1rem + 0.8vw, 1.75rem)/1.05 var(--display); letter-spacing: -0.03em; text-align: left; cursor: pointer; transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out), transform 240ms var(--ease-out); }
.choice:hover { background: #f4f4f4; transform: translateY(-3px); }
.choice:active { transform: scale(0.98); }
.choice__dot { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); position: relative; transition: background-color 240ms; }
.choice__dot::before, .choice__dot::after { content: ""; position: absolute; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--pale); }
.choice__dot::before { left: 7px; } .choice__dot::after { right: 7px; }
.choice[aria-checked="true"] { background: var(--ink); color: var(--accent-ink); }
.choice[aria-checked="true"] .choice__dot { background: var(--accent-ink); }
.choice[aria-checked="true"] .choice__dot::before, .choice[aria-checked="true"] .choice__dot::after { background: var(--ink); }
.check__out { grid-column: 1 / 13; margin-top: 6px; padding: clamp(24px, 3vw, 44px); border-radius: 40px; background: var(--ink); color: var(--accent-ink); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px var(--gap); align-items: end; min-height: 340px; }
.verdict { grid-column: 1 / 10; display: grid; gap: 14px; }
.verdict h3 { color: var(--accent-ink); font-size: clamp(1.75rem, 1.1rem + 1.8vw, 3rem); max-width: 22ch; }
.verdict p { max-width: 60ch; }
.verdict__price { font-weight: 600; }
.verdict + .verdict { margin-top: 40px; }
.js .verdict + .verdict { margin-top: 0; }
.check__out > .btn { grid-column: 10 / 13; justify-self: end; background: var(--accent-ink); color: var(--ink); }
.check__out > .btn:hover { background: #fff; }
.verdict:not([hidden]) { animation: rise 460ms var(--ease-out); }

/* ---------- SERVICES with cursor peek ---------- */
.services { position: relative; margin-top: var(--section); padding: 0 var(--margin); }
.services__list { margin-top: 48px; }
.svc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: 30px 0; align-items: baseline; position: relative; }
.svc::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 999px; background: var(--surface); transform-origin: left; }
.svc h3 { grid-column: 1 / 7; font-size: clamp(2rem, 1rem + 3vw, 4rem); transition: transform 400ms var(--ease-out); }
.svc p { grid-column: 8 / 13; font-size: 1.0625rem; max-width: 38ch; }
.svc:hover h3 { transform: translateX(18px); }
.svc__peek { position: fixed; z-index: 30; left: 0; top: 0; width: 260px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.6); transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out); background: var(--ink); }
.svc__peek.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.svc__peek img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.svc__thumb { display: none; }

/* ---------- SCENE 2: the socket opens ---------- */
.portal { margin-top: var(--section); }
.portal__stage { display: grid; place-items: center; min-height: 100svh; padding: 0 var(--margin); background: var(--bg); overflow: hidden; }
.portal__pic { position: absolute; inset: 0; background: var(--ink); clip-path: circle(75% at 50% 50%); }
.portal__pic video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: 0.6; }
.portal__title { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.06em; font-size: clamp(3.5rem, 1rem + 11vw, 12rem); color: var(--accent-ink); text-align: center; line-height: 0.82; }
.portal__text { position: absolute; z-index: 2; left: var(--margin); bottom: 48px; max-width: 34ch; color: var(--accent-ink); font-size: 1.125rem; }
.pause--portal { right: var(--margin); bottom: 48px; }
.portal.is-live .portal__pic { clip-path: circle(var(--r, 12%) at 50% 50%); }

/* ---------- PRICES ---------- */
.prices { margin-top: var(--section); padding: 0 var(--margin); }
.prices__grid { margin-top: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.ptable { grid-column: 1 / 8; display: grid; font-variant-numeric: tabular-nums; }
.ptable > div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 24px; border-radius: 999px; }
.ptable > div:nth-child(odd) { background: var(--pale); }
.ptable dt { font-size: 1.125rem; }
.ptable dd { font: 700 clamp(1.5rem, 1rem + 1.4vw, 2.25rem)/1 var(--display); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.tile-red { background: var(--ink); color: var(--accent-ink); }
.prices__side { grid-column: 8 / 13; border-radius: 40px; padding: 36px; display: flex; flex-direction: column; gap: 20px; justify-content: space-between; }
.prices__big { font: 700 clamp(2.5rem, 1.2rem + 3.6vw, 5rem)/0.88 var(--display); letter-spacing: -0.04em; }
.prices__side .btn { align-self: flex-start; }

/* ---------- ABOUT ---------- */
.about { margin-top: var(--section); padding: 0 var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; }
.about__text { grid-column: 1 / 6; display: grid; gap: 24px; }
.about__text > p { font-size: var(--step-lead); line-height: 1.35; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.facts dt { font-size: 0.9375rem; color: var(--muted); }
.facts dd { font-weight: 600; }
.about__pics { grid-column: 7 / 13; position: relative; min-height: 640px; }
.round { position: absolute; border-radius: 50%; overflow: hidden; background: var(--ink); }
.round img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.round--a { width: 78%; aspect-ratio: 1; left: 0; top: 0; }
.round--b { width: 46%; aspect-ratio: 1; right: 0; bottom: 0; border: 12px solid var(--bg); }

/* ---------- FAQ ---------- */
.faq { margin-top: var(--section); }
.faq__head { display: flex; align-items: flex-end; min-height: 18svh; padding: 36px var(--margin); background: var(--ink); }
.faq__head h2 { color: var(--accent-ink); font-size: clamp(3rem, 1rem + 7vw, 8rem); }
.band-q { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: 52px var(--margin); background: var(--bg); }
.band-q:nth-child(odd) { background: var(--pale); }
.band-q h3 { grid-column: 1 / 6; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.125rem); line-height: 1; }
.band-q p { grid-column: 7 / 13; font-size: 1.125rem; max-width: 58ch; }

/* ---------- CONTACT ---------- */
.contact { background: var(--ink); color: var(--accent-ink); padding: 96px var(--margin) 120px; }
.contact h2 { color: var(--accent-ink); }
.contact__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
.contact__top h2 { grid-column: 1 / 7; }
.contact__phone { grid-column: 7 / 13; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.contact__phone a { display: inline-block; font: 700 clamp(2.75rem, 1rem + 5vw, 6rem)/0.9 var(--display); letter-spacing: -0.05em; text-decoration: none; white-space: nowrap; }
.contact__phone span { color: #e5c9cb; }
.callbar { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cell { display: flex; flex-direction: column; justify-content: center; min-height: 96px; padding: 14px 26px; border-radius: 999px; background: var(--ink-deep); transition: background-color var(--t-fast) var(--ease-out); }
.cell:focus-within { background: #46070c; }
.cell:has(input[aria-invalid="true"]) { background: #3a0408; }
.cell label { font-size: 0.875rem; color: #e5c9cb; }
.cell input { margin-top: 4px; width: 100%; border: 0; background: transparent; color: var(--accent-ink); font: 400 1.25rem/1.3 var(--font); padding: 4px 0; }
.cell input:focus { outline: none; }
.cell--submit { border: 0; align-items: center; background: var(--accent-ink); color: var(--ink); font: 700 1.5rem/1 var(--display); letter-spacing: -0.03em; cursor: pointer; }
.cell--submit:hover { background: #fff; }
.cell--submit:active { transform: scale(0.98); }
.callbar__hint { grid-column: 1 / 3; padding-left: 26px; font-size: 0.875rem; color: #e5c9cb; }
.callbar__msg { grid-column: 3; font-size: 0.9375rem; }

/* ---------- FOOTER ---------- */
.foot { padding: 48px var(--margin) 32px; background: var(--bg); }
.foot__mark { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
.foot__socket { flex: none; position: relative; width: clamp(110px, 18vw, 280px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); }
.foot__socket i { position: absolute; top: 50%; width: 11%; aspect-ratio: 1; border-radius: 50%; background: var(--bg); transform: translateY(-50%); }
.foot__socket i:first-child { left: 30%; } .foot__socket i:last-child { right: 30%; }
.foot__word { font: 700 clamp(3.5rem, 0.5rem + 13vw, 15rem)/0.8 var(--display); letter-spacing: -0.06em; color: var(--ink); }
.foot__cols { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 16px; font-size: 0.9375rem; }
.foot__cols h2 { font: 600 0.9375rem/1.3 var(--font); letter-spacing: 0; color: var(--text); margin-bottom: 10px; }
.foot__cols nav { display: flex; flex-direction: column; align-items: flex-start; }
.foot__cols nav a { padding: 5px 0; }
.foot__credits { margin-top: 40px; max-width: 80ch; font-size: 0.875rem; color: var(--muted); }
.foot__last { margin-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 0.875rem; }
.callfab { display: none; }

/* ---------- subpages ---------- */
.page { padding: 140px var(--margin) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gap); }
.page__head { grid-column: 1 / 13; }
.page__head h1 { font-size: clamp(2.75rem, 1.2rem + 5vw, 6rem); }
.page__head p { margin-top: 20px; max-width: 52ch; font-size: var(--step-lead); line-height: 1.35; }
.prose { grid-column: 3 / 11; max-width: 70ch; }
.prose h2 { font-size: 2rem; margin: 48px 0 12px; }
.prose p, .prose ul { margin-bottom: 14px; }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 1rem; margin-bottom: 16px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; vertical-align: top; }
.prose tr:nth-child(odd) { background: var(--pale); }
.prose .note { background: var(--pale); padding: 16px 20px; border-radius: 20px; }
.form { grid-column: 1 / 9; display: grid; gap: 10px; }
.form__steps { grid-column: 1 / 9; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.form__steps li { padding: 14px 18px; border-radius: 999px; background: var(--pale); font-weight: 600; font-size: 1rem; color: var(--ink); }
.form__steps li[aria-current="step"] { background: var(--ink); color: var(--accent-ink); }
.form fieldset { border: 0; margin: 0; padding: clamp(22px, 3vw, 36px); border-radius: 32px; background: var(--pale); display: grid; gap: 20px; min-width: 0; }
.form legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font: 700 2rem/1 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.form__aside { grid-column: 9 / 13; grid-row: 2 / span 2; align-self: start; padding: 30px; border-radius: 32px; background: var(--ink); color: var(--accent-ink); }
.form__aside h2 { color: var(--accent-ink); font-size: 2rem; margin-bottom: 12px; }
.form__aside p + p { margin-top: 12px; }
.form__aside .btn { background: var(--accent-ink); color: var(--ink); }
.field { display: grid; gap: 6px; }
.field label, .field .lbl { font-weight: 600; font-size: 1rem; color: var(--text); }
.field input, .field textarea, .field select { width: 100%; min-height: 50px; padding: 12px 16px; border: 2px solid #fff; border-radius: 18px; background: #fff; color: var(--text); font: 400 1.0625rem/1.4 var(--font); }
.field select { appearance: auto; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: #b00012; }
.field .hint { font-size: 0.9375rem; color: var(--muted); }
.field .err { font-size: 0.9375rem; color: #9b0010; font-weight: 600; }
.radios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.radios label { display: flex; gap: 10px; align-items: center; min-height: 56px; padding: 12px 16px; border-radius: 999px; background: #fff; font-weight: 400; cursor: pointer; transition: background-color var(--t-fast); }
.radios label:hover { background: #f8f8f8; }
.radios input { width: 20px; height: 20px; min-height: 0; accent-color: var(--ink); }
.check-row { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; }
.check-row input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--ink); flex: none; }
.form__nav { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.form__done { grid-column: 1 / 9; padding: 32px; border-radius: 32px; background: var(--ink); color: var(--accent-ink); }
.form__done h2 { color: var(--accent-ink); font-size: 2.25rem; margin-bottom: 12px; }
.bar--static { position: sticky; }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .hero__text { grid-column: 1 / 10; }
  .hero__socket { right: -40vh; opacity: 0.9; }
  .counts { grid-template-columns: 1fr 1fr; }
  .check__head, .check__choices { grid-column: 1 / 13; }
  .verdict { grid-column: 1 / 13; }
  .check__out > .btn { grid-column: 1 / 13; justify-self: start; }
  .ptable, .prices__side { grid-column: 1 / 13; }
  .about__text { grid-column: 1 / 13; }
  .about__pics { grid-column: 1 / 13; min-height: 520px; }
  .prose { grid-column: 1 / 13; }
  .form, .form__steps, .form__done, .form__aside { grid-column: 1 / 13; grid-row: auto; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  :root { --margin: 20px; }
  .bar { height: 60px; gap: 12px; }
  .bar__nav { display: none; }
  .bar__cta { margin-left: auto; padding: 0 16px; font-size: 0.9375rem; }
  .hero { display: block; min-height: 0; padding: 92px 20px 0; }
  .hero__socket { position: relative; top: auto; right: auto; width: 128vw; margin: 36px -14vw 0 auto; transform: none; translate: 18vw 0; }
  .hero__text { gap: 22px; }
  .hero__title { font-size: 9.4vw; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
  .intro { display: block; }
  .intro__text { margin-top: 20px; }
  .counts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .counts > div { min-height: 170px; padding: 18px; min-width: 0; }
  .counts dd { font-size: 2.25rem; }
  .js .split-w > span { transform: none; transition: none; }
  .portal__stage { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; padding: 140px 20px 120px; gap: 32px; }
  .portal__text { position: relative; left: auto; right: auto; bottom: auto; }
  .portal__title { align-items: flex-start; text-align: left; }
  .svc__peek, .cursor { display: none; }
  .band { padding-right: 12px; }
  .band__track { width: auto; transform: none !important; }
  .band__track p { flex: 1 1 auto; white-space: normal; font-size: 1.375rem; line-height: 1.3; padding: 0 20px; }
  .band__track p[aria-hidden] { display: none; }
  .band .pause { display: none; }
  .counts dt { font-size: 0.875rem; }
  .schema__stage { padding: 88px 20px 24px; }
  .schema__head { display: block; }
  .schema__steps { margin-top: 16px; gap: 10px; }
  .schema__steps p { font-size: 0.9375rem; }
  .schema.is-live .schema__steps li { display: none; }
  .schema.is-live[data-beat="0"] [data-beat-step="0"], .schema.is-live[data-beat="1"] [data-beat-step="1"], .schema.is-live[data-beat="2"] [data-beat-step="2"] { display: block; }
  .schema__svg { max-height: none; }
  .part text { font-size: 26px; } .part text.lbl { font-size: 24px; }
  .check { display: block; }
  .check__choices { margin-top: 24px; gap: 8px; }
  .choice { min-height: 120px; padding: 16px; font-size: 1.125rem; border-radius: 24px; }
  .check__out { display: grid; grid-template-columns: 1fr; margin-top: 8px; border-radius: 28px; }
  .verdict, .check__out > .btn { grid-column: 1; }
  .svc { display: block; padding: 24px 0; }
  .svc h3 { font-size: 2.25rem; }
  .svc p { margin-top: 10px; }
  .svc__thumb { display: block; width: 84px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; float: right; margin: 0 0 8px 12px; }
  .svc__thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
  .portal__title { font-size: 19vw; }
  .portal__text { font-size: 1.0625rem; }
  .pause--portal { bottom: auto; top: 76px; right: 20px; }
  .ptable > div { padding: 18px; border-radius: 22px; }
  .ptable dt { font-size: 1rem; }
  .prices__side { border-radius: 28px; padding: 26px; margin-top: 24px; }
  .about { display: block; }
  .about__pics { min-height: 0; height: 110vw; margin-top: 40px; }
  .faq__head { min-height: 0; padding: 48px 20px 24px; }
  .faq__head h2 { font-size: 15vw; }
  .band-q { display: block; padding: 32px 20px; }
  .band-q h3 { margin-bottom: 10px; }
  .contact { padding: 72px 20px 120px; }
  .contact__top { display: block; }
  .contact__phone { align-items: flex-start; margin-top: 24px; }
  .contact__phone a { font-size: 14vw; }
  .callbar { grid-template-columns: 1fr; }
  .cell { min-height: 68px; border-radius: 26px; }
  .callbar__hint, .callbar__msg { grid-column: 1; padding-left: 0; }
  .foot { padding: 40px 20px 100px; }
  .foot__word { font-size: 15vw; }
  .foot__socket { width: 22vw; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .callfab { position: fixed; z-index: 45; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; min-height: 58px; border-radius: 999px; background: var(--ink); color: var(--accent-ink); font-weight: 600; font-size: 1.125rem; text-decoration: none; transition: transform var(--t-fast) var(--ease-out); }
  .callfab:active { transform: scale(0.98); }
  .page { display: block; padding-top: 100px; }
  .page > * + * { margin-top: 24px; }
  .form { display: block; }
  .form > * + * { margin-top: 10px; }
  .form__steps li { padding: 10px 12px; font-size: 0.875rem; border-radius: 18px; }
  .radios { grid-template-columns: 1fr; }
}

/* ---------- motion helpers ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js [data-rise] { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-rise].is-in { opacity: 1; transform: none; }
.js .split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.js .split-w > span { display: inline-block; transform: translateY(105%); transition: transform 900ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js .is-in .split-w > span { transform: none; }
.js .svc::before { transform: scaleX(0); transition: transform 1000ms var(--ease-out); }
.js .svc.is-in::before { transform: scaleX(1); }
.js .svc h3, .js .svc p { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out) 120ms, transform 700ms var(--ease-out) 120ms; }
.js .svc.is-in h3, .js .svc.is-in p { opacity: 1; transform: none; }
.js .svc.is-in:hover h3 { transform: translateX(18px); }
.js .hero__title .line { opacity: 0; transform: translateY(40px); animation: rise 900ms var(--ease-out) forwards; }
.js .hero__title .line + .line { animation-delay: 90ms; }
.js .hero__lead, .js .hero__actions, .js .switch { opacity: 0; animation: rise 900ms var(--ease-out) forwards; }
.js .hero__lead { animation-delay: 200ms; } .js .hero__actions { animation-delay: 280ms; } .js .switch { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  body, .hero__socket, .hole, .pin { transition: none; }
  .js [data-rise], .js .svc h3, .js .svc p, .js .hero__title .line, .js .hero__lead, .js .hero__actions, .js .switch { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .js .split-w > span { transform: none !important; transition: none !important; }
  .js .svc::before { transform: none; transition: none; }
  .verdict:not([hidden]) { animation: none; }
  .pause, .cursor, .svc__peek { display: none; }
  html.is-flicker .hero__socket { animation: none; }
}