/* ==========================================================================
   Breakthrough Revolution Corporation
   Design system — palette sampled from the company logo.
   Navy #0C2448 and red #B40C0C are the brand; everything else is neutral.
   ========================================================================== */

:root {
  /* Colour */
  --navy:         #0C2448;
  --navy-deep:    #081A36;
  --navy-line:    #1E3A66;
  --navy-glow:    rgba(12, 36, 72, 0.16);
  --red:          #B40C0C;
  --red-vivid:    #D92525;
  --red-dark:     #8A0909;
  --red-glow:     rgba(217, 37, 37, 0.35);
  --glass-bg:     rgba(255, 255, 255, 0.85);
  --glass-border: rgba(12, 36, 72, 0.08);
  --ground:       #FBFAF8;
  --surface:      #FFFFFF;
  --rule:         #E4E0DA;
  --rule-soft:    #EFEDE9;
  --body:         #4A5265;
  --muted:        #7E8696;
  --on-navy:      #A8B4CC;
  --on-navy-2:    #8FA0C0;
  --image-bg:     #F1EDE8;

  /* Type */
  --font-display: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: Spectral, Georgia, "Times New Roman", serif;

  /* Layout */
  --measure: 700px;
  --container: 1180px;
  --gutter: clamp(20px, 6vw, 130px);
  --section-y: clamp(56px, 9vw, 112px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

::selection { background: var(--navy); color: #fff; }

/* ---------- layout primitives ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Full-bleed bands handle their own inner gutter */
.band { padding-block: var(--section-y); }
.band--surface { background: var(--surface); border-block: 1px solid var(--rule); }
.band--navy { background: var(--navy); }

.measure { max-width: var(--measure); }

.stack { display: flex; flex-direction: column; }
.center-col { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* ---------- typography scale ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow--muted { color: var(--muted); }

h1, .h1 {
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.028em;
}
h2, .h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.022em;
}
h3, .h3 {
  font-size: clamp(20px, 1.9vw, 23px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.012em;
}
.lede { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; }
.small { font-size: 15px; line-height: 1.65; color: var(--muted); }

.quote {
  font-size: clamp(21px, 2.9vw, 34px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--navy);
}

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 9999px;
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(12, 36, 72, 0.08);
  transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .2s ease, background .2s ease, color .2s ease;
  user-select: none;
  -webkit-user-select: none;
}
.btn:active {
  transform: scale(0.97);
}
.btn--primary {
  background: linear-gradient(135deg, var(--navy) 0%, #163765 100%);
  color: #fff;
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px var(--navy-glow);
}
.btn--accent {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-vivid) 100%);
  color: #fff;
}
.btn--accent:hover {
  background: linear-gradient(135deg, var(--red-dark) 0%, var(--red) 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px var(--red-glow);
}

.link-arrow {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: .4em;
}
.link-arrow:hover { color: var(--red-dark); }

.rule-accent { width: 40px; height: 2px; background: var(--red); display: block; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 20px rgba(12, 36, 72, 0.04);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
  padding-block: 14px;
}
.site-header__logo img { height: 44px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
}
.nav a { color: var(--navy); }
.nav a:hover { color: var(--red); }
.nav__divider { width: 1px; height: 18px; background: var(--rule); }
.nav__util { font-size: 13px; font-weight: 400; color: var(--muted); }
.nav__util:hover { color: var(--red); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  align-items: flex-end;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--navy);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 12px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 16px 32px rgba(12, 36, 72, 0.08);
  }
  .nav.is-open { display: flex; }
  .nav a { display: block; width: 100%; padding: 13px 0; border-bottom: 1px solid var(--rule-soft); font-size: 16px; }
  .nav__divider { display: none; }
  .site-header__inner { position: relative; min-height: 64px; }
  .site-header__logo img { height: 36px; }
  .site-header { position: sticky; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-block: var(--section-y); }
.hero__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.hero__text p { max-width: 470px; }
.hero__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 4px; }
.hero__media {
  position: relative;
  aspect-ratio: 62 / 50;
  max-width: 100%;
  border-radius: 24px;
  background: var(--image-bg);
  box-shadow: 0 20px 50px -10px var(--navy-glow);
  transform: perspective(1000px) rotateY(var(--hero-scroll-tilt, 0deg));
  transition: transform .2s ease-out;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

/* Floating product highlight tags */
.floating-product-tag {
  position: absolute;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9999px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--navy-deep);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 28px -4px rgba(12, 36, 72, 0.16), 0 0 0 1px rgba(12, 36, 72, 0.05);
  pointer-events: none;
  white-space: nowrap;
  will-change: transform;
}
.floating-product-tag--1 {
  top: 10%;
  left: -20px;
}
.floating-product-tag--2 {
  bottom: 12%;
  right: -20px;
}
.floating-product-tag--3 {
  bottom: 26%;
  left: 4%;
}

@media (max-width: 860px) {
  .floating-product-tag {
    font-size: 11px;
    padding: 7px 12px;
  }
  .floating-product-tag--1 { left: 4px; top: 6%; }
  .floating-product-tag--2 { right: 4px; bottom: 6%; }
  .floating-product-tag--3 { display: none; }
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__actions { width: 100%; flex-direction: column; align-items: stretch; gap: 14px; }
  .hero__actions .btn { width: 100%; }
  .hero__actions .link-arrow { justify-content: center; min-height: 48px; }
}

/* ==========================================================================
   Brand strip
   ========================================================================== */
.brand-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 52px;
  flex-wrap: wrap;
  padding-block: 30px;
  border-block: 1px solid var(--rule);
}
.brand-strip__list {
  display: flex;
  align-items: center;
  gap: 24px clamp(24px, 4vw, 52px);
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.brand-strip__list a { color: var(--navy); }
.brand-strip__list a:hover { color: var(--red); }

/* ==========================================================================
   Card grid (Mission / Events / Get Involved)
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 64px);
}
.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(24px, 3.5vw, 36px);
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--rule-soft);
  box-shadow: 0 4px 20px rgba(12, 36, 72, 0.04);
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .25s ease, border-color .25s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px -8px var(--navy-glow);
  border-color: rgba(12, 36, 72, 0.12);
}
.card p { font-size: 16px; }

@media (max-width: 860px) { .cards { grid-template-columns: 1fr; gap: 44px; } }

/* ==========================================================================
   News
   ========================================================================== */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 3.5vw, 44px);
}
.news-item {
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition: transform .25s ease;
}
.news-item__media {
  aspect-ratio: 13 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: var(--image-bg);
  box-shadow: 0 4px 16px rgba(12, 36, 72, 0.05);
}
.news-item__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1);
}
.news-item:hover .news-item__media img { transform: scale(1.04); }
.news-item h3 { font-size: clamp(18px, 1.6vw, 20px); }
.news-item p { font-size: 15px; line-height: 1.65; color: #5A6274; }

@media (max-width: 860px) { .news-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ==========================================================================
   Testimonial / scripture
   ========================================================================== */
.testimonial .quote { color: #fff; font-size: clamp(20px, 2.6vw, 31px); }
.testimonial .attribution {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-navy-2);
}
.scripture p {
  font-size: clamp(17px, 1.5vw, 22px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.75;
  color: var(--body);
  max-width: 760px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy); color: var(--on-navy); padding-top: clamp(48px, 7vw, 84px); }
.site-footer a { color: var(--on-navy); }
.site-footer a:hover { color: #fff; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}
.footer-col a, .footer-col p { font-size: 15px; font-weight: 300; line-height: 1.75; }

.wordmark {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  line-height: 1.2;
}
.wordmark span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .42em;
  color: var(--on-navy-2);
  margin-top: 3px;
}

.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding-block: 26px;
  border-top: 1px solid var(--navy-line);
  font-family: var(--font-display);
  font-size: 12px;
  color: #7E8CA8;
}

.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-legal a { color: #7E8CA8; }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- utility ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 20px;
  font-family: var(--font-display); font-size: 14px;
}
.skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   Inner pages
   ========================================================================== */
.page-hero { padding-block: clamp(40px, 5vw, 72px) clamp(14px, 2vw, 24px); }
.page-hero h1 { max-width: 16ch; }
.page-hero .lede { max-width: 58ch; margin-top: 22px; }
.page-hero .eyebrow { display: block; margin-bottom: 14px; }

/* Anchored sections must clear nothing (header isn't sticky), but give them
   a little breathing room when jumped to. */
[id] { scroll-margin-top: 24px; }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 0; }
.prose h3 { margin-top: 1.8em; }

/* Legal pages (terms, privacy, refunds) — long numbered sections, lists and
   small comparison tables. Tables scroll inside their wrapper on phones so
   the page itself never scrolls sideways. */
.legal-meta { font-family: var(--font-display); font-size: 13px; color: var(--muted); margin-top: 18px; }
.legal h2 { font-size: clamp(20px, 1.8vw, 24px); margin-top: 2.2em; }
.legal h2:first-child { margin-top: 0; }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal li + li { margin-top: .45em; }
.legal strong { font-weight: 500; color: var(--navy); }
.legal-table { overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px; }
.legal-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); }
.legal-table th { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--navy); background: var(--ground); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-related { display: flex; flex-wrap: wrap; gap: 10px 24px; font-family: var(--font-display); font-size: 14px; }

.section-intro { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; margin-bottom: clamp(28px, 4vw, 44px); }

/* Core values — a numbered list is correct here: they are numbered 1–10 in
   the company's own material. */
.values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.values li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 22px 24px;
  background: var(--surface);
}
.values .n {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  min-width: 1.6em;
}
.values .v {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--navy);
}
@media (max-width: 720px) { .values { grid-template-columns: 1fr; } }

/* Simple two-column split for text beside a figure */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.figure { overflow: hidden; background: var(--image-bg); }
.figure img { width: 100%; height: 100%; object-fit: cover; }

/* Breadcrumb */
.crumb {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  padding-top: 22px;
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--red); }

/* 404 */
.notfound { padding-block: clamp(72px, 12vw, 160px); }

/* ==========================================================================
   News list
   ========================================================================== */
.news-list { display: flex; flex-direction: column; }
.post {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  padding-block: clamp(30px, 4vw, 44px);
  border-bottom: 1px solid var(--rule);
}
.post:first-child { padding-top: 0; }
.post:last-child { border-bottom: 0; }
.post--no-media { grid-template-columns: 340px minmax(0, 1fr); }
.post--no-media .post__body { grid-column: 2; }

.post__media { aspect-ratio: 13 / 9; overflow: hidden; background: var(--image-bg); }
.post__media img { width: 100%; height: 100%; object-fit: cover; }

.post__body { display: flex; flex-direction: column; gap: 12px; }
.post__body h2 { font-size: clamp(21px, 2.3vw, 27px); }
.post__body p:last-child { font-size: clamp(16px, 1.15vw, 17px); }
.post__date { color: var(--muted); letter-spacing: .1em; }

@media (max-width: 760px) {
  .post, .post--no-media { grid-template-columns: 1fr; }
  .post--no-media .post__body { grid-column: 1; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.contact-card h2 { margin: 0; }
.contact-value {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy);
  word-break: break-word;
}
.contact-value a { color: var(--navy); border-bottom: 1px solid var(--rule); }
.contact-value a:hover { color: var(--red); border-color: currentColor; }
.contact-value--address { font-weight: 400; }

/* ==========================================================================
   Packages
   ========================================================================== */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.tier {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--surface);
}
.tier--feature { background: #FCFBF9; }
.tier h3 { margin: 0; }
.tier__price {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 31px);
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.tier p:last-child { font-size: 15px; color: var(--muted); }
@media (max-width: 760px) { .tiers { grid-template-columns: 1fr; } }

/* ==========================================================================
   Product lists
   ========================================================================== */
.product-list { list-style: none; margin: 4px 0 0; padding: 0; }
.product-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 16px;
}
.product-list li:last-child { border-bottom: 0; }
.product-list .price {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- fixes found in review ---------- */

/* News headlines are links, and were inheriting the global red link colour.
   Headings stay navy; red is reserved for the action links beneath them. */
.news-item h3 a,
.post__body h2 a { color: var(--navy); }
.news-item h3 a:hover,
.post__body h2 a:hover { color: var(--red); }

/* A white button for use on the navy bands. Was an inline style, which left
   the hover state reverting to navy-on-navy. */
.btn--on-dark { background: #fff; color: var(--navy); }
.btn--on-dark:hover { background: var(--on-navy); color: var(--navy-deep); }

/* ==========================================================================
   Slideshow
   The brand banners carried over from the old site. Their wording is baked
   into the artwork, so each slide's alt text repeats it — otherwise the
   message is invisible to search engines and screen readers alike.
   ========================================================================== */
.slideshow { padding-block: clamp(40px, 5vw, 72px); }

.slideshow__viewport {
  position: relative;
  overflow: hidden;
  background: var(--image-bg);
}
.slideshow__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slideshow__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .slideshow__track { scroll-behavior: auto; }
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}
.slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 2100 / 1010;
  object-fit: cover;
  display: block;
}

.slideshow__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  background: rgba(255, 255, 255, .88);
  color: var(--navy);
  border: 0;
  cursor: pointer;
  transition: background-color .18s ease;
}
.slideshow__nav:hover { background: #fff; }
.slideshow__nav:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.slideshow__nav--prev { left: 0; }
.slideshow__nav--next { right: 0; }
.slideshow__nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; }

.slideshow__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.slideshow__dot {
  /* 18px tall for a usable hit target; the visible bar is the ::after.
     Note this is a border-box document, so the height must cover the bar
     AND its breathing room — setting height:2px with padding collapsed the
     pseudo-element to nothing. */
  width: 26px;
  height: 18px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.slideshow__dot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 2px;
  /* --rule is a hairline colour: on the near-white ground it was invisible.
     These need to read as controls, so they get a real mid-grey. */
  background: #BDB8AF;
  transition: background-color .2s ease;
}
.slideshow__dot[aria-current="true"]::after { background: var(--red); }
.slideshow__dot:hover::after { background: var(--navy); }
.slideshow__dot:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@media (max-width: 600px) {
  .slideshow__nav { width: 38px; height: 38px; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.voices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 52px);
}
/* figure carries a default 40px side margin in every browser — without
   this reset the photo and quote sit inset from their grid column. */
.voice { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.voice__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--image-bg);
}
.voice__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.voice blockquote {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 17px);
  line-height: 1.6;
  font-style: italic;
  font-weight: 300;
  color: var(--body);
}
.voice__who {
  /* Pushes every attribution to the bottom of its cell, so the names line up
     across a row even when the quotes differ in length. */
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
}
.voice__who span {
  display: block;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--muted);
  margin-top: 5px;
  font-size: 13px;
}
@media (max-width: 900px) { .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .voices { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- slideshow as the page hero ---------- */
/* Aligned to the content column, not full-bleed, so its edges line up with
   every other section down the page. Costs some height on a 2.08:1 banner —
   567px rather than 692px on a 1440 screen — and buys a consistent grid. */
.slideshow--hero { padding-block: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 44px); }
.slideshow--hero .slideshow__dots { margin-top: clamp(18px, 2.5vw, 26px); }

/* The text hero now follows the banner, so it needs less air above it. */
.slideshow--hero + .hero { padding-block: clamp(36px, 4.5vw, 64px) var(--section-y); }

/* Phone slides are art-directed: each banner is cropped to the region that
   carries its wording, which raises the ratio from 2.08:1 to 3:2 and so scales
   the lettering up at a fixed viewport width. "Inspiring Leaders" is the one
   exception — its wordmark spans the full banner and cannot be cut, so that
   file is letterboxed to the same ratio instead. */
@media (max-width: 700px) {
  .slide img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   Floating Join / Share dock
   Square-cornered and navy, because nothing else on this site is rounded —
   a pill-shaped FAB would read as borrowed from another design.
   ========================================================================== */
.dock {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--font-display);
}

.dock__join {
  /* A vertical tab. writing-mode turns the text on its side; the 180deg flip
     makes it read bottom-to-top, which is the convention for a tab on the
     right edge. Padding stays physical — top/bottom sets the tab's length. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 6px 24px rgba(12, 36, 72, .22);
  /* No transform on hover: it would have to compose with the rotate, and a
     lift reads as a wobble on a tab anchored to the edge. */
  transition: background-color .18s ease;
}
.dock__join:hover { background: var(--navy-deep); color: #fff; }
.dock__join:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Hidden until the visitor scrolls; see join-share.js. visibility keeps it out
   of the tab order, and the tab keeps its space so Share doesn't jump. */
.dock__join { transition: background-color .18s ease, opacity .35s ease, visibility .35s; }
.dock--waiting .dock__join { opacity: 0; visibility: hidden; }

.dock__share {
  display: inline-grid;
  place-content: center;
  width: 52px;
  height: 52px;
  background: var(--surface);
  color: var(--navy);
  border: 1px solid var(--rule);
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(12, 36, 72, .14);
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.dock__share:hover { border-color: var(--navy); transform: translateY(-1px); }
.dock__share:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.dock__share svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }

@media (prefers-reduced-motion: reduce) {
  .dock__join, .dock__share { transition: none; }
  .dock__join:hover, .dock__share:hover { transform: none; }
}

/* ---------- the share sheet ---------- */
.sheet {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  /* clears the vertical tab plus the square share button beneath it */
  bottom: calc(clamp(16px, 3vw, 28px) + 210px + env(safe-area-inset-bottom, 0px));
  z-index: 61;
  width: min(340px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: 0 16px 48px rgba(12, 36, 72, .18);
  padding: 20px;
}
.sheet[hidden] { display: none; }
.sheet__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.sheet__tabs { display: flex; gap: 0; margin: 0 0 12px; border: 1px solid var(--rule); }
.sheet__tab {
  flex: 1 1 0;
  appearance: none;
  padding: 9px 8px;
  background: none;
  border: 0;
  color: var(--body);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.sheet__tab + .sheet__tab { border-left: 1px solid var(--rule); }
.sheet__tab[aria-selected="true"] { background: var(--navy); color: #fff; }
.sheet__tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.sheet__targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sheet__target {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--ground);
  border: 1px solid transparent;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease;
}
.sheet__target:hover { border-color: var(--rule); color: var(--navy); }
.sheet__target:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.sheet__target svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; }

.sheet__link {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--ground);
  border: 1px solid var(--rule);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--body);
  word-break: break-all;
  line-height: 1.5;
}
.sheet__note { margin: 14px 0 0; font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--body); }
.sheet__note strong { color: var(--navy); font-weight: 500; }
.sheet__cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; margin-top: 12px;
  background: var(--navy); color: #fff; font-size: 14px; font-weight: 600;
}
.sheet__cta:hover { background: var(--navy-deep); color: #fff; }

.sheet__toast {
  margin-top: 12px; font-family: var(--font-body); font-size: 14px; color: var(--red);
}
.sheet__toast[hidden] { display: none; }

@media (max-width: 480px) {
  /* Stacked, both controls stay right-aligned rather than spanning the screen —
     a full-width pair two rows tall would cover most of a phone's content. */
  .sheet { left: 16px; right: 16px; width: auto; }
}

/* An inline <button> inside prose — it needs the browser's default button
   chrome stripped or it renders as a grey box mid-sentence. */
.sheet__plain {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.sheet__plain:hover { color: var(--red-dark); }
.sheet__plain:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ==========================================================================
   Brand reveal — the first screen of the homepage.
   Three brand panels curtain up, their logos come into focus, then each brand
   is spotlighted in turn until the visitor hovers or taps one. Each panel
   carries its own brand colours; they are scoped here and not used elsewhere.
   ========================================================================== */

.brand-reveal {
  --br-ease: cubic-bezier(.16, 1, .3, 1);
  --booba-bg: #FFF6EC;
  --booba-orange: #F7931E;
  --booba-teal: #13A89E;
  --booba-pink: #C4166B;
  --booba-olive: #808A3A;
  --kf-bg: #991A1D;       /* sampled from the logo banner, so its edges disappear */
  --kf-deep: #7E1417;
  --kf-yellow: #F6C343;
  --vb-bg: #F4EFE7;
  --vb-ink: #111111;

  position: relative;
  /* The header isn't sticky, so the reveal fills what is left of the first screen. */
  min-height: max(560px, calc(100svh - 89px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 3vh, 32px);
  padding: clamp(24px, 4vh, 44px) clamp(16px, 4vw, 56px) clamp(16px, 3vh, 28px);
  overflow: hidden;
  color: #0f172a;
  background:
    radial-gradient(850px 500px at 15% 15%, rgba(247, 147, 30, 0.12) 0%, transparent 60%),
    radial-gradient(850px 500px at 85% 35%, rgba(246, 195, 67, 0.12) 0%, transparent 60%),
    radial-gradient(950px 600px at 50% 85%, rgba(16, 185, 129, 0.12) 0%, transparent 65%),
    linear-gradient(180deg, #fbfaf6 0%, #f1f5f9 100%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

.brand-reveal__head { text-align: center; max-width: 1000px; margin: 0 auto; }
.brand-reveal__eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: #64748b; margin: 0 0 8px; opacity: 0;
  animation: br-fade .8s var(--br-ease) .2s forwards;
}
.brand-reveal__title {
  color: #0f172a; font-weight: 800; letter-spacing: -.02em; line-height: 1.02;
  font-size: clamp(34px, 6vw, 76px);
}
.brand-reveal__word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.brand-reveal__word > span { display: inline-block; transform: translateY(110%); animation: br-rise .9s var(--br-ease) forwards; }
.brand-reveal__word:nth-of-type(1) > span { animation-delay: .35s; }
.brand-reveal__word:nth-of-type(2) > span { animation-delay: .45s; }
.brand-reveal__word:nth-of-type(3) > span,
.brand-reveal__word:nth-of-type(4) > span {
  animation-delay: .75s;
  background: linear-gradient(135deg, #f7931e 0%, #e11d48 50%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-reveal__panels { display: flex; gap: clamp(12px, 1.4vw, 20px); min-height: 0; height: 100%; }

.brand-reveal__panel {
  --tx: 0; --ty: 0;
  position: relative; flex: 1 1 0; min-width: 0;
  border-radius: 24px; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  clip-path: inset(100% 0 0 0 round 24px);
  animation: br-curtain 1.1s var(--br-ease) forwards;
  transition: flex-grow .8s var(--br-ease), box-shadow .5s, transform .3s ease;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.brand-reveal__panel:nth-child(1) { animation-delay: 1s; }
.brand-reveal__panel:nth-child(2) { animation-delay: 1.15s; }
.brand-reveal__panel:nth-child(3) { animation-delay: 1.3s; }
.brand-reveal__panel.is-active { flex-grow: 2.3; box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.16), 0 0 0 2px rgba(255, 255, 255, 0.95) inset; }
.brand-reveal__panel:focus-visible { outline: 3px solid #059669; outline-offset: -3px; }

.brand-reveal__panel picture { display: contents; }

.brand-reveal__logo {
  position: relative; z-index: 2;
  width: min(82%, 520px); height: auto;
  opacity: 0; filter: blur(14px); transform: scale(.86);
  animation: br-sharpen 1.2s var(--br-ease) forwards;
  translate: calc(var(--tx) * 14px) calc(var(--ty) * 10px);
  transition: translate .4s var(--br-ease);
}
.brand-reveal__panel--kungfu .brand-reveal__logo { width: min(94%, 560px); }
.brand-reveal__panel:nth-child(1) .brand-reveal__logo { animation-delay: 1.7s; }
.brand-reveal__panel:nth-child(2) .brand-reveal__logo { animation-delay: 1.9s; }
.brand-reveal__panel:nth-child(3) .brand-reveal__logo { animation-delay: 2.1s; }

.brand-reveal__info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 22px clamp(18px, 2.4vw, 32px);
  display: flex; align-items: end; justify-content: space-between; gap: 16px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s, transform .6s var(--br-ease);
}
.brand-reveal__panel.is-active .brand-reveal__info { opacity: 1; transform: none; transition-delay: .25s; }
.brand-reveal__tag { font-size: clamp(15px, 1.3vw, 19px); font-style: italic; font-weight: 300; line-height: 1.35; max-width: 34ch; }
.brand-reveal__cta {
  flex: none; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  padding: 11px 18px; border-radius: 999px; white-space: nowrap;
}
.brand-reveal__num {
  position: absolute; top: 18px; left: 22px; z-index: 3;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .15em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  color: #334155;
}
.brand-reveal__panel--kungfu .brand-reveal__num {
  background: rgba(69, 10, 10, 0.6);
  color: #fef08a;
  border: 1px solid rgba(246, 195, 67, 0.3);
}
.brand-reveal__deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Booba — translucent cream glass with vibrant orange & teal */
.brand-reveal__panel--booba,
.brand-reveal__panel--booba:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 246, 236, 0.92));
  border: 1.5px solid rgba(247, 147, 30, 0.35);
  color: #3A2A1A;
}
.brand-reveal__panel--booba .brand-reveal__cta {
  background: linear-gradient(135deg, #f7931e, #ea580c);
  color: #fff;
  box-shadow: 0 4px 15px rgba(247, 147, 30, 0.35);
}
.brand-reveal__shard {
  position: absolute; width: var(--s); aspect-ratio: 1; background: var(--c);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  left: var(--x); top: var(--y); opacity: 0;
  transform: translate(var(--fx), var(--fy)) rotate(calc(var(--r) + 220deg)) scale(.3);
  animation: br-shard-in 1.4s var(--br-ease) forwards, br-drift 7s ease-in-out infinite alternate;
  animation-delay: var(--d), calc(var(--d) + 1.4s);
}

/* Kung Fu — rich warm ruby & amber with golden accents */
.brand-reveal__panel--kungfu,
.brand-reveal__panel--kungfu:hover {
  background: linear-gradient(145deg, #991a1d, #751417);
  border: 1.5px solid rgba(246, 195, 67, 0.4);
  color: #FFF1D6;
  box-shadow: 0 14px 35px -10px rgba(153, 26, 29, 0.3);
}
.brand-reveal__panel--kungfu .brand-reveal__cta {
  background: linear-gradient(135deg, #f6c343, #d97706);
  color: #450a0a;
  box-shadow: 0 4px 15px rgba(246, 195, 67, 0.35);
}
.brand-reveal__char {
  position: absolute; right: -4%; top: 50%; translate: 0 -50%;
  font-size: clamp(220px, 34vw, 520px); line-height: 1; font-weight: 700; color: var(--kf-deep);
  writing-mode: vertical-rl; opacity: .55; user-select: none;
}
.brand-reveal__steam { position: absolute; left: 50%; top: 4%; width: 160px; height: 42%; translate: -50% 0; }
.brand-reveal__steam path {
  fill: none; stroke: var(--kf-yellow); stroke-width: 3; stroke-linecap: round; opacity: 0;
  stroke-dasharray: 60 200; animation: br-steam 3.6s ease-in-out infinite;
}
.brand-reveal__steam path:nth-child(2) { animation-delay: 1.2s; }
.brand-reveal__steam path:nth-child(3) { animation-delay: 2.4s; }

/* Vita Bella — luminous pearl glass with emerald botanical accents */
.brand-reveal__panel--vitabella,
.brand-reveal__panel--vitabella:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 244, 0.9));
  border: 1.5px solid rgba(16, 185, 129, 0.35);
  color: #064e3b;
  box-shadow: 0 12px 32px -8px rgba(16, 185, 129, 0.15);
}
.brand-reveal__panel--vitabella .brand-reveal__cta {
  background: linear-gradient(135deg, #059669, #047857);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.brand-reveal__rings { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; animation: br-spin 60s linear infinite; }
.brand-reveal__rings circle { fill: none; stroke: #059669; stroke-opacity: .12; }
.brand-reveal__bubble {
  position: absolute; bottom: -30px; left: var(--x); width: var(--s); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(5, 150, 105, 0.3);
  animation: br-bubble var(--t) linear infinite; animation-delay: var(--d);
}

.brand-reveal__hint {
  justify-self: center; font-family: var(--font-display); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #64748b;
  display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0;
  animation: br-fade 1s 2.8s forwards;
}
.brand-reveal__hint i { width: 1px; height: 26px; background: linear-gradient(#64748b, transparent); animation: br-hint 1.8s ease-in-out infinite; }

@keyframes br-fade { to { opacity: 1; } }
@keyframes br-rise { to { transform: none; } }
@keyframes br-curtain { to { clip-path: inset(0 0 0 0 round 22px); } }
@keyframes br-sharpen { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes br-shard-in { to { opacity: var(--o, .9); transform: rotate(var(--r)) scale(1); } }
@keyframes br-drift { to { translate: 0 -10px; rotate: 6deg; } }
@keyframes br-steam {
  0% { stroke-dashoffset: 0; opacity: 0; transform: translateY(30px); }
  30% { opacity: .55; }
  100% { stroke-dashoffset: -220; opacity: 0; transform: translateY(-20px); }
}
@keyframes br-spin { to { rotate: 360deg; } }
@keyframes br-bubble {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  50% { transform: translate(10px, -45vh); }
  100% { transform: translate(-6px, -90vh); opacity: 0; }
}
@keyframes br-hint { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); } }

/* Header drops to 64px at this width */
@media (max-width: 900px) {
  .brand-reveal { min-height: max(560px, calc(100svh - 65px)); }
}

/* Phones: panels stack with comfortable breathing room & cards */
@media (max-width: 760px) {
  .brand-reveal { padding-inline: 18px; padding-bottom: 24px; min-height: auto; }
  .brand-reveal__title { font-size: clamp(24px, 7.5vw, 36px); }
  .brand-reveal__panels { flex-direction: column; gap: 14px; }
  .brand-reveal__panel { min-height: 145px; border-radius: 20px; clip-path: inset(0 0 0 0 round 20px); }
  .brand-reveal__panel.is-active { flex-grow: 2.4; min-height: 200px; }
  .brand-reveal__logo { width: min(68%, 320px); }
  .brand-reveal__info { padding: 16px 20px; background: linear-gradient(to top, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.6) 65%, transparent 100%); }
  .brand-reveal__panel--kungfu .brand-reveal__info { background: linear-gradient(to top, rgba(117,20,23,0.95) 0%, rgba(117,20,23,0.6) 65%, transparent 100%); }
  .brand-reveal__tag { font-size: 13px; font-weight: 500; }
  .brand-reveal__cta { padding: 9px 16px; font-size: 12px; font-weight: 700; border-radius: 999px; }
  .brand-reveal__char { font-size: 180px; writing-mode: horizontal-tb; right: -8%; }
  .brand-reveal__steam { height: 70%; top: -8%; width: 120px; }
}

/* The global rule shortens durations but keeps delays and infinite loops;
   here everything should simply appear in its final state. */
@media (prefers-reduced-motion: reduce) {
  .brand-reveal *, .brand-reveal *::before, .brand-reveal *::after {
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
  .brand-reveal__bubble, .brand-reveal__steam { display: none; }
}

/* ==========================================================================
   Brand detail blocks on /brands/ — menu, photo strip and a customer review,
   placed under a brand's split intro inside the same band.
   ========================================================================== */

.brand-menu,
.brand-gallery,
.brand-review { margin-top: clamp(48px, 6vw, 80px); }

.brand-menu__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }

.brand-menu__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.brand-menu__group { border-top: 3px solid var(--accent, var(--red)); padding-top: 14px; }
.brand-menu__group h4 {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px;
}
.brand-menu__group h4 span { display: block; margin-top: 3px; font-weight: 400; letter-spacing: .06em; text-transform: none; color: var(--muted); font-size: 12px; }
.brand-menu__group ul { list-style: none; margin: 0; padding: 0; }
.brand-menu__group li { padding: 7px 0; border-bottom: 1px solid var(--rule-soft); font-size: 15px; line-height: 1.4; }
.brand-menu__group li:last-child { border-bottom: 0; }

.brand-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.brand-gallery .figure { aspect-ratio: 4 / 5; }

.brand-review { margin-inline: auto; max-width: 760px; text-align: center; }
.brand-review blockquote {
  margin: 0; font-size: clamp(19px, 2vw, 25px); font-style: italic; font-weight: 300; line-height: 1.55; color: var(--navy);
}
.brand-review figcaption {
  margin-top: 18px; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--navy);
}
.brand-review figcaption span { display: block; margin-top: 5px; font-size: 13px; font-weight: 400; letter-spacing: .06em; text-transform: none; color: var(--muted); }

.brand-menu__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: clamp(32px, 4vw, 48px); }
.brand-gallery--square .figure { aspect-ratio: 1; }

@media (max-width: 1000px) { .brand-menu__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .brand-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kung-Fu Noodles has no store photography yet; its mascot sits on the brand red instead. */
.brand-mascot {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 55%, #C8342A 0%, #991A1D 62%);
}
.brand-mascot img { width: auto; height: 86%; object-fit: contain; }

.brand-points,
.brand-promise { margin-top: clamp(48px, 6vw, 80px); }
.brand-promise { gap: 22px; }

/* ==========================================================================
   Interactive Scroll Animations & Micro-Interactions
   ========================================================================== */
.reveal-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(0.16, 1, 0.3, 1), transform .65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-item.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay helpers for grids */
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Figma-Style Interactive Moving Products Stream on Scroll
   ========================================================================== */
.product-stream-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 7vw, 96px);
  background: linear-gradient(180deg, var(--ground) 0%, #F5F3EF 50%, var(--ground) 100%);
  border-block: 1px solid var(--rule);
}

.product-stream-section::before,
.product-stream-section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 10vw, 160px);
  z-index: 5;
  pointer-events: none;
}
.product-stream-section::before {
  left: 0;
  background: linear-gradient(to right, var(--ground) 15%, transparent 100%);
}
.product-stream-section::after {
  right: 0;
  background: linear-gradient(to left, var(--ground) 15%, transparent 100%);
}

.product-stream-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-block: 14px;
}

.product-track {
  display: flex;
  gap: clamp(20px, 3vw, 32px);
  width: max-content;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.product-track + .product-track {
  margin-top: clamp(20px, 3vw, 28px);
}

.product-stream-card {
  flex: 0 0 clamp(260px, 28vw, 340px);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid rgba(12, 36, 72, 0.08);
  box-shadow: 0 8px 24px -4px rgba(12, 36, 72, 0.06);
  text-decoration: none;
  color: inherit;
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .25s ease, border-color .25s ease;
}

.product-stream-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 16px 36px -8px var(--red-glow);
  border-color: rgba(180, 12, 12, 0.25);
}

.product-stream-card__thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--image-bg);
  box-shadow: 0 4px 12px rgba(12, 36, 72, 0.08);
}
.product-stream-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.product-stream-card:hover .product-stream-card__thumb img {
  transform: scale(1.08);
}

.product-stream-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.product-stream-card__tag {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(12, 36, 72, 0.06);
  color: var(--navy);
}
.product-stream-card__tag--red {
  background: rgba(180, 12, 12, 0.1);
  color: var(--red);
}
.product-stream-card__tag--teal {
  background: rgba(20, 110, 120, 0.1);
  color: #12636d;
}

.product-stream-card__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-stream-card__desc {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Invitation bar — "You were invited by your BRC partner: [Claudette A. ✓]".
   Built by join-share.js for visitors who arrived by a join link; the same
   slim trust bar the LinkUp store shows. Sits above the sticky header, so it
   scrolls away and the header stays put.
   ========================================================================== */
.invite {
  background: rgba(248, 250, 252, .95);
  border-bottom: 1px solid var(--glass-border);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 12px;
}
.invite__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  max-width: var(--container);
  margin-inline: auto;
  padding: 9px 16px;
  text-align: center;
}
.invite__lead { color: var(--body); font-weight: 500; }
.invite__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(37, 99, 235, .3);
  box-shadow: 0 1px 2px rgba(12, 36, 72, .06);
  color: var(--navy);
  font-weight: 700;
}
.invite__icon  { width: 14px; height: 14px; fill: none; stroke: #2563EB; stroke-width: 2; }
.invite__tick  { width: 15px; height: 15px; fill: #2563EB; stroke: none; }
.invite__tick path + path { fill: none; stroke: #fff; stroke-width: 2; }
.invite__chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(219, 234, 254, .7);
  color: #1D4ED8;
  font-size: 11px;
  font-weight: 600;
}
.invite__welcome { font-weight: 600; }
/* Phones: keep it to one slim line — the name pill carries the message. */
@media (max-width: 480px) {
  .invite__chip { display: none; }
}