/* =========================================================================
   35: Ukraine Independence Day
   Palette taken from the event lockup itself: slate navy, soft sky blue,
   warm sand on warm paper. No hard borders, no offset shadows.
   ========================================================================= */

:root{
  /* straight off the event logo */
  --slate:#4D5A6B;          /* the wordmark navy */
  --sky:#5D9DCC;            /* the "Born to Be Free" blue */
  --sand:#F2E0B2;           /* the "35" cream */

  --ink:#2B3644;            /* body copy */
  --ink-2:#5B6879;
  --ink-3:#8C97A5;
  --deep:#333F4E;           /* dark sections */
  --deep-2:#26303C;

  --sky-700:#356894;        /* accent that passes contrast at small sizes */
  --sky-100:#E2EDF6;
  --sand-2:#F9F0DC;
  --gold:#C9993C;

  --paper:#FCFAF5;
  --paper-2:#F5F0E5;
  --white:#fff;
  --line:#E8E1D3;

  --wrap:1160px;
  --gut:clamp(22px,5vw,52px);
  --r:20px;
  --ease:cubic-bezier(.22,.75,.28,1);

  --seam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='24' viewBox='0 0 32 24'%3E%3Cg fill='%235D9DCC'%3E%3Crect x='8' y='0' width='4' height='4'/%3E%3Crect x='4' y='4' width='4' height='4'/%3E%3Crect x='12' y='4' width='4' height='4'/%3E%3Crect x='0' y='8' width='4' height='4'/%3E%3Crect x='16' y='8' width='4' height='4'/%3E%3Crect x='0' y='12' width='4' height='4'/%3E%3Crect x='16' y='12' width='4' height='4'/%3E%3Crect x='4' y='16' width='4' height='4'/%3E%3Crect x='12' y='16' width='4' height='4'/%3E%3Crect x='8' y='20' width='4' height='4'/%3E%3C/g%3E%3Cg fill='%23D9BE7C'%3E%3Crect x='8' y='8' width='4' height='4'/%3E%3Crect x='8' y='12' width='4' height='4'/%3E%3Crect x='24' y='0' width='4' height='4'/%3E%3Crect x='24' y='8' width='4' height='4'/%3E%3Crect x='24' y='12' width='4' height='4'/%3E%3Crect x='24' y='20' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.65 "Manrope",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-variant-ligatures:none;      /* Manrope turns (c) into © otherwise */
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0; list-style:none}
::selection{background:var(--sand); color:var(--ink)}
.skip{position:fixed; left:14px; top:-100px; z-index:200; background:var(--deep); color:#fff; padding:12px 18px; border-radius:10px; font-weight:700; text-decoration:none; transition:top .2s}
.skip:focus{top:14px}
:focus-visible{outline:2px solid var(--sky-700); outline-offset:4px; border-radius:4px}

/* ---------- layout + type ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.narrow{max-width:780px}
.center{text-align:center}
.sect{padding:clamp(72px,10vw,136px) 0; position:relative}

.h1{
  font-family:"Bevan",Georgia,serif; font-weight:400;
  font-size:clamp(36px,6.4vw,74px); line-height:1.02;
  letter-spacing:-.015em; color:var(--ink);
}
.h1.light{color:var(--white)}
.h1.center{margin-inline:auto}

.sub{
  font-size:clamp(17px,2vw,20px); line-height:1.65; margin-top:22px;
  max-width:62ch; color:var(--ink-2);
}
.sub.center{margin-inline:auto}
.sub.light{color:#C3D2E2}

.eyebrow{
  font-size:11.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sky-700); margin-bottom:18px;
}
.deep .eyebrow,.finale .eyebrow{color:var(--sand)}

.note{margin-top:36px; font-size:14.5px; color:var(--ink-3)}
.note.center{margin-inline:auto; max-width:56ch}

.paper{background:var(--paper)}
.paper2{background:var(--paper-2)}
.white{background:var(--white)}
.deep{background:var(--deep); color:var(--white)}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease), transform .75s var(--ease); transition-delay:var(--d,0ms)}
.reveal.in{opacity:1; transform:none}

/* ---------- vyshyvanka seam: a quiet cultural rule, not a stripe ---------- */
.seam{
  position:absolute; left:0; right:0; bottom:0; height:16px; z-index:3; opacity:.5;
  background:var(--seam) repeat-x; background-size:auto 16px;
  animation:drift 30s linear infinite;
}
.seam-top{top:0; bottom:auto; transform:scaleY(-1); animation-direction:reverse}
@keyframes drift{to{background-position-x:-320px}}

/* ---------- buttons: flat, no borders, no offset shadows ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:15px 28px; border-radius:100px; border:0;
  font-weight:700; font-size:16px; text-decoration:none; cursor:pointer;
  background:var(--deep); color:var(--white);
  transition:background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--ink); transform:translateY(-2px)}
.btn span{transition:transform .22s var(--ease); display:inline-block}
.btn:hover span{transform:translateX(3px)}
.btn-sky{background:var(--sky-700)}
.btn-sky:hover{background:#2B577D}
.btn-sand{background:var(--sand); color:var(--ink)}
.btn-sand:hover{background:#EAD49B}
.btn-quiet{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-quiet:hover{background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.deep .btn-quiet,.finale .btn-quiet{color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.deep .btn-quiet:hover,.finale .btn-quiet:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.btn-lg{padding:18px 34px; font-size:17px}
.btn-sm{padding:11px 20px; font-size:14.5px}
.btn-block{display:flex; width:100%; margin-top:auto}

.link{
  display:inline-block; margin-top:18px; font-weight:700; font-size:15px;
  color:var(--sky-700); text-decoration:none;
  border-bottom:1.5px solid rgba(53,104,148,.35); padding-bottom:2px;
  transition:border-color .2s;
}
.link:hover{border-color:var(--sky-700)}

/* ---------- header ---------- */
.head{
  position:sticky; top:0; z-index:90;
  background:rgba(252,250,245,.9); backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex; align-items:center; gap:24px; height:72px}
.head-logo{display:block; margin-right:auto; text-decoration:none}
.head-logo img{width:132px}
.head-nav{display:none; gap:26px}
.head-nav a{
  text-decoration:none; font-weight:600; font-size:14.5px; color:var(--ink-2);
  padding:4px 0; border-bottom:1.5px solid transparent; transition:color .2s, border-color .2s;
}
.head-nav a:hover{color:var(--ink); border-color:var(--sky)}
.head .btn{display:none}
@media (min-width:1000px){
  .head-nav{display:flex}
  .head .btn{display:inline-flex}
}

/* ---------- hero ---------- */
.hero{
  position:relative; text-align:center; overflow:hidden; isolation:isolate;
  padding:clamp(46px,7vw,86px) 0 clamp(54px,7vw,92px);
  background:
    radial-gradient(120% 70% at 50% -10%, var(--white) 0%, var(--paper) 46%, var(--paper-2) 100%);
}
/* the skyline sits behind everything, faded, anchored to the bottom edge */
.skyband{
  position:absolute; left:0; right:0; bottom:-4%; z-index:-2; pointer-events:none;
  opacity:.34;
  -webkit-mask-image:linear-gradient(180deg,transparent 6%,#000 44%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 6%,#000 44%,#000 86%,transparent 100%);
}
/* clears a calm field through the middle so type never sits on rooftops,
   while the illustration still reads at the edges */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(66% 62% at 50% 46%,
    rgba(252,250,245,.95) 0%, rgba(252,250,245,.82) 48%, rgba(252,250,245,0) 100%);
}
.skyband img{width:128%; max-width:none; margin-left:-14%; will-change:transform}
@media (min-width:800px){ .skyband img{width:106%; margin-left:-3%} }
.hero-in{position:relative; z-index:1}

.kicker{
  font-size:clamp(10.5px,1.5vw,12.5px); font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3);
}
/* the official lockup artwork, used as-is */
.lockup{margin:clamp(22px,3.4vw,40px) auto 0; width:min(860px,90%)}
.lockup img{width:100%; will-change:transform}

.facts{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(10px,2.2vw,26px); margin-top:clamp(26px,4vw,40px);
}
.facts li{display:flex; flex-direction:column; line-height:1.3}
.facts li b{font-size:clamp(15px,1.9vw,18px); font-weight:800; color:var(--ink)}
.facts li span{font-size:12.5px; color:var(--ink-3); margin-top:3px}
.facts .sep{width:5px; height:5px; border-radius:50%; background:var(--sand); align-self:center}

.cta-row{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:clamp(28px,4vw,38px)}
.cta-note{margin-top:20px; font-size:14.5px; color:var(--ink-2)}

.countdown{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(18px,4vw,44px); margin-top:clamp(32px,5vw,46px);
}
.countdown > div{display:flex; flex-direction:column; align-items:center; min-width:56px}
.cd-num{
  font-family:"Bevan",serif; font-size:clamp(28px,4.4vw,44px); line-height:1;
  color:var(--slate); font-variant-numeric:tabular-nums;
}
.cd-lab{margin-top:9px; font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}

/* ---------- ticker ---------- */
.ticker{background:var(--deep); overflow:hidden; padding:14px 0}
.ticker-row{display:flex; width:max-content; animation:marquee 46s linear infinite}
.ticker-track{display:flex; align-items:center; gap:26px; padding-right:26px}
.ticker-track span{
  font-size:clamp(12px,1.6vw,14px); font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:#DCE6F0; white-space:nowrap;
}
.ticker-track i{color:var(--sand); font-style:normal; font-size:9px}
@keyframes marquee{to{transform:translateX(-50%)}}
.ticker:hover .ticker-row{animation-play-state:paused}

/* ---------- intro ---------- */
.grid-intro{display:grid; gap:clamp(26px,4vw,60px)}
@media (min-width:900px){ .grid-intro{grid-template-columns:.85fr 1.15fr; align-items:start} }
.intro-body p{font-size:clamp(17px,1.9vw,19.5px); line-height:1.7; color:var(--ink-2)}
.intro-body p + p{margin-top:20px}
.hosts{display:flex; align-items:center; gap:34px; margin-top:40px; flex-wrap:wrap; padding-top:32px; border-top:1px solid var(--line)}
.hosts img{width:172px}
.hosts .sm{width:98px}

/* ---------- what's happening ---------- */
.cards{display:grid; grid-template-columns:1fr; gap:16px; margin-top:clamp(44px,5vw,64px)}
@media (min-width:640px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1020px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:34px 30px 34px;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover{border-color:var(--sky); transform:translateY(-4px)}
.ico{
  width:112px; height:112px; margin-bottom:20px; object-fit:contain;
  transition:transform .5s var(--ease);
}
.card:hover .ico{transform:scale(1.06) rotate(-2deg)}
.card h3{
  font-size:15px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); margin-bottom:11px;
}
.card p{font-size:15.5px; line-height:1.6; color:var(--ink-2)}

/* ---------- guests ---------- */
.grid-split{display:grid; gap:clamp(26px,4vw,64px)}
@media (min-width:900px){ .grid-split{grid-template-columns:1fr 1fr; align-items:center} }
.split-body p{font-size:clamp(17px,2vw,20px); line-height:1.7; color:#CBD8E5}
.split-body p + p{margin-top:20px; color:var(--sand); font-weight:600}

/* ---------- money ---------- */
.money{background:var(--sand-2); position:relative; overflow:hidden; isolation:isolate}
.money-in{position:relative; z-index:1}
/* a big drawn bolt behind the number, with a slow charge animation */
.money-top{position:relative}
.volt{
  position:absolute; left:50%; top:50%; translate:-50% -54%; z-index:-1;
  width:min(52vw,470px); color:var(--gold); opacity:.3; pointer-events:none;
}
.volt svg{width:100%; height:auto; display:block}
.volt .bolt{
  fill:rgba(217,190,124,.55);
  /* resting state is DRAWN, so it survives prefers-reduced-motion */
  stroke-dasharray:900; stroke-dashoffset:0;
  animation:charge 5.5s var(--ease) infinite;
}
@keyframes charge{
  0%{stroke-dashoffset:900; fill-opacity:0}
  45%{stroke-dashoffset:0; fill-opacity:0}
  62%{fill-opacity:1}
  78%{fill-opacity:.45}
  100%{stroke-dashoffset:0; fill-opacity:1}
}
.money-top::after{  /* warm glow that pulses like something powering up */
  content:""; position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:-2;
  width:min(70vw,720px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(217,190,124,.42) 0%, rgba(217,190,124,0) 68%);
  animation:glow 5.5s var(--ease) infinite;
}
@keyframes glow{0%,20%{opacity:.35; transform:scale(.9)} 55%{opacity:1; transform:scale(1)} 100%{opacity:.35; transform:scale(.9)}}

.big-head{
  font-family:"Bevan",serif; color:var(--slate); line-height:.94;
  font-size:clamp(40px,7.6vw,96px); letter-spacing:-.02em;
}

/* why power matters */
.money-why{
  margin-top:clamp(56px,7vw,88px); padding-top:clamp(44px,5vw,64px);
  border-top:1px solid rgba(201,153,60,.3);
}
.why-lead{
  font-family:"Bevan",serif; color:var(--slate); line-height:1.06;
  font-size:clamp(26px,4.2vw,46px); letter-spacing:-.01em;
}
.why-body{
  margin:20px auto 0; max-width:62ch;
  font-size:clamp(16px,1.8vw,18.5px); line-height:1.7; color:var(--ink-2);
}
.why-grid{display:grid; grid-template-columns:1fr; gap:14px; margin-top:clamp(34px,4vw,48px); text-align:left}
@media (min-width:640px){ .why-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1020px){ .why-grid{grid-template-columns:repeat(4,1fr)} }
.why-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px 28px;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.why-card:hover{border-color:var(--gold); transform:translateY(-4px)}
.why-ico{display:grid; place-items:center; width:34px; height:34px; color:var(--gold); margin-bottom:16px}
.why-ico svg{width:100%; height:100%}
.why-card h3{
  font-size:13px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); margin-bottom:9px;
}
.why-card p{font-size:14.5px; line-height:1.6; color:var(--ink-2)}
.chips{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:38px}
.chips li{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--white); color:var(--ink-2); border-radius:100px;
  padding:10px 20px 10px 16px; font-weight:700; font-size:13.5px;
}
.chip-ico{display:grid; place-items:center; width:19px; height:19px; color:var(--gold); flex:none}
.chip-ico svg{width:100%; height:100%}

/* ---------- tickets ---------- */
.tiers{display:grid; grid-template-columns:1fr; gap:14px; margin-top:clamp(40px,5vw,60px)}
@media (min-width:640px){ .tiers{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .tiers{grid-template-columns:repeat(5,1fr)} }
.tier{
  display:flex; flex-direction:column; position:relative;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 24px 28px;
  transition:border-color .28s var(--ease), transform .28s var(--ease);
}
.tier:hover{border-color:var(--sky); transform:translateY(-3px)}
.t-name{font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); min-height:2.4em}
.t-price{font-family:"Bevan",serif; font-size:clamp(38px,4.6vw,46px); line-height:1; color:var(--slate); margin-top:10px}
.t-price i{font-style:normal; font-size:.5em; vertical-align:.52em; margin-right:.05em; color:var(--ink-3)}
.t-word{color:var(--gold)}
.t-desc{font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:18px 0 0; padding-top:18px; border-top:1px solid var(--line)}
/* Zeffy ticketing embed — replaces the old .tiers grid, which is kept below in case we revert */
.zeffy{
  margin-top:clamp(34px,4vw,48px); min-height:620px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden;
}
.zeffy iframe{display:block; width:100%}
.tickets-cta{display:flex; flex-direction:column; align-items:center; margin-top:clamp(36px,4vw,48px)}
.tickets-cta .note{margin-top:20px; text-align:center; max-width:56ch}

/* ---------- included / not included ---------- */
.incl{
  display:grid; margin-top:clamp(30px,3.5vw,40px);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden;
}
@media (min-width:760px){ .incl{grid-template-columns:1fr 1fr} }
.incl-col{padding:26px clamp(24px,3vw,34px) 28px}
.incl-not{border-top:1px solid var(--line)}
@media (min-width:760px){ .incl-not{border-top:0; border-left:1px solid var(--line)} }

.incl-h{
  display:flex; align-items:center; gap:10px;
  font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); margin-bottom:20px;
}
.mark{
  display:grid; place-items:center; width:20px; height:20px; border-radius:50%; flex:none;
  background:var(--sky-100); color:var(--sky-700);
}
.mark svg{width:12px; height:12px}
.mark.extra{background:rgba(201,153,60,.16); color:var(--gold)}

.incl-col ul{display:flex; gap:clamp(20px,3vw,32px); flex-wrap:wrap}
.incl-col li{display:flex; align-items:center; gap:12px}
.incl-col img{width:54px; height:54px; object-fit:contain; flex:none}
.incl-col span{font-size:15px; font-weight:700; color:var(--ink)}
/* both columns read as equally appealing — the divider carries the distinction */

/* ---------- visit ---------- */
.visit{display:grid; gap:16px; margin-top:clamp(44px,5vw,62px)}
@media (min-width:820px){ .visit{grid-template-columns:1fr 1fr} }
.vcard{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(28px,3.4vw,40px); position:relative; overflow:hidden;
  transition:border-color .3s var(--ease);
}
.vcard:hover{border-color:var(--sky)}
.v-big{font-family:"Bevan",serif; font-size:clamp(28px,4vw,42px); line-height:1.06; color:var(--ink)}
.v-sub{margin-top:14px; font-weight:700; font-size:15.5px; color:var(--sky-700)}
.v-note{margin-top:12px; font-size:15px; line-height:1.6; color:var(--ink-2)}

/* the "when" card leads with a torn-off calendar tile */
.vcard-when{display:flex; gap:clamp(20px,3vw,32px); align-items:flex-start; flex-wrap:wrap}
.cal{
  flex:none; width:112px; border-radius:16px; overflow:hidden; text-align:center;
  border:1px solid var(--line); background:var(--white);
}
.cal-m{
  display:block; background:var(--deep); color:var(--sand);
  font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; padding:8px 0;
}
.cal-d{
  display:block; font-family:"Bevan",serif; font-size:52px; line-height:1;
  color:var(--ink); padding:14px 0 8px;
}
.cal-y{display:block; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding-bottom:13px}
.vcard-body{flex:1; min-width:190px}

/* a soft sunflower-gold wash in the corner of the "where" card */
.vcard-where::after{
  content:""; position:absolute; right:-70px; bottom:-70px; width:220px; height:220px;
  border-radius:50%; background:radial-gradient(circle, rgba(217,190,124,.28) 0%, rgba(217,190,124,0) 70%);
  pointer-events:none;
}

.know{display:grid; gap:16px; margin-top:22px}
@media (min-width:760px){ .know{grid-template-columns:1fr 1fr; gap:18px 36px} }
.know li{
  display:flex; gap:14px; align-items:flex-start;
  font-size:15.5px; line-height:1.6; color:var(--ink-2);
}
.k-ico{
  flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--sand-2); color:var(--gold);
}
.k-ico svg{width:20px; height:20px}

/* ---------- faq ---------- */
.faq{display:grid; gap:10px; margin-top:clamp(40px,5vw,54px)}
.faq details{border:1px solid var(--line); border-radius:16px; background:var(--white); transition:border-color .25s}
.faq details[open]{border-color:var(--sky)}
.faq summary{cursor:pointer; list-style:none; padding:20px 54px 20px 24px; position:relative; font-weight:700; font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:26px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--sky-700); border-bottom:2px solid var(--sky-700);
  transform:translateY(-70%) rotate(45deg); transition:transform .28s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details > div{padding:0 24px 22px; font-size:15.5px; line-height:1.7; color:var(--ink-2)}
.faq a{color:var(--sky-700); font-weight:700}

/* ---------- finale ---------- */
.finale{background:var(--deep-2); color:var(--white); padding:clamp(80px,11vw,144px) 0; text-align:center}
.fin-script{font-family:"Pinyon Script",cursive; font-size:clamp(38px,7.4vw,78px); line-height:1; color:var(--sand)}
.fin-h{font-family:"Bevan",serif; font-weight:400; font-size:clamp(36px,7vw,80px); line-height:1.03; margin-top:14px; letter-spacing:-.015em}
.fin-meta{margin-top:26px; font-size:clamp(13.5px,1.8vw,15.5px); color:#AEBDCC}
.finale .btn{margin-top:32px}
.fin-note{margin-top:22px; font-size:13.5px; color:#8B9AAA}

/* ---------- footer ---------- */
.foot{background:var(--deep-2); color:#AEBBC9; padding:0 0 38px; border-top:1px solid rgba(255,255,255,.1)}
.foot-in{display:grid; gap:44px; padding-top:clamp(52px,7vw,78px)}
@media (min-width:840px){ .foot-in{grid-template-columns:1.4fr 1fr} }
.foot-in img{width:min(232px,68%)}
.foot-in p{margin-top:22px; font-size:15px; line-height:1.65; max-width:42ch}
.legal{font-size:13px !important; color:#75808F; margin-top:16px !important}
.foot-nav{display:grid; grid-template-columns:repeat(2,1fr); gap:32px}
.foot-nav h3{font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--sand); margin-bottom:15px}
.foot-nav a{display:block; text-decoration:none; font-size:15px; padding:5px 0; color:#AEBBC9; transition:color .2s}
.foot-nav a:hover{color:#fff}
.foot-bot{margin-top:50px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1)}
.foot-bot p{font-size:13px; color:#75808F}

/* ---------- mobile dock ---------- */
.dock{
  position:fixed; left:14px; right:14px; bottom:14px; z-index:80;
  display:flex; align-items:center; gap:14px;
  background:rgba(43,54,68,.96); color:#fff; backdrop-filter:blur(14px);
  border-radius:100px; padding:8px 8px 8px 22px;
  transform:translateY(160%); transition:transform .4s var(--ease);
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
}
.dock.up{transform:none}
.dock > div{display:flex; flex-direction:column; line-height:1.25; margin-right:auto; min-width:0}
.dock b{font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dock span{font-size:11.5px; color:#9FADBC}
.dock .btn{background:var(--sand); color:var(--ink)}
.dock .btn:hover{background:#EAD49B}
@media (min-width:1000px){ .dock{display:none !important} }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
  .ticker-row{animation:none}
}