@import url('variables.css');

/* ==========================================================================
   TORXUP — Stylesheet
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;   /* clears the sticky header on anchor jumps */
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }

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

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  background: var(--bg-light);
  color: var(--text-on-light);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}
@media (min-width: 768px) { .wrap { padding: 0 40px; } }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { max-width: 62ch; }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-orange);
  color: var(--color-accent-text);
  padding: 12px 20px;
  font-weight: 700;
  z-index: 1000;
}
.skip-link:focus { left: 20px; top: 20px; }

.br-mobile { display: inline; }
@media (min-width: 640px) { .br-mobile { display: none; } }

/* ---------- Section shells ---------- */
.section-light { background: var(--bg-light); color: var(--text-on-light); }
.section-dark  { background: var(--bg-dark);  color: var(--text-on-dark); }

.pad-tight { padding: var(--pad-tight) 0; }
.pad-md    { padding: var(--pad-md) 0; }
.pad-lg    { padding: var(--pad-lg) 0; }

.section-heading { font-size: var(--text-4xl); margin-bottom: var(--space-block); }
.heading-on-dark { color: var(--text-on-dark); }

.section-sub {
  font-size: var(--text-lg);
  color: var(--text-on-light-muted);
  margin-top: -12px;
  margin-bottom: var(--space-block);
  max-width: 42ch;
}
.sub-on-dark { color: var(--text-on-dark-muted); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--text-sm);
  color: var(--color-orange);
  margin-bottom: var(--space-tight);
}

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--text-base);
  min-height: 48px;
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.btn-primary {
  background: var(--color-orange);
  color: var(--color-accent-text);
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(232, 100, 42, 0.35);
}
.btn-lg    { padding: 16px 32px; font-size: var(--text-lg); }
.btn-block { width: 100%; }
.btn-nav   { display: none; }
@media (min-width: 1024px) { .btn-nav { display: inline-flex; } }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--text-base);
  color: var(--text-on-dark-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.link-arrow:hover { color: var(--text-on-dark); border-color: var(--color-orange); }
.link-arrow span { transition: transform var(--duration-fast) var(--ease-out); }
.link-arrow:hover span { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border-on-dark);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 16px;
}
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: var(--text-on-dark);
}
.logo-x { color: var(--color-orange); }

.nav-desktop { display: none; }
@media (min-width: 1024px) {
  .nav-desktop { display: flex; gap: 32px; margin-left: auto; margin-right: 32px; }
  .nav-desktop a {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--text-sm);
    letter-spacing: 0.03em;
    color: var(--text-on-dark-muted);
    transition: color var(--duration-fast) var(--ease-out);
  }
  .nav-desktop a:hover { color: var(--text-on-dark); }
}

.nav-toggle {
  width: 44px; height: 44px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--text-on-dark);
  transition: transform var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  position: fixed;
  inset: 68px 0 0 0;
  background: var(--bg-dark);
  transform: translateX(100%);
  transition: transform var(--duration-medium) var(--ease-out);
  z-index: 99;
  overflow-y: auto;
}
.nav-mobile.is-open { transform: translateX(0); }
.nav-mobile nav { display: flex; flex-direction: column; padding: 40px 20px; gap: 8px; }
.nav-mobile nav a {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-2xl);
  color: var(--text-on-dark);
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-on-dark);
}
.nav-mobile nav a.btn { margin-top: 20px; border-bottom: 0; text-align: center; }
@media (min-width: 1024px) { .nav-mobile { display: none; } }

/* ---------- Hero — Pattern B: The Split ---------- */
.hero {
  position: relative;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  overflow: hidden;
}
/* Title and primary CTA sit ON the picture; the supporting line carries on
   below it. The tool is mirrored so it lands right and the copy gets the
   dark side of the frame.
   Frame ratio matters: this is a 3:2 source, so an over-tall box forces
   object-fit:cover to crop the tool into a fragment. 4:5 keeps it whole. */
.hero-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 8% center;    /* pre-mirror coords — keeps chuck-to-battery in frame */
}

/* scrim — enough contrast for the copy without flattening the picture */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(23,37,42,0.95) 0%,
    rgba(23,37,42,0.88) 26%,
    rgba(23,37,42,0.50) 52%,
    rgba(23,37,42,0.12) 100%);
}

.hero-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: var(--space-block);
}
.hero-copy { max-width: 620px; }
.hero-cta { margin-top: var(--space-element); }

.hero-support {
  padding-top: var(--space-block);
  padding-bottom: var(--pad-tight);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-element);
}

@media (min-width: 768px) {
  .hero-frame { aspect-ratio: 16 / 9; }
  .hero-photo { object-position: 22% center; }
  /* landscape frame — fade across instead of up, copy sits on the dark left */
  .hero-media::after {
    background: linear-gradient(to right,
      rgba(23,37,42,0.94) 0%,
      rgba(23,37,42,0.80) 42%,
      rgba(23,37,42,0.28) 74%,
      rgba(23,37,42,0.08) 100%);
  }
  .hero-overlay { padding-bottom: var(--pad-tight); }
  .hero-support {
    flex-direction: row;
    align-items: center;
    gap: var(--space-block);
    padding-bottom: var(--pad-md);
  }
}

@media (min-width: 1024px) {
  .hero-frame { aspect-ratio: 21 / 9; min-height: 560px; }
}

.hero-headline {
  font-size: var(--text-hero);
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
}
.hero-statement {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-orange);
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.hero-sub {
  font-size: var(--text-lg);
  color: var(--text-on-dark-muted);
  margin-top: var(--space-block);
  max-width: 46ch;
}
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: var(--space-block);
}

/* ---------- USPs [C67-C69] — oversized statements, not icon cards ---------- */
.usp-list { display: flex; flex-direction: column; }
/* mobile: single rail — the mark sits above, text starts on the 20px gutter */
.usp {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--border-on-light);
}
.usp:last-child { border-bottom: 1px solid var(--border-on-light); }
.usp-mark {
  width: 12px; height: 12px;
  background: var(--color-orange);
  flex-shrink: 0;
}
.usp-text {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 20ch;
}
@media (min-width: 768px) {
  .usp { grid-template-columns: 60px 1fr; gap: 20px; }
  .usp-mark { margin-top: 16px; }
  .usp:nth-child(2) .usp-text { margin-left: 8%; }
  .usp:nth-child(3) .usp-text { margin-left: 16%; }
}

/* ---------- Services [C12-C27] — Asymmetric Accordion ---------- */
.services-list { border-top: 1px solid var(--border-on-dark); }

.service-row { border-bottom: 1px solid var(--border-on-dark); }

.service-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  text-align: left;
  transition: color var(--duration-fast) var(--ease-out);
}
.service-index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-orange);
  letter-spacing: 0.1em;
}
.service-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--text-2xl);
  color: var(--text-on-dark);
  letter-spacing: -0.01em;
  transition: color var(--duration-fast) var(--ease-out);
}
.service-trigger:hover .service-title { color: var(--color-orange); }

.service-plus {
  position: relative;
  width: 20px; height: 20px;
  flex-shrink: 0;
}
.service-plus::before,
.service-plus::after {
  content: "";
  position: absolute;
  background: var(--color-orange);
  transition: transform var(--duration-medium) var(--ease-out);
}
.service-plus::before { top: 9px; left: 0; width: 20px; height: 2px; }
.service-plus::after  { left: 9px; top: 0; width: 2px; height: 20px; }
.service-trigger[aria-expanded="true"] .service-plus::after { transform: rotate(90deg); }

.service-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-medium) var(--ease-out);
}
.service-panel[data-open="true"] { grid-template-rows: 1fr; }
.service-panel-inner { overflow: hidden; }
.service-body {
  padding: 0 0 28px 0;
  color: var(--text-on-dark-muted);
  font-size: var(--text-lg);
  max-width: 52ch;
}
@media (min-width: 768px) {
  .service-trigger { grid-template-columns: 90px 1fr auto; }
  .service-body { padding-left: 90px; max-width: 60ch; }
}
.service-cta { margin-top: var(--space-element); }

/* ---------- How it works — Numbered Stack ---------- */
.steps-list { display: flex; flex-direction: column; }
/* mobile: numeral stacks above the copy so both sit on the 20px gutter */
.step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 22px 0;
  border-top: 1px solid var(--border-on-light);
}
.step:last-child { border-bottom: 1px solid var(--border-on-light); }
.step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-3xl);
  color: var(--color-orange);
  line-height: 0.8;
}
.step-body h3 { font-size: var(--text-xl); margin-bottom: 6px; }
.step-body p  { color: var(--text-on-light-muted); font-size: var(--text-base); }
@media (min-width: 768px) {
  .step { grid-template-columns: 160px 1fr; gap: 16px; padding: 24px 0; }
  .step-num { font-size: var(--text-5xl); }
  .step:nth-child(even) .step-body { margin-top: 32px; }
}

/* ---------- Instant estimate ---------- */
.estimate-grid { display: grid; gap: var(--space-block); }
@media (min-width: 1024px) {
  .estimate-grid { grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
}

.tile-select { margin-top: var(--space-block); }
.tile-label {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-sm);
  color: var(--text-on-dark-muted);
  margin-bottom: var(--space-tight);
}
.tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.tile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 12px;
  min-height: 44px;
  border: 2px solid var(--border-on-dark);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--text-on-dark-muted);
  transition: all var(--duration-fast) var(--ease-out);
}
.tile:hover { border-color: var(--text-on-dark); color: var(--text-on-dark); }
.tile[aria-pressed="true"] {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-accent-text);
}

/* Tool glyphs — product teal, the one sanctioned non-photographic use */
.tile-icon { width: 24px; height: 28px; flex-shrink: 0; }
.tile-icon .ti-light,
.estimate-card-icon .ti-light { fill: var(--color-product); }
.tile-icon .ti-dark,
.estimate-card-icon .ti-dark  { fill: var(--color-product-shade); }
.tile-icon .ti-stroke,
.estimate-card-icon .ti-stroke { stroke: var(--color-product); }
.tile[aria-pressed="true"] .tile-icon .ti-light,
.tile[aria-pressed="true"] .tile-icon .ti-dark { fill: var(--color-accent-text); }
.tile[aria-pressed="true"] .tile-icon .ti-stroke { stroke: var(--color-accent-text); }

.estimate-card-wrap { margin-top: var(--space-block); }
@media (min-width: 1024px) { .estimate-card-wrap { margin-top: 76px; margin-right: -16px; } }

.estimate-card {
  background: var(--bg-dark-raised);
  border: 1px solid var(--border-on-dark);
  border-radius: 8px;
  padding: 28px;
  box-shadow: 10px 10px 0 rgba(232, 100, 42, 0.12);
}
.estimate-card-top { display: flex; align-items: center; gap: 16px; }
.estimate-card-icon { width: 44px; height: 52px; flex-shrink: 0; }
.estimate-card-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  color: var(--text-on-dark-muted);
  margin-bottom: 4px;
}
.estimate-model {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  color: var(--text-on-dark);
}
.estimate-fault {
  color: var(--text-on-dark-muted);
  margin-top: 4px;
  margin-bottom: var(--space-element);
}
.estimate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--border-on-dark);
  font-size: var(--text-sm);
  color: var(--text-on-dark-muted);
}
.estimate-row strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-orange);
  font-weight: 700;
}
.estimate-card .btn { margin-top: var(--space-element); }
.estimate-footnote {
  font-size: var(--text-xs);
  color: var(--text-on-dark-muted);
  margin-top: var(--space-tight);
  max-width: 100%;
}

/* Price bands folded into the estimate section */
.bands {
  margin-top: var(--space-block);
  padding-top: var(--space-block);
  border-top: 1px solid var(--border-on-dark);
}
.bands-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  color: var(--text-on-dark-muted);
  margin-bottom: var(--space-element);
}
.bands-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (min-width: 768px) { .bands-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 1024px) { .bands-grid { grid-template-columns: repeat(6, 1fr); } }
.band {
  border: 1px solid var(--border-on-dark);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.band-tool {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--text-on-dark-muted);
  letter-spacing: 0.03em;
}
.band-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--text-on-dark);
}

/* ---------- Tracker ---------- */
.tracker-grid { display: grid; gap: var(--space-block); }
@media (min-width: 1024px) { .tracker-grid { grid-template-columns: 5fr 7fr; gap: 48px; } }

.tracker-message {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: var(--space-block);
  max-width: 46ch;
}
.tracker-message-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--text-lg);
  margin-bottom: 4px;
}
.tracker-message p:last-child { color: var(--text-on-dark-muted); }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-row li {
  border: 1px solid var(--border-on-light);
  border-radius: 100px;
  padding: 9px 16px;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-on-light-muted);
}

.tracker-visual {
  background: var(--bg-dark);
  border-radius: 8px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tracker-visual li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--text-base);
  color: var(--text-on-dark-muted);
}
.tracker-visual .dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--text-on-dark-muted);
  flex-shrink: 0;
}
.tracker-visual li.done { color: var(--text-on-dark); }
.tracker-visual li.done .dot { background: var(--color-orange); border-color: var(--color-orange); }
.tracker-visual li.active { color: var(--color-orange); }
.tracker-visual li.active .dot {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 4px rgba(232,100,42,0.2);
}

/* ---------- About preview [C36] ---------- */
.about-grid { display: grid; gap: var(--space-block); align-items: center; }
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: 6fr 6fr; gap: 64px; }
  /* offset the image against the text — edge tension, not a tidy 50/50 */
  .about-media { margin-top: 48px; }
}
.about-media { border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; }
@media (min-width: 1024px) { .about-media { aspect-ratio: 16 / 10; } }
.about-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.about-text { font-size: var(--text-lg); color: var(--text-on-dark-muted); max-width: 46ch; }
.about-mission {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--text-xl);
  color: var(--text-on-dark);
  margin-top: var(--space-element);
  padding-top: var(--space-element);
  border-top: 1px solid var(--border-on-dark);
  max-width: 24ch;
}

/* ---------- Final CTA [C70] ---------- */
.final-cta-grid { display: grid; gap: var(--space-block); align-items: center; }
@media (min-width: 1024px) { .final-cta-grid { grid-template-columns: 5fr 7fr; gap: 56px; } }
/* portrait source — a landscape crop decapitates the tool and loses the tag,
   so keep it square on mobile and framed on the tool + tag */
.final-cta-media { border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; }
@media (min-width: 1024px) { .final-cta-media { aspect-ratio: 3 / 4; } }
.final-cta-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }

/* mobile: stack so VS sits between the two cards, not stranded beside one */
.compare {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: var(--space-block);
}
@media (min-width: 560px) {
  .compare { flex-direction: row; align-items: center; gap: 20px; flex-wrap: wrap; }
}
.compare-item {
  border: 1px solid var(--border-on-light);
  border-radius: 8px;
  padding: 18px 26px;
  min-width: 160px;
}
.compare-vs { text-align: center; }
.compare-item span {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-on-light-muted);
  margin-bottom: 6px;
}
.compare-item strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  color: var(--text-on-light);
}
.compare-item-accent { border-color: var(--color-orange); }
.compare-item-accent strong { color: var(--color-orange); }
.compare-vs {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-on-light-muted);
}

/* ---------- Contact — job docket ---------- */
.contact-grid { display: grid; gap: var(--space-block); }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 7fr; gap: 48px; } }

.docket {
  background: var(--bg-light);
  color: var(--text-on-light);
  border-radius: 4px;
  max-width: 560px;
  box-shadow: 14px 14px 0 rgba(232, 100, 42, 0.18);
}
.docket-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 2px dashed var(--border-on-light);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-light-muted);
}
.docket-no { color: var(--color-orange); font-weight: 700; }
.docket-row { padding: 18px 24px 0; }
.docket-row:last-of-type { padding-bottom: 4px; }
.docket .btn { margin: 24px 24px 0; width: calc(100% - 48px); }
.docket-row label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--text-sm);
  margin-bottom: 8px;
}
.optional {
  text-transform: none;
  font-weight: 400;
  color: var(--text-on-light-muted);
  letter-spacing: 0;
}
.docket-row input,
.docket-row textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--border-on-light);
  border-radius: 4px;
  background: #FFFFFF;
  font-size: 16px;    /* 16px minimum stops iOS zoom-on-focus */
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.docket-row input:focus,
.docket-row textarea:focus {
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(232,100,42,0.15);
}
.docket-row input[aria-invalid="true"],
.docket-row textarea[aria-invalid="true"] { border-color: var(--color-error); }
.docket-row textarea { resize: vertical; min-height: 100px; }
.field-error {
  display: block;
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--color-error);
  font-weight: 600;
  min-height: 1em;
}
.form-note { margin: 12px 24px 20px; font-size: var(--text-sm); min-height: 1.4em; }
.form-note.is-success { color: var(--color-success); font-weight: 600; }
.form-note.is-error   { color: var(--color-error);   font-weight: 600; }

/* ---------- Footer — LaunchedIn10 signature architecture ---------- */
.site-footer {
  background: var(--bg-dark);
  color: var(--text-on-dark-muted);
  padding-top: var(--pad-tight);
}
.footer-brand { padding-bottom: var(--space-block); }
.footer-brand .logo-footer { color: var(--text-on-dark); }
.footer-brand p { margin-top: 8px; font-size: var(--text-sm); }

.footer-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-block) var(--space-element);
  padding: var(--space-block) 0;
  border-top: 1px solid var(--border-on-dark);
}
@media (min-width: 768px) { .footer-columns { grid-template-columns: repeat(4, 1fr); } }
.footer-col h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--text-on-dark);
  margin-bottom: var(--space-tight);
}
.footer-col li { margin-bottom: 10px; }
.footer-col a, .footer-col span { font-size: var(--text-sm); }
.footer-col a:hover { color: var(--text-on-dark); }
.footer-col .missing { color: var(--text-on-dark-muted); opacity: 0.6; font-style: italic; }

.footer-legal {
  padding: var(--space-block) 0;
  border-top: 1px solid var(--border-on-dark);
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
  font-size: var(--text-xs);
}
.footer-legal p:first-child { max-width: 70ch; }

.footer-signature {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
  padding: var(--space-element) 0 var(--space-block);
  border-top: 1px solid var(--border-on-dark);
  font-size: var(--text-xs);
}
@media (min-width: 768px) {
  .footer-signature { flex-direction: row; justify-content: space-between; align-items: center; }
}
.footer-signature a { border-bottom: 1px solid var(--border-on-dark); }
.footer-signature a:hover { color: var(--text-on-dark); border-color: var(--color-orange); }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 400ms var(--ease-out),
              transform 400ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   MOTION
   Everything below is either in the design-system micro-interaction table or
   demonstrates the product. No parallax, no scroll-jacking, no loops,
   nothing over 800ms, nothing re-triggers on scroll-back.
   ========================================================================== */

/* ---------- Hero entrance sequence ----------
   Hidden state is gated on .is-primed, which only JS sets. If the script
   never runs, nothing is hidden and the hero renders as plain content. */
.hero.is-primed .hero-copy > * {
  opacity: 0;
  transform: translateY(18px);
}
.hero-copy > * {
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.hero.is-loaded .hero-copy > *          { opacity: 1; transform: translateY(0); }
.hero.is-loaded .hero-copy > *:nth-child(1) { transition-delay: 60ms; }
.hero.is-loaded .hero-copy > *:nth-child(2) { transition-delay: 140ms; }
.hero.is-loaded .hero-copy > *:nth-child(3) { transition-delay: 220ms; }
.hero.is-loaded .hero-copy > *:nth-child(4) { transition-delay: 300ms; }
.hero.is-loaded .hero-copy > *:nth-child(5) { transition-delay: 380ms; }

/* --mirror flips the tool to the right; kept in a variable so the entrance
   scale composes with it instead of overwriting it */
.hero-photo {
  --mirror: -1;
  transform: scaleX(var(--mirror));
  transition: transform 800ms var(--ease-out), opacity 700ms var(--ease-out);
}
.hero.is-primed .hero-photo { transform: scaleX(var(--mirror)) scale(1.06); opacity: 0; }
.hero.is-loaded .hero-photo { transform: scaleX(var(--mirror)) scale(1); opacity: 1; }

/* ---------- Media: figures arrive differently from text ---------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out), clip-path 700ms var(--ease-out);
}
/* .is-primed is JS-set — without it the image renders normally */
.media.is-primed img { transform: scale(1.05); clip-path: inset(0 0 100% 0); }
.media.is-visible img { transform: scale(1); clip-path: inset(0 0 0 0); }

/* hover scale 1.02 — design system micro-interaction table */
.media:hover img { transform: scale(1.02); }

/* Mobile: photographs run edge to edge like the hero. A rounded rectangle
   floating in a grid cell with dead space around it reads as a placeholder
   on a 375px screen; a full-bleed frame reads as editorial. Text stays in
   the gutter — design system Rule 2, edge tension. */
@media (max-width: 1023px) {
  .media {
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0;
  }
}

/* ---------- Cards: lift 4px, shadow expands ---------- */
.band,
.compare-item {
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.band:hover {
  transform: translateY(-4px);
  border-color: var(--color-orange);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}
.compare-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(23,37,42,0.12);
}

.service-row { transition: background var(--duration-fast) var(--ease-out); }
.service-row:hover { background: rgba(243,240,232,0.03); }

/* ---------- Text links: underline grows left to right ---------- */
.link-arrow {
  position: relative;
  border-bottom: 0;
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 2px;
  background: var(--color-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-out);
}
.link-arrow:hover::after { transform: scaleX(1); }

/* ---------- Tracker: stages fill in sequence, demonstrating the product ---------- */
.tracker-visual li .dot { transition: background var(--duration-medium) var(--ease-out),
                                      border-color var(--duration-medium) var(--ease-out),
                                      box-shadow var(--duration-medium) var(--ease-out); }
.tracker-visual li { transition: color var(--duration-medium) var(--ease-out); }
.tracker-visual li.done:not(.is-lit) { color: var(--text-on-dark-muted); }
.tracker-visual li.done:not(.is-lit) .dot { background: transparent; border-color: var(--text-on-dark-muted); }
.tracker-visual li.active:not(.is-lit) { color: var(--text-on-dark-muted); }
.tracker-visual li.active:not(.is-lit) .dot { border-color: var(--text-on-dark-muted); box-shadow: none; }

/* ---------- Estimate card: values transition rather than snapping ---------- */
.estimate-card.is-swapping .estimate-model,
.estimate-card.is-swapping .estimate-fault,
.estimate-card.is-swapping .estimate-row strong,
.estimate-card.is-swapping .estimate-card-icon {
  opacity: 0;
  transform: translateY(6px);
}
.estimate-model,
.estimate-fault,
.estimate-row strong,
.estimate-card-icon {
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

/* ---------- Comparison: the argument ---------- */
.versus {
  margin-top: var(--pad-tight);
  padding-top: var(--pad-tight);
  border-top: 1px solid var(--border-on-light);
}
.versus-heading {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-block);
}
.versus-grid { display: grid; gap: var(--space-element); }
@media (min-width: 900px) { .versus-grid { grid-template-columns: 1fr 1fr; gap: var(--space-block); } }

.versus-col {
  border: 1px solid var(--border-on-light);
  border-radius: 8px;
  padding: 28px 24px;
}
.versus-col-them { background: transparent; }
.versus-col-us {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--text-on-dark);
}
@media (min-width: 900px) { .versus-col-us { margin-top: -28px; } }

.versus-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--text-xs);
  margin-bottom: var(--space-element);
  color: var(--text-on-light-muted);
}
.versus-col-us .versus-label { color: var(--color-orange); }

.versus-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--border-on-light);
  font-size: var(--text-base);
}
.versus-col-us .versus-list li { border-top-color: var(--border-on-dark); }
.versus-list li:first-child { border-top: 0; }
.versus-mark { font-family: var(--font-mono); font-size: var(--text-base); line-height: 1.5; }
.versus-col-them .versus-mark { color: var(--text-on-light-muted); }
.versus-col-us .versus-mark { color: var(--color-orange); }
.versus-col-them li { color: var(--text-on-light-muted); }

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .media img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  /* keep the mirror — that is composition, not motion */
  .hero-photo { opacity: 1 !important; transform: scaleX(var(--mirror)) !important; }
}