/* ============================================================
   Atchison Dental Associates — Core design system
   Brand: teal #14526f · Roboto Slab (headings) + Poppins (body)
   ============================================================ */

:root {
  /* Brand */
  --teal-900: #0d3a50;
  --teal-800: #10465f;
  --teal-700: #14526f;   /* primary */
  --teal-600: #1c6588;
  --teal-500: #2b7ea1;
  --eyebrow:   #26738f;  /* 5.05:1 on mist, 5.35:1 on white */
  --field-line:#7e8f98;  /* form borders — 3.35:1, WCAG 1.4.11 */
  --teal-300: #7db6cf;
  --teal-100: #e6f0f5;
  --teal-50:  #f2f8fb;

  --heart:    #ef6f61;   /* the "heart in your smile" accent — used sparingly */
  --heart-btn: #b8402f;  /* button fill — 5.51:1 with white text (WCAG AA) */
  --heart-btn-h:#a83f33; /* button hover — 6.13:1 */
  --heart-soft:#fbe9e6;
  --gold:     #d8a24a;

  --ink:      #1e2a30;
  --slate:    #5a6b73;
  --line:     #e3e9ec;
  --paper:    #ffffff;
  --mist:     #f6f9fa;

  --shadow-sm: 0 1px 2px rgba(13,58,80,.06), 0 1px 3px rgba(13,58,80,.08);
  --shadow-md: 0 6px 18px rgba(13,58,80,.08), 0 2px 6px rgba(13,58,80,.06);
  --shadow-lg: 0 20px 48px rgba(13,58,80,.14);

  --radius: 14px;
  --radius-lg: 22px;
  --wrap: 1280px;
  --ease: cubic-bezier(.4,0,.2,1);

  --font-head: "Roboto Slab", Georgia, serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 1.03rem;   /* rem so the browser/device font-size setting applies */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--teal-600); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--teal-800); }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--teal-900); line-height: 1.15; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.5px; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); letter-spacing: -.3px; }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; color: var(--slate); }

.wrap { width: min(92%, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(2.25rem, 4.5vw, 3.75rem) 0; }
.section--mist { background: var(--mist); }
.section--teal { background: linear-gradient(160deg, var(--teal-800), var(--teal-700) 60%, var(--teal-600)); color: #eaf3f7; }
.section--teal h2, .section--teal h3 { color: #fff; }
.section--teal p { color: #cfe2ea; }
.eyebrow {
  font-family: var(--font-body); font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; font-size: .74rem; color: var(--eyebrow);
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .9rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--heart); border-radius: 2px; }
.section--teal .eyebrow { color: #9fd0e2; }
.lead { font-size: 1.12rem; color: var(--slate); max-width: 62ch; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* Buttons ---------------------------------------------------- */
.btn {
  --_bg: var(--teal-700); --_fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--_bg); color: var(--_fg);
  font-family: var(--font-body); font-weight: 600; font-size: .98rem;
  padding: .85rem 1.6rem; border-radius: 100px; border: 2px solid transparent;
  cursor: pointer; transition: transform .18s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  box-shadow: var(--shadow-sm); white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; background: var(--teal-800); }
.btn--heart { --_bg: var(--heart-btn); }
.btn--heart:hover { background: var(--heart-btn-h); }
.btn--ghost { background: transparent; color: var(--teal-700); border-color: var(--teal-300); box-shadow: none; }
.btn--ghost:hover { background: var(--teal-50); color: var(--teal-800); }
.btn--white { background: #fff; color: var(--teal-800); }
.btn--white:hover { background: #eef6fa; color: var(--teal-900); }
.btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }

/* Top call bar ----------------------------------------------- */
.topbar {
  background: var(--teal-900); color: #cfe6ef;
  font-size: .84rem; letter-spacing: .01em;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 0; }
.topbar a { color: #eaf3f7; font-weight: 500; }
.topbar__hours { opacity: .85; }
.topbar__call { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }

/* Header / nav ----------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .7rem 0; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand img { height: 46px; width: auto; }
.brand__text { font-family: var(--font-head); font-weight: 600; color: var(--teal-800); line-height: 1.05; font-size: 1.02rem; }
.brand__text span { display: block; font-family: var(--font-body); font-weight: 500; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-500); }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav > a, .nav__item > a {
  font-weight: 500; color: var(--ink); padding: .55rem .85rem; border-radius: 10px;
  display: inline-flex; align-items: center; gap: .35rem;
}
.nav > a:hover, .nav__item > a:hover { background: var(--teal-50); color: var(--teal-800); }
.nav a.is-active { color: var(--teal-700); }
.nav__item { position: relative; }
.nav__item > a::after { content: "▾"; font-size: .7em; opacity: .6; }
.nav__menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 246px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: .5rem; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: all .2s var(--ease);
}
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__menu a { display: block; padding: .6rem .8rem; border-radius: 9px; font-weight: 500; color: var(--ink); font-size: .95rem; }
.nav__menu a:hover { background: var(--teal-50); color: var(--teal-800); }
.nav__cta { margin-left: .4rem; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; }
.nav-toggle svg { width: 28px; height: 28px; stroke: var(--teal-800); }

/* Footer ----------------------------------------------------- */
.site-footer { background: var(--teal-900); color: #bcd7e2; padding: 3.5rem 0 1.5rem; }
.site-footer h3, .site-footer h4 { color: #fff; font-family: var(--font-body); font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 1rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.site-footer a { color: #d6e8ef; }
.site-footer a:hover { color: #fff; }
.footer-brand img { height: 52px; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: .95; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-contact { display: grid; gap: .5rem; font-size: .95rem; }
.footer-contact strong { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.3rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; opacity: .8; }

/* Reveal on scroll ------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Responsive ------------------------------------------------- */
@media (max-width: 900px) {
  .nav { visibility: hidden; position: fixed; inset: 0 0 0 auto; width: min(84%, 340px); background: #fff;
    flex-direction: column; align-items: stretch; gap: .2rem; padding: 5rem 1.2rem 2rem;
    box-shadow: var(--shadow-lg); transform: translateX(100%);
    transition: transform .3s var(--ease); overflow-y: auto; }
  .nav.open { transform: none; visibility: visible; }
  .nav__item { position: static; }
  .nav__menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; border-left: 2px solid var(--teal-100); border-radius: 0; margin: .2rem 0 .4rem .8rem; padding: 0 0 0 .4rem; display: none; }
  .nav__item.open .nav__menu { display: block; }
  .nav-toggle { display: inline-flex; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .topbar__hours { display: none; }
}

/* ============================================================
   Full-bleed system + SVG icons + video hero  (v2 redesign)
   ============================================================ */

/* SVG icons fill their container, inherit color */
.ico svg, .diff__ico svg, .value .ico svg, .tech .ico svg,
.info-card .ico svg, .hero__badge .ico svg, .soon__item .ico svg { width: 56%; height: 56%; display: block; }
.diff__ico svg { width: 50%; height: 50%; }
[data-icon] svg { pointer-events: none; }

/* Wider readable container for content over full-bleed sections */
.wrap-wide { width: min(94%, 1360px); margin-inline: auto; }

/* Full-viewport video hero ---------------------------------- */
.vhero { position: relative; min-height: min(92vh, 860px); display: flex; align-items: center;
  color: #fff; overflow: hidden; background: var(--teal-900); }
.vhero__media { position: absolute; inset: 0; z-index: 0; }
.vhero__media video, .vhero__media img { width: 100%; height: 100%; object-fit: cover; }
.vhero__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(8,32,45,.86) 0%, rgba(10,44,62,.66) 42%, rgba(13,58,80,.28) 100%); }
.vhero__scrim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,32,45,.7), transparent 40%); }
.vhero__inner { position: relative; z-index: 2; padding: clamp(3rem, 8vh, 7rem) 0; }
/* Pause control for the looping hero video (WCAG 2.2.2) — 44x44 minimum, sits clear of the copy. */
.vhero__pause { position: absolute; right: 18px; bottom: 18px; z-index: 3;
  width: 48px; height: 48px; border-radius: 999px; border: 2px solid rgba(255,255,255,.75);
  background: rgba(8,32,45,.62); color: #fff; font-size: 1rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(3px); }
.vhero__pause:hover { background: rgba(8,32,45,.85); }
.vhero__pause:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vhero h1 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.4rem); max-width: 16ch; text-shadow: 0 2px 30px rgba(0,0,0,.3); }
.vhero h1 .heart { color: #ff9d92; }
.vhero__sub { color: #dceaf0; font-size: clamp(1.05rem, 1.7vw, 1.35rem); max-width: 44ch; margin: 1.2rem 0 2rem; }
.vhero__cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.vhero__strip { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(8,32,45,.9), transparent); padding: 2.4rem 0 1.4rem; }
.vhero__strip-grid { display: flex; flex-wrap: wrap; gap: 2rem 2.6rem; }
.vhero__stat { display: flex; align-items: center; gap: .8rem; color: #eaf3f7; }
.vhero__stat .ico { width: 42px; height: 42px; flex: none; border-radius: 11px; background: rgba(255,255,255,.14);
  display: grid; place-items: center; color: #fff; }
.vhero__stat b { display: block; font-family: var(--font-head); font-size: 1rem; }
.vhero__stat span { font-size: .82rem; color: #b7d2dd; }

/* Full-bleed image band with overlaid content --------------- */
.band { position: relative; color: #fff; overflow: hidden; }
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; object-position: center var(--band-pos, 18%); }
/* --band-pos lets a single band re-frame its photo; higher % shows more of the lower part of the image */
.band__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,32,45,.9), rgba(10,44,62,.5) 70%, rgba(10,44,62,.2)); }
.band__inner { position: relative; z-index: 2; padding: clamp(2.75rem, 6vw, 5rem) 0; }
.band h2 { color: #fff; }
.band p { color: #dceaf0; }
.band--center .band__scrim { background: rgba(9,38,53,.72); }
.band--center { text-align: center; }
.band--tall .band__inner { padding: clamp(6rem, 16vw, 12rem) 0; }

/* Full-bleed quote band ------------------------------------- */
.quote-band { position: relative; overflow: hidden; color: #fff; }
.quote-band__media { position: absolute; inset: 0; }
.quote-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.quote-band__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,32,45,.82), rgba(9,38,53,.45)); }
.quote-band__inner { position: relative; z-index: 2; padding: clamp(2.75rem, 6vw, 5rem) 0; }
.quote-band blockquote { font-family: var(--font-head); font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.3; color: #fff; max-width: 22ch; margin: 0; }
.quote-band cite { display: block; margin-top: 1.2rem; font-style: normal; color: #ff9d92; font-weight: 600; }

/* Photo split (full-bleed, image edge-to-edge) -------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split__media { min-height: 420px; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body { padding: clamp(2.4rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5rem); display: flex; flex-direction: column; justify-content: center; }
.split--flip .split__media { order: 2; }
@media (max-width: 860px) {
  .split, .split--flip .split__media { grid-template-columns: 1fr; order: 0; }
  .split__media { min-height: 300px; }
  .vhero__strip { position: static; }
}

.ico--xs { width: 15px; height: 15px; display: inline-flex; vertical-align: -.18em; }
.ico--xs svg { width: 100%; height: 100%; }

/* v2: full-bleed header + topbar (edge to edge), logo-only brand */
.site-header .wrap, .topbar .wrap { width: 100%; max-width: none; padding-inline: clamp(1rem, 3vw, 2.75rem); }
.brand img { height: 50px; }
@media (max-width: 560px) { .brand img { height: 42px; } }

/* v3: nav CTA — white text at rest (on teal), teal text on hover (bg goes light) */
.nav a.nav__cta { color: #fff; }
.nav a.nav__cta:hover, .nav a.nav__cta:focus { color: var(--teal-800); }

/* v3: ghost button for dark/teal backgrounds — white text, readable hover */
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); box-shadow: none; }
.btn--ghost-light:hover { background: #fff; color: var(--teal-800); border-color: #fff; }

/* v3: full-bleed footer + visible logo chip + design credit */
.site-footer .wrap { width: 100%; max-width: none; padding-inline: clamp(1rem, 3vw, 2.75rem); }
.footer-logo { display: inline-block; background: #fff; border-radius: 12px; padding: .55rem .9rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); }
.footer-logo img { height: 40px; display: block; filter: none; }
.footer-credit a { color: #eaf3f7; font-weight: 600; }
.footer-credit a:hover { color: #fff; }

/* v3b: footer refinements — tighter logo, 3-zone bottom bar (left/center/right) */
.footer-logo { padding: .4rem .8rem; line-height: 0; }
.footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.footer-bottom > :nth-child(1) { justify-self: start; text-align: left; }
.footer-bottom > :nth-child(2) { justify-self: center; text-align: center; }
.footer-bottom > :nth-child(3) { justify-self: end; text-align: right; }
@media (max-width: 720px) {
  .footer-bottom { grid-template-columns: 1fr; justify-items: center; gap: .55rem; }
  .footer-bottom > * { justify-self: center !important; text-align: center !important; }
}

/* v3c: "Coming Soon" placeholder for team/doctor photos on the public site */
.ph-soon { width: 100%; height: 100%; min-height: 150px; display: grid; place-items: center; text-align: center;
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; letter-spacing: .02em; color: #fff;
  background: linear-gradient(150deg, var(--teal-500), var(--teal-800)); }

/* v3g: footer readability + tighter logo chip */
.site-footer p { color: #cbdde6; }
.footer-brand p { color: #cbdde6; }
.footer-logo { padding: .3rem .75rem; }
.footer-logo img { height: 36px; }

/* v4: footer logo chip — wider/bigger, no dead space under the mark */
.footer-logo { padding: .45rem 1.5rem; border-radius: 14px; }
.footer-logo img { height: 44px; margin: 0; }  /* margin:0 kills the 1rem leak from .footer-brand img */
@media (max-width: 720px) { .footer-logo { padding: .4rem 1.15rem; } .footer-logo img { height: 38px; } }

/* v4: footer social row — populated from the admin Site Content tab */
.footer-social { display: flex; gap: .55rem; margin-top: .9rem; }
.footer-social__link { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.1); color: #eaf3f7; transition: background .2s var(--ease), color .2s var(--ease); }
.footer-social__link:hover { background: #fff; color: var(--teal-800); }
.footer-social__link svg { width: 19px; height: 19px; }

/* Accessibility: skip link (visible only on keyboard focus) */
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 300;
  background: var(--teal-800); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 10px 10px;
  font-weight: 600; box-shadow: var(--shadow-md); transition: top .15s var(--ease); }
.skip-link:focus { top: 0; color: #fff; outline: 3px solid var(--heart); outline-offset: 2px; }

/* Accessibility: honour the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .ba-track { scroll-behavior: auto !important; }
}


/* Accessibility: a visible keyboard focus indicator on every interactive element (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--teal-500); outline-offset: 2px; border-radius: 4px;
}
.site-footer a:focus-visible, .topbar a:focus-visible, .section--teal a:focus-visible,
.page-hero a:focus-visible, .btn--white:focus-visible, .btn--ghost-light:focus-visible {
  outline-color: #fff;
}

/* ============================================================
   v4: MOBILE — full-bleed overlay readability + nav stacking
   ============================================================ */
@media (max-width: 900px) {
  /* Header above the video hero. The backdrop-filter was making the header
     the containing block for the fixed nav drawer (trapping it behind the
     hero); drop it on mobile so the drawer is viewport-relative + on top. */
  .site-header { z-index: 1000; backdrop-filter: none; background: #fff; }
  .nav { z-index: 1001; height: 100dvh; }
  .nav.open { visibility: visible; }

  /* Video hero: stack the copy + stat strip vertically over the video and
     anchor them low, so the video reads clean up top and text sits on dark. */
  .vhero { flex-direction: column; align-items: stretch; justify-content: flex-end;
    min-height: min(86vh, 720px); }
  .vhero__scrim { background: linear-gradient(to top,
    rgba(8,32,45,.94) 0%, rgba(8,32,45,.72) 44%, rgba(8,32,45,.42) 100%); }
  .vhero__inner { padding: 2rem 0 1.3rem; }
  .vhero__strip { position: static; background: var(--teal-900); padding: 1.3rem 0 1.5rem; }
  .vhero__strip-grid { flex-direction: column; gap: 1rem; }
}

/* People / quote photo bands: push copy to the bottom over a strong scrim so
   the team's faces stay visible up top instead of being covered by text. */
@media (max-width: 720px) {
  .band:not(.band--center), .quote-band {
    display: flex; align-items: flex-end; min-height: 72vh; }
  .band:not(.band--center) .band__inner, .quote-band__inner {
    padding-top: 0; padding-bottom: 1.7rem; }
  .band:not(.band--center) .band__scrim, .quote-band__scrim {
    background: linear-gradient(to top,
      rgba(8,32,45,.95) 6%, rgba(8,32,45,.8) 34%, rgba(8,32,45,.18) 66%, transparent 100%); }
  .band--center .band__scrim { background: rgba(9,38,53,.84); }
}

/* Smaller CTA buttons on phones (large ones dominate the screen) */
@media (max-width: 560px) {
  .btn--lg { padding: .82rem 1.4rem; font-size: .98rem; }
}

/* v4b: mobile nav drawer footer — fills the empty drawer with call/hours/address */
.nav__foot { display: none; }
@media (max-width: 900px) {
  .nav__foot { display: block; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--teal-100); }
  .nav__foot-call { display: flex; align-items: center; gap: .7rem; padding: .6rem .2rem; }
  .nav__foot-call .ico { width: 42px; height: 42px; flex: none; border-radius: 12px;
    background: var(--teal-50); color: var(--teal-600); display: grid; place-items: center; }
  .nav__foot-call b { display: block; font-family: var(--font-head); font-size: 1.12rem; color: var(--teal-800); }
  .nav__foot-call em { font-style: normal; font-size: .8rem; color: var(--slate); }
  .nav__foot-row { display: flex; align-items: flex-start; gap: .7rem; padding: .5rem .2rem;
    color: var(--slate); font-size: .9rem; line-height: 1.4; }
  .nav__foot-row .ico { width: 20px; height: 20px; flex: none; color: var(--teal-500); margin-top: .1rem; }
}

/* v5: sticky header — #site-header is only as tall as its contents, so the
   sticky .site-header had nowhere to stick. display:contents lifts the topbar
   + header into <body>; the topbar scrolls away, the header stays pinned. */
#site-header { display: contents; }

/* v5: floating "Make a Payment" button (bottom-right; eG Access launcher is bottom-left) */
.pay-fab { position: fixed; right: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.75rem); z-index: 900;
  display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.25rem .8rem 1.05rem;
  background: var(--teal-700); color: #fff; border: 2px solid #fff; border-radius: 999px; font-weight: 600; font-size: .95rem; line-height: 1;
  box-shadow: 0 10px 28px rgba(13,58,80,.28), 0 2px 6px rgba(13,58,80,.18);
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.pay-fab:hover { background: var(--teal-900); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(13,58,80,.32); }
.pay-fab:focus-visible { outline: 3px solid var(--heart); outline-offset: 3px; border-radius: 999px; }
.pay-fab .ico { width: 20px; height: 20px; display: inline-flex; flex: none; }
.pay-fab .ico svg { width: 100%; height: 100%; }
@media (max-width: 560px) { .pay-fab { padding: .72rem 1.05rem .72rem .9rem; font-size: .88rem; } }
/* Footer clearance: at the very bottom of the page, both floating buttons (pay bottom-right,
   eG Access bottom-left) must sit BELOW the last footer text row, never on it.
   = button offset + ~50px button + gap. */
.site-footer { padding-bottom: calc(clamp(1rem, 2.5vw, 1.75rem) + 4.5rem); }
@media print { .pay-fab { display: none; } }

/* v6: [hidden] must win over component display rules (.btn inline-flex, .footer-social flex/grid) —
   without this, JS-hidden links like the empty social icons still rendered as blank buttons */
[hidden] { display: none !important; }

/* v6: Google reviews — footer strip (every page) + home review slider (chrome.js) */
.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; }
.btn--sm { padding: .55rem 1.1rem; font-size: .88rem; }
.stars { position: relative; display: inline-flex; vertical-align: -.15em; line-height: 0; }
.stars svg { width: 1.05em; height: 1.05em; flex: none; }
.stars__base, .stars__fill { display: inline-flex; gap: .1em; }
.stars__base svg { fill: rgba(255,255,255,.22); }
.stars__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; }
.stars__fill svg { fill: var(--gold); }

.review-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 1.5rem;
  padding: 0 0 2rem; margin-bottom: 2.25rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.review-strip__score { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .6rem; color: #eaf3f7; font-size: 1rem; }
.review-strip__score .stars { font-size: 1.25rem; }
.review-strip__score b { font-family: var(--font-head); font-size: 1.5rem; color: #fff; line-height: 1; }
.review-strip__score span:not(.stars):not(.stars__base):not(.stars__fill) { color: #cbdde6; }
.review-strip__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.site-footer .review-strip .btn--white { color: var(--teal-800); }
.site-footer .review-strip .btn--white:hover { color: var(--teal-900); }
.site-footer .review-strip .btn--ghost-light { color: #fff; }
.site-footer .review-strip .btn--ghost-light:hover { color: var(--teal-800); }
@media (max-width: 720px) {
  .review-strip { flex-direction: column; text-align: center; }
  .review-strip__score, .review-strip__actions { justify-content: center; }
}

.quote-band[data-ad-reviews] .quote-band__scrim { background: linear-gradient(90deg, rgba(8,32,45,.9), rgba(9,38,53,.62)); }
.rv-summary { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; color: #dceaf0; margin: 0 0 1.4rem; }
.rv-summary .stars { font-size: 1.3rem; }
.rv-summary b { font-family: var(--font-head); font-size: 1.6rem; color: #fff; line-height: 1; }
/* all slides share one grid cell → the carousel is always as tall as the longest review, so nothing below jumps */
.rv-carousel { display: grid; }
.rv-slide { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; transition: opacity .45s var(--ease), visibility .45s; }
.rv-slide[data-active] { visibility: visible; opacity: 1; }
.quote-band .rv-slide blockquote { font-size: clamp(1.15rem, 2.1vw, 1.55rem); line-height: 1.45; max-width: 48ch; }
.rv-more { font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: #9fd0e2; white-space: nowrap; }
.rv-more:hover { color: #fff; }
.rv-by { display: flex; align-items: center; gap: .75rem; margin-top: 1.2rem; }
.rv-by img, .rv-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: cover; }
.rv-avatar { display: grid; place-items: center; background: var(--teal-500); color: #fff; font-weight: 600; }
.rv-name { display: block; font-weight: 600; color: #ff9d92; }
.rv-name a { color: inherit; }
.rv-name a:hover { color: #fff; }
.rv-meta { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: #cbdde6; }
.rv-controls { display: flex; align-items: center; gap: .5rem; margin-top: 1.5rem; }
.rv-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.08);
  display: grid; place-items: center; cursor: pointer; color: #fff; transition: background .2s var(--ease); }
.rv-btn:hover { background: rgba(255,255,255,.2); }
.rv-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rv-pause { margin-left: .35rem; }
.rv-pause svg path[d^="M7"] { fill: currentColor; stroke: none; }
.rv-dots { display: flex; gap: .15rem; }
.rv-dot { width: 24px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.rv-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .2s var(--ease), transform .2s var(--ease); }
.rv-dot[aria-current="true"]::before { background: #fff; transform: scale(1.2); }
.rv-btn:focus-visible, .rv-dot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.rv-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.rv-attrib { margin: 1rem 0 0; font-size: .78rem; color: #b7d2dd; }

/* v4c: mobile nav drawer header — logo + close (fills the empty top, gives a close control) */
.nav__head { display: none; }
@media (max-width: 900px) {
  .nav { padding-top: 1.1rem; }
  .nav__head { display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--teal-100); }
  .nav__brand img { height: 46px; width: auto; display: block; }
  .nav__close { background: none; border: 0; cursor: pointer; padding: .4rem; line-height: 0; }
  .nav__close svg { width: 26px; height: 26px; stroke: var(--teal-800); }
}