/* ============================================================================
   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)}

/* ============ PLACEMENT PASS · 2026-07-31 (post-launch critique) ============ */
/* header phone never wraps mid-number */
.nav__phone,.nav a[href^="tel:"]{white-space:nowrap}
/* stat strip: no empty tracks when a page ships 3 stats; no viewport overflow */
.strip__grid{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.stat{min-width:0}
.stat__num{overflow-wrap:break-word;font-size:min(var(--fs-stat),11vw)}
@media (max-width:720px){.strip__grid{grid-template-columns:1fr 1fr}}
/* form fine print: compact caption mass so legal text can't outweigh the form */
.formcard__fine{font-size:.68rem;letter-spacing:.03em;line-height:1.55;margin-top:var(--s3)}
.formcard__fine+.formcard__fine{margin-top:var(--s2)}
.formcard .btn{min-width:0;white-space:normal}
/* 'not all roofers' band: top-align against the tall portrait, halve the gap
   to the closing paragraph */
.diff__top{align-items:start;margin-bottom:var(--s7)}
/* fig caption pins to the shared content edge, not the section corner */
.figcap{left:max(var(--pad-x),calc((100% - var(--wrap))/2 + var(--pad-x)))}
/* project mosaic: stack rows share height evenly (no 77px voids); bottom row
   is three EQUAL tiles instead of 5/4/3 ragged widths */
.proj-stack{align-content:stretch;grid-auto-rows:1fr}
.proj--wide,.proj--mid,.proj-note{grid-column:span 4}
/* no one-word orphans in review attributions; .nw = nowrap token helper */
.rev__who a{white-space:nowrap}
.nw{white-space:nowrap}
/* hero eyebrow chip stays one line on phones */
@media (max-width:480px){.hero__eyebrow{letter-spacing:.12em;font-size:.68rem}}

/* ============ LAPTOP BAND PASS · 2026-08-01 (921-1439px) ============ */
/* header: brand can never be crushed out; links compact instead */
@media (min-width:921px) and (max-width:1199.98px){
  .nav__in{grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);
    column-gap:var(--s4)}
  .nav__links{gap:var(--s3);font-size:.8em}
  .nav__links a{white-space:nowrap}
  .brand{padding-inline:var(--s3)}
  .brand__logo{height:44px;width:auto;max-width:none}
  :root{--fs-h1:clamp(2.5rem,1rem + 4vw,4.5rem)}
}
/* stat numerals scale with the band instead of pinning at the 1440 cap
   (the 11vw guard failed: flex min-width:auto — fixed here properly) */
@media (min-width:921px) and (max-width:1439.98px){
  .stat__num{font-size:min(var(--fs-stat),3vw);min-width:0}
  .stat__num>*{min-width:0}
}
@media (min-width:921px) and (max-width:1139.98px){
  .stat__label{font-size:calc(var(--fs-eyebrow)*.85);letter-spacing:.05em}
}

/* ============ TABLET/MOBILE PASS · 2026-08-01 (post 3-viewport audit) ============ */
:root{--tap:44px}
/* stat strips: tablet band wraps instead of clipping; mobile odd-count last
   stat spans the row (no empty white cell); numerals scale to band */
@media (min-width:721px) and (max-width:920.98px){
  .strip__grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .stat{min-width:0}
  .stat__num{font-size:min(var(--fs-stat),3vw);min-width:0}
  .stat__num>*{min-width:0}
}
@media (max-width:720px){
  .strip__grid>.stat:last-child:nth-child(odd){grid-column:1 / -1}
  .stat__num{font-size:min(var(--fs-stat),8vw)}
}
/* REGRESSION FIX: the placement-pass span-4 mosaic rule out-cascaded the
   900px stack — re-assert full-width tiles on small screens */
@media (max-width:900px){
  .proj--wide,.proj--mid,.proj-note{grid-column:1 / -1}
}
/* tap-target floor without visual change */
.nav__phone{min-height:var(--tap);display:inline-flex;align-items:center}
footer a{display:inline-block;padding-block:.65rem;margin-block:-.65rem}
.rev-all a{display:inline-block;padding-block:.65rem;margin-block:-.65rem}
/* columned lists never split an item; narrow cards fall to one column */
.plate__links>li,.plate ul>li{break-inside:avoid}
.plate__links a{overflow-wrap:break-word}
/* glossary never-skinned components: A-Z chips + byline row */
[aria-label="Jump to letter"]{display:flex;flex-wrap:wrap;gap:var(--s2);margin-block:var(--s5)}
[aria-label="Jump to letter"] a{display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--tap);min-height:var(--tap);border:var(--bw) solid var(--ink);
  font-family:var(--f-mono);font-weight:500;text-decoration:none}
article .r1-note{display:flex;flex-wrap:wrap;align-items:center;
  column-gap:var(--s3);row-gap:var(--s1)}
/* form card fills the tablet band */
@media (min-width:721px) and (max-width:920.98px){
  .formcard{max-width:none}
}
/* odd-count 2-col step grids: last step spans the row */
@media (min-width:461px) and (max-width:900px){
  .proc-grid>.step:last-child:nth-child(odd){grid-column:1 / -1;border-left:0}
}
/* homepage tablet composition: full-bleed diff photo; steps 2x2 through 900 */
@media (min-width:721px) and (max-width:900px){
  .diff__media,.diff__media img{width:100%;max-width:none}
}
@media (max-width:900px){
  .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)}
}
/* nav drawer: dim the page behind; submenu rows reach tap height */
@media (max-width:920px){
  .nav__links.open::before{content:"";position:fixed;inset:0;
    background:rgba(10,10,10,.55);z-index:-1}
  .nav__dd-menu a{padding-block:var(--s3);min-height:var(--tap)}
}

/* long text-stats scale down so they never clip (numerals keep full size) */
.stat__num--long{font-size:clamp(1.25rem,1.9vw + .6rem,2.1rem);line-height:1.05}

/* ---- AUDIT FIX PASS 2026-08-03 — shared primitives for the page rebuilds ---- */
/* corner badge opposite .plate__tab (Most Popular / $400 Value) */
.fin-pop{position:absolute;top:calc(var(--bw) * -1);right:calc(var(--bw) * -1);
  background:var(--near-black);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}
/* fixed column counts for known card counts — auto-fit orphans a 3rd/4th card
   at laptop widths. Triple compound out-specifies the placement-pass auto-fit. */
@media (min-width:921px){
  .r1-prose .r1-plates.r1-plates--3up,.r1-plates.r1-plates--3up{grid-template-columns:repeat(3,1fr)}
  .r1-prose .r1-plates.r1-plates--2up,.r1-plates.r1-plates--2up{grid-template-columns:repeat(2,1fr)}
}
/* display numeral inside a plate (heroes $500 stat) */
.hd-stat{font-family:var(--f-display);font-weight:700;line-height:.85;
  font-size:clamp(3.75rem,7vw,6rem);color:var(--orange-deep);margin:0 0 var(--s3)}
/* Gallery cards: the per-card <a> carries an inline `height:100%`, so inside the
   flex-column card it stretched and shoved the label/title down by 70-90px, and
   mixed source aspect ratios put every card's label at a different height.
   Pin one ratio and stop the anchor stretching — rows align again.
   `!important` is required: the height lives in a style attribute. */
.r1-gallery .lg-card > a{height:auto !important}
.r1-gallery .lg-card img{aspect-ratio:4/3;object-fit:cover;height:auto}
/* Contact page: map + hours as a real two-column row (the map was a bare div
   rendering as a ~320px thumbnail with the band's right half empty). */
.ct-maprow{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s5);align-items:stretch}
.ct-map{border:var(--bw) solid var(--ink);background:var(--paper);min-height:340px}
.ct-map iframe{display:block;width:100%;height:100%;min-height:340px;border:0}
@media (max-width:900px){.ct-maprow{grid-template-columns:1fr}}
/* thank-you page: check mark + button row */
.ty-check{color:var(--orange);margin-bottom:var(--s3)}
.ty-check svg{display:block}
.ty-actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
/* blog listing: post-count badge beside a category heading (was same-size
   heading text, reading as one garbled title: "HOW-TO GUIDES 10 POSTS") */
.cat-count{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-micro);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--muted);
  vertical-align:middle;margin-left:var(--s3)}
/* The CTA trailing line is a footnote, not a second headline. At --fs-eyebrow
   in full-strength white it competed with the h2 and read as two more lines of
   shouting under the buttons. Drop to micro + 82% white so it settles into the
   footnote role the copy is actually playing. */
.final__fine{font-size:var(--fs-micro);color:var(--on-color-2);max-width:62ch;
  margin-inline:auto}
/* Spanish project captions run longer than the English originals ("Condado de
   Stanislaus" vs "Stanislaus County") and clipped their caption bar. Let the
   caption wrap instead of truncating. */
.proj__cap{flex-wrap:wrap;row-gap:var(--s1h)}
.proj__meta{min-width:0}
/* A stat whose value is a long word still clipped at the 768 band; give the
   long variant one more step down there. */
@media (max-width:820px){.stat__num--long{font-size:clamp(1.05rem,2.6vw,1.6rem)}}
/* Wide tables scroll horizontally (the table element is itself the scroller via
   the placement block), but on a phone the extra columns simply vanished past
   the right edge with no cue that anything was there. Classic local/scroll
   background-attachment trick: the edge shadows appear ONLY while there is
   still content to scroll toward, and disappear at each end. Pure CSS, no JS,
   and it costs nothing on tables that already fit. */
.r1-prose table{
  background-image:
    linear-gradient(to right, var(--paper) 30%, rgba(244,241,234,0)),
    linear-gradient(to left,  var(--paper) 30%, rgba(244,241,234,0)),
    radial-gradient(farthest-side at 0 50%, rgba(10,10,10,.28), rgba(10,10,10,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(10,10,10,.28), rgba(10,10,10,0));
  background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,14px 100%,14px 100%;
  background-position:left center,right center,left center,right center;
  background-attachment:local,local,scroll,scroll;
}

/* ============ RE-AUDIT FIX PASS · 2026-08-03 ============ */
/* STAT ROW BASELINE (48 findings / 37 pages).
   .stat is a flex column, so each label sits directly under its own numeral.
   Long text values ("4.2 ★ · 51", "Workmanship") render at a reduced size via
   .stat__num--long, which made their labels float ~15px above the labels in
   the sibling cells and broke the row's baseline grid. Pushing the label to
   the bottom of the (equal-height) cell aligns every label regardless of how
   tall its numeral is. */
.stat__label{margin-top:auto}
.stat__num{align-items:flex-end}

/* NAV WRAP (40 findings / 40 pages).
   "SERVICE AREAS" wrapped to two lines on interior pages, leaving that nav
   slot vertically ragged. nowrap was only set inside the 921-1199 laptop band;
   the wrap happens above it too. Apply across the whole desktop nav. */
@media (min-width:921px){.nav__links a{white-space:nowrap}}

/* Role line under a leadership card name (About). */
.team-role{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-micro);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--muted);
  margin-top:calc(var(--s2) * -1)}
/* Two-column list for short link lists. `max-width:none` is required: the
   74ch cap on .r1-prose children otherwise pins it to ~755px and the second
   column never gets room. */
@media (min-width:900px){
  .r1-prose ul.cols2{max-width:none;columns:2;column-gap:var(--s7)}
  .cols2 > li{break-inside:avoid}
}