/* ==========================================================================
   Juggernaut — shared design system
   Single stylesheet. No framework, no build step, no preprocessor.
   Every page links this file directly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — SEE assets/css/tokens.css
   -------------------------------------------------------------------------- */
/* SITE.16 moved every token out to tokens.css, which holds the palette, type
   and rhythm extracted from the live site at hailsupps.com. Every page links
   tokens.css BEFORE this file. This stylesheet is the component layer and owns
   no values of its own — if a colour or a size needs changing, it changes there.

   The palette flipped from dark to light in that move, because the live site is
   light: its Tailwind config declares darkMode:"class" but nothing ever sets
   `dark` on <html>, so the page renders background-light with a white nav and
   slate-900 copy. The dark treatment survives as a banded section (.band--dark)
   rather than as the page. */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--fw-normal);
  font-size: var(--fs-lg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}
a:hover { color: var(--text); }

/* Display type — condensed, heavy, uppercase */
h1, h2, h3, h4,
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);   /* Oswald 700 — the weight the live site loads */
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.1; }
h4 { font-size: 1.05rem; letter-spacing: 0.04em; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

/* Small caps-style eyebrow label */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  display: block;
}

.lede {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--muted);
  max-width: 62ch;
}

.rule {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: clamp(56px, 8vw, 104px) 0;
}
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.section--alt   { background: var(--surface); }

.section-head {
  max-width: 70ch;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--split {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

/* --------------------------------------------------------------------------
   4. Header / nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* SITE.22 — the wordmark is now two words, "JUGGERNAUT $UPPLEMENT$", roughly twice the
   glyph count of the old "JUGGERNAUT$". It stays on one line (nowrap) because splitting it
   across two reads as two separate words rather than one name, so the SIZE flexes instead:
   the clamp lets it shrink on a narrow viewport rather than pushing the nav off-screen. */
.brand {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1rem, 3.2vw, 1.45rem);
  letter-spacing: 0.03em;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
}
.brand:hover { color: var(--text); }
.brand span { color: var(--accent); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  flex-wrap: wrap;
}

.nav a {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
  background: var(--accent);
  color: #1a202c;   /* pricing .btn-filled ink */
  border-color: var(--accent);
}
.btn--primary:hover {
  background: transparent;
  color: var(--accent);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--hairline);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn--sm { padding: 11px 20px; font-size: 0.72rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(64px, 11vw, 132px) 0 clamp(48px, 7vw, 88px);
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(900px 420px at 12% -10%, var(--accent-soft), transparent 70%),
    var(--bg);
}
.hero h1 { max-width: 16ch; }
.hero .lede { margin-top: 22px; }

/* Compact hero for interior pages */
.page-hero {
  padding: clamp(48px, 7vw, 84px) 0 clamp(32px, 4vw, 52px);
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(700px 320px at 85% -30%, var(--accent-soft), transparent 70%),
    var(--bg);
}

/* --------------------------------------------------------------------------
   7. Stat band
   -------------------------------------------------------------------------- */
.stat-band {
  background: var(--surface);
  border-top: 1px solid var(--accent-dim);
  border-bottom: 1px solid var(--accent-dim);
  padding: clamp(32px, 5vw, 56px) 0;
  text-align: center;
}
.stat-band__figure {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.9rem, 5.4vw, 3.6rem);
  line-height: 1;
  margin: 0;
  color: var(--text);
}
.stat-band__figure em {
  font-style: normal;
  color: var(--accent);
}
.stat-band__note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--accent-dim); }
.card__num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 12px;
}
.card h3 { margin-bottom: 12px; }
.card .btn { align-self: flex-start; margin-top: 20px; }

/* Numbered process steps */
.steps { counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: clamp(16px, 3vw, 32px);
  padding: clamp(24px, 3vw, 34px) 0;
  border-top: 1px solid var(--hairline);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--hairline); }
.step__num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 0.9;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   9. Placeholder copy marker
   Every body paragraph awaiting real copy carries .placeholder.
   Grep the repo for "placeholder" to find every one of them.
   -------------------------------------------------------------------------- */
.placeholder {
  position: relative;
  border-left: 3px dashed var(--accent-dim);
  padding: 4px 0 4px 16px;
  color: var(--muted);
}
.placeholder::before {
  content: "PLACEHOLDER";
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  border-radius: 2px;
  padding: 2px 7px;
  margin-right: 10px;
  vertical-align: 2px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   10. Image slots — dashed teal boxes, labelled with intended dimensions.
       No <img> tags anywhere until real assets exist.
   -------------------------------------------------------------------------- */
.img-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 180px;
  padding: 24px;
  border: 2px dashed var(--accent-dim);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.img-slot::after {
  content: "Image slot — " attr(data-dim);
}
.img-slot--wide  { aspect-ratio: 16 / 9;  min-height: 0; }
.img-slot--tall  { aspect-ratio: 3 / 4;   min-height: 0; }
.img-slot--square{ aspect-ratio: 1 / 1;   min-height: 0; }
.img-slot--strip { min-height: 120px; }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.form {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
}

.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.field label .req { color: var(--accent); }

.field input,
.field textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  padding: 13px 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { resize: vertical; min-height: 150px; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }

/* Native HTML5 validation styling — only after the user has typed something */
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid {
  border-color: #dc2626;   /* slate-ramp red for invalid input */
}

.field__hint {
  margin: 7px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Static notice revealed on submit — no network call is made */
.form-notice {
  margin-top: 22px;
  padding: 14px 18px;
  border: 1px dashed var(--accent-dim);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 500;
}
.form-notice[hidden] { display: none; }

/* --------------------------------------------------------------------------
   12. Blog
   -------------------------------------------------------------------------- */
.post-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.post-card:hover { border-color: var(--accent-dim); }
.post-card__body { padding: clamp(20px, 3vw, 28px); }
.post-meta {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.article {
  max-width: 74ch;
}
.article h2 { margin-top: 1.6em; }
.article blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

/* Post images come from the CMS at unknown pixel dimensions, so the width is capped by
   the column and the height is always derived — never let one break the 74ch measure. */
.article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2em 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.article figure {
  margin: 2em 0;
}
.article figure img { margin: 0; }
.article figcaption {
  margin-top: 12px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted);
}
.back-link {
  display: inline-block;
  margin-top: 44px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding: clamp(40px, 6vw, 64px) 0 28px;
  margin-top: 0;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}
.site-footer h4 {
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  margin-bottom: 14px;
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li { margin-bottom: 9px; }
.footer-links a { color: var(--muted); font-size: 0.92rem; }
.footer-links a:hover { color: var(--accent); }

.site-footer__base {
  margin-top: clamp(32px, 5vw, 48px);
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   14. Utilities
   -------------------------------------------------------------------------- */
.text-muted  { color: var(--muted); }
.text-accent { color: var(--accent); }
.center      { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 18px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #1a202c;   /* pricing .btn-filled ink */
  padding: 10px 16px;
  font-weight: 600;
  z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .site-header__inner {
    justify-content: center;
    text-align: center;
  }
  .nav { justify-content: center; order: 3; width: 100%; }
  .site-header .btn { order: 2; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .btn-row .btn { flex: 1 1 100%; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .site-footer__base { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   16. SITE.16 — components carried over from the live site
   The live site expresses these as Tailwind utility strings plus three custom
   classes. Restated here as components so the markup stays readable and the
   values stay in tokens.css.
   -------------------------------------------------------------------------- */

/* .metallic-gradient on hailsupps.com — a dark radial band inside a light page,
   used for the hero and the closing CTA. Text inside flips to the invert ramp. */
.band--dark {
  background: var(--metallic-gradient);
  color: var(--text-invert);
  border-top: 1px solid var(--hairline-invert);
  border-bottom: 1px solid var(--hairline-invert);
}
.band--dark h1,
.band--dark h2,
.band--dark h3,
.band--dark h4,
.band--dark .stat-band__figure { color: var(--text-invert); }
.band--dark .lede,
.band--dark .muted,
.band--dark p { color: var(--muted-invert); }
.band--dark .btn--ghost { color: var(--text-invert); border-color: var(--hairline-invert); }
.band--dark .card { background: var(--glass-bg); border: var(--glass-border); backdrop-filter: var(--glass-blur); }
.band--dark .card p { color: var(--muted-invert); }

/* .glass-card — translucent panel, only legible over a dark band. */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px);
}

/* .teal-glow — the accent halo on primary CTAs and feature tiles. */
.glow { box-shadow: var(--teal-glow); }
.btn--primary:hover { box-shadow: var(--teal-glow-strong); }

/* Feature tiles under the hero (speed / clean / updates / adjuster-friendly). */
.feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(28px, 4vw, 44px);
}
.feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}
.feature__dot {
  width: 8px; height: 8px; flex: 0 0 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--teal-glow);
}

/* Checklists inside service cards — teal tick, no bullet. */
.ticks { list-style: none; margin: 0 0 24px; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: var(--fs-sm);
}
.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: var(--fw-bold);
}

/* Problem list on Our Process — the ✕ column. */
.crosses { list-style: none; margin: 0; padding: 0; }
.crosses li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 16px;
  color: var(--muted);
}
.crosses li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 0;
  color: #dc2626;
  font-weight: var(--fw-bold);
}

/* Testimonials. */
.quote { font-size: var(--fs-base); line-height: 1.75; }
.quote__stars { color: var(--accent); letter-spacing: 3px; margin-bottom: 12px; }
.quote__who { font-weight: var(--fw-bold); font-size: var(--fs-sm); margin: 16px 0 2px; }
.quote__org { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

/* SITE.22 deleted the .price-figure / .price-rows / .price-row / .example components with
   pricing.html. They had exactly one consumer and keeping them would leave the fee tables
   one paste away from being reachable again. */

/* SITE.26 — About Us photographs, served from the public marketing bucket.
   Replaces the SITE.22 .photo/--photo slot mechanism, which pointed at four
   /assets/img/about-*.jpg files that never existed. Arrangement follows the internal
   about-us.html: team full width, float 70%, lion as a circle.

   Space is reserved two ways so nothing reflows when a multi-megabyte image lands —
   aspect-ratio on the frame, plus width/height attributes on each <img>. The image
   fills its frame with object-fit:cover, which is also what lets the 16:9 lion sit in
   a circle without distorting. */
.about-figure { margin: 0; }
.about-figure figcaption {
  margin-top: 10px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}

.img-frame {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.img-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Team — full width, capped at 500px tall. */
.img-team {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 500px;
}

/* Float — 70% width, capped at 400px tall, centred. */
.img-float {
  width: 70%;
  aspect-ratio: 4 / 3;
  max-height: 400px;
  margin: 0 auto;
}

/* Lion — 300px circle. */
.lion-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-lion {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  box-shadow: var(--teal-glow);
}
.img-lion img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 620px) {
  .img-float { width: 90%; }
  .img-lion  { width: 220px; height: 220px; }
}

/* Contact / footer detail lines. */
.detail-list { list-style: none; margin: 0; padding: 0; }
.detail-list li { margin-bottom: 12px; }
.detail-list a { color: var(--text); }
.detail-list a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   17. SITE.24 — live forms
   -------------------------------------------------------------------------- */

/* HONEYPOT.
   Deliberately NOT type="hidden": bots skip hidden inputs, which is exactly the population
   this field exists to catch. It is a real, focusable-by-nothing text input pushed off
   screen. Kept out of the accessibility tree (aria-hidden) and out of the tab order
   (tabindex="-1" in the markup) so a screen-reader user never meets it, and left with a
   name a scraper wants to fill in. Nothing here may become display:none — that is the one
   treatment a bot can detect as cheaply as a browser can. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* State machine, driven by data-state on the form. */
form[data-web-form][data-state="sent"] .form-body { display: none; }
form[data-web-form] [data-form-success] { display: none; }
form[data-web-form][data-state="sent"] [data-form-success] { display: block; }

.form-success {
  text-align: center;
  padding: clamp(16px, 3vw, 28px) 0;
}
.form-success h3 { color: var(--accent); margin-bottom: 10px; }
.form-success p { color: var(--muted); margin: 0; }

.form-error {
  margin: 0 0 20px;
  padding: 13px 16px;
  border: 1px solid #dc2626;
  border-left-width: 3px;
  border-radius: var(--radius);
  background: rgba(220, 38, 38, 0.06);
  color: #b91c1c;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.form select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 13px 15px;
}
.form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 22px;
}

.form button[type="submit"][disabled] { opacity: 0.6; cursor: progress; }

/* Without JavaScript the submit cannot work, so the form says so and gives the phone and
   email instead. The page itself stays fully readable either way. */
.form-noscript {
  margin: 0 0 20px;
  padding: 13px 16px;
  border: 1px solid var(--accent-dim);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--accent-faint);
  font-size: var(--fs-sm);
}

/* SITE.25 — checkbox group, carried over from the legacy contractor-signup field set.
   A <fieldset> so the group has a real accessible name from its <legend>; the browser
   default border and padding are stripped so it sits in the same rhythm as .field. */
.checkbox-group {
  border: 0;
  margin: 0 0 22px;
  padding: 0;
  min-inline-size: 0;   /* a fieldset will not shrink below its content without this */
}
.checkbox-group legend {
  display: block;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.checkbox-group label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 18px 10px 0;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  /* .field label is uppercase/tracked — these are option labels, not field labels. */
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--fw-normal);
}
.checkbox-group input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   18. Intro video — click-to-play, deliberately cheap to NOT play
   -------------------------------------------------------------------------- */
/* The source file is ~65 MB. `preload="none"` on the tag is the only thing keeping
   that off the initial page load, so none of the styling below may reintroduce a
   fetch: no background-image pointing at the mp4, no autoplay, no JS. The poster is
   a separate ~118 KB still. */
.video-band {
  padding: clamp(28px, 4vw, 52px) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.video-frame {
  max-width: 900px;
  margin: 0 auto;
}

/* aspect-ratio AND the width/height attributes on the element. The attributes give
   older engines an intrinsic ratio to reserve; aspect-ratio covers the rest. Either
   alone leaves a reflow on some browser — the point is that the space is held before
   the poster arrives, so nothing below jumps when it does. */
.video-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  /* Stops a wide intrinsic size from pushing the page sideways on a phone. */
  max-width: 100%;
}

.video-caption {
  margin: 12px 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted);
}