/* design\components.css: the CSS of the components in design\components.md, the director's: the header, the footer,
   the exit popup, the call bar, the stop icon, and each section pattern, card, form box and call-to-action block as the
   home page built them. Every page loads it (the build copies it to site\assets\css\components.css). Builders use these
   classes as they are; a page's own CSS only places and sizes its parts, with the tokens of system.css.
   Written in Part 1 by the home page's builder from components.md. Tokens only from system.css. The shared drawings
   (.week, .slot, .ticket, .chip, .tile, .glass) never reach inside a scene: each scene draws its own. */

/* ---------- base ---------- */
:where(:not([data-scene] *)), :where(:not([data-scene] *))::before, :where(:not([data-scene] *))::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + var(--space-3)); }
body { overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: var(--c-brand); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-brand-dark); }
p { margin: 0; }
button { font: inherit; color: inherit; }
img { height: auto; }
:where(button, a, input, summary):focus-visible { outline: none; }
.icon { display: block; flex: none; width: 1.2em; height: 1.2em; }
html:has(.site-header[data-open]), html:has(.lightbox[open]), html[data-kit-modal] { overflow: hidden; }

/* ---------- section patterns ---------- */
.wrap { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
.band { position: relative; padding-block: var(--section-y); }
.band--ice { background: var(--c-paper-alt); }
.band--night { background: var(--g-night); color: var(--c-on-night); }
.band--footage { background: var(--c-night-2); color: var(--c-on-night); isolation: isolate; }
.band--night a:not(.btn), .band--footage a:not(.btn) { color: var(--c-brand-light); }
.band--night a:not(.btn):hover, .band--footage a:not(.btn):hover { color: var(--c-on-night); }

.head { margin-bottom: var(--space-5); }
.head h2 { font-size: var(--fs-h2); color: var(--c-ink); max-width: 24ch; }
.head__line { margin-top: var(--space-3); max-width: 62ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-ink-soft); }
.head--center { text-align: center; }
.head--center h2, .head--center .head__line { margin-inline: auto; }
.band--night .head h2, .band--footage .head h2 { color: var(--c-on-night); }
.band--night .head__line, .band--footage .head__line { color: var(--c-on-night-soft); }
@media (min-width: 960px) { .head { margin-bottom: var(--space-6); } }

.split { display: grid; gap: var(--space-5); align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); }
  .split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } /* the visual first in the markup: left here, first on the phone */
}

/* The frame of a part's visual: its photo or clip, the scene host and the stop icon. */
.stage { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); background: var(--g-night); box-shadow: var(--shadow-l); }
.stage > img, .stage > video, .stage > [data-screen-photo] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.stage > .grade { z-index: 1; }
.stage > .scene { position: absolute; inset: 0; z-index: 2; }
.stage > .zoom { position: absolute; inset: 0; transform: scale(var(--zoom, 1)); transform-origin: var(--zoom-at, 50% 50%); }
.zoom > [data-screen-photo] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
@media (min-width: 700px) { .stage { aspect-ratio: 16 / 10; } }

/* A navy grade over footage, from the side the text sits on. */
.grade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--c-night-2) 82%, transparent), transparent); }

/* ---------- the stop icon ---------- */
.stop { position: absolute; top: 12px; right: 12px; z-index: 6; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge); color: var(--c-on-night); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.stop:hover { background: color-mix(in srgb, var(--c-night) 62%, transparent); }
.stop:active { transform: scale(0.94); }
.stop:focus-visible { border-radius: var(--radius-pill); box-shadow: var(--glass-edge), var(--ring-focus); }
.stop svg { width: 14px; height: 14px; }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 28px; border: 0; border-radius: var(--radius-pill); background: var(--c-brand); color: var(--c-on-brand); font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: var(--fs-body); line-height: 1; letter-spacing: 0; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-cta); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--c-brand-dark); color: var(--c-on-brand); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { border-radius: var(--radius-pill); box-shadow: var(--shadow-cta), var(--ring-focus); }
.btn--sm { height: 44px; padding: 0 20px; font-size: var(--fs-ui); }
.btn--block { display: flex; width: 100%; }
.btn--light { background: var(--c-paper); color: var(--c-brand); box-shadow: var(--shadow-m); }
.btn--light:hover { background: var(--c-ice); color: var(--c-brand-dark); }
.btn--ghost { background: transparent; color: var(--c-brand); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--ghost:hover { background: var(--c-ice); color: var(--c-brand-dark); }
.band--night .btn--ghost, .band--footage .btn--ghost { color: var(--c-on-night); }
.band--night .btn--ghost:hover, .band--footage .btn--ghost:hover { background: var(--c-line-night); color: var(--c-on-night); }
.band--night a.btn--light, .band--footage a.btn--light { color: var(--c-brand); }
.btn__arrow, .link-arrow::after { flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.6 3.8 12.8 8l-4.2 4.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.6 3.8 12.8 8l-4.2 4.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow, .link-arrow:hover::after { transform: translateX(3px); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-body); line-height: 1.3; color: var(--c-brand); text-decoration: none; }
.link-arrow::after { content: ""; }
.link-arrow:hover { color: var(--c-brand-dark); }
.band--night .link-arrow, .band--footage .link-arrow { color: var(--c-brand-light); }
.play { position: relative; display: inline-grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--c-paper); color: var(--c-brand); box-shadow: var(--shadow-m); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.play::before { content: ""; width: 22px; height: 22px; margin-left: 4px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.6v14.8a1 1 0 0 0 1.5.86l12.1-7.4a1 1 0 0 0 0-1.72L8.5 3.74A1 1 0 0 0 7 4.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.6v14.8a1 1 0 0 0 1.5.86l12.1-7.4a1 1 0 0 0 0-1.72L8.5 3.74A1 1 0 0 0 7 4.6z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- the header ---------- */
.skip { padding: 10px 16px; border-radius: var(--radius-s); background: var(--c-paper); color: var(--c-brand); font: 600 var(--fs-ui)/1 var(--font-ui); box-shadow: var(--shadow-m); }
.site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--space-3); height: var(--header-h); padding-inline: max(var(--space-4), calc((100% - var(--max-w)) / 2 + var(--gutter))); background: var(--c-paper); box-shadow: 0 1px 0 transparent; transition: box-shadow var(--dur-med) var(--ease-out); }
html[data-scrolled] .site-header, .site-header[data-open] { box-shadow: 0 1px 0 var(--c-line); }
@supports (animation-timeline: scroll()) {
  .site-header { animation: site-header-line linear both; animation-timeline: scroll(root); animation-range: 0 24px; }
  @keyframes site-header-line { to { box-shadow: 0 1px 0 var(--c-line); } }
}
.site-header__logo { display: flex; flex: none; margin-right: auto; border-radius: var(--radius-s); }
.site-header__logo img { display: block; width: auto; height: 56px; }
.site-header__menu { display: none; }
.nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav__item { position: relative; }
.nav__item > a, .nav__group { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-s); background: none; font: 600 var(--fs-ui)/1 var(--font-ui); color: var(--c-ink); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
.nav__item > a:hover, .nav__group:hover, .nav__item--group:hover > .nav__group { color: var(--c-brand); }
.nav__item > a[aria-current="page"] { text-decoration: underline 2px var(--c-brand); text-underline-offset: 8px; }
.nav__group .icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.nav__sub { position: absolute; top: calc(100% + 10px); left: 50%; z-index: 2; width: 340px; margin: 0; padding: 8px; list-style: none; background: var(--c-paper); border-radius: var(--radius-m); box-shadow: var(--shadow-l); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); }
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
.nav__sub a { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-s); text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out); }
.nav__sub a:hover { background: var(--c-paper-alt); }
.nav__sub a[aria-current="page"] .nav__sub-name { color: var(--c-brand); }
.nav__sub-name { font: 600 var(--fs-ui)/1.3 var(--font-ui); color: var(--c-ink); }
.nav__sub-line { font: 400 var(--fs-small)/1.4 var(--font-ui); color: var(--c-ink-soft); }
.nav__more { display: none; }
.site-header__phone { display: inline-flex; flex: none; align-items: center; gap: 8px; font: 600 var(--fs-ui)/1 var(--font-ui); color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.site-header__phone:hover { color: var(--c-brand); }
.site-header__phone .icon, .nav__phone .icon { width: 18px; height: 18px; color: var(--c-brand); }
.site-header__cta { flex: none; }
@media (min-width: 900px) {
  .nav__item--group:hover .nav__sub, .nav__item--group:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
  .nav__item--group:hover .nav__group .icon, .nav__item--group:focus-within .nav__group .icon { transform: rotate(180deg); }
}
@media (max-width: 1099px) {
  .site-header__logo img { height: 48px; }
  .nav__item > a, .nav__group { padding: 0 9px; }
  .site-header__phone { justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-ice); }
  .site-header__phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-header__phone:focus-visible { border-radius: 50%; }
}
@media (max-width: 899px) {
  .site-header { gap: var(--space-2); padding-inline: var(--gutter); }
  .site-header__phone { order: 2; }
  .site-header__phone .icon { width: 20px; height: 20px; }
  .site-header__menu { order: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--c-paper); color: var(--c-ink); cursor: pointer; }
  .site-header__menu:focus-visible { border-radius: 50%; }
  .site-header__menu .icon { width: 24px; height: 24px; }
  .site-header__menu .icon--close, .site-header[data-open] .site-header__menu .icon--menu { display: none; }
  .site-header[data-open] .site-header__menu .icon--close { display: block; }
  .site-header__cta { display: none; }
  .site-header__nav { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--gutter) var(--space-5); background: var(--c-paper); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med); }
  .site-header[data-open] .site-header__nav { visibility: visible; opacity: 1; transform: none; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--c-line); }
  .nav__item > a, .nav__group { display: flex; width: 100%; height: 58px; padding: 0; border-radius: 0; font-size: var(--fs-body); }
  .nav__group { pointer-events: none; }
  .nav__group .icon { display: none; }
  .nav__sub { position: static; width: auto; padding: 0 0 var(--space-3); background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav__sub::before { display: none; }
  .nav__sub a { padding: 10px 0 10px var(--space-3); border-left: 2px solid var(--c-ice); border-radius: 0; }
  .nav__more { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
  .nav__phone { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: var(--radius-pill); background: var(--c-ice); font: 600 var(--fs-body)/1 var(--font-ui); color: var(--c-ink); text-decoration: none; }
}

/* ---------- the footer ---------- */
.site-footer { display: grid; gap: var(--space-5) var(--space-4); padding: var(--space-6) max(var(--gutter), calc((100% - var(--max-w)) / 2 + var(--gutter))) var(--space-5); background: var(--g-night); color: var(--c-on-night-soft); font-size: var(--fs-ui); line-height: 1.5; }
.site-footer a { color: var(--c-on-night-soft); text-decoration: none; }
.site-footer a:hover { color: var(--c-on-night); }
.site-footer__logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 800; font-stretch: var(--stretch-display); font-size: var(--fs-scene-l); letter-spacing: var(--ls-display); line-height: 1; }
.site-footer a.site-footer__logo { color: var(--c-on-night); }
.site-footer__logo img { display: block; width: 44px; height: 44px; }
.site-footer__line { margin-top: var(--space-3); max-width: 36ch; }
.site-footer__title { margin-bottom: 14px; font: 600 var(--fs-ui)/1.2 var(--font-ui); color: var(--c-on-night); }
.site-footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer__contact { display: grid; align-content: start; gap: 10px; }
.site-footer__contact .site-footer__title { margin-bottom: 4px; }
.site-footer .site-footer__contact a { font-weight: 600; color: var(--c-on-night); }
.site-footer__contact address { font-style: normal; }
.site-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--c-line-night); font-size: var(--fs-small); }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-4); }
@media (min-width: 640px) { .site-footer { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .site-footer { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; padding-top: var(--space-7); } .site-footer__brand { grid-column: auto; } }

/* ---------- the shared drawings (outside scenes) ---------- */
.glass:not([data-scene] *) { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); border-radius: var(--radius-l); color: var(--c-on-night); }
.week:not([data-scene] *) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.week__day:not([data-scene] *) { padding-bottom: 2px; font: 600 var(--fs-scene-xs)/1 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; text-align: center; color: var(--c-ink-soft); }
.slot:not([data-scene] *) { min-height: 52px; border: 1.5px dashed var(--c-slot); border-radius: var(--radius-s); }
.ticket:not([data-scene] *) { position: relative; overflow: hidden; min-height: 52px; padding: 6px 6px 6px 12px; border-radius: var(--radius-s); background: var(--c-paper); box-shadow: var(--shadow-s); }
.ticket:not([data-scene] *)::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--c-accent); }
.ticket--missed:not([data-scene] *) { box-shadow: inset 0 0 0 1.5px var(--c-missed); }
.ticket--missed:not([data-scene] *)::before { background: var(--c-missed); }
.chip:not([data-scene] *) { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--c-ice); font: 600 var(--fs-scene-xs)/1 var(--font-ui); color: var(--c-ink); white-space: nowrap; }
.chip:not([data-scene] *)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--chip-dot, var(--c-accent)); }
.tile:not([data-scene] *) { display: inline-grid; place-items: center; min-width: 0.8em; padding: 0 0.08em; border-radius: var(--radius-tile); background: linear-gradient(var(--tile-top) 0 50%, var(--tile-bottom) 50% 100%); box-shadow: inset 0 -1px 0 var(--tile-line), inset 0 2px 6px var(--tile-line); font-family: var(--font-num); font-stretch: var(--stretch-num); font-weight: var(--fw-num); color: var(--tile-text); font-variant-numeric: tabular-nums; }

/* ---------- the goal ring (shared drawing) ---------- */
.ring-a { stop-color: var(--c-ring-a); }
.ring-b { stop-color: var(--c-ring-b); }
.ring-c { stop-color: var(--c-ring-c); }

/* ---------- hero (home) ---------- */
.hero { position: relative; overflow: hidden; }
.hero__media { position: relative; overflow: hidden; background: var(--g-night); }
.hero__slides { position: absolute; inset: 0; }
.hero__slide video { object-position: var(--focus, 50% 50%); }
/* the kit rotate CSS (kit.md), as it is */
[data-kit-scene="rotate"] [data-kit-slide] { position: absolute; inset: 0; margin: 0; visibility: hidden; overflow: hidden; }
[data-kit-scene="rotate"] [data-kit-slide][data-kit-on] { visibility: visible; z-index: 2; opacity: var(--kit-move, 1); transform: translateX(calc((1 - var(--kit-move, 1)) * 4%)); }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-prev])) [data-kit-slide][data-kit-on] { transform: none; opacity: 1; } /* the first picture is simply there */
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { visibility: visible; z-index: 1; }
[data-kit-scene="rotate"] [data-kit-slide] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the navy grade: from the left on the computer, from the bottom on the phone */
/* the navy grade behind the copy column (from 1220px; the block layout below 1220px has its own), clear by 78% so the
   cards' side keeps its light */
.grade--hero { z-index: 3; background: linear-gradient(90deg, color-mix(in srgb, var(--c-night-2) 88%, transparent) 0%, color-mix(in srgb, var(--c-night-2) 72%, transparent) 40%, color-mix(in srgb, var(--c-night-2) 35%, transparent) 58%, transparent 78%); }
.hero__media .stop { z-index: 6; }
.hero h1 { font-size: var(--fs-display); color: var(--c-on-night); }
.hero__line { font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; color: var(--c-on-night); text-shadow: 0 1px 3px color-mix(in srgb, var(--c-night) 55%, transparent); max-width: 46ch; }
.hero__call { font-size: var(--fs-ui); color: var(--c-on-night-soft); }
.hero__call a { font-weight: 600; }
.hero__cards { position: relative; z-index: 4; pointer-events: none; }
.hero__cards > .scene { position: absolute; inset: 0; }
@media (min-width: 1220px) {
  .hero { display: grid; align-items: center; min-height: max(680px, calc(100svh - var(--header-h))); }
  .hero__media { position: absolute; inset: 0; }
  .hero__in.wrap { position: relative; z-index: 5; display: grid; grid-template-columns: max(var(--gutter), calc((100% - var(--max-w)) / 2 + var(--gutter))) minmax(0, 1fr) 44%; align-items: center; max-width: none; padding: var(--space-5) 0; }
  .hero__copy { grid-column: 2; display: grid; gap: var(--space-3); padding-right: var(--space-5); }
  .hero h1 { max-width: 12.5ch; }
  .hero__copy .formbox { margin-top: var(--space-3); }
  .hero__cards { grid-column: 3; align-self: center; height: 460px; }
}
/* Below 1220px the cards cannot stay off the faces over full-bleed footage, so the footage is a full-width block at the
   top of the hero (16:9, at most 62vh; 4:3 and at most 290px under 700px) with the scene host covering it, and under
   it, on the night band, the H1 and the line, the form box (beside them from 900px, under them below) and the call
   line. Nothing but the scene's one compact card sits on the footage. */
@media (max-width: 1219px) {
  .hero { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter); grid-template-areas: "media media media" ". h1 ." ". line ." ". form ." ". call ."; padding-bottom: var(--space-5); }
  .hero__in, .hero__copy { display: contents; }
  .hero__media { grid-area: media; height: min(56.25vw, 62vh); }
  .grade--hero { background: linear-gradient(0deg, var(--c-night-2) 0%, color-mix(in srgb, var(--c-night-2) 45%, transparent) 12%, transparent 30%); }
  .hero__cards { grid-area: media; }
  .hero h1 { grid-area: h1; margin-top: var(--space-5); }
  .hero__line { grid-area: line; margin-top: var(--space-3); }
  .hero .formbox { grid-area: form; max-width: 560px; margin-top: var(--space-4); }
  .hero__call { grid-area: call; margin-top: var(--space-3); }
}
@media (min-width: 900px) and (max-width: 1219px) {
  .hero { grid-template-columns: var(--gutter) minmax(0, 7fr) var(--space-5) minmax(0, 5fr) var(--gutter); grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "media media media media media" ". h1 . form ." ". line . form ." ". call . form ." ". . . form ."; }
  .hero .formbox { align-self: start; margin-top: var(--space-5); }
}
@media (max-width: 699px) {
  .hero__media { height: min(75vw, 290px); }
  .hero h1 { margin-top: var(--space-3); }
  .hero__line { margin-top: var(--space-2); }
  .hero .formbox { margin-top: var(--space-3); }
}

/* ---------- the form box (kit form) ---------- */
.formbox { position: relative; width: 100%; max-width: 520px; padding: 24px; border-radius: var(--radius-l); background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-l); }
.formbox--wide { max-width: 560px; }
.formbox__form { position: relative; margin: 0; }
.formbox__marks { position: absolute; top: 9px; right: 0; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.formbox__marks li { width: 22px; height: 4px; border-radius: var(--radius-pill); background: var(--c-line); transition: background-color var(--dur-med) var(--ease-out); }
.formbox__marks li[data-kit-past] { background: var(--c-accent); }
.formbox__marks li[aria-current="step"] { background: var(--c-brand); }
.formbox__step { min-width: 0; margin: 0; padding: 0; border: 0; }
.formbox__q { display: block; float: left; width: 100%; margin: 0 0 var(--space-3); padding: 0 64px 0 0; font-family: var(--font-display); font-weight: 800; font-stretch: 100%; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em; color: var(--c-ink); }
.formbox__q + * { clear: both; }
.goals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--space-3); }
.goal { position: relative; display: grid; grid-template-areas: "dial" "unit"; justify-items: center; padding: 12px 4px 10px; border: 1.5px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.goal:hover { border-color: var(--c-brand); }
.goal:active { transform: scale(0.97); }
.goal input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.goal:has(input:focus-visible) { box-shadow: var(--ring-focus); }
.goal[data-kit-on] { border-color: var(--c-brand); background: var(--c-ice); box-shadow: inset 0 0 0 0.5px var(--c-brand); }
.goal[data-kit-on]:has(input:focus-visible) { box-shadow: inset 0 0 0 0.5px var(--c-brand), var(--ring-focus); }
.goal__ring { grid-area: dial; width: 56px; height: 56px; transform: rotate(-90deg); overflow: visible; }
.goal__track { fill: none; stroke: var(--c-ice); stroke-width: 4; transition: stroke var(--dur-fast) var(--ease-out); }
.goal__arc { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: var(--arc) 100; transition: stroke-width var(--dur-med) var(--ease-out); }
.goal[data-kit-on] .goal__track { stroke: var(--c-paper); }
.goal[data-kit-on] .goal__arc { stroke-width: 5; }
.goal__n { grid-area: dial; place-self: center; font-family: var(--font-num); font-stretch: var(--stretch-num); font-weight: var(--fw-num); font-size: var(--fs-h3); line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-ink); }
.goal__u { grid-area: unit; margin-top: 4px; font: 500 var(--fs-scene-xs)/1.2 var(--font-ui); color: var(--c-ink-soft); }
.goals .formbox__error { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--c-ink); }
.field input { width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid var(--c-line); border-radius: var(--radius-s); background: var(--c-paper); font: 400 var(--fs-body)/1 var(--font-text); color: var(--c-ink); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.field input:hover { border-color: var(--c-ink-faint); }
.field input:focus, .field input:focus-visible { outline: none; border-color: var(--c-brand); border-radius: var(--radius-s); box-shadow: var(--ring-focus); }
.field[data-kit-invalid] input { border-color: var(--c-missed); }
.formbox__error { display: flex; align-items: flex-start; gap: 6px; font: 500 var(--fs-small)/1.35 var(--font-ui); color: var(--c-ink); }
.formbox__error::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; background: var(--c-missed); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' d='M9 0a9 9 0 1 1 0 18A9 9 0 0 1 9 0zM8 4h2v6.4H8zM9 12.1a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' d='M9 0a9 9 0 1 1 0 18A9 9 0 0 1 9 0zM8 4h2v6.4H8zM9 12.1a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.formbox__step .btn { margin-top: 2px; }
.formbox__back { display: block; margin: 8px auto 0; padding: 8px 14px; border: 0; border-radius: var(--radius-s); background: none; font: 600 var(--fs-small)/1 var(--font-ui); color: var(--c-ink-soft); cursor: pointer; }
.formbox__back:hover { color: var(--c-brand); }
.formbox__form[data-kit-sending] .btn { opacity: 0.7; pointer-events: none; }
.ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: var(--space-3) 0 0; padding: 0; list-style: none; font: 500 var(--fs-small)/1.3 var(--font-ui); color: var(--c-ink-soft); }
.ticks li { display: inline-flex; align-items: center; gap: 6px; }
.ticks li::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--c-accent-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.4 6.6 11.6 12.6 4.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.4 6.6 11.6 12.6 4.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 699px) { .formbox { padding: 20px; } }
@media (max-width: 379px) { .goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- the three steps (home #how) ---------- */
.steps { display: grid; gap: 6px; margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.steps__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 16px; align-items: center; padding: 14px 16px; border-radius: var(--radius-m); transition: background-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.steps__ring { grid-row: span 2; position: relative; display: grid; place-items: center; width: 48px; height: 48px; }
.steps__ring svg { position: absolute; inset: 0; width: 48px; height: 48px; transform: rotate(-90deg); }
.steps__track { fill: none; stroke: var(--c-line); stroke-width: 3; }
.steps__arc { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray var(--dur-slow) var(--ease-out); }
.steps__num { position: relative; font-family: var(--font-num); font-stretch: var(--stretch-num); font-weight: var(--fw-num); font-size: var(--fs-scene-l); line-height: 1; color: var(--c-ink-soft); transition: color var(--dur-med) var(--ease-out); }
.steps__name { align-self: end; font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: var(--fs-lead); line-height: 1.25; letter-spacing: -0.005em; color: var(--c-ink); }
.steps__line { align-self: start; font-size: var(--fs-ui); line-height: 1.5; color: var(--c-ink-soft); }
.band:not(:has([data-scene][data-step])) .steps__item:first-child,
.band:has([data-scene][data-step="1"]) .steps__item:nth-child(1),
.band:has([data-scene][data-step="2"]) .steps__item:nth-child(2),
.band:has([data-scene][data-step="3"]) .steps__item:nth-child(3) { background: var(--c-paper); box-shadow: var(--shadow-m); }
.band:not(:has([data-scene][data-step])) .steps__item:first-child .steps__arc,
.band:has([data-scene][data-step="1"]) .steps__item:nth-child(1) .steps__arc,
.band:has([data-scene][data-step="2"]) .steps__item:nth-child(2) .steps__arc,
.band:has([data-scene][data-step="3"]) .steps__item:nth-child(3) .steps__arc { stroke-dasharray: 100 100; }
.band:not(:has([data-scene][data-step])) .steps__item:first-child .steps__num,
.band:has([data-scene][data-step="1"]) .steps__item:nth-child(1) .steps__num,
.band:has([data-scene][data-step="2"]) .steps__item:nth-child(2) .steps__num,
.band:has([data-scene][data-step="3"]) .steps__item:nth-child(3) .steps__num { color: var(--c-brand); }

/* ---------- tabs (home #services) ---------- */
.tabs__list { display: flex; gap: var(--space-4); margin: 0 auto var(--space-4); padding: 4px 2px 6px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab { display: grid; flex: 1 1 0; gap: 12px; min-width: 150px; padding: 8px 2px 0; border: 0; border-radius: var(--radius-s); background: none; text-align: left; cursor: pointer; }
.tabs__name { font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: var(--fs-lead); line-height: 1.2; color: var(--c-ink-soft); transition: color var(--dur-fast) var(--ease-out); }
.tabs__tab:hover .tabs__name, .tabs__tab[aria-selected="true"] .tabs__name { color: var(--c-ink); }
.tabs__bar { position: relative; overflow: hidden; height: 4px; border-radius: var(--radius-pill); background: var(--c-line); }
.tabs__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--c-brand); transform: scaleX(0); transform-origin: 0 50%; }
.tabs__tab[aria-selected="true"] .tabs__fill { transform: scaleX(var(--tab-progress, 1)); }
.tabs__panels { position: relative; }
.tabs__panel .stage { aspect-ratio: 4 / 5; }
.tabs__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.tabs__line { max-width: 60ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-ink-soft); }
@media (min-width: 700px) { .tabs__panel .stage { aspect-ratio: 16 / 9; } }
@media (min-width: 760px) { .tabs__name { color: var(--c-ink-faint); } }

/* ---------- the calculator (home #worth) ---------- */
/* A white card: the inputs at the left (about 40%), the picture at the right on a night panel. The picture is two piles
   of booked jobs side by side, Today and With Score More Business: a pile's height is its jobs a month (the same scale for
   both), its width what a typical job brings in, so its size is the month's money. Today's pile carries the jobs it loses
   as empty dashed slots (red: calls that ring out; amber: the gap to Google's top 3); the pile with Score More Business has
   them booked (teal: every call answered; sky: the top 3 on Maps). home.js sets the sizes (--w, --f-*) and places the band
   words; the picture builds once when it first comes on screen, then only the visitor changes it. */
.calc { display: grid; gap: var(--space-5); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--c-paper); box-shadow: var(--shadow-l); }
.calc > * { min-width: 0; }
.calc__inputs { display: grid; align-content: start; gap: 26px; padding-top: 4px; }
.calc__field { min-width: 0; margin: 0; padding: 0; border: 0; }
.calc__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; padding: 0; font: 600 var(--fs-ui)/1.3 var(--font-ui); color: var(--c-ink); }
.calc__label label { cursor: pointer; }
.calc__label output { flex: none; font-family: var(--font-num); font-stretch: var(--stretch-num); font-weight: var(--fw-num); font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-brand); white-space: nowrap; }
.calc__choice > legend { float: left; width: 100%; }
.calc__choice > legend + * { clear: both; }
.calc__help { margin-top: 6px; font-size: var(--fs-small); line-height: 1.45; color: var(--c-ink-soft); }

/* a slider: the whole 32px strip takes the hand (mouse, finger, arrow keys); a 10px track, ice, royal up to the thumb; a
   28px thumb, white with a royal ring and a royal core; its scale sits under it, never on it */
.range { display: block; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.range::-webkit-slider-runnable-track { height: 10px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--c-brand) 0 var(--kit-fill, 50%), var(--c-ice) var(--kit-fill, 50%) 100%); box-shadow: inset 0 1px 2px rgba(6, 25, 86, 0.12); }
.range::-moz-range-track { height: 10px; border-radius: var(--radius-pill); background: var(--c-ice); box-shadow: inset 0 1px 2px rgba(6, 25, 86, 0.12); }
.range::-moz-range-progress { height: 10px; border-radius: var(--radius-pill); background: var(--c-brand); }
.range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -9px; border: 0; border-radius: 50%; background: radial-gradient(circle, var(--c-brand) 0 4.5px, var(--c-paper) 5px); box-shadow: 0 0 0 2px var(--c-brand), 0 6px 14px rgba(6, 25, 86, 0.24); -webkit-appearance: none; appearance: none; transition: transform var(--dur-fast) var(--ease-out); }
.range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: radial-gradient(circle, var(--c-brand) 0 4.5px, var(--c-paper) 5px); box-shadow: 0 0 0 2px var(--c-brand), 0 6px 14px rgba(6, 25, 86, 0.24); }
.range:hover::-webkit-slider-thumb { transform: scale(1.06); }
.range:active::-webkit-slider-thumb { transform: scale(1.1); }
.range:focus-visible { box-shadow: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--c-brand), 0 0 0 5px var(--c-paper), 0 0 0 8px var(--c-brand), 0 6px 14px rgba(6, 25, 86, 0.24); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--c-brand), 0 0 0 5px var(--c-paper), 0 0 0 8px var(--c-brand), 0 6px 14px rgba(6, 25, 86, 0.24); }
/* the scale: a hairline mark and its number at the value's place on the slider (the thumb's center runs from 14px to
   14px before the end); the first number starts at the slider's start, the last ends at its end */
.range-scale { position: relative; height: 22px; margin-top: 2px; pointer-events: none; }
.range-scale__mark { position: absolute; top: 0; left: calc(14px + (100% - 28px) * var(--at)); width: 0; }
.range-scale__mark::before { content: ""; position: absolute; top: 0; left: -0.75px; width: 1.5px; height: 5px; border-radius: 1px; background: color-mix(in srgb, var(--c-ink) 22%, transparent); }
.range-scale__n { position: absolute; top: 8px; left: 0; transform: translateX(-50%); font: 500 var(--fs-scene-xs)/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-ink-faint); white-space: nowrap; }
.range-scale__mark:first-child .range-scale__n { transform: translateX(-14px); }
.range-scale__mark:last-child .range-scale__n { transform: translateX(calc(14px - 100%)); }
/* the Maps lever: three choices on an ice track, the chosen one white with royal words */
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--c-ice); }
.seg label { position: relative; display: grid; place-items: center; min-height: 44px; padding: 0 8px; border-radius: var(--radius-pill); font: 600 var(--fs-small)/1.2 var(--font-ui); text-align: center; color: var(--c-ink); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.seg input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.seg label:hover { color: var(--c-brand); }
.seg label:has(input:checked) { background: var(--c-paper); color: var(--c-brand); box-shadow: var(--shadow-s); }
.seg label:has(input:focus-visible) { box-shadow: var(--ring-focus); }

/* the picture: a night panel; the light behind the pile with Score More Business is its one glow */
.calc__picture { position: relative; isolation: isolate; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; padding: 30px 30px 28px; border-radius: var(--radius-l); background: var(--g-night); color: var(--c-on-night); overflow: hidden; box-shadow: inset 0 0 0 1px var(--c-line-night); }
.calc__picture::before { content: ""; position: absolute; z-index: -1; right: -18%; bottom: 4%; width: 78%; height: 78%; background: radial-gradient(closest-side, rgba(56, 182, 255, 0.22), rgba(56, 182, 255, 0)); pointer-events: none; }
.calc__answer { display: grid; justify-items: start; gap: 6px; }
.calc__diff { font-family: var(--font-num); font-stretch: var(--stretch-num); font-weight: 800; font-size: min(var(--fs-num-xl), 16cqi); line-height: 0.9; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--c-accent); background: linear-gradient(90deg, var(--c-ring-a) 0%, var(--c-ring-b) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.calc__per { font: 600 var(--fs-body)/1.3 var(--font-ui); color: var(--c-on-night); }
.calc__year { font: 500 var(--fs-small)/1.3 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-on-night-soft); }

/* the drawing: the two piles standing on one floor, the band words between them */
.piles { --piles-h: 300px; --pile-min: 64px; --pile-max: 148px; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 20px; height: var(--piles-h); margin-top: 8px; }
/* the floor: a hairline the piles stand on, lit toward the pile with Score More Business */
.piles::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 1.5px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(90, 220, 228, 0.8) 100%); pointer-events: none; }
.pile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; width: calc(var(--pile-min) + (var(--pile-max) - var(--pile-min)) * var(--w, 0.5)); height: 100%; transition: width var(--dur-fast) var(--ease-out); }
/* where each pile meets the floor: a soft shadow under Today's, a teal glow under the other */
.pile::after { content: ""; position: absolute; z-index: -1; left: -16%; right: -16%; bottom: -10px; height: 20px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); pointer-events: none; }
.pile--with::after { background: radial-gradient(closest-side, rgba(90, 220, 228, 0.5), rgba(90, 220, 228, 0)); }
.pile__seg { --light: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 36%, rgba(6, 25, 86, 0) 64%, rgba(6, 25, 86, 0.16) 100%); flex: none; display: block; width: 100%; border-radius: 5px; transition: height var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.pile__seg[hidden] { display: none; }
.pile__seg[data-top] { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.pile__seg--booked { height: calc(var(--f-booked) * var(--piles-h)); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
.pile__seg--calls { height: calc(var(--f-calls) * var(--piles-h)); }
.pile__seg--maps { height: calc(var(--f-maps) * var(--piles-h)); }
/* booked jobs: a stack of tickets, each with the teal edge of every ticket on the site, the edge of each ticket showing
   (every job when a job is 6px tall or more, else every few), lit from the left so the pile reads as one solid stack */
.pile__seg--booked, .pile--with .pile__seg { --tick: calc(var(--f-line, 0.03) * var(--piles-h)); }
.pile__seg--booked { background: var(--light), repeating-linear-gradient(0deg, rgba(12, 44, 77, 0.14) 0 1px, rgba(255, 255, 255, 0.65) 1px 2px, transparent 2px var(--tick)), linear-gradient(90deg, var(--c-accent) 0 4px, transparent 4px), linear-gradient(180deg, #FFFFFF 0%, #DCE8F6 100%); box-shadow: inset 0 1px 0 #FFFFFF, 0 12px 26px rgba(0, 0, 0, 0.32); }
/* with Score More Business: the same slots booked, teal for the calls answered, sky for the top 3 on Maps */
.pile--with .pile__seg--calls { background: var(--light), repeating-linear-gradient(0deg, rgba(6, 25, 86, 0.16) 0 1px, rgba(255, 255, 255, 0.32) 1px 2px, transparent 2px var(--tick)), linear-gradient(180deg, #A2F2F5 0%, var(--c-accent) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 30px rgba(90, 220, 228, 0.4); }
.pile--with .pile__seg--maps { background: var(--light), repeating-linear-gradient(0deg, rgba(6, 25, 86, 0.16) 0 1px, rgba(255, 255, 255, 0.3) 1px 2px, transparent 2px var(--tick)), linear-gradient(180deg, #8FD8FF 0%, var(--c-ring-b) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 30px rgba(56, 182, 255, 0.4); }
/* today: the same slots empty, dashed like every empty slot on the site, red for calls that ring out, amber for the gap */
.pile--now .pile__seg--calls { border: 2px dashed color-mix(in srgb, var(--c-missed) 90%, transparent); background: color-mix(in srgb, var(--c-missed) 8%, transparent); }
.pile--now .pile__seg--maps { border: 2px dashed color-mix(in srgb, var(--c-gap) 90%, transparent); background: color-mix(in srgb, var(--c-gap) 7%, transparent); }
/* the band words, each at the height of its band between the piles (home.js keeps them apart: --dy): its jobs, then what
   it is today in the empty slot's color and what it becomes in the booked slot's color */
.piles__bands { position: relative; height: 100%; margin: 0; padding: 0; list-style: none; }
.piles__band { position: absolute; left: 0; right: 0; bottom: calc(var(--c, 0) * var(--piles-h)); display: grid; justify-items: center; gap: 4px; text-align: center; transform: translateY(calc(50% - var(--dy, 0px))); transition: bottom var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-med) var(--ease-out); }
.piles__n { font-family: var(--font-num); font-stretch: var(--stretch-num); font-weight: 700; font-size: 1.625rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-on-night); }
.piles__band--calls .piles__n, .piles__band--calls .piles__to { color: var(--c-accent); }
.piles__band--maps .piles__n, .piles__band--maps .piles__to { color: var(--c-ring-b); }
.piles__band--calls .piles__was { color: color-mix(in srgb, var(--c-missed) 72%, #FFFFFF); }
.piles__band--maps .piles__was { color: var(--c-gap); }
.piles__what { max-width: 28ch; font: 500 var(--fs-scene-xs)/1.35 var(--font-ui); color: var(--c-on-night-soft); text-wrap: balance; }
.piles__was, .piles__to { white-space: nowrap; }
.piles__band[data-zero] .piles__n { display: none; }
/* under each pile: its name, its jobs at the job's value, its money a month */
.calc__totals { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-top: -6px; }
.calc__total { flex: 1 1 0; display: grid; justify-items: start; align-content: start; gap: 3px; min-width: 0; }
.calc__total--with { justify-items: end; text-align: right; }
.calc__total-name { font: 600 var(--fs-small)/1.25 var(--font-ui); color: var(--c-on-night); }
.calc__total-jobs { font: 500 var(--fs-scene-xs)/1.35 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-on-night-soft); }
.calc__total-money { font-family: var(--font-num); font-stretch: var(--stretch-num); font-weight: 700; font-size: min(1.75rem, 8.5cqi); line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--c-on-night); }
.calc__total-money small { font: 500 var(--fs-scene-xs)/1 var(--font-ui); color: var(--c-on-night-soft); }
.calc__total--with .calc__total-money { color: var(--c-accent); }
.calc__cta { display: flex; justify-content: center; padding-top: 4px; }
.calc__fine { display: grid; gap: 6px; max-width: 80ch; margin: var(--space-4) auto 0; text-align: center; font-size: var(--fs-scene-xs); line-height: 1.5; color: var(--c-ink-soft); }
/* it builds once, the first time it comes on screen (home.js): the tickets booked today rise in both piles, then the slots
   fill in, then the band words show; a moved input shows the whole picture at once */
.piles[data-build] .pile__seg { transition: height 700ms var(--ease-out), opacity 300ms var(--ease-out); }
.piles[data-build="0"] .pile__seg, .piles[data-build="1"] .pile__seg:not(.pile__seg--booked) { height: 0; opacity: 0; border-width: 0; }
.piles[data-build="0"] .piles__band, .piles[data-build="1"] .piles__band { opacity: 0; }
.piles[data-build="2"] .piles__band { opacity: 0; }
@media (min-width: 960px) { .calc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }
@media (max-width: 699px) {
  .calc { gap: var(--space-4); padding: var(--space-4) 16px 20px; border-radius: var(--radius-l); }
  .calc__picture { gap: 18px; padding: 24px 16px 22px; }
  .piles { --piles-h: 250px; --pile-min: 38px; --pile-max: 70px; column-gap: 10px; }
  .piles__n { font-size: 1.375rem; }
  .calc__total-money { font-size: min(1.5rem, 8.5cqi); }
  .calc__total-money small { display: block; margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) { .pile, .pile__seg, .piles__band { transition: none; } }

/* ---------- trade tiles (home #trades) ---------- */
.trades { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.trade { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 10; border-radius: var(--radius-l); background: var(--g-night); color: var(--c-on-night); box-shadow: var(--shadow-s); }
.trade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform var(--dur-slow) var(--ease-out); }
.trade:hover img { transform: scale(1.03); }
.trade::after { content: ""; position: absolute; inset: 40% 0 0; z-index: 1; background: linear-gradient(0deg, color-mix(in srgb, var(--c-night) 88%, transparent) 0%, color-mix(in srgb, var(--c-night) 55%, transparent) 45%, transparent 100%); pointer-events: none; }
.trade__text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 4px; padding: var(--space-4); }
.trade__name { font-family: var(--font-display); font-weight: 800; font-stretch: var(--stretch-display); font-size: var(--fs-scene-l); line-height: 1.1; letter-spacing: var(--ls-display); }
.trade__line { font: 500 var(--fs-ui)/1.4 var(--font-ui); color: var(--c-on-night-soft); }
.trade--more { display: grid; align-content: center; justify-items: start; gap: var(--space-3); aspect-ratio: auto; padding: var(--space-5); background: var(--c-ice); color: var(--c-ink); box-shadow: none; }
.trade--more::after { display: none; }
.trade--more .trade__name { color: var(--c-ink); }
.trade--more .trade__line { font-size: var(--fs-body); color: var(--c-ink-soft); }
@media (min-width: 640px) { .trades { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trade:not(.trade--more) { aspect-ratio: 4 / 5; } .trade--more { grid-column: 1 / -1; } }
@media (min-width: 960px) { .trades { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } .trade--more { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-5); padding: var(--space-5) var(--space-6); } .trade--more .btn { grid-column: 2; grid-row: 1 / span 2; } }
@media (prefers-reduced-motion: reduce) { .trade img { transition: none; } .trade:hover img { transform: none; } }

/* ---------- FAQ list ---------- */
.faq { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 22px 0; font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: var(--fs-lead); line-height: 1.3; color: var(--c-ink); list-style: none; cursor: pointer; border-radius: var(--radius-s); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(var(--c-brand), var(--c-brand)) center / 12px 2px no-repeat, linear-gradient(var(--c-brand), var(--c-brand)) center / 2px 12px no-repeat, var(--c-paper-alt); transition: background-size var(--dur-fast) var(--ease-out); }
.faq__item[open] summary::after { background-size: 12px 2px, 2px 0, auto; }
.faq__item summary:hover { color: var(--c-brand); }
.faq__a { max-width: 68ch; padding: 0 var(--space-5) 24px 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink-soft); }

/* ---------- call-to-action band (home #start) ---------- */
.cta-band .stage { aspect-ratio: 16 / 10; box-shadow: 0 0 0 1px var(--c-line-night), var(--shadow-l); }
.cta-band .stage > video { object-position: var(--focus, 50% 50%); }
.cta-band__copy { display: grid; gap: var(--space-3); justify-items: start; }
.cta-band h2 { font-size: var(--fs-h2); color: var(--c-on-night); max-width: 16ch; }
.cta-band__line { font-size: var(--fs-lead); line-height: 1.5; color: var(--c-on-night-soft); max-width: 46ch; }
.cta-band .formbox { margin-top: var(--space-2); }
.cta-band__call { font-size: var(--fs-ui); color: var(--c-on-night-soft); }
.cta-band__call a { font-weight: 600; }
@media (max-width: 959px) { .cta-band__copy { justify-items: stretch; } .cta-band .formbox { max-width: none; } }

/* ---------- the exit popup (kit dialog) ---------- */
.exit { width: min(880px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--c-ink); overflow: visible; }
.exit:focus-visible, .lightbox:focus-visible { box-shadow: none; } /* the dialog itself holds the focus only until the first Tab */
.exit::backdrop { background: color-mix(in srgb, var(--c-night) 62%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.exit__in { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); overflow: hidden; border-radius: var(--radius-xl); background: var(--c-paper); box-shadow: var(--shadow-l); opacity: 0; transform: translateY(12px); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.exit[data-kit-on] .exit__in { opacity: 1; transform: none; }
.exit__photo { position: relative; min-height: 100%; background: var(--g-night); }
.exit__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.exit__panel { padding: 56px 44px 40px; }
.exit__title { font-size: var(--fs-scene-xl); line-height: 1.05; color: var(--c-ink); padding-right: var(--space-4); }
.exit__line { margin: 12px 0 var(--space-4); font-size: var(--fs-body); line-height: 1.5; color: var(--c-ink-soft); }
.exit__form .field { margin-bottom: var(--space-3); }
.exit__alt { margin-top: var(--space-3); font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-soft); }
.exit__alt a { font-weight: 600; }
.exit__close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--c-paper-alt); color: var(--c-ink); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.exit__close:hover { background: var(--c-ice); }
.exit__close:focus-visible { border-radius: 50%; }
.exit__close .icon { width: 20px; height: 20px; }
@media (max-width: 639px) { .exit__in { grid-template-columns: 1fr; } .exit__photo { display: none; } .exit__panel { padding: 44px 22px 26px; } }
@media (prefers-reduced-motion: reduce) { .exit__in { transform: none; } }

/* ---------- the call bar on the phone (kit) ---------- */
.callbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 8px; border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-l); transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); transition: transform var(--dur-med) var(--ease-out); }
.callbar[data-kit-on] { transform: none; }
.callbar__call { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--c-ice); font: 600 var(--fs-ui)/1 var(--font-ui); color: var(--c-ink); text-decoration: none; }
.callbar__call:hover { color: var(--c-ink); }
.callbar__call .icon { width: 18px; height: 18px; color: var(--c-brand); }
.callbar__call:focus-visible { border-radius: var(--radius-pill); }
.callbar .btn { height: 48px; padding: 0 16px; }
@media (min-width: 900px) { .callbar { display: none; } }

/* ---------- the video lightbox ---------- */
.lightbox { width: min(1100px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; }
.lightbox::backdrop { background: color-mix(in srgb, var(--c-night) 86%, transparent); }
.lightbox__in { position: relative; padding-top: 56px; }
.lightbox__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-l); background: var(--c-night); box-shadow: var(--shadow-l); }
.lightbox__frame img, .lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.lightbox__close { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--c-paper); color: var(--c-ink); cursor: pointer; }
.lightbox__close:focus-visible { border-radius: 50%; }
.lightbox__close .icon { width: 22px; height: 22px; }