/*
Theme Name: Ahamya
Theme URI: https://github.com/sayoojdx/sama-therapy-wordpress
Author: Ahamya
Description: Custom theme for the Ahamya child development and therapy centre — WordPress rebuild of the original React/Vite site, so staff can self-edit blog posts, team members, open positions, and gallery photos through the dashboard.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: ahamya
*/

/* =========================================================
   Ahamya — Design tokens
   Brand palette (from the logo colourways): pink, olive, cream,
   blue, dark brown. The role tokens below keep their old names
   (--teal, --clay, --gold…) because they're used throughout —
   read them as roles, not colours:
     --teal  = primary (pink)      --teal-deep = dark brown panels/text
     --clay  = secondary (blue)    --gold      = tertiary (olive)
   Where a palette colour is too light to carry white text or sit
   as text on white (pink, blue, olive are all ≤3.2:1), the role
   uses a deepened shade of it; the exact brand values stay in the
   --brand-* tokens for decoration and the logo. Dark panels read
   --paper for text. Change values here to redesign the site.
   ========================================================= */
/* The logo's typeface (its tagline is set in it; the AHAMYA wordmark is
   custom-drawn). Only the Regular weight ships — anything set in it must
   stay at 400, or the browser fakes a bold. */
@font-face{
  font-family: 'Myriad Pro';
  src: url('assets/fonts/MyriadPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  /* --- Brand palette (exact) --- */
  --brand-pink:  #D671AB;
  --brand-olive: #C9C468;
  --brand-cream: #F9E4B9;
  --brand-blue:  #4E98C5;
  --brand-brown: #3A0B03;

  /* --- Color roles --- */
  --paper:      #FFFFFF;   /* base background */
  --line:       #E8D3A8;   /* hairlines, dividers — cream, a step darker */
  --ink:        var(--brand-brown);   /* primary text */
  --ink-70:     rgba(58,11,3,0.72);
  /* 0.68 keeps secondary text ≥6:1 on paper — used for team
     roles and 0.72–0.85rem labels, so it must stay well above AA. */
  --ink-50:     rgba(58,11,3,0.68);
  --clay:       #2F78A8;   /* secondary — brand blue deepened, 4.8:1 with white */
  --clay-deep:  #225A80;
  --clay-tint:  #DCEAF4;
  --teal:       #B04A86;   /* primary — brand pink deepened, 5:1 with white */
  --teal-press: #8F3A6C;   /* primary hover/pressed — deeper pink, 7:1 with white */
  --teal-deep:  var(--brand-brown);   /* dark panels, strong text */
  --teal-tint:  #F7E3EE;   /* pale pink — highlight surfaces, focus rings */
  /* Renders the testimonial star ratings: brand olive is ~2:1 on paper,
     too faint for a meaningful graphic, so this is deepened to 4.5:1. */
  --gold:       #7D7828;   /* tertiary — olive */
  --gold-deep:  var(--brand-olive);
  --gold-tint:  var(--brand-cream);   /* light text on dark panels */
  --stone:      var(--brand-cream);   /* alternate section surface */
  --footer-bg:  var(--brand-brown);   /* footer — brand dark brown #3A0B03 */
  --logo-pink:  var(--brand-pink);
  --error:      #B3261E;   /* form errors — the palette has no red */
  --error-tint: #F6C9C4;   /* error text on dark panels */
  --scrim:      rgba(20,20,20,0.58); /* photo overlay for text legibility */
  --paper-rgb:  255,255,255;
  --ink-rgb:    58,11,3;

  /* --- Type --- */
  /* Every role is set in Poppins site-wide. The role names are kept so
     one of them can be pulled back to its own face without hunting
     through the rules that use it. */
  --font-poppins: 'Poppins', 'Segoe UI', sans-serif;
  --font-display: var(--font-poppins);
  --font-body:    var(--font-poppins);
  --font-mono:    var(--font-poppins);
  --font-hero:    var(--font-poppins);
  --font-nav:     var(--font-poppins);
  --font-brand:   var(--font-poppins);
  --font-serif:   var(--font-poppins);   /* founder names only */

  --step-eyebrow: 0.78rem;
  --step-small:   0.9rem;
  --step-body:    clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --step-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --step-h2:      clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem);
  --step-h1:      clamp(2.6rem, 1.9rem + 3vw, 4.2rem);

  /* --- Spacing (base 4px) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;
  --sp-10: 9rem;

  --radius: 6px;
  --radius-lg: 18px;
  --max: 1180px;
  --header-h: 76px;
}

/* =========================================================
   Reset / base
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body{
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }
h1,h2,h3,p,ul,figure{ margin: 0; }
ul{ padding: 0; list-style: none; }
button{ font: inherit; }
/* Browsers give form controls their own font; keep them in Poppins too. */
input, select, textarea{ font-family: inherit; }

[id]{ scroll-margin-top: calc(var(--header-h) + 34px); }

::selection{ background: var(--teal-tint); color: var(--teal-deep); }

:focus-visible{
  outline: 2.5px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap{
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
@media (max-width: 640px){
  .wrap{ padding-inline: var(--sp-5); }
}

/* Visually hidden but still read aloud and still indexed — used to give
   repeated links ("Read More") a unique, descriptive accessible name. */
.screen-reader-text{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path: inset(50%); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:var(--sp-4); top:-100px; z-index:200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--teal-deep); color: var(--paper);
  border-radius: var(--radius); text-decoration:none;
  font-size:0.9rem;
  transition: top .15s ease;
}
.skip-link:focus{ top: var(--sp-4); }

.eyebrow{
  font-family: var(--font-mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-deep);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.section-head{
  max-width: 46rem;
  margin-bottom: var(--sp-8);
}
.section-head.center{ margin-inline: auto; text-align: center; }
.section-head h2{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-h2);
  line-height: 1.15;
  margin-top: var(--sp-3);
  color: var(--ink);
}
.section-head h2:first-child{ margin-top: 0; }
.section-head p{
  margin-top: var(--sp-4);
  color: var(--ink-70);
  font-size: 1.05rem;
  max-width: 42rem;
}
.section-head.center p{ margin-inline: auto; }

section,
article.single-article{ padding-block: var(--sp-9); }
.surface{ background: var(--paper); }

.divider{
  display:flex; align-items:center; justify-content:center; gap: var(--sp-3);
  color: var(--line);
  margin-block: var(--sp-2);
}
.divider .rule{ height:1px; width: 64px; background: var(--line); }
.divider .dot{ width:6px; height:6px; border-radius:50%; }
.divider .dot.clay{ background: var(--teal); }
.divider .dot.teal{ background: var(--teal); border: none; }
.divider .dot.hollow{ background: transparent; border: 1.4px solid var(--teal); }

/* =========================================================
   Header — symmetric: menu / logo / CTA
   ========================================================= */
header.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: #fff;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
header.site-header.on-hero{
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
header.site-header.on-hero .tab-nav > a,
header.site-header.on-hero .nav-item > button.nav-label{
  color: rgba(var(--paper-rgb),0.92);
}
header.site-header.on-hero .logo{ color: var(--paper); }
header.site-header.on-hero .nav-toggle span{ background: var(--paper); }
header.site-header.on-hero .tab-nav > a:hover,
header.site-header.on-hero .nav-item:hover > button.nav-label,
header.site-header.on-hero .nav-item.open > button.nav-label{ color: var(--paper); border-color: rgba(var(--paper-rgb),0.5); }
main{ display:block; padding-top: var(--header-h); }
.header-inner{
  /* Wider than the site's shared content --max: the header needs enough
     room to keep logo + full nav on one row (like pulsecenter.ae's header),
     independent of how wide the page's body content reads. */
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--sp-6);
  row-gap: var(--sp-2);
  flex-wrap: wrap;
  padding-block: var(--sp-2);
}

.logo{
  display:flex; align-items:center;
  text-decoration: none;
  color: var(--logo-pink);
  transition: color .3s ease;
}
/* Icon and text sized independently (see ahamya_logo_lockup()) so the
   tagline stays readable at header size. */
.logo-lockup{
  --logo-icon-h: 56px;
  --logo-text-h: 25px;
  display:flex; align-items:center; gap: calc(var(--logo-text-h) * 0.5);
}
.logo-icon{ display:block; height: var(--logo-icon-h); width:auto; }
.logo-text{ display:block; height: var(--logo-text-h); width:auto; }
@media (max-width: 640px){
  :root{ --header-h: 68px; }
  .logo .logo-lockup{ --logo-icon-h: 44px; --logo-text-h: 20px; }
}

.tab-nav{
  display:flex; align-items:center; gap: var(--sp-5);
  flex-wrap: wrap;
  row-gap: var(--sp-3);
}
.tab-nav > a{
  text-decoration:none;
  color: var(--ink);
  font-family: var(--font-nav);
  font-size: 1.175rem;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0;
  padding-block: var(--sp-1);
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.tab-nav > a:hover{ color: var(--ink); border-color: var(--line); }
.tab-nav a.tab-cta{
  color: var(--paper);
  background: var(--teal);
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-weight: 400;
  border-bottom-color: transparent;
}
.tab-nav a.tab-cta:hover{ background: var(--teal-deep); border-color: transparent; }

/* Per-tab dropdowns */
.nav-item{
  position: relative;
  display: inline-flex; align-items: center; gap: 2px;
}
.nav-item::before{
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
}
.nav-item > button.nav-label{
  display:inline-flex; align-items:center; gap: var(--sp-2);
  background: none; border: none; cursor: pointer;
  color: var(--ink);
  font-family: var(--font-nav);
  font-size: 1.175rem;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0;
  padding: var(--sp-1) 0;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.nav-caret{
  width: 5px; height: 5px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
  opacity: 0.7;
}
.nav-item.open .nav-caret{ transform: rotate(-135deg) translateY(1px); }
.nav-item:hover > button.nav-label,
.nav-item.open > button.nav-label{ color: var(--ink); border-color: var(--line); }

.nav-drop{
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px -18px rgba(var(--ink-rgb),0.28);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
.nav-item.open .nav-drop{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-drop a{
  text-decoration:none;
  color: var(--ink-70);
  font-family: var(--font-nav);
  font-size: 1.125rem;
  font-weight: 300;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav-drop a:hover{ background: var(--teal-tint); color: var(--teal-deep); }

/* Hamburger — only exists below the mobile-nav breakpoint. */
.nav-toggle{
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px;
  margin-right: calc(var(--sp-2) * -1);
  background: none; border: none; cursor: pointer;
  padding: 0;
}
.nav-toggle span{
  display: block; height: 2px; width: 22px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
/* Collapse the bars into an X while the sheet is open. */
.site-header.menu-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.site-header.menu-open .nav-toggle span:nth-child(2){ opacity: 0; }
.site-header.menu-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   Mobile nav

   The desktop header is one flex row of logo + 7 links + a CTA. Left to
   wrap on a phone it grew several rows tall, so below this width the
   links move out of the bar entirely, into a sheet that drops from
   under it, and the bar keeps its fixed height.
   ========================================================= */
@media (max-width: 900px){
  .nav-toggle{ display: flex; }
  .header-inner{ flex-wrap: nowrap; }

  .tab-nav{
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    /* The bar's wrap is what let the desktop nav flow onto extra rows.
       In a column with a max-height it instead spills into a second
       *column*, throwing the CTA off the right edge — scroll, don't wrap. */
    flex-wrap: nowrap;
    gap: 0;
    /* Same look as the desktop dropdown: white sheet, brown text, pink accents. */
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px -24px rgba(var(--ink-rgb),0.35);
    padding: var(--sp-3) var(--sp-5) var(--sp-5);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Hidden by default, but still focusable-safe: display:none would
       drop it from the a11y tree entirely, which is what we want here
       since the toggle owns the open state. */
    display: none;
  }
  .tab-nav.open{ display: flex; }

  /* The sheet is white like the desktop dropdown, so its text keeps the
     dark --ink and picks up the pink accent on hover / when open. */
  .tab-nav > a,
  .nav-item > button.nav-label{ color: var(--ink); }
  .tab-nav > a:hover,
  .nav-item:hover > button.nav-label,
  .nav-item.open > button.nav-label{ color: var(--teal); border-color: transparent; }

  .tab-nav > a,
  .nav-item{
    width: 100%;
    padding-block: var(--sp-3);
    border-bottom: 1px solid var(--line);
  }
  .nav-item{ flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item > button.nav-label{
    width: 100%;
    justify-content: space-between;
    padding-block: 0;
    border-bottom: none;
    font-size: 1.125rem;
  }
  .nav-item .nav-caret{ margin-right: var(--sp-2); }

  /* In the sheet the submenu expands in flow rather than floating over
     the page, but it keeps the same white card look as the desktop
     popover, tinted pale pink so it reads as a group on the white sheet. */
  .nav-drop{
    position: static;
    transform: none;
    display: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0;
    margin: var(--sp-2) 0 0;
    background: var(--teal-tint); border: 0; box-shadow: none;
  }
  .nav-item.open .nav-drop{ display: flex; transform: none; }
  .nav-drop a{ white-space: normal; padding-block: var(--sp-3); }
  .nav-drop a:hover{ background: #fff; color: var(--teal-deep); }
  /* On the homepage the bar starts transparent with light text (.on-hero);
     inside the white sheet the links must stay dark. */
  header.site-header.on-hero .tab-nav > a,
  header.site-header.on-hero .nav-item > button.nav-label{ color: var(--ink); }
  header.site-header.on-hero .tab-nav > a:hover,
  header.site-header.on-hero .nav-item:hover > button.nav-label{ color: var(--teal); border-color: var(--line); }
  header.site-header.on-hero .nav-item.open > button.nav-label{ color: var(--teal); border-color: transparent; }
  header.site-header.on-hero .tab-nav a.tab-cta{ color: var(--paper); }

  .tab-nav > a{ font-size: 1.125rem; }
  .tab-nav a.tab-cta{
    margin-top: var(--sp-4);
    border-bottom: none;
    text-align: center;
    padding-block: 0.8rem;
  }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-primary{ background: var(--teal); color: var(--paper); }
.btn-primary:hover{ background: var(--teal-press); box-shadow: 0 6px 18px rgba(20,20,20,0.32); transform: translateY(-1px); }
.btn-ghost{ border-color: var(--ink); color: var(--ink); background:transparent; }
.btn-ghost:hover{ border-color: var(--teal-deep); color: var(--teal-deep); }
.btn-sm{ padding: 0.55rem 1.1rem; font-size: 0.85rem; }

/* =========================================================
   Hero — full-bleed photo slider, bleeds under the fixed header
   ========================================================= */
.hero-full{
  margin-top: calc(var(--header-h) * -1);
  padding-block: 0;
}
.page-hero{ padding-block: 0; }
.hero-slider{
  position: relative;
  height: min(92vh, 880px);
  min-height: 520px;
  overflow: hidden;
  color: var(--paper);
  background: var(--teal-deep); /* fallback when no image is set yet */
}
/* Photo panels render a real <img> (indexable, srcset-aware, alt-carrying)
   pinned to fill its container, replacing what used to be a CSS
   background-image. Every such container must establish a positioning
   context. */
.cover-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-slide{
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slide.active{ opacity: 1; }
/* Homepage hero as a looping video (ahamya_hero_video_bg()) instead of the
   photo slider — inherits .cover-img's absolute-fill/object-fit rule.
   display:block avoids the inline-element baseline gap some browsers add
   under <video>; the teal background shows while the file is loading. */
.hero-bg-video{ display: block; background: var(--teal-deep); }
.hero-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,20,20,0.55) 0%, var(--scrim) 55%, rgba(20,20,20,0.75) 100%);
}
.hero-slide-content{
  position: relative;
  height: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* "We're not an emergency service" line under enquiry forms. Quiet, but
   never dismissible — a parent in crisis has to be able to read it. */
.form-urgent-note{
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-70);
  max-width: 46rem;
}

/* Factual qualifier above the hero headline — what we do, and where. */
.hero-qualifier{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-tint);
  margin: 0 0 var(--sp-4);
}
@media (max-width: 640px){
  .hero-qualifier{ font-size: 0.64rem; letter-spacing: 0.1em; }
}

.eyebrow-light{ color: var(--gold-tint); }
.hero-slide-content h1{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-h1);
  line-height: 1.06;
  max-width: 18ch;
  margin-top: var(--sp-5);
  color: var(--paper);
}
.hero-slide-content h1 em{ font-style: italic; }
/* Homepage hero only — the compact page-hero banner on every other page
   (admissions, careers, contact, etc.) keeps the centred rule above.
   Content is anchored bottom-left and left-aligned, with an oversized,
   heavy, tight-tracked Inter headline, matching the hero layout on
   https://neuracore.uprock.pro/. */
.hero-full .hero-slide-content{
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding-bottom: var(--sp-8);
}
.hero-full .hero-slide-content h1{
  font-family: var(--font-hero);
  font-weight: 800;
  /* Sized for the two-line, all-caps "A SPACE TO DISCOVER, / LEARN AND
     GROW" — caps run much wider per character than the old two-word
     headline, so the ceiling is lower and the ch cap is lifted. */
  font-size: clamp(2.2rem, 1rem + 4.4vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: none;
  margin-top: 0;
  /* Translucent so the video reads through the letterforms. The heavy
     weight and large size are what keep it legible at this alpha — do
     not reuse this treatment on smaller or lighter text, where it would
     fall below an accessible contrast ratio. */
  color: rgba(var(--paper-rgb), 0.42);
}
.hero-full .hero-slide-content h1 em{ font-style: normal; }
/* The homepage lede is a pipe-delimited service list, not a sentence —
   it reads as one scannable strip, so it needs room to stay on a single
   line rather than the sentence-width cap the shared rule applies. Below
   ~900px it wraps anyway; the non-breaking spaces around each pipe in
   front-page.php keep any break between items, never mid-item. */
.hero-full .hero-slide-content .lede-light{
  max-width: none;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.hero-full .hero-slide-content .cta-row{ justify-content: flex-start; margin-top: var(--sp-6); }
/* Pipe separators live in CSS, not the markup, so the phone layout below
   can drop them instead of leaving one dangling at each line end. */
.hero-services span{ white-space: nowrap; }
.hero-services span + span::before{ content: "|"; margin-inline: 0.65em; opacity: 0.7; }

/* Homepage hero on phones. The fixed .mobile-actions bar (56px + safe
   area) sits over the bottom of the viewport, so the hero is sized to end
   exactly at its top edge — content anchored bottom-left stays fully
   visible instead of sliding under the bar. */
@media (max-width: 640px){
  .hero-full .hero-slider{
    height: calc(100svh - 56px - env(safe-area-inset-bottom, 0px));
    min-height: 500px;
  }
  .hero-full .hero-slide-content{
    padding-inline: var(--sp-5);
    padding-bottom: var(--sp-6);
  }
  .hero-full .hero-slide-content h1{
    /* ~3 lines at phone widths: "A SPACE TO / DISCOVER, / LEARN AND GROW". */
    font-size: clamp(1.9rem, 8.4vw, 2.6rem);
    line-height: 1.04;
    /* The 0.42 see-through treatment only stays legible at desktop sizes
       (see the base rule); at phone sizes it washes into the video. */
    color: rgba(var(--paper-rgb), 0.92);
    text-shadow: 0 2px 18px rgba(20,20,20,0.35);
  }
  .hero-services{
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin-top: var(--sp-4);
  }
  .hero-full .hero-slide-content .hero-services{ font-size: 0.8rem; }
  .hero-services span{
    padding: 0.32em 0.8em;
    border: 1px solid rgba(var(--paper-rgb), 0.45);
    border-radius: 999px;
    background: rgba(20,20,20,0.18);
  }
  .hero-services span + span::before{ content: none; }
  .hero-full .hero-slide-content .cta-row{
    flex-direction: column; align-items: stretch;
    width: 100%;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
  }
  .hero-full .hero-slide-content .cta-row .btn{ width: 100%; min-height: 48px; }
}
.lede-light{
  margin-top: var(--sp-5);
  max-width: 80ch;
  color: rgba(var(--paper-rgb),0.86);
  font-size: 1.15rem;
}
.hero-slide-content .cta-row{ display:flex; gap: var(--sp-4); margin-top: var(--sp-7); flex-wrap:wrap; justify-content:center; }
.btn-ghost-light{ border-color: rgba(var(--paper-rgb),0.6); color: var(--paper); background:transparent; }
.btn-ghost-light:hover{ border-color: var(--paper); background: rgba(var(--paper-rgb),0.1); }
.btn-whatsapp svg{ width: 18px; height: 18px; flex: none; }

/* Homepage hero reveal — letters settle into place, then the lede/CTA
   blur in. assets/js/hero-text-reveal.js adds .hero-reveal/.reveal-char
   and toggles .is-in; these classes never exist without it, so without
   JS (or with prefers-reduced-motion) the heading renders normally. */
/* Keeps each word's letters on one line — the per-letter inline-blocks
   below would otherwise let a line break fall mid-word ("DISCO/VER"). */
.hero-reveal .reveal-word{ display: inline-block; white-space: nowrap; }
.hero-reveal .reveal-char{
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotate(4deg) scale(0.94);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-reveal.is-in .reveal-char{
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.hero-reveal-fade{
  opacity: 0;
  filter: blur(6px);
  transition: opacity 0.7s ease, filter 0.7s ease;
}
.hero-reveal-fade.is-in{
  opacity: 1;
  filter: blur(0);
}

/* Section reveal on scroll — assets/js/scroll-reveal.js adds .reveal to the
   structural blocks still below the fold, then flips .is-in as each one comes
   into view. Same contract as the hero reveal above: .reveal never exists
   unless the script put it there, so no-JS and prefers-reduced-motion both
   render every section plainly. 14px and 0.55s on purpose — enough movement
   to mark a change of subject, not enough that anyone waits for it. */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

.hero-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(var(--ink-rgb),0.28);
  color: var(--paper);
  border: 1px solid rgba(var(--paper-rgb),0.4);
  font-size: 1.6rem; line-height: 1;
  display:flex; align-items:center; justify-content:center;
  cursor: pointer;
  transition: background .18s ease;
  z-index: 2;
}
.hero-arrow:hover{ background: rgba(var(--ink-rgb),0.5); }
.hero-arrow.prev{ left: var(--sp-5); }
.hero-arrow.next{ right: var(--sp-5); }

.hero-dots{
  position: absolute; bottom: var(--sp-6); left: 0; right: 0;
  display:flex; justify-content:center; gap: var(--sp-3);
  z-index: 2;
}
.hero-dot{
  /* The dot stays 9px visually; ::before widens the hit area to 44px so it
     clears the minimum tap target on a phone. Without it these were 9px
     targets on the device most parents use. */
  position: relative;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.4px solid rgba(var(--paper-rgb),0.7);
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.hero-dot::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  width:44px; height:44px;
  border-radius:50%;
}
.hero-dot.active{ background: var(--paper); }

/* The gap already spaces the dots; this keeps their 44px hit areas from
   overlapping each other. */
.hero-dots{ gap: var(--sp-5); }

@media (max-width: 640px){
  .hero-arrow{ display:none; }
}

/* Compact variant — sub-page banners (photo slider, shorter) */
.hero-slider.compact{
  height: min(52vh, 460px);
  min-height: 320px;
}
.hero-slider.compact .hero-slide-content{
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  padding-bottom: var(--sp-7);
}
.hero-slider.compact .hero-slide-content h1{
  margin-top: var(--sp-3);
  max-width: 24ch;
}
.hero-slider.compact .hero-dots{ bottom: var(--sp-5); left: var(--sp-6); right: auto; justify-content: flex-start; }
.hero-slider.compact .hero-arrow{ width: 38px; height: 38px; font-size: 1.3rem; }

/* =========================================================
   Service detail page
   ========================================================= */
.detail-columns{
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8);
  margin-top: var(--sp-8);
}
.detail-columns h2,
.detail-columns h3{ font-family: var(--font-display); font-size:1.15rem; font-weight:600; }
.service-intro{ margin-top: var(--sp-4); font-size: 1.05rem; }
.check-list{ margin-top: var(--sp-4); display:flex; flex-direction:column; gap: var(--sp-3); }
.check-list li{
  position:relative; padding-left: var(--sp-6);
  color: var(--ink-70); font-size:0.96rem; line-height:1.5;
}
.check-list li::before{
  content:"";
  position:absolute; left:0; top:0.4em;
  width:12px; height:7px;
  border-left: 1.8px solid var(--teal);
  border-bottom: 1.8px solid var(--teal);
  transform: rotate(-45deg);
}
@media (max-width: 780px){
  .detail-columns{ grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* Service page — optional freeform "More Details" section (extra
   subsections / per-service FAQs authored as H3 + paragraphs/lists). */
.service-more-details{ max-width: 46rem; }
.service-more-details h3{
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
  margin-top: var(--sp-7);
}
.service-more-details h3:first-child{ margin-top: 0; }
.service-more-details p{ margin-top: var(--sp-3); color: var(--ink-70); line-height: 1.7; }
.service-more-details .check-list{ margin-top: var(--sp-3); }

/* =========================================================
   Brand story
   ========================================================= */
.story-grid{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8);
  align-items:center;
}
.story-img{
  position: relative; /* .cover-img fills it */
  margin: 0;
  aspect-ratio: 1 / 1;
  max-height: 560px;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--stone);
}
/* The placeholder photo has the child left of centre; keep him in frame. */
.story-img .cover-img{ object-position: 35% 50%; }
.story-spread{
  position: relative;
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-8) var(--sp-9);
  align-items: start;
  padding-top: var(--sp-6);
}
.story-lead, .story-beliefs{ position:relative; z-index:1; }
.story-lead h2{
  font-family: var(--font-display); font-weight:500; font-size: var(--step-h2);
  line-height: 1.1; color: var(--teal-deep); margin-bottom: var(--sp-5);
}
.story-lead > p{ color: var(--ink-70); font-size: 1.05rem; line-height:1.7; max-width: 38rem; }
.story-lead > p + p{ margin-top: var(--sp-4); }

.story-beliefs{
  display:flex; flex-direction:column; gap: var(--sp-6);
  border-left: 1px solid var(--line);
  padding-left: var(--sp-7);
}
.story-spread-mark{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%,-50%);
  color: var(--teal-deep); opacity:.06;
  pointer-events:none; z-index:-1;
}
.belief + .belief{ padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.belief .eyebrow{
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--teal-deep);
}
.belief-text{ color: var(--ink-70); font-size: 1.05rem; line-height:1.7; }

@media (min-width: 981px){
  .story-beliefs{
    position: sticky;
    top: calc(var(--header-h) + var(--sp-7));
    align-self: start;
  }
}

/* =========================================================
   Testimonials (homepage) — glass cards on a palette blur
   Three oversized brand-colour blobs, heavily blurred, make a soft
   gradient wash on pale pink; the cards are frosted white (backdrop-filter)
   so the colour glows through. Without backdrop-filter support the cards
   fall back to near-opaque white, which still reads cleanly.
   Brown text on the frosted white clears 10:1.
   ========================================================= */
section.voices{
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--teal-tint); color: var(--ink);
}
.voices-blobs{ position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blob{
  position: absolute;
  width: 46vw; max-width: 620px; aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.6;
}
.blob-pink { background: var(--brand-pink);  top: -18%;   left: -10%; }
.blob-blue { background: var(--brand-blue);  bottom: -24%; right: -8%; opacity: 0.5; }
.blob-olive{ background: var(--brand-olive); top: 30%;    left: 38%;  width: 30vw; opacity: 0.45; }

.voices .voices-head{ margin: 0 auto var(--sp-8); text-align: center; }
.voices .voices-head h2{ color: var(--ink); margin-top: var(--sp-2); }
.voices-intro{ margin: var(--sp-3) auto 0; color: var(--ink-70); font-size: 1.05rem; }

.voice-row{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-6);
  align-items: stretch;
}
.voice-item{ display: flex; }

.voice-card{
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; margin: 0;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  background: rgba(var(--paper-rgb), 0.92);
  border: 1px solid rgba(var(--paper-rgb), 0.8);
  border-radius: 24px;
  box-shadow: 0 24px 48px -24px rgba(var(--ink-rgb), 0.25);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .voice-card{
    background: rgba(var(--paper-rgb), 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
}
/* Middle card lifted. On the figure, because scroll-reveal animates the <li>. */
@media (min-width: 900px){
  .voice-item:nth-child(3n+2) .voice-card{ transform: translateY(calc(-1 * var(--sp-5))); }
}

/* Round quote badge overlapping the card's top edge. */
.voice-mark{
  position: absolute; top: -26px; left: var(--sp-6);
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--teal); color: var(--paper);
  font-family: var(--font-body); font-size: 2.6rem; line-height: 1;
  padding-top: 0.32em;
  box-shadow: 0 8px 18px -6px rgba(var(--ink-rgb), 0.35);
}
.voice-item:nth-child(3n+2) .voice-mark{ background: var(--clay); }
.voice-item:nth-child(3n+3) .voice-mark{ background: var(--gold); }

/* Olive deepened to 4.5:1 on white so the stars read as a real graphic. */
.voice-stars{ display: block; color: var(--gold); letter-spacing: 3px; font-size: 0.95rem; margin-bottom: var(--sp-3); }
.voice-card blockquote{ margin: 0 0 var(--sp-5); }
.voice-card blockquote p{
  color: var(--ink);
  font-size: 1.02rem; line-height: 1.7;
  overflow-wrap: anywhere;
}

.review-by{
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: auto; padding-top: var(--sp-5);
  border-top: 1px solid rgba(var(--ink-rgb), 0.12);
}
.voice-avatar{
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--teal-tint); color: var(--teal);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1;
}
.voice-item:nth-child(3n+2) .voice-avatar{ background: var(--clay-tint); color: var(--clay-deep); }
.voice-item:nth-child(3n+3) .voice-avatar{ background: var(--brand-cream); color: var(--gold); }
.voice-name{ font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); }

@media (max-width: 640px){
  .voice-row{ gap: var(--sp-7); }
  .blob{ width: 80vw; filter: blur(60px); }
}

/* How It Starts step cards (service pages) */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-5); position:relative; }
.step-card{ position:relative; padding-top: var(--sp-6); }
.step-card .step-num{
  font-family: var(--font-display); font-size: 2.2rem; font-weight:500;
  color: var(--gold-tint);
  -webkit-text-stroke: 1.4px var(--gold);
  display:block; margin-bottom: var(--sp-3);
}
.step-card h3{ font-family: var(--font-display); font-size:1.1rem; font-weight:600; }
.step-card p{ margin-top: var(--sp-2); color: var(--ink-70); font-size:0.92rem; }

/* Resources */
.resource-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-5); }
.resource-card{
  border:1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5);
  background: var(--paper);
}
.resource-card h2,
.resource-card h3{ font-family: var(--font-display); font-size:1.05rem; font-weight:600; }
.resource-card p{ margin-top: var(--sp-2); font-size:0.88rem; color: var(--ink-70); }

/* Blog listing (Resources / "Blog" nav page) */
.blog-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-7) var(--sp-6); }
.blog-card{ display:flex; flex-direction:column; }
.blog-card-media{
  position:relative; display:block; overflow:hidden;
  aspect-ratio: 16/10; border-radius: var(--radius-lg);
  background-color: var(--stone);
}
.blog-card-body{ padding-top: var(--sp-4); }
.blog-card-body h2,
.blog-card-body h3{ font-family: var(--font-display); font-size:1.2rem; font-weight:600; line-height:1.3; }
.blog-card-body h2 a,
.blog-card-body h3 a{ text-decoration:none; color: var(--ink); }
.blog-card-body h2 a:hover,
.blog-card-body h3 a:hover{ color: var(--teal-deep); }
.blog-card-body p{ margin-top: var(--sp-3); color: var(--ink-70); font-size:0.95rem; line-height:1.6; }
.blog-card-body .btn{ margin-top: var(--sp-4); }
.blog-grid-3{ grid-template-columns: repeat(3,1fr); }
@media (max-width: 780px){
  .blog-grid{ grid-template-columns: 1fr; }
  .blog-grid-3{ grid-template-columns: 1fr; }
}

/* ==========================================================
   Single article (single.php): full-width hero band with the
   title beside the photo, then body text + sticky sidebar.
   ========================================================== */
article.single-article{ padding-block: 0; }
.single-article .wrap{ max-width: 1440px; }

.article-hero{
  background: linear-gradient(180deg, var(--teal-tint) 0%, #FDF5F9 70%, var(--paper) 100%);
  padding-block: var(--sp-8) var(--sp-8);
}
.article-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--sp-9);
  align-items: center;
}
.article-hero-grid.no-media{ grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.article-hero-text h1{
  font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  line-height: 1.15;
  color: var(--ink);
}
.article-lede{
  margin-top: var(--sp-4);
  font-size: 1.1rem; line-height: 1.7; color: var(--ink-70);
}
.article-byline{
  margin-top: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--step-small); color: var(--ink-70);
}

.article-media{ margin: 0; }
.article-media img{
  width:100%; height:auto; display:block;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(var(--ink-rgb), 0.12);
}
.article-media figcaption{
  margin-top: var(--sp-3);
  font-size: 0.85rem; color: var(--ink-50);
}

.article-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-8);
  align-items: start;
  padding-block: var(--sp-8) var(--sp-9);
}

/* Body text: the column is wide, so type is a touch larger to keep line
   length comfortable. */
.article-body{ font-size: 1.08rem; line-height: 1.8; color: var(--ink-70); }
.article-body > * + *{ margin-top: var(--sp-4); }
.article-body h1,
.article-body h2{
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  line-height: 1.25; color: var(--ink);
  margin-top: var(--sp-7);
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}
.article-body h3{
  font-size: 1.2rem; line-height: 1.35; color: var(--ink);
  margin-top: var(--sp-6);
}
.article-body > :first-child{ margin-top: 0; }
.article-body a{ color: var(--teal); text-decoration: underline; }
.article-body ul,
.article-body ol{ padding-left: 1.4em; }
.article-body li + li{ margin-top: var(--sp-2); }
.article-body img{ max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.article-body blockquote{
  border-left: 4px solid var(--teal);
  background: var(--teal-tint);
  padding: var(--sp-5); border-radius: var(--radius);
  color: var(--ink);
}

.article-aside{
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.article-aside-title{
  font-weight: 600; font-size: 1rem; color: var(--ink);
  margin-bottom: var(--sp-3);
}
.article-toc{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.article-toc ol{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.article-toc a{
  display: block;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--line);
  color: var(--ink-70); text-decoration: none;
  font-size: 0.95rem; line-height: 1.45;
  transition: color .18s ease, border-color .18s ease;
}
.article-toc a:hover{ color: var(--teal); border-left-color: var(--teal); }
.article-book{
  background: var(--clay-tint);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.article-book p:not(.article-aside-title){ font-size: 0.95rem; line-height: 1.6; color: var(--ink-70); }
.article-book .btn{ margin-top: var(--sp-4); width: 100%; justify-content: center; }

@media (max-width: 960px){
  .article-hero{ padding-block: var(--sp-6); }
  .article-hero-grid{ grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .article-hero-grid .article-media{ order: -1; }
  .article-layout{ grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); padding-block: var(--sp-6) var(--sp-8); }
  .article-aside{ position: static; }
  .article-toc{ display: none; }
  .article-body{ font-size: 1rem; }
}

.blog-pagination{ display:flex; justify-content:center; gap: var(--sp-2); margin-top: var(--sp-8); flex-wrap:wrap; }
.blog-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 38px; height: 38px; padding-inline: var(--sp-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration:none; color: var(--ink-70); font-size:0.9rem;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.blog-pagination .page-numbers:hover{ border-color: var(--teal); color: var(--teal-deep); }
.blog-pagination .page-numbers.current{ background: var(--teal); border-color: var(--teal); color: var(--paper); }
.blog-pagination .page-numbers.dots{ border:none; }

/* Gallery */
.gallery-grid,
.wp-block-gallery{
  display:grid !important; grid-template-columns: repeat(4,1fr); grid-auto-rows: 190px; gap: var(--sp-3) !important;
}
.gallery-grid img,
.wp-block-gallery img{ width:100%; height:100%; object-fit:cover; border-radius: var(--radius); }
.gallery-grid .tall{ grid-row: span 2; }
.wp-block-gallery .wp-block-image{ margin: 0; width: 100% !important; height: 100%; }
.wp-block-gallery figcaption{ display: none; }

/* Legal / policy pages */
.legal-page{ max-width: 760px; padding-block: var(--sp-8); display:flex; flex-direction:column; gap: var(--sp-5); }
.legal-page .section-head{ margin-bottom: var(--sp-2); }
.legal-page h2{ font-size: var(--step-h3); margin-top: var(--sp-4); }
.legal-page p{ color: var(--ink-70); }
.legal-page a{ color: var(--teal-deep); text-decoration: underline; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-8); }
.contact-info dt{ font-family: var(--font-mono); font-size:0.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-50); margin-top: var(--sp-5); }
.contact-info dt:first-child{ margin-top:0; }
.contact-info dd{ margin:0; font-size:1.05rem; margin-top: var(--sp-1); }
.contact-info a{ text-decoration:none; border-bottom:1px solid var(--line); }
.contact-info a:hover{ border-color: var(--teal); color: var(--teal-deep); }

/* Forms */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-grid .full{ grid-column: 1 / -1; }
.field label{ display:block; font-size:0.82rem; color: var(--ink-70); margin-bottom: var(--sp-2); }
.field input, .field select, .field textarea{
  width:100%; padding: 0.75rem 0.9rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 0.98rem;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--teal); outline:none;
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.field textarea{ resize: vertical; min-height: 96px; }
.form-note{ margin-top: var(--sp-4); font-size:0.85rem; color: var(--ink-50); }
.form-status{ margin-top: var(--sp-4); font-size:0.9rem; color: var(--teal-deep); display:none; }
.form-status.show{ display:block; }
.form-status.error{ color: var(--error); }

.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

.field-checkbox label{ display:flex; align-items:flex-start; gap: var(--sp-2); font-size:0.85rem; color: var(--ink-70); }
.field-checkbox input[type="checkbox"]{ width:auto; margin-top:0.2em; flex-shrink:0; }
.field-checkbox a{ color: var(--teal-deep); text-decoration: underline; }
.book-panel .field-checkbox label{ color: rgba(var(--paper-rgb),0.85); }
.book-panel .field-checkbox a{ color: var(--gold-tint); }

/* Book appointment section emphasis */
.book-panel{
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 55%, #1A0401 100%);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
}
.book-panel .field label{ color: rgba(var(--paper-rgb),0.85); }
.book-panel .field input, .book-panel .field select, .book-panel .field textarea{
  background: rgba(var(--paper-rgb),0.08); border-color: rgba(var(--paper-rgb),0.2); color: var(--paper);
}
.book-panel .field input::placeholder, .book-panel .field textarea::placeholder{ color: rgba(var(--paper-rgb),0.35); }
.book-panel .field select option{
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
}
.book-panel .field select{
  background: var(--paper); color: var(--ink); font-weight: 600;
}
.book-panel .section-head h2, .book-panel .eyebrow{ color: var(--paper); }
.book-panel .section-head p{ color: rgba(var(--paper-rgb),0.72); }
.book-panel .eyebrow{ color: var(--gold-tint); }
.book-panel .form-note{ color: rgba(var(--paper-rgb),0.5); }
.book-panel .form-status{ color: var(--gold-tint); }
.book-panel .form-status.error{ color: var(--error-tint); }
/* On the Contact page the panel shares a row with the contact details, so
   it gets less padding than it had as a full-width homepage section. */
.contact-grid .book-panel{ padding: var(--sp-7) var(--sp-6); }
.contact-grid .book-panel .section-head{ margin-bottom: var(--sp-6); }

/* Booking banner (homepage, above the footer) — a full-width pale-pink
   band, centred, with two faint rings for depth. Routes to the form on the
   Contact page. */
section.book-banner{
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: var(--sp-9);
  background: var(--teal-tint); color: var(--ink);
  text-align: center;
}
section.book-banner::before,
section.book-banner::after{
  content: ""; position: absolute; z-index: -1;
  border-radius: 50%;
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  pointer-events: none;
}
section.book-banner::before{ width: 520px; height: 520px; left: -180px; top: -260px; box-shadow: 0 0 0 60px rgba(214,113,171,0.08); }
section.book-banner::after{ width: 420px; height: 420px; right: -140px; bottom: -240px; box-shadow: 0 0 0 50px rgba(214,113,171,0.08); }
.book-banner-inner{ display: flex; flex-direction: column; align-items: center; }
.book-banner h2{
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.8rem); font-weight: 600; line-height: 1.15;
  color: var(--ink);
}
.book-banner p{ margin-top: var(--sp-4); max-width: 34rem; color: var(--ink-70); font-size: 1.05rem; line-height: 1.65; }
.book-banner-actions{
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.book-banner-btn{ padding: 0.95rem 1.7rem; }
@media (max-width: 640px){
  section.book-banner{ padding-block: var(--sp-8); }
  .book-banner-actions{ flex-direction: column; align-self: stretch; }
}

/* =========================================================
   Fluent Forms — restyled to match the site's .form-grid/.field design
   instead of the plugin's own bundled CSS (dequeued in functions.php).
   Targets Fluent Forms' real output classes (ff-el-*) directly, since the
   plugin's markup isn't something theme code controls.
   ========================================================= */
.fluentform form{ max-width: none; }
.fluentform fieldset{ border: none; margin: 0; padding: 0; }
.fluentform .ff-el-form-control{
  width: 100%; padding: 0.75rem 0.9rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 0.98rem;
}
.fluentform .ff-el-form-control:focus{
  border-color: var(--teal); outline: none;
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.fluentform textarea.ff-el-form-control{ resize: vertical; min-height: 96px; }
.fluentform .ff-el-input--label{ margin-bottom: var(--sp-2); }
.fluentform .ff-el-input--label label{ font-size: 0.82rem; color: var(--ink-70); font-weight: 400; }
.fluentform .ff-el-form-check-label{ display:flex; align-items:flex-start; gap: var(--sp-2); font-size:0.85rem; color: var(--ink-70); cursor: pointer; }
.fluentform .ff_tc_checkbox{ display:flex; align-items:flex-start; margin-top: 0.2em; }
.fluentform .ff-el-form-check-input{ width:auto; flex-shrink:0; }
.fluentform .ff_t_c p{ margin: 0; }
.fluentform .ff_t_c a{ color: var(--teal-deep); text-decoration: underline; }
.fluentform .ff_submit_btn_wrapper{ margin-top: var(--sp-2); }
.fluentform .ff-btn-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: 0.75rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
  cursor: pointer; border: 1px solid transparent;
  /* !important: Fluent Forms' per-form styler snapshots a hex color into an
     inline <style> tag on every render; its `:not()` selector edges out our
     specificity, so this has to win unconditionally. */
  background: var(--teal) !important; color: var(--paper) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.fluentform .ff-btn-submit:hover{ background: var(--teal-press) !important; box-shadow: 0 6px 18px rgba(20,20,20,0.32); transform: translateY(-1px); }
.fluentform .ff-errors-in-stack{ margin-top: var(--sp-4); font-size:0.9rem; color: var(--error); }
.fluentform .error, .fluentform .ff-el-is-error .ff-el-form-control{ border-color: var(--error) !important; }
.fluentform .text-danger{ color: var(--error); font-size: 0.82rem; margin-top: var(--sp-1); display:block; }

/* Two-column grid on wider screens, matching .form-grid */
@media (min-width: 641px){
  .fluentform > form > fieldset{
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start;
  }
  .fluentform .ff-el-group:has(textarea),
  .fluentform .ff-el-group.ff-el-input--content,
  .fluentform .ff_submit_btn_wrapper{ grid-column: 1 / -1; }
}

/* Booking form sits on the dark .book-panel — paper-on-teal treatment,
   matching the same override already defined for .field above. */
.book-panel .fluentform .ff-el-input--label label{ color: rgba(var(--paper-rgb),0.85); }
.book-panel .fluentform .ff-el-form-control{
  background: rgba(var(--paper-rgb),0.08); border-color: rgba(var(--paper-rgb),0.2); color: var(--paper);
}
.book-panel .fluentform .ff-el-form-control::placeholder{ color: rgba(var(--paper-rgb),0.35); }
.book-panel .fluentform select.ff-el-form-control{ background: var(--paper); color: var(--ink); font-weight: 600; }
.book-panel .fluentform select.ff-el-form-control option{ background: var(--paper); color: var(--ink); font-weight: 600; }
.book-panel .fluentform .ff-el-form-check-label{ color: rgba(var(--paper-rgb),0.85); }
.book-panel .fluentform .ff_t_c a{ color: var(--gold-tint); }

/* =========================================================
   Homepage hub teasers
   ========================================================= */
.section-foot{ margin-top: var(--sp-7); }

/* Sub-page closing CTA band */
.page-cta{
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line);
}
.surface .page-cta{ background: var(--paper); }
.page-cta h2{ font-family: var(--font-display); font-size: var(--step-h3); font-weight: 600; }
.page-cta p{ margin-top: var(--sp-3); color: var(--ink-70); max-width: 40ch; margin-inline: auto; }
.page-cta .cta-row{ display:flex; gap: var(--sp-4); justify-content:center; margin-top: var(--sp-6); flex-wrap:wrap; }

/* =========================================================
   Footer — dark brown, three columns
   ========================================================= */
footer{
  font-family: var(--font-nav);
  background: var(--footer-bg);
  color: rgba(var(--paper-rgb),0.7);
  padding-block: var(--sp-8) var(--sp-6);
}
.footer-cols{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-8);
}
.footer-col h3{
  font-family: var(--font-nav); font-weight:600; font-size:1.05rem;
  color: var(--paper); margin-bottom: var(--sp-4);
}
.footer-col a, .footer-col p{
  display:block; text-decoration:none; color: rgba(var(--paper-rgb),0.7);
  font-size: 0.92rem; margin-bottom: var(--sp-3); line-height:1.6;
}
.footer-col a:hover{ color: var(--gold-tint); }
/* Links inside a line of text stay inline (phone numbers are stacked below). */
.footer-col p a{ display:inline; margin-bottom:0; }
/* Logo-only column: centre the lockup in its cell, both ways. */
.footer-about{ display:flex; align-items:center; justify-content:center; }
.footer-col.footer-about .footer-logo{ margin-bottom: 0; }
/* .footer-col prefix: outranks the .footer-col a link colour. */
.footer-col .footer-logo{
  display:flex; align-items:center; gap: var(--sp-3);
  text-decoration:none; color: var(--paper); margin-bottom: var(--sp-4);
}
.footer-logo .logo-lockup{ --logo-icon-h: 72px; --logo-text-h: 30px; }
.footer-bottom{
  border-top: 1px solid rgba(var(--paper-rgb),0.14);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
}
.footer-bottom .fine{ font-size:0.8rem; color: rgba(var(--paper-rgb),0.5); }
.footer-bottom .fine a{ text-decoration: underline; }
.footer-bottom .fine a:hover{ color: var(--gold-tint); }

@media (max-width: 780px){
  /* minmax(0, …): the full-size logo is wider than a phone, and a plain 1fr
     column would grow to fit it and push the page sideways. */
  .footer-cols{ grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .footer-logo .logo-lockup{ --logo-icon-h: 62px; --logo-text-h: 25px; }
}

/* =========================================================
   Circular emblem mark
   ========================================================= */
.circle-mark{ display:inline-flex; color: var(--teal-deep); }
.circle-mark svg,
.circle-mark img{ display:block; }

/* =========================================================
   Social icon rail — top-left, every page
   ========================================================= */
.social-rail{
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 60;
  display:flex; flex-direction:row; gap: var(--sp-2);
}
.social-rail a{
  width: 26px; height: 26px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--teal-deep);
  color: var(--paper);
  transition: background .18s ease, transform .18s ease;
}
.social-rail a:hover{ background: var(--teal); transform: translateY(-2px); }
.social-rail svg{ width: 13px; height: 13px; }
@media (max-width: 480px){
  .social-rail{ display:none; }
}

.footer-social{
  display:flex; flex-direction:row; gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.footer-social a{
  width: 30px; height: 30px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  /* Translucent so it sits on whatever colour the footer is. */
  background: rgba(var(--paper-rgb), 0.12);
  color: var(--paper);
  transition: background .18s ease, transform .18s ease;
}
.footer-social a:hover{ background: var(--teal); color: var(--paper); transform: translateY(-2px); }
.footer-social svg{ width: 15px; height: 15px; }

/* =========================================================
   Sticky "Book Appointment" tab
   ========================================================= */
.book-tab{
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  background: var(--teal);
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  padding: var(--sp-5) var(--sp-3);
  border-radius: var(--radius) 0 0 var(--radius);
  z-index: 55;
  transition: background .18s ease, padding-right .18s ease;
}
.book-tab:hover{ background: var(--teal-press); padding-right: var(--sp-4); }
@media (max-width: 640px){
  .book-tab{ display:none; }
}

/* =========================================================
   Mobile action bar — takes over from .book-tab at 640px
   ========================================================= */
.mobile-actions{ display:none; }

@media (max-width: 640px){
  .mobile-actions{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--paper);
    border-top: 1px solid var(--line);
    /* Clears the home indicator on notched phones. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 14px rgba(20,20,20,0.10);
  }
  .mobile-action{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap: 3px;
    /* 56px keeps every target well clear of the 44px minimum. */
    min-height: 56px;
    padding: var(--sp-2) var(--sp-1);
    text-decoration:none;
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-right: 1px solid var(--line);
    background: var(--paper);
  }
  .mobile-action:last-child{ border-right: 0; }
  .mobile-action svg{
    width: 19px; height: 19px;
    fill: currentColor;
    display:block;
  }
  .mobile-action.is-primary{
    background: var(--teal);
    color: var(--paper);
  }
  .mobile-action:focus-visible{
    outline: 2px solid var(--clay-deep);
    outline-offset: -3px;
  }
  .mobile-action.is-primary:focus-visible{
    outline-color: var(--gold-tint);
  }

  /* Stops the bar covering the end of the page and the footer links. */
  body{ padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* The social rail mirrors .book-tab and has the same problem on mobile. */
  .social-tab{ display:none; }
}

/* =========================================================
   Sticky social links tab (mirrors the Book Appointment tab)
   ========================================================= */
.social-tab{
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap: var(--sp-3);
  background: rgba(20,20,20,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: var(--sp-4) var(--sp-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  z-index: 55;
  transition: background .18s ease, padding-left .18s ease;
}
.social-tab:hover{ background: var(--teal); padding-left: var(--sp-3); }
.social-tab a{
  width: 22px; height: 22px;
  display:flex; align-items:center; justify-content:center;
  color: var(--paper);
}
.social-tab svg{ width: 15px; height: 15px; }
@media (max-width: 640px){
  .social-tab{ display:none; }
}

/* =========================================================
   What We Do (homepage) — "toy blocks" on olive
   Each service is a chunky tile in a brand colour, photo as a pebble-
   shaped sticker, the whole tile one link. All text is brown: >=5:1 on
   every tile colour (pink 5.5, pale pink, cream 13.6, white, blue 5.4),
   where white text would fail on pink/blue. Colour, tilt and pebble shape
   are per-tile via nth-child, so a sixth service just picks up tile 1's.
   ========================================================= */
section.wwd{
  position: relative;
  overflow: hidden;
  background: var(--brand-olive);
  color: var(--ink);
}
.wwd .wwd-head{ position: relative; text-align: center; margin: 0 auto var(--sp-7); }
.wwd .wwd-head h2{ color: var(--ink); }
.wwd-title{ position: relative; display: inline-block; }
.wwd-squiggle{
  position: absolute; left: -4%; bottom: -16px;
  width: 108%; height: 14px;
  color: var(--brand-pink);
}
/* Brown at 0.8 over olive is ~6:1. */
.wwd-intro{
  margin: var(--sp-6) auto 0;
  max-width: 36rem;
  color: rgba(var(--ink-rgb), 0.8);
  font-size: 1.05rem;
}

/* Doodles — decoration only, drifting slowly. */
.doodle{ position: absolute; pointer-events: none; }
.doodle-star{ width: 40px; left: 6%; top: -4px; color: var(--brand-pink); animation: doodle-float 6s ease-in-out infinite; }
.doodle-sun{ width: 52px; right: 4%; top: 2px; color: var(--paper); animation: doodle-spin 24s linear infinite; }
.doodle-dots{ width: 62px; left: 14%; bottom: -36px; fill: rgba(var(--ink-rgb), 0.3); animation: doodle-float 7s ease-in-out infinite reverse; }
@keyframes doodle-float{ 0%, 100%{ transform: translateY(0) rotate(-6deg); } 50%{ transform: translateY(-8px) rotate(6deg); } }
@keyframes doodle-spin{ to{ transform: rotate(360deg); } }

/* Blocks: 3 on top, 2 centred below; every other block sits lower, as if
   stacked by hand. The offset is padding on the <li> (not a transform),
   because scroll-reveal animates the <li>'s transform. */
.svc-grid{
  list-style: none; margin: 0; padding: var(--sp-5) 0 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-7) var(--sp-6);
}
.svc-item{ display: flex; flex: 0 1 calc((100% - 2 * var(--sp-6)) / 3); }
.svc-item:nth-child(even){ padding-top: var(--sp-6); }

.svc-item:nth-child(5n+1){ --tile: var(--brand-pink);  --tilt: -1.6deg; --blob: 58% 42% 46% 54% / 52% 46% 54% 48%; --blob-hover: 46% 54% 58% 42% / 44% 56% 44% 56%; }
.svc-item:nth-child(5n+2){ --tile: var(--teal-tint);   --tilt: 1.3deg;  --blob: 44% 56% 52% 48% / 58% 44% 56% 42%; --blob-hover: 56% 44% 42% 58% / 48% 58% 42% 52%; }
.svc-item:nth-child(5n+3){ --tile: var(--brand-cream); --tilt: -0.9deg; --blob: 52% 48% 60% 40% / 46% 54% 46% 54%; --blob-hover: 40% 60% 48% 52% / 56% 44% 56% 44%; }
.svc-item:nth-child(5n+4){ --tile: var(--paper);       --tilt: 1.6deg;  --blob: 60% 40% 44% 56% / 50% 56% 44% 50%; --blob-hover: 48% 52% 56% 44% / 58% 42% 58% 42%; }
.svc-item:nth-child(5n+5){ --tile: var(--brand-blue);  --tilt: -1.2deg; --blob: 46% 54% 40% 60% / 54% 46% 54% 46%; --blob-hover: 58% 42% 52% 48% / 44% 52% 48% 56%; }

.svc-card{
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: var(--sp-6) var(--sp-5) var(--sp-6);
  background: var(--tile);
  border-radius: 32px;
  color: var(--ink);
  text-decoration: none;
  transform: rotate(var(--tilt));
  /* The solid drop under each tile is the "toy block" edge. */
  box-shadow: 0 7px 0 rgba(var(--ink-rgb), 0.16), 0 18px 34px -20px rgba(var(--ink-rgb), 0.5);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.svc-card:hover,
.svc-card:focus-visible{
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 11px 0 rgba(var(--ink-rgb), 0.16), 0 26px 40px -22px rgba(var(--ink-rgb), 0.55);
}
.svc-card:focus-visible{ outline: 3px solid var(--ink); outline-offset: 4px; }

.svc-media{
  position: relative; /* .cover-img fills it */
  display: block;
  width: 72%;
  aspect-ratio: 1;
  border: 6px solid var(--paper);
  border-radius: var(--blob);
  overflow: hidden;
  background: var(--brand-cream);
  box-shadow: 0 12px 22px -14px rgba(var(--ink-rgb), 0.55);
  transition: border-radius 1s cubic-bezier(.22,1,.36,1);
}
.svc-media .cover-img{ transition: transform .9s cubic-bezier(.22,1,.36,1); }
.svc-card:hover .svc-media,
.svc-card:focus-visible .svc-media{ border-radius: var(--blob-hover); }
.svc-card:hover .svc-media .cover-img{ transform: scale(1.06); }

.svc-body{ display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); flex: 1; }
.svc-name{ font-family: var(--font-brand); font-weight: 400; font-size: 1.4rem; line-height: 1.2; }
/* Brown at 0.85 stays >=5:1 on every tile colour. */
.svc-teaser{ color: rgba(var(--ink-rgb), 0.85); font-size: 0.92rem; line-height: 1.55; max-width: 22rem; margin-bottom: var(--sp-3); }
.svc-cta{
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.55em 1.15em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.85rem;
  font-weight: 600;
}
.svc-arrow{ display: inline-block; transition: transform .35s ease; }
.svc-card:hover .svc-arrow{ transform: translateX(4px); }

@media (prefers-reduced-motion: reduce){
  .doodle{ animation: none; }
  .svc-card, .svc-media, .svc-media .cover-img, .svc-arrow{ transition: none; }
  .svc-card:hover, .svc-card:focus-visible{ transform: rotate(var(--tilt)); }
  .svc-card:hover .svc-media .cover-img, .svc-card:hover .svc-arrow{ transform: none; }
}

@media (max-width: 980px){
  .svc-item{ flex-basis: calc((100% - var(--sp-6)) / 2); }
  .doodle-dots{ display: none; }
}

/* Phones: one block per row, sticker left, text right — all five fit in a
   short scroll. Tilts are halved so text stays easy to read. */
@media (max-width: 640px){
  .svc-grid{ gap: var(--sp-5); padding-top: var(--sp-3); }
  .svc-item, .svc-item:nth-child(even){ flex-basis: 100%; padding-top: 0; }
  .svc-card{
    flex-direction: row; align-items: center; text-align: left;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border-radius: 24px;
    transform: rotate(calc(var(--tilt) / 2));
  }
  .svc-media{ width: 92px; flex: none; border-width: 4px; }
  .svc-body{ align-items: flex-start; margin-top: 0; gap: var(--sp-1); }
  .svc-name{ font-size: 1.15rem; }
  .svc-teaser{ font-size: 0.85rem; }
  .svc-cta{ font-size: 0.78rem; padding: 0.45em 0.95em; }
  .doodle-sun{ width: 38px; right: 2%; top: -10px; }
  .doodle-star{ width: 28px; left: 2%; top: 6px; }
}

/* =========================================================
   Photo tile grid ("Other Services" on service pages)
   ========================================================= */
.tile-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5);
}
.tile-card{
  position:relative;
  display:block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background-color: var(--stone);
  overflow:hidden;
  text-decoration:none;
}
.tile-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 45%, rgba(20,20,20,0.78) 100%);
  transition: background .2s ease;
}
.tile-card:hover::after{ background: linear-gradient(180deg, rgba(20,20,20,0.15) 0%, rgba(20,20,20,0.85) 100%); }
.tile-caption{
  position:absolute; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-4);
  color: var(--paper);
  font-family: var(--font-display); font-weight:600; font-size:1.1rem;
  z-index:1;
}
@media (max-width: 780px){
  .tile-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px){
  .tile-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   Admissions journey (homepage) — stepping stones on cream
   The four steps are a real sequence, so they're numbered and joined by a
   hand-drawn path that draws itself in when scroll-reveal adds .is-in to
   .journey-path (pathLength="1" makes the dash maths independent of size).
   Exact palette only: cream ground; stones pink, blue, olive, brown.
   ========================================================= */
section.journey{ background: var(--brand-cream); color: var(--ink); }
.journey .journey-head{ text-align: center; margin: 0 auto var(--sp-8); }
.journey .journey-head h2{ color: var(--ink); }
.journey-intro{ margin: var(--sp-3) auto 0; color: var(--ink-70); font-size: 1.05rem; }

.journey-track{ position: relative; --stone-size: 104px; }
.journey-path{
  position: absolute; left: 0; top: calc(var(--stone-size) / 2 - 60px);
  width: 100%; height: 120px;
  color: var(--brand-pink);
}
.journey-path path{ stroke-dasharray: 1; stroke-dashoffset: 0; }
.journey-path.reveal path{ stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.45,0,.2,1) .15s; }
.journey-path.reveal.is-in path{ stroke-dashoffset: 0; }

.journey-steps{
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
.journey-step{ display: flex; flex-direction: column; align-items: center; text-align: center; }
.journey-step:nth-child(1){ --stone-bg: var(--brand-pink);  --stone-ink: var(--ink);         --blob: 56% 44% 50% 50% / 50% 54% 46% 50%; }
.journey-step:nth-child(2){ --stone-bg: var(--brand-blue);  --stone-ink: var(--ink);         --blob: 46% 54% 56% 44% / 54% 46% 52% 48%; }
.journey-step:nth-child(3){ --stone-bg: var(--brand-olive); --stone-ink: var(--ink);         --blob: 52% 48% 44% 56% / 46% 52% 48% 54%; }
.journey-step:nth-child(4){ --stone-bg: var(--brand-brown); --stone-ink: var(--brand-cream); --blob: 48% 52% 54% 46% / 52% 48% 54% 46%; }
.journey-stone{
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: var(--stone-size); height: var(--stone-size);
  margin-bottom: var(--sp-5);
  background: var(--stone-bg);
  color: var(--stone-ink);
  border: 6px solid var(--paper);
  border-radius: var(--blob);
  box-shadow: 0 7px 0 rgba(var(--ink-rgb), 0.14), 0 16px 28px -18px rgba(var(--ink-rgb), 0.5);
  font-family: var(--font-brand);
  font-size: 2.6rem;
  line-height: 1;
}
.journey-step h3{ font-family: var(--font-brand); font-weight: 400; font-size: 1.3rem; line-height: 1.25; color: var(--ink); }
.journey-step p{ margin-top: var(--sp-2); max-width: 16rem; color: var(--ink-70); font-size: 0.95rem; line-height: 1.6; }

/* =========================================================
   CTA band (homepage, between admissions and testimonials)
   A slim olive strip: icon + heading + one line, button on the right.
   Brown on brand olive clears 7:1; the button is the standard pink one.
   ========================================================= */
section.cta-band{
  padding-block: var(--sp-7);
  background: var(--brand-olive);
  color: var(--ink);
}
.cta-band-inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
}
.cta-band-copy{ display: flex; align-items: center; gap: var(--sp-5); }
.cta-band-icon{
  flex: none;
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ink); color: var(--brand-cream);
}
.cta-band-icon svg{ width: 28px; height: 28px; }
.cta-band h2{
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 700; line-height: 1.25;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--ink);
}
.cta-band p{ margin-top: var(--sp-2); max-width: 38rem; color: var(--ink); font-size: 1rem; }
.cta-band-btn{ flex: none; padding: 0.95rem 1.8rem; }

/* =========================================================
   Founders (homepage)
   Split header, then the founders as person cards (below), and a small
   "Meet the Entire Team" tab. Warm off-white surface so the white
   cards read clearly.
   ========================================================= */
section.founders-intro{ background: #F6F1E7; color: var(--ink); }
.founders-intro .founders-head{
  max-width: none;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-6); align-items: end;
  margin-bottom: var(--sp-7);
}
.founders-intro .founders-head h2{ color: var(--ink); max-width: 14ch; }
.founders-lede{ max-width: 30rem; color: var(--ink-70); font-size: 1rem; line-height: 1.7; }

/* "Meet the entire team" — a small outlined tab centred under the row. */
.founders-foot{ margin-top: var(--sp-7); text-align: center; }
.tab-link{
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 0.4rem 0.45rem 0.4rem 1.1rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.85rem; font-weight: 600; text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.tab-link:hover{ background: var(--ink); color: var(--paper); }
.tab-link-arrow{
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-pink); color: var(--ink);
  font-size: 0.9rem;
  transition: transform .2s ease;
}
.tab-link:hover .tab-link-arrow{ transform: rotate(-45deg); }

/* =========================================================
   Person cards (ahamya_person_card) — homepage founders and the
   Meet the Team page. Portrait, name in italic serif, role, the
   opening of the bio with an ellipsis, and "More About Me".
   ========================================================= */
.person-row{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* Fixed-width columns, centred — two founders shouldn't stretch to giant
     portraits across the full width. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: center;
  gap: var(--sp-6);
}
.person-card{
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 8px;
}
/* relative: .cover-img (from ahamya_cover_image) is absolutely positioned. */
.person-portrait{
  position: relative; display: block;
  aspect-ratio: 1 / 1.08;
  border-radius: 12px;
  overflow: hidden;
  background: var(--stone);
}
.person-portrait img{
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
  transition: transform .6s ease;
}
.person-card:hover .person-portrait img{ transform: scale(1.03); }

.person-body{
  flex: 1; display: flex; flex-direction: column;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
}
.person-name{
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.5rem; line-height: 1.2;
}
.person-name a{ color: var(--ink); text-decoration: none; }
.person-name a:hover{ color: var(--teal); }
.person-role{
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal);
}
.person-excerpt{
  margin-top: var(--sp-3);
  font-size: 0.92rem; line-height: 1.65; color: var(--ink-70);
}
.person-more{
  align-self: flex-start;
  margin-top: auto; padding-top: var(--sp-4);
  font-size: 0.85rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.person-more span[aria-hidden]{ display: inline-block; color: var(--teal); transition: transform .18s ease; }
.person-more:hover{ color: var(--teal); }
.person-more:hover span[aria-hidden]{ transform: translateX(3px); }

/* Meet the Team page: same cards on white, so they get a hairline. */
.team-page .person-card{ border: 1px solid var(--line); }
.team-page .person-row{ justify-content: start; }
.team-page .person-row + .section-head{ margin-top: var(--sp-9); }

/* =========================================================
   Profile page (single-team_member.php)
   Portrait left (sticky on desktop), details right: role, name,
   qualifications list, full bio, then actions.
   ========================================================= */
.profile{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-8);
  align-items: start;
}
.profile-portrait{
  position: sticky; top: calc(var(--header-h) + var(--sp-5));
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--stone);
}
.profile-back{
  display: inline-block; margin-bottom: var(--sp-5);
  font-size: 0.85rem; font-weight: 600; color: var(--ink-70); text-decoration: none;
}
.profile-back:hover{ color: var(--teal); }
.profile-role{
  font-family: var(--font-mono);
  font-size: var(--step-eyebrow); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal);
}
.profile h1{
  margin-top: var(--sp-2);
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(2.2rem, 1.7rem + 2vw, 3.2rem); line-height: 1.1;
  color: var(--ink);
}
.profile-quals{
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: #F6F1E7;
  border-radius: var(--radius-lg);
}
.profile-quals h2{
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-70);
}
.profile-quals ul{ list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.profile-quals li{ display: flex; gap: var(--sp-3); align-items: flex-start; font-weight: 600; line-height: 1.5; }
.profile-quals svg{ flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--teal); }
.profile-bio{ margin-top: var(--sp-6); }
.profile-bio p{ color: var(--ink-70); font-size: 1.02rem; line-height: 1.8; }
.profile-bio p + p{ margin-top: var(--sp-4); }
.profile .cta-row{ margin-top: var(--sp-7); }

@media (max-width: 860px){
  .profile{ grid-template-columns: 1fr; gap: var(--sp-6); }
  .profile-portrait{ position: relative; top: auto; max-width: 22rem; }
}
@media (max-width: 760px){
  .founders-intro .founders-head{ grid-template-columns: 1fr; gap: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce){
  .person-portrait img, .tab-link-arrow, .person-more span[aria-hidden]{ transition: none; }
}

/* =========================================================
   Blogs & Articles (homepage) — image mosaic
   Split header (heading left; intro + "View All Articles" tab right),
   then a mosaic: the newest post as a tall tile on the left, the next
   two as wide tiles stacked on the right. Text sits in white on a dark
   fade over the bottom of each photo (brown at 0.85 keeps it >7:1).
   ========================================================= */
section.articles{ background: var(--paper); color: var(--ink); }
.articles .articles-head{
  max-width: none;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-6); align-items: end;
  margin-bottom: var(--sp-7);
}
.articles .articles-head h2{ color: var(--ink); }
.articles-head-side{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.articles-lede{ max-width: 30rem; color: var(--ink-70); font-size: 1rem; line-height: 1.7; }

.article-mosaic{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-auto-rows: minmax(250px, auto);
  gap: var(--sp-5);
}
.article-tile.is-lead{ grid-row: span 2; }
.article-tile-link{
  position: relative; display: flex; align-items: flex-end;
  height: 100%; min-height: 250px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  color: var(--paper); text-decoration: none;
}
.article-tile-link .cover-img{ transition: transform .7s ease; }
.article-tile-link:hover .cover-img{ transform: scale(1.05); }
.article-tile-link::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(var(--ink-rgb), 0.88) 0%, rgba(var(--ink-rgb), 0.55) 40%, rgba(var(--ink-rgb), 0) 75%);
}
.article-tile-body{
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5);
}
.is-lead .article-tile-body{ padding: var(--sp-6); max-width: 34rem; }

.article-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(var(--paper-rgb), 0.85);
}
.article-cat{
  padding: 3px 8px; border-radius: 999px;
  background: var(--teal); color: var(--paper);
}
.article-tile-title{
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600; line-height: 1.3;
}
.is-lead .article-tile-title{ font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); line-height: 1.2; }
.article-tile-excerpt{ color: rgba(var(--paper-rgb), 0.85); font-size: 0.98rem; line-height: 1.6; }
.article-tile-more{
  margin-top: var(--sp-2);
  font-size: 0.85rem; font-weight: 600;
  color: var(--brand-pink);
}
.article-tile-link:hover .article-tile-more{ color: var(--paper); }
.article-tile-link:focus-visible{ outline: 3px solid var(--teal); outline-offset: 3px; }

/* Rotation (assets/js/articles-rotator.js). Without JS the sets simply
   stack; once .is-ready is added they share one grid cell and fade. */
.articles-sets{ display: grid; gap: var(--sp-5); }
.articles-rotator.is-ready .article-mosaic{
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.articles-rotator.is-ready .article-mosaic.is-active{
  opacity: 1; visibility: visible;
  transition: opacity .6s ease, visibility 0s;
}
/* A last set with fewer than three posts still fills its space. */
.article-tile.is-lead:only-child{ grid-column: 1 / -1; }
.article-tile:nth-child(2):last-child{ grid-row: span 2; }

.articles-controls{
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.articles-controls[hidden]{ display: none; }
.articles-arrow{
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-size: 1.1rem; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.articles-arrow:hover{ background: var(--ink); color: var(--paper); }
.articles-dots{ display: flex; gap: var(--sp-2); }
.articles-dot{
  width: 10px; height: 10px; padding: 0; border-radius: 999px;
  border: none; background: rgba(var(--ink-rgb), 0.25); cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.articles-dot.is-active{ width: 28px; background: var(--teal); }
.articles-arrow:focus-visible,
.articles-dot:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; }

@media (max-width: 860px){
  .article-mosaic{ grid-template-columns: 1fr; grid-auto-rows: auto; }
  .article-tile.is-lead{ grid-row: auto; }
  .is-lead .article-tile-link{ min-height: 380px; }
}
@media (max-width: 760px){
  .articles .articles-head{ grid-template-columns: 1fr; gap: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce){
  .article-tile-link .cover-img, .articles-rotator.is-ready .article-mosaic, .articles-dot{ transition: none; }
}

@media (max-width: 760px){
  .cta-band-inner{ flex-direction: column; align-items: stretch; text-align: left; }
  .cta-band-copy{ align-items: flex-start; }
  .cta-band-icon{ width: 52px; height: 52px; }
  .cta-band-btn{ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .journey-path.reveal path{ transition: none; stroke-dashoffset: 0; }
}

/* Tablet: 2×2; the wavy path only reads across a single row, so it goes. */
@media (max-width: 980px){
  .journey-steps{ grid-template-columns: 1fr 1fr; row-gap: var(--sp-7); }
  .journey-path{ display: none; }
}

/* Phones: a vertical trail — stones down the left joined by a dashed line,
   each step's text beside its stone. */
@media (max-width: 640px){
  .journey-track{ --stone-size: 68px; }
  .journey-steps{ grid-template-columns: 1fr; row-gap: var(--sp-6); }
  .journey-steps::before{
    content: ""; position: absolute;
    left: calc(var(--stone-size) / 2 - 1.5px);
    top: calc(var(--stone-size) / 2); bottom: calc(var(--stone-size) / 2);
    border-left: 3px dashed var(--brand-pink);
  }
  .journey-step{
    display: grid; grid-template-columns: var(--stone-size) 1fr;
    column-gap: var(--sp-4); align-items: start; text-align: left;
  }
  .journey-stone{ grid-row: span 2; margin-bottom: 0; border-width: 4px; font-size: 1.7rem; }
  .journey-step h3{ align-self: end; font-size: 1.15rem; padding-top: var(--sp-2); }
  .journey-step p{ margin-top: var(--sp-1); max-width: none; font-size: 0.9rem; }
}

/* =========================================================
   FAQ accordion
   ========================================================= */
.faq-wrap{ max-width: 46rem; margin-inline:auto; }
.faq-list{ border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
  padding-block: var(--sp-5);
  background:none; border:none; cursor:pointer;
  text-align:left;
  font-family: var(--font-display); font-size:1.1rem; font-weight:600; color: var(--ink);
}
.faq-caret{
  flex-shrink:0; width:11px; height:11px;
  border-right: 1.6px solid var(--teal); border-bottom: 1.6px solid var(--teal);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq-item.open .faq-caret{ transform: rotate(-135deg); }
.faq-a{ padding-bottom: var(--sp-5); color: var(--ink-70); max-width: 42rem; }
.faq-a[hidden]{ display: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .story-grid{ grid-template-columns: 1fr; }
  .story-img{ aspect-ratio: 4 / 3; max-height: none; }
  .story-spread{ grid-template-columns: 1fr; }
  .story-beliefs{
    border-left:none; padding-left:0;
    border-top: 1px solid var(--line); padding-top: var(--sp-7);
  }
  .steps{ grid-template-columns: repeat(2,1fr); row-gap: var(--sp-7); }
  .resource-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid,
  .wp-block-gallery{ grid-template-columns: repeat(2,1fr) !important; }
  .contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  section{ padding-block: var(--sp-7); }
  .form-grid{ grid-template-columns: 1fr; }
  .event-row{ grid-template-columns: 1fr; gap: var(--sp-2); }
  .book-panel{ padding: var(--sp-6) var(--sp-5); }

  .resource-grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; row-gap: var(--sp-6); }

  .detail-columns{ gap: var(--sp-6); }
}

/* =========================================================
   About Us (page-about.php) — copy of the approved mock-up
   ahamya_about_us_v2.html. Everything is scoped to .about-v2 and
   prefixed ab- so the shared section / h1 / .wrap rules don't leak in.
   ========================================================= */
.about-v2{
  --ab-brown-deep: #210903;
  --ab-paper: #FFFDF8;
  --ab-muted: #795E55;
  background: var(--ab-paper); color: var(--brand-brown);
  line-height: 1.7;
}
.about-v2 h1, .about-v2 h2, .about-v2 h3, .about-v2 p{ margin-top: 0; }
.ab-wrap{ width: min(1160px, calc(100% - 48px)); margin-inline: auto; }

section.ab-hero{
  position: relative; overflow: hidden;
  background: var(--brand-brown); color: #fff8ea;
  padding: 84px 0 90px;
}
.ab-hero::before, .ab-hero::after{ content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.ab-hero::before{
  width: 440px; height: 440px; right: -90px; top: -230px;
  border: 1px solid rgba(249,228,185,.24);
  box-shadow: 0 0 0 35px rgba(249,228,185,.035), 0 0 0 75px rgba(249,228,185,.025);
}
.ab-hero::after{ width: 250px; height: 250px; right: 9%; bottom: -200px; background: var(--brand-blue); opacity: .18; }
.ab-hero-grid{
  display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 74px;
  position: relative; z-index: 1;
}
.ab-hero h1{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1.05; letter-spacing: -.055em;
  margin: 0 0 23px; max-width: 690px; color: #fff8ea;
}
.ab-hero h1 em{ color: var(--brand-pink); font-style: normal; }
.ab-hero-copy{ color: #F1DFD4; max-width: 620px; font-size: 1.08rem; }
.ab-hero-note{
  border-left: 1px solid rgba(249,228,185,.42);
  padding: 10px 0 10px 28px; max-width: 330px; justify-self: end;
}
.ab-big-quote{ font-family: var(--font-body); font-size: 4rem; color: var(--brand-olive); line-height: .8; }
.ab-hero-note p{ color: #F9E4D9; font-size: 1.27rem; line-height: 1.55; margin: 16px 0 18px; }
.ab-hero-note span{ color: var(--brand-pink); font-size: .82rem; font-weight: 700; letter-spacing: .05em; }

section.ab-section{ padding: 88px 0; }
.ab-section-heading{ max-width: 640px; margin-bottom: 38px; }
.ab-section-heading h2{
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.045em; line-height: 1.13; margin: 0 0 15px;
}
.ab-section-heading p{ color: var(--ab-muted); margin-bottom: 0; }

.ab-story-grid{
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
  gap: 80px; align-items: start;
}
.ab-story-copy h2{
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: clamp(2.2rem, 4vw, 3.1rem); letter-spacing: -.045em; line-height: 1.1; margin: 0 0 26px;
}
.ab-story-copy p{ color: #76564C; margin-bottom: 17px; font-size: .98rem; }
.ab-story-copy p strong{ color: var(--brand-brown); }
.ab-side-stack{ border-left: 1px solid var(--brand-olive); padding-left: 32px; }
section.ab-info-card{ padding: 0 0 28px; }
section.ab-info-card + section.ab-info-card{ border-top: 1px solid #DCC8AB; padding-top: 28px; }
.ab-info-card h3{
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: 1.12rem; margin: 0 0 10px; letter-spacing: -.02em;
}
.ab-info-card p{ color: var(--ab-muted); font-size: .93rem; margin: 0; }

section.ab-values{ background: #F7EEDD; }
.ab-values-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ab-value-card{
  background: var(--ab-paper); border: 1px solid #E9DAC8; border-radius: 18px;
  padding: 25px 23px 27px; min-height: 220px;
}
.ab-number{ font-size: .78rem; letter-spacing: .12em; color: var(--brand-blue); font-weight: 800; }
.ab-value-card h3{
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  margin: 26px 0 9px; font-size: 1.15rem; letter-spacing: -.025em;
}
.ab-value-card p{ color: var(--ab-muted); font-size: .9rem; margin: 0; }
.ab-value-card:nth-child(1){ border-top: 4px solid var(--brand-brown); }
.ab-value-card:nth-child(2){ border-top: 4px solid var(--brand-pink); }
.ab-value-card:nth-child(3){ border-top: 4px solid var(--brand-olive); }
.ab-value-card:nth-child(4){ border-top: 4px solid var(--brand-blue); }

/* Closing call to action, at the foot of the cream values section —
   divided from the cards by a hairline rather than its own band. */
.ab-closing{
  display: flex; align-items: center; justify-content: space-between; gap: 36px;
  margin-top: 56px; padding-top: 44px; border-top: 1px solid #DCC8AB;
}
.ab-closing h2{
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); line-height: 1.2; letter-spacing: -.03em;
  max-width: 760px; margin: 0 0 8px;
}
.ab-closing p{ color: var(--ab-muted); max-width: 760px; margin: 0; font-size: .95rem; line-height: 1.6; }
.ab-cta{
  flex: 0 0 auto; display: inline-block;
  /* Same pink as the Book Your Appointment tab it leads to. */
  background: var(--teal); color: var(--paper);
  border-radius: 999px; padding: 14px 22px;
  text-decoration: none; font-weight: 800; font-size: .9rem;
  transition: transform .2s ease, background .2s ease;
}
.ab-cta:hover{ transform: translateY(-2px); background: var(--teal-press); color: var(--paper); }

@media (max-width: 850px){
  .ab-hero-grid, .ab-story-grid{ grid-template-columns: 1fr; gap: 40px; }
  .ab-hero-note{ justify-self: start; max-width: 580px; }
  .ab-side-stack{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-left: 0; padding-left: 0; }
  section.ab-info-card + section.ab-info-card{ border-top: 0; border-left: 1px solid #DCC8AB; padding: 0 0 0 24px; }
  .ab-values-grid{ grid-template-columns: repeat(2, 1fr); }
  .ab-closing{ align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px){
  .ab-wrap{ width: min(100% - 34px, 1160px); }
  section.ab-hero{ padding: 66px 0 68px; }
  section.ab-section{ padding: 64px 0; }
  .ab-side-stack, .ab-values-grid{ grid-template-columns: 1fr; }
  section.ab-info-card + section.ab-info-card{ border-top: 1px solid #DCC8AB; border-left: 0; padding: 24px 0 0; }
  .ab-value-card{ min-height: 0; }
}
@media (prefers-reduced-motion: reduce){
  .ab-cta{ transition: none; }
}

/* Meet the Team — closing call to action, matching the About page's
   closing (page-meet-the-team.php). Reuses .ab-wrap and .ab-cta. */
section.team-cta{ background: #F7EEDD; padding: 72px 0; }
.team-cta-inner{ display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.team-cta h2{
  margin: 0;
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); line-height: 1.2; letter-spacing: -.03em;
}
.team-cta-actions{ flex: 0 0 auto; display: flex; align-items: center; gap: 20px; }
@media (max-width: 850px){
  .team-cta-inner{ align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px){
  section.team-cta{ padding: 56px 0; }
}

/* =========================================================
   Careers (page-careers.php) — same palette as the About page,
   different structure: intro + reasons, openings list, apply panel.
   Prefixed cr-; reuses .ab-wrap and .ab-cta.
   ========================================================= */
.careers-v2{ background: #FFFDF8; color: var(--brand-brown); line-height: 1.7; }
.careers-v2 h2, .careers-v2 h3, .careers-v2 p{ margin-top: 0; }
.careers-v2 h2{
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -.045em;
  margin-bottom: 16px;
}
.careers-v2 h3{
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: 1.15rem; line-height: 1.3; letter-spacing: -.02em; margin-bottom: 6px;
}

/* 1 intro */
section.cr-intro{ padding: 88px 0; }
.cr-intro-grid{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px; align-items: start;
}
.cr-intro-lede{ color: #76564C; font-size: 1.08rem; max-width: 34rem; margin: 0; }
.cr-reasons{ list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.cr-reasons li{ display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start; }
.cr-reason-num{
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-tint); color: var(--teal);
  font-weight: 700; font-size: 1rem;
}
.cr-reasons p{ color: #795E55; font-size: .95rem; margin: 0; }

/* 2 openings */
section.cr-openings{ background: #F7EEDD; padding: 88px 0; }
.cr-openings-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.cr-openings-head h2{ margin-bottom: 0; }
.cr-count{
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal); background: var(--paper); border: 1px solid #E9DAC8;
  border-radius: 999px; padding: 6px 14px;
}
.cr-job-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cr-job{
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  background: #FFFDF8; border: 1px solid #E9DAC8; border-left: 4px solid var(--teal);
  border-radius: 16px; padding: 24px 28px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cr-job:nth-child(3n+2){ border-left-color: var(--brand-olive); }
.cr-job:nth-child(3n+3){ border-left-color: var(--brand-blue); }
.cr-job:hover{ box-shadow: 0 14px 30px -20px rgba(58,11,3,.35); }
.cr-job-main{ min-width: 0; }
.cr-job-main p{ color: #795E55; font-size: .93rem; margin: 0 0 8px; max-width: 60ch; }
.cr-job-meta{ font-size: .8rem; color: #795E55; }
.cr-job-meta::before{ content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); margin-right: 8px; vertical-align: middle; }
.cr-empty{ background: #FFFDF8; border: 1px dashed #DCC8AB; border-radius: 16px; padding: 32px; max-width: 46rem; }
.cr-empty p{ color: #795E55; margin: 0; }

/* 3 apply */
section.cr-apply-section{ padding: 88px 0; }
.cr-apply-grid{
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 0; align-items: stretch;
  border-radius: 24px; overflow: hidden; border: 1px solid #E9DAC8;
}
.cr-apply-panel{ background: var(--brand-brown); color: #fff8ea; padding: 56px 48px; }
.careers-v2 .cr-apply-panel h2{ color: #fff8ea; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.cr-apply-panel p{ color: #E8D2C6; margin-bottom: 16px; }
.cr-apply-contact{ font-size: .9rem; }
.cr-apply-contact a{ color: var(--brand-pink); }
.cr-form-card{ background: #FFFDF8; padding: 48px; min-width: 0; }

@media (max-width: 900px){
  .cr-intro-grid, .cr-apply-grid{ grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cr-apply-grid{ gap: 0; }
  .cr-apply-panel, .cr-form-card{ padding: 40px 28px; }
}
@media (max-width: 640px){
  section.cr-intro, section.cr-openings, section.cr-apply-section{ padding: 64px 0; }
  .cr-job{ flex-direction: column; align-items: flex-start; padding: 22px; }
}

/* =========================================================
   Service page — overview + "Who it's for" (single-service.php)
   Same palette as About / Careers: a statement beside the description
   on paper, then two cards on cream with round check markers.
   ========================================================= */
section.svc-overview{ background: #FFFDF8; padding: 88px 0; }
.svc-overview-grid{
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 80px; align-items: start;
}
.svc-overview-title{
  margin: 0;
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -.045em;
}
.svc-overview-copy{ border-left: 1px solid var(--brand-olive); padding-left: 32px; }
.svc-overview-copy p{ margin: 0 0 16px; color: #76564C; font-size: 1.05rem; line-height: 1.75; }
.svc-overview-copy p:last-child{ margin-bottom: 0; }

section.svc-fit{ background: #F7EEDD; padding: 88px 0; }
.svc-fit-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.svc-fit-card{
  background: #FFFDF8; border: 1px solid #E9DAC8; border-radius: 18px;
  border-top: 4px solid var(--teal);
  padding: 36px 32px;
}
.svc-fit-here{ border-top-color: var(--brand-blue); }
.svc-fit-card h2{
  margin: 0 0 20px;
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: 1.35rem; line-height: 1.25; letter-spacing: -.02em;
}
.svc-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.svc-list li{
  position: relative; padding-left: 34px;
  color: #795E55; font-size: .97rem; line-height: 1.6;
}
/* Round tick marker: a tinted disc with the check drawn on top. */
.svc-list li::before{
  content: ""; position: absolute; left: 0; top: .15em;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal-tint);
}
.svc-list li::after{
  content: ""; position: absolute; left: 7px; top: calc(.15em + 7px);
  width: 8px; height: 4px;
  border-left: 1.8px solid var(--teal); border-bottom: 1.8px solid var(--teal);
  transform: rotate(-45deg);
}
.svc-fit-here .svc-list li::before{ background: var(--clay-tint); }
.svc-fit-here .svc-list li::after{ border-color: var(--clay); }

@media (max-width: 850px){
  .svc-overview-grid{ grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .svc-overview-copy{ border-left: 0; padding-left: 0; border-top: 1px solid var(--brand-olive); padding-top: 24px; }
  .svc-fit-grid{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px){
  section.svc-overview, section.svc-fit{ padding: 64px 0; }
  .svc-fit-card{ padding: 28px 22px; }
}

/* Service page — hero, more details, steps and closing
   (single-service.php). Overview and fit cards are styled above. */
.svc-kicker{
  display: inline-flex; align-items: center; gap: 10px;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .75rem; font-weight: 700; color: var(--brand-olive);
}
.svc-kicker::before{ content: ""; width: 28px; height: 2px; background: var(--brand-pink); }

/* Brand blue rather than brown, which is kept for the footer alone. */
section.svc-hero{ position: relative; background: var(--clay); color: #fff8ea; padding: 72px 0; overflow: hidden; }
.svc-hero .svc-kicker{ color: var(--brand-cream); }
.svc-hero-grid{ position: relative; z-index: 1; }
/* Light doodles (shared .doodle + keyframes from the homepage), kept to the
   empty right side, plus a soft ring like the About hero. */
section.svc-hero::before{
  content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -200px;
  border-radius: 50%; border: 1px solid rgba(249,228,185,.22);
  box-shadow: 0 0 0 34px rgba(249,228,185,.03), 0 0 0 72px rgba(249,228,185,.02);
  pointer-events: none;
}
section.svc-hero::after{
  content: ""; position: absolute; width: 220px; height: 220px; right: 22%; bottom: -170px;
  border-radius: 50%; background: var(--brand-pink); opacity: .22; pointer-events: none;
}
.svc-doodle-star{ width: 38px; right: 30%; top: 22%; color: var(--brand-pink); animation: doodle-float 6s ease-in-out infinite; }
.svc-doodle-sun{ width: 54px; right: 10%; top: 34%; color: var(--brand-cream); opacity: .85; animation: doodle-spin 24s linear infinite; }
.svc-doodle-dots{ width: 60px; right: 18%; bottom: 18%; fill: var(--brand-olive); opacity: .8; animation: doodle-float 7s ease-in-out infinite reverse; }
.svc-doodle-squiggle{ width: 78px; right: 36%; bottom: 20%; color: var(--brand-cream); opacity: .9; animation: doodle-float 8s ease-in-out infinite; }
/* Below this width the hero text reaches the middle, so keep doodles to the edge. */
@media (max-width: 1100px){
  .svc-doodle-squiggle{ display: none; }
  .svc-doodle-star{ right: 6%; top: 14%; }
}
.svc-hero h1{
  margin: 0 0 18px;
  font-family: var(--font-display); font-weight: 700; color: #fff8ea;
  font-size: clamp(2.6rem, 5.5vw, 4.4rem); line-height: 1.05; letter-spacing: -.05em;
}
.svc-hero-teaser{ margin: 0 0 32px; max-width: 40rem; color: rgba(255,255,255,.88); font-size: 1.1rem; line-height: 1.7; }
.svc-hero-actions, .svc-closing-actions{ display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.svc-text-link{
  font-weight: 600; font-size: .92rem; color: inherit;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(249,228,185,.45);
}
.svc-text-link:hover{ color: var(--brand-pink); text-decoration-color: currentColor; }

section.svc-more{ background: #FFFDF8; padding: 88px 0 0; }
.svc-more-body{ max-width: 46rem; margin-inline: auto; }
.svc-more-body h3{
  margin: 40px 0 10px;
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: 1.3rem; line-height: 1.3; letter-spacing: -.02em;
}
.svc-more-body h3:first-child{ margin-top: 0; }
.svc-more-body p{ margin: 0 0 14px; color: #76564C; line-height: 1.75; }
.svc-more-body .svc-list{ margin: 0 0 14px; }

section.svc-steps{ background: #FFFDF8; padding: 88px 0; }
.svc-steps-head{ max-width: 640px; margin-bottom: 44px; }
.svc-steps-head .svc-kicker{ color: var(--teal); }
.svc-steps-head h2{
  margin: 12px 0 0;
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -.045em;
}
.svc-step-row{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
  position: relative;
}
/* The line joining the step numbers. */
.svc-step-row::before{
  content: ""; position: absolute; left: 24px; right: 24px; top: 23px;
  height: 2px; background: #E9DAC8;
}
.svc-step{ position: relative; }
.svc-step-num{
  position: relative; z-index: 1;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal); color: #fff; font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 0 0 6px #FFFDF8;
}
.svc-step:nth-child(2) .svc-step-num{ background: var(--brand-olive); color: var(--brand-brown); }
.svc-step:nth-child(3) .svc-step-num{ background: var(--clay); }
.svc-step:nth-child(4) .svc-step-num{ background: var(--brand-brown); }
.svc-step h3{
  margin: 20px 0 8px;
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: 1.12rem; line-height: 1.3; letter-spacing: -.02em;
}
.svc-step p{ margin: 0; color: #795E55; font-size: .93rem; line-height: 1.6; }

section.svc-closing{ background: #F7EEDD; padding: 72px 0; }
.svc-closing-inner{ display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.svc-closing h2{
  margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); line-height: 1.2; letter-spacing: -.03em;
}
.svc-closing p{ margin: 0; max-width: 46rem; color: #795E55; font-size: .95rem; line-height: 1.6; }
.svc-closing .svc-text-link{ color: var(--brand-brown); text-decoration-color: #DCC8AB; }
.svc-closing .svc-text-link:hover{ color: var(--teal); }

@media (max-width: 900px){
  .svc-step-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .svc-step-row::before{ display: none; }
  .svc-closing-inner{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px){
  section.svc-hero{ padding: 52px 0 56px; }
  .svc-doodle-star{ width: 26px; right: 6%; top: 12%; }
  .svc-doodle-sun, .svc-doodle-squiggle{ display: none; }
  .svc-doodle-dots{ width: 44px; right: 8%; bottom: 10%; }
  section.svc-steps{ padding: 64px 0; }
  section.svc-more{ padding-top: 64px; }
  section.svc-closing{ padding: 56px 0; }
  .svc-step-row{ grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Gallery (page-gallery.php) — hero and closing reuse the svc- styles.
   The core Gallery block becomes a masonry wall: CSS columns, so each
   photo keeps its own shape instead of being cropped to a grid cell.
   ========================================================= */
section.gal-wall{ background: #FFFDF8; padding: 72px 0 88px; }
.gal-wall .wp-block-gallery{
  display: block !important;
  columns: 3; column-gap: 18px;
  margin: 0;
}
.gal-wall .wp-block-gallery .wp-block-image{
  display: block; width: 100% !important; height: auto;
  margin: 0 0 18px !important;
  break-inside: avoid;
  border-radius: 18px; overflow: hidden;
  background: #F7EEDD;
}
.gal-wall .wp-block-gallery img{
  display: block; width: 100%; height: auto !important;
  object-fit: initial; border-radius: 0;
  cursor: zoom-in;
  transition: transform .4s ease, filter .4s ease;
}
.gal-wall .wp-block-gallery .wp-block-image:hover img{ transform: scale(1.04); filter: saturate(1.08); }
.gal-wall .wp-block-gallery img:focus-visible{ outline: 3px solid var(--teal); outline-offset: -3px; }
/* Every third photo gets a coloured frame, a quiet nod to the palette. */
.gal-wall .wp-block-gallery .wp-block-image:nth-child(3n+1){ box-shadow: 0 0 0 4px var(--teal-tint); }
.gal-wall .wp-block-gallery .wp-block-image:nth-child(3n+2){ box-shadow: 0 0 0 4px var(--clay-tint); }
.gal-wall .wp-block-gallery .wp-block-image:nth-child(3n+3){ box-shadow: 0 0 0 4px #F3EFC9; }

/* Lightbox */
.gal-lightbox{
  border: 0; padding: 0; background: transparent;
  max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh;
}
.gal-lightbox[open]{ display: flex; align-items: center; justify-content: center; }
.gal-lightbox::backdrop{ background: rgba(33,9,3,.88); }
.gal-lightbox img{
  max-width: min(90vw, 1200px); max-height: 84vh;
  border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.gal-close, .gal-nav{
  position: absolute; border: 0; cursor: pointer;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,248,234,.12); color: #fff8ea;
  font-size: 1.9rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.gal-close:hover, .gal-nav:hover{ background: var(--teal); }
.gal-close:focus-visible, .gal-nav:focus-visible{ outline: 2px solid var(--brand-cream); outline-offset: 2px; }
.gal-close{ top: 20px; right: 20px; }
.gal-prev{ left: 20px; top: 50%; transform: translateY(-50%); }
.gal-next{ right: 20px; top: 50%; transform: translateY(-50%); }

@media (max-width: 900px){
  .gal-wall .wp-block-gallery{ columns: 2; column-gap: 14px; }
  .gal-wall .wp-block-gallery .wp-block-image{ margin-bottom: 14px !important; }
}
@media (max-width: 480px){
  section.gal-wall{ padding: 48px 0 64px; }
  .gal-wall .wp-block-gallery{ columns: 1; }
  .gal-prev{ left: 8px; } .gal-next{ right: 8px; }
}
@media (prefers-reduced-motion: reduce){
  .gal-wall .wp-block-gallery img{ transition: none; }
}
.gal-intro{ margin: 0 0 36px; max-width: 40rem; color: #76564C; font-size: 1.08rem; line-height: 1.7; }

/* =========================================================
   Resources (page-resources.php) — below the photo banner:
   feature article and article cards.
   Reuses .ab-wrap, .ab-cta, .svc-kicker, .svc-text-link, .svc-closing.
   ========================================================= */
section.res-articles{ background: #FFFDF8; padding: 80px 0 88px; }
.res-tag{
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); background: var(--teal-tint); border-radius: 999px; padding: 5px 12px;
}
.res-meta{ display: block; font-size: .8rem; color: #795E55; }

.res-feature{
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  background: #F7EEDD; border-radius: 24px; overflow: hidden;
}
.res-feature-media{ position: relative; display: block; min-height: 340px; }
.res-feature-media .cover-img{ transition: transform .5s ease; }
.res-feature:hover .res-feature-media .cover-img{ transform: scale(1.03); }
.res-feature-body{ padding: 48px 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.res-feature-body h2{
  margin: 0;
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.15; letter-spacing: -.035em;
}
.res-feature-body h2 a, .res-card h3 a{ color: inherit; text-decoration: none; }
.res-feature-body h2 a:hover, .res-card h3 a:hover{ color: var(--teal); }
.res-feature-body p{ margin: 0; color: #76564C; line-height: 1.7; }
.res-feature-body .ab-cta{ margin-top: 8px; }

.res-heading{
  margin: 72px 0 24px;
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -.03em;
}
.res-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.res-card{
  display: flex; flex-direction: column;
  background: #FFFDF8; border: 1px solid #E9DAC8; border-radius: 18px; overflow: hidden;
  border-top: 4px solid var(--teal);
  transition: box-shadow .2s ease, transform .2s ease;
}
.res-card:nth-child(3n+2){ border-top-color: var(--brand-olive); }
.res-card:nth-child(3n+3){ border-top-color: var(--brand-blue); }
.res-card:hover{ box-shadow: 0 18px 34px -22px rgba(58,11,3,.4); transform: translateY(-2px); }
.res-card-media{ position: relative; display: block; aspect-ratio: 16 / 10; background: #F7EEDD; }
.res-card-body{ padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.res-card h3{
  margin: 0;
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: 1.15rem; line-height: 1.3; letter-spacing: -.02em;
}
.res-card p{ margin: 0; color: #795E55; font-size: .93rem; line-height: 1.6; }
.res-more{ margin-top: auto; padding-top: 6px; font-weight: 600; font-size: .9rem; color: var(--teal); text-decoration: none; }
.res-more:hover{ text-decoration: underline; text-underline-offset: 4px; }
.res-empty{ color: #795E55; }



@media (max-width: 900px){
  .res-feature{ grid-template-columns: minmax(0, 1fr); }
  .res-feature-media{ min-height: 0; aspect-ratio: 16 / 9; }
  .res-feature-body{ padding: 32px 26px; }
  .res-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  section.res-articles{ padding: 56px 0 64px; }
  .res-grid{ grid-template-columns: minmax(0, 1fr); }
  .res-heading{ margin-top: 52px; }
}
@media (prefers-reduced-motion: reduce){
  .res-card, .res-feature-media .cover-img{ transition: none; }
}

/* Service heroes take their service's tile colour from the homepage
   "What We Do" row (.svc-item:nth-child(5n+…)), in the same order:
   1 pink, 2 pale pink, 3 cream, 4 white, 5 blue. Like the tiles, all
   text is brown, which reads on every one of them; doodles and the
   button adjust per tone so they stay visible. */
section.svc-hero[class*="svc-tone-"]{ color: var(--brand-brown); }
.svc-tone-1{ --svc-bg: var(--brand-pink); }
.svc-tone-2{ --svc-bg: var(--teal-tint); }
.svc-tone-3{ --svc-bg: var(--brand-cream); }
.svc-tone-4{ --svc-bg: var(--paper); }
.svc-tone-5{ --svc-bg: var(--brand-blue); }
section.svc-hero[class*="svc-tone-"]{ background: var(--svc-bg); }
section.svc-tone-4{ border-bottom: 1px solid #E9DAC8; }
[class*="svc-tone-"] h1{ color: var(--brand-brown); }
.svc-hero[class*="svc-tone-"] .svc-kicker{ color: var(--brand-brown); }
[class*="svc-tone-"] .svc-hero-teaser{ color: rgba(58,11,3,.85); }
section[class*="svc-tone-"]::before{ border-color: rgba(58,11,3,.16); box-shadow: 0 0 0 34px rgba(58,11,3,.035), 0 0 0 72px rgba(58,11,3,.025); }
section[class*="svc-tone-"]::after{ background: var(--brand-olive); opacity: .3; }
[class*="svc-tone-"] .svc-doodle-sun{ color: var(--brand-brown); opacity: .45; }
[class*="svc-tone-"] .svc-doodle-dots{ fill: var(--brand-brown); opacity: .4; }
[class*="svc-tone-"] .svc-doodle-squiggle{ color: var(--brand-brown); opacity: .4; }
/* On the two strong tiles (pink, blue) a pink star or button would sink in. */
.svc-tone-1 .svc-doodle-star, .svc-tone-5 .svc-doodle-star{ color: var(--brand-cream); }
.svc-tone-1 .ab-cta, .svc-tone-5 .ab-cta{ background: var(--brand-brown); color: var(--brand-cream); }
.svc-tone-1 .ab-cta:hover, .svc-tone-5 .ab-cta:hover{ background: var(--teal-press); color: #fff; }





/* =========================================================
   Contact (page-contact.php) — the approved reference layout in the
   Ahamya palette: light photo hero; details list + mini map beside the
   form card.
   ========================================================= */
.ct-kicker{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal);
}

/* 1 hero */
/* Pale pink that fades down into the page colour, with soft brand-colour
   glows, so the band blends into the section below instead of ending
   on a hard edge. */
section.ct-hero2{
  position: relative; overflow: hidden; padding: 80px 0 104px;
  background:
    radial-gradient(60% 90% at 85% 10%, rgba(214,113,171,.28), transparent 70%),
    radial-gradient(40% 70% at 10% 0%, rgba(78,152,197,.14), transparent 70%),
    linear-gradient(180deg, var(--teal-tint) 0%, #FBEFF4 60%, #FFFDF8 100%);
}
.ct-hero2-inner{ position: relative; z-index: 1; }
/* Doodles recoloured for the pale pink band (they default to light-on-dark). */
.ct-hero2 .svc-doodle-star{ color: var(--teal); }
.ct-hero2 .svc-doodle-sun{ color: var(--brand-olive); opacity: 1; }
.ct-hero2 .svc-doodle-dots{ fill: var(--clay); opacity: .55; }
.ct-hero2 .svc-doodle-squiggle{ color: var(--clay); opacity: .6; }
/* Soft rings in the corner, like the other heroes. */
section.ct-hero2::before{
  content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -200px;
  border-radius: 50%; border: 1px solid rgba(176,74,134,.22);
  box-shadow: 0 0 0 34px rgba(176,74,134,.05), 0 0 0 72px rgba(176,74,134,.03);
  pointer-events: none;
}
@media (max-width: 560px){ .ct-hero2 .svc-doodle-squiggle{ display: none; } }
.ct-hero2 h1{
  margin: 0 0 14px; max-width: 12ch;
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.04; letter-spacing: -.05em;
}
.ct-hero2 p{ margin: 0; max-width: 32rem; color: #6A4A40; font-size: 1.05rem; line-height: 1.7; }

/* 2 body */
section.ct-body{ background: #FFFDF8; padding: 72px 0 96px; }
.ct-body-grid{ display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.ct-list{ list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 22px; }
.ct-list li{ display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
.ct-icon{
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-tint); color: var(--teal);
}
.ct-list li:nth-child(2) .ct-icon{ background: #F3EFC9; color: var(--gold); }
.ct-list li:nth-child(3) .ct-icon{ background: var(--clay-tint); color: var(--clay); }
.ct-list li:nth-child(4) .ct-icon{ background: #F7EEDD; color: var(--brand-brown); }
.ct-icon svg{ width: 22px; height: 22px; }
.ct-list h2{
  margin: 2px 0 3px;
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown); font-size: 1.02rem;
}
.ct-list p{ margin: 0; color: #795E55; font-size: .94rem; line-height: 1.55; }
.ct-list p a{ color: inherit; text-decoration: none; }
.ct-list p a:hover{ color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
/* One number per line; font-size 0 hides the comma ahamya_phone_links() puts between them. */
.ct-list .ct-phones{ font-size: 0; }
.ct-list .ct-phones a{ display: block; font-size: .94rem; line-height: 1.55; white-space: nowrap; }
/* Footer phone numbers: one per line, left-aligned (the ", " separator is
   hidden), matching the Contact page list. */
.footer-col .footer-phones{ font-size: 0; }
.footer-col .footer-phones a{ display: block; font-size: 0.92rem; line-height: 1.6; white-space: nowrap; }
/* Equal-width digits in phone numbers (see ahamya_phone_links()). */
.tnum{ display: inline-block; width: 0.62em; text-align: center; }
.ct-inline-link{ display: inline-block; margin-top: 4px; font-size: .86rem; font-weight: 600; color: var(--teal); text-decoration: none; }
.ct-inline-link:hover{ text-decoration: underline; text-underline-offset: 3px; }

.ct-minimap{
  position: relative; display: block; margin-top: 28px;
  border-radius: 18px; overflow: hidden; border: 1px solid #E9DAC8;
  aspect-ratio: 600 / 260; max-width: 100%;
}
.ct-minimap svg{ display: block; width: 100%; height: 100%; transition: transform .4s ease; }
.ct-minimap:hover svg{ transform: scale(1.04); }
.ct-minimap-label{
  position: absolute; right: 12px; bottom: 12px;
  background: #FFFDF8; color: var(--brand-brown); border-radius: 999px; padding: 7px 14px;
  font-size: .82rem; font-weight: 600; box-shadow: 0 6px 16px -8px rgba(58,11,3,.4);
}
.ct-minimap:focus-visible{ outline: 3px solid var(--teal); outline-offset: 3px; }

.ct-social{ display: flex; gap: 10px; margin-top: 22px; }
.ct-social a{
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #F7EEDD; color: var(--brand-brown);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.ct-social a svg{ width: 18px; height: 18px; }
.ct-social a:hover{ background: var(--teal); color: #fff; transform: translateY(-2px); }

.ct-form-card{
  background: #fff; border: 1px solid #EAD9E3; border-radius: 22px; padding: 40px 40px 34px;
  box-shadow: 0 30px 60px -40px rgba(176,74,134,.45); min-width: 0;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.ct-form-card h2{
  margin: 0 0 6px;
  font-family: var(--font-display); font-weight: 700; color: var(--brand-brown);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -.03em;
}
.ct-form-lede{ margin: 0 0 26px; color: #795E55; font-size: .95rem; }
/* Full-width submit, as in the reference. */
.ct-form-card .ff_submit_btn_wrapper{ grid-column: 1 / -1; }
.ct-form-card .ff-btn-submit{ width: 100%; justify-content: center; padding-block: 14px !important; }


@media (max-width: 1000px){
  .ct-body-grid{ grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ct-form-card{ order: -1; }
}
@media (max-width: 560px){
  section.ct-body{ padding: 48px 0; }
  .ct-form-card{ padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce){
  .ct-minimap svg{ transition: none; }
}

/* =========================================================
   Mobile polish (from a 390px audit of every page): nothing scrolled
   sideways, but some labels fell under 12px and a few links/dots were
   small to tap. Readability floor of ~12.5px and 44px tap targets.
   ========================================================= */
@media (max-width: 640px){
  .mobile-action{ font-size: 0.78rem; }
  .person-role, .res-tag{ font-size: 0.78rem; }
  .article-meta{ font-size: 0.78rem; }
  .profile-quals h2{ font-size: 0.8rem; }

  /* Small text links: pad the hit area without changing the look. */
  .svc-text-link, .profile-back, .res-more, .ct-inline-link{
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .profile-back{ margin-bottom: var(--sp-3); }
  .footer-social a{ width: 40px; height: 40px; }
  .footer-social svg{ width: 17px; height: 17px; }
  .footer-col a{ padding-block: 4px; }
}
/* Homepage articles dots: 10px visually, a 44px hit area around it
   (same approach as .hero-dot). */
.articles-dot{ position: relative; }
.articles-dot::before{ content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
@media (max-width: 560px){
  /* Team cards fill the phone width instead of a 300px column with a gap beside it. */
  .person-row{ grid-template-columns: minmax(0, 1fr); }
  /* Contact hero: the fade needs less room on a phone. */
  section.ct-hero2{ padding: 52px 0 64px; }
  /* Service steps: number beside the heading, so four steps take half the scroll. */
  .svc-step{ display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; }
  .svc-step-num{ grid-row: span 2; }
  .svc-step h3{ margin-top: 10px; }
}

/* =========================================================
   Animal illustrations (ahamya_critter()) beside the doodles:
   service + contact heroes get a giraffe peeking up from the bottom
   edge plus a lion (service pages) or a bear (contact).
   ========================================================= */
.critter{ position: absolute; pointer-events: none; z-index: 0; overflow: visible; }
@keyframes critter-peek{ 0%, 100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-6px) rotate(-2deg); } }
@keyframes critter-sway{ 0%, 100%{ transform: rotate(-4deg); } 50%{ transform: rotate(4deg); } }

/* Giraffe peeks up from the band's bottom edge. */
.svc-hero .critter-giraffe, .ct-hero2 .critter-giraffe{
  width: 130px; right: 6%; bottom: -10px;
  transform-origin: 50% 100%; animation: critter-peek 5s ease-in-out infinite;
}
.svc-hero .critter-lion{ width: 140px; right: 20%; top: 12%; transform-origin: 50% 90%; animation: critter-sway 6s ease-in-out infinite; }
.ct-hero2 .critter-bear{ width: 132px; right: 22%; bottom: 10%; transform-origin: 50% 100%; animation: critter-sway 6s ease-in-out infinite; }
/* The animals take the spot the dots used. */
.svc-hero:has(.critter) .svc-doodle-dots, .ct-hero2:has(.critter) .svc-doodle-dots{ display: none; }


@media (max-width: 1100px){
  .svc-hero .critter-lion, .ct-hero2 .critter-bear{ display: none; }
}
@media (max-width: 560px){
  .svc-hero .critter-giraffe, .ct-hero2 .critter-giraffe{ width: 72px; right: 4%; bottom: -8px; }
}
@media (prefers-reduced-motion: reduce){
  .critter{ animation: none !important; }
}

/* Resources (blog list) hero: reuses the Contact band (.ct-hero2) with
   a longer heading and the lion instead of the bear. */
.res-hero h1{ max-width: 18ch; }
.ct-hero2 .critter-lion{ width: 140px; right: 20%; top: 14%; transform-origin: 50% 90%; animation: critter-sway 6s ease-in-out infinite; }
@media (max-width: 1100px){ .ct-hero2 .critter-lion{ display: none; } }
/* Blog gets a pale blue band (Contact is pale pink) so the two pages
   read as siblings, not copies. */
section.res-hero{
  background:
    radial-gradient(60% 90% at 85% 10%, rgba(78,152,197,.30), transparent 70%),
    radial-gradient(40% 70% at 10% 0%, rgba(214,113,171,.12), transparent 70%),
    linear-gradient(180deg, var(--clay-tint) 0%, #EEF4F9 60%, #FFFDF8 100%);
}
section.res-hero::before{
  border-color: rgba(47,120,168,.22);
  box-shadow: 0 0 0 34px rgba(47,120,168,.05), 0 0 0 72px rgba(47,120,168,.03);
}
.res-hero .svc-doodle-squiggle{ color: var(--teal); opacity: .5; }

/* ==========================================================
   Phone polish (checked at 390px, 2026-11-07)
   ========================================================== */
@media (max-width: 560px){
  /* Contact / blog hero: the peeking giraffe sat on top of the intro
     text. Keep the text clear of it. */
  .ct-hero2 h1, .ct-hero2 p{ padding-right: 64px; }
  .ct-hero2 .critter-giraffe{ width: 60px; right: 3%; }

  /* Footer quick links were 32px tall; 44px is the comfortable tap size. */
  .footer-col a{ display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
  .footer-col p a{ display: inline; min-height: 0; }
  .footer-col .footer-phones a{ display: block; min-height: 0; padding-block: 8px; } /* not flex: flex drops the spaces between the digit spans */
}

/* Form consent checkbox was a 13px square: hard to hit with a thumb. */
.fluentform .ff-el-form-check-input{ width: 20px; height: 20px; margin-top: 2px; accent-color: var(--teal); }

/* Gallery hero: the Contact/blog doodle band (.ct-hero2) in warm cream,
   so each page in the family has its own colour (Contact pink, blog blue). */
section.gal-hero{
  background:
    radial-gradient(60% 90% at 85% 10%, rgba(201,196,104,.30), transparent 70%),
    radial-gradient(40% 70% at 10% 0%, rgba(214,113,171,.12), transparent 70%),
    linear-gradient(180deg, var(--brand-cream) 0%, #FCF1DA 60%, #FFFDF8 100%);
}
section.gal-hero::before{
  border-color: rgba(125,120,40,.22);
  box-shadow: 0 0 0 34px rgba(125,120,40,.05), 0 0 0 72px rgba(125,120,40,.03);
}
.gal-hero h1{ max-width: 14ch; }
.gal-hero .svc-doodle-sun{ color: var(--gold); }
.gal-hero .svc-doodle-squiggle{ color: var(--teal); opacity: .5; }

/* Service hero: ages and location under the summary (audit). */
.svc-hero-facts{ margin: -18px 0 28px; font-size: .98rem; font-weight: 600; color: inherit; opacity: .85; }
.svc-hero-facts span{ margin-inline: .45em; }

/* Header phone (end of the menu). Pill so it reads as an action, not a
   page link; white over the homepage video, pink elsewhere. */
.tab-nav > a.nav-phone{
  display: inline-flex; align-items: center; gap: .45em;
  padding: .45em .95em; border: 1.5px solid var(--teal); border-radius: 999px;
  color: var(--teal); font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tab-nav > a.nav-phone svg{ width: 16px; height: 16px; flex: none; }
.tab-nav > a.nav-phone:hover{ background: var(--teal); color: var(--paper); }
header.site-header.on-hero .tab-nav > a.nav-phone{ border-color: rgba(var(--paper-rgb),.7); color: var(--paper); }
header.site-header.on-hero .tab-nav > a.nav-phone:hover{ background: rgba(var(--paper-rgb),.15); }
@media (max-width: 900px){
  /* In the phone menu sheet it sits last, styled like the other rows. */
  .tab-nav > a.nav-phone, header.site-header.on-hero .tab-nav > a.nav-phone{ border: 0; border-radius: 0; padding: inherit; color: var(--teal); }
}

/* Homepage video pause/play (bottom-right of the hero). */
.hero-video-toggle{
  position: absolute; right: var(--sp-6); bottom: var(--sp-6); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid rgba(var(--paper-rgb),.7); background: rgba(20,20,20,.28);
  color: var(--paper); cursor: pointer;
  transition: background .2s ease;
}
.hero-video-toggle:hover{ background: rgba(20,20,20,.5); }
.hero-video-toggle:focus-visible{ outline: 3px solid var(--paper); outline-offset: 3px; }
.hero-video-toggle svg{ width: 18px; height: 18px; }
.hero-video-toggle .i-play{ display: none; }
.hero-video-toggle[aria-pressed="true"] .i-play{ display: block; }
.hero-video-toggle[aria-pressed="true"] .i-pause{ display: none; }
@media (max-width: 640px){
  .hero-video-toggle{ right: var(--sp-4); top: calc(var(--header-h) + var(--sp-3)); bottom: auto; width: 40px; height: 40px; }
}
.voice-avatar svg{ width: 18px; height: 18px; }