/* ==========================================================================
   Boxwood Christmas Lighting - conversion landing page
   Mobile-first. One job: get the quote or get the call.
   ========================================================================== */

/* ------------------------------------------------------------- tokens --- */
:root {
  --ink-900: #05090F;
  --ink-800: #080E18;
  --ink-700: #0C1524;
  --ink-600: #111D30;
  --ink-500: #17273E;

  --gold: #F2B23E;
  --gold-2: #FFC865;
  --gold-dk: #D2921F;

  --green: #123527;
  --green-dk: #0A1F16;
  --red: #B3122B;

  --cream: #F8F5EF;
  --cream-2: #EFEAE0;
  --white: #FFFFFF;

  --text: #FFFFFF;
  --muted: #A7B5C8;
  --muted-2: #7E8DA3;
  --ink-text: #14202F;
  --ink-muted: #55657A;

  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.18);

  --display: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1240px;
  --pad: 20px;
  --r: 10px;

  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --glow: 0 0 34px rgba(242, 178, 62, 0.30);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink-800);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* room for the sticky mobile call bar */
  padding-bottom: 68px;
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin: 0;
}

p { margin: 0; }

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.gold { color: var(--gold); }

/* sprite icons: `fill` and `stroke` inherit through <use> into the symbol */
.i {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.i-fill { fill: currentColor; stroke: none; }

/* sticky header must not cover the anchor targets */
section[id], [id="quote"] { scroll-margin-top: 88px; }

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 13px;
  color: var(--gold);
  margin: 0 0 10px;
}

@media (min-width: 700px) {
  .eyebrow { font-size: 15px; letter-spacing: 0.14em; }
}

/* ------------------------------------------------------------ buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 7px;
  padding: 15px 22px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold {
  background: var(--gold);
  color: #23180A;
  box-shadow: 0 8px 22px rgba(242, 178, 62, 0.24);
}
.btn--gold:hover { background: var(--gold-2); box-shadow: 0 12px 30px rgba(242, 178, 62, 0.36); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--line-2);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn--block { display: flex; width: 100%; }
.btn--lg { padding: 18px 30px; font-size: 22px; }

.btn .arw { transition: transform 0.15s ease; }
.btn:hover .arw { transform: translateX(4px); }

/* ----------------------------------------------------------- promo bar --- */
.promo {
  background: var(--ink-900);
  color: #EAF3ED;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
}

.promo .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 38px;
  flex-wrap: wrap;
  text-align: center;
}

.promo-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.promo-item svg { width: 13px; height: 13px; flex: none; color: var(--gold-2); }
.promo-sep { color: rgba(255, 255, 255, 0.28); }

/* on the smallest screens only the first promise survives */
.promo-item:not(:first-child), .promo-sep { display: none; }

@media (min-width: 760px) {
  .promo-item:not(:first-child) { display: inline-flex; }
  .promo-sep { display: inline; }
  .promo .wrap { gap: 18px; }
}

/* -------------------------------------------------------------- header --- */
.header {
  background: var(--green);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  position: sticky;
  top: 0;
  z-index: 60;
}

.header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 80px;
}

.brand { display: flex; align-items: center; flex: none; }

/* The badge carries the wordmark, so there is no text beside it. Height is the
   control dimension; width follows the artwork's 1.56:1 ratio. */
.brand-logo {
  height: 58px;
  width: auto;
}

.brand--footer .brand-logo { height: 72px; }

.nav { display: none; }

@media (min-width: 1140px) {
  .nav {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .nav a {
    white-space: nowrap;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #F0F5F2;
    transition: color 0.15s ease;
  }
  .nav a:hover { color: var(--gold); }
}

.header-call { display: flex; align-items: center; gap: 12px; flex: none; }

.header-call .kicker {
  display: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-align: right;
  line-height: 1.4;
}

@media (min-width: 1160px) { .header-call .kicker { display: block; } }

.call-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: 9px;
  background: var(--gold);
  color: #23180A;
  border-radius: 8px;
  padding: 11px 16px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}
.call-pill:hover { background: var(--gold-2); transform: translateY(-1px); }
.call-pill svg { width: 17px; height: 17px; flex: none; }

/* the number itself is hidden on very small screens, icon only */
.call-pill .num { display: none; }
/* the brand + pill + burger only fit the number together from ~600px up */
@media (min-width: 600px) { .call-pill .num { display: inline; } }

.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  color: var(--white);
}
.menu-btn svg { width: 20px; height: 20px; }
@media (min-width: 1140px) { .menu-btn { display: none; } }

/* mobile drawer */
.mobile-nav {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--green);
  padding: 10px var(--pad) 20px;
}
.mobile-nav.open { display: block; }
@media (min-width: 1140px) { .mobile-nav.open { display: none; } }

.mobile-nav a {
  display: block;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mobile-nav a:last-of-type { border-bottom: 0; }

/* ---------------------------------------------------------------- hero --- */
.hero {
  position: relative;
  background: var(--ink-900);
  overflow: hidden;
  padding: 30px 0 40px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 60%;
  /* the hero art is a real blue-hour photo and is already dark; let it read */
  opacity: 1;
}

/* The copy owns the left half and the owner cutout stands on the right, so
   the wash is heavy left, mid right, and deep at the bottom where the quote
   bar rides up over the photo. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 9, 15, 0.58) 0%, rgba(5, 9, 15, 0.16) 26%,
                            rgba(5, 9, 15, 0.42) 72%, rgba(5, 9, 15, 0.95) 100%),
    linear-gradient(90deg, rgba(5, 9, 15, 0.93) 0%, rgba(5, 9, 15, 0.84) 34%,
                           rgba(5, 9, 15, 0.52) 58%, rgba(5, 9, 15, 0.42) 100%);
}

.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

/* keep a wide child from stretching the track past the viewport */
.hero-grid > * { min-width: 0; }

@media (min-width: 1000px) {
  /* the bottom padding is what keeps the badges clear of the quote bar that
     rides up over this section; it has to exceed the card's negative pull. */
  .hero { padding: 48px 0 104px; overflow: visible; }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 26px;
    align-items: end;
  }
  /* the hero art must not spill now that overflow is visible */
  .hero-bg { overflow: hidden; }
}

.hero h1 {
  font-size: clamp(33px, 7.4vw, 54px);
  margin: 0 0 16px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 4px 32px rgba(0, 0, 0, 0.55);
}
@media (min-width: 1000px) { .hero h1 { font-size: clamp(46px, 4vw, 60px); } }

.hero h1 .line-gold { color: var(--gold); display: block; }

/* region stamp on the first line of the hero H1 */
.hero h1 .h1-geo {
  display: block;
  font-size: clamp(16px, 3.4vw, 22px);
  line-height: 1.25;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 7px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.hero-sub {
  color: #D2DCE8;
  font-size: 16px;
  max-width: 46ch;
  margin: 0 0 24px;
}
@media (min-width: 700px) { .hero-sub { font-size: 17.5px; } }

/* the city-specific opening sentence in a city page hero */
.hero-sub .sub-lead { color: #FFF; display: block; margin-bottom: 8px; }

/* the three services, inline under the hero sub */
.hero-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 22px;
  padding: 0 0 20px;
  list-style: none;
  border-bottom: 1px solid var(--line-2);
}
.hero-services li { display: flex; align-items: center; gap: 10px; }

.hero-services .ico {
  width: 34px; height: 34px;
  flex: none;
  border: 1.5px solid rgba(242, 178, 62, 0.55);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
}
.hero-services .ico svg { width: 18px; height: 18px; }

.hero-services b {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 13.5px;
  line-height: 1.2;
}
.hero-services .ln { display: block; }

@media (min-width: 1000px) { .hero-services b { font-size: 15px; } }

/* the three reassurance cards */
.hero-badges {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .hero-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.hero-badges li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: rgba(5, 9, 15, 0.56);
  backdrop-filter: blur(3px);
}
.hero-badges .ico { color: var(--gold); flex: none; margin-top: 1px; }
.hero-badges .ico svg { width: 20px; height: 20px; }

.hero-badges b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 13.5px;
  line-height: 1.2;
  margin-bottom: 3px;
}
.bdg-txt { min-width: 0; }
.bdg-txt > span { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ------------------------------------------------------ the owner shot --- */
/* Below desktop he is not a floating cut-out at all: he stands inside a
   framed shot of the lit house, the way the reference site handles it. The
   frame is what hides the slice through his forearms, so no fade is needed.
   Desktop overrides all of this back to the free-standing cut-out. */
.hero-owner {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  aspect-ratio: 16 / 11;
  background: var(--ink-900) url("assets/hero-night.jpg") center 58% / cover no-repeat;
}
.hero-owner img {
  position: absolute;
  right: -3%;
  bottom: 0;
  width: 62%;
  height: auto;
  display: block;
  /* his left arm runs to the edge of the source frame; a short fade keeps
     that slice from reading as a straight cut across the house behind him */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 12%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 12%);
}

@media (min-width: 1000px) {
  /* back to the free-standing cut-out: every frame property above is undone */
  .hero-owner {
    order: 0;
    align-self: end;
    /* he stands into the top edge of the quote bar rather than resting on it */
    margin: 0 0 -58px;
    width: auto;
    position: relative;
    overflow: visible;
    border: 0;
    border-radius: 0;
    aspect-ratio: auto;
    background: none;
  }
  .hero-owner img {
    position: static;
    right: auto;
    bottom: auto;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.6));
    /* his folded arms run to the edge of the original frame, so the cutout has
       a hard vertical slice on the left. Fade it rather than show the cut. */
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 11%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 11%);
  }
}

/* ========================================================== quote bar ==== */
.quotebar {
  position: relative;
  z-index: 2;
  padding: 0 0 44px;
  background: var(--ink-800);
}

@media (min-width: 1000px) {
  /* the card rides up over the bottom of the hero, the way the reference
     sites do it. Above the cut line the section is transparent so the hero
     photo still shows through. */
  .quotebar {
    margin-top: -74px;
    padding-bottom: 52px;
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 74px, var(--ink-800) 74px);
  }
}

.quotebar-card {
  background: var(--cream);
  border-radius: 14px;
  padding: 22px 20px 20px;
  box-shadow: var(--shadow);
}
@media (min-width: 1000px) { .quotebar-card { padding: 26px 28px 24px; } }

.quotebar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #DED8CC;
}

.quotebar-head h2 {
  font-size: clamp(25px, 5vw, 34px);
  color: var(--ink-text);
  margin: 0;
  flex: 1 1 auto;
}

.quotebar-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.quotebar-perks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}
.quotebar-perks .ico {
  width: 26px; height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(18, 53, 39, 0.10);
  color: var(--green);
}
.quotebar-perks .ico svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------- the fields --- */
.quotebar form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px 16px;
  align-items: end;
}
@media (min-width: 680px) { .quotebar form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .quotebar form { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.quotebar .privacy,
.quotebar .form-status,
.quotebar .hp { grid-column: 1 / -1; }

/* the submit sits in a field cell with no label, so push it to the baseline */
.field--go { display: flex; flex-direction: column; justify-content: flex-end; }
.field--go .btn { margin: 0; }

.field,
.field .ctl,
.field input,
.field select { min-width: 0; }

.field { margin-bottom: 0; }

.field label {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.field .ctl { position: relative; }

.field input,
.field select {
  width: 100%;
  /* 16px minimum, or iOS Safari zooms the page on focus */
  font-size: 16px;
  font-family: var(--body);
  color: var(--ink-text);
  background: var(--white);
  border: 1px solid #D5CFC3;
  border-radius: 8px;
  padding: 13px 40px 13px 14px;
  appearance: none;
  -webkit-appearance: none;
}
.field input::placeholder { color: #93A0B1; }

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(18, 53, 39, 0.16);
}

.field .ctl svg {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: #93A0B1;
  pointer-events: none;
}

.field.invalid input,
.field.invalid select { border-color: var(--red); background: #FEF6F7; }

.field .err {
  display: none;
  font-size: 12px;
  color: var(--red);
  margin-top: 5px;
}
.field.invalid .err { display: block; }

.privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.privacy svg { width: 12px; height: 12px; flex: none; }

/* honeypot */
.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  width: 0;
}

.form-status {
  display: none;
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}
.form-status.show { display: block; }
.form-status.ok { background: #EAF6EF; color: #14532D; border: 1px solid #BFE3CE; }
.form-status.bad { background: #FDF0F2; color: #86131F; border: 1px solid #F3C9CF; }

/* ----------------------------------------------------------- trust bar --- */
.trust { background: var(--ink-900); padding: 0 0 42px; }

.trust-inner {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(17, 29, 48, 0.5);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .trust-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.trust-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.trust-cell:nth-child(2n) { border-right: 0; }
@media (min-width: 900px) {
  .trust-cell { border-bottom: 0; border-right: 1px solid var(--line); }
  .trust-cell:nth-child(2n) { border-right: 1px solid var(--line); }
  .trust-cell:last-child { border-right: 0; }
}
@media (max-width: 899px) {
  .trust-cell:nth-last-child(-n + 2) { border-bottom: 0; }
}

.trust-cell .ico { color: var(--gold); flex: none; }
.trust-cell .ico svg { width: 26px; height: 26px; }

.trust-cell b {
  display: block;
  font-family: var(--display);
  /* GREENSBORO is one unbreakable word in a half-width cell at 360px */
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

@media (min-width: 400px) {
  .trust-cell b { font-size: 16px; }
}
.trust-cell span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ------------------------------------------------------------ sections --- */
.section { padding: 56px 0; }
@media (min-width: 900px) { .section { padding: 76px 0; } }

.section--dark { background: var(--ink-800); }
.section--darker { background: var(--ink-900); }
.section--panel { background: var(--ink-700); }
.section--light { background: var(--cream); color: var(--ink-text); }

.section-head { text-align: center; max-width: 660px; margin: 0 auto 38px; }

.section-head h2 {
  font-size: clamp(31px, 6.6vw, 46px);
  margin: 0 0 10px;
}

.section-head p {
  color: var(--muted);
  font-size: 16px;
}
.section--light .section-head p { color: var(--ink-muted); }

/* ------------------------------------------------------------ packages --- */
.pkg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 620px) { .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .pkg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }

.pkg {
  display: flex;
  flex-direction: column;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.pkg:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 178, 62, 0.5);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.pkg-img { position: relative; aspect-ratio: 16 / 10; background: var(--ink-900); }
.pkg-img img { width: 100%; height: 100%; object-fit: cover; }

.pkg-tag {
  position: absolute;
  left: 12px;
  top: 12px;
  background: rgba(5, 9, 15, 0.78);
  border: 1px solid rgba(242, 178, 62, 0.5);
  color: var(--gold);
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 5px;
}

/* bottom corner so it never collides with .pkg-tag on a narrow card */
.pkg-flag {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: var(--red);
  color: #fff;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 5px;
}

.pkg-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 18px 18px;
}

.pkg-body h3 { font-size: 23px; margin: 0 0 8px; }

.pkg-body > p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 14px;
}

.pkg-incl {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 7px;
}
.pkg-incl li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #C6D2E2;
  line-height: 1.35;
}
.pkg-incl svg { width: 14px; height: 14px; color: var(--gold); flex: none; margin-top: 2px; }

.pkg-price {
  margin: auto 0 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.pkg-price .from {
  display: block;
  font-size: 10px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
}
/* Pricing is quote-only, so this slot carries a reassurance line rather than
   a number. It keeps the card's border-top rhythm and the auto-margin that
   pins the CTA to the bottom of every card. */
.pkg-price .amt-text {
  display: block;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

/* cards are the narrowest place a button lives */
.pkg .btn { font-size: 17px; padding-inline: 14px; }

.pkg-note {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin-top: 26px;
}
.pkg-note strong { color: var(--gold); }

/* ---------------------------------------------------------- proof strip --- */
.proof-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: center;
}
@media (min-width: 1000px) {
  .proof-inner { grid-template-columns: 300px 1fr; gap: 40px; }
}

.rating-block { text-align: center; }
@media (min-width: 1000px) {
  .rating-block {
    text-align: left;
    border-right: 1px solid #D9D2C6;
    padding-right: 36px;
  }
}

.rating-block .kicker {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin: 0 0 8px;
}

.rating-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
@media (min-width: 1000px) { .rating-row { justify-content: flex-start; } }

.rating-num {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 800;
  line-height: 0.9;
  color: var(--ink-text);
}

.stars { display: flex; gap: 2px; color: var(--gold-dk); }
.stars svg { width: 19px; height: 19px; }

.rating-row .cnt {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 4px;
}

.proof-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
}
@media (min-width: 860px) {
  .proof-values { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pv { text-align: center; }
@media (min-width: 860px) {
  .pv { border-left: 1px solid #DFD8CC; padding-left: 20px; text-align: left; }
  .pv:first-child { border-left: 0; padding-left: 0; }
}

.pv .ico { color: var(--gold-dk); margin-bottom: 9px; display: flex; justify-content: center; }
@media (min-width: 860px) { .pv .ico { justify-content: flex-start; } }
.pv .ico svg { width: 30px; height: 30px; }

.pv b {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
  margin-bottom: 5px;
  color: var(--ink-text);
}
.pv p { font-size: 13px; color: var(--ink-muted); }

/* --------------------------------------------------------- how it works --- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  counter-reset: step;
}
@media (min-width: 620px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.step {
  position: relative;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 20px 22px;
}

.step .n {
  position: absolute;
  top: -16px;
  left: 20px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--gold);
  color: #23180A;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(242, 178, 62, 0.28);
}

.step h3 { font-size: 21px; margin: 12px 0 8px; }
.step p { font-size: 14px; color: var(--muted); }

/* ---------------------------------------------------------------- about --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}
@media (min-width: 1000px) {
  .about-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); gap: 50px; }
}

/* 3:2 to match the owner photo exactly. A cover-crop to 4:3 would cut the
   BEFORE and AFTER labels off the left and right edges. */
.about-img {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.about-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.about-img figcaption {
  padding: 10px 14px;
  background: var(--ink-900);
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

.about-copy h2 { font-size: clamp(30px, 6.2vw, 42px); margin: 0 0 14px; }

.about-copy p {
  color: var(--muted);
  font-size: 15.5px;
  margin-bottom: 14px;
}

.values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
@media (min-width: 860px) { .values { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.value { display: flex; flex-direction: column; gap: 8px; }
.value .ico { color: var(--gold); }
.value .ico svg { width: 26px; height: 26px; }
.value b {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  line-height: 1.15;
}

/* ------------------------------------------------------------------ faq --- */
.faq-list { max-width: 820px; margin: 0 auto; }

.faq-item {
  border-bottom: 1px solid #DFD8CC;
}

/* the h3 exists purely to put the question in the heading outline; the
   button inside keeps all the visual and interactive styling */
.faq-h { margin: 0; font: inherit; text-transform: none; letter-spacing: normal; }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: 0;
  text-align: left;
  padding: 20px 2px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--ink-text);
}
.faq-q:hover { color: var(--gold-dk); }

.faq-q .sign {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ink-text);
  color: var(--gold);
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.faq-q .sign svg { width: 14px; height: 14px; }
.faq-q[aria-expanded="true"] .sign { transform: rotate(45deg); background: var(--gold-dk); color: #fff; }

.faq-a {
  display: none;
  padding: 0 2px 22px;
  font-size: 15px;
  color: var(--ink-muted);
  max-width: 68ch;
}
.faq-a.open { display: block; }
.faq-a strong { color: var(--ink-text); }

/* ------------------------------------------------------------- cta band --- */
.cta {
  position: relative;
  background: var(--ink-900);
  overflow: hidden;
  padding: 54px 0;
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(242, 178, 62, 0.16), transparent 62%);
}
.cta .wrap { position: relative; }

.cta h2 { font-size: clamp(30px, 6.4vw, 46px); margin: 0 0 8px; }
.cta p { color: var(--muted); margin: 0 0 26px; font-size: 16px; }

.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
@media (min-width: 700px) {
  .cta-actions { flex-direction: row; justify-content: center; gap: 22px; }
}

.cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-size: clamp(30px, 7vw, 40px);
  font-weight: 800;
  color: var(--white);
}
.cta-phone svg { width: 27px; height: 27px; color: var(--gold); }
.cta-phone:hover { color: var(--gold); }

.cta-note {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 20px;
}

/* ---------------------------------------------------------------- footer --- */
.footer { background: #04070C; padding: 46px 0 26px; border-top: 1px solid var(--line); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; } }

.footer h3 {
  font-size: 16px;
  letter-spacing: 0.07em;
  margin: 0 0 14px;
  color: var(--white);
}

.footer p, .footer li, .footer a { font-size: 13.5px; color: var(--muted); }
.footer a:hover { color: var(--gold); }

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* give the link itself the height rather than relying on gap, so the tap
   target matches what the eye sees */
.footer ul a { display: inline-block; padding: 11px 0; }
.footer-contact li { padding-block: 4px; }

.footer .brand { margin-bottom: 14px; }

.geo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  line-height: 1.5;
}
/* 30 links in a row of running text gave a 20px-tall tap target. The padding
   is what makes each one reachable on a phone; the separator sits outside it
   so the list still reads as prose. */
.geo-list a { display: inline-block; padding: 8px 0; }
.geo-list a::after { content: " •"; color: var(--muted-2); margin: 0 6px 0 2px; }
.geo-list a:last-child::after { content: ""; }

.footer-contact li { display: flex; align-items: flex-start; gap: 9px; }
.footer-contact svg { width: 15px; height: 15px; color: var(--gold); flex: none; margin-top: 3px; }
.footer-contact .big {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
}

.footer-bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted-2);
}
@media (min-width: 760px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* --------------------------------------------------- sticky mobile bar --- */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 9px 10px;
  background: rgba(5, 9, 15, 0.97);
  border-top: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
}
@media (min-width: 900px) { .sticky-bar { display: none; } }

.sticky-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 7px;
  padding: 13px 8px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  line-height: 1;
}
.sticky-bar svg { width: 16px; height: 16px; flex: none; }
.sticky-bar .s-call { background: var(--gold); color: #23180A; }
.sticky-bar .s-quote { background: transparent; color: var(--white); border: 2px solid var(--line-2); }

/* ==========================================================================
   City landing pages (generated by build.py into /<city-slug>/index.html)
   ========================================================================== */

.crumbs {
  background: var(--ink-900);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted-2);
}
.crumbs .wrap { display: flex; gap: 8px; align-items: center; padding-block: 11px; }
.crumbs a {
  color: var(--muted);
  /* 20px of text is under the 24px minimum target size on its own */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.crumbs a:hover { color: var(--gold); }
.crumbs [aria-current] { color: var(--white); font-weight: 600; }

/* local story block: copy left, supporting photo right */
.local-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
@media (min-width: 1000px) {
  .local-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; }
}

.local-copy h2 { font-size: clamp(30px, 6.2vw, 42px); margin: 0 0 16px; }
.local-copy p { color: var(--muted); font-size: 15.5px; margin-bottom: 14px; }
.local-copy p:last-child { margin-bottom: 0; }

.local-hoods {
  border-left: 3px solid var(--gold);
  padding: 2px 0 2px 16px;
  font-size: 14.5px !important;
}
.local-hoods strong { color: var(--white); }

.local-img {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
}
.local-img img { width: 100%; height: 100%; object-fit: cover; }

/* nearby-city cross links: the internal linking that ties the set together */
.nearby-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 620px) { .nearby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .nearby-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.nearby-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 18px 16px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.nearby-card:hover { transform: translateY(-3px); border-color: rgba(242, 178, 62, 0.5); }

.nearby-name {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--white);
}
.nearby-sub {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted-2);
}
.nearby-go {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
}
.nearby-card:hover .nearby-go .i { transform: translateX(3px); }
.nearby-go .i { width: 14px; height: 14px; transition: transform 0.18s ease; }

.inline-link {
  color: var(--gold-dk);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.section--light .inline-link:hover { color: var(--ink-text); }

/* --------------------------------------------- very small phones (320px) ---
   "Christmas Lighting" is a wider wordmark than the old name, and the city
   promo line carries a city name on top of its label. Both need to give a
   little at iPhone SE width. */
@media (max-width: 420px) {
  .brand-logo { height: 46px; }
  .brand--footer .brand-logo { height: 58px; }
  .header .wrap { gap: 10px; }

  /* let the promo line wrap instead of forcing the page wider */
  .promo-item { white-space: normal; }
  .promo .wrap { padding-block: 7px; }
}

/* ------------------------------------------------------------ guarantee ---
   Risk reversal sits immediately before the final ask. */
.cta .guarantee {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 680px;
  margin: 0 auto 26px;
  padding: 15px 20px;
  text-align: left;
  border: 1px solid rgba(242, 178, 62, 0.4);
  border-radius: 10px;
  background: rgba(242, 178, 62, 0.07);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}
.cta .guarantee .i {
  width: 22px;
  height: 22px;
  color: var(--gold);
  margin-top: 1px;
}
.cta .guarantee strong { color: var(--gold); }

/* inline text links need a real tap height on touch screens */
.inline-link { display: inline-block; padding-block: 4px; }

/* ------------------------------------------------------- form success ----
   Replacing the form with a finished panel reads as done in a way a message
   tacked under the button does not, which matters most on a phone where the
   button may already be off screen. */
[hidden] { display: none !important; }

.form-done { text-align: center; padding: 8px 0 4px; }

.form-done-tick {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #EAF6EF;
  color: #14532D;
}
.form-done-tick .i { width: 26px; height: 26px; stroke-width: 2.5; }

/* "we could not confirm it, please call" reads as a next step, not a failure:
   warm amber rather than the red of a validation error. */
.form-done--call .form-done-tick { background: #FDF1DC; color: #8A5A00; }

.form-done h3 {
  font-size: 28px;
  color: var(--ink-text);
  margin: 0 0 8px;
}
.form-done p {
  font-size: 14.5px;
  color: var(--ink-muted);
  margin: 0 0 18px;
  line-height: 1.5;
}

/* The proof strip's left column used to carry a star rating. Until real
   reviews exist it states the offer instead, which is verifiable. */
.rating-claim {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink-text);
  margin: 0 0 8px;
}
.rating-sub {
  font-size: 13.5px;
  color: var(--ink-muted);
  margin: 0;
}

/* -------------------------------------------------------------- the look ---
   Example imagery of the styles installed. Deliberately not framed as past
   client work: the photographs are illustrative, not job records. */
.look-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 700px) {
  .look-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.look-item {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink-700);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.look-item:hover { transform: translateY(-3px); border-color: rgba(242, 178, 62, 0.45); }

.look-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.look-item figcaption {
  padding: 13px 16px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

.look-note {
  margin-top: 26px;
  text-align: center;
  font-size: 14.5px;
  color: var(--muted);
}
.look-cta {
  color: var(--gold);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  padding-block: 4px;
}
.look-cta:hover { color: var(--gold-2); }


/* ====================================================== the comparison === */
.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}
@media (min-width: 900px) {
  /* stretch, not center: the two panels have to meet as one seam for the VS
     badge to sit on, and unequal heights break that. */
  .compare { grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
}

.compare-col {
  border-radius: 12px;
  padding: 24px 22px 26px;
  border: 1px solid var(--line);
}
.compare-col--bad {
  background: var(--ink-900);
  color: var(--muted);
}
.compare-col--good {
  background: var(--green);
  border-color: rgba(255, 255, 255, 0.16);
  color: #D8E6DE;
}
@media (min-width: 900px) {
  .compare-col { padding: 32px 30px 34px; }
  .compare-col--bad { border-radius: 12px 0 0 12px; border-right: 0; }
  .compare-col--good { border-radius: 0 12px 12px 0; border-left: 0; }
}

.compare-tag {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  margin: 0 0 8px;
}
.compare-col--bad .compare-tag { color: var(--muted-2); }
.compare-col--good .compare-tag { color: var(--gold); }

.compare-col h3 {
  font-size: clamp(22px, 4.2vw, 29px);
  margin: 0 0 20px;
  color: var(--white);
}

.compare-col ul { margin: 0; padding: 0; list-style: none; }

.compare-col li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.5;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.compare-col li:first-child { border-top: 0; padding-top: 0; }
.compare-col--good li { border-top-color: rgba(255, 255, 255, 0.14); }

.compare-col .ico {
  width: 22px; height: 22px;
  flex: none;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.compare-col .ico svg { width: 13px; height: 13px; stroke-width: 3; }
.compare-col--bad .ico { background: rgba(179, 18, 43, 0.22); color: #E8798B; }
.compare-col--good .ico { background: rgba(242, 178, 62, 0.22); color: var(--gold); }

.compare-vs {
  display: grid;
  place-items: center;
  align-self: center;
  z-index: 1;
}
.compare-vs span {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--ink-700);
  border: 2px solid var(--line-2);
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 16px;
  color: var(--white);
}
@media (min-width: 900px) { .compare-vs { margin: 0 -27px; } }

/* ====================================================== service areas ==== */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.area-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(17, 29, 48, 0.45);
  text-decoration: none;
  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}
.area-card:hover,
.area-card:focus-visible {
  border-color: var(--gold);
  background: rgba(17, 29, 48, 0.75);
  transform: translateY(-2px);
}

.area-card .ico {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(242, 178, 62, 0.14);
  color: var(--gold);
}
.area-card .ico svg { width: 17px; height: 17px; }

.area-txt { min-width: 0; }

.area-card b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 17px;
  color: var(--white);
  line-height: 1.15;
}
.area-txt > span { display: block; font-size: 12.5px; color: var(--muted); }
.area-card--more { background: rgba(242, 178, 62, 0.08); border-style: dashed; }

#compare .section-head { max-width: 820px; }
#service-areas .section-head { max-width: 780px; }

/* ==========================================================================
   The mobile hero zone
   --------------------------------------------------------------------------
   Below desktop the running order is headline, form, badges, services, photo:
   the form sits directly under the H1 rather than a screen and a half down.
   That is only possible because .hero-zone wraps the hero and the quote bar
   together. The form is a sibling SECTION of the hero while the badges,
   services and photo are three levels down inside it, so the whole chain is
   dissolved with display:contents and every leaf becomes a grid item here,
   free to be ordered. Dissolving .hero also drops its bleed background, which
   is wanted: the photo becomes a framed block at the end instead.
   Desktop is untouched by all of this.
   ========================================================================== */
@media (max-width: 999px) {
  .hero-zone {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--ink-900);
    padding: 26px var(--pad) 38px;
  }

  .hero,
  .hero > .wrap,
  .hero-grid,
  .hero-copy { display: contents; }

  .hero-bg { display: none; }

  /* the zone already supplies the gutter and the dark ground */
  .quotebar { background: transparent; padding: 0; }
  .quotebar > .wrap { padding-inline: 0; max-width: none; }

  .hero .eyebrow { order: 1; margin-bottom: 9px; }
  .hero h1       { order: 2; margin-bottom: 14px; text-shadow: none; }
  .hero-sub      { order: 3; margin-bottom: 20px; max-width: none; }
  .quotebar      { order: 4; margin-bottom: 24px; }
  .hero-badges   { order: 5; margin-bottom: 20px; }
  .hero-services { order: 6; margin-bottom: 22px; }
  .hero-owner    { order: 7; }

  /* ---- badges: full width, circle icon, two lines, as on the reference --- */
  .hero-badges { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hero-badges li {
    flex-direction: row;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    background: rgba(12, 21, 36, 0.72);
  }
  .hero-badges .ico {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(242, 178, 62, 0.13);
    margin-top: 0;
  }
  .hero-badges .ico svg { width: 19px; height: 19px; }
  .hero-badges b { font-size: 13.5px; margin-bottom: 2px; }
  .bdg-txt > span { display: block; }

  /* ---- services: three across, divided, icon over a centred label -------- */
  .hero-services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    border-bottom: 0;
  }
  .hero-services li {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 9px;
    padding: 2px 6px;
    border-left: 1px solid var(--line-2);
  }
  .hero-services li:first-child { border-left: 0; }
  .hero-services .ico {
    width: auto; height: auto;
    border: 0;
    background: none;
    color: var(--gold);
  }
  .hero-services .ico svg { width: 27px; height: 27px; }
  .hero-services b { font-size: 12.5px; letter-spacing: 0.04em; }
  .hero-services .ln { display: block; }

  /* this line wraps to two on a phone; centring the lock against a two-line
     block leaves it floating, so pin it to the first line instead */
  .privacy { align-items: flex-start; line-height: 1.45; }
  .privacy svg { margin-top: 3px; }
}

/* three columns of uppercase label get tight on the narrowest phones */
@media (max-width: 374px) {
  .hero-services b { font-size: 11.5px; }
  .hero-services li { padding-inline: 3px; }
}

/* ==========================================================================
   The About page (generated into /about/ by build.py)
   ========================================================================== */
.about-top { text-align: center; }
.about-top h1 { font-size: clamp(34px, 7vw, 56px); margin: 0 0 18px; }

.lede {
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.5;
  color: var(--white);
  max-width: 62ch;
  margin: 0 auto 16px;
}
.about-intro {
  color: var(--muted);
  max-width: 62ch;
  margin: 0 auto 28px;
  font-size: 16px;
}

.about-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
@media (min-width: 640px) {
  .about-actions { flex-direction: row; justify-content: center; gap: 24px; }
}

/* ------------------------------------------------------- what we do ----- */
.svc-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 820px) { .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.svc {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 24px 20px;
}
.svc h3 { font-size: 22px; margin: 0 0 10px; }
.svc p { color: var(--muted); font-size: 15px; margin: 0 0 14px; }

.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
}
.svc-link .arw { width: 15px; height: 15px; transition: transform 0.16s ease; }
.svc-link:hover .arw { transform: translateX(3px); }

/* ------------------------------- differentiators / who we work with ----- */
.diff-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) { .diff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .diff-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.diff {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 22px 20px;
  background: rgba(5, 9, 15, 0.35);
}
.diff .ico {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(242, 178, 62, 0.13);
  color: var(--gold);
  margin-bottom: 14px;
}
.diff .ico svg { width: 21px; height: 21px; }
.diff b {
  display: block;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin-bottom: 7px;
}
.diff p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ----------------------------------------------------------- process ---- */
.proc-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  counter-reset: step;
}

.proc {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.proc:first-child { border-top: 0; padding-top: 0; }

.proc .n {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: #23180A;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
}
.proc b {
  display: block;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 5px;
}
.proc p { color: var(--muted); font-size: 15px; margin: 0; }

/* --------------------------------------------------------- key facts ---- */
/* A definition list, not a table: it reads as a list of claims on a phone and
   is unambiguous to anything parsing the page. */
.facts {
  margin: 0 auto;
  max-width: 820px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(5, 9, 15, 0.35);
}

.fact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}
.fact:first-child { border-top: 0; }
@media (min-width: 640px) {
  .fact { grid-template-columns: 210px minmax(0, 1fr); gap: 20px; align-items: baseline; }
}

.fact dt {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gold);
}
.fact dd { margin: 0; font-size: 15px; color: #D2DCE8; }
/* the phone, email and site links here get tapped, so give them a real target */
.fact dd a {
  display: inline-block;
  min-height: 24px;
  padding-block: 2px;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fact dd a:hover { color: var(--gold); }

#people .about-copy h2 { font-size: clamp(28px, 5.4vw, 38px); }

.about-more { margin: 18px 0 0; font-size: 15px; }
.about-copy .about-more a { color: var(--gold); }