/* KVA self-hosted fonts — Fraunces + Inter variable woff2 (latin subset), from Google Fonts.
   Replaces the third-party fonts.googleapis.com / fonts.gstatic.com requests, so visitor
   IPs are never sent to Google and the page has zero render-blocking cross-origin CSS. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/fraunces.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 500;font-display:swap;src:url(fonts/fraunces-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* =========================================================================
   Kuranda Village Accountancy — "Tablelands editorial"
   Warm paper + deep forest + emerald. Fraunces display, Inter text.
   The fern mark is used as bold botanical artwork. No generic icon-tiles.
   ========================================================================= */
:root{
  /* Unified design tokens (final values; earlier per-layer overrides folded in). */
  --paper:#FAFAF7; --surface:#FFFFFF; --ink:#16241D; --sage:#5A655C;
  --forest:#0E2A20; --forest-2:#12382A;
  --green:#049F77; --green-strong:#046E54; --green-bright:#06B488;
  --on-forest:#EDE7D8; --line:#E7E4DB; --line-forest:rgba(237,231,216,.16);
  --error:#B42318;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --max:1180px; --pad:clamp(22px,5vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.04;letter-spacing:-.015em;color:var(--ink);font-optical-sizing:auto}
img{max-width:100%;display:block}
a{color:var(--green-strong);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--green-strong);outline-offset:3px;border-radius:2px}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--green);color:var(--ink);padding:12px 18px;font-weight:600;z-index:200}
.skip-link:focus{left:0}

/* kicker — small-caps label with a leading rule */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--green-strong)}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.eyebrow.on-forest{color:var(--green-bright)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;font-size:15px;border-radius:999px;padding:13px 26px;border:1px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap;line-height:1}
.btn-primary{background:var(--green);color:#08251C}
.btn-primary:hover{background:var(--green-bright);text-decoration:none;transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.btn-ghost{background:transparent;color:var(--on-forest);border-color:var(--line-forest)}
.btn-ghost:hover{border-color:var(--on-forest);text-decoration:none}
.btn-lg{padding:16px 32px;font-size:16px}

/* ---- floating nav (pill) ---- */
.nav{position:sticky;top:14px;z-index:100;padding:0 20px;margin-top:14px}
.nav-inner{max-width:1180px;margin:0 auto;height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 14px 0 24px;background:rgba(251,248,241,.78);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--line);border-radius:999px;box-shadow:0 12px 34px -16px rgba(14,42,32,.45);transition:.22s}
.nav.scrolled .nav-inner{background:rgba(251,248,241,.95);box-shadow:0 16px 40px -16px rgba(14,42,32,.5)}
.brand{display:flex;align-items:center}
.brand:hover{text-decoration:none}
.logo{height:28px;width:auto;display:block}
.logo--white{filter:brightness(0) invert(1)}
.nav-links{display:flex;gap:26px;align-items:center;list-style:none}
.nav-links a{color:var(--ink);font-weight:500;font-size:15px}
.nav-links a:hover{color:var(--green-strong);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--green-strong)}
.nav-cta{display:flex;align-items:center;gap:18px}
.nav-phone{font-weight:700;color:var(--ink);font-size:15px}
.nav-phone:hover{color:var(--green-strong);text-decoration:none}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.2s}

/* ---- hero (editorial, asymmetric) ---- */
.hero{border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center;padding:72px 0 84px}
.hero-copy h1{font-size:clamp(44px,6.4vw,82px);font-weight:500;margin:20px 0 24px;letter-spacing:-.025em}
.hero-copy .lead{font-size:20px;color:var(--sage);max-width:520px}
.hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.trust{margin-top:28px;font-size:13px;letter-spacing:.04em;color:var(--sage);text-transform:uppercase}
.trust b{color:var(--ink);font-weight:600}
.hero-art{position:relative;background:var(--forest);border-radius:12px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end;padding:30px}
.hero-art::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 90% at 72% 18%,rgba(6,180,136,.30),transparent 58%)}
.leaf-art{position:absolute;background:url(leaf.svg) center/contain no-repeat;pointer-events:none}
.hero-art .leaf-art{top:-8%;right:-14%;width:82%;aspect-ratio:1;opacity:.92;transform:rotate(-7deg)}
.hero-art figcaption{position:relative;z-index:1;color:var(--on-forest);font-family:var(--display);font-size:19px;font-style:italic;max-width:60%}

/* ---- forest stat strip ---- */
.stripe{background:var(--forest);color:var(--on-forest)}
.stripe-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:40px 0}
.stripe .stat{padding:0 28px;border-left:1px solid var(--line-forest)}
.stripe .stat:first-child{border-left:0;padding-left:0}
.stripe .n{font-family:var(--display);font-size:42px;font-weight:500;color:#fff;line-height:1}
.stripe .l{margin-top:8px;font-size:14px;color:#A9BBB1}

/* ---- sections ---- */
section{padding:92px 0}
.section-head{max-width:640px;margin-bottom:8px}
.section-head.center{margin:0 auto 40px;text-align:center}
.section-head h2{font-size:clamp(32px,4.2vw,52px);font-weight:500;margin:16px 0 14px;letter-spacing:-.02em}
.section-head p{color:var(--sage);font-size:18px}
.bg-forest{background:var(--forest);color:var(--on-forest)}
.bg-surface{background:var(--surface)}
.lead-p{font-size:18px;color:var(--sage);max-width:560px}

/* ---- editorial index (services) ---- */
.index{list-style:none;margin-top:36px;border-bottom:1px solid var(--line)}
.index li{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:baseline;padding:30px 4px;border-top:1px solid var(--line);transition:.18s}
.index li:hover{background:linear-gradient(90deg,rgba(4,159,119,.05),transparent 70%);padding-left:14px}
.index .num{font-family:var(--display);font-size:clamp(26px,3.4vw,40px);font-weight:400;color:var(--green-strong);line-height:1;font-feature-settings:"tnum"}
.index .it h3{font-size:clamp(20px,2.4vw,27px);font-weight:500;margin-bottom:6px}
.index .it p{color:var(--sage);font-size:16px;max-width:560px}
.index .go{font-size:22px;color:var(--green-strong);transition:.18s;align-self:center}
.index li:hover .go{transform:translateX(6px)}
.index a{color:inherit;display:contents}

/* ---- split (why us / about) ---- */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.split ul{list-style:none;margin-top:24px;display:grid;gap:14px}
.split li{display:flex;gap:13px;font-size:16.5px;color:var(--ink)}
.split li svg{flex:none;width:20px;height:20px;stroke:var(--green-strong);fill:none;stroke-width:2.2;margin-top:4px}
/* art panel (stands in for a real photo) */
.photo{position:relative;background:var(--forest);border-radius:12px;overflow:hidden;min-height:380px;display:flex;align-items:flex-end;padding:28px;color:var(--on-forest)}
.photo::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 28% 12%,rgba(6,180,136,.26),transparent 56%)}
.photo .leaf-art{top:-10%;right:-16%;width:74%;aspect-ratio:1;opacity:.88;transform:rotate(8deg)}
.photo figcaption,.photo span{position:relative;z-index:1;font-family:var(--display);font-style:italic;font-size:16px;opacity:.92}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}

/* ---- cards (flat, editorial — used on clients) ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);margin-top:36px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:transparent;border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:30px 28px}
.grid-3 .card:nth-child(3n){border-right:0}
.card h3{font-size:21px;font-weight:500;margin-bottom:8px}
.card p{color:var(--sage);font-size:15.5px}

/* ---- service rows (services.html) ---- */
.svc-row{display:grid;grid-template-columns:48px 1fr;gap:26px;padding:34px 0;border-bottom:1px solid var(--line);align-items:start}
.svc-row:first-of-type{border-top:1px solid var(--line)}
.ico{width:auto;height:auto;background:none;display:block;margin:0}
.ico svg{width:30px;height:30px;stroke:var(--green-strong);fill:none;stroke-width:1.6}
.svc-row h3{font-size:25px;font-weight:500;margin-bottom:8px}
.svc-row p{color:var(--sage);font-size:16.5px;max-width:640px}
.svc-row .who{margin-top:12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-strong);font-weight:600}

/* ---- team ---- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}
.team .card{border:1px solid var(--line);border-radius:10px;padding:30px;background:var(--surface)}
.avatar{width:88px;height:88px;border-radius:50%;background:var(--forest);color:var(--green-bright);display:grid;place-items:center;font-family:var(--display);font-weight:500;font-size:30px;margin-bottom:20px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.team .card h3{font-size:20px;font-weight:500;margin-bottom:2px}
.team .role{color:var(--green-strong);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.team .bio{color:var(--sage);font-size:14.5px;margin-top:12px}
.ph{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);border:1px dashed var(--line);padding:4px 10px;border-radius:999px;margin-top:14px}

/* ---- testimonial ---- */
.quote{position:relative;max-width:900px;margin:0 auto;text-align:center;padding:0 12px}
.quote .mark{font-family:var(--display);font-size:110px;line-height:.6;color:var(--green);opacity:.35;height:54px;display:block}
.quote p.big{font-family:var(--display);font-size:clamp(24px,3.2vw,38px);font-weight:500;line-height:1.28;letter-spacing:-.01em;color:var(--ink);margin-top:10px}
.quote .who{margin-top:26px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--sage)}

/* ---- FAQ ---- */
.faq{max-width:860px;margin:36px auto 0;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:26px 0;font-family:var(--display);font-weight:500;font-size:21px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--green-strong);font-size:28px;font-weight:300;line-height:1;flex:none}
details[open] summary::after{content:"\2212"}
details .a{padding:0 0 26px;color:var(--sage);font-size:16.5px;max-width:720px}
.bg-forest details{border-color:var(--line-forest)} .bg-forest summary{color:var(--on-forest)} .bg-forest .a{color:#A9BBB1} .bg-forest .faq{border-color:var(--line-forest)}

/* ---- form ---- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:38px}
.field{margin-bottom:20px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:8px}
.field .req{color:var(--green-strong)}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px 15px;min-height:50px}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-strong);box-shadow:0 0 0 3px rgba(4,159,119,.16)}
.hp{position:absolute;left:-9999px}
.form-note{font-size:13px;color:var(--sage);margin-top:10px}

/* ---- contact info ---- */
.contact{background:var(--forest);color:var(--on-forest);position:relative;overflow:hidden}
.contact .leaf-art{bottom:-22%;left:-12%;width:46%;aspect-ratio:1;opacity:.14}
.contact-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.contact h2{font-size:clamp(32px,4vw,50px);color:#fff;font-weight:500;margin-bottom:16px}
.contact .sub{color:#B7C7BE;font-size:18px;max-width:440px}
.contact-actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.info{display:grid;gap:18px}
.info .row{display:flex;gap:14px;align-items:flex-start}
.info .row svg{flex:none;width:22px;height:22px;stroke:var(--green-bright);fill:none;stroke-width:1.7;margin-top:2px}
.info .row .k{color:#94A89E;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.info .row .v{color:#fff;font-weight:600;font-size:16px}
.info .row .v a{color:#fff}
.info-light .row svg{stroke:var(--green-strong)}
.info-light .row .k{color:var(--sage)}
.info-light .row .v{color:var(--ink)}
.info-light .row .v a{color:var(--ink)}

/* ---- callout ---- */
.callout{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:10px;padding:26px 30px}
.callout h3{font-size:19px;font-weight:500;margin-bottom:6px}
.callout p{color:var(--sage);font-size:15.5px}

/* ---- map ---- */
.map{border-radius:12px;overflow:hidden;border:1px solid var(--line);min-height:280px;background:var(--surface);display:grid;place-items:center;color:var(--sage);font-size:14px;text-align:center;padding:24px}

/* ---- footer ---- */
footer{background:var(--forest);color:#A9BBB1;padding:56px 0 44px;position:relative;overflow:hidden}
footer .leaf-art{top:-30%;right:-6%;width:30%;aspect-ratio:1;opacity:.10}
.foot-top{position:relative;z-index:1;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:30px;align-items:flex-start}
.foot-links{display:flex;gap:24px;flex-wrap:wrap;list-style:none}
.foot-links a{color:var(--on-forest);font-weight:500}
.foot-links a:hover{color:#fff}
.compliance{position:relative;z-index:1;border-top:1px solid var(--line-forest);padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:#8FA298}

/* ---- misc ---- */
.center{text-align:center}

/* ---- motion + print ---- */
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
@media print{
  .nav,.nav-toggle,.hero-actions,.contact-actions,.foot-links,.leaf-art{display:none!important}
  body,.hero,.contact,.bg-forest,.stripe,footer{background:#fff!important;color:#000!important}
  h1,h2,h3,.contact h2,.stripe .n{color:#000!important}
  a{color:#000!important;text-decoration:underline}
  section{padding:24px 0!important}
}

/* ---- responsive ---- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:36px;padding:48px 0 60px}
  .hero-art{min-height:300px}
  .split,.contact-inner{grid-template-columns:1fr;gap:36px}
  .stripe-grid{grid-template-columns:repeat(2,1fr);gap:28px 0}
  .stripe .stat:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:760px){
  .nav-links{position:absolute;top:72px;left:20px;right:20px;flex-direction:column;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 18px;gap:2px;display:none;box-shadow:0 18px 40px -16px rgba(14,42,32,.4)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;font-size:17px;border-bottom:1px solid var(--line)}
  .nav-links li:last-child a{border-bottom:0}
  .nav-toggle{display:block}
  .nav-cta .btn{display:none}
  .grid-3{grid-template-columns:1fr}
  .grid-3 .card{border-right:0}
  .team-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .nav-phone{display:none}
  .index li{grid-template-columns:auto 1fr;gap:18px}
  .index .go{display:none}
  .svc-row{grid-template-columns:1fr}
}

/* ---- inner page hero (forest, editorial) ---- */
.page-hero{background:var(--forest);color:var(--on-forest);position:relative;overflow:hidden}
.page-hero-inner{position:relative;z-index:1;padding:84px 0 86px;max-width:720px}
.page-hero h1{font-size:clamp(38px,5vw,64px);font-weight:500;color:#fff;margin:16px 0 18px;letter-spacing:-.02em}
.page-hero p{font-size:19px;color:#B7C7BE;max-width:600px}
.eyebrow.on-ink{color:var(--green-bright)}
@media (max-width:760px){.page-hero-inner{padding:60px 0 64px}}

/* ============================================================
   Refinements v2 — whiter bg · menu lockup+font · more leaf · spacing
   (token overrides folded into :root at the top of this file)
   ============================================================ */

/* floating bar — rounded rectangle, roomier, whiter */
.nav{top:16px;margin-top:16px;padding:0 24px}
.nav-inner{max-width:1140px;height:72px;gap:26px;padding:0 18px 0 24px;border-radius:20px;
  background:rgba(255,255,255,.72);box-shadow:0 16px 42px -20px rgba(14,42,32,.40)}
.nav.scrolled .nav-inner{background:rgba(255,255,255,.93)}
/* menu logo: leaf mark + serif wordmark */
.brand{gap:13px;align-items:center}
.brand-mark{display:block;width:34px;height:34px;flex:none;background:url(leaf.svg) center/contain no-repeat}
.brand-name{font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1;color:var(--ink);white-space:nowrap;letter-spacing:-.005em}
/* different font for the menu — Fraunces links */
.nav-links{gap:26px}
.nav-links a{font-family:var(--display);font-weight:500;font-size:16.5px}

/* hero — tighten the top, calmer rhythm */
.hero-grid{align-items:center;padding:48px 0 78px;gap:58px}
.hero-copy h1{margin:18px 0 22px}
.hero-art{min-height:404px;border-radius:14px}

/* MORE LEAF ----------------------------------------------------- */
/* testimonial: the quote glyph becomes the fern */
.quote .mark{font-size:0;color:transparent;opacity:1;width:48px;height:48px;margin:0 auto 18px;background:url(leaf.svg) center/contain no-repeat}
/* faint fern watermark in the forest stat strip */
.stripe{position:relative;overflow:hidden}
.stripe::after{content:"";position:absolute;top:-48%;right:-2%;width:300px;height:300px;background:url(leaf.svg) center/contain no-repeat;opacity:.07;pointer-events:none}

/* SPACING throughout -------------------------------------------- */
section{padding:88px 0}
.stripe-grid{padding:48px 0}
.stripe .stat{padding:0 34px}
.stripe .stat:first-child{padding-left:0}
.index li{padding:28px 8px}
.section-head{margin-bottom:12px}
.split{gap:60px}

@media (max-width:980px){ .hero-grid{padding:32px 0 58px} .brand-name{display:none} }
@media (max-width:760px){ .nav-links{top:86px} }

/* ============================================================
   v3 — fluid spacing (not fixed) + professional motion
   (--pad folded into :root at the top of this file)
   ============================================================ */
section{padding:clamp(58px,8vw,104px) 0}
.hero-grid{align-items:start;padding:clamp(28px,4.5vw,56px) 0 clamp(48px,7vw,90px);gap:clamp(32px,5vw,58px)}
.hero-art{min-height:300px;align-self:stretch}
.stripe-grid{padding:clamp(38px,5vw,54px) 0}
.section-head{margin-bottom:clamp(10px,1.6vw,18px)}
.split{gap:clamp(36px,5vw,64px)}
.form-card{padding:clamp(26px,3vw,40px)}

/* scroll reveals — native, 60fps (transform/opacity only), progressive enhancement */
html.reveal-on [data-rv]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
html.reveal-on [data-rv].in{opacity:1;transform:none}
html.reveal-on .hero-art[data-rv]{transform:translateY(22px) scale(.99)}
html.reveal-on .hero-art[data-rv].in{transform:none}
/* slow, calm drift on the hero fern */
@media (prefers-reduced-motion:no-preference){ .hero-art .leaf-art{animation:leafdrift 16s ease-in-out infinite} }
@keyframes leafdrift{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-16px)}}
/* never animate for users who ask not to */
@media (prefers-reduced-motion:reduce){ html.reveal-on [data-rv]{opacity:1!important;transform:none!important} }

/* ============================================================
   v4 — responsive fixes: nav fits on tablet, hero double-padding
   ============================================================ */
.hero{padding:0}                /* hero-grid supplies the padding; drop inherited section padding */
.nav-phone{white-space:nowrap}
@media (max-width:1024px){
  .nav-toggle{display:block}
  .nav-cta .btn{display:none}
  .nav-links{position:absolute;top:84px;left:24px;right:24px;flex-direction:column;align-items:stretch;
    background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px 18px;gap:2px;display:none;
    box-shadow:0 18px 40px -16px rgba(14,42,32,.42)}
  .nav-links.open{display:flex}
  .nav-links a{font-family:var(--display);padding:13px 2px;font-size:18px;border-bottom:1px solid var(--line)}
  .nav-links li:last-child a{border-bottom:0}
}

/* ============================================================
   v5 — glass surfaces + lightswind-style motion
   ============================================================ */
/* frosted glass caption chips over forest/photo panels */
.hero-art figcaption,.photo figcaption{
  position:relative;z-index:3;width:fit-content;max-width:min(90%,400px);
  background:rgba(10,28,22,.34);-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  border:1px solid rgba(237,231,216,.20);border-radius:14px;padding:14px 18px;
  box-shadow:0 10px 34px -14px rgba(0,0,0,.55)}
.photo img{z-index:1}
/* glass callouts on light surfaces */
.callout{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.65);box-shadow:0 12px 34px -18px rgba(14,42,32,.28)}
/* aurora: slow drifting glow on the forest panels */
@media (prefers-reduced-motion:no-preference){
  .hero-art::before,.contact::before{animation:aurora 20s ease-in-out infinite alternate}
}
@keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-7%,5%,0) scale(1.14)}}

/* ============================================================
   v6 — FIX: hero lost its side padding below max-width (mobile/iPad)
   .hero-grid is also .container; its `padding: x 0 y` shorthand was
   zeroing the container's horizontal gutters. Restore them explicitly.
   ============================================================ */
.hero-grid{padding-inline:var(--pad);padding-block:clamp(30px,4.5vw,56px) clamp(46px,7vw,84px)}
/* show the wordmark in the tablet hamburger bar (room exists); hide only on phones */
@media (max-width:1024px){ .brand-name{display:inline-block} }
@media (max-width:560px){ .brand-name{display:none} }

/* v6.1 — same gutter fix for inner-page heroes (.page-hero-inner is also .container) */
.page-hero-inner{padding-inline:var(--pad);padding-block:clamp(56px,8vw,86px)}

/* v6.2 — inner hero was a centered 720px block (misaligned with page); make it a normal full container, left-aligned. Paragraph stays readable via .page-hero p max-width. */
.page-hero-inner{max-width:var(--max)}

/* v6.3 — hamburger pinned to the right (space-between was centring it because the
   collapsed CTA still occupied a slot). Push CTA + toggle to the right edge. */
@media (max-width:1024px){
  .nav-cta{order:4;margin-left:auto}
  .nav-toggle{order:5}
}

/* ============================================================
   v7 — nav phone in display font; hamburger until 1200px
   (Book button was overflowing 1024–1180); nicer fallback art
   ============================================================ */
.nav-phone{font-family:var(--display);font-weight:600;letter-spacing:0;font-size:16px}
.nav-links{gap:24px}
.nav-links a{font-size:16px}
.brand-name{font-size:16px}
@media (max-width:1200px){
  .nav-toggle{display:block;order:5}
  .nav-cta{order:4;margin-left:auto}
  .nav-cta .btn{display:none}
  .nav-links{position:absolute;top:84px;left:24px;right:24px;flex-direction:column;align-items:stretch;
    background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px 18px;gap:2px;display:none;
    box-shadow:0 18px 40px -16px rgba(14,42,32,.42)}
  .nav-links.open{display:flex}
  .nav-links a{font-family:var(--display);font-weight:500;font-size:18px;padding:13px 2px;border-bottom:1px solid var(--line)}
  .nav-links li:last-child a{border-bottom:0}
}
/* fallback art panel reads as intentional brand art (until a real photo is added) */
.photo .leaf-art{top:-8%;right:-14%;width:84%;aspect-ratio:1;opacity:.9;transform:rotate(-7deg)}

/* v8 — show the practice name in the menu on phones too (it was hidden ≤560).
   Wraps to two lines beside the fern, mirroring the logo lockup. */
@media (max-width:560px){
  .brand-name{display:inline-block;white-space:normal;max-width:168px;font-size:13.5px;line-height:1.08;letter-spacing:0}
}
@media (max-width:360px){
  .brand-name{font-size:12px;max-width:140px}
}

/* v9 — more glass: frost the contact info block on the dark sections */
.contact .info{background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);border:1px solid rgba(237,231,216,.16);border-radius:16px;padding:24px 26px}

/* v10 — when a real photo fills a .photo panel, hide the decorative fern and
   swap the green tint for a readable bottom scrim behind the caption */
.photo:has(img) .leaf-art{display:none}
.photo:has(img)::before{z-index:2;background:linear-gradient(to top,rgba(8,20,16,.74) 0%,rgba(8,20,16,.12) 42%,transparent 62%)}
.photo:has(img) figcaption{z-index:3}
/* faint seamless fern texture on the light alternating sections */
.bg-surface{position:relative;isolation:isolate}
.bg-surface::after{content:"";position:absolute;inset:0;background:url(images/fern-pattern.jpg) repeat;background-size:300px;opacity:.04;pointer-events:none;z-index:-1}

/* ============================================================
   v11 — float the dark bands as rounded cards + richer footer
   ============================================================ */
/* stat strip: floating rounded card instead of edge-to-edge */
.stripe{background:transparent;padding:clamp(34px,5vw,64px) 0}
.stripe::after{display:none}
.stripe-grid{background:var(--forest);border-radius:22px;padding:clamp(34px,4.5vw,52px) clamp(26px,4vw,48px);position:relative;overflow:hidden}
/* contact CTA: floating rounded card */
.contact{background:transparent;padding:clamp(40px,6vw,80px) 0;overflow:visible}
.contact::before{display:none}
.contact>.leaf-art{display:none}
.contact-inner{background:var(--forest);border-radius:26px;padding:clamp(38px,5vw,64px) clamp(26px,4.5vw,56px);position:relative;overflow:hidden}
.contact-inner::after{content:"";position:absolute;bottom:-26%;left:-8%;width:42%;aspect-ratio:1;background:url(leaf.svg) center/contain no-repeat;opacity:.12;pointer-events:none}

/* ---- richer footer (multi-column) ---- */
footer{background:var(--forest);color:#A9BBB1;padding:clamp(56px,7vw,84px) 0 34px;position:relative;overflow:hidden}
.foot-leaf{position:absolute;top:-18%;right:-4%;width:34%;aspect-ratio:1;background:url(leaf.svg) center/contain no-repeat;opacity:.08;pointer-events:none;display:block}
.foot-main{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr 2fr;gap:clamp(32px,5vw,72px);padding-bottom:38px;border-bottom:1px solid var(--line-forest)}
.foot-brand .logo{height:30px;margin-bottom:18px}
.foot-brand p{color:#A9BBB1;font-size:15px;line-height:1.6;max-width:330px;margin:0 0 22px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.foot-col h3{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.foot-col ul{list-style:none;display:grid;gap:10px;margin:0}
.foot-col a{color:#A9BBB1;font-size:15px}
.foot-col a:hover{color:#fff;text-decoration:none}
.foot-contact li{color:#A9BBB1;font-size:14.5px;line-height:1.5}
.foot-contact a{color:#A9BBB1}
footer .compliance{position:relative;z-index:1;margin-top:26px;border:0;padding-top:0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:#8FA298}
@media (max-width:820px){.foot-main{grid-template-columns:1fr;gap:34px}.foot-cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-cols{grid-template-columns:1fr}}

/* v12 — hero art panel can hold a real photo (fern hides behind it, caption stays legible) */
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;border-radius:inherit}
.hero-art:has(img) .leaf-art{display:none}
.hero-art:has(img)::before{z-index:2;background:linear-gradient(to top,rgba(8,20,16,.72) 0%,rgba(8,20,16,.12) 46%,transparent 66%);animation:none}
.hero-art:has(img) figcaption{z-index:3}

/* ============================================================
   v13 — liquid glass · unified footer · menu fix · smoother index
   ============================================================ */
/* ---- Apple-style "liquid glass" material ---- */
.nav-inner{background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.4));
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 14px 40px -18px rgba(14,42,32,.45),inset 0 1px 0 rgba(255,255,255,.7)}
.nav.scrolled .nav-inner{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.66))}
.hero-art figcaption,.photo figcaption{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.3);box-shadow:0 10px 34px -14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35)}

/* ---- mobile menu: anchored to the pill, liquid-glass, smooth ---- */
@media (max-width:1200px){
  .nav-inner{position:relative}
  .nav-links{position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(251,248,241,.78));
    -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
    border:1px solid rgba(255,255,255,.6);border-radius:18px;padding:8px;
    box-shadow:0 26px 54px -22px rgba(14,42,32,.55),inset 0 1px 0 rgba(255,255,255,.7);
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.99);pointer-events:none;
    transition:opacity .22s ease,transform .24s cubic-bezier(.2,.7,.2,1),visibility .22s}
  .nav-links.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .nav-links li{width:100%}
  .nav-links a{display:block;font-family:var(--display);font-weight:500;font-size:17px;padding:13px 16px;border:0;border-radius:11px}
  .nav-links a:hover,.nav-links a[aria-current="page"]{background:rgba(4,159,119,.1);color:var(--green-strong);text-decoration:none}
  .nav-links li:last-child a{border:0}
}

/* ---- index: smooth hover (transform, not padding) ---- */
.index li{transition:background-color .25s ease,opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.index li:hover{background:linear-gradient(90deg,rgba(4,159,119,.06),transparent 72%)}
.index .it,.index .go{transition:transform .25s ease}
.index li:hover .it{transform:translateX(8px)}
.index li:hover .go{transform:translateX(10px)}

/* ---- unified footer: CTA band + columns + bottom bar ---- */
.foot-cta{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center;padding-bottom:clamp(34px,4vw,48px);margin-bottom:clamp(34px,4vw,46px);border-bottom:1px solid var(--line-forest)}
.foot-cta h2{font-family:var(--display);font-size:clamp(28px,3.6vw,44px);font-weight:500;color:#fff;margin:12px 0;letter-spacing:-.02em}
.foot-cta p{color:#B7C7BE;font-size:17px;max-width:420px;margin:0 0 22px}
.foot-cta .actions{display:flex;gap:14px;flex-wrap:wrap}
.foot-contact-card{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(237,231,216,.16);border-radius:18px;padding:26px 28px;display:grid;gap:15px}
.foot-contact-card .row{display:flex;gap:13px;align-items:flex-start}
.foot-contact-card svg{flex:none;width:20px;height:20px;stroke:var(--green-bright);fill:none;stroke-width:1.7;margin-top:2px}
.foot-contact-card .k{color:#94A89E;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.foot-contact-card .v{color:#fff;font-weight:600;font-size:15px}
.foot-contact-card .v a{color:#fff}
@media (max-width:820px){.foot-cta{grid-template-columns:1fr;gap:26px}}

/* v14 — mobile menu panel must be opaque to stay readable (glass stays on the pill) */
@media (max-width:1200px){
  .nav-links{background:var(--surface);box-shadow:0 26px 54px -22px rgba(14,42,32,.55),0 2px 0 rgba(14,42,32,.04),inset 0 1px 0 rgba(255,255,255,.8)}
}

/* v15 — float the footer as a rounded card (paper gutter all around); center the hero caption so it never clips the photo edge */
footer{margin:clamp(14px,2.4vw,26px) clamp(14px,5vw,120px) clamp(16px,3vw,30px);border-radius:clamp(22px,3.2vw,34px)}
.hero-art{justify-content:center}
.hero-art figcaption{max-width:min(86%,360px);text-align:center}
@media (max-width:560px){ footer{margin:14px 12px 16px;border-radius:22px} }

/* ============================================================
   v16 — unify inner-page heroes on the dark palm-leaf panel
   (the "Let's talk" treatment) + wide photo bands for real imagery
   ============================================================ */
/* Every .page-hero now wears the forest + frond-leaf graphic, like Contact */
.page-hero{background-image:linear-gradient(rgba(8,20,16,.56),rgba(8,20,16,.72)),url(images/frond.jpg);background-size:cover;background-position:center right;background-color:var(--forest)}
/* standalone full-width photograph (rounded, floating, glass caption from v5) */
.photo.wide{width:100%;min-height:0;aspect-ratio:16/7;align-items:flex-end;border-radius:clamp(16px,2.4vw,26px)}
.photo.wide img{object-position:center 38%}
@media (max-width:760px){ .photo.wide{aspect-ratio:4/3} }
/* a touch more polish on the inner-hero copy width so it sits clear of the leaf */
.page-hero p{max-width:560px}

/* ============================================================
   v17 — nav pill must stay readable over dark sections.
   The liquid-glass pill was translucent enough that the dark
   footer (and its CTA/buttons) ghosted through when scrolled.
   Keep a light frosted feel up top; go near-opaque once scrolled.
   ============================================================ */
.nav-inner{background:linear-gradient(180deg,rgba(251,248,241,.88),rgba(251,248,241,.82))}
.nav.scrolled .nav-inner{background:linear-gradient(180deg,rgba(251,248,241,.985),rgba(251,248,241,.965))}

/* v18 — TPB 'Registered' badge in the footer brand column */
.tpb-badge{width:90px;height:90px;margin-top:20px;display:block;filter:drop-shadow(0 8px 20px rgba(0,0,0,.28))}

/* v19 — inline form error note */
.form-error{margin-top:16px;color:#9a2a2a;font-size:14.5px;font-weight:600}

/* v20 — mobile fix: the long email address is an unbreakable string that forced the
   footer contact card (and the whole CTA grid column) wider than the phone viewport,
   clipping content on the right. Let long links wrap, and let flex/grid children shrink
   below their content width. Affects the footer contact card and the contact-page info. */
.foot-contact-card .v, .foot-contact-card .v a,
.info .row .v, .info .row .v a{overflow-wrap:anywhere}
.foot-contact-card .row > div, .info .row > div{min-width:0}
.foot-cta > *{min-width:0}

/* v21 — progressive frosted top: once scrolled, content softly blurs and fades into
   the page background beneath the floating nav pill. Gated on .scrolled (set by JS at
   scrollY>8) so there's no haze at rest. Sits below the nav (z-100), above content. */
body::before{
  content:"";position:fixed;top:0;left:0;right:0;height:120px;z-index:90;pointer-events:none;
  -webkit-backdrop-filter:blur(15px) saturate(140%);backdrop-filter:blur(15px) saturate(140%);
  background:linear-gradient(to bottom,rgba(250,250,247,.32),rgba(250,250,247,0) 82%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 66%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 66%,transparent 100%);
  opacity:0;transition:opacity .35s ease;
}
html.scrolled body::before{opacity:1}
@media (prefers-reduced-motion:reduce){body::before{transition:none}}

/* v22 — blog: index cards + article typography + CTA + disclaimer (all from existing tokens) */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px 26px 24px;color:inherit;transition:box-shadow .25s ease,transform .25s ease}
.post-card:hover{box-shadow:0 14px 34px -18px rgba(14,42,32,.28);transform:translateY(-2px);text-decoration:none}
.post-card .cat{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-strong)}
.post-card h3{font-size:21px;font-weight:500;margin:12px 0 8px;color:var(--ink)}
.post-card p{color:var(--sage);font-size:15.5px;flex:1}
.post-card .meta{margin-top:16px;font-size:13px;color:var(--sage)}
.post-card .more{margin-top:12px;color:var(--green-strong);font-weight:600;font-size:14px}
.post-card:hover .more{text-decoration:underline}
@media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}}
/* article */
.post-back{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--green-strong);margin-bottom:6px}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:0 0 26px;font-size:14px;color:var(--sage)}
.post-meta .cat{color:var(--green-strong);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.post-body{max-width:760px}
.post-body h2{font-size:clamp(24px,3vw,32px);font-weight:500;margin:38px 0 12px;letter-spacing:-.01em}
.post-body h3{font-size:20px;font-weight:600;margin:26px 0 8px}
.post-body p{font-size:17.5px;line-height:1.7;color:var(--ink);margin:0 0 16px;max-width:720px}
.post-body ul,.post-body ol{margin:0 0 18px 22px;display:grid;gap:8px;max-width:700px}
.post-body li{font-size:17px;line-height:1.6;color:var(--ink)}
.post-body a{color:var(--green-strong);text-decoration:underline}
.post-body strong{font-weight:600;color:var(--ink)}
.post-body blockquote{margin:22px 0;padding:6px 0 6px 22px;border-left:3px solid var(--green);color:var(--sage);font-family:var(--display);font-style:italic;font-size:20px;line-height:1.4}
.post-cta{margin:38px 0 6px;max-width:760px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:12px;padding:24px 28px}
.post-cta h3{font-family:var(--display);font-weight:500;font-size:22px;margin-bottom:8px;color:var(--ink)}
.post-cta p{color:var(--sage);margin-bottom:16px;font-size:16px}
.disclaimer{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--sage);max-width:760px;line-height:1.6}

/* v23 — Blog adds a 7th nav item; tighten the inline (desktop) nav so all items fit the 1140px bar */
@media (min-width:1201px){
  .nav-inner{gap:18px}
  .nav-links{gap:20px}
  .nav-links a{font-size:15px}
  .nav-cta{gap:14px}
  .nav-phone{font-size:15px}
}

/* v24 — utilities (replace inline-style h2s), form radios/checks, related articles */
.h2-lg{font-size:clamp(30px,4vw,46px);font-weight:500;margin:14px 0 12px}
.h2-md{font-size:clamp(26px,3.2vw,34px);font-weight:500;margin:12px 0 12px}
.split-start{align-items:start}
.opt{font-weight:400;color:var(--sage);font-size:13px}
.radio-row{border:0;padding:0;margin:0}
.radio-row legend{font-weight:600;font-size:14px;margin-bottom:8px;padding:0}
.radio-row .opts{display:flex;gap:20px;flex-wrap:wrap}
.radio-row label{display:inline-flex;align-items:center;gap:8px;font-size:16px;color:var(--ink);cursor:pointer}
.radio-row input{width:18px;height:18px;accent-color:var(--green-strong)}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.check-grid label{display:flex;align-items:center;gap:8px;font-size:15.5px;color:var(--ink);cursor:pointer}
.check-grid input{width:18px;height:18px;accent-color:var(--green-strong)}
@media(max-width:560px){.check-grid{grid-template-columns:1fr}}
.related{margin:34px 0 0;max-width:760px;border-top:1px solid var(--line);padding-top:22px}
.related h3{font-family:var(--display);font-weight:500;font-size:20px;margin-bottom:10px}
.related ul{list-style:none;display:grid;gap:8px;margin:0}
.related a{color:var(--green-strong);font-weight:600;font-size:16px}

/* v25 — Client portal CTA: header link beside "Book a consultation" (desktop); on mobile it
   collapses like the Book button and is reached via the footer + the Contact portal section. */
.nav-portal{font-family:var(--display);font-weight:500;font-size:14.5px;color:var(--ink);white-space:nowrap}
.nav-portal:hover{color:var(--green-strong);text-decoration:none}
@media (min-width:1201px){ .nav-inner{gap:14px} .nav-links{gap:16px} .nav-links a{font-size:14.5px} .nav-cta{gap:12px} .brand-name{font-size:15px} }
@media (max-width:1200px){ .nav-portal{display:none} }