/*
  The home page (views.tsx → HomeView, homeArt.tsx for the drawings).

  The same brand as the house pages: paper, one ink, sage for the line, the light
  display weight for everything large, the site's squared corners. Nothing dark but the
  two photographs that open and close the page. Sections breathe; each says one thing.
*/
.hm{--hm-line:#4C574A;--hm-soft:#8A9486;--hm-earth:#ECE7DA;--hm-dot:#CFC7B3;--hm-glass:#D6E3EB;--hm-water:#7FA3BF;--hm-warm:#E3B77A;
  --hm-sec:clamp(96px,12vw,176px);overflow-x:clip}
.hm-label{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 clamp(18px,2vw,26px)}
.hm-h2{font-weight:300;font-size:clamp(2.3rem,5.2vw,4.6rem);line-height:1.02;letter-spacing:-.035em;color:var(--ink);max-width:16ch;text-wrap:balance;margin:0}
.hm-h3{font-weight:400;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.08;letter-spacing:-.025em;margin:0}
.hm-lead{font-size:clamp(1.15rem,1.55vw,1.4rem);line-height:1.5;color:var(--ink-soft);max-width:44ch;margin:clamp(22px,2.6vw,34px) 0 0;text-wrap:pretty}
.hm-body{font-size:17px;line-height:1.62;color:var(--ink-soft);max-width:52ch;margin:clamp(18px,2vw,26px) 0 0;text-wrap:pretty}
.hm-sec{padding:var(--hm-sec) 0}
.hm-sec + .hm-sec{padding-top:0}

/* buttons: the site's squared, quiet ones */
.hm-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:var(--r);background:var(--ink);color:var(--paper);
  font-size:15px;font-weight:500;letter-spacing:-.005em;transition:background .2s,transform .12s}
.hm-btn:hover{background:#101410}
.hm-btn:active{transform:scale(.985)}
.hm-btn-light{background:rgba(247,245,240,.94);color:var(--ink);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hm-btn-light:hover{background:#fff}
.hm-link-light{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:15px;font-weight:500;padding:14px 4px}
.hm-link-light svg,.hm-go svg{width:15px;height:15px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.hm-link-light:hover svg,.hm-go:hover svg{transform:translateX(3px)}
.hm-go{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(22px,2.4vw,32px);font-size:15px;font-weight:500;color:var(--ink);
  padding-bottom:3px;border-bottom:1px solid var(--line-2);transition:border-color .2s}
.hm-go:hover{border-color:var(--ink)}

/* ---------- 01 · hero ---------- */
.hm-hero{position:relative;padding:12px;min-height:100svh;display:flex}
.hm-hero-media{position:absolute;inset:12px;border-radius:var(--r-lg);overflow:hidden;background:var(--earth)}
.hm-hero-media .ph{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;animation:hm-in 1400ms cubic-bezier(.16,1,.3,1) both}
@keyframes hm-in{from{transform:scale(1.06);opacity:.4}to{transform:none;opacity:1}}
.hm-hero-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,22,16,.34) 0%,rgba(18,22,16,0) 26%,rgba(18,22,16,0) 46%,rgba(18,22,16,.62) 100%)}
.hm-hero-in{position:relative;z-index:2;align-self:flex-end;width:100%;padding-bottom:clamp(40px,7vh,84px);color:#fff}
.hm-h1{font-weight:300;font-size:clamp(2.6rem,6.6vw,6.2rem);line-height:1;letter-spacing:-.04em;max-width:14ch;margin:0;color:#fff;text-wrap:balance}
.hm-h1 span{display:none}
.hm-hero[data-season=summer] [data-s=summer],.hm-hero[data-season=winter] [data-s=winter],.hm-hero[data-season=fallback] [data-s=fallback]{display:block}
.hm-hero-sub{margin:clamp(18px,2vw,26px) 0 0;max-width:40ch;font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.45;color:rgba(255,255,255,.84)}
.hm-hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:clamp(26px,3vw,40px)}

/* ---------- 02 · trust ---------- */
.hm-trust{padding:clamp(36px,4.4vw,60px) 0 clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.hm-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 0;font-size:clamp(15px,1.2vw,17px);color:var(--ink)}
.hm-facts li{display:flex;align-items:center}
.hm-facts li + li::before{content:'';width:4px;height:4px;border-radius:999px;background:var(--sage);margin:0 clamp(14px,1.6vw,22px);opacity:.7}
/* The marks sit on a panel of their own, as on the reference: the label first, quiet
   and small, then the logos in one line of even weight. They are drawn in the site's
   ink and shown a little under full strength, so a row of eight brands still reads as
   one line of the page rather than eight things shouting. */
.hm-marks{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,40px)}
.hm-marks-row{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px clamp(22px,2.6vw,40px);
  padding:8px clamp(20px,2.2vw,28px);border-radius:var(--r-lg);background:var(--paper-2)}
.hm-marks-l{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap}
.hm-marks ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px clamp(22px,2.6vw,40px)}
.hm-marks li{display:flex;align-items:center}
/* the mark itself is the link, and the note arrives in the site's own hover window
   (site.css, [data-tip]). Near the end of a row it hangs from the right edge instead
   of the middle, so it cannot run off the side of a narrow window. */
.hm-mark-a{display:block;color:inherit;border-radius:var(--r-sm)}
.hm-mark-a:focus-visible{outline:2px solid var(--sage);outline-offset:6px}
a.hm-mark-a{cursor:pointer}
.hm-marks li:nth-last-child(-n+2) .hm-mark-a[data-tip]::after{left:auto;right:0;transform:translate(0,6px)}
.hm-marks li:nth-last-child(-n+2) .hm-mark-a[data-tip]:hover::after,
.hm-marks li:nth-last-child(-n+2) .hm-mark-a[data-tip]:focus-visible::after{transform:translate(0,0)}
.hm-mark{display:block;height:50px;width:auto;opacity:.78;transition:opacity .25s}
.hm-marks li:hover .hm-mark{opacity:1}
/* a medium we have no logo for: its name, set as a wordmark of the same weight */
.hm-mark-t{font-size:clamp(16px,1.5vw,19px);font-weight:500;letter-spacing:-.02em;color:var(--ink);opacity:.72;transition:opacity .25s}
.hm-marks li:hover .hm-mark-t{opacity:1}
@media (max-width:760px){.hm-mark{height:40px}.hm-marks-row{gap:2px 22px;padding:6px 16px}.hm-marks ul{gap:2px 22px}}

/* ---------- 03 · the idea and the cross-section ---------- */
.hm-idea-head{margin-bottom:clamp(40px,6vw,90px)}
.hm-cs{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.hm-cs-fig{position:sticky;top:calc(var(--hdr-h) + 4vh);margin:0;padding:clamp(10px,1.4vw,18px);border-radius:var(--r-lg);background:var(--paper-2)}
.cs-svg{display:block;width:100%;height:auto}
.hm-cs-steps{list-style:none;margin:0;padding:0}
.hm-cs-step{min-height:clamp(260px,52vh,520px);padding:clamp(18px,2vw,24px) 0;border-top:1px solid var(--line);opacity:.34;transition:opacity .5s}
.hm-cs-step:last-child{min-height:0;padding-bottom:0}
.hm-cs-step.is-on,.hm-cs:not(.is-live) .hm-cs-step{opacity:1}
.hm-cs-n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--sage-deep)}
.hm-cs-step h3{font-weight:400;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.15;letter-spacing:-.02em;margin:10px 0 0;max-width:18ch}
.hm-cs-step p{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--ink-soft);max-width:34ch}

/* the drawing itself: one line colour, everything else a tint */
.ln{fill:none;stroke:var(--hm-line);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ln.thin{stroke-width:1.2}
.ln.hair{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 5}
.ln.dash{stroke-dasharray:5 6}
.cs-earth{fill:var(--hm-earth)}
.cs-dot{fill:var(--hm-dot)}
.cs-shell{fill:#D8D5CC}
.cs-glass{fill:var(--hm-glass);stroke:var(--hm-line);stroke-width:1.2;vector-effect:non-scaling-stroke}
.cs-warm-0{stop-color:var(--hm-warm);stop-opacity:.55}.cs-warm-1{stop-color:var(--hm-warm);stop-opacity:0}
.cs-sun-0{stop-color:#F2D29A;stop-opacity:.75}.cs-sun-1{stop-color:#F2D29A;stop-opacity:.12}
.cs-sunball{fill:#EFCB8C}
.cs-person{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cs-person circle{fill:var(--paper)}
.cs-t{font-family:var(--mono);font-size:15px;fill:var(--hm-line);letter-spacing:.04em}
.cs-temp{font-family:var(--sans);font-weight:300;font-size:46px;letter-spacing:-.03em;fill:var(--ink)}
.cs-tank{fill:rgba(127,163,191,.22);stroke:var(--hm-water);stroke-width:1.4;vector-effect:non-scaling-stroke}
.ln.water{stroke:var(--hm-water);stroke-dasharray:6 7}
.ln.air{stroke:var(--sage);stroke-dasharray:7 8}
.ln.rain{stroke:var(--hm-water)}
.ln.fade{opacity:.7}
.cs-arrowhead{fill:none;stroke:var(--hm-line);stroke-width:1.4}
.ln.grass{stroke:var(--sage)}
/* layers: dim until their step, drawn in as they arrive */
.cs-l{opacity:.12;transition:opacity .7s ease}
.draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.3,.6,.2,1)}
.ln.dash.draw{stroke-dasharray:1}
.hm-cs-fig.on-1 .cs-l1,.hm-cs-fig.on-2 .cs-l2,.hm-cs-fig.on-2 .cs-roof,.hm-cs-fig.on-3 .cs-l3,.hm-cs-fig.on-4 .cs-l4,.hm-cs-fig.on-5 .cs-l5,.hm-cs-fig.on-6 .cs-l6{opacity:1}
.hm-cs-fig.on-1 .cs-l1 .draw,.hm-cs-fig.on-2 .cs-l2 .draw,.hm-cs-fig.on-2 .cs-roof .draw,.hm-cs-fig.on-3 .cs-l3 .draw,.hm-cs-fig.on-4 .cs-l4 .draw,.hm-cs-fig.on-5 .cs-l5 .draw,.hm-cs-fig.on-6 .cs-l6 .draw{stroke-dashoffset:0}
/* air and water keep moving once they are on */
@keyframes hm-flow{to{stroke-dashoffset:-60}}
.hm-cs-fig.on-4 .cs-l4 .flow,.hm-cs-fig.on-5 .cs-l5 .flow{animation:hm-flow 2.4s linear infinite}
@keyframes hm-curl{0%{transform:translateY(6px);opacity:0}40%{opacity:1}100%{transform:translateY(-10px);opacity:0}}
.hm-cs-fig.on-2 .curl{animation:hm-curl 3.6s ease-in-out infinite;transform-box:fill-box}

/* ---------- 04 · three questions ---------- */
.hm-damp{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:center;
  padding-bottom:clamp(64px,8vw,120px);border-bottom:1px solid var(--line)}
.hm-q-h{font-size:clamp(2.8rem,7vw,6rem)}
.hm-damp-art{margin:0;padding:clamp(20px,3vw,44px);border-radius:var(--r-lg);background:var(--paper-2)}
.hm-damp-art figcaption,.hm-q-photo figcaption,.hm-proof-chart figcaption,.hm-cost-chart figcaption{margin-top:14px;font-size:13.5px;color:var(--ink-muted)}
.art{display:block;width:100%;height:auto;overflow:visible}
.art-t{font-family:var(--sans);font-size:14px;fill:var(--ink)}
.art-t.small{font-size:12px;fill:var(--ink-muted)}
.art-t.muted{fill:var(--ink-muted)}
.art-t.num{font-weight:400;font-size:17px;letter-spacing:-.01em}
.hm-quote{margin:clamp(24px,2.6vw,34px) 0 0;padding-left:20px;border-left:1px solid var(--sage);max-width:46ch}
.hm-quote p{margin:0;font-size:clamp(1.1rem,1.4vw,1.28rem);line-height:1.45;color:var(--ink);letter-spacing:-.01em}
.hm-quote p::before{content:'“'}.hm-quote p::after{content:'”'}
.hm-quote cite{display:block;margin-top:10px;font-style:normal;font-size:13.5px;color:var(--ink-muted)}
.hm-quote.is-small p{font-size:16px}
.hm-quote.is-big{border:0;padding:0}
.hm-quote.is-big p{font-weight:300;font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.22;letter-spacing:-.025em}
.hm-q2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);padding-top:clamp(64px,8vw,120px)}
.hm-q-photo,.hm-q-chart{margin:0 0 clamp(26px,3vw,40px)}
.hm-q-photo .ph{width:100%;aspect-ratio:4/3;object-fit:cover}
.hm-q-chart{padding:clamp(20px,2.6vw,36px) clamp(14px,2vw,26px);border-radius:var(--r-lg);background:var(--paper-2);aspect-ratio:4/3;display:flex;align-items:center}
/* the crack and the drop */
.heal-block{fill:#DCD8CE}
.heal-crack{stroke-dasharray:1;stroke-dashoffset:0}
.heal-crystals{fill:var(--sage);opacity:0}
.heal-drop{fill:var(--hm-water);opacity:0}
.is-seen .heal-crack{animation:hm-crack 6s ease-in-out infinite}
.is-seen .heal-crystals{animation:hm-crystals 6s ease-in-out infinite}
@keyframes hm-crack{0%,10%{stroke-dashoffset:1;opacity:1}28%{stroke-dashoffset:0;opacity:1}62%{opacity:1}80%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes hm-crystals{0%,40%{opacity:0}58%{opacity:1}82%{opacity:.9}100%{opacity:0}}
@keyframes hm-drop1{0%,26%{opacity:0;transform:translateY(0)}30%{opacity:1}40%{opacity:1;transform:translateY(46px)}46%,100%{opacity:0;transform:translateY(50px)}}
@keyframes hm-drop2{0%,74%{opacity:0;transform:translate(0,0)}78%{opacity:1;transform:translate(0,0)}86%{opacity:1;transform:translate(0,46px)}98%{opacity:0;transform:translate(120px,54px)}100%{opacity:0}}
/* the temperature band */
.temp-band{fill:rgba(98,112,94,.14)}
.ln.temp-out{stroke:var(--hm-soft);stroke-width:1.3}
.ln.temp-in{stroke:var(--sage-deep);stroke-width:2}
.was-seen .draw{stroke-dashoffset:0}

/* ---------- 05 · the system ---------- */
.hm-sys{background:var(--paper-2);padding:var(--hm-sec) 0!important;margin:0 12px;border-radius:var(--r-lg)}
.hm-sys-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line-2)}
.hm-sys-item{padding:clamp(26px,3vw,40px) clamp(18px,2.4vw,34px) clamp(30px,3.4vw,46px) 0;border-bottom:1px solid var(--line-2)}
.hm-sys-item:not(:nth-child(3n+1)){padding-left:clamp(18px,2.4vw,34px);border-left:1px solid var(--line-2)}
.art-mk{width:min(200px,70%);margin-bottom:22px}
.hm-sys-stat{margin:0;font-weight:300;font-size:clamp(1.9rem,3vw,2.7rem);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.hm-sys-item h3{margin:14px 0 0;font-weight:500;font-size:17px;letter-spacing:-.01em;transition:color .2s}
a.hm-sys-item{display:block;color:inherit;text-decoration:none}
a.hm-sys-item:hover h3{color:var(--sage-deep)}
a.hm-sys-item:focus-visible{outline:2px solid var(--sage);outline-offset:-2px}
.hm-idea-go{margin-top:clamp(28px,4vw,56px)}
.hm-sys-item p{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.hm-sys-close{margin:clamp(40px,5vw,64px) 0 0;max-width:60ch;font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.5;color:var(--ink)}
.mk-shell{fill:#D8D5CC;stroke:var(--hm-line);stroke-width:1.3;vector-effect:non-scaling-stroke}
.mk-drop{fill:var(--hm-water)}
.mk-sun{fill:#EFCB8C}
.mk-tank{fill:none;stroke:var(--hm-water);stroke-width:1.3}
.mk-fill{fill:rgba(127,163,191,.45);transform-origin:50% 100%;transform-box:fill-box}
.mk-ray{stroke:#D9B067;transform-origin:40px 70px}
.mk-loop{transform-origin:100px 72px}
.is-seen .mk-drop.roll{animation:mk-roll 4s ease-in infinite}
@keyframes mk-roll{0%{transform:translate(0,0);opacity:0}10%{opacity:1}30%{transform:translate(0,32px)}70%{transform:translate(110px,44px);opacity:1}90%,100%{transform:translate(140px,96px);opacity:0}}
.is-seen .mk-heat{animation:hm-curl 3.2s ease-in-out infinite;transform-box:fill-box}
.is-seen .mk-heat.sink{animation-name:mk-sink}
@keyframes mk-sink{0%{transform:translateY(-8px);opacity:0}40%{opacity:1}100%{transform:translateY(10px);opacity:0}}
.is-seen .mk-rain{animation:mk-rain 1.6s linear infinite}
@keyframes mk-rain{from{transform:translateY(-6px);opacity:0}30%{opacity:1}to{transform:translateY(34px);opacity:0}}
.is-seen .mk-fill{animation:mk-fill 4s ease-in-out infinite alternate}
@keyframes mk-fill{from{transform:scaleY(.3)}to{transform:scaleY(1.6)}}
.is-seen .mk-ray{animation:mk-ray 5s ease-in-out infinite alternate}
@keyframes mk-ray{from{transform:rotate(-8deg)}to{transform:rotate(4deg)}}
.is-seen .flow{animation:hm-flow 2.4s linear infinite}
.is-seen .mk-drop.fall{animation:mk-fall 2.8s ease-in infinite}
@keyframes mk-fall{0%{transform:translateY(0);opacity:0}15%{opacity:1}60%{transform:translateY(34px);opacity:1}75%,100%{transform:translateY(40px);opacity:0}}
.is-seen .mk-loop{animation:mk-spin 9s linear infinite}
@keyframes mk-spin{to{transform:rotate(360deg)}}

/* ---------- 06 · living there ---------- */
.hm-feel-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(30px,6vw,100px);align-items:center}
.hm-feel-photos{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:clamp(10px,1.2vw,16px)}
.hm-fp .ph{width:100%;height:100%;object-fit:cover}
.hm-fp.a{grid-column:1/3}
.hm-fp.a .ph{aspect-ratio:16/10}
.hm-fp.b .ph{aspect-ratio:4/5}
.hm-fp.c{align-self:end}
.hm-fp.c .ph{aspect-ratio:1/1}

/* ---------- 07 · proof ---------- */
.hm-proof-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:center}
.hm-proof-chart{margin:0;padding:clamp(22px,3vw,44px);border-radius:var(--r-lg);background:var(--paper-2)}
.hm-proof-chart figcaption span{display:block;margin-top:3px}
.bar-r{fill:var(--sage);transform-origin:50% 100%;transform-box:fill-box;transform:scaleY(0);transition:transform 1.1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 140ms)}
.bar.is-est .bar-r{fill:transparent;stroke:var(--sage);stroke-width:1.4;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
.bar text{opacity:0;transition:opacity .5s;transition-delay:calc(var(--i) * 140ms + 500ms)}
.was-seen .bar-r{transform:none}
.was-seen .bar text{opacity:1}
.hm-tiles{list-style:none;margin:clamp(48px,6vw,90px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.hm-tiles li{padding:clamp(22px,2.6vw,34px) clamp(16px,2vw,28px) 0 0}
.hm-tiles li + li{padding-left:clamp(16px,2vw,28px);border-left:1px solid var(--line)}
.hm-tiles b{display:block;font-weight:300;font-size:clamp(2.2rem,4vw,3.6rem);letter-spacing:-.04em;line-height:1;color:var(--ink)}
.hm-tiles span{display:block;margin-top:10px;font-size:15px;color:var(--ink-muted)}

/* ---------- 08 · peace of mind ---------- */
.hm-peace-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,6vw,100px);align-items:start}
.hm-vgs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px)}
.hm-vgs li{padding:clamp(16px,2vw,24px);border-radius:var(--r-lg);background:var(--paper-2)}
.hm-vgs b{display:block;margin-top:14px;font-weight:500;font-size:16px}
.hm-vgs span{display:block;margin-top:4px;font-size:14.5px;line-height:1.45;color:var(--ink-muted)}
.mk-mound{fill:var(--hm-earth)}
.vg-win{fill:var(--hm-glass);stroke:var(--hm-line);stroke-width:1.2}
.vg-sun{fill:#EFCB8C}
.vg-panel{fill:#8FA0AE}
.is-seen .vg-wind{animation:vg-wind 3s linear infinite}
@keyframes vg-wind{from{transform:translateX(0);opacity:0}20%{opacity:1}80%{opacity:1}to{transform:translateX(150px);opacity:0}}
.is-seen .vg-sway{animation:vg-sway 3s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes vg-sway{0%,100%{transform:skewX(0)}50%{transform:skewX(-14deg)}}
.is-seen .vg-heat{animation:vg-heat 2.6s ease-in-out infinite}
@keyframes vg-heat{0%{transform:translateY(4px);opacity:0}50%{opacity:.8}100%{transform:translateY(-10px);opacity:0}}
.is-seen .vg-quake{animation:vg-quake 4s ease-in-out infinite}
@keyframes vg-quake{0%,60%,100%{transform:translate(0,0)}64%{transform:translate(-2px,1px)}68%{transform:translate(3px,-1px)}72%{transform:translate(-2px,1px)}76%{transform:translate(1px,0)}}
.is-seen .vg-wave{animation:vg-wave 4s ease-in-out infinite}
@keyframes vg-wave{0%,55%{transform:translateX(-26px);opacity:.3}75%{transform:translateX(0);opacity:1}100%{transform:translateX(26px);opacity:.3}}
.is-seen .vg-sun{animation:vg-sun 6s ease-in-out infinite alternate}
@keyframes vg-sun{from{transform:translateY(0)}to{transform:translateY(34px);opacity:.35}}
.is-seen .vg-4 .vg-win{animation:vg-glow 6s ease-in-out infinite alternate}
@keyframes vg-glow{from{fill:var(--hm-glass)}to{fill:#F2D29A}}

/* ---------- 09 · cost ---------- */
.hm-cost-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,6vw,100px);align-items:center}
.hm-cost-figs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:clamp(28px,3vw,40px) 0;border-top:1px solid var(--line)}
.hm-cost-figs div{padding:18px 16px 0 0}
.hm-cost-figs div + div{padding-left:16px;border-left:1px solid var(--line)}
.hm-cost-figs dt{font-size:13.5px;color:var(--ink-muted)}
.hm-cost-figs dd{margin:6px 0 0;font-weight:300;font-size:clamp(1.6rem,2.4vw,2.2rem);letter-spacing:-.03em;color:var(--ink)}
.hm-cost-chart{margin:0;padding:clamp(22px,3vw,44px);border-radius:var(--r-lg);background:var(--paper-2)}
.hm-cost-chart figcaption{margin:0 0 18px;font-size:14px;color:var(--ink)}
.ln.tco-conv{stroke:var(--hm-soft)}
.ln.tco-talpa{stroke:var(--sage-deep);stroke-width:2.2}
.tco-dot{fill:var(--paper-2);stroke:var(--hm-soft);stroke-width:1.4}

/* ---------- 10 · houses ---------- */
.hm-proj-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.hm-proj-head .hm-body{margin:0}
.hm-proj-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(40px,5vw,72px)}
.hm-card{position:relative;display:block;color:inherit}
.hm-card-img{position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);background:var(--paper-2)}
.hm-card-img .ph{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:0;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.hm-card:hover .hm-card-img .ph{transform:scale(1.04)}
.hm-badge{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--r);
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:13px;color:var(--ink-soft)}
.hm-badge i{width:7px;height:7px;border-radius:999px;background:#6EE24B}
.hm-card-b{display:grid;gap:3px;margin-top:14px;padding-right:40px}
.hm-card-b b{font-weight:400;font-size:17px;letter-spacing:-.01em}
.hm-card-b span{font-size:14px;color:var(--ink-muted)}
.hm-card-go{position:absolute;right:0;bottom:6px;width:28px;height:28px;border-radius:999px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--ink-muted);transition:border-color .2s,color .2s,transform .3s}
.hm-card-go svg{width:13px;height:13px}
.hm-card:hover .hm-card-go{border-color:var(--ink);color:var(--ink);transform:translate(1px,-1px)}
.hm-links{display:flex;flex-wrap:wrap;gap:0 clamp(22px,3vw,40px)}
.hm .tmap-sec{padding-top:clamp(56px,7vw,100px)}

/* ---------- 11 · the path ---------- */
.hm-steps{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:step}
.hm-steps li{position:relative;padding:26px clamp(14px,1.6vw,24px) 0 0}
.hm-steps li::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-2)}
.hm-steps li::after{content:'';position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:999px;background:var(--paper);border:1.5px solid var(--sage-deep)}
.hm-steps li:nth-child(4)::after{background:var(--sage-deep)}
.hm-step-n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-muted)}
.hm-steps h3{margin:10px 0 0;font-weight:400;font-size:clamp(1.1rem,1.4vw,1.3rem);letter-spacing:-.015em;line-height:1.2}
.hm-steps p{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.hm-path-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:clamp(40px,5vw,64px)}
.hm-path-ctas .hm-go{margin-top:0}

/* ---------- 12 · founder ---------- */
.hm-founder-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(30px,6vw,100px);align-items:center}
.hm-founder-photos{position:relative;padding-bottom:clamp(40px,6vw,90px)}
.hm-fo .ph{width:100%;object-fit:cover}
.hm-fo.a{width:78%}
.hm-fo.a .ph{aspect-ratio:4/5}
.hm-fo.b{position:absolute;right:0;bottom:0;width:46%;border:clamp(6px,.8vw,10px) solid var(--paper);border-radius:calc(var(--r-lg) + 4px)}
.hm-fo.b .ph{aspect-ratio:4/3}

/* ---------- 13 · answers ---------- */
.hm-faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,80px)}
.hm-faq-list{border-top:1px solid var(--line)}
.hm-faq-item{border-bottom:1px solid var(--line)}
.hm-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(20px,2.2vw,28px) 0;cursor:pointer;list-style:none;
  font-size:clamp(1.15rem,1.6vw,1.45rem);letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
.hm-faq-item summary::-webkit-details-marker{display:none}
.hm-faq-item summary i{position:relative;flex:0 0 auto;width:14px;height:14px}
.hm-faq-item summary i::before,.hm-faq-item summary i::after{content:'';position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--sage-deep);transition:transform .3s}
.hm-faq-item summary i::after{transform:rotate(90deg)}
.hm-faq-item[open] summary i::after{transform:rotate(0)}
.hm-faq-item p{margin:0;padding:0 clamp(0px,4vw,60px) clamp(22px,2.4vw,30px) 0;font-size:16.5px;line-height:1.6;color:var(--ink-soft);max-width:60ch}

/* ---------- 14 · close ---------- */
.hm-close{position:relative;padding:12px;min-height:min(92svh,900px);display:flex}
.hm-close-media{position:absolute;inset:12px;border-radius:var(--r-lg);overflow:hidden;background:var(--earth)}
.hm-close-media .ph{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.hm-close-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,22,16,0) 30%,rgba(18,22,16,.68) 100%)}
.hm-close-in{position:relative;z-index:2;align-self:flex-end;width:100%;padding-bottom:clamp(40px,7vh,84px)}
.hm-close-h{color:#fff;max-width:14ch}
.hm-close-p{margin:clamp(16px,2vw,24px) 0 0;max-width:46ch;color:rgba(255,255,255,.84);font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.5}
.hm-close-note{margin:22px 0 0;font-size:13.5px;color:rgba(255,255,255,.7)}

/* ---------- narrower screens ---------- */
@media (max-width:980px){
  .hm-cs{grid-template-columns:1fr}
  .hm-cs-fig{top:calc(var(--hdr-h) + 8px);z-index:2;box-shadow:0 18px 40px -30px rgba(20,24,21,.5)}
  .hm-cs-step{min-height:44vh}
  .hm-damp,.hm-q2,.hm-feel-grid,.hm-proof-grid,.hm-peace-grid,.hm-cost-grid,.hm-proj-head,.hm-founder-grid,.hm-faq-grid{grid-template-columns:1fr}
  .hm-sys-grid{grid-template-columns:1fr 1fr}
  .hm-sys-item:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .hm-sys-item:nth-child(even){padding-left:clamp(18px,2.4vw,34px);border-left:1px solid var(--line-2)}
  .hm-steps{grid-template-columns:1fr;gap:0}
  .hm-steps li{padding:0 0 26px 30px}
  .hm-steps li::before{left:4px;right:auto;top:6px;bottom:-6px;width:1px;height:auto}
  .hm-steps li:last-child::before{display:none}
  .hm-steps li::after{top:2px}
  .hm-proof-chart{order:2}
}
@media (max-width:640px){
  .hm-hero{min-height:92svh}
  .hm-sys{margin:0 8px}
  .hm-sys-grid{grid-template-columns:1fr}
  .hm-sys-item:nth-child(even){padding-left:0;border-left:0}
  .hm-sys-item{padding-right:0}
  .art-mk{width:150px}
  .hm-proj-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78vw;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding:0 var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .hm-proj-cards::-webkit-scrollbar{display:none}
  .hm-card{scroll-snap-align:start}
  .hm-tiles{grid-template-columns:1fr}
  .hm-tiles li + li{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:22px}
  .hm-vgs{grid-template-columns:1fr}
  .hm-cost-figs{grid-template-columns:1fr}
  .hm-cost-figs div + div{padding-left:0;border-left:0}
  /* stacked, so every fact carries its own bead rather than the separator between two */
  .hm-facts{display:grid;gap:8px}
  .hm-facts li::before,.hm-facts li + li::before{content:'';flex:0 0 auto;width:4px;height:4px;border-radius:999px;
    background:var(--sage);margin:0 12px 0 0;opacity:.7}
  .hm-hero-media,.hm-close-media{inset:8px}
  .hm-hero,.hm-close{padding:8px}
}
@media (prefers-reduced-motion:reduce){
  .hm *{animation:none!important;transition:none!important}
  .draw{stroke-dashoffset:0!important}
  .bar-r{transform:none!important}.bar text{opacity:1!important}
  .heal-crystals{opacity:1}.heal-crack{opacity:.25}
}

/* ---------- refinements ---------- */
.hm-h1 i{display:block;font-style:normal}
.hm-sys-item .hm-sys-stat{margin:0;font-weight:300;font-size:clamp(1.9rem,3vw,2.7rem);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.art-tco .art-t{font-size:19px}.art-tco .art-t.small{font-size:16px}.art-tco .art-t.strong{font-weight:500;fill:var(--sage-deep)}
.art-bars .art-t{font-size:19px}.art-bars .art-t.small{font-size:16px}.art-bars .art-t.num{font-size:22px}
.art-temp .art-t{font-size:18px}.art-temp .art-t.small{font-size:15px}
.hm-cost-figs dd{white-space:nowrap;font-size:clamp(1.4rem,2vw,1.9rem)}
.hm-founder .hm-h2{font-size:clamp(2rem,3.9vw,3.5rem);max-width:17ch}
/* the self-healing wall */
.heal-soil{fill:#E4DDCB}.heal-soil-dot{fill:#C9BFA6}
.heal-w{fill:var(--hm-water);opacity:.85}
.heal-dry{stroke:var(--line-2)}
.is-seen .heal-w{animation:heal-w 6s ease-in-out infinite}
.is-seen .heal-w.w2{animation-delay:.4s}.is-seen .heal-w.w3{animation-delay:.8s}
.is-seen .heal-w.w4{animation-name:heal-w4}
@keyframes heal-w{0%,100%{transform:translate(0,0);opacity:.35}50%{transform:translate(16px,0);opacity:.9}}
@keyframes heal-w4{0%,12%{transform:translate(0,0);opacity:.9}30%{transform:translate(36px,0);opacity:.9}40%{transform:translate(42px,0);opacity:0}100%{opacity:0}}
@keyframes hm-crack{0%,20%{opacity:1}55%{opacity:1}75%,100%{opacity:.15}}
@keyframes hm-crystals{0%,30%{opacity:0}52%{opacity:1}100%{opacity:1}}
.heal-crack{stroke-dasharray:none}