@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-var-latin.woff2') format('woff2')}
/* 🔴 Inter was named in --sans from the start but NEVER LOADED — no @font-face, no font link.
   Every visitor saw a fallback, and which fallback decided how heavy the site looked. On Daniel's
   Mac the body copy rendered genuinely bold while a Linux headless browser showed a normal 400,
   which is why "too bold" could not be reproduced from the test machine: same CSS, different font.
   Declaring the face here also OVERRIDES any locally-installed font called "Inter", so what a
   machine happens to have installed can no longer change the design. */

/* V2: edge-to-edge site sections with a centered, responsive content column. */
:root{
  --intro-overlap:78px;--forest:#243c32;--forest-2:#183029;--moss:#61785f;--sage:#aebba6;--mist:#dfe8e1;
  --cream:#f7f1e6;--paper:#fffdf8;--sun:#f1b838;--clay:#c66d4f;--ink:#203029;--muted:#67736d;
  --line:rgba(36,60,50,.16);--shadow:0 26px 70px rgba(28,48,39,.14);--radius:30px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;width:100%;max-width:100%;overflow-x:hidden}body{margin:0;width:100%;max-width:100%;overflow-x:hidden;color:var(--ink);background:var(--paper);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;width:100%;height:auto}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}
.skip{position:fixed;left:12px;top:-100px;background:#fff;padding:10px 14px;z-index:9999;border-radius:8px}.skip:focus{top:12px}
.demo-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:8px;padding:8px;background:rgba(25,43,35,.9);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.16);border-radius:999px;box-shadow:0 16px 46px rgba(0,0,0,.24)}
.demo-label{color:#fff;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:0 8px}.demo-btn{border:0;border-radius:999px;padding:10px 16px;background:transparent;color:rgba(255,255,255,.72);font-weight:800;white-space:nowrap}.demo-btn.active{background:var(--sun);color:#1d2a22}.demo-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.site-version{display:none;width:100%;min-height:100vh;overflow:visible}.site-version.active{display:block}.site-shell{width:100%;max-width:none;margin:0;background:var(--paper);min-height:100vh;box-shadow:none;overflow:visible}
.container{width:min(1160px,calc(100% - 40px));max-width:1160px;margin-inline:auto}.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:850}.eyebrow:before{content:"";width:24px;height:2px;background:currentColor}.display{font-family:var(--serif);font-weight:500;letter-spacing:-.045em;line-height:.96;margin:0}.body-lg{font-size:clamp(17px,1.45vw,20px);line-height:1.7}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:14px 21px;font-weight:850;border:1px solid transparent;transition:.25s ease}.btn:hover{transform:translateY(-2px)}.btn svg{width:17px}.btn-primary{background:var(--forest);color:#fff}.btn-primary:hover{background:var(--forest-2)}.btn-sun{background:var(--sun);color:#213126}.btn-outline{border-color:currentColor}.pill-row{display:flex;flex-wrap:wrap;gap:9px}.pill{border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:13px;background:rgba(255,255,255,.55)}
.logo{display:inline-flex;align-items:center;gap:12px;font-weight:800}.logo-mark{width:44px;height:44px;position:relative;display:grid;place-items:center}.logo-mark:before,.logo-mark:after{content:"";position:absolute;border-radius:70% 20% 70% 20%;transform:rotate(-35deg)}.logo-mark:before{width:29px;height:38px;background:var(--sun);left:4px;top:3px}.logo-mark:after{width:22px;height:31px;background:var(--forest);right:1px;bottom:2px;opacity:.92}.logo-text strong{font-family:var(--serif);font-size:21px;display:block;line-height:.9}.logo-text small{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.12em;margin-top:5px;opacity:.7}
.nav{height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:20}.nav-links{display:flex;align-items:center;gap:25px;font-size:14px;font-weight:750}.nav-links>a:not(.btn):after{content:"";display:block;width:0;height:2px;background:currentColor;transition:.2s}.nav-links>a:hover:after{width:100%}.menu-btn{display:none;border:1px solid currentColor;background:transparent;border-radius:999px;padding:9px 12px;font-weight:750}
.section{padding:110px 0}.section-title{font-size:clamp(42px,6vw,78px);max-width:900px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:52px}.section-head p{max-width:480px;margin:0;color:var(--muted)}
.organic-frame{position:relative;overflow:hidden}.organic-frame img{height:100%;object-fit:cover}.organic-frame:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);pointer-events:none}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px}.card h3{font-family:var(--serif);font-size:27px;line-height:1.08;margin:15px 0 10px}.card p{color:var(--muted);margin:0}.icon{width:49px;height:49px;border-radius:17px;background:var(--mist);display:grid;place-items:center;color:var(--forest)}.icon svg{width:25px;height:25px}
.fees{display:grid;grid-template-columns:1.1fr 1fr;gap:42px;align-items:start}.fee-table{border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#fff}.fee-row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line);align-items:center}.fee-row:last-child{border:0}.fee-row strong{font-family:var(--serif);font-size:21px}.fee-row span{font-weight:850}.fee-note{font-size:13px;color:var(--muted);margin-top:16px}
.quote{font-family:var(--serif);font-size:clamp(34px,5vw,70px);line-height:1.05;letter-spacing:-.035em}.footer{padding:75px 0 110px}.footer-grid{display:grid;grid-template-columns:1.4fr .7fr .8fr 1fr;gap:40px}.footer h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px}.footer a{display:block;margin:8px 0;color:inherit;opacity:.78}.footer small{opacity:.65}.legal{border-top:1px solid currentColor;margin-top:48px;padding-top:22px;opacity:.68;font-size:12px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}

/* Concept 1 — Rooted */
.v1{--ink:#24382f;--muted:#65736b}.check{width:22px;height:22px;background:var(--sun);border-radius:50%;display:grid;place-items:center;font-size:12px}.credentials{border-left:4px solid var(--sun);padding-left:20px;margin:30px 0}.credentials strong{display:block}

/* Concept 2 — Canopy */
.v2{--ink:#1f3028;--muted:#607069}.v2 .site-shell{background:#f4f0e6}.v2-hero{min-height:920px;position:relative;color:#fff;background-image:linear-gradient(90deg,rgba(15,32,25,.84) 0%,rgba(15,32,25,.58) 44%,rgba(15,32,25,.1) 75%),url('img/e1c0f96176.webp');background-size:cover;background-position:center}.v2-hero:after{content:"";position:absolute;inset:auto 0 0;height:220px;background:linear-gradient(transparent,#f4f0e6)}.v2 .nav{color:#fff;border-bottom:1px solid rgba(255,255,255,.2)}.v2 .logo-mark:after{background:#fff}.v2-hero-copy{position:relative;z-index:2;padding-top:110px;max-width:760px}.v2-hero h1{font-size:clamp(66px,9vw,125px)}.v2-hero h1 span{color:var(--sun);font-style:italic}.v2-hero p{max-width:620px;color:rgba(255,255,255,.82)}.v2-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:35px}.v2 .btn-glass{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);backdrop-filter:blur(10px);color:#fff}.v2-hero-note{position:absolute;z-index:3;right:6%;bottom:175px;width:270px;padding:24px;background:rgba(249,245,235,.88);backdrop-filter:blur(16px);color:var(--forest);border-radius:28px 28px 8px 28px}.v2-hero-note strong{font-family:var(--serif);font-size:24px;display:block;line-height:1.1;margin-bottom:8px}.v2-intro{position:relative;z-index:4;margin-top:calc(var(--intro-overlap) * -1)}.v2-intro-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border-radius:32px;overflow:hidden;box-shadow:var(--shadow);background:rgba(36,60,50,.13)}.v2-intro-card{background:#fffdf7;padding:30px 24px;min-height:180px}.v2-intro-card strong{font-family:var(--serif);font-size:24px;display:block;margin:15px 0 5px}.v2-intro-card small{color:var(--muted)}.v2-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:stretch}.v2-story-copy{background:var(--forest);color:#fff;border-radius:42px;padding:64px}.v2-story-copy h2{font-size:clamp(48px,6vw,82px)}.v2-story-copy p{color:rgba(255,255,255,.72)}.v2-story-photo{height:720px;border-radius:42px}.v2-paths{background:#dfe7dc}.v2-path-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}.v2-path{grid-column:span 12;border-radius:35px;padding:35px;min-height:310px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.v2-path:nth-child(1){grid-column:span 5;background:var(--sun)}.v2-path:nth-child(2){grid-column:span 7;color:#fff;background:linear-gradient(0deg,rgba(22,44,34,.72),rgba(22,44,34,.08)),url('img/cffb90c267.webp') center/cover}.v2-path:nth-child(3){grid-column:span 7;color:#fff;background:linear-gradient(0deg,rgba(22,44,34,.74),rgba(22,44,34,.14)),url('img/b008d36803.webp') center/cover}.v2-path:nth-child(4){grid-column:span 5;background:#f4e5d6}.v2-path:nth-child(5){grid-column:span 12;color:#fff;background:var(--forest)}.v2-path h3{font-family:var(--serif);font-size:36px;line-height:1;margin:0 0 10px}.v2-path p{margin:0;max-width:520px}.v2-path .tag{position:absolute;top:24px;left:24px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.8);color:var(--forest);font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:900}.v2-fees-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:start}.v2-fees h2{font-size:clamp(48px,6vw,78px)}.v2 .fee-table{border-radius:12px 38px 12px 38px}.v2-quote{position:relative;min-height:600px;background:linear-gradient(90deg,rgba(23,49,38,.82),rgba(23,49,38,.18)),url('img/9ca5cab489.webp') center/cover;color:#fff;display:flex;align-items:center}.v2-quote .quote{max-width:850px}.v2-quote p{max-width:550px;color:rgba(255,255,255,.8)}.v2 .footer{background:#152921;color:#fff}

/* Concept 3 — Sunrise Studio */
.v3{--ink:#2d3b34;--muted:#6d766f}@keyframes marquee{to{transform:translateX(-50%)}}
.v3-services-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:start}.round-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}

@media(max-width:980px){
 .nav-links{position:absolute;top:78px;left:0;right:0;padding:24px;background:var(--paper);color:var(--forest);border-radius:22px;box-shadow:var(--shadow);display:none;flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.menu-btn{display:block}.nav-links .btn{width:100%}
 .v2 .nav-links{background:#173026;color:#fff}.v1-hero-grid,.v3-hero-grid,.v1-about-grid,.v1-support-grid,.fees,.v2-story-grid,.v2-fees-grid,.v3-services-grid,.v3-about-grid,.v3-cancer-box{grid-template-columns:1fr}.v2-intro-grid{grid-template-columns:1fr 1fr}.v2-path:nth-child(n){grid-column:span 12}.v2-story-photo{height:620px}.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
 .container{width:min(100% - 28px,1160px)}.section{padding:78px 0}.section-head{display:block}.section-head p{margin-top:18px}.demo-bar{bottom:10px;max-width:calc(100% - 16px);overflow:auto}.demo-label{display:none}.demo-btn{padding:9px 12px;font-size:12px}.nav{height:74px}.logo-text small{display:none}.logo-mark{width:38px;height:38px}.nav-links{top:67px}.v1-hero h1,.v2-hero h1,.v3-hero h1{font-size:clamp(52px,17vw,76px)}.grid-3{grid-template-columns:1fr}.v2-hero{min-height:830px}.v2-hero-copy{padding-top:75px}.v2-hero-note{left:14px;right:14px;bottom:120px;width:auto}.v2-intro{margin-top:-45px}.v2-intro-grid{grid-template-columns:1fr}.v2-story-copy{padding:42px 28px}.v2-story-photo{height:480px}.v2-path{min-height:340px;padding:28px}.v2-quote{min-height:520px}.footer-grid{grid-template-columns:1fr}.legal{padding-bottom:50px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

/* ══ Rising Minds · Canopy hero fixes (2026-08-10) ═══════════════════════════════════════════
   1. "A gentle first step" was position:absolute at bottom:120px and landed on top of the two
      CTA buttons — measured on a 390px viewport: the note occupied y 551-710 and the buttons
      581-706, so the primary call to action was completely covered, not merely crowded.
      Fixed by returning the note to normal flow below the buttons on narrow screens. On desktop
      it stays absolute, where there is room for it.
   2. A blob-shaped window in the dark hero veil, so the tree reads through it. The hero dims the
      photo with a left-to-right gradient painted on the section itself, so there is no separate
      overlay layer to cut a hole in. `backdrop-filter: brightness()` solves that directly: it
      brightens everything already painted behind the element — gradient and photo together —
      within whatever shape the element takes. The shape is the exact border-radius used for
      Erica's portrait on the Rooted concept, so the two pages rhyme.                              */
.v2-tree-window{
  position:absolute; z-index:2; pointer-events:none; overflow:hidden;
  left:47%; top:16%; width:34%; height:66%;
  border-radius:47% 53% 46% 54%/33% 39% 61% 67%;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 30px 80px rgba(0,0,0,.42);
}
.v2-tree-img,.v2-tree-vid{position:absolute;display:block;left:-138.24%;top:-24.24%;width:294.12%;height:151.52%;}
.v2-tree-img{background:url('tree-canopy.webp') center/cover no-repeat;}
.v2-tree-vid{object-fit:cover;opacity:0;transition:opacity .9s ease}
.v2-tree-vid.on{opacity:1}
/* Image first, video second — exactly as asked. The still is the hero's own background and the
   window's own <i>; each video sits on top at opacity 0 and fades in only once it can actually
   play. Frame 0 of the clip matches the still (RMSE 0.027 against a 0.225 control), so the
   handover is invisible rather than a jump. */

/* ---- Canopy: full-screen menu with an X. Scoped to the width where the menu button is actually
   used — above 860px every concept shows inline nav links and there is no menu to open.       ---- */
@media(max-width:860px){
  .v2 .nav-links.open{
    position:fixed; inset:0; z-index:80; width:auto; max-width:none; margin:0;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:6px; padding:28px 30px calc(28px + env(safe-area-inset-bottom));
    background:rgba(10,23,17,.975); -webkit-backdrop-filter:blur(var(--copy-blur,8px)); backdrop-filter:blur(var(--copy-blur,8px));
    border-radius:0; overflow-y:auto;
  }
  .v2 .nav-links.open a:not(.btn){
    font-family:var(--serif); font-size:clamp(30px,8.2vw,44px); line-height:1.18;
    color:#fff; padding:11px 0; border:0; width:100%;
  }
  .v2 .nav-links.open a.btn{                /* the gold booking CTA keeps its button shape */
    font-family:inherit; font-size:19px; margin-top:26px; width:auto;
    padding:19px 38px; align-self:flex-start; white-space:nowrap; line-height:1;
  }
  /* the existing button becomes the X — no new markup, so its own close handler still runs */
  .v2 .menu-btn[aria-expanded="true"]{
    position:fixed; top:12px; right:12px; z-index:90;
    width:54px; height:54px; padding:0; font-size:0; border-radius:999px;
    background:transparent; border-color:transparent;
  }
  .v2 .menu-btn[aria-expanded="true"]:before,
  .v2 .menu-btn[aria-expanded="true"]:after{
    content:""; position:absolute; left:50%; top:50%;
    width:26px; height:2px; background:#fff; border-radius:2px;
  }
  .v2 .menu-btn[aria-expanded="true"]:before{transform:translate(-50%,-50%) rotate(45deg)}
  .v2 .menu-btn[aria-expanded="true"]:after{transform:translate(-50%,-50%) rotate(-45deg)}
  html.v2-menu-open,body.v2-menu-open{overflow:hidden;overscroll-behavior:none}
  .v2 .nav-links.open{overscroll-behavior:contain;max-width:100%}
}

/* ---- Erica's real logo. Lifted from risingmindsonline.com, where it is an inline SVG rather than
   an image file. Its colour was baked into per-path style attributes, so those became
   currentColor — one <symbol> can then serve the dark Canopy header and the two light concepts.  */
.logo-svg{height:42px;width:109px;display:block;color:#cb734d;flex:0 0 auto}
.logo-mark{display:none}                 /* the real logo carries its own sunrise mark */
.logo-text small{margin-top:7px}
@media(max-width:860px){.logo-svg{height:34px;width:88px}}
.v2 .logo-svg{color:#fff}
.v2 .footer .logo-svg,.v1 .footer .logo-svg,.v3 .footer .logo-svg{color:currentColor;opacity:.95}

/* ---- The grey square on tap is the browser's DEFAULT tap highlight, which is drawn on the
   element's rectangular box and so ignores border-radius entirely — nothing in this stylesheet was
   causing it. Removing it alone would leave a tap with no feedback at all, so a brief opacity dip
   replaces it. The keyboard focus ring (:focus-visible) is deliberately left intact.        ---- */
.v2 a,.v2 button{-webkit-tap-highlight-color:transparent}
.v2 .menu-btn:active{opacity:.6}
.v2 .nav-links.open a:active{opacity:.62}

/* ---- Canopy's menu button. The markup is identical on all three concepts; the button is black
   outline on transparent, which reads on Rooted's pale green and Sunrise's cream and vanishes on
   Canopy's dark photo. So this is a repaint, not an addition. The faint fill + blur is there
   because a hairline over moving foliage is not reliably visible on its own.               ---- */
.v2 .menu-btn{color:#fff;border-color:#fff;background:transparent}
@media(hover:hover){.v2 .menu-btn:hover{color:#0f2019;background:rgba(255,255,255,.92);border-color:#fff}}
.v2 .menu-btn:focus-visible{color:#0f2019;background:rgba(255,255,255,.92);border-color:#fff}

/* ---- Daniel 2026-08-10: the cutout treatment applied to the entire hero. -------------------
   The previous darker overlay is preserved verbatim in
   variants/index-WITH-cutout-and-dark-overlay.html and in .v2-veil-was below, so it can be put
   back in one line. Nothing here is destructive.                                              */
.v2-veil-was{ /* linear-gradient(90deg,rgba(13,28,21,.38) 0%,rgba(13,28,21,.62) 44%,
                                       rgba(13,28,21,.62) 75%,rgba(13,28,21,.58) 100%) */ }
.v2-hero{background-image:url('tree-canopy.webp')!important;background-size:cover;background-position:center}
.v2-veil{display:block!important;z-index:1!important;
  background:linear-gradient(90deg,rgba(var(--veil-rgb),calc(var(--veil-a)*.92)) 0%,rgba(var(--veil-rgb),calc(var(--veil-a)*.8)) 30%,rgba(var(--veil-rgb),calc(var(--veil-a)*.45)) 52%,transparent 74%)!important}
@media(max-width:860px){.v2-veil{background:linear-gradient(180deg,rgba(var(--veil-rgb),calc(var(--veil-a)*.62)) 0%,rgba(var(--veil-rgb),calc(var(--veil-a)*.5)) 45%,rgba(var(--veil-rgb),calc(var(--veil-a)*.2)) 68%,transparent 84%)!important}}
/* With no veil anywhere the window has nothing left to cut through — its rim would be the only
   thing visible, which would read as a stray outline. */
.v2-tree-window{display:none!important}
.v2-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:0;transition:opacity .9s ease;pointer-events:none}
.v2-hero-video.on{opacity:1}
/* An added veil, NOT a replacement: the hero's own gradient fades to 10% on the right, and a window
   cut through nothing is invisible. Values chosen so the COMPOSITE of both lands near a flat 80% —
   alpha composites as 1-(1-a1)(1-a2), it does not add. */
.v2-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--veil-rgb),calc(var(--veil-a)*.38)) 0%,rgba(var(--veil-rgb),calc(var(--veil-a)*.60)) 44%,rgba(var(--veil-rgb),calc(var(--veil-a)*.60)) 75%,rgba(var(--veil-rgb),calc(var(--veil-a)*.56)) 100%);}
.v2-hero > .container{position:relative;z-index:3}

@media(max-width:860px){
  /* in flow, under the buttons — cannot overlap anything by construction */
  .v2-hero-note{position:static;left:auto;right:auto;bottom:auto;width:auto;margin:26px 0 0}
  .v2-hero{min-height:0;padding-bottom:64px}
  .v2-tree-window{left:44%; right:auto; top:14%; width:60%; height:50%}
  .v2-tree-img,.v2-tree-vid{left:-73.33%;top:-28.00%;width:166.67%;height:200.00%}
  .v2-hero-copy p{max-width:60%}
}

/* ---- Motion behind the copy. Measured on a 412px phone, change-per-second in the box behind the
   headline and paragraph:
       speed  1.0x  9.34%   ·  1.5x slower 8.31%  ·  5x slower 5.64%  ·  8.3x slower 4.52%
   Slowing is a WEAK lever — 8x slower only halves it, and by then the video barely moves.
       blur 4px 4.26%  ·  blur 8px 2.55%  ·  blur 14px 1.46%  ·  frozen 0%
   An 8px blur at the CURRENT speed beats slowing the clip eight times over, and the video still
   looks alive everywhere outside the text. Blur removes the detail the eye tries to track.     */
.v2-hero-copy{position:relative}


/* ⚠️ The blur used to be a ::before on .v2-hero-copy — which carries `reveal`
   (opacity:0 -> 1 over .7s). A pseudo-element inherits its parent's opacity, so the blur could not
   appear until the text finished animating in. Daniel saw it "arrive late". It is now its own
   element, outside the revealed subtree, so it is painted with the first frame. */
.v2-copy-blur{position:absolute;z-index:1;pointer-events:none;
  left:0;top:4%;width:100%;height:74%;
  -webkit-backdrop-filter:blur(var(--copy-blur,8px));backdrop-filter:blur(var(--copy-blur,8px));
  -webkit-mask-image:radial-gradient(70% 56% at 34% 46%,#000 62%,transparent 100%);
  mask-image:radial-gradient(70% 56% at 34% 46%,#000 62%,transparent 100%);}
@media(min-width:861px){.v2-copy-blur{left:0;top:6%;width:66%;height:88%;
  -webkit-mask-image:radial-gradient(64% 52% at 32% 50%,#000 60%,transparent 100%);
  mask-image:radial-gradient(64% 52% at 32% 50%,#000 60%,transparent 100%);}}

/* ⚠️ The glass button sat at 1.58:1 for its text and 1.11:1 for its border — the backdrop under it
   measures 0.613 luminance (bright mist), and the warm veil made it brighter still. A translucent
   white fill on a bright backdrop cannot work. Solid-enough dark fill + a real border instead. */
.v2 .btn-glass{background:rgba(11,26,19,.72)!important;border-color:rgba(255,255,255,.72)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media(hover:hover){.v2 .btn-glass:hover{background:rgba(11,26,19,.85)!important;border-color:#fff!important}}

:root{--veil-rgb:156,138,67;--veil-a:.13;--copy-blur:12px;--btn-fg:#213126;--btn-bg:#f1b838}












.v2-hero{padding-bottom:70px}

/* Golden bullets on the intro cards (Daniel 2026-08-10). Scoped to .v2 so Rooted and Sunrise keep
   their own mist-green markers. Gold fill with the deep forest glyph on top — the reverse of the
   old pale-mint chip, and it picks up the --sun already used by the headline and buttons. */
.v2 .v2-intro-card .icon{background:var(--sun);color:#123024;
  box-shadow:0 6px 16px rgba(241,184,56,.28)}

/* Gold-button text switch. Every gold button follows --btn-fg / --btn-bg, so the control changes
   all of them at once rather than just the hero one.
   ⚠️ White on the standard gold #f1b838 measures 1.80:1 — under even the 3.0 large-text floor.
   The third option deepens the gold to #a86f12 (4.24:1), which is the same look with white text
   that can actually be read. */
.btn-sun{background:var(--btn-bg)!important;color:var(--btn-fg)!important}




/* ⚠️ The panel tag was position:absolute, so it reserved no space — and .v2-path is a column flex
   box with justify-content:flex-end, meaning the copy grows UPWARD. Once Daniel's longer headings
   landed, "Individual therapy" ran straight through its heading (-28px on mobile) and two others
   were sitting at 0 and -1px, i.e. one word from breaking.
   Putting the tag back in normal flow with margin-bottom:auto pins it to the top AND makes it
   occupy space, so no heading length can ever collide with it. Fixed by construction, not by
   picking a padding number that the next copy change would invalidate. */
.v2 .v2-path{padding-top:32px}
.v2 .v2-path .tag{position:static;align-self:flex-start;margin:0 0 auto 0}
.v2 .v2-path h3{margin-top:22px}

/* ⚠️ Between 700px and 860px the "A gentle first step" card sits in normal flow (my earlier
   overlap fix), but `.v2-intro` still carried margin-top:-45px — a pull-up designed for the
   ABSOLUTE version of that card. The two collided at -8px. Measured across 11 widths: fine at
   390-600, broken at 700/768/820, fine again from 884 where the card goes absolute again.
   The negative pull only makes sense while the card is absolute, so it is cancelled below 861px. */
@media(max-width:540px){
  .v2 .v2-intro{margin-top:-46px}
}
@media(min-width:541px) and (max-width:860px){
  .v2 .v2-intro{margin-top:-22px}
}

/* Desktop only: the value cards are pulled up by --intro-overlap, and they must overlap the
   hero's empty padding rather than its buttons. Placed last so the earlier base-level
   .v2-hero{padding-bottom:70px} cannot win on source order — which is exactly what beat
   the first version of this fix. */
@media(min-width:861px){.v2-hero{padding-bottom:calc(var(--intro-overlap) + 34px)}}

/* ── Services dropdown (added 2026-08-10) ──────────────────────────────── */
.nav-item{position:relative;display:inline-flex;align-items:center}
.nav-item.has-dropdown>a{display:inline-flex;align-items:center}
.nav-item.has-dropdown>a:after{content:"";width:6px;height:6px;margin-left:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.72}
.nav-item .dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:222px;display:flex;flex-direction:column;gap:2px;padding:10px;background:var(--paper);color:var(--forest);border-radius:16px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility 0s .16s;z-index:40}
.nav-item.has-dropdown:hover .dropdown,.nav-item.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .16s ease,transform .16s ease}
.nav-links .nav-item.has-dropdown .dropdown a{padding:9px 13px;border-radius:9px;white-space:nowrap;color:var(--forest);font-weight:750}
.nav-links .nav-item.has-dropdown .dropdown a:hover{background:rgba(36,60,50,.09)}
.nav-item .dropdown a:after{display:none}
@media(max-width:980px){
  .nav-item{display:block;width:100%}
  .nav-item.has-dropdown>a:after{float:right;margin-top:9px}
  .nav-item .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;padding:2px 0 8px 16px;min-width:0}
  .v2 .nav-links .nav-item.has-dropdown .dropdown a{color:#fff;opacity:.85;white-space:normal;overflow-wrap:break-word}
}

/* ═══ Mobile menu: collapsible Services + reliable scrolling ═══════════════════
   Added 2026-08-11. Two problems, one cause.

   The Services dropdown is `position:static` on mobile, so its six links sit
   permanently expanded inside the menu — 392px of the 844px screen on an iPhone 14,
   and more than half the viewport on an SE. That is what pushed the menu past the
   fold and made it need scrolling in the first place.

   Collapsing it removes the need to scroll on most phones; the scroll hardening
   below covers the rest. */

/* The toggle is injected on every viewport but is a MOBILE affordance only. Its styles live in
   the media query below, so on desktop it rendered as an unstyled native <button> — a small grey
   dash next to the chevron. Hidden by default, revealed only where it is wanted. */
.dd-toggle{ display:none; }

@media(max-width:980px){

  .nav-item.has-dropdown{
    width:100%;
    display:flex; flex-wrap:wrap; align-items:center;
  }

  /* ⚠️ SPECIFICITY: the overlay sets `.nav-links.open a:not(.btn){width:100%}` (0,3,1), which
     forces the Services link to fill the row and wraps the chevron onto a line of its own.
     This selector is (0,4,1) so it wins. Diagnosed by measuring the link at 315px in a 315px
     container — the wrap was arithmetic, not a mystery. */
  .nav-links.open .nav-item.has-dropdown > a{
    width:auto; flex:1 1 auto; min-width:0;
  }

  /* The theme already draws its own 6x6 chevron on the link via ::after. Left in place it sits
     next to OUR 46px button and the menu shows two arrows. The link's own arrow goes; the
     button's stays, because only the button can expand without navigating. */
  .nav-links .nav-item.has-dropdown > a::after{ display:none !important; }

  /* The toggle is a BUTTON, never a link. canopy.js closes the whole menu on any
     `.nav-links a` click, so a chevron built as an anchor would slam the menu shut
     instead of expanding the submenu. */
  .dd-toggle{
    flex:0 0 auto;
    width:46px; height:46px;          /* ≥44px: the accessible touch-target minimum */
    display:flex; align-items:center; justify-content:center;
    margin-left:8px;
    background:transparent; border:0; padding:0; cursor:pointer;
    color:inherit;
  }
  .dd-toggle::before{
    content:""; width:11px; height:11px;
    border-right:2.5px solid currentColor;
    border-bottom:2.5px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .24s ease;
  }
  .nav-item.has-dropdown.is-open .dd-toggle::before{
    transform:rotate(-135deg) translate(-3px,-3px);
  }
  .dd-toggle:focus-visible{ outline:2px solid currentColor; outline-offset:2px; border-radius:8px; }

  /* Collapsed by default. max-height rather than display:none so it can animate;
     the value only needs to exceed the natural height. */
  .nav-item.has-dropdown .dropdown{
    flex:1 0 100%;
    max-height:0; overflow:hidden;
    padding-top:0; padding-bottom:0;
    transition:max-height .28s ease;
  }
  .nav-item.has-dropdown.is-open .dropdown{
    max-height:640px;
    padding:2px 0 8px 16px;
  }
  @media(prefers-reduced-motion:reduce){
    .nav-item.has-dropdown .dropdown,
    .dd-toggle::before{ transition:none; }
  }
}

/* ── Mobile submenu polish (2026-08-12) — mirror Rise Today: the open dropdown's
   sub-items are smaller than the category headings, and the open category lights up
   in the brand gold (--sun). Specificity (0,6,1)/(0,7,0) beats the big-font rule. ── */
@media(max-width:860px){
  .v2 .nav-links.open .nav-item.has-dropdown .dropdown a{
    font-size:clamp(18px,4.9vw,21px); line-height:1.3; padding:7px 0; opacity:.92;
  }
  .v2 .nav-links.open .nav-item.has-dropdown.is-open > a{ color:var(--sun); }
  .v2 .nav-links.open .nav-item.has-dropdown.is-open .dd-toggle{ color:var(--sun); }
}

@media(max-width:860px){
  /* Scroll hardening. `overflow-y:auto` was already set and Chrome scrolled fine,
     but a fixed, body-locked overlay is exactly the case iOS Safari handles badly.
     - dvh tracks the shrinking/growing URL bar, which vh does not
     - safe-area padding keeps the last item clear of the home indicator
     - overscroll-behavior stops the page behind from taking over the gesture */
  .v2 .nav-links.open,
  .nav-links.nav-links.open{
    height:100dvh;
    max-height:100dvh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:max(28px, calc(env(safe-area-inset-bottom) + 28px));
  }
}

@media(max-width:860px){
  /* The close button is position:fixed and TRANSPARENT, so any menu item scrolling past it
     shows through the X — the Services chevron collided with it the moment the submenu made
     the menu scroll. Pre-existing, but only visible once there was something to scroll.
     Giving it the overlay's own background masks whatever passes behind. */
  .v2 .menu-btn[aria-expanded="true"],
  .menu-btn.menu-btn[aria-expanded="true"]{
    background:#173026;
    box-shadow:0 0 0 6px #173026;    /* feathers the edge so it does not read as a hard disc */
  }
}

@media(max-width:860px){
  /* 🔴 THE REAL BUG BEHIND "the menu won't scroll" AND "I can't reach Our story".
     The overlay is a column flexbox with `justify-content:center`. Once the content is taller
     than the box, centring pushes the overflow out BOTH ends — and the part above the start edge
     is unreachable, because scrollTop cannot go negative. Measured: with scrollTop already 0,
     "Our story" sat at top:-65px.
     `safe center` keeps the centred look while the content fits and silently falls back to
     flex-start the moment it does not. */
  .v2 .nav-links.open,
  .nav-links.nav-links.open{
    justify-content:safe center;
  }
}

/* Menu button shadow — match the "Our Story" treatment on EVERY page. Interior image-hero pages already
   get the soft lift box-shadow via canopy-article.css (.article-hero--image .menu-btn), but the homepage
   (.v2) never loads that file, so it was the odd one out. Give the homepage the same lift shadow, and add
   a tighter drop-shadow on all so the white "Menu" pill also reads over bright sky patches (e.g. Services
   forest canopy). Only visible on mobile, where the button shows. (Daniel 2026-08-11) */
.v2 .menu-btn,.v2 .nav .btn{box-shadow:0 6px 18px rgba(10,22,16,.3)}
.v2 .menu-btn,.article-hero .menu-btn{filter:drop-shadow(0 2px 7px rgba(0,0,0,.55))}

/* Floating "Book a free call" CTA — sticky conversion button on every page, bottom-right.
   Gold pill on-brand, gentle entrance, hover lift. Hidden while the mobile menu overlay is open.
   (Daniel 2026-08-11, ref: Scandinave Spa BOOK NOW pill) */
.rm-fab{position:fixed;right:22px;bottom:22px;z-index:850;display:inline-flex;align-items:center;gap:9px;
  padding:14px 22px;border-radius:999px;background:var(--sun);color:#213126;
  font:800 15px/1 var(--sans);letter-spacing:.005em;text-decoration:none;
  box-shadow:0 12px 32px rgba(20,30,20,.30);border:1px solid rgba(0,0,0,.05);
  transition:transform .22s ease,box-shadow .22s ease,opacity .2s ease;
  animation:rmFabIn .5s ease-out}
.rm-fab:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(20,30,20,.36);color:#213126}
.rm-fab:active{transform:translateY(-1px)}
.rm-fab__ico{flex:none}
.rm-fab span{white-space:nowrap}
.v2-menu-open .rm-fab{opacity:0;pointer-events:none}
@keyframes rmFabIn{from{transform:translateY(16px)}to{transform:translateY(0)}}
@media(max-width:560px){.rm-fab{right:12px;bottom:12px;padding:12px 17px;font-size:13.5px;gap:7px}}
@media(prefers-reduced-motion:reduce){.rm-fab{animation:none}}