/* ===== Keraleeyam 2026 ===== */
:root{
  --yellow:#F9D31D;
  --yellow-deep:#E0BC0D;
  --green:#01670C;
  --green-dark:#014507;
  --paper:#FAFAF7;--cream:#FAFAF7;
  --ink:#111111;--caption:#9A9E94;
  --rule:rgba(1,103,12,.18);
  --max:1560px;
  --pad:clamp(28px,7.6vw,144px);
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ml:"Gayathri","Archivo",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
/* `hidden` must win. The UA rule [hidden]{display:none} is only specificity
   0-1-0, so any class that sets `display` silently defeats it — which left the
   full-screen .mnav sheet laid out over the whole page, invisible at opacity 0
   and eating every click. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--cream);
  -webkit-font-smoothing:antialiased;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:var(--green);
  padding:10px 16px;border-radius:8px}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.section--yellow :focus-visible,.hero :focus-visible{outline-color:var(--green-dark)}

/* ===== Buttons ===== */
.btn{display:inline-block;background:var(--yellow);color:var(--green-dark);
  font-weight:800;letter-spacing:.01em;text-decoration:none;
  padding:14px 26px;border-radius:999px;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.2)}
.btn--sm{padding:9px 18px;font-size:14px}
.btn--lg{padding:18px 42px;font-size:18px}
.btn--dark{background:var(--green);color:var(--yellow)}
.eyebrow{font-family:var(--font-mono);margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green)}

/* ===== Nav ===== */
/* animated glow on the nav capsule */
@property --glowA{syntax:'<angle>';initial-value:0deg;inherits:false}

.nav__bar{position:relative;isolation:isolate}
/* a light travelling around the rim */
.nav__bar::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--glowA),
    rgba(249,211,29,0)   0deg,
    rgba(249,211,29,.92) 34deg,
    rgba(255,248,214,.9) 56deg,
    rgba(249,211,29,.55) 78deg,
    rgba(249,211,29,0)   130deg,
    rgba(249,211,29,0)   360deg);
  -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;
  animation:navGlow 7s linear infinite;pointer-events:none;z-index:3}
@keyframes navGlow{to{--glowA:360deg}}

/* a slow bloom drifting behind the glass */
.nav__bar::after{content:"";position:absolute;inset:-45% -5%;border-radius:999px;z-index:-1;
  background:
    radial-gradient(58% 120% at 22% 50%, rgba(249,211,29,.26), transparent 68%),
    radial-gradient(58% 120% at 78% 50%, rgba(80,220,120,.20), transparent 68%);
  filter:blur(30px);pointer-events:none;
  animation:navDrift 13s ease-in-out infinite alternate}
@keyframes navDrift{from{transform:translateX(-5%) scale(1)}
                    to{transform:translateX(5%) scale(1.06)}}


.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:14px var(--pad);
  transition:padding .35s cubic-bezier(.22,.61,.36,1)}
.nav__bar{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:14px;
  padding:10px 10px 10px 18px;border-radius:999px;
  background:rgba(10,22,11,.34);border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:0 10px 40px rgba(0,0,0,.22);
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
.nav.is-stuck{padding-top:10px}
.nav.is-stuck .nav__bar{background:rgba(1,50,6,.82);border-color:rgba(255,255,255,.14);
  box-shadow:0 12px 44px rgba(0,0,0,.4)}

.nav__brand{flex:none;display:block;line-height:0}
.nav__brand img{height:clamp(34px,3.4vw,46px);width:auto;display:block;
  transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.nav__brand:hover img{transform:scale(1.04)}

/* menu with a hover pill that slides between items */
.nav__menu{display:none;position:relative;margin:0 auto;align-items:center;gap:2px}
/* Six items ending in "Expression of Interest" are 620px of menu. With the
   logo and the Book Now button either side, the row only fits inside the
   pill from 1230px up — below that the button spilled out through the right
   edge of the bar. Measured, not guessed. The link padding above is 14px
   rather than 20px for the same reason: at 20px the figure was 1310px,
   which would have pushed every 1280-wide laptop onto the burger.
   The burger menu carries the same six links plus the ticket CTA. */
@media(min-width:1230px){.nav__menu{display:flex}}
.nav__menu a{position:relative;z-index:1;padding:10px 14px;border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:.01em;
  color:rgba(255,255,255,.78);text-decoration:none;transition:color .28s ease;white-space:nowrap}
.nav__menu a:hover{color:#fff}
.nav__pill{position:absolute;top:0;left:0;height:100%;border-radius:999px;
  background:rgba(255,255,255,.13);opacity:0;pointer-events:none;
  transition:transform .42s cubic-bezier(.22,.61,.36,1),width .42s cubic-bezier(.22,.61,.36,1),opacity .28s ease}
.nav__menu:hover .nav__pill{opacity:1}

.nav__book{flex:none;display:inline-flex;align-items:center;gap:9px;
  background:var(--yellow);color:var(--green-dark);font-weight:800;font-size:14px;
  padding:12px 22px;border-radius:999px;text-decoration:none;margin-left:auto;
  box-shadow:0 6px 22px rgba(249,211,29,.26);
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease}
@media(min-width:1230px){.nav__book{margin-left:0}}
.nav__book:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(249,211,29,.44)}
.nav__book-dot{width:7px;height:7px;border-radius:50%;background:var(--green-dark);opacity:.5}

/* burger */
.nav__burger{flex:none;width:44px;height:44px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.09);border-radius:999px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:background .28s ease}
.nav__burger:hover{background:rgba(255,255,255,.16)}
@media(min-width:1230px){.nav__burger{display:none}}
.nav__burger span{display:block;width:17px;height:2px;border-radius:2px;background:#fff;
  transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .2s ease}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* mobile menu sheet */
.mnav{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  justify-content:flex-start;gap:8px;padding:132px var(--pad) 48px;
  background:rgba(4,12,5,.94);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;transition:opacity .34s ease}
.mnav.is-open{opacity:1}
.mnav nav{display:flex;flex-direction:column;gap:2px}
.mnav a[data-nav],.mnav nav a{font-size:clamp(28px,8vw,42px);font-weight:900;letter-spacing:-.02em;
  color:#fff;text-decoration:none;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.09);transition:color .24s ease,padding-left .3s ease}
.mnav nav a:hover{color:var(--yellow);padding-left:8px}
.mnav__cta{margin-top:30px;align-self:flex-start}
.mnav__meta{margin:18px 0 0;font-size:14px;font-weight:600;color:rgba(255,255,255,.6)}
body.menu-open{overflow:hidden}

/* ===== Slides ===== */
.slides{position:absolute;inset:0;z-index:1}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .62s cubic-bezier(.4,0,.2,1),visibility 0s linear .62s}
.slide.is-on{opacity:1;visibility:visible;transition-delay:0s,0s}
.slide__still{transform:scale(1.04);transition:transform 5.5s ease-out}
.slide.is-on .slide__still{transform:scale(1.09)}

/* copy blocks stack and crossfade with their slide */
.hero__content > .copy{grid-area:copy;opacity:0;visibility:hidden;
  transform:translateY(12px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.22,.61,.36,1),visibility 0s linear .42s}
.hero__content > .copy.is-on{opacity:1;visibility:visible;transform:none;
  transition-delay:.16s,.16s,0s}

/* slide dots */
.dots{display:flex;gap:10px;margin-top:30px}
.dot-btn{width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;border-radius:50%}
.dot-btn i{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.38);
  display:block;transition:width .35s cubic-bezier(.22,.61,.36,1),background .35s ease}
.dot-btn:hover i{background:rgba(255,255,255,.7)}
.dot-btn.is-on i{width:26px;background:var(--yellow)}

/* ===== Hero (parallax) ===== */
.hero{position:relative;width:100%;height:100svh;min-height:580px;overflow:hidden;
  background:#05100A;isolation:isolate}
.stage{position:absolute;inset:-4%}
.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform;transform:translate3d(0,0,0)}
.l-bg{z-index:1}
.l-type{z-index:2;opacity:.95}
.l-green{z-index:3;mix-blend-mode:screen;opacity:.9}
.l-yellow{z-index:4;mix-blend-mode:screen;opacity:.85}
.l-shadow{z-index:5;mix-blend-mode:multiply}
.subject{position:absolute;inset:0;z-index:6;will-change:transform}
.l-perf{filter:saturate(.92) contrast(1.02) brightness(.97)}
.l-dancer{filter:saturate(.96) contrast(1.02) brightness(.98)}
.l-fighters{filter:saturate(.98) contrast(1.03) brightness(1)}
/* On a short viewport, cover crops top and bottom and pushes her head back
   under the nav. Weighting the crop to the bottom keeps her clear of it. */
.slide[data-slide="2"] .layer{object-position:50% 20%}
/* narrow screens: cover crops more than her width, so frame the face and mudra */
.slide[data-slide="3"] .layer{object-position:50% 20%}
@media(max-width:760px){
  .slide[data-slide="2"] .layer{object-position:74% 20%}
  /* the pair is wider than a phone frame — show the leaper whole rather than
     two halves of two people */
  .slide[data-slide="3"] .layer{object-position:78% 20%}
}
.l-wrap{mix-blend-mode:screen;opacity:.95}
.l-atmos{z-index:7;mix-blend-mode:screen;opacity:.30}
.l-atmos2{z-index:8;mix-blend-mode:soft-light;opacity:.45}
.scrim{position:absolute;inset:0;z-index:9;pointer-events:none;background:
  radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(4,10,5,.5) 100%),
  linear-gradient(to top, #05100A 0%, rgba(5,16,10,.55) 22%, transparent 54%),
  linear-gradient(to right, rgba(4,10,5,.68) 0%, rgba(4,10,5,.30) 30%, transparent 56%),
  linear-gradient(to bottom, rgba(5,16,10,.62) 0%, transparent 26%)}
.dust{position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:1;mix-blend-mode:screen}
@media (prefers-reduced-motion:reduce){.dust{display:none}}

.hero__content{position:relative;z-index:11;height:100%;max-width:var(--max);margin:0 auto;
  padding:0 var(--pad) clamp(40px,7vh,86px);
  display:grid;align-content:end;justify-items:start;
  grid-template-areas:"copy" "facts" "actions" "dots";grid-template-columns:minmax(0,1fr)}
.hero__content > .facts{font-family:var(--font-mono);grid-area:facts}
.hero__content > .hero__actions{grid-area:actions}
.hero__content > .dots{grid-area:dots}

/* entrance */
.reveal{opacity:0;transform:translateY(14px);
  animation:rise .85s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:var(--d,0ms)}
.copy .eyebrow,.copy .hero__title,.copy .bill{margin-left:0}
@keyframes rise{to{opacity:1;transform:none}}

/* eyebrow */
.hero .eyebrow{font-family:var(--font-mono);display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 22px;
  font-size:clamp(11px,1.05vw,13px);font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.hero .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);
  box-shadow:0 0 0 4px rgba(249,211,29,.16);flex:none}
.hero .eyebrow em{font-style:normal;color:var(--yellow);
  padding-left:12px;border-left:1px solid rgba(255,255,255,.22)}

/* headline */
.hero__title{font-family:var(--font);margin:0 0 26px;font-size:clamp(34px,4.6vw,68px);font-weight:600;
  line-height:1.02;letter-spacing:-.035em;color:#fff;text-wrap:balance;
  text-shadow:0 6px 40px rgba(0,0,0,.5)}

/* billing */
.bill{font-family:var(--font-mono);display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 24px;
  font-size:clamp(12px,1.05vw,14px);font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.bill__name{position:relative;color:var(--yellow);cursor:default}
.bill__name::after{content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.bill__name:hover::after{transform:scaleX(1)}
.bill__sep{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.32);flex:none}

/* facts row */
.facts{font-family:var(--font-mono);list-style:none;display:flex;flex-wrap:wrap;gap:0 20px;margin:0 0 30px;padding:0;
  font-size:clamp(13px,1.1vw,15px);font-weight:600;color:rgba(255,255,255,.86)}
.facts li{display:flex;align-items:center;gap:22px}
.facts li+li::before{content:"";width:1px;height:15px;background:rgba(255,255,255,.26)}

/* actions */
.hero__actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.cta{position:relative;display:inline-flex;align-items:center;gap:12px;overflow:hidden;
  background:var(--yellow);color:var(--green-dark);font-weight:800;
  font-size:clamp(14px,1.15vw,16px);letter-spacing:.01em;
  padding:15px 28px;border-radius:999px;text-decoration:none;
  transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s ease}
.cta::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .75s cubic-bezier(.22,.61,.36,1)}
.cta:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(249,211,29,.32)}
.cta:hover::before{transform:translateX(120%)}
.cta span,.cta svg{position:relative;z-index:1}
.cta svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.cta:hover svg{transform:translateX(5px)}

/* quiet early-bird note — deliberately not a second button */
.note{display:flex;align-items:center;gap:10px;margin:0;
  font-size:14px;font-weight:600;color:rgba(255,255,255,.72)}
.note i{width:7px;height:7px;border-radius:50%;background:var(--yellow);flex:none;
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(249,211,29,.5)}
                 60%{box-shadow:0 0 0 8px rgba(249,211,29,0)}}

@media(max-width:560px){
  .facts{font-family:var(--font-mono);gap:6px 0;flex-direction:column;align-items:flex-start}
  .facts li+li::before{display:none}
  .hero__actions{gap:18px}
}

@media (prefers-reduced-motion:reduce){
  .nav__bar::before,.nav__bar::after{animation:none}
  .reveal{opacity:1;transform:none;animation:none}
  .slide,.hero__content > .copy{transition-duration:.01ms}
  .slide__still{transition:none;transform:scale(1.04)}
  .note i{animation:none}
  .cta::before{display:none}
}

@media (prefers-reduced-motion:reduce){.layer,.subject{transform:none!important}}


/* ===== Countdown ===== */
/* Yellow leads public-facing work (brand book, 50/30/20). Green on yellow is
   the book's AA pairing at 4.8:1. Editorial two-column block: the clock is the
   object, the card carries the commitment. No boxes, one hairline. */
.cd{position:relative;overflow:hidden;color:var(--green-dark);
  padding:clamp(46px,5.6vw,80px) var(--pad);
  background:var(--yellow)}
.cd__frond{position:absolute;bottom:-6%;right:-15%;z-index:0;
  height:126%;width:auto;max-width:none;pointer-events:none;display:block;
  opacity:.15}
@media(max-width:860px){.cd__frond{top:auto;bottom:-8%;right:-55%;
  height:auto;width:150%;opacity:.1}}

.cd__inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto}

.cd__eyebrow{display:flex;align-items:center;gap:11px;
  margin:0 0 clamp(22px,2.6vw,34px);
  font-family:var(--font-mono);font-size:clamp(11px,1.05vw,13px);font-weight:500;
  /* .66 measured 3.81:1 on the yellow — .78 is 5.08:1 */
  letter-spacing:.26em;text-transform:uppercase;color:rgba(1,63,6,.78)}
.cd__eyebrow::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--green);animation:cdPulse 2.4s ease-in-out infinite}
@keyframes cdPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.75)}}

.cd__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(228px,.42fr);
  gap:clamp(28px,4vw,64px);align-items:end;
  border-top:1px solid rgba(1,63,6,.22);padding-top:clamp(24px,3vw,40px)}

.cd__clock{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;
  gap:clamp(18px,4.4vw,72px)}
.cd__clock li{min-width:0}
.cd__num{display:block;font-family:var(--font);
  font-size:clamp(46px,8.6vw,120px);font-weight:600;line-height:.82;
  letter-spacing:-.055em;color:var(--green-dark);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.cd__lab{font-family:var(--font-mono);display:block;margin-top:clamp(10px,1.1vw,15px);
  font-size:clamp(10px,.9vw,12px);font-weight:500;letter-spacing:.24em;
  /* .55 measured 2.95:1 — the worst failure on the page */
  text-transform:uppercase;color:rgba(1,63,6,.78)}
.cd__num.is-tick{animation:cdTick .4s cubic-bezier(.22,.61,.36,1)}
@keyframes cdTick{0%{opacity:.3;transform:translateY(-12%)}100%{opacity:1;transform:none}}

.cd__card{display:flex;flex-direction:column;align-items:flex-start;
  border-left:1px solid rgba(1,63,6,.22);
  padding-left:clamp(20px,2.4vw,38px)}
.cd__card p{margin:0 0 13px;font-size:clamp(14px,1.15vw,16px);line-height:1.5}
.cd__card p:last-of-type{margin-bottom:clamp(18px,2.2vw,26px)}
.cd__card strong{display:block;font-weight:600;color:var(--green-dark)}
.cd__card span{display:block;color:rgba(1,63,6,.78)}  /* was .6 — 3.31:1 */
.cd__cta{margin-top:auto;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--green);color:var(--yellow);text-decoration:none;
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;padding:13px 21px;border-radius:999px;
  transition:background .3s ease,gap .3s cubic-bezier(.22,.61,.36,1)}
.cd__cta:hover{background:var(--green-dark);gap:15px}
.cd__cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

.cd__note{margin:clamp(18px,2vw,24px) 0 0;font-size:15px;font-weight:600;
  color:var(--green-dark)}
.cd--over .cd__clock{display:none}

@media(max-width:860px){
  .cd__grid{grid-template-columns:1fr;gap:26px;align-items:start}
  .cd__clock{gap:0;justify-content:space-between;width:100%}
  .cd__clock li{flex:1 1 0;text-align:center}
  .cd__card{border-left:0;border-top:1px solid rgba(1,63,6,.22);
    padding-left:0;padding-top:24px}
}
@media (prefers-reduced-motion:reduce){
  .cd__num.is-tick,.cd__eyebrow::before{animation:none}
}

/* ===== Sections ===== */
.section{padding:clamp(56px,9vw,104px) var(--pad)}
.section--alt{background:#fff}
.section--yellow{background:var(--yellow)}
.wrap{max-width:var(--max);margin:0 auto}
.wrap--center{text-align:center}
.h2{font-size:clamp(30px,5vw,50px);line-height:1.08;margin:0 0 20px;
  font-weight:900;color:var(--green);letter-spacing:-.02em}
.lede{font-size:clamp(17px,2vw,20px);max-width:60ch;margin:0 0 36px}
.lede--tight{margin-bottom:26px}
/* renamed from .note — it collided with the hero's early-bird pill, which is
   also .note, and being later in the file it won: the pill rendered italic and
   pushed 26px down its row */
.aside-note{margin-top:26px;font-style:italic;opacity:.7}
.link{font-weight:700;color:var(--green);text-decoration:underline;text-underline-offset:3px}

/* ===== Cards ===== */
/* .cards / .card removed — the About section was their only user */

/* ===== Headline act ===== */
/* The photograph is the section. Everything sits on it under a scrim weighted
   to the lower left, where the copy goes — the band's faces stay clear. */
.act{position:relative;overflow:hidden;isolation:isolate;
  padding:0;background:#0A0D09;
  min-height:clamp(540px,56vw,760px);
  display:flex;align-items:flex-end}
.act__shot{position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* a self-hosted loop, when there is one, sits over the still on the same box */
.act__video{position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center 42%}
@media (prefers-reduced-motion:reduce){.act__video{display:none}}
/* Lighter than it was. At .93/.80 the scrim swallowed the leftmost player
   entirely — the copy is legible at .86/.66 because the type carries its own
   shadow, and the photograph keeps all six faces. */
.act::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to right,
      rgba(5,9,5,.86) 0%, rgba(5,9,5,.66) 32%,
      rgba(5,9,5,.28) 60%, rgba(5,9,5,.04) 84%, transparent 100%),
    linear-gradient(to top,
      rgba(5,9,5,.78) 0%, rgba(5,9,5,.22) 40%, transparent 70%)}
.act > .wrap{position:relative;z-index:2;width:100%;
  padding:clamp(40px,6vw,92px) var(--pad)}

/* a yellow rule anchors the block to the left edge of the type */
.act__body{position:relative;max-width:min(100%,600px);
  padding-left:clamp(18px,2vw,26px)}
.act__body::before{content:"";position:absolute;left:0;top:6px;bottom:6px;
  width:3px;border-radius:3px;
  background:linear-gradient(to bottom,var(--yellow),rgba(249,211,29,.12))}
.act__eyebrow{color:var(--yellow);margin-bottom:clamp(10px,1.2vw,14px)}

.act__title{margin:clamp(8px,1vw,12px) 0 clamp(6px,.8vw,9px);color:#fff;
  text-shadow:0 6px 34px rgba(0,0,0,.45)}
/* the band name set as type, since the mark has come off this section */
.act__band{margin:0 0 clamp(18px,2.2vw,26px);
  font-size:clamp(19px,2vw,26px);font-weight:800;line-height:1.1;
  letter-spacing:-.02em;color:var(--yellow);
  text-shadow:0 4px 26px rgba(0,0,0,.4)}
.act__lede{margin:0 0 clamp(22px,2.6vw,30px);max-width:46ch;
  font-size:clamp(16px,1.65vw,20px);line-height:1.55;
  color:rgba(255,255,255,.88)}

/* the two facts run side by side with a hairline between, rather than stacking
   as label/value rows — it reads as a caption strip under the copy */
.act__facts{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px clamp(20px,2.6vw,34px);
  margin:0 0 clamp(24px,2.8vw,32px);padding-top:clamp(18px,2vw,24px);
  border-top:1px solid rgba(255,255,255,.3)}
.act__facts dt{font-family:var(--font-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);
  width:100%}
.act__facts dd{margin:0;font-size:15px;font-weight:700;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.5)}
@media(min-width:560px){
  /* pair each label with its value, then sit the pairs in a row */
  .act__facts{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;
    justify-content:start;gap:5px clamp(28px,4vw,56px)}
  .act__facts dt{width:auto}
}

.act__cta{display:inline-flex;align-items:center;gap:11px;
  background:var(--yellow);color:var(--green-dark);text-decoration:none;
  padding:15px 30px;border-radius:999px;font-weight:800;font-size:15px;
  box-shadow:0 10px 30px rgba(249,211,29,.24);
  transition:gap .28s cubic-bezier(.22,.61,.36,1),
             transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease}
.act__cta:hover{gap:16px;transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(249,211,29,.4)}
.act__cta svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* the photograph is scale-held so the scroll parallax in main.js never exposes
   an edge; the drift is a fallback for when the script does not run */
.act__shot{transform:scale(1.08)}
@media (prefers-reduced-motion:no-preference){
  .act__shot{animation:actDrift 26s ease-in-out infinite alternate}
}
.act__shot.is-parallax{animation:none}
@keyframes actDrift{from{transform:scale(1.05)}to{transform:scale(1.12)}}

/* ===== Message from the President ===== */
/* Photograph band, and the letter on a card that rises over its foot so the
   two read as one object. Nothing is set on the picture but the chip and the
   heading — see the note in index.html for the contrast measurements. */
.pres{position:relative;overflow:hidden;background:var(--cream);padding-top:0}
.pres::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(40% 42% at 96% 92%,rgba(1,167,60,.08),transparent 72%)}
.pres > *{position:relative;z-index:1}

.pres__banner{margin:0 calc(-1 * var(--pad));position:relative;line-height:0}
.pres__banner img{display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;object-position:50% 28%;
  max-height:clamp(380px,58vh,660px)}
/* measured: 26% cream at the edge, gone by 58% — enough for the heading, light
   enough that the photograph keeps its light */
.pres__banner::before{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:linear-gradient(100deg,rgba(255,253,245,.72) 0%,
                             rgba(255,253,245,.42) 26%,
                             rgba(255,253,245,0) 58%)}
/* the card only covers the middle of the band; the strip left and right of it
   would otherwise end on a ruled edge against the page */
.pres__banner::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  z-index:1;height:clamp(40px,6vw,96px);pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,253,245,0),var(--cream))}
.pres__over{position:absolute;z-index:2;left:var(--pad);top:clamp(26px,4.4vw,58px);
  width:min(46%,620px);line-height:normal}
.pres__chip{display:inline-block;margin:0 0 clamp(12px,1.5vw,18px);
  padding:7px 14px 6px;border-radius:999px;background:var(--yellow);
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--green-dark);
  box-shadow:0 6px 18px -8px rgba(1,63,6,.5)}
.pres__h{margin:0;font-size:clamp(28px,3.8vw,52px);line-height:1.02;
  font-weight:800;letter-spacing:-.034em;color:var(--green-dark)}

/* --- the card --- */
/* The negative top margin is the whole point: it lifts the letter onto the
   photograph so the section is one composition, not a picture with a caption. */
.pres__card{position:relative;isolation:isolate;
  margin:calc(-1 * clamp(48px,8vw,132px)) auto 0;
  max-width:1060px;padding:clamp(30px,4.4vw,68px) clamp(24px,4vw,68px);
  border-radius:clamp(18px,2vw,26px);
  background:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 34px 70px -34px rgba(1,63,6,.42),
             0 2px 10px -4px rgba(1,63,6,.12)}

/* the anniversary, ghosted into the card's top-right corner */
.pres__anniv{position:absolute;z-index:-1;top:clamp(10px,1.6vw,22px);
  right:clamp(18px,3vw,44px);margin:0;
  display:flex;align-items:flex-end;gap:clamp(8px,1vw,14px);pointer-events:none}
.pres__anniv-n{font-size:clamp(76px,9vw,132px);line-height:.78;font-weight:800;
  letter-spacing:-.055em;color:rgba(1,103,12,.13)}
@supports ((-webkit-background-clip:text) or (background-clip:text)) and
          (-webkit-text-stroke:2px black){
  .pres__anniv-n{color:transparent;
    -webkit-text-stroke:2px rgba(1,103,12,.26);
    background-image:linear-gradient(rgba(249,211,29,.34),rgba(249,211,29,.12));
    -webkit-background-clip:text;background-clip:text}
}
.pres__anniv-t{padding-bottom:clamp(7px,.9vw,12px);
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(1,69,7,.5);line-height:1.5}
.pres__anniv-t span{display:block;margin-top:3px;color:rgba(1,103,12,.62);letter-spacing:.1em}

/* --- the letter --- */
.pres__lede{margin:0 0 clamp(20px,2.4vw,30px);max-width:34ch;
  font-size:clamp(19px,2.2vw,26px);line-height:1.44;font-weight:600;
  letter-spacing:-.014em;color:var(--green-dark)}
/* two measures rather than one long one — a 60ch column under a 26px opening
   line looked like a wall; at this width each paragraph is four or five lines */
.pres__cols{columns:2;column-gap:clamp(28px,3.6vw,58px);
  border-top:1px solid rgba(1,103,12,.16);padding-top:clamp(20px,2.4vw,30px)}
.pres__cols p{margin:0 0 clamp(13px,1.5vw,17px);break-inside:avoid;
  font-size:clamp(14.5px,1.35vw,16px);line-height:1.72;color:rgba(1,69,7,.86)}
.pres__cols p:last-child{margin-bottom:0}
.pres__theme{font-weight:700;color:var(--green-dark);
  background:linear-gradient(transparent 62%,rgba(249,211,29,.6) 0)}
.pres__close{font-weight:600;color:var(--green-dark)!important}

.pres__sign{display:block;margin-top:clamp(24px,3vw,38px);
  padding-top:clamp(16px,2vw,22px);border-top:2px solid var(--yellow)}
.pres__sign-n{display:block;font-size:clamp(17px,1.8vw,21px);font-weight:800;
  letter-spacing:-.018em;color:var(--green)}
.pres__sign-r{display:block;margin-top:4px;font-family:var(--font-mono);font-size:10.5px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(1,69,7,.6)}

@media(max-width:1024px){
  .pres__cols{columns:1}
  .pres__lede{max-width:none}
}
@media(max-width:900px){
  .pres__banner img{aspect-ratio:4/3;object-position:72% 26%;max-height:none}
  /* the clear area is too narrow to hold display type once she fills the frame,
     so the heading leaves the picture. The scrim goes with it: once .pres__over
     is static it no longer forms a stacking context and the z-index:1 gradient
     would paint straight over the heading. */
  .pres__banner::before{display:none}
  /* ::after is absolute to the figure, and here the caption is in flow inside
     it, so the fade would land on the last line of the heading */
  .pres__banner::after{display:none}
  .pres__over{position:static;width:auto;line-height:normal;
    padding:clamp(18px,3.6vw,26px) var(--pad) 0}
  .pres__h{font-size:clamp(28px,7.4vw,40px)}
  /* no overlap once the heading is below the picture — there is nothing to
     overlap onto but the heading itself */
  .pres__card{margin-top:clamp(20px,4vw,30px)}
  .pres__anniv{position:static;margin:0 0 clamp(20px,3.4vw,28px);
    padding-bottom:clamp(16px,2.6vw,22px);
    border-bottom:1px solid rgba(1,103,12,.16)}
  .pres__anniv-n{font-size:clamp(64px,15vw,92px)}
}
@media(max-width:560px){
  .pres__banner img{aspect-ratio:1/1;object-position:74% 24%}
  .pres__card{margin-left:calc(-1 * var(--pad) * .5);
    margin-right:calc(-1 * var(--pad) * .5)}
}

/* ===== Expression of interest ===== */
/* Two columns: the pitch and a collage of the forms we are asking for on the
   left, the form itself on the right. The photographs do the persuading so
   the form can stay plain. */
.eoi{position:relative;overflow:hidden;background:var(--cream)}
.eoi::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 40% at 84% 10%, rgba(249,211,29,.26), transparent 70%),
    radial-gradient(38% 40% at 8% 92%, rgba(1,167,60,.10), transparent 72%)}
.eoi > .wrap{position:relative;z-index:1;max-width:1240px}

.eoi__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(34px,4.4vw,76px);align-items:start}

.eoi__head{margin-bottom:clamp(22px,2.8vw,32px)}
.eoi__head .h2{margin-bottom:clamp(12px,1.6vw,18px)}
.eoi__lede{max-width:42ch;margin:0;font-size:clamp(16px,1.6vw,19px)}

/* the collage: one tall frame, two stacked beside it, tuned so the three
   photographs read as one object rather than three thumbnails */
.eoi__art{position:relative;display:grid;
  grid-template-columns:1.22fr 1fr;grid-template-rows:auto auto;
  gap:clamp(10px,1.2vw,16px);margin-bottom:clamp(24px,3vw,34px)}
.eoi__shot{margin:0;overflow:hidden;border-radius:18px;
  box-shadow:0 16px 38px rgba(1,63,6,.16);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),
             box-shadow .45s ease}
.eoi__shot--tall{grid-row:1/3}
.eoi__shot img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.eoi__shot--tall img{aspect-ratio:3/4.1}
.eoi__shot:not(.eoi__shot--tall) img{aspect-ratio:4/3.15}
.eoi__art:hover .eoi__shot{box-shadow:0 20px 44px rgba(1,63,6,.2)}
.eoi__shot:hover{transform:translateY(-3px)}
.eoi__shot:hover img{transform:scale(1.05)}

/* a small badge tucked into the seam, so the collage has a focal point */
.eoi__badge{position:absolute;left:calc(1.22 / 2.22 * 100%);bottom:clamp(10px,1.6vw,20px);
  transform:translateX(-50%);margin:0;z-index:2;
  padding:11px 18px;border-radius:999px;text-align:center;
  background:var(--yellow);color:var(--green-dark);
  box-shadow:0 12px 28px rgba(1,63,6,.26)}
.eoi__badge span{display:block;font-family:var(--font-mono);font-size:9.5px;
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(1,63,6,.62)}
.eoi__badge strong{display:block;font-size:14px;font-weight:800;
  letter-spacing:-.01em;margin-top:1px}

.eoi__small{margin:0;max-width:52ch;font-size:13.5px;line-height:1.6;
  color:rgba(1,69,7,.8)}
.eoi__small strong{color:var(--green)}
.eoi__credit{display:block;margin-top:6px;font-family:var(--font-mono);
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(1,69,7,.5)}

/* what happens after you press send — the three pills that used to sit here
   just repeated the checkboxes in the form */
.eoi__steps{list-style:none;margin:0 0 clamp(22px,2.6vw,32px);padding:0;
  display:grid;gap:clamp(14px,1.6vw,18px);max-width:46ch}
.eoi__steps li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:14px;align-items:start}
.eoi__step-n{display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:50%;background:var(--green);color:var(--yellow);
  font-family:var(--font-mono);font-size:13px;font-weight:600;
  box-shadow:0 6px 16px rgba(1,63,6,.24)}
.eoi__step-b{display:block;min-width:0;padding-top:2px}
.eoi__step-b strong{display:block;font-size:15.5px;font-weight:700;
  letter-spacing:-.01em;color:var(--green-dark);margin-bottom:3px}
.eoi__step-b span{display:block;font-size:14px;line-height:1.58;
  color:rgba(1,69,7,.76)}
/* a hairline down the gutter, so the three read as one sequence */
.eoi__steps li{position:relative}
.eoi__steps li:not(:last-child)::before{content:"";position:absolute;
  left:15px;top:34px;bottom:calc(-1 * clamp(14px,1.6vw,18px));
  width:1.5px;background:linear-gradient(rgba(1,103,12,.28),rgba(1,103,12,.06))}

/* the slot the form will occupy */
.eoi__slot{display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:clamp(34px,4.4vw,58px) clamp(24px,3vw,40px);
  border-radius:22px;background:var(--green);color:#fff;
  box-shadow:0 24px 54px rgba(1,63,6,.28)}
.eoi__icon{display:grid;place-items:center;width:50px;height:50px;
  border-radius:15px;background:rgba(249,211,29,.18);margin-bottom:20px}
.eoi__icon svg{width:24px;height:24px;fill:none;stroke:var(--yellow);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.eoi__slot-title{margin:0 0 10px;font-size:clamp(20px,2.1vw,26px);
  font-weight:800;letter-spacing:-.015em;color:#fff}
.eoi__slot-text{margin:0 0 clamp(22px,2.6vw,30px);font-size:15px;
  line-height:1.6;color:rgba(255,255,255,.85);max-width:44ch}
.eoi__cta{display:inline-flex;align-items:center;gap:10px;
  background:var(--yellow);color:var(--green-dark);text-decoration:none;
  padding:15px 30px;border-radius:999px;font-weight:800;font-size:15px;
  transition:gap .28s cubic-bezier(.22,.61,.36,1),
             transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease}
.eoi__cta:hover{gap:15px;transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(249,211,29,.34)}
.eoi__cta svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.eoi__slot-note{margin:15px 0 0;font-family:var(--font-mono);font-size:10px;
  font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}

/* the form itself — same green card as the slot it replaced */
.eoi__form{position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(28px,3.6vw,46px) clamp(22px,3vw,40px);
  border-radius:24px;color:#fff;
  background:linear-gradient(168deg,#04780f 0%,var(--green) 42%,#014f09 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,
             0 28px 60px -20px rgba(1,63,6,.5)}
/* a warm bloom behind the first fields so the card is not one flat slab
   over its whole height */
.eoi__form::before{content:"";position:absolute;z-index:-1;
  inset:-30% -20% auto -20%;height:70%;
  background:radial-gradient(60% 100% at 70% 0,rgba(249,211,29,.16),transparent 70%)}
.eoi__fields{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,1.9vw,22px) clamp(16px,2vw,24px)}
.fld{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.fld--wide{grid-column:1/-1}
/* honeypot: off-screen rather than display:none, which some bots skip */
.fld--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fld label{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.9);
  letter-spacing:.005em}
.fld__req{color:var(--yellow)}
.fld__hint{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.62)}

.fld input,.fld select,.fld textarea{
  font:inherit;font-size:15px;color:#fff;width:100%;
  padding:13px 15px;border-radius:12px;
  background:rgba(255,255,255,.09);
  border:1.5px solid rgba(255,255,255,.22);
  transition:border-color .24s ease,background .24s ease,box-shadow .24s ease}
.fld textarea{resize:vertical;min-height:96px;line-height:1.55}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.45)}
.fld select{appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9D31D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.fld select option{color:var(--green-dark);background:#fff}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:rgba(255,255,255,.4)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;
  border-color:var(--yellow);background:rgba(255,255,255,.14);
  box-shadow:0 0 0 3px rgba(249,211,29,.24)}
.fld[data-invalid] input,.fld[data-invalid] select,.fld[data-invalid] textarea{
  border-color:#FFB4A2;box-shadow:0 0 0 3px rgba(255,180,162,.2)}
.fld__err{margin:0;font-size:12.5px;font-weight:600;color:#FFC9BC}

/* checkbox / radio groups — a bordered set so the options read as one answer */
/* --- EOI: the "send us a video" note ------------------------------------- */
.eoi__note{display:block;   /* .fld is a flex column; margins govern here */
  margin-top:6px;padding:24px 26px 22px;border-radius:20px;position:relative;
  overflow:hidden;isolation:isolate;
  background:linear-gradient(158deg,rgba(255,255,255,.13),rgba(255,255,255,.05) 58%);
  border:1px solid rgba(249,211,29,.3);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 18px 40px -28px rgba(0,0,0,.7)}
.eoi__note::before{content:"";position:absolute;z-index:-1;inset:-60% -30% auto auto;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(249,211,29,.2),transparent 68%)}

.note__head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.note__badge{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:var(--yellow);color:#0d4a12;
  box-shadow:0 6px 18px -8px rgba(249,211,29,.9)}
.note__badge .ico{width:25px;height:25px;fill:currentColor}
.note__headings{min-width:0}
.note__kicker{margin:0 0 3px;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);font-weight:600}
.note__title{margin:0;font-size:17px;line-height:1.3;font-weight:700;color:#fff;letter-spacing:-.01em}

.note__lede{margin:0 0 16px;font-size:14.5px;line-height:1.62;color:rgba(255,255,255,.88)}
.note__lede strong{color:#fff;font-weight:700}

.note__msg{margin:0 0 14px;padding:13px 15px;border-radius:13px;
  background:rgba(0,0,0,.24);border:1px dashed rgba(255,255,255,.24)}
.note__msg-label{display:block;margin-bottom:8px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600}
.note__msg-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.note__code{flex:1 1 auto;min-width:0;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:13px;line-height:1.5;color:var(--yellow);word-break:break-word}
.note__copy{flex:none;padding:6px 13px;border-radius:8px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.02em;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);color:#fff;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.note__copy:hover{background:rgba(249,211,29,.2);border-color:rgba(249,211,29,.6)}
.note__copy:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.note__copy[data-done]{background:var(--yellow);border-color:var(--yellow);color:#0d4a12}

.note__wa{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;
  text-decoration:none;font-size:14.5px;font-weight:700;letter-spacing:-.005em;
  background:var(--yellow);color:#0d4a12;border:1px solid transparent;
  box-shadow:0 10px 26px -14px rgba(249,211,29,.95);
  transition:transform .2s ease,box-shadow .2s ease}
.note__wa .ico{width:19px;height:19px;fill:currentColor;flex:none}
.note__wa-text{min-width:0}
.note__wa-alt{display:none}   /* the number takes its place on wide screens */
.note__wa:hover{transform:translateY(-1.5px);box-shadow:0 14px 30px -13px rgba(249,211,29,1)}
.note__wa:focus-visible{outline:2px solid #fff;outline-offset:3px}

.note__fine{margin:16px 0 0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.72)}

.note__foot{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;
  margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);
  font-size:13px;color:rgba(255,255,255,.6)}
.note__foot-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.45)}
.note__foot a{color:rgba(255,255,255,.9);text-decoration:none;
  border-bottom:1px solid rgba(249,211,29,.55);padding-bottom:1px;
  transition:color .2s ease,border-color .2s ease}
.note__foot a:hover{color:var(--yellow);border-color:var(--yellow)}

@media(max-width:520px){
  .eoi__note{padding:20px 18px 18px}
  .note__title{font-size:15.5px}
  /* "Message on WhatsApp" — tapping opens the chat, so the number is noise,
     and Anees is named in the sentence right above. Keeps it to one line. */
  .note__wa{width:100%;justify-content:center;font-size:13.5px;padding:13px 16px;gap:9px}
  .note__wa-who,.note__wa-num{display:none}
  .note__wa-alt{display:inline}
  .note__msg-row{gap:12px}
  .note__copy{width:100%;padding:9px 13px}
  .note__foot{gap:6px 12px}
}
.fld--set{border:0;margin:0;padding:0;min-width:0}
.fld--set legend{padding:0;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.9)}
.fld--set .fld__hint{display:block;margin:6px 0 12px}
.opts{display:grid;gap:9px}
.opts--row{grid-auto-flow:column;grid-auto-columns:max-content;gap:10px}
.opt{display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:11px 15px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.2);
  font-size:14.5px;color:rgba(255,255,255,.92);
  transition:border-color .22s ease,background .22s ease}
.opt:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.11)}
.opt input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--yellow);cursor:pointer}
.opt:has(input:checked){border-color:var(--yellow);background:rgba(249,211,29,.16)}
.opt:has(input:focus-visible){outline:2px solid var(--yellow);outline-offset:2px}
@media(max-width:520px){.opts--row{grid-auto-flow:row;grid-auto-columns:auto}}

.fld--check{flex-direction:row;align-items:flex-start;gap:12px;
  margin-top:clamp(2px,.6vw,6px)}
.fld--check input{width:20px;height:20px;flex:none;margin-top:1px;padding:0;
  border-radius:6px;accent-color:var(--yellow);cursor:pointer}
.fld--check label{font-weight:500;line-height:1.55;color:rgba(255,255,255,.85)}

.eoi__actions{display:flex;align-items:center;flex-wrap:wrap;
  gap:14px clamp(16px,2vw,24px);margin-top:clamp(22px,2.8vw,32px)}
.eoi__cta[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.eoi__cta[disabled]:hover{gap:10px;transform:none;box-shadow:none}
.eoi__actions .eoi__slot-note{margin:0;max-width:34ch;text-transform:none;
  font-family:var(--font);font-size:13px;letter-spacing:0;
  color:rgba(255,255,255,.66)}
.eoi__form.is-sending .eoi__cta{opacity:.6;pointer-events:none}

.eoi__done{display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:clamp(38px,5vw,64px) clamp(24px,3vw,40px);
  border-radius:22px;background:var(--green);color:#fff;
  box-shadow:0 24px 54px rgba(1,63,6,.28)}

@media(max-width:980px){
  .eoi__grid{grid-template-columns:1fr;gap:clamp(28px,4vw,44px)}
  .eoi__lede{max-width:56ch}
  .eoi__art{max-width:560px}
}
@media(max-width:640px){
  .eoi__fields{grid-template-columns:1fr}
  .eoi__actions{flex-direction:column;align-items:stretch}
  .eoi__actions .eoi__cta{justify-content:center}
  .eoi__actions .eoi__slot-note{max-width:none;text-align:center}
  .eoi__badge{padding:9px 15px}
  .eoi__badge strong{font-size:13px}
}

.eoi__follow{margin:clamp(20px,2.4vw,28px) 0 0;text-align:center;
  font-size:14px;color:rgba(1,69,7,.78)}
.eoi__follow a{color:var(--green);font-weight:700;text-decoration:none;
  border-bottom:1.5px solid rgba(1,103,12,.4);padding-bottom:2px;
  transition:color .26s ease,border-color .26s ease}
.eoi__follow a:hover{color:var(--green-dark);border-color:var(--green-dark)}

.fineprint{margin:18px 0 30px;font-size:14px;max-width:60ch;color:var(--green-dark);opacity:.85}

/* ===== Tickets ===== */
/* Ticket-stub shape only — the perforation, the punched notches and the stub.
   Colour stays on the brand: cream card, green ink, on the yellow ground. */
/* The cap goes on the wrap, not the inner blocks. Capping those left the
   heading at full width and a dead 140px strip down the right of the section;
   on the wrap it centres the whole thing and every block shares an edge. */
.tix > .wrap{max-width:1080px}
.tix__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,34px)}
.tix__lede{max-width:52ch;margin-bottom:0}

/* live early-bird deadline, filled by the countdown script */
.tix__deadline{display:inline-flex;align-items:center;gap:10px;margin:0;
  padding:11px 20px;border-radius:999px;
  background:var(--green);color:var(--yellow);
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.tix__deadline i{width:7px;height:7px;border-radius:50%;background:var(--yellow);
  flex:none;animation:pulse 2.4s ease-in-out infinite}

/* master-detail: the deck picks, the panel explains.
   stretch, not start — the deck ran 88px past the bottom of the panel */
.tix__pick{display:grid;gap:clamp(20px,2.6vw,38px);
  grid-template-columns:1fr;align-items:stretch}
.tix__detail{display:grid}
/* the deck column is sized so each card lands near 2.6:1 — a stub's proportion.
   At the old .92fr they came out 5.4:1, which reads as a bar, not a ticket. */
@media(min-width:900px){
  .tix__pick{grid-template-columns:minmax(250px,.62fr) minmax(0,1.38fr)}
}

/* 1fr rows equalise all four — VIP came out 7px short of the rest because it
   carries no SAVE badge, which left a ragged edge down the stack */
.tix__list{--stub:clamp(46px,4vw,56px);
  list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-auto-rows:1fr}
.tix__item{position:relative;display:grid}

.tix__card{width:100%;text-align:left;border:0;font:inherit;cursor:pointer;
  position:relative;display:grid;grid-template-columns:1fr var(--stub);
  /* overflow:hidden on the body zeroes its automatic minimum size, so the card
     must be tall enough for its own content or the watermark clip eats it */
  /* no fixed height — the padding sizes it, so there is no dead space */
  border-radius:14px;text-decoration:none;color:var(--green-dark);
  background:var(--cream);isolation:isolate;
  /* the ring in section-yellow is what separates one ticket from the next in
     the stack — without it the deck reads as a single block */
  box-shadow:0 0 0 4px var(--yellow),
             0 14px 30px rgba(1,63,6,.2),
             inset 0 0 0 1px rgba(1,103,12,.14);
  transition:transform .34s cubic-bezier(.22,.61,.36,1),box-shadow .34s ease}
.tix__card:hover{transform:translateY(-3px);
  box-shadow:0 0 0 4px var(--yellow),
             0 22px 44px rgba(1,63,6,.28),
             inset 0 0 0 1px rgba(1,103,12,.22)}
.tix__card:focus-visible{outline:3px solid var(--green-dark);outline-offset:4px}

/* No notches. Against the 4px yellow ring they stopped reading as bites and
   turned into yellow lozenges hanging off the edge. The striped stub and the
   dashed tear line carry the ticket without them. */

/* The price sits in its own right-hand column so all four line up down the
   deck — previously the save badge shoved each one to a different x and the
   column read as ragged. */
.tix__body{position:relative;min-width:0;
  padding:clamp(18px,2vw,26px) clamp(17px,1.8vw,22px);
  display:grid;align-content:center;align-items:baseline;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "tier   amount"
    "label  save";
  column-gap:clamp(14px,2vw,26px);row-gap:7px}
/* the tier now carries real weight — 900 finally loads */
.tix__tier{grid-area:tier;align-self:baseline;
  font-size:clamp(16px,1.4vw,19px);font-weight:900;line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:var(--green)}
.tix__save{grid-area:save;align-self:start;justify-self:end;
  padding:4px 10px;border-radius:999px;white-space:nowrap;
  background:rgba(1,103,12,.12);
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--green)}
.tix__amount{grid-area:amount;justify-self:end;align-self:baseline;
  font-size:clamp(30px,2.8vw,38px);font-weight:900;line-height:.86;
  letter-spacing:-.045em;color:var(--green);font-variant-numeric:tabular-nums}
/* .64 and .60 measured 4.0 and 3.6 against the cream — under the 4.5 floor */
.tix__label{grid-area:label;align-self:start;
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(1,69,7,.78)}
/* the changeover date belongs in the panel, not repeated down the deck */
.tix__then{display:none}

/* the stub, separated by a dashed tear line; it shifts as if tearing on hover */
/* The stub is now a torn edge, not a panel. Four cards each repeating
   "1 NOV 26" down the deck was noise, and the barcode encoded nothing. */
/* the diagonal band from the boarding pass, carried on the stub */
.tix__stub{position:relative;display:grid;place-items:center;
  border-left:1.5px dashed rgba(1,103,12,.3);
  background:repeating-linear-gradient(45deg,
    rgba(1,103,12,.09) 0 4px, transparent 4px 10px)}
.tix__item--feature .tix__stub{
  background:repeating-linear-gradient(45deg,
    rgba(249,211,29,.16) 0 4px, transparent 4px 10px)}
.tix__date{writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--font-mono);font-size:8.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(1,69,7,.42);
  white-space:nowrap;transition:color .3s ease}
.tix__card[aria-selected="true"] .tix__date{color:var(--green)}
.tix__item--feature .tix__stub{border-left-color:rgba(249,211,29,.45)}
.tix__item--feature .tix__date{color:rgba(249,211,29,.6)}
.tix__item--feature .tix__card[aria-selected="true"] .tix__date{color:var(--yellow)}

/* one card inverts — the tier with the biggest early-bird saving */
.tix__item--feature .tix__card{background:var(--green);color:var(--yellow);
  box-shadow:0 14px 34px rgba(1,63,6,.34),
             inset 0 0 0 1px rgba(249,211,29,.26)}
.tix__item--feature .tix__body::before{opacity:.15;
  background-image:url("../assets/logo/frond-mark-white.webp")}
.tix__item--feature .tix__date{color:var(--yellow)}
.tix__item--feature .tix__go{stroke:var(--yellow)}
.tix__item--feature .tix__tier{color:var(--yellow)}
/* yellow on green is 4.87:1 — it has no headroom to be faded, so none of these
   carry opacity the way the cream card's ink can */
.tix__item--feature .tix__tier{color:var(--yellow)}
.tix__item--feature .tix__amount{color:var(--yellow)}
.tix__item--feature .tix__label{color:var(--yellow)}
.tix__item--feature .tix__then{color:#fff}
.tix__item--feature .tix__save{background:var(--yellow);color:var(--green-dark)}
.tix__item--feature .tix__stub{border-left-color:rgba(249,211,29,.4)}

/* The overlap is gone. Each card needed ~128px to show tier, price and saving,
   but the stack exposed only 96px, so it clipped the save badge on every card
   underneath — hiding the information the section exists to present, and
   buying nothing in return. */

/* the selected card reads as chosen, not merely hovered */
.tix__card[aria-selected="true"]{
  box-shadow:0 0 0 4px var(--yellow),
             0 26px 54px rgba(1,63,6,.32),
             inset 0 0 0 2px var(--green)}
.tix__item--feature .tix__card[aria-selected="true"]{
  box-shadow:0 0 0 4px var(--yellow),
             0 26px 54px rgba(1,63,6,.42),
             inset 0 0 0 2px var(--yellow)}
/* No opacity dimming on the unselected cards: the cream is translucent against
   the yellow ground and they went muddy. The inset ring carries the state. */
.tix__card[aria-selected="false"] .tix__tier{color:rgba(1,103,12,.82)}
.tix__card[aria-selected="false"]:hover .tix__tier{color:var(--green)}
/* the green card needs the inverse, or the tier goes green-on-green and the
   word disappears entirely */
.tix__item--feature .tix__card[aria-selected="false"] .tix__tier{color:rgba(249,211,29,.88)}
.tix__item--feature .tix__card[aria-selected="false"]:hover .tix__tier{color:var(--yellow)}

/* ---- the detail panel ---- */
.tixd{--tixd-stub:clamp(72px,6.4vw,96px);
  position:relative;overflow:hidden;background:var(--cream);border-radius:18px;
  padding:clamp(24px,2.8vw,36px);
  padding-right:calc(var(--tixd-stub) + clamp(24px,2.8vw,36px));
  display:flex;flex-direction:column;
  box-shadow:0 0 0 4px var(--yellow),
             0 16px 38px rgba(1,63,6,.2),
             inset 0 0 0 1px rgba(1,103,12,.13)}
/* Aurora — soft green and yellow blooms across the panel. Kept pale because the
   ink here is green on cream and this ground sits directly behind it. */
.tixd::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 62% at 88% 18%, rgba(1,167,60,.16), transparent 70%),
    radial-gradient(44% 54% at 66% 96%, rgba(249,211,29,.30), transparent 72%),
    radial-gradient(38% 48% at 8% 92%, rgba(1,167,60,.11), transparent 74%)}
/* the frond, one large quiet mark, riding on the aurora */
.tixd::after{content:"";position:absolute;right:calc(var(--tixd-stub) - 40px);bottom:-70px;
  width:270px;height:176px;opacity:.1;z-index:0;pointer-events:none;
  background:url("../assets/logo/frond-mark-green.webp") center/contain no-repeat}
.tixd > *{position:relative;z-index:1}

/* the panel is the ticket you tore off the deck, so it carries a stub too */
.tixd__stub{position:absolute;right:0;top:0;bottom:0;z-index:1;
  width:var(--tixd-stub);display:grid;place-items:center;
  border-left:1.5px dashed rgba(1,103,12,.3);
  background:repeating-linear-gradient(45deg,
    rgba(1,103,12,.09) 0 4px, transparent 4px 10px)}
.tixd__stubtext{writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(1,69,7,.6);
  white-space:nowrap}
.tixd__tier{margin:0;font-family:var(--font-mono);
  font-size:clamp(11px,1.05vw,13px);font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(1,69,7,.76)}
/* the label sits under the figure rather than floating beside its baseline */
.tixd__price{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  margin:clamp(10px,1.2vw,15px) 0 0;
  font-size:clamp(48px,5.4vw,74px);font-weight:900;line-height:.86;
  letter-spacing:-.05em;color:var(--green);font-variant-numeric:tabular-nums}
.tixd__label{align-self:flex-start;
  padding:5px 12px;border-radius:999px;background:rgba(1,103,12,.11);
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
/* the three facts run across rather than stacking — they were leaving the
   panel's whole right half empty */
.tixd__facts{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;
  justify-content:start;gap:7px clamp(26px,3.6vw,54px);
  margin:clamp(20px,2.4vw,30px) 0 0;
  border-top:1.5px solid rgba(1,103,12,.28);padding-top:clamp(18px,2vw,24px)}
/* .72 measured 4.22:1 where the yellow and green blooms overlap — the aurora
   costs about 0.75 of contrast, so the labels have to carry more ink */
.tixd__facts dt{font-family:var(--font-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(1,69,7,.86)}
.tixd__facts dd{margin:0;font-size:15px;font-weight:700;color:var(--green-dark);
  white-space:nowrap}
@media(max-width:560px){
  .tixd__facts{grid-auto-flow:row;grid-template-rows:none;
    grid-template-columns:auto 1fr;gap:10px 20px}
  .tixd__facts dd{white-space:normal}
}
.tixd__note{margin:clamp(16px,1.8vw,22px) 0 clamp(20px,2.4vw,28px);
  font-size:13px;line-height:1.55;color:rgba(1,69,7,.82)}
/* auto pushes the CTA to the foot of the panel, so the extra height the
   stretch introduces lands as breathing room rather than a gap mid-card */
.tixd__cta{align-self:flex-start;display:inline-flex;align-items:center;gap:11px;
  margin-top:auto;padding-top:0;
  background:var(--green);color:var(--yellow);text-decoration:none;
  padding:15px 28px;border-radius:999px;font-weight:800;font-size:15px;
  transition:background .28s ease,gap .28s cubic-bezier(.22,.61,.36,1)}
.tixd__cta:hover{background:var(--green-dark);gap:16px}
.tixd__cta svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* With no script every panel stays visible, so they need separating. Both parts
   must be :not([hidden]) — the adjacent sibling selector still matches a
   display:none neighbour, which was pushing every panel but the first down 14px
   and leaving the deck and the panel misaligned at the top. */
.tixd:not([hidden]) + .tixd:not([hidden]){margin-top:14px}

@media(max-width:420px){
  .tix__list{--stub:50px}
  .tix__card{min-height:124px}
  .tix__body{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"tier amount" "label then" "save save";
    row-gap:7px}
  .tix__save{justify-self:start;margin-top:3px}
  .tix__deadline{font-size:10px;letter-spacing:.1em;padding:10px 16px}
}

/* the base of the section — practical detail, set plainly on the yellow so it
   does not add a third card to a section already carrying two */
.tixn{display:grid;gap:clamp(22px,3vw,44px);
  grid-template-columns:1fr;
  margin-top:clamp(30px,3.6vw,48px);padding-top:clamp(24px,2.8vw,34px);
  border-top:1.5px solid rgba(1,69,7,.26)}
@media(min-width:760px){.tixn{grid-template-columns:1.15fr .8fr 1.15fr}}
.tixn__lab{margin:0 0 clamp(11px,1.2vw,15px);
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.tixn__txt{margin:0 0 12px;font-size:14px;line-height:1.6;color:rgba(1,69,7,.88);
  max-width:36ch}
.tixn__act{margin:0;display:flex;flex-direction:column;gap:5px}
.tixn__act a{font-size:14px;font-weight:700;color:var(--green-dark);
  text-decoration:none;border-bottom:1.5px solid rgba(1,69,7,.32);
  align-self:flex-start;padding-bottom:2px;
  transition:border-color .26s ease,color .26s ease}
.tixn__act a:hover{color:var(--green);border-color:var(--green)}

.tixn__hours{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0}
.tixn__hours dt{font-size:14px;color:rgba(1,69,7,.78)}
.tixn__hours dd{margin:0;font-size:14px;font-weight:700;color:var(--green-dark);
  font-variant-numeric:tabular-nums}

.tixn__list{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.tixn__list li{position:relative;padding-left:19px;font-size:14px;line-height:1.55;
  color:rgba(1,69,7,.88);max-width:40ch}
.tixn__list li::before{content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;background:var(--green);opacity:.55}

/* ===== Samatha ===== */
/* Their mark is red, orange and near-black. It gets a neutral ground and a
   bloom drawn from its OWN palette — the Keraleeyam yellow behind it clashed. */
.sam{position:relative;overflow:hidden}
.sam__grid{display:grid;gap:clamp(30px,4vw,64px);grid-template-columns:1fr;
  align-items:center}
@media(min-width:860px){
  .sam__grid{grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr)}
}

.sam__mark{position:relative;margin:0;display:flex;flex-direction:column;
  align-items:center;gap:clamp(16px,2vw,24px);
  padding:clamp(26px,3.2vw,44px) clamp(20px,2.4vw,34px);
  border-radius:22px;background:#FFFDF8;
  box-shadow:inset 0 0 0 1px rgba(160,60,30,.14),0 10px 28px rgba(120,40,20,.06);
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s ease}
.sam__mark:hover{transform:translateY(-5px);
  box-shadow:inset 0 0 0 1px rgba(160,60,30,.2),0 24px 52px rgba(120,40,20,.16)}
/* the bloom drifts continuously and leans in on hover */
.sam__mark::before{content:"";position:absolute;inset:0;z-index:0;
  border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(58% 52% at 26% 16%, rgba(233,106,42,.14), transparent 70%),
    radial-gradient(52% 46% at 84% 88%, rgba(166,32,38,.10), transparent 72%);
  animation:samDrift 16s ease-in-out infinite alternate;
  transition:opacity .5s ease}
.sam__mark:hover::before{opacity:1.0;filter:saturate(1.25)}
@keyframes samDrift{
  from{transform:scale(1) translate(0,0)}
  to  {transform:scale(1.1) translate(2%,-2%)}
}
.sam__mark img{position:relative;z-index:1;width:min(100%,236px);height:auto;
  transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.sam__mark:hover img{transform:scale(1.035)}
.sam__sym{position:relative;z-index:1;max-width:34ch;text-align:center;
  font-size:12.5px;line-height:1.55;color:rgba(20,12,10,.62)}

.sam__body{min-width:0}
.sam__lede{margin:0 0 clamp(14px,1.6vw,18px);
  font-size:clamp(19px,2.1vw,26px);line-height:1.4;font-weight:600;
  letter-spacing:-.015em;color:var(--green-dark);max-width:34ch}
.sam__name{margin:0 0 clamp(24px,2.8vw,34px);max-width:44ch;
  font-size:15px;line-height:1.6;color:rgba(17,17,17,.74)}
.sam__name em{font-style:normal;font-weight:800;color:var(--green)}

/* three streams as hairline rows, not boxes */
.sam__does{list-style:none;margin:0 0 clamp(24px,2.8vw,32px);padding:0;
  border-top:1px solid var(--rule)}
.sam__does li{position:relative;display:grid;gap:2px 26px;
  padding:clamp(13px,1.5vw,17px) 14px clamp(13px,1.5vw,17px) 0;
  border-bottom:1px solid var(--rule);
  transition:padding-left .42s cubic-bezier(.22,.61,.36,1)}
/* a tint sweeps in from the left on hover */
.sam__does li::before{content:"";position:absolute;inset:0 0 0 -14px;z-index:0;
  border-radius:8px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(1,103,12,.09),rgba(1,103,12,.02) 62%,transparent);
  transform:translateX(-8px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.22,.61,.36,1)}
.sam__does li:hover::before{opacity:1;transform:none}
.sam__does li:hover{padding-left:16px}
.sam__does li > *{position:relative;z-index:1}
@media(min-width:620px){
  .sam__does li{grid-template-columns:minmax(140px,.34fr) minmax(0,1fr);
    align-items:baseline}
}
.sam__doe{font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green);
  transition:color .32s ease}
.sam__does li:hover .sam__doe{color:var(--green-dark)}
.sam__det{font-size:15px;line-height:1.55;color:rgba(17,17,17,.8)}

/* staggered entrance, set by the observer in main.js */
.sam__does li{opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1),
             padding-left .42s cubic-bezier(.22,.61,.36,1)}
.sam__does.is-in li{opacity:1;transform:none}
.sam__does.is-in li:nth-child(1){transition-delay:.05s}
.sam__does.is-in li:nth-child(2){transition-delay:.15s}
.sam__does.is-in li:nth-child(3){transition-delay:.25s}
@media (prefers-reduced-motion:reduce){
  .sam__does li{opacity:1;transform:none}
}

.sam__link{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);text-decoration:none;
  border-bottom:1.5px solid rgba(1,103,12,.4);padding-bottom:3px;
  transition:color .26s ease,border-color .26s ease,gap .26s ease}
.sam__link:hover{color:var(--green-dark);border-color:var(--green-dark);gap:13px}
.sam__link svg{width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.sam__link:hover svg{transform:translate(2px,-2px)}

/* their three words, drifting. Full-bleed out of the wrap. */
.sam__marq{position:relative;overflow:hidden;
  margin:clamp(40px,5vw,72px) calc(-1 * var(--pad)) calc(-1 * clamp(56px,9vw,104px));
  padding:clamp(16px,1.8vw,22px) 0;
  border-top:1px solid var(--rule);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.sam__track{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);
  width:max-content;animation:samMarq 34s linear infinite}
.sam__marq:hover .sam__track{animation-play-state:paused}
.sam__track span{font-size:clamp(22px,3vw,40px);font-weight:900;line-height:1;
  letter-spacing:-.03em;text-transform:uppercase;color:rgba(1,103,12,.13)}
.sam__track i{flex:none;width:9px;height:9px;border-radius:50%;
  background:rgba(200,70,30,.3)}
@keyframes samMarq{to{transform:translateX(-50%)}}

/* ===== Virtual tour ===== */
/* A Matterport player is several megabytes of WebGL. It does not load until
   the reader asks for it — until then this is one image and a button. */
/* the section keeps its vertical rhythm but drops side padding, so the stage
   can run near the full width while the copy stays inside .wrap */
.vt{position:relative;overflow:hidden;isolation:isolate;
  /* with the copy stripped out the section collapsed to 2.09:1 against a 1.60:1
     photo, so cover was cropping a quarter of the frame away. Height restores it. */
  /* with the copy stripped out the section collapsed against a 1.6:1 photo, so
     cover was cropping a quarter of the frame away. Height restores it. */
  padding:clamp(64px,11vw,168px) 0;background:#0B1526}

/* the building at blue hour, left as shot — a yellow duotone would have killed
   the dusk sky and the warm soffit that make this photograph work */
.vt__bg{position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center 54%}
/* dark overlay, then a yellow aurora — kept low and centred so it blooms behind
   the panel and never sits under the headline, where it would flatten the type */
.vt::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(46% 40% at 20% 66%, rgba(249,211,29,.30), transparent 70%),
    radial-gradient(40% 34% at 80% 58%, rgba(90,215,135,.16), transparent 72%),
    radial-gradient(74% 46% at 52% 84%, rgba(249,211,29,.22), transparent 76%),
    linear-gradient(to bottom,
      rgba(5,11,20,.88) 0%, rgba(5,11,20,.72) 26%,
      rgba(5,11,20,.60) 58%, rgba(4,9,17,.90) 100%)}

/* masthead: display type at architectural scale, the panel crossing its feet */
.vt__masthead{position:relative;z-index:2;max-width:var(--max);margin:0 auto;
  padding:0 var(--pad);text-align:center}
.vt__kicker{margin:0 0 clamp(14px,1.6vw,20px);
  font-family:var(--font-mono);font-size:clamp(10px,.95vw,12px);font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.vt__title{margin:0;color:var(--yellow);text-transform:uppercase;
  font-size:clamp(52px,12.5vw,196px);font-weight:900;line-height:.84;
  letter-spacing:-.055em;text-wrap:balance;
  text-shadow:0 14px 60px rgba(0,0,0,.5)}

/* the panel is centred and rides up over the baseline of the title */
.vt__stage{position:relative;z-index:3;padding:0 var(--pad);
  /* measured: -3.9vw buried 38% of the cap height. This clips ~20% — the feet
     of the letters only, which is the whole point of the device. */
  margin-top:clamp(-44px,-2.4vw,-14px)}
/* below this the type is small enough that any overlap eats the word */
@media(max-width:760px){
  .vt__stage{margin-top:clamp(-20px,-2.2vw,-8px)}
  .vt__title{letter-spacing:-.04em}
}
@media (prefers-reduced-motion:no-preference){
  .vt__bg{will-change:transform}
}

/* the frosted window — dark glass, so the foyer reads through it */
.vt__window{position:relative;max-width:calc(var(--max) / 2);margin:0 auto;
  padding:0 clamp(12px,1.4vw,18px) clamp(12px,1.4vw,18px);
  border-radius:clamp(20px,2.2vw,30px);
  /* tinted dark, not white — the blurred foyer behind runs bright in places,
     and white-on-milk-glass fell to 3.6:1 there */
  /* the blue-hour photo is dark enough to let the glass stay transparent —
     measured 6.4:1 for tab text against the brightest part of the blur */
  background:rgba(8,16,26,.62);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:
    0 44px 96px rgba(0,0,0,.55),
    0 8px 24px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.26) inset,
    0 0 0 1px rgba(255,255,255,.05) inset}
/* the specular sheen that makes glass read as glass */
.vt__window::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(165deg,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,.05) 26%,
    transparent 52%)}
.vt__bar,.vt__frame{position:relative;z-index:1}

/* the tab strip */
.vt__bar{display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;padding:0;min-height:42px}
.vt__tab{display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:14px 14px 0 0;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.22);border-bottom:0;
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.92);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt__tabdot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--yellow);
  box-shadow:0 0 0 3px rgba(249,211,29,.2)}
.vt__pop{display:inline-flex;align-items:center;gap:7px;margin-bottom:9px;
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.78);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:2px;
  transition:border-color .26s ease,color .26s ease}
.vt__pop:hover{color:var(--yellow);border-color:var(--yellow)}
.vt__pop svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:620px){
  .vt__pop{font-size:9.5px;letter-spacing:.06em}
  .vt__tab{padding:8px 12px;letter-spacing:.08em}
}

.vt__venue{margin:clamp(18px,2.2vw,26px) 0 0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:5px}
.vt__venue strong{font-size:clamp(16px,1.5vw,19px);font-weight:800;
  letter-spacing:-.01em;color:#fff}
.vt__venue span{font-size:13.5px;color:rgba(255,255,255,.72)}
.vt__venue span + span{font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--yellow)}

/* the practical links the removed Venue section used to carry */
.vt__links{display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px clamp(16px,2.4vw,30px);margin:clamp(16px,2vw,24px) 0 0;
  position:relative;z-index:2}
.vt__links a{font-family:var(--font-mono);font-size:12.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:rgba(255,255,255,.82);padding-bottom:3px;
  border-bottom:1.5px solid rgba(255,255,255,.3);
  transition:color .26s ease,border-color .26s ease}
.vt__links a:hover{color:var(--yellow);border-color:var(--yellow)}

.vt__credit{margin:clamp(12px,1.4vw,16px) 0 0;text-align:center;
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.vt__credit a{color:rgba(255,255,255,.78);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.36);
  transition:color .26s ease,border-color .26s ease}
.vt__credit a:hover{color:var(--yellow);border-color:var(--yellow)}

/* the controls hint — never intercepts the tour, leaves once it has been used */
.vt__hint{position:absolute;left:50%;z-index:3;
  bottom:calc(clamp(12px,1.4vw,18px) + 13px);
  transform:translateX(-50%);
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px clamp(12px,1.5vw,20px);
  margin:0;padding:9px clamp(14px,1.5vw,20px);border-radius:999px;
  max-width:calc(100% - 2 * clamp(12px,1.4vw,18px) - 20px);
  pointer-events:none;
  background:rgba(6,12,20,.74);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.93);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.vt__hint > span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.vt__hint svg{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vt__hint.is-gone{opacity:0;transform:translateX(-50%) translateY(10px)}
.u-touch{display:none}
@media(hover:none){.u-fine{display:none}.u-touch{display:inline}}
@media(max-width:560px){.vt__hint{font-size:9px;letter-spacing:.05em;gap:3px 10px;padding:8px 12px}}

.vt__frame{position:relative;overflow:hidden;isolation:isolate;
  /* width is fixed at 100%, so max-height letterboxes the ratio rather than
     the ratio shrinking the box away from the edges */
  width:100%;aspect-ratio:16/9;min-height:300px;max-height:min(80vh,760px);
  /* square top-left so the tab and the frame read as one folder silhouette */
  border-radius:0 clamp(14px,1.5vw,20px) clamp(14px,1.5vw,20px) clamp(14px,1.5vw,20px);
  background:var(--green-dark);
  display:grid;place-items:center;gap:14px;
  align-content:center}
.vt__frond{position:absolute;right:-8%;bottom:-14%;z-index:0;
  height:150%;width:auto;max-width:none;opacity:.09;pointer-events:none}

.vt__start{position:relative;z-index:1;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 15px 14px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.10);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--font);font-size:clamp(15px,1.3vw,17px);font-weight:700;
  transition:background .3s ease,border-color .3s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
.vt__start:hover{background:rgba(255,255,255,.19);border-color:rgba(255,255,255,.7);
  transform:translateY(-2px)}
.vt__glyph{flex:none;width:42px;height:42px;border-radius:50%;
  background:var(--yellow);color:var(--green-dark);display:grid;place-items:center}
.vt__glyph svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.vt__cta{padding-right:12px}
.vt__cost{position:relative;z-index:1;margin:0;
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}

/* once asked for, the player takes the whole frame */
.vt__frame.is-live{display:block;background:#000}
.vt__iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* 16:9 is a letterbox slot on a phone — height beats ratio here */
@media(max-width:700px){
  .vt__frame{aspect-ratio:auto;height:min(66vh,520px);min-height:320px;max-height:none}
}


@media (prefers-reduced-motion:reduce){.vt__start:hover{transform:none}}

/* ===== Sponsors ===== */
.sponsors{display:grid;gap:28px;align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:20px;min-height:60px}

/* ===== Culture bridge ===== */
/* Edge to edge, no card, no radius, no side margins. Every plane is the same
   absolute box at the same size with the same object-fit, so they stay in
   register no matter how the section is cropped. */
.cbz{position:relative;overflow:hidden;isolation:isolate;
  width:100%;background:var(--green-dark);
  height:clamp(620px,64vh,760px);min-height:620px;
  display:flex;align-items:center}

.cbz__scene{position:absolute;inset:0;z-index:0;perspective:1400px;
  transform-style:preserve-3d}
/* The 1.18 baseline is headroom, not styling: the planes travel up to ~44px
   and cover leaves no slack at some aspect ratios, so without it a layer edge
   would slide into frame. It costs ~9% of the picture, which lands on foliage
   at the far left and right — the houseboat, Opera House and bridge all stay
   well inside. */
.cbz__layer{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:58% 52%;
  transform:translate3d(0,0,0) scale(1.18);
  will-change:transform;pointer-events:none;user-select:none}

.cbz__layer--atmos{mix-blend-mode:soft-light;opacity:.9}

/* warm light that follows the cursor across the water */
.cbz__glow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  mix-blend-mode:screen;transition:opacity .5s ease;
  background:radial-gradient(38vw 38vw at var(--gx,50%) var(--gy,50%),
    rgba(249,211,29,.30), rgba(249,211,29,.10) 42%, transparent 68%)}
.cbz.is-live .cbz__glow{opacity:1}

/* readability only where the copy is — the rest of the picture stays open */
.cbz__veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(1,45,7,.90) 0%, rgba(1,45,7,.74) 22%,
    rgba(1,45,7,.40) 40%, rgba(1,45,7,.10) 58%, transparent 70%)}

.cbz__inner{position:relative;z-index:3;width:100%;will-change:transform;
  max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.cbz__eyebrow{margin:0 0 clamp(16px,1.8vw,22px);max-width:560px;
  font-family:var(--font-mono);font-size:clamp(11px,1.05vw,13px);font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(249,211,29,.92)}
.cbz__title{margin:0 0 clamp(16px,2vw,24px);max-width:560px;
  font-family:var(--font);font-size:clamp(34px,4vw,58px);font-weight:600;
  line-height:1.04;letter-spacing:-.03em;color:var(--yellow);
  text-shadow:0 2px 26px rgba(1,45,7,.5)}
.cbz__lede{margin:0 0 clamp(24px,3vw,34px);max-width:560px;
  font-size:clamp(15px,1.45vw,18px);line-height:1.62;color:var(--paper);
  text-shadow:0 1px 16px rgba(1,45,7,.5)}

.cbz__cta{display:inline-flex;align-items:center;gap:10px;
  background:var(--yellow);color:var(--green-dark);text-decoration:none;
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;padding:14px 22px;border-radius:999px;
  transition:background .3s ease,gap .3s cubic-bezier(.22,.61,.36,1)}
.cbz__cta:hover{background:#FFE04A;gap:16px}
.cbz__cta svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* the two labels the artwork's own comp carried, rebuilt as live text */
.cbz__tags-row{display:contents}
.cbz__tag{position:absolute;z-index:3;bottom:clamp(20px,3vw,34px);margin:0;
  display:flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:999px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cbz__tag span{opacity:.62}
.cbz__tag--k{left:var(--pad);background:rgba(1,63,6,.62);color:#fff;
  border:1px solid rgba(255,255,255,.2)}
.cbz__tag--a{right:var(--pad);background:rgba(249,211,29,.9);color:var(--green-dark);
  border:1px solid rgba(1,63,6,.16)}

/* Below 1025 the section box gets much taller than the artwork's 2.19:1, so
   cover crops the width hard — a 560px copy column then sits on the Opera
   House and the bridge, and Kerala's palms fall off the left edge. Stacking
   is the only layout that keeps both countries whole, so tablets stack too. */
@media(max-width:1024px){
  .cbz{display:block;height:auto;min-height:0;
    padding-bottom:clamp(26px,6vw,40px)}
  .cbz__scene{position:relative;aspect-ratio:1855/848}
  .cbz__layer{object-position:50% 50%;transform:none;scale:1}
  .cbz__veil,.cbz__glow{display:none}
  .cbz__inner{transform:none!important}
  .cbz__inner{padding:clamp(28px,5vw,44px) var(--pad) clamp(20px,3vw,28px)}
  .cbz__title{max-width:none}
  .cbz__lede{max-width:62ch}
  .cbz__tag{position:static;display:inline-flex;bottom:auto;left:auto;right:auto;
    margin:0 10px 10px 0}
  .cbz__tags-row{display:flex;flex-wrap:wrap;padding:0 var(--pad)}
}
@media (prefers-reduced-motion:reduce){
  .cbz__layer{transform:none!important}
}

/* ===== Footer ===== */
/* One block. The artwork is anchored to the bottom of the footer and the text
   sits on the sky above the wordmark, over a veil in #044708 — the exact
   colour of the artwork's top row, so the veil and the sky are one surface. */
.footer{position:relative;overflow:hidden;isolation:isolate;
  background:#044708;color:#fff}

.fscene{position:absolute;left:0;right:0;bottom:0;z-index:0;
  aspect-ratio:1672/941;overflow:hidden}
.fscene__layer{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% center;
  transform:translate3d(0,0,0) scale(1.1);
  will-change:transform;pointer-events:none;user-select:none}
.fscene__layer:first-of-type{z-index:1}
.fscene__type{z-index:2}
.fscene__layer:nth-of-type(3){z-index:3}

/* --reveal is how much of the artwork stays clear of the veil, so the veil is
   driven by the content rather than a guessed height. The fade is measured
   from the veil's own bottom edge in px, so it stays the same band at every
   width instead of stretching with the element. */
.footer{--reveal:clamp(150px,25vw,360px);--fade:clamp(130px,17vw,250px)}
.footer__veil{position:absolute;left:0;right:0;top:0;bottom:var(--reveal);
  z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(4,71,8,0) 0,
    rgba(4,71,8,.88) calc(var(--fade) * .55), #044708 var(--fade))}

.footer__inner{position:relative;z-index:2;
  padding:clamp(46px,6vw,80px) var(--pad)
          calc(var(--reveal) + var(--fade) + clamp(10px,1.4vw,22px))}
.footer__cols{max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.45fr) max-content;
  gap:clamp(28px,3vw,48px);align-items:start}

.footer__brand{display:block;line-height:0;margin-bottom:18px}
.footer__brand img{width:clamp(170px,17vw,240px);height:auto;display:block;
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.footer__brand:hover img{transform:translateY(-2px)}
.footer__tag{margin:0 0 20px;max-width:36ch;font-size:14.5px;line-height:1.65;
  color:rgba(255,255,255,.74)}
.footer__tag em{display:block;margin-top:6px;color:rgba(249,211,29,.82)}

.footer__social{display:flex;gap:10px;margin:0}
.footer__social a{display:grid;place-items:center;width:38px;height:38px;
  border-radius:11px;color:rgba(255,255,255,.82);
  border:1.5px solid rgba(255,255,255,.2);
  transition:color .26s ease,border-color .26s ease,background .26s ease,
             transform .26s cubic-bezier(.22,.61,.36,1)}
.footer__social a:hover{color:var(--green-dark);background:var(--yellow);
  border-color:var(--yellow);transform:translateY(-2px)}
.footer__social svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.footer__nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px)}
.footer__ch{margin:0 0 16px;font-family:var(--font-mono);font-size:11px;
  font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(249,211,29,.9)}
.footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer__col a{text-decoration:none;font-size:14.5px;
  color:rgba(255,255,255,.76);transition:color .24s ease}
.footer__col a:hover{color:var(--yellow)}

/* ticket stub — a real perforation down the middle, because it is a ticket */
.tstub{display:grid;grid-template-columns:auto auto;align-items:center;
  gap:clamp(16px,1.8vw,24px);padding:clamp(18px,2vw,24px);border-radius:18px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 20px 44px -26px rgba(0,0,0,.8)}
.tstub__body{position:relative;padding-right:clamp(16px,1.8vw,24px);min-width:0}
.tstub__body::after{content:"";position:absolute;right:0;top:2px;bottom:2px;
  width:1px;background-image:linear-gradient(rgba(255,255,255,.42) 55%,transparent 0);
  background-size:1px 8px}
.tstub__ey{margin:0 0 5px;font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(249,211,29,.9)}
.tstub__ttl{margin:0 0 9px;font-size:17px;font-weight:700;letter-spacing:-.012em;color:#fff}
.tstub__meta{margin:0 0 14px;font-size:13px;line-height:1.55;color:rgba(255,255,255,.7)}
.tstub__cta{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:700;
  background:var(--yellow);color:var(--green-dark);
  transition:gap .26s cubic-bezier(.22,.61,.36,1),transform .26s ease,box-shadow .26s ease}
.tstub__cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.tstub__cta:hover{gap:12px;transform:translateY(-1.5px);
  box-shadow:0 10px 24px -10px rgba(249,211,29,.9)}
.tstub__qr{flex:none;padding:8px;border-radius:12px;background:var(--cream);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.6);line-height:0}
.tstub__qr img{display:block;width:clamp(96px,9vw,116px);height:auto}

.footer__base{max-width:var(--max);margin:clamp(30px,3.8vw,48px) auto 0;
  padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px 24px}
.footer__base p{margin:0}
.footer__meta{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.88)}
.footer__small{font-size:13.5px;color:rgba(255,255,255,.58)}

@media(max-width:1080px){
  /* three across gets cramped before it wraps — drop the stub to its own row */
  .footer__cols{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
  .tstub{grid-column:1/-1;justify-self:start}
}
@media(max-width:860px){
  .footer__cols{grid-template-columns:1fr;gap:34px}
  .tstub{grid-column:auto}
}
@media(max-width:420px){
  /* below this the two halves of the stub cannot both fit on one line */
  .tstub{grid-template-columns:1fr;justify-items:start}
  .tstub__body{padding:0 0 16px}
  .tstub__body::after{right:auto;left:0;top:auto;bottom:0;width:100%;height:1px;
    background-image:linear-gradient(90deg,rgba(255,255,255,.42) 55%,transparent 0);
    background-size:8px 1px}
}
/* narrow: the stacked columns are taller than the artwork, so overlapping them
   would bury it. Stack instead — text, then the scene in normal flow. */
@media(max-width:640px){
  .footer{display:flex;flex-direction:column}
  .footer__nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .footer__base{justify-content:center;text-align:center}
  .footer__veil{display:none}
  .footer__inner{order:1;padding-bottom:clamp(26px,6vw,42px)}
  .fscene{position:relative;order:2;aspect-ratio:auto;
    height:clamp(300px,72vw,430px)}
}
@media (prefers-reduced-motion:reduce){
  .fscene__layer{transform:none;scale:1.02}
}

/* Build-time marker: add class="todo-mode" to <body> to highlight gaps */
body.todo-mode [data-todo]{outline:2px dashed #d33;outline-offset:5px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ===== Art forms ===== */
/* Dark green ground between the yellow countdown and the cream About, so the
   glass cards have something to glow against. Row scrolls and bleeds off the
   right edge on purpose — it should read as "there is more". */
.af{position:relative;overflow:hidden;isolation:isolate;
  background:#04240B;color:#fff;
  padding:clamp(56px,9vw,104px) 0}
@media(min-width:1080px){.af{min-height:640px;display:flex;flex-direction:column;justify-content:center}}

/* the backwaters, carrying the ground rather than competing with it */
.af__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.af::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to right, rgba(3,26,9,.95) 0%, rgba(3,26,9,.88) 38%, rgba(3,26,9,.60) 72%, rgba(3,26,9,.52) 100%),
    linear-gradient(to bottom, rgba(3,26,9,.72) 0%, transparent 18%, transparent 78%, rgba(3,26,9,.78) 100%),
    radial-gradient(46% 58% at 14% 32%, rgba(249,211,29,.14), transparent 70%),
    radial-gradient(50% 62% at 78% 68%, rgba(1,167,60,.18),  transparent 72%)}

.af .eyebrow{color:var(--yellow)}
.af .lede{color:rgba(255,255,255,.74);max-width:34ch;
  margin:0 0 clamp(26px,3.2vw,38px);font-size:clamp(15px,1.15vw,17px)}

/* two columns: the type holds the left, the cards run off the right */
.af__grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;
  gap:clamp(28px,3.6vw,44px)}
@media(min-width:1080px){
  .af__grid{grid-template-columns:minmax(300px,.82fr) minmax(0,1.3fr);
    gap:clamp(24px,3vw,52px);align-items:center}
}
.af__intro{padding:0 var(--pad)}
@media(min-width:1080px){.af__intro{padding:0 0 0 var(--pad)}}

/* display headline — the one place on the page that shouts */
.af__display{color:#fff;text-transform:uppercase;
  margin:0 0 clamp(16px,1.8vw,22px);
  font-size:clamp(46px,7.2vw,104px);font-weight:900;line-height:.9;
  letter-spacing:-.045em;text-wrap:balance;
  text-shadow:0 8px 42px rgba(0,0,0,.42)}

/* the round icon and the pill read as one control, and are one button */
.af__all{display:inline-flex;align-items:center;gap:13px;
  margin:0;padding:0;border:0;background:none;color:#fff;cursor:pointer;text-align:left}
.af__all-icon{flex:none;width:clamp(42px,3.4vw,50px);height:clamp(42px,3.4vw,50px);
  border-radius:50%;background:var(--yellow);color:var(--green-dark);
  display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(249,211,29,.28);
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}
.af__all-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round}
.af__all:hover .af__all-icon{transform:scale(1.06);box-shadow:0 12px 30px rgba(249,211,29,.42)}
.af__all[aria-expanded="true"] .af__all-icon{transform:rotate(135deg)}
.af__all-label{font-family:var(--font-mono);
  padding:13px 26px;border-radius:999px;
  border:1px solid rgba(255,255,255,.45);   /* 3.7:1 — a control boundary needs 3:1 */
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  transition:background .3s ease,border-color .3s ease}
.af__all:hover .af__all-label{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}

/* the control bar: arrows, a run of progress, and the count */
.af__bar{position:relative;z-index:2;display:flex;align-items:center;
  gap:clamp(16px,2.6vw,36px);padding:0 var(--pad);
  margin-top:clamp(24px,3vw,38px)}
.af__arrows{display:flex;gap:10px;flex:none}
.af__progress{flex:1;min-width:0;height:3px;border-radius:2px;
  background:rgba(255,255,255,.18);overflow:hidden}
.af__progress span{display:block;width:12%;height:100%;border-radius:2px;
  background:var(--yellow);transition:width .28s cubic-bezier(.22,.61,.36,1)}
.af__count{flex:none;margin:0;font-family:var(--font-mono);
  font-size:clamp(26px,3.2vw,44px);font-weight:500;line-height:1;
  letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.af__count-total{font-size:.44em;color:rgba(255,255,255,.5);margin-left:2px}

.af__arrow{width:clamp(42px,3.4vw,50px);height:clamp(42px,3.4vw,50px);
  border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);
  color:#fff;display:grid;place-items:center;
  transition:background .28s ease,border-color .28s ease,opacity .28s ease}
.af__arrow:hover:not(:disabled){background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4)}
.af__arrow:disabled{opacity:.3;cursor:default}
.af__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* the scroller */
.af__scroller{position:relative;z-index:2;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-padding-left:var(--pad)}
.af__scroller::-webkit-scrollbar{display:none}
/* while the page is driving the row, snapping would fight every frame */
.af__scroller.af--driving{scroll-snap-type:none}
.af__row{list-style:none;margin:0;display:flex;gap:clamp(13px,1.4vw,20px);
  padding:20px var(--pad) 54px;
  width:max-content;max-width:none}
@media(min-width:1080px){
  .af__scroller{scroll-padding-left:0}
  .af__row{padding:20px 40px 54px 0}
}

/* the card */
.af__card{--y:0px;--lift:0px;
  position:relative;flex:none;scroll-snap-align:start;
  width:clamp(232px,68vw,304px);aspect-ratio:3/4;
  border-radius:22px;overflow:hidden;isolation:isolate;
  background:#0a2a12;
  display:flex;flex-direction:column;justify-content:flex-end;
  transform:translateY(calc(var(--y) + var(--lift)));
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  transition:transform .42s cubic-bezier(.22,.61,.36,1),box-shadow .42s ease}
/* staggered, the way the reference drops every second card */
@media(min-width:1080px){.af__row > li:nth-child(even){--y:34px}}
/* image and tint sit behind the card's own content, so the text block below can
   stay in normal flow and the corner button can anchor to the card itself */
.af__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
/* the tint, straight from the reference: a colour wash that owns the card */
.af__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top, rgba(2,14,6,.94) 0%, rgba(2,14,6,.62) 34%, rgba(2,14,6,.08) 66%, transparent 100%),
    linear-gradient(to top, var(--tint,rgba(1,103,12,.9)) 0%, transparent 74%);
  transition:opacity .42s ease}
.af__card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;border:1px solid rgba(255,255,255,.14)}

@media(hover:hover) and (pointer:fine){
  .af__card:hover,.af__card:focus-within{--lift:-14px;
    box-shadow:0 32px 66px rgba(0,0,0,.58)}
  .af__card:hover .af__img,.af__card:focus-within .af__img{transform:scale(1.06)}
}

/* the glass panel */
.af__body{position:static;width:100%;
  padding:18px 18px 17px;
  display:flex;flex-direction:column;align-items:flex-start;gap:0}
.af__name{margin:0;font-size:clamp(19px,1.55vw,24px);font-weight:800;line-height:1.06;
  letter-spacing:-.018em;text-transform:uppercase;
  color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.af__ml{font-family:var(--font-ml);display:block;margin-top:5px;
  font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--yellow);opacity:.92}
/* the small category label sits above the title, as in the reference */
.af__meta{order:-1;font-family:var(--font-mono);margin:0 0 8px;
  font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.74)}

/* description collapses to nothing until asked for */
.af__desc{display:grid;grid-template-rows:0fr;
  margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.86);
  transition:grid-template-rows .46s cubic-bezier(.22,.61,.36,1),margin .46s ease}
/* visibility, not just overflow — a collapsed panel must leave the a11y tree
   too, or aria-expanded="false" is lying about it */
.af__desc > span{overflow:hidden;min-height:0;visibility:hidden;
  transition:visibility 0s linear .46s}
.af__card.is-open .af__desc{grid-template-rows:1fr;margin-top:11px}
.af__card.is-open .af__desc > span{visibility:visible;transition-delay:0s}
@media(hover:hover) and (pointer:fine){
  .af__card:hover .af__desc,.af__card:focus-within .af__desc{grid-template-rows:1fr;margin-top:11px}
  .af__card:hover .af__desc > span,
  .af__card:focus-within .af__desc > span{visibility:visible;transition-delay:0s}
}

/* the pill, lifted from the reference */
/* compact disclosure, parked in the corner so the card face stays clean */
.af__btn{position:absolute;top:13px;right:13px;z-index:4;cursor:pointer;
  width:38px;height:38px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.16);color:#fff;
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  transition:background .3s ease,border-color .3s ease}
.af__btn > span{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.af__btn:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.55)}
.af__btn svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .36s cubic-bezier(.22,.61,.36,1)}
.af__card.is-open .af__btn svg{transform:rotate(90deg)}

/* the form we have no photograph for yet */
.af__card--todo .af__img{background:
  repeating-linear-gradient(45deg,#0a3a14,#0a3a14 14px,#062a0d 14px,#062a0d 28px)}
.af__card--todo .af__veil{background:linear-gradient(to top,rgba(2,14,6,.92) 0%,rgba(2,14,6,.5) 40%,transparent 78%)}

@media (prefers-reduced-motion:reduce){
  .af__scroller{scroll-snap-type:none}
  .af__desc{grid-template-rows:1fr;margin-top:11px}
  .af__desc > span{visibility:visible}
}