/* =============================================================
   The Wisdom Bar — styles
   Vanilla CSS. Uses design tokens from the build brief.
   ============================================================= */

/* -------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------- */
:root {
  --navy-900: #10222F;
  --navy-800: #16344A;
  --navy-700: #1D3B52;
  --navy-600: #274B63;
  --cream-100: #F5F0E4;
  --cream-200: #EFE8D8;
  --cream-300: #E4DAC5;
  --lime-300: #DFE98A;
  --lime-200: #E8F0A3;
  --lime-400: #CBD86A;
  --rust-600: #8A2F2B;
  --rust-500: #B23A34;
  --rust-450: #C24A42;
  --ink-900: #10222F;
  --ink-950: #0A171F;
  --white: #FFFFFF;
  --slate-300: #B4C7D4;
  --slate-500: #64798A;

  --color-surface: var(--navy-800);
  --color-surface-alt: var(--navy-700);
  --color-surface-deep: var(--navy-900);
  --color-panel-cream: var(--cream-200);
  --color-text-on-navy: var(--white);
  --color-text-muted-on-navy: var(--slate-300);
  --color-text-on-cream: var(--ink-900);
  --color-accent: var(--lime-300);
  --color-accent-bright: var(--lime-200);
  --color-action-primary-bg: var(--lime-300);
  --color-action-primary-text: var(--ink-900);
  --cta-bg-hover: #C9D66E;
  --cta-bg-active: #B4C255;
  --color-shadow-ink: var(--ink-950);
  --color-shadow-lime: var(--lime-300);
  --color-field-bg: var(--white);
  --color-field-text: var(--ink-900);
  --color-field-placeholder: var(--slate-500);
  --color-field-border: var(--navy-600);
  --color-error: var(--rust-450);
  --color-success: #2E7D5B;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --content-max: 72rem;
  --gutter: var(--space-5);
  --radius-md: 6px;
  --radius-circle: 50%;

  --shadow-offset-sm: 4px 4px 0 var(--color-shadow-ink);
  --shadow-brutal: 6px 6px 0 var(--color-shadow-ink), 12px 12px 0 var(--color-shadow-lime);
  --shadow-brutal-lg: 8px 8px 0 var(--color-shadow-ink), 16px 16px 0 var(--color-shadow-lime);
  --shadow-nav: 0 2px 12px rgba(4, 12, 18, .45);

  --font-display: 'Anton', 'Oswald', 'Arial Narrow Bold', 'Impact', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: 140ms;
  --dur-med: 240ms;

  --nav-height: 64px;
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--space-7);
    --nav-height: 72px;
  }
}

/* -------------------------------------------------------------
   2. Reset + base
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-height) + 8px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text-on-navy);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

body.is-nav-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0;
  line-height: .95;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Focus ring — visible for keyboard users everywhere */
:focus-visible {
  outline: 3px solid var(--color-accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Accessible visually-hidden */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--lime-300);
  color: var(--ink-900);
  font-weight: 700;
  text-decoration: none;
  z-index: 200;
  border-radius: var(--radius-md);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* -------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Keep section content above decorative doodles */
  position: relative;
  z-index: 1;
}

.section { padding-block: var(--space-8); position: relative; overflow: hidden; }
@media (min-width: 48rem) { .section { padding-block: var(--space-9); } }

.section--navy    { background: var(--color-surface); color: var(--color-text-on-navy); }
.section--alt     { background: var(--color-surface-alt); color: var(--color-text-on-navy); }
.section--deep    { background: var(--color-surface-deep); color: var(--color-text-on-navy); }
.section--cream   { background: var(--color-panel-cream); color: var(--color-text-on-cream); }

/* -------------------------------------------------------------
   4. Type scale
   ------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 9vw, 6rem);
  line-height: .9;
  text-transform: uppercase;
}
.h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  line-height: .95;
  text-transform: uppercase;
}
.h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.125rem);
  line-height: .95;
  text-transform: uppercase;
}
.lead {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.55;
  max-width: 62ch;
}
.eyebrow, .label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-text-muted-on-navy);
  margin: 0;
}
.eyebrow--lime { color: var(--color-accent); }
.info-value {
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--white);
}
.small { font-size: .8125rem; }
.tagline {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-accent);
  font-size: clamp(1.125rem, 3vw, 1.75rem);
  margin: 0;
}

/* -------------------------------------------------------------
   5. Cream box — the recurring "brutal" title box
   ------------------------------------------------------------- */
.cream-box {
  display: inline-block;
  background: var(--color-panel-cream);
  color: var(--color-text-on-cream);
  padding: var(--space-3) var(--space-5);
  box-shadow: var(--shadow-brutal);
  transform: rotate(-1deg);
  transform-origin: center left;
  max-width: 100%;
}
.cream-box--hero {
  box-shadow: var(--shadow-brutal-lg);
  transform: rotate(-1.5deg);
  padding: var(--space-4) var(--space-6);
}
.cream-box--rust {
  box-shadow: 6px 6px 0 var(--rust-600);
}
.cream-box--on-cream {
  background: var(--white);
  box-shadow: 6px 6px 0 var(--rust-600);
}

@media (max-width: 26rem) {
  .cream-box { padding: var(--space-2) var(--space-4); }
  .cream-box--hero { padding: var(--space-3) var(--space-4); }
}

/* -------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .9375rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn--block { width: 100%; }

.btn--primary {
  background: var(--color-action-primary-bg);
  color: var(--color-action-primary-text);
  border-color: var(--ink-950);
  box-shadow: var(--shadow-offset-sm);
}
.btn--primary:hover {
  background: var(--cta-bg-hover);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--color-shadow-ink);
}
.btn--primary:active {
  background: var(--cta-bg-active);
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 var(--color-shadow-ink);
}

.btn--secondary {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn--secondary:hover {
  background: var(--white);
  color: var(--ink-900);
}

.btn--ghost {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn--ghost:hover {
  background: var(--color-accent);
  color: var(--ink-900);
}

.btn--soldout {
  background: var(--rust-600);
  color: var(--white);
  border-color: var(--rust-600);
  cursor: not-allowed;
  letter-spacing: .12em;
  box-shadow: none;
  transform: rotate(-2deg);
  width: 100%;
}

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
}

/* -------------------------------------------------------------
   7. Nav
   ------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: transparent;
  transition: background-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              backdrop-filter var(--dur-med) var(--ease-out);
}
.site-nav.is-scrolled {
  background: rgba(22, 52, 74, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-nav);
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  min-height: 44px;
}
.brand__logo {
  width: auto;
  height: 30px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav-links a {
  color: var(--white);
  text-decoration: none;
  font-weight: 500;
  font-size: .9375rem;
  padding: var(--space-2) var(--space-1);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover, .nav-links a:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.nav-cta { flex-shrink: 0; }

.nav-toggle {
  width: 44px;
  height: 44px;
  border: 2px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  border-radius: var(--radius-md);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nav-toggle__bars {
  display: block;
  position: relative;
  width: 20px;
  height: 2px;
  background: currentColor;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 47.99rem) {
  .nav-links {
    position: fixed;
    inset: var(--nav-height) 0 0 0;
    background: var(--navy-800);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-5) var(--gutter) var(--space-7);
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-out);
    visibility: hidden;
  }
  .nav-links.is-open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: var(--shadow-nav);
  }
  .nav-links a {
    font-size: 1.25rem;
    padding: var(--space-4) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    min-height: 56px;
  }
  .nav-toggle { display: inline-flex; }
  .nav-cta .btn { padding: var(--space-2) var(--space-4); font-size: .8125rem; min-height: 44px; }
  .brand span { font-size: 1rem; }
}

/* -------------------------------------------------------------
   8. Hero
   ------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: var(--space-8);
  padding-bottom: var(--space-9);
  background: var(--color-surface);
}
.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  z-index: 2;
  max-width: 52rem;
}
.hero__eyebrow { margin-bottom: var(--space-2); }
.hero__title {
  margin-block: var(--space-2);
}
.hero__lead {
  color: var(--slate-300);
  margin-top: var(--space-3);
}
.hero__cta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* -------------------------------------------------------------
   9. Section headings
   ------------------------------------------------------------- */
.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  max-width: 62ch;
}
.section-header p { color: var(--color-text-muted-on-navy); }
.section--cream .section-header p { color: var(--ink-900); opacity: .8; }

/* -------------------------------------------------------------
   10. Event cards
   ------------------------------------------------------------- */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
}
.events-footer {
  margin-top: var(--space-7);
  display: flex;
  justify-content: center;
}

.event-card {
  position: relative;
  background: var(--navy-800);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  padding-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.event-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
}

.event-card__title-box {
  position: absolute;
  top: -14px;
  left: var(--space-4);
  right: var(--space-4);
  background: var(--color-panel-cream);
  color: var(--color-text-on-cream);
  padding: var(--space-2) var(--space-4);
  box-shadow: var(--shadow-brutal);
  transform: rotate(-1deg);
  max-width: calc(100% - var(--space-4) * 2);
}
.event-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
}

.event-card__speaker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  margin-top: var(--space-4);
}
.event-card__avatar {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-circle);
  background: var(--navy-900);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px var(--lime-300);
  flex-shrink: 0;
}
.event-card__brain {
  width: 82px;
  height: auto;
}
.event-card__speaker-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.event-card__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.event-card__role {
  font-size: .8125rem;
  color: var(--slate-300);
}

.event-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}
.event-card__info-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-3);
  align-items: center;
}
.event-card__icon {
  width: 20px;
  height: 20px;
  color: var(--white);
}
.event-card__info-text {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.event-card__info-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--slate-300);
  margin: 0;
  font-weight: 600;
}
.event-card__info-value {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
  font-size: .9375rem;
}

.empty-state {
  padding: var(--space-7);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* -------------------------------------------------------------
   11. About / How it works (cream section)
   ------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.step__num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--rust-500);
}
.step__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--ink-900);
}
.step p { color: var(--ink-900); max-width: 32ch; }

.run-of-show {
  margin-top: var(--space-7);
  padding: var(--space-4) var(--space-5);
  background: var(--navy-800);
  color: var(--white);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(.9375rem, 2vw, 1.125rem);
  text-align: center;
  box-shadow: var(--shadow-offset-sm);
}
.run-of-show-note {
  margin-top: var(--space-4);
  color: var(--ink-900);
  opacity: .75;
  font-size: .875rem;
  text-align: center;
}

.about-block {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-4);
  max-width: 62ch;
}
.about-block h3 { color: var(--ink-900); }
.about-block p { color: var(--ink-900); font-size: 1.0625rem; line-height: 1.6; }

.faq {
  margin-top: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 62ch;
}
.faq details {
  background: var(--white);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.faq summary {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--rust-500);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq details[open] summary::after { content: '−'; }
.faq details p {
  margin-top: var(--space-3);
  color: var(--ink-900);
  font-size: .9375rem;
}

/* -------------------------------------------------------------
   12. Forms
   ------------------------------------------------------------- */
.form-panel {
  background: var(--color-panel-cream);
  color: var(--ink-900);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-brutal);
  margin-top: var(--space-6);
  max-width: 44rem;
}
.form-panel--wide { max-width: 60rem; }

.form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-group:last-child { margin-bottom: 0; }
.form-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-900);
}
.form-label .req { color: var(--rust-500); margin-left: 2px; }

.form-input, .form-textarea, .form-select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-field-bg);
  color: var(--color-field-text);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.form-input::placeholder, .form-textarea::placeholder {
  color: var(--color-field-placeholder);
}
.form-textarea { min-height: 6rem; resize: vertical; }
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: var(--navy-600);
  border-width: 2px;
  box-shadow: 0 0 0 3px var(--lime-200);
}
.form-input[aria-invalid="true"], .form-textarea[aria-invalid="true"] {
  border: 2px solid var(--color-error);
}

.field-error {
  /* rust-500, not rust-450: 4.85:1 on the cream panel (AA) */
  color: var(--rust-500);
  font-size: .8125rem;
  font-weight: 500;
  min-height: 1rem;
  display: block;
}

/* Honeypot — visually hidden but real */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

fieldset {
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0 0 var(--space-4) 0;
}
legend {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 0 var(--space-2);
  color: var(--ink-900);
}
.radio-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }
.radio-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  cursor: pointer;
}
.radio-option input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--rust-500);
}

details.optional-details {
  margin-top: var(--space-5);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--white);
}
details.optional-details > summary {
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
}
details.optional-details > summary::-webkit-details-marker { display: none; }
details.optional-details > summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--rust-500);
}
details.optional-details[open] > summary::after { content: '−'; }
details.optional-details[open] > *:not(summary) { margin-top: var(--space-4); }

.form-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .form-group--full { grid-column: 1 / -1; }
}

.form-actions {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}
.form-note {
  color: var(--ink-900);
  opacity: .7;
  font-size: .8125rem;
  margin-top: var(--space-3);
}

.form-status {
  margin-top: var(--space-4);
  padding: 0;
  font-weight: 500;
  min-height: 1.5rem;
}
.form-status[data-state="pending"] { color: var(--ink-900); }
.form-status[data-state="success"] {
  color: var(--white);
  background: var(--color-success);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}
.form-status[data-state="error"] {
  color: var(--white);
  background: var(--color-error);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}

/* Newsletter is a tighter single-field layout */
.newsletter-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 32rem) {
  .newsletter-form {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .newsletter-form .form-actions { margin-top: 0; }
}

/* -------------------------------------------------------------
   13. Footer
   ------------------------------------------------------------- */
.site-footer {
  background: var(--color-surface-deep);
  color: var(--color-text-on-navy);
  padding-block: var(--space-8);
  position: relative;
  overflow: hidden;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-accent);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.footer-brand__logo { width: clamp(170px, 30vw, 230px); height: auto; }
.footer-signoff {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  text-transform: uppercase;
  color: var(--color-accent);
}
.footer-tag {
  font-size: .875rem;
  color: var(--slate-300);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(223, 233, 138, .5);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.footer-socials a:hover, .footer-socials a:focus-visible {
  background: var(--color-accent);
  color: var(--ink-900);
  border-color: var(--color-accent);
}
.footer-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: .8125rem;
  color: var(--slate-300);
}
.footer-meta a { color: var(--color-accent); text-decoration: none; }
.footer-meta a:hover, .footer-meta a:focus-visible { text-decoration: underline; }
.footer-contact {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: .9375rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.footer-contact:hover, .footer-contact:focus-visible { text-decoration: underline; }

/* -------------------------------------------------------------
   14. Section background patterns — the brand doodles as faint
   repeating textures (per section), replacing floating SVGs so
   nothing clips at section boundaries. Colors are baked into
   each data URI at 5–8% alpha; the tile is 260px.
   ------------------------------------------------------------- */
.hero {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='rgba(223,233,138,0.07)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' transform='translate(6,8)'%3E%3Cpath d=%22M37.1 34.8A10.5 10.5 0 1 1 47.5 29.8%22/%3E  %3Cpath d=%22M37.1 34.8L40.2 37.5L45.3 47L52.1 43.7L47.7 33.9L47.5 29.8%22/%3E  %3Cpath d=%22M41.9 40.7L49.1 37.2%22/%3E  %3Cpath d=%22M43.5 43.9L50.7 40.4%22/%3E  %3Cpath d=%22M25.2 27L21.6 27.3%22/%3E  %3Cpath d=%22M28.2 16.8L25.4 14.5%22/%3E  %3Cpath d=%22M38.8 11.6L38.7 8%22/%3E  %3Cpath d=%22M48.7 15.5L51.2 12.9%22/%3E  %3Cpath d=%22M72.5 29.8A10.5 10.5 0 1 1 82.9 34.8%22/%3E  %3Cpath d=%22M72.5 29.8L72.3 33.9L67.9 43.7L74.7 47L79.8 37.5L82.9 34.8%22/%3E  %3Cpath d=%22M70.9 37.2L78.1 40.7%22/%3E  %3Cpath d=%22M69.3 40.4L76.5 43.9%22/%3E  %3Cpath d=%22M71.3 15.5L68.8 12.9%22/%3E  %3Cpath d=%22M81.2 11.6L81.3 8%22/%3E  %3Cpath d=%22M91.8 16.8L94.6 14.5%22/%3E  %3Cpath d=%22M94.8 27L98.4 27.3%22/%3E  %3Cpath d=%22M13.6 70.9a5.7 5.7 0 0 1 4.5-9.1a7.5 7.5 0 0 1 10.1-4.6a7.4 7.4 0 0 1 12.3 0a7.7 7.7 0 0 1 10.1 3.4a6.5 6.5 0 0 1 7.8 8a7.6 7.6 0 0 1 1.1 11.4a7 7 0 0 1-6.7 9.1a9.2 9.2 0 0 1-12.3 4.6a7.1 7.1 0 0 1-12.3 0a7.1 7.1 0 0 1-10.1-4.6a5.9 5.9 0 0 1-5.6-8a7 7 0 0 1 1.1-10.3z%22/%3E  %3Cpath d=%22M22.6 65.1C23.1 66.3 26.1 69.7 25.9 72C25.7 74.3 21.6 76.6 21.4 78.9C21.3 81.1 24.2 84.6 24.8 85.7%22/%3E  %3Cpath d=%22M32.6 61.7C32.3 63 30 67.2 30.4 69.7C30.8 72.2 34.7 74.1 34.9 76.6C35.1 79 31.7 82.7 31.5 84.6C31.3 86.5 33.4 87.4 33.8 88%22/%3E  %3Cpath d=%22M42.7 62.9C42.3 64.2 40.1 68.4 40.5 70.9C40.9 73.3 44.8 75 45 77.7C45.1 80.4 42.2 85.3 41.6 86.9%22/%3E  %3Cpath d=%22M50.6 67.4C50.2 68.8 48 73 48.3 75.4C48.6 77.9 52.1 80.2 52.2 82.3C52.4 84.4 49.9 87 49.4 88%22/%3E  %3Cpath d=%22M58 79.6a6 6 0 0 1 4.8-9.6a8 8 0 0 1 10.8-4.8a7.9 7.9 0 0 1 13.2 0a8.2 8.2 0 0 1 10.8 3.6a6.9 6.9 0 0 1 8.4 8.4a8 8 0 0 1 1.2 12a7.4 7.4 0 0 1-7.2 9.6a9.8 9.8 0 0 1-13.2 4.8a7.7 7.7 0 0 1-13.2 0a7.6 7.6 0 0 1-10.8-4.8a6.2 6.2 0 0 1-6-8.4a7.4 7.4 0 0 1 1.2-10.8z%22/%3E  %3Cpath d=%22M67.6 73.6C68.2 74.8 71.4 78.4 71.2 80.8C71 83.2 66.6 85.6 66.4 88C66.2 90.4 69.4 94 70 95.2%22/%3E  %3Cpath d=%22M78.4 70C78 71.4 75.6 75.8 76 78.4C76.4 81 80.6 83 80.8 85.6C81 88.2 77.4 92 77.2 94C77 96 79.2 97 79.6 97.6%22/%3E  %3Cpath d=%22M89.2 71.2C88.8 72.6 86.4 77 86.8 79.6C87.2 82.2 91.4 84 91.6 86.8C91.8 89.6 88.6 94.8 88 96.4%22/%3E  %3Cpath d=%22M97.6 76C97.2 77.4 94.9 81.8 95.2 84.4C95.5 87 99.2 89.4 99.4 91.6C99.6 93.8 96.9 96.6 96.4 97.6%22/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(223,233,138,0.07)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' transform='translate(148,150) scale(0.72) rotate(8 60 60)'%3E%3Cpath d=%22M24 20c-7 0-11 4-11 11v15c0 7 4 11 11 11h6L20 66l18-9h20c7 0 11-4 11-11V31c0-7-4-11-11-11Z%22/%3E  %3Ccircle cx=%2230%22 cy=%2239%22 r=%222.6%22 fill=%22rgba(223,233,138,0.07)%22 stroke=%22none%22/%3E  %3Ccircle cx=%2241%22 cy=%2239%22 r=%222.6%22 fill=%22rgba(223,233,138,0.07)%22 stroke=%22none%22/%3E  %3Ccircle cx=%2252%22 cy=%2239%22 r=%222.6%22 fill=%22rgba(223,233,138,0.07)%22 stroke=%22none%22/%3E  %3Cpath d=%22M70 46c-6 0-10 4-10 10v14c0 6 4 10 10 10h16l13 13-6-13h5c6 0 10-4 10-10V56c0-6-4-10-10-10Z%22/%3E  %3Cpath d=%22M84 55v11%22/%3E  %3Ccircle cx=%2284%22 cy=%2272%22 r=%222.4%22 fill=%22rgba(223,233,138,0.07)%22 stroke=%22none%22/%3E  %3Cpath d=%22M30 76c-6 0-10 4-10 10v10c0 6 4 10 10 10h4l-10 10 18-10h20c6 0 10-4 10-10V86c0-6-4-10-10-10Z%22/%3E  %3Cpath d=%22M41 81c1 7 3 8 10 10-7 2-9 3-10 10-1-7-3-8-10-10 7-2 9-3 10-10Z%22/%3E%3C/g%3E%3C/svg%3E");
}
#events {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='rgba(223,233,138,0.06)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' transform='translate(14,14) scale(0.9)'%3E%3Cpath d=%22M20 36c0-6 4-10 10-10l30 1 40 13c4 1 5 3 5 6v34l-45 17-40 1Z%22/%3E  %3Cpath d=%22M60 27v70%22/%3E  %3Cpath d=%22M28 35h24%22/%3E  %3Cpath d=%22M30 44c-3 0-4 2-4 5v12c0 3 1 5 4 5h20c3 0 4-2 4-5V49c0-3-1-5-4-5Z%22/%3E  %3Ccircle cx=%2229%22 cy=%2278%22 r=%223%22 fill=%22rgba(223,233,138,0.06)%22 stroke=%22none%22/%3E  %3Ccircle cx=%2251%22 cy=%2278%22 r=%223%22 fill=%22rgba(223,233,138,0.06)%22 stroke=%22none%22/%3E  %3Cpath d=%22M68 33l13 5v47l-13 5Z%22/%3E  %3Cpath d=%22M87 42l12 4v17l-12-4Z%22/%3E  %3Cpath d=%22M14 104 104 88%22/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(223,233,138,0.06)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' transform='translate(152,154) scale(0.68) rotate(-6 60 60)'%3E%3Cpath d=%22M36 102 39 18h42l3 84%22/%3E  %3Cpath d=%22M34 18h52%22/%3E  %3Cpath d=%22M44 79V56c0-11 4.5-20 6.5-23 2 3 6.5 12 6.5 23v23%22/%3E  %3Cpath d=%22M63 79V56c0-11 4.5-20 6.5-23 2 3 6.5 12 6.5 23v23%22/%3E  %3Cpath d=%22M2 79h34M84 79h34%22/%3E  %3Cpath d=%22M39 19C30 36 18 58 2 70%22/%3E  %3Cpath d=%22M81 19c9 17 21 39 37 51%22/%3E  %3Cpath d=%22M39 24 8 79M81 24l31 55%22/%3E  %3Cpath d=%22M28 38v41M15 57v22M92 38v41M105 57v22%22/%3E%3C/g%3E%3C/svg%3E");
}
#about {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='rgba(138,47,43,0.08)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' transform='translate(16,14) scale(0.85)'%3E%3Cpath d=%22M49 27c0-11 5-16 11-15 6.5.5 11 7 11 15 0 8-5.5 10-6 14H55c-.5-4-6-6-6-14Z%22/%3E  %3Cpath d=%22M55 45h10M56 49h8%22/%3E  %3Cpath d=%22M60 8V3M48 14l-5-5M72 14l5-5M45 27h-6M75 27h6%22/%3E  %3Cpath d=%22M30 57h60%22/%3E  %3Cpath d=%22M34 57c8 10 19 22 26 31 8-9 19-21 27-31%22/%3E  %3Cpath d=%22M60 88v16%22/%3E  %3Cpath d=%22M46 108c5-5 23-5 28 0%22/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(138,47,43,0.08)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' transform='translate(146,148) scale(0.72) rotate(9 60 60)'%3E%3Cpath d=%22M37.1 34.8A10.5 10.5 0 1 1 47.5 29.8%22/%3E  %3Cpath d=%22M37.1 34.8L40.2 37.5L45.3 47L52.1 43.7L47.7 33.9L47.5 29.8%22/%3E  %3Cpath d=%22M41.9 40.7L49.1 37.2%22/%3E  %3Cpath d=%22M43.5 43.9L50.7 40.4%22/%3E  %3Cpath d=%22M25.2 27L21.6 27.3%22/%3E  %3Cpath d=%22M28.2 16.8L25.4 14.5%22/%3E  %3Cpath d=%22M38.8 11.6L38.7 8%22/%3E  %3Cpath d=%22M48.7 15.5L51.2 12.9%22/%3E  %3Cpath d=%22M72.5 29.8A10.5 10.5 0 1 1 82.9 34.8%22/%3E  %3Cpath d=%22M72.5 29.8L72.3 33.9L67.9 43.7L74.7 47L79.8 37.5L82.9 34.8%22/%3E  %3Cpath d=%22M70.9 37.2L78.1 40.7%22/%3E  %3Cpath d=%22M69.3 40.4L76.5 43.9%22/%3E  %3Cpath d=%22M71.3 15.5L68.8 12.9%22/%3E  %3Cpath d=%22M81.2 11.6L81.3 8%22/%3E  %3Cpath d=%22M91.8 16.8L94.6 14.5%22/%3E  %3Cpath d=%22M94.8 27L98.4 27.3%22/%3E  %3Cpath d=%22M13.6 70.9a5.7 5.7 0 0 1 4.5-9.1a7.5 7.5 0 0 1 10.1-4.6a7.4 7.4 0 0 1 12.3 0a7.7 7.7 0 0 1 10.1 3.4a6.5 6.5 0 0 1 7.8 8a7.6 7.6 0 0 1 1.1 11.4a7 7 0 0 1-6.7 9.1a9.2 9.2 0 0 1-12.3 4.6a7.1 7.1 0 0 1-12.3 0a7.1 7.1 0 0 1-10.1-4.6a5.9 5.9 0 0 1-5.6-8a7 7 0 0 1 1.1-10.3z%22/%3E  %3Cpath d=%22M22.6 65.1C23.1 66.3 26.1 69.7 25.9 72C25.7 74.3 21.6 76.6 21.4 78.9C21.3 81.1 24.2 84.6 24.8 85.7%22/%3E  %3Cpath d=%22M32.6 61.7C32.3 63 30 67.2 30.4 69.7C30.8 72.2 34.7 74.1 34.9 76.6C35.1 79 31.7 82.7 31.5 84.6C31.3 86.5 33.4 87.4 33.8 88%22/%3E  %3Cpath d=%22M42.7 62.9C42.3 64.2 40.1 68.4 40.5 70.9C40.9 73.3 44.8 75 45 77.7C45.1 80.4 42.2 85.3 41.6 86.9%22/%3E  %3Cpath d=%22M50.6 67.4C50.2 68.8 48 73 48.3 75.4C48.6 77.9 52.1 80.2 52.2 82.3C52.4 84.4 49.9 87 49.4 88%22/%3E  %3Cpath d=%22M58 79.6a6 6 0 0 1 4.8-9.6a8 8 0 0 1 10.8-4.8a7.9 7.9 0 0 1 13.2 0a8.2 8.2 0 0 1 10.8 3.6a6.9 6.9 0 0 1 8.4 8.4a8 8 0 0 1 1.2 12a7.4 7.4 0 0 1-7.2 9.6a9.8 9.8 0 0 1-13.2 4.8a7.7 7.7 0 0 1-13.2 0a7.6 7.6 0 0 1-10.8-4.8a6.2 6.2 0 0 1-6-8.4a7.4 7.4 0 0 1 1.2-10.8z%22/%3E  %3Cpath d=%22M67.6 73.6C68.2 74.8 71.4 78.4 71.2 80.8C71 83.2 66.6 85.6 66.4 88C66.2 90.4 69.4 94 70 95.2%22/%3E  %3Cpath d=%22M78.4 70C78 71.4 75.6 75.8 76 78.4C76.4 81 80.6 83 80.8 85.6C81 88.2 77.4 92 77.2 94C77 96 79.2 97 79.6 97.6%22/%3E  %3Cpath d=%22M89.2 71.2C88.8 72.6 86.4 77 86.8 79.6C87.2 82.2 91.4 84 91.6 86.8C91.8 89.6 88.6 94.8 88 96.4%22/%3E  %3Cpath d=%22M97.6 76C97.2 77.4 94.9 81.8 95.2 84.4C95.5 87 99.2 89.4 99.4 91.6C99.6 93.8 96.9 96.6 96.4 97.6%22/%3E%3C/g%3E%3C/svg%3E");
}
#newsletter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='rgba(223,233,138,0.06)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' transform='translate(12,16) scale(0.9) rotate(-5 60 60)'%3E%3Cpath d=%22M20 34h53c1.5 7 8.5 7 10 0h17c5 0 8 4 8 9v34c0 5-3 9-8 9H83c-1.5-7-8.5-7-10 0H20c-5 0-8-4-8-9V43c0-5 3-9 8-9Z%22/%3E  %3Cpath d=%22M78 42v36%22 stroke-dasharray=%221.5 6.5%22/%3E  %3Cpath d=%22M38 42l4.4 11.9 12.7 1.4-9.9 7.4 3.5 12.9L38 67.5 27.4 74.6 30.9 61.7 21 54.3l12.7-1.4Z%22/%3E  %3Cpath d=%22M60 52h12M60 62h11%22/%3E  %3Cpath d=%22M90 58h11%22/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(223,233,138,0.06)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' transform='translate(154,150) scale(0.62) rotate(7 60 60)'%3E%3Cpath d=%22M49 27c0-11 5-16 11-15 6.5.5 11 7 11 15 0 8-5.5 10-6 14H55c-.5-4-6-6-6-14Z%22/%3E  %3Cpath d=%22M55 45h10M56 49h8%22/%3E  %3Cpath d=%22M60 8V3M48 14l-5-5M72 14l5-5M45 27h-6M75 27h6%22/%3E  %3Cpath d=%22M30 57h60%22/%3E  %3Cpath d=%22M34 57c8 10 19 22 26 31 8-9 19-21 27-31%22/%3E  %3Cpath d=%22M60 88v16%22/%3E  %3Cpath d=%22M46 108c5-5 23-5 28 0%22/%3E%3C/g%3E%3C/svg%3E");
}
#speak {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='rgba(223,233,138,0.06)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' transform='translate(12,12) scale(0.9)'%3E%3Cpath d=%22M24 20c-7 0-11 4-11 11v15c0 7 4 11 11 11h6L20 66l18-9h20c7 0 11-4 11-11V31c0-7-4-11-11-11Z%22/%3E  %3Ccircle cx=%2230%22 cy=%2239%22 r=%222.6%22 fill=%22rgba(223,233,138,0.06)%22 stroke=%22none%22/%3E  %3Ccircle cx=%2241%22 cy=%2239%22 r=%222.6%22 fill=%22rgba(223,233,138,0.06)%22 stroke=%22none%22/%3E  %3Ccircle cx=%2252%22 cy=%2239%22 r=%222.6%22 fill=%22rgba(223,233,138,0.06)%22 stroke=%22none%22/%3E  %3Cpath d=%22M70 46c-6 0-10 4-10 10v14c0 6 4 10 10 10h16l13 13-6-13h5c6 0 10-4 10-10V56c0-6-4-10-10-10Z%22/%3E  %3Cpath d=%22M84 55v11%22/%3E  %3Ccircle cx=%2284%22 cy=%2272%22 r=%222.4%22 fill=%22rgba(223,233,138,0.06)%22 stroke=%22none%22/%3E  %3Cpath d=%22M30 76c-6 0-10 4-10 10v10c0 6 4 10 10 10h4l-10 10 18-10h20c6 0 10-4 10-10V86c0-6-4-10-10-10Z%22/%3E  %3Cpath d=%22M41 81c1 7 3 8 10 10-7 2-9 3-10 10-1-7-3-8-10-10 7-2 9-3 10-10Z%22/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(223,233,138,0.06)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' transform='translate(150,156) scale(0.62) rotate(-8 60 60)'%3E%3Cpath d=%22M20 34h53c1.5 7 8.5 7 10 0h17c5 0 8 4 8 9v34c0 5-3 9-8 9H83c-1.5-7-8.5-7-10 0H20c-5 0-8-4-8-9V43c0-5 3-9 8-9Z%22/%3E  %3Cpath d=%22M78 42v36%22 stroke-dasharray=%221.5 6.5%22/%3E  %3Cpath d=%22M38 42l4.4 11.9 12.7 1.4-9.9 7.4 3.5 12.9L38 67.5 27.4 74.6 30.9 61.7 21 54.3l12.7-1.4Z%22/%3E  %3Cpath d=%22M60 52h12M60 62h11%22/%3E  %3Cpath d=%22M90 58h11%22/%3E%3C/g%3E%3C/svg%3E");
}
.site-footer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='rgba(223,233,138,0.05)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' transform='translate(16,20) scale(0.9)'%3E%3Cpath d=%22M36 102 39 18h42l3 84%22/%3E  %3Cpath d=%22M34 18h52%22/%3E  %3Cpath d=%22M44 79V56c0-11 4.5-20 6.5-23 2 3 6.5 12 6.5 23v23%22/%3E  %3Cpath d=%22M63 79V56c0-11 4.5-20 6.5-23 2 3 6.5 12 6.5 23v23%22/%3E  %3Cpath d=%22M2 79h34M84 79h34%22/%3E  %3Cpath d=%22M39 19C30 36 18 58 2 70%22/%3E  %3Cpath d=%22M81 19c9 17 21 39 37 51%22/%3E  %3Cpath d=%22M39 24 8 79M81 24l31 55%22/%3E  %3Cpath d=%22M28 38v41M15 57v22M92 38v41M105 57v22%22/%3E%3C/g%3E%3C/svg%3E");
}

/* -------------------------------------------------------------
   15. Reduced motion kill-switch
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------
   16. Utility bits
   ------------------------------------------------------------- */
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
[hidden] { display: none !important; }