/* Poppins, self-hosted. Only the weights the site uses are shipped. */
@font-face{font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:"Poppins"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fonts/poppins-800.woff2") format("woff2")}
@font-face{font-family:"Poppins"; font-style:normal; font-weight:900; font-display:swap;
  src:url("fonts/poppins-900.woff2") format("woff2")}

:root{
  --paper:#D9DBDD; --card:#E3E4E6; --ink:#15171B; --muted:#474B50;
  --line:#B9BCC1; --forest:#135F5F; --on-forest:#E8EAEE;
  --shadow:rgba(12,18,28,.12);
  /* FoundersFest DXB brand: wordmark #111111, gradient #00BFAF -> #013BA5 */
  --accent:#00808F; --accent-deep:#00656F; --accent-bright:#00BFAF; --on-accent:#05202B;
  --on-ink-accent:#00BFAF;   /* sits on --ink, which inverts per theme */
  --accent-hover:#00656F;    /* accent used as text, so it must clear 4.5 on paper */
  /* THE DXB RAMP.
     Both gradients are the DXB tile in the FoundersFest mark, sampled straight
     off assets/ffdxb-logo.png: it runs #166466 -> #29B6B0, dark teal to bright
     turquoise, and #135F5F is its dark anchor. The old gradients ran into blue;
     these stay on one teal hue, which is why white labels now work at all.

     Where each ramp stops is set by white text, not by taste:
       white on #135F5F = 7.42   white on #1C8280 = 4.61   white on #29B6B0 = 2.50
     so the button ramp has to stop at #1C8280 and the tile's bright end can
     never carry small text. */
  --brand-gradient:linear-gradient(105deg,#135F5F 0%,#1A7876 55%,#1C8280 100%);
  /* The hero word is 65-90px, where the large-text 3:1 bar applies, so this one
     runs most of the way up the tile. Worst stop 3.19:1 against white. */
  --brand-gradient-display:linear-gradient(105deg,#135F5F 0%,#1D8B89 50%,#23A09B 100%);
  /* the tile's bright end, for accents that carry no text at all */
  --brand-turquoise:#29B6B0;
  /* the palette moved from green to the brand blue/teal; these aliases keep
     every existing rule working without rewriting each var() reference */
  --green:var(--accent); --green-deep:var(--accent-deep); --on-green:var(--on-accent);
  /* #135F5F, the dark anchor of the DXB ramp above. Every call to action is
     this teal - as the gradient where it is a control, flat where it is a large
     panel. It is dark enough to carry WHITE labels (7.42:1), which is what let
     the near-black-on-turquoise labels go. */
  --ff:#135F5F;        /* flat surface. white label 7.42:1 */
  --ff-deep:#0E4A4A;   /* hover/pressed. white label 9.55:1 */
  --ff-text:#135F5F;   /* the teal as TEXT on light paper: 5.35:1 */
  --on-ff:#FFFFFF;
  --on-ff-soft:rgba(255,255,255,.88);
  --ff-edge:transparent;  /* dark mode gives controls a visible boundary */

  /* MOTION. The built-in CSS easings are too weak to read as intentional, so
     everything runs on these two curves. ease-in is never used - it withholds
     movement at the exact moment the eye is watching, which reads as lag. */
  --ease-out:cubic-bezier(.23,1,.32,1);      /* entrances, hover, press */
  --ease-in-out:cubic-bezier(.77,0,.175,1);  /* movement already on screen */
  --t-fast:160ms;    /* press + hover feedback */
  --t-mid:240ms;     /* small UI state changes */
  --t-reveal:640ms;  /* scroll entrances: explanatory, so longer is allowed */
  --stagger:48ms;    /* gap between cascading siblings */
}
:root:not([data-theme="light"]){}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0B0F14; --card:#141A21; --ink:#E8EAEE; --muted:#98A0AA;
    --line:#262E38; --forest:#135F5F; --on-forest:#E8EAEE;
    --shadow:rgba(0,0,0,.45);
    --accent:#2FC7C2; --accent-deep:#6FDCD4; --accent-bright:#00BFAF; --on-accent:#05202B;
    --on-ink-accent:#00707E;
    --accent-hover:#6FDCD4;
    /* Female Fusion in dark mode: #006B70 only separates 3.05:1 from the dark
       paper, so the surface lifts to #00838A (4.22:1 vs paper, white label
       4.55:1) and hover DEEPENS rather than brightens - brightening would drop
       the label below AA. */
    /* The ramp does NOT shift in dark mode - the user asked for one teal in both
       themes, and white labels hold there (4.61 worst). What the dark page costs
       is the surface boundary: #135F5F is only 2.59:1 against #0B0F14, so the
       controls get a bright hairline instead of relying on fill alone. */
    --ff:#135F5F; --ff-deep:#0E4A4A; --ff-text:#5FD6CF;
    --ff-edge:#2FA9A4;
    --on-ff-soft:rgba(255,255,255,.88);
  }
}
:root[data-theme="dark"]{
  --paper:#0B0F14; --card:#141A21; --ink:#E8EAEE; --muted:#98A0AA;
  --line:#262E38; --forest:#135F5F; --on-forest:#E8EAEE;
  --shadow:rgba(0,0,0,.45);
  --accent:#2FC7C2; --accent-deep:#6FDCD4; --accent-bright:#00BFAF; --on-accent:#05202B;
  --on-ink-accent:#00707E;
  --accent-hover:#6FDCD4;

  /* Female Fusion in dark mode: #006B70 only separates 3.05:1 from the dark
     paper, so the surface lifts to #00838A (4.22:1 vs paper, white label
     4.55:1) and hover DEEPENS rather than brightens - brightening would drop
     the label below AA. */
    /* The ramp does NOT shift in dark mode - the user asked for one teal in both
     themes, and white labels hold there (4.61 worst). What the dark page costs
     is the surface boundary: #135F5F is only 2.59:1 against #0B0F14, so the
     controls get a bright hairline instead of relying on fill alone. */
  --ff:#135F5F; --ff-deep:#0E4A4A; --ff-text:#5FD6CF;
  --ff-edge:#2FA9A4;
  --on-ff-soft:rgba(255,255,255,.88);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* the nav is sticky, so an anchor scrolled flush to the viewport top lands
   underneath it. One rule covers every #anchor on the site. */
html{scroll-padding-top:calc(var(--nav-h,74px) + 12px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Poppins",system-ui,sans-serif; font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{text-wrap:balance; margin:0}
a{color:inherit}
.wrap{max-width:1180px; margin:0 auto; padding-left:24px; padding-right:24px}
.mono{font-family:"Poppins",sans-serif; text-transform:uppercase; letter-spacing:.09em; font-size:.72rem; color:var(--muted)}
.display{font-family:"Poppins",sans-serif; font-weight:900; text-transform:uppercase; line-height:.94; letter-spacing:-.02em}
.btn{
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer; border:none;
  background:var(--ff); background-image:var(--brand-gradient);
  box-shadow:inset 0 0 0 1px var(--ff-edge);
  color:var(--on-ff); font-family:"Poppins",sans-serif;
  font-weight:800; font-size:1rem; padding:15px 26px; border-radius:2px; text-decoration:none;
  letter-spacing:.01em;
  transition:transform var(--t-fast) var(--ease-out), filter var(--t-fast) ease;
}
/* hover is gated: touch devices fire :hover on tap, which strands the lift */
@media (hover:hover) and (pointer:fine){
  /* the gradient cannot cross-fade to a flat colour, so hover deepens the whole
     run at once - which keeps the ramp intact and the white label above AA */
  .btn:hover{transform:translateY(-2px); filter:brightness(.88)}
}
/* press feedback. the interface has to feel like it heard you */
.btn:active{transform:scale(.97); filter:brightness(.82)}
.btn.ghost{background:transparent; background-image:none; box-shadow:none; color:var(--ink); border:1.5px solid var(--ink)}
.btn.ghost:active{background:transparent}
.btn.on-dark{background:var(--ff); background-image:var(--brand-gradient)}
:focus-visible{outline:3px solid var(--green); outline-offset:2px}

/* NAV */
header.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--paper) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 24px; max-width:1180px; margin:0 auto}
/* Co-brand lockup: the FoundersFest mark sits to the LEFT of the festival
   wordmark, filling the space at the head of the nav. A divider between them
   stops "FOUNDERS FEST DXB" and "A FUTURE WORTH BUILDING" reading as one run
   of text, since both are wordmarks. */
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0}
/* the wordmark ships in two fixed-colour files, so the theme picks one */
.brandmark{display:block; width:auto; flex:none; height:clamp(28px,3.8vh,38px);
  transition:height var(--t-mid) var(--ease-out)}
.brand-txt{display:flex; flex-direction:column; gap:5px; line-height:1.25; min-width:0;
  padding-left:12px; border-left:1.5px solid var(--line)}
.brandmark-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brandmark-light{display:none}
  :root:not([data-theme="light"]) .brandmark-dark{display:block}
}
:root[data-theme="dark"] .brandmark-light{display:none}
:root[data-theme="dark"] .brandmark-dark{display:block}
.brand b{font-weight:900; font-size:1rem; letter-spacing:.02em; white-space:nowrap}
.brand-sub{font-family:"Poppins",sans-serif; font-size:.61rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.nav-links{display:flex; gap:18px; align-items:center}
.nav-links a{font-weight:600; font-size:.9rem; text-decoration:none; color:var(--ink); white-space:nowrap}
.nav-links a:hover{color:var(--accent-hover)}
.nav-cta{display:flex; align-items:center; gap:14px}
.menu-btn{display:none; background:none; border:1.5px solid var(--ink); border-radius:2px; padding:8px 12px; font-weight:800; cursor:pointer; color:var(--ink)}

/* HERO */
/* overflow:clip, not hidden. The hero's own drifting backdrop makes its
   scrollHeight exceed its height, and `hidden` turns that into a real scroll
   container with no scrollbar. #register sits inside the hero, so clicking
   Register free in the nav scrolled the HERO by ~148px instead of the page,
   and nothing the reader could do with a wheel or a trackpad scrolled it
   back - only a reload. `clip` clips identically but is not a scroll
   container, so there is nothing to scroll. `hidden` stays first as the
   fallback for Safari below 16. */
.hero{position:relative; overflow:hidden; overflow:clip; display:flex; flex-direction:column;
  min-height:calc(100dvh - var(--nav-h,74px))}
.hero .hero-in{flex:1 1 auto}
.hero .marquee{margin-top:auto}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; opacity:.35; mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.hero-in{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:center; padding:70px 24px 84px; max-width:1180px; margin:0 auto}
.kicker{display:inline-block; background:var(--ink); color:var(--paper); padding:8px 14px; border-radius:2px; font-family:"Poppins",sans-serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:26px}
.datebar{display:flex; flex-direction:column; gap:8px; margin-bottom:28px}
.datebar .d{font-family:"Poppins",sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1; letter-spacing:.02em; color:var(--paper); background:var(--ink); align-self:flex-start; padding:8px 16px 6px; border-radius:3px}
.datebar .dv{font-family:"Poppins",sans-serif; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); font-weight:700}
.hero h1{font-size:clamp(3.2rem,8.5vw,7rem); line-height:1.12}
/* White, on a ramp dark enough to hold it. The old gradient ran into #4FA3E8,
   where white sits at 2.4:1, which is why this word used to be near-black. The
   DXB ramp tops out at #23A09B - 3.19:1 - and the word is 65-90px at weight
   900, so the large-text 3:1 bar is the one that applies. */
.hl{background:var(--ff); background-image:var(--brand-gradient-display); color:#FFFFFF; padding:.08em .2em; border-radius:4px; box-decoration-break:clone; -webkit-box-decoration-break:clone}
/* Blur bridges the two words. Without it you see one word leave and another
   arrive as two separate objects; blurred, the eye reads a single morph. */
#rot{display:inline-block;
  transition:opacity 300ms var(--ease-out), filter 300ms var(--ease-out), transform 300ms var(--ease-out)}
#rot.fade{opacity:0; filter:blur(7px); transform:translateY(-.1em) scale(.97)}
.hero .sub{font-weight:800; font-size:clamp(1.25rem,2.6vw,1.9rem); margin:24px 0 14px; line-height:1.06; letter-spacing:-.01em; text-wrap:balance}
.hero p.lede{color:var(--muted); font-size:1.08rem; max-width:38ch; margin:0}
.trust{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:26px; font-family:"Poppins",sans-serif; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink)}
.trust b{color:var(--green-deep)}
/* signup card */
.signup{background:var(--card); border:1.5px solid var(--ink); border-radius:4px; padding:26px; box-shadow:8px 8px 0 var(--ink)}
.signup .lab{font-family:"Poppins",sans-serif; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--green-deep); font-weight:700}
.signup h3{font-family:"Poppins"; font-weight:800; font-size:1.5rem; margin:8px 0 6px}
.signup p{margin:0 0 16px; color:var(--muted); font-size:.95rem}
.field{display:flex; flex-direction:column; gap:10px}
.field input{padding:14px 14px; border:1.5px solid var(--line); border-radius:2px; font-family:inherit; font-size:1rem; background:var(--paper); color:var(--ink); width:100%}
.field input:focus{border-color:var(--green); outline:none}
.help{font-size:.78rem; color:var(--muted); margin-top:10px}
.ok{display:none; background:var(--ff); background-image:var(--brand-gradient); color:var(--on-ff); padding:14px; border-radius:2px; font-weight:700; margin-top:6px}
.ok.show{display:block}

/* Signup failure. Deliberately not styled like .ok: a visitor who skims must
   not mistake "we could not save that" for "you're registered". */
.signup-error{margin:10px 0 0; padding:12px 14px; border-radius:2px;
  border:1px solid #B4271F; background:#FDF3F2; color:#8E1D17;
  font-size:.9rem; font-weight:600; line-height:1.5}
.signup-error[hidden]{display:none}
.foot-sub .signup-error{font-size:.82rem; padding:10px 12px}

/* MARQUEE */
.marquee{background:var(--ink); color:var(--paper); overflow:hidden; border-bottom:1px solid var(--line)}
.marquee .track{display:inline-flex; white-space:nowrap; will-change:transform; animation:scroll 28s linear infinite}
/* let people actually read it if they stop on it */
@media (hover:hover) and (pointer:fine){
  .marquee:hover .track{animation-play-state:paused}
}
.marquee span{display:inline-flex; align-items:center; font-family:"Poppins",sans-serif; font-weight:800; text-transform:uppercase; font-size:1.24rem; letter-spacing:.01em; padding:14px 0}
.marquee span i{color:var(--on-ink-accent); font-style:normal; margin:0 26px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SECTIONS */
section{padding:84px 0}
.sec-label{font-family:"Poppins",sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; color:var(--green-deep); font-weight:700; margin-bottom:14px}
.sec-title{font-family:"Poppins"; font-weight:900; font-size:clamp(2rem,4.5vw,3.1rem); line-height:1.02; max-width:20ch}
.sec-intro{color:var(--muted); max-width:52ch; margin-top:16px; font-size:1.05rem}

/* BUILD cards */
.build-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px}
.bcard{background:var(--card); border:1.5px solid var(--line); border-radius:4px; padding:26px; position:relative;
  transition:transform var(--t-mid) var(--ease-out), border-color var(--t-mid) ease, box-shadow var(--t-mid) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .bcard:hover{transform:translateY(-5px); border-color:var(--ff); box-shadow:0 14px 30px -18px var(--shadow)}
}
.bcard:active{transform:translateY(-2px) scale(.995)}
.bcard .tag{font-family:"Poppins",sans-serif; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--green-deep)}
.bcard h3{font-family:"Poppins"; font-weight:800; font-size:1.35rem; margin:12px 0 8px; line-height:1.1}
.bcard p{margin:0; color:var(--muted); font-size:.95rem}
/* The three "ways in" cards carry very different amounts of text, so their
   buttons landed at three different heights. The grid already stretches the
   cards to equal height, so making each card a column and pushing the button
   down with auto margin lines them up along the bottom.

   Scoped to .giv-grid: the other .bcard uses (programme, labs) have no
   button and must keep their natural flow. */
.giv-grid .bcard{display:flex; flex-direction:column}
.giv-grid .bcard p{margin-bottom:22px}
.giv-grid .bcard .btn{margin-top:auto; align-self:flex-start}

.build-note{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
.strip{background:var(--ff); color:var(--on-ff); border-radius:4px; padding:26px 28px}
.strip h3{font-family:"Poppins"; font-weight:800; font-size:1.25rem; margin:0 0 6px; color:var(--on-ff)}
.strip p{margin:0; color:var(--on-ff-soft); font-size:.95rem}
/* the Connection Hub strip is the deliberate contrast pair. --ink/--paper
   invert together per theme, so it stays legible in both - the old inline
   style left the turquoise h3 at 1.9:1 on the light ink box in dark mode. */
.strip-ink{background:var(--ink); color:var(--paper)}
.strip-ink h3{color:var(--paper)}
.strip-ink p{color:color-mix(in srgb,var(--paper) 82%,transparent)}

/* AUDIENCE */
.aud-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px}
.acard{border-top:3px solid var(--green); padding:22px 4px 0; }
.acard .q{font-family:"Poppins",sans-serif; font-weight:800; text-transform:uppercase; color:var(--green-deep); font-size:1.05rem; letter-spacing:.01em}
.acard h3{font-family:"Poppins"; font-weight:800; font-size:1.15rem; margin:10px 0 8px}
.acard p{margin:0; color:var(--muted); font-size:.92rem}

/* SPEAKERS */
.speak-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.stage-box{background:var(--ink); color:var(--paper); border-radius:4px; padding:40px}
/* --on-ink-accent, not --brand-turquoise: .stage-box takes background:var(--ink),
   which INVERTS between themes, so in dark mode this eyebrow sat on a near-white
   box at 2.07:1. --on-ink-accent exists for exactly this - it flips with the ink
   (#00BFAF light / #00707E dark), giving 7.75 and 4.82. */
.stage-box .sec-label{color:var(--on-ink-accent)}
.stage-box h2{font-family:"Poppins"; font-weight:900; font-size:clamp(1.8rem,3.5vw,2.6rem); line-height:1.04; margin-bottom:14px}
.stage-box p{color:color-mix(in srgb,var(--paper) 76%,transparent)}
.announce{display:inline-block; margin-top:18px; font-family:"Poppins",sans-serif; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid color-mix(in srgb,var(--paper) 40%,transparent); padding:8px 12px; border-radius:2px}
.apply{background:var(--card); border:1.5px solid var(--ink); border-radius:4px; padding:30px; box-shadow:8px 8px 0 var(--green)}
.apply h3{font-family:"Poppins"; font-weight:800; font-size:1.4rem; margin:0 0 6px}
.apply p{margin:0 0 16px; color:var(--muted); font-size:.95rem}
.apply .field{gap:10px}

/* STATS + CREDIBILITY */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1.5px solid var(--ink); border-radius:4px; overflow:hidden; margin-bottom:40px}
.stat{padding:28px 22px; border-right:1.5px solid var(--line)}
.stat:last-child{border-right:none}
.stat .n{font-family:"Poppins",sans-serif; font-weight:900; font-size:2.3rem; line-height:1; color:var(--green-deep)}
.stat .l{font-family:"Poppins",sans-serif; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:8px}
.cred{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.credcard{background:var(--card); border:1.5px solid var(--line); border-radius:4px; padding:28px}
.credcard b{font-family:"Poppins",sans-serif; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--green-deep)}
.credcard h3{font-family:"Poppins"; font-weight:800; font-size:1.3rem; margin:8px 0 8px}
.credcard p{margin:0; color:var(--muted); font-size:.95rem}
.venue{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; margin-top:16px}
.photo{border:1.5px solid var(--line); border-radius:4px; min-height:200px; display:flex; align-items:flex-end; padding:16px;
  background:
   radial-gradient(120% 120% at 100% 0%, color-mix(in srgb,var(--green) 22%,transparent), transparent 55%),
   repeating-linear-gradient(45deg,var(--card),var(--card) 12px,color-mix(in srgb,var(--line) 60%,transparent) 12px,color-mix(in srgb,var(--line) 60%,transparent) 24px)}
.photo.has-img{position:relative; overflow:hidden; background:var(--card)}
.photo.has-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.photo.has-img span{position:relative; z-index:1}
.photo span{font-family:"Poppins",sans-serif; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--paper); padding:4px 8px; border-radius:2px}

/* DAY */
.day{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px}
.moment{padding:22px; border:1.5px solid var(--line); border-radius:4px; background:var(--card)}
.moment .t{font-family:"Poppins",sans-serif; font-weight:800; color:var(--green-deep); font-size:1.2rem}
.moment h3{font-family:"Poppins"; font-weight:800; font-size:1.05rem; margin:8px 0 6px}
.moment p{margin:0; color:var(--muted); font-size:.9rem}

/* PARTNER */
.partner{background:var(--forest); color:var(--on-forest)}
/* the tile's bright turquoise only reaches 2.97:1 on #135F5F, and this is small
   uppercase text, so the eyebrow lifts to a pale tint of the same hue (4.92:1) */
.partner .sec-label{color:#8FE8E1}
.partner .sec-title{color:var(--on-forest)}
.partner .sec-intro{color:color-mix(in srgb,var(--on-forest) 80%,transparent); max-width:60ch}
.tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:40px 0 30px}
.tier{background:#fff; border:1.5px solid rgba(6,42,92,.16); border-radius:4px; padding:24px;
  box-shadow:8px 8px 0 rgba(0,0,0,.28)}
.tier .av{font-family:"Poppins",sans-serif; font-weight:700; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:#00707E}
.tier h3{font-family:"Poppins"; font-weight:800; font-size:1.15rem; margin:10px 0 4px; color:#15171B}
.tier .price{font-family:"Poppins",sans-serif; font-weight:900; font-size:1.55rem; color:#15171B}
.tier p{margin:10px 0 0; font-size:.88rem; color:#474B50}
/* Dark theme: the tier cards take the same surface as the "Become a partner"
   box (--card / --ink) instead of staying white. Light theme keeps them white. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tier{background:var(--card); border-color:var(--line)}
  :root:not([data-theme="light"]) .tier h3,
  :root:not([data-theme="light"]) .tier .price{color:var(--ink)}
  :root:not([data-theme="light"]) .tier p{color:var(--muted)}
  :root:not([data-theme="light"]) .tier .av{color:var(--brand-turquoise)}
}
:root[data-theme="dark"] .tier{background:var(--card); border-color:var(--line)}
:root[data-theme="dark"] .tier h3,
:root[data-theme="dark"] .tier .price{color:var(--ink)}
:root[data-theme="dark"] .tier p{color:var(--muted)}
:root[data-theme="dark"] .tier .av{color:var(--brand-turquoise)}
.partner-cta{display:flex; flex-wrap:wrap; gap:16px 22px; align-items:center}
.partner .media-line{display:block; margin-top:18px; font-family:"Poppins",sans-serif; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:color-mix(in srgb,var(--on-forest) 85%,transparent)}
/* 70% left this small uppercase line at 3.90:1 on the new #135F5F band; 85%
   brings it to 4.94. The old navy band was dark enough to carry 70%. */
.sponsor-box{background:var(--card); color:var(--ink); border-radius:4px; padding:28px; max-width:640px; box-shadow:8px 8px 0 rgba(0,0,0,.28)}
.sponsor-box h3{font-family:"Poppins"; font-weight:800; font-size:1.4rem; margin:0 0 6px}
.sponsor-box p{font-family:"Poppins"; margin:0 0 16px; color:var(--muted); font-size:.95rem}
.sponsor-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.sponsor-grid input,.sponsor-grid select,.sponsor-grid textarea{padding:13px; border:1.5px solid var(--line); border-radius:2px; font-family:"Poppins",sans-serif; font-size:1rem; background:var(--paper); color:var(--ink); width:100%}
.sponsor-grid .full{grid-column:1/-1}
.sponsor-grid input:focus,.sponsor-grid select:focus,.sponsor-grid textarea:focus{border-color:var(--green); outline:none}
.sponsor-box .btn{margin-top:4px}
.sponsor-box .ok{margin-top:0}

/* FINAL CTA */
.final{background:var(--ff); background-image:var(--brand-gradient); color:var(--on-ff); text-align:center}
.final h2{font-family:"Poppins",sans-serif; font-weight:900; text-transform:uppercase; font-size:clamp(2rem,4.8vw,3.5rem); line-height:1; letter-spacing:-.02em; color:var(--on-ff)}
/* solid white, not --on-ff-soft: this line sits across the gradient, and at the
   bright end (#1C8280) the softened white drops to 3.95:1. Weight separates it
   from the heading instead of opacity. */
.final p{color:var(--on-ff); max-width:44ch; margin:16px auto 26px; font-weight:600}
.final form{display:flex; gap:10px; max-width:460px; margin:0 auto; flex-wrap:wrap; justify-content:center}
.final input{flex:1; min-width:220px; padding:15px; border:none; border-radius:2px; font-family:inherit; font-size:1rem}
/* the button inside the teal band inverts to ink - it has to kill the gradient
   .btn now carries, or background-image would paint straight over it */
.final .btn{background:var(--ink); background-image:none; box-shadow:none; color:var(--paper)}
.final .ok{background:var(--ink); color:var(--paper); max-width:460px; margin:12px auto 0}

/* FAQ */
.faq-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px}
.faq{border-left:3px solid var(--green); padding:6px 0 6px 20px}
.faq h3{font-family:"Poppins"; font-weight:800; font-size:1.1rem; margin:0 0 6px}
.faq p{margin:0; color:var(--muted); font-size:.95rem}

/* FOOTER */
footer{background:#141614; color:#EDEBE3; padding:56px 0 36px; border-top:4px solid var(--green)}
.foot-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; align-items:flex-start}
.foot-brand b{font-family:"Poppins",sans-serif; font-weight:900; text-transform:uppercase; font-size:1.45rem; letter-spacing:-.01em; display:block}
.foot-brand span{font-family:"Poppins",sans-serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#8FE3DC}
.foot-links{display:flex; gap:40px; flex-wrap:wrap}
.foot-col b{font-family:"Poppins",sans-serif; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-turquoise); display:block; margin-bottom:10px}
.foot-col a{display:block; text-decoration:none; color:#EDEBE3; font-size:.92rem; margin-bottom:8px; opacity:.85}
.foot-col a:hover{opacity:1; color:var(--brand-turquoise)}
.foot-bottom{margin-top:40px; padding-top:20px; border-top:1px solid rgba(237,235,227,.18); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:"Poppins",sans-serif; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:#9A9C92}

.clogo{height:46px; width:auto; max-width:240px; display:block; margin-bottom:16px}
.plogos{display:flex; flex-wrap:wrap; align-items:center; gap:36px 56px; margin-top:26px}
.plogos img{height:48px; width:auto; max-width:230px}
.plogos img[src$="see-venues.svg"]{height:34px; max-width:none}

/* OPTICAL SIZING. Matching heights across logos of different proportions looks
   wrong - a wide single-line wordmark set to the same height as a stacked block
   reads as much bigger. Tangents is 7.3:1 and takes a shorter height; 2050 is
   1.6:1 and takes a taller one. Both are also let past the row's max-width,
   which would otherwise squash Tangents to an arbitrary height. */

.plogos img[src$="tangents.svg"]{height:28px; max-width:none}

.plogos img[src$="2050-productions.svg"]{height:56px}

.plogos .tsc{font-family:"Poppins",sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.9rem; color:var(--ink); font-weight:700; border-left:2px solid var(--line); padding-left:18px}

/* ============ ACCESSIBILITY MENU ============ */
:root{--a11y-text:1}
html{font-size:calc(100% * var(--a11y-text))}
body{font-size:calc(17px * var(--a11y-text))}

/* high contrast: lift muted text to full strength, strengthen hairlines */
:root.a11y-contrast{--muted:var(--ink); --line:color-mix(in srgb,var(--ink) 45%,var(--paper))}
:root.a11y-contrast .lede,:root.a11y-contrast .credcard p{color:var(--ink)}

/* reduce motion */
:root.a11y-nomotion *,:root.a11y-nomotion *::before,:root.a11y-nomotion *::after{
  animation-duration:.001s !important; animation-iteration-count:1 !important;
  transition-duration:.001s !important}
:root.a11y-nomotion{scroll-behavior:auto}
:root.a11y-nomotion .reveal,
:root.a11y-nomotion [data-r]{opacity:1 !important; transform:none !important; clip-path:none !important}
:root.a11y-nomotion .hero::before{transform:none !important}
:root.a11y-nomotion .nav-prog{display:none}

/* underline links (brand excluded - it is a logo lockup) */
:root.a11y-underline a:not(.btn):not(.brand){text-decoration:underline; text-underline-offset:3px}

.a11y-skip{position:absolute; left:-9999px; top:0; z-index:300; background:var(--ff); background-image:var(--brand-gradient); color:var(--on-ff);
  font-weight:800; padding:12px 18px; border-radius:0 0 3px 0; text-decoration:none}
.a11y-skip:focus,.a11y-skip:focus-visible{left:0}

.a11y{position:fixed; right:18px; bottom:18px; z-index:200; font-family:"Poppins",system-ui,sans-serif}
.a11y-btn{width:52px; height:52px; border-radius:50%; border:2px solid var(--ink);
  background:var(--ff); background-image:var(--brand-gradient); color:var(--on-ff); cursor:pointer; display:grid; place-items:center; box-shadow:0 6px 20px var(--shadow);
  transition:transform .15s ease}
.a11y-btn:hover{transform:translateY(-2px)}
.a11y-panel{position:absolute; right:0; bottom:64px; width:310px; background:var(--card); color:var(--ink);
  border:1.5px solid var(--line); border-radius:6px; padding:16px; box-shadow:0 18px 44px var(--shadow)}
.a11y-panel[hidden]{display:none}
.a11y-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
  padding-bottom:10px; border-bottom:1px solid var(--line)}
.a11y-head span{font-family:"Poppins",sans-serif; text-transform:uppercase; letter-spacing:.1em;
  font-size:.78rem; font-weight:700; color:var(--green-deep)}
.a11y-x{display:grid; place-items:center; width:34px; height:34px; margin:-6px -6px -6px 0;
  background:none; border:1.5px solid transparent; border-radius:3px; cursor:pointer; color:var(--ink);
  font-size:1.35rem; line-height:1}
.a11y-x:hover{border-color:var(--line)}
.a11y-row{margin-bottom:12px}
.a11y-lbl{display:block; font-size:.88rem; font-weight:700; margin-bottom:7px; color:var(--ink)}
.a11y-ctl{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.a11y-ctl+.a11y-ctl{margin-top:7px}
.a11y-ctl button{flex:1 1 auto; min-height:40px; padding:8px 10px; cursor:pointer; font-size:.88rem;
  font-weight:700; font-family:inherit; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--line); border-radius:3px}
/* WCAG 1.4.1: pressed state must not rely on colour alone - reserve room for a tick */
.a11y-ctl button[aria-pressed]::before{content:"\2713"; opacity:0; margin-right:5px; font-weight:900}
.a11y-ctl button[aria-pressed="true"]::before{opacity:1}
.a11y-ctl button:hover{border-color:var(--ink)}
.a11y-ctl button[aria-pressed="true"]{background:var(--ff); background-image:var(--brand-gradient); color:var(--on-ff); border-color:transparent}
.a11y-ctl output{min-width:56px; text-align:center; font-family:"Poppins",sans-serif; font-size:.85rem;
  font-weight:700; color:var(--ink)}
.a11y-reset{width:100%; min-height:42px; margin-top:10px; cursor:pointer; font-family:inherit; font-size:.85rem;
  font-weight:800; color:var(--ink); background:transparent; border:1.5px solid var(--ink); border-radius:3px}
@media (max-width:560px){
  .a11y{right:12px; bottom:12px}
  .a11y-panel{width:min(288px,calc(100vw - 32px))}
}

/* credibility cards: keep a light surface in dark mode so partner logos read in full colour */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .credcard{background:#D5D5D1; border-color:#ADADA7}
  :root:not([data-theme="light"]) .credcard b{color:#00656F}
  :root:not([data-theme="light"]) .credcard h3{color:#15171B}
  :root:not([data-theme="light"]) .credcard p{color:#595B54}
}
:root[data-theme="dark"] .credcard{background:#D5D5D1; border-color:#ADADA7}
:root[data-theme="dark"] .credcard b{color:#00656F}
:root[data-theme="dark"] .credcard h3{color:#15171B}
:root[data-theme="dark"] .credcard p{color:#595B54}
/* TRUST BAR (partner logos, top of page) */

/* logos are identical in both themes, so every logo group sits on a fixed
   light surface - otherwise the dark wordmarks vanish on the dark theme */
:root{--logo-surface:#EDEEF1; --logo-edge:#D3D7DC}

.plogos{background:var(--logo-surface); border:1px solid var(--logo-edge); border-radius:6px;
  padding:20px 26px; margin-top:20px}

/* The reveal wrapper no longer animates itself - it only gates its children,
   which cascade individually (see the MOTION block at the end of this file).
   A section that moved as one slab hid the fact that it is a list of things. */
.reveal{opacity:1; transform:none}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr; gap:36px; padding:48px 24px 60px}
  .build-grid{grid-template-columns:1fr 1fr}
  .aud-grid,.stats,.tiers,.day{grid-template-columns:1fr 1fr}
  .speak-wrap,.cred,.venue,.build-note,.faq-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .menu-btn{display:inline-block}
  .nav-links.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:var(--paper); border-bottom:1px solid var(--line); padding:16px 24px; gap:14px}
}
@media (max-width:560px){
  .build-grid,.aud-grid,.stats,.tiers,.day{grid-template-columns:1fr}
  .stat{border-right:none; border-bottom:1.5px solid var(--line)}
  section{padding:60px 0}
}
/* Reduced motion means less and gentler, not none. Opacity survives because it
   still explains that something arrived; every translate, scale and clip goes. */
@media (prefers-reduced-motion:reduce){
  .marquee .track{animation:none}
  html{scroll-behavior:auto}
  .btn:hover,.bcard:hover,.btn:active,.bcard:active,.soc-link:hover,.soc-link:active{transform:none}
  .hero::before{transform:none !important}
  .nav-prog{display:none}
  [data-r]{transform:none !important; clip-path:none !important; transition:opacity var(--t-mid) ease !important}
  #rot.fade{filter:none; transform:none}
}
/* FIRST SCREEN: hero sizes itself off viewport height so the trust bar,
   hero content and marquee always land above the fold on desktop */
@media (min-width:901px){
  .hero-in{padding:clamp(12px,2.1vh,44px) 24px; gap:clamp(28px,3vh,48px)}
  .hero h1{font-size:clamp(2.2rem,min(6.4vw,7.2vh),5.6rem)}
  .hero .sub{font-size:clamp(1rem,1.9vw,1.5rem); margin:clamp(10px,1.4vh,20px) 0 8px}
  .hero p.lede{font-size:clamp(.95rem,1.1vh,1.08rem); max-width:46ch; line-height:1.48}
  .datebar{margin-bottom:clamp(8px,1.3vh,26px)}
  /* All three caps came down when the date changed. "Saturday, 14 November 2026"
     is three characters longer than the October date it replaced, and the left
     hero column is bounded at ~573px by the 1180 container - so on a wide screen
     the font stops growing but the column does not grow either, and the string
     wrapped to two lines at 1920, 2560 and 960.

     The string runs about 17.1px wide per 1px of font size, so a 573px column
     cannot hold it above ~32.5px however tall the screen is - hence the 2rem
     cap, which costs a little size on tall monitors and is worth it to never
     wrap. The vw term is what fixes 960: narrow column, tall viewport, where
     the height-driven size was too big for the width available.
     Measured one line from 901px to 3440px wide. */
  .datebar .d{font-size:clamp(1.3rem,min(2.7vw,3.0vh),2rem)}
  .trust{margin-top:clamp(8px,1.3vh,26px)}
  .signup{padding:clamp(18px,2.4vh,30px)}

}
/* the enlarged brand needs to scale back on narrow screens or the nav gets very tall */
/* THE BRAND LADDER
   The lockup sheds parts as the nav narrows, in order of least value: the
   partner credit line first, then the festival wordmark, leaving the mark.
   Every step below was measured - brand + nav links + CTA against the 1180
   container - because the wordmark is white-space:nowrap, so when it runs out
   of room it does not wrap, it silently gets crushed. */

/* 1021-1080: the credit line is the first thing to go. */
@media (min-width:1101px) and (max-width:1200px){
  .brand{gap:10px}
  .brand-txt{padding-left:10px}
  .brand b{font-size:.84rem; letter-spacing:.01em}
  .brand-sub{display:none}
}
/* 901-1020: the six nav links hold 460px and the CTA another 164, which leaves
   about 208px for the brand against a 253px lockup. Measured at .82rem it was
   still being crushed from 253 to 193, so the festival wordmark cannot fit here
   at any readable size - the mark carries it alone until the links collapse. */
@media (min-width:901px) and (max-width:1100px){
  .brand-txt{display:none}
  .brandmark{height:34px}
}
/* below 901 the links collapse into the hamburger, which hands ~460px back,
   so the full lockup returns */
@media (max-width:900px){
  .brandmark{height:30px}
  .brand b{font-size:1rem; letter-spacing:.02em}
  .brand-sub{font-size:.58rem}
}
@media (max-width:700px){
  .brand-sub{display:none}
  .brand-txt{gap:0}
  .brand b{font-size:.92rem}
}
@media (max-width:650px){
  /* the mark alone again - at 580px the wordmark ran past the nav's own width
     and pushed the Register CTA toward the edge */
  .brand-txt{display:none}
  .brandmark{height:29px}
}
/* nav CTA: full size on desktop, compact on mobile */
.nav-cta-btn{padding:11px 18px; white-space:nowrap}
@media (max-width:900px){
  .nav-cta-btn{padding:8px 12px; font-size:.82rem; letter-spacing:0; white-space:nowrap}
}
@media (max-width:560px){
  .nav-cta-btn{padding:7px 11px; font-size:.74rem}
  .menu-btn{padding:7px 10px; font-size:.8rem}
  .nav-cta{gap:8px; flex-shrink:0}
  .nav-in{gap:10px; padding:12px 18px}
}
/* hero sub-headline: tighter, balanced across lines */
@media (min-width:901px){
  .hero-in{gap:clamp(24px,2.6vw,40px)}
  .hero .sub{line-height:1.05}
}
/* FOUNDERFEST DXB MARK */
.fflogo{display:block; width:auto; height:clamp(46px,6.8vh,96px); margin-bottom:clamp(8px,1.2vh,22px)}
.fflogo-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .fflogo-light{display:none}
  :root:not([data-theme="light"]) .fflogo-dark{display:block}
}
:root[data-theme="dark"] .fflogo-light{display:none}
:root[data-theme="dark"] .fflogo-dark{display:block}

/* FAQ: its own surface so it does not merge into the dark footer. In dark mode
   it takes the same light panel the credibility cards use, so the section keeps
   the separation the light theme has. */
.faq-block{background:var(--card); border:1.5px solid var(--line); border-radius:6px; padding:clamp(24px,4vw,44px)}
.faq{border-left:3px solid var(--green)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .faq-block{background:#E3E3E0; border-color:#BDBDB7}
  :root:not([data-theme="light"]) .faq-block .sec-label{color:#00656F}
  :root:not([data-theme="light"]) .faq-block .sec-title,
  :root:not([data-theme="light"]) .faq-block .faq h3{color:#15171B}
  :root:not([data-theme="light"]) .faq-block .faq p{color:#4A4C46}
  :root:not([data-theme="light"]) .faq-block .faq{border-left-color:#00808F}
}
:root[data-theme="dark"] .faq-block{background:#E3E3E0; border-color:#BDBDB7}
:root[data-theme="dark"] .faq-block .sec-label{color:#00656F}
:root[data-theme="dark"] .faq-block .sec-title,
:root[data-theme="dark"] .faq-block .faq h3{color:#15171B}
:root[data-theme="dark"] .faq-block .faq p{color:#4A4C46}
:root[data-theme="dark"] .faq-block .faq{border-left-color:#00808F}
/* SOCIALS */
.hero-socials{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:clamp(10px,1.7vh,22px)}

.soc-link{display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  color:var(--on-ff); background:var(--ff); background-image:var(--brand-gradient);
  box-shadow:inset 0 0 0 1px var(--ff-edge);
  transition:transform var(--t-fast) var(--ease-out), filter var(--t-fast) ease}
.soc-link svg{width:19px; height:19px; display:block}
@media (hover:hover) and (pointer:fine){
  .soc-link:hover{transform:translateY(-2px); filter:brightness(.88)}
}
.soc-link:active{transform:scale(.94)}
/* .foot-col a sets display:block and outranks a bare .foot-soc, which left the
   icon on the text baseline instead of centred - match it on specificity */
.foot-col a.foot-soc{display:flex; width:fit-content; align-items:center; gap:9px}
.foot-soc svg{width:17px; height:17px; flex:none; position:relative; top:.5px}

@media (max-width:560px){
  .soc-link{width:30px; height:30px}
  .soc-link svg{width:17px; height:17px}
}

/* SUB-PAGES: the hero only exists on the home page, so standalone pages need
   their own top spacing and the nav must not force a full-viewport first screen */
main > section:first-child{padding-top:clamp(40px,7vh,84px)}
.nav-links a[aria-current="page"]{color:var(--accent-deep); font-weight:800}
.media-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px}
.mcard{background:var(--card); border:1.5px solid var(--line); border-radius:6px; padding:24px}
.mcard h3{font-family:"Poppins"; font-weight:800; font-size:1.15rem; margin:0 0 8px}
.mcard p{margin:0; color:var(--muted); font-size:.95rem}
@media (max-width:900px){ .media-grid{grid-template-columns:1fr} }

/* six nav items plus the brand need a little more room before the mobile menu */
/* Seven nav items, not six. The extra link took desktop slack from 61px to
   25px, so the spacing tightens at every tier and the lockup gives way sooner.
   Every number below was measured 320-1600px. */
@media (min-width:1201px){
  .nav-links{gap:14px}
  .nav-links a{font-size:.86rem}
}
@media (min-width:901px) and (max-width:1200px){
  .nav-links{gap:11px}
  .nav-links a{font-size:.81rem}
  .nav-cta-btn{padding:10px 13px; font-size:.86rem}
}

/* short desktop viewports: the logo and socials rows both live above the fold,
   so the hero needs a tighter tier to keep the marquee on the first screen */
@media (min-width:901px) and (max-height:820px){
  .hero h1{font-size:clamp(2rem,min(5.9vw,6.3vh),5.6rem)}
  .hero .sub{font-size:clamp(.98rem,1.6vw,1.2rem); margin:clamp(6px,.9vh,14px) 0 6px}
  .hero p.lede{font-size:.94rem; line-height:1.4}
  .hero-in{padding:clamp(10px,1.4vh,44px) 24px}
  .fflogo{height:clamp(40px,5.6vh,92px); margin-bottom:clamp(6px,.8vh,22px)}
  .datebar{margin-bottom:clamp(6px,.9vh,26px)}
  .datebar .d{font-size:clamp(1.15rem,min(3vw,2.6vh),2.4rem)}
  .trust{margin-top:clamp(6px,.9vh,26px)}
  .hero-socials{margin-top:clamp(6px,.9vh,22px)}
  .soc-link{width:30px; height:30px}
  .soc-link svg{width:17px; height:17px}
  .signup{padding:clamp(14px,1.8vh,30px)}

}

/* LEGAL PAGES */
.legal{max-width:78ch}
.legal-meta{color:var(--muted); font-size:.9rem; margin:0 0 24px}
.legal-note{background:var(--card); border-left:3px solid var(--accent); border-radius:4px;
  padding:16px 20px; margin:0 0 32px; font-size:.94rem; color:var(--ink)}
.legal-note code{font-family:ui-monospace,monospace; font-size:.88em; background:rgba(0,0,0,.08);
  padding:1px 5px; border-radius:3px}
.legal h3{font-family:"Poppins"; font-weight:800; font-size:1.12rem; margin:30px 0 8px; color:var(--ink)}
.legal p{margin:0 0 12px; color:var(--muted); font-size:.98rem; line-height:1.62}
.legal ul{margin:0 0 12px; padding-left:20px; color:var(--muted); font-size:.98rem; line-height:1.62}
.legal li{margin-bottom:7px}
.legal strong{color:var(--ink)}
/* the Terms link is a placeholder until the document exists */
.foot-col a.soon{opacity:.55; cursor:default}
.foot-col a.soon span{display:block; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-turquoise); opacity:.85}

/* ============================================================
   MOTION
   Lives at the end of the file deliberately: these rules override
   base styles and CSS source order is the only thing deciding that.
   Everything here animates transform, opacity or clip-path only -
   the three properties that skip layout and paint.
   ============================================================ */

/* ============================================================
   LANDING PAGES  (speakers, media, vip)
   Ported from the supplied comps. Their layout, scale and copy are
   kept; their implementation is not. The comps shipped an inline
   stylesheet each with Helvetica/Inter, their own teal ramp and a
   monospace label face - rendering them here in Poppins and the
   site's tokens is what lets these pages carry the shared nav, the
   dark theme and the motion system instead of becoming a second
   visual identity bolted onto the same domain.

   A third of the comps' CSS (.tk, .perf, .count, .cell, .block,
   .ack, .tag) is unused by all three bodies - leftovers from a
   larger system - and is deliberately not ported.

   The 720px measure IS kept: it is narrower than the site's 1180
   and that is the point, these are single-column editorial pages.
   ============================================================ */
.lp{max-width:720px; margin:0 auto; padding-left:24px; padding-right:24px}

/* the comps' 64x4 gradient rule under the eyebrow */
.lp-rule{height:4px; width:64px; background:var(--ff); background-image:var(--brand-gradient);
  border-radius:2px; margin:0 0 26px}

.lp-h1{font-family:"Poppins",sans-serif; font-weight:900;
  font-size:clamp(2.25rem,7vw,3.75rem); line-height:1.02; letter-spacing:-.03em; margin:0 0 16px}
.lp-sub{font-family:"Poppins",sans-serif; font-weight:600;
  font-size:clamp(1.125rem,2.6vw,1.375rem); color:var(--ink); max-width:44ch; margin:0 0 8px}

/* the comps set these labels in monospace. The site ships Poppins only and
   nothing else, so the same "system label" read comes from weight and
   tracking instead of a second face. */
.lp-h2{font-family:"Poppins",sans-serif; font-weight:700; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ff-text);
  margin:40px 0 6px}

.lp-list{list-style:none; padding:0; margin:8px 0 0; max-width:60ch}
.lp-list li{padding:15px 0; border-bottom:1px solid var(--line);
  font-size:1.02rem; color:var(--ink)}
.lp-list li:first-child{border-top:1px solid var(--line)}

.lp-price{display:inline-flex; align-items:baseline; gap:10px; background:var(--card);
  border:1px solid var(--line); border-radius:100px; padding:10px 22px; margin:28px 0 0}
.lp-price b{font-family:"Poppins",sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:-.02em}
.lp-price span{font-family:"Poppins",sans-serif; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); font-weight:700}

.lp-limited{display:inline-block; font-family:"Poppins",sans-serif; font-weight:700;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-ff); background:var(--ff); border-radius:100px; padding:7px 15px; margin-top:26px}

.lp-note{font-size:.92rem; color:var(--muted); margin-top:22px; max-width:60ch}

.lp-reg{margin-top:44px; border-top:1px solid var(--line); padding-top:36px}
.lp-reg h2{margin-top:0}

/* the photography notice the comps carry in their footer. It stays page
   content rather than moving into the shared footer, which would put it on
   all seven pages. */
.lp-fine{margin-top:40px; padding-top:22px; border-top:1px solid var(--line);
  font-size:.8rem; line-height:1.7; color:var(--muted); max-width:64ch}
.lp-fine a{color:var(--ff-text); text-decoration:underline; text-underline-offset:2px}

@media (max-width:560px){
  .lp-h2{margin-top:32px}
  .lp-list li{padding:13px 0}
}

/* ---- decrypted text -----------------------------------------
   The FAQ answers scramble and resolve when the block scrolls in.
   The scrambled run is the brand teal at a FIXED #135F5F rather
   than var(--ff-text): the FAQ panel is a light surface in BOTH
   themes (--card in light, #E3E3E0 in dark), and --ff-text flips
   to #5FD6CF for dark backgrounds, which would land at 1.37:1
   here. #135F5F holds 5.83 and 5.77 on the two panels. */
.dc-off{color:#135F5F}
/* random glyphs have their own widths, so a trailing space must not
   collapse and shift the line mid-scramble */
[data-decrypt]{white-space:pre-wrap}
/* the real text, for assistive tech, while the visible half is
   aria-hidden. The reference puts the SCRAMBLED string here, which
   hands a screen reader gibberish - this keeps the real sentence. */
.dc-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0}

/* ---- scroll reveal primitives -------------------------------
   site.js walks each .reveal section, tags every child that should
   arrive on its own with data-r, and numbers them with --i. The
   parent gates; the children cascade. */

[data-r]{
  --i:0;
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out),
    clip-path var(--t-reveal) var(--ease-out);
  transition-delay:calc(var(--i) * var(--stagger));
}

/* rise: the default. small offset - a long throw reads as a page still loading */
[data-r="rise"]{opacity:0; transform:translateY(22px)}

/* panel: filled boxes settle in rather than slide. scale never starts at 0 -
   nothing in the real world appears out of nothing */
[data-r="panel"]{opacity:0; transform:translateY(16px) scale(.978)}

/* clip: photographs wipe open from the bottom edge, no movement at all.
   an image that slides looks like a slideshow; one that uncovers looks shot */
[data-r="clip"]{opacity:1; clip-path:inset(0 0 100% 0)}

/* sweep: eyebrow labels and rules draw in from the left, like a highlighter */
[data-r="sweep"]{opacity:1; clip-path:inset(0 100% 0 0)}

/* Direct child only. Each [data-rg] group opens when IT enters the viewport, so
   a grid halfway down a page still waits for the scroll instead of riding in on
   its section's entrance - which is what made sub-pages, where the whole page is
   one .reveal, animate everything at load. */
[data-rg].in > [data-r]{opacity:1; transform:none}
/* only the clipping variants get a clip-path back. applying inset(0 0 0 0) to
   everything would clip each panel to its border box and cut off the hard
   offset shadows on .signup, .apply and .tier. */
[data-rg].in > [data-r="clip"],
[data-rg].in > [data-r="sweep"]{clip-path:inset(0 0 0 0)}

/* Anti-flash. site.js is deferred, so for a few milliseconds the reveal targets
   exist without data-r. The inline gate in <head> sets .js-motion before first
   paint, and this hides the whole block until the observer opens it - so there
   is nothing to flash. Without .js-motion (no JS, or reduced motion) nothing is
   ever hidden. */
html.js-motion .reveal:not(.in) > *{opacity:0}
html:not(.js-motion) [data-r]{opacity:1; transform:none; clip-path:none}

/* ---- nav: read progress -------------------------------------
   a hairline of the Female Fusion teal under the sticky nav.
   scaleX only, so it composites and never triggers layout. */
.nav-prog{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--ff); transform:scaleX(var(--p,0)); transform-origin:0 50%;
  pointer-events:none;
}
:root[data-theme="dark"] .nav-prog{background:var(--ff-text)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nav-prog{background:var(--ff-text)}
}

/* ---- nav: condense once you leave the top -------------------
   reclaims ~18px of vertical space and confirms you have moved.
   site.js freezes --nav-h while this is active so the hero's
   min-height cannot resize underneath a mid-scroll reader. */
header.nav{transition:box-shadow var(--t-mid) var(--ease-out)}
.nav-in{transition:padding var(--t-mid) var(--ease-out)}
header.nav.condensed{box-shadow:0 8px 24px -16px var(--shadow)}
header.nav.condensed .nav-in{padding-top:8px; padding-bottom:8px}
header.nav.condensed .brandmark{height:clamp(26px,3.2vh,32px)}
/* condensing drops the partner credit line and keeps the two wordmarks */
header.nav.condensed .brand-sub{
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity 140ms ease, max-height var(--t-mid) var(--ease-out);
}
.brand-sub{max-height:2em; transition:opacity var(--t-mid) ease, max-height var(--t-mid) var(--ease-out)}

/* ---- hero: the grid backdrop drifts ------------------------
   the ruled grid moves at a fraction of scroll speed, so the hero
   gains depth without anything legible moving. the pseudo-element
   is overhung top and bottom so the drift never exposes an edge. */
.hero::before{
  inset:-18% 0;
  transform:translate3d(0,var(--hero-drift,0px),0);
  will-change:transform;
}

/* ---- section headings: the eyebrow draws, the title rises ---
   sec-label is a short uppercase rule, which is exactly what a
   left-to-right clip reveal is for */
.sec-label[data-r]{transform:none}

@media (max-width:560px){
  /* shorter throw and a tighter cascade on phones, where the whole
     card is in view before the animation has finished */
  [data-r="rise"]{transform:translateY(14px)}
  :root{--stagger:36ms; --t-reveal:520ms}
}

/* ============================================================
   FINAL COPY REWRITE
   New components introduced by the final website copy. Sits at the
   end for the same reason the MOTION block does: source order is the
   only thing deciding which rule wins, and several of these override
   base component styles.

   The recurring defect in this file is a colour tuned against one
   theme on a surface that does not invert. Every rule below states
   which surface it lands on:
     --paper / --card  invert with the theme, so --ink/--muted are safe
     --ink             inverts, so --paper / --on-ink-accent are safe
     --ff / --forest   FIXED dark teal in both themes, so white only
     .faq-block        FIXED light in both themes, so dark ink only
   ============================================================ */

/* ---- hero -------------------------------------------------- */

/* The rotating word runs from "idea" to "next big thing". The left hero
   column is capped at ~573px by the 1180px container, so the longest word
   cannot hold the h1's own size. The slot is a container, and the word
   shrinks against the slot's width rather than the h1's font-size, which
   keeps every word on one line. min-height is set in the SLOT's em - the
   h1 size, not the shrunken word's - so the line box never changes height
   and the words below never shift. */
.rot-slot{display:block; container-type:inline-size; line-height:1.12; min-height:1.12em}
.rot-slot .hl{display:inline-block; white-space:nowrap; font-size:min(1em,11.2cqw)}

/* on --paper. --ff-text is #135F5F light / #5FD6CF dark, so it flips */
.brandline{font-family:"Poppins",sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; font-size:.82rem; color:var(--ff-text); margin:18px 0 0}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
.hero-ctas .btn{padding:12px 22px; font-size:.92rem}

/* ---- prose and claims -------------------------------------- */

.prose{max-width:64ch; margin-top:22px}
.prose p{color:var(--muted); font-size:1.02rem; margin:0 0 14px}
.prose p:last-child{margin-bottom:0}

/* .stage-box is background:var(--ink), which inverts, so --paper is safe */
.stage-box.claim{margin-top:36px; text-align:center; padding:44px 40px}
.stage-box.claim h2{margin:0; text-transform:uppercase; letter-spacing:-.01em}
.stage-box.holding{margin-top:36px}
.stage-box.holding p{margin:0 0 12px}
.stage-box.holding .btn{margin-top:12px}

/* chip strip. on --paper, so --ink and --line are safe */
.mstrip{list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:32px 0 0}
.mstrip li{font-family:"Poppins",sans-serif; font-weight:700; font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  border:1.5px solid var(--line); border-radius:100px; padding:9px 16px}
/* inside .partner, which is --forest: a FIXED dark teal in both themes, so
   these are literal white and never a theme token. White on #135F5F is
   7.42:1, so the label clears AA at this size with room to spare. */
.mstrip-dark li{color:#FFFFFF; border-color:rgba(255,255,255,.55)}

.nobar{margin:26px 0 0; max-width:70ch; color:var(--muted); font-size:.95rem}

.p-claim,.lp-emph{font-family:"Poppins",sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,2rem); line-height:1.06; letter-spacing:-.01em; margin:26px 0 0}
.partner .p-claim{color:var(--on-forest)}
.lp-emph{color:var(--ink)}

.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}

/* ---- what could you do differently ------------------------- */

.dgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px}
/* --card and --line both invert, so this is safe in both themes */
.dcard{background:var(--card); border:1.5px solid var(--line); border-radius:4px; padding:24px}
.dcard .tag{font-family:"Poppins",sans-serif; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green-deep)}
.dcard h3{font-family:"Poppins"; font-weight:800; font-size:1.15rem; margin:10px 0 10px; line-height:1.12}
.dcard p{margin:0; color:var(--muted); font-size:.9rem}

/* ---- possibility wall -------------------------------------- */

.wall-sec{padding:64px 0}
.wall{list-style:none; display:flex; flex-wrap:wrap; align-items:baseline;
  gap:6px 26px; padding:0; margin:0}
.wall li{font-family:"Poppins",sans-serif; text-transform:uppercase;
  line-height:1.02; letter-spacing:-.02em; color:var(--ink)}
.wall .w-xl{font-weight:900; font-size:clamp(2.4rem,6vw,4.6rem); color:var(--ff-text)}
.wall .w-lg{font-weight:800; font-size:clamp(1.8rem,4vw,3.1rem)}
.wall .w-md{font-weight:600; font-size:clamp(1.3rem,2.6vw,2.1rem); color:var(--muted)}
.wall .w-sm{font-weight:500; font-size:clamp(1rem,1.8vw,1.4rem); color:var(--muted)}

/* ---- what's on --------------------------------------------- */

/* eight formats, and Build Labs carries a session list, so it takes two
   columns rather than making every other card as tall as it */
.prog-grid .bcard-wide{grid-column:span 2}
.bcard-list{list-style:none; padding:0; margin:14px 0 0;
  display:grid; grid-template-columns:1fr 1fr; gap:2px 18px}
.bcard-list li{font-size:.9rem; color:var(--ink); padding:6px 0; border-bottom:1px solid var(--line)}

/* copy still waiting on a decision. --muted on --card / --paper, both invert */
.todo{color:var(--muted); font-size:.86rem; font-style:italic}
p.todo{margin:12px 0 0}
li.todo,dd.todo{font-style:italic}
/* .faq-block is a FIXED light surface in BOTH themes, so --muted (a pale grey
   in dark) would land at ~2.2:1. Hard-coded ink, the same reason the decrypt
   effect hard-codes #135F5F here. */
.faq-block .todo{color:#4A4E54}

.strip.nolabel{margin-top:16px}
.strip-price{font-family:"Poppins",sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:.78rem; margin:12px 0 0 !important}
.strip-ink .strip-price{color:var(--paper)}
.strip-cta{margin-top:18px}

/* ---- who it's for, and the day ----------------------------- */

.aud-3{grid-template-columns:repeat(3,1fr)}
.day-5{grid-template-columns:repeat(5,1fr)}

/* ---- logo strip -------------------------------------------- */

.logo-row{display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:8px}
.logo-row-lbl{font-family:"Poppins",sans-serif; font-weight:700; font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); flex:none; min-width:130px}
.logo-row .plogos{flex:1 1 340px}

/* ---- final call -------------------------------------------- */

/* on the brand gradient. --on-ff-soft drops to 3.95:1 at the bright end of
   the ramp, so this is solid white and separates by weight, like .final p */
.final-line{font-family:"Poppins",sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(1.1rem,2.6vw,1.6rem); letter-spacing:.02em; color:var(--on-ff);
  margin:0 auto 26px !important}

/* ---- partner ----------------------------------------------- */

.tiers-5{grid-template-columns:repeat(5,1fr)}

/* ---- venue practical info ---------------------------------- */

.pracs{margin:36px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:0 40px}
.prac{border-top:1.5px solid var(--line); padding:18px 0}
.prac dt{font-family:"Poppins",sans-serif; font-weight:800; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ff-text); margin-bottom:8px}
.prac dd{margin:0; color:var(--ink); font-size:.98rem; line-height:1.5}

/* ---- footer ------------------------------------------------ */

/* the footer band is a fixed dark surface, so these match .foot-col a
   rather than reaching for a theme token */
.foot-todo{display:block; color:#EDEBE3; font-size:.92rem; margin-bottom:8px; opacity:.6; font-style:italic}
.foot-sub{flex:1 1 250px; min-width:230px; max-width:340px}
.foot-sub-h{font-family:"Poppins",sans-serif; font-weight:800; text-transform:uppercase;
  font-size:.8rem; letter-spacing:.04em; color:#EDEBE3; margin:0 0 6px}
.foot-sub-p{color:#EDEBE3; opacity:.7; font-size:.86rem; margin:0 0 12px; line-height:1.45}
.foot-sub-form{display:flex; flex-wrap:wrap; gap:8px}
.foot-sub-form input{flex:1 1 150px; min-width:0; padding:11px 12px; border-radius:2px;
  border:1px solid rgba(237,235,227,.28); background:rgba(237,235,227,.06);
  color:#EDEBE3; font-family:inherit; font-size:.9rem}
.foot-sub-form input::placeholder{color:rgba(237,235,227,.5)}
.foot-sub-form input:focus{border-color:var(--brand-turquoise); outline:none}
.foot-sub-form .btn{padding:11px 16px; font-size:.85rem}
.foot-sub .ok{margin-top:10px; font-size:.86rem}
.foot-bottom a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(154,156,146,.5)}
.foot-bottom a:hover{color:#EDEBE3}

/* ---- responsive -------------------------------------------- */

@media (max-width:1100px){
  .tiers-5{grid-template-columns:repeat(3,1fr)}
  .day-5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .dgrid,.aud-3{grid-template-columns:1fr 1fr}
  .tiers-5,.day-5{grid-template-columns:1fr 1fr}
  .prog-grid .bcard-wide{grid-column:span 2}
  .pracs{grid-template-columns:1fr}
  .wall-sec{padding:44px 0}
}
@media (max-width:640px){
  .dgrid,.aud-3,.tiers-5,.day-5{grid-template-columns:1fr}
  .prog-grid .bcard-wide{grid-column:span 1}
  .bcard-list{grid-template-columns:1fr}
  .logo-row-lbl{min-width:0}
  .foot-sub{max-width:none}
}

/* The hero's first screen is measured, not styled by eye: the trust bar,
   the content and the marquee all have to land above the fold on desktop.
   The brand line and the secondary CTA are new arrivals in that column, so
   they compress against viewport height the same way everything else in the
   FIRST SCREEN block does. Without this they cost ~95px and push the
   marquee off the fold at 1280x720. */
@media (min-width:901px){
  .brandline{margin-top:clamp(8px,1.2vh,18px); font-size:clamp(.68rem,.95vh,.82rem)}
  .hero-ctas{margin-top:clamp(8px,1.25vh,22px)}
  .hero-ctas .btn{padding:clamp(8px,1.2vh,12px) 22px; font-size:clamp(.82rem,1vh,.92rem)}
  .hero-socials{margin-top:clamp(8px,1.2vh,22px)}
}

/* .plogos paints --logo-surface (#EDEEF1), a FIXED near-white in both themes
   so partner marks keep their intended ground. --ink inverts against it, so
   in dark theme the text mark landed at 1.04:1. Hard-coded, same reason the
   FAQ decrypt hard-codes its colour. */
.plogos .tsc{color:#15171B; border-left-color:#D3D7DC}

/* The partnership form is now its own section rather than sitting inside the
   partner band, so a 640px box pinned left reads as a mistake. Centre it. */
#partner-form{margin-inline:auto}

/* Photographs are cropped 3:2, so the box takes that ratio instead of
   collapsing to the 200px floor .photo sets for the empty placeholder
   variant - at 570px wide that floor was a 2.85:1 letterbox. */
.photo.has-img{aspect-ratio:3/2}

/* Partner marks are links now. The anchor has to be a flex box or its
   line-box adds baseline space under each logo and the row stops aligning.
   Hover is gated the same way .btn's is: touch devices fire :hover on tap
   and would strand the dimmed state. */
.plogos a{display:inline-flex; align-items:center; text-decoration:none;
  border-radius:3px; transition:opacity var(--t-fast) ease}
@media (hover:hover) and (pointer:fine){
  .plogos a:hover{opacity:.66}
}
.plogos a:active{opacity:.55}

/* Market Buzz is a mark above a wordmark, so at the shared 48px the wordmark
   lands at ~19px while its neighbours are 28-34px of pure lettering. 60px
   matches it optically rather than mathematically. The supplied artwork also
   carries a tagline, cropped out of the asset because at this size it is an
   illegible smear. */
.plogos img[src$="market-buzz.svg"]{height:60px; max-width:none}

/* ============================================================
   MOBILE TOUCH TARGETS
   Measured at 375px, not guessed. The nav "Register free" button
   was 100x32 - the primary conversion control on the site, below
   even a 36px floor, let alone the 44px guideline. Footer links
   were 85x23 and the social icons 30x30.

   Desktop is untouched: everything here is inside a phone-width
   query, so the measured nav ladder above 901px does not move.
   ============================================================ */
@media (max-width:640px){
  /* 32px -> 46px */
  .nav-cta-btn{padding:14px 20px; font-size:.95rem}
  .menu-btn{padding:13px 16px; min-height:44px}

  /* footer links were 23px tall and stacked 8px apart, which on a
     phone is a column of near-misses. Padding does the work so the
     visual rhythm barely changes. */
  .foot-col a{padding:9px 0; margin-bottom:0; min-height:22px}
  .foot-col a.foot-soc{padding:9px 0}

  /* 30x30 -> 42x42 */
  .soc-link{width:42px; height:42px}

  /* the bottom strip and the partner logo links were missed by the
     .foot-col rule above: 224x19 and 205x28 respectively */
  .foot-bottom a{display:inline-block; padding:8px 0}
  .plogos a{padding:6px 0}
  a[href^="mailto:"]{display:inline-block; padding:8px 0}

  /* smallest labels on the site: .av was 10.2px, tags 10.6px. Under
     11px is where uppercase tracked text stops being readable on a
     phone rather than merely small. */
  .foot-col b{font-size:.72rem}
  .tier .av{font-size:.72rem}
  .bcard .tag,.dcard .tag,.logo-row-lbl,.acard .q{font-size:.72rem}
  .foot-bottom{font-size:.72rem}
}