@charset "UTF-8";
/* ============================================================================
   AirControl — "Instrument Panel"
   ----------------------------------------------------------------------------
   Aesthetic thesis: industrial-utilitarian, read as a piece of technical
   equipment rather than a brochure. The page borrows the vocabulary of a
   commissioning datasheet — hairline rules, indexed sections, monospace
   codes, corner crop-marks — and one instrument: a thermal spine down the
   left edge that fills cold-blue as you descend the page.

   Everything is driven from the token block below. There are no component
   frameworks and no styles that aren't used.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */
/*
 * Two palettes. Light is the default — a bare :root carries it, so the page
 * renders correctly even if CSS loads before any theme script. Dark is an
 * override under [data-theme="dark"].
 *
 * `prefers-color-scheme` is deliberately NOT consulted: the brief is that light
 * is the default for everyone, and an explicit choice is remembered instead.
 * (To honour the OS setting instead, see the commented block below the dark
 * palette.)
 *
 * Photography-led surfaces — the hero, the lightbox, the scrim over each
 * gallery tile — stay dark in BOTH themes; white text over a photograph is
 * simply more legible than dark text. Those use the fixed --on-dark-* tokens,
 * which never change.
 */
:root {
  /* ── Light (default) ─────────────────────────────────────────────────── */
  --bg-deep: #eaf0f8; /* footer */
  --bg: #f6f8fb; /* page */
  --bg-tint: #edf2f9; /* alternating sections */
  --bg-raised: #ffffff; /* cards */
  --bg-sunken: #e3eaf4;

  --accent: #1857a8; /* accent as TEXT — 6.7:1 on --bg */
  --accent-bg: #1e59a6; /* accent as a SOLID fill */
  --accent-fg: #ffffff; /* text on that fill — 6.9:1 */
  --accent-bg-hover: #17497f;

  /* Every step clears WCAG AA against --bg. */
  --text: #0d1526; /* 17.0:1 */
  --text-2: #22304f; /* 11.9:1 */
  --text-body: #3a4661; /*  8.9:1 */
  --text-muted: #4f5b76; /*  6.4:1 */
  --text-faint: #616c86; /*  4.9:1 — the floor; never go lighter for real text */

  --link: #1a5aa8;

  --line: rgba(28, 41, 85, 0.16);
  --line-strong: rgba(28, 41, 85, 0.3);
  --line-accent: color-mix(in srgb, var(--accent) 28%, transparent);

  /* Surfaces that carry a gradient, and the grade applied to photography.
     Light needs no darkening — that only muddies a photo against white. */
  --card-grad: linear-gradient(160deg, #ffffff, #eef3fa);
  --callcard-grad: linear-gradient(155deg, #e6eefa, #ffffff);
  --photo-filter: saturate(0.95) contrast(1.02);

  /* Photography surfaces — identical in both themes. */
  --on-dark: #eef3fa;
  --on-dark-2: #c7d3e4;
  --on-dark-body: #9faec6;
  --on-dark-faint: #8a97ae;
  --dark-base: #04070e;
  --accent-on-dark: #7fd9f5;

  /* Brand blues, straight off the logo artwork. */
  --navy: #1c2955;
  --blue-700: #1e59a6;
  --blue-600: #2870c9;
  --blue-500: #3d8ae0;

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Plex Mono has no Greek cut — only ever applied to digits and Latin codes. */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 4px rhythm. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;

  --shell: 1320px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --spine: 4.5rem; /* left rail reservation on wide screens */

  --header-h: 4.5rem;
  --radius: 2px; /* near-square: this is equipment, not a consumer app */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Dark ──────────────────────────────────────────────────────────────── */
/* Cold, near-black blues sampled around the logo. */
[data-theme="dark"] {
  --bg-deep: #04070e;
  --bg: #070c18;
  --bg-tint: #0a1122;
  --bg-raised: #0d162c;
  --bg-sunken: #132043;

  --accent: #7fd9f5;
  --accent-bg: #7fd9f5;
  --accent-fg: #04070e;
  --accent-bg-hover: #a4e6ff;

  --text: #eef3fa; /* 17.5:1 */
  --text-2: #c7d3e4; /* 12.9:1 */
  --text-body: #9faec6; /*  8.7:1 */
  --text-muted: #8a97ae; /*  6.6:1 */
  --text-faint: #6e7c96; /*  4.6:1 — the floor; never go darker for real text */

  --link: #3d8ae0;

  --line: rgba(159, 174, 198, 0.16);
  --line-strong: rgba(159, 174, 198, 0.34);

  --card-grad: linear-gradient(160deg, rgba(28, 41, 85, 0.35), rgba(10, 17, 34, 0.2));
  --callcard-grad: linear-gradient(155deg, rgba(30, 89, 166, 0.28), rgba(10, 17, 34, 0.5));
  --photo-filter: saturate(0.82) contrast(1.04) brightness(0.9);
}

/* To follow the operating system instead of defaulting to light, uncomment:
 *
 *   @media (prefers-color-scheme: dark) {
 *     :root:not([data-theme="light"]) { … the dark palette above … }
 *   }
 *
 * and change the fallback in src/theme.js from 'light' to matchMedia.
 */

/* Colour changes are animated only when the user flips the toggle, so the
   switch feels deliberate — but scrolling and hovering never pay for it. */
html.theme-switching,
html.theme-switching body,
html.theme-switching .header,
html.theme-switching .section--tint,
html.theme-switching .footer,
html.theme-switching .step,
html.theme-switching .call-card,
html.theme-switching .drawer,
html.theme-switching .callbar a {
  transition: background-color 0.28s var(--ease), color 0.28s var(--ease),
    border-color 0.28s var(--ease);
}

/* ------------------------------------------------------------------ base -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 0.25em;
}

a:hover {
  color: var(--accent);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

::selection {
  background: var(--accent-bg);
  color: var(--accent-fg);
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 200;
  padding: var(--s-3) var(--s-6);
  background: var(--accent-bg);
  color: var(--accent-fg);
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- layout -- */
.shell {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: clamp(4rem, 9vw, var(--s-32));
  border-top: 1px solid var(--line);
}

.section--tint {
  background: linear-gradient(180deg, var(--bg-tint), var(--bg) 60%);
}

/* Blueprint field. Drawn with gradients so it costs nothing to ship. */
.blueprint {
  position: relative;
  isolation: isolate;
}

.blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(to right, color-mix(in srgb, var(--accent) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--accent) 4.5%, transparent) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
  pointer-events: none;
}

/* ------------------------------------------------- typographic utilities -- */
/* Monospace is reserved for indices and Latin codes — the Greek cut doesn't
   exist, so applying it to Greek copy would silently fall back. */
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-accent), transparent);
}

.eyebrow__index {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.1em;
}

.title-lg {
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.5rem);
}

.title-md {
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
}

.lead {
  max-width: 62ch;
  margin-top: var(--s-6);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--text-body);
}

.section__head {
  max-width: 68ch;
  margin-bottom: clamp(2.5rem, 5vw, var(--s-16));
}

/* -------------------------------------------------------------- buttons -- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 0.9rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease), transform 0.25s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  color: var(--btn-fg);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  --btn-bg: var(--accent-bg);
  --btn-fg: var(--accent-fg);
  --btn-border: var(--accent-bg);
}

.btn--primary:hover {
  --btn-bg: var(--accent-bg-hover);
  --btn-border: var(--accent-bg-hover);
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--accent-bg) 55%, transparent);
}

.btn--ghost:hover {
  --btn-border: var(--accent);
  --btn-bg: color-mix(in srgb, var(--accent) 7%, transparent);
}

.btn__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

/* An SVG with only a viewBox falls back to 300x150 if its box ever stops
   constraining it — pin it to the wrapper so no layout change can blow it up. */
.btn__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------- the thermal spine -- */
/* The one element intended to be remembered: a fixed instrument rail whose
   column fills cold-blue with scroll depth and reports the current section. */
.spine {
  position: fixed;
  left: 1.75rem;
  top: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  pointer-events: none;
  /* The rail takes the theme's colours, which vanish against the dark hero
     under the light palette. It only reports section progress anyway, so it
     fades in with the body rather than sitting invisible over the hero. */
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.spine.is-visible {
  opacity: 1;
}

.spine__code {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--accent);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.spine__rail {
  position: relative;
  width: 2px;
  height: min(42vh, 22rem);
  background: var(--line);
  overflow: hidden;
}

.spine__fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  background: linear-gradient(180deg, var(--blue-700), var(--accent));
  transition: height 0.15s linear;
}

.spine__ticks {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.spine__tick {
  width: 8px;
  height: 1px;
  background: var(--line-strong);
  transition: background 0.3s var(--ease), width 0.3s var(--ease);
}

.spine__tick.is-active {
  width: 16px;
  background: var(--accent);
}

.spine__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  color: var(--text-faint);
  writing-mode: vertical-rl;
  text-transform: uppercase;
}

@media (min-width: 1180px) {
  .spine {
    display: flex;
  }

  /* Widen the gutter so content clears the rail instead of colliding with it. */
  :root {
    --gutter: clamp(4.75rem, 5vw, 5.5rem);
  }
}

/* --------------------------------------------------------------- header -- */
/*
 * The header has two colour states, independent of the theme:
 *
 *   at rest   — transparent, sitting on the dark hero photograph, so its
 *               contents must always be light regardless of theme
 *   solid     — scrolled past the hero, or with the mobile drawer open, so it
 *               takes the theme's own colours
 *
 * Children read the --hd-* locals rather than the global text tokens, which is
 * what lets one markup tree serve both states.
 */
.header {
  --hd-text: var(--on-dark);
  --hd-text-2: var(--on-dark-2);
  --hd-muted: var(--on-dark-faint);
  --hd-line: rgba(159, 174, 198, 0.34);
  --hd-accent: var(--accent-on-dark);

  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}

.header.is-stuck,
.header.is-open {
  --hd-text: var(--text);
  --hd-text-2: var(--text-2);
  --hd-muted: var(--text-muted);
  --hd-line: var(--line-strong);
  --hd-accent: var(--accent);

  background: color-mix(in srgb, var(--bg-deep) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: auto;
  text-decoration: none;
}

.brand img {
  height: 2.25rem;
  width: auto;
}

/*
 * Two logo files, one shown at a time. The artwork is dark navy, so it needs a
 * knockout (white) version on dark surfaces and the original on light ones —
 * recolouring with a CSS filter would wreck the metallic fan.
 *
 *   at rest  → on the hero photograph → knockout, in both themes
 *   solid    → on the theme surface   → knockout in dark, original in light
 */
.brand__on-light {
  display: none;
}

.header.is-stuck .brand__on-dark,
.header.is-open .brand__on-dark {
  display: none;
}

.header.is-stuck .brand__on-light,
.header.is-open .brand__on-light {
  display: block;
}

[data-theme="dark"] .header.is-stuck .brand__on-dark,
[data-theme="dark"] .header.is-open .brand__on-dark {
  display: block;
}

[data-theme="dark"] .header.is-stuck .brand__on-light,
[data-theme="dark"] .header.is-open .brand__on-light {
  display: none;
}

/* While the header is transparent the CTA belongs to the hero, not the theme. */
.header:not(.is-stuck):not(.is-open) .btn--primary {
  --btn-bg: var(--accent-on-dark);
  --btn-fg: var(--dark-base);
  --btn-border: var(--accent-on-dark);
}

.header:not(.is-stuck):not(.is-open) .btn--primary:hover {
  --btn-bg: #a4e6ff;
  --btn-border: #a4e6ff;
}

/* Theme toggle — same hard-edged treatment as the language switch. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border: 1px solid var(--hd-line);
  border-radius: var(--radius);
  color: var(--hd-text-2);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.theme-toggle:hover {
  color: var(--hd-text);
  border-color: var(--hd-accent);
  background: color-mix(in srgb, var(--hd-accent) 12%, transparent);
}

.theme-toggle svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

/* Each icon shows in the theme it switches *to*. Keyed off the data attribute
   so the header and drawer toggles share one rule. */
[data-theme-toggle] .icon-moon {
  display: block;
}

[data-theme-toggle] .icon-sun {
  display: none;
}

[data-theme="dark"] [data-theme-toggle] .icon-moon {
  display: none;
}

[data-theme="dark"] [data-theme-toggle] .icon-sun {
  display: block;
}

.nav {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.nav__link {
  position: relative;
  padding: var(--s-2) 0;
  color: var(--hd-text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--hd-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current="true"] {
  color: var(--hd-text);
}

.nav__link:hover::after,
.nav__link[aria-current="true"]::after {
  transform: scaleX(1);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Language switch — a hard-edged two-state toggle, not a dropdown. */
.lang {
  display: flex;
  align-items: center;
  border: 1px solid var(--hd-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.lang__opt {
  padding: 0.4rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--hd-muted);
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.lang__opt:hover {
  color: var(--hd-text);
  background: color-mix(in srgb, var(--hd-accent) 12%, transparent);
}

.lang__opt[aria-current="true"] {
  background: var(--accent-bg);
  color: var(--accent-fg);
}

.header__call {
  display: none;
  padding: 0.6rem 1.1rem;
  font-size: 0.875rem;
}

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  border: 1px solid var(--hd-line);
  border-radius: var(--radius);
}

.burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--hd-text);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (min-width: 900px) {
  .nav {
    display: flex;
  }
  .header__call {
    display: inline-flex;
  }
  .burger {
    display: none;
  }
}

/*
 * Below 900px the bar has room for the logo, the language switch and the menu
 * button — and nothing else. At 320px that is 274px of a 280px shell, so the
 * theme toggle moves into the drawer rather than pushing the burger off-screen.
 */
@media (max-width: 899px) {
  .header__inner {
    gap: var(--s-3);
  }

  .brand img {
    height: 1.75rem;
  }

  .header__actions > .theme-toggle {
    display: none;
  }

  /* Lift the language options to a 40px touch target. */
  .lang__opt {
    padding: 0.8rem 0.6rem;
  }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: var(--s-8) var(--gutter) var(--s-12);
  background: color-mix(in srgb, var(--bg-deep) 96%, transparent);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease),
    visibility 0.28s;
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.drawer__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.drawer__link .mono {
  font-size: 0.75rem;
  color: var(--text-faint);
}

.drawer__cta {
  margin-top: var(--s-8);
}

/* The drawer's theme toggle: full width and labelled, since here there is room
   to say what it does. It is a separate class from the header's .theme-toggle
   because the drawer sits outside .header and so cannot see the --hd-* locals. */
.drawer__theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  min-height: 3rem;
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.drawer__theme:hover {
  color: var(--text);
  border-color: var(--accent);
}

.drawer__theme svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

@media (min-width: 900px) {
  .drawer__theme {
    display: none;
  }
}

@media (min-width: 900px) {
  .drawer {
    display: none;
  }
}

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--s-16));
  padding-bottom: clamp(2.5rem, 6vw, var(--s-16));
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  /* Photography is pushed toward the page's cold register so it belongs to
     the palette rather than fighting it. */
  filter: saturate(0.78) contrast(1.06) brightness(0.68);
  transform: scale(1.06);
  animation: hero-settle 2.4s var(--ease-out) forwards;
}

@keyframes hero-settle {
  to {
    transform: scale(1);
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--dark-base) 78%, transparent) 0%,
      color-mix(in srgb, var(--dark-base) 40%, transparent) 32%,
      color-mix(in srgb, var(--dark-base) 88%, transparent) 78%,
      var(--dark-base) 100%
    ),
    linear-gradient(90deg, color-mix(in srgb, var(--dark-base) 72%, transparent), transparent 62%);
}

.hero__inner {
  position: relative;
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}

/* Same eyebrow language as every section head below — mono label, hairline
   rule running off to the right. No badge, no pill, no blinking dot. */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  max-width: 56ch;
  margin-bottom: var(--s-6);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
}

.hero__eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-on-dark) 40%, transparent), transparent);
}

/* The hero always sits on a photograph, so its type stays light in both
   themes — the global heading colour is near-black under the light palette. */
.hero__title,
.hero__title span {
  color: var(--on-dark);
}

.hero .btn {
  --btn-fg: var(--on-dark);
  --btn-border: rgba(159, 174, 198, 0.34);
}

.hero .btn--ghost:hover {
  --btn-border: var(--accent-on-dark);
  --btn-bg: color-mix(in srgb, var(--accent-on-dark) 10%, transparent);
}

.hero .btn--primary {
  --btn-bg: var(--accent-on-dark);
  --btn-fg: var(--dark-base);
  --btn-border: var(--accent-on-dark);
}

.hero .btn--primary:hover {
  --btn-bg: #a4e6ff;
  --btn-border: #a4e6ff;
}

.hero__title {
  max-width: 18ch;
  font-size: clamp(2.5rem, 1.2rem + 6.2vw, 5.75rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

/* Each line rises from behind its own mask — one entrance, then stillness. */
.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line > span {
  display: block;
  transform: translateY(110%);
  animation: line-up 1.05s var(--ease-out) forwards;
}

.hero__line:nth-child(1) > span {
  animation-delay: 0.15s;
}

.hero__line:nth-child(2) > span {
  animation-delay: 0.28s;
}

.hero__line--accent > span {
  color: var(--accent-on-dark);
}

@keyframes line-up {
  to {
    transform: translateY(0);
  }
}

.hero__lead {
  max-width: 56ch;
  margin-top: var(--s-6);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
  color: var(--on-dark-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  margin-top: clamp(2.5rem, 6vw, var(--s-16));
  padding-top: var(--s-6);
  border-top: 1px solid rgba(159, 174, 198, 0.22);
}

.hero__trust li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--on-dark-body);
}

.hero__trust li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  background: var(--accent-on-dark);
  transform: rotate(45deg);
}

/* Entrance stagger for everything below the headline. */
.hero__eyebrow,
.hero__lead,
.hero__actions,
.hero__trust {
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) forwards;
}

.hero__eyebrow {
  animation-delay: 0.05s;
}
.hero__lead {
  animation-delay: 0.45s;
}
.hero__actions {
  animation-delay: 0.58s;
}
.hero__trust {
  animation-delay: 0.7s;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------- about -- */
.about__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, var(--s-16));
  align-items: start;
}

@media (min-width: 960px) {
  .about__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.about__body p + p {
  margin-top: var(--s-4);
}

.about__quote {
  margin-top: var(--s-8);
  padding-left: var(--s-6);
  border-left: 2px solid var(--accent);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text);
}

.about__figure {
  position: relative;
  margin: 0;
}

.about__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  filter: var(--photo-filter);
}

.about__caption {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.about__caption::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  flex: none;
  background: var(--line-accent);
}

.values {
  display: grid;
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, var(--s-16));
  border-top: 1px solid var(--line);
}

@media (min-width: 720px) {
  .values {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .values {
    grid-template-columns: repeat(4, 1fr);
  }
}

.values__item {
  padding: var(--s-6) var(--s-6) var(--s-6) 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 720px) {
  .values__item {
    border-right: 1px solid var(--line);
    padding-left: var(--s-6);
  }
  .values__item:first-child {
    padding-left: 0;
  }
  .values__item:last-child {
    border-right: 0;
  }
}

.values__key {
  display: block;
  margin-bottom: var(--s-2);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.values__text {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* ------------------------------------------------------------- services -- */
/* Read as a spec sheet: full-width indexed rows separated by hairlines, not
   a row of identical cards. */
.pillars {
  border-top: 1px solid var(--line);
}

.pillar {
  display: grid;
  gap: var(--s-6);
  padding-block: clamp(2rem, 4vw, var(--s-12));
  border-bottom: 1px solid var(--line);
  transition: background 0.4s var(--ease);
}

.pillar:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 3.5%, transparent), transparent 55%);
}

@media (min-width: 900px) {
  .pillar {
    grid-template-columns: 9rem minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 4vw, var(--s-12));
    align-items: start;
  }
}

.pillar__code {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.pillar__code::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-accent);
}

@media (min-width: 900px) {
  .pillar__code::after {
    display: none;
  }
}

.pillar__text {
  margin-top: var(--s-3);
  color: var(--text-body);
}

.pillar__items {
  display: grid;
  gap: var(--s-2);
}

.pillar__items li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: 0.9375rem;
  color: var(--text-body);
}

.pillar__items li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.6em;
  flex: none;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
}

/* Process strip — indexed steps with crop-mark corners. */
.process {
  margin-top: clamp(3rem, 6vw, var(--s-24));
}

.process__title {
  margin-bottom: var(--s-8);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

.process__grid {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 640px) {
  .process__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .process__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step {
  position: relative;
  padding: var(--s-6);
  background: var(--card-grad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.step:hover {
  border-color: var(--line-accent);
  transform: translateY(-3px);
}

/* Crop marks: technical-drawing corners instead of a rounded card. */
.step::before,
.step::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--accent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.step::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.step::after {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}

.step:hover::before,
.step:hover::after {
  opacity: 1;
}

.step__n {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.step__title {
  margin-bottom: var(--s-2);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
}

.step__text {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* -------------------------------------------------------------- sectors -- */
.sectors {
  display: grid;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

@media (min-width: 640px) {
  .sectors {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .sectors {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sector {
  position: relative;
  padding: clamp(1.5rem, 3vw, var(--s-8));
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.35s var(--ease);
}

.sector:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.sector__n {
  display: block;
  margin-bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  transition: color 0.35s var(--ease);
}

.sector:hover .sector__n {
  color: var(--accent);
}

.sector__title {
  margin-bottom: var(--s-2);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
}

.sector__text {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* ----------------------------------------------------------------- work -- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-8);
}

.filter {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-body);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
    background 0.25s var(--ease);
}

.filter:hover {
  color: var(--text);
  border-color: var(--accent);
}

.filter[aria-pressed="true"] {
  background: var(--accent-bg);
  border-color: var(--accent-bg);
  color: var(--accent-fg);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-3);
  /* Feature tiles span 2×2; dense packing backfills the holes they leave,
     which matters most after a filter hides part of the set. */
  grid-auto-flow: dense;
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  aspect-ratio: 4 / 3;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: zoom-in;
}

/* Feature shots earn twice the footprint — the grid is deliberately uneven. */
@media (min-width: 900px) {
  .tile--feature {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1 / 1;
  }
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-filter);
  transition: transform 0.7s var(--ease-out), filter 0.5s var(--ease);
}

.tile:hover img,
.tile:focus-visible img {
  transform: scale(1.05);
  filter: saturate(1) contrast(1.04) brightness(1);
}

.tile__scrim {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-4);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--dark-base) 90%, transparent) 0%,
    color-mix(in srgb, var(--dark-base) 30%, transparent) 45%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.tile:hover .tile__scrim,
.tile:focus-visible .tile__scrim {
  opacity: 1;
}

.tile__cat {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--accent-on-dark);
}

.tile__label {
  margin-top: var(--s-1);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--on-dark);
  text-align: left;
}

.tile.is-hidden {
  display: none;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, var(--s-12));
  background: color-mix(in srgb, var(--dark-base) 94%, transparent);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__figure {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: min(100%, 78rem);
  max-height: 100%;
  margin: 0;
}

.lightbox__img {
  max-width: 100%;
  max-height: calc(100svh - 12rem);
  width: auto;
  object-fit: contain;
  border: 1px solid rgba(159, 174, 198, 0.22);
  border-radius: var(--radius);
}

.lightbox__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-6);
  font-size: 0.9375rem;
  color: var(--on-dark-2);
}

.lightbox__counter {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--on-dark-faint);
  white-space: nowrap;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: color-mix(in srgb, #0a1122 80%, transparent);
  border: 1px solid rgba(159, 174, 198, 0.34);
  border-radius: 50%;
  color: var(--on-dark);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.lightbox__btn:hover {
  border-color: var(--accent-on-dark);
  background: #0d162c;
  color: var(--accent-on-dark);
}

.lightbox__btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.lightbox__close {
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  position: fixed;
}

.lightbox__prev {
  left: clamp(0.5rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  position: fixed;
}

.lightbox__next {
  right: clamp(0.5rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  position: fixed;
}

/* -------------------------------------------------------------- contact -- */
.contact__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, var(--s-16));
  align-items: start;
}

@media (min-width: 960px) {
  .contact__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* The primary conversion target: a phone number set at display scale. */
.call-card {
  position: relative;
  padding: clamp(1.75rem, 4vw, var(--s-12));
  background: var(--callcard-grad);
  border: 1px solid var(--line-accent);
  border-radius: var(--radius);
}

.call-card__label {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.call-card__number {
  display: inline-block;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s var(--ease);
}

.call-card__number:hover {
  color: var(--accent);
}

.call-card__number + .call-card__number {
  margin-top: var(--s-2);
}

.call-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

.contact__list {
  display: grid;
  border-top: 1px solid var(--line);
}

.contact__row {
  display: grid;
  gap: var(--s-1) var(--s-6);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 520px) {
  .contact__row {
    grid-template-columns: 9rem 1fr;
    align-items: baseline;
  }
}

.contact__key {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.contact__val {
  color: var(--text-2);
}

.contact__val a {
  text-decoration: none;
}

.contact__val a:hover {
  text-decoration: underline;
}

.hours {
  display: grid;
  gap: var(--s-1);
}

.hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  max-width: 22rem;
}

.hours__time {
  font-variant-numeric: tabular-nums;
  color: var(--text-body);
}

.hours__time--closed {
  color: var(--text-faint);
}

.note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--text-2);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.chip {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.8125rem;
  color: var(--text-body);
}

/* --------------------------------------------------------------- footer -- */
.footer {
  padding-block: var(--s-12) var(--s-8);
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--line);
}

.footer__brand img {
  height: 2.75rem;
  width: auto;
}

/* The footer takes the theme's own surface, so the logo follows the theme
   directly rather than the header's at-rest/solid state. */
.footer__brand .brand__on-dark {
  display: none;
}

.footer__brand .brand__on-light {
  display: block;
}

[data-theme="dark"] .footer__brand .brand__on-dark {
  display: block;
}

[data-theme="dark"] .footer__brand .brand__on-light {
  display: none;
}

.footer__tagline {
  margin-top: var(--s-3);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-body);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.icon-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.icon-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-6);
  font-size: 0.8125rem;
  color: var(--text-faint);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}

/* The build credit is fine print, not a call to action — it sits at footer
   weight and only takes the link colour on hover. */
.footer__credit a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

.footer__credit a:hover {
  color: var(--link);
}

.to-top {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-muted);
  font-size: 0.8125rem;
  text-decoration: none;
}

.to-top:hover {
  color: var(--accent);
}

/* Sticky mobile call bar — the phone is the conversion on a trades site. */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  gap: 1px;
  padding: 0;
  background: var(--line);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease);
}

.callbar.is-visible {
  transform: translateY(0);
}

.callbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.9rem 0.5rem;
  background: var(--bg-tint);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.callbar a.is-primary {
  background: var(--accent-bg);
  color: var(--accent-fg);
}

.callbar svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

@media (min-width: 900px) {
  .callbar {
    display: none;
  }
}

body:has(.callbar.is-visible) .footer {
  padding-bottom: calc(var(--s-8) + 3.5rem);
}

/* ------------------------------------------------------- scroll reveals -- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.reveal[data-delay="1"] {
  transition-delay: 0.08s;
}
.reveal[data-delay="2"] {
  transition-delay: 0.16s;
}
.reveal[data-delay="3"] {
  transition-delay: 0.24s;
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero__media img,
  .hero__line > span {
    transform: none;
  }

  .hero__eyebrow,
  .hero__lead,
  .hero__actions,
  .hero__trust,
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------------ print */
@media print {
  .header,
  .drawer,
  .spine,
  .callbar,
  .lightbox,
  .filters,
  .hero__media,
  .hero__scrim {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  h1,
  h2,
  h3 {
    color: #000;
  }
}

/* ------------------------------------------------- mobile touch targets -- */
/*
 * Inline links in the contact block and footer sit at their line-height, which
 * is roughly 20px — too small to hit reliably. Padding them out to ~40px costs
 * nothing visually because they already sit on their own rows.
 */
@media (max-width: 899px) {
  .contact__val a {
    display: inline-block;
    padding-block: 0.5rem;
  }

  /* Padding only — .to-top is inline-flex, and overriding display collapses
     its icon sizing. */
  .to-top {
    padding-block: 0.5rem;
  }

  .call-card__number {
    padding-block: 0.25rem;
  }

  /* Filter pills are the main gallery control on a phone. */
  .filter {
    padding: 0.65rem 1.1rem;
  }

  /* Lightbox controls need to clear the thumb, not just the pointer. */
  .lightbox__btn {
    width: 3rem;
    height: 3rem;
  }
}