:root {
  --brand-primary: #1e293b;
  --brand-primary-text: #1e293b;
  --brand-primary-fg: #ffffff;
  --brand-accent: #f3413e;
  --brand-accent-text: #e12c2e;
  --brand-accent-fg: #0f172a;
  --brand-tertiary: #454753;
  --brand-tertiary-text: #454753;
  --brand-primary-tint: #f0f3f8;
  --brand-primary-soft: #d2d8e2;
  --brand-primary-deep: #0c1627;
  --brand-accent-tint: #ffece9;
  --brand-accent-soft: #ffc3bb;
  --brand-accent-deep: #b70003;
  --brand-tertiary-tint: #f2f3f6;
  --brand-tertiary-soft: #d6d7dd;
  --brand-tertiary-deep: #1d1f29;
  --border: #dddfe2;
  --canvas: #ffffff;
  --surface: #f6f7f9;
  --text: #171b21;
  --text-muted: #5b5e63;
  --font-heading: "Source Serif 4", ui-serif, Georgia, 'Times New Roman', serif;
  --font-body: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --step: 0.5rem;
  --measure: 68ch;
  --radius: 10px;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 8px 24px rgb(15 23 42 / 0.06);
}
:root {
  --scale: 1.250;
  --measure: 68ch;
  --section-space: calc(var(--step) * 6.5);
  --radius: 18px;
  --border-weight: 1px;
  --shadow: 0 2px 4px rgb(15 23 42 / 0.06), 0 12px 32px rgb(15 23 42 / 0.10);
}
/* Motion — see Theme.motion. */
:root {
  --motion-fast: 110ms;
  --motion: 220ms;
  --motion-lift: -2px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion: 0ms; --motion-lift: 0; }
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

/* Section separation — see Theme.section_variety. */
#about { background: var(--surface-2); border-top: var(--border-weight) solid var(--line); border-bottom: var(--border-weight) solid var(--line); }
#contact { background: var(--surface-1); box-shadow: var(--shadow); }
#faq { background: var(--surface-2); border-top: var(--border-weight) solid var(--line); border-bottom: var(--border-weight) solid var(--line); }
#footer { background: var(--surface-1); box-shadow: var(--shadow); }
#free_offer { background: var(--surface-2); }
#hero { background: var(--surface-1); box-shadow: var(--shadow); }
#services { background: var(--surface-1); box-shadow: var(--shadow); }
#trust_bar { background: var(--surface-2); border-top: var(--border-weight) solid var(--line); border-bottom: var(--border-weight) solid var(--line); }

/* motif: dots, seeded from site id (renderer/graphics.py) */
:root {
  --motif: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%221.5%22%20fill%3D%22%231e293b%22%2F%3E%3C%2Fsvg%3E");
  --motif-accent: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%221.5%22%20fill%3D%22%23f3413e%22%2F%3E%3C%2Fsvg%3E");
}
.section--tint { background-image: var(--motif); background-size: 80px; }
@media (prefers-reduced-motion: no-preference) {
  .hero:not(.hero--image)::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: var(--motif-accent); background-size: 120px;
    opacity: .5; pointer-events: none;
  }
}

/* Roki SiteBuilder master production stylesheet.
   Light-mode default with rich gradients, polished cards, and micro-interactions. */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; text-wrap: balance; }
h1 {
  font-size: clamp(2.2rem, 5.2vw, calc(1rem * var(--scale) * var(--scale) * var(--scale) * var(--scale)));
  letter-spacing: -0.03em;
  font-weight: 800;
}
h2 {
  font-size: clamp(1.6rem, 3.4vw, calc(1rem * var(--scale) * var(--scale) * var(--scale)));
  letter-spacing: -0.02em;
  font-weight: 700;
}
h3 {
  font-size: calc(1rem * var(--scale));
  letter-spacing: -0.01em;
  font-weight: 700;
}
p, li { max-width: var(--measure); }

img, video { max-width: 100%; height: auto; display: block; }
iframe { max-width: 100%; display: block; }
a { color: var(--brand-primary-text); }

:focus-visible { outline: 3px solid var(--brand-accent-text); outline-offset: 2px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--canvas); color: var(--text);
  padding: calc(var(--step) * 1.5); border-radius: var(--radius);
}
.skip:focus { left: var(--step); top: var(--step); }

.wrap { width: min(100% - calc(var(--step) * 6), clamp(1120px, 82vw, 1440px)); margin-inline: auto; }
.section { padding-block: var(--section-space, clamp(3rem, 7vw, 5.5rem)); }
.section--tint { background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 60%, var(--canvas)) 100%); }
.section + .section:not(.section--tint):not(.hero) { border-top: var(--border-weight, 1px) solid var(--border); }

.section > .wrap > h2 {
  position: relative;
  padding-top: calc(var(--step) * 1.8);
  margin-bottom: calc(var(--step) * 4);
}
.section > .wrap > h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 4px;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary));
  border-radius: 3px;
}

/* ── animations & micro-interactions ───────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__copy > * {
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero__copy h1 { animation-delay: 0.05s; }
.hero__copy .hero__sub { animation-delay: 0.15s; }
.hero__copy .hero__proof { animation-delay: 0.25s; }
.hero__copy .cta-row { animation-delay: 0.35s; }
.hero__aside { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }

.hero__aside img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
}
.hero__aside:hover img {
  transform: scale(1.025);
  box-shadow: 0 25px 50px -12px rgba(3, 105, 161, 0.25);
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px;
  padding: .85rem 1.8rem;
  border-radius: var(--radius);
  font: inherit; font-weight: 600; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .18s cubic-bezier(0.16, 1, 0.3, 1), filter .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  background: linear-gradient(135deg, var(--brand-accent, #ea580c), color-mix(in srgb, var(--brand-accent, #ea580c) 82%, #000));
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 6px 20px -2px color-mix(in srgb, var(--brand-accent, #ea580c) 50%, transparent);
}
.btn--primary::after {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(60deg, transparent 35%, rgba(255,255,255,0.32) 50%, transparent 65%);
  transform: translateX(-100%) rotate(25deg);
  transition: transform 0.65s ease;
}
.btn--primary:hover::after {
  transform: translateX(100%) rotate(25deg);
}
.btn--primary:hover {
  box-shadow: 0 10px 28px -2px color-mix(in srgb, var(--brand-accent, #ea580c) 65%, transparent);
  filter: brightness(1.05);
}
.btn--ghost {
  background: transparent;
  color: var(--brand-primary-text);
  border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--border));
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  border-color: var(--brand-primary);
}
.cta-row { display: flex; flex-wrap: wrap; gap: calc(var(--step) * 1.5); margin-top: calc(var(--step) * 3); }

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.nav__inner { display: flex; align-items: center; gap: calc(var(--step) * 2);
             padding-block: var(--step); flex-wrap: nowrap; }
.nav__brand--logo { display: inline-flex; align-items: center; }
.nav__logo { display: inline-flex; align-items: center; color: var(--brand-primary-text); }
.nav__logo svg { height: 32px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.05)); }
.nav__logo--mark { display: none; }
.nav__logo--mark svg { height: 32px; width: 32px; }
.nav__logo-img { height: 46px; width: auto; max-width: 260px; object-fit: contain; display: block; }
.footer__logo-img { max-height: 48px; max-width: 240px; width: auto; object-fit: contain; margin-bottom: 0.75rem; display: block; background: #ffffff; padding: 4px 8px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.nav__brand {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem;
  text-decoration: none; color: var(--text);
  white-space: nowrap; flex: 0 0 auto;
}
.nav .btn { white-space: nowrap; flex: 0 0 auto; }
.nav__links { display: flex; gap: calc(var(--step) * 2.5); margin-left: auto; list-style: none; padding: 0; }
.nav__links a { white-space: nowrap; text-decoration: none; color: var(--text); font-weight: 500; transition: color .15s ease; }
.nav__links a:hover { color: var(--brand-primary-text); }
/* One action, so the bar is always three grid children: brand, links, CTA. */
.nav__cta { margin-left: auto; flex: 0 0 auto; }
/* `NavSection.show_phone_with_cta` — the deliberately narrow, opt-in
   exception to the rule above. Wraps the tel link and the CTA together so
   the pair moves as one grid/flex child, the same slot the lone action
   normally occupies. */
.nav__utility { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: calc(var(--step) * 1.5); }
.nav__utility .nav__cta { margin-left: 0; }
.nav__tel { display: inline-flex; align-items: center; gap: 0.6em; text-decoration: none; color: var(--text); flex: 0 0 auto; }
.nav__tel-text { display: flex; flex-direction: column; line-height: 1.2; }
.nav__tel-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.nav__tel-number { font-weight: 700; color: var(--brand-primary-text); white-space: nowrap; }
.nav__utility-link { white-space: nowrap; text-decoration: none; color: var(--text); font-weight: 600; font-size: 0.85rem; }
.nav__utility-link:hover { color: var(--brand-primary-text); }
.nav__toggle { display: none; margin-left: auto; background: none; border: 0; padding: .5rem;
  width: 44px; height: 44px; cursor: pointer; }
.nav__bars, .nav__bars::before, .nav__bars::after {
  display: block; width: 22px; height: 2px; background: var(--text);
  transition: transform .2s ease, opacity .2s ease;
}
.nav__bars::before, .nav__bars::after { content: ""; position: relative; }
.nav__bars::before { top: -7px; }
.nav__bars::after { top: 5px; }
[aria-expanded="true"] .nav__bars { background: transparent; }
[aria-expanded="true"] .nav__bars::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .nav__bars::after { transform: translateY(-5px) rotate(-45deg); }

.nav--logo_centre .nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.nav--logo_centre .nav__brand { order: 2; justify-self: center; }
.nav--logo_centre .nav__links { order: 1; margin-left: 0; justify-content: flex-start; }
.nav--logo_centre .nav__cta { order: 3; grid-column: 3; justify-self: end; }
.nav--logo_centre .nav__toggle { order: 4; }

.nav--split .nav__links { margin-inline: auto; }
.nav--split .nav__cta { margin-left: 0; }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(4.5rem, 9vw, 7.5rem); overflow: hidden; }
/* `HeroSection.social_share` (opt-in, contract docstring). Flush to the
   hero's own right edge, stacked, each its own brand colour rather than the
   theme's — the row is recognisable networks, not this site's palette. */
.hero__social {
  position: absolute;
  top: calc(var(--step) * 3);
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
}
.hero__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
}
.hero__social a:nth-child(1) { background: #1877f2; }
.hero__social a:nth-child(2) { background: #1da1f2; }
.hero__social a:nth-child(3) { background: #0a66c2; }
.hero__social a:hover { filter: brightness(0.9); }
.hero:not(.hero--image) {
  background:
    radial-gradient(90% 90% at 85% 15%, color-mix(in srgb, var(--brand-accent) 12%, transparent) 0%, transparent 60%),
    linear-gradient(175deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
}
.hero:not(.hero--image)::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}
.hero h1 { max-width: 20ch; color: #0f172a; font-weight: 800; }
.hero__emphasis {
  color: var(--brand-accent);
  text-decoration: underline;
  text-decoration-color: var(--brand-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
}
.hero:not(.hero--image) h1 { text-shadow: none; }
.hero--image { color: #fff; }
.hero--image .hero__bg { position: absolute; inset: 0; z-index: -2; object-fit: cover; width: 100%; height: 100%; filter: brightness(0.95); }
/* The industry backdrop sits further back than a customer's own photograph:
   desaturated and dimmed so it reads as the room the copy is standing in
   rather than as a picture of this business's work. A real photograph is the
   subject and keeps its own treatment above. */
.hero__bg--stock { filter: brightness(0.72) saturate(0.75); }
.hero--image::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, rgb(15 23 42 / .88) 0%, rgb(15 23 42 / .72) 55%, rgb(15 23 42 / .48) 100%);
}
.hero--image h1, .hero--image p { color: #fff; }
.hero__eyebrow {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 calc(var(--step) * 0.75) 0;
}
.hero--image .hero__eyebrow { color: rgb(255 255 255 / .85); text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.hero__sub { font-size: clamp(1.05rem, 1.8vw, 1.2rem); color: #475569; margin-top: calc(var(--step) * 2); line-height: 1.65; max-width: 54ch; }
.hero--image .hero__sub { color: rgb(255 255 255 / .92); text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.hero__proof {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: calc(var(--step) * 2.5);
  padding: 0.5rem 1.2rem;
  border-radius: 9999px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* Theme-derived, not a fixed green. These were literals (#f0fdf4 / #166534
     / #bbf7d0), so the most prominent element in the hero after the headline
     rendered mint on every palette — a navy-and-rust electrician and an
     earth-and-clay roofer both got the same green pill, belonging to neither.
     `--brand-primary-text` is the contrast-corrected variant, so it carries
     text safely on any sampled primary. */
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface));
  color: var(--brand-primary-text);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--surface));
  box-shadow: 0 2px 6px rgba(22, 101, 52, 0.08);
}
.hero--image .hero__proof {
  background: rgb(255 255 255 / 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  border-color: rgb(255 255 255 / 0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.hero--centred .hero__inner { text-align: center; }
.hero--centred .hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-inline: auto;
}
.hero--centred h1 { max-width: 24ch; margin-inline: auto; }
.hero--centred .hero__sub { margin-inline: auto; max-width: 52ch; }
.hero--centred .cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
  width: 100%;
}
.hero--split .hero__inner { display: grid; gap: calc(var(--step) * 6); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.hero--split .hero__aside { position: relative; }
.hero--split .hero__aside img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: min(260px, 45vw) min(260px, 45vw) calc(var(--radius) * 1.5) calc(var(--radius) * 1.5);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05);
}
.hero--image .btn--ghost {
  color: #ffffff;
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.08);
}
.hero--image .btn--ghost:hover {
  background: rgba(255,255,255,0.2);
  border-color: #ffffff;
}
@media (max-width: 640px) {
  /* Scoped to `hero--split` specifically, not every hero: a secondary
     decorative image is the right thing to drop on a phone screen to keep
     the headline and CTA above the fold, but that is a call for the sites
     using this layout, not a silent change to every hero variant. */
  .hero--split .hero__aside { display: none; }
  /* Not an explicit `flex-direction: column` anywhere — the row's own
     `flex-wrap: wrap` (base.css) was doing it implicitly, because two
     full-padded buttons are wider than a phone screen and wrapped exactly
     like text would. Splitting the row evenly between them, instead of
     leaving each at its natural (too-wide) size, is what actually keeps
     them on one line rather than just suppressing the wrap and clipping one. */
  .hero--split .cta-row {
    flex-wrap: nowrap;
    gap: calc(var(--step) * 1.5);
  }
  .hero--split .cta-row .btn {
    flex: 1 1 0;
    min-width: 0;
    /* This site's own composed styling sets button padding with
       `!important` (2.5rem a side — sized for two buttons that get the
       whole row to themselves on a wide screen). `!important` beats
       specificity alone, so this has to out-rank it on both counts to
       actually win here, not just be written after it. */
    padding-inline: calc(var(--step) * 2) !important;
    white-space: nowrap;
    text-align: center;
  }
}

/* ── generic grid ────────────────────────────────────────────────────── */
.grid { display: grid; gap: calc(var(--step) * 3.5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ── trust bar ───────────────────────────────────────────────────────── */
.trust {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 92%, #000), var(--brand-primary));
  color: #fff;
  border-block: 0;
  padding-block: calc(var(--step) * 3);
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.trust ul {
  display: flex; flex-wrap: wrap; gap: calc(var(--step) * 2);
  list-style: none; padding: 0; justify-content: center;
}
.trust li {
  font-weight: 600; font-size: 0.92rem;
  padding: 0.5rem 1.2rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  display: inline-flex; align-items: center; gap: 0.45rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.trust li:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.trust li::before {
  content: "✓";
  display: inline-flex; justify-content: center; align-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-accent); color: var(--brand-accent-fg);
  font-size: 11px; font-weight: 700;
}

/* A second `.trust` section right after the first one — this site's own
   composed styling gives every `.trust li` the same light card treatment
   (including a per-position `:nth-child` border colour meant for a single
   4-item row), so a second, 3-item trust bar inherited it too, rather than
   the dark band it needs. Adjacent-sibling, the same trick the composed CSS
   itself uses elsewhere for "the second .services section" — no id or class
   to hook distinguishes the two `.trust` sections, only their position does. */
.trust + .trust {
  background: #0a0e1a !important;
}
.trust + .trust li,
.trust + .trust li:nth-child(1),
.trust + .trust li:nth-child(2),
.trust + .trust li:nth-child(3) {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
}
.trust + .trust .trust__item-title {
  color: #ffffff !important;
}
.trust + .trust li::before {
  width: 40px !important;
  height: 40px !important;
  background-color: transparent !important;
}
.trust + .trust li:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B4513' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l2.5 2.5L16 9'/%3E%3C/svg%3E") !important;
}
.trust + .trust li:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B4513' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/%3E%3C/svg%3E") !important;
}
.trust + .trust li:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B4513' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 018 0v4'/%3E%3C/svg%3E") !important;
}

/* ── services section ────────────────────────────────────────────────── */
.services__lead {
  color: var(--text-muted);
  max-width: 60ch;
  margin: calc(var(--step) * 2) auto calc(var(--step) * 5);
  text-align: center;
  line-height: 1.6;
}
.services .grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: calc(var(--step) * 4);
}
@media (min-width: 960px) {
  .services .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.services .card {
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: calc(var(--step) * 5);
  box-shadow: 0 4px 20px -2px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow .25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color .2s ease;
}
/* ── card_style ──────────────────────────────────────────────────────────
   `data-cards` was written onto <body> and read by nothing, so `card_style`
   offered four variants and rendered one: the accent bar below was
   unconditional. These four rules are what make the dimension real.
   Everything keys off the body attribute, so a theme change restyles every
   card on the page without a template edit. */

/* accent_bar — the previous unconditional behaviour, now opt-in. */
[data-cards="accent_bar"] .services .card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
  opacity: 0.85;
}

/* plain — no border, no bar; the card is defined by its ground and its shadow. */
[data-cards="plain"] .services .card {
  border-color: transparent;
  background: var(--surface);
  box-shadow: none;
}

/* bordered — the border does the work, so the shadow steps back. */
[data-cards="bordered"] .services .card {
  box-shadow: none;
}

/* numbered — a large ghost numeral per card, the register of a process or a
   specification sheet. The counter lives on the grid so numbering restarts
   per section rather than running on across the page. */
[data-cards="numbered"] .services .grid { counter-reset: card; }
[data-cards="numbered"] .services .card { counter-increment: card; }
[data-cards="numbered"] .services .card::before {
  content: counter(card, decimal-leading-zero);
  position: absolute;
  top: calc(var(--step) * 2); right: calc(var(--step) * 3);
  font-family: var(--font-heading);
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-primary);
  /* Behind the content, and quiet enough that the title still leads. */
  opacity: 0.10;
  pointer-events: none;
}
[data-cards="numbered"] .services .card:hover::before {
  opacity: 0.18;
  color: var(--brand-accent);
}
.services .card:hover {
  transform: translateY(-8px);
  border-color: var(--brand-accent);
  box-shadow: 0 24px 48px -10px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}
.services .card:hover .services__icon,
.services .card:hover h3::before {
  transform: scale(1.06) rotate(-2deg);
}

.services .card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: calc(var(--step) * 2.5);
  line-height: 1.25;
  display: block;
}
.services .card > .card__icon {
  color: var(--brand-accent-text);
  margin-bottom: calc(var(--step) * 2);
}
.services .card h3::before {
  content: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 26px 26px;
  box-shadow: 0 8px 18px -3px rgba(0,0,0,0.18);
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: var(--brand-primary);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 70%, #000));
}
/* Icon badge colours stepped primary → accent so marks read as distinct.
   Cycle via 6n so cards beyond 6 always receive distinctive, styled icons. */
.services .card:nth-child(6n + 1) h3::before {
  background-color: var(--brand-primary);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 70%, #000));
}
.services .card:nth-child(6n + 2) h3::before {
  background-color: color-mix(in srgb, var(--brand-primary) 78%, var(--brand-accent));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3m0 12v3M3 12h3m12 0h3M5.6 5.6l2.1 2.1m8.6 8.6l2.1 2.1M5.6 18.4l2.1-2.1m8.6-8.6l2.1-2.1'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 70%, var(--brand-accent)), var(--brand-primary));
}
.services .card:nth-child(6n + 3) h3::before {
  background-color: color-mix(in srgb, var(--brand-primary) 55%, var(--brand-accent));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E"),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 45%, var(--brand-primary)), color-mix(in srgb, var(--brand-primary) 80%, #000));
}
.services .card:nth-child(6n + 4) h3::before {
  background-color: var(--brand-accent);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 65%, #000));
}
.services .card:nth-child(6n + 5) h3::before {
  background-color: color-mix(in srgb, var(--brand-primary) 40%, var(--brand-accent));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 60%, var(--brand-primary)), var(--brand-primary));
}
.services .card:nth-child(6n + 6) h3::before {
  background-color: var(--brand-primary);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--brand-primary), color-mix(in srgb, var(--brand-accent) 50%, #000));
}

.services .card p {
  color: var(--text);
  line-height: 1.75;
  font-size: 0.94rem;
  white-space: pre-line;
}

/* ── insurance section ─────────────────────────────────────────────── */
#insurance {
  background: #f8fafc;
  border-block: 1px solid #e2e8f0;
  padding-block: calc(var(--step) * 8);
}
#insurance .wrap,
#insurance .wrap.prose {
  max-width: var(--wrap) !important;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: calc(var(--step) * 6);
  align-items: start;
}
@media (max-width: 860px) {
  #insurance .wrap,
  #insurance .wrap.prose { grid-template-columns: 1fr; }
}
#insurance h2 {
  grid-column: 1 / -1;
  margin-bottom: calc(var(--step) * 2);
}
#insurance p {
  color: var(--text);
  line-height: 1.75;
  font-size: 1.05rem;
}
#insurance ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
#insurance li {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#insurance li:hover {
  transform: translateY(-2px);
  border-color: var(--brand-accent);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}
#insurance li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-accent) 15%, transparent);
  color: var(--brand-accent);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── reviews section ─────────────────────────────────────────────────── */
#reviews {
  padding-block: calc(var(--step) * 8);
  background: var(--canvas);
}
#reviews .grid {
  gap: calc(var(--step) * 4);
}
#reviews .card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: calc(var(--step) * 5);
  box-shadow: 0 4px 16px -2px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#reviews .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -4px rgba(0,0,0,0.1);
  border-color: #cbd5e1;
}
#reviews blockquote {
  margin: 0;
  padding: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #334155;
  font-style: normal;
}
#reviews figcaption {
  margin-top: calc(var(--step) * 3);
  font-weight: 700;
  font-size: 0.92rem;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#reviews figcaption::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
}

/* ── about section ──────────────────────────────────────────────────── */
#about {
  padding-block: calc(var(--step) * 8);
}
/* Only the imageless about (no `.grid` on the wrap) flows the prose into two
   internal columns. With an image the wrap is `.wrap.grid.grid--2` and the
   block further down owns the layout: text on top, feature cards in a row
   beneath it, image on the far right. */
#about .wrap:not(.grid) > .prose {
  max-width: var(--wrap);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: calc(var(--step) * 6);
  align-items: start;
}
@media (max-width: 860px) {
  #about .wrap:not(.grid) > .prose { grid-template-columns: 1fr; }
}
#about .wrap.grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: calc(var(--step) * 7);
  align-items: center;
}
@media (max-width: 860px) {
  #about .wrap.grid { grid-template-columns: 1fr; gap: calc(var(--step) * 4); }
}
#about .wrap.grid > .prose {
  display: block;
}
#about .wrap.grid > .prose > * {
  grid-column: auto;
}
#about .wrap:not(.grid) h2 {
  grid-column: 1 / -1;
  margin-bottom: calc(var(--step) * 2);
}
#about .wrap:not(.grid) h3 {
  grid-column: 2;
  margin-top: 0;
  font-size: 1.3rem;
  color: var(--brand-primary-text);
}
#about .wrap:not(.grid) ul {
  grid-column: 2;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#about.about--feature_list li {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  line-height: 1.5;
  font-size: 0.94rem;
  color: #334155;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
#about.about--feature_list li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}



/* ── pricing packages section ────────────────────────────────────────── */
#plans {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding-block: calc(var(--step) * 8);
}
#plans h2 {
  color: var(--text, #0f172a);
}
#plans .wrap > h2::before {
  background: var(--brand-primary, #137547);
}
#plans .grid {
  align-items: stretch;
  padding-top: calc(var(--step) * 3);
}
#plans .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  border-top: 4px solid var(--brand-primary, #137547);
  padding: calc(var(--step) * 5);
  box-shadow: 0 4px 20px -2px rgba(0,0,0,0.05);
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow .25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color .2s ease;
  position: relative;
}
#plans .card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-primary, #137547);
  box-shadow: 0 20px 35px -8px rgba(0,0,0,0.1);
}
#plans .card:nth-child(2) {
  border: 2px solid var(--brand-primary, #137547);
  border-top: 5px solid var(--brand-primary, #137547);
  box-shadow: 0 12px 30px -4px rgba(19, 117, 71, 0.2);
  transform: scale(1.02);
}

#plans .card h3 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: calc(var(--step) * 1.5);
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
#plans .card h3::before {
  content: "";
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
}
#plans .card:nth-child(1) h3::before {
  background-color: #ecfdf5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137547' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
#plans .card:nth-child(2) h3::before {
  background-color: #ffedd5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}
#plans .card:nth-child(3) h3::before {
  background-color: #ecfdf5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137547' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}
#plans .card p {
  white-space: pre-line;
  line-height: 1.7;
  font-size: 0.94rem;
  color: #475569;
  margin-bottom: calc(var(--step) * 2);
}

.plan__footer {
  margin-top: calc(var(--step) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 2);
  border-top: 1px solid #e2e8f0;
  padding-top: calc(var(--step) * 2.5);
}
.plan__price-tag {
  display: flex;
  flex-direction: column;
}
.plan__price-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}
.plan__price-tag strong {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-top: 0.2rem;
}
.plan__btn {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
}
#plans .card:nth-child(2) .plan__btn {
  background: var(--brand-accent, #ea580c) !important;
  border-color: var(--brand-accent, #ea580c) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.3);
}
#plans .card:nth-child(2) .plan__btn:hover {
  filter: brightness(1.08);
}

/* ── about section ───────────────────────────────────────────────────── */
#about {
  background: #ffffff;
  padding-block: calc(var(--step) * 8);
}
#about .wrap {
  align-items: center;
  gap: calc(var(--step) * 6);
}
#about .prose {
  background: #ffffff;
  padding: 0;
  border: 0;
  box-shadow: none;
}
#about .prose h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 800;
  color: #0f172a;
  margin-bottom: calc(var(--step) * 2.5);
  line-height: 1.2;
}
#about .prose p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #475569;
}
#about .prose h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
  margin-top: calc(var(--step) * 3);
  margin-bottom: calc(var(--step) * 1.5);
}
/* With an image: text column on the left, image on the far right spanning the
   section's full height, and the feature list breaks into a full-width row
   *below* the paragraphs rather than stacking in a narrow column beside the
   picture. The list is nested in the markdown body, so `.prose` is laid out as
   a flex column and the list is forced to three across. */
#about .wrap.grid.grid--2 {
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: calc(var(--step) * 5);
  align-items: start;
}
#about .prose {
  display: flex;
  flex-direction: column;
}
/* Scoped to `.wrap.grid.grid--2` — an image is what this comment above has
   always claimed gated the card treatment, but these four rules never
   actually carried that qualifier, so every about section's markdown-body
   `<ul>` got card-ified into a three-across feature grid whether or not
   there was an image to lay out beside it: an ordinary bulleted list on a
   plain content page (no image, no `.grid--2`) came out looking like a
   benefits row. */
#about .wrap.grid.grid--2 .prose ul {
  list-style: none;
  padding: 0;
  margin-top: calc(var(--step) * 4);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--step) * 2.5);
}
/* The trailing link sits under the feature row and needs room to read as its
   own step, not a caption on the last card. */
#about .wrap.grid.grid--2 .prose > ul + p {
  margin-top: calc(var(--step) * 4);
}
#about .wrap.grid.grid--2 .prose li {
  font-size: 0.92rem;
  font-weight: 500;
  color: #334155;
  line-height: 1.6;
  background: #ffffff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 0.85rem 1.15rem 0.85rem 3rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  position: relative;
  display: block;
}
#about .prose li strong {
  color: #0f172a;
  font-weight: 700;
}
#about .wrap.grid.grid--2 .prose li::before {
  content: "✓";
  position: absolute;
  left: 0.95rem;
  top: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-primary, #0B4E3D);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}
@media (max-width: 900px) {
  #about .wrap.grid.grid--2 { grid-template-columns: minmax(0, 1fr); }
  #about .wrap.grid.grid--2 .prose ul { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

#about .about__media {
  position: relative;
  align-self: stretch;
}
#about .about__media img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.2);
}

/* ── FAQ section ─────────────────────────────────────────────────────── */
#faq {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding-block: calc(var(--step) * 8);
}
dl.faq { display: grid; gap: calc(var(--step) * 2.5); max-width: 840px; margin-inline: auto; }
dl.faq > div {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: calc(var(--step) * 3.5);
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  transition: border-color .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
dl.faq > div:hover {
  border-color: var(--brand-primary, #137547);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
dl.faq dt {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  user-select: none;
}
dl.faq dt::after {
  content: "+";
  font-size: 1.35rem;
  color: var(--brand-primary, #137547);
  transition: transform 0.25s ease;
  font-weight: 400;
  margin-left: 1rem;
}
dl.faq > div.open dt::after {
  transform: rotate(45deg);
}

/* The collapse itself. `.open` used to rotate the icon and nothing else, so
   every answer stayed visible and the plus/cross was decoration — the two
   `display: block` overrides for open_list and two_column below only make
   sense against a base state that hides, and that base state was missing.

   Scoped to `.js-accordion`, which site.js adds only after it has wired the
   controls up. Without JS nothing is hidden: an answer a visitor cannot open
   is worse than one that is simply always shown, and the FAQ is the most
   quoted block on the page for an answer engine. */
.faq--accordion dl.faq.js-accordion dd {
  display: none;
}
.faq--accordion dl.faq.js-accordion > div.open dd {
  display: block;
  animation: faq-reveal .2s ease;
}
@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq--accordion dl.faq.js-accordion > div.open dd { animation: none; }
}

/* The question is the control, so it gets the affordance and the focus ring. */
dl.faq dt button {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
dl.faq dt button:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
  border-radius: 4px;
}
/* With a button present the marker belongs to it, not to the dt. */
dl.faq dt:has(button)::after { content: none; }
dl.faq dt button::after {
  content: "+";
  font-size: 1.35rem;
  color: var(--brand-primary, #137547);
  transition: transform 0.25s ease;
  font-weight: 400;
  margin-left: 1rem;
}
dl.faq > div.open dt button::after { transform: rotate(45deg); }
dl.faq dd {
  margin: calc(var(--step) * 1.5) 0 0;
  color: #475569;
  line-height: 1.65;
  font-size: 0.98rem;
}

/* ── contact CTA section ─────────────────────────────────────────────── */
#contact {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 90%, #000) 0%, var(--brand-primary) 50%, color-mix(in srgb, var(--brand-primary) 80%, #000) 100%);
  color: #ffffff;
  text-align: center;
  padding-block: calc(var(--step) * 9);
  position: relative;
  overflow: hidden;
}
#contact::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}
#contact h2 {
  color: #ffffff;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 700;
  max-width: 80ch;
  margin-inline: auto;
  margin-bottom: calc(var(--step) * 4);
}
#contact .wrap > h2::before {
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-accent);
}

/* A details column beside the form (contract: `body`, opt-in). The dark
   full-bleed band above works for a short, centred CTA; it does not work
   for a two-column layout with body copy and an icon list next to it, so
   this variant switches back to the page's own surface and left alignment. */
#contact.contact--details {
  background: var(--canvas);
  color: var(--text);
  text-align: left;
}
#contact.contact--details::before { content: none; }
#contact.contact--details h2 {
  color: var(--text);
  text-align: left;
  max-width: none;
  margin-inline: 0;
}
/* `#contact.contact--details`, not just `.contact__grid`: the older
   `.contact--split_details .wrap { display: block }` rule below (0,2,0,
   later in the file) otherwise beats a bare `.contact__grid` (0,1,0) on both
   specificity and source order and silently collapses this back to one
   column — an ID in the selector outranks it regardless of either. */
#contact.contact--details .contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: calc(var(--step) * 6);
  align-items: start;
}
.contact__details { display: flex; flex-direction: column; }
/* The column's default `align-items: stretch` is right for the body text and
   the info list — wrong for the button, which stretched to the column's full
   width and read as a banner rather than a call to action. */
.contact__details > .btn { align-self: flex-start; }
.contact__form { min-width: 0; }
.contact__body { color: var(--text-muted); line-height: 1.65; margin: calc(var(--step) * 2) 0 calc(var(--step) * 3); }
.contact__body p { margin: 0 0 1em; }
.contact__body p:last-child { margin-bottom: 0; }
.contact__note { line-height: 1.6; margin-bottom: calc(var(--step) * 3); }
.contact__note strong { display: block; margin-bottom: 0.2em; }
.contact__info {
  list-style: none;
  padding: 0;
  margin: calc(var(--step) * 4) 0 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 2.5);
}
.contact__info li { display: flex; align-items: flex-start; gap: calc(var(--step) * 1.5); }
.contact__info svg { flex-shrink: 0; margin-top: 0.15em; color: var(--brand-primary); }
.contact__info strong { display: block; font-size: 0.95rem; }
.contact__info a, .contact__info span span { color: var(--text-muted); text-decoration: none; }
.contact__info a:hover { text-decoration: underline; }
@media (max-width: 860px) {
  /* Same ID-scoped selector as the base rule above, and for the same reason:
     a bare `.contact__grid` here loses to `#contact.contact--details
     .contact__grid`'s higher specificity even inside the media query, so the
     two columns never actually collapsed on a narrow screen — the query
     matched, the declaration just never won. */
  #contact.contact--details .contact__grid { grid-template-columns: 1fr; }
}

/* A dedicated booking page: centred heading and intro, three info cards,
   the form in its own card below — see the contract docstring on
   `cards_layout` for why this differs from the details column above. */
.contact__stack { text-align: center; }
.contact__stack > .contact__body--centred { max-width: 60ch; margin: calc(var(--step) * 2) auto calc(var(--step) * 5); color: var(--text-muted); line-height: 1.6; }
.contact__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: calc(var(--step) * 3);
  max-width: 900px;
  margin: 0 auto calc(var(--step) * 5);
}
.contact__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: calc(var(--step) * 4) calc(var(--step) * 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--step) * 1);
}
.contact__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  color: var(--brand-primary-fg, #fff);
  margin-bottom: calc(var(--step) * 1);
}
.contact__card h2 { font-size: 1.05rem; margin: 0; }
.contact__card a, .contact__card span:not(.contact__card-icon) { color: var(--text-muted); text-decoration: none; }
.contact__card a:hover { text-decoration: underline; }
.contact__form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: calc(var(--step) * 5) calc(var(--step) * 4);
  max-width: 720px;
  margin: 0 auto;
}
.contact__form-card h2 { margin-bottom: calc(var(--step) * 1); }
.contact__form-card > p { color: var(--text-muted); margin-bottom: calc(var(--step) * 4); }
.contact__form-card .embed,
.contact__form-card iframe { text-align: left; }

/* ── embed & form frames ─────────────────────────────────────────────── */
.embed {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  background: transparent;
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  position: relative;
  transition: min-height 0.2s ease;
  min-height: 480px;
}
.embed iframe {
  width: 100% !important;
  min-height: 480px;
  border: 0;
  display: block;
  /* Transparent, not white. The reserved height is taller than most forms, so
     an opaque canvas painted a tall white slab across whatever band the
     section sits on. The provider's own document still paints itself — that
     background is cross-origin and not ours to change — so `.embed` frames it
     as a deliberate card instead of leaving it as a stray rectangle. */
  background: transparent;
  border-radius: 12px;
}
/* Opt-in: no width cap, and a much smaller reserved height than `.embed`'s
   own 480px/720px guess — the resize script grows it the rest of the way,
   for a form whose real size that guess was clipping or narrowing.
   A real floor rather than 0, though: collapsing all the way down bet
   everything on the resize script finishing before the visitor looks, and a
   slightly slow one (a beat's delay on the iframe's `load` or the provider's
   `postMessage`) read as "the form never showed up" until a hard refresh
   happened to win that race a second time. */
.embed--natural { max-width: none; min-height: 200px; }
.embed--natural iframe { min-height: 200px; }
/* A third-party form can take a beat to paint, and until it does the reserved
   box is just a blank rectangle the colour of whatever section it sits in —
   easy to read as broken rather than loading. `site.js` removes this class on
   the iframe's `load` event, which fires even for a cross-origin frame.
   `no-repeat` + a moving background-position, not `@keyframes`, so the whole
   thing is inert (and invisible, via the same media query as everywhere else
   on the site) under `prefers-reduced-motion`. */
.embed--loading iframe { opacity: 0; }
.embed--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(
    100deg,
    rgba(127, 127, 127, 0.08) 30%,
    rgba(127, 127, 127, 0.18) 50%,
    rgba(127, 127, 127, 0.08) 70%
  );
  background-size: 200% 100%;
  animation: embed-loading-sweep 1.4s ease-in-out infinite;
}
@keyframes embed-loading-sweep {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .embed--loading iframe { opacity: 1; }
  .embed--loading::after { display: none; }
}
#contact .embed {
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
}

#contact .embed__fallback {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  padding: calc(var(--step) * 5);
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--step) * 2);
  box-shadow: 0 20px 45px -10px rgba(0,0,0,0.3);
}
#contact .embed__fallback p { color: #334155; font-weight: 500; font-size: 1.05rem; margin: 0; }
#contact .embed__fallback a:not(.btn) { color: var(--brand-primary-text); font-weight: 700; text-decoration: none; }
#contact .embed__fallback a:not(.btn):hover { text-decoration: underline; }
#contact .btn--primary {
  background: var(--brand-accent) !important;
  color: var(--brand-accent-fg) !important;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 1rem 2.6rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#contact .btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.3);
  filter: brightness(1.05);
}

/* ── footer ──────────────────────────────────────────────────────────── */
.footer {
  /* 40%, not 18%. At 18% against a near-black base the brand hue was
     imperceptible, so every footer read as the same slab of charcoal whatever
     the palette. 40% is where the colour becomes legible while body text at
     #94a3b8 still clears 5.8:1 — checked across the darkest and lightest
     primaries the colour KB can produce. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) 40%, #080d1a) 0%, #050811 100%);
  color: #94a3b8;
  border-top: 3px solid var(--brand-primary);
  padding-block: calc(var(--step) * 8) calc(var(--step) * 5);
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  top: -3px; left: 10%; width: 140px; height: 3px;
  background: var(--brand-accent);
  box-shadow: 0 0 12px var(--brand-accent);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr 1.2fr;
  gap: calc(var(--step) * 5);
  margin-bottom: calc(var(--step) * 6);
}
/* ── Footer structure ────────────────────────────────────────────────────
   The footer is the one region whose content is almost entirely optional —
   a site with no phone, hours or socials has only a name to show. Left to
   one layout, every such site rendered an identical slab. These vary the
   structure rather than inventing content, so two sparse footers still read
   as two different businesses. */
/* `columns` is the DEFAULT footer_style and had no rules at all, so the most
   common value fell through to the bare `.footer__grid` — which is why the
   footer layout looked identical no matter what the theme chose. Four columns,
   which is what the name promises. */
[data-footer="columns"] .footer__grid {
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: calc(var(--step) * 6) calc(var(--step) * 5);
}
[data-footer="columns"] .footer__col h4 {
  padding-bottom: calc(var(--step) * 1.5);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 45%, transparent);
}
@media (max-width: 900px) {
  [data-footer="columns"] .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  [data-footer="columns"] .footer__grid { grid-template-columns: 1fr; }
}

[data-footer="stacked"] .footer__grid {
  grid-template-columns: 1fr;
  text-align: center;
  gap: calc(var(--step) * 3);
}
[data-footer="stacked"] .footer__social { justify-content: center; }
[data-footer="stacked"] .footer__contact-list { display: inline-block; text-align: left; }

/* The brand keeps a full column; everything else shares the rest. Reads as
   deliberate when there are only two columns of content to place. */
[data-footer="split"] .footer__grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr);
  gap: calc(var(--step) * 6);
}
[data-footer="split"] .footer__col:not(.footer__col--brand) {
  display: inline-block;
  vertical-align: top;
  min-width: 12rem;
  margin-right: calc(var(--step) * 4);
}

[data-footer="compact"] .footer__grid {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: calc(var(--step) * 3);
  margin-bottom: calc(var(--step) * 3);
}
[data-footer="compact"] .footer h3 { font-size: 1rem; }
[data-footer="compact"] .footer h4 { font-size: .78rem; letter-spacing: .06em; }
[data-footer="compact"] .footer__tagline { display: none; }

@media (max-width: 640px) {
  [data-footer="split"] .footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--step) * 4);
  }
}
@media (max-width: 640px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: calc(var(--step) * 4);
  }
}

.footer__col h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: calc(var(--step) * 1.5);
  letter-spacing: -0.01em;
}
.footer__col h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: calc(var(--step) * 2);
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: 0.5rem;
}
.footer__col h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--brand-accent);
  border-radius: 2px;
}

.footer__logo { margin-bottom: var(--step); }
.footer__logo svg { height: 36px; width: 36px; filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--brand-primary) 40%, transparent)); }

.footer__tagline {
  color: #94a3b8;
  font-size: 0.94rem;
  line-height: 1.6;
  margin-bottom: calc(var(--step) * 2);
}

.footer__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 1.5);
  font-size: 0.94rem;
}
.footer__contact-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #cbd5e1;
}
.footer__contact-list a {
  color: color-mix(in srgb, var(--brand-primary) 70%, #ffffff);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}
.footer__contact-list a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.footer__quick-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 1.5);
  font-size: 0.94rem;
}
.footer__quick-links a {
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer__quick-links a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer__hours {
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 1.2);
  font-size: 0.92rem;
  margin: 0;
}
.footer__hours > div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed color-mix(in srgb, var(--brand-primary) 20%, #1e293b);
  padding-bottom: 0.4rem;
}
.footer__hours dt { color: #94a3b8; font-weight: 500; }
.footer__hours dd { color: #f1f5f9; font-weight: 600; margin: 0; }

.footer__coverage {
  color: #94a3b8;
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: calc(var(--step) * 2);
}
.footer__badge {
  background: color-mix(in srgb, var(--brand-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 45%, transparent);
  padding: 0.55rem 1rem;
  border-radius: 8px;
  color: color-mix(in srgb, var(--brand-accent) 65%, #ffffff);
  font-size: 0.86rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-accent) 15%, transparent);
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--step);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  /* 44px, not 40: the minimum touch target (WCAG 2.2 AA, 2.5.8). An icon
     row is exactly where this gets shaved. */
  width: 44px; height: 44px; border-radius: 10px;
  background: color-mix(in srgb, var(--brand-primary) 18%, #111827);
  color: #f1f5f9;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 30%, #334155);
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.footer__social a:hover {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand-primary) 40%, transparent);
}

.footer__bottom {
  border-top: 1px solid color-mix(in srgb, var(--brand-primary) 20%, #1e293b);
  padding-top: calc(var(--step) * 3);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--step);
  font-size: 0.88rem;
  color: #64748b;
}
.footer__bottom p { margin: 0; color: #64748b; }

/* ── coming soon ────────────────────────────────────────────────────────── */
/* The launch page. Centred, generous, and deliberately sparse — it is the only
   page on the customer's domain for a few days, so it has to look finished
   while claiming nothing. */
/* ── the launch page ──────────────────────────────────────────────────────
   The only page that can go live honestly on day one, and for a while the only
   thing a customer's domain serves — so it carries the whole first impression.

   Dark, because a launch page is the one screen with no content to compete
   with and a deep ground makes a small amount of type feel deliberate rather
   than sparse. The *ornament is identical on every site* — the same two drifting
   auras and the same grid — and only its colour comes from the brand. That is
   the point: one composition, reviewed once, that cannot be got wrong per site.

   Every child takes `color: inherit` and separates itself with opacity rather
   than naming its own colour. On a dark ground a muted slate or a brand accent
   would be a contrast failure the gate reports by selector name, and it would
   fail differently for each of a hundred palettes. */
.coming-soon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--step) * 4) calc(var(--step) * 2);
  text-align: center;
  background-color: #08090e;
  color: #ffffff;
}
/* Atmospheric mesh aura: subtle ambient glow */
.coming-soon::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -25%;
  background:
    radial-gradient(45% 45% at 20% 25%,
      color-mix(in srgb, var(--brand-primary) 65%, transparent) 0%, transparent 65%),
    radial-gradient(40% 40% at 80% 75%,
      color-mix(in srgb, var(--brand-accent) 55%, transparent) 0%, transparent 65%);
  filter: blur(60px);
  opacity: .35;
  animation: aurora 24s ease-in-out infinite alternate;
}
/* Micro-dot constellation grid with soft radial mask */
.coming-soon::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / .08) 1px, transparent 0);
  background-size: 32px 32px;
  mask-image: radial-gradient(75% 65% at 50% 50%, #000 10%, transparent 85%);
  -webkit-mask-image: radial-gradient(75% 65% at 50% 50%, #000 10%, transparent 85%);
  pointer-events: none;
}
@keyframes aurora {
  from { transform: translate3d(-3%, -2%, 0) scale(0.98); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* Background image & overlay */
.coming-soon__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.coming-soon__bg-img {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.9) contrast(1.08);
  transform: scale(1);
  animation: launch-kenburns 32s ease-in-out infinite alternate;
}
.coming-soon__bg-img--generic {
  opacity: 1;
}
@keyframes launch-kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1%, -1%, 0); }
}
.coming-soon__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 90% 80% at 50% 48%,
      rgb(7 9 14 / .32) 0%,
      rgb(7 9 14 / .68) 100%),
    linear-gradient(180deg,
      rgb(7 9 14 / .2) 0%,
      transparent 25%,
      transparent 75%,
      rgb(7 9 14 / .6) 100%);
}

.coming-soon__inner {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* The showcase card: frosted luxury glass container */
.coming-soon__card {
  position: relative;
  border-radius: clamp(1.75rem, 3.5vw, 2.25rem);
  background: linear-gradient(180deg, rgb(14 18 28 / .78) 0%, rgb(9 12 20 / .9) 100%);
  border: 1px solid rgb(255 255 255 / .15);
  box-shadow:
    0 32px 80px -16px rgb(0 0 0 / .75),
    0 2px 8px rgb(0 0 0 / .35),
    inset 0 1px 0 rgb(255 255 255 / .24);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  padding: clamp(2.5rem, 5.5vw, 4rem) clamp(1.75rem, 4.5vw, 3.25rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Subtle top glow bar inside card */
.coming-soon__card-glow {
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .45), transparent);
  pointer-events: none;
}

/* Entrance stagger */
.coming-soon__card > * { animation: launch-rise .8s cubic-bezier(.16, 1, .3, 1) both; }
.coming-soon__badge { animation-delay: .04s; }
.coming-soon__headline { animation-delay: .12s; }
.coming-soon__sub { animation-delay: .2s; }
.coming-soon__countdown-deck { animation-delay: .28s; }
.coming-soon__contact { animation-delay: .36s; }

@keyframes launch-rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Live status pill badge */
.coming-soon__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 1.15rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / .08);
  border: 1px solid rgb(255 255 255 / .16);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 2px 8px rgb(0 0 0 / .2);
  margin-bottom: calc(var(--step) * 2.5);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.coming-soon__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgb(16 185 129 / .8);
  animation: coming-soon-radar 2.2s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes coming-soon-radar {
  0%   { box-shadow: 0 0 0 0 rgb(16 185 129 / .8); }
  70%  { box-shadow: 0 0 0 8px rgb(16 185 129 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(16 185 129 / 0); }
}

.coming-soon__badge-text {
  opacity: .95;
}

.coming-soon__badge-sep {
  opacity: .35;
  font-size: 0.8em;
}

.coming-soon__badge-city {
  opacity: .8;
  font-weight: 500;
}

/* Headline */
.coming-soon__headline {
  margin: 0 0 calc(var(--step) * 1.75);
  font-size: clamp(2.25rem, 5vw, 3.65rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
  color: #ffffff;
  background: linear-gradient(180deg, #ffffff 30%, rgb(255 255 255 / .82) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Subheadline */
.coming-soon__sub {
  margin: 0 auto calc(var(--step) * 3.5);
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.6;
  color: rgb(255 255 255 / .82);
  text-wrap: balance;
}

/* Countdown deck */
.coming-soon__countdown-deck {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(var(--step) * 4);
}

.coming-soon__countdown-header {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: calc(var(--step) * 2);
  color: rgb(255 255 255 / .65);
}

.coming-soon__countdown-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.coming-soon__countdown-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: inherit;
}

.countdown {
  width: 100%;
}

.countdown__units {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--step) * 1.5);
}

/* Glass tiles */
.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 5.8rem;
  padding: calc(var(--step) * 2.25) calc(var(--step) * 1.5) calc(var(--step) * 1.75);
  border-radius: 18px;
  background: linear-gradient(180deg, rgb(255 255 255 / .09) 0%, rgb(255 255 255 / .03) 100%);
  border: 1px solid rgb(255 255 255 / .15);
  box-shadow:
    0 12px 28px -4px rgb(0 0 0 / .35),
    inset 0 1px 0 rgb(255 255 255 / .18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #ffffff;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), border-color .2s ease;
}

.countdown__unit:hover {
  transform: translateY(-2px);
  border-color: rgb(255 255 255 / .28);
}

.countdown__unit b {
  font-size: clamp(2.2rem, 4.4vw, 3.25rem);
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  color: #ffffff;
}

.countdown__unit i {
  margin-top: 0.6rem;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .65);
}

.countdown__unit:last-child {
  border-color: color-mix(in srgb, var(--brand-primary) 50%, rgb(255 255 255 / .18));
}

.countdown__unit:last-child b {
  animation: launch-tick 1s ease-out infinite;
}

@keyframes launch-tick {
  0%   { opacity: .55; }
  18%  { opacity: 1; }
  100% { opacity: 1; }
}

.countdown__units[data-past="true"] .countdown__unit { opacity: 0.5; }

.countdown__overdue {
  margin: calc(var(--step) * 2) 0 0;
  font-weight: 600;
  color: inherit;
}

/* Contact bar */
.coming-soon__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(var(--step) * 1.25) calc(var(--step) * 1.5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.coming-soon__contact-item {
  display: inline-flex;
}

/* Interactive frosted action buttons */
.coming-soon__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0.75rem 1.65rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / .08);
  border: 1px solid rgb(255 255 255 / .16);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 4px 16px rgb(0 0 0 / .2);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all .2s cubic-bezier(.16, 1, .3, 1);
}

.coming-soon__btn:hover {
  transform: translateY(-2px);
  background: rgb(255 255 255 / .15);
  border-color: rgb(255 255 255 / .32);
  box-shadow: 0 8px 24px -4px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .28);
  color: #ffffff;
}

.coming-soon__btn:active {
  transform: translateY(0);
}

/* Primary accent button */
.coming-soon__btn--primary {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-primary) 90%, #ffffff 10%) 0%,
    var(--brand-primary) 100%);
  border-color: color-mix(in srgb, var(--brand-primary) 50%, #ffffff 50%);
  box-shadow:
    0 6px 24px -2px color-mix(in srgb, var(--brand-primary) 65%, transparent),
    inset 0 1px 0 rgb(255 255 255 / .35);
}

.coming-soon__btn--primary:hover {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-primary) 96%, #ffffff 4%) 0%,
    color-mix(in srgb, var(--brand-primary) 85%, #000000 15%) 100%);
  box-shadow:
    0 10px 32px -2px color-mix(in srgb, var(--brand-primary) 85%, transparent),
    inset 0 1px 0 rgb(255 255 255 / .45);
  border-color: color-mix(in srgb, var(--brand-primary) 35%, #ffffff 65%);
}

/* Location badge chip */
.coming-soon__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.75rem 1.4rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / .06);
  border: 1px solid rgb(255 255 255 / .12);
  color: rgb(255 255 255 / .85);
  font-size: 0.92rem;
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.coming-soon__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: .85;
}

/* Mobile responsive adjustments */
@media (max-width: 540px) {
  .coming-soon {
    padding: calc(var(--step) * 2) calc(var(--step) * 1.25);
  }
  .coming-soon__card {
    padding: calc(var(--step) * 3) calc(var(--step) * 1.5);
  }
  .countdown__units {
    gap: calc(var(--step) * 0.75);
  }
  .countdown__unit {
    min-width: 4.5rem;
    padding: calc(var(--step) * 1.25) calc(var(--step) * 0.75);
    border-radius: 14px;
  }
  .countdown__unit b {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
  }
  .countdown__unit i {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }
  .coming-soon__contact {
    flex-direction: column;
    width: 100%;
  }
  .coming-soon__contact-item {
    width: 100%;
  }
  .coming-soon__btn,
  .coming-soon__chip {
    width: 100%;
  }
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  .coming-soon::before,
  .coming-soon__bg-img,
  .coming-soon__card > *,
  .coming-soon__badge-dot,
  .countdown__unit:last-child b {
    animation: none;
  }
  .coming-soon__btn {
    transition: none;
  }
}


/* ── section note / intro ───────────────────────────────────────────── */
/* A price caveat, a required disclosure, a line above a set of options. These
   are contract fields the studio has always offered; until now no template
   printed them, so whatever the customer typed went nowhere. */
.section__intro {
  margin: 0 0 calc(var(--step) * 3);
  max-width: 62ch;
  color: #475569;
  line-height: 1.6;
}
.section__note {
  margin: calc(var(--step) * 2) 0 0;
  max-width: 70ch;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #475569;
}

/* ── hero: promo cards ──────────────────────────────────────────────── */
/* Arrangement comes from `theme.banner_style`; the card itself is one
   composition in three treatments. Each treatment sets `background` AND
   `color` on the card root and every child inherits via currentColor —
   `check_surface_contrast` walks descendants against the background their
   ancestor paints, and a child that names its own colour is checked against
   it by selector name. */

.hero__cards {
  display: grid;
  gap: calc(var(--step) * 2);
  margin-top: calc(var(--step) * 4);
}
.hero__cards--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero__cards--stack { grid-template-columns: minmax(0, 1fr); }
.hero__cards--feature { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.hero__cards--ribbon { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
@media (max-width: 760px) {
  .hero__cards--duo,
  .hero__cards--feature,
  .hero__cards--ribbon { grid-template-columns: minmax(0, 1fr); }
}

.promo {
  /* Its own alignment. `hero--centred` centres `.hero__copy`, which the cards
     sit inside, so they inherited it — an icon pinned left above centred text,
     which reads as a mistake rather than a choice. A card is a card in every
     hero layout. */
  text-align: left;
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  min-height: 13rem;
  padding: calc(var(--step) * 3);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform var(--motion, .25s) ease, box-shadow var(--motion, .25s) ease;
}
.promo:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) { .promo { transition: none; } }

/* The offer card. Needs no photograph, which is what lets a first build read
   as finished before anyone has supplied one. */
.promo--solid { background: var(--brand-primary); color: #ffffff; }
/* A border, not just a fill: the tint sits on a near-white hero band, so
   without an edge the card dissolves into the page and stops reading as a
   card at all. */
.promo--tint {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}
.promo--photo { background: var(--brand-primary); color: #ffffff; }

/* A real photograph, behind a scrim. Same reasoning as `.hero--image`: never
   rely on the photo happening to be dark enough. */
.promo__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, rgb(15 23 42 / .82) 0%, rgb(15 23 42 / .58) 100%);
}
.promo__body { display: block; }
.promo .card__icon { display: block; margin-bottom: calc(var(--step) * 1.5); opacity: .9; }
.promo__eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .78;
}
.promo__headline {
  display: block;
  margin-top: calc(var(--step) * 1.5);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 400;
}
.promo__emphasis { font-weight: 800; }
.promo__text {
  display: block;
  margin-top: calc(var(--step) * 1.5);
  font-size: .95rem;
  line-height: 1.5;
  opacity: .88;
}
/* A text link, never a fourth `.btn--primary` — the page budget is three, and
   the hero already spends two. */
.promo__cta {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  /* 44px minimum touch target — WCAG 2.2 AA 2.5.8. */
  min-height: 44px;
  margin-top: calc(var(--step) * 2);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.promo__cta::after { content: "\2192"; transition: transform .2s ease; }
.promo:hover .promo__cta::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .promo__cta::after { transition: none; } }

/* Cards arrive with the section they sit in; the stagger is CSS only, hung on
   the reveal class site.js already applies. */
.reveal-on-scroll .promo { transition-delay: 0ms; }
.reveal-on-scroll.revealed .promo:nth-child(2) { transition-delay: 90ms; }
.reveal-on-scroll.revealed .promo:nth-child(3) { transition-delay: 180ms; }

.hero__call-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--step) * 2);
  padding: calc(var(--step) * 2.5);
  border-radius: calc(var(--radius) * 1.25);
  background: var(--surface);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, transparent);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.08);
  margin-top: calc(var(--step) * 2.5);
}
.hero__call-text { flex: 1 1 16rem; min-width: 0; }
.hero__call-text h2 { margin: 0 0 calc(var(--step) * 0.5); font-size: 1.15rem; line-height: 1.25; color: var(--text); font-weight: 700; }
.hero__call-text p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text-muted); }

.hero__call-cta { flex: 0 0 auto; }
.hero__call-btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* 44px minimum touch target — WCAG 2.2 AA 2.5.8. */
  min-height: 44px;
  padding: 0 calc(var(--step) * 2.5);
  border-radius: var(--radius);
  background: var(--brand-accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hero__call-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px color-mix(in srgb, var(--brand-accent) 55%, transparent);
}

/* ── footer: intro, cards, bottom row ───────────────────────────────── */
/* The `cards` footer style (theme.FooterStyle). The column grid above is
   data-driven off brand fields; this one is a three-badge layout for sites
   whose footer is the primary contact surface. Both read the same section
   fields — only the arrangement differs, so a sparse footer still differs
   between two businesses. */

.footer__intro {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto calc(var(--step) * 4);
}
.footer__pretitle {
  margin: 0 0 calc(var(--step) * 0.5);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-accent);
}
.footer__heading {
  margin: 0 0 var(--step);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  color: #f8fafc;
}
.footer__lead { margin: 0; color: #94a3b8; line-height: 1.6; }

.footer__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--step) * 3);
}
@media (max-width: 900px) { .footer__cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer__cards { grid-template-columns: 1fr; } }

.footer__card {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--step) * 1.5);
}
.footer__card-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 56px keeps the icon clear of the 44px touch floor even though the badge
     itself is decorative (aria-hidden) and never a target. */
  width: 56px; height: 56px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand-primary) 22%, #111827);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 34%, #334155);
  color: var(--brand-accent);
}
/* The three badges are distinguished by hue, not by shape, so the row still
   reads as one set. Each keeps its own modifier so a theme can diverge them. */
.footer__card-badge--locate  { color: var(--brand-accent); }
.footer__card-badge--contact { color: var(--brand-accent); }
.footer__card-badge--social  { color: var(--brand-accent); }

.footer__card-body { min-width: 0; }
.footer__card-body h3 {
  margin: 0 0 var(--step);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #f1f5f9;
}
.footer__card-body p { margin: 0 0 calc(var(--step) * 0.5); color: #94a3b8; line-height: 1.55; }
.footer__card-body p strong { color: #cbd5e1; font-weight: 600; }
.footer__card-body a { color: #e2e8f0; text-decoration: none; }
.footer__card-body a:hover { color: var(--brand-accent); text-decoration: underline; }
.footer__dash { color: var(--brand-accent); margin-left: 0.35em; letter-spacing: -0.1em; }

.footer__social-lead { margin: 0 0 var(--step); color: #94a3b8; }
.footer__social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--step);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__social-links a {
  display: inline-flex; align-items: center; justify-content: center;
  /* Same 44px floor as .footer__social — WCAG 2.2 AA 2.5.8. */
  width: 44px; height: 44px; border-radius: 10px;
  background: color-mix(in srgb, var(--brand-primary) 18%, #111827);
  color: #f1f5f9;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 30%, #334155);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.footer__social-links a:hover {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  transform: translateY(-2px);
}

.footer__bottom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--step);
  width: 100%;
}
.footer__links { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; }
.footer__links a { color: #94a3b8; text-decoration: none; }
.footer__links a:hover { color: var(--brand-accent); text-decoration: underline; }
.footer__credit {
  width: 100%;
  margin-top: calc(var(--step) * 1.5);
  padding-top: calc(var(--step) * 1.5);
  border-top: 1px solid color-mix(in srgb, var(--brand-primary) 15%, #1e293b);
  font-size: 0.82rem;
  color: #64748b;
  text-align: center;
}

/* ── trust bar: two-part items ──────────────────────────────────────── */
/* `Title: body` splits into a bolded lead and a normal remainder. The split
   is presentational only — the claim itself is whatever the customer wrote. */
.trust__item-title { display: block; color: inherit; font-weight: 700; }
.trust__item-body { display: block; opacity: 0.85; }

/* `TrustBarSection.item_hrefs` (opt-in, contract docstring) — a trust item
   that links out. Fills the `<li>` pill rather than sitting inside it as
   ordinary inline text, so the whole pill is the click target.

   `flex-direction: column`, not the default row: a two-part item's title and
   body (above) are already blocks meant to stack, the same as they do as
   bare children of `<li>` when there is no href. Row would lay them out side
   by side instead — the flex container's direction, not either child's own
   `display: block`, is what actually governs that. */
.trust__item-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: inherit;
  color: inherit;
  text-decoration: none;
}

/* ── mobile callbar ─────────────────────────────────────────────────── */
.callbar { display: none; }
@media (max-width: 860px) {
  .nav .btn { display: none; }
}
@media (max-width: 700px) {
  .nav { position: relative; }
  /* A left/right flex row abandons the whole point of `logo_centre` the
     moment the toggle button enters the row — the logo just becomes
     left-aligned like every other layout, on a site that specifically opted
     into a centred one. Absolutely centring the logo over a plain flex row
     (rather than a grid the toggle and the logo both have to be placed into
     correctly) means there is nothing for the count or order of the row's
     other children to get wrong — the logo does not care what else is there. */
  .nav--logo_centre .nav__inner {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: calc(var(--step) * 2);
  }
  .nav--logo_centre .nav__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .nav--logo_centre .nav__cta { display: none; }
  .nav--logo_centre .nav__toggle {
    margin-left: 0;
  }
  .nav__links { display: none; }
  .nav__brand { font-size: 1rem; }
  .nav__brand--logo .nav__logo:not(.nav__logo--mark) { display: none; }
  .nav__brand--logo .nav__logo--mark { display: inline-flex; }
  .nav__toggle { display: block; }
  .nav__links[data-open="true"] { display: flex; flex-direction: column; background: var(--canvas, #ffffff); }
  [data-mobile-nav="drawer"] .nav__links {
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(78vw, 320px);
    transform: translateX(100%); transition: transform .22s ease;
    padding: calc(var(--step) * 9) calc(var(--step) * 4);
    border-inline-start: var(--border-weight, 1px) solid var(--border);
    box-shadow: var(--shadow); z-index: 70; gap: calc(var(--step) * 3);
    background: var(--canvas, #ffffff);
  }
  [data-mobile-nav="drawer"] .nav__links[data-open="true"] { display: flex; transform: translateX(0); }

  /* An open panel must escape the header, and be readable once it has.
     Both of these defend the drawer against `custom_css` styling the DESKTOP
     nav, which is the same element on a different background — the nav bar is
     usually dark and the drawer is `--canvas`, so a rule written for one is
     wrong for the other and nothing said so.

     1. `backdrop-filter`, `filter` and `transform` on the header each make it
     the containing block for `position: fixed` descendants. The drawer's
     `top: 0; bottom: 0` then measures the HEADER rather than the viewport, so
     the panel is a header-high box and its last links spill onto the page
     behind it. Dropped only while the menu is open: a blur behind a header
     exists for content scrolling under it, and nothing is scrolling under a
     full-height drawer.

     2. The links take the drawer's own foreground with `!important`, because a
     desktop rule that set them light — correct on a dark bar — renders them
     invisible on this one. */
  /* An open panel must escape the header, and be readable once it has.
     Both of these defend the drawer against `custom_css` styling the DESKTOP
     nav, which is the same element on a different background — the nav bar is
     usually dark and the drawer is `--canvas`, so a rule written for one is
     wrong for the other and nothing said so.

     1. `backdrop-filter`, `filter` and `transform` on the header each make it
     the containing block for `position: fixed` descendants. The drawer's
     `top: 0; bottom: 0` then measures the HEADER rather than the viewport, so
     the panel is a header-high box and its last links spill onto the page
     behind it. Reset unconditionally on mobile and when open.

     2. The links take the drawer's own foreground with maximum specificity,
     because a desktop rule that set them light — correct on a dark bar —
     renders them invisible on this one. */
  header.nav,
  .nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  header.nav:has(.nav__links[data-open="true"]),
  .nav:has(.nav__links[data-open="true"]) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
  }
  [data-mobile-nav="drawer"] .nav__links {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 9999;
    overflow-y: auto;
    box-sizing: border-box;
  }
  [data-mobile-nav="drawer"] .nav__toggle,
  [data-mobile-nav="fullscreen"] .nav__toggle {
    position: relative;
    z-index: 10000;
  }
  html body header.nav [data-mobile-nav="drawer"] .nav__links[data-open="true"] a,
  html body header.nav [data-mobile-nav="fullscreen"] .nav__links[data-open="true"] a,
  html body header.nav [data-mobile-nav="dropdown"] .nav__links[data-open="true"] a,
  [data-mobile-nav="drawer"] .nav__links[data-open="true"] a,
  [data-mobile-nav="fullscreen"] .nav__links[data-open="true"] a,
  [data-mobile-nav="dropdown"] .nav__links[data-open="true"] a {
    color: var(--text, #0f172a) !important;
    display: block;
  }

  /* The theme picks one of three behaviours, so all three need styling — a
     variant with no CSS silently falls back to another one, which is
     indistinguishable from it not existing. */
  [data-mobile-nav="dropdown"] .nav__links[data-open="true"] {
    position: absolute; inset-inline: 0; top: 100%;
    border-bottom: var(--border-weight, 1px) solid var(--border);
    padding: calc(var(--step) * 3);
    background: var(--canvas, #ffffff);
    box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.12);
    z-index: 90;
  }
  [data-mobile-nav="fullscreen"] .nav__links[data-open="true"] {
    position: fixed; inset: 0; z-index: 70;
    justify-content: center; align-items: center; gap: calc(var(--step) * 4);
    font-size: 1.35rem; padding: calc(var(--step) * 4);
    background: var(--canvas, #ffffff);
  }
  /* Above the open panel, or the control that closes it is underneath it and
     the menu cannot be dismissed. */
  [data-mobile-nav="fullscreen"] .nav__toggle,
  [data-mobile-nav="drawer"] .nav__toggle { position: relative; z-index: 80; }
  .callbar {
    display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    gap: 1px; background: var(--border);
  }
  .callbar a { flex: 1; padding: 1rem; text-align: center; font-weight: 700; text-decoration: none; background: var(--brand-primary); color: var(--brand-primary-fg); }
  .callbar a + a { background: var(--canvas); color: var(--brand-primary-text); }
  body { padding-bottom: 4rem; }
}


/* ── restored guarantees ──────────────────────────────────────────────
   These have tests and recorded reasons; they were lost in a stylesheet
   rewrite. Re-added here rather than reverting the rewrite, because the visual
   work is wanted and these are not in conflict with it. */

/* Alternating rhythm: presentation only. Reversing rows in the template would
   reverse the reading order too. */
.services__rows { display: grid; gap: calc(var(--step) * 3); }
.services__row {
  padding: calc(var(--step) * 4); border-radius: var(--radius);
  border: var(--border-weight, 1px) solid var(--border);
}
.services__row h3 { margin: 0 0 var(--step); }
.services__row p { margin: 0; color: var(--text-muted); max-width: var(--measure); }
.services__row:nth-child(even) { background: var(--surface); }
@media (min-width: 861px) {
  .services__row:nth-child(even) { margin-left: 12%; }
  .services__row:nth-child(odd) { margin-right: 12%; }
}

/* The split hero's contact card. On a solid brand band it is the one light
   surface, so it must not inherit that section's light foreground. */
.hero__card {
  border: var(--border-weight, 1px) solid var(--border);
  border-radius: var(--radius);
  padding: calc(var(--step) * 4);
  background: var(--canvas);
  box-shadow: var(--shadow);
}
.hero__card-label {
  margin: 0 0 var(--step); font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.hero__card-tel {
  display: inline-block; font-family: var(--font-heading); font-weight: 700;
  font-size: calc(1.35rem * var(--scale)); line-height: 1.1;
  color: var(--brand-primary-text); text-decoration: none;
}
.hero__card-tel:hover { text-decoration: underline; }
.hero__card p { margin-top: var(--step); color: var(--text-muted); }
.hero__card-where { font-size: .95rem; }
.hero[data-hero="band"] .hero__card { border-color: transparent; }
.hero[data-hero="band"] .hero__card,
.hero[data-hero="band"] .hero__card p,
.hero[data-hero="band"] .hero__card a { color: var(--text); }
.hero[data-hero="band"] .hero__card-tel { color: var(--brand-primary-text); }

/* Cross-page navigation, ignored where unsupported (§9.6). */
@view-transition { navigation: auto; }

/* ── trust bar variants ──────────────────────────────────────────────────
   Arrangement only; the claims are identical in all four. Doubled class
   selectors (.trust.trust--x) so a variant outranks the base rules above
   regardless of source order — the specificity collision that quietly undoes
   spacing is the easiest one to write here. */
.trust.trust--inline_rule ul {
  gap: 0; justify-content: center;
}
.trust.trust--inline_rule li {
  background: none; border: 0; box-shadow: none; border-radius: 0;
  color: #fff;
  padding: 0.25rem calc(var(--step) * 2.5);
  border-inline-start: 1px solid rgb(255 255 255 / 0.28);
}
.trust.trust--inline_rule li:first-child { border-inline-start: 0; }
.trust.trust--inline_rule li:hover { transform: none; box-shadow: none; }
.trust.trust--inline_rule li::before {
  background: none; color: var(--brand-accent-fg); width: auto; height: auto;
  opacity: 0.75;
}

.trust.trust--stat_columns { padding-block: calc(var(--step) * 5); }
.trust.trust--stat_columns ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: calc(var(--step) * 3); text-align: center; justify-content: center;
}
.trust.trust--stat_columns li {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; background: none; border: 0; box-shadow: none;
  border-radius: 0; color: #fff;
  font-size: 1.02rem; line-height: 1.45; padding: 0;
}
.trust.trust--stat_columns li:hover { transform: none; box-shadow: none; }
.trust.trust--stat_columns li::before {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto calc(var(--step) * 1.5);
  width: 32px; height: 32px; font-size: 15px; flex-shrink: 0;
}
.trust.trust--stat_columns .trust__item-title {
  display: block; font-weight: 700; margin-bottom: calc(var(--step) * 0.5);
}
.trust.trust--stat_columns .trust__item-body {
  display: block; opacity: 0.9; font-size: 0.92rem;
}

.trust.trust--ribbon { padding-block: calc(var(--step) * 1.75); }
.trust.trust--ribbon ul { gap: calc(var(--step) * 1.5); }
.trust.trust--ribbon li {
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.22);
  box-shadow: none; color: #fff;
  font-size: 0.85rem; padding: 0.3rem 0.9rem;
}
.trust.trust--ribbon li:hover { transform: none; box-shadow: none; }

/* ── hero: stat_band ─────────────────────────────────────────────────────
   The proof point is already written as separated claims, so it splits into a
   row of tiles without asking the customer for anything new. */
.hero--stat_band .hero__inner { text-align: center; }
.hero--stat_band .hero__copy { margin-inline: auto; }
.hero--stat_band .cta-row { justify-content: center; }
.hero__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: calc(var(--step) * 2);
  list-style: none; padding: 0;
  margin-block: calc(var(--step) * 5) 0;
  border-top: 1px solid var(--border);
  padding-top: calc(var(--step) * 4);
}
.hero__stats li {
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 600; line-height: 1.35;
  color: var(--brand-primary-text);
  text-align: center;
}

/* ── hero: offset_card ───────────────────────────────────────────────────
   Depth without a photograph: the copy sits on a raised surface proud of the
   band rather than floating in it. */
.hero--offset_card .hero__copy {
  background: var(--surface);
  border: var(--border-weight) solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.35);
  max-width: 46rem;
  margin-block-end: calc(var(--step) * -6);
}
.hero--offset_card { padding-block-end: calc(var(--step) * 10); }

/* ── services: feature_first ─────────────────────────────────────────────
   The lead service takes a full-width turn; the rest compact beneath it. */


@media (max-width: 640px) {
  .hero--offset_card .hero__copy { margin-block-end: 0; }
  .hero--offset_card { padding-block-end: calc(var(--step) * 5); }
}

/* ── about, faq, contact, service area: presentation variants ─────────────
   The last four sections every site renders had one composition each, so the
   bottom two thirds of every page looked the same whatever the theme chose.
   Doubled class selectors so a variant outranks the base rules regardless of
   source order. */
/* A page repeating the about section as program/feature rows (id="about-N",
   suffixed because more than one instance is present — see about.html) gets
   its own modest media treatment and an alternating side, independent of
   the single, full-bleed #about styling used by the "Our Organization" page. */
section[id^="about-"] .about__media {
  position: relative;
  align-self: stretch;
}
section[id^="about-"] .about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 20px 40px -14px rgba(15, 23, 42, 0.22);
}
.about--media-left .about__media { order: -1; }
@media (max-width: 900px) {
  section[id^="about-"] .wrap.grid.grid--2 { grid-template-columns: minmax(0, 1fr); }
  .about--media-left .about__media { order: 0; }
}

.about--two_column .prose > p {
  /* Presentation only — CSS columns leave reading order and the outline
     untouched, so this cannot change what a screen reader announces. */
  columns: 2 22rem;
  column-gap: calc(var(--step) * 5);
}
.about--stat_side .wrap {
  display: grid; gap: calc(var(--step) * 5);
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  align-items: start;
}
.about__facts {
  border-inline-start: 3px solid var(--brand-accent);
  padding-inline-start: calc(var(--step) * 3);
  display: grid; gap: calc(var(--step) * 3);
}
.about__facts p { margin: 0; line-height: 1.5; }
.about__facts span {
  display: block;
  font-size: 0.72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.35rem;
}
.about__eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 calc(var(--step) * 0.5) 0;
}
.about__cta { margin-top: calc(var(--step) * 2); display: inline-flex; width: fit-content; }

.faq--open_list .faq dd { display: block; }
.faq--two_column .faq {
  display: grid; gap: calc(var(--step) * 4);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  align-items: start;
}
.faq--two_column .faq dd { display: block; }

/* `#contact` is a full-bleed brand band with `text-align: center`, so a
   two-column split was never going to sit right in it: the form took 58% of
   the grid and read as mis-aligned rather than placed. One centred column.
   The business's details are NOT repeated under the form — they are in the
   footer, and saying them twice on one screen reads as padding. */
.contact--split_details .wrap { display: block; }


.contact__fallback-wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  grid-column: 1 / -1;
}
.embed__fallback {
  background: var(--surface);
  color: var(--text);
  padding: calc(var(--step) * 4) calc(var(--step) * 5);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(var(--step) * 1.5);
  width: 100%;
  box-sizing: border-box;
}
.embed__fallback p {
  margin: 0;
  font-size: 1.05rem;
}
.embed__fallback p a:not(.btn) {
  color: inherit;
  text-decoration: underline;
}
.embed__fallback .btn {
  width: 100%;
  max-width: 320px;
}

.contact--banner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 92%, #000), var(--brand-primary));
  color: #fff;
}
.contact--banner h2 { color: #fff; }
.contact--banner .embed__fallback {
  background: var(--surface); color: var(--text);
  padding: calc(var(--step) * 4); border-radius: var(--radius);
}

.area--chips .service-area__list {
  display: flex; flex-wrap: wrap; gap: calc(var(--step) * 1.5);
  list-style: none; padding: 0;
}
.area--chips .service-area__list li {
  padding: 0.4rem 1rem; border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.9rem; font-weight: 600;
}
.service-area__prose {
  font-size: clamp(1.02rem, 1.7vw, 1.15rem);
  line-height: 1.6; max-width: 60ch;
}

@media (max-width: 860px) {
  .about--stat_side .wrap,
  .contact--split_details .wrap { grid-template-columns: 1fr; }
  .about--two_column .prose > p { columns: 1; }
}

/* ── media ───────────────────────────────────────────────────────────────
   A service card, a team member and a video all work with no photograph,
   because most new customers have none. What follows styles the case where
   they do, and the substitute where they do not. */
.card__media {
  width: 100%; height: auto; display: block;
  border-radius: calc(var(--radius) * 0.75);
  margin-bottom: calc(var(--step) * 2.5);
}
.team__photo {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); margin-bottom: calc(var(--step) * 2);
}
.team__monogram {
  /* A monogram rather than a stock headshot of somebody who does not work
     here. Decorative and aria-hidden: the name follows it as real text. */
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  margin: 0 0 calc(var(--step) * 2);
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
  color: var(--brand-primary-text);
  font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700;
}
.team__role {
  font-size: 0.85rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.team--rows .grid { grid-template-columns: 1fr; }
.team--rows .card { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--step) * 3); align-items: start; }
.team--rows .team__photo { width: 120px; }
.team--compact .team__photo, .team--compact .team__monogram { display: none; }

/* A single member with a real photo reads as its own profile rather than a
   card in a row: the name centred above, the photo at a fixed size on the
   left, the bio beside it on the right — a portrait layout, not a stretched
   background image. */
.team--rows .card:only-child:has(> .team__photo) {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  grid-template-areas: "name name" "photo bio";
  gap: calc(var(--step) * 1) calc(var(--step) * 4);
  align-items: start;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.team--rows .card:only-child:has(> .team__photo) > h3 {
  grid-area: name;
  text-align: left;
  margin-bottom: calc(var(--step) * 3);
}
.team--rows .card:only-child:has(> .team__photo) > .team__role {
  display: none;
}
.team--rows .card:only-child:has(> .team__photo) > .team__photo {
  grid-area: photo;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.25);
}
.team--rows .card:only-child:has(> .team__photo) > p:not(.team__role) {
  grid-area: bio;
  align-self: start;
  text-align: left;
  white-space: pre-line;
  max-width: none;
}
@media (max-width: 700px) {
  .team--rows .card:only-child:has(> .team__photo) {
    grid-template-columns: 1fr;
    grid-template-areas: "name" "photo" "bio";
  }
}

.video { position: relative; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
.video__poster { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.video__note { color: var(--text-muted); font-size: 0.9rem; margin-top: calc(var(--step) * 2); }

/* ── vertical-specific section variants ──────────────────────────────────
   Seeded rather than chosen: whether a gallery is a grid or a mosaic needs no
   judgement about the business, and the seed already differentiates two
   competitors. Doubled selectors so a variant outranks its base rules. */
.gallery--mosaic .grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-auto-rows: 12rem; }
.gallery--mosaic .grid > *:nth-child(4n+1) { grid-row: span 2; }
.gallery--mosaic img { width: 100%; height: 100%; object-fit: cover; }
.gallery--strip .grid { display: flex; overflow-x: auto; gap: calc(var(--step) * 2); scroll-snap-type: x mandatory; }
.gallery--strip .grid > * { flex: 0 0 min(22rem, 80%); scroll-snap-align: start; }

.pricing-plans--comparison .grid { grid-template-columns: 1fr; }
.pricing-plans--comparison .card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--step) * 3); align-items: center; }
.pricing-plans--stacked .grid { grid-template-columns: 1fr; max-width: 44rem; margin-inline: auto; }

.process-timeline__cta {
  display: flex;
  justify-content: center;
  /* Overrides the site-wide `p, li { max-width: var(--measure) }` readability
     cap — right for a paragraph of prose, wrong here: it narrowed this `<p>`
     itself well below `.wrap`'s width, and a block element with no
     auto-margins sits at its container's left edge by default. `justify-
     content: center` was faithfully centering the button inside that
     narrowed, left-stuck box, not in the row. */
  max-width: none;
  margin-top: calc(var(--step) * 5);
}
.process-timeline--horizontal ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12rem, 1fr); overflow-x: auto; gap: calc(var(--step) * 3); }
.process-timeline--numbered li::marker { font-family: var(--font-heading); font-weight: 700; color: var(--brand-accent); }

/* marquee → steps scroll right-to-left on a loop. The track holds the set
   twice; -50% is exactly one set, so the wrap is seamless. Pauses on hover and
   on keyboard focus; prefers-reduced-motion stops it and leaves a scroll. */
.process-timeline--marquee .process-timeline__marquee {
  overflow-x: auto;
  margin-inline: calc(var(--step) * -3);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.process-timeline--marquee .process-timeline__marquee::-webkit-scrollbar { display: none; }
.process-timeline--marquee .process-timeline__track {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  width: max-content;
  gap: calc(var(--step) * 4);
  padding: calc(var(--step) * 2) calc(var(--step) * 3);
  margin: 0;
  animation: process-timeline-marquee 55s linear infinite;
}
.process-timeline--marquee .process-timeline__track > .card {
  flex: 0 0 clamp(16rem, 22vw, 20rem);
}
.process-timeline--marquee .process-timeline__marquee:hover .process-timeline__track,
.process-timeline--marquee .process-timeline__marquee:focus-within .process-timeline__track {
  animation-play-state: paused;
}
@keyframes process-timeline-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .process-timeline--marquee .process-timeline__track { width: auto; animation: none; }
  .process-timeline--marquee .process-timeline__marquee { -webkit-mask-image: none; mask-image: none; }
}

.reviews--feature .grid > *:first-child { grid-column: 1 / -1; font-size: 1.1rem; }
.reviews--column .grid { grid-template-columns: 1fr; max-width: 46rem; margin-inline: auto; }

.credentials--checklist ul { list-style: none; padding: 0; display: grid; gap: calc(var(--step) * 2); }
.credentials--checklist li::before { content: "✓"; color: var(--brand-accent); font-weight: 700; margin-inline-end: .6rem; }
.credentials--cards ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: calc(var(--step) * 3); list-style: none; padding: 0; }
.credentials--cards li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--step) * 3); }

.price-list--leader li { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: baseline; }
.price-list--leader li::after { content: ""; border-bottom: 1px dotted var(--border); }
.price-list--grouped ul { columns: 2 20rem; column-gap: calc(var(--step) * 5); }

/* ── services rhythms ────────────────────────────────────────────────────
   Every rhythm is visual. `list` used to emit a bare <ul> with no styling at
   all — browser default bullets — which read as an unfinished document rather
   than a section of a site. The image is what makes a card a card, so it is
   carried in all of them and the scaffold supplies a placeholder. */
.services__img { display: block; width: 100%; height: auto; object-fit: cover; }
.services__img--wide {
  aspect-ratio: 3 / 2;
  border-radius: calc(var(--radius) * 0.75);
  margin-bottom: calc(var(--step) * 2.5);
}
.services__img--thumb {
  width: 148px; aspect-ratio: 3 / 2; flex: 0 0 auto;
  border-radius: calc(var(--radius) * 0.6);
}
.services__img--round {
  width: 128px; height: 128px; border-radius: 50%;
  margin: 0 auto calc(var(--step) * 2.5);
}

/* list → horizontal bars, image left */
.services--list .services__rows { list-style: none; padding: 0; display: grid; gap: calc(var(--step) * 3); }
.services--list .services__rows > li {
  display: flex; gap: calc(var(--step) * 3); align-items: flex-start;
  background: var(--surface);
  border: var(--border-weight) solid var(--border);
  border-radius: var(--radius);
  padding: calc(var(--step) * 3);
}
.services--list .services__rows h3 { margin-top: 0; }

/* bubbles → circular mark, centred copy */
.services--bubbles .services__bubble { text-align: center; }
.services--bubbles .services__bubble p { margin-inline: auto; max-width: 34ch; }

/* marquee → cards scroll right-to-left on a loop. The track holds the set
   twice; -50% is exactly one set, so the wrap is seamless. Pauses on hover and
   on keyboard focus; prefers-reduced-motion stops it and leaves a scroll. */
.services--marquee .services__marquee {
  overflow-x: auto;
  margin-inline: calc(var(--step) * -3);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.services--marquee .services__marquee::-webkit-scrollbar { display: none; }
.services--marquee .services__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: calc(var(--step) * 4);
  padding: calc(var(--step) * 2) calc(var(--step) * 3);
  animation: services-marquee 60s linear infinite;
}
.services--marquee .services__track > .card {
  flex: 0 0 clamp(18rem, 24vw, 22rem);
}
.services--marquee .services__marquee:hover .services__track,
.services--marquee .services__marquee:focus-within .services__track {
  animation-play-state: paused;
}
@keyframes services-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .services--marquee .services__track { width: auto; animation: none; }
  .services--marquee .services__marquee { -webkit-mask-image: none; mask-image: none; }
}

/* alternating → full-width rows, side swapping */
.services--alternating .services__alt { display: grid; gap: calc(var(--step) * 5); }
.services--alternating .services__row {
  display: grid; gap: calc(var(--step) * 4); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.services--alternating .services__row:nth-child(even) .services__img { order: 2; }
.services--alternating .services__row:nth-child(even) > div { order: 1; }
.services--alternating .services__img--wide { margin-bottom: 0; }

/* feature_first → lead hero card, rest compact beside or below */
.services__feature {
  display: grid; gap: calc(var(--step) * 4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.services__feature .card--lead {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 12%, var(--surface)), var(--surface));
  border-left: 4px solid var(--brand-primary);
}
.services__feature .card--lead h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.services__feature .card--lead p { max-width: 60ch; }
/* `ServiceItem.href` (opt-in, contract docstring) wraps a card's whole body in
   an anchor. `display: contents` so the link takes no box of its own and the
   card's existing flex column layout is unaffected — a normal `display: block`
   link here would flatten `.card`'s flex children into whatever the link's own
   box does instead. */
.services__feature .card .card__link {
  display: contents;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

@media (min-width: 840px) {
  .services--feature_first .services__feature {
    grid-template-columns: 1.25fr 1fr 1fr;
    grid-auto-rows: minmax(170px, auto);
  }
  .services--feature_first .services__feature .card--lead {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    min-height: 460px;
    padding: calc(var(--step) * 4);
    border-left: 0;
  }
  .services--feature_first .services__feature .card--lead .services__img--wide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    margin: 0;
    border-radius: 0;
  }
  .services--feature_first .services__feature .card--lead::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.88) 100%);
    z-index: 1;
  }
  .services--feature_first .services__feature .card--lead h3,
  .services--feature_first .services__feature .card--lead p {
    position: relative;
    z-index: 2;
    color: #ffffff;
  }
  .services--feature_first .services__feature .card--lead h3 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
  }
  .services--feature_first .card:nth-child(2) { background: color-mix(in srgb, var(--brand-accent) 8%, var(--surface)); }
  .services--feature_first .card:nth-child(3) { background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface)); }
  .services--feature_first .card:nth-child(4) { background: color-mix(in srgb, var(--brand-accent) 12%, var(--surface)); }
  .services--feature_first .card:nth-child(5) { background: color-mix(in srgb, var(--brand-primary) 9%, var(--surface)); }
  .services--feature_first .card:nth-child(6) {
    grid-column: 2 / span 2;
    background: color-mix(in srgb, var(--brand-accent) 14%, var(--surface));
  }
}

@media (max-width: 640px) {
  .services--list .services__rows > li { flex-direction: column; }
  .services--list .services__img--thumb { width: 100%; }
  .services--alternating .services__row { grid-template-columns: 1fr; }
  .services--alternating .services__row:nth-child(even) .services__img,
  .services--alternating .services__row:nth-child(even) > div { order: unset; }
}

/* ── list-shaped sections ────────────────────────────────────────────────
   Amenities, conditions treated and opening hours were laid out with inline
   `style` attributes. Not unstyled, but out of the theme's reach: they could
   not respond to corner, border weight or surface, so they stayed plain text
   in a grid while every section around them changed. Inline styles are also
   invisible to the check that finds unstyled classes, which is how they sat
   here unnoticed. */
.chip-list {
  display: flex; flex-wrap: wrap; gap: calc(var(--step) * 1.5);
  list-style: none; padding: 0; margin: 0;
}
.chip-list > li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  border: var(--border-weight) solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 600; font-size: .93rem;
}
.chip-list > li::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-accent); flex: 0 0 auto;
}

.hours__table { width: 100%; border-collapse: collapse; }
.hours__table th, .hours__table td {
  text-align: left; padding: calc(var(--step) * 1.5) 0;
  border-bottom: 1px solid var(--border);
}
.hours__table th { font-weight: 600; padding-inline-end: calc(var(--step) * 4); }
.hours__table td { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.hours__table tr:last-child th, .hours__table tr:last-child td { border-bottom: 0; }
.hours__where {
  border-inline-start: 3px solid var(--brand-accent);
  padding-inline-start: calc(var(--step) * 3);
}
.hours__where p { margin: 0 0 calc(var(--step) * 1.5); }

/* Classes emitted by templates that had no rule at all. */
.banner {
  display: flex; flex-wrap: wrap; gap: calc(var(--step) * 2);
  align-items: center; justify-content: center;
  text-align: center;
}
.footer__legal { color: var(--text-muted); font-size: .85rem; }
.footer__icon { display: none; }

/* Credentials, the offer band and the process timeline laid themselves out
   inline too. Same consequence: out of the theme's reach, so they stayed put
   while the rest of the page responded to it. */
.credentials__list {
  display: grid; gap: calc(var(--step) * 2);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none; padding: 0; margin: 0;
}
#offer .wrap { text-align: center; }
#offer .cta-row { justify-content: center; }
.offer { padding-block: calc(var(--step) * 5); }
.offer__card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: calc(var(--step) * 2.5);
  padding: clamp(2rem, 5vw, 3.5rem);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 8%, var(--surface)), color-mix(in srgb, var(--brand-accent) 12%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, transparent);
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  position: relative; overflow: hidden;
}
.offer__badge {
  display: none;
}
.offer__content { max-width: 64ch; }
.offer__heading { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 0.5rem; }
.offer__body { max-width: 58ch; margin-inline: auto; color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; }
.offer__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: calc(var(--step) * 3); margin-top: 0.5rem;
}
.offer__tel {
  display: flex; flex-direction: column; align-items: flex-start;
  text-decoration: none; color: var(--text); padding: 0.4rem 1rem;
  border-left: 2px solid var(--brand-primary); text-align: left;
}
.offer__tel:hover { color: var(--brand-primary-text); }
.offer__tel-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; }
.offer__tel-number { font-size: 1.05rem; font-weight: 700; }
.process-timeline--vertical ol,
.process-timeline--numbered ol { list-style: none; padding: 0; }


/* ── widget: any registered embed, placed anywhere ───────────────────────── */
.widget { text-align: center; }
#widget .wrap { text-align: center; }
#widget h2 { margin-bottom: calc(var(--step) * 2); }
.widget__intro {
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 auto calc(var(--step) * 4);
}
/* The section carries no chrome of its own: a map, a video and a review wall
   look nothing alike, and a frame drawn around all three suits none of them.
   `.embed` already centres and reserves height. */
#widget .embed { margin-inline: auto; }


/* couture */
/* Self-hosted webfonts (§4.6): the platform never links fonts.googleapis.com
   from a published site — that leaks every visitor's IP to a third party —
   so a font named in CSS with no @font-face here silently falls back to
   whatever's next in its stack. Every "Cinzel"/"Source Serif 4" heading
   declared throughout this file was doing exactly that all session: Cinzel
   isn't a system font, so it was quietly rendering as Georgia. These two
   files were fetched once during development from Google's own CDN (their
   standard, openly-licensed distribution) and copied into this site's own
   assets/fonts/ — served from the site's own origin from here on, same as
   any other self-hosted asset already used elsewhere on this site. Each is
   a single variable-weight file, hence one @font-face per family covering
   the whole weight range rather than one per static weight. Matches
   design-analysis.json's scrape of the original live site: Cinzel for every
   heading, Source Sans Pro (renamed Source Sans 3 by Google in 2020, same
   family) for body text. */
@font-face {
  font-family: "Cinzel";
  src: url("/assets/cinzel-variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/source-sans-3-variable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ── Navigation: Sticky, Clean Header ── */
.nav {
  background: #ffffff !important;
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}
.nav__inner {
  max-width: 1360px !important;
  align-items: center !important;
  padding-block: 0.85rem !important;
}
.nav__brand {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
  background: transparent !important;
  border: none !important;
}
.nav__brand::before {
  display: none !important;
  content: none !important;
}
.nav__logo-img {
  display: block !important;
  height: 54px !important;
  width: auto !important;
  max-width: 300px !important;
  object-fit: contain !important;
}
.nav__links {
  gap: 2.2rem !important;
}
.nav__links a {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  transition: color 0.2s ease !important;
}
.nav__links a:hover {
  color: #f3413e !important;
}
/* Remove phone number from navigation per user request */
.nav .btn.nav__cta {
  background: #f3413e !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 0.75rem 1.75rem !important;
  box-shadow: 0 4px 14px rgba(243, 65, 62, 0.3) !important;
  transition: all 0.25s ease !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.nav .btn.nav__cta::after {
  content: "\2192" !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}
.nav .btn.nav__cta:hover {
  background: #dc2626 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(243, 65, 62, 0.45) !important;
}

/* ── Hero Banner & Overlapping Mission/Consultation Cards ── */
.hero {
  position: relative !important;
  min-height: clamp(800px, 58vw, 880px) !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-start !important;
  padding-block: 2.25rem 3rem !important;
}
.hero--image .hero__bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 1 !important;
  filter: none !important;
}
@media (min-width: 769px) {
  body[data-page="index"] .hero--image .hero__bg {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: 85% top !important;
    z-index: 1 !important;
  }
}
.hero .wrap.hero__inner {
  position: relative !important;
  z-index: 3 !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  width: 100% !important;
  padding-inline: 2rem !important;
}

/* 2-Column Hero Copy Grid matching live site exactly:
   Col 1: Card 1 (Mission Statement, spans 2 rows)
   Col 2, Row 1: Card 2 (Visit Us / Free Consultation)
   Col 2, Row 2: Call Us Bar (directly under Card 2) */
body[data-page="index"] .hero__copy {
  max-width: 740px !important;
  display: grid !important;
  grid-template-columns: 290px minmax(0, 420px) !important;
  column-gap: 1.5rem !important;
  row-gap: 0 !important;
  align-items: start !important;
}

body[data-page="index"] .hero--image .hero__eyebrow {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: block !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-size: clamp(1.35rem, 1.9vw, 1.8rem) !important;
  font-weight: 500 !important;
  letter-spacing: clamp(6px, 1vw, 12px) !important;
  color: #373737 !important;
  text-transform: uppercase !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.2 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body[data-page="index"] .hero--image h1 {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-size: clamp(2.1rem, 3.2vw, 2.9rem) !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  color: #373737 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  text-shadow: none !important;
  max-width: 580px !important;
}

body[data-page="index"] .hero--image .hero__sub {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  font-size: 0.98rem !important;
  color: #333333 !important;
  line-height: 1.6 !important;
  margin-bottom: 1.5rem !important;
  text-shadow: none !important;
  max-width: 520px !important;
}

body[data-page="index"] .hero .cta-row {
  display: none !important;
}

/* Flatten cards container into parent grid */
body[data-page="index"] .hero__cards {
  display: contents !important;
}

/* Card 1: Our Mission Statement - Left Column, spans down */
body[data-page="index"] .hero__cards--duo .promo:nth-child(1) {
  grid-column: 1 !important;
  grid-row: 4 / 6 !important;
  width: 290px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #dae3eb !important;
  color: #1e293b !important;
  padding: 0 !important;
  min-height: 430px !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  border: none !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(1)::after {
  display: none !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(1) .promo__body {
  order: 1 !important;
  padding: 1.75rem 1.5rem 1rem 1.5rem !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(1) .promo__eyebrow {
  font-size: 0.78rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #475569 !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(1) .promo__headline {
  color: #1e293b !important;
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
  font-weight: 400 !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(1) .promo__emphasis {
  font-weight: 800 !important;
  display: block !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(1) .promo__cta {
  color: #c23431 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(1) .promo__bg {
  position: static !important;
  z-index: auto !important;
  order: 2 !important;
  width: 100% !important;
  height: 235px !important;
  object-fit: cover !important;
  margin-top: auto !important;
  border-radius: 0 !important;
}

/* Card 2: Visit Us - Get a Free Consultation (Right Column, Row 1) */
body[data-page="index"] .hero__cards--duo .promo:nth-child(2) {
  grid-column: 2 !important;
  grid-row: 4 !important;
  width: 100% !important;
  background: url("/assets/promo-consultation.jpg") center center / cover no-repeat #f3413e !important;
  position: relative !important;
  padding: 1.75rem !important;
  border-radius: 6px !important;
  min-height: 240px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  border: none !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(2)::before {
  content: "" !important;
  position: absolute !important;
  inset: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 4px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(2) .promo__body {
  position: relative !important;
  z-index: 2 !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(2) .promo__eyebrow {
  color: #ffffff !important;
  letter-spacing: 3px !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  margin-bottom: 0.65rem !important;
  font-weight: 700 !important;
  display: block !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(2) .promo__headline {
  color: #ffffff !important;
  font-size: 1.35rem !important;
  line-height: 1.25 !important;
  margin-bottom: 1.25rem !important;
  display: block !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(2) .promo__emphasis {
  font-weight: 800 !important;
  display: block !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(2) .promo__cta {
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

/* Call Us bar: Right Column, Row 2 (directly under Card 2) */
body[data-page="index"] .hero__call-bar {
  grid-column: 2 !important;
  grid-row: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.25rem !important;
  margin-top: 1rem !important;
  width: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0.5rem 0 0 0 !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}
body[data-page="index"] .hero__call-text {
  flex: 1 !important;
}
body[data-page="index"] .hero__call-text h2 {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #2b2b2b !important;
  margin: 0 0 0.25rem 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
body[data-page="index"] .hero__call-text p {
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  color: #333333 !important;
  margin: 0 !important;
}
body[data-page="index"] .hero__call-cta {
  flex-shrink: 0 !important;
}
body[data-page="index"] .hero__call-btn {
  display: inline-block !important;
  background: #f3413e !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 0.6rem 1.4rem !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(243, 65, 62, 0.35) !important;
  transition: all 0.25s ease !important;
}
body[data-page="index"] .hero__call-btn:hover {
  background: #dc2626 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(243, 65, 62, 0.45) !important;
}

/* ── Trust Bar: Exact Live 3 Cards with Real Icons ── */
.trust {
  background: #ffffff !important;
  padding-block: clamp(3rem, 5vw, 4.5rem) !important;
  position: relative !important;
}
.trust ul {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.75rem !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  list-style: none !important;
  padding: 0 !important;
}
@media (max-width: 991px) {
  .trust ul {
    grid-template-columns: 1fr !important;
  }
}
.trust li {
  border-radius: 6px !important;
  padding: 40px 36px 36px 36px !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  position: relative !important;
  min-height: 235px !important;
  border: none !important;
}
.trust li:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16) !important;
}
/* Box 1: Pink/Coral (#ea6664) */
.trust li:nth-child(1) {
  background: #ea6664 !important;
}
/* Box 2: Warm Gold/Olive (#cbb860) */
.trust li:nth-child(2) {
  background: #cbb860 !important;
}
/* Box 3: Sky Blue (#0789ce) */
.trust li:nth-child(3) {
  background: #0789ce !important;
}

/* Top-Right Exact Icons */
.trust li::before {
  content: "" !important;
  position: absolute !important;
  right: 26px !important;
  top: 26px !important;
  width: 66px !important;
  height: 66px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
  pointer-events: none !important;
}
.trust li:nth-child(1)::before {
  background-image: url("/assets/ico-ref.png") !important;
}
.trust li:nth-child(2)::before {
  background-image: url("/assets/ico-chair.png") !important;
}
.trust li:nth-child(3)::before {
  background-image: url("/assets/ico-report.png") !important;
}

/* Bottom-Right Arrow */
.trust li::after {
  content: "" !important;
  position: absolute !important;
  right: 28px !important;
  bottom: 24px !important;
  width: 26px !important;
  height: 16px !important;
  background-image: url("/assets/aarrow.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  pointer-events: none !important;
}

/* Title & Body Typography */
.trust__item-title {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  display: block !important;
  line-height: 1.2 !important;
  margin-bottom: 0.85rem !important;
  max-width: 68% !important;
  letter-spacing: -0.01em !important;
}
.trust__item-body {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  display: block !important;
  line-height: 1.55 !important;
  max-width: 84% !important;
}
.trust li:nth-child(1) .trust__item-body {
  color: #fcdbe5 !important;
}
.trust li:nth-child(2) .trust__item-body {
  color: #fef9e3 !important;
}
.trust li:nth-child(3) .trust__item-body {
  color: #d0e2ec !important;
}



/* ── About Section: Welcome with Photo ── */
#about.section {
  background: #ffffff !important;
  padding-block: clamp(4.5rem, 7vw, 6.5rem) !important;
}
#about .wrap.grid {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: clamp(2rem, 5vw, 4rem) !important;
  align-items: center !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
}
@media (max-width: 991px) {
  #about .wrap.grid {
    grid-template-columns: 1fr !important;
  }
}
#about .wrap > .prose {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.15rem !important;
  max-width: 100% !important;
}
#about .prose > * {
  grid-column: auto !important;
}
#about h2 {
  grid-column: auto !important;
  font-size: clamp(2rem, 3.2vw, 2.7rem) !important;
  font-weight: 700 !important;
  color: #282828 !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5rem !important;
}
#about .prose > p {
  grid-column: auto !important;
  columns: auto !important;
  column-count: 1 !important;
  color: #475569 !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  margin-bottom: 0.5rem !important;
}
#about .prose ul {
  grid-column: auto !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0.5rem 0 0 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.85rem !important;
}
@media (max-width: 640px) {
  #about .prose ul {
    grid-template-columns: 1fr !important;
  }
}
#about .prose li {
  background: #f8fafc !important;
  border-radius: 12px !important;
  padding: 1rem 1rem 1rem 2.85rem !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
  color: #334155 !important;
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  position: relative !important;
  display: block !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#about .prose li:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
  border-color: #f3413e !important;
}
#about .prose li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0.85rem !important;
  top: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #fef2f2 !important;
  color: #f3413e !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
}
#about .prose li strong {
  color: #1e293b !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 0.2rem !important;
}
#about .about__media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}
#about .about__media img {
  width: 100% !important;
  height: 520px !important;
  object-fit: cover !important;
  object-position: 85% center !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.1) !important;
  display: block !important;
}



/* ── Remove all misplaced decorative line dashes on section h2 ── */
.section > .wrap > h2::before,
#offer h2::before,
#faq h2::before,
#services h2::before,
#contact h2::before,
#about h2::before {
  display: none !important;
  content: none !important;
}

/* ── Free Offer / Appointment Callout (We Care About You) ── */
#offer,
.free-offer {
  background-image: url("/assets/bg-appointment.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  color: #ffffff !important;
  padding-block: clamp(5rem, 8vw, 7rem) !important;
  text-align: center !important;
  position: relative !important;
}
#offer::before,
.free-offer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(14, 43, 69, 0.45) !important;
  z-index: 1 !important;
}
#offer .wrap,
.free-offer .wrap {
  max-width: 900px !important;
  text-align: center !important;
  margin-inline: auto !important;
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
#offer h2,
.free-offer h2 {
  font-size: clamp(2.2rem, 3.5vw, 2.8rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 1.5rem !important;
  letter-spacing: 3px !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
  text-align: center !important;
  padding-top: 0 !important;
}
#offer p,
.free-offer p {
  font-size: 1.2rem !important;
  color: #ffffff !important;
  line-height: 1.8 !important;
  max-width: 780px !important;
  margin: 0 auto 2.5rem auto !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4) !important;
  text-align: center !important;
}
#offer .cta-row,
.free-offer .cta-row {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}
#offer .btn,
.free-offer .btn {
  background: #f3413e !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  padding: 1rem 3.2rem !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 24px rgba(243, 65, 62, 0.6) !important;
  transition: all 0.25s ease !important;
  border: none !important;
  display: inline-block !important;
}
#offer .btn:hover,
.free-offer .btn:hover {
  background: #dc2626 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(243, 65, 62, 0.75) !important;
}

/* ── FAQ Section: Clean 2-Column Cards ── */
#faq {
  background: #ffffff !important;
  padding-block: clamp(4.5rem, 7vw, 6.5rem) !important;
}
#faq h2 {
  text-align: center !important;
  font-size: clamp(2rem, 3.2vw, 2.6rem) !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin-bottom: 3.5rem !important;
  padding-top: 0 !important;
}

dl.faq > div {
  background: #f8fafc !important;
  border-radius: 14px !important;
  padding: 2rem 2.25rem !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03) !important;
  transition: all 0.25s ease !important;
}
dl.faq > div:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08) !important;
  border-color: #f3413e !important;
}
dl.faq dt {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 0.85rem !important;
  line-height: 1.4 !important;
}
dl.faq dt::after { color: #f3413e !important; }
dl.faq dd {
  color: #475569 !important;
  font-size: 0.96rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ── Contact Section ── */
#contact {
  background: #f8fafc !important;
  padding-block: clamp(4.5rem, 7vw, 6.5rem) !important;
}
#contact h2 {
  text-align: center !important;
  font-size: clamp(2rem, 3.2vw, 2.6rem) !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin-bottom: 3rem !important;
}
.contact__grid {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: clamp(2rem, 4vw, 3.5rem) !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  align-items: start !important;
}
@media (max-width: 991px) {
  .contact__grid {
    grid-template-columns: 1fr !important;
  }
}
.contact__card {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: clamp(2rem, 4vw, 3rem) !important;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid #e2e8f0 !important;
}

/* ── Mobile Responsive Fixes ── */
@media (max-width: 768px) {

  /* ── Nav ── */
  .nav__inner {
    padding-block: 0.65rem !important;
  }
  .nav__logo-img {
    height: 42px !important;
  }

  /* ── Hero: stacked on mobile ── */
  body[data-page="index"] .hero {
    min-height: auto !important;
    padding-block: 2rem 1rem !important;
    align-items: flex-start !important;
    overflow: hidden !important;
  }
  body[data-page="index"] .hero--image .hero__bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 540px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: 82% 0% !important;
    z-index: 1 !important;
    opacity: 1 !important;
  }
  body[data-page="index"] .hero__copy {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    gap: 0 !important;
  }
  body[data-page="index"] .hero--image .hero__eyebrow {
    font-size: 1rem !important;
    letter-spacing: 4px !important;
    margin-bottom: 0.35rem !important;
    order: 1 !important;
  }
  body[data-page="index"] .hero--image h1 {
    font-size: clamp(1.8rem, 6.5vw, 2.4rem) !important;
    max-width: 100% !important;
    margin-bottom: 0.75rem !important;
    order: 2 !important;
  }
  body[data-page="index"] .hero--image .hero__sub {
    font-size: 0.95rem !important;
    max-width: 100% !important;
    line-height: 1.55 !important;
    margin-bottom: 1.5rem !important;
    order: 3 !important;
  }
  body[data-page="index"] .hero .cta-row {
    display: flex !important;
    order: 4 !important;
    margin-bottom: 2rem !important;
  }
  body[data-page="index"] .hero .btn--primary {
    display: inline-flex !important;
    padding: 6px 6px 6px 24px !important;
    border-radius: 9999px !important;
    font-size: 0.88rem !important;
    letter-spacing: 2.5px !important;
  }
  body[data-page="index"] .hero__cards {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    gap: 1.25rem !important;
    position: static !important;
    z-index: auto !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    order: 5 !important;
  }
  body[data-page="index"] .hero__cards--duo {
    display: flex !important;
    flex-direction: column !important;
  }
  body[data-page="index"] .hero__cards--duo .promo:nth-child(1) {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-height: auto !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }
  body[data-page="index"] .hero__cards--duo .promo:nth-child(1) .promo__bg {
    height: 220px !important;
    width: 100% !important;
  }
  body[data-page="index"] .hero__cards--duo .promo:nth-child(2) {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-height: 240px !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }
  body[data-page="index"] .hero__call-bar {
    grid-column: auto !important;
    grid-row: auto !important;
    order: 6 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1.25rem !important;
    position: static !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 1.5rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
  }
  body[data-page="index"] .hero__call-text h2 {
    font-size: 1.35rem !important;
    color: #1e293b !important;
    text-align: center !important;
  }
  body[data-page="index"] .hero__call-text p {
    font-size: 0.92rem !important;
    color: #334155 !important;
    text-align: center !important;
  }
  body[data-page="index"] .hero__call-btn {
    width: 100% !important;
    text-align: center !important;
    font-size: 1rem !important;
    padding: 0.85rem 1.5rem !important;
    display: block !important;
  }

  /* ── Trust Bar ──
     Desktop lays the icon top-right and the arrow bottom-right, both
     absolutely positioned against a fixed 235px card so the link itself can
     be `position: absolute; inset: 0` for a full-card click target without
     needing to be sized by its own content.

     That breaks on mobile: `min-height: auto` here means the card's own
     height comes only from its (now out-of-flow) content, but a
     `position: absolute` child contributes nothing to its parent's size —
     so the `<li>` collapsed to near-zero and the title/body, still forced
     into that same zero-height inset box, overflowed past the card's
     visible background onto the page below it.

     So mobile drops the overlay technique instead of fighting it: the link
     goes back to a normal, in-flow block that sizes the card the same way
     any other stack of content would, centred to match the reference
     design rather than desktop's left-aligned/icon-corner arrangement. The
     icon moves from `<li>::before` (which can only ever be the card's
     first or last child) to `.trust__item-title::after`, so it lands
     between the title and body in document order, exactly where it sits
     visually. */
  .trust ul {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding-inline: 1rem !important;
  }
  .trust li {
    min-height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .trust li a.trust__item-link {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 2rem 1.75rem 2.75rem 1.75rem !important;
    gap: 0 !important;
  }
  .trust__item-title {
    font-size: 1.35rem !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .trust__item-body {
    font-size: 0.95rem !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  /* The corner icon is dropped in favour of the one below, between title
     and body. */
  .trust li::before {
    display: none !important;
  }
  .trust__item-title::after {
    content: "" !important;
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    margin: 1rem auto !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  .trust li:nth-child(1) .trust__item-title::after {
    background-image: url("/assets/ico-ref.png") !important;
  }
  .trust li:nth-child(2) .trust__item-title::after {
    background-image: url("/assets/ico-chair.png") !important;
  }
  .trust li:nth-child(3) .trust__item-title::after {
    background-image: url("/assets/ico-report.png") !important;
  }
  .trust li::after {
    right: 22px !important;
    bottom: 20px !important;
  }

  /* ── About ── */
  #about .wrap.grid {
    grid-template-columns: 1fr !important;
  }
  #about .about__media img {
    height: 300px !important;
  }

  /* ── Services ── */
  #services .grid {
    grid-template-columns: 1fr !important;
  }



  /* ── Contact ── */
  .contact__grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Footer cards ── */
  .footer__heading {
    font-size: 1.6rem !important;
  }
  .footer__cards {
    grid-template-columns: 1fr !important;
  }
  .footer__card {
    align-items: flex-start !important;
  }
  .footer__card-badge {
    width: 56px !important;
    height: 56px !important;
  }
  .footer__card-body {
    padding-right: 0.75rem !important;
  }
  .footer__bottom {
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-inline: 1rem !important;
  }
  .footer__bottom-row {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  .hero--image h1 {
    font-size: 1.7rem !important;
  }
  .footer__intro {
    padding-inline: 1rem !important;
  }
  .footer .wrap {
    padding-inline: 1rem !important;
  }
}

/* ── Footer: 3 Cards Contact & Clean Light Sub-Footer ── */
.footer {
  background: #ffffff !important;
  color: #1e293b !important;
  padding-block: clamp(4.5rem, 7vw, 6.5rem) 0 !important;
  border-top: 1px solid #e2e8f0 !important;
}
.footer .wrap {
  max-width: 1360px !important;
  margin-inline: auto !important;
  padding-inline: 2rem !important;
}

/* Header: For Questions or Concerns / Contact Us */
.footer__intro {
  text-align: center !important;
  max-width: 820px !important;
  margin: 0 auto clamp(3rem, 5vw, 4.5rem) auto !important;
}
.footer__pretitle {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem) !important;
  letter-spacing: clamp(6px, 0.8vw, 10px) !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  margin-bottom: 0.65rem !important;
  font-weight: 600 !important;
}
.footer__heading {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: clamp(2.2rem, 3.4vw, 3rem) !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin-bottom: 1.25rem !important;
}
.footer__lead {
  font-size: 1.05rem !important;
  color: #334155 !important;
  line-height: 1.75 !important;
  margin: 0 auto !important;
}

/* 3 Cards Grid */
.footer__cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(1.5rem, 3vw, 2.5rem) !important;
  margin-bottom: clamp(4rem, 6vw, 5.5rem) !important;
  align-items: stretch !important;
}
@media (max-width: 991px) {
  .footer__cards {
    grid-template-columns: 1fr !important;
  }
}
.footer__card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1.5rem !important;
}
.footer__card-badge {
  width: 88px !important;
  height: 88px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
  border-radius: 6px !important;
}
.footer__card-badge svg {
  stroke: #ffffff !important;
}
.footer__card-badge--locate {
  background-color: #ea6664 !important;
}
.footer__card-badge--contact {
  background-color: #cbb860 !important;
}
.footer__card-badge--social {
  background-color: #0789ce !important;
}
.footer__card-body {
  flex: 1 !important;
}
.footer__card-body h3 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.footer__dash {
  color: #64748b !important;
  font-weight: 400 !important;
}
.footer__card-body p {
  color: #334155 !important;
  font-size: 0.98rem !important;
  line-height: 1.7 !important;
  margin-bottom: 0.35rem !important;
}
.footer__card-body strong {
  color: #0f172a !important;
  font-weight: 600 !important;
}
.footer__card-body a {
  color: #334155 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.footer__card-body a:hover {
  color: #f3413e !important;
}
.footer__social-lead {
  color: #334155 !important;
  font-size: 0.95rem !important;
  margin-bottom: 0.85rem !important;
  font-weight: 500 !important;
}
.footer__social-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  gap: 1rem !important;
  align-items: center !important;
}
.footer__social-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: #334155 !important;
  transition: all 0.2s ease !important;
}
.footer__social-links a:hover {
  background: none !important;
  border: none !important;
  color: #f3413e !important;
}
.footer__social-links svg {
  width: 22px !important;
  height: 22px !important;
  fill: #334155 !important;
}
.footer__social-links a:hover svg {
  fill: #0789ce !important;
  transform: translateY(-2px) !important;
}

/* Bottom Bar */
.footer__bottom {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 1.75rem 2rem 2rem 2rem !important;
  /* Full-bleed breakout: .footer__bottom sits inside .wrap, a width-
     constrained, auto-margined box, not simple padding — a fixed
     `margin-inline: -2rem` only escaped .wrap by 2rem on each side,
     nowhere near the viewport edge. Centering on the viewport itself
     (not the parent) is what actually reaches full width regardless of
     .wrap's own constraint. */
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}
.footer__bottom-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1.25rem !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
}
@media (max-width: 768px) {
  .footer__bottom-row {
    flex-direction: column !important;
    text-align: center !important;
  }
}
.footer__legal {
  color: #475569 !important;
  font-size: 0.92rem !important;
  margin: 0 !important;
}
.footer__links {
  color: #475569 !important;
  font-size: 0.92rem !important;
}
.footer__links a {
  color: #334155 !important;
  text-decoration: none !important;
  padding-inline: 0.35rem !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}
.footer__links a:hover {
  color: #f3413e !important;
}
.footer__credit {
  width: 100% !important;
  max-width: 1360px !important;
  margin: 1.25rem auto 0 auto !important;
  text-align: center !important;
  display: block !important;
  border-top: 1px solid #e2e8f0 !important;
  padding-top: 1.25rem !important;
  color: #475569 !important;
  font-size: 0.9rem !important;
}
.footer__credit p {
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
  display: block !important;
}

/* ── Hero promo cards (mission / free-consultation) ──────────────────────
   The original site baked this pair's copy directly into two JPEGs
   (mission-banner.jpg, consultation-banner.jpg) — real text, unreadable to
   a screen reader or a search index, exactly what `banners` exists to
   avoid. Rebuilt as structured cards instead: the first keeps the real
   photo (cropped to drop the baked-in caption, since the template draws
   its own), the second is solid-colour by design (no photograph needed) —
   but the generic `.promo--solid` default is brand-primary, a dark slate,
   where the original card was the same red as the phone pill below it. */
.hero__cards--duo .promo:nth-child(2).promo--solid {
  background: var(--brand-accent) !important;
}
.hero__cards--duo .promo:nth-child(2).promo--solid:hover {
  background: color-mix(in srgb, var(--brand-accent) 88%, #000) !important;
}

/* ── Nav: two-row utility bar, matching the client's real live site ──────
   Row 1: logo (left) + phone/CTA (right). Row 2: main links, centred,
   under a divider. Built on `nav_layout: logo_left` + `show_phone_with_cta`
   (renderer.contracts.sections.NavSection) — the deliberately scoped, opt-in
   exception to the one-primary-CTA rule other sites keep by default. */
.nav--logo_left .nav__inner {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  column-gap: 2rem !important;
  row-gap: 0.65rem !important;
  align-items: center !important;
  align-content: center !important;
  min-height: 76px !important;
}
.nav--logo_left .nav__brand { grid-row: 1 / 3 !important; grid-column: 1 !important; }
/* The original site's top strip splits into a 7/12 phone column (starting
   right after the logo) and a 5/12 locations+CTA column (right-aligned) —
   the phone sits well left of the CTA, not bunched against it. `justify-
   self: end` collapsed the whole utility group to the far right, leaving
   the wide gap after the logo empty instead. `stretch` + `space-between`
   spreads the same two children back across the row. */
.nav--logo_left .nav__utility {
  grid-row: 1 !important;
  grid-column: 2 !important;
  justify-self: stretch !important;
  /* `space-between` spread all three children (phone, locations link, CTA)
     evenly across the row, leaving a large empty gap between the phone
     number and the locations link — the original site keeps those two
     close together and only pushes the CTA button off to the far right. */
  justify-content: flex-start !important;
  /* base.css's `.nav__utility { margin-left: auto }` (meant for the flex
     layout other nav styles use) still applied here — an auto margin
     consumes all its own free space first, which cancelled out
     `justify-self: stretch` just as effectively as `justify-self: end`
     would have. */
  margin-left: 0 !important;
}
.nav--logo_left .nav__utility .nav__cta {
  margin-left: auto !important;
}
/* Two auto margins on the same flex line split the row's free space
   between them — before the phone block and before the CTA button — which
   centres the phone + "Locations We Serve" pair in the space left over
   once the CTA claims the far right edge. */
.nav--logo_left .nav__utility .nav__tel {
  margin-left: auto !important;
}
.nav--logo_left .nav__toggle { grid-row: 1 !important; grid-column: 2 !important; justify-self: end !important; }
.nav--logo_left .nav__links {
  grid-row: 2 !important;
  grid-column: 2 !important;
  justify-content: center !important;
  margin: 0 !important;
  padding-top: 0.65rem !important;
  border-top: 1px solid #e2e8f0 !important;
}
.nav__tel { color: #334155 !important; }
.nav__tel svg { color: #334155 !important; flex-shrink: 0 !important; }
.nav__tel-label {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #64748b !important;
}
.nav__tel-number { color: #f3413e !important; font-size: 1rem !important; }
.nav__utility { gap: 1.1rem !important; }
.nav__utility-link {
  padding-left: 1.1rem !important;
  border-left: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.nav__links a {
  text-transform: uppercase !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #334155 !important;
}
.nav__links a:hover { color: #f3413e !important; }
@media (max-width: 900px) {
  .nav--logo_left .nav__tel-label { display: none !important; }
}


/* ── About/Welcome section: match the client's live site exactly ─────────
   shape3.png (as /assets/welcome-blob.png) is a pre-composited PNG - the
   blob mask and red trim are baked into its alpha channel, not a CSS
   clip-path this couture needs to reproduce. The generic
   #about .about__media img rule crops every about photo to a fixed
   rectangle, which would clip this one's transparency; scoped to the
   homepage only since other pages' about photos still want that crop. */
body[data-page="index"] #about .about__media img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.about__eyebrow {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  margin: 0 0 0.5rem 0 !important;
}
.about__cta {
  background: #f3413e !important;
  color: #ffffff !important;
  padding: 6px 6px 6px 28px !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 1.1rem !important;
  margin-top: 1.75rem !important;
  transition: background 0.25s ease !important;
}
.about__cta::after {
  content: "→" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #f3413e !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
}
.about__cta:hover { background: #949398 !important; }

/* ── Services section: match the client's live site layout exactly ────────── */
body[data-page="index"] #services {
  background: #ffffff !important;
  padding-block: clamp(4rem, 6vw, 6rem) !important;
}

body[data-page="index"] #services .wrap {
  display: grid !important;
  grid-template-columns: 340px 1fr !important;
  column-gap: 3.5rem !important;
  align-items: stretch !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  padding-inline: 2rem !important;
}

/* Left Column: Heading with vertical divider */
body[data-page="index"] #services h2 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  border-right: 1px solid #d9d9d9 !important;
  padding-right: 3rem !important;
  text-align: left !important;
  font-size: clamp(1.35rem, 1.75vw, 1.7rem) !important;
  font-family: "Cinzel", Georgia, serif !important;
  color: #353535 !important;
  line-height: 1.45 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
}

/* Right Column: Lead Text & Integrated Grid Container */
body[data-page="index"] #services .services__lead {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: start !important;
  position: relative !important;
  z-index: 2 !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 1.5rem 0 0 0 !important;
  font-size: 1rem !important;
  color: #555555 !important;
  line-height: 1.6 !important;
  border: none !important;
  background: transparent !important;
  max-width: 460px !important;
}

body[data-page="index"] #services .services__feature {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(180px, auto) minmax(210px, auto) !important;
  gap: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  background: transparent !important;
}

/* Homemaking Card: Row 1, Column 5 */
body[data-page="index"] #services .services__feature .card--lead {
  grid-column: 5 !important;
  grid-row: 1 !important;
  min-height: 180px !important;
  background: url("/assets/hover-box.jpg") center center / cover no-repeat #f3413e !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 1.5rem 1rem !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
}
body[data-page="index"] #services .services__feature .card--lead .services__img,
body[data-page="index"] #services .services__feature .card--lead .services__img--wide {
  display: none !important;
}
body[data-page="index"] #services .services__feature .card--lead::after {
  content: none !important;
  display: none !important;
}
body[data-page="index"] #services .services__feature .card--lead .card__link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
}
body[data-page="index"] #services .services__feature .card--lead h3 {
  color: #ffffff !important;
  font-size: 1.1rem !important;
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  text-align: center !important;
}
body[data-page="index"] #services .services__feature .card--lead h3::before {
  content: "" !important;
  display: block !important;
  width: 60px !important;
  height: 52px !important;
  margin: 0 auto 0.75rem auto !important;
  -webkit-mask: url("/assets/service-ico0.png") no-repeat center / contain !important;
  mask: url("/assets/service-ico0.png") no-repeat center / contain !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
body[data-page="index"] #services .services__feature .card--lead p {
  display: none !important;
}

/* Bottom Row: 5 Cards (Items 2 to 6) */
body[data-page="index"] #services .services__feature .card:not(.card--lead) {
  background: #ffffff !important;
  border-top: 1px solid #d9d9d9 !important;
  border-bottom: 1px solid #d9d9d9 !important;
  border-right: 1px solid #d9d9d9 !important;
  border-left: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: visible !important;
  min-height: 210px !important;
  transform: none !important;
  transition: background 0.25s ease, border-color 0.25s ease !important;
}
body[data-page="index"] #services .services__feature .card:not(.card--lead) .card__link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  width: 100% !important;
  height: 100% !important;
  padding: 30px 10px !important;
  box-sizing: border-box !important;
}

body[data-page="index"] #services .services__feature .card:nth-child(2) {
  grid-column: 1 !important;
  grid-row: 2 !important;
  border-left: 1px solid #d9d9d9 !important;
}
body[data-page="index"] #services .services__feature .card:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }
body[data-page="index"] #services .services__feature .card:nth-child(4) { grid-column: 3 !important; grid-row: 2 !important; }
body[data-page="index"] #services .services__feature .card:nth-child(5) { grid-column: 4 !important; grid-row: 2 !important; }
body[data-page="index"] #services .services__feature .card:nth-child(6) { grid-column: 5 !important; grid-row: 2 !important; }

body[data-page="index"] #services .services__feature .card:not(.card--lead) .services__img {
  width: 72px !important;
  height: 60px !important;
  object-fit: contain !important;
  margin: 0 auto 1.25rem auto !important;
  border-radius: 0 !important;
  display: block !important;
  transition: filter 0.25s ease, transform 0.25s ease !important;
}
body[data-page="index"] #services .services__feature .card:not(.card--lead) h3 {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #353535 !important;
  text-align: center !important;
  margin: 0 auto !important;
  max-width: 140px !important;
  line-height: 1.35 !important;
  transition: color 0.25s ease !important;
}
body[data-page="index"] #services .services__feature .card:not(.card--lead) h3::before {
  content: none !important;
  display: none !important;
}
body[data-page="index"] #services .services__feature .card:not(.card--lead) p {
  display: none !important;
}

/* Hover states for all bottom cards */
body[data-page="index"] #services .services__feature .card:not(.card--lead):hover {
  background: #f3413e !important;
  border-color: #f3413e !important;
  transform: none !important;
  box-shadow: none !important;
}
body[data-page="index"] #services .services__feature .card:not(.card--lead):hover h3 {
  color: #ffffff !important;
  text-decoration: none !important;
}
body[data-page="index"] #services .services__feature .card:not(.card--lead):hover .services__img,
body[data-page="index"] #services .services__feature .card:not(.card--lead):hover .card__icon {
  filter: brightness(0) invert(1) !important;
  transform: scale(1.05) !important;
}

/* Responsive / Tablet & Mobile */
@media (max-width: 991px) {
  body[data-page="index"] #services .wrap {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  body[data-page="index"] #services h2 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    border-right: none !important;
    border-bottom: 1px solid #d9d9d9 !important;
    padding-right: 0 !important;
    padding-bottom: 1.25rem !important;
  }
  body[data-page="index"] #services .services__lead {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    border: none !important;
    padding: 0 0 1.25rem 0 !important;
  }
  body[data-page="index"] #services .services__feature {
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 1rem !important;
    border: none !important;
    background: transparent !important;
  }
  body[data-page="index"] #services .services__feature .card--lead {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    border-radius: 8px !important;
    min-height: 140px !important;
  }
  body[data-page="index"] #services .services__feature .card:not(.card--lead) {
    border: 1px solid #d9d9d9 !important;
    border-radius: 8px !important;
    min-height: 180px !important;
  }
  body[data-page="index"] #services .services__feature .card:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; }
  body[data-page="index"] #services .services__feature .card:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }
  body[data-page="index"] #services .services__feature .card:nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; }
  body[data-page="index"] #services .services__feature .card:nth-child(5) { grid-column: 2 !important; grid-row: 3 !important; }
  body[data-page="index"] #services .services__feature .card:nth-child(6) { grid-column: 1 / -1 !important; grid-row: 4 !important; }
}

@media (max-width: 600px) {
  body[data-page="index"] #services .services__feature {
    grid-template-columns: 1fr !important;
  }
  body[data-page="index"] #services .services__feature .card:nth-child(n) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* ── Free offer ("We Care About You"): strip the card, match the plain
   original ─────────────────────────────────────────────────────────────────────────
   The rules above this one target \`.cta-row\`, bare \`h2\`/\`p\` — close enough
   to the real markup that most of it happened to apply, but they never
   touch \`.offer__card\`, the element the shared template actually wraps
   the content in. That's the floating card + "Or call directly" phone
   link the original site's own free_offer section never had (source
   markup is a heading, one paragraph, one button, directly on the photo). */
#offer .offer__card {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 900px !important;
  width: 100% !important;
}
#offer .offer__tel { display: none !important; }

/* .footer__bottom's full-bleed breakout (below) centers on 100vw, which on
   some desktop browsers is wider than the visible viewport by the
   scrollbar's own width — guard against the sliver of horizontal scroll
   that would otherwise introduce. */
html, body { overflow-x: hidden !important; }

/* Interior pages (About Us, Careers, Resources, Veterans Administration) use
   the same full-bleed hero as the homepage but with a fraction of the
   content — no banners, no call bar, often no CTA. The homepage's
   min-height (clamp(860px, 64vw, 1050px)) was unscoped, so every one of
   these pages inherited a hero several times taller than its own short
   heading + subheadline needed, matching neither this reference (a slim
   ~30vh band) nor the platform's own other utility pages. */
body:not([data-page="index"]) .hero {
  min-height: 30vh !important;
  padding-block: 3.5rem !important;
}
body:not([data-page="index"]) .hero__copy {
  max-width: 640px !important;
}

/* The About Us page's own about section repeats the homepage's numbered-id
   pattern (about_count > 1 there too, so this section never gets the plain
   #about id the homepage fix relied on) — targeting the blob image's own
   src is stable regardless of what id the section lands on. */
.about__media img[src="/assets/who-we-are-blob.png"] {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── About Us: Mission / Vision / Values ───────────────────────────────────
   Three equal full-bleed colour panels, matching the client's live site
   exactly (and reusing its own red/gold/blue from the homepage trust bar).
   Built on the generic \`about--feature_list\` opt-in
   (AboutSection.feature_list) — #about-3 is this specific section's id on
   this specific page, so the override is safe to be this exact. */
body[data-page="about-us"] #about-3 {
  padding: 0 !important;
}
body[data-page="about-us"] #about-3 .wrap {
  max-width: none !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}
body[data-page="about-us"] #about-3 .prose {
  max-width: none !important;
}
body[data-page="about-us"] #about-3.about--feature_list ul {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  /* Browser default UL indent (padding-inline-start: 40px) was never reset
     here — invisible on desktop because these full-bleed panels' own
     padding dwarfs it, but on mobile it showed as a left-only gray gutter
     before the first (red) panel, since list-indent is a left-side-only
     property. */
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
@media (max-width: 860px) {
  body[data-page="about-us"] #about-3.about--feature_list ul {
    grid-template-columns: 1fr !important;
  }
}
body[data-page="about-us"] #about-3.about--feature_list li {
  background: #ea6664 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #1e293b !important;
  display: block !important;
  padding: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem) !important;
  min-height: 300px !important;
  position: relative !important;
}
body[data-page="about-us"] #about-3.about--feature_list li:nth-child(2) { background: #cbb860 !important; }

body[data-page="about-us"] #about-3.about--feature_list li:nth-child(3) { background: #0789ce !important; }
body[data-page="about-us"] #about-3.about--feature_list li::before {
  content: "" !important;
  display: block !important;
  position: static !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  margin: 0 0 1.75rem 0 !important;
}
body[data-page="about-us"] #about-3.about--feature_list li:nth-child(1)::before { background-image: url("/assets/ico-mission.png") !important; }
body[data-page="about-us"] #about-3.about--feature_list li:nth-child(2)::before { background-image: url("/assets/ico-vission.png") !important; }
body[data-page="about-us"] #about-3.about--feature_list li:nth-child(3)::before { background-image: url("/assets/ico-value.png") !important; }
body[data-page="about-us"] #about-3.about--feature_list li strong {
  display: block !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 1.35rem !important;
  color: #1e293b !important;
  margin-bottom: 1.1rem !important;
  padding-bottom: 1.1rem !important;
  border-bottom: 2px solid rgba(30, 41, 59, 0.4) !important;
  width: fit-content !important;
}

/* ── Services page: "What We Provide" ───────────────────────────────────────
   Same heading-left / content-right composition as the homepage's services
   section, but the client's live Services page shows all six as equal
   plain white cards — no featured/lead tile, unlike the homepage. The
   template's \`feature_first\` rhythm always gives item 1 the lead
   treatment regardless of content, so that treatment is neutralised here
   rather than switched off (there is no per-page rhythm, only per-site). */
body[data-page="services"] #services .wrap {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  column-gap: 3rem !important;
  align-items: start !important;
  max-width: 1360px !important;
}
body[data-page="services"] #services h2 {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  border-right: 1px solid #e2e8f0 !important;
  padding-right: 2rem !important;
  text-align: left !important;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem) !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-variant: small-caps !important;
  color: #282828 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  align-self: start !important;
}
body[data-page="services"] #services .services__lead {
  grid-column: 2 !important;
  grid-row: 1 !important;
  text-align: left !important;
  margin: 0 0 1.75rem 0 !important;
  max-width: 640px !important;
  font-size: 0.95rem !important;
  color: #475569 !important;
}
body[data-page="services"] #services .services__feature {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 1fr !important;
  gap: 1.5rem !important;
}
@media (max-width: 900px) {
  /* Block, not a 1-col grid: the desktop rules above give h2 and
     .services__lead explicit, *different* grid-row values (1/3 and 1) that
     only make sense next to a 2-col layout. Collapsing grid-template-columns
     to 1fr alone still leaves those row assignments in place, so the
     heading and the intro paragraph land in the same cell and overlap.
     Block stacking sidesteps the row math entirely and follows DOM order:
     heading, then intro, then the card grid. */
  body[data-page="services"] #services .wrap { display: block !important; }
  body[data-page="services"] #services h2 {
    border-right: 0 !important;
    padding-right: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    text-align: center !important;
  }
  body[data-page="services"] #services .services__lead {
    text-align: center !important;
    margin-inline: auto !important;
  }
  body[data-page="services"] #services .services__feature {
    margin-top: 1.75rem !important;
  }
}
@media (max-width: 640px) {
  body[data-page="services"] #services .services__feature { grid-template-columns: 1fr !important; }
}

/* Every card identical — the lead card's grid span, photo background and
   dark overlay are all reset back to a plain bordered card. */
body[data-page="services"] #services .services__feature .card {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  padding: 2.5rem 2rem !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: static !important;
  overflow: visible !important;
}
body[data-page="services"] #services .services__feature .card::after { content: none !important; }
body[data-page="services"] #services .services__feature .card .services__img {
  position: static !important;
  width: auto !important;
  height: 56px !important;
  max-width: 70px !important;
  object-fit: contain !important;
  margin: 0 0 1.5rem 0 !important;
  border-radius: 0 !important;
  z-index: auto !important;
}
body[data-page="services"] #services .services__feature .card h3 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  text-align: center !important;
  margin: 0 !important;
}
body[data-page="services"] #services .services__feature .card p { display: none !important; }

/* ── Careers: Apply Now card, floating over the hero ─────────────────────────────
   The original site's careers-frm-hold pulls itself up over the header by
   a fixed -129px, stacks an intro strip over the form area in one card,
   and lets the benefits list run in its own column below — not
   side-by-side with it. This site's \`contact--details\` layout is
   normally a 2-up grid (info | form); restacked into the same single
   card here, since there's no form yet to balance a second column
   against (the phone/email list already lives in the nav and footer, so
   it's dropped here rather than said a third time). */
body[data-page="careers"] .hero {
  /* .hero (position: relative, z-index: auto) was still out-painting the
     card below despite the card's z-index: 100 — confirmed by hit-testing
     with document.elementFromPoint(), which kept resolving to the hero
     photo inside the card's own claimed rect. z-index: auto does not
     "escape" a positioned ancestor the way it looks like it should; giving
     .hero an explicit (if numerically low) z-index settles it as its own
     stacking context below the card, and elementFromPoint confirmed the
     card wins the hit test afterward. */
  z-index: 0 !important;
}
body[data-page="careers"] #contact {
  padding-top: 0 !important;
  /* The card is taken out of normal flow (position: absolute) below, so
     this section no longer has an in-flow child to size itself against —
     min-height reserves the room the floating card actually needs, or the
     next section (.about, the benefits list) would start immediately
     under the hero and the card would overlap it from above instead.
     Grew from 420px once the real GoHighLevel form replaced the short
     Call/Email/Address placeholder — measured via the built page (card
     rect) at ~810px of content below #contact's own top edge, plus some
     breathing room before the benefits list starts. */
  min-height: 860px !important;
  padding-bottom: calc(var(--step) * 4) !important;
  position: relative !important;
  /* base.css's generic #contact rule (the "banner" contact-CTA style,
     unrelated to this page's use) also sets overflow:hidden unconditionally,
     which would independently clip the card's negative top offset. */
  overflow: visible !important;
  z-index: 1 !important;
}
body[data-page="careers"] #contact .wrap.contact__grid {
  display: block !important;
  width: 90% !important;
  max-width: 640px !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  /* Absolute, not a negative margin: an in-flow element shifted up with
     margin is still painted in DOM order among the *other* in-flow
     content it now visually overlaps, which is what kept losing to the
     hero photo above regardless of z-index. Taking it out of flow
     entirely removes that ambiguity — an absolutely positioned box
     paints above static content unconditionally. */
  position: absolute !important;
  top: -110px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 100 !important;
}
@media (max-width: 760px) {
  body[data-page="careers"] #contact .wrap.contact__grid {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin: 1.5rem auto 0 auto !important;
  }
  body[data-page="careers"] #contact { min-height: 0 !important; }
}
body[data-page="careers"] #contact .contact__details {
  background: #f2f0f4 !important;
  padding: 1.75rem 2rem !important;
}
body[data-page="careers"] #contact .contact__details h2 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #353535 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 0.5rem !important;
}
body[data-page="careers"] #contact .contact__details .contact__body p {
  color: #353535 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  max-width: none !important;
  margin: 0 !important;
}
body[data-page="careers"] #contact .contact__details .contact__info { display: none !important; }
body[data-page="careers"] #contact .contact__form {
  background: #ffffff !important;
  padding: 1.75rem 2rem 2rem 2rem !important;
}
body[data-page="careers"] #contact .contact__form .contact__fallback-wrap { max-width: none !important; margin: 0 !important; }
body[data-page="careers"] #contact .contact__form .embed__fallback {
  align-items: flex-start !important;
  text-align: left !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  gap: 0.75rem !important;
}

/* ── Careers: benefits column beside the Apply Now card ──────────────────
   The original static site runs these as one row — col-md-4 benefits text
   next to a col-md-7 form card (careers.html:186-231) — not two stacked
   sections. This engine renders #contact and #about as separate sibling
   <section>s, so #main becomes the shared grid for this page: the hero
   spans the full row above, then #about and #contact split the row below
   it into the same left/right column split as the original. */
body[data-page="careers"] #main {
  display: grid !important;
  grid-template-columns: 1fr minmax(0, 400px) minmax(0, 620px) 1fr !important;
  column-gap: clamp(2rem, 4vw, 3.5rem) !important;
  align-items: start !important;
}
body[data-page="careers"] #main > .hero { grid-column: 1 / -1 !important; }
body[data-page="careers"] #main > #about {
  grid-column: 2 !important;
  grid-row: 2 !important;
  padding-block: calc(var(--step) * 4) !important;
  border-top: none !important;
}
body[data-page="careers"] #main > #contact {
  grid-column: 3 !important;
  grid-row: 2 !important;
  border-top: none !important;
}
/* The benefits text is one column here, not the generic feature_list's own
   internal 2-up split (intro left, list right) — that split assumed the
   whole page width, which this section no longer has. */
body[data-page="careers"] #about .wrap { width: 100% !important; max-width: none !important; margin: 0 !important; }
body[data-page="careers"] #about.about--feature_list .prose {
  display: block !important;
  max-width: none !important;
}
body[data-page="careers"] #about.about--feature_list h2,
body[data-page="careers"] #about.about--feature_list h3,
body[data-page="careers"] #about.about--feature_list ul {
  grid-column: auto !important;
}
body[data-page="careers"] #about.about--feature_list p:first-child {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  line-height: 1.35 !important;
  margin-bottom: calc(var(--step) * 3) !important;
}
body[data-page="careers"] #about.about--feature_list h2 {
  font-family: "Cinzel", Georgia, serif !important;
  font-variant: small-caps !important;
  font-size: 1.4rem !important;
  color: #f3413e !important;
  margin-bottom: 1.25rem !important;
}
@media (max-width: 980px) {
  body[data-page="careers"] #main { display: block !important; }
  body[data-page="careers"] #main > #about,
  body[data-page="careers"] #main > #contact { grid-column: auto !important; }
  body[data-page="careers"] #about { padding-block: calc(var(--step) * 3) !important; }
}

/* Mobile: the benefits column had no horizontal padding at all once #main
   dropped out of the grid (the grid's own gutters were doing that job on
   desktop) — text ran edge-to-edge. The client's original site centres the
   two headings here on mobile (careers.html's `.careers-info` inherits a
   `text-align:center` on small screens); the checklist keeps its own
   left-aligned checkmark layout, which reads better than the original's
   quirk of re-centring any line that happens to wrap. */
@media (max-width: 980px) {
  body[data-page="careers"] #about {
    padding-inline: 1.5rem !important;
  }
  body[data-page="careers"] #about.about--feature_list .prose p:first-child,
  body[data-page="careers"] #about.about--feature_list h2 {
    text-align: center !important;
  }
}

/* The homepage's `#about .prose ul/li` rules (unscoped, written for its
   welcome-with-photo section) otherwise turn this into a 2-up card grid —
   the original site's benefits list is a plain single-column checklist
   (careers.html:197-226: <ul style="list-style:none"><li><i class="fa
   fa-check">...). */
body[data-page="careers"] #about.about--feature_list .prose ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
}
body[data-page="careers"] #about.about--feature_list .prose li {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 0 0 1.6rem !important;
  font-size: 0.95rem !important;
}
body[data-page="careers"] #about.about--feature_list .prose li::before {
  position: absolute !important;
  left: 0 !important;
  top: 0.15rem !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  color: #f3413e !important;
  font-size: 0.9rem !important;
}

/* ── Resources page: link cards ───────────────────────────────────────────
   The original site's `.resource-hold .source-box` (resources.html:186-258)
   is a 2-up grid of plain white cards, each a link heading with a circular
   chevron-right button at the far end — not the generic feature_list
   checkmark card this engine would otherwise render a markdown link list
   as. */
body[data-page="resources"] #about .wrap:not(.grid) > .prose {
  display: block !important;
  max-width: none !important;
}
body[data-page="resources"] #about .wrap {
  max-width: 1360px !important;
  margin: 0 auto !important;
  width: 100% !important;
}
body[data-page="resources"] #about.section {
  padding-block: clamp(3rem, 6vw, 5rem) !important;
}
body[data-page="resources"] #about .prose ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem !important;
}
@media (max-width: 760px) {
  body[data-page="resources"] #about .prose ul { grid-template-columns: 1fr !important; }
}
body[data-page="resources"] #about .prose li {
  background: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
  padding: 1.5rem 1.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}
body[data-page="resources"] #about .prose li::before { content: none !important; }
body[data-page="resources"] #about .prose li a {
  color: #e12c2e !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
}
body[data-page="resources"] #about .prose li a:hover { text-decoration: underline !important; }
body[data-page="resources"] #about .prose li::after {
  content: "\203A" !important;
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1.5px solid #1e293b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  color: #1e293b !important;
  font-weight: 700 !important;
}

/* The unscoped "Footer: 3 Cards" block below sets .footer__heading to a
   clamp() that floors at 2.2rem, and .footer__card-badge to a fixed 88px —
   both larger than the earlier mobile media query meant, but that query
   comes first in source order and loses the tie at equal specificity.
   Appended last here so it actually wins. The 88px badge was the real bug:
   .footer__card is a flex container *and* a grid item, so its default
   min-width is auto, not 0 — with the fixed-size (flex-shrink: 0) badge
   still at 88px, the card's min-content width exceeded its grid track and
   the whole card overflowed past the section edge, clipping the address
   and email text instead of wrapping them. */
@media (max-width: 768px) {
  .footer__heading {
    font-size: 1.6rem !important;
  }
  .footer__card-badge {
    width: 56px !important;
    height: 56px !important;
  }
  .footer__card {
    min-width: 0 !important;
  }
  .footer__card-body {
    padding-right: 0.75rem !important;
  }
}

/* Homepage services grid on mobile: .card--lead has a hardcoded
   `grid-column: 5` (unscoped, matching the desktop 5-column layout) with no
   mobile reset. Even though the container's own grid-template-columns
   correctly narrows to repeat(2, 1fr) below 900px, that explicit
   grid-column: 5 placement still forces the grid to auto-generate three
   extra implicit columns to satisfy it — blowing the container (and the
   whole .wrap it sits in, since 1fr tracks still respect item min-content)
   well past the viewport, which is what pushed the section heading text
   off the right edge. Appended last so it beats both the desktop rule and
   the earlier, incomplete mobile block above. */
@media (max-width: 900px) {
  body[data-page="index"] #services .services__feature {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
  }
  body[data-page="index"] #services .services__feature .card--lead {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  /* The desktop 5-column layout also gives each non-lead card an explicit
     nth-child(n) { grid-column: 1..5 } placement (added earlier to stop
     grid auto-placement scrambling their order) — those never got a mobile
     counterpart, so they were still demanding 5 columns worth of track
     space here too. Re-sequenced into the 2-column mobile grid: 2 rows of
     pairs plus one trailing single card. */
  body[data-page="index"] #services .services__feature .card:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; }



  body[data-page="index"] #services .services__feature .card:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }
  body[data-page="index"] #services .services__feature .card:nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; }
  body[data-page="index"] #services .services__feature .card:nth-child(5) { grid-column: 2 !important; grid-row: 3 !important; }
  body[data-page="index"] #services .services__feature .card:nth-child(6) { grid-column: 1 / -1 !important; grid-row: 4 !important; }
}

/* ── Refer page: gold circular icons on the contact info list ────────────
   Matches send-referral.html's right-hand "Contact" column (map pin /
   phone / fax / envelope, each in a plain gold circle) — the generic
   `.contact__info` default is a bare inline icon with no badge. */
body[data-page="refer"] #contact .contact__details h2 {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 1.8rem !important;
}
body[data-page="refer"] #contact .contact__note {
  color: #1e293b !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  margin: calc(var(--step) * 2) 0 0 0 !important;
}
body[data-page="refer"] #contact .contact__info {
  margin-top: calc(var(--step) * 3) !important;
  gap: calc(var(--step) * 2.5) !important;
}
body[data-page="refer"] #contact .contact__info li {
  align-items: center !important;
}
body[data-page="refer"] #contact .contact__info svg {
  width: 20px !important;
  height: 20px !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}
body[data-page="refer"] #contact .contact__info li > svg,
body[data-page="refer"] #contact .contact__info li > * {
  position: relative !important;
}
body[data-page="refer"] #contact .contact__info li {
  position: relative !important;
  padding-left: calc(44px + var(--step) * 1.5) !important;
}
body[data-page="refer"] #contact .contact__info li svg {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  background: #cbb860 !important;
  color: #ffffff !important;
}
body[data-page="refer"] #contact .contact__info strong {
  display: none !important;
}
body[data-page="refer"] #contact .contact__info a,
body[data-page="refer"] #contact .contact__info span span {
  color: #334155 !important;
  font-weight: 600 !important;
}

/* Trust bar cards can opt into being real links (TrustBarSection.item_hrefs,
   developer-only) — "Send Your Referrals" points at /refer/. The link wraps
   the title+body inside the existing .trust li card, so it just needs to
   fill that card invisibly; every other trust-bar style (background,
   icon, arrow, hover lift) still lives on the <li> itself, untouched. */
/* `display: block; width: 100%` only sized the link to its own text
   content (~98px), well short of the card's full ~235px height (measured
   via the built page) — most of the card, including the icon and arrow
   areas, was not clickable. `position: absolute; inset: 0` stretches the
   link to the card's whole padding box instead (`.trust li` is already
   `position: relative`), the standard "make the whole card a link"
   pattern, while its content still starts exactly where it did in normal
   flow, so nothing visually shifts. */
/* `inset: 0` was measured (via getBoundingClientRect on the built page) to
   align the link's box with `.trust li`'s own BORDER edge, not its padding
   edge — the text sat flush against the card corner with zero gap despite
   `.trust li`'s own 40/36/36/36 padding, confirmed with a lime outline
   overlay showing the link's box touching the card's outer edge exactly.
   Explicit inset values matching that padding fix it directly, without
   depending on how this browser resolves an absolutely positioned child's
   containing block inside a flex container. */
/* Two competing needs: the whole card should be clickable (inset: 0, the
   card's full box), but the text inside needs the same breathing room
   `.trust li`'s own padding was supposed to give it — which an inset-0
   absolutely positioned child doesn't inherit from its ancestor's padding
   the way in-flow content does (measured directly: the link's box sat
   flush against the card's border edge, ignoring li's declared padding).
   Insetting the link itself by that padding fixed the text but shrank the
   clickable area back down to just the text block, regressing the
   whole-card-is-clickable fix. Padding *on the link itself*, box-sizing
   border-box, gets both: the link's own box still spans the full card
   (inset: 0) for clicks, and its own padding pushes its content inward
   for the visual gap. */
.trust li a.trust__item-link {
  position: absolute !important;
  inset: 0 !important;
  padding: 40px 36px 36px 36px !important;
  box-sizing: border-box !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* Caregivers page: the body copy is the whole section — no image, no
   second column of content — but the generic imageless-about rule still
   splits `.prose` into a 1.1fr/0.9fr pair, leaving the text cramped into
   the left ~55% with an empty right column. Full width here instead. */
body[data-page="caregivers"] #about .wrap:not(.grid) > .prose {
  display: block !important;
  max-width: none !important;
}
/* The site's global `p, li { max-width: var(--measure) }` readability cap
   (base.css) still applied inside the now-full-width .prose container —
   confirmed via computed style, the <p> itself was the one capped at
   ~653px, not its parent. Removed for this page's single paragraph only;
   the sitewide default stays intact everywhere else. */
body[data-page="caregivers"] #about .prose p {
  max-width: none !important;
}

/* ── Contact Us page: same gold circular icon treatment as /refer/ ────── */
body[data-page="contact-us"] #contact .contact__details h2 {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 1.8rem !important;
}
body[data-page="contact-us"] #contact .contact__info {
  margin-top: calc(var(--step) * 3) !important;
  gap: calc(var(--step) * 2.5) !important;
}
body[data-page="contact-us"] #contact .contact__info li {
  align-items: center !important;
  position: relative !important;
  padding-left: calc(44px + var(--step) * 1.5) !important;
}
body[data-page="contact-us"] #contact .contact__info svg {
  width: 20px !important;
  height: 20px !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}
body[data-page="contact-us"] #contact .contact__info li svg {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  background: #cbb860 !important;
  color: #ffffff !important;
}
body[data-page="contact-us"] #contact .contact__info strong {
  display: none !important;
}
body[data-page="contact-us"] #contact .contact__info a,
body[data-page="contact-us"] #contact .contact__info span span {
  color: #334155 !important;
  font-weight: 600 !important;
}

/* Veterans Administration page: same fix as Caregivers — the body copy is
   the whole section (no image, no second column), but the generic
   imageless-about rule splits `.prose` into a 1.1fr/0.9fr pair, and the
   sitewide `p, li { max-width: var(--measure) }` readability cap still
   applies inside that column regardless. */
body[data-page="veterans-administration"] #about .wrap:not(.grid) > .prose {
  display: block !important;
  max-width: none !important;
}
body[data-page="veterans-administration"] #about .prose p {
  max-width: none !important;
}

/* A service card with an `href` (ServiceItem.href, developer-only) wraps
   its content in an <a class="card__link">. `display: contents` keeps the
   link out of the card's own flex layout entirely — its children behave as
   if they were still direct children of `.card` — so nothing about the
   existing icon/heading/description centering has to be duplicated onto
   the link itself. */
.services__feature .card .card__link {
  display: contents;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Companionship page: red hero title + subheading, matching the reference
   design specifically requested for this page (every other page keeps the
   site's usual dark hero text — this is a one-off, not a site-wide change). */



/* Medication Assistance page: same red hero title treatment as Companionship. */



/* Personal Hygiene page: same red hero title treatment as Companionship/
   Medication Assistance. */



/* Mobility and Tripper Services page: same red hero title treatment. */



/* Meal Preparation Services page: same red hero title treatment. */



/* Service cards: red hover state, on both the Services page and the
   homepage services grid. The icons are baked-color PNGs (gold), not
   SVGs a hover rule could recolor via `color` — `filter: brightness(0)
   invert(1)` turns any solid-mark-on-transparent icon white without
   needing a second white icon asset per service. */
body[data-page="services"] #services .services__feature .card {
  transition: background-color 0.2s ease !important;
}
body[data-page="services"] #services .services__feature .card:hover {
  background: #f3413e !important;
  border-color: #f3413e !important;
}
body[data-page="services"] #services .services__feature .card:hover h3 {
  color: #ffffff !important;
}
body[data-page="services"] #services .services__feature .card:hover .services__img {
  filter: brightness(0) invert(1) !important;
}
body[data-page="index"] #services .services__feature .card:not(.card--lead) {
  transition: background-color 0.2s ease !important;
}
body[data-page="index"] #services .services__feature .card:not(.card--lead):hover {
  background: #f3413e !important;
}
body[data-page="index"] #services .services__feature .card:not(.card--lead):hover h3 {
  color: #ffffff !important;
}
body[data-page="index"] #services .services__feature .card:not(.card--lead):hover .services__img,
body[data-page="index"] #services .services__feature .card:not(.card--lead):hover .card__icon {
  filter: brightness(0) invert(1) !important;
}


/* Cascade-order fix: `.trust li a.trust__item-link { position: absolute;
   inset: 0; ... }` (unconditional, full-card click target) is declared later
   in this file than the mobile block that puts the link back in normal flow,
   so at equal specificity the later, unconditional rule was winning even on
   mobile — collapsing every card to near-zero height again. Appended here,
   after it, to actually win. */
@media (max-width: 768px) {
  .trust li a.trust__item-link {
    position: static !important;
    inset: auto !important;
  }
}


/* ── Homepage "Our Mission Statement" card: text panel over a stacked photo,
   not a scrim'd overlay ──
   The generic `.promo--photo` treatment (base.css) puts the photo as a full
   absolute background behind a dark scrim, with the copy overlaid in white —
   right for a card that needs the photo to fill the whole box, wrong for
   this specific card, whose reference is a light text panel sitting above a
   separate photo strip, not text laid over it. Reordered with flex (`order`)
   rather than changed DOM order: the photo is still the second thing in the
   markup (a caption belongs after its image for a screen reader), it just
   paints first visually. */
body[data-page="index"] .hero__cards--duo .promo:nth-child(1) {
  display: flex !important;
  flex-direction: column !important;
  background: #eef1f4 !important;
  color: #1e293b !important;
  padding: 0 !important;
  min-height: auto !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(1)::after {
  display: none !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(1) .promo__bg {
  position: static !important;
  z-index: auto !important;
  order: 2 !important;
  width: 100% !important;
  height: 230px !important;
  object-fit: cover !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(1) .promo__body {
  order: 1 !important;
  padding: 1.75rem 1.75rem 1.25rem 1.75rem !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(1) .promo__eyebrow {
  /* #64748b measured 4.2:1 on this card's #eef1f4 — short of the 4.5:1 body
     text needs; #475569 clears it. */
  color: #475569 !important;
  opacity: 1 !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(1) .promo__headline {
  color: #1e293b !important;
  font-weight: 400 !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(1) .promo__emphasis {
  font-weight: 800 !important;
}
body[data-page="index"] .hero__cards--duo .promo:nth-child(1) .promo__cta {
  /* Neither the raw accent (#f3413e, 3.29:1) nor `--brand-accent-text`
     (#e12c2e, computed against *white*, 4.03:1) clears 4.5:1 against this
     card's slightly grey #eef1f4 — measured directly rather than assumed:
     #c23431 is the same hue darkened ~20% and gets to 4.84:1. */
  color: #c23431 !important;
}


/* ── Mobile parity exact match with live reference ── */
@media (min-width: 769px) {
  .nav__toggle,
  button.nav__toggle {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* Header 2-row layout */
  header.nav,
  header.nav.nav--logo_left {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    overflow: visible !important;
    min-height: auto !important;
    padding: 0 !important;
  }
  header.nav .wrap,
  header.nav.nav--logo_left .wrap {
    padding-inline: 12px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  header.nav.nav--logo_left .nav__inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-block: 0.6rem 0.45rem !important;
    padding-inline: 0 !important;
    min-height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  header.nav.nav--logo_left .nav__brand {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto 0.35rem auto !important;
    order: 1 !important;
  }
  header.nav.nav--logo_left .nav__logo-img {
    height: 44px !important;
    max-width: 250px !important;
    margin: 0 auto !important;
  }
  header.nav.nav--logo_left .nav__utility {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  header.nav.nav--logo_left .nav__utility .nav__cta,
  header.nav.nav--logo_left .nav__utility .nav__utility-link {
    display: none !important;
  }
  header.nav.nav--logo_left .nav__utility .nav__tel {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    color: #334155 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  header.nav.nav--logo_left .nav__utility .nav__tel svg {
    width: 16px !important;
    height: 16px !important;
    color: #334155 !important;
    flex-shrink: 0 !important;
  }
  header.nav.nav--logo_left .nav__tel-label {
    display: inline !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    margin-right: 0.2rem !important;
  }
  header.nav.nav--logo_left .nav__tel-number {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #e33c39 !important;
  }
  button.nav__toggle,
  .nav__toggle,
  header.nav .nav__toggle,
  .nav--logo_left .nav__toggle {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e33c39 !important;
    border-radius: 6px !important;
    width: 40px !important;
    height: 36px !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(227, 60, 57, 0.25) !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 999 !important;
    flex: 0 0 40px !important;
  }
  .nav__toggle .nav__bars,
  header.nav .nav__toggle .nav__bars,
  .nav--logo_left .nav__toggle .nav__bars {
    display: block !important;
    position: relative !important;
    width: 20px !important;
    height: 2.5px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
  }
  .nav__toggle .nav__bars::before,
  header.nav .nav__toggle .nav__bars::before,
  .nav--logo_left .nav__toggle .nav__bars::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: -6px !important;
    width: 20px !important;
    height: 2.5px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
  }
  .nav__toggle .nav__bars::after,
  header.nav .nav__toggle .nav__bars::after,
  .nav--logo_left .nav__toggle .nav__bars::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 6px !important;
    width: 20px !important;
    height: 2.5px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
  }
  header.nav.nav--logo_left .nav__links:not([data-open="true"]) {
    display: none !important;
  }
  /* Mobile slide-in red drawer matching live reference */
  header.nav.nav--logo_left .nav__links:not([data-open="true"]) {
    display: none !important;
  }
  header.nav.nav--logo_left .nav__links[data-open="true"] {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: clamp(250px, 64vw, 320px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #e33c39 !important;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25) !important;
    padding: 5.5rem 2rem 2.5rem 2rem !important;
    margin: 0 !important;
    border: none !important;
    z-index: 99998 !important;
    gap: 1.25rem !important;
    overflow-y: auto !important;
  }
  header.nav.nav--logo_left .nav__links[data-open="true"] li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  header.nav.nav--logo_left .nav__links[data-open="true"] a {
    color: #ffffff !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    display: block !important;
    padding: 0.35rem 0 !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
  }
  header.nav.nav--logo_left .nav__links[data-open="true"] a:hover {
    transform: translateX(4px) !important;
    opacity: 0.9 !important;
  }
  /* Floating Toggle button on top of drawer when open */
  button.nav__toggle[aria-expanded="true"],
  .nav__toggle[aria-expanded="true"] {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 99999 !important;
    background: #e33c39 !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 4px !important;
  }
  .nav__toggle[aria-expanded="true"] .nav__bars {
    background: transparent !important;
  }
  .nav__toggle[aria-expanded="true"] .nav__bars::before {
    top: 0 !important;
    transform: rotate(45deg) !important;
    background: #ffffff !important;
  }
  .nav__toggle[aria-expanded="true"] .nav__bars::after {
    top: 0 !important;
    transform: rotate(-45deg) !important;
    background: #ffffff !important;
  }

  /* Hero: mobile background and framing */
  body[data-page="index"] .hero {
    min-height: auto !important;
    padding-block: 2rem 1.5rem !important;
    align-items: flex-start !important;
    overflow: hidden !important;
    background: #ffffff !important;
    position: relative !important;
  }
  body[data-page="index"] .hero--image .hero__bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 540px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: 82% 0% !important;
    z-index: 1 !important;
    opacity: 1 !important;
  }
  body[data-page="index"] .hero::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 540px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.70) 35%, rgba(255,255,255,0.28) 65%, #ffffff 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    display: block !important;
  }
  body[data-page="index"] .hero .wrap.hero__inner {
    position: relative !important;
    z-index: 3 !important;
  }
  body[data-page="index"] .hero__copy {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    gap: 0 !important;
  }
  body[data-page="index"] .hero--image .hero__eyebrow {
    font-size: 1.05rem !important;
    letter-spacing: 5px !important;
    color: #222222 !important;
    font-weight: 600 !important;
    margin-bottom: 0.4rem !important;
    order: 1 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9) !important;
  }
  body[data-page="index"] .hero--image h1 {
    font-size: clamp(1.85rem, 6.5vw, 2.35rem) !important;
    max-width: 100% !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    margin-bottom: 0.85rem !important;
    order: 2 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9) !important;
  }
  body[data-page="index"] .hero--image .hero__sub {
    font-size: 0.98rem !important;
    max-width: 100% !important;
    line-height: 1.6 !important;
    color: #282828 !important;
    font-weight: 500 !important;
    margin-bottom: 1.5rem !important;
    order: 3 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9) !important;
  }
  body[data-page="index"] .hero .cta-row {
    display: flex !important;
    order: 4 !important;
    margin-bottom: 2.5rem !important;
  }
  body[data-page="index"] .hero__cards {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    gap: 1.5rem !important;
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    margin-top: 1rem !important;
    padding: 0 !important;
    background: #ffffff !important;
    order: 5 !important;
  }
  body[data-page="index"] .hero__call-bar {
    order: 6 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1.25rem !important;
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    margin-top: 2rem !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  /* Hero Button */
  body[data-page="index"] .hero .cta-row {
    display: flex !important;
    order: 4 !important;
    margin-bottom: 2rem !important;
  }
  body[data-page="index"] .hero .cta-row a.btn--primary,
  body[data-page="index"] .hero .btn--primary {
    background: #e33c39 !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    padding: 6px 6px 6px 24px !important;
    box-shadow: 0 4px 14px rgba(227, 60, 57, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    border: none !important;
    text-decoration: none !important;
    overflow: visible !important;
    position: relative !important;
  }
  body[data-page="index"] .hero .cta-row a.btn--primary::after,
  body[data-page="index"] .hero .btn--primary::after {
    content: "→" !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    background: #ffffff !important;
    color: #e33c39 !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  /* Floating right social share buttons */
  .hero__social {
    position: absolute !important;
    top: 130px !important;
    right: 0 !important;
    z-index: 25 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .hero__social a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    color: #ffffff !important;
  }
  .hero__social a svg {
    width: 18px !important;
    height: 18px !important;
    fill: #ffffff !important;
  }
}


/* ── Interior Page Hero Banners: Consistent Dark Charcoal / Black Text ── */
body:not([data-page="index"]) .hero {
  min-height: clamp(260px, 24vw, 340px) !important;
  padding-block: clamp(2.5rem, 4vw, 3.5rem) !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
}

body:not([data-page="index"]) .hero--image .hero__bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important;
  z-index: 1 !important;
  filter: none !important;
  opacity: 1 !important;
}

body:not([data-page="index"]) .hero .wrap.hero__inner {
  position: relative !important;
  z-index: 3 !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  width: 100% !important;
  padding-inline: 2rem !important;
}

body:not([data-page="index"]) .hero__copy {
  max-width: 620px !important;
  text-align: left !important;
}

body:not([data-page="index"]) .hero--image h1 {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: clamp(2.2rem, 3.5vw, 3rem) !important;
  font-weight: 700 !important;
  color: #2b2b2b !important;
  line-height: 1.18 !important;
  margin-top: 0 !important;
  margin-bottom: 0.65rem !important;
  text-shadow: none !important;
  text-transform: capitalize !important;
}

body:not([data-page="index"]) .hero--image .hero__sub {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: clamp(0.98rem, 1.25vw, 1.12rem) !important;
  color: #373737 !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  text-shadow: none !important;
  margin-bottom: 0 !important;
  max-width: 580px !important;
}

body:not([data-page="index"]) .hero--image .hero__eyebrow {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  margin-bottom: 0.35rem !important;
}

@media (max-width: 768px) {
  body:not([data-page="index"]) .hero {
    min-height: auto !important;
    padding-block: 2.5rem 2rem !important;
    align-items: center !important;
  }
  body:not([data-page="index"]) .hero--image .hero__bg {
    object-position: 75% center !important;
    opacity: 0.88 !important;
  }
  body:not([data-page="index"]) .hero--image h1 {
    font-size: 1.9rem !important;
    color: #1e293b !important;
    margin-bottom: 0.5rem !important;
  }
  body:not([data-page="index"]) .hero--image .hero__sub {
    font-size: 0.95rem !important;
    color: #334155 !important;
    line-height: 1.5 !important;
  }
}


/* ── Service Detail Pages Layout: Left Blob Image, Right Copy with Red Heading ── */
body[data-page="homemaking"] #about .wrap.grid,
body[data-page="companionship"] #about .wrap.grid,
body[data-page="medication-assistance"] #about .wrap.grid,
body[data-page="personal-hygiene"] #about .wrap.grid,
body[data-page="mobility-and-tripper-services"] #about .wrap.grid,
body[data-page="meal-preparation-services"] #about .wrap.grid {
  display: grid !important;
  grid-template-columns: 0.95fr 1.05fr !important;
  column-gap: clamp(2.5rem, 5vw, 4.5rem) !important;
  align-items: center !important;
}

body[data-page="homemaking"] #about .about__media,
body[data-page="companionship"] #about .about__media,
body[data-page="medication-assistance"] #about .about__media,
body[data-page="personal-hygiene"] #about .about__media,
body[data-page="mobility-and-tripper-services"] #about .about__media,
body[data-page="meal-preparation-services"] #about .about__media {
  order: 1 !important;
  grid-column: 1 !important;
}

body[data-page="homemaking"] #about .prose,
body[data-page="companionship"] #about .prose,
body[data-page="medication-assistance"] #about .prose,
body[data-page="personal-hygiene"] #about .prose,
body[data-page="mobility-and-tripper-services"] #about .prose,
body[data-page="meal-preparation-services"] #about .prose {
  order: 2 !important;
  grid-column: 2 !important;
}

body[data-page="homemaking"] #about h2,
body[data-page="companionship"] #about h2,
body[data-page="medication-assistance"] #about h2,
body[data-page="personal-hygiene"] #about h2,
body[data-page="mobility-and-tripper-services"] #about h2,
body[data-page="meal-preparation-services"] #about h2 {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: clamp(1.8rem, 2.5vw, 2.3rem) !important;
  color: #e74c3c !important;
  text-transform: capitalize !important;
  margin-bottom: 1.25rem !important;
}

.about__media img[src*="pic-srv-"] {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 480px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  body[data-page="homemaking"] #about .wrap.grid,
  body[data-page="companionship"] #about .wrap.grid,
  body[data-page="medication-assistance"] #about .wrap.grid,
  body[data-page="personal-hygiene"] #about .wrap.grid,
  body[data-page="mobility-and-tripper-services"] #about .wrap.grid,
  body[data-page="meal-preparation-services"] #about .wrap.grid {
    grid-template-columns: 1fr !important;
  }
  body[data-page="homemaking"] #about .about__media,
  body[data-page="companionship"] #about .about__media,
  body[data-page="medication-assistance"] #about .about__media,
  body[data-page="personal-hygiene"] #about .about__media,
  body[data-page="mobility-and-tripper-services"] #about .about__media,
  body[data-page="meal-preparation-services"] #about .about__media {
    order: 1 !important;
    margin-bottom: 1.5rem !important;
  }
  body[data-page="homemaking"] #about .prose,
  body[data-page="companionship"] #about .prose,
  body[data-page="medication-assistance"] #about .prose,
  body[data-page="personal-hygiene"] #about .prose,
  body[data-page="mobility-and-tripper-services"] #about .prose,
  body[data-page="meal-preparation-services"] #about .prose {
    order: 2 !important;
  }
}


/* ── Survey Page: Clean Framed Card & Embed Layout ── */
body[data-page="survey"] #widget {
  background: #f8fafc !important;
  padding-block: clamp(3.5rem, 6vw, 5.5rem) !important;
}
body[data-page="survey"] #widget .wrap {
  max-width: 920px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.07) !important;
  border: 1px solid #e2e8f0 !important;
}
body[data-page="survey"] #widget h2 {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important;
  color: #1e293b !important;
  text-align: center !important;
  margin-bottom: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}
body[data-page="survey"] #widget .widget__intro {
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 1.05rem !important;
  color: #475569 !important;
  text-align: center !important;
  max-width: 680px !important;
  margin: 0 auto 2rem auto !important;
  line-height: 1.6 !important;
}
body[data-page="survey"] #widget .embed {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* ── Interior Page Hero Overlay: High Contrast Black/Charcoal Text ── */
body:not([data-page="index"]) .hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 40%, rgba(255,255,255,0.3) 72%, rgba(255,255,255,0) 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
@media (max-width: 768px) {
  body:not([data-page="index"]) .hero::after {
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.35) 100%) !important;
  }
}