/* =====================================================================
   Upterra Builders - site stylesheet
   Danny & Trayson. Tooele County, Utah. Basement finishing, kitchens,
   bathrooms, additions, and light commercial / tenant improvements.

   EARTHY BRAND, sampled straight from the Upterra Builders logo:
     - charcoal   #2E3338  the wordmark (headings, dark sections)
     - terracotta #A5542C  the roof in the mark (buttons, emphasis)  -> --accent
     - sage       #5E6E54  the U shape (eyebrows, rules, PBI labels)  -> --gold
     - cream      #F6F3EC  warm page canvas
   The palette is warm and grounded on purpose: "up" + "terra" (earth).

   Terracotta is THE action colour. Sage is the OCCASIONAL accent (eyebrows,
   step labels, section rules, "go" arrows), the way brass was on Blackbird:
   its value comes from how rarely it appears, so never put it on buttons.

   Neon green (#16C047) is reserved for social proof only, per the Quantum
   Qube standard. Review stars use a warm gold (--star).

   IMPORTANT: class names are intentionally identical to the Blackbird / CEOC /
   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:       #23282C;   /* near-black warm charcoal: dark sections, headings */
  --ink-1:       #2E343A;   /* raised card on a dark section */
  --brand:       #2E3338;   /* THE brand charcoal, sampled from the Upterra wordmark */
  --ink-2:       #2E3338;   /* alias of --brand for copied markup */
  --ink-3:       #6C726E;   /* muted sage-grey, eyebrows and secondary rules */
  --white:       #FFFFFF;
  --cream:       #F6F3EC;   /* page canvas: warm earthy cream */
  --cream-warm:  #ECE6DB;   /* alt band: deeper warm sand */
  --ink:         #32373B;   /* body text */
  --ink-soft:    #6C726E;   /* muted body text */
  --line:        #E3DCCF;   /* warm sand hairline */
  --line-dark:   rgba(255,255,255,0.15);
  --star:        #E0A63C;   /* warm gold review stars */

  /* Action colour is Upterra terracotta (the roof in the logo mark). Kept as
     --accent so every existing rule and any markup copied from the other sites
     keeps working unchanged. White text on it clears AA at button sizes. */
  --accent:      #A5542C;
  --accent-dark: #874320;

  /* 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:        #5E6E54;   /* Upterra sage, deep enough for cream: eyebrows, rules, PBI labels, arrows */
  --gold-light:  #AAB6A0;   /* light sage for near-black surfaces */

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


/* =====================================================================
   UPTERRA ADDITIONS (audit pass 1)
   Fixes: services grid responsiveness + legibility, hero review proof,
   reviews slider. Appended last so these win the cascade where intended.
   ===================================================================== */

/* --- Services grid: 3 -> 2 -> 1 columns, with a wide feature + wide banner.
   Replaces the old inline grid overrides that broke the media queries. --- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.svc-grid .svc-card { aspect-ratio: 4 / 3; }
.svc-grid .svc-feature { grid-column: span 2; aspect-ratio: 2 / 1; }
.svc-grid .svc-wide { grid-column: 1 / -1; aspect-ratio: 32 / 7; }
@media (max-width: 980px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc-grid .svc-feature { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .svc-grid .svc-wide { grid-column: 1 / -1; aspect-ratio: 16 / 6; }
}
@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-grid .svc-feature, .svc-grid .svc-wide { grid-column: auto; aspect-ratio: 4 / 3; }
}

/* Stronger, taller scrim + a soft shadow so a white title never sits on a
   light patch of the photo. This is the "can't read the text" fix. */
.svc-card::after {
  background: linear-gradient(180deg, rgba(16,16,16,0) 24%, rgba(16,16,16,0.42) 55%, rgba(16,16,16,0.90) 100%);
}
.svc-card__body { text-shadow: 0 1px 14px rgba(0,0,0,0.45); }
.svc-card__body p { color: rgba(255,255,255,0.92); }
.svc-card--solid .svc-card__body { text-shadow: none; }
.svc-card--solid { background: linear-gradient(155deg, #343B41 0%, var(--ink-0) 100%); }

/* --- Hero review proof: 3 short highlights sitting under the estimate form,
   the CEOC pattern. Light text on the dark hero. --- */
.hero-proof { margin-top: 14px; display: grid; gap: 8px; }
.hero-proof__item { display: flex; align-items: center; gap: 11px; padding: 9px 13px;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; }
.hero-proof__stars { color: var(--star); font-size: 12.5px; letter-spacing: 1px; flex: none; }
.hero-proof__txt { font-size: 13.5px; line-height: 1.35; color: rgba(255,255,255,0.9); }
.hero-proof__txt b { color: #fff; font-weight: 600; }
.hero-proof__txt span { color: rgba(255,255,255,0.6); font-weight: 600; }
@media (max-width: 980px) { .hero-proof { max-width: 560px; } }

/* --- Reviews as a horizontal slider (was a tall masonry wall). Takes far
   less vertical space; swipe or drag through them. --- */
.rev-slider {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr);
  gap: var(--s-3); margin-top: var(--s-5);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 2px 18px; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.rev-slider .review { scroll-snap-align: start; margin-bottom: 0; }
.rev-slider::-webkit-scrollbar { height: 8px; }
.rev-slider::-webkit-scrollbar-thumb { background: var(--line); border-radius: 100px; }
.rev-hint { text-align: center; font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
@media (min-width: 981px) { .rev-slider { grid-auto-columns: minmax(340px, 1fr); } }

/* =====================================================================
   LUXURY POLISH (audit pass 1)
   The Blackbird feel: more air, refined type, accent rules, soft depth,
   calmer social-proof cards. All within the Upterra palette.
   ===================================================================== */
:root {
  --shadow-soft: 0 18px 44px -30px rgba(35,28,22,0.40);
  --shadow-lux:  0 34px 66px -34px rgba(35,28,22,0.52);
}

/* More generous rhythm */
.section { padding: clamp(66px, 8vw, 122px) 0; }

/* Refined eyebrow: small-caps with a short sage rule before it */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); border-radius: 2px; flex: none; }
.eyebrow.center { justify-content: center; }
.hero .eyebrow::before { display: none; }               /* hero already has its own rule */
.hero--cinema .eyebrow::before, .colorado .eyebrow::before { background: var(--gold-light); }

/* Headings a touch larger and tighter for presence */
h2 { font-size: clamp(29px, 3.4vw, 43px); letter-spacing: -0.03em; }
.lead { font-size: clamp(18px, 1.5vw, 21px); }

/* Buttons: subtle refinement */
.btn { letter-spacing: 0.01em; border-radius: 8px; }

/* Elevated, quietly-depthful cards */
.svc-grid .svc-card { box-shadow: var(--shadow-soft); }
.svc-grid .svc-card:hover { box-shadow: var(--shadow-lux); }
.climate-grid.is-light .climate { box-shadow: var(--shadow-soft); }
.story__media img, .portrait img { box-shadow: var(--shadow-soft); }

/* Stat band: clean white with elegant hairline dividers */
.stat-band { background: var(--white); }
.stat-band__inner { padding: clamp(40px, 4.4vw, 60px) 24px; }
.stat { position: relative; }
.stat-band__inner .stat:not(:first-child)::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 54px; background: var(--line);
}
.stat__num { font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.04em; }
.stat__label { letter-spacing: 0.015em; }

/* Reviews: calmer, more premium than the neon glow */
.rev-slider .review { border-color: var(--line); box-shadow: var(--shadow-soft); }
.rev-slider .review__verified { color: var(--green-deep); }
@media (max-width: 620px) {
  .stat-band__inner { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-2); }
  .stat-band__inner .stat:nth-child(odd)::before { display: none; }
}

/* =====================================================================
   LUXURY v2 - RESTRAINT (client direction)
   "Simpler colors look more luxurious. I like Blackbird: simple boxes,
    thinner lines. Avoid the green (tacky with the orange). Keep the orange."
   -> One warm accent (terracotta). Sage retreats to the logo. NO neon green.
      Hairline boxes over heavy shadows. More air.
   ===================================================================== */
:root {
  /* One accent: terracotta. The old sage --gold becomes terracotta so every
     eyebrow rule, label and small accent reads as the single brand color. */
  --gold:        #A5542C;
  --gold-light:  #D28A5E;                 /* lighter terracotta on dark surfaces */
  --star:        #BE8B3E;                 /* refined warm gold for review stars only */

  /* Kill the social-proof neon green site-wide: proof cards become clean
     hairline boxes with charcoal accents. */
  --green:        #6C726E;
  --green-deep:   #2E3338;
  --green-border: var(--line);
  --green-ring:   rgba(0,0,0,0);
  --green-glow:   rgba(35,28,22,0.16);

  /* Thinner-line aesthetic: less shadow. */
  --shadow-soft: 0 12px 30px -26px rgba(35,28,22,0.24);
  --shadow-lux:  0 22px 48px -34px rgba(35,28,22,0.32);
}

/* Simple boxes, thin lines: proof/review/climate cards are hairline boxes. */
.review, .rev-proof, .proof-glow { border: 1px solid var(--line); box-shadow: none; }
.rev-slider .review { border: 1px solid var(--line); box-shadow: none; }
.climate-grid.is-light .climate { box-shadow: none; border: 1px solid var(--line); }
.review__verified, .rev-slider .review__verified,
.rev-proof__verified, .proof-glow__verified { color: var(--ink-soft); font-weight: 600; }
.review__verified .gicon, .review__head .gicon { color: var(--ink-3); }

/* Image service cards keep only a whisper of lift; everything else leans on line. */
.svc-grid .svc-card { box-shadow: var(--shadow-soft); }
.svc-grid .svc-card:hover { box-shadow: var(--shadow-lux); }
.story__media img, .portrait img { box-shadow: var(--shadow-soft); }

/* =====================================================================
   HERO: form-first on mobile (CEOC pattern) + compact trustline
   DOM order is head -> form -> rest, so on a phone the form sits right
   under the H1 (first scroll); the long copy + pills drop below it.
   ===================================================================== */
.hero--cinema .hero__grid { align-items: start; }
.hero__trustline { display: flex; align-items: center; gap: 11px; margin: 16px 0 0; font-size: 14.5px; line-height: 1.4; color: rgba(255,255,255,0.82); }
.hero__trustline .hero__stars { color: var(--star); font-size: 15px; letter-spacing: 1px; flex: none; }
.hero__trustline b { color: #fff; font-weight: 700; }
.hero--cinema .hero__rest { margin-top: var(--s-4); }
.hero--cinema .hero__rest .hero__sub { margin-bottom: var(--s-3); }
@media (max-width: 560px) {
  .hero--cinema { padding: var(--s-4) 0 var(--s-5); }
  .hero--cinema .hero__title { font-size: 33px; line-height: 1.07; }
  .hero__trustline { font-size: 13.5px; margin-top: 12px; }
  .hero--cinema .hero__rest { margin-top: var(--s-4); }
}

/* =====================================================================
   AUDIT FIX: dark feature section legibility + balanced image
   The .story__points component assumes a light background; on the dark
   .colorado section its text went dark-on-dark. Light it up, and let the
   feature image fill its column instead of floating small.
   ===================================================================== */
.colorado .story__points li { color: rgba(255,255,255,0.90); }
.colorado .story__points li b { color: #fff; }
.colorado .story__points svg { color: var(--gold-light); }
.feature-media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lux); display: block; }
.colorado .grid-2 { align-items: center; }
@media (max-width: 780px) { .feature-media { aspect-ratio: 16 / 10; margin-top: var(--s-3); } }

/* =====================================================================
   REVIEWS v3 - premium testimonials (client direction)
   White cards with a refined green edge (a tasteful trust green, NOT the
   old neon), a quote mark, a date for credibility, and the name stacked
   ABOVE the role (never on the same line).
   ===================================================================== */
:root { --trust-green: #2E9E5B; --trust-green-soft: rgba(46,158,91,0.10); }

.rev-slider .review {
  background: var(--white);
  border: 1.5px solid var(--trust-green);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 4px var(--trust-green-soft), 0 18px 40px -26px rgba(35,28,22,0.30);
  padding: 26px 26px 24px;
}
.review__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.review__head .stars { color: var(--star); font-size: 15px; letter-spacing: 1.5px; }
.review__date { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.review__quote {
  margin: 0 0 20px; font-family: var(--font-body); font-weight: 400;
  font-size: 15.5px; line-height: 1.62; color: var(--ink);
}
.review__quote::before {
  content: "\201C"; font-family: Georgia, "Times New Roman", serif;
  color: var(--trust-green); font-weight: 700; font-size: 30px;
  line-height: 0; vertical-align: -0.34em; margin-right: 3px;
}
.review__who { display: flex; align-items: center; gap: 13px; }
.review__id { display: flex; flex-direction: column; line-height: 1.25; }
.review__name { font-weight: 700; font-size: 14.5px; color: var(--ink-0); }
.review__meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }

/* Privacy reassurance line: a tasteful green chip so it stands out in the form. */
.qf__promise {
  display: flex; align-items: center; gap: 9px;
  background: var(--trust-green-soft); border: 1px solid rgba(46,158,91,0.30);
  border-radius: 9px; padding: 9px 13px; margin-top: 14px;
  font-size: 13px; font-weight: 500; color: var(--ink);
}
.qf__promise svg { color: var(--trust-green); flex: none; width: 16px; height: 16px; }

/* =====================================================================
   AUDIT FIX v2 (client)
   - Specialty image was dominating on mobile. Cap it hard.
   - Hero review snippets: green stars, quote on its own line, name under it.
   ===================================================================== */
.feature-media { aspect-ratio: 16 / 11; max-height: 420px; }
@media (max-width: 900px) { .colorado .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 780px) { .feature-media { aspect-ratio: 16 / 10; max-height: 280px; margin-top: var(--s-4); } }

.hero-proof__item { align-items: flex-start; }
.hero-proof__stars { color: #46C275; margin-top: 1px; }
.hero-proof__txt { display: flex; flex-direction: column; }
.hero-proof__txt b { font-weight: 600; color: #fff; }
.hero-proof__name { color: rgba(255,255,255,0.6); font-weight: 600; font-size: 12px; margin-top: 3px; }

/* =====================================================================
   COMPARISON TABLE (service pages) - scannable decision aid
   Clean hairline table; the "best" column (our service) is subtly
   highlighted in terracotta. Scrolls horizontally on narrow screens.
   ===================================================================== */
.compare-wrap { margin-top: var(--s-5); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.compare th, .compare td { padding: 15px 18px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.compare thead th { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink-0); background: var(--cream-warm); }
.compare tbody th { font-weight: 600; color: var(--ink-0); width: 30%; }
.compare tbody td { color: var(--ink-soft); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th.compare__best { background: var(--accent); color: #fff; }
.compare tbody td.compare__best { color: var(--ink-0); font-weight: 600; background: rgba(165,84,44,0.06); box-shadow: inset 3px 0 0 var(--accent); }
.compare__note { font-size: 13px; color: var(--ink-soft); margin: 12px 2px 0; }

/* =====================================================================
   CTA STRIP - a recurring mid-page conversion band. Every CTA points to
   /get-a-quote/ (the real quote form), never a scroll anchor.
   ===================================================================== */
.cta-strip { background: var(--cream-warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 24px; flex-wrap: wrap; }
.cta-strip__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin: 0 0 5px; display: inline-flex; align-items: center; gap: 9px; }
.cta-strip__eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--gold); border-radius: 2px; }
.cta-strip__text { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 2.2vw, 25px); color: var(--ink-0); margin: 0; letter-spacing: -0.02em; line-height: 1.15; }
.cta-strip .btn { flex: none; }
.cta-strip--dark { background: var(--ink-0); border-color: var(--line-dark); background-image: var(--concrete); }
.cta-strip--dark .cta-strip__text { color: #fff; }
.cta-strip--dark .cta-strip__eyebrow { color: var(--gold-light); }
.cta-strip--dark .cta-strip__eyebrow::before { background: var(--gold-light); }
@media (max-width: 680px) {
  .cta-strip__inner { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .cta-strip .btn { width: 100%; }
}