/* ============================================================
   IQ Fabrications — design system
   Motion system and page rhythm take their cue from MBM Fleet Care
   (mbmfleetcare.com) — living photo backdrops, aurora canvas, rising
   particles, marquee bands, animated counters, scroll reveals — but the
   page is deliberately NOT a copy of it, because the same layout can't be
   sold to two clients. What differs on purpose:
     · hero      = one full-bleed poster block over open photography, not
                   their two-column split with a floating logo badge (IQ's
                   logo is a wide JPEG lockup that never sat right on a photo)
     · services  = a sticky-column numbered capability index, not their
                   2x2-featured bento grid (their most recognisable device)
     · reviews   = the 21st.dev "testimonial-v2" scrolling-column wall,
                   ported to vanilla; MBM has a single-quote carousel
   Colours are IQ's own, read off the logo: warm near-black, brushed chrome
   for identity, molten weld-spark orange for heat.
   Dependency-free static HTML/CSS/JS. Deployed on Vercel; the quote form is a
   serverless function in /api backed by Resend. Live 2026-09-06.
   ============================================================ */

:root {
  /* Palette read straight off the logo (2026-09-06 re-grade): brushed chrome
     on warm near-black, with the weld spark's molten orange as the only
     accent. The previous electric-blue accent was replaced — the logo's blue
     is a pinpoint arc flash, not a brand colour, and cyan UI read like a tech
     product rather than a welding shop. Chrome now carries the identity
     (headlines, wordmark, stats); orange carries the heat (CTAs, icons,
     glow, sparks); --arc stays for the tiny white-hot arc core only. */
  --ink: #0a0908;      /* warm near-black, matches the logo's backdrop */
  --ink-2: #131110;    /* "lifted" section tone (plays MBM's white sections) */
  --ink-3: #1b1917;    /* cards on lifted sections */
  --ink-4: #262320;
  --line: rgba(255, 246, 238, 0.08);
  --line-strong: rgba(255, 246, 238, 0.16);

  /* molten weld spark — the accent */
  --spark: #ff8d3a;
  --spark-deep: #c4581a;
  --spark-bright: #ffc78a;
  --arc: #eafcff;      /* white-hot arc core; pinpoint use only */

  /* brushed chrome — the identity */
  --chrome-1: #f7f8f9;
  --chrome-2: #ced3d8;
  --chrome-3: #969ba1;
  --chrome-4: #5c6066;

  --text: #f5f3f1;
  --text-85: rgba(245, 243, 241, 0.85);
  --text-70: rgba(245, 243, 241, 0.7);
  --text-60: rgba(245, 243, 241, 0.6);
  --text-50: rgba(245, 243, 241, 0.5);
  --text-40: rgba(245, 243, 241, 0.4);

  --danger: #ff8f7c;

  /* MBM's type trio: poster (Anton), display (Archivo), body (Inter) */
  --font-poster: "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1400px;
  --radius-xl: 24px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 64px; /* room for the mobile sticky call bar */
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
}

::selection { background: var(--spark); color: var(--ink); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.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;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 768px) {
  .container { padding: 0 40px; }
}

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

.type-poster {
  font-family: var(--font-poster);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.94;
}

.font-display { font-family: var(--font-display); }

/* Brushed-chrome display type — the logo's wordmark treatment. Bright top,
   darker mid band, bright bottom edge: how polished metal actually catches
   light. Used for the brand name and headline highlights. */
.text-spark {
  background: linear-gradient(180deg, #ffffff 0%, var(--chrome-2) 36%, var(--chrome-3) 52%, #eef1f4 66%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--chrome-2);
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45));
}

/* Molten metal — glowing spark gradient, for numbers and heat moments. */
.text-molten {
  background: linear-gradient(96deg, var(--spark-deep) 0%, var(--spark) 42%, var(--spark-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--spark);
  -webkit-text-fill-color: transparent;
}

.text-balance { text-wrap: balance; }

/* ---- Texture & depth utilities --------------------------------------- */

.bg-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bg-dots {
  background-image: radial-gradient(rgba(214, 206, 198, 0.09) 1.25px, transparent 1.25px);
  background-size: 26px 26px;
}

/* Brushed-steel grain — the "machined panel" surface for cards and panels.
   Fine directional lines at very low alpha, like the logo's chrome finish. */
.brushed,
.cap__photo,
.step,
.panel,
.rev__card,
.section--lifted {
  background-image: repeating-linear-gradient(
    100deg,
    rgba(255, 250, 244, 0.016) 0px,
    rgba(255, 250, 244, 0.016) 1px,
    transparent 1px,
    transparent 3px
  );
}

.hover-lift {
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms ease;
}
.hover-lift:hover {
  transform: scale(1.02);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

/* ---- Motion system (mirrors MBM's fx-* classes) ---------------------- */

@keyframes float-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.fx-float { animation: float-bob 6s ease-in-out infinite; will-change: transform; }

@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.06); }
}
.fx-glow-pulse { animation: glow-pulse 5s ease-in-out infinite; will-change: opacity, transform; }

@keyframes ken-burns {
  0% { transform: scale(1.02) translate(0, 0); }
  50% { transform: scale(1.12) translate(-2.5%, -1.5%); }
  100% { transform: scale(1.02) translate(0, 0); }
}
.fx-ken-burns { animation: ken-burns var(--kb-duration, 28s) ease-in-out infinite; will-change: transform; }

@keyframes blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(4%, -6%) scale(1.08); }
  66% { transform: translate(-5%, 4%) scale(0.95); }
}
.fx-blob { animation: blob-drift var(--blob-duration, 16s) ease-in-out infinite; will-change: transform; }

/* MBM's rising bubbles, re-read as weld spark spray. Round dots read as
   bubbles no matter what colour they are, so these are short tapered
   streaks instead: they arc sideways as they rise, shorten as they cool
   (scaleY down from the tail), and flicker once or twice on the way up.
   Deliberately dim — same quiet presence as the bubbles they replaced. */
@keyframes spark-fly {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(var(--spark-rot, 0deg)) scaleY(1);
  }
  7% { opacity: var(--spark-op, 0.22); }
  24% { opacity: calc(var(--spark-op, 0.22) * 0.5); }   /* flicker */
  40% { opacity: var(--spark-op, 0.22); }
  62% {
    opacity: calc(var(--spark-op, 0.22) * 0.75);
    transform:
      translate(calc(var(--spark-drift, 14px) * 0.55), calc(-1 * var(--spark-travel, 60vh) * 0.6))
      rotate(var(--spark-rot, 0deg)) scaleY(0.8);
  }
  100% {
    opacity: 0;
    transform:
      translate(var(--spark-drift, 14px), calc(-1 * var(--spark-travel, 60vh)))
      rotate(var(--spark-rot, 0deg)) scaleY(0.42);
  }
}

.fx-spark {
  position: absolute;
  bottom: 0;
  width: 2.5px;
  height: var(--spark-len, 12px);
  border-radius: 2px;
  transform-origin: 50% 100%;
  /* hot tip, cooling tail — bright enough to read, still short of white-hot */
  background: linear-gradient(to top, rgba(255, 141, 58, 0) 0%, var(--spark) 40%, var(--spark-bright) 100%);
  box-shadow: 0 0 7px rgba(255, 141, 58, 0.5);
  opacity: 0;
  animation: spark-fly var(--spark-duration, 7s) cubic-bezier(0.25, 0.55, 0.4, 1) infinite;
  animation-delay: var(--spark-delay, 0s);
  will-change: transform, opacity;
}

@keyframes shine-sweep {
  0%, 55% { transform: translateX(-130%) skewX(-18deg); }
  85%, 100% { transform: translateX(260%) skewX(-18deg); }
}
.fx-shine { animation: shine-sweep 4.5s ease-in-out infinite; will-change: transform; }

@keyframes marquee-scroll { to { transform: translateX(-50%); } }
.fx-marquee { animation: marquee-scroll var(--marquee-duration, 32s) linear infinite; }
.fx-marquee-mask:hover .fx-marquee { animation-play-state: paused; }

@keyframes handle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 141, 58, 0.55); }
  60% { box-shadow: 0 0 0 12px rgba(255, 141, 58, 0); }
}
.fx-handle-pulse { animation: handle-pulse 2.4s ease-out infinite; }

/* Scroll reveal — MBM's <Reveal>: translate-y-6 + opacity, 700ms ease-out */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  transition-delay: 0ms;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition-delay: var(--delay, 0ms);
}

/* ---- Living backdrops ------------------------------------------------ */

.photo-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.photo-backdrop__img {
  position: absolute;
  inset: 0;
}
.photo-backdrop__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* dark grade: ink wash + vertical gradient + steel-blue colour tint */
.photo-backdrop__grade {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, 0.7);
}
.photo-backdrop--dim .photo-backdrop__grade { background: rgba(10, 9, 8, 0.85); }
.photo-backdrop__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.6), transparent 45%, rgba(10, 9, 8, 0.85));
}
/* Photo grade: desaturate toward warm steel instead of tinting blue, so the
   real orange sparks in the photography stay the warmest thing on screen. */
.photo-backdrop__tint {
  position: absolute;
  inset: 0;
  mix-blend-mode: color;
  /* Neutral grey in `color` blend = pure desaturation, no hue cast. A warm
     grey here turns every photo sepia; a blue one was the old problem. */
  background: rgba(122, 122, 122, 0.38);
}
/* faint grade for lifted sections (MBM's frosted white wash, in dark) */
/* Lifted sections: the photo is a whisper of texture, not a wash — cards
   have to stay the highest-contrast thing in the section. */
.photo-backdrop--faint .photo-backdrop__grade { background: rgba(19, 17, 16, 0.84); }
.photo-backdrop--faint .photo-backdrop__gradient {
  background: linear-gradient(180deg, var(--ink-2), rgba(19, 17, 16, 0.55) 50%, var(--ink-2));
}
.photo-backdrop--faint .photo-backdrop__tint { background: rgba(122, 122, 122, 0.55); }

.aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.aurora canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient__dots { position: absolute; inset: 0; }
.ambient__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
}
.ambient__blob--a { left: -160px; top: -20%; width: 30rem; height: 30rem; background: radial-gradient(circle, rgba(255, 141, 58, 0.14), transparent 65%); }
.ambient__blob--b { right: -192px; top: 30%; width: 34rem; height: 34rem; background: radial-gradient(circle, rgba(196, 88, 26, 0.14), transparent 65%); --blob-duration: 21s; }
.ambient__blob--c { left: 35%; bottom: -25%; width: 26rem; height: 26rem; background: radial-gradient(circle, rgba(205, 210, 216, 0.08), transparent 65%); --blob-duration: 26s; }

.sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* Section content must stack above the backdrops */
.section { position: relative; overflow: hidden; padding: 80px 0; }

/* Every decorative layer inside a section fades out at its top and bottom
   edges. Without this each layer stops dead on the section boundary and draws
   a hard horizontal line right across the page — worst on the stats band,
   whose photo is brighter than the sections either side of it.
   All THREE layers need it, not just the photo: the aurora canvas and the
   ambient blob wrapper are full-bleed rectangles too, so masking only the
   backdrop leaves the seam behind at reduced strength. The hero and page
   headers are deliberately excluded — they sit at the top of the page and are
   meant to run full bleed. The closing CTA banner IS included: it had the same
   cut, and a hard line above it read as a mistake rather than as a divider.

   The fade stops at 42% alpha rather than going fully transparent. Fading all
   the way to 0 over 20% of the height traded a hard line for a wide dead band
   of flat black between sections, which read as a hole in the page. Holding a
   little of the backdrop through the join keeps texture continuous across the
   boundary, so the transition is soft without being empty. */
.section .photo-backdrop,
.section > .aurora,
.section > .ambient,
.cta .photo-backdrop,
.cta > .aurora,
.cta > .ambient {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, #000 14%, #000 86%, rgba(0,0,0,0.42) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, #000 14%, #000 86%, rgba(0,0,0,0.42) 100%);
}
/* The noise grain is a section-level pseudo-element, so it needs the same
   treatment or it outlines the band on its own. */
.section.bg-noise::after,
.cta.bg-noise::after {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, #000 14%, #000 86%, rgba(0,0,0,0.42) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, #000 14%, #000 86%, rgba(0,0,0,0.42) 100%);
}
/* The stats band is the one brightness outlier on the page. Its photo (an
   angle grinder throwing sparks) is far lighter than any other backdrop, and
   THAT is what draws a line at its edges — not the masking. Giving it a deeper
   fade than its neighbours actually made it worse: they hold their own photo at
   42% right up to the join while this one dropped to 0, so the mismatch itself
   became the edge. It now uses the same shared mask as everything else, and the
   photo is simply dimmed until its luminance sits in the same range as the
   sections above and below. Matched brightness needs no edge treatment. */
.section--stats .photo-backdrop { opacity: 0.3; }
.section--stats .photo-backdrop__grade { background: rgba(10, 9, 8, 0.86); }
.section--stats > .aurora { opacity: 0.22 !important; }

/* The stats band also sat a tone darker than its neighbours, so the masked
   photo still left a visible step. Matching the surrounding sections removes
   the last of the seam. */
.section--dark.section--stats { background: var(--ink-2); }
.section > .container { position: relative; z-index: 2; }
.section--dark { background: var(--ink); color: var(--text); }
.section--lifted { background: var(--ink-2); }
.section--tight { padding: 56px 0; }

@media (min-width: 768px) {
  .section { padding: 112px 0; }
  .section--tight { padding: 64px 0; }
    .section--dark.section--stats { padding: 80px 0; }
}

/* ---- Section heading (MBM SectionHeading) ---------------------------- */

.sh { max-width: 680px; text-align: left; }
.sh--center { text-align: center; margin: 0 auto; }
.sh__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--spark);
}
.sh--center .sh__eyebrow { justify-content: center; }
.sh__eyebrow::before {
  content: "";
  height: 1px;
  width: 32px;
  background: var(--spark);
}
.sh--center .sh__eyebrow::after {
  content: "";
  height: 1px;
  width: 32px;
  background: var(--spark);
}
.sh__title { font-size: 2.25rem; }
.sh__subtitle { margin-top: 20px; font-size: 1rem; line-height: 1.65; color: var(--text-70); }

@media (min-width: 768px) {
  .sh__title { font-size: 3rem; }
}

/* ---- Buttons (MBM Button) -------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 12px 20px;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 200ms ease;
  white-space: nowrap;
}
.btn:hover { transform: scale(1.03); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
.btn--sm { padding: 8px 16px; font-size: 0.875rem; }
.btn--lg { padding: 16px 28px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn--primary {
  background: linear-gradient(135deg, var(--spark) 0%, var(--spark-deep) 100%);
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(255, 141, 58, 0.3);
}
.btn--primary:hover {
  box-shadow: 0 10px 28px rgba(255, 141, 58, 0.42);
}
.btn--ghost {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text);
}
.btn--ghost:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.1); }
.btn--outline {
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--outline:hover { border-color: var(--spark); color: var(--spark); }
.btn .icon { width: 16px; height: 16px; }

/* ---- Icons (inline SVG sprite) --------------------------------------- */

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon--fill { fill: currentColor; stroke: none; }

/* Icon circles used across cards and feature rows */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 141, 58, 0.14);
  color: var(--spark);
  flex-shrink: 0;
}

/* ---- Header (MBM Header) --------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 9, 8, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; border-radius: 8px; }
.brand:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
.brand__mark {
  height: 42px;
  width: auto;
  border-radius: 6px;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav { display: none; align-items: center; gap: 32px; }
.nav a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-85);
  transition: color 200ms ease;
}
.nav a:hover, .nav a.is-active { color: var(--spark); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.pill-link {
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 700;
  transition: color 200ms ease, border-color 200ms ease;
}
.pill-link:hover { border-color: var(--spark); color: var(--spark); }
.pill-link .icon { width: 16px; height: 16px; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text);
}
.icon-btn .icon { width: 20px; height: 20px; }
.nav-toggle .icon--close { display: none; }
.nav-toggle.is-open .icon--menu { display: none; }
.nav-toggle.is-open .icon--close { display: block; }
.header-cta { display: none; }

.mobile-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 24px 20px;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav a.mobile-nav__link {
  display: block;
  border-radius: 8px;
  padding: 10px 8px;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(244, 245, 246, 0.9);
}
.mobile-nav a.mobile-nav__link:hover { background: rgba(255, 255, 255, 0.05); }
.mobile-nav .btn { margin-top: 16px; }

@media (min-width: 640px) {
  .pill-link { display: inline-flex; }
  .icon-btn--contact { display: none; }
}
@media (min-width: 768px) {
  .nav { display: flex; }
  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* ---- Hero (MBM Hero) ------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
}
/* Full-bleed poster hero. The old two-column split put a floating plate in the
   right column purely to fill it; with the plate gone the copy runs against
   open photography instead, and the spec facts become the rail below. */
.hero__body {
  position: relative;
  z-index: 2;
  padding-top: 64px;
  padding-bottom: 72px;
}
@media (min-width: 768px) {
  .hero__body { padding-top: 104px; padding-bottom: 96px; }
}
/* Held short of full width so the photo's arc and sparks stay visible to the
   right of the text — the asymmetry is the layout, not a leftover gap. */
.hero__copy { max-width: 100%; }
@media (min-width: 1024px) { .hero__copy { max-width: 74%; } }
@media (min-width: 1440px) { .hero__copy { max-width: 66%; } }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--spark);
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--spark);
}

.hero__title { font-size: 3.4rem; line-height: 0.94; }
@media (min-width: 768px) { .hero__title { font-size: 5rem; } }
@media (min-width: 1024px) { .hero__title { font-size: 6rem; } }
@media (min-width: 1440px) { .hero__title { font-size: 6.75rem; } }

.hero__lede {
  margin-top: 28px;
  max-width: 46ch;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text-70);
}
.hero__actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.trust-row { margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.trust-row__item { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 600; color: var(--text-85); }
.trust-row dd { margin: 0; } /* browsers give <dd> a 40px left margin by default */
.trust-row__item .icon { width: 20px; height: 20px; color: var(--spark); }

.hero__halo {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -6rem;
  transform: translateY(-50%);
  pointer-events: none;
  width: 32rem;
  height: 32rem;
  max-width: 90vw;
  max-height: 90vw;
  border-radius: 50%;
  filter: blur(64px);
  background: radial-gradient(circle, rgba(255, 141, 58, 0.42), rgba(196, 88, 26, 0.16) 55%, transparent 70%);
}
/* ---- Marquee (MBM Marquee) ------------------------------------------- */

.marquee {
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.marquee--dark {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--ink);
  padding: 20px 0;
}
.marquee--light { padding: 8px 0; }
.marquee__track { display: flex; width: max-content; }
.marquee__row {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
}
.marquee__row li {
  display: flex;
  align-items: center;
  gap: 40px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-50);
}
.marquee__row li::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--spark);
}


/* ---- Capability index ------------------------------------------------ */
/* Deliberately NOT MBM's bento. Their 2x2-featured card grid is the single
   most recognisable thing about that page, so IQ gets a different device:
   a sticky title/photo column beside a numbered capability index that reads
   like a fabrication catalogue — chrome hairlines, stamped index numbers,
   rows that light up and shift on hover. */

.cap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: start;
  margin-top: 8px;
}
@media (min-width: 1024px) {
  .cap { grid-template-columns: 0.82fr 1.18fr; gap: 64px; }
  .cap__aside { position: sticky; top: 112px; }
}

.cap__photo {
  position: relative;
  margin-top: 28px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 28px 60px -28px rgba(0, 0, 0, 0.85);
  aspect-ratio: 4 / 5;
}
.cap__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.cap__photo:hover img { transform: scale(1.04); }
/* Opt-in exposure lift for under-exposed source photos. Some of the stock
   welding shots are shot very dark (the subject is lit only by the arc), and
   on this near-black page they read as an empty box. Applied per-photo rather
   than globally so the already-bright shots aren't blown out. */
.cap__photo--lift img { filter: brightness(1.5) contrast(1.03) saturate(1.06); }

.cap__list { border-top: 1px solid var(--line); }

.cap__row {
  display: grid;
  grid-template-columns: 58px 1fr 20px;
  gap: 18px;
  align-items: start;
  padding: 22px 10px 22px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  transition: background 240ms var(--ease), padding-left 240ms var(--ease);
}
/* Phone: the 58px index column eats too much of a 360px line, and the
   chevron gutter is dead weight next to a full-width tap target. */
@media (max-width: 640px) {
  .cap__row { grid-template-columns: 38px 1fr; gap: 12px; padding: 18px 0; }
  .cap__chev { display: none; }
  .cap__num { font-size: 1.2rem; }
  .cap__name { font-size: 1.04rem; }
}
.cap__row:hover,
.cap__row:focus-visible {
  background: linear-gradient(90deg, rgba(255, 141, 58, 0.07), transparent 72%);
  padding-left: 12px;
}
.cap__row:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }

.cap__num {
  font-family: var(--font-poster);
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--text-40);
  transition: color 240ms var(--ease);
}
.cap__row:hover .cap__num { color: var(--spark); }

.cap__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: color 240ms var(--ease);
}
.cap__row:hover .cap__name { color: var(--chrome-1); }
.cap__desc {
  display: block;
  margin-top: 7px;
  max-width: 56ch;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-70);
}

.cap__chev {
  width: 18px;
  height: 18px;
  align-self: center;
  color: var(--text-40);
  transition: transform 240ms var(--ease), color 240ms var(--ease);
}
.cap__row:hover .cap__chev { transform: translateX(5px); color: var(--spark); }

/* ---- Stats strip (MBM StatsStrip) ------------------------------------ */

/* Three stats in a two-column grid orphans the third on its own row, which
   reads as broken rather than deliberate. One column on phones, three from
   tablet up — never two. */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px 24px;
  text-align: center;
}
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat__value { font-size: 3rem; }
@media (min-width: 768px) { .stat__value { font-size: 3.75rem; } }
.stat__label { margin-top: 12px; font-size: 0.875rem; font-weight: 600; color: var(--text-70); }

/* ---- How it works (MBM HowItWorks) ----------------------------------- */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--ink-3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.step__photo { position: relative; height: 144px; overflow: hidden; }
.step__photo .fx-ken-burns { position: absolute; inset: 0; }
.step__photo img { width: 100%; height: 100%; object-fit: cover; }
.step__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.3), rgba(10, 9, 8, 0.2), var(--ink-3));
}
.step__ghost {
  position: absolute;
  right: 16px;
  top: 8px;
  font-size: 5.5rem;
  color: rgba(255, 255, 255, 0.22);
  z-index: 1;
}
.step__body { position: relative; padding: 8px 28px 28px; }
.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border-radius: var(--radius-lg);
  background: var(--spark);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.step__title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; }
.step__detail { margin-top: 8px; font-size: 0.875rem; line-height: 1.65; color: var(--text-70); }

/* ---- Strip (MBM ServiceAreaStrip) ------------------------------------ */

.strip { text-align: center; }
.strip__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--spark);
}
.strip__label::before, .strip__label::after { content: ""; height: 1px; width: 32px; background: var(--spark); }
.strip__title { margin: 0 auto; font-size: 2.25rem; }
@media (min-width: 768px) { .strip__title { font-size: 3rem; } }
.strip__text { margin: 16px auto 0; max-width: 52ch; font-size: 1rem; line-height: 1.65; color: var(--text-70); }
.strip .marquee { margin-top: 32px; }
.strip__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--spark);
  transition: color 200ms ease;
}
.strip__link:hover { color: var(--spark-bright); }
.strip__link .icon { width: 16px; height: 16px; }

/* ---- Reviews ----------------------------------------------------------
   Ported from the 21st.dev "testimonial-v2" component. That component is
   React + Tailwind + framer-motion; this is the same design in vanilla CSS,
   because the site has no build step and no framework.

   What carries over: three columns scrolling vertically at different speeds,
   a top/bottom mask fade so cards emerge and dissolve rather than clipping,
   the second column appearing at md and the third at lg, and a spring-ish
   lift-and-scale on hover. What changed: the palette (dark machined panels
   instead of white cards), a star row, and a monogram chip instead of a stock
   portrait — a fabrication shop's reviews shouldn't carry invented faces. */

.rev {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 44px;
  max-height: 720px;
  overflow: hidden;
  /* cards fade in and out at the edges instead of being cut off */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
}
.rev__col { flex: 0 0 auto; width: 100%; max-width: 340px; }
.rev__col--md { display: none; }
.rev__col--lg { display: none; }
@media (min-width: 768px) { .rev__col--md { display: block; } }
@media (min-width: 1024px) { .rev__col--lg { display: block; } }

/* The track holds the list twice, so translating it exactly -50% lands on an
   identical frame and the loop is seamless. */
.rev__track {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 0 20px;
  margin: 0;
  list-style: none;
  animation: rev-scroll var(--rev-duration, 40s) linear infinite;
  will-change: transform;
}
@keyframes rev-scroll {
  to { transform: translateY(-50%); }
}
/* let people actually read one */
.rev:hover .rev__track,
.rev:focus-within .rev__track { animation-play-state: paused; }

.rev__card {
  padding: 28px 26px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-3) 0%, var(--ink-2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 244, 0.07),
    0 22px 44px -26px rgba(0, 0, 0, 0.9);
  transition:
    transform 320ms var(--ease),
    border-color 320ms var(--ease),
    box-shadow 320ms var(--ease);
}
.rev__card:hover,
.rev__card:focus-within {
  transform: translateY(-8px) scale(1.03);
  border-color: var(--line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 244, 0.1),
    0 30px 60px -24px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 141, 58, 0.16);
}

.rev__stars { display: flex; align-items: center; gap: 3px; color: var(--spark); }
.rev__stars .icon { width: 15px; height: 15px; }
/* unearned stars still occupy the row, so 4/5 reads as 4 out of 5 rather
   than as a shorter row of gold */
.rev__star--off { color: var(--text-40); }

.rev__quote {
  margin: 16px 0 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-70);
}

.rev__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
/* Monogram chip stands in for the component's avatar photo. A stock portrait
   would read as a real customer's face, which is exactly what it isn't. */
.rev__chip {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: radial-gradient(circle at 30% 25%, rgba(255, 141, 58, 0.24), rgba(38, 35, 32, 0.9));
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--chrome-1);
}
.rev__name { font-weight: 700; font-size: 0.92rem; line-height: 1.2; color: var(--text); }
.rev__role { margin-top: 3px; font-size: 0.78rem; color: var(--text-50); }

@media (prefers-reduced-motion: reduce) {
  .rev__track { animation: none; }
  .rev { max-height: none; }
  .rev__card:hover, .rev__card:focus-within { transform: none; }
}

/* ---- CTA banner (MBM CTABanner) -------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
}
/* Logo watermark behind the closing CTA, replacing the workshop photo that was
   there. `screen` blending drops the JPEG's own black background out so only
   the chrome mark shows — the same trick that lets this artwork sit on anything
   without its rectangle showing. Centred, scaled large, blurred and held at
   ~17% so it reads as a watermark the type sits on rather than as a logo placed
   in the layout; off-centre and brighter it competed with the buttons. */
.cta__mark {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 92vw);
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: screen;
  filter: blur(1px) saturate(0.7);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 38%, transparent 70%);
}
.cta__mark img { width: 100%; height: auto; }
@media (min-width: 768px) {
  .cta__mark { width: min(1000px, 74vw); opacity: 0.18; }
}
@media (prefers-reduced-motion: reduce) { .cta__mark { filter: none; } }

.cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (min-width: 768px) {
  /* Logo watermark behind the closing CTA, replacing the workshop photo that was
   there. `screen` blending drops the JPEG's own black background out so only
   the chrome mark shows — the same trick that lets this artwork sit on anything
   without its rectangle showing. Centred, scaled large, blurred and held at
   ~17% so it reads as a watermark the type sits on rather than as a logo placed
   in the layout; off-centre and brighter it competed with the buttons. */
.cta__mark {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 92vw);
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: screen;
  filter: blur(1px) saturate(0.7);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 38%, transparent 70%);
}
.cta__mark img { width: 100%; height: auto; }
@media (min-width: 768px) {
  .cta__mark { width: min(1000px, 74vw); opacity: 0.18; }
}
@media (prefers-reduced-motion: reduce) { .cta__mark { filter: none; } }

.cta__inner { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 96px; padding-bottom: 96px; }
}
.cta__title { max-width: 16ch; font-size: 2.25rem; }
@media (min-width: 768px) { .cta__title { font-size: 3rem; } }
.cta__text { margin-top: 16px; max-width: 46ch; color: var(--text-70); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---- Footer (MBM Footer) --------------------------------------------- */

.site-footer { background: var(--ink); color: var(--text); border-top: 1px solid var(--line); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-top: 64px;
  padding-bottom: 64px;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer__blurb { margin-top: 12px; max-width: 26ch; font-size: 0.875rem; line-height: 1.65; color: var(--text-60); }
.footer__logo { height: 56px; width: auto; border-radius: 6px; }
.footer__heading { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-50); }
.footer__list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 0.875rem; }
.footer__list a { color: var(--text-85); display: flex; align-items: center; gap: 8px; transition: color 200ms ease; }
.footer__list a:hover { color: var(--spark); }
.footer__list .icon { width: 16px; height: 16px; color: var(--spark); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.footer-bottom__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 0.75rem;
  color: var(--text-50);
}
@media (min-width: 640px) {
  .footer-bottom__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---- Sticky call bar (MBM StickyCallBar, mobile only) ---------------- */

.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line-strong);
  background: var(--ink-2);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
}
.sticky-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}
.sticky-bar a:first-child { border-right: 1px solid var(--line-strong); }
.sticky-bar a .icon { width: 16px; height: 16px; color: var(--spark); }
.sticky-bar__primary {
  background: linear-gradient(135deg, var(--spark), var(--spark-deep));
  color: var(--ink) !important;
  font-weight: 800 !important;
}
@media (min-width: 768px) { .sticky-bar { display: none; } }

/* ---- Page header (MBM PageHeader) ------------------------------------ */

.page-header {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  padding: 64px 0;
}
@media (min-width: 768px) { .page-header { padding: 80px 0; } }
.page-header > .container { position: relative; z-index: 2; }
.page-header .sh__title { font-size: 2.25rem; }
@media (min-width: 768px) { .page-header .sh__title { font-size: 3rem; } }

/* ---- Contact / quote (MBM contact + quote pages) --------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 40px;
}
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 0.8fr; } }
.panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--ink-3);
  padding: 24px;
}
@media (min-width: 768px) { .panel { padding: 32px; } }
.panel--accent { border-color: rgba(255, 141, 58, 0.25); background: rgba(255, 141, 58, 0.05); }
.panel__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; }
.panel__sub { margin-top: 6px; font-size: 0.875rem; color: var(--text-70); }
.panel__sub a { color: var(--spark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.stack { display: flex; flex-direction: column; gap: 32px; }
.list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 0.875rem; }
.list li { display: flex; align-items: center; gap: 10px; }
.list .icon { width: 16px; height: 16px; color: var(--spark); }
.list-steps { margin-top: 20px; display: flex; flex-direction: column; gap: 20px; }
.list-steps li { display: flex; align-items: flex-start; gap: 12px; }
.list-steps .icon-circle .icon { width: 16px; height: 16px; }
.list-steps__title { font-family: var(--font-display); font-size: 0.875rem; font-weight: 800; }
.list-steps__detail { margin-top: 4px; font-size: 0.875rem; line-height: 1.65; color: var(--text-70); }
.kicker { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--spark); }

form.quote-form { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.field__hint { font-size: 0.75rem; color: var(--text-60); }
.field__error { font-size: 0.75rem; font-weight: 500; color: var(--danger); }
.field__error[hidden] { display: none; }
.input {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--ink);
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.input::placeholder { color: var(--text-40); }
.input:focus { outline: none; border-color: var(--spark); box-shadow: 0 0 0 2px rgba(255, 141, 58, 0.4); }
.input[aria-invalid="true"] { border-color: var(--danger); }
select.input { color-scheme: dark; }
textarea.input { resize: vertical; min-height: 96px; }
.form-note { text-align: center; font-size: 0.75rem; color: var(--text-60); }

/* ---- Misc ----------------------------------------------------------- */

.mt-12 { margin-top: 48px; }
.mt-10 { margin-top: 40px; }
.center { text-align: center; }

/* ---- Quote form: submit feedback ------------------------------------- */
/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, but they happily fill one that is merely positioned away. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--ink-3);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-70);
}
.form-status:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
.form-status--ok {
  border-color: rgba(255, 141, 58, 0.42);
  background: rgba(255, 141, 58, 0.08);
  color: var(--text);
}
.form-status--bad {
  border-color: rgba(255, 143, 124, 0.45);
  background: rgba(255, 143, 124, 0.08);
  color: #ffd9d1;
}

/* ---- Phone pass (2026-09-06) -----------------------------------------
   Verified at a real 390px viewport (iframe, since resize_window doesn't
   change this browser's viewport). Fixes found by measuring, not guessing. */

/* The brand lockup overflowed the header bar. `.brand__name` is nowrap at
   1.125rem and the mark is ~106px wide, so brand + actions wanted ~419px in a
   375px bar — the wordmark ran straight under the buttons. Two fixes: shrink
   both at phone widths, and make the name truncate rather than overlap if it
   ever grows again. */
.brand { min-width: 0; }
.brand__name { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 480px) {
  .brand__mark { height: 30px; }
  .brand__name { font-size: 0.9rem; }
  .header-inner { gap: 10px; }
}

/* Touch targets. Apple HIG and Material both put the floor at 44x44 / 48x48dp;
   these were all under it and are the controls people actually reach for. */
@media (max-width: 767px) {
  .icon-btn { width: 44px; height: 44px; }

  /* The brand is the home link; wide but only as tall as the shrunken mark. */
  .brand { min-height: 44px; }

  /* Inline links sat at 22px tall — fine to read, too thin to hit. Give them
     real height without moving the text off its baseline. */
  .strip__link { min-height: 44px; }
  .footer__list a { min-height: 44px; align-items: center; }
  .footer__list { gap: 2px; }

  /* Nav links in the dropdown menu */
  .mobile-nav__link { min-height: 44px; display: flex; align-items: center; }

  /* iOS Safari zooms the whole page whenever a focused input has a font-size
     below 16px — the layout jumps and the visitor has to pinch back out mid
     form-fill. These were 15px. 16px is the threshold, not a preference. */
  .input,
  input.input,
  select.input,
  textarea.input { font-size: 16px; }

  /* The <select> came in at 42px; below the 44px touch floor. */
  select.input { min-height: 44px; }
}