/* ==========================================================================
   HOME PAGE STYLES
   --------------------------------------------------------------------------
   Loaded by / only, after css/styles.css. The home page redesign lives here
   rather than in the shared sheet so the inner pages keep the styling they
   already have -- these rules reuse shared class names (.btn, .site-header,
   .gallery-item) and would otherwise restyle every page on the site.
   ========================================================================== */

/* Premium layer tokens: material, depth, rhythm */
:root {
  /* --- Premium layer: material, depth, rhythm ---------------------------- */

  /* Warm structural neutrals. The blue is the brand; these are the room it
     sits in. Sampled toward timber rather than the cool grey default. */
  --color-timber:        #2b2016;
  --color-timber-soft:   #3a2c1e;
  --color-bone:          #f7f4ef;
  --color-bone-deep:     #efe9e0;
  --color-rule:          #ddd4c8;

  /* Editorial accent, slightly deeper than the old gold so it holds on bone */
  --color-accent-deep:   #856020;  /* was #a97c33 (3.74:1 on white, failed AA); now matches styles.css */

  /* Depth: layered, warm-tinted shadows read as physical rather than CSS */
  --shadow-lift:  0 2px 4px rgba(43, 32, 22, 0.05),
                  0 8px 18px rgba(43, 32, 22, 0.07);
  --shadow-raise: 0 4px 10px rgba(43, 32, 22, 0.07),
                  0 20px 44px rgba(43, 32, 22, 0.13);
  --shadow-deep:  0 10px 26px rgba(43, 32, 22, 0.12),
                  0 40px 80px rgba(43, 32, 22, 0.20);

  /* Section rhythm — alternating scale so sections stop feeling identical */
  --pad-tight:  clamp(56px, 6vw, 88px);
  --pad-normal: clamp(76px, 9vw, 132px);
  --pad-loose:  clamp(96px, 12vw, 176px);

  /* Editorial measure */
  --measure: 64ch;
}

/* Paper grain — a single tiled SVG, no network request. Gives flat bone
   backgrounds a printed texture instead of a dead fill. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}


/* ==========================================================================
   17. Premium Refinement Layer  (home page)
   --------------------------------------------------------------------------
   The base sheet above builds every section from the same stamp: eyebrow,
   heading, paragraphs, 4px radius, hairline border. Correct, but uniform --
   and uniformity is what reads as machine-made. This layer reintroduces
   hierarchy, material and rhythm: warm paper tone, layered depth, an
   editorial hero, and section-specific treatments that differ on purpose.
   ========================================================================== */

/* --- 17.1 Paper & atmosphere ------------------------------------------- */

body { background: var(--color-bone); }

/* Grain sits above the background and below content, so flat fills read as
   stock rather than screen colour. Pointer-events off -- purely optical. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background-image: var(--grain);
  opacity: 0.85;
  pointer-events: none;
  mix-blend-mode: multiply;
}
/* Lift page content above the fixed grain layer. The header keeps its own
   z-index (1000) so it stays above the mobile nav overlay — restating it
   here would bury the close button underneath the open menu. */
main, .site-footer { position: relative; z-index: 2; }

.bg-alt { background: var(--color-bone-deep); }

/* Hairline rules warm up with the paper */
.trust-bar,
.service-block + .service-block,
.why-list,
.why-item,
.contact-section { border-color: var(--color-rule); }

/* --- 17.2 Typography: real hierarchy ------------------------------------ */

/* Display sizes get a wider dynamic range. The old clamp ceiling of 56px on
   h1 and 41px on h2 sat too close together -- the eye read them as one level. */
h1 {
  font-size: clamp(38px, 5.6vw, 74px);
  font-weight: 700;
  letter-spacing: -0.033em;
  line-height: 1.03;
}
h2 {
  font-size: clamp(29px, 3.9vw, 50px);
  letter-spacing: -0.026em;
  line-height: 1.1;
}
h3 { letter-spacing: -0.018em; }

/* Eyebrow: rule + text instead of floating uppercase. Reads as editorial
   furniture rather than a default label component. */
.section-label {
  gap: 13px;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--color-accent-deep);
}
.section-label::before {
  content: "";
  width: 30px;
  height: 1.5px;
  background: currentColor;
  flex: none;
}
.text-center .section-label::after {
  content: "";
  width: 30px;
  height: 1.5px;
  background: currentColor;
  flex: none;
}
/* The hero eyebrow stays white with the rest of the banner type; the CTA
   bands keep the gold. */
.cta-copy .section-label,
.cta-review .section-label { color: var(--color-accent); }
.hero-content .section-label { color: var(--color-text-inverse); }

/* Body copy gets a comfortable measure */
p { max-width: var(--measure); }
.section-heading { margin-bottom: 22px; }

/* --- 17.3 Section rhythm ------------------------------------------------ */

/* Alternating vertical scale. Uniform 100px padding on every band is the
   single loudest "template" tell; varying it gives the page a pulse. */
.section-pad    { padding: var(--pad-normal) 0; }
.section-pad-sm { padding: var(--pad-tight) 0; }
#services       { padding: var(--pad-loose) 0; }
.cta-strip      { padding: var(--pad-loose) 0; }

/* --- 17.4 Buttons: weight and material ---------------------------------- */

.btn {
  font-size: 14.5px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  padding: 18px 34px;
  border-radius: 3px;
  /* Uppercase + wider padding makes long labels outgrow narrow columns.
     Allow wrapping rather than letting the button escape its container. */
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
  transition: background-color 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
              color 0.22s ease, border-color 0.22s ease,
              transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 0.22s ease;
}
.btn-primary {
  box-shadow: 0 1px 2px rgba(23, 86, 140, 0.24), 0 8px 20px rgba(23, 86, 140, 0.26);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(23, 86, 140, 0.26), 0 14px 32px rgba(23, 86, 140, 0.34);
}
.btn-on-dark { border-width: 1px; border-color: rgba(255, 255, 255, 0.42); }
.btn-on-dark:hover { transform: translateY(-2px); }

/* Underline that draws in, rather than an arrow that just nudges */
.link-arrow { position: relative; padding-bottom: 4px; letter-spacing: 0.03em; }
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.link-arrow:hover::after { width: 100%; }

/* --- 17.5 Hero: editorial, with proof ----------------------------------- */

.hero-bg {
  min-height: min(94vh, 940px);
  padding: calc(var(--header-h) + 130px) 0 0;
  /* The shared sheet points the hero at a flat brick-ranch shot; this log
     home with its new deck is the strongest photo in the library and
     carries the headline far better. Home page only. */
  background-image: url("/images/carolina-custom-builds-59.webp");
  /* Crops low so the deck sweeps in beneath the headline -- centring on
     this frame fills the hero with log wall and loses the deck. */
  background-position: center 70%;
}

/* Layered scrim: a dark base for text contrast plus a warm tint so the
   photograph reads as golden-hour timber rather than flat grey. */
/* Weighted to the left so the headline sits on near-solid tone while the
   right two-thirds of the deck stays visible. The old single dark wash hid
   the photograph the hero is meant to be selling. */
.hero-overlay {
  background:
    linear-gradient(100deg, rgba(11, 17, 24, 0.88) 0%, rgba(11, 17, 24, 0.72) 30%,
                    rgba(11, 17, 24, 0.34) 55%, rgba(11, 17, 24, 0.12) 78%,
                    rgba(11, 17, 24, 0.22) 100%),
    linear-gradient(180deg, rgba(11, 17, 24, 0.46) 0%, rgba(11, 17, 24, 0.04) 26%,
                    rgba(11, 17, 24, 0.10) 58%, rgba(11, 17, 24, 0.80) 100%),
    linear-gradient(180deg, rgba(169, 124, 51, 0.13) 0%, rgba(169, 124, 51, 0) 52%);
}

/* Headline column narrows and drops the side paragraph block. The old
   two-column hero split attention; a single strong column does not. */
.hero-grid { display: block; }
.hero-content h1 {
  max-width: none;
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: 1.0;
  text-wrap: pretty;
  text-shadow: 0 2px 28px rgba(9, 14, 20, 0.5);
}
.hero-content h1 .hero-em { margin-top: 0.1em; }
.hero-content h1 .hero-em {
  display: block;
  color: var(--color-text-inverse);
  font-style: normal;
}
.hero-subtitle {
  max-width: 46ch;
  margin-top: 26px;
  font-size: clamp(17px, 1.45vw, 20px);
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 16px rgba(9, 14, 20, 0.5);
}
.hero-actions { margin-top: 40px; gap: 16px; }

/* Hero intro paragraphs become a compact credential strip instead of an
   essay column -- same information, a fraction of the visual weight. */
.hero-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  max-width: none;
  margin-top: 64px;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-cred {
  flex: 1 1 0;
  min-width: 168px;
  padding: 24px 30px 46px 0;
}
.hero-cred + .hero-cred { padding-left: 30px; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.hero-cred dt {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.1vw, 29px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero-cred dd {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.42;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.66);
}

/* --- 17.6 Trust bar: floating card, not a full-bleed band --------------- */

.trust-bar {
  background: transparent;
  border: 0;
  margin-top: calc(var(--pad-tight) * -0.5);
  padding-bottom: var(--pad-tight);
}
.trust-bar-inner {
  position: relative;
  z-index: 3;
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  box-shadow: var(--shadow-raise);
  overflow: hidden;
}
/* Now anchors into the service pages, so they need affordance: a colour
   shift, a lifting icon, and an accent rule that wipes in along the top. */
.trust-item {
  position: relative;
  padding: 30px 28px;
  gap: 17px;
  align-items: flex-start;
  color: inherit;
  transition: background 0.24s ease;
}
.trust-item + .trust-item { border-left: 1px solid var(--color-rule); }
.trust-item svg {
  color: var(--color-accent-deep);
  margin-top: 2px;
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1), color 0.24s ease;
}
.trust-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.trust-item:hover { background: rgba(43, 32, 22, 0.028); }
.trust-item:hover::after { width: 100%; }
.trust-item:hover svg { transform: translateY(-3px); color: var(--color-primary); }
.trust-item:hover .trust-number { color: var(--color-primary); }
.trust-number {
  font-size: 16px;
  letter-spacing: -0.012em;
  transition: color 0.24s ease;
}
.trust-label { font-size: 13.5px; }

/* --- 17.7 Intro band: pull-quote scale ---------------------------------- */

.intro-grid { grid-template-columns: 0.85fr 1.35fr; gap: 64px; }
.intro-grid .lede {
  font-size: clamp(23px, 2.7vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: 15ch;
}
.intro-highlight {
  border-left-width: 2px;
  border-left-color: var(--color-accent-deep);
  padding-left: 26px;
  font-size: clamp(18px, 1.5vw, 22px);
}

/* --- 17.8 Media: depth and framing -------------------------------------- */

.split-media img,
.service-media img,
.service-media.stacked figure img {
  border-radius: 3px;
  box-shadow: var(--shadow-raise);
}
.service-media.stacked figure { overflow: visible; }

/* Offset rule behind the about photo -- a drafted, deliberate frame */
.split-media::before {
  content: "";
  position: absolute;
  left: -20px;
  top: -20px;
  width: 46%;
  height: 46%;
  border-top: 2px solid var(--color-accent-deep);
  border-left: 2px solid var(--color-accent-deep);
  opacity: 0.5;
  pointer-events: none;
}
.split-badge {
  background: var(--color-timber);
  border-radius: 3px;
  box-shadow: var(--shadow-deep);
  padding: 24px 26px;
}
.split-badge span { color: var(--color-accent); letter-spacing: 0.18em; font-size: 11px; }

.ba-tag {
  border-radius: 2px;
  background: rgba(43, 32, 22, 0.9);
  backdrop-filter: blur(6px);
  font-size: 10.5px;
  letter-spacing: 0.16em;
}
.ba-tag.is-after { background: rgba(23, 86, 140, 0.92); }

/* --- 17.9 Services: restrained, scannable ------------------------------- */

.service-block { padding: clamp(52px, 6vw, 84px) 0; }
.service-body h3, .service-center h3 { margin-bottom: 18px; }

/* Lead paragraph earns display treatment; the rest recedes. This is the
   hierarchy the original lacked -- every paragraph had equal weight. */
.service-body > p:first-of-type,
.service-center > p:first-of-type {
  font-family: var(--font-display);
  font-size: clamp(17.5px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1.44;
  letter-spacing: -0.012em;
  color: var(--color-text);
}
.service-body > p,
.service-center > p { font-size: 16px; line-height: 1.7; }

.service-list-title {
  font-size: 11.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: 16px;
}

/* Checklists become quiet tag rows. Seventy diamond bullets down the page
   was the strongest filler signal on the site. */
.checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.checklist li {
  padding: 7px 13px;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--color-text-muted);
  background: rgba(43, 32, 22, 0.038);
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.checklist li::before { display: none; }
.checklist li:hover {
  color: var(--color-primary-dark);
  border-color: var(--tint-primary-line);
  background: var(--tint-primary-soft);
}
.checklist.cols-3 { grid-template-columns: none; }
.service-center .checklist { justify-content: center; max-width: 760px; }

/* Overflow line: absorbs the routine scope items that used to be chips of
   their own. Keeps the lists to a scannable six without dropping detail. */
.service-note {
  margin-top: 13px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  opacity: 0.9;
}
.service-center .service-note { margin-left: auto; margin-right: auto; text-align: center; }

/* Lists sit tighter to the copy now that they are shorter */
.checklist + p { margin-top: 18px; }
.service-list-title { margin-top: 22px; }

/* --- 17.10 Why-us: numbered editorial rows ------------------------------ */

.why-item { grid-template-columns: 330px 1fr; gap: 56px; padding: 46px 0; }
.why-head { position: relative; align-items: flex-start; }

/* Swap the tinted icon chip for an outlined mark -- quieter, more designed */
.why-icon {
  width: 54px;
  height: 54px;
  background: transparent;
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  color: var(--color-accent-deep);
}
.why-body { column-gap: 52px; }
.why-body p { font-size: 15.5px; }

/* --- 17.11 Process: connected timeline ---------------------------------- */

/* The 3x2 bordered grid read as a spreadsheet. Cards on paper with a
   numeral watermark read as a designed sequence. */
.process-steps {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.process-step {
  position: relative;
  padding: 38px 32px 34px;
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 0.28s ease, border-color 0.28s ease;
}
.process-step::before {
  content: attr(data-step);
  position: absolute;
  right: -8px;
  top: -22px;
  font-family: var(--font-display);
  font-size: 116px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(43, 32, 22, 0.045);
  pointer-events: none;
  /* The shared sheet fades this numeral to 0.055 for the inner pages; here the
     tint lives in the colour above, so the opacity has to come back to full or
     the watermark disappears entirely. */
  opacity: 1;
}
.process-step:hover {
  transform: translateY(-4px);
  border-color: var(--tint-primary-line);
  box-shadow: var(--shadow-raise);
  background: #fff;
}
.step-number {
  font-size: 11.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  margin-bottom: 16px;
}
.process-step h3 { font-size: clamp(18px, 1.3vw, 21px); margin-bottom: 11px; }
.process-step p { font-size: 15.5px; line-height: 1.65; }

/* --- 17.12 Gallery: editorial mosaic ------------------------------------ */

.gallery-grid { gap: 18px; }
.gallery-item {
  border-radius: 3px;
  box-shadow: var(--shadow-lift);
  transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.34s ease;
}
.gallery-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-raise); }
.gallery-item img { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::after {
  background: linear-gradient(180deg, rgba(11, 17, 24, 0) 38%, rgba(11, 17, 24, 0.86) 100%);
  opacity: 0.45;
}
.gallery-item .gallery-overlay {
  opacity: 1;
  transform: translateY(0);
  font-size: 13px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(9, 14, 20, 0.7);
}

/* Break the uniform grid: a tall hero tile anchors the mosaic. Rows are
   explicit so the spanning tile cannot leave a hole beside it.

   Scoped to the desktop range on purpose. These spans used to be unscoped, and
   because home.css loads after styles.css they beat the mobile spans in the
   shared sheet's media queries -- so a phone still got 3-of-12-column tiles
   (~70px wide) locked to a 232px row. Everything below 1025px is handled by the
   blocks underneath. */
@media (min-width: 1025px) {
  .gallery-grid {
    grid-auto-rows: 232px;
    align-items: stretch;
  }
  .gallery-grid .gallery-item { aspect-ratio: auto; height: 100%; }
  .gallery-item.tall { grid-column: span 6; grid-row: span 2; }
  .gallery-item.sq   { grid-column: span 3; grid-row: span 1; }
  .gallery-item.hf   { grid-column: span 6; grid-row: span 1; }
  .gallery-item.wd   { grid-column: span 4; grid-row: span 1; }
}

/* Tablet and phone: one full-bleed hero tile, then a clean two-up. Tiles are
   sized by aspect-ratio against a fluid column instead of a fixed row height --
   the old `grid-auto-rows: 232px` combined with `aspect-ratio: 3/2` resolved
   the hero tile's WIDTH from that height, pinning it to 348px at every
   viewport (overflowing a 320px phone, and stranded mid-row on a tablet). */
@media (max-width: 1024px) {
  .gallery-grid {
    grid-auto-rows: auto;
    align-items: stretch;
  }
  .gallery-grid .gallery-item { height: auto; }
  .gallery-item.tall {
    grid-column: span 12;
    grid-row: auto;
    aspect-ratio: 3 / 2;
  }
  .gallery-item.sq,
  .gallery-item.hf,
  .gallery-item.wd,
  .gallery-item.wd:last-child {
    grid-column: span 6;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 560px) {
  .gallery-grid { gap: 12px; }
  .gallery-item.tall { aspect-ratio: 4 / 3; }
  /* The caption is bounded left and right, so on a half-width phone tile it
     wraps rather than running out through the neighbouring tile. */
  .gallery-item .gallery-overlay {
    left: 12px;
    right: 12px;
    bottom: 12px;
    font-size: 11px;
    letter-spacing: 0.07em;
  }
}

/* --- 17.13 CTA strip: timber, not slate --------------------------------- */

.cta-strip {
  position: relative;
  background:
    linear-gradient(150deg, rgba(43, 32, 22, 0.97) 0%, rgba(22, 33, 46, 0.97) 62%),
    var(--color-timber);
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.5;
  pointer-events: none;
}
.cta-strip > .container { position: relative; z-index: 2; }
.cta-copy h2 { font-size: clamp(32px, 4.2vw, 54px); }
.cta-phone { font-size: clamp(29px, 3.2vw, 43px); letter-spacing: -0.03em; }

.review-card {
  padding: 34px 36px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  backdrop-filter: blur(3px);
}
.review-quote {
  font-size: 16.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.9);
}

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

.faq-item {
  background: #fff;
  border-color: var(--color-rule);
  border-radius: 3px;
  box-shadow: var(--shadow-lift);
}
.faq-item[open] { box-shadow: var(--shadow-raise); }
.faq-num { font-size: 13px; letter-spacing: 0.08em; color: var(--color-accent-deep); }
.faq-toggle { background: rgba(43, 32, 22, 0.05); }

/* --- 17.15 Forms & contact ---------------------------------------------- */

.contact-form-wrap {
  padding: 44px;
  border-color: var(--color-rule);
  border-radius: 3px;
  box-shadow: var(--shadow-raise);
}
.form-group label {
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.form-group input,
.form-group select,
.form-group textarea {
  border-radius: 2px;
  border-color: var(--color-rule);
  background: var(--color-bone);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { background: #fff; }

.contact-card {
  border-color: var(--color-rule);
  border-radius: 3px;
  box-shadow: var(--shadow-lift);
}
.contact-card:hover { box-shadow: var(--shadow-raise); }
.contact-card-icon {
  background: transparent;
  border: 1px solid var(--color-rule);
  border-radius: 50%;
  color: var(--color-accent-deep);
}

/* --- 17.16 Area list ---------------------------------------------------- */

.area-list li {
  background: #fff;
  border-color: var(--color-rule);
  border-left-color: var(--color-rule);
  border-radius: 3px;
  box-shadow: var(--shadow-lift);
}
.area-list li:hover,
.area-list li.is-active { box-shadow: var(--shadow-raise); }
.area-map { border-color: var(--color-rule); border-radius: 3px; box-shadow: var(--shadow-lift); }

/* --- 17.17 Footer ------------------------------------------------------- */

.site-footer {
  position: relative;
  background:
    linear-gradient(180deg, rgba(43, 32, 22, 0.99) 0%, rgba(19, 28, 39, 0.99) 100%),
    var(--color-timber);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.45;
  pointer-events: none;
}
.site-footer > .container { position: relative; z-index: 2; }
.footer-col h4 { font-size: 11.5px; letter-spacing: 0.19em; }
.footer-social a { border-radius: 3px; }

/* --- 17.18 Header ------------------------------------------------------- */

/* The header stays the plain white bar the rest of the site uses -- the
   tinted translucent version made the home page nav read as a different
   component from every inner page. */
.header-logo-name { letter-spacing: 0.085em; }
.btn-quote {
  border-radius: 3px;
  font-size: 12px;
  letter-spacing: 0.13em;
  box-shadow: 0 1px 2px rgba(23, 86, 140, 0.22), 0 6px 16px rgba(23, 86, 140, 0.24);
}
.btn-quote:hover { box-shadow: 0 3px 6px rgba(23, 86, 140, 0.26), 0 12px 26px rgba(23, 86, 140, 0.32); }

/* --- 17.19 Motion: staggered reveal ------------------------------------- */

.fade-in-up {
  transform: translateY(30px);
  transition: opacity 0.72s cubic-bezier(0.2, 0.7, 0.3, 1),
              transform 0.72s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Hero load choreography -- one orchestrated moment beats scattered effects */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-content .section-label,
.hero-content h1,
.hero-content .hero-subtitle,
.hero-content .hero-actions,
.hero-content .hero-intro {
  animation: heroRise 0.95s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}
.hero-content .section-label { animation-delay: 0.05s; }
.hero-content h1             { animation-delay: 0.15s; }
.hero-content .hero-subtitle { animation-delay: 0.27s; }
.hero-content .hero-actions  { animation-delay: 0.38s; }
.hero-content .hero-intro    { animation-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .hero-content .section-label,
  .hero-content h1,
  .hero-content .hero-subtitle,
  .hero-content .hero-actions,
  .hero-content .hero-intro { animation: none; }
}

/* --- 17.20 Responsive --------------------------------------------------- */

@media (max-width: 1024px) {
  .hero-bg { min-height: auto; padding: calc(var(--header-h) + 84px) 0 0; }
  .hero-intro { margin-top: 44px; }
  .hero-cred { flex: 1 1 44%; padding: 20px 20px 28px 0; }
  .hero-cred:nth-child(odd) { padding-left: 0; border-left: 0; }
  .hero-cred + .hero-cred { padding-left: 20px; }
  /* Stacked, the 64px column gap becomes dead vertical space, and the lede's
     15ch cap (sized for a narrow desktop column) breaks the sentence over four
     stub lines while the full content width sits unused beside it. */
  .intro-grid { grid-template-columns: 1fr; gap: 26px; }
  .intro-grid .lede { max-width: none; }
  .why-item { grid-template-columns: 1fr; gap: 22px; padding: 34px 0; }
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-bar { margin-top: 0; padding-top: var(--pad-tight); }
  .contact-form-wrap { padding: 30px 24px; }
}

@media (max-width: 768px) {
  /* Pull the headline up: the tall hero left a third of the screen as empty
     sky before any copy appeared. */
  .hero-bg {
    min-height: 0;
    padding: calc(var(--header-h) + 34px) 0 0;
    background-position: center 58%;
  }
  .hero-content h1 { max-width: 100%; font-size: clamp(33px, 8.6vw, 44px); }
  .hero-subtitle { margin-top: 18px; font-size: 16.5px; }
  .hero-actions { margin-top: 26px; }
  .hero-intro { margin-top: 30px; }
  .hero-cred,
  .hero-cred + .hero-cred {
    flex: 1 1 100%;
    padding: 16px 0 16px 0;
    border-left: 0;
  }
  .hero-cred + .hero-cred { border-top: 1px solid rgba(255, 255, 255, 0.16); }
  .trust-item + .trust-item { border-left: 0; border-top: 1px solid var(--color-rule); }
  .process-steps { grid-template-columns: 1fr; }
  .process-step { padding: 30px 26px; }
  .process-step::before { font-size: 88px; }
  .checklist { gap: 6px; }
  .checklist li { font-size: 13px; padding: 6px 11px; }

  /* The drafted corner bracket is offset -20px, which against the 20px mobile
     gutter puts it exactly on the viewport edge — it read as a stray rule and
     got shaved by the body's overflow clip. Pull it inside the gutter. */
  .split-media::before { left: -10px; top: -10px; width: 40%; height: 40%; }
}


/* ==========================================================================
   18. Service Grid  (replaces the long-form service blocks)
   --------------------------------------------------------------------------
   The old section ran six full-width essay blocks with capability lists --
   roughly 6,000px of page for information a homeowner scans in ten seconds.
   This is a uniform 3x2 card grid: one photo, one promise, one link each.
   Every card is exactly the same size, so nothing reads as more important
   than anything else and the eye can compare them at a glance.
   ========================================================================== */

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}

.service-card {
  display: flex;
  flex-direction: column;
  /* Fill the grid row rather than sizing to content: at narrower widths a
     copy block that wraps one line longer would otherwise leave neighbouring
     cards visibly shorter. */
  height: 100%;
  overflow: hidden;
  color: inherit;
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  box-shadow: var(--shadow-lift);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 0.3s ease, border-color 0.3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--tint-primary-line);
  box-shadow: var(--shadow-deep);
}

/* --- Media --------------------------------------------------------------- */

.service-card-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  flex: none;
  overflow: hidden;
  background: var(--color-bone-deep);
}
.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.service-card:hover .service-card-media img { transform: scale(1.06); }

/* Scrim keeps the numeral legible over any photograph */
.service-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 17, 24, 0.42) 0%,
                              rgba(11, 17, 24, 0) 42%);
  pointer-events: none;
}

.service-card-index {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(9, 14, 20, 0.6);
}

/* --- Body ---------------------------------------------------------------- */

/* Column layout + margin-top:auto on the link pins every CTA to the same
   baseline, so uneven copy lengths cannot make the cards look ragged. */
.service-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 26px 24px;
}
.service-card-body h3 {
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.24;
  margin-bottom: 11px;
  transition: color 0.24s ease;
}
.service-card:hover .service-card-body h3 { color: var(--color-primary); }
.service-card-body p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--color-text-muted);
  max-width: none;
  margin: 0;
  /* Reserve four lines so rows stay the same height even when one card's
     copy wraps shorter than its neighbours'. 4 x 1.62 x 15px = 97.2px. */
  min-height: 6.48em;
}

.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}
.service-card-link svg { flex: none; transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.3, 1); }
.service-card:hover .service-card-link svg { transform: translateX(5px); }

/* --- Closing CTA --------------------------------------------------------- */

.service-grid-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 28px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--color-rule);
  text-align: center;
}
.service-grid-cta p {
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--color-text);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  /* Narrower columns wrap the longest card to five lines */
  .service-card-body p { min-height: 8.1em; }
}

@media (max-width: 620px) {
  .service-grid { grid-template-columns: 1fr; gap: 18px; }
  .service-card-media { aspect-ratio: 16 / 9; }
  /* Single column is wide again — no reserve needed, cards stack anyway */
  .service-card-body p { min-height: 0; }
  .service-card-body { padding: 22px 22px 20px; }
  .service-grid-cta { margin-top: 36px; padding-top: 30px; }
  .service-grid-cta .btn { width: 100%; }
}