/* =========================================================
   Gala WINgs 2026 — Landing · Waiting list
   Fonts: Playfair Display (display) + DM Sans (text)  → 2 fonts
   Sizes: --fs-display / --fs-lead / --fs-body         → 3 sizes
   ========================================================= */

:root{
  --cream:#FAF0E4;
  --cream-2:#F4E3D1;
  --orange:#F26018;
  --orange-deep:#C7461A;
  --orange-soft:#F7B48C;
  --ink:#1A0A02;
  --ink-2:#2A1407;
  --muted:#8A5236;      /* warm sienna for secondary text — no greys anywhere */
  --line:rgba(242,96,24,.24);   /* hairlines on light backgrounds */
  --line-dark:rgba(242,96,24,.32); /* hairlines on the dark sections */
  --white:#FFFFFF;

  --font-display:'Playfair Display', Georgia, serif;
  --font-text:'DM Sans', system-ui, -apple-system, sans-serif;

  --fs-display:clamp(1.9rem, .9rem + 3.1vw, 3.6rem); /* titles: calmer, more refined scale */
  --fs-lead:clamp(1.04rem, .84rem + .76vw, 1.48rem);
  --fs-body:clamp(.85rem, .8rem + .2vw, .96rem);

  --radius:22.4px;
  --gutter:clamp(16px, 4vw, 57.6px);
  --max:992px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-orange:0 14.4px 40px -9.6px rgba(242,96,24,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-text);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  font-weight:400;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--orange);color:var(--cream)}

/* ---------- Type ---------- */
.display{
  font-family:var(--font-display);
  font-size:var(--fs-display);
  line-height:1.02;
  font-weight:700;
  letter-spacing:-.015em;
}
.lead em{font-style:italic;font-weight:600;color:var(--orange)}
/* titles: the accent words only change colour — same upright weight as the rest of the title */
.display em,h1 em,h2 em,h3 em{font-style:normal;font-weight:inherit;color:var(--orange)}
.lead{font-size:var(--fs-lead);line-height:1.35;font-weight:400}
.lead.serif{font-family:var(--font-display);font-style:italic;font-weight:500}
.label{
  font-size:var(--fs-body);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-weight:700;
  color:var(--orange);
  display:inline-flex;align-items:center;gap:11.2px;
}
.label::before{content:"";width:27.2px;height:2px;background:currentColor;flex:none}
.label.center::after{content:"";width:27.2px;height:2px;background:currentColor;flex:none}
.on-dark{color:var(--cream)}
.on-dark .label{color:var(--orange)}
.on-orange .label{color:var(--ink)}
strong{font-weight:700}

/* ---------- Layout ---------- */
.wrap{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
.section{position:relative;padding-block:clamp(50px,6.4vw,88px);overflow:hidden} /* tighter rhythm between sections (was 67–120px) */
.section.dark{background:var(--ink);color:var(--cream)}
.section.orange{background:var(--orange);color:var(--ink)}
.section.cream2{background:var(--cream-2)}
.stack>*+*{margin-top:1.25em}
.narrow{max-width:608px}
.center{text-align:center;margin-inline:auto}

/* ---------- Monogram-style pattern (decorative, behind content, fades under the text) ---------- */
.pattern{position:absolute;inset:0;pointer-events:none;z-index:0;background-repeat:repeat;background-size:208px 240px;background-position:center top;opacity:.13;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,transparent 0 38%,#000 92%);mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,transparent 0 38%,#000 92%)}
.pattern.orange{background-image:url("../img/pattern-orange.svg")}
.pattern.cream{background-image:url("../img/pattern-cream.svg")}
.pattern+.pattern{display:none}
.dark .pattern{opacity:.085}
.orange .pattern{opacity:.13}
.cream2 .pattern{opacity:.12}
.hero .pattern{opacity:.09;-webkit-mask-image:linear-gradient(180deg,transparent 0 45%,#000 100%);mask-image:linear-gradient(180deg,transparent 0 45%,#000 100%)}
.poem .pattern{opacity:.3;background-position:0 0;-webkit-mask-image:linear-gradient(90deg,transparent 0 18%,#000 62%);mask-image:linear-gradient(90deg,transparent 0 18%,#000 62%);animation:drift 36s linear infinite}
@keyframes drift{to{background-position:208px 240px}}
/* dynamic card: brushed-metal plate, gentle cursor tilt and a diagonal light streak that glides across on its own */
.poem .plate::after,.card::after,.step::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
  background:
    linear-gradient(112deg,transparent 41%,rgba(255,255,255,.06) 45%,rgba(255,255,255,.32) 49.2%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.32) 50.8%,rgba(255,255,255,.06) 55%,transparent 59%),
    linear-gradient(112deg,transparent 30%,rgba(255,255,255,.10) 46%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.10) 54%,transparent 70%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0}
/* the streak sweeps left → right every few seconds, staggered so the plates catch the light one after another */
@keyframes shine{0%{background-position:100% 0}24%,100%{background-position:0% 0}}
.poem .plate::after,.card::after,.step::after{animation:shine 7s cubic-bezier(.45,0,.25,1) infinite}
.poem .plate::after{animation-delay:.6s}
.card:nth-child(2)::after{animation-delay:.45s}
.step:nth-child(2)::after{animation-delay:.35s}
.step:nth-child(3)::after{animation-delay:.7s}
@media (prefers-reduced-motion:reduce){.poem .plate::after,.card::after,.step::after{animation:none}}
@media (prefers-reduced-motion:reduce){.poem,.poem .pattern{animation:none}}
.video-frame .pattern{display:none}
.page-center .pattern{opacity:.11}
.thanks .pattern{opacity:.11}
.section>.wrap{position:relative;z-index:1}
.footer{position:relative}
.footer .pattern{opacity:.07;-webkit-mask-image:none;mask-image:none}
.footer .wrap{position:relative;z-index:1}

/* ---------- Soft glows ---------- */
.glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(72px);opacity:.55;z-index:0}
.hero::before,.hero::after,.final::before,.secret::before,.story::before{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(88px);z-index:0}
.hero::before{width:48vw;height:48vw;max-width:656px;max-height:656px;right:-16vw;top:-24vw;background:rgba(242,96,24,.16)}
.hero::after{width:32vw;height:32vw;max-width:448px;max-height:448px;left:-14.4vw;top:30%;background:rgba(242,96,24,.10)}
.story::before{width:40vw;height:40vw;max-width:560px;max-height:560px;right:-16vw;bottom:-16vw;background:rgba(242,96,24,.10)}
.secret::before{width:40vw;height:40vw;max-width:560px;max-height:560px;left:-16vw;bottom:-20vw;background:rgba(242,96,24,.12)}
.final::before{width:56vw;height:56vw;max-width:720px;max-height:720px;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(242,96,24,.14)}
.section>.wrap{position:relative;z-index:1}

/* ---------- Button ---------- */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12.8px;
  padding:1.05em 1.9em 1.05em 2.1em;border-radius:799.2px;
  /* layer 1: diagonal light streak (moved by --sh), layer 2: the orange body (shifted by --bp on hover) */
  background-image:
    linear-gradient(112deg,transparent 40%,rgba(255,236,220,0) 43%,rgba(255,240,228,.5) 50%,rgba(255,236,220,0) 57%,transparent 60%),
    linear-gradient(100deg,var(--orange-deep) 0%,var(--orange) 45%,#FF7E3F 100%);
  background-size:250% 100%,200% 100%;background-repeat:no-repeat;background-position:var(--sh) 0,var(--bp) 50%;
  color:var(--cream);font-weight:700;letter-spacing:.01em;line-height:1.15;
  box-shadow:var(--shadow-orange),inset 0 1px 0 rgba(255,255,255,.22);
  isolation:isolate;white-space:nowrap;--a:0deg;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),--bp .9s var(--ease),letter-spacing .55s var(--ease);
  animation:btnshine 6s cubic-bezier(.45,0,.25,1) 1.8s infinite;
}
@property --sh{syntax:'<percentage>';inherits:false;initial-value:110%}
@property --bp{syntax:'<percentage>';inherits:false;initial-value:0%}
/* the streak glides left → right across the button, then rests for a few seconds */
@keyframes btnshine{0%{--sh:110%}26%,100%{--sh:-10%}}
@media (prefers-reduced-motion:reduce){.btn{animation:none}}
.btn .ic{
  width:2.2em;height:2.2em;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--cream);color:var(--orange);
  transition:transform .55s var(--ease),background .4s,color .4s,box-shadow .55s var(--ease);
}
.btn .ic svg{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s var(--ease)}
/* rotating contour */
.btn::before{
  content:"";position:absolute;inset:-3.2px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--a),transparent 0 58%,var(--cream) 76%,var(--orange-soft) 86%,transparent 96%);
  padding:3.2px;-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;
  opacity:0;transition:opacity .45s;
}
/* soft halo */
.btn::after{
  content:"";position:absolute;inset:-8px;border-radius:inherit;z-index:-2;
  background:radial-gradient(closest-side,rgba(242,96,24,.55),rgba(242,96,24,0));
  opacity:0;transform:scale(.9);transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.btn:hover,.btn:focus-visible{
  transform:translateY(-2.4px);outline:none;--bp:100%;letter-spacing:.035em;
  box-shadow:0 0 0 1.5px rgba(250,240,228,.65),0 0 0 6.4px rgba(242,96,24,.16),0 22.4px 48px -12.8px rgba(242,96,24,.9),inset 0 1px 0 rgba(255,255,255,.25);
}
.btn:hover::before,.btn:focus-visible::before{opacity:1;animation:spin 1.8s linear infinite}
.btn:hover::after,.btn:focus-visible::after{opacity:1;transform:scale(1.08)}
.btn:hover .ic{transform:translateX(6.4px) scale(1.08);box-shadow:0 0 0 3.2px rgba(250,240,228,.35),0 6.4px 14.4px -4.8px rgba(26,10,2,.35)}
.btn:hover .ic svg{transform:translateX(2px)}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn.big{padding:1.2em 2.1em 1.2em 2.4em}
.btn.small{padding:.8em 1.3em .8em 1.5em}
.btn.small .ic{width:1.9em;height:1.9em}
.btn.on-dark-bg{box-shadow:0 14.4px 40px -8px rgba(242,96,24,.8),inset 0 1px 0 rgba(255,255,255,.22)}
.btn.ink{background-image:linear-gradient(112deg,transparent 40%,rgba(255,236,220,0) 43%,rgba(255,226,204,.28) 50%,rgba(255,236,220,0) 57%,transparent 60%),linear-gradient(100deg,#0F0500,var(--ink) 50%,#3A1C0C);color:var(--cream)}
.btn.ink .ic{background:var(--orange);color:var(--cream)}
.btn.ink::before{background:conic-gradient(from var(--a),transparent 0 62%,var(--orange) 78%,var(--orange-soft) 86%,transparent 94%)}
.btn.ink:hover{box-shadow:0 0 0 1.5px rgba(242,96,24,.6),0 0 0 6.4px rgba(242,96,24,.14),0 22.4px 48px -12.8px rgba(26,10,2,.8)}

@keyframes spin{to{--a:360deg}}
.cta-note{display:flex;align-items:center;gap:9.6px;font-weight:500}
.cta-note .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4.8px rgba(242,96,24,.18);animation:blink 1.8s ease-in-out infinite;flex:none}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- Header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  padding-block:14.4px;transition:background .5s,box-shadow .5s,padding .5s;
}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.header.scrolled{background:rgba(250,240,228,.82);backdrop-filter:blur(11.2px);-webkit-backdrop-filter:blur(11.2px);box-shadow:0 1px 0 rgba(26,10,2,.08);padding-block:8px}
.logo img{height:96px;width:auto;transition:height .5s,opacity .4s}
.logo img.light{filter:drop-shadow(0 3.2px 11.2px rgba(26,10,2,.45)) drop-shadow(0 1px 2px rgba(26,10,2,.35))}
.logo img.dark{display:none}
.header.scrolled .logo img{height:72px}
.header.scrolled .logo img.light{display:none}
.header.scrolled .logo img.dark{display:block}
.footer img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.header .when{display:inline-flex;align-items:center;gap:9.6px;white-space:nowrap;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.header .when i{width:4.8px;height:4.8px;border-radius:50%;background:var(--orange)}

/* header over the hero video: light text until the bar appears */
.header.has-cta:not(.scrolled) .when{color:var(--cream);text-shadow:0 1px 8px rgba(26,10,2,.45)}

/* mobile-only header CTA (hidden on desktop) */
.head-cta{display:none}

/* ---------- Hero ---------- */
@property --g{syntax:'<percentage>';inherits:false;initial-value:0%}
.hero{
  padding-top:0;padding-bottom:clamp(57.6px,7.2vw,96px);
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 55%,#F7E2CF 100%);
}
.hero::before{background:rgba(242,96,24,.2)}
.hero::after{background:rgba(242,96,24,.14)}
.hero .intro{display:grid;grid-template-columns:minmax(0,1fr);gap:20.8px;max-width:784px;margin-inline:auto;text-align:center;justify-items:center}
.hero .label.pill{border:1.5px solid rgba(242,96,24,.45);border-radius:799.2px;padding:.55em 1.3em;background:rgba(255,255,255,.55);backdrop-filter:blur(4.8px);-webkit-backdrop-filter:blur(4.8px);gap:9.6px}
.hero .label.pill::before,.hero .label.pill::after{width:14.4px}
/* date + city as a quiet line right under the sign-up button */
.hero .date{display:inline-flex;align-items:center;gap:.9em;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.hero .date i{width:4.8px;height:4.8px;border-radius:50%;background:var(--orange);flex:none}
.hero .display{max-width:16ch}
.hero .display .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.12em .32em .4em;margin:-.12em -.32em -.4em}
.hero.settled .display .w{overflow:visible}
.hero .display .w span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
.hero.in .display .w span{transform:none}
.hero .display .w:nth-child(2) span{transition-delay:.08s}
.hero .display .w:nth-child(3) span{transition-delay:.16s}
.hero .display .w:nth-child(4) span{transition-delay:.24s}
.hero .display .w:nth-child(5) span{transition-delay:.32s}
.hero .display .win{position:relative;display:inline-block;font-style:normal;font-weight:inherit;padding:.08em .18em .08em .06em;margin:-.08em -.18em -.08em -.06em;
  background:linear-gradient(100deg,var(--orange-deep) 0%,var(--orange) 35%,#FF9A5C 50%,var(--orange) 65%,var(--orange-deep) 100%);
  background-size:220% 100%;background-position:var(--g) 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 5s ease-in-out infinite}
.hero .display .win svg{position:absolute;left:.04em;right:.16em;bottom:-.22em;width:auto;height:.2em;overflow:visible}
.hero .display .win svg path{fill:none;stroke:var(--orange);stroke-width:5;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.4s var(--ease) 1s}
.hero.in .display .win svg path{stroke-dashoffset:0}
@keyframes sheen{0%,100%{--g:0%}50%{--g:100%}}
.hero .lead{max-width:30ch}
.hero .cta-stack{display:grid;justify-items:center;gap:14.4px;margin-top:4.8px}
/* WINgs Spotlight note: a small centred pearl card — star on top, copy centred beneath */
.spotlight{
  display:grid;justify-items:center;gap:12px;text-align:center;
  background:linear-gradient(135deg,#FFFFFF 0%,#FCF8F3 50%,#F6EDE3 100%);border:1px solid rgba(242,96,24,.22);border-radius:var(--radius);
  padding:22px clamp(20px,4vw,36px) 24px;max-width:440px;margin-inline:auto;line-height:1.6;
  box-shadow:inset 0 1px 0 #fff,0 20px 44px -30px rgba(90,40,10,.35);
}
.spotlight p{max-width:34ch}
.spotlight .star{flex:none;width:36px;height:36px;box-shadow:0 8px 18px -8px rgba(242,96,24,.7);border-radius:50%;background:var(--orange);display:grid;place-items:center;color:var(--cream)}
.spotlight .star svg{width:16px;height:16px;fill:currentColor}
.spotlight strong{color:var(--orange-deep)}

@media (min-width:761px){.hero .display{margin-bottom:.22em}}

/* countdown: one airy row, no boxes — big serif numerals divided by hairlines */
.countdown{display:grid;justify-items:center;gap:12px;margin-top:8px}
.countdown .cells{display:flex;justify-content:center}
.countdown .cell{display:grid;justify-items:center;gap:6px;padding:2px clamp(16px,3.2vw,40px);border-left:1px solid var(--line)}
.countdown .cell:first-child{border-left:0}
.countdown .num{font-family:var(--font-display);font-size:var(--fs-display);font-weight:600;line-height:1;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.countdown .cell:last-child .num{color:var(--orange)}
.countdown .num.tick{animation:tick .7s cubic-bezier(.16,1,.3,1)}
@keyframes tick{from{opacity:.25;transform:translateY(-.12em);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.countdown .unit{font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.countdown .num.tick{animation:none}}

/* ---------- Video frames ---------- */
.hero .video-frame .caption{inset:0;justify-content:center;align-items:center;text-align:center}
.hero .video-frame .caption .label{color:var(--cream);font-size:var(--fs-lead);letter-spacing:.3em;gap:17.6px;text-shadow:0 2px 19.2px rgba(26,10,2,.45)}
.hero .video-frame .caption .label::before,.hero .video-frame .caption .label::after{width:clamp(32px,6.4vw,96px);height:2px;background:currentColor;content:""}
.video-frame{
  position:relative;overflow:hidden;background:var(--ink);
  border-radius:var(--radius);aspect-ratio:21/9;isolation:isolate;
  box-shadow:0 48px 96px -40px rgba(199,70,26,.6);
}
.video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.video-frame .tint{position:absolute;inset:0;background:linear-gradient(160deg,rgba(242,96,24,.9),rgba(199,70,26,.7) 55%,rgba(242,96,24,.85));mix-blend-mode:color;z-index:1;opacity:.75}
.video-frame .veil{position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,rgba(26,10,2,.0) 0%,rgba(26,10,2,.0) 45%,rgba(26,10,2,.7) 100%),
    linear-gradient(120deg,rgba(242,96,24,.28),transparent 55%);
}
.video-frame .grain{position:absolute;inset:0;z-index:3;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.8'/></svg>")}
.video-frame .caption{position:absolute;left:clamp(16px,3.2vw,38.4px);right:clamp(16px,3.2vw,38.4px);bottom:clamp(16px,3.2vw,35.2px);z-index:4;color:var(--cream);display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.video-frame .caption .display{font-size:var(--fs-lead);font-style:italic;font-weight:600}
.video-frame .caption .label{color:var(--cream)}
.video-frame .sound{
  position:absolute;right:clamp(12.8px,2.4vw,25.6px);top:clamp(12.8px,2.4vw,25.6px);z-index:5;
  width:41.6px;height:41.6px;border-radius:50%;background:rgba(250,240,228,.92);color:var(--orange-deep);
  display:grid;place-items:center;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);transition:transform .4s var(--ease),background .3s;
}
.video-frame .sound:hover{transform:scale(1.08);background:var(--cream)}
.video-frame .sound svg{width:17.6px;height:17.6px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.video-frame .sound .on{display:none}
.video-frame .sound[aria-pressed="true"] .on{display:block}
.video-frame .sound[aria-pressed="true"] .off{display:none}
/* full-bleed hero video fading into the section */
.hero .hero-video{border-radius:0;width:100%;aspect-ratio:21/9;max-height:82vh;min-height:336px;box-shadow:none;background:var(--cream);margin:0;
  /* dissolve the whole frame (video, grain, tint) into the section so no edge shows under the headline */
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.hero .hero-video video{object-position:center 40%;will-change:transform} /* JS keeps it fixed while the hero scrolls away */
.hero .hero-video .veil{background:
  linear-gradient(180deg,rgba(250,240,228,0) 0%,rgba(250,240,228,0) 44%,rgba(250,240,228,.06) 48%,rgba(250,240,228,.16) 53%,rgba(250,240,228,.3) 58%,rgba(250,240,228,.46) 63%,rgba(250,240,228,.62) 68%,rgba(250,240,228,.76) 73%,rgba(250,240,228,.87) 79%,rgba(250,240,228,.95) 86%,var(--cream) 93%),
  linear-gradient(180deg,rgba(26,10,2,.82) 0%,rgba(26,10,2,.74) 12%,rgba(26,10,2,.64) 24%,rgba(26,10,2,.55) 34%,rgba(26,10,2,.47) 44%,rgba(26,10,2,.38) 52%,rgba(26,10,2,.29) 60%,rgba(26,10,2,.2) 68%,rgba(26,10,2,.12) 76%,rgba(26,10,2,.05) 84%,rgba(26,10,2,0) 92%),
  linear-gradient(120deg,rgba(242,96,24,.22),transparent 55%)}
.hero .hero-video .tint{opacity:.7}
.hero .hero-video .sound{top:auto;bottom:clamp(22.4px,8vh,96px);right:clamp(16px,3.2vw,38.4px);background:rgba(250,240,228,.7)}
.hero .hero-video .sound{display:none}
.hero .intro{position:relative;z-index:2;margin-top:clamp(-520px,-32vw,-64px)} /* raised so the white logo sits on the darker part of the video */


.band-video{padding:0;background:var(--ink)}
.band-video .video-frame{border-radius:0;aspect-ratio:21/9;max-height:82vh;width:100%;box-shadow:none}
.band-video .video-frame video{object-position:center 35%}
.band-video .veil{background:radial-gradient(ellipse 60% 70% at 50% 55%,rgba(26,10,2,.55),rgba(26,10,2,.15) 70%,rgba(26,10,2,0)),linear-gradient(180deg,rgba(26,10,2,.25),rgba(26,10,2,.0) 30%,rgba(26,10,2,.0) 70%,rgba(26,10,2,.35))}
.band-video .caption{justify-content:center;text-align:center;flex-direction:column;align-items:center;bottom:50%;transform:translateY(50%)}
.band-video .caption .display{font-size:var(--fs-display);font-weight:700;font-style:normal}
.band-video .caption .display em{color:var(--cream);font-style:normal;font-weight:inherit}

/* ---------- Marquee ---------- */
.marquee{background:var(--orange);color:var(--cream);padding-block:14.4px;overflow:hidden;border-block:1px solid rgba(26,10,2,.1)}
.marquee .track{display:flex;gap:0;width:max-content;animation:marquee 32s linear infinite}
.marquee .item{display:inline-flex;align-items:center;gap:.28em;padding-inline:11.2px;font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;letter-spacing:.02em;white-space:nowrap}
.marquee .item em{font-style:italic;font-weight:500}
.marquee .item .star{width:.72em;height:.72em;background:var(--ink);opacity:.9;margin-left:19.2px;
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)} /* four-pointed star */
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Story section ---------- */
/* story copy: one calm editorial column — drop cap, generous leading, an ornament, then the italic promise centred */
.story .text{max-width:600px;margin:clamp(40px,5.6vw,72px) auto 0;line-height:1.8;color:var(--ink)}
.story .text p+p{margin-top:1.1em}
.story .text strong{color:var(--ink);font-weight:700}
.story .text .open::first-letter{float:left;font-family:var(--font-display);font-weight:700;font-size:var(--fs-display);line-height:.8;margin:.06em .1em 0 0;color:var(--orange)}
.story .text .orn{display:flex;align-items:center;justify-content:center;gap:14px;margin:2.2em auto}
.story .text .orn::before,.story .text .orn::after{content:"";width:56px;height:1px;background:linear-gradient(90deg,rgba(242,96,24,0),rgba(242,96,24,.6))}
.story .text .orn::after{transform:scaleX(-1)}
.story .text .orn i{width:6px;height:6px;border-radius:50%;background:var(--orange);transform:rotate(45deg);border-radius:1px}
.story .text .big{margin-top:1.8em;padding-top:1.6em;border-top:1px solid rgba(242,96,24,.22);text-align:center;font-family:var(--font-display);font-size:var(--fs-lead);font-style:italic;font-weight:600;color:var(--orange);line-height:1.45}
/* ---------- Story: pinned card + typed copy (main.js drives both) ---------- */
.mbr{display:none}
.section.story{overflow:clip} /* clip (not hidden) so the sticky card can pin */
/* The pinned block (title + pill) sticks centred on screen; JS sets its top and the pin length */
.poem-pin{position:relative}
.poem-pin.shrinking{transition:height 1s cubic-bezier(.65,0,.35,1) 1.1s} /* same timing as the title fold */
.poem-stick{position:sticky;top:var(--stick-top,15vh)}
/* The pill: an ink copy of the line sits on the page; above it an orange plate (with its own cream/ink copy)
   is clipped by a circle. Closing shrinks the circle to nothing, so letters turn ink as the plate leaves them. */
.poem{position:relative;width:fit-content;max-width:100%;margin:clamp(28px,4vw,48px) auto 0;border-radius:999px;text-align:center}
/* the shadow lives on a wrapper as a drop-shadow, so it follows the plate's shrinking circle instead of outlining an empty pill */
.poem .plate-wrap{position:absolute;inset:0;z-index:1;border-radius:inherit;filter:drop-shadow(0 24px 30px rgba(120,38,8,.28))}
.poem .plate{position:absolute;inset:0;border-radius:inherit;overflow:hidden;isolation:isolate;
  background:linear-gradient(128deg,#F6793A 0%,var(--orange) 32%,#EC5A16 58%,#D94E16 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(90,25,0,.18);
  clip-path:circle(75% at 50% 50%);transition:clip-path 1.5s cubic-bezier(.65,0,.35,1)}
.poem .plate .line{position:absolute;inset:0;z-index:1}
.poem.closed .plate{clip-path:circle(0% at 50% 50%)}
.poem .line{display:flex;justify-content:center;align-items:center;gap:.24em;white-space:nowrap;
  padding:clamp(18px,2.6vw,30px) clamp(26px,4vw,52px);
  font-family:var(--font-display);font-size:calc(var(--fs-display) * var(--k,1));line-height:1.12;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.poem .plate .line .ph{color:var(--cream)}
/* closing: "Every" takes the same italic as the rest of the line so the sentence reads as one title */
.poem.final .ev{font-style:italic;font-weight:500}
/* after the plate has shrunk away, the section title dissolves (blur + fade) and folds shut;
   the sentence rises into its place and the copy below follows close beneath it */
.title-fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows 1s cubic-bezier(.65,0,.35,1),opacity .7s ease,filter .7s ease,transform 1s cubic-bezier(.65,0,.35,1)}
.title-fold>.center{min-height:0;overflow:hidden}
.poem{opacity:0;transform:translateY(22px) scale(.96);filter:blur(8px);
  transition:margin 1s cubic-bezier(.65,0,.35,1),opacity 1s cubic-bezier(.16,1,.3,1) .9s,transform 1.2s cubic-bezier(.16,1,.3,1) .9s,filter 1s cubic-bezier(.16,1,.3,1) .9s}
.poem.in{opacity:1;transform:none;filter:none} /* .9s delay: the title above lands first */
.poem .line{transition:font-size .8s cubic-bezier(.65,0,.35,1),padding 1s cubic-bezier(.65,0,.35,1)}
.poem-stick.done .title-fold{grid-template-rows:0fr;opacity:0;filter:blur(14px);transform:translateY(-18px) scale(.98);
  transition-delay:1.1s,1.1s,1.1s,1.1s}
/* closing line: the pill rises to the centre of the screen (in place of the faded title); once the title folds shut it no longer needs the lift */
.poem{translate:0 0}
.poem-stick .poem{transition:margin 1s cubic-bezier(.65,0,.35,1),opacity 1s cubic-bezier(.16,1,.3,1) .9s,transform 1.2s cubic-bezier(.16,1,.3,1) .9s,filter 1s cubic-bezier(.16,1,.3,1) .9s,translate .8s cubic-bezier(.45,0,.2,1)}
.poem-stick.ending:not(.done) .poem{translate:0 calc(var(--lift,0px) * -1)}
.poem-stick.done .poem{transition-delay:1.1s,0s,0s,0s,1.1s;transition-duration:1s,1s,1.2s,1s,1s}
/* the title already dissolves in place as the closing line arrives, so it is gone before the pill shrinks */
.poem-stick.ending:not(.done) .title-fold{opacity:0;filter:blur(14px);transform:translateY(-18px) scale(.98);transition-delay:0s,.15s,.15s,.15s;transition-duration:1s,.6s,.6s,.8s}
.poem-stick.done .poem{margin-top:0;transition-delay:1.1s,0s,0s,0s,1.1s}
.poem-stick.done .poem .line{padding-block:0;transition-delay:0s,1.1s}
@media (prefers-reduced-motion:reduce){.poem-stick.done .title-fold{grid-template-rows:1fr;opacity:1;filter:none;transform:none}}
/* phrase stack: the box eases to each phrase's width (in em, so it follows the line size); phrases rise in from a blur */
.poem .rot{display:block;position:relative;height:1.12em;overflow:clip;overflow-clip-margin:.28em;transition:width .7s cubic-bezier(.65,0,.35,1)}
.poem .ph{position:absolute;left:0;top:0;font-style:italic;font-weight:500;opacity:0;transform:translateY(.45em);filter:blur(8px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1)}
.poem .ph:not(.on):not(.out){visibility:hidden}
.poem .ph.on{opacity:1;transform:none;filter:none;transition-delay:.45s} /* lands once the pill has mostly resized */
.poem .ph.out{opacity:0;transform:translateY(-.4em);filter:blur(8px);transition-duration:.6s;transition-delay:0s}
.story .text{margin-top:clamp(40px,5vw,64px)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* typing: letters are laid out from the start (no reflow) and fade in one by one behind a thin orange caret */
.story .typing .wd{white-space:nowrap}
.story .typing .ch{opacity:0;transition:opacity .35s ease}
.story .typing .ch.on{opacity:1}
.story .caret{display:inline-block;width:2px;height:1.05em;margin:0 -2px -.15em 0;background:var(--orange);animation:caret .9s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.poem-pin{height:auto!important}.poem-stick{position:static}}
.story .pull{
  position:relative;margin-top:clamp(44.8px,6.4vw,88px);text-align:center;
  font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;letter-spacing:-.02em;line-height:1.1;
}
.story .pull em{color:var(--orange);font-style:normal;font-weight:inherit}
.story .pull .ul{display:inline-block;position:relative}
.story .pull .ul::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.06em;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .3s}
.story .pull.in .ul::after{transform:scaleX(1)}

/* ---------- Evening section (dark) ---------- */
.evening .head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(22.4px,4vw,64px);align-items:end}
.evening .head .lead{color:var(--cream)}
.evening .list{margin-top:clamp(38.4px,5.6vw,76.8px);border-top:1px solid var(--line-dark)}
.evening .row{
  display:grid;grid-template-columns:72px 1fr;gap:clamp(12.8px,2.4vw,38.4px);
  padding:clamp(17.6px,2.4vw,27.2px) 0;
  background:linear-gradient(var(--line-dark),var(--line-dark)) no-repeat left bottom/100% 1px;
  align-items:start;position:relative;
}
/* hover: the row lights up as a warm plate and a diagonal streak sweeps across it once */
.evening .row::before{content:"";position:absolute;left:-12.8px;right:-12.8px;top:0;bottom:0;border-radius:14.4px;z-index:-1;
  background-color:rgba(242,96,24,0);
  background-image:linear-gradient(112deg,transparent 40%,rgba(255,190,140,.08) 45%,rgba(255,224,200,.26) 50%,rgba(255,190,140,.08) 55%,transparent 60%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;transition:background-color .5s}
.evening .row:hover::before{background-color:rgba(242,96,24,.12);background-position:0 0;
  transition:background-color .5s,background-position 1.4s cubic-bezier(.45,0,.25,1)}
.evening .num{font-family:var(--font-display);font-size:var(--fs-lead);font-style:italic;color:var(--orange);font-weight:500;line-height:1.3}
.evening .row p{color:var(--white)}
.evening .row p strong{color:var(--orange);display:block;font-family:var(--font-display);font-size:var(--fs-lead);font-weight:600;line-height:1.3;margin-bottom:.35em}
/* rows reveal one after another (JS sets --d per row) with a single soft shine across each title;
   afterwards a quiet glint runs along the dividers now and then, row after row, so it travels diagonally down the list */
/* entrance: the divider draws itself left → right, the number settles, then the copy rises out of a soft blur */
.evening .row.reveal{opacity:1;transform:none;background-size:0% 1px;transition:background-size 1.8s cubic-bezier(.65,0,.35,1) var(--d,0s)}
.evening .row.reveal.in{background-size:100% 1px}
.evening .row.reveal .num,.evening .row.reveal p{opacity:0;transform:translateY(22px);filter:blur(8px);
  transition:opacity 1.4s cubic-bezier(.16,1,.3,1),transform 1.6s cubic-bezier(.16,1,.3,1),filter 1.4s cubic-bezier(.16,1,.3,1)}
.evening .row.reveal .num{transform:translateY(10px);transition-delay:calc(var(--d,0s) + .15s)}
.evening .row.reveal p{transition-delay:calc(var(--d,0s) + .3s)}
.evening .row.reveal.in .num,.evening .row.reveal.in p{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.evening .row.reveal .num,.evening .row.reveal p{opacity:1;transform:none;filter:none}.evening .row.reveal{background-size:100% 1px}}
.evening .row .num,.evening .row p strong{
  background:linear-gradient(112deg,var(--orange) 0 42%,#FFD2B2 50%,var(--orange) 58% 100%);
  background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.evening .row::after{content:"";position:absolute;bottom:-1px;left:-28%;width:28%;height:1px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(255,200,160,0),rgba(255,226,204,.8),rgba(255,200,160,0))}
@keyframes textshine{from{background-position:100% 0}to{background-position:0 0}}
@keyframes lineglint{0%{left:-28%;opacity:0}3%{opacity:1}17%{opacity:1}20%,100%{left:100%;opacity:0}}
.evening .row.in p strong{animation:textshine 2s cubic-bezier(.45,0,.25,1) calc(var(--d,0s) + 1.1s) backwards}
/* the lettering catches the same streak as it passes over (number first, then the title) */
.evening .row.in:hover .num{background-position:0 0;transition:background-position 1.1s cubic-bezier(.45,0,.25,1) .05s}
.evening .row.in:hover p strong{background-position:0 0;transition:background-position 1.3s cubic-bezier(.45,0,.25,1) .2s}
.evening .row.in::after{animation:lineglint 11s cubic-bezier(.45,0,.25,1) calc(4s + var(--d,0s) * .5) infinite}
@media (prefers-reduced-motion:reduce){.evening .row p strong,.evening .row::after{animation:none!important}}
.evening .more{margin-top:clamp(28.8px,4vw,51.2px);font-family:var(--font-display);font-style:italic;font-size:var(--fs-lead);color:var(--orange);font-weight:500}

/* ---------- Secret section ---------- */

.secret .cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14.4px,2.4vw,25.6px);margin-top:clamp(32px,4.8vw,57.6px)}
.card{
  position:relative;border-radius:var(--radius);padding:clamp(22.4px,3.2vw,38.4px);
  background:linear-gradient(135deg,#FFFFFF 0%,#FCF8F3 48%,#F5ECE2 100%);border:1px solid rgba(242,96,24,.22);
  box-shadow:inset 0 1px 0 #fff;
  display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  transition:transform .8s var(--ease),box-shadow .8s var(--ease);
}
.card>*{position:relative;z-index:1}
.card:hover{transform:translateY(-3.2px);box-shadow:inset 0 1px 0 #fff,0 28px 56px -36px rgba(90,40,10,.35)}
/* on light plates the streak needs warm, slightly darker flanks to read as polished metal */
.card::after,.step::after{background:
    linear-gradient(112deg,transparent 38%,rgba(190,110,50,.07) 44%,rgba(190,110,50,.12) 47.5%,rgba(255,255,255,.95) 50%,rgba(190,110,50,.12) 52.5%,rgba(190,110,50,.07) 56%,transparent 62%),
    linear-gradient(112deg,transparent 28%,rgba(242,160,100,.08) 50%,transparent 72%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0}

.card .lock{width:51.2px;height:51.2px;border-radius:16px;background:var(--ink);color:var(--orange);display:grid;place-items:center;margin-bottom:17.6px}
.card .lock svg{width:22.4px;height:22.4px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;margin-bottom:.5em;line-height:1.2}
.card .soon{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:22.4px;color:var(--orange-deep);font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.card .soon i{width:6.4px;height:6.4px;border-radius:50%;background:var(--orange);animation:blink 1.6s infinite}
/* ---------- Journey: "pas cu pas" timeline (horizontal on desktop, vertical on phones) ---------- */
.journey{list-style:none;position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin-top:clamp(40px,5.6vw,72px)}
/* the track draws in as the section enters; an orange fill then follows the scroll (--fill, set by main.js) */
.journey::before,.journey::after{content:"";position:absolute;top:27.5px;left:10%;right:10%;height:1px;transform-origin:left}
.journey::before{background:var(--line);transform:scaleX(0);transition:transform 2.4s cubic-bezier(.65,0,.35,1) .2s}
.journey.in::before{transform:none}
.journey::after{height:2px;margin-top:-.5px;background:linear-gradient(90deg,var(--orange-deep),var(--orange));transform:scaleX(var(--fill,0))}
.jstep{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 clamp(8px,1.4vw,18px)}
.jstep .dot{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#FFFFFF,#FBF4EC 55%,#F2E4D5);border:1px solid var(--line);color:var(--ink);transition:border-color .5s ease,color .5s ease,box-shadow .5s ease;
  box-shadow:inset 0 1px 0 #fff,0 12px 24px -16px rgba(90,40,10,.45)}
.jstep .dot svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.jstep.now .dot{background:linear-gradient(135deg,#F6793A,var(--orange) 45%,#D94E16);border-color:transparent;color:var(--cream);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 32px -14px rgba(242,96,24,.75);transition:transform .5s var(--ease)}
.jstep.now .dot:hover{transform:scale(1.06)}
.jstep.now .dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(242,96,24,.5);animation:halo 3.4s cubic-bezier(.16,1,.3,1) 2.6s infinite;opacity:0}
@keyframes halo{0%{transform:scale(.8);opacity:0}15%{opacity:.9}100%{transform:scale(1.45);opacity:0}}
.jstep.gala .dot{background:linear-gradient(135deg,#3A1C0C,var(--ink) 60%);border-color:transparent;color:var(--orange);
  box-shadow:inset 0 0 0 1px rgba(242,96,24,.18),0 12px 24px -14px rgba(26,10,2,.55)} /* no white top highlight on the dark marker */
.jstep.gala .dot svg{fill:currentColor;stroke:none}
/* when the orange fill reaches the gala, its marker pops: a happy little shake, then it settles slightly larger with a warm glow */
.jstep.gala.reached .dot{animation:joyzoom 1s cubic-bezier(.34,1.56,.64,1) forwards}
.jstep.gala.reached .dot svg{animation:joyshake .9s ease-in-out .1s}
@keyframes joyzoom{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1.08);box-shadow:inset 0 0 0 1px rgba(242,96,24,.35),0 0 0 6px rgba(242,96,24,.14),0 14px 28px -12px rgba(199,70,26,.6)}}
@keyframes joyshake{0%,100%{transform:rotate(0)}15%{transform:rotate(-16deg) scale(1.1)}30%{transform:rotate(13deg) scale(1.15)}45%{transform:rotate(-9deg)}60%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.jstep.gala.reached .dot,.jstep.gala.reached .dot svg{animation:none}}
.jlabel{margin-top:18px;font-weight:700;letter-spacing:.12em;white-space:nowrap;text-transform:uppercase;color:var(--ink);transition:color .5s ease}
.jstep.now .jlabel,.jstep.gala .jlabel,.jstep.reached .jlabel{color:var(--orange-deep)}
/* a step lights up as the orange fill reaches it */
.jstep.reached:not(.now):not(.gala) .dot{border-color:rgba(242,96,24,.7);color:var(--orange);box-shadow:inset 0 1px 0 #fff,0 0 0 4px rgba(242,96,24,.12),0 12px 24px -16px rgba(199,70,26,.55)}
.jstep h3{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;line-height:1.2;margin:.45em 0 .4em}
.jstep p{line-height:1.55;color:var(--ink);max-width:24ch}
/* entrance: each step lands as the line reaches it */
.journey .jstep>*{opacity:0;transform:translateY(16px);filter:blur(6px);
  transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.4s cubic-bezier(.16,1,.3,1),filter 1.2s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i) * .45s + .35s)}
.journey .jstep .dot{transform:scale(.6)}
.journey .jstep>:nth-child(n+2){transition-delay:calc(var(--i) * .45s + .5s)}
.journey.in .jstep>*{opacity:1;transform:none;filter:none}
.journey.in .jstep.now .dot{transition:opacity 1.2s cubic-bezier(.16,1,.3,1) .35s,transform .5s var(--ease),filter 1.2s .35s}
@media (prefers-reduced-motion:reduce){.journey::before,.journey::after{transform:none}.journey .jstep>*{opacity:1;transform:none;filter:none}.jstep.now .dot::after{animation:none}}
@media (max-width:860px){
  /* phones: a centred column — marker, label, title, text — with a short hairline leading down to the next step */
  .journey{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .journey::before,.journey::after{display:none}
  .jstep{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px 84px}
  .jstep:last-of-type{padding-bottom:0} /* last-of-type: the spark and embers are appended after the steps */
  .jlabel{margin-top:16px}
  .jstep p{max-width:30ch}
  .jstep:not(:last-of-type)::after{content:"";position:absolute;left:50%;bottom:18px;width:1px;height:48px;margin-left:-.5px;
    background:linear-gradient(var(--orange-deep),var(--orange)) top/100% calc(var(--seg,0) * 100%) no-repeat,var(--line);
    transform:scaleY(0);transform-origin:top;transition:transform .8s cubic-bezier(.65,0,.35,1) calc(var(--i) * .45s + .9s)}
  .journey.in .jstep::after{transform:none}
}
.secret .cta{display:flex;justify-content:center;margin-top:clamp(32px,4.8vw,51.2px)}

/* ---------- Why section (orange) ---------- */
.why .wrap{text-align:center}
.why .display{margin-inline:auto}
.why .closing{margin-inline:auto}
.step{text-align:center}
.step .bar{margin-inline:auto}
.why .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14.4px,2.4vw,25.6px);margin-top:clamp(32px,4.8vw,57.6px)}
.step{
  background:linear-gradient(135deg,#FDF7F0 0%,var(--cream) 45%,#F1E2D2 100%);color:var(--ink);border-radius:var(--radius);padding:clamp(20.8px,2.8vw,33.6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  position:relative;overflow:hidden;isolation:isolate;transition:transform .8s var(--ease)
}
.step>*{position:relative;z-index:1}
.step:hover{transform:translateY(-3.2px)}
.step .n{font-family:var(--font-display);font-size:var(--fs-display);line-height:1;color:var(--orange);font-weight:700;font-style:italic;letter-spacing:-.03em}
.step .n small{font-size:var(--fs-body);font-family:var(--font-text);font-style:normal;text-transform:uppercase;letter-spacing:.24em;vertical-align:middle;margin-left:8px;color:var(--ink);font-weight:700}
.step h3{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;margin:.6em 0 .4em;line-height:1.25}
.step .bar{height:3.2px;background:var(--orange);width:38.4px;border-radius:2px;margin-bottom:14.4px;transform-origin:left;transition:width .8s var(--ease)}
.step:hover .bar{width:100%}
.why .closing{margin-top:clamp(32px,4vw,44.8px);font-family:var(--font-display);font-size:var(--fs-lead);font-style:italic;font-weight:500;max-width:688px}

/* ---------- Final section (dark) ---------- */
.final{text-align:center}
.final .display{color:var(--cream);max-width:20ch;margin-inline:auto;margin-top:.7em!important;line-height:1.1}
.final .lead{color:var(--cream);max-width:576px;margin-inline:auto;margin-top:1.6em;line-height:1.5}
.final .lead strong{color:var(--orange)}
.final .cta-stack{display:grid;justify-items:center;gap:17.6px;margin-top:clamp(35.2px,4.8vw,57.6px)}
.final .cta-note{color:var(--cream)}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--cream);padding:32px 0 calc(32px + env(safe-area-inset-bottom));border-top:1px solid var(--line-dark)}
.footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:19.2px;flex-wrap:wrap}
.footer img{height:73.6px}
.footer .meta{display:flex;gap:17.6px;flex-wrap:wrap;align-items:center;font-weight:500}
.footer .meta a:hover{color:var(--orange)}
.footer .meta .sep{width:4px;height:4px;border-radius:50%;background:var(--orange)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(27.2px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}

/* ---------- Form page (single centred card) ---------- */
.page-center{min-height:100vh;display:grid;place-items:center;padding:clamp(19.2px,3.2vw,38.4px) var(--gutter);position:relative;overflow:hidden;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(242,96,24,.18),rgba(242,96,24,0) 70%),var(--cream)}
.page-center .rings{opacity:.34}
.form-card .top{display:grid;justify-items:center;text-align:center;gap:4.8px;margin-bottom:3.2px}
.form-card .top img{height:49.6px}
.form-card .top h1{margin:.15em 0 0;max-width:22ch}
.form-card .top p{max-width:40ch}
.form-card .back{position:absolute;left:clamp(12.8px,2.4vw,22.4px);top:clamp(12.8px,2.4vw,19.2px);display:inline-flex;align-items:center;gap:6.4px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);transform:scale(.8);transform-origin:left top}
.form-card .back svg{width:12.8px;height:12.8px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.form-card .back:hover{color:var(--ink)}
.form-card{
  position:relative;z-index:1;width:min(448px,100%);background:var(--white);border-radius:var(--radius);
  padding:clamp(27.2px,3.2vw,35.2px) clamp(17.6px,3.2vw,32px) clamp(16px,2.4vw,22.4px);border:1px solid rgba(242,96,24,.25);box-shadow:0 40px 80px -40px rgba(199,70,26,.45);
}
.form-card h1{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;line-height:1.2;margin:.5em 0 .3em}
.form-grid{display:grid;gap:8px;margin-top:11.2px}
.form-grid .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.field{display:grid;gap:2.4px}
.field label{font-weight:700;letter-spacing:.02em}
.field label span{color:var(--orange-deep);font-weight:500}
.field input{
  font:inherit;color:var(--ink);background:var(--cream);border:2px solid transparent;border-radius:12.8px;
  padding:.62em .95em;width:100%;transition:border-color .3s,background .3s,box-shadow .3s;outline:none;
}
.field input::placeholder{color:var(--muted);opacity:.8}
.field input:focus{border-color:var(--orange);background:var(--white);box-shadow:0 0 0 4px rgba(242,96,24,.15)}
.field input:user-invalid,.field.invalid input{border-color:var(--orange-deep)}
.field .err{color:var(--orange-deep);font-weight:700;display:none}
.field.invalid .err{display:block}
.check{display:flex;gap:9.6px;align-items:flex-start;cursor:pointer;line-height:1.4}
.check input{appearance:none;width:20.8px;height:20.8px;border-radius:6.4px;border:2px solid var(--orange);background:var(--cream);flex:none;margin-top:2px;display:grid;place-items:center;cursor:pointer;transition:background .3s}
.check input::after{content:"";width:9.6px;height:5.6px;border-left:2.4px solid var(--cream);border-bottom:2.4px solid var(--cream);transform:rotate(-45deg) translate(1px,-1px);opacity:0;transition:opacity .2s}
.check input:checked{background:var(--orange)}
.check input:checked::after{opacity:1}
.check span a{color:var(--orange-deep);font-weight:700;text-decoration:underline;text-underline-offset:2.4px}
.form-card .btn{width:100%;justify-content:center;margin-top:3.2px}
.form-card .btn[disabled]{opacity:.7;pointer-events:none}
.form-card .fine{margin-top:8px;text-align:center;font-weight:500}
.form-card .fine strong{color:var(--orange-deep)}
.form-card .counter{display:flex;align-items:center;gap:8px;background:var(--cream);border-radius:9.6px;padding:6.4px 9.6px;font-weight:700;margin-top:6.4px;justify-content:center;text-align:center}
.form-card .counter i{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:blink 1.6s infinite;flex:none}
.form-card .counter b{color:var(--orange-deep)}

/* ---------- Thank you ---------- */
.thanks .ribbon{width:clamp(120px,17.6vw,184px);filter:drop-shadow(0 17.6px 27.2px rgba(242,96,24,.35));animation:pop 1s var(--ease) both,sway 6s ease-in-out 1s infinite;transform-origin:50% 55%}
.thanks .ribbon svg{width:100%;height:auto;display:block}
@keyframes sway{0%,100%{rotate:-2.5deg}50%{rotate:2.5deg}}
.thanks .gown{width:clamp(152px,17.6vw,224px);justify-self:center;filter:drop-shadow(0 16px 24px rgba(0,0,0,.5))}
.thanks .gown svg{width:100%;height:auto;display:block}
/* boxes: centred text, no dash before labels */
.card,.step,.form-card .top{text-align:center}
.card .label::before,.step .label::before,.form-card .top .label::before,.form-card .top .label::after{display:none}
.card .lock{margin-inline:auto}
.card .soon{justify-content:center}
.thanks .name{display:inline-block;background:var(--orange);color:var(--cream);padding:.02em .4em .06em;border-radius:.35em;font-style:normal;box-shadow:0 11.2px 24px -11.2px rgba(242,96,24,.8)}
.thanks .top .display{max-width:none}
.thanks{min-height:100vh;display:grid;align-content:start;position:relative;overflow:hidden;padding:clamp(96px,11.2vw,136px) 0 clamp(64px,8vw,96px)}
.thanks .top{text-align:center;display:grid;justify-items:center;gap:17.6px}
.thanks .top .display{max-width:14ch}
/* ---------- thank-you page: same system as the landing — title / subtitle / body, centred, generous rhythm ---------- */
.thanks .intro{max-width:36ch;margin-inline:auto}
.thanks .next{margin-top:clamp(64px,8vw,104px);text-align:center}
.thanks .next .journey{margin-top:clamp(32px,4vw,52px)}
@media (min-width:861px){ /* three-step variant (thank-you page); below 861px it stacks like the landing journey */
  .journey.three{grid-template-columns:repeat(3,1fr);max-width:880px;margin-inline:auto}
  .journey.three::before,.journey.three::after{left:16.67%;right:16.67%}
}
.dress-card{position:relative;overflow:hidden;isolation:isolate;margin-top:clamp(64px,8vw,104px);
  background:var(--ink);color:var(--cream);border-radius:var(--radius);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(24px,4vw,64px);
  padding:clamp(36px,5vw,72px) clamp(28px,6vw,96px)}
.dress-card .pattern{opacity:.08;-webkit-mask-image:none;mask-image:none}
.dress-card .copy{position:relative;z-index:1;display:grid;gap:20px;justify-items:start}
.dress-card .label{color:var(--orange)}
.dress-card .display{color:var(--cream);max-width:13ch;margin:0}
.dress-card .gown{position:relative;z-index:1;width:clamp(152px,17.6vw,224px);filter:drop-shadow(0 16px 24px rgba(0,0,0,.5))}
.dress-card .gown svg{width:100%;height:auto;display:block}
.thanks .soon{text-align:center;margin-top:clamp(56px,7vw,88px);color:var(--ink);font-weight:500}
.thanks .actions{display:flex;justify-content:center;margin-top:20px}
.thanks .top .display em{color:var(--orange);font-style:normal;font-weight:inherit}
.thanks .badge{width:73.6px;height:73.6px;border-radius:50%;background:var(--orange);display:grid;place-items:center;color:var(--cream);box-shadow:var(--shadow-orange);animation:pop 1s var(--ease) both}
.thanks .badge svg{width:35.2px;height:35.2px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.thanks .badge svg path{stroke-dasharray:60;stroke-dashoffset:60;animation:draw 1s var(--ease) .5s forwards}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .evening .head{grid-template-columns:1fr}
  .why .steps{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* keep text readable on phones after the 80% desktop scale-down */
  :root{--fs-body:.94rem;--fs-lead:1.14rem}
  .secret .cards{grid-template-columns:1fr}
      .evening .row{grid-template-columns:1fr;gap:6.4px}
  /* evening section reads centred on phones */
  .evening .head,.evening .row{text-align:center;justify-items:center}
  /* thank-you page: dress card stacks and centres */
  .dress-card{grid-template-columns:1fr;justify-items:center;text-align:center;padding:40px 22px 32px}
  .dress-card .copy{justify-items:center}
  .dress-card .gown{width:140px}
  .evening .head .display,.evening .head .lead{margin-inline:auto}
  .evening .more{text-align:center}
  .form-grid .two{grid-template-columns:1fr}
  .header .when{letter-spacing:.1em;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.3}
  .header .when i{display:none}
  .hero .date{letter-spacing:.16em}
  .hero .hero-video .sound{bottom:30%}
  /* buttons always stay on one row: tighter padding on phones instead of wrapping */
  .btn.big{padding:1em 1.1em 1em 1.5em;gap:.75em}
  .btn:hover,.btn:focus-visible{letter-spacing:.01em}
  .logo img{height:51.2px}
  .header.scrolled .logo img{height:52px}
  /* Videos: full portrait ratio on phones */
  .video-frame{aspect-ratio:9/16;border-radius:208px 208px var(--radius) var(--radius)}
  .video-frame video{object-position:center center}
  .band-video .video-frame{aspect-ratio:9/16;max-height:none;border-radius:0}
  .video-frame .caption{flex-direction:column;align-items:flex-start;padding-right:57.6px}
  .hero .hero-video{aspect-ratio:9/16;max-height:none;min-height:0;border-radius:0}
  .hero .intro{margin-top:-72px}
  .video-frame .sound{top:auto;bottom:clamp(16px,3.2vw,35.2px)}
  .band-video .caption{align-items:center;text-align:center;padding-right:0;justify-content:center}
  .band-video .caption .label{justify-content:center;text-align:center;white-space:normal}
  .hero .display .w span{transform:none}
  .countdown .cell{padding:2px clamp(12px,4vw,18px)}
  .countdown .unit{letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero .display .w span{transform:none;opacity:1}
}

/* ---------- Mobile-only refinements ---------- */
@media (max-width:760px){
  /* 1. shorter videos */
  .hero .hero-video{aspect-ratio:1/1}
  .band-video .video-frame{aspect-ratio:4/5}
  .hero .intro{margin-top:-46vw;gap:22px}
  .hero .countdown{margin-top:4px}
  /* calmer hero on phones: spaced capitals read larger than they are, so tighten them and lighten the weight;
     the intro drops to body size so the hero uses just title + body */
  .label{letter-spacing:.2em;font-weight:600}
  .hero .label.pill{padding:.5em 1.2em}
  .hero .date{letter-spacing:.1em;font-weight:600}
  .countdown .unit{letter-spacing:.06em;font-weight:600}
  .hero .lead{font-size:var(--fs-body);line-height:1.6;max-width:34ch}

  /* 2. on load: white logo centred over the hero. Once the hero button has scrolled away (JS adds .show-cta),
        the logo cross-fades into a sticky register bar */
  .header.has-cta{background:transparent;box-shadow:none;padding-block:12px}
  .header.has-cta:not(.show-cta){-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none} /* no empty frosted bar before the register bar appears */
  .header.has-cta .when{display:none}
  .header.has-cta .wrap{display:grid;place-items:center;justify-content:center}
  .header.has-cta .wrap>*{grid-area:1/1}
  .header.has-cta .logo{display:none} /* the logo lives in the hero on phones too */
  .header.has-cta .logo img{height:60px}
  .header.has-cta .logo img.light{display:block}
  .header.has-cta .logo img.dark{display:none}
  .header.has-cta.show-cta{background:rgba(250,240,228,.9);backdrop-filter:blur(11.2px);-webkit-backdrop-filter:blur(11.2px);box-shadow:0 1px 0 rgba(26,10,2,.08);padding-block:8px}
  .header.has-cta.show-cta .logo{opacity:0;transform:translateY(-8px);pointer-events:none}
  .header.has-cta .head-cta{opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .header.has-cta.show-cta .head-cta{opacity:1;transform:none;pointer-events:auto}
  .head-cta{display:inline-flex;white-space:nowrap;padding:.7em 1.1em .7em 1.4em;letter-spacing:.01em}
  .head-cta{background:var(--ink);background-image:none;color:var(--orange);box-shadow:0 8px 19.2px -11.2px rgba(26,10,2,.6);animation:none}
  .head-cta .ic{width:1.9em;height:1.9em;background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.65)}
  .head-cta::before,.head-cta::after{display:none}
  .head-cta:hover,.head-cta:focus-visible{background:var(--ink);color:var(--orange);transform:none;letter-spacing:.01em;box-shadow:0 8px 19.2px -11.2px rgba(26,10,2,.6)}
  .head-cta:hover .ic{background:transparent;color:#fff;transform:none;box-shadow:none}
  .head-cta:active{background:linear-gradient(100deg,var(--orange-deep) 0%,var(--orange) 45%,#FF7E3F 100%);color:var(--cream);transform:scale(.98)}
  .head-cta:active .ic{background:var(--cream);color:var(--orange);border-color:var(--cream)}
  .hero .hero-video .veil{background:linear-gradient(180deg,rgba(26,10,2,.5) 0%,rgba(26,10,2,.2) 13%,rgba(26,10,2,0) 26%),linear-gradient(180deg,rgba(250,240,228,0) 0%,rgba(250,240,228,0) 22%,rgba(250,240,228,.22) 36%,rgba(250,240,228,.55) 48%,rgba(250,240,228,.82) 60%,rgba(250,240,228,.95) 70%,var(--cream) 80%),linear-gradient(120deg,rgba(242,96,24,.22),transparent 55%)}
  .mbr{display:inline}
  /* 4. no dashes beside headlines */
  .label::before,.label::after{display:none!important}
  .label{gap:0}
  /* 5. centred footer */
  .footer .wrap{flex-direction:column;justify-content:center;text-align:center;gap:14.4px}
  .footer .meta{flex-direction:column;justify-content:center;gap:8px}
  .footer .meta .sep{display:none} /* no dots once the rows stack */
}

/* desktop: no dash before these three labels */
@media (min-width:761px){
  .band-video .caption .label::before,
  .story>.wrap>.label::before,
  .evening .head .label::before{display:none}
  .band-video .caption .label,.story>.wrap>.label,.evening .head .label{gap:0}
}
/* story: the orange promise and the closing line wait until the copy above has finished typing */
.reveal.hold{opacity:0;transform:translateY(27px)}
.story .pull.hold .ul::after{transform:scaleX(0)}
/* while the story copy types, the page holds still (JS); keep the scrollbar slot so nothing shifts */
html.typing-lock{scrollbar-gutter:stable}
html.typing-lock body{overflow:hidden} /* on body, not html: it still hands scrolling to the viewport, so the sticky pin is unaffected */
/* very narrow phones: trim the button padding further so the label still fits on one row */
@media (max-width:360px){.btn.big,.btn{padding-left:.95em;padding-right:.55em;gap:.5em}.btn.big .ic{width:2em;height:2em}}
/* ---------- thank-you page: larger header logo, dress-code button, paper-flip card ---------- */
.header.logo-lg .logo img{height:84px}
@media (max-width:760px){.header.logo-lg .logo img{height:58px}}
.thanks .next-cta{display:flex;justify-content:center;margin-top:clamp(28px,3.6vw,44px)}
.thanks .next .journey{margin-top:clamp(48px,6vw,80px)}
/* ---------- dress-code popup: a sheet of paper that rises face down, then turns over and bends like paper ---------- */
html.modal-open body{overflow:hidden}
.paper-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:clamp(16px,4vw,48px)}
.paper-modal[hidden]{display:none}
.pm-backdrop{position:absolute;inset:0;background:rgba(26,10,2,.58);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);opacity:0;transition:opacity .8s ease}
.paper-modal.on .pm-backdrop{opacity:1}
/* the sheet slides up from below the screen, a touch tilted like paper caught on air, and eases to rest;
   on close it drops back down, quicker */
.pm-stage{position:relative;width:min(880px,100%);perspective:2400px;opacity:0;transform:translateY(75vh) rotate(-4deg);
  transition:opacity .5s ease,transform .6s cubic-bezier(.55,0,.75,.4)}
.paper-modal.on .pm-stage{opacity:1;transform:none;
  transition:opacity .45s ease,transform 1.3s cubic-bezier(.2,.85,.25,1.04)}
.pm-close{position:absolute;right:0;top:-60px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(250,240,228,.35);background:rgba(250,240,228,.08);
  color:var(--cream);display:grid;place-items:center;cursor:pointer;transition:background .3s,transform .4s var(--ease)}
.pm-close:hover{background:rgba(250,240,228,.18);transform:rotate(90deg)}
.pm-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pm-shadow{position:absolute;left:8%;right:8%;bottom:-26px;height:46px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),rgba(0,0,0,0));filter:blur(6px);transform:scaleX(var(--sh,1));opacity:var(--sho,1)}
.paper{position:relative;transform-style:preserve-3d}
.paper .flipwrap{position:absolute;inset:0;transform-style:preserve-3d}
.paper .seg{position:absolute;top:0;height:100%;transform-origin:0 50%;transform-style:preserve-3d}
.paper .f{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.paper .f.b{transform:rotateY(180deg)}
.paper .slice{position:absolute;top:0;height:100%}
.paper .f .shade{position:absolute;inset:0;pointer-events:none}
.paper .slice>.dress-card,.paper .slice>.paper-back{height:100%;margin:0}
/* the face-down side: light paper with the WIN mark */
.paper-back{position:relative;overflow:hidden;isolation:isolate;display:grid;place-items:center;align-content:center;gap:16px;border-radius:var(--radius);
  background:linear-gradient(135deg,#FFFDF9 0%,#FBF3EA 55%,#F3E5D6 100%);box-shadow:inset 0 0 0 1px var(--line);text-align:center}
.paper-back .pattern{opacity:.1;-webkit-mask-image:none;mask-image:none}
.paper-back>*:not(.pattern){position:relative;z-index:1}
.paper-back img{height:76px;width:auto}
.paper-back .label{color:var(--orange-deep)}
.paper-back .label::before,.paper-back .label::after{display:none}

/* hero note: the first sentence sits on its own row */
.ticket-note strong{display:block}
/* ---------- landing (desktop): the white logo opens the hero; the header bar — larger logo + date — appears once it has scrolled away ---------- */
/* the white mark reads because the top of the hero video is deeper (see the hero veil), not from a halo of its own */
.hero-mark{position:relative;display:inline-block;margin-bottom:clamp(22px,3.6vw,56px)} /* the logo stays up in the dark part of the video */
.hero-logo{display:block;height:clamp(150px,14vw,200px);width:auto;filter:drop-shadow(0 6px 24px rgba(26,10,2,.3))}
@media (min-width:761px){
  .header.has-cta .logo,.header.has-cta .when{transition:opacity .5s ease,transform .5s var(--ease)}
  .header.has-cta:not(.past-hero){background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .header.has-cta:not(.past-hero) .logo,.header.has-cta:not(.past-hero) .when{opacity:0;transform:translateY(-8px);pointer-events:none}
  .header.has-cta.past-hero{padding-block:12px;background:rgba(250,240,228,.88);-webkit-backdrop-filter:blur(11.2px);backdrop-filter:blur(11.2px);box-shadow:0 1px 0 rgba(242,96,24,.14)}
  .header.has-cta.past-hero .logo img{height:84px}
  .header.has-cta.past-hero .logo img.light{display:none}
  .header.has-cta.past-hero .logo img.dark{display:block}
}

/* "pas cu pas" (desktop): the section holds still, centred, while the fill runs to the gala (JS adds .pinned + scroll room) */
.section.secret.pinned{overflow:clip}
.section.secret.pinned>.wrap{position:sticky;top:var(--pin-top,15vh)}
/* timeline spark: a bright point at the head of the orange fill, a faint twinkle, a few embers shed as it travels */
.journey .spark{position:absolute;top:27.5px;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;z-index:1;pointer-events:none;
  background:#FFF4EA;box-shadow:0 0 0 2px rgba(255,180,130,.6),0 0 12px 4px rgba(242,96,24,.85),0 0 34px 10px rgba(242,96,24,.35);
  opacity:0;transform:scale(.4);transition:opacity .35s ease,transform .35s var(--ease)}
.journey .spark.on{opacity:1;transform:none}
.journey .spark.on.rest{transform:scale(.72)} /* paused: a touch smaller, still alive */
.journey .spark::before,.journey .spark::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:1px;margin:-.5px 0 0 -15px;
  background:linear-gradient(90deg,rgba(255,244,234,0),#FFF4EA 50%,rgba(255,244,234,0));animation:twinkle 1.1s ease-in-out infinite}
.journey .spark::after{transform:rotate(90deg);animation-delay:-.55s}
@keyframes twinkle{0%,100%{opacity:.25;scale:.6}50%{opacity:1;scale:1}}
.journey .ember{position:absolute;top:27.5px;width:3.5px;height:3.5px;margin:-1.75px 0 0 -1.75px;border-radius:50%;z-index:1;pointer-events:none;
  background:var(--orange);box-shadow:0 0 6px 1px rgba(242,96,24,.7);animation:emberfly .75s cubic-bezier(.16,1,.3,1) forwards}
.journey .ember.cream{background:#FFF4EA;box-shadow:0 0 6px 1px rgba(255,200,160,.8)}
@keyframes emberfly{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
/* a marker zooms for a moment as the fill passes it */
.jstep.pop .dot{animation:steppop .65s cubic-bezier(.34,1.56,.64,1)}
@keyframes steppop{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.journey .spark,.journey .ember{display:none}.jstep.pop .dot{animation:none}}
.journey .ember.soft{width:2.5px;height:2.5px;margin:-1.25px 0 0 -1.25px;animation-duration:.9s}
/* layering on the timeline: line < spark & embers < markers */
.journey::after{z-index:0}
.jstep .dot{z-index:2}
/* passed steps unlock: the padlock's shackle springs up and tilts open (it closes again if the fill goes back) */
.jstep:not(.now):not(.gala) .dot svg path{transform-box:fill-box;transform-origin:0% 100%;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.jstep.reached:not(.now):not(.gala) .dot svg path{transform:rotate(-30deg)} /* pivots on its left leg, which stays in the lock */
.jstep .dot svg{overflow:visible} /* let the open shackle draw outside the icon box instead of being cropped */
/* after the timeline reaches the gala, the sign-up button nudges: two soft pulses, a slight wiggle, a warm glow */
.secret .cta.nudge{animation:ctanudge 1.7s cubic-bezier(.34,1.56,.64,1)}
.secret .cta.nudge .btn::after{animation:ctaglow 1.7s ease-out}
@keyframes ctanudge{0%{transform:none}12%{transform:scale(1.07) rotate(-1.4deg)}24%{transform:scale(1.07) rotate(1.4deg)}36%{transform:scale(1.04) rotate(-.6deg)}50%{transform:none}66%{transform:scale(1.05)}82%,100%{transform:none}}
@keyframes ctaglow{0%{opacity:0;transform:scale(.9)}20%{opacity:1;transform:scale(1.12)}55%{opacity:.6;transform:scale(1.04)}70%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.secret .cta.nudge,.secret .cta.nudge .btn::after{animation:none}}
/* ---------- phones & tablets (touch): lighter rendering. iPhone Safari can paint the page black when heavy effects stack
   on a playing video (colour blend + mask + big blur filters), so touch devices get equivalent, cheaper versions ---------- */
@media (hover:none),(max-width:760px){
  /* soft glows: gradients instead of a large blur filter */
  .hero::before,.hero::after,.final::before,.secret::before,.story::before{filter:none;background:radial-gradient(closest-side,rgba(242,96,24,.16),rgba(242,96,24,0))!important}
  /* video colouring: a filter on the video itself instead of a colour-blend layer over it */
  .video-frame .tint{display:none}
  .video-frame video{filter:sepia(.55) saturate(1.5) hue-rotate(-10deg) brightness(.96)}
  /* no mask on the hero frame: the cream fade in the veil already dissolves it */
  .hero .hero-video{-webkit-mask-image:none;mask-image:none}
  .hero .label.pill{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.8)}
  .hero .hero-video video{will-change:auto}
}
/* phones: the white logo opens the hero (as on desktop), larger, on a deeper top fade */
@media (max-width:760px){
  .hero .intro{margin-top:-82vw}
  .hero-logo{height:118px}
  .hero-mark{margin-bottom:10px}
  .hero .hero-video .veil{background:
    linear-gradient(180deg,rgba(250,240,228,0) 0%,rgba(250,240,228,0) 40%,rgba(250,240,228,.12) 46%,rgba(250,240,228,.34) 53%,rgba(250,240,228,.6) 60%,rgba(250,240,228,.82) 67%,rgba(250,240,228,.95) 73%,var(--cream) 79%), /* the fade completes higher, so hard edges in the footage (screens, tables) never show as a line behind the title */
    linear-gradient(180deg,rgba(26,10,2,.62) 0%,rgba(26,10,2,.5) 18%,rgba(26,10,2,.42) 32%,rgba(26,10,2,.32) 44%,rgba(26,10,2,.18) 56%,rgba(26,10,2,.07) 68%,rgba(26,10,2,0) 80%),
    linear-gradient(120deg,rgba(242,96,24,.22),transparent 55%)}
}
/* hero (all sizes): one title size + body; calmer capitals, intro at body size on a wider measure, note joined to it */
.hero .label.pill{letter-spacing:.2em;font-weight:600}
.hero .date{letter-spacing:.12em;font-weight:600}
.countdown .unit{letter-spacing:.1em;font-weight:600}
.hero .lead{font-size:var(--fs-body);line-height:1.65;max-width:58ch}
.hero .intro>p.narrow:not(.lead){max-width:58ch}
@media (min-width:761px){.spotlight{max-width:600px}.spotlight p{max-width:52ch}} /* matches the wider intro column */
/* phones: the story copy reads centred; the drop cap becomes an inline orange serif initial */
@media (max-width:760px){
  .story .text{text-align:center}
  .story .text .open::first-letter{float:none;font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;margin:0;color:var(--orange)}
}

/* failsafe: if a script fails (or never finishes) on some phone, show everything plainly instead of leaving it hidden */
html.safe .reveal,html.safe .reveal.hold,html.safe .poem,html.safe .pull,html.safe .story .text *,html.safe .evening .row.reveal .num,html.safe .evening .row.reveal p{opacity:1!important;transform:none!important;filter:none!important;visibility:visible!important}
html.safe body,html.safe.typing-lock body{overflow:visible!important}

/* diagnostic lite mode (?lite=1): no video, no textures, no motion */
html.lite video,html.lite .pattern,html.lite .grain{display:none!important}
html.lite *,html.lite *::before,html.lite *::after{animation:none!important;transition:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important}
html.lite .reveal,html.lite .reveal.hold{opacity:1!important;transform:none!important}

/* the opening sentence of the story carries the accent colour */
.story .text .open .lede{color:var(--orange)}

/* story: a fine-line icon for each phrase, drawn above the label once the section holds (space is reserved, so nothing shifts) */
.poem-icons{position:relative;display:block;margin:0 auto clamp(16px,1.8vw,26px);width:clamp(78px,7vw,108px);aspect-ratio:1;pointer-events:none;opacity:0;transition:opacity .7s var(--ease)}
.poem-stick.icons:not(.done) .poem-icons{opacity:1;transition-delay:.1s}
.poem-icons .pi{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--orange);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;scale:.92;transition:opacity .45s ease,scale .6s var(--ease)}
.poem-icons .pi *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s ease}
.poem-stick.icons .poem-icons .pi.on{opacity:1;scale:1;transition:opacity .35s ease .05s,scale .8s var(--ease) .05s}
.poem-stick.icons .poem-icons .pi.on *{stroke-dashoffset:0;transition:stroke-dashoffset .75s cubic-bezier(.65,0,.35,1) .1s}
.poem-stick.icons .poem-icons .pi.on *+*{transition-delay:.25s}
@media (prefers-reduced-motion:reduce){.poem-icons .pi *{stroke-dashoffset:0!important}}

/* story pacing: a brief rest while a phrase and its icon finish forming */
html.story-brake{scrollbar-gutter:stable}
html.story-brake body{overflow:hidden}

/* thank-you page: the dark logo opens the page (no header bar); date + place sit under the intro */
.thanks{padding-top:clamp(48px,6vw,88px)}
.thanks-logo{display:block;margin-bottom:clamp(8px,1.2vw,16px);animation:pop 1s var(--ease) both}
.thanks-logo img{display:block;height:clamp(120px,11vw,160px);width:auto}
.thanks .date{display:inline-flex;align-items:center;gap:.9em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.thanks .date i{width:5px;height:5px;border-radius:50%;background:var(--orange);flex:none}
.thanks .label.pill{border:1.5px solid rgba(242,96,24,.45);border-radius:999px;padding:.55em 1.3em;background:rgba(255,255,255,.55);gap:9.6px;letter-spacing:.2em;font-weight:600}
.thanks .label.pill::before,.thanks .label.pill::after{width:14.4px}
.thanks .next{margin-top:clamp(36px,4.4vw,56px)}

/* dress popup performance: strips skip the gown's drop-shadow (drawn once on the flat card instead); phones skip the live blur */
.paper .seg .gown{filter:none}
.paper .seg,.paper .flipwrap{will-change:transform}
.paper .flat,.paper .flat>.dress-card{height:100%;margin:0}
@media (max-width:760px){
  .pm-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(26,10,2,.82)}
}

/* the spark riding each stroke's tip: a short bright dash moving with the draw (same duration and curve), fading at the end */
.poem-icons .pi .spk{stroke:#FFF6EC;stroke-width:1.5;stroke-dasharray:.02 2;stroke-dashoffset:.02;opacity:0;transition:none}
.poem-stick.icons .poem-icons .pi.on .spk{animation:pispark .75s cubic-bezier(.65,0,.35,1) both,pisparkfade 1s ease-in-out both;transition:none}
@keyframes pispark{from{stroke-dashoffset:.02}to{stroke-dashoffset:-.98}}
@keyframes pisparkfade{0%{opacity:0}30%{opacity:.7}55%{opacity:.7}100%{opacity:0}} /* ignites softly, glows, then goes out just after the stroke completes */
@media (prefers-reduced-motion:reduce){.poem-icons .pi .spk{display:none}}

/* closing line: the pill opens and the sentence lands in one quick, fluid move while centred (nothing waits on anything) */
.poem.final .rot{transition:width .55s cubic-bezier(.22,1,.36,1)}
.poem.final .line{transition:font-size .55s cubic-bezier(.22,1,.36,1),padding 1s cubic-bezier(.65,0,.35,1)}
.poem.final .ph.on{transition-delay:.1s;transition-duration:.5s,.6s,.5s}

/* the icon's space above "Povestea" only matters once the section holds; before that the title sits close under the strip */
.poem-pin{margin-top:calc(-1 * (clamp(78px,7vw,108px) + clamp(16px,1.8vw,26px)) - 30px)}

/* phones: the hero frame itself dissolves into the page (as on desktop) instead of painting cream over the video —
   no seam where the frame ends, nothing of the video or grain can peek out, and the glow behind stays continuous */
@media (max-width:760px){
  .hero .hero-video{background:transparent;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.72) 56%,rgba(0,0,0,.38) 65%,rgba(0,0,0,.12) 73%,transparent 80%);mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.72) 56%,rgba(0,0,0,.38) 65%,rgba(0,0,0,.12) 73%,transparent 80%)}
  .hero .hero-video .veil{background:
    linear-gradient(180deg,rgba(250,240,228,0) 0%,rgba(250,240,228,0) 38%,rgba(250,240,228,.25) 50%,rgba(250,240,228,.5) 62%,rgba(250,240,228,.7) 75%),
    linear-gradient(180deg,rgba(26,10,2,.62) 0%,rgba(26,10,2,.5) 18%,rgba(26,10,2,.42) 32%,rgba(26,10,2,.32) 44%,rgba(26,10,2,.18) 56%,rgba(26,10,2,.07) 68%,rgba(26,10,2,0) 80%),
    linear-gradient(120deg,rgba(242,96,24,.22),transparent 55%)}
}

/* the gala marker: WINgs. When reached, the wings give one graceful beat (up, a softer second lift, settle)
   (the left wing is a mirrored copy, so one animation drives both; the box is centred on the wings' own bounds) */
.jstep.gala .dot svg.wings{width:36px;height:36px;overflow:visible}
.jstep.gala .wings .w{transform-box:view-box;transform-origin:12.9px 13.2px}
.jstep.gala.reached .dot svg.wings{animation:none}
.jstep.gala.reached .wings .w{animation:flap 1.7s cubic-bezier(.45,0,.3,1) .4s both}
@keyframes flap{0%{rotate:0deg}22%{rotate:-26deg}42%{rotate:5deg}62%{rotate:-11deg}80%{rotate:2deg}100%{rotate:0deg}}
@media (prefers-reduced-motion:reduce){.jstep.gala.reached .wings .w{animation:none}}

/* desktop: tighter still between sections */
@media (min-width:761px){.section:not(.hero):not(.band-video){padding-block:clamp(50px,4.8vw,68px)}} /* the hero and the video band stay flush */


/* =========================================================
   Gala WINgs 2026 — ticket landing (v300): the same system, extended.
   Hero (taller video, embers), story pacing, evening moments, dress row with gown,
   fading video band, sticky trophy awards, cheerful gallery + carousel, cropped reels,
   ticket tiers, partner gains / levels / ladder / call, sticky FAQ venue, grand finale,
   form choices, thank-you pages.
   ========================================================= */
.dbr{display:inline}
@media (max-width:760px){.dbr{display:none}}
.section .cta{display:flex;justify-content:center;margin-top:clamp(32px,4.8vw,51.2px)}
.small-note{font-weight:500;color:var(--ink);max-width:46ch;text-align:center;margin-inline:auto}
.on-dark .small-note{color:var(--cream)}
.intro-copy{max-width:62ch;margin:1.4em auto 0;line-height:1.7}
.closing-line{margin:clamp(32px,4vw,48px) auto 0;max-width:36ch;text-align:center;font-family:var(--font-display);font-size:var(--fs-lead);font-weight:600;line-height:1.4}
.closing-line em{display:block;font-style:italic;font-weight:500;color:var(--orange)}
.on-dark .closing-line{color:var(--cream)}
/* a title that must sit on one line: it scales with the viewport (never past the title size) and may use the full page width */
.one-row{white-space:nowrap;font-size:min(var(--fs-display),calc(var(--fit,4) * 1vw));width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);padding-inline:var(--gutter)}
@media (max-width:760px){.one-row{white-space:normal;font-size:var(--fs-display);width:auto;margin-left:0;padding-inline:0}}
/* fine-line icons drawn in once their card is revealed */
.mi svg,.gi svg,.ri svg,.t-icon svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.mi svg *,.gi svg *,.ri svg *,.t-icon svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1) calc(var(--k,0) * .1s + .35s)}
.in .mi svg *,.in .gi svg *,.in .ri svg *,.in .t-icon svg *,.in.moment .mi svg *{stroke-dashoffset:0}
html.safe .mi svg *,html.safe .gi svg *,html.safe .ri svg *,html.safe .t-icon svg *{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.mi svg *,.gi svg *,.ri svg *,.t-icon svg *{stroke-dashoffset:0}}
.orn{display:flex;align-items:center;justify-content:center;gap:14px;margin:2em auto}
.orn::before,.orn::after{content:"";width:56px;height:1px;background:linear-gradient(90deg,rgba(242,96,24,0),rgba(242,96,24,.6))}
.orn::after{transform:scaleX(-1)}
.orn i{width:6px;height:6px;background:var(--orange);transform:rotate(45deg);border-radius:1px}

/* ---------- embers: small warm lights drifting upwards ---------- */
.motes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.motes i{position:absolute;bottom:-12px;border-radius:50%;background:#FFC9A0;box-shadow:0 0 10px 2px rgba(242,96,24,.55);opacity:0;animation:moterise 13s linear infinite}
@keyframes moterise{0%{transform:translate(0,0);opacity:0}12%{opacity:.85}80%{opacity:.55}100%{transform:translate(var(--dx,0),-95vh);opacity:0}}
@media (prefers-reduced-motion:reduce){.motes{display:none}}
html.lite .motes{display:none}

/* ---------- 1 · Hero: a taller video, more air between the lines, gentle life ---------- */
.hero.tall{--vh-h:clamp(620px,100vh,1000px)}
.hero.tall .hero-video{aspect-ratio:auto;height:var(--vh-h);max-height:none;min-height:0}
.hero.tall .hero-video video{animation:kenburns 24s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes kenburns{from{scale:1}to{scale:1.09}}
@media (prefers-reduced-motion:reduce){.hero.tall .hero-video video{animation:none}}
.hero.tall .intro{margin-top:calc(var(--vh-h) * -.76);gap:26px}
.hero.tall .hero-mark{margin-bottom:clamp(40px,8vh,96px)}
.hero.tall .hero-logo{animation:logofloat 7s ease-in-out infinite}
@keyframes logofloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
.hero.tall .motes{z-index:1}
.hero .date.place{flex-wrap:wrap;justify-content:center;row-gap:.35em}
.hero .hero-sub{font-size:var(--fs-lead);line-height:1.45;max-width:44ch;font-family:var(--font-display);font-style:italic;font-weight:500}
.hero .hero-text{max-width:64ch;line-height:1.75}
.hero .hero-text strong{color:var(--orange-deep)}
.hero .cta-stack{margin-top:8px}
.hero .countdown{margin-top:clamp(10px,2vw,22px)}
/* the date line is underscored by a hairline that draws itself */
.hero .date.place{position:relative;padding-bottom:14px}
.hero .date.place::after{content:"";position:absolute;left:50%;bottom:0;width:120px;height:1px;margin-left:-60px;background:linear-gradient(90deg,rgba(242,96,24,0),var(--orange),rgba(242,96,24,0));transform:scaleX(0);transition:transform 1.4s var(--ease) .6s}
.hero .date.place.in::after{transform:none}
@media (max-width:760px){
  .hero.tall .hero-video{height:auto;aspect-ratio:4/5}
  .hero.tall .intro{margin-top:-104vw;gap:22px}
  .hero.tall .hero-mark{margin-bottom:26px}
  .hero .hero-sub{max-width:28ch}
  .hero .date.place{flex-direction:column;gap:.15em;line-height:1.5}
  .hero .date.place i{display:none}
}

/* ---------- 2 · Story: warmer ground, a breathing glow behind the pill, quicker pacing (main.js) ---------- */
.story{background:radial-gradient(ellipse 80% 55% at 50% 30%,#FCE4CF 0%,rgba(250,240,228,0) 70%),var(--cream)}
.story>.pattern{opacity:.14}
.poem-stick .story-glow{position:absolute;left:50%;top:55%;width:min(900px,90vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,96,24,.2),rgba(247,180,140,.12) 45%,rgba(242,96,24,0));animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{scale:.92;opacity:.75}50%{scale:1.06;opacity:1}}
.poem-stick{isolation:isolate}
.story .story-cta{margin-top:clamp(28px,3.6vw,44px)}
/* 3 · the copy no longer types: each paragraph is unveiled by a soft ink wipe, quickly, one after another */
html[data-typing="off"] .story .text .reveal{opacity:0;transform:translateY(10px);filter:blur(4px);
  -webkit-mask-image:linear-gradient(90deg,#000 46%,transparent 54%);mask-image:linear-gradient(90deg,#000 46%,transparent 54%);
  -webkit-mask-size:220% 100%;mask-size:220% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;
  transition:-webkit-mask-position .9s cubic-bezier(.65,0,.35,1),mask-position .9s cubic-bezier(.65,0,.35,1),opacity .45s ease,filter .9s ease,transform .9s var(--ease)}
html[data-typing="off"] .story .text .reveal.in{opacity:1;transform:none;filter:none;-webkit-mask-position:0 0;mask-position:0 0}
html[data-typing="off"] .story .text>:nth-child(2){transition-delay:.08s}
html[data-typing="off"] .story .text>:nth-child(3){transition-delay:.16s}
html.safe .story .text .reveal{-webkit-mask-image:none!important;mask-image:none!important}
@media (prefers-reduced-motion:reduce){html[data-typing="off"] .story .text .reveal{-webkit-mask-image:none;mask-image:none;opacity:1;filter:none;transform:none}}

/* ---------- 4 · The evening: centred title, moments as lit tiles ---------- */
.evening2{text-align:center}
.evening2 .lead{max-width:58ch;margin:1em auto 0;color:var(--cream);line-height:1.5}
.evening2 .lead strong{color:var(--orange);font-weight:500}
.evening2::before{content:"";position:absolute;width:60vw;height:60vw;max-width:820px;max-height:820px;left:50%;top:38%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,96,24,.16),rgba(242,96,24,0))}
.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,20px);margin-top:clamp(40px,5.4vw,68px);text-align:center}
.moment{position:relative;display:grid;justify-items:center;align-content:start;gap:10px;padding:clamp(26px,2.8vw,34px) clamp(18px,2vw,26px) clamp(24px,2.6vw,30px);border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(250,240,228,.075),rgba(250,240,228,.015) 60%);border:1px solid rgba(242,96,24,.22);overflow:hidden;isolation:isolate;
  transition:transform .7s var(--ease),border-color .6s ease,background .6s ease,box-shadow .7s var(--ease)}
.moment.reveal{transition:opacity 1s var(--ease) calc(var(--k) * 90ms),transform 1.1s var(--ease) calc(var(--k) * 90ms),border-color .6s ease,background .6s ease,box-shadow .7s var(--ease)}
.moment::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(112deg,transparent 40%,rgba(255,190,140,.06) 45%,rgba(255,224,200,.2) 50%,rgba(255,190,140,.06) 55%,transparent 60%);background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;transition:background-position 1.4s cubic-bezier(.45,0,.25,1)}
.moment:hover{transform:translateY(-6px);border-color:rgba(242,96,24,.6);background:linear-gradient(160deg,rgba(242,96,24,.16),rgba(250,240,228,.02) 70%);box-shadow:0 30px 60px -36px rgba(242,96,24,.6)}
.moment:hover::after{background-position:0 0}
.moment .mi{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:var(--orange);margin-bottom:6px;
  background:radial-gradient(circle at 35% 30%,rgba(242,96,24,.22),rgba(242,96,24,.04) 70%);box-shadow:inset 0 0 0 1px rgba(242,96,24,.45)}
.moment .mi::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from var(--a),transparent 0 70%,rgba(255,180,120,.9) 85%,transparent 100%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));animation:spin 5s linear infinite;opacity:.8}
.moment .mi svg{width:28px;height:28px}
.moment .mn{position:absolute;top:12px;right:16px;font-family:var(--font-display);font-style:italic;font-size:var(--fs-lead);color:rgba(242,96,24,.55)}
.moment h3{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:600;line-height:1.3;color:var(--orange)}
.moment p{color:var(--cream);line-height:1.6;max-width:30ch}
/* the seventh moment — the gifts — closes the set as a wide orange plate */
.moment:nth-child(7){grid-column:1/-1;grid-template-columns:auto 1fr;justify-items:start;align-items:center;text-align:left;column-gap:22px;
  background:linear-gradient(120deg,rgba(242,96,24,.28),rgba(199,70,26,.12) 60%,rgba(250,240,228,.03));border-color:rgba(242,96,24,.5)}
.moment:nth-child(7) .mi{grid-row:span 2;margin:0}
.moment:nth-child(7) p{max-width:none}
@media (max-width:1000px){.moments{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.moments{grid-template-columns:1fr}.moment:nth-child(7){grid-template-columns:1fr;justify-items:center;text-align:center}.moment:nth-child(7) .mi{grid-row:auto}}

/* ---------- 5 · Surprises + dress code, the gown on the right ---------- */
.dress-row{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,5vw,72px);align-items:center;margin-top:clamp(56px,7vw,96px);text-align:left}
.dress-copy .more{margin:0;font-family:var(--font-display);font-style:italic;font-size:var(--fs-lead);color:var(--orange);font-weight:500;max-width:30ch;line-height:1.45}
.dress-line{display:inline-flex;align-items:center;gap:16px;margin-top:clamp(24px,3vw,34px);padding:12px 24px 12px 12px;border:1px solid var(--line-dark);border-radius:999px;
  background:linear-gradient(120deg,rgba(242,96,24,.14),rgba(242,96,24,0) 75%)}
.dress-line .dl-label{padding:.55em 1.1em;border-radius:999px;background:var(--orange);color:var(--cream);font-weight:700;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.dress-line p{color:var(--cream)}
.dress-line em{font-style:normal;color:var(--orange);font-weight:700}
.dress-copy .cta{justify-content:flex-start;margin-top:clamp(26px,3.4vw,38px)}
.gown-stage{position:relative;justify-self:center;width:clamp(170px,19vw,250px)}
.gown-stage svg{width:100%;height:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));animation:gownsway 7s ease-in-out infinite;transform-origin:50% 12%}
@keyframes gownsway{0%,100%{rotate:-1.6deg;translate:0 0}50%{rotate:1.6deg;translate:0 -6px}}
.gown-stage .tail{transform-box:fill-box;transform-origin:50% 0;animation:ribbon 3.4s ease-in-out infinite}
@keyframes ribbon{0%,100%{rotate:-6deg}50%{rotate:7deg}}
.gown-stage .sparkle{position:absolute;width:14px;height:14px;background:#FFD2B0;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:twinkle2 2.6s ease-in-out infinite}
.gown-stage .s1{left:6%;top:18%}.gown-stage .s2{right:2%;top:40%;animation-delay:-.9s;scale:.7}.gown-stage .s3{left:16%;bottom:16%;animation-delay:-1.7s;scale:.85}
@keyframes twinkle2{0%,100%{opacity:.15;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.gown-stage svg,.gown-stage .tail,.gown-stage .sparkle{animation:none}}
@media (max-width:760px){
  .dress-row{grid-template-columns:1fr;text-align:center;justify-items:center}
  .dress-copy .more{margin-inline:auto}
  .dress-line{flex-direction:column;border-radius:var(--radius);padding:14px 20px 16px}
  .dress-copy .cta{justify-content:center}
  .gown-stage{grid-row:1;width:150px}
}

/* ---------- 6 · Video band: dissolves into the dark above and the cream below ---------- */
.band-video.fade{background:linear-gradient(180deg,var(--ink) 0 50%,var(--cream-2) 50% 100%)}
.band-video.fade .video-frame{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 60%,rgba(0,0,0,.55) 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 60%,rgba(0,0,0,.55) 78%,transparent 100%);background:transparent}
.band-video.fade .veil{background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(26,10,2,.5),rgba(26,10,2,.12) 70%,rgba(26,10,2,0))}
.band-video.fade .caption{bottom:52%}

/* ---------- 7 · Awards: orange names, ink "Move", the trophy holds the centre while the list scrolls ---------- */
.section.awards{overflow:clip}
.awards .intro-copy{max-width:60ch}
.awards-grid{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(28px,5vw,72px);align-items:start;margin-top:clamp(36px,5vw,64px)}
.trophy-col{align-self:stretch}
.awards .trophy{position:sticky;top:calc(50vh - 200px);aspect-ratio:3/4;display:grid;place-items:center}
.awards .trophy img{object-fit:contain;padding:22% 6% 12%;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.awards .trophy img{animation:none}}
.award-table{position:relative;z-index:0;border-top:1px solid var(--line)}
.arow{display:grid;grid-template-columns:52px 1fr auto;gap:clamp(12px,2vw,28px);align-items:baseline;padding:16px 0;position:relative;
  background:linear-gradient(var(--line),var(--line)) no-repeat left bottom/100% 1px}
.arow.ahead{padding:10px 0;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-deep)}
.arow .num{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--orange)}
.arow .name{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;line-height:1.25;color:var(--orange)}
.arow .name em{color:var(--ink);font-style:normal}
.arow .cat{font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:right}
.arow:not(.ahead)::before{content:"";position:absolute;left:-12px;right:-12px;top:0;bottom:0;border-radius:12px;z-index:-1;background-color:rgba(242,96,24,0);
  background-image:linear-gradient(112deg,transparent 40%,rgba(255,255,255,0) 45%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 55%,transparent 60%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;transition:background-color .5s}
.arow:not(.ahead):hover::before{background-color:rgba(242,96,24,.08);background-position:0 0;transition:background-color .5s,background-position 1.4s cubic-bezier(.45,0,.25,1)}
.arow:not(.ahead) .name{transition:letter-spacing .6s var(--ease)}
.arow:not(.ahead):hover .name{letter-spacing:.01em}
.arow.reveal{opacity:1;transform:none;background-size:0% 1px;transition:background-size 1.6s cubic-bezier(.65,0,.35,1) var(--d,0s)}
.arow.reveal.in{background-size:100% 1px}
.arow.reveal>*{opacity:0;transform:translateY(14px);filter:blur(6px);transition:opacity 1.2s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + .2s),transform 1.4s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + .2s),filter 1.2s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + .2s)}
.arow.reveal.in>*{opacity:1;transform:none;filter:none}
.awards .stage-note{margin-top:clamp(28px,3.6vw,40px);text-align:center;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep)}
.awards .closing-line{margin-top:14px;max-width:40ch}
@media (max-width:860px){
  .awards-grid{grid-template-columns:1fr;justify-items:center}
  .awards .trophy{position:relative;top:auto;width:min(240px,70vw)}
  .award-table{width:100%}
}
@media (max-width:760px){
  .arow.ahead{display:none}
  .arow{grid-template-columns:1fr;justify-items:center;text-align:center;gap:2px;padding:14px 0}
  .arow .cat{text-align:center;letter-spacing:.1em}
  .award-table{border-top:0}
}

/* ---------- 8 · Gallery: a warmer, livelier section; badges for the figures; a drifting outlined filmstrip ---------- */
.gallery{background:radial-gradient(ellipse 55% 45% at 12% 18%,rgba(247,180,140,.38),rgba(247,180,140,0) 70%),radial-gradient(ellipse 50% 45% at 90% 62%,rgba(242,96,24,.16),rgba(242,96,24,0) 70%),var(--cream)}
.twinkles{position:absolute;inset:0;pointer-events:none;z-index:0}
.twinkles i{position:absolute;width:16px;height:16px;background:var(--orange);opacity:.5;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:twinkle2 3.2s ease-in-out infinite}
.gallery-copy{max-width:64ch;margin:1.6em auto 0;text-align:center;line-height:1.8}
.gallery-copy .orn{margin:1.8em auto}
.stats{display:flex;justify-content:center;gap:clamp(18px,4vw,56px);margin:clamp(44px,5.6vw,72px) auto 0;flex-wrap:wrap}
.stat{position:relative;width:clamp(170px,17vw,210px);aspect-ratio:1;border-radius:50%;display:grid;align-content:center;justify-items:center;gap:2px;text-align:center;
  background:radial-gradient(circle at 35% 28%,#FFFFFF,#FCF2E8 55%,#F6E2D0);box-shadow:inset 0 1px 0 #fff,0 26px 50px -30px rgba(199,70,26,.55)}
.stat .ring{position:absolute;inset:-10px;border-radius:50%;border:1.5px dashed rgba(242,96,24,.55);animation:ringspin 26s linear infinite}
.stat:nth-child(2) .ring{animation-direction:reverse}
@keyframes ringspin{to{rotate:360deg}}
.stat.reveal{transform:scale(.7);transition:opacity .8s ease,transform 1.1s cubic-bezier(.34,1.56,.64,1)}
.stat.reveal.in{transform:none}
.stat.d1{transition-delay:.12s}.stat.d2{transition-delay:.24s}
.stat:hover{animation:statbob .9s cubic-bezier(.34,1.56,.64,1)}
@keyframes statbob{0%{scale:1}40%{scale:1.06}100%{scale:1}}
.stat .pre,.stat .u{font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.stat .pre{color:var(--orange-deep)}
.stat .n{font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;line-height:1;color:var(--orange);font-variant-numeric:lining-nums}
.stat .n b{font-weight:inherit}
.stat .n i{font-style:italic;font-weight:500}
.stat .u{max-width:12ch}
.carousel{position:relative;z-index:1;margin-top:clamp(48px,6vw,80px);overflow:hidden;padding-block:30px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ctrack{display:flex;gap:clamp(18px,2.4vw,32px);width:max-content;animation:driftright 70s linear infinite}
.carousel:hover .ctrack{animation-play-state:paused}
@keyframes driftright{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.frame{flex:none;width:clamp(230px,25vw,340px);padding:10px;border-radius:20px;background:#fff;outline:1.5px solid rgba(242,96,24,.55);outline-offset:6px;
  box-shadow:0 24px 44px -26px rgba(120,40,8,.5);rotate:-2deg;transition:rotate .7s var(--ease),scale .7s var(--ease),outline-color .5s,outline-offset .5s;cursor:pointer}
.frame:nth-child(even){rotate:2deg;translate:0 14px}
.frame img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
.frame:hover{rotate:0deg;scale:1.06;outline-color:var(--orange);outline-offset:3px;z-index:2}
@media (prefers-reduced-motion:reduce){.ctrack{animation:none}.stat .ring,.twinkles i{animation:none}}

/* ---------- 9 · Reels: the embed is cropped to the video; our own orange link below ---------- */
.testimonials .lead{color:var(--cream);max-width:40ch;margin:1em auto 0}
.testimonials::before{content:"";position:absolute;width:56vw;height:56vw;max-width:720px;max-height:720px;left:50%;top:60%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(242,96,24,.16),rgba(242,96,24,0));pointer-events:none}
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.2vw,26px);margin-top:clamp(36px,5vw,60px)}
.reel-card{display:grid;justify-items:center;gap:18px}
.reel{--ig-top:54px;position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:#000;
  box-shadow:0 0 0 1px rgba(242,96,24,.4),0 30px 70px -40px rgba(242,96,24,.6);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.reel:hover{transform:translateY(-4px);box-shadow:0 0 0 1.5px var(--orange),0 40px 80px -40px rgba(242,96,24,.8)}
.reel iframe{position:absolute;left:-1px;top:calc(-1 * var(--ig-top));width:calc(100% + 2px);height:calc(100% + var(--ig-top) + 320px);border:0;display:block}
.ig-link{display:inline-flex;align-items:center;gap:10px;padding:.8em 1.4em;border-radius:999px;border:1.5px solid rgba(242,96,24,.6);color:var(--orange);font-weight:700;letter-spacing:.04em;
  transition:background .4s,color .4s,border-color .4s,transform .5s var(--ease)}
.ig-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.ig-link:hover{background:var(--orange);color:var(--cream);border-color:var(--orange);transform:translateY(-2px)}
.ig-link:hover svg{transform:translateX(4px)}
@media (max-width:860px){.reels{grid-template-columns:1fr;max-width:400px;margin-inline:auto}}

/* ---------- shared: tilt + spotlight for the premium cards (main.js sets --rx/--ry/--mx/--my) ---------- */
[data-tilt]{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) scale(var(--sc,1));transition:transform .6s var(--ease),box-shadow .7s var(--ease)}
[data-tilt].tilting{transition:transform .12s linear,box-shadow .7s var(--ease)}
[data-tilt]:hover{--ty:-8px}
.spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.35),rgba(255,255,255,0) 45%)}
[data-tilt]:hover .spot{opacity:1}
.glints{position:absolute;inset:0;pointer-events:none;z-index:1}
.glints i{position:absolute;width:12px;height:12px;background:#FFE0B8;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:twinkle2 2.8s ease-in-out infinite}
.glints i:nth-child(1){left:10%;top:14%}.glints i:nth-child(2){right:12%;top:30%;animation-delay:-.8s}.glints i:nth-child(3){left:16%;top:52%;animation-delay:-1.6s;scale:.7}
.glints i:nth-child(4){right:8%;bottom:22%;animation-delay:-2.1s;scale:.8}.glints i:nth-child(5){left:46%;top:6%;animation-delay:-1.2s;scale:.6}

/* ---------- 10 · Tickets: three plates rising in value — cream, orange, and a black Ultra VIP with a living gold border ---------- */
.tickets{background:radial-gradient(ellipse 60% 40% at 50% 100%,rgba(242,96,24,.12),rgba(242,96,24,0) 70%),var(--cream)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(44px,5.8vw,76px);align-items:stretch}
.tier-wrap{display:flex}
.tier{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;border-radius:var(--radius);padding:clamp(34px,3.4vw,42px) clamp(20px,2.4vw,30px) clamp(26px,2.8vw,32px);
  background:linear-gradient(150deg,#FFFFFF 0%,#FCF8F3 48%,#F3E6D8 100%);border:1px solid rgba(242,96,24,.22);box-shadow:inset 0 1px 0 #fff,0 30px 60px -44px rgba(90,40,10,.45);isolation:isolate}
.tier>*{position:relative;z-index:1}
.tier>.pattern{position:absolute;z-index:0;opacity:.1;-webkit-mask-image:none;mask-image:none;border-radius:inherit}
.tier .t-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:var(--orange);background:radial-gradient(circle at 35% 30%,#fff,#FBEADB);box-shadow:inset 0 0 0 1px rgba(242,96,24,.4),0 12px 24px -14px rgba(199,70,26,.6)}
.tier .t-icon svg{width:26px;height:26px;stroke-width:1.5}
.tier h3{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;line-height:1.2}
.tier .price{display:grid;justify-items:center;gap:2px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-deep);padding-bottom:16px;border-bottom:1px solid var(--line);width:100%}
.tier .price b{font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--orange);font-variant-numeric:lining-nums}
.tier .for{line-height:1.6;max-width:34ch}
.tier .plus{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--orange-deep)}
.ticks{list-style:none;display:grid;gap:10px;justify-items:center}
.ticks li{display:block;line-height:1.5;max-width:34ch}
.ticks li>svg{display:inline-block;vertical-align:-3px;width:18px;height:18px;margin-right:7px;fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;background:rgba(242,96,24,.12);border-radius:50%;padding:3px}
.ticks .bonus strong{color:var(--orange)}
.tier .btn{margin-top:auto;align-self:stretch;justify-content:center}
.tier .seats{position:absolute;top:-15px;left:50%;translate:-50% 0;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:.5em 1.05em;border-radius:999px;white-space:nowrap;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 12px 26px -10px rgba(26,10,2,.55)}
.tier .seats i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 1.6s infinite}
/* VIP: the orange plate */
.tier.vip{background:linear-gradient(150deg,#F7843F 0%,var(--orange) 42%,#D24C16 100%);border-color:transparent;color:var(--ink);box-shadow:0 40px 80px -42px rgba(199,70,26,.85)}
.tier.vip .seats{background:var(--ink);color:var(--orange)}
.tier.vip .t-icon{color:var(--cream);background:rgba(26,10,2,.18);box-shadow:inset 0 0 0 1px rgba(250,240,228,.5)}
.tier.vip .price{color:var(--ink);border-color:rgba(26,10,2,.18)}
.tier.vip .price b{color:var(--cream)}
.tier.vip .plus{color:var(--cream)}
.tier.vip .ticks li>svg{stroke:var(--ink);background:rgba(250,240,228,.5)}
.tier.vip .ticks .bonus strong{color:var(--cream)}
/* Ultra VIP: black plate, rotating gold-orange border, gilded price, glints — the most premium of the three */
.tier.ultra{background:radial-gradient(ellipse 90% 60% at 50% 0%,#4A2410 0%,#1E0C04 55%,#0A0400 100%);color:var(--cream);border-color:transparent;--sc:1.035;
  box-shadow:0 0 0 1px rgba(255,190,120,.18),0 50px 100px -40px rgba(242,96,24,.75),0 0 80px -20px rgba(242,96,24,.35)}
.tier.ultra:hover{--sc:1.05}
.tier.ultra::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--a),#F26018,#FFE2B0,#C7461A,#FFB46B,#8A3410,#FFE2B0,#F26018);
  -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:spin 6s linear infinite}
.tier.ultra .seats{background:linear-gradient(100deg,#FFD9A0,#F7B48C 40%,#F26018);color:var(--ink)}
.tier.ultra .t-icon{color:#FFD9A0;background:radial-gradient(circle at 35% 30%,rgba(255,217,160,.25),rgba(255,217,160,.03));box-shadow:inset 0 0 0 1px rgba(255,217,160,.55),0 0 30px -6px rgba(242,96,24,.7)}
.tier.ultra h3{color:#FFE7C7}
.tier.ultra .price{color:#F7B48C;border-color:rgba(255,190,120,.22)}
.tier.ultra .price b{background:linear-gradient(100deg,#FFE2B0 0%,#F7B48C 25%,#F26018 50%,#FFE2B0 75%,#F7B48C 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:goldsheen 5s ease-in-out infinite}
@keyframes goldsheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.tier.ultra .plus{color:#F7B48C}
.tier.ultra strong{color:#FFD9A0}
.tier.ultra .ticks li>svg{stroke:#FFD9A0;background:rgba(255,217,160,.14)}
.tier.ultra .spot{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,190,120,.22),rgba(255,190,120,0) 45%)}
@media (prefers-reduced-motion:reduce){.tier.ultra::after,.tier.ultra .price b{animation:none}}
@media (max-width:1000px){.tiers{grid-template-columns:1fr;max-width:520px;margin-inline:auto;gap:34px}.tier.ultra{--sc:1}}

/* ---------- 11 · Partners (orange): what the brand receives — icon medallions with numbers ---------- */
.partners .partner-copy{max-width:62ch;margin:1.4em auto 0;line-height:1.75}
.partners .partner-copy p+p{margin-top:1.1em}
.partners .partner-copy .big{margin-top:1.5em;padding-top:1.3em;border-top:1px solid rgba(26,10,2,.18);font-family:var(--font-display);font-size:var(--fs-lead);font-style:italic;font-weight:500;line-height:1.45;color:var(--cream)}
.sub-title{margin-top:clamp(48px,6vw,72px);font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;line-height:1.1}
.gains{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:clamp(28px,3.6vw,44px)}
.gain{position:relative;display:grid;justify-items:center;gap:8px;padding:clamp(30px,3vw,38px) clamp(18px,2.2vw,26px) clamp(26px,2.6vw,32px);border-radius:var(--radius);text-align:center;
  background:linear-gradient(150deg,#FFFAF4 0%,var(--cream) 45%,#F3E1CF 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 26px 50px -30px rgba(90,25,0,.55);overflow:hidden;isolation:isolate;
  transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.gain.reveal{transition:opacity 1s var(--ease) calc(var(--k) * 90ms),transform 1.1s var(--ease) calc(var(--k) * 90ms),box-shadow .7s var(--ease)}
.gain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(112deg,transparent 38%,rgba(190,110,50,.07) 44%,rgba(255,255,255,.95) 50%,rgba(190,110,50,.07) 56%,transparent 62%);background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;
  animation:shine 8s cubic-bezier(.45,0,.25,1) calc(var(--k) * .5s) infinite}
.gain:hover{transform:translateY(-8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 40px 70px -34px rgba(90,25,0,.7)}
.gain .gn{position:absolute;top:8px;right:16px;font-family:var(--font-display);font-style:italic;font-weight:700;font-size:var(--fs-display);line-height:1;color:rgba(242,96,24,.17);transition:color .6s,transform .8s var(--ease)}
.gain:hover .gn{color:rgba(242,96,24,.35);transform:translateY(-4px)}
.gain .gi{position:relative;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px;color:var(--cream);
  background:radial-gradient(circle at 32% 28%,#FF9F63,var(--orange) 52%,var(--orange-deep));box-shadow:0 16px 30px -14px rgba(199,70,26,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.gain .gi::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(242,96,24,.45);animation:halo 3.4s cubic-bezier(.16,1,.3,1) calc(var(--k) * .4s + 1s) infinite;opacity:0}
.gain .gi svg{width:30px;height:30px;stroke-width:1.5}
.gain:hover .gi{animation:medal .9s cubic-bezier(.34,1.56,.64,1)}
@keyframes medal{0%{rotate:0deg;scale:1}35%{rotate:-10deg;scale:1.12}70%{rotate:6deg;scale:1.05}100%{rotate:0deg;scale:1}}
.gain h4{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;line-height:1.2}
.gain p{line-height:1.6;max-width:28ch}
@media (max-width:1000px) and (min-width:761px){.gains{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.gains{grid-template-columns:1fr}}

/* ---------- 12 · Partner levels: each card wears its trophy's metal ---------- */
.partner-levels .journey{margin-top:clamp(40px,5.4vw,68px)}
.partner-levels .jstep p{max-width:28ch}
.levels-head{margin-top:clamp(72px,9vw,120px)}
.levels{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px);margin-top:clamp(40px,5.4vw,64px)}
.level-wrap{display:flex}
.level{--t1:#C9CED6;--t2:#7E8794;--t3:#F2F4F7;--glow:rgba(126,135,148,.55);
  position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;border-radius:calc(var(--radius) * 1.2);padding:22px clamp(18px,2.4vw,32px) clamp(28px,3vw,36px);
  background:linear-gradient(160deg,#FFFFFF 0%,var(--t3) 55%,#EFE7DE 100%);box-shadow:0 34px 70px -44px var(--glow);isolation:isolate}
.level.gold{--t1:#E8BC52;--t2:#A6761A;--t3:#FFF6DF;--glow:rgba(201,148,40,.65)}
.level.platinum{--t1:#EDEFF2;--t2:#9AA0A8;--t3:#FBFCFD;--glow:rgba(160,166,175,.6)}
.level.diamond{--t1:#F26018;--t2:#FFB46B;--t3:#2A1407;--glow:rgba(242,96,24,.8);background:radial-gradient(ellipse 90% 55% at 50% 0%,#4A2410,#1E0C04 60%,#0A0400);color:var(--cream)}
.level>*{position:relative;z-index:1}
.level::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--a),var(--t1),var(--t3),var(--t2),var(--t1),var(--t3),var(--t2),var(--t1));
  -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:spin 9s linear infinite}
.level.diamond::after{animation-duration:5s}
.level:hover{box-shadow:0 50px 90px -40px var(--glow)}
.lv-tag{display:inline-block;padding:.45em 1.1em;border-radius:999px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--t2);box-shadow:inset 0 0 0 1px var(--t1);background:rgba(255,255,255,.55)}
.level.diamond .lv-tag{color:var(--t2);background:rgba(242,96,24,.12)}
.level .arch{width:min(240px,62%);height:auto;aspect-ratio:397/421;margin:6px auto 4px;border-radius:999px 999px calc(var(--radius) * .6) calc(var(--radius) * .6);box-shadow:0 26px 44px -26px rgba(26,10,2,.75),0 0 0 1px var(--t1)}
.level .arch::after{border-color:var(--t1);opacity:.7}
.level .arch img{object-fit:cover;padding:0;animation:float 6s ease-in-out infinite}
.level-wrap:nth-child(2) .arch img{animation-delay:-1.5s}.level-wrap:nth-child(3) .arch img{animation-delay:-3s}.level-wrap:nth-child(4) .arch img{animation-delay:-4.5s}
.level h3{font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;line-height:1;margin-top:6px}
.level h3 span{font-size:var(--fs-lead);font-style:italic;font-weight:500;color:var(--t2)}
.level .price{font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t2);padding-bottom:14px;width:100%;border-bottom:1.5px solid var(--t1)}
.level .price b{font-family:var(--font-display);font-size:var(--fs-lead);letter-spacing:0;color:var(--ink);margin-right:.2em}
.level.diamond .price b,.level.diamond h3{color:var(--cream)}
.level .for{line-height:1.6;max-width:36ch}
.level .for strong{display:block;font-family:var(--font-display);font-size:var(--fs-lead);color:var(--orange);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.15em}
.level .plus{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--t2)}
.level .ticks li>svg{stroke:var(--t2);background:color-mix(in srgb,var(--t1) 28%,transparent)}
.level.diamond .ticks li>svg{stroke:var(--t2);background:rgba(242,96,24,.18)}
.level .spot{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.45),rgba(255,255,255,0) 45%)}
.level.diamond .spot{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,180,110,.2),rgba(255,180,110,0) 45%)}
@media (prefers-reduced-motion:reduce){.level::after,.level .arch img{animation:none}}
@media (max-width:860px){.levels{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ---------- 13 · Partner close (dark): build your experience + a rising ladder of early benefits ---------- */
.partner-close{text-align:center}
.partner-close::before{content:"";position:absolute;width:60vw;height:60vw;max-width:820px;max-height:820px;left:50%;top:62%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,96,24,.18),rgba(242,96,24,0))}
.partner-close .build{max-width:780px}
.partner-close .build .lead,.early-head .lead{margin:1em auto 0;max-width:54ch;color:var(--cream);line-height:1.5}
.partner-close .build .lead strong{color:var(--orange);font-weight:500}
.early-head{margin-top:clamp(80px,9vw,124px)}
.early-head .lead{font-family:var(--font-display);font-style:italic;color:var(--orange-soft)}
.ladder{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,16px);align-items:end;margin-top:clamp(44px,5.6vw,72px);position:relative}
.rung{position:relative;display:grid;justify-items:center;align-content:start;gap:10px;min-height:calc(200px + var(--k) * 38px);padding:26px 14px 24px;border-radius:22px 22px 6px 6px;
  background:linear-gradient(180deg,rgba(242,96,24,calc(.16 + var(--k) * .07)) 0%,rgba(242,96,24,.03) 100%);border-top:2px solid var(--orange);
  box-shadow:inset 0 1px 0 rgba(255,200,160,.2);transform-origin:50% 100%}
.rung.reveal{opacity:0;transform:scaleY(.4) translateY(20px);transition:opacity .7s ease calc(var(--k) * .14s),transform 1.1s cubic-bezier(.34,1.3,.64,1) calc(var(--k) * .14s)}
.rung.reveal.in{opacity:1;transform:none}
.rung .ri{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--orange);background:rgba(26,10,2,.55);box-shadow:inset 0 0 0 1px rgba(242,96,24,.55)}
.rung .ri svg{width:24px;height:24px}
.rung .rn{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:var(--fs-display);line-height:1;color:var(--orange)}
.rung p{font-weight:700;color:var(--cream);line-height:1.45;max-width:18ch}
.rung:last-child{background:linear-gradient(180deg,rgba(242,96,24,.55) 0%,rgba(242,96,24,.06) 100%);box-shadow:0 0 60px -20px rgba(242,96,24,.7)}
.rung:last-child .rn{color:var(--cream)}
.rung:hover .ri{background:var(--orange);color:var(--cream);transition:background .4s,color .4s}
.sold{margin-top:clamp(40px,5vw,60px);display:flex;justify-content:center}
.sold span{display:inline-block;padding:1em 2em;border-radius:999px;border:1px solid rgba(242,96,24,.55);font-family:var(--font-display);font-style:italic;font-size:var(--fs-lead);color:var(--cream);
  background:linear-gradient(120deg,rgba(242,96,24,.22),rgba(242,96,24,.04));box-shadow:0 0 50px -18px rgba(242,96,24,.7)}
@media (max-width:860px){
  .ladder{grid-template-columns:1fr;max-width:420px;margin-inline:auto;gap:12px}
  .rung{min-height:0;grid-template-columns:auto auto 1fr;align-items:center;text-align:left;justify-items:start;border-radius:18px;margin-left:calc(var(--k) * 10px);padding:16px 18px}
  .rung p{max-width:none}
  .rung.reveal{transform:translateX(-24px)}
}
@media (max-width:520px){.rung{margin-left:0}.sold span{border-radius:var(--radius);padding:1em 1.4em}}

/* ---------- 14 · The partnership call: four trophies fan out above the question ---------- */
#devino-partener.section{padding-block:clamp(80px,10vw,144px);text-align:center;color:var(--cream);
  background:radial-gradient(ellipse 70% 60% at 50% 18%,#5A2A10 0%,#2A1407 45%,var(--ink) 80%)}
#devino-partener .pattern{opacity:.07}
#devino-partener::after{content:"";position:absolute;left:50%;bottom:-30%;width:90vw;height:60vw;max-width:1200px;max-height:700px;translate:-50% 0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,96,24,.35),rgba(242,96,24,0))}
.pcta{position:relative;z-index:1;max-width:820px;margin-inline:auto}
.pcta .lead{color:var(--cream);max-width:48ch;margin:1.1em auto 0;line-height:1.55}
.pcta .lead strong{color:var(--orange);font-weight:500}
.pcta .cta-stack{display:grid;justify-items:center;gap:18px;margin-top:clamp(32px,4vw,48px)}
.pcta .btn.big{animation:btnshine 6s cubic-bezier(.45,0,.25,1) 1.8s infinite,ctaglow2 3.2s ease-in-out infinite}
@keyframes ctaglow2{0%,100%{box-shadow:0 14.4px 40px -8px rgba(242,96,24,.8),inset 0 1px 0 rgba(255,255,255,.22)}50%{box-shadow:0 18px 60px -6px rgba(242,96,24,1),0 0 0 6px rgba(242,96,24,.12),inset 0 1px 0 rgba(255,255,255,.22)}}
.fan{position:relative;height:clamp(150px,16vw,200px);margin-bottom:clamp(28px,3.6vw,44px)}
.ft{position:absolute;left:50%;top:0;width:clamp(86px,9vw,120px);aspect-ratio:397/521;margin-left:calc(clamp(86px,9vw,120px) / -2);border-radius:999px 999px 14px 14px;overflow:hidden;background:#1E0D06;
  box-shadow:0 24px 40px -20px rgba(0,0,0,.8),0 0 0 1px var(--c,rgba(242,96,24,.5));opacity:0;translate:0 30px;rotate:0deg;
  transition:translate 1.2s cubic-bezier(.34,1.3,.64,1),rotate 1.2s cubic-bezier(.34,1.3,.64,1),opacity .6s ease}
.ft img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;animation:float 5s ease-in-out infinite}
.ft.t1{--c:#C9CED6}.ft.t2{--c:#E8BC52}.ft.t3{--c:#EDEFF2}.ft.t4{--c:#F26018;scale:1.14;z-index:2;box-shadow:0 24px 50px -16px rgba(242,96,24,.7),0 0 0 1.5px #F26018}
.ft.t2 img{animation-delay:-1.2s}.ft.t3 img{animation-delay:-2.4s}.ft.t4 img{animation-delay:-3.6s}
.fan.in .ft{opacity:1}
.fan.in .t1{translate:-180% 34px;rotate:-14deg;transition-delay:.15s}
.fan.in .t2{translate:-62% 6px;rotate:-5deg;transition-delay:.05s}
.fan.in .t3{translate:62% 6px;rotate:5deg;transition-delay:.1s}
.fan.in .t4{translate:180% 34px;rotate:14deg;transition-delay:.2s}
html.safe .ft{opacity:1}
@media (max-width:520px){.fan.in .t1{translate:-150% 30px}.fan.in .t4{translate:150% 30px}}

/* ---------- 15 · FAQ: the venue holds the centre while the questions scroll ---------- */
.section.faq{overflow:clip}
.faq-grid{display:grid;grid-template-columns:minmax(220px,330px) 1fr;gap:clamp(32px,5.6vw,80px);align-items:start}
.venue-col{align-self:stretch}
.faq .venue{position:sticky;top:calc(50vh - 245px);aspect-ratio:700/1036}
.faq .venue::after{border-color:rgba(250,240,228,.5)}
.qa-list{margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 0;
  font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;line-height:1.3;transition:color .4s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--orange-deep)}
.qa summary i{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:linear-gradient(135deg,#fff,#FBF4EC);transition:background .5s,border-color .5s,transform .6s var(--ease)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;margin:-.8px 0 0 -6px;background:var(--orange);border-radius:2px;transition:transform .6s var(--ease),background .4s}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i{background:var(--orange);border-color:transparent;transform:rotate(180deg)}
.qa[open] summary i::before,.qa[open] summary i::after{background:var(--cream)}
.qa[open] summary i::after{transform:rotate(0deg)}
.qa .ans{overflow:hidden}
.qa .ans p{padding:0 52px 22px 0;line-height:1.75}
@media (max-width:860px){
  .faq-grid{grid-template-columns:1fr;text-align:center}
  .faq .venue{position:relative;top:auto;width:min(220px,60vw);margin-inline:auto}
  .qa summary{text-align:left}
  .qa .ans p{text-align:left;padding-right:0}
}

/* ---------- 16 · The finale: more air, a glowing trophy behind, embers, a bigger last line ---------- */
#final.section{padding-block:clamp(100px,12vw,180px)}
.final.grand{background:radial-gradient(ellipse 70% 50% at 50% 0%,#3A1B0B,var(--ink) 70%)}
.final-wings{position:absolute;left:50%;top:clamp(20px,3vw,50px);width:min(560px,80vw);translate:-50% 0;z-index:0;pointer-events:none;opacity:.42;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,transparent 100%)}
.final-wings img{width:100%;height:auto;animation:float 7s ease-in-out infinite}
.final .display{color:var(--cream);max-width:22ch;margin-inline:auto;line-height:1.1}
.final .final-copy{max-width:58ch;margin:clamp(36px,4.4vw,56px) auto 0;line-height:1.85;color:var(--cream)}
.final .final-copy p+p{margin-top:1.5em}
.final .final-copy strong{color:var(--orange)}
.final .final-copy .duo{font-family:var(--font-display);font-style:italic;font-size:var(--fs-lead);line-height:1.5;padding:1.1em 0;border-block:1px solid var(--line-dark)}
.final .final-copy .duo strong{display:block;font-style:normal;font-weight:700}
.final .orn{margin:clamp(36px,4.4vw,52px) auto}
.final .final-line{font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;line-height:1.15;color:var(--cream)}
.final .final-line em{display:block;font-style:italic;font-weight:500;color:var(--orange)}
.final .cta-stack{display:grid;justify-items:center;gap:22px;margin-top:clamp(36px,4.8vw,60px)}
.final .cta-stack .btn.big{animation:btnshine 6s cubic-bezier(.45,0,.25,1) 1.8s infinite,ctaglow2 3.2s ease-in-out infinite}
.final .date{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.4em .9em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cream)}
.final .date i{width:4.8px;height:4.8px;border-radius:50%;background:var(--orange);flex:none}
.footer{padding-block:44px calc(44px + env(safe-area-inset-bottom))}
@media (max-width:760px){.final .date{flex-direction:column;gap:.2em}.final .date i{display:none}}

/* failsafe additions */
html.safe .arow.reveal>*,html.safe .reveal.hold,html.safe .rung,html.safe .stat{opacity:1!important;transform:none!important;filter:none!important}
html.lite .arch::before,html.lite .ctrack{animation:none!important}

/* ---------- arches (from the deck): trophy, venue ---------- */
.arch{position:relative;overflow:hidden;isolation:isolate;border-radius:999px 999px var(--radius) var(--radius);background:#1E0D06;box-shadow:0 40px 80px -44px rgba(120,38,8,.6)}
.arch img{width:100%;height:100%;object-fit:cover;display:block}
.arch::after{content:"";position:absolute;inset:10px;border-radius:inherit;border:1px solid rgba(242,96,24,.45);pointer-events:none}
.arch::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(112deg,transparent 41%,rgba(255,220,190,.08) 46%,rgba(255,236,220,.28) 50%,rgba(255,220,190,.08) 54%,transparent 59%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;animation:shine 8s cubic-bezier(.45,0,.25,1) 1.5s infinite}
@media (prefers-reduced-motion:reduce){.arch::before{animation:none}}

/* ---------- form page: ticket / partner choice ---------- */
.choice{display:grid;gap:6px;border:0}
.choice legend{font-weight:700;letter-spacing:.02em;margin-bottom:4px}
.choice .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.choice label{position:relative;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .o{display:grid;justify-items:center;gap:1px;text-align:center;padding:.6em .4em;border-radius:12.8px;background:var(--cream);border:2px solid transparent;transition:border-color .3s,background .3s,box-shadow .3s,transform .4s var(--ease)}
.choice .o b{font-weight:700;line-height:1.2}
.choice .o small{font-size:inherit;color:var(--orange-deep);font-weight:500;white-space:nowrap}
.choice label:hover .o{transform:translateY(-1px)}
.choice input:checked+.o{border-color:var(--orange);background:var(--white);box-shadow:0 0 0 4px rgba(242,96,24,.15)}
.choice input:focus-visible+.o{outline:2px solid var(--orange-deep);outline-offset:2px}
.choice.invalid .o{border-color:rgba(199,70,26,.5)}
.choice .err{color:var(--orange-deep);font-weight:700;display:none}
.choice.invalid .err{display:block}
.field select,.field textarea{font:inherit;color:var(--ink);background:var(--cream);border:2px solid transparent;border-radius:12.8px;padding:.62em .95em;width:100%;outline:none;transition:border-color .3s,background .3s,box-shadow .3s}
.field select:focus,.field textarea:focus{border-color:var(--orange);background:var(--white);box-shadow:0 0 0 4px rgba(242,96,24,.15)}
.form-card .approval{text-align:center;font-weight:500}
.form-card .approval[hidden]{display:none}
[data-mode="partener"] .only-ticket,[data-mode="bilet"] .only-partner{display:none!important}
@media (max-width:420px){.choice .opts{grid-template-columns:1fr}.choice .o{grid-template-columns:auto auto;justify-content:center;gap:.5em}}

/* =========================================================
   Thank-you pages (v300): a cinematic dark opening over the video, then warm colour blocks
   ========================================================= */
.thanks.ty{display:block;min-height:0;padding:0;overflow:visible}
.ty-hero{position:relative;min-height:min(94vh,880px);display:grid;place-items:center;text-align:center;overflow:hidden;color:var(--cream);background:var(--ink);padding:clamp(70px,9vw,120px) 0 clamp(90px,10vw,140px)}
.ty-hero .video-frame{position:absolute;inset:0;border-radius:0!important;aspect-ratio:auto!important;box-shadow:none;z-index:0;background:var(--ink)}
.ty-hero .video-frame video{animation:kenburns 24s ease-in-out infinite alternate}
.ty-hero .video-frame .veil{background:linear-gradient(180deg,rgba(26,10,2,.62) 0%,rgba(26,10,2,.42) 45%,rgba(26,10,2,.88) 100%),radial-gradient(ellipse 60% 50% at 50% 55%,rgba(242,96,24,.28),rgba(242,96,24,0) 70%)}
.ty-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:1;background:linear-gradient(180deg,rgba(242,96,24,0),var(--orange));pointer-events:none}
.ty-hero.to-cream::after{background:linear-gradient(180deg,rgba(250,240,228,0),var(--cream))}
.ty-hero .wrap{position:relative;z-index:2;display:grid;justify-items:center;gap:22px}
.ty-logo{display:block;animation:pop 1s var(--ease) both}
.ty-logo img{height:clamp(110px,10vw,150px);width:auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.4))}
.ty-hero .label.pill{border:1.5px solid rgba(250,240,228,.5);border-radius:999px;padding:.6em 1.3em;background:rgba(26,10,2,.35);color:var(--cream);letter-spacing:.18em;font-weight:600;gap:9.6px;text-align:center}
.ty-hero .label.pill::before,.ty-hero .label.pill::after{width:14.4px}
.ty-hero .display{color:var(--cream);max-width:20ch}
.ty-hero .display em{color:var(--orange)}
.ty-hero .lead{max-width:36ch;line-height:1.45;color:var(--cream)}
@media (max-width:760px){.ty-hero .label.pill{letter-spacing:.1em;padding:.55em 1.1em}}
/* the letter, on orange: warm paper with a wax seal */
.ty-letter{text-align:center}
.letter{position:relative;max-width:660px;margin:30px auto 0;padding:clamp(52px,5.6vw,68px) clamp(22px,4.6vw,60px) clamp(32px,4vw,44px);text-align:center;
  background:linear-gradient(160deg,#FFFDF9 0%,#FCF4EA 55%,#F4E5D4 100%);border-radius:var(--radius);color:var(--ink);
  box-shadow:inset 0 1px 0 #fff,0 50px 90px -40px rgba(90,25,0,.75);rotate:-.6deg}
.letter::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(112deg,transparent 38%,rgba(190,110,50,.07) 44%,rgba(255,255,255,.95) 50%,rgba(190,110,50,.07) 56%,transparent 62%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;animation:shine 8s cubic-bezier(.45,0,.25,1) 1s infinite}
.letter .seal{position:absolute;top:-36px;left:50%;translate:-50% 0;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#FF9F63,var(--orange) 48%,var(--orange-deep));box-shadow:0 14px 28px -10px rgba(120,30,0,.7),inset 0 0 0 4px rgba(255,255,255,.18)}
.letter .seal img{width:46px;height:auto}
.letter .label{margin-bottom:1.2em}
.letter .label::before,.letter .label::after{display:none}
.letter p{line-height:1.85;max-width:50ch;margin-inline:auto}
.letter p+p{margin-top:1em}
.letter .see{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:var(--fs-lead);color:var(--orange)}
.letter .sign{display:grid;justify-items:center;gap:2px;margin-top:1.4em;padding-top:1.2em;border-top:1px solid var(--line)}
.letter .sign b{font-family:var(--font-display);font-size:var(--fs-lead);font-style:italic;font-weight:600}
.letter .sign span{font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-deep)}
/* what happens next, on cream with a peach glow */
.ty-next{text-align:center;background:radial-gradient(ellipse 60% 60% at 50% 40%,#FCE4CF,rgba(250,240,228,0) 70%),var(--cream)}
.ty-next .journey{margin-top:clamp(36px,4.6vw,56px)}
@media (min-width:861px){
  .journey.two{grid-template-columns:repeat(2,1fr);max-width:760px;margin-inline:auto}
  .journey.two::before,.journey.two::after{left:25%;right:25%}
  .journey.two .jstep p{max-width:32ch}
}
.next-copy{max-width:58ch;margin:1.2em auto 0;line-height:1.8}
.next-sub{margin-top:clamp(28px,3.6vw,40px);font-family:var(--font-display);font-size:var(--fs-lead);font-style:italic;font-weight:500;color:var(--orange-deep)}
/* moments: six on the thank-you page */
.moments.six .moment:nth-child(7){display:none}
/* how to prepare */
.prep{text-align:center}
.prep .journey{margin-top:clamp(40px,5.4vw,64px)}
.jstep .dress-dot{cursor:pointer;transition:transform .5s var(--ease),border-color .5s ease,color .5s ease,box-shadow .5s ease}
.jstep .dress-dot:hover{transform:scale(1.08)}
.jstep .dress-dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(242,96,24,.5);animation:halo 3.4s cubic-bezier(.16,1,.3,1) 3.4s infinite;opacity:0}
.journey.in .jstep .dress-dot{transition:opacity 1.2s cubic-bezier(.16,1,.3,1) .8s,transform .5s var(--ease),filter 1.2s .8s,border-color .5s,color .5s,box-shadow .5s}
/* invite: a dark card glowing orange */
.ty-invite{background:var(--cream-2)}
.invite-card{position:relative;overflow:hidden;isolation:isolate;max-width:900px;margin-inline:auto;text-align:center;color:var(--cream);border-radius:calc(var(--radius) * 1.3);
  padding:clamp(48px,6vw,80px) clamp(22px,5vw,72px);background:radial-gradient(ellipse 80% 70% at 50% 110%,rgba(242,96,24,.55),rgba(242,96,24,0) 60%),linear-gradient(160deg,#3A1C0C,var(--ink) 60%);
  box-shadow:0 60px 100px -50px rgba(26,10,2,.8)}
.invite-card .pattern{opacity:.08;-webkit-mask-image:none;mask-image:none}
.invite-card>*:not(.pattern):not(.motes){position:relative;z-index:2}
.invite-card .display{color:var(--cream);max-width:18ch;margin-inline:auto}
.invite-card .display em{color:var(--orange)}
.invite-card p{max-width:50ch;margin:1.2em auto 0;line-height:1.75}
.invite-card .cta{margin-top:clamp(26px,3.4vw,40px)}
.invite-card .btn.big{animation:btnshine 6s cubic-bezier(.45,0,.25,1) 1.8s infinite,ctaglow2 3.2s ease-in-out infinite}
/* the final word, on a full orange gradient */
.ty-final{text-align:center;color:var(--ink);background:linear-gradient(135deg,#F7843F 0%,var(--orange) 45%,#C7461A 100%)}
#tyfinal.section{padding-block:clamp(80px,10vw,140px)}
.ty-final .motes i{background:#FFF4EA;box-shadow:0 0 10px 2px rgba(255,240,228,.6)}
.ty-final .pull-final{font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--cream)}
.ty-final .pull-final em{color:var(--ink);font-style:normal}
.ty-final .pull-final .ul{display:inline-block;position:relative}
.ty-final .pull-final .ul::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.06em;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .5s}
.ty-final .pull-final.in .ul::after{transform:scaleX(1)}
.ty-final .lead{margin-top:.9em}
.ty-final .lead strong{color:var(--cream)}
/* partner thank-you: the deck card on orange, the note on dark, the signature on the orange finale */
.ty-deck{text-align:center}
.deck-card{position:relative;overflow:hidden;isolation:isolate;margin:0 auto;max-width:920px;
  display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(24px,4vw,52px);padding:clamp(20px,3vw,36px);
  background:linear-gradient(150deg,#3A1C0C 0%,var(--ink) 55%,#120600 100%);color:var(--cream);border-radius:var(--radius);box-shadow:0 50px 90px -50px rgba(26,10,2,.8);text-align:left}
.deck-card .pattern{opacity:.08;-webkit-mask-image:none;mask-image:none}
.deck-card>*:not(.pattern){position:relative;z-index:1}
.deck-card .cover{position:relative;display:block;border-radius:calc(var(--radius) * .6);overflow:hidden;box-shadow:0 30px 50px -24px rgba(0,0,0,.7);
  transform:perspective(1200px) rotateY(8deg) rotateX(2deg);transition:transform 1s var(--ease)}
.deck-card .cover:hover{transform:perspective(1200px) rotateY(0) rotateX(0) translateY(-4px)}
.deck-card .cover img{width:100%;height:auto}
.deck-card .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 41%,rgba(255,236,220,0) 45%,rgba(255,236,220,.4) 50%,rgba(255,236,220,0) 55%,transparent 59%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;animation:shine 7s cubic-bezier(.45,0,.25,1) 1.2s infinite}
.deck-card .pdf{position:absolute;left:12px;bottom:12px;z-index:1;padding:.3em .8em;border-radius:999px;background:var(--orange);color:var(--cream);font-weight:700;letter-spacing:.18em}
.deck-card .copy{display:grid;gap:18px;justify-items:start}
.deck-card .copy p{line-height:1.7}
.deck-card .copy strong{color:var(--orange)}
.deck-card .label::after{display:none}
@media (max-width:760px){
  .deck-card{grid-template-columns:1fr;text-align:center;padding:16px 16px 28px}
  .deck-card .copy{justify-items:center}
  .deck-card .cover{transform:none}
}
.know{text-align:center}
.know .know-lead{max-width:40ch;margin:.9em auto 0;font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;line-height:1.45;color:var(--cream)}
.know .know-lead em{display:block;color:var(--orange);font-style:italic;font-weight:500;margin-top:.3em}
.know .closing{max-width:52ch;margin:1.6em auto 0;line-height:1.8;color:var(--cream)}
.sign-off .regards{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:var(--fs-lead);color:var(--cream)}
.sign-off .sig{font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;line-height:1.1;color:var(--ink);margin:.15em 0 .5em}
.sign-off .label{color:var(--cream)}
.sign-off .contact{max-width:48ch;margin:clamp(28px,3.6vw,40px) auto 18px;line-height:1.75}
.sign-off .contact a{color:var(--cream);font-weight:700;border-bottom:1px solid rgba(250,240,228,.6);transition:border-color .3s,color .3s;white-space:nowrap}
.sign-off .contact a:hover{color:var(--ink);border-color:var(--ink)}
.sign-off .date{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.4em .9em;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.sign-off .date i{width:4.8px;height:4.8px;border-radius:50%;background:var(--cream);flex:none}
@media (max-width:760px){.sign-off .date{flex-direction:column;gap:.2em}.sign-off .date i{display:none}}
.motes i:nth-child(1){left:44%;width:3px;height:3px;--dx:-54px;animation-duration:16.6s;animation-delay:-6.3s}
.motes i:nth-child(2){left:71%;width:3.5px;height:3.5px;--dx:56px;animation-duration:9.8s;animation-delay:-9.3s}
.motes i:nth-child(3){left:7%;width:3px;height:3px;--dx:-30px;animation-duration:9.7s;animation-delay:-6.7s}
.motes i:nth-child(4){left:73%;width:3.5px;height:3.5px;--dx:-45px;animation-duration:12.4s;animation-delay:-13.2s}
.motes i:nth-child(5){left:83%;width:5px;height:5px;--dx:13px;animation-duration:14.0s;animation-delay:-15.2s}
.motes i:nth-child(6){left:9%;width:3.5px;height:3.5px;--dx:49px;animation-duration:16.8s;animation-delay:-0.7s}
.motes i:nth-child(7){left:40%;width:4px;height:4px;--dx:13px;animation-duration:12.4s;animation-delay:-8.7s}
.motes i:nth-child(8){left:74%;width:3.5px;height:3.5px;--dx:14px;animation-duration:15.5s;animation-delay:-2.9s}
.motes i:nth-child(9){left:50%;width:3px;height:3px;--dx:12px;animation-duration:9.8s;animation-delay:-11.4s}
.motes i:nth-child(10){left:82%;width:4px;height:4px;--dx:-6px;animation-duration:10.6s;animation-delay:-10.9s}
.motes i:nth-child(11){left:62%;width:3.5px;height:3.5px;--dx:-22px;animation-duration:13.7s;animation-delay:-7.3s}
.motes i:nth-child(12){left:26%;width:4px;height:4px;--dx:13px;animation-duration:14.6s;animation-delay:-3.9s}
.motes i:nth-child(13){left:70%;width:4px;height:4px;--dx:-3px;animation-duration:13.0s;animation-delay:-5.5s}
.motes i:nth-child(14){left:80%;width:3.5px;height:3.5px;--dx:-7px;animation-duration:16.8s;animation-delay:-1.9s}
.twinkles i:nth-child(1){left:6%;top:12%;animation-delay:-0.7s;scale:1}
.twinkles i:nth-child(2){left:92%;top:8%;animation-delay:-1.4s;scale:0.7}
.twinkles i:nth-child(3){left:14%;top:46%;animation-delay:-2.1s;scale:1}
.twinkles i:nth-child(4){left:88%;top:40%;animation-delay:-2.8s;scale:1}
.twinkles i:nth-child(5){left:4%;top:78%;animation-delay:-3.5s;scale:0.7}
.twinkles i:nth-child(6){left:95%;top:72%;animation-delay:-4.2s;scale:1.3}
.twinkles i:nth-child(7){left:30%;top:4%;animation-delay:-4.9s;scale:0.7}
.twinkles i:nth-child(8){left:70%;top:92%;animation-delay:-5.6s;scale:1.3}
/* Ultra VIP: the twenty seats, lit one after another */
@keyframes seatglow{0%,60%,100%{background:rgba(255,217,160,.06);box-shadow:none}20%{background:#FFD9A0;box-shadow:0 0 12px 2px rgba(242,96,24,.7)}}
.tier.ultra .btn{margin-top:0}
/* partner levels: a bolder metal outline and a soft halo in the trophy's colour */
.level::after{padding:3px}
.level.silver{--t1:#AEB6C2;--t2:#6B7482;--t3:#E8ECF1}
.level.platinum{--t1:#D5D9DE;--t2:#8A9099;--t3:#FFFFFF}
.level{box-shadow:0 0 0 6px color-mix(in srgb,var(--t1) 22%,transparent),0 34px 70px -44px var(--glow)}
.level:hover{box-shadow:0 0 0 8px color-mix(in srgb,var(--t1) 30%,transparent),0 50px 90px -40px var(--glow)}
.final-wings{opacity:.32}

/* =========================================================
   v310 — evening timeline, dress-code card on the landing, FAQ dress, levels entrance,
   finale with stage lights, softer thank-you colours
   ========================================================= */

/* ---------- the evening, unfolding along a line ---------- */
.unfold-sec{text-align:center;background:linear-gradient(180deg,var(--ink) 0%,#24100A 45%,#1C0B04 100%);overflow:clip}
.unfold-sec .lead{max-width:58ch;margin:1em auto 0;color:var(--cream);line-height:1.5}
.unfold-sec .lead strong{font-weight:500;color:#F7C9A6}
.unfold-sec .display em{background:linear-gradient(100deg,#FFE2C4 0%,#F7B48C 30%,#F26018 55%,#FFE2C4 80%,#F7B48C 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:goldsheen 7s ease-in-out infinite}
/* aurora: three slow warm lights drifting behind everything */
.aurora{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;width:70vw;height:70vw;max-width:1000px;max-height:1000px}
.aurora i:nth-child(1){left:-20%;top:5%;background:radial-gradient(closest-side,rgba(242,96,24,.2),rgba(242,96,24,0));animation:aurA 19s ease-in-out infinite alternate}
.aurora i:nth-child(2){right:-25%;top:35%;background:radial-gradient(closest-side,rgba(199,70,26,.18),rgba(199,70,26,0));animation:aurB 23s ease-in-out infinite alternate}
.aurora i:nth-child(3){left:20%;bottom:-25%;background:radial-gradient(closest-side,rgba(255,214,180,.1),rgba(255,214,180,0));animation:aurA 27s ease-in-out -8s infinite alternate-reverse}
@keyframes aurA{from{translate:0 0;scale:1}to{translate:18vw 10vh;scale:1.25}}
@keyframes aurB{from{translate:0 0;scale:1.1}to{translate:-16vw -12vh;scale:.9}}
@media (prefers-reduced-motion:reduce){.aurora i,.unfold-sec .display em{animation:none}}
.unfold{position:relative;max-width:980px;margin:clamp(48px,6vw,80px) auto 0}
.uline{position:absolute;left:50%;top:var(--ut,40px);height:var(--uh,calc(100% - 80px));width:2px;margin-left:-1px;background:rgba(250,240,228,.12);border-radius:2px;z-index:0}
.ufill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#FFE2C4,#F7B48C 30%,var(--orange));transform-origin:top;transform:scaleY(var(--p,0))}
.uspark{position:absolute;left:50%;top:calc(var(--p,0) * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#FFF4EA;
  box-shadow:0 0 0 3px rgba(255,180,130,.35),0 0 16px 6px rgba(242,96,24,.8),0 0 40px 12px rgba(242,96,24,.35);opacity:var(--so,0);transition:opacity .4s}
.usteps{list-style:none;position:relative;z-index:1}
.ustep{display:grid;grid-template-columns:1fr 92px 1fr;align-items:center}
.ustep+.ustep{margin-top:-34px}
.umed{grid-column:2;grid-row:1;justify-self:center;position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#F7C9A6;
  background:radial-gradient(circle at 35% 30%,#3A1C0C,#1E0C04);box-shadow:inset 0 0 0 1px rgba(250,240,228,.22),0 10px 24px -10px rgba(0,0,0,.6);
  transition:background .6s ease,color .6s ease,box-shadow .6s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.umed svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.umed svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .15s}
.ustep.lit .umed{color:var(--cream);transform:scale(1.08);background:radial-gradient(circle at 32% 28%,#FF9F63,var(--orange) 52%,var(--orange-deep));
  box-shadow:0 0 0 6px rgba(242,96,24,.14),0 0 34px -4px rgba(242,96,24,.75)}
.ustep.lit .umed svg *{stroke-dashoffset:0}
.ucard{grid-row:1;position:relative;padding:22px 26px 24px;border-radius:var(--radius);max-width:400px;
  background:linear-gradient(135deg,rgba(250,240,228,.075),rgba(250,240,228,.015));border:1px solid rgba(250,240,228,.1);box-shadow:0 24px 50px -36px rgba(0,0,0,.8);
  opacity:.28;filter:blur(1.5px);transition:opacity .8s ease,transform 1s var(--ease),filter .8s ease,border-color .8s ease,background .8s ease}
.ustep:nth-child(odd) .ucard{grid-column:1;justify-self:end;text-align:right;transform:translateX(-34px)}
.ustep:nth-child(even) .ucard{grid-column:3;justify-self:start;text-align:left;transform:translateX(34px)}
.ustep.lit .ucard{opacity:1;filter:none;transform:none;border-color:rgba(247,180,140,.32);background:linear-gradient(135deg,rgba(247,180,140,.13),rgba(250,240,228,.025) 70%)}
/* a connector from the card to its medallion */
.ucard::after{content:"";position:absolute;top:50%;width:30px;height:1px;background:linear-gradient(90deg,rgba(247,180,140,0),rgba(247,180,140,.6));opacity:0;transition:opacity .8s ease .2s}
.ustep:nth-child(odd) .ucard::after{left:100%}
.ustep:nth-child(even) .ucard::after{right:100%;transform:scaleX(-1)}
.ustep.lit .ucard::after{opacity:1}
.unum{display:block;font-family:var(--font-display);font-style:italic;color:#F7B48C;margin-bottom:.2em}
.ucard h3{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:600;line-height:1.3;color:var(--cream)}
.ucard p{margin-top:.45em;line-height:1.6;color:#EBDCCB}
.ucard:hover{border-color:rgba(247,180,140,.55)}
html.safe .ucard{opacity:1;filter:none;transform:none}
@media (prefers-reduced-motion:reduce){.ucard{opacity:1;filter:none;transform:none!important}.umed svg *{stroke-dashoffset:0}}
@media (max-width:760px){
  .uline{left:31px}
  .ustep{grid-template-columns:62px 1fr;column-gap:14px}
  .ustep+.ustep{margin-top:16px}
  .umed{grid-column:1}
  .ustep:nth-child(n) .ucard{grid-column:2;justify-self:stretch;text-align:left;transform:translateX(24px);max-width:none}
  .ustep.lit .ucard{transform:none}
  .ucard::after{display:none}
}
/* dress row (button versions) */
.unfold-sec .dress-row{text-align:left}
button.dress-line{font:inherit;cursor:pointer;color:inherit;transition:border-color .4s,background .4s,transform .5s var(--ease),box-shadow .5s}
button.dress-line:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 18px 36px -20px rgba(242,96,24,.7)}
.dress-line .dl-text{color:var(--cream)}
.dress-line .dl-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(250,240,228,.1);color:var(--cream);transition:background .4s,transform .5s var(--ease)}
.dress-line .dl-ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
button.dress-line:hover .dl-ic{background:var(--orange);transform:translateX(3px)}
button.gown-stage{cursor:pointer;transition:transform .6s var(--ease)}
button.gown-stage:hover{transform:translateY(-6px) scale(1.03)}
@media (max-width:760px){.unfold-sec .dress-row{text-align:center}}

/* ---------- the dress-code card, centred (landing + thank-you) ---------- */
.dress-card{grid-template-columns:1fr;justify-items:center;text-align:center;gap:clamp(16px,2.4vw,26px);padding:clamp(36px,5vw,60px) clamp(24px,5vw,72px)}
.dress-card .copy{justify-items:center}
.dress-card .display{max-width:16ch;margin-inline:auto}
.dress-card .gown{order:-1;width:clamp(110px,12vw,150px)}
.dress-card .label::after{content:"";width:27.2px;height:2px;background:currentColor;flex:none}
.pm-stage{width:min(620px,100%)}

/* ---------- FAQ: the dress code, illustrated ---------- */
.qa-dress{background:linear-gradient(120deg,rgba(242,96,24,.1),rgba(242,96,24,0) 75%);border-radius:16px;padding-inline:18px;margin-inline:-18px;border-bottom-color:transparent}
.qa-dress summary>span{display:inline-flex;align-items:center;gap:12px}
.qd-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--orange)}
.qd-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dress-ans{display:flex;align-items:center;gap:20px;padding:4px 0 22px}
.dress-ans p{padding:0!important;font-family:var(--font-display);font-style:italic;font-size:var(--fs-lead);line-height:1.35}
.mini-dress{flex:none;width:48px;transform-origin:50% 8%;animation:gownsway 5s ease-in-out infinite}
.mini-dress svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 10px 10px rgba(26,10,2,.25))}
.mini-dress .tail{transform-box:fill-box;transform-origin:50% 0;animation:ribbon 3s ease-in-out infinite}
.swatches{display:flex;align-items:center;gap:8px;flex:none}
.sw{width:30px;height:30px;border-radius:50%;box-shadow:0 8px 16px -8px rgba(26,10,2,.5),inset 0 0 0 2px rgba(255,255,255,.35)}
.sw.ink{background:radial-gradient(circle at 35% 30%,#3A1C0C,#0B0502)}
.sw.orange{background:radial-gradient(circle at 35% 30%,#FF9F63,var(--orange) 55%,var(--orange-deep))}
.sw-plus{position:relative;width:12px;height:12px}
.sw-plus::before,.sw-plus::after{content:"";position:absolute;left:0;top:5px;width:12px;height:2px;border-radius:2px;background:var(--orange-deep)}
.sw-plus::after{transform:rotate(90deg)}
.qa-dress[open] .mini-dress{animation:dressin .9s cubic-bezier(.34,1.56,.64,1) both,gownsway 5s ease-in-out .9s infinite}
.qa-dress[open] .sw{animation:swpop .7s cubic-bezier(.34,1.56,.64,1) both}
.qa-dress[open] .sw.orange{animation-delay:.18s}
@keyframes dressin{from{opacity:0;transform:translateY(16px) scale(.7)}to{opacity:1;transform:none}}
@keyframes swpop{from{transform:scale(0)}to{transform:scale(1)}}
@media (max-width:860px){.dress-ans{justify-content:center;flex-wrap:wrap;text-align:center}.qa-dress{margin-inline:0}}

/* ---------- partner levels: the cards rise and turn in, the trophies land ---------- */
.level-wrap.reveal{opacity:0;transform:perspective(1300px) translateY(70px) rotateX(16deg) scale(.94);filter:blur(6px);transform-origin:50% 100%;
  transition:opacity 1s ease,transform 1.4s cubic-bezier(.2,.9,.25,1),filter 1s ease}
.level-wrap.reveal.in{opacity:1;transform:none;filter:none}
.level-wrap.reveal:nth-child(2){transition-delay:.14s}.level-wrap.reveal:nth-child(3){transition-delay:.08s}.level-wrap.reveal:nth-child(4){transition-delay:.22s}
.level-wrap .arch img{opacity:0}
.level-wrap.in .arch img{animation:trophyland 1.1s cubic-bezier(.34,1.4,.64,1) .45s both,float 6s ease-in-out 1.6s infinite}
@keyframes trophyland{from{opacity:0;transform:translateY(-36px) scale(.75)}to{opacity:1;transform:none}}
.level-wrap.in .arch{animation:archflash 1.6s ease .6s}
@keyframes archflash{0%{box-shadow:0 26px 44px -26px rgba(26,10,2,.75),0 0 0 1px var(--t1)}35%{box-shadow:0 26px 44px -26px rgba(26,10,2,.75),0 0 0 1px var(--t1),0 0 50px 6px var(--glow)}100%{box-shadow:0 26px 44px -26px rgba(26,10,2,.75),0 0 0 1px var(--t1)}}
html.safe .level-wrap .arch img,html.safe .level-wrap.reveal{opacity:1!important;transform:none!important;filter:none!important}
@media (prefers-reduced-motion:reduce){.level-wrap .arch img{opacity:1}}

/* ---------- the finale: stage lights, highlighted lines, the photo duo ---------- */
.final.grand2{background:radial-gradient(ellipse 80% 55% at 50% 0%,#3A1B0B,var(--ink) 65%),var(--ink)}
.beams{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.beams i{position:absolute;top:-8%;width:46vw;max-width:640px;height:118%;transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(255,214,180,.2),rgba(255,214,180,.05) 55%,rgba(255,214,180,0) 85%);clip-path:polygon(47% 0,53% 0,100% 100%,0 100%)}
.beams i:nth-child(1){left:-6%;animation:beamL 11s ease-in-out infinite alternate}
.beams i:nth-child(2){right:-6%;animation:beamR 13s ease-in-out infinite alternate}
.beams i:nth-child(3){left:50%;margin-left:-20vw;width:40vw;opacity:.6;background:linear-gradient(180deg,rgba(242,96,24,.22),rgba(242,96,24,0) 70%);animation:beamC 9s ease-in-out infinite alternate}
@keyframes beamL{from{rotate:-28deg}to{rotate:4deg}}
@keyframes beamR{from{rotate:28deg}to{rotate:-6deg}}
@keyframes beamC{from{rotate:-8deg;opacity:.35}to{rotate:8deg;opacity:.7}}
@media (prefers-reduced-motion:reduce){.beams i{animation:none}}
.final .final-copy{max-width:58ch;margin:clamp(36px,4.4vw,56px) auto 0;line-height:1.85;color:var(--cream)}
.final .final-copy p+p{margin-top:1.4em}
.mark{color:var(--cream);font-weight:700;background:linear-gradient(transparent 60%,rgba(242,96,24,.55) 60%,rgba(242,96,24,.55) 92%,transparent 92%) no-repeat 0 0/0% 100%;transition:background-size 1.3s var(--ease) .5s}
.in .mark{background-size:100% 100%}
.duo2{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(18px,3vw,40px);max-width:880px;margin:clamp(48px,6vw,80px) auto 0}
.duo2 figure{display:grid;justify-items:center;gap:22px}
.duo2 figcaption{font-family:var(--font-display);font-style:italic;font-size:var(--fs-lead);line-height:1.4;max-width:22ch}
.others figcaption{color:#D9C4AE}
.you figcaption strong{font-style:normal;color:var(--orange)}
.pstack{position:relative;width:min(300px,100%);aspect-ratio:4/3}
.pstack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px;border:8px solid #EFE3D5;filter:sepia(.75) saturate(.55) brightness(.72);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.8);transition:rotate .8s var(--ease),translate .8s var(--ease)}
.pstack img:nth-child(1){rotate:-9deg;translate:-14px 6px}
.pstack img:nth-child(2){rotate:6deg;translate:12px -4px}
.pstack img:nth-child(3){rotate:-2deg}
.others:hover .pstack img:nth-child(1){rotate:-16deg;translate:-40px 10px}
.others:hover .pstack img:nth-child(2){rotate:13deg;translate:40px -6px}
.duo-mid{position:relative;width:1px;height:160px;background:linear-gradient(180deg,rgba(242,96,24,0),rgba(242,96,24,.7),rgba(242,96,24,0))}
.duo-mid i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--orange);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:twinkle2 2.6s ease-in-out infinite}
.pyou{position:relative;width:min(330px,100%);aspect-ratio:4/3;border-radius:16px;padding:8px;background:linear-gradient(135deg,#FFE2B0,var(--orange) 50%,#C7461A);
  box-shadow:0 0 60px -10px rgba(242,96,24,.75),0 30px 60px -30px rgba(0,0,0,.8);rotate:2deg;transition:rotate .8s var(--ease),scale .8s var(--ease);animation:youglow 3.6s ease-in-out infinite}
.pyou img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
.you:hover .pyou{rotate:0deg;scale:1.04}
@keyframes youglow{0%,100%{box-shadow:0 0 50px -14px rgba(242,96,24,.6),0 30px 60px -30px rgba(0,0,0,.8)}50%{box-shadow:0 0 80px -6px rgba(242,96,24,.9),0 30px 60px -30px rgba(0,0,0,.8)}}
.final .limited{margin:clamp(44px,5.4vw,64px) auto 0;max-width:40ch;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#F7C9A6;line-height:1.7}
.final .cta-stack{gap:0;margin-top:clamp(36px,4.8vw,56px)}
.final .date{margin-top:clamp(34px,4vw,48px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line-dark);letter-spacing:.22em;gap:.6em 1.4em;min-width:min(560px,100%)}
@media (max-width:760px){
  .duo2{grid-template-columns:1fr;gap:28px}
  .duo-mid{width:160px;height:1px;margin-inline:auto;background:linear-gradient(90deg,rgba(242,96,24,0),rgba(242,96,24,.7),rgba(242,96,24,0))}
  .final .date{letter-spacing:.14em;min-width:0}
}

/* ---------- thank-you pages: no solid orange — warm creams and a deep, glowing dark ---------- */
.ty-hero::after,.ty-hero.to-cream::after{height:240px;background:linear-gradient(180deg,rgba(250,240,228,0) 0%,rgba(250,240,228,.18) 30%,rgba(250,240,228,.55) 62%,rgba(250,240,228,.88) 85%,var(--cream) 100%)}
.ty-letter{background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(247,180,140,.45),rgba(247,180,140,0) 70%),linear-gradient(180deg,var(--cream) 0%,#F7E3D0 100%)}
.ty-letter .letter{box-shadow:inset 0 1px 0 #fff,0 50px 90px -40px rgba(120,45,10,.45),0 0 0 1px rgba(242,96,24,.15)}
.ty-next{background:radial-gradient(ellipse 60% 60% at 50% 40%,rgba(252,228,207,.9),rgba(250,240,228,0) 70%),#F7E3D0}
.ty-final{color:var(--cream);background:radial-gradient(ellipse 70% 70% at 50% 115%,rgba(242,96,24,.5),rgba(242,96,24,0) 62%),radial-gradient(ellipse 50% 40% at 15% 0%,rgba(199,70,26,.25),rgba(199,70,26,0) 70%),linear-gradient(160deg,#3A1C0C 0%,var(--ink) 60%)}
.ty-final .pull-final{color:var(--cream)}
.ty-final .pull-final em{color:var(--orange)}
.ty-final .pull-final .ul::after{background:var(--orange)}
.ty-final .lead{color:var(--cream)}
.ty-final .lead strong{color:#F7B48C}
.ty-final .motes i{background:#FFC9A0;box-shadow:0 0 10px 2px rgba(242,96,24,.55)}
.ty-deck{background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(247,180,140,.5),rgba(247,180,140,0) 70%),var(--cream-2)}
.sign-off .regards{color:#F7B48C}
.sign-off .sig{color:var(--cream)}
.sign-off .label{color:var(--orange)}
.sign-off .contact{color:var(--cream)}
.sign-off .contact a{color:var(--orange);border-bottom-color:rgba(242,96,24,.5)}
.sign-off .contact a:hover{color:var(--cream);border-color:var(--cream)}
.sign-off .date{color:var(--cream)}
.sign-off .date i{background:var(--orange)}
.know{background:linear-gradient(180deg,var(--ink),#24100A)}
/* the thank-you "moments" read in cream, not orange */
.moment h3{color:var(--cream)}
.moment .mi{color:#F7C9A6}
.moment .mn{color:rgba(247,180,140,.6)}
.know{color:var(--ink);background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(247,180,140,.32),rgba(247,180,140,0) 70%),var(--cream)}
.know .know-lead{color:var(--ink)}
.know .know-lead em{color:var(--orange)}
.know .closing{color:var(--ink)}
.final .final-copy .mark{color:var(--cream)}
.unfold-sec .dress-copy .more{color:#F7C9A6}

/* ---------- v320 · Partners, dark and editorial (no orange ground): gilded promise + glass benefits ---------- */
.partners2{background:radial-gradient(ellipse 70% 50% at 50% 0%,#3A1B0B,rgba(58,27,11,0) 70%),linear-gradient(180deg,var(--ink),#200D05 60%,var(--ink));overflow:clip}
.partners2 .label{color:#F7B48C}
.partners2 .display{color:var(--cream)}
.partners2 .display em{background:linear-gradient(100deg,#FFE2C4 0%,#F7B48C 30%,#F26018 55%,#FFE2C4 80%,#F7B48C 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:goldsheen 7s ease-in-out infinite}
.p-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(44px,5.6vw,72px);text-align:left}
.p-copy p{line-height:1.85;color:#EBDCCB}
.p-copy p+p{margin-top:1.3em}
.p-copy strong{color:var(--cream);font-weight:700}
.p-promise{position:relative;margin:0;padding:clamp(34px,4vw,48px) clamp(26px,3.4vw,40px) clamp(30px,3.4vw,40px);border-radius:calc(var(--radius) * 1.2);text-align:center;
  background:radial-gradient(ellipse 90% 60% at 50% 0%,#4A2410,#1E0C04 60%,#0A0400);box-shadow:0 50px 100px -50px rgba(242,96,24,.6),0 0 0 1px rgba(255,190,120,.12)}
.p-promise::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--a),rgba(242,96,24,.9),#FFE2B0,rgba(199,70,26,.6),#FFB46B,rgba(138,52,16,.5),#FFE2B0,rgba(242,96,24,.9));
  -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:spin 8s linear infinite}
.pp-trophy{display:block;width:110px;aspect-ratio:397/421;margin:0 auto 18px;border-radius:999px 999px 14px 14px;overflow:hidden;box-shadow:0 0 0 1px rgba(242,96,24,.5),0 20px 40px -20px rgba(242,96,24,.7)}
.pp-trophy img{width:100%;height:100%;object-fit:cover;animation:float 6s ease-in-out infinite}
.p-promise p{font-family:var(--font-display);font-style:italic;font-size:var(--fs-lead);line-height:1.5;color:var(--cream)}
.p-promise strong{display:block;margin-top:.6em;font-style:normal;font-weight:600;color:#F7C9A6}
.sub-title2{margin-top:clamp(64px,8vw,104px);text-align:center;font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;line-height:1.1;color:var(--cream)}
.sub-title2 em{color:#F7B48C;font-style:normal}
.gains2{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:clamp(32px,4.2vw,52px)}
.g2{position:relative;display:grid;justify-items:center;gap:8px;text-align:center;padding:clamp(30px,3vw,38px) clamp(18px,2.2vw,26px) clamp(26px,2.6vw,32px);border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(250,240,228,.08),rgba(250,240,228,.015) 65%);border:1px solid rgba(250,240,228,.1);overflow:hidden;isolation:isolate;
  transition:transform .7s var(--ease),border-color .6s ease,background .6s ease,box-shadow .7s var(--ease)}
.g2.reveal{transition:opacity 1s var(--ease) calc(var(--k) * 90ms),transform 1.1s var(--ease) calc(var(--k) * 90ms),border-color .6s ease,background .6s ease,box-shadow .7s var(--ease)}
.g2::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(112deg,transparent 40%,rgba(255,214,180,.05) 45%,rgba(255,226,200,.16) 50%,rgba(255,214,180,.05) 55%,transparent 60%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;animation:shine 9s cubic-bezier(.45,0,.25,1) calc(var(--k) * .6s) infinite}
.g2:hover{transform:translateY(-6px);border-color:rgba(247,180,140,.45);background:linear-gradient(160deg,rgba(247,180,140,.14),rgba(250,240,228,.02) 70%);box-shadow:0 34px 60px -36px rgba(242,96,24,.55)}
.g2n{position:absolute;top:10px;right:16px;font-family:var(--font-display);font-style:italic;font-size:var(--fs-lead);color:rgba(247,180,140,.45)}
.g2i{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#F7C9A6;margin-bottom:6px;
  background:radial-gradient(circle at 35% 30%,rgba(247,180,140,.18),rgba(247,180,140,.02) 70%);box-shadow:inset 0 0 0 1px rgba(247,180,140,.35)}
.g2i::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from var(--a),transparent 0 70%,rgba(255,200,150,.9) 85%,transparent 100%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));animation:spin 6s linear infinite}
.g2i svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.g2i svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1) calc(var(--k) * .1s + .35s)}
.g2.in .g2i svg *,html.safe .g2i svg *{stroke-dashoffset:0}
.g2:hover .g2i{color:var(--cream);background:radial-gradient(circle at 32% 28%,#FF9F63,var(--orange) 52%,var(--orange-deep));box-shadow:0 0 30px -6px rgba(242,96,24,.7);transition:background .5s,color .5s,box-shadow .5s}
.g2 h4{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:600;line-height:1.2;color:var(--cream)}
.g2 p{line-height:1.6;max-width:28ch;color:#EBDCCB}
@media (prefers-reduced-motion:reduce){.g2i svg *{stroke-dashoffset:0}.partners2 .display em,.p-promise::after,.g2i::after{animation:none}}
@media (max-width:1000px) and (min-width:761px){.gains2{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.p-split{grid-template-columns:1fr;text-align:center}.gains2{grid-template-columns:1fr}}

/* ---------- v330 · finale: luminous emphasis instead of underlines; the split photo ---------- */
.final .final-copy .glow-txt{display:block;margin-top:.35em;font-family:var(--font-display);font-style:italic;font-weight:600;font-size:var(--fs-lead);line-height:1.35;
  background:linear-gradient(100deg,#FFE2C4 0%,#F7B48C 35%,#FF8A4C 55%,#FFE2C4 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;animation:goldsheen 6s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(242,96,24,.35))}
@media (prefers-reduced-motion:reduce){.final .final-copy .glow-txt{animation:none}}
.split-photo{max-width:820px;margin:clamp(52px,6.4vw,84px) auto 0;--x:96%}
.sp-frame{position:relative;aspect-ratio:637/298;border-radius:calc(var(--radius) * 1.1);overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 1px rgba(247,180,140,.25),0 50px 100px -50px rgba(242,96,24,.55),0 30px 60px -30px rgba(0,0,0,.8)}
.sp-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sp-base{filter:sepia(.8) saturate(.4) brightness(.55) blur(1.5px);transform:scale(1.02)}
.sp-live{clip-path:inset(0 0 0 var(--x));transition:clip-path .25s linear}
.sp-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(26,10,2,0) 55%,rgba(26,10,2,.55) 100%)}
.sp-line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;z-index:3;background:linear-gradient(180deg,rgba(255,226,196,0),#FFE2C4 20%,var(--orange) 80%,rgba(242,96,24,0));
  box-shadow:0 0 18px 3px rgba(242,96,24,.7);transition:left .25s linear}
.sp-line i{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;background:#FFF4EA;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:twinkle2 2.4s ease-in-out infinite}
.split-photo .glints{z-index:3}
.split-photo .glints i:nth-child(1){left:auto;right:8%;top:16%}.split-photo .glints i:nth-child(3){left:auto;right:30%;top:60%}
.sp-caps{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px;align-items:start}
.sp-others{text-align:left;font-family:var(--font-display);font-style:italic;font-size:var(--fs-lead);line-height:1.4;color:#CDB7A2;max-width:24ch}
.sp-you{text-align:right;justify-self:end;font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;line-height:1.3;
  background:linear-gradient(100deg,#FFE2C4,#F7B48C 40%,#FF8A4C 60%,#FFE2C4);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:goldsheen 6s ease-in-out infinite}
@media (max-width:760px){.sp-caps{grid-template-columns:1fr;text-align:center;gap:12px}.sp-others,.sp-you{text-align:center;justify-self:center;max-width:none}.sp-frame{aspect-ratio:4/3}}

/* ---------- v330 · "Ce primește brandul tău": colour at rest, not only on hover ---------- */
.g2{background:radial-gradient(ellipse 85% 55% at 50% 0%,rgba(242,96,24,.3),rgba(242,96,24,0) 70%),linear-gradient(165deg,rgba(74,36,16,.75),rgba(30,12,4,.9) 70%);
  border:1px solid rgba(247,180,140,.28);box-shadow:inset 0 1px 0 rgba(255,214,180,.15),0 30px 60px -38px rgba(242,96,24,.55)}
.g2::before{content:"";position:absolute;left:18%;right:18%;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(242,96,24,0),#FFB46B,rgba(242,96,24,0))}
.g2:nth-child(3n+2){background:radial-gradient(ellipse 85% 55% at 50% 0%,rgba(255,180,110,.26),rgba(255,180,110,0) 70%),linear-gradient(165deg,rgba(86,40,14,.75),rgba(30,12,4,.9) 70%)}
.g2:nth-child(3n){background:radial-gradient(ellipse 85% 55% at 50% 0%,rgba(199,70,26,.34),rgba(199,70,26,0) 70%),linear-gradient(165deg,rgba(70,28,10,.75),rgba(30,12,4,.9) 70%)}
.g2i{color:var(--cream);background:radial-gradient(circle at 32% 28%,#FF9F63,var(--orange) 52%,var(--orange-deep));box-shadow:0 16px 30px -12px rgba(242,96,24,.75),inset 0 1px 0 rgba(255,255,255,.3)}
.g2i::before{content:"";position:absolute;inset:-14px;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(242,96,24,.45),rgba(242,96,24,0));animation:breathe 4s ease-in-out calc(var(--k) * .5s) infinite}
.g2n{color:#F7B48C;opacity:.85}
.g2 h4{color:#FFE7CF}
.g2 p{color:#F0E2D2}
.g2:hover{transform:translateY(-8px);border-color:rgba(255,190,130,.6);box-shadow:inset 0 1px 0 rgba(255,214,180,.2),0 44px 80px -36px rgba(242,96,24,.8)}
.g2:hover .g2i{animation:medal .9s cubic-bezier(.34,1.56,.64,1)}
/* v340 · the split photo pins in the centre while the colour sweeps across it */
#final.section{overflow:clip}
.sp-pin{position:relative;margin-top:clamp(52px,6.4vw,84px)}
.sp-pin .split-photo{position:sticky;top:var(--sp-top,15vh);margin-top:0;--x:100%}
.sp-live,.sp-line{transition:none}
.split-photo .sp-line{opacity:1;transition:opacity .6s ease}
.split-photo.done .sp-line{opacity:0}
.split-photo.done .sp-frame{box-shadow:0 0 0 1px rgba(247,180,140,.4),0 50px 110px -40px rgba(242,96,24,.8),0 30px 60px -30px rgba(0,0,0,.8);transition:box-shadow 1s ease}
@media (prefers-reduced-motion:reduce){.sp-pin .split-photo{position:relative;top:auto}}
html.safe .sp-pin{height:auto!important}
html.safe .sp-pin .split-photo{position:relative;top:auto}
/* the colour layer opens by its left edge (a layout change every browser repaints), the picture inside stays put */
.sp-frame .sp-live{position:absolute;top:0;bottom:0;right:0;left:var(--x);overflow:hidden;clip-path:none;z-index:1}
.sp-frame .sp-live img{position:absolute;top:0;right:0;left:auto;height:100%;width:var(--fw,820px);max-width:none;object-fit:cover}
/* thank-you finale: the same hand-drawn curve as under the hero's WIN, drawing itself in */
.pull-final .ul.curve::after{display:none}
.pull-final .ul.curve svg{position:absolute;left:.04em;right:.06em;bottom:-.24em;width:auto;max-width:none;height:.22em;overflow:visible}
.pull-final .ul.curve svg path{fill:none;stroke:var(--orange);stroke-width:5;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.4s var(--ease) .5s}
.pull-final.in .ul.curve svg path,html.safe .pull-final .ul.curve svg path{stroke-dashoffset:0}
.pull-final .ul.curve svg{left:.04em;right:auto;width:calc(100% - .1em)}

/* ---------- Awards: the spotlight stage ----------
   Without JS (or reduced motion) the awards sit in a simple centred grid. With JS (.live) the stage pins briefly and the
   ten awards glide past one at a time; the one in the centre is lit by the beam from above, its neighbours dim and recede. */
.awards-stage{position:relative;margin-top:clamp(30px,4vw,52px)}
.stage-sticky{position:relative;isolation:isolate;overflow:hidden;border-radius:calc(var(--radius) * 1.4);
  background:radial-gradient(120% 80% at 50% 0%,#3A1C0C 0%,#24100A 45%,#140702 100%);
  box-shadow:0 50px 90px -50px rgba(90,28,6,.75),inset 0 1px 0 rgba(255,214,170,.12),inset 0 0 0 1px rgba(242,96,24,.18);
  padding:clamp(30px,4vw,48px) clamp(16px,3vw,40px)}
.stage-sticky::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.06;background:url("../img/pattern-orange.svg") center top/208px 240px repeat}
.stage-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:34px 18px}
.prize{display:flex;flex-direction:column;align-items:center;text-align:center}
.prize .trophy{width:clamp(96px,10vw,132px);aspect-ratio:120/140;height:auto;filter:drop-shadow(0 14px 24px rgba(0,0,0,.55))}
.prize .name{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;line-height:1.1;color:var(--orange);margin:16px 0 0;white-space:nowrap}
.prize .name em{display:block;color:var(--cream);font-style:normal}
.prize .cat{margin-top:12px;padding-top:10px;border-top:1px solid rgba(242,96,24,.4);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);opacity:.85}
.beam,.floor,.stage-dots{display:none}
/* live: pinned stage */
.awards-stage.live .stage-sticky{position:sticky;top:var(--stage-top,90px);height:var(--stage-h,560px);padding:0}
.awards-stage.live .stage-track{display:block;position:absolute;inset:0}
.awards-stage.live .prize{position:absolute;left:50%;top:54%;width:min(420px,80vw);will-change:transform,opacity;transition:filter .6s var(--ease)}
.awards-stage.live .prize .trophy{width:clamp(110px,13vw,170px);transition:filter .7s var(--ease)}
.awards-stage.live .prize .name{font-size:var(--fs-display);white-space:nowrap}
.awards-stage.live .prize:not(.lit){cursor:pointer}
.awards-stage.live .prize:not(.lit) .trophy{filter:drop-shadow(0 14px 24px rgba(0,0,0,.55)) saturate(.6) brightness(.7)}
.awards-stage.live .prize.lit .trophy{filter:drop-shadow(0 0 26px rgba(255,170,110,.45)) drop-shadow(0 18px 30px rgba(0,0,0,.6)) brightness(1.08)}
.awards-stage.live .prize .cat{transition:opacity .6s var(--ease)}
.awards-stage.live .prize:not(.lit) .cat{opacity:0}
/* the beam: a soft cone of light from the top centre onto the award in view, with a pool of light at its feet */
.awards-stage.live .beam{display:block;position:absolute;left:50%;top:-4%;width:min(560px,92%);height:92%;translate:-50% 0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,226,196,.32) 0%,rgba(255,196,150,.14) 45%,rgba(255,170,110,.04) 80%,transparent 100%);
  clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  animation:beam 5s ease-in-out infinite}
@keyframes beam{0%,100%{opacity:.9}50%{opacity:1}}
.awards-stage.live .floor{display:block;position:absolute;left:50%;bottom:7%;width:min(520px,86%);height:70px;translate:-50% 0;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,190,140,.22),rgba(242,96,24,.08) 60%,transparent)}
.awards-stage.live .stage-dots{display:flex;gap:10px;position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:3}
.stage-dots button{width:7px;height:7px;border-radius:50%;background:rgba(250,240,228,.28);transition:background .4s,transform .4s var(--ease)}
.stage-dots button.on{background:var(--orange);transform:scale(1.4)}
.stage-dots button:hover{background:rgba(250,240,228,.6)}
@media (max-width:760px){
  .awards-stage.live .prize{width:78vw}
  .awards-stage.live .prize .name{white-space:normal}
  .awards-stage.live .stage-dots{gap:8px;bottom:16px}
}
@media (prefers-reduced-motion:reduce){.awards-stage .beam{animation:none}}
html.safe .awards-stage .stage-track{display:grid!important;position:static!important}

/* the arc: the lit award sits a little higher so its neighbours have room to curve down */
.awards-stage.live .prize{top:46%;transform-origin:50% 50%}

/* gallery: draggable filmstrip (JS drives the drift) + full-screen photo viewer */
.carousel.live .ctrack{animation:none;will-change:transform}
.carousel.live{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.carousel.live.grabbing{cursor:grabbing}
.carousel.live .frame{cursor:zoom-in}
.carousel.live.grabbing .frame{cursor:grabbing}
.carousel .frame:focus-visible{outline-color:var(--orange);outline-offset:3px}
.lightbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(56px,7vw,90px) clamp(16px,6vw,96px)}
.lightbox[hidden]{display:none}
.lb-backdrop{position:absolute;inset:0;background:rgba(26,10,2,.9);opacity:0;transition:opacity .45s ease}
.lightbox.on .lb-backdrop{opacity:1}
.lb-stage{position:relative;margin:0;display:grid;justify-items:center;gap:14px;max-width:min(1100px,100%);opacity:0;transform:scale(.96);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.lightbox.on .lb-stage{opacity:1;transform:none}
.lb-stage img{max-width:100%;max-height:calc(100vh - 190px);max-height:calc(100svh - 190px);width:auto;height:auto;border-radius:14px;background:#fff;padding:8px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8);opacity:0;translate:var(--from,0) 0;transition:opacity .45s var(--ease),translate .6s var(--ease)}
.lb-stage img.in{opacity:1;translate:0 0}
.lb-stage figcaption{color:var(--cream);font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-align:center}
.lb-btn{position:absolute;z-index:2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--cream);
  border:1px solid rgba(250,240,228,.35);background:rgba(250,240,228,.08);transition:background .3s,transform .4s var(--ease)}
.lb-btn:hover{background:rgba(242,96,24,.85);border-color:transparent}
.lb-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lb-prev{left:clamp(10px,2.4vw,32px);top:50%;translate:0 -50%}
.lb-next{right:clamp(10px,2.4vw,32px);top:50%;translate:0 -50%}
.lb-close{right:clamp(10px,2.4vw,32px);top:clamp(10px,2.4vw,28px)}
.lb-close:hover{transform:rotate(90deg)}
.lb-count{position:absolute;left:50%;bottom:clamp(14px,2.4vw,28px);translate:-50% 0;color:var(--cream);opacity:.7;font-weight:700;letter-spacing:.2em}
@media (max-width:760px){.lb-prev,.lb-next{top:auto;bottom:16px;translate:none}.lb-prev{left:22%}.lb-next{right:22%}.lb-count{bottom:30px}}
/* room for the cards' soft shadows (and the lower, tilted cards + hover zoom) inside the strip's clipping box; the negative margin keeps the spacing unchanged */
.carousel{padding-block:40px 96px;margin-bottom:-66px}

/* ---------- Stat reel ----------
   No JS / reduced motion: the three stats in a row. With JS (.live): three line-art scenes behind a rolling odometer, looping.
   All motion is CSS (transitions / keyframes on transform & opacity), so it stays smooth; JS only sequences the scenes. */
.stat-reel{position:relative;margin:clamp(40px,5vw,64px) auto 0;max-width:880px}
.reel-stage,.reel-copy,.reel-steps{display:none}
.reel-static{list-style:none;display:flex;justify-content:center;gap:clamp(24px,5vw,72px);flex-wrap:wrap;text-align:center}
.reel-static li{display:grid;justify-items:center;gap:4px}
.stat-reel .pre,.stat-reel .u{font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.stat-reel .pre{color:var(--orange-deep)}
.stat-reel .u{color:var(--ink)}
.stat-reel .n{font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;line-height:1;color:var(--orange)}
.stat-reel.live .reel-static{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stat-reel.live .reel-stage{display:block;position:relative;height:clamp(340px,44vw,480px)}
/* the copy in front: label, odometer, unit */
.stat-reel.live .reel-copy{display:grid;justify-items:center;gap:10px;position:absolute;left:50%;top:calc(clamp(340px,44vw,480px) / 2);translate:-50% -50%;text-align:center;pointer-events:none;
  transition:opacity .6s var(--ease),filter .6s var(--ease),translate .8s var(--ease)}
.stat-reel .reel-copy.away{opacity:0;filter:blur(8px);translate:-50% calc(-50% + 10px)}
.stat-reel .reel-copy .pre,.stat-reel .reel-copy .u{background:rgba(250,240,228,.82);padding:.25em .7em;border-radius:999px}
.odo{display:flex;align-items:flex-start;font-family:var(--font-display);font-size:calc(var(--fs-display) * 1.4);font-weight:700;line-height:1;color:var(--orange);
  height:1.08em;overflow:hidden;filter:drop-shadow(0 8px 22px rgba(250,240,228,.95))}
.odo .col{display:block;width:.64em;text-align:center;height:1.08em;overflow:hidden}
.odo .strip{display:flex;flex-direction:column;transform:translateY(0);transition:transform var(--t,1.8s) cubic-bezier(.16,1,.3,1) var(--dl,0s)}
.odo .strip span{display:block;height:1.08em;line-height:1.08em}
.odo .sep{width:.26em;text-align:center;line-height:1.08em}
.odo .suf{line-height:1.08em;font-style:normal;opacity:0;transition:opacity .6s var(--ease) var(--dl,0s)}
.odo.done .suf{opacity:1}
.stat-reel.live .reel-steps{display:flex;justify-content:center;gap:clamp(14px,3vw,36px);margin-top:8px}
.reel-steps button{display:grid;gap:9px;justify-items:center;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:.45;transition:opacity .4s}
.reel-steps button.on{opacity:1}
.reel-steps i{display:block;width:clamp(56px,9vw,96px);height:2px;border-radius:2px;background:rgba(242,96,24,.2);overflow:hidden;position:relative}
.reel-steps i::after{content:"";position:absolute;inset:0;background:var(--orange);transform-origin:left;transform:scaleX(0)}
.reel-steps button.on i::after{animation:stepfill var(--scene,6s) linear forwards}
.reel-steps button.past i::after{transform:scaleX(1)}
@keyframes stepfill{to{transform:scaleX(1)}}

/* digits stay hidden until they roll in (no "0.000.000" placeholder) */
.odo .col,.odo .sep{opacity:0;transition:opacity .45s var(--ease) var(--dl,0s)}
.odo.done .col,.odo.done .sep{opacity:1}
/* odometer window: lining figures, roomier rows, soft fade at the window edges */
.odo{height:1.3em;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.odo .col{height:1.3em}
.odo .strip span,.odo .sep,.odo .suf{height:1.3em;line-height:1.3em}

/* odometer motion blur: soft while the digits travel fast, crisp as they settle */
.odo .strip{filter:blur(0);transition:transform var(--t,1.8s) cubic-bezier(.16,1,.3,1) var(--dl,0s),filter .6s ease}
.odo.rolling .strip{filter:blur(2.2px)}

/* ---------- stat reel: the morphing icon ---------- */
.reel-stage .morph{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.morph *{vector-effect:non-scaling-stroke}
.morph .s0,.morph .s1,.morph .s2,.morph .h0,.morph .h1{transition:stop-color 1s var(--ease),stop-opacity 1s var(--ease)}
.morph[data-k="0"] .s0{stop-color:#FFF6EE}.morph[data-k="0"] .s1{stop-color:#F9D4BC}.morph[data-k="0"] .s2{stop-color:#F2A47A}
.morph[data-k="1"] .s0{stop-color:#FFE2CF}.morph[data-k="1"] .s1{stop-color:#F7A984}.morph[data-k="1"] .s2{stop-color:#EE7A4E}
.morph[data-k="2"] .s0{stop-color:#FFFFFF}.morph[data-k="2"] .s1{stop-color:#FCEEE3}.morph[data-k="2"] .s2{stop-color:#F6D8C2}
.morph .h0{stop-color:#FFD9BC;stop-opacity:.7}.morph .h1{stop-color:#F7B48C;stop-opacity:.2}
.morph[data-k="1"] .h0{stop-color:#F7A066;stop-opacity:.55}.morph[data-k="1"] .h1{stop-color:#F7B48C;stop-opacity:.18}
.morph .shape{fill:url(#mFill);stroke:rgba(199,70,26,.5);stroke-width:1.4;stroke-linejoin:round;opacity:.92}
.morph[data-k="1"] .shape{opacity:.78}
/* slow, endless breathing (scales up and back, never accumulates) */
.morph .breathe{transform-box:view-box;transform-origin:300px 190px;animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.morph .halo{transform-box:view-box;transform-origin:300px 190px;animation:breathe 5s ease-in-out infinite}
.morph .beat{transform-box:view-box;transform-origin:300px 190px}
/* details: fade in once the shape has formed */
.morph .det{opacity:0;transition:opacity .6s var(--ease)}
.morph.formed[data-k="0"] .det-0,.morph.formed[data-k="1"] .det-1,.morph.formed[data-k="2"] .det-2{opacity:1}
.morph .facet{fill:none;stroke:rgba(199,70,26,.42);stroke-width:1.1;stroke-linejoin:round}
.morph .glint{fill:#FFFFFF;transform-box:fill-box;transform-origin:center;opacity:0;scale:0}
.morph.formed[data-k="0"] .glint{animation:glint 2.2s ease-in-out var(--d) infinite}
@keyframes glint{0%,100%{opacity:0;scale:0;rotate:0deg}18%{opacity:1;scale:1;rotate:45deg}36%{opacity:0;scale:.2;rotate:90deg}}
.morph .hl{fill:none;stroke:rgba(255,255,255,.8);stroke-width:5;stroke-linecap:round}
.morph .tri{fill:rgba(242,96,24,.16);stroke:rgba(242,96,24,.5);stroke-width:1.4;stroke-linejoin:round}
/* heart: two beats once formed, then the rays fade in and turn slowly */
.morph.formed[data-k="1"] .beat{animation:beat .9s cubic-bezier(.3,0,.3,1)}
@keyframes beat{0%{transform:scale(1)}14%{transform:scale(1.08)}28%{transform:scale(.985)}44%{transform:scale(1.12)}62%{transform:scale(.99)}100%{transform:scale(1)}}
.morph .rays{transform-box:view-box;transform-origin:300px 190px;opacity:0;transition:opacity .8s ease;animation:raySpin 40s linear infinite}
.morph.rays-on .rays{opacity:1}
@keyframes raySpin{to{rotate:360deg}}
.morph .ray{stroke:rgba(242,96,24,.3);stroke-width:1.4;stroke-linecap:round}
/* play: a cursor glides in and presses it; the button gives and ripples out */
.morph .cursor{transform-box:view-box;transform-origin:0 0;opacity:0;transform:translate(520px,350px) scale(1.5)}
.morph .cursor path{fill:var(--ink);stroke:var(--cream);stroke-width:1.6;transform-box:fill-box;transform-origin:0 0}
.morph.formed[data-k="2"] .cursor{animation:glide .9s cubic-bezier(.65,0,.35,1) forwards,cursorout .5s ease 1.4s forwards}
.morph.formed[data-k="2"] .cursor path{animation:click .3s var(--ease) .95s}
.morph.formed[data-k="2"] .beat{animation:press .45s var(--ease) 1s}
@keyframes glide{0%{opacity:0;transform:translate(520px,350px) scale(1.5)}25%{opacity:1}100%{opacity:1;transform:translate(350px,232px) scale(1.5)}}
@keyframes cursorout{from{opacity:1;transform:translate(350px,232px) scale(1.5)}to{opacity:0;transform:translate(370px,256px) scale(1.5)}}
@keyframes click{50%{transform:scale(.82)}}
@keyframes press{40%{transform:scale(.93)}100%{transform:scale(1)}}
.morph .ripple{fill:none;stroke:rgba(242,96,24,.5);stroke-width:1.4;opacity:0;transform-box:view-box;transform-origin:300px 190px}
.morph.formed[data-k="2"] .r1{animation:ripple 2s cubic-bezier(.16,1,.3,1) 1.05s infinite}
.morph.formed[data-k="2"] .r2{animation:ripple 2s cubic-bezier(.16,1,.3,1) 2.05s infinite}
@keyframes ripple{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@media (prefers-reduced-motion:reduce){.morph .breathe,.morph .halo,.morph .rays{animation:none}}

/* diamond: a diagonal sheen sweeps across right after it forms (before the number), then again mid-scene; brighter glints */
.morph .sheen{transform-box:view-box;opacity:0;transform:translateX(-120px) skewX(-20deg)}
.morph.formed[data-k="0"] .sheen{animation:mSheen .8s cubic-bezier(.45,0,.25,1) .05s forwards,mSheen .8s cubic-bezier(.45,0,.25,1) 2.1s forwards}
@keyframes mSheen{0%{opacity:0;transform:translateX(-120px) skewX(-20deg)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(380px) skewX(-20deg)}}
.morph .glint{fill:#FFFDF8}
/* diamond contrast: slightly deeper facet tones so the white sheen and glints read; crisp outlined glints */
.morph[data-k="0"] .s0{stop-color:#FBE2CF}.morph[data-k="0"] .s1{stop-color:#F4BD9A}.morph[data-k="0"] .s2{stop-color:#EC946A}
.morph .glint{fill:#FFFFFF;stroke:#F26018;stroke-width:1.2;stroke-linejoin:round}

/* glints: a quick flash in and out of existence, one at a time, with calm in between */
.morph.formed[data-k="0"] .glint{animation:flash 2.4s cubic-bezier(.3,0,.3,1) var(--d) infinite}
@keyframes flash{0%{opacity:0;scale:0;rotate:-20deg}7%{opacity:1;scale:1;rotate:0deg}16%{opacity:0;scale:.15;rotate:25deg}100%{opacity:0;scale:0}}
/* carousel now sits right under the section title */
.gallery .carousel{margin-top:clamp(20px,2.6vw,34px)}
.gallery .carousel + .wrap .gallery-copy{margin-top:clamp(12px,2vw,24px)}

/* more air between the photo strip and the copy below it */
.gallery .carousel + .wrap .gallery-copy{margin-top:clamp(40px,5vw,64px)}
/* ---------- WIN map: Europe as fine dots, the five cities, routes from București with travelling sparks ---------- */
.win-map{margin:clamp(22px,3vw,36px) auto clamp(18px,2.6vw,30px);max-width:760px}
.win-map .europe{display:block;width:100%;height:auto;overflow:visible;
  -webkit-mask-image:radial-gradient(ellipse 60% 62% at 55% 52%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 60% 62% at 55% 52%,#000 55%,transparent 100%)}
.win-map .land{fill:none;stroke:rgba(242,96,24,.32);stroke-width:2.4;stroke-linecap:round;opacity:0;transition:opacity 1.4s var(--ease)}
.win-map.in .land{opacity:1}
.win-map .route{fill:none;stroke:rgba(242,96,24,.55);stroke-width:1.2;stroke-dasharray:2 3;opacity:0;transition:opacity .9s var(--ease) calc(1.1s + var(--i) * .25s)}
.win-map.in .route{opacity:1}
.win-map .spark{fill:none;stroke:#F26018;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:6 100;stroke-dashoffset:6;opacity:0;filter:drop-shadow(0 0 3px rgba(242,96,24,.8))}
.win-map.in .spark{animation:travel 2.8s cubic-bezier(.45,0,.3,1) calc(1.8s + var(--i) * .7s) infinite}
@keyframes travel{0%{stroke-dashoffset:6;opacity:0}8%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
.win-map .pin{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .6s var(--ease) calc(.6s + var(--i) * .22s)}
.win-map.in .pin{opacity:1}
.win-map .dot{fill:#F26018;stroke:#FAF0E4;stroke-width:1.5}
.win-map .pulse{fill:rgba(242,96,24,.28);transform-box:fill-box;transform-origin:center}
.win-map.in .pulse{animation:pinPulse 2.6s ease-out calc(1s + var(--i) * .22s) infinite}
@keyframes pinPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.4);opacity:0}}
.win-map text{font-family:var(--font-text);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;fill:var(--ink)}
@media (max-width:620px){.win-map text{font-size:15px}}
@media (prefers-reduced-motion:reduce){.win-map .spark,.win-map .pulse{animation:none}}

/* map refinements: no CSS edge mask (the SVG mask fades the dots to nothing on every side); stronger dots around the cities;
   sparks travel both ways along every route */
.win-map .europe{-webkit-mask-image:none;mask-image:none}
.win-map .land{fill:none;stroke:rgba(242,96,24,.36);stroke-width:2.4;stroke-linecap:round}
.win-map .land.near{stroke:rgba(242,96,24,.62)}
.win-map.in .spark{animation:travel 3s cubic-bezier(.45,0,.3,1) calc(1.8s + var(--i) * .45s + var(--o,0s)) infinite}
.win-map.in .spark.back{animation-name:travelBack}
@keyframes travelBack{0%{stroke-dashoffset:-100;opacity:0}8%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:6;opacity:0}}
/* ---------- ticket cards: wider, calmer reading ----------
   the three cards break out of the 992px text column (up to ~1180px), with more inner padding;
   the header (icon, name, price, who it's for) stays centred, the benefit list reads left-aligned with tidy check bullets */
@media (min-width:1001px){
  .tickets .tiers{width:min(1180px,calc(100vw - 2 * var(--gutter)));position:relative;left:50%;translate:-50% 0;gap:clamp(18px,2vw,28px)}
}
.tier{padding:clamp(40px,3.6vw,50px) clamp(24px,2.8vw,40px) clamp(30px,3vw,38px);gap:16px}
.tier .for{max-width:40ch}
.tier .plus{align-self:stretch;text-align:left;margin-top:4px}
.ticks{justify-items:stretch;text-align:left;align-self:stretch;gap:12px;margin-bottom:8px}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;max-width:none}
.ticks li>svg{margin:2px 0 0;vertical-align:baseline}

/* the photo strip's call to action sits right under it */
.gallery .gallery-cta{margin-top:clamp(4px,1vw,12px);display:flex;justify-content:center}
.gallery .gallery-cta{margin-top:clamp(10px,1.6vw,20px);margin-bottom:clamp(44px,5.4vw,70px)}
.gallery .carousel + .wrap .gallery-copy{margin-top:0}
.gallery .gallery-cta{margin-top:clamp(28px,3.4vw,42px)}

/* Ultra VIP without the seat row: the button still sits at the card's foot */
.tier.ultra .btn{margin-top:auto}
/* the closing line sits close under the stat animation */
.gallery .stat-reel{margin-bottom:calc(-1 * clamp(26px,3.6vw,48px))}
.gallery .stat-reel ~ .closing-line,.gallery .wrap .closing-line{margin-top:0}

/* the closing line now follows the paragraph above the stat animation */
.gallery .closing-line.in-copy{margin-top:clamp(22px,2.8vw,34px)}
.gallery .stat-reel{margin-bottom:0}

/* =====================================================================
   TYPOGRAPHY & COLOUR SYSTEM — enforced (overrides every earlier outlier)
   Title    · Playfair Display 700, upright · --fs-display
   Subtitle · Playfair Display 700, upright · --fs-lead
   Body     · DM Sans (400 / 700)           · --fs-body   (labels, buttons, notes, kickers too)
   Colour   · ink on light, cream on dark, ONE accent: --orange (#F26018). No pale oranges, no gradient text, no grey text.
   The only italic left on the page is the story pill ("Every decision… / move that brought you here"), a brand moment.
   ===================================================================== */
body *:not(.ph):not(.ev){font-style:normal}
.poem .ph,.poem.final .ev{font-style:italic}

/* body: every DM Sans line at body size */
.lead,.lead.serif,.hero .hero-sub,.intro-copy,.tier .for,.ticks li,
.hero .video-frame .caption .label{font-family:var(--font-text);font-size:var(--fs-body);font-weight:400;line-height:1.65;letter-spacing:normal}
.hero .video-frame .caption .label{font-weight:700;letter-spacing:.28em}
/* kickers that introduce a list ("Primești tot ce include…", "Partenerii care confirmă primii…"): body, bold */
.tier .plus,.level .plus,.early-head .lead{font-family:var(--font-text);font-size:var(--fs-body);font-weight:700;line-height:1.6;color:inherit}

/* subtitles: Playfair, bold, upright, subtitle size */
h3,h4,.closing-line,.evening .more,.dress-copy .more,.why .closing,.final .final-copy .duo,.final .final-copy .glow-txt,
.p-promise p,.dress-ans p,.duo2 figcaption,.sp-others,.sp-you,.letter .see,.letter .sign b,.next-sub,.sign-off .regards,
.video-frame .caption .display,.partners .partner-copy .big,.story .text .big{
  font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;letter-spacing:normal}
.closing-line em,.final .final-line em,.know .know-lead em{font-weight:inherit;color:var(--orange)}
.level h3 span{font-family:var(--font-display);font-size:inherit;font-weight:700;color:var(--orange)}

/* numerals used as markers: Playfair, upright, the one orange */
.unum,.rn,.rung .rn,.gain .gn,.g2n,.moment .mn,.arow .num,.evening .num,.step .n,.stat .n i{font-family:var(--font-display);font-style:normal;font-weight:700;color:var(--orange)}

/* one orange: no pale peach / gradient text anywhere */
.display em,.unfold-sec .display em,.partners2 .display em,.tier.ultra .price b,.unfold-sec .lead strong,.early-head .lead,.unum,
.tier.ultra strong,.tier.ultra .price{background:none!important;-webkit-text-fill-color:currentColor;animation:none}
.unfold-sec .display em,.partners2 .display em,.tier.ultra .price b,.tier.ultra .price,.tier.ultra strong,.unfold-sec .lead strong,.unum{color:var(--orange)!important}
.on-orange .display em{color:var(--cream)}
.tier.ultra h3,.tier.ultra .plus{color:var(--cream)}
.tier.ultra .ticks li>svg{stroke:var(--orange);background:rgba(242,96,24,.16)}
/* partner levels: metals stay in the trophy art and borders, never in text */
.level .price{color:var(--ink)}
.level.diamond .price,.level.diamond .plus{color:var(--cream)}
.lv-tag{color:var(--orange)}
/* system, pass 2 — weights: DM Sans 400 / 700 only; Playfair 700 only */
.label,.label.pill,.date,.date span,.cells .unit,.video-frame .caption .label,.jlabel,.lv-tag,.price span,.stat-reel .pre,.stat-reel .u{font-weight:700!important}
.small-note,.meta span{font-weight:400!important}
p strong,li strong,.lead strong{font-weight:700!important}
.cells .num,.marquee .item em,.ucard h3,.g2 h4,.p-promise p,.p-promise strong,.level .price b,.sold span,.sub-title2,h3,h4,.closing-line,.glow-txt,.sp-you,.sp-others{font-weight:700!important}
.sold span{font-family:var(--font-display);font-size:var(--fs-lead)}
/* colour: one orange; true ink / cream for text */
.hero-text strong,.stage-note,.stat-reel .pre,.tier .price span,.jlabel,.label,.label.center,.sub-title2 em,.p-promise strong,
.level.diamond .lv-tag,.lv-tag,.glow-txt,.sp-you,.dress-copy .more{color:var(--orange)!important;background:none!important;-webkit-text-fill-color:currentColor!important;animation:none!important}
.on-orange .label,.on-orange .label.center{color:var(--ink)!important}
.ucard p,.p-copy p,.g2 p,.g2 h4,.sp-others,.limited{color:var(--cream)!important}
.on-dark .label,.on-dark .label.center{color:var(--orange)!important}
/* system, pass 3 */
.story .text .big,.glow-txt,.final .final-copy .glow-txt{font-style:normal!important}
.unum{font-size:var(--fs-lead)!important}
/* system, pass 4 — form & thank-you pages */
.form-card .back,.counter b,label .o small,label .only-ticket,label b.only-ticket span,.fine strong,.letter .sign span,.lead strong,.next-sub,.regards{color:var(--orange)!important}
.on-dark .lead strong{color:var(--orange)!important}
.counter b{font-weight:700!important}
label .o small,label .only-ticket,label b.only-ticket span{font-weight:700!important}
.form-card .fine{font-weight:400!important}
/* titles never shrink to fit one line: same title size everywhere, wrapping naturally */
.display.one-row{font-size:var(--fs-display)!important;white-space:normal!important;max-width:22ch;margin-inline:auto}

/* ---------- Partner levels: four individual showcases ----------
   one level per row, climbing in prestige; the trophy stands in its own lit niche (a spotlight tinted in the level's metal,
   a pool of light at its feet) beside the details; trophy side alternates for an editorial rhythm */
.levels{display:grid;grid-template-columns:1fr;gap:clamp(28px,3.6vw,48px)}
@media (min-width:861px){.levels{width:min(1100px,calc(100vw - 2 * var(--gutter)));position:relative;left:50%;translate:-50% 0}}
.level{display:grid;grid-template-columns:minmax(260px,38%) 1fr;
  grid-template-areas:"stage tag" "stage name" "stage price" "stage for" "stage plus" "stage list";
  grid-template-rows:auto auto auto auto auto 1fr;align-items:start;align-content:center;column-gap:clamp(30px,4.4vw,64px);row-gap:12px;
  text-align:left;padding:clamp(32px,3.8vw,52px) clamp(28px,4vw,56px)}
.level-wrap:nth-child(even) .level{grid-template-columns:1fr minmax(260px,38%);
  grid-template-areas:"tag stage" "name stage" "price stage" "for stage" "plus stage" "list stage"}
.level .lv-stage{grid-area:stage;align-self:stretch;position:relative;display:grid;place-items:center;min-height:clamp(320px,30vw,400px);isolation:isolate}
.level .lv-stage .arch{width:min(270px,90%);margin:0;position:relative;z-index:1}
.level .lv-beam{position:absolute;left:50%;top:calc(-1 * clamp(32px,3.8vw,52px));width:150%;height:calc(100% + clamp(32px,3.8vw,52px));translate:-50% 0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--t1) 70%,#fff 30%) 0%,color-mix(in srgb,var(--t1) 30%,transparent) 50%,transparent 92%);
  clip-path:polygon(43% 0,57% 0,98% 100%,2% 100%);opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
  animation:lvBeam 5s ease-in-out infinite}
@keyframes lvBeam{0%,100%{opacity:.42}50%{opacity:.6}}
.level .lv-floor{position:absolute;left:50%;bottom:4%;width:85%;height:46px;translate:-50% 0;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--t1) 55%,transparent),transparent)}
.level.diamond .lv-beam{opacity:.6}
.level .lv-tag{grid-area:tag;justify-self:start}
.level h3{grid-area:name;margin-top:4px}
.level .price{grid-area:price}
.level .for{grid-area:for;max-width:none}
.level .plus{grid-area:plus;text-align:left}
.level .ticks{grid-area:list;display:grid;grid-template-columns:1fr 1fr;gap:12px clamp(18px,2.4vw,30px);align-self:start}
.level:hover{transform:none}
@media (max-width:860px){
  .level,.level-wrap:nth-child(even) .level{grid-template-columns:1fr;grid-template-areas:"stage" "tag" "name" "price" "for" "plus" "list";grid-template-rows:auto;text-align:center}
  .level .lv-stage{min-height:280px}
  .level .lv-tag{justify-self:center}
  .level .ticks{grid-template-columns:1fr;text-align:left}
  .level .plus{text-align:center}
}
@media (prefers-reduced-motion:reduce){.level .lv-beam{animation:none}}

/* ---------- Build your own experience: a champagne-lit section, the experiences illustrated ---------- */
.build-sec{position:relative;overflow:clip;text-align:center;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,#FFF6EC 0%,rgba(255,246,236,0) 70%),linear-gradient(180deg,#FBE6D2 0%,#F7D4B6 100%)}
.build-sec .build{max-width:780px;margin-inline:auto}
.build-sec .lead{margin:1em auto 0;max-width:58ch;color:var(--ink)}
.build-sec .lead strong{color:var(--orange)}
/* soft golden lights drifting, like an evening party out of focus */
.bokeh{position:absolute;inset:0;pointer-events:none;z-index:0}
.bokeh i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,214,170,.75),rgba(255,196,140,0) 70%);animation:bokeh 14s ease-in-out infinite}
.bokeh i:nth-child(1){width:180px;height:180px;left:6%;top:14%;animation-delay:0s}
.bokeh i:nth-child(2){width:120px;height:120px;left:82%;top:10%;animation-delay:-3s}
.bokeh i:nth-child(3){width:240px;height:240px;left:70%;top:58%;animation-delay:-6s;opacity:.7}
.bokeh i:nth-child(4){width:90px;height:90px;left:30%;top:70%;animation-delay:-2s}
.bokeh i:nth-child(5){width:140px;height:140px;left:48%;top:4%;animation-delay:-9s;opacity:.6}
.bokeh i:nth-child(6){width:70px;height:70px;left:14%;top:80%;animation-delay:-11s}
.bokeh i:nth-child(7){width:110px;height:110px;left:90%;top:76%;animation-delay:-5s}
@keyframes bokeh{0%,100%{transform:translate(0,0) scale(1);opacity:.55}50%{transform:translate(18px,-22px) scale(1.12);opacity:.9}}
.build-sec .wrap{position:relative;z-index:1}
/* the five experiences */
.xp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(34px,4.4vw,56px)}
@media (min-width:1001px){.xp-grid{width:min(1100px,calc(100vw - 2 * var(--gutter)));position:relative;left:50%;translate:-50% 0}}
.xp{margin:0;display:grid;justify-items:center;gap:12px;padding:clamp(20px,2.2vw,28px) 14px clamp(18px,2vw,24px);border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,248,240,.5));border:1px solid rgba(242,96,24,.22);
  box-shadow:0 26px 50px -34px rgba(160,60,10,.55),inset 0 1px 0 #fff;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.xp:hover{transform:translateY(-6px);box-shadow:0 36px 60px -34px rgba(160,60,10,.7),inset 0 1px 0 #fff}
.xp.reveal{transition-delay:calc(var(--k) * 90ms)}
.xp svg{width:clamp(84px,7.4vw,108px);height:auto;overflow:visible}
.xp figcaption{font-weight:700;color:var(--ink);line-height:1.35}
.xp .ln,.xp .rope,.xp .grid{fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.xp .grid{stroke-width:1;opacity:.6}
.xp .liq{fill:rgba(242,96,24,.22)}
.xp .carpet{fill:rgba(242,96,24,.32)}
.xp .rope{stroke-width:2.2}
.xp .spk,.xp .flash path,.xp .glint path{fill:var(--orange);transform-box:fill-box;transform-origin:center}
.xp .bub circle,.xp .mist circle{fill:rgba(242,96,24,.55)}
/* champagne: bubbles rise, the rim sparkles */
.xp-champagne .bub circle{animation:bubble 2.8s ease-in infinite var(--d)}
@keyframes bubble{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-34px);opacity:0}}
.xp .spk{animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2;scale:.6}50%{opacity:1;scale:1.15}}
/* perfume: a soft puff of mist */
.xp-perfume .mist circle{transform-box:fill-box;transform-origin:center;animation:mist 3s ease-out infinite var(--d)}
@keyframes mist{0%,30%{opacity:0;scale:.4;transform:translate(0,0)}45%{opacity:.85}100%{opacity:0;scale:1.6;transform:translate(-8px,-6px)}}
/* red carpet: camera flashes */
.xp-carpet .flash path{opacity:0;animation:flash 2.6s ease-out infinite var(--d)}
@keyframes flash{0%,100%{opacity:0;scale:.3}6%{opacity:1;scale:1.25}18%{opacity:0;scale:.7}}
/* after party: the disco ball turns slowly and glints */
.xp-disco .ball .grid{animation:discoTurn 6s linear infinite}
@keyframes discoTurn{0%{transform:translateX(0)}100%{transform:translateX(-6px)}}
.xp-disco .glint path{opacity:0;animation:flash 2.2s ease-out infinite var(--d)}
.xp-disco .rays path{fill:none;stroke:var(--orange);stroke-width:1.4;stroke-linecap:round;opacity:.5;animation:twinkle 2s ease-in-out infinite}
/* gift: the bow gives a little lift */
.xp-gift .bow{transform-box:fill-box;transform-origin:50% 100%;animation:bow 3.2s ease-in-out infinite}
@keyframes bow{0%,100%{transform:none}50%{transform:translateY(-2px) scale(1.04)}}
.xp-price{margin-top:clamp(22px,2.8vw,32px)}
.xp-price span{display:inline-block;padding:.6em 1.3em;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(242,96,24,.35);font-weight:700;letter-spacing:.06em;color:var(--ink)}
.xp-price b{color:var(--orange)}
@media (max-width:860px){.xp-grid{grid-template-columns:repeat(2,1fr)}.xp:last-child{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.bokeh i,.xp *{animation:none!important}}
/* the dark section that follows now starts with the ladder */
.partner-close .early-head{margin-top:0}

/* disco ball, refined: facets clipped to the ball, the meridians travel round (a turning ball), crisp glints flash on the facets */
.xp-disco .ball-fill{fill:rgba(242,96,24,.12)}
.xp-disco .grid{fill:none;stroke:var(--orange);stroke-width:1;opacity:.55}
.xp-disco .lon{animation:discoSpin 4s linear infinite}
@keyframes discoSpin{from{transform:translateX(0)}to{transform:translateX(-14px)}}
.xp-disco .ball .grid,.xp-disco .rays{animation:none}
.xp-disco .glint path{fill:#fff;stroke:var(--orange);stroke-width:1.2;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;opacity:0;scale:0;
  animation:discoGlint 2.4s cubic-bezier(.3,0,.3,1) infinite var(--d)}
@keyframes discoGlint{0%{opacity:0;scale:0;rotate:-20deg}7%{opacity:1;scale:1;rotate:0deg}16%{opacity:0;scale:.15;rotate:25deg}100%{opacity:0;scale:0}}

/* the five experience icons as one family: same line weight on screen (independent of each drawing's scale),
   same fill strength, same overall size */
.xp svg{width:clamp(88px,7.6vw,108px)!important;height:auto}
.xp svg *{vector-effect:non-scaling-stroke}
.xp .ln,.xp .rope{stroke-width:1.6}
.xp-disco .grid{stroke-width:1;opacity:.55}
.xp .liq,.xp .carpet,.xp-disco .ball-fill{fill:rgba(242,96,24,.2)}
.xp-grid{align-items:stretch}

/* tighter framing: the map and the stat stage start where their visible art starts */
.win-map{margin-top:clamp(10px,1.6vw,20px);margin-bottom:clamp(6px,1.2vw,14px)}
.win-map .europe{overflow:visible}
.stat-reel.live .reel-stage{height:clamp(300px,38vw,420px)}
.stat-reel.live .reel-copy{top:calc(clamp(300px,38vw,420px) / 2)}
.stat-reel{margin-top:clamp(18px,2.4vw,30px)}
/* the stat stage takes the drawing's own proportions, so there is never empty space above the icon; the copy sits centred on it */
.stat-reel.live{display:grid;grid-template-areas:"stage"}
.stat-reel.live .reel-stage{grid-area:stage;height:auto;aspect-ratio:600/290;max-height:420px;width:100%}
.stat-reel.live .reel-copy{grid-area:stage;position:relative;left:auto;top:auto;translate:none;align-self:center;justify-self:center;z-index:2}
.stat-reel .reel-copy.away{translate:0 10px}
/* text on orange surfaces is ink (never orange on orange) */
.tier.vip .price span,.tier.vip .label,.tier.vip .plus,.tier.vip strong,.tier.vip .ticks .bonus strong,
.on-orange .stage-note,.on-orange .jlabel,.on-orange .lead strong,.on-orange p strong,.on-orange .closing-line em{color:var(--ink)!important}
.tier.vip .price b{color:var(--cream)!important}

/* ladder without numbers: shorter steps that still climb; each grows a little on hover, from its base */
.rung{min-height:calc(150px + var(--k) * 30px);gap:14px;padding:26px 16px 24px;transform-origin:50% 100%;
  transition:opacity .7s ease calc(var(--k) * .14s),transform 1.1s cubic-bezier(.34,1.3,.64,1) calc(var(--k) * .14s),scale .5s var(--ease),box-shadow .5s var(--ease)}
.rung:hover{scale:1.05;box-shadow:0 30px 60px -30px rgba(242,96,24,.75)}
.rung:last-child:hover{box-shadow:0 0 70px -16px rgba(242,96,24,.85)}
@media (max-width:860px){.rung{grid-template-columns:auto 1fr;min-height:0;transform-origin:0 50%}.rung:hover{scale:1.02}}
.rung.reveal,.rung.reveal.in{transition:opacity .7s ease calc(var(--k) * .14s),transform 1.1s cubic-bezier(.34,1.3,.64,1) calc(var(--k) * .14s),scale .5s var(--ease),box-shadow .5s var(--ease)}
/* steps grow taller on hover, like a bar in a chart rising (desktop); no overall scaling */
.rung:hover{scale:none}
@media (min-width:861px){
  .rung.reveal,.rung.reveal.in{transition:opacity .7s ease calc(var(--k) * .14s),transform 1.1s cubic-bezier(.34,1.3,.64,1) calc(var(--k) * .14s),min-height .6s cubic-bezier(.22,1,.36,1),box-shadow .5s var(--ease)}
  .rung:hover{min-height:calc(150px + var(--k) * 30px + 34px)}
}
@media (max-width:860px){.rung:hover{scale:none}}

/* finale: one calm rhythm — captions → the limited line → the headline → the button → the date line */
.final .limited{margin-top:clamp(40px,4.6vw,56px)}
.final .final-line{margin-top:clamp(14px,1.8vw,22px)}
.final .cta-stack{margin-top:clamp(26px,3vw,36px)}
.final .date{margin-top:clamp(24px,2.8vw,32px);padding-top:clamp(16px,2vw,22px)}

/* ---------- the closing call (its own orange section) ---------- */
.final-cta{text-align:center;background:radial-gradient(ellipse 70% 80% at 50% 0%,#F7843F 0%,var(--orange) 55%,#DC5214 100%)}
.final-cta .wrap{position:relative;z-index:1}
.final-cta .limited{margin:0 auto;max-width:40ch;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.7;color:var(--ink)!important}
.final-cta .final-line{margin-top:clamp(14px,1.8vw,22px);font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;line-height:1.15;color:var(--cream)}
.final-cta .final-line em{display:block;color:var(--ink)!important}
.final-cta .cta-stack{display:grid;justify-items:center;gap:0;margin-top:clamp(26px,3vw,36px)}
.final-cta .date{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.6em 1.4em;margin-top:clamp(24px,2.8vw,32px);padding-top:clamp(16px,2vw,22px);
  border-top:1px solid rgba(26,10,2,.22);min-width:min(560px,100%);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.final-cta .date i{width:5px;height:5px;border-radius:50%;background:var(--cream);flex:none}
@media (max-width:760px){.final-cta .date{flex-direction:column;gap:.2em;letter-spacing:.14em;min-width:0}.final-cta .date i{display:none}}
.section.orange.final-cta{background:radial-gradient(ellipse 70% 80% at 50% 0%,#F7843F 0%,var(--orange) 55%,#DC5214 100%)}
.section.final-cta{padding-block:clamp(64px,7.4vw,104px)}

/* ---------- finale photo, first state: a social post that went far ---------- */
.sp-base{filter:saturate(.7) brightness(.86)!important;transform:none!important}
.sp-post{position:absolute;inset:0;z-index:4;pointer-events:none;color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  opacity:clamp(0,calc(1 - var(--p,0) * 1.7),1);transition:opacity .3s linear}
.pp-top{display:flex;align-items:center;gap:10px;padding:clamp(10px,1.4vw,16px) clamp(12px,1.8vw,20px);background:linear-gradient(180deg,rgba(26,10,2,.55),rgba(26,10,2,0))}
.pp-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 2px var(--orange),0 0 0 4px rgba(255,255,255,.9)}
.pp-av img{width:24px;height:auto}
.pp-name{display:grid;line-height:1.2}
.pp-name b{font-weight:700}
.pp-name small{font-size:var(--fs-body);font-weight:400;opacity:.85}
.pp-more{margin-left:auto;display:flex;gap:3px}
.pp-more i{width:4px;height:4px;border-radius:50%;background:#fff}
.pp-bottom{padding:clamp(10px,1.4vw,16px) clamp(12px,1.8vw,20px) clamp(12px,1.6vw,18px);background:linear-gradient(0deg,rgba(26,10,2,.78),rgba(26,10,2,0));display:grid;gap:4px}
.pp-actions{display:flex;align-items:center;gap:14px}
.pp-actions svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.pp-like svg{fill:var(--orange);stroke:var(--orange);animation:likePop 2.4s ease-in-out infinite}
@keyframes likePop{0%,100%{transform:scale(1)}10%{transform:scale(1.28)}20%{transform:scale(.94)}30%{transform:scale(1)}}
.pp-like svg,.pp-actions svg{transform-box:fill-box;transform-origin:center}
.pp-save{margin-left:auto}
.pp-likes,.pp-cap,.pp-com{margin:0;line-height:1.4}
.pp-likes b,.pp-cap b{font-weight:700}
.pp-com{opacity:.8}
/* hearts floating up from the like button, notification bubbles popping in */
.pp-floats{position:absolute;left:clamp(14px,1.9vw,22px);bottom:clamp(96px,10vw,120px);width:30px;height:120px}
.pp-floats i{position:absolute;left:0;bottom:0;width:22px;height:22px;opacity:0;animation:floatHeart 2.6s ease-out infinite var(--d)}
.pp-floats svg{width:100%;height:100%;fill:var(--orange);stroke:#fff;stroke-width:1.2}
@keyframes floatHeart{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),-110px) scale(1.15)}}
.pp-bubbles{position:absolute;right:clamp(12px,1.8vw,20px);top:clamp(56px,6vw,72px);display:grid;gap:8px;justify-items:end}
.pb{display:inline-flex;align-items:center;gap:6px;padding:.4em .85em;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 12px 24px -10px rgba(0,0,0,.6);
  opacity:0;transform:translateY(8px) scale(.9);animation:bubbleIn 4.8s cubic-bezier(.34,1.4,.64,1) infinite var(--d)}
.pb svg{width:16px;height:16px;fill:var(--orange);stroke:var(--orange);stroke-width:1.4;stroke-linejoin:round}
.pb b{font-weight:700}
@keyframes bubbleIn{0%{opacity:0;transform:translateY(8px) scale(.9)}8%,62%{opacity:1;transform:none}74%,100%{opacity:0;transform:translateY(-6px) scale(.96)}}
@media (max-width:760px){.pp-cap,.pp-com{display:none}.pp-bubbles{top:auto;bottom:96px}.pp-floats{bottom:70px}}
@media (prefers-reduced-motion:reduce){.pp-like svg,.pp-floats i,.pb{animation:none}.pb{opacity:1;transform:none}}
.pp-av{overflow:hidden}.pp-av img{width:44px;max-width:none;transform:translateY(1px)}

/* the two captions share one centred spot under the photo and morph into each other with the colour sweep (--p from main.js) */
.sp-caps{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:"cap";justify-items:center;text-align:center;margin-top:clamp(18px,2.4vw,26px)}
.sp-caps .sp-others,.sp-caps .sp-you{grid-area:cap;justify-self:center!important;text-align:center!important;max-width:30ch!important;margin:0}
.sp-caps .sp-others{opacity:clamp(0,calc(1 - (var(--p,0) - .3) * 3.2),1);filter:blur(calc(clamp(0,(var(--p,0) - .3) * 3.2,1) * 8px));
  transform:translateY(calc(clamp(0,(var(--p,0) - .3) * 3.2,1) * -10px))}
.sp-caps .sp-you{opacity:clamp(0,calc((var(--p,0) - .45) * 3.2),1);filter:blur(calc((1 - clamp(0,(var(--p,0) - .45) * 3.2,1)) * 8px));
  transform:translateY(calc((1 - clamp(0,(var(--p,0) - .45) * 3.2,1)) * 10px))}
.pp-bottom{gap:0}
.sp-caps{align-items:center}
/* first state: the photo in black & white under the post interface; colour arrives with the sweep */
.sp-base{filter:grayscale(1) contrast(1.05) brightness(.9)!important}
/* the morphing captions under the finale photo at title size */
.sp-caps .sp-others,.sp-caps .sp-you{font-family:var(--font-display)!important;font-size:var(--fs-display)!important;font-weight:700!important;line-height:1.12;max-width:22ch!important}
.sp-caps{margin-top:clamp(22px,2.8vw,34px)}

/* ---------- dress code + surprises, restaged ---------- */
.dc-row{display:grid;grid-template-columns:minmax(240px,.8fr) 1.2fr;gap:clamp(30px,5vw,80px);align-items:center;margin-top:clamp(44px,5.6vw,72px);text-align:left}
.dc-stage{position:relative;display:grid;place-items:center;min-height:clamp(380px,36vw,480px);isolation:isolate}
.dc-stage svg{position:relative;z-index:1;width:clamp(170px,16vw,220px);height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.dc-beam{position:absolute;left:50%;top:-10%;width:150%;height:110%;translate:-50% 0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,214,170,.32) 0%,rgba(242,96,24,.12) 55%,transparent 92%);clip-path:polygon(42% 0,58% 0,96% 100%,4% 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);animation:lvBeam 5s ease-in-out infinite}
.dc-floor{position:absolute;left:50%;bottom:5%;width:80%;height:40px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(242,96,24,.55),transparent);z-index:0}
.dc-copy{display:grid;justify-items:start;gap:14px}
.dc-title{margin:0;color:var(--cream);max-width:20ch}
.dc-title em{color:var(--orange)}
.dc-swatches{display:flex;gap:12px;margin-top:4px}
.sw{position:relative;width:46px;height:46px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px rgba(250,240,228,.55),0 10px 22px -10px rgba(0,0,0,.8)}
.sw.black{background:radial-gradient(circle at 35% 30%,#3A1C0C,#0A0400 70%)}
.sw.orange{background:radial-gradient(circle at 35% 30%,#FF9A5C,var(--orange) 55%,#C7461A)}
.sw i{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);animation:swSheen 3.6s ease-in-out infinite}
.sw.orange i{animation-delay:.6s}
@keyframes swSheen{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.dc-surprise{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:clamp(14px,2vw,22px);padding-top:clamp(16px,2vw,22px);border-top:1px solid rgba(242,96,24,.3);max-width:46ch}
.dc-surprise p{margin:0;color:var(--cream);line-height:1.6}
.dc-env{width:54px;height:auto;overflow:visible}
.dc-env rect,.dc-env path:not(.seal):not(.seal-mark){fill:none;stroke:var(--cream);stroke-width:1.4;stroke-linejoin:round;opacity:.85}
.dc-env .seal{fill:var(--orange)}
.dc-env .seal-mark{fill:#FFE2C4;transform-box:fill-box;transform-origin:center;animation:twinkle 2.6s ease-in-out infinite}
.dc-copy .cta{margin-top:clamp(12px,2vw,20px);justify-content:flex-start;display:flex}
@media (max-width:860px){
  .dc-row{grid-template-columns:1fr;text-align:center;justify-items:center}
  .dc-stage{min-height:320px}
  .dc-copy{justify-items:center}
  .dc-surprise{text-align:left}
  .dc-copy .cta{justify-content:center}
}
@media (prefers-reduced-motion:reduce){.dc-beam,.sw i,.dc-env .seal-mark{animation:none}}
/* the gown keeps its gentle sway and ribbon motion; sparkles around it */
.dc-stage svg{animation:gownsway 7s ease-in-out infinite;transform-origin:50% 12%}
.dc-stage .tail{transform-box:fill-box;transform-origin:50% 0;animation:ribbon 3.4s ease-in-out infinite}
.dc-stage .sparkle{position:absolute;z-index:2;width:14px;height:14px;background:#FFD2B0;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:twinkle2 2.6s ease-in-out infinite}
.dc-stage .s1{left:22%;top:22%}.dc-stage .s2{right:20%;top:44%;animation-delay:-.9s;scale:.7}.dc-stage .s3{left:28%;bottom:20%;animation-delay:-1.7s;scale:.85}
@media (prefers-reduced-motion:reduce){.dc-stage svg,.dc-stage .tail,.dc-stage .sparkle{animation:none}}
.dc-title{max-width:28ch}
.dc-surprise{width:100%;max-width:min(46ch,100%)}
.dc-surprise p{min-width:0;overflow-wrap:break-word}
@media (max-width:860px){.dc-surprise{grid-template-columns:1fr;justify-items:center;text-align:center}}
.dc-row>*{min-width:0;max-width:100%}
.dc-copy{width:100%}
.dc-copy>*{max-width:100%}
@media (max-width:860px){.dc-row{grid-template-columns:minmax(0,1fr)}}

/* Pill label: solid white fill (restored after the one-orange pass cleared label backgrounds) */
.hero .label.pill,.thanks .label.pill{background:#fff!important;border-color:rgba(242,96,24,.55);box-shadow:0 6px 18px rgba(26,10,2,.12)}

/* Hero (desktop): content sits higher — logo near the top, tighter logo → pill → title rhythm */
@media (min-width:761px){
  .hero.tall .intro{margin-top:calc(var(--vh-h) * -1 + clamp(56px,8vh,96px));gap:20px}
  .hero.tall .hero-mark{margin-bottom:clamp(6px,1.4vh,16px)}
  .hero.tall .hero-logo{height:clamp(130px,11vw,168px)}
}
/* Hero (desktop): with the copy raised, the cream wash starts right under the logo so the title, date and text read clearly;
   the dark band stays only at the top, behind the white logo */
@media (min-width:761px){
  .hero .hero-video .veil{background:
    radial-gradient(ellipse 46% 34% at 50% 60%,rgba(250,240,228,.9) 0%,rgba(250,240,228,.78) 42%,rgba(250,240,228,.4) 72%,rgba(250,240,228,0) 100%),
    linear-gradient(180deg,rgba(250,240,228,0) 0%,rgba(250,240,228,0) 24%,rgba(250,240,228,.32) 31%,rgba(250,240,228,.54) 40%,rgba(250,240,228,.72) 52%,rgba(250,240,228,.9) 68%,var(--cream) 84%),
    linear-gradient(180deg,rgba(26,10,2,.8) 0%,rgba(26,10,2,.66) 15%,rgba(26,10,2,.42) 24%,rgba(26,10,2,.1) 34%,rgba(26,10,2,0) 47%),
    linear-gradient(120deg,rgba(242,96,24,.18),transparent 55%)}
}

/* Video band: the tagline is a title, not a subtitle */
.band-video .caption .display{font-size:var(--fs-display);line-height:1.1}

/* Map: breaks out of the text column so the journey reads big; labels stay body-sized */
.gallery-copy .win-map{width:min(1040px,calc(100vw - 2 * var(--gutter)));max-width:none;position:relative;left:50%;translate:-50% 0;margin-inline:0}
@media (min-width:621px){.win-map text{font-size:8.6px}}

/* Closing lines: balanced rows, never a lone word on the last line */
.closing-line,.closing-line em{text-wrap:balance}

/* Thank-you hero: date line under the welcome (cream on the video, orange dots) */
.ty-hero .date{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35em .9em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);margin:0}
.ty-hero .date i{width:4.8px;height:4.8px;border-radius:50%;background:var(--orange);flex:none}
@media (max-width:760px){.ty-hero .date{flex-direction:column;gap:.15em;letter-spacing:.1em;line-height:1.5}.ty-hero .date i{display:none}}

/* dress code, now staged inside the evening section */
.evening2 .dc-row{margin-top:clamp(56px,6.4vw,88px);padding-top:clamp(40px,5vw,64px);border-top:1px solid rgba(242,96,24,.22)}

/* ---------- Thank-you · "Ce te așteaptă": the menu card of her evening ----------
   One printed card on the table, under a warm light; the six moments are its "courses".
   The card rises into place, then each moment is printed in, one after another. */
.menu-stage{position:relative;display:grid;justify-items:center;margin-top:clamp(36px,4.6vw,60px);padding-block:clamp(10px,2vw,24px)}
.menu-light{position:absolute;left:50%;top:50%;width:min(1100px,160vw);height:130%;translate:-50% -50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(242,96,24,.26),rgba(242,96,24,.1) 45%,rgba(242,96,24,0) 100%);
  animation:menuBreath 7s ease-in-out infinite}
@keyframes menuBreath{0%,100%{opacity:.8}50%{opacity:1}}
.menu-card{position:relative;z-index:1;width:min(560px,100%);padding:clamp(34px,4.4vw,54px) clamp(22px,4vw,52px) clamp(30px,3.6vw,44px);
  background:linear-gradient(180deg,#FFF8EF,var(--cream) 40%,#F6E6D3);color:var(--ink);text-align:center;border-radius:6px;overflow:hidden;
  box-shadow:0 2px 0 rgba(255,255,255,.6) inset,0 30px 70px rgba(0,0,0,.55),0 10px 24px rgba(0,0,0,.35);
  opacity:0;translate:0 60px;rotate:-2deg;transition:opacity 1.1s var(--ease),translate 1.3s var(--ease),rotate 1.5s var(--ease)}
.menu-card.in,html.safe .menu-card{opacity:1;translate:0 0;rotate:0deg}
/* the printed double frame */
.menu-card::before,.menu-card::after{content:"";position:absolute;pointer-events:none;border-radius:3px}
.menu-card::before{inset:12px;border:1px solid rgba(242,96,24,.55)}
.menu-card::after{inset:17px;border:1px solid rgba(242,96,24,.25)}
.menu-card .pattern{opacity:.35}
.mc-head{position:relative;display:grid;justify-items:center;gap:12px;margin-bottom:clamp(18px,2.4vw,28px)}
.mc-head img{height:62px;width:auto}
.mc-list{position:relative;list-style:none;margin:0;padding:0;display:grid}
.mc-item{display:grid;justify-items:center;gap:6px;padding-block:clamp(16px,2vw,22px)}
/* an ornament between the courses: hairlines and a four-pointed star */
.mc-item+.mc-item{position:relative}
.mc-item+.mc-item::before{content:"";position:absolute;left:50%;top:0;width:120px;height:9px;translate:-50% -50%;
  background:linear-gradient(90deg,rgba(242,96,24,0),rgba(242,96,24,.55) 38%,rgba(242,96,24,0) 42%,rgba(242,96,24,0) 58%,rgba(242,96,24,.55) 62%,rgba(242,96,24,0)) center/100% 1px no-repeat}
.mc-item+.mc-item::after{content:"";position:absolute;left:50%;top:0;width:9px;height:9px;translate:-50% -50%;background:var(--orange);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.mc-ic svg{display:block;width:30px;height:30px;fill:none;stroke:var(--orange);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.mc-item .jlabel{margin-top:4px}
.mc-item h3{margin:0;color:var(--ink);max-width:26ch;text-wrap:balance}
.mc-item p{margin:0;color:var(--ink);max-width:36ch;line-height:1.6;text-wrap:balance}
.mc-foot{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.3em .8em;margin-top:clamp(14px,2vw,22px);padding-top:clamp(16px,2vw,22px);
  border-top:1px solid rgba(242,96,24,.3);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.mc-foot i{width:4.8px;height:4.8px;border-radius:50%;background:var(--orange)}
/* printed in: each course appears after the previous one */
.mc-item,.mc-foot,.mc-head{opacity:0;filter:blur(6px);translate:0 10px;transition:opacity .9s var(--ease),filter .9s var(--ease),translate .9s var(--ease)}
.mc-head{transition-delay:.5s}
.mc-item{transition-delay:calc(.8s + var(--k) * .32s)}
.mc-foot{transition-delay:2.8s}
.menu-card.in .mc-item,.menu-card.in .mc-foot,.menu-card.in .mc-head,html.safe .mc-item,html.safe .mc-foot,html.safe .mc-head{opacity:1;filter:none;translate:0 0}
@media (max-width:760px){
  .mc-head img{height:52px}
  .mc-foot{flex-direction:column;gap:.15em;letter-spacing:.1em}
  .mc-foot i{display:none}
  .menu-card::before{inset:9px}.menu-card::after{inset:13px}
}
@media (prefers-reduced-motion:reduce){
  .menu-light{animation:none}
  .menu-card,.mc-item,.mc-foot,.mc-head{opacity:1;filter:none;translate:0 0;rotate:0deg;transition:none}
}
.menu-card .pattern{opacity:.18}
.mc-item{padding-block:clamp(13px,1.6vw,18px);gap:5px}
.mc-head{margin-bottom:clamp(12px,1.8vw,20px)}

/* Menu card: each course reads as one group — tight inside, generous air and a clear ornament between courses */
.mc-item{gap:0;padding-block:clamp(30px,3.6vw,44px)}
.mc-list .mc-item:first-child{padding-top:clamp(10px,1.4vw,16px)}
.mc-list .mc-item:last-child{padding-bottom:clamp(18px,2.2vw,26px)}
.mc-ic{margin-bottom:10px}
.mc-item .jlabel{margin:0 0 6px}
.mc-item p{margin-top:8px}
.mc-item+.mc-item::before{width:180px;background:linear-gradient(90deg,rgba(242,96,24,0),rgba(242,96,24,.7) 40%,rgba(242,96,24,0) 44%,rgba(242,96,24,0) 56%,rgba(242,96,24,.7) 60%,rgba(242,96,24,0)) center/100% 1px no-repeat}
.mc-item+.mc-item::after{width:12px;height:12px}

/* Dress code: just the button, in a quiet section of its own */
.ty-dress{padding-block:clamp(40px,5vw,64px);text-align:center}
.ty-dress .wrap{display:flex;justify-content:center}

/* Thank-you hero on phones: sized to its content, shorter warm fade, the letter follows closely */
@media (max-width:760px){
  .ty-hero{min-height:0;padding:56px 0 118px}
  .ty-hero .wrap{gap:18px}
  .ty-hero::after,.ty-hero.to-cream::after{height:130px;background:linear-gradient(180deg,rgba(250,240,228,0) 0%,rgba(242,96,24,.08) 30%,rgba(250,240,228,.6) 62%,var(--cream) 100%)}
  .ty-letter{padding-top:28px}
}
@media (max-width:760px){.ty-hero{padding-bottom:92px}.ty-hero::after,.ty-hero.to-cream::after{height:110px}}
/* Thank-you hero on phones: a long, eased fade into cream (warmed in the middle so it never turns grey) */
@media (max-width:760px){
  .ty-hero{padding-bottom:150px}
  .ty-hero::after,.ty-hero.to-cream::after{height:230px;background:
    linear-gradient(180deg,rgba(250,240,228,0) 0%,rgba(250,240,228,.02) 10%,rgba(250,240,228,.07) 20%,rgba(250,240,228,.15) 30%,rgba(250,240,228,.26) 40%,rgba(250,240,228,.4) 50%,rgba(250,240,228,.55) 60%,rgba(250,240,228,.7) 70%,rgba(250,240,228,.83) 80%,rgba(250,240,228,.94) 90%,var(--cream) 100%),
    linear-gradient(180deg,rgba(242,96,24,0) 0%,rgba(242,96,24,.1) 30%,rgba(242,96,24,.14) 50%,rgba(242,96,24,.08) 72%,rgba(242,96,24,0) 100%)}
}

/* ---------- Thank-you page · seamless sections ----------
   The light sections share one continuous cream; nothing is clipped at their edges; the faint texture fades out
   at every edge; each dark section melts into the cream with the same long, eased, warm fade. */
main.thanks.ty{--fade-cream:linear-gradient(180deg,rgba(250,240,228,0) 0%,rgba(247,176,128,.03) 10%,rgba(247,176,128,.09) 20%,rgba(247,180,136,.18) 30%,rgba(248,190,150,.3) 40%,rgba(248,200,165,.44) 50%,rgba(249,212,184,.58) 60%,rgba(249,226,206,.76) 68%,rgba(250,234,219,.9) 78%,rgba(250,239,226,.97) 86%,var(--cream) 92%,var(--cream) 100%),
  linear-gradient(180deg,rgba(242,96,24,0) 0%,rgba(242,96,24,.12) 28%,rgba(242,96,24,.16) 46%,rgba(242,96,24,.08) 70%,rgba(242,96,24,0) 100%);
  background:var(--cream);overflow:clip;padding:0;min-height:0}
.ty .ty-letter,.ty .ty-next,.ty .prep,.ty .ty-invite{background:none!important;overflow:visible}
.ty .prep::before,.ty .prep::after{display:none}
.ty .ty-next{padding-top:clamp(20px,3vw,40px)}
.ty>section .pattern{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 120px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 120px),transparent 100%)}
/* the fades: into a dark section from above, and out of it below */
.ty .evening2,.ty .ty-final{padding-top:calc(clamp(50px,6.4vw,88px) + 150px)}
.ty .evening2::after,.ty .ty-final::after{content:"";position:absolute;left:0;right:0;top:0;height:230px;z-index:0;pointer-events:none;background:var(--fade-cream);transform:scaleY(-1)}
.ty .ty-dress{position:relative;padding-top:clamp(10px,2vw,24px);padding-bottom:calc(clamp(40px,5vw,64px) + 160px)}
.ty .ty-dress::after{content:"";position:absolute;left:0;right:0;bottom:0;height:230px;z-index:0;pointer-events:none;background:var(--fade-cream)}
.ty .ty-dress .wrap{position:relative;z-index:1}
.ty .evening2 .wrap,.ty .ty-final .wrap{position:relative;z-index:1}
.ty .ty-hero::after,.ty .ty-hero.to-cream::after{height:230px;background:var(--fade-cream)}
/* no hairline gaps where sections meet (fractional heights let the cream peek through) */
.ty>section+section{margin-top:-1px}
.ty .ty-dress::after{bottom:-1px}
.ty .ty-dress::after{display:none}
.ty .ty-dress{background-color:transparent;background-image:var(--fade-cream),linear-gradient(var(--ink),var(--ink));background-size:100% 230px,100% 230px,100% 100%;background-position:left bottom,left bottom,left top;background-repeat:no-repeat}

/* dark ⇄ cream on the thank-you page: an opaque warm ramp (ink → deep brown → caramel → peach → cream), never grey */
main.thanks.ty{--fade-warm:linear-gradient(180deg,#1A0A02 0%,#200D05 10%,#2C1309 20%,#3F1C0E 30%,#5A2A16 40%,#7E3F23 50%,#A55D3C 60%,#C9876A 70%,#E4B49A 80%,#F4D9C6 89%,#F9EADD 95%,#FAF0E4 100%)}
.ty .evening2::after,.ty .ty-final::after{height:300px;background:var(--fade-warm);transform:scaleY(-1)}
.ty .evening2,.ty .ty-final{padding-top:calc(clamp(50px,6.4vw,88px) + 210px)}
.ty .ty-dress{padding-top:clamp(18px,2.4vw,30px);padding-bottom:calc(clamp(30px,3.6vw,44px) + 300px);background-color:var(--ink);background-image:var(--fade-warm);background-size:100% 300px;background-position:left bottom;background-repeat:no-repeat}
/* (beat the desktop section rhythm rule so the fades get their room) */
.ty .section.evening2,.ty .section.ty-final{padding-top:calc(clamp(50px,4.8vw,68px) + 210px)}
.ty .section.ty-dress{padding-top:clamp(18px,2.4vw,30px);padding-bottom:calc(clamp(30px,3.6vw,44px) + 300px)}
.ty .section.ty-next{padding-top:clamp(20px,3vw,40px)}
/* closing section: its warm glow sits fully inside it (no band cut off by the footer) */
.ty .section.ty-final{background:radial-gradient(ellipse 46% 34% at 50% 68%,rgba(242,96,24,.24),rgba(242,96,24,0) 100%),var(--ink)}

/* testimonials: one Instagram link, centred under the three reels */
.ig-cta{display:flex;justify-content:center;margin-top:clamp(22px,3vw,36px)}
/* buttons inside "pas cu pas" steps (WhatsApp group, add to calendar) */
.jstep .step-btn{margin-top:14px;justify-self:center;align-self:center}
.jstep .wa-later{margin-top:12px;color:var(--ink);max-width:30ch}
.on-dark .jstep .wa-later{color:var(--cream)}
@media (min-width:861px){.ty-next .journey.three{max-width:980px}}

/* thank-you page: tighter dark ⇄ cream transitions (shorter ramp, less padding around it) */
main.thanks.ty{--fh:210px}
@media (max-width:760px){main.thanks.ty{--fh:150px}}
.ty .evening2::after,.ty .ty-final::after{height:var(--fh)}
.ty .section.evening2,.ty .section.ty-final{padding-top:calc(clamp(40px,4.4vw,60px) + var(--fh) * .55)}
.ty .section.ty-dress{padding-bottom:calc(clamp(26px,3vw,40px) + var(--fh));background-size:100% var(--fh)}
.ty .section.ty-next{padding-bottom:clamp(30px,3.6vw,48px)}
.ty .section.prep{padding-top:clamp(18px,2.4vw,30px)}

/* phones: lighter rendering for the animated sections (no decorative stars over text, no animated blur/glow filters,
   each animated block painted on its own) — keeps the gallery, map and stat reel fluid instead of fragmented */
@media (hover:none),(max-width:760px){
  .twinkles{display:none}
  .win-map .spark{filter:none;stroke-width:3}
  .odo{filter:none}
  .odo .strip,.odo.rolling .strip{filter:none!important}
  .stat-reel .reel-copy.away{filter:none}
  /* (no paint containment here: it clipped the soft glows into visible rectangles) */
  .carousel .frame{backface-visibility:hidden;-webkit-backface-visibility:hidden}
}
/* any section out of view stops its looping animations (resumes as it comes back) */
.offscreen,.offscreen *,.offscreen *::before,.offscreen *::after{animation-play-state:paused!important}


/* =====================================================================
   TOUCH DEVICES · rendering diet (phones/tablets): the same choreography, without the effects a phone GPU has to
   repaint on every frame. Reveals travel + fade (no animated blur), no backdrop blur behind the scrolling header,
   no drop-shadow filters on animated art, fewer ambient particles. This is what keeps scrolling fluid on a phone.
   ===================================================================== */
@media (hover:none){
  .arow.reveal>*,
  .evening .row.reveal .num,
  .evening .row.reveal p,
  .journey .jstep>*,
  .level-wrap.reveal,
  .mc-foot,
  .mc-head,
  .mc-item,
  .odo.rolling .strip,
  .poem,
  .poem .ph,
  .poem .ph.out,
  .poem-stick.done .title-fold,
  .poem-stick.ending:not(.done) .title-fold,
  .stat-reel .reel-copy.away,
  .ucard,
  html[data-typing="off"] .story .text .reveal{filter:none!important}
  .awards-stage.live .prize.lit .trophy,
  .awards-stage.live .prize:not(.lit) .trophy,
  .prize .trophy,
  .dc-stage svg,
  .gown-stage svg,
  .mini-dress svg,
  .dress-card .gown,
  .thanks .gown,
  .poem .plate-wrap,
  .final .final-copy .glow-txt,
  .odo,
  .win-map .spark{filter:none!important}
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .header.scrolled,.header.has-cta.show-cta,.header.has-cta.past-hero{background:rgba(250,240,228,.97)!important}
  .motes i:nth-child(2n){display:none}
  .twinkles{display:none}
}
@media (hover:none){.poem-icons .sparks{filter:none!important}}
@media (hover:none){.cells .num,.num.tick,.sp-others,.sp-you{filter:none!important}}

/* ---------- Scroll-driven effects move by transform only (no layout, no repaint per scroll frame) ----------
   split photo: the colour layer slides in from the right as a transformed layer whose picture counter-slides,
   so the photo stays put while the edge travels; the divider line rides the same transform */
.sp-frame .sp-live{left:0;right:0;transform:translate3d(calc(var(--fw,820px) * (1 - var(--p,0))),0,0);will-change:transform}
.sp-frame .sp-live img{left:0;right:auto;width:var(--fw,820px);transform:translate3d(calc(var(--fw,820px) * (var(--p,0) - 1)),0,0)}
.sp-line{left:0;transform:translate3d(calc(var(--fw,820px) * (1 - var(--p,0))),0,0);will-change:transform}
/* evening "pen" line: the glowing tip travels by transform along the drawn line */
.uspark{top:0;transform:translate3d(0,calc(var(--p,0) * var(--uh,0px)),0);will-change:transform}

/* TOUCH DEVICES · playing videos carry no per-frame effects: no blend layers, no filter, no mask, no slow zoom.
   The same look comes from plain overlays drawn once: a soft orange wash, and (hero) the cream dissolve painted on top
   instead of masking the video. Plus: no SVG glow filter on the diamond's glints; the awards ride their own layers. */
@media (hover:none){
  .video-frame .grain{display:none!important}
  .video-frame video{filter:none!important}
  .video-frame .tint{display:block!important;mix-blend-mode:normal!important;opacity:.22!important}
  .hero.tall .hero-video video,.ty-hero .video-frame video{animation:none!important}
  .hero .hero-video{-webkit-mask-image:none!important;mask-image:none!important}
  .hero .hero-video .veil{background:
    linear-gradient(180deg,rgba(250,240,228,0) 0%,rgba(250,240,228,0) 46%,rgba(250,240,228,.28) 56%,rgba(250,240,228,.62) 65%,rgba(250,240,228,.88) 73%,var(--cream) 80%),
    linear-gradient(180deg,rgba(250,240,228,0) 0%,rgba(250,240,228,0) 38%,rgba(250,240,228,.25) 50%,rgba(250,240,228,.5) 62%,rgba(250,240,228,.7) 75%),
    linear-gradient(180deg,rgba(26,10,2,.62) 0%,rgba(26,10,2,.5) 18%,rgba(26,10,2,.42) 32%,rgba(26,10,2,.32) 44%,rgba(26,10,2,.18) 56%,rgba(26,10,2,.07) 68%,rgba(26,10,2,0) 80%)!important}
  .stat-reel .glints{filter:none!important}
  .awards-stage.live .prize{will-change:transform,opacity}
}

/* ---------- Compositor-friendly vector art (smooth on iPhone Safari, which repaints SVG on the CPU) ----------
   stat reel: the gentle breathing moves the whole drawing as one composited layer instead of re-drawing the
   shapes inside the SVG on every frame (the morph itself still redraws, but only while it morphs) */
.reel-stage .morph{animation:morphBreathe 5s ease-in-out infinite;transform-origin:50% 48%;will-change:transform}
@keyframes morphBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.morph .breathe,.morph .halo{animation:none!important}
/* map: the dotted land is drawn once on its own layer; the travelling lights, pulses and labels live on a light
   overlay layer above it (main.js splits the SVG), so a moving light never re-masks thousands of dots */
.win-map{position:relative}
.win-map .europe.fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;will-change:transform}

/* thank-you page: the cream → dark fade at the top of a dark section dissolves into it (warm tones, fading to
   transparent) instead of ending in a flat band — the section's own glow and pattern come through gradually */
main.thanks.ty{--fade-in-dark:linear-gradient(180deg,var(--cream) 0%,rgba(248,228,212,.97) 9%,rgba(244,212,190,.92) 18%,rgba(232,182,152,.84) 28%,rgba(208,142,108,.72) 39%,rgba(170,98,64,.56) 51%,rgba(126,63,35,.38) 63%,rgba(90,42,22,.22) 75%,rgba(58,26,12,.1) 87%,rgba(26,10,2,0) 100%)}
.ty .evening2::after,.ty .ty-final::after{transform:none;height:calc(var(--fh) * 1.5);background:var(--fade-in-dark)}
.ty .section.evening2,.ty .section.ty-final{padding-top:calc(clamp(40px,4.4vw,60px) + var(--fh) * 1.05)}

/* ---------- Thank-you page · one long, eased cream ⇄ dark transition across each section boundary ----------
   a single smootherstep curve along warm tones (cream → peach → caramel → rust → ink), ~460px desktop / 340px phones.
   Its light half sits in the empty bottom padding of the section above, its dark half at the top of the dark section,
   so it is long and soft without adding much space. Dark → cream (after the dress code) mirrors it. */
main.thanks.ty{--tl:460px;--tu:calc(var(--tl) * 0.38);--td:calc(var(--tl) * 0.62);
  --g-up:linear-gradient(180deg,rgba(250,240,228,1.00) 0%,rgba(250,240,228,1.00) 10%,rgba(250,240,228,1.00) 20%,rgba(250,239,227,1.00) 30%,rgba(249,238,225,1.00) 40%,rgba(249,236,222,1.00) 50%,rgba(249,233,219,1.00) 60%,rgba(248,230,215,1.00) 70%,rgba(247,226,210,1.00) 80%,rgba(246,221,203,1.00) 90%,rgba(240,207,186,1.00) 100%);
  --g-down:linear-gradient(180deg,rgba(240,207,186,1.00) 0%,rgba(233,190,163,1.00) 7%,rgba(222,168,137,1.00) 14%,rgba(198,134,102,1.00) 21%,rgba(173,102,68,1.00) 29%,rgba(138,76,46,1.00) 36%,rgba(106,51,26,1.00) 43%,rgba(82,37,16,1.00) 50%,rgba(64,29,12,1.00) 57%,rgba(50,22,8,1.00) 64%,rgba(39,16,5,0.89) 71%,rgba(32,13,4,0.66) 79%,rgba(28,11,2,0.44) 86%,rgba(26,10,2,0.22) 93%,rgba(26,10,2,0.00) 100%)}
@media (max-width:760px){main.thanks.ty{--tl:340px}}
/* the light half: bottom of the section above each dark section */
.ty .section.ty-next,.ty .section.ty-invite{position:relative;padding-bottom:calc(var(--tu) + 22px)}
.ty .section.ty-next::after,.ty .section.ty-invite::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--tu);background:var(--g-up);pointer-events:none;z-index:0}
.ty .ty-next .wrap,.ty .ty-invite .wrap{position:relative;z-index:1}
/* the dark half: top of the dark section */
.ty .evening2::after,.ty .ty-final::after{transform:none;height:var(--td);background:var(--g-down)}
.ty .section.evening2,.ty .section.ty-final{padding-top:calc(var(--td) * .72)}
/* dark → cream after the dress code: the same curve, mirrored */
.ty .section.ty-dress{background-color:var(--ink);background-image:linear-gradient(0deg,rgba(240,207,186,1.00) 0%,rgba(233,190,163,1.00) 7%,rgba(222,168,137,1.00) 14%,rgba(198,134,102,1.00) 21%,rgba(173,102,68,1.00) 29%,rgba(138,76,46,1.00) 36%,rgba(106,51,26,1.00) 43%,rgba(82,37,16,1.00) 50%,rgba(64,29,12,1.00) 57%,rgba(50,22,8,1.00) 64%,rgba(39,16,5,0.89) 71%,rgba(32,13,4,0.66) 79%,rgba(28,11,2,0.44) 86%,rgba(26,10,2,0.22) 93%,rgba(26,10,2,0.00) 100%);background-size:100% var(--td);background-position:left bottom;background-repeat:no-repeat;padding-bottom:calc(var(--td) + 10px)}
.ty .section.prep{position:relative;padding-top:calc(var(--tu) + 18px)}
.ty .section.prep::before{content:"";display:block!important;position:absolute;left:0;right:0;top:0;height:var(--tu);background:linear-gradient(0deg,rgba(250,240,228,1.00) 0%,rgba(250,240,228,1.00) 10%,rgba(250,240,228,1.00) 20%,rgba(250,239,227,1.00) 30%,rgba(249,238,225,1.00) 40%,rgba(249,236,222,1.00) 50%,rgba(249,233,219,1.00) 60%,rgba(248,230,215,1.00) 70%,rgba(247,226,210,1.00) 80%,rgba(246,221,203,1.00) 90%,rgba(240,207,186,1.00) 100%);pointer-events:none;z-index:0;filter:none;border-radius:0;bottom:auto;background-color:transparent;width:auto;max-width:none;max-height:none;transform:none;opacity:1}
.ty .prep .wrap{position:relative;z-index:1}

/* thank-you page · the cream ⇄ dark transition, rebuilt in perceptual colour (OKLab): lightness changes evenly to
   the eye with gentle ends, a warm tint carried through the middle (never grey), longer run */
main.thanks.ty{--tl:560px;--tu:calc(var(--tl) * 0.36);--td:calc(var(--tl) * 0.64);
  --g-up:linear-gradient(180deg,rgba(250,240,228,1.00) 0.0%,rgba(250,240,228,1.00) 6.2%,rgba(249,238,226,1.00) 12.5%,rgba(248,236,224,1.00) 18.8%,rgba(246,233,220,1.00) 25.0%,rgba(245,230,216,1.00) 31.2%,rgba(243,225,210,1.00) 37.5%,rgba(241,220,204,1.00) 43.8%,rgba(238,214,197,1.00) 50.0%,rgba(236,208,189,1.00) 56.2%,rgba(233,201,180,1.00) 62.5%,rgba(230,193,171,1.00) 68.8%,rgba(227,185,161,1.00) 75.0%,rgba(224,177,151,1.00) 81.2%,rgba(220,168,141,1.00) 87.5%,rgba(215,160,130,1.00) 93.8%,rgba(210,151,120,1.00) 100.0%);
  --g-down:linear-gradient(180deg,rgba(210,151,120,1.00) 0.0%,rgba(204,140,107,1.00) 4.2%,rgba(197,129,95,1.00) 8.3%,rgba(189,118,83,1.00) 12.5%,rgba(180,108,72,1.00) 16.7%,rgba(170,98,62,1.00) 20.8%,rgba(160,89,52,1.00) 25.0%,rgba(150,80,44,1.00) 29.2%,rgba(139,72,36,1.00) 33.3%,rgba(127,64,30,1.00) 37.5%,rgba(116,57,25,1.00) 41.7%,rgba(105,51,21,1.00) 45.8%,rgba(94,45,17,1.00) 50.0%,rgba(84,40,14,1.00) 54.2%,rgba(74,35,12,1.00) 58.3%,rgba(65,31,10,1.00) 62.5%,rgba(57,27,8,1.00) 66.7%,rgba(50,23,7,1.00) 70.8%,rgba(43,20,5,0.96) 75.0%,rgba(38,17,4,0.87) 79.2%,rgba(34,15,4,0.74) 83.3%,rgba(30,13,3,0.59) 87.5%,rgba(28,11,2,0.41) 91.7%,rgba(26,10,2,0.21) 95.8%,rgba(26,10,2,0.00) 100.0%)}
@media (max-width:760px){main.thanks.ty{--tl:400px}}
.ty .section.ty-dress{background-image:linear-gradient(0deg,rgba(210,151,120,1.00) 0.0%,rgba(204,140,107,1.00) 4.2%,rgba(197,129,95,1.00) 8.3%,rgba(189,118,83,1.00) 12.5%,rgba(180,108,72,1.00) 16.7%,rgba(170,98,62,1.00) 20.8%,rgba(160,89,52,1.00) 25.0%,rgba(150,80,44,1.00) 29.2%,rgba(139,72,36,1.00) 33.3%,rgba(127,64,30,1.00) 37.5%,rgba(116,57,25,1.00) 41.7%,rgba(105,51,21,1.00) 45.8%,rgba(94,45,17,1.00) 50.0%,rgba(84,40,14,1.00) 54.2%,rgba(74,35,12,1.00) 58.3%,rgba(65,31,10,1.00) 62.5%,rgba(57,27,8,1.00) 66.7%,rgba(50,23,7,1.00) 70.8%,rgba(43,20,5,0.96) 75.0%,rgba(38,17,4,0.87) 79.2%,rgba(34,15,4,0.74) 83.3%,rgba(30,13,3,0.59) 87.5%,rgba(28,11,2,0.41) 91.7%,rgba(26,10,2,0.21) 95.8%,rgba(26,10,2,0.00) 100.0%)}
.ty .section.prep::before{background:linear-gradient(0deg,rgba(250,240,228,1.00) 0.0%,rgba(250,240,228,1.00) 6.2%,rgba(249,238,226,1.00) 12.5%,rgba(248,236,224,1.00) 18.8%,rgba(246,233,220,1.00) 25.0%,rgba(245,230,216,1.00) 31.2%,rgba(243,225,210,1.00) 37.5%,rgba(241,220,204,1.00) 43.8%,rgba(238,214,197,1.00) 50.0%,rgba(236,208,189,1.00) 56.2%,rgba(233,201,180,1.00) 62.5%,rgba(230,193,171,1.00) 68.8%,rgba(227,185,161,1.00) 75.0%,rgba(224,177,151,1.00) 81.2%,rgba(220,168,141,1.00) 87.5%,rgba(215,160,130,1.00) 93.8%,rgba(210,151,120,1.00) 100.0%)}

/* thank-you page · compact transitions: the same smooth perceptual curve, now overlapping the content instead of
   sitting in empty space. Its near-cream start runs behind the end of the section above; the dark section's label and
   title already sit on its deep end. About half the gap between sections, still no edge. */
main.thanks.ty{--tl:440px;--tu:calc(var(--tl) * 0.25);--td:calc(var(--tl) * 0.75);
  --g-up:linear-gradient(180deg,rgba(250,240,228,1.00) 0.0%,rgba(250,240,228,1.00) 8.3%,rgba(249,239,226,1.00) 16.7%,rgba(248,237,224,1.00) 25.0%,rgba(247,234,221,1.00) 33.3%,rgba(245,231,217,1.00) 41.7%,rgba(244,227,213,1.00) 50.0%,rgba(242,223,207,1.00) 58.3%,rgba(240,218,201,1.00) 66.7%,rgba(238,212,194,1.00) 75.0%,rgba(235,206,187,1.00) 83.3%,rgba(233,199,179,1.00) 91.7%,rgba(230,192,170,1.00) 100.0%);
  --g-down:linear-gradient(180deg,rgba(230,192,170,1.00) 0.0%,rgba(226,182,157,1.00) 3.8%,rgba(221,171,144,1.00) 7.7%,rgba(215,160,131,1.00) 11.5%,rgba(209,148,117,1.00) 15.4%,rgba(202,137,104,1.00) 19.2%,rgba(194,125,91,1.00) 23.1%,rgba(185,114,78,1.00) 26.9%,rgba(175,103,66,1.00) 30.8%,rgba(164,93,56,1.00) 34.6%,rgba(153,83,46,1.00) 38.5%,rgba(141,74,38,1.00) 42.3%,rgba(129,65,31,1.00) 46.2%,rgba(117,58,25,1.00) 50.0%,rgba(105,51,21,1.00) 53.8%,rgba(93,45,17,1.00) 57.7%,rgba(82,39,14,1.00) 61.5%,rgba(72,34,11,1.00) 65.4%,rgba(62,29,9,1.00) 69.2%,rgba(54,25,7,1.00) 73.1%,rgba(46,21,6,1.00) 76.9%,rgba(40,18,5,0.97) 80.8%,rgba(35,15,4,0.85) 84.6%,rgba(31,13,3,0.69) 88.5%,rgba(28,11,2,0.49) 92.3%,rgba(27,10,2,0.26) 96.2%,rgba(26,10,2,0.00) 100.0%)}
@media (max-width:760px){main.thanks.ty{--tl:320px}}
.ty .section.ty-next,.ty .section.ty-invite{padding-bottom:36px}
.ty .section.evening2,.ty .section.ty-final{padding-top:calc(var(--td) * .55)}
.ty .section.ty-dress{background-image:linear-gradient(0deg,rgba(230,192,170,1.00) 0.0%,rgba(226,182,157,1.00) 3.8%,rgba(221,171,144,1.00) 7.7%,rgba(215,160,131,1.00) 11.5%,rgba(209,148,117,1.00) 15.4%,rgba(202,137,104,1.00) 19.2%,rgba(194,125,91,1.00) 23.1%,rgba(185,114,78,1.00) 26.9%,rgba(175,103,66,1.00) 30.8%,rgba(164,93,56,1.00) 34.6%,rgba(153,83,46,1.00) 38.5%,rgba(141,74,38,1.00) 42.3%,rgba(129,65,31,1.00) 46.2%,rgba(117,58,25,1.00) 50.0%,rgba(105,51,21,1.00) 53.8%,rgba(93,45,17,1.00) 57.7%,rgba(82,39,14,1.00) 61.5%,rgba(72,34,11,1.00) 65.4%,rgba(62,29,9,1.00) 69.2%,rgba(54,25,7,1.00) 73.1%,rgba(46,21,6,1.00) 76.9%,rgba(40,18,5,0.97) 80.8%,rgba(35,15,4,0.85) 84.6%,rgba(31,13,3,0.69) 88.5%,rgba(28,11,2,0.49) 92.3%,rgba(27,10,2,0.26) 96.2%,rgba(26,10,2,0.00) 100.0%);padding-bottom:calc(var(--td) * .55)}
.ty .section.prep{padding-top:28px}
.ty .section.prep::before{background:linear-gradient(0deg,rgba(250,240,228,1.00) 0.0%,rgba(250,240,228,1.00) 8.3%,rgba(249,239,226,1.00) 16.7%,rgba(248,237,224,1.00) 25.0%,rgba(247,234,221,1.00) 33.3%,rgba(245,231,217,1.00) 41.7%,rgba(244,227,213,1.00) 50.0%,rgba(242,223,207,1.00) 58.3%,rgba(240,218,201,1.00) 66.7%,rgba(238,212,194,1.00) 75.0%,rgba(235,206,187,1.00) 83.3%,rgba(233,199,179,1.00) 91.7%,rgba(230,192,170,1.00) 100.0%)}
/* thank-you hero (desktop): sized to its content, the letter follows closely */
@media (min-width:761px){
  .ty .ty-hero{min-height:0;padding:clamp(70px,7vw,100px) 0 clamp(150px,13vw,190px)}
  .ty .section.ty-letter{padding-top:clamp(20px,2.4vw,32px)}
}
@media (min-width:761px){
  .ty .ty-hero{padding-bottom:clamp(120px,10vw,150px)}
  .ty .ty-letter .letter{margin-top:24px}
  .ty .section.ty-letter{padding-top:12px}
}
/* the dress-code band is shorter than the fade: the fade spans the band exactly, so it never starts mid-way (no edge) */
.ty .section.ty-dress{background-size:100% 100%}

/* experiences budget: an information line, not a button — no pill; fine orange rules either side, like the labels */
.xp-price{display:flex;justify-content:center}
.xp-price span{display:inline-flex;align-items:center;gap:14px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.xp-price span::before,.xp-price span::after{content:"";width:clamp(28px,4vw,56px);height:1px;background:linear-gradient(90deg,rgba(242,96,24,0),rgba(242,96,24,.6))}
.xp-price span::after{transform:scaleX(-1)}
.xp-price{align-items:center;gap:14px}
.xp-price span{display:inline;gap:0}
.xp-price span::before,.xp-price span::after{content:none}
.xp-price::before,.xp-price::after{content:"";width:clamp(28px,4vw,56px);height:1px;background:linear-gradient(90deg,rgba(242,96,24,0),rgba(242,96,24,.6))}
.xp-price::after{transform:scaleX(-1)}

/* step icons (thank-you + partner timeline): no padlock "shackle" swing here — it twisted the envelope and dress icons;
   a touch larger and finer so they read cleanly inside the circle */
.ty .jstep .dot svg path,.ty .jstep.reached .dot svg path,#pachete .jstep .dot svg path{transform:none!important;transition:none}
.ty .jstep .dot svg:not(.wings){width:22px;height:22px;stroke-width:1.6}

/* ---------- Tickets · Early Bird (22 Oct – 1 Nov 2026, −15%) ----------
   a dark panel above the cards: badge, period, a live countdown (to the start, then to the end) and the gala date;
   on the cards: a diagonal Early Bird ribbon, the original price crossed out, the Early Bird price larger. */
.eb-panel{position:relative;max-width:820px;margin:clamp(26px,3.4vw,44px) auto 0;padding:clamp(26px,3.4vw,40px) clamp(18px,3vw,40px);
  border-radius:var(--radius);background:radial-gradient(ellipse 70% 90% at 50% 120%,rgba(242,96,24,.32),rgba(242,96,24,0) 70%),var(--ink);color:var(--cream);text-align:center;
  display:grid;justify-items:center;gap:12px;box-shadow:0 0 0 1px rgba(242,96,24,.45),0 30px 60px -28px rgba(199,70,26,.55)}
.eb-panel[hidden]{display:none}
.eb-badge{display:inline-flex;align-items:center;gap:9px;padding:.5em 1.15em;border-radius:999px;background:var(--orange);color:var(--cream);font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.eb-badge i{width:7px;height:7px;border-radius:50%;background:var(--cream);animation:blink 1.6s infinite}
.eb-title{margin:4px 0 0;font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;line-height:1.3;color:var(--cream);text-wrap:balance}
.eb-title em{color:var(--orange);font-style:normal}
.eb-period{margin:0;color:var(--cream);font-weight:700;letter-spacing:.04em}
.eb-count{margin-top:6px}
.eb-cap{font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.eb-panel .countdown .num{color:var(--cream)}
.eb-panel .countdown .cell:last-child .num{color:var(--orange)}
.eb-panel .countdown .unit{color:var(--cream)}
.eb-panel .countdown .cell{border-left-color:rgba(242,96,24,.35)}
.eb-event{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.3em .9em;margin:6px 0 0;padding-top:14px;border-top:1px solid rgba(242,96,24,.3);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.eb-event i{width:4.8px;height:4.8px;border-radius:50%;background:var(--orange)}
.eb-panel[data-state="soon"] .eb-on,.eb-panel[data-state="on"] .eb-soon{display:none}
@media (max-width:760px){.eb-event{flex-direction:column;gap:.15em;letter-spacing:.1em}.eb-event i{display:none}.eb-badge{letter-spacing:.12em}}

/* cards: ribbon, crossed-out price, larger Early Bird price (only while the Early Bird is live) */
.tier .eb-ribbon,.tier .eb-old,.tier .eb-save{display:none}
.tiers.eb-live .tier .eb-ribbon{display:block;position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:2}
.tiers.eb-live .tier .eb-ribbon span{position:absolute;top:26px;right:-52px;width:200px;padding:.5em 0;rotate:45deg;text-align:center;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:linear-gradient(100deg,#F6793A,var(--orange) 50%,#D94E16);color:var(--cream);box-shadow:0 6px 16px -6px rgba(199,70,26,.6)}
.tiers.eb-live .tier.vip .eb-ribbon span{background:var(--ink);color:var(--cream)}
.tiers.eb-live .tier.ultra .eb-ribbon span{background:linear-gradient(100deg,#FFD9A0,#F7B48C 40%,var(--orange));color:var(--ink)}
.tiers.eb-live .tier .eb-old{display:block;font-weight:700;letter-spacing:.06em;text-transform:none;color:var(--ink);text-decoration:line-through;text-decoration-color:var(--orange);text-decoration-thickness:2px}
.tiers.eb-live .tier.vip .eb-old{color:var(--ink);text-decoration-color:var(--ink)}
.tiers.eb-live .tier.ultra .eb-old{color:var(--cream)}
.tiers.eb-live .tier .price b{font-size:calc(var(--fs-display) * 1.3)!important}
.tiers.eb-live .tier .eb-save{display:block;margin-top:6px;font-style:normal;font-weight:700;letter-spacing:.04em;text-transform:none;color:var(--orange)}
.tiers.eb-live .tier.vip .eb-save{color:var(--ink)!important}
/* sign-up form: Early Bird price beside the crossed-out original */
label .o small s{text-decoration-color:var(--orange);text-decoration-thickness:2px;margin-right:.35em}
label .o small .ebp{font-weight:700}
.tiers.eb-live .tier .eb-ribbon span{top:20px;right:-62px;width:190px;padding:.45em 0;letter-spacing:.14em}
.tiers.eb-live .tier .eb-old{font-size:var(--fs-lead);font-family:var(--font-display);letter-spacing:0}
.tiers.eb-live .tier .eb-ribbon span{top:15px;right:-70px;width:184px}
@media (max-width:760px){.eb-panel{padding-inline:12px}.eb-panel .countdown .cell{padding:2px clamp(8px,2.6vw,14px)}.eb-panel .countdown .unit{letter-spacing:.04em}}
/* ribbon: text fully inside the corner; while it shows, the seats badge moves to the left corner so they never overlap */
.tiers.eb-live .tier .eb-ribbon span{top:28px;right:-50px;width:200px;padding:.45em 0;letter-spacing:.12em}
.tiers.eb-live .tier .seats{left:22px;translate:0 0}
.tiers.eb-live .tier .seats,.tiers.eb-live .tier.vip .seats,.tiers.eb-live .tier.ultra .seats{left:22px!important;translate:0 0!important;right:auto!important}
/* sign-up form: crossed-out price on its own line, Early Bird price under it — the options keep their width */
label .o small s{display:block;margin:0;font-weight:400}
label .o small .ebp{display:block}

/* ---------- Early Bird v2: a compact, striking strip above the cards (less text) ---------- */
.eb-panel{position:relative;overflow:hidden;isolation:isolate;max-width:none;width:100%;margin:clamp(30px,3.6vw,48px) 0 0;
  display:grid;grid-template-columns:auto 1px auto;justify-content:center;align-items:center;gap:clamp(24px,4vw,56px);
  padding:clamp(22px,2.6vw,30px) clamp(22px,3.4vw,48px);border-radius:var(--radius);text-align:left;
  background:radial-gradient(ellipse 60% 140% at 0% 50%,rgba(242,96,24,.38),rgba(242,96,24,0) 60%),radial-gradient(ellipse 50% 120% at 100% 50%,rgba(242,96,24,.22),rgba(242,96,24,0) 60%),var(--ink);
  box-shadow:0 0 0 1px rgba(247,180,140,.35),0 28px 60px -30px rgba(199,70,26,.7)}
@media (min-width:1001px){.tickets .eb-panel{width:min(1180px,calc(100vw - 2 * var(--gutter)));position:relative;left:50%;translate:-50% 0}}
.eb-panel::before{content:"";grid-column:2;grid-row:1;align-self:stretch;width:1px;background:linear-gradient(180deg,rgba(242,96,24,0),rgba(242,96,24,.6),rgba(242,96,24,0))}
/* a slow light sweeping across, like the buttons */
.eb-panel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,226,196,.10) 50%,transparent 60%);background-size:250% 100%;animation:ebSweep 6s ease-in-out infinite}
@keyframes ebSweep{0%,55%{background-position:120% 0}100%{background-position:-120% 0}}
.eb-offer{grid-column:1;grid-row:1;display:grid;justify-items:start;gap:2px}
.eb-kicker{font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--orange)}
.eb-pct{font-family:var(--font-display);font-weight:700;font-size:calc(var(--fs-display) * 1.35);line-height:1;color:var(--cream);letter-spacing:-.02em}
.eb-dates{font-weight:700;color:var(--cream);letter-spacing:.04em}
.eb-clock{grid-column:3;grid-row:1;display:grid;justify-items:center;gap:10px}
.eb-panel .eb-cap{font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--cream)}
.eb-tiles{display:flex;gap:clamp(8px,1vw,12px)}
.eb-tile{display:grid;justify-items:center;align-content:center;gap:4px;width:clamp(66px,6.4vw,84px);padding:12px 0 10px;border-radius:14px;
  background:linear-gradient(180deg,rgba(250,240,228,.10),rgba(250,240,228,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(242,96,24,.35)}
.eb-tile b{font-family:var(--font-display);font-weight:700;font-size:var(--fs-display);line-height:1;color:var(--cream);font-variant-numeric:tabular-nums lining-nums}
.eb-tile small{font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.eb-tile.sec{background:linear-gradient(160deg,#F6793A,var(--orange) 50%,#D94E16);box-shadow:0 10px 28px -10px rgba(242,96,24,.9)}
.eb-tile.sec b,.eb-tile.sec small{color:var(--cream)}
.eb-tile b.tick{animation:tick .7s cubic-bezier(.16,1,.3,1)}
.eb-panel[data-state="soon"] .eb-on,.eb-panel[data-state="on"] .eb-soon,[data-eb-box][data-state="soon"] .eb-on,[data-eb-box][data-state="on"] .eb-soon{display:none}
@media (max-width:760px){
  .eb-panel{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px;padding:22px 12px}
  .eb-panel::before{display:none}
  .eb-offer{grid-column:1;justify-items:center}
  .eb-clock{grid-column:1;grid-row:2}
  .eb-tile{width:68px}
}
@media (prefers-reduced-motion:reduce){.eb-panel::after{animation:none}}
/* the price cards line up at the top (no enlarged Ultra VIP plate) */
.tickets .tier.ultra{--sc:1}

/* sign-up form: the Early Bird strip with its own countdown, and the Early Bird price set larger */
.eb-mini{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin:2px 0 4px;padding:12px 16px;border-radius:14px;
  background:linear-gradient(110deg,#D94E16,var(--orange) 45%,#F6793A);color:var(--cream);box-shadow:0 14px 30px -16px rgba(242,96,24,.9)}
.eb-mini[hidden]{display:none}
.eb-mini-tag{font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.eb-mini-tag b{letter-spacing:.04em}
.eb-mini-clock{display:flex;align-items:baseline;gap:8px;font-weight:700}
.eb-mini .eb-cap{font-weight:400;letter-spacing:0;text-transform:none;color:var(--cream)}
.eb-mini-t{font-variant-numeric:tabular-nums}
.eb-mini-t b{font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700}
@media (max-width:420px){.eb-mini{justify-content:center;text-align:center}}
label .o small .ebp{display:block;font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;color:var(--orange);line-height:1.15}
label .o small .ebp i{font-family:var(--font-text);font-size:var(--fs-body);font-style:normal}
label .o small s{color:var(--ink);opacity:.75}
.tickets .tier.ultra:not(:hover){--sc:1}
.eb-mini{flex-direction:column;justify-content:center;text-align:center;gap:4px}
.eb-mini-clock{justify-content:center}

/* =====================================================================
   EARLY BIRD v3 — one component, two sizes (landing strip · compact form strip)
   offer left (kicker / 15% + "reducere la toate biletele"), countdown right (equal tiles, colon separators)
   ===================================================================== */
.eb-panel.v3{display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(20px,3vw,48px);text-align:left;
  padding:clamp(24px,2.6vw,32px) clamp(24px,3.6vw,52px)}
.eb-panel.v3::before{display:none}
.eb-panel.v3[hidden]{display:none}
.eb-panel.v3 .eb-offer{grid-column:1;grid-row:1;display:grid;justify-items:start;gap:10px}
.eb-panel.v3 .eb-kicker{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);white-space:nowrap}
.eb-panel.v3 .eb-kicker i{width:4.8px;height:4.8px;border-radius:50%;background:var(--cream);opacity:.7}
.eb-panel.v3 .eb-head{display:flex;align-items:center;gap:14px;margin:0}
.eb-panel.v3 .eb-pct{font-family:var(--font-display);font-weight:700;font-size:calc(var(--fs-display) * 1.3);line-height:.9;letter-spacing:-.02em;color:var(--cream)}
.eb-panel.v3 .eb-word{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lead);line-height:1.15;color:var(--cream);padding-left:14px;border-left:1px solid rgba(242,96,24,.55)}
.eb-panel.v3 .eb-clock{grid-column:2;grid-row:1;display:grid;justify-items:center;gap:10px}
.eb-panel.v3 .eb-cap{font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--cream)}
.eb-panel.v3 .eb-tiles{display:flex;align-items:center;gap:6px}
.eb-panel.v3 .eb-colon{font-family:var(--font-display);font-weight:700;font-size:var(--fs-display);line-height:1;color:var(--orange);opacity:.8;translate:0 -8px}
.eb-panel.v3 .eb-tile{width:clamp(70px,6vw,84px);height:clamp(76px,6.6vw,90px);padding:0;display:grid;align-content:center;justify-items:center;gap:6px;border-radius:14px;
  background:linear-gradient(180deg,rgba(250,240,228,.11),rgba(250,240,228,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(242,96,24,.35)}
.eb-panel.v3 .eb-tile.sec{background:linear-gradient(160deg,#F6793A,var(--orange) 50%,#D94E16);box-shadow:0 10px 26px -10px rgba(242,96,24,.9)}
.eb-panel.v3 .eb-tile b{font-size:var(--fs-display);line-height:1}
.eb-panel.v3 .eb-tile small{font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1}
@media (max-width:860px){
  .eb-panel.v3{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px;padding:24px 14px}
  .eb-panel.v3 .eb-offer{justify-items:center}
  .eb-panel.v3 .eb-clock{grid-column:1;grid-row:2}
}
@media (max-width:420px){
  .eb-panel.v3 .eb-tile{width:62px;height:70px}
  .eb-panel.v3 .eb-tiles{gap:3px}
  .eb-panel.v3 .eb-colon{font-size:var(--fs-lead);translate:0 -6px}
}

/* compact (sign-up form): the same parts, stacked and smaller, inside the card */
.form-card .eb-panel.v3.eb-compact{width:auto;left:auto;translate:none;margin:4px 0 2px;grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px;padding:16px 12px 18px;border-radius:16px}
.eb-compact .eb-offer{justify-items:center;gap:6px}
.eb-compact .eb-head{gap:10px}
.eb-compact .eb-pct{font-size:var(--fs-display)!important}
.eb-compact .eb-word{font-size:var(--fs-body)!important;font-family:var(--font-text)!important;padding-left:10px;text-align:left}
.eb-compact .eb-clock{grid-column:1!important;grid-row:2!important;gap:8px}
.eb-compact .eb-tiles{gap:4px}
.eb-compact .eb-tile{width:56px!important;height:58px!important;border-radius:11px!important;gap:4px!important}
.eb-compact .eb-tile b{font-size:var(--fs-lead)!important}
.eb-compact .eb-colon{font-size:var(--fs-lead)!important;translate:0 -6px!important}

/* sign-up form · the date pill: the dot travels with the first line when the text wraps */
.form-card .counter{display:block;text-align:center;text-wrap:balance;padding:8px 12px;line-height:1.45}
.form-card .counter i{display:inline-block;vertical-align:middle;margin:-2px 8px 0 0}

/* sign-up form · ticket options: equal-height cards, name on top, prices aligned at the bottom */
.choice .opts{align-items:stretch}
.choice label{display:grid}
.choice .o{height:100%;grid-template-rows:1fr auto;align-items:center;gap:6px;padding:.8em .5em}
.choice .o b{align-self:center}
.choice .o small{display:grid;justify-items:center;gap:0;white-space:nowrap}
label .o small s{display:block;margin:0;font-weight:400;color:var(--ink);opacity:.7;text-decoration-color:var(--orange);text-decoration-thickness:1.5px}
label .o small .ebp{display:block;font-family:var(--font-display);font-size:var(--fs-lead);font-weight:700;color:var(--orange);line-height:1.1}
label .o small .ebp i{font-family:var(--font-text);font-size:var(--fs-body);font-style:normal;font-weight:700}
/* phones: one option per row — name left, prices right */
@media (max-width:560px){
  .choice .opts{grid-template-columns:1fr!important}
  .choice .o{grid-template-columns:1fr auto!important;grid-template-rows:auto!important;justify-content:stretch!important;text-align:left;padding:.75em 1em;gap:12px}
  .choice .o b{justify-self:start}
  .choice .o small{justify-items:end;text-align:right}
}
.eb-compact .eb-kicker,.eb-compact .eb-cap{letter-spacing:.12em!important}
@media (max-width:420px){.eb-panel.v3 .eb-kicker,.eb-panel.v3 .eb-cap{letter-spacing:.12em}}

/* Early Bird on the cards v2: no corner ribbon. The seats badge keeps its centred place on the top edge;
   the Early Bird mark lives in the price block — crossed-out price + a small pill in the card's own accent */
.tier .eb-ribbon{display:none!important}
.tiers.eb-live .tier .seats,.tiers.eb-live .tier.vip .seats,.tiers.eb-live .tier.ultra .seats{left:50%!important;right:auto!important;translate:-50% 0!important}
.tier .eb-row{display:none}
.tiers.eb-live .tier .eb-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin-bottom:6px}
.tiers.eb-live .tier .eb-row .eb-old{display:inline;margin:0}
.eb-pill{display:inline-flex;align-items:center;padding:.38em .85em;border-radius:999px;font-family:var(--font-text);font-size:var(--fs-body);font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1;white-space:nowrap;
  background:linear-gradient(110deg,#F6793A,var(--orange) 50%,#D94E16);color:var(--cream);box-shadow:0 6px 16px -8px rgba(242,96,24,.8)}
.tier.vip .eb-pill{background:var(--ink);color:var(--cream);box-shadow:0 6px 16px -8px rgba(26,10,2,.8)}
.tier.ultra .eb-pill{background:linear-gradient(100deg,#FFD9A0,#F7B48C 40%,var(--orange));color:var(--ink)}
.tiers .tier .price .eb-pill{background:linear-gradient(110deg,#F6793A,var(--orange) 50%,#D94E16)!important;color:var(--cream)!important;-webkit-text-fill-color:var(--cream)!important;letter-spacing:.12em!important}
.tiers .tier.vip .price .eb-pill{background:var(--ink)!important;color:var(--cream)!important;-webkit-text-fill-color:var(--cream)!important}
.tiers .tier.ultra .price .eb-pill{background:linear-gradient(100deg,#FFD9A0,#F7B48C 40%,var(--orange))!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important}
.tiers .tier .price .eb-row{color:inherit!important}
@media (max-width:560px){.tiers.eb-live .tier .eb-row{flex-direction:column-reverse;gap:8px}}

/* Ultra VIP: the sparkles float over the card (never in the layout), so its icon, title and price sit at exactly
   the same height as on the other two cards */
.tier.ultra .glints{position:absolute!important;inset:0!important;margin:0!important;height:auto!important;width:auto!important}

/* Early Bird on the cards v3: every element on the card's centre axis — pill, then the crossed-out price,
   then the Early Bird price (same order on every screen size) */
.tiers.eb-live .tier .eb-row{flex-direction:column-reverse;flex-wrap:nowrap;align-items:center;gap:8px;margin-bottom:4px}

/* Early Bird strip (desktop): two equal halves with a hairline on the centre axis (= the middle card's centre);
   the offer is centred in the left half, the countdown in the right half — symmetric with the cards below */
@media (min-width:861px){
  .eb-panel.v3:not(.eb-compact){grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);justify-content:stretch;justify-items:center;align-items:center;gap:0;padding:clamp(26px,2.6vw,34px) 0}
  .eb-panel.v3:not(.eb-compact)::before{display:block;content:"";grid-column:2;grid-row:1;align-self:stretch;width:1px;margin:6px 0;
    background:linear-gradient(180deg,rgba(242,96,24,0),rgba(242,96,24,.55) 30%,rgba(242,96,24,.55) 70%,rgba(242,96,24,0))}
  .eb-panel.v3:not(.eb-compact) .eb-offer{grid-column:1;justify-items:center;text-align:center}
  .eb-panel.v3:not(.eb-compact) .eb-clock{grid-column:3}
}

/* Early Bird strips — strict type system (title / subtitle / body only; one caps label)
   numbers (15% + countdown digits) = title · "reducere la toate biletele" = subtitle · everything else = body */
.eb-panel.v3 .eb-pct{font-size:var(--fs-display)!important;line-height:1}
.eb-panel.v3 .eb-word{font-family:var(--font-display)!important;font-size:var(--fs-lead)!important;font-weight:700;line-height:1.15}
.eb-panel.v3 .eb-cap{font-family:var(--font-text);font-size:var(--fs-body);font-weight:400;letter-spacing:0!important;text-transform:none!important;color:var(--cream)}
.eb-panel.v3 .eb-tile b{font-size:var(--fs-display)!important}
.eb-panel.v3 .eb-tile small{font-size:var(--fs-body)!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important}
.eb-panel.v3 .eb-colon{font-size:var(--fs-display)!important;translate:0 -10px!important}
/* compact (form): same sizes, tiles sized to hold a title-size number + a body-size unit */
.eb-compact .eb-tiles{gap:4px!important}
.eb-compact .eb-tile{width:58px!important;height:68px!important;gap:2px!important}
@media (max-width:420px){.eb-compact .eb-tile{width:54px!important;height:66px!important}.eb-panel.v3 .eb-colon{translate:0 -9px!important}}
@media (min-width:861px){.eb-panel.v3:not(.eb-compact) .eb-tile{width:clamp(84px,7.6vw,108px)!important;height:clamp(92px,8.2vw,116px)!important;gap:4px!important}.eb-panel.v3:not(.eb-compact) .eb-tiles{gap:8px}}
html { scroll-behavior: smooth; }
#bilete { scroll-margin-top: 90px; }

/* ---------- Animations that never freeze (map, stat reel, photo strip) ----------
   everything that keeps moving is a small layer animated by transform/opacity only, which the browser runs on the
   compositor even while the page is busy; the drawings under it are painted once (main.js builds the layers) */
/* map: travelling lights and pin pulses, between the routes and the pins */
:root{--fx-layers:1} /* main.js builds the layers only when this stylesheet is the one loaded */
.win-map .map-fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;--k:1.79px}
.map-fx i{position:absolute;left:0;top:0;display:block}
.map-fx .m-spark{height:calc(var(--k) * 2.6);border-radius:999px;background:#F26018;box-shadow:0 0 calc(var(--k) * 2.2) rgba(242,96,24,.8);
  opacity:0;transform-origin:0 0;will-change:transform,opacity}
@media (hover:none),(max-width:760px){.map-fx .m-spark{height:calc(var(--k) * 3)}}
.map-fx .m-pulse{width:calc(var(--k) * 10);height:calc(var(--k) * 10);border-radius:50%;background:rgba(242,96,24,.28);opacity:0;transform:translate(-50%,-50%)}
.win-map.in .m-pulse{animation:mPulse 2.6s ease-out calc(1s + var(--i) * .22s) infinite}
@keyframes mPulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}100%{transform:translate(-50%,-50%) scale(3.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.win-map .m-pulse{animation:none;opacity:1}}

/* stat reel: the drawing breathes and beats as one layer; glints, sheen, ripples and cursor are layers over its box */
.stat-reel.fx .reel-stage .morph{animation:none;will-change:auto}
.stat-reel.fx .morph .beat{animation:none!important}
.m-lay,.m-beat{position:absolute;inset:0;transform-origin:50% 48%}
.m-lay{animation:morphBreathe 5s ease-in-out infinite;will-change:transform}
.m-beat{will-change:transform}
.m-lay.formed[data-k="1"] .m-beat{animation:beat .9s cubic-bezier(.3,0,.3,1)}
.m-lay.formed[data-k="2"] .m-beat{animation:press .45s var(--ease) 1s}
.m-fx{position:absolute;pointer-events:none}
.m-fx i{position:absolute;display:block}
.m-fx svg{display:block;width:100%;height:100%;overflow:visible}
.m-glint{opacity:0;transform:scale(.3)}
.m-glint path{fill:#FFFFFF;stroke:#F26018;stroke-width:1.2px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.m-glint svg{filter:drop-shadow(0 0 1.5px rgba(242,96,24,.9))}
.m-lay.formed[data-k="0"] .m-glint{animation:mFlash 2.4s cubic-bezier(.3,0,.3,1) var(--gd) infinite}
@keyframes mFlash{0%,100%{opacity:0;transform:scale(.3)}6%{opacity:1;transform:scale(1.25)}18%{opacity:0;transform:scale(.7)}}
/* the sheen crosses the diamond twice (clipped to its outline) */
.m-sheen{position:absolute;inset:0;clip-path:polygon(50% 15.517%,61.667% 15.517%,73.333% 29.31%,50% 83.448%,26.667% 29.31%,38.333% 15.517%)}
.m-sheen i{left:21.667%;top:3.448%;width:15%;height:89.655%;opacity:0;transform-origin:0 -23.077%;transform:translateX(-133.333%) skewX(-20deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0))}
.m-lay.formed[data-k="0"] .m-sheen i{animation:mSheen2 .8s cubic-bezier(.45,0,.25,1) .05s forwards,mSheen2 .8s cubic-bezier(.45,0,.25,1) 2.1s forwards}
@keyframes mSheen2{0%{opacity:0;transform:translateX(-133.333%) skewX(-20deg)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(422.222%) skewX(-20deg)}}
/* the play button: ripples, and a cursor that glides in and presses it */
.m-ripple{left:30.333%;top:7.586%;width:39.333%;height:81.379%;border:1.4px solid rgba(242,96,24,.5);border-radius:50%;opacity:0}
.m-lay.formed[data-k="2"] .m-ripple{animation:ripple 2s cubic-bezier(.16,1,.3,1) 1.05s infinite}
.m-lay.formed[data-k="2"] .m-ripple.r2{animation-delay:2.05s}
.m-cursor{left:0;top:0;width:6.75%;height:20.172%;opacity:0;transform:translate(1280.247%,510.256%)}
.m-cursor path{fill:var(--ink);stroke:var(--cream);stroke-width:1.6px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.m-cursor svg{transform-origin:3.704% 2.564%}
.m-lay.formed[data-k="2"] .m-cursor{animation:mGlide .9s cubic-bezier(.65,0,.35,1) forwards,mCursorOut .5s ease 1.4s forwards}
.m-lay.formed[data-k="2"] .m-cursor svg{animation:mClick .3s var(--ease) .95s}
@keyframes mGlide{0%{opacity:0;transform:translate(1280.247%,510.256%)}25%{opacity:1}100%{opacity:1;transform:translate(860.494%,308.547%)}}
@keyframes mCursorOut{from{opacity:1;transform:translate(860.494%,308.547%)}to{opacity:0;transform:translate(909.877%,349.573%)}}
@keyframes mClick{50%{transform:scale(.82)}}
@media (prefers-reduced-motion:reduce){.m-lay,.m-beat,.m-fx i,.m-fx svg{animation:none!important}}
/* buttons: the light streak is a slanted band moved by transform (same path, timing and light as before) */
.btn.sh2,.btn.big.sh2{animation:none}
.pcta .btn.big.sh2,.final .cta-stack .btn.big.sh2,.invite-card .btn.big.sh2{animation:ctaglow2 3.2s ease-in-out infinite}
.btn-sh{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1;pointer-events:none}
.btn-sh i{position:absolute;left:0;top:0;width:38%;height:100%;display:block;transform:translateX(-155.3%) skewX(-22deg);
  background:linear-gradient(90deg,rgba(255,240,228,0),rgba(255,240,228,.5),rgba(255,240,228,0));
  animation:btnshine2 6s cubic-bezier(.45,0,.25,1) 1.8s infinite}
.btn.ink .btn-sh i{background:linear-gradient(90deg,rgba(255,226,204,0),rgba(255,226,204,.28),rgba(255,226,204,0))}
@keyframes btnshine2{0%{transform:translateX(-155.3%) skewX(-22deg)}26%,100%{transform:translateX(318.4%) skewX(-22deg)}}