/* =====================================================================
   SWAP COLORS HERE
   Every accent comes from the IPC 30 stained-glass logo (assets/ipc30-logo.png).
   Backgrounds are a very deep purple-black derived from the logo outline (#3D1A78).
   Contrast checked (WCAG AA): --c-text, --c-soft, --c-muted and --c-hl on --c-ink / --c-ink-2;
   --c-ink, --c-panel-muted and --c-violet on --c-lilac.
   ===================================================================== */
:root{
  --c-ink:#12081F;          /* page background: deep purple-black */
  --c-ink-2:#1A0B2E;        /* raised surfaces on dark (cards, form, modals) */
  --c-ink-3:#2A1747;        /* hairlines and input borders on dark */
  --c-deep:#3D1A78;         /* logo outline */
  --c-violet:#7B0FF0;       /* logo panel: violet */
  --c-purple:#9B1FF5;       /* logo panel: bright purple */
  --c-magenta:#B200F0;      /* logo panel: magenta (decorative only) */
  --c-lilac:#F6E9FB;        /* light panels (from the flyer) */
  --c-lilac-2:#E9D6FA;      /* light panel borders and tiles */
  --c-hl:#C9A2FF;           /* highlighted words on dark (lilac tint of the logo purple), 9:1 */
  --c-text:#FFFFFF;         /* main text on dark */
  --c-soft:#D9CCEE;         /* secondary text on dark, 12:1 */
  --c-muted:#A596C2;        /* fine print on dark, 7:1 */
  --c-panel-muted:#5A4A7A;  /* fine print on lilac, 7:1 */
  --c-error:#FF9DB0;        /* errors on dark */
  --c-error-light:#B00020;  /* errors on lilac */
  --c-success:#9BE7BD;
  --c-whatsapp:#25D366;     /* WhatsApp icon colour only */

  --f-head:"Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif:"Playfair Display", Georgia, serif;

  --r-xl:32px;              /* big rounded containers */
  --r-lg:24px;
  --r-md:16px;
  --space:clamp(4.5rem, 11vw, 8.5rem);
  --maxw:1200px;
  --nav-h:64px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px);background:var(--c-ink)}
body{margin:0;font-family:var(--f-body);font-size:.9375rem;line-height:1.6;color:var(--c-soft);background:var(--c-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--f-head);color:var(--c-text);font-weight:400;letter-spacing:-.035em;line-height:1.02;margin:0 0 .5em}
h2{font-size:clamp(2.25rem,8.6vw,4.6rem)}
h3{font-size:1.15rem;font-weight:500;letter-spacing:-.015em;line-height:1.2}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--c-hl);outline-offset:3px;border-radius:6px}
.container{width:min(100% - 2.5rem, var(--maxw));margin-inline:auto}
.skip-link{position:absolute;left:1rem;top:-100px;background:#fff;color:var(--c-ink);padding:.7rem 1rem;border-radius:999px;z-index:200}
.skip-link:focus{top:1rem}
/* Highlighted words: white headline, key words in the softer lilac shade */
.hl{font-style:normal;color:var(--c-hl)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

section{position:relative;padding-block:var(--space)}
.alt{background:#0E0619}
.section-head{max-width:760px;margin-bottom:clamp(2.25rem,6vw,4rem)}
.section-head.center{margin-inline:auto;text-align:center}
.label{display:block;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted);margin-bottom:1.1rem}
.lead{font-size:.95rem;color:var(--c-muted);max-width:46ch}
.center .lead{margin-inline:auto}
.fine{font-size:.8rem;color:var(--c-muted);line-height:1.55}

/* Light panel: a large rounded lilac container on the dark page */

/* ---------- Buttons ---------- */
/* Primary: light pill with dark text and a dark circle holding an arrow */
.pill{display:inline-flex;align-items:center;gap:1rem;padding:.3rem .3rem .3rem 1.4rem;min-height:52px;border-radius:999px;background:#fff;color:var(--c-ink);border:0;font-size:.875rem;font-weight:500;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),background .25s}
.pill .arr{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--c-ink);color:#fff;flex:none;transition:transform .25s var(--ease)}
.pill .arr svg{width:16px;height:16px}
.pill:hover .arr{transform:translateX(3px) rotate(-45deg)}
.pill:hover{background:var(--c-lilac)}
/* Dark version for light panels */
.pill.dark{background:var(--c-ink);color:#fff}
.pill.dark .arr{background:#fff;color:var(--c-ink)}
.pill.dark:hover{background:var(--c-deep)}
/* Secondary: text link */
.text-link{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-size:.875rem;font-weight:500;color:var(--c-text);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;background:none;border:0;padding:0;cursor:pointer}
.text-link:hover{color:var(--c-hl)}
.text-link svg{width:16px;height:16px}
/* Small outlined pill (like "Detail Product") */
.chip-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:40px;padding:.45rem 1.05rem;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:transparent;color:var(--c-text);font-size:.8rem;font-weight:500;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.chip-btn:hover{background:#fff;color:var(--c-ink);border-color:#fff}
.chip-btn svg{width:15px;height:15px}
/* Small tag chip (like "Flash Sale") */
.tag{display:inline-block;font-size:.7rem;font-weight:500;letter-spacing:.02em;padding:.32rem .75rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--c-soft)}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}

/* Small per-section WhatsApp share button */
.wa-share{position:absolute;top:1.25rem;right:1.25rem;z-index:5;display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:.35rem .8rem .35rem .6rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--c-soft);font-size:.72rem;font-weight:500;text-decoration:none;transition:background .2s,color .2s}
.wa-share:hover{background:#fff;color:var(--c-ink)}
.wa-share svg{width:15px;height:15px;color:var(--c-whatsapp)}

/* ---------- Header and nav ---------- */
.site-header{position:sticky;top:0;z-index:100;height:var(--nav-h);background:rgba(18,8,31,.72);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site-header.scrolled{border-bottom-color:rgba(255,255,255,.08);background:rgba(18,8,31,.88)}
.nav{display:flex;align-items:center;justify-content:space-between;height:100%}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--c-text)}
/* SWAP LOGO: nav logo (transparent version for dark backgrounds) */
.brand img{height:30px;width:auto}
.brand span{font-family:var(--f-head);font-weight:500;font-size:.95rem;letter-spacing:-.02em;line-height:1.05}
.brand sup{font-size:.55rem;color:var(--c-hl);margin-left:2px}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);border-radius:12px;cursor:pointer;color:#fff}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{display:block;width:16px;height:1.5px;background:currentColor;border-radius:2px;position:relative;transition:transform .3s,background .3s}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0}
.nav-toggle .bars::before{top:-5px}.nav-toggle .bars::after{top:5px}
.nav-toggle[aria-expanded="true"] .bars{background:transparent}
.nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(5px) rotate(45deg);background:#fff}
.nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-5px) rotate(-45deg);background:#fff}
.nav-menu{position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--c-ink);border-bottom:1px solid rgba(255,255,255,.08);padding:1rem 1.25rem 1.75rem;display:none;flex-direction:column;max-height:calc(100vh - var(--nav-h));max-height:calc(var(--lvh,1vh) * 100 - var(--nav-h));overflow:auto;list-style:none;margin:0}
.nav-menu.open{display:flex}
.nav-menu a{display:flex;justify-content:space-between;align-items:center;padding:.95rem .25rem;border-bottom:1px solid rgba(255,255,255,.07);text-decoration:none;color:var(--c-text);font-family:var(--f-head);font-size:1.5rem;font-weight:400;letter-spacing:-.03em}
.nav-menu a::after{content:"\2192";font-size:1rem;color:var(--c-muted)}
.nav-menu a.active{color:var(--c-hl)}
.nav-menu .nav-give{margin-top:1.25rem;justify-content:center;gap:.75rem;border:0;border-radius:999px;background:#fff;color:var(--c-ink);font-family:var(--f-body);font-size:.9rem;font-weight:500;letter-spacing:0;min-height:52px}
.nav-menu .nav-give::after{color:var(--c-ink)}
@media (min-width:1120px){
  .nav-toggle{display:none}
  .nav-menu{position:static;display:flex;flex-direction:row;align-items:center;background:none;border:0;padding:0;max-height:none;overflow:visible;gap:.15rem}
  .nav-menu a{padding:.5rem .6rem;font-family:var(--f-body);font-size:.8rem;font-weight:500;letter-spacing:0;border:0;color:var(--c-soft)}
  .nav-menu a::after{content:none}
  .nav-menu a:hover,.nav-menu a.active{color:#fff}
  .nav-menu .nav-give{margin:0 0 0 .75rem;min-height:38px;padding:.4rem 1.1rem}
  .nav-menu .nav-give::after{content:"\2192";color:var(--c-ink)}
}

/* ---------- 1. Hero ---------- */
.hero{padding-top:clamp(2.75rem,8vw,5rem);padding-bottom:0;overflow:hidden;background:
  radial-gradient(70% 45% at 85% 78%, rgba(123,15,240,.32) 0%, transparent 70%),
  radial-gradient(50% 35% at 10% 0%, rgba(178,0,240,.14) 0%, transparent 70%),
  var(--c-ink)}
.hero-grid{display:grid;gap:2.5rem}
.hero h1{font-size:clamp(2.6rem,11.5vw,6.2rem);font-weight:400;letter-spacing:-.045em;line-height:.98;margin-bottom:.45em}
.hero .tagline{font-size:.95rem;color:var(--c-soft);max-width:38ch}
.scripture{font-family:var(--f-serif);font-style:italic;font-weight:500;color:var(--c-soft);font-size:1rem;line-height:1.5;margin:1.25rem 0 0;max-width:40ch}
.scripture cite{display:block;font-family:var(--f-body);font-style:normal;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);margin-top:.4rem}
/* Spec rows: label + description, two columns */
.specs{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1.25rem;margin:2.25rem 0 0;padding:1.5rem 0 0;border-top:1px solid rgba(255,255,255,.1)}
.specs div{display:flex;flex-direction:column;gap:.2rem}
.specs dt{font-family:var(--f-head);font-size:1.05rem;font-weight:500;color:#fff;letter-spacing:-.02em}
.specs dd{margin:0;font-size:.78rem;line-height:1.5;color:var(--c-muted)}
.countdown-wrap{margin:2rem 0;padding:1.25rem;border-radius:var(--r-lg);background:var(--c-ink-2);border:1px solid rgba(255,255,255,.08);max-width:520px}
.countdown-label{font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted);margin:0 0 .9rem}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem}
.countdown div{padding:.1rem 0;border-left:1px solid rgba(255,255,255,.1);padding-left:.75rem}
.countdown div:first-child{border-left:0;padding-left:0}
.countdown b{display:block;font-family:var(--f-head);font-weight:300;font-size:clamp(2rem,9vw,2.9rem);line-height:1;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.countdown span{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.year-status{display:none}
.year-status .big{font-family:var(--f-head);font-weight:300;font-size:clamp(2rem,8vw,2.9rem);letter-spacing:-.04em;line-height:1.05;color:#fff}
.year-status .sub{margin:.45rem 0 0;color:var(--c-muted);font-size:.82rem}
.year-progress{height:4px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin-top:1rem}
.year-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c-violet),var(--c-magenta));border-radius:99px;transition:width 1s ease}
/* Big hero visual: the stained-glass 30, cropped dramatically at the bottom edge */
.hero-visual{position:relative;margin:0 -1.25rem;height:clamp(300px,82vw,640px);overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.hero-visual img{width:min(118%,980px);max-width:none;transform:translateY(14%);filter:drop-shadow(0 30px 80px rgba(123,15,240,.45))}
.hero-visual::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(transparent,var(--c-ink));pointer-events:none}
@media (min-width:960px){
  .hero{padding-bottom:var(--space)}
  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:3rem}
  .hero-visual{margin:0;height:auto;overflow:visible;align-items:center}
  .hero-visual img{width:118%;transform:translateX(6%)}
  .hero-visual::after{content:none}
}

/* ---------- 2. Reveal video ---------- */
.video-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;background:#000}
.video-frame iframe,.video-frame .video-poster{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-poster{padding:0;cursor:pointer;background:#000;display:block}
.video-poster img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.6);transition:opacity .4s,transform .8s var(--ease)}
.video-poster:hover img{opacity:.42;transform:scale(1.03)}
.video-poster .play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;background:#fff;display:grid;place-items:center}
.video-poster .play svg{width:26px;height:26px;fill:var(--c-ink);margin-left:4px}
.video-poster .cap{position:absolute;left:1.25rem;bottom:1.1rem;color:#fff;font-size:.78rem;font-weight:500;text-align:left}
.video-poster .cap .tag{margin-right:.5rem}

/* ---------- 3. Events (product-card style) ---------- */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.25rem,5vw,3rem) 1.5rem}
@media (min-width:640px){.grid-2,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:flex;flex-direction:column}
.card-tile{position:relative;background:#fff;border-radius:var(--r-lg);padding:.5rem;aspect-ratio:1/1}
.card-tile img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r-lg) - 6px)}
.card-tile .tag{position:absolute;top:1.1rem;left:1.1rem;background:rgba(255,255,255,.92);border-color:transparent;color:var(--c-ink);backdrop-filter:blur(6px)}
.card-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-top:1.1rem}
.card-foot h3{margin:0;font-size:1.2rem}
.card-meta{margin:.35rem 0 0;font-size:.78rem;color:var(--c-muted);line-height:1.5}
.card-desc{margin:.75rem 0 0;font-size:.85rem;color:var(--c-soft)}
.card-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.6rem}
.cal-menu{position:relative}
.cal-menu-list{position:absolute;bottom:calc(100% + 6px);left:0;background:var(--c-ink-2);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:.4rem;min-width:220px;display:none;z-index:10;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.cal-menu-list.open{display:block}
.cal-menu-list a,.cal-menu-list button{display:block;width:100%;text-align:left;padding:.7rem .85rem;border:0;background:none;color:#fff;text-decoration:none;font-size:.85rem;border-radius:10px;cursor:pointer}
.cal-menu-list a:hover,.cal-menu-list button:hover{background:rgba(255,255,255,.08)}

/* ---------- 4. Timeline (inside a light panel) ---------- */
.timeline{position:relative}
.timeline::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:1px;background:rgba(18,8,31,.16)}
.timeline-progress{position:absolute;left:5px;top:0;width:3px;height:0;background:linear-gradient(var(--c-violet),var(--c-magenta));border-radius:3px}
.tl-item{position:relative;padding-left:2.25rem;margin-bottom:3.5rem}
.tl-item:last-child{margin-bottom:0}
.tl-dot{position:absolute;left:0;top:.6rem;width:13px;height:13px;border-radius:50%;background:var(--c-lilac);border:2px solid var(--c-violet)}
.tl-year{font-family:var(--f-head);font-size:clamp(2.6rem,10vw,4rem);font-weight:300;letter-spacing:-.05em;color:var(--c-ink);line-height:1}
.tl-text h3{margin:.4rem 0 .45rem;color:var(--c-violet)}
.tl-text p{font-size:.85rem;color:var(--c-panel-muted);max-width:42ch}
.tl-card{display:grid;gap:1.25rem}
.tl-media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg);
  /* Black-and-white to colour: JS moves --gs from 1 to 0 as the image scrolls into view */
  filter:grayscale(var(--gs,1)) contrast(calc(1 + var(--gs,1) * .08));transition:filter .15s linear}
@media (min-width:900px){
  .timeline::before,.timeline-progress{left:50%;transform:translateX(-50%)}
  .tl-item{padding-left:0}
  .tl-card{grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
  .tl-dot{left:50%;transform:translate(-50%,-50%);top:50%}
  .tl-text{text-align:right}
  .tl-text p{margin-left:auto}
  .tl-item:nth-child(odd) .tl-text{grid-column:2;grid-row:1;text-align:left}
  .tl-item:nth-child(odd) .tl-text p{margin-left:0}
  .tl-item:nth-child(odd) .tl-media{grid-column:1;grid-row:1}
}

/* ---------- Forms (dark by default, light inside .panel) ---------- */
.two-col{display:grid;gap:2.5rem}
@media (min-width:960px){.two-col{grid-template-columns:400px 1fr;align-items:start}}
.form-card{background:var(--c-ink-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:clamp(1.25rem,5vw,2rem)}
.form-card h3{font-size:1.5rem;font-weight:400;letter-spacing:-.03em;margin-bottom:1.25rem}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--c-soft)}
.field .hint{font-size:.74rem;color:var(--c-muted)}
.field input,.field select,.field textarea{width:100%;padding:.8rem 1rem;border:1px solid var(--c-ink-3);border-radius:14px;background:var(--c-ink);color:#fff;min-height:48px;font-size:16px}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--c-soft) 50%),linear-gradient(135deg,var(--c-soft) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.5rem}
.field select option{background:var(--c-ink-2);color:#fff}
.field input[type=file]{padding:.6rem;font-size:.8rem;color:var(--c-muted)}
.field input[type=file]::file-selector-button{border:0;border-radius:999px;background:#fff;color:var(--c-ink);padding:.45rem .9rem;margin-right:.75rem;font-weight:500;cursor:pointer}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#7D6E9B}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--c-hl);box-shadow:0 0 0 3px rgba(201,162,255,.2)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--c-error)}
.field .err{color:var(--c-error);font-size:.78rem;font-weight:500}
.field .err:empty{display:none}
.field-row{display:grid;gap:0 1rem}
@media (min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
.photo-preview{display:none;margin-top:.5rem;border-radius:12px;max-height:200px;object-fit:cover;width:100%}
.form-status{margin-top:1rem;padding:.85rem 1rem;border-radius:14px;font-size:.85rem;font-weight:500;display:none}
.form-status.ok{display:block;background:rgba(155,231,189,.1);color:var(--c-success);border:1px solid rgba(155,231,189,.25)}
.form-status.bad{display:block;background:rgba(255,157,176,.1);color:var(--c-error);border:1px solid rgba(255,157,176,.25)}

/* ---------- 5. Memory wall ---------- */
.memory-grid{columns:1;column-gap:1.25rem}
@media (min-width:640px){.memory-grid{columns:2}}
.memory{break-inside:avoid;margin-bottom:1.25rem;background:var(--c-ink-2);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-lg);overflow:hidden;padding:.5rem}
.memory img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--r-lg) - 6px)}
.memory .mbody{padding:1rem .85rem .85rem}
.memory blockquote{margin:0 0 .8rem;font-family:var(--f-head);font-size:1.1rem;font-weight:400;letter-spacing:-.02em;line-height:1.35;color:#fff}
.memory .who{font-size:.74rem;color:var(--c-muted);letter-spacing:.02em}
.memory .mine{display:inline-block;margin-left:.5rem;font-size:.66rem;background:rgba(201,162,255,.14);color:var(--c-hl);padding:.12rem .55rem;border-radius:99px}

/* ---------- 6. Impact ---------- */
.impact{text-align:center}
.impact .tag{margin-bottom:1.5rem}
.impact h2{max-width:14ch;margin-inline:auto}
.progress-card{max-width:620px;margin:2.5rem auto 0;text-align:left}
.progress-nums{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.progress-nums .raised{font-family:var(--f-head);font-size:clamp(2.2rem,9vw,3.4rem);font-weight:300;letter-spacing:-.045em;color:#fff;line-height:1}
.progress-nums .goal{color:var(--c-muted);font-size:.8rem}
.progress-nums .goal strong{color:var(--c-soft);font-weight:500}
.progress{height:6px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--c-violet),var(--c-purple),var(--c-magenta));border-radius:99px;transition:width 1.8s var(--ease)}
.progress-foot{display:flex;justify-content:space-between;margin-top:.7rem;font-size:.75rem;color:var(--c-muted)}
.impact .specs{grid-template-columns:repeat(3,1fr);max-width:620px;margin:2rem auto 2.5rem;text-align:left}
.impact .btn-row{justify-content:center}
.impact-img{margin-top:clamp(3rem,8vw,5rem);width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-xl)}
@media (min-width:900px){.impact-img{aspect-ratio:21/9}}

/* ---------- 7. Awards ---------- */
.awards-aside img{border-radius:var(--r-lg);aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:1.75rem}
.awards-aside h3{margin-bottom:1rem}
.cat-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.cat-list li{font-size:.78rem;font-weight:500;padding:.45rem .9rem;border-radius:999px;border:1px solid #CDB8EA;background:#fff;color:var(--c-ink)}

/* ---------- 8. Branches (monochrome "trusted by" grid) ---------- */
.branch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);overflow:hidden}
@media (min-width:900px){.branch-grid{grid-template-columns:repeat(3,1fr)}}
.branch{background:var(--c-ink);padding:clamp(1.25rem,4vw,2rem);min-height:180px;display:flex;flex-direction:column;transition:background .3s}
.branch:hover{background:var(--c-ink-2)}
.branch h3{font-size:clamp(1.25rem,4.6vw,1.75rem);font-weight:400;letter-spacing:-.035em;color:#BDB2D2;margin:0 0 .2rem;transition:color .3s}
.branch:hover h3{color:#fff}
.branch .region{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);margin-bottom:1rem}
.branch ul{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:.2rem}
.branch li{font-size:.76rem;color:var(--c-muted);line-height:1.45}
.branch li::before{content:"\2014\00a0";color:var(--c-ink-3)}

/* ---------- 9. Media kit (inside a light panel) ---------- */
.kit{display:flex;flex-direction:column}
.kit-preview{height:280px;border-radius:var(--r-lg);background:#fff;display:flex;align-items:center;justify-content:center;padding:1.5rem;overflow:hidden}
.kit-preview.dark{background:var(--c-ink)}
.kit-preview img{max-height:100%;max-width:100%;width:auto;object-fit:contain;border-radius:10px}
.kit-preview.photo{padding:.5rem}
.kit-preview.photo img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r-lg) - 6px)}
.kit-body{display:flex;flex-direction:column;gap:.35rem;flex:1;padding-top:1.1rem}
.kit-body h3{margin:0}
.kit-body p{font-size:.8rem;color:var(--c-panel-muted);margin:0 0 .9rem}
.kit-body .btn-row{margin-top:auto;gap:.5rem 1.25rem}

/* ---------- 10. Footer ---------- */
.site-footer{position:relative;background:var(--c-ink);padding:var(--space) 0 2rem;text-align:center;border-top:1px solid rgba(255,255,255,.06)}
/* SWAP LOGO: footer logo */
.footer-logo{width:clamp(150px,40vw,220px);margin:0 auto 1.5rem;filter:drop-shadow(0 18px 50px rgba(123,15,240,.4))}
.footer-word{font-family:var(--f-head);font-size:clamp(1.9rem,7.5vw,3.2rem);font-weight:400;letter-spacing:-.045em;color:#fff;line-height:1;margin:0 0 .6rem}
.footer-word sup{font-size:.35em;color:var(--c-hl);vertical-align:super}
.footer-tag{font-size:.85rem;color:var(--c-muted);max-width:40ch;margin:0 auto 2.25rem}
.footer-links{list-style:none;margin:0 auto 2.25rem;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.5rem}
.footer-links a{font-size:.8rem;color:var(--c-soft);text-decoration:none;display:inline-block;padding:.5rem 0}
.footer-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.footer-contact{font-size:.8rem;color:var(--c-muted);display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.5rem;margin-bottom:1.75rem}
.footer-contact a{color:var(--c-soft)}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2.5rem}
.socials a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);transition:background .2s,border-color .2s}
.socials a:hover{background:#fff;border-color:#fff}
.socials svg{width:17px;height:17px;fill:var(--c-soft)}
.socials a:hover svg{fill:var(--c-ink)}
.copyright{border-top:1px solid rgba(255,255,255,.08);padding-top:1.5rem;font-size:.72rem;color:var(--c-muted);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
.copyright a{color:var(--c-soft)}

/* ---------- Modals (native <dialog>: ESC closes, focus is managed) ---------- */
dialog{border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:0;width:min(560px,calc(100% - 1.5rem));max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);background:var(--c-ink-2);color:var(--c-soft);box-shadow:0 40px 100px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(8,3,15,.75);backdrop-filter:blur(6px)}
.modal-inner{padding:clamp(1.25rem,5vw,2rem)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.75rem}
.modal-head h2{font-size:2rem;margin:0}
.modal-close{border:1px solid rgba(255,255,255,.16);background:transparent;color:#fff;width:44px;height:44px;border-radius:50%;font-size:1.3rem;line-height:1;cursor:pointer;flex:none}
.modal-close:hover{background:#fff;color:var(--c-ink)}
.modal-sub{font-size:.82rem;color:var(--c-hl);margin-bottom:1.25rem}
.momo-list{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.6rem}
.momo-list li{border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:1rem 1.1rem;display:grid;grid-template-columns:1fr auto;gap:.1rem 1rem;align-items:center}
.momo-list .net{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.momo-list .num{font-family:var(--f-head);font-size:1.5rem;font-weight:400;letter-spacing:-.02em;color:#fff;grid-column:1}
.momo-list .mid{font-size:.75rem;color:var(--c-muted);grid-column:1}
.copy-btn{grid-column:2;grid-row:1/4}
.note{font-size:.8rem;color:var(--c-soft);background:rgba(255,255,255,.05);border-radius:14px;padding:.85rem 1rem;margin:0}
.note strong,.modal-inner p strong{color:#fff}

/* ---------- Scroll reveal (switched off for reduced motion) ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* =====================================================================
   GLASS LAYER
   Frosted, translucent surfaces over slow-moving ambient colour orbs.
   SWAP GLASS: tweak these to make the glass clearer or more frosted.
   ===================================================================== */
:root{
  --glass-fill:linear-gradient(150deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.05) 55%,rgba(255,255,255,.07) 100%);
  --glass-fill-strong:linear-gradient(150deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.06) 60%,rgba(255,255,255,.08) 100%);
  --glass-edge:linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,255,255,.08) 38%,rgba(255,255,255,.04) 62%,rgba(201,162,255,.38));
  --glass-blur:blur(20px) saturate(165%);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.03),0 30px 70px -28px rgba(4,0,12,.75);
  --glass-fallback:rgba(32,16,56,.94);  /* used when the browser has no backdrop-filter */
}
html,body{background:var(--c-ink)}
body{position:relative;overflow-x:hidden}
/* Clip sideways overflow on both html and body (iOS ignores it on body alone) without creating a scroll box */
@supports (overflow:clip){html,body{overflow-x:clip}}
main,.site-footer{position:relative;z-index:1}
section,.alt,.hero,.site-footer{background:transparent}

/* ---------- Ambient orbs (fixed, behind everything; gradients only, no filter blur, so it's cheap on phones) ---------- */
/* Stable viewport unit: 1lvh = 1% of the tallest (toolbar-hidden) screen, so the glow never resizes when a phone's
   address bar hides or shows while scrolling. Older browsers fall back to vh. */
:root{--lvh:1vh}
@supports (height:1lvh){:root{--lvh:1lvh}}
.ambient{position:fixed;top:0;left:0;right:0;height:calc(var(--lvh) * 100);z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;will-change:transform;opacity:.75}
.orb.o1{width:max(70vw,calc(var(--lvh) * 70));height:max(70vw,calc(var(--lvh) * 70));left:min(-22vw,calc(var(--lvh) * -22));top:min(-26vw,calc(var(--lvh) * -26));background:radial-gradient(closest-side,rgba(123,15,240,.55),rgba(123,15,240,.18) 55%,transparent 100%);animation:drift1 38s ease-in-out infinite alternate}
.orb.o2{width:max(60vw,calc(var(--lvh) * 60));height:max(60vw,calc(var(--lvh) * 60));right:min(-24vw,calc(var(--lvh) * -24));top:calc(var(--lvh) * 18);background:radial-gradient(closest-side,rgba(178,0,240,.42),rgba(178,0,240,.12) 55%,transparent 100%);animation:drift2 46s ease-in-out infinite alternate}
.orb.o3{width:max(55vw,calc(var(--lvh) * 55));height:max(55vw,calc(var(--lvh) * 55));left:10vw;bottom:min(-34vw,calc(var(--lvh) * -34));background:radial-gradient(closest-side,rgba(61,26,120,.85),rgba(61,26,120,.25) 55%,transparent 100%);animation:drift3 52s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(14vw,calc(var(--lvh) * 10),0) scale(1.08)}}
@keyframes drift2{to{transform:translate3d(-12vw,calc(var(--lvh) * 16),0) scale(.92)}}
@keyframes drift3{to{transform:translate3d(10vw,calc(var(--lvh) * -14),0) scale(1.1)}}
/* Subtle film grain over the orbs */
.ambient::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Glass surfaces ---------- */
.glass,.panel,.form-card,.memory,.card-tile,.countdown-wrap,.kit-preview,.momo-list li,.teaser,.info-card,.branch-grid,.video-frame,.page-badge{
  position:relative;background:var(--glass-fill);border:0;box-shadow:var(--glass-shadow)}
dialog,.cal-menu-list{border:0;box-shadow:var(--glass-shadow)}
/* 1px light gradient border drawn with a masked pseudo-element */
.glass::before,.panel::before,.form-card::before,.memory::before,.card-tile::before,.countdown-wrap::before,.kit-preview::before,.momo-list li::before,.teaser::before,.info-card::before,dialog::before,.cal-menu-list::before,.branch-grid::before,.video-frame::before,.page-badge::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--glass-edge);pointer-events:none;z-index:2;
  -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 exclude,linear-gradient(#000 0 0)}
/* Only the big surfaces get a real backdrop blur (keeps mobile scrolling smooth) */
.blur,.panel,.form-card,.countdown-wrap,dialog,.site-header,.nav-menu,.cal-menu-list,.page-badge{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}

.panel{color:var(--c-soft);border-radius:var(--r-xl);padding:clamp(1.5rem,6vw,4.5rem);background:var(--glass-fill-strong)}
@media (max-width:599px){.panel-wrap{width:calc(100% - 1rem)}}

/* Frosted lilac variant (light glass, dark text) */
.glass-lilac{position:relative;border-radius:var(--r-xl);padding:clamp(1.75rem,6vw,4rem);color:var(--c-ink);
  background:linear-gradient(150deg,rgba(246,233,251,.92),rgba(233,214,250,.80));box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 40px 90px -30px rgba(123,15,240,.55);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.glass-lilac h2,.glass-lilac h3{color:var(--c-ink)}
.glass-lilac .hl{color:var(--c-violet)}
.glass-lilac .label,.glass-lilac .lead,.glass-lilac p{color:var(--c-panel-muted)}
.glass-lilac .text-link{color:var(--c-ink)}

/* Header: glass bar */
.site-header{background:rgba(18,8,31,.42);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:inset 0 -1px 0 rgba(255,255,255,.03)}
.site-header.scrolled{background:rgba(18,8,31,.62);border-bottom-color:rgba(255,255,255,.12)}
.nav-menu{background:rgba(22,10,40,.86);border-bottom:1px solid rgba(255,255,255,.1)}
.nav-menu a.active,.nav-menu a[aria-current="page"]{color:var(--c-hl)}
@media (min-width:1120px){
  .nav-menu{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-menu a{border-radius:999px;padding:.45rem .7rem}
  .nav-menu a:hover{background:rgba(255,255,255,.06)}
  .nav-menu a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.18)}
}

/* Glass secondary buttons */
.chip-btn,.wa-share,.tag,.nav-toggle,.modal-close,.socials a{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.chip-btn:hover,.wa-share:hover,.socials a:hover,.modal-close:hover{background:#fff;color:var(--c-ink);border-color:#fff}
.btn-glass{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:.4rem 1.4rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);color:#fff;font-size:.875rem;font-weight:500;text-decoration:none;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .25s,border-color .25s}
.btn-glass:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.btn-glass svg{width:16px;height:16px}
.pill{box-shadow:0 10px 30px -10px rgba(155,31,245,.6),inset 0 -2px 0 rgba(18,8,31,.06)}

/* Forms on glass */
.form-card{border-radius:var(--r-lg)}
.field input,.field select,.field textarea{background-color:rgba(10,4,20,.45);border:1px solid rgba(255,255,255,.14)}
.field select option{background:#1A0B2E}

/* Cards */
.card-tile{padding:.55rem;border-radius:var(--r-lg)}
.card-tile .tag{background:rgba(18,8,31,.55);color:#fff;border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.memory{border-radius:var(--r-lg)}
.countdown-wrap{background:var(--glass-fill-strong)}
.cal-menu-list{background:rgba(26,11,46,.82)}

/* Timeline on dark glass */
.timeline::before{background:rgba(255,255,255,.14)}
.tl-dot{background:var(--c-ink);border-color:var(--c-hl);box-shadow:0 0 0 4px rgba(155,31,245,.18),0 0 18px rgba(178,0,240,.6)}
.tl-year{color:#fff}
.tl-text h3{color:var(--c-hl)}
.tl-text p{color:var(--c-soft)}
.tl-media img{box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}

/* Awards chips, branches, media kit */
.cat-list li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.branch-grid{gap:1px;background:var(--glass-fill);border:0}
.branch{background:rgba(18,8,31,.35)}
.branch:hover{background:rgba(255,255,255,.07)}
.branch h3{color:#D6CCE8}
.branch li::before{color:var(--c-hl)}
.kit-preview{background:rgba(255,255,255,.9)}
.kit-preview.dark{background:var(--glass-fill)}
.kit-preview.photo{background:var(--glass-fill)}
.kit-body p{color:var(--c-muted)}

/* Video frame */
.video-frame{background:#000;padding:0}
.video-frame::before{z-index:3}

/* Modals */
dialog{background:linear-gradient(160deg,rgba(46,22,82,.78),rgba(22,10,40,.86));color:var(--c-soft);border-radius:var(--r-xl);box-shadow:var(--glass-shadow),0 50px 120px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(8,3,15,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.momo-list li{border-radius:var(--r-md)}
.note{background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}

/* Footer on glass */
.site-footer{border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(rgba(18,8,31,0),rgba(18,8,31,.6))}

/* ---------- Page banner (every inner page) ---------- */
.page-hero{padding-top:clamp(4.5rem,9vw,6.5rem);padding-bottom:clamp(2.5rem,6vw,4rem)}
.page-hero .ph-grid{display:grid;gap:2rem;align-items:center}
.crumbs{display:flex;gap:.5rem;align-items:center;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted);margin:0 0 1.1rem}
.crumbs a{color:var(--c-soft);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.page-hero h1{font-size:clamp(2.6rem,10vw,5.6rem);font-weight:400;letter-spacing:-.045em;line-height:.98;margin:0 0 .4em;max-width:13ch}
.page-hero .lead{font-size:1rem;color:var(--c-soft);max-width:52ch;margin-bottom:1.75rem}
.page-badge{display:none;width:clamp(220px,26vw,320px);aspect-ratio:1;border-radius:50%;place-items:center;margin-left:auto}
.page-badge img{width:72%;filter:drop-shadow(0 20px 40px rgba(123,15,240,.55))}
.page-badge .num{font-family:var(--f-head);font-weight:300;font-size:clamp(4rem,8vw,6.5rem);letter-spacing:-.06em;color:#fff;line-height:1}
@media (min-width:900px){.page-hero .ph-grid{grid-template-columns:1fr auto}.page-badge{display:grid}}
.section-tight{padding-top:0}

/* ---------- Home: teasers ---------- */
.teaser-grid{display:grid;gap:1rem}
@media (min-width:640px){.teaser-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.teaser-grid{grid-template-columns:repeat(4,1fr)}}
.teaser{display:flex;flex-direction:column;gap:.6rem;min-height:220px;padding:1.5rem;border-radius:var(--r-lg);text-decoration:none;color:var(--c-soft);transition:transform .35s var(--ease),box-shadow .35s}
.teaser:hover{transform:translateY(-4px);box-shadow:var(--glass-shadow),0 30px 60px -20px rgba(123,15,240,.55)}
.teaser .t-num{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.teaser h3{font-size:1.4rem;font-weight:400;letter-spacing:-.03em;margin:.25rem 0 0}
.teaser p{font-size:.84rem;color:var(--c-soft);margin:0}
.teaser .go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:.8rem;font-weight:500;color:#fff}
.teaser .go i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--c-ink);font-style:normal;transition:transform .25s var(--ease)}
.teaser:hover .go i{transform:rotate(-45deg)}
.teaser .go svg{width:14px;height:14px}
.teaser.wide{min-height:260px}
@media (min-width:1000px){.teaser.wide{grid-column:span 2}}
.teaser .mini-progress{height:5px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:.5rem}
.teaser .mini-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--c-violet),var(--c-magenta));border-radius:99px}
.up-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.up-item{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1rem 1.1rem;border-radius:var(--r-md);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);text-decoration:none;color:var(--c-soft);transition:background .25s}
.up-item:hover{background:rgba(255,255,255,.1)}
.up-date{display:grid;place-items:center;width:58px;height:58px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.15);font-family:var(--f-head);line-height:1}
.up-date b{font-size:1.4rem;font-weight:400;color:#fff}
.up-date span{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.up-item h3{font-size:1rem;margin:0 0 .15rem}
.up-item p{font-size:.76rem;color:var(--c-muted);margin:0}
.cta-band{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.cta-band{grid-template-columns:1.3fr auto}}

/* ---------- Contact ---------- */
.info-grid{display:grid;gap:1rem}
@media (min-width:640px){.info-grid{grid-template-columns:repeat(2,1fr)}}
.info-card{border-radius:var(--r-lg);padding:1.5rem}
.info-card .label{margin-bottom:.6rem}
.info-card p{margin:0;color:#fff;font-family:var(--f-head);font-size:1.15rem;letter-spacing:-.02em;line-height:1.35}
.info-card a{color:#fff;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.info-card small{display:block;margin-top:.4rem;color:var(--c-muted);font-size:.78rem;font-family:var(--f-body);letter-spacing:0}
.contact-socials{justify-content:flex-start;margin:0}
.map-frame{margin-top:1rem;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:rgba(255,255,255,.05)}
.map-frame iframe{width:100%;height:100%;border:0;filter:grayscale(.6) invert(.9) hue-rotate(200deg) contrast(.9)}

/* ---------- Fallback: browsers without backdrop-filter get solid, readable surfaces ---------- */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .panel,.form-card,.countdown-wrap,dialog,.cal-menu-list,.page-badge{background:var(--glass-fallback)}
  .site-header,.site-header.scrolled,.nav-menu{background:rgba(18,8,31,.96)}
  .glass-lilac{background:var(--c-lilac)}
  .btn-glass{background:rgba(60,30,100,.9)}
}

/* ---------- Reduced motion: orbs stay still ---------- */
@media (prefers-reduced-motion:reduce){.orb{animation:none!important}.teaser:hover{transform:none}}

/* Home: keep the floating Share chip clear of the eyebrow on phones */
@media (max-width:640px){.hero{padding-top:4.5rem}}

/* Mobile menu: near-solid so links stay readable over page content (nested backdrop blur is unreliable) */
@media (max-width:1119px){.nav-menu{background:#1a0b2e radial-gradient(120% 60% at 100% 0,rgba(155,31,245,.18),transparent 60%)}}

/* ---------- Co-branded nav lockup: church logo | divider | 30 logo ---------- */
.brand-lockup{gap:.85rem;flex-shrink:0}
.brand-lockup img{display:block;width:auto;max-width:none}
.brand-lockup .brand-church{height:36px;filter:drop-shadow(0 1px 8px rgba(0,0,0,.25))}
.brand-lockup .brand-full{display:none}
.brand-lockup .brand-30{height:36px;filter:drop-shadow(0 4px 14px rgba(155,31,245,.35))}
.brand-div{width:1px;height:28px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.45),transparent);flex:none}
@media (min-width:560px){.brand-lockup .brand-full{display:block;height:34px}.brand-lockup .brand-mark{display:none}.brand-lockup .brand-30{height:38px}}
@media (min-width:1120px) and (max-width:1279px){.brand-lockup{gap:.6rem}.brand-lockup .brand-full{height:28px}.brand-lockup .brand-30{height:32px}.brand-div{height:24px}}

/* ---------- Footer church logo ---------- */
.footer-church{display:block;width:clamp(210px,55vw,300px);height:auto;margin:0 auto 1.75rem;opacity:.95}
.footer-word{font-size:clamp(1.3rem,4.5vw,1.9rem)}
.footer-word sup{font-size:.5em;letter-spacing:.02em;margin-left:.35em}

/* ---------- Native reveal video ---------- */
.video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;display:block}
#reveal-video{object-fit:contain}
.video-poster[hidden]{display:none}
.video-poster.on-video{background:linear-gradient(180deg,rgba(18,8,31,0) 50%,rgba(18,8,31,.6));z-index:2}
.video-poster.on-video .play{box-shadow:0 10px 40px rgba(0,0,0,.35);transition:transform .3s var(--ease)}
.video-poster.on-video:hover .play{transform:scale(1.06)}
.video-poster img{opacity:.8;filter:none}
.video-poster:hover img{opacity:.68}

/* ---------- Media kit: wide video card ---------- */
@media (min-width:1000px){.kit-grid .kit-wide{grid-column:span 2}}
.kit-wide .kit-preview.photo img{object-position:center}
.site-footer .footer-logo{width:clamp(120px,32vw,170px)}

/* ---------- GO interview (story page) ---------- */
#go-video{object-fit:contain}
.interview{display:grid;gap:1.25rem}
@media (min-width:1000px){.interview{grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);align-items:start}}
.interview-video{box-shadow:var(--glass-shadow),0 40px 90px -30px rgba(123,15,240,.55)}
.noscript-note{position:absolute;left:1rem;right:1rem;bottom:1rem;margin:0;z-index:4;color:#fff;font-size:.85rem}
.chapters{position:relative;border-radius:var(--r-xl);padding:1.25rem;background:var(--glass-fill-strong);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.chapters::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--glass-edge);pointer-events:none;
  -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 exclude,linear-gradient(#000 0 0)}
.chapters-title{font-family:var(--f-body);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted);margin:.25rem .5rem .9rem}
.chapter-list{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.chapter{all:unset;box-sizing:border-box;display:grid;grid-template-columns:3.4rem 1fr;gap:.75rem;align-items:start;width:100%;padding:.75rem .8rem;border-radius:var(--r-md);cursor:pointer;color:var(--c-soft);transition:background .25s,box-shadow .25s}
.chapter:hover{background:rgba(255,255,255,.07)}
.chapter:focus-visible{outline:2px solid var(--c-hl);outline-offset:2px}
.chapter.is-current{background:rgba(155,31,245,.22);box-shadow:inset 0 0 0 1px rgba(201,162,255,.35)}
.ch-time{font-family:var(--f-head);font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:500;color:var(--c-hl);padding-top:.1rem}
.ch-body{display:grid;gap:.2rem}
.ch-title{font-family:var(--f-head);font-size:.98rem;line-height:1.3;letter-spacing:-.015em;color:#fff}
.ch-sub{font-size:.78rem;color:var(--c-muted)}
.chapter.is-current .ch-sub{color:var(--c-soft)}

/* Serif pull-quotes */
.quote-grid{display:grid;gap:1.25rem}
@media (min-width:860px){.quote-grid{grid-template-columns:repeat(3,1fr)}}
.pull-quote{position:relative;margin:0;border-radius:var(--r-xl);padding:clamp(1.5rem,4vw,2.25rem);background:var(--glass-fill);box-shadow:var(--glass-shadow);display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem}
.pull-quote::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--glass-edge);pointer-events:none;
  -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 exclude,linear-gradient(#000 0 0)}
.pull-quote blockquote{margin:0;font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:clamp(1.2rem,2.2vw,1.45rem);line-height:1.4;color:#fff}
.pull-quote figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.quote-jump{all:unset;cursor:pointer;font-size:.72rem;letter-spacing:.06em;text-transform:none;color:#fff;padding:.4rem .8rem;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.quote-jump:hover{background:rgba(255,255,255,.18)}
.quote-jump:focus-visible{outline:2px solid var(--c-hl);outline-offset:2px}

/* Vision band and timeline word labels */
.vision-band{text-align:center}
.vision-band h2{font-size:clamp(2.6rem,8vw,4.5rem)}
.vision-band .vision-lead{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.45;color:var(--c-ink);max-width:36ch;margin:0 auto 1rem}
.vision-band p:last-child{max-width:56ch;margin:0 auto}
.tl-year.tl-label{font-size:clamp(1.7rem,5.5vw,2.5rem);letter-spacing:-.035em;line-height:1.05}

/* ---------- GO on the home page ---------- */
.go-home{align-items:center}
@media (min-width:960px){.go-home{grid-template-columns:440px 1fr}}
.go-quote{margin:1rem 0 0;font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:clamp(1.15rem,2.2vw,1.35rem);line-height:1.45;color:#fff;max-width:36ch}
.go-quote cite{display:block;font-family:var(--f-body);font-style:normal;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);margin-top:.7rem}
.vision-line{margin:1.5rem 0 1.75rem;padding:1rem 1.15rem;border-radius:var(--r-md);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:.9rem;color:var(--c-soft);max-width:40ch}
.vision-line .label{margin-bottom:.35rem}
.vision-line strong{color:#fff;font-family:var(--f-head);font-weight:500}
.go-highlight video{object-fit:contain}

/* ---------- Reveal page link to the interview ---------- */
.go-link-card{display:grid;grid-template-columns:1fr;gap:0;border-radius:var(--r-xl);overflow:hidden;text-decoration:none;color:inherit;transition:transform .4s var(--ease),box-shadow .4s}
.go-link-card:hover{transform:translateY(-3px);box-shadow:var(--glass-shadow),0 30px 60px -20px rgba(123,15,240,.55)}
.go-link-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.go-link-text{display:grid;gap:.35rem;padding:1.4rem 1.5rem 1.6rem}
.go-link-text .label{margin-bottom:.2rem}
.go-link-title{font-family:var(--f-head);font-size:clamp(1.3rem,3vw,1.75rem);letter-spacing:-.03em;line-height:1.15;color:#fff}
.go-link-meta{font-size:.82rem;color:var(--c-muted)}
.go-link-card .play{display:none}
@media (min-width:760px){
  .go-link-card{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto;align-items:center}
  .go-link-card img{height:100%;aspect-ratio:auto;min-height:200px}
  .go-link-text{padding:1.75rem 1rem 1.75rem 2rem}
  .go-link-card .play{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;margin-right:2rem}
  .go-link-card .play svg{width:22px;height:22px;fill:var(--c-ink);margin-left:3px}
}

/* =====================================================================
   HOME HERO: COVERFLOW VIDEO STRIP (9 purple-graded clips)
   main.js drives every card per frame from its place on a 3D arc (spring motion):
   translate / turn / depth / lean / stretch on .car-slide, opacity on .car-dim, .car-glow,
   .car-floor and .car-sheen, parallax + Ken Burns on the video. Transform + opacity only.
   ===================================================================== */
.hero-car{position:relative;padding:clamp(.75rem,2.5vw,1.5rem) 0 0;overflow:hidden}
.car{--cr:26px;--cw:82vw;--ch:min(calc(82vw * 16 / 9),calc(var(--lvh) * 100 - var(--nav-h) - 140px));position:relative}
.car-stage{position:relative;height:calc(var(--ch) + 2.5rem);perspective:1100px;perspective-origin:50% 45%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.car-track{position:absolute;inset:0;transform-style:preserve-3d}
.car-slide{position:absolute;left:50%;top:1.1rem;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);
  will-change:transform,opacity;transform-origin:50% 50%;backface-visibility:hidden;opacity:0;
  border-radius:var(--cr);box-shadow:0 30px 60px -30px rgba(4,0,12,.9)}
/* Rounded clip that survives 3D transforms and composited <video> layers (Chrome + Safari):
   overflow+radius alone is dropped when the video gets its own GPU layer, so the card also
   clips with clip-path and a mask, and every layer inside repeats the radius. */
.car-card{position:absolute;inset:0;border-radius:var(--cr);overflow:hidden;background:#140826;isolation:isolate;
  clip-path:inset(0 round var(--cr));-webkit-clip-path:inset(0 round var(--cr));
  -webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:linear-gradient(#000,#000);
  transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.25)}
.car-card > *{border-radius:inherit}
.car-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;padding:1px;
  background:linear-gradient(145deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 35%,rgba(255,255,255,.03) 65%,rgba(201,162,255,.45));
  -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 exclude,linear-gradient(#000 0 0)}
.car-card video{position:absolute;inset:0 -6%;width:112%;height:100%;object-fit:cover;object-position:50% 40%;display:block;background:#140826;will-change:transform;transform-origin:50% 45%;border-radius:inherit;-webkit-clip-path:none}
/* light band that sweeps across a card while it travels */
.car-sheen{position:absolute;inset:-10% -40%;z-index:2;pointer-events:none;opacity:0;will-change:transform,opacity;mix-blend-mode:screen;
  background:linear-gradient(103deg,transparent 32%,rgba(178,0,240,.22) 42%,rgba(232,200,255,.55) 49%,rgba(255,255,255,.7) 50%,rgba(201,140,255,.32) 56%,transparent 68%)}
/* soft violet pool of light under the active card (a stand-in for a reflection) */
.car-floor{position:absolute;left:8%;right:8%;top:calc(100% - 4%);height:16%;z-index:-1;pointer-events:none;opacity:0;will-change:opacity;
  background:radial-gradient(50% 50% at 50% 30%,rgba(201,140,255,.55),rgba(155,31,245,.22) 45%,rgba(123,15,240,0) 75%);filter:blur(14px)}
/* landing flash inside the card */
.car-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;border-radius:inherit;
  background:radial-gradient(70% 60% at 50% 45%,rgba(225,180,255,.38),rgba(178,0,240,.12) 55%,transparent 80%);mix-blend-mode:screen}
.car-slide.bloom .car-card::before{animation:carFlash .9s cubic-bezier(.22,.8,.2,1)}
@keyframes carFlash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
/* neighbour dimming: a violet veil whose opacity follows distance from centre */
.car-dim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(26,10,48,.78),rgba(14,6,28,.9));opacity:.6;will-change:opacity}
/* soft purple glow behind the active card + a bloom when a card lands */
.car-glow{position:absolute;inset:-6% -4%;z-index:-1;border-radius:40px;pointer-events:none;opacity:0;will-change:opacity;
  background:radial-gradient(60% 55% at 50% 55%,rgba(178,0,240,.55),rgba(123,15,240,.28) 45%,rgba(123,15,240,0) 72%);filter:blur(18px)}
.car-glow::after{content:"";position:absolute;inset:-8%;border-radius:inherit;opacity:0;
  background:radial-gradient(55% 50% at 50% 50%,rgba(225,170,255,.6),rgba(178,0,240,.25) 50%,rgba(178,0,240,0) 75%)}
.car-slide.bloom .car-glow::after{animation:carBloom 1.1s cubic-bezier(.22,.8,.2,1)}
@keyframes carBloom{0%{opacity:0;transform:scale(.85)}30%{opacity:1}100%{opacity:0;transform:scale(1.12)}}

/* progress pills under the strip (tap to jump) */
.car-controls{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;gap:.45rem;width:max-content;max-width:calc(100% - 1.5rem);margin:.35rem auto 0;padding:.35rem;border-radius:999px;
  background:rgba(30,12,56,.4);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 40px -20px rgba(4,0,12,.9);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
.car-pills{display:flex;align-items:center;padding:0 .2rem}
.car-pill{position:relative;width:18px;height:42px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;transition:width .6s cubic-bezier(.34,1.45,.5,1)}
.car-pill i{display:block;width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.35);overflow:hidden;position:relative;transition:width .6s cubic-bezier(.34,1.45,.5,1),height .6s cubic-bezier(.34,1.45,.5,1),background .3s,box-shadow .3s}
.car-pill:hover i{background:rgba(255,255,255,.7)}
.car-pill.is-active{width:44px}
.car-pill.is-active i{width:32px;height:8px;background:rgba(255,255,255,.2);box-shadow:0 0 14px rgba(178,0,240,.55)}
.car-pill i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--c-hl),#fff);transform-origin:left;transform:scaleX(var(--p,0))}
.car-pill:not(.is-active) i::after{--p:0}
.car-pill:focus-visible{outline:2px solid var(--c-hl);outline-offset:-6px;border-radius:999px}
@media (max-width:380px){.car-pill{width:14px}.car-pill.is-active{width:34px}.car-pill.is-active i{width:24px}}

@media (min-width:900px){
  .car{--cw:min(62vw,calc((100vh - var(--nav-h) - 170px) * 16 / 9),1240px);--ch:calc(var(--cw) * 9 / 16)}
  .car-stage{height:calc(var(--ch) + 3rem);perspective:1600px}
  .car-slide{top:1.4rem}
  .car{--cr:30px}
  .car-controls{margin-top:.4rem}
}

/* headline + calls to action, now under the strip */
.home-hero{padding:clamp(1rem,3vw,1.75rem) 0 clamp(1.25rem,3vw,2rem)}
.home-hero .label{margin-bottom:.7rem;color:var(--c-soft)}
.home-hero h1{font-size:clamp(2.3rem,7vw,5rem);font-weight:400;letter-spacing:-.045em;line-height:1;margin:0 0 .4em;color:#fff;text-wrap:balance;max-width:16ch}
.home-hero .tagline{font-size:.98rem;color:var(--c-soft);max-width:46ch;margin:0 0 1.4rem}
@media (min-width:900px){
  .home-hero{display:grid;grid-template-columns:1.25fr 1fr;column-gap:3rem;align-items:end}
  .home-hero .label,.home-hero h1{grid-column:1}
  .home-hero .tagline{grid-column:2;grid-row:2;align-self:end;margin-bottom:1rem}
  .home-hero .btn-row{grid-column:2;grid-row:3}
  .home-hero h1{grid-row:2/4;margin:0}
}

/* countdown in a glass panel right under the carousel */
.home-intro{padding-top:0}
.home-countdown{max-width:none;margin:0;border-radius:28px;padding:clamp(1.25rem,3.5vw,2rem) clamp(1.25rem,4vw,2.5rem)}
.home-countdown .countdown b{font-size:clamp(2.2rem,8vw,4rem)}
@media (min-width:900px){
  .home-countdown{display:block}
  .home-countdown #countdown-block{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2.5rem}
  .home-countdown #countdown-block .countdown-label{margin:0;max-width:12ch;line-height:1.5}
  .home-specs{grid-template-columns:repeat(4,1fr)}
}
.home-scripture{margin-top:1.75rem}

/* reveal link card (replaces the old looping teaser) */
.reveal-card{display:grid;gap:1.25rem;border-radius:var(--r-xl);padding:.75rem;color:inherit;text-decoration:none;align-items:center}
.reveal-card .rc-media{position:relative;display:block;border-radius:22px;overflow:hidden;aspect-ratio:16/9}
.reveal-card .rc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.reveal-card .play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.reveal-card .play svg{width:22px;height:22px;fill:var(--c-ink);margin-left:3px}
.reveal-card:hover .rc-media img{transform:scale(1.03)}
.reveal-card .rc-body{display:flex;flex-direction:column;padding:.25rem .75rem 1rem}
.reveal-card .label{margin-bottom:.6rem}
.reveal-card .rc-title{font-family:var(--f-head);font-size:clamp(1.7rem,5vw,2.6rem);letter-spacing:-.035em;line-height:1.05;color:#fff;margin-bottom:.6rem}
.reveal-card .rc-lead{color:var(--c-soft);font-size:.95rem;margin-bottom:.4rem}
@media (min-width:760px){.reveal-card{grid-template-columns:1.2fr 1fr;padding:1rem}.reveal-card .rc-body{padding:1rem 1.5rem}}

@media (prefers-reduced-motion:reduce){.car-slide,.car-pill,.car-pill i{transition:none!important;animation:none!important}.car-slide.bloom .car-glow::after,.car-slide.bloom .car-card::before{animation:none}.car-sheen{display:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .car-controls{background:rgba(32,16,56,.85)}
}

/* ---------- Mobile menu: compact glass card that drops from the menu button ----------
   The header has its own backdrop blur, so a nested blur inside it would not reach the page:
   the card is a strong tinted gradient (legible on any content); the scrim behind blurs the page. */
@media (max-width:1119px){
  .nav-menu{display:flex;inset:calc(var(--nav-h) + 6px) max(.75rem,env(safe-area-inset-right)) auto auto;width:min(85vw,340px);max-height:calc(var(--lvh) * 100 - var(--nav-h) - 24px);
    padding:.5rem;gap:.1rem;border-radius:22px;border:1px solid rgba(255,255,255,.14);
    background:linear-gradient(160deg,rgba(52,22,92,.96),rgba(24,10,44,.97) 55%,rgba(30,11,56,.97));
    box-shadow:0 30px 70px -20px rgba(4,0,12,.85),0 0 0 1px rgba(155,31,245,.14),inset 0 1px 0 rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
    transform-origin:calc(100% - 22px) -8px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.88);
    transition:opacity .2s ease,transform .3s cubic-bezier(.4,0,.6,1),visibility 0s linear .3s}
  .nav-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;
    transition:opacity .22s ease,transform .5s cubic-bezier(.2,1.1,.3,1),visibility 0s}
  .nav-menu li{opacity:0;transform:translateY(-6px);transition:opacity .15s,transform .2s}
  .nav-menu.open li{opacity:1;transform:none;transition:opacity .3s ease calc(var(--i,0) * 32ms + 70ms),transform .45s cubic-bezier(.2,.9,.25,1) calc(var(--i,0) * 32ms + 70ms)}
  .nav-menu a{font-size:1.1rem;padding:.7rem .9rem;border:0;border-radius:14px;transition:background .2s}
  .nav-menu a::after{font-size:.9rem;opacity:.7}
  .nav-menu a:hover,.nav-menu a:focus-visible{background:rgba(255,255,255,.08)}
  .nav-menu a[aria-current="page"]{color:#fff;background:rgba(155,31,245,.22);box-shadow:inset 0 0 0 1px rgba(201,162,255,.28)}
  .nav-menu .nav-give{margin:.45rem .1rem .1rem;min-height:46px;border-radius:999px}
  .nav-menu .nav-give[aria-current="page"],.nav-menu .nav-give:hover{background:#fff;color:var(--c-ink)}
  .nav-scrim{position:fixed;inset:0;z-index:99;background:rgba(10,4,22,.38);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
  body.menu-open .nav-scrim{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
}
@media (min-width:1120px){.nav-scrim{display:none}}
@media (prefers-reduced-motion:reduce){.nav-menu,.nav-menu li,.nav-scrim{transition:none!important}}

/* =====================================================================
   GALLERY (gallery.html). Data comes from assets/gallery/gallery.json.
   ===================================================================== */
.g-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.25rem}
.g-filters[hidden]{display:none}
.g-filters .g-sep{width:1px;align-self:stretch;margin:.35rem .25rem;background:rgba(255,255,255,.16)}
.g-chip{min-height:40px;padding:.45rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--c-soft);font-size:.8rem;font-weight:500;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:background .2s,color .2s,border-color .2s}
.g-chip:hover{border-color:rgba(255,255,255,.4);color:#fff}
.g-chip[aria-pressed="true"]{background:#fff;color:var(--c-ink);border-color:#fff}
.g-chip .n{opacity:.6;margin-left:.35rem;font-variant-numeric:tabular-nums}

.g-empty{position:relative;border-radius:var(--r-xl);padding:clamp(2.5rem,8vw,4.5rem) clamp(1.5rem,6vw,3rem);text-align:center;background:var(--glass-fill);box-shadow:var(--glass-shadow)}
.g-empty svg{width:56px;height:56px;margin:0 auto 1.25rem;color:var(--c-hl);opacity:.9}
.g-empty h2{font-size:clamp(1.5rem,5vw,2.2rem);margin-bottom:.6rem}
.g-empty p{max-width:46ch;margin:0 auto;color:var(--c-soft)}

.g-album{padding:0;margin-bottom:clamp(3rem,8vw,4.5rem);scroll-margin-top:calc(var(--nav-h) + 16px)}
.g-album[hidden]{display:none}
.g-album-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.75rem 1.5rem;margin-bottom:1.25rem}
.g-album-head h2{font-size:clamp(1.6rem,5.5vw,2.6rem);margin:0 0 .35rem}
.g-meta{margin:0;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.g-meta b{color:var(--c-hl);font-weight:500}
.g-album-head .chip-btn svg{width:16px;height:16px}

.g-grid{columns:2;column-gap:.6rem}
@media (min-width:700px){.g-grid{columns:3;column-gap:.85rem}}
@media (min-width:1100px){.g-grid{columns:4;column-gap:1rem}}
.g-item{position:relative;display:block;width:100%;margin:0 0 .6rem;padding:0;border:0;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.06);cursor:zoom-in;break-inside:avoid;-webkit-column-break-inside:avoid;box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
@media (min-width:700px){.g-item{margin-bottom:.85rem}}
@media (min-width:1100px){.g-item{margin-bottom:1rem}}
.g-item[hidden]{display:none}
.g-item img{width:100%;height:auto;display:block;transition:transform .5s var(--ease),opacity .4s;opacity:0}
.g-item img.ok{opacity:1}
.g-item:hover img{transform:scale(1.03)}
.g-item:focus-visible{outline:2px solid var(--c-hl);outline-offset:3px}
.g-item .g-play{position:absolute;inset:auto auto .6rem .6rem;display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem .3rem .45rem;border-radius:999px;background:rgba(18,8,31,.6);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:.72rem;font-weight:500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.g-item .g-play svg{width:16px;height:16px}

/* ---------- Lightbox ---------- */
.g-lightbox{position:fixed;inset:0;z-index:300;display:grid;grid-template-rows:auto 1fr auto;background:rgba(8,3,16,.94);color:#fff;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);opacity:0;transition:opacity .25s}
.g-lightbox[hidden]{display:none}
.g-lightbox.open{opacity:1}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:max(.75rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) .75rem max(1rem,env(safe-area-inset-left))}
.lb-pos{font-size:.8rem;letter-spacing:.08em;color:var(--c-soft);font-variant-numeric:tabular-nums}
.lb-actions{display:flex;align-items:center;gap:.6rem}
.lb-dl{min-height:44px;padding:.35rem 1.1rem}
.lb-dl svg{width:18px;height:18px}
.lb-close,.lb-nav{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:background .2s,color .2s}
.lb-close:hover,.lb-nav:hover{background:#fff;color:var(--c-ink)}
.lb-close svg,.lb-nav svg{width:20px;height:20px}
.lb-stage{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 .5rem;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.lb-stage img,.lb-stage video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9);transition:transform .25s var(--ease),opacity .25s}
.lb-stage video{background:#000;width:min(100%,1280px)}
.lb-stage .lb-spin{position:absolute;width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;animation:lbspin .8s linear infinite}
@keyframes lbspin{to{transform:rotate(360deg)}}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.lb-prev{left:max(.75rem,env(safe-area-inset-left))}
.lb-next{right:max(.75rem,env(safe-area-inset-right))}
.lb-nav[disabled]{opacity:.25;pointer-events:none}
@media (max-width:699px){.lb-nav{top:auto;bottom:max(.6rem,env(safe-area-inset-bottom));transform:none}}
.lb-cap{margin:0;padding:.75rem 4.5rem max(1rem,env(safe-area-inset-bottom));min-height:3.25rem;text-align:center;font-size:.875rem;color:var(--c-soft)}
@media (min-width:700px){.lb-cap{padding-inline:1.5rem}}
html.lb-lock,html.lb-lock body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.g-item img,.lb-stage img,.g-lightbox{transition:none}.g-item:hover img{transform:none}}
/* =====================================================================
   UX layer: page transitions, mobile quick-action dock, scroll ring,
   year-of-celebration dial, card spotlight, staggered entrances.
   ===================================================================== */

/* ---------- Page transitions (cross-document View Transitions; other browsers simply navigate) ---------- */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
.m-dock{view-transition-name:m-dock}
/* Opacity-only cross-fade. No movement, blur or size morph: when a phone's address bar is in a different state on the
   two pages, a size morph would make the whole page look like it zooms. */
::view-transition-group(*){animation:none}
::view-transition-old(root){animation:vt-out .16s linear both}
::view-transition-new(root){animation:vt-in .3s ease-out both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- Small fixes ---------- */
.nw{white-space:nowrap}
:focus-visible{outline:2px solid var(--c-hl);outline-offset:3px}

/* ---------- Staggered entrances ---------- */
.js .reveal{transition-delay:var(--rd,0ms)}

/* ---------- Card spotlight: a soft light follows the pointer (mouse only) ---------- */
@media (hover:hover) and (pointer:fine){
  .teaser::after,.info-card::after,.glass::after,.panel::after,.memory::after,.kit-preview::after,.branch::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .35s;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(201,162,255,.16),rgba(155,31,245,.07) 40%,transparent 65%)}
  .teaser:hover::after,.info-card:hover::after,.glass:hover::after,.panel:hover::after,.memory:hover::after,.kit-preview:hover::after,.branch:hover::after{opacity:1}
  .branch{position:relative}
}

/* ---------- Quick-action dock (phones and tablets) ---------- */
.m-dock{display:none}
@media (max-width:1119px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .m-dock{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));z-index:120;display:flex;align-items:center;gap:.15rem;
    width:min(calc(100% - 1.25rem),460px);padding:.35rem;border-radius:22px;transform:translateX(-50%);
    background:rgba(26,11,46,.72);-webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px);
    box-shadow:0 18px 40px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.1);
    transition:transform .45s var(--ease),opacity .3s}
  .m-dock.away{transform:translate(-50%,calc(100% + 24px));opacity:0}
  .menu-open .m-dock,.lb-lock .m-dock,.kb-open .m-dock{transform:translate(-50%,calc(100% + 24px));opacity:0;pointer-events:none}
  .m-dock a,.m-dock button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:.3rem .2rem;border:0;border-radius:16px;background:none;color:var(--c-soft);font:500 .66rem/1 var(--f-body);letter-spacing:.02em;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s,transform .15s}
  .m-dock svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .m-dock a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.08)}
  .m-dock a[aria-current="page"] svg{stroke:var(--c-hl)}
  .m-dock a:active,.m-dock button:active{transform:scale(.93)}
  .m-dock .give{flex:1.15;color:var(--c-ink);background:#fff;box-shadow:0 8px 22px -8px rgba(155,31,245,.8)}
  .m-dock .give svg{stroke:var(--c-violet)}
}
@media (max-width:1119px) and (prefers-reduced-transparency:reduce){.m-dock{background:rgba(26,11,46,.97)}}

/* ---------- Scroll ring / back to top ---------- */
.to-top{position:fixed;right:clamp(.75rem,2.5vw,1.75rem);bottom:clamp(.75rem,2.5vw,1.75rem);z-index:115;width:52px;height:52px;border-radius:50%;border:0;padding:0;cursor:pointer;color:#fff;
  background:rgba(26,11,46,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 30px -10px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.12);
  display:grid;place-items:center;opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .3s,transform .35s var(--ease)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.to-top .tt-track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:2.5}
.to-top .tt-bar{fill:none;stroke:url(#tt-grad);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:138.2;stroke-dashoffset:138.2}
.to-top i{position:relative;width:16px;height:16px;display:block}
.to-top i::before{content:"";position:absolute;inset:0;border:solid #fff;border-width:2px 0 0 2px;transform:translateY(3px) rotate(45deg);width:9px;height:9px;margin:auto}
.to-top:hover{box-shadow:0 12px 30px -10px rgba(155,31,245,.7),inset 0 0 0 1px rgba(255,255,255,.2)}
@media (max-width:1119px){.to-top{width:44px;height:44px;bottom:calc(84px + env(safe-area-inset-bottom));right:.75rem}.menu-open .to-top,.lb-lock .to-top{opacity:0;pointer-events:none}}

/* ---------- Toast ---------- */
.ux-toast{position:fixed;left:50%;top:calc(var(--nav-h) + 12px);z-index:400;transform:translate(-50%,-12px);opacity:0;pointer-events:none;padding:.7rem 1.1rem;border-radius:999px;
  background:rgba(26,11,46,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font-size:.85rem;box-shadow:0 14px 34px -12px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.14);transition:opacity .25s,transform .35s var(--ease)}
.ux-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Home: explore cards swipe sideways on phones ---------- */
@media (max-width:639px){
  .teaser-grid{display:flex;gap:.75rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:-1.25rem;padding:.25rem 1.25rem 1rem;scroll-padding-inline:1.25rem}
  .teaser-grid::-webkit-scrollbar{display:none}
  .teaser-grid>.teaser{flex:0 0 78%;scroll-snap-align:start;min-height:230px}
  .js .teaser-grid>.reveal{opacity:1;transform:none}
  .tg-meter{display:flex;align-items:center;gap:.75rem;margin-top:.25rem;color:var(--c-muted);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
  .tg-meter .tg-track{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
  .tg-meter .tg-track i{display:block;height:100%;width:12.5%;border-radius:2px;background:linear-gradient(90deg,var(--c-violet),var(--c-hl));transform-origin:left;transition:width .2s}
}
@media (min-width:640px){.tg-meter{display:none}}

/* ---------- Home: the year-of-celebration dial ---------- */
.year-dial{border-radius:var(--r-xl);padding:clamp(1.25rem,4vw,2.75rem);overflow:hidden}
.year-dial .yd-head h2{font-size:clamp(1.9rem,5vw,3.2rem);font-weight:400;letter-spacing:-.04em;line-height:1.02;margin:0 0 .5rem;color:#fff}
.year-dial .yd-head p{color:var(--c-soft);font-size:.95rem;margin:0}
.yd-body{display:grid;gap:clamp(1.25rem,3vw,2.5rem);margin-top:clamp(1.25rem,3vw,2rem);align-items:center}
@media (min-width:900px){.yd-body{grid-template-columns:minmax(280px,380px) 1fr}}
.yd-ring{position:relative;width:min(100%,340px);aspect-ratio:1;margin-inline:auto}
.yd-ring svg{width:100%;height:100%;overflow:visible}
.yd-seg{fill:none;stroke:rgba(255,255,255,.09);stroke-width:15;cursor:pointer;transition:stroke .35s,stroke-width .35s var(--ease),filter .35s}
.yd-seg.ev{stroke:rgba(155,31,245,.42)}
.yd-seg.past{stroke:url(#yd-grad)}
.yd-seg.now{stroke:#fff;filter:drop-shadow(0 0 8px rgba(201,162,255,.9))}
.yd-seg.sel{stroke-width:21;stroke:var(--c-hl)}
.yd-seg.past.sel{stroke:#fff}
.yd-seg:hover{stroke-width:19}
.yd-dot{fill:var(--c-hl);pointer-events:none}
.yd-ml{fill:var(--c-muted);font:500 8.5px var(--f-body);letter-spacing:.06em;text-anchor:middle;dominant-baseline:middle;pointer-events:none;text-transform:uppercase}
.yd-ml.sel{fill:#fff}
.yd-prog{fill:none;stroke:url(#yd-grad);stroke-width:2.5;stroke-linecap:round;opacity:.9;transition:stroke-dashoffset 1.6s var(--ease)}
.yd-prog.zero{opacity:0}
.yd-prog-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:2.5}
.yd-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.yd-center b{display:block;font:300 clamp(2.6rem,10vw,3.6rem)/1 var(--f-head);letter-spacing:-.05em;color:#fff}
.yd-center span{display:block;margin-top:.35rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-soft)}
.yd-months{display:grid;grid-template-columns:repeat(6,1fr);gap:.35rem;margin-bottom:1rem}
.yd-m{position:relative;min-height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--c-soft);font:500 .78rem var(--f-body);cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .15s}
.yd-m:hover{border-color:rgba(255,255,255,.25);color:#fff}
.yd-m:active{transform:scale(.95)}
.yd-m[aria-selected="true"]{background:#fff;color:var(--c-ink);border-color:#fff}
.yd-m.ev::after{content:"";position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--c-hl)}
.yd-m[aria-selected="true"].ev::after{background:var(--c-violet)}
.yd-m.now{border-color:var(--c-hl)}
.yd-panel{min-height:150px;border-radius:var(--r-lg);padding:1.1rem 1.2rem;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.yd-panel h3{font-size:1.25rem;font-weight:400;letter-spacing:-.02em;margin:0 0 .75rem;color:#fff}
.yd-ev{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;padding:.8rem 0;border-top:1px solid rgba(255,255,255,.08)}
.yd-ev:first-of-type{border-top:0;padding-top:0}
.yd-day{grid-row:span 3;width:52px;height:56px;border-radius:14px;display:grid;place-content:center;text-align:center;background:rgba(155,31,245,.18);color:#fff;font:400 1.35rem/1 var(--f-head)}
.yd-day small{display:block;font:500 .58rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--c-hl);margin-top:3px}
.yd-ev strong{color:#fff;font-weight:500;font-size:.98rem}
.yd-ev .meta{font-size:.8rem;color:var(--c-muted)}
.yd-ev .acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.35rem}
.yd-ev .acts a,.yd-ev .acts button{display:inline-flex;align-items:center;min-height:36px;padding:.3rem .85rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:500 .76rem var(--f-body);text-decoration:none;cursor:pointer}
.yd-ev .acts a:hover,.yd-ev .acts button:hover{background:rgba(255,255,255,.12)}
.yd-empty{color:var(--c-soft);font-size:.9rem;margin:0}
.yd-panel.swap{animation:yd-swap .45s var(--ease)}
@keyframes yd-swap{from{opacity:0;transform:translateY(8px)}}

/* ---------- Home stats count up ---------- */
.home-specs dt .n{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .m-dock,.to-top,.ux-toast,.yd-seg,.yd-prog{transition:none}
  .yd-panel.swap{animation:none}
  .js .reveal{transition-delay:0ms}
}

/* ---------- Scroll stability: nothing on the page may change size while scrolling ---------- */
/* Background glow drifts sideways only (it used to breathe in and out by up to 10%, which read as the page zooming).
   On phones and tablets it holds still, which also keeps scrolling smooth under the glass header and dock. */
@keyframes drift1{to{transform:translate3d(14vw,calc(var(--lvh) * 10),0)}}
@keyframes drift2{to{transform:translate3d(-12vw,calc(var(--lvh) * 16),0)}}
@keyframes drift3{to{transform:translate3d(10vw,calc(var(--lvh) * -14),0)}}
.ambient{contain:strict}
@media (max-width:1119px),(hover:none){.ambient .orb{animation:none;will-change:auto}}
/* Events: the cards are written into the page, so it arrives at its full length; no pop-in, no jump */
.events-grid .card{scroll-margin-top:calc(var(--nav-h) + 16px)}
.events-grid .card-tile{contain:layout paint}
@media (hover:none){.card-tile .tag{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(18,8,31,.78)}}

/* ---------- iPhone (WebKit) stability ----------
   1) Grid items may shrink below their content width. Without this, WebKit re-measures the event cards on every
      repaint and the single grid column keeps getting wider (the "page grows while scrolling" bug).
   2) --lvh is set once in pixels by a tiny inline script and only changes when the screen WIDTH changes, so the
      glow never resizes when the iPhone toolbars show or hide. The glow layer carries extra height below so no
      edge shows when the toolbars collapse. */
:where(.grid,.hero-grid,.two-col,.field-row,.ph-grid,.teaser-grid,.cta-band,.info-grid,.interview,.quote-grid,.reveal-card,.yd-body,.tl-card,.up-list,.chapter-list)>*{min-width:0}
.card-tile img{display:block;max-width:100%}
.ambient{height:calc(var(--lvh) * 100 + 160px)}