/* ==========================================================================
   E&J Repairs — homepage
   Adapted from the Morgan's Tree layout system; palette retuned to the E&J badge.
   The design's inline styles, style-hover/style-focus attributes and
   !important light-mode overrides are expressed as real CSS here.

   Light mode is deliberately partial: the hero, trust rail, storm band,
   contact block and footer stay dark in both themes. Only .section and
   .section-alt flip.
   ========================================================================== */

:root{
  --bg:#151513;
  --bg-alt:#1c1c19;
  --ink:#ece8e0;
  --gold:#e0a35c;
  --gold-dim:#cf8f43;
  --green:#8fb06e;
  --green-btn:#7a9c60;
  --card:#222220;
  --line:rgba(236,232,224,.12);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--ink)}
img{max-width:100%}
::selection{background:var(--gold);color:#131311}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* 2.4.1 Bypass Blocks. Off-screen until focused, then over the sticky header. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:13px 20px;background:#0f0f0c;color:var(--ink);
  font-size:.95rem;font-weight:700;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0}
@keyframes mtpulse{0%,100%{opacity:1}50%{opacity:.45}}

.page{background:var(--bg);min-height:100vh}
.wrap{max-width:1200px;margin:0 auto}

/* ---------- shared bits ---------- */
.eyebrow{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim)}
.i-green{fill:var(--green)}
.i-gold{fill:var(--gold)}

.btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;font-weight:700;font-size:1rem;cursor:pointer;border:1px solid transparent}
.btn-cream{padding:15px 26px;background:var(--ink);color:#131311;box-shadow:0 20px 44px -24px rgba(0,0,0,.9)}
.btn-cream:hover{background:#fff;color:#131311}
.btn-outline{padding:15px 24px;border-color:rgba(236,232,224,.35);color:var(--ink);font-weight:600}
.btn-outline:hover{background:rgba(236,232,224,.08);border-color:var(--ink);color:var(--ink)}
.btn-green{padding:15px 24px;background:var(--green-btn);border-color:#688a52;color:#131311;white-space:nowrap}
.btn-green:hover{background:#8fb573;color:#131311}

/* ---------- header ---------- */
/* Sticky, NOT fixed. Sticky stays in normal flow, so it reserves its own height
   at the top of the page and the hero starts cleanly below it — the top of the
   photo is never hidden behind the bar. Switching this to fixed pulls the hero
   up to y=0 and tucks the boom under the header; don't. */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(15,15,12,.82);
  backdrop-filter:saturate(140%) blur(16px);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  border-bottom:1px solid rgba(236,232,224,.1);
}
/* In-page anchors must clear the fixed bar or the target lands underneath it. */
html{scroll-padding-top:84px}
.hdr-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:28px;padding:12px clamp(16px,4vw,32px)}
.brand{display:flex;align-items:center;gap:10px;color:inherit;flex:0 0 auto}
.brand img{width:46px;height:46px;object-fit:cover;mix-blend-mode:lighten;filter:brightness(1.15) contrast(1.05)}
.brand-name{display:flex;flex-direction:column;line-height:1.1}
.brand-name strong{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.brand-name em{font-style:normal;font-size:9.5px;color:var(--gold-dim);letter-spacing:.2em;text-transform:uppercase;margin-top:2px;white-space:nowrap}

.nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav a{font-size:13.5px;font-weight:500;color:rgba(236,232,224,.78)}
.nav a:hover{color:var(--ink)}

.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;background:transparent;
  border:1px solid rgba(236,232,224,.14);border-radius:10px;
  color:var(--ink);cursor:pointer;flex:0 0 auto;
}
.theme-toggle:hover{background:rgba(236,232,224,.07)}
.ico-sun{display:none}
html[data-theme="light"] .ico-sun{display:block}
html[data-theme="light"] .ico-moon{display:none}

.hdr-cta{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 13px;background:var(--ink);color:#131311;border-radius:12px;flex:0 0 auto}
.hdr-cta:hover{background:#fff;color:#131311}
.hdr-cta span{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.hdr-cta em{font-style:normal;font-size:9px;color:#6a635a;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.hdr-cta strong{font-size:15px;font-weight:800;color:#131311;letter-spacing:-.01em;margin-top:2px;white-space:nowrap}

.hamb{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;background:transparent;
  border:1px solid rgba(236,232,224,.14);border-radius:10px;
  color:var(--ink);cursor:pointer;
}
.hamb:hover{background:rgba(236,232,224,.07)}
.hamb .ico-close{display:none}
.hamb.is-open .ico-close{display:block}
.hamb.is-open .ico-bars{display:none}

.mobile-nav{display:none;flex-direction:column;background:rgba(15,15,12,.98);border-top:1px solid rgba(236,232,224,.1)}
.mobile-nav a{padding:15px clamp(16px,4vw,32px);font-size:1rem;font-weight:500;color:var(--ink);border-bottom:1px solid rgba(236,232,224,.08)}
.mobile-nav a:hover{background:rgba(236,232,224,.05)}
.mobile-nav a:last-of-type{border-bottom:0}
.mobile-nav button{
  display:flex;align-items:center;gap:11px;padding:15px clamp(16px,4vw,32px);
  background:transparent;border:0;border-top:1px solid rgba(236,232,224,.08);
  font:500 1rem Inter,sans-serif;color:var(--ink);cursor:pointer;text-align:left;
}
.mobile-nav button:hover{background:rgba(236,232,224,.05)}

/* ---------- hero ---------- */
/* Hero sizing, deliberately NOT aspect-ratio.
   aspect-ratio would pin the height to width/1.7619 at every breakpoint, which
   on a 430px phone is 244px — far shorter than the stacked copy + form, so
   overflow:hidden would clip them. min-height instead sets a floor and lets
   content win when it needs to:
     - desktop: floor is the photo's full proportional height, capped at 82vh so
       the hero still fits on screen.
     - mobile:  the floor is tiny, so content drives the height. Nothing clips.
   Pair with object-position bottom on .hero-bg: whenever the 82vh cap makes the
   hero shorter than full proportion, cover trims off the TOP and the wheels and
   grass at the bottom always stay visible.
   1.7619 is the hero image's aspect (1184x672) — keep in sync if it's recropped. */
/* display:flex + align-items:center is what actually centres the copy in the
   photo. .hero-grid is only as tall as its own content, so centring inside it
   does nothing — the block just sat at the top of a much taller hero. The hero
   has to do the centring. Absolutely-positioned children (.hero-bg) are out of
   flow, so flex does not touch them. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);min-height:calc(100vw / 1.7619);display:flex;align-items:center}
/* The hero photo is a bare-metal V-twin under shop light — bright, silver and
   busy exactly where the headline sits. Text-shadow alone (which is all the
   original layout used, on a photo that was already dark on the left) could not
   carry it: the lede washed out over the cases. So the scrim is on for desktop
   too, but weighted left-to-right — heavy behind the copy column, gone by the
   time it reaches the engine and the quote card on the right. If the hero photo
   is ever swapped for a darker one, dial the first two stops back rather than
   deleting the rule; the copy column needs some floor under it. */
/* cover, never contain — the image always fills the hero edge to edge, no bars.
   min-height on .hero keeps the frame at a fixed 1.7619 aspect; this photo is
   4:3, so cover trims a little off the top and bottom on desktop and the engine
   stays centred. Below 940px the stacked copy makes the hero taller than that
   ratio, so cover crops horizontally instead — handled by object-position in
   the media query, where the portrait shop photo takes over. */
/* <picture> carries the positioning; the img just fills it. Needed so the
   mobile <source> can swap in the portrait photo. */
.hero-media{position:absolute;inset:0;z-index:-2;display:block}
.hero-bg{width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;display:block}
.hero-scrim{
  display:block;position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(14,14,12,.86) 0%,rgba(14,14,12,.74) 38%,rgba(14,14,12,.30) 62%,rgba(14,14,12,.12) 100%),
    linear-gradient(180deg,rgba(14,14,12,.42) 0%,rgba(14,14,12,0) 26%,rgba(14,14,12,0) 74%,rgba(14,14,12,.34) 100%);
}
.hero-copy h1{text-shadow:0 2px 4px rgba(0,0,0,.55), 0 6px 28px rgba(0,0,0,.45)}
.hero-copy .hero-lede,
.hero-copy .hero-checks li,
.hero-copy .badge{text-shadow:0 1px 3px rgba(0,0,0,.7), 0 2px 12px rgba(0,0,0,.5)}
/* Columns are deliberately lopsided and the card is capped + right-aligned so
   the quote form clears the truck in the hero photo. The truck's front half
   (grille, hood, cab) sits roughly 39-64% across the image; anything wider than
   this on the right column starts covering it. */
.hero-grid{
  width:100%;max-width:1200px;margin:0 auto;
  /* Equal top and bottom so align-items:center lands the copy and the form in the
     true vertical middle of the photo. Any asymmetry here shifts them off centre
     by half the difference. */
  padding:clamp(56px,7vw,96px) clamp(20px,4vw,32px);
  display:grid;grid-template-columns:1.5fr .82fr;gap:clamp(28px,6vw,90px);align-items:center;
}
.quote-card{max-width:390px;justify-self:end}
.badge{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;padding:6px 14px 6px 11px;
  border:1px solid rgba(163,192,97,.4);background:rgba(123,150,72,.14);border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#bfd385;
}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(123,150,72,.24);animation:mtpulse 2.4s ease-in-out infinite}
.hero h1{margin:0 0 18px;font-size:clamp(2.5rem,5vw,4.1rem);font-weight:800;letter-spacing:-.038em;line-height:1.02;color:#fff;text-wrap:balance}
.hero-lede{margin:0 0 30px;max-width:46ch;font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.6;color:#fff;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.hero-checks{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.92rem;color:#fff}
.hero-checks li{display:inline-flex;align-items:center;gap:7px}

/* quick-estimate card in the hero */
.quote-card{
  background:rgba(23,23,15,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(236,232,224,.16);border-radius:18px;
  padding:26px 24px 22px;box-shadow:0 40px 80px -40px rgba(0,0,0,.95);
  display:flex;flex-direction:column;gap:12px;
}
.quote-card h2{margin:0 0 3px;font-size:1.4rem;font-weight:800;letter-spacing:-.025em;color:var(--ink);line-height:1.15}
.quote-card-kicker{margin:0 0 4px;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim)}
.quote-card-sub{margin:0;font-size:.85rem;color:rgba(236,232,224,.6)}
.quote-card-fine{margin:2px 0 0;font-size:.78rem;color:rgba(236,232,224,.5);text-align:center}
.quote-card-fine a{color:var(--gold);font-weight:600}
/* Sends people who need more room to the full form in #contact */
.quote-card-more{
  display:block;margin-top:2px;padding-top:12px;text-align:center;
  border-top:1px solid rgba(236,232,224,.12);
  font-size:.83rem;font-weight:600;color:var(--gold);
}
.quote-card-more:hover{color:var(--ink)}
.quote-card .btn-submit{
  margin-top:4px;width:100%;justify-content:center;
  padding:14px 20px;border:1px solid #688a52;border-radius:999px;
  background:var(--green-btn);color:#131311;font:800 1rem Inter,sans-serif;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
}
.quote-card .btn-submit:hover{background:#8fb573}

/* form fields (hero card + contact form) */
.field{display:flex;flex-direction:column;gap:6px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(236,232,224,.65);font-weight:700}
.field input,.field select,.field textarea{
  background:rgba(0,0,0,.35);border:1px solid rgba(236,232,224,.14);color:var(--ink);
  border-radius:10px;padding:12px 13px;font:400 .95rem Inter,sans-serif;
  letter-spacing:0;text-transform:none;
}
.field textarea{resize:vertical}
/* A <select>'s intrinsic width is its widest <option>, and this form's options
   are full sentences ("Diagnostics — check engine / no start"). Left alone that
   sets a ~390px min-content on the whole quote card, which becomes the minimum
   of the 1fr grid track it sits in, which pushes the document wider than a
   phone viewport — the hero, and then every section under it, scroll sideways.
   width:100% + min-width:0 caps the control at its container instead; the long
   option text still shows in full in the native dropdown. */
.field input,.field select,.field textarea{width:100%;min-width:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(187,166,121,.18)}
.field option{background:#131311}

/* ---------- trust rail ---------- */
.rail{background:#131311;border-top:1px solid rgba(236,232,224,.1);border-bottom:1px solid rgba(236,232,224,.1)}
.rail-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.rail-grid > div{display:flex;align-items:flex-start;gap:14px;padding:26px 24px}
.rail-grid > div + div{border-left:1px solid rgba(236,232,224,.1)}
.rail-grid svg{flex:0 0 auto;margin-top:1px}
.rail-grid strong{display:block;font-size:.97rem;font-weight:600;color:var(--ink);margin-bottom:3px}
.rail-grid em{font-style:normal;font-size:.82rem;color:rgba(236,232,224,.58);display:block;max-width:30ch;line-height:1.5}

/* ---------- storm band ---------- */
.storm{
  background:radial-gradient(60% 100% at 0% 50%,rgba(187,166,121,.15),transparent 60%),
             linear-gradient(90deg,#1f261c 0%,#283224 60%,#2f3a29 100%);
  border-bottom:1px solid rgba(236,232,224,.1);
}
.storm-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:24px clamp(20px,4vw,32px);flex-wrap:wrap}
.storm-icon{flex:0 0 auto;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:rgba(123,150,72,.15);border:1px solid rgba(123,150,72,.45);border-radius:16px;color:#bfd385}
.storm-copy{flex:1;min-width:260px}
.storm-copy .eyebrow{margin:0 0 2px;font-size:11px;letter-spacing:.18em;color:#bfd385}
.storm-copy h2{margin:2px 0 4px;font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.storm-copy p{margin:0;color:rgba(239,230,213,.82);font-size:.95rem}
.storm-copy strong{color:var(--ink);font-weight:600}

/* ---------- generic sections ---------- */
.section{padding:clamp(64px,7vw,96px) clamp(20px,5vw,48px);background:var(--bg)}
.section-alt{padding:clamp(64px,7vw,96px) clamp(20px,5vw,48px);background:var(--bg-alt);border-top:1px solid rgba(236,232,224,.08)}
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:40px}
.sec-head h2{margin:0;font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.06;color:var(--ink)}
.sec-head p{margin:0;font-size:1.02rem;line-height:1.6;color:rgba(236,232,224,.72);text-wrap:pretty}

/* ---------- services ---------- */
/* Grouped by what the customer is ringing up about, not listed 01-12. The old
   numbering implied a sequence that does not exist — nobody buys stump grinding
   "after" tree removal — and decorative numbering is the fastest way to make a
   list look templated. Card chrome (border box + fill + radius) is gone too;
   photo, hairline, name, done. Matches the job tiles in Our Work. */
.svc-grid{list-style:none;padding:0;margin:0 0 46px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px}
.svc{display:flex;flex-direction:column}
.svc img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:3px;background:#0a0a07}
.svc-body{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.svc-body h3{margin:0 0 5px;font-size:1.1rem;font-weight:700;letter-spacing:-.014em;color:var(--ink)}
.svc-body p{margin:0;font-size:.9rem;line-height:1.55;color:rgba(236,232,224,.7)}
/* Only on the three services whose availability genuinely differs from the rest,
   so the tag carries information instead of decorating every card. Same plate
   treatment as the equipment specs, which is where the reader first meets it. */
.svc-tag{
  display:inline-block;margin-bottom:7px;padding:3px 8px;
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(187,166,121,.42);border-radius:2px;
}
.services-foot{margin:0;font-size:.95rem;color:rgba(236,232,224,.7)}
.services-foot{margin:24px 0 0;color:rgba(236,232,224,.72);font-size:.97rem}
.services-foot a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--gold)}

/* ---------- why us ---------- */
.why-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,64px);align-items:center}
.why-grid h2{margin:0 0 12px;font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.06;color:var(--ink)}
.why-lede{margin:0 0 26px;max-width:50ch;font-size:1.06rem;line-height:1.6;color:rgba(236,232,224,.72);text-wrap:pretty}
.framed{width:100%;border-radius:14px;box-shadow:0 28px 60px -32px rgba(0,0,0,.7);display:block}
.why-list{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-direction:column;gap:16px}
.why-list li{display:flex;gap:13px;align-items:flex-start}
.why-list svg{flex:0 0 auto;margin-top:3px}
.why-list div{color:rgba(236,232,224,.72);font-size:.97rem;line-height:1.55}
.why-list strong{display:block;color:var(--ink);font-weight:600;font-size:1rem;margin-bottom:2px}

/* ---------- our work ----------
   Two bands, because the photos answer two different questions: "will my place
   look right after?" (job results) and "do they own the gear?" (equipment).
   The old single grid shuffled both together, which is what made it read as a
   wall of stock tiles. Captions sit BELOW the images here — a gradient scrim on
   every tile is the default card-grid look and was doing most of the damage. */
.band-label{
  display:flex;align-items:center;gap:18px;
  margin:0 0 22px;font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);
}
.band-label::after{content:'';flex:1;height:1px;background:var(--line)}

/* Feature strips break the rhythm of the grid so the section reads as edited
   rather than dumped. Cinematic crop, since these are all landscape shots. */
.job-feat{margin:0 0 44px}
.job-feat img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block;border-radius:3px;background:#0a0a07}

.job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px;margin:0 0 52px}
.job{margin:0}
.job img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:3px;background:#0a0a07}

/* One hairline under each caption, in gold. The only ornament in the band. */
.job figcaption,.job-feat figcaption{
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-size:.9rem;line-height:1.45;color:rgba(236,232,224,.72);
}
.job-feat figcaption{font-size:1.02rem;color:rgba(236,232,224,.82);max-width:52ch}

/* ---------- the iron (equipment rail) ----------
   Full-bleed and horizontally scrolled on purpose: it mirrors the loadout photo,
   equipment lined up along a trailer deck. This is the section's one bold move,
   so everything around it stays quiet. */
/* Negative inline margin cancels .section's horizontal padding so the band runs
   true edge to edge. --rail-gut then re-creates the container's left edge, so the
   label, the lede and the first photo all line up on one axis while the rail
   still bleeds off the right to signal there's more to scroll. */
.iron{
  --rail-gut:max(clamp(20px,5vw,48px),calc(50% - 600px));
  margin:64px calc(-1 * clamp(20px,5vw,48px)) 0;
  padding:52px 0 8px;border-top:1px solid var(--line);background:var(--bg-alt);
}
.iron > .wrap{max-width:none;padding-inline:var(--rail-gut)}
.iron-lede{margin:0 0 28px;max-width:58ch;font-size:.98rem;line-height:1.6;color:rgba(236,232,224,.7)}
/* Four items spread evenly across the container rather than sitting in a
   scrolling rail — nothing is hidden off-screen, nothing needs swiping. */
.iron-track{
  list-style:none;margin:0;padding:0 var(--rail-gut) 44px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.iron-track img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:3px;background:#0a0a07}
.iron-meta{padding-top:13px;border-top:1px solid var(--line);margin-top:12px}
/* Spec plate — set in mono because that is how these numbers appear on the
   machines themselves. Every value here is legible in the photo; none invented. */
.spec{
  display:inline-block;margin-bottom:7px;padding:3px 8px;
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(187,166,121,.42);border-radius:2px;
}
.iron-meta strong{display:block;font-size:1.02rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.iron-meta em{display:block;margin-top:4px;font-style:normal;font-size:.87rem;line-height:1.5;color:rgba(236,232,224,.62)}

@media (max-width:880px){
  .job-grid{grid-template-columns:repeat(2,1fr);gap:28px 18px}
  .job-feat img{aspect-ratio:16/9}
  .iron-track{grid-template-columns:repeat(2,1fr);gap:26px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .job-grid{grid-template-columns:1fr;gap:26px}
  .job-feat img{aspect-ratio:3/2}
  .iron-track{grid-template-columns:1fr;gap:30px}
  .iron-track img{aspect-ratio:3/2}
}

/* ---------- service area ---------- */
.area-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,4vw,56px);align-items:center}
.area-grid h2{margin:0 0 12px;font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.06;color:var(--ink)}
.area-lede{margin:0 0 24px;font-size:1.02rem;line-height:1.6;color:rgba(236,232,224,.72);max-width:44ch;text-wrap:pretty}
.towns{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:8px}
.towns li{padding:6px 12px;border:1px solid rgba(236,232,224,.16);border-radius:999px;font-size:.85rem;color:rgba(236,232,224,.8)}
.towns li.hq{color:var(--ink);background:rgba(236,232,224,.05)}
.area-ask{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;color:var(--gold);border-bottom:1px solid rgba(205,185,138,.5);padding-bottom:2px}
.map-frame{border:1px solid rgba(236,232,224,.14);border-radius:16px;overflow:hidden;box-shadow:0 28px 60px -32px rgba(0,0,0,.7);background:#12120d;height:460px}
.map-frame mt-service-map{display:block;height:460px}

/* ---------- process ---------- */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps > li{padding:0 28px 0 0;position:relative}
.steps > li:last-child{padding-right:0}
.step-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.step-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#131311;font-size:.95rem;font-weight:800}
.steps > li:last-child .step-num{background:var(--green)}
.step-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(205,185,138,.5),rgba(205,185,138,0))}
.steps h3{margin:0 0 8px;font-size:1.12rem;font-weight:700;letter-spacing:-.012em;color:var(--ink);line-height:1.25}
.steps p{margin:0;color:rgba(236,232,224,.7);font-size:.94rem;line-height:1.55}

/* ---------- about ---------- */
.about-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,56px);align-items:center}
.about-grid h2{margin:0 0 16px;font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.06;color:var(--ink)}
.about-grid p{margin:0 0 14px;color:rgba(236,232,224,.72);font-size:1.02rem;line-height:1.65;max-width:56ch;text-wrap:pretty}
.about-grid p:last-of-type{margin-bottom:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}
.stats > div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 14px;text-align:center}
.stats strong{display:block;font-size:1.7rem;font-weight:800;color:var(--ink);line-height:1;margin-bottom:6px;letter-spacing:-.03em}
.stats span{font-size:.78rem;color:rgba(236,232,224,.7);letter-spacing:.04em}

/* ---------- pull quote ---------- */
.quote-band{
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%);
  padding:clamp(48px,6vw,72px) clamp(20px,5vw,48px);
  border-top:1px solid rgba(236,232,224,.08);border-bottom:1px solid rgba(236,232,224,.08);
}
.quote-band figure{max-width:820px;margin:0 auto;text-align:center}
.quote-band svg{display:block;margin:0 auto 18px}
.quote-band blockquote{margin:0;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.4;color:var(--ink);font-weight:500;letter-spacing:-.015em;text-wrap:balance}
.quote-band figcaption{margin-top:16px;font-size:.8rem;color:var(--gold);letter-spacing:.16em;text-transform:uppercase;font-weight:700}

/* ---------- contact ---------- */
.contact{
  position:relative;overflow:hidden;
  background:radial-gradient(80% 60% at 20% 0%,rgba(123,150,72,.09),transparent 60%),
             linear-gradient(180deg,#131311 0%,#1f1e18 100%);
  padding:clamp(64px,7vw,96px) clamp(20px,5vw,48px);
}
.contact-dots{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(239,230,213,.04) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.contact-inner{position:relative;max-width:1200px;margin:0 auto}
.contact-head{max-width:64ch;margin:0 0 36px}
.contact-head h2{margin:0 0 10px;font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.06;color:var(--ink)}
.contact-head p{margin:0;font-size:1.04rem;line-height:1.6;color:rgba(236,232,224,.72);max-width:58ch}
.contact-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:18px}
.contact-form{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form .field{color:rgba(239,230,213,.68);gap:7px}
.contact-form .field input,.contact-form .field select,.contact-form .field textarea{background:rgba(0,0,0,.28);border-color:var(--line)}
.contact-form .full{grid-column:1/-1}
.contact-form .btn-submit{
  grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:8px;
  padding:15px 28px;border:1px solid transparent;border-radius:999px;
  background:var(--gold);color:#131311;font:700 1rem Inter,sans-serif;cursor:pointer;
}
.contact-form .btn-submit:hover{background:var(--ink)}
.form-fine{grid-column:1/-1;margin:0;font-size:.85rem;color:rgba(239,230,213,.55)}
.form-fine a{color:var(--gold);border-bottom:1px dashed var(--gold)}
.contact-card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:26px;align-self:start}
.contact-card h3{margin:0 0 16px;color:var(--ink);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.2em}
.contact-card .big-phone{margin:0 0 8px}
.contact-card .big-phone a{display:inline-flex;align-items:center;gap:9px;font-size:1.55rem;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.contact-card .big-phone a:hover{color:var(--gold)}
.contact-card .email a{color:var(--gold);border-bottom:1px solid rgba(187,166,121,.4);font-size:.93rem}
.contact-card hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.contact-card p{color:rgba(239,230,213,.85);font-size:.93rem;margin:0 0 16px}
.contact-card p strong{color:var(--ink);display:block;margin-bottom:4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;font-weight:700}
.fb-link{display:inline-flex;align-items:center;margin-top:6px;color:var(--gold);font-size:.9rem;font-weight:600;border-bottom:1px solid var(--gold)}

/* ---------- footer ---------- */
.site-footer{background:#161612;color:rgba(239,230,213,.7);padding:36px clamp(20px,5vw,48px) 22px;border-top:1px solid rgba(236,232,224,.1)}
.foot-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.foot-brand img{width:40px;height:40px;object-fit:cover;mix-blend-mode:lighten;filter:brightness(1.15)}
.foot-brand strong{display:block;font-size:.97rem;color:var(--ink)}
.foot-brand em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dim);margin-top:2px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{color:rgba(239,230,213,.78);font-size:.9rem}
.foot-links a:hover{color:var(--ink)}
.foot-contact{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.foot-contact a{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:500;font-size:.92rem}
.foot-contact a:hover{color:var(--gold)}
/* 1.4.3 (AA): .45 composites to about 3.89:1 at 12.8px, under the 4.5 bar.
   axe-core flags it "serious". .55 measures ~5.0 and looks the same. */
.foot-copy{max-width:1200px;margin:20px auto 0;font-size:.8rem;color:rgba(239,230,213,.55);padding-top:18px;border-top:1px solid rgba(236,232,224,.1)}
.foot-copy em{font-style:normal;color:var(--gold-dim);font-weight:500}

/* ---------- sticky call button (small screens) ---------- */
.fab-call{
  position:fixed;bottom:16px;right:16px;z-index:70;display:none;
  align-items:center;gap:9px;background:#131311;color:var(--ink);
  padding:14px 22px;border-radius:999px;border:1px solid var(--gold);
  box-shadow:0 14px 34px rgba(0,0,0,.55);font-weight:700;font-size:.95rem;
}
.fab-call:hover{background:#1f1e18;color:var(--ink)}

/* ==========================================================================
   Light mode — hero, rail, storm, contact and footer stay dark on purpose.
   ========================================================================== */
html[data-theme="light"] body,
html[data-theme="light"] .page,
html[data-theme="light"] .section{background:#f3f2ee;color:#161614}
html[data-theme="light"] .section-alt{background:#e9e7e0;border-top-color:rgba(0,0,0,.07);border-bottom-color:rgba(0,0,0,.07)}

html[data-theme="light"] :is(.section,.section-alt) h2,
html[data-theme="light"] :is(.section,.section-alt) h3,
html[data-theme="light"] :is(.section,.section-alt) strong,
html[data-theme="light"] :is(.section,.section-alt) blockquote{color:#161614}
html[data-theme="light"] :is(.section,.section-alt) p,
html[data-theme="light"] :is(.section,.section-alt) li,
html[data-theme="light"] :is(.section,.section-alt) li > div,
html[data-theme="light"] :is(.section,.section-alt) span{color:rgba(22,22,20,.74)}
html[data-theme="light"] :is(.section,.section-alt) a{color:#8a5a1e;border-bottom-color:rgba(138,90,30,.55)}
html[data-theme="light"] :is(.section,.section-alt) .eyebrow,
html[data-theme="light"] :is(.section,.section-alt) figcaption{color:#8a5a1e}
html[data-theme="light"] :is(.section,.section-alt) .i-green{fill:#4f6f34}
html[data-theme="light"] :is(.section,.section-alt) .i-gold{fill:#8a5a1e}

html[data-theme="light"] .svc-body{border-top-color:rgba(0,0,0,.12)}
html[data-theme="light"] .svc-body h3{color:#161614}
html[data-theme="light"] .svc-body p{color:rgba(22,22,20,.72)}
html[data-theme="light"] .svc-tag{color:#8a5a1e;border-color:rgba(138,90,30,.4)}
/* .svc-grid > li dropped from these: service cards no longer have card chrome,
   and re-adding a white fill + border here would put the box straight back. */
html[data-theme="light"] .stats > div{background:#fff;border-color:rgba(0,0,0,.1);box-shadow:0 6px 22px -14px rgba(0,0,0,.28)}
html[data-theme="light"] .towns li{border-color:rgba(0,0,0,.16);background:rgba(0,0,0,.02);color:rgba(22,22,20,.8)}

html[data-theme="light"] :is(.section,.section-alt) .btn-cream{background:#161614;color:#f3f2ee;border-bottom:0}
html[data-theme="light"] :is(.section,.section-alt) .btn-cream:hover{background:#2a2824;color:#f3f2ee}
/* `.steps` prefix is load-bearing: the blanket `:is(.section,.section-alt) span`
   rule above is (0,2,1) and would otherwise win, painting the step numbers
   near-black on a near-black circle. */
html[data-theme="light"] .steps .step-num{background:#161614;color:#f3f2ee}
html[data-theme="light"] .steps > li:last-child .step-num{background:#4f6f34;color:#f3f2ee}
html[data-theme="light"] .step-line{background:linear-gradient(90deg,rgba(138,90,30,.4),rgba(138,90,30,0))}

/* Work section in light mode: captions sit on the page now, not on the photo,
   so they take page ink rather than staying cream. The iron band keeps its own
   recessed panel so the rail still reads as a separate register. */
html[data-theme="light"] .job figcaption{color:rgba(22,22,20,.72)}
html[data-theme="light"] .job-feat figcaption{color:rgba(22,22,20,.82)}
html[data-theme="light"] :is(.job,.job-feat) figcaption{border-top-color:rgba(0,0,0,.12)}
html[data-theme="light"] .band-label{color:#8a5a1e}
html[data-theme="light"] .band-label::after{background:rgba(0,0,0,.12)}
html[data-theme="light"] .iron{background:#e9e7e0;border-top-color:rgba(0,0,0,.08)}
html[data-theme="light"] .iron-lede{color:rgba(22,22,20,.7)}
html[data-theme="light"] .iron-meta{border-top-color:rgba(0,0,0,.12)}
html[data-theme="light"] .iron-meta strong{color:#161614}
html[data-theme="light"] .iron-meta em{color:rgba(22,22,20,.66)}
html[data-theme="light"] .spec{color:#8a5a1e;border-color:rgba(138,90,30,.4)}

html[data-theme="light"] .mt-map .leaflet-tile-pane{filter:saturate(.8) contrast(.96)}
/* service-map.js sets an inline `background:#12120d` on the map host, so only
   !important can repaint it for light mode. */
html[data-theme="light"] .mt-map,
html[data-theme="light"] .mt-map .leaflet-container{background:#e9e7e0!important}
html[data-theme="light"] .mt-map .leaflet-control-attribution{background:rgba(255,255,255,.8);color:#4a4a40}
html[data-theme="light"] .mt-map .leaflet-bar a{background:#fff;color:#161614;border-color:rgba(0,0,0,.14)}
html[data-theme="light"] .mt-pin{color:#161614;text-shadow:0 1px 3px rgba(255,255,255,.95)}

html[data-theme="light"] .site-header{background:rgba(243,242,238,.9);border-bottom-color:rgba(0,0,0,.09)}
/* The hero's overlaid copy stays light-on-dark in both themes, but the bands
   either side of the contained photo are page chrome, not hero — so they take
   the light page background here rather than staying dark. */
html[data-theme="light"] .hero{background:#f3f2ee}
html[data-theme="light"] .site-header .brand-name strong{color:#161614}
html[data-theme="light"] .site-header .brand-name em{color:#8a5a1e}
html[data-theme="light"] .site-header img{mix-blend-mode:normal;background:#131311;border-radius:9px}
html[data-theme="light"] .nav a{color:#3a3a30}
html[data-theme="light"] .nav a:hover{color:#161614}
html[data-theme="light"] .mobile-nav{background:rgba(243,242,238,.98);border-top-color:rgba(0,0,0,.09)}
html[data-theme="light"] .mobile-nav a,
html[data-theme="light"] .mobile-nav button{color:#3a3a30;border-bottom-color:rgba(0,0,0,.07)}
html[data-theme="light"] .hdr-cta{background:#161614}
html[data-theme="light"] .hdr-cta strong{color:#f3f2ee}
html[data-theme="light"] .hdr-cta em{color:#a2977c}
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .hamb{border-color:rgba(0,0,0,.14);color:#161614}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .rail-grid{grid-template-columns:repeat(2,1fr)}
  .rail-grid > div + div{border-left:0}
  .rail-grid > div{border-top:1px solid rgba(236,232,224,.1)}
}
/* 1.4.10 Reflow (AA). Grid items default to min-width:auto, so a child's
   min-content floors the column — the hero <select> sizes to its longest
   option and .stats' three columns hold the About grid wider than its
   container, pushing the page sideways at 320px. Plus two strings that cannot
   break: the green call button is nowrap and the email address is one long
   word, which overflow at 200% text (1.4.4). */
.hero-grid>*,.about-grid>*,.why-grid>*,.area-grid>*,.contact-grid>*,.sec-head>*{min-width:0}
.quote-card,.contact-form,.field{min-width:0}
.field input,.field select,.field textarea{width:100%;min-width:0;max-width:100%}
.btn-green{white-space:normal}
a[href^="mailto:"]{overflow-wrap:anywhere}
.foot-contact a,.contact-card .email a{overflow-wrap:anywhere;min-width:0}
.foot-contact,.storm-inner{min-width:0}

@media (max-width:940px){
  .hero-grid,.why-grid,.area-grid,.about-grid,.contact-grid,.sec-head{grid-template-columns:1fr}
  /* MOBILE HERO — deliberately a different model from desktop.
     A 1.76 landscape photo in a ~0.42 portrait viewport means cover must discard
     roughly three quarters of the width. There is no object-position that saves
     it, and no portrait crop contains the truck (it spans ~710px of 1184).
     So stop treating the photo as a picture to be read and treat it as ground,
     which is what every hero on this pattern does — martenpressurewashing.com
     runs background-size:cover, background-position:center and a flat
     --overlay-alpha:.4 over the top at every size.
     Desktop keeps the full uncropped photo with no scrim; only phones get this. */
  .hero-bg{object-position:50% 40%}   /* portrait photo: sky up top for the headline, truck below */
  .hero-scrim{
    display:block;position:absolute;inset:0;z-index:-1;
    /* 1.4.3: the old dip to .42 at 42% height landed on the lede and the
       checks, over the bright part of the portrait photo — measured 2.62 and
       2.44 against 4.5. Flattening the dip costs far less than darkening
       everything: top .52->.58, bottom .58->.60, middle .42->.58. */
    background:linear-gradient(180deg,rgba(15,15,12,.58) 0%,rgba(15,15,12,.58) 42%,rgba(15,15,12,.60) 100%);
  }
  /* The scrim carries legibility here, so the desktop text-shadow would only
     muddy it. */
  .hero-copy h1,.hero-copy .hero-lede,.hero-copy .hero-checks li{text-shadow:none}

  /* MOBILE OVERFLOW FIXES — the hero was pushing the whole document wider than
     the viewport on a 390px phone, which drags every section right along with
     it (one over-wide child widens the scroll box for the entire page). Three
     separate causes, all of them only visible below ~420px:
       1. clamp()'s 2.5rem floor on the h1 — "Gas. Diesel. Anything" does not
          fit in 350px of usable width at 40px/800. The floor now scales with vw.
       2. The hard <br> in the headline, which stops that line from wrapping at
          all. .br-wide hides it here so the headline breaks where it fits.
       3. .hero-lede's 46ch cap, which is wider than the viewport at this size.
     Fix the causes, not the symptom: do NOT paper over this with
     overflow-x:hidden on .page — that hides the next one instead of showing it. */
  .hero h1{font-size:clamp(2rem,8.4vw,4.1rem)}
  .br-wide{display:none}
  .hero-lede{max-width:none}
  .hero-checks{gap:8px 18px}
  .quote-card{max-width:none;justify-self:stretch}
  .sec-head{align-items:start;gap:14px}
  .steps{grid-template-columns:repeat(2,1fr);gap:32px 24px}
  .steps > li{padding-right:0}
  .nav{display:none}
  .hamb{display:inline-flex}
  .mobile-nav.open{display:flex}
  /* .nav carried the margin-left:auto that pushed the phone pill right; with the
     nav hidden the header row would otherwise overflow the viewport. */
  .hdr-inner{gap:12px}
  .hdr-cta{margin-left:auto;min-width:0}
}
@media (max-width:760px){
  .fab-call{display:inline-flex}
}
@media (max-width:720px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .contact-form{grid-template-columns:1fr}
  .rail-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .svc-grid,.steps{grid-template-columns:1fr}
}
/* Header row on small phones. Logo + wordmark + theme toggle + phone pill +
   hamburger stops fitting well before the old 430px cutoff — at 434px the
   hamburger was pushed 38px off-screen and the whole page scrolled sideways.
   Shed the wordmark and the pill's "FREE ESTIMATE" eyebrow here; the phone
   number is the part that has to survive. */
@media (max-width:600px){
  /* three stat columns squeeze to ~88px each at 320px */
  .stats{grid-template-columns:1fr}
  /* 1.4.12: the pill is flex:0 0 auto with a nowrap number, so under the
     letter-spacing override the header row pushed the hamburger off-screen. */
  .hdr-cta{min-width:0;flex-shrink:1}
  .hdr-cta span{min-width:0}
  .hdr-cta strong{white-space:normal;overflow-wrap:anywhere}
  .brand{min-width:0}
  .brand-name{display:none}
  .hdr-cta em{display:none}
  .hdr-cta{padding:9px 14px}
  .hdr-cta strong{margin-top:0}
}

/* ---------- form submission state (Formspree) ---------- */
/* The forms POST to Formspree over fetch so the visitor never leaves the page.
   Everything below is the feedback for that: a live status line, the honeypot,
   and the collapsed "sent" state. [hidden] needs !important because .field and
   .btn-submit both set display, which would otherwise win over it. */
[hidden]{display:none!important}
.form-status{
  grid-column:1/-1;margin:10px 0 0;font-size:.92rem;line-height:1.5;
  color:var(--ink);
}
.form-status.is-busy{opacity:.7}
.form-status.is-ok{color:var(--green);font-weight:600;font-size:1.05rem}
.form-status.is-error{color:#e8836a}
/* Honeypot: a real field to a bot, off-screen to a person. Not display:none —
   some bots skip hidden inputs, which is the opposite of what we want. */
.gotcha{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
form[data-sent]{display:block;text-align:center;padding-top:34px;padding-bottom:34px}
form[data-sent] .form-status{margin:0}