/* ===== ARBOR VITAE WELLNESS — SHARED SYSTEM (editorial) ===== */
:root{
  --grn:#38C41A; --grn-d:#2AA30F; --fst:#1B4A27; --fst2:#102E1A; --fst3:#0A2011;
  --chr:#4A4A4A; --crm:#EFE8D8; --amb:#C4703C; --amb-d:#A85A2B; --sge:#7EB878; --lin:#E4E7DE; --pg:#F2F1EC;
  --sand:#FFFFFF; --clay:#C2703F; --clay-t:#E8E0D3; --sage-t:#E3EDDD; --amber-t:#ECE6DA; --mist:#E6EBE4; --sky-t:#DDE7E2;
  --ink:#25302A; --mut:#8A8574;
  --serif:'Newsreader',Georgia,serif; --rh:'Raleway',sans-serif; --rb:'DM Sans',sans-serif;
  --wrap:1320px; --gut:44px;
  --sh-sm:0 2px 10px rgba(16,46,26,.06); --sh:0 10px 34px rgba(16,46,26,.10); --sh-lg:0 26px 64px rgba(16,46,26,.18);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--pg);font-family:var(--rb);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;}
/* paper grain atmosphere */
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
img{display:block;max-width:100%;}
a{color:var(--fst);text-decoration:none;transition:color .2s;}
a:hover{color:var(--grn-d);}
h1,h2,h3,h4{color:var(--fst);line-height:1.06;text-wrap:balance;}
p{text-wrap:pretty;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);}
::selection{background:var(--grn);color:#fff;}

/* ---- eyebrow / kicker ---- */
.eye{font-family:var(--rh);font-size:12px;font-weight:800;letter-spacing:3.5px;text-transform:uppercase;color:var(--amb);display:inline-flex;align-items:center;gap:12px;}
.eye::before{content:"";width:30px;height:1.5px;background:var(--amb);display:inline-block;}
.eye.c::before{display:none;}
.dark .eye,.vband .eye{color:var(--sge);}
.dark .eye::before,.vband .eye::before{background:var(--sge);}

/* ---- buttons ----
   Two things here are load-bearing; changing either reintroduces a bug that
   was measured, not guessed.

   1. Every variant carries the SAME 1.5px border, transparent unless a variant
      recolours it. Height is auto, so a border on .btn-out only would be added
      to the box rather than absorbed (box-sizing:border-box reclaims a border
      only when an explicit height is set) — .btn-out rendered 57.9px against
      .btn-grn's 55.9px, so paired buttons sat 3px out of alignment.
   2. justify-content:center, so a shared width can be imposed by the row
      without the label sticking to the left edge. */
.btn{font-family:var(--rh);font-weight:800;font-size:16px;letter-spacing:.3px;border:1.5px solid transparent;border-radius:4px;padding:16px 30px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .2s var(--ease),box-shadow .25s,background .2s;white-space:nowrap;}
.btn-grn{background:var(--grn);color:#fff;box-shadow:0 10px 26px rgba(56,196,26,.26);}
.btn-grn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 36px rgba(56,196,26,.36);background:var(--grn-d);}
.btn-out{background:transparent;color:var(--fst);border-color:rgba(27,74,39,.35);}
.btn-out:hover{background:var(--fst);color:#fff;border-color:var(--fst);}
.btn-lt{background:#fff;color:var(--fst);}
.btn-lt:hover{color:var(--fst);transform:translateY(-2px);box-shadow:var(--sh);}

/* Paired-button rows are equalised in each page's own inline <style>, not here.
   Those blocks load after this file and already declare these containers, so a
   container rule at this specificity would be silently dead. Search any page for
   "btn-row" to find it. */

/* ---- header ---- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(27,74,39,.1);box-shadow:0 1px 0 rgba(27,74,39,.04),0 6px 20px rgba(16,46,26,.04);}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:9px var(--gut);display:flex;align-items:center;gap:28px;}  /* 9px pad + 88px logo = same 106px bar as the old 15px + 76px */
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand img{height:88px;width:auto;}
.brand-txt{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--fst);line-height:.95;letter-spacing:-.3px;}
.brand-txt span{display:block;font-family:var(--rh);font-size:12px;font-weight:800;letter-spacing:3.5px;color:var(--amb);text-transform:uppercase;margin-top:4px;}
.nav{display:flex;gap:2px;margin-left:auto;}
.nav a{font-family:var(--rh);font-weight:700;font-size:16px;color:var(--fst);padding:9px 16px;border-radius:4px;position:relative;}
.nav a:hover{color:var(--grn-d);}
.nav a.active{color:var(--amb);}
.nav a.active::after{content:"";position:absolute;bottom:3px;left:16px;right:16px;height:1.5px;background:var(--amb);}
.hdr-cta{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.hdr-cta .ph{font-family:var(--rh);font-weight:800;font-size:14px;color:var(--fst);white-space:nowrap;line-height:1.1;}
.hdr-cta .ph small{display:block;font-family:var(--rb);font-weight:500;font-size:12px;color:var(--mut);letter-spacing:.4px;text-transform:uppercase;margin-top:2px;}
.hdr-cta .btn{font-size:18px;padding:14px 26px;}  /* bigger label, trimmed pad: button height ~unchanged */
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;min-width:44px;flex-shrink:0;padding:0;}  /* 44x44: the sole mobile nav control, previously 36x28 */
.burger span{width:24px;height:2px;background:var(--fst);border-radius:2px;transition:.2s;}

/* ---- sections ---- */
section{position:relative;}
/* hero band — distinct from the flat nav so they don't blend */
.hero,.phero{background:linear-gradient(180deg,#E2EAE0 0%,#EBEDE5 46%,#F2F1EC 100%);}
.pad{padding:110px 0;}
.pad-s{padding:76px 0;}
.dark{background:var(--fst);color:rgba(255,255,255,.8);}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff;}
.cream{background:linear-gradient(155deg,#F2ECDE 0%,#ECE5D3 52%,#F3EEE0 100%);position:relative;overflow:hidden;}
.cream::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(126,184,120,.13),transparent 70%);top:-220px;right:-160px;animation:drift 20s ease-in-out infinite alternate;pointer-events:none;}
.cream::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(196,112,60,.08),transparent 70%);bottom:-200px;left:-140px;animation:drift 26s ease-in-out infinite alternate-reverse;pointer-events:none;}
.cream>*{position:relative;z-index:1;}
@keyframes drift{to{transform:translate(-50px,44px) scale(1.12);}}
@media(prefers-reduced-motion:reduce){.cream::before,.cream::after{animation:none;}}
.linen{background:var(--lin);}
.claybg{background:var(--clay-t);}
.sandbg{background:var(--sand);}
.mistbg{background:var(--mist);}
.white{background:#fff;}

/* editorial section heading with index number */
.shead{max-width:680px;margin-bottom:60px;}
.shead .eye{margin-bottom:20px;}
.shead h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4.2vw,44px);line-height:1.04;letter-spacing:-1px;margin-bottom:18px;}
.shead h2 em{font-style:italic;color:var(--amb);}
.shead p{font-size:18px;color:var(--chr);max-width:600px;}
.dark .shead p{color:rgba(255,255,255,.6);}
.shead.center{max-width:720px;margin-left:auto;margin-right:auto;text-align:center;}
.shead.center .eye{justify-content:center;}
.idx{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--amb);opacity:.8;}

/* ---- cards ---- */
.card{background:var(--sand);border-radius:4px;padding:36px;box-shadow:var(--sh-sm);border:1px solid rgba(27,74,39,.08);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:rgba(56,196,26,.28);}

/* chips */
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--rb);font-weight:600;font-size:14px;padding:8px 16px;border-radius:50px;background:rgba(27,74,39,.06);color:var(--fst);}
.chip.amb{background:rgba(196,112,60,.12);color:var(--amb-d);}

/* ---- footer ---- */
.ftr{background:var(--fst3);color:rgba(255,255,255,.58);padding:40px 0 20px;}
.ftr-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:28px;margin-bottom:24px;}
.ftr h4{color:#fff;font-family:var(--rh);font-size:12px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:10px;}
.ftr .brand-txt{color:#fff;}
.ftr a{color:rgba(255,255,255,.58);font-size:14px;display:block;padding:6px 0;margin-bottom:0;}  /* 6px is a desktop-pointer size; the 44px tap-target floor is restored
     at touch widths in the max-width:860px block below — keep both in sync */
.ftr a:hover{color:var(--sge);}
.ftr .fp{font-size:14px;line-height:1.7;color:rgba(255,255,255,.58);}
.ftr .fp strong{color:#fff;font-weight:600;}
.ftr-bot{border-top:1px solid rgba(255,255,255,.1);padding-top:16px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.38);}
.ftr-bot .disc{max-width:640px;line-height:1.6;}
.ftr-rate{margin-top:16px;text-align:center;}
.ftr-rate a{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:50px;border:1px solid rgba(255,255,255,.16);font-size:14px;color:rgba(255,255,255,.75);}
.ftr-rate a:hover{border-color:var(--sge);color:#fff;}
.ftr-rate .fstars{color:#F5A623;letter-spacing:2px;line-height:1;}
.ftr-rate strong{color:#fff;font-weight:700;}
.ftr-rate .fsee{color:var(--sge);font-weight:600;}

/* ---- reveal + stagger ---- */
/* Reveal-on-scroll opts IN when JS is present (html.js set by the inline
   <head> script on every page). Without JS the content simply shows —
   never gate visibility on a script loading. */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
html.js .rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none;}}

/* ===== RESPONSIVE ===== */
@media(min-width:1700px){:root{--wrap:1460px;}}
@media(max-width:1024px){
  :root{--gut:32px;}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:36px;}
}
@media(max-width:860px){
  .nav,.hdr-cta .ph{display:none;}
  .burger{display:flex;}
  .hdr-in{gap:14px;justify-content:space-between;}  /* burger flush to the right gutter; logo left, CTA between */
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--pg);padding:14px var(--gut) 22px;gap:2px;border-bottom:1px solid rgba(27,74,39,.12);box-shadow:var(--sh);}
  .nav.open a{padding:13px 8px;font-size:18px;border-bottom:1px solid rgba(27,74,39,.06);}
  .nav.open a.active::after{display:none;}
  .ftr a{padding:12px 0;}  /* restore the 44px tap-target floor on touch widths */
  .pad{padding:80px 0;}
  .pad-s{padding:56px 0;}
  .shead{margin-bottom:44px;}
}
@media(max-width:600px){
  :root{--gut:22px;}
  /* The header row is brand + Book-a-Visit + burger, all flex-shrink:0, and at 390px
     it only fits if the pieces are budgeted together: 64px logo (~141px wide) +
     tightened CTA padding below + 44px burger + gaps + gutters ~= 385px. If you grow
     any one of these, re-measure at a 390px viewport before shipping -- overflow here
     was a real bug once. Bar height stays ~86px: 11px pad + 64px logo = 15px + 56px. */
  .brand img{height:64px;}
  .hdr-in{padding:11px var(--gut);}
  .hdr-cta .btn{font-size:17px;padding:12px 15px;}
  .pad{padding:60px 0;}
  .ftr-grid{grid-template-columns:1fr;gap:30px;}
  .btn{padding:14px 24px;}
  .card{padding:28px;}
}