/* ─────────────────────────────────────────────────
   Prentiss Mitchell Drywall, LLC — prentissdrywall.com
   Mobile-first. Palette pulled from the client's own logo (shield emblem:
   navy / silver / deep maroon), not from any template's colors.
   ───────────────────────────────────────────────── */

:root {
  /* Logo-derived palette */
  --navy: #1a2c4e;
  --navy-deep: #101d38;
  --steel: #8a94a5;
  --steel-light: #c9cfd9;
  --maroon: #7a1f2b;
  --maroon-deep: #5c161f;

  --bg: #f6f6f4;
  --bg-card: #ffffff;
  --text: #1c1f26;
  --text-muted: #565d6b;
  --border: #dfe1e6;

  --font-display: "Barlow Condensed", -apple-system, sans-serif;
  --font-body: "Barlow", -apple-system, sans-serif;

  --radius: 6px;
  --shadow: 0 2px 10px rgba(16, 29, 56, 0.08);
  --shadow-lift: 0 10px 30px rgba(16, 29, 56, 0.16);
  --brand-logo: 140px;
  --header-rule: 1.5px;
  --brand-gap: 0.875rem;  /* clear space either side of the logo in the header rule */
  --nav-h: 88px;
  --content-max: 1320px;
  --dur: 200ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 2.5rem); }
/*
 * Cards read as too small inside the standard 1320px container — on a
 * normal 1920px screen that is only ~69% of the page width. Scoped to the
 * services grid specifically (not the shared .wrap) so headers, footers
 * and text-heavy sections keep their normal, readable measure. 96vw with
 * a 1800px cap keeps the four cards at roughly 80%+ of the page on any
 * realistic desktop width, without them ballooning absurdly wide on an
 * ultrawide monitor.
 */
.wrap--grid-wide { max-width: min(96vw, 1800px); }
.section { padding: clamp(4.5rem, 11vw, 9rem) 0; }
.section--tight { padding: clamp(3rem, 7vw, 5rem) 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  /* currentColor so the rule follows the eyebrow onto dark sections,
     where the text is overridden to steel-light. */
  border-bottom: 2px solid currentColor;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--navy-deep);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--navy-deep);
  margin-bottom: 0.75rem;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: -0.015em;
  color: var(--navy-deep);
}
.lead { font-size: 1.3125rem; color: var(--text-muted); line-height: 1.62; max-width: 68ch; }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), color var(--dur) var(--ease);
  cursor: pointer;
}
.btn--primary { background: var(--maroon); color: #fff; }
.btn--primary:hover { background: var(--maroon-deep); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn:focus-visible { outline: 3px solid var(--maroon); outline-offset: 2px; }

/* ── Header / nav — mobile first ────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--navy-deep);
}
.site-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  height: 100%;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/*
 * align-self: flex-start (not the row's default center) is deliberate — a
 * logo taller than the header bar centers by splitting its overflow evenly
 * above AND below the bar, and the "above" half gets sliced off by the top
 * of the viewport since the header sits at the very top of the page. Pinning
 * to the top of the row means all of the overflow goes downward into the
 * hero, where nothing clips it, so the whole logo stays visible.
 */
.site-header__brand { display: flex; height: var(--nav-h); align-items: flex-start; align-self: flex-start; gap: 0.875rem; color: #fff; position: relative; z-index: 1; }
/*
 * Deliberately larger than the header bar (88px) — Mr. Davis's direction: the logo
 * should read as big even if it overflows the header bar into the hero below.
 * .site-header has no overflow:hidden, so this overflows visibly rather than
 * getting clipped.
 */
.site-header__brand img { width: var(--brand-logo); height: var(--brand-logo); margin-top: 0.5rem; position: relative; z-index: 5; }
.site-header__brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.1;
  /* Centered on the header's own height (see .site-header__brand above),
     which is what makes this line up with the nav links on the other
     side of the bar — both are centered on the same 88px, independent
     of the taller logo beside it. */
  align-self: center;
  text-align: center;
}
.site-header__brand-text small { display: block; font-weight: 400; font-size: 0.875rem; letter-spacing: 0.08em; opacity: 0.75; text-transform: uppercase; }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span { display: block; width: 28px; height: 2.5px; background: #fff; margin: 0 auto; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--navy-deep);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  overflow-y: auto;
}
.site-nav.is-open { transform: translateX(0); }
/*
 * Full-screen menu (2026-09-01), matching digitallabmiami.com's treatment.
 * The panel already covered the area below the header, but the rows were
 * 20px and clustered top-left, so most of a tablet screen sat empty and the
 * targets were smaller than a thumb.
 */
.site-nav__list {
  padding: clamp(1.5rem, 5vh, 3rem) clamp(1.5rem, 6vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.site-nav__list a {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  /* Rows clear the 44px touch minimum by a wide margin. */
  padding: clamp(0.85rem, 2.6vh, 1.5rem) 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.site-nav__list a[aria-current="page"] { color: var(--steel-light); }
.site-nav__cta { margin: clamp(1.5rem, 4vh, 2.5rem) clamp(1.5rem, 6vw, 3.5rem) 0; }
.site-nav__phone { display: block; margin: clamp(1.25rem, 4vh, 2rem) clamp(1.5rem, 6vw, 3.5rem) 0; color: var(--steel-light); font-size: clamp(1.25rem, 4vw, 1.625rem); }

/* ── Hero ────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  /*
   * Gradient stays here as the real fallback, not a placeholder — this
   * shows whenever .hero__video has no playable source (no file yet, a
   * browser that blocks autoplay, prefers-reduced-motion, slow connection).
   * A hero with an empty/broken video tag and nothing behind it would look
   * broken; this never does, video or no video.
   */
  background: linear-gradient(160deg, var(--navy-deep), var(--navy) 70%);
  color: #fff;
  padding: 3rem 0 3.5rem;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
}

/* Hero entrance — plays once on load, staggered so the eye is drawn down the
   copy in order rather than everything landing on the page at once. */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-in { opacity: 0; animation: hero-in 700ms var(--ease) forwards; }
.hero-in--1 { animation-delay: 100ms; }
.hero-in--2 { animation-delay: 220ms; }
.hero-in--3 { animation-delay: 380ms; }
.hero-in--4 { animation-delay: 520ms; }
.trust__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1rem;
  padding: 1.75rem 1.25rem;
  background: #fff;
  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--shadow-lift);
}
.trust__item { text-align: center; }
.trust__item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--maroon);
  line-height: 1;
}
.trust__item span { display: block; margin-top: 0.35rem; font-size: 1rem; color: var(--text-muted); letter-spacing: 0.02em; }

/* ── Cards / grids ───────────────────────────────── */
.grid { display: grid; gap: 1.25rem; }
/* Base: stacked single column on mobile, same as .grid — becomes a 2x2 grid
   at 720px, then an asymmetric bento (one large tile) at 960px. See both
   breakpoints below. */
.services-grid { display: grid; gap: 1.25rem; }
.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Top accent bar, alternating navy/maroon — the alternation is what keeps a
   4-up grid of near-identical cards from reading as one flat repeated block. */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--navy);
}
.card:nth-child(even)::before { background: var(--maroon); }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.card:hover .card__icon { transform: scale(1.08); }
.card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  transition: transform var(--dur) var(--ease);
}
.card:nth-child(even) .card__icon { background: var(--maroon); }
.card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; color: var(--navy-deep); margin-bottom: 0.5rem; }
.card__body { color: var(--text-muted); font-size: 1.125rem; }

/* Featured/bento card — larger on desktop only (see .services-grid below);
   on mobile it's just the first card in a normal stack. */
.card--feature .card__icon { width: 60px; height: 60px; font-size: 1.5rem; }
.card--feature .card__title { font-size: 1.5rem; }
.card--feature .card__body { font-size: 1.1875rem; }

/*
 * Card imagery — negative-margined to bleed to the card's own edges rather
 * than sitting inset inside the padding, so it reads as a photo/media block
 * rather than a small decorative icon. Additive: cards without .card__media
 * (about.html, services.html) are completely unaffected.
 */
.card__media {
  display: block;
  width: calc(100% + 3rem);
  margin: -1.75rem -1.5rem 1.25rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.card--feature .card__media { margin-bottom: 1.5rem; }

/*
 * Scroll reveal — JS-driven only. `.reveal` alone renders fully visible
 * (safe default if JS never runs); main.js adds `.reveal--pending` at load,
 * which is what actually hides elements before they animate in. That
 * ordering means a JS failure can never leave content permanently invisible.
 */
.reveal { opacity: 1; }
.reveal--pending {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal--visible { opacity: 1; transform: translateY(0); }

/* ── Section variants ────────────────────────────── */
.section--dark { background: var(--navy-deep); color: #fff; }
.section--dark .h2 { color: #fff; }
.section--dark .lead { color: rgba(255,255,255,0.75); }
.section--muted { background: #fff; }

/* ── Gallery ─────────────────────────────────────── */
/* Single column on mobile — two-up made every thumbnail too small to read
   the work in it. Roughly doubles each thumbnail's width versus the old
   2-column layout. Client request, 2026-09-03. */
.gallery-grid { grid-template-columns: 1fr; }
.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
}
.gallery-item img { aspect-ratio: 4/3; object-fit: cover; width: 100%; display: block; }
.gallery-item figcaption { padding: 0.75rem; font-size: 1rem; color: var(--text-muted); }
.gallery-item--wide { grid-column: 1 / -1; }
.gallery-item--wide img { aspect-ratio: 16/9; }

.gallery-item__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.gallery-item__btn:focus-visible {
  outline: 3px solid var(--maroon);
  outline-offset: -3px;
}

/* ── Gallery lightbox ────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(14, 27, 57, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease);
}
.lightbox--open { opacity: 1; visibility: visible; }
.lightbox__figure {
  position: relative;
  margin: 0;
  max-width: min(92vw, 1100px);
  transform: scale(0.96);
  transition: transform var(--dur) var(--ease);
}
.lightbox--open .lightbox__figure { transform: scale(1); }
.lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: var(--navy-deep);
}
.lightbox__caption {
  margin-top: 0.75rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
}
.lightbox__close,
.lightbox__nav {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.26); }
.lightbox__close:active,
.lightbox__nav:active { transform: scale(0.92); }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__nav--prev { left: 1.25rem; top: 50%; margin-top: -24px; }
.lightbox__nav--next { right: 1.25rem; top: 50%; margin-top: -24px; }

@media (max-width: 719px) {
  .lightbox { padding: 1rem; }
  .lightbox__close { top: 0.75rem; right: 0.75rem; }
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__figure, .lightbox__close, .lightbox__nav { transition: none; }
}
/* ── Contact form ────────────────────────────────── */
.form-field { margin-bottom: 1.1rem; }
.form-field label { display: block; font-weight: 600; font-size: 1.0625rem; margin-bottom: 0.4rem; color: var(--navy-deep); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
  transition: border-color var(--dur) var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none;
  border-color: var(--maroon);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-hp { position: absolute; left: -9999px; }
.form-note { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.75rem; }

.contact-card {
  background: var(--navy-deep);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.75rem;
}
.contact-card a { color: var(--steel-light); }
.contact-card__row { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.contact-card__row:last-child { border-bottom: none; }
.contact-card__row strong { display: block; font-family: var(--font-display); font-size: 0.9375rem; }
/* Phone/email/service-area is already one tap away via the header Call Now
   button and the footer; the navy card is pure duplicate weight on mobile
   where every screen is vertical scroll cost. Cut it below desktop. */
@media (max-width: 959px) {
  .contact-card { display: none; }
}

/* ── Footer ──────────────────────────────────────── */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.75); padding: 2.5rem 0 1.5rem; }
.site-footer__brand { display: flex; align-items: center; gap: 0.625rem; color: #fff; margin-bottom: 1rem; }
.site-footer__brand img { width: 72px; height: auto; }
.site-footer__cols { display: grid; gap: 1.75rem; margin-bottom: 2rem; }
.site-footer__h { font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel-light); margin-bottom: 0.75rem; }
.site-footer__links a { display: block; padding: 0.35rem 0; font-size: 0.9375rem; transition: color var(--dur) var(--ease); }
.site-footer__links a:hover { color: #fff; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.25rem; font-size: 0.8125rem; text-align: center; }

/* ── Utility ─────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--maroon); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--radius);
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ── Desktop / tablet breakpoints ────────────────── */
@media (min-width: 720px) {
  .trust__grid { grid-template-columns: repeat(4, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: 5rem 0 6rem; text-align: left; }
  .site-footer__cols { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

@media (min-width: 960px) {
  /*
   * Asymmetric bento instead of a uniform 2x2 — a grid of four identical
   * boxes is exactly the "generic card grid" pattern the design standard
   * bans. Hanging (the foundational service, listed first) takes a 2x2
   * feature tile; Finishing runs wide beside it; Texturing and Stucco fill
   * the two remaining small cells underneath. Four cells total, no gaps.
   */
  .services-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
  .services-grid .card--feature {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    /* flex-start, not center — the image is anchored flush to the top edge
       via its own negative margin; centering the group would pull it away
       from that edge and leave a visible gap above it. */
    justify-content: flex-start;
    padding: 2.5rem;
  }
  /* Padding grew to 2.5rem above — the media bleed has to match or it leaves a gap. */
  .services-grid .card--feature .card__media { width: calc(100% + 5rem); margin: -2.5rem -2.5rem 1.5rem; }
  .services-grid .card:nth-child(2) { grid-column: span 2; }
  .services-grid .card:nth-child(3),
  .services-grid .card:nth-child(4) { grid-column: span 1; }

  .nav-toggle { display: none; }
  .site-nav {
    position: static;
    transform: none;
    background: transparent;
    overflow: visible;
    /*
     * .site-nav__list, .site-nav__cta and .site-nav__phone are siblings,
     * not nested — .site-nav__list going flex-row (below) only arranges
     * ITS OWN children (the links). Without .site-nav itself also being
     * flex, those three siblings stack as separate blocks: the CTA button
     * dropped onto its own line under the nav links instead of sitting
     * beside them. The margin-left on .site-nav__cta below was written to
     * nudge it into a row that was never actually created.
     */
    display: flex;
    align-items: center;
  }
  .site-nav__list { flex-direction: row; align-items: center; padding: 0; gap: 0.5rem; }
  .site-nav__list a { border-bottom: none; padding: 0.5rem 0.85rem; font-size: 1.3125rem; font-weight: 400; border-radius: var(--radius); }
  .site-nav__list a:hover { background: rgba(255,255,255,0.08); }
  .site-nav__cta { margin-top: 0; margin-left: 0.5rem; }
  .site-nav__cta .btn { padding: 0.65rem 1.25rem; }
  .site-nav__phone { display: none; }
}

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

/* ─────────────────────────────────────────────────
   AESTHETIC PASS — 2026-09-01
   Direction: exaggerated minimalism (oversized type, extreme negative
   space, one disciplined accent). Chosen over decoration deliberately:
   a 19-year tradesman reads as more credible through restraint and
   confidence than through effects. Contrast was measured before and
   after — every pair still clears WCAG AA.
   ───────────────────────────────────────────────── */

/* Cards: less "boxed widget", more printed panel. The old uniform border
   + shadow on every side made them read like default UI components. */
.card {
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: none;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--navy);
  box-shadow: 0 18px 40px -24px rgba(16, 29, 56, 0.45);
}
/* The accent bar carries the hierarchy now, so it is heavier and squarer. */
.card::before { height: 3px; border-radius: 0; }

/* Numerals as a design element rather than a bullet. */
.card__icon {
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Section headings get air above them so sections read as chapters. */
.section .h2 { margin-bottom: 1.25rem; }

/* Trust strip: hairline separators instead of floating in space. */
.trust__grid { gap: 0; }
.trust__item { padding: 0.5rem clamp(0.75rem, 2vw, 1.5rem); }
.trust__item + .trust__item { border-left: 1px solid var(--border); }
.trust__item strong { font-variant-numeric: tabular-nums; }

/* Dark sections: a touch of depth so they are a surface, not a swatch. */
.section--dark {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
    var(--navy-deep);
}

/* Buttons: squarer, more deliberate, no bouncing. */
.btn {
  border-radius: 2px;
  letter-spacing: 0.02em;
  font-size: 1.0625rem;
  padding: 1.05rem 2rem;
}
.btn--primary:hover { transform: none; box-shadow: 0 14px 30px -18px rgba(122,31,43,0.9); }

/* Footer headings match the eyebrow language. */
.site-footer__h {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@media (min-width: 720px) {
  /* Editorial asymmetry: body copy does not span the full measure. */
  .section .lead { max-width: 60ch; }
}

/* Contact form feedback. Success and failure must not look identical —
   a visitor should never be unsure whether their enquiry was sent. */
.form-note--ok    { color: #1c5f38; font-weight: 600; }
.form-note--error { color: var(--maroon); font-weight: 600; }

/*
 * Section rhythm — never two identical surfaces adjacent (COPY GREAT SITES).
 * The trust card and the services section were both light, so the page read
 * as one long pale stretch between the hero and the dark band.
 */
.section--surface {
  background: linear-gradient(180deg, #ffffff, #f2f3f1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER HAIRLINE
   A 1px rule along the bottom of the header that BREAKS around the
   logo rather than cutting through it.

   How it works: the header draws a full-width line, then the brand
   paints a short segment of header-coloured background back over it.
   The mask is positioned from the brand's own top edge, which sits at
   the top of the header, so `--nav-h` puts it exactly on the line —
   and both the mask width and the logo read from `--brand-logo`, so
   resizing the logo cannot leave the gap behind in the wrong place.
   ═══════════════════════════════════════════════════════════════════ */
.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--header-rule);
  background: #ffffff;
  z-index: 0;
}

/*
 * The break. Only needed where the logo actually crosses the line: at
 * 560px and below the logo is 80px inside an 88px bar, so it sits well
 * clear of the rule and a gap there would read as a hole in the border
 * rather than as the logo interrupting it.
 */
@media (min-width: 561px) {
  .site-header__brand::after {
    content: '';
    position: absolute;
    top: calc(var(--nav-h) - var(--header-rule));
    left: calc(var(--brand-gap) * -1);
    width: calc(var(--brand-logo) + var(--brand-gap) * 2);
    height: var(--header-rule);
    background: var(--navy-deep);
    z-index: 2;
  }
}
@media (min-width: 860px) {
}

.section--dark .eyebrow { color: var(--steel-light); }
.section--dark .btn--outline { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.section--dark .btn--outline:hover { background: #fff; color: var(--navy-deep); }
@media (min-width: 960px) {
}
@media (min-width: 960px) {
}
@media (min-width: 480px) {
}
@media (min-width: 860px) {
}
@media (min-width: 960px) {
}
@media (min-width: 960px) {
}
@media (min-width: 900px) {
}
@media (max-width: 959.98px) {

  /* ═══════════════════════════════════════════════════════════════════
     MOBILE MENU — sized for people who do not see well
     The panel was already full-screen, but the items sat in the top
     third at 28px/600 and left the rest of the screen empty. They now
     fill the panel, set in condensed caps at roughly double the size,
     which is both easier to read and easier to hit.
     ═══════════════════════════════════════════════════════════════════ */
  .site-nav {
    display: flex;
    flex-direction: column;
    /*
     * Above the brand (z-index 1). The logo is 140px in an 88px header, so
     * it overhangs into the panel; without this it paints over the first
     * menu item, which only shows up once the items are large enough to
     * reach the top of the panel.
     */
    z-index: 2;
    /* Panel starts below the header bar; the logo overhangs into it, but
       both surfaces are navy so the overlap is invisible. */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .site-nav__list {
    flex: 1;
    justify-content: center;
    gap: 0;
  }
  .site-nav__list li { display: flex; }
  .site-nav__list a {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: clamp(2.25rem, 9vw, 3.25rem);
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    /* Generous rows: comfortably past the 44px touch minimum, and the
       whole row is the target rather than just the word. */
    padding: clamp(1rem, 3.2vh, 1.75rem) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
  }
  .site-nav__list a:active,
  .site-nav__list a:focus-visible { color: var(--steel-light); padding-left: 0.5rem; }
  .site-nav__list a[aria-current="page"] {
    color: #fff;
    border-left: 4px solid var(--maroon);
    padding-left: 0.875rem;
  }

  /* The phone number is the point of the menu for a trade — treat it as
     the primary action, not a footnote under the links. */
  .site-nav__phone {
    margin: 0;
    padding: clamp(1.25rem, 3.5vh, 2rem) clamp(1.5rem, 6vw, 3.5rem)
             calc(clamp(1.25rem, 3.5vh, 2rem) + env(safe-area-inset-bottom, 0));
    background: var(--maroon);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.875rem, 7.5vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: center;
  }
  .site-nav__phone::before {
    content: 'Call us';
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 0.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER — readable, and laid out on small screens
   Previously every block stacked into one long single-file column on
   mobile, and the type ran 13–15px. Both are fixed below: the link
   groups pair up from 460px, and every size steps up. Nothing here is
   under 16px, which is the floor for comfortable reading on a phone.
   ═══════════════════════════════════════════════════════════════════ */
.site-footer {
  color: rgba(255, 255, 255, 0.86);
  padding: clamp(2.75rem, 7vw, 4rem) 0 1.75rem;
}
/*
 * Mobile-first, and it has to be: with no column count declared at the base
 * the four blocks stacked into one single-file column on every phone, which
 * is the layout this replaces. A 460px breakpoint did not help — phones are
 * 375-430px, so it never fired on the devices that needed it.
 *
 * The composition on a phone is deliberate rather than just "two columns":
 *   row 1  brand + blurb, full width
 *   row 2  Site | Services, paired
 *   row 3  Contact, full width so the email address is not broken mid-word
 */
.site-footer__cols {
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(1.25rem, 5vw, 2rem);
  row-gap: clamp(1.75rem, 5vw, 2.5rem);
  align-items: start;
  margin-bottom: clamp(2rem, 5vw, 2.75rem);
}
.site-footer__intro,
.site-footer__col--contact { grid-column: 1 / -1; }

.site-footer__intro {
  padding-bottom: clamp(1.5rem, 4vw, 2rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 720px) {
  .site-footer__cols { grid-template-columns: 2fr 1fr 1fr 1.3fr; }
  .site-footer__intro,
  .site-footer__col--contact { grid-column: auto; }
  .site-footer__intro { padding-bottom: 0; border-bottom: none; }
}

.site-footer__brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1.1;
  color: #fff;
}
.site-footer__blurb {
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.8);
}
.site-footer__h {
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  color: #fff;
  margin-bottom: 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.site-footer__links a,
.site-footer__links span {
  display: block;
  padding: 0.55rem 0;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
}
.site-footer__links a:hover,
.site-footer__links a:focus-visible { color: #fff; text-decoration: underline; }

/* Phone and email are what people actually came to the footer for. */
.site-footer__contact a[href^="tel:"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: 0.01em;
  color: #fff;
  padding-top: 0.25rem;
}
.site-footer__contact a[href^="mailto:"] { word-break: break-word; }

.site-footer__legal {
  font-size: 1rem;
  line-height: 1.5;
  padding-top: 1.5rem;
  color: rgba(255, 255, 255, 0.68);
}
.site-footer__credit {
  font-size: 0.8125rem;
  line-height: 1.5;
  padding-top: 0.4rem;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}
.site-footer__credit a { color: rgba(255, 255, 255, 0.65); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__credit a:hover, .site-footer__credit a:focus-visible { color: #fff; }

/* ── Header brand on small screens ─────────────────────────────────
 * At 390px a 140px logo plus the name plus the toggle does not fit on
 * one line: the "Residential & Commercial" subtitle wrapped to two
 * lines and was then clipped by the top edge of the open menu panel.
 * The logo also overhung the bar far enough to be sliced in half by
 * that panel. Trimming the logo and dropping the subtitle fixes both;
 * the header rule's gap follows --brand-logo automatically.
 */
@media (max-width: 560px) {
  /* 80px sits fully inside the 88px bar. At 104px it still overhung far
     enough that the open menu panel sliced the bottom off the shield,
     which read as a rendering fault rather than as a panel in front. */
  :root { --brand-logo: 80px; }
  .site-header__brand-text { font-size: 1rem; }
  .site-header__brand-text small { display: none; }
  /* Unlike desktop's 140px logo, 80px is smaller than the 88px bar, so
     the flex-start overflow trick (see .site-header__brand) isn't needed
     here — center it for equal breathing room above and below. */
  .site-header__brand { align-items: center; align-self: center; }
  .site-header__brand img { margin-top: 0; }
}

/* ── Footer type on phones and small tablets ───────────────────────
 * Scoped below the 4-column breakpoint, where there is room to set
 * everything considerably larger without the columns fighting for
 * width. Desktop keeps its own tighter scale.
 *
 * Floor here is 19px on body copy, against a 16px "comfortable on a
 * phone" baseline — the audience skews toward people who do not read
 * small print easily, so the whole block is set a step up from where
 * a footer would normally sit.
 */
@media (max-width: 719.98px) {
  .site-footer { padding: clamp(3rem, 9vw, 4rem) 0 2rem; }

  .site-footer__brand img { width: 92px; }
  .site-footer__brand { gap: 0.875rem; margin-bottom: 1.25rem; }
  .site-footer__brand-text { font-size: 1.5rem; }

  .site-footer__blurb {
    font-size: 1.25rem;
    line-height: 1.55;
    max-width: none;
    color: rgba(255, 255, 255, 0.88);
  }

  .site-footer__h {
    font-size: 1.0625rem;
    letter-spacing: 0.14em;
    margin-bottom: 1rem;
    padding-bottom: 0.625rem;
  }

  /* Bigger rows, and more space between them — easier to read and
     easier to hit accurately. */
  .site-footer__links a,
  .site-footer__links span {
    font-size: 1.25rem;
    line-height: 1.3;
    padding: 0.75rem 0;
    color: rgba(255, 255, 255, 0.92);
  }

  .site-footer__contact a[href^="tel:"] { font-size: 2.125rem; line-height: 1.05; }
  .site-footer__contact a[href^="mailto:"] { font-size: 1.1875rem; }

  .site-footer__legal {
    font-size: 1.125rem;
    line-height: 1.55;
    padding-top: 1.75rem;
    color: rgba(255, 255, 255, 0.78);
  }
}

/* ── Buttons, sized to be read ─────────────────────────────────────
 * Was 17px at weight 600. Every call to action on the site is aimed at
 * someone who may be reading it at arm's length on a phone, so the
 * base steps up to 19px/700 and the hero pair — the two that carry
 * the whole page — go further again.
 */
/*
 * Light weight, set large. Barlow Condensed 300 is only available because
 * 300/400 were added to the Google Fonts request — asking for a weight
 * that is not loaded silently renders the nearest one that is, so the
 * button would have stayed bold with nothing to show for it.
 * The extra letter-spacing keeps thin condensed type open enough to read
 * at a glance.
 */
.btn {
  font-size: 1.3125rem;
  font-weight: 300;
  letter-spacing: 0.045em;
  padding: 1.15rem 2.25rem;
  /* Softened from the 2px the rest of the page uses: the buttons are the
     one element that should read as pressable rather than as a panel. */
  border-radius: 6px;
}

/* The header CTA sits in an 88px bar and cannot grow as freely. */
.site-nav__cta .btn { font-size: 1.125rem; font-weight: 400; padding: 0.7rem 1.35rem; }

/*
 * A button label must never break across lines — at the larger size the
 * phone button was splitting as "Call (850) 390-" / "6881", which is
 * worse than useless on the one control a customer is most likely to
 * press. nowrap prevents it; the stacked layout then guarantees there is
 * always room for the full label, at every width.
 */
.btn { white-space: nowrap; }
@media (min-width: 720px) {
}
@media (min-width: 720px) {
}

/* ── Header wordmark ───────────────────────────────────────────────
 * +3px and lighter. Barlow Condensed 400 is available because 300/400
 * were added to the font request earlier — without that this would have
 * silently stayed at 600 and looked unchanged.
 */
.site-header__brand-text {
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.015em;
}
@media (max-width: 560px) {
  .site-header__brand-text { font-size: 1.1875rem; }
}
/* Below ~380px the logo, name and toggle stop fitting on one line. */
@media (max-width: 380px) {
  .site-header__brand-text { font-size: 1.0625rem; }
}
@media (min-width: 720px) {
}

/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE LAYOUT — modelled on the GlobalXnet Digital build
   Full-viewport video hero with the content stacked and centred on it,
   glass credential pills, a scroll cue, then centred section headers
   above 4-up card grids and a solid closing band.

   Brand is unchanged: Prentiss navy/maroon and Barlow, not GlobalXnet's
   blue and system stack. Its emoji icons are not carried over either.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero--home {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;      /* mobile browsers: exclude the URL bar */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
  padding: 0;
  text-align: center;
}
.hero--home .hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
}
/* Gradient rather than a flat wash: lightest at the top so the footage
   still reads, darkest at the bottom where the pills and cue sit. */
.hero--home .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(16, 29, 56, 0.45) 0%,
    rgba(16, 29, 56, 0.62) 50%,
    rgba(16, 29, 56, 0.85) 100%
  );
}
.hero--home .hero__wrapper {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: clamp(5rem, 12vh, 8rem) 0;
}
.hero--home .hero__content {
  max-width: 68rem;
  margin: 0 auto;
  animation: heroRise 900ms var(--ease) both;
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--home .hero__content { animation: none; }
}

.hero--home .hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  font-size: clamp(3.5rem, 15vw, 5.25rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.hero__sub {
  font-size: clamp(1.25rem, 2.2vw, 1.5625rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.94);
  max-width: 46rem;
  margin: 0 auto clamp(3.25rem, 6.5vw, 4.5rem);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.875rem;
  max-width: 30rem;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .hero__ctas { flex-direction: row; justify-content: center; max-width: none; }
  .hero__ctas .btn { width: auto; }
}
@media (min-width: 720px) {
  .hero--home .hero__title { font-size: clamp(5rem, 11.5vw, 10.5rem); }
}

/* Glass credential pills, straight from the reference layout. */
.pills {
  list-style: none;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.pill {
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 2rem;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.28);
}

.scroll-cue {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}
.scroll-cue:hover,
.scroll-cue:focus-visible { color: #fff; }
.scroll-cue svg { animation: cueBob 2.2s ease-in-out infinite; }
@keyframes cueBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
}
/* On a short screen the cue collides with the pills. */
@media (max-height: 700px) {
  .scroll-cue { display: none; }
}

/* ── Centred section headers ───────────────────────────────────────── */
.sec-head {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto clamp(2.5rem, 5vw, 3.75rem);
}
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.875rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--navy-deep);
  margin: 0 0 0.75rem;
}
.sec-head p {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.section--alt { background: #eef0ee; }
.section--alt .sec-head h2 { color: var(--navy-deep); }

.sec-actions { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* ── Card grids ────────────────────────────────────────────────────── */
.grid-4, .grid-3 {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.tile {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(16, 29, 56, 0.08);
  border-top: 3px solid transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
}
.tile:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(16, 29, 56, 0.16);
  border-top-color: var(--maroon);
}
.tile__media {
  border-radius: 6px;
  overflow: hidden;
  margin: -0.25rem 0 1.25rem;
  aspect-ratio: 4 / 3;
  background: var(--navy-deep);
}
.tile__media img,
.tile__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy-deep);
  margin: 0 0 0.5rem;
}
.tile > p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}
.tile__features {
  list-style: none;
  margin: 1rem 0 1.25rem;
  padding: 0;
  flex: 1;
}
.tile__features li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--text);
}
/* A drawn tick — an emoji check renders differently on every device. */
.tile__features li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--maroon);
  border-bottom: 2px solid var(--maroon);
  transform: rotate(-45deg);
}
.tile__link {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--maroon);
  border-bottom: 2px solid var(--maroon);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tile__link:hover { color: var(--navy-deep); border-color: var(--navy-deep); }

/* ── Stat cards ────────────────────────────────────────────────────── */
.stat { text-align: center; padding: 1rem 0.5rem; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--maroon);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.75rem;
}
.stat h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1.15;
  color: var(--navy-deep);
  margin: 0 0 0.5rem;
}
.stat p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* ── Steps ─────────────────────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; }
.step {
  background: var(--bg-card);
  border-radius: 8px;
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 4px 20px rgba(16, 29, 56, 0.07);
  text-align: center;
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--navy-deep);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  margin-bottom: 1rem;
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4375rem;
  line-height: 1.15;
  color: var(--navy-deep);
  margin: 0 0 0.625rem;
}
.step p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* ── Service area ──────────────────────────────────────────────────── */
.towns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  max-width: 60rem;
  margin-inline: auto;
}
@media (min-width: 700px)  { .towns { grid-template-columns: repeat(4, 1fr); } }
.towns li {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 1.125rem 0.75rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  color: var(--navy-deep);
  box-shadow: 0 2px 10px rgba(16, 29, 56, 0.06);
}

/* ── Closing band ──────────────────────────────────────────────────── */
.cta-band { background: var(--maroon); color: #fff; text-align: center; }
.cta-band__inner { display: block; max-width: 46rem; }
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.875rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 0.75rem;
}
.cta-band__sub {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.6;
  margin: 0 auto 2rem;
  max-width: 40ch;
}
.cta-band__actions { text-align: center; }
.cta-band__phone { display: block; margin-bottom: 1.25rem; }


/* ── Inner-page hero (about / services / gallery / contact) ────────
 * These four reuse .hero as a short banner, not as the homepage's
 * full-viewport video stage. Restored after the homepage rebuild, and
 * kept deliberately separate so a future change to one cannot silently
 * reshape the other.
 */
.hero:not(.hero--home) {
  position: relative;
  background: var(--navy-deep);
  color: #fff;
  padding: clamp(3rem, 8vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
.hero:not(.hero--home) .hero__inner { display: block; }
.hero:not(.hero--home) .hero__copy { max-width: 46rem; margin: 0 auto; }
.hero:not(.hero--home) .h1 {
  color: #fff;
  font-size: clamp(2.5rem, 7vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}
.hero:not(.hero--home) .hero__sub {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 48ch;
  margin: 0 auto;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2rem;
  padding: 0.5rem 1.125rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: #fff;
}
.hero__badge-star { color: var(--maroon); flex: none; }

/* The headline is two locked lines — the break happens only where written. */
.h1__line { display: block; white-space: nowrap; }
.stats { align-items: start; }

/* ── Attention pulse — the hero's primary CTA only ─────────────────
 * A soft ring pulsing outward from the button, not a scale/wiggle — reads
 * as a heartbeat rather than a shouting banner ad. Deliberately scoped to
 * one button (.btn--pulse), not every .btn--primary site-wide, or the
 * cta-band's button would compete with it for attention on the same page.
 */
@keyframes btnPulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(122, 31, 43, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(122, 31, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(122, 31, 43, 0); }
}
.btn--pulse { animation: btnPulseRing 2.4s ease-out infinite; }
.btn--pulse:hover,
.btn--pulse:focus-visible { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .btn--pulse { animation: none; }
}

/* ── Services page: video-ready panels ──────────────────────────────
 * Each service section pairs a media slot with the copy. Hanging plays
 * its real clip now (assets/video/hanging-card.mp4); the other three
 * show their SVG illustration as the <video>'s poster with no <source>
 * yet — a video element with a poster and no working source just
 * displays the poster, so nothing 404s and nothing looks unfinished.
 * Dropping in a real clip later is one line: add
 *   <source src="assets/video/<name>-card.mp4" type="video/mp4">
 * inside the empty <video> tag. No other markup or CSS changes needed.
 */
.svc-panel {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 860px) {
  .svc-panel { grid-template-columns: 1fr 1fr; }
  .svc-panel--reverse .svc-panel__media { order: 2; }
  .svc-panel--reverse .svc-panel__copy  { order: 1; }
}
.svc-panel__media {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow: 0 10px 30px rgba(16, 29, 56, 0.14);
}
.svc-panel__media video,
.svc-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svc-panel__copy .eyebrow { display: block; margin-bottom: 0.75rem; }
.svc-panel__copy .h2 { margin-bottom: 0.75rem; }

/* ── Service panel FAQs ──────────────────────────────────────────────
 * Real questions homeowners, property managers, and contractors ask
 * about each service, answered directly under the lead paragraph.
 * <dl> is the correct element for question/answer pairs.
 */
.svc-faq {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--border);
  max-width: 52ch;
}
.svc-faq dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--navy-deep);
  margin-bottom: 0.375rem;
}
.svc-faq dt:not(:first-child) { margin-top: 1.25rem; }
.svc-faq dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.section--muted .svc-faq dt { color: var(--navy-deep); }