/* ============================================================
   Osteopathy Kaikoura — homepage scaffold
   Blank sections + curvy (wave) separators, brand palette
   derived from the OK logo: charcoal grey + orange accent.
   ============================================================ */

:root {
  --c-white:  #ffffff;
  --c-light:  #f9f6f2;   /* light off-white, lightly creamy */
  --c-accent: #f26522;   /* logo orange    */
  --c-dark:   #4a4a4a;   /* logo charcoal  */

  --nav-h: 84px;
  --maxw: 1400px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--c-dark);
  background: var(--c-white);
  /* never let the browser fake-bold a glyph (e.g. the macron ō)
     when the real weighted face is available — keeps Kaikōura even */
  font-synthesis: none;
}

/* ----------------------------------------------------------
   NAV (placeholder)
   ---------------------------------------------------------- */
/* Full-width nav overlaying the hero — transparent at top, solid on scroll */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}

/* Solid bar once the page is scrolled away from the hero top */
.nav--scrolled {
  height: calc(var(--nav-h) * 0.8);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(74, 74, 74, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.nav__inner {
  max-width: var(--maxw);
  height: 100%;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}

.nav__logo  { justify-self: start; }
.nav__links { justify-self: center; }
.nav__cta   { justify-self: end; }

/* Logo wordmark -> colour logo on scroll.
   Both slots overlap (absolute) so different transitions can be tried. */
.nav__logo-link {
  position: relative;
  display: block;
  width: 172px;
  height: 42px;
  overflow: hidden;
  text-decoration: none;
}

.nav__logo-roll { position: absolute; inset: 0; }

.nav__logo-rating,
.nav__logo-wordmark,
.nav__logo-full,
.nav__logo-colour {
  position: absolute;
  top: 0;
  left: 0;
  height: 42px;
  transition: opacity 0.4s ease, height 0.3s ease;
}

.nav__logo-wordmark,
.nav__logo-full,
.nav__logo-colour { width: auto; }

/* Google rating (over the hero) — stars over "5.0 on Google" */
.nav__logo-rating {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nav__rating-stars { color: #fff; font-size: 15px; letter-spacing: 1.5px; line-height: 1; }
.nav__rating-text { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; margin-top: 4px; white-space: nowrap; }

/* crossfade over the hero, fading to the colour logo on scroll.
   Converting (default) = white FULL logo; Minimal (.nav--wordmark) = white wordmark. */
.nav__logo-rating   { opacity: 0; }
.nav__logo-full     { opacity: 1; }
.nav__logo-wordmark { opacity: 0; }
.nav__logo-colour   { opacity: 0; }
.nav--wordmark .nav__logo-full     { opacity: 0; }
.nav--wordmark .nav__logo-wordmark { opacity: 1; }
.nav--scrolled .nav__logo-full,
.nav--scrolled .nav__logo-wordmark { opacity: 0; }
.nav--scrolled .nav__logo-colour   { opacity: 1; }

/* Converting option: full logo is larger and the bar is 15% taller */
.nav:not(.nav--wordmark) { height: calc(var(--nav-h) * 1.15); }
.nav:not(.nav--wordmark) .nav__logo-link { width: 200px; height: 52px; }
.nav:not(.nav--wordmark) .nav__logo-full,
.nav:not(.nav--wordmark) .nav__logo-colour { height: 52px; }

/* Shrink the bar (and its logo) once scrolled — converting option */
.nav:not(.nav--wordmark).nav--scrolled { height: calc(var(--nav-h) * 0.85); }
.nav:not(.nav--wordmark).nav--scrolled .nav__logo-link { height: 42px; }
.nav:not(.nav--wordmark).nav--scrolled .nav__logo-full,
.nav:not(.nav--wordmark).nav--scrolled .nav__logo-colour { height: 42px; }
.nav__logo-link { transition: height 0.3s ease, width 0.3s ease; }

@media (max-width: 760px) {
  .nav__logo-link { height: 34px; width: 140px; }
  .nav__logo-rating { height: 34px; }
  .nav__logo-wordmark { height: 34px; }
  .nav__logo-colour { height: 34px; }
  /* keep the converting full logo from overflowing on phones */
  .nav:not(.nav--wordmark) { height: calc(var(--nav-h) * 1.1); }
  .nav:not(.nav--wordmark) .nav__logo-link { width: 168px; height: 44px; }
  .nav:not(.nav--wordmark) .nav__logo-full,
  .nav:not(.nav--wordmark) .nav__logo-colour { height: 44px; }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 48px;
}

.nav__link {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.nav--scrolled .nav__link {
  color: var(--c-dark);
}

.nav__link:hover {
  color: var(--c-accent);
  transform: scale(1.12);
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: 14px;
  background: var(--c-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.nav__cta:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
}

.nav__cta-ic { width: 16px; height: 16px; flex: none; }
.nav__cta-call { font-weight: 800; }

/* ---- Hamburger button + mobile dropdown menu ---- */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2.5px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, background 0.3s ease;
}
.nav--scrolled .nav__burger span { background: var(--c-dark); }
.nav--open .nav__burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav--open .nav__burger span:nth-child(2) { opacity: 0; }
.nav--open .nav__burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.nav__mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(74, 74, 74, 0.06);
  padding: 6px 0;
}
.nav--open .nav__mobile { display: flex; }
.nav__mlink,
.nav__mcall {
  padding: 16px 28px;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-dark);
  text-decoration: none;
}
.nav__mlink { border-bottom: 1px solid rgba(74, 74, 74, 0.06); }
.nav__mlink:active { background: rgba(242, 101, 34, 0.08); }
.nav__mcall { color: var(--c-accent); }

@media (max-width: 760px) {
  .nav__inner { display: flex; align-items: center; gap: 10px; }
  .nav__logo { margin-right: auto; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  /* compact icon-only call button on phones */
  .nav__cta { padding: 0; width: 46px; height: 46px; border-radius: 12px; }
  .nav__cta .nav__cta-call, .nav__cta > span { display: none; }
  .nav__cta-ic { width: 18px; height: 18px; }

  /* when the menu is open over the hero, switch to the solid/scrolled look
     so the logo and burger stay legible */
  .nav--open {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  }
  .nav--open .nav__logo-full,
  .nav--open .nav__logo-wordmark { opacity: 0; }
  .nav--open .nav__logo-colour { opacity: 1; }
  .nav--open .nav__burger span { background: var(--c-dark); }
}

/* ----------------------------------------------------------
   SECTIONS
   ---------------------------------------------------------- */
.section {
  position: relative;
  min-height: 560px;
  scroll-margin-top: 20px;
}

.section--short { min-height: 340px; }

.section--white  { background: var(--c-white); }
.section--light  { background: var(--c-light); }
.section--accent { background: var(--c-accent); }
.section--dark   { background: var(--c-dark); }

.section--footer { min-height: 360px; }

/* Hero ----------------------------------------------------- */
.section--hero {
  min-height: 97vh;
  background: var(--c-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* zoom in a little on the hero background */
  transform: scale(1.1);
  transform-origin: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.78);
}

/* orange line tracing the hero wave, nudged just below the wavy edge */
/* taller hero wave (shape unchanged, just stretched vertically) */
.section--hero .wave svg { height: 125px; }

.hero__waveline {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 125px;
  line-height: 0;
  pointer-events: none;
  z-index: 2;
  transform: translateY(22px); /* sit slightly below the wave edge */
}
.hero__waveline svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);          /* same width as the white wave (uniform offset) */
  height: 125px;
  left: 50%;
  transform: translateX(-50%) scaleY(-1); /* offset is baked into the path */
}
.hero__waveline path {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 760px) {
  .section--hero .wave svg { height: 88px; }
  .hero__waveline,
  .hero__waveline svg { height: 88px; }
  .hero__waveline { transform: translateY(9px); }

  /* full-screen hero (mobile-safe height unit so browser bars don't clip it) */
  .section--hero { min-height: 100vh; min-height: 100svh; }
  .hero__content {
    padding: var(--nav-h) 22px 96px;
    transform: none;
  }
  /* headlines & subheadings wrap naturally (drop the forced line breaks).
     Higher specificity (.section--hero ...) so these win over the base
     nowrap rules that appear later in the file. */
  .section--hero .hero__headline,
  .section--hero .hero__subheading { white-space: normal; }
  .section--hero .hero__headline br,
  .section--hero .hero__subheading br { display: none; }
  .section--hero .hero__headline { font-size: clamp(1.9rem, 8.5vw, 2.6rem); letter-spacing: 0.5px; }
  .section--hero .hero__subheading { font-size: 1.14rem; }
  /* stack the rating onto two lines (stars + rating, then ACC) with no
     visible separator. Higher specificity (.section--hero ...) so it beats
     the base separator rule defined later in the file. */
  .hero__rating { flex-wrap: wrap; row-gap: 6px; }
  .section--hero .hero__rating-sep {
    flex-basis: 100%;
    width: 100%;
    height: 0;
    margin: 0;
    background: transparent;
  }
  /* nudge all hero content a little larger on phones */
  .section--hero.hero-opt-2 .hero__logo { width: min(78vw, 456px); }
  .section--hero .hero__rating-stars { font-size: 21px; }
  .section--hero .hero__rating-text { font-size: 15px; }
  .section--hero .hero__cta { height: 58px; padding: 0 40px; font-size: 18.5px; }
}

/* extra darkening at the very top so the nav stands out */
.hero__topfade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 240px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: 0 24px;
  text-align: center;
  transform: translateY(-20px); /* nudge content up to tighten the gap above */
}

/* Google rating shown under the subheading, above the CTA (Converting option) */
.hero__rating {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 1.5em;
}
.hero__rating-stars {
  font-size: 18px;
  letter-spacing: 5px;
  line-height: 1;
  color: #ffd11a;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.hero__rating-text {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.acc-strong { font-weight: 900; }
/* thin white divider between the rating and the ACC label */
.hero__rating-sep {
  width: 3px;
  height: 15px;
  background: rgba(255, 255, 255, 0.5);
  display: inline-block;
  margin: 0 3px;
}
/* white variant (Minimal option) */
.hero__rating--white .hero__rating-stars {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}
/* rating sitting above the logo (Minimal option) */
.hero__rating--top { margin-top: 0; margin-bottom: 1.3em; }

.hero__eyebrow {
  margin: 0 0 1.4em;
  color: var(--c-accent);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.hero__headline {
  margin: 0 auto;
  color: #fff;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(2.1rem, 5.2vw, 3.8rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 1.5px;
  white-space: nowrap;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero__headline em {
  font-style: normal;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

/* hero copy per option: Converting (default) vs Minimal (.hero-opt-2) */
.section--hero:not(.hero-opt-2) .hero__copy--min { display: none; }
.hero-opt-2 .hero__copy--conv { display: none; }

.hero__subheading {
  margin: 1.2em auto 0;
  color: #ffffff;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  font-weight: 400;
  line-height: 1.55;
  white-space: nowrap;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2em;
  height: 54px;
  padding: 0 36px;
  border-radius: 14px;
  background: var(--c-accent);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hero__cta:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
}

.placeholder-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.04) 22px,
      rgba(255, 255, 255, 0.07) 22px,
      rgba(255, 255, 255, 0.07) 44px
    );
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 4px;
  font-size: 15px;
}

.placeholder-image--hero span {
  padding: 14px 26px;
  border: 2px dashed rgba(255, 255, 255, 0.35);
  border-radius: 10px;
}

/* ----------------------------------------------------------
   CURVY WAVE SEPARATORS
   A wave sits at the bottom of a section; its fill colour is
   the background of the NEXT section, so it reads as a curvy
   boundary between the two bands.
   ---------------------------------------------------------- */
.wave {
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.wave--bottom {
  bottom: -1px;
}

/* top wave — sits at the section's top edge, upside down vs bottom waves */
.wave--top {
  top: -1px;
}

.wave svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 100px;
  left: 50%;
  transform: translateX(-50%);
}

/* Bottom waves: flip vertically so the filled area sits below the
   curve and meets the next section cleanly (no dark sliver). */
.wave--bottom svg {
  transform: translateX(-50%) scaleY(-1);
}

/* contact's top wave — a larger, smoother single curve */
#contact .wave--top svg { height: 130px; }

/* orange line tracing the contact wave, nudged just below the edge */
.contact__waveline {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 130px;
  line-height: 0;
  pointer-events: none;
  z-index: 2;
  transform: translateY(22px); /* sit slightly below the wave edge */
}
.contact__waveline svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 130px;
  left: 50%;
  transform: translateX(-50%);
}
.contact__waveline path {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 760px) {
  .wave svg { height: 70px; }
  #contact .wave--top svg { height: 92px; }
  .contact__waveline,
  .contact__waveline svg { height: 92px; }
  .contact__waveline { transform: translateY(16px); }
}

/* Per-separator fill colours (set via data-fill on markup) */
.wave[data-fill="var(--c-white)"]  svg path { fill: var(--c-white); }
.wave[data-fill="var(--c-light)"]  svg path { fill: var(--c-light); }
.wave[data-fill="var(--c-accent)"] svg path { fill: var(--c-accent); }
.wave[data-fill="var(--c-dark)"]   svg path { fill: var(--c-dark); }

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

#about,
#osteopathy { padding: 50px 0 185px; }
#about { padding-top: 85px; padding-bottom: 130px; }
#osteopathy { padding-top: 40px; }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-text .about-eyebrow {
  margin: 0 0 0.5em; color: var(--c-accent);
  font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
}
.about-title {
  margin: 0 0 0.55em; font-weight: 900; line-height: 1.2;
  font-size: clamp(2rem, 3.4vw, 2.9rem); color: var(--c-dark);
}
/* a touch of letter-spacing on every section heading */
.about-title, .svc-title, .pr-title, .rv-title, .ct-title, .faq-title { letter-spacing: 0.5px; }
/* shave a little weight off the macron vowel so its bar doesn't read heavy
   against the surrounding 900-weight letters */
.macron-soft { font-weight: 700; }
.about-text p { margin: 0 0 1em; font-size: 17px; line-height: 1.6; color: #5f5a55; }

.about-cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1.4em; height: 50px; padding: 0 30px; border-radius: 14px;
  background: var(--c-accent); color: #fff; font-weight: 700; font-size: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  text-decoration: none; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.about-cta:hover { transform: scale(1.05); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2); }

/* CTA + social-proof stats row */
.about-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 28px; margin-top: 1.8em; }
.about-actions .about-cta { margin-top: 0; flex: none; }
.about-stats { display: flex; list-style: none; margin: 0; padding: 0; }
.about-stats li { display: flex; flex-direction: column; padding: 0 18px; }
.about-stats li:first-child { padding-left: 0; }
.about-stats li + li { border-left: 1px solid rgba(74, 74, 74, 0.15); }
.about-stats strong { font-size: 24px; font-weight: 900; line-height: 1; color: var(--c-accent); }
.about-stats span { margin-top: 5px; font-size: 13px; font-weight: 700; color: #8d877f; white-space: nowrap; }

@media (max-width: 1040px) {
  .about-actions { flex-wrap: wrap; }
}

/* placeholder portrait with an offset accent block behind it */
.framed { position: relative; }
.framed::before {
  content: ""; position: absolute; inset: 24px -24px -24px 24px;
  background: transparent; border: 3px solid var(--c-accent); border-radius: 14px; z-index: 0;
}
/* mirror the offset to the bottom-left for the flipped feature */
.framed--flip::before { inset: 24px 24px -24px -24px; }
.portrait {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  min-height: 440px; border-radius: 14px; overflow: hidden;
  color: #8d877f; letter-spacing: 3px; font-size: 14px; font-weight: 700;
  background: repeating-linear-gradient(45deg, #cdc7c0, #cdc7c0 22px, #d6d0c9 22px, #d6d0c9 44px);
}
.portrait span { border: 2px dashed #aaa39b; border-radius: 8px; padding: 10px 18px; background: rgba(255,255,255,.25); }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Osteopathy photo: zoomed + positioned within its frame */
#osteopathy .portrait img { object-position: center; transform: scale(1.58) translate(-6%, -6%); }

/* mobile-only eyebrow above the image — hidden on desktop */
.about-eyebrow--m { display: none; }

@media (max-width: 820px) {
  #about, #osteopathy { padding: 100px 0; }
  /* tighten the gap between About and Osteopathy on mobile */
  #about { padding-bottom: 50px; }
  #osteopathy { padding-top: 30px; }
  .about-grid { grid-template-columns: 1fr; gap: 52px; }
  /* stack order: image → eyebrow → headline → body
     (image first, then the natural about-text which leads with the eyebrow) */
  .about-grid .framed { order: 0; }
  .about-grid .about-text { order: 1; }
  .about-eyebrow--m { display: none; }   /* drop the duplicate mobile eyebrow */
  /* centre the stats (and CTA) row on mobile */
  .about-actions { justify-content: center; }
  .about-stats { justify-content: center; }
  /* let stat labels wrap + tighten padding so the row never overflows narrow
     screens (nowrap labels were widening the section and clipping its right edge) */
  .about-stats li { padding: 0 12px; align-items: center; text-align: center; }
  .about-stats span { white-space: normal; }
}

/* ============================================================
   SERVICES SECTION
   ============================================================ */
#services { padding: 75px 0 145px; }
.svc-header { text-align: center; max-width: 900px; margin: 0 auto 54px; padding: 0 24px; }
#services .svc-eyebrow { margin: 0 0 .5em; color: var(--c-accent); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.svc-title { margin: 0; font-weight: 900; line-height: 1.2; font-size: clamp(2rem, 3.4vw, 2.9rem); color: var(--c-dark); }
#services .svc-sub { margin: 0.55em 0 0; font-size: 17px; font-weight: 700; line-height: 1.6; color: #6c665f; }

/* shared card bits */
.svc-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  background: rgba(242,101,34,.12); color: var(--c-accent);
}
.svc-ic svg { width: 26px; height: 26px; }
#services h3 { margin: 0 0 .4em; font-size: 19px; font-weight: 700; color: var(--c-dark); }
#services p { margin: 0; font-size: 17px; line-height: 1.55; color: #6c665f; }
.svc-link { display: inline-block; margin-top: 1.1em; color: var(--c-accent); font-weight: 700; text-decoration: none; }

/* 6-card grid — 3 across, 2 rows */
/* treatment banner image with offset orange outline (bottom-left) */
.svc-banner-frame { position: relative; max-width: 1080px; margin: 0 auto 84px; }
.svc-banner-frame::before {
  content: ""; position: absolute; inset: 24px 24px -24px -24px;
  border: 3px solid var(--c-accent); border-radius: 22px; z-index: 0;
}
.svc-banner {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}
.svc-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 208;  /* 30% shorter than 640/297 */
  object-fit: cover;
  object-position: 50% 63%;
  /* tuned for the Marcus arm-adjustment banner image */
  transform: scale(1.36) translateX(-5%);
}

/* condition checklist — two equal columns with dividers */
.svc-checks {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  column-gap: 56px;
}
.svc-check {
  break-inside: avoid;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 4px;
  border-bottom: 1px solid rgba(74, 74, 74, 0.14);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-dark);
}
.svc-check-ic { color: var(--c-accent); display: inline-flex; flex: none; }
.svc-check-ic svg { width: 26px; height: 26px; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.svc-card {
  background: #fff;
  border-radius: 18px;
  padding: 34px 30px;
  box-shadow: 0 12px 30px rgba(0,0,0,.05);
  transition: transform .22s ease, box-shadow .22s ease;
}
.svc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 42px rgba(0,0,0,.09);
}
.svc-card .svc-ic { margin-bottom: 20px; }

/* See-all button */
.svc-allwrap { text-align: center; padding: 52px 0 150px; }
.svc-allbtn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 34px; border-radius: 14px;
  background: transparent; color: var(--c-accent); border: 2px solid var(--c-accent);
  font-weight: 700; font-size: 16px;
  text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.svc-allbtn:hover { background: var(--c-accent); color: #fff; transform: scale(1.06); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2); }

@media (max-width: 980px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-checks { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .svc-check { justify-content: center; text-align: center; }
}

/* ============================================================
   PRICING SECTION
   ============================================================ */
#pricing { padding: 80px 0 80px; }
#pricing .container { padding: 0 24px 60px; }
.pr-header { text-align: center; max-width: 820px; margin: 0 auto 54px; padding: 0 24px; }
.pr-eyebrow { margin: 0 0 .5em; color: var(--c-accent); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.pr-title { margin: 0; font-weight: 900; line-height: 1.2; font-size: clamp(2rem, 3.4vw, 2.9rem); color: var(--c-dark); white-space: nowrap; }
.pr-sub { margin: 0.9em 0 0; font-size: 17px; font-weight: 700; line-height: 1.6; color: #6c665f; }

/* Comparison table */
.pr-table { width: 100%; max-width: 897px; margin: 0 auto; border-collapse: collapse; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 50px rgba(0,0,0,.12); }
.pr-table thead th { text-align: left; background: var(--c-dark); color: #fff; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; padding: 18px 24px; }
.pr-table tbody td { padding: 22px 24px; border-top: 1px solid #ece8e3; font-size: 17px; color: var(--c-dark); vertical-align: middle; }
.pr-table tbody td strong { display: block; font-size: 18px; }
.pr-table tbody td span { display: block; color: #8d877f; font-size: 14px; font-weight: 400; margin-top: 3px; }
.pr-table tbody td:nth-child(2), .pr-table tbody td:nth-child(3) { font-weight: 900; }
.pr-table tbody td:nth-child(3) { color: var(--c-accent); }
/* centre the Standard & With ACC columns (headers + amounts) */
.pr-table thead th:nth-child(2), .pr-table thead th:nth-child(3),
.pr-table tbody td:nth-child(2), .pr-table tbody td:nth-child(3) { text-align: center; }

/* CTA under the table */
.pr-ctawrap { text-align: center; margin-top: 84px; }
.pr-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 34px; border-radius: 14px;
  background: var(--c-accent); color: #fff; font-weight: 700; font-size: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  text-decoration: none; transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pr-cta:hover { transform: scale(1.05); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2); }

@media (max-width: 760px) {
  .pr-title { white-space: normal; }
  .pr-table thead { display: none; }
  .pr-table tbody tr { display: block; border-top: 1px solid #ece8e3; padding: 14px 8px; }
  .pr-table tbody td { display: flex; justify-content: space-between; gap: 16px; padding: 5px 16px; border-top: none; font-size: 16px; }
  .pr-table tbody td:first-child { display: block; }
  .pr-table tbody td:nth-child(2)::before { content: "Standard"; color: #8d877f; font-weight: 400; }
  .pr-table tbody td:nth-child(3)::before { content: "With ACC"; color: #8d877f; font-weight: 400; }
}

/* ============================================================
   REVIEWS SECTION
   ============================================================ */
#reviews { padding: 20px 0 95px; min-height: auto; }
.rv-header { text-align: center; max-width: 640px; margin: 0 auto 40px; padding: 0 24px; }
.rv-eyebrow { margin: 0 0 .5em; color: var(--c-accent); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.rv-title { margin: 0; font-weight: 900; line-height: 1.2; font-size: clamp(2rem, 3.4vw, 2.9rem); color: var(--c-dark); }
.rv-rating { margin: .7em 0 0; font-size: 17px; font-weight: 700; color: #6c665f; }
.rv-stars { color: #fbbc05; letter-spacing: 2px; }

/* review cards — equal cards side by side */
.rv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; max-width: 1320px; margin: 0 auto; padding: 0 24px; }

.rv-card { background: #fff; border: 1px solid #ece8e3; border-radius: 18px; padding: 26px 28px; box-shadow: 0 14px 34px rgba(0,0,0,.05); display: flex; flex-direction: column; }
.rv-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rv-top .rv-stars { font-size: 17px; }
.rv-glogo { width: 19px; height: 19px; flex: none; }
.rv-text { margin: 0; color: #4f4a45; font-size: 15.5px; line-height: 1.6; }

/* clamp long reviews to 6 lines until expanded */
.rv-text--clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rv-card.is-open .rv-text--clamp { display: block; overflow: visible; -webkit-line-clamp: unset; }

.rv-more { align-self: flex-start; margin-top: 8px; padding: 0; background: none; border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px; color: var(--c-accent); }
.rv-more:hover { text-decoration: underline; }

.rv-author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; }
.rv-avatar { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--c-accent); color: #fff; font-weight: 900; font-size: 17px; flex: none; }
.rv-author strong { display: block; font-size: 15px; color: var(--c-dark); }
.rv-author > div span { font-size: 13px; color: #8d877f; }

/* Review card: name/author at the top, hairline divider, then Google stars + text */
.rv-author { order: 0; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid #ece8e3; }
.rv-top    { order: 1; }
.rv-text   { order: 2; }
.rv-more   { order: 3; }

/* CTA under reviews */
.rv-ctawrap { text-align: center; margin-top: 36px; }
.rv-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 34px; border-radius: 14px;
  background: var(--c-accent); color: #fff; font-weight: 700; font-size: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  text-decoration: none; transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rv-cta:hover { transform: scale(1.05); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2); }

@media (max-width: 1080px) {
  .rv-grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
}
@media (max-width: 560px) {
  .rv-grid { grid-template-columns: 1fr; max-width: 460px; }
  .rv-author { margin-top: 0; }
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
#contact {
  padding: 215px 0 0;
  background:
    linear-gradient(rgba(20, 18, 16, 0.82), rgba(20, 18, 16, 0.82)),
    url("images/hero-bg.webp") center / cover no-repeat;
}
#contact .container { padding-bottom: 195px; }

/* white card with an offset orange outline behind it (like the About images) */
.ct-framed { position: relative; max-width: 1080px; margin: 0 auto; }
.ct-card {
  position: relative; z-index: 1; background: #fff; border-radius: 24px; padding: 52px;
  box-shadow: 0 0 60px rgba(242, 101, 34, 0.22),
              0 0 24px rgba(242, 101, 34, 0.15),
              0 30px 70px rgba(0, 0, 0, 0.28);
}
.ct-eyebrow { margin: 0; color: var(--c-accent); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.ct-title { margin: 0; font-weight: 900; line-height: 1.2; font-size: clamp(2rem, 3.4vw, 2.9rem); color: var(--c-dark); }
.ct-sub { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.6; color: #6c665f; }
.ct-h3 { margin: 0; font-size: 21px; font-weight: 900; color: var(--c-dark); }
.ct-h3--book { margin-top: 14px; }
.ct-h3--form { margin: 6px 0 0; }

/* layout: info left, form right */
.ct-l2 { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: stretch; }
.ct-stack { display: flex; flex-direction: column; gap: 18px; }

/* phone CTA block */
.ct-phone { display: flex; align-items: center; justify-content: center; gap: 16px; text-decoration: none; background: var(--c-light); border: 1px solid #e7e1da; border-radius: 16px; padding: 16px 22px; transition: border-color .15s ease, transform .15s ease; }
.ct-phone:hover { border-color: var(--c-accent); transform: scale(1.06); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2); }
.ct-phone-ic { width: 50px; height: 50px; border-radius: 13px; background: rgba(242,101,34,.12); color: var(--c-accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ct-phone-ic svg { width: 24px; height: 24px; }
.ct-phone-tx small { display: block; color: #8d877f; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.ct-phone-tx strong { display: block; color: var(--c-dark); font-size: 26px; font-weight: 900; }

/* phone CALL button: orange fill, white icon + number (address row unaffected) */
a.ct-phone { background: var(--c-accent); border-color: var(--c-accent); }
a.ct-phone .ct-phone-ic { background: rgba(255, 255, 255, 0.18); color: #fff; }
a.ct-phone .ct-phone-tx strong { color: #fff; }

/* address block + maps button */
.ct-phone--addr { background: transparent; border: 0; padding: 0; box-shadow: none; justify-content: flex-start; }
.ct-phone--addr:hover { transform: none; box-shadow: none; }
.ct-addr-tx { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.ct-addr-tx strong { color: var(--c-dark); font-size: 18px; font-weight: 900; line-height: 1.2; }
.ct-addr-tx span { color: #8d877f; font-size: 14px; font-weight: 700; }
.ct-locrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; margin-top: auto; }
.ct-mapbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; border-radius: 14px; text-decoration: none;
  background: transparent; border: 2px solid var(--c-accent); color: var(--c-accent);
  font-weight: 700; font-size: 16px;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ct-mapbtn svg { width: 18px; height: 18px; }
.ct-mapbtn:hover { background: var(--c-accent); color: #fff; transform: scale(1.04); box-shadow: 0 12px 26px rgba(0,0,0,.2); }

/* form */
.ct-form { display: flex; flex-direction: column; gap: 14px; }
.ct-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-form input, .ct-form textarea { width: 100%; font-family: inherit; font-size: 15px; color: var(--c-dark); background: var(--c-light); border: 1px solid #e2ddd7; border-radius: 12px; padding: 14px 16px; outline: none; transition: border-color .15s ease; }
.ct-form input:focus, .ct-form textarea:focus { border-color: var(--c-accent); }
.ct-form textarea { resize: vertical; min-height: 120px; }
.ct-btn { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; width: 100%; cursor: pointer; height: 52px; padding: 0 34px; border-radius: 14px; background: transparent; border: 2px solid var(--c-accent); color: var(--c-accent); font-weight: 700; font-size: 16px; font-family: inherit; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.ct-btn:hover { background: var(--c-accent); color: #fff; transform: scale(1.04); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2); }
.ct-btn::after { display: none; } /* match the Get Directions button — no slide-in arrow */

@media (max-width: 820px) {
  .ct-card { padding: 28px; border-radius: 18px; }
  .ct-l2 { grid-template-columns: 1fr; gap: 32px; }
  .ct-frow { grid-template-columns: 1fr; }
  /* keep address + Get Directions side by side on mobile */
  .ct-locrow { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ct-phone--addr { padding: 12px; gap: 10px; }
  .ct-phone--addr .ct-phone-ic { width: 38px; height: 38px; border-radius: 10px; }
  .ct-phone--addr .ct-phone-ic svg { width: 18px; height: 18px; }
  .ct-mapbtn { padding: 0 12px; font-size: 14px; }
}

/* ============================================================
   FOOTER SECTION
   ============================================================ */
#site-footer { min-height: auto; padding: 4px 0 0; color: rgba(255,255,255,.75); }
#site-footer .container { padding-bottom: 0; }
.ft-logo { height: 46px; width: auto; display: block; }
.ft-blurb { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.6); max-width: 320px; }
#site-footer h4 { margin: 0 0 18px; color: #fff; font-size: 15px; font-weight: 900; letter-spacing: .5px; }

/* links + info lists */
.ft-links, .ft-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ft-links a { color: rgba(255,255,255,.7); text-decoration: none; font-size: 15px; transition: color .15s ease; }
.ft-links a:hover { color: var(--c-accent); }
.ft-info li { display: flex; align-items: center; gap: 11px; font-size: 15px; color: rgba(255,255,255,.7); }
.ft-info li svg { width: 18px; height: 18px; color: var(--c-accent); flex: none; }
.ft-info a { color: rgba(255,255,255,.7); text-decoration: none; }
.ft-info a:hover { color: var(--c-accent); }
.ft-hours { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.7); display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 18px; row-gap: 3px; }
.ft-hours span:nth-child(odd) { color: rgba(255,255,255,.92); }

/* social */
.ft-social { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; margin-top: 22px; transition: background .15s ease; }
.ft-social svg { width: 22px; height: 22px; }
.ft-social:hover { background: var(--c-accent); }

/* bottom bar */
.ft-bar { margin-top: 30px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.5); }

/* columns layout */
.ft-cols { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr 1fr; gap: 40px; }

@media (max-width: 860px) { .ft-cols { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) {
  .ft-cols { grid-template-columns: 1fr; }
  .ft-bar { flex-direction: column; }
}

/* hero brand logo (white) */
.hero__logo { height: 72.6px; width: auto; display: block; margin: 0 auto 1.4em; transform: translateX(-5px); }

/* ============================================================
   HERO — Minimal layout (locked in): headline hidden, logo enlarged
   ============================================================ */
.hero-opt-2 .hero__headline { display: none; }
.hero-opt-2 .hero__logo { height: auto; width: min(54vw, 456px); margin: 0 auto 1.3em; }

/* ============================================================
   Fluid hero sizing for large screens.
   Anchored to the two real displays: base values at 1512px
   (14" MacBook) ramp smoothly up to the tuned values at 2560px
   (27" Philips). Below 1512px the normal responsive CSS applies
   unchanged. Each clamp() equals its base value at exactly 1512px,
   so there is no jump at the boundary.
   ============================================================ */
@media (min-width: 1512px) {
  /* shared CTA sizing (both hero options) */
  .section--hero .hero__cta {
    font-size: clamp(17px, calc(15.56px + 0.095vw), 18px);
    height:    clamp(54px, calc(49.67px + 0.286vw), 57px);
    padding:   0 clamp(36px, calc(33.12px + 0.191vw), 38px);
  }

  /* Converting option */
  .section--hero:not(.hero-opt-2) .hero__logo {
    height: clamp(72.6px, calc(22.97px + 3.282vw), 107px);
    width: auto;
  }
  .section--hero:not(.hero-opt-2) .hero__headline {
    font-size: clamp(60.8px, calc(38.87px + 1.45vw), 76px);
    margin-bottom: 0;
  }
  .section--hero:not(.hero-opt-2) .hero__subheading {
    font-size: clamp(20.8px, calc(16.18px + 0.305vw), 24px);
    margin-top: clamp(20px, calc(32.21px - 0.477vw), 25px);
    margin-bottom: 0;
  }
  .section--hero:not(.hero-opt-2) .hero__cta { margin-top: 34px; }

  /* Minimal option */
  .hero-opt-2 .hero__logo {
    width: clamp(456px, calc(193.42px + 17.366vw), 638px);
    height: auto;
    margin: 0 auto clamp(20.8px, calc(-4.02px + 1.641vw), 38px);
  }
  .hero-opt-2 .hero__subheading {
    font-size: clamp(20.8px, calc(13.3px + 0.496vw), 26px);
    margin-top: clamp(0px, calc(61.07px - 2.386vw), 25px);
    margin-bottom: 0;
  }
  .hero-opt-2 .hero__cta { margin-top: clamp(34px, calc(25.34px + 0.573vw), 40px); }

  /* hero rating grows on large screens (unchanged at 1512 → larger at 2560) */
  .section--hero .hero__rating { gap: clamp(9px, calc(6.12px + 0.191vw), 11px); }
  .section--hero .hero__rating-stars { font-size: clamp(18px, calc(12.23px + 0.382vw), 22px); }
  .section--hero .hero__rating-text  { font-size: clamp(13px, calc(9.39px + 0.239vw), 15.5px); }
  .section--hero .hero__rating-sep   { height: clamp(15px, calc(11.39px + 0.239vw), 17.5px); }
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
#faq { padding: 85px 0 0; }
#faq .container { padding-bottom: 95px; }
.faq-header { text-align: center; max-width: 640px; margin: 0 auto 48px; padding: 0 24px; }
.faq-eyebrow { margin: 0 0 .5em; color: var(--c-accent); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.faq-title { margin: 0; font-weight: 900; line-height: 1.2; font-size: clamp(2rem, 3.4vw, 2.9rem); color: var(--c-dark); }

.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #e6e1d9; }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 20px 2px; font-size: 18px; font-weight: 700; color: var(--c-dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex: none; font-size: 26px; font-weight: 400; line-height: 1; color: var(--c-accent);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: '\2212'; } /* minus */
.faq-answer { padding: 0 2px 22px; }
.faq-answer p { margin: 0; color: #6c665f; font-size: 16px; line-height: 1.65; }


/* ----------------------------------------------------------
   SCROLL REVEAL — section content fades up on entering view.
   Gated behind .js-reveal (set by JS) so content is always
   visible if scripting is unavailable. Honours reduced-motion.
   ---------------------------------------------------------- */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
  will-change: opacity, transform;
}
.js-reveal .reveal.reveal--in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ----------------------------------------------------------
   CTA hover arrow — a small white "→" slides in on the right
   edge of the text when any CTA is hovered.
   ---------------------------------------------------------- */
.hero__cta::after,
.nav__cta::after,
.about-cta::after,
.pr-cta::after,
.rv-cta::after,
.ct-btn::after {
  content: "\2192";          /* → */
  display: inline-block;
  width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  color: #fff;
  font-weight: 700;
  transform: translateX(-4px);
  transition: width .22s ease, opacity .22s ease, margin-left .22s ease, transform .22s ease;
}
.hero__cta:hover::after,
.nav__cta:hover::after,
.about-cta:hover::after,
.pr-cta:hover::after,
.rv-cta:hover::after,
.ct-btn:hover::after {
  width: 1.1em;
  margin-left: 8px;
  opacity: 1;
  transform: translateX(0);
}
/* nav button is a flex row with 9px gap — cancel it so the hidden arrow
   reserves no trailing space, then let the gap provide the hover spacing */
.nav__cta::after { margin-left: -9px; }

/* "Back to home" button: no hover arrow, a little space after the ← */
.about-cta--back::after { display: none; }
.about-cta--back .back-arrow { margin-right: 6px; }
.nav__cta:hover::after { margin-left: 0; }

/* ============================================================
   RESOURCES — listing page + article pages
   ============================================================ */
.nav__link.is-current { color: var(--c-accent); }
.nav--scrolled .nav__link.is-current { color: var(--c-accent); }

/* Page header (dark band used by Resources + article pages) */
.page-header {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 90px) 24px 180px;
  background:
    linear-gradient(rgba(20, 18, 16, 0.74), rgba(20, 18, 16, 0.8)),
    url("images/resource-header.webp") center / cover no-repeat;
}
.page-header__inner { position: relative; z-index: 1; max-width: 720px; }
/* article (post) headers: wider + slightly smaller title so the heading
   sits cleanly on its two forced lines */
.page-header--post .page-header__inner { max-width: 900px; }
.page-header--post .page-header__title { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.page-header__eyebrow {
  margin: 0 0 0.7em; color: var(--c-accent);
  font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
}
.page-header__title {
  margin: 0; color: #fff; font-weight: 900; line-height: 1.15; letter-spacing: 0.5px;
  font-size: clamp(2.3rem, 5vw, 3.6rem);
}
.page-header__sub {
  margin: 1em auto 0; max-width: 600px;
  color: rgba(255, 255, 255, 0.85); font-size: 1.1rem; line-height: 1.6;
}

/* Resource grid + cards */
.res-section { padding: 70px 0 0; }
.res-section .container { padding-bottom: 150px; }
.res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.res-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.res-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(0, 0, 0, 0.12); }
.res-card__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-dark); }
.res-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.res-card:hover .res-card__img img { transform: scale(1.05); }
.res-card__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 28px; }
.res-card__cat {
  align-self: flex-start;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--c-accent); background: rgba(242, 101, 34, 0.1);
  padding: 5px 11px; border-radius: 20px;
}
.res-card__title { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.3; color: var(--c-dark); }
.res-card__date { font-size: 14px; font-weight: 700; color: #8d877f; }

@media (max-width: 980px) {
  .res-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 620px) {
  .res-grid { grid-template-columns: 1fr; }
  .page-header { padding: calc(var(--nav-h) + 56px) 22px 110px; }
  .res-section .container { padding-bottom: 110px; }
}

/* ---- Article page ---- */
.article { background: var(--c-white); position: relative; padding-bottom: 96px; }
.article__wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.article__hero-img {
  max-width: 1000px; margin: 0 auto; padding: 48px 24px 0;
}
.article__hero-img img {
  width: 100%; aspect-ratio: 16 / 8; object-fit: cover;
  border-radius: 20px; display: block; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.18);
}
.article__body { padding: 56px 0 40px; }
.article__body p { margin: 0 0 1.3em; font-size: 18px; line-height: 1.75; color: #4f4a45; }
.article__body h2 {
  margin: 1.6em 0 0.5em; font-size: 1.7rem; font-weight: 900; line-height: 1.25;
  letter-spacing: 0.3px; color: var(--c-dark);
}
.article__body ul { margin: 0 0 1.3em; padding-left: 1.2em; }
.article__body li { margin: 0 0 0.6em; font-size: 18px; line-height: 1.7; color: #4f4a45; }
.article__lead { font-size: 20px !important; color: var(--c-dark) !important; font-weight: 700; }
.article__back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 34px;
  color: var(--c-accent); font-weight: 700; text-decoration: none; font-size: 15px;
}
.article__back:hover { text-decoration: underline; }
.article__cta {
  margin: 20px 0 80px; padding: 40px; border-radius: 20px; text-align: center;
  background: var(--c-light);
}
.article__cta h3 { margin: 0 0 0.5em; font-size: 1.5rem; font-weight: 900; color: var(--c-dark); }
.article__cta p { margin: 0 0 1.4em; color: #6c665f; font-size: 17px; }
.article__cta .about-cta { margin: 0; }

@media (max-width: 620px) {
  .article__hero-img { padding-top: 34px; }
  .article__body { padding: 40px 0 30px; }
  .article__body p, .article__body li { font-size: 17px; }
  .article__cta { padding: 30px 22px; }
}

/* ---- Home page: latest resources teaser ---- */
.reshome .container { padding-top: 80px; padding-bottom: 150px; }
.reshome-header { text-align: center; max-width: 680px; margin: 0 auto 48px; padding: 0 24px; }
.reshome-eyebrow { margin: 0 0 .5em; color: var(--c-accent); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.reshome-sub { margin: .7em 0 0; font-size: 17px; line-height: 1.6; color: #6c665f; }
.reshome-allwrap { text-align: center; margin-top: 54px; }
.reshome-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 32px; border-radius: 14px;
  background: transparent; color: var(--c-accent); border: 2px solid var(--c-accent);
  font-weight: 700; font-size: 16px; text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.reshome-btn:hover { background: var(--c-accent); color: #fff; transform: scale(1.05); box-shadow: 0 12px 26px rgba(0,0,0,.18); }

/* Resources page: get-in-touch CTA between cards and footer */
.res-cta {
  margin: 80px auto 0;
  max-width: 640px;
  text-align: center;
  padding: 0 24px;
}
.res-cta__title { margin: 0; font-weight: 900; line-height: 1.2; letter-spacing: 0.5px; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--c-dark); }
.res-cta__sub { margin: 0.7em auto 1.6em; max-width: 520px; font-size: 17px; line-height: 1.6; color: #6c665f; }
.res-cta .about-cta { margin: 0; }

/* ---- Privacy / legal page ---- */
.page-header--plain { background: var(--c-dark); }

/* /thanks header: hero image + the same dark overlay as the homepage hero */
.page-header--hero { position: relative; background: #2a2a2a url('/images/hero-bg.webp') center / cover no-repeat; }
.page-header--hero::before { content: ""; position: absolute; inset: 0; background: rgba(15, 15, 15, 0.78); }
.page-header--hero .page-header__inner { position: relative; z-index: 1; }
.page-header--hero .wave { z-index: 1; }
.page-header--hero .page-header__sub a { color: var(--c-accent); text-decoration: none; font-weight: 700; }
.ft-privacy { color: rgba(255,255,255,.5); text-decoration: none; transition: color .2s ease; }
.ft-privacy:hover { color: #fff; }
.legal-note {
  margin: 0 0 2em; padding: 14px 18px; border-radius: 12px;
  background: rgba(242,101,34,.1); border: 1px solid rgba(242,101,34,.3);
  color: #b24a14 !important; font-size: 15px !important; font-weight: 700; line-height: 1.5;
}
.article__body a { color: var(--c-accent); font-weight: 700; }
.article__body a:hover { text-decoration: underline; }

/* Hide the offset orange outlines behind images on mobile */
@media (max-width: 820px) {
  .framed::before,
  .framed--flip::before,
  .svc-banner-frame::before { display: none; }
}