/* =============================================================
   EVO LIVING
   Type:   Fraunces (display, light) + Hanken Grotesk (text)
   Colour: brand evergreen / journey orange / cream / sage,
           warmed with a sunlit gold for "refresh & hope"
   Motion: orchestrated brand-mark, scroll reveals, drawing path
   Motif:  the real Evo icon — O · house · door · path
   ============================================================= */

/* ---------- tokens ---------- */
:root{
  --ever:#0A664D;
  --ever-deep:#063D2C;
  --ever-tint:#EAF1EC;
  --orange:#D3792F;
  --orange-deep:#B9641F;
  --tang:#DE7F33;          /* interactive orange, a touch warmer */
  --gold:#E7B45A;          /* sunlit accent — use sparingly */
  --gold-soft:#F7E7C9;
  --cream:#F6EDE0;
  --cream-2:#FCF8F1;
  --sage:#A7B9AA;
  --sage-tint:#E7EDE6;
  --char:#20241F;
  --ink:#43473F;           /* body — warm green-grey, chosen not default */
  --paper:#FFFFFF;
  --hair:#EAE1D1;
  --line:rgba(32,36,31,.10);

  --font-display:"Fraunces","Georgia","Times New Roman",serif;
  --font-text:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  --h1:clamp(2.55rem, 1.7rem + 3.4vw, 4.5rem);
  --h2:clamp(1.8rem, 1.35rem + 1.9vw, 2.7rem);
  --h3:clamp(1.2rem, 1.08rem + 0.5vw, 1.42rem);
  --lead:clamp(1.08rem, 1rem + 0.4vw, 1.3rem);

  --container:1160px;
  --narrow:820px;
  --gutter:clamp(1.25rem, 5vw, 3rem);
  --section-y:clamp(3.75rem, 7.5vw, 7rem);
  --radius:20px;
  --radius-lg:28px;
  --radius-sm:12px;

  --shadow-sm:0 10px 28px -20px rgba(20,40,32,.35);
  --shadow:0 24px 50px -32px rgba(12,50,36,.42);
  --shadow-lg:0 44px 80px -50px rgba(6,45,32,.55);

  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.34s;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-text);
  font-weight:400;
  font-size:1rem;
  line-height:1.64;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,picture,video{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--ever);
  font-optical-sizing:auto;
  text-wrap:balance;
}
h1{font-size:var(--h1);letter-spacing:-.02em}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
strong{font-weight:600;color:var(--char)}
em{font-style:italic}
:focus-visible{outline:2.5px solid var(--ever);outline-offset:3px;border-radius:4px}

/* ---------- utilities ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:var(--narrow)}
.section{padding-block:var(--section-y);position:relative}
.section--cream{background:var(--cream-2)}
.section--cream-deep{background:var(--cream)}
.section--paper{background:var(--paper)}
.section--evergreen{background:var(--ever);color:rgba(255,255,255,.85)}
.section--evergreen :is(h1,h2,h3,h4){color:#fff}
.section--gradient{background:radial-gradient(130% 150% at 82% 4%,#0f7d5d,var(--ever) 52%,var(--ever-deep));color:rgba(255,255,255,.86)}
.section--gradient :is(h1,h2,h3){color:#fff}
.center{text-align:center}
.measure{max-width:62ch}
.mx-auto{margin-inline:auto}
.stack>*+*{margin-top:1.1rem}
.stack-lg>*+*{margin-top:1.9rem}
.skip-link{position:absolute;left:1rem;top:-3.5rem;background:var(--ever);color:#fff;padding:.7rem 1.1rem;border-radius:8px;z-index:200;transition:top .2s var(--ease)}
.skip-link:focus{top:1rem}

/* eyebrow + drawing path */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-text);font-size:.74rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--tang);margin-bottom:1.15rem;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--tang)}
.section--evergreen .eyebrow,.section--gradient .eyebrow{color:var(--gold)}

.path-rule{display:block;width:132px;height:16px;overflow:visible;margin-top:1.5rem}
.path-rule path{fill:none;stroke:var(--tang);stroke-width:3;stroke-linecap:round;stroke-dasharray:230;stroke-dashoffset:230}
.is-in .path-rule path,.path-rule.is-in path{animation:draw 1.1s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-text);font-weight:600;font-size:.97rem;
  padding:.92rem 1.75rem;min-height:52px;
  background:var(--tang);color:#fff;border:1.5px solid var(--tang);border-radius:999px;
  text-decoration:none;cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn:hover{background:var(--orange-deep);border-color:var(--orange-deep);transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(185,100,31,.55)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ever);border-color:color-mix(in srgb,var(--ever) 32%,transparent)}
.btn--ghost:hover{background:var(--ever);color:#fff;border-color:var(--ever);box-shadow:0 16px 30px -18px rgba(10,102,77,.5)}
.section--evergreen .btn--ghost,.section--gradient .btn--ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.section--evergreen .btn--ghost:hover,.section--gradient .btn--ghost:hover{background:#fff;color:var(--ever);border-color:#fff}
.btn--lg{min-height:58px;padding:1.05rem 2.1rem;font-size:1.02rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem}
.btn-row.is-centered{justify-content:center}

.link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-text);font-weight:600;color:var(--ever);text-decoration:none;transition:gap var(--dur) var(--ease),color var(--dur) var(--ease)}
.link-arrow::after{content:"\2192";transition:transform var(--dur) var(--ease)}
.link-arrow:hover{color:var(--orange-deep);gap:.6rem}
.link-arrow:hover::after{transform:translateX(3px)}
.section--evergreen .link-arrow,.section--gradient .link-arrow{color:#fff}

/* =============================================================
   Header
   ============================================================= */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding-block:.85rem}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand__logo{height:46px;width:auto;display:block}
@media (max-width:600px){.brand__logo{height:38px}}

.nav-toggle{display:none;align-items:center;gap:.5rem;background:transparent;border:1.5px solid color-mix(in srgb,var(--ever) 30%,transparent);color:var(--ever);border-radius:999px;padding:.5rem .9rem;font-weight:600;cursor:pointer}
.nav-toggle__bars{width:18px;height:12px;position:relative}
.nav-toggle__bars span,.nav-toggle__bars span::before,.nav-toggle__bars span::after{content:"";position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px}
.nav-toggle__bars span{top:5px}
.nav-toggle__bars span::before{top:-5px}
.nav-toggle__bars span::after{top:5px}

.primary-nav ul{list-style:none;padding:0;display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.6rem)}
.primary-nav a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--char);padding-block:.4rem;position:relative;white-space:nowrap}
.primary-nav a[aria-current="page"]{color:var(--ever)}
.primary-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--tang);transition:right .35s var(--ease)}
.primary-nav a:hover::after,.primary-nav a[aria-current="page"]::after{right:0}
.primary-nav .btn{color:#fff;font-size:.85rem;min-height:42px;padding:.45rem 1.1rem}
.primary-nav .btn::after{display:none}

@media (max-width:1040px){
  .nav-toggle{display:inline-flex}
  .primary-nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none}
  .primary-nav.is-open{display:block}
  .primary-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--gutter) 1.4rem}
  .primary-nav li{border-bottom:1px solid var(--line)}
  .primary-nav li:last-child{border-bottom:0;padding-top:1rem}
  .primary-nav a{display:block;padding:.9rem 0;font-size:1.05rem}
  .primary-nav a::after{display:none}
  .primary-nav .btn{justify-content:center}
}

/* =============================================================
   Hero (home)
   ============================================================= */
.hero{background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);padding-block:clamp(2.75rem,6vw,5.5rem);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero__kicker{font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--tang);margin-bottom:1.1rem;display:inline-flex;align-items:center;gap:.7rem}
.hero__kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--tang)}
.hero__title{max-width:15ch;margin-bottom:1.4rem}
.hero__lead{font-size:var(--lead);line-height:1.62;max-width:44ch;color:var(--ink)}
.hero__btns{margin-top:2rem}
.hero__note{margin-top:1.35rem;font-size:.9rem;font-weight:500;color:var(--ink)}
.hero__note a{color:var(--ever);text-decoration:underline;text-underline-offset:2px}
.hero__art{max-width:460px;margin-inline:auto;width:100%}
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr}
  .hero__art{max-width:340px;margin-top:.5rem}
  .mk-evo{height:70px}
  .mk-sig__living{height:26px}
}
@media (max-width:440px){
  .hero__kicker{letter-spacing:.14em;gap:.5rem}
  .hero__kicker::before{width:18px}
}

/* =============================================================
   Hero brand-mark — the "journey" load sequence:
   dark panel -> an orange path winds up through the dark and
   reaches the doorway -> the panel lights up and the home appears.
   Non-blocking: it happens inside the hero panel, page is usable.
   ============================================================= */
.hero__art--photo{position:relative;aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);isolation:isolate}
.hero__photo{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 44%;
  animation:hero-in 1.2s var(--ease) both, hero-breathe 26s ease-in-out 1.2s infinite alternate}
@keyframes hero-in{from{opacity:0}to{opacity:1}}
@keyframes hero-breathe{from{transform:scale(1)}to{transform:scale(1.05)}}

/* faint warm-cream wash */
.hero__art--photo::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--cream);opacity:.05}

/* golden light drifting, as if through trees outside: dappled light + shadow */
.hero__sun{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;
  filter:blur(7px);opacity:.12;background-size:175% 175%;background-position:0% 0%;
  background:
    radial-gradient(38% 30% at 22% 24%, rgba(255,238,196,1),  transparent 70%),
    radial-gradient(30% 26% at 68% 12%, rgba(255,242,210,.95), transparent 70%),
    radial-gradient(34% 40% at 54% 82%, rgba(255,232,182,.85), transparent 76%),
    radial-gradient(26% 24% at 86% 58%, rgba(104,78,44,.62),   transparent 68%),
    radial-gradient(22% 22% at 14% 68%, rgba(96,72,40,.58),    transparent 68%);
  animation:hero-sun 12s ease-in-out infinite alternate}
@keyframes hero-sun{
  0%   {background-position:0% 0%;    opacity:.07}
  50%  {background-position:55% 42%;  opacity:.18}
  100% {background-position:100% 80%; opacity:.10}
}

@media (prefers-reduced-motion:reduce){
  .hero__photo{animation:none;opacity:1;transform:none}
  .hero__sun{animation:none;opacity:.07}
}
.markpanel{position:relative;aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;
  background:#06120E;box-shadow:var(--shadow-lg)}
.markpanel::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease);
  background:radial-gradient(130% 130% at 22% 16%,#0f7d5d 0%,var(--ever) 48%,var(--ever-deep) 100%)}
.markpanel.lit::before{opacity:1}
.markpanel .glow{position:absolute;border-radius:50%;filter:blur(46px);opacity:0;mix-blend-mode:screen;
  transition:opacity 1.2s var(--ease) .15s}
.markpanel.lit .glow{opacity:.5}
.markpanel .glow.g1{width:60%;aspect-ratio:1;background:#4fe39a;left:-14%;top:-10%;animation:drift-a 19s ease-in-out infinite}
.markpanel .glow.g2{width:54%;aspect-ratio:1;background:var(--gold);right:-16%;bottom:-9%;animation:drift-b 24s ease-in-out infinite}
@keyframes drift-a{0%,100%{transform:translate(0,0)}50%{transform:translate(15%,11%)}}
@keyframes drift-b{0%,100%{transform:translate(0,0)}50%{transform:translate(-12%,-8%)}}
.markpanel .mark{position:absolute;inset:0;margin:auto;width:76%;height:76%;overflow:visible}
.mk-disc,.mk-house,.mk-door{transform-box:fill-box;transform-origin:center}
.mk-disc{fill:var(--ever);opacity:0;transform:scale(.82)}
.mk-house{fill:var(--cream);opacity:0;transform:scale(.5)}
.mk-door{fill:var(--ever-deep);opacity:0;transform:scale(.6)}
.mk-path{fill:var(--orange);transform-box:fill-box;transform-origin:left center;opacity:0;transform:scaleX(0)}
/* the journey path: a tapered ribbon — as wide as the orange threshold
   where it meets the door, flaring wider the further it runs from it */
.mk-trail{fill:var(--orange);opacity:0;filter:drop-shadow(0 -3px 12px rgba(224,127,51,.5))}
.mk-trail-wipe{transform-box:fill-box;transform-origin:center bottom;transform:scaleY(1)}
.mark-play .mk-trail{animation:mk-trail 2.6s var(--ease) forwards}
.mark-play .mk-trail-wipe{animation:trail-wipe 1.25s var(--ease) .05s both}
.mark-play .mk-path{animation:mk-io .7s var(--ease) 1.2s forwards}
.mark-play .mk-disc{animation:mk-io .7s var(--ease) 1.4s forwards}
.mark-play .mk-house{animation:mk-io .65s var(--ease) 1.65s forwards}
.mark-play .mk-door{animation:mk-io .65s var(--ease) 1.9s forwards}
@keyframes mk-io{to{opacity:1;transform:none}}
@keyframes trail-wipe{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes mk-trail{0%{opacity:0}10%{opacity:1}68%{opacity:1}100%{opacity:0}}
/* instant final state (reduced-motion, or fallback) */
.markpanel.mark-shown::before{opacity:1;transition:none}
.markpanel.mark-shown .glow{opacity:.5;transition:none}
.markpanel.mark-shown .mk-disc,.markpanel.mark-shown .mk-house,
.markpanel.mark-shown .mk-door,.markpanel.mark-shown .mk-path{opacity:1;transform:none;animation:none}
.markpanel.mark-shown .mk-trail{opacity:0;animation:none}

/* phase 2 — once the mark has resolved it recedes and the full "Evo Living"
   lockup assembles itself: EV slides in beside the O, LIVING slides up, the
   tagline fades in last. Ties the animated symbol to the real logo. */
.markpanel.mark-signed .mark{opacity:0;transform:scale(.5);
  transition:opacity .6s var(--ease),transform .7s var(--ease)}

.mk-sig{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(.35rem,2.2%,.7rem);opacity:0;transition:opacity .5s var(--ease) .1s;pointer-events:none}
.markpanel.mark-signed .mk-sig{opacity:1}

.mk-evo{height:96px;width:auto;display:block;overflow:visible}
.mk-evo__ev{opacity:0;transform:translateX(-16px);
  transition:opacity .5s var(--ease) .42s,transform .5s var(--ease) .42s}
.mk-evo__o{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(1.5);
  transition:opacity .45s var(--ease) .08s,transform .6s var(--ease) .08s}
.markpanel.mark-signed .mk-evo__ev{opacity:1;transform:none}
.markpanel.mark-signed .mk-evo__o{opacity:1;transform:none}

.mk-sig__living{height:34px;width:auto;display:block;opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease) .78s,transform .5s var(--ease) .78s}
.markpanel.mark-signed .mk-sig__living{opacity:1;transform:none}

.mk-sig__tag{margin:0;font-size:.6rem;font-weight:500;letter-spacing:.26em;text-indent:.26em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease) .95s,transform .5s var(--ease) .95s}
.markpanel.mark-signed .mk-sig__tag{opacity:1;transform:none}

/* phase 3 — the assembled lockup gives way to a photo of recovery in
   motion; the logo drops to a small corner watermark */
.mk-photo{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease);pointer-events:none;isolation:isolate}
.mk-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;
  animation:hero-breathe 26s ease-in-out infinite alternate}
/* same warm light drift as the homepage hero */
.mk-sun{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;filter:blur(7px);opacity:.12;
  background-size:170% 170%;background-position:0% 0%;
  background:
    radial-gradient(38% 30% at 22% 24%, rgba(255,239,201,.95), transparent 72%),
    radial-gradient(30% 26% at 68% 12%, rgba(255,243,214,.85), transparent 72%),
    radial-gradient(34% 40% at 54% 82%, rgba(255,234,188,.70), transparent 78%),
    radial-gradient(24% 22% at 86% 58%, rgba(122,94,54,.50),   transparent 70%),
    radial-gradient(20% 20% at 14% 68%, rgba(112,86,48,.45),   transparent 70%);
  animation:hero-sun 17s ease-in-out infinite alternate}
.mk-watermark{position:absolute;left:clamp(1rem,4%,1.5rem);top:clamp(1rem,4%,1.5rem);
  height:clamp(30px,11%,44px);width:auto;opacity:0;
  transition:opacity .9s var(--ease) .2s;filter:drop-shadow(0 1px 5px rgba(255,247,232,.7));pointer-events:none}
.markpanel.mark-photo .mk-photo{opacity:1}
.markpanel.mark-photo .mk-watermark{opacity:1}
.markpanel.mark-photo .mk-sig{opacity:0;transition:opacity .8s var(--ease)}
/* no-JS: skip straight to the photo rather than an empty dark panel */
html:not(.js) .mk-photo,html:not(.js) .mk-watermark{opacity:1}

/* =============================================================
   Section headers
   ============================================================= */
.section-head{max-width:58ch;margin-bottom:2.75rem}
.section-head.is-centered{margin-inline:auto;text-align:center}
.section-head.is-centered .eyebrow{justify-content:center}
.section-head p{margin-top:.9rem;font-size:var(--lead);color:var(--ink)}
.section--evergreen .section-head p,.section--gradient .section-head p{color:rgba(255,255,255,.82)}

/* =============================================================
   Reveal (safe: visible by default; JS + IO add the motion)
   ============================================================= */
.reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(36px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*85ms)}
.js .reveal.is-in{opacity:1;transform:none}

/* card grids, step and stat rows: each item slides up, scales in and fades
   as it scrolls into view, cascading across the row (--n set per child by JS) */
.js .reveal-stagger > *{opacity:0;transform:translateY(38px) scale(.955);
  transition:opacity .5s var(--ease),transform .62s var(--ease);
  transition-delay:calc(var(--n,0)*95ms)}
.js .reveal-stagger > *.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;transition:none}
  .js .reveal-stagger > *{opacity:1!important;transform:none!important;transition:none;animation:none!important}
  .path-rule path{stroke-dashoffset:0!important}
  .markpanel::before,.markpanel .glow{opacity:1!important;transition:none!important}
  .markpanel .glow{opacity:.5!important}
  .mk-disc,.mk-house,.mk-door,.mk-path{opacity:1!important;transform:none!important;animation:none!important}
  .mk-trail{opacity:0!important;animation:none!important}
  .markpanel.mark-signed .mark{opacity:0!important}
  .mk-evo__ev,.mk-evo__o,.mk-sig__living,.mk-sig__tag{opacity:1!important;transform:none!important;transition:none!important}
  .mk-photo img{animation:none!important;transform:none!important}
  .mk-sun{animation:none!important;opacity:.045!important}
  .markpanel.mark-photo .mk-sig{opacity:0!important}
  .mk-photo,.mk-watermark{opacity:1!important;transition:none!important}
  .track .prog{stroke-dashoffset:0!important}
  .track.is-in .rover{left:calc(100% - 32px)!important}
  .card::before{transform:scaleX(1)!important}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important}
}

/* =============================================================
   Grid + cards
   ============================================================= */
.grid{display:grid;gap:clamp(1.1rem,2.5vw,1.75rem)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

.card{
  position:relative;background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.15rem);overflow:hidden;height:100%;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--tang),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card:hover::before{transform:scaleX(1)}
.card h3{margin-bottom:.5rem;color:var(--char)}
.card p{color:var(--ink)}
.card--plain{box-shadow:none}
.card--plain::before{display:none}
.card--plain:hover{transform:none;box-shadow:var(--shadow-sm)}
.card__ico{width:52px;height:52px;display:grid;place-content:center;border-radius:14px;background:var(--ever-tint);color:var(--ever);margin-bottom:1.15rem}
.card__ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.section--evergreen .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.section--evergreen .card::before{opacity:.8}
.section--evergreen .card p{color:rgba(255,255,255,.82)}
.section--evergreen .card__ico{background:rgba(255,255,255,.1);color:#fff}

/* home name plates */
.home-names{list-style:none;padding:0;margin:.5rem 0 0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.home-names li{position:relative;padding:1.15rem 1.25rem 1.15rem 1.5rem;
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius-sm);
  font-family:var(--font-display);font-size:1.2rem;color:var(--char);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.home-names li::before{content:"";position:absolute;left:0;top:.9rem;bottom:.9rem;width:4px;
  border-radius:0 4px 4px 0;background:var(--ever)}
.home-names li:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.homes-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(.7rem,1.6vw,1.1rem);margin-top:2.25rem}
.homes-photos figure{margin:0}
.homes-photos .ph{display:block;aspect-ratio:4/3;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.homes-photos img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.homes-photos figcaption{margin-top:.5rem;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink)}
.homes-detail{margin-top:2.5rem;max-width:60ch}
.homes-detail .ticks{margin-top:1rem}
.homes-note{margin-top:1.9rem;font-size:.9rem;color:var(--ink);opacity:.8;max-width:64ch}

/* steps */
.steps{counter-reset:step;display:grid;gap:1.1rem}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:start;
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,1.9rem);box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-weight:400;font-size:1.15rem;color:var(--tang);padding-top:.15rem;letter-spacing:.02em}
.step h3{margin-bottom:.3rem;color:var(--char)}

/* flowing steps under the track (no card chrome) */
.steps--flow{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem)}
.steps--flow .step{display:block;background:transparent;border:0;box-shadow:none;padding:0}
.steps--flow .step:hover{transform:none;box-shadow:none}
.steps--flow .step::before{content:none}
.steps--flow .step h3 b{font-family:var(--font-display);color:var(--tang);margin-right:.45rem;font-weight:400}
@media (max-width:820px){.steps--flow{grid-template-columns:1fr}}

/* travelling-mark track (how it works) */
.track{position:relative;height:56px;margin:.5rem 0 2.25rem;overflow:hidden}
.track .rail-svg{width:100%;height:100%;display:block}
.track .rail{fill:none;stroke:var(--tang);stroke-width:3;stroke-linecap:round;stroke-dasharray:5 11;opacity:.4}
.track .prog{fill:none;stroke:var(--tang);stroke-width:4;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000}
.track.is-in .prog{animation:draw-line 1.7s var(--ease) forwards}
@keyframes draw-line{to{stroke-dashoffset:0}}
.track .rover{position:absolute;top:12px;left:0;width:32px;height:32px;transition:left 1.8s var(--ease)}
.track.is-in .rover{left:calc(100% - 32px)}

/* split feature blocks */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--flip .split__media{order:2}
.home-photo{display:block;width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:2.25rem}.split--flip .split__media{order:0}.split__media{max-width:440px}.split__media,.home-photo{margin-inline:auto}}
.split h2{font-size:clamp(1.6rem,1.3rem + 1.5vw,2.35rem)}
.split p{color:var(--ink)}

/* tick list */
.ticks{list-style:none;padding:0;display:grid;gap:.8rem}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start}
.ticks li::before{content:"";width:16px;height:4px;margin-top:.6em;border-radius:999px;background:var(--tang)}
.section--evergreen .ticks li::before{background:var(--gold)}

/* =============================================================
   Stats
   ============================================================= */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat__num{font-family:var(--font-display);font-weight:400;font-size:clamp(2.3rem,1.6rem + 2.2vw,3.4rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:0}
.stat__label{color:rgba(255,255,255,.78);font-size:.9rem;margin-top:.5rem}

/* =============================================================
   CTA band
   ============================================================= */
.cta-band{text-align:center}
.cta-band h2{max-width:22ch;margin-inline:auto}
.cta-band p{max-width:48ch;margin:1.1rem auto 2rem;font-size:var(--lead)}
.cta-band.on-dark p{color:rgba(255,255,255,.86)}

/* =============================================================
   FAQ
   ============================================================= */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:.8rem}
.faq details{background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;transition:box-shadow var(--dur) var(--ease)}
.faq details[open]{box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;list-style:none;padding:1.2rem 1.5rem;font-family:var(--font-display);font-weight:400;font-size:1.12rem;color:var(--ever);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--tang);transition:transform var(--dur) var(--ease);font-family:var(--font-text)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 1.5rem 1.4rem;color:var(--ink)}

/* =============================================================
   Resources
   ============================================================= */
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
@media (max-width:720px){.res-grid{grid-template-columns:1fr}}
.res{background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);padding:clamp(1.4rem,3vw,1.9rem);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.res:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.res h3{font-size:1.12rem;margin-bottom:.35rem;color:var(--char)}
.res p{font-size:.95rem;margin-bottom:.8rem}
.res__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:baseline;font-size:.95rem}
.res__meta a{color:var(--ever);font-weight:600;text-decoration:none}
.res__meta a:hover{color:var(--orange-deep)}
.res__tel{font-weight:600;color:var(--char)}
.res--urgent{border-color:rgba(211,121,47,.45);background:#FFF8F0}

/* =============================================================
   Forms
   ============================================================= */
.form{display:grid;gap:1.2rem;max-width:640px}
.form__row{display:grid;gap:1.2rem;grid-template-columns:1fr 1fr}
@media (max-width:600px){.form__row{grid-template-columns:1fr}}
.field{display:grid;gap:.4rem}
.field label{font-weight:600;font-size:.92rem;color:var(--ever)}
.field .req{color:var(--tang)}
.field input,.field select,.field textarea{padding:.85rem 1rem;border:1.5px solid var(--hair);border-radius:var(--radius-sm);background:var(--paper);transition:border-color .15s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--tang)}
.field textarea{min-height:140px;resize:vertical}
.form__note{font-size:.85rem;color:var(--ink);opacity:.85}
.form__note--warn{opacity:1;margin-top:1rem;padding:.85rem 1rem;border:1px solid var(--tang);
  border-left-width:4px;border-radius:var(--radius-sm);background:#fbeee2;color:var(--char);font-size:.9rem}
.form__note--warn a{color:var(--ever);font-weight:600}
.form__success{display:none;background:var(--ever);color:#fff;padding:1rem 1.25rem;border-radius:var(--radius-sm);font-weight:500}
.form__success.is-visible{display:block}

/* multi-section intake form */
.form--intake{max-width:none;gap:2rem}
.form__section{border:0;padding:0;margin:0;display:grid;gap:1.15rem}
.form__section legend{font-family:var(--font-display);font-weight:400;font-size:1.35rem;color:var(--char);
  padding:0 0 .7rem;margin-bottom:.35rem;border-bottom:1px solid var(--line);width:100%}
.form__row--3{grid-template-columns:2fr 1fr 1fr}
@media (max-width:600px){.form__row--3{grid-template-columns:1fr}}
.field__label{font-weight:600;font-size:.92rem;color:var(--ever)}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.5rem .9rem}
.checks label,.yn label,.field--check label{display:flex;gap:.55rem;align-items:flex-start;font-weight:400;
  font-size:.95rem;color:var(--ink);cursor:pointer}
.checks input,.yn input,.field--check input{margin-top:.15rem;width:1.05rem;height:1.05rem;flex:none;accent-color:var(--ever)}
.yn{display:flex;gap:1.5rem}
.field--check{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.15rem}
.field--check label{font-size:.9rem}

/* Apply page — "what to expect" card + button to the Sobriety Hub form */
.apply-card{background:var(--cream);border:1px solid var(--hair);border-radius:var(--radius);
  padding:clamp(1.75rem,5vw,2.75rem)}
.apply-card > h2{margin:.1rem 0 .6rem}
.apply-card > p{color:var(--ink)}
.apply-steps{list-style:none;counter-reset:step;margin:1.4rem 0;padding:0;display:grid;gap:.7rem}
.apply-steps li{counter-increment:step;display:flex;align-items:center;gap:.85rem;font-weight:500;color:var(--char)}
.apply-steps li::before{content:counter(step);flex:none;width:1.7rem;height:1.7rem;
  display:grid;place-items:center;border-radius:50%;background:var(--ever);color:#fff;
  font-family:var(--font-text);font-size:.82rem;font-weight:600}
.apply-have{font-size:.9rem;color:var(--ink);margin:0 0 1.5rem}
.apply-open{margin-top:.25rem}
.apply-alt{margin:.9rem 0 0;font-size:.85rem;color:var(--ink)}
.apply-alt a{color:var(--ever);text-decoration:underline;text-underline-offset:2px}

/* "how can we help?" widget */
.helpbox{position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);z-index:200;
  display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;pointer-events:none}
.helpbox__launch{pointer-events:auto;position:relative;width:118px;height:118px;flex:0 0 auto;
  transition:transform var(--dur) var(--ease)}
.helpbox__open{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;
  border-radius:50%;overflow:hidden;background:#0b1a14;
  box-shadow:0 16px 36px -12px rgba(6,45,32,.55), 0 0 0 3px #fff, inset 0 0 0 1px rgba(255,255,255,.06)}
.helpbox__launch-vid{width:100%;height:100%;object-fit:cover;object-position:50% 4%;display:block}
.helpbox__launch:hover{transform:translateY(-2px) scale(1.03)}
.helpbox__open:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.helpbox__unmute{position:absolute;right:0;bottom:4px;width:36px;height:36px;padding:0;cursor:pointer;
  border:2px solid #fff;border-radius:50%;background:var(--ever);color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 14px -4px rgba(6,45,32,.55);transition:background .15s var(--ease),transform .15s var(--ease)}
.helpbox__unmute:hover{transform:scale(1.06)}
.helpbox__unmute:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.helpbox__unmute[aria-pressed="true"]{background:var(--tang)}
.helpbox__unmute svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.helpbox__unmute .i-on{display:none}
.helpbox__unmute[aria-pressed="true"] .i-off{display:none}
.helpbox__unmute[aria-pressed="true"] .i-on{display:block}
.js .helpbox__launch{animation:hb-pop .5s var(--ease) both}
@keyframes hb-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* minimize control + collapsed state */
.helpbox__launch{transition:transform var(--dur) var(--ease),width .25s var(--ease),height .25s var(--ease)}
.helpbox__min{position:absolute;top:-5px;right:-5px;z-index:4;width:26px;height:26px;padding:0;cursor:pointer;
  border:2px solid #fff;border-radius:50%;background:var(--char);color:#fff;display:grid;place-items:center;
  opacity:.92;box-shadow:0 4px 10px -3px rgba(0,0,0,.45);
  transition:opacity .15s var(--ease),transform .15s var(--ease)}
.helpbox__launch:hover .helpbox__min{opacity:1;transform:scale(1.1)}
.helpbox__min svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.helpbox__min:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* collapsed: small circle, keep the listen button, drop the minus */
.helpbox.is-min .helpbox__launch{width:54px;height:54px}
.helpbox.is-min .helpbox__min{display:none}
.helpbox.is-min .helpbox__unmute{width:24px;height:24px;right:-3px;bottom:-3px;border-width:1.5px}
.helpbox.is-min .helpbox__unmute svg{width:12px;height:12px}
.helpbox.is-min .helpbox__greet{display:none!important}
.helpbox.is-min .helpbox__open{box-shadow:0 10px 24px -10px rgba(6,45,32,.5),0 0 0 3px #fff}
@media (max-width:600px){.helpbox.is-min .helpbox__launch{width:50px;height:50px}}

.helpbox__panel{width:min(340px,calc(100vw - 2rem));background:var(--paper);border:1px solid var(--hair);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:1.4rem 1.4rem 1.5rem;
  transform-origin:bottom right}
.js .helpbox__panel[hidden]{display:block;opacity:0;transform:scale(.94) translateY(8px);pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.js .helpbox__panel:not([hidden]){opacity:1;transform:none;pointer-events:auto;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.helpbox__close{position:absolute;top:.6rem;right:.7rem;border:0;background:transparent;font-size:1.5rem;
  line-height:1;color:var(--ink);cursor:pointer;padding:.2rem .4rem;border-radius:8px}
.helpbox__close:hover{background:var(--cream)}
.helpbox__panel{position:relative}
.helpbox__head{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.helpbox__face{width:46px;height:46px;flex:0 0 auto;border-radius:50%;object-fit:cover;object-position:50% 12%;background:#0b1a14}
.helpbox__head strong{display:block;font-size:.95rem;color:var(--char)}
.helpbox__head span{font-size:.8rem;color:var(--ink)}
.helpbox__lead{font-size:.92rem;color:var(--ink);margin:0 0 1rem}
.helpbox__lead a{color:var(--ever);font-weight:600}
.helpbox__actions{display:grid;gap:.55rem}
.helpbox__actions a{display:block;padding:.7rem .9rem;border:1px solid var(--hair);border-radius:var(--radius-sm);
  text-decoration:none;color:var(--char);font-weight:600;font-size:.92rem;transition:border-color .15s var(--ease),background .15s var(--ease)}
.helpbox__actions a:hover{border-color:var(--tang);background:var(--cream)}
.helpbox__actions a.is-urgent{color:var(--tang)}

/* hover caption beside the Eva circle */
.helpbox__greet{pointer-events:none;align-self:flex-end;max-width:230px;margin:0 .4rem 0 0;
  background:var(--paper);color:var(--char);border:1px solid var(--hair);
  border-radius:16px 16px 4px 16px;box-shadow:var(--shadow-lg);padding:.6rem .85rem;
  font-size:.92rem;font-weight:600;line-height:1.3}
.js .helpbox__greet[hidden]{display:block;opacity:0;transform:translateY(6px) scale(.96);
  transition:opacity .18s var(--ease),transform .18s var(--ease)}
.js .helpbox__greet:not([hidden]){opacity:1;transform:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}

@media (max-width:600px){
  .helpbox{left:1rem;right:1rem;align-items:flex-end}
  .helpbox__panel{width:auto}
}
@media (max-width:600px){
  .helpbox__launch{width:96px;height:96px}
  .helpbox__unmute{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){
  .js .helpbox__launch{animation:none}
  .js .helpbox__panel[hidden],.js .helpbox__panel:not([hidden]),
  .js .helpbox__greet[hidden],.js .helpbox__greet:not([hidden]){transition:none}
}

/* contact detail list */
.contact-list{list-style:none;padding:0;display:grid;gap:1.4rem}
.contact-list li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.contact-list .card__ico{margin:0;flex-shrink:0}
.contact-list a{color:var(--ever);font-weight:600;text-decoration:none}
.contact-list a:hover{color:var(--orange-deep)}
.contact-list span{display:block;font-size:.85rem;color:var(--ink);opacity:.75;margin-top:.15rem}

/* =============================================================
   Footer
   ============================================================= */
.site-footer{background:var(--char);color:rgba(255,255,255,.7);padding-block:clamp(3rem,6vw,4.5rem)}
.site-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(1.75rem,4vw,3.5rem)}
@media (max-width:860px){.site-footer__grid{grid-template-columns:1fr 1fr;gap:2.25rem}}
@media (max-width:520px){.site-footer__grid{grid-template-columns:1fr}}
.site-footer__brand{display:block;margin-bottom:1.15rem}
.footer-logo{height:54px;width:auto;display:block}
.site-footer h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.95rem;font-family:var(--font-text);font-weight:600}
.site-footer ul{list-style:none;padding:0;display:grid;gap:.65rem}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:#fff}
.site-footer__legal{margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:.83rem}
.site-footer__legal p{max-width:66ch}

/* =============================================================
   Interior page hero
   ============================================================= */
.page-hero{background:radial-gradient(130% 160% at 85% 0%,#0f7d5d,var(--ever) 55%,var(--ever-deep));color:rgba(255,255,255,.86);padding-block:clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;width:40%;aspect-ratio:1;right:-6%;top:-30%;border-radius:50%;background:var(--gold);filter:blur(70px);opacity:.28;mix-blend-mode:screen}
/* faint doorway outline — brand motif, decorative only */
.page-hero::before{content:"";position:absolute;right:clamp(-90px,4vw,60px);bottom:-46%;width:min(340px,42vw);aspect-ratio:3/4;
  border:2px solid rgba(255,255,255,.10);border-radius:50% 50% 14px 14px / 34% 34% 6px 6px;pointer-events:none}
.page-hero h1{color:#fff;max-width:20ch;position:relative}
.page-hero p{color:rgba(255,255,255,.85);font-size:var(--lead);max-width:58ch;margin-top:1rem;position:relative}
.page-hero .eyebrow{color:var(--gold)}
.breadcrumb{font-size:.83rem;color:rgba(255,255,255,.62);margin-bottom:1rem;position:relative}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{color:#fff}

/* =============================================================
   Editor note (delete before launch)
   ============================================================= */
.editor-note{background:repeating-linear-gradient(45deg,#FFF7EC,#FFF7EC 12px,#FFEFD6 12px,#FFEFD6 24px);border:2px dashed var(--tang);border-radius:12px;padding:.9rem 1.15rem;font-size:.88rem;color:var(--char)}
.editor-note strong{color:var(--orange-deep)}