/* ─────────────────────────────────────────────────────────────
   HAVEN PERMACULTURE — "the descent"
   The page is a food forest read top to bottom: sky → canopy →
   understory → ground → roots. Palette is sampled from the Haven
   emblem (dawn glow, olive wordmark) and the land itself.
   Mobile first; desktop adds parallax, rain, and the depth gauge.
   ───────────────────────────────────────────────────────────── */
:root{
  --dawn:#f2d37a;      /* emblem sun glow */
  --honey:#d9a441;     /* action gold */
  --honey-deep:#b07f22;
  --lichen:#aba46b;    /* the H A V E N wordmark */
  --canopy:#1f3a24;    /* deep leaf */
  --leaf:#2f5230;
  --moss:#5f7a3c;
  --fern:#8fa66a;
  --mist:#eef0e5;      /* morning cloud, greened */
  --sky:#cfdcd6;
  --rain:#6c8591;      /* slate rain / water */
  --bark:#5a4130;
  --loam:#1b140e;      /* deep soil */
  --loam-2:#2a1f16;
  --mycel:#e8dcc0;     /* mycelium thread */
  --ink:#1d2419;
  --ink-soft:#4b5646;
  --line:rgba(31,58,36,.14);

  --display:'IM Fell English','Iowan Old Style',Georgia,serif;
  --label:'Tenor Sans','Gill Sans','Trebuchet MS',sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --r:14px; --r-lg:26px; --wrap:1220px;
  --shadow:0 30px 70px -30px rgba(18,32,20,.45);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.62;color:var(--ink);background:var(--mist);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--honey);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── type ── */
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0 0 .45em;letter-spacing:-.005em}
h1{font-size:clamp(2.7rem,11vw,6.6rem)}
h2{font-size:clamp(2.1rem,7vw,3.9rem)}
h3{font-size:clamp(1.45rem,4.5vw,1.9rem);line-height:1.12}
h1 em,h2 em{font-style:italic;color:var(--honey)}
p{margin:0 0 1em}
.label{font-family:var(--label);text-transform:uppercase;letter-spacing:.34em;font-size:.72rem;line-height:1.5;display:inline-block}
.lede{font-size:clamp(1.08rem,2.6vw,1.3rem);line-height:1.55;max-width:40ch}
.muted{color:var(--ink-soft)}
.small{font-size:.9rem}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 1.6em;border-radius:999px;font-family:var(--label);letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-honey{background:var(--honey);color:#1f1606}
.btn-honey:hover{background:var(--dawn)}
.btn-leaf{background:var(--canopy);color:var(--mist)}
.btn-leaf:hover{background:var(--leaf)}
.btn-line{border-color:currentColor;background:transparent}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ── header ── */
.head{position:fixed;inset:0 0 auto;z-index:60;transition:background .35s,box-shadow .35s}
/* blur lives on a pseudo-element: backdrop-filter on .head itself would trap the fixed mobile menu inside the header */
.head::before{content:"";position:absolute;inset:0;z-index:-2;opacity:0;transition:opacity .35s;background:rgba(238,240,229,.92);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.head.solid::before{opacity:1}
.head .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:14px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--canopy)}
.mark img{width:48px;height:48px;filter:drop-shadow(0 0 14px rgba(242,211,122,.7))}
.mark span{font-family:var(--label);letter-spacing:.42em;font-size:.95rem;line-height:1.1;text-transform:uppercase}
.mark small{display:block;letter-spacing:.3em;font-size:.56rem;color:var(--moss);margin-top:3px}
.head.on-dark:not(.solid) .mark,.head.on-dark:not(.solid) .burger{color:var(--mist)}
.head.on-dark:not(.solid) .mark small{color:var(--dawn)}
.burger{background:none;border:0;color:var(--canopy);width:48px;height:48px;display:grid;place-items:center;cursor:pointer}
.burger svg{width:28px}
.nav{position:fixed;inset:0;background:var(--canopy);color:var(--mist);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:90px 28px 40px;transform:translateY(-100%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.nav.open{transform:none}
/* menu open: the dark menu covers the light header strip, so the logo and toggle must go light too */
.head:has(.nav.open) .mark,.head:has(.nav.open) .burger{color:var(--mist)}
.head:has(.nav.open) .mark small{color:var(--dawn)}
.nav a{font-family:var(--display);font-size:2rem;text-decoration:none;padding:6px 0}
.nav .nav-actions .btn{padding:0 1.5em;font-size:.8rem;width:100%}
.nav a[aria-current=page]{color:var(--dawn)}
.nav .nav-actions{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.nav .nav-actions a{font-family:var(--label);font-size:.8rem}
@media (min-width:1140px){
  .burger{display:none}
  .nav{position:static;transform:none;background:none;color:inherit;flex-direction:row;align-items:center;padding:0;gap:clamp(14px,1.6vw,26px);z-index:auto}
  .nav a{font-family:var(--label);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:0;white-space:nowrap}
  .nav .nav-actions .btn{padding:0 1.5em;min-height:46px;width:auto;font-size:.72rem}
  .nav a[aria-current=page]{color:var(--honey)}
  .nav .nav-actions{flex-direction:row;margin:0 0 0 8px}
  .head.on-dark:not(.solid) .nav{color:var(--mist)}
}

/* ── depth gauge (desktop): the page's layers, marker descends with scroll ── */
.gauge{display:none}
@media (min-width:1280px){
  .gauge{display:block;position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:50;font-family:var(--label);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase}
  .gauge ol{list-style:none;margin:0;padding:0 0 0 18px;border-left:1px solid rgba(95,122,60,.45);display:grid;gap:22px}
  .gauge a{text-decoration:none;color:var(--moss);opacity:.6;transition:opacity .3s,color .3s}
  .gauge a.here{opacity:1;color:var(--honey)}
  .gauge .bead{position:absolute;left:-5px;top:0;width:11px;height:11px;border-radius:50%;background:var(--honey);box-shadow:0 0 0 4px rgba(217,164,65,.25);transition:top .5s cubic-bezier(.3,.7,.2,1)}
  .gauge.dark a{color:var(--mycel)}
}

/* ── SKY: hero ── */
.sky{position:relative;min-height:100svh;overflow:hidden;color:var(--canopy);
  background:linear-gradient(180deg,#f7e7ae 0%,#e9e6c4 28%,#cfdcd6 58%,#b7c9bd 78%,#8fa66a 100%)}
/* Centered with margin, NOT transform: the scroll glide owns `transform` (translate + scale), so a centering
   transform here would be overwritten on first scroll and the A-frame would snap sideways. */
.sky > .aframe{position:absolute;left:0;right:0;margin-inline:auto;bottom:14svh;width:min(118vw,1100px);aspect-ratio:1;z-index:1;opacity:.13;pointer-events:none;
  background:url(/assets/img/haven-triangle.png) 50% 100%/contain no-repeat;transform-origin:50% 100%;will-change:transform;
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1),opacity 1.4s ease}
@media (min-width:900px){.sky > .aframe{bottom:10svh;width:min(80vw,980px);opacity:.15}}
.sky .sun{position:absolute;left:50%;top:6svh;width:min(88vw,560px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,196,.95) 0%,rgba(242,211,122,.55) 28%,rgba(242,211,122,0) 66%)}
.cloud{position:absolute;border-radius:50%;background:radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.95),rgba(255,255,255,0) 68%);filter:blur(2px);pointer-events:none}
.cloud.c1{width:520px;height:150px;top:12%;left:-140px;animation:drift 70s linear infinite}
.cloud.c2{width:380px;height:110px;top:24%;right:-100px;animation:drift 90s linear infinite reverse}
.cloud.c3{width:640px;height:170px;top:4%;left:30%;opacity:.7;animation:drift 120s linear infinite}
@keyframes drift{from{translate:0 0}to{translate:30vw 0}}
.rain{position:absolute;inset:0;pointer-events:none;opacity:.0;
  background-image:repeating-linear-gradient(104deg,rgba(108,133,145,0) 0 40px,rgba(108,133,145,.16) 40px 41px,rgba(108,133,145,0) 41px 120px);
  background-size:220px 220px;animation:fall 1.1s linear infinite;mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 55%,transparent 75%)}
@keyframes fall{to{background-position:-40px 220px}}
.sky-copy{position:relative;z-index:4;padding:96px 0 24svh;text-align:center}
.sky-copy .emblem{width:104px;margin:0 auto 14px;filter:drop-shadow(0 0 40px rgba(242,211,122,.9))}
.sky-copy .label{color:var(--leaf)}
.sky-copy h1{margin:.2em auto .25em;max-width:12ch}
.sky-copy .lede{margin:0 auto 26px;color:var(--ink-soft)}
.sky-copy .btn-row{justify-content:center}
.sky-copy .creds{margin:26px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-family:var(--label);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--leaf)}
.forest{position:absolute;left:0;right:0;bottom:-1px;z-index:3;height:26svh;min-height:150px;background-repeat:repeat-x;background-position:50% 100%;background-size:auto 100%;pointer-events:none}
.forest.f-far{height:40svh;min-height:230px;opacity:.9}.forest.f-mid{height:33svh;min-height:190px}
img[src$="haven-emblem.png"]{clip-path:circle(46.5% at 50% 50%)}
.forest .far{fill:#7d9477}.forest .mid{fill:#4b6a40}.forest .near{fill:var(--canopy)}
.parallax{will-change:transform}
@media (min-width:900px){
  .rain{opacity:1}
  .sky-copy{padding-top:100px}
  .sky-copy .emblem{width:118px}
  .sky-copy h1{font-size:clamp(3.6rem,6.4vw,5.6rem)}
}

/* ── generic layer sections ── */
.layer{position:relative;padding:84px 0}
.layer-tag{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.layer-tag .label{color:var(--moss)}
.layer-tag svg{width:34px;height:34px;flex:none}
.canopy{background:var(--canopy);color:var(--mist)}
.canopy .layer-tag .label{color:var(--dawn)}
.canopy .muted{color:#b9c7b0}
.understory{background:var(--mist)}
.ground{background:linear-gradient(180deg,var(--mist) 0%,#e4e2cf 100%)}
.roots{background:var(--loam);color:var(--mycel)}
.roots .layer-tag .label{color:var(--dawn)}
.roots .muted{color:#b3a78e}
.edge{display:block;width:100%;height:auto;margin-bottom:-1px}
@media (min-width:900px){.layer{padding:130px 0}}

/* ── two paths (canopy) ── */
.paths{display:grid;gap:18px;margin-top:40px}
.path{border-radius:var(--r-lg);padding:30px 26px;background:rgba(238,240,229,.06);border:1px solid rgba(238,240,229,.14);position:relative;overflow:hidden}
.path h3{color:#fff}
.path ul{list-style:none;padding:0;margin:18px 0 24px;display:grid;gap:10px}
.path li{padding-left:26px;position:relative}
.path li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50% 0;background:var(--fern);transform:rotate(-45deg)}
.path.founder{background:linear-gradient(160deg,rgba(242,211,122,.18),rgba(242,211,122,.03));border-color:rgba(242,211,122,.5)}
.path.founder li::before{background:var(--dawn)}
.path .label{color:var(--dawn);margin-bottom:12px}
.path .threshold{font-family:var(--display);font-size:3rem;line-height:1;color:var(--dawn);margin:6px 0 2px}
@media (min-width:900px){.paths{grid-template-columns:1fr 1fr;gap:26px}.path{padding:44px}}

/* ── services (understory) ── */
.services{display:grid;gap:14px;margin-top:36px}
.svc{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;padding:24px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;align-items:start}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc svg{width:44px;height:44px;grid-row:span 2;color:var(--moss)}
.svc h3{margin:0;transition:color .2s}
.svc p{margin:0;color:var(--ink-soft);grid-column:2}
.svc:hover h3{color:var(--honey-deep)}
.svc .go{grid-column:2;font-family:var(--label);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--moss);margin-top:6px}
@media (min-width:900px){.services{grid-template-columns:1fr 1fr;column-gap:56px}}

/* ── photo band ── */
.photo-band{display:grid;gap:14px;margin-top:40px}
.photo-band figure{margin:0;border-radius:var(--r-lg);overflow:hidden;position:relative;box-shadow:var(--shadow);background:#cfd5c3}
.photo-band img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.photo-band figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;background:linear-gradient(transparent,rgba(20,28,18,.8));color:#fff;font-size:.86rem}
@media (min-width:900px){
  .photo-band{grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:260px}
  .photo-band figure:first-child{grid-row:span 2}
  .photo-band img{aspect-ratio:auto}
}

/* ── process (a real sequence) ── */
.steps{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:26px;counter-reset:s}
.steps li{position:relative;padding-left:64px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-4px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:1.4rem;background:var(--canopy);color:var(--dawn)}
.steps h3{margin-bottom:.25em}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}.steps li{padding:64px 0 0}.steps li::before{top:0}}

/* ── work (ground layer) ── */
.work{display:grid;gap:34px;margin-top:40px}
.work article{display:grid;gap:18px}
.work figure{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.work .meta{font-family:var(--label);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--moss)}
@media (min-width:900px){.work article{grid-template-columns:1.2fr 1fr;gap:44px;align-items:center}.work article:nth-child(even) figure{order:2}}

/* ── roots: network of partners, mycelium ── */
.network{position:relative;margin-top:40px}
.network svg.hyphae{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hyphae path{fill:none;stroke:var(--mycel);stroke-width:1;opacity:.35;stroke-dasharray:6 6;animation:creep 18s linear infinite}
@keyframes creep{to{stroke-dashoffset:-240}}
.nodes{position:relative;display:grid;gap:14px;grid-template-columns:1fr 1fr}
.node{background:rgba(232,220,192,.05);border:1px solid rgba(232,220,192,.16);border-radius:var(--r);padding:20px 16px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,background .2s}
.node:hover{border-color:var(--dawn);background:rgba(242,211,122,.07)}
.node img{width:58px;height:58px;object-fit:contain}
.node b{font-family:var(--display);font-weight:400;font-size:1.2rem;color:#fff;line-height:1.1}
.node span{font-size:.86rem;color:#b3a78e}
@media (min-width:900px){.nodes{grid-template-columns:repeat(4,1fr);gap:20px}.node{padding:26px 22px}}
.stages{margin-top:56px;display:grid;gap:16px}
.stage{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.stage img{width:118px;height:84px;object-fit:cover;border-radius:10px}
@media (min-width:900px){.stages{grid-template-columns:repeat(3,1fr)}}

/* ── sign-in portal ── */
.portal{margin-top:64px;border-radius:var(--r-lg);padding:30px 24px;background:radial-gradient(120% 90% at 50% 0%,rgba(242,211,122,.2),rgba(242,211,122,0) 60%),var(--loam-2);border:1px solid rgba(242,211,122,.3);text-align:center}
.portal img{width:86px;margin:0 auto 14px;filter:drop-shadow(0 0 26px rgba(242,211,122,.8))}
.portal h2{color:#fff}
.portal .btn-row{justify-content:center;margin-top:18px}
@media (min-width:900px){.portal{padding:56px}}

/* ── dialog: sign in ── */
dialog.signin{border:0;border-radius:var(--r-lg);padding:0;max-width:440px;width:calc(100% - 32px);background:var(--mist);color:var(--ink);box-shadow:0 40px 90px rgba(0,0,0,.45)}
dialog.signin::backdrop{background:rgba(20,28,18,.62);backdrop-filter:blur(4px)}
.signin-inner{padding:30px 26px;text-align:center}
.signin-inner img{width:74px;margin:0 auto 10px}
.signin-inner .btn{width:100%;margin-top:10px}
.signin-close{position:absolute;right:10px;top:10px;background:none;border:0;font-size:1.6rem;width:44px;height:44px;cursor:pointer;color:var(--ink-soft)}

/* ── cta ── */
.cta{background:var(--honey);color:#1f1606;border-radius:var(--r-lg);padding:38px 26px;display:grid;gap:18px}
.cta h2{margin:0}
@media (min-width:900px){.cta{grid-template-columns:1.3fr auto;align-items:center;padding:56px}}

/* ── footer (deep soil) ── */
.foot{background:var(--loam);color:#b3a78e;padding:60px 0 30px;font-size:.93rem}
.foot a{text-decoration:none;color:var(--mycel)}
.foot a:hover{color:var(--dawn)}
.foot-grid{display:grid;gap:34px}
.foot h4{font-family:var(--label);font-weight:400;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dawn);margin:0 0 14px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.foot .legal{margin-top:40px;padding-top:20px;border-top:1px solid rgba(232,220,192,.12);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.82rem}
@media (min-width:900px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}

/* ── inner pages ── */
.page-sky{position:relative;overflow:hidden;padding:120px 0 150px;color:var(--canopy);background:linear-gradient(180deg,#f3e4ab 0%,#dfe4cf 45%,#b7c9bd 100%)}
.page-sky .wrap{position:relative;z-index:2}
.page-sky h1{font-size:clamp(2.4rem,8vw,4.8rem);max-width:15ch}
.page-sky .label{color:var(--leaf)}
.page-sky .lede{color:var(--ink-soft)}
.page-sky .forest{position:absolute}
.page-sky .btn-row{margin-top:24px}
.prose{max-width:760px}
.grid{display:grid;gap:18px}
@media (min-width:760px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.canopy .card,.roots .card{background:rgba(238,240,229,.06);border-color:rgba(238,240,229,.14)}
.card h3{font-size:1.45rem}
.card p:last-child{margin:0}
.more{font-family:var(--label);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--moss)}
.canopy .more{color:var(--dawn)}
.ticks{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:10px}
.ticks li{padding-left:26px;position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:.5em;width:11px;height:11px;border-radius:50% 0;background:var(--moss);transform:rotate(-45deg)}
.ticks.x li::before{border-radius:2px;background:var(--rain);transform:none;width:9px;height:2px;top:.8em}
details{border-top:1px solid var(--line);padding:0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;padding:20px 0;font-family:var(--display);font-size:1.3rem}
summary::after{content:"+";color:var(--honey-deep);font-family:var(--body)}
details[open] summary::after{content:"–"}
details p{color:var(--ink-soft);padding-bottom:18px;margin:0}
.split{display:grid;gap:34px;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1.1fr .9fr;gap:60px}}
.figure{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.figure figcaption{padding:12px 16px;font-size:.84rem;background:#fff;color:var(--ink-soft)}

/* ── forms ── */
.form{display:grid;gap:16px}
.form .row{display:grid;gap:16px}
@media (min-width:640px){.form .row{grid-template-columns:1fr 1fr}}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
input,select,textarea{width:100%;font:inherit;font-size:16px;padding:14px;border:1px solid #c5cbb6;border-radius:12px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(217,164,65,.4);border-color:var(--honey-deep)}
textarea{min-height:130px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.check input{width:auto;margin-top:5px}
.checks{display:grid;gap:6px 18px}
@media (min-width:640px){.checks{grid-template-columns:1fr 1fr}}
.form-note{font-size:.84rem;color:var(--ink-soft)}
.form-status{font-weight:700}.form-status.ok{color:var(--leaf)}.form-status.err{color:#9b3d1c}
.hp{position:absolute;left:-9999px}
.draft-banner{background:#9b3d1c;color:#fff;text-align:center;padding:10px 16px;font-weight:700;font-size:.9rem;position:relative;z-index:70}

/* ── reveal on scroll ── */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .rain{display:none}
}

/* ── aliases used by generated inner pages ── */
.sec-head{margin-bottom:34px}.sec-head .label{color:var(--moss);margin-bottom:10px}
.canopy .sec-head .label,.roots .sec-head .label{color:var(--dawn)}
.center{text-align:center}.center .lede{margin-inline:auto}
.eyebrow{font-family:var(--label);text-transform:uppercase;letter-spacing:.34em;font-size:.72rem;display:block;margin-bottom:12px;color:var(--moss)}
.tag{display:inline-block;font-family:var(--label);text-transform:uppercase;letter-spacing:.24em;font-size:.64rem;color:var(--honey-deep);margin-bottom:10px}
.canopy .tag{color:var(--dawn)}
.canopy .card h3{color:#fff}.canopy .card .ticks li::before{background:var(--fern)}
.btn-primary{background:var(--canopy);color:var(--mist)}.btn-primary:hover{background:var(--leaf)}
.btn-gold{background:var(--honey);color:#1f1606}.btn-ghost{border-color:currentColor;background:transparent}
.page-sky .aframe{position:absolute;left:50%;transform:translateX(-50%);aspect-ratio:1;z-index:1;pointer-events:none;background:url(/assets/img/haven-triangle.png) 50% 100%/contain no-repeat}
.page-sky .forest{z-index:1}
.case{display:grid;gap:18px;padding:34px 0;border-top:1px solid var(--line)}
.case:first-child{border-top:0}
.case figure{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.case-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.case-meta span{font-family:var(--label);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--moss)}
.case-meta span+span::before{content:"· ";color:var(--honey)}
.facts{display:grid;gap:10px;margin-top:14px}.facts div{display:grid;gap:4px}.facts b{font-family:var(--label);font-weight:400;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--moss)}
@media (min-width:900px){.case{grid-template-columns:1.2fr 1fr;gap:44px;align-items:center}.facts div{grid-template-columns:110px 1fr}}
.card .ticks{margin-top:14px}

/* ── founders (equal billing) ── */
.founders{display:grid;gap:30px;margin-top:70px;align-items:center}
.founders figure{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);position:relative}
.founders figure::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(242,211,122,.35);border-radius:inherit}
.founders img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* Scoped to .founder-pair: a bare .founder rule also hit the Founder-Led card (.path.founder) and stripped its padding. */
.founder-pair .founder{padding:18px 0;border-top:1px solid rgba(238,240,229,.14)}
.founder-pair .founder h3{color:#fff;margin:0}
.founder-title{font-family:var(--display);font-style:italic;color:var(--dawn);font-size:1.25rem;margin:.1em 0 .5em}
.founder-pair .founder .more{color:var(--dawn)}
@media (min-width:900px){.founders{grid-template-columns:1fr 1fr;gap:60px}.founders img{aspect-ratio:4/5}}

/* ── Site Baseline map ── */
.baseline-form{max-width:980px;margin:0 auto}
.bmap-wrap{display:grid;gap:10px;margin-bottom:18px}
.bmap-search{display:flex;flex-wrap:wrap;gap:8px}
.bmap-search input{flex:1 1 240px}
.bmap-search .btn{min-height:48px}
#bmap{height:58svh;min-height:320px;max-height:620px;border-radius:var(--r);border:1px solid var(--line);background:#cfd5c3;z-index:1}
@media (min-width:900px){#bmap{height:520px}}

/* ── mobile hardening (2026-09-29) ── */
/* Letter-spacing adds space after the last glyph; balance it so labels sit centered in pills. */
.btn{padding-left:calc(1.6em + .16em)}
/* Small phones: long uppercase buttons may wrap instead of overflowing their card. */
@media (max-width:480px){
  .btn{white-space:normal;text-align:center;line-height:1.3;padding:12px 1.4em;min-height:48px}
  .btn-row .btn{flex:1 1 auto}
  .path{padding:26px 20px}
  .cta{padding:30px 20px}
  .card{padding:22px 18px}
  .portal{padding:26px 18px}
}
/* Partner cards: one column on the narrowest phones. */
@media (max-width:360px){.nodes{grid-template-columns:1fr}.stage img{width:92px;height:68px}}
/* Tap targets: the small "→" links get a real hit area. */
.more,.svc .go{display:inline-block;padding:10px 0;min-height:44px}
/* Notched phones in landscape. */
.wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
/* Nothing may push the page sideways. */
main,section{max-width:100%;overflow-x:clip}