/* ============================================================================
   R1 . SITE SIGN — design system, extracted verbatim from the APPROVED
   reference build `design/directions/R1-sitesign/index.html` (2026-07-24).

   This is the real R1: a layout + component system, not a band-tinting layer.
   It defines its own grounds (bone / cream / warm / gun / near-black / orange),
   hard 0-blur offset shadows, an Oswald display face, and the component
   vocabulary the reference uses (.proj .stat .cert .step .srow .diff .field).

   TOKEN CLASHES with the live sheet — 5, all cosmetic:
       --ink   #131313 (ref)  vs #111111 (live)
       --cream #ece4d5 (ref)  vs #f4f1ea (live)
       --orange-deep #a5330f  vs #b8390f
       --paper #ffffff        vs #fff
   Reference values are authoritative for R1 surfaces, so this file MUST be
   scoped so it cannot repaint the other 93 legacy pages.
   ========================================================================== */

/* ============================================================
   D5  ·  STEEL-MAJOR  ·  DeHart Roofing
   COLOR-PRESENCE variant of D3-dual. Layout / copy / images / components /
   scripts are identical to D3 — only the gunmetal token VALUES and the
   SURFACES that use them changed.
   Color-blocked Makita-industrial. Orange #cf4214 = star.
   TWO dark grounds, two semantic jobs:
     WARM BITUMEN (--warm*) -> product / craft     -> SERVICES
     GUNMETAL     (--gun*)  -> process / technical -> HERO PANEL + PROCESS
   D4 CHANGE 1: gunmetal raised from ~207deg/23%/15% to ~203deg/46%/20% so it
   reads as a genuinely distinct COOL ground — bluer than the old teal-leaning
   steel, so it never slides back toward teal.
   D4 CHANGE 2: second, high-visibility placement — the HERO content panel.
   The two darks are NEVER adjacent. Ground sequence:
     nav(near-black) -> HERO PANEL(gun) -> spec strip(FULL ORANGE) ->
     services(WARM) -> orange rule -> differentiators(near-black) ->
     projects(cream) -> process(GUN) -> reviews(bone) -> CTA(orange) ->
     footer(near-black)
   Orange separates hero-gun from services-warm; cream + bone flank process-gun.
   Every color / size / spacing value comes from a token.
   TEXT RULE: light grounds -> ink. Colored + dark grounds -> WHITE
   (--on-color / --on-color-2). No ink text on orange anywhere.
   ============================================================ */
:root{
  /* ---- Orange (star) ---- */
  --orange:#cf4214; --orange-h:#b53811; --orange-deep:#a5330f;

  /* ---- Warm darks ---- */
  --near-black:#0e0e0e; --ink:#131313; --char:#1c1c1c; --warm-dark:#191310;

  /* ---- DUAL SECONDARY GROUNDS (D3 — both D2 grounds kept, each given a job) ---- */
  /* WARM BITUMEN · product / craft ground — SERVICES */
  --warm:#1c3a4c; --warm-2:#24485c; --warm-line:#3a6a84;
  /* GUNMETAL · process / technical ground — HERO PANEL + PROCESS.
     D4: turned UP to ~203deg hue / ~46% sat / ~20% L. Chroma and lightness
     raised so it reads as a clearly distinct COOL ground, while the hue is
     pushed BLUER than the old teal-leaning steel so it cannot drift to teal.
     White = 11.94:1, --on-color-2 = 8.59:1 on --gun (both clear AA). */
  --gun:#241a13; --gun-2:#33251a; --gun-line:#4a3728;

  /* ---- Warm neutrals (light grounds) ---- */
  --bone:#f4f1ea; --cream:#ece4d5; --stone:#ddd5c5; --paper:#ffffff;

  /* ---- Text on LIGHT grounds ---- */
  --line:#d8d4cb; --muted:#5a5650;

  /* ---- Text on COLORED / DARK grounds (white only) ---- */
  --on-color:#ffffff;
  --on-color-2:rgba(255,255,255,.82);   /* AA on near-black, warm 11.7:1, D4 gunmetal 8.59:1 */

  /* ---- Dark hairlines / rgba layers ---- */
  --dark-line:#2c2c2c; --dark-line-soft:#262626; --dark-line-hi:#3a3a3a;
  --hair-on-dark:rgba(255,255,255,.18);
  --scrim:rgba(14,14,14,.58);
  /* D4: hero content panel ground = --gun (28,58,76) at 92%. Alpha raised from
     .90 to .92 so less of the warm photo bleeds through and muddies the blue.
     Worst-case composite (white photo pixel) still gives white 11.13:1 and
     --on-color-2 8.08:1 — AA with headroom on every possible pixel. */
  --scrim-panel:rgba(28,58,76,.92);
  --scrim-solid:rgba(14,14,14,.92);
  --ring-focus:0 0 0 3px rgba(207,66,20,.28);
  --ring-error:0 0 0 3px rgba(165,51,15,.22);
  --sh-corner:-3px -3px 0 rgba(14,14,14,.4);

  /* ---- Type families ---- */
  --f-display:'Oswald', 'Arial Narrow', sans-serif;
  --f-body:'IBM Plex Sans', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Type scale ---- */
  --fs-nano:.625rem;       /* 10 */
  --fs-micro:.6875rem;     /* 11 */
  --fs-eyebrow:.75rem;     /* 12 */
  --fs-label:.8125rem;     /* 13 */
  --fs-small:.875rem;      /* 14 */
  --fs-body:1.0625rem;     /* 17 */
  --fs-body-lg:1.1875rem;  /* 19 */
  --fs-h4:1.25rem;         /* 20 */
  --fs-brand:1.35rem;      /* 21.6 */
  --fs-card-h:1.5rem;      /* 24 */
  --fs-h3:clamp(1.35rem,1rem + 1.6vw,1.75rem);
  --fs-h2:clamp(1.75rem,1.2rem + 2.6vw,2.6rem);
  --fs-stat:clamp(2.25rem,1.4rem + 3.6vw,3.4rem);
  --fs-rating:clamp(2.6rem,2rem + 2vw,3.25rem);
  --fs-step:clamp(2.5rem,1.6rem + 3.4vw,3.75rem);
  --fs-diff:clamp(1.6rem,1rem + 3vw,2.75rem);
  --fs-cta:clamp(2rem,1.2rem + 4vw,3.5rem);
  --fs-h1:clamp(2.5rem,1.3rem + 6vw,4.5rem);       /* oversized moment 1 */
  --fs-mega:clamp(2.15rem,1rem + 6.4vw,4.75rem);   /* oversized moment 2 */

  /* ---- Letter-spacing scale ---- */
  --ls-display:.005em; --ls-tight:.004em; --ls-head:.02em;
  --ls-nav:.08em; --ls-cap:.05em; --ls-btn:.1em;
  --ls-mono:.12em; --ls-wide:.14em; --ls-eyebrow:.18em; --ls-hero:.2em;

  /* ---- Spacing (8px grid + half-steps) ---- */
  --s0:2px; --s1:4px; --s1h:6px; --s2:8px; --s2h:10px; --s3:12px; --s3h:14px;
  --s4:16px; --s4h:20px; --s5:24px; --s5h:28px; --s6:32px; --s7:48px;
  --s8:64px; --s9:96px; --s10:128px;
  --band-pad:clamp(56px,7vw,104px);
  --band-pad-lg:clamp(72px,8.5vw,132px);
  --strip-pad:clamp(36px,4.5vw,60px);
  --pad-x:clamp(18px,4vw,40px);
  --pad-hero-top:clamp(40px,6vw,84px);
  --pad-hero-bot:clamp(48px,6vw,88px);
  --pad-panel:clamp(24px,3vw,40px);
  --pad-card:clamp(20px,3vw,30px);
  --feat-h:clamp(260px,32vw,420px);
  --media-max:420px;
  --gap-grid:clamp(18px,2.2vw,28px);
  --gap-wide:clamp(24px,3.5vw,48px);
  --wrap:1200px;
  --nav-h:68px;
  --btn-py:15px; --btn-px:22px;
  --field-py:12px; --field-px:13px;
  --plate-top:42px; --cert-top:38px;
  --thumb:104px;
  --tap:44px;
  --icon-sm:14px; --icon-arrow-w:20px; --icon-arrow-h:12px;
  --stars-w:150px; --stars-h:28px; --stars-w-sm:96px; --stars-h-sm:18px;
  --logo-h:34px;

  /* ---- Border widths ---- */
  --bw:2px; --bw-hair:1px; --bw-rule-md:3px; --bw-rule:4px; --bw-rule-lg:6px;

  /* ---- Hard offset shadows (0 blur) ---- */
  --sh-ink:6px 6px 0 var(--ink);
  --sh-ink-sm:4px 4px 0 var(--ink);
  --sh-ink-lg:8px 8px 0 var(--ink);
  --sh-orange:6px 6px 0 var(--orange);
  --sh-orange-lg:8px 8px 0 var(--orange);
  --sh-black:6px 6px 0 var(--near-black);
  --sh-black-sm:4px 4px 0 var(--near-black);
  --lift:translate(-4px,-4px);
  --lift-sm:translate(-2px,-2px);
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%}
body{
  font-family:var(--f-body); font-size:var(--fs-body); line-height:1.6;
  color:var(--ink); background:var(--bone);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4,p,ul,dl,dd,figure,blockquote{margin:0}
ul{list-style:none;padding:0}

/* ---- focus visibility (AA, visible on every ground) ---- */
:focus-visible{outline:var(--bw-rule-md) solid var(--orange);outline-offset:var(--s0)}
.band-orange a:focus-visible,.band-orange button:focus-visible,
.band-orange input:focus-visible,.rating a:focus-visible,
.proj-note a:focus-visible{outline-color:var(--near-black)}
/* orange only clears 3:1 comfortably on light + near-black grounds; on BOTH
   secondary grounds the ring switches to white (11.94:1 on D4 gunmetal,
   17:1 on warm) so the indicator always passes 1.4.11.
   D4: the HERO PANEL is now a gunmetal ground too — orange there measures only
   2.27–2.53:1, so its ring switches to white as well (10.74–11.94:1). */
.band-warm a:focus-visible,.band-warm button:focus-visible,
.band-warm-2 a:focus-visible,.band-warm-2 button:focus-visible,
.band-gun a:focus-visible,.band-gun button:focus-visible,
.band-gun-2 a:focus-visible,.band-gun-2 button:focus-visible,
.hero__panel a:focus-visible,.hero__panel button:focus-visible{outline-color:var(--on-color)}

.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--on-color);
  padding:var(--s3) var(--s4);z-index:200;font-family:var(--f-mono);font-size:var(--fs-label)}
.skip:focus{left:var(--s3);top:var(--s3)}

/* ---- shared helpers ---- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad-x)}
.band{padding-block:var(--band-pad)}
.band--lg{padding-block:var(--band-pad-lg)}
.mono{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-mono)}
.eyebrow{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);font-size:var(--fs-eyebrow);line-height:1.3}
.display{font-family:var(--f-display);font-weight:700;line-height:1.02;
  text-transform:uppercase;letter-spacing:var(--ls-display)}
.dot{color:var(--orange)}                                  /* orange period, display size only */
/* orange is too dim on both secondary grounds. D4: the hero panel joined them —
   orange there is 2.53:1, under even the 3:1 large-text floor — so it goes white. */
.band-warm .dot,.band-warm-2 .dot,
.band-gun .dot,.band-gun-2 .dot,
.hero__panel .dot{color:var(--on-color)}
.section-head{max-width:56ch;margin-bottom:var(--s7)}
.section-head .eyebrow{color:var(--orange-deep);margin-bottom:var(--s3);display:block}
.section-head h2{font-family:var(--f-display);font-weight:600;font-size:var(--fs-h2);
  line-height:1.04;text-transform:uppercase;letter-spacing:var(--ls-display)}
.lead{font-size:var(--fs-body-lg);color:var(--muted);margin-top:var(--s4);max-width:52ch}

/* eyebrow CHIP: on dark/colored grounds the eyebrow becomes a solid orange block
   with white text (white-on-orange = 4.73:1 AA) — orange as area, never as small text */
.band-dark .section-head .eyebrow,.band-warm .section-head .eyebrow,
.band-warm-2 .section-head .eyebrow,.band-gun .section-head .eyebrow,
.band-gun-2 .section-head .eyebrow,.certs__head .eyebrow,
.feat__aside .eyebrow,.hero__eyebrow{
  background:var(--orange);color:var(--on-color);display:inline-block;
  padding:var(--s1h) var(--s3);line-height:1.25}
.band-dark .lead,.band-warm .lead,.band-warm-2 .lead,
.band-gun .lead,.band-gun-2 .lead{color:var(--on-color-2)}
.band-dark .section-head h2,.band-warm .section-head h2,
.band-warm-2 .section-head h2,.band-gun .section-head h2,
.band-gun-2 .section-head h2{color:var(--on-color)}

/* section base colors */
.band-bone{background:var(--bone);color:var(--ink)}
.band-cream{background:var(--cream);color:var(--ink)}
.band-warm{background:var(--warm);color:var(--on-color)}       /* craft ground */
.band-warm-2{background:var(--warm-2);color:var(--on-color)}
.band-gun{background:var(--gun);color:var(--on-color)}         /* technical ground */
.band-gun-2{background:var(--gun-2);color:var(--on-color)}
.band-dark{background:var(--near-black);color:var(--on-color)}
.band-orange{background:var(--orange);color:var(--on-color)}
.rule-orange{height:var(--bw-rule-lg);background:var(--orange)}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-btn);font-size:var(--fs-label);
  padding:var(--btn-py) var(--btn-px);border:var(--bw) solid transparent;
  line-height:1;white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease}
.btn--primary{background:var(--orange);color:var(--on-color);border-color:var(--orange);
  box-shadow:var(--sh-ink-sm)}
.btn--primary:hover{background:var(--orange-h);border-color:var(--orange-h);
  transform:var(--lift-sm);box-shadow:var(--sh-ink)}
.btn--primary:active{transform:translate(0,0);box-shadow:var(--s0) var(--s0) 0 var(--ink)}
.btn--ink{background:var(--near-black);color:var(--on-color);border-color:var(--near-black);
  box-shadow:var(--sh-black-sm)}
.btn--ink:hover{background:var(--ink);transform:var(--lift-sm);box-shadow:var(--sh-black)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--on-color)}
.band-dark .btn--ghost,.band-warm .btn--ghost,.band-warm-2 .btn--ghost,
.band-gun .btn--ghost,.band-gun-2 .btn--ghost,
.band-orange .btn--ghost,.hero .btn--ghost{color:var(--on-color);border-color:var(--on-color)}
.band-dark .btn--ghost:hover,.band-warm .btn--ghost:hover,.band-warm-2 .btn--ghost:hover,
.band-gun .btn--ghost:hover,.band-gun-2 .btn--ghost:hover,
.band-orange .btn--ghost:hover,.hero .btn--ghost:hover{background:var(--on-color);color:var(--ink)}
.band-orange .btn--ink{box-shadow:var(--s1) var(--s1) 0 var(--warm-dark)}

/* inline SVG star (no glyphs anywhere) */
.star{width:1em;height:1em;display:inline-block;vertical-align:-.12em;flex:none}
.arrow{width:var(--icon-arrow-w);height:var(--icon-arrow-h);flex:none}

/* ============ NAV (near-black) ============ */
.nav{position:sticky;top:0;z-index:100;background:var(--near-black);color:var(--on-color);
  border-bottom:var(--bw) solid var(--char)}
.nav__in{display:flex;align-items:center;gap:var(--s5);
  min-height:var(--nav-h);max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad-x)}
.brand{display:flex;align-items:baseline;gap:var(--s3);margin-right:auto}
.brand__mark{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--ls-head);font-size:var(--fs-brand);color:var(--on-color);line-height:1}
.brand__est{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-micro);
  letter-spacing:var(--ls-wide);color:var(--on-color-2)}
.nav__links{display:flex;align-items:center;gap:var(--s6)}
.nav__links a{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-nav);font-size:var(--fs-label);color:var(--on-color-2);
  padding-block:var(--s1h);border-bottom:var(--bw) solid transparent}
.nav__links a:hover{color:var(--on-color);border-bottom-color:var(--orange)}
.nav__cta{display:flex;align-items:center;gap:var(--s4)}
.nav__phone{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);
  letter-spacing:var(--ls-tight);color:var(--on-color)}
.nav__phone:hover{border-bottom:var(--bw) solid var(--orange)}
.nav__toggle{display:none;width:var(--tap);height:var(--tap);
  border:var(--bw) solid var(--dark-line-hi);padding:0;align-items:center;
  justify-content:center;flex-direction:column;gap:var(--s1h)}
.nav__toggle span{display:block;width:var(--s4h);height:var(--bw);background:var(--on-color)}

@media (max-width:920px){
  .nav__links{position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--near-black);
    border-bottom:var(--bw) solid var(--char);padding:var(--s3) var(--pad-x) var(--s5);
    display:none}
  .nav__links.open{display:flex}
  .nav__links a{padding-block:var(--s4);border-bottom:var(--bw-hair) solid var(--dark-line-soft)}
  .nav__phone{display:none}
  .nav__toggle{display:flex}
}
@media (max-width:480px){
  .nav__cta .btn{padding:var(--s3) var(--s3h);font-size:var(--fs-eyebrow)}
  .brand__est{display:none}
}

/* ============ HERO ============ */
.hero{position:relative;background:var(--near-black);color:var(--on-color);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;z-index:1;background:var(--scrim)}
.hero__in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  padding:var(--pad-hero-top) var(--pad-x) var(--pad-hero-bot);
  display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gap-wide);align-items:center}
/* D4 PLACEMENT 2 — the hero content panel is now the GUNMETAL ground.
   Still a solid-reading panel behind the headline => AA over any photo pixel.
   The 6px orange border-left keeps orange as the star and buffers the cool
   panel from the warm photograph on its leading edge. */
.hero__panel{background:var(--scrim-panel);border-left:var(--bw-rule-lg) solid var(--orange);
  padding:var(--pad-panel)}
.hero__eyebrow{letter-spacing:var(--ls-hero);margin-bottom:var(--s5)}
.hero h1{font-family:var(--f-display);font-weight:700;font-size:var(--fs-h1);
  line-height:.98;text-transform:uppercase;letter-spacing:var(--ls-tight);color:var(--on-color);
  text-wrap:balance;margin-bottom:var(--s5)}
.hero__sub{font-size:var(--fs-body-lg);color:var(--on-color-2);max-width:46ch;margin-bottom:var(--s6)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s4);margin-bottom:var(--s7)}
/* D4: on the gunmetal panel the neutral --dark-line rule measures 1.17:1 and
   reads as a grey smudge; --gun-line (2.03:1) keeps the panel palette coherent */
.hero__specs{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  padding-top:var(--s5);border-top:var(--bw) solid var(--gun-line)}
.hero__spec{display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);
  letter-spacing:var(--ls-cap);color:var(--on-color-2)}
.hero__spec .star{color:var(--on-color)}
.hero__spec b{color:var(--on-color);font-weight:500}

/* FIG caption plate */
.figcap{position:absolute;left:var(--pad-x);bottom:var(--s4);z-index:2;
  background:var(--scrim-solid);border:var(--bw) solid var(--char);
  border-left:var(--bw-rule) solid var(--orange);padding:var(--s2) var(--s3h);
  max-width:calc(100% - var(--s9))}
.figcap span{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-micro);
  letter-spacing:var(--ls-btn);text-transform:uppercase;color:var(--on-color-2)}
.figcap b{color:var(--on-color);font-weight:500}

/* ============ FORM CARD (white ground, NEUTRAL at rest) ============ */
.formcard{background:var(--paper);color:var(--ink);border:var(--bw) solid var(--ink);
  box-shadow:var(--sh-orange);padding:var(--pad-card)}
.formcard__head{border-bottom:var(--bw) solid var(--ink);
  padding-bottom:var(--s4);margin-bottom:var(--s5)}
.formcard__kicker{color:var(--orange-deep);display:block;margin-bottom:var(--s2)}
.formcard h2{font-family:var(--f-display);font-weight:600;font-size:var(--fs-card-h);
  text-transform:uppercase;line-height:1.05;letter-spacing:var(--ls-head)}
.formcard__note{font-size:var(--fs-small);color:var(--muted);margin-top:var(--s2)}
.field{margin-bottom:var(--s4)}
.field label{display:block;font-family:var(--f-mono);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--ls-btn);font-size:var(--fs-eyebrow);
  color:var(--ink);margin-bottom:var(--s1h)}
.field .req{color:var(--orange-deep)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:var(--fs-body);color:var(--ink);
  background:var(--paper);border:var(--bw) solid var(--ink);
  padding:var(--field-py) var(--field-px);line-height:1.3;
  transition:border-color .12s ease, box-shadow .12s ease}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field select{appearance:none;background-image:none}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--orange)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:none;border-color:var(--orange);box-shadow:var(--ring-focus)}
.field input:disabled,.field select:disabled{
  background:var(--bone);border-color:var(--line);color:var(--muted);cursor:not-allowed}
/* error state — defined in CSS, NEVER applied at load (JS adds .field--error on invalid submit) */
.field--error input,.field--error select,.field--error textarea{
  border-color:var(--orange-deep);box-shadow:var(--ring-error)}
.field__err{display:none;align-items:center;gap:var(--s1h);margin-top:var(--s1h);
  font-family:var(--f-mono);font-weight:500;font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-tight);color:var(--orange-deep);text-transform:uppercase}
.field--error .field__err{display:flex}
.field__err svg{width:var(--icon-sm);height:var(--icon-sm);flex:none}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.formcard .btn--primary{width:100%;justify-content:center;padding:var(--s4);font-size:var(--fs-label)}
.formcard .btn--primary:disabled{background:var(--muted);border-color:var(--muted);
  box-shadow:none;transform:none;cursor:default}
.formcard__fine{font-size:var(--fs-eyebrow);color:var(--muted);margin-top:var(--s4);
  font-family:var(--f-mono);letter-spacing:var(--ls-tight);text-transform:uppercase;line-height:1.5}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:var(--s7)}
  .figcap{display:none}
}
@media (max-width:440px){.form-row{grid-template-columns:1fr}}

/* ============ SPEC PLATE (reusable) ============ */
.plate{position:relative;border:var(--bw) solid var(--ink);background:var(--paper);
  padding:var(--plate-top) var(--s5) var(--s5)}
.plate__tab{position:absolute;top:calc(var(--bw) * -1);left:calc(var(--bw) * -1);
  background:var(--orange);color:var(--on-color);
  font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-wide);font-size:var(--fs-micro);padding:var(--s1h) var(--s3);line-height:1}
.plate__title{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-h4);letter-spacing:var(--ls-head);line-height:1.05;margin-bottom:var(--s4)}
.plate__rows{display:flex;flex-direction:column}
.prow{display:flex;justify-content:space-between;gap:var(--s5);
  padding:var(--s2h) 0;border-top:var(--bw-hair) solid var(--line)}
.prow:first-child{border-top:0}
.prow dt{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-btn);font-size:var(--fs-eyebrow);color:var(--muted);flex:none}
.prow dd{font-family:var(--f-body);font-weight:500;font-size:var(--fs-small);
  color:var(--ink);text-align:right}
/* dark variant */
.plate--dark{background:transparent;border-color:var(--warm-line)}
.plate--dark .plate__title{color:var(--on-color)}
.plate--dark .prow{border-top-color:var(--hair-on-dark)}
.plate--dark .prow dt{color:var(--on-color-2)}
.plate--dark .prow dd{color:var(--on-color)}

/* ============ SPEC STRIP (full orange) ============ */
.strip{padding-block:var(--strip-pad)}
.strip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--bw);
  background:var(--warm-dark);border:var(--bw) solid var(--warm-dark)}
.stat{background:var(--orange);padding:var(--s5h) var(--s5);display:flex;
  flex-direction:column;gap:var(--s2)}
.stat__num{font-family:var(--f-display);font-weight:700;font-size:var(--fs-stat);
  line-height:.9;color:var(--on-color);display:flex;align-items:center;gap:var(--s2)}
.stat__num .star{color:var(--on-color);width:.7em;height:.7em}
.stat__label{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-mono);font-size:var(--fs-eyebrow);color:var(--on-color)}
@media (max-width:720px){.strip__grid{grid-template-columns:1fr 1fr}}

/* ============ SERVICES (full WARM BITUMEN — the large craft ground) ============ */
.svc-head{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--gap-wide);
  align-items:end;margin-bottom:var(--s8)}
.svc-head .section-head{margin-bottom:0}
.svc-index{border-top:var(--bw) solid var(--warm-line)}
.irow{display:flex;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) 0;border-bottom:var(--bw-hair) solid var(--warm-line)}
.irow dt{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-btn);font-size:var(--fs-eyebrow);color:var(--on-color-2)}
.irow dd{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-cap);font-size:var(--fs-eyebrow);color:var(--on-color);text-align:right}

/* --- 1. FEATURED service (wide photo + spec plate) --- */
.feat{display:grid;grid-template-columns:1.25fr .95fr;gap:var(--gap-wide);
  align-items:stretch;margin-bottom:var(--gap-grid)}
.feat__media{position:relative;border:var(--bw) solid var(--warm-line);
  min-height:var(--feat-h);background:var(--warm-2)}
.feat__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.feat__flag{position:absolute;left:calc(var(--bw) * -1);top:var(--s4h);z-index:2;
  background:var(--orange);color:var(--on-color);
  font-family:var(--f-mono);font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-mono);
  font-size:var(--fs-label);padding:var(--s2) var(--s4);box-shadow:var(--sh-black)}
.feat__aside{display:flex;flex-direction:column;justify-content:center;gap:var(--s5)}
.feat__aside h3{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-h2);line-height:1.02;letter-spacing:var(--ls-display);
  color:var(--on-color);margin-top:var(--s3)}
.feat__aside p{color:var(--on-color-2);font-size:var(--fs-body);max-width:44ch}

/* --- 2. TWO medium cards --- */
.svc-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-grid);
  margin-bottom:var(--s7)}
.svc{background:var(--warm-2);border:var(--bw) solid var(--warm-line);
  display:flex;flex-direction:column;
  transition:transform .14s ease, box-shadow .14s ease}
.svc:hover,.svc:focus-within{transform:var(--lift);box-shadow:var(--sh-orange-lg)}
.svc__img{aspect-ratio:16/9;overflow:hidden;border-bottom:var(--bw) solid var(--warm-line)}
.svc__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.svc:hover .svc__img img{transform:scale(1.04)}
.svc__body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.svc__idx{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-wide);color:var(--on-color-2)}
.svc__name{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-h4);letter-spacing:var(--ls-head);line-height:1.05;color:var(--on-color)}
.svc__name a{display:inline-flex;align-items:center;gap:var(--s3)}
.svc__name svg{width:var(--icon-arrow-w);height:var(--icon-arrow-h);flex:none;opacity:.6}
.svc:hover .svc__name svg{opacity:1}
.svc__spec{font-family:var(--f-body);font-size:var(--fs-small);color:var(--on-color-2)}

/* --- 3. THREE compact hairline rows --- */
.svc-rows{border-top:var(--bw) solid var(--warm-line);margin-bottom:var(--s7)}
.srow{border-bottom:var(--bw-hair) solid var(--warm-line)}
.srow a{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.5fr) auto;
  gap:var(--s5);align-items:center;padding:var(--s5) var(--s4);
  border-left:var(--bw-rule) solid transparent;
  transition:border-color .14s ease, background-color .14s ease}
.srow a:hover{border-left-color:var(--orange);background:var(--warm-2)}
.srow__code{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-wide);font-size:var(--fs-eyebrow);color:var(--on-color-2)}
.srow__name{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-h4);letter-spacing:var(--ls-head);line-height:1.05;color:var(--on-color)}
.srow__spec{font-size:var(--fs-small);color:var(--on-color-2)}
.srow svg{width:var(--icon-arrow-w);height:var(--icon-arrow-h);flex:none;color:var(--on-color)}

/* --- ONE section-level CTA (replaces the six repeated card CTAs) --- */
.svc-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s5);border:var(--bw) solid var(--warm-line);padding:var(--s6) var(--s5)}
.svc-cta__txt{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-h3);line-height:1.05;letter-spacing:var(--ls-head);
  color:var(--on-color);max-width:24ch}
.svc-cta__act{display:flex;flex-wrap:wrap;gap:var(--s4)}
@media (max-width:900px){
  .svc-head{grid-template-columns:1fr;align-items:start}
  .feat{grid-template-columns:1fr}
  .svc-pair{grid-template-columns:1fr}
  .srow a{grid-template-columns:auto minmax(0,1fr);gap:var(--s3) var(--s4)}
  .srow__spec{grid-column:1 / -1}
  .srow svg{display:none}
}

/* ============ DIFFERENTIATORS (near-black) — oversized moment 2 ============ */
.diff__top{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap-wide);
  align-items:center;margin-bottom:var(--s9)}
.diff h2.mega{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:var(--fs-mega);line-height:.94;letter-spacing:var(--ls-tight);
  color:var(--on-color);margin-bottom:var(--s6)}
.diff__lines{display:flex;flex-direction:column;gap:var(--s3)}
.diff__line{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:var(--fs-diff);line-height:1;letter-spacing:var(--ls-tight);color:var(--on-color-2)}
.diff__line em{font-style:normal;color:var(--orange)}
.diff__media{border:var(--bw) solid var(--char);border-left:var(--bw-rule) solid var(--orange)}
.diff__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.diff__body{max-width:52ch;color:var(--on-color-2);font-size:var(--fs-body-lg)}
.diff__body strong{color:var(--on-color);font-weight:600}

.certs{margin-top:var(--s8)}
.certs__head{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding-bottom:var(--s4);margin-bottom:var(--s6);border-bottom:var(--bw) solid var(--char)}
.certs__head h3{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-h3);letter-spacing:var(--ls-head);color:var(--on-color)}
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.cert{position:relative;border:var(--bw) solid var(--warm-line);
  padding:var(--cert-top) var(--s4) var(--s4);background:var(--warm-dark)}
.cert__tab{position:absolute;top:calc(var(--bw) * -1);left:calc(var(--bw) * -1);
  background:var(--orange);color:var(--on-color);
  font-family:var(--f-mono);font-weight:500;letter-spacing:var(--ls-mono);
  font-size:var(--fs-nano);padding:var(--s1) var(--s2h);line-height:1}
.cert__name{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-body);line-height:1.08;letter-spacing:var(--ls-head);
  color:var(--on-color);margin-bottom:var(--s2)}
.cert__desc{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-cap);font-size:var(--fs-micro);color:var(--on-color-2);line-height:1.5}
@media (max-width:900px){.diff__top{grid-template-columns:1fr}
  .diff__media{max-width:var(--media-max)}.cert-grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.cert-grid{grid-template-columns:1fr}}

/* ============ PROJECTS (cream MOSAIC — mixed tile sizes) ============ */
.proj-mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap-grid)}
.proj{border:var(--bw) solid var(--ink);background:var(--paper)}
.proj__img{overflow:hidden;border-bottom:var(--bw) solid var(--ink);background:var(--stone)}
.proj__img img{width:100%;height:100%;object-fit:cover}
.proj__cap{padding:var(--s3) var(--s4);display:flex;align-items:center;gap:var(--s3)}
.proj__no{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-micro);
  letter-spacing:var(--ls-btn);color:var(--on-color);background:var(--orange);
  padding:var(--s1) var(--s1h);line-height:1;flex:none}
.proj__meta{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-cap);font-size:var(--fs-eyebrow);color:var(--muted);line-height:1.4}
/* tile A — one large feature */
.proj--feature{grid-column:span 7}
.proj--feature .proj__img{aspect-ratio:3/2}
.proj--feature .proj__cap{padding:var(--s4) var(--s5);border-top:var(--bw-rule) solid var(--orange)}
/* tile B — three compact thumb rows, stacked */
.proj-stack{grid-column:span 5;display:grid;gap:var(--gap-grid);align-content:space-between}
.proj--row{display:grid;grid-template-columns:var(--thumb) minmax(0,1fr);align-items:center}
.proj--row .proj__img{aspect-ratio:1;border-bottom:0;border-right:var(--bw) solid var(--ink);height:100%}
/* tiles C/D — two unequal mediums */
.proj--wide{grid-column:span 5}
.proj--wide .proj__img{aspect-ratio:16/9}
.proj--mid{grid-column:span 4}
.proj--mid .proj__img{aspect-ratio:4/3}
/* tile E — solid ORANGE promise plate (pushes color into the light band) */
.proj-note{grid-column:span 3;background:var(--orange);color:var(--on-color);
  border:var(--bw) solid var(--warm-dark);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s3)}
.proj-note .eyebrow{color:var(--on-color)}
.proj-note__big{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:var(--fs-h3);line-height:1;letter-spacing:var(--ls-tight);color:var(--on-color)}
.proj-note p{font-size:var(--fs-small);color:var(--on-color)}
.proj-note__link{margin-top:auto;font-family:var(--f-mono);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--ls-btn);font-size:var(--fs-eyebrow);
  color:var(--on-color);display:inline-flex;align-items:center;gap:var(--s2);
  border-bottom:var(--bw) solid var(--on-color);padding-bottom:var(--s1);align-self:flex-start}
.proj-note__link:hover{border-bottom-color:var(--near-black)}
@media (max-width:900px){
  .proj--feature,.proj-stack,.proj--wide,.proj--mid,.proj-note{grid-column:1 / -1}
}
@media (max-width:400px){
  .proj--row{grid-template-columns:1fr}
  .proj--row .proj__img{aspect-ratio:16/9;border-right:0;border-bottom:var(--bw) solid var(--ink)}
}

/* ============ PROCESS (GUNMETAL — the technical ground) ============ */
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{position:relative;padding:var(--s6) var(--s5) var(--s5);
  border-top:var(--bw-rule-md) solid var(--orange)}
.step + .step{border-left:var(--bw-hair) solid var(--gun-line)}
.step__code{display:inline-block;font-family:var(--f-mono);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--ls-wide);font-size:var(--fs-eyebrow);
  color:var(--on-color);background:var(--orange);padding:var(--s1) var(--s2);
  line-height:1.3;margin-bottom:var(--s3)}
.step__num{font-family:var(--f-display);font-weight:700;font-size:var(--fs-step);
  line-height:.85;color:var(--on-color);margin-bottom:var(--s4)}
.step__title{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-h4);letter-spacing:var(--ls-head);color:var(--on-color);margin-bottom:var(--s2)}
.step__desc{font-size:var(--fs-small);color:var(--on-color-2);max-width:26ch}
@media (max-width:820px){.proc-grid{grid-template-columns:1fr 1fr}
  .step + .step{border-left:0}.step:nth-child(even){border-left:var(--bw-hair) solid var(--gun-line)}}
@media (max-width:460px){.proc-grid{grid-template-columns:1fr}
  .step:nth-child(even){border-left:0}}

/* ============ TESTIMONIALS (bone) ============ */
.rev-top{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--gap-wide);
  align-items:end;margin-bottom:var(--s7)}
.rating{position:relative;border:var(--bw) solid var(--ink);background:var(--orange);
  color:var(--on-color);padding:var(--s7) var(--s5) var(--s5);box-shadow:var(--sh-ink-sm)}
.rating__tab{position:absolute;top:calc(var(--bw) * -1);left:calc(var(--bw) * -1);
  background:var(--near-black);color:var(--on-color);
  font-family:var(--f-mono);font-weight:500;letter-spacing:var(--ls-mono);
  font-size:var(--fs-nano);padding:var(--s1) var(--s2h);line-height:1}
.rating__score{display:flex;align-items:baseline;gap:var(--s3)}
.rating__num{font-family:var(--f-display);font-weight:700;font-size:var(--fs-rating);
  line-height:.85;color:var(--on-color)}
.rating__of{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);color:var(--on-color)}
.rating__stars{color:var(--on-color);width:var(--stars-w);height:var(--stars-h);margin:var(--s3) 0}
.rating__count{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-nav);font-size:var(--fs-eyebrow);color:var(--on-color)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.rev{background:var(--paper);border:var(--bw) solid var(--ink);
  border-top:var(--bw-rule) solid var(--orange);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.rev__stars{color:var(--orange-deep);width:var(--stars-w-sm);height:var(--stars-h-sm)}
.rev__quote{font-size:var(--fs-body);color:var(--ink);line-height:1.5}
.rev__who{margin-top:auto;font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-cap);font-size:var(--fs-eyebrow);color:var(--muted)}
.rev__who b{color:var(--ink);font-weight:500}
@media (max-width:900px){.rev-top{grid-template-columns:1fr}.rev-grid{grid-template-columns:1fr}}

/* ============ FINAL CTA (full orange) ============ */
.final{text-align:center}
.final .eyebrow{color:var(--on-color);letter-spacing:var(--ls-hero);display:block;margin-bottom:var(--s4)}
.final h2{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:var(--fs-cta);line-height:1;letter-spacing:var(--ls-tight);
  color:var(--on-color);max-width:18ch;margin:0 auto var(--s5)}
.final p{color:var(--on-color);font-size:var(--fs-body-lg);max-width:50ch;margin:0 auto var(--s7)}
.final__actions{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:center}
.final__bar{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bw);
  background:var(--warm-dark);border:var(--bw) solid var(--warm-dark);
  margin-top:var(--s8);text-align:left}
.fcell{background:var(--near-black);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s1)}
.fcell__k{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-wide);font-size:var(--fs-eyebrow);color:var(--on-color-2)}
.fcell__v{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);
  letter-spacing:var(--ls-cap);color:var(--on-color)}
a.fcell__v:hover{border-bottom:var(--bw) solid var(--orange)}
.final__fine{margin-top:var(--s6);font-family:var(--f-mono);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--ls-cap);font-size:var(--fs-eyebrow);
  color:var(--on-color);line-height:1.6}
@media (max-width:640px){.final__bar{grid-template-columns:1fr}}

/* ============ FOOTER (near-black) ============ */
.foot{background:var(--near-black);color:var(--on-color-2);padding-block:var(--s8) var(--s6)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:var(--s7)}
.foot__logo{height:var(--logo-h);width:auto;margin-bottom:var(--s4)}
.foot__brandline{font-size:var(--fs-small);color:var(--on-color-2);max-width:34ch;line-height:1.6}
.foot h4{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-mono);font-size:var(--fs-eyebrow);color:var(--on-color);
  border-top:var(--bw-rule) solid var(--orange);padding-top:var(--s3);margin-bottom:var(--s4)}
.foot ul li{margin-bottom:var(--s3)}
.foot a:hover{color:var(--on-color)}
.foot__nap{font-style:normal;font-size:var(--fs-small);line-height:1.8;color:var(--on-color-2)}
.foot__nap b{color:var(--on-color);font-weight:500}
.foot__bar{max-width:var(--wrap);margin:var(--s8) auto 0;
  padding:var(--s5) var(--pad-x) 0;border-top:var(--bw-hair) solid var(--char);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  justify-content:space-between;align-items:center}
.foot__bar span{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-nav);font-size:var(--fs-eyebrow);color:var(--on-color-2)}
/* on orange, muted white (.82) drops to 3.65:1 — this sits on orange so it stays pure white */
.foot__bar span.foot__lic{background:var(--orange);color:var(--on-color);padding:var(--s1h) var(--s3)}
@media (max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}

/* ============ FIXED CORNER LABEL ============ */
.corner-label{position:fixed;right:0;bottom:0;z-index:300;background:var(--orange);
  color:var(--on-color);font-family:var(--f-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-mono);font-size:var(--fs-nano);padding:var(--s1h) var(--s3);
  pointer-events:none;box-shadow:var(--sh-corner)}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .svc:hover .svc__img img{transform:none}
}

/* OWNER RULE 2026-07-23: NO black/near-black anywhere inside orange sections.
   Structure comes from WHITE dividers + DEEP-ORANGE fills only. Tokens only. */
.band-orange .strip__grid{background:var(--on-color);border-color:var(--on-color)}
.band-orange .final__bar{background:var(--on-color);border-color:var(--on-color)}
.band-orange .fcell{background:var(--orange-deep)}
.band-orange .btn--ink{background:var(--on-color);color:var(--orange-deep);border-color:var(--on-color);box-shadow:var(--s1) var(--s1) 0 var(--orange-deep)}
.band-orange .btn--ink:hover{background:var(--bone);color:var(--orange-deep);border-color:var(--bone);box-shadow:var(--s1) var(--s1) 0 var(--orange-deep)}
.band-orange .btn--ghost:hover{background:var(--on-color);color:var(--orange-deep);border-color:var(--on-color)}

/* OWNER RULE 2026-07-23: NO blue on the hero — it was blocking the photo.
   Solid steel slab -> light neutral veil so the roof photo reads through. */
:root{--hero-veil:rgba(14,14,14,.38);--hero-veil-line:rgba(255,255,255,.22)}
.hero__panel{background:var(--hero-veil);border-color:var(--hero-veil-line)}

/* Real DeHart logo asset in the nav (replaces the text wordmark). */
.brand__logo{height:34px;width:auto;display:block;flex:none}
@media (max-width:640px){.brand__logo{height:28px}}

/* OWNER 2026-07-23: nav bar ORANGE + primary CTA BLUE.
   Nav is now an orange surface, so the no-black rule applies to it:
   black shadow -> deep orange, dark toggle border -> white,
   .82 white links -> pure white (.82 = 3.65:1, fails AA on orange). */
.nav{background:var(--orange);border-bottom-color:var(--on-color)}
.nav a{color:var(--on-color)}
.nav__toggle{border-color:var(--on-color)}
.nav a:focus-visible,.nav button:focus-visible{outline-color:var(--on-color)}

/* Logo bigger + centered in the nav bar: links left | logo centre | phone right */
.nav__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav__links{grid-column:1;grid-row:1;justify-self:start}
.brand{grid-column:2;grid-row:1;justify-self:center;margin-right:0}
.nav__cta{grid-column:3;grid-row:1;justify-self:end}
.brand__logo{height:48px}
@media (max-width:640px){.brand__logo{height:36px}}

/* Two-tier header: deep-orange utility strip + main orange bar.
   Logo given real breathing room; links trimmed to 3; phone is a weighted call block. */
:root{--rule-on-color:rgba(255,255,255,.22)}
.nav__util{background:var(--orange-deep);border-bottom:1px solid var(--rule-on-color)}
.nav__util-in{max-width:var(--wrap);margin:0 auto;padding:var(--s2) var(--s6);display:flex;gap:var(--s6);align-items:center;justify-content:center;flex-wrap:wrap}
.util__item{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-micro);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--on-color);white-space:nowrap}
.nav__in{padding-top:var(--s5);padding-bottom:var(--s5);column-gap:var(--s7)}
.brand{padding:0 var(--s5)}
.brand__logo{height:56px}
.nav__phone{display:flex;align-items:center;justify-content:flex-end;line-height:1;text-decoration:none}
.nav__phone-v{font-family:var(--f-display);font-weight:600;font-size:var(--fs-h4);letter-spacing:var(--ls-display);color:var(--on-color)}
@media (max-width:920px){.nav__util-in{gap:var(--s4)}.util__item:nth-child(2){display:none}}
@media (max-width:640px){
.brand__logo{height:40px}
.nav__in{padding-top:var(--s4);padding-bottom:var(--s4);column-gap:var(--s4)}
.nav__util-in{padding:var(--s1) var(--s4);gap:var(--s3)}
.util__item{font-size:var(--fs-nano)}
.util__item:nth-child(3){display:none}
.nav__phone-v{font-size:var(--fs-body)}
/* mobile: promote toggle + phone to grid items so it reads toggle | logo | phone */
.nav__cta{display:contents}
.nav__toggle{grid-column:1;grid-row:1;justify-self:start}
.nav__phone{grid-column:3;grid-row:1;justify-self:end}
}


/* R1 · SITE SIGN — Maximum section colour-blocking — every band its own saturated ground */

/* ============================================================
   R1 — SITE SIGN.  Maximum section colour-blocking.
   Every band is its own saturated ground, edge to edge, like
   highway construction signage. This is the direct answer to
   "lack of colour accents or section colouring".
   ============================================================ */
:root{
  --warm:#14375e; --warm-2:#1b4778; --warm-line:#2f6ba6;   /* cobalt */
  --gun:#7a2f16;  --gun-2:#8f3a1d;  --gun-line:#b0522f;    /* burnt clay */
  --cream:#e6edf3;                                          /* cool tint */
  --bone:#f2e9d8;                                           /* warm tint */
  --bw-rule-lg:6px;
}
/* every ground different, and none of them timid */
.band-bone{background:var(--bone);color:var(--ink)}
.band-cream{background:var(--cream);color:var(--ink)}
.band-warm{background:var(--warm);color:var(--on-color)}
.band-gun{background:var(--gun);color:var(--on-color)}
.band-dark{background:var(--near-black);color:var(--on-color)}
/* thick orange rule between every band so the blocking reads as deliberate */
.band + .band{border-top:6px solid var(--orange)}
.plate,.proj,.rev{border-width:3px}

/* ==== BEGIN R1 NAV DROPDOWN (_scripts/add-r1-nav-dropdown.py) ==== */
/* Services dropdown. Shared nav chrome, so it belongs in the system sheet —
   it was inline on the homepage only, which left it unstyled everywhere else. */
.nav__dd{position:relative;display:inline-block}
.nav__dd-trigger{display:inline-flex;align-items:center;gap:6px}
.nav__dd-caret{font-size:.7em;opacity:.75;transition:transform .15s}
.nav__dd:hover .nav__dd-caret,
.nav__dd:focus-within .nav__dd-caret{transform:rotate(180deg)}
.nav__dd-menu{position:absolute;top:calc(100% + 12px);left:-14px;min-width:266px;
  background:var(--near-black);border:var(--bw) solid var(--ink);
  box-shadow:var(--sh-black);padding:6px 0;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;z-index:500}
.nav__dd:hover .nav__dd-menu,
.nav__dd:focus-within .nav__dd-menu{opacity:1;visibility:visible;transform:none}
.nav__dd-menu a{display:block;padding:10px 18px;font-family:var(--f-mono);
  font-weight:500;font-size:var(--fs-micro);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--on-color-2);text-decoration:none;
  white-space:nowrap}
.nav__dd-menu a:hover,
.nav__dd-menu a:focus{background:var(--orange);color:var(--on-color)}
/* AMBER, not brand orange: #cf4214 on --near-black is 4.08:1 (AA FAIL),
   #e47410 is 6.26:1. */
.nav__dd-all a{border-top:var(--bw-hair) solid var(--hair-on-dark);color:#e47410}
@media (max-width:900px){
  .nav__dd,.nav__dd-menu{display:block;position:static}
  .nav__dd-menu{opacity:1;visibility:visible;transform:none;border:none;
    box-shadow:none;min-width:0;padding:0 0 0 var(--s4)}
  .nav__dd-caret{display:none}
}
/* ==== END R1 NAV DROPDOWN ==== */

/* ==== BEGIN R1 SCROLL MARGIN (_scripts/add-r1-scroll-margin.py) ==== */
/* Anchor targets clear the sticky nav (141px desktop / 103px mobile, measured). */
[id]{scroll-margin-top:165px}
@media (max-width:900px){
  [id]{scroll-margin-top:124px}
}
/* ==== END R1 SCROLL MARGIN ==== */

/* ==== BEGIN R1 BRIGHT PASS (_scripts/restyle-r1-bright.py) ==== */
/* Grounds go white-dominant; saturated bands stay as bursts. Near-white gray
   keeps the band rhythm readable where two light bands meet. */
.band-bone{background:var(--paper)}
.band-cream{background:#f3f4f5}

/* Service-page hero: giant near-black condensed caps on white.
   section.* out-ranks the pages' inline .r1-head rules — no HTML edits. */
.band.r1-head{background:var(--paper);color:var(--ink)}
section.r1-head .display{color:var(--near-black);
  font-size:clamp(2.6rem,1.3rem + 6.5vw,5rem)}
section.r1-head .lead{color:var(--muted)}
section.r1-head .r1-crumb a{color:var(--muted)}
section.r1-head .r1-crumb span[aria-current]{color:var(--ink)}

/* The hero keeps its band-dark CLASS but renders white — its descendant
   ghost-button rules would otherwise paint white on white (1.00:1). */
.band-dark.r1-head .btn--ghost{color:var(--ink);border-color:var(--ink)}
.band-dark.r1-head .btn--ghost:hover{background:var(--ink);color:var(--on-color)}

/* Chunky square buttons: 3px borders, visible outline even on filled fills.
   Fill colors, white button text, and hover motion unchanged. */
.btn{border-width:3px}
.btn--primary,.btn--primary:hover{border-color:var(--near-black)}
.btn--ink{border-color:var(--on-color)}
/* ==== END R1 BRIGHT PASS ==== */

/* ---- 2026-07-31 improvements: financing chip + review links ---- */
.fin-chip{font-family:var(--f-mono);font-size:var(--fs-micro);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--muted);
  margin:var(--s3) 0 0}
.fin-chip a{color:var(--orange-h);text-decoration-color:var(--orange)}
.rev-all{margin-top:var(--s5)}
.rev-all a{color:inherit;text-decoration-color:var(--orange)}