/* ==========================================================================
   Waggl — global stylesheet
   Mirrors the brand tokens in WAGGL_BRAND_STYLE_GUIDE.md.
   Yellow + black binary, eyebrow rhythm, 1.5px black borders on yellow,
   no shadows on yellow, weight-driven hierarchy.
   ========================================================================== */

:root {
  /* Brand */
  --waggl-yellow:        #FFD700;
  --waggl-yellow-soft:   #FFE469;
  --waggl-black:         #000000;
  --waggl-charcoal:      #444444;
  --waggl-mid-gray:      #777777;
  --waggl-fill-soft:     rgba(0, 0, 0, 0.05);
  --waggl-fill-inset:    rgba(0, 0, 0, 0.06);
  --waggl-fill-stronger: rgba(0, 0, 0, 0.10);

  /* Semantic */
  --waggl-success:       #077007;
  --waggl-success-soft:  rgba(7, 119, 7, 0.18);
  --waggl-caution:       #A86000;
  --waggl-caution-soft:  rgba(168, 96, 0, 0.18);
  --waggl-warning:       #A00000;
  --waggl-warning-soft:  rgba(170, 0, 0, 0.18);

  /* Priority */
  --waggl-priority-urgent: #A00000;
  --waggl-priority-high:   #C66000;
  --waggl-priority-low:    #444444;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* Borders */
  --border-brand:  1.5px solid var(--waggl-black);
  --border-light:  1px solid rgba(0, 0, 0, 0.4);
  --border-hair:   1px solid rgba(0, 0, 0, 0.15);

  /* Spacing scale (multiples of 4) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 48px;
  --s-12: 64px;
  --s-16: 96px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --content-max: 1200px;
  --read-max:    720px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background: var(--waggl-yellow);
  color: var(--waggl-black);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

a.text-link {
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}

a.text-link:hover {
  border-bottom-color: transparent;
}

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

p { margin: 0 0 1em; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

li { margin-bottom: 0.25em; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.display {
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 var(--s-5);
}

h1, .h1 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 var(--s-4);
}

h2, .h2 {
  font-size: clamp(22px, 2.6vw, 26px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 var(--s-3);
}

h3, .h3 {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 var(--s-2);
}

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
  color: var(--waggl-black);
}

.eyebrow--muted { color: var(--waggl-charcoal); }

.lede {
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  max-width: 56ch;
  color: var(--waggl-black);
}

.caption {
  font-size: 11px;
  font-weight: 500;
  color: var(--waggl-mid-gray);
}

.strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: var(--s-12) 0;
  background: var(--waggl-yellow);
}

.section--tight   { padding: var(--s-10) 0; }
.section--roomy   { padding: var(--s-16) 0; }

.section--black {
  background: var(--waggl-black);
  color: var(--waggl-yellow);
}

.section--black .eyebrow { color: var(--waggl-yellow-soft); }
.section--black .lede    { color: var(--waggl-yellow-soft); }

.section--white {
  background: #FFFFFF;
  color: var(--waggl-black);
}

.section--white .eyebrow { color: var(--waggl-charcoal); }

.grid {
  display: grid;
  gap: var(--s-5);
}

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

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--waggl-yellow);
  border-bottom: 1.5px solid var(--waggl-black);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.site-header__logo svg { display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.site-nav a {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.site-nav a:hover { border-bottom: 1.5px solid var(--waggl-black); padding-bottom: 1px; }

.site-nav a.active {
  border-bottom: 1.5px solid var(--waggl-black);
  padding-bottom: 1px;
}

.site-nav__cta {
  margin-left: var(--s-3);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid var(--waggl-black);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 820px) {
  .site-nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--waggl-yellow);
    border-bottom: 1.5px solid var(--waggl-black);
    padding: var(--s-4) 24px var(--s-5);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.15); }
  .site-nav a:last-child { border-bottom: none; }
  .site-nav__cta { margin: var(--s-3) 0 0; }
  .nav-toggle { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--waggl-black);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: transform 180ms cubic-bezier(0.2, 0, 0.2, 1),
              background-color 180ms cubic-bezier(0.2, 0, 0.2, 1),
              color 180ms cubic-bezier(0.2, 0, 0.2, 1);
}

.btn:hover { transform: scale(1.02); }

.btn--primary {
  background: var(--waggl-black);
  color: var(--waggl-yellow);
}

.btn--primary:hover {
  background: #1a1a1a;
}

.btn--secondary {
  background: transparent;
  color: var(--waggl-black);
}

.btn--secondary:hover {
  background: rgba(0,0,0,0.06);
}

.section--black .btn--secondary {
  color: var(--waggl-yellow);
  border-color: var(--waggl-yellow);
}

.section--black .btn--primary {
  background: var(--waggl-yellow);
  color: var(--waggl-black);
  border-color: var(--waggl-yellow);
}

.btn--block { width: 100%; }

/* Pill chips (date/status/category) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--waggl-black);
  background: transparent;
  color: var(--waggl-black);
  line-height: 1;
}

.pill--active {
  background: var(--waggl-black);
  color: var(--waggl-yellow);
}

.pill--success { border-color: var(--waggl-success); color: var(--waggl-success); background: var(--waggl-success-soft); }
.pill--caution { border-color: var(--waggl-caution); color: var(--waggl-caution); background: var(--waggl-caution-soft); }
.pill--warning { border-color: var(--waggl-warning); color: var(--waggl-warning); background: var(--waggl-warning-soft); }

/* --------------------------------------------------------------------------
   Cards / panels
   -------------------------------------------------------------------------- */

.card {
  background: var(--waggl-fill-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  border: var(--border-hair);
}

.card--white {
  background: #FFFFFF;
  border: var(--border-light);
}

.card--bordered {
  background: var(--waggl-yellow);
  border: 1.5px solid var(--waggl-black);
}

.card--dark {
  background: var(--waggl-black);
  color: var(--waggl-yellow);
  border: none;
}

.card--dark .eyebrow { color: var(--waggl-yellow-soft); }

.card__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-3);
}

.card__icon svg { width: 28px; height: 28px; stroke: currentColor; }

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat__value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}

.stat__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--waggl-charcoal);
}

.section--black .stat__label { color: var(--waggl-yellow-soft); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: var(--s-12) 0 var(--s-12);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-10);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero__copy { max-width: 620px; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.hero__meta {
  display: flex;
  gap: var(--s-5);
  margin-top: var(--s-6);
  flex-wrap: wrap;
}

.hero__hex {
  position: absolute;
  right: -120px;
  top: -80px;
  width: 700px;
  height: 700px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__hex   { width: 500px; height: 500px; right: -200px; }
}

/* --------------------------------------------------------------------------
   Audience split
   -------------------------------------------------------------------------- */

.audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}

.audience__card {
  padding: var(--s-8);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--waggl-black);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 360px;
}

.audience__card--dark {
  background: var(--waggl-black);
  color: var(--waggl-yellow);
}

.audience__card--dark .eyebrow { color: var(--waggl-yellow-soft); }
.audience__card--dark .lede    { color: var(--waggl-yellow-soft); }

.audience__card--light {
  background: var(--waggl-yellow);
}

.audience__card .btn { align-self: flex-start; margin-top: auto; }

@media (max-width: 800px) {
  .audience { grid-template-columns: 1fr; }
  .audience__card { min-height: 0; }
}

/* --------------------------------------------------------------------------
   App mockup (SVG-driven phone frame)
   -------------------------------------------------------------------------- */

.phone {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 9 / 19.5;
  border-radius: 38px;
  background: var(--waggl-black);
  padding: 12px;
  border: 1.5px solid var(--waggl-black);
  position: relative;
}

.phone__screen {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: var(--waggl-yellow);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.phone__notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: var(--waggl-black);
  border-radius: 999px;
  z-index: 5;
}

.phone__app {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 36px 16px 18px;
  gap: 14px;
  overflow: hidden;
}

.phone__app .eyebrow { font-size: 10px; margin-bottom: 4px; }

.mock-tile {
  background: rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.15);
}

.mock-tile__title { font-size: 13px; font-weight: 800; }
.mock-tile__sub   { font-size: 11px; font-weight: 500; color: var(--waggl-charcoal); margin-top: 2px; }

.mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
}

.mock-row .pill { font-size: 9px; padding: 4px 8px; border-width: 1px; }

/* --------------------------------------------------------------------------
   Feature list
   -------------------------------------------------------------------------- */

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.feature__icon {
  width: 48px;
  height: 48px;
  background: var(--waggl-black);
  color: var(--waggl-yellow);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-3);
}

.feature__icon svg { width: 26px; height: 26px; stroke: currentColor; }

.section--black .feature__icon {
  background: var(--waggl-yellow);
  color: var(--waggl-black);
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--s-5);
}

.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-4);
  align-items: start;
}

.step__num {
  counter-increment: step;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  border: 1.5px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
}

.step__num::before { content: counter(step, decimal-leading-zero); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq details {
  border-top: 1px solid rgba(0,0,0,0.2);
  padding: var(--s-4) 0;
}

.faq details:last-child { border-bottom: 1px solid rgba(0,0,0,0.2); }

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 17px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 800;
  margin-left: var(--s-3);
}

.faq details[open] summary::after { content: "–"; }

.faq__body {
  padding-top: var(--s-3);
  font-size: 15px;
  line-height: 1.55;
  color: var(--waggl-charcoal);
  max-width: 65ch;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--s-3);
  max-width: 480px;
}

.form--inline {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.form__field { display: flex; flex-direction: column; gap: 6px; }

.form__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--waggl-charcoal);
}

.form__input,
.form__select,
.form__textarea {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--waggl-black);
  background: #FFFFFF;
  color: var(--waggl-black);
  width: 100%;
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  background: var(--waggl-yellow-soft);
}

.form__row { display: flex; gap: var(--s-2); }
.form__row > * { flex: 1; }

.form__note {
  font-size: 12px;
  color: var(--waggl-charcoal);
}

.form__success {
  display: none;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-md);
  background: var(--waggl-success-soft);
  border: 1.5px solid var(--waggl-success);
  color: var(--waggl-success);
  font-weight: 700;
}

.form.is-submitted .form__success { display: block; }
.form.is-submitted .form__fields  { display: none; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--waggl-black);
  color: var(--waggl-yellow);
  padding: var(--s-10) 0 var(--s-6);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-8);
}

.site-footer__col h4 {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 0 var(--s-3);
  color: var(--waggl-yellow-soft);
}

.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__col li { margin-bottom: var(--s-2); }

.site-footer__col a {
  font-size: 14px;
  font-weight: 600;
  color: var(--waggl-yellow);
}

.site-footer__col a:hover {
  border-bottom: 1px solid var(--waggl-yellow);
  padding-bottom: 1px;
}

.site-footer__about {
  font-size: 14px;
  color: var(--waggl-yellow-soft);
  font-weight: 500;
  max-width: 38ch;
  margin: var(--s-3) 0 0;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 215, 0, 0.25);
  font-size: 12px;
  color: var(--waggl-yellow-soft);
}

@media (max-width: 720px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__about { max-width: none; }
}

/* --------------------------------------------------------------------------
   Misc helpers
   -------------------------------------------------------------------------- */

.cta-row {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  align-items: center;
}

.hr-rule {
  border: none;
  border-top: 1.5px solid var(--waggl-black);
  margin: var(--s-8) 0;
}

.section--black .hr-rule { border-top-color: var(--waggl-yellow); }

.muted { color: var(--waggl-charcoal); }
.section--black .muted { color: var(--waggl-yellow-soft); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--waggl-fill-soft);
  border: 1px solid rgba(0,0,0,0.2);
}

.section--black .tag {
  background: rgba(255, 215, 0, 0.12);
  border-color: rgba(255, 215, 0, 0.4);
  color: var(--waggl-yellow);
}

.banner {
  background: var(--waggl-black);
  color: var(--waggl-yellow);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 10px 24px;
}

.banner a {
  color: var(--waggl-yellow);
  border-bottom: 1.5px solid currentColor;
  margin-left: 6px;
}

/* Product card (shop placeholder) */
.product {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--waggl-black);
  background: var(--waggl-yellow);
}

.product__image {
  aspect-ratio: 1 / 1;
  background: var(--waggl-yellow-soft);
  border-bottom: 1.5px solid var(--waggl-black);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product__body { padding: var(--s-4); }

.product__title { font-size: 16px; font-weight: 800; margin: 0 0 4px; }
.product__sub   { font-size: 13px; font-weight: 500; color: var(--waggl-charcoal); margin: 0 0 var(--s-3); }
.product__row   { display: flex; justify-content: space-between; align-items: center; }
.product__price { font-size: 17px; font-weight: 800; }

/* Tier (sponsor page) */
.tier {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--waggl-black);
  background: #FFFFFF;
  height: 100%;
}

.tier--featured {
  background: var(--waggl-black);
  color: var(--waggl-yellow);
}

.tier--featured .eyebrow { color: var(--waggl-yellow-soft); }

.tier__price {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.tier__price span {
  font-size: 13px;
  font-weight: 600;
  color: var(--waggl-charcoal);
  margin-left: 4px;
}

.tier--featured .tier__price span { color: var(--waggl-yellow-soft); }

.tier__list {
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0 var(--s-4);
  font-size: 14px;
  font-weight: 500;
}

.tier__list li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.tier--featured .tier__list li { border-bottom-color: rgba(255,215,0,0.2); }

.tier__list li::before {
  content: "✓";
  font-weight: 800;
  margin-right: 4px;
}

.tier .btn { margin-top: auto; }

/* Press / asset cards */
.asset {
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--waggl-yellow);
  background: rgba(255,215,0,0.06);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.section--black .asset h3 { color: var(--waggl-yellow); }

/* Reveal on load */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 350ms ease, transform 350ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   Immersive hero (homepage)
   Full-bleed photo/video background, black scrim, centered overlay text.
   Brand-aligned with the style guide rule: "40–60% black scrim over photography."
   -------------------------------------------------------------------------- */

.hero--immersive {
  position: relative;
  min-height: 680px;
  height: 92vh;
  max-height: 920px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: var(--waggl-black);
  color: var(--waggl-yellow);
  text-align: center;
}

.hero--immersive .hero__hex { display: none; } /* skip the decorative hex on immersive */

.hero__bg,
.hero__bg-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero__bg-illustration svg,
.hero__bg video,
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Black scrim per style guide — flat, not soft */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 1;
  pointer-events: none;
}

/* A small vignette toward the top and bottom keeps nav and CTA text legible
   without resorting to the brand-forbidden "soft gradient over photography." */
.hero__scrim::before,
.hero__scrim::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 140px;
  pointer-events: none;
}
.hero__scrim::before { top: 0;    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%); }
.hero__scrim::after  { bottom: 0; background: linear-gradient(0deg,   rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%); }

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 24px 60px;
  text-align: center;
}

.hero__content .eyebrow {
  color: var(--waggl-yellow-soft);
}

.hero__content .display {
  color: var(--waggl-yellow);
  text-align: center;
  margin: 0 auto var(--s-4);
  max-width: 16ch;
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1.02;
}

.hero__content .display__accent {
  color: var(--waggl-yellow-soft);
  display: block;
}

.hero__content .lede {
  color: rgba(255, 228, 105, 0.95);
  text-align: center;
  margin: 0 auto var(--s-6);
  max-width: 56ch;
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 19px);
}

.hero__cta {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.hero--immersive .btn--primary {
  background: var(--waggl-yellow);
  color: var(--waggl-black);
  border-color: var(--waggl-yellow);
}

.hero--immersive .btn--secondary {
  background: transparent;
  color: var(--waggl-yellow);
  border-color: var(--waggl-yellow);
}

.hero--immersive .btn--secondary:hover { background: rgba(255, 215, 0, 0.12); }

/* Scroll cue at the bottom — same mouse-icon shape as the reference */
.hero__scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 22px;
  height: 34px;
  border: 1.5px solid var(--waggl-yellow);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
  opacity: 0.7;
}

.hero__scroll-cue::after {
  content: "";
  width: 2px;
  height: 7px;
  background: var(--waggl-yellow);
  border-radius: 1px;
  animation: scroll-cue 1.8s ease-in-out infinite;
}

@keyframes scroll-cue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(8px); opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Transparent/scrolling header behavior — only on .is-home
   The header floats over the hero in yellow, then resolves into the standard
   yellow-bar after the user scrolls past the hero.
   -------------------------------------------------------------------------- */

body.is-home .site-header {
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color 220ms ease, border-color 220ms ease;
}

body.is-home .site-header__logo svg,
body.is-home .site-nav > a {
  color: var(--waggl-yellow);
  transition: color 220ms ease, border-color 220ms ease;
}

body.is-home .site-nav__cta {
  background: var(--waggl-yellow) !important;
  color: var(--waggl-black) !important;
  border-color: var(--waggl-yellow) !important;
}

body.is-home .nav-toggle {
  color: var(--waggl-yellow);
  border-color: var(--waggl-yellow);
  background: rgba(0, 0, 0, 0.25);
}

body.is-home .site-header.is-scrolled {
  background: var(--waggl-yellow);
  border-bottom: 1.5px solid var(--waggl-black);
}

body.is-home .site-header.is-scrolled .site-header__logo svg,
body.is-home .site-header.is-scrolled .site-nav > a {
  color: var(--waggl-black);
}

body.is-home .site-header.is-scrolled .site-nav__cta {
  background: var(--waggl-black) !important;
  color: var(--waggl-yellow) !important;
  border-color: var(--waggl-black) !important;
}

body.is-home .site-header.is-scrolled .nav-toggle {
  color: var(--waggl-black);
  border-color: var(--waggl-black);
  background: transparent;
}

@media (max-width: 820px) {
  body.is-home .site-nav.is-open {
    background: rgba(0, 0, 0, 0.92);
    border-bottom: 1.5px solid var(--waggl-yellow);
  }
  body.is-home .site-header.is-scrolled .site-nav.is-open {
    background: var(--waggl-yellow);
    border-bottom-color: var(--waggl-black);
  }
}

/* --------------------------------------------------------------------------
   Waggle dance stage (hero hero — the namesake)
   -------------------------------------------------------------------------- */

.dance {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  background: var(--waggl-black);
  color: var(--waggl-yellow);
  border: 1.5px solid var(--waggl-black);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dance svg { width: 100%; height: 100%; display: block; }

.dance__caption {
  position: absolute;
  left: 20px;
  bottom: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--waggl-yellow-soft);
}

/* Honeybee dot following the figure-8 path. The waggle is the wobble in the
   middle straight run. */
@keyframes wiggle {
  0%, 100% { transform: translateX(-1.5px); }
  50%      { transform: translateX(1.5px); }
}

/* --------------------------------------------------------------------------
   Photo strip / gallery placeholders
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--s-3);
}

@media (max-width: 900px) {
  .gallery { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; }
}

.photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--waggl-black);
  aspect-ratio: 4 / 5;
  background: var(--waggl-yellow-soft);
  display: flex;
  align-items: flex-end;
  color: var(--waggl-black);
}

.photo--tall   { aspect-ratio: 3 / 5; }
.photo--wide   { aspect-ratio: 5 / 4; }
.photo--square { aspect-ratio: 1 / 1; }

.photo img,
.photo video,
.photo svg.illus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo__overlay {
  position: relative;
  z-index: 1;
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
  width: 100%;
  color: var(--waggl-yellow);
}

.photo__overlay .eyebrow { color: var(--waggl-yellow-soft); margin: 0 0 4px; }

.photo__overlay h3 {
  font-size: 17px;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
}

.photo__placeholder-note {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--waggl-yellow);
  color: var(--waggl-black);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--waggl-black);
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Video block — drop in real footage at assets/waggle-dance.mp4
   -------------------------------------------------------------------------- */

.video-block {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1.5px solid var(--waggl-black);
  background: var(--waggl-black);
  aspect-ratio: 16 / 9;
}

.video-block video,
.video-block .video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-block .video-poster {
  background: radial-gradient(circle at 50% 40%, rgba(255,215,0,0.12) 0%, transparent 60%), var(--waggl-black);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-block__caption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  right: 24px;
  color: var(--waggl-yellow);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
}

.video-block__caption .eyebrow { color: var(--waggl-yellow-soft); margin: 0 0 6px; }
.video-block__caption h3 { font-size: 22px; font-weight: 800; margin: 0; line-height: 1.15; }

.play-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--waggl-yellow);
  color: var(--waggl-black);
  font-weight: 800;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--waggl-black);
}

.play-button::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--waggl-black);
}

/* --------------------------------------------------------------------------
   Pillar (3-up concise feature block, replaces verbose homepage features)
   -------------------------------------------------------------------------- */

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  border-top: 1.5px solid var(--waggl-black);
}

.pillar__num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--waggl-charcoal);
}

.pillar h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Audience cards (image-led, replaces text-heavy split)
   -------------------------------------------------------------------------- */

.audience-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}

.audience-v2__card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1.5px solid var(--waggl-black);
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--waggl-yellow);
  background: var(--waggl-black);
}

.audience-v2__card .photo__placeholder-note { z-index: 3; }

.audience-v2__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.audience-v2__media svg.illus,
.audience-v2__media img,
.audience-v2__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.audience-v2__body {
  position: relative;
  z-index: 2;
  padding: var(--s-8);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 80%);
}

.audience-v2__body h3 { font-size: 28px; font-weight: 800; margin: 0 0 var(--s-2); color: var(--waggl-yellow); }
.audience-v2__body p  { font-size: 15px; color: var(--waggl-yellow-soft); margin: 0 0 var(--s-4); max-width: 36ch; }

@media (max-width: 800px) {
  .audience-v2 { grid-template-columns: 1fr; }
  .audience-v2__card { min-height: 380px; }
}

/* ==========================================================================
   PAGE-SPECIFIC ADDITIONS (homepage redesign + immersive hero)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Photo strip / gallery (homepage)
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--s-3);
}
@media (max-width: 900px) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } }

.photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--waggl-black);
  aspect-ratio: 4 / 5;
  background: var(--waggl-yellow-soft);
  display: flex;
  align-items: flex-end;
  color: var(--waggl-black);
}
.photo--tall   { aspect-ratio: 3 / 5; }
.photo--wide   { aspect-ratio: 5 / 4; }
.photo--square { aspect-ratio: 1 / 1; }

.photo img,
.photo video,
.photo svg.illus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo__overlay {
  position: relative;
  z-index: 1;
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
  width: 100%;
  color: var(--waggl-yellow);
}
.photo__overlay .eyebrow { color: var(--waggl-yellow-soft); margin: 0 0 4px; }
.photo__overlay h3 { font-size: 17px; font-weight: 800; margin: 0; line-height: 1.2; }

.photo__placeholder-note {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--waggl-yellow);
  color: var(--waggl-black);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--waggl-black);
  z-index: 3;
}


/* --------------------------------------------------------------------------
   Pillars (3-up concise blocks on home)
   -------------------------------------------------------------------------- */

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  border-top: 1.5px solid var(--waggl-black);
}
.pillar__num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--waggl-charcoal);
}
.pillar h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Audience-v2 cards (image-led split on home)
   -------------------------------------------------------------------------- */

.audience-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.audience-v2__card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1.5px solid var(--waggl-black);
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--waggl-yellow);
  background: var(--waggl-black);
}
.audience-v2__card .photo__placeholder-note { z-index: 3; }
.audience-v2__media { position: absolute; inset: 0; z-index: 0; }
.audience-v2__media svg.illus,
.audience-v2__media img,
.audience-v2__media video { width: 100%; height: 100%; object-fit: cover; }
.audience-v2__body {
  position: relative;
  z-index: 2;
  padding: var(--s-8);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 80%);
}
.audience-v2__body h3 { font-size: 28px; font-weight: 800; margin: 0 0 var(--s-2); color: var(--waggl-yellow); }
.audience-v2__body p  { font-size: 15px; color: var(--waggl-yellow-soft); margin: 0 0 var(--s-4); max-width: 36ch; }
@media (max-width: 800px) {
  .audience-v2 { grid-template-columns: 1fr; }
  .audience-v2__card { min-height: 380px; }
}

/* --------------------------------------------------------------------------
   IMMERSIVE HERO (full-bleed photo/video with 38% black scrim)
   Daytime palette — keep the page reading bright, not nighttime.
   -------------------------------------------------------------------------- */

.hero--immersive {
  position: relative;
  min-height: 680px;
  height: 92vh;
  max-height: 920px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: var(--waggl-black);
  color: var(--waggl-yellow);
  text-align: center;
}

.hero--immersive .hero__hex { display: none; }

.hero__bg,
.hero__bg-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero__bg-illustration svg,
.hero__bg video,
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scrim: 38% black is enough for daylight photo legibility without going dusk */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 1;
  pointer-events: none;
}
.hero__scrim::before,
.hero__scrim::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 140px;
  pointer-events: none;
}
.hero__scrim::before { top: 0;    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%); }
.hero__scrim::after  { bottom: 0; background: linear-gradient(0deg,   rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%); }

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 24px 60px;
  text-align: center;
}
.hero__content .eyebrow { color: var(--waggl-yellow-soft); }
.hero__content .display {
  color: var(--waggl-yellow);
  text-align: center;
  margin: 0 auto var(--s-4);
  max-width: 16ch;
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1.02;
}
.hero__content .display__accent { color: var(--waggl-yellow-soft); display: block; }
.hero__content .lede {
  color: rgba(255, 228, 105, 0.95);
  text-align: center;
  margin: 0 auto var(--s-6);
  max-width: 56ch;
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 19px);
}

.hero__cta { display: flex; justify-content: center; gap: var(--s-3); flex-wrap: wrap; }

.hero--immersive .btn--primary {
  background: var(--waggl-yellow);
  color: var(--waggl-black);
  border-color: var(--waggl-yellow);
}
.hero--immersive .btn--secondary {
  background: transparent;
  color: var(--waggl-yellow);
  border-color: var(--waggl-yellow);
}
.hero--immersive .btn--secondary:hover { background: rgba(255, 215, 0, 0.12); }

.hero__scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 22px;
  height: 34px;
  border: 1.5px solid var(--waggl-yellow);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
  opacity: 0.75;
}
.hero__scroll-cue::after {
  content: "";
  width: 2px;
  height: 7px;
  background: var(--waggl-yellow);
  border-radius: 1px;
  animation: scroll-cue 1.8s ease-in-out infinite;
}
@keyframes scroll-cue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(8px); opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue::after { animation: none; }
}

/* --------------------------------------------------------------------------
   STICKY TOP GROUP (banner + header pinned together)
   -------------------------------------------------------------------------- */

.site-top {
  position: sticky;
  top: 0;
  z-index: 60;
}
.site-top > .site-header { position: relative; top: auto; }
.site-top > .banner      { position: relative; top: auto; z-index: 1; }

/* --------------------------------------------------------------------------
   IS-IMMERSIVE BODY CLASS — transparent header over photo hero,
   solid yellow once scrolled past 80px.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   HEX PATTERN — proper pointy-top tessellation with a 1/2-offset second layer.
   Tile = 50 × 86.6 (= one full hex width × 1.5 hex heights).
   Row 1 hex centers at x=25; row 2 at x=0 / x=50 → exact half-offset interlocking.
   Vertical row step = 43.3 (= 1.5 × side). Two layers stacked: the background
   layer is offset by half a tile in each axis to mimic looking through a frame
   to the comb on the other side.
   -------------------------------------------------------------------------- */

:root {
  /*
    Hex pattern — pointy-top tessellation. Tile is 100 × 86.6 and contains
    FIVE hexes drawn explicitly: two full hexes per row, with left/right
    half-hexes on row 2 that mirror each other across the tile so the
    offset row is visible WITHIN a single tile (not relying on
    edge-clipping + neighbor stitching).

    Row 1 centers: (25, 28.87) and (75, 28.87)
    Row 2 centers: (50, 72.17), plus half-hexes at (0, 72.17) and (100, 72.17)
    Offset between rows: 25 (half hex width) → proper interlock.
    Vertical row step: 43.3 (1.5 × side).
  */
  --hex-fg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='86.6' viewBox='0 0 100 86.6'><g fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' opacity='0.09'><polygon points='25,0 50,14.43 50,43.3 25,57.74 0,43.3 0,14.43'/><polygon points='75,0 100,14.43 100,43.3 75,57.74 50,43.3 50,14.43'/><polygon points='50,43.3 75,57.74 75,86.6 50,101.04 25,86.6 25,57.74'/><polygon points='0,43.3 25,57.74 25,86.6 0,101.04 -25,86.6 -25,57.74'/><polygon points='100,43.3 125,57.74 125,86.6 100,101.04 75,86.6 75,57.74'/></g></svg>");
}

.hex-bg {
  position: relative;
  isolation: isolate;
}
.hex-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  z-index: 0;
  /* Fade in over half the section so the pattern doesn't compete with text */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, rgba(0,0,0,0.5) 55%, black 80%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, rgba(0,0,0,0.5) 55%, black 80%);
}
/* Back layer (lighter, offset by EXACTLY half a hex in each axis) */
/* Front layer (darker, anchored to origin) */
.hex-bg::after {
  background-image: var(--hex-fg);
  background-position: 0 0;
}
.hex-bg > * { position: relative; z-index: 1; }

/* Hide the legacy decorative SVG on heroes (we use .hex-bg sections now) */
.hero__hex { display: none; }

/* --------------------------------------------------------------------------
   Wordmark lockup — hex+figure-8 mark sits to the left of the wordmark
   in the header and footer, per brand guide §7.1 (icon column, left-aligned).
   The figure-8 inside the hex references the waggle dance itself.
   -------------------------------------------------------------------------- */

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.site-header__mark {
  display: inline-block;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  color: var(--waggl-black);
}

.site-header__mark svg { width: 100%; height: 100%; display: block; }

/* On immersive pages the mark sits over the dark hero — flip its colors so
   the hex reads in yellow and the figure-8 reads in black. */

/* Footer mark: yellow on the black footer background. */
.site-footer__mark {
  display: inline-block;
  width: 36px;
  height: 36px;
  color: var(--waggl-yellow);
  margin-bottom: var(--s-3);
}
.site-footer__mark svg { width: 100%; height: 100%; display: block; }


/* --------------------------------------------------------------------------
   Logo mark (uses real Waggl PNG with transparent background).
   Default = dark glyph (for yellow/light surfaces). On immersive pages while
   the header is still transparent over the hero, swap to the yellow glyph.
   Footer always uses the yellow version (black bg).
   -------------------------------------------------------------------------- */

.site-header__mark,
.site-footer__mark {
  display: inline-block;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.site-header__mark {
  background-image: url("../assets/logo-mark.png");
}

.site-footer__mark {
  background-image: url("../assets/logo-mark-yellow.png");
  margin-bottom: var(--s-3);
}


/* ==========================================================================
   HEX MOTIF UTILITIES — applied where the brand guide allows.
   Per §6.2: hex shapes for icon containers, decorative accents, and "collection
   of things" patterns. NEVER on buttons or form inputs (the guide explicitly
   forbids it — tap targets need to be obvious rectangles).
   Pointy-top, matching the wordmark's hex orientation.
   ========================================================================== */

/* Base hex-shape clip — pointy-top, aspect 1 : 1.155 (= 1 : 2/√3) */
.hex-shape {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  aspect-ratio: 1 / 1.1547;
}

/* Hex frame — outlined hex used as an icon/number container.
   The trick: a yellow filled hex with a black border. CSS clip-path doesn't
   draw a stroke on its own, so we use a slightly smaller inner hex on top
   to simulate the border. */
.hex-frame {
  position: relative;
  width: 48px;
  aspect-ratio: 1 / 1.1547;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--waggl-black);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  color: var(--waggl-yellow);
  font-weight: 800;
}

.hex-frame--lg { width: 64px; }
.hex-frame--sm { width: 32px; }

.hex-frame svg {
  width: 56%;
  height: 56%;
  stroke: currentColor;
  fill: none;
}

/* Inverse: yellow fill with black icon (for use over black/dark surfaces) */
.hex-frame--inverse {
  background: var(--waggl-yellow);
  color: var(--waggl-black);
}

/* Outlined-only hex (no fill, just stroke effect via two stacked elements). */
.hex-outline {
  position: relative;
  width: 48px;
  aspect-ratio: 1 / 1.1547;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hex-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--waggl-black);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hex-outline::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  background: var(--waggl-yellow);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hex-outline > * { position: relative; z-index: 1; }

/* Tiny hex bullet, for use as a list marker or eyebrow dot */
.hex-dot {
  display: inline-block;
  width: 10px;
  aspect-ratio: 1 / 1.1547;
  background: var(--waggl-black);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  vertical-align: -1px;
  margin-right: 6px;
}
.hex-dot--yellow { background: var(--waggl-yellow); }

/* --------------------------------------------------------------------------
   Apply the motif to existing component classes
   -------------------------------------------------------------------------- */

/* Feature icons: were rounded squares. Now hex-shaped containers. */
.feature__icon {
  width: 52px;
  height: auto;
  aspect-ratio: 1 / 1.1547;
  background: var(--waggl-black);
  color: var(--waggl-yellow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-3);
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.feature__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; }
.section--black .feature__icon { background: var(--waggl-yellow); color: var(--waggl-black); }

/* Row variant: hex icon + eyebrow/title row, description spans full width below */
.feature--row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  align-items: start;
}
.feature--row > .feature__icon { grid-row: 1 / span 2; align-self: start; margin-top: 2px; }
.feature--row > p { grid-column: 1 / -1; margin-top: var(--s-2); }
@media (max-width: 540px) {
  .feature--row { grid-template-columns: 1fr; }
  .feature--row > .feature__icon { grid-row: auto; }
}

/* Step numbers (01, 02, 03 …): were pill circles. Now hex. */
.step__num {
  counter-increment: step;
  width: 56px;
  height: auto;
  aspect-ratio: 1 / 1.1547;
  border: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  background: var(--waggl-black);
  color: var(--waggl-yellow);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.section--black .step__num { background: var(--waggl-yellow); color: var(--waggl-black); }

/* Stat block bullet removed by request */
.stat__label::before { content: none; }

/* Tier list bullets: swap the ✓ for a hex dot */
.tier__list li::before {
  content: "";
  display: inline-block;
  width: 10px;
  aspect-ratio: 1 / 1.1547;
  background: var(--waggl-black);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  margin-right: 8px;
  vertical-align: 1px;
  flex-shrink: 0;
}
.tier--featured .tier__list li::before { background: var(--waggl-yellow); }

/* Card icons: a hex container */
.card__icon {
  width: 48px;
  height: auto;
  aspect-ratio: 1 / 1.1547;
  background: var(--waggl-black);
  color: var(--waggl-yellow);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-3);
}
.card__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; }

/* "Tag" chips that previously were pills — leave as pills; the brand guide
   says pills are the right shape for stateful chips. (Don't change.) */

/* Section divider: a thin row of small hex dots, used between sections of
   the same color where a hard horizontal rule would feel heavy. */
.hex-divider {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: var(--s-6) 0;
}
.hex-divider span {
  width: 10px;
  aspect-ratio: 1 / 1.1547;
  background: var(--waggl-black);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  opacity: 0.4;
}
.section--black .hex-divider span { background: var(--waggl-yellow); }

/* Avatar mask for keeper photos / profile pics — hex-shaped */
.hex-avatar {
  width: 64px;
  height: auto;
  aspect-ratio: 1 / 1.1547;
  overflow: hidden;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--waggl-fill-soft);
  display: inline-block;
}
.hex-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   WAGGL wordmark (Inter, per brand guide §3.1)
   "Use Inter at 800 (Extra Bold) with letter-spacing: -0.01em to mimic the
   wordmark's density." Web equivalent of the custom proprietary mark.
   -------------------------------------------------------------------------- */

.site-header__wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--waggl-black);
  line-height: 1;
  display: inline-block;
}

.site-footer__wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--waggl-yellow);
  line-height: 1;
  display: inline-block;
}

/* Smaller mark size to match the new tighter wordmark */
.site-header__mark { width: 30px !important; flex: 0 0 30px !important; }
.site-footer__mark { width: 30px !important; flex: 0 0 30px !important; }

/* --------------------------------------------------------------------------
   Always-solid header (fixes the "nav blank at top" issue).
   The transparent-over-hero treatment doesn't work on the bright daytime
   hero — yellow text on yellow sky is invisible. So the header now stays
   solid yellow with black text on every page, including immersive ones.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   FIX: video must layer above the SVG fallback inside the hero.
   Both .hero__bg and .hero__bg-illustration set z-index:0; without this
   override the SVG (which appears after the <video> in DOM order) renders
   on top and hides the playing video.
   -------------------------------------------------------------------------- */
.hero--immersive video.hero__bg { z-index: 1; }
.hero--immersive .hero__bg-illustration { z-index: 0; }

/* When JS detects the video failed to load it adds display:none to the
   <video>; the SVG fallback then naturally shows because nothing is over it. */

/* --------------------------------------------------------------------------
   Video display fix
   - object-fit:contain → keep the full source frame visible (no center-crop)
   - transparent video element → hero bg shows through any letterbox bars
   - hero bg = solid black with a faded hex pattern on top
   - hide the old SVG illustration fallback now that real video is shipping
   -------------------------------------------------------------------------- */

.hero--immersive video.hero__bg {
  object-fit: contain;
  background: transparent;
}

.hero--immersive {
  background: var(--waggl-black);
}

/* Faded hex pattern overlay on the hero bg — visible only in the
   letterbox area around the video (where the video doesn't paint pixels) */
.hero--immersive::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--hex-fg);
  background-repeat: repeat;
  opacity: 0.18;
  /* invert the SVG stroke so it shows yellow on black */
  filter: invert(1) sepia(1) saturate(8) hue-rotate(0deg) brightness(1.1);
}

/* SVG illustration fallback is no longer needed now that real video ships.
   Hide it — but keep the markup in HTML in case a video file is missing
   for a future slot, in which case removing this rule restores the
   placeholder behaviour. */
.hero--immersive .hero__bg-illustration { display: none; }

/* --------------------------------------------------------------------------
   Voices from the field — horizontal-scroll testimonial strip
   Native CSS scroll-snap, no JS required. Works on touch + mouse + keyboard.
   Strip extends edge-to-edge with first-card alignment matching the container.
   -------------------------------------------------------------------------- */

.quote-strip {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: max(24px, calc((100vw - var(--content-max)) / 2 + 24px));
  scroll-behavior: smooth;
  /* Align first/last card with container edges */
  padding: var(--s-3) max(24px, calc((100vw - var(--content-max)) / 2 + 24px)) var(--s-5);
  margin: 0;
  /* Hide scrollbar visually but keep it functional */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
}
/* On viewports wide enough to show every card, center them so we
   don't end up with cards left-anchored against a wide blank gutter. */
@media (min-width: 1600px) {
  .quote-strip { justify-content: center; }
}

.quote-strip::-webkit-scrollbar {
  height: 8px;
}
.quote-strip::-webkit-scrollbar-track {
  background: transparent;
}
.quote-strip::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}
.quote-strip::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}

.quote-card {
  flex: 0 0 min(560px, 85vw);
  scroll-snap-align: start;
  padding: var(--s-6) var(--s-6) var(--s-5);
  border: 1.5px solid var(--waggl-black);
  border-radius: var(--radius-xl);
  background: var(--waggl-yellow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 240px;
}

.quote-card__text {
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--waggl-black);
}

.quote-card__attr {
  font-size: 13px;
  font-weight: 500;
  color: var(--waggl-charcoal);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.quote-card__attr strong {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--waggl-black);
}

/* Alternate card colors for visual rhythm down the strip */
.quote-card:nth-child(2n) {
  background: var(--waggl-yellow-soft);
}
.quote-card:nth-child(3n) {
  background: var(--waggl-black);
  color: var(--waggl-yellow);
}
.quote-card:nth-child(3n) .quote-card__text {
  color: var(--waggl-yellow);
}
.quote-card:nth-child(3n) .quote-card__attr {
  color: var(--waggl-yellow-soft);
}
.quote-card:nth-child(3n) .quote-card__attr strong {
  color: var(--waggl-yellow);
}


/* --------------------------------------------------------------------------
   Footer logo lockup (mark + wordmark side by side, like the header)
   -------------------------------------------------------------------------- */
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  margin-bottom: var(--s-3);
  color: var(--waggl-yellow);
}
/* Override the stand-alone footer mark's bottom margin when inside the lockup */
.site-footer__logo .site-footer__mark { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   Hex pattern fade — alternating direction.
   Default .hex-bg fades in from LEFT (transparent) to RIGHT (full).
   .hex-bg--flip reverses it: full on the left, transparent on the right.
   Use on subsequent yellow sections so the visual rhythm alternates and
   the page doesn't feel like a repeating tile.
   -------------------------------------------------------------------------- */

.hex-bg--flip::after,
.hex-bg--flip::before {
  -webkit-mask-image: linear-gradient(90deg, black 20%, rgba(0,0,0,0.5) 45%, transparent 70%, transparent 100%);
          mask-image: linear-gradient(90deg, black 20%, rgba(0,0,0,0.5) 45%, transparent 70%, transparent 100%);
}

/* --------------------------------------------------------------------------
   Screenshot carousel: horizontal scroll of phone mockups + captions.
   Black-section variant — scrollbar tinted yellow.
   -------------------------------------------------------------------------- */

.screenshot-strip {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: max(24px, calc((100vw - var(--content-max)) / 2 + 24px));
  scroll-behavior: smooth;
  padding: var(--s-3) max(24px, calc((100vw - var(--content-max)) / 2 + 24px)) var(--s-6);
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,215,0,0.4) transparent;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
}
/* On viewports wide enough to show every card, center them so we
   don't end up with cards left-anchored against a wide blank gutter. */
@media (min-width: 1600px) {
  .screenshot-strip { justify-content: center; }
}
.screenshot-strip::-webkit-scrollbar { height: 8px; }
.screenshot-strip::-webkit-scrollbar-track { background: transparent; }
.screenshot-strip::-webkit-scrollbar-thumb { background: rgba(255,215,0,0.35); border-radius: 4px; }
.screenshot-strip::-webkit-scrollbar-thumb:hover { background: rgba(255,215,0,0.55); }

.screenshot-card {
  flex: 0 0 min(320px, 80vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.screenshot-card .phone { max-width: 100%; margin: 0; }
.screenshot-card__body {
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.screenshot-card__body h3 { color: var(--waggl-yellow); margin: 0; }
.screenshot-card__body p { color: var(--waggl-yellow-soft); margin: 0; font-size: 14px; line-height: 1.5; }
.screenshot-card__body .eyebrow { color: var(--waggl-yellow-soft); }

/* Promote previously-inline .dual responsive rule into stylesheet */
@media (max-width: 900px) {
  .dual { grid-template-columns: 1fr !important; }
}

/* Phone variant: real screenshot fills the screen area */
.phone--shot { padding: 8px; }
.phone--shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 30px;
}

/* --------------------------------------------------------------------------
   Immersive hero — mobile layout.
   On narrow viewports we abandon the overlay treatment entirely: the hero
   video sits at the top in normal flow with a natural aspect ratio, and the
   title + lede + CTAs live below it on a solid black background. Far easier
   to read and no awkward cropping of the title against the video edge.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .hero--immersive {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    max-height: none;
    background: var(--waggl-black);
    align-items: stretch;
    justify-content: flex-start;
  }
  .hero--immersive .hero__bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
  }
  .hero--immersive .hero__bg video,
  .hero--immersive .hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Hide the SVG illustration fallback on mobile — keeps stacking simple. */
  .hero--immersive .hero__bg-illustration { display: none; }
  /* Scrim is meaningless once the text isn't overlaid. */
  .hero--immersive .hero__scrim { display: none; }
  /* Scroll cue lands inside the video region by default — also unnecessary
     when content is already directly below the video. */
  .hero--immersive .hero__scroll-cue { display: none; }

  .hero--immersive .hero__content {
    position: relative;
    z-index: auto;
    padding: 36px 20px 48px;
    max-width: 100%;
    text-align: center;
    background: var(--waggl-black);
  }
  .hero--immersive .hero__content .display {
    font-size: clamp(30px, 8vw, 48px);
    max-width: 18ch;
    line-height: 1.08;
    margin-bottom: var(--s-3);
  }
  .hero--immersive .hero__content .lede {
    font-size: clamp(15px, 4vw, 17px);
    max-width: 50ch;
    line-height: 1.45;
    margin-bottom: var(--s-5);
  }
  .hero--immersive .hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
  }
  .hero--immersive .hero__cta .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}