/* Current layout (Landgrab site 4, Loveland). Soft water: wave cut section edges, leaf corners (two round, two tight),
   sage and brass from the photos, one brass river line drawn down the page as you scroll. No rules or borders; side by
   side blocks are equal width and height. Rules: RULES.md. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
:root{--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.5,.64,1);--brass:#A9843F;--brass-l:#D9B46A;
  --leaf:28px 6px 28px 6px;--leaf-s:16px 4px 16px 4px;--leaf-r:6px 28px 6px 28px;
  --sh:0 1px 2px rgba(27,35,24,.05),0 16px 36px -18px rgba(27,35,24,.24);--sh-lg:0 2px 4px rgba(27,35,24,.05),0 36px 70px -30px rgba(27,35,24,.36);
  --tint:color-mix(in srgb,var(--accent) 8%,var(--bg));--edge:64px}
body{margin:0;color:var(--ink);font:400 17px/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
  background:radial-gradient(1100px 760px at 92% 12%,color-mix(in srgb,var(--brass-l) 13%,transparent),transparent 70%),radial-gradient(1000px 900px at 0% 60%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),var(--bg);background-attachment:fixed}
/* a faint current under everything: long soft ripples, not a flat color */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='120'%3E%3Cpath d='M0 60c65 0 65-18 130-18s65 18 130 18 65-18 130-18 65 18 130 18' fill='none' stroke='%2346573A' stroke-opacity='.07' stroke-width='1.2'/%3E%3Cpath d='M0 100c65 0 65-12 130-12s65 12 130 12 65-12 130-12 65 12 130 12' fill='none' stroke='%23A9843F' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E") 0 0/520px 120px;animation:current 60s linear infinite}
@keyframes current{to{background-position:520px 0}}
img,video{display:block;max-width:100%}
a{color:inherit}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:99;background:#fff;padding:10px 14px}
.wrap{width:min(1180px,100% - 48px);margin:0 auto}
.narrow{width:min(860px,100% - 48px)}
.muted{color:var(--muted)}
p{margin:0 0 1em}
.ic{width:24px;height:24px;flex:none}.ic-sm{width:16px;height:16px}.ic-lg{width:32px;height:32px}.ic-accent{color:var(--accent)}

/* type: wide grotesk caps for heads, Onest for reading */
.h1,.h2,.word b,.levels-t,.col em,.fl-card h3,.fl-node,.dot,.facts dd,.price-big,.card b,.trio b,.trio-n span,.ud b,.stack-tot b,.reel-tabs button,.tile b,.svc-list b,.sv-cap,.ugc figcaption b,.q-n,.fl-when span{font-family:var(--f-display);font-weight:var(--f-display-w);text-transform:uppercase;letter-spacing:-.01em}
.h1{font-size:clamp(36px,5.1vw,76px);line-height:1.02;margin:0 0 24px}
.h2{font-size:clamp(26px,3.3vw,46px);line-height:1.08;margin:0 0 16px;text-wrap:balance}
.lead{font-size:clamp(18px,1.55vw,22px);line-height:1.5;max-width:660px;margin:0 auto 32px}
.kick{display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;font:700 12.5px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.kick::before{content:"";width:26px;height:10px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M1 5c3-3.5 5-3.5 8 0s5 3.5 8 0 5-3.5 8 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M1 5c3-3.5 5-3.5 8 0s5 3.5 8 0 5-3.5 8 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;animation:kick 3.2s ease-in-out infinite}
@keyframes kick{50%{transform:translateX(4px)}}
.kick-light{color:var(--brass-l)}
.sub{color:var(--muted);font-size:18px;max-width:640px;margin:0 auto}
.fine{font-size:13px;color:var(--muted);text-align:center;margin:20px 0 0}
.head{text-align:center;margin:0 auto 56px;max-width:920px}
/* headline words drift in from the left like they ride the current, then bob when you point at them */
.flow .w{display:inline-block;transition:transform .5s var(--spring),color .3s}
html.js .flow .w{opacity:0;transform:translateX(-26px);filter:blur(6px);transition:opacity .48s var(--ease) calc(var(--i)*36ms),transform .54s var(--ease) calc(var(--i)*36ms),filter .48s var(--ease) calc(var(--i)*36ms),color .3s}
html.js .flow.in .w{opacity:1;transform:none;filter:none}
html.js .flow.in .w:hover{transform:translateY(-6px);color:var(--accent);transition:transform .45s var(--spring),color .3s}
.phero .flow.in .w:hover,.band .flow.in .w:hover{color:var(--brass-l)}

/* buttons: leaf shaped, water rises inside on hover, a ripple rings out from the pointer */
.cta-row{display:flex;justify-content:center;margin-top:48px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:19px 20px 19px 32px;border-radius:var(--leaf);background:var(--accent);color:var(--accent-ink);text-decoration:none;font:700 17px/1.25 var(--f-body);text-align:center;box-shadow:0 18px 36px -18px color-mix(in srgb,var(--accent) 90%,transparent);transition:transform .5s var(--spring),box-shadow .4s var(--ease),border-radius .6s var(--ease);overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-6px;height:calc(100% + 26px);z-index:-1;transform:translateY(100%);transition:transform .42s var(--ease);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10c15 0 15-8 30-8s15 8 30 8 15-8 30-8 15 8 30 8v10H0z' fill='%23182014' fill-opacity='.38'/%3E%3C/svg%3E") 0 0/120px 20px repeat-x,linear-gradient(transparent 19px,rgba(24,32,20,.38) 19px);animation:wv 2.4s linear infinite}
.btn:hover::before{transform:translateY(0)}
.btn:hover{transform:translateY(-3px);border-radius:var(--leaf-r);box-shadow:0 26px 46px -18px color-mix(in srgb,var(--accent) 95%,transparent)}
@keyframes wv{to{background-position:120px 0,0 0}}
.btn .arr{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--brass-l);color:var(--ink);transition:transform .5s var(--spring)}
.btn .arr svg{width:16px;height:16px}
.btn:hover .arr{transform:translateX(5px) rotate(-8deg)}
.btn-wide{width:min(680px,100%)}
.btn-sm{padding:9px 9px 9px 20px;font-size:14.5px;gap:12px;box-shadow:none}
.btn-sm .arr{width:30px;height:30px}
.btn-light{background:#fff;color:var(--ink);box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
.btn-light .arr{background:var(--accent);color:#fff}
.btn-light::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10c15 0 15-8 30-8s15 8 30 8 15-8 30-8 15 8 30 8v10H0z' fill='%23D9B46A' fill-opacity='.4'/%3E%3C/svg%3E") 0 0/120px 20px repeat-x,linear-gradient(transparent 19px,rgba(217,180,106,.4) 19px)}
.btn-hero{box-shadow:0 22px 50px -16px rgba(0,0,0,.55)}
.ripple{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px currentColor;opacity:.5;animation:ripple .54s var(--ease) forwards;z-index:2}
@keyframes ripple{to{transform:scale(9);opacity:0}}

/* header: a plain full width bar, hidden over the hero, slides down once you scroll */
.hdr{position:fixed;left:0;right:0;top:0;z-index:40;transform:translateY(-110%);transition:transform .6s var(--ease)}
.hdr.show{transform:none}
.hdr-in{width:min(1240px,100% - 32px);margin:0 auto;display:flex;align-items:center;gap:24px;height:74px}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 10px 30px -18px rgba(27,35,24,.35)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.mark{width:42px;height:42px;flex:none;transition:transform .6s var(--spring)}
.logo:hover .mark{transform:rotate(-6deg) scale(1.05)}
.word{display:flex;flex-direction:column;line-height:1}
.word b{font-size:17px;letter-spacing:.02em}
.word i{font:600 10.5px/1 var(--f-body);letter-spacing:.26em;text-transform:uppercase;color:var(--brass);margin-top:6px;font-style:normal}
.nav{display:flex;gap:6px;margin-left:auto}
.nav a{position:relative;padding:12px 16px;text-decoration:none;font-weight:600;font-size:15.5px;color:var(--muted);transition:color .3s}
.nav a::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M1 4c4.75-3 7.25-3 9.5 0s4.75 3 9.5 0 4.75-3 9.5 0 4.75 3 9.5 0' fill='none' stroke='%23A9843F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 0 50%/40px 8px repeat-x;clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]::after{clip-path:inset(0 0 0 0);animation:navwv 1.4s linear infinite}
@keyframes navwv{to{background-position:40px 50%}}
.burger{display:none;margin-left:auto;width:48px;height:48px;border:0;border-radius:var(--leaf-s);background:var(--accent);cursor:pointer;position:relative}
.burger span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:#fff;transition:transform .45s var(--ease),opacity .3s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:23px;right:20px}.burger span:nth-child(3){top:30px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:35;background:var(--accent);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:36px;padding:90px 24px 140px;overflow:hidden}
.sheet[hidden]{display:none}
.sheet nav{display:flex;flex-direction:column;align-items:center;gap:8px}
.sheet nav a{font:var(--f-display-w) clamp(30px,9vw,46px)/1.15 var(--f-display);text-transform:uppercase;text-decoration:none;opacity:0;transform:translateY(30px);animation:sheetIn .42s var(--ease) forwards calc(var(--i)*48ms + 48ms)}
.sheet .btn{opacity:0;animation:sheetIn .42s var(--ease) forwards .45s}
@keyframes sheetIn{to{opacity:1;transform:none}}
.sheet-wave{position:absolute;left:0;bottom:0;width:200%;height:110px}
.sheet-wave .wv-b{fill:color-mix(in srgb,var(--brass-l) 30%,transparent)}.sheet-wave .wv-f{fill:rgba(255,255,255,.12)}
body.menu-open .hdr::before{background:var(--accent);box-shadow:none}
body.menu-open .hdr .word b{color:#fff}

/* waves: every wave cut edge drifts sideways slowly, the current never stops */
.hero-wave,.band-wave,.ft-wave,.sheet-wave{animation:drift 22s linear infinite}
@keyframes drift{to{transform:translateX(-50%)}}
.wv-b{animation:bob 7s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(8px)}}

/* home hero: full bleed 1080p clips, a moving wave for the bottom edge, a vertical clip counter */
.hero{position:relative;min-height:max(680px,100svh);display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden;isolation:isolate}
.hero-media,.phero-media{position:absolute;inset:0;z-index:-1;background:var(--dark)}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .96s var(--ease),transform 8s linear}
.hero-media video.on{opacity:1;transform:scale(1)}
.hero-media::after,.phero-media::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 45%,rgba(18,24,14,.28),rgba(18,24,14,.6)),linear-gradient(180deg,rgba(18,24,14,.45),rgba(18,24,14,.1) 40%,rgba(18,24,14,.5))}
.hero-in{width:min(1120px,100% - 48px);padding:130px 0 190px;position:relative}
.hero .lead{color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.4)}
.hero-h1{text-shadow:0 2px 34px rgba(0,0,0,.3)}
.hero-h1 .ln{display:block}
.wd{display:inline-block;white-space:nowrap}
.ch{display:inline-block;transition:transform .45s var(--spring),color .3s}
html.js .hero-h1 .ch{opacity:0;transform:translateY(60%) rotate(6deg);animation:chIn .54s var(--ease) forwards calc(var(--i)*19ms + .25s)}
@keyframes chIn{to{opacity:1;transform:none}}
.hero-h1 .ch:hover{transform:translateY(-10px)!important;color:var(--brass-l)}
html.js .rise{opacity:0;transform:translateY(26px);animation:riseIn .6s var(--ease) forwards var(--d,0s)}
@keyframes riseIn{to{opacity:1;transform:none}}
.hero .cta-row{margin-top:0}
.hero-badges{list-style:none;padding:0;margin:28px 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 30px;font-size:15px;font-weight:600}
.hero-badges li{display:flex;align-items:center;gap:9px;text-shadow:0 1px 10px rgba(0,0,0,.4);transition:transform .45s var(--spring)}
.hero-badges li:hover{transform:translateY(-3px)}
.hero-badges .ic{color:var(--brass-l)}
.hero-clips{position:absolute;right:max(24px,3vw);top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.hero-clips li{display:flex;align-items:center;gap:10px;font:600 11px/1 var(--f-body);letter-spacing:.14em;color:rgba(255,255,255,.55);transition:color .4s}
.hero-clips li.on,.hero-clips li.done{color:#fff}
.hero-clips i{width:3px;height:46px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden}
.hero-clips b{display:block;width:100%;height:0;background:var(--brass-l)}
.hero-clips li.done b{height:100%}
.hero-clips li.on b{animation:clip var(--dur,5.5s) linear forwards}
@keyframes clip{to{height:100%}}
.hero-cue{position:absolute;left:50%;bottom:82px;width:30px;height:62px;margin-left:-15px;display:block;z-index:2}
.hero-cue i{position:absolute;left:14px;top:0;width:2px;height:100%;border-radius:2px;background:linear-gradient(transparent,var(--brass-l));transform-origin:top;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.hero-wave{position:absolute;left:0;bottom:-1px;width:200%;height:clamp(54px,7vw,110px);z-index:1;pointer-events:none}
.hero-wave .wv-b{fill:color-mix(in srgb,var(--bg) 22%,transparent)}.hero-wave .wv-f{fill:var(--bg)}

/* inner page hero: full photo with a slow push in and the same moving wave edge */
.phero{position:relative;min-height:min(640px,82svh);display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden;isolation:isolate}
.phero-media img{width:100%;height:100%;object-fit:cover;animation:push 16s var(--ease) forwards}
@keyframes push{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.phero-in{width:min(1020px,100% - 48px);padding:140px 0 150px}
.phero .h1{font-size:clamp(32px,5vw,70px)}
.phero .lead{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.phero .cta-row{margin-top:0}
.crumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;font-size:13.5px;margin-bottom:20px;color:rgba(255,255,255,.75)}
.crumbs a{color:#fff;text-decoration:none;transition:color .3s}
.crumbs a:hover{color:var(--brass-l)}
.crumbs span[aria-hidden]{color:var(--brass-l)}

/* sections: tinted ones get wave cut top and bottom edges instead of straight ones */
.sec{position:relative;padding:104px 0}
.sec-first{padding-top:70px}
.sec-tight{padding:30px 0 70px}
.sec-soft{background:var(--tint);padding:calc(104px + var(--edge) / 2) 0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 40 360 8 720 8s480 32 720 32v24H0z'/%3E%3C/svg%3E") top/100% var(--edge) no-repeat,linear-gradient(#000,#000) center/100% calc(100% - var(--edge) * 2 + 2px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v24c-240 0-360 32-720 32S240 24 0 24z'/%3E%3C/svg%3E") bottom/100% var(--edge) no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 40 360 8 720 8s480 32 720 32v24H0z'/%3E%3C/svg%3E") top/100% var(--edge) no-repeat,linear-gradient(#000,#000) center/100% calc(100% - var(--edge) * 2 + 2px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v24c-240 0-360 32-720 32S240 24 0 24z'/%3E%3C/svg%3E") bottom/100% var(--edge) no-repeat}
.card{background:var(--surface);border-radius:var(--leaf);padding:32px;box-shadow:var(--sh)}
.card b{display:block;font-size:20px;line-height:1.2;margin:18px 0 10px}
.card p{color:var(--muted);margin:0}
/* everything you can point at floats up a little, with a ripple from where the pointer came in */
.lift{position:relative;transition:transform .55s var(--spring),box-shadow .5s var(--ease),border-radius .6s var(--ease)}
.lift:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.rp-host{position:relative;overflow:hidden;isolation:isolate}
.rp-host .ripple{color:var(--accent);opacity:.28}

/* the brass river: drawn by site.js from the hero down to the footer, switching banks between sections */
.river{position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none;z-index:3;overflow:visible}
.rv-bed{fill:none;stroke:var(--brass);stroke-opacity:.16;stroke-width:2;stroke-linecap:round}
.rv-flow{fill:none;stroke:var(--brass);stroke-width:2.6;stroke-linecap:round}
.rv-bead{fill:var(--brass-l);stroke:#fff;stroke-width:2.5}

/* demo: phone and stream column are the same height; the bead flows down while the recording plays */
.demo{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:stretch;max-width:1020px;margin:0 auto}
.phone{margin:0;width:320px;justify-self:center;padding:10px;border-radius:48px;background:linear-gradient(150deg,#3a4433,#11160e);box-shadow:var(--sh-lg),inset 0 0 0 1.5px rgba(255,255,255,.12);transition:transform .6s var(--spring)}
.phone:hover{transform:translateY(-6px) rotate(-1deg)}
.phone-screen{border-radius:38px;overflow:hidden;aspect-ratio:390/844;background:#fff}
.phone-screen video,.phone-screen img{width:100%;height:100%;object-fit:cover}
.stops{position:relative;display:flex}
.stops ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;flex:1}
.stops li{flex:1;display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:center;cursor:pointer}
.stops li>.stop-c{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.stream{position:absolute;left:0;top:0;width:64px;height:100%;overflow:visible;pointer-events:none}
.st-bed{fill:none;stroke:color-mix(in srgb,var(--accent) 18%,transparent);stroke-width:4;stroke-linecap:round}
.st-fill{fill:none;stroke:var(--brass);stroke-width:4;stroke-linecap:round}
.st-bead{fill:var(--brass-l);stroke:#fff;stroke-width:3}
.dot{position:relative;z-index:1;width:56px;height:56px;margin:0 4px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--muted);font-size:16px;box-shadow:var(--sh);transition:background .5s var(--ease),color .5s,transform .6s var(--spring)}
.stop-c{position:relative;padding:28px 88px 28px 30px;border-radius:var(--leaf);background:var(--surface);box-shadow:var(--sh);opacity:.5;transition:opacity .5s var(--ease),box-shadow .5s,transform .6s var(--spring),border-radius .6s var(--ease)}
.stops li.on .stop-c{opacity:1;box-shadow:var(--sh-lg)}
.stops li.on .dot{background:var(--accent);color:#fff;transform:scale(1.08)}
.stops li:hover .stop-c{opacity:1;transform:translateX(6px);border-radius:var(--leaf-r)}
.stop-ic{position:absolute;right:24px;top:24px;width:44px;height:44px;border-radius:var(--leaf-s);display:grid;place-items:center;background:var(--tint);color:var(--accent);transition:background .4s,color .4s,transform .6s var(--spring)}
.stops li.on .stop-ic{background:var(--brass-l);color:var(--ink);transform:rotate(-8deg)}
.stop-c b{display:block;font-size:20px;line-height:1.25;margin:0 0 8px;text-wrap:balance}
.stop-c p{margin:0;color:var(--muted)}

/* story: copy and chart are equal columns at equal height */
.story{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:stretch}
.story-copy{display:flex;flex-direction:column;justify-content:center}
.story-copy p:not(.kick){font-size:18px;color:var(--muted)}
.story-copy p:last-child{margin-bottom:0}
.story-copy b{color:var(--ink)}
.levels{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--leaf);padding:40px 40px 34px;box-shadow:var(--sh-lg)}
.levels-t{font-size:clamp(20px,2vw,26px);margin:0 0 26px;text-align:center}
.cols{position:relative;flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;min-height:340px}
.col{display:flex;flex-direction:column;align-items:center;text-align:center}
.glass{position:relative;flex:1;width:100%;min-height:200px;border-radius:12px 12px var(--leaf-s);background:color-mix(in srgb,var(--accent) 6%,var(--bg));overflow:hidden;margin-bottom:16px}
.water{position:absolute;left:0;right:0;bottom:0;height:0;display:flex;flex-direction:column;transition:height .96s var(--ease)}
.levels.in .water{height:var(--h)}
.w-a{background:#C5C9BC;transition-delay:.09s}.w-b{background:#9DA394;transition-delay:.24s}.w-y{background:var(--accent);transition-delay:.39s}
.surf{position:absolute;left:0;bottom:calc(100% - 1px);width:200%;height:14px;animation:drift 5s linear infinite}
.w-a .surf path{fill:#C5C9BC}.w-b .surf path{fill:#9DA394}.w-y .surf path{fill:var(--brass-l)}
.ly{display:block}.l1{background:var(--accent)}.l2{background:color-mix(in srgb,var(--accent) 70%,#fff)}.l3{background:var(--brass)}.l4{background:var(--brass-l)}
.w-y .l4{flex:2}.w-y .l3{flex:.7}.w-y .l2{flex:4}.w-y .l1{flex:4}
.col em{font-style:normal;font-size:clamp(13px,1.2vw,16px);line-height:1.2;color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:color-mix(in srgb,var(--muted) 70%,transparent);min-height:2.4em;display:flex;align-items:center}
.col-y em{text-decoration:none;color:var(--accent)}
.col b{font-size:15px;margin-top:6px}
.col span{font-size:13.5px;color:var(--muted);line-height:1.35;margin-top:4px;min-height:2.7em}
.glass::after{content:"";position:absolute;left:0;right:0;bottom:80%;z-index:2;border-top:2px dotted var(--brass);opacity:0;transition:opacity .6s 1.08s}
.levels.in .glass::after{opacity:.9}
.fair{position:absolute;right:8px;bottom:calc(80% + 8px);z-index:2;font:700 10.5px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--brass);white-space:nowrap;opacity:0;transition:opacity .6s 1.14s}
.levels.in .fair{opacity:1}
.key{list-style:none;padding:0;margin:22px 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--muted)}
.key li{display:flex;align-items:center;gap:8px}
.key s{width:14px;height:14px;border-radius:5px 2px}

/* UGC: three equal cards in a row. One plays with captions, the other two dim (never shrink), tap one to switch */
.reel{display:flex;flex-direction:column;align-items:center}
.reel-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;width:100%}
.ugc{margin:0;cursor:pointer;display:flex;flex-direction:column}
.ugc-media{position:relative;aspect-ratio:9/16;border-radius:var(--leaf);overflow:hidden;background:var(--dark);box-shadow:var(--sh);transition:box-shadow .5s,border-radius .6s var(--ease),transform .6s var(--spring)}
.ugc video{width:100%;height:100%;object-fit:cover;transition:filter .6s var(--ease)}
.ugc:not(.on) video{filter:brightness(.55) saturate(.6)}
.ugc.on .ugc-media{box-shadow:var(--sh-lg);border-radius:var(--leaf-r)}
.ugc:not(.on):hover .ugc-media{transform:translateY(-6px)}
.ugc-brand{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:8px;padding:6px 13px 6px 6px;border-radius:var(--leaf-s);background:rgba(255,255,255,.94);color:var(--ink);font-weight:700;font-size:12.5px}
.ugc-brand .mark{width:24px;height:24px}
.cap{position:absolute;left:16px;right:16px;bottom:44px;margin:0;text-align:center;font:var(--f-display-w) 19px/1.25 var(--f-display);text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.65);transition:opacity .3s}
.ugc:not(.on) .cap{opacity:0}
.cap span{opacity:.6;transition:opacity .15s}.cap span.on{opacity:1;color:var(--ink);background:var(--brass-l);padding:0 5px;border-radius:5px 2px;text-shadow:none}
.sound{position:absolute;right:14px;top:14px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(18,24,14,.6);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);transition:transform .4s var(--spring),opacity .3s}
.sound:hover{transform:scale(1.1)}
.ugc:not(.on) .sound{opacity:0;pointer-events:none}
.sound svg{width:20px;height:20px}
.sound .wv2{display:none}.sound[aria-pressed="true"] .wv2{display:block}.sound[aria-pressed="true"] .x{display:none}
/* while muted the button says what it does */
.ugc.on .sound:not([aria-pressed="true"]){width:auto;padding:0 15px 0 11px;border-radius:21px;grid-auto-flow:column;gap:7px}
.ugc.on .sound:not([aria-pressed="true"])::after{content:"Tap for sound";font:600 13px/1 var(--f-body)}
.ugc-brand,.cap{pointer-events:none}
@media (max-width:760px){.ugc .sound{top:62px}}
.ugc-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--accent);display:grid;place-items:center;cursor:pointer;transition:transform .5s var(--spring),opacity .4s;box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:ring 2.6s var(--ease) infinite}
.ugc-play svg{width:28px;height:28px;margin-left:4px}
.ugc:not(.on):hover .ugc-play{transform:scale(1.1)}
.ugc.on .ugc-play{opacity:0;pointer-events:none;transform:scale(.6)}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}80%{box-shadow:0 0 0 22px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.ugc-prog{position:absolute;left:16px;right:16px;bottom:18px;height:4px;border-radius:4px;background:rgba(255,255,255,.28);overflow:hidden;transition:opacity .3s}
.ugc:not(.on) .ugc-prog{opacity:0}
.ugc-prog b{display:block;height:100%;width:var(--p,0%);background:var(--brass-l)}
.ugc figcaption{padding:18px 6px 0;text-align:center;transition:opacity .5s}
.ugc:not(.on) figcaption{opacity:.55}
.ugc figcaption b{display:block;font-size:20px}
.ugc figcaption span{display:block;font-size:15px;color:var(--muted);line-height:1.4;margin-top:6px}
.reel-tabs{display:none;gap:8px;margin-top:26px;padding:6px;border-radius:var(--leaf);background:var(--surface);box-shadow:var(--sh)}
.reel-tabs button{border:0;background:none;cursor:pointer;padding:12px 22px;border-radius:var(--leaf-s);font-size:15px;color:var(--muted);transition:background .4s var(--ease),color .4s}
.reel-tabs button[aria-selected="true"]{background:var(--accent);color:#fff}

/* steps: mirrored banks along a river that draws itself as you scroll */
.flowline{position:relative;max-width:1080px;margin:0 auto}
.flowline ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:30px}
.fl-river{position:absolute;left:50%;top:0;width:80px;height:100%;margin-left:-40px;overflow:visible;pointer-events:none}
.fl-bed{fill:none;stroke:color-mix(in srgb,var(--accent) 16%,transparent);stroke-width:4;stroke-linecap:round}
.fl-fill{fill:none;stroke:var(--brass);stroke-width:4;stroke-linecap:round}
.fl{display:grid;grid-template-columns:1fr 84px 1fr;gap:28px;align-items:center}
.fl-card{background:var(--surface);border-radius:var(--leaf);padding:30px 32px;box-shadow:var(--sh)}
.fl-r .fl-card{grid-column:3;grid-row:1;border-radius:var(--leaf-r)}
.fl-node{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:var(--surface);color:var(--accent);box-shadow:var(--sh);transform:scale(.7);transition:transform .42s var(--spring),background .5s,color .5s}
.fl.lit .fl-node{transform:none;background:var(--accent);color:#fff}
.fl-when{grid-row:1;margin:0;display:flex;align-items:center;gap:14px;color:var(--brass)}
.fl-l .fl-when{grid-column:3}
.fl-r .fl-when{grid-column:1;justify-content:flex-end;text-align:right}
.fl-r .fl-when .ic{order:2}
.fl-when .ic{width:28px;height:28px;flex:none}
.fl-when span{font-size:clamp(18px,1.9vw,26px);line-height:1.15;color:var(--ink);transition:color .3s}
.fl:hover .fl-when span{color:var(--accent)}
html.js .fl .fl-card,html.js .fl .fl-when{opacity:0;transition:opacity .48s var(--ease),transform .54s var(--ease)}
html.js .fl-l .fl-card,html.js .fl-r .fl-when{transform:translateX(-40px)}
html.js .fl-r .fl-card,html.js .fl-l .fl-when{transform:translateX(40px)}
html.js .fl.lit .fl-card,html.js .fl.lit .fl-when{opacity:1;transform:none}
html.js .fl.lit .fl-card:hover{transform:translateY(-6px)}
.fl-ic{width:52px;height:52px;border-radius:var(--leaf-s);display:grid;place-items:center;background:var(--tint);color:var(--accent);margin-bottom:16px;transition:transform .6s var(--spring),background .4s,color .4s}
.fl-card:hover .fl-ic{transform:rotate(-8deg);background:var(--accent);color:#fff}
.fl-card h3{font-size:22px;line-height:1.1;margin:0 0 10px}
.fl-card p{margin:0;color:var(--muted);font-size:16px}

/* services: list and photo panel side by side at the same height; the panel ripples to each service */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.svc-list{list-style:none;margin:0;padding:10px;border-radius:var(--leaf);background:var(--surface);box-shadow:var(--sh);display:flex;flex-direction:column}
.svc-list li{flex:1;display:flex}
.svc-list a{flex:1;position:relative;display:grid;grid-template-columns:48px 1fr 20px;gap:18px;align-items:center;padding:14px 18px;border-radius:var(--leaf-s);text-decoration:none;transition:background .35s,transform .5s var(--spring)}
.svc-list a:hover,.svc-list a.on{background:var(--tint)}
.sl-ph{display:none}
.sl-ic{width:48px;height:48px;border-radius:var(--leaf-s);display:grid;place-items:center;background:var(--tint);color:var(--accent);transition:transform .6s var(--spring),background .4s,color .4s}
.svc-list a:hover .sl-ic,.svc-list a.on .sl-ic{background:var(--accent);color:#fff;transform:rotate(-8deg)}
.sl-t b{display:block;font-size:16px;line-height:1.2}
.sl-t span{display:block;font-size:14.5px;color:var(--muted);line-height:1.4;margin-top:3px}
.sl-go{color:var(--brass);transition:transform .5s var(--spring)}
.svc-list a:hover .sl-go{transform:translateX(5px)}
.svc-view{position:relative;border-radius:var(--leaf-r);overflow:hidden;box-shadow:var(--sh-lg);background:var(--dark);min-height:420px}
.sv-ph{position:absolute;inset:0;clip-path:circle(0% at var(--x,50%) var(--y,50%));z-index:1}
.sv-ph.on{clip-path:circle(150% at var(--x,50%) var(--y,50%));transition:clip-path .66s var(--ease);z-index:2}
.sv-ph.base{clip-path:none;z-index:1}
.sv-ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 6s var(--ease)}
.sv-ph.on img{transform:scale(1)}
.sv-cap{position:absolute;left:22px;right:22px;bottom:22px;z-index:3;margin:0;padding:16px 22px;border-radius:var(--leaf-s);background:rgba(255,255,255,.94);backdrop-filter:blur(8px);font-size:18px;overflow:hidden}
.sv-cap span{display:block;animation:capIn .6s var(--ease)}
@keyframes capIn{from{transform:translateY(100%);opacity:0}}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;grid-auto-rows:1fr}
.tiles-4{grid-template-columns:repeat(4,1fr)}
.tile{position:relative;display:flex;flex-direction:column;gap:8px;padding:30px;border-radius:var(--leaf);background:var(--surface);box-shadow:var(--sh);text-decoration:none;overflow:hidden;isolation:isolate;min-height:250px}
.tile-ph{position:absolute;inset:0;z-index:-1;clip-path:circle(0% at var(--x,50%) var(--y,50%));transition:clip-path .54s var(--ease)}
.tile-ph img{width:100%;height:100%;object-fit:cover}
.tile-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,24,14,.88),rgba(18,24,14,.3))}
.tile:hover .tile-ph{clip-path:circle(150% at var(--x,50%) var(--y,50%))}
.tile-ic{width:52px;height:52px;border-radius:var(--leaf-s);display:grid;place-items:center;background:var(--tint);color:var(--accent);margin-bottom:10px;transition:background .4s,color .4s,transform .6s var(--spring)}
.tile:hover .tile-ic{background:var(--brass-l);color:var(--ink);transform:rotate(-8deg)}
.tile b{font-size:19px;line-height:1.15;transition:color .4s}
.tile-l{color:var(--muted);font-size:15px;line-height:1.45;transition:color .4s}
.tile em{margin-top:auto;padding-top:10px;font-style:normal;font-weight:700;font-size:14.5px;color:var(--accent);display:flex;align-items:center;gap:8px;transition:color .4s,gap .4s var(--ease)}
.tile:hover b,.tile:hover em{color:#fff}.tile:hover .tile-l{color:rgba(255,255,255,.88)}.tile:hover em{gap:14px}

/* map: full width with a sage tint, a grid of town buttons under it */
.rmap-map{height:560px;border-radius:var(--leaf);overflow:hidden;box-shadow:var(--sh-lg)}
.map{width:100%;height:100%}
.tgrid{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.tgrid li{display:flex;align-items:stretch;border-radius:var(--leaf-s);background:var(--surface);box-shadow:var(--sh);overflow:hidden;transition:transform .5s var(--spring),background .35s,box-shadow .4s}
.tgrid li:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.tgrid li.on{background:var(--accent);color:#fff}
.tgrid button{flex:1;min-width:0;text-align:left;border:0;background:none;padding:14px 4px 14px 16px;cursor:pointer;font:inherit;color:inherit}
.tgrid button b{display:block;font-size:14.5px;line-height:1.2}
.tgrid button span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.tgrid li.on button span{color:rgba(255,255,255,.8)}
.tgrid a{width:34px;flex:none;display:grid;place-items:center;color:var(--brass);transition:transform .45s var(--spring)}
.tgrid a:hover{transform:translateX(3px)}
.tgrid li.on a{color:var(--brass-l)}
.fmap{min-height:440px;border-radius:var(--leaf);overflow:hidden;box-shadow:var(--sh)}
.leaflet-container{font-family:var(--f-body);background:#e9eadf}
.leaflet-tile-pane{filter:grayscale(1) sepia(.32) hue-rotate(38deg) saturate(.85) brightness(1.04) contrast(.92)}
.leaflet-popup-content-wrapper{border-radius:var(--leaf-s);box-shadow:var(--sh-lg)}
.leaflet-popup-content{margin:14px 18px;font-size:14px;line-height:1.5}
.leaflet-popup-content b{display:block;font-size:16px;margin-bottom:4px}
.leaflet-popup-content a{color:var(--accent);font-weight:700}
.leaflet-tooltip.map-label{background:none;border:0;box-shadow:none;padding:0;font:700 12px var(--f-body);color:var(--ink);text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff}
.leaflet-tooltip.map-label::before{display:none}
.pulse-dot{animation:dot 2.4s var(--ease) infinite}
@keyframes dot{50%{opacity:.55}}

/* FAQ: one centered column, questions numbered, the plus turns into a wave when open */
.acc{display:flex;flex-direction:column;gap:12px}
.acc details{background:var(--surface);border-radius:var(--leaf-s);box-shadow:var(--sh);transition:box-shadow .4s,transform .5s var(--spring),border-radius .5s var(--ease)}
.acc details:hover{transform:translateY(-3px)}
.acc details[open]{box-shadow:var(--sh-lg);border-radius:var(--leaf)}
.acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr 36px;align-items:center;gap:18px;padding:22px 24px;font-weight:700;font-size:17.5px;line-height:1.35}
.acc summary::-webkit-details-marker{display:none}
.q-n{font-size:13px;color:var(--brass);min-width:30px}
.acc summary:hover .q-t{color:var(--accent)}
.q-t{transition:color .3s}
.acc summary i{position:relative;width:36px;height:36px;border-radius:50%;background:var(--tint);transition:background .4s,transform .6s var(--spring)}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;left:11px;right:11px;top:17px;height:2px;background:var(--accent);transition:transform .4s var(--ease),opacity .3s}
.acc summary i::after{transform:rotate(90deg)}
.acc details[open] summary i{background:var(--accent);transform:rotate(180deg)}
.acc details[open] summary i::before{background:#fff}
.acc details[open] summary i::after{transform:rotate(0);opacity:0}
.acc-a{padding:0 24px 24px 72px;color:var(--muted)}
.acc-a p{margin:0}

/* band: deep sage card, a washed kitchen photo, two layers of moving water along the bottom */
.band{padding:30px 0 96px}
.band-card{position:relative;overflow:hidden;isolation:isolate;padding:110px 32px 150px;text-align:center;color:#fff;background:var(--accent);border-radius:var(--leaf);box-shadow:var(--sh-lg)}
.band-ph{position:absolute;inset:0;z-index:-3;opacity:.3;mix-blend-mode:luminosity}
.band-ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 8s var(--ease)}
.band-card:hover .band-ph img{transform:scale(1)}
.band-card::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(70% 80% at 50% 30%,color-mix(in srgb,var(--accent) 55%,transparent),color-mix(in srgb,var(--dark) 70%,transparent))}
.band-wave{position:absolute;left:0;bottom:-1px;width:200%;height:120px;z-index:-1;pointer-events:none}
.band-wave-a .wv-b{fill:color-mix(in srgb,var(--brass-l) 22%,transparent)}.band-wave-a .wv-f{fill:color-mix(in srgb,var(--brass-l) 30%,transparent)}
.band-wave-b{height:80px;animation-duration:15s;animation-direction:reverse;opacity:.6}
.band-wave-b .wv-b{fill:rgba(255,255,255,.08)}.band-wave-b .wv-f{fill:rgba(255,255,255,.1)}
.band-card .h2{font-size:clamp(30px,4.6vw,64px);margin:0 auto 16px;max-width:900px}
.band-sub{font-size:20px;color:rgba(255,255,255,.9);margin:0}

/* cost */
.pricebox{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.pb-a,.pb-b{background:var(--surface);border-radius:var(--leaf);padding:44px;box-shadow:var(--sh-lg);display:flex;flex-direction:column;justify-content:center}
.pb-b{border-radius:var(--leaf-r)}
.price-big{font-size:clamp(34px,4.4vw,60px);line-height:1.05;color:var(--accent);margin:0 0 14px}
.pb-a .muted{margin:0}
.incl{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.incl li{display:flex;align-items:center;gap:8px;padding:10px 15px;border-radius:var(--leaf-s);background:var(--tint);font-size:15px;font-weight:600;transition:transform .45s var(--spring)}
.incl li:hover{transform:translateY(-3px)}
.incl .ic{color:var(--accent)}
.stack{background:var(--surface);border-radius:var(--leaf);padding:36px;box-shadow:var(--sh)}
.stack-bar{display:flex;gap:4px;height:30px;overflow:hidden;margin-bottom:26px;border-radius:var(--leaf-s)}
.stack-bar i{width:0;transition:width .78s var(--ease)}
.stack.in .stack-bar i{width:var(--w)}
.stack-rows{list-style:none;padding:0;margin:0}
.stack-rows li{display:grid;grid-template-columns:14px 160px 1fr auto;gap:14px;align-items:center;padding:12px 10px;border-radius:var(--leaf-s);transition:background .3s,transform .45s var(--spring)}
.stack-rows li:hover{background:var(--tint);transform:translateX(6px)}
.stack-rows s{width:14px;height:14px;border-radius:5px 2px}
.stack-rows span{color:var(--muted);font-size:15px}
.stack-rows em{font-style:normal;font-weight:700}
.stack-tot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;margin-top:12px;border-radius:var(--leaf-s);background:var(--tint)}
.stack-tot b{font-size:clamp(18px,2.2vw,26px);white-space:nowrap}
.stack-final{background:var(--accent);color:#fff}
.updown{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.ud{background:var(--surface);border-radius:var(--leaf-r);padding:36px;box-shadow:var(--sh)}
.ud-up{border-radius:var(--leaf)}
.ud .ic{width:42px;height:42px;color:var(--muted)}
.ud-up .ic{color:var(--accent)}
.ud b{display:block;font-size:22px;margin:16px 0 10px}
.ud p{margin:0;color:var(--muted)}

/* service and town pages: photo and copy blocks are equal halves at equal height */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.pair-ph{position:relative;margin:0;border-radius:var(--leaf-r);overflow:hidden;min-height:400px;box-shadow:var(--sh)}
.pair-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .84s var(--ease)}
.pair-ph:hover img{transform:scale(1.05)}
.pair-cards{display:grid;gap:22px;grid-auto-rows:1fr}
.pair-cards .card{display:flex;flex-direction:column;justify-content:center}
.pair-copy{gap:64px}
.pair-txt{display:flex;flex-direction:column;justify-content:center}
.pair-txt p:not(.kick){color:var(--muted)}
.pair-txt p:last-child{margin-bottom:0}
.trio{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.trio li{background:var(--surface);border-radius:var(--leaf);padding:32px;box-shadow:var(--sh)}
.trio li:nth-child(2){border-radius:var(--leaf-r)}
.trio b{display:block;font-size:19px;line-height:1.2;margin:16px 0 10px}
.trio p{margin:0;color:var(--muted);font-size:16px}
.trio-n span{display:block;font-size:40px;line-height:1;color:var(--brass)}
.trio-n b{margin-top:14px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0}
.facts div{background:var(--surface);border-radius:var(--leaf);padding:30px 24px;box-shadow:var(--sh);text-align:center}
.facts div:nth-child(even){border-radius:var(--leaf-r)}
.facts div:first-child{background:var(--accent);color:#fff}
.facts .ic{margin:0 auto 12px;color:var(--brass)}
.facts div:first-child .ic{color:var(--brass-l)}
.facts dt{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.facts dd{margin:10px 0 0;font-size:clamp(22px,2.6vw,34px);line-height:1.1}
.permit-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.permit{display:flex;flex-direction:column;justify-content:center}
.chips{list-style:none;padding:0;margin:0;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.chips a{display:flex;align-items:center;gap:10px;padding:15px 24px;border-radius:var(--leaf-s);background:var(--surface);box-shadow:var(--sh);text-decoration:none;font-weight:700;transition:transform .5s var(--spring),background .3s,color .3s,border-radius .5s}
.chips a:hover{transform:translateY(-4px);background:var(--accent);color:#fff;border-radius:var(--leaf)}
.chips .ic{color:var(--brass)}
.prose{font-size:18px;color:var(--muted)}

/* footer: white, a wave for the top edge, links, then the full name set huge, filling with water as it scrolls in */
.ft{position:relative;margin-top:0;overflow:hidden}
.ft-wave{display:block;width:200%;height:70px;margin-bottom:-1px}
.ft-wave .wv-b{fill:color-mix(in srgb,var(--surface) 55%,transparent)}.ft-wave .wv-f{fill:var(--surface)}
.ft-body{background:var(--surface);padding:30px 0 0;overflow:hidden}
.ft-grid{display:grid;grid-template-columns:1.25fr 1fr 1.5fr;gap:44px}
.ft-brand p{color:var(--muted);font-size:14.5px;margin-top:20px;max-width:380px}
.ft h2{font:700 12px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin:10px 0 16px}
.ft-col a{display:block;text-decoration:none;color:var(--muted);font-size:15px;padding:4px 0;transition:color .3s,transform .45s var(--spring)}
.ft-col a:hover{color:var(--accent);transform:translateX(6px)}
.ft-towns{columns:2;column-gap:24px}.ft-towns h2{column-span:all}
.ft-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:44px;font-size:13px;color:var(--muted)}
.ft-legal a{color:var(--muted);text-decoration:none;margin-left:16px;transition:color .3s}
.ft-legal a:hover{color:var(--ink)}
.ft-pw{display:flex;align-items:center;gap:8px}
.ee-logo{height:15px;width:auto;color:var(--muted)}
/* credit: EE line + the contractor link, one anchor; a small brass wave under the link */
.ft-legal a.ft-pw{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.ft-pw-a{display:flex;align-items:center;gap:8px}
.ft-pw-b{color:var(--ink);font-weight:600;text-decoration:underline wavy;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:color-mix(in srgb,var(--brass) 70%,transparent);transition:color .3s,text-decoration-color .3s}
.ft-pw:hover .ft-pw-b{color:var(--accent);text-decoration-color:var(--brass)}
.ft-word{display:block;width:calc(100% - 32px);max-width:1440px;height:auto;margin:34px auto 0;padding-bottom:14px;overflow:visible}
.ft-word text{font-family:var(--f-display);font-weight:var(--f-display-w);font-size:72px;letter-spacing:-.01em}
.ft-word-m{display:none}
.ft-word-o{fill:transparent;stroke:color-mix(in srgb,var(--accent) 40%,transparent);stroke-width:.9}
.ft-water{transform:translateY(100px);transition:transform 1.44s var(--ease)}
.ft-word.in .ft-water{transform:translateY(-6px)}
.ft-water-p{fill:var(--accent);animation:ftwv 6s linear infinite}
@keyframes ftwv{to{transform:translateX(-240px)}}

/* reveals: float up out of the water, only under html.js, never on the first screen */
html.js [data-reveal]{opacity:0;translate:0 44px;transition:opacity .54s var(--ease),translate .66s var(--ease),transform .55s var(--spring),box-shadow .5s var(--ease),border-radius .6s var(--ease)}
html.js [data-reveal].in{opacity:1;translate:0 0}
html.js .pair-ph[data-reveal],html.js .svc-view[data-reveal],html.js .rmap-map[data-reveal]{clip-path:inset(100% 0 0 0 round 28px);translate:0 0;opacity:1;transition:clip-path .78s var(--ease),transform .55s var(--spring),box-shadow .5s}
html.js .pair-ph[data-reveal].in,html.js .svc-view[data-reveal].in,html.js .rmap-map[data-reveal].in{clip-path:inset(0 0 0 0 round 0)}

/* tablets */
@media (max-width:1100px){
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .tiles-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .nav,.hdr-in .btn-sm{display:none}
  .burger{display:block}
  .demo,.story,.pair,.permit-row,.pricebox,.svc{grid-template-columns:1fr;gap:34px}
  .demo .phone{width:270px}
  .stops li{min-height:150px}
  .hero-clips{display:none}
  .tiles{grid-template-columns:1fr 1fr}
  .trio,.facts{grid-template-columns:1fr 1fr}
  .trio li:last-child:nth-child(odd){grid-column:1/-1}
  .ft-grid{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1/-1}
  .pair-ph{min-height:360px}
  .pair-copy .pair-ph{order:-1}
  .svc-view{display:none}
  .reel-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:10px 24px 10px;margin:0 -24px;width:calc(100% + 48px);scrollbar-width:none}
  .reel-row::-webkit-scrollbar{display:none}
  .ugc{flex:0 0 min(320px,76vw);scroll-snap-align:center}
  .reel-tabs{display:flex}
}
@media (max-width:760px){
  /* services on phones: every row carries its photo as a strip */
  .svc-list{padding:8px;gap:8px;background:none;box-shadow:none}
  .svc-list a{grid-template-columns:48px 1fr 20px;padding:0 16px 18px;background:var(--surface);box-shadow:var(--sh);border-radius:var(--leaf);overflow:hidden;align-items:start}
  .svc-list a:hover{transform:none}
  .sl-ph{display:block;grid-column:1/-1;height:112px;margin:0 -16px 4px}
  .svc-list a.on{background:var(--surface)}
  .sl-ph img{width:100%;height:100%;object-fit:cover}
  .sl-ic{margin-top:-30px;background:var(--accent);color:#fff;box-shadow:var(--sh)}
  .sl-t{padding-top:4px}
  .sl-go{margin-top:10px}
}
@media (max-width:640px){
  :root{--edge:40px}
  body{font-size:17px}
  .wrap,.narrow{width:calc(100% - 32px)}
  .sec{padding:72px 0}
  .sec-soft{padding:calc(72px + var(--edge) / 2) 0}
  .sec-first{padding-top:48px}
  .head{margin-bottom:38px}
  .h1{font-size:clamp(30px,9.4vw,46px)}
  .phero .h1{font-size:clamp(28px,8.4vw,40px)}
  .h2{font-size:clamp(24px,7vw,32px)}
  .hero-in{padding:110px 0 160px}
  .hero-badges{flex-direction:column;align-items:center;gap:8px;font-size:14.5px}
  .phero-in{padding:120px 0 110px}
  .hdr-in{height:64px;width:calc(100% - 24px)}
  .word b{font-size:15px}.word i{font-size:9px;letter-spacing:.2em}
  .mark{width:38px;height:38px}
  .burger{width:44px;height:44px}
  .burger span{left:13px;right:13px}.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:21px;right:18px}.burger span:nth-child(3){top:28px}
  .btn{font-size:16px;padding:16px 16px 16px 22px;gap:12px}
  .btn .arr{width:36px;height:36px}
  .stops li{grid-template-columns:52px 1fr;gap:12px;min-height:0;flex:none}
  .hero .kick{flex-wrap:wrap;justify-content:center;text-align:center;font-size:11px;letter-spacing:.14em;max-width:300px;line-height:1.5}
  .hero .kick::before{display:none}
  .ft-word{display:none}
  .ft-word.ft-word-m{display:block;width:calc(100% - 32px)}
  .stream{width:52px}
  .dot{width:44px;height:44px;font-size:13px}
  .stop-c{padding:20px}
  .stop-ic{position:static;width:38px;height:38px;margin-bottom:10px}
  .stop-c b{font-size:18px}
  .levels{padding:28px 18px 24px}
  .cols{gap:10px;min-height:300px}
  .col span{font-size:12.5px}
  .fair{font-size:9px;letter-spacing:.06em;right:4px}
  .flowline ol{gap:22px}
  .fl{grid-template-columns:56px 1fr;gap:6px 14px;align-items:start}
  .fl-river{left:0;margin-left:-12px}
  .fl-node{grid-column:1;grid-row:1/span 2;width:48px;height:48px;font-size:14px;align-self:start;margin-top:6px}
  .fl-l .fl-when,.fl-r .fl-when{grid-column:2;grid-row:1;justify-content:flex-start;text-align:left}
  .fl-r .fl-when .ic{order:0}
  .fl .fl-card,.fl-r .fl-card{grid-column:2;grid-row:2;padding:24px 22px}
  .fl-when span{font-size:16px}
  .fl-when .ic{width:20px;height:20px}
  html.js .fl .fl-card,html.js .fl .fl-when{transform:translateY(24px)}
  .tiles,.tiles-4{grid-template-columns:1fr;grid-auto-rows:auto}
  .tile{padding:0 24px 26px;min-height:0}
  .tile-ph{position:relative;inset:auto;z-index:0;clip-path:none;height:140px;margin:0 -24px 6px}
  .tile-ph::after{background:linear-gradient(0deg,rgba(18,24,14,.25),transparent)}
  .tile-ic{margin:-34px 0 6px;position:relative;z-index:1;background:var(--accent);color:#fff;box-shadow:var(--sh)}
  .tile:hover b{color:inherit}.tile:hover .tile-l{color:var(--muted)}.tile:hover em{color:var(--accent)}
  .rmap-map{height:400px}
  .fmap{min-height:340px}
  .acc summary{grid-template-columns:auto 1fr 32px;gap:12px;padding:18px;font-size:16.5px}
  .acc summary i{width:32px;height:32px}
  .acc summary i::before,.acc summary i::after{left:10px;right:10px;top:15px}
  .acc-a{padding:0 18px 20px}
  .band{padding:20px 0 80px}
  .band-card{padding:80px 20px 120px}
  .band-sub{font-size:18px}
  .pb-a,.pb-b{padding:30px 24px}
  .stack{padding:24px 16px}
  .stack-rows li{grid-template-columns:14px 1fr auto;gap:4px 12px;padding:10px 6px}
  .stack-rows span{grid-column:2/-1;grid-row:2;font-size:14px}
  .stack-tot{padding:14px 16px;font-size:14.5px}
  .updown,.trio,.facts{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr;gap:12px}
  .facts div{padding:22px 12px}
  .facts dt{font-size:11px;letter-spacing:.08em}
  .trio li:last-child:nth-child(odd){grid-column:auto}
  .pair-ph{min-height:300px}
  .pair-copy{gap:34px}
  .ft-grid{grid-template-columns:1fr;gap:30px}
  .ft-legal{flex-direction:column;align-items:center;text-align:center}
  .ft-legal a{margin:0 8px}
}
/* touch screens with no hover: show service photos as strips (Playwright and some tablets report hover, so the width
   rule above covers phones too) */
@media (hover:none) and (min-width:641px){
  .tile{padding:0 28px 28px}
  .tile-ph{position:relative;inset:auto;z-index:0;clip-path:none;height:150px;margin:0 -28px 6px}
  .tile-ph::after{background:linear-gradient(0deg,rgba(18,24,14,.25),transparent)}
  .tile-ic{margin:-34px 0 6px;position:relative;z-index:1;background:var(--accent);color:#fff}
  .tile:hover b{color:inherit}.tile:hover .tile-l{color:var(--muted)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html.js .flow .w,html.js .hero-h1 .ch,html.js .rise{opacity:1;transform:none;filter:none}html.js [data-reveal]{opacity:1;translate:none;clip-path:none}html.js .fl .fl-card,html.js .fl .fl-when{opacity:1;transform:none}.ft-water{transform:none}}