:root {
  --ink: #2E1408;
  --ink-soft: #4A2818;
  --accent: #9A6224;
  --accent-dark: #7A4D1A;
  --accent-light: #C8924A;
  --accent-pale: #E8D2B0;
  --cream: #FBF7F1;
  --cream-alt: #F3EBE0;
  --muted: #7A6A5C;
  --border: #E4D8C8;
  --white: #FFFFFF;
  --shadow: 0 2px 8px rgba(46,20,8,.07), 0 12px 32px rgba(46,20,8,.06);
  --shadow-sm: 0 1px 3px rgba(46,20,8,.09);
  --radius: 10px;
  --radius-lg: 16px;
  --head: "Oswald", "Arial Narrow", sans-serif;
  --body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink-soft);
  font-family: var(--body); font-size: 17px; line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-dark); }
h1, h2, h3, h4, h5 {
  font-family: var(--head); color: var(--ink);
  font-weight: 600; line-height: 1.14; margin: 0 0 .6em; letter-spacing: .1px;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.08rem; }
p { margin: 0 0 1.05em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 860px; }
section { padding: 64px 0; }
.alt { background: var(--cream-alt); }
.eyebrow {
  font-family: var(--head); text-transform: uppercase; letter-spacing: .19em;
  font-size: .8rem; font-weight: 600; color: var(--accent); margin: 0 0 .8rem;
}
.lede { font-size: 1.16rem; color: var(--ink-soft); }
.skip {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  width: auto; height: auto; clip-path: none; left: 12px; top: 12px;
  background: var(--white); padding: 10px 16px; z-index: 999; border-radius: 6px;
}

/* Grid children default to min-width:auto, which prevents them shrinking below
   their content and causes horizontal overflow on narrow viewports. */
.two-col > *, .footer-grid > *, .timeline > *, .cards > *, .contrast > *,
.stat-strip .wrap > *, .databox .nums > *, .mega > *, .hero-inner > * {
  min-width: 0;
}
.two-col, .footer-grid, .timeline, .cards, .hero-inner { max-width: 100%; }
.site-footer a, .specs dd, .card p, .faq .answer p, .lead-form { overflow-wrap: anywhere; }
.wrap { overflow-wrap: break-word; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 90; background: var(--white);
  border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.header-row {
  max-width: 1340px; margin: 0 auto; padding: 10px 18px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
}
.brand { justify-self: center; display: block; }
.brand img { height: 52px; width: auto; }
.nav-main { display: flex; align-items: center; gap: 4px; }
.nav-main > li { list-style: none; position: static; }
.nav-main ul { margin: 0; padding: 0; list-style: none; }
.nav-link {
  font-family: var(--head); font-size: .93rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink);
  text-decoration: none; padding: 10px 11px; border-radius: 7px;
  display: inline-flex; align-items: center; gap: 5px; background: none;
  border: 0; cursor: pointer; font-family: var(--head);
}
.nav-link:hover { background: var(--cream-alt); color: var(--accent-dark); }
.caret {
  width: 8px; height: 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .18s ease;
}
.has-mega:hover .caret, .has-mega:focus-within .caret { transform: rotate(-135deg) translate(-3px,-3px); }
.mega {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(-8px);
  top: 76px; width: min(1180px, calc(100vw - 32px));
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 26px 30px;
  opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px;
}
.has-mega:hover .mega, .has-mega:focus-within .mega {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.mega-col h4 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .15em;
  color: var(--accent); margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.mega-col a {
  display: block; font-size: .93rem; color: var(--ink-soft); text-decoration: none;
  padding: 5px 0; line-height: 1.36;
}
.mega-col a:hover { color: var(--accent-dark); }
/* Only the 5-column services menu is viewport-centred. A small dropdown centred
   on the viewport looks detached from the link that opened it. */
.mega-narrow {
  grid-template-columns: 1fr;
  width: min(340px, calc(100vw - 32px));
  position: absolute; left: 0; top: calc(100% + 6px);
  transform: translateX(0) translateY(-8px);
}
.has-mega:hover .mega-narrow, .has-mega:focus-within .mega-narrow {
  transform: translateX(0) translateY(0);
}
/* Must out-specify `.nav-main > li { position: static }` above, or the narrow
   dropdown resolves against the header and lands at the far left. */
.nav-main > li.has-mega { position: relative; }
.header-cta { justify-self: end; display: flex; align-items: center; gap: 10px; }
.phone-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--white); text-decoration: none;
  font-family: var(--head); font-weight: 600; letter-spacing: .04em;
  padding: 11px 18px; border-radius: 999px; white-space: nowrap; font-size: 1rem;
}
.phone-pill:hover { background: var(--accent-dark); }
.phone-pill svg { flex: 0 0 auto; }
.burger {
  display: block; background: none; border: 0; padding: 8px; cursor: pointer;
}
.burger span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; }

/* mobile drawer */
.drawer { display: none; position: relative; }
.drawer summary { list-style: none; }
.drawer summary::-webkit-details-marker { display: none; }

@media (max-width: 1080px) {
  .nav-main { display: none; }
  .header-row { grid-template-columns: auto 1fr auto; padding: 8px 12px; }
  .drawer { display: block; justify-self: start; }
  .brand img { height: 40px; }
  .phone-pill { padding: 9px 13px; font-size: .92rem; }
}
@media (max-width: 400px) {
  .brand img { height: 32px; }
  .phone-pill { padding: 8px 10px; font-size: .8rem; gap: 5px; letter-spacing: 0; }
  .header-row { gap: 6px; padding: 7px 8px; }
}
@media (max-width: 340px) {
  .brand img { height: 27px; }
  .phone-pill { font-size: .74rem; padding: 7px 8px; }
}
.drawer-panel {
  position: fixed; inset: 0 auto 0 0; width: min(345px, 88vw); background: var(--white);
  border-right: 1px solid var(--border); box-shadow: var(--shadow); z-index: 120;
  overflow-y: auto; padding: 18px 20px 60px;
}
.drawer-panel h4 { margin: 18px 0 6px; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--accent); }
/* top level drawer links */
.drawer-panel > a, .drawer-panel details > summary {
  display: block; padding: 12px 4px; border-bottom: 1px solid var(--border);
  font-family: var(--head); text-transform: uppercase; letter-spacing: .07em;
  font-size: .98rem; color: var(--ink); text-decoration: none; cursor: pointer;
}
/* CRITICAL: nested links inside nested <details> must stack, not run inline */
.drawer-panel details details > a,
.drawer-panel details > div > a,
.drawer-panel details a {
  display: block; width: 100%; padding: 9px 4px 9px 14px;
  font-family: var(--body); text-transform: none; letter-spacing: 0;
  font-size: .95rem; color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid var(--cream-alt); line-height: 1.4;
}
.drawer-panel details details > summary {
  font-family: var(--body); text-transform: none; letter-spacing: 0;
  font-size: .95rem; font-weight: 600; padding-left: 14px; color: var(--ink-soft);
  border-bottom: 1px solid var(--cream-alt);
}
/* Higher specificity than the display:block rules above, or the arrow stays inline
   and its width is ignored (renders as a thin bar instead of a chevron). */
.drawer-panel details > summary,
.drawer-panel details details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.drawer-panel details > summary::after,
.drawer-panel details details > summary::after {
  content: ""; display: block; flex: 0 0 auto;
  width: 9px; height: 9px; margin-right: 8px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.drawer-panel details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.drawer[open] .drawer-backdrop {
  position: fixed; inset: 0; background: rgba(46,20,8,.45); z-index: 110;
}
.drawer-close {
  position: absolute; top: 14px; right: 16px; font-size: 1.7rem; line-height: 1;
  color: var(--muted); text-decoration: none;
}

/* ---------------------------------------------------------------- hero */
.hero { position: relative; color: var(--white); padding: 0; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(46,20,8,.90) 0%, rgba(46,20,8,.80) 42%, rgba(46,20,8,.52) 100%);
}
.hero-inner {
  position: relative; display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 46px; align-items: center; padding: 74px 0 78px;
}
.hero-inner.solo { grid-template-columns: 1fr; max-width: 880px; }
.hero h1 { color: var(--white); }
.hero .eyebrow { color: var(--accent-light); }
.hero .lede { color: #F2E7DA; font-size: 1.17rem; }
.hero .lede a { color: var(--accent-light); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: var(--head); font-weight: 600; letter-spacing: .05em; font-size: 1.02rem;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-light); color: var(--ink); }
.btn-ghost { border-color: rgba(255,255,255,.55); color: var(--white); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-solid { background: var(--ink); color: var(--white); }
.btn-solid:hover { background: var(--accent-dark); }

/* ---------------------------------------------------------------- form */
.lead-form {
  background: var(--white); border-radius: var(--radius-lg); padding: 26px;
  box-shadow: var(--shadow); color: var(--ink-soft);
}
.lead-form h3 { margin: 0 0 4px; font-size: 1.35rem; }
.lead-form .form-note { font-size: .87rem; color: var(--muted); margin: 0 0 16px; }
.field { margin-bottom: 12px; }
.field label {
  display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); margin-bottom: 5px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--body); font-size: 1rem; background: var(--cream); color: var(--ink);
}
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent-light); outline-offset: 1px; background: var(--white);
}
.lead-form .btn { width: 100%; justify-content: center; margin-top: 4px; }

/* ---------------------------------------------------------------- stat strip */
/* grid-auto-rows keeps every card the same height across ALL rows, not just
   within a row, so a 6-card grid reads as one even block. */
.features { display: grid; gap: 26px; margin-top: 30px; align-items: stretch; grid-auto-rows: 1fr; }
.features.cols-2 { grid-template-columns: repeat(2, 1fr); }
.features.cols-3 { grid-template-columns: repeat(3, 1fr); }
.features.cols-4 { grid-template-columns: repeat(4, 1fr); }
.features > * { min-width: 0; }
.feature {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px 24px 22px;
  box-shadow: var(--shadow-sm);
}
.feature h3 { margin: 0 0 9px; font-size: 1.06rem; }
.feature p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

.numbered-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 34px; margin-top: 30px; }
.numbered-grid > * { min-width: 0; }
.numbered { position: relative; padding-left: 52px; }
.numbered::before {
  content: attr(data-n); position: absolute; left: 0; top: -2px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.numbered h3 { margin: 4px 0 7px; font-size: 1.04rem; }
.numbered p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

@media (max-width: 900px) {
  .features.cols-3, .features.cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .features.cols-2, .features.cols-3, .features.cols-4 { grid-template-columns: 1fr; }
  .numbered-grid { grid-template-columns: 1fr; }
}

.form-status { display: none; margin-top: 12px; font-size: .92rem; line-height: 1.5; border-radius: 10px; }
.form-status.is-visible { display: block; padding: 11px 14px; }
.form-status.is-success { background: #EAF3E7; color: #2F5D2A; border: 1px solid #BFDCB6; }
.form-status.is-error { background: #FBEAE7; color: #8A2C1B; border: 1px solid #F0C4BB; }

.specs-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px 28px; box-shadow: var(--shadow-sm);
}
.specs-strip > * { min-width: 0; }
.specs-strip dt {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--accent); font-weight: 700; margin-bottom: 6px;
}
.specs-strip dd { margin: 0; font-size: .95rem; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 900px) { .specs-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .specs-strip { grid-template-columns: 1fr; } }

.stat-strip { background: var(--ink); color: var(--white); padding: 0; }
.stat-strip .wrap {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 30px; padding-bottom: 30px;
}
.stat-strip.four .wrap { grid-template-columns: repeat(4, 1fr); }
.stat b {
  display: block; font-family: var(--head); font-size: clamp(1.6rem, 3vw, 2.15rem);
  color: var(--accent-light); font-weight: 600; line-height: 1.1;
}
.stat span { font-size: .92rem; color: #E5D6C4; display: block; margin-top: 3px; }

/* ---------------------------------------------------------------- layout blocks */
.two-col { display: grid; grid-template-columns: 1.24fr .76fr; gap: 44px; align-items: start; }

.checks { list-style: none; margin: 0 0 22px; padding: 0; }
.checks li { position: relative; padding: 0 0 11px 30px; }
.checks li::before {
  content: ""; position: absolute; left: 3px; top: 8px; width: 6px; height: 12px;
  border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(42deg);
}
.specs {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow-sm); margin-top: 22px;
}
.specs h3 { font-size: 1.06rem; margin-bottom: 14px; }
.specs dl { margin: 0; }
.specs dt {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--muted); font-weight: 700;
}
.specs dd { margin: 2px 0 13px; font-size: .96rem; color: var(--ink); }
.specs dd:last-child { margin-bottom: 0; }
figure { margin: 0; }
/* Images run as a wide band across the content column rather than sitting in a
   side rail, so they are large, always landscape, and never leave a void. */
.banner { margin: 34px 0; }
.banner img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}


figure img {
  border-radius: var(--radius); box-shadow: var(--shadow);
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}


.contrast {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 26px 0;
}
.contrast > div { padding: 20px 22px; }
.contrast .generic { background: var(--cream-alt); }
.contrast .ours { background: var(--white); border-left: 4px solid var(--accent); }
.contrast h4 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 9px;
}
.contrast .generic h4 { color: var(--muted); }
.contrast .ours h4 { color: var(--accent); }
.contrast .generic p { color: var(--muted); text-decoration: line-through; margin: 0; font-size: .96rem; }
.contrast .ours p { margin: 0; font-size: .96rem; }

.databox {
  background: var(--ink); color: #EFE2D2; border-radius: var(--radius-lg);
  padding: 30px 32px; margin: 30px 0;
}
.databox h3 { color: var(--white); }
.databox .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.databox .nums b {
  display: block; font-family: var(--head); font-size: 1.75rem; color: var(--accent-light); line-height: 1.1;
}
.databox .nums span { font-size: .86rem; }
.databox p:last-child { margin-bottom: 0; }

.notebox {
  background: var(--white); border: 1px solid var(--border); border-left: 5px solid var(--accent-light);
  border-radius: var(--radius); padding: 20px 24px; margin: 26px 0; box-shadow: var(--shadow-sm);
}
.notebox p { margin: 0; font-size: .98rem; }
.notebox strong { color: var(--ink); }

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 32px; }
/* Four columns squeezed inside a two-column layout produces slivers of text and
   a large void underneath. Stack them when nested. */
.two-col .timeline { grid-template-columns: 1fr; gap: 18px; }
.two-col .timeline .step { padding-left: 46px; }
.step { position: relative; padding-top: 46px; }
.step::before {
  content: attr(data-n); position: absolute; top: 0; left: 0;
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--white);
  font-family: var(--head); font-weight: 600; display: grid; place-items: center; font-size: 1.02rem;
}
.step h3 { font-size: 1.08rem; margin-bottom: 6px; }
.step p { font-size: .95rem; margin: 0; }

.faq { max-width: 900px; margin-top: 26px; }
.faq details {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 12px; box-shadow: var(--shadow-sm);
}
.faq summary {
  cursor: pointer; padding: 17px 52px 17px 22px; position: relative; list-style: none;
  font-family: var(--head); font-size: 1.09rem; font-weight: 500; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--accent); font-family: var(--head); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq .answer { padding: 0 22px 19px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* Grid keeps every card the same height across all rows (grid-auto-rows: 1fr).
   Service clusters are 6, 4, 6, 7, 7, so a row is never short by more than one
   card; that lone final card is centred rather than left stranded at the left. */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; grid-auto-rows: 1fr; }
.cards > * { min-width: 0; }
.cards > :last-child:nth-child(3n + 1) { grid-column: 2; }
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards > :last-child:nth-child(3n + 1) { grid-column: auto; }
}
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

/* Cards sit on the cream 'alt' section background, so they need a rounder corner,
   a lift and a clearer edge to read as distinct boxes rather than blending in. */
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(46, 20, 8, .16);
  border-color: var(--accent-pale);
}
.card img { border-radius: 0; }
.card img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.card-static { cursor: default; }
.card-static:hover { transform: none; box-shadow: var(--shadow-sm); }
.card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
/* Titles run to two lines on the longer service names and blurbs to three, so both
   reserve their space. That makes every card in every cluster exactly the same
   height, at any viewport width. */
.card h3 { font-size: 1.13rem; margin-bottom: 7px; line-height: 1.3; min-height: 2.6em; }
/* Reserve three lines so every card is the same height in every cluster, not just
   within one row. Blurbs are written to a consistent length to suit this. */
.card p {
  font-size: .94rem; color: var(--ink-soft); flex: 1; margin-bottom: 13px;
  min-height: 6.4em;
  line-height: 1.6;
}
.card a.more {
  font-family: var(--head); font-size: .87rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent-dark); text-decoration: none; font-weight: 600;
}
.card a.more:hover { color: var(--accent); }
.card a.stretch::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }

.cluster-head {
  font-family: var(--head); text-transform: uppercase; letter-spacing: .15em;
  font-size: .84rem; color: var(--accent); margin: 44px 0 18px;
  padding-bottom: 9px; border-bottom: 1px solid var(--border);
}
.cluster-head:first-of-type { margin-top: 24px; }

.pill-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }
.pill-list li {
  background: var(--white); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 16px; font-size: .93rem; color: var(--ink-soft);
}

.cta-band { background: var(--accent); color: var(--white); text-align: center; }
.cta-band h2 { color: var(--white); }
.cta-band p { max-width: 640px; margin: 0 auto 24px; color: #FBEEDD; font-size: 1.08rem; }
.cta-band .btn-solid { background: var(--ink); }
.cta-band .btn-ghost { border-color: rgba(255,255,255,.7); }

.table-wrap { overflow-x: auto; margin: 24px 0; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--white); }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); }
th {
  font-family: var(--head); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--white); background: var(--ink); font-weight: 500;
}
tbody tr:nth-child(even) { background: var(--cream-alt); }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: #D9C9B6; padding: 56px 0 0; font-size: .96rem; }
.site-footer a { color: #D9C9B6; text-decoration: none; }
.site-footer a:hover { color: var(--accent-light); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 36px; }
.site-footer h4 {
  color: var(--white); font-size: .82rem; text-transform: uppercase; letter-spacing: .15em;
  margin-bottom: 15px;
}
.footer-logo img { height: 60px; width: auto; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.hours-row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; margin-bottom: 5px; }
.hours-row span:last-child { color: var(--accent-light); }
.socials { display: flex; gap: 10px; margin-top: 16px; }
.socials a {
  width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  display: grid; place-items: center;
}
.socials a:hover { border-color: var(--accent-light); background: rgba(255,255,255,.06); }
.map-embed {
  border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.15); margin-top: 4px;
}
.map-embed iframe { display: block; width: 100%; height: 190px; border: 0; filter: saturate(.8); }
.footer-bottom {
  margin-top: 44px; border-top: 1px solid rgba(255,255,255,.13); padding: 20px 0 26px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .87rem; color: #A89684;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; padding: 54px 0 60px; }
  .two-col { grid-template-columns: 1fr; gap: 30px; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .databox .nums { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  section { padding: 46px 0; }
  .stat-strip .wrap, .stat-strip.four .wrap { grid-template-columns: 1fr 1fr; gap: 16px; }
  .cards { grid-template-columns: 1fr; }
  .contrast { grid-template-columns: 1fr; }
  .contrast .ours { border-left: 0; border-top: 4px solid var(--accent); }
  .footer-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .databox { padding: 24px 22px; }
}
@media print {
  .site-header, .site-footer, .lead-form, .cta-band { display: none; }
}