/* ============================================================
   IndyRiot — Stylesheet
   Structure:
   1. Custom Properties (design tokens)
   2. Reset
   3. Base
   4. Layout utilities
   5. Nav
   6. Sections
      - Hero
      - About
      - Work
      - Contact
   7. Footer
   8. Interactive element placeholders
   9. Utilities
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   1. Custom Properties
   ──────────────────────────────────────────────────────────── */

/* Fonts ─────────────────────────────────────────────────── */
@font-face {
  font-family: "NordTrial";
  src: url("assets/fonts/NordTrialSN-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NordTrial";
  src: url("assets/fonts/NordTrialSN-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NordTrial";
  src: url("assets/fonts/NordTrialSN-Medium.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NordTrial";
  src: url("assets/fonts/NordTrialSN-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NordTrial";
  src: url("assets/fonts/NordTrialSN-Plakat.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MANIC";
  src: url("assets/Typeheist-Manic-Desktop-Package/Desktop/MANIC.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MANIC-Sketches";
  src: url("assets/Typeheist-Manic-Desktop-Package/Desktop/MANIC-Sketches.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MANIC-Alternates1";
  src: url("assets/Typeheist-Manic-Desktop-Package/Desktop/MANIC-Alternates1.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MANIC-Alternates2";
  src: url("assets/Typeheist-Manic-Desktop-Package/Desktop/MANIC-Alternates2.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MANIC-Alternates3";
  src: url("assets/Typeheist-Manic-Desktop-Package/Desktop/MANIC-Alternates3.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {

  /* Colors -------------------------------------------------- */
  --color-bg:       #ffffff;   /* Page background              */
  --color-fg:       #000000;   /* Default text                 */
  --color-accent:   #E4002B;   /* IndyRiot red                 */
  --color-grey:     #CCC1C1;   /* Warm grey (surface/panels)   */
  --color-muted:    #3b2f29;   /* Subdued / caption text       */
  --color-border:   #000000;   /* Borders — black, graphic     */
  --color-surface:  #CCC1C1;   /* Card / section backgrounds   */
  --color-danger:   #d00000;   /* Error text / borders          */
  /* Theme-invariant literals for deck sections (don't flip in dark mode) */
  --color-white:    #ffffff;
  --color-black:    #000000;
  /* Alpha tints (state tokens) */
  --color-black-a10: rgba(0, 0, 0, 0.10);
  --color-black-a20: rgba(0, 0, 0, 0.20);
  --color-black-a30: rgba(0, 0, 0, 0.30);
  --color-black-a40: rgba(0, 0, 0, 0.40);
  --color-black-a60: rgba(0, 0, 0, 0.60);
  --color-black-a80: rgba(0, 0, 0, 0.80);
  --color-white-a10: rgba(255, 255, 255, 0.10);
  --color-white-a20: rgba(255, 255, 255, 0.20);
  --color-white-a30: rgba(255, 255, 255, 0.30);
  --color-white-a40: rgba(255, 255, 255, 0.40);
  --color-white-a60: rgba(255, 255, 255, 0.60);
  --color-white-a80: rgba(255, 255, 255, 0.80);
  --color-border-subtle: rgba(0, 0, 0, 0.12);
  --color-placeholder: var(--color-black-a40);
  --color-disabled-bg: var(--color-black-a20);
  --color-disabled-fg: var(--color-black-a60);
  --color-inverse-overlay: var(--color-white-a10);
  --color-inverse-muted: rgba(255, 255, 255, 0.50);
  --color-inverse-body: rgba(255, 255, 255, 0.60);
  --color-selection-bg: #000000;
  --color-selection-fg: #ffffff;

  /* Typography ---------------------------------------------- */
  --font-primary:   "NordTrial", system-ui, sans-serif;
  --font-secondary: "NordTrial", system-ui, sans-serif;
  --font-mono:      monospace;

  /* Type scale (fluid-friendly rem values) */
  --text-xs:   0.875rem;   /*  16px */
  --text-sm:   0.875rem;   /*  16px */
  --text-base: 1rem;       /*  18px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  2rem;       /*  32px */
  --text-4xl:  2.5rem;     /*  40px */
  --text-5xl:  3.5rem;     /*  56px */
  --text-6xl:  5rem;       /*  80px */

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.0em;
  --tracking-wider:   0.2em;

  /* Spacing ------------------------------------------------- */
  --space-xs:   0.25rem;   /*  4px  */
  --space-sm:   0.5rem;    /*  8px  */
  --space-md:   1rem;      /*  16px */
  --space-lg:   1.5rem;    /*  24px */
  --space-xl:   2rem;      /*  32px */
  --space-2xl:  3rem;      /*  48px */
  --space-3xl:  5rem;      /*  80px */
  --space-4xl:  8rem;      /* 128px */
  --space-5xl:  12rem;     /* 192px */
  --space-6xl:  16rem;     /* 256px */
  --space-7xl:  32rem;     

  /* Layout -------------------------------------------------- */
  --grid-columns:      12;
  --container-max:     none;
  --container-max-deck: 1440px;   /* deck-driven sections inner max width */
  --container-pad:     16px;
  --grid-gap:          16px;
  --nav-height:        64px;
  --section-min-h:     100svh;    /* full-viewport sections (hero, problem, etc.) */

  /* Transitions --------------------------------------------- */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:  150ms;
  --duration-base:  300ms;
  --duration-slow:  1600ms;

  /* Borders / radius — zero-radius design language ----------- */
  --radius-sm:   0px;
  --radius-md:   0px;
  --radius-lg:   0px;
  --radius-full: 0px;
}

:root[data-theme="dark"] {
  --color-bg: #0a0a0a;
  --color-fg: #f2f2f2;
  --color-accent: #E4002B;
  --color-grey: #2a2a2a;
  --color-muted: #b8b8b8;
  --color-border: #f2f2f2;
  --color-surface: #1a1a1a;
  --color-danger: #ff5c5c;
  --color-border-subtle: rgba(255, 255, 255, 0.24);
  --color-placeholder: var(--color-white-a40);
  --color-disabled-bg: var(--color-white-a20);
  --color-disabled-fg: var(--color-white-a60);
  --color-inverse-overlay: var(--color-black-a10);
  --color-inverse-muted: rgba(0, 0, 0, 0.50);
  --color-inverse-body: rgba(0, 0, 0, 0.60);
  --color-selection-bg: #ffffff;
  --color-selection-fg: #000000;
}


/* ────────────────────────────────────────────────────────────
   2. Reset
   ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--space-md));
  -webkit-text-size-adjust: 100%;
}

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

button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
}

button:disabled {
  cursor: not-allowed;
}

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

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  font-size: inherit;
}


/* ────────────────────────────────────────────────────────────
   3. Base
   ──────────────────────────────────────────────────────────── */
body {
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-placeholder);
}

::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-fg);
}

::-moz-selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-fg);
}

/* ────────────────────────────────────────────────────────────
   4. Layout utilities
   ──────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.container > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

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

/* Responsive 2-col grid helper */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.grid-2 > * {
  grid-column: span 6;
}

@media (max-width: 768px) {
  .grid-2 > * {
    grid-column: span 12;
  }
}

/* Responsive 3-col grid helper */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.grid-3 > * {
  grid-column: span 4;
}

@media (max-width: 1024px) {
  .grid-3 > * {
    grid-column: span 6;
  }
}

@media (max-width: 600px) {
  .grid-3 > * {
    grid-column: span 12;
  }
}


/* ────────────────────────────────────────────────────────────
   5. Nav
   ──────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background-color: var(--color-grey);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-out);
}

/* Add .nav--scrolled via JS when page is scrolled */
.nav--scrolled {
  border-color: var(--color-border);
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--container-pad);
}

/* Logo: two black boxes side-by-side */
.nav__logo {
  display: flex;
  align-items: stretch;
  gap: 0;
  text-decoration: none;
}

.nav__logo-word {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-fg);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.75rem;        /* ~28px — scaled to nav height */
  line-height: 1;
  padding: 0.1em 0.3em;
  letter-spacing: -0.01em;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* Bracket-style nav links: [ Demo ] */
.nav__link--bracket {
  font-size: var(--text-sm);
  font-weight: 400;
  opacity: 0.75;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.nav__link--bracket::before {
  content: "[ ";
}

.nav__link--bracket::after {
  content: " ]";
}

.nav__link--bracket:hover,
.nav__link--bracket.is-active {
  opacity: 1;
}

/* REQUEST TRIAL button */
.nav__cta {
  font-size: var(--text-xs);
  padding: 0.3em 0.7em;
  font-weight: 700;
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav__cta-left {
  margin-right: var(--space-md);
}

.nav__cta-left.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* Mobile toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-sm);
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-fg);
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}

@media (max-width: 768px) {
  .nav__toggle { display: none; }

  .nav__inner {
    gap: var(--space-sm);
  }

  .nav__menu {
    display: flex !important;
    gap: var(--space-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 1;
    min-width: 0;
  }
  .nav__menu::-webkit-scrollbar { display: none; }

  .nav__menu li { flex-shrink: 0; }

  .nav__link--bracket { font-size: var(--text-xs); }

  .nav__cta-left {
    position: static;
    flex-shrink: 0;
  }
}


/* ────────────────────────────────────────────────────────────
   Shared Components (site + styleguide)
   ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.55em 0.75em 0.45em;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
  cursor: pointer;
  border: none;
}

.btn--primary {
  background-color: var(--color-fg);
  color: var(--color-bg);
  transition: transform var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.btn--primary:hover {
  opacity: 0.92;
}

.btn:not(.btn--primary) {
  letter-spacing: var(--tracking-wider);
}

/* btn--split removed — solid hover + random rotation via JS */

.btn--ghost {
  background-color: transparent;
  color: var(--color-fg);
  border: 1px solid var(--color-fg);
}

.btn--ghost:hover {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.btn--accent:hover {
  opacity: 0.85;
}

.btn--muted {
  background-color: var(--color-surface);
  color: var(--color-fg);
}

.btn--muted:hover {
  background-color: var(--color-border);
}

.btn:disabled {
  background-color: var(--color-disabled-bg);
  color: var(--color-disabled-fg);
  border-color: transparent;
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
}

.input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  color: var(--color-fg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.input:focus {
  border-color: var(--color-fg);
}

.input::placeholder {
  color: var(--color-placeholder);
}

.input--error {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.input-label {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--color-fg);
  color: var(--color-bg);
  padding: 0.05em 0.2em 0.01em 0.2em;
  margin-bottom: 0;
}

.input-row-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xs);
}

.input-hint {
  font-size: var(--text-base);
  color: var(--color-muted);
  margin-top: 0;
}

.input-hint::before {
  content: "[ ";
}

.input-hint::after {
  content: " ]";
}

.input-error {
  font-size: var(--text-base);
  color: var(--color-danger);
  margin-top: 0;
}

.input-error::before {
  content: "[ ";
}

.input-error::after {
  content: " ]";
}

.card {
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.card__media {
  aspect-ratio: 16 / 9;
  background-color: var(--color-surface);
}

.card__body {
  padding: var(--space-lg);
}

.card__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}

.card__label::before {
  content: "[ ";
}

.card__label::after {
  content: " ]";
}

.card__title {
  font-family: var(--font-primary);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-sm);
}

.card__desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-normal);
}

.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  gap: 0;
  white-space: nowrap;
}

.tag::before {
  content: "[";
  margin-right: 0.35ch;
}

.tag::after {
  content: "]";
  margin-left: 0.35ch;
}

.tag--default {
  color: var(--color-fg);
}

.tag--accent {
  color: var(--color-accent);
}

.tag--highlighted {
  background: var(--color-fg);
  color: var(--color-bg);
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.04em 0.22em;
}

.tag--highlighted::before,
.tag--highlighted::after {
  content: none;
  margin: 0;
}


/* ────────────────────────────────────────────────────────────
   6. Sections — shared
   ──────────────────────────────────────────────────────────── */
.section {
  padding-block: var(--space-4xl);
}

/* Push first section below fixed nav (non-hero sections only) */
main > .section:first-child:not(.section--hero) {
  padding-top: calc(var(--nav-height) + var(--space-4xl));
}

.section__heading {
  font-family: var(--font-primary);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-2xl);
  grid-column: 1 / -1;
}

.section__body {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--color-muted);
  max-width: 60ch;
}


/* ── Hero ───────────────────────────────────────────────────── */
.section--hero {
  min-height: 100svh;
  background-color: var(--color-grey);
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.section--hero.is-grabbing {
  cursor: grabbing;
}

@media (max-width: 900px) {
  .section--hero {
    touch-action: pan-y;
  }
}

/* Globe wrapper — full-bleed, centres the 3D scene, provides perspective */
.hero__globe-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  pointer-events: auto; /* allow hover on tiles; drag still bubbles to section */
}

.hero__core-title {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 500;
  display: inline-block;
  margin: 0;
  color: var(--color-fg);
  background: var(--color-bg);
  font-family: var(--font-primary);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.05em 0.18em 0.01em 0.18em;
  white-space: nowrap;
  pointer-events: none;
  text-align: center;
}

/* Scaler — CSS-animated from scale(0) to scale(1) via .is-visible */
.hero__globe-scaler {
  transform: scale(0);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.hero__globe-scaler.is-visible {
  transform: scale(1.06);
}

/* Scene — JS drives rotateX/rotateY here; must NOT be transitioned */
.hero__globe-scene {
  width: 1px;
  height: 1px;
  transform-style: preserve-3d;
}


/* Photo tiles — translate3d positions them on the sphere;
   no per-tile rotation so they always face the same direction.
   backface-visibility is intentionally absent so tiles on the
   back hemisphere are visible too. */
.globe__item {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background-color: var(--color-black-a30);
}

.globe__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

/* Wordmarks — centred & side-by-side initially; JS translates them apart */
.hero__wordmarks {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  z-index: 1;
}

.hero__wordmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  isolation: isolate;
  background-color: var(--color-fg);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1;
  padding: 0.06em 0.2em 0.04em;
  letter-spacing: -0.01em;
  white-space: nowrap;
  user-select: none;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__wordmark::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: clamp(90px, 14vw, 280px);
  background-color: var(--color-accent);
  pointer-events: none;
  transform: scaleX(0);
}

#wordmarkIndy::after {
  right: 100%;
  transform-origin: right center;
}

#wordmarkRiot::after {
  left: 100%;
  transform-origin: left center;
}

#wordmarkIndy.is-trailing::after {
  animation: hero-tail 1s var(--ease-out) both;
}

#wordmarkRiot.is-trailing::after {
  animation: hero-tail 1s var(--ease-out) both;
}

@keyframes hero-tail {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* ── Hero intro section ─────────────────────────────────────────── */
.section--hero-intro {
  background-color: var(--color-grey);
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}

.hero__intro {
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: var(--container-pad);
  gap: var(--space-lg);
}

.hero__headline {
  font-family: var(--font-primary);
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-fg);
  max-width: 14ch;
}

.hero__sub {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-fg);
  max-width: 45ch;
}

.hero__ctas {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 600px) {
  .hero__headline {
    font-size: var(--text-4xl);
  }

  .hero__sub {
    font-size: var(--text-lg);
  }
}

/* ── Demo mask rows ───────────────────────────────────────────── */
.section--demo-mask {
  background-color: var(--color-grey);
  padding-top: clamp(18rem, 6vw, 8rem);
  padding-bottom: 0;
  margin-top: 0;
}

.demo-mask {
  --mask-row-h: 160px;
  --mask-row-ratio: 0.65;
  --mask-row-w: calc(var(--mask-row-ratio) * 100%);
  --mask-row-count: 4;
  --mask-total-h: calc(var(--mask-row-h) * var(--mask-row-count));
  --mask-media: url("assets/images/demo-mask.gif");
  width: 100%;
  min-height: var(--mask-total-h);
  background-color: var(--color-fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.demo-mask__row {
  position: relative;
  display: block;
  width: 100%;
  height: var(--mask-row-h);
  border: 0;
  padding: 0;
  background: var(--color-fg);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.demo-mask__row::before {
  content: "";
  position: absolute;
  left: var(--row-left, calc((100% - var(--mask-row-w)) / 2));
  width: var(--mask-row-w);
  height: var(--mask-total-h);
  top: calc(var(--row-index, 0) * -1 * var(--mask-row-h));
  background-image: var(--mask-media);
  background-repeat: no-repeat;
  background-size: calc(100% / var(--mask-row-ratio)) var(--mask-total-h);
  background-position: var(--bg-x, 50%) top;
  transition: left var(--duration-base) var(--ease-out);
}

.demo-mask__row:nth-child(1) { --row-index: 0; }
.demo-mask__row:nth-child(2) { --row-index: 1; }
.demo-mask__row:nth-child(3) { --row-index: 2; }
.demo-mask__row:nth-child(4) { --row-index: 3; }

.demo-mask__row:nth-child(1) {
  background: var(--color-grey);
}

.demo-mask__row:nth-child(2) {
  background: linear-gradient(
    to right,
    var(--color-grey) 0%,
    var(--color-grey) 50%,
    var(--color-fg) 50%,
    var(--color-fg) 100%
  );
}

.demo-mask__row[data-pos="left"] {
  --row-left: 0%;
  --bg-x: 0%;
}

.demo-mask__row[data-pos="center"] {
  --row-left: calc((100% - var(--mask-row-w)) / 2);
  --bg-x: 50%;
}

.demo-mask__row[data-pos="right"] {
  --row-left: calc(100% - var(--mask-row-w));
  --bg-x: 100%;
}

.demo-mask__row:focus-visible {
  outline: 2px solid var(--color-bg);
  outline-offset: -2px;
}

@media (max-width: 900px) {
  .demo-mask {
    --mask-row-h: 144px;
    --mask-row-ratio: 0.72;
    --mask-row-w: calc(var(--mask-row-ratio) * 100%);
  }
}

@media (max-width: 640px) {
  .demo-mask {
    --mask-row-h: 120px;
    --mask-row-ratio: 0.84;
    --mask-row-w: calc(var(--mask-row-ratio) * 100%);
  }
}

/* ── Tagline ─────────────────────────────────────────────────── */
.section--tagline {
  background-color: var(--color-fg);
  padding-block: var(--space-4xl);
}

.tagline__words {
  grid-column: 2 / span 10;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(6rem, 2.2vw, 1.8rem);
}

.tagline__row {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  overflow: visible;
  gap: clamp(0.35rem, 1.5vw, 1.2rem);
  --row-delay: 0ms;
}

.tagline__row[data-count="2"] {
  justify-content: space-between;
  gap: clamp(0.35rem, 1.5vw, 1.2rem);
}

.tagline__row[data-count="1"] {
  justify-content: flex-start;
}

.tagline__row:nth-child(1) { --row-delay: 0ms; }
.tagline__row:nth-child(2) { --row-delay: 360ms; }
.tagline__row:nth-child(3) { --row-delay: 720ms; }

.tagline__word {
  display: inline-block;
  position: relative;
  z-index: 1;
  transform: translate3d(var(--word-enter-x, 0), var(--word-enter-y, 0), 0);
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--row-delay) + var(--word-delay, 0ms));
  will-change: transform;
  background-color: var(--color-white);
  color: var(--color-fg);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(2.5rem, 9vw, 9rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  padding: 0.14em 0.15em 0.12em;
}

.tagline__word:nth-child(1) { --word-delay: 0ms; }
.tagline__word:nth-child(2) { --word-delay: 120ms; }
.tagline__word:nth-child(3) { --word-delay: 240ms; }

.tagline__row:nth-child(1) .tagline__word {
  --word-enter-x: -16vw;
  --word-enter-y: 0;
}

.tagline__row:nth-child(2) .tagline__word {
  --word-enter-x: 0;
  --word-enter-y: 14vh;
}

.tagline__row:nth-child(3) .tagline__word {
  --word-enter-x: 16vw;
  --word-enter-y: 0;
}

.tagline__words.is-visible .tagline__word {
  transform: translate3d(0, 0, 0);
}

.tagline__word::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-accent);
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--row-delay) + var(--word-delay, 0ms));
}

.tagline__row:nth-child(1) .tagline__word::after,
.tagline__row:nth-child(3) .tagline__word::after {
  top: 0;
  bottom: 0;
  width: clamp(120px, 20vw, 460px);
}

.tagline__row:nth-child(1) .tagline__word::after {
  right: 100%;
  transform-origin: right center;
  transform: scaleX(1);
}

.tagline__row:nth-child(2) .tagline__word::after {
  top: 100%;
  left: 50%;
  width: 100%;
  height: clamp(36px, 8vh, 132px);
  transform: translateX(-50%) scaleY(1);
  transform-origin: center top;
}

.tagline__row:nth-child(3) .tagline__word::after {
  left: 100%;
  transform-origin: left center;
  transform: scaleX(1);
}

.tagline__words.is-visible .tagline__row:nth-child(1) .tagline__word::after,
.tagline__words.is-visible .tagline__row:nth-child(3) .tagline__word::after {
  transform: scaleX(0);
}

.tagline__words.is-visible .tagline__row:nth-child(2) .tagline__word::after {
  transform: translateX(-50%) scaleY(0);
}

@media (max-width: 600px) {
  .tagline__words {
    grid-column: 1 / -1;
    gap: var(--space-lg);
  }

  .tagline__row {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .tagline__word {
    --word-enter-x: 0 !important;
    --word-enter-y: 8vh !important;
  }

  .tagline__word::after {
    left: 50%;
    top: 100%;
    right: auto;
    bottom: auto;
    width: clamp(80px, 24vw, 180px);
    height: clamp(16px, 3vw, 36px);
    transform: translateX(-50%) scaleY(1);
    transform-origin: center top;
  }

  .tagline__words.is-visible .tagline__word::after {
    transform: translateX(-50%) scaleY(0);
  }
}


/* ── The Shift ──────────────────────────────────────────────── */
.section--shift {
  background-color: var(--color-fg);
  color: var(--color-white);
  padding-block: var(--space-4xl);
  min-height: clamp(420px, 56vw, 760px);
  --shift-video-gap: var(--space-6xl);
}

.shift__inner {
  min-height: inherit;
  align-content: center;
  row-gap: var(--shift-video-gap);
}

.shift__line {
  font-family: var(--font-primary);
  font-size: var(--text-5xl);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-white);
  margin: 0;
  max-width: 24ch;
}

.shift__line--statement {
  display: block;
  max-width: none;
  grid-column: 2 / span 7;
}

.shift__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-inline: 0.08em;
  font-family: var(--font-primary);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

.shift__brand > span {
  display: inline-block;
  padding: 0.04em 0.2em 0.02em;
  background-color: var(--color-white);
  color: var(--color-black);
}

.shift__wordmarks {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin-right: 0.06em;
}

.shift__wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  color: var(--color-fg);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--text-6xl);
  line-height: 1;
  padding: 0.06em 0.2em 0.04em;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.shift__statement {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12em;
}

.shift__target {
  position: relative;
  display: inline-block;
  line-height: 1;
  margin-left: 0.03em;
  vertical-align: baseline;
  --shift-overlay-size: var(--text-5xl);
  --shift-sketch-top: 0.48em;
  --shift-alt-top: 0.4em;
  --shift-alt-left: 0.3em;
  --shift-alt-rotate: 4deg;
}

.shift__target-base {
  position: relative;
  display: inline-block;
}

.shift__target-sketch {
  position: absolute;
  left: 50%;
  top: var(--shift-sketch-top);
  font-family: "MANIC-Sketches", sans-serif;
  font-size: var(--shift-overlay-size);
  line-height: 1;
  color: var(--color-accent);
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: nowrap;
}

.shift__target-alt {
  position: absolute;
  left: var(--shift-alt-left);
  top: var(--shift-alt-top);
  font-family: "MANIC-Alternates3", sans-serif;
  font-size: var(--shift-overlay-size);
  line-height: 1;
  color: var(--color-accent);
  transform: rotate(var(--shift-alt-rotate));
  transform-origin: left top;
  pointer-events: none;
  white-space: nowrap;
}

.shift__video {
  grid-column: 2 / span 10;
  position: relative;
  margin-top: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  --play-offset-y: 0px;
}

.shift__video iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.shift__video-play {
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  
}

.shift__video-play-label {
  position: absolute;
  left: var(--play-x, 50%);
  top: calc(var(--play-y, 50%) + var(--play-offset-y, 0px));
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.08em 0.26em 0.04em;
  background-color: var(--color-black);
  font-family: var(--font-primary);
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-white);
  pointer-events: none;
  white-space: nowrap;
}

.shift__video-play.is-hidden {
  display: none;
}

.demo-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: var(--color-black-a80);
  z-index: 1200;
}

.demo-lightbox.is-open {
  display: flex;
}

.demo-lightbox__panel {
  width: min(1100px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.demo-lightbox__close {
  align-self: flex-end;
}

.demo-lightbox__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-black);
  overflow: hidden;
}

.demo-lightbox__video iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

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

@media (max-width: 768px) {
  .section--shift {
    --shift-video-gap: 0px;
  }

  .shift__line {
    font-size: clamp(1.7rem, 8vw, 2.5rem);
  }

  .shift__line--statement {
    grid-column: 1 / -1;
  }

  .shift__target {
    --shift-overlay-size: clamp(1.3rem, 6vw, 2rem);
    --shift-sketch-top: 0.45em;
    --shift-alt-top: 0.88em;
    --shift-alt-left: 0.1em;
  }

  .shift__video {
    grid-column: 1 / -1;
    margin-top: var(--space-3xl);
    --play-offset-y: 0px;
  }

  .shift__video-play-label {
    font-size: clamp(2rem, 12vw, var(--text-5xl));
  }

  .demo-lightbox {
    padding: var(--space-sm);
  }
}


/* ── Work ───────────────────────────────────────────────────── */
.work__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.work__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  grid-column: span 4;
}

.work__item-media {
  aspect-ratio: 16 / 10;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.work__item-title {
  font-family: var(--font-primary);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
}

.work__item-desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-normal);
}

@media (max-width: 900px) {
  .work__item {
    grid-column: span 6;
  }
}

@media (max-width: 600px) {
  .work__item {
    grid-column: span 12;
  }
}


/* ── Contact ────────────────────────────────────────────────── */
.section--contact {
  background-color: var(--color-surface);
  text-align: center;
}

.contact__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  grid-column: 1 / -1;
}


/* ────────────────────────────────────────────────────────────
   7. Footer
   ──────────────────────────────────────────────────────────── */
.footer {
  background-color: var(--color-accent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(320px, 62vw, 895px);
  overflow: hidden;
}

/* Top info bar */
.footer__top {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-md);
  align-items: start;
  padding: var(--space-md) var(--container-pad);
}

.footer__tagline,
.footer__address {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-fg);
  display: flex;
  align-items: center;
  gap: 0.4ch;
  flex-wrap: wrap;
}

.footer__tagline {
  grid-column: 1 / span 5;
}

.footer__address {
  grid-column: 6 / span 4;
}

.footer__nav {
  grid-column: 10 / -1;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
}

.footer__link {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-fg);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.footer__link:hover {
  color: var(--color-white);
  opacity: 1;
}

.footer__link--bracket::before {
  content: "[ ";
}

.footer__link--bracket::after {
  content: " ]";
}

/* Large INDY / RIOT wordmarks */
.footer__wordmarks {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  width: 100%;
  padding-inline: var(--container-pad);
  margin-bottom: 16px;
}

.footer__wordmark {
  grid-column: span 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-fg);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(3rem, 19.5vw, 20rem);
  line-height: 1;
  padding: 0.06em 0.07em 0.04em;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

@media (max-width: 920px) {
  .footer {
    min-height: 100svh;
  }

  .footer__top {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: var(--grid-gap);
    row-gap: var(--space-lg);
    align-items: start;
    padding: var(--space-lg) var(--container-pad) 0;
  }

  .footer__tagline {
    grid-column: 1 / -1;
    order: 1;
    display: block;
    margin: 0;
  }

  .footer__tagline .footer__link--bracket {
    white-space: nowrap;
  }

  .footer__nav {
    grid-column: 1 / -1;
    order: 2;
    width: 100%;
    display: flex;
    gap: var(--space-lg);
  }

  .footer__address {
    grid-column: 1 / -1;
    order: 3;
    align-self: end;
    display: flex;
    align-items: center;
    gap: 0.4ch;
    flex-wrap: wrap;
    margin: 0;
    padding-bottom: var(--space-sm);
  }

  .footer__address .footer__link:first-child {
    display: inline;
  }

  .footer__address .footer__link--bracket {
    display: inline-flex;
    margin-top: 0;
  }

  .footer__wordmarks {
    row-gap: 16px;
  }

  .footer__wordmark {
    grid-column: 1 / -1;
    font-size: clamp(4rem, 31vw, 12rem);
  }
}


/* ────────────────────────────────────────────────────────────
   8. Utilities
   ──────────────────────────────────────────────────────────── */

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ================================================================
   deck-driven sections — added 2026-04-08
   classes used by index2.html only; do not modify existing rules
   ================================================================ */

/* ── Generic eyebrow / bracket label ─────────────────────────── */
.bracket-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
}
.bracket-label::before { content: "[ "; }
.bracket-label::after  { content: " ]"; }

/* ── Word-chip lockups ───────────────────────────────────────── */
/* Default: white chip with black text — use on red, mute, photo bgs */
.word-chip {
  display: inline-block;
  background-color: var(--color-white);
  color: var(--color-fg);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  padding: 0.06em 0.22em 0.04em;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 100%;
  white-space: nowrap;
}

/* Inverse: black chip with white text — use on white/mute bgs */
.word-chip--inv {
  background-color: var(--color-fg);
  color: var(--color-white);
}

/* Chip-line lockups (a flex row of word-chips with a font-size set on the row) */
.chip-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.18em 0.28em;
  font-family: var(--font-primary);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}
.chip-line--xl  { font-size: clamp(2.2rem, 7.5vw, 5.5rem); }
.chip-line--lg  { font-size: clamp(1.8rem, 5.4vw, 3.6rem); }
.chip-line--md  { font-size: clamp(1.3rem, 3vw,   2.2rem); }
.chip-line--sm  { font-size: clamp(0.95rem, 1.6vw, 1.4rem); }

/* ── Handwritten / scribble overlay ──────────────────────────── */
.scribble {
  display: inline-block;
  font-family: "MANIC-Alternates1", "MANIC", "Caveat", "Permanent Marker", cursive;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
}
.scribble--alt {
  font-family: "MANIC-Alternates3", "MANIC-Alternates2", "MANIC", cursive;
}
.scribble--accent { color: var(--color-accent); }

/* Circled scribble — for the "more" / "owned" treatment */
.scribble--circled {
  position: relative;
  display: inline-block;
  padding: 0 0.25em;
}
.scribble--circled::before {
  content: "";
  position: absolute;
  inset: -0.18em -0.05em -0.12em -0.05em;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: rotate(-3deg);
  pointer-events: none;
}

/* ── 2. Problem ───────────────────────────────────────────────── */
.section--problem {
  background-color: var(--color-black);
  color: var(--color-white);
  min-height: var(--section-min-h);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.problem__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max-deck);
  min-height: 80svh;
  margin-inline: auto;
  padding: var(--space-2xl) var(--container-pad);
}

/* Headline lockup laid out on a 12-col grid, matching Figma chip placements */
.problem__lockup {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: clamp(0.3rem, 2.8vw, 3.8rem);
  width: 100%;
  align-items: center;
  /* Vertically centered within the inner box via justify-self on parent */
}

/* Giant headline chip size — shared by Problem and Close lockups.
   Min of 2rem ensures it stays readable; vw scales to fit viewport. */
.problem__lockup .word-chip,
.close__headline .word-chip {
  font-size: clamp(2rem, 10.5vw, 8.5rem);
  padding: 0.05em 0.2em 0.02em;
}

/* Per-chip placements (1-indexed grid columns) — balanced around center */
.problem__chip--big    { grid-column:  1 / span 4; grid-row: 1; justify-self: start;  }
.problem__chip--tech   { grid-column:  1 / -1;     grid-row: 1; justify-self: center; }
.problem__chip--is     { grid-column:  9 / span 4; grid-row: 1; justify-self: end;    }
.problem__chip--not    { grid-column:  1 / span 5; grid-row: 2; justify-self: start;  }
.problem__chip--on     { grid-column:  8 / span 5; grid-row: 2; justify-self: end;    }
.problem__chip--musics { grid-column:  1 / span 7; grid-row: 3; justify-self: start;  }
.problem__chip--side   { grid-column:  7 / span 6; grid-row: 3; justify-self: end;    }

/* Bottom-right handwritten scribble — lives inside the lockup grid
   so it overlaps the bottom-right chips at every viewport. */
.problem__scribble {
  grid-column: 6 / -1;
  grid-row: 4;
  align-self: end;
  justify-self: end;
  position: relative;
  margin-top: -0.6em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05em;
  color: var(--color-accent);
  font-family: "MANIC-Alternates1", "MANIC", cursive;
  font-size: clamp(2.6rem, 7vw, 6.3rem);
  line-height: 0.95;
  text-align: right;
  transform: rotate(-2deg);
  transform-origin: right center;
  pointer-events: none;
}
.problem__scribble span { display: block; }
.problem__scribble .alt2 { font-family: "MANIC-Alternates2", "MANIC", cursive; }

/* Three corner notes, anchored to the section corners */
.problem__corner {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-primary);
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  font-weight: 400;
  line-height: var(--leading-snug);
  max-width: 22ch;
  color: var(--color-white);
}
.problem__corner-mark {
  display: inline-block;
  font-family: "MANIC-Sketches", sans-serif;
  font-size: clamp(2.2rem, 5.5vw, 5rem);
  line-height: 1;
  color: var(--color-white);
  pointer-events: none;
}
.problem__corner--tl {
  top: clamp(var(--space-xl), 5vw, var(--space-3xl));
  left: clamp(var(--space-xl), 5vw, var(--space-3xl));
}
.problem__corner--tr {
  top: clamp(var(--space-2xl), 11vw, 11rem);
  right: clamp(var(--space-xl), 5vw, var(--space-3xl));
  flex-direction: row-reverse;
  text-align: right;
}
.problem__corner--tr .problem__corner-mark {
  transform: rotate(92deg);
  display: inline-block;
}
.problem__corner--bl {
  bottom: clamp(var(--space-xl), 5vw, var(--space-3xl));
  left: clamp(var(--space-xl), 5vw, var(--space-3xl));
}

@media (max-width: 900px) {
  .problem__lockup .word-chip,
  .close__headline .word-chip { font-size: clamp(2.4rem, 11vw, 5.5rem); }
  .problem__chip--big    { grid-column: 1 / span 5; }
  .problem__chip--tech   { grid-column: 4 / span 6; }
  .problem__chip--is     { grid-column: 9 / -1;     }
  .problem__chip--not    { grid-column: 1 / span 5; }
  .problem__chip--on     { grid-column: 7 / -1;     }
  .problem__chip--musics { grid-column: 1 / span 8; }
  .problem__chip--side   { grid-column: 6 / -1;     }
  .problem__scribble { font-size: clamp(2.4rem, 9vw, 4.5rem); }
}
@media (max-width: 600px) {
  .section--problem { min-height: auto; padding-block: var(--space-4xl); }
  .problem__inner { min-height: 70svh; padding: var(--space-xl) var(--container-pad); }
  .problem__corner {
    position: static;
    max-width: none;
    margin-bottom: var(--space-md);
  }
  .problem__corner--tr { flex-direction: row; text-align: left; }
}

/* ── 3. Category strap ────────────────────────────────────────── */
.section--category {
  background-color: var(--color-fg);
  color: var(--color-white);
  padding-block: var(--space-3xl);
}
.category__inner {
  width: 100%;
  max-width: var(--container-max-deck);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: center;
}
.category__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3em 0.5em;
  font-family: var(--font-primary);
  text-align: center;
}
.category__chip {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
}
.category__scribble {
  font-size: clamp(2rem, 5vw, 3.6rem);
  color: var(--color-white);
}

/* ── 4. The Shift split ──────────────────────────────────────── */
.section--shift-split {
  background-color: var(--color-grey);
  color: var(--color-fg);
  position: relative;
  overflow: hidden;
  min-height: var(--section-min-h);
  display: flex;
  align-items: center;
}
.shift-split__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max-deck);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.shift-split__backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
  font-family: "MANIC-Alternates1", "MANIC", cursive;
  font-size: clamp(4.5rem, 16vw, 14rem);
  line-height: 0.92;
  color: var(--color-white);
  text-align: center;
  white-space: pre-line;
  user-select: none;
}
.shift-split__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  z-index: 1;
}
.shift-split__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.shift-split__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2em 0.3em;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  text-transform: uppercase;
  line-height: 1;
}
.shift-split__eyebrow {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.shift-split__lede {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-fg);
  margin-top: var(--space-sm);
}
.shift-split__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.shift-split__list li {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--color-fg);
  padding-left: 1.1em;
  position: relative;
}
.shift-split__list li::before { content: "•"; position: absolute; left: 0; }

@media (max-width: 768px) {
  .section--shift-split { min-height: auto; padding-block: var(--space-4xl); }
  .shift-split__grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .shift-split__backdrop { opacity: 0.45; font-size: clamp(3rem, 18vw, 7rem); }
}

/* ── 5. For Artists ──────────────────────────────────────────── */
.section--for-artists {
  background-color: var(--color-black);
  color: var(--color-white);
  background-image:
    linear-gradient(var(--color-black-a30), var(--color-black-a30)),
    url("assets/images/for-artists.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: var(--section-min-h);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.for-artists__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max-deck);
  margin-inline: auto;
  padding: var(--space-2xl) var(--container-pad);
  min-height: 75svh;
}
.for-artists__chip {
  position: absolute;
  display: inline-block;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(3.5rem, 12vw, 11rem);
  line-height: 0.9;
  padding: 0.04em 0.18em 0.02em;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.for-artists__chip--for     { top: 0;    left: var(--container-pad); }
.for-artists__chip--artists { bottom: 0; right: var(--container-pad); }
.for-artists__scribble {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  font-family: "MANIC-Alternates1", "MANIC", cursive;
  font-size: clamp(2rem, 6.5vw, 5.5rem);
  line-height: 1.05;
  color: var(--color-white);
  text-align: center;
  max-width: 90vw;
}
.for-artists__scribble-more {
  display: inline-block;
  font-family: "MANIC-Alternates3", cursive;
  position: relative;
  padding: 0 0.3em;
}
.for-artists__scribble-more::before {
  content: "";
  position: absolute;
  inset: -0.05em -0.05em -0.05em -0.05em;
  border: 3px solid currentColor;
  border-radius: 50%;
  transform: rotate(-4deg);
  pointer-events: none;
}

@media (max-width: 768px) {
  .section--for-artists { min-height: 90svh; }
  .for-artists__inner { min-height: 80svh; }
}

/* ── 6. Superfans ────────────────────────────────────────────── */
.section--superfans {
  background-color: var(--color-fg);
  color: var(--color-white);
  min-height: var(--section-min-h);
  display: flex;
  align-items: center;
}
.superfans__inner {
  width: 100%;
  max-width: var(--container-max-deck);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}
.superfans__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
/* Superfans bracket label uses the same handwritten styling as the
   For Artists scribble — keeps the [ ] brackets from .bracket-label
   but swaps the font and size. */
.superfans__left .bracket-label {
  font-family: "MANIC-Alternates1", "MANIC", cursive;
  font-size: clamp(2rem, 6.5vw, 5.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  color: var(--color-white);
}
.superfans__stat {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(7rem, 22vw, 18rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--color-white);
}
.superfans__lede {
  font-family: var(--font-primary);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight: 400;
  line-height: var(--leading-snug);
  max-width: 24ch;
}
.superfans__ladder {
  display: flex;
  flex-direction: column;
}
.ladder__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: baseline;
  border-top: 1px solid var(--color-white-a20);
  padding-block: var(--space-md);
}
.ladder__title {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.ladder__note {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--color-inverse-body);
}

@media (max-width: 900px) {
  .superfans__inner { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .section--superfans { min-height: auto; padding-block: var(--space-4xl); }
}

/* ── 7. Inside ───────────────────────────────────────────────── */
.section--inside {
  background-color: var(--color-grey);
  color: var(--color-fg);
}
.inside__inner {
  width: 100%;
  max-width: var(--container-max-deck);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2xl);
}
.inside__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  font-family: var(--font-primary);
}
.inside__headline-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.18em 0.28em;
  font-size: clamp(2rem, 5.4vw, 3.8rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}
.inside__scribble {
  font-family: "MANIC-Alternates1", "MANIC", cursive;
  font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  line-height: 1;
  color: var(--color-fg);
  transform: rotate(-2deg);
}
.inside__features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.inside__feature {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.4rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  background-color: var(--color-fg);
  color: var(--color-white);
  padding: 0.55em 0.75em 0.45em;
}

/* ── 8. Proof — Sustainability + Closeness sub-sections ─────── */
.section--proof {
  background-color: var(--color-fg);
  color: var(--color-white);
}
.proof__inner {
  width: 100%;
  max-width: var(--container-max-deck);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-3xl), 8vw, var(--space-5xl));
}

/* A "group" is one themed sub-section (Sustainability, Closeness).
   It's a 2-col grid where each column independently stacks header
   (optional) → figure → caption. Because grid items align to start,
   the column without a header naturally rises higher than the one
   with a header — that's the staggered look in the deck. */
.proof__group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-2xl), 5vw, var(--space-3xl));
  align-items: start;
}

.proof__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Header lives inside one of the columns, not above the grid */
.proof__group-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  max-width: 32ch;
  margin-bottom: var(--space-md);
}
.proof__group-label {
  display: inline-block;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding: 0.1em 0.22em 0.04em;
  transform: rotate(-3deg);
  transform-origin: left center;
}
.proof__group-label--right { transform: rotate(3deg); }

.proof__group-lede {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-white);
  max-width: 28ch;
}


/* A single case study */
.proof__case {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: relative;
}

.proof__case-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform: rotate(var(--proof-rot, -1.3deg));
  transform-origin: center;
}
.proof__case--rot-r .proof__case-figure { --proof-rot:  2deg; }
.proof__case--rot-l .proof__case-figure { --proof-rot: -1.3deg; }

/* Wide-format figures (Turbonegro is landscape, not square) */
.proof__case-figure--wide { aspect-ratio: 4 / 3; }

.proof__case-photo {
  position: absolute;
  inset: 0;
  background-color: var(--color-white-a10);
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.05);
}

/* Black artist-name chips overlaid on the photo */
.proof__case-names {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  gap: 0.18em 0.22em;
  z-index: 2;
}
.proof__case-name {
  display: inline-block;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 2.2rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding: 0.1em 0.28em 0.06em;
  white-space: nowrap;
}
.proof__case-names--bottom-left { bottom: 18%; left: 8%; }
.proof__case-names--mid-right   { top: 42%;    right: 6%; }
.proof__case-names--mid         { top: 50%;    left: 50%; transform: translate(-50%, -50%); }

/* Handwritten stat scribble overlaid on the figure */
.proof__case-stat {
  position: absolute;
  font-family: "MANIC-Alternates3", "MANIC-Alternates1", "MANIC", cursive;
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  line-height: 1;
  color: var(--color-white);
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  text-align: left;
}
.proof__case-stat span { display: block; }
.proof__case-stat .alt2 { font-family: "MANIC-Alternates2", "MANIC", cursive; }
.proof__case-stat .alt1 { font-family: "MANIC-Alternates1", "MANIC", cursive; }

/* Stat positions per card — all sit ON the photo, not above */
.proof__case-stat--tr { top:  6%;  right: 4%; transform: rotate(-5deg); text-align: right; }
.proof__case-stat--tl { top:  4%;  left:  6%; transform: rotate(5deg);  }
.proof__case-stat--bl { bottom: 8%; left:  6%; transform: rotate(-6deg); }
.proof__case-stat--br { bottom: 8%; right: 6%; transform: rotate(4deg);  text-align: right; }

/* Vertically centered, positioned just right of horizontal middle, right-aligned (Tee Production) */
.proof__case-stat--right-mid {
  top: 20%;
  left: 52%;
  transform: translateY(-50%) rotate(-4deg);
  transform-origin: left center;
  text-align: right;
}

/* Bottom-anchored, horizontally centered (Manga "99% / FAN CONTENT") */
.proof__case-stat--bottom-center {
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  transform-origin: center bottom;
  text-align: center;
}

/* Description text below the figure */
.proof__case-note {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-white);
  font-weight: 400;
  max-width: 32ch;
}
.proof__case-note strong { font-weight: 700; }

@media (max-width: 900px) {
  .proof__group { grid-template-columns: 1fr; gap: var(--space-3xl); }
  .proof__group-label { transform: rotate(-1deg); }
  .proof__group-label--right { transform: rotate(1deg); }
}
@media (max-width: 600px) {
  .proof__case-figure { transform: rotate(0deg); }
  .proof__case-stat { font-size: clamp(1.4rem, 6vw, 2.2rem); }
}

/* ── 9. Product — sticky INDY / RIOT side chips ─────────────────
   Standard vertical scroll. INDY and RIOT are position: sticky inside
   .product__rail and ride the viewport's vertical centre. The rail
   ends at the vertical midpoint of the collage image, so the chips
   release exactly when the middle of the collage hits the viewport
   centre. We achieve this by pulling the figure up with negative
   bottom margin equal to half its rendered height, then adding the
   same amount back as section padding-bottom so the next section
   doesn't overlap. */
.section--product {
  --product-collage-w: min(86vw, 1100px);
  --product-collage-h: calc(var(--product-collage-w) * (1053 / 1145));
  --product-collage-half: calc(var(--product-collage-h) / 2);

  /* Approximate half-height of the chip stack — used as margin-top on
     the sticky side chips so their natural (pre-stick) position is the
     vertical centre of the chip rows rather than the top. Tracks the
     chip font-size's clamp() so it stays in proportion. */
  --product-chips-half: clamp(5rem, 13vw, 11rem);

  background-color: var(--color-grey);
  color: var(--color-fg);
  position: relative;
  padding-top: var(--space-4xl);
  /* Compensate for the -half negative margin on .product__collage-wrap
     so the next section starts where it normally would. */
  padding-bottom: calc(var(--space-4xl) + var(--product-collage-half));
}
.product__inner {
  width: 100%;
  max-width: var(--container-max-deck);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Rail = 3-column grid [ INDY | content | RIOT ]. The INDY and RIOT
   grid cells hold chips that are position: sticky, top: 50svh, so
   they ride the viewport centre; they release when the rail ends. */
.product__rail {
  display: grid;
  /* Equal-width side columns keep the middle column perfectly centred,
     even though "INDY" and "RIOT" have different character widths. */
  grid-template-columns: 1fr minmax(0, 8fr) 1fr;
  align-items: start;
  column-gap: clamp(var(--space-md), 2vw, var(--space-xl));
  row-gap: var(--space-4xl);
}

/* INDY / RIOT side chips — sticky to viewport vertical centre.
   Each lives in its own grid cell, so they don't interfere with the
   rows/figure in the middle column. The margin-top pushes their
   natural (pre-stick) position down to the chip-rows midpoint. */
.product__side {
  position: sticky;
  top: 50svh;
  transform: translateY(-50%);
  align-self: start;
  margin-top: var(--product-chips-half);
  background-color: var(--color-fg);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  padding: 0.06em 0.22em 0.04em;
  white-space: nowrap;
  z-index: 3;
}
.product__side--left  { grid-column: 1; grid-row: 1 / span 2; justify-self: start; }
.product__side--right { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }

/* Middle column: chip rows occupy row 1, collage occupies row 2 */
.product__rows {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--space-md), 2.4vw, var(--space-xl));
  width: 100%;
}
.product__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.2em, 0.4vw, 0.5em);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(var(--row-rot, 0deg));
  transform-origin: center;
}
.product__row:nth-child(1) { --row-rot:  1.2deg; }
.product__row:nth-child(2) { --row-rot: -0.8deg; }
.product__row:nth-child(3) { --row-rot:  1.6deg; }
.product__row:nth-child(4) { --row-rot: -1.4deg; }
.product__row:nth-child(5) { --row-rot:  0.6deg; }
.product__row:nth-child(6) { --row-rot: -1.8deg; }

/* Collage figure sits in middle column, row 2.
   background.png is 1145×1053 (height/width ≈ 0.92).
   margin-bottom is negative half the figure's rendered height, which
   pulls the rail's bottom edge up to the figure's vertical centre —
   that's where the sticky INDY / RIOT release. The matching positive
   padding-bottom on .section--product cancels the visual displacement
   so the next section doesn't overlap. */
.product__collage-wrap {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  width: 100%;
  max-width: var(--product-collage-w);
  margin-inline: auto;
  margin-bottom: calc(var(--product-collage-half) * -1);
}
.product__collage {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.product__callout {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  font-family: "MANIC-Alternates1", "MANIC", cursive;
  font-size: clamp(6rem, 4.8vw, 6rem);
  line-height: 1;
  color: var(--color-white);
  text-align: center;
  max-width: 90%;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  margin: 0;
}
.product__callout span { display: block; }

@media (max-width: 900px) {
  .product__side,
  .product__row  { font-size: clamp(1.2rem, 5vw, 2.2rem); }
}
@media (max-width: 600px) {
  .product__row { flex-wrap: wrap; }
  /* Stack chips above/below rather than overlap */
  .product__side {
    position: static;
    transform: none;
    margin: 0 auto;
  }
}

/* ── 10. How we work ─────────────────────────────────────────── */
.section--how {
  background-color: var(--color-grey);
  color: var(--color-fg);
}
.how__inner {
  width: 100%;
  max-width: var(--container-max-deck);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.how__head {
  max-width: 60ch;
  margin-bottom: var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.how__heading {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--color-fg);
}
.how__lede {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  color: var(--color-fg);
  max-width: 50ch;
}
.how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
}
.how__col { display: flex; flex-direction: column; gap: var(--space-md); }
.how__col-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-family: var(--font-primary);
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  font-weight: 700;
  text-transform: uppercase;
}
.how__col-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.how__col-list li {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  color: var(--color-fg);
  padding-left: 1.1em;
  position: relative;
}
.how__col-list li::before { content: "•"; position: absolute; left: 0; }

@media (max-width: 900px) { .how__grid { grid-template-columns: 1fr; gap: var(--space-xl); } }

/* ── 11. Pricing ─────────────────────────────────────────────── */
.section--pricing {
  background-color: var(--color-grey);
  color: var(--color-fg);
}
.pricing__inner {
  width: 100%;
  max-width: var(--container-max-deck);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}
.pricing__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.pricing__head {
  font-family: var(--font-primary);
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}
.pricing__head-fair {
  font-family: "MANIC-Alternates1", "MANIC", cursive;
  font-weight: normal;
  display: inline-block;
  margin-left: 0.4em;
}
.pricing__amount {
  font-family: var(--font-primary);
  font-size: clamp(5rem, 12vw, 11rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-fg);
}
.pricing__amount-note {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--color-muted);
  margin-top: var(--space-sm);
}
.pricing__cta {
  margin-top: var(--space-lg);
  align-self: flex-start;
}
.pricing__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.pricing__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}
.pricing__list li {
  display: inline-block;
  background-color: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding: 0.55em 0.75em 0.45em;
}

@media (max-width: 900px) {
  .pricing__inner { grid-template-columns: 1fr; gap: var(--space-2xl); }
}

/* ── 12. Closing CTA ─────────────────────────────────────────── */
.section--close {
  background-color: var(--color-surface);
  color: var(--color-white);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: var(--section-min-h);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.close__inner {
  width: 100%;
  max-width: var(--container-max-deck);
  padding: var(--space-3xl) var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
}
.close__headline {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(0.3rem, 0.8vw, 0.8rem);
}
/* Each row spreads its two chips to the row's edges (justified).
   Never wraps — the vw-based font size handles scaling. */
.close__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-gap);
  width: 100%;
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1;
}
/* Override the shared chip size for the close section so it
   scales purely on viewport width — no fixed min that could overflow. */
.close__headline .word-chip {
  font-size: clamp(2rem, 8.5vw, 8.5rem);
}


/* ================================================================
   Scroll reveal — punk / hard-edge entrance animations
   ================================================================ */

/* Base: hidden, offset, rotated. Transition fires when .is-revealed is added. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(var(--reveal-x, 0), var(--reveal-y, 40px), 0)
             rotate(var(--reveal-r, 0deg));
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

/* Direction variants — sharp offsets + slight rotation for punk feel */
[data-reveal="up"]    { --reveal-y:  60px; --reveal-r:  1.5deg; }
[data-reveal="down"]  { --reveal-y: -50px; --reveal-r: -2deg;   }
[data-reveal="left"]  { --reveal-x: -80px; --reveal-y: 0; --reveal-r:  2deg; }
[data-reveal="right"] { --reveal-x:  80px; --reveal-y: 0; --reveal-r: -1.5deg; }
[data-reveal="slam"]  { --reveal-y: 100px; --reveal-r:  3deg;
                         transition-duration: 400ms; }

/* Stagger children inside a reveal group */
[data-reveal-stagger] > [data-reveal] {
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
}

/* Respect reduced-motion — no animation, just show immediately */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}