/* Local Loop Guide — "the loop" (October 2, 2026)
   Everything animated lives under html.motion. Without it (reduced motion, Motion off, no JavaScript)
   the page is a complete, static, readable version of the same content. */

:root{
  --ink:#071d1a; --ink-2:#0d2a25; --forest:#173c33; --moss:#3f7a55; --cream:#f3f0e4; --paper:#fffdf1;
  --citrus:#dfff4e; --coral:#f07b5e; --coral-d:#d4512d; --sage:#cdddc0; --muted:#48655b;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --gutter:clamp(18px,4vw,56px);
  --hdr-h:60px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --t0:0s;
}
html.intro{--t0:1.5s}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
html.motion{scroll-behavior:smooth}
html.menu-open{overflow:hidden}
body{margin:0;background:var(--ink);color:var(--paper);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:4px}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
em{font-style:normal}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1em;height:1em;flex:none}
:focus-visible{outline:3px solid var(--coral);outline-offset:4px;border-radius:6px}
.hero :focus-visible,.neigh :focus-visible,.foot :focus-visible,.hdr :focus-visible,.menu :focus-visible{outline-color:var(--citrus)}
.skip-link{position:fixed;left:16px;top:-80px;z-index:300;padding:12px 18px;border-radius:10px;background:var(--citrus);color:var(--ink);font-weight:800;text-decoration:none}
.skip-link:focus{top:14px}

.eyebrow{font:500 12px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.underlined-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 2px;padding-bottom:3px;transition:background-size .35s var(--ease)}
.underlined-link:hover{background-size:0 2px;background-position:100% 100%}
.underlined-link .ico{transition:transform .3s var(--ease)}
.underlined-link:hover .ico{transform:translate(3px,-3px)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:14px 24px;border:2px solid var(--ink);border-radius:999px;font:800 16px/1 var(--sans);text-decoration:none;transition:background .25s,color .25s,transform .25s var(--ease)}
.button .ico{width:18px;height:18px;transition:transform .3s var(--ease)}
.button:hover .ico{transform:translate(3px,-3px)}
.button-dark{background:var(--ink);color:var(--citrus)}
.button-dark:hover{background:var(--coral-d);border-color:var(--ink);color:var(--paper)}
.button-ghost{background:transparent;color:var(--ink)}
.button-ghost:hover{background:var(--citrus)}

/* ---------- intro curtain (first visit of a session, motion on) ---------- */
.curtain{display:none}
html.intro .curtain{display:grid;position:fixed;inset:0;z-index:200;place-items:center;background:var(--ink);color:var(--citrus);
  animation:curtain-up .85s cubic-bezier(.77,0,.18,1) 1.35s forwards,curtain-gone 0s 4s forwards}
.curtain-in{display:grid;justify-items:center;gap:18px;font:900 clamp(30px,5vw,56px)/1 var(--sans);letter-spacing:-.05em;animation:curtain-fade .3s ease 1.25s forwards}
.curtain-loop{width:clamp(64px,9vw,104px);height:clamp(64px,9vw,104px);animation:spin 1.1s cubic-bezier(.5,.1,.3,1) infinite}
.curtain-bar{display:block;width:min(260px,60vw);height:4px;border-radius:4px;background:rgba(223,255,78,.2);position:relative;overflow:hidden}
.curtain-bar::after{content:"";position:absolute;inset:0;background:var(--citrus);transform-origin:0 50%;animation:bar 1.05s cubic-bezier(.6,0,.2,1) .15s both}
@keyframes curtain-up{to{transform:translateY(-101%);border-radius:0 0 50% 50%/0 0 9vh 9vh}}
@keyframes curtain-gone{to{visibility:hidden}}
@keyframes curtain-fade{to{opacity:0}}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- header ---------- */
.progress{position:fixed;left:0;right:0;top:0;height:4px;z-index:96;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--coral),var(--citrus));transform-origin:0 50%;transform:scaleX(var(--p,0))}
.hdr{position:fixed;z-index:90;top:12px;left:0;right:0;margin-inline:auto;width:min(1380px,calc(100% - 2 * var(--gutter)));display:flex;align-items:center;gap:12px;
  padding:7px 7px 7px 18px;border-radius:999px;background:rgba(7,29,26,.93);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 0 0 1px rgba(223,255,78,.22),0 16px 40px -14px rgba(0,0,0,.7);color:var(--cream);transition:width .6s var(--ease),transform .5s var(--ease),background .3s}
html.motion .hdr{animation:hdr-in .9s var(--ease) calc(var(--t0) + .1s) backwards}
@keyframes hdr-in{from{transform:translateY(-120%)}}
.hdr.is-scrolled{width:min(1000px,calc(100% - 2 * var(--gutter)));background:rgba(7,29,26,.97)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:inherit;white-space:nowrap}
.brand-mark{width:38px;height:38px;color:var(--citrus);transform:rotate(var(--spin,0deg))}
.brand-name{font:800 22px/.92 var(--sans);letter-spacing:-.06em}
.brand-name small{display:block;margin-top:5px;font:500 8.5px/1 var(--mono);letter-spacing:.2em}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{position:relative;padding:11px 15px;border-radius:999px;font:700 14px/1 var(--sans);text-decoration:none;transition:background .25s,color .25s}
.nav a:hover,.nav a.is-current{background:rgba(223,255,78,.14);color:var(--citrus)}
.motion-toggle{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 14px;border:1px solid rgba(243,240,228,.3);border-radius:999px;background:transparent;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:background .25s,border-color .25s}
.motion-toggle:hover{background:rgba(243,240,228,.1);border-color:rgba(243,240,228,.6)}
.mt-dot{width:9px;height:9px;border-radius:50%;background:var(--citrus);box-shadow:0 0 0 0 rgba(223,255,78,.6)}
html.motion .mt-dot{animation:ping 2s ease-out infinite}
html:not(.motion) .mt-dot{background:transparent;box-shadow:inset 0 0 0 2px var(--cream)}
@keyframes ping{70%,100%{box-shadow:0 0 0 9px rgba(223,255,78,0)}}
.hdr-cta{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:999px;background:var(--citrus);color:var(--ink);font:800 15px/1 var(--sans);text-decoration:none;transition:background .25s}
.hdr-cta .ico{width:16px;height:16px;transition:transform .3s var(--ease)}
.hdr-cta:hover{background:#f0ffa0}
.hdr-cta:hover .ico{transform:translate(3px,-3px) rotate(0)}
.menu-btn{display:none;position:relative;width:46px;height:46px;border:0;border-radius:50%;background:var(--citrus);color:var(--ink)}
.menu-btn span{position:absolute;left:14px;right:14px;height:2.5px;border-radius:2px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-btn span:nth-child(1){top:19px}.menu-btn span:nth-child(2){top:26px}
html.menu-open .menu-btn span:nth-child(1){top:22.5px;transform:rotate(45deg)}
html.menu-open .menu-btn span:nth-child(2){top:22.5px;transform:rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:85;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:34px;padding:100px var(--gutter) 40px;background:var(--ink);visibility:hidden;
  clip-path:circle(0 at calc(100% - 44px) 38px);transition:clip-path .75s var(--ease),visibility 0s .75s}
html.menu-open .menu{visibility:visible;clip-path:circle(160% at calc(100% - 44px) 38px);transition-delay:0s}
.menu-nav{display:grid;gap:6px}
.menu-nav a{display:flex;align-items:baseline;gap:16px;padding:6px 0;font:900 clamp(38px,11vw,68px)/1 var(--sans);letter-spacing:-.06em;color:var(--citrus);text-decoration:none;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .7s var(--ease)}
.menu-nav a::before{content:attr(data-n);font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--coral)}
html.menu-open .menu-nav a{opacity:1;transform:none}
html.menu-open .menu-nav a:nth-child(1){transition-delay:.25s}html.menu-open .menu-nav a:nth-child(2){transition-delay:.32s}
html.menu-open .menu-nav a:nth-child(3){transition-delay:.39s}html.menu-open .menu-nav a:nth-child(4){transition-delay:.46s}

.dots{position:fixed;right:16px;top:50%;z-index:70;display:none;flex-direction:column;gap:6px;transform:translateY(-50%);mix-blend-mode:difference;color:#fff}
.dots a{position:relative;display:grid;place-items:center;width:26px;height:26px;text-decoration:none}
.dots a::before{content:"";width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;transition:transform .3s var(--ease),background .3s}
.dots a.is-on::before{background:currentColor;transform:scale(1.5)}
.dots a span{position:absolute;right:30px;padding:4px 10px;border-radius:999px;background:#fff;color:#000;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(8px);pointer-events:none;transition:opacity .25s,transform .25s}
.dots a:hover span,.dots a:focus-visible span{opacity:1;transform:none}
@media (min-width:1100px){.dots{display:flex}}

.float-cta{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:80;display:none;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;background:var(--citrus);color:var(--ink);font:800 16px/1 var(--sans);text-decoration:none;
  box-shadow:0 0 0 2px var(--ink),0 12px 30px -8px rgba(0,0,0,.6);transform:translateY(140%);transition:transform .5s var(--ease)}
.float-cta .ico{width:16px;height:16px}
.float-cta.show{transform:none}

.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  html.motion .cursor{position:fixed;left:0;top:0;z-index:150;display:grid;place-items:center;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;
    transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),opacity .3s,background .25s}
  html.motion .cursor.is-on{opacity:1}
  html.motion .cursor.is-link{width:48px;height:48px;margin:-24px 0 0 -24px}
  html.motion .cursor.is-label{width:86px;height:86px;margin:-43px 0 0 -43px;background:var(--citrus);mix-blend-mode:normal}
  .cursor-label{font:700 11px/1 var(--mono);letter-spacing:.1em;color:var(--ink);opacity:0;transition:opacity .2s}
  .cursor.is-label .cursor-label{opacity:1}
}
.confetti{position:fixed;inset:0;z-index:140;width:100%;height:100%;pointer-events:none}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:var(--paper)}
.hero-stage{position:relative;isolation:isolate;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:12px;min-height:100vh;min-height:100svh;overflow:hidden;
  padding:calc(var(--hdr-h) + 36px) var(--gutter) 20px}
html.motion .hero{height:215vh;height:215svh}
html.motion .hero-stage{position:sticky;top:0;height:100vh;height:100svh}
@media (max-height:560px){html.motion .hero{height:auto}html.motion .hero-stage{position:relative;height:auto}}

.hero-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 48%,#1f4d39 0,#12352c 30%,var(--ink) 68%)}
.au{position:absolute;border-radius:50%;filter:blur(72px);mix-blend-mode:screen;opacity:.5}
.au1{width:46vw;height:46vw;left:-10vw;top:-14vw;background:#3b8a5a}
.au2{width:36vw;height:36vw;right:-8vw;top:8vh;background:rgba(223,255,78,.34)}
.au3{width:34vw;height:34vw;left:28vw;bottom:-18vw;background:rgba(240,123,94,.42)}
html.motion .au1{animation:drift-a 17s ease-in-out infinite alternate}
html.motion .au2{animation:drift-b 14s ease-in-out infinite alternate}
html.motion .au3{animation:drift-c 19s ease-in-out infinite alternate}
@keyframes drift-a{to{transform:translate(14vw,10vh) scale(1.25)}}
@keyframes drift-b{to{transform:translate(-16vw,14vh) scale(.8)}}
@keyframes drift-c{to{transform:translate(-12vw,-12vh) scale(1.3)}}
.ripple{position:absolute;left:50%;top:54%;width:70vmin;height:70vmin;margin:-35vmin 0 0 -35vmin;border:1.5px solid rgba(223,255,78,.4);border-radius:50%;opacity:0}
html.motion .ripple{animation:ripple 8s linear infinite}
.r2{animation-delay:2.7s!important}.r3{animation-delay:5.4s!important}
@keyframes ripple{0%{transform:scale(.25);opacity:.7}100%{transform:scale(2.6);opacity:0}}
.grain{position:absolute;inset:0;opacity:.16;background-image:repeating-linear-gradient(0deg,transparent 0 2px,rgba(216,241,182,.12) 3px 4px),radial-gradient(rgba(238,255,227,.13) .8px,transparent 1px);background-size:auto,9px 9px;pointer-events:none}

.hero-meta,.hero-edge{display:flex;justify-content:space-between;gap:20px;font:500 11.5px/1.4 var(--mono);letter-spacing:.14em;color:#cfe3c7}
.hero-edge{font-size:10.5px}
.scroll-cue{display:inline-flex;align-items:center;gap:8px}
html.motion .scroll-cue .ico{animation:cue 1.6s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(5px)}}
.hero-main{position:relative;min-height:0;--hs:clamp(96px,min(22.5vw,calc((100svh - 370px) / 1.5)),420px);--pcw:min(40vw,calc((100svh - 360px) * 1.1),600px)}
.hero-title{position:absolute;left:0;right:0;top:0;font-weight:900;font-size:var(--hs);line-height:.78;letter-spacing:-.065em;text-transform:uppercase;color:var(--citrus);white-space:nowrap;user-select:none;-webkit-user-select:none}
.ln{display:block;will-change:transform}
.ln2{text-align:right;padding-right:.05em}
.ch{display:inline-block;color:var(--citrus);color:color-mix(in srgb,var(--coral) calc(var(--h,0) * 100%),var(--citrus));will-change:transform}
.chi{display:inline-block}
html.motion .chi{animation:ch-rise 1.1s var(--ease) calc(var(--t0) + var(--i) * .06s) backwards,ch-wave 5.5s ease-in-out calc(var(--t0) + 1.4s + var(--i) * .22s) infinite}
@keyframes ch-rise{from{transform:translateY(95%) rotate(10deg);opacity:0}}
@keyframes ch-wave{50%{transform:translateY(-1.4%)}}
.ast{display:inline-block;width:.23em;height:.23em;margin-left:.05em;color:var(--coral);vertical-align:top;transform:translateY(.12em)}
.ast .ico{width:100%;height:100%}
html.motion .ast .ico{animation:spin 9s linear infinite}

.pc{position:absolute;left:52%;top:56%;width:var(--pcw);aspect-ratio:4/3;margin:calc(var(--pcw) * -.375) 0 0 calc(var(--pcw) * -.5);perspective:1500px;z-index:2;cursor:pointer;container-type:inline-size;will-change:transform}
html.motion .pc{opacity:0}
.pc-shadow{position:absolute;left:8%;right:8%;bottom:-7%;height:13%;border-radius:50%;background:#000;filter:blur(30px);opacity:.55}
.pc-tilt,.pc-flip{position:absolute;inset:0;transform-style:preserve-3d}
.pc-flip{transition:transform .0s}
html:not(.motion) .pc-flip{transform:rotateZ(-4deg);transition:none}
html:not(.motion) .pc.is-flipped .pc-flip{transform:rotateY(180deg) rotateZ(4deg)}
.pc-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid #f8ffcf;border-radius:.9cqw;box-shadow:inset 0 0 0 1.6cqw rgba(245,247,222,.35),0 2px 0 2px #18442d;background:#e4efbe;color:#071d1a}
.pc-front{display:flex;flex-direction:column;justify-content:space-between;padding:5.5cqw 6.5cqw;background:linear-gradient(125deg,#f5efc5 0 18%,#e6f0be 18% 72%,#d7e993 72% 100%)}
.pc-front::before{content:"";position:absolute;inset:4cqw;border:1px solid #0b3e33;pointer-events:none}
.pc-top,.pc-bottom{position:relative;z-index:3;display:flex;justify-content:space-between;gap:2cqw;font:500 max(7px,1.9cqw)/1.25 var(--mono);letter-spacing:.12em}
.pc-sun{position:absolute;right:5.5cqw;top:8cqw;width:34cqw;height:34cqw;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3.4cqw rgba(240,160,100,.4)}
.pc-road{position:absolute;left:18cqw;bottom:-26cqw;width:56cqw;height:56cqw;border:8cqw solid rgba(70,126,88,.42);border-radius:50%}
.pc-flower{position:absolute;right:21cqw;top:36cqw;width:15cqw;height:15cqw;color:#0b3e33}
.pc-flower .ico{width:100%;height:100%}
.pc-big{position:relative;z-index:2;display:block;font:900 15.2cqw/.82 var(--sans);letter-spacing:-.055em}
.pc-big em{font:400 1em/.82 var(--serif);letter-spacing:-.03em;color:var(--coral-d)}
.pc-back{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:space-between;padding:5.5cqw 6.5cqw;background:linear-gradient(135deg,#d7e993,#e6f0be 50%,#f5efc5)}
.pc-back::before{content:"";position:absolute;inset:4cqw;border:1px solid #0b3e33;pointer-events:none}
.pc-back-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3cqw;font:900 8.6cqw/.88 var(--sans);letter-spacing:-.045em}
.pc-back-grid span:last-child{text-align:right;color:var(--coral-d)}
.pc-stampbox{position:absolute;right:8cqw;top:12cqw;width:14cqw;height:17cqw;display:grid;place-items:center;border:.5cqw dashed #0b3e33;color:#0b3e33}
.pc-stampbox .ico{width:8cqw;height:8cqw}
.pc-glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,28%) var(--gy,18%),rgba(255,255,255,.7),transparent 48%);mix-blend-mode:soft-light;opacity:.8}
.stamp{position:absolute;right:-3cqw;top:-9cqw;width:22cqw;height:22cqw;z-index:6;overflow:visible;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.stamp-disc{fill:var(--coral)}
.stamp text{font:700 15.2px var(--sans);letter-spacing:.06em;fill:var(--ink)}
.stamp-core{color:var(--ink)}
.stamp-ring{transform-origin:100px 100px}
html.motion .stamp-ring{animation:spin 22s linear infinite}
html.motion .stamp{animation:stamp-in .9s cubic-bezier(.3,1.6,.4,1) calc(var(--t0) + 1.9s) backwards}
@keyframes stamp-in{from{transform:scale(2.6) rotate(-40deg);opacity:0}}

.chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font:800 clamp(12px,1.05vw,15px)/1 var(--sans);white-space:nowrap;will-change:transform}
.chip .ico{width:15px;height:15px}
.chip1{left:5%;top:60%;background:var(--coral);color:var(--ink);transform:rotate(-6deg)}
.chip2{right:4%;top:50%;background:var(--cream);color:var(--ink);transform:rotate(5deg)}
.chip3{left:15%;top:12%;background:var(--ink);color:var(--citrus);box-shadow:inset 0 0 0 2px var(--citrus);transform:rotate(-3deg)}
html.motion .chip{animation:chip-in .9s var(--ease) calc(var(--t0) + 1.6s) backwards}
@keyframes chip-in{from{opacity:0;scale:.4}}
.pc-hint{white-space:nowrap;position:absolute;left:50%;bottom:-6px;z-index:4;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border:1px solid rgba(223,255,78,.4);border-radius:999px;background:rgba(7,29,26,.5);color:var(--citrus);font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:background .25s,color .25s}
.pc-hint .ico{width:14px;height:14px}
.pc-hint:hover{background:var(--citrus);color:var(--ink)}

.hero-bottom{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:end}
.hero-kicker{font:500 12px/1.4 var(--mono);letter-spacing:.14em;color:var(--citrus)}
.hero-lede{max-width:36ch;margin-top:10px;font-size:clamp(18px,1.55vw,24px);line-height:1.38;color:#edf6df}
.hero-note{margin-top:8px;font-size:13.5px;color:#a9c4b0}
.hero-choose{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"k i" "s i";align-items:center;gap:3px 14px;min-height:78px;padding:15px 18px;border-radius:20px;text-decoration:none;overflow:hidden;transition:transform .35s var(--ease),background .3s,color .3s}
.choice-k{grid-area:k;font:800 18px/1.1 var(--sans);letter-spacing:-.02em}
.choice-s{grid-area:s;font-size:13.5px;line-height:1.3;opacity:.8}
.choice .ico{grid-area:i;width:28px;height:28px;transition:transform .35s var(--ease)}
.choice:hover .ico{transform:translateY(5px)}
.choice-a{background:var(--citrus);color:var(--ink)}
.choice-a:hover{background:#f0ffa0}
.choice-b{color:var(--citrus);box-shadow:inset 0 0 0 2px var(--citrus)}
.choice-b:hover{background:var(--citrus);color:var(--ink)}
html.motion .hero-bottom{animation:fade-up 1s var(--ease) calc(var(--t0) + 1.2s) backwards}
html.motion .hero-meta{animation:fade-up .9s var(--ease) calc(var(--t0) + .5s) backwards}
@keyframes fade-up{from{opacity:0;transform:translateY(34px)}}

.iris{display:none}
html.motion .iris{position:absolute;inset:0;z-index:20;display:grid;place-items:center;text-align:center;padding:0 var(--gutter);background:var(--cream);color:var(--ink);clip-path:circle(0px at 50% 50%);pointer-events:none}
.iris p{font:400 clamp(46px,10vw,168px)/.94 var(--serif);letter-spacing:-.035em}
.iris em{color:var(--coral-d)}

@media (max-width:900px){
  .hero-main{--hs:clamp(92px,30vw,330px);--pcw:min(80vw,540px)}
  .pc{top:calc(var(--hs) * 1.3 + var(--pcw) * .375)}
  .chip3{display:none}
  .chip1{left:2%;top:auto;bottom:6%}.chip2{right:1%;top:auto;bottom:22%}
  .hero-bottom{grid-template-columns:1fr;gap:16px}
  .hero-choose{grid-template-columns:1fr 1fr}
  .hero-stage{padding-top:calc(var(--hdr-h) + 30px)}
}
@media (max-width:560px){
  .hero-choose{grid-template-columns:1fr}
  .choice{min-height:68px;padding:12px 16px}
  .hero-edge span:last-child{display:none}
  .chip2{display:none}
  .hero-note{display:none}
  .hero-meta span:last-child{display:none}
  .hero-stage{gap:10px}
}

/* Short phones (portrait): do not pin the hero, so nothing is squeezed or clipped. */
@media (max-width:900px) and (max-height:700px){
  html.motion .hero{height:auto}
  html.motion .hero-stage{position:relative;height:auto}
  .hero-main{--hs:clamp(84px,28vw,140px);--pcw:calc(var(--hs) * 2.3);min-height:calc(var(--hs) * 1.3 + var(--pcw) * .75 + 40px)}
  .chip{display:none}
}
/* Landscape phones: wordmark on the left, card on the right. */
@media (max-height:560px){
  .hero-stage{gap:14px}
  .hero-main{--hs:clamp(80px,34svh,190px);--pcw:calc(var(--hs) * 2.2);min-height:calc(var(--hs) * 1.7)}
  .pc{left:auto;right:5%;top:50%;margin:calc(var(--pcw) * -.375) 0 0}
  .ln2{text-align:left;padding-left:0}
  .chip,.pc-hint{display:none}
  .hero-bottom{grid-template-columns:1fr 1fr;gap:18px}
  .hero-choose{grid-template-columns:1fr}
  .hero-note{display:none}
}

/* ---------- 02 story ---------- */
.story{position:relative;background:var(--cream);color:var(--ink)}
.story-head{max-width:1480px;margin:0 auto;padding:clamp(90px,11vw,170px) var(--gutter) clamp(30px,5vw,70px)}
.story-title{margin-top:18px;font:900 clamp(40px,8.2vw,148px)/.9 var(--sans);letter-spacing:-.05em;word-spacing:.05em;text-transform:uppercase}
.story-title em,.n-head h2 em,.biz h2 em{font:400 1em/.9 var(--serif);letter-spacing:-.035em;text-transform:none}
.story-title em{color:var(--coral-d)}
.story-lede{max-width:34ch;margin:clamp(24px,3vw,40px) 0 0 auto;font:500 clamp(20px,2.1vw,32px)/1.25 var(--sans);letter-spacing:-.02em}

.story-pin{position:relative}
html.motion .story-pin{height:420vh;height:420svh}
.story-stage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,80px);align-items:center;max-width:1480px;margin:0 auto;padding:0 var(--gutter) clamp(60px,8vw,110px)}
html.motion .story-stage{position:sticky;top:0;height:100vh;height:100svh;padding-top:84px;padding-bottom:24px}
@media (max-height:560px){html.motion .story-pin{height:auto}html.motion .story-stage{position:relative;height:auto;padding-top:20px}}
.steps{display:grid;align-content:center}
.step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 clamp(14px,1.6vw,24px);padding:clamp(14px,2.2vh,24px) 0;border-top:2px solid rgba(7,29,26,.15)}
.step:last-child{border-bottom:2px solid rgba(7,29,26,.15)}
html.motion .step{opacity:.52;transition:opacity .5s var(--ease)}
html.motion .step.is-active{opacity:1}
.step-hit{display:grid;place-items:center;align-self:start;width:46px;height:46px;border:2px solid var(--ink);border-radius:50%;background:transparent;font:500 13px/1 var(--mono);transition:background .35s,transform .45s var(--ease)}
.step.is-active .step-hit,.step-hit:hover{background:var(--citrus)}
.step.is-active .step-hit{transform:scale(1.12) rotate(-8deg)}
.step-label{display:block;font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;color:var(--muted)}
.step h3{margin-top:6px;font:800 clamp(24px,2.9vw,46px)/1.02 var(--sans);letter-spacing:-.045em}
.step-more{display:grid;grid-template-rows:1fr}
.step-more p{min-height:0;max-width:42ch;margin-top:10px;font-size:clamp(16px,1.25vw,20px);line-height:1.5;color:#27413a}
html.motion .step-more{grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
html.motion .step-more p{overflow:hidden;margin-top:0;opacity:0;transition:opacity .4s,margin .5s var(--ease)}
html.motion .step.is-active .step-more{grid-template-rows:1fr}
html.motion .step.is-active .step-more p{opacity:1;margin-top:10px;transition-delay:.15s}
.step-fill{position:absolute;left:0;bottom:-2px;height:3px;width:calc(var(--f,0) * 100%);background:var(--coral-d)}
html:not(.motion) .step-fill{display:none}

.loop-vis{position:relative;display:grid;place-items:center}
.loop-svg{width:min(100%,calc((100svh - 120px) * .97));height:auto;max-height:calc(100svh - 120px);overflow:visible}
html:not(.motion) .loop-svg{max-height:none}
.loop-halo{fill:none;stroke:rgba(7,29,26,.13);stroke-width:2;stroke-dasharray:2 12;stroke-linecap:round;transform-origin:320px 330px}
.loop-halo--2{stroke:rgba(212,81,45,.25)}
html.motion .loop-halo{animation:spin 80s linear infinite}
html.motion .loop-halo--2{animation-duration:55s;animation-direction:reverse}
.route-base{fill:none;stroke:rgba(7,29,26,.12);stroke-width:16;stroke-linecap:round;stroke-linejoin:round}
.route-draw{fill:none;stroke:var(--ink);stroke-width:16;stroke-linecap:round;stroke-linejoin:round}
.house-in path{fill:var(--citrus);stroke:var(--ink);stroke-width:3.5;stroke-linejoin:round}
.house-in{transform-box:fill-box;transform-origin:50% 100%}
.node circle{fill:var(--paper);stroke:var(--ink);stroke-width:5;transition:fill .35s}
.node text{font:700 22px var(--mono);text-anchor:middle;fill:var(--ink)}
.node-in{transform-box:fill-box;transform-origin:50% 50%}
html.motion .node-in{transform:scale(.78);transition:transform .55s cubic-bezier(.3,1.6,.4,1)}
html.motion .node.is-on .node-in{transform:scale(1.06)}
.node.is-on circle{fill:var(--citrus)}
.dot-halo{fill:rgba(212,81,45,.3);transform-box:fill-box;transform-origin:50% 50%}
html.motion .dot-halo{animation:dot-pulse 1.6s ease-in-out infinite}
@keyframes dot-pulse{50%{transform:scale(1.7);opacity:.4}}
.dot-core{fill:var(--coral-d);stroke:var(--paper);stroke-width:5}
html.motion .dot{filter:drop-shadow(0 0 10px rgba(212,81,45,.6))}
.loop-cap{position:absolute;right:2%;bottom:1%;font:500 15px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
.loop-cap-no{font:900 clamp(38px,5vw,70px)/1 var(--sans);letter-spacing:-.06em;color:var(--ink)}
html:not(.motion) .loop-cap{display:none}

.scene{transform-box:fill-box;transform-origin:50% 50%}
html.motion .scene{opacity:0;transform:scale(.8) rotate(-6deg);transition:opacity .45s,transform .8s var(--ease)}
html.motion .scene.is-on{opacity:1;transform:none}
html:not(.motion) .scene:not(.is-on){display:none}
.mailpost rect{fill:var(--ink)}
.mailbox{fill:var(--citrus);stroke:var(--ink);stroke-width:8;stroke-linejoin:round}
.mailslot{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round}
.flag rect{fill:var(--ink)}
.flag .flag-tab{fill:var(--coral)}
.flag{transform-box:fill-box;transform-origin:50% 100%}
.mail rect{fill:var(--paper);stroke:var(--ink);stroke-width:6}
.mail path{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.mail circle{fill:var(--coral)}
.mail{transform:translate(0,34px)}
html.motion .scene.is-on .mail{animation:mail-drop 1.7s var(--ease) .15s backwards}
html.motion .scene.is-on .flag{animation:flag-up .7s cubic-bezier(.3,1.5,.4,1) 1.5s backwards}
@keyframes mail-drop{from{transform:translate(120px,-140px) rotate(24deg)}60%{transform:translate(0,4px) rotate(-6deg)}}
@keyframes flag-up{from{transform:rotate(78deg)}}
.win{fill:var(--paper);stroke:var(--ink);stroke-width:8}
.win-bar{stroke:var(--ink);stroke-width:6;fill:none}
.win-dot{fill:var(--coral)}
.win-dot:nth-of-type(2){fill:var(--citrus);stroke:var(--ink);stroke-width:2}
.win-dot:nth-of-type(3){fill:var(--ink)}
.ln-a{fill:var(--ink)}
.ln-c{fill:rgba(7,29,26,.22)}
.web-btn{fill:var(--coral)}
.web-pic rect{fill:var(--citrus);stroke:var(--ink);stroke-width:6}
.web-pic{color:var(--ink)}
.click{fill:none;stroke:var(--coral-d);stroke-width:5;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.cursor-arrow{fill:var(--ink);stroke:var(--paper);stroke-width:4;stroke-linejoin:round}
html.motion .scene.is-on :is(.ln-a,.ln-c){transform-box:fill-box;transform-origin:0 50%;animation:grow .8s var(--ease) .25s backwards}
html.motion .scene.is-on .ln-b{animation-delay:.45s}
html.motion .scene.is-on .ln-c{animation-delay:.65s}
html.motion .scene.is-on .ln-d{animation-delay:.8s}
html.motion .scene.is-on .web-pic{transform-box:fill-box;transform-origin:50% 50%;animation:pop .8s cubic-bezier(.3,1.5,.4,1) .6s backwards}
html.motion .scene.is-on .web-btn{transform-box:fill-box;transform-origin:50% 50%;animation:pop .6s cubic-bezier(.3,1.5,.4,1) 1s backwards}
html.motion .scene.is-on .cursor-arrow{animation:cursor-in 1.3s var(--ease) 1.1s backwards}
html.motion .scene.is-on .click{animation:click-ripple .9s ease-out 2.3s infinite}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes pop{from{transform:scale(0);opacity:0}}
@keyframes cursor-in{from{transform:translate(150px,-60px)}}
@keyframes click-ripple{0%{transform:scale(.2);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.home-body{fill:var(--paper);stroke:var(--ink);stroke-width:8;stroke-linejoin:round}
.home-roof{fill:none;stroke:var(--coral-d);stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
.home-door{fill:var(--coral)}
.home-win{fill:var(--citrus);stroke:var(--ink);stroke-width:5}
.pin path{fill:var(--coral-d);stroke:var(--ink);stroke-width:6;stroke-linejoin:round}
.pin circle{fill:var(--paper)}
.spark{color:var(--ink)}
.pin{transform-box:fill-box;transform-origin:50% 100%}
html.motion .scene.is-on .pin{animation:pin-drop 1.3s cubic-bezier(.4,0,.3,1) .1s backwards}
html.motion .scene.is-on .home-win{animation:win-glow 2.4s ease-in-out .9s infinite alternate}
html.motion .scene.is-on .spark{transform-box:fill-box;transform-origin:50% 50%;animation:twinkle 1.8s ease-in-out infinite}
html.motion .scene.is-on .s2{animation-delay:.5s}html.motion .scene.is-on .s3{animation-delay:1s}
@keyframes pin-drop{0%{transform:translateY(-260px) scale(.7)}55%{transform:translateY(0) scale(1.1,.86)}75%{transform:translateY(-34px)}100%{transform:none}}
@keyframes win-glow{to{fill:#f5ffb0}}
@keyframes twinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.4}50%{transform:scale(1.15) rotate(40deg);opacity:1}}

@media (max-width:900px){
  .story-stage{grid-template-columns:1fr;gap:12px}
  .loop-vis{order:-1}
  .loop-svg{width:min(100%,calc((100svh - 400px) * .97),420px);max-height:none}
  html:not(.motion) .loop-svg{width:min(100%,420px)}
  .step-hit{width:42px;height:42px;font-size:12px}
  .step{padding:11px 0}
  .step h3{font-size:clamp(21px,5.8vw,28px)}
  .loop-cap{display:none}
  html.motion .story-stage{padding-top:76px;padding-bottom:80px}
  .story-lede{margin-left:0}
}

/* ---------- word splitting + reveals ---------- */
.w{display:inline-block}
.wi{display:inline-block}
html.motion [data-split="rise"] .wi{opacity:0;transform:translateY(70%) rotate(5deg);transition:opacity .6s ease calc(var(--i) * 50ms),transform .9s var(--ease) calc(var(--i) * 50ms)}
html.motion [data-split="rise"].in .wi{opacity:1;transform:none}
html.motion [data-split="scrub"] .wi{opacity:.16;transition:opacity .25s}
html.motion [data-split="scrub"] .wi.lit{opacity:1}
html.motion [data-reveal]{opacity:0;transform:translateY(60px);transition:opacity .8s ease var(--d,0ms),transform 1s var(--ease) var(--d,0ms)}
html.motion [data-reveal].in{opacity:1;transform:none}

/* ---------- 03 local pages ----------
   The strip is filled at load by loop.js from the Worker-filtered /businesses/ page, so this file names no business and no page.
   The cloned tiles keep the directory's own class names; every rule here is scoped under .n-tiles so nothing leaks onto the
   rest of the page. The mailer art below also uses a class called .tile, so its rules are scoped as :where(.mailer) .tile:
   :where() adds no specificity, which keeps them exactly as strong as the original bare .tile rules (a plain .mailer .tile
   would out-rank .tile-yours and the .yours-v shrink rules), while the strip's cloned tiles, outside .mailer, never match.
   Everything that moves lives under html.motion. Without it (Motion off, reduced motion, no JavaScript) the strip is a still,
   complete set of cards. */
.neigh{position:relative;background:var(--ink);color:var(--cream);overflow-x:clip}
.n-stage{display:flex;flex-direction:column;gap:clamp(28px,4vw,56px);max-width:1380px;margin:0 auto;padding:clamp(90px,10vw,130px) var(--gutter) clamp(56px,7vw,100px)}
.n-head{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:clamp(20px,4vw,70px);align-items:end}
.n-head .eyebrow{color:var(--citrus);margin-bottom:14px}
.n-head h2{font:900 clamp(32px,min(4.6vw,8.4svh),84px)/.92 var(--sans);letter-spacing:-.045em;word-spacing:.07em}
@media (max-width:900px){.n-head h2{font-size:clamp(32px,9vw,56px)}}
.n-head h2 em{color:var(--citrus)}
.n-sub{max-width:48ch;font-size:clamp(14px,min(1.15vw,2.2svh),18px);line-height:1.5;color:#cfe0cd}
.n-note{max-width:62ch;font-size:13.5px;line-height:1.5;color:#a9c4b0}

/* the strip: three tiles plus the "See all local pages" card. --n-cap is the caption height every tile (and every
   placeholder) is given, so the strip keeps its height while it fills and nothing below it jumps. */
.n-tiles{--n-gap:clamp(14px,1.9vw,28px);--n-cap:178px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--n-gap);align-items:stretch}
.n-tiles>li{display:flex;min-width:0}
/* caption heights: the tallest a caption gets in each range (long name on two lines, tags wrapping), measured over every page in the directory
   with the real fonts, 320 to 1920px in 1px steps (guide/test/homepage-strip.test.mjs fails if a real caption is ever taller than this).
   The odd breakpoints (593, 573, 489) are where tags and trade lines start to wrap in the two-column phone layout. Re-measure after any
   change to caption type, padding or tile copy. */
@media (max-width:1439px){.n-tiles{--n-cap:208px}}
@media (max-width:899px){.n-tiles{grid-template-columns:repeat(2,minmax(0,1fr));--n-cap:150px}}
@media (max-width:767px){.n-tiles{--n-cap:128px}}
@media (max-width:593px){.n-tiles{--n-cap:152px}}
@media (max-width:573px){.n-tiles{--n-cap:170px}}
@media (max-width:489px){.n-tiles{--n-cap:188px}}
@media (max-width:359px){.n-tiles{grid-template-columns:minmax(0,1fr);--n-cap:128px}}

/* placeholders: shown only while the page is waiting for the directory, and only when JavaScript is on */
.n-tiles>.n-ghost{display:none;flex-direction:column;overflow:hidden;border-radius:18px;background:rgba(243,240,228,.05);box-shadow:0 0 0 1px rgba(255,255,255,.1)}
html.js:not(.strip-off) .n-tiles[data-state="loading"]>.n-ghost{display:flex;flex:1}
.g-art{display:block;aspect-ratio:4/5;background:rgba(243,240,228,.07)}
.g-cap{display:block;height:var(--n-cap);border-top:1px solid rgba(255,255,255,.08)}
html.motion .g-art{background:linear-gradient(100deg,rgba(243,240,228,.05) 30%,rgba(243,240,228,.15) 50%,rgba(243,240,228,.05) 70%) 0 0/250% 100%;animation:n-shimmer 1.6s linear infinite}
@keyframes n-shimmer{to{background-position:-150% 0}}

/* a cloned tile */
.n-tiles .tile{position:relative;display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden;border-radius:18px;background:var(--paper);color:var(--ink);text-decoration:none;box-shadow:0 30px 60px -22px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .3s}
.n-tiles .tile:hover{box-shadow:0 36px 70px -22px rgba(0,0,0,.9),0 0 0 3px var(--citrus)}
.n-tiles .tile:focus-visible{outline:3px solid var(--citrus);outline-offset:4px}
.n-tiles .art{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ink-2);border-bottom:1px solid rgba(7,29,26,.14)}
.n-tiles .shot{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.n-tiles .poster-wrap{position:absolute;inset:0;display:block}
.n-tiles .poster{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none}
.n-tiles .cap{display:flex;flex-direction:column;flex:1;gap:8px;min-height:var(--n-cap);padding:15px 17px 16px}
.n-tiles .tags{display:flex;flex-wrap:wrap;gap:5px}
.n-tiles .tag{display:inline-block;padding:6px 9px;border-radius:999px;background:var(--citrus);color:var(--ink);font:500 9px/1 var(--mono);letter-spacing:.12em}
.n-tiles .tag.ill{background:transparent;box-shadow:inset 0 0 0 1px rgba(7,29,26,.55)}
.n-tiles .trade{font:500 10px/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.n-tiles .name{font:800 clamp(17px,1.5vw,22px)/1.08 var(--sans);letter-spacing:-.04em}
.n-tiles .view{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.n-tiles .view i{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--citrus);font:400 15px/1 var(--sans);font-style:normal}
.n-tiles .tile:hover .view i,.n-tiles .tile:focus-visible .view i{background:var(--coral);color:var(--ink)}

/* the "See all local pages" card (the only thing left when the directory cannot be read) */
.n-tiles .ncard-end{display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:26px;min-width:0;min-height:300px;padding:clamp(18px,2vw,30px);border-radius:18px;background:var(--citrus);color:var(--ink);text-decoration:none;transition:background .3s}
.n-tiles .ncard-end:hover{background:#f0ffa0}
.n-tiles .ncard-end:focus-visible{outline:3px solid var(--citrus);outline-offset:4px}
.end-k{font:500 12px/1.3 var(--mono);letter-spacing:.14em}
.end-t{font:900 clamp(30px,2.9vw,46px)/.92 var(--sans);letter-spacing:-.045em;word-spacing:.05em}
.end-t em{font:400 1em/.92 var(--serif);letter-spacing:-.03em;color:var(--coral-d)}
.end-a{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--ink);color:var(--citrus)}
.end-a .ico{width:26px;height:26px}
/* no tiles (JavaScript off, directory unreachable, nothing visible): the link is a single wide card, no placeholder space.
   align-content:start keeps it a compact bar even while loop.js is still holding the strip's old height (min-height) for a
   visitor who is looking at the strip when the directory fails: the held space is then just empty background, never a slab. */
:is(.n-tiles[data-state="empty"],html:not(.js) .n-tiles,html.strip-off .n-tiles){grid-template-columns:minmax(0,1fr);align-content:start}
:is(.n-tiles[data-state="empty"],html:not(.js) .n-tiles,html.strip-off .n-tiles) .ncard-end{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k a" "t a";align-items:center;column-gap:24px;row-gap:12px;min-height:0;padding:clamp(22px,3.4vw,44px)}
:is(.n-tiles[data-state="empty"],html:not(.js) .n-tiles,html.strip-off .n-tiles) .end-k{grid-area:k;align-self:end}
:is(.n-tiles[data-state="empty"],html:not(.js) .n-tiles,html.strip-off .n-tiles) .end-t{grid-area:t;align-self:start;font-size:clamp(34px,5.2vw,72px)}
:is(.n-tiles[data-state="empty"],html:not(.js) .n-tiles,html.strip-off .n-tiles) .end-a{grid-area:a}

/* only one or two pages are public: keep the row balanced instead of leaving empty columns on its right (loop.js sets data-count) */
@media (min-width:900px){
  .n-tiles[data-count="2"]{grid-template-columns:repeat(3,minmax(0,1fr));width:calc((100% - 3 * var(--n-gap)) * .75 + 2 * var(--n-gap));margin-inline:auto}
  .n-tiles[data-count="1"]{grid-template-columns:repeat(2,minmax(0,1fr));width:calc((100% - 3 * var(--n-gap)) * .5 + var(--n-gap));margin-inline:auto}
}
@media (max-width:899px){.n-tiles[data-count="2"]>.n-more{grid-column:1/-1}}

/* motion: tiles rise in one after another, the strip leans with the scroll, cards tilt toward the pointer,
   photos drift, icon posters draw themselves. Every tile gets the same treatment; nothing depends on the business. */
html.motion .n-tiles>li:not(.n-ghost){opacity:0;translate:0 70px;scale:.94;transition:opacity .7s ease calc(var(--i,0) * 110ms),translate 1s var(--ease) calc(var(--i,0) * 110ms),scale 1s var(--ease) calc(var(--i,0) * 110ms)}
html.motion .n-tiles>li:not(.n-ghost).in{opacity:1;translate:0 0;scale:1}
@media (min-width:900px){html.motion .n-tiles[data-state="ready"]>li{transform:perspective(1100px) translateY(var(--ty,0px)) rotateY(var(--rot,0deg))}}
html.motion .n-tiles .tile{transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .3s var(--ease),translate .3s var(--ease),box-shadow .3s}
html.motion .n-tiles .tile:hover,html.motion .n-tiles .tile:focus-visible{translate:0 -8px}
html.motion .n-tiles .tile::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.38),transparent 52%);opacity:0;transition:opacity .3s}
html.motion .n-tiles .tile:hover::after{opacity:1}
html.motion .n-tiles .shot{transform:scale(1.1);translate:0 calc(var(--sp,0) * -16px);transition:transform 1.4s var(--ease)}
html.motion .n-tiles .tile:hover .shot,html.motion .n-tiles .tile:focus-visible .shot{transform:scale(1.13)}
html.motion .n-tiles .view i{transition:transform .35s var(--ease),background .3s,color .3s}
html.motion .n-tiles .tile:hover .view i,html.motion .n-tiles .tile:focus-visible .view i{transform:rotate(45deg)}
html.motion .n-tiles .poster .draw path,html.motion .n-tiles .poster .draw circle{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.9s ease calc(.3s + var(--i,0) * 110ms)}
html.motion .n-tiles>li.in .poster .draw path,html.motion .n-tiles>li.in .poster .draw circle{stroke-dashoffset:0}
html.motion .n-tiles .ncard-end{transition:transform .4s var(--ease),background .3s}
html.motion .n-tiles .ncard-end:hover{transform:scale(1.03) rotate(-1.5deg)}
html.motion .n-tiles .end-a{transition:transform .4s var(--ease)}
html.motion .n-tiles .ncard-end:hover .end-a{transform:rotate(45deg) scale(1.1)}

@media (max-width:767px){
  .n-tiles .cap{gap:6px;padding:11px 11px 12px}
  .n-tiles .tag{padding:5px 7px;font-size:9px;letter-spacing:.09em}
  .n-tiles .trade{font-size:10px;letter-spacing:.1em}
  .n-tiles .name{font-size:17px}
  .n-tiles .view{padding-top:4px;font-size:10px}
  .n-tiles .view i{width:30px;height:30px;font-size:13px}
  .n-tiles .ncard-end{min-height:0;gap:14px}
  .end-t{font-size:clamp(28px,8.4vw,40px)}
  .end-a{width:48px;height:48px}
  .end-a .ico{width:22px;height:22px}
}
@media (max-width:899px){.n-head{grid-template-columns:1fr}}

/* ---------- numbers + bands ---------- */
.facts{position:relative;background:var(--citrus);color:var(--ink);padding:clamp(130px,16vw,230px) var(--gutter) clamp(60px,8vw,120px);overflow-x:clip}
.bands{position:absolute;left:0;right:0;top:0;height:0;z-index:6;pointer-events:none}
.band{position:absolute;left:-6vw;right:-6vw;top:0;display:flex;overflow:hidden;white-space:nowrap;padding:15px 0;font:800 clamp(16px,2.1vw,28px)/1 var(--sans);letter-spacing:.1em;transform:translateY(-50%) rotate(-2.2deg)}
.band-a{background:var(--coral);color:var(--ink)}
.band-b{background:var(--ink);color:var(--citrus);border-block:2px solid var(--citrus);transform:translateY(-50%) rotate(1.8deg);z-index:-1}
.band-track{display:flex;align-items:center;gap:clamp(20px,3vw,40px);padding-right:clamp(20px,3vw,40px);width:max-content;will-change:transform}
.band-track .ico{width:1em;height:1em}
.facts-in{max-width:1380px;margin:0 auto}
.fact{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(16px,4vw,60px);align-items:center;padding:clamp(18px,3vw,38px) 0;border-top:3px solid var(--ink)}
.fact:last-child{border-bottom:3px solid var(--ink)}
.fact-num{font:900 clamp(66px,12.4vw,220px)/.85 var(--sans);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.fact-cap{max-width:30ch;font:600 clamp(16px,1.5vw,22px)/1.3 var(--sans);letter-spacing:-.015em}
@media (max-width:700px){.fact{grid-template-columns:1fr;gap:10px}}

/* ---------- 04 businesses ---------- */
.biz{background:var(--cream);color:var(--ink);padding:clamp(80px,10vw,150px) var(--gutter) clamp(90px,11vw,160px)}
.biz-in{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);grid-template-areas:"copy art" "form art";grid-template-rows:auto 1fr;column-gap:clamp(30px,6vw,100px);row-gap:clamp(24px,3vw,40px);align-items:start}
.biz-copy{grid-area:copy}
.biz-form{grid-area:form}
.biz-art{grid-area:art;position:sticky;top:104px}
.biz .eyebrow{color:var(--muted)}
.biz h2{margin-top:16px;font:900 clamp(38px,6.2vw,108px)/.9 var(--sans);letter-spacing:-.05em;word-spacing:.05em;text-transform:uppercase}
.biz h2 em{color:var(--coral-d)}
.biz-lede{max-width:50ch;margin-top:clamp(18px,2vw,28px);font-size:clamp(17px,1.35vw,21px);line-height:1.55}
.biz-list{display:grid;gap:8px;margin-top:20px}
.biz-list li{position:relative;padding-left:34px;font-weight:700}
.biz-list li::before{content:"";position:absolute;left:0;top:.28em;width:20px;height:20px;border-radius:50%;background:var(--citrus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071d1a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 0 0 2px var(--ink)}
.spot{padding:clamp(18px,2vw,26px);border:3px solid var(--ink);border-radius:22px;background:var(--paper);box-shadow:9px 9px 0 var(--ink)}
.spot-label{display:block;font:800 clamp(19px,1.6vw,24px)/1.2 var(--sans);letter-spacing:-.03em}
.spot-label span{display:block;margin-top:4px;font:400 14.5px/1.4 var(--sans);letter-spacing:0;color:var(--muted)}
.spot-field{position:relative;margin-top:14px}
.spot-field input{width:100%;min-height:58px;padding:0 52px 0 18px;border:2.5px solid var(--ink);border-radius:16px;background:#fff;color:var(--ink);font:600 19px var(--sans)}
.spot-field input::placeholder{color:#8a9a92;font-weight:500}
.spot-field input:focus{outline:3px solid var(--coral);outline-offset:3px}
.spot-clear{position:absolute;right:8px;top:50%;width:44px;height:44px;transform:translateY(-50%);border:0;border-radius:50%;background:var(--cream);font-size:22px;line-height:1}
.spot-clear:hover{background:var(--citrus)}
.spot-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.spot-chips button{min-height:42px;padding:0 16px;border:2px solid var(--ink);border-radius:999px;background:transparent;font:700 14.5px/1 var(--sans);transition:background .2s,transform .3s var(--ease)}
.spot-chips button:hover{background:var(--citrus);transform:translateY(-2px) rotate(-1.5deg)}
.spot-chips button.is-picked{background:var(--ink);color:var(--citrus)}
.spot-msg{margin-top:16px;padding:14px 16px;border-left:5px solid var(--coral-d);border-radius:4px 14px 14px 4px;background:var(--cream);font-size:15.5px;line-height:1.5}
.spot-msg b{background:linear-gradient(var(--citrus),var(--citrus)) no-repeat 0 90%/100% .5em;font-weight:800}
.spot-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.spot-ok{font:500 13px/1.3 var(--mono);letter-spacing:.04em;color:var(--moss)}
.biz-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:22px}
.biz-fine{max-width:60ch;margin-top:20px;font-size:13.5px;line-height:1.55;color:var(--muted)}

.mailer{position:relative;perspective:1400px}
.mailer-tilt{display:grid;grid-template-rows:1fr auto 1fr;gap:10px;aspect-ratio:1/.84;padding:14px;border:3px solid var(--ink);border-radius:16px;background:var(--paper);box-shadow:14px 14px 0 var(--ink);transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) rotate(-1.4deg);transition:transform .35s var(--ease)}
.mailer-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:0}
:where(.mailer) .tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0;padding:clamp(8px,1vw,14px);overflow:hidden;border:2.5px solid var(--ink);border-radius:10px}
:where(.mailer) .tile b{display:block;font:900 clamp(12px,1.34vw,21px)/.95 var(--sans);letter-spacing:-.04em}
:where(.mailer) .tile b em{font:400 1.08em/.9 var(--serif);letter-spacing:-.02em;text-transform:none}
:where(.mailer) .tile small{display:block;font:500 clamp(8px,.78vw,11px)/1 var(--mono);letter-spacing:.1em}
:where(.mailer) .tile>.ico{position:absolute;right:8px;bottom:8px;width:clamp(16px,1.7vw,24px);height:clamp(16px,1.7vw,24px)}
.t-citrus{background:var(--citrus)}.t-ink{background:var(--ink);color:var(--citrus)}.t-cream{background:var(--cream)}.t-coral{background:var(--coral)}.t-sage{background:var(--sage)}
.t-ink b em{color:var(--coral)}
.mailer-strip{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,18px);padding:9px 12px;border-radius:10px;background:var(--ink);color:var(--citrus);font:500 clamp(9px,.95vw,13px)/1 var(--mono);letter-spacing:.14em;white-space:nowrap;overflow:hidden}
.mailer-strip .ico{width:1.2em;height:1.2em;color:var(--coral)}
.tile-yours{align-items:flex-start;border-style:dashed;border-color:var(--coral-d);background:repeating-linear-gradient(135deg,#fff7ec 0 8px,#ffe3d6 8px 16px);color:var(--ink)}
.yours-k{color:var(--coral-d)}
.yours-v{word-break:break-word;hyphens:auto;overflow-wrap:anywhere;text-transform:uppercase;font-size:clamp(12px,1.34vw,21px)}
.yours-v.is-long{font-size:clamp(10px,1.15vw,17px)}
.yours-v.is-xlong{font-size:clamp(9px,.9vw,13px)}
.yours-pulse{position:absolute;inset:-2px;border:3px solid var(--coral-d);border-radius:10px;pointer-events:none}
html.motion .yours-pulse{animation:yours-pulse 2s ease-out infinite}
@keyframes yours-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.14);opacity:0}}
.mailer.is-typing .yours-pulse{animation-duration:.8s}
html.motion :where(.mailer) .tile,html.motion .mailer-strip{opacity:0;transform:rotateX(-100deg) scale(.9);transform-origin:50% 0}
html.motion .mailer.in .tile,html.motion .mailer.in .mailer-strip{opacity:1;transform:none;transition:transform .9s var(--ease) calc(var(--i) * 80ms),opacity .4s ease calc(var(--i) * 80ms)}
.mailer-cap{margin-top:30px;font:500 11px/1.4 var(--mono);letter-spacing:.14em;color:var(--muted);text-align:center}
@media (max-width:900px){
  .biz-in{grid-template-columns:1fr;grid-template-areas:"copy" "art" "form";grid-template-rows:auto}
  .biz-art{position:static}
  .mailer-tilt{box-shadow:9px 9px 0 var(--ink)}
  :where(.mailer) .tile b{font-size:clamp(9px,2.65vw,14px)}
  .yours-v{font-size:clamp(9px,2.65vw,14px)}
  .yours-v.is-long{font-size:clamp(8px,2.2vw,12px)}
  .yours-v.is-xlong{font-size:clamp(7px,1.8vw,10px)}
}

/* ---------- closing ---------- */
.closing{position:relative;background:var(--coral);color:var(--ink);padding:clamp(90px,13vw,190px) var(--gutter) clamp(90px,12vw,170px);text-align:center;overflow-x:clip}
.closing .eyebrow{color:var(--ink)}
.closing h2{margin:18px auto 0;max-width:15ch;font:900 clamp(44px,10.8vw,196px)/.86 var(--sans);letter-spacing:-.055em;word-spacing:.04em}
.closing h2 em{display:block;font:400 1em/.9 var(--serif);letter-spacing:-.04em;color:var(--paper);text-shadow:.035em .035em 0 var(--ink)}
.closing-sub{margin-top:clamp(18px,2vw,28px);font:500 clamp(20px,2vw,30px)/1.2 var(--sans)}
.orb-wrap{position:relative;display:grid;place-items:center;width:clamp(230px,26vw,340px);aspect-ratio:1;margin:clamp(30px,5vw,60px) auto 0}
.orb-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orb-ring text{font:800 17px var(--sans);letter-spacing:.1em;fill:var(--ink)}
html.motion .orb-ring{animation:spin 26s linear infinite}
.orb{position:relative;display:grid;place-items:center;align-content:center;gap:8px;width:63%;aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--citrus);text-align:center;text-decoration:none;font:800 clamp(18px,1.8vw,25px)/1.05 var(--sans);letter-spacing:-.03em;transition:background .3s,color .3s}
.orb .ico{width:26px;height:26px;transition:transform .4s var(--ease)}
.orb:hover{background:var(--citrus);color:var(--ink)}
.orb:hover .ico{transform:translate(4px,-4px) rotate(45deg)}
.orb:focus-visible{outline-color:var(--ink)}
.closing :focus-visible{outline-color:var(--ink)}

/* ---------- footer ---------- */
.foot{position:relative;background:var(--ink);color:var(--cream);padding:clamp(50px,7vw,100px) var(--gutter) 28px;overflow-x:clip}
.foot-word{font:900 clamp(56px,16.4vw,330px)/.8 var(--sans);letter-spacing:-.06em;text-align:center;white-space:nowrap;color:transparent;-webkit-text-stroke:2px rgba(223,255,78,.6);
  background:linear-gradient(var(--citrus),var(--citrus)) no-repeat 0 100%/100% calc(var(--fill,0) * 100%);-webkit-background-clip:text;background-clip:text;margin-bottom:clamp(30px,4vw,56px);user-select:none}
.foot-in{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:20px 40px;align-items:start}
.foot-in>p{color:#b9cfb9;font-size:15px}
.foot-in a:not(.brand){text-decoration-color:rgba(223,255,78,.5)}
.foot-links{display:grid;gap:8px;justify-items:end;font-size:15px}
.foot-links a{display:inline-flex;align-items:center;gap:6px;min-height:40px}
.foot-links a:hover{color:var(--citrus)}
.foot-links .ico{width:14px;height:14px}
.foot-in>small{grid-column:1/-1;margin-top:18px;padding-top:18px;border-top:1px solid rgba(243,240,228,.18);font:500 12px/1 var(--mono);letter-spacing:.08em;color:#8fae9a}
@media (max-width:900px){.foot-in{grid-template-columns:1fr}.foot-links{justify-items:start}}

/* ---------- small screens ---------- */
@media (max-width:899px){
  :root{--hdr-h:56px}
  .nav,.hdr .motion-toggle,.hdr-cta{display:none}
  .menu-btn{display:block;margin-left:auto}
  .hdr{padding:6px 6px 6px 14px}
  .brand-name small{display:none}
  .float-cta{display:inline-flex}
  .motion-toggle--menu{margin-top:6px;color:var(--cream)}
}
@media (min-width:900px){.motion-toggle--menu{display:none}}

.magnetic{transition-property:translate,background,color,transform}
/* ---------- final-state guarantees ---------- */
@media (prefers-reduced-motion:reduce){html:not(.motion){scroll-behavior:auto}}