/*
 * Local Boys Contracting - the design.
 *
 * Extracted from mockups/index.html on 2026-08-22. That file keeps its own
 * inline copy because it is published as a Claude artifact, whose CSP blocks
 * every external host, so it cannot link a stylesheet. It is now a frozen
 * record of the approved v1 design.
 *
 * THIS file is the living stylesheet. Do not edit the mockup's copy, and do
 * not try to keep the two in sync - they are meant to diverge.
 *
 * Two things that bite:
 *   --ink-* is a SURFACE scale holding warm sand values, not a text scale.
 *     Text colour is --on-light / --on-light-dim. Confusing them renders
 *     invisible text, which has happened three times.
 *   Contrast here is measured, not judged. Copper-600 on white is 4.16:1,
 *     under AA - primary buttons use copper-700, eyebrows copper-800. Re-check
 *     with a computed-style walk after any colour change; a sand-on-sand page
 *     cannot be eyeballed.
 */
/* ============================================================
   LOCAL BOYS CONTRACTING \2014  "Desert Craftsman"
   Palette derived from the logo's copper gradient.
   Single visual world: the site has one identity, so it does not
   follow the viewer's theme. Every color is painted explicitly.
   ============================================================ */
:root{
  /* Ink \2014  warm near-blacks, biased toward copper, never neutral grey */
  --ink-900:#14100D;
  --ink-800:#1A1614;
  --ink-700:#241E1A;
  --ink-600:#352C27;
  --ink-500:#4A3E37;

  /* Copper \2014  sampled directly from the logo gradient */
  --cu-300:#D9AE8E;
  --cu-400:#C59270;
  --cu-500:#AD8061;
  --cu-600:#9C7456;
  --cu-700:#89664B;
  --cu-800:#6B4E39;

  /* Bone \2014  warm light grounds */
  --bone:#F5F0EA;
  --bone-2:#EAE1D5;
  --bone-3:#D8CCBC;
  --white:#FFFFFF;

  --on-dark:#EDE6DE;
  --on-dark-dim:#A2958A;
  --on-light:#2A2320;
  --on-light-dim:#6B5D54;

  --maxw:1180px;
  --gut:clamp(20px,5vw,56px);

  --fs-display:clamp(2.7rem,6.4vw,5rem);
  --fs-h1:clamp(2.1rem,4.4vw,3.4rem);
  --fs-h2:clamp(1.7rem,3.1vw,2.5rem);
  --fs-h3:clamp(1.15rem,1.6vw,1.35rem);
  --fs-body:1.0625rem;
  --fs-sm:.9375rem;

  --display:"Literata",Georgia,"Times New Roman",serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,"SF Mono",Menlo,monospace;

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

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bone);
  color:var(--on-light);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.018em;
  text-wrap:balance;
  margin:0;
}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--cu-400);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- shared atoms ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(64px,8vw,110px)}
.sec--tight{padding-block:clamp(44px,5vw,68px)}

/* A section's topic, in plain words, above its heading. */
.eyebrow{
  font-family:var(--body);
  font-size:.98rem;
  font-weight:600;
  margin:0 0 10px;
  color:var(--cu-800);
}

.on-dark .eyebrow{color:var(--cu-400)}

.lede{max-width:56ch;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.62;color:var(--on-light-dim)}
.on-dark .lede{color:var(--on-dark-dim)}
.on-dark{color:var(--on-dark)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--bone)}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-size:.96rem;font-weight:600;letter-spacing:.01em;
  padding:15px 26px;border:1.5px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.btn--pri{background:var(--cu-700);color:#fff;border-color:var(--cu-700)}
.btn--pri:hover{background:var(--cu-800);border-color:var(--cu-800);transform:translateY(-1px)}
.btn--ghost{border-color:var(--cu-600);color:var(--cu-700);background:transparent}
.btn--ghost:hover{background:var(--cu-600);color:#fff}
.on-dark .btn--ghost{border-color:var(--ink-500);color:var(--bone)}
.on-dark .btn--ghost:hover{background:var(--bone);color:var(--ink-900);border-color:var(--bone)}

.stat-num{font-family:var(--body);font-variant-numeric:tabular-nums}

/* Placeholder markers \2014  everything the client still owes us */
.ph{
  font-style:normal;
  border-bottom:1px dashed color-mix(in srgb,currentColor 45%,transparent);
}
body.show-ph .ph{
  background:var(--cu-400);
  color:#14100D;
  border-radius:2px;
  padding:0 4px;
  border-bottom:0;
  box-shadow:0 0 0 2px var(--cu-400);
}
body.show-ph .slot{outline:2px solid var(--cu-400);outline-offset:3px}
/* The public domain (REVIEW_TOOLS=false): unconfirmed facts read as plain
   text, and notes addressed to the client are not shown at all. */
.is-live .ph{border-bottom:0}
.is-live .ph--note{display:none}
/* An unfilled photo slot on the public site: its instruction is stripped
   server-side, and the frame reads as a quiet brand panel, not a gap. */
.is-live .slot{border:0;background:var(--bone-2)}
.is-live .slot::after{
  content:"";position:absolute;inset:0;
  background:url(../img/logo-light.webp) center/min(120px,40%) no-repeat;opacity:.13;
}

/* Photo slots \2014  honest empty frames, not fake stock */
.slot{
  position:relative;
  border:1.5px dashed var(--cu-600);
  background:
    repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,var(--cu-600) 9%,transparent) 9px 10px),
    var(--bone-2);
  display:flex;align-items:flex-end;
  min-height:200px;border-radius:2px;overflow:hidden;
}
.on-dark .slot{
  border-color:var(--ink-500);
  background:
    repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,var(--cu-600) 14%,transparent) 9px 10px),
    var(--ink-700);
}
/* A filled slot: a stock photo of materials or generic work, never the
   client's crew or finished jobs. */
.photo{position:relative;margin:0;overflow:hidden;border-radius:2px;background:var(--bone-2)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* A job clip (<x-job-video>): same frame as a photo, at the footage's 16:9. */
.clip{aspect-ratio:16/9;max-width:100%}
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.photo figcaption{
  position:absolute;left:10px;bottom:10px;
  font-family:var(--body);font-size:.78rem;font-weight:500;
  padding:6px 10px;background:rgba(20,16,13,.82);color:#F3EADF;border-radius:2px;
}
.slot span{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 12px;margin:10px;
  /* Literal colours: these are mockup annotations, not site surfaces, so the
     chip stays dark against whatever it is marking. */
  background:#14100D;color:#D9AE8E;border-radius:2px;line-height:1.4;
}

/* ============================================================
   ATMOSPHERE PHOTOGRAPHY
   Desert/sky imagery only - never crews, never jobs. Each photo is
   desaturated and re-tinted copper so it reads as part of the palette
   instead of a stock photo dropped onto the page.
   ============================================================ */
.atmo{position:relative;overflow:hidden;isolation:isolate;background:var(--ink-900)}
.atmo__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.86);
  opacity:.72;
}
/* Paints the copper hue back onto the desaturated photo. */
.atmo__tint{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,var(--cu-500),var(--cu-800) 55%,var(--ink-900));
  mix-blend-mode:color;opacity:.9;
}
/* Keeps type legible over whatever the photo happens to be doing. */
.atmo__scrim{position:absolute;inset:0;pointer-events:none}
.atmo > .wrap,.atmo > .hero__in{position:relative;z-index:2}
/* No photo fetched yet -> no treatment. Without this the copper tint layer
   would recolour the whole section over an empty <img>. */
.atmo:has(.atmo__img:not([src])) .atmo__tint,
.atmo:has(.atmo__img:not([src])) .atmo__scrim,
.hero__photo:has(img:not([src])) i,
.hero__photo:has(img:not([src])) + /* Left scrim keeps the headline legible over the tile; the bottom fade lands
   the photo into the trust strip instead of cutting it off. */
.hero__wash{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 52%,rgba(20,16,13,.58) 84%,var(--ink-900) 100%),
    linear-gradient(90deg,rgba(20,16,13,.88) 0%,rgba(20,16,13,.50) 48%,rgba(20,16,13,.14) 84%);
}
/* Section-background variant: quiet enough that body copy stays readable. */
.atmo--bg .atmo__img{opacity:.40;filter:grayscale(1) contrast(1.16) brightness(.72)}
.atmo--bg .atmo__scrim{background:linear-gradient(90deg,var(--ink-800) 2%,rgba(26,22,20,.80) 34%,rgba(26,22,20,.30) 78%,rgba(26,22,20,.16))}
.areas.atmo--bg .atmo__scrim{background:linear-gradient(90deg,rgba(20,16,13,.55),rgba(20,16,13,.86) 62%)}

/* The roofline: the signature. A true 4:12 pitch profile drawn as the
   transition between sections. Angle stays exact at every width. */
.roofline{display:block;line-height:0}
/* Height tracks width (viewBox 1440x92), so 'slice' never has to crop the
   top: a fixed 92px cap cut the peak off on screens wider than 1440px. The
   48px floor still applies on phones, where slice trims the sides instead. */
.roofline svg{display:block;width:100%;height:max(48px,calc(100vw * 92 / 1440));margin-bottom:-1px}

/* ============================================================
   THE PALETTE ON A LIGHT GROUND
   Chosen 2026-08-20: light is the site, and the only mode. Not an
   inversion of a dark page - the "ink" tokens become warm sand so the
   page keeps its banded rhythm, the bands are just 40 shades up. Copper
   darkens to hold contrast on a light ground.
   Everything above this block is the base scale; everything here wins.
   The deep values are still real: the mockup chrome, the material panels
   and the annotation chips are painted with them literally.
   ============================================================ */
body{
  --ink-900:#EFE7DB;   /* deepest band: hero, full-service, footer */
  --ink-800:#F4EEE5;   /* storm band, page heroes */
  --ink-700:#E8DED0;   /* cards sitting on a band */
  --ink-600:#D6C8B6;   /* hairlines on a band */
  --ink-500:#A08E7C;
  --on-dark:#3A312B;   /* body text on those bands */
  --on-dark-dim:#6B5C52;
  --bone:#FFFFFF;      /* the light sections go white for contrast */
  --bone-2:#FAF6F0;
  --bone-3:#E4D9C9;
  --on-light:#2A2320;
  --on-light-dim:#665950;
  background:#FFFFFF;
}

/* --bone doubles as "text on a dark band", so every such use needs a dark
   value here. These are the only places it acts as a foreground. */
body .on-dark h1,
body .on-dark h2,
body .on-dark h3,
body .hero h1,
body .claim strong,
body .trade h3,
body .logo b{color:#241E1A}
body .nav a:hover,
body .nav a[aria-current],
body .hd-tel,
body .hd-lang,
body .cities a:hover,
body .ft__grid a:hover{color:#241E1A}
body .on-dark .btn--ghost{border-color:var(--cu-600);color:var(--cu-800)}
body .on-dark .btn--ghost:hover{background:var(--cu-600);color:#fff;border-color:var(--cu-600)}
body .cities a:hover{background:var(--cu-300)}
body .mobile-bar a:last-child{background:#241E1A;color:#F5F0EA}
body .mobile-bar{background:var(--bone-3);border-top-color:var(--bone-3)}

/* Copper at 400 is too pale on a light ground; step it down for eyebrows,
   the logo sub-line, and breadcrumbs. */
body .on-dark .eyebrow,
body .logo small,
body .crumbs a,
body .trade em{color:var(--cu-800)}
body .ft__grid h2{color:var(--cu-800)}
body .trust li{color:var(--on-light-dim)}
body .ft__bot{color:#736250}

body .site-hd{border-bottom-color:var(--bone-3)}
body .site-ft{border-top-color:var(--bone-3)}

/* The roofline divider fill is a presentation attribute on the path, so it
   has to be overridden as a CSS property. */
body .roofline svg path:first-of-type{fill:var(--ink-900)}
/* The claim list was built for the dark storm band, where its row fills vanish
   into the band. On the light ground they read as boxes, so here it is a
   plain ruled list instead. */
body .claim{background:none;gap:0;border-top:1px solid var(--ink-600)}
body .claim li{background:none;border-bottom:1px solid var(--ink-600)}

/* Photography: on a light ground the treatment lifts instead of darkens. */
body .atmo__img{filter:grayscale(1) contrast(.92) brightness(1.16);opacity:.55}
body .atmo--bg .atmo__img{opacity:.30;filter:grayscale(1) contrast(.9) brightness(1.2)}
body .atmo__tint{
  background:linear-gradient(200deg,var(--cu-400),var(--cu-600) 60%,#8A7358);opacity:.62;
}
body .atmo--bg .atmo__scrim{
  background:linear-gradient(90deg,rgba(255,255,255,.94) 2%,rgba(255,255,255,.78) 36%,rgba(255,255,255,.34) 78%,rgba(255,255,255,.2));
}
body .areas.atmo--bg .atmo__scrim{
  background:linear-gradient(90deg,rgba(239,231,219,.62),rgba(239,231,219,.9) 62%);
}
body{--hero-lede:#5A4E45}
body .hero__photo img{filter:grayscale(1) contrast(1.02) brightness(1.06);opacity:.72}
body .hero__photo i{
  background:linear-gradient(190deg,var(--cu-400),var(--cu-600) 58%,#8A7358);opacity:.6;
}
body .hero__wash{
  background:
    linear-gradient(180deg,transparent 56%,rgba(239,231,219,.55) 86%,var(--ink-900) 100%),
    linear-gradient(90deg,rgba(252,249,245,.93) 0%,rgba(252,249,245,.62) 44%,rgba(252,249,245,.10) 80%);
}
body .hero__glow{opacity:.35}

/* Copper was chosen against ink; on sand it needs a step down. Both of
   these were measured short of AA after the switch to a light-only page:
   the hero accent at 2.22:1 against 3, the hero's ghost button at 4.21:1
   against 4.5. The eyebrows and primary buttons already stepped down. */
body .hero h1 em{color:var(--cu-700)}
.hero__cta .btn--ghost{color:var(--cu-800)}

/* Logo swaps to the original black-ink artwork on light grounds. */
.logo .logo--light{display:none}
body .logo .logo--dark{display:none}
body .logo .logo--light{display:block}

/* ============================================================
   MOCKUP CHROME (not part of the site design)
   ============================================================ */
.bar{
  position:sticky;top:0;z-index:200;
  /* Literal colours: the chrome is not part of the site, so it
     stays dark against the light page and never reads as part of it. */
  background:#14100D;color:#EDE6DE;
  border-bottom:1px solid #352C27;
}
.bar__in{
  max-width:1320px;margin-inline:auto;padding:10px clamp(14px,3vw,26px);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.bar__id{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#C59270;white-space:nowrap}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-inline-end:auto}
.tab{
  font-family:var(--body);font-size:.82rem;font-weight:500;
  background:transparent;color:#A2958A;
  border:1px solid transparent;border-radius:2px;padding:7px 13px;cursor:pointer;
  transition:color .15s,background .15s,border-color .15s;
}
.tab:hover{color:#F5F0EA}
.tab[aria-selected="true"]{background:#89664B;border-color:#89664B;color:#fff}
.toggle{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#A2958A;
  user-select:none;white-space:nowrap;
}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle i{
  width:34px;height:19px;border-radius:19px;background:#352C27;
  position:relative;transition:background .18s var(--ease);flex:none;
}
.toggle i::after{
  content:"";position:absolute;inset:3px auto 3px 3px;width:13px;border-radius:50%;
  background:#A2958A;transition:transform .18s var(--ease),background .18s var(--ease);
}
.toggle input:checked + i{background:#9C7456}
.toggle input:checked + i::after{transform:translateX(15px);background:#fff}
.toggle input:focus-visible + i{outline:2px solid var(--cu-400);outline-offset:2px}
.panel[hidden]{display:none}

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-hd{
  /* --bar-h is measured at runtime so the two sticky bars never gap or overlap */
  position:sticky;top:var(--bar-h,47px);z-index:120;
  background:color-mix(in srgb,var(--ink-900) 94%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-700);
  color:var(--on-dark);
}
.site-hd__in{
  max-width:var(--maxw);margin-inline:auto;padding:12px var(--gut);
  display:flex;align-items:center;gap:clamp(14px,2.5vw,34px);
}
/* The logo is a stacked badge: its own "CONTRACTING LLC" line is unreadable
   below ~72px, which would mean a 100px sticky header. So the badge runs as
   the mark and a typographic wordmark carries the name at nav size. The
   footer has room, so there the badge runs large and alone. */
.logo{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none}
.logo img{height:48px;width:auto;display:block}
.logo b{
  display:block;font-family:var(--display);font-weight:700;font-size:1.06rem;
  letter-spacing:-.02em;color:var(--bone);line-height:1.02;
}
.logo small{
  display:block;font-family:var(--body);font-size:.6rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cu-500);margin-top:3px;
}
@media (max-width:720px){.logo img{height:40px}.logo b{font-size:.98rem}}
.site-ft .logo img{height:108px}
.nav{display:flex;gap:clamp(12px,1.8vw,26px);margin-inline-end:auto;align-items:center}
.nav a{
  text-decoration:none;font-size:.9rem;font-weight:500;color:var(--on-dark-dim);
  padding:6px 0;position:relative;transition:color .16s;white-space:nowrap;
}
.nav a:hover,.nav a[aria-current]{color:var(--bone)}
/* Active state is a box-shadow, not ::after \2014  the caret already owns ::after */
.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--cu-500)}
.nav a.has-sub::after{content:"\25BE";color:var(--cu-600);font-size:.7em;margin-left:4px}

/* ---------- nav dropdowns ----------
   Each .has-sub item is wrapped in a .navitem so the panel can anchor to it.
   Shown on hover AND focus-within, so the menu is reachable by keyboard.
   .nav .subnav a is deliberately more specific than the `body .nav a` rules
   in the light-mode block above, which would otherwise win on colour. */
.navitem{position:relative;display:flex;align-items:center}
.subnav{
  position:absolute;top:100%;left:-14px;z-index:200;
  min-width:236px;padding:7px;margin-top:3px;
  background:var(--ink-800);border:1px solid var(--ink-600);
  box-shadow:0 18px 40px rgba(0,0,0,.44);
  display:grid;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .14s var(--ease),transform .14s var(--ease),visibility .14s;
}
.navitem:hover>.subnav,.navitem:focus-within>.subnav{opacity:1;visibility:visible;transform:none}
.subnav--wide{min-width:330px;grid-template-columns:1fr 1fr}
.nav .subnav a{
  display:block;padding:9px 12px;font-size:.84rem;font-weight:400;
  color:var(--on-dark-dim);white-space:normal;line-height:1.32;box-shadow:none;
}
.nav .subnav a:hover,.nav .subnav a:focus-visible{background:var(--ink-700);color:var(--bone)}
.subnav__all{border-top:1px solid var(--ink-600);margin-top:6px;padding-top:6px}
.subnav--wide .subnav__all{grid-column:1/-1}
@media (max-width:1040px){.subnav{left:auto;right:-10px}}
@media (prefers-reduced-motion:reduce){.subnav{transition:none}}

.hd-tel{
  font-family:var(--body);font-size:.92rem;font-weight:600;color:var(--bone);text-decoration:none;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.hd-tel:hover{color:var(--cu-400)}
/* The language switch. Stays when the nav and phone hide on small screens:
   a Spanish speaker on a phone has to be able to find it. The full word on
   wide screens, the two-letter code on narrow ones. */
.hd-lang{
  font-family:var(--body);font-size:.82rem;font-weight:600;text-decoration:none;
  color:var(--bone);white-space:nowrap;padding:5px 9px;border:1px solid var(--ink-600);
}
.hd-lang:hover{color:var(--cu-400)}
.hd-lang abbr{text-decoration:none;display:none}
@media (max-width:1240px){.hd-lang span{display:none}.hd-lang abbr{display:inline}}
@media (max-width:980px){.hd-lang{margin-inline-start:auto}}
.site-hd .btn{padding:11px 19px;font-size:.87rem;white-space:nowrap;flex:none}
/* The Spanish nav labels run longer: between the phone layout and a wide
   screen, the header number gives way so the button keeps its line. */
@media (max-width:1180px){html[lang=es] .hd-tel{display:none}}
@media (max-width:1060px){.hd-tel{display:none}}
/* On a phone the logo, the switch and the button only fit on one line with
   less air between them. */
@media (max-width:440px){
  .site-hd__in{gap:8px}
  .logo{gap:8px}.logo img{height:32px}.logo small{letter-spacing:.12em}
  .hd-lang{padding:4px 7px}
  .site-hd .btn{padding:9px 11px;font-size:.8rem}
}
@media (max-width:980px){
  .nav,.hd-tel{display:none}
}

/* ============================================================
   HERO \2014  drawn desert dusk + a true-pitch roof skyline
   ============================================================ */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  /* The dusk gradient is both the no-photo fallback and the ground the
     atmosphere photo blends over. */
  background:var(--ink-900);
  color:var(--on-dark);
  padding-block:clamp(72px,11vw,132px) 0;
}
/* Photographic sky sits behind the drawn roofline, tinted to the palette. */
.hero__photo{position:absolute;inset:0;z-index:-4;overflow:hidden}
.hero__photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  filter:grayscale(1) contrast(1.1) brightness(.8);opacity:.6;
}
.hero__photo i{
  position:absolute;inset:0;display:block;
  background:linear-gradient(190deg,var(--cu-500),var(--cu-800) 58%,var(--ink-900));
  mix-blend-mode:color;opacity:.92;
}
.hero__wash{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,16,13,.82) 0%,rgba(20,16,13,.40) 48%,transparent 80%);
}
.hero__glow{
  position:absolute;left:50%;bottom:-6%;width:min(1100px,150%);aspect-ratio:2/1;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,
    color-mix(in srgb,var(--cu-300) 62%,transparent) 0%,
    color-mix(in srgb,var(--cu-700) 26%,transparent) 42%,
    transparent 72%);
  z-index:-2;pointer-events:none;
}
.hero__in{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  padding-bottom:clamp(96px,13vw,170px);
  position:relative;z-index:1;
}
.hero h1{
  font-size:var(--fs-display);font-weight:600;color:var(--bone);
  max-width:16ch;letter-spacing:-.028em;
}
.hero h1 em{
  font-style:normal;
  color:var(--cu-400);
}
.hero .lede{margin-top:26px;max-width:50ch;color:var(--hero-lede)}
:root{--hero-lede:#CBBBAC}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}

.trust{background:var(--ink-900);border-block:1px solid var(--ink-700);color:var(--on-dark)}
.trust ul{
  max-width:var(--maxw);margin-inline:auto;padding:20px var(--gut);
  list-style:none;display:flex;flex-wrap:wrap;gap:14px clamp(20px,4vw,52px);
  font-family:var(--body);font-size:.92rem;font-weight:500;
  color:var(--on-dark-dim);
}
.trust li{display:flex;align-items:center;gap:9px}
.trust li::before{content:"";width:5px;height:5px;background:var(--cu-500);flex:none;transform:rotate(45deg)}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.head{display:grid;gap:22px;margin-bottom:clamp(36px,5vw,58px)}
@media (min-width:860px){
  .head{grid-template-columns:1.15fr .85fr;align-items:end;gap:48px}
}
.head h2{font-size:var(--fs-h2)}

/* ---------- roof types: a photo of each roof over its card ---------- */
.types{display:grid;gap:2px;background:var(--bone-3)}
@media (min-width:720px){.types{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.types{grid-template-columns:repeat(4,1fr)}}
.type{
  background:var(--white);padding:0 0 30px;
  text-decoration:none;display:flex;flex-direction:column;
  transition:background .2s var(--ease);
}
.type:hover{background:var(--bone)}
.type__art{aspect-ratio:8/5;background:var(--ink-900);position:relative;overflow:hidden}
.type__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.type:hover .type__art img{transform:scale(1.04)}
.type__body{padding:24px clamp(20px,2.2vw,28px) 0;display:flex;flex-direction:column;gap:11px;flex:1}
.type h3{font-size:var(--fs-h3);font-weight:700}
.type p{font-size:var(--fs-sm);color:var(--on-light-dim);line-height:1.58}
.type dl{
  /* auto top margin pins the spec block to the bottom so all four cards
     share one baseline regardless of copy length */
  margin:18px 0 0;margin-top:auto;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;
  font-family:var(--body);font-size:.84rem;
  border-top:1px solid var(--bone-3);padding-top:13px;
}
.type dt{color:var(--on-light-dim);align-self:center}
.type dd{margin:0;color:var(--on-light);font-variant-numeric:tabular-nums;text-align:right}

/* ---------- storm / insurance ---------- */
.storm{background:var(--ink-800);color:var(--on-dark);position:relative;overflow:hidden}
.storm__grid{display:grid;gap:clamp(34px,5vw,64px)}
@media (min-width:900px){.storm__grid{grid-template-columns:1fr 1fr}}
.claim{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:1px;background:var(--ink-600)}
.claim li{background:var(--ink-800);padding:17px 4px 17px 0;font-size:var(--fs-sm);color:var(--on-dark-dim);line-height:1.55}

.claim strong{color:var(--bone);font-weight:600}

/* ---------- why ---------- */
.why{display:grid;gap:2px;background:var(--bone-3);margin-top:8px}
@media (min-width:640px){.why{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.why{grid-template-columns:repeat(4,1fr)}}
.why article{background:var(--bone);padding:clamp(26px,3vw,34px)}
.why h3{font-size:1.12rem;margin-bottom:11px;font-weight:700}
.why p{font-size:var(--fs-sm);color:var(--on-light-dim);line-height:1.58}

/* ---------- process: four steps in order, read left to right ---------- */
.steps__h{font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 clamp(22px,3vw,32px)}
.steps{display:grid;gap:0}
@media (min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{
  padding:26px 26px 30px 0;
  border-top:2px solid var(--ink-600);
  position:relative;
}
@media (min-width:820px){.step{padding-right:34px}}

.step h3{font-size:1.1rem;margin-bottom:10px;font-weight:700}
.step p{font-size:var(--fs-sm);color:var(--on-dark-dim);line-height:1.55}

/* ---------- full-service band ---------- */
.fs{background:var(--ink-900);color:var(--on-dark)}
.trades{display:grid;gap:1px;background:var(--ink-600);margin-top:clamp(34px,4vw,50px)}
@media (min-width:640px){.trades{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.trades{grid-template-columns:repeat(4,1fr)}}
/* .trades--3 is the six-trade grid: three across rather than four-plus-two. */
@media (min-width:1040px){.trades--3{grid-template-columns:repeat(3,1fr)}}
.trade{
  background:var(--ink-900);padding:clamp(26px,3vw,34px);
  text-decoration:none;display:flex;flex-direction:column;gap:12px;
  transition:background .2s var(--ease);
}
.trade:hover{background:var(--ink-700)}
.trade h3{font-size:1.08rem;font-weight:700;color:var(--bone)}
.trade p{font-size:.88rem;color:var(--on-dark-dim);line-height:1.55}
.trade em{
  font-style:normal;font-family:var(--body);font-size:.88rem;font-weight:600;
  color:var(--cu-500);margin-top:auto;padding-top:14px;
}

/* ---------- commercial ---------- */
.comm{background:var(--bone-2)}
.comm__grid{display:grid;gap:clamp(30px,4vw,56px)}
@media (min-width:880px){.comm__grid{grid-template-columns:.9fr 1.1fr}}
.comm ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px;font-size:var(--fs-sm)}
.comm li{display:flex;gap:12px;align-items:flex-start;color:var(--on-light-dim)}
.comm li::before{content:"";width:7px;height:7px;background:var(--cu-600);flex:none;margin-top:8px;clip-path:polygon(0 100%,50% 0,100% 100%)}

/* ---------- work gallery ---------- */
.work{display:grid;gap:2px}
@media (min-width:700px){.work{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.work{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.work--2{grid-template-columns:repeat(2,1fr)}}
.work .slot{min-height:230px}
/* Our Work: one block per real job, its photos in the .work grid. */
.job + .job{margin-top:clamp(44px,6vw,72px)}
.job__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:18px}
.job__head p{margin:0;max-width:60ch}
.work__more{margin-top:22px}

/* ---------- reviews ---------- */
.revs{display:grid;gap:2px;background:var(--bone-3)}
@media (min-width:800px){.revs{grid-template-columns:repeat(3,1fr)}}
/* One review: a featured quote, not a third of an empty grid. */
@media (min-width:800px){.revs--one{grid-template-columns:1fr}}
.revs--one .rev{padding:clamp(30px,4.5vw,52px)}
.revs--one .rev p{font-family:var(--display);font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.4;max-width:46ch}
.revs--one .rev__stars{font-size:1rem}
.rev{background:var(--white);padding:clamp(26px,3vw,34px);display:flex;flex-direction:column;gap:15px}
.rev__stars{color:var(--cu-700);letter-spacing:.18em;font-size:.84rem}
.rev p{font-size:var(--fs-sm);line-height:1.62;color:var(--on-light);flex:1}
.revs--svc{grid-template-columns:1fr}
@media (min-width:760px){.revs--svc{grid-template-columns:repeat(2,1fr)}}
/* Service cards: the list, not the intro, absorbs the slack, so every
   card's link sits on the same line. */
.rev--svc p{flex:0 0 auto;min-height:3.3em}
.rev--svc ul{margin-bottom:20px}
.rev--svc footer{margin-top:auto}
.rev footer{font-family:var(--body);font-size:.88rem;font-weight:600;color:var(--on-light-dim)}
.rating{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-top:2px solid var(--ink-800);padding-top:22px;margin-top:34px;
}
.rating b{font-family:var(--display);font-size:2.6rem;font-weight:700;line-height:1}
.rating span{font-family:var(--body);font-size:.9rem;color:var(--on-light-dim)}

/* ---------- areas ---------- */
.areas{background:var(--ink-900);color:var(--on-dark);position:relative;overflow:hidden}
.areas__grid{display:grid;gap:clamp(34px,5vw,64px);align-items:center;position:relative;z-index:1}
@media (min-width:880px){.areas__grid{grid-template-columns:.85fr 1.15fr}}
.areas__map{color:var(--cu-700);max-width:260px;margin-inline:auto}
.areas__map svg{width:100%;height:auto}
.cities{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1px;
  background:var(--ink-600);border:1px solid var(--ink-600);
}
.cities a{
  display:block;background:var(--ink-900);padding:14px 16px;text-decoration:none;
  font-size:.88rem;color:var(--on-dark-dim);transition:background .16s,color .16s;
}
.cities a:hover{background:var(--cu-800);color:var(--bone)}

/* ---------- final CTA + form ---------- */
.cta{background:var(--bone)}
.cta__grid{display:grid;gap:clamp(36px,5vw,64px)}
@media (min-width:920px){.cta__grid{grid-template-columns:1fr 1fr;align-items:start}}
.form{background:var(--white);border:1px solid var(--bone-3);padding:clamp(26px,3.4vw,40px);border-radius:2px}
.form h3{font-size:1.35rem;margin-bottom:6px}
.form > p{font-size:var(--fs-sm);color:var(--on-light-dim);margin-bottom:24px}
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{
  font-family:var(--body);font-size:.86rem;font-weight:600;color:var(--on-light-dim);
}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:.96rem;color:var(--on-light);
  padding:13px 14px;border:1px solid var(--bone-3);background:var(--bone);border-radius:2px;
  width:100%;transition:border-color .16s,background .16s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--cu-600);background:var(--white);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cu-400) 26%,transparent);
}
.field textarea{resize:vertical;min-height:88px}
.row2{display:grid;gap:16px}
@media (min-width:520px){.row2{grid-template-columns:1fr 1fr}}
.form .btn{width:100%;justify-content:center;margin-top:8px}
.form__err{
  color:#9B3B24;font-size:var(--fs-sm);line-height:1.45;
  margin:0 0 10px;padding:9px 11px;background:rgba(155,59,36,.07);
  border-left:2px solid #9B3B24;
}
.form small{
  display:block;margin-top:14px;font-size:.76rem;color:var(--on-light-dim);line-height:1.5;
}
.direct{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:1px;background:var(--bone-3);border:1px solid var(--bone-3)}
.direct li{background:var(--bone);padding:18px 20px;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.direct dt{font-family:var(--body);font-size:.86rem;font-weight:600;color:var(--on-light-dim)}
.direct dd{margin:0;font-family:var(--body);font-size:1rem;color:var(--on-light)}

/* ---------- footer ---------- */
.site-ft{background:var(--ink-900);color:var(--on-dark-dim);border-top:1px solid var(--ink-700)}
.ft__grid{
  max-width:var(--maxw);margin-inline:auto;padding:clamp(48px,6vw,76px) var(--gut) 34px;
  display:grid;gap:clamp(30px,4vw,48px);
}
@media (min-width:760px){.ft__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.ft__grid h2{
  font-family:var(--body);font-size:.92rem;font-weight:700;
  color:var(--cu-500);margin-bottom:16px;
}
.ft__grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ft__grid a{text-decoration:none;font-size:.88rem;transition:color .16s}
.ft__grid a:hover{color:var(--bone)}
.ft__blurb{font-size:.88rem;line-height:1.62;max-width:34ch;margin-top:18px}
.ft__social{margin-top:16px}
/* Facebook/Instagram as outlined copper pills (footer and contact page) */
.social{display:flex;gap:10px;flex-wrap:wrap}
.social a{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;
  border:1px solid var(--cu-500);border-radius:999px;
  font-family:var(--body);font-size:.86rem;line-height:1;color:var(--on-light);text-decoration:none;
  transition:background .16s,color .16s,border-color .16s;
}
.social svg{width:17px;height:17px;flex:none;color:var(--cu-600)}
.social a:hover{background:var(--cu-600);border-color:var(--cu-600);color:var(--white)}
.social a:hover svg{color:var(--white)}
.ft__grid .social a{font-size:.86rem}
.ft__grid .social a:hover{color:var(--white)}
.ft__bot{
  border-top:1px solid var(--ink-700);
  max-width:var(--maxw);margin-inline:auto;padding:20px var(--gut) 30px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--body);font-size:.82rem;color:var(--ink-500);
}

/* Mobile call/text bar \2014  beats three of the four competitors outright */
/* Agency credit in the bottom bar: text inherits the bar's mono; the
   wordmark PNG carries its own padding, so the gap stays small. */
.ft__built{display:inline-flex;align-items:center;gap:4px;color:inherit;text-decoration:none;transition:opacity .16s}
.ft__built:hover{opacity:.8}
.ft__built img{height:22px;width:auto}
.ft__bot span a{text-decoration:none}
.ft__bot span a:hover{text-decoration:underline}

.mobile-bar{display:none}
@media (max-width:720px){
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:sticky;bottom:0;z-index:130;background:var(--ink-600);
    border-top:1px solid var(--ink-600);
  }
  .mobile-bar a{
    padding:15px;text-align:center;text-decoration:none;font-weight:600;font-size:.92rem;
  }
  .mobile-bar a:first-child{background:var(--cu-600);color:#fff}
  .mobile-bar a:last-child{background:var(--ink-900);color:var(--bone)}
}

/* ============================================================
   INTERIOR PAGE BITS
   ============================================================ */
.crumbs{
  background:var(--ink-800);color:var(--on-dark-dim);
  font-family:var(--body);font-size:.84rem;
}
.crumbs div{max-width:var(--maxw);margin-inline:auto;padding:14px var(--gut)}
.crumbs a{text-decoration:none;color:var(--cu-500)}

.phero{background:var(--ink-800);color:var(--on-dark);padding-block:clamp(46px,6vw,84px) clamp(56px,7vw,96px)}
.phero__grid{display:grid;gap:clamp(32px,4vw,58px);align-items:center}
@media (min-width:900px){.phero__grid{grid-template-columns:1.05fr .95fr}}
.phero h1{font-size:var(--fs-h1);max-width:15ch}

.prose{max-width:64ch}
.prose h2{font-size:clamp(1.45rem,2.4vw,2rem);margin:0 0 16px}
.prose h3{font-size:1.18rem;margin:36px 0 10px;font-weight:700}
.prose p{margin:0 0 18px;color:var(--on-light-dim);line-height:1.68}
.prose > p:first-of-type{font-size:1.12rem;color:var(--on-light)}
.prose ul{margin:0 0 22px;padding-left:0;list-style:none;display:grid;gap:11px}
/* Block, not flex: as a flex row, "<b>Label:</b> text" split into columns. */
.prose ul li{position:relative;padding-left:20px;color:var(--on-light-dim);font-size:var(--fs-sm);line-height:1.58}
.prose ul li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--cu-600);clip-path:polygon(0 100%,50% 0,100% 100%)}

.split{display:grid;gap:clamp(36px,5vw,66px)}
@media (min-width:940px){.split{grid-template-columns:1fr 340px;align-items:start}}
.aside{
  position:sticky;top:calc(var(--bar-h,47px) + var(--hd-h,64px) + 24px);
  display:grid;gap:2px;background:var(--bone-3);border:1px solid var(--bone-3);
}
.aside__box{background:var(--white);padding:26px}
.aside h3{font-size:1.12rem;margin-bottom:8px}
.aside p{font-size:.88rem;color:var(--on-light-dim);line-height:1.56;margin-bottom:18px}
.aside .btn{width:100%;justify-content:center}
.spec{margin:0;display:grid;grid-template-columns:1fr auto;gap:11px 16px;font-size:.84rem}
.spec dt{font-family:var(--body);font-size:.86rem;color:var(--on-light-dim);align-self:center}
.spec dd{margin:0;text-align:right;font-family:var(--body);font-variant-numeric:tabular-nums;color:var(--on-light)}

.faq{border-top:1px solid var(--bone-3);margin-top:44px}
.faq details{border-bottom:1px solid var(--bone-3)}
.faq summary{
  cursor:pointer;padding:20px 0;font-weight:600;font-size:1.02rem;
  display:flex;justify-content:space-between;gap:18px;align-items:center;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);font-weight:400;color:var(--cu-600);font-size:1.4rem;flex:none;line-height:1}
.faq details[open] summary::after{content:"\2013 "}
.faq p{padding:0 0 22px;margin:0;color:var(--on-light-dim);font-size:var(--fs-sm);line-height:1.65;max-width:64ch}

/* ============================================================
   SITEMAP + 404
   Link rows: a name, then a quiet line under it (the path on the
   sitemap, a reason to click on the 404). Mirrored, with literal
   values, in resources/views/sitemap-xsl.blade.php.
   ============================================================ */
.smap__title{font-size:var(--fs-h1)}
.smap{display:grid;gap:clamp(28px,4vw,44px) clamp(24px,3vw,40px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.smap h2{
  font-size:var(--fs-h3);font-weight:700;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:12px;border-bottom:2px solid var(--cu-700);
}
.smap h2 span{font-family:var(--body);font-size:.82rem;font-weight:500;color:var(--on-light-dim)}
.linklist{list-style:none;margin:0;padding:0}
.linklist li{border-bottom:1px solid var(--bone-3)}
.linklist a{display:block;padding:11px 10px;margin-inline:-10px;text-decoration:none;border-radius:2px;transition:background .16s}
.linklist a:hover{background:var(--bone-2)}
.linklist b{display:block;font-weight:600;font-size:.98rem;line-height:1.3}
.linklist a:hover b{color:var(--cu-800)}
.linklist small{display:block;margin-top:2px;font-family:var(--body);font-size:.82rem;color:var(--on-light-dim);overflow-wrap:anywhere}
.nf{display:grid;gap:clamp(36px,5vw,72px);align-items:start}
@media (min-width:880px){.nf{grid-template-columns:1.1fr .9fr}}
.nf__title{font-size:var(--fs-display)}
.nf .linklist{border:1px solid var(--bone-3);background:var(--white);padding-inline:20px}
.nf .linklist li:last-child{border-bottom:0}
.nf .linklist a{padding-block:15px}
.nf .linklist small{font-family:var(--body);font-size:.88rem;letter-spacing:0}

/* ============================================================
   BRAND BOARD
   ============================================================ */
.board{background:var(--bone);padding-block:clamp(40px,5vw,72px)}
.board section{margin-bottom:clamp(48px,6vw,84px)}
.board h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:8px}
.board .sub{font-size:var(--fs-sm);color:var(--on-light-dim);margin-bottom:30px;max-width:62ch}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--bone-3)}
@media (min-width:640px){.swatches{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1000px){.swatches{grid-template-columns:repeat(6,1fr)}}
.sw{background:var(--white);padding:0 0 14px;display:flex;flex-direction:column}
.sw i{display:block;height:82px;box-shadow:inset 0 0 0 1px rgba(42,35,32,.13)}
.sw b{font-family:var(--mono);font-size:.72rem;padding:12px 14px 2px;font-weight:500}
.sw span{font-family:var(--mono);font-size:.66rem;color:var(--on-light-dim);padding:0 14px}
.typerow{border-top:1px solid var(--bone-3);padding:24px 0;display:grid;gap:8px}
.typerow .meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--on-light-dim)}
.kit{display:grid;gap:2px;background:var(--bone-3)}
@media (min-width:760px){.kit{grid-template-columns:repeat(2,1fr)}}
.kit > div{background:var(--white);padding:30px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.note{
  border-left:3px solid var(--cu-600);padding:14px 0 14px 18px;
  font-size:var(--fs-sm);color:var(--on-light-dim);line-height:1.6;max-width:66ch;
}

/* ============================================================
   CONTRAST PASS (2026-10-12)
   "Everything is so tan, it kind of garbles together." Every surface
   had drifted into one narrow band of sand, so sections blurred into
   each other. Reading sections stay light (the client's call); the
   hero, the trust strip, the page heroes, the full-service band, the
   service-areas band and the footer go back to the logo's charcoal, so
   the page has dark anchors to read against. Photos in those bands
   show in their own colour instead of washed to beige.
   Everything here wins over the light-ground block above.
   ============================================================ */
body :is(.hero,.trust,.phero,.fs,.areas,.site-ft){
  --ink-900:#1A1614;
  --ink-800:#1F1A17;
  --ink-700:#2B2420;
  --ink-600:#3D332D;
  --ink-500:#6E5E52;
  --on-dark:#E6DDD3;
  --on-dark-dim:#B9AB9E;
  --hero-lede:#D3C7BA;
}
body :is(.hero,.phero,.fs,.areas) :is(h1,h2,h3),
body .fs .trade h3{color:#F5F0EA}
body .hero h1 em{color:var(--cu-300)}
body :is(.hero,.phero,.fs,.areas) .eyebrow,
body .fs .trade em{color:var(--cu-300)}
body :is(.hero,.phero,.fs,.areas) .btn--ghost{border-color:var(--ink-500);color:#F5F0EA}
body :is(.hero,.phero,.fs,.areas) .btn--ghost:hover{background:#F5F0EA;color:#1A1614;border-color:#F5F0EA}
body .trust li{color:var(--on-dark-dim)}

/* Breadcrumbs sit between the white header and a page hero, so they join
   the hero's charcoal rather than making a sand strip of their own. */
body .crumbs{background:#1A1614;color:#B9AB9E;border-bottom:1px solid #2B2420}
body .crumbs a{color:var(--cu-300)}

/* The home hero: the tile in its own terracotta, held back on the left
   by charcoal so the headline reads, faded into the trust strip below. */
body .hero__photo img{filter:saturate(1.05) contrast(1.04) brightness(.9);opacity:1}
body .hero__photo i{display:none}
body .hero__wash{
  background:
    linear-gradient(180deg,transparent 58%,rgba(26,22,20,.55) 86%,#1A1614 100%),
    linear-gradient(90deg,rgba(26,22,20,.95) 0%,rgba(26,22,20,.82) 36%,rgba(26,22,20,.30) 70%,rgba(26,22,20,.06) 100%);
}
body .hero__glow{opacity:.18}

/* Service areas: the rooftops photo in colour, dimmed under charcoal. */
body .areas .atmo__img{filter:saturate(.9) brightness(.85);opacity:.5}
body .areas .atmo__tint{display:none}
body .areas.atmo--bg .atmo__scrim{background:linear-gradient(90deg,rgba(26,22,20,.62),rgba(26,22,20,.9) 62%)}

/* The storm band stays light, but plain: the copper-washed texture
   behind it was half of the beige. Its own job photo carries it. */
body .storm .atmo__img,
body .storm .atmo__tint{display:none}
body .storm{background:var(--bone-2)}

/* The roofline drawn into the full-service band takes the band's colour. */
body .roofline svg path:first-of-type{fill:#1A1614}

/* Header goes white with a crisp rule, so it no longer reads as one
   more band of sand. */
body .site-hd{background:color-mix(in srgb,#FFFFFF 95%,transparent);border-bottom-color:var(--bone-3)}

/* Footer on charcoal: the reversed logo, light links, copper headings. */
body .site-ft{border-top-color:var(--ink-700)}
body .site-ft .logo .logo--dark{display:block}
body .site-ft .logo .logo--light{display:none}
body .ft__grid h2{color:var(--cu-400)}
body .ft__grid a:hover{color:#F5F0EA}
body .ft__bot{color:#9C8C7E}
body .site-ft .social a{color:var(--on-dark);border-color:var(--ink-500)}
body .site-ft .social svg{color:var(--cu-400)}
body .site-ft .social a:hover{background:var(--cu-700);border-color:var(--cu-700);color:#fff}
body .site-ft .social a:hover svg{color:#fff}

/* The home hero rotates (2026-10-12): every slide is stacked in .hero__photo
   and the visible one carries .is-on. Without JS, or with reduced motion,
   the first slide simply stays. Job photos are far brighter than the tile,
   so on a phone, where the headline spans the whole photo, the wash darkens
   evenly instead of only from the left. */
body .hero__photo img{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
body .hero__photo img.is-on{opacity:1}
@media (max-width:760px){
  body .hero__wash{
    background:
      linear-gradient(180deg,transparent 58%,rgba(26,22,20,.55) 86%,#1A1614 100%),
      linear-gradient(0deg,rgba(26,22,20,.78),rgba(26,22,20,.78));
  }
}

/* The roof quote quiz (<x-quote-quiz/>). Without JS every question shows, one
   under the next; .is-js turns them into steps, one .is-on at a time. */
.quiz fieldset{border:0;padding:0;margin:0;min-width:0}
.quiz legend{font-family:var(--display);font-size:1.35rem;line-height:1.25;padding:0;margin-bottom:6px;color:var(--on-light)}
.quiz__q + .quiz__q{margin-top:32px}
.quiz.is-js .quiz__q{display:none;margin-top:0}
.quiz.is-js .quiz__q.is-on{display:block}
.quiz__meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:var(--fs-sm);color:var(--on-light-dim);margin-bottom:10px}
.quiz__back{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.quiz__bar{height:4px;background:var(--bone-2);margin-bottom:26px}
.quiz__bar span{display:block;height:100%;width:0;background:var(--cu-700);transition:width .25s}
.quiz__hint{font-size:var(--fs-sm);color:var(--on-light-dim);margin:4px 0 0}
.quiz__opts{display:grid;gap:10px;margin:18px 0 0}
@media (min-width:520px){.quiz__opts{grid-template-columns:1fr 1fr}}
.quiz__opt{position:relative;display:block;cursor:pointer}
.quiz__opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.quiz__opt span{
  display:block;padding:16px 18px;border:1px solid var(--bone-3);background:var(--bone);border-radius:2px;
  font-weight:600;color:var(--on-light);transition:border-color .15s,background .15s;
}
.quiz__opt:hover span{border-color:var(--cu-600);background:var(--white)}
.quiz__opt input:checked + span{border-color:var(--cu-700);background:var(--white);box-shadow:inset 0 0 0 1px var(--cu-700)}
.quiz__opt input:focus-visible + span{outline:2px solid var(--cu-600);outline-offset:2px}
.quiz .row2{margin-top:18px}
.quiz__done p{margin-top:12px}
.quiz__range-label{font-size:var(--fs-sm);color:var(--on-light-dim);margin-top:18px}
/* A phone visitor from an ad sees the first question, not the intro, first. */
@media (max-width:919px){.quote .quiz,.quote .quiz__done{order:-1}}
.quiz__range{font-family:var(--display);font-size:clamp(1.8rem,4vw,2.4rem);line-height:1.1;margin:4px 0 0;color:var(--on-light)}

/* The ad landing page (/free-roof-quote): the bare layout's header and
   footer, then the quiz in one narrow column. Two tiles a row even on a
   phone, so most questions fit on one screen. */
.site-hd--bare .site-hd__in{justify-content:space-between}
.lp{padding-block:clamp(22px,5vw,56px) clamp(40px,7vw,80px)}
.lp__in{max-width:620px;margin-inline:auto;padding-inline:var(--gut)}
.lp h1{font-size:clamp(1.85rem,6.4vw,2.7rem);line-height:1.08;text-align:center}
.lp__lede{text-align:center;color:var(--on-light-dim);margin:14px auto 26px;max-width:52ch}
.lp .quiz__opts{grid-template-columns:1fr 1fr}
.lp .quiz__opt span{display:flex;align-items:center;justify-content:center;min-height:64px;text-align:center;line-height:1.25}
/* Each step scrolls the form's top in, clear of the sticky header. */
.funnel{scroll-margin-top:calc(var(--hd-h,72px) + 12px)}
.quiz__opts--icons .quiz__opt span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:112px;padding:18px 10px;text-align:center;line-height:1.25}
.quiz__opt svg,.funnel__safe svg{width:30px;height:30px;fill:none;stroke:var(--cu-700);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.funnel .quiz__hint + .field{margin-top:18px}
.funnel__next{margin-top:2px}
.funnel__safe{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:22px;font-size:var(--fs-sm);color:var(--on-light-dim)}
.funnel__safe svg{width:16px;height:16px}
.lp__trust{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lp__trust li{background:var(--white);border:1px solid var(--bone-3);padding:10px 12px;font-size:var(--fs-sm);font-weight:600;text-align:center}
.lp__stars{color:var(--cu-700);letter-spacing:1px}
.lp__next{margin-top:40px}
.lp__next h2{font-size:1.35rem}
.lp__next ol{margin:12px 0 0;padding-left:1.3em}
.lp__next li{margin-top:8px}
.lp-ft{border-top:1px solid var(--bone-3);padding:22px var(--gut) 30px;text-align:center;font-size:var(--fs-sm);color:var(--on-light-dim)}
.lp-ft p + p{margin-top:6px}