/* Industrial Contractor LLC — commercial painting & floor striping
   Cinematic scroll hero drawn in vector, so it weighs almost nothing. */

:root {
  --navy: #12212c;
  --deep: #0a141b;
  --deeper: #060d12;
  --cream: #f7f2e7;
  --paper: #fffdf9;
  --ink: #17222b;
  --ink-soft: #3d4750;
  --ink-mute: #5e6a74;
  --on-navy: #f3ede0;
  --on-navy-mute: #97a3ad;
  --accent: #d9541e;
  --accent-lift: #f2691f;
  --accent-ink: #fffaf3;
  --rule: #e2d9c7;

  --display: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  --body: "Inter", "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --shell: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; }
html.js-enabled body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.028em; line-height: 1.02; margin: 0; }
p { margin: 0; }

.shell { width: min(100% - 40px, var(--shell)); margin-inline: auto; }

.label {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: 12px 18px;
  font-family: var(--mono); font-size: 13px;
}
.skip:focus { left: 12px; top: 12px; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--accent-lift); outline-offset: 3px;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border: 0; border-radius: 2px;
  font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-lift); }
.btn-ghost { background: transparent; color: var(--on-navy); box-shadow: inset 0 0 0 1.5px rgba(243,237,224,.34); }
.btn-ghost:hover { background: rgba(243,237,224,.09); }
.btn-dark { background: var(--navy); color: var(--on-navy); }
.btn-dark:hover { background: #1b3040; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule); }
.btn-line:hover { background: var(--cream); }

/* ----------------------------------------------------------------- header */
.header {
  position: absolute; inset: 0 0 auto; z-index: 40;
  display: flex; align-items: center; gap: 26px;
  width: min(100% - 40px, var(--shell)); margin-inline: auto; padding: 22px 0;
}
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; margin-right: auto; }
.brand svg { width: 42px; height: 34px; flex: none; }
.brand-word { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.026em; color: var(--on-navy); line-height: 1; }
.brand-sub { font-family: var(--mono); font-weight: 600; font-size: 8px; letter-spacing: .3em; color: var(--on-navy-mute); margin-top: 4px; }
.header-nav { display: flex; gap: 26px; }
.header-nav a {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-navy-mute); text-decoration: none;
  transition: color .18s var(--ease);
}
.header-nav a:hover { color: var(--on-navy); }
.header-nav a[aria-current="page"] { color: var(--accent-lift); }
.header-call {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  color: var(--on-navy); text-decoration: none; white-space: nowrap;
}
.header-call:hover { color: var(--accent-lift); }

/* ------------------------------------------------------------------- hero */
.hero { position: relative; background: var(--deeper); }
.hero-track { height: 300vh; }
.hero-stage {
  position: sticky; top: 0; height: 100vh; min-height: 560px;
  overflow: hidden; display: grid;
}
.hero-art, .hero-copy { grid-area: 1 / 1; }

.hero-art { width: 100%; height: 100%; position: relative; }
/* Generated ambience behind the vector scene (see assets/img/hero/README.md:
   abstract light and haze, never a literal building, so it can never read as
   a photo of real work). It is fully static: no scroll listener touches it,
   so it never enters the per-frame opacity budget. It fades in once, on its
   own load event, at fetchpriority "low" so it can never contend with the
   headline text for bandwidth or delay the hero's real first paint. */
.hero-bg { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero-bg.is-loaded { opacity: .24; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the five stacked layers of the hero scene, each its own compositor layer */
.hero-cam { position: absolute; inset: 0; }
.hl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* keeps every word readable no matter how bright the floor gets */
.hero-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(6,13,18,.95) 0%, rgba(6,13,18,.9) 30%, rgba(6,13,18,.52) 52%,
    rgba(6,13,18,.12) 74%, rgba(6,13,18,0) 100%);
}

.hero-copy {
  position: relative; z-index: 3;
  width: min(100% - 40px, var(--shell)); margin-inline: auto;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 96px 40px;
}
.hero-kicker {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent-lift); margin-bottom: 22px;
}
.hero h1 { font-size: clamp(38px, 6.3vw, 78px); color: var(--on-navy); max-width: 16ch; }
.hero h1 em { display: block; font-style: normal; color: var(--accent-lift); }
.hero-sub {
  margin-top: 24px; max-width: 46ch; font-size: clamp(16px, 1.6vw, 19px);
  color: var(--on-navy-mute); line-height: 1.6;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero-band {
  margin-top: 44px; min-height: 26px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-navy-mute);
}
.hero-band span {
  display: block; opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hero-band span[data-on] { opacity: 1; transform: none; }
.hero-band span + span { margin-top: -30px; }

.hero-scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--on-navy-mute);
  transition: opacity .4s var(--ease);
}
.hero-scroll i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--on-navy-mute), transparent); }

/* ------------------------------------------- the four trades, in work order
   The scroll finishes the building the way the trades would actually run it.
   Every rule here is a pure function of --p, so the whole sequence stays one
   opacity per node per frame and nothing below ever touches layout.

     0.00 - 0.30   electrical   the luminaires strike, bay by bay
     0.30 - 0.55   painting     the floor lanes sweep up the slab
     0.55 - 0.78   sealing      the slab joints appear
     0.78 - 1.00   cleaning     the floor comes up clean and takes the light

   With JavaScript off, --p stays at 1 and the hero shows the finished frame
   instead of an empty black box. The head adds .js-enabled before first
   paint, which hands the scrub to main.js with no flash of the end state. */
:root { --p: 1; --pe: 1; --pp: 1; --pj: 1; --pg: 1; }
html.js-enabled { --p: 0; --pe: 0; --pp: 0; --pj: 0; --pg: 0; }

/* Industrial luminaires do not come on clean. They strike, drop out twice,
   then hold. --r is the strike ramp; --f1 and --f2 are the dropouts, each a
   triangular pulse built out of min() so the whole thing stays a single calc
   and costs nothing per frame. The cone and the pool follow their lamp. */
.bay {
  --r: clamp(0, (var(--pe) - var(--d, 0)) * 12, 1);
  --f1: clamp(0, min((var(--pe) - var(--d, 0)) * 90, (var(--d, 0) + .035 - var(--pe)) * 90), 1);
  --f2: clamp(0, min((var(--pe) - var(--d, 0) - .05) * 90, (var(--d, 0) + .085 - var(--pe)) * 90), 1);
  opacity: calc(var(--r) * (1 - .82 * var(--f1)) * (1 - .6 * var(--f2)));
}
/* Each phase owns a whole layer, so these three are pure compositor work:
   the browser fades a texture it already holds and repaints nothing. */
.hl-lanes  { opacity: clamp(0, (var(--pp) - .30) * 8, 1); }
.hl-joints { opacity: clamp(0, (var(--pj) - .55) * 6, 1); }
.hl-gloss  { opacity: clamp(0, (var(--pg) - .78) * 6, 1); }
.hl-bays, .hl-lanes, .hl-joints, .hl-gloss { will-change: opacity; }

/* a very slight push down the aisle, so the scene breathes with the scroll.
   It rides the wrapper, so it scales five cached textures instead of
   re-rasterising the artwork on every frame. */
.hero-cam {
  transform: scale(calc(1 + var(--p) * .035));
  transform-origin: 66% 50%; will-change: transform;
}

/* ---------------------------------------------------------------- reveals */
html.js-enabled [data-reveal] { opacity: 0; transform: translateY(18px); }
html.js-enabled [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}

/* --------------------------------------------------------------- sections */
.section { padding: clamp(72px, 9vw, 132px) 0; }
.section-dark { background: var(--navy); color: var(--on-navy); }
.section-cream { background: var(--cream); }

/* ------------------------------------------------------------- the offer */
.offer { background: var(--cream); padding-top: clamp(48px, 6vw, 80px); }
.offer-box {
  background: var(--navy); color: var(--on-navy);
  border-left: 6px solid var(--accent);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 56px);
}
.offer-box .label { color: var(--accent-lift); }
.offer-box h2 {
  font-size: clamp(26px, 3.6vw, 42px); color: var(--on-navy);
  margin-top: 12px; max-width: 20ch;
}
.offer-lead { margin-top: 18px; max-width: 58ch; color: var(--on-navy-mute); }
.offer-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.offer-list li {
  max-width: 62ch; padding-left: 26px; position: relative;
  color: var(--on-navy-mute); line-height: 1.55;
}
.offer-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: 10px; background: var(--accent);
}
.offer-list strong { color: var(--on-navy); font-weight: 600; }
.offer .hero-cta { margin-top: 30px; }

.section-head { max-width: 62ch; margin-bottom: clamp(38px, 5vw, 62px); }
.section-head h2 { font-size: clamp(30px, 4.4vw, 50px); margin-top: 14px; }
.section-dark .section-head h2 { color: var(--on-navy); }
.section-head p { margin-top: 18px; font-size: 18px; color: var(--ink-soft); max-width: 54ch; }
.section-dark .section-head p { color: var(--on-navy-mute); }
.section-dark .label { color: var(--accent-lift); }

/* services */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.service {
  background: var(--paper); padding: 32px 28px 30px;
  border-top: 4px solid var(--accent); box-shadow: 0 1px 0 var(--rule), 0 22px 40px -32px rgba(18,33,44,.5);
  display: flex; flex-direction: column; gap: 14px;
}
.service h3 { font-size: 23px; }
.service p { color: var(--ink-soft); font-size: 16px; }
.service ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.service li {
  position: relative; padding-left: 22px; font-size: 15px; color: var(--ink-soft);
}
.service li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 11px; height: 3px; background: var(--accent);
}
.service-n { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--ink-mute); }

.service-link {
  margin-top: auto; padding-top: 16px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
}
.service-link span { transition: transform .22s var(--ease); }
.service-link:hover span { transform: translateX(4px); }

/* four across needs a tighter card than three did */
.services-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.services-4 .service { padding: 28px 22px 26px; }
.services-4 .service h3 { font-size: 20px; }
.services-4 .service p { font-size: 15px; }
.services-4 .service li { font-size: 14.5px; }

/* ------------------------------------------------------- service pages */
.page-hero { position: relative; background: var(--deeper); overflow: hidden; }
.page-hero > .shell {
  position: relative; z-index: 3;
  padding: clamp(136px, 16vw, 200px) 0 clamp(62px, 8vw, 96px);
}
.page-hero-art { position: absolute; inset: 0; z-index: 1; }
.page-hero-art svg { width: 100%; height: 100%; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(6,13,18,.96) 0%, rgba(6,13,18,.9) 34%, rgba(6,13,18,.6) 58%,
    rgba(6,13,18,.28) 80%, rgba(6,13,18,.1) 100%);
}
.page-hero h1 {
  font-size: clamp(34px, 5.6vw, 68px); color: var(--on-navy); max-width: 15ch;
}
.page-hero h1 em { display: block; font-style: normal; color: var(--accent-lift); }

/* the drawn motifs breathe rather than animate; nothing here is a photo */
.art-lane, .art-bead, .art-run, .art-sweep { animation: art-breathe 9s var(--ease) infinite alternate; }
.art-bead { animation-duration: 11s; }
.art-run { animation-duration: 7s; }
.art-sweep { animation-duration: 13s; }
@keyframes art-breathe { from { opacity: .62; } to { opacity: 1; } }

/* ---------------------------------------------------------------- scope */
.scope { display: flex; flex-direction: column; gap: clamp(34px, 4.4vw, 54px); }
.scope-group h3 {
  font-size: 13px; font-family: var(--mono); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
  padding-bottom: 14px; border-bottom: 2px solid var(--ink); margin-bottom: 4px;
}
.scope-rows { display: flex; flex-direction: column; }
.scope-row {
  display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
  gap: 10px 34px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--rule);
}
.scope-row b { font-family: var(--display); font-size: 19px; letter-spacing: -.02em; }
.scope-row span { font-size: 16px; color: var(--ink-soft); }

/* the block that says what is deliberately not claimed */
.stance { max-width: 64ch; border-left: 4px solid var(--accent); padding-left: clamp(20px, 3vw, 34px); }
.stance h2 { font-size: clamp(26px, 3.6vw, 40px); margin: 14px 0 22px; }
.stance p { font-size: 17px; color: var(--ink-soft); }
.stance p + p { margin-top: 16px; }

.work-more { margin-top: 4px; }

/* the empty hour */
.hours { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.hours-list { display: flex; flex-direction: column; gap: 2px; }
.hours-row {
  display: flex; align-items: baseline; gap: 18px; padding: 17px 0;
  border-bottom: 1px solid rgba(243,237,224,.14);
}
.hours-row b { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--accent-lift); min-width: 76px; }
.hours-row span { font-size: 17px; color: var(--on-navy); }
.hours-note { margin-top: 26px; font-size: 15px; color: var(--on-navy-mute); max-width: 44ch; }

/* work */
.work { display: flex; flex-direction: column; gap: 22px; }
.work-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.work figure { margin: 0; background: var(--navy); overflow: hidden; display: flex; flex-direction: column; }
.work picture { display: block; overflow: hidden; }
.work img { width: 100%; height: auto; object-fit: cover; transition: transform .8s var(--ease); }
.work-wide img { aspect-ratio: 2 / 1; }
.work-pair img { aspect-ratio: 3 / 2; }
.work-grid img { aspect-ratio: 3 / 4; }
.work figure:hover img { transform: scale(1.028); }
.work figcaption { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; }
.work figcaption b {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-lift);
}
.work figcaption span { font-size: 15.5px; color: var(--on-navy-mute); line-height: 1.55; }
.work-note { padding: 26px 24px; background: var(--cream); border-left: 4px solid var(--accent); }
.work-note p + p { margin-top: 12px; font-size: 16px; color: var(--ink-soft); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; counter-reset: s; }
.step { counter-increment: s; padding-top: 26px; border-top: 2px solid var(--navy); }
.step::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--accent);
}
.step h3 { font-size: 21px; margin: 12px 0 10px; }
.step p { font-size: 16px; color: var(--ink-soft); }

/* estimate contents */
.included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 34px; }
.included li { list-style: none; display: flex; gap: 13px; align-items: flex-start; font-size: 16.5px; }
.included ul { margin: 0; padding: 0; display: contents; }
.included svg { flex: none; width: 21px; height: 21px; margin-top: 3px; color: var(--accent); }

/* faq */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative;
  font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 2px;
  background: var(--accent); transition: transform .25s var(--ease);
}
.faq summary::before {
  content: ""; position: absolute; right: 11.5px; top: 50%; width: 2px; height: 13px;
  margin-top: -5.5px; background: var(--accent); transition: opacity .25s var(--ease);
}
.faq details[open] summary::before { opacity: 0; }
.faq p { padding: 0 0 26px; color: var(--ink-soft); max-width: 66ch; }

/* form */
.quote { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(34px, 5vw, 72px); align-items: start; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-mute); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 16px; color: var(--ink);
  padding: 14px 15px; border: 1.5px solid var(--rule); border-radius: 2px; background: var(--paper);
  transition: border-color .18s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { min-height: 118px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: 16px; font-size: 14px; color: var(--ink-mute); line-height: 1.55; }
.handoff {
  margin-top: 20px; padding: 22px; background: var(--cream); border-left: 4px solid var(--accent);
}
.handoff p { font-size: 15.5px; color: var(--ink-soft); }
.handoff .btn { margin-top: 16px; }
.handoff[hidden] { display: none; }

/* footer */
.footer { background: var(--deep); color: var(--on-navy-mute); padding: 66px 0 90px; font-size: 15px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: flex-start; }
.footer a { color: var(--on-navy); text-decoration: none; }
.footer a:hover { color: var(--accent-lift); }
.footer-bottom {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(243,237,224,.12);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
}

/* sticky mobile bar */
.bar {
  position: fixed; inset: auto 0 0; z-index: 50; display: none;
  background: var(--navy); box-shadow: 0 -8px 26px rgba(6,13,18,.4);
}
.bar a { flex: 1; min-height: 60px; border-radius: 0; padding: 0 12px; font-size: 14.5px; white-space: nowrap; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .services-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 980px) {
  .services, .steps { grid-template-columns: 1fr; }
  .scope-row { grid-template-columns: 1fr; gap: 6px; }
  .work-pair { grid-template-columns: 1fr; }
  .hours, .quote { grid-template-columns: 1fr; }
  /* four service pages need to stay reachable here, so the nav wraps to its
     own scrollable row under the logo instead of disappearing */
  .header { flex-wrap: wrap; gap: 12px 18px; }
  .header-nav {
    order: 3; width: 100%; gap: 20px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .header-nav::-webkit-scrollbar { display: none; }
  .header-nav a { white-space: nowrap; font-size: 11px; }
}
/* phones: the banner photos switch to their own 4:3 crop, and the bare-wall
   set becomes one swipeable row instead of six full-width stacked frames */
@media (max-width: 720px) {
  .work-wide img { aspect-ratio: 4 / 3; }
}
@media (max-width: 662px) {
  .work-grid {
    display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; padding-bottom: 8px;
  }
  .work-grid figure { flex: 0 0 76%; scroll-snap-align: start; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .services-4 { grid-template-columns: 1fr; }
  .hero-track { height: 240vh; }
  .included, .field-row { grid-template-columns: 1fr; }
  .bar { display: flex; }
  /* on a narrow screen the scrim runs top to bottom, so the lanes still show */
  .hero-stage::after {
    background: linear-gradient(180deg, rgba(6,13,18,.95) 0%, rgba(6,13,18,.89) 46%,
      rgba(6,13,18,.5) 74%, rgba(6,13,18,.18) 100%);
  }
  .footer { padding-bottom: 104px; }
  .header-call { display: none; }
  .hero-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html.js-enabled [data-reveal] { opacity: 1; transform: none; }
  .hero-track { height: 100vh; }
  .bay, .hl-lanes, .hl-joints, .hl-gloss { opacity: 1; }
  .hero-cam { transform: none; }
  .hero-band span { opacity: 1; transform: none; }
  .hero-band span + span { margin-top: 6px; }
}