/* ===========================================================================
   SERGIO ACADEMY — BUSINESS GROWTH SERIES
   site.css
   ---------------------------------------------------------------------------
   Design principles (please keep to these when editing)

   1. ONE accent.        Gold (#F0932B, from the Sergio Academy mark) is the only
                         colour on the page. Everything else is black, white and
                         warm neutral grey. Restraint is what reads as premium.
   2. Solid black ends.  Header and footer are #000 — no gradients, no blur.
   3. No decoration.     No blobs, no glows, no floating shapes, no gradient
                         meshes, no emoji. Structure comes from space, hairlines
                         and typography, never from ornament.
   4. Space is the tool. Generous, consistent vertical rhythm. If a section feels
                         weak, it usually needs more room, not more elements.
   5. Motion is quiet.   Slow, small, single-purpose. Nothing bounces.

   Contents
     1  Tokens
     2  Reset & base
     3  Layout
     4  Typography
     5  Buttons & links
     6  Status pills
     7  Header
     8  Hero
     9  Countdown
     10 Cards & lists
     11 Media
     12 Sponsors
     13 Journey & roadmap
     14 Speaker
     15 FAQ
     16 Dark bands
     17 Registration form
     18 Confirmation
     19 Footer
     20 Sticky CTA & modal
     21 Motion
     22 Responsive
     23 Reduced motion / print
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1  TOKENS
   --------------------------------------------------------------------------- */
:root{
  /* Surfaces */
  --black:      #000000;   /* header, footer — solid, always */
  --ink:        #0A0A0A;   /* dark feature bands */
  --ink-2:      #141416;
  --white:      #FFFFFF;
  --bone:       #FAFAF8;   /* warm off-white */
  --stone:      #F4F3F0;   /* warm grey */

  /* Ink */
  --text:       #0F0F10;
  --text-2:     #4A4A4E;
  --text-3:     #6A6A70;
  --on-black:   #FFFFFF;
  --on-black-2: #A8A8AC;

  /* Lines */
  --line:       #E7E5E0;
  --line-2:     #D8D5CE;
  --line-dark:  rgba(255,255,255,.12);

  /* The single accent.
     --gold      is a FILL. It carries dark text (7.9:1).
     --gold-ink  is gold as TEXT or an ICON on a light surface (5.9:1).
                 The fill only reaches 2.7:1 on white, so it is never used for
                 words on a light background. */
  --gold:       #F0932B;
  --gold-600:   #DD8010;
  --gold-ink:   #96540A;
  --gold-050:   #FDF6EC;
  --gold-100:   #F8E7CC;
  --on-gold:    #1A1200;
  --gold-soft:  #E8B87A;   /* gold as text on black */

  --ok:         #167C43;
  --ok-bg:      #EAF5EE;

  /* Type */
  --display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rhythm — one scale, used everywhere */
  --section: clamp(5rem, 9vw, 9rem);      /* vertical padding, every section */
  --gap:     clamp(1.25rem, 2vw, 1.75rem);/* grid gap, every grid */

  /* Shape */
  --wrap: 1180px;
  --wrap-narrow: 720px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Elevation — barely there. A hairline does most of the work. */
  --sh-1: 0 1px 2px rgba(15,15,16,.04);
  --sh-2: 0 2px 6px rgba(15,15,16,.04), 0 12px 24px -12px rgba(15,15,16,.10);
  --sh-3: 0 4px 10px rgba(15,15,16,.05), 0 28px 50px -22px rgba(15,15,16,.16);

  /* Motion */
  --ease:  cubic-bezier(.22,.61,.36,1);
  --out:   cubic-bezier(.16,1,.3,1);
}


/* ---------------------------------------------------------------------------
   2  RESET & BASE
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* The browser's own [hidden]{display:none} lives in the UA stylesheet, so ANY
   author rule that sets `display` beats it — a `hidden` element with
   `.foo{display:flex}` stays visible. Several elements here are toggled with the
   hidden attribute (the live-countdown banner, the seats bar, the form buttons),
   so this has to be enforced explicitly. */
[hidden]{display:none!important}
body{
  background:var(--white);
  color:var(--text-2);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul{list-style:none}
strong,b{color:var(--text);font-weight:600}
::selection{background:var(--gold);color:var(--on-gold)}

:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:2px}
.site-header :focus-visible,.site-footer :focus-visible,
.hero :focus-visible,.band-dark :focus-visible{outline-color:var(--gold)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--gold);color:var(--on-gold);
  padding:.9rem 1.5rem;font-weight:600;
}
.skip:focus{left:0;top:0}


/* ---------------------------------------------------------------------------
   3  LAYOUT
   --------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:1.75rem}
.wrap-narrow{max-width:var(--wrap-narrow)}

.section{position:relative;padding-block:var(--section)}
.section--tight{padding-block:calc(var(--section) * .58)}

/* Surfaces. Sections separate by ground, not by borders. */
.s-white{background:var(--white)}
.s-bone {background:var(--bone)}
.s-stone{background:var(--stone)}

/* Hairline divider — the only "decoration" on the site */
.s-white + .s-white,.s-bone + .s-bone{border-top:1px solid var(--line)}

.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(3rem,6vw,6rem);align-items:center;
}
.split--wide-media{grid-template-columns:1.1fr .9fr}
.split--wide-copy {grid-template-columns:.9fr 1.1fr}
.split--reverse .split__media{order:2}
.split--top{align-items:start}


/* ---------------------------------------------------------------------------
   4  TYPOGRAPHY
   --------------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);color:var(--text);
  font-weight:600;line-height:1.16;letter-spacing:-.022em;
}
.h-hero{
  font-size:clamp(2.5rem,5.6vw,4.5rem);
  line-height:1.04;letter-spacing:-.038em;font-weight:600;
}
.h1{font-size:clamp(2.1rem,4.2vw,3.4rem);letter-spacing:-.032em}
.h2{font-size:clamp(1.85rem,3.2vw,2.75rem);letter-spacing:-.03em}
.h3{font-size:clamp(1.1rem,1.45vw,1.28rem);letter-spacing:-.012em;line-height:1.4}

/* Eyebrow — quiet, never shouty */
.eyebrow{
  display:block;
  font-family:var(--display);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);
  margin-bottom:1.35rem;
}
.eyebrow--muted{color:var(--text-3)}
.eyebrow--light{color:var(--gold-soft)}

.lede{
  font-size:clamp(1.08rem,1.35vw,1.22rem);line-height:1.65;
  color:var(--text-2);max-width:56ch;
}
.muted{color:var(--text-3)}
.small{font-size:.9rem}
.xs{font-size:.78rem}

/* Section header — one component, identical everywhere */
.section-head{max-width:58ch;margin-bottom:clamp(3rem,4.5vw,4.5rem)}
.section-head .h2{margin-bottom:1.15rem}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .lede{margin-inline:auto}

.rule{height:1px;background:var(--line);border:0;margin-block:clamp(3.5rem,6vw,5.5rem)}

.accent{color:var(--gold-ink)}


/* ---------------------------------------------------------------------------
   5  BUTTONS & LINKS
   --------------------------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--display);font-weight:600;font-size:.94rem;line-height:1;
  padding:1.1rem 1.9rem;min-height:54px;
  border:1px solid transparent;border-radius:var(--r-pill);
  background:var(--gold);color:var(--on-gold);cursor:pointer;
  transition:background .25s var(--ease), transform .3s var(--out),
             box-shadow .3s var(--out), color .25s var(--ease), border-color .25s var(--ease);
  text-align:center;
  /* Never overflow its container, and never be inflated by its own children.
     Nothing is injected into a button at runtime, but if anything ever is,
     it is clipped instead of blowing the button out of shape. */
  max-width:100%;
  overflow:hidden;
}
.btn > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.btn:hover{background:var(--gold-600);transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(240,147,43,.9)}

/* The press. CSS only — a small, fast dip. Nothing that can break layout. */
.btn:active{transform:translateY(0) scale(.985);box-shadow:none;transition-duration:.05s}
.btn--line:active,.btn--onblack:active{transform:translateY(0) scale(.985)}

.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;flex:none;
  transition:transform .35s var(--out)}
.btn:hover svg{transform:translateX(3px)}

/* Secondary — hairline, no fill */
.btn--line{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn--line:hover{background:transparent;color:var(--text);border-color:var(--text);box-shadow:none;transform:translateY(-1px)}

/* On black */
.btn--onblack{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn--onblack:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff;box-shadow:none}

.btn--lg{padding:1.25rem 2.3rem;font-size:1rem;min-height:60px}
.btn--sm{padding:.7rem 1.3rem;font-size:.85rem;min-height:44px}
.btn--block{display:flex;width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important}

.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.btn-row--center{justify-content:center}

/* Text link — underline draws in on hover */
.link{
  display:inline-flex;align-items:center;gap:.45rem;position:relative;
  font-family:var(--display);font-weight:600;font-size:.94rem;color:var(--text);
}
.link::after{
  content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--out);
}
.link:hover::after{transform:scaleX(1)}
.link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  transition:transform .35s var(--out)}
.link:hover svg{transform:translateX(3px)}


/* ---------------------------------------------------------------------------
   6  STATUS PILLS
   Labels are kept SHORT on purpose — a pill that truncates looks broken.
   --------------------------------------------------------------------------- */
.pill{
  display:inline-flex;align-items:center;gap:.45rem;flex:none;
  padding:.4rem .8rem;border-radius:var(--r-pill);
  font-family:var(--display);font-size:.68rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  background:var(--stone);border:1px solid var(--line);color:var(--text-3);
}
.pill--open   {background:var(--ok-bg);   border-color:#C7E4D3; color:var(--ok)}
.pill--closing{background:var(--gold-050); border-color:var(--gold-100); color:var(--gold-ink)}
.pill--full   {background:#FBECEC;        border-color:#EFCFCF; color:#A32B2B}
.pill--done   {background:var(--stone);   border-color:var(--line); color:var(--text-3)}
.pill--free   {background:var(--gold-050); border-color:var(--gold-100); color:var(--gold-ink)}
.pill--soon   {background:var(--stone);   border-color:var(--line); color:var(--text-3)}

/* Pills on black */
.hero .pill,.band-dark .pill,.reg__head .pill{
  background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:#fff;
}
.hero .pill--open,.band-dark .pill--open{background:rgba(22,124,67,.28);border-color:rgba(120,220,165,.42);color:#9BE7BC}
.hero .pill--free,.band-dark .pill--free,.reg__head .pill--free{
  background:rgba(240,147,43,.20);border-color:rgba(240,147,43,.45);color:var(--gold-soft);
}

.dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.dot--live{animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}


/* ---------------------------------------------------------------------------
   7  HEADER — solid black
   --------------------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--black);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:border-color .3s ease;
}
.site-header.is-stuck{border-bottom-color:rgba(255,255,255,.14)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:84px}

/* The Sergio Academy mark is artworked on a black ground, so it sits
   seamlessly on the black header. Do not add a background behind it. */
.brand{display:flex;align-items:center;flex:none}
.brand img{height:60px;width:auto}

.nav{display:flex;align-items:center;gap:1.75rem}
.nav a{
  position:relative;font-family:var(--display);font-weight:500;font-size:.76rem;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.72);
  padding-block:.35rem;transition:color .25s var(--ease);
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--gold);transition:width .4s var(--out);
}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.is-active::after{width:100%}
.nav a.is-active{color:#fff}

.nav .btn{display:none}
.nav a.btn{color:var(--on-gold);text-transform:none;letter-spacing:0;font-size:.9rem}
.nav a.btn::after{display:none}
.header-cta{flex:none}

.nav-toggle{
  display:none;width:44px;height:44px;flex:none;position:relative;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:var(--r-sm);
}
.nav-toggle span{
  position:absolute;left:12px;right:12px;height:1.5px;background:#fff;
  transition:transform .35s var(--out), opacity .2s ease;
}
.nav-toggle span:nth-child(1){top:15px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:27px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}


/* ---------------------------------------------------------------------------
   8  HERO — photograph, black scrim, nothing else
   --------------------------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;
  min-height:min(88vh,820px);
  display:grid;align-items:center;
  padding-block:clamp(5rem,9vw,7.5rem);
  color:#fff;overflow:hidden;background:var(--black);
}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
/* One scrim. Directional, so the left column stays legible and the right
   side of the photograph stays visible. */
.hero__media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(96deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.80) 40%, rgba(0,0,0,.38) 74%, rgba(0,0,0,.28) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 28%, rgba(0,0,0,.55) 100%);
}

.hero__inner{max-width:43rem}
.hero .eyebrow{color:var(--gold-soft)}
.hero .h-hero{color:#fff;margin-bottom:1.6rem}
.hero__lede{
  font-size:clamp(1.08rem,1.3vw,1.22rem);line-height:1.65;
  color:rgba(255,255,255,.78);max-width:44ch;margin-bottom:2.25rem;
}
.hero__trust{
  display:flex;align-items:center;gap:.5rem;margin-top:1.75rem;
  color:rgba(255,255,255,.5);font-size:.84rem;
}
.hero__trust svg{width:14px;height:14px;fill:none;stroke:var(--gold-soft);stroke-width:2;flex:none}

/* Event meta — a hairline rail, not a row of bubbles */
.event-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.75rem;
  padding:1.1rem 0;margin-bottom:2.25rem;
  border-top:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.event-meta li{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.88rem;color:rgba(255,255,255,.8);white-space:nowrap;
}
.event-meta li b{color:#fff;font-weight:600}
.event-meta svg{width:15px;height:15px;stroke:var(--gold-soft);fill:none;stroke-width:1.6;flex:none}


/* ---------------------------------------------------------------------------
   9  COUNTDOWN
   --------------------------------------------------------------------------- */
.countdown{display:flex;gap:.5rem;margin-bottom:2.25rem}
.cd-unit{
  flex:1;min-width:0;max-width:96px;text-align:center;
  padding:.85rem .4rem;border-radius:var(--r);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
}
.cd-unit .v{
  display:block;font-family:var(--display);font-weight:600;color:#fff;
  font-size:clamp(1.45rem,2.3vw,1.85rem);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.cd-unit .v.tick{animation:tick .5s var(--out)}
@keyframes tick{0%{opacity:0;transform:translateY(-30%)}100%{opacity:1;transform:none}}
.cd-unit .u{
  display:block;margin-top:.45rem;font-size:.62rem;color:rgba(255,255,255,.5);
  letter-spacing:.15em;text-transform:uppercase;
}

.countdown--light .cd-unit{background:var(--white);border-color:var(--line)}
.countdown--light .cd-unit .v{color:var(--text)}
.countdown--light .cd-unit .u{color:var(--text-3)}

.countdown-live-msg{
  display:flex;align-items:center;gap:.6rem;margin-bottom:2rem;
  padding:1rem 1.25rem;border-radius:var(--r);
  background:rgba(22,124,67,.2);border:1px solid rgba(120,220,165,.35);
  color:#9BE7BC;font-family:var(--display);font-weight:600;font-size:.94rem;
}

.seats{margin-bottom:2rem;max-width:380px}
.seats__row{display:flex;justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.6);margin-bottom:.6rem}
.seats__row b{color:var(--gold-soft)}
.seats__track{height:3px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.seats__fill{height:100%;width:0;border-radius:99px;background:var(--gold);transition:width 1.6s var(--out)}


/* ---------------------------------------------------------------------------
   10  CARDS & LISTS
   --------------------------------------------------------------------------- */
.card{
  display:flex;flex-direction:column;
  padding:2.25rem 2rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:transform .5s var(--out), box-shadow .5s var(--out), border-color .3s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.card h3{margin-bottom:.7rem}
.card p{font-size:.95rem;color:var(--text-2)}

/* Icon — a hairline square, not a coloured blob */
.card__icon{
  width:44px;height:44px;flex:none;margin-bottom:1.5rem;
  display:grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--white);
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.card:hover .card__icon{border-color:var(--gold);background:var(--gold-050)}
.card__icon svg{width:19px;height:19px;stroke:var(--gold-ink);fill:none;stroke-width:1.6}

/* Agenda number — typographic, not a badge */
.card__num{
  display:block;margin-bottom:1.1rem;
  font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.14em;
  color:var(--text-3);
  transition:color .3s var(--ease);
}
.card:hover .card__num{color:var(--gold-ink)}

/* Tick list */
.tick-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1.15rem 3rem}
.tick-list li{
  display:flex;gap:.9rem;align-items:flex-start;
  font-size:.98rem;color:var(--text-2);line-height:1.55;
}
.tick-list li svg{
  width:16px;height:16px;flex:none;margin-top:.3rem;
  stroke:var(--gold-ink);fill:none;stroke-width:2.5;
  transition:transform .35s var(--out);
}
.tick-list li:hover svg{transform:scale(1.15)}
.band-dark .tick-list li{color:rgba(255,255,255,.72)}
.band-dark .tick-list li svg{stroke:var(--gold-soft)}

/* Audience — a plain, elegant column list rather than a cloud of chips */
.who-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem;
  border-top:1px solid var(--line);
}
.who-list li{
  display:flex;align-items:center;gap:1rem;
  padding:1.05rem 0;border-bottom:1px solid var(--line);
  font-size:.98rem;color:var(--text-2);
  transition:color .3s var(--ease), padding-left .35s var(--out);
}
.who-list li::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--line-2);flex:none;
  transition:background .3s var(--ease), transform .35s var(--out);
}
.who-list li:hover{color:var(--text);padding-left:.4rem}
.who-list li:hover::before{background:var(--gold);transform:scale(1.4)}

/* Question list */
.q-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem;border-top:1px solid var(--line)}
.q-list li{
  display:flex;gap:1.1rem;align-items:baseline;
  padding:1.15rem 0;border-bottom:1px solid var(--line);
  font-size:.98rem;color:var(--text-2);
  transition:color .3s var(--ease), padding-left .35s var(--out);
}
.q-list li:hover{color:var(--text);padding-left:.4rem}
.q-list .qm{
  font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.1em;
  color:var(--text-3);flex:none;
  transition:color .3s var(--ease);
}
.q-list li:hover .qm{color:var(--gold-ink)}

/* Resource */
.resource{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.5rem 0;border-top:1px solid var(--line);
  transition:padding-left .35s var(--out);
}
.resource:hover{padding-left:.4rem}
.resource > svg{width:18px;height:18px;stroke:var(--gold-ink);fill:none;stroke-width:1.6;flex:none;margin-top:.25rem}
.resource b{display:block;font-family:var(--display);font-weight:600;font-size:.97rem;color:var(--text);margin-bottom:.1rem}
.resource span{font-size:.86rem;color:var(--text-3)}
.band-dark .resource{border-top-color:var(--line-dark)}
.band-dark .resource b{color:#fff}
.band-dark .resource span{color:var(--on-black-2)}
.band-dark .resource > svg{stroke:var(--gold-soft)}

/* Expertise */
.expertise{display:grid;grid-template-columns:repeat(3,1fr);gap:0 3rem;border-top:1px solid var(--line)}
.expertise li{
  padding:1rem 0;border-bottom:1px solid var(--line);
  font-size:.94rem;color:var(--text-2);
  transition:color .3s var(--ease),padding-left .35s var(--out);
}
.expertise li:hover{color:var(--text);padding-left:.4rem}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stats .fact{padding:0 2rem;border-left:1px solid var(--line)}
.stats .fact:first-child{border-left:0;padding-left:0}
.stats .num{
  display:block;font-family:var(--display);font-weight:600;color:var(--text);
  font-size:clamp(2.4rem,3.8vw,3.25rem);letter-spacing:-.04em;line-height:1;
}
.stats .lbl{
  display:block;margin-top:.85rem;font-size:.8rem;color:var(--text-3);
  letter-spacing:.02em;
}

/* Empty state */
.empty{
  text-align:center;padding:clamp(3.5rem,6vw,5.5rem) 2rem;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
}
.empty h3{margin-bottom:.8rem;font-size:1.3rem}
.empty p{color:var(--text-3);max-width:52ch;margin-inline:auto}

/* Testimonial */
.quote{
  display:flex;flex-direction:column;padding:2.25rem 2rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  transition:transform .5s var(--out),box-shadow .5s var(--out);
}
.quote:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.quote p{color:var(--text);font-size:1.02rem;line-height:1.65;margin-bottom:1.6rem}
.quote footer{margin-top:auto;padding-top:1.3rem;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--text-3)}


/* ---------------------------------------------------------------------------
   11  MEDIA
   --------------------------------------------------------------------------- */
.media{
  position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--stone);
}
.media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.4s var(--out)}
.media:hover img{transform:scale(1.03)}
.media--4x3 {aspect-ratio:4/3}
.media--3x2 {aspect-ratio:3/2}
.media--4x5 {aspect-ratio:4/5}
.media--16x9{aspect-ratio:16/9}

/* Image reveal — a slow curtain, once, on scroll */
.media--reveal img{clip-path:inset(0 0 100% 0);transform:scale(1.06)}
.media--reveal.is-in img{
  clip-path:inset(0 0 0 0);transform:scale(1);
  transition:clip-path 1.3s var(--out), transform 1.6s var(--out);
}

/* Caption plate */
.media__plate{
  position:absolute;left:1.5rem;bottom:1.5rem;right:1.5rem;z-index:2;
  padding:1.1rem 1.3rem;border-radius:var(--r);
  background:rgba(0,0,0,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.media__plate b{display:block;font-family:var(--display);font-size:.98rem;color:#fff;margin-bottom:.15rem}
.media__plate span{font-size:.84rem;color:rgba(255,255,255,.72)}

/* Figure caption — the credit line under a photo */
.figcap{margin-top:.9rem;font-size:.78rem;color:var(--text-3);letter-spacing:.02em}


/* ---------------------------------------------------------------------------
   12  SPONSORS
   Each logo keeps its own artwork ground (Sergio Academy is set on black,
   Mr Gowns on white), so both are shown on a matching plate. That is the
   correct way to present supplied brand assets — never recolour a logo.
   --------------------------------------------------------------------------- */
.sponsors{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);
  max-width:820px;margin-inline:auto;
}
.sponsor{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;
  padding:2.5rem 2rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);
  transition:transform .5s var(--out),box-shadow .5s var(--out),border-color .3s var(--ease);
}
.sponsor:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--line-2)}
/* The logo is given an explicit height and object-fit, never left to size itself.
   A percentage max-height on a replaced element is unreliable here — the image's
   intrinsic size wins and it blows straight out of the plate. */
.sponsor__plate{
  width:100%;height:140px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);padding:1.25rem;
}
.sponsor__plate--dark {background:var(--black)}
.sponsor__plate--light{background:var(--white);border:1px solid var(--line)}
.sponsor__plate img{
  height:100%;width:auto;max-width:100%;object-fit:contain;display:block;
}
.sponsor b{font-family:var(--display);font-size:1.02rem;color:var(--text)}
.sponsor span{font-size:.88rem;color:var(--text-3);max-width:34ch}

/* Compact logo rail under the hero */
.trust-rail{
  display:flex;align-items:center;justify-content:center;gap:2.25rem;flex-wrap:wrap;
}
.trust-rail__label{
  font-family:var(--display);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);
}
.trust-rail__logo{
  height:60px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:.5rem 1rem;border-radius:var(--r-sm);
}
.trust-rail__logo img{
  height:100%;width:auto;max-width:160px;object-fit:contain;display:block;
}
.trust-rail__logo--dark{background:var(--black);padding-inline:1.1rem}
.trust-rail__sep{width:1px;height:28px;background:var(--line);flex:none}


/* ---------------------------------------------------------------------------
   13  JOURNEY & ROADMAP
   --------------------------------------------------------------------------- */
.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);position:relative}
.journey::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);
}
.journey__progress{
  position:absolute;left:0;top:0;height:1px;width:0;background:var(--gold);
  transition:width .15s linear;
}
.jstep{padding-top:2.25rem;position:relative}
.jstep::before{
  content:'';position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;
  background:var(--line-2);
  transition:background .5s var(--ease),transform .5s var(--out);
}
.jstep.is-in::before{background:var(--gold);transform:scale(1.35)}
.jstep__q{
  font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:.9rem;
  transition:color .4s var(--ease);
}
.jstep.is-in .jstep__q{color:var(--gold-ink)}
.jstep h3{margin-bottom:.75rem}
.jstep p{font-size:.93rem;color:var(--text-3)}
.jstep__now{margin-top:1.1rem}

/* Roadmap card.
   The quarter label and status sit on their own line with room to breathe —
   the status label is short so it can never truncate. */
.roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.rm-card{
  position:relative;display:flex;flex-direction:column;
  padding:2rem 1.75rem;border-radius:var(--r);
  background:var(--white);border:1px solid var(--line);
  transition:transform .5s var(--out),box-shadow .5s var(--out),border-color .3s var(--ease);
}
.rm-card:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.rm-card--next{border-color:var(--text);box-shadow:var(--sh-2)}
.rm-card--next:hover{border-color:var(--text)}

.rm-card__top{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding-bottom:1.25rem;margin-bottom:1.25rem;border-bottom:1px solid var(--line);
}
.rm-card__q{
  font-family:var(--display);font-weight:600;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);
}
.rm-card--next .rm-card__q{color:var(--gold-ink)}
.rm-card__phase{
  font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:.7rem;
}
.rm-card h3{font-size:1.08rem;margin-bottom:.7rem;line-height:1.4}
.rm-card p{font-size:.9rem;color:var(--text-3);flex:1;margin-bottom:1.5rem}
.rm-card__date{
  font-size:.8rem;color:var(--text-3);padding-top:1.15rem;
  border-top:1px solid var(--line);margin-bottom:1.25rem;
}
.rm-card__cta{display:flex;gap:.5rem;flex-wrap:wrap}
.rm-card__cta .btn{flex:1 1 auto}


/* ---------------------------------------------------------------------------
   14  SPEAKER
   --------------------------------------------------------------------------- */
.speaker{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(3rem,6vw,6rem);align-items:center}
.speaker__media .media{aspect-ratio:4/5}
.speaker__name{margin-bottom:.45rem}
.speaker__role{
  font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--gold-ink);margin-bottom:.3rem;
}
.speaker__company{color:var(--text-3);font-size:.92rem;margin-bottom:1.75rem}
.speaker__creds{
  display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-bottom:2rem;
  padding-block:1rem;border-block:1px solid var(--line);
}
.speaker__creds li{
  font-family:var(--display);font-size:.76rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);
}
.speaker__bio p{margin-bottom:1.15rem}
.speaker__bio p:last-child{margin-bottom:0}

/* Pull-quote — a hairline, not a coloured box */
.motto{
  margin-top:2.25rem;padding-left:1.75rem;border-left:2px solid var(--gold);
  font-family:var(--display);font-size:1.08rem;font-style:italic;line-height:1.6;color:var(--text);
}
.motto cite{
  display:block;margin-top:1rem;font-style:normal;font-family:var(--body);
  font-size:.76rem;color:var(--text-3);letter-spacing:.12em;text-transform:uppercase;
}


/* ---------------------------------------------------------------------------
   15  FAQ
   --------------------------------------------------------------------------- */
.faq{max-width:820px;margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.6rem 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--text);
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-ink)}
.faq summary .plus{position:relative;width:14px;height:14px;flex:none}
.faq summary .plus::before,.faq summary .plus::after{
  content:'';position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:13px;height:1.5px;background:var(--text);
  transition:transform .4s var(--out),background .25s var(--ease);
}
.faq summary .plus::after{transform:rotate(90deg)}
.faq details[open] summary{color:var(--gold-ink)}
.faq details[open] summary .plus::before,
.faq details[open] summary .plus::after{background:var(--gold-ink)}
.faq details[open] summary .plus::after{transform:rotate(0)}
.faq__body{padding:0 0 1.75rem;color:var(--text-2);font-size:.98rem;max-width:70ch}
.faq details[open] .faq__body{animation:fadeUp .45s var(--out)}


/* ---------------------------------------------------------------------------
   16  DARK BANDS
   --------------------------------------------------------------------------- */
.band-dark{background:var(--black);color:var(--on-black-2);position:relative;overflow:hidden}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark b,.band-dark strong{color:#fff}
.band-dark .lede,.band-dark p{color:var(--on-black-2)}
.band-dark .rule{background:var(--line-dark)}
.band-dark .stats .fact{border-left-color:var(--line-dark)}
.band-dark .stats .num{color:#fff}
.band-dark .stats .lbl{color:var(--on-black-2)}

/* Dark band carrying a photograph */
.band-dark--image{isolation:isolate}
.band-dark--image .band-dark__media{position:absolute;inset:0;z-index:-1}
.band-dark--image .band-dark__media img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.band-dark--image .band-dark__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(96deg, rgba(0,0,0,.94), rgba(0,0,0,.82) 50%, rgba(0,0,0,.68));
}


/* ---------------------------------------------------------------------------
   17  REGISTRATION FORM
   --------------------------------------------------------------------------- */
.reg{
  max-width:860px;margin-inline:auto;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden;
}
.reg--overlap{margin-top:clamp(-7rem,-6vw,-4rem);position:relative;z-index:2}

.reg__head{padding:2.25rem 2.5rem 1.75rem;background:var(--black);color:#fff}
.reg__head h2{font-size:1.45rem;color:#fff;margin-block:.9rem .4rem}
.reg__head p{color:var(--on-black-2);font-size:.92rem}

.steps{display:flex;align-items:center;margin-top:1.9rem}
.step{display:flex;align-items:center;gap:.7rem;flex:1;min-width:0}
.step:last-child{flex:none}
.step__dot{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);background:transparent;
  font-family:var(--display);font-size:.75rem;font-weight:600;color:rgba(255,255,255,.5);
  transition:all .45s var(--out);
}
.step__label{
  font-size:.78rem;color:rgba(255,255,255,.5);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:color .3s var(--ease);
}
.step__line{flex:1;min-width:12px;height:1px;background:rgba(255,255,255,.2);
  margin-inline:.9rem;position:relative;overflow:hidden}
.step__line::after{content:'';position:absolute;inset:0;width:0;background:var(--gold);
  transition:width .7s var(--out)}
.step.is-done .step__line::after{width:100%}
.step.is-active .step__dot{border-color:var(--gold);background:var(--gold);color:var(--on-gold)}
.step.is-active .step__label{color:#fff}
.step.is-done .step__dot{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.step.is-done .step__label{color:rgba(255,255,255,.75)}

.reg__body{padding:2.5rem}
.panel{display:none}
.panel.is-active{display:block;animation:fadeUp .5s var(--out)}
.panel h3{font-size:1.2rem;margin-bottom:.45rem}
.panel > p.hint{color:var(--text-3);font-size:.9rem;margin-bottom:2.25rem}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem}
.field{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.field--full{grid-column:1/-1}
.field label,.field legend{font-size:.83rem;font-weight:600;color:var(--text)}
.field label .req{color:var(--gold-ink);margin-left:.1rem}
.field .opt{color:var(--text-3);font-weight:400}

.input,.select,.textarea{
  width:100%;max-width:100%;padding:.95rem 1.05rem;
  background:var(--white);color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-size:.97rem;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.input::placeholder,.textarea::placeholder{color:#9C9CA2}
.input:hover,.select:hover,.textarea:hover{border-color:#B4B1AA}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--text);box-shadow:0 0 0 3px rgba(15,15,16,.07);
}
.textarea{resize:vertical;min-height:120px;line-height:1.6}
.select{
  appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236A6A70' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05rem center;
}

.phone{display:flex;min-width:0}
.phone .cc{
  display:flex;align-items:center;padding:0 .95rem;flex:none;
  background:var(--stone);border:1px solid var(--line-2);border-right:0;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
  font-size:.95rem;color:var(--text-2);font-weight:500;
}
.phone .input{border-radius:0 var(--r-sm) var(--r-sm) 0;min-width:0}

.radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.radio-card{position:relative;cursor:pointer;display:block}
.radio-card input{position:absolute;opacity:0;width:0;height:0}
.radio-card span{
  display:flex;align-items:center;gap:.8rem;height:100%;
  padding:1rem 1.15rem;border-radius:var(--r-sm);
  background:var(--white);border:1px solid var(--line-2);
  font-size:.92rem;color:var(--text-2);
  transition:all .3s var(--out);
}
.radio-card span::before{
  content:'';width:16px;height:16px;border-radius:50%;flex:none;
  border:1px solid var(--line-2);transition:all .3s var(--out);
}
.radio-card:hover span{border-color:#B4B1AA}
.radio-card input:checked + span{border-color:var(--text);color:var(--text);font-weight:500}
.radio-card input:checked + span::before{
  border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 3.5px #fff;
}
.radio-card input:focus-visible + span{outline:2px solid var(--gold-ink);outline-offset:2px}

.check{display:flex;gap:.85rem;align-items:flex-start;cursor:pointer;position:relative}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{
  width:19px;height:19px;flex:none;margin-top:.15rem;border-radius:4px;
  border:1px solid var(--line-2);background:var(--white);
  display:grid;place-items:center;transition:all .25s var(--out);
}
.check .box svg{width:11px;height:11px;stroke:var(--on-gold);fill:none;stroke-width:3;
  opacity:0;transform:scale(.5);transition:all .25s var(--out)}
.check input:checked + .box{background:var(--gold);border-color:var(--gold)}
.check input:checked + .box svg{opacity:1;transform:scale(1)}
.check input:focus-visible + .box{outline:2px solid var(--gold-ink);outline-offset:2px}
.check p{font-size:.88rem;color:var(--text-2);line-height:1.6}
.check a{color:var(--text);text-decoration:underline;text-underline-offset:2px}

.consent-block{
  display:grid;gap:1.2rem;padding:1.75rem;border-radius:var(--r);
  background:var(--bone);border:1px solid var(--line);
}
.popia-note{
  display:flex;gap:.75rem;align-items:flex-start;
  margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--text-3);line-height:1.65;
}
.popia-note svg{width:15px;height:15px;stroke:var(--ok);fill:none;stroke-width:1.7;flex:none;margin-top:.25rem}
.popia-note b{color:var(--text)}

/* Honeypot — must be invisible to people but present in the DOM for bots.
   display:none is avoided because some bots skip those; this is off-screen. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Server-side rejection message, shown above the footer buttons */
.submit-error{
  display:none;align-items:flex-start;gap:.6rem;
  margin:0 2.5rem 1.5rem;padding:1rem 1.25rem;
  background:#FDF0EF;border:1px solid #F0CFCD;border-radius:var(--r-sm);
  color:#B4241F;font-size:.9rem;line-height:1.6;
}

.error-msg{font-size:.8rem;color:#B4241F;display:none;align-items:center;gap:.35rem}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{
  border-color:#D14A44;box-shadow:0 0 0 3px rgba(209,74,68,.09);
}
.field.has-error .error-msg{display:flex}

.reg__foot{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.6rem 2.5rem;border-top:1px solid var(--line);background:var(--bone);
}
.reg__foot .meta{font-size:.82rem;color:var(--text-3)}

.success{display:none;padding:4.5rem 2.5rem;text-align:center}
.success.is-active{display:block;animation:fadeUp .55s var(--out)}
.success__mark{
  width:76px;height:76px;margin:0 auto 2rem;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line-2);
}
.success__mark svg{width:32px;height:32px;stroke:var(--ok);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.success__mark path{stroke-dasharray:48;stroke-dashoffset:48;animation:draw .7s .2s var(--out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.success h2{margin-bottom:.9rem}
.success p{color:var(--text-3);max-width:46ch;margin-inline:auto}


/* ---------------------------------------------------------------------------
   18  CONFIRMATION
   --------------------------------------------------------------------------- */
.confirm{text-align:center;max-width:720px;margin-inline:auto}
.confirm__card{
  margin-top:3rem;padding:0 2rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);text-align:left;
}
.confirm__row{
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.15rem 0;border-bottom:1px solid var(--line);font-size:.95rem;
}
.confirm__row:last-child{border-bottom:0}
.confirm__row span{color:var(--text-3);flex:none}
.confirm__row b{font-family:var(--display);font-weight:600;color:var(--text);text-align:right;min-width:0}

.share-row{display:flex;flex-wrap:wrap;gap:.6rem}
.share-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.15rem;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--line-2);
  font-size:.85rem;font-weight:600;font-family:var(--display);color:var(--text-2);
  transition:all .3s var(--out);
}
.share-btn:hover{transform:translateY(-2px);border-color:var(--text);color:var(--text)}
.share-btn svg{width:15px;height:15px;fill:currentColor}
.share-btn--wa:hover{background:#128C43;border-color:#128C43;color:#fff}


/* ---------------------------------------------------------------------------
   19  FOOTER — solid black
   --------------------------------------------------------------------------- */
.site-footer{background:var(--black);color:var(--on-black-2);padding-top:clamp(4rem,7vw,6rem)}
.footer-top{
  display:grid;grid-template-columns:1.6fr 1fr 1.3fr;gap:4rem;
  padding-bottom:clamp(3rem,5vw,4.5rem);
}
.site-footer h3{
  font-family:var(--display);font-size:.72rem;font-weight:600;color:#fff;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.75rem;
}
.site-footer p{color:var(--on-black-2);font-size:.94rem;max-width:42ch}
.footer-brand img{height:64px;width:auto;margin-bottom:1.75rem}
.footer-links{display:flex;flex-direction:column;gap:.9rem}
.footer-links a{
  color:var(--on-black-2);font-size:.94rem;display:inline-block;width:fit-content;
  transition:color .25s var(--ease),transform .3s var(--out);
}
.footer-links a:hover{color:var(--gold);transform:translateX(4px)}

.socials{display:flex;gap:.6rem;margin-top:2rem}
.socials a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .35s var(--out);
}
.socials a:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-3px)}
.socials svg{width:15px;height:15px;fill:#fff;transition:fill .25s var(--ease)}
.socials a:hover svg{fill:var(--on-gold)}

.footer-legal{
  border-top:1px solid rgba(255,255,255,.1);
  padding:1.9rem 0;font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.45);
}
.footer-legal .wrap{
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
}
.footer-meta{display:flex;gap:1.75rem;flex-wrap:wrap;font-size:.85rem}
.footer-meta a{color:rgba(255,255,255,.7);transition:color .25s var(--ease)}
.footer-meta a:hover{color:var(--gold)}


/* ---------------------------------------------------------------------------
   20  STICKY CTA & MODAL
   --------------------------------------------------------------------------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.9rem 1.75rem;
  background:var(--black);border-top:1px solid rgba(255,255,255,.14);
  transform:translateY(110%);transition:transform .55s var(--out);
}
.sticky-cta.is-visible{transform:translateY(0)}
.sticky-cta__info{min-width:0}
.sticky-cta__info b{
  display:block;font-family:var(--display);font-size:.92rem;color:#fff;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sticky-cta__info span{font-size:.78rem;color:var(--on-black-2)}
.sticky-cta .btn{flex:none}
body.has-sticky{padding-bottom:86px}

.modal{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:1.5rem;
  background:rgba(0,0,0,.7);
}
.modal.is-open{display:grid;animation:fadeIn .3s ease}
.modal__box{
  position:relative;width:100%;max-width:440px;overflow:hidden;
  border-radius:var(--r-lg);background:var(--white);box-shadow:var(--sh-3);
  animation:popIn .5s var(--out);
}
@keyframes popIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.modal__inner{padding:2.5rem 2.25rem 2.25rem;text-align:center}
.modal__close{
  position:absolute;top:1rem;right:1rem;width:32px;height:32px;z-index:2;
  border-radius:50%;border:1px solid var(--line);background:var(--white);cursor:pointer;
  display:grid;place-items:center;transition:border-color .25s,transform .35s var(--out)}
.modal__close:hover{border-color:var(--text);transform:rotate(90deg)}
.modal__close svg{width:12px;height:12px;stroke:var(--text);stroke-width:1.8}
.modal__box h3{font-size:1.4rem;margin-block:1.1rem .7rem}
.modal__box p{color:var(--text-3);font-size:.93rem;margin-bottom:1.75rem}

.scroll-bar{position:fixed;top:0;left:0;height:2px;width:0;z-index:150;background:var(--gold)}


/* ---------------------------------------------------------------------------
   21  MOTION — small, slow, single-purpose
   --------------------------------------------------------------------------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

[data-reveal]{
  opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--out),transform .9s var(--out);
  transition-delay:var(--d,0ms);will-change:opacity,transform;
}
[data-reveal="left"]{transform:translateX(-22px)}
[data-reveal="right"]{transform:translateX(22px)}
[data-reveal="fade"]{transform:none}
[data-reveal].is-in{opacity:1;transform:none}

.split-word{display:inline-block;overflow:hidden;vertical-align:bottom}
.split-word > i{
  display:inline-block;font-style:normal;transform:translateY(100%);
  transition:transform 1s var(--out);transition-delay:var(--wd,0ms);
}
.is-in .split-word > i{transform:none}


/* ---------------------------------------------------------------------------
   22  RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width:1080px){
  .split,.split--wide-media,.split--wide-copy,.speaker{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .speaker__media{max-width:440px}
  .roadmap,.grid-4{grid-template-columns:repeat(2,1fr)}
  .journey{grid-template-columns:repeat(2,1fr);row-gap:3rem}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .expertise{grid-template-columns:repeat(2,1fr)}
  .hero__inner{max-width:none}
  .stats .fact{padding-inline:1.25rem}
}

@media (max-width:900px){
  .nav-toggle{display:block}
  .header-cta{display:none}
  .nav{
    position:fixed;inset:84px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    padding:1rem 1.75rem 2.25rem;background:var(--black);
    border-bottom:1px solid rgba(255,255,255,.1);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .35s var(--out),transform .35s var(--out);
    max-height:calc(100dvh - 84px);overflow-y:auto;
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav a{
    padding:1.1rem 0;font-size:.9rem;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav a::after{display:none}
  .nav .btn{display:flex;width:100%;margin-top:1.5rem;border-bottom:0}
  .footer-top{grid-template-columns:1fr;gap:3rem}
  .site-footer p{max-width:none}
  .footer-legal .wrap{flex-direction:column;text-align:center;gap:1rem}
  .stats{grid-template-columns:repeat(2,1fr);gap:2.75rem 0}
  .stats .fact{padding-inline:0}
  .stats .fact:nth-child(odd){border-left:0}
  .stats .fact:nth-child(even){padding-left:2rem}
}

@media (max-width:760px){
  body{font-size:1rem}
  :root{--section:4.25rem;--gap:1rem}
  .wrap{padding-inline:1.25rem}

  /* Hero: the scrim goes top-down because the copy now sits over the photo */
  .hero{min-height:auto;padding-block:4rem 3.5rem}
  .hero__media::after{
    background:linear-gradient(180deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.78) 45%, rgba(0,0,0,.92) 100%);
  }
  .hero__lede{max-width:none}
  .hero .btn{width:100%}

  /* The meta rail becomes a stacked list — no horizontal squeeze */
  .event-meta{flex-direction:column;align-items:flex-start;gap:.75rem;padding:1.25rem 0}
  .event-meta li{white-space:normal}

  .countdown{gap:.4rem}
  .cd-unit{padding:.7rem .2rem;max-width:none}
  .cd-unit .v{font-size:1.4rem}
  .cd-unit .u{font-size:.55rem;letter-spacing:.08em}

  .grid-2,.grid-3,.grid-4,.roadmap,.journey{grid-template-columns:1fr}
  .tick-list,.radio-cards,.field-grid{grid-template-columns:1fr}
  .who-list,.q-list,.expertise{grid-template-columns:1fr;gap:0}
  .sponsors{grid-template-columns:1fr}
  .journey{row-gap:2.25rem}

  .card{padding:1.75rem 1.5rem}
  .section-head{margin-bottom:2.5rem}

  /* Buttons never overflow, and stack to full width */
  .btn-row{gap:.7rem}
  .btn-row > .btn{flex:1 1 100%;width:100%}
  .btn{padding-inline:1.4rem;min-height:54px}
  .rm-card__cta .btn{flex:1 1 100%}

  /* Reserve-your-seat card: no negative overlap on a phone */
  .reg--overlap{margin-top:-2rem}
  .reg{border-radius:var(--r)}
  .submit-error{margin-inline:1.4rem}
  .reg__head,.reg__foot{padding-inline:1.4rem}
  .reg__head{padding-top:1.9rem}
  .reg__body{padding:1.9rem 1.4rem}
  .step__label{display:none}
  .step__line{margin-inline:.55rem}
  .steps{justify-content:flex-start}
  .reg__foot{flex-direction:column-reverse;align-items:stretch}
  .reg__foot .btn{width:100%}
  .reg__foot .meta{text-align:center}

  /* 16px inputs stop iOS zooming on focus */
  .input,.select,.textarea{padding:1.05rem;font-size:1rem}

  .sticky-cta{padding:.8rem 1.25rem calc(.8rem + env(safe-area-inset-bottom))}
  .sticky-cta__info span{display:none}
  body.has-sticky{padding-bottom:78px}

  .motto{padding-left:1.25rem;font-size:1rem}
  .media__plate{left:1rem;right:1rem;bottom:1rem;padding:.9rem 1rem}
  .confirm__card{padding-inline:1.4rem}
  .confirm__row{flex-direction:column;align-items:flex-start;gap:.25rem}
  .confirm__row b{text-align:left}
  .share-row{justify-content:center}
  .trust-rail{gap:1.5rem}
  .trust-rail__sep{display:none}
  .speaker__creds{gap:.5rem .9rem}
}

@media (max-width:420px){
  .brand img{height:48px}
  .site-header .wrap{min-height:72px}
  .nav{inset-block-start:72px}
  .h-hero{font-size:2.1rem}
  .cd-unit .v{font-size:1.25rem}
  .reg__body,.reg__head,.reg__foot{padding-inline:1.15rem}
}


/* ---------------------------------------------------------------------------
   23  REDUCED MOTION / PRINT
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important}
  .split-word > i{transform:none!important}
  .media--reveal img{clip-path:none!important;transform:none!important}
}

@media print{
  .site-header,.sticky-cta,.scroll-bar,.modal{display:none!important}
  body{background:#fff;color:#000}
  .hero{min-height:auto;color:#000;background:#fff}
  .hero__media{display:none}
  .card,.rm-card{box-shadow:none;border:1px solid #ccc}
}