/*
Theme Name:   Pastorie Clinic Child
Description:  Child theme for Astra — De Oude Pastorie Clinic, Greyton
Author:       Francois Van Der Elst
Template:     astra
Version:      3.0.0
Text Domain:  pastorie-clinic-child
*/

/* ─── Design Tokens ──────────────────────────────────────────── */
:root{
  --mist:#F5F1E7;
  --paper:#FBF9F4;
  --ink:#2E332A;
  --ink-soft:#5C6354;
  --river:#205166;
  --river-deep:#153944;
  --river-light:#5C8A96;
  --clay:#AF5C38;
  --clay-light:#C97C50;
  --gold:#C79A44;
  --sage:#C4D3D2;
  --line: rgba(46,51,42,0.14);
  --shadow: 0 20px 44px -22px rgba(30,38,32,0.45);
}

/* ─── Reset ──────────────────────────────────────────────────── */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--mist);
  color:var(--ink);
  font-family:'Karla', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:'Prata', serif;font-weight:400;color:var(--river-deep);margin:0;letter-spacing:-0.01em;}

/* Neutralise any WordPress/Astra wrappers that may wrap our content.
   NOTE: `.site` is deliberately NOT in this list. Astra's page wrapper is
   <div class="site" id="page">, but our own nav is <header class="site"> — and
   `background:transparent !important` here would override the nav's background
   and make it see-through over the hero. Astra's wrappers never render anyway,
   since this theme supplies its own header.php and footer.php. */
#page, #content, .site-content, .ast-container,
.entry-content, .ast-article-single {
  background: transparent !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.eyebrow{
  font-family:'Karla',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:0.72rem;
  font-weight:700;
  color:var(--clay);
}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
section{position:relative;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-family:'Karla',sans-serif;
  font-weight:700;
  font-size:0.92rem;
  letter-spacing:0.01em;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.btn-clay{background:var(--clay);color:var(--paper);box-shadow:0 10px 24px -12px rgba(175,92,56,0.65);}
.btn-clay:hover{background:var(--clay-light);transform:translateY(-2px);}
.btn-line{border-color:rgba(255,255,255,0.55);color:var(--paper);}
.btn-line:hover{background:rgba(255,255,255,0.12);transform:translateY(-2px);}
.btn-ghost{border-color:var(--river);color:var(--river-deep);}
.btn-ghost:hover{background:var(--river-deep);color:var(--paper);}
.btn-pill{border-radius:32px;}
.btn-pill-solid{background:var(--river);color:var(--paper);}
.btn-pill-solid:hover{background:var(--river-deep);transform:translateY(-2px);}
.btn-pill-outline{border:1px solid var(--river);color:var(--river-deep);background:transparent;}
.btn-pill-outline:hover{background:var(--river);color:var(--paper);transform:translateY(-2px);}

/* ─── Scroll reveal ──────────────────────────────────────────────
   The hidden start state is gated behind .js-anim, which an inline script in
   <head> adds before first paint. If JavaScript is unavailable — or fails —
   the class is never added and everything renders visible, rather than the
   page being left permanently blank at opacity:0. */
.js-anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* Slide in from the right, staggered. Used by the services category cards.
   A keyframe animation rather than a transition: the cards also animate
   `transform` on hover with a much shorter duration, and two transitions on
   the same property cannot coexist. `backwards` holds the start state through
   the stagger delay, and with no forwards fill the transform is released when
   the animation ends — so hover behaves normally afterwards. */
.js-anim .reveal-x{opacity:0;}
.reveal-x.in{
  opacity:1;
  animation:reveal-x .7s cubic-bezier(.22,.61,.36,1) backwards;
}
.reveal-x.in:nth-child(2){animation-delay:.09s;}
.reveal-x.in:nth-child(3){animation-delay:.18s;}
.reveal-x.in:nth-child(4){animation-delay:.27s;}
@keyframes reveal-x{
  from{opacity:0;transform:translateX(46px);}
  to{opacity:1;transform:translateX(0);}
}

/* Honour reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.in,
  .reveal-x, .reveal-x.in,
  .reveal-fade, .reveal-fade.in,
  .reveal .stagger-item, .reveal.in .stagger-item,
  .hero-eyebrow, .hero h1 .h-line > span,
  .hero p.lead, .hero-actions,
  .hero-photo-img, .page-hero-photo-img,
  .page-hero .eyebrow, .page-hero h1, .page-hero .page-lead,
  .team-intro .eyebrow, .team-intro h1, .team-intro .team-lead{opacity:1;transform:none;transition:none;animation:none;}
  html{scroll-behavior:auto;}
  .ticker-track{animation:none;}
}

/* ─── Utility bar ────────────────────────────────────────────── */
.utility{
  background:var(--river-deep);
  color:var(--sage);
  font-size:0.8rem;
}
.utility .wrap{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 32px;flex-wrap:wrap;gap:6px 20px;
}
.utility span{display:inline-flex;align-items:center;gap:7px;color:#DCE3D3;}
.utility a{color:var(--gold);}

/* ─── Nav ────────────────────────────────────────────────────── */
header.site{
  /* Solid, not translucent. --paper is rgb(251,249,244), the same colour the
     original 0.92-alpha rule used, so the tone is unchanged — it just no longer
     lets the hero show through. No backdrop-filter needed on an opaque bar. */
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
nav.wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:17px 32px;
  transition:padding .35s ease;
}
header.site.scrolled nav.wrap{padding:12px 32px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:92px;width:auto;transition:height .35s ease;}
header.site.scrolled .brand img{height:44px;}
.brand-name{line-height:1.15;}
.brand-name b{display:block;font-family:'Prata',serif;font-size:1.05rem;color:var(--river-deep);font-weight:650;}
.brand-name small{display:block;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--clay);font-weight:700;}
.navlinks{display:flex;align-items:center;gap:30px;}
.navlinks a{
  font-size:0.88rem;font-weight:600;color:var(--ink-soft);
  position:relative;padding:4px 0;
}
.navlinks a::after{
  content:'';position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--clay);transition:width .25s ease;
}
.navlinks a:hover::after{width:100%;}
.navlinks a:hover{color:var(--river-deep);}
.nav-right{display:flex;align-items:center;gap:36px;}
.nav-cta-wrap{display:flex;align-items:center;gap:22px;}
.burger{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.burger span{
  display:block;width:22px;height:2px;background:var(--river-deep);margin:5px 0;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
/* Span centres sit 7px apart (2px bar + 5px collapsed margin), so that is the
   distance the outer bars travel to meet in the middle and cross. */
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ─── Hero ───────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:66vh;display:flex;align-items:center;
  background:linear-gradient(180deg,#8A9B8C,#5A7264) center/cover no-repeat;
  overflow:hidden;
}
/* Two layers, one transform each: .hero-photo is driven by the JS parallax,
   .hero-photo-img owns the entrance scale. Sharing one element would mean the
   JS overwriting the CSS animation on every scroll frame. */
.hero-photo{
  position:absolute;
  top:-8%;left:0;right:0;height:116%;
  will-change:transform;
}
.hero-photo-img{
  position:absolute;inset:0;
  background-image:url('https://pastorieclinic.co.za/wp-content/uploads/2026/08/home-header3.webp');
  background-size:cover;background-position:center 38%;
  will-change:transform;
}
.js-anim .hero-photo-img{
  animation:hero-zoom 2.2s cubic-bezier(.16,.72,.32,1) both;
}
@keyframes hero-zoom{
  from{transform:scale(1.07);}
  to{transform:scale(1);}
}
/* The gradient is no longer baked into the photograph, so it lives here.
   Holds solid across the text column (which runs to ~40% of the viewport)
   then fades out past the middle — same approach as .page-hero-scrim. */
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(
    100deg,
    #f7f2ef 0%,
    #f7f2ef 34%,
    rgba(247,242,239,0.92) 44%,
    rgba(247,242,239,0.68) 53%,
    rgba(247,242,239,0.32) 61%,
    rgba(247,242,239,0.08) 67%,
    rgba(247,242,239,0) 73%
  );
}
/* .hero .hero-inner, not .hero-inner: `.wrap{padding:0 20px}` in the 640px
   block sits later in this file and, being a physical shorthand, resets the
   vertical padding. Higher specificity settles it regardless of order. */
.hero .hero-inner{position:relative;z-index:2;width:100%;padding-block:110px;}
.hero-eyebrow{
  color:var(--clay);font-family:'Prata',serif;font-style:italic;font-size:1.05rem;font-weight:400;margin-bottom:16px;
}
.hero h1{
  color:var(--river-deep);font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight:400;line-height:1.14;max-width:15ch;
}
.hero h1 em{font-style:italic;font-weight:400;color:var(--clay);}
.hero p.lead{
  color:var(--ink-soft);max-width:44ch;font-size:1.04rem;margin-top:20px;font-weight:400;
}
.hero-actions{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;align-items:center;}

/* ─── Hero entrance ──────────────────────────────────────────────
   Each H1 line sits in an overflow-hidden mask and rises into place, so the
   headline resolves line by line rather than fading as one block. Everything
   is gated behind .js-anim: without scripting the hero renders statically. */
.hero h1 .h-line{display:block;overflow:hidden;}
.hero h1 .h-line > span{display:block;}

.js-anim .hero-eyebrow,
.js-anim .hero h1 .h-line > span,
.js-anim .hero p.lead,
.js-anim .hero-actions{opacity:0;}

.js-anim .hero-eyebrow{animation:hero-rise .9s cubic-bezier(.22,.61,.36,1) .15s both;}
.js-anim .hero h1 .h-line:nth-child(1) > span{animation:hero-line 1s cubic-bezier(.16,.72,.32,1) .28s both;}
.js-anim .hero h1 .h-line:nth-child(2) > span{animation:hero-line 1s cubic-bezier(.16,.72,.32,1) .40s both;}
.js-anim .hero p.lead{animation:hero-rise .9s cubic-bezier(.22,.61,.36,1) .58s both;}
.js-anim .hero-actions{animation:hero-rise .9s cubic-bezier(.22,.61,.36,1) .72s both;}

@keyframes hero-line{
  from{opacity:0;transform:translateY(105%);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes hero-rise{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

/* ─── Interior page entrances ────────────────────────────────────
   The hero and the team/gallery intro both sit above the fold, so they animate
   on load rather than on scroll. Same easing and rhythm as the home hero. */
.js-anim .page-hero .eyebrow,
.js-anim .page-hero h1,
.js-anim .page-hero .page-lead,
.js-anim .team-intro .eyebrow,
.js-anim .team-intro h1,
.js-anim .team-intro .team-lead{opacity:0;}

.js-anim .page-hero .eyebrow,
.js-anim .team-intro .eyebrow{animation:hero-rise .85s cubic-bezier(.22,.61,.36,1) .12s both;}
.js-anim .page-hero h1,
.js-anim .team-intro h1{animation:hero-rise .9s cubic-bezier(.22,.61,.36,1) .24s both;}
.js-anim .page-hero .page-lead,
.js-anim .team-intro .team-lead{animation:hero-rise .9s cubic-bezier(.22,.61,.36,1) .40s both;}

/* ─── Staggered items inside a revealed section ──────────────────
   The section already carries .reveal; its children ride off the .in class
   the observer adds, so this needs no extra JavaScript. */
.js-anim .reveal .stagger-item{opacity:0;}
.reveal.in .stagger-item{
  opacity:1;
  animation:stagger-rise .65s cubic-bezier(.22,.61,.36,1) backwards;
}
.reveal.in .stagger-item:nth-child(1){animation-delay:.08s;}
.reveal.in .stagger-item:nth-child(2){animation-delay:.18s;}
.reveal.in .stagger-item:nth-child(3){animation-delay:.28s;}
.reveal.in .stagger-item:nth-child(4){animation-delay:.38s;}
.reveal.in .stagger-item:nth-child(5){animation-delay:.46s;}
.reveal.in .stagger-item:nth-child(6){animation-delay:.54s;}
.reveal.in .stagger-item:nth-child(7){animation-delay:.61s;}
.reveal.in .stagger-item:nth-child(8){animation-delay:.67s;}
/* Anything past the eighth shares one delay — a longer ramp would leave the
   last items arriving noticeably after the reader has reached them. */
.reveal.in .stagger-item:nth-child(n+9){animation-delay:.72s;}
@keyframes stagger-rise{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}

/* ─── Services ticker ────────────────────────────────────────── */
.ticker{
  background:var(--river);overflow:hidden;white-space:nowrap;
  padding:16px 0;position:relative;
}
/* One cycle travels exactly one group width (-25% of four identical groups),
   so the duration sets the reading speed. ~120s suits the current 18-item
   list; shorten it if the list gets shorter, or the strip will crawl. */
.ticker-track{
  display:inline-flex;align-items:center;
  animation:ticker-scroll 120s linear infinite;
}
.ticker-group{display:inline-flex;align-items:center;flex:none;}
/* Direct children only. A descendant selector here also matches the
   .ticker-group wrappers (they are spans too), giving every group its own
   22px of side padding and making each group seam twice as wide as the gap
   between items. */
.ticker-group > span{
  font-family:'Karla',sans-serif;font-weight:600;font-size:0.86rem;letter-spacing:0.03em;
  color:var(--paper);padding:0 22px;
}
/* Two classes (0,2,0) outrank .ticker-group > span (0,1,1), so no !important. */
.ticker-group > .ticker-dot{color:var(--gold);font-weight:700;padding:0;}
@keyframes ticker-scroll{
  0%{transform:translate3d(0,0,0);}
  100%{transform:translate3d(-25%,0,0);}
}

/* ─── Trust strip ────────────────────────────────────────────── */
.trust{background:var(--river);padding:44px 0;}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.trust-item{
  display:flex;align-items:flex-start;gap:16px;padding:6px 28px;
  border-left:1px solid rgba(255,255,255,0.2);
}
.trust-item:first-child{border-left:none;padding-left:0;}
.trust-item svg{flex:none;margin-top:2px;}
.trust-item h4{font-family:'Prata',serif;font-weight:400;font-size:1.02rem;color:var(--paper);margin-bottom:5px;}
.trust-item p{margin:0;color:#CFE0DE;font-size:0.86rem;line-height:1.45;}

/* ─── Intro / note from the clinic ───────────────────────────── */
.intro{padding:120px 0;position:relative;overflow:hidden;}
.intro-grid{display:grid;grid-template-columns:0.65fr 1.35fr;gap:60px;align-items:start;}
.intro-lead .eyebrow{margin-bottom:18px;}
.intro-lead h2{font-size:clamp(2rem,3.2vw,2.7rem);font-weight:400;line-height:1.22;}
.intro-quote{
  font-family:'Prata',serif;font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.5;
  color:var(--river-deep);margin:0 0 30px;
}
.intro-copy p{color:var(--ink-soft);margin-top:18px;font-size:1.02rem;max-width:62ch;}

/* road divider that threads through services */
.road-wrap{position:relative;}
.road-svg{position:absolute;left:50%;top:0;transform:translateX(-50%);width:2px;height:100%;z-index:0;}

/* ─── Services ───────────────────────────────────────────────── */
.services{background:var(--paper);padding:100px 0 120px;border-bottom:1px solid var(--line);position:relative;}
.services .section-head{max-width:640px;margin:0 0 56px;text-align:left;}
.services .section-head .eyebrow{display:block;}
.services .section-head h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-top:14px;font-weight:400;line-height:1.2;max-width:20ch;}
.accordion{max-width:820px;border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-head{
  display:flex;align-items:center;gap:22px;width:100%;
  background:none;border:none;cursor:pointer;padding:28px 4px;text-align:left;
  font-family:inherit;
}
.acc-num{font-family:'Prata',serif;font-style:italic;font-size:0.85rem;color:var(--ink-soft);flex:none;width:24px;}
.acc-title{flex:1;font-family:'Prata',serif;font-size:1.28rem;color:var(--river-deep);font-weight:400;}
.acc-icon{
  flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--river);
  display:flex;align-items:center;justify-content:center;position:relative;transition:background .3s ease, transform .3s ease;
}
.acc-icon::before,.acc-icon::after{content:'';position:absolute;background:var(--river);transition:transform .3s ease, background .3s ease;}
.acc-icon::before{width:12px;height:1.4px;}
.acc-icon::after{width:1.4px;height:12px;}
.acc-item.open .acc-icon{background:var(--river);}
.acc-item.open .acc-icon::before,.acc-item.open .acc-icon::after{background:var(--paper);}
.acc-item.open .acc-icon::after{transform:rotate(90deg) scaleY(0);}
.acc-body{max-height:0;overflow:hidden;transition:max-height .4s ease;}
.acc-body-inner{padding:0 4px 30px 46px;}
.acc-body-inner p{color:var(--ink-soft);font-size:1rem;line-height:1.65;margin:0;max-width:56ch;}
.acc-item.open .acc-head .acc-title{color:var(--river);}
.services-note{margin-top:34px;color:var(--ink-soft);font-size:0.9rem;}

/* ─── Why choose us ──────────────────────────────────────────── */
.why{
  background:var(--mist);
  color:var(--ink);padding:120px 0;position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.why-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:70px;align-items:start;position:relative;}
.why h2{color:var(--river-deep);font-size:clamp(1.9rem,3vw,2.5rem);max-width:12ch;font-weight:400;margin-top:14px;}
.why > .wrap > .why-grid > div:first-child p{color:var(--ink-soft);margin-top:20px;max-width:38ch;}
.value-list{display:grid;grid-template-columns:1fr 1fr;gap:36px 44px;}
.value-item{border-top:1px solid var(--line);padding-top:20px;}
.value-item b{display:block;font-family:'Prata';font-weight:400;font-size:1.12rem;color:var(--river-deep);margin-bottom:8px;}
.value-item p{margin:0;color:var(--ink-soft);font-size:0.92rem;}

/* ─── Home care split ────────────────────────────────────────── */
/* Reduced bottom padding: the noticeboard used to sit between this and the
   testimonial, so 120px + 100px now met directly and read as a dead gap. */
.homecare{padding:120px 0 72px;background:var(--mist);}
.homecare .wrap{display:grid;grid-template-columns:1.05fr 0.95fr;gap:70px;align-items:center;}
.hc-art{aspect-ratio:5/4;border-radius:6px;overflow:hidden;position:relative;box-shadow:var(--shadow);
  background:linear-gradient(150deg,#DCE3D0,#B9C4AC 55%,#8FA284);}
.hc-art img{width:100%;height:100%;object-fit:cover;}
.homecare h2{font-size:clamp(1.9rem,3vw,2.5rem);max-width:13ch;font-weight:560;margin-top:14px;}
.homecare p{color:var(--ink-soft);margin-top:18px;max-width:48ch;font-size:1.02rem;}
.hc-list{margin-top:26px;display:flex;flex-direction:column;gap:14px;}
.hc-list div{display:flex;gap:12px;align-items:flex-start;font-size:0.95rem;color:var(--ink);}
.hc-list svg{flex:none;margin-top:3px;}
.hc-cta{margin-top:30px;}

/* ─── Testimonial ────────────────────────────────────────────── */
.quote-section{padding:64px 0 100px;text-align:center;position:relative;}
.quote-section .mark{font-family:'Prata';font-size:4rem;color:var(--gold);line-height:1;font-style:italic;}
.quote-section blockquote{
  font-family:'Prata';font-weight:440;font-style:italic;font-size:clamp(1.4rem,2.4vw,1.9rem);
  color:var(--river-deep);max-width:760px;margin:10px auto 26px;line-height:1.45;
}
.quote-section cite{font-style:normal;font-weight:700;font-size:0.85rem;letter-spacing:0.04em;color:var(--clay);text-transform:uppercase;}

/* ─── CTA band ───────────────────────────────────────────────── */
.cta-band{
  background:linear-gradient(120deg,var(--clay),#8F4A2C);
  color:var(--paper);padding:70px 0;
}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.cta-band h2{color:var(--paper);font-size:clamp(1.6rem,2.6vw,2.1rem);max-width:16ch;font-weight:560;}
.cta-band p{color:#F5DDCB;margin-top:10px;}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;}
.btn-cream{background:var(--paper);color:var(--clay);}
.btn-cream:hover{background:#fff;transform:translateY(-2px);}

/* ─── Footer ─────────────────────────────────────────────────── */
footer.site-footer{background:var(--river-deep);color:#CBD3BE;padding:80px 0 0;}
.foot-grid{display:grid;grid-template-columns:1.4fr 0.8fr 1.1fr;gap:50px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,0.12);}
/* logo-footer.png is white artwork on transparency, so it sits directly on the
   dark footer — no backing card needed. */
.foot-logo{display:inline-block;}
.foot-logo img{height:76px;width:auto;display:block;}
.foot-brand p{color:#AEB8A4;font-size:0.92rem;margin-top:20px;max-width:32ch;}
.foot-social{display:flex;gap:12px;margin-top:22px;}
.foot-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.22);
  color:#CBD3BE;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.foot-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--river-deep);}
.foot-col h5{font-family:'Karla';font-size:0.75rem;text-transform:uppercase;letter-spacing:0.12em;color:#E9CE96;margin-bottom:18px;}
.foot-col a, .foot-col li{display:block;color:#CBD3BE;font-size:0.9rem;margin-bottom:11px;list-style:none;}
.foot-col a:hover{color:#fff;}
.foot-hours-wrap{margin-top:14px;}
.foot-hours{display:flex;justify-content:space-between;font-size:0.88rem;color:#CBD3BE;margin-bottom:8px;}
.foot-hours b{color:#E9E4D4;font-weight:600;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding:26px 0;font-size:0.8rem;color:#8C9884;flex-wrap:wrap;gap:10px;}
/* No underline — the lighter tone against the #8C9884 row already sets it
   apart as a link, and it brightens on hover. */
.foot-credit{color:#CBD3BE;transition:color .2s ease;}
.foot-credit:hover{color:#fff;}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width:980px){
  .navlinks{display:none;}
  .burger{display:block;}
  .intro-grid,.why-grid,.homecare .wrap{grid-template-columns:1fr;}
  .value-list{grid-template-columns:1fr;}
  .notice-card{grid-template-columns:1fr;padding:36px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .trust-grid{grid-template-columns:1fr 1fr;row-gap:26px;}
  .trust-item{border-left:none;padding:0;}
}
@media (max-width:640px){
  .wrap{padding:0 20px;}
  .utility .wrap{justify-content:center;text-align:center;}
  .utility span{justify-content:center;width:100%;}
  .foot-grid{grid-template-columns:1fr;}
  .cta-band .wrap{flex-direction:column;align-items:flex-start;}
  .trust-grid{grid-template-columns:1fr;}
  .acc-body-inner{padding-left:4px;}
  .acc-title{font-size:1.08rem;}
}

/* ─── Mobile nav (burger open state) ─────────────────────────── */
/* The booking button only appears inside the menu on mobile — on desktop it
   lives in .nav-cta-wrap alongside the links. */
.nav-book-mobile{display:none;}

@media (max-width:980px){
  /* Desktop CTA is hidden; the menu carries it instead. */
  .nav-cta-wrap{display:none;}

  /* The logo and burger sit above the panel inside the header's stacking
     context, so the background can run behind them up to the utility bar. */
  .brand,
  .burger{position:relative;z-index:2;}

  .navlinks.open{
    display:flex;
    /* Fixed, not absolute: an absolutely positioned panel is bounded by the
       sticky header and could never reach the bottom of the screen.
       --nav-top is the header's offset from the top of the viewport, so the
       background meets the utility bar; padding-top then clears the logo row. */
    position:fixed;
    top:var(--nav-top,0px);left:0;right:0;bottom:0;
    z-index:1;
    flex-direction:column;
    align-items:stretch;
    background:var(--paper);
    padding:calc(var(--nav-h,127px) + 8px) 20px calc(28px + env(safe-area-inset-bottom,0px));
    gap:2px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .navlinks.open a{
    font-size:1.05rem;
    padding:15px 0;
  }
  .navlinks.open a::after{display:none;}

  .navlinks.open .nav-book-mobile{
    display:inline-flex;justify-content:center;
    margin-top:26px;
    padding:16px 28px;
    font-size:0.95rem;
    /* .navlinks a (0,1,1) outranks .btn-pill-solid (0,1,0), so the link colour
       would otherwise win and render dark text on the dark blue button. */
    color:var(--paper);
  }
  .navlinks.open .nav-book-mobile:hover,
  .navlinks.open .nav-book-mobile:focus{color:var(--paper);}

  /* Stop the page scrolling behind the open panel. */
  body.nav-open{overflow:hidden;}
}

/* ─── Interior page hero (with photograph) ───────────────────── */
.page-hero{
  position:relative;display:flex;align-items:center;overflow:hidden;
  min-height:clamp(340px,34vw,500px);
  background:#f4f1eb;
}
/* Oversized top and bottom by a fixed 60px so the parallax shift (max 46px,
   set in main.js) can never expose an edge — a percentage would fall short at
   the shorter end of the hero's clamp() height. */
.page-hero-photo{
  position:absolute;left:0;right:0;
  top:-60px;height:calc(100% + 120px);
  will-change:transform;
}
/* Same split as the home hero: the outer layer is driven by the JS parallax,
   this inner one owns the entrance scale. One transform per element. */
.page-hero-photo-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  will-change:transform;
}
.js-anim .page-hero-photo-img{
  animation:hero-zoom 2.2s cubic-bezier(.16,.72,.32,1) both;
}
/* Scrim holds near-solid across the text column, then fades out just past the
   middle. The headline runs to roughly 46% of the viewport (.wrap is 1180px
   and centred), so the wash stays above 0.9 until then rather than thinning
   out underneath the end of the line. */
.page-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(
    90deg,
    #f4f1eb 0%,
    #f4f1eb 30%,
    rgba(244,241,235,0.94) 42%,
    rgba(244,241,235,0.72) 52%,
    rgba(244,241,235,0.34) 60%,
    rgba(244,241,235,0.08) 66%,
    rgba(244,241,235,0) 72%
  );
}
.page-hero .page-hero-inner{position:relative;z-index:2;width:100%;padding-block:56px;}
.page-hero h1{
  font-size:clamp(2.1rem,4vw,3.1rem);
  font-weight:400;line-height:1.16;max-width:19ch;margin-top:14px;
}
.page-hero .page-lead{margin-top:22px;}

.page-hero--about    .page-hero-photo-img{background-image:url('https://pastorieclinic.co.za/wp-content/uploads/2026/07/about-header.webp');}
.page-hero--contact  .page-hero-photo-img{background-image:url('https://pastorieclinic.co.za/wp-content/uploads/2026/07/contacst-header.webp');}
.page-hero--services .page-hero-photo-img{background-image:url('https://pastorieclinic.co.za/wp-content/uploads/2026/08/services-header2.webp');}

@media (max-width:980px){
  /* Narrow screens have no room for a left-to-middle fade — carry the wash
     most of the way across so the text stays readable. */
  .page-hero-scrim{
    background:linear-gradient(
      90deg,
      #f4f1eb 0%,
      rgba(244,241,235,0.96) 42%,
      rgba(244,241,235,0.85) 72%,
      rgba(244,241,235,0.76) 100%
    );
  }
}

.page-lead{
  font-family:'Prata',serif;font-style:italic;font-weight:400;
  font-size:clamp(1.12rem,1.8vw,1.4rem);line-height:1.55;
  color:var(--river-deep);max-width:52ch;margin:26px 0 0;
}

/* ─── About: alternating text / image rows ───────────────────── */
.about-section{padding:100px 0;}
.about-section--mist{background:var(--mist);}
.about-section--paper{background:var(--paper);border-top:1px solid var(--line);}
.about-row{
  display:grid;grid-template-columns:1.05fr 0.95fr;
  gap:70px;align-items:center;
}
.about-row--reverse .about-copy{order:2;}
.about-row--reverse .about-art{order:1;}
.about-copy h2{
  font-size:clamp(1.8rem,2.9vw,2.4rem);
  font-weight:400;max-width:16ch;margin-top:14px;
}
.about-copy p{color:var(--ink-soft);margin-top:18px;max-width:54ch;font-size:1.02rem;}

.about-art{
  aspect-ratio:5/4;border-radius:6px;overflow:hidden;position:relative;
  box-shadow:var(--shadow);
  background:linear-gradient(150deg,#DCE3D0,#B9C4AC 55%,#8FA284);
}
.about-art img{width:100%;height:100%;object-fit:cover;}

/* Placeholder shown until a real photograph is dropped in */
.art-placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;text-align:center;padding:28px;color:var(--river-deep);
}
.art-placeholder span{
  font-family:'Karla',sans-serif;font-size:0.68rem;letter-spacing:0.15em;
  text-transform:uppercase;font-weight:700;opacity:0.75;
}
.art-placeholder b{font-family:'Prata',serif;font-weight:400;font-size:1.02rem;line-height:1.4;}
.art-placeholder em{font-style:normal;font-size:0.78rem;opacity:0.7;}

@media (max-width:980px){
  .about-row{grid-template-columns:1fr;gap:40px;}
  /* Keep the copy above the image on every row, reversed or not */
  .about-row--reverse .about-copy{order:1;}
  .about-row--reverse .about-art{order:2;}
  .about-section{padding:72px 0;}
}

/* ─── Services page ──────────────────────────────────────────── */
.services-intro{background:var(--paper);padding:64px 0 60px;border-bottom:1px solid var(--line);}
/* The opening line runs full width as a lead; the remaining paragraphs sit in
   two columns so the block fills the measure instead of trailing off right.
   A grid is used rather than CSS columns so no paragraph splits mid-sentence. */
.services-intro-body{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0 60px;align-items:start;
}
.services-intro-body p{color:var(--ink-soft);font-size:1.02rem;margin:0 0 16px;}
.services-intro-body p:first-child{
  grid-column:1 / -1;
  font-family:'Prata',serif;font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.5;
  color:var(--river-deep);max-width:52ch;margin-bottom:30px;
}
.services-intro-body p:last-child{margin-bottom:0;}

/* The four categories.
   Bottom padding has to clear the hover shadow (0 20px 44px -22px, plus the
   4px lift) — and z-index keeps the card above the following section, which
   is positioned too and would otherwise paint over the shadow. */
.svc-categories{background:var(--mist);padding:64px 0 54px;position:relative;z-index:2;}
.svc-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.svc-cat{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:28px 26px 24px;
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.svc-cat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--river-light);}
.svc-cat-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--mist);color:var(--river);margin-bottom:18px;
}
.svc-cat h2{font-size:1.12rem;font-weight:400;line-height:1.3;margin-bottom:9px;}
.svc-cat p{margin:0;color:var(--ink-soft);font-size:0.88rem;line-height:1.5;flex:1;}
.svc-cat-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-size:0.74rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--clay);
}

/* Group sections */
.svc-group{padding:80px 0;background:var(--mist);}
.svc-group--alt{background:var(--paper);border-block:1px solid var(--line);}
.svc-group-head{display:flex;align-items:center;gap:15px;margin-bottom:18px;}
.svc-group-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;flex:none;
  border:1px solid var(--river);color:var(--river);
}
.svc-group-head h2{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:400;line-height:1.2;}
.svc-group-intro{max-width:70ch;margin-bottom:38px;}
.svc-group-intro p{color:var(--ink-soft);font-size:1rem;margin:0 0 14px;}
.svc-group-intro p:last-child{margin-bottom:0;}

/* Accordion */
.svc-accordion{border-top:1px solid var(--line);}
.svc-item{border-bottom:1px solid var(--line);}
.svc-head{
  display:flex;align-items:flex-start;gap:24px;width:100%;
  background:none;border:none;cursor:pointer;padding:24px 16px 24px 14px;
  text-align:left;font-family:inherit;
  border-radius:6px;
  transition:background .22s ease;
}
/* Hover: warm the row, shift the title toward the accent, and fill the toggle */
.svc-head:hover{background:rgba(176,166,146,0.13);}
.svc-head:hover .svc-title{color:var(--clay);}
.svc-head:hover .svc-toggle{background:var(--river);border-color:var(--river);}
.svc-head:hover .svc-toggle::before,
.svc-head:hover .svc-toggle::after{background:var(--paper);}
.svc-title,.svc-toggle,.svc-toggle::before,.svc-toggle::after{transition:color .22s ease, background .22s ease, border-color .22s ease, transform .3s ease;}
.svc-head-text{flex:1;min-width:0;}
.svc-title{
  display:block;font-family:'Prata',serif;font-size:1.16rem;
  color:var(--river-deep);line-height:1.3;
}
.svc-overview{
  display:block;margin-top:7px;color:var(--ink-soft);
  font-size:0.94rem;line-height:1.55;max-width:76ch;
}
.svc-item.open .svc-title{color:var(--river);}
.svc-toggle{
  flex:none;width:34px;height:34px;border-radius:50%;margin-top:3px;
  border:1px solid var(--river);position:relative;
  transition:background .3s ease;
}
.svc-toggle::before,.svc-toggle::after{
  content:'';position:absolute;top:50%;left:50%;background:var(--river);
  transform:translate(-50%,-50%);transition:transform .3s ease, background .3s ease;
}
.svc-toggle::before{width:12px;height:1.4px;}
.svc-toggle::after{width:1.4px;height:12px;}
.svc-item.open .svc-toggle{background:var(--river);}
.svc-item.open .svc-toggle::before,
.svc-item.open .svc-toggle::after{background:var(--paper);}
.svc-item.open .svc-toggle::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0);}
.svc-head:focus-visible{outline:2px solid var(--river-light);outline-offset:3px;border-radius:4px;}

.svc-panel{max-height:0;overflow:hidden;transition:max-height .4s ease;}
.svc-panel-inner{padding:2px 16px 32px 14px;max-width:78ch;}
.svc-panel-inner > p{color:var(--ink-soft);font-size:0.98rem;line-height:1.7;margin:0 0 15px;}

.svc-list{margin-top:22px;}
.svc-list h3{
  font-family:'Karla',sans-serif;font-size:0.74rem;font-weight:700;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--river);margin-bottom:12px;
}
.svc-list-intro{color:var(--ink-soft);font-size:0.94rem;margin:0 0 12px;}
/* list-style:none is required — the ::before dot below is the bullet, and the
   browser's default disc would otherwise render alongside it. */
.svc-list ul{
  display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;
  list-style:none;margin:0;padding:0;
}
.svc-list li{
  position:relative;padding-left:20px;color:var(--ink);
  font-size:0.92rem;line-height:1.5;
}
.svc-list li::before{
  content:'';position:absolute;left:2px;top:0.62em;
  width:6px;height:6px;border-radius:50%;background:var(--clay);
}
.svc-list-note{margin:12px 0 0;color:var(--ink-soft);font-size:0.84rem;font-style:italic;}

/* Did you know */
.svc-dyk{
  margin-top:26px;background:var(--mist);
  border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:8px;padding:22px 24px;
}
.svc-group--alt .svc-dyk{background:#F5F1E7;}
.svc-dyk-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;color:var(--river-deep);}
.svc-dyk-icon{display:inline-flex;color:var(--gold);}
.svc-dyk-head b{
  font-family:'Karla',sans-serif;font-size:0.74rem;font-weight:700;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--river-deep);
}
.svc-dyk p{margin:0 0 10px;color:var(--ink-soft);font-size:0.93rem;line-height:1.65;}
.svc-dyk p:last-child{margin-bottom:0;}
.svc-dyk ul{margin:0 0 10px;display:grid;gap:6px;list-style:none;padding:0;}
.svc-dyk li{position:relative;padding-left:18px;font-size:0.9rem;color:var(--ink);}
.svc-dyk li::before{
  content:'';position:absolute;left:2px;top:0.6em;
  width:5px;height:5px;border-radius:50%;background:var(--gold);
}

/* Per-group closing note.
   Styled as a distinct panel rather than another ruled row — with a top border
   it read as a collapsed accordion item that wouldn't open. */
.svc-group-closing{
  margin-top:44px;max-width:74ch;
  background:var(--paper);
  border:1px solid var(--line);border-left:3px solid var(--clay);
  border-radius:8px;padding:26px 30px;
}
.svc-group--alt .svc-group-closing{background:var(--mist);}
.svc-group-closing h3{font-family:'Prata',serif;font-size:1.2rem;font-weight:400;margin-bottom:12px;}
.svc-group-closing p{color:var(--ink-soft);font-size:0.98rem;margin:0 0 13px;}
.svc-group-closing p:last-child{margin-bottom:0;}

/* Closing statement — photograph, a 50% wash across it, and a blue gradient
   from the left so the copy stays legible over the busiest part of the image. */
.svc-closing{
  position:relative;padding:90px 0;overflow:hidden;
  background:var(--river);
}
/* Oversized so it can translate on scroll without exposing an edge. */
.svc-closing-photo{
  position:absolute;top:-12%;left:0;right:0;height:124%;
  background:url('https://pastorieclinic.co.za/wp-content/uploads/2026/08/services-header.webp') center/cover no-repeat;
  will-change:transform;
}
/* 50% wash across the photograph, plus a blue gradient from the left. */
.svc-closing-wash{
  position:absolute;inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(21,57,68,0.94) 0%,
      rgba(21,57,68,0.88) 34%,
      rgba(21,57,68,0.62) 52%,
      rgba(21,57,68,0.28) 68%,
      rgba(21,57,68,0) 84%
    ),
    rgba(32,81,102,0.5);
}
.svc-closing .wrap{position:relative;z-index:2;}
.svc-closing h2{color:var(--paper);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:400;max-width:20ch;}
.svc-closing-body{margin-top:26px;max-width:72ch;}
.svc-closing-body p{color:#D6E2E0;font-size:1rem;line-height:1.72;margin:0 0 15px;}
.svc-closing-quote{
  font-family:'Prata',serif;font-style:italic;font-size:clamp(1.15rem,2vw,1.45rem);
  line-height:1.5;color:var(--paper);max-width:60ch;margin:34px 0 0;
  padding-left:24px;border-left:3px solid var(--gold);
}

/* Help finding a service — full-width band, same treatment as .cta-band.
   This replaces the CTA band on the services page, so it carries that weight. */
.svc-help{
  background:linear-gradient(120deg,var(--clay),#8F4A2C);
  color:var(--paper);padding:70px 0;
}
.svc-help-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:30px;flex-wrap:wrap;
}
.svc-help h2{color:var(--paper);font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:400;max-width:18ch;}
.svc-help p{margin:10px 0 0;color:#F5DDCB;font-size:0.98rem;max-width:60ch;}
.svc-help .btn-pill-solid{background:var(--paper);color:var(--clay);border-color:transparent;}
.svc-help .btn-pill-solid:hover{background:#fff;color:var(--clay);transform:translateY(-2px);}

@media (max-width:640px){
  .svc-help-inner{flex-direction:column;align-items:flex-start;}
}

/* Home page: link through to the full services page */
.services-more{margin-top:34px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}

@media (max-width:1080px){
  .svc-cat-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .svc-cat-grid{grid-template-columns:1fr;}
  .svc-list ul{grid-template-columns:1fr;}
  .svc-group{padding:56px 0;}
  .svc-head{gap:16px;padding:20px 2px;}
  .svc-title{font-size:1.06rem;}
  .svc-help-inner{padding:28px 26px;}
  .svc-closing{padding:64px 0;}
}

/* ─── Founder's note ─────────────────────────────────────────── */
.founder{background:var(--paper);padding:100px 0 110px;border-top:1px solid var(--line);}
.founder-head{max-width:60ch;margin-bottom:52px;}
.founder-head h2{
  font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:400;
  line-height:1.18;max-width:18ch;margin-top:14px;
}
.founder-lead{
  font-family:'Prata',serif;font-weight:400;
  font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.55;
  color:var(--river-deep);margin:22px 0 0;max-width:46ch;
}
/* A single readable measure for a long personal piece */
.founder-body{max-width:66ch;}
.founder-body > p{color:var(--ink-soft);font-size:1.04rem;line-height:1.78;margin:0 0 22px;}

/* Short standalone lines — the pause is the point, so give them room */
.founder-beat{
  font-family:'Prata',serif;font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.35;
  color:var(--river-deep);
  margin:40px 0 40px !important;
}

/* Reported speech */
.founder-quote{
  margin:40px 0;padding:4px 0 4px 28px;
  border-left:3px solid var(--clay);
}
.founder-quote p{
  font-family:'Prata',serif;font-style:italic;font-weight:400;
  font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.5;
  color:var(--river-deep);margin:0;
}
.founder-quote cite{
  display:block;margin-top:14px;font-style:normal;
  font-family:'Karla',sans-serif;font-size:0.76rem;font-weight:700;
  letter-spacing:0.11em;text-transform:uppercase;color:var(--clay);
}

/* Closing statement */
.founder-close{
  margin:44px 0 0 !important;
  background:var(--mist);border:1px solid var(--line);border-radius:8px;
  padding:28px 32px;
  font-family:'Prata',serif;font-weight:400;
  font-size:clamp(1.08rem,1.7vw,1.28rem);line-height:1.55;
  color:var(--river-deep) !important;
}

/* Closing thanks to the community — set apart from the panel above it with a
   rule rather than a second box, so the two endings don't compete. */
.founder-thanks{
  margin:40px 0 0 !important;padding-top:32px;
  border-top:1px solid var(--line);
  font-family:'Prata',serif;font-weight:400;
  font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.62;
  color:var(--river-deep) !important;
}

/* Signature */
.founder-sign{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);}
.founder-sign a{display:inline-block;}
.founder-sign b{
  display:block;font-family:'Prata',serif;font-weight:400;
  font-size:1.12rem;color:var(--river-deep);
}
.founder-sign span{
  display:block;margin-top:4px;font-size:0.8rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--clay);
}
.founder-sign a:hover b{color:var(--clay);}

@media (max-width:760px){
  .founder{padding:70px 0 76px;}
  .founder-quote{padding-left:20px;}
  .founder-close{padding:22px 24px;}
}

/* ─── Gallery ────────────────────────────────────────────────── */
.gallery-section{background:var(--mist);padding:80px 0 110px;}
/* CSS columns give true masonry: tiles of differing heights pack naturally,
   which a grid cannot do without fixed row spans. */
.gallery-masonry{
  column-count:4;
  column-gap:22px;
}
.gallery-item{
  position:relative;
  break-inside:avoid;
  margin:0 0 22px;
  border-radius:8px;overflow:hidden;
  /* --ratio is set per item so each tile reserves its height before the
     photograph loads, keeping the columns from reflowing as images arrive. */
  aspect-ratio:var(--ratio, 3/4);
  background:var(--sage);
}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;}
.gallery-item figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 16px 12px;
  background:linear-gradient(180deg,rgba(21,57,68,0) 0%,rgba(21,57,68,0.72) 100%);
  color:var(--paper);font-size:0.82rem;line-height:1.4;
  opacity:0;transition:opacity .25s ease;
}
.gallery-item:hover figcaption{opacity:1;}

/* Shown when the Gallery page has no images yet */
.gallery-empty{
  background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--clay);border-radius:8px;
  padding:30px 34px;max-width:62ch;
}
.gallery-empty p{margin:0 0 10px;color:var(--ink-soft);font-size:0.98rem;}
.gallery-empty p:last-child{margin-bottom:0;}
.gallery-empty b{color:var(--river-deep);font-family:'Prata',serif;font-weight:400;font-size:1.08rem;}

/* Fade each tile in as it scrolls into view */
.js-anim .reveal-fade{opacity:0;}
.reveal-fade.in{opacity:1;animation:reveal-fade .6s ease backwards;}
@keyframes reveal-fade{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

@media (max-width:1080px){ .gallery-masonry{column-count:3;} }
@media (max-width:760px){  .gallery-masonry{column-count:2;column-gap:16px;} .gallery-item{margin-bottom:16px;} }
@media (max-width:480px){  .gallery-masonry{column-count:1;} }

/* ─── Booking page ───────────────────────────────────────────── */
.booking-section{background:var(--mist);padding:80px 0 110px;}
.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;}
.booking-card{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:34px 34px 30px;
  box-shadow:var(--shadow);
}
.booking-card-head{display:flex;align-items:center;gap:20px;margin-bottom:22px;}
.booking-portrait{
  flex:none;width:92px;height:92px;border-radius:50%;overflow:hidden;
  background:linear-gradient(150deg,#DCE3D0,#B9C4AC 55%,#8FA284);
}
.booking-portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.booking-portrait .art-placeholder{padding:8px;}
.booking-portrait .art-placeholder span,
.booking-portrait .art-placeholder b{display:none;}
.booking-card-head h2{font-size:1.25rem;font-weight:400;line-height:1.25;}
.booking-role{
  margin:6px 0 0;font-family:'Karla',sans-serif;font-weight:700;
  font-size:0.72rem;letter-spacing:0.11em;text-transform:uppercase;color:var(--clay);
}
.booking-blurb{margin:0 0 24px;color:var(--ink-soft);font-size:0.98rem;line-height:1.7;}

.booking-for{margin-bottom:28px;}
.booking-for h3{
  font-family:'Karla',sans-serif;font-size:0.72rem;font-weight:700;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--river);margin-bottom:12px;
}
.booking-for ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.booking-for li{position:relative;padding-left:20px;color:var(--ink);font-size:0.92rem;}
.booking-for li::before{
  content:'';position:absolute;left:2px;top:0.62em;
  width:6px;height:6px;border-radius:50%;background:var(--clay);
}

.booking-actions{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.booking-actions .btn{width:100%;justify-content:center;}
.booking-bio{
  display:inline-flex;align-items:center;gap:7px;
  font-size:0.86rem;font-weight:700;color:var(--clay);
}
.booking-bio:hover{color:var(--clay-light);}

.booking-note{
  margin:44px auto 0;max-width:62ch;text-align:center;
  color:var(--ink-soft);font-size:0.94rem;line-height:1.7;
}
.booking-note a{color:var(--river);font-weight:700;}
.booking-note a:hover{color:var(--clay);}

@media (max-width:820px){
  .booking-grid{grid-template-columns:1fr;gap:22px;}
  .booking-section{padding:56px 0 80px;}
  .booking-card{padding:28px 24px 26px;}
}

/* ─── Team index ─────────────────────────────────────────────── */
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.team-intro{background:var(--paper);padding:96px 0 80px;border-bottom:1px solid var(--line);}
.team-intro h1{
  font-size:clamp(2.1rem,4vw,3.1rem);font-weight:400;line-height:1.16;
  max-width:22ch;margin-top:14px;
}
.team-lead{
  font-family:'Prata',serif;font-style:italic;font-weight:400;
  font-size:clamp(1.12rem,1.8vw,1.35rem);line-height:1.55;
  color:var(--river-deep);max-width:56ch;margin:24px 0 0;
}
/* Three points, stacked rows with a rule between — as per the reference */
.team-values{margin-top:60px;border-top:1px solid var(--line);}
.team-value{
  display:grid;grid-template-columns:0.34fr 0.66fr;gap:40px;
  padding:28px 0;border-bottom:1px solid var(--line);align-items:start;
}
.team-value h2{font-size:1.3rem;font-weight:400;color:var(--river-deep);}
.team-value p{margin:0;color:var(--ink-soft);font-size:0.98rem;max-width:62ch;}

/* ─── Team grid ──────────────────────────────────────────────── */
.team-grid-section{background:var(--mist);padding:90px 0 110px;}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.team-card{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease;
}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.team-card-photo{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:linear-gradient(150deg,#DCE3D0,#B9C4AC 55%,#8FA284);
}
.team-card-photo img{width:100%;height:100%;object-fit:cover;}
.team-card-foot{
  display:flex;align-items:center;gap:14px;
  padding:20px 20px 22px;
}
.team-card-text{flex:1;min-width:0;}
.team-card-foot h3{
  font-family:'Prata',serif;font-size:1.06rem;font-weight:400;
  color:var(--river-deep);line-height:1.25;
}
.team-card-foot p{
  margin:5px 0 0;color:var(--ink-soft);font-size:0.82rem;line-height:1.35;
}
.team-card-arrow{
  flex:none;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--river);color:var(--river);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.team-card:hover .team-card-arrow{background:var(--river);color:var(--paper);transform:translateX(3px);}

/* ─── Member page ────────────────────────────────────────────── */
.member-header{background:var(--paper);padding:44px 0 76px;border-bottom:1px solid var(--line);}
.member-back{
  display:inline-flex;align-items:center;gap:7px;
  font-size:0.84rem;font-weight:700;color:var(--clay);
  letter-spacing:0.04em;margin-bottom:38px;
}
.member-back:hover{color:var(--clay-light);}
.member-header-grid{display:grid;grid-template-columns:0.4fr 0.6fr;gap:56px;align-items:center;}
.member-portrait{
  position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;
  box-shadow:var(--shadow);
  background:linear-gradient(150deg,#DCE3D0,#B9C4AC 55%,#8FA284);
}
.member-portrait img{width:100%;height:100%;object-fit:cover;}
.member-intro h1{
  font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:400;line-height:1.14;margin-top:12px;
}
.member-role{
  margin:16px 0 0;font-family:'Karla',sans-serif;font-weight:700;
  font-size:0.86rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--river);
}
.member-creds{margin:9px 0 0;color:var(--ink-soft);font-size:0.94rem;font-style:italic;}

.member-body{background:var(--mist);padding:80px 0 90px;}
.member-prose p{
  color:var(--ink-soft);font-size:1.04rem;line-height:1.72;
  max-width:68ch;margin:0 0 20px;
}
.member-prose p:last-child{margin-bottom:0;}
.member-quote{
  font-family:'Prata',serif;font-style:italic;font-weight:400;
  font-size:clamp(1.18rem,2vw,1.5rem);line-height:1.5;color:var(--river-deep);
  max-width:60ch;margin:44px 0 0;padding-left:26px;
  border-left:3px solid var(--clay);
}

/* Previous / next */
.member-nav{background:var(--paper);border-top:1px solid var(--line);}
.member-nav .wrap{display:flex;justify-content:space-between;gap:24px;padding-block:26px;}
.member-nav-link{
  display:flex;align-items:center;gap:14px;
  color:var(--river-deep);transition:color .25s ease;
  max-width:46%;
}
.member-nav-next{text-align:right;}
.member-nav-link:hover{color:var(--clay);}
.member-nav-arrow{
  flex:none;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--river);color:var(--river);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease, color .25s ease;
}
.member-nav-link:hover .member-nav-arrow{background:var(--river);color:var(--paper);}
.member-nav-label{
  display:block;font-size:0.68rem;font-weight:700;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px;
}
.member-nav-name{display:block;font-family:'Prata',serif;font-size:1rem;line-height:1.25;}

@media (max-width:1080px){
  .team-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:820px){
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .team-value{grid-template-columns:1fr;gap:8px;}
  .member-header-grid{grid-template-columns:1fr;gap:34px;}
  .member-portrait{max-width:340px;}
  .team-intro{padding:64px 0 56px;}
  .member-body{padding:56px 0 64px;}
}
@media (max-width:560px){
  .team-grid{grid-template-columns:1fr;}
  .member-nav .wrap{flex-direction:column;gap:18px;}
  .member-nav-link{max-width:none;}
  .member-nav-next{flex-direction:row-reverse;text-align:left;justify-content:flex-end;}
}

/* ─── Contact ────────────────────────────────────────────────── */
.contact-section{padding:90px 0 72px;background:var(--mist);}
.contact-layout{display:grid;grid-template-columns:1.12fr 0.88fr;gap:64px;align-items:start;}

/* Form */
.contact-form-wrap{
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:44px;box-shadow:var(--shadow);
}
.contact-form-wrap h2{font-size:1.6rem;font-weight:560;margin-bottom:8px;}
.contact-form-wrap > p.form-intro{color:var(--ink-soft);font-size:0.98rem;margin:0 0 28px;max-width:44ch;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-field{display:flex;flex-direction:column;gap:7px;}
.form-field--full{grid-column:1 / -1;}
.form-field label{
  font-family:'Karla',sans-serif;font-size:0.76rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);
}
.form-field label .req{color:var(--clay);}
.form-field input,
.form-field textarea{
  font-family:'Karla',sans-serif;font-size:0.98rem;color:var(--ink);
  background:var(--mist);
  border:1px solid var(--line);border-radius:5px;
  padding:13px 15px;width:100%;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-field textarea{resize:vertical;min-height:148px;line-height:1.6;}
.form-field input:focus,
.form-field textarea:focus{
  outline:none;background:#fff;
  border-color:var(--river-light);
  box-shadow:0 0 0 3px rgba(92,138,150,0.18);
}
.form-field input::placeholder,
.form-field textarea::placeholder{color:#9AA394;}
/* Honeypot — hidden from people, visible to bots */
.form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-actions{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.form-actions button{border:none;}
.form-note{color:var(--ink-soft);font-size:0.82rem;margin:18px 0 0;}

/* Status messages */
.contact-alert{
  border-radius:6px;padding:15px 18px;margin-bottom:26px;
  font-size:0.92rem;border:1px solid transparent;
}
.contact-alert--success{background:#E7F0EA;border-color:#A9C6B4;color:#1F4A33;}
.contact-alert--error{background:#F7E7E1;border-color:#DDAE99;color:#7A3A22;}

/* Details panel */
.contact-panel{display:flex;flex-direction:column;gap:14px;}
.contact-card{
  background:var(--river-deep);color:#CBD3BE;
  border-radius:8px;padding:36px;
}
.contact-card h3{color:var(--paper);font-size:1.25rem;font-weight:400;margin-bottom:20px;}
.contact-line{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-top:1px solid rgba(255,255,255,0.12);}
.contact-line:first-of-type{border-top:none;}
.contact-line svg{flex:none;margin-top:3px;}
.contact-line .label{
  display:block;font-family:'Karla',sans-serif;font-size:0.66rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;color:#E9CE96;margin-bottom:3px;
}
.contact-line a,.contact-line span.value{color:#F0F2E8;font-size:0.98rem;}
.contact-line a:hover{color:#fff;}
.contact-hours{margin-top:6px;}
.contact-hours .foot-hours{margin-bottom:7px;}

/* Booking callout */
.contact-book{
  background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:28px;
}
.contact-book b{display:block;font-family:'Prata',serif;font-weight:400;font-size:1.08rem;color:var(--river-deep);margin-bottom:7px;}
.contact-book p{margin:0 0 18px;color:var(--ink-soft);font-size:0.9rem;}

/* Map — full-bleed, runs edge to edge into the footer */
.map-section{background:var(--mist);}
.map-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:30px;
}
.map-head h2{font-size:1.55rem;font-weight:560;margin-top:12px;}
.map-head p{margin:8px 0 0;color:var(--ink-soft);font-size:0.96rem;}
.map-frame{
  position:relative;width:100%;
  height:clamp(340px,38vw,520px);
  background:linear-gradient(150deg,#DCE3D0,#B9C4AC 55%,#8FA284);
}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

@media (max-width:980px){
  .contact-layout{grid-template-columns:1fr;gap:40px;}
  .contact-section{padding:64px 0 56px;}
}
@media (max-width:640px){
  .map-frame{height:320px;}
}
@media (max-width:640px){
  .contact-form-wrap{padding:28px;}
  .form-grid{grid-template-columns:1fr;}
  .contact-card{padding:28px;}
}

/* ─── Hero, stacked (tablet and phone) ───────────────────────────
   Deliberately the last block in this file. The base .hero-* and .page-hero-*
   rules are defined further up, and at equal specificity the later rule wins —
   so this has to come after all of them rather than beside the hero styles.
   The desktop scrim only covers the left third of the frame, which works when
   the copy sits in that third. On a narrow screen the text runs the full width
   and lands on the photograph, so below 980px the two are separated: copy on a
   solid panel, photograph beneath it at half the viewport height, no overlay. */
@media (max-width:980px){
  .hero,
  .page-hero{
    display:flex;
    flex-direction:column;
    min-height:0;
    background:none;
    overflow:hidden;
  }
  .hero .hero-inner,
  .page-hero .page-hero-inner{
    order:1;
    background:#f7f2ef;
    padding-block:64px 58px;
  }
  .hero-photo,
  .page-hero-photo{
    order:2;
    position:relative;
    top:auto;left:auto;right:auto;
    width:100%;
    height:50vh;
    min-height:260px;   /* keeps a usable frame on short landscape screens */
    overflow:hidden;    /* clips the oversized inner layer as it travels */
  }
  /* The photograph has the frame to itself, so no overlay is needed. */
  .hero-scrim,
  .page-hero-scrim{display:none;}

  /* Oversized so the parallax has somewhere to travel without exposing an edge. */
  .hero-photo-img,
  .page-hero-photo-img{
    top:-13%;bottom:auto;height:126%;
  }
  /* The entrance zoom is a desktop flourish: on mobile this same element
     carries the parallax transform, and one element cannot do both. */
  .js-anim .hero-photo-img,
  .js-anim .page-hero-photo-img{animation:none;}

  .hero h1{max-width:none;}
  .hero p.lead{max-width:46ch;}
  .page-hero h1{max-width:none;}

  /* Interior heroes: shorter, and shifted left so each photograph's subject is
     framed rather than clipped at the right edge.
     max-height matters as much as height here — a taller box crops MORE width
     (cover scales to fill the height), so on a tall phone 40vh would narrow the
     visible slice until the subjects fell outside it. Capping at 330px keeps
     roughly 795px of the 2000px original visible on any handset. */
  .page-hero--contact .page-hero-photo,
  .page-hero--services .page-hero-photo,
  .page-hero--about .page-hero-photo{height:40vh;max-height:330px;}

  /* Nurse at the desk, centred around x1223 */
  .page-hero--contact .page-hero-photo-img{background-position:76% center;}
  /* Stress ECG — keeps both the patient and the doctor (x1000–1780) in frame */
  .page-hero--services .page-hero-photo-img{background-position:82% center;}
  /* Jacaranda in bloom (x1067–1733) rather than the empty road */
  .page-hero--about .page-hero-photo-img{background-position:80% center;}
}