/* Word of Life Ministries — design system v2 (clean, light, rich) */
:root{
  --cream:#efebe4;
  --cream-2:#e6e0d6;
  --white:#fbfaf7;
  --ink:#121a16;
  --ink-2:#2d3832;
  --muted:#5f6b64;
  --green:#0f3b2c;
  --green-2:#14503b;
  --emerald:#1f7a57;
  --sage:#cfe0d3;
  --sage-2:#b9d3c0;
  --gold:#e3b04b;
  --gold-2:#f3d48a;
  --line:rgba(18,26,22,.14);
  --line-l:rgba(251,250,247,.16);
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --r:22px;
  --wrap:1280px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--serif);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;margin:0;line-height:.98;letter-spacing:-.045em}
.display{font-size:clamp(3.2rem,7.4vw,6.6rem)}
.h2{font-size:clamp(2.6rem,5.6vw,5.2rem)}
.h3{font-size:clamp(1.6rem,2.4vw,2.1rem);letter-spacing:-.03em;line-height:1.08}
.lede{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.45;color:var(--ink);letter-spacing:-.005em}
.body-sm{font-size:15px;color:var(--muted);line-height:1.7}
.wrap{width:min(var(--wrap),100% - 64px);margin-inline:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px}
.kicker{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--emerald);display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}

/* pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:-.01em;border:1.5px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;white-space:nowrap}
.pill:hover{transform:translateY(-2px)}
.pill svg{width:16px;height:16px}
.pill-sm{height:40px;padding:0 18px;font-size:13.5px}
.p-dark{background:var(--ink);color:var(--white)}
.p-green{background:var(--green);color:var(--white);box-shadow:0 12px 28px -16px rgba(15,59,44,.7)}
.p-green:hover{background:var(--green-2)}
.p-green svg{box-sizing:content-box;width:14px;height:14px;padding:8px;margin:0 -16px 0 4px;border-radius:50%;background:#fbf5e6;color:var(--green);transition:transform .35s var(--ease)}
.p-green:hover svg{transform:translateX(3px)}
/* primary on dark / photo backgrounds: cream (the colour of the LIFE letters) with deep-green type */
.p-cream{background:#fbf5e6;color:var(--green);box-shadow:0 10px 28px -14px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.6)}
.p-cream:hover{background:#fff;box-shadow:0 16px 34px -14px rgba(0,0,0,.5),inset 0 0 0 1px #fff}
.p-cream svg{box-sizing:content-box;width:14px;height:14px;padding:8px;margin:0 -16px 0 4px;border-radius:50%;background:var(--green);color:#fbf5e6;transition:transform .35s var(--ease)}
.p-cream:hover svg{transform:translateX(3px)}
/* quiet outline: deep green hairline that fills on hover */
.p-outline{background:transparent;color:var(--green);border-color:rgba(15,59,44,.42)}
.p-outline:hover{background:var(--green);border-color:var(--green);color:#fbf5e6}
.p-sage{background:var(--sage);color:var(--green)}
.p-white{background:var(--white);color:var(--ink)}
.p-line{border-color:currentColor;background:transparent}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:14.5px;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.arrow-link svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.arrow-link:hover svg{transform:translateX(4px)}

/* top bar */
.topbar{background:var(--green);color:rgba(251,250,247,.86);font-family:var(--sans);font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:42px}
.topbar b{color:#fff;font-weight:700}
.dot{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block;margin-right:10px;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(227,176,75,.55)}70%{box-shadow:0 0 0 8px rgba(227,176,75,0)}100%{box-shadow:0 0 0 0 rgba(227,176,75,0)}}
.cd-inline{font-weight:700;color:var(--gold-2);margin-left:10px;font-variant-numeric:tabular-nums}
.topbar a{font-weight:600;color:#fff}
.topbar .wrap > *{white-space:nowrap}
@media (max-width:350px){.topbar .cd-inline{display:none}}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(239,235,228,.86);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 1px 0 var(--line)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:84px}
.menu{display:flex;gap:34px;list-style:none;margin:0;padding:0;font-family:var(--sans);font-weight:600;font-size:15px}
.menu a{position:relative;padding:6px 0;color:var(--ink-2)}
.menu a:hover,.menu a[aria-current=page]{color:var(--ink)}
.menu a[aria-current=page]::after{content:"";position:absolute;left:50%;bottom:-4px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--gold)}
.nav-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center}
.menu-btn{display:none}

/* logo lockup */
.logo{display:inline-flex;align-items:flex-end;gap:.1em;color:var(--green);font-family:var(--sans);font-size:21px;line-height:1}
.logo-type{display:flex;flex-direction:column}
.logo-type b{font-weight:800;letter-spacing:-.045em;line-height:.86}
.logo-type .l2{display:flex;align-items:baseline;gap:.03em}
.logo-type i{font-style:normal;font-weight:300;letter-spacing:-.05em;line-height:.86}
.logo-type small{font-size:.27em;font-weight:600;letter-spacing:.82em;margin-top:.6em;padding-left:.06em}
.logo-mark{height:2.15em;width:auto;margin-bottom:.34em}
.logo.light{color:var(--white)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:80;background:var(--green);color:var(--white);display:flex;flex-direction:column;padding:26px 24px 34px;transform:translateY(-100%);transition:transform .55s var(--ease),visibility .55s;visibility:hidden}
.menu-open .drawer{transform:none;visibility:visible}
.drawer-top{display:flex;justify-content:space-between;align-items:center}
.drawer nav{margin-top:auto;display:grid;gap:4px}
.drawer nav a{font-family:var(--sans);font-weight:700;font-size:clamp(2.4rem,11vw,3.6rem);letter-spacing:-.045em;line-height:1.12}
.drawer nav a[aria-current=page]{color:var(--gold-2)}
.drawer .drawer-foot{margin-top:34px;display:flex;gap:10px;flex-wrap:wrap}

.actions{display:flex;flex-wrap:wrap;gap:12px}

/* next service card */
.next{background:var(--green);color:var(--white);border-radius:var(--r);padding:24px 26px;box-shadow:0 30px 60px -30px rgba(15,59,44,.6)}
.next-head{display:flex;justify-content:space-between;font-family:var(--sans);font-size:13px;color:rgba(251,250,247,.7)}
.next h3{font-size:1.25rem;letter-spacing:-.02em;margin:14px 0 12px;color:#fff}
.countdown{display:flex;gap:18px;font-family:var(--sans);margin-bottom:18px}
.countdown div{display:flex;flex-direction:column}
.countdown b{font-size:2.3rem;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.countdown span{font-size:11px;color:rgba(251,250,247,.6);margin-top:4px}
.countdown .cd-s b{color:rgba(251,250,247,.35)}
.next .actions{gap:8px}

/* ticker */
.ticker{background:var(--green);color:var(--white);overflow:hidden;white-space:nowrap;padding:22px 0}
.ticker-track{display:inline-flex;gap:64px;animation:marquee 44s linear infinite;font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.75rem)}
.ticker-track span{display:inline-flex;align-items:center;gap:16px}
.tk-ic{width:1.05em;height:1.05em;flex:none;color:var(--gold-2);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes marquee{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:clamp(90px,11vw,150px) 0}
.sec-sm{padding:clamp(64px,8vw,100px) 0}
.bg-green{background:var(--green);color:var(--white)}
.bg-sage{background:var(--sage)}
/* warm parchment with a faint halftone, echoing the hero print */
.bg-sand{background:radial-gradient(circle,rgba(70,48,24,.09) 0 30%,transparent 34%) 0 0/4px 4px,linear-gradient(180deg,#f2e9d7 0%,#e8dbc1 100%)}
.bg-sand .display,.bg-sand .h2{color:var(--green)}
.bg-sand .lede{color:var(--ink-2)}
.bg-white{background:var(--white)}
.bg-green .kicker{color:var(--gold-2)}
.bg-green .body-sm{color:rgba(251,250,247,.7)}
.head-row{display:grid;grid-template-columns:1.3fr .7fr;gap:50px;align-items:end;margin-bottom:64px}
.head-row p{margin:0}

/* quote block */
.quote-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,7vw,110px);align-items:center}
.photo{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--green-2)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-slot{display:grid;place-items:center;background:radial-gradient(70% 60% at 50% 60%,rgba(243,212,138,.35),transparent 70%),linear-gradient(160deg,#1a6a4d,#0d3326)}
.photo-slot img{width:46%;height:auto;object-fit:contain;opacity:.95}
.big-quote{font-family:var(--serif);font-size:clamp(1.7rem,3.2vw,2.75rem);line-height:1.3;letter-spacing:-.01em;margin:0 0 30px}
.cite b{display:block;font-family:var(--sans);font-size:15px}
.cite span{font-size:14px;opacity:.7}

/* experience columns */
.exp{display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid rgba(18,26,22,.5)}
.exp > div{padding:34px 28px 10px;border-right:1px solid rgba(18,26,22,.18)}
.exp > div:first-child{padding-left:0}
.exp > div:last-child{border-right:0}
.exp svg{width:30px;height:30px;color:var(--green);margin-bottom:20px}
.exp h3{font-family:var(--serif);font-weight:400;font-size:1.55rem;letter-spacing:-.01em;line-height:1.2;margin-bottom:12px}
.exp p{font-size:14.5px;color:var(--ink-2);margin-bottom:20px}

/* times list */
.times{border-top:1.5px solid rgba(18,26,22,.5)}
.trow{display:grid;grid-template-columns:300px 1fr auto;gap:30px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line)}
.trow .t{font-family:var(--sans);font-weight:700;font-size:clamp(2.2rem,4vw,3.3rem);letter-spacing:-.05em;line-height:1}
.trow .t small{display:block;font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted);margin-top:8px}
.trow h3{font-size:1.5rem;letter-spacing:-.03em;margin-bottom:6px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.trow p{margin:0;color:var(--muted);font-size:15px}
.badge{font-family:var(--sans);font-size:11.5px;font-weight:700;background:var(--gold);color:var(--ink);padding:4px 10px;border-radius:99px;letter-spacing:0}
.trow:first-child .t{color:var(--green)}

/* media cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mcard{position:relative;border-radius:var(--r);overflow:hidden;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;isolation:isolate;background:var(--green-2)}
.mcard > img,.mcard > .fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease)}
.mcard:hover > img{transform:scale(1.05)}
.mcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,30,22,0) 30%,rgba(10,30,22,.86) 100%)}
.mcard .in{padding:28px}
.mcard .when{display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:700;background:rgba(251,250,247,.16);backdrop-filter:blur(8px);padding:6px 12px;border-radius:99px;margin-bottom:14px}
.mcard h3{font-size:1.85rem;letter-spacing:-.04em;margin-bottom:10px}
.mcard p{font-size:14.5px;color:rgba(255,255,255,.82);margin:0}
.fill-a{background:radial-gradient(60% 50% at 70% 30%,rgba(243,212,138,.45),transparent 70%),linear-gradient(150deg,#1f7a57,#0d3326)}
.fill-b{background:radial-gradient(60% 50% at 30% 30%,rgba(207,224,211,.35),transparent 70%),linear-gradient(150deg,#14503b,#08251b)}
.fill-c{background:radial-gradient(60% 60% at 50% 40%,rgba(227,176,75,.6),transparent 70%),linear-gradient(150deg,#2d6b4f,#0f3b2c)}
.mcard > img.kids{object-position:50% 42%}
.mcard > img.mentor{object-position:50% 30%}
/* bento rhythm: a wide feature card opens and closes the grid */
.mcard.wide,.mcard.wide-d{grid-column:span 2}
.mcard.wide .in,.mcard.wide-d .in{max-width:620px}
.mcard .glyph{position:absolute;right:24px;top:24px;width:46px;height:46px;color:rgba(255,255,255,.85)}

/* split CTA card */
.cta-card{display:grid;grid-template-columns:1fr 1fr;border-radius:calc(var(--r) + 6px);overflow:hidden;background:var(--green);color:var(--white);min-height:520px}
.cta-card .txt{padding:clamp(40px,6vw,76px);display:flex;flex-direction:column;justify-content:center}
.cta-card .txt p{color:rgba(251,250,247,.78);max-width:460px;margin:26px 0 30px}
.cta-card .side{position:relative}
.cta-card .side > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* give block */
.give-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.bank-card{background:var(--white);border-radius:var(--r);padding:32px 34px;box-shadow:0 30px 70px -40px rgba(18,26,22,.5)}
.bank-card h3{font-size:1.3rem;letter-spacing:-.02em;margin-bottom:8px}
.bank-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.bank-row:last-child{border-bottom:0;padding-bottom:4px}
.bank-row span{font-family:var(--sans);font-size:13px;color:var(--muted);font-weight:600}
.bank-row strong{font-family:var(--sans);font-size:1.35rem;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.copy{font-family:var(--sans);font-size:12px;font-weight:700;border:1.5px solid var(--line);background:none;border-radius:99px;padding:6px 12px;cursor:pointer;color:var(--ink)}
.copy:hover{border-color:var(--ink)}

/* page header (inner pages) */
.page-head{padding:70px 0 80px}
.page-head .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end}
.page-head .lede{color:var(--ink-2);margin:0}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.split.top{align-items:start}

/* list rows */
.rows{margin:0;padding:0;border-top:1.5px solid rgba(18,26,22,.5)}
.bg-green .rows{border-color:rgba(251,250,247,.5)}
.rows li{list-style:none;display:grid;grid-template-columns:60px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.55}
.bg-green .rows li{border-color:var(--line-l)}
.rows li b{font-family:var(--sans);font-size:14px;color:var(--emerald);padding-top:3px}
.bg-green .rows li b{color:var(--gold-2)}

/* values */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.val{background:var(--white);border-radius:18px;padding:28px 26px 26px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between}
.val h3{font-size:1.35rem;letter-spacing:-.03em;line-height:1.1}
.val p{margin:18px 0 0;font-size:13.5px;color:var(--muted)}
.val .n{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--emerald);margin-bottom:26px;display:block}

/* vision cards */
.vcards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.vcard{background:rgba(251,250,247,.06);border:1px solid var(--line-l);border-radius:var(--r);padding:34px}
.vcard .n{font-family:var(--sans);font-weight:700;color:var(--gold-2);font-size:14px}
.vcard h3{font-size:1.7rem;margin:40px 0 12px;letter-spacing:-.035em;line-height:1.05}
.vcard p{margin:0;color:rgba(251,250,247,.72);font-size:15px}

/* info rows */
.info{margin:0;border-top:1.5px solid rgba(18,26,22,.5)}
.info div{display:grid;grid-template-columns:140px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.info dt{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--emerald);padding-top:3px}
.info dd{margin:0;font-size:17px}
.info a{border-bottom:1px solid var(--line)}
.map{width:100%;border:0;border-radius:var(--r);aspect-ratio:4/3;background:var(--cream-2);filter:saturate(.7)}

/* zoom */
/* Friday prayer on Zoom: a rounded card on the page */
.sec-zoom{padding-top:clamp(20px,4vw,40px)}
.zoom-card{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,80px);align-items:center;padding:clamp(34px,5.5vw,80px);border-radius:32px;overflow:hidden;color:#fbf5e6;
  background:radial-gradient(70% 100% at 100% 0%,rgba(46,128,94,.5),rgba(46,128,94,0) 62%),linear-gradient(160deg,#134a36 0%,#0b2f22 70%,#082519 100%);
  box-shadow:0 0 0 1px rgba(243,212,138,.12),0 50px 100px -50px rgba(15,59,44,.75)}
.zoom-card .kicker{color:var(--gold-2)}
.zoom-card .h2{color:#fbf5e6}
.zoom-card-text p{max-width:460px;margin:22px 0 0;font-size:16.5px;line-height:1.65;color:rgba(251,245,230,.76)}
.zoom-card-side{position:relative}
.zoom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 22px}
.zoom div{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l c" "v v";align-items:center;column-gap:10px;padding:14px 14px 16px 18px;border:1px solid rgba(251,245,230,.14);border-radius:18px;background:rgba(251,245,230,.06)}
.zoom span{grid-area:l;font-family:var(--sans);font-size:12px;font-weight:600;color:rgba(251,245,230,.6)}
.zoom strong{grid-area:v;margin-top:6px;font-family:var(--sans);font-size:clamp(1.25rem,2vw,1.5rem);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.zoom .copy{grid-area:c;padding:4px 11px;font-size:11.5px;color:#fbf5e6;border-color:rgba(251,245,230,.26);background:rgba(251,245,230,.04)}
.zoom .copy:hover{border-color:#f3d48a;color:#f3d48a}
.zoom-actions{display:flex;flex-wrap:wrap;gap:12px}
.zoom-remind{gap:9px}
.zoom-remind svg{width:18px;height:18px;flex:none;color:#f3d48a}
.zoom-note{margin:16px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:rgba(251,245,230,.55)}
@media (max-width:1080px){.zoom-card{grid-template-columns:1fr}}
@media (max-width:640px){.zoom-card{border-radius:26px;padding:30px 22px}.zoom{grid-template-columns:1fr}.zoom-actions .pill{flex:1 1 100%}}

/* form */
.form{background:var(--white);border-radius:var(--r);padding:clamp(28px,4vw,44px)}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--sans);font-size:13px;font-weight:700;margin-bottom:8px}
.field input,.field textarea{width:100%;font:inherit;font-size:16px;padding:15px 18px;border-radius:14px;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);transition:border-color .2s}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--emerald);background:#fff}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.note{font-size:13.5px;color:var(--muted);margin:14px 0 0}

.connect{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}

/* footer */
.site-footer{background:#0b1611;color:rgba(251,250,247,.72);padding:90px 0 30px;font-family:var(--sans);font-size:14.5px}
.fgrid4{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:60px;border-bottom:1px solid var(--line-l)}
.site-footer .logo{font-size:26px}
.f-tag{font-family:var(--serif);font-size:1.45rem;line-height:1.3;color:#fff;margin:26px 0 0;max-width:320px}
.site-footer h4{font-size:14px;letter-spacing:0;color:#fff;margin-bottom:18px;font-weight:700}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-footer a:hover{color:#fff}
.f-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:26px;font-size:13px;color:rgba(251,250,247,.45)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.ticker-track,.dot{animation:none}}

/* responsive */
@media (max-width:1080px){
  .nav{grid-template-columns:1fr auto}
  .menu,.nav-actions .hide-m{display:none}
  .menu-btn{display:inline-flex}
  .quote-grid,.split,.give-grid,.page-head .grid,.head-row,.cta-card{grid-template-columns:1fr}
  .exp{grid-template-columns:1fr 1fr}
  .exp > div{padding-left:0;border-right:0;border-bottom:1px solid rgba(18,26,22,.18)}
  .cards{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:1fr 1fr}
  .trow{grid-template-columns:1fr auto}
  .trow .t{grid-column:1/-1}
  .fgrid4{grid-template-columns:1fr 1fr}
  .cta-card .side{min-height:380px}
  .connect{grid-template-columns:1fr}
}
@media (max-width:1080px){.mcard.wide-d{grid-column:auto}}
@media (max-width:640px){
  .mcard.wide{grid-column:auto}
  .wrap{width:calc(100% - 32px)}
  .topbar .hide-s{display:none}
  .topbar .wrap{justify-content:center}
  .nav{height:70px}
  .logo{font-size:18px}
  .actions .pill{flex:1 1 auto}
  .exp,.cards,.values,.vcards,.fgrid,.fgrid4{grid-template-columns:1fr}
  .mcard{min-height:380px}
  .trow{grid-template-columns:1fr;gap:14px}
  .info div{grid-template-columns:1fr;gap:4px}
  .bank-row{flex-wrap:wrap}
  .countdown b{font-size:2rem}
}

/* ===== scroll motion v2 ===== */
/* masked word-by-word headline reveal */
.words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.words .w > span{display:inline-block;transform:translateY(110%) rotate(2deg);transform-origin:left bottom;transition:transform 1.1s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.words.in .w > span{transform:none}
.rv.words{opacity:1;transform:none}

/* image unveil */
.unveil{clip-path:inset(14% 6% 0 6% round var(--r));transition:clip-path 1.4s var(--ease)}
.unveil > img,.unveil > .fill{transform:scale(1.18);transition:transform 1.8s var(--ease)}
.unveil.in{clip-path:inset(0 0 0 0 round var(--r))}
.unveil.in > img,.unveil.in > .fill{transform:scale(1)}

/* cascading children */
.stagger > *{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * 110ms)}
.stagger.in > *{opacity:1;transform:none}
.times.stagger > *{transform:translateX(-30px)}
.times.stagger.in > *{transform:none}


@media (prefers-reduced-motion:reduce){
  .words .w > span,.stagger > *{transform:none!important;opacity:1!important;transition:none}
  .unveil{clip-path:none;transition:none}.unveil > img,.unveil > .fill{transform:none;transition:none}
}

.note a{border-bottom:1px solid var(--line)}

/* header over a dark green hero */
.site-header{transition:background .35s,box-shadow .35s}
.site-header.on-dark{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.site-header.on-dark.scrolled{background:rgba(8,33,24,.72);backdrop-filter:saturate(1.3) blur(16px);-webkit-backdrop-filter:saturate(1.3) blur(16px);box-shadow:0 1px 0 rgba(251,250,247,.08)}
.site-header.on-dark .logo{color:var(--white)}
.site-header.on-dark .menu a{color:rgba(251,250,247,.78)}
.site-header.on-dark .menu a:hover,.site-header.on-dark .menu a[aria-current=page]{color:#fff}
.site-header.on-dark .p-dark{background:var(--white);color:var(--ink)}
body:has([data-dark-hero]) .topbar{background:#0a2b20;border-bottom:1px solid rgba(251,250,247,.07)}
.p-glass{background:rgba(251,250,247,.08);color:#fff;border-color:rgba(251,250,247,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.p-glass:hover{background:rgba(251,250,247,.16)}

/* =====================================================================
   Home hero · LIFE — a photographic collage: sky, the Earth (Apollo 17),
   the word LIFE, and creation in front (mountains, trees, water, flowers).
   Photos: public domain / CC0 via Wikimedia Commons.
   ===================================================================== */
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-header.on-sky:not(.scrolled){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
/* --hh: the hero's height. --sh: the stage's height (the hero's, or more on screens wider than the 8:3 artwork).
   --wh: the height of the word, limited by the stage's height on wide screens and by the screen's width on narrow ones.
   --seat: how far the word's feet stand above the stage's bottom, so the peak always covers the same share of the letters. */
.lf{--hmin:560px;--hh:max(calc(100vh - 42px),var(--hmin));--sh:max(var(--hh),calc(100vw * 3 / 8));--wh:min(calc(var(--sh) * .676),77.3vw);
  --seat:calc(var(--sh) * .3067 - var(--wh) * .175);--b0:0px;--etop:62px;--lift:max(0px,calc(var(--b0) - var(--seat)));position:relative;height:var(--hh);margin-top:-84px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#9fc0d2 0 72%,#20262f);--mx:0;--my:0}
@supports (height:100svh){.lf{--hh:max(calc(100svh - 42px),var(--hmin))}}
.lf-stage{position:absolute;left:50%;top:50%;width:max(100vw,calc(var(--hh) * 8 / 3));height:var(--sh);transform:translate(-50%,-50%)}
.lf-stage > *{position:absolute;transition:translate .9s cubic-bezier(.2,.7,.1,1)}
.lf-sky{inset:0;width:100%;height:100%;object-fit:cover;translate:calc(var(--mx) * -6px) calc(var(--my) * -4px);animation:lfSky 7s ease-out both}
.lf-earth{left:50%;top:max(var(--etop),min(calc(var(--sh) * .17),calc(var(--sh) * .6933 - var(--wh) * .9237)));width:calc(var(--wh) * .986);height:auto;transform:translateX(-50%);translate:calc(var(--mx) * -14px) calc(var(--my) * -9px);animation:lfEarth 2.4s .15s cubic-bezier(.16,.84,.24,1) both}
/* the word is drawn, not typed: tall, tight letters whose feet sit behind the peak and in the red rock (the artwork is built to these shapes) */
.lf-word{left:50%;bottom:calc(var(--seat) + var(--lift));width:calc(var(--wh) * 1.138);height:var(--wh);margin:0;transform:translateX(-50%);translate:calc(var(--mx) * -26px) calc(var(--my) * -13px)}
.lf-letters{display:block;width:100%;height:100%;overflow:visible;fill:#fffaf0;stroke:#fffaf0;stroke-width:16;stroke-linejoin:round;filter:drop-shadow(0 3px 5px rgba(24,26,34,.24)) drop-shadow(0 16px 36px rgba(14,28,44,.3))}
.lf-letters path{transform-box:fill-box;animation:lfLetter 1.3s cubic-bezier(.16,.84,.24,1) both}
.lf-letters path:nth-child(1){animation-delay:.45s}
.lf-letters path:nth-child(2){animation-delay:.55s}
.lf-letters path:nth-child(3){animation-delay:.65s}
.lf-letters path:nth-child(4){animation-delay:.75s}
.lf-back{inset:0;width:100%;height:100%;object-fit:cover;translate:calc(var(--mx) * -17px) calc(var(--my) * -10px - var(--lift));animation:lfLand 2s .2s cubic-bezier(.16,.84,.24,1) both}
.lf-land{inset:0;width:100%;height:100%;object-fit:cover;translate:calc(var(--mx) * -26px) calc(var(--my) * -13px - var(--lift));animation:lfLand 2s .25s cubic-bezier(.16,.84,.24,1) both}

/* a clean copy of the word above the printed finish, cut away wherever the front land stands before the letters,
   so the lettering stays bright like fresh paper while the photographs keep their halftone.
   The mask is the front layer itself: keep its address (and ?v=) the same as the image in index.html. */
.lf-top{z-index:3;pointer-events:none;display:none}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){.lf-top{display:block}}
.lf-clean{inset:0;translate:calc(var(--mx) * -26px) calc(var(--my) * -13px);animation:lfClean .7s 2.3s ease both;
  -webkit-mask-image:linear-gradient(#000,#000),url(../img/life/land-front.webp?v=4);-webkit-mask-size:100% 100%;-webkit-mask-position:0 0,0 calc(0px - var(--lift));-webkit-mask-repeat:no-repeat;-webkit-mask-composite:xor;
  mask-image:linear-gradient(#000,#000),url(../img/life/land-front.webp?v=4);mask-size:100% 100%;mask-position:0 0,0 calc(0px - var(--lift));mask-repeat:no-repeat;mask-composite:exclude}
.lf-clean .lf-word{position:absolute;translate:none}
.lf-clean .lf-letters{filter:none}
.lf-clean .lf-letters path{animation:none}
@keyframes lfClean{from{opacity:0}}

/* the printed finish: a 45-degree halftone screen, paper grain, warm wash and soft vignette */
.lf-print{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.lf-print::before{content:"";position:absolute;inset:-50%;transform:rotate(45deg);
  background:radial-gradient(circle,rgba(40,24,22,.62) 0 31%,transparent 36%) 0 0/4px 4px;mix-blend-mode:multiply;opacity:.13}
.lf-print::after{content:"";position:absolute;inset:0;mix-blend-mode:overlay;opacity:.34;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.lf::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 45%,transparent 62%,rgba(70,36,28,.10) 100%),linear-gradient(180deg,rgba(255,238,214,.07),rgba(255,230,200,.04));mix-blend-mode:multiply}

/* the welcome bar */
/* the shade under the bar sits below the clean lettering, so the letters' feet stay bright where the two meet */
.lf-shade{position:absolute;left:0;right:0;bottom:0;z-index:2;height:max(150px,22%);pointer-events:none;background:linear-gradient(180deg,rgba(14,22,30,0),rgba(14,22,30,.30) 55%,rgba(14,22,30,.56));animation:lfClean 1.2s 1.4s ease both}
.lf-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:clamp(40px,7vh,72px) 0 clamp(18px,3vh,30px);color:var(--white);animation:lfFade 1.2s 1.4s ease both}
.lf-bar .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.lf-tag{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.2;color:var(--gold-2)}
.lf-tag span{display:block;margin-top:8px;font-family:var(--sans);font-style:normal;font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(251,250,247,.82)}
.lf-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lf-next{display:flex;flex-direction:column;justify-content:center;height:52px;padding:0 20px;border-radius:99px;border:1.5px solid rgba(251,250,247,.3);background:rgba(251,250,247,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--sans);line-height:1.15}
.lf-next small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,250,247,.7)}
.lf-next b{font-size:15px;color:#fff;font-variant-numeric:tabular-nums}

@keyframes lfSky{from{transform:scale(1.08)}}
@keyframes lfEarth{from{opacity:0;transform:translateX(-50%) translateY(16%) scale(.94)}}
@keyframes lfLetter{from{opacity:0;transform:translateY(18%)}}
@keyframes lfLand{from{opacity:0;transform:translateY(7%)}}
@keyframes lfFade{from{opacity:0;transform:translateY(14px)}}

/* portrait screens: the welcome bar stacks on a deeper base so the words stay clear over the mountains.
   --b0 keeps the word's feet clear of the bar: on short phones the word and the land rise together (--lift). */
@media (max-aspect-ratio:1/1){
  .lf{--hmin:480px;--b0:164px}
  .lf-shade{height:236px;background:linear-gradient(180deg,rgba(9,17,22,0),rgba(9,17,22,.5) 44%,rgba(9,17,22,.82))}
  .lf-bar{padding-top:24px}
  .lf-bar .wrap{flex-direction:column;align-items:flex-start;gap:14px}
  .lf-tag span{margin-top:6px;font-size:clamp(9.5px,2.9vw,11px);letter-spacing:.14em}
  .lf-actions{width:100%}
  .lf-actions .pill{flex:1}
  .lf-next{display:none}
}
@media (max-width:640px){.lf{margin-top:-70px}}
/* below the desktop menu's width the middle of the header is empty, so the Earth may rise higher */
@media (max-width:1080px){.lf{--etop:24px}}
/* a phone on its side: the whole welcome fits the short screen */
@media (max-height:480px) and (min-aspect-ratio:1/1){
  .lf{--hmin:340px}
  .lf-tag span,.lf-next{display:none}
  .lf-bar{padding:24px 0 12px}
  .lf-shade{height:110px}
  .lf-actions .pill{height:42px;padding:0 20px;font-size:14px}
  .lf-actions .p-cream svg{padding:6px;margin:0 -12px 0 2px}
}
@media (prefers-reduced-motion:reduce){.lf *{animation:none!important;transition:none!important}}

/* header logo: the door turns once every 6 seconds, with soft smoke drifting up behind it */
.fx-defs{position:absolute;width:0;height:0;overflow:hidden}
.logo-ico{position:relative;display:inline-flex;margin-bottom:.34em;perspective:420px;isolation:isolate}
.logo-ico .logo-mark{margin-bottom:0;transform-style:preserve-3d;animation:logoTurn 6s cubic-bezier(.65,0,.35,1) infinite}
.smoke{position:absolute;left:50%;bottom:10%;width:4.4em;height:5.6em;transform:translateX(-50%);z-index:-1;filter:url(#smoky);pointer-events:none}
.smoke i{position:absolute;left:50%;top:62%;width:1.5em;height:1.5em;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(132,124,112,.5) 0%,rgba(132,124,112,.2) 44%,rgba(132,124,112,0) 70%);
  animation:smokeRise 3s cubic-bezier(.3,.6,.4,1) infinite}
.smoke i:nth-child(1){--dx:-.9em;animation-delay:0s}
.smoke i:nth-child(2){--dx:.85em;animation-delay:.75s}
.smoke i:nth-child(3){--dx:-.2em;animation-delay:1.5s}
.smoke i:nth-child(4){--dx:.45em;animation-delay:2.25s}
.site-header.on-sky:not(.scrolled) .smoke i{background:radial-gradient(circle,rgba(255,255,255,.78) 0%,rgba(255,255,255,.32) 44%,rgba(255,255,255,0) 70%)}
.site-header.on-dark .smoke i{background:radial-gradient(circle,rgba(243,236,220,.5) 0%,rgba(243,236,220,.2) 42%,rgba(243,236,220,0) 70%)}
@keyframes logoTurn{0%{transform:rotateY(0)}16%,100%{transform:rotateY(360deg)}}
@keyframes smokeRise{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}
  18%{opacity:.9}
  60%{opacity:.55}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% - 3.3em)) scale(2.4)}
}
@media (prefers-reduced-motion:reduce){.logo-ico .logo-mark,.smoke i{animation:none}.smoke{display:none}}

/* =====================================================================
   Event pop-up · We Are Five. A timed invitation, not a page section:
   the page dims, light breaks open from above ("Open Heavens") and the
   invitation rises into it. Removes itself after the event (data-until).
   ===================================================================== */
@property --evx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.tb-ev{display:inline-flex;align-items:center;gap:8px}
.tb-ev::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(227,176,75,.22)}
.tb-ev-s{display:none}
@media (max-width:640px){.tb-ev-s{display:inline}}

.evx{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:12px;perspective:1800px;color:#fbf5e6;font-family:var(--sans)}
.evx[hidden]{display:none}
body.evx-lock{overflow:hidden}
.evx-backdrop{position:absolute;inset:0;background:radial-gradient(130% 95% at 50% -5%,rgba(24,84,61,.8) 0%,rgba(6,28,20,.9) 55%,rgba(2,12,8,.95) 100%);backdrop-filter:blur(12px) saturate(.8);-webkit-backdrop-filter:blur(12px) saturate(.8);opacity:0;transition:opacity .8s ease}
.evx.open .evx-backdrop{opacity:1}
.evx.closing .evx-backdrop{transition-duration:.55s}

/* open heavens: glow, two fans of light and drifting gold dust */
.evx-light{position:absolute;inset:0;overflow:hidden;pointer-events:none;transition:opacity .5s ease}
.evx.closing .evx-light{opacity:0}
.evx-glow{position:absolute;left:50%;top:-40vh;width:120vw;height:84vh;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,160,.55),rgba(255,226,160,.14) 55%,rgba(255,226,160,0));opacity:0}
.evx-rays{position:absolute;left:50%;top:-7vh;width:240vmax;height:150vh;translate:-50% 0;transform-origin:50% 0;opacity:0;scale:1 .12;mix-blend-mode:screen;
  background:conic-gradient(from 180deg at 50% 0,rgba(255,233,184,.34) 0deg,rgba(255,233,184,0) 2.6deg,rgba(255,233,184,0) 6.5deg,rgba(255,233,184,.2) 8.6deg,rgba(255,233,184,0) 10.4deg,rgba(255,233,184,0) 14deg,rgba(255,233,184,.26) 17deg,rgba(255,233,184,0) 20deg,rgba(255,233,184,0) 25deg,rgba(255,233,184,.13) 27.5deg,rgba(255,233,184,0) 29.5deg,rgba(255,233,184,0) 33deg,rgba(255,233,184,.16) 37deg,rgba(255,233,184,0) 41deg,rgba(255,233,184,0) 47deg,rgba(255,233,184,.08) 50deg,rgba(255,233,184,0) 53deg,rgba(255,233,184,0) 306deg,rgba(255,233,184,.09) 309.5deg,rgba(255,233,184,0) 313deg,rgba(255,233,184,0) 318deg,rgba(255,233,184,.17) 322.5deg,rgba(255,233,184,0) 327deg,rgba(255,233,184,0) 331deg,rgba(255,233,184,.12) 333deg,rgba(255,233,184,0) 335deg,rgba(255,233,184,0) 339deg,rgba(255,233,184,.27) 342.5deg,rgba(255,233,184,0) 346deg,rgba(255,233,184,0) 349.4deg,rgba(255,233,184,.2) 351.5deg,rgba(255,233,184,0) 353.6deg,rgba(255,233,184,0) 357.4deg,rgba(255,233,184,.34) 360deg);
  -webkit-mask:radial-gradient(58% 72% at 50% 0,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%);mask:radial-gradient(58% 72% at 50% 0,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%)}
.evx-rays.r2{background:conic-gradient(from 180deg at 50% 0,rgba(255,226,170,0) 0deg,rgba(255,226,170,.16) 4deg,rgba(255,226,170,0) 9deg,rgba(255,226,170,0) 19deg,rgba(255,226,170,.12) 23deg,rgba(255,226,170,0) 28deg,rgba(255,226,170,0) 38deg,rgba(255,226,170,.1) 43deg,rgba(255,226,170,0) 48deg,rgba(255,226,170,0) 314deg,rgba(255,226,170,.1) 318deg,rgba(255,226,170,0) 322deg,rgba(255,226,170,0) 333deg,rgba(255,226,170,.12) 337deg,rgba(255,226,170,0) 341deg,rgba(255,226,170,0) 350deg,rgba(255,226,170,.15) 354deg,rgba(255,226,170,0) 358deg);filter:blur(6px)}
.evx.open .evx-glow{animation:evxShow 1.8s .1s ease-out forwards,evxBreath 7s 1.9s ease-in-out infinite}
.evx.open .evx-rays{animation:evxOpen 2s .15s cubic-bezier(.16,1,.3,1) forwards,evxSway 16s 2.15s ease-in-out infinite}
.evx.open .evx-rays.r2{animation:evxOpen 2.3s .3s cubic-bezier(.16,1,.3,1) forwards,evxSway 22s 2.6s ease-in-out infinite reverse}
.evx.closing .evx-glow,.evx.closing .evx-rays{opacity:1;scale:1 1}
.evx-dust i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#ffeec4;box-shadow:0 0 8px 2px rgba(255,214,140,.55);opacity:0}
.evx.open .evx-dust i{animation:evxDust var(--t) var(--d) linear infinite}

/* the invitation card (phones and tablets: one scrolling column) */
.evx-card{position:relative;display:flex;flex-direction:column;flex:none;width:min(560px,100%);min-width:0;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border-radius:24px;overflow:hidden;outline:none;
  background:radial-gradient(85% 60% at 100% 0%,rgba(46,128,94,.5),rgba(46,128,94,0) 70%),linear-gradient(165deg,#134a36 0%,#0b2f22 52%,#061d15 100%);
  box-shadow:0 0 0 1px rgba(243,212,138,.16),0 70px 140px -40px rgba(0,0,0,.85),0 0 160px -30px rgba(243,212,138,.28)}
.evx.open .evx-card{animation:evxCard 1.25s .2s cubic-bezier(.16,1,.3,1) both}
.evx.closing .evx-card{animation:evxOut .5s cubic-bezier(.55,0,.75,.2) both}
/* a thin light that travels around the gold edge */
.evx-card::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--evx-a),rgba(243,212,138,.1) 0deg,rgba(243,212,138,.1) 270deg,rgba(255,238,196,.95) 318deg,rgba(243,212,138,.1) 352deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.evx.open .evx-card::after{animation:evxBeam 8s 1.4s linear infinite}

/* the way out: bright, always on top, and visible by default (it must never depend on an animation to appear) */
.evx-x{position:absolute;top:14px;right:14px;z-index:6;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:0;background:var(--green);color:#fbf5e6;cursor:pointer;box-shadow:0 0 0 2px #fbf5e6,0 8px 22px -4px rgba(0,0,0,.6);transition:transform .45s var(--ease),background .3s,color .3s,box-shadow .3s}
.evx-x:hover,.evx-x:focus-visible{transform:rotate(90deg);background:#fbf5e6;color:var(--green);box-shadow:0 0 0 2px rgba(243,212,138,.95),0 0 0 7px rgba(243,212,138,.24),0 10px 26px -6px rgba(0,0,0,.65)}
.evx-x svg{width:18px;height:18px;stroke-width:2.4}
.evx.open .evx-x{animation:evxShow .5s .6s ease backwards}

.evx-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.evx-scroll::-webkit-scrollbar{display:none}

/* the flyer swings in and catches the light */
.evx-art{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;perspective:1400px;background:#0a2c20}
.evx-art img{width:100%;height:100%;object-fit:cover;transform-origin:0 50%;backface-visibility:hidden}
.evx.open .evx-art img{animation:evxFlip 1.6s .4s cubic-bezier(.16,1,.3,1) both}
.evx-art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(6,29,21,.5),rgba(6,29,21,0) 9%)}
.evx-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 46%,rgba(255,255,255,0) 62%);mix-blend-mode:overlay;transform:translateX(-110%)}
.evx.open .evx-art::after{animation:evxSheen 7s 1.6s cubic-bezier(.45,0,.2,1) infinite}

/* the words */
.evx-body{position:relative;isolation:isolate;padding:26px 24px 0}
.evx-body > .evx-five{position:absolute;z-index:-1;right:-60px;top:-40px;height:430px;width:auto;opacity:.6;overflow:visible;pointer-events:none}
.evx-five text{font-family:"League Gothic","Anton",Impact,sans-serif;font-size:200px;fill:rgba(243,212,138,0);stroke:url(#evxGold);stroke-width:.45;stroke-dasharray:1000;stroke-dashoffset:1000}
.evx.closing .evx-five text{stroke-dashoffset:0;stroke-opacity:.26;fill:rgba(243,212,138,.08)}
.evx.open .evx-five text{animation:evxDraw 3.4s .7s cubic-bezier(.45,0,.2,1) forwards}
.evx.open .evx-body > :not(.evx-five):not(.evx-title){animation:evxUp 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.8s + var(--i,0) * .09s)}

.evx-kick{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,245,230,.76)}
.evx-kick b{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--gold-2)}
.evx-kick b::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,rgba(243,212,138,0),var(--gold-2))}
.evx-kick i{width:5px;height:5px;transform:rotate(45deg);background:var(--gold)}
@media (max-width:420px){.evx-kick{letter-spacing:.15em;gap:6px 10px}.evx-kick b::before{display:none}}

.evx-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 14px;margin:0 0 8px;font-family:"League Gothic","Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:.84;letter-spacing:.012em}
.evx-t1{font-size:42px;color:#fbf5e6}
.evx-t2{display:inline-flex;font-size:98px;filter:drop-shadow(0 6px 26px rgba(227,176,75,.32))}
.evx-t2 b{display:block;font-weight:400;background:linear-gradient(172deg,#fff6da 8%,#f3d48a 40%,#e3b04b 66%,#ad7c22 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.evx.open .evx-t1{animation:evxUp 1s .85s cubic-bezier(.16,1,.3,1) both}
.evx.open .evx-t2 b{animation:evxLetter 1.3s cubic-bezier(.16,1,.3,1) both}
.evx.open .evx-t2 b:nth-child(1){animation-delay:.95s}
.evx.open .evx-t2 b:nth-child(2){animation-delay:1.04s}
.evx.open .evx-t2 b:nth-child(3){animation-delay:1.13s}
.evx.open .evx-t2 b:nth-child(4){animation-delay:1.22s}

.evx-theme{margin:0 0 22px;font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.4;color:rgba(251,245,230,.8)}
.evx-theme b{font-family:var(--sans);font-style:normal;font-size:.95em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fbf5e6}
.evx-theme span{display:inline-block;margin-left:10px;padding:3px 10px;border-radius:99px;border:1px solid rgba(243,212,138,.45);font-family:var(--sans);font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--gold-2);vertical-align:2px}

.evx-cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 20px}
.evx-cd > div{display:flex;flex-direction:column;align-items:center;padding:12px 0 10px;border-radius:14px;border:1px solid rgba(243,212,138,.24);background:linear-gradient(180deg,rgba(251,245,230,.09),rgba(251,245,230,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden}
.evx-cd b{display:block;font-family:"League Gothic","Anton",Impact,sans-serif;font-weight:400;font-size:38px;line-height:1;letter-spacing:.02em;color:#fbf5e6;font-variant-numeric:tabular-nums}
.evx-cd b.tk{animation:evxTick .55s cubic-bezier(.2,.7,.1,1)}
.evx-cd small{margin-top:4px;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);opacity:.85}
.evx-live{display:none;grid-column:1/-1;align-items:center;gap:10px;margin:0;padding:14px 16px;border-radius:14px;border:1px solid rgba(243,212,138,.35);font-weight:700;font-size:14px}
.evx-live i{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(227,176,75,.25)}
.evx.is-live .evx-cd > div{display:none}
.evx.is-live .evx-live{display:flex}

.evx-facts{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid rgba(251,245,230,.14)}
.evx-facts li{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid rgba(251,245,230,.14)}
.evx-facts svg{flex:none;width:38px;height:38px;padding:9px;border-radius:50%;border:1px solid rgba(243,212,138,.4);color:var(--gold-2);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.evx-facts span{display:flex;flex-direction:column;font-size:13px;line-height:1.35;color:rgba(251,245,230,.68)}
.evx-facts b{font-size:15px;font-weight:700;color:#fbf5e6}

.evx-actions{position:sticky;bottom:0;z-index:3;display:flex;gap:10px;margin:8px -24px 0;padding:16px 24px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(6,29,21,0),rgba(6,29,21,.94) 34%)}
.evx-actions .pill{flex:1;height:48px;padding:0 14px;font-size:14px}

/* laptops and desktops: flyer and words side by side, sized as one poster */
@media (min-width:960px) and (min-height:560px){
  .evx{padding:32px}
  .evx-card{--H:min(calc(100vh - 88px),620px,calc((100vw - 72px) / 1.92));width:calc(var(--H) * 1.92);height:var(--H);max-height:none;border-radius:28px;container-type:size}
  .evx-scroll{display:grid;grid-template-columns:100cqh minmax(0,1fr);overflow:hidden}
  .evx-art{aspect-ratio:auto;height:100cqh}
  .evx-art::before{background:linear-gradient(270deg,rgba(6,29,21,.55),rgba(6,29,21,0) 9%)}
  .evx-body{display:flex;flex-direction:column;justify-content:center;padding:5.4cqh 6.6cqh 5.4cqh 6.4cqh}
  .evx-body > .evx-five{right:-21cqh;top:-9cqh;height:126cqh}
  .evx-kick{gap:1cqh 1.9cqh;margin-bottom:2.6cqh;font-size:max(10px,1.8cqh)}
  .evx-kick b::before{width:4.6cqh}
  .evx-title{gap:0 2.6cqh;margin-bottom:1.8cqh}
  .evx-t1{font-size:8.4cqh}
  .evx-t2{font-size:19cqh}
  .evx-theme{margin-bottom:3.8cqh;font-size:max(13px,2.8cqh)}
  .evx-theme span{font-size:max(9.5px,1.65cqh)}
  .evx-cd{gap:1.5cqh;margin-bottom:3.6cqh}
  .evx-cd > div{padding:1.9cqh 0 1.6cqh;border-radius:2.2cqh}
  .evx-cd b{font-size:7.2cqh}
  .evx-cd small{margin-top:.6cqh;font-size:max(8.5px,1.45cqh)}
  .evx-live{font-size:max(13px,2.3cqh)}
  .evx-facts{margin-bottom:0}
  .evx-facts li{gap:2.2cqh;padding:1.5cqh 0}
  .evx-facts svg{width:5.4cqh;height:5.4cqh;padding:1.3cqh}
  .evx-facts b{font-size:max(12.5px,2.3cqh)}
  .evx-facts span{font-size:max(11px,1.95cqh)}
  .evx-actions{position:static;margin:4.2cqh 0 0;padding:0;background:none}
  .evx-actions .pill{flex:none;height:8.4cqh;padding:0 3.8cqh;font-size:max(12.5px,2.3cqh)}
  .evx-x{top:2.6cqh;right:2.6cqh;background:#fbf5e6;color:var(--green);box-shadow:0 8px 22px -6px rgba(0,0,0,.6),0 0 0 4px rgba(251,245,230,.18)}
  .evx-x:hover,.evx-x:focus-visible{background:#fff}
}

@keyframes evxShow{from{opacity:0}to{opacity:1}}
@keyframes evxBreath{0%,100%{opacity:1}50%{opacity:.72}}
@keyframes evxOpen{from{opacity:0;scale:1 .12}to{opacity:1;scale:1 1}}
@keyframes evxSway{0%,100%{rotate:0deg}33%{rotate:1.8deg}66%{rotate:-1.8deg}}
@keyframes evxDust{0%{opacity:0;transform:translate3d(0,0,0)}12%{opacity:.9}80%{opacity:.55}100%{opacity:0;transform:translate3d(var(--dx),34vh,0)}}
@keyframes evxCard{from{opacity:0;transform:translateY(80px) scale(.9) rotateX(12deg)}to{opacity:1;transform:none}}
@keyframes evxOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(34px) scale(.95)}}
@keyframes evxBeam{to{--evx-a:360deg}}
@keyframes evxFlip{from{opacity:0;transform:rotateY(-34deg) translateX(-4%) scale(.86)}to{opacity:1;transform:none}}
@keyframes evxSheen{0%{transform:translateX(-110%)}24%,100%{transform:translateX(110%)}}
@keyframes evxDraw{58%{stroke-dashoffset:0;stroke-opacity:1;fill:rgba(243,212,138,0)}to{stroke-dashoffset:0;stroke-opacity:.26;fill:rgba(243,212,138,.08)}}
@keyframes evxUp{from{opacity:0;transform:translateY(22px)}}
@keyframes evxLetter{from{opacity:0;transform:translateY(45%) scale(.92);filter:blur(8px)}}
@keyframes evxTick{from{opacity:.15;transform:translateY(-36%)}}

@media (prefers-reduced-motion:reduce){
  .evx *,.evx *::before,.evx *::after{animation:none!important;transition:none!important}
  .evx.open .evx-card,.evx.open .evx-x,.evx.open .evx-glow,.evx.open .evx-rays{opacity:1}
  .evx-rays{scale:1 1}
  .evx-five text{stroke-dashoffset:0;stroke-opacity:.26;fill:rgba(243,212,138,.08)}
  .evx-dust{display:none}
}

/* =====================================================================
   Give · pay by bank. A quiet, bank-grade flow: choose an amount, then a
   payment slip (copy our details, open your bank, a 20-minute session)
   and a receipt. Nothing is charged or stored on our side.
   ===================================================================== */
.gv-how{list-style:none;margin:34px 0 0;padding:0;max-width:420px;border-top:1px solid rgba(18,26,22,.14);font-family:var(--sans)}
.gv-how li{display:flex;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid rgba(18,26,22,.14);font-size:15px;font-weight:500;color:var(--ink-2)}
.gv-how b{min-width:24px;font-family:var(--serif);font-size:13px;font-weight:400;letter-spacing:.04em;color:#9a7428}

/* the checkout card */
.gv-card{scroll-margin-top:110px;padding:clamp(26px,3.2vw,40px);border:1px solid rgba(18,26,22,.08);border-radius:16px;background:#fff;font-family:var(--sans);color:var(--ink);box-shadow:0 1px 2px rgba(18,26,22,.04),0 34px 70px -44px rgba(15,59,44,.45)}
.gv-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid rgba(18,26,22,.08)}
.gv-eyebrow{margin:0 0 8px;font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--emerald)}
.gv-card-title{margin:0;font-family:var(--serif);font-size:24px;font-weight:400;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.gv-secure{display:inline-flex;align-items:center;gap:6px;padding-bottom:3px;font-size:12px;font-weight:500;color:var(--muted)}
.gv-secure svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.gv-tabs{display:flex;gap:28px;margin:0 0 26px;border-bottom:1px solid rgba(18,26,22,.08)}
.gv-tabs button{position:relative;padding:0 0 12px;border:0;background:none;color:var(--muted);font:500 14.5px var(--sans);cursor:pointer;transition:color .2s}
.gv-tabs button:hover{color:var(--ink)}
.gv-tabs button[aria-checked="true"]{color:var(--ink);font-weight:600}
.gv-tabs button[aria-checked="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--green)}
.gv-field{margin-bottom:24px}
.gv-label{display:block;margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.gv-amount{display:flex;align-items:baseline;gap:6px;padding-bottom:10px;border-bottom:1px solid rgba(18,26,22,.16);cursor:text;transition:border-color .2s}
.gv-amount:focus-within{border-color:var(--green)}
.gv-cur{font-family:var(--serif);font-size:28px;color:var(--muted)}
.gv-amount input{width:2.3ch;min-width:1.3ch;max-width:100%;padding:0;border:0;outline:0;background:transparent;font-family:var(--serif);font-size:48px;font-weight:400;line-height:1.1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.gv-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:14px;border:1px solid rgba(18,26,22,.12);border-radius:10px;overflow:hidden}
.gv-chips button{height:40px;padding:0 4px;border:0;border-left:1px solid rgba(18,26,22,.12);background:#fff;color:var(--ink-2);font:500 14px var(--sans);font-variant-numeric:tabular-nums;cursor:pointer;transition:background .2s,color .2s}
.gv-chips button:first-child{border-left:0}
.gv-chips button:hover{background:#f6f4ef}
.gv-chips button[aria-pressed="true"]{background:var(--green);color:#fff}
.gv-select{position:relative}
.gv-select select{width:100%;height:48px;padding:0 44px 0 14px;border:1px solid rgba(18,26,22,.16);border-radius:10px;background:#fff;color:var(--ink);font:500 15px var(--sans);appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.gv-select select:hover{border-color:rgba(18,26,22,.3)}
.gv-select select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(15,59,44,.12)}
.gv-select svg{position:absolute;right:14px;top:50%;width:16px;height:16px;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.gv-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin-top:4px;border:0;border-radius:10px;background:var(--green);color:#fff;font:600 15.5px var(--sans);cursor:pointer;transition:background .2s}
.gv-go:hover{background:var(--green-2)}
.gv-go b{font-weight:600;color:#fff}
.gv-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gv-instant{display:none;align-items:center;gap:14px;width:100%;margin-top:4px;padding:13px 16px;border-radius:10px;background:var(--green);color:#fff;transition:background .2s}
.gv-instant:hover{background:var(--green-2)}
.gv-card.has-instant .gv-instant{display:flex}
.gv-instant-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.12);color:#f3d48a}
.gv-instant-ic svg{width:17px;height:17px;fill:currentColor}
.gv-instant-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.gv-instant-t b{font-size:15px;font-weight:600}
.gv-instant-t small{font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.72)}
.gv-instant-go{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.gv-card.has-instant .gv-go{height:48px;margin-top:10px;background:#fff;color:var(--green);box-shadow:inset 0 0 0 1px rgba(15,59,44,.3)}
.gv-card.has-instant .gv-go:hover{background:#f6f4ef}
.gv-card.has-instant .gv-go b{color:var(--green)}
.gv-err{margin:10px 0 0;font-size:13px;font-weight:500;color:#a3361f;text-align:center}
.gv-fine{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
.gv-fine svg{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}

/* the payment slip (phones: full screen; larger screens: centred) */
.gv-sheet{position:fixed;inset:0;z-index:130;display:flex;align-items:flex-end;justify-content:center;color:var(--ink);font-family:var(--sans);line-height:1.5}
.gv-sheet[hidden]{display:none}
.gv-backdrop{position:absolute;inset:0;background:rgba(10,16,13,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s ease}
.gv-sheet.open .gv-backdrop{opacity:1}
.gv-panel{position:relative;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;background:#fff;outline:none;transform:translateY(100%);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.gv-sheet.open .gv-panel{transform:none}
.gv-shead{position:relative;display:flex;align-items:center;gap:12px;flex:none;padding:calc(14px + env(safe-area-inset-top)) 12px 14px 20px;border-bottom:1px solid rgba(18,26,22,.08);background:#fff}
.gv-payee{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.gv-logo{flex:none;width:30px;height:30px;margin:0}
.gv-payee-t{display:flex;flex-direction:column;min-width:0;margin:0;line-height:1.3}
.gv-payee-t b{font-size:14.5px;font-weight:600;color:var(--ink)}
.gv-payee-t span{font-size:12px;color:var(--muted)}
.gv-timer{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:12.5px;color:var(--muted)}
.gv-timer svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.gv-timer b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.gv-sheet.warn .gv-timer b{color:#9a5b00}
.gv-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .2s}
.gv-icon:hover{background:#f3f1ec}
.gv-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.gv-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.gv-progress i{display:block;height:100%;background:#b8892d;transform-origin:0 50%;transition:transform 1s linear}

.gv-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.gv-scroll,.gv-end{scrollbar-width:thin;scrollbar-color:rgba(18,26,22,.2) transparent}
.gv-scroll::-webkit-scrollbar,.gv-end::-webkit-scrollbar{width:8px}
.gv-scroll::-webkit-scrollbar-thumb,.gv-end::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:8px;background:rgba(18,26,22,.2);background-clip:padding-box}
.gv-main{padding:24px 20px 6px}
.gv-side{padding:22px 20px 22px}
.gv-amt{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin:2px 0 8px}
.gv-big{font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.gv-amt-meta{font-size:14px;color:var(--muted)}
.gv-sub{margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--muted)}
.gv-slip{border-top:1px solid rgba(18,26,22,.12)}
.gv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l i" "v i";align-items:center;column-gap:16px;width:100%;padding:13px 0;border:0;border-bottom:1px solid rgba(18,26,22,.08);background:transparent;color:var(--ink);font-family:var(--sans);text-align:left;cursor:pointer}
.gv-row.gv-ref{grid-template-areas:"l i" "v i" "s i"}
.gv-row-l{grid-area:l;font-size:12.5px;color:var(--muted)}
.gv-row b{grid-area:v;font-size:16px;font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.gv-row small{grid-area:s;margin-top:2px;font-size:12px;line-height:1.4;color:var(--muted)}
.gv-row.gv-ref b{color:var(--green)}
.gv-row em{grid-area:i;display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;color:var(--emerald);font-style:normal;font-size:12.5px;font-weight:600;transition:background .2s,color .2s}
.gv-row:hover em{background:#f3f1ec}
.gv-row em .ic{display:grid;width:14px;height:14px}
.gv-row em svg{grid-area:1/1;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gv-row .i-done,.gv-row .t-done{display:none}
.gv-row.done .i-copy,.gv-row.done .t-copy{display:none}
.gv-row.done .i-done,.gv-row.done .t-done{display:inline}
.gv-row.done em{color:var(--ink-2)}
.gv-row.flash{animation:gvFlash .8s ease}
.gv-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:6px 0;border:0;background:none;color:var(--green);font:600 13.5px var(--sans);cursor:pointer}
.gv-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gv-link:hover span{text-decoration:underline;text-underline-offset:3px}
.gv-banks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;margin-top:4px;border-top:1px solid rgba(18,26,22,.12)}
.gv-bank{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid rgba(18,26,22,.08);color:var(--ink);font-size:14px;font-weight:500;transition:color .2s}
.gv-bank svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s,transform .2s}
.gv-bank:hover{color:var(--green)}
.gv-bank:hover svg{stroke:var(--green);transform:translate(2px,-2px)}
.gv-bank.on{color:var(--green);font-weight:600}
.gv-bank.on svg{stroke:var(--green)}
.gv-hint{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.gv-trust{display:flex;gap:10px;margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(18,26,22,.08);font-size:12.5px;line-height:1.6;color:var(--muted)}
.gv-trust svg{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:var(--emerald);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gv-trust a{font-weight:600;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.gv-foot{display:flex;align-items:center;gap:4px;flex:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid rgba(18,26,22,.08);background:#fff}
.gv-cancel,.gv-phone{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--muted);font:500 14px var(--sans);cursor:pointer;transition:color .2s,background .2s}
.gv-cancel:hover,.gv-phone:hover{color:var(--ink);background:#f3f1ec}
.gv-phone{display:none}
.gv-sheet.desk .gv-phone{display:inline-flex}
.gv-phone svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gv-done{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:48px;margin-left:6px;padding:0 22px;border:0;border-radius:10px;background:var(--green);color:#fff;font:600 15px var(--sans);white-space:nowrap;cursor:pointer;transition:background .2s}
.gv-done:hover{background:var(--green-2)}
.gv-toast{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));z-index:7;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 32px);margin:0;padding:10px 14px;border-radius:10px;background:var(--ink);color:#fff;font-size:13px;font-weight:500;white-space:nowrap;box-shadow:0 12px 30px -12px rgba(0,0,0,.45);opacity:0;transform:translate(-50%,10px);pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.16,1,.3,1)}
.gv-toast::before{content:"";width:6px;height:6px;border-radius:50%;background:#7cc49a}
.gv-toast.show{opacity:1;transform:translate(-50%,0)}

/* overlays inside the slip: continue on your phone, welcome back from the bank */
.gv-over{position:absolute;inset:0;z-index:8;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:rgba(10,16,13,.4);opacity:0;transition:opacity .3s ease}
.gv-over[hidden]{display:none}
.gv-over.show{opacity:1}
.gv-over-card{width:min(420px,100%);padding:26px 24px 22px;border-radius:14px;background:#fff;box-shadow:0 30px 70px -30px rgba(0,0,0,.5);transform:translateY(18px);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.gv-over.show .gv-over-card{transform:none}
.gv-over-card h3{margin:0 0 8px;font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.25;color:var(--ink)}
.gv-over-card p{margin:0 0 20px;font-size:14px;line-height:1.55;color:var(--muted)}
.gv-over-card .gv-back-kick{margin:0 0 8px;font-family:var(--sans);font-size:11px;font-style:normal;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--emerald)}
.gv-hand-card{text-align:center}
.gv-hand-card .gv-btn{width:100%}
.gv-qr{width:200px;height:200px;margin:8px auto 16px;padding:8px;border:1px solid rgba(18,26,22,.1);border-radius:10px;background:#fff}
.gv-qr svg{display:block;width:100%;height:100%}
.gv-actions{display:flex;gap:10px}
.gv-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 18px;border:0;border-radius:10px;background:var(--green);color:#fff;font:600 14.5px var(--sans);cursor:pointer;transition:background .2s}
.gv-btn:hover{background:var(--green-2)}
.gv-btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(18,26,22,.16)}
.gv-btn.ghost:hover{background:#f6f4ef}
.gv-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gv-btn:disabled{opacity:.6;cursor:progress}

/* thank you / session ended */
.gv-end{position:absolute;inset:0;z-index:6;display:none;overflow-y:auto;background:#fff}
.gv-sheet[data-state="done"] .gv-end[data-end="done"],.gv-sheet[data-state="expired"] .gv-end[data-end="expired"]{display:block}
.gv-end-in{width:min(480px,100%);margin:0 auto;padding:calc(52px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom));text-align:center;outline:none}
.gv-tick{display:block;width:56px;height:56px;margin:0 auto 22px}
.gv-tick circle{fill:none;stroke:var(--green);stroke-width:2.5;stroke-dasharray:277;stroke-dashoffset:277}
.gv-tick path{fill:none;stroke:var(--green);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;stroke-dashoffset:70}
.gv-sheet[data-state="done"] .gv-tick circle{animation:gvDraw .8s .15s cubic-bezier(.65,0,.35,1) forwards}
.gv-sheet[data-state="done"] .gv-tick path{animation:gvDraw .45s .7s cubic-bezier(.65,0,.35,1) forwards}
.gv-end-kick{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--emerald)}
.gv-end h2{margin:0;font-family:var(--serif);font-size:34px;font-weight:400;line-height:1.15;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.gv-end-lede{max-width:380px;margin:10px auto 26px;font-size:15px;line-height:1.55;color:var(--muted)}
.gv-receipt{margin:0 0 24px;border-top:1px solid rgba(18,26,22,.12);text-align:left}
.gv-receipt div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(18,26,22,.08)}
.gv-receipt dt{flex:none;font-size:13px;white-space:nowrap;color:var(--muted)}
.gv-receipt dd{margin:0;font-size:14px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.gv-verse{margin:28px 0 0;font-family:var(--serif);font-size:15px;font-style:italic;color:var(--ink-2)}
.gv-verse span{display:block;margin-top:4px;font-family:var(--sans);font-size:11px;font-style:normal;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gv-end-fine{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.gv-end-fine a{font-weight:600;color:var(--ink)}
.gv-end-ico{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 22px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(154,91,0,.45);color:#9a5b00}
.gv-end-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* a gift in progress, waiting on another page */
.gv-pill{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 6px 0 16px;border-radius:12px;background:var(--ink);color:#fff;font:500 13.5px var(--sans);box-shadow:0 18px 40px -16px rgba(0,0,0,.55);transform:translateY(160%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.gv-pill.in{transform:none}
.gv-pill i{width:7px;height:7px;border-radius:50%;background:#e3b04b;animation:gvPulse 1.8s ease-out infinite}
.gv-pill b{font-weight:600;color:#f3d48a;font-variant-numeric:tabular-nums}
.gv-pill em{display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:8px;background:#fff;color:var(--ink);font-style:normal;font-weight:600}

/* tablets, laptops and desktops: a centred slip */
@media (min-width:720px) and (min-height:600px){
  .gv-sheet{align-items:center;padding:28px}
  .gv-panel{width:min(600px,100%);height:auto;max-height:100%;border-radius:16px;box-shadow:0 0 0 1px rgba(18,26,22,.06),0 50px 120px -40px rgba(0,0,0,.55);opacity:0;transform:translateY(22px) scale(.985);transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s ease}
  .gv-sheet.open .gv-panel{opacity:1;transform:none}
  .gv-shead{padding:16px 16px 16px 26px}
  .gv-main{padding:28px 28px 6px}
  .gv-side{padding:24px 28px 26px}
  .gv-row{grid-template-columns:150px minmax(0,1fr) auto;grid-template-areas:"l v i";padding:14px 0}
  .gv-row.gv-ref{grid-template-areas:"l v i" ". s i"}
  .gv-row-l{font-size:13px}
  .gv-banks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gv-foot{padding:14px 20px 14px 16px}
  .gv-done{flex:none;margin-left:auto}
  .gv-over{align-items:center}
}
/* wide screens: what to pay on the left, where to pay on the right */
@media (min-width:960px) and (min-height:640px){
  .gv-panel{width:min(920px,100%)}
  .gv-scroll{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .gv-main{padding:30px 32px 28px}
  .gv-side{padding:30px 28px 28px;border-left:1px solid rgba(18,26,22,.08);background:#faf9f6}
  .gv-banks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){.gv-card{border-radius:14px}}
@media (max-width:480px){.gv-secure{display:none}.gv-timer-l{display:none}.gv-card-title{font-size:21px}}

@keyframes gvFlash{0%{background:rgba(15,59,44,.07)}100%{background:rgba(15,59,44,0)}}
@keyframes gvDraw{to{stroke-dashoffset:0}}
@keyframes gvPulse{0%{box-shadow:0 0 0 0 rgba(227,176,75,.6)}100%{box-shadow:0 0 0 9px rgba(227,176,75,0)}}
@media (prefers-reduced-motion:reduce){
  .gv-panel,.gv-backdrop,.gv-over,.gv-over-card,.gv-pill,.gv-toast,.gv-progress i{transition:none!important}
  .gv-tick circle,.gv-tick path{animation:none!important;stroke-dashoffset:0}
  .gv-row.flash,.gv-pill i{animation:none}
}