/* =====================================================================
   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 {
  /* Greyscale, warmed slightly toward concrete rather than pure neutral */
  --ink-0:       #1C1C1C;   /* near-black: dark sections, headings */
  --ink-1:       #2A2A2A;   /* raised card on a dark section */
  --brand:       #3B3B3B;   /* THE brand charcoal, sampled from the logo */
  --ink-2:       #3B3B3B;   /* alias of --brand for copied markup */
  --ink-3:       #6B6B6B;   /* mid grey, eyebrows and secondary rules */
  --white:       #FFFFFF;
  --cream:       #F4F3F1;   /* page canvas: warm concrete white */
  --cream-warm:  #E9E7E3;   /* alt band: light precast */
  --ink:         #262626;   /* body text */
  --ink-soft:    #6B6B6B;   /* muted body text */
  --line:        #D9D6D1;   /* concrete hairline */
  --line-dark:   rgba(255,255,255,0.15);
  --star:        #8A8A8A;   /* grey stars, no gold on a monochrome site */

  /* Action colour is near-black. Kept as --accent so every existing rule
     and any markup copied from the other sites keeps working unchanged. */
  --accent:      #1C1C1C;
  --accent-dark: #000000;

  /* 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:        #96702C;   /* on cream and white */
  --gold-light:  #D8AE5C;   /* on near-black */

  /* 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);

  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  --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.12;
  letter-spacing: -0.022em;
  margin: 0 0 var(--s-3);
}
h1 { font-size: clamp(36px, 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; }
.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); }
.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) {
  .trust-strip__inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    gap: 0;
    padding: 6px 24px;
    max-width: 480px;
    margin: 0 auto;
  }
  .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; }
.svc-card {
  position: relative; display: block; text-decoration: none;
  border-radius: var(--r-lg); overflow: hidden; background: var(--ink-0);
  aspect-ratio: 4 / 3; color: #fff;
}
.svc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.svc-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,28,28,0) 35%, rgba(28,28,28,0.88) 100%); }
.svc-card:hover img { transform: scale(1.05); }
.svc-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px; }
.svc-card__body h3 { color: #fff; margin: 0 0 4px; font-size: 22px; }
.svc-card__body p { margin: 0; font-size: 14px; color: rgba(255,255,255,0.85); }
.svc-card__link { margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; display: inline-flex; gap: 6px; }
.svc-card--solid { background: var(--ink-2); }
.svc-card--solid .svc-card__body { top: 50%; bottom: auto; transform: translateY(-50%); }

/* =====================================================================
   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. */
.dropdown__group { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); padding: 12px 12px 5px; }
.dropdown__group:first-child { padding-top: 4px; }
.dropdown--wide { min-width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }

/* =====================================================================
   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); }
.post-card__img { aspect-ratio: 16/9; object-fit: cover; width: 100%; 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.jpg");
  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; }
}
@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; }
  .nav__trigger { width: 100%; justify-content: space-between; padding: 12px 24px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
  .nav__trigger svg { width: 16px; height: 16px; transform: 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: 12px 24px; font-size: 15.5px; border-radius: 0; }
  .dropdown__group { padding: 14px 24px 4px; }
  .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; }
  .hero__form { order: 2; }
  .hero__rest { order: 3; }
  .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); }
  .hero__title { font-size: 30px; line-height: 1.12; }
  .hero__head { margin-bottom: 2px; }
  .grid-3, .climate-grid, .sectors, .review-grid, .rev-proof-grid, .areas__cols, .steps, .steps--3, .cr-list, .post-grid, .fork { grid-template-columns: 1fr; columns: 1; }
  .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; }
}