/* =========================================================
   High Desert Development
   Design system: deep navy, sand, bronze. Montserrat + Open Sans.
   One stylesheet for all pages.
   ========================================================= */

:root {
  --ink:        #0d2133;   /* deepest navy, headers and hero */
  --navy:       #18324a;   /* headings, dark bands */
  --sand:       #d8c3a5;   /* warm band, accents on light */
  --sand-soft:  #f7f4ee;   /* page-warm background */
  --bronze:     #9b6025;   /* primary action */
  --bronze-lit: #b06e2b;   /* action hover */
  --bronze-txt: #d49a5b;   /* bronze on dark, eyebrows and links */
  --body:       #3d4750;   /* body copy on light */
  --muted:      #61666b;   /* secondary copy on light */
  --line:       rgb(24 50 74 / 14%);
  --line-dark:  rgb(255 255 255 / 14%);
  --shell:      min(calc(100% - 3rem), 1200px);
  --header-h:   96px;      /* keep in step with .header-inner min-height */
  --head:       Montserrat, "Segoe UI", sans-serif;
  --text:       "Open Sans", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* The header is sticky, so a jump to #services, #featured-work or #contact
   would otherwise park the target underneath it. Hold the landing back by the
   header's height plus a little air. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.25rem);
}

body {
  margin: 0;
  background: #fff;
  color: var(--body);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--navy); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--bronze-txt);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--head);
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}
h1 { font-weight: 800; font-size: clamp(2.3rem, 6vw, 5.2rem); line-height: 1.02; }
h2 { font-weight: 700; font-size: clamp(1.85rem, 4vw, 3.1rem); line-height: 1.1; }
h3 { font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.25; }
h4 { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.section-shell { width: var(--shell); margin-inline: auto; }

.eyebrow,
.section-kicker {
  display: block;
  margin: 0 0 0.7rem;
  font: 700 0.76rem/1.4 var(--head);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--bronze);
}
.section-kicker { color: var(--bronze); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--bronze); color: #fff; padding: 0.85rem 1.25rem;
  font: 700 0.85rem var(--head); text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- buttons ---------- */

/* Square corners stay. The depth comes from a shallow vertical gradient, a
   one pixel top highlight and a shadow that grows on hover, so the buttons
   read as pressed metal rather than flat rectangles. */
.button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 54px; padding: 0.9rem 1.6rem;
  font: 700 0.85rem var(--head); letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease;
}
.button:active { transform: translateY(1px); }
/* Drawn handset rather than a font glyph. The dial-shaped characters render
   as a circle with a bar through them in several common fonts, which reads
   as a prohibition sign. This inherits the button's text colour. */
.icon-phone { flex: none; display: block; }
.button:focus-visible { outline: 3px solid var(--sand); outline-offset: 3px; }

.button-primary {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 14%) 0%, rgb(255 255 255 / 0%) 46%,
                            rgb(0 0 0 / 10%) 100%),
    var(--bronze);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 26%), 0 6px 16px rgb(8 24 37 / 24%);
}
.button-primary:hover, .button-primary:focus {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 0%) 46%,
                            rgb(0 0 0 / 8%) 100%),
    var(--bronze-lit);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%), 0 10px 24px rgb(8 24 37 / 32%);
  transform: translateY(-1px);
}
.button-primary:active { box-shadow: inset 0 2px 5px rgb(0 0 0 / 26%); }

.button-secondary {
  border-color: rgb(255 255 255 / 70%); color: #fff;
  background: rgb(255 255 255 / 6%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%);
}
.button-secondary:hover, .button-secondary:focus {
  background: #fff; color: var(--navy); border-color: #fff;
  box-shadow: 0 10px 24px rgb(8 24 37 / 30%); transform: translateY(-1px);
}

.button-light {
  background: linear-gradient(180deg, #fff 0%, #f2ede4 100%); color: var(--navy);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgb(8 24 37 / 18%);
}
.button-light:hover, .button-light:focus {
  background: linear-gradient(180deg, #fff 0%, var(--sand) 100%);
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgb(8 24 37 / 26%);
  transform: translateY(-1px);
}

/* ---------- header ---------- */

.site-header {
  background: var(--ink);
  color: #fff;
  border-bottom: 1px solid var(--line-dark);
  position: sticky; top: 0; z-index: 60;
}
.header-inner {
  width: var(--shell); margin-inline: auto; min-height: 96px;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.8rem;
  color: #fff; text-decoration: none;
  font-family: var(--head); text-transform: uppercase; letter-spacing: 0.06em;
}
/* No plate behind the badge. It is carried at a size where the bronze ring and
   the white lettering read on their own against the ink, so the black core
   sitting close to the background colour looks like an emblem rather than a
   gap. Anything much smaller than this needs a light plate to stay legible. */
.brand-logo { width: 88px; height: 78px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; font-size: 0.68rem; line-height: 1.15; }
.brand-copy strong { font-size: 0.92rem; font-weight: 800; }
.brand-copy .brand-tag {
  margin-top: 0.28rem; color: var(--bronze-txt); font-size: 0.53rem; letter-spacing: 0.11em;
}

.primary-navigation {
  display: flex; align-items: center; gap: 0.2rem;
  font: 600 0.85rem var(--head);
}
.primary-navigation a {
  padding: 0.7rem 0.9rem; color: #fff; text-decoration: none;
  transition: color 0.18s ease;
}
.primary-navigation a:hover { color: var(--bronze-txt); }
.primary-navigation a.active,
.primary-navigation a[aria-current="page"] { color: var(--bronze-txt); }
/* Same pressed-metal treatment as .button-primary, at header scale. */
.primary-navigation .header-call {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-left: 1rem; padding: 0.85rem 1.15rem;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 14%) 0%, rgb(255 255 255 / 0%) 46%,
                            rgb(0 0 0 / 10%) 100%),
    var(--bronze);
  color: #fff;
  font: 700 0.82rem var(--head); letter-spacing: 0.04em; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 26%), 0 4px 12px rgb(8 24 37 / 28%);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.primary-navigation .header-call:hover,
.primary-navigation .header-call:focus {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 0%) 46%,
                            rgb(0 0 0 / 8%) 100%),
    var(--bronze-lit);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%), 0 8px 18px rgb(8 24 37 / 34%);
  transform: translateY(-1px);
}
.primary-navigation .header-call:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgb(0 0 0 / 26%); }

.menu-button {
  display: none; align-items: center; gap: 0.5rem;
  background: none; border: 1px solid var(--line-dark); color: #fff;
  padding: 0.6rem 0.85rem; font: 700 0.78rem var(--head);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.menu-icon { font-size: 1.1rem; line-height: 1; }

/* ---------- hero ---------- */

.hero {
  position: relative; display: grid; align-items: end; overflow: hidden;
  min-height: min(86vh, 780px); background: var(--ink); color: #fff;
}

/* The photograph. Held slightly high so the sky and the lit house carry the
   frame rather than the graded pad. A very slow drift gives it life without
   ever reading as motion. */
/* Every frame drifts on the same clock, started at page load, so they are
   always at an identical scale. Restarting the drift per frame was what made
   the change of photograph read as a jump: the incoming frame came in at
   1.085 while the outgoing one had already settled near 1. */
.hero > .hero-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 46%;
  transform-origin: 50% 42%;
  opacity: 0; transition: opacity 2.6s ease-in-out;
  animation: hero-drift 26s ease-out both;
}
.hero > .hero-media.is-active { opacity: 1; }
@keyframes hero-drift {
  from { transform: scale(1.085); }
  to   { transform: scale(1); }
}

/* The build sequence names the stage it is showing. It rides at the foot of
   the frame on the shell so it lines up with the type, and fades away once
   the hero has come to rest on the finished house. */
.hero-phase {
  position: absolute; z-index: 5; bottom: 1.9rem;
  left: 50%; transform: translateX(-50%);
  width: var(--shell); margin: 0; text-align: right;
  font: 700 0.72rem var(--head); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sand); opacity: 0; transition: opacity 0.7s ease;
}
.hero-phase.is-visible { opacity: 1; }
.hero-phase::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 1.9rem; height: 1px; margin-right: 0.7rem;
  background: var(--bronze-txt);
}

/* Three stacked passes, in order:
   1. a warm bronze wash low in the frame so the photograph and the palette
      belong to one another
   2. the reading scrim, weighted to the left where the type sits
   3. a soft vignette that closes the corners */
/* Explicit stacking, because the cross-fade hands the frames a z-index of its
   own: photographs 0 and 1, overlay 2, stage scrim 3, type 4, trim 5. Leaving
   any of these on auto is how a photograph ended up painted over the headline. */
.hero-overlay { position: absolute; inset: 0; z-index: 2; }
.hero-overlay::before,
.hero-overlay::after { content: ""; position: absolute; inset: 0; }

.hero-overlay {
  background:
    linear-gradient(0deg,
      rgb(155 96 37 / 26%) 0%,
      rgb(155 96 37 / 10%) 26%,
      rgb(155 96 37 / 0%) 52%);
}
.hero-overlay::before {
  background:
    linear-gradient(0deg,
      rgb(8 24 37 / 80%) 0%,
      rgb(8 24 37 / 52%) 28%,
      rgb(8 24 37 / 22%) 56%,
      rgb(8 24 37 / 6%) 80%,
      rgb(8 24 37 / 0%) 100%),
    linear-gradient(102deg,
      rgb(8 24 37 / 78%) 0%,
      rgb(8 24 37 / 52%) 30%,
      rgb(8 24 37 / 16%) 56%,
      rgb(8 24 37 / 0%) 76%);
}
.hero-overlay::after {
  background: radial-gradient(120% 82% at 50% 34%,
    rgb(8 24 37 / 0%) 40%, rgb(8 24 37 / 30%) 100%);
}

/* The two build stages were shot in flat midday sun and run far brighter than
   the twilight plate the overlay was tuned for. This extra scrim fades in only
   while a stage is showing, so the daylight frames sit down at the twilight's
   level and the headline keeps its contrast. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0; transition: opacity 2.6s ease-in-out;
  background:
    linear-gradient(0deg,
      rgb(8 24 37 / 64%) 0%,
      rgb(8 24 37 / 42%) 45%,
      rgb(8 24 37 / 28%) 100%),
    linear-gradient(102deg,
      rgb(8 24 37 / 48%) 0%,
      rgb(8 24 37 / 22%) 46%,
      rgb(8 24 37 / 0%) 78%);
}
.hero.is-staging .hero-scrim { opacity: 1; }

/* A hairline of sand across the base, so the hero ends on a drawn line
   rather than a fade. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    rgb(216 195 165 / 0%) 0%, rgb(216 195 165 / 55%) 22%,
    rgb(216 195 165 / 55%) 78%, rgb(216 195 165 / 0%) 100%);
  z-index: 5;
}

.hero-content {
  position: relative; z-index: 4;
  width: var(--shell); margin-inline: auto; padding: 9rem 0 4.75rem;
}
.hero-content .eyebrow {
  display: inline-flex; align-items: center; gap: 0.85rem;
  color: rgb(255 255 255 / 88%); margin-bottom: 1.1rem;
}
.hero-content .eyebrow::before {
  content: ""; width: 2.75rem; height: 1px; background: var(--sand); flex: none;
}
.hero h1 {
  color: #fff; max-width: 17ch; margin: 0;
  font-size: clamp(2.2rem, 5vw, 4.3rem);
  text-shadow: 0 2px 30px rgb(8 24 37 / 45%);
}
.hero-lede {
  max-width: 40rem; margin: 1.6rem 0 0; font-size: 1.13rem;
  color: rgb(255 255 255 / 90%); text-shadow: 0 1px 16px rgb(8 24 37 / 55%);
}
.hero-lede strong { color: #fff; font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.4rem; }
.hero-actions .button-primary {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 12px 32px rgb(8 24 37 / 42%);
}

/* Interior pages: the same register as the hero, drawn rather than photographed.
   A deep navy field, a bronze wash rising from the base, and a sand hairline
   so every page opens on the same note. */
.interior-hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  padding-block: 4.5rem 3.5rem;
}
.interior-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(90% 130% at 12% 108%, rgb(155 96 37 / 40%) 0%, rgb(155 96 37 / 0%) 62%),
    radial-gradient(70% 110% at 92% 0%, rgb(216 195 165 / 12%) 0%, rgb(216 195 165 / 0%) 60%);
}
.interior-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    rgb(216 195 165 / 0%) 0%, rgb(216 195 165 / 55%) 22%,
    rgb(216 195 165 / 55%) 78%, rgb(216 195 165 / 0%) 100%);
}
.interior-hero > * { position: relative; z-index: 1; }
.interior-hero h1 {
  color: #fff; font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 20ch; margin: 0 0 1rem;
}
.interior-hero p { color: rgb(255 255 255 / 84%); max-width: 44rem; margin: 0; }
.interior-hero .section-kicker,
.section-kicker.light { color: var(--sand); }
.interior-hero .section-kicker {
  display: inline-flex; align-items: center; gap: 0.85rem;
}
.interior-hero .section-kicker::before {
  content: ""; width: 2.75rem; height: 1px; background: var(--sand); flex: none;
}

/* The contact hero carries a compact service-area panel above the heading. */
.interior-hero .service-areas {
  max-width: 760px; margin: 0 0 2.25rem; padding: 1rem 1.25rem;
  color: rgb(255 255 255 / 82%);
  background: rgb(255 255 255 / 7%); border-left: 3px solid var(--bronze-txt);
}
.interior-hero .service-areas > p {
  margin: 0 0 0.5rem; max-width: none; color: var(--bronze-txt);
  font: 700 0.72rem var(--head); letter-spacing: 0.14em; text-transform: uppercase;
}
.interior-hero .service-areas ul {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 1.5rem; margin: 0; padding-left: 1.1rem; font-size: 0.76rem;
}
@media (min-width: 761px) {
  .interior-hero .service-areas ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- proof bar ---------- */

.proof-bar {
  background: var(--ink); color: #fff;
  border-bottom: 3px solid var(--bronze);
}
/* Equal columns rather than flex, so the six facts read as one even band
   instead of six ragged blocks sized by how long their text happens to be. */
.proof-bar-inner {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.75rem; padding-block: 1.5rem;
}
.proof-item {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding-left: 1rem; border-left: 1px solid rgb(216 195 165 / 28%);
}
.proof-item:first-child { padding-left: 0; border-left: 0; }

/* Column count drops with the viewport, and the divider is dropped from
   whichever item starts a row. Each range is bounded so the resets from one
   breakpoint cannot leak into the next. */
@media (min-width: 761px) and (max-width: 1000px) {
  .proof-bar-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
  .proof-item:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) {
  .proof-bar-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.5rem; padding-block: 1.2rem;
  }
  .proof-item:nth-child(odd) { padding-left: 0; border-left: 0; }
}
.proof-figure { font: 700 1rem var(--head); color: #fff; letter-spacing: 0.01em; }
.proof-label { font-size: 0.8rem; color: rgb(255 255 255 / 72%); line-height: 1.35; }

/* ---------- intro / two column ---------- */

.intro,
.two-column {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  padding-block: 5rem;
}
.intro { background: transparent; }
.intro-copy { align-self: center; }
.intro-copy p { color: var(--muted); font-size: 1.06rem; line-height: 1.72; }
.intro-copy strong { color: var(--navy); }
/* The whole lead column shares one centred axis: kicker, heading, badge and
   call to action. Centring only the lower half left the heading hanging off
   to the left of everything beneath it. */
.intro-lead { text-align: center; }
.intro-lead h2 { margin-inline: auto; }
.intro-badge { display: block; width: min(280px, 74%); height: auto; margin: 2rem auto 0; }
.intro-actions {
  margin-top: 1.85rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center;
}
.intro-actions p { margin: 0 auto; max-width: 24rem; font-size: 1.06rem; line-height: 1.65; }
.intro-actions .button { font-size: 0.95rem; min-height: 58px; padding-inline: 1.9rem; }
.intro-actions .portfolio-text-link { font-size: 0.95rem; }

.section-warm { background: var(--sand-soft); }

/* ---------- services ---------- */

.services-section { background: #fff; padding-block: 5rem 3.5rem; }
.section-heading {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.section-heading p { color: var(--muted); margin: 0; }

.service-list-details {
  border: 1px solid var(--line); background: #fff; margin-bottom: 2rem;
}
.service-list-details > summary {
  cursor: pointer; padding: 1rem 1.25rem;
  font: 700 0.85rem var(--head); letter-spacing: 0.04em;
  color: var(--navy); text-transform: uppercase;
}
.service-list-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.4rem 2rem; padding: 0 1.25rem 1.4rem;
}
.plain-list { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.94rem; }
.plain-list li { margin-bottom: 0.2rem; }

.service-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem;
}
.service-grid > .service-card:last-child { grid-column: 1 / -1; min-height: 220px; }
.service-grid > .service-card:last-child .service-card-copy { max-width: 34rem; }
.service-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 290px; padding: 1.5rem; overflow: hidden;
  background: var(--navy); color: #fff; text-decoration: none;
  isolation: isolate;
}
.service-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform 0.5s ease;
}
.service-card .card-shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgb(8 24 37 / 92%) 0%, rgb(8 24 37 / 62%) 45%, rgb(8 24 37 / 22%) 100%);
}
.service-card:hover img, .service-card:focus img { transform: scale(1.05); }
.service-card-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.service-number {
  font: 700 0.72rem var(--head); letter-spacing: 0.14em; color: var(--bronze-txt);
  margin-bottom: 0.15rem;
}
.service-card-copy strong {
  font: 700 clamp(1.05rem, 1.6vw, 1.3rem)/1.25 var(--head); color: #fff;
  letter-spacing: -0.01em;
}
.service-card h3 { color: #fff; margin: 0 0 0.3rem; }
.service-card-copy > span:not(.service-number):not(.card-link) {
  font-size: 0.88rem; line-height: 1.45; color: rgb(255 255 255 / 82%);
}
.card-link {
  margin-top: 0.7rem; padding-top: 0.7rem;
  border-top: 1px solid rgb(216 195 165 / 35%);
  font: 700 0.76rem var(--head); color: var(--sand); letter-spacing: 0.06em;
  text-transform: uppercase;
}
.service-card:hover .card-link, .service-card:focus .card-link { color: #fff; }

/* ---------- featured work ---------- */

.featured-work { padding-block: 4rem 5rem; }
.featured-copy { max-width: 46rem; }
.featured-copy h2 { max-width: 30rem; }
.featured-copy p { color: var(--muted); }
.portfolio-text-link {
  font: 700 0.85rem var(--head); color: var(--navy); text-decoration: underline;
  text-underline-offset: 4px;
}

/* Gallery: one large plate, four supporting frames. */
.featured-media {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px; gap: 0.75rem; margin-top: 2.25rem;
}
.featured-media .featured-image { margin: 0; position: relative; overflow: hidden; }
.featured-media .featured-image:first-child { grid-column: span 2; grid-row: span 2; }
.featured-image img { width: 100%; height: 100%; object-fit: cover; }
.featured-image::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgb(8 24 37 / 55%) 0%, rgb(8 24 37 / 0%) 42%);
}
.hero-caption {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  background: rgb(13 33 51 / 88%); color: #fff;
  font: 700 0.66rem var(--head); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.45rem 0.75rem;
}
.project-video { display: flex; flex-direction: column; }
.project-video h3 {
  font: 700 0.7rem var(--head); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sand); margin: 0 0 0.6rem;
}
.video-expand {
  margin-top: 0.75rem; background: none; border: 1px solid rgb(255 255 255 / 30%);
  color: #fff; padding: 0.5rem 0.9rem; cursor: pointer;
  font: 700 0.76rem var(--head); letter-spacing: 0.05em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.video-expand:hover { border-color: var(--bronze-txt); color: var(--bronze-txt); }

/* ---------- financing ---------- */

.financing-band { background: var(--sand); color: var(--ink); }
.financing-inner {
  display: grid; grid-template-columns: 1.6fr auto; align-items: center;
  gap: 2.5rem; padding-block: 3.5rem;
}
.financing-band h2 { color: var(--ink); }
.financing-band p { color: rgb(13 33 51 / 82%); max-width: 46rem; }
.financing-band .button-primary {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 12%) 0%, rgb(255 255 255 / 0%) 46%,
                            rgb(0 0 0 / 12%) 100%),
    var(--navy);
}
.financing-band .button-primary:hover {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 0%) 46%,
                            rgb(0 0 0 / 10%) 100%),
    var(--ink);
}

/* ---------- contact band ---------- */

.contact-band { background: var(--navy); color: #fff; padding-block: 4rem; }
.contact-inner {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2.5rem;
}
.contact-band h2 { color: #fff; margin-bottom: 0.6rem; }
.contact-band p { color: rgb(255 255 255 / 84%); margin: 0; }

/* ---------- generic content pages ---------- */

.about-story, .portfolio-intro, .values-section, .service-areas {
  padding-block: 4rem;
}

/* About page. The redesign dropped the grids these two sections used to have,
   which left the photos full width, the copy stacked underneath, and the
   padding doubled where .story-copy sat inside an already padded section. */
.about-story {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 3rem; align-items: start;
}
.about-story > img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-bottom: 3px solid var(--bronze);
}
.story-copy > :first-child { margin-top: 0; }
.story-copy h2 { margin-bottom: 1rem; }

.values-section { background: var(--sand-soft); }

.personal-note {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 3rem; align-items: center; padding-block: 4rem 5rem;
}
.personal-note-images { display: grid; gap: 1rem; }
.personal-note-images img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
}
.personal-note h2 { margin-bottom: 1rem; }
.personal-note p { color: var(--muted); }
.personal-note .button { margin-top: 1.75rem; }

.area-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.55rem 1.5rem;
  border-top: 1px solid var(--line); padding-top: 1.5rem;
}
.area-list li {
  font: 600 0.95rem var(--head); color: var(--navy);
  display: flex; align-items: baseline; gap: 0.55rem;
}
.area-list li::before { content: ""; width: 5px; height: 5px; background: var(--bronze); flex: none; }
.area-note { margin: 1.5rem 0 0; color: var(--muted); max-width: 46rem; }
.area-note a { color: var(--navy); font-weight: 600; }
.story-copy p, .portfolio-intro p, .about-story p { color: var(--muted); max-width: 46rem; }

.value-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem;
}
.value-card {
  border: 1px solid var(--line); border-top: 3px solid var(--bronze);
  padding: 1.5rem; background: #fff;
}
.value-card h3 { margin-bottom: 0.4rem; }
.value-card p { color: var(--muted); margin: 0; font-size: 0.95rem; }

.portfolio-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem;
  padding-bottom: 4rem;
}
.portfolio-item { margin: 0; border: 1px solid var(--line); background: #fff; }
.portfolio-item img { width: 100%; height: auto; }
.portfolio-item figcaption {
  padding: 0.85rem 1rem; font-size: 0.9rem; color: var(--muted);
  font-family: var(--head); font-weight: 600;
}
.portfolio-actions { padding-bottom: 3rem; display: flex; gap: 0.85rem; flex-wrap: wrap; }

/* ---------- service sheets ---------- */

/* The printed flyers used to sit in the photo grids, where a portrait poster
   landed in a 300px column beside landscape job photographs and got stretched
   past its own resolution. They are not photographs of work, they are printed
   sheets, so they get their own band and are held to the width they were
   actually made at. Four of the seven exist only as small thumbnails, and the
   210px cap is what keeps those from going soft. */
.sheet-band {
  background: var(--sand-soft);
  border-top: 1px solid var(--line);
  padding-block: 4rem;
}
.sheet-band h2 { margin-bottom: 0.75rem; }
.sheet-lede { color: var(--muted); max-width: 46rem; margin: 0; }

.sheet-rack {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 210px));
  justify-content: start; gap: 2.25rem 1.75rem; margin-top: 2.5rem;
}
.sheet { margin: 0; }
/* One of the sheets is landscape. At a portrait card's width it would come out
   half the height of everything beside it, so it takes two tracks. */
.sheet--wide { grid-column: span 2; }

/* A narrow white mat, so a dark poster reads as a sheet lying on the warm
   ground rather than a hole cut in it. */
.sheet-paper {
  display: block; background: #fff; padding: 7px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgb(13 33 51 / 12%);
}
.sheet-paper img { width: 100%; height: auto; }
a.sheet-paper { transition: transform 0.18s ease, box-shadow 0.18s ease; }
a.sheet-paper:hover,
a.sheet-paper:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgb(13 33 51 / 22%);
}
.sheet figcaption {
  margin-top: 0.9rem;
  font: 600 0.9rem/1.45 var(--head); color: var(--navy);
}
/* Only the sheets that exist at a size worth enlarging carry this. */
.sheet-open-note {
  display: block; margin-top: 0.25rem;
  font: 700 0.72rem var(--head); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--bronze);
}

/* Sized to the sheet rather than to a fixed box. Two of these exist only at
   480px wide, and a fixed dialog would blow them up past their own detail. */
.sheet-dialog {
  border: 0; padding: 0; background: transparent;
  width: max-content; max-width: min(92vw, 660px);
}
.sheet-dialog::backdrop { background: rgb(13 33 51 / 84%); }
.sheet-dialog-header {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem; background: var(--ink); color: #fff;
  border-bottom: 3px solid var(--bronze);
}
.sheet-dialog-title { margin: 0; font: 700 0.95rem var(--head); color: #fff; }
.sheet-dialog-close {
  background: none; border: 1px solid rgb(255 255 255 / 40%); color: #fff;
  padding: 0.35rem 0.75rem; cursor: pointer;
  font: 600 0.85rem var(--head); flex: none;
}
.sheet-dialog-figure { margin: 0; background: #fff; }
.sheet-dialog-figure img {
  max-width: 100%; width: auto; height: auto;
  max-height: calc(100vh - 7rem); margin: 0 auto;
}

/* ---------- FAQ ---------- */

.faq-list { max-width: 52rem; padding-bottom: 4rem; }
.faq-item { border-bottom: 1px solid var(--line); padding: 1.35rem 0; }
.faq-item > summary {
  cursor: pointer; list-style: none;
  font: 700 clamp(1.02rem, 1.6vw, 1.2rem)/1.4 var(--head); color: var(--navy);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+"; flex: none; color: var(--bronze); font-size: 1.4rem; line-height: 1;
}
.faq-item[open] > summary::after { content: "\2013"; }
.faq-answer { padding-top: 0.85rem; color: var(--muted); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ---------- contact page ---------- */

/* Both columns take their natural height. Left to stretch, the form box grew
   to match the map column and the page read as a giant empty form. */
.contact-layout {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem;
  padding-block: 4rem; align-items: start;
}
.contact-card {
  border: 1px solid var(--line); border-top: 3px solid var(--bronze);
  padding: 1.6rem 1.75rem; background: #fff; margin-bottom: 1.25rem;
  box-shadow: 0 10px 26px rgb(8 24 37 / 7%);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.contact-card:hover { box-shadow: 0 16px 34px rgb(8 24 37 / 12%); transform: translateY(-2px); }
.contact-card h2 {
  margin: 0 0 0.5rem;
  font: 700 0.72rem var(--head); letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--bronze);
}
.contact-card > p:first-of-type { margin: 0 0 0.35rem; font-size: 1.15rem; font-weight: 700; }
.contact-card > p:first-of-type a { color: var(--navy); }
.contact-card > p:last-child { margin: 0; color: var(--muted); font-size: 0.92rem; }
.contact-details { list-style: none; margin: 0; padding: 0; }
.contact-details li { margin-bottom: 0.85rem; }

/* The enquiry form is the one place on the site a visitor is asked to do
   work, so it is built as a card rather than fields loose on the page:
   bronze rule across the top, and inputs that sit in the card as wells. */
.project-form {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--bronze);
  padding: 2rem 2rem 2.25rem;
  box-shadow: 0 18px 40px rgb(8 24 37 / 10%);
}
.project-form h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
}
.project-form > .required-note:first-of-type {
  margin: 0 0 1.75rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.form-field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.15rem; }
.form-field label {
  font: 700 0.72rem var(--head); letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--navy);
}

.form-field input, .form-field select, .form-field textarea {
  border: 1px solid var(--line); border-bottom-width: 2px;
  padding: 0.85rem 0.95rem; font: inherit; font-size: 0.98rem;
  background: var(--sand-soft); color: var(--body); border-radius: 0;
  box-shadow: inset 0 1px 3px rgb(8 24 37 / 7%);
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.form-field textarea { min-height: 8.5rem; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: rgb(97 102 107 / 65%); }

.form-field input:hover, .form-field select:hover, .form-field textarea:hover {
  border-color: rgb(24 50 74 / 26%);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--bronze); border-bottom-color: var(--bronze);
  box-shadow: inset 0 1px 3px rgb(8 24 37 / 5%), 0 0 0 3px rgb(155 96 37 / 18%);
}

/* The native select arrow is the one control that cannot be styled, and it
   drags the whole card back down to looking like a default form. */
.form-field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75L6 6.25L11 1.75' stroke='%2318324a' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.project-form .button { width: 100%; margin-top: 0.5rem; }

.form-trap { position: absolute; left: -9999px; }
.required-note, .form-message { font-size: 0.88rem; color: var(--muted); }
.required-note em, .req { color: var(--bronze); font-style: normal; }
.form-message:not(:empty) {
  margin-top: 1rem; padding: 0.85rem 1rem;
  background: var(--sand-soft); border-left: 3px solid var(--bronze);
  color: var(--navy); font-weight: 600;
}

.service-map { padding-bottom: 4rem; }
.service-map-heading { margin-bottom: 1rem; }
.service-map-frame {
  border: 1px solid var(--line); border-top: 3px solid var(--bronze);
  box-shadow: 0 10px 26px rgb(8 24 37 / 7%);
}
/* The embed ships with height="600", which is taller than the whole form
   beside it. Size it from the column instead. */
.service-map-frame iframe {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border: 0;
}

/* ---------- video ---------- */

/* The walkthrough videos sit in their own ink band so they read as a produced
   feature rather than two bare embeds under the gallery. */
.video-band {
  margin-top: 2.5rem; padding: 2.25rem 2.25rem 2.5rem;
  background: var(--ink); color: #fff;
  display: grid; grid-template-columns: minmax(16rem, 1fr) auto; gap: 2.5rem;
  position: relative;
}
.video-band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--bronze);
}
.video-band-copy { align-self: center; }
.video-band-copy h3 { color: #fff; font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 0 0 1rem; }
.video-band-copy p { color: rgb(255 255 255 / 74%); max-width: 28rem; margin: 0 0 1rem; }
.video-band-copy p:last-child { margin-bottom: 0; }
.video-band-copy .tel-link { color: var(--bronze-txt); }
.project-videos {
  display: grid; grid-template-columns: repeat(2, minmax(190px, 230px));
  gap: 1.5rem; align-content: start;
}
.video-frame {
  position: relative; aspect-ratio: 9 / 16; background: var(--navy);
  border: 1px solid rgb(216 195 165 / 30%);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The extension sheet rides with the walkthroughs rather than with the
   remodeling gallery, because both are realtor pieces. On the ink band the
   white mat is doing the work the badge plate does elsewhere: without it a
   dark poster on a dark ground reads as a hole. */
.video-band-sheet {
  display: flex; align-items: flex-start; gap: 1.25rem;
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgb(216 195 165 / 30%);
}
.video-band-sheet .sheet-paper {
  flex: none; width: 128px; padding: 5px; border-color: transparent;
  box-shadow: 0 8px 20px rgb(0 0 0 / 35%);
}
.video-band-sheet-copy h4 {
  color: #fff; margin: 0 0 0.4rem; font-size: 1.02rem;
}
.video-band-sheet-copy p { margin: 0; max-width: 24rem; }
.video-band-sheet .sheet-open-note { color: var(--bronze-txt); margin-top: 0.6rem; }

.video-dialog { border: 0; padding: 0; max-width: min(92vw, 1000px); }
.video-dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: var(--ink); color: #fff; border-bottom: 3px solid var(--bronze); }
.video-dialog-close { background: none; border: 1px solid rgb(255 255 255 / 40%); color: #fff; padding: 0.35rem 0.75rem; cursor: pointer; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink); color: rgb(255 255 255 / 78%);
  padding-block: 3rem; font-size: 0.92rem;
}
.site-footer a { color: rgb(255 255 255 / 88%); }
.footer-services { grid-column: 1 / -1; order: -1; margin: 0 0 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-dark); }
.footer-services-title {
  margin: 0 0 0.7rem; font: 700 0.72rem var(--head); letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--bronze-txt);
}
.footer-services-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.footer-services-links a { text-decoration: none; font-size: 0.9rem; }
.footer-services-links a:hover { color: var(--bronze-txt); }

.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; }
.footer-badge { width: 170px; height: 151px; object-fit: contain; margin: 0 0 1.4rem; }
.footer-brand { margin: 0 0 0.5rem; font: 700 1.05rem var(--head); color: #fff; }
.footer-description { margin: 0 0 1rem; max-width: 34rem; color: rgb(255 255 255 / 72%); }
.footer-inner nav[aria-label="Footer navigation"] { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-inner nav[aria-label="Footer navigation"] a { text-decoration: none; }
.footer-inner nav[aria-label="Footer navigation"] a:hover { color: var(--bronze-txt); }

.tel-link { color: inherit; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.veteran-discount {
  display: inline-block; margin-top: 0.4rem; padding: 0.4rem 0.75rem;
  border: 1px solid rgb(216 195 165 / 40%); color: var(--sand);
  font: 600 0.82rem var(--head);
}
.footer-external-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.new-website-button {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.95rem; border: 1px solid rgb(255 255 255 / 30%);
  text-decoration: none; font: 600 0.82rem var(--head);
}
.new-website-button:hover { border-color: var(--bronze-txt); color: var(--bronze-txt); }
.facebook-mark { font-weight: 800; }
.footer-meta {
  grid-column: 1 / -1; margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.82rem; color: rgb(255 255 255 / 55%);
}
.copyright { margin: 0; }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid > .service-card:last-child { grid-column: 1 / -1; }
  .featured-media { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 165px; }
  .featured-media .featured-image:first-child { grid-column: span 2; grid-row: span 2; }
  .video-band { grid-template-columns: 1fr; gap: 1.75rem; }
  .about-story, .personal-note { grid-template-columns: 1fr; gap: 2rem; }
  .personal-note-images { grid-template-columns: repeat(2, 1fr); }
  .intro, .two-column, .contact-layout { grid-template-columns: 1fr; gap: 2rem; }
  .financing-inner { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1fr; }
}

/* The full nav with FAQ and the call button needs about 830px, so the menu
   collapses at 860 while the page grids hold their tablet layout until 760. */
@media (max-width: 860px) {
  :root { --header-h: 78px; }
  .header-inner { min-height: 78px; gap: 1rem; }
  .brand-logo { width: 68px; height: 60px; }
  .footer-badge { width: 142px; height: 126px; }
  .menu-button { display: inline-flex; }
  .primary-navigation {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: 3px solid var(--bronze); padding: 0.5rem 1rem 1rem;
  }
  .primary-navigation.open { display: flex; }
  .primary-navigation a { padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--line-dark); }
  .primary-navigation .header-call { margin: 0.75rem 0 0; justify-content: center; }
  .site-header { position: relative; }
}

@media (max-width: 760px) {
  :root { --shell: calc(100% - 2rem); }

  .hero { min-height: 520px; }
  .hero-content { padding: 4.5rem 0 3rem; }
  .hero-actions .button { width: 100%; }
  .interior-hero { min-height: 300px; }
  .interior-hero .hero-content { padding: 3rem 0 2.25rem; }


  .service-grid { grid-template-columns: 1fr; }
  .service-grid > .service-card:last-child { min-height: 230px; }
  .service-card { min-height: 230px; }
  .featured-media { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
  .video-band { padding: 1.5rem 1.25rem 1.75rem; }
  /* Side by side, the sheet leaves the copy about 155px to wrap in, which is
     a ragged sliver. Stack it. */
  .video-band-sheet { flex-direction: column; gap: 1rem; }
  .project-videos { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .project-form { padding: 1.5rem 1.25rem 1.75rem; }
  .contact-card { padding: 1.35rem 1.4rem; }
  .footer-inner { grid-template-columns: 1fr; }
  .intro, .two-column { padding-block: 3rem; }
  .services-section, .featured-work { padding-block: 3.25rem; }
  .sheet-band { padding-block: 3rem; }
  /* auto-fit counts its repetitions off the maximum track size, not the
     minimum, so 158 rather than 175 is what puts two sheets on a phone
     instead of one. */
  .sheet-rack { grid-template-columns: repeat(auto-fit, minmax(130px, 158px)); gap: 1.75rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---------- long-form article ---------- */

.prose { max-width: 52rem; }
.prose > p { color: var(--muted); font-size: 1.03rem; }
.prose > p:first-of-type {
  font-size: 1.18rem; line-height: 1.62; color: var(--navy);
  border-left: 3px solid var(--bronze); padding-left: 1.25rem; margin-bottom: 1.6rem;
}
.prose h2 {
  margin: 2.75rem 0 0.85rem; font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.prose h2:first-of-type { margin-top: 2.25rem; }
.prose a { color: var(--navy); font-weight: 600; }
.prose strong { color: var(--navy); }

/* FAQ section dividers sit between the questions, so they are quieter than a page H2. */
.faq-list h2 {
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  margin: 3rem 0 0.25rem; padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--bronze);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.faq-list h2:first-child { margin-top: 0; }

/* On a narrow screen the diagonal scrim covers the whole frame, so drop it and
   let the photograph read behind a single vertical wash. */
@media (max-width: 760px) {
  .hero > .hero-media { object-position: 62% 46%; }
  .hero-overlay::before {
    background: linear-gradient(0deg,
      rgb(8 24 37 / 92%) 0%,
      rgb(8 24 37 / 74%) 34%,
      rgb(8 24 37 / 44%) 62%,
      rgb(8 24 37 / 16%) 86%,
      rgb(8 24 37 / 6%) 100%);
  }
  .hero h1 { font-size: clamp(2rem, 8.5vw, 2.7rem); max-width: 100%; }
  .hero-lede { font-size: 1.02rem; }
}