/* Julehjælp Silkeborg – styles. Tokens on :root; sections follow page order. */
:root{
  --red:#E51636;
  --red-fold:#A8102A;   /* the underside of the glanspapir strip */
  --paper:#FFFFFF;
  --ink:#1B1416;
  --ink-soft:#4A3F42;
  --rule:#E9DADD;
  --gutter:clamp(16px,4vw,56px);
  --max:1320px;
  --font:"Saira",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --r-card:24px;      /* cards and panels: soft, human corners */
  --r-photo:28px;     /* photo plates */
  --r-sheet:40px;     /* the top corners of each section sheet */
  --r-pill:999px;     /* buttons, chips */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%;scrollbar-color:var(--red) #F6ECEE}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--font);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.08em}
::selection{background:var(--red);color:#fff}
.on-red ::selection,.on-red::selection,.ticket ::selection,.biz-pay ::selection{background:#fff;color:var(--red)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-red :focus-visible,.ticket :focus-visible,.biz-pay :focus-visible{outline-color:#fff}
.doors :focus-visible{outline-color:var(--ink)}
/* text links: focus marks the link like a red paper tag instead of a box */
a:not(.btn):focus-visible{outline:none;background:var(--red);color:#fff;text-decoration:none;box-shadow:0 0 0 .2em var(--red);border-radius:.2em}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em;line-height:.98;text-wrap:balance}
p{margin:0;text-wrap:pretty}
b,strong{font-weight:600}
section{position:relative}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.num{font-variant-numeric:tabular-nums lining-nums}
.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.placeholder{color:var(--ink);background:#F3E3E6;padding:0 .3em;font-weight:600;border-radius:.3em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:0 1.6rem;border:0;border-radius:var(--r-pill);background:var(--red);color:#fff;font:600 1rem/1 var(--font);text-decoration:none;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--red-fold)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn.ink{background:var(--ink)}
.btn.ink:hover{background:#000}
.btn.white{background:#fff;color:var(--red)}
.btn.white:hover{background:var(--ink);color:#fff}
.app{display:none}
/* copy as a small round icon; the tick and a "Kopieret" tag confirm it */
.copy-i{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1.5px solid currentColor;border-radius:50%;background:transparent;color:inherit;cursor:pointer;flex:none;transition:background .2s,color .2s}
.copy-i svg{width:18px;height:18px}
.copy-i .ok{display:none}
.copy-i[data-done] .cp{display:none}
.copy-i[data-done] .ok{display:block}
.copy-i::after{content:"Kopieret";position:absolute;right:0;bottom:calc(100% + 6px);transform:translateY(4px);background:var(--ink);color:#fff;font:600 .75rem/1 var(--font);padding:.35rem .6rem;border-radius:var(--r-pill);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.copy-i[data-done]::after{opacity:1;transform:none}
.copy-i:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.on-red .copy-i:hover,.biz-pay .copy-i:hover,.ticket .copy-i:hover{background:#fff;color:var(--red);border-color:#fff}
.qr{width:136px;height:136px;flex:none;image-rendering:pixelated}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:2rem;height:76px}
.top .brand img{height:40px;width:auto}
.top nav{margin-left:auto;display:flex;gap:1.75rem;font-weight:600;font-size:.95rem}
.top nav a{text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent;transition:border-color .2s}
.top nav a:hover{border-color:var(--red)}

/* ---------- hero ---------- */
.hero{background:var(--red);color:#fff;overflow:hidden;z-index:0;isolation:isolate;min-height:min(calc(100svh - 76px),920px);display:flex;align-items:center}
.hero .wrap{position:relative;z-index:3;width:100%;padding-block:clamp(48px,8vh,96px)}
.hero h1{font-size:clamp(2.75rem,6.4vw,6rem);max-width:10.5ch}
.hero .lede{margin-top:1.5rem;max-width:min(30rem,50vw);font-size:clamp(1.05rem,1.3vw,1.25rem)}
.dates{margin-top:1.25rem;display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:.95rem}
/* the dates line becomes a small countdown: to the opening, then to the close */
.dates.cd-on{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}
/* barometer: a small paper tag in the corner with the amount collected so far.
   It links to the donation doors; on hover it unfolds a red "Giv". When the amount grows
   while the page is open, the figure counts up and the heart beats once. */
.tally{position:fixed;right:clamp(16px,2vw,28px);bottom:calc(clamp(16px,2vw,28px) + env(safe-area-inset-bottom));z-index:40;
  display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem .6rem .75rem;border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;outline:1px solid rgb(27 20 22 / .06);
  box-shadow:0 14px 32px -6px rgb(60 0 10 / .28),0 2px 6px rgb(60 0 10 / .1);
  transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s linear 0s,bottom .4s var(--ease)}
.tally[hidden]{display:none}
.tally:not(.on){opacity:0;visibility:hidden;transform:translateY(18px) scale(.94);pointer-events:none;
  transition:opacity .3s var(--ease),transform .4s var(--ease),visibility 0s linear .4s,bottom .4s var(--ease)}
.tally:hover{transform:translateY(-2px)}
.tally:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.tally-heart{width:30px;height:30px;flex:none;fill:var(--red);transform-origin:50% 58%}
.tally.beat .tally-heart{animation:heartbeat 1.2s cubic-bezier(.33,0,.2,1)}
.tally-txt{display:flex;flex-direction:column}
.tally-lbl{font-size:.74rem;font-weight:500;line-height:1.2;color:var(--ink-soft)}
.tally-amt{font-size:1.2rem;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.tally-go{display:inline-flex;align-items:center;gap:.25rem;align-self:stretch;max-width:0;overflow:hidden;opacity:0;margin-left:-.7rem;padding:0;
  border-radius:14px;background:var(--red);color:#fff;font-weight:600;font-size:.95rem;white-space:nowrap;
  transition:max-width .45s var(--ease),opacity .25s var(--ease),margin .45s var(--ease),padding .45s var(--ease)}
.tally-go svg{width:16px;height:16px;flex:none}
.tally:hover .tally-go,.tally:focus-visible .tally-go{max-width:6rem;opacity:1;margin-left:0;padding:0 .75rem 0 .85rem}
.tally ::selection{background:var(--red);color:#fff}
/* the free Wix plan's badge sits in the same corner: step above it while it shows */
body:has(#wixheadless-banner-container[style*="block"]) .tally{bottom:calc(clamp(16px,2vw,28px) + 56px + env(safe-area-inset-bottom))}
.cd-units{display:inline-flex;gap:.35rem}
.cd-u{display:inline-flex;align-items:baseline;gap:.2rem;padding:.3rem .55rem;border-radius:10px;background:rgb(255 255 255 / .16);font-variant-numeric:tabular-nums lining-nums;line-height:1}
.cd-u b{font-weight:600;font-size:1.15rem;min-width:1.3em;text-align:right}
.cd-u small{font-size:.72rem;font-weight:500;opacity:.9}
/* two equal doors: private (MobilePay) and business (invoice, deduction, visibility) */
.doors{margin-top:clamp(24px,4vh,40px);display:grid;grid-template-columns:1fr 1fr;background:#fff;color:var(--ink);max-width:min(680px,54vw);border-radius:var(--r-card);position:relative;box-shadow:0 18px 40px -20px rgba(0,0,0,.35);scroll-margin-top:110px}
/* the logo heart stands above the motto, white on the red, and beats twice on load */
.mark-heart{display:block;width:clamp(64px,6.5vw,96px);height:auto;fill:#fff;margin-bottom:clamp(18px,2.2vw,28px);transform-origin:50% 58%;filter:drop-shadow(0 8px 12px rgb(60 0 10 / .25))}
.js .mark-heart{animation:heartbeat 1.5s cubic-bezier(.33,0,.2,1) .3s both}
.door{padding:1.15rem 1.3rem 1.3rem;display:flex;flex-direction:column;gap:.8rem}
.door + .door{border-left:1px solid var(--rule)}
.door .lbl{display:block;font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
/* the pay row fills its half: it starts level with the business list, and the QR grows to the
   height of the list plus the button, so both halves share one top line and one bottom line */
.door .pay-row{display:flex;gap:.9rem;align-items:center;flex:1;min-height:0}
.door .qr{height:100%;width:auto;aspect-ratio:1;min-height:88px;max-height:min(128px,9.5vw);border-radius:6px;flex:none}
.door .no{display:block;font-size:clamp(2.1rem,2.9vw,2.75rem);font-weight:600;letter-spacing:-.005em;line-height:.95;color:var(--red)}
.door .note{display:block;margin-top:.35rem;font-size:.85rem;line-height:1.35;color:var(--ink-soft)}
.door .note b{color:var(--ink)}
.door .btn{margin-top:auto;width:100%;padding-inline:1rem;white-space:nowrap}
.door .btn svg{width:16px;height:16px}
/* scroll follow (desktop): as the hero scrolls away the card lingers, drifting down at a fraction of
   the scroll, so the white sheet below rises over it instead of the card leaving with the page */
.doors{--follow:0px;transform:translate3d(0,var(--follow),0)}
/* while the white sheet slides over the card, its edge casts a fold shade, so white on white keeps its edge */
.hero + .biz{box-shadow:0 -14px 30px -18px rgb(60 0 10 / calc(var(--shade,0) * .45))}
/* the countdown is the card's footer: a quiet strip under both doors, figures in ink, no tiles */
.hero .doors .dates{grid-column:1/-1;order:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem 1rem;
  padding:.7rem 1.3rem;border-top:1px solid var(--rule);border-radius:0 0 var(--r-card) var(--r-card);background:#FBF5F6;
  font-size:.85rem;font-weight:500;color:var(--ink-soft)}
.hero .doors .cd-units{gap:.8rem}
.hero .doors .cd-u{padding:0;background:none;border-radius:0;gap:.18rem}
.hero .doors .cd-u b{font-size:1rem;min-width:1.25em;color:var(--ink)}
.hero .doors .cd-u:first-child b{min-width:0}
.hero .doors .cd-u small{font-size:.75rem;opacity:1;color:var(--ink-soft)}
.perks{list-style:none;margin:0;padding:0;font-size:.95rem;font-weight:400;line-height:1.3}
.perks li{display:flex;gap:.6rem;align-items:baseline;padding:.18rem 0}
.perks li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);transform:translateY(-2px);flex:none}
/* the logo heart, drawn from logo-heart.svg: it stands whole and white like the logo and beats twice on load */
.heart{position:absolute;z-index:1;width:min(40vw,580px,70svh);aspect-ratio:388/389;
  right:calc(max(0px,(100vw - var(--max))/2) + var(--gutter));top:50%;transform:translateY(-50%)}
.heart .beat,.heart svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.heart .beat{transform-origin:50% 58%}
.js .heart .beat{animation:heartbeat 1.5s cubic-bezier(.33,0,.2,1) .15s both}
@keyframes heartbeat{0%{transform:scale(.92)}30%{transform:scale(1.05)}46%{transform:scale(.985)}62%{transform:scale(1.03)}100%{transform:scale(1)}}
/* the campaign bear lies under the red; the logo heart is the window it shows through, in its own warm colours */
.hero{--hs:min(40vw,580px,70svh);--hr:calc(max(0px,(100vw - var(--max))/2) + var(--gutter))}
.hero-bg{position:absolute;top:-14%;right:-3%;height:118%;width:auto;max-width:none;z-index:0}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--red) 0%,var(--red) 38%,rgb(229 22 54 / .42) 50%,rgb(229 22 54 / .08) 100%)}
/* the big drawn heart stays in the markup only to hold the photo's space on phones */
.heart{visibility:hidden}

/* ---------- business: a warm family moment, the practical details quietly below ---------- */
.biz{padding-block:clamp(72px,9vw,136px)}
.biz-top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:center}
.biz h2{font-size:clamp(2.5rem,4.6vw,4.25rem);max-width:13ch}
.biz h2 .r{color:var(--red)}
.biz-copy > p{margin-top:1.5rem;max-width:36rem;font-size:1.15rem;color:var(--ink-soft)}
.biz-copy > p.biz-warm{margin-top:1rem;color:var(--ink);font-weight:600}
.biz-copy .btn{margin-top:2rem}
.biz-photo{margin:0;position:relative;aspect-ratio:4/5;max-height:660px;border-radius:var(--r-photo);overflow:hidden}
.biz-photo img{width:100%;height:100%;object-fit:cover;object-position:38% center}
/* pay card and FAQ side by side: pay on the left, questions on the right */
.biz-lower{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);margin-top:clamp(56px,7vw,104px);align-items:start}
.biz-pay{background:var(--red);color:#fff;padding:clamp(1.5rem,2.6vw,2.25rem);border-radius:var(--r-card)}
.bp-head h3{font-size:clamp(1.5rem,2.2vw,1.9rem);letter-spacing:-.005em;line-height:1.05}
.bp-head p{margin-top:.4rem;font-size:.95rem}
.bp-vals{margin:1.25rem 0 0}
.bp-vals div{display:grid;grid-template-columns:1fr auto;grid-template-areas:"dt btn" "dd btn";align-items:center;gap:.15rem 1rem;padding:.9rem 0;border-top:1px solid rgba(255,255,255,.5)}
.bp-vals dt{grid-area:dt;font-size:.85rem;font-weight:600}
.bp-vals dd{grid-area:dd;margin:0;font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:600;letter-spacing:-.005em;line-height:1;white-space:nowrap}
.bp-vals .copy-i{grid-area:btn}
.faq h3{font-size:1.5rem;letter-spacing:-.005em;margin-bottom:.75rem}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;font-weight:600;font-size:1.1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;flex:none;border-right:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq summary:hover{color:var(--red)}
.faq details p{padding:0 0 1.2rem;max-width:40rem;color:var(--ink-soft)}
.faq details a{color:var(--ink);font-weight:600}

/* ---------- give as a private person: MobilePay leads, bank transfer is a slim line beneath ---------- */
.give{padding-block:clamp(72px,10vw,140px)}
.give .head{margin-bottom:clamp(36px,5vw,64px)}
.give h2{font-size:clamp(2.25rem,4.6vw,4.25rem);max-width:11ch}
.give .head .sub{margin-top:clamp(.5rem,1vw,.9rem);max-width:none;color:var(--ink-soft);font-size:clamp(1.25rem,2vw,1.65rem);font-weight:500;line-height:1.25;letter-spacing:-.005em}
.ways{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.5vw,32px)}
.ticket{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem;background:var(--red);color:#fff;padding:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3.5vw,3rem);border-radius:calc(var(--r-card) + 8px);overflow:hidden}
.t-main{display:flex;flex-direction:column;gap:1.4rem}
.ticket h3{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.95rem;font-weight:600;letter-spacing:0}
.mp-logo{display:inline-flex}
.mp-logo img{height:56px;width:auto;margin-left:-4px}
.t-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.25rem 2.5rem}
.t-no{font-size:clamp(4rem,9vw,8.5rem);font-weight:600;letter-spacing:-.015em;line-height:.82}
.t-comment{display:flex;flex-direction:column;gap:.55rem;font-size:.95rem;font-weight:600}
.t-comment div{display:flex;align-items:center;gap:.6rem}
/* the comment to type is quoted, not boxed, so it reads as words to write rather than a button */
.chip{color:#fff;font-weight:600;font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.005em;line-height:1.1;white-space:nowrap}
.chip::before{content:"»"}.chip::after{content:"«"}
/* the phone: a drawn handset holding the QR */
.phone{width:172px;aspect-ratio:9/17;background:#fff;border:9px solid var(--ink);border-radius:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;padding:1.6rem .7rem 1rem;position:relative;color:var(--ink);font-size:.78rem;font-weight:600;text-align:center;line-height:1.25;
  transform:rotate(-6deg);transition:transform .6s var(--ease);box-shadow:0 22px 40px -22px rgba(0,0,0,.45)}
.phone::before{content:"";position:absolute;top:.55rem;left:50%;width:42px;height:6px;margin-left:-21px;border-radius:6px;background:var(--ink)}
.phone .qr{width:122px;height:122px;border-radius:6px}
.ticket:hover .phone{transform:rotate(0) translateY(-4px)}
.bank-line{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem 2.5rem;padding:1.1rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.bank-q{color:var(--ink-soft);font-size:.95rem;max-width:22rem}
.bank-q b{display:block;color:var(--ink);font-size:1.05rem}
.bank-vals{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.75rem 2rem;margin:0}
.bank-vals div{display:flex;align-items:center;gap:.6rem}
.bank-vals dt{font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.bank-vals dd{margin:0;font-weight:600;font-size:1.15rem;white-space:nowrap}
.bank-vals .copy-i{width:34px;height:34px}
.bank-vals .copy-i svg{width:16px;height:16px}

/* ---------- the promise: many gifts run together into one heart, and out again to many homes ---------- */
.route{overflow:hidden;background:var(--red-fold);color:#fff}
.journey{position:relative;z-index:2;max-width:var(--max);margin-inline:auto;padding:clamp(80px,9vw,140px) var(--gutter)}
.journey h2{font-size:clamp(2.5rem,5vw,4.75rem);max-width:22ch;line-height:1.1;margin:0 auto;text-align:center}
.journey h2 em{font-style:normal;font-weight:800}
.journey-art{display:block;width:100%;height:auto;overflow:visible;margin:clamp(40px,5vw,72px) 0 clamp(28px,3vw,44px)}
.journey-art.tall{display:none;max-width:420px;margin-inline:auto}
.journey .line{fill:none;stroke:#fff;stroke-opacity:.42;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;vector-effect:non-scaling-stroke}
.journey .coin-dot,.journey .pool{fill:#fff}
.journey .pool{transform-box:fill-box;transform-origin:center}
.journey .h-body{fill:#fff;stroke:#fff;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.journey .h-win{fill:var(--red-fold)}
.legs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.legs li{padding-top:1rem;border-top:1px solid rgba(255,255,255,.45);text-align:center}
.legs li > b{display:block;font-size:clamp(1.2rem,1.6vw,1.45rem);font-weight:600;letter-spacing:-.01em;margin-bottom:.4rem}
.legs span{display:block;max-width:30ch;margin-inline:auto;font-size:1.05rem;line-height:1.5}
.legs span b{font-weight:600}
.story-sign{margin-top:clamp(48px,6vw,88px);text-align:center;font-size:clamp(1.5rem,2.8vw,2.4rem);font-weight:600;letter-spacing:-.005em;line-height:1.15;text-wrap:balance}
/* arrival, once: the gifts appear, run into the heart, the heart beats, and the lights come on in the homes */
.js .journey:not(.go) .coin-dot{opacity:0}
.js .journey:not(.go) .line{stroke-dashoffset:1}
.js .journey:not(.go) .h-body{fill:transparent}
.js .journey:not(.go) .h-win{opacity:0}
.js .journey.go .coin-dot{animation:j-pop .5s var(--ease) calc(var(--i) * 45ms) both}
.js .journey.go .in-line{animation:j-draw 1s cubic-bezier(.45,0,.2,1) calc(.25s + var(--i) * 45ms) both}
.js .journey.go .pool{animation:j-beat 1s cubic-bezier(.33,0,.2,1) 1.25s both}
.js .journey.go .out-line{animation:j-draw .9s cubic-bezier(.45,0,.2,1) calc(1.6s + var(--i) * 70ms) both}
.js .journey.go .h-body{animation:j-light .6s ease-out calc(2.2s + var(--i) * 110ms) both}
.js .journey.go .h-win{animation:j-pop .5s ease-out calc(2.35s + var(--i) * 110ms) both}
@keyframes j-pop{from{opacity:0}to{opacity:1}}
@keyframes j-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes j-beat{0%{transform:scale(1)}25%{transform:scale(1.07)}42%{transform:scale(.98)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes j-light{from{fill:transparent}to{fill:#fff}}

/* ---------- behind: the partners on soft tiles ---------- */
.behind{padding-block:clamp(64px,8vw,120px)}
.behind .head{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-bottom:clamp(32px,4vw,56px);align-items:end}
.behind h2{font-size:clamp(2rem,3.6vw,3.25rem);max-width:12ch}
.behind .head p{color:var(--ink-soft);max-width:34rem}
.label{font-weight:600;font-size:1rem;margin:2.5rem 0 1rem}
.names{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0}
.names.sponsors{grid-template-columns:repeat(2,1fr)}
/* a supporter's card links to their site: the link fills the card and keeps its layout */
.names li > a{flex:1;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:inherit;color:inherit;text-decoration:none;border-radius:inherit}
.names li:has(> a){padding:0}.names li > a{padding:1.5rem 1.25rem 1rem}
.names li:has(> a){transition:background-color .2s var(--ease)}
.names li:has(> a:hover){background:#F6E9EC}
.names li{list-style:none;min-height:150px;padding:1.5rem 1.25rem 1rem;border-radius:20px;background:#FBF5F6;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.9rem;text-align:center}
.names img{max-width:min(78%,210px);max-height:70px;width:auto;height:auto;object-fit:contain;margin:auto 0}
.names img.tall{max-height:104px}
.names img.bold{max-height:44px} /* a heavy, solid wordmark reads larger: scaled down to sit level with the others */
.names span{font-size:.85rem;font-weight:600;color:var(--ink-soft);line-height:1.25}

/* ---------- volunteer ---------- */

/* ---------- close: the heart is missing one piece, and giving puts it in place ---------- */
.close{background:var(--red);color:#fff;padding-block:clamp(72px,9vw,128px);overflow:hidden}
.close .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.close-heart{width:100%;max-width:440px;height:auto;overflow:visible;justify-self:center}
.close-heart .pc{fill:var(--red-fold)}
.close-heart .slot{fill:none;stroke:#fff;stroke-width:2.5;stroke-dasharray:7 6}
.close-heart .missing{fill:#fff;transform-box:fill-box;transform-origin:center;opacity:0;transform:translate(16%,16%) rotate(18deg) scale(.7);transition:opacity .35s var(--ease),transform .7s var(--ease)}
.close:has(.act:hover,.act:focus-within) .missing{opacity:1;transform:none}
.close-copy h2{font-size:clamp(2.5rem,5.2vw,4.75rem);max-width:11ch}
.close-copy > p{margin-top:1.1rem;max-width:30rem;font-size:1.1rem}
.acts{margin-top:clamp(28px,3.5vw,44px);border-top:2px solid #fff}
.act{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem 1.5rem;padding:1.25rem 0;border-bottom:1px solid rgba(255,255,255,.55)}
.act .lbl{grid-column:1/-1;font-weight:600;font-size:.95rem}
.act .big{font-size:clamp(2rem,3.6vw,3.1rem);font-weight:600;letter-spacing:-.005em;line-height:1}
.act .mid{font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:600;letter-spacing:0;line-height:1.15}
.qr-close{width:96px;height:96px;border:6px solid #fff;border-radius:8px;background:#fff}

/* ---------- footer ---------- */
footer{position:relative;padding-block:48px 40px}
footer .wrap{display:grid;grid-template-columns:auto 1fr 1fr;gap:clamp(24px,5vw,72px);align-items:start;font-size:.95rem;color:var(--ink-soft)}
footer img{height:44px;width:auto}
footer b{display:block;color:var(--ink);margin-bottom:.35rem}
footer .permit{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:1.25rem;font-size:.8rem;line-height:1.55}
footer .permit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
footer .credit{grid-column:1/-1;margin-top:calc(-1 * clamp(24px,5vw,72px) + .75rem);font-size:.8rem}

/* ---------- sheets: where the colour changes, the next section slides up over the last with soft top corners ---------- */
.biz,.route,.behind,.close,footer{margin-top:calc(-1 * var(--r-sheet));border-radius:var(--r-sheet) var(--r-sheet) 0 0}
.biz,.give,.behind,footer{background:var(--paper)}
.biz,.give{z-index:1}.route{z-index:2}.behind{z-index:3}.close{z-index:4}footer{z-index:5}
/* ---------- motion ---------- */
/* snow: a canvas between the heart and the copy */
.snow{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.route .snow{z-index:1}
/* photos open softly from a circle */
.js .unfold img{clip-path:circle(18% at 50% 50%);transition:clip-path 1s var(--ease)}
.js .unfold.in img{clip-path:circle(80% at 50% 50%)}
/* on arrival the empty slot breathes, inviting the last piece */
.close.in .slot{animation:slot-march 1.6s linear infinite}
@keyframes slot-march{to{stroke-dashoffset:-26}}
/* without hover (phones) the piece drops in on its own, shortly after the band arrives */
@media (hover:none){.close.in .missing{opacity:1;transform:none;transition-delay:1.4s}.close.in .slot{animation:none}}
/* logos weave in on a checker */
/* reveal on scroll: the page is paper being laid out. Headings and their copy rise into place;
   cards land like a sheet set down on the table, a hair tilted, then settle flat; rows and FAQ
   items follow one after another. Each runs once. Without JS nothing is hidden. */
.js [data-r]{transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js [data-r]:not(.in){opacity:0}
.js [data-r="rise"]:not(.in){transform:translateY(22px)}
.js [data-r="sheet"]{transform-origin:30% 100%;transition-duration:.7s,1s}
.js [data-r="sheet"]:not(.in){transform:translateY(40px) rotate(-1.4deg)}
.js [data-r="row"]:not(.in){transform:translateY(12px)}
.js .names li > *{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:inherit}
.js .names.in li > *{opacity:1;transform:none}
.js .names.in li:nth-child(even){transition-delay:.12s}
.js .names.in li:nth-child(n+4){transition-delay:.18s}
.js .names.in li:nth-child(n+4):nth-child(odd){transition-delay:.26s}
.js .names.in li:nth-child(n+7){transition-delay:.32s}
.js .names.in li:nth-child(n+7):nth-child(even){transition-delay:.4s}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .top nav{display:none}
  .top .btn{margin-left:auto}
}
@media (max-width:1024px){
  /* stacked hero: one screen, like desktop. The bear fills the top as backdrop, red rises from the bottom,
     and the motto, dates and the giving card (heart growing from its top edge) sit together at the foot, CTAs in view */
  .hero{display:flex;flex-direction:column;justify-content:flex-end;min-height:min(calc(100svh - 76px),980px);--ph:clamp(300px,80vw,460px)}
  .heart{display:none}
  .hero-bg{top:0;left:0;right:0;width:100%;height:var(--ph);object-fit:cover;object-position:78% 55%}
  .hero::before{background:linear-gradient(180deg,rgb(229 22 54 / .04) 0,rgb(229 22 54 / .18) calc(var(--ph) * .5),rgb(229 22 54 / .9) calc(var(--ph) * .82),var(--red) var(--ph))}
  .hero .wrap{padding-top:calc(var(--ph) - 64px);padding-bottom:calc(var(--r-sheet) + 20px);display:flex;flex-direction:column}
  .mark-heart{order:0}.hero h1{order:1}.hero .doors{order:3}.hero .lede{order:4;margin-top:1.5rem}
  .hero .doors{margin-top:1.5rem}
  .hero .lede,.doors{max-width:680px}
  .biz-top,.biz-lower{grid-template-columns:1fr}
  .biz-photo{aspect-ratio:4/3}
  .behind .head{grid-template-columns:1fr}
  .bank-line{grid-template-columns:1fr}
  .bank-vals{justify-content:flex-start}
  .close .wrap{grid-template-columns:1fr}
  .close-heart{max-width:min(62vw,300px)}
  footer .wrap{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--r-card:20px;--r-photo:22px;--r-sheet:28px}
  /* phones: the photo band follows the screen height and the giving card is compact, so both buttons land in the first screen */
  .hero .lede{display:none}
  .hero{min-height:min(calc(100svh - 64px),900px);--ph:clamp(230px,min(80vw,34svh),400px)}
  .hero .wrap{padding-top:calc(var(--ph) - 130px)}
  .hero::before{background:linear-gradient(180deg,rgb(229 22 54 / .04) 0,rgb(229 22 54 / .2) calc(var(--ph) * .45),rgb(229 22 54 / .92) calc(var(--ph) * .72),var(--red) calc(var(--ph) * .86))}
  .hero h1{font-size:clamp(2.3rem,10.5vw,3rem)}
  .hero .doors .dates{padding:.6rem 1.1rem;font-size:.8rem}.hero .doors .cd-units{gap:.65rem}
  .tally{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));gap:.55rem;padding:.5rem .6rem .5rem .6rem;border-radius:18px}
  .tally-heart{width:24px;height:24px}.tally-amt{font-size:1.05rem}.tally-lbl{font-size:.7rem}
  body:has(#wixheadless-banner-container[style*="block"]) .tally{bottom:calc(12px + 56px + env(safe-area-inset-bottom))}
  .hero .doors{margin-top:1.25rem}
  .mark-heart{width:clamp(52px,14vw,64px);margin-bottom:14px}
  .door{padding:.85rem 1.1rem .95rem;gap:.4rem}
  .door .lbl{font-size:.95rem}
  .door .no{font-size:2rem}
  .door .note{margin-top:.1rem;font-size:.8rem}
  .perks{display:block;font-size:.82rem;line-height:1.45}
  .perks li{display:inline;padding:0;white-space:nowrap}
  .perks li::before{display:inline-block;margin-right:.35rem;transform:translateY(-1px)}
  .perks li:not(:last-child){margin-right:.7rem}
  .door .app,.door .btn{margin-top:.3rem;min-height:46px}
  .journey-art.wide{display:none}
  .journey-art.tall{display:block}
  .legs{grid-template-columns:1fr}
}
/* a phone can't scan its own screen: swap the QR for a button that opens MobilePay */
@media (max-width:760px), (pointer:coarse){
  .qr,.phone{display:none}
  .ticket{grid-template-columns:1fr}
  .ticket .app{margin-top:.25rem}
  .app{display:flex;margin-top:.85rem;width:100%}
  .act .app{width:auto;margin-top:0}
}
@media (max-width:560px){
  html{scroll-padding-top:72px}
  .top .wrap{height:64px}
  .top .brand img{height:32px}
  .top .btn{min-height:44px;padding:0 1rem}
  .doors{grid-template-columns:1fr}
  .door + .door{border-left:0;border-top:1px solid var(--rule)}
  .bank-vals{flex-direction:column;align-items:flex-start}
  .bank-vals div{width:100%;justify-content:space-between}
  .bank-vals dt{min-width:4.5rem}
  .bank-vals dd{margin-right:auto}
  .act{grid-template-columns:1fr}
  .act .btn{justify-self:start}
  .names,.names.sponsors{grid-template-columns:1fr 1fr}
  .names li{min-height:120px;padding:1.1rem .75rem .8rem}.names li > a{padding:1.1rem .75rem .8rem}
  .names img{max-height:52px}
  .names li:last-child:nth-child(odd){grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .js [data-r],.js [data-r]:not(.in){transform:none!important;transition:opacity .3s linear!important}
  .doors{transform:none}
  .tally,.tally:not(.on){transition:opacity .2s linear,visibility 0s linear .2s;transform:none}.tally.beat .tally-heart{animation:none}
  html{scroll-behavior:auto}
  .phone,.close-heart .missing{transition:none}
  .js .heart .beat,.close.in .slot{animation:none}
  .js .mark-heart{animation:none}
  .js .unfold img{clip-path:none!important;transition:none}
  .js .names li > *,.js .names li{transition-duration:.01s!important;transition-delay:0s!important}
  .js .journey .coin-dot,.js .journey .line,.js .journey .pool,.js .journey .h-body,.js .journey .h-win{animation:none!important}
  .js .journey:not(.go) .coin-dot,.js .journey:not(.go) .h-win{opacity:1}
  .js .journey:not(.go) .line{stroke-dashoffset:0}
  .js .journey:not(.go) .h-body{fill:#fff}
}