/* ============================================================
   McMan Auto Service — "Work Order"
   Palette: Hopkins Avenue — sealed shop-floor concrete + the
   client's own sampled logo navy + instrument-panel accents.

   CONTRAST TABLE (measured — obey it):
   token                 on --floor     verdict
   --navy    #003663      8.83:1        any text
   --navy-deep #00243F   11.38:1        any text
   --steel   #6B7F96      2.96:1        SURFACE ONLY — never text
   --red     #C13037      ~4.0:1        fills + large display only
   --red-ink #B3122B      4.96:1        small text OK
   --amber   #F2A900      1.44:1        FILLS ONLY — never text
   ============================================================ */

:root{
  --floor:      #DEDAD3;
  --floor-2:    #CFCAC1;
  --paper:      #F4F2EE;
  --navy:       #003663;
  --navy-deep:  #00243F;
  --steel:      #6B7F96;
  --red:        #C13037;
  --red-ink:    #B3122B;
  --amber:      #F2A900;

  --line: rgba(0,54,99,.16);
  --line-soft: rgba(0,54,99,.09);
  --shadow: 0 22px 48px -22px rgba(0,36,63,.32);
  --shadow-sm: 0 10px 24px -14px rgba(0,36,63,.28);

  --display: 'Archivo', system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: 'Martian Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease-mech: cubic-bezier(.24,.86,.4,.98);
  --wrap: 1240px;
  --header-h: 68px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--display);
  font-optical-sizing:auto;
  color:var(--navy-deep);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{margin:0;line-height:1.06;font-family:var(--display)}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4.2vw,48px)}
.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}
.skip{position:absolute;left:-999px;top:0;background:var(--navy-deep);color:var(--paper);padding:.8rem 1.1rem;z-index:400;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--navy);outline-offset:3px;border-radius:3px}
section[id],#top{scroll-margin-top:calc(var(--header-h) + 14px)}

/* ============================ TYPE HELPERS ============================ */
/* display:flex (block-level), not inline-flex — the eyebrow must sit on its own line above
   the H2. .rule-draw below puts the following H2 at display:inline-block for its shrink-wrap
   underline, and an inline-level H2 flows onto the SAME line as a preceding inline-level
   eyebrow; a block-level eyebrow forces the break regardless of the H2's own display. */
.eyebrow{
  font-family:var(--mono);font-weight:600;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);display:flex;align-items:center;gap:.6rem;
  margin-bottom:.6rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--red-ink);display:inline-block;flex-shrink:0}
.sect-title{
  font-weight:800;color:var(--navy-deep);font-size:clamp(1.7rem,3.6vw,2.5rem);
  margin:0 0 .35rem;letter-spacing:-.005em;
  font-stretch:112%;
}
.sect-lead{color:var(--navy);opacity:.82;max-width:60ch;font-size:1.02rem}
.section{padding:clamp(56px,7.5vw,96px) 0}
.section-head{margin-bottom:clamp(28px,4vw,46px)}

/* rule-draw underline used under a few headings for the "rules draw" motion cue.
   Scoped to the H2 element itself only — display:inline-block makes its box (and thus the
   ::after underline, sized via left:0;right:0 against THIS box) shrink-wrap to the
   heading's own text width rather than stretching full-width. */
.rule-draw{position:relative;display:inline-block}
.rule-draw::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--red-ink);
  transform-origin:left center;transform:scaleX(0);
}
.rule-draw.in::after{transform:scaleX(1);transition:transform .65s var(--ease-mech)}

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--mono);font-weight:600;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
  padding:.95rem 1.5rem;border-radius:3px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .18s var(--ease-mech),background-color .18s,color .18s,border-color .18s,box-shadow .18s;
  white-space:nowrap;
}
.btn-navy{background:var(--navy);color:var(--paper);box-shadow:var(--shadow-sm)}
.btn-navy:hover{background:var(--navy-deep)}
.btn-red{background:var(--red-ink);color:var(--paper)}
.btn-red:hover{background:#8f0e21}
.btn-ghost{background:transparent;color:var(--navy-deep);border-color:var(--navy)}
.btn-ghost:hover{background:rgba(0,54,99,.08)}
.btn-ghost-light{background:transparent;color:var(--paper);border-color:rgba(244,242,238,.55)}
.btn-ghost-light:hover{background:rgba(244,242,238,.12);border-color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn-block{width:100%}

/* ============================ HEADER ============================ */
.site-header{
  position:sticky;top:0;z-index:100;height:var(--header-h);
  background:var(--paper);border-bottom:1px solid var(--line);
}
.header-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-.01em;color:var(--navy-deep);font-stretch:110%}
.brand-mark{width:52px;height:26px;flex-shrink:0}
.brand-mark svg{width:100%;height:100%;display:block}
.brand small{display:block;font-family:var(--mono);font-weight:500;font-size:.6rem;letter-spacing:.08em;color:var(--navy);text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:1.6rem}
.nav-links a:not(.btn){font-weight:600;font-size:.9rem;color:var(--navy);position:relative;padding:.25rem 0}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--red-ink);transition:right .22s var(--ease-mech)}
.nav-links a:not(.btn):hover::after{right:0}
.nav-phone{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-weight:700;font-size:.92rem;color:var(--navy-deep)}
.nav-phone svg{width:15px;height:15px;color:var(--red-ink)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--navy-deep)}
.nav-toggle svg{width:24px;height:24px}
.mobile-cta{display:none}
.btn-compact{padding:.6rem .9rem;font-size:.72rem}

/* ============================ HERO ============================ */
.hero{
  position:relative;display:flex;flex-direction:column;
  /* Sized to its content, NOT the viewport (10/27/26): filling 100svh made the hero
     look like the whole site. The marquee + next section now show below the fold line. */
  height:auto;min-height:0;
  background:var(--floor);
  overflow:visible;
}
.hero-masthead{
  flex:0 0 auto;border-top:1px solid var(--navy);border-bottom:1px solid var(--navy);
  background:var(--floor-2);
}
.hero-masthead .wrap{
  display:flex;align-items:center;justify-content:center;gap:.6em;flex-wrap:wrap;
  padding-block:.5rem;font-family:var(--mono);font-size:.68rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--navy);text-align:center;
}
.hero-masthead .dim{opacity:.55}
.hero-body{flex:1 1 auto;position:relative;min-height:0}
.hero-grid{
  height:100%;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(12px,3vw,36px);
  align-items:stretch;
}
/* Top-anchored with a modest fixed offset — NOT bottom-anchored. "Sitting low" is relative
   to the ticket (col-right starts higher), not a mandate to float in the lower half of an
   empty column: bottom-anchoring here left ~290px of dead air above the H1 and pushed the
   gauges down far enough to collide with the marquee's raised top edge below. */
.hero-col-left{display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(56px,8vh,88px);padding-bottom:48px;min-width:0}
.hero-col-right{display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(32px,5vh,56px);padding-bottom:48px;min-width:0}

.hero-copy{max-width:46ch}
/* The H1 is the small keyword eyebrow ("Auto Repair in Titusville, FL", 10/27/26 SEO);
   the big promise line is a styled <p>. Keep the keyword in the H1 — it's the ranking signal. */
.hero-headline{
  margin:0;line-height:1.06;font-family:var(--display);
  font-size:clamp(1.9rem,3.55vw,2.85rem);font-weight:800;font-stretch:118%;color:var(--navy-deep);
  letter-spacing:-.01em;
}
.hero-headline .accent{color:var(--red-ink)}
.hero-sub{margin-top:.85rem;font-size:1.02rem;color:var(--navy);max-width:38ch}

.hero-phone-row{position:relative;margin-top:1.5rem;display:inline-block}
.hero-phone{
  font-family:var(--display);font-weight:800;font-stretch:118%;
  font-size:clamp(1.7rem,3.4vw,2.55rem);color:var(--navy-deep);letter-spacing:-.01em;
  display:inline-block;line-height:1;
}
.hero-phone:hover{color:var(--red-ink)}
.hero-stamp{
  position:absolute;right:-14px;top:calc(100% + 4px);bottom:auto;transform:rotate(-6deg);
  font-family:var(--mono);font-weight:700;font-size:.62rem;letter-spacing:.06em;
  color:var(--red-ink);border:2px solid var(--red-ink);border-radius:4px;
  padding:.3rem .55rem;background:rgba(196,48,55,.06);text-transform:uppercase;
  white-space:nowrap;pointer-events:none;
}

.hero-gauges{display:flex;gap:clamp(14px,2.4vw,28px);margin-top:1.9rem;margin-bottom:8px}

/* ---- gauge component, shared by hero x2 / estimate dial / tachometer ---- */
.gauge-widget{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.gauge-widget svg{display:block}
.gauge-arc-bg{fill:none;stroke:var(--steel);stroke-opacity:.4;stroke-width:7;stroke-linecap:round}
.gauge-arc-zone{fill:none;stroke:var(--red);stroke-opacity:.55;stroke-width:7;stroke-linecap:round}
.gauge-tick{stroke:var(--navy);stroke-width:2;stroke-linecap:round}
.gauge-tick-label{font-family:var(--mono);font-weight:600;fill:var(--navy);font-size:9px}
.gauge-needle{stroke:var(--red-ink);stroke-width:4;stroke-linecap:round}
.gauge-hub{fill:var(--navy-deep)}
.gauge-value{font-family:var(--display);font-weight:800;font-stretch:112%;color:var(--navy-deep);line-height:1}
.gauge-cap{font-family:var(--mono);font-weight:600;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);text-align:center}
.hero-gauges .gauge-widget svg{width:88px;height:64px}
.hero-gauges .gauge-value{font-size:1.5rem}

/* ---- work order card ---- */
.work-order-card{
  position:relative;width:100%;max-width:380px;background:var(--paper);
  border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow);
  transform:rotate(-1.25deg);padding:26px 24px 22px;
}
.work-order-card::before{
  content:"";position:absolute;top:-1px;left:12px;right:12px;height:10px;
  background-image:repeating-radial-gradient(circle at 8px 5px, transparent 0 3px, var(--floor) 3px 4px);
  background-size:16px 10px;background-repeat:repeat-x;
}
.wo-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.wo-head .wo-title{font-family:var(--mono);font-weight:700;font-size:.82rem;letter-spacing:.08em;color:var(--navy-deep);text-transform:uppercase}
.wo-head .wo-no{font-family:var(--mono);font-size:.66rem;color:var(--navy)}
.wo-rule{border:0;border-top:1px solid var(--line);margin:0 0 16px}

.wo-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.wo-field{display:flex;flex-direction:column;gap:4px}
.wo-field.full{grid-column:1 / -1}
.wo-field label{font-family:var(--mono);font-weight:600;font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--navy)}
.wo-field input,.wo-field select,.wo-field textarea{
  font:inherit;font-size:.92rem;font-family:var(--display);color:var(--navy-deep);
  background:transparent;border:0;border-bottom:1.5px solid var(--line);padding:5px 2px;
  border-radius:0;resize:none;width:100%;
}
.wo-field textarea{min-height:44px;line-height:1.35}
.wo-field input:hover,.wo-field select:hover,.wo-field textarea:hover{border-bottom-color:var(--steel)}
.wo-field input:focus,.wo-field select:focus,.wo-field textarea:focus{outline:none;border-bottom-color:var(--red-ink)}
.wo-field input:user-invalid,.wo-field textarea:user-invalid{border-bottom-color:var(--red-ink)}
.wo-field.full textarea{margin-bottom:2px}

.wo-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.wo-submit-note{margin-top:.6rem;font-size:.76rem;color:var(--navy);opacity:.78;text-align:center}
.wo-status{margin:.5rem 0 0;font-size:.78rem;font-weight:600;text-align:center}
.wo-status:empty{display:none}
.wo-status.err{color:var(--red-ink)}
.wo-status.ok{color:#1F6B3D}
.wo-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding:.6rem 0 .2rem}
.wo-done svg{width:38px;height:38px;color:var(--red-ink)}
.wo-done h3{font-family:var(--mono);font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:var(--navy-deep)}
.wo-done h3:focus{outline:none}
.wo-done p{margin:0;color:var(--navy);font-size:.86rem}

/* ============================ MARQUEE ============================ */
/* The card (right column) is the intended "overlaps the seam below" element (§4) — the
   marquee slides up under the CARD via this negative margin while sitting on top via
   z-index, so the card visually bridges hero -> marquee without the card's own bottom
   (and the submit button inside it) ever leaving the viewport. Kept intentionally modest
   so it doesn't reach up into the left column's gauges too — see .hero-gauges margin-bottom. */
.marquee{
  background:var(--paper);border-top:1px solid var(--navy);border-bottom:1px solid var(--navy);
  overflow:hidden;padding:.85rem 0;position:relative;z-index:5;margin-top:-18px;
}
.marquee-track{
  display:inline-flex;white-space:nowrap;font-family:var(--mono);font-weight:600;font-size:.86rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--navy);
  animation:march var(--march-dur,28s) linear infinite;animation-play-state:paused;will-change:transform;
}
.marquee-track.is-ready{animation-play-state:running}
.marquee-track span{opacity:.92}
.marquee-track span::after{content:"\2014";margin-inline:1.6rem;color:var(--red-ink)}
@keyframes march{to{transform:translateX(-50%)}}

/* ============================ SERVICES ============================ */
.services{background:var(--paper)}
/* Six tracks, each card spanning two, so the five clusters still read as a 3-up
   row while the orphan pair on row 2 can be nudged in by one track and sit centred
   under it. A plain repeat(3,1fr) leaves 04 and 05 hard left with a hole on the
   right. Spans are re-based at each breakpoint below — see the 1080/700 blocks. */
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem;margin-top:2rem}
.svc-grid>.svc-cluster{grid-column:span 2}
.svc-grid>.svc-cluster:nth-child(4){grid-column:2 / span 2}
/* Column flex so the deep-link button can be pushed to the floor of the card with
   margin-top:auto — the five cards are stretched to a common row height by the grid,
   so without it the buttons would sit at five different heights. */
.svc-cluster{
  background:var(--floor);border:1px solid var(--line);border-radius:2px;padding:1.4rem 1.4rem 1.5rem;
  border-top:3px solid var(--navy);
  display:flex;flex-direction:column;
}
.svc-cluster-head{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.9rem}
.svc-cluster-no{font-family:var(--mono);font-weight:700;font-size:.78rem;color:var(--red-ink)}
.svc-cluster h3{font-size:1.08rem;font-weight:800;color:var(--navy-deep);font-stretch:108%}
.svc-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.svc-list li{display:flex;gap:.65rem;font-size:.9rem;color:var(--navy-deep);line-height:1.4}
.svc-list .svc-n{font-family:var(--mono);font-weight:600;font-size:.74rem;color:var(--navy);flex-shrink:0;padding-top:.15em}
/* The per-system deep link. The row is what carries margin-top:auto, not the button —
   auto on the button itself would push it down but leave no guaranteed gap above it
   when a card's list is long enough to fill the box. */
.svc-go-row{margin-top:auto;padding-top:1.3rem;display:flex;justify-content:flex-end}
.svc-go{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-weight:700;font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--navy-deep);background:var(--paper);
  border:1.5px solid var(--navy);border-radius:3px;padding:.5rem .7rem;
  transition:background-color .18s var(--ease-mech),color .18s var(--ease-mech),border-color .18s var(--ease-mech);
}
.svc-go svg{width:12px;height:12px;transition:transform .18s var(--ease-mech)}
.svc-go:hover{background:var(--navy);color:var(--paper);border-color:var(--navy-deep)}
.svc-go:hover svg{transform:translateX(2px)}

.svc-cta{margin-top:2.4rem}


/* ============================ CTA STRIP (repeated cadence) ============================ */
.cta-strip{background:var(--navy);color:var(--paper)}
.cta-strip-in{
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
  padding-block:clamp(26px,4vw,38px);
}
.cta-strip-copy{max-width:46ch}
.cta-strip-copy .cs-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#AFC3D6}
.cta-strip-copy h3{font-size:clamp(1.15rem,2.4vw,1.55rem);font-weight:800;font-stretch:110%;margin-top:.3rem}
.cta-strip-proof{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;font-family:var(--mono);font-size:.82rem;color:#D7E2EC}
.cta-strip-proof svg{width:14px;height:14px;color:var(--amber)}
.cta-strip-actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.cta-phone{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.3rem;color:#fff}
.cta-phone svg{width:18px;height:18px;color:var(--amber)}

/* ============================ WHY US + ESTIMATE ============================ */
.why-estimate{background:var(--paper-tint,var(--floor))}
.why-intro{max-width:70ch;margin-bottom:2.2rem}
/* Owner portrait beside the promises. The copy column keeps the 70ch measure it
   had when .why-intro was a single block; the portrait is capped in absolute px
   because it is 2:3 and a percentage column lets it tower over the five promise
   rows the moment they stack at 1080px. Real client photo, not stock. */
.why-intro{display:grid;grid-template-columns:minmax(0,70ch) auto;gap:clamp(1.5rem,3.2vw,3rem);align-items:start;max-width:none}
.why-portrait{margin:0;width:clamp(210px,23vw,290px);justify-self:end}
.why-portrait img{width:100%;height:auto;border:1px solid var(--line);border-radius:2px;background:var(--floor-2);box-shadow:var(--shadow-sm)}
.why-portrait figcaption{display:flex;align-items:baseline;gap:.5rem;margin-top:.75rem;font-family:var(--mono);font-weight:600;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);opacity:.8}
.why-portrait figcaption b{font-size:.74rem;letter-spacing:.05em;color:var(--red-ink);font-weight:700}
.why-promises{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem 1.6rem;margin-top:1.4rem}
.why-promise{display:flex;gap:.6rem;font-size:.94rem;color:var(--navy-deep)}
.why-promise svg{width:16px;height:16px;color:var(--red-ink);flex-shrink:0;margin-top:.2em}

.estimate-pin{position:relative;margin-top:clamp(34px,5vw,54px)}
.estimate-stage{
  min-height:520px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);
  align-items:center;background:var(--navy);color:var(--paper);border-radius:4px;
  padding:clamp(28px,4vw,52px);
}
.estimate-dial-col{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem}
.estimate-dial-col .gauge-widget svg{width:220px;height:160px}
.estimate-dial-col .gauge-arc-bg{stroke:rgba(244,242,238,.28)}
.estimate-dial-col .gauge-tick{stroke:rgba(244,242,238,.7)}
.estimate-dial-col .gauge-tick-label{fill:rgba(244,242,238,.7)}
/* Was a 00:00->00:30 clock. The shop does not promise a diagnosis time, so the
   readout names the stage the work order is at instead. Sized for the longest
   word it can hold ("Diagnose", 8 chars) inside the 220px dial column. */
.estimate-status{font-family:var(--mono);font-weight:700;font-size:clamp(1.15rem,2vw,1.6rem);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.estimate-status-cap{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#AFC3D6}
.estimate-step-cap{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:#AFC3D6;min-height:1.4em}

.estimate-ticket{
  background:var(--paper);color:var(--navy-deep);border-radius:2px;box-shadow:var(--shadow);
  padding:22px 24px 20px;max-width:440px;margin-inline:auto;width:100%;
}
.et-head{font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;margin-bottom:6px}
.et-rule{border:0;border-top:1px solid var(--line);margin:0 0 14px}
.et-line{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:12px;opacity:0;transform:translateY(6px) scale(.98)}
.et-line .et-n{font-family:var(--mono);font-weight:700;font-size:.76rem;color:var(--red-ink);flex-shrink:0;padding-top:.1em}
.et-line .et-t{font-size:.92rem;line-height:1.4}
.et-total{display:flex;align-items:baseline;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1.5px dashed var(--line)}
.et-total .et-tl{font-family:var(--mono);font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.et-total .et-tv{font-family:var(--mono);font-weight:700;font-size:1.05rem;color:var(--red-ink)}

/* static (mobile / reduced-motion) fallback stack */
.estimate-static{display:none}
.estimate-static .es-step{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;padding:1.1rem 0;
  border-bottom:1px solid var(--line);
}
.estimate-static .es-step:last-of-type{border-bottom:0}
.estimate-static .es-num{
  width:40px;height:40px;border-radius:50%;border:2px solid var(--navy);display:grid;place-items:center;
  font-family:var(--mono);font-weight:700;color:var(--navy);flex-shrink:0;
}
.estimate-static .es-body h3{font-size:1.02rem;font-weight:800;color:var(--navy-deep);margin-bottom:.25rem}
.estimate-static .es-body p{font-size:.92rem;color:var(--navy)}

/* ============================ GALLERY ============================ */
.gallery{background:var(--paper)}
/* The rail. Slides are sized by HEIGHT and take their own natural width, which is
   the whole point: the five photos run 5:3, 4:3, 5:4 and 2:3, and any fixed
   slide aspect would have to crop the two portraits hard. Never put a width on .gal-slide
   or on its img — that is what reintroduces the cropping. */
.gal-rail-wrap{margin-top:2rem}
.gal-rail{
  display:flex;gap:.9rem;overflow-x:auto;overscroll-behavior-x:contain;
  /* proximity, NOT mandatory: mandatory snap fights a programmatic scrollTo and can
     snap the rail straight back, which reads as "the buttons don't work" — worst in
     WebKit, and Safari is the review browser here. */
  scroll-snap-type:x proximity;
  padding-bottom:.35rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.gal-rail::-webkit-scrollbar{display:none}
.gal-rail:focus-visible{outline:2px solid var(--red-ink);outline-offset:4px}
.gal-slide{
  flex:0 0 auto;scroll-snap-align:start;position:relative;margin:0;
  height:clamp(260px,38vw,440px);
  background:var(--floor-2);border:1px solid var(--line);border-radius:2px;overflow:hidden;
}
.gal-slide img{height:100%;width:auto;display:block;max-width:none}
/* Counter only — the prev/next buttons were removed 2026-09-25; the rail rotates
   on its own and still takes native drag/swipe/trackpad, plus arrow keys when the
   rail itself has focus. */
.gal-controls{display:flex;align-items:center;gap:1rem;margin-top:1.1rem}
.gal-count{font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.09em;color:var(--navy-deep)}
.gal-count .gal-slash{color:var(--red-ink);margin:0 .15em}

/* ============================ REVIEWS ============================ */
.reviews{background:var(--floor)}
.reviews-top{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.rating-badge{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);
  background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:.55rem .9rem;
}
.rating-badge strong{font-size:1.15rem;color:var(--navy-deep)}
.rating-badge .of5{font-size:.78rem;color:var(--navy);margin-left:-.3rem}
/* Honest partial fill for the AGGREGATE 4.4 rating — an unfilled background row plus a
   width-clipped foreground row at --pct (4.4/5 = 88%). Five solid stars next to "4.4" reads
   as a 5.0. The three per-review ★★★★★ rows elsewhere are correct as solid fills: those
   reviews genuinely are 5/5 each. */
.star-rating{position:relative;display:inline-block;line-height:1;letter-spacing:.05em}
.star-rating-bg{color:rgba(0,54,99,.22)}
.star-rating-fill{position:absolute;left:0;top:0;width:var(--pct);overflow:hidden;white-space:nowrap;color:var(--red-ink)}
.rating-badge span.src{color:var(--navy);font-size:.72rem}
/* Outbound to the Google Business Profile. Sits next to the aggregate badge because
   that is where a reader goes looking to check the 4.4 for themselves. */
.rev-gbp{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-weight:600;
  font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--navy-deep);
  border-bottom:2px solid rgba(0,54,99,.28);padding-bottom:.25rem;transition:border-color .22s var(--ease-mech),color .22s var(--ease-mech);
}
.rev-gbp:hover{color:var(--red-ink);border-bottom-color:var(--red-ink)}
.rev-gbp svg{width:14px;height:14px;flex:0 0 auto}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.6rem}
.rev-card{background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.9rem}
.rev-stars{color:var(--red-ink);font-size:.85rem;letter-spacing:.06em}
.rev-quote{font-size:.94rem;line-height:1.55;color:var(--navy-deep)}
.rev-attr{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);margin-top:auto}
.rev-extra{margin-top:1.2rem;padding-top:1.1rem;border-top:1px dashed var(--line);font-size:.92rem;color:var(--navy-deep);font-style:italic}
.rev-extra cite{display:block;margin-top:.4rem;font-style:normal;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;color:var(--navy)}

/* ============================ FAQ ============================ */
.faq{background:var(--paper)}
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,56px);align-items:start}
.qa-list{display:grid;gap:.75rem}
.qa{background:var(--floor);border:1px solid var(--line);border-radius:2px}
.qa[open]{border-color:var(--navy)}
.qa summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;padding:1.05rem 1.2rem;
  font-family:var(--mono);font-weight:700;font-size:.88rem;color:var(--navy-deep);
}
.qa summary::-webkit-details-marker{display:none}
.qa-mark{margin-left:auto;flex-shrink:0;width:26px;height:26px;display:grid;place-items:center;color:var(--red-ink)}
.qa-mark svg{width:14px;height:14px;transition:transform .22s var(--ease-mech)}
.qa[open] .qa-mark svg{transform:rotate(135deg)}
.qa-body{margin:0;padding:0 1.2rem 1.15rem;color:var(--navy);font-size:.92rem;line-height:1.5}

/* ============================ FINAL CTA ============================ */
.final-cta{background:var(--navy-deep);color:var(--paper)}
.final-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,60px);align-items:start}
.final-copy .eyebrow{color:#AFC3D6}
.final-copy .eyebrow::before{background:var(--amber)}
.final-copy .sect-title{color:#fff}
.final-phone{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:800;font-stretch:116%;font-size:clamp(1.7rem,3vw,2.3rem);color:#fff;margin-top:1rem}
.final-phone svg{width:20px;height:20px;color:var(--amber)}
.final-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.hours-card{background:rgba(244,242,238,.06);border:1px solid rgba(244,242,238,.18);border-radius:3px;padding:1.4rem 1.5rem}
/* The repeated Work Order at the foot of the page. The card keeps its paper stock —
   a solid ticket on the navy ground is the point — but loses the hero's rotation and
   380px cap (set inline on the element) since it sits in a column. */
.final-side{display:flex;flex-direction:column}
.footer-wo{margin-top:1.5rem}
.footer-wo-lead{font-size:.88rem;line-height:1.5;color:#AFC3D6;margin-bottom:.9rem}
/* The perforation strip punches through to whatever the card sits on — navy here, not
   the hero's --floor. ⚠️ Plain radial-gradient, NOT repeating-: repeating- carries on
   past the first stop and tiles concentric rings, which renders as a row of little
   "o"s rather than punched holes. One disc per 16px tile is the whole effect. */
.footer-wo .work-order-card::before{
  background-image:radial-gradient(circle at 8px 5px, var(--navy-deep) 0 3px, transparent 3.5px);
}
.hours-title{font-family:var(--mono);font-weight:700;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:#AFC3D6;margin-bottom:.9rem}
.hours-row{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid rgba(244,242,238,.1);font-size:.92rem}
.hours-row:last-child{border-bottom:0}
.hours-row .closed{color:#9DB0C4}
.nap-block{margin-top:1.3rem;font-size:.92rem;color:#D7E2EC;line-height:1.6}
.nap-block a{text-decoration:underline;text-underline-offset:3px}

.territory{margin-top:1.6rem;display:flex;gap:1.5rem;align-items:flex-start}
.territory-map{flex:0 0 168px;max-width:168px}
.territory-map svg{width:100%;height:auto;display:block}
.terr-county{fill:rgba(244,242,238,.10);stroke:rgba(244,242,238,.45);stroke-width:.9;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.terr-dots circle{fill:rgba(244,242,238,.55)}
.terr-pin path{fill:var(--amber)}
.terr-pin circle{fill:var(--navy-deep)}
.territory-body{flex:1 1 auto;min-width:0}
.territory-cap{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#AFC3D6}
.territory-legend{display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.78rem;color:#AFC3D6}
.territory-legend .tl-pin{width:9px;height:9px;border-radius:50%;background:var(--amber);flex:0 0 auto}
.territory-cities{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.territory-cities span{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;background:rgba(244,242,238,.08);border:1px solid rgba(244,242,238,.2);border-radius:999px;padding:.35rem .7rem;color:#D7E2EC}

/* ============================ FOOTER ============================ */
.site-footer{background:#001C30;color:#9FB2C6;padding:2.6rem 0 2.2rem}
.footer-top{display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;align-items:center}
.footer-brand{display:inline-flex;align-items:center;gap:.55rem;color:#fff;font-weight:800;font-family:var(--display);font-stretch:110%}
.footer-brand .brand-mark{width:44px;height:22px}
.footer-links{display:flex;gap:1.3rem;flex-wrap:wrap}
.footer-links a{font-size:.88rem;font-weight:600;color:#9FB2C6}
.footer-links a:hover{color:#fff}
.footer-legal{
  margin-top:1.5rem;border-top:1px solid rgba(159,178,198,.16);padding-top:1.3rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;
}
.footer-disclaimer{margin-top:.9rem;font-size:.74rem;color:#7B8CA0;max-width:74ch}

.fpm-credit{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none}
.fpm-credit__label{font-size:.78rem;color:#9FB2C6;opacity:.72;transition:opacity .18s var(--ease-mech),color .18s var(--ease-mech)}
.fpm-credit__mark{
  display:block;width:183px;height:36px;background-color:#9FB2C6;
  -webkit-mask-image:url(../assets/img/fpm-credit-lockup-v1.png);mask-image:url(../assets/img/fpm-credit-lockup-v1.png);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  opacity:.72;transition:opacity .18s var(--ease-mech),background-color .18s var(--ease-mech);
}
.fpm-credit:hover .fpm-credit__mark,.fpm-credit:focus-visible .fpm-credit__mark{opacity:1;background-color:var(--amber)}
.fpm-credit:hover .fpm-credit__label,.fpm-credit:focus-visible .fpm-credit__label{opacity:1;color:#fff}
@media (max-width:700px){.fpm-credit__mark{width:152px;height:30px}.fpm-credit__label{font-size:.74rem}}

/* ============================ STICKY MOBILE CALL BAR ============================ */
.call-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;display:none;
  background:var(--navy-deep);color:#fff;padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
  box-shadow:0 -8px 22px -10px rgba(0,0,0,.35);
  transform:translateY(100%);transition:transform .32s var(--ease-mech);
}
.call-bar.is-visible{transform:translateY(0)}
.call-bar-in{display:flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--mono);font-weight:700;font-size:.95rem;letter-spacing:.02em}
.call-bar-in svg{width:17px;height:17px;color:var(--amber)}

/* ============================ TACHOMETER (secondary moment) ============================ */
.tach{
  position:fixed;left:20px;bottom:20px;z-index:60;display:none;
  background:rgba(244,242,238,.92);border:1px solid var(--line);border-radius:4px;
  padding:8px 10px 6px;box-shadow:var(--shadow-sm);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease-mech);
}
/* Hidden until the hero has scrolled past — at the top of the page this fixed
   corner position sits exactly where the trust marquee runs, and a static
   widget parked there from first paint covered part of the ticker text. */
.tach.is-visible{opacity:1;pointer-events:auto}
.tach .gauge-widget svg{width:60px;height:44px}
.tach .gauge-cap{font-size:.52rem}
@media (min-width:1024px){.tach{display:block}}

/* ============================ REVEAL ============================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-mech),transform .6s var(--ease-mech)}
.reveal.in{opacity:1;transform:none}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1080px){
  /* 2-up: four tracks, cards span two, and the lone 05 centres instead of the pair. */
  .svc-grid{grid-template-columns:repeat(4,1fr)}
  .svc-grid>.svc-cluster:nth-child(4){grid-column:span 2}
  .svc-grid>.svc-cluster:nth-child(5){grid-column:2 / span 2}
  .why-promises{grid-template-columns:1fr}
  .rev-grid{grid-template-columns:1fr}
}
@media (max-width:960px){
  .nav-links{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:var(--paper);
    flex-direction:column;align-items:flex-start;padding:1.6rem clamp(20px,6vw,40px);gap:1.3rem;
    transform:translateX(100%);transition:transform .28s var(--ease-mech);overflow-y:auto;}
  .nav-links.open{transform:translateX(0)}
  .nav-links a:not(.btn){font-size:1.05rem}
  .nav-toggle{display:inline-flex}
  .nav-phone{display:none}
  /* The full nav-links row (with its own CTA button) goes off-canvas below — this compact
     CTA is what's left standing in the header row itself, so it needs to be pushed to the
     right edge (auto margin wins over justify-content) and sit snug against the hamburger. */
  .mobile-cta{display:inline-flex;margin-left:auto}

  .hero{height:auto;min-height:0}
  .hero-grid{grid-template-columns:1fr;height:auto}
  .hero-col-left{justify-content:flex-start;padding-block:24px 8px}
  .hero-col-right{padding-top:20px;padding-bottom:32px}
  .work-order-card{max-width:460px;margin-inline:auto;transform:rotate(-.6deg)}
  .marquee{margin-top:0}

  .estimate-stage{grid-template-columns:1fr}
  .final-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .faq-grid{grid-template-columns:1fr}
  .why-intro{grid-template-columns:1fr}
  .why-portrait{justify-self:start;width:clamp(170px,46vw,220px)}
}
@media (max-width:700px){
  /* 1-up: back to plain stacking, no centring left to do. */
  .svc-grid{grid-template-columns:1fr}
  .svc-grid>.svc-cluster,
  .svc-grid>.svc-cluster:nth-child(4),
  .svc-grid>.svc-cluster:nth-child(5){grid-column:auto}
  .wo-row{grid-template-columns:1fr}
  .call-bar{display:block}
  .cta-strip-in{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  /* Dropped entirely rather than just reduced — any rotation on a card already at ~100% of
     a narrow column's width costs bounding-box width, and the QA gate is zero horizontal
     scroll at 320px, not "small overflow is fine." */
  .work-order-card{transform:none}
}
@media (max-width:480px){
  .hero-masthead .wrap{font-size:.62rem;gap:.45em;letter-spacing:.07em}
}
@media (max-width:520px){
  .territory{gap:1.1rem}
  .territory-map{flex-basis:124px;max-width:124px}
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  .rule-draw::after{transform:scaleX(1);transition:none}
  .call-bar{transition:none}
  .tach{display:none!important}
  .et-line{opacity:1;transform:none}
}

/* ============================================================
   SERVICES PAGE (/services)
   Interior page, same "Work Order" system as index.html — it
   reuses .wrap / .section / .eyebrow / .sect-title / .btn /
   .cta-strip / .qa / .final-cta wholesale. Only the devices
   that don't exist on the homepage are defined here:
   the breadcrumb, the spec plate, the sticky SYSTEM INDEX rail
   with its carriage arrow, the operation rows, and the parts
   band. Nothing below overrides a homepage rule.
   ============================================================ */

/* ---- breadcrumb ---- */
.crumbs{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);opacity:.8;margin-bottom:1rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.crumbs a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s var(--ease-mech)}
.crumbs a:hover{border-bottom-color:var(--red-ink)}
.crumbs .sep{color:var(--red-ink)}
.crumbs [aria-current]{opacity:.62}

/* ---- page intro (interior-page opener; deliberately NOT the homepage hero) ---- */
.page-intro{background:var(--floor);padding:clamp(34px,5vw,58px) 0 clamp(40px,5.5vw,64px)}
.page-intro-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,4vw,56px);align-items:start}
.page-intro h1{
  font-size:clamp(1.85rem,3.5vw,2.75rem);font-weight:800;font-stretch:118%;
  color:var(--navy-deep);letter-spacing:-.01em;line-height:1.06;max-width:17ch;
}
.page-intro h1 .accent{color:var(--red-ink)}
.page-intro-lead{margin-top:1rem;font-size:1.02rem;color:var(--navy);max-width:56ch}
.intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.2rem;margin-top:1.6rem}
.intro-phone{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:800;font-stretch:114%;font-size:clamp(1.35rem,2.6vw,1.75rem);color:var(--navy-deep);line-height:1}
.intro-phone svg{width:18px;height:18px;color:var(--red-ink)}
.intro-phone:hover{color:var(--red-ink)}

/* ---- spec plate: the page's index, styled as a stamped shop plate (no rotation —
       the rotated carbon-copy ticket stays the homepage's alone) ---- */
.spec-plate{background:var(--paper);border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow-sm);padding:22px 22px 18px}
.sp-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:10px}
.sp-title{font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-deep)}
.sp-no{font-family:var(--mono);font-size:.64rem;color:var(--navy);opacity:.8}
.sp-rule{border:0;border-top:1px solid var(--line);margin:0 0 6px}
.sp-list{list-style:none;margin:0;padding:0}
.sp-list li{display:flex;align-items:baseline;gap:.7rem;padding:.55rem 0;border-bottom:1px dashed var(--line)}
.sp-list li:last-child{border-bottom:0}
.sp-n{font-family:var(--mono);font-weight:700;font-size:.72rem;color:var(--red-ink);flex:0 0 auto}
.sp-name{font-weight:700;font-size:.92rem;color:var(--navy-deep);flex:1 1 auto}
.sp-name:hover{color:var(--red-ink)}
.sp-count{font-family:var(--mono);font-size:.7rem;color:var(--navy);opacity:.8;flex:0 0 auto}
.sp-foot{display:flex;align-items:baseline;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1.5px dashed var(--line)}
.sp-foot .sp-fl{font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.sp-foot .sp-fv{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.45rem;color:var(--navy-deep);line-height:1}

/* ---- marquee variants: same device as the homepage, inverted + un-overlapped ---- */
.marquee--flat{margin-top:0}
.marquee--ink{background:var(--navy);border-top-color:var(--navy-deep);border-bottom-color:var(--navy-deep)}
.marquee--ink .marquee-track{color:#D7E2EC}
.marquee--ink .marquee-track span::after{color:var(--amber)}

/* ---- most requested (client-stated: brakes, tune-ups, oil changes, A/C) ----
   These four cut across the five systems, so they get a row of their own above
   the run. Hover lift lives on .pop-card while .reveal sits on the parent grid —
   keeping the CSS transition and the reveal on different elements, so neither
   bakes the other's mid-flight value in as a resting state. */
.popular{background:var(--floor);padding:clamp(34px,4.5vw,54px) 0}
.pop-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.pop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.pop-card{
  display:flex;flex-direction:column;gap:.35rem;
  background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--navy);
  border-radius:2px;padding:1.2rem 1.15rem 1rem;
  transition:transform .2s var(--ease-mech),box-shadow .2s var(--ease-mech),border-top-color .2s var(--ease-mech);
}
.pop-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-top-color:var(--red-ink)}
.pop-n{font-family:var(--mono);font-weight:700;font-size:.7rem;letter-spacing:.06em;color:var(--red-ink)}
.pop-name{font-size:1.12rem;font-weight:800;font-stretch:110%;color:var(--navy-deep);line-height:1.15}
.pop-why{font-size:.88rem;color:var(--navy);line-height:1.45}
.pop-go{
  margin-top:auto;padding-top:.7rem;font-family:var(--mono);font-weight:600;font-size:.66rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--navy);display:inline-flex;align-items:center;gap:.35rem;
}
.pop-go::after{content:"\2192";transition:transform .2s var(--ease-mech)}
.pop-card:hover .pop-go{color:var(--red-ink)}
.pop-card:hover .pop-go::after{transform:translateX(3px)}
/* deep-linked rows have to clear the sticky header like the system blocks do */
.op[id]{scroll-margin-top:calc(var(--header-h) + 20px)}

/* ---- the systems run: sticky index rail + operation blocks ---- */
.systems{background:var(--paper)}
.sys-layout{display:grid;grid-template-columns:216px 1fr;gap:clamp(28px,4.5vw,64px);align-items:start}

.sys-index{position:sticky;top:calc(var(--header-h) + 24px);align-self:start}
.si-cap{font-family:var(--mono);font-weight:600;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);opacity:.75;margin-bottom:.85rem}
.si-rail{position:relative}
.si-list{list-style:none;margin:0;padding:0 0 0 20px;border-left:1px solid var(--line)}
.si-list li{margin:0}
.si-item{display:flex;align-items:baseline;gap:.55rem;padding:.5rem 0;font-size:.88rem;font-weight:600;color:var(--navy);opacity:.62;transition:opacity .22s var(--ease-mech),color .22s var(--ease-mech)}
.si-item .si-n{font-family:var(--mono);font-weight:700;font-size:.7rem;color:var(--navy);flex:0 0 auto}
.si-item:hover{opacity:1}
.si-item.is-active{opacity:1;color:var(--navy-deep)}
.si-item.is-active .si-n{color:var(--red-ink)}
/* the carriage: a needle-red arrow that travels the rail to the system you're reading.
   Positioned by JS (translateY) — GSAP when available, a plain style write otherwise. */
.si-arrow{position:absolute;left:-6px;top:0;width:11px;height:11px;color:var(--red-ink);opacity:0;transition:opacity .22s var(--ease-mech)}
.si-arrow.is-on{opacity:1}
.si-arrow svg{width:100%;height:100%;display:block}

/* anchor targets clear the 68px sticky header when jumped to from the spec plate */
.sys-block{padding-top:clamp(8px,2vw,18px);margin-bottom:clamp(40px,5.5vw,68px);scroll-margin-top:calc(var(--header-h) + 16px)}
.sys-block:last-child{margin-bottom:0}
.sys-head{display:flex;align-items:baseline;gap:.8rem;padding-bottom:.7rem;border-bottom:2px solid var(--navy)}
.sys-no{font-family:var(--mono);font-weight:700;font-size:.82rem;color:var(--red-ink);flex:0 0 auto}
.sys-head h3{font-size:clamp(1.25rem,2.4vw,1.65rem);font-weight:800;font-stretch:112%;color:var(--navy-deep)}
.sys-tally{margin-left:auto;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);opacity:.8;white-space:nowrap}
.sys-intro{margin-top:.9rem;font-size:.98rem;color:var(--navy);max-width:68ch}

.op-list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:0}
.op{display:grid;grid-template-columns:auto 1fr;gap:.9rem;padding:1rem 0;border-bottom:1px dashed var(--line)}
.op:last-child{border-bottom:0}
.op-n{font-family:var(--mono);font-weight:700;font-size:.76rem;color:var(--navy);padding-top:.2em}
.op-name{font-size:1.02rem;font-weight:800;font-stretch:106%;color:var(--navy-deep);margin-bottom:.3rem}
.op-desc{font-size:.94rem;color:var(--navy);line-height:1.55;max-width:66ch}
/* stamp-in start state — JS clears it; see the reduced-motion block for the fallback */
.op.stamp{opacity:0;transform:translateY(8px)}

/* ---- parts + vehicles band ---- */
.parts{background:var(--floor)}
.parts-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:stretch}
.parts-card{background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:1.5rem 1.4rem}
.parts-card h3{font-size:1.06rem;font-weight:800;font-stretch:108%;color:var(--navy-deep);margin-bottom:.55rem}
.parts-card p{font-size:.94rem;color:var(--navy);line-height:1.55}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.chip-row span{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--navy-deep);background:var(--floor);border:1px solid var(--line);border-radius:999px;padding:.38rem .75rem}

/* ---- process recap (compact restatement of the homepage's pinned narrative) ---- */
.proc{background:var(--navy-deep);color:var(--paper)}
.proc .eyebrow{color:#AFC3D6}
.proc .eyebrow::before{background:var(--amber)}
.proc .sect-title{color:#fff}
.proc .sect-lead{color:#D7E2EC;opacity:1}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2rem}
.proc-step{background:rgba(244,242,238,.06);border:1px solid rgba(244,242,238,.18);border-radius:3px;padding:1.3rem 1.2rem}
.proc-step .ps-n{font-family:var(--mono);font-weight:700;font-size:.76rem;color:var(--amber);letter-spacing:.06em}
.proc-step h3{font-size:1rem;font-weight:800;font-stretch:108%;color:#fff;margin:.5rem 0 .4rem}
.proc-step p{font-size:.9rem;color:#D7E2EC;line-height:1.5}

/* ---- responsive ---- */
@media (max-width:1080px){
  .pop-grid{grid-template-columns:repeat(2,1fr)}
  .sys-layout{grid-template-columns:1fr}
  .sys-index{display:none}
  .proc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .page-intro-grid{grid-template-columns:1fr}
  .spec-plate{max-width:460px}
  .parts-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pop-grid{grid-template-columns:1fr}
  .proc-grid{grid-template-columns:1fr}
  .op{grid-template-columns:1fr;gap:.35rem}
  .op-n{padding-top:0}
}

@media (prefers-reduced-motion:reduce){
  .op.stamp{opacity:1;transform:none}
  .pop-card,.pop-go::after{transition:none}
  .pop-card:hover{transform:none}
  .si-arrow{transition:none}
}