/* ============================================================
   Mully Mechanical — Design System
   Brand: deep charcoal / industrial red / cool light

   TOKEN CONTRACT
   - Never write a raw hex, px font-size, or px margin in a
     component. Compose from the scales below.
   - Red is reserved for action and live state. Structure and
     technical detail use --technical (steel). Everything else
     is neutral.
   ============================================================ */

:root {
  /* ---- Neutral ramp ------------------------------------- */
  --n-990: #08090A;
  --n-950: #0B0C0D;
  --n-900: #14171A;
  --n-850: #1B1D21;
  --n-800: #232428;
  --n-750: #2A2C30;
  --n-700: #34373C;
  --n-600: #4A4E55;
  --n-500: #5B636D;
  --n-400: #74777D;
  --n-350: #8B9098;
  --n-300: #97A1AD;
  --n-200: #C9CCD1;
  --n-150: #DDE3E9;
  --n-120: #E1E1DD;
  --n-100: #EBEBE8;
  --n-050: #F4F4F2;
  --n-000: #FFFFFF;

  /* ---- Brand -------------------------------------------- */
  --accent: #D0121B;
  --accent-hover: #E01420;
  --accent-press: #A80E16;
  --accent-light: #FF4A52;
  --accent-tint: rgba(208, 18, 27, 0.08);
  --accent-veil: rgba(208, 18, 27, 0.14);
  --accent-glow: rgba(208, 18, 27, 0.28);
  --accent-edge: rgba(208, 18, 27, 0.35);

  /* ---- Status ------------------------------------------- */
  --success: #1F7A3A;
  --success-inverse: #7DCEA0;
  --danger-inverse: #FF8A8A;

  /* Structural / technical tone — hairlines, annotations,
     schematic detail. Recedes next to red so it never competes. */
  /* Two steps darker than it looks like it wants to be, so the
     11px mono annotations clear 4.5:1 on both light surfaces.
     At hairline weight the difference is imperceptible. */
  --technical: #55728B;
  --technical-dim: rgba(85, 114, 139, 0.34);
  --technical-faint: rgba(85, 114, 139, 0.14);
  /* Steel at 4.9:1 on charcoal. The base tone only clears 3.7:1
     there, which is fine for a hairline and not for a label. */
  --technical-light: #93ACC2;
  /* Whichever of the two the current surface calls for. Sections
     flip this once; drafting components just read it. */
  --tech-ink: var(--technical);

  /* ---- Semantic surfaces -------------------------------- */
  --surface: var(--n-050);
  --surface-raised: var(--n-000);
  --surface-sunken: var(--n-100);
  --surface-inverse: var(--n-900);
  --surface-inverse-raised: var(--n-850);
  --surface-inverse-sunken: var(--n-950);

  /* ---- Semantic text ------------------------------------ */
  --text-primary: var(--n-900);
  --text-secondary: var(--n-500);
  --text-tertiary: var(--n-400);
  --text-inverse: var(--n-000);
  --text-inverse-secondary: var(--n-200);
  --text-inverse-tertiary: var(--n-300);

  /* ---- Inverse ink --------------------------------------
     Text and structure on dark or photographic surfaces.
     Alpha rather than solid neutrals, so a label reads the
     same over flat charcoal as it does over a photo. Four
     ink steps, three rule steps — if a component needs a
     value between two of these, it needs one of these. */
  --ink-inverse: #FFFFFF;
  --ink-inverse-strong: rgba(255, 255, 255, 0.92);
  --ink-inverse-muted: rgba(255, 255, 255, 0.84);
  --ink-inverse-faint: rgba(255, 255, 255, 0.74);
  --rule-inverse-faint: rgba(255, 255, 255, 0.14);
  --rule-inverse: rgba(255, 255, 255, 0.26);
  --rule-inverse-strong: rgba(255, 255, 255, 0.36);

  /* ---- Semantic borders --------------------------------- */
  --border-subtle: var(--n-120);
  --border-strong: var(--n-200);
  --border-inverse-subtle: var(--n-750);
  --border-inverse-strong: var(--n-700);

  /* ---- Photography --------------------------------------
     One grade across every editorial image so a stock frame
     and a real job site read as the same body of work. Pulls
     saturation down toward the steel/charcoal palette without
     going full duotone, which would cost the photos their
     credibility as evidence of actual work. */
  --photo-grade: grayscale(0.34) saturate(0.9) contrast(1.07);
  --photo-tint: linear-gradient(210deg, var(--technical-faint), transparent 58%),
    linear-gradient(0deg, rgba(11, 12, 13, 0.34), transparent 62%);

  /* ---- Form ---------------------------------------------- */
  --input-bg: #FAFAF8;
  --input-border: #C9CDD2;
  --btn-surface: var(--surface);

  /* ---- Type families ------------------------------------ */
  --font-display: "Barlow Condensed", sans-serif;
  --font-body: "Barlow", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* ---- Type scale (1.25 body / wider display jumps) ----- */
  --fs-3xs: 10px;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: clamp(22px, 2.2vw, 26px);
  --fs-2xl: clamp(28px, 3vw, 34px);
  --fs-3xl: clamp(34px, 4vw, 44px);
  --fs-4xl: clamp(40px, 5vw, 58px);
  --fs-5xl: clamp(48px, 6.4vw, 76px);
  --fs-6xl: clamp(56px, 8vw, 104px);
  /* Every section heading, everywhere. Sized to sit below the
     hero (6xl) and above a service panel title (4xl) so the
     page reads top-down without measuring anything. */
  --fs-section: clamp(38px, 5.2vw, 68px);

  /* ---- Line heights ------------------------------------- */
  --lh-display: 0.94;
  --lh-tight: 1.1;
  --lh-snug: 1.35;
  --lh-body: 1.6;
  --lh-loose: 1.75;

  /* ---- Tracking ----------------------------------------- */
  --tr-display: 0.005em;
  --tr-mono: 0.18em;
  --tr-mono-tight: 0.12em;
  --tr-label: 0.14em;

  /* ---- Spacing scale (4px base) ------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---- Layout ------------------------------------------- */
  --max: 1280px;
  --max-wide: 1600px;
  --measure: 62ch;
  --pad: clamp(20px, 4.8vw, 28px);
  --gutter: clamp(16px, 2vw, 28px);
  /* Distance from the viewport edge to the content edge. Lets a
     child of .wrap bleed back out to the edge with a negative
     margin instead of hard-coding a breakpoint. */
  --wrap-inset: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  --section-y: clamp(56px, 8vw, 96px);
  --section-y-tight: clamp(48px, 6vw, 72px);
  --section-y-loose: clamp(80px, 11vw, 144px);
  --header-h: 76px;
  /* Condensed service picker that docks under the header. The sticky
     photo frame clears this plus a gap so the two never crowd. */
  --svc-rail-h: 56px;

  /* ---- Signature notch ----------------------------------
     The one ownable shape in the system. Set --notch on any
     element and apply .notch / .notch--alt, or reference the
     clip vars directly. Size steps, not arbitrary values. */
  --notch-xs: 6px;
  --notch-sm: 9px;
  --notch-md: 14px;
  --notch-lg: 22px;
  --notch-xl: 32px;
  --notch: var(--notch-md);
  --clip-notch: polygon(
    var(--notch) 0,
    100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%,
    0 var(--notch)
  );
  --clip-notch-alt: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch))
  );

  /* ---- Motion ------------------------------------------- */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-slower: 700ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Elevation ---------------------------------------- */
  /* Deliberately shallow. This system builds depth by overlapping
     and bleeding panels, not by floating them — a drop shadow on a
     steel plate reads as a mistake. Two light steps, two dark. */
  --shadow-sm: 0 2px 8px rgba(11, 12, 13, 0.06);
  --shadow-md: 0 12px 30px rgba(11, 12, 13, 0.09);
  --shadow-inverse-sm: 0 10px 28px rgba(0, 0, 0, 0.28);
  --shadow-inverse: 0 16px 40px rgba(0, 0, 0, 0.45);

  /* ---- Z-index ------------------------------------------ */
  --z-sticky: 40;
  --z-header: 50;
  --z-dropdown: 60;
  --z-drawer: 80;
  --z-modal: 90;

  /* ---- Legacy aliases -----------------------------------
     Kept so existing rules resolve while components migrate.
     Do not use these in new code. */
  --red: var(--accent);
  --red-deep: var(--accent-press);
  --black: var(--n-950);
  --charcoal: var(--n-900);
  --charcoal-2: var(--n-850);
  --charcoal-3: var(--n-800);
  --border-dark: var(--border-inverse-subtle);
  --border-light: var(--border-subtle);
  --light: var(--n-050);
  --white: var(--n-000);
  --ink: var(--text-primary);
  --muted: var(--n-500);
  --muted-2: var(--n-400);
  --muted-3: var(--n-350);
  --muted-4: var(--n-300);
  --muted-5: #9AA1A9;
  --soft: var(--n-200);
  --soft-2: var(--n-150);
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  scrollbar-gutter: stable;
}

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

body {
  margin: 0;
  background: var(--light);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

a {
  color: var(--red);
  text-decoration: none;
  transition: color 0.18s ease;
}

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

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

button,
input,
select,
textarea {
  font: inherit;
}

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

/* ============================================================
   PRIMITIVES
   Type roles, the notch, layout, and the small set of spacing
   utilities that replace one-off inline styles.
   ============================================================ */

/* ---------- Signature notch ---------- */

.notch {
  clip-path: var(--clip-notch);
}

.notch--alt {
  clip-path: var(--clip-notch-alt);
}

.notch--xs { --notch: var(--notch-xs); }
.notch--sm { --notch: var(--notch-sm); }
.notch--md { --notch: var(--notch-md); }
.notch--lg { --notch: var(--notch-lg); }
.notch--xl { --notch: var(--notch-xl); }

/* Notch drawn as a border rather than a cut — for outlined
   surfaces where clipping would eat the stroke. */
.notch-outline {
  position: relative;
  clip-path: var(--clip-notch);
}

.notch-outline::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--notch-outline-color, var(--border-subtle));
  clip-path: var(--clip-notch);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  padding: var(--notch-outline-width, 1px);
}

/* ---------- Type roles ---------- */

.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

.t-display--6xl { font-size: var(--fs-6xl); }
.t-display--5xl { font-size: var(--fs-5xl); }
.t-display--4xl { font-size: var(--fs-4xl); }
.t-display--3xl { font-size: var(--fs-3xl); }
.t-display--2xl { font-size: var(--fs-2xl); }
.t-display--xl  { font-size: var(--fs-xl); }

/* Mono is the technical voice: labels, indices, specs, units. */
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.t-mono--sm { font-size: var(--fs-2xs); }
.t-mono--xs { font-size: var(--fs-3xs); }

.t-body {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
  max-width: var(--measure);
}

.t-lede {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: var(--measure);
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.wrap--wide {
  max-width: var(--max-wide);
}

/* Editorial 12-column grid. Sections opt in when they need to
   sit off-center or break the container; the default .wrap
   stays available for straightforward content. */
.grid12 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-10);
}

@media (min-width: 900px) {
  .grid12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/* Escape the container and run to the viewport edge. */
.bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.bleed-right {
  margin-right: calc(50% - 50vw);
}

.bleed-left {
  margin-left: calc(50% - 50vw);
}

/* ---------- Spacing utilities ----------
   Deliberately sparse. If a component needs spacing outside
   these steps, it needs its own class, not an inline style. */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }

.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }

.w-fit { width: fit-content; }

/* ---------- Media ratio ----------
   Images declare a ratio, never a hard pixel height, so crops
   stay consistent across breakpoints. */

.media-fixed {
  position: relative;
  aspect-ratio: var(--media-ratio, 4 / 3);
}

.media-fixed--square { --media-ratio: 1 / 1; }
.media-fixed--portrait { --media-ratio: 4 / 5; }
.media-fixed--wide { --media-ratio: 16 / 10; }
.media-fixed--cinema { --media-ratio: 21 / 9; }

/* ---------- Small shared pieces ---------- */

.brand__icon--sm {
  height: 36px;
}

.link-dashed {
  border-bottom: 1px dashed var(--n-500);
}

/* Mono breadcrumb above interior page titles. */
.crumb {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--accent);
}

.section--hairline-top {
  border-top: 1px solid var(--border-subtle);
}

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site main {
  flex: 1;
}

/* ---------- Utility bar ---------- */

.util-bar {
  background: var(--red);
  border-bottom: 1px solid var(--red-deep);
}

.util-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px var(--pad);
  max-width: var(--max);
  margin: 0 auto;
}

.util-bar__label,
.util-bar__phone {
  font-family: var(--font-mono);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.util-bar__label {
  font-size: var(--fs-2xs);
  color: var(--ink-inverse-muted);
}

.util-bar__phone {
  font-size: var(--fs-2xs);
  letter-spacing: 1.5px;
  color: var(--white);
  font-weight: 500;
}

.util-bar__phone:hover {
  color: var(--white);
  opacity: 0.85;
}

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--charcoal);
  border-bottom: 1px solid var(--border-dark);
  transition: box-shadow 0.35s var(--ease), border-color 0.35s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--accent-edge);
  box-shadow: var(--shadow-inverse-sm);
}

.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
  flex-shrink: 0;
}

.brand:hover {
  color: inherit;
}

.brand__icon {
  height: 44px;
  width: auto;
}

.brand__text {
  display: flex;
  flex-direction: column;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.brand__name .red {
  color: var(--red);
}

.brand__name .white {
  color: var(--white);
}

.brand__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 3.4px;
  color: var(--muted-4);
  margin-top: 4px;
  text-transform: uppercase;
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 2px;
}

.nav-link {
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-4);
  border-bottom: 2px solid transparent;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  transition: color 0.18s ease;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--white);
}

.nav-link.is-active {
  border-bottom-color: var(--red);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-dropdown__caret {
  font-size: var(--fs-3xs);
  color: var(--red);
}

.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 280px;
  /* Transparent padding = real hover bridge (clip-path would eat a ::before) */
  padding: 12px 0 6px;
  background: transparent;
  border: none;
  box-shadow: none;
  clip-path: none;
  display: none;
  flex-direction: column;
  z-index: var(--z-dropdown);
}

/* Visual panel sits behind the items.
   Top-left notch only — full clip-notch would cut the last item hover. */
.nav-dropdown__menu::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  --notch: var(--notch-sm);
  clip-path: polygon(
    var(--notch) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--notch)
  );
  background: var(--charcoal-2);
  border: 1px solid var(--border-inverse-subtle);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-inverse);
}

.nav-dropdown.is-open .nav-dropdown__menu {
  display: flex;
}

.nav-dropdown__menu > * {
  position: relative;
  z-index: 1;
}

.nav-dropdown__item {
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  transition: background 0.15s ease;
}

.nav-dropdown__item:hover {
  background: var(--charcoal-3);
  color: inherit;
}

.nav-dropdown__item-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--n-150);
}

.nav-dropdown__item.is-active .nav-dropdown__item-label {
  color: var(--red);
}

.nav-dropdown__item-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 1px;
  color: var(--muted-3);
}

.nav-cta {
  margin-left: 10px;
  flex-shrink: 0;
}

@media (min-width: 1080px) and (max-width: 1220px) {
  .brand__tag {
    display: none;
  }

  .nav-link {
    padding: 8px 8px;
    font-size: var(--fs-xs);
    letter-spacing: 1px;
  }
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 10px;
  background: none;
  border: none;
}

.menu-toggle span {
  display: block;
  height: 3px;
  background: var(--white);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
  transform-origin: center;
}

.menu-toggle span:nth-child(1) {
  width: 26px;
}

.menu-toggle span:nth-child(2) {
  width: 26px;
  background: var(--red);
}

.menu-toggle span:nth-child(3) {
  width: 18px;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  width: 26px;
  transform: translateY(8px) rotate(45deg);
}

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

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  width: 26px;
  transform: translateY(-8px) rotate(-45deg);
}

@media (min-width: 1080px) {
  .nav-desktop {
    display: flex;
  }

  .menu-toggle {
    display: none;
  }
}

/* ---------- Mobile menu ---------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  overflow: auto;
  background: var(--charcoal);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s linear 0s;
}

.mobile-menu__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  transition-delay: 0s;
}

.mobile-menu.is-open .mobile-menu__top {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 40ms;
}

.mobile-menu__close {
  cursor: pointer;
  color: var(--muted-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 2px;
  padding: 10px;
  background: none;
  border: none;
  text-transform: uppercase;
}

.mobile-menu__close:hover {
  color: var(--white);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  margin-top: 34px;
}

.mobile-menu__nav > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: 0s;
}

.mobile-menu.is-open .mobile-menu__nav > * {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.is-open .mobile-menu__nav > *:nth-child(1) { transition-delay: 60ms; }
.mobile-menu.is-open .mobile-menu__nav > *:nth-child(2) { transition-delay: 90ms; }
.mobile-menu.is-open .mobile-menu__nav > *:nth-child(3) { transition-delay: 120ms; }
.mobile-menu.is-open .mobile-menu__nav > *:nth-child(4) { transition-delay: 150ms; }
.mobile-menu.is-open .mobile-menu__nav > *:nth-child(5) { transition-delay: 180ms; }
.mobile-menu.is-open .mobile-menu__nav > *:nth-child(6) { transition-delay: 210ms; }
.mobile-menu.is-open .mobile-menu__nav > *:nth-child(7) { transition-delay: 240ms; }
.mobile-menu.is-open .mobile-menu__nav > *:nth-child(8) { transition-delay: 270ms; }
.mobile-menu.is-open .mobile-menu__nav > *:nth-child(9) { transition-delay: 300ms; }

.mobile-menu__link {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  padding: 10px 0;
  border-bottom: 1px solid var(--n-800);
  font-size: var(--fs-2xl);
}

.mobile-menu__link:hover,
.mobile-menu__link.is-active {
  color: var(--red);
}

.mobile-menu__accordion {
  border-bottom: 1px solid var(--n-800);
}

.mobile-menu__accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: none;
  border-bottom: none;
  cursor: pointer;
  text-align: left;
}

.mobile-menu__accordion-icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.mobile-menu__accordion-icon::before,
.mobile-menu__accordion-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.mobile-menu__accordion-icon::before {
  top: 8px;
  left: 2px;
  width: 14px;
  height: 2px;
}

.mobile-menu__accordion-icon::after {
  top: 2px;
  left: 8px;
  width: 2px;
  height: 14px;
}

.mobile-menu__accordion.is-open .mobile-menu__accordion-icon::after {
  opacity: 0;
  transform: scaleY(0);
}

.mobile-menu__accordion-panel {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-bottom: 0;
  transform: translateY(-4px);
  transition:
    max-height var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out),
    padding-bottom var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.mobile-menu__accordion.is-open .mobile-menu__accordion-panel {
  max-height: 28rem;
  opacity: 1;
  padding-bottom: 6px;
  transform: translateY(0);
}

.mobile-menu__link--sub {
  font-size: var(--fs-xl);
  padding: 8px 0 8px 18px;
  border-bottom: none;
}

.mobile-menu__cta {
  margin-top: 26px;
  text-align: center;
}

.mobile-menu__phone {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 2px;
  color: var(--n-500);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: 0s;
}

.mobile-menu.is-open .mobile-menu__phone {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 280ms;
}

body.menu-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu.is-open,
  .mobile-menu__top,
  .mobile-menu.is-open .mobile-menu__top,
  .mobile-menu__nav > *,
  .mobile-menu.is-open .mobile-menu__nav > *,
  .mobile-menu__phone,
  .mobile-menu.is-open .mobile-menu__phone,
  .mobile-menu__accordion-panel,
  .mobile-menu__accordion.is-open .mobile-menu__accordion-panel,
  .mobile-menu__accordion-icon::before,
  .mobile-menu__accordion-icon::after {
    transition: none;
  }

  .mobile-menu {
    transform: none;
  }

  .mobile-menu__top,
  .mobile-menu__nav > *,
  .mobile-menu__phone,
  .mobile-menu__accordion-panel {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Buttons ----------
   Single bottom-right chip (subtle).
   Secondary outline = stroke fill + inner face matching --btn-surface
   (set on section/card parents so text stays readable everywhere).
   Primary:   .btn--red
   Secondary: .btn--ghost-light | .btn--ghost-dark
   Tertiary:  .btn--dark | .btn--white
*/

.btn {
  --btn-chip: 9px;
  --btn-stroke: 2px;
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  --notch: var(--btn-chip);
  clip-path: var(--clip-notch);
  transition:
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    filter var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

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

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

.btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* Primary */
.btn--red {
  background: var(--red);
  color: var(--white);
}

.btn--red:hover,
a.btn--red:hover {
  color: var(--white);
  background: var(--accent-hover);
  filter: drop-shadow(0 10px 18px var(--accent-glow));
}

/* Secondary face — matches parent surface so the center reads as open */
.btn--ghost-light::before,
.btn--ghost-dark::before {
  content: "";
  position: absolute;
  inset: var(--btn-stroke);
  z-index: -1;
  background: var(--btn-surface, var(--light));
  --notch: max(0px, calc(var(--btn-chip) - var(--btn-stroke)));
  clip-path: var(--clip-notch);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* Secondary — on light surfaces */
.btn--ghost-dark,
a.btn--ghost-dark {
  background: var(--ink);
  color: var(--ink);
}

.btn--ghost-dark:hover,
a.btn--ghost-dark:hover {
  background: var(--ink);
  color: var(--white);
  filter: drop-shadow(0 10px 16px rgba(11, 12, 13, 0.16));
}

.btn--ghost-dark:hover::before {
  opacity: 0;
}

/* Secondary — on dark / red surfaces */
.btn--ghost-light,
a.btn--ghost-light {
  background: var(--white);
  color: var(--white);
}

.btn--ghost-light:hover,
a.btn--ghost-light:hover {
  background: var(--white);
  color: var(--charcoal);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.22));
}

.btn--ghost-light:hover::before {
  opacity: 0;
}

.promo-card--red .btn--ghost-light:hover,
.promo-card--red a.btn--ghost-light:hover {
  color: var(--red);
}

/* Tertiary — charcoal fill */
.btn--dark {
  background: var(--charcoal);
  color: var(--white);
}

.btn--dark:hover {
  background: var(--n-850);
  color: var(--white);
  filter: drop-shadow(0 10px 16px rgba(11, 12, 13, 0.22));
}

/* Tertiary — white fill (on red CTA bands) */
.btn--white {
  background: var(--white);
  color: var(--red);
}

.btn--white:hover {
  color: var(--red-deep);
  background: var(--n-050);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.18));
}

/* Compact nav / footer */
.btn--sm {
  --btn-chip: 7px;
  padding: 11px 18px;
  font-size: var(--fs-xs);
  letter-spacing: 1.6px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

@media (hover: none) {
  .btn:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }

  .btn:hover {
    transform: none;
  }
}

/* ---------- Eyebrow / type ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow__bar {
  width: 36px;
  height: 4px;
  background: var(--red);
  flex-shrink: 0;
}

.eyebrow--light {
  color: var(--muted-4);
}

.eyebrow--red {
  color: var(--red);
  letter-spacing: 3px;
}

/* ---------- Drafting layer ----------
   Sheet furniture: the numbered rules, ticks, registration
   marks and annotations that frame content the way a
   mechanical drawing frames a part. Structural only — it
   never carries meaning that isn't also in the prose, so it
   can be ignored by a screen reader without loss. */

/* A ruled, numbered header line. Put the sheet reference in
   data-sheet; the rule and its end ticks draw themselves. */
.sheet-rule {
  order: -1;
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--technical-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--tech-ink);
  /* Ticks turning up off each end of the rule, as on a
     dimension line. Drawn as backgrounds so the element
     keeps a single box. */
  background-image: linear-gradient(var(--tech-ink) 0 0),
    linear-gradient(var(--tech-ink) 0 0);
  background-size: 1px 7px, 1px 7px;
  background-position: left bottom, right bottom;
  background-repeat: no-repeat;
}

.sheet-rule__ref::before {
  content: "◦ ";
  color: var(--accent);
}

.sheet-rule__meta {
  color: var(--tech-ink);
  opacity: 0.72;
}

/* Two annotations don't fit on a phone without both of them
   wrapping. The sheet reference is the part worth keeping. */
@media (max-width: 620px) {
  .sheet-rule__meta {
    display: none;
  }
}

/* Registration marks on a framed image — two corners only, set
   against the notch so the frame reads as a drawn detail. */
.reg-marks {
  position: relative;
}

.reg-marks::before,
.reg-marks::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  pointer-events: none;
  z-index: 2;
}

.reg-marks::before {
  top: calc(var(--sp-3) * -1);
  left: calc(var(--sp-3) * -1);
  border-top: 1px solid var(--tech-ink);
  border-left: 1px solid var(--tech-ink);
}

.reg-marks::after {
  right: calc(var(--sp-3) * -1);
  bottom: calc(var(--sp-3) * -1);
  border-right: 1px solid var(--tech-ink);
  border-bottom: 1px solid var(--tech-ink);
}

/* A mono annotation hung off a hairline, for specs and figures. */
.tech-note {
  margin: 0;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--tech-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-mono-tight);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--tech-ink);
}

/* Paired spec readout — a value over its label, ruled off like
   a title block. Use in rows of three or four. */
.spec-block {
  display: grid;
  gap: var(--sp-1);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--technical-dim);
}

.spec-block__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: inherit;
}

.spec-block__label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--tech-ink);
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

.lede {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--soft);
}

.body-copy {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--n-700);
  max-width: var(--measure);
}

.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Photo placeholders ---------- */

.photo-slot {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  background: var(--n-150);
  --notch: var(--notch-xl);
  clip-path: var(--clip-notch-alt);
}
.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-grade);
}

/* The tint sits above the image and below any caption. */
.photo-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--photo-tint);
}

/* For images that have to stay true — colour-critical work
   samples, anything a customer is judging on its own merits. */
.photo-slot--true img {
  filter: none;
}

.photo-slot--true::after {
  display: none;
}

.photo-slot--dark {
  background: var(--n-900);
}

.media-frame {
  position: relative;
}

.media-frame__back {
  display: none;
}

.media-frame__front {
  position: relative;
  height: 400px;
  overflow: hidden;
  --notch: var(--notch-xl);
  clip-path: var(--clip-notch-alt);
}

.media-frame__front .photo-slot {
  clip-path: none;
}

.media-frame--flip .media-frame__front {
  clip-path: var(--clip-notch);
}

.media-frame--tall .media-frame__front {
  height: 460px;
}

/* ============================================================
   REVEAL
   Four variants so elements don't all perform the same move.
   Content is visible by default; motion.js opts in by adding
   .reveal, which means no-JS and reduced-motion both render the
   finished state with no extra rules.
   ============================================================ */

.reveal {
  --reveal-delay: 0ms;
}

/* --- fade: opacity + short rise (default) --- */
.reveal--fade {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity var(--dur-slower) var(--ease-out) var(--reveal-delay),
    transform var(--dur-slower) var(--ease-out-expo) var(--reveal-delay);
}

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

/* --- lines: per-word mask, for display headings --- */
.reveal--lines .word {
  display: inline-block;
  overflow: hidden;
  /* Room for descenders so the mask doesn't shave the type. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  vertical-align: bottom;
}

.reveal--lines .word__in {
  display: inline-block;
  transform: translate3d(0, 105%, 0);
  transition: transform 900ms var(--ease-out-expo);
  transition-delay: var(--word-delay, 0ms);
}

.reveal--lines.is-in .word__in {
  transform: none;
}

/* --- wipe: clip reveal, for imagery --- */
.reveal--wipe {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms var(--ease-out-expo) var(--reveal-delay);
}

.reveal--wipe.is-in {
  clip-path: inset(0 0 0% 0);
}

/* Counter-scale so the photo settles rather than simply appearing. */
.reveal--wipe img {
  transform: scale(1.08);
  transition: transform 1400ms var(--ease-out-expo) var(--reveal-delay);
}

.reveal--wipe.is-in img {
  transform: none;
}

/* --- stagger: direct children in sequence --- */
.reveal--stagger > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out) var(--child-delay, 0ms),
    transform var(--dur-slow) var(--ease-out-expo) var(--child-delay, 0ms);
}

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

/* A child that declares its own variant opts out of the parent's
   fade and runs its own move instead. */
.reveal--stagger > .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--fade,
  .reveal--wipe,
  .reveal--stagger > *,
  .reveal--lines .word__in {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}


/* ---------- Hero ---------- */

.hero {
  --btn-surface: var(--charcoal);
  position: relative;
  background: var(--charcoal);
  min-height: 620px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media .photo-slot {
  min-height: 100%;
  background: var(--n-900);
  clip-path: none;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(15, 16, 18, 0.95) 0%,
    rgba(15, 16, 18, 0.8) 46%,
    rgba(20, 10, 11, 0.42) 100%
  );
  /* motion.js raises this as the hero scrolls away, so the type
     stays readable while the photo brightens. */
  opacity: var(--hero-scrim, 1);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  padding: clamp(56px, 9vw, 96px) var(--pad) clamp(48px, 7vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
}

.hero__content .hero__actions,
.hero__content a {
  pointer-events: auto;
}

.hero__eyebrow {
  margin-bottom: 26px;
}

.hero__eyebrow .eyebrow__bar {
  width: 44px;
}

.hero__eyebrow .eyebrow {
  color: var(--n-200);
}

.hero h1 {
  margin: 0;
  max-width: 800px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-6xl);
  line-height: 0.96;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
}

.hero h1 .accent {
  color: var(--red);
}

.hero__lede {
  margin: 26px 0 0;
  max-width: 600px;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 38px;
}

.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 42px;
}

.trust-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 1.5px;
  color: var(--soft-2);
  display: flex;
  align-items: center;
  gap: 9px;
  text-transform: uppercase;
}

.trust-chip__mark {
  display: inline-flex;
  color: var(--red);
}

.trust-chip__mark svg {
  display: block;
  width: 15px;
  height: 15px;
}

/* ---------- Page hero (inner) ---------- */

.page-hero {
  --btn-surface: var(--charcoal);
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
}

/* Blueprint ruling behind the title. Sits under the content and drifts
   in as the loader lifts, so the hero has depth before a single word
   has moved. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--technical-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--technical-dim) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Fades out toward the bottom-right so the type always sits on flat
     charcoal and the grid reads as a texture, not a table. */
  -webkit-mask-image: radial-gradient(
    120% 150% at 0% 0%,
    #000 0%,
    transparent 72%
  );
  mask-image: radial-gradient(120% 150% at 0% 0%, #000 0%, transparent 72%);
  opacity: 0.5;
  pointer-events: none;
}

/* The 4px rule is drawn as an element so it can sweep across on entry
   rather than simply being there. */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--red);
  transform-origin: left;
}

.page-hero__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 84px) var(--pad) clamp(44px, 6vw, 64px);
}

/* Pre-entry states are scoped to .js-motion so a page without JS — or
   with the motion layer disabled — renders the finished hero. */
.js-motion .page-hero::before {
  opacity: 0;
  transform: scale(1.08);
}

.js-motion .page-hero::after {
  transform: scaleX(0);
}

.js-motion.is-ready .page-hero::before {
  opacity: 0.5;
  transform: none;
  transition:
    opacity 1100ms var(--ease-out) 120ms,
    transform 1600ms var(--ease-out-expo) 120ms;
}

.js-motion.is-ready .page-hero::after {
  transform: scaleX(1);
  transition: transform 1000ms var(--ease-out-expo) 260ms;
}

.js-reduced-motion .page-hero::before,
.js-reduced-motion .page-hero::after {
  transition: none;
}

.page-hero__inner--contact {
  padding-bottom: clamp(40px, 5vw, 56px);
}

.page-hero__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted-4);
}

.page-hero h1 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-5xl);
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
}

.page-hero .lede {
  margin: 22px 0 0;
  max-width: 640px;
}

.page-hero__actions {
  margin-top: 32px;
}

/* ---------- Contact path chooser ----------

   Two full-width cards, stacked. Unchosen, each states who it is for
   and what it covers. Choosing one expands it in place and shrinks the
   other to a labelled bar directly beneath, so the alternative is
   always readable and always one obvious click away. */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 44px);
  align-items: start;
  min-width: 0;
}

.contact-layout > * {
  min-width: 0;
}

@media (min-width: 960px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  }
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.6vw, 16px);
  min-width: 0;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.contact-grid > * {
  min-width: 0;
}

.contact-grid .form-card {
  scroll-margin-top: calc(var(--header-h) + 24px);
  position: relative;
  border: 2px solid var(--border-light);
}

.contact-grid .form-card--dark {
  border-color: var(--border-dark);
}

/* The path you passed on always sits directly above the one you opened,
   whichever order they appear in the markup. Below the form it would
   only be found after scrolling the whole thing — by which point
   switching costs you the answers you already typed. */
.contact-grid.is-chosen .form-card:not(.is-active) {
  order: -1;
}

/* ---------- Card head as the chooser surface ---------- */

.form-card__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(24px, 3vw, 32px) clamp(22px, 3vw, 30px);
  transition: background var(--dur-base) var(--ease-out);
}

.form-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.05;
}

/* The button carries only the title as its accessible name; the
   stretched hit area makes the whole head clickable. */
.form-card__trigger {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}

.form-card__trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.form-card__trigger:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

.form-card__blurb {
  margin: 0;
  max-width: 56ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-inverse-muted);
}

.form-card__cue,
.form-card__switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--white);
}

.form-card__cue {
  margin-top: 6px;
}

.form-card__cue svg,
.form-card__switch svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.form-card__head:hover .form-card__cue svg,
.form-card__head:hover .form-card__switch svg {
  transform: translateX(5px);
}

.form-card__head--red:hover {
  background: #b3151d;
}

.form-card__head--dark:hover {
  background: #000;
}

/* Progress belongs to a form in progress, not to a closed card. */
.form-card:not(.is-active) .form-progress,
.form-card.is-active .form-card__blurb,
.form-card.is-active .form-card__cue,
.form-card__switch {
  display: none;
}

.form-card__reveal[hidden] {
  display: none;
}

.form-card__reveal.is-entering {
  animation: form-panel-in 520ms var(--ease-out-expo) both;
}

@keyframes form-panel-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-card__reveal.is-entering {
    animation: none;
  }
}

/* ---------- Collapsed switch bar ----------
   Spelled out, because "the other coloured block" is not an
   instruction anyone should have to infer. */

.contact-grid.is-chosen .form-card:not(.is-active) .form-card__head {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 16px clamp(20px, 2.5vw, 28px);
}

.contact-grid.is-chosen .form-card:not(.is-active) .form-card__title {
  font-size: var(--fs-lg);
}

.contact-grid.is-chosen .form-card:not(.is-active) .form-card__audience,
.contact-grid.is-chosen .form-card:not(.is-active) .form-card__blurb,
.contact-grid.is-chosen .form-card:not(.is-active) .form-card__cue {
  display: none;
}

.contact-grid.is-chosen .form-card:not(.is-active) .form-card__switch {
  display: inline-flex;
}

/* ---------- Section shells ---------- */

.section {
  position: relative;
}

/* No bottom rule on either light surface. A hairline under every
   band is what made the page read as a stack of slabs — the change
   in surface already does the separating, and dropping the line
   lets panels cross a boundary without cutting themselves in half. */
.section--light {
  --btn-surface: var(--light);
  background: var(--light);
}

.section--white {
  --btn-surface: var(--white);
  background: var(--white);
}

.section--dark {
  --btn-surface: var(--charcoal);
  --tech-ink: var(--technical-light);
  background: var(--charcoal);
}

.section__pad {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.section__pad--tight {
  padding-top: var(--section-y-tight);
  padding-bottom: var(--section-y-tight);
}

.section__pad--loose {
  padding-top: clamp(64px, 9vw, 96px);
  padding-bottom: clamp(64px, 9vw, 96px);
}

.section__pad--services-head {
  padding-top: var(--section-y);
  padding-bottom: 8px;
}

.section__pad--reviews {
  padding-top: clamp(64px, 8vw, 88px);
  padding-bottom: clamp(64px, 8vw, 88px);
}

.section__pad--page {
  padding-top: clamp(52px, 7vw, 76px);
  padding-bottom: clamp(52px, 7vw, 76px);
}

.section__pad--contact {
  padding-top: clamp(40px, 6vw, 60px);
  padding-bottom: clamp(64px, 8vw, 88px);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.section-head--stack {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}

.section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-section);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
}

.section-head__sub {
  margin: 16px 0 0;
  max-width: 640px;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--muted);
  flex: 1 1 100%;
}

/* ---------- Service jump tabs ---------- */

#services .section-head {
  margin-bottom: 24px;
}

.icon-sprite {
  display: none;
}

/* Service index — the six services as a card grid. It is both the
   jump nav and a readout of where you are in the stack below, so its
   active state is driven by scroll position, not just by clicks. */
.svc-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-14);
}

/* The six cards carry a fixed red / charcoal / white mix rather than a
   selected state — the rail already reports which service you're on.
   Each tone is a set of variables so the shared rules below stay
   single-purpose, and the position-to-tone map lives in one place. */
.svc-index__card {
  --card-bg: var(--charcoal);
  --card-fg: var(--white);
  --card-num: var(--text-inverse-tertiary);
  --card-rule: var(--rule-inverse-faint);
  --card-icon: var(--technical);
  --card-wipe: var(--accent);

  --notch: var(--notch-md);
  clip-path: var(--clip-notch);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-8);
  min-height: 148px;
  padding: var(--sp-5);
  background: var(--card-bg);
  border: 0;
  color: var(--card-fg);
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

/* Two tones alternating. At three columns plain odd/even already lands
   as a checkerboard, so no card touches its own colour. */
.svc-index__card:nth-child(odd) {
  --card-bg: var(--accent);
  --card-num: var(--ink-inverse-faint);
  --card-rule: var(--rule-inverse);
  --card-icon: var(--ink-inverse-strong);
  --card-wipe: var(--white);
}

/* Two stacked rules: a static hairline, and a bar that wipes in from
   the leading edge on hover. */
.svc-index__card::before,
.svc-index__card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.svc-index__card::before {
  background: var(--card-rule);
}

.svc-index__card::after {
  background: var(--card-wipe);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.svc-index__card:hover::after,
.svc-index__card:focus-visible::after {
  transform: scaleX(1);
}

/* All six labels sit at full strength — none is "current", so hover is
   carried by the lift, the wipe bar, and the icon instead. */
.svc-index__card:hover {
  transform: translateY(-3px);
}

.svc-index__card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.svc-index__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}

.svc-index__num {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-mono);
  color: var(--card-num);
  transition: color var(--dur-base) var(--ease-out);
}

.svc-index__icon {
  display: block;
  color: var(--card-icon);
  transition:
    color var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.svc-index__icon svg {
  display: block;
  width: 34px;
  height: 34px;
}

.svc-index__card:hover .svc-index__icon {
  color: var(--card-wipe);
  transform: translateY(-3px);
}

.svc-index__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: var(--lh-tight);
}

@media (max-width: 1079px) {
  .svc-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* At an even number of columns odd/even stops alternating and turns
     into stripes down each column, so 3 and 4 swap to restore the
     checkerboard. */
  .svc-index__card:nth-child(3) {
    --card-bg: var(--charcoal);
    --card-num: var(--text-inverse-tertiary);
    --card-rule: var(--rule-inverse-faint);
    --card-icon: var(--technical);
    --card-wipe: var(--accent);
  }

  .svc-index__card:nth-child(4) {
    --card-bg: var(--accent);
    --card-num: var(--ink-inverse-faint);
    --card-rule: var(--rule-inverse);
    --card-icon: var(--ink-inverse-strong);
    --card-wipe: var(--white);
  }
}

@media (max-width: 560px) {
  .svc-index {
    gap: var(--sp-2);
    margin-bottom: var(--sp-10);
  }

  .svc-index__card {
    min-height: 0;
    gap: var(--sp-5);
    padding: var(--sp-4);
  }

  .svc-index__label {
    font-size: var(--fs-base);
  }

  .svc-index__icon svg {
    width: 22px;
    height: 22px;
  }
}

/* ---------- Condensed service rail ----------------------------
   The grid picker condenses into this bar once you scroll into the
   stack. It docks flush to the bottom of the header rather than
   floating, but stays light against the charcoal navbar so it reads
   as a distinct second tier instead of more chrome. Purely a visual
   mirror of the grid — hidden from assistive tech so the six controls
   aren't announced twice. */

.svc-rail {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: var(--accent);
 
  box-shadow: 0 10px 24px rgba(11, 12, 13, 0.24);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--dur-slow) var(--ease-out-expo),
    opacity var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-slow);
}

.svc-rail.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform var(--dur-slow) var(--ease-out-expo),
    opacity var(--dur-base) var(--ease-out),
    visibility 0s;
}

.svc-rail__inner {
  display: flex;
  align-items: stretch;
  max-width: var(--max);
  height: var(--svc-rail-h);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.svc-rail__items {
  display: flex;
  align-items: stretch;
  gap: var(--sp-1);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.svc-rail__items::-webkit-scrollbar {
  display: none;
}

.svc-rail__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  padding: 0 var(--sp-4);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--ink-inverse-faint);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

/* Items cascade in behind the bar so the picker reads as one object
   condensing, not as a second bar appearing. */
.svc-rail.is-visible .svc-rail__item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 40ms + 80ms);
}

.svc-rail__item svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.svc-rail__item:hover {
  color: var(--white);
}

/* White marks the active service in both the grid and the rail, so the
   two read as one control in different states. */
.svc-rail__item.is-active {
  color: var(--white);
  border-bottom-color: var(--white);
}

.svc-rail__count {
  display: flex;
  align-items: center;
  flex: none;
  /* Anchored to the far edge so the bar has two weighted ends instead
     of everything bunched to the left. */
  margin-left: auto;
  padding-left: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-mono);
  color: var(--ink-inverse-faint);
}

.svc-rail__count [data-svc-rail-count] {
  color: var(--white);
}

@media (max-width: 900px) {
  .svc-rail__inner {
    padding: 0;
  }

  .svc-rail__count {
    display: none;
  }

  /* Six labelled tabs never fit a phone, so the strip pans. Snapping
     and faded edges make that read as a deliberate affordance rather
     than content accidentally running off the screen. */
  .svc-rail__items {
    padding: 0 var(--pad);
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--pad);
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--pad),
      #000 calc(100% - var(--pad)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--pad),
      #000 calc(100% - var(--pad)),
      transparent 100%
    );
  }

  .svc-rail__item {
    scroll-snap-align: center;
    font-size: var(--fs-xs);
    padding: 0 var(--sp-3);
  }

  .svc-rail__item svg {
    width: 16px;
    height: 16px;
  }
}

/* ---------- Service rows (home) ---------- */

/* ---------- Service stack ----------
   One pinned frame on the left, copy scrolling past it on the
   right. Replaces six identical alternating rows so the section
   reads as a single continuous move instead of a slideshow. */

.svc-stack {
  position: relative;
}

.svc-stack__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-10);
}

.svc-stack__media {
  display: none;
}

.svc-stack__list {
  display: flex;
  flex-direction: column;
}

/* ---- Item ---- */

.svc-item {
  position: relative;
  padding: var(--sp-10) 0;
  border-top: 1px solid var(--border-subtle);
  scroll-margin-top: calc(var(--header-h) + var(--sp-8));
}

.svc-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.svc-item__index {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-mono);
  color: var(--technical);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.svc-item__index::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--technical-faint);
}

.svc-item h3 {
  margin: var(--sp-4) 0 var(--sp-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  line-height: var(--lh-display);
  color: var(--text-primary);
}

.svc-item__blurb {
  margin: 0 0 var(--sp-5);
  max-width: 46ch;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* Mobile-only image; the desktop layout uses the pinned frame. */
.svc-item__media {
  margin: 0 0 var(--sp-6);
  --notch: var(--notch-lg);
  clip-path: var(--clip-notch);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--n-150);
}

.svc-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 960px) {
  /* Deliberately off-centre: the frame is the wider column and
     runs off the left edge of the page, so the section reads as
     one composition rather than two equal halves. */
  .svc-stack__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 104px);
    align-items: start;
  }

  .svc-stack__media {
    display: block;
    position: sticky;
    /* Clears the header, the condensed picker beneath it, and a gap,
       so the photo never sits flush against the rail. */
    top: calc(var(--header-h) + var(--svc-rail-h) + var(--sp-6));
    margin-left: calc(-1 * var(--wrap-inset));
  }

  .svc-item__media {
    display: none;
  }

  .svc-item {
    /* Each item owns most of a screen, which is enough for the
       pinned frame to register as its own beat. It used to be
       78vh, which made this one section over half the page and
       left everything below it feeling like an appendix. */
    min-height: 68vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-12) 0;
  }

  .svc-item:first-child {
    padding-top: var(--sp-8);
  }
}

/* ---- Pinned frame ---- */

.svc-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  --notch: var(--notch-xl);
  clip-path: var(--clip-notch);
  overflow: hidden;
  background: var(--n-900);
}

/* Crossfade stays short on purpose. Scrubbing the section quickly can
   cross every shot in well under a second, and long transitions just
   pile up into mush. Only the active shot is promoted — keeping all six
   full-bleed layers on the compositor is what makes a fast fling stutter. */
.svc-frame__shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.svc-frame__shot.is-active {
  opacity: 1;
  transform: scale(1);
  will-change: opacity, transform;
}

.svc-frame__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Schematic overlay — four corner brackets. Makes the frame
   read as an instrument rather than a stock photo. */
.svc-frame__grid {
  position: absolute;
  inset: var(--sp-5);
  z-index: 2;
  pointer-events: none;
}

.svc-frame__grid::before,
.svc-frame__grid::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid var(--rule-inverse-strong);
}

.svc-frame__grid::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}

.svc-frame__grid::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}

.svc-frame__readout {
  position: absolute;
  left: var(--sp-6);
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: 3;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ink-inverse-muted);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

.svc-frame__readout-id {
  color: var(--accent);
}

/* Progress ticks down the side of the frame. */
.svc-frame__ticks {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.svc-frame__tick {
  width: 18px;
  height: 2px;
  background: var(--rule-inverse);
  transition: background var(--dur-base) var(--ease-out),
    width var(--dur-base) var(--ease-out);
}

.svc-frame__tick.is-active {
  width: 30px;
  background: var(--accent);
}

/* Keeps the readout legible over bright photography. */
.svc-frame__veil {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(8, 9, 10, 0.82) 0%,
    rgba(8, 9, 10, 0.45) 38%,
    rgba(8, 9, 10, 0) 100%
  );
}

@media (min-width: 960px) {
  /* Height rather than ratio, so the frame always clears the
     viewport once the sticky offset is subtracted. */
  .svc-frame {
    aspect-ratio: auto;
    width: 100%;
    height: min(74vh, 720px);
    /* Square off the bleeding edge; only the inboard corners
       carry the notch. */
    --notch: var(--notch-xl);
    clip-path: polygon(
      0 0,
      calc(100% - var(--notch)) 0,
      100% var(--notch),
      100% 100%,
      0 100%
    );
  }
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  gap: 13px;
  align-items: baseline;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 600;
}

.check-list__mark {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--technical);
  flex-shrink: 0;
}

.check-list--loose {
  gap: 13px;
  margin-bottom: 0;
}

.check-list--loose li {
  font-weight: 400;
  font-size: var(--fs-base);
}

.check-list--loose strong {
  font-weight: 700;
}

.check-list--loose .sub {
  color: var(--muted-2);
}


/* ---------- Why / split ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}

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

  .split--start {
    align-items: start;
  }

  /* Off-centre variant: narrower copy column, media running off
     the right edge of the page. */
  .split--offset {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(48px, 6vw, 104px);
  }

  .split--offset > .media-frame {
    margin-right: calc(-1 * var(--wrap-inset));
  }

  .split--offset > .media-frame .media-frame__front {
    height: min(70vh, 620px);
    /* Square off the bleeding edge. */
    --notch: var(--notch-xl);
    clip-path: polygon(
      var(--notch) 0,
      100% 0,
      100% 100%,
      0 100%,
      0 var(--notch)
    );
  }
}

.split h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
}

.split .body-copy + .body-copy {
  margin-top: 18px;
}

.split .check-list {
  margin-top: 26px;
  margin-bottom: 0;
}

.split .btn {
  margin-top: 30px;
}

.split .promo-card {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  min-height: 280px;
  padding: 44px 40px;
}

/* ---------- Deliver grid (About) ---------- */

.deliver-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

a.deliver-card {
  --notch: var(--notch-md);
  clip-path: var(--clip-notch);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-6);
  margin: 0;
  background: var(--surface);
  border-top: 3px solid var(--technical);
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out),
    border-top-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

a.deliver-card:hover {
  border-top-color: var(--accent);
  transform: translateY(-3px);
}

a.deliver-card:hover,
a.deliver-card:focus-visible {
  background: var(--n-100);
  color: var(--ink);
}

a.deliver-card:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.deliver-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--red);
  text-transform: uppercase;
}

.deliver-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--ink);
}

.deliver-card__copy {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--muted);
  flex: 1;
}

.deliver-card__arrow {
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--red);
  margin-top: 8px;
  transition: transform 0.2s var(--ease);
}

a.deliver-card:hover .deliver-card__arrow,
a.deliver-card:focus-visible .deliver-card__arrow {
  transform: translateX(4px);
}

.deliver-closing {
  margin: 40px 0 0;
  max-width: 720px;
}

@media (max-width: 1079px) {
  .deliver-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  a.deliver-card {
    padding: 24px 20px 28px;
  }
}

@media (max-width: 640px) {
  .deliver-grid {
    grid-template-columns: 1fr;
  }
}

.split .promo-card .btn-row {
  width: 100%;
  margin-top: 8px;
}

.split .promo-card .btn-row .btn {
  margin-top: 0;
  flex: 1 1 auto;
  justify-content: center;
}

/* ---------- Service area band ---------- */

.area-band h2 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}

/* Filled tiles, never outlined. A 1px stroke can't survive the notch
   clip, so separation comes from the fill and the accent bar instead. */

.county-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
  gap: var(--sp-2);
}

.county {
  /* Local clip — the inherited --clip-notch resolves --notch at :root,
     so it always comes through at the md step. */
  --notch: var(--notch-sm);
  --county-clip: polygon(
    var(--notch) 0,
    100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%,
    0 var(--notch)
  );
  --county-fill: var(--surface-inverse-raised);
  --county-accent: var(--technical);
  --county-bar: 3px;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5);
  clip-path: var(--county-clip);
  border: 0;
  background: var(--county-fill);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-inverse-secondary);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.county::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--county-bar);
  background: var(--county-accent);
  transition:
    width var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.county:hover {
  --county-fill: var(--n-800);
  --county-accent: var(--accent);
  --county-bar: 6px;
  color: var(--text-inverse);
}

/* "+ More" — the one tile that actually goes somewhere. */
.county--link {
  color: var(--text-inverse-tertiary);
}

.county--link::after {
  content: "⟶";
  margin-left: auto;
  padding-left: var(--sp-3);
  font-size: var(--fs-sm);
  transition: transform var(--dur-base) var(--ease-out);
}

.county--link:hover {
  color: var(--text-inverse);
}

.county--link:hover::after {
  transform: translateX(3px);
}

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

/* Light surfaces: drop-shadow rather than box-shadow, so the
   elevation follows the notch instead of being clipped by it. */
.county--light {
  --county-fill: var(--surface-raised);
  --county-accent: var(--accent);
  color: var(--text-secondary);
  filter: drop-shadow(var(--shadow-sm));
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    filter var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.county--light:hover {
  --county-fill: var(--surface-raised);
  color: var(--text-primary);
  filter: drop-shadow(var(--shadow-md));
}

/* ---------- Reviews ---------- */

/* Heading on the left, aggregate score on the right. The score used to
   be an emoji caption tucked under the cards, which buried the only
   third-party proof on the page. */
.reviews-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-bottom: 44px;
}

@media (min-width: 860px) {
  .reviews-head {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--sp-10);
  }
}

.reviews-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-section);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
}

.rating-badge {
  --notch: var(--notch-sm);
  clip-path: var(--clip-notch);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  background: var(--charcoal);
  /* Keeps the stamp from stretching to the grid track on wide screens. */
  justify-self: start;
}

.rating-badge__score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: 0.85;
  color: var(--white);
}

.rating-badge__detail {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.rating-badge__label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-inverse-tertiary);
}

.rating-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--red);
}

.rating-stars svg {
  display: block;
  width: 16px;
  height: 16px;
}

.rating-stars--sm svg {
  width: 14px;
  height: 14px;
}

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

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

.review-card {
  --notch: var(--notch-md);
  position: relative;
  clip-path: var(--clip-notch);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--technical);
  padding: var(--sp-8) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: box-shadow var(--dur-base) var(--ease-out),
    border-top-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.review-card:hover {
  box-shadow: var(--shadow-md);
  border-top-color: var(--accent);
  transform: translateY(-3px);
}

/* Oversized quote mark as a watermark. Sits behind the copy and is
   clipped by the card's notch, so it reads as part of the panel. */
.review-card__mark {
  position: absolute;
  top: -34px;
  right: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 150px;
  line-height: 1;
  color: var(--technical);
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
  transition: opacity var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.review-card:hover .review-card__mark {
  color: var(--accent);
  opacity: 0.16;
}

.review-card__quote {
  position: relative;
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--muted);
  flex: 1;
}

.review-card__by {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}

.review-card__name {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 1.5px;
  color: var(--ink);
  text-transform: uppercase;
}

.review-card__place {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 1.5px;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

/* ---------- Promo bands ---------- */

.promo-card {
  --btn-surface: var(--charcoal);
  --notch: var(--notch-lg);
  /* Same blueprint ruling as the page hero, so the charcoal panels
     read as one family rather than two unrelated slabs. */
  --promo-grid: var(--technical-dim);
  position: relative;
  overflow: hidden;
  clip-path: var(--clip-notch);
  background: var(--charcoal);
  padding: 52px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  transition: background 0.18s ease, filter 0.18s ease;
  text-decoration: none;
  color: inherit;
}

.promo-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(var(--promo-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--promo-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(
    90% 160% at 100% 0%,
    #000 0%,
    transparent 70%
  );
  mask-image: radial-gradient(90% 160% at 100% 0%, #000 0%, transparent 70%);
  opacity: 0.55;
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out-expo);
}

/* Content has to clear the ruling. */
.promo-card > * {
  position: relative;
  z-index: 1;
}

.promo-card:hover {
  background: var(--n-850);
  color: inherit;
}

.promo-card:hover::before {
  opacity: 0.85;
  transform: translate3d(-10px, 0, 0);
}

.promo-card--red {
  --btn-surface: var(--red);
  --promo-grid: var(--rule-inverse);
  background: var(--red);
}

.promo-card--red:hover {
  filter: brightness(1.06);
  background: var(--red);
}

.promo-card__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 2.5px;
  color: var(--muted-4);
  text-transform: uppercase;
}

.promo-card--red .promo-card__kicker {
  color: var(--ink-inverse-faint);
}

.promo-card h3 {
  margin: 10px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.05;
}

.promo-card--red h3 {
  margin: 10px 0 0;
}

/* The red card only drops its heading margin when nothing follows.
   Where it carries body copy, muted grey would disappear into the
   fill, so the copy switches to inverse ink. */
.promo-card--red h3 + p {
  margin-top: var(--sp-2);
  color: var(--ink-inverse-muted);
}

.promo-card p {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--muted-4);
  max-width: 480px;
}

/* ---------- Financing panel ---------- */

.panel-dark {
  background: var(--charcoal);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-dark__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 2.5px;
  color: var(--red);
  text-transform: uppercase;
}

.panel-dark .check-list li {
  color: var(--soft-2);
  font-weight: 400;
}

.panel-dark__note {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 1.5px;
  color: var(--n-500);
  border-top: 1px solid var(--border-dark);
  padding-top: 16px;
  text-transform: uppercase;
}

/* ---------- Contact forms ---------- */

.form-card {
  border: 1px solid var(--border-light);
  background: var(--white);
  display: flex;
  flex-direction: column;
}

.form-card__head {
  padding: 24px 30px;
}

.form-card__head--red {
  background: var(--red);
}

.form-card__head--dark {
  background: var(--black);
  border-bottom: 1px solid var(--border-dark);
}

.form-card__audience {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.form-card__head--red .form-card__audience {
  color: var(--ink-inverse-muted);
}

.form-card__head--dark .form-card__audience {
  color: var(--red);
}

.form-card__body {
  position: relative;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-card--dark {
  --btn-surface: var(--charcoal);
  background: var(--charcoal);
  border-color: var(--border-dark);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field[hidden] {
  display: none !important;
}

.field__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink);
}

.form-card--dark .field__label {
  color: var(--n-150);
}

.field__control {
  padding: 13px 14px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  outline: none;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  border-radius: 0;
  /* No clip-path — it eats the 1px stroke (use .notch-outline on wraps) */
  -webkit-appearance: none;
  appearance: none;
}

.field__control:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--accent-veil);
}

.field__control::placeholder {
  color: var(--muted-5);
}

.form-card--dark .field__control {
  border-color: var(--n-700);
  background: var(--charcoal-2);
  color: var(--white);
}

.form-card--dark .field__control::placeholder {
  color: var(--n-500);
}

.form-card--dark .field__control:focus {
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Select — border/bg on wrap so native dark menulist chrome doesn’t nest */
.field__select {
  position: relative;
  display: block;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.form-card--dark .field__select {
  border-color: var(--n-700);
  background: var(--charcoal-2);
}

.field__select::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235B636D' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  pointer-events: none;
  z-index: 1;
}

.form-card--dark .field__select::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23C9CCD1' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
}

.field__select:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--accent-veil);
}

.form-card--dark .field__select:focus-within {
  box-shadow: 0 0 0 3px var(--accent-glow);
}

select.field__control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  padding-right: 44px;
  border: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  color-scheme: light;
  cursor: pointer;
}

select.field__control:focus {
  border-color: transparent;
  box-shadow: none;
}

select.field__control::-ms-expand {
  display: none;
}

.form-card--dark select.field__control {
  background: transparent;
  background-image: none;
  color: var(--white);
}

/* Date picker — custom calendar icon (native glyph stays black on dark UIs) */
.field--date {
  position: relative;
}

input[type="date"].field__control {
  position: relative;
  color-scheme: light;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='5' width='18' height='16' rx='1.5' stroke='%235B636D' stroke-width='1.8'/%3E%3Cpath d='M3 10h18' stroke='%235B636D' stroke-width='1.8'/%3E%3Cpath d='M8 3v4M16 3v4' stroke='%235B636D' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

input[type="date"].field__control::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0; /* hide black system icon; keep full-field click target */
}

.form-card--dark input[type="date"].field__control {
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='5' width='18' height='16' rx='1.5' stroke='%23E8EAED' stroke-width='1.8'/%3E%3Cpath d='M3 10h18' stroke='%23E8EAED' stroke-width='1.8'/%3E%3Cpath d='M8 3v4M16 3v4' stroke='%23E8EAED' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
  background-color: var(--charcoal-2);
}

.field__control.is-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--accent-veil);
}

.field__select .field__control.is-invalid {
  border-color: transparent;
  box-shadow: none;
}

.field.is-invalid .field__select {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--accent-veil);
}

.field__error {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--red);
}

.form-card--dark .field__error {
  color: var(--danger-inverse);
}

/* Address autocomplete (Google Places — PlaceAutocompleteElement) */
.field--address {
  position: relative;
}

.field__places {
  width: 100%;
  color-scheme: light;
  --gmp-mat-color-surface: var(--input-bg);
  --gmp-mat-color-on-surface: var(--ink);
  --gmp-mat-color-primary: var(--red);
  font-family: var(--font-body);
}

.field--address.is-invalid .field__places {
  outline: 1px solid var(--red);
  box-shadow: 0 0 0 3px var(--accent-veil);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 640px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.file-drop {
  position: relative;
  border: 2px dashed var(--n-700);
  background: var(--n-900);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s ease;
}

.file-drop:hover,
.file-drop:focus-within {
  border-color: var(--red);
}

.file-drop.is-invalid {
  border-color: var(--red);
}

.file-drop__error {
  font-size: var(--fs-xs);
  color: var(--danger-inverse);
  line-height: 1.35;
}

.file-drop__icon {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--red);
}

.file-drop__title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--white);
}

.file-drop__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 1.5px;
  color: var(--n-500);
  text-transform: uppercase;
}

.file-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.form-note {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 1.5px;
  color: var(--muted-5);
  text-align: center;
  text-transform: uppercase;
}

.form-card__body > .form-note:first-child {
  text-transform: none;
  letter-spacing: 0.2px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--muted);
}

.form-card--dark .form-card__body > .form-note:first-child {
  color: var(--n-500);
}

.form-note--start {
  text-align: left;
  margin: 0 0 var(--sp-1);
  color: var(--text-secondary);
}

.form-submit {
  width: 100%;
  margin-top: 4px;
  text-align: center;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-status {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  text-align: center;
}

.form-status.is-success {
  color: var(--success);
}

.form-status.is-error {
  color: var(--red);
}

.form-card--dark .form-status.is-success {
  color: var(--success-inverse);
}

/* ---------- Form completion meter ---------- */

/* Caption under the rule, not beside it — a label that grows from
   "5 questions" to "All set" would otherwise shove the track around
   every time the count changed. */
.form-progress {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: var(--sp-4);
}

.form-progress__track {
  position: relative;
  height: 3px;
  background: var(--rule-inverse);
  overflow: hidden;
}

.form-progress__bar {
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.form-progress__label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-inverse-faint);
  transition: color var(--dur-base) var(--ease-out);
}

.form-card.is-complete .form-progress__label {
  color: var(--white);
}

/* Nothing left to complete once the request is in. */
.form-card.is-sent .form-progress {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .form-progress__bar {
    transition: none;
  }
}

/* ---------- Answered-field tick ----------
   Lives on the label so it can never collide with the select caret or
   the control's own padding. */

.field__label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field.is-valid > .field__label::after {
  content: "";
  width: 9px;
  height: 5px;
  margin-bottom: 2px;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  transform: rotate(-45deg);
  animation: field-tick-in 260ms var(--ease-out-expo) both;
}

.form-card--dark .field.is-valid > .field__label::after {
  border-color: var(--success-inverse);
}

@keyframes field-tick-in {
  from {
    opacity: 0;
    transform: rotate(-45deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: rotate(-45deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .field.is-valid > .field__label::after {
    animation: none;
  }
}

/* ---------- Sent confirmation ---------- */

/* An author `display` beats the UA rule for [hidden], so the attribute
   has to be honoured explicitly or the panel stays in the page. */
.form-success[hidden] {
  display: none;
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: clamp(32px, 5vw, 52px) clamp(24px, 4vw, 44px);
  /* Animated rather than transitioned so the entrance is driven purely
     by the panel being unhidden — no JS frame callback to miss. */
  animation: form-panel-in 520ms var(--ease-out-expo) both;
}

.form-success:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .form-success {
    animation: none;
  }
}

.form-success__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--success);
  color: var(--white);
}

.form-success__mark svg {
  width: 26px;
  height: 26px;
}

.form-success__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
}

.form-success__copy {
  margin: 0;
  max-width: 46ch;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--muted);
}

.form-success__next {
  margin: var(--sp-2) 0 var(--sp-2);
  padding: 0;
  list-style: none;
  counter-reset: sent-step;
  display: grid;
  gap: var(--sp-3);
}

.form-success__next li {
  counter-increment: sent-step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--muted);
}

.form-success__next li::before {
  content: counter(sent-step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 1.5px;
  color: var(--red);
}

.form-card--dark .form-success__title {
  color: var(--white);
}

.form-card--dark .form-success__copy,
.form-card--dark .form-success__next li {
  color: var(--text-inverse-secondary);
}

.form-card--dark .form-success__mark {
  background: var(--success-inverse);
  color: var(--charcoal);
}

.contact-aside {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--red);
}

@media (min-width: 960px) {
  .contact-aside {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

.aside-block {
  padding: 24px clamp(22px, 2.4vw, 28px);
}

.aside-block + .aside-block {
  border-top: 1px solid var(--border-light);
}

/* The fastest way to reach a mechanical contractor is still a phone. */
.aside-block--call a[href^="tel:"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: 0.5px;
}

.aside-block h3 {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 2.5px;
  color: var(--red);
  text-transform: uppercase;
  font-weight: 500;
}

.aside-block p,
.aside-block li {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--n-700);
}

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

.aside-block li + li {
  margin-top: 6px;
}

.aside-block a {
  color: var(--ink);
  font-weight: 600;
}

.aside-block a:hover {
  color: var(--red);
}

.social-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  color: var(--ink);
  background: var(--light);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.social-link__icon {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

.social-link:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--n-000);
}

/* ---------- Footer ---------- */

/* ---------- Closing composition ----------
   The page used to end on two near-identical promo bands stacked
   one above the other, which read as the same offer made twice.
   One asymmetric pair instead: the estimate leads at full weight,
   financing sits beside it as the secondary option. */

.closing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

.closing__grid .promo-card {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-8);
}

/* Steel is invisible on the red plate; the drafting details there
   switch to inverse ink instead. */
.closing__lead {
  --tech-ink: var(--ink-inverse-faint);
}

.closing__lead .spec-block {
  border-top-color: var(--rule-inverse);
}

.closing__lead .spec-block__value {
  color: var(--ink-inverse);
}

.closing__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  width: 100%;
  max-width: 420px;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .closing__grid {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
    align-items: stretch;
  }

  /* The lead card carries the notch on the outside corner so the
     pair reads as one cut plate rather than two loose tiles. */
  .closing__aside {
    clip-path: var(--clip-notch-alt);
  }
}

.site-footer {
  background: var(--black);
  border-top: 4px solid var(--red);
}

.site-footer__grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 60px var(--pad) 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
}

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

@media (min-width: 1000px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col__label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 2.5px;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.footer-col a:not(.brand):not(.btn),
.footer-col span:not(.footer-col__label):not(.brand__text):not(.brand__name):not(.brand__tag):not(.red):not(.white),
.footer-col p {
  font-size: var(--fs-sm);
  color: var(--soft);
  line-height: 1.65;
}

.footer-col a:not(.brand):not(.btn):hover {
  color: var(--white);
}

.footer-col p {
  margin: 6px 0 0;
  color: var(--muted-3);
  font-size: var(--fs-sm);
}

.footer-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 1.5px;
  color: var(--n-500);
  text-transform: uppercase;
}

.site-footer__bottom {
  border-top: 1px solid var(--n-800);
}

.site-footer__bottom-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--pad);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Service offers ---------- */

.svc-offers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.svc-offer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px 32px;
  background: var(--light);
  border-top: 3px solid var(--red);
}

.svc-offer__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--red);
  text-transform: uppercase;
}

.svc-offer__body h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--ink);
}

.svc-offer__body .body-copy {
  margin: 0;
}

.svc-offer__benefit {
  margin-top: 12px !important;
}

.section--light .svc-offer {
  background: var(--white);
}

/* ---------- IAQ why cards ---------- */

.iaq-why {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.iaq-why__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px 30px;
  background: var(--light);
  border-top: 3px solid var(--red);
}

.iaq-why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--red);
}

.iaq-why__icon svg {
  width: 32px;
  height: 32px;
}

.iaq-why__card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--ink);
}

.iaq-why__card .body-copy {
  margin: 0;
}

/* ---------- Service detail ---------- */

.svc-detail {
  padding-top: 76px;
  padding-bottom: 76px;
}

.svc-detail .media-frame__front,
.svc-detail .photo-slot {
  height: 420px;
  min-height: 420px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1079px) {
  :root {
    --header-h: 68px;
  }

  .site-header__inner {
    height: var(--header-h);
  }

  .brand__icon {
    height: 38px;
  }

  .brand__name {
    font-size: var(--fs-xl);
  }

  .brand__tag {
    letter-spacing: 2.4px;
    font-size: var(--fs-3xs);
  }
}

@media (max-width: 900px) {
  .svc-row__grid,
  .split {
    gap: 32px;
  }

  .promo-card {
    padding: 36px 28px;
  }

  .panel-dark {
    padding: 32px 28px;
  }
}

@media (max-width: 720px) {
  :root {
    --header-h: 64px;
    --pad: 24px;
  }

  .iaq-why {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .util-bar__inner {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 6px;
  }

  .hero {
    min-height: auto;
  }

  .hero__content {
    padding: 56px var(--pad) 48px;
  }

  .hero__lede {
    margin-top: var(--sp-5);
  }

  .hero__actions {
    margin-top: 28px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .trust-chips {
    margin-top: 28px;
    gap: 12px 18px;
  }

  .page-hero__inner {
    padding: 48px var(--pad) 36px;
  }

  .page-hero__inner--contact {
    padding-bottom: 32px;
  }

  .btn-row {
    gap: 12px;
  }

  .btn-row .btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  .section-head {
    margin-bottom: 28px;
    gap: 12px;
  }

  .section__pad,
  .section__pad--loose,
  .section__pad--reviews,
  .section__pad--page,
  .section__pad--tight,
  .svc-detail {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .svc-offers {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .svc-offer,
  .iaq-why__card {
    padding: 24px 20px 28px;
  }

  .section__pad--contact {
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .section__pad--services-head {
    padding-top: 40px;
    padding-bottom: 4px;
  }

  .section__pad--reviews .section-head,
  .reviews-head {
    margin-bottom: 24px;
  }

  .promo-card {
    margin-left: calc(-1 * var(--pad));
    margin-right: calc(-1 * var(--pad));
    width: calc(100% + 2 * var(--pad));
    max-width: none;
    padding: 28px var(--pad);
    gap: 20px;
    box-sizing: border-box;
  }

  .promo-card .btn-row {
    width: 100%;
  }

  .promo-card .btn-row .btn,
  .promo-card > .btn {
    width: 100%;
  }

  .form-card__head {
    padding: 20px 22px;
  }

  .form-card__title {
    font-size: var(--fs-xl);
  }

  .form-card__body {
    padding: 22px;
  }

  .media-frame__front,
  .media-frame--tall .media-frame__front {
    height: 240px;
  }

  .county-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .county {
    min-height: 46px;
    font-size: var(--fs-base);
    padding-right: var(--sp-3);
  }

  .review-card {
    padding: 24px 22px;
  }

  .site-footer__grid {
    padding: 48px var(--pad) 32px;
    gap: 32px;
  }

  .mobile-menu {
    padding: 20px var(--pad);
  }

  .mobile-menu__link {
    font-size: var(--fs-2xl);
  }

  .mobile-menu__link--sub {
    font-size: var(--fs-xl);
  }
}

@media (max-width: 480px) {
  .brand__tag {
    display: none;
  }

  .brand__name {
    font-size: var(--fs-lg);
  }

  .brand__icon {
    height: 34px;
  }

  .hero__eyebrow .eyebrow {
    font-size: var(--fs-3xs);
    letter-spacing: 2px;
    flex-wrap: wrap;
  }

  .hero__actions .btn,
  .btn-row .btn {
    --btn-chip: 8px;
    letter-spacing: 1.4px;
    font-size: var(--fs-sm);
    padding: 15px 22px;
  }

  .trust-chip {
    font-size: var(--fs-2xs);
    letter-spacing: 1px;
  }

  .form-card__title {
    font-size: var(--fs-xl);
  }
}

/* ============================================================
   Motion — loader, micro-interactions, parallax helpers
   ============================================================ */

body.is-loading,
body.is-loader-exit {
  overflow: hidden;
  background: var(--n-950);
}

body.is-loader-exit {
  background: var(--surface);
}

/* Hide the site until the loader has filled and is ready to wipe —
   content is already painted underneath so the exit never flashes blank. */
html.js-motion body.is-loading .site {
  opacity: 0;
}

html.js-motion body:not(.is-loading) .site {
  opacity: 1;
  transition: opacity 0.45s var(--ease-out);
}

html.js-reduced-motion body.is-loading .site,
html.js-reduced-motion .site {
  opacity: 1;
  transition: none;
}

.page-loader {
  --loader-spring: cubic-bezier(0.22, 1.18, 0.36, 1);
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 40%,
      var(--n-800) 0%,
      var(--n-950) 70%
    );
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

.page-loader.is-wiping {
  transform: translate3d(0, -105%, 0);
  transition: transform 0.78s var(--loader-spring);
}

.page-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: var(--sp-6);
  text-align: center;
  will-change: opacity, transform;
}

.page-loader.is-exiting .page-loader__inner {
  opacity: 0;
  transform: translate3d(0, -18px, 0) scale(0.98);
  transition:
    opacity 0.32s var(--ease),
    transform 0.42s var(--loader-spring);
}

.page-loader__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.page-loader__icon {
  height: 52px;
  width: auto;
  filter: drop-shadow(0 8px 18px var(--accent-glow));
}

.page-loader__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 36px);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
}

.page-loader__wordmark .red {
  color: var(--accent);
}

.page-loader__wordmark .white {
  color: var(--text-inverse);
}

.page-loader__track {
  width: min(220px, 55vw);
  height: 3px;
  background: var(--rule-inverse-faint);
  overflow: hidden;
}

.page-loader__bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--accent-press),
    var(--accent),
    var(--accent-light)
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.48s var(--ease-in-out);
}

.page-loader.is-filling .page-loader__bar {
  transform: scaleX(1);
}

.page-loader__tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--text-inverse-tertiary);
}

/* Parallax frames need room to shift without clipping oddly */
.media-frame__front[data-parallax],
[data-parallax] .photo-slot,
[data-parallax] {
  will-change: transform;
}

.media-frame__front {
  transition: transform 0.5s var(--ease);
}

.media-frame__front .photo-slot img {
  transition: transform 0.7s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .media-frame:hover .photo-slot img {
    transform: scale(1.04);
  }

  /* Compound selector so the lift outranks .reveal--stagger.is-in > * */
  .county-grid .county:hover {
    transform: translateY(-2px);
  }

  .trust-chip {
    transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s var(--ease);
  }

  .trust-chip:hover {
    transform: translateY(-2px);
    border-color: var(--rule-inverse-strong);
  }

  .review-card {
    transition:
      box-shadow 0.28s var(--ease),
      transform 0.28s var(--ease),
      border-color 0.28s ease;
  }

  .review-card:hover {
    transform: translateY(-4px);
  }

  .promo-card {
    transition:
      background 0.22s ease,
      filter 0.22s ease,
      transform 0.28s var(--ease);
  }

  .promo-card:hover {
    transform: translateY(-3px);
  }
}

.check-list__mark {
  display: inline-block;
  transition: transform 0.22s var(--ease), color 0.22s ease;
}

.check-list li:hover .check-list__mark {
  transform: translateX(3px);
  color: var(--red);
}

.eyebrow__bar {
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  .page-loader {
    display: none !important;
  }

  body.is-loading,
  body.is-loader-exit {
    overflow: visible;
  }

  .site-header,
  .media-frame__front .photo-slot img,
  .county,
  .county::before,
  .county--link::after,
  .trust-chip,
  .svc-index__card,
  .svc-index__card::after,
  .svc-index__icon,
  .svc-rail,
  .svc-rail__item,
  .review-card,
  .promo-card,
  .check-list__mark {
    transition: none !important;
  }

  .media-frame:hover .photo-slot img,
  .county:hover,
  .county--link:hover::after,
  .trust-chip:hover,
  .svc-index__card:hover,
  .svc-index__card:hover .svc-index__icon,
  .review-card:hover,
  .promo-card:hover {
    transform: none;
  }

  .svc-index__card:hover::after,
  .svc-index__card:focus-visible::after {
    transform: scaleX(1);
  }

  .svc-rail.is-visible,
  .svc-rail.is-visible .svc-rail__item {
    transform: none;
  }


  .media-frame__front[data-parallax],
  [data-parallax] .photo-slot,
  [data-parallax] {
    will-change: auto;
  }
}

/* ---------- Our Work: shared ---------- */

.work-clip {
  --notch: var(--notch-lg);
  clip-path: var(--clip-notch-alt);
}

.work-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(11, 12, 13, 0.74);
  border: 1px solid var(--rule-inverse-faint);
  border-left: 3px solid var(--technical);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

.work-figure {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--charcoal-2);
}

.work-figure__media {
  position: relative;
  overflow: hidden;
  background: var(--charcoal-2);
}

/* Stretched hit area keeps the whole card clickable without nesting
   headings inside a button. */
.work-figure__hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0;
  background: none;
  border: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

/* --work-x / --work-y are driven by the parallax loop in js/gallery.js so the
   scroll offset and the hover zoom can compose without fighting each other. */
.work-figure__media img {
  display: block;
  width: 100%;
  transform: scale(var(--work-scale, 1.1))
    translate(var(--work-x, 0%), var(--work-y, 0%));
  transition: transform 0.6s var(--ease);
  will-change: transform;
}

.work-figure__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 12, 13, 0) 38%,
    rgba(11, 12, 13, 0.5) 66%,
    rgba(11, 12, 13, 0.9) 100%
  );
  opacity: 0.92;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* Tag-only cards: light top wash so the project type chip stays readable */
.work-figure--tag-only .work-figure__scrim {
  background: linear-gradient(
    180deg,
    rgba(11, 12, 13, 0.42) 0%,
    rgba(11, 12, 13, 0.08) 32%,
    rgba(11, 12, 13, 0) 55%
  );
  opacity: 1;
}

.work-figure__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

.work-figure__zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(11, 12, 13, 0.68);
  border: 1px solid var(--rule-inverse-faint);
  color: var(--white);
  font-size: var(--fs-sm);
  line-height: 1;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.28s ease, transform 0.28s var(--ease);
  pointer-events: none;
}

.work-figure__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 22px 20px;
  pointer-events: none;
}

.work-figure__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: 0.6px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--white);
}

.work-figure__meta {
  display: block;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted-4);
}

.work-figure__hit:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -4px;
}

.work-figure:has(.work-figure__hit:focus-visible) .work-figure__zoom {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .work-figure:hover {
    --work-scale: 1.17;
  }

  .work-figure:hover .work-figure__scrim {
    opacity: 1;
  }

  .work-figure:hover .work-figure__zoom {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Our Work: home rail ---------- */

.work-band {
  overflow: hidden;
}

.work-band .section__pad {
  padding-bottom: clamp(32px, 4vw, 44px);
}

.work-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.work-head h2 {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
}

.work-head .lede {
  margin: 18px 0 0;
  max-width: 560px;
}

.work-rail-outer {
  position: relative;
  margin-top: clamp(32px, 4vw, 44px);
}

.work-rail {
  position: relative;
  overflow: hidden;
  padding: 0 0 6px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.work-rail.is-dragging {
  cursor: grabbing;
}

.work-rail.is-dragging .work-card {
  pointer-events: none;
}

.work-rail__track {
  display: flex;
  gap: 16px;
  width: max-content;
  /* Full-bleed: first card sits on the left viewport edge — no gutter. */
  padding-left: 0;
  padding-right: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  will-change: transform;
  backface-visibility: hidden;
}

.work-card {
  flex: 0 0 auto;
  width: 300px;
}

.work-card--wide {
  width: 460px;
}

.work-card .work-figure__media {
  height: 420px;
}

.work-card .work-figure__media img {
  height: 100%;
  object-fit: cover;
}

.work-rail__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-bottom: var(--section-y);
}

.work-rail__hint {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted-3);
}

.work-rail__hint-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.work-rail__hint-icon {
  flex-shrink: 0;
  color: var(--muted-4);
}

.work-rail__hint-sep {
  color: var(--border-dark);
  letter-spacing: 0;
}

/* ---------- Our Work: gallery page ---------- */

.work-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 26px;
}

.work-meta-bar span {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted-4);
}

.work-meta-bar span::before {
  content: "▸";
  margin-right: 9px;
  color: var(--red);
}

.work-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.work-filter__btn {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 16px;
  background: var(--white);
  border: 1px solid var(--border-light);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.work-filter__btn:hover {
  color: var(--ink);
  border-color: var(--muted-3);
}

.work-filter__btn.is-active {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
}

.work-filter__count {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--muted-3);
}

.work-filter__btn.is-active .work-filter__count {
  color: var(--red);
}

.work-grid {
  column-count: 3;
  column-gap: 14px;
}

.work-tile {
  break-inside: avoid;
  margin: 0 0 14px;
  width: 100%;
}

.work-tile[hidden] {
  display: none;
}

/* Tiles that scroll into view together cascade instead of landing
   as one block. */
.work-grid .work-tile:nth-child(3n + 2) {
  --reveal-delay: 90ms;
}

.work-grid .work-tile:nth-child(3n) {
  --reveal-delay: 180ms;
}

.work-tile .work-figure__media img {
  height: auto;
}

/* ---------- Our Work: mini gallery on service pages ---------- */

.work-mini {
  margin-top: 0;
}

.work-mini__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 32px);
}

.work-mini__head .btn {
  flex-shrink: 0;
  margin-top: 4px;
}

.work-mini__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
}

.work-mini__head .lede {
  margin: 12px 0 0;
  max-width: 480px;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--muted-4);
}

.work-mini__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 800px) {
  .work-mini__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
}

.work-mini__grid .work-figure__media {
  aspect-ratio: 3 / 4;
  height: auto;
}

.work-mini__grid .work-figure__media img {
  height: 100%;
  object-fit: cover;
}

.work-empty {
  margin: 0;
  padding: 48px 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ---------- Our Work: lightbox ---------- */

.work-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(8, 9, 10, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

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

.work-lightbox__figure {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: min(1100px, 100%);
  max-height: 100%;
  transform: scale(0.98);
  transition: transform 0.3s var(--ease);
}

.work-lightbox.is-open .work-lightbox__figure {
  transform: scale(1);
}

.work-lightbox__img-wrap {
  position: relative;
  min-height: 120px;
  max-height: min(72vh, 780px);
  border-top: 3px solid var(--red);
  background: var(--charcoal);
}

.work-lightbox__img-wrap img {
  display: block;
  max-width: 100%;
  max-height: min(72vh, 780px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.work-lightbox__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  text-align: center;
}

.work-lightbox__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--white);
}

.work-lightbox__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted-4);
}

.work-lightbox__btn {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(20, 23, 26, 0.9);
  border: 1px solid var(--border-dark);
  color: var(--white);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.work-lightbox__btn:hover {
  background: var(--red);
  border-color: var(--red);
}

.work-lightbox__btn--close {
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  font-size: var(--fs-base);
}

.work-lightbox__btn--prev {
  top: 50%;
  left: clamp(8px, 2vw, 28px);
  transform: translateY(-50%);
}

.work-lightbox__btn--next {
  top: 50%;
  right: clamp(8px, 2vw, 28px);
  transform: translateY(-50%);
}

body.lightbox-open {
  overflow: hidden;
}

/* ---------- Our Work: responsive ---------- */

@media (max-width: 1023px) {
  .work-grid {
    column-count: 2;
  }
}

@media (max-width: 720px) {
  .work-card {
    width: min(78vw, 300px);
  }

  .work-card--wide {
    width: min(84vw, 360px);
  }

  .work-card .work-figure__media {
    height: 360px;
  }

  .work-rail__foot {
    margin-top: 22px;
  }
}

@media (max-width: 600px) {
  .work-grid {
    column-count: 1;
  }

  .work-lightbox__btn {
    width: 42px;
    height: 42px;
  }

  .work-lightbox__btn--prev {
    left: 6px;
  }

  .work-lightbox__btn--next {
    right: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-figure__media img,
  .work-figure__scrim,
  .work-figure__zoom,
  .work-lightbox,
  .work-lightbox__figure {
    transition: none !important;
  }

  .work-figure:hover {
    --work-scale: 1.1;
  }
}