/*
  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:0;min-height:100svh;display:flex;flex-direction:column}
.hm-hero-media{position:absolute;inset:0;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,.36) 0%,rgba(18,22,16,.18) 28%,rgba(18,22,16,0) 50%,rgba(18,22,16,0) 70%,rgba(18,22,16,.4) 100%),
    linear-gradient(90deg,rgba(18,22,16,.14) 0%,rgba(18,22,16,0) 55%)}
.hm-hero-in{position:relative;z-index:2;flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;width:100%;padding-top:calc(var(--hdr-h, 76px) + clamp(28px,9vh,110px));padding-bottom:clamp(34px,5.5vh,64px);color:#fff}
.hm-h1{font-weight:300;font-size:clamp(2.3rem,4.5vw,4.6rem);line-height:1.04;letter-spacing:-.035em;max-width:none;margin:0;color:#fff;text-wrap:balance;text-shadow:0 2px 30px rgba(10,14,10,.18)}
/* the turn of the sentence, a step quieter */
.hm-h1 i + i{color:rgba(255,255,255,.64)}
.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(20px,2.2vw,30px) 0 0;max-width:44ch;font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.55;color:rgba(255,255,255,.86);letter-spacing:.002em;text-wrap:pretty}
/* the words at the top over the hill, the two ways in at the foot over the lawn: the house between them stays clear */
.hm-hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:auto;padding-top:clamp(26px,3vw,40px)}
/* The next open day, under the two ways in: one line of frosted glass on the photograph, so
   it reads as news rather than as a third button. The dot breathes slowly, like a live
   sign; the whole line is the link. */
.hm-openday{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:clamp(16px,2vw,22px);padding:10px 16px 10px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  background:rgba(18,22,16,.28);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);color:#fff;font-size:14.5px;line-height:1.35;text-decoration:none;transition:background .2s,border-color .2s}
.hm-openday:hover{background:rgba(18,22,16,.42);border-color:rgba(255,255,255,.5)}
.hm-openday-dot{width:8px;height:8px;border-radius:50%;background:#B9DA8C;box-shadow:0 0 0 0 rgba(185,218,140,.6);animation:hm-pulse 2.4s ease-out infinite}
@keyframes hm-pulse{0%{box-shadow:0 0 0 0 rgba(185,218,140,.55)}70%{box-shadow:0 0 0 9px rgba(185,218,140,0)}100%{box-shadow:0 0 0 0 rgba(185,218,140,0)}}
.hm-openday-t b{font-weight:500}
.hm-openday-s{color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.hm-openday-go{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.hm-openday-go svg{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){.hm-openday-dot{animation:none}}
@media (max-width:640px){.hm-openday{border-radius:14px;gap:4px 12px;font-size:14px}.hm-openday-go{flex-basis:100%}}
/* the facts along the foot of the photograph: one hairline, small type, even spacing */
.hm-hero-facts{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.2)}
.hm-hero-facts ul{list-style:none;display:flex;gap:0;padding-top:18px;padding-bottom:20px;margin:0 auto;overflow-x:auto;scrollbar-width:none}
.hm-hero-facts ul::-webkit-scrollbar{display:none}
.hm-hero-facts li{flex:1 1 0;min-width:max-content;padding-right:clamp(16px,2vw,28px);font-size:clamp(13px,1vw,14.5px);line-height:1.35;color:rgba(255,255,255,.78);letter-spacing:.005em}
.hm-hero-facts li + li{padding-left:clamp(16px,2vw,28px);border-left:1px solid rgba(255,255,255,.18)}

/* ---------- 02 · trust ---------- */
.hm-trust{padding:clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--line)}
/* The marks without panels: each group's label small and quiet, then its logos in one
   line of even weight, in the site's ink a little under full strength, so a row of
   brands reads as one line of the page rather than things shouting. The press takes a
   line of its own; the institutions and memberships share the next, divided by a
   hairline. */
.hm-marks{display:flex;flex-wrap:wrap;align-items:center;gap:14px 0}
.hm-marks-row{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px clamp(22px,2.6vw,40px);padding:0}
.hm-marks-row:first-child{flex:1 1 100%;padding-bottom:14px;border-bottom:1px solid var(--line)}
.hm-marks-row.is-inst + .hm-marks-row.is-inst{margin-left:clamp(22px,3vw,44px);padding-left:clamp(22px,3vw,44px);border-left:1px solid var(--line)}
.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:46px;width:auto;opacity:.62;filter:grayscale(1);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:38px}.hm-marks-row{gap:2px 20px}.hm-marks ul{gap:2px 20px}.hm-marks-row.is-inst + .hm-marks-row.is-inst{margin-left:0;padding-left:0;border-left:0}.hm-marks-row.is-inst{flex:1 1 100%}}

/* ---------- 03 · the idea and the cross-section ---------- */
.hm-idea-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:end;margin-bottom:clamp(40px,6vw,90px)}
.hm-idea-head .hm-lead{margin:0 0 6px;max-width:46ch}
.hm-cs{display:grid;grid-template-columns:minmax(0,1.75fr) 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(240px,44vh,440px);padding:clamp(18px,2vw,24px) 0;border-top:1px solid var(--line);opacity:.3;transition:opacity .5s}
/* the foot of the drawing: six marks, the reached ones inked, the current step's name */
.hm-cs-foot{display:flex;align-items:center;gap:18px;margin:14px 4px 2px}
.hm-cs-rail{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex:0 0 auto}
.hm-cs-rail li{width:22px;height:2px;border-radius:2px;background:var(--line-2);transition:background .5s}
.hm-cs-cap{position:relative;flex:1 1 auto;min-width:0;height:20px;font-size:14px;color:var(--ink)}
.hm-cs-cap > span{position:absolute;inset:0;display:flex;align-items:center;gap:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.hm-cs-cap b{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.08em;color:var(--sage-deep)}
.hm-cs-fig:not([data-at]) .hm-cs-foot{display:none}
.hm-cs-fig[data-at='1'] .hm-cs-rail li:nth-child(-n+1){background:var(--ink)}.hm-cs-fig[data-at='1'] .hm-cs-cap > span[data-n='1']{opacity:1;transform:none}
.hm-cs-fig[data-at='2'] .hm-cs-rail li:nth-child(-n+2){background:var(--ink)}.hm-cs-fig[data-at='2'] .hm-cs-cap > span[data-n='2']{opacity:1;transform:none}
.hm-cs-fig[data-at='3'] .hm-cs-rail li:nth-child(-n+3){background:var(--ink)}.hm-cs-fig[data-at='3'] .hm-cs-cap > span[data-n='3']{opacity:1;transform:none}
.hm-cs-fig[data-at='4'] .hm-cs-rail li:nth-child(-n+4){background:var(--ink)}.hm-cs-fig[data-at='4'] .hm-cs-cap > span[data-n='4']{opacity:1;transform:none}
.hm-cs-fig[data-at='5'] .hm-cs-rail li:nth-child(-n+5){background:var(--ink)}.hm-cs-fig[data-at='5'] .hm-cs-cap > span[data-n='5']{opacity:1;transform:none}
.hm-cs-fig[data-at='6'] .hm-cs-rail li:nth-child(-n+6){background:var(--ink)}.hm-cs-fig[data-at='6'] .hm-cs-cap > span[data-n='6']{opacity:1;transform:none}
.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.45rem,2.2vw,2rem);line-height:1.12;letter-spacing:-.025em;margin:10px 0 0;max-width:18ch}
.hm-cs-step p{margin:12px 0 0;font-size:16.5px;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-qn{margin:0 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--sage-deep)}
.hm-q-card .hm-qn{margin-top:clamp(22px,2.4vw,30px)}
/* the one number that answers the question, large and quiet, on a short rule */
.hm-qfig{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin:clamp(22px,2.4vw,30px) 0 0;padding-top:16px;border-top:1px solid var(--line);max-width:52ch}
.hm-qfig b{font-weight:300;font-size:clamp(2rem,3.2vw,2.8rem);letter-spacing:-.035em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.hm-qfig span{font-size:14.5px;color:var(--ink-muted)}
.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{position:relative;padding:clamp(26px,3vw,40px) clamp(18px,2.4vw,34px) clamp(30px,3.4vw,46px) 0;border-bottom:1px solid var(--line-2);transition:background .3s}
.hm-sys-go{position:absolute;top:clamp(22px,2.6vw,34px);right:clamp(14px,2vw,26px);width:28px;height:28px;display:grid;place-items:center;border-radius:99px;border:1px solid var(--line-2);color:var(--ink-muted);opacity:0;transform:translate(-4px,4px);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1),border-color .2s,color .2s}
.hm-sys-go svg{width:12px;height:12px}
a.hm-sys-item:hover .hm-sys-go,a.hm-sys-item:focus-visible .hm-sys-go{opacity:1;transform:none;border-color:var(--ink);color:var(--ink)}
@media (hover:none){.hm-sys-go{opacity:1;transform:none}}
.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-figs .is-lead dd{font-size:clamp(2.2rem,3.6vw,3.2rem);letter-spacing:-.04em;line-height:1}
.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,.hm-idea-head{grid-template-columns:1fr}
  .hm-idea-head .hm-lead{margin:0}
  .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}
  /* the facts run on past the edge; the fade says there is more to swipe */
  .hm-hero-facts ul{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .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-close-media{inset:8px}
  .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:23px}.art-tco .art-t.small{font-size:20px}.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}

.hm-damp-art .heal-tags .art-t{font-size:12.5px;fill:var(--ink-muted);letter-spacing:.02em}

/* ---------- the press card over a logo ----------
   Paper, a soft shadow, the outlet's picture on top; the logo at full strength, the
   headline, the outlet and the year. It rises into place a few pixels as it fades in,
   and waits a breath before closing so the pointer can travel onto it. */
.hm-mark-a.has-card{position:relative}
.hm-pcard{position:absolute;left:50%;bottom:calc(100% + 16px);z-index:30;width:300px;padding:6px;border-radius:12px;background:var(--paper);text-align:left;
  box-shadow:0 28px 60px -22px rgba(20,24,21,.32),0 0 0 1px rgba(31,38,33,.07);opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,8px);transition:opacity .2s ease,transform .34s cubic-bezier(.22,1,.36,1),visibility 0s .34s}
.hm-pcard::after{content:'';position:absolute;left:0;right:0;top:100%;height:18px}
.hm-mark-a.has-card:hover .hm-pcard,.hm-mark-a.has-card:focus-visible .hm-pcard{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .2s ease,transform .34s cubic-bezier(.22,1,.36,1),visibility 0s}
.hm-marks li:nth-last-child(-n+2) .hm-pcard{left:auto;right:-12px;transform:translate(0,8px)}
.hm-marks li:nth-last-child(-n+2) .hm-mark-a.has-card:hover .hm-pcard,.hm-marks li:nth-last-child(-n+2) .hm-mark-a.has-card:focus-visible .hm-pcard{transform:none}
.hm-pcard-img{display:block;overflow:hidden;border-radius:8px;background:var(--paper-2)}
.hm-pcard-img .ph{display:block;width:100%;aspect-ratio:1.91/1;object-fit:cover;border-radius:0;box-shadow:none;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.hm-mark-a.has-card:hover .hm-pcard-img .ph{transform:scale(1.03)}
.hm-pcard-b{display:grid;gap:9px;padding:14px 10px 10px}
.hm-pcard-logo{display:flex;align-items:center;height:20px}
.hm-pcard-logo img,.hm-pcard-logo .ph{height:20px;width:auto;opacity:1;filter:none;border-radius:0;box-shadow:none}
.hm-pcard-logo b{font-size:15px;font-weight:600;color:var(--ink)}
.hm-pcard-h{font-size:14.5px;line-height:1.42;font-weight:450;letter-spacing:-.005em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hm-pcard-m{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.hm-pcard-m svg{width:12px;height:12px;flex:0 0 auto;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.hm-mark-a.has-card:hover .hm-pcard-m svg{transform:translate(2px,-2px);color:var(--ink)}
@media (hover:none){.hm-pcard{display:none}}
@media (prefers-reduced-motion:reduce){.hm-pcard{transition:none}}