/* ==========================================================================
   CHANDIGARH DOODLE POODLE — HOMEPAGE
   Design system + homepage styles
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Layout primitives
   4.  Typography
   5.  Buttons & links
   6.  Header / navigation
   7.  Hero
   8.  Short video section
   9.  Trust strip
   10. Availability
   11. Cards / offer
   12. Split sections
   13. Buyer education
   14. Steps
   15. Chips / questions
   16. FAQ
   17. Enquiry
   18. Footer
   19. Motion & reveal
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --ink:          #12161A;
  --ink-soft:     #1B2228;
  --ink-line:     #29323A;
  --paper:        #FBF8F4;
  --paper-2:      #F4EEE5;
  --white:        #FFFFFF;

  --brand:        #1E4B44;
  --brand-2:      #2C6A5E;
  --brand-soft:   #E4EDEA;

  --gold:         #A9793F;
  --gold-2:       #C89A5C;
  --gold-soft:    #F0E4D0;

  --text:         #21272B;
  --text-2:       #4C555C;
  --muted:        #737C83;
  --muted-light:  rgba(255,255,255,.66);

  --line:         rgba(18,22,26,.10);
  --line-strong:  rgba(18,22,26,.18);
  --line-dark:    rgba(255,255,255,.14);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.4rem, 1.35rem + 3.4vw, 4.1rem);
  --fs-h2:      clamp(1.85rem, 1.25rem + 1.9vw, 2.85rem);
  --fs-h3:      clamp(1.08rem, 1rem + 0.3vw, 1.28rem);
  --fs-lede:    clamp(1.06rem, 0.98rem + 0.35vw, 1.22rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  /* Space */
  --gutter:     clamp(1.15rem, 0.6rem + 2.2vw, 2.5rem);
  --section-y:  clamp(4rem, 2.4rem + 5.5vw, 7.5rem);
  --maxw:       1220px;
  --maxw-narrow: 820px;

  /* Shape */
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 10px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(18,22,26,.05), 0 6px 20px -12px rgba(18,22,26,.22);
  --shadow-2: 0 2px 6px rgba(18,22,26,.06), 0 22px 48px -22px rgba(18,22,26,.34);
  --shadow-3: 0 30px 80px -30px rgba(18,22,26,.45);

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Author display rules below (grid/flex) would otherwise beat the UA [hidden] rule. */
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.14; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-2); }

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

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

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--ink); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm); font-size: var(--fs-sm); text-decoration: none;
  transition: transform .18s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); color: #fff; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.shell-narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--section-y); }
.section-tint { background: var(--paper-2); }
.section-dark { background: var(--ink); color: rgba(255,255,255,.82); }
.section-dark h2, .section-dark h3 { color: #fff; }

.section-head { max-width: 62ch; margin-bottom: clamp(2.2rem, 1.4rem + 2vw, 3.4rem); }
.section-head-center { margin-inline: auto; text-align: center; }
.section-head-split {
  display: grid; gap: 1.25rem clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr; max-width: none; align-items: end;
}
.section-head h2 { font-size: var(--fs-h2); }
.section-intro { font-size: var(--fs-lede); color: var(--text-2); margin-top: 1rem; }
.section-intro-sm { font-size: var(--fs-body); }
.section-dark .section-intro { color: rgba(255,255,255,.7); }
.section-head-center .section-intro { margin-inline: auto; max-width: 60ch; }

.section-foot { margin-top: clamp(2rem, 4vw, 3rem); font-size: var(--fs-sm); color: var(--muted); text-align: center; }

@media (min-width: 860px) {
  .section-head-split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .section-head-split .section-intro { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY HELPERS
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .9rem;
}
.eyebrow-light { color: var(--gold-2); }

.lede { font-size: var(--fs-lede); color: var(--text-2); }
.lede-sub { color: var(--text-2); }

.note {
  margin-top: 1.75rem; padding: 1.15rem 1.35rem;
  background: var(--gold-soft); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: #4A3A22; border: 1px solid rgba(169,121,63,.2);
}
.note-plain {
  background: transparent; border: 0; border-left: 3px solid var(--line-strong);
  border-radius: 0; padding: .1rem 0 .1rem 1.15rem; color: var(--muted);
}

/* --------------------------------------------------------------------------
   5. BUTTONS & LINKS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  line-height: 1.2; text-decoration: none; cursor: pointer;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-pill);
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              color .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

.btn-primary { --btn-bg: var(--brand); --btn-fg: #fff; }
.btn-primary:hover { --btn-bg: var(--brand-2); }

.btn-outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn-outline:hover { --btn-bg: rgba(18,22,26,.04); --btn-bd: var(--ink); }

.btn-ghost { --btn-bg: rgba(18,22,26,.05); --btn-fg: var(--ink); }

.btn-on-dark { --btn-fg: #fff; --btn-bd: var(--line-dark); }
.btn-on-dark:hover { --btn-bg: rgba(255,255,255,.08); --btn-bd: rgba(255,255,255,.4); }

.btn-text {
  --btn-bg: transparent; --btn-fg: var(--text-2); --btn-bd: transparent;
  padding-inline: .35rem; font-weight: 500;
}
.btn-text:hover { --btn-fg: var(--ink); box-shadow: none; }

.btn-sm { padding: .6rem 1.1rem; font-size: var(--fs-xs); }
.btn-lg { padding: 1rem 1.85rem; font-size: 1rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform .18s var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }

/* .link-future marks links to pages not yet built. No visual treatment by design —
   it exists so the future pages can be found and audited with one selector. */

/* --------------------------------------------------------------------------
   6. GLOBAL HEADER
   Markup is generated by build/render-header.mjs from content/navigation.json.
   Behaviour lives in assets/js/global-header.js. These styles are shared by
   every page — the only per-page difference is [aria-current] on one link.
   -------------------------------------------------------------------------- */
:root { --header-h: 70px; }
@media (min-width: 1024px) { :root { --header-h: 84px; } }

/* Sticky header would otherwise cover the top of an anchored section. */
main [id] { scroll-margin-top: calc(var(--header-h) + 18px); }

/* Background scrolling is locked while the mobile menu is open. */
html.nav-open { overflow: hidden; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  --header-h: 70px;
  background: rgba(251,248,244,.88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease);
}
.site-header.is-stuck {
  --header-h: 64px;
  border-bottom-color: var(--line);
  background: rgba(251,248,244,.94);
  box-shadow: 0 8px 28px -22px rgba(18,22,26,.55);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(.75rem, 1.6vw, 1.75rem);
  min-height: var(--header-h);
  transition: min-height .25s var(--ease);
}

/* ---- brand ----
   The official logo is used unmodified: no filter, no opacity, no blend mode,
   no recolouring, nothing cropped. Only `width` is set; `height: auto` keeps
   the artwork's aspect ratio, and the width/height attributes on the <img>
   reserve the box so it cannot shift layout while loading. */
.brand {
  display: inline-flex; align-items: center;
  text-decoration: none; flex: 0 0 auto; min-width: 0;
  /* The supplied artwork has a solid white background (not transparent), which
     against the cream header would show as a hard-edged white rectangle. The
     plate extends that white into a soft rounded lockup instead. The logo
     itself is untouched — this is background around it, not a filter on it. */
  padding: 5px 11px; border-radius: 13px; background: #fff;
}
.brand-logo { display: block; height: auto; }
.brand-logo--header { width: 160px; transition: width .25s var(--ease); }

/* ---- primary nav ---- */
.nav-list { display: flex; align-items: center; gap: clamp(.4rem, 1.1vw, 1.35rem); }
.nav-item { position: static; }
.nav-item-row { display: inline-flex; align-items: center; gap: .05rem; }

.nav-link {
  position: relative; display: inline-block; white-space: nowrap;
  padding: .45rem 0; text-decoration: none;
  font-size: .9rem; font-weight: 500; color: var(--text-2);
  transition: color .18s var(--ease);
}
.nav-link:hover { color: var(--ink); }

/* Hover affordance: a hairline gold rule that draws in. */
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: .05rem;
  height: 1.5px; background: var(--gold); border-radius: 2px;
  transition: right .22s var(--ease);
}
.nav-link:hover::after { right: 0; }

/* Current section: weight change plus a single gold dot. The dot is driven by
   .is-active on the item, so a child page (e.g. /service-areas/mohali/) keeps
   its parent lit even though the parent link is not the current URL. */
.nav-item.is-active > .nav-link,
.nav-item.is-active > .nav-item-row > .nav-link { color: var(--ink); font-weight: 600; }
.nav-item.is-active > .nav-link::after,
.nav-item.is-active > .nav-item-row > .nav-link::after {
  left: 50%; right: auto; bottom: -.15rem;
  width: 5px; height: 5px; border-radius: 50%;
  transform: translateX(-50%); transition: none;
}

/* ---- mega-menu disclosure button ---- */
.nav-caret {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--muted); cursor: pointer;
  transition: transform .2s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
.nav-caret:hover { color: var(--ink); background: rgba(18,22,26,.05); }
.nav-caret[aria-expanded="true"] { transform: rotate(180deg); color: var(--ink); }

/* ---- mega menu ---- */
/* Hidden via the hidden attribute so it is out of the accessibility tree and
   out of the tab order until opened — CSS alone would leave it focusable. */
.mega[hidden] { display: none; }

.mega-inner {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2.5rem);
  grid-template-columns: 1fr;
}
.mega-h {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--gold);
  margin-bottom: .7rem;
}
.mega-col a {
  display: block; padding: .5rem .6rem; margin-left: -.6rem;
  border-radius: var(--r-sm); text-decoration: none;
  font-size: var(--fs-sm); font-weight: 500; color: var(--text);
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.mega-col a:hover { background: var(--brand-soft); color: var(--brand); }
.mega-note {
  display: block; margin-top: .12rem;
  font-size: var(--fs-xs); font-weight: 400; color: var(--muted);
}
.mega-col li + li { margin-top: .1rem; }

.mega-card {
  padding: 1.25rem; border-radius: var(--r-md);
  background: var(--brand-soft); border: 1px solid rgba(30,75,68,.14);
}
.mega-card-title { font-family: var(--font-display); font-size: 1.12rem; color: var(--brand); margin-bottom: .45rem; }
.mega-card-text { font-size: var(--fs-xs); color: var(--text-2); margin-bottom: .9rem; }
.mega-card-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--brand); text-decoration: none;
}
.mega-card-cta:hover { text-decoration: underline; }

/* ---- right-hand actions ---- */
.header-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

.header-utility {
  display: none; white-space: nowrap; text-decoration: none;
  font-size: .875rem; font-weight: 500; color: var(--text-2);
  padding: .5rem .6rem; border-radius: var(--r-sm);
  transition: color .18s var(--ease);
}
.header-utility:hover { color: var(--ink); }

.header-phone {
  display: none; align-items: center; gap: .4rem; white-space: nowrap;
  font-size: .875rem; font-weight: 600; color: var(--ink); text-decoration: none;
  padding: .5rem .7rem; border-radius: var(--r-pill);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.header-phone:hover { color: var(--brand); background: rgba(18,22,26,.045); }
.header-cta { white-space: nowrap; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  cursor: pointer; color: var(--ink);
}
.nav-toggle-bars { display: block; width: 18px; }
.nav-toggle-bars i {
  display: block; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle-bars i + i { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-foot { display: none; }

/* ---- desktop ----------------------------------------------------------- */
/* 1200px, not 1024: seven labels plus brand, phone, utility link and CTA do not
   fit on one line below that. Measured — at 1160px the row overflows by ~40px,
   so the hamburger stays until there is genuinely room. */
@media (min-width: 1200px) {
  .site-header { --header-h: 84px; }
  .site-header.is-stuck { --header-h: 74px; }
  .nav-toggle, .nav-foot { display: none; }
  .header-phone, .header-utility { display: inline-flex; }

  /* Sizes below are measured, not chosen. Five nav labels, the logo, the
     utility link, the phone number and the CTA come to roughly 1070px against
     a 1140px content box at 1200px wide — it fits, but not with room to
     spare, so the row still runs slightly tight here and relaxes at 1400px. */
  .brand-logo--header { width: 158px; }
  .is-stuck .brand-logo--header { width: 140px; }
  .header-inner { gap: clamp(.8rem, 1.2vw, 1.4rem); }
  .nav-list { gap: clamp(.45rem, .85vw, 1.05rem); }
  .nav-link { font-size: .9rem; }
  .header-phone { padding: .5rem .6rem; }
  .header-utility { padding: .5rem .6rem; }

  /* The panel is anchored to the header, not to the item, so it can be a
     centred max-width container rather than a column hanging off one link. */
  .mega {
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 0 var(--gutter) 1rem;
    animation: megaIn .18s var(--ease);
  }
  .mega-inner {
    max-width: var(--maxw); margin: 0 auto;
    padding: clamp(1.5rem, 2.2vw, 2.25rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: start;
  }
  .mega-card { grid-column: span 1; }

  @keyframes megaIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Only here is there room to let the row breathe again. */
@media (min-width: 1400px) {
  .brand-logo--header { width: 186px; }
  .is-stuck .brand-logo--header { width: 164px; }
  .header-inner { gap: clamp(1rem, 1.4vw, 1.6rem); }
  .nav-list { gap: clamp(.6rem, 1vw, 1.2rem); }
  .nav-link { font-size: .92rem; }
  .header-phone, .header-utility { padding: .5rem .7rem; }
}

/* ---- mobile / tablet: accordion, not a squeezed mega menu -------------- */
@media (max-width: 1199px) {
  .primary-nav {
    /* Anchored to the header's own box rather than to --header-h, so the panel
       meets the header exactly even while the sticky shrink is animating. */
    position: absolute; left: 0; right: 0; top: 100%;
    height: calc(100dvh - 100%);
    display: flex; flex-direction: column; gap: 1rem;
    padding: .5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--line);
    overflow-y: auto; overscroll-behavior: contain;
    /* Fade only. A transform would offset the panel's measured position while
       the transition runs, and it is full height anyway. */
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s var(--ease), visibility .2s var(--ease);
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-item-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }

  .nav-link {
    display: block; width: 100%; padding: 1.05rem 0;   /* ≈52px touch target */
    font-size: 1.08rem; font-weight: 500; color: var(--ink);
  }
  .nav-link::after { display: none; }
  .nav-item.is-active > .nav-link,
  .nav-item.is-active > .nav-item-row > .nav-link { color: var(--brand); font-weight: 600; }
  .nav-item.is-active > .nav-link::before,
  .nav-item.is-active > .nav-item-row > .nav-link::before {
    content: ""; display: inline-block; vertical-align: middle;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--gold); margin-right: .6rem;
  }

  .nav-caret { width: 48px; height: 48px; border-radius: var(--r-sm); }

  /* The same markup becomes a plain stacked list — no columns, no card frame,
     nothing horizontally scrollable. */
  .mega { padding: 0 0 .85rem .25rem; }
  .mega-inner {
    display: block; max-width: none; padding: 0;
    background: transparent; border: 0; box-shadow: none;
  }
  .mega-col + .mega-col { margin-top: .9rem; }
  .mega-h { margin-bottom: .35rem; }
  .mega-col a { padding: .7rem .6rem; font-size: 1rem; }
  .mega-note { display: none; }          /* keeps the accordion scannable */
  /* The card's call to action is a plain inline link on desktop, which left it
     a 25px-tall tap target on a phone. Padded out to a real one here. */
  .mega-card-cta { min-height: 44px; padding: .5rem 0; }
  .mega-card {
    margin-top: 1rem; padding: 1rem;
    background: var(--white); border: 1px solid var(--line);
  }

  .nav-foot {
    display: grid; gap: .7rem; margin-top: auto; padding-top: 1.25rem;
    border-top: 1px solid var(--line);
  }
  .nav-phone {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .95rem 1rem; border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    font-size: 1rem; font-weight: 600; color: var(--ink); text-decoration: none;
  }
  .nav-phone:hover { background: rgba(18,22,26,.04); color: var(--ink); }
  .nav-utility {
    display: block; text-align: center; padding: .75rem;
    font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); text-decoration: none;
  }

  .header-actions .header-cta { display: none; }
  .header-phone {
    display: inline-flex; width: 44px; height: 44px; padding: 0;
    justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  }
  .header-phone span { display: none; }
  .is-stuck .brand-logo--header { width: 148px; }
}

/* ≤380px (iPhone SE and similar): the logo steps down so it and both action
   buttons stay inside the viewport. */
@media (max-width: 380px) {
  .header-inner { gap: .5rem; }
  .header-actions { gap: .35rem; }
  .brand-logo--header { width: 142px; }
  .is-stuck .brand-logo--header { width: 132px; }
  .nav-toggle, .header-phone { width: 40px; height: 40px; }
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
  background:
    radial-gradient(120% 90% at 88% 4%, rgba(30,75,68,.09), transparent 58%),
    radial-gradient(80% 70% at 0% 100%, rgba(169,121,63,.10), transparent 60%),
    var(--paper);
}

.hero-grid { display: grid; gap: clamp(2.5rem, 4vw, 4.5rem); align-items: center; }
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

/* 17ch, not 15ch: the three city names make this H1 longer than the one the
   hero was originally set for, and the tighter cap wrapped it to five lines
   with a stranded ampersand. This lets it use the column it already has. */
.hero h1 { font-size: var(--fs-display); max-width: 17ch; text-wrap: balance; }
.hero .lede { margin-top: 1.35rem; max-width: 52ch; }
.hero .lede-sub { margin-top: .9rem; max-width: 52ch; font-size: var(--fs-sm); }

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.hero-points {
  display: grid; gap: .55rem; margin-top: 2.25rem;
  padding-top: 1.75rem; border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--text-2);
}
.hero-points li { position: relative; padding-left: 1.5rem; }
.hero-points li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}

.hero-visual { position: relative; }
.hero-figure {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  background: var(--paper-2);
}
.hero-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }

.hero-badge {
  position: absolute; left: 1rem; bottom: clamp(1rem, 3vw, 2.25rem);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: .85rem 1.15rem; box-shadow: var(--shadow-2);
  display: grid; gap: .1rem;
}
.hero-badge-label { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero-badge-num { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.hero-badge-num:hover { color: var(--brand); }

@media (min-width: 940px) { .hero-badge { left: -1.25rem; } }

/* --------------------------------------------------------------------------
   8. VIDEO REVIEWS
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   INNER PAGE HERO
   Same tokens as the homepage hero, but a single centred column with a wide
   editorial figure beneath — inner pages have no split to balance.
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(30,75,68,.09), transparent 58%),
    radial-gradient(80% 70% at 0% 100%, rgba(169,121,63,.10), transparent 60%),
    var(--paper);
}
.page-hero-copy { text-align: center; padding-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.page-hero-copy h1 {
  font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.4rem);
  max-width: 20ch; margin-inline: auto; text-wrap: balance;
}
.page-hero-copy .lede { margin-top: 1.25rem; margin-inline: auto; max-width: 58ch; }
.page-hero-copy .hero-actions { justify-content: center; margin-top: 1.9rem; }

.page-hero-figure {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-2); background: var(--paper-2);
}
.page-hero-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Centred closing CTA for inner pages, on the dark enquiry ground. */
.page-cta { text-align: center; }
.page-cta .section-intro { margin-inline: auto; }
.page-cta .hero-actions { justify-content: center; margin-top: 2rem; }
.page-cta-foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: var(--fs-sm); color: rgba(255,255,255,.55);
}
.page-cta-foot a { color: var(--gold-2); }

/* Breadcrumb */
.crumbs { margin-bottom: 1.25rem; }
.crumbs ol {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
  font-size: var(--fs-xs); color: var(--muted);
}
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   SHORT VIDEO SECTION
   One container, ordinary grid flow. No negative margins, no absolute
   positioning on the cards, nothing bleeding outside the section — the only
   absolutely positioned thing is the play badge inside its own card.
   -------------------------------------------------------------------------- */
.video-section {
  background:
    radial-gradient(115% 70% at 50% -10%, rgba(44,106,94,.24), transparent 62%),
    radial-gradient(55% 50% at 88% 8%, rgba(169,121,63,.12), transparent 72%),
    linear-gradient(180deg, #0E1316 0%, #151A1F 55%, #0F1418 100%);
  color: rgba(255,255,255,.78);
  position: relative; isolation: isolate;
}
/* Barely-there grain so the dark field does not read as flat fill. */
.video-section::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

.video-section h2 { color: #fff; }
.video-section .section-intro { color: rgba(255,255,255,.72); }
.video-section .section-head { margin-bottom: clamp(2.25rem, 1.4rem + 1.9vw, 3.25rem); }
.nowrap { white-space: nowrap; }

/* ---- grid ---- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 1.6vw, 1.75rem);
  align-items: stretch;
  /* Equal rows so a title that wraps to two lines does not leave the 2 × 2
     layout with mismatched rows. Reset in the single-column layout below,
     where it would only add dead space. */
  grid-auto-rows: 1fr;
  /* 1104 = 4 × 258 + 3 × 24. Caps card width on wide screens without
     stretching, and lets them shrink on narrow desktops. */
  max-width: 1104px; margin-inline: auto;
}

/* ---- card ---- */
.video-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(18,22,26,.08);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(8,12,15,.18), 0 20px 40px -24px rgba(8,12,15,.6);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(8,12,15,.2), 0 28px 52px -24px rgba(8,12,15,.65);
}

/* ---- media: facade button, swapped for the iframe on click ---- */
.video-media {
  position: relative; display: block; width: 100%;
  aspect-ratio: 9 / 16;
  margin: 0; padding: 0; border: 0;
  background: #0E1316; cursor: pointer; overflow: hidden;
}
.video-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.video-card:hover .video-media img { transform: scale(1.04); }
.video-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(14,19,22,.25) 0%, rgba(14,19,22,0) 34%);
}

.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center;
  color: var(--brand);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.6);
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.video-play svg { margin-left: 3px; }
.video-media:hover .video-play,
.video-media:focus-visible .video-play {
  transform: translate(-50%,-50%) scale(1.07);
  background: #fff;
}
.video-media:focus-visible { outline: 3px solid var(--gold-2); outline-offset: -3px; }

/* The iframe replaces the button, inheriting the same 9:16 box — so the swap
   cannot shift the layout. */
.video-frame {
  display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; background: #000;
}

/* ---- caption ---- */
.video-meta {
  flex: 1 1 auto;                 /* every card ends level regardless of title length */
  display: grid; align-content: start; gap: .3rem;
  padding: .95rem 1.05rem 1.1rem;
}
.video-title {
  font-family: var(--font-body);
  font-size: .95rem; font-weight: 600; line-height: 1.35;
  color: var(--ink); letter-spacing: -0.005em;
}
.video-source {
  margin: 0; font-size: .72rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--gold);
}

/* ---- reserved slots ----
   Shown only while no verified customer video exists. Carries no name, no
   quote, no rating and no thumbnail, so it cannot be mistaken for a real
   story — but it holds the exact grid the real cards will occupy. Height is
   capped so four empty slots do not dominate the page. */
.video-slot {
  /* aspect-ratio alone — no max-height. Combining the two made the slot shrink
     its width to keep the ratio, leaving it narrower than its grid column with
     uneven gaps. With ratio alone the slot fills the column and its height
     follows, so it stays portrait at every width. 4:5 rather than the card's
     9:16 keeps four empty boxes from dominating the page. */
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  display: grid; place-content: center; justify-items: center; gap: .8rem;
  padding: 1rem;
}
.video-slot-mark {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06); color: rgba(233,217,191,.5);
}
.video-slot-label {
  font-size: .7rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.34);
}

.video-note {
  margin: clamp(2rem, 3vw, 2.75rem) auto 0; max-width: 54ch; text-align: center;
  font-size: var(--fs-sm); color: rgba(255,255,255,.6);
}
.video-note a { color: var(--gold-2); }

.video-cta {
  margin: 1rem auto 0; max-width: 54ch; text-align: center;
  font-size: var(--fs-sm); color: rgba(255,255,255,.72);
}
.video-cta a { color: var(--gold-2); font-weight: 600; }

/* ---- tablet: 2 columns ---- */
@media (max-width: 1023px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 566px; }
}

/* ---- mobile: 1 column, card kept large enough to actually watch ---- */
@media (max-width: 640px) {
  .video-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    max-width: 340px; gap: 1.25rem;
  }
  /* Real cards stack one-up so the video is large enough to watch. Reserved
     slots are not content, so they go two-up — four stacked empty boxes would
     be 900px of nothing on a phone. */
  .video-grid--reserved { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .video-slot-label { font-size: .62rem; letter-spacing: .1em; }
}

/* --------------------------------------------------------------------------
   9. TRUST STRIP
   -------------------------------------------------------------------------- */
.strip { background: var(--white); border-bottom: 1px solid var(--line); }
.strip-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(2.25rem, 3.5vw, 3.25rem);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.strip-item h3 {
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .02em; color: var(--ink); margin-bottom: .4rem;
  padding-top: .9rem; border-top: 2px solid var(--gold);
}
.strip-item p { font-size: var(--fs-sm); color: var(--muted); }

/* --------------------------------------------------------------------------
   10. AVAILABILITY
   -------------------------------------------------------------------------- */
.pup-grid {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pup-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pup-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.pup-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pup-body { padding: 1.1rem 1.15rem 1.35rem; }
.pup-body h3 { font-size: var(--fs-h3); margin-bottom: .35rem; }
.pup-facts { display: flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: var(--fs-xs); color: var(--muted); margin-bottom: .6rem; }
.pup-status {
  display: inline-block; font-size: var(--fs-xs); font-weight: 600;
  padding: .2rem .6rem; border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand);
}
/* Reserved entries stay listed to show the turnover is real, so they must be
   distinguishable at a glance — not just by reading the word. */
.pup-status--reserved { background: rgba(18,22,26,.06); color: var(--muted); }
.pup-card:has(.pup-status--reserved) { opacity: .72; }
.pup-card:has(.pup-status--reserved):hover { opacity: 1; }

.panel {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: clamp(1.75rem, 3vw, 3rem);
  max-width: 760px;
}
.panel-empty { border-style: dashed; box-shadow: none; background: rgba(255,255,255,.6); }
.panel-title { font-size: var(--fs-h3); margin-bottom: .75rem; }
.panel p { color: var(--text-2); font-size: var(--fs-sm); }
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.1rem; margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   11. CARDS / OFFER
   -------------------------------------------------------------------------- */
.card-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.card-grid-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
/* Two-up for offerings that carry a second explanatory line.
   min(320px, 100%) — a bare 320px minimum forces a track wider than a 320px
   viewport once the gutter is taken off, which overflows the page. */
.card-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.card-note {
  margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--muted);
}
.card-cta .card-note { border-top-color: var(--line-dark); color: rgba(255,255,255,.6); }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 2.2vw, 1.9rem);
  box-shadow: var(--shadow-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.card-num {
  display: block; font-family: var(--font-display); font-size: .95rem;
  color: var(--gold); letter-spacing: .08em; margin-bottom: .85rem;
}
.card h3 { font-size: var(--fs-h3); margin-bottom: .6rem; }
.card p { font-size: var(--fs-sm); color: var(--text-2); }

.card-cta {
  background: var(--ink); border-color: var(--ink); color: rgba(255,255,255,.72);
  display: flex; flex-direction: column; justify-content: center;
}
.card-cta h3 { color: #fff; }
.card-cta p { color: rgba(255,255,255,.68); margin-bottom: 1.2rem; }
.card-cta .btn { align-self: flex-start; --btn-bg: var(--gold); --btn-fg: #1A1207; }
.card-cta .btn:hover { --btn-bg: var(--gold-2); }

/* --------------------------------------------------------------------------
   12. SPLIT SECTIONS
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
  .split-reverse .split-media { order: 2; }
  .split-reverse .split-copy { order: 1; }
  .split-reverse { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .split-reverse .split-media { grid-column: 2; }
}
/* Editorial image system — one rule, two ratios:
   4:5 portrait where the image sits beside a tall column of copy,
   4:3 landscape where the copy is shorter. Radius and shadow are shared with
   the hero figure so every photograph on the page reads as one system.
   aspect-ratio is set explicitly (not left to the intrinsic size) so the box is
   reserved before the image arrives and nothing shifts. */
.split-media img {
  width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center;
  background: var(--paper-2);
}
.split-media img.is-wide { aspect-ratio: 4 / 3; }
.split-copy h2 { font-size: var(--fs-h2); margin-bottom: 1.1rem; }
.split-copy p { color: var(--text-2); }

.fit-cols { display: grid; gap: 1.75rem; margin-top: 2rem; }
@media (min-width: 620px) { .fit-cols { grid-template-columns: 1fr 1fr; } }
.fit-h {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .85rem;
}
.ticks li, .crosses li {
  position: relative; padding-left: 1.7rem; font-size: var(--fs-sm);
  color: var(--text-2); margin-bottom: .6rem;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 12px; height: 7px; border-left: 2px solid var(--brand-2);
  border-bottom: 2px solid var(--brand-2); transform: rotate(-45deg);
}
.crosses li::before {
  content: "×"; position: absolute; left: .18rem; top: -.08em;
  font-size: 1.15rem; line-height: 1.5; color: var(--gold);
}

/* Owner section — reuses the .split editorial layout and .ticks list so it is
   native to the page. Only the rhythm below the story is new. */
.owner-points { margin-top: 1.75rem; }
.owner-sign { margin-top: 1.6rem; }

/* Comparison table — for pages whose job is resolving a choice between two
   options. The wrapper scrolls rather than the page, so a narrow phone never
   forces horizontal scrolling on the document. */
.cmp-wrap { overflow-x: auto; margin-top: 1.75rem; }
.cmp { width: 100%; min-width: 460px; border-collapse: collapse; }
.cmp caption {
  text-align: left; font-size: var(--fs-xs); color: var(--muted); padding-bottom: .8rem;
}
.cmp th, .cmp td {
  padding: .9rem 1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); font-size: var(--fs-sm);
}
.cmp thead th {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
  border-bottom-color: var(--line-strong);
}
.cmp tbody th { font-weight: 600; color: var(--ink); width: 32%; }
.cmp td { color: var(--text-2); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp th:first-child { padding-left: 0; }
.cmp td:last-child { padding-right: 0; }

.doc-list { margin-top: 1.5rem; }
.doc-list li {
  font-size: var(--fs-sm); color: var(--text-2);
  padding: .85rem 0; border-top: 1px solid var(--line);
}
.doc-list li:last-child { border-bottom: 1px solid var(--line); }
.doc-list strong { color: var(--ink); font-weight: 600; }
.split-copy .link-arrow { margin-top: 1.75rem; }

/* Two arrow links side by side otherwise butt together and read as one link,
   because .link-arrow is inline-flex with no inline margin of its own. */
.link-arrow-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  align-items: baseline;
}
.link-arrow-row .link-arrow { margin-top: 0; }

/* A .cmp-wrap scrolls sideways when the table is wider than the screen. Two
   things follow from that, both of which were missing:
   1. A scrollable region must be reachable by keyboard, or a keyboard-only user
      cannot read the columns that are off-screen (WCAG 2.1.1). Hence tabindex
      on the wrapper, plus a visible focus ring so it is not a silent stop.
   2. A cut-off column with no affordance reads as a rendering bug rather than
      something you can scroll, so narrow screens get an explicit hint. */
.cmp-wrap:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 3px;
}
/* The /faq/ question index. A long list of links needs more separation than a
   plain list gives, and the source-page label must read as secondary to the
   question rather than competing with it. */
.faq-index { margin-top: 1.5rem; }
.faq-index li {
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  align-items: baseline;
}
.faq-index li:last-child { border-bottom: 0; }
.faq-index a { font-size: var(--fs-sm); text-decoration: none; }
.faq-index a:hover { text-decoration: underline; }
.faq-src {
  font-size: var(--fs-xs, .8125rem);
  color: var(--muted);
  white-space: nowrap;
}

.cmp-hint {
  display: none;
  font-size: var(--fs-xs, .8125rem);
  color: var(--muted);
  margin-bottom: .6rem;
}
@media (max-width: 760px) {
  .cmp-hint { display: block; }
}

/* --------------------------------------------------------------------------
   13. BUYER EDUCATION
   -------------------------------------------------------------------------- */
.edu-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); counter-reset: edu; }
@media (min-width: 700px) { .edu-grid { grid-template-columns: 1fr 1fr; } }

.edu-item {
  counter-increment: edu;
  border-top: 1px solid var(--line-dark);
  padding-top: 1.5rem; position: relative; padding-left: 3.2rem;
}
.edu-item::before {
  content: counter(edu, decimal-leading-zero);
  position: absolute; left: 0; top: 1.5rem;
  font-family: var(--font-display); font-size: 1.35rem; color: var(--gold-2);
  line-height: 1;
}
.edu-item h3 { font-size: var(--fs-h3); margin-bottom: .6rem; }
.edu-item p { font-size: var(--fs-sm); color: rgba(255,255,255,.7); }

/* --------------------------------------------------------------------------
   14. STEPS
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

.step {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.5rem 1.35rem;
  position: relative;
}
.step-num {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand);
  font-size: var(--fs-sm); font-weight: 700; margin-bottom: 1rem;
}
.step h3 { font-size: 1.02rem; margin-bottom: .45rem; }
.step p { font-size: var(--fs-sm); color: var(--text-2); }

/* --------------------------------------------------------------------------
   15. CHIPS / QUESTION GRID
   -------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0; }
.chips li {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .03em;
  padding: .42rem .95rem; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--line-strong); color: var(--text-2);
}

.q-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 640px) { .q-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .q-grid { grid-template-columns: repeat(3, 1fr); } }
.q-item { padding: 1.4rem 0 0; border-top: 2px solid var(--ink); }
.q-item h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.q-item p { font-size: var(--fs-sm); color: var(--text-2); }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.08rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-top: .42rem;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  color: var(--gold); transition: transform .22s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--brand); }
.faq-body { padding: 0 0 1.4rem; max-width: 68ch; }
.faq-body p { font-size: var(--fs-sm); color: var(--text-2); }

/* --------------------------------------------------------------------------
   17. ENQUIRY
   -------------------------------------------------------------------------- */
.section-enquire {
  background:
    radial-gradient(90% 90% at 10% 0%, rgba(44,106,94,.28), transparent 60%),
    var(--ink);
  color: rgba(255,255,255,.76);
}
.section-enquire h2 { color: #fff; font-size: var(--fs-h2); margin-bottom: 1.1rem; max-width: 18ch; }

.enquire-grid { display: grid; gap: clamp(2.25rem, 4vw, 4rem); align-items: start; }
@media (min-width: 920px) { .enquire-grid { grid-template-columns: minmax(0,1fr) minmax(0,.88fr); } }

.enquire-direct { margin-top: 2.25rem; display: grid; gap: 1rem; }
.enquire-direct li {
  display: grid; gap: .15rem; padding-top: 1rem; border-top: 1px solid var(--line-dark);
}
.enquire-label { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.enquire-value {
  font-family: var(--font-display); font-size: 1.18rem; color: #fff; text-decoration: none;
}
a.enquire-value:hover { color: var(--gold-2); }
.enquire-value-static { font-family: var(--font-body); font-size: var(--fs-sm); color: rgba(255,255,255,.72); }

.enquire-form-wrap {
  background: var(--white); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-3);
}
.form-title { font-size: var(--fs-h3); color: var(--ink); margin-bottom: 1.4rem; }
.field { margin-bottom: 1.1rem; }
.field label {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: var(--fs-sm); color: var(--text);
  padding: .78rem .9rem; background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--white);
  border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(44,106,94,.14);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #B4442F; }
.form-note { margin-top: .9rem; font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.form-status { margin-top: .75rem; font-size: var(--fs-sm); color: var(--brand); text-align: center; }
.form-status:empty { margin: 0; }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink-soft); color: rgba(255,255,255,.62); }

/* A closing call to action, above the link columns. It is the last thing a
   reader meets on every page, so it repeats the one action that matters
   rather than a wall of links. */
.footer-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  border-bottom: 1px solid var(--line-dark);
}
.footer-cta-title {
  font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  color: #fff; margin-bottom: .3rem;
}
.footer-cta-text { font-size: var(--fs-sm); max-width: 52ch; }
.footer-cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.footer-grid {
  display: grid; gap: clamp(2rem, 3.5vw, 3rem);
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px)  { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1140px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; } }

/* The supplied logo has a solid white background — it is not transparent.
   Rather than alter the artwork, it sits on a white plate so the white reads
   as a deliberate brand panel instead of a stray rectangle on the dark footer.
   The logo itself is untouched. */
.footer-logo-link {
  display: inline-block; margin-bottom: 1.15rem;
  padding: 14px 18px; border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .2s var(--ease);
}
.footer-logo-link:hover { transform: translateY(-2px); }
.brand-logo--footer { width: 232px; }

.footer-blurb { font-size: var(--fs-sm); max-width: 40ch; margin-bottom: 1.1rem; }

.footer-contact { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-bottom: 1rem; }
.footer-contact a { font-size: var(--fs-sm); font-weight: 600; color: #fff; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }

@media (max-width: 619px) {
  .footer-logo-link { padding: 12px 15px; }
  .brand-logo--footer { width: 190px; }
}

.footer-h {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 1rem;
}
.footer-col li + li { margin-top: .6rem; }
.footer-col a { font-size: var(--fs-sm); color: rgba(255,255,255,.72); text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }

.footer-areas { margin-top: 1.25rem; font-size: var(--fs-xs); color: rgba(255,255,255,.45); }
.footer-areas a { color: rgba(255,255,255,.62); text-decoration: none; }
.footer-areas a:hover { color: #fff; text-decoration: underline; }

.footer-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1.5rem; padding-block: 1.35rem;
  border-top: 1px solid var(--line-dark); font-size: var(--fs-xs);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
.footer-legal a { color: rgba(255,255,255,.55); text-decoration: none; }
.footer-legal a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   ADDRESS & MAP
   --------------------------------------------------------------------------
   One card style used by both the homepage enquiry band and the contact page,
   so the address looks the same wherever it appears.
   -------------------------------------------------------------------------- */
.address {
  font-style: normal;              /* <address> italicises by default */
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.45;
  color: inherit;
}

/* The Google embed ships with width="600" height="450" attributes. Those are
   kept so the browser reserves the right box before CSS arrives (no layout
   shift), and these rules then override them — a literal 600px would push the
   page sideways on any phone. */
.map-card {
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  background: var(--paper-2);
}
.map-card iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  /* Mobile first: a desktop-height map swallows a phone screen. */
  height: 300px;
  border: 0;
}
@media (min-width: 600px) { .map-card iframe { height: 360px; } }
@media (min-width: 900px) { .map-card iframe { height: 420px; } }

/* On the homepage the map occupies the column the enquiry form used to hold, so
   it wears the same white plate the form did — same radius, same padding, same
   shadow. Anything less reads as a raw iframe dropped onto a dark band. */
.enquire-map-wrap {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-3);
}
/* The inner radius steps down from the plate's, so the corners nest instead of
   fighting each other. */
.enquire-map-wrap .map-card { border-radius: var(--r-md); box-shadow: none; }
.enquire-map-wrap .map-card iframe { height: 340px; }
@media (min-width: 920px)  { .enquire-map-wrap .map-card iframe { height: 440px; } }
@media (min-width: 1200px) { .enquire-map-wrap .map-card iframe { height: 500px; } }

.map-note { margin-top: .75rem; font-size: var(--fs-xs); color: var(--muted); }
.enquire-map-wrap .map-note { margin-top: 1rem; }

/* Contact page: information left, map right, stacking to information-then-map
   on narrow screens. */
.locate-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 900px) {
  .locate-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .locate-grid .panel { max-width: none; }
}
.locate-address {
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.locate-label {
  display: block; margin-bottom: .4rem;
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}

/* --------------------------------------------------------------------------
   20. MOTION & REVEAL
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .video-card:hover, .pup-card:hover { transform: none; }
  .video-card:hover .video-media img { transform: none; }
}

@media print {
  .site-header, .enquire-form-wrap, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}