/* ==========================================================================
   Goretii Designs: main stylesheet (layout + components), design v2
   Depends on tokens.css (load first). No raw colors here: every color, font,
   size, radius, shadow and duration is a token from tokens.css.
   1. Base  2. Layout & surfaces  3. Components  4. Header & menu
   5. Home sections  6. Inner pages  7. Forms  8. Footer
   ========================================================================== */

/* 1. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-family: var(--font-body);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--c-deep);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (max-width: 767.98px) { body { padding-bottom: calc(var(--cta-bar-h) + env(safe-area-inset-bottom, 0px)); } }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--c-selection-bg); color: var(--c-selection-fg); }

h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; }
h1, .t-h1 { font-size: var(--fs-h1); font-weight: var(--fw-display); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); max-width: 16ch; }
h2, .t-h2 { font-size: var(--fs-h2); font-weight: var(--fw-display); line-height: var(--lh-heading); letter-spacing: var(--ls-h2); max-width: 20ch; }
h3, .t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-heading-sm); line-height: 1.2; letter-spacing: var(--ls-h3); max-width: 28ch; }
h4, .t-h4 { font-size: var(--fs-h4); font-weight: var(--fw-heading-sm); line-height: 1.3; letter-spacing: var(--ls-h4); }
p, li { text-wrap: pretty; }
p { max-width: var(--measure); }
strong, b { font-weight: var(--fw-semibold); }
.t-lead { font-size: var(--fs-lead); line-height: 1.6; letter-spacing: -0.005em; color: var(--fg-muted); max-width: var(--measure-lead); }
.t-small { font-size: var(--fs-small); line-height: 1.55; }
.t-muted { color: var(--fg-muted); }
.tabular { font-variant-numeric: tabular-nums; }
.t-numeral { font-family: var(--font-display); font-weight: var(--fw-accent); font-size: var(--fs-numeral); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--numeral); }
.accent-word, .accent-italic {
  font-family: var(--font-serif);
  font-style: var(--font-accent-style);
  font-weight: var(--fw-accent);
  letter-spacing: -0.02em;
  padding-inline-end: 0.04em;
  color: var(--accent-italic);
}
.prose a, a.inline-link { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.prose a:hover, a.inline-link:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--c-light); color: var(--c-deep);
  font-weight: var(--fw-semibold); text-decoration: none;
  border-radius: var(--radius-md);
  transform: translate3d(0, -200%, 0);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 3px solid var(--c-accent); outline-offset: 2px; }
main:focus { outline: none; }

/* 2. Layout & surfaces ---------------------------------------------------- */
.theme-paper, .theme-sunken, .theme-ink, .theme-ink-2, .theme-accent,
.surface-mist, .surface-white, .surface-navy, .surface-navy-2 { background: var(--bg-fill); color: var(--fg); }
.container { width: min(100% - 2 * var(--pad-x), var(--container)); margin-inline: auto; }
.container-wide { width: min(100% - 2 * var(--pad-x), var(--container-wide)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--pad-x), var(--container-narrow)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-y); overflow: clip; isolation: isolate; }
.section--tight { padding-block: var(--section-y-tight); }
.section-head { display: grid; gap: var(--space-m); margin-bottom: var(--stack-heading); justify-items: start; }
@media (min-width: 1024px) {
  .section-head--split { grid-template-columns: 7fr 5fr; align-items: end; column-gap: calc(var(--gutter) * 2); }
  .section-head--split > .eyebrow { grid-column: 1 / -1; }
}
.center-row { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); align-items: center; margin-top: var(--space-2xl); }
.center-row p { font-size: var(--fs-lead); letter-spacing: -0.01em; }

/* Navy atmosphere kit: grid, two glow orbs, pointer glow, grain */
.atmos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.atmos__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(to right, var(--grid-line-ink) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line-ink) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 30%, transparent 100%);
}
.atmos__glow { position: absolute; border-radius: 50%; }
.atmos__glow--a { width: 56vmax; height: 56vmax; top: -22vmax; right: -14vmax; background: radial-gradient(circle, var(--glow-accent) 0%, transparent 70%); }
.atmos__glow--b { width: 64vmax; height: 64vmax; bottom: -30vmax; left: -18vmax; background: radial-gradient(circle, var(--glow-support) 0%, transparent 70%); }
.atmos__grain { position: absolute; inset: 0; opacity: var(--grain-opacity); background-image: var(--grain); background-size: 160px 160px; }
.atmos__pointer {
  position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow-sky-soft), transparent 65%);
  opacity: 0; transform: translate3d(var(--gx, 50vw), var(--gy, 40vh), 0);
  transition: opacity var(--dur-4) linear;
}
.has-pointer .atmos__pointer { opacity: 1; }

.rule { height: 1px; border: 0; margin: 0; background: var(--rule); transform-origin: left center; }
.rule--gold { display: block; width: 64px; height: 1px; background: var(--hairline-gold); transform-origin: left center; }

/* 3. Components ----------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); line-height: 1.2;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--accent-text);
  max-width: none;
}
.eyebrow::before { content: ""; width: var(--eyebrow-line-w); height: 1px; background: var(--eyebrow-line); flex: none; }
.eyebrow__index { color: var(--fg-subtle); order: -1; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 30px; padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--badge-border);
  background: var(--badge-bg); color: var(--badge-fg);
  font: var(--fw-semibold) var(--fs-eyebrow)/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); flex: none; }
.badge--sample { background: var(--c-deep); color: var(--c-light); border-color: var(--c-deep-line); box-shadow: 0 0 0 1px rgb(var(--white-rgb) / 0.12); }
.badge--sample .badge__dot { background: var(--c-gold); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); list-style: none; margin: 0; padding: 0; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--rule); background: var(--bg-soft); color: var(--fg); font: var(--fw-medium) var(--fs-small)/1 var(--font-body); }

/* Buttons: primary (glow halo + sheen + lift), luxe, secondary, link */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  font: var(--fw-semibold) var(--fs-button)/1 var(--font-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--lift, 0px)), 0) scale(var(--press, 1));
  transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-2) linear, border-color var(--dur-2) linear, color var(--dur-2) linear;
}
.btn--sm { min-height: 44px; padding: 0 18px; font-size: var(--fs-small); }
.btn--lg { min-height: 60px; padding: 0 30px; }
@media (max-width: 479.98px) { .btn--block { width: 100%; } }
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); box-shadow: var(--shadow-lift); }
.btn--luxe { background: var(--btn-luxe-bg); color: var(--btn-luxe-fg); box-shadow: var(--shadow-navy); }
.btn--secondary { background: transparent; color: var(--fg); border-color: var(--btn-secondary-border); }
.btn--primary::before, .btn--luxe::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: var(--glow-sky); opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
}
.btn--primary::after, .btn--luxe::after {
  content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none;
  background: var(--sheen); transform: translate3d(-120%, 0, 0);
}
.btn__label, .btn__arrow, .btn__lead, .btn__spinner { position: relative; z-index: 2; }
.btn__arrow { flex: none; transition: transform var(--dur-3) var(--ease-out); }
.btn__lead { width: 18px; height: 18px; flex: none; fill: currentColor; } /* lead icons (phone) follow the button label color */
a[href^="mailto:"] .btn__lead { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* email icon is an outline */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { --lift: calc(var(--btn-lift) * -1); }
  .btn--primary:hover { background: var(--btn-primary-bg-hover); }
  .btn--primary:hover::before, .btn--luxe:hover::before { opacity: 1; }
  .btn--primary:hover::after, .btn--luxe:hover::after { transform: translate3d(120%, 0, 0); transition: transform var(--dur-sheen) var(--ease-out); }
  .btn:hover .btn__arrow { transform: translate3d(var(--arrow-nudge), 0, 0); }
  .btn--secondary:hover { background: var(--bg-soft); border-color: var(--fg); }
}
.btn:active { --press: 0.98; --lift: 0px; transition-duration: var(--dur-1); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn:focus-visible .btn__arrow { transform: translate3d(var(--arrow-nudge), 0, 0); }
.btn:is([disabled], [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn__spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.btn[aria-busy="true"] .btn__spinner { display: inline-block; animation: gd-spin 700ms linear infinite; }
.btn[aria-busy="true"] .btn__arrow { display: none; }
.btn--link, .btn--ghost { min-height: 44px; padding: 0; background: none; color: var(--accent-text); border: 0; overflow: visible; box-shadow: none; }
.btn--link .btn__label, .btn--ghost .btn__label { position: relative; }
.btn--link .btn__label::after, .btn--ghost .btn__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur-4) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn--link:hover .btn__label::after, .btn--ghost:hover .btn__label::after { transform: scaleX(1); transform-origin: left center; } }
.btn--link:focus-visible .btn__label::after { transform: scaleX(1); }

.link { position: relative; color: inherit; text-decoration: none; display: inline-block; padding-block: 10px; }
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur-4) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .link:hover::after { transform: scaleX(1); transform-origin: left center; } }
.link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }
.link[aria-current="page"]::after { transform: scaleX(1); background: var(--signal); height: 2px; }

/* Cards: light (lift), glass (navy, gradient hairline), tilt (shine) */
.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
  box-shadow: var(--card-shadow);
  transition: transform var(--dur-3) var(--ease-out);
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: var(--card-shadow-hover); opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card--lift:hover, .card--interactive:hover { transform: translate3d(0, calc(var(--hover-lift) * -1), 0); }
  .card--lift:hover::after, .card--interactive:hover::after { opacity: 1; }
}
.card--glass, .theme-ink .card:not(.theme-paper), .theme-ink-2 .card:not(.theme-paper) {
  background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, var(--hairline-glass) border-box;
  border: 1px solid transparent; box-shadow: var(--shadow-navy); color: var(--fg);
}
.card--glass::after, .theme-ink .card:not(.theme-paper)::after, .theme-ink-2 .card:not(.theme-paper)::after { display: none; }
.card--tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform var(--dur-4) var(--ease-out); }
.card--tilt.is-tilting { transition: none; }
.card__shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 4; }
.card__shine::before {
  content: ""; position: absolute; width: 60%; aspect-ratio: 1; left: -30%; top: -30%;
  background: radial-gradient(circle, var(--card-shine), transparent 65%);
  transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0); opacity: var(--so, 0); transition: opacity var(--dur-3) linear;
}

.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-chip { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--icon-chip-bg); color: var(--icon-chip-fg); border: 1px solid var(--rule); flex: none; }
.icon-chip .icon { width: 20px; height: 20px; }

/* Image slots: styled frame shows when an image is missing */
.img-slot { position: relative; overflow: hidden; background: var(--frame-fallback); }
.img-slot picture, .img-slot > img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.img-slot img { width: 100%; height: 100%; object-fit: cover; color: transparent; font-size: 0; }
.img-slot.is-missing picture { visibility: hidden; }
.img-slot--bare { background: none; }
.img-slot--bare.is-missing { display: none; }
.img-slot--art { background: radial-gradient(90% 70% at 70% 20%, var(--glow-sky-soft), transparent 60%), radial-gradient(80% 60% at 20% 90%, var(--glow-support), transparent 60%), var(--gradient-navy); }
.img-slot--still { background: radial-gradient(70% 60% at 80% 10%, var(--mist-2), transparent 70%), linear-gradient(160deg, var(--white), var(--mist) 45%, var(--mist-2)); border: 1px solid var(--line); }
.skel { position: absolute; container-type: size; inset: 0; display: grid; align-content: start; gap: 5cqh; padding: 7% 8%; }
.skel i { display: block; border-radius: var(--radius-xs); background: var(--skeleton-block); }
.skel i:nth-child(1) { height: 5cqh; width: 28%; background: var(--skeleton-strong); }
.skel i:nth-child(2) { height: 8cqh; width: 78%; background: var(--skeleton-strong); }
.skel i:nth-child(3) { height: 8cqh; width: 58%; background: var(--skeleton-strong); opacity: 0.85; }
.skel i:nth-child(4) { height: 3cqh; width: 64%; }
.skel i:nth-child(5) { height: 7cqh; width: 30%; background: var(--c-accent); border-radius: var(--radius-s); }
.skel i:nth-child(6) { height: 26cqh; width: 100%; opacity: 0.7; }

/* Device frames */
.device { position: relative; border-radius: 16px; background: var(--c-deep-2); box-shadow: var(--shadow-navy); overflow: hidden; outline: 1px solid rgb(var(--white-rgb) / 0.10); outline-offset: -1px; }
.device__bar { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--c-deep-3); }
.device__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-deep-line); }
.device__url { flex: 1; max-width: 40%; height: 10px; margin-inline: auto; border-radius: var(--radius-pill); background: var(--c-deep-line); }
.device__screen { position: relative; overflow: hidden; background: var(--frame-fallback); }
.device--browser .device__screen { aspect-ratio: 16 / 9; }
.device--1610 .device__screen { aspect-ratio: 16 / 10; }
.device__screen img { object-fit: cover; object-position: top center; }
.device--phone { border-radius: var(--radius-phone); padding: 6px; }
.device--phone .device__screen { aspect-ratio: 9 / 19.5; border-radius: 20px; }
.device--phone .device__screen img { object-position: top; }
.device--phone .skel { padding: 16% 10%; gap: 4cqh; }

/* 4. Header & navigation -------------------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 800; height: var(--header-h-tall); color: var(--fg); transition: transform var(--dur-4) var(--ease-out); }
@media (max-width: 1023.98px) { .site-header { height: var(--header-h); } }
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c-deep);
  border-bottom: 1px solid var(--c-deep-line);
  opacity: 0; transform-origin: top center;
  transition: opacity var(--dur-2) linear, transform var(--dur-2) var(--ease-out);
}
@media (min-width: 1024px) {
  .site-header::before { background: var(--header-scrolled-bg); -webkit-backdrop-filter: var(--header-blur); backdrop-filter: var(--header-blur); }
  .site-header.is-scrolled::before { transform: scaleY(0.8); }
  .site-header.is-scrolled .site-header__bar { transform: translate3d(0, -8px, 0); }
}
.site-header.is-scrolled::before, .site-header.is-solid::before, .site-header.is-menu-open::before { opacity: 1; }
.site-header.is-menu-open::before { background: var(--c-deep); transform: none; }
.site-header.is-hidden { transform: translate3d(0, -100%, 0); }
.site-header:focus-within { transform: none; }
.site-header__bar { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); transition: transform var(--dur-2) var(--ease-out); }
.scroll-progress { display: none; }

.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; flex: none; }
.brand:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.wordmark { display: inline-flex; align-items: baseline; gap: 0.22em; font-family: var(--font-display); font-size: var(--fs-wordmark); letter-spacing: var(--ls-wordmark); line-height: 1; color: var(--fg); }
.wordmark__main { font-weight: var(--fw-display); }
.wordmark__sub { font-weight: var(--fw-accent); font-style: italic; color: var(--accent-italic); transition: transform var(--dur-3) var(--ease-spring); display: inline-block; }
@media (hover: hover) and (pointer: fine) { .brand:hover .wordmark__sub { transform: translate3d(2px, 0, 0); } }
.wordmark--lockup { flex-direction: column; align-items: flex-start; gap: 0; line-height: 0.95; }
.wordmark__rule { width: 64px; height: 1px; margin-bottom: 0.35em; background: var(--hairline-gold); }

.site-nav { display: none; }
.site-nav__list { display: flex; gap: clamp(1rem, 2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.site-nav .link { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--fg-muted); transition: color var(--dur-2) linear; }
.site-nav .link:hover, .site-nav .link[aria-current="page"] { color: var(--fg); }
.site-header__call { display: none; font-size: var(--fs-small); font-weight: var(--fw-medium); white-space: nowrap; color: var(--fg-muted); }
.site-header__cta { display: none !important; }
@media (min-width: 1024px) {
  .site-nav { display: block; margin-left: auto; }
  .site-header__cta { display: inline-flex !important; }
  .nav-toggle { display: none !important; }
}
@media (min-width: 1180px) { .site-header__call { display: inline-block; } }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; min-width: 44px; padding: 0 16px;
  background: transparent; color: var(--fg);
  border: 1px solid var(--c-deep-field); border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: var(--fw-medium);
}
.nav-toggle__icon { position: relative; width: 18px; height: 10px; display: inline-block; }
.nav-toggle__icon span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform var(--dur-3) var(--ease-out); }
.nav-toggle__icon span:first-child { top: 0; }
.nav-toggle__icon span:last-child { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:first-child { transform: translate3d(0, 4.25px, 0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:last-child { transform: translate3d(0, -4.25px, 0) rotate(-45deg); }

html:not(.js) .nav-toggle { display: none; }
@media (max-width: 1023.98px) {
  html:not(.js) .site-header { position: absolute; height: auto; }
  html:not(.js) .site-header__bar { flex-wrap: wrap; padding-block: 0.5rem; row-gap: 0; }
  html:not(.js) .site-nav { display: block; width: 100%; }
  html:not(.js) .site-nav__list { flex-wrap: wrap; gap: 0 1.25rem; }
  html:not(.js) .hero, html:not(.js) .page-hero, html:not(.js) .contact-hero { padding-top: calc(var(--header-h) + 5rem); }
}

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 790;
  display: flex; flex-direction: column; gap: var(--space-l);
  padding: var(--space-l) var(--pad-x) calc(var(--space-l) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  color: var(--fg);
  visibility: hidden; opacity: 0; transform: translate3d(0, -16px, 0);
  transition: opacity 250ms var(--ease-out-quart), transform 250ms var(--ease-out-quart), visibility 0s linear 250ms;
}
.mobile-menu.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 250ms var(--ease-out-quart), transform 250ms var(--ease-out-quart), visibility 0s; }
.mobile-menu__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.mobile-menu__list li { border-bottom: 1px solid var(--rule); }
.mobile-menu__list a {
  display: flex; align-items: center; justify-content: space-between; min-height: 64px;
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-heading-sm); letter-spacing: var(--ls-h2);
  text-decoration: none; color: var(--fg);
}
.mobile-menu__list a[aria-current="page"] { color: var(--accent-italic); }
.mobile-menu__list a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.menu-index { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); color: var(--fg-subtle); }
.mobile-menu__actions { display: grid; gap: var(--space-s); }
.mobile-menu__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); }
.mobile-menu__pair .btn { padding: 0 12px; }
.mobile-menu__note { color: var(--fg-muted); font-size: var(--fs-small); }
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }
html.menu-open { overflow: hidden; }

.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 780;
  display: grid; grid-template-columns: 2fr 3fr; gap: 10px;
  padding: 8px var(--pad-x) calc(8px + env(safe-area-inset-bottom, 0px));
  min-height: var(--cta-bar-h);
  background: var(--cta-bar-bg);
  border-top: 1px solid var(--c-deep-line);
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) linear, visibility 0s linear var(--dur-3);
}
.cta-bar .btn { min-height: 48px; padding: 0 10px; width: 100%; gap: 8px; }
.cta-bar .btn--secondary { --fg: var(--white); --bg-soft: rgb(var(--white-rgb) / 0.04); } /* light label on the navy bar */
.cta-bar .btn__lead { fill: currentColor; }
.js .cta-bar { transform: translate3d(0, 110%, 0); opacity: 0; visibility: hidden; }
.js .cta-bar.is-visible { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
@media (min-width: 768px) { .cta-bar { display: none; } }

/* 5. Home sections -------------------------------------------------------- */
.hero { position: relative; overflow: clip; isolation: isolate; padding-top: calc(var(--header-h-tall) + var(--space-2xl)); padding-bottom: var(--section-y-tight); }
@media (min-width: 1024px) { .hero { min-height: 100svh; display: grid; align-items: center; } }
.hero__layout { position: relative; z-index: 1; display: grid; gap: var(--space-2xl); }
@media (min-width: 1024px) { .hero__layout { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: center; gap: var(--space-xl); } }
.hero__copy { display: grid; gap: var(--space-m); justify-items: start; align-content: center; min-width: 0; }
.hero__rule { margin-bottom: var(--space-2xs); }
.hero__title { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); max-width: 13ch; }
.rotator { display: inline-grid; vertical-align: bottom; max-width: 100%; }
.rotator__stack { display: inline-grid; overflow: hidden; overflow: clip; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.rotator__word {
  grid-area: 1 / 1; white-space: nowrap; color: var(--accent-italic);
  font-family: var(--font-serif); font-style: var(--font-accent-style); font-weight: var(--fw-accent); letter-spacing: -0.02em;
  padding-inline-end: 0.06em;
}
.rotator__word:not(.is-active) { visibility: hidden; }
.hero__lead { max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); margin-top: var(--space-2xs); }
@media (max-width: 639.98px) { .hero__actions .btn--primary { width: 100%; } }
.hero__micro { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--fg-muted); font-size: var(--fs-small); max-width: none; }
.hero__micro a { color: var(--accent-italic); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.hero__micro a:hover { color: var(--c-accent-hover); text-decoration-thickness: 2px; }

.hero__visual { position: relative; margin: 0; width: min(100%, 460px); justify-self: center; min-width: 0; }
@media (min-width: 768px) { .hero__visual { width: min(100%, 520px); } }
@media (min-width: 1024px) { .hero__visual { justify-self: end; width: min(100%, 540px); } }
.hero__art-wrap { position: relative; aspect-ratio: 4 / 5; }
.hero__art { width: 100%; height: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-navy); outline: 1px solid rgb(var(--white-rgb) / 0.06); outline-offset: -1px; }
.device-wrap { position: absolute; z-index: 2; }
.device-wrap--browser { left: 5%; top: 16%; width: 78%; }
.device-wrap--phone { right: 4%; bottom: 14%; width: 33%; z-index: 3; }
@media (min-width: 640px) { .device-wrap--browser { left: -8%; width: 80%; } .device-wrap--phone { width: 30%; } }
@media (min-width: 1024px) { .device-wrap--browser { left: -16%; top: 18%; width: 86%; } .device-wrap--phone { right: 4%; bottom: 10%; width: 29%; } }
.hero__badge { position: absolute; top: 18px; right: 18px; z-index: 4; }
.hero__caption { margin-top: var(--space-s); font-size: var(--fs-small); color: var(--fg-subtle); max-width: 44ch; }

.page-hero { position: relative; overflow: clip; isolation: isolate; padding-top: calc(var(--header-h-tall) + clamp(3rem, 1.5rem + 6vw, 7rem)); padding-bottom: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
@media (min-width: 1024px) { .page-hero { min-height: 56svh; display: grid; align-items: end; } }
.page-hero--compact { padding-bottom: var(--section-y-tight); }
.page-hero__inner { display: grid; gap: var(--space-2xl); align-items: end; }
.page-hero__copy { display: grid; gap: var(--space-m); justify-items: start; }
.page-hero h1 { max-width: 18ch; }
@media (min-width: 1024px) { .page-hero--split .page-hero__inner { grid-template-columns: 7fr 5fr; column-gap: calc(var(--gutter) * 2); align-items: center; } }
.page-hero__side { width: min(100%, 460px); justify-self: center; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-2xs); }
.page-hero__ghost {
  position: absolute; right: -0.06em; bottom: -0.18em; z-index: -1; pointer-events: none;
  font: 800 clamp(6rem, 2rem + 16vw, 17.5rem)/1 var(--font-display); letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px var(--c-deep-line); white-space: nowrap;
}

.marquee { position: relative; overflow: clip; border-block: 1px solid var(--rule); padding-block: var(--space-l); }
.marquee__viewport { overflow: hidden; padding-block: var(--space-2xs); }
.marquee__track { display: flex; width: max-content; }
.marquee__list { display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; flex: none; }
.marquee__list li { display: inline-flex; align-items: center; white-space: nowrap; line-height: 1.2; }
@media (max-width: 1023.98px) {
  .marquee__viewport { padding-inline: var(--pad-x); }
  .marquee__track { width: auto; }
  .marquee__list { flex-wrap: wrap; gap: 10px; justify-content: center; flex: 1 1 auto; }
  .marquee__list[aria-hidden="true"] { display: none; }
  .marquee__list li { min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--rule); color: var(--fg-muted); font-size: var(--fs-small); font-weight: var(--fw-medium); }
  .marquee__viewport--alt .marquee__list li { font-family: var(--font-serif); font-style: italic; font-weight: var(--fw-accent); color: var(--accent-italic); }
  .marquee__controls { display: none !important; }
}
@media (min-width: 1024px) {
  .marquee__viewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee__list li { font: var(--fw-heading-sm) var(--fs-marquee)/1.2 var(--font-display); letter-spacing: var(--ls-h3); color: var(--fg); }
  .marquee__list li::after { content: ""; width: 6px; height: 6px; margin-inline: 2.2rem; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 12px var(--c-accent); flex: none; }
  .marquee__viewport--alt .marquee__list li { font-style: italic; font-weight: var(--fw-accent); color: var(--fg-muted); }
}
.marquee__controls { display: flex; justify-content: flex-end; align-items: center; padding-top: var(--space-2xs); }
.motion-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: var(--radius-pill); background: transparent; border: 1px solid var(--field-border);
  color: var(--fg); font-size: var(--fs-small); font-weight: var(--fw-medium);
}
.motion-btn svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .motion-btn:hover { border-color: var(--fg); } }
.motion-btn .icon-play, .is-paused .motion-btn .icon-pause { display: none; }
.is-paused .motion-btn .icon-play { display: block; }
html:not(.js) .motion-btn { display: none; }

.problem { display: grid; gap: var(--space-xl); }
@media (min-width: 1024px) { .problem { grid-template-columns: 6fr 5fr; column-gap: calc(var(--gutter) * 3); align-items: center; } }
.problem__intro { display: grid; gap: var(--space-m); justify-items: start; }
.callouts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); }
.callout { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-m); align-items: start; padding: var(--space-m) var(--space-l); }
.callout__num { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-accent); font-size: var(--fs-h3); line-height: 1; color: var(--accent-italic); width: 1.4em; }
.callout h3 { font-size: var(--fs-h4); }
.callout p { color: var(--fg-muted); margin-top: 4px; }

.included__bg { position: absolute; inset: 0; z-index: -1; opacity: 0.18; }
.included__grid { display: grid; gap: var(--space-2xl); }
@media (min-width: 1024px) {
  .included__grid { grid-template-columns: 5fr 7fr; column-gap: calc(var(--gutter) * 2.5); align-items: start; }
  .included__intro { position: sticky; top: calc(var(--header-h) + 3rem); }
}
.included__intro { display: grid; gap: var(--space-l); justify-items: start; }
.included__intro .section-head { margin-bottom: 0; }
.pages-card { display: grid; gap: var(--space-s); padding: var(--space-m) var(--space-l); width: 100%; }
.pages-card__label { font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-subtle); }
.included__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); }
.features { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 768px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gutter) * 1.5); } }
.feature { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: var(--space-m); align-items: start; padding-block: var(--space-l); border-top: 1px solid var(--rule); }
.feature::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--gradient-sky); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-4) var(--ease-out); }
.feature__ring { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rule); background: var(--bg-soft); color: var(--accent-text); transition: transform var(--dur-4) var(--ease-spring); }
.feature__ring .icon { width: 20px; height: 20px; }
.feature h3 { font-size: var(--fs-h4); }
.feature p { color: var(--fg-muted); margin-top: 6px; }
@media (hover: hover) and (pointer: fine) {
  .feature:hover::before { transform: scaleX(1); }
  .feature:hover .feature__ring { transform: translate3d(0, -3px, 0) rotate(-6deg); }
}

.industries { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 0.2em; font-family: var(--font-display); font-size: clamp(1.75rem, 1.1rem + 3vw, 3.75rem); font-weight: var(--fw-display); letter-spacing: var(--ls-h2); line-height: 1.15; }
.industries li { display: inline-flex; align-items: center; }
.industries li::after { content: ""; width: 0.14em; height: 0.14em; border-radius: 50%; background: var(--signal); margin-inline: 0.4em; flex: none; }
.industries li:last-child::after { display: none; }
.industries span { display: inline-block; transition: color var(--dur-2) linear, transform var(--dur-3) var(--ease-out); }
.industries li:nth-child(3n+2) span { font-style: italic; font-weight: var(--fw-accent); color: var(--accent-italic); }
@media (hover: hover) and (pointer: fine) { .industries li:hover span { color: var(--accent-text); transform: translate3d(0, -4px, 0); } }

.process { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); }
.process__track { position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem; width: 1px; background: var(--rule); overflow: hidden; }
.process__fill { position: absolute; inset: 0; background: var(--gradient-sky); transform-origin: top center; }
.step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-m); padding-left: var(--space-m); align-items: start; align-content: start; }
.step__num { font-size: var(--fs-h2); display: inline-flex; min-width: 1.3em; }
.step__body h3 { font-size: var(--fs-h4); padding-top: 0.25em; }
.step__body p { color: var(--fg-muted); margin-top: var(--space-2xs); }
.odo { display: inline-block; height: 1em; overflow: hidden; overflow: clip; line-height: 1; vertical-align: top; }
.odo__strip { display: flex; flex-direction: column; word-spacing: 100vw; width: 0.62em; text-align: center; line-height: 1; transform: translate3d(0, calc(var(--n) * -10%), 0); }
@media (min-width: 1024px) {
  .process { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); padding-top: var(--space-l); }
  .process__track { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .process__fill { transform-origin: left center; }
  .step { grid-template-columns: 1fr; padding-left: 0; gap: var(--space-s); }
  .step__num { font-size: var(--fs-numeral); }
}
.process-foot { margin-top: var(--space-2xl); display: flex; flex-wrap: wrap; gap: var(--space-m) var(--space-l); align-items: center; justify-content: space-between; border-top: 1px solid var(--rule); padding-top: var(--space-l); }
.process-foot p { font-size: var(--fs-lead); letter-spacing: -0.01em; }

.concepts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--section-y); }
.concept { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 1024px) {
  .concept { grid-template-columns: 7fr 5fr; column-gap: calc(var(--gutter) * 2.5); }
  .concept:nth-child(even) { grid-template-columns: 5fr 7fr; }
  .concept:nth-child(even) .concept__frame { order: 2; }
}
.concept__frame { position: relative; padding: 14px 8% 10% 0; min-width: 0; }
.concept__tilt { position: relative; border-radius: var(--radius-lg); }
.concept__badge { position: absolute; top: -14px; left: 18px; z-index: 5; }
.concept__phone { position: absolute; right: -8%; bottom: -12%; width: 24%; z-index: 3; }
.concept .device__screen picture, .teaser .device__screen picture { transition: transform 1.6s var(--ease-out); transform-origin: 50% 0; }
@media (hover: hover) and (pointer: fine) {
  .concept:hover .device--browser .device__screen picture, .concept:focus-within .device--browser .device__screen picture,
  .teaser:hover .device__screen picture, .teaser:focus-within .device__screen picture { transform: scale(1.035); }
}
.concept__body { display: grid; gap: var(--space-s); justify-items: start; min-width: 0; }
.concept__ghost { position: absolute; right: 0; top: -0.45em; z-index: -1; font: var(--fw-accent) clamp(6rem, 3rem + 8vw, 11rem)/1 var(--font-display); letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px var(--c-deep-line); pointer-events: none; }
.concept__type { font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-text); }
.concept h3 { font-size: var(--fs-h3); }
.fictional { font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-regular); letter-spacing: 0; color: var(--fg-muted); white-space: nowrap; }
.concept__note { color: var(--fg-muted); font-size: var(--fs-small); }
.ticks { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; color: var(--fg-muted); }
.ticks .icon { width: 18px; height: 18px; color: var(--support); margin-top: 4px; }

.split { display: grid; gap: var(--space-xl); }
@media (min-width: 1024px) {
  .split { grid-template-columns: 5fr 7fr; column-gap: calc(var(--gutter) * 2.5); align-items: start; }
  .split__sticky { position: sticky; top: calc(var(--header-h) + 3rem); }
}
.split__sticky { display: grid; gap: var(--space-m); justify-items: start; }
.points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.point { position: relative; display: grid; grid-template-columns: 3rem 1fr auto; gap: var(--space-2xs) var(--space-m); padding-block: var(--space-l); border-bottom: 1px solid var(--rule); align-items: baseline; }
.point__num { font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); color: var(--accent-text); }
.point h3 { font-size: var(--fs-h4); grid-column: 2; }
.point p { color: var(--fg-muted); grid-column: 2; }
.point__arrow { grid-column: 3; grid-row: 1; color: var(--accent-text); transition: transform var(--dur-3) var(--ease-out); }
.point__arrow svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .point:hover .point__arrow { transform: translate3d(var(--arrow-nudge), 0, 0); } }

.about-preview { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 1024px) { .about-preview { grid-template-columns: 5fr 6fr; column-gap: calc(var(--gutter) * 3); } }
.about-preview__art, .about-hero-art { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); max-width: 480px; }
.about-hero-art { border-radius: var(--radius-xl); }
.about-preview__place { position: absolute; left: var(--space-l); bottom: var(--space-l); z-index: 0; font: var(--fw-display) var(--fs-h2)/1 var(--font-display); letter-spacing: var(--ls-h2); color: var(--ink); }
.about-preview__place .accent-word { color: var(--blue-700); }
.img-slot.is-loaded .about-preview__place { display: none; }
.about-preview__text { display: grid; gap: var(--space-m); justify-items: start; }

.faq-wrap { display: grid; gap: var(--space-xl); }
@media (min-width: 1024px) { .faq-wrap { grid-template-columns: 4fr 7fr; column-gap: calc(var(--gutter) * 3); align-items: start; } .faq-wrap__head { position: sticky; top: calc(var(--header-h) + 3rem); } }
.faq-wrap .section-head { margin-bottom: 0; }
.faq-wrap__call { color: var(--fg-muted); }
.faq { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q { margin: 0; font-size: var(--fs-h4); max-width: none; line-height: 1.3; }
.faq__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
  min-height: 56px; padding: var(--space-m) 0;
  background: none; border: 0; text-align: left; color: var(--fg);
  font: inherit; letter-spacing: inherit; line-height: inherit;
}
.faq__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }
.faq__icon { position: relative; width: 36px; height: 36px; flex: none; border: 1px solid var(--field-border); border-radius: 50%; transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-2) linear, border-color var(--dur-2) linear; }
.faq__icon::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translate(-50%, -70%) rotate(45deg); }
.faq__btn[aria-expanded="true"] .faq__icon { transform: rotate(180deg); background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
@media (hover: hover) and (pointer: fine) { .faq__btn:hover .faq__icon { border-color: var(--fg); } }
.faq__a { padding: 0 3.5rem var(--space-l) 0; color: var(--fg-muted); }
.faq__a p + p { margin-top: var(--space-s); }
.faq__a a { color: var(--accent-text); text-underline-offset: 0.22em; }
.faq__a:not([hidden]) { animation: gd-fade-up var(--dur-3) var(--ease-out); }

.cta-band { position: relative; overflow: clip; isolation: isolate; padding-block: calc(var(--section-y) * 1.25); text-align: center; }
.aurora { position: absolute; inset: -20%; pointer-events: none; z-index: -1; }
.aurora::before, .aurora::after { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; }
.aurora::before { left: 5%; top: 10%; opacity: 0.30; background: radial-gradient(circle, var(--sky-500), transparent 65%); transform-origin: 70% 60%; }
.aurora::after { right: 0; bottom: 0; opacity: 0.22; background: radial-gradient(circle, var(--blue-400), transparent 65%); transform-origin: 30% 40%; }
.cta-band__inner { display: grid; gap: var(--space-m); justify-items: center; }
.cta-band__rule { margin-bottom: var(--space-2xs); }
.cta-band h2 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); max-width: 14ch; margin-inline: auto; }
.cta-band__lead { font-size: var(--fs-lead); color: var(--fg-muted); max-width: 44ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s); margin-top: var(--space-s); }
@media (max-width: 639.98px) { .cta-band__actions .btn { width: 100%; } }
.cta-band__note { font-size: var(--fs-small); color: var(--fg-subtle); }
.shimmer { position: relative; }

/* 6. Inner pages ---------------------------------------------------------- */
.service-main { display: grid; gap: var(--space-xl); }
@media (min-width: 1024px) { .service-main { grid-template-columns: 5fr 7fr; column-gap: calc(var(--gutter) * 2.5); align-items: start; } }
.service-main__intro { display: grid; gap: var(--space-m); justify-items: start; }
.page-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.page-list li { position: relative; isolation: isolate; display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-2xs) var(--space-s); padding: var(--space-l) var(--space-s); border-bottom: 1px solid var(--rule); }
.page-list__num { font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); color: var(--accent-text); padding-top: 0.7em; }
.page-list h3 { font-size: var(--fs-h3); }
.page-list p { grid-column: 2; color: var(--fg-muted); }
.page-list li::after { content: ""; position: absolute; inset: 0; background: var(--bg-soft); border-radius: var(--radius); z-index: -1; opacity: 0; transform: scale(0.98); transition: opacity var(--dur-3) linear, transform var(--dur-4) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .page-list li:hover::after { opacity: 1; transform: none; } }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; column-gap: calc(var(--gutter) * 1.5); }
.checklist.card { padding: var(--space-s) clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
@media (min-width: 768px) { .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checklist li { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-s); align-items: start; padding-block: var(--space-m); border-bottom: 1px solid var(--rule); line-height: 1.5; }
.check-icon { width: 28px; height: 28px; fill: none; }
.check-icon circle { stroke: var(--rule); stroke-width: 1.5; }
.check-icon path { stroke: var(--support); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.details { display: grid; gap: clamp(3.5rem, 2rem + 5vw, 7rem); list-style: none; margin: 0; padding: 0; }
.detail { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 768px) {
  .detail { grid-template-columns: 1fr 1fr; column-gap: calc(var(--gutter) * 2.5); }
  .detail:nth-child(even) .detail__art { order: 2; }
}
.detail__text { display: grid; gap: var(--space-s); }
.detail__kicker { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-text); font-weight: var(--fw-semibold); }
.detail__text p { color: var(--fg-muted); }
.detail__art {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; color: var(--fg);
  background: linear-gradient(var(--bg-sunken), var(--bg-sunken)) padding-box, var(--hairline-glass) border-box;
  border: 1px solid transparent; box-shadow: var(--shadow-navy);
}
.detail__art svg { width: 100%; height: 100%; }
.art-ink { fill: var(--fg); }
.art-accent { fill: var(--c-accent); }
.art-support { fill: var(--support); }
.art-line { fill: var(--rule); }
.art-raised { fill: var(--bg-raised); }
.art-stroke { fill: none; stroke: var(--fg); stroke-width: 2; }
.art-stroke-accent { fill: none; stroke: var(--c-accent); stroke-width: 2; }
.art-stroke-muted { fill: none; stroke: var(--rule); stroke-width: 1.5; }

.objections { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); }
@media (min-width: 1024px) { .objections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.objection { display: grid; gap: var(--space-s); align-content: start; }
.objection h3 { font-size: var(--fs-h4); }
.objection p { color: var(--fg-muted); }
.objection__mark { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-accent); font-size: 4rem; line-height: 1; height: 2.25rem; overflow: hidden; color: var(--accent-italic); }

.story { display: grid; gap: var(--space-xl); }
@media (min-width: 1024px) { .story { grid-template-columns: 7fr 5fr; column-gap: calc(var(--gutter) * 2.5); align-items: center; } }
.story__text { display: grid; gap: var(--space-m); justify-items: start; }
.story__panel { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-l); isolation: isolate; box-shadow: var(--shadow-float); }
@media (max-width: 1023.98px) { .story__panel { aspect-ratio: 16 / 10; } }
.story__label { font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-muted); max-width: none; }
.story__place { font: var(--fw-display) var(--fs-h2)/1 var(--font-display); letter-spacing: var(--ls-h2); max-width: none; }
.founder { display: grid; gap: var(--space-m); margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--rule); }
@media (min-width: 768px) { .founder { grid-template-columns: 1fr 2fr; column-gap: var(--gutter); } }
.founder__name { font: var(--fw-heading-sm) var(--fs-h3)/1.1 var(--font-display); letter-spacing: var(--ls-h3); }
.founder__title { color: var(--fg-muted); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; margin-top: var(--space-2xs); }
.founder__body { display: grid; gap: var(--space-s); }
.values { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); }
@media (min-width: 768px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.value { display: grid; gap: var(--space-s); align-content: start; }
.value__num { font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); color: var(--accent-text); }
.value h3 { font-size: var(--fs-h4); }
.value p { color: var(--fg-muted); }
.local-band { text-align: center; }
.local-band__inner { display: grid; gap: var(--space-l); justify-items: center; }
.local-line { font-size: var(--fs-h2); max-width: 22ch; margin-inline: auto; }
.local-band .t-lead { margin-inline: auto; }
.ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 40%; z-index: -1; pointer-events: none; }
.ridge path { fill: none; stroke: var(--blue-300); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.55; }
.ridge .ridge__far { opacity: 0.22; }

.contact-hero { position: relative; overflow: clip; isolation: isolate; padding-top: calc(var(--header-h-tall) + clamp(2.5rem, 1.5rem + 4vw, 5rem)); padding-bottom: var(--section-y); }
.contact-layout { display: grid; gap: var(--space-2xl); grid-template-areas: "intro" "form" "aside"; }
.contact-intro { grid-area: intro; display: grid; gap: var(--space-m); justify-items: start; }
.contact-intro h1 { max-width: 14ch; }
.form-card { grid-area: form; }
.contact-aside { grid-area: aside; display: grid; gap: var(--space-xl); align-content: start; }
@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); grid-template-areas: "intro form" "aside form"; grid-template-rows: auto 1fr; column-gap: calc(var(--gutter) * 2.5); align-items: start; }
}
.contact-aside h2 { font-size: var(--fs-h4); margin-bottom: var(--space-m); }
.next-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.next-steps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-s); align-items: baseline; padding-block: var(--space-s); border-bottom: 1px solid var(--rule); color: var(--fg-muted); }
.next-steps__num { font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); color: var(--accent-text); }
.next-steps strong { color: var(--fg); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-m); }
.contact-list li { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-s); align-items: center; }
.contact-list__label { display: block; font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-subtle); }
.contact-list__value { display: inline-block; font-size: var(--fs-lead); font-weight: var(--fw-medium); color: var(--fg); text-decoration: none; overflow-wrap: anywhere; padding-block: 4px; }
a.contact-list__value:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.contact-list__note { display: block; font-size: var(--fs-small); color: var(--fg-muted); }
.contact-more { margin-top: var(--space-l); color: var(--fg-muted); font-size: var(--fs-small); }

.legal { display: grid; gap: var(--space-m); max-width: 72ch; }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--space-l); }
.legal p, .legal li { color: var(--fg-muted); }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2xs); }
.legal a { color: var(--accent-text); text-underline-offset: 0.22em; }
.legal strong { color: var(--fg); }
.legal__meta { font-size: var(--fs-small); color: var(--fg-subtle); }

.notfound { min-height: 100svh; display: grid; align-items: center; position: relative; overflow: clip; isolation: isolate; padding-top: calc(var(--header-h-tall) + var(--space-xl)); padding-bottom: var(--space-2xl); }
.notfound__inner { display: grid; gap: var(--space-m); justify-items: start; }
.notfound__code { font: italic var(--fw-accent) var(--fs-giant)/0.85 var(--font-display); letter-spacing: -0.06em; color: var(--accent-italic); max-width: none; }
.notfound__links { display: flex; flex-wrap: wrap; gap: var(--space-s); }

/* 7. Forms ---------------------------------------------------------------- */
.form-card { background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--radius-xl); box-shadow: var(--shadow-navy); padding: clamp(1.5rem, 1rem + 2vw, 3rem); color: var(--fg); }
.form-card::after { display: none; }
.form-card__head { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-m); }
.form-card__head h2 { font-size: var(--fs-h3); }
.form-grid { display: grid; gap: var(--space-m); }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
.form-legend { font-size: var(--fs-small); color: var(--fg-muted); margin-bottom: var(--space-m); }
.field { display: grid; gap: var(--space-2xs); align-content: start; }
.field__label { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--fg); }
.field__req, .field__hint { font-weight: var(--fw-regular); color: var(--fg-muted); font-size: var(--fs-small); }
.field__hint { max-width: none; }
.field__error { display: flex; gap: 6px; align-items: flex-start; color: var(--error-text); font-size: var(--fs-small); font-weight: var(--fw-medium); max-width: none; }
.field__error svg { flex: none; margin-top: 2px; }
.field__error:not([hidden]) { animation: gd-fade var(--dur-2) linear; }
.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  font: var(--fw-regular) 1rem/1.4 var(--font-body);
  color: var(--fg); background: var(--field-bg);
  border: 1px solid var(--field-border); border-radius: var(--radius-md);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-2) linear;
}
.textarea { min-height: 136px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--fg-muted); opacity: 1; }
@media (hover: hover) { .input:hover, .select:hover, .textarea:hover { border-color: var(--fg-muted); } }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
[aria-invalid="true"].input, [aria-invalid="true"].select, [aria-invalid="true"].textarea { border: 2px solid var(--error-text); padding: 13px 15px; }
.input:-webkit-autofill { -webkit-text-fill-color: var(--fg); box-shadow: inset 0 0 0 100px var(--field-bg); }
.select-wrap { position: relative; }
.select-wrap::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select { padding-right: 44px; }
.counter { font-size: var(--fs-small); color: var(--fg-muted); text-align: right; max-width: none; }
.counter.is-near { color: var(--error-text); font-weight: var(--fw-medium); }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-summary { padding: var(--space-m); border: 2px solid var(--error-text); border-radius: var(--radius); background: var(--bg-raised); margin-bottom: var(--space-m); color: var(--fg); animation: gd-fade var(--dur-2) linear; }
.form-summary h3 { font-size: 1rem; color: var(--error-text); }
.form-summary ul { margin: var(--space-2xs) 0 0; padding-left: 1.2em; }
.form-summary a { color: var(--error-text); }
.form-status { padding: var(--space-m); border-radius: var(--radius); border: 2px solid var(--error-text); color: var(--fg); animation: gd-fade var(--dur-2) linear; }
.form-status a { color: var(--accent-text); font-weight: var(--fw-semibold); }
.form-foot { display: grid; gap: var(--space-s); margin-top: var(--space-l); }
.form-foot .btn[type="submit"] { width: 100%; }
.form-consent, .form-fallback { font-size: var(--fs-small); color: var(--fg-muted); }
.form-consent a, .form-fallback a { color: var(--accent-text); font-weight: var(--fw-medium); }
.form-success { display: grid; gap: var(--space-s); justify-items: start; padding-block: var(--space-m); }
.form-success h2 { font-size: var(--fs-h3); }
.form-success h2:focus { outline: none; }
.form-success h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.form-success p { color: var(--fg-muted); }
.form-success a:not(.btn) { color: var(--accent-text); font-weight: var(--fw-semibold); }
.success-check { width: 64px; height: 64px; }
.success-check circle { fill: none; stroke: var(--support); stroke-width: 2; }
.success-check path { fill: none; stroke: var(--support); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* send.php redirect states: #form-sent / #form-error show via :target (works with JS off) or .is-on (inline script, reads ?sent=1 / ?error=1) */
.form-flash:not(:target):not(.is-on) { display: none; }
.form-status.form-flash { margin-bottom: var(--space-m); }
.form-flash:focus { outline: none; }
#form-sent:is(:target, .is-on) ~ form { display: none; }

/* 8. Footer --------------------------------------------------------------- */
.site-footer { position: relative; overflow: clip; padding-top: var(--section-y-tight); }
.site-footer.theme-ink { --bg-fill: var(--navy-950); }
.footer-grid { display: grid; gap: var(--space-xl); padding-bottom: var(--space-2xl); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 5fr 2fr 3fr 2fr; } .footer-brand { grid-column: auto; } }
.footer-brand { display: grid; gap: var(--space-m); align-content: start; justify-items: start; }
.footer-brand p { color: var(--fg-muted); max-width: 38ch; }
.brand--lockup .wordmark--lockup { font-size: clamp(2.5rem, 1.8rem + 2.5vw, 3.5rem); }
.footer-col h2 { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-subtle); margin-bottom: var(--space-xs); max-width: none; line-height: 1.2; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col .link { padding-block: 11px; }
.footer-col p { color: var(--fg-muted); font-size: var(--fs-small); margin-top: var(--space-xs); }
.footer-contact a { overflow-wrap: anywhere; }
.footer-giant-wrap { overflow: hidden; overflow: clip; border-top: 1px solid var(--rule); padding-top: var(--space-m); }
.footer-giant { display: block; font: 800 clamp(6rem, 18vw, 17.5rem)/0.8 var(--font-display); letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px var(--field-navy); margin-bottom: -0.1em; white-space: nowrap; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-l); justify-content: space-between; align-items: center; padding-block: var(--space-s); border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--fg-muted); }
.footer-bottom p { max-width: none; }
.footer-bottom .link { padding-block: 11px; }
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-m); list-style: none; margin: 0; padding: 0; }
.footer-bottom__links li { display: flex; align-items: center; }
.footer-bottom__links li + li::before { content: "\2022" / ""; margin-right: var(--space-m); }


/* 9. v2 additions: sample cards, add-ons, checkboxes, marquee fallback ------ */
.btn.stretched-link { position: static; transform: none !important; translate: none; filter: none; will-change: auto; }
.stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: var(--radius-lg); }
.stretched-link:focus-visible { outline: none; }
.stretched-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 4px; }
.concept, .teaser { position: relative; }
.concept__name { font-size: var(--fs-h3); line-height: var(--lh-heading); }
.concept__line { color: var(--fg-muted); max-width: 40ch; }
.concept__link, .teaser__link { margin-top: var(--space-2xs); }
.concept__badge, .teaser__badge { position: absolute; top: -14px; left: 18px; z-index: 5; }
.concept__phone { position: absolute; right: -6%; bottom: -12%; width: 22%; z-index: 3; }
@media (max-width: 639.98px) { .concept__phone { width: 26%; right: -2%; } .concept__frame { padding-right: 6%; } }

.teasers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl) var(--gutter); }
@media (min-width: 768px) { .teasers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .teaser:first-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .teasers { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .teaser { grid-column: span 2; }
  .teaser:nth-child(1), .teaser:nth-child(2) { grid-column: span 3; }
}
/* Six teasers: even rows instead of a featured first card (tablet 2x3, desktop 3x2). */
@media (min-width: 768px) { .teasers:has(> .teaser:nth-child(6)) > .teaser:first-child { grid-column: auto; } }
@media (min-width: 1024px) { .teasers:has(> .teaser:nth-child(6)) > .teaser:nth-child(-n+2) { grid-column: span 2; } }
.teaser { display: grid; gap: var(--space-m); align-content: start; padding-top: 14px; }
.teaser__frame { position: relative; border-radius: 16px; transition: transform var(--dur-4) var(--ease-out); }
.teaser__body { display: grid; gap: 6px; justify-items: start; }
.teaser h3 { font-size: var(--fs-h4); }
@media (hover: hover) and (pointer: fine) { .teaser:hover .teaser__frame { transform: translate3d(0, calc(var(--hover-lift) * -1), 0); } }

.hero__caption .fictional { color: inherit; }

.addons-wrap .section-head { margin-bottom: var(--space-xl); }
.addons { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); }
@media (min-width: 768px) { .addons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.addon { display: grid; gap: var(--space-s); align-content: start; }
.addon h3 { font-size: var(--fs-h3); }
.addon p { color: var(--fg-muted); }

.checks { border: 0; margin: 0; padding: 0; min-width: 0; }
.checks legend { padding: 0; margin-bottom: var(--space-2xs); }
.checks__row { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); }
.check { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 1rem; }
.check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.check__box { width: 22px; height: 22px; flex: none; border: 1.5px solid var(--field-border); border-radius: var(--radius-xs); background: var(--field-bg); display: grid; place-items: center; transition: background-color var(--dur-2) linear, border-color var(--dur-2) linear; }
.check__box::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--c-on-accent); border-bottom: 2px solid var(--c-on-accent); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--dur-3) var(--ease-spring); }
.check input:checked + .check__box { background: var(--c-accent); border-color: var(--c-accent); }
.check input:checked + .check__box::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .check:hover .check__box { border-color: var(--fg-muted); } }

.marquee__static { display: none; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-heading-sm); letter-spacing: var(--ls-h3); text-align: center; }
.contact-list .btn--link { min-height: 36px; margin-top: 2px; }
.contact-list__value { font-size: var(--fs-body); }
.concept { isolation: isolate; }
/* Rotating word: size so the widest word ("quote requests.") always fits its column (no overflow, no shift) */
.hero__copy { container-type: inline-size; }
.hero__title { max-width: 100%; }
.hero__title .rotator { font-size: min(1em, 13.2cqi); }
.contact-list .btn--link { display: flex; width: fit-content; }

/* Kai mobile fixes */
/* Contact page "Call Now" / "Send an Email" links were 36px tall; restore the 44px tap target. */
.contact-list .btn--link { min-height: 44px; }
/* End Kai mobile fixes */

/* Detail section photos */
.detail__art picture, .detail__art img { display: block; width: 100%; height: 100%; }
.detail__art img { object-fit: cover; }