/* ============================================================
   MedX Medical Solutions — medx.co.za
   Sebenza Static build · one stylesheet, hand-written
   Brand CI: Blush / Charcoal / Ivory / Fynbos · rounded sans
   ============================================================ */

:root{
  --ink:#494441;         /* charcoal — text, dark bands, footer */
  --ink-deep:#3A3532;    /* darker charcoal for footer legal strip */
  --paper:#F8F2EB;       /* ivory page background */
  --paper-dim:#F0E7DC;   /* zebra rows, subtle fills */
  --blush:#E5A3AA;       /* primary brand accent */
  --blush-soft:#F2D3D7;  /* blush tint fills */
  --blush-deep:#A24E5B;  /* blush darkened for small text (contrast) */
  --fynbos:#7D9A6F;      /* secondary accent — green */
  --fynbos-deep:#4E6842; /* fynbos darkened */
  --fynbos-tint:#C9D7C6; /* fynbos tint fills */
  --slate:#6B625A;       /* muted body text */
  --rule:rgba(73,68,65,.16);
  --rule-dark:rgba(248,242,235,.22);
  --brass:var(--blush);  /* consent.js reads --brass */
  --pad:clamp(20px,5vw,64px);
}

/* ---------- Fonts (self-hosted variable WOFF2) ---------- */
@font-face{
  font-family:'Quicksand';
  src:url('/assets/fonts/quicksand-var.woff2') format('woff2-variations');
  font-weight:300 700;
  font-display:swap;
}
@font-face{
  font-family:'Nunito Sans';
  src:url('/assets/fonts/nunito-sans-var.woff2') format('woff2-variations');
  font-weight:200 1000;
  font-display:swap;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Nunito Sans',system-ui,-apple-system,sans-serif;
  font-size:1.0625rem;line-height:1.65;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blush-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--fynbos);outline-offset:2px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:0 0 12px 0;
}
.skip-link:focus{left:0}
.wrap{max-width:1320px;margin:0 auto;padding-inline:var(--pad)}

h1,h2,h3,h4{font-family:'Quicksand',sans-serif;font-weight:700;line-height:1.12;letter-spacing:-.01em}
section{padding-block:clamp(56px,8vw,110px)}
.dark{background:var(--ink);color:var(--paper)}
.dark a{color:var(--blush)}
.dim{background:var(--paper-dim)}

.page-hero{padding-block:clamp(56px,8vw,96px) clamp(30px,4vw,50px)}
.page-hero h1{font-size:clamp(2rem,5.4vw,3.6rem);max-width:22ch;margin-bottom:20px}

.kicker{
  font-family:'Quicksand',sans-serif;
  text-transform:uppercase;letter-spacing:.22em;font-size:.8rem;font-weight:600;
  color:var(--fynbos-deep);display:block;margin-bottom:14px;
}
.dark .kicker{color:var(--fynbos-tint)}
.section-h{font-size:clamp(1.9rem,4.4vw,3.2rem);margin-bottom:.5em;max-width:20ch}
.lede{font-size:clamp(1.1rem,2vw,1.3rem);color:var(--slate);max-width:62ch}
.dark .lede{color:rgba(248,242,235,.82)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:'Quicksand',sans-serif;font-weight:700;
  font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);text-decoration:none;
  padding:15px 30px;border-radius:999px;border:1.5px solid var(--ink);
  cursor:pointer;transition:background .2s,color .2s,transform .15s;
}
.btn:hover{background:var(--blush);border-color:var(--blush);color:var(--ink);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.on-dark{background:var(--blush);border-color:var(--blush);color:var(--ink)}
.btn.on-dark:hover{background:var(--paper);border-color:var(--paper)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- Topbar ---------- */
.topbar{
  background:var(--ink);color:var(--paper);
  font-size:.85rem;padding:8px 0;
}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar a{color:var(--paper);text-decoration:none}
.topbar a:hover{color:var(--blush)}
.topbar .portal{font-weight:700;color:var(--blush)}
@media (max-width:480px){.topbar .hours{display:none}}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:100;
  background:rgba(248,242,235,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{display:flex;align-items:baseline;gap:6px;text-decoration:none;line-height:1}
.brand .word{
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:2rem;
  color:var(--ink);letter-spacing:-.02em;
}
.brand svg{width:.95em;height:.95em;font-size:2rem;transform:translateY(.08em)}
nav.main{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
nav.main a{
  font-family:'Quicksand',sans-serif;font-weight:600;font-size:.95rem;
  color:var(--ink);text-decoration:none;position:relative;padding-block:6px;
}
nav.main a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2.5px;border-radius:2px;
  background:var(--blush);transform:scaleX(0);transform-origin:left;transition:transform .22s;
}
nav.main a:hover::after,nav.main a[aria-current="page"]::after{transform:scaleX(1)}
nav.main a.btn{padding:11px 22px;color:var(--paper)}
nav.main a.btn:hover{color:var(--ink)}
nav.main a.btn::after{display:none}
nav.main a.btn.ghost{color:var(--ink)}

.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;padding:10px;
}
.nav-toggle span{
  display:block;width:24px;height:2.5px;border-radius:2px;background:var(--ink);
  margin:5px 0;transition:transform .25s,opacity .2s;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(64px,10vw,130px) clamp(56px,8vw,100px);position:relative;overflow:hidden}
.hero .bg{
  position:absolute;inset:0;z-index:-1;
  background:url('/assets/img/hero-doctor.jpg') center 38%/cover no-repeat;
  /* living cinemagraph: SVG wind ripple + slow Ken Burns drift */
  filter:url(#hero-wind) saturate(1.18) contrast(1.04);
  transform:scale(1.06);
  animation:heroDrift 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{
  from{transform:scale(1.06)}
  to{transform:scale(1.13) translateX(-1.2%)}
}
/* unwarped copy masked over the doctor so the grass sways but he doesn't;
   identical background + animation keeps the two layers registered */
.hero .bg-still{
  position:absolute;inset:0;z-index:-1;
  background:url('/assets/img/hero-doctor.jpg') center 38%/cover no-repeat;
  filter:saturate(1.18) contrast(1.04);
  transform:scale(1.06);
  animation:heroDrift 26s ease-in-out infinite alternate;
  -webkit-mask-image:radial-gradient(ellipse 28% 47% at 69% 58%,#000 55%,transparent 97%);
  mask-image:radial-gradient(ellipse 28% 47% at 69% 58%,#000 55%,transparent 97%);
  will-change:transform;
}
.hero .veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,
    var(--paper) 0%,rgba(248,242,235,.97) 34%,
    rgba(248,242,235,.72) 55%,rgba(248,242,235,.22) 78%,rgba(248,242,235,.05) 100%);
}
@media (prefers-reduced-motion:reduce){
  .hero .bg{filter:saturate(1.18) contrast(1.04);animation:none;transform:none}
  .hero .bg-still{display:none}
}
.hero h1{
  font-size:clamp(2.3rem,6.5vw,4.6rem);max-width:17ch;margin-bottom:24px;
}
.hero h1 .line{display:block}
.hero .lede{margin-bottom:34px;color:var(--ink)}
.hero .chip{background:rgba(248,242,235,.85);backdrop-filter:blur(3px)}

/* Trust chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:38px}
.chip{
  font-family:'Quicksand',sans-serif;font-weight:600;font-size:.85rem;
  background:var(--paper-dim);border:1px solid var(--rule);border-radius:999px;
  padding:8px 18px;white-space:nowrap;
}

/* ---------- Five pillars feature ---------- */
.pillars-layout{
  display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(28px,4.5vw,72px);
  align-items:center;margin-top:34px;
}
.pillars-layout .pillars-wheel{margin:0 auto;width:min(620px,100%)}
.pillars-layout .pillar-cards{margin:0;max-width:none}
@media (min-width:901px){
  .pillar-node{width:124px}
  .pillar-node .disc{width:90px;height:90px}
  .pillar-node .disc svg{width:42px;height:42px}
  .pillar-node .lbl{font-size:.9rem}
}
@media (max-width:900px){
  .pillars-layout{grid-template-columns:1fr}
  .pillars-layout .pillar-cards{margin-top:26px}
}
.pillars-wheel{
  position:relative;width:min(560px,90vw);aspect-ratio:1;margin:30px auto 10px;
}
.pillars-wheel .ring{
  position:absolute;inset:9%;border:2px dashed var(--blush);border-radius:50%;opacity:.55;
}
.pillars-wheel .hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46%;aspect-ratio:1;background:var(--paper);
  border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;box-shadow:0 10px 40px rgba(73,68,65,.12);border:1px solid var(--rule);
}
.pillars-wheel .hub .word{font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(1.6rem,4.5vw,2.3rem);color:var(--ink)}
.pillars-wheel .hub svg{width:.95em;height:.95em;font-size:clamp(1.6rem,4.5vw,2.3rem)}
.pillars-wheel .hub .tag{font-size:clamp(.68rem,1.7vw,.85rem);color:var(--slate);font-weight:600;margin-top:4px;font-family:'Quicksand',sans-serif}
.pillar-node{
  position:absolute;left:50%;top:50%;width:98px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  transform:translate(-50%,-50%) translate(var(--nx),var(--ny));
}
.pillar-node .disc{
  width:74px;height:74px;border-radius:50%;background:#fff;
  border:2.5px solid var(--blush);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(73,68,65,.10);
}
.pillar-node.p1 .disc,.pillar-node.p3 .disc,.pillar-node.p5 .disc{border-color:var(--fynbos)}
.pillar-node .disc svg{width:34px;height:34px;stroke:var(--ink)}
.pillar-node .lbl{
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:.82rem;line-height:1.25;color:var(--ink);
}
/* pentagon positions (radius ≈ 41% of wheel width, container units) */
.pillars-wheel{container-type:inline-size}
.pillar-node.p1{--nx:0cqw;--ny:-41cqw}
.pillar-node.p2{--nx:39cqw;--ny:-12.7cqw}
.pillar-node.p3{--nx:24.1cqw;--ny:33.2cqw}
.pillar-node.p4{--nx:-24.1cqw;--ny:33.2cqw}
.pillar-node.p5{--nx:-39cqw;--ny:-12.7cqw}

/* ---- pillar hover interplay (wheel ⇄ rows) ---- */
.pillar-node .disc{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.pillar-node .lbl{transition:color .2s ease}
.pillars-wheel .ring{transition:opacity .3s ease}
.pillars-wheel:hover .ring{opacity:.9;animation:sbz-ring-spin 40s linear infinite}
@keyframes sbz-ring-spin{to{transform:rotate(360deg)}}
.pillars-wheel .hub{transition:transform .3s ease,box-shadow .3s ease}
.pillars-wheel:hover .hub{transform:translate(-50%,-50%) scale(1.03);box-shadow:0 14px 50px rgba(73,68,65,.18)}

/* hovering a node lights its disc… */
.pillar-node:hover .disc,.pillar-node.hl .disc{
  transform:scale(1.14);box-shadow:0 12px 30px rgba(73,68,65,.22);background:var(--blush-soft);
}
.pillar-node.p1:hover .disc,.pillar-node.p3:hover .disc,.pillar-node.p5:hover .disc,
.pillar-node.p1.hl .disc,.pillar-node.p3.hl .disc,.pillar-node.p5.hl .disc{
  background:var(--fynbos-tint);
}
.pillar-node:hover .lbl,.pillar-node.hl .lbl{color:var(--blush-deep)}
.pillar-node.p1:hover .lbl,.pillar-node.p3:hover .lbl,.pillar-node.p5:hover .lbl,
.pillar-node.p1.hl .lbl,.pillar-node.p3.hl .lbl,.pillar-node.p5.hl .lbl{color:var(--fynbos-deep)}

/* …and its matching row (and vice versa), via :has() */
.pillars-layout:has(.pillar-node.p1:hover) .pillar-card:nth-child(1),
.pillars-layout:has(.pillar-node.p2:hover) .pillar-card:nth-child(2),
.pillars-layout:has(.pillar-node.p3:hover) .pillar-card:nth-child(3),
.pillars-layout:has(.pillar-node.p4:hover) .pillar-card:nth-child(4),
.pillars-layout:has(.pillar-node.p5:hover) .pillar-card:nth-child(5),
.pillar-card:hover{
  transform:translateX(6px);box-shadow:0 10px 34px rgba(73,68,65,.14);
  background:#fff;border-color:transparent;
}
.pillars-layout:has(.pillar-card:nth-child(1):hover) .pillar-node.p1 .disc,
.pillars-layout:has(.pillar-card:nth-child(2):hover) .pillar-node.p2 .disc,
.pillars-layout:has(.pillar-card:nth-child(3):hover) .pillar-node.p3 .disc,
.pillars-layout:has(.pillar-card:nth-child(4):hover) .pillar-node.p4 .disc,
.pillars-layout:has(.pillar-card:nth-child(5):hover) .pillar-node.p5 .disc{
  transform:scale(1.14);box-shadow:0 12px 30px rgba(73,68,65,.22);
}
.pillars-layout:has(.pillar-card:nth-child(2):hover) .pillar-node.p2 .disc,
.pillars-layout:has(.pillar-card:nth-child(4):hover) .pillar-node.p4 .disc{background:var(--blush-soft)}
.pillars-layout:has(.pillar-card:nth-child(1):hover) .pillar-node.p1 .disc,
.pillars-layout:has(.pillar-card:nth-child(3):hover) .pillar-node.p3 .disc,
.pillars-layout:has(.pillar-card:nth-child(5):hover) .pillar-node.p5 .disc{background:var(--fynbos-tint)}
@media (prefers-reduced-motion:reduce){
  .pillars-wheel:hover .ring{animation:none}
  .pillar-node:hover .disc,.pillar-card:hover{transform:none}
}

/* stacked pillar cards */
.pillar-cards{display:grid;gap:16px;max-width:820px;margin:48px auto 0;counter-reset:pillar}
.pillar-card{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  background:#fff;border:1px solid var(--rule);border-radius:16px;
  padding:22px 26px;counter-increment:pillar;position:relative;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.pillar-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--blush);
}
.pillar-card:nth-child(odd)::before{background:var(--fynbos)}
.pillar-card .num{
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.9rem;
  color:var(--blush-deep);line-height:1;padding-top:2px;min-width:1.4em;
}
.pillar-card:nth-child(odd) .num{color:var(--fynbos-deep)}
.pillar-card h3{font-size:1.15rem;margin-bottom:6px}
.pillar-card p{color:var(--slate);font-size:1rem}

/* ---------- Imagery ---------- */
.photo{border-radius:18px;width:100%;height:auto;object-fit:cover;box-shadow:0 14px 44px rgba(73,68,65,.16)}
.dark .photo{box-shadow:0 14px 44px rgba(0,0,0,.35)}
.photo.tall{aspect-ratio:4/3}
.headshots{display:flex;gap:18px;margin:10px 0 6px}
.headshot{width:110px;height:110px;border-radius:50%;object-fit:cover;border:3px solid var(--blush)}
.headshot-wrap{text-align:center;font-family:'Quicksand',sans-serif;font-weight:600;font-size:.85rem;color:var(--slate)}
.headshot-wrap span{display:block;margin-top:8px}
.card .headshots .headshot{width:150px;height:150px}
.card .headshot-wrap span{font-size:.95rem;color:var(--ink)}

/* ---------- Split / feature sections ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.split.top{align-items:start}
.feature-list{list-style:none;display:grid;gap:14px;margin-top:20px}
.feature-list li{display:flex;gap:12px;align-items:flex-start}
.feature-list .x{color:var(--blush-deep);font-weight:800;font-family:'Quicksand',sans-serif;line-height:1.6;display:inline-block;transform:rotate(45deg)}
.dark .feature-list .x{color:var(--blush)}

/* ---------- Cards grid (services, teams, audiences) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px;margin-top:44px}
.card{
  background:#fff;border:1px solid var(--rule);border-radius:16px;
  padding:30px 28px;display:flex;flex-direction:column;gap:12px;
}
.dark .card{background:rgba(248,242,235,.06);border-color:var(--rule-dark)}
.card.cta{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.card.cta p{color:rgba(248,242,235,.82)}
.card.cta .btn{margin-top:auto;align-self:flex-start}
.card h3{font-size:1.25rem}
.card .focus{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);
  font-size:.95rem;color:var(--blush-deep);font-weight:700;font-family:'Quicksand',sans-serif;
}
.dark .card .focus{border-color:var(--rule-dark);color:var(--blush)}
.card .focus a{text-decoration:none;color:inherit}
.card .focus a:hover{text-decoration:underline}
.card ul{list-style:none;display:grid;gap:9px;color:var(--slate)}
.dark .card ul{color:rgba(248,242,235,.8)}
.card ul li{display:flex;gap:10px;align-items:flex-start;font-size:.98rem}
.card ul .x{color:var(--fynbos-deep);font-weight:800;font-family:'Quicksand',sans-serif;display:inline-block;transform:rotate(45deg)}
.dark .card ul .x{color:var(--fynbos-tint)}

/* balanced 5-card layout: 3 + 2 on wide screens */
@media (min-width:1000px){.cards.three{grid-template-columns:repeat(3,1fr)}}

/* full-width audience banner (new specialist practices) */
.banner-card{
  margin-top:22px;background:var(--ink);color:var(--paper);border-radius:16px;
  padding:clamp(26px,4vw,44px);display:grid;grid-template-columns:1fr auto;
  gap:clamp(18px,3vw,40px);align-items:center;
}
.banner-card h3{font-size:clamp(1.3rem,2.6vw,1.7rem);margin-bottom:8px}
.banner-card p{color:rgba(248,242,235,.82);max-width:60ch}
@media (max-width:760px){.banner-card{grid-template-columns:1fr}}

/* ---------- Credibility strip / stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px;text-align:center}
.stat .n{
  font-family:'Quicksand',sans-serif;font-weight:700;
  font-size:clamp(2.4rem,5vw,3.6rem);color:var(--blush);line-height:1.05;
}
.stat .d{font-size:.98rem;color:rgba(248,242,235,.8);margin-top:6px}

/* ---------- Quiet confidence list ---------- */
.quiet-list{list-style:none;display:grid;gap:4px;margin-block:26px;max-width:30ch}
.quiet-list li{
  font-family:'Quicksand',sans-serif;font-weight:600;
  font-size:clamp(1.15rem,2.4vw,1.5rem);padding:10px 0;border-bottom:1px solid var(--rule);
}
.dark .quiet-list li{border-bottom-color:var(--rule-dark)}
.quiet-list li:last-child{border-bottom:0}

/* ---------- Process timeline ---------- */
.timeline{position:relative;max-width:980px;margin:54px auto 0}
.timeline::before{
  content:'';position:absolute;left:50%;top:10px;bottom:10px;
  border-left:2px dashed var(--blush);transform:translateX(-1px);opacity:.55;
}
.anim-ready .timeline::before{
  clip-path:inset(0 0 100% 0);transition:clip-path 1.6s ease .2s;
}
.anim-ready .timeline:has(.tl-step.in)::before{clip-path:inset(0 0 0% 0)}
@media (prefers-reduced-motion:reduce){
  .anim-ready .timeline::before{clip-path:none;transition:none}
}
.tl-step{
  position:relative;display:grid;grid-template-columns:1fr 84px 1fr;
  align-items:center;margin-bottom:clamp(18px,3vw,34px);
}
.tl-node{
  grid-column:2;justify-self:center;width:58px;height:58px;border-radius:50%;
  background:#fff;border:2.5px solid var(--blush);display:flex;align-items:center;justify-content:center;
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.5rem;color:var(--blush-deep);
  box-shadow:0 6px 20px rgba(73,68,65,.10);transition:transform .25s ease,box-shadow .25s ease;
  position:relative;z-index:1;
}
.tl-step:nth-child(odd) .tl-node{border-color:var(--fynbos);color:var(--fynbos-deep)}
.tl-card{
  background:#fff;border:1px solid var(--rule);border-radius:16px;padding:24px 28px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.tl-step:hover .tl-card{transform:translateY(-3px);box-shadow:0 12px 34px rgba(73,68,65,.14)}
.tl-step:hover .tl-node{transform:scale(1.12);box-shadow:0 10px 26px rgba(73,68,65,.18)}
.tl-card h3{font-size:1.15rem;margin-bottom:6px}
.tl-card p{color:var(--slate);font-size:.98rem}
.tl-when{
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blush-deep);white-space:nowrap;
}
.tl-step:nth-child(odd) .tl-when{color:var(--fynbos-deep)}
/* odd steps: card left, marker right — even steps mirrored */
.tl-step:nth-child(odd) .tl-card{grid-column:1;grid-row:1}
.tl-step:nth-child(odd) .tl-when{grid-column:3;grid-row:1;justify-self:start;padding-left:6px}
.tl-step:nth-child(even) .tl-card{grid-column:3;grid-row:1}
.tl-step:nth-child(even) .tl-when{grid-column:1;grid-row:1;justify-self:end;padding-right:6px}
.tl-end{
  position:relative;z-index:1;display:table;margin:6px auto 0;
  background:var(--ink);color:var(--blush-soft);border-radius:999px;
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:.85rem;
  letter-spacing:.14em;text-transform:uppercase;padding:12px 26px;
}
@media (max-width:760px){
  .timeline::before{left:28px}
  .tl-step{grid-template-columns:56px 1fr;margin-bottom:20px}
  .tl-node{grid-column:1;grid-row:1;align-self:start;width:48px;height:48px;font-size:1.2rem}
  .tl-step:nth-child(odd) .tl-card,.tl-step:nth-child(even) .tl-card{grid-column:2;grid-row:1}
  .tl-step:nth-child(odd) .tl-when,.tl-step:nth-child(even) .tl-when{
    grid-column:2;grid-row:2;justify-self:start;padding:8px 0 0 4px;
  }
}

/* ---------- Values ---------- */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:40px}
.value{
  border-radius:16px;padding:30px 28px;background:var(--paper-dim);border:1px solid var(--rule);
}
.value:nth-child(1){background:var(--blush-soft)}
.value:nth-child(2){background:var(--paper-dim)}
.value:nth-child(3){background:var(--fynbos-tint)}
.value h3{font-size:1.3rem;margin-bottom:10px}
.value p{color:var(--ink);opacity:.85;font-size:1rem}

/* ---------- Moments gallery ---------- */
.moments{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin-top:44px}
.moment{background:#fff;border:1px solid var(--rule);border-radius:16px;overflow:hidden}
.moment.soon{background:transparent;border:1.5px dashed var(--blush)}
.moment .ph{
  aspect-ratio:4/3;background:var(--paper-dim);display:flex;align-items:center;justify-content:center;
  color:var(--slate);font-family:'Quicksand',sans-serif;font-weight:600;font-size:.9rem;
}
.moment .ph svg{width:44px;height:44px;stroke:var(--blush);opacity:.8}
.moment .ph-img{aspect-ratio:4/3;width:100%;object-fit:cover}
.moment figcaption{padding:16px 20px;font-size:.98rem;color:var(--slate)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,70px);align-items:start;margin-top:10px}
.contact-aside{display:grid;gap:26px}
.contact-aside .block h3{font-size:1.05rem;margin-bottom:8px}
.contact-aside .block p{color:var(--slate);font-size:1rem}
.contact-aside .block a{color:var(--blush-deep);font-weight:700;text-decoration:none}
.contact-aside .block a:hover{text-decoration:underline}

form.sbz-lead-form{display:grid;gap:18px}
form.sbz-lead-form .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form.sbz-lead-form label{
  display:grid;gap:7px;font-family:'Quicksand',sans-serif;font-weight:600;font-size:.9rem;
}
form.sbz-lead-form input,form.sbz-lead-form select,form.sbz-lead-form textarea{
  font-family:'Nunito Sans',sans-serif;font-size:1rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--rule);border-radius:12px;
  padding:13px 16px;width:100%;
}
form.sbz-lead-form input:focus,form.sbz-lead-form select:focus,form.sbz-lead-form textarea:focus{
  border-color:var(--fynbos);
}
.req-star{color:var(--blush-deep)}
.req-note{font-size:.85rem;color:var(--slate);margin-top:-6px}
.sbz-hp{position:absolute;left:-9999px;height:0;width:0;overflow:hidden}
.form-status{min-height:1.4em;font-weight:700;font-size:.95rem}
.form-status.busy{color:var(--slate)}
.form-status.err{color:#A03B2E}
.consent{font-size:.85rem;color:var(--slate)}

/* ---------- Contact modal (shared component) ---------- */
dialog.sbz-modal{
  border:0;border-radius:20px;background:var(--paper);color:var(--ink);
  width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 48px);
  padding:clamp(24px,4vw,40px);margin:auto;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
dialog.sbz-modal::backdrop{background:rgba(58,53,50,.6);backdrop-filter:blur(3px)}
.sbz-modal-close{
  position:sticky;top:0;float:right;z-index:5;margin:-6px -6px 0 0;
  width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--rule);background:var(--paper-dim);color:var(--ink);
  font-size:1rem;cursor:pointer;line-height:1;
}
.sbz-modal-close:hover{background:var(--blush);border-color:var(--blush)}
.sbz-modal-head{margin-bottom:20px;padding-right:44px}
.sbz-modal-head h2{font-size:clamp(1.5rem,3.5vw,2rem);margin-bottom:8px}
.sbz-modal-head p{color:var(--slate);font-size:.98rem}
.sbz-modal-alt{margin-top:18px;font-size:.9rem;color:var(--slate);text-align:center}
@media (max-width:560px){
  dialog.sbz-modal{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  dialog.sbz-modal form.sbz-lead-form .two{grid-template-columns:1fr}
}

/* ---------- Page-foot CTA band ---------- */
.foot-cta{text-align:center}
.foot-cta h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:14px}
.foot-cta p{color:rgba(248,242,235,.8);max-width:52ch;margin:0 auto 30px}
.tagline{
  font-family:'Quicksand',sans-serif;font-weight:700;color:var(--blush);
  letter-spacing:.06em;margin-top:34px;font-size:1.05rem;
}

/* ---------- Footer ---------- */
footer.site{background:var(--ink);color:var(--paper);padding-top:clamp(50px,7vw,80px)}
footer.site .cols{
  display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:clamp(26px,4vw,56px);
  padding-bottom:clamp(40px,6vw,64px);
}
footer.site h4{
  font-size:.85rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--blush);margin-bottom:16px;
}
footer.site ul{list-style:none;display:grid;gap:10px}
footer.site a{color:rgba(248,242,235,.85);text-decoration:none;font-size:.98rem}
footer.site a:hover{color:var(--blush)}
footer.site .brand .word{color:var(--paper);font-size:1.7rem}
footer.site .fbrand p{color:rgba(248,242,235,.75);font-size:.98rem;margin-top:14px;max-width:34ch}
footer.site .fbrand .svc{
  font-family:'Quicksand',sans-serif;font-weight:600;font-size:.88rem;
  color:var(--fynbos-tint);margin-top:14px;
}
.legal{
  border-top:1px solid var(--rule-dark);background:var(--ink-deep);
  padding:18px 0;font-size:.85rem;color:rgba(248,242,235,.6);
}
.legal .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.legal a{color:rgba(248,242,235,.75);text-decoration:none}
.legal a:hover{color:var(--blush)}

/* ---------- Utility page header (privacy / thank-you) ---------- */
header.site.simple .wrap{min-height:70px}

/* ---------- Motion ---------- */
.anim-ready [data-rise]{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.anim-ready [data-rise].in{opacity:1;transform:none}
.anim-ready .hero h1 .line{opacity:0;transform:translateY(30px);transition:opacity .55s ease,transform .55s ease}
.anim-ready .hero h1 .line.in{opacity:1;transform:none}
.anim-ready .rule-draw{transform:scaleX(0);transform-origin:left;transition:transform .8s ease}
.anim-ready .rule-draw.in{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .anim-ready [data-rise],.anim-ready .hero h1 .line{opacity:1;transform:none;transition:none}
  .anim-ready .rule-draw{transform:none;transition:none}
}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .nav-toggle{display:block}
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    flex-direction:column;align-items:stretch;padding:18px var(--pad) 26px;gap:4px;
  }
  nav.main.open{display:flex}
  nav.main a{padding:12px 0;font-size:1.05rem;border-bottom:1px solid var(--rule)}
  nav.main a[aria-current="page"]{color:var(--blush-deep);font-weight:800}
  nav.main a::after{display:none}
  nav.main a.btn{margin-top:14px;text-align:center;border-bottom:0}
  /* utility pages have no toggle — keep their nav visible */
  header.site:not(:has(.nav-toggle)) nav.main{
    display:flex;position:static;flex-direction:row;border:0;padding:0;background:none;
  }
  /* photo hero: heavier veil so charcoal text stays readable on small screens;
     wind filter + drift off for battery/perf */
  .hero .veil{background:rgba(248,242,235,.93)}
  .hero .bg{filter:saturate(1.15);animation:none;transform:none}
  .hero .bg-still{display:none}
}
@media (max-width:760px){
  .split,.contact-grid,form.sbz-lead-form .two{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr 1fr}
  .pillar-node{width:84px}
  .pillar-node .disc{width:58px;height:58px}
  .pillar-node .disc svg{width:26px;height:26px}
  .pillar-node .lbl{font-size:.72rem}
}
@media (max-width:700px){
  body{line-height:1.7}
  section{padding-block:clamp(48px,10vw,80px)}
  footer.site .cols{grid-template-columns:1fr}
  .pillars-wheel{width:min(460px,96vw)}
}
@media (max-width:480px){
  /* wheel gets cramped — keep labels >= .72rem, tuck side nodes in */
  .pillar-node.p2{--nx:36cqw}
  .pillar-node.p5{--nx:-36cqw}
  .pillar-node.p3{--nx:22.5cqw}
  .pillar-node.p4{--nx:-22.5cqw}
}