/* ═══════════════════════════════════════════════════════════
   BrainBuzzed Tutoring — Design System
   Fostering Curiosity, Inspiring Excellence
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand — sampled directly from the BrainBuzzed logo + hero artwork.
     Do not substitute: red #D81824, royal blue #30489C, lemon #F0E424. */
  --buzz:        #F2E42B;   /* lemon yellow — the lightbulb */
  --buzz-deep:   #D9C400;   /* darker lemon, for text on light bg */
  --ember:       #D81824;   /* logo red — "BRAIN" */
  --ember-deep:  #B01019;
  --cobalt:      #30489C;   /* logo blue — left brain hemisphere */
  --cobalt-deep: #22347A;

  /* Neutrals — cooled slightly toward the logo's navy outline */
  --ink:         #141A2E;
  --ink-2:       #38405A;
  --ink-3:       #666E88;
  --rule:        #E2E1DA;
  --paper:       #FCFBF6;
  --paper-2:     #F4F3EC;
  --white:       #FFFFFF;

  /* Type */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --text:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Space + motion */
  --gut: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--text);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--buzz); color: var(--ink); }

.shell { width: min(1240px, 100% - var(--gut) * 2); margin-inline: auto; }
.shell-narrow { width: min(760px, 100% - var(--gut) * 2); margin-inline: auto; }

/* ── Typography ───────────────────────────────────────────── */
.display {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
  line-height: .98;
  letter-spacing: -.025em;
}
/* multi-line headlines need room for the underline flourish to sit in */
h1.display { font-size: clamp(2.9rem, 7.2vw, 6rem); line-height: 1.08; }
h2.display { font-size: clamp(2.1rem, 4.6vw, 3.7rem); line-height: 1.02; }
h3.display { font-size: clamp(1.35rem, 2.3vw, 1.85rem); line-height: 1.14; letter-spacing: -.015em; }

.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ember);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px;
  background: var(--ember); flex: none;
}
.lede { font-size: clamp(1.06rem, 1.5vw, 1.24rem); color: var(--ink-2); line-height: 1.62; }
.muted { color: var(--ink-3); }

/* hand-drawn underline on key words */
.mark { position: relative; white-space: nowrap; }
.mark svg {
  position: absolute; left: -2%; bottom: -.04em; width: 104%; height: .26em;
  overflow: visible; pointer-events: none;
}
.mark svg path {
  fill: none; stroke: var(--buzz); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 400; stroke-dashoffset: 400;
  animation: draw 1.1s var(--ease) .45s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--text); font-size: .93rem; font-weight: 600;
  padding: 15px 26px; border-radius: 100px; border: 1.5px solid transparent;
  cursor: pointer; transition: .28s var(--ease); white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform .28s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--fill { background: var(--ink); color: var(--paper); }
.btn--fill:hover { background: var(--ember); }
.btn--buzz { background: var(--buzz); color: var(--ink); }
.btn--buzz:hover { background: var(--buzz-deep); transform: translateY(-2px); }
.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--ghost-light { border-color: rgba(255,255,255,.35); color: var(--white); }
.btn--ghost-light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--sm { padding: 11px 20px; font-size: .86rem; }

/* ── Announcement bar ─────────────────────────────────────── */
.ticker-bar {
  background: var(--ember); color: var(--white);
  font-size: .8rem; font-weight: 500; letter-spacing: .01em;
  padding: 9px 0; text-align: center;
}
.ticker-bar a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* ── Navigation ───────────────────────────────────────────── */
.nav-wrap {
  position: sticky; top: 0; z-index: 90;
  background: rgba(253,249,240,.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.nav-wrap.stuck { border-bottom-color: var(--rule); box-shadow: 0 6px 30px -18px rgba(22,18,14,.4); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
/* Real BrainBuzzed logo — sized by height so the 1200×440 lockup stays crisp */
.brand-logo { height: 44px; width: auto; }
.brand--foot .brand-logo {
  height: 62px;
  background: var(--white);
  border-radius: 12px;
  padding: 9px 14px;   /* the logo's navy outline needs light behind it on dark */
}

.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a {
  font-size: .92rem; font-weight: 500; color: var(--ink-2);
  position: relative; padding: 4px 0;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--buzz); transition: width .3s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }

.nav-act { display: flex; align-items: center; gap: 14px; }
.nav-phone {
  font-size: .88rem; font-weight: 600; display: flex; align-items: center; gap: 7px;
}
.nav-phone svg { width: 15px; height: 15px; color: var(--ember); }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: .3s var(--ease); }
.burger.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.on span:nth-child(2) { opacity: 0; }
.burger.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none; position: fixed; inset: 76px 0 0; z-index: 88;
  background: var(--paper); padding: 34px var(--gut);
  flex-direction: column; gap: 4px; overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--display); font-size: 1.9rem; font-weight: 600;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero { padding: clamp(32px, 4vw, 52px) 0 clamp(30px, 3.6vw, 46px); position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: -180px; right: -200px;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(48,72,156,.16), transparent 66%);
  pointer-events: none; z-index: 0;
}
.hero .shell { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(34px, 5vw, 70px); align-items: center; }
.hero h1 { margin: 16px 0 18px; }
.hero .lede { max-width: 33rem; }
.hero-cta { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 26px; }
.hero-note {
  margin-top: 20px; font-size: .85rem; color: var(--ink-3);
  display: flex; align-items: center; gap: 9px;
}
.hero-note svg { width: 17px; height: 17px; color: var(--ember); flex: none; }

/* hero collage */
.collage { position: relative; }
/* the supplied hero art is a transparent PNG with its own composed accents —
   no frame or crop, it carries the blue/red/yellow shapes itself */
.hero-art { width: 100%; height: auto; }
.frame {
  position: relative; border-radius: 20px; overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--rule);
}
.frame::after {
  content: attr(data-slot); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); padding: 20px; opacity: .55;
}
.frame--main { aspect-ratio: 4/5; box-shadow: 0 26px 60px -30px rgba(22,18,14,.45); }
.frame--sub {
  position: absolute; right: -6%; bottom: -7%; width: 47%; aspect-ratio: 1;
  border: 5px solid var(--paper); box-shadow: 0 20px 44px -22px rgba(22,18,14,.5);
}
.chip-float {
  position: absolute; left: -7%; top: 11%; z-index: 3;
  background: var(--white); border-radius: 15px; padding: 15px 19px;
  box-shadow: 0 18px 40px -18px rgba(22,18,14,.4);
  display: flex; align-items: center; gap: 12px; animation: bob 5.5s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.chip-float .n { font-family: var(--display); font-size: 1.7rem; font-weight: 700; line-height: 1; }
.chip-float .l { font-size: .7rem; font-weight: 600; color: var(--ink-3); line-height: 1.3; letter-spacing: .02em; }

/* ── Partner marquee ──────────────────────────────────────── */
.marquee-sec { border-block: 1px solid var(--rule); background: var(--white); padding: 20px 0; overflow: hidden; }
.marquee-lab {
  text-align: center; font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px;
}
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee-run { display: flex; flex: none; gap: 46px; padding-right: 46px; animation: slide 34s linear infinite; }
.marquee:hover .marquee-run { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-100%); } }
.marquee-run span {
  font-family: var(--display); font-size: 1.28rem; font-weight: 600;
  white-space: nowrap; color: var(--ink-2); letter-spacing: -.01em;
}

/* ── Sections ─────────────────────────────────────────────── */
.sec { padding: clamp(64px, 8.5vw, 118px) 0; }
.sec--paper2 { background: var(--paper-2); }
.sec--white { background: var(--white); }
.sec-head { max-width: 44rem; margin-bottom: clamp(38px, 5vw, 62px); }
.sec-head h2 { margin: 16px 0 18px; }

/* about — offset editorial */
.about-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(34px, 5.5vw, 78px); align-items: start; }
.quote {
  font-family: var(--display); font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.26; letter-spacing: -.018em; font-weight: 500;
  padding-left: 24px; border-left: 3px solid var(--buzz); margin-bottom: 26px;
}
.byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.byline-av {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--buzz); display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--ink);
}
.byline b { display: block; font-size: .95rem; }
.byline span { font-size: .82rem; color: var(--ink-3); }

/* stat band */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; margin-top: 52px; }
.stat { background: var(--paper); padding: 30px 26px; }
.stat .n {
  font-family: var(--display); font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 700;
  line-height: 1; letter-spacing: -.035em; color: var(--ember);
}
/* alternate red / blue across the band, mirroring the logo's split brain */
.stat:nth-child(even) .n { color: var(--cobalt); }
.stat .l { font-size: .84rem; color: var(--ink-3); margin-top: 9px; line-height: 1.4; }

/* ── Services — numbered editorial list, not cards ────────── */
.svc-list { border-top: 1px solid var(--rule); }
.svc {
  display: grid; grid-template-columns: 84px 1fr 1.05fr auto;
  gap: 28px; align-items: start; padding: 34px 0;
  border-bottom: 1px solid var(--rule);
  transition: background .35s var(--ease), padding .35s var(--ease);
}
.svc:hover { background: var(--white); padding-inline: 22px; }
.svc-n {
  font-family: var(--display); font-size: 1.05rem; font-weight: 700;
  color: var(--buzz-deep); letter-spacing: .02em; padding-top: 5px;
}
.svc-ttl { display: flex; align-items: flex-start; gap: 15px; }
.svc-ttl svg { width: 27px; height: 27px; flex: none; color: var(--ember); margin-top: 2px; }
.svc-body { color: var(--ink-2); font-size: .96rem; padding-top: 3px; }
.svc-body ul { list-style: none; margin-top: 11px; display: flex; flex-wrap: wrap; gap: 7px; }
.svc-body li {
  font-size: .76rem; font-weight: 600; padding: 4px 11px; border-radius: 100px;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--rule);
}
.svc-go {
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--rule);
  display: grid; place-items: center; flex: none; transition: .3s var(--ease); align-self: center;
}
.svc-go svg { width: 16px; height: 16px; }
.svc:hover .svc-go { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: rotate(-45deg); }

/* ── STEAM Bus — full-bleed dark ──────────────────────────── */
.bus {
  background: var(--ink); color: var(--paper);
  padding: clamp(70px, 9vw, 128px) 0; position: relative; overflow: hidden;
}
.bus::before {
  content: ''; position: absolute; left: -14%; top: -22%;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(228,50,43,.34), transparent 68%);
}
.bus .shell { position: relative; z-index: 1; }
.bus-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(38px, 6vw, 80px); align-items: center; }
.bus .eyebrow { color: var(--buzz); }
.bus .eyebrow::before { background: var(--buzz); }
.bus h2 { margin: 18px 0 20px; }
.bus p { color: rgba(253,249,240,.76); font-size: 1.05rem; max-width: 32rem; }
.bus-feats { list-style: none; margin: 32px 0; display: grid; gap: 15px; }
.bus-feats li { display: flex; gap: 13px; align-items: flex-start; font-size: .97rem; color: rgba(253,249,240,.9); }
.bus-feats svg { width: 20px; height: 20px; color: var(--buzz); flex: none; margin-top: 2px; }
.bus-visual {
  border-radius: 22px; aspect-ratio: 5/4; border: 1px solid rgba(253,249,240,.16);
  background: linear-gradient(150deg, rgba(255,199,44,.14), rgba(228,50,43,.1));
  display: grid; place-items: center; text-align: center; padding: 30px;
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(253,249,240,.5);
}

/* ── Video ────────────────────────────────────────────────── */
.video-frame {
  border-radius: 20px; overflow: hidden; background: var(--ink);
  box-shadow: 0 26px 60px -30px rgba(20,26,46,.55); position: relative;
}
.video-frame video { width: 100%; height: auto; display: block; }

/* YouTube facade — loads the iframe only on click, so the CW39 embed costs
   nothing on pageview. Real Core Web Vitals win, which feeds SEO. */
.yt-facade {
  position: relative; display: block; width: 100%; aspect-ratio: 16/9;
  border: 0; padding: 0; cursor: pointer; background: var(--ink);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 26px 60px -30px rgba(20,26,46,.55);
}
.yt-facade img { width: 100%; height: 100%; object-fit: cover; }
.yt-facade::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,26,46,.55), transparent 55%);
  transition: background .3s var(--ease);
}
.yt-facade:hover::after { background: linear-gradient(to top, rgba(20,26,46,.4), transparent 60%); }
.yt-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 76px; height: 76px; border-radius: 50%; background: var(--ember);
  display: grid; place-items: center; z-index: 2;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .28s var(--ease);
}
.yt-facade:hover .yt-play { transform: translate(-50%,-50%) scale(1.09); }
.yt-play svg { width: 27px; height: 27px; color: #fff; margin-left: 4px; }
.yt-facade iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-cap {
  position: absolute; left: 22px; bottom: 20px; z-index: 2; color: #fff;
  text-align: left; font-size: .9rem; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.yt-cap small { display: block; font-weight: 500; opacity: .8; font-size: .78rem; margin-top: 3px; }

/* press strip */
.press {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 24px; border: 1px solid var(--rule); border-radius: 100px;
  background: var(--white); font-size: .92rem; font-weight: 600;
}
.press .badge {
  background: var(--ink); color: var(--buzz); font-weight: 800;
  font-size: .74rem; letter-spacing: .1em; padding: 6px 13px; border-radius: 100px;
}
.press a { border-bottom: 2px solid var(--buzz); }

/* video link list */
.vlist { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
.vlist a {
  display: flex; align-items: center; gap: 15px; padding: 17px 20px;
  background: var(--white); transition: background .22s var(--ease); font-size: .95rem;
}
.vlist a:hover { background: var(--paper-2); }
.vlist .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.vlist .ic svg { width: 17px; height: 17px; }
.vlist .fb { background: #E7EEFB; color: #1877F2; }
.vlist .ig { background: #FCE9F1; color: #C13584; }
.vlist .yt { background: #FDE8E8; color: #D81824; }
.vlist b { display: block; font-weight: 600; }
.vlist span { font-size: .82rem; color: var(--ink-3); }
.vlist .go { margin-left: auto; color: var(--ink-3); }
.vlist .go svg { width: 16px; height: 16px; }

/* ── Sponsorship tiers ────────────────────────────────────── */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tier {
  background: var(--white); border: 1px solid var(--rule); border-radius: 18px;
  padding: 30px 26px; display: flex; flex-direction: column;
  transition: .3s var(--ease); position: relative;
}
.tier:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -28px rgba(22,18,14,.4); }
.tier--star { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.tier--star .tier-amt { color: var(--buzz); }
.tier--star .tier-list li { color: rgba(253,249,240,.82); }
.tier--star .tier-list svg { color: var(--buzz); }
.tier-flag {
  position: absolute; top: -11px; left: 26px; background: var(--buzz); color: var(--ink);
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px;
}
.tier h3 { font-family: var(--display); font-size: 1.22rem; font-weight: 600; letter-spacing: -.015em; }
.tier-amt { font-family: var(--display); font-size: 1.85rem; font-weight: 700; margin: 10px 0 18px; letter-spacing: -.03em; color: var(--ember); }
.tier-amt small { font-family: var(--text); font-size: .78rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.tier-list { list-style: none; display: grid; gap: 11px; margin-bottom: 26px; flex: 1; }
.tier-list li { display: flex; gap: 10px; font-size: .89rem; color: var(--ink-2); line-height: 1.45; }
.tier-list svg { width: 15px; height: 15px; color: var(--ember); flex: none; margin-top: 4px; }

/* ── Testimonial ──────────────────────────────────────────── */
.testi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testi-card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 18px; padding: 30px;
}
.stars { display: flex; gap: 3px; margin-bottom: 15px; }
.stars svg { width: 15px; height: 15px; color: var(--buzz-deep); }
.testi-card p { font-size: .97rem; color: var(--ink-2); line-height: 1.6; }
.testi-who { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--rule); font-size: .85rem; }
.testi-who b { display: block; }
.testi-who span { color: var(--ink-3); font-size: .8rem; }

/* ── Forms ────────────────────────────────────────────────── */
.form { display: grid; gap: 17px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.f { display: grid; gap: 7px; }
.f label { font-size: .82rem; font-weight: 600; letter-spacing: .01em; }
.f input, .f select, .f textarea {
  font-family: var(--text); font-size: .95rem; color: var(--ink);
  padding: 13px 15px; border: 1.5px solid var(--rule); border-radius: 11px;
  background: var(--white); width: 100%; transition: border-color .22s, box-shadow .22s;
}
.f textarea { resize: vertical; min-height: 108px; }
.f input:focus, .f select:focus, .f textarea:focus {
  outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3.5px rgba(255,199,44,.3);
}
.f-note { font-size: .8rem; color: var(--ink-3); }
.hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }
.f-msg { display: none; padding: 14px 17px; border-radius: 11px; font-size: .9rem; font-weight: 500; }
.f-msg.ok { display: block; background: #E9F7EF; color: #1B6B45; border: 1px solid #B7E4CB; }
.f-msg.err { display: block; background: #FDECEB; color: #A82019; border: 1px solid #F5C0BC; }

.seg { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.seg button {
  font-family: var(--text); font-size: .88rem; font-weight: 600; cursor: pointer;
  padding: 11px 20px; border-radius: 100px; border: 1.5px solid var(--rule);
  background: var(--white); color: var(--ink-2); transition: .25s var(--ease);
}
.seg button:hover { border-color: var(--ink-3); }
.seg button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ── CTA + newsletter ─────────────────────────────────────── */
.cta {
  background: var(--buzz); border-radius: 26px;
  padding: clamp(40px, 6vw, 74px); display: grid;
  grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 4.5vw, 60px); align-items: center;
}
.cta h2 { margin-bottom: 14px; }
.cta p { color: var(--ink-2); font-size: 1.03rem; }
.news-box { background: var(--white); border-radius: 18px; padding: 28px; }
.news-box h3 { font-family: var(--display); font-size: 1.2rem; font-weight: 600; margin-bottom: 7px; }
.news-box p { font-size: .88rem; color: var(--ink-3); margin-bottom: 17px; }

/* ── Footer ───────────────────────────────────────────────── */
footer { background: var(--ink); color: rgba(253,249,240,.66); padding: clamp(56px, 7vw, 88px) 0 32px; }
.f-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 42px; margin-bottom: 50px; }
footer .brand-name { color: var(--paper); }
footer .brand-tag { color: rgba(253,249,240,.5); }
.foot-tag {
  margin-top: 14px; font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--buzz);
}
footer h4 {
  color: var(--paper); font-size: .74rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: 17px;
}
footer ul { list-style: none; display: grid; gap: 11px; }
footer li, footer p { font-size: .91rem; line-height: 1.55; }
footer a:hover { color: var(--buzz); }
.f-contact li { display: flex; gap: 11px; align-items: flex-start; }
.f-contact svg { width: 16px; height: 16px; color: var(--buzz); flex: none; margin-top: 3px; }
.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(253,249,240,.2);
  display: grid; place-items: center; transition: .25s var(--ease);
}
.socials a:hover { background: var(--buzz); border-color: var(--buzz); color: var(--ink); }
.socials svg { width: 16px; height: 16px; }
.f-btm {
  border-top: 1px solid rgba(253,249,240,.14); padding-top: 26px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem;
}

/* ── Articles ─────────────────────────────────────────────── */
.art-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.art-card {
  background: var(--white); border: 1px solid var(--rule); border-radius: 18px;
  padding: 28px; display: flex; flex-direction: column; transition: .3s var(--ease);
}
.art-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -28px rgba(20,26,46,.4); }
.art-tag {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ember); margin-bottom: 12px;
}
.art-card h3 { font-family: var(--display); font-size: 1.28rem; font-weight: 600; letter-spacing: -.018em; line-height: 1.2; margin-bottom: 10px; }
.art-card p { font-size: .93rem; color: var(--ink-2); flex: 1; }
.art-meta { margin-top: 18px; font-size: .8rem; color: var(--ink-3); display: flex; gap: 10px; }

/* long-form body */
.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1.15em; }
.prose p, .prose li { font-size: 1.06rem; line-height: 1.72; color: var(--ink-2); }
.prose h2 {
  font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.14;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem); color: var(--ink); margin-top: 2em;
}
.prose h3 {
  font-family: var(--display); font-weight: 600; letter-spacing: -.015em;
  font-size: 1.22rem; color: var(--ink); margin-top: 1.6em;
}
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--ember); font-weight: 700; }
.prose a { color: var(--ink); border-bottom: 2px solid var(--buzz); font-weight: 600; }
.prose a:hover { background: var(--buzz); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose blockquote {
  border-left: 3px solid var(--buzz); padding-left: 22px; margin-left: 0;
  font-family: var(--display); font-size: 1.3rem; line-height: 1.35; color: var(--ink); font-weight: 500;
}
.prose img { border-radius: 16px; }
.callout {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-left: 4px solid var(--ember); border-radius: 12px; padding: 22px 26px;
}
.callout p { margin: 0; font-size: .98rem; }
.callout b { color: var(--ink); }
.art-hero-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: .86rem; color: var(--ink-3); margin-top: 16px; }
.toc {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px; padding: 22px 26px;
}
.toc h4 { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.toc ol { padding-left: 1.1em; }
.toc li { font-size: .93rem; margin: 6px 0; }
.toc a { border-bottom: 1px solid var(--rule); }
.toc a:hover { border-bottom-color: var(--ember); }

/* ── Page hero (interior) ─────────────────────────────────── */
.p-hero { padding: clamp(46px, 6vw, 78px) 0 clamp(38px, 5vw, 58px); border-bottom: 1px solid var(--rule); }
.p-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); margin: 16px 0 18px; }
.crumb { font-size: .82rem; color: var(--ink-3); margin-bottom: 8px; }
.crumb a:hover { color: var(--ember); }

/* ── Scroll reveal ────────────────────────────────────────── */
/* Hidden state applies ONLY when JS is running (html.js is set by an inline
   script in <head>). Without this guard a JS failure would leave every
   revealed section permanently invisible — i.e. a blank site. */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1040px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .testi { grid-template-columns: 1fr; }
  .f-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 880px) {
  .nav-links, .nav-phone { display: none; }
  .burger { display: block; }
  .hero-grid, .about-grid, .bus-grid, .cta { grid-template-columns: 1fr; }
  .collage { max-width: 440px; margin-inline: auto; }
  .svc { grid-template-columns: 46px 1fr; gap: 16px; }
  .svc-body { grid-column: 2; }
  .svc-go { display: none; }
  .f-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .tiers { grid-template-columns: 1fr; }
  .f-grid { grid-template-columns: 1fr; }
  .chip-float { left: -3%; padding: 12px 15px; }
}

/* ── Adventures menu ──────────────────────────────────────── */
.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.adv {
  background: var(--white); border: 1px solid var(--rule); border-radius: 14px;
  padding: 20px 18px; display: flex; gap: 13px; align-items: flex-start;
  transition: .26s var(--ease); position: relative; overflow: hidden;
}
.adv::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c, var(--ember)); transform: scaleY(0); transform-origin: bottom;
  transition: transform .3s var(--ease);
}
.adv:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(20,26,46,.5); border-color: var(--c, var(--ember)); }
.adv:hover::before { transform: scaleY(1); }
.adv svg { width: 24px; height: 24px; flex: none; color: var(--c, var(--ember)); margin-top: 1px; }
.adv b { display: block; font-size: .96rem; font-weight: 700; letter-spacing: -.01em; }
.adv span { font-size: .82rem; color: var(--ink-3); line-height: 1.45; }

.pill-row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.pill {
  font-size: .82rem; font-weight: 600; padding: 8px 16px; border-radius: 100px;
  background: var(--white); border: 1.5px solid var(--rule); color: var(--ink-2);
}
.pill.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ── Photo gallery ────────────────────────────────────────── */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gal figure { position: relative; border-radius: 16px; overflow: hidden; margin: 0; background: var(--ink); }
.gal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.gal figure:hover img { transform: scale(1.045); }
.gal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 15px; color: #fff;
  font-size: .84rem; font-weight: 600; letter-spacing: .01em;
  background: linear-gradient(to top, rgba(10,14,28,.88), transparent);
}
.gal .wide { grid-column: span 2; }
.gal .tall { grid-row: span 2; }
@media (max-width: 860px) { .gal { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gal { grid-template-columns: 1fr; } .gal .wide { grid-column: span 1; } }

/* ── Shop ─────────────────────────────────────────────────── */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 20px; }
.prod {
  background: var(--white); border: 1px solid var(--rule); border-radius: 18px;
  overflow: hidden; display: flex; flex-direction: column; transition: .28s var(--ease);
}
.prod:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -28px rgba(20,26,46,.42); }
.prod-art {
  aspect-ratio: 4/3; background: var(--paper-2); display: grid; place-items: center;
  border-bottom: 1px solid var(--rule); color: var(--ink-3);
}
.prod-art svg { width: 82px; height: 82px; }
.prod-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.prod-body h3 { font-family: var(--display); font-size: 1.12rem; font-weight: 600; letter-spacing: -.015em; }
.prod-body p { font-size: .9rem; color: var(--ink-2); margin-top: 7px; }
.prod-meta { font-size: .78rem !important; color: var(--ink-3) !important; margin-top: 9px !important; }
.prod-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prod-price { font-family: var(--display); font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; }

/* cart */
.cart-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 100px;
  padding: 15px 24px; font-family: var(--text); font-weight: 700; font-size: .93rem;
  cursor: pointer; box-shadow: 0 14px 36px -12px rgba(20,26,46,.55);
  display: none; align-items: center; gap: 10px;
}
.cart-btn.show { display: inline-flex; }
.cart-btn svg { width: 17px; height: 17px; }
.cart-count { background: var(--buzz); color: var(--ink); border-radius: 100px; padding: 1px 9px; font-size: .8rem; }
.cart-panel {
  position: fixed; inset: 0; z-index: 95; background: rgba(20,26,46,.45);
  display: none; align-items: flex-end; justify-content: center;
}
.cart-panel.open { display: flex; }
.cart-inner {
  background: var(--paper); width: min(520px, 100%); max-height: 86vh; overflow-y: auto;
  border-radius: 22px 22px 0 0; padding: 28px;
}
@media (min-width: 640px) { .cart-panel { align-items: center; } .cart-inner { border-radius: 22px; } }
.cart-row { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.cart-row b { font-size: .95rem; }
.cart-row .qty { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.cart-row button {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--rule);
  background: var(--white); cursor: pointer; font-size: 1rem; line-height: 1;
}

/* ── Social carousel ──────────────────────────────────────── */
.soc-wrap { position: relative; }
.soc-rail {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.soc-rail::-webkit-scrollbar { display: none; }
.soc-card {
  flex: 0 0 clamp(240px, 30vw, 300px); scroll-snap-align: start;
  background: var(--white); border: 1px solid var(--rule); border-radius: 16px;
  overflow: hidden; transition: .28s var(--ease); display: flex; flex-direction: column;
}
.soc-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -26px rgba(20,26,46,.42); }
.soc-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--paper-2); }
.soc-media img { width: 100%; height: 100%; object-fit: cover; }
.soc-net {
  position: absolute; top: 11px; left: 11px; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
}
.soc-net svg { width: 15px; height: 15px; }
.soc-net.instagram { color: #C13584; }
.soc-net.facebook  { color: #1877F2; }
.soc-net.twitter   { color: #141A2E; }
.soc-net.youtube   { color: #D81824; }
.soc-play {
  position: absolute; right: 11px; bottom: 11px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(20,26,46,.72); display: grid; place-items: center; color: #fff;
}
.soc-play svg { width: 13px; height: 13px; margin-left: 2px; }
.soc-cap { padding: 15px 17px 18px; font-size: .88rem; color: var(--ink-2); line-height: 1.5; flex: 1; }
.soc-nav { display: flex; gap: 9px; }
.soc-nav button {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--rule);
  background: var(--white); cursor: pointer; display: grid; place-items: center;
  transition: .24s var(--ease); color: var(--ink);
}
.soc-nav button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.soc-nav button:disabled { opacity: .35; cursor: default; }
.soc-nav svg { width: 17px; height: 17px; }
.soc-links { display: flex; gap: 10px; flex-wrap: wrap; }
.soc-links a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border: 1.5px solid var(--rule); border-radius: 100px; background: var(--white);
  font-size: .86rem; font-weight: 600; transition: .24s var(--ease);
}
.soc-links a:hover { border-color: var(--ink); transform: translateY(-2px); }
.soc-links svg { width: 15px; height: 15px; }

/* ── Pricing ──────────────────────────────────────────────── */
.track-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 20px; }
.track {
  background: var(--white); border: 1px solid var(--rule); border-radius: 18px;
  padding: 28px 26px; display: flex; flex-direction: column; position: relative;
  border-top: 4px solid var(--c, var(--ember)); transition: .28s var(--ease);
}
.track:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -28px rgba(20,26,46,.4); }
.track h3 { font-family: var(--display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.018em; }
.track .rate {
  font-family: var(--display); font-size: 2rem; font-weight: 700;
  letter-spacing: -.035em; color: var(--c, var(--ember)); margin: 12px 0 4px; line-height: 1;
}
.track .rate small { font-family: var(--text); font-size: .82rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.track .min { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.track p { font-size: .92rem; color: var(--ink-2); margin-top: 12px; flex: 1; }
.track ul { list-style: none; margin-top: 14px; display: grid; gap: 7px; }
.track li { font-size: .87rem; color: var(--ink-2); padding-left: 16px; position: relative; }
.track li::before { content: '›'; position: absolute; left: 0; color: var(--c, var(--ember)); font-weight: 700; }

.price-table { width: 100%; border-collapse: collapse; background: var(--white); font-size: .94rem; }
.price-table th, .price-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--rule); }
.price-table th {
  background: var(--ink); color: var(--paper); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
.price-table tbody tr:hover td { background: var(--paper-2); }
.price-table td:last-child, .price-table th:last-child { text-align: right; font-weight: 700; }
.price-table tr.hl td { background: #FFFBE6; }
.price-table tr.hl td:first-child::after {
  content: 'BEST VALUE'; margin-left: 10px; font-size: .62rem; font-weight: 800;
  letter-spacing: .1em; background: var(--buzz); color: var(--ink); padding: 3px 8px; border-radius: 100px;
}
.table-wrap { border: 1px solid var(--rule); border-radius: 16px; overflow: auto; }

.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.topic {
  background: var(--white); border: 1px solid var(--rule); border-radius: 14px; padding: 20px 22px;
}
.topic b { display: block; font-size: .98rem; margin-bottom: 8px; }
.topic .prog { font-size: .84rem; color: var(--ink-3); line-height: 1.6; }
.topic .prog span { color: var(--ink-2); }
.topic .prog i { font-style: normal; color: var(--ember); font-weight: 700; margin: 0 5px; }

.terms { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 16px; padding: 26px 30px; }
.terms h4 { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.terms li { font-size: .9rem; color: var(--ink-2); margin-bottom: 9px; }

/* ── Newsletter pop-up ─────────────────────────────────────────────────────
   Fires on scroll depth or exit intent, never on load. Dismissal persists. */
.np-wrap { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
           padding: 20px; opacity: 0; pointer-events: none; transition: opacity .22s var(--ease); }
.np-wrap.is-open { opacity: 1; pointer-events: auto; }
.np-scrim { position: absolute; inset: 0; background: rgba(20,26,46,.62); backdrop-filter: blur(3px); }
.np-card { position: relative; width: min(440px, 100%); background: var(--paper);
           border-radius: 20px; padding: clamp(26px,4vw,36px); text-align: left;
           box-shadow: 0 40px 90px -30px rgba(20,26,46,.6);
           transform: translateY(14px) scale(.98); transition: transform .26s var(--ease); }
.np-wrap.is-open .np-card { transform: none; }
.np-eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
              color: var(--ember); margin-bottom: 10px; }
.np-card h2 { font-family: var(--display); font-size: clamp(1.35rem,3vw,1.7rem); font-weight: 600;
              letter-spacing: -.024em; line-height: 1.12; margin-bottom: 10px; text-wrap: balance; }
.np-card #npBody { font-size: .92rem; color: var(--ink-2); line-height: 1.6; margin-bottom: 20px; }
.np-form { display: flex; flex-wrap: wrap; gap: 9px; }
.np-form input { flex: 1 1 190px; min-width: 0; font: inherit; font-size: .95rem; padding: 12px 14px;
                 background: var(--white); border: 1.5px solid var(--rule); border-radius: 11px; color: var(--ink); }
.np-form input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(48,72,156,.15); }
.np-form .btn { flex: 0 0 auto; }
.np-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
         overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.np-msg:empty { display: none; }
.np-msg { margin-top: 12px; font-size: .87rem; line-height: 1.5; }
.np-msg.is-ok { color: var(--cobalt); font-weight: 600; }
.np-msg.is-err { color: var(--ember); font-weight: 600; }
.np-no { display: block; margin: 16px auto 0; background: none; border: none; font: inherit;
         font-size: .84rem; color: var(--ink-3); cursor: pointer; text-decoration: underline; }
.np-no:hover { color: var(--ink); }
.np-x { position: absolute; top: 12px; right: 14px; background: none; border: none;
        font-size: 1.6rem; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 4px 8px; }
.np-x:hover { color: var(--ink); }
.np-x:focus-visible, .np-no:focus-visible { outline: 3px solid var(--buzz); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .np-wrap, .np-card { transition: none; }
}


/* ── nav dropdown ──────────────────────────────────────────────────────────
   Seven top-level links was too many to scan. The five programmes now live
   under one heading, which is also the order Patience ranks them in: tutoring
   is the revenue line and reads first. */
.has-menu { position: relative; }
.nav-top {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: .93rem; font-weight: 500; color: var(--ink-2);
  background: none; border: none; padding: 0; cursor: pointer;
  transition: color .16s;
}
.nav-top svg { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.nav-top:hover, .has-menu:hover .nav-top { color: var(--ink); }
.nav-top[aria-expanded="true"] { color: var(--ink); }
.nav-top[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-top:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; border-radius: 3px; }

.submenu {
  position: absolute; top: calc(100% + 14px); left: -18px; z-index: 60;
  min-width: 302px; padding: 8px;
  background: var(--white); border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: 0 30px 70px -34px rgba(20,26,46,.44);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s var(--ease), visibility .18s;
}
/* A gap between the button and the panel would close the menu as the pointer
   crosses it, so the hit area is bridged instead. */
.has-menu::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.has-menu:hover .submenu,
.has-menu:focus-within .submenu,
.submenu.is-open { opacity: 1; visibility: visible; transform: none; }

.submenu a { display: block; padding: 11px 13px; border-radius: 11px; color: var(--ink); transition: background .14s; }
.submenu a:hover, .submenu a:focus-visible { background: var(--paper-2); }
.submenu b { display: block; font-size: .93rem; font-weight: 600; }
.submenu i { font-style: normal; display: block; font-size: .8rem; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }

@media (max-width: 1040px) { .submenu { display: none; } }

/* The Join Us menu sits close to the right edge, so it hangs from that side
   instead of overflowing the viewport. */
.submenu--right { left: auto; right: -18px; min-width: 286px; }
.submenu-all { border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 13px !important; }
.submenu-all b { color: var(--cobalt); }

/* ── social menu ───────────────────────────────────────────────────────────
   An icon rather than a sixth word in the bar: she asked for the socials AND
   for less clutter, and those pull against each other unless one of them
   stops being text. */

.submenu--social { min-width: 264px; }
.submenu--social a { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: center; }
.submenu--social svg { width: 18px; height: 18px; color: var(--ink-2); }
.submenu--social a:hover svg { color: var(--ink); }
.submenu--social i { font-variant-numeric: tabular-nums; }

/* Below the nav breakpoint the icon stays but its menu is suppressed with the
   others, so the footer's social row is the route on small screens. */

/* ── gallery ───────────────────────────────────────────────────────────────
   An asymmetric mosaic rather than a grid of equal squares: the video is the
   thing worth looking at, so it gets the room. */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .gal { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gal { grid-template-columns: 1fr; } }
.gal-item { margin: 0; border-radius: 16px; overflow: hidden; background: var(--white);
            border: 1px solid var(--rule); position: relative; }
.gal-item--wide { grid-column: span 2; grid-row: span 2; }
@media (max-width: 560px) { .gal-item--wide { grid-column: span 1; grid-row: span 1; } }
.gal-item img, .gal-item video { display: block; width: 100%; height: 100%;
                                 object-fit: cover; aspect-ratio: 4 / 3; }
.gal-item--wide video { aspect-ratio: 16 / 10; }
.gal-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 16px 12px;
  font-size: .8rem; font-weight: 600; color: #FFF;
  background: linear-gradient(transparent, rgba(12,16,30,.82));
  pointer-events: none;
}
/* The video needs its controls clickable, so its caption sits under it. */
.gal-item--wide { display: grid; grid-template-rows: 1fr auto; }
.gal-item--wide figcaption { position: static; background: none; color: var(--ink-2);
                             padding: 11px 14px; font-weight: 500; }

.gal-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
.gal-more p { margin: 0; font-size: .9rem; color: var(--ink-3); }
.gal-more a { font-size: .87rem; font-weight: 600; padding: 7px 14px;
              border: 1px solid var(--rule); border-radius: 999px; transition: border-color .15s, background .15s; }
.gal-more a:hover { border-color: var(--ink); background: var(--white); }

/* ── Blog teaser (homepage) ───────────────────────────────────────────────
   Three article cards. Deliberately not the icon-over-title-over-paragraph
   pattern: the kicker classifies the reader, the rule under it carries the
   brand yellow, and the whole card is the link target. */
.blog-grid {
  display: grid; gap: 20px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.blog-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px 22px;
  background: var(--white);
  border: 1px solid var(--rule); border-radius: 18px;
  color: inherit; text-decoration: none;
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              box-shadow .35s cubic-bezier(.22,1,.36,1),
              border-color .35s cubic-bezier(.22,1,.36,1);
}
.blog-card:hover, .blog-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--ink);
  box-shadow: 0 14px 34px rgba(20, 26, 46, .10);
}
.blog-kicker {
  font-size: .68rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 10px; margin-bottom: 2px;
  border-bottom: 2px solid var(--buzz); align-self: flex-start;
}
.blog-card h3 {
  font-family: var(--display);
  font-size: 1.16rem; line-height: 1.25; letter-spacing: -.015em;
  text-wrap: balance; margin: 0;
}
.blog-dek { font-size: .9rem; color: var(--ink-2); line-height: 1.6; margin: 0; }
.blog-more {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: auto; padding-top: 14px;
  font-size: .84rem; font-weight: 700; color: var(--ink);
}
.blog-more svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.blog-card:hover .blog-more svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-more svg { transition: none; }
  .blog-card:hover, .blog-card:focus-visible { transform: none; }
  .blog-card:hover .blog-more svg { transform: none; }
}

/* ── Merch strip ──────────────────────────────────────────────────────────
   Two columns on desktop, stacked on narrow screens. The thumbnails were
   previously a hard-coded 3-column grid inside a non-stacking two-column
   shell, which pushed the row past the viewport on phones. */
.merch-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 58px); align-items: center;
}
.merch-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) {
  .merch-grid { grid-template-columns: 1fr; }
}

/* ── Hero photo ───────────────────────────────────────────────────────────
   hero.png had the circular crop and the brand's geometric accents baked
   into the file, so any new photograph would have lost them. The treatment
   is rebuilt here instead: a circular mask plus the blue slashes and the
   red and yellow discs from the logo palette, drawn around the image. Now
   the photo can be swapped without touching the brand device. */
.hero-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero-photo img {
  position: relative; z-index: 1;
  /* height:auto is required — the img carries width/height attributes for
     layout stability, and with both dimensions specified aspect-ratio is
     ignored and the circle renders as an oval. */
  width: 78%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: 42% center;
  border-radius: 50%;
  box-shadow: 0 18px 50px rgba(20, 26, 46, .16);
}
/* Two blue slashes, echoing the lightning bolts in the logo. */
.hero-photo::before,
.hero-photo::after {
  content: ""; position: absolute; z-index: 2;
  width: 13%; height: 46%;
  background: var(--cobalt);
  border-radius: 999px;
  transform: rotate(28deg);
}
.hero-photo::before { top: -4%;  right: 8%; }
.hero-photo::after  { bottom: -2%; left: 10%; height: 34%; width: 10%; }
/* Red and yellow discs. Decorative only, so they are hidden from screen readers. */
.hero-dot {
  position: absolute; z-index: 0; border-radius: 50%; display: block;
}
.hero-dot--red    { width: 17%; aspect-ratio: 1; background: var(--ember); left: 0;    top: 46%; }
.hero-dot--yellow { width: 9%;  aspect-ratio: 1; background: var(--buzz);              right: 4%;  bottom: 16%; }
.hero-dot--sm     { width: 6%;  aspect-ratio: 1; background: var(--buzz);              left: 21%;  top: 20%; }
@media (max-width: 860px) {
  .hero-photo img { width: 84%; }
}

/* ── Sponsor tier capture dialog ──────────────────────────────────────────
   One dialog shared by all four tier cards. Native <dialog> so focus
   trapping, Escape and the backdrop come from the browser rather than from
   script we would have to maintain. */
.sp-dlg {
  width: min(92vw, 30rem);
  margin: auto;   /* the reset zeroes margins, which un-centres a native dialog */
  border: 1px solid var(--rule); border-radius: 20px;
  padding: clamp(24px, 4vw, 34px);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 28px 70px rgba(20, 26, 46, .26);
}
.sp-dlg::backdrop { background: rgba(20, 26, 46, .52); }
.sp-dlg h2 { font-size: clamp(1.4rem, 3.4vw, 1.85rem); margin: 12px 0 10px; }
.sp-dek { font-size: .92rem; color: var(--ink-2); line-height: 1.6; margin-bottom: 20px; }
.sp-close-form { display: flex; justify-content: flex-end; margin: -10px -6px 0 0; }
.sp-close {
  border: 0; background: none; cursor: pointer; line-height: 1;
  font-size: 1.7rem; color: var(--ink-3); padding: 2px 6px; border-radius: 8px;
}
.sp-close:hover { color: var(--ink); }
.sp-close:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.sp-dlg .f { margin-bottom: 13px; }
.sp-dlg label {
  display: block; font-size: .78rem; font-weight: 700;
  color: var(--ink-2); margin-bottom: 5px;
}
.sp-dlg input[type="text"], .sp-dlg input[type="email"] {
  width: 100%; padding: 11px 13px; font: inherit; font-size: .93rem;
  border: 1px solid var(--rule); border-radius: 11px;
  background: var(--white); color: var(--ink);
}
.sp-dlg input:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; border-color: var(--cobalt); }
.sp-dlg .btn { width: 100%; justify-content: center; margin-top: 4px; }
.sp-dlg .f-msg { margin-top: 11px; font-size: .87rem; min-height: 1.2em; }
.sp-dlg .f-msg.ok  { color: #1A7F4B; font-weight: 600; }
.sp-dlg .f-msg.err { color: var(--ember-deep); font-weight: 600; }