/* ============================================================
   COMPOSMENTIS PSYCHOLOGY — Main Stylesheet
   ============================================================ */

/* ---------- Google Fonts Import ---------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ---------- CSS Custom Properties ---------- */
:root {
  --clr-primary:     #2E6F92;
  --clr-primary-dk:  #1C4C66;
  --clr-accent:      #4BAAA1;
  --clr-accent-lt:   #7CC5BE;
  --clr-bg:          #F0F7FA;
  --clr-bg-card:     #E4EFF5;
  --clr-bg-dark:     #0D1E2D;
  --clr-text:        #0D1E2D;
  --clr-text-md:     #2B4960;
  --clr-text-lt:     #637FA0;
  --clr-white:       #FFFFFF;
  --clr-border:      #C2D8E8;

  --ff-serif:  'Playfair Display', Georgia, serif;
  --ff-sans:   'DM Sans', system-ui, sans-serif;

  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;

  --shadow-sm:  0 2px 8px rgba(46,111,146,.08);
  --shadow-md:  0 8px 32px rgba(46,111,146,.12);
  --shadow-lg:  0 20px 60px rgba(46,111,146,.18);

  --transition: all .3s cubic-bezier(.4,0,.2,1);

  --container:  1280px;
  --header-h:   106px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--ff-sans);
  color: var(--clr-text);
  background: var(--clr-white);
  line-height: 1.65;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ---------- Container ---------- */
.container {
  width: 92%;
  max-width: var(--container);
  margin-inline: auto;
}

/* ---------- Typography Utilities ---------- */
.tag-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-accent);
}
.tag-label::before,
.tag-label::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-accent);
}

.section-title {
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--clr-text);
}
.section-title em {
  font-style: italic;
  color: var(--clr-accent);
}
.section-desc {
  font-size: .95rem;
  color: var(--clr-text-lt);
  max-width: 540px;
  line-height: 1.75;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: .9rem;
  font-weight: 600;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.15);
  opacity: 0;
  transition: var(--transition);
}
.btn:hover::after { opacity: 1; }

.btn-primary {
  background: var(--clr-primary);
  color: var(--clr-white);
  box-shadow: 0 4px 20px rgba(46,111,146,.35);
}
.btn-primary:hover {
  background: var(--clr-primary-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(46,111,146,.45);
}
.btn-outline {
  border: 2px solid var(--clr-primary);
  color: var(--clr-primary);
}
.btn-outline:hover {
  background: var(--clr-primary);
  color: var(--clr-white);
}
.btn-white {
  background: var(--clr-white);
  color: var(--clr-primary);
}
.btn-white:hover {
  background: var(--clr-bg-card);
  transform: translateY(-2px);
}
.btn svg, .btn i { width: 16px; height: 16px; }

/* Arrow icon button */
.btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-bg-card);
  color: var(--clr-primary);
  transition: var(--transition);
  border: 1px solid var(--clr-border);
}
.btn-icon:hover {
  background: var(--clr-primary);
  color: var(--clr-white);
  border-color: var(--clr-primary);
}
.btn-icon.dark {
  background: var(--clr-primary);
  color: var(--clr-white);
}
.btn-icon.dark:hover {
  background: var(--clr-accent);
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: var(--transition);
}

/* Top bar — hidden on hero, shown when scrolled past hero.
   The reveal is driven by .site-header.scrolled, which main.js toggles at 80px.
   Animating max-height/opacity rather than toggling `display` keeps the fixed
   header from jumping the moment the threshold is crossed. */
.header-top {
  background: var(--clr-primary-dk);
  color: rgba(255,255,255,.8);
  font-size: .8rem;
  padding: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height .35s ease, padding .35s ease, opacity .25s ease;
}
.site-header.scrolled .header-top {
  padding: 8px 0;
  max-height: 60px;
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .header-top { transition: none; }
}
/* Below tablet the email and the hours no longer share a line, and a wrapped
   two-line strip above a hamburger header is worse than no strip at all. */
@media (max-width: 767px) {
  .header-top { display: none; }
}
.header-top .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.header-top-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header-top-left a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.75);
  transition: var(--transition);
}
.header-top-left a:hover { color: var(--clr-white); }
.header-top-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.social-links {
  display: flex;
  gap: 10px;
}
.social-links a {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.8);
  font-size: .75rem;
  transition: var(--transition);
}
.social-links a:hover {
  background: var(--clr-accent);
  color: var(--clr-white);
}

/* Main nav — transparent until scrolled */
.header-main {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  padding: 0;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.header-main .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  /* The three groups — logo, menu, actions — read as one crowded strip at 16px.
     The desktop header only renders above 1300px (below that it is the
     hamburger), where the narrowest container is ~1183px against roughly 1080px
     of content, so this is spending slack that genuinely exists. */
  gap: 28px;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.site-logo-img {
  height: 64px;
  width: auto;
  display: block;
  object-fit: contain;
  border-radius: 6px;
}

/* The header is a single row of logo + menu + actions inside a container capped
   at 1280px, and the logo is by far the largest item in it — 380px at full
   height. Trimming it is what buys the action group enough room to stay inside
   the container on a 1366px laptop, the most common desktop size in use. */
@media (max-width: 1400px) {
  .header-main .site-logo-img { height: 52px; }
  /* The desktop row only exists above 1300px, so this covers 1301–1400 — where
     the container is at 92% of the viewport rather than its 1280px cap and is
     therefore at its narrowest. The group gap gives back what the logo cannot:
     28px leaves ~32px spare here, which a font substitution could swallow. */
  .header-main .container { gap: 20px; }
}

.logo-icon {
  width: 52px;
  height: 52px;
  background: var(--clr-accent);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-text strong {
  font-family: var(--ff-serif);
  font-size: 1.5rem;
  color: var(--clr-white);
  letter-spacing: -.01em;
}
.logo-text span {
  font-size: .8rem;
  color: var(--clr-accent-lt);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Main nav links — pill container */
.nav-main {
  display: flex;
  align-items: center;
  /* Four short labels inside one pill run together at 2px. The gap separates the
     hover/active backgrounds so each item reads as its own target. */
  gap: 6px;
  background: rgba(13, 22, 38, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50px;
  padding: 6px 12px;
}
.nav-main > li { position: relative; }
.nav-main > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 17px;
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  white-space: nowrap;
}
.nav-main > li > a:hover,
.nav-main > li.active > a {
  color: var(--clr-white);
  background: rgba(255,255,255,.08);
}
.nav-main > li > a .chevron {
  font-size: .6rem;
  transition: transform .25s;
}
.nav-main > li:hover > a .chevron { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--clr-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--clr-border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: var(--transition);
  z-index: 999;
  overflow: hidden;
}
.nav-main > li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-size: .875rem;
  color: var(--clr-text-md);
  transition: var(--transition);
  border-bottom: 1px solid var(--clr-border);
}
.dropdown li:last-child a { border-bottom: none; }
.dropdown li a:hover {
  background: var(--clr-bg);
  color: var(--clr-primary);
  padding-left: 26px;
}
.dropdown li a .dd-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--clr-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
  transition: var(--transition);
}
.dropdown li a:hover .dd-icon {
  background: var(--clr-accent);
  color: var(--clr-white);
}

/* Nav right */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.nav-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  background: rgba(255,255,255,.06);
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--clr-white);
  transition: var(--transition);
}
.nav-phone:hover { background: rgba(255,255,255,.1); }
.nav-phone-icon {
  width: 36px;
  height: 36px;
  background: var(--clr-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
}
.nav-phone-text small {
  display: block;
  font-size: .67rem;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.nav-phone-text strong {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
}
.nav-search-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.nav-search-btn:hover {
  background: var(--clr-accent);
  color: var(--clr-white);
  border-color: var(--clr-accent);
}
.nav-cta {
  background: var(--clr-accent);
  color: var(--clr-white);
  padding: 11px 20px;
  border-radius: 50px;
  font-size: .88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover {
  background: var(--clr-primary);
  transform: translateY(-1px);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--clr-white);
  border-radius: 2px;
  transition: var(--transition);
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Header scroll state — becomes solid dark */
.site-header.scrolled .header-main {
  background: rgba(13, 22, 38, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(255,255,255,.06);
  box-shadow: 0 4px 28px rgba(0,0,0,.32);
}
/* On scroll, pill blends into solid header — flatten it */
.site-header.scrolled .nav-main {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
}

/* Search overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,20,35,.92);
  backdrop-filter: blur(12px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.search-overlay.active {
  opacity: 1;
  visibility: visible;
}
.search-overlay-inner {
  width: 90%;
  max-width: 680px;
  text-align: center;
}
.search-overlay-inner p {
  color: rgba(255,255,255,.5);
  margin-bottom: 20px;
  font-size: .9rem;
}
.search-form {
  position: relative;
}
.search-form input {
  width: 100%;
  padding: 18px 60px 18px 24px;
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 50px;
  color: var(--clr-white);
  font-size: 1.1rem;
  outline: none;
  transition: var(--transition);
}
.search-form input::placeholder { color: rgba(255,255,255,.4); }
.search-form input:focus { border-color: var(--clr-accent); }
.search-form button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clr-accent);
  color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition);
}
.search-close:hover { background: var(--clr-accent); }

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background: var(--clr-bg-dark);
  z-index: 1500;
  transform: translateX(-100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  padding: 80px 0 40px;
}
.mobile-nav.active { transform: translateX(0); }
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1400;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.mobile-nav-overlay.active {
  opacity: 1;
  visibility: visible;
}
.mobile-nav-close {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--clr-white);
  font-size: 1.3rem;
}
.mobile-nav-logo {
  padding: 0 24px 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 16px;
}
.mobile-nav-logo .logo-text strong { font-size: 1.1rem; }
.mobile-nav-links { padding: 0 16px; }
.mobile-nav-links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 12px;
  color: rgba(255,255,255,.8);
  font-size: .9rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.mobile-nav-links li a:hover {
  background: rgba(255,255,255,.06);
  color: var(--clr-white);
}
.mobile-nav-sub {
  padding: 0 12px;
  display: none;
}
.mobile-nav-sub.open { display: block; }
.mobile-nav-sub a {
  display: block;
  padding: 9px 12px;
  color: rgba(255,255,255,.55);
  font-size: .85rem;
  transition: var(--transition);
}
.mobile-nav-sub a:hover { color: var(--clr-accent-lt); }
.mobile-nav-footer {
  padding: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 16px;
}
.mobile-nav-footer .btn { width: 100%; justify-content: center; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 80px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../assets/img/hero-resilience.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  filter: saturate(1.08) brightness(0.86);
}
.hero-bg img {
  display: none;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      108deg,
      rgba(13,30,55,.92) 0%,
      rgba(25,70,105,.75) 36%,
      rgba(15,40,65,.28) 68%,
      rgba(8,20,38,.12) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,.22) 0%,
      rgba(0,0,0,0)   38%,
      rgba(0,0,0,.40) 100%
    );
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 540px;
  gap: 52px;
  align-items: center;
}

/* Hero left */
.hero-content { padding-right: 20px; }
.hero-tag { margin-bottom: 20px; color: rgba(255,255,255,.8); }
.hero-tag::before, .hero-tag::after { background: rgba(255,255,255,.6); }

/* ── Hero title: curtain / mask reveal ── */
.hero-title {
  font-family: var(--ff-serif);
  font-size: clamp(1.85rem, 2.8vw, 3rem);
  font-weight: 700;
  color: var(--clr-white);
  line-height: 1.18;
  margin-bottom: 20px;
}
/* Each line is an overflow-hidden mask */
.hero-title .h-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em; /* prevent descender clip */
}
/* The sliding inner element */
.hero-title .h-inner {
  display: block;
  transform: translateY(110%);
  will-change: transform;
}
.hero-title em {
  color: var(--clr-accent-lt);
  font-style: italic;
}
.hero-desc {
  font-size: 1rem;
  color: rgba(255,255,255,.75);
  max-width: 420px;
  line-height: 1.75;
  margin-bottom: 36px;
  opacity: 0; /* JS fades this in after line reveal */
  transform: translateY(10px);
}
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

/* Hero question card */
.hero-question-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  max-width: 440px;
}
.hq-avatar {
  position: relative;
  flex-shrink: 0;
}
.hq-avatar-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--clr-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  /* Explicit: the glyph is an icon font now, so it inherits colour rather
     than carrying its own like the emoji it replaced. */
  color: var(--clr-white);
}
.hq-phone-icon {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: var(--clr-primary);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  color: var(--clr-white);
}
.hq-text h4 {
  font-family: var(--ff-serif);
  font-size: 1.1rem;
  color: var(--clr-white);
}
.hq-text h4 em { color: var(--clr-accent-lt); font-style: italic; }
.hq-text small {
  display: block;
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  margin-top: 2px;
}

/* Hero form card */
.hero-form-card {
  background: var(--clr-white);
  border-radius: var(--radius-xl);
  padding: 52px 48px;
  box-shadow: 0 24px 72px rgba(13,30,55,.22), 0 4px 20px rgba(13,30,55,.1);
  animation: slideInRight .7s cubic-bezier(.4,0,.2,1) both;
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.form-card-title {
  font-family: var(--ff-serif);
  font-size: 2.35rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 32px;
  line-height: 1.15;
}
.form-card-title em { color: var(--clr-accent); font-style: italic; }

.form-group { margin-bottom: 14px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.form-control {
  width: 100%;
  padding: 14px 18px;
  background: var(--clr-bg);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  color: var(--clr-text);
  outline: none;
  transition: var(--transition);
  appearance: none;
}
.form-control:focus {
  border-color: var(--clr-accent);
  background: var(--clr-white);
  box-shadow: 0 0 0 3px rgba(75,170,161,.15);
}
.form-control::placeholder { color: var(--clr-text-lt); }
.select-wrap { position: relative; }
.select-wrap::after {
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-text-lt);
  pointer-events: none;
  font-size: .75rem;
}
.form-control.textarea {
  resize: vertical;
  min-height: 100px;
}
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}
.form-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--clr-primary);
  flex-shrink: 0;
  margin-top: 2px;
}
.form-check label {
  font-size: .78rem;
  color: var(--clr-text-lt);
  line-height: 1.5;
}

/* ============================================================
   SERVICES SECTION
   ============================================================ */
.services-section {
  padding: 100px 0;
  background: var(--clr-white);
}
.services-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}
.services-header-left { flex: 1; }
.services-nav {
  display: flex;
  gap: 10px;
  align-self: flex-start;
  margin-top: 8px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.service-card {
  background: var(--clr-bg-card);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
  transition: var(--transition);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
.service-card:hover {
  border-color: var(--clr-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.service-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}
.service-card-title {
  font-family: var(--ff-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--clr-text);
}
.service-icon {
  width: 52px;
  height: 52px;
  background: var(--clr-white);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.service-card-desc {
  font-size: .875rem;
  color: var(--clr-text-lt);
  line-height: 1.7;
  margin-bottom: 20px;
}
.service-card-desc a { color: var(--clr-accent); font-weight: 600; }
.service-card-img {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  background: var(--clr-border);
}
/* <picture> is inline by default — make it fill the frame so the img inside
   can resolve height:100% against it */
.service-card-img picture {
  display: block;
  width: 100%;
  height: 100%;
}
.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.service-card:hover .service-card-img img { transform: scale(1.04); }
.service-card-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #7CC5BE, #2E6F92);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}
.service-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(13,22,38,.75);
  backdrop-filter: blur(10px);
  color: var(--clr-white);
  font-size: .75rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 50px;
}
.services-cta { text-align: center; }

/* ============================================================
   ABOUT / GUIDING SECTION
   ============================================================ */
.about-section {
  padding: 100px 0 0;
  background: var(--clr-bg);
}
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding-bottom: 80px;
}
.about-img-wrap {
  position: relative;
}
.about-img-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/5;
  max-height: 520px;
  background: var(--clr-border);
}
.about-img-frame picture {
  display: block;
  width: 100%;
  height: 100%;
}
.about-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #A3C8D8, #5B8FAA);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}
.about-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 48px 40px;
  background: linear-gradient(160deg, #f0f7fa 0%, #daeaf3 100%);
}
.about-img-frame:has(.about-logo-img) {
  aspect-ratio: 1 / 1;
  overflow: visible;
}
/* The founder portrait is square (800x800). Given its own frame rather than the
   default 4/5 so object-fit has nothing to crop — a 4/5 frame would trim about
   a tenth off each side, which is exactly where the braids are. Capped and
   centred so it does not balloon to the full column width on a wide screen. */
.about-img-frame--founder {
  aspect-ratio: 1 / 1;
  max-height: none;
  max-width: 460px;
  margin-inline: auto;
}
.about-reg-badge {
  position: absolute;
  right: 10px;
  bottom: -18px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  background: var(--clr-primary);
  color: var(--clr-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.about-reg-badge i { font-size: 1.05rem; color: var(--clr-accent-lt); }
.about-reg-badge strong { display: block; font-size: .82rem; font-weight: 700; line-height: 1.3; }
.about-reg-badge span { font-size: .74rem; opacity: .75; letter-spacing: .06em; }
@media (max-width: 640px) {
  .about-reg-badge { right: 0; bottom: -14px; padding: 11px 15px; }
}
.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 32px 0;
  /* Size each tile to its own text. These are plain icon-and-text blocks with
     no card background, so the default stretch only padded the shorter tile in
     a row with empty space once one of them grew a longer paragraph. */
  align-items: start;
}
.about-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.about-feature-icon {
  width: 48px;
  height: 48px;
  background: var(--clr-bg-card);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  border: 1px solid var(--clr-border);
}
.about-feature-text h5 {
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--clr-text);
}
.about-feature-text p {
  font-size: .8rem;
  color: var(--clr-text-lt);
  line-height: 1.55;
}

/* Stats strip */
.stats-strip {
  background: var(--clr-bg);
  padding: 60px 0;
  border-top: 1px solid var(--clr-border);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  max-width: 720px;
  margin-inline: auto;
}
.stat-item {
  text-align: center;
  padding: 24px 20px;
  position: relative;
}
.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--clr-border);
}
.stat-num {
  font-family: var(--ff-serif);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
}
.stat-num .stat-suffix {
  font-size: 60%;
  color: var(--clr-accent);
  font-style: italic;
}
.stat-label {
  font-size: .85rem;
  color: var(--clr-text-lt);
  margin-top: 8px;
  font-weight: 500;
}

/* ============================================================
   HERO BANNER 2 (Coach Section)
   ============================================================ */
.coach-banner {
  position: relative;
  padding: 120px 0 0;
  /* Fixed background lives on the section itself — most reliable approach.
     Two declarations, not one: the plain url() is the fallback any browser
     understands, and image-set() overrides it where supported to serve WebP
     (79 KB against 117 KB). A background cannot use <picture>, so this is the
     only way to offer both. A browser that does not know image-set() ignores
     that line entirely and keeps the JPEG above it. */
  background-image: url('../assets/img/banner-consulting-lounge.jpg');
  background-image: image-set(
    url('../assets/img/banner-consulting-lounge.webp') type('image/webp'),
    url('../assets/img/banner-consulting-lounge.jpg')  type('image/jpeg')
  );
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* Blur + darken overlay — backdrop-filter blurs only what's behind it (the image),
   leaving the text content above completely sharp */
.coach-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-backdrop-filter: blur(4px) brightness(0.68) saturate(1.12);
  backdrop-filter: blur(4px) brightness(0.68) saturate(1.12);
}
.coach-banner-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(12, 42, 64, 0.52);
}
.coach-banner-bg img,
.coach-banner-bg-placeholder,
.coach-banner-bg::before { display: none; }
@media (max-width: 960px) {
  /* iOS Safari: fixed bg causes rendering glitches — fall back to scroll */
  .coach-banner,
  .hero-bg { background-attachment: scroll; }
}
.coach-banner .container { position: relative; z-index: 1; }

.coach-banner-tag { color: rgba(255,255,255,.75); margin-bottom: 20px; }
.coach-banner-tag::before, .coach-banner-tag::after { background: rgba(255,255,255,.5); }

.coach-banner-title {
  font-family: var(--ff-serif);
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--clr-white);
  max-width: 720px;
  margin-bottom: 48px;
  line-height: 1.15;
}

.coach-services-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}
.coach-service-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: var(--transition);
}
.coach-service-icon:hover { transform: translateY(-4px); }
.csi-icon {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  transition: var(--transition);
}
.coach-service-icon:hover .csi-icon {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.4);
}
.csi-label {
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  text-align: center;
}

/* ============================================================
   APPOINTMENT WIDGET — Enterprise interactive booking
   ============================================================ */
.appt-widget {
  background: var(--clr-white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 40px 44px 44px;
  box-shadow: 0 -8px 40px rgba(0,0,0,.12);
}

/* Header */
.appt-widget-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.appt-title-group { flex: 1 1 220px; }
.appt-widget-title {
  font-family: var(--ff-serif);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.appt-widget-title em { color: var(--clr-accent); font-style: italic; }
.appt-widget-sub {
  font-size: .82rem;
  color: var(--clr-text-lt);
  transition: opacity .3s ease;
}

/* Tab bar */
.appt-tabs {
  display: flex;
  gap: 4px;
  background: var(--clr-bg);
  padding: 5px;
  border-radius: 50px;
  flex-shrink: 0;
}
.appt-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--clr-text-lt);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  border: none;
  background: transparent;
}
.appt-tab-ico { font-size: .85rem; }
.appt-tab:hover:not(.active) {
  background: var(--clr-bg-card);
  color: var(--clr-primary);
}
.appt-tab.active {
  background: var(--clr-primary);
  color: var(--clr-white);
  box-shadow: 0 2px 12px rgba(46,111,146,.35);
}

/* Context strip */
.appt-context-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin-bottom: 24px;
  transition: opacity .3s ease;
  flex-wrap: wrap;
}
.appt-ctx-icon {
  color: var(--clr-accent);
  font-size: .95rem;
  flex-shrink: 0;
}
.appt-ctx-text {
  font-size: .8rem;
  color: var(--clr-text-md);
  flex: 1;
}
.appt-ctx-text strong { color: var(--clr-primary); }
.appt-ctx-badge {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-accent);
  background: rgba(75,170,161,.1);
  border: 1px solid rgba(75,170,161,.3);
  border-radius: 50px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Panel transitions */
.appt-panel {
  display: none;
  animation: panelIn .35s cubic-bezier(.4,0,.2,1) both;
}
.appt-panel.active { display: block; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Form grid */
.appt-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.appt-field--full { grid-column: 1 / -1; }

/* Field label */
.appt-lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--clr-text-lt);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
  font-weight: 700;
}
.appt-lbl i { color: var(--clr-accent); }
.req-star { color: #e05c5c; margin-left: 1px; }

/* Field icon + input */
.appt-field-wrap { position: relative; }
.appt-field-wrap .form-control { padding-left: 58px; }
.appt-field-wrap textarea.form-control { padding-left: 18px; padding-top: 12px; }
.appt-field-icon {
  width: 38px;
  height: 38px;
  background: var(--clr-primary);
  color: var(--clr-white);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .85rem;
  pointer-events: none;
}
.appt-field-wrap:has(textarea) .appt-field-icon { display: none; }

/* Validation states */
.appt-field-wrap .form-control.is-invalid {
  border-color: #e05c5c;
  box-shadow: 0 0 0 3px rgba(224,92,92,.12);
}
.appt-field-wrap .form-control.is-valid {
  border-color: #2D8C4E;
  box-shadow: 0 0 0 3px rgba(45,140,78,.1);
}
.appt-field-error {
  font-size: .72rem;
  color: #e05c5c;
  margin-top: 4px;
  display: none;
}
.appt-field-error.show { display: block; }

/* Footer row */
.appt-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--clr-border);
}
.appt-disclaimer {
  font-size: .75rem;
  color: var(--clr-text-lt);
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.appt-disclaimer i { color: var(--clr-accent); }
.appt-submit { white-space: nowrap; }

/* ============================================================
   CAREER & LIFE COACHING — Accordion Section
   ============================================================ */
.coaching-section {
  padding: 100px 0;
  background: var(--clr-white);
}
.coaching-section-tag { margin-bottom: 16px; }
.coaching-title {
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 56px;
}
.coaching-title em.rust { color: var(--clr-accent); font-style: italic; }
.coaching-title em.light { color: var(--clr-text-lt); font-style: italic; }

.coaching-accordion {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  /* Full-bleed: the markup places this outside .container, so rounded corners
     would now be cut off by the viewport edge rather than sitting inside a
     margin. Square edges are the honest shape for an edge-to-edge strip. */
  border-radius: 0;
  overflow: hidden;
  /* Sized to the tallest panel (03) so switching panels never resizes the
     accordion. Shorter panels simply show more of their image. */
  min-height: 680px;
}
.coaching-panel {
  background: var(--clr-bg-card);
  position: relative;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 28px;
}
.coaching-panel + .coaching-panel { border-left: 1px solid var(--clr-border); }
.coaching-panel.active {
  grid-column: span 1;
  flex: 2;
}

/* We use JS to expand—use flex on parent */
.coaching-accordion {
  display: flex;
}
.coaching-panel {
  flex: 1;
  min-width: 0;
  transition: flex .45s cubic-bezier(.4,0,.2,1);
}
.coaching-panel.active { flex: 2.5; }

.panel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.panel-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.panel-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
}
.coaching-panel.active .panel-bg img { opacity: 1; }
.panel-bg-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1C4C66, #2E6F92);
  opacity: 0;
  transition: opacity .4s ease;
}
.coaching-panel.active .panel-bg-placeholder { opacity: 1; }
.panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,22,38,.9) 0%, rgba(13,22,38,.3) 60%, transparent 100%);
  z-index: 1;
  opacity: 0;
  transition: opacity .4s ease;
}
.coaching-panel.active .panel-overlay { opacity: 1; }

.panel-content { position: relative; z-index: 2; }
.panel-num {
  font-family: var(--ff-serif);
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 700;
  color: var(--clr-accent);
  line-height: 1;
  margin-bottom: 12px;
  transition: color .3s;
}
.coaching-panel.active .panel-num { color: rgba(255,255,255,.4); }
.panel-title {
  font-family: var(--ff-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--clr-text);
  /* Body line-height was inherited here, which left multi-line service names
     looking airy and loose. Headings want tighter leading. */
  line-height: 1.28;
  transition: color .3s, font-size .3s;
  text-wrap: balance;
}
/* Collapsed slats are ~250px wide and a couple of these service names are long,
   so step the title down rather than shorten the practice's own wording. */
.coaching-panel:not(.active) .panel-title { font-size: 1rem; }
.coaching-panel.active .panel-title { color: var(--clr-white); }
.panel-desc {
  font-size: .85rem;
  color: rgba(255,255,255,.75);
  line-height: 1.65;
  margin-top: 10px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s ease, opacity .3s ease, margin .3s ease;
}
.panel-desc p { margin: 0; }
/* Named sub-services. A definition list, not a bullet list: each item really is
   a term and its description, and it lets the name carry weight without an
   extra wrapper per row. */
.panel-list { margin: 0; }
.panel-list dt {
  font-weight: 700;
  color: var(--clr-white);
  line-height: 1.45;
}
.panel-list dd {
  margin: 2px 0 9px;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
}
.panel-list dd:last-child { margin-bottom: 0; }
.panel-list--nested {
  margin-top: 6px;
  padding-left: 12px;
  border-left: 2px solid rgba(255,255,255,.18);
}
.panel-list--nested dt { font-weight: 600; color: rgba(255,255,255,.92); }
.panel-list--nested dd { font-size: .96em; }
/* Generous enough for the longest panel; only one panel is open at a time, so
   this caps the tallest case rather than every case. A fixed pixel guess is
   what clipped the old copy, so the accordion's min-height below is sized to
   the same content. */
.coaching-panel.active .panel-desc {
  max-height: 640px;
  opacity: 1;
  margin-top: 12px;
}
.panel-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--clr-accent-lt);
  margin-top: 16px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s ease, opacity .3s ease;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.coaching-panel.active .panel-link {
  max-height: 40px;
  opacity: 1;
}

.coaching-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 56px;
  flex-wrap: wrap;
}
.coaching-footer p {
  font-size: .9rem;
  color: var(--clr-text-md);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--clr-bg-dark);
  color: rgba(255,255,255,.7);
  padding: 80px 0 0;
}
.footer-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
/* The lockup is ~5.95:1, so at any fixed height it is wider than the footer
   brand column and gets letterboxed. Drive it from the width instead. */
.footer-logo .site-logo-img { height: auto; width: 100%; max-width: 360px; filter: none; opacity: 1; }
.footer-logo .logo-icon { font-size: 1.2rem; }
.footer-logo .logo-text strong { font-size: 1.1rem; }
.footer-desc {
  font-size: .875rem;
  line-height: 1.75;
  color: rgba(255,255,255,.55);
  margin-bottom: 28px;
  max-width: 300px;
}
.footer-social {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
}
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  transition: var(--transition);
}
.footer-social a:hover {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: var(--clr-white);
  transform: translateY(-2px);
}

.footer-newsletter {
  display: flex;
  gap: 0;
  border-radius: 50px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  max-width: 300px;
}
.footer-newsletter input {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--clr-white);
  font-size: .8rem;
  outline: none;
}
.footer-newsletter input::placeholder { color: rgba(255,255,255,.35); }
.footer-newsletter button {
  background: var(--clr-accent);
  color: var(--clr-white);
  padding: 0 18px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  transition: var(--transition);
}
.footer-newsletter button:hover { background: var(--clr-primary); }

.footer-col h4 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--clr-white);
  margin-bottom: 20px;
  letter-spacing: .03em;
  position: relative;
  padding-bottom: 12px;
}
.footer-col h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--clr-accent);
  border-radius: 1px;
}
.footer-links li + li { margin-top: 10px; }
.footer-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .855rem;
  color: rgba(255,255,255,.55);
  transition: var(--transition);
}
.footer-links a::before {
  content: '›';
  color: var(--clr-accent);
  font-size: 1rem;
  transition: transform .2s;
}
.footer-links a:hover {
  color: var(--clr-white);
  padding-left: 4px;
}
.footer-contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.fci-icon {
  width: 34px;
  height: 34px;
  background: rgba(75,170,161,.15);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-accent-lt);
  font-size: .85rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.fci-text small {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.35);
  margin-bottom: 3px;
}
.fci-text a, .fci-text span {
  font-size: .85rem;
  color: rgba(255,255,255,.65);
  transition: var(--transition);
  display: block;
}
.fci-text a:hover { color: var(--clr-accent-lt); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  flex-wrap: wrap;
}
.footer-bottom p {
  font-size: .8rem;
  color: rgba(255,255,255,.35);
}
.footer-bottom p a {
  color: var(--clr-accent-lt);
  transition: var(--transition);
}
.footer-bottom p a:hover { color: var(--clr-white); }
.footer-dev-credit {
  font-size: .75rem;
  color: rgba(255,255,255,.25) !important;
  letter-spacing: .02em;
}
.footer-dev-credit a {
  color: rgba(255,255,255,.4) !important;
  text-decoration: none;
  transition: var(--transition);
}
.footer-dev-credit a:hover { color: rgba(255,255,255,.7) !important; }
.footer-bottom-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-bottom-links a {
  font-size: .78rem;
  color: rgba(255,255,255,.35);
  transition: var(--transition);
}
.footer-bottom-links a:hover { color: rgba(255,255,255,.7); }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  background: var(--clr-primary);
  color: var(--clr-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--clr-accent);
  transform: translateY(-3px);
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: var(--clr-white);
  border-top: 3px solid var(--clr-accent);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 -8px 32px rgba(0,0,0,.1);
  transform: translateY(100%);
  transition: transform .4s ease;
  flex-wrap: wrap;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p {
  font-size: .85rem;
  color: var(--clr-text-md);
  flex: 1;
}
.cookie-banner p a { color: var(--clr-accent); font-weight: 600; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-actions .btn { padding: 10px 20px; font-size: .82rem; }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--clr-bg-dark);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
  transition: opacity .6s cubic-bezier(.4,0,.2,1), visibility .6s;
}
/* Two off-centre washes lift the flat navy without reading as a gradient. */
.preloader::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 44% at 50% 32%, rgba(75,170,161,.13), transparent 70%),
    radial-gradient(70% 50% at 50% 108%, rgba(46,111,146,.20), transparent 72%);
  pointer-events: none;
}
.preloader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader.done .preloader-inner { transform: translateY(-10px) scale(.98); }

.preloader-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}

/* ── Monogram in a progress ring ── */
.preloader-mark {
  position: relative;
  width: 104px;
  height: 104px;
  margin-bottom: 30px;
  animation: plFadeUp .8s cubic-bezier(.2,.7,.3,1) both;
}
.preloader-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.preloader-ring circle {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.preloader-ring-track { stroke: rgba(255,255,255,.10); }
.preloader-ring-fill {
  stroke: var(--clr-accent);
  /* 2πr with r=46 ≈ 289: one full circumference, drawn over the load. */
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  filter: drop-shadow(0 0 5px rgba(75,170,161,.55));
  animation: plRingDraw 1.5s cubic-bezier(.35,0,.15,1) forwards;
}
/* The artwork's own navy is exactly --clr-bg-dark, so it sits a shade below the
   washed panel around it. The hairline reads that step as a deliberate bezel
   rather than a seam. */
.preloader-monogram {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78px;
  height: 78px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 18px rgba(0,0,0,.45);
}

/* ── Wordmark ── */
.preloader-logo {
  font-family: var(--ff-serif);
  font-size: clamp(1.45rem, 4.6vw, 2.05rem);
  line-height: 1.25;
  color: var(--clr-white);
  letter-spacing: -.01em;
  margin: 0;
  animation: plFadeUp .8s cubic-bezier(.2,.7,.3,1) .12s both;
}
.preloader-logo em { color: var(--clr-accent); font-style: italic; }

/* Separators are drawn between the spans rather than typed into the text, so a
   wrap can never leave a dot dangling at the end of a line. */
.preloader-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  margin: 14px 0 0;
  font-family: var(--ff-sans);
  font-size: .62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: rgba(255,255,255,.42);
  animation: plFadeUp .8s cubic-bezier(.2,.7,.3,1) .24s both;
}
.preloader-meta span + span::before {
  content: '\00b7';
  margin: 0 10px;
  letter-spacing: normal;
  color: rgba(255,255,255,.26);
}

/* ── Progress bar ── */
.preloader-bar {
  position: relative;
  width: min(300px, 72vw);
  height: 2px;
  margin-top: 34px;
  background: rgba(255,255,255,.09);
  border-radius: 2px;
  overflow: hidden;
  animation: plFadeUp .8s cubic-bezier(.2,.7,.3,1) .34s both;
}
.preloader-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent) 55%, var(--clr-accent-lt));
  box-shadow: 0 0 10px rgba(75,170,161,.5);
  animation: loadBar 1.5s cubic-bezier(.35,0,.15,1) forwards;
}
/* A highlight travelling the full track, independent of the fill. */
.preloader-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-100%);
  animation: plSheen 1.5s ease-in-out infinite;
}

@keyframes loadBar {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes plRingDraw {
  from { stroke-dashoffset: 289; }
  to   { stroke-dashoffset: 0; }
}
@keyframes plSheen {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
@keyframes plFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .preloader-mark { width: 84px; height: 84px; margin-bottom: 24px; }
  .preloader-monogram { width: 62px; height: 62px; }
  .preloader-meta { font-size: .55rem; letter-spacing: .14em; }
  .preloader-meta-opt { display: none; }   /* keeps the strip to one line */
  .preloader-bar { margin-top: 28px; }
}

/* Motion is decoration here; the panel must still resolve without it. */
@media (prefers-reduced-motion: reduce) {
  .preloader-mark,
  .preloader-logo,
  .preloader-meta,
  .preloader-bar { animation: none; }
  .preloader-bar::after { animation: none; opacity: 0; }
  .preloader-ring-fill { animation: none; stroke-dashoffset: 0; }
  .preloader-bar-fill { animation: none; width: 100%; }
  .preloader.done .preloader-inner { transform: none; }
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .hero .container { grid-template-columns: 1fr 420px; gap: 32px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* Switch to the hamburger at the width the desktop row actually stops fitting.
   The swap was set to 960px, but the row does not fit anywhere near that: logo,
   six menu items and the action group need about 1230px inside a container that
   is only ~906px wide at a 1000px viewport. Between 960 and 1300 the menu and
   actions overflowed the container and ran off the right of the page — measured
   at 142px of overflow at 1121px wide. That predates the staff button; a fifth
   action only widened the row further.

   1300 rather than 1280, because at exactly 1280 the row fits with zero slack
   and a scrollbar of any width would push it back over.

   Only the nav swap lives here. The 960px block below still owns the genuine
   small-screen layout — header height, logo sizing, grid changes — and the two
   blocks agree on these properties where they overlap. */
@media (max-width: 1300px) {
  .nav-main,
  .nav-actions { display: none; }
  .hamburger   { display: flex; }
}

@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .nav-main, .nav-actions { display: none; }
  .site-logo-img { height: auto !important; width: 100%; max-width: 200px; object-fit: contain; }
  .hamburger {
    display: flex;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    padding: 10px 12px;
    gap: 5px;
  }
  .hero .container { grid-template-columns: 1fr; }
  .hero-form-card { max-width: 560px; margin: 0 auto; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .about-inner { grid-template-columns: 1fr; gap: 48px; }
  .about-img-frame { max-height: 400px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2)::after { display: none; }
  .appt-form-grid { grid-template-columns: 1fr 1fr; }
  .appt-tabs { gap: 3px; }
  .appt-tab span { display: none; }
  .appt-tab { padding: 8px 12px; }
  .coaching-accordion { flex-direction: column; }
  .coaching-panel { min-height: 100px; }
  .coaching-panel.active { flex: 2; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .header-top-left a:not(:first-child) { display: none; }
  .header-top .social-links { display: none; }
}

@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero-form-card { padding: 28px 20px; }
  .appt-form-grid { grid-template-columns: 1fr; }
  .appt-tab span { display: none; }
  .appt-form-footer { flex-direction: column; align-items: stretch; }
  .appt-submit { width: 100%; justify-content: center; }
  .stats-grid { grid-template-columns: 1fr; max-width: 360px; }
  .stat-item::after { display: none; }
  .stat-item:not(:last-child) { border-bottom: 1px solid var(--clr-border); }
  .footer-main { grid-template-columns: 1fr; }
  .about-features { grid-template-columns: 1fr; }
  .coach-services-icons { gap: 24px; }
  .appt-widget { padding: 28px 20px; }
  .appt-widget-header { flex-direction: column; align-items: stretch; }
  .appt-tabs { justify-content: center; }
  .cookie-banner { flex-direction: column; }
}

/* ============================================================
   WHATSAPP FLOATING WIDGET
   ============================================================ */
.wa-widget {
  position: fixed;
  bottom: 32px;
  left: 32px;
  z-index: 1050;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-direction: row-reverse;
}
.wa-btn {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(37,211,102,.4);
  transition: transform .3s ease, box-shadow .3s ease;
  flex-shrink: 0;
}
.wa-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 32px rgba(37,211,102,.55);
}
/* Outer pulse ring */
.wa-btn::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,.5);
  animation: waPulse 2.4s ease-out infinite;
}
/* Second pulse ring */
.wa-btn::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,.25);
  animation: waPulse 2.4s ease-out .6s infinite;
}
@keyframes waPulse {
  0%   { transform: scale(.85); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
/* Tooltip label */
.wa-tooltip {
  background: #fff;
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  border-left: 3px solid #25D366;
}
.wa-tooltip strong {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: #0D1E2D;
  line-height: 1.3;
}
.wa-tooltip span {
  display: block;
  font-size: .72rem;
  color: #637FA0;
  margin-top: 1px;
}
.wa-widget:hover .wa-tooltip {
  opacity: 1;
  transform: translateX(0);
}
/* Tablet & mobile: pin bottom-left, hide tooltip (no hover on touch) */
@media (max-width: 1024px) {
  .wa-widget {
    bottom: 24px;
    left: 24px;
    right: auto;
    flex-direction: row;
  }
  .wa-tooltip { display: none; }
  .wa-btn { width: 54px; height: 54px; font-size: 1.35rem; }
}
@media (max-width: 480px) {
  .wa-widget { bottom: 20px; left: 20px; }
  .wa-btn { width: 52px; height: 52px; font-size: 1.3rem; }
}

/* ============================================================
   GLOBAL FORM VALIDATION HELPERS
   ============================================================ */

/* Shake animation — added to submit buttons on failed validation */
@keyframes formShake {
  0%, 100% { transform: translateX(0); }
  20%, 60%  { transform: translateX(-6px); }
  40%, 80%  { transform: translateX(6px); }
}
.form-shake { animation: formShake .42s ease; }

/* Hero form — field wrapper keeps error message scoped */
.hero-form .form-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* form-row already uses display:flex; children are .form-field flex items */
.hero-form .form-row .form-field { flex: 1; }

/* The consent row carries BOTH classes: .form-check wants the box beside its
   label, .form-field wants a column so the error can sit underneath. The
   column won on specificity and left the checkbox stranded above its own
   label. Wrap instead — box and label share the first line, the error takes
   the next one. Specificity here (0,3,0) beats both, so neither can win back. */
.hero-form .form-field.form-check {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
}
.hero-form .form-field.form-check label {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.hero-form .form-field.form-check .form-field-error { flex-basis: 100%; }

/* Inline error message — hero form and newsletter */
.form-field-error,
.nl-error {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: .73rem;
  color: #e05c5c;
  margin-top: 4px;
  line-height: 1.4;
}
.form-field-error::before,
.nl-error::before {
  content: '\f06a';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  flex-shrink: 0;
}
.form-field-error.show,
.nl-error.show {
  display: flex;
}

/* Newsletter error sits below the input+button row */
.nl-error {
  margin-top: 6px;
  color: #ffb3b3;
}

/* ============================================================
   BOOK-NOW FULL-PAGE MODAL
   ============================================================ */
.bk-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10,24,35,.72);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 16px 48px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.bk-overlay.open {
  opacity: 1;
  visibility: visible;
}
.bk-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 880px;
  box-shadow: 0 40px 100px rgba(0,0,0,.38);
  display: flex;
  flex-direction: column;
  transform: translateY(28px) scale(.97);
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
  overflow: hidden;
  margin: auto;
}
.bk-overlay.open .bk-modal {
  transform: translateY(0) scale(1);
}

/* Header */
.bk-header {
  background: var(--clr-bg-dark);
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}
.bk-header-brand { display: flex; flex-direction: column; gap: 4px; }
.bk-header-logo {
  font-family: var(--ff-serif);
  font-size: 1rem;
  color: rgba(255,255,255,.9);
}
.bk-header-logo em { color: var(--clr-accent-lt); font-style: italic; }
.bk-header-tag {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.38);
}
.bk-close {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.65);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}
.bk-close:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Tab bar */
.bk-tabs {
  display: flex;
  background: #f4f5f7;
  border-bottom: 2px solid var(--clr-border);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.bk-tabs::-webkit-scrollbar { display: none; }
.bk-tab {
  flex: 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 15px 18px;
  font-family: var(--ff-sans);
  font-size: .82rem;
  font-weight: 600;
  color: var(--clr-text-lt);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s;
}
.bk-tab i { font-size: .85rem; }
.bk-tab:hover { color: var(--clr-primary); background: rgba(0,0,0,.03); }
.bk-tab.active { color: var(--clr-primary); border-bottom-color: var(--clr-accent); background: #fff; }

/* Panel body */
.bk-body { flex: 1; }
.bk-panel { display: none; padding: 32px; }
.bk-panel.active { display: block; }

/* Panel intro */
.bk-panel-intro { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--clr-border); }
.bk-panel-intro h2 {
  font-family: var(--ff-serif);
  font-size: 1.55rem;
  color: var(--clr-primary);
  margin-bottom: 6px;
}
.bk-panel-intro p { font-size: .875rem; color: var(--clr-text-lt); line-height: 1.65; }

/* Form grid */
.bk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  margin-bottom: 28px;
}
.bk-field--full { grid-column: 1 / -1; }

/* Field */
.bk-field { display: flex; flex-direction: column; gap: 6px; }
.bk-field label {
  font-size: .73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--clr-primary);
}
.bk-field label span { color: #e05c5c; margin-left: 1px; }
.bk-field input,
.bk-field select,
.bk-field textarea {
  border: 1.5px solid var(--clr-border);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: var(--ff-sans);
  font-size: .9rem;
  color: var(--clr-text);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  width: 100%;
}
.bk-field input:focus,
.bk-field select:focus,
.bk-field textarea:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(124,197,190,.15);
}
.bk-field input.is-invalid,
.bk-field select.is-invalid,
.bk-field textarea.is-invalid {
  border-color: #e05c5c;
  box-shadow: 0 0 0 3px rgba(224,92,92,.1);
}
.bk-field input.is-valid,
.bk-field select.is-valid,
.bk-field textarea.is-valid {
  border-color: #2D8C4E;
  box-shadow: 0 0 0 3px rgba(45,140,78,.08);
}
.bk-field textarea { resize: vertical; min-height: 90px; }

/* Inline error */
.bk-error {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  color: #e05c5c;
  line-height: 1.4;
}
.bk-error::before {
  content: '\f06a';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  flex-shrink: 0;
}
.bk-error.show { display: flex; }

/* Form footer row */
.bk-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--clr-border);
  flex-wrap: wrap;
}
.bk-disclaimer {
  font-size: .78rem;
  color: var(--clr-text-lt);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
}
.bk-disclaimer i { color: var(--clr-accent); flex-shrink: 0; }

/* Submit button */
.bk-submit {
  background: var(--clr-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 13px 28px;
  font-family: var(--ff-sans);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .2s, transform .15s;
  flex-shrink: 0;
}
.bk-submit:hover:not(:disabled) { background: var(--clr-accent); transform: translateY(-1px); }
.bk-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.bk-submit-label { display: flex; align-items: center; gap: 8px; }
.bk-submit-spinner { display: none; align-items: center; gap: 8px; }
.bk-submit.loading .bk-submit-label  { display: none; }
.bk-submit.loading .bk-submit-spinner { display: flex; }

/* Success state */
.bk-form-inner { display: block; }
.bk-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 32px;
  gap: 16px;
}
.bk-form.submitted .bk-form-inner { display: none; }
.bk-form.submitted .bk-success { display: flex; }
.bk-success-icon { font-size: 3.8rem; color: #2D8C4E; line-height: 1; }
.bk-success h3 {
  font-family: var(--ff-serif);
  font-size: 1.7rem;
  color: var(--clr-primary);
}
.bk-success p { color: var(--clr-text-lt); max-width: 420px; line-height: 1.7; font-size: .9rem; }
.bk-success-close {
  background: var(--clr-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 13px 36px;
  font-family: var(--ff-sans);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background .2s;
}
.bk-success-close:hover { background: var(--clr-accent); }

/* Responsive */
@media (max-width: 640px) {
  .bk-overlay { padding: 0; align-items: flex-end; }
  .bk-modal { border-radius: 20px 20px 0 0; max-width: 100%; }
  .bk-panel { padding: 24px 20px; }
  .bk-grid { grid-template-columns: 1fr; }
  .bk-form-footer { flex-direction: column; align-items: stretch; }
  .bk-submit { justify-content: center; width: 100%; }
  .bk-header { padding: 18px 20px; }
  .bk-tab { padding: 13px 10px; font-size: .75rem; min-width: 90px; }
}

/* is-invalid / is-valid border states for hero form inputs */
.hero-form .form-control.is-invalid {
  border-color: #e05c5c;
  box-shadow: 0 0 0 3px rgba(224,92,92,.12);
}
.hero-form .form-control.is-valid {
  border-color: #2D8C4E;
  box-shadow: 0 0 0 3px rgba(45,140,78,.1);
}

/* ── Slot Picker v2 ── */
.slot-picker {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-white);
  overflow: hidden;
  font-size: .82rem;
}
.sp-inner { display: flex; }
.sp-cal-panel {
  flex: 0 0 196px;
  width: 196px;
  padding: 10px 10px 8px;
  border-right: 1px solid var(--clr-border);
  background: var(--clr-bg);
}
.sp-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sp-month-label { font-size:.74rem; font-weight:700; color:var(--clr-text); letter-spacing:.01em; }
.sp-nav-btn {
  width:22px; height:22px; border-radius:50%;
  border:1px solid var(--clr-border);
  background:var(--clr-white);
  display:flex; align-items:center; justify-content:center;
  font-size:.55rem; color:var(--clr-primary);
  cursor:pointer; transition:.2s; line-height:1;
}
.sp-nav-btn:hover { background:var(--clr-primary); color:#fff; border-color:var(--clr-primary); }
.sp-dow-row {
  display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:2px;
}
.sp-dow-row span {
  font-size:.57rem; font-weight:700; text-align:center;
  color:var(--clr-text-lt); text-transform:uppercase;
  letter-spacing:.02em; padding:2px 0 4px;
}
.sp-days { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.sp-day {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:500; border-radius:3px;
  cursor:pointer; transition:background .12s,color .12s;
  position:relative; color:var(--clr-text-md);
}
.sp-day:hover:not(.sp-day--disabled):not(.sp-day--empty):not(.sp-day--booked) {
  background:var(--clr-accent); color:#fff;
}
.sp-day--empty { cursor:default; }
.sp-day--disabled { color:#c8d8e5; cursor:default; }
.sp-day--booked  { color:#bfcfdb; cursor:not-allowed; text-decoration:line-through; }
.sp-day--today   { color:var(--clr-accent); font-weight:800; }
.sp-day--today::after {
  content:''; position:absolute; bottom:1px; left:50%;
  transform:translateX(-50%); width:3px; height:3px;
  border-radius:50%; background:var(--clr-accent);
}
.sp-day--selected { background:var(--clr-primary)!important; color:#fff!important; }
/* Time panel */
.sp-time-panel {
  flex:1; padding:10px 12px; min-width:0;
  display:flex; flex-direction:column;
}
.sp-time-prompt {
  font-size:.75rem; color:var(--clr-text-lt);
  margin:auto; text-align:center; padding:10px 0; font-style:italic;
}
.sp-time-content { flex:1; }
.sp-time-date-lbl {
  font-size:.74rem; font-weight:700; color:var(--clr-primary);
  padding-bottom:8px; margin-bottom:8px;
  border-bottom:1px solid var(--clr-border);
}
.sp-slot-group { margin-bottom:8px; }
.sp-slot-lbl {
  font-size:.59rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--clr-text-lt);
  display:block; margin-bottom:5px;
}
.sp-slot-btns { display:flex; flex-wrap:wrap; gap:4px; }
.sp-slot-btn {
  padding:4px 9px; font-size:.71rem; font-weight:500;
  border-radius:4px; border:1px solid var(--clr-border);
  background:var(--clr-white); color:var(--clr-text);
  cursor:pointer; transition:.15s;
  font-family:var(--ff-sans); line-height:1.4;
}
.sp-slot-btn:hover:not(:disabled) {
  border-color:var(--clr-accent); color:var(--clr-accent);
  background:rgba(75,170,161,.06);
}
.sp-slot-btn--selected {
  background:var(--clr-accent)!important; color:#fff!important;
  border-color:var(--clr-accent)!important;
}
.sp-slot-btn:disabled {
  color:#b5cad5; background:#f4f7fa; cursor:not-allowed;
  border-color:#d5e2ea; text-decoration:line-through; opacity:.75;
}

/* Confirm bar */
.sp-confirm-bar {
  display:flex; align-items:center; gap:8px;
  padding:7px 12px;
  background:rgba(75,170,161,.07);
  border-top:1px solid rgba(75,170,161,.25);
  font-size:.78rem; color:var(--clr-primary);
}
.sp-confirm-bar i { color:var(--clr-accent); flex-shrink:0; }
.sp-confirm-text { flex:1; font-weight:600; }
.sp-change-btn {
  font-size:.69rem; font-weight:600; color:var(--clr-accent);
  text-decoration:underline; background:none; border:none;
  cursor:pointer; padding:0; flex-shrink:0;
  font-family:var(--ff-sans);
}

/* Legend */
.sp-legend {
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  font-size:.62rem; color:var(--clr-text-lt);
  padding:5px 10px; border-top:1px solid var(--clr-border);
  background:#f8fbfd; letter-spacing:.01em;
}
.sp-legend span { display:flex; align-items:center; gap:4px; }
.sp-dot { width:6px; height:6px; border-radius:50%; display:inline-block; flex-shrink:0; }
.sp-dot--taken { background:#bfcfdb; border:1px solid #aebfcc; }

/* Error */
.sp-error { font-size:.73rem; color:#c0392b; padding:5px 10px; display:none; }
.sp-error.sp-visible { display:block; }

/* Mobile: stack calendar above times */
@media (max-width: 540px) {
  .sp-inner { flex-direction:column; }
  .sp-cal-panel { flex:none; width:100%; border-right:none; border-bottom:1px solid var(--clr-border); }
  .sp-time-panel { padding:10px; }
}

/* ============================================================
   BOOKING — honeypot + slot states
   ============================================================ */
/* Spam trap: off-screen rather than display:none, since some bots skip hidden
   fields. Real users never see or tab into it. */
.cm-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Whole day gone — the picker disables the date button */
.sp-day.sp-day--full {
  opacity: .38;
  cursor: not-allowed;
  text-decoration: line-through;
}
/* Inline feedback under a booking form */
.cm-book-msg {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: .84rem;
  line-height: 1.55;
  display: none;
}
.cm-book-msg.show { display: block; }
.cm-book-msg--err {
  background: rgba(198, 62, 62, .09);
  border: 1px solid rgba(198, 62, 62, .28);
  color: #a3342f;
}
.cm-book-msg--ok {
  background: rgba(45, 140, 78, .09);
  border: 1px solid rgba(45, 140, 78, .28);
  color: #1f6b39;
}

/* Small helper line under a booking field */
.appt-field-hint {
  display: block;
  margin-top: 6px;
  font-size: .72rem;
  color: var(--clr-text-lt);
  line-height: 1.5;
}

/* ── Staff sign-in (header, far top-right) ────────────────────────────────
   Last item in .nav-actions, so it occupies the top-right corner of the page.

   Outlined, not filled: "Book Now" beside it is the client's path and must stay
   the loudest control in the header. This one only has to be findable by staff
   who are looking for it — which is a different job from competing for
   attention, and is why it is quieter without being dim.

   The colours below are for a DARK header, which is what this one always is:
   transparent over the hero photograph at the top of the page, and
   rgba(13,22,38,.97) once scrolled. An earlier version of this rule used
   --clr-primary-dk on the assumption of a white header — dark navy text on a
   dark navy bar, measuring 1.96:1 against a 4.5:1 requirement, which is to say
   invisible. White at 88% opacity measures about 13:1 on the scrolled header and
   matches the search button and nav links already beside it. */
.nav-staff {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50px;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.06);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
}
.nav-staff i { font-size: .75rem; color: var(--clr-accent); transition: var(--transition); }
.nav-staff:hover {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: var(--clr-white);
}
.nav-staff:hover i { color: var(--clr-white); }
/* The icon is accent teal on the dark bar, but the hover fill IS accent teal —
   leaving it there would make it vanish into its own background. */
.nav-staff:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

/* Making room for it.
   The header row is logo (380px) + menu (444px) + actions on one line inside a
   container capped at 1280px, which left roughly 39px of slack — and a labelled
   button needs about 125px. Because the cap is a maximum, a wider monitor does
   not help: the shortfall is identical at every desktop size, so something had
   to give at all of them.

   The "Call Us" label is the cheapest thing to give up. The icon beside it stays
   a live tel: link, and the number is still written out in the footer and the
   mobile menu — whereas a control pushed past the edge of the container is
   misaligned with every other element on the page, and at narrow widths simply
   unreachable. */
@media (min-width: 961px) {
  .nav-phone-text { display: none; }

  /* With the label gone, the only child left is the icon disc — but the pill
     kept the padding it was given for icon-PLUS-text (8px left, 16px right).
     That left the disc sitting 8px from one edge and 18px from the other inside
     a 62x54 box: visibly off-centre, and the first thing the eye catches in an
     otherwise aligned row.

     Rather than balance the padding, the outer pill is dropped entirely. Beside
     the round search button, a lone disc is the shape this control already
     wanted to be, and the two now read as one set. 44px keeps it comfortably
     above the minimum touch target while staying the larger, primary one. */
  .nav-phone {
    flex-shrink: 0;
    padding: 0;
    gap: 0;
    background: transparent;
    border-color: transparent;
  }
  .nav-phone:hover { background: transparent; }
  .nav-phone-icon {
    width: 44px;
    height: 44px;
    transition: var(--transition);
  }
  .nav-phone:hover .nav-phone-icon { background: var(--clr-primary); }
  .nav-phone:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 3px;
    border-radius: 50%;
  }
}

/* Below 960px .nav-actions is hidden entirely, so the mobile menu carries it. */
.mobile-nav-staff {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 10px 16px;
  border: 1px solid rgba(124,197,190,.4);
  border-radius: 50px;
  color: var(--clr-accent-lt);
  font-size: .85rem;
  font-weight: 600;
  transition: var(--transition);
}
.mobile-nav-staff i { font-size: .8rem; }
.mobile-nav-staff:hover {
  background: rgba(124,197,190,.14);
  border-color: var(--clr-accent-lt);
  color: var(--clr-white);
}

/* ============================================================
   FAQ  (shared by the home page and the contact page)
   Markup comes from includes/faq.php.
   ============================================================ */
.faq-section {
  padding: 96px 0;
  background: var(--clr-bg);
}
.faq-header { text-align: center; margin-bottom: 48px; }
.faq-header .section-title { margin-inline: auto; }
.faq-sub {
  font-size: .88rem;
  color: var(--clr-text-lt);
  max-width: 480px;
  margin: 12px auto 0;
  line-height: 1.7;
}

/* Two balanced columns of topic groups. Each group is kept whole — a heading
   is never orphaned from its questions at the foot of a column. */
.faq-topics {
  columns: 2;
  column-gap: 32px;
}
.faq-topic {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 32px;
}
.faq-topic-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ff-sans);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--clr-accent);
  margin-bottom: 12px;
  padding-left: 2px;
}
.faq-topic-label i { font-size: .82rem; }

.faq-item {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.faq-item[open] {
  box-shadow: 0 4px 20px rgba(46,111,146,.09);
  border-color: rgba(75,170,161,.4);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 22px;
  font-size: .87rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--clr-primary);
  cursor: pointer;
  transition: color .2s ease;
  /* Suppress the native disclosure triangle; the +/× carries the state. */
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--clr-accent); }
.faq-q:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
.faq-ico {
  flex-shrink: 0;
  font-size: .7rem;
  color: var(--clr-accent);
  transition: transform .3s ease;
}
.faq-item[open] .faq-ico { transform: rotate(45deg); }

.faq-a {
  padding: 0 22px 18px;
  /* <details> has no open/close transition to hook, so the answer eases itself
     in on reveal. Height is never constrained, so long answers cannot clip. */
  animation: faq-open .28s ease both;
}
.faq-a p {
  font-size: .84rem;
  color: var(--clr-text-md);
  line-height: 1.75;
  margin: 0;
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-a { animation: none; }
  .faq-ico { transition: none; }
}

@media (max-width: 900px) {
  .faq-section { padding: 72px 0; }
  .faq-topics { columns: 1; }
}

/* ============================================================
   BOOKING — LOCATIONS & PRACTICE HOURS
   Sits under the context strip in the appointment section.
   ============================================================ */
.appt-locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 26px;
  margin: 14px 0 26px;
  padding: 16px 20px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
}
.appt-loc { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.appt-loc-icon {
  flex-shrink: 0;
  /* The block is top-aligned, so a 28px badge next to a ~21px label line hangs
     3px below the word it belongs to. Pull it up onto the label's centre. */
  margin-top: -3px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(75,170,161,.14);
  color: var(--clr-accent);
  font-size: .74rem;
}
.appt-loc strong {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--clr-primary);
  margin-bottom: 2px;
}
/* :not() matters — this rule is for the address / hours lines. Without the
   exclusion it also matched .appt-loc-icon (also a span) and, being one class
   plus one type, outspecified it: the badge computed display:block instead of
   flex, so the glyph sat in its top-left corner instead of centred. */
.appt-loc span:not(.appt-loc-icon) {
  display: block;
  font-size: .78rem;
  color: var(--clr-text-md);
  line-height: 1.55;
}
@media (max-width: 640px) {
  .appt-locations { padding: 14px 16px; }
}

/* Shown when the chosen consulting site has no weekly hours defined yet. */
.sp-empty-note {
  font-size: .74rem;
  line-height: 1.6;
  color: var(--clr-text-md);
  background: #fff8e6;
  border-top: 1px solid var(--clr-border);
  padding: 9px 12px;
  margin: 0;
}
.sp-empty-note a { color: var(--clr-accent); font-weight: 700; }

/* ============================================================
   VISION / MISSION / CORE VALUES
   Shared by the home page (as an opening statement under the hero)
   and the About page. Lives here rather than in either page so the
   two can never drift apart.
   ============================================================ */
.vm-section {
  padding: 88px 0;
  background: var(--clr-white);
}
.vm-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 46px;
}
.vm-head .section-title { margin-inline: auto; }
.vm-head-sub {
  margin-top: 14px;
  font-size: .9rem;
  line-height: 1.75;
  color: var(--clr-text-lt);
}
.vm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.vm-card {
  padding: 34px 32px;
  background: var(--clr-bg);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--clr-accent);
  transition: transform .25s ease, box-shadow .25s ease;
}
.vm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
/* The mission is the working promise, the vision the destination — a
   different accent keeps them from reading as two halves of one card. */
.vm-card--mission { border-top-color: var(--clr-primary); }
.vm-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--clr-white);
  color: var(--clr-primary);
  font-size: 1.02rem;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.vm-card--mission .vm-icon { color: var(--clr-accent); }
.vm-card h3 {
  font-family: var(--ff-serif);
  font-size: 1.3rem;
  color: var(--clr-primary);
  margin-bottom: 10px;
}
.vm-card p {
  font-size: .89rem;
  line-height: 1.8;
  color: var(--clr-text-md);
}

.vm-values {
  margin-top: 36px;
  text-align: center;
}
.vm-values-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--clr-accent);
  margin-bottom: 16px;
}
.vm-values-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.vm-values-list li {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  font-size: .82rem;
  font-weight: 600;
  color: var(--clr-text-md);
}

@media (max-width: 900px) {
  .vm-section { padding: 64px 0; }
  .vm-grid { grid-template-columns: 1fr; }
  .vm-card { padding: 28px 24px; }
}

/* ============================================================
   LEGAL PAGES — privacy.php, cookies.php
   Shared so the two notices cannot drift apart typographically.
   ============================================================ */
.lg-hero {
  background: var(--clr-bg-dark);
  padding: calc(var(--header-h) + 64px) 0 64px;
  text-align: center;
}
.lg-tag { justify-content: center; color: var(--clr-accent-lt); }
.lg-title {
  font-family: var(--ff-serif);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  color: var(--clr-white);
  margin: 10px 0 14px;
  line-height: 1.15;
}
.lg-title em { color: var(--clr-accent); font-style: italic; }
.lg-lede {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(255,255,255,.72);
  font-size: .95rem;
  line-height: 1.75;
}
.lg-updated {
  margin-top: 18px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255,255,255,.42);
}

.lg-body { background: var(--clr-white); padding: 56px 0 88px; }
.lg-container { max-width: 820px; }

/* Draft banner — removed once the practice has signed the notice off. */
.lg-draft {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px;
  margin-bottom: 36px;
  border-radius: var(--radius-md);
  background: #fdf6e6;
  border: 1px solid #e8d9ae;
  font-size: .84rem;
  line-height: 1.65;
  color: #6b5720;
}
.lg-draft i { color: #b98b1e; margin-top: 3px; flex-shrink: 0; }

.lg-flag {
  display: inline-block;
  padding: 2px 9px;
  margin-right: 8px;
  border-radius: 20px;
  background: #f4e3bd;
  color: #6b5720;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  vertical-align: 1px;
}
.lg-flag-block {
  padding: 14px 18px;
  border-left: 3px solid #d9b96a;
  border-radius: var(--radius-sm);
  background: #fdf6e6;
  font-size: .85rem;
}

/* Contents */
.lg-toc {
  padding: 22px 26px;
  margin-bottom: 44px;
  background: var(--clr-bg);
  border-radius: var(--radius-md);
}
.lg-toc h2 {
  font-family: var(--ff-sans);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--clr-text-lt);
  margin-bottom: 12px;
}
.lg-toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 32px;
}
.lg-toc li { margin-bottom: 6px; break-inside: avoid; }
.lg-toc a {
  color: var(--clr-primary);
  text-decoration: none;
  font-size: .86rem;
}
.lg-toc a:hover { text-decoration: underline; }

/* Prose */
.lg-prose { color: var(--clr-text-md); font-size: .93rem; line-height: 1.8; }
.lg-prose h2 {
  font-family: var(--ff-serif);
  font-size: 1.35rem;
  color: var(--clr-primary);
  margin: 44px 0 14px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.lg-prose h2:first-child { margin-top: 0; }
.lg-prose h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--clr-text);
  margin: 26px 0 8px;
}
.lg-prose p { margin-bottom: 16px; }
.lg-prose ul { margin: 0 0 18px; padding-left: 22px; }
.lg-prose li { margin-bottom: 8px; }
.lg-prose a { color: var(--clr-primary); }
.lg-prose strong { color: var(--clr-text); }

/* Contact / address blocks */
.lg-facts { list-style: none; padding: 0; margin: 0 0 20px; }
.lg-facts li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--clr-border);
  font-size: .88rem;
}
.lg-facts li:last-child { border-bottom: none; }
.lg-facts strong {
  flex: 0 0 170px;
  color: var(--clr-text);
  font-weight: 600;
}

/* Table — must scroll rather than push the page sideways on a phone. */
.lg-table-wrap { overflow-x: auto; margin-bottom: 22px; }
.lg-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .84rem;
}
.lg-table th,
.lg-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--clr-border);
  vertical-align: top;
}
.lg-table th {
  background: var(--clr-bg);
  color: var(--clr-text);
  font-weight: 700;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lg-table code {
  font-size: .82rem;
  background: var(--clr-bg);
  padding: 2px 6px;
  border-radius: 4px;
}

.lg-seealso {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--clr-border);
  font-size: .86rem;
}

@media (max-width: 640px) {
  .lg-toc ol { columns: 1; }
  .lg-facts strong { flex-basis: 100%; }
}

/* Legal links in the footer bottom bar */
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.footer-legal-links a { color: rgba(255,255,255,.6); text-decoration: none; }
.footer-legal-links a:hover { color: var(--clr-accent-lt); text-decoration: underline; }
.footer-legal-links span { color: rgba(255,255,255,.28); }

/* ============================================================
   CONSENT ROWS — one per form, all three form systems
   Checkbox beside its text, error underneath; the label wraps
   the input so the whole line is a hit target.
   ============================================================ */
.appt-consent-row,
.bk-consent-row,
.cp-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: .78rem;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.appt-consent-row input[type="checkbox"],
.bk-consent-row input[type="checkbox"],
.cp-consent-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--clr-primary);
}
.appt-consent-row a,
.bk-consent-row a,
.cp-consent-row a { color: var(--clr-primary); text-decoration: underline; }
.appt-consent,
.bk-consent,
.cp-consent { margin-bottom: 18px; }

/* The drawer sits on a dark panel, so the row needs the light treatment. */
.bk-consent-row { color: var(--clr-text-md); }
.appt-consent-row { color: var(--clr-text-md); }
.cp-consent-row { color: rgba(255,255,255,.72); }
.cp-consent-row a { color: var(--clr-accent-lt); }

.hero-form-note {
  margin: -8px 0 18px;
  font-size: .74rem;
  color: var(--clr-text-lt);
  line-height: 1.55;
}

/* One map block per consulting site */
.cp-map-block { margin-bottom: 34px; }
.cp-map-block:last-child { margin-bottom: 0; }
.cp-map-caption {
  max-width: var(--container);
  margin: 0 auto 12px;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  color: var(--clr-primary);
}
.cp-map-caption i { color: var(--clr-accent); font-size: .85rem; }
.cp-map-caption span {
  font-family: var(--ff-sans);
  font-size: .78rem;
  color: var(--clr-text-lt);
}

/* The consent row sits inside .bk-field / .appt-field / .cp-field, whose own
   label rules are uppercase, letter-spaced, bold — and colour a direct <span>
   red, because that span is normally the required asterisk. A paragraph of
   consent text must not inherit any of that, so it is restated here at a
   specificity those rules cannot beat. */
.bk-field .bk-consent-row,
.bk-field .bk-consent-row span,
.appt-field .appt-consent-row,
.appt-field .appt-consent-row span,
.cp-field .cp-consent-row,
.cp-field .cp-consent-row span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: .78rem;
  line-height: 1.6;
}
.bk-field .bk-consent-row,
.bk-field .bk-consent-row span,
.appt-field .appt-consent-row,
.appt-field .appt-consent-row span { color: var(--clr-text-md); }
.cp-field .cp-consent-row,
.cp-field .cp-consent-row span { color: rgba(255,255,255,.72); }

/* The cancellation term, stated under each booking panel as well as in the FAQ.
   Lighter than the confidentiality line above it: it is useful, not a warning. */
.appt-disclaimer--cancel,
.bk-disclaimer--cancel {
  margin-top: 4px;
  opacity: .78;
  font-weight: 400;
}

/* The two notes under a booking form stack as one block, so the footer's
   space-between still puts notes on the left and the submit button on the right. */
.appt-disclaimers,
.bk-disclaimers {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* ── Hero breadcrumb ──────────────────────────────────────────────────────
   Shared by every page that puts a breadcrumb over a dark hero image. Pages
   set their own justify-content: the services hero is centred, contact is
   left-aligned. Colours live here so a new page cannot inherit black-on-dark. */
.sv-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: rgba(255,255,255,.5);
}
.sv-breadcrumb a { color: rgba(255,255,255,.7); text-decoration: none; }
.sv-breadcrumb a:hover { color: #fff; }
.sv-breadcrumb i { font-size: .6rem; }
.sv-breadcrumb span { color: var(--clr-accent-lt); }