/* =====================================================================
   Blackbird Construction - site stylesheet
   Danny Bird, Provo UT. Building since 2001. BLACKBIRD DESIGN-BUILD.

   MONOCHROME BY DESIGN. Black, white, and shades of grey, warmed toward
   precast concrete. This is not a stylistic guess: it is taken from the
   real 2020 brand kit in data/brand-source/. The logo charcoal sampled
   identically at #3B3B3B across every asset (both signs, the wordmark,
   and the presentation), and the brand's own signage mockups set the
   logo on precast concrete panels.

   THERE IS NO ACCENT COLOR. Buttons and emphasis carry weight through
   near-black, white, and contrast, the way the brand's own material
   does. Adding an accent hue would be off-brand.

   The ONE exception is neon green (#16C047) for social proof, per the
   Quantum Qube standard. On a fully monochrome page it pops harder than
   it ever did on the CEOC or Lynnwood sites, which is the point.
   Muted grey is used for review star glyphs.

   IMPORTANT: class names are intentionally identical to the CEOC and
   Lynnwood stylesheets so page patterns transfer between sites verbatim.
   The --navy / --red / --accent aliases below exist so any markup copied
   from those sites keeps working. Do not rename classes. Retokenize.
   ===================================================================== */

:root {
  /* J&H LANDSCAPING — refined luxury palette.
     Deep landscape green for dark sections and headings, warmed stone for
     the canvas, brass as the one metal accent. Class names are kept
     identical to the Blackbird/CEOC/Lynnwood system so markup transfers;
     only the token VALUES change. */
  --ink-0:       #14261C;   /* deep forest green: dark sections, footer, headings */
  --ink-1:       #1E3527;   /* raised card on a dark section */
  --brand:       #24462F;   /* mid brand green */
  --ink-2:       #24462F;   /* alias of --brand for copied markup */
  --ink-3:       #5E7264;   /* mid sage, eyebrows and secondary rules */
  --white:       #FFFFFF;
  --cream:       #F5F4EE;   /* page canvas: warm stone */
  --cream-warm:  #E8E5DA;   /* alt band: light stone */
  --ink:         #232824;   /* body text */
  --ink-soft:    #59625B;   /* muted body text */
  --line:        #DBD8CB;   /* stone hairline */
  --line-dark:   rgba(255,255,255,0.15);
  --star:        #C0812E;   /* warm sunset amber stars, tied to the logo */

  /* RGB channels for shadows, photo scrims, frosted header. Match hexes above. */
  --ink-rgb:     20, 38, 28;
  --cream-rgb:   245, 244, 238;
  --brand-rgb:   36, 70, 47;
  --scrim-rgb:   14, 30, 21;

  /* Action colour: deep landscape green. Kept as --accent so copied markup works. */
  --accent:      #2E6B3E;
  --accent-dark: #22522F;

  /* Compatibility aliases: markup copied from CEOC / Lynnwood uses these. */
  --navy:        var(--ink-0);
  --navy-2:      var(--ink-1);
  --navy-3:      var(--ink-3);
  --red:         var(--accent);
  --red-dark:    var(--accent-dark);

  /* Precast concrete texture, generated inline so it costs no HTTP request
     and can tint any surface. Apply with the .concrete utility. */
  --concrete: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");

  /* ---------------------------------------------------------------
     HIGHLIGHT COLOUR (brass)
     The palette above is monochrome by design and stays that way. This
     is the one hue allowed into it, and it earns its place: the hero
     footage is already full of warm interior light against dark
     cladding, so brass ties the type to the photography instead of
     importing an unrelated colour.

     Two values because one will not do both jobs. --gold has enough
     depth to stay legible on cream at 11px uppercase; --gold-light is
     the version that reads on near-black. Use the right one for the
     surface, never one for both.

     SCOPE, AND JONATHAN HAS CONFIRMED THIS: brass is an OCCASIONAL
     accent, not a second brand colour. It is deliberately restrained to
     eyebrows, the Plan/Build/Improve step labels, section rules, "go"
     arrows, and the one highlighted stat. That is the whole list.

     NOT buttons. The near-black button is the brand, and turning it
     gold would make this a different company. Do not add brass to
     headings, body copy, borders, backgrounds, icons at large sizes, or
     anything that repeats often enough to read as a theme. The value of
     the colour comes entirely from how rarely it appears. If a new page
     seems to need more of it, the page needs better hierarchy instead.
     To go back to pure monochrome, set both to var(--ink-3) / #fff.
     --------------------------------------------------------------- */
  --gold:        #B4531B;   /* sunset terracotta-amber on cream/white (from the logo) */
  --gold-light:  #E9A94C;   /* sunset amber on deep green (from the logo) */

  /* Validation errors only. NOT a brand colour and never used decoratively.
     A monochrome site still has to make a broken field look broken. */
  --error:        #C8102E;

  /* Tick glyph, used as a CSS mask so it can take any colour. Inline so
     it costs no request. */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");

  /* Social proof pops OUTSIDE the brand palette - neon green (QQ standard) */
  --green:        #16C047;
  --green-deep:   #0F9A37;
  --green-border: rgba(22,192,71,0.48);
  --green-ring:   rgba(22,192,71,0.10);
  --green-glow:   rgba(20,70,36,0.34);

  /* Elegant high-contrast serif for display, clean sans for body. The serif
     is what carries the "luxury" read; keep body in Inter for legibility. */
  --font-display: "Cormorant Garamond", "Cinzel", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-brand:   "Cinzel", Georgia, serif;   /* wordmark + eyebrows */

  --wrap: 1200px;
  --r: 6px;       /* small radius */
  --r-lg: 12px;   /* card radius */

  --s-1: 8px;  --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 48px; --s-6: 64px;  --s-7: 96px;  --s-8: 128px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
figure { margin: 0; } /* reset UA default so card figures go edge-to-edge */
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-0);
  line-height: 1.08;
  letter-spacing: -0.005em;   /* serif wants near-neutral tracking, not the sans's tight negative */
  margin: 0 0 var(--s-3);
}
/* Headings are sized fluidly, but length is the real risk: a long headline
   is what breaks a layout, not a big font. Three guards, applied to every
   heading on the site so a future copy change cannot overflow anything.
     text-wrap: balance  evens the lines instead of leaving one orphan word.
     overflow-wrap       lets an unbreakable token wrap rather than overflow.
     hyphens             only fires when a single word is wider than its box. */
h1, h2, h3, .hero__title, .article__title {
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(34px, 5.2vw, 60px); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: clamp(20px, 2vw, 25px); }
p { margin: 0 0 var(--s-3); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--s-7) 0; }
.section--tight { padding: var(--s-6) 0; }
.center { text-align: center; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-soft); line-height: 1.65; }
/* Eyebrows sit in mid grey, not near-black. With no accent hue to separate
   them from the heading below, the separation has to come from weight,
   size, and letterspacing instead. */
.eyebrow {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s-2);
}
.eyebrow--navy { color: var(--ink-3); }
.measure { max-width: 720px; }
.measure-sm { max-width: 560px; }

/* Precast concrete grain. Costs no request (inline SVG noise) and keeps a
   monochrome page from reading as flat digital grey. Safe on any surface. */
.concrete { background-image: var(--concrete); }
/* Cast panel: a raised concrete slab, for framing photos or stat bands */
.panel {
  background: var(--cream-warm); background-image: var(--concrete);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px;
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  border: 1.5px solid transparent; border-radius: var(--r); cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); }
.btn--dark { background: var(--ink-0); color: #fff; }
.btn--dark:hover { background: var(--ink-2); }
.btn--ghost { background: transparent; color: var(--ink-0); border-color: rgba(28,28,28,0.25); }
.btn--ghost:hover { border-color: var(--ink-0); }
/* The primary action ON a dark surface. Inverted, because on a monochrome
   site the near-black primary button disappears against a dark section. */
.btn--white { background: #fff; color: var(--ink-0); border-color: #fff; }
.btn--white:hover { background: var(--cream-warm); color: var(--ink-0); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn--lg { min-height: 58px; padding: 0 38px; }

.tel-link { font-weight: 600; font-size: 15px; color: var(--ink-0); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.tel-link:hover { color: var(--accent); }

/* ---- Stars ---- */
.stars { color: var(--star); letter-spacing: 2px; font-size: 16px; line-height: 1; }
.rating-row { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--ink-0); }
.rating-row b { font-weight: 700; }
.rating-row .dot { color: var(--line); }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244,243,241,0.93);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 44px; width: auto; }
.brand__txt { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: var(--ink-0); line-height: 1.05; }
.brand__txt small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--ink-0); transition: color .15s; }
.nav a:hover { color: var(--accent); }
.nav__cta { display: none; color: #fff !important; }
.dropdown__all { font-weight: 700 !important; color: var(--accent) !important; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px !important; }
.header-cta { display: flex; align-items: center; gap: 18px; }
.nav-toggle { display: none; background: none; border: 0; font-size: 26px; color: var(--ink-0); cursor: pointer; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { background: var(--cream); padding: var(--s-6) 0; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; grid-template-areas: "head form" "rest form"; column-gap: var(--s-6); row-gap: var(--s-4); align-items: start; }
/* Single-column hero for pages with no inline form (e.g. /service-areas/,
   which is the A2P chat-widget page and must stay form-free). */
.hero__grid--solo { grid-template-columns: 1fr; grid-template-areas: "head" "rest"; max-width: 760px; }
.hero__head { grid-area: head; }
.hero__rest { grid-area: rest; }
.hero__form { grid-area: form; align-self: start; }
.hero__title { margin-bottom: var(--s-3); }
.hero__sub { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-soft); line-height: 1.6; max-width: 560px; margin-bottom: var(--s-4); }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: var(--s-4); }
.hero__rating { margin-bottom: var(--s-4); }
.trust-pills { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.trust-pill { font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--white); border: 1px solid var(--line); border-radius: 100px; padding: 7px 15px; display: inline-flex; align-items: center; gap: 7px; }
.trust-pill svg { width: 15px; height: 15px; }

.hero__media { position: relative; }
.hero__media img { width: 100%; height: 100%; max-height: 560px; object-fit: cover; border-radius: var(--r-lg); }
.hero__caption {
  position: absolute; left: 20px; bottom: 20px; right: 20px;
  background: rgba(28,28,28,0.88); color: #fff; backdrop-filter: blur(4px);
  border-radius: var(--r); padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.hero__caption b { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.hero__caption span { font-size: 12.5px; color: rgba(255,255,255,0.75); display: block; }
.hero__caption .chip { text-align: right; }
.hero__caption .chip b { color: var(--star); font-family: var(--font-body); font-size: 18px; }

.hero__byline { display: flex; align-items: center; gap: 12px; margin-top: var(--s-4); }
.hero__byline img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(28,28,28,0.18); flex: none; }
.hero__byline span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.hero__byline b { color: var(--ink-0); font-weight: 700; }

/* =====================================================================
   AUDIENCE SPLIT (residential vs commercial front door)
   Blackbird-specific: this site serves homeowners AND commercial clients,
   so most pages need a visible fork instead of one generic CTA.
   ===================================================================== */
.fork { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
/* Grid tracks default to min-width:auto, which refuses to shrink past the
   longest word. Without this a narrow column overflows instead of wrapping. */
.fork__card { min-width: 0; }
/* Three-up variant. This used to be an inline style on index.html, which
   beat the mobile media query and pushed the third card off a phone screen.
   As a class it collapses with everything else. */
.fork--3 { grid-template-columns: repeat(3, 1fr); }
.fork__card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px; text-decoration: none;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.fork__card:hover { border-color: var(--accent); box-shadow: 0 18px 40px -26px rgba(28,28,28,0.4); transform: translateY(-2px); }
.fork__card svg { width: 26px; height: 26px; color: var(--accent); margin-bottom: 4px; }
.fork__label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.fork__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink-0); line-height: 1.15; margin: 0; }
.fork__sub { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.fork__go { margin-top: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 6px; }
.fork--dark .fork__card { background: var(--ink-1); border-color: var(--line-dark); }
.fork--dark .fork__title { color: #fff; }
.fork--dark .fork__sub { color: rgba(255,255,255,0.7); }
.fork--dark .fork__label { color: rgba(255,255,255,0.55); }

/* =====================================================================
   TRUST STRIP
   ===================================================================== */
.trust-strip { background: var(--ink-0); color: #fff; }
.trust-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 30px; padding: 20px 24px; text-align: center; }
.trust-strip__item { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.92); display: inline-flex; align-items: center; gap: 9px; letter-spacing: 0.01em; white-space: nowrap; }
.trust-strip__item .stars { font-size: 15px; }
.trust-strip__sep { display: none; }

/* A dot between items on wide screens, so the row reads as one credential
   line instead of four phrases floating at odd intervals. */
@media (min-width: 981px) {
  .trust-strip__item + .trust-strip__item::before {
    content: "";
    width: 3px; height: 3px; border-radius: 50%;
    background: rgba(255,255,255,0.35);
    margin-right: 21px;
    flex: none;
  }
}

/* MOBILE. Two problems to solve, both real:
   1. white-space:nowrap made the longer strings wider than a 320px screen,
      which pushed the whole page into a horizontal scroll.
   2. Once they stack, four centred sentences read as a loose list with no
      structure. Left-aligning them behind a tick turns the same words into
      a credential list, which is what they were always meant to be. */
@media (max-width: 980px) {
  /* Stacked and left-aligned to match the hero above it. The 480px cap and
     auto margins that used to live here were a PHONE rule: harmless at 375px
     where 480 is the whole screen, but on a tablet they centred this strip in
     170px gutters while every other block on the page started at 24px. Two
     different alignments in one viewport reads as broken. The cap now only
     applies on real phones, below. */
  .trust-strip__inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    gap: 0;
    padding: 6px 24px;
  }
  .trust-strip__item {
    white-space: normal;          /* let long strings wrap instead of overflow */
    align-items: flex-start;
    gap: 11px;
    padding: 13px 0;
    font-size: 14.5px;
    line-height: 1.4;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .trust-strip__item:last-child { border-bottom: 0; }
  .trust-strip__item::before {
    content: "";
    flex: none;
    width: 17px; height: 17px;
    margin-top: 1px;
    background: currentColor;
    opacity: 0.9;
    -webkit-mask: var(--tick) center/contain no-repeat;
            mask: var(--tick) center/contain no-repeat;
  }
}

/* =====================================================================
   STAT BAND (scale proof: years, projects, sq ft delivered)
   Blackbird-specific: Danny's edge is scale and tenure, so numbers get
   their own band instead of hiding inside body copy.
   ===================================================================== */
.stat-band { background: var(--cream-warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-band__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); padding: var(--s-5) 24px; }
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.03em; color: var(--ink-0); line-height: 1; }
.stat__num em { font-style: normal; color: var(--gold); }
.stat-band--dark .stat__num em { color: var(--gold-light); }
.stat__label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); margin-top: 9px; line-height: 1.4; }
.stat-band--dark { background: var(--ink-0); border-color: var(--line-dark); }
.stat-band--dark .stat__num { color: #fff; }
.stat-band--dark .stat__label { color: rgba(255,255,255,0.68); }

/* =====================================================================
   FEATURED QUOTE BAND
   ===================================================================== */
.quote-band { background: var(--cream-warm); }
.quote-band__inner { max-width: 900px; margin: 0 auto; text-align: center; padding: var(--s-6) 24px; }
.quote-band blockquote {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(20px, 2.4vw, 27px); line-height: 1.45; color: var(--ink);
  margin: var(--s-3) 0;
}
.quote-band cite { font-style: normal; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.quote-band cite small { display: block; font-weight: 500; color: var(--ink-soft); opacity: 0.8; }

/* =====================================================================
   SERVICE CARDS
   ===================================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: center; }
/* NOTE: J&H uses the image-top service card defined at the end of this file.
   The old photo-overlay .svc-card variant was removed to avoid a collision. */

/* =====================================================================
   SECTORS (commercial: office, retail, restaurant, industrial, etc.)
   Blackbird-specific. Text-first cards so a sector never needs a photo
   we do not actually have.
   ===================================================================== */
.sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.sector {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; transition: border-color .16s, box-shadow .16s;
}
.sector:hover { border-color: var(--accent); box-shadow: 0 16px 36px -26px rgba(28,28,28,0.38); }
.sector svg { width: 28px; height: 28px; color: var(--gold); }
.sector h3 { font-size: 19px; margin: 0; }
.sector p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.sectors--dark .sector { background: var(--ink-1); border-color: var(--line-dark); }
.sectors--dark .sector h3 { color: #fff; }
.sectors--dark .sector p { color: rgba(255,255,255,0.7); }
.sectors--dark .sector svg, .sectors--dark .fork__go, .colorado .fork__go { color: var(--gold-light); }

/* =====================================================================
   OWNER STORY
   ===================================================================== */
.story { background: var(--white); }
.story__media img { border-radius: var(--r-lg); width: 100%; object-fit: cover; }
.story__points { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.story__points li { display: flex; gap: 12px; font-size: 16px; color: var(--ink); }
.story__points svg { flex: none; width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.story-quote { border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; margin: var(--s-4) 0 0; }
.story-quote p { font-family: var(--font-body); font-weight: 500; font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0 0 6px; }
.story-quote cite { font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink-soft); }

/* =====================================================================
   FEATURED PROJECTS
   ===================================================================== */
.projects { background: var(--cream); }
.proj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.proj { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 1; }
.proj img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.proj:hover img { transform: scale(1.06); }
.proj figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; background: linear-gradient(transparent, rgba(28,28,28,0.85)); color: #fff; font-size: 13px; font-weight: 600; }
.proj figcaption small { display: block; font-weight: 400; opacity: 0.8; }
.proj--wide { grid-column: span 2; aspect-ratio: 2 / 1; }

/* Project spec rows (commercial case studies: type, size, scope, timeline) */
.spec { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.spec li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec dt, .spec .k { font-weight: 600; color: var(--ink-soft); }
.spec dd, .spec .v { margin: 0; font-weight: 700; color: var(--ink-0); text-align: right; }

/* =====================================================================
   DARK FEATURE SECTION (was .colorado on CEOC - name kept for portability)
   ===================================================================== */
.colorado { background: var(--ink-0); background-image: var(--concrete); color: #fff; }
.colorado h2, .colorado h3 { color: #fff; }
.colorado .eyebrow { color: var(--gold-light); opacity: 1; }
.colorado .lead { color: rgba(255,255,255,0.78); }
.climate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.climate { background: var(--ink-1); border: 1px solid var(--line-dark); border-radius: var(--r-lg); padding: 26px; }
.climate svg { width: 30px; height: 30px; color: var(--accent); margin-bottom: 14px; }
.climate h3 { font-size: 19px; margin-bottom: 8px; }
.climate p { font-size: 14.5px; color: rgba(255,255,255,0.72); margin: 0; line-height: 1.6; }
/* On a cream/light section the dark card styles must be overridden or the
   headings go invisible. Always add is-light when .climate-grid sits on cream. */
.climate-grid.is-light .climate { background: var(--white); border-color: var(--line); }
.climate-grid.is-light .climate h3 { color: var(--ink-0); }
.climate-grid.is-light .climate p { color: var(--ink-soft); }
.colorado__quote { margin: var(--s-5) auto 0; text-align: center; font-family: var(--font-body); font-weight: 500; font-size: clamp(18px,2vw,24px); line-height: 1.5; color: #fff; max-width: 760px; }
.colorado__quote cite { display: block; font-style: normal; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.6); margin-top: 14px; }

/* =====================================================================
   REVIEWS WALL
   ===================================================================== */
.reviews { background: var(--cream-warm); }
.review-grid { columns: 3; column-gap: var(--s-3); margin-top: var(--s-5); }
.review { break-inside: avoid; background: var(--white); border: 1.5px solid var(--green-border); border-radius: var(--r-lg); padding: 24px; margin-bottom: var(--s-3); box-shadow: 0 0 0 3px var(--green-ring), 0 14px 32px -22px var(--green-glow); }
.review .stars { margin-bottom: 12px; }
.review p { font-size: 15.5px; line-height: 1.62; color: var(--ink); margin: 0 0 16px; }
.review__who { display: flex; align-items: center; gap: 12px; }
.review__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ink-0); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex: none; }
.review__name { font-weight: 700; font-size: 14.5px; color: var(--ink-0); }
.review__meta { font-size: 12.5px; color: var(--ink-soft); }

.gicon { width: 18px; height: 18px; flex: none; }
.review__head { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; flex-wrap: wrap; }
.review__head .stars { font-size: 15px; }
.review__verified { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 4px; }
.review__date { font-size: 12px; color: var(--ink-soft); margin-left: auto; }

/* Featured photo-proof reviews (review + real project photo) */
.rev-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.rev-proof { background: var(--white); border: 1.5px solid var(--green-border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 0 4px var(--green-ring), 0 18px 42px -22px var(--green-glow); }
.rev-proof__photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rev-proof__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.rev-proof__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 12px; }
.rev-proof__head .stars { font-size: 15px; }
.rev-proof__verified { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-deep); margin-left: auto; white-space: nowrap; }
.rev-proof blockquote { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.rev-proof figcaption { margin-top: auto; display: flex; align-items: center; gap: 11px; }
.rev-proof__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ink-0); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }
.rev-proof__name { font-weight: 700; font-size: 14px; color: var(--ink-0); }
.rev-proof__meta { font-size: 12.5px; color: var(--ink-soft); }

/* PROOF-GLOW snippet (drops into any section above its CTA) */
.proof-glow-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: var(--s-5); }
.proof-glow { width: 100%; max-width: 600px; background: var(--white); border: 1.5px solid var(--green-border); border-radius: var(--r-lg); padding: 18px 22px; box-shadow: 0 0 0 4px var(--green-ring), 0 18px 42px -22px var(--green-glow); text-align: left; }
.proof-glow__head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.proof-glow__head .gicon { width: 17px; height: 17px; }
.proof-glow__head .stars { font-size: 14px; }
.proof-glow__verified { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-deep); margin-left: auto; }
.proof-glow__text { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.55; color: var(--ink); margin: 0 0 10px; }
.proof-glow__name { font-size: 13.5px; font-weight: 700; color: var(--green-deep); }
.colorado .proof-glow { border-color: rgba(22,192,71,0.6); box-shadow: 0 0 0 4px rgba(22,192,71,0.16), 0 0 46px -6px rgba(22,192,71,0.5); }

/* =====================================================================
   SERVICE AREAS
   ===================================================================== */
.areas { background: var(--white); }
.areas__cols { columns: 4; column-gap: var(--s-4); margin-top: var(--s-4); }
.areas__cols a { display: block; text-decoration: none; font-size: 16px; font-weight: 500; color: var(--ink-0); padding: 9px 0; border-bottom: 1px solid var(--line); transition: color .15s, padding-left .15s; }
.areas__cols a:hover { color: var(--accent); padding-left: 6px; }
.areas__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; margin-top: var(--s-4); }
.areas__cols--compact { columns: 2; column-gap: var(--s-4); }
.map-embed { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--cream-warm); aspect-ratio: 4 / 3; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.3) contrast(1.05); }
.map-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ink-soft); text-align: center; padding: 24px; }
.map-placeholder svg { width: 34px; height: 34px; color: var(--ink-3); }

/* =====================================================================
   PROCESS (Plan / Build / Improve lives here)
   ===================================================================== */
.process { background: var(--cream); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.step { position: relative; }
.step__num { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 14px; letter-spacing: -0.03em; }
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
.colorado .step h3 { color: #fff; }
.colorado .step p { color: rgba(255,255,255,0.72); }

/* =====================================================================
   PLAN / BUILD / IMPROVE
   Danny's three-part framing. Two components so it can appear at full size
   on a hub page and as a slim strip on every other page without bloating it.

   .pbi-full   - three cards, one per stage, for homepage and hub pages
   .pbi        - one compact bar, for running on every page
   Add .pbi--seq for the arrow separators that read as a sequence.
   ===================================================================== */
.pbi-full { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.pbi-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; position: relative; }
.pbi-card__step { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.pbi-card__step i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0; }
.pbi-card h3 { font-size: 24px; margin: 0 0 10px; }
.pbi-card p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.pbi-card__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; }
.pbi-card__list li { font-size: 14px; color: var(--ink); display: flex; gap: 9px; line-height: 1.45; }
.pbi-card__list svg { flex: none; width: 16px; height: 16px; color: var(--green-deep); margin-top: 3px; }
.colorado .pbi-card { background: var(--ink-1); border-color: var(--line-dark); }
.colorado .pbi-card h3 { color: #fff; }
.colorado .pbi-card p { color: rgba(255,255,255,0.72); }
.colorado .pbi-card__list li { color: rgba(255,255,255,0.9); }
/* invert the numbered chip on dark, or it disappears into the card */
.colorado .pbi-card__step { color: var(--gold-light); }
.colorado .pbi-card__step i { background: var(--gold-light); color: var(--ink-0); }

/* Compact strip: the every-page version */
.pbi { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.pbi__item { padding: 20px 22px; border-right: 1px solid var(--line); }
.pbi__item:last-child { border-right: 0; }
.pbi__step { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.pbi--dark .pbi__step { color: var(--gold-light); }
.pbi__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink-0); margin: 7px 0 4px; line-height: 1.15; }
.pbi__text { font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.55; }
.pbi--dark { background: var(--ink-1); border-color: var(--line-dark); }
.pbi--dark .pbi__item { border-color: var(--line-dark); }
.pbi--dark .pbi__title { color: #fff; }
.pbi--dark .pbi__text { color: rgba(255,255,255,0.7); }

/* Sequence arrows: only meaningful when the three read as stages in order */
.pbi--seq .pbi__item, .pbi-full.pbi--seq .pbi-card { position: relative; }
.pbi--seq .pbi__item:not(:last-child)::after,
.pbi-full.pbi--seq .pbi-card:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -1px; width: 22px; height: 22px;
  transform: translate(50%, -50%) rotate(45deg);
  background: var(--white); border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  z-index: 2;
}
.pbi-full.pbi--seq .pbi-card:not(:last-child)::after { right: calc(var(--s-3) * -1); }
.colorado .pbi-full.pbi--seq .pbi-card:not(:last-child)::after,
.pbi--dark.pbi--seq .pbi__item:not(:last-child)::after { background: var(--ink-1); border-color: var(--line-dark); }

@media (max-width: 900px) {
  .pbi, .pbi-full { grid-template-columns: 1fr; }
  .pbi__item { border-right: 0; border-bottom: 1px solid var(--line); }
  .pbi__item:last-child { border-bottom: 0; }
  .pbi--dark .pbi__item { border-bottom-color: var(--line-dark); }
  /* the arrows point sideways, which is wrong once the cards stack */
  .pbi--seq .pbi__item::after, .pbi-full.pbi--seq .pbi-card::after { display: none; }
}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq { background: var(--white); }
.faq__list { max-width: 820px; margin: var(--s-5) auto 0; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 24px 40px 24px 0; position: relative; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink-0); }
.faq__q::after { content: "+"; position: absolute; right: 4px; top: 22px; font-size: 26px; color: var(--accent); font-family: var(--font-body); transition: transform .2s; }
/* When .faq__q is a <summary>, kill the native disclosure triangle so the
   only affordance is our own "+". Safari needs the -webkit- rule as well. */
.faq__q { display: block; list-style: none; }
.faq__q::marker { content: ""; }
.faq__q::-webkit-details-marker { display: none; }
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a { padding: 0 40px 24px 0; color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
details.faq__item summary { list-style: none; }
details.faq__item summary::-webkit-details-marker { display: none; }

/* =====================================================================
   FINAL CTA
   ===================================================================== */
/* The final CTA band is near-black, so its button MUST invert to white.
   (With an accent hue this was a coloured band with a dark button. In
   monochrome that combination would be black on black.) */
.final-cta { background: var(--ink-0); color: #fff; text-align: center; background-image: var(--concrete); }
.final-cta h2 { color: #fff; }
.final-cta p { color: rgba(255,255,255,0.92); font-size: 19px; max-width: 600px; margin: 0 auto var(--s-4); }
.final-cta .btn--white { background: #fff; color: var(--ink-0); border-color: #fff; }
.final-cta .btn--white:hover { background: var(--cream-warm); color: var(--ink-0); }
.final-cta .btn--ghost-light { color: #fff; }
.final-cta__call { display: block; margin-top: 18px; color: #fff; font-weight: 600; text-decoration: none; font-size: 16px; }
/* Light variant for pages that end on a bright note instead */
.final-cta--light { background: var(--cream-warm); color: var(--ink); background-image: var(--concrete); }
.final-cta--light h2 { color: var(--ink-0); }
.final-cta--light p { color: var(--ink-soft); }
.final-cta--light .btn--white { background: var(--ink-0); color: #fff; border-color: var(--ink-0); }
.final-cta--light .btn--white:hover { background: #000; }
.final-cta--light .final-cta__call { color: var(--ink-0); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { background: var(--ink-0); color: rgba(255,255,255,0.72); padding: var(--s-6) 0 var(--s-4); font-size: 14.5px; }
.footer a { color: rgba(255,255,255,0.72); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s-4); }
.footer h4 { color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__wordmark { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: #fff; line-height: 1.05; margin-bottom: 16px; }
.footer__wordmark span { display: block; font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 4px; }
.footer__legal { border-top: 1px solid var(--line-dark); margin-top: var(--s-5); padding-top: var(--s-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: rgba(255,255,255,0.5); }
.footer__badges { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 14px 0 0; }
.footer__badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.06); border: 1px solid var(--line-dark); border-radius: 100px; padding: 6px 13px; }
.footer__badge .stars { font-size: 12px; }
.footer__badge svg { width: 14px; height: 14px; color: #fff; }

/* =====================================================================
   NAV DROPDOWN
   ===================================================================== */
.has-dropdown { position: relative; }
.nav__trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; background: none; border: 0; font-family: var(--font-body); font-size: 14.5px; font-weight: 500; color: var(--ink-0); padding: 0; }
.nav__trigger:hover, .has-dropdown:hover .nav__trigger, .has-dropdown:focus-within .nav__trigger { color: var(--accent); }
.nav__trigger svg { width: 13px; height: 13px; transition: transform .2s; }
.has-dropdown:hover .nav__trigger svg, .has-dropdown:focus-within .nav__trigger svg { transform: rotate(180deg); }
.dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 244px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px; box-shadow: 0 16px 40px rgba(28,28,28,0.16); opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s; z-index: 60; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); font-size: 14px; font-weight: 500; color: var(--ink-0); text-decoration: none; }
.dropdown a:hover { background: var(--cream-warm); color: var(--accent); }
.dropdown a svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
/* Group label inside a dropdown: lets one Services menu hold every service
   under grouped headings (Plan / Build / Improve) without extra nav levels. */
/* margin:0 is load-bearing. .dropdown__group is a <p>, so it inherits the
   body paragraph margin and pushes 24px between the label and the links it
   labels, which makes each label look like it belongs to the group above. */
.dropdown__group { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); padding: 14px 12px 5px; }
.dropdown__group::before { content: ""; width: 14px; height: 2px; background: var(--gold); flex: none; border-radius: 1px; }
.dropdown__group:first-child { padding-top: 4px; }
/* Three groups, three columns. This was 1fr 1fr with Build and Improve
   stacked in the second column, which left a column of dead space under
   Plan and made the three groups look like two.

   It is LEFT-anchored, not centred. The base .dropdown centres itself on its
   trigger, which is fine for a narrow panel but not for this one: "Services"
   sits near the left of the nav, so a 700px panel centred on it started at
   -104px and was clipped off screen on any display between about 980px and
   1200px. Anchored left it opens rightward, where the room actually is.
   The width also clamps to the viewport so it can never overhang. */
.dropdown--wide {
  min-width: min(700px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 8px;
  left: 0;
  transform: translateY(6px);
}
.has-dropdown:hover .dropdown--wide,
.has-dropdown:focus-within .dropdown--wide { transform: translateY(0); }

/* =====================================================================
   BLOG - index + article
   ===================================================================== */
.blog-hero { background: var(--cream); padding: var(--s-7) 0 var(--s-5); border-bottom: 1px solid var(--line); }
.crumbs { font-size: 13px; color: var(--ink-soft); margin: 0 0 var(--s-3); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { color: var(--line); margin: 0 8px; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
.post-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; transition: box-shadow .18s, transform .18s; }
.post-card:hover { box-shadow: 0 18px 40px -24px rgba(28,28,28,0.35); transform: translateY(-2px); }
/* height:auto and display:block are load-bearing: without them a stray
   height="630" HTML attribute forces every thumbnail to 630px tall,
   which is the vertical stretch. aspect-ratio + object-fit crop cleanly. */
.post-card__img { aspect-ratio: 16/9; height: auto; object-fit: cover; width: 100%; display: block; background: var(--cream-warm); }
.post-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.post-card__cat { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.post-card__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink-0); line-height: 1.2; margin: 0 0 8px; }
.post-card__excerpt { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 14px; flex: 1; }
.post-card__meta { font-size: 12.5px; color: var(--ink-soft); }

.article { padding: var(--s-6) 0 var(--s-7); }
.article__wrap { max-width: 740px; margin: 0 auto; padding: 0 24px; }
.article__cat { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s-2); }
.article__title { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.12; margin: 0 0 var(--s-3); }
.article__meta { display: flex; align-items: center; gap: 12px; padding-bottom: var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.article__meta img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center top; }
.article__meta-txt { font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
.article__meta-txt b { color: var(--ink-0); font-weight: 700; display: block; font-size: 14.5px; }
.article__body { font-size: 17px; line-height: 1.75; color: var(--ink); }
.article__body > p { margin: 0 0 var(--s-3); }
.article__body h2 { font-size: 27px; margin: var(--s-5) 0 var(--s-2); }
.article__body h3 { font-size: 21px; margin: var(--s-4) 0 var(--s-2); }
.article__body ul, .article__body ol { margin: 0 0 var(--s-3); padding-left: 22px; }
.article__body li { margin-bottom: 8px; line-height: 1.65; }
.article__body strong { font-weight: 700; color: var(--ink-0); }
.article__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article__body a.btn { text-decoration: none; }
.article__body a.btn--primary, .article__body a.btn--dark { color: #fff; }
.article__body a.btn--ghost { color: var(--ink-0); }
.article__lead { font-size: 19px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 var(--s-4); }

.callout { background: var(--cream-warm); border-left: 4px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; padding: 20px 24px; margin: var(--s-4) 0; }
.callout p { margin: 0; font-size: 16px; }
.callout .btn { margin-top: 14px; }

.article-author { display: flex; gap: 16px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; margin: var(--s-5) 0; }
.article-author img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center top; flex: none; }
.article-author h3 { font-size: 17px; margin: 0 0 4px; }
.article-author p { font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.55; }

/* Local "what we see here" cards (reusable on every location page) */
.cr-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-5); }
.cr-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; }
.cr-item h3 { font-size: 19px; margin: 0 0 8px; }
.cr-item p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* Mid-page CTA helper */
.section-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: var(--s-5); }

/* =====================================================================
   BEFORE / AFTER
   Danny's whole-home work is the clearest proof he has, and a before shot
   is worth more than any adjective. Pairs are side by side rather than a
   drag-slider: a slider hides half the evidence until you interact, and
   most people never do.
   ===================================================================== */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba figure { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--cream-warm); }
.ba img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ba figcaption {
  position: absolute; top: 12px; left: 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 99px; backdrop-filter: blur(4px);
}
.ba .is-before figcaption { background: rgba(255,255,255,0.92); color: var(--ink-0); }
.ba .is-after  figcaption { background: rgba(28,28,28,0.9); color: #fff; }
/* Caption under the pair, describing what actually changed */
.ba-note { font-size: 14.5px; color: var(--ink-soft); margin: 12px 0 0; line-height: 1.55; }
.ba-note b { color: var(--ink-0); font-weight: 700; }
.ba-set { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.colorado .ba-note { color: rgba(255,255,255,0.72); }
.colorado .ba-note b { color: #fff; }
@media (max-width: 600px) {
  /* Stays two-up on mobile ON PURPOSE. Stacking them puts a scroll between
     the two halves and destroys the comparison, which is the whole point. */
  .ba { gap: 6px; }
  .ba figcaption { font-size: 9px; padding: 4px 8px; letter-spacing: 0.1em; }
}

/* =====================================================================
   PLACEHOLDERS - LOUD ON PURPOSE
   Any asset or fact we do not have yet gets wrapped in .ph so it is
   impossible to ship by accident. It renders as a hatched slab with a
   red "PLACEHOLDER" tag, and the red is deliberately the one colour that
   does not exist anywhere else in this monochrome brand, so it screams.

   Usage:
     <div class="ph" data-ph="Project photo: 40,000 sq ft build, Provo"></div>
     <span class="ph-text" data-ph="license #">Licensed and insured</span>

   Before launch, run:  grep -rn "class=\"ph" .   and empty the results.
   The launch checklist in BUILD-BRIEF.md section 9 depends on this.
   ===================================================================== */
.ph {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 220px; padding: 40px 24px; text-align: center;
  border: 2px dashed var(--error); border-radius: var(--r-lg);
  background-color: var(--cream-warm);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(200,16,46,0.07) 0 12px,
    transparent 12px 24px
  );
  color: var(--error); font-size: 14px; font-weight: 600; line-height: 1.5;
}
.ph::before {
  content: "PLACEHOLDER";
  position: absolute; top: 0; left: 0;
  background: var(--error); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
  padding: 4px 10px; border-radius: var(--r-lg) 0 var(--r) 0;
}
.ph::after { content: attr(data-ph); display: block; max-width: 340px; }
.ph--wide { aspect-ratio: 16 / 9; min-height: 0; }
.ph--square { aspect-ratio: 1; min-height: 0; }
.ph--avatar { width: 50px; height: 50px; min-height: 0; border-radius: 50%; padding: 0; }
.ph--avatar::before, .ph--avatar::after { display: none; }

/* Inline placeholder for a FACT we cannot verify yet (a licence number, a
   project count, a rating). Keeps the sentence readable while flagging it. */
.ph-text {
  background: rgba(200,16,46,0.12);
  border-bottom: 2px dotted var(--error);
  color: inherit; padding: 0 3px; cursor: help;
}
.ph-text::after {
  content: " [" attr(data-ph) "]";
  color: var(--error); font-size: 0.8em; font-weight: 700; white-space: nowrap;
}

/* =====================================================================
   INLINE QUOTE FORM (.qf) - injected by /assets/js/app.js into #qfMount
   ===================================================================== */
#qfMount { display: block; min-height: 320px; } /* reserve space so the JS-injected form does not shift layout */
.qf { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: 0 24px 56px -30px rgba(28,28,28,0.45); }
.qf__win { color: var(--green-deep); font-weight: 600; font-size: 16px; line-height: 1.4; margin: 4px 0 10px; text-align: center; }
.qf__win b { font-weight: 800; }
.qf__promise { display: flex; gap: 9px; align-items: flex-start; justify-content: center; font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 16px 0 14px; }
.qf__promise svg { width: 18px; height: 18px; flex: none; color: var(--green-deep); }
.qf__quote { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.35; color: var(--ink); background: rgba(22,192,71,0.06); border: 1px solid var(--green-border); border-radius: var(--r); padding: 9px 11px; margin-bottom: 14px; }
.qf__quote .gicon { width: 15px; height: 15px; flex: none; }
.qf__quote b { color: var(--green-deep); font-weight: 700; }
.qf__value { margin-bottom: 13px; text-align: center; }
.qf__value h2 { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--ink-0); margin: 0 0 5px; line-height: 1.15; }
.qf__value p { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); margin: 0; }
.qf__value p b { color: var(--green-deep); font-weight: 700; }
.qf__field { margin-bottom: 11px; }
.qf__field label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-0); margin-bottom: 5px; }
.qf__field input { width: 100%; height: 46px; border: 1px solid var(--line); border-radius: var(--r); padding: 0 13px; font-family: var(--font-body); font-size: 15px; color: var(--ink); background: #fff; }
.qf__field input:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px rgba(59,59,59,0.15); }
.qf__submit { width: 100%; margin-top: 4px; }
.qf__err { color: var(--error); font-size: 13px; font-weight: 600; margin: 7px 0 0; }

/* Commercial variant of the inline form: no ZIP gate. A property manager or
   business owner wants to state the scope, not guess a ZIP, so this variant
   opens the work request directly. */
.qf--commercial .qf__value h2 { font-size: 20px; }
.qf__switch { display: block; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 13px 0 0; text-decoration: none; }
.qf__switch b { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.qf__switch:hover b { color: var(--accent-dark); }

/* =====================================================================
   FLOATING CTA BAR
   ===================================================================== */
/* The bar itself is near-black, so a near-black CTA on it would vanish.
   On dark surfaces the action colour inverts to white. */
@keyframes bb-pulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 0 0 0 rgba(255,255,255,0.5); }
  50%      { box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 0 0 8px rgba(255,255,255,0); }
}
.float-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 65;
  display: none; grid-template-columns: 1fr auto; align-items: stretch;
  background: rgba(28,28,28,0.97); border-top: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 -12px 36px rgba(0,0,0,0.34); backdrop-filter: blur(10px);
  padding: max(10px, env(safe-area-inset-bottom)) 14px 10px;
  transform: translateY(0); opacity: 1; transition: transform .28s ease, opacity .22s ease;
}
.float-cta--hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
.float-cta__call { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px; color: #fff; text-decoration: none; }
.float-cta__call-icon { width: 22px; height: 22px; flex: none; color: #fff; }
.float-cta__call-stack { display: flex; flex-direction: column; line-height: 1.1; }
.float-cta__call-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.float-cta__call-num { font-size: 16px; font-weight: 700; color: #fff; margin-top: 1px; }
.float-cta__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; background: #fff; color: var(--ink-0); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 100px; white-space: nowrap; align-self: center; animation: bb-pulse 2.4s ease-in-out infinite; }
.float-cta__cta:hover { background: var(--cream-warm); animation: none; }
.float-cta__cta svg { width: 16px; height: 16px; }

/* =====================================================================
   CINEMATIC HERO  (.hero--cinema)
   The homepage variant. A muted, looping architectural clip sits behind a
   dark scrim, with the SAME quote form card floating on top of it. The look
   changes; the conversion path does not.

   Layering, bottom to top:
     .hero__video   the clip, object-fit cover, decorative, aria-hidden
     .hero__scrim   two gradients: a left-to-right wash so the headline has
                    contrast, and a bottom fade so the section joins the
                    next one instead of ending on a hard edge
     .hero__grid    the content

   The clip NEVER loads on small screens or under prefers-reduced-motion.
   Both cases fall back to the poster frame painted as a background image,
   so the hero still looks composed and costs one small JPG.
   ===================================================================== */
.hero--cinema {
  /* Every page in the fleet sets its own still with --hero-img. The homepage
     additionally layers the looping clip on top of it. Service pages just
     use the still, which is why this is a variable and not a hard-coded URL. */
  --hero-img: url("/assets/video/hero-poster.webp");
  position: relative;
  isolation: isolate;
  background: var(--ink-0) center/cover no-repeat;
  background-image: var(--concrete), var(--hero-img);
  color: #fff;
  padding: var(--s-7) 0 var(--s-6);
  overflow: hidden;
}
/* Shorter hero for interior pages: the H1 and the form, no manifesto. */
.hero--cinema.hero--page { padding: var(--s-6) 0 var(--s-6); }
/* No photograph at all. Used where we genuinely have no honest image for the
   subject, which right now means the commercial and multi-family pages: every
   photo on disk is residential, and letting a single-family house sit behind a
   commercial headline would imply experience we cannot evidence. Falls back to
   the precast concrete texture, which is on-brand and claims nothing. */
.hero--cinema.hero--noimg { --hero-img: none; }
.hero--cinema.hero--noimg .hero__scrim {
  background: linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 55%);
}
.hero--cinema.hero--page .hero__title { font-size: clamp(32px, 4vw, 48px); }
.hero--cinema .crumbs, .hero--cinema .crumbs a { color: rgba(255,255,255,0.6); }
.hero--cinema .crumbs a:hover { color: #fff; }
.hero--cinema .crumbs span { color: rgba(255,255,255,0.3); }
.hero--cinema .hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Pulled slightly toward grey so a 720p source reads as deliberate grade
     rather than soft footage, and so it sits inside a monochrome brand. */
  filter: saturate(0.82) contrast(1.06);
}
.hero--cinema .hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(18,18,18,0.94) 0%, rgba(18,18,18,0.86) 34%, rgba(18,18,18,0.52) 62%, rgba(18,18,18,0.30) 100%),
    linear-gradient(to bottom, rgba(18,18,18,0.55) 0%, rgba(18,18,18,0) 22%, rgba(18,18,18,0) 68%, rgba(18,18,18,0.80) 100%);
}
.hero--cinema .hero__grid { align-items: center; row-gap: var(--s-3); }
.hero--cinema .hero__title {
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #fff;
  text-wrap: balance;
}
.hero--cinema .hero__sub { color: rgba(255,255,255,0.82); max-width: 520px; }
.hero--cinema .eyebrow { color: var(--gold-light); }
.hero--cinema .tel-link { color: #fff; }
.hero--cinema .trust-pill {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
}
/* A hairline rule under the eyebrow. Reads as a drawing sheet, which is the
   whole point of an architectural treatment. */
.hero--cinema .hero__rule {
  width: 68px; height: 1px; background: var(--gold-light);
  margin: 0 0 var(--s-3);
}
.hero--cinema .qf { box-shadow: 0 40px 90px -30px rgba(0,0,0,0.85); }

/* Credit line for the footage, bottom-left of the hero. */
.hero__credit {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 1;
  font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.hero__credit .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .hero--cinema { padding: var(--s-5) 0 var(--s-5); }
  .hero--cinema .hero__video { display: none; }   /* poster only on mobile */
  .hero--cinema .hero__scrim {
    background: linear-gradient(to bottom, rgba(18,18,18,0.72) 0%, rgba(18,18,18,0.90) 46%, rgba(18,18,18,0.96) 100%);
  }
  .hero__credit { display: none; }
}
/* =====================================================================
   PLAN / BUILD / IMPROVE, the gold wayfinding system
   =====================================================================
   These three words group the ten services in the nav, on /services/, and
   in the on-page strip. One colour across all three places means a visitor
   learns the system once and then recognises it everywhere. Gold is used
   here and nowhere decorative: green means social proof, red means an
   error or an unshipped asset, gold means "this is one of the three". */

/* Sits on the dark band, so it takes the light gold. Placed after the
   .colorado border-color shorthand on purpose, or it would be overridden. */
.pbi-card { border-top: 2px solid var(--gold); }
.colorado .pbi-card { border-top-color: var(--gold-light); }

/* Same bar as the nav dropdown group label, so the two read as one system. */
.svc-group__label {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gold);
}
.svc-group__label::before { content: ""; width: 20px; height: 2px; background: var(--gold); flex: none; border-radius: 1px; }
.colorado .svc-group__label { color: var(--gold-light); }
.colorado .svc-group__label::before { background: var(--gold-light); }

/* Keeps a place name from breaking mid-phrase in a headline. "Utah County"
   splitting after "Utah" visually buries the geo half of the keyword. */
/* Only safe for SHORT phrases. A nowrap span wider than the viewport pushes
   the whole page sideways, so it releases below 480px where there is no room
   for the luxury of controlled line breaks. */
.nowrap { white-space: nowrap; }
@media (max-width: 480px) { .nowrap { white-space: normal; } }

/* Owner portrait. Deliberately not full-bleed: the source is 400px square,
   so it is held at a size it can actually fill rather than upscaled into mush. */
/* A two-column story block that lost its image column should not sit in a
   half-width gutter. */
/* Layout modifiers that used to be INLINE styles on individual pages.
   Inline styles beat media queries, so every one of these silently defeated
   the mobile collapse below and pushed its page sideways on a phone. As
   classes they participate in the cascade like everything else. */
.climate-grid--3 { grid-template-columns: repeat(3, 1fr); }
.climate-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sectors--2      { grid-template-columns: 1fr 1fr; margin-top: var(--s-4); }
.steps--4        { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-top: var(--s-5); }

.grid-2--solo { grid-template-columns: 1fr; }
.grid-2--solo > div { max-width: 68ch; }

.portrait { margin: 0; max-width: 300px; }
.portrait img { width: 100%; height: auto; border-radius: var(--r-lg); display: block; border: 1px solid var(--line); }
.portrait figcaption { margin-top: 12px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.colorado .portrait figcaption { color: rgba(255,255,255,0.7); }

.areas__note { margin-top: 22px; font-size: 15px; color: var(--ink-soft); }
.areas__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hero--cinema .hero__video { display: none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 980px) {
  .header-cta .tel-link { display: none; }
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: 76px; left: 0; right: 0; z-index: 70; flex-direction: column; align-items: stretch; gap: 0; background: var(--cream); border-bottom: 1px solid var(--line); padding: 0 0 18px; max-height: calc(100vh - 76px); overflow-y: auto; box-shadow: 0 22px 36px -22px rgba(28,28,28,0.4); }
  .nav.nav--open { display: flex; }
  .nav > a { padding: 15px 24px; font-size: 16px; border-top: 1px solid var(--line); }
  .nav .has-dropdown { border-top: 1px solid var(--line); padding: 4px 0 6px; }
  /* On mobile the dropdown is not a dropdown: the services are always shown,
     so "Services" is a section heading, not a control. The chevron is hidden
     because a caret that never collapses anything is a broken promise. */
  .nav__trigger { width: 100%; justify-content: flex-start; padding: 16px 24px 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); cursor: default; }
  .nav__trigger svg { display: none; }
  .nav__cta { display: flex !important; margin: 18px 24px 0; }
  .nav .has-dropdown .dropdown, .nav .has-dropdown .dropdown--wide { position: static; transform: none; box-shadow: none; border: 0; border-radius: 0; padding: 0; opacity: 1; visibility: visible; min-width: 0; background: transparent; display: block; }
  .nav .dropdown a { padding: 11px 24px 11px 42px; font-size: 15.5px; border-radius: 0; }
  /* Indent the service links under their gold group label so the three
     groups are readable as groups on a narrow screen, where the desktop
     column layout collapses to one long list. */
  /* Tight under the label, generous above it, so the three groups read as
     three chunks on a narrow screen where the desktop columns collapse. */
  .dropdown__group { margin: 0; padding: 22px 24px 4px 24px; font-size: 11px; }
  .dropdown__group::before { width: 12px; }
  .nav .dropdown__all { margin: 6px 24px 0; padding: 13px 0 0 !important; }
  .float-cta { display: grid; }
  body { padding-bottom: 78px; }
  .hero__grid { display: flex; flex-direction: column; gap: var(--s-4); grid-template-areas: none; }
  .hero__head { order: 1; }
  /* align-self:start is correct in the two-column desktop grid, where the form
     should hug the top of its column. In this stacked flex column the cross
     axis is HORIZONTAL, so start collapsed the form to its content width and
     left a third of a tablet screen empty beside it. Stretch instead, capped
     so it never becomes an absurdly wide form on a large tablet. */
  .hero__form { order: 2; align-self: stretch; width: 100%; max-width: 620px; }
  .hero__rest { order: 3; }
  .hero--cinema .hero__sub { max-width: 620px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; gap: var(--s-4); }
  .climate-grid { grid-template-columns: 1fr 1fr; }
  .sectors { grid-template-columns: 1fr 1fr; }
  .review-grid { columns: 2; }
  .rev-proof-grid { grid-template-columns: 1fr 1fr; }
  .areas__grid { grid-template-columns: 1fr; }
  .areas__cols { columns: 2; }
  .steps, .steps--3 { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .stat-band__inner { grid-template-columns: 1fr 1fr; row-gap: var(--s-4); }
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 16px; padding-bottom: 78px; }
  .section { padding: var(--s-6) 0; }
  .hero { padding-top: var(--s-3); }
  /* 30px is the floor. At 320px, the narrowest phone still in real use, a
     14-character word ("design-builder") has to fit on one line.
     .hero--cinema and .hero--page are listed explicitly because each sets its
     own clamp with two-class specificity, which silently beat a bare
     .hero__title rule here and left the cinema hero at 38px on a phone. */
  .hero__title,
  .hero--cinema .hero__title,
  .hero--cinema.hero--page .hero__title { font-size: 30px; line-height: 1.14; }
  .hero__head { margin-bottom: 2px; }
  /* !important is deliberate and load-bearing. Page-level overrides (inline
     styles or modifier classes) must never win here: a multi-column grid on a
     320px screen scrolls the whole page sideways. One column, no exceptions. */
  .trust-strip__inner { max-width: 480px; margin: 0 auto; }
  .grid-2, .grid-3, .climate-grid, .climate-grid--2, .climate-grid--3,
  .sectors, .sectors--2, .review-grid, .rev-proof-grid, .areas__cols,
  .steps, .steps--3, .steps--4, .cr-list, .post-grid, .fork, .fork--3 {
    grid-template-columns: 1fr !important;
    columns: 1 !important;
  }
  .stat-band__inner { grid-template-columns: 1fr 1fr; }
  .proj-grid { grid-template-columns: 1fr; }
  .proj, .proj--wide { grid-column: auto; aspect-ratio: 16 / 10; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
  .header-cta .btn--primary { display: none; }
  .site-header__inner { min-height: 64px; }
  .brand img { height: 38px; }
  .footer__grid { grid-template-columns: 1fr; }
  .spec li { flex-direction: column; gap: 2px; }
  .spec dd, .spec .v { text-align: left; }
}

/* =====================================================================
   LEGAL PAGES (privacy, terms) and the A2P OPT-IN PAGE (free-estimate)
   Standalone pages. They reuse the header, footer and buttons, and add
   only what they need. Nothing here touches the rest of the site.
   ===================================================================== */
.legal { max-width: 760px; }
.legal h1 { margin: 6px 0 4px; }
.legal__date { color: var(--ink-soft); font-size: 15px; margin: 0 0 28px; }
.legal h2 { font-size: 22px; margin: 34px 0 10px; }
.legal p { line-height: 1.7; margin: 0 0 14px; }
.legal a { color: var(--ink-0); text-decoration: underline; text-underline-offset: 2px; }
.legal__foot { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; }

/* The DBA line under the footer legal row. Small, quiet, on every page. */
.footer__lic { margin: 12px 0 0; font-size: 12.5px; color: rgba(255,255,255,0.6); font-weight: 600; }
.footer__nap { margin: 12px 0 0; font-size: 12.5px; color: rgba(255,255,255,0.45); }
.footer__nap a { color: inherit; text-decoration: none; }
.footer__nap a:hover { text-decoration: underline; }
.footer__dba { margin: 12px 0 0; font-size: 12.5px; color: rgba(255,255,255,0.45); }

/* ---- opt-in page ---- */
.optin__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; }
.optin__intro { max-width: 520px; }
.optin__about { color: var(--ink-soft); line-height: 1.7; margin-top: 14px; }
.optin__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; box-shadow: 0 20px 50px -34px rgba(28,28,28,0.4); }
.of__row { margin-bottom: 16px; display: flex; flex-direction: column; }
.of__row label { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.of__row input, .of__row textarea {
  font-family: var(--font-body); font-size: 16px; color: var(--ink-0);
  padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--cream); width: 100%;
}
.of__row input:focus, .of__row textarea:focus { outline: 2px solid var(--ink-0); outline-offset: 1px; border-color: var(--ink-0); background: #fff; }
.of__row textarea { resize: vertical; min-height: 96px; }

.of__consent { display: flex; gap: 11px; align-items: flex-start; margin: 6px 0 18px; padding: 14px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); }
.of__consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--ink-0); }
.of__consent label { font-size: 13px; line-height: 1.55; color: var(--ink); }
.of__consent a { color: var(--ink-0); text-decoration: underline; }

.of__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.of__err { color: var(--error); font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.of__submit { width: 100%; }
.of__fine { font-size: 12.5px; color: var(--ink-soft); margin: 12px 0 0; text-align: center; }
.of__fine a { color: var(--ink-soft); text-decoration: underline; }

.optin__done { text-align: center; padding: 20px 8px; }
.optin__check { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--green); color: #fff; font-size: 30px; line-height: 56px; }
.optin__done h2 { margin: 0 0 8px; }
.optin__done p { color: var(--ink-soft); }

@media (max-width: 820px) {
  .optin__wrap { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* Slim legal strip for the funnel pages (quiz, thank-you), which have no
   full footer by design but still collect a phone number and so must carry
   the SMS-consent note and the privacy and terms links. */
.qz-legal { max-width: 640px; margin: 40px auto 0; padding: 20px 24px 40px; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.qz-legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.qz-legal__dba { margin-top: 10px; opacity: 0.8; }

/* Blog post hero image, sits under the title. 16:9, never stretched. */
.post-lead-img { display: block; width: 100%; aspect-ratio: 16/9; height: auto; object-fit: cover; border-radius: var(--r-lg); margin: 0 0 var(--s-4); background: var(--cream-warm); }
.post-date { font-size: 14px; color: var(--ink-soft); font-weight: 600; letter-spacing: 0.02em; }
.post-card__meta { }

/* ============ LIGHTBOX ============ */
/* Full-screen photo viewer. Opened by app.js when a project photo is tapped. */
.lb { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  background: rgba(18,18,18,0.92); padding: 24px; opacity: 0; transition: opacity .18s ease; }
.lb--open { display: flex; opacity: 1; }
.lb__figure { margin: 0; max-width: 1200px; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lb__img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7); }
.lb__cap { color: rgba(255,255,255,0.86); font-size: 14.5px; text-align: center; max-width: 70ch; line-height: 1.5; }
.lb__close { position: absolute; top: 18px; right: 20px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 20px; cursor: pointer; line-height: 1; transition: background .15s; }
.lb__close:hover { background: rgba(255,255,255,0.24); }
@media (prefers-reduced-motion: reduce) { .lb { transition: none; } }


/* =====================================================================
   J&H LANDSCAPING — page-specific components
   Added on top of the shared system: a framed hero form for the GHL
   embed, luxury service cards with photography, and a real-review wall.
   ===================================================================== */

/* ---- Hero form card: frames the GoHighLevel iframe in glass ---- */
.hero__form-card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.5);
}
.hero__form-card__head {
  padding: 20px 24px 14px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--line);
}
.hero__form-card__head .stars { color: var(--star); font-size: 15px; }
.hero__form-card__head h2 {
  font-size: 23px; margin: 8px 0 2px; line-height: 1.1; color: var(--ink-0);
}
.hero__form-card__head p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.hero__form-card iframe { display: block; width: 100%; border: 0; }

/* ---- Rating badge (reused in hero + reviews header) ---- */
.rating-badge { display: inline-flex; align-items: center; gap: 12px; }
.rating-badge__num { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--ink-0); line-height: 1; }
.rating-badge__meta { display: flex; flex-direction: column; gap: 2px; }
.rating-badge__meta .stars { color: var(--star); font-size: 17px; letter-spacing: 2px; }
.rating-badge__meta small { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.rating-badge__meta small b { color: var(--green-deep); font-weight: 700; }

/* ---- Luxury service cards with photography ---- */
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
  margin-top: var(--s-5);
}
.svc-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(20,39,27,0.5); border-color: var(--brand); }
.svc-card__img { aspect-ratio: 4/3; overflow: hidden; background: var(--cream-warm); }
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.svc-card:hover .svc-card__img img { transform: scale(1.05); }
.svc-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.svc-card__body h3 { font-size: 22px; margin: 0; color: var(--ink-0); }
.svc-card__body p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; flex: 1; }
.svc-card__go { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.svc-card__go svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---- Review wall (self-hosted, real Google reviews) ---- */
.reviews { background: var(--cream-warm); background-image: none; }
.reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.reviews__grid {
  columns: 3; column-gap: var(--s-3); margin-top: var(--s-5);
}
@media (max-width: 900px) { .reviews__grid { columns: 2; } }
@media (max-width: 620px) { .reviews__grid { columns: 1; } }
.review-card {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 22px 20px; margin: 0 0 var(--s-3); box-shadow: 0 10px 30px -24px rgba(20,39,27,0.4);
}
.review-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.review-card__stars { color: var(--star); font-size: 15px; letter-spacing: 1.5px; }
.review-card__g { width: 20px; height: 20px; flex: none; }
.review-card__text { font-size: 15px; line-height: 1.62; color: var(--ink); margin: 0 0 16px; }
.review-card__who { display: flex; align-items: center; gap: 11px; }
.review-card__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: #fff; background: var(--brand);
}
.review-card__name { font-size: 14.5px; font-weight: 700; color: var(--ink-0); line-height: 1.2; }
.review-card__meta { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px; }
.review-card__verified { color: var(--green-deep); font-weight: 600; }

/* =====================================================================
   J&H — deep forest-green header carrying the real cream logo.
   The logo art is cream + sunset, made for a dark ground, so the header
   goes dark and the nav text goes cream. Mobile panel matches.
   ===================================================================== */
.site-header { background: rgba(20,38,28,0.90); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid rgba(255,255,255,0.12); }
.brand img { height: 50px; width: auto; }
.nav a, .nav__trigger { color: #F1EFE4; }
.nav a:hover, .nav__trigger:hover,
.has-dropdown:hover .nav__trigger, .has-dropdown:focus-within .nav__trigger { color: var(--gold-light); }
.header-cta .tel-link { color: #F1EFE4; }
.header-cta .tel-link:hover { color: var(--gold-light); }
.nav-toggle { color: #F1EFE4; }
/* Header CTA: cream button, dark-green text. High contrast on the green bar. */
.header-cta .btn--primary, .nav__cta { background: #F1EFE4 !important; color: var(--ink-0) !important; }
.header-cta .btn--primary:hover, .nav__cta:hover { background: #fff !important; }
@media (max-width: 980px) {
  .nav { background: var(--ink-0); box-shadow: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .nav > a { border-top-color: rgba(255,255,255,0.12); }
  .nav__trigger { color: rgba(241,239,228,0.6); }
  .nav .dropdown a { color: #F1EFE4; }
  .nav .dropdown a:hover { background: rgba(255,255,255,0.06); color: var(--gold-light); }
  .nav__cta { margin-left: 24px; margin-right: 24px; }
}

/* =====================================================================
   J&H — per-service feature rows (alternating image / copy).
   One section per service: gives each its own real estate + SEO body,
   and reads as an editorial spread rather than a card grid.
   ===================================================================== */
.svc-features { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-6); }
.svc-feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-5); align-items: center; }
.svc-feature__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 34px 70px -44px rgba(20,38,28,0.55); }
.svc-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.svc-feature:hover .svc-feature__media img { transform: scale(1.045); }
.svc-feature:nth-child(even) .svc-feature__media { order: 2; }
.svc-feature__body { min-width: 0; }
.svc-feature__num { font-family: var(--font-brand); font-size: 13px; font-weight: 700; letter-spacing: 0.24em; color: var(--gold); display: inline-flex; align-items: center; gap: 10px; }
.svc-feature__num::after { content: ""; width: 30px; height: 1px; background: var(--gold); opacity: 0.5; }
.svc-feature h3 { font-size: clamp(26px, 2.7vw, 36px); margin: 12px 0 8px; }
.svc-feature__body > p { color: var(--ink-soft); font-size: 16px; line-height: 1.65; margin: 0 0 var(--s-2); max-width: 46ch; }
.svc-feature__list { list-style: none; padding: 0; margin: var(--s-2) 0 var(--s-3); display: grid; gap: 9px; }
.svc-feature__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink); }
.svc-feature__list svg { flex: none; width: 18px; height: 18px; color: var(--accent); margin-top: 2px; }
.svc-feature__go { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 7px; }
.svc-feature__go svg { width: 15px; height: 15px; transition: transform .2s ease; }
.svc-feature__go:hover svg { transform: translateX(4px); }
@media (max-width: 820px) {
  .svc-feature { grid-template-columns: 1fr; gap: var(--s-3); }
  .svc-feature:nth-child(even) .svc-feature__media { order: 0; }
  .svc-features { gap: var(--s-5); }
}

/* =====================================================================
   J&H — reviews page (JAC-style scannable highlights) + focused quote page
   ===================================================================== */
/* Highlight the standout phrase in a review so the wall is scannable. */
.review__hl { font-weight: 700; color: var(--ink); background: linear-gradient(transparent 55%, rgba(233,169,76,0.40) 55%); padding: 0 1px; border-radius: 1px; }
.review__meta { font-size: 12.5px; color: var(--ink-soft); }

/* Review-wall header band: big rating + "130 of 140 five-star" proof. */
.rev-hero { background: var(--ink-0); color: #fff; text-align: center; padding: var(--s-6) 0 var(--s-5); }
.rev-hero .eyebrow { color: var(--gold-light); }
.rev-hero h1 { color: #fff; }
.rev-hero__stat { display: inline-flex; align-items: center; gap: 20px; margin-top: var(--s-3); flex-wrap: wrap; justify-content: center; }
.rev-hero__num { font-family: var(--font-display); font-size: 64px; font-weight: 700; line-height: 1; color: #fff; }
.rev-hero__meta { text-align: left; }
.rev-hero__meta .stars { color: var(--star); font-size: 22px; letter-spacing: 3px; }
.rev-hero__meta div { color: rgba(255,255,255,0.82); font-size: 15px; }
.rev-hero__meta b { color: var(--gold-light); }

/* Focused /get-a-quote/ page: no nav clutter, form is the whole point. */
.quote-page { min-height: 100vh; background: var(--ink-0) var(--concrete); display: flex; flex-direction: column; }
.quote-page__bar { padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.quote-page__bar img { height: 46px; width: auto; }
.quote-page__bar a.tel { color: #F1EFE4; font-weight: 700; text-decoration: none; font-size: 16px; }
.quote-page__body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); max-width: 1120px; margin: 0 auto; padding: var(--s-5) 24px var(--s-6); align-items: center; width: 100%; }
.quote-page__pitch { color: #fff; }
.quote-page__pitch .eyebrow { color: var(--gold-light); }
.quote-page__pitch h1 { color: #fff; font-size: clamp(30px, 4vw, 46px); }
.quote-page__pitch p { color: rgba(255,255,255,0.82); font-size: 17px; line-height: 1.65; max-width: 46ch; }
.quote-page__points { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: 12px; }
.quote-page__points li { display: flex; align-items: center; gap: 11px; color: #fff; font-size: 15.5px; }
.quote-page__points .stars { color: var(--star); }
.quote-page__points svg { width: 20px; height: 20px; color: var(--gold-light); flex: none; }
.quote-page__form { background: var(--white); border-radius: var(--r-lg); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6); overflow: hidden; }
.quote-page__form-head { padding: 20px 24px 14px; border-bottom: 1px solid var(--line); }
.quote-page__form-head .stars { color: var(--star); font-size: 15px; }
.quote-page__form-head h2 { font-size: 23px; margin: 8px 0 2px; }
.quote-page__form-head p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.quote-page__form iframe { display: block; width: 100%; border: 0; }
@media (max-width: 860px) {
  .quote-page__body { grid-template-columns: 1fr; gap: var(--s-4); padding-top: var(--s-4); }
  .quote-page__pitch { order: 2; }
  .quote-page__form { order: 1; }
}

/* ---- Service-areas hub cards + large rating badge (buildout Sep 2026) ---- */
.area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.area-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius, 14px);
  padding: 22px 22px 20px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.area-card:hover {
  box-shadow: 0 14px 34px rgba(20,38,28,0.12);
  transform: translateY(-2px);
  border-color: var(--gold-light, #E9A94C);
}
.area-card h3 {
  font-family: var(--font-brand);
  font-size: 24px;
  margin: 0 0 8px;
  color: var(--ink);
}
.area-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.rating-badge--lg { transform: scale(1.15); transform-origin: left center; }
@media (max-width: 900px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .area-grid { grid-template-columns: 1fr; }
  .rating-badge--lg { transform: none; margin-top: var(--s-3); }
}

/* ---- Fix: dropdown links must stay dark on the white dropdown (the dark-header
   override at .nav a sets cream, which was bleeding onto the white dropdown) ---- */
.site-header .dropdown a { color: var(--ink-0); }
.site-header .dropdown a:hover { color: var(--accent); background: var(--cream-warm); }
.site-header .dropdown a svg { width: 18px; height: 18px; color: var(--gold); flex: none; }

/* Footer city list: two columns so all 12 Utah County towns fit cleanly */
.footer__cities { columns: 2; column-gap: 20px; }
.footer__cities li { break-inside: avoid; }

/* Footer Instagram link */
.footer__social { display:inline-flex; align-items:center; gap:8px; margin-top:14px; color:#D9D5C7; text-decoration:none; font-size:14px; font-weight:600; transition:color .15s; }
.footer__social:hover { color:#fff; }
.footer__social svg { width:20px; height:20px; }

/* ============ Our Work: JAC-style alternating review / photo feed ============ */
.ow-hero { background: var(--cream-warm); text-align: center; padding: var(--s-5) 0 var(--s-4); }
.ow-hero .eyebrow { justify-content: center; }
.ow-hero h1 { font-size: clamp(34px, 8vw, 56px); line-height: 1.04; margin: 10px auto 16px; }
.ow-rate { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-soft); }
.ow-rate .stars { color: var(--gold); font-size: 17px; letter-spacing: 1px; }
.ow-rate b { color: var(--ink-0); font-weight: 700; }
.ow-feed .is-hidden { display: none !important; }
.ow-more-wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 4px 16px var(--s-6); }
.ow-feed { max-width: 680px; margin: 0 auto; padding: var(--s-5) 0; display: flex; flex-direction: column; gap: 18px; }
.ow-photo { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 38px rgba(20,38,28,.16); }
.ow-photo img { display: block; width: 100%; height: auto; }
.ow-photo__cap { position: absolute; inset: auto 0 0 0; padding: 30px 22px 16px; background: linear-gradient(transparent, rgba(15,26,20,.85)); color: #fff; }
.ow-photo__cap b { display: block; font-family: var(--font-brand); font-size: 21px; font-weight: 600; letter-spacing: .01em; }
.ow-photo__cap span { font-size: 13px; color: #D9D5C7; letter-spacing: .04em; text-transform: uppercase; }
.ow-review { background: #fff; border: 1px solid #E3E7DF; border-radius: 16px; padding: 26px 26px 22px; box-shadow: 0 6px 20px rgba(20,38,28,.06); }
.ow-review__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ow-review__head .stars { color: var(--gold); font-size: 15px; letter-spacing: 1px; }
.ow-review__verified { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.ow-review p { font-size: 16.5px; line-height: 1.62; color: var(--ink); margin: 0 0 18px; }
.ow-review__who { display: flex; align-items: center; gap: 12px; }
.ow-review__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ink-0); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
.ow-review__name { font-weight: 700; color: var(--ink-0); font-size: 15.5px; }
.ow-review__date { font-size: 13px; color: var(--ink-3); }
@media (max-width: 720px){ .ow-feed { padding: var(--s-4) 16px; } }

/* Reviews page: masonry wall of Google-style review cards + load more */
.rev-wall { columns: 3 320px; column-gap: 18px; }
.rev-wall .ow-review { break-inside: avoid; width: 100%; margin: 0 0 18px; display: inline-block; }
.rev-wall .is-hidden { display: none; }

/* Divider between the featured (premium) services and the rest in the dropdown */
.dropdown__div { display:block; height:1px; background:var(--line); margin:6px 12px; }

/* =====================================================================
   Service Areas mega-menu
   Markup is generated by build.py (areas_menu()). Structure:
     .has-areas > .nav__trigger + .areas-menu(.dropdown)
       > ul.areas-list > li.areas-city
           > .areas-city__row (a.areas-city__link + button.areas-city__toggle)
           > ul.areas-services (11 service links)
   Desktop (981px+): white panel of 12 cities; a service flyout opens to the
   right on hover / focus-within (JS adds .areas-menu--flip to open it to the
   left when it would run off the viewport). The toggle button is hidden.
   Mobile (980px and below): accordion inside the hamburger panel. JS toggles
   .is-open on .has-areas and on each .areas-city; no hover dependence.
   Every link prefix is `.site-header .areas-menu a` so the cream `.nav a`
   colour can never bleed into the white panel.
   ===================================================================== */
@media (min-width: 981px) {
  .has-areas .areas-menu { left: 0; transform: translateY(6px); min-width: 252px; padding: 8px; }
  .has-areas:hover .areas-menu,
  .has-areas:focus-within .areas-menu { transform: translateY(0); }
  .areas-list, .areas-services { list-style: none; margin: 0; padding: 0; }
  .areas-city__row { display: flex; align-items: center; border-radius: var(--r); }
  .site-header .areas-menu a.areas-city__link { flex: 1; display: block; padding: 9px 12px; font-size: 14px; font-weight: 500; color: var(--ink-0); background: none; border-radius: var(--r); }
  /* Small right-pointing chevron marks rows that open a flyout. */
  .areas-city__row::after { content: ""; flex: none; width: 6px; height: 6px; margin-right: 14px; border-right: 2px solid var(--gold); border-top: 2px solid var(--gold); transform: rotate(45deg); }
  .areas-menu--flip .areas-city__row::after { transform: rotate(-135deg); }
  .areas-city__toggle { display: none; }
  .areas-city:hover > .areas-city__row,
  .areas-city:focus-within > .areas-city__row { background: var(--cream-warm); }
  .site-header .areas-menu a.areas-city__link:hover,
  .site-header .areas-menu a.areas-city__link:focus-visible { color: var(--accent); background: none; }

  /* Flyout: anchored to the panel (not the row) so it always starts at the
     panel top and 11 rows fit in the viewport. The ::before strip bridges the
     gap so the pointer can cross from the city row into the flyout. */
  .areas-services { position: absolute; top: 0; left: calc(100% + 8px); width: 270px; max-height: calc(100vh - 110px); overflow-y: auto;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px; box-shadow: 0 16px 40px rgba(28,28,28,0.16);
    opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 61; }
  .areas-services::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 10px; }
  .areas-menu--flip .areas-services { left: auto; right: calc(100% + 8px); transform: translateX(6px); }
  .areas-menu--flip .areas-services::before { left: auto; right: -10px; }
  .areas-city:hover > .areas-services,
  .areas-city:focus-within > .areas-services { opacity: 1; visibility: visible; transform: translateX(0); }
  .areas-services__title { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
  .areas-services__title::before { content: ""; width: 14px; height: 2px; background: var(--gold); border-radius: 1px; flex: none; }
  .site-header .areas-menu .areas-services a { display: block; padding: 9px 12px; font-size: 14px; font-weight: 500; color: var(--ink-0); border-radius: var(--r); }
  .site-header .areas-menu .areas-services a:hover,
  .site-header .areas-menu .areas-services a:focus-visible { background: var(--cream-warm); color: var(--accent); }
  .site-header .areas-menu a.areas-menu__all { display: block; margin-top: 6px; padding: 12px 12px 8px; border-top: 1px solid var(--line); border-radius: 0; font-size: 14px; font-weight: 700; color: var(--accent); background: none; }
  .site-header .areas-menu a.areas-menu__all::after { content: " \2192"; color: var(--gold); }
  .site-header .areas-menu a.areas-menu__all:hover { color: var(--accent-dark); background: none; }
}

@media (max-width: 980px) {
  .nav .has-areas { padding: 0; }
  /* The trigger is a real accordion control here, styled like the other
     top-level rows (not the small caps "Services" heading). */
  .nav .has-areas .nav__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 24px; min-height: 48px; font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #F1EFE4; cursor: pointer; text-align: left; }
  .nav .has-areas .nav__trigger svg { display: block; width: 16px; height: 16px; transition: transform .2s; }
  .nav .has-areas:hover .nav__trigger svg,
  .nav .has-areas:focus-within .nav__trigger svg { transform: none; }
  .nav .has-areas.is-open .nav__trigger svg { transform: rotate(180deg); }
  .nav .has-areas.is-open .nav__trigger { color: var(--gold-light); }

  .nav .has-areas .areas-menu { display: none; }
  .nav .has-areas.is-open .areas-menu { display: block; padding: 0 0 8px; }
  .areas-list, .areas-services { list-style: none; margin: 0; padding: 0; }

  .areas-city__row { display: flex; align-items: stretch; }
  .site-header .nav .areas-menu a.areas-city__link { flex: 1; display: flex; align-items: center; min-height: 46px; padding: 8px 8px 8px 42px; font-size: 15.5px; font-weight: 500; color: #F1EFE4; background: none; }
  .areas-city__toggle { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; min-height: 46px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--gold-light); }
  .areas-city__toggle svg { width: 16px; height: 16px; transition: transform .2s; }
  .areas-city.is-open > .areas-city__row .areas-city__toggle svg { transform: rotate(180deg); }
  .areas-city.is-open > .areas-city__row .areas-city__link { color: var(--gold-light); }

  .areas-services { display: none; background: rgba(255,255,255,0.05); padding: 4px 0 6px; }
  .areas-city.is-open > .areas-services { display: block; }
  .areas-services__title { display: none; }
  .site-header .nav .areas-menu .areas-services a { display: block; padding: 11px 24px 11px 60px; font-size: 15px; font-weight: 400; color: #F1EFE4; background: none; border-radius: 0; }
  .site-header .nav .areas-menu .areas-services a:hover { color: var(--gold-light); background: rgba(255,255,255,0.06); }
  .site-header .nav .areas-menu a.areas-menu__all { display: block; margin: 6px 24px 0; padding: 13px 0 4px 18px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 15px; font-weight: 700; color: var(--gold-light); background: none; }

  /* Pre-existing bug: `.site-header .dropdown a` (dark ink, line ~1468) beat
     the mobile `.nav .dropdown a` cream rule on equal specificity, leaving the
     Services links dark on the dark mobile panel. */
  .site-header .nav .dropdown a { color: #F1EFE4; }
  .site-header .nav .dropdown a:hover { color: var(--gold-light); background: rgba(255,255,255,0.06); }
}
/* ===== end Service Areas mega-menu ===== */

/* ============ City-service pages: photo strip, local fact, link pills ============ */
.local-fact { font-size: 15.5px; color: var(--ink-soft); border-left: 3px solid var(--gold); padding-left: 16px; margin-top: var(--s-3); }
.combo-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.combo-photos__item { margin: 0; position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 32px rgba(20,38,28,.14); aspect-ratio: 4 / 3; }
.combo-photos__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.combo-photos__item figcaption { position: absolute; inset: auto 0 0 0; padding: 26px 16px 12px; background: linear-gradient(transparent, rgba(15,26,20,.82)); color: #fff; font-size: 13.5px; font-weight: 600; }
@media (max-width: 760px) {
  .combo-photos { grid-template-columns: 1fr 1fr; }
  .combo-photos__item:first-child { grid-column: 1 / -1; }
}
.link-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-3); }
.link-pill { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-0); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s, box-shadow .15s; }
.link-pill:hover { border-color: var(--gold); color: var(--accent); box-shadow: 0 6px 16px rgba(20,38,28,.08); }
.link-pill.is-current { background: var(--ink-0); border-color: var(--ink-0); color: #fff; }
.text-link { color: var(--gold); font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* ============ Thank-you page ============ */
.ty { background: var(--cream-warm); padding: var(--s-6) 0; min-height: 60vh; }
.ty__inner { max-width: 640px; text-align: center; }
.ty__check { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #16C047; color: #fff; margin-bottom: 14px; }
.ty__check svg { width: 32px; height: 32px; }
.ty h1 { margin: 6px 0 14px; }
.ty__lead { font-size: 17.5px; color: var(--ink-soft); line-height: 1.6; }
.ty__lead a { color: var(--ink-0); font-weight: 700; }
.ty__steps { text-align: left; max-width: 460px; margin: var(--s-4) auto; padding-left: 22px; line-height: 1.7; color: var(--ink); }
.ty__steps li { margin-bottom: 8px; }

/* ============ Legal pages ============ */
.legal h1 { margin-bottom: var(--s-3); }
.legal p { line-height: 1.7; color: var(--ink); margin-bottom: 16px; }
.legal a { color: var(--accent); }

/* ============ Blog article ============ */
.article__wrap { max-width: 720px; }
.article__meta { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-3); }
.article h2 { margin: var(--s-5) 0 var(--s-2); }
.article p { font-size: 17.5px; line-height: 1.75; color: var(--ink); margin-bottom: 18px; }

/* 5.0 badge for the J&H Topsoil Google profile on the materials page */
.rating-badge--topsoil { display: inline-flex; margin-top: var(--s-3); text-decoration: none; border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px; background: #fff; box-shadow: 0 6px 18px rgba(20,38,28,.07); }
.rating-badge--topsoil:hover { border-color: var(--gold); }

/* Our Work: looping video cards */
.ow-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #14261C; }

/* Mobile menu panel sits flush under the header at every header height (was a fixed 76px,
   which left a gap that showed the page through when the header shrinks to 64px). */
@media (max-width: 980px) {
  .nav { top: 100%; max-height: calc(100vh - 64px); }
}

/* "Know your <city> ground" fact box on city-service pages */
.ground-facts { margin-top: var(--s-4); background: var(--cream-warm); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; max-width: 900px; }
.ground-facts__title { font-family: var(--font-brand); font-size: 22px; font-weight: 600; color: var(--ink-0); margin: 0 0 12px; }
.ground-facts dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 0; }
.ground-facts__row { border-top: 1px solid var(--line); padding-top: 10px; }
.ground-facts dt { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.ground-facts dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
@media (max-width: 720px) { .ground-facts dl { grid-template-columns: 1fr; } }

/* Intent pages: "how J&H handles it" list beside the rating badge */
.why-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.why-list li { position: relative; padding: 0 0 14px 28px; line-height: 1.6; color: var(--ink); }
.why-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(180,83,27,.15); }
.why-list b { color: var(--ink-0); }

/* ==========================================================================
   Our Work, JAC /our-work/ layout: 3-col checkerboard of photo + review tiles,
   fixed row height so every tile lines up. 2 cols on tablet, 1 col on phones.
   ========================================================================== */
.ow-feed { max-width: 1240px; margin: 0 auto; padding: var(--s-4) 24px var(--s-5); display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 360px; gap: 16px; flex-direction: initial; }
.ow-feed > * { margin: 0; min-width: 0; }
.ow-feed .ow-photo { height: 100%; aspect-ratio: auto; border-radius: 14px; box-shadow: 0 14px 32px -18px rgba(20,38,28,.45); }
.ow-feed .ow-photo img, .ow-feed .ow-video video { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ow-feed .ow-photo:hover img { transform: scale(1.05); }
.ow-feed .ow-photo__cap { padding: 26px 16px 14px; }
.ow-feed .ow-photo__cap b { font-size: 18px; }
.ow-feed .ow-photo__cap span { font-size: 11.5px; }
.ow-review { border: 1.5px solid rgba(22,192,71,0.48); box-shadow: 0 0 0 3px rgba(22,192,71,0.10), 0 14px 32px -22px rgba(22,80,40,0.34); }
.ow-feed .ow-review { height: 100%; display: flex; flex-direction: column; padding: 20px; overflow: hidden; border-radius: 14px; }
.ow-feed .ow-review p { font-size: 14.5px; line-height: 1.55; margin: 0 0 12px; }
.ow-feed .ow-review__who { margin-top: auto; padding-top: 8px; }
.ow-feed .ow-review__avatar { width: 38px; height: 38px; font-size: 14px; }
.ow-feed .ow-feed__cta { grid-column: 1 / -1; }
.ow-hero .btn { margin-top: var(--s-3); }
@media (max-width: 900px) {
  .ow-feed { grid-template-columns: 1fr 1fr; grid-auto-rows: 340px; padding: var(--s-4) 16px; grid-auto-flow: row dense; }
  /* flip every second row so 2 columns still read as a checkerboard */
  .ow-feed > :nth-child(4n+3) { grid-column: 2; }
  .ow-feed > :nth-child(4n+4) { grid-column: 1; }
}
@media (max-width: 560px) {
  .ow-feed { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 14px; grid-auto-flow: row; }
  .ow-feed > :nth-child(n) { grid-column: auto; }
  .ow-feed .ow-photo { aspect-ratio: 4 / 3; height: auto; }
  .ow-feed .ow-review { height: auto; }
  .ow-feed .ow-review p { font-size: 15.5px; }
}

/* Quote form wide enough for GoHighLevel's two-column layout. The GHL form
   switches to 2 columns once the iframe is 650px+ wide (measured), so on wide
   screens the form column is fixed at 680px; tablets get a 720px stacked form.
   form_embed.js resizes the iframe height to the shorter 2-column form. */
@media (min-width: 1180px) {
  .hero > .wrap { max-width: 1320px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) 680px; }
  .quote-page__body { grid-template-columns: minmax(0, 1fr) 700px; max-width: 1320px; }
}
@media (max-width: 980px) {
  .hero__form { max-width: 720px; }
}
/* Short reviews become a pull-quote so the tile never looks empty */
.ow-feed .ow-review--short p { font-family: var(--font-display); font-size: 30px; font-weight: 500; line-height: 1.18; color: var(--ink-0); margin: auto 0; }
.ow-feed .ow-review--mid p { font-size: 17px; line-height: 1.55; margin: auto 0; }
.ow-feed .ow-review--short .ow-review__who, .ow-feed .ow-review--mid .ow-review__who { margin-top: 0; }
@media (max-width: 560px) { .ow-feed .ow-review--short p { font-size: 24px; margin: 6px 0 16px; } .ow-feed .ow-review--mid p { margin: 0 0 14px; } }
/* The 2-column GHL form is ~400px tall; trim the fixed 560px iframe where it applies */
@media (min-width: 1180px) { .hero__form-card iframe, .quote-page__form iframe { height: 420px !important; } }
@media (min-width: 700px) and (max-width: 980px) { .hero__form-card iframe { height: 420px !important; } }
@media (max-width: 560px) { .ow-rate { flex-direction: column; gap: 4px; font-size: 14px; } }
/* Hold the form's space while GoHighLevel's script swaps the iframe in, so the hero
   text under it does not jump (was the whole 0.24-0.28 CLS on mobile). */
.hero__form-card > :last-child { min-height: 560px; }
@media (min-width: 1180px) { .hero__form-card > :last-child { min-height: 420px; } }
@media (min-width: 700px) and (max-width: 980px) { .hero__form-card > :last-child { min-height: 420px; } }

/* Review sections site-wide: same photo + review grid as /gallery/ */
.reviews--work .ow-feed--section { padding-top: var(--s-4); padding-bottom: var(--s-3); }
.reviews--work .ow-more-wrap { padding-bottom: 0; }

/* Brand promise, site-wide */
.hero__promise { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(19px, 2.1vw, 25px); color: var(--gold-light); margin: 12px 0 0; letter-spacing: .01em; }
.final-cta__promise { font-family: var(--font-brand); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); margin: 0 0 10px; }
.known-for { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin: 18px auto 6px; }
.known-for > span { font-family: var(--font-brand); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.known-for ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; list-style: none; margin: 0; padding: 0; }
.known-for li { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 600; font-size: 15.5px; }
.known-for svg { width: 17px; height: 17px; color: var(--green); flex: none; }

/* Thank-you video + fast-track box, booking page */
.ty__video { position: relative; aspect-ratio: 16 / 9; margin: var(--s-4) auto; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px -20px rgba(20,38,28,.5); background: #000; }
.ty__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ty__fast { background: #fff; border: 1.5px solid var(--green-border); box-shadow: 0 0 0 3px var(--green-ring); border-radius: 14px; padding: 24px 22px; margin: var(--s-4) 0; }
.ty__fast h2 { font-size: 26px; margin: 0 0 6px; }
.ty__fast p { color: var(--ink-soft); margin: 0 0 16px; }
.ty__fast a:not(.btn) { color: var(--ink-0); font-weight: 700; }
.ty__h2 { font-size: 26px; margin: var(--s-4) 0 0; }
.ty__promise { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 22px; color: var(--gold); margin: var(--s-3) 0 0; }
.known-for--light > span { color: var(--ink-3); }
.known-for--light li { color: var(--ink-0); }
.known-for--light svg { color: var(--green-deep); }
.book__inner { max-width: 860px; }
.book__cal { margin: var(--s-4) 0; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px -22px rgba(20,38,28,.4); }
a[href^="tel:"] { white-space: nowrap; }

/* 20 cities: keep the Service Areas list inside a laptop screen */
@media (min-width: 981px) {
  .site-header .areas-menu a.areas-city__link { padding: 6px 12px; font-size: 13.5px; }
  .has-areas .areas-menu { max-height: calc(100vh - 84px); }
}

/* Crew videos (vertical, click to play) */
.talks__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: var(--s-4); }
.talk { margin: 0; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 32px -20px rgba(20,38,28,.45); border: 1px solid #E3E7DF; }
.talk video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #0F1A14; }
.talk figcaption { padding: 12px 14px 14px; }
.talk figcaption b { display: block; font-size: 15px; line-height: 1.35; color: var(--ink-0); }
.talk figcaption span { font-size: 12.5px; color: var(--ink-3); }
.talks__more { margin-top: var(--s-3); }
.talks__more a { color: var(--gold); font-weight: 700; }
@media (max-width: 900px) {
  .talks__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .talk { scroll-snap-align: start; }
}
/* Instagram band */
.ig { background: var(--cream-warm); }
.ig__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.ig__btn { display: inline-flex; align-items: center; gap: 8px; }
.ig__btn svg { width: 18px; height: 18px; }
.ig__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: var(--s-4); }
.ig__tile { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; }
.ig__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ig__tile:hover img { transform: scale(1.06); }
@media (max-width: 720px) { .ig__grid { grid-template-columns: repeat(3, 1fr); } }

/* Customer quotes (social proof), site-wide */
.pq { margin: 0; background: #fff; border: 1.5px solid var(--green-border); box-shadow: 0 0 0 3px var(--green-ring); border-radius: 14px; padding: 18px 20px; }
.pq blockquote { margin: 0 0 10px; font-family: var(--font-display); font-size: 20px; line-height: 1.35; font-weight: 600; color: var(--ink-0); }
.pq figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--ink-soft); }
.pq figcaption b { color: var(--ink-0); }
.pq__stars { color: var(--gold); letter-spacing: 1px; font-size: 13px; }
.pq-band { background: var(--cream); padding: var(--s-5) 0 0; }
.pq-band__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .pq-band__grid { grid-template-columns: 1fr; } .pq blockquote { font-size: 18px; } }
.svc-feature .pq { margin: 16px 0 14px; padding: 14px 16px; }
.svc-feature .pq blockquote { font-size: 17.5px; }
.svc-card .pq { margin: 12px 0 0; padding: 12px 14px; box-shadow: none; }
.svc-card .pq blockquote { font-size: 15.5px; }