/* ═══════════════════════════════════════════════════════════════════════════
   ALPHA6 — ADVANCED VIDEO PRODUCTION  (light theme)
   1. Tokens          5. Timeline scrubber
   2. Reset & base    6. Captions & finale
   3. Nav & hero      7. Content sections
   4. Stage / monitor 8. Viewer, responsive, a11y
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1. Tokens ─────────────────────────── */
:root {
  /* Warm paper rather than pure white — less glare behind a dark monitor. */
  --paper: #f4f2ee;
  --paper-2: #eceae4;
  --paper-3: #e2ded6;
  --ink: #14161a;
  --ink-soft: #5c6169;
  --stage: #0b0d11;
  /* the monitor interior; matches the canvas clear */
  --accent: #dc4a16;
  /* the warm streaks that run through the footage */
  --line: rgba(20, 22, 26, 0.13);
  --line-soft: rgba(20, 22, 26, 0.07);

  /* Headline gradient — deep royal blue into violet. Defined once here so
     every gradient headline on the page stays in step. */
  --grad: linear-gradient(100deg, #195fc7 0%, #4a5fbe 45%, #7a6fd0 100%);

  --display: "Century Gothic", "CenturyGothic", "URW Gothic", "Poppins",
    "Avant Garde", "Futura", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gut: clamp(1.25rem, 4vw, 4rem);
  --nav-h: 4.5rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at 15% 10%, rgba(123, 92, 240, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 60%, rgba(0, 179, 164, 0.08) 0%, transparent 40%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

main {
  overflow-x: clip;
  max-width: 100%;
}

.section,
.contact-layout,
.foot-new,
.foot-grid,
.role-cards,
.cta-banner {
  max-width: 100%;
}

.is-locked,
.is-locked body {
  overflow: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
}

p,
ul {
  margin: 0;
}

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

a {
  color: inherit;
}

svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mono {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.rule {
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  margin-right: 0.75rem;
  vertical-align: 0.2em;
  background: var(--accent);
}

.grad-text {
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease), color 0.45s var(--ease);
}

.btn svg {
  width: 0.85em;
  height: 0.85em;
  transition: transform 0.45s var(--ease);
}

.btn--primary {
  background: #00b3a4;
  border-color: #00b3a4;
  color: #fff;
  font-weight: 600;
}

.btn--primary:hover {
  background: #009488;
  border-color: #009488;
}

.btn--ghost:hover {
  border-color: var(--ink);
}

.btn--full {
  width: 100%;
  margin-top: 1.5rem;
}

.btn--sm {
  padding: 0.6rem 1.15rem;
  font-size: 0.8125rem;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

#exploreBtn:hover svg {
  transform: translateY(2px);
}

/* ─────────────────────────── Preloader ─────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--paper);
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}

.loader.is-done {
  opacity: 0;
  visibility: hidden;
}

.loader__inner {
  width: min(20rem, 70vw);
  text-align: center;
}

.loader__label {
  margin-bottom: 1.25rem;
}

.loader__bar {
  height: 2px;
  background: var(--paper-3);
  overflow: hidden;
  border-radius: 2px;
}

.loader__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.35s linear;
}

.loader__count {
  margin-top: 1rem;
  color: var(--ink);
}

.loader__error {
  max-width: 26rem;
  margin: 1.25rem auto 0;
  color: var(--accent);
  font-size: 0.625rem;
  line-height: 1.7;
  text-transform: none;
  letter-spacing: 0.06em;
  word-break: break-all;
}

.protocol-note {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 120;
  padding: 1rem var(--gut);
  background: var(--accent);
  color: #fff;
  text-align: center;
}

.protocol-note .mono {
  color: rgba(255, 255, 255, 0.85);
}

/* ─────────────────────────── 3. Nav & hero ─────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  height: var(--nav-h);
  padding: 0 var(--gut);
  background: rgba(244, 242, 238, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  /* Backstop: whatever happens to the logo artwork, nothing inside the bar
     spills past it onto the footage below. */
  overflow: hidden;
}

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* Sizing lives in one place only — the "NAV LOCKUP" rule further down, with
   its mobile breakpoints. This page's markup uses `.nav__logo-img` for the
   WHOLE logo image (a wide lockup, not a small icon), so it must scale by
   height with width:auto, same as `.nav__logo` on the other course pages.
   An unconditional height:4rem rule used to sit here too, which — combined
   with a second, conflicting `.nav__logo-img` rule further down forcing a
   fixed small square — meant no breakpoint could reliably apply. Removed;
   see the single consolidated rule near "NAV LOCKUP". */

.nav__links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1.6rem;
}

.nav__links a {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.35s var(--ease);
}

.nav__links a:hover {
  color: var(--ink);
}

@media (max-width: 1200px) {
  .nav__links {
    gap: 1.1rem;
  }

  .nav__links a {
    font-size: 0.625rem;
  }
}

@media (max-width: 980px) {
  .nav__links {
    gap: 0.85rem;
  }

  .nav__links a {
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
  }
}

.nav__cta {
  display: inline-flex;
  flex: none;
  margin-left: auto;
  white-space: nowrap;
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 2rem) var(--gut) 5rem;
}

.hero__inner {
  width: min(74rem, 100%);
}

.hero__eyebrow {
  margin-bottom: clamp(1.25rem, 3.5vh, 2.5rem);
}

.hero__title {
  font-size: clamp(2.6rem, 9.5vw, 8.5rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}

.hero__line>span {
  display: block;
}

.hero__line:nth-child(3)>span {
  color: var(--accent);
}

.hero__sub {
  max-width: 34rem;
  margin-top: clamp(1.25rem, 3.5vh, 2.25rem);
  color: var(--ink-soft);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  font-weight: 300;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  margin-top: clamp(2rem, 6vh, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
}

.hero__stats b {
  display: block;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 600;
}

.hero__stats span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.625rem;
}

.hero__scroll {
  position: absolute;
  right: var(--gut);
  bottom: 2rem;
  font-size: 0.625rem;
  writing-mode: vertical-rl;
}

.hero__scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 2.5rem;
  margin: 0.75rem auto 0;
  background: linear-gradient(var(--ink-soft), transparent);
}

/* ─────────────────────────── 4. Stage / monitor ─────────────────────────── */
.sequence {
  position: relative;
  height: 950svh;
}

.sequence {
  background: var(--stage);
}

.sequence__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  background: var(--stage);
}

.stage {
  position: absolute;
  inset: 0;
}

.stage__monitor {
  position: absolute;
  inset: 0;
}

.frames {
  display: block;
  width: 100%;
  height: 100%;
}

.stage__gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(11, 13, 17, 0.55) 0%, transparent 18%),
    linear-gradient(to top, rgba(11, 13, 17, 0.85) 0%, rgba(11, 13, 17, 0.35) 26%, transparent 48%);
}

.hud {
  position: absolute;
  inset: calc(var(--nav-h) * 0.9) var(--gut) 2rem;
  pointer-events: none;
  opacity: 0;
}

.hud__bracket {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.26);
}

.hud__bracket--tl {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}

.hud__bracket--tr {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
}

.hud__bracket--bl {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
}

.hud__bracket--br {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}

.hud__thirds {
  position: absolute;
  inset: 0;
  opacity: 0.3;
}

.hud__thirds span {
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
}

.hud__thirds span:nth-child(1) {
  left: 33.33%;
  top: 0;
  width: 1px;
  height: 100%;
}

.hud__thirds span:nth-child(2) {
  left: 66.66%;
  top: 0;
  width: 1px;
  height: 100%;
}

.hud__thirds span:nth-child(3) {
  top: 33.33%;
  left: 0;
  height: 1px;
  width: 100%;
}

.hud__thirds span:nth-child(4) {
  top: 66.66%;
  left: 0;
  height: 1px;
  width: 100%;
}

/* ─────────────────────────── 5. Timeline scrubber ─────────────────────────── */
.timeline {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  bottom: 1.4rem;
  pointer-events: none;
}

.timeline__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.timeline__meta p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  color: rgba(242, 245, 247, 0.6);
}

.timeline__meta b {
  color: #f2f5f7;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.timeline__meta em {
  font-style: normal;
  opacity: 0.6;
}

.timeline__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--accent);
  animation: rec 1.6s ease-in-out infinite;
}

@keyframes rec {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}

.timeline__tracks {
  position: relative;
  padding: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.4rem;
  background: rgba(11, 13, 17, 0.55);
  backdrop-filter: blur(8px);
}

.timeline__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.timeline__row+.timeline__row {
  margin-top: 0.3rem;
}

.timeline__label {
  flex: none;
  width: 1.5rem;
  font-size: 0.5625rem;
  color: rgba(242, 245, 247, 0.45);
}

.timeline__track {
  position: relative;
  flex: 1;
  height: 1.25rem;
  border-radius: 0.2rem;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.timeline__clip {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  border-radius: 0.2rem;
  background: rgba(220, 74, 22, 0.3);
  box-shadow: inset 0 0 0 1px rgba(220, 74, 22, 0.5);
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd9c8;
  white-space: nowrap;
  overflow: hidden;
}

.timeline__progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.16);
}

.timeline__track--audio {
  height: 0.85rem;
}

.timeline__wave {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
      transparent 0 2px, rgba(242, 245, 247, 0.3) 2px 3px,
      transparent 3px 5px, rgba(242, 245, 247, 0.16) 5px 6px);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}

.timeline__playhead {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: calc(2.5rem + (100% - 3rem) * var(--p, 0));
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.timeline__playhead::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--accent);
  border-radius: 1px;
}

/* ─────────────────────────── 6. Captions & finale ─────────────────────────── */
.captions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.caption {
  position: absolute;
  bottom: clamp(9rem, 26vh, 15rem);
  width: min(70rem, 62vw);
  opacity: 0;
  color: #f2f5f7;
}

.caption--left {
  left: var(--gut);
}

.caption--right {
  right: var(--gut);
  text-align: right;
}

.caption__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  color: #ff8a5c;
}

.caption__eyebrow::before {
  content: "";
  width: 0.9rem;
  height: 1px;
  background: var(--accent);
}

.caption--right .caption__eyebrow {
  flex-direction: row-reverse;
}

.caption__title {
  font-size: clamp(3rem, 6vw, 7rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.95),
    0 4px 18px rgba(0, 0, 0, 0.85),
    0 8px 46px rgba(0, 0, 0, 0.7);
  overflow-wrap: break-word;
}

.caption__title span {
  text-shadow: none;
  filter:
    drop-shadow(0 1px 3px rgba(0, 0, 0, 0.95)) drop-shadow(0 4px 18px rgba(0, 0, 0, 0.8));
}

.caption__body {
  margin-top: 1.1rem;
  max-width: 34rem;
  color: rgba(242, 245, 247, 0.75);
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  font-weight: 300;
  line-height: 1.55;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 2px 12px rgba(0, 0, 0, 0.9),
    0 4px 30px rgba(0, 0, 0, 0.75);
}

.caption--right .caption__body {
  margin-left: auto;
}

.finale {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 2.5rem);
  padding: var(--gut);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  color: #f2f5f7;
  background: radial-gradient(70% 60% at 50% 50%, rgba(11, 13, 17, 0.86), rgba(11, 13, 17, 0.55) 70%, rgba(11, 13, 17, 0.25));
}

.finale.is-live {
  pointer-events: auto;
}

.finale__title {
  font-size: clamp(2rem, 6.5vw, 5.5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.finale__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}

.finale__line>span {
  display: block;
}

.finale__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.finale .btn--ghost {
  color: #f2f5f7;
  border-color: rgba(255, 255, 255, 0.25);
}

.finale .btn--ghost:hover {
  border-color: #f2f5f7;
}

/* ─────────────────────────── 7. Content sections ─────────────────────────── */
.section {
  padding: clamp(4.5rem, 12vh, 9rem) var(--gut);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.section--alt {
  background: var(--paper-2);
}

.section>.section__head {
  max-width: 70rem;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 7vh, 4.5rem);
}

.section>.section__head>* {
  max-width: 48rem;
}

.section__head {
  max-width: 48rem;
  margin-bottom: clamp(2.5rem, 7vh, 4.5rem);
}

.section__eyebrow {
  margin-bottom: 1.25rem;
  color: #00b3a4;
}

.section__eyebrow .rule {
  background: #00b3a4;
}

.section__title {
  font-size: clamp(1.75rem, 4.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.section__lede {
  margin-top: 1.25rem;
  color: var(--ink-soft);
  font-weight: 300;
}

.ticks {
  display: grid;
  gap: 0.55rem;
}

.ticks li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.5;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: #00b3a4;
}

/* ─── Marquee ─── */
.marquee {
  width: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 1rem 0;
}

.marquee__track {
  display: flex;
  width: max-content;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-right: 2rem;
  animation: scroll 20s linear infinite;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-soft);
}

.marquee__dot {
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* ─── Journey ─── */
#journey {
  padding-top: clamp(2rem, 5vh, 4rem);
}

.stages {
  max-width: 70rem;
  margin-inline: auto;
}

#journey .section__lede {
  max-width: 34rem;
}

.stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
}

.stage-card {
  padding: 1.5rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.stage-card:hover {
  transform: translateY(-4px);
  border-color: #00b3a4;
  box-shadow: 0 14px 40px rgba(0, 179, 164, 0.16);
}

.stage-card__n {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: #5c55d9;
  letter-spacing: -0.05em;
  font-family: var(--display);
}

.stage-card__tag {
  margin-top: 1.1rem;
  color: #00b3a4;
  font-weight: 600;
}

.stage-card__title {
  margin: 0.35rem 0 0.7rem;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

/* ─── Verticals ─── */
.chips {
  max-width: 70rem;
  margin-inline: auto;
}

.verticals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

.verticals li {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.verticals li:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

.verticals__icon {
  width: 2.75rem;
  height: 2.75rem;
  background: #eef2ff;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

.verticals h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.verticals p {
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 300;
}

.chips {
  margin-top: 2.5rem;
}

.chips__label {
  margin-bottom: 0.9rem;
  color: #00b3a4;
}

.chips__label::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  margin-right: 0.75rem;
  vertical-align: 0.2em;
  background: #00b3a4;
}

.chips ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chips li {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 300;
}

/* ─── Why / technical ─── */
#skills .skills-layout {
  max-width: 70rem;
  margin-inline: auto;
}

.skills-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.skills-layout>.bars {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}

@media (max-width: 860px) {
  .skills-layout {
    grid-template-columns: 1fr;
  }

  .skills-layout>.bars {
    position: static;
  }
}

.why {
  display: grid;
  gap: 0;
}

.why li {
  display: flex;
  gap: clamp(1.25rem, 2vw, 2rem);
  align-items: flex-start;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.why li:first-child {
  padding-top: 0;
}

.why li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.why__n {
  flex: none;
  width: 1.5rem;
  font-family: var(--display);
  font-size: 0.875rem;
  letter-spacing: 0;
  color: #00b3a4;
  font-weight: 700;
  margin-bottom: 0;
  padding-top: 0.3rem;
}

.why h3 {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.why li>div>p:last-child {
  margin-top: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.5;
}

/* ─── Skill bars ─── */
.bars {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: clamp(1.5rem, 3vw, 2.125rem);
  border-radius: 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

.bars__title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.bars__sub {
  margin: 0.4rem 0 1.5rem;
  font-family: var(--display);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}

.bars ul {
  display: grid;
  gap: 0.875rem;
}

.bars li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 1rem;
}

.bars__k {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
}

.bars__v {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  color: #00b3a4;
  font-weight: 700;
  font-size: 0.875rem;
}

.bars__track {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0.5rem;
  height: 5px;
  border-radius: 6px;
  background: var(--paper-3);
  overflow: hidden;
}

.bars__track i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #5c55d9, #00b3a4);
  border-radius: 6px;
}

/* ─── Live projects ─── */
.live-card {
  background: linear-gradient(135deg, #4a2f9e, #00b3a4);
  color: #fff;
  border-radius: 1.5rem;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  box-shadow: 0 20px 50px rgba(0, 179, 164, 0.15);
  max-width: 58rem;
  margin: 0 auto;
}

.clients {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-content: center;
}

.clients li {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
  backdrop-filter: blur(4px);
}

/* ─── Why Alpha6 Cards ─── */
.why-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
}

.why-cards li {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

.why-cards h3 {
  font-size: 1.125rem;
  margin: 0.5rem 0;
  letter-spacing: -0.01em;
}

.why-cards p {
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 300;
}

/* ─── Levels ─── */
/* Single-plan page: the column is capped narrower (36rem) than the 70rem grid
   the other course pages use for three cards, so the one featured card reads
   as a considered centrepiece rather than a stretched-out three-column row
   with two slots empty. */
.levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem;
  align-items: stretch;
  max-width: 36rem;
  margin-inline: auto;
}

#tariff .section__head {
  max-width: 44rem;
}

.level {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.level--featured {
  box-shadow: 0 20px 50px -20px rgba(123, 92, 240, 0.35);
}

.level__head {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  color: #fff;
}

.level__head::after {
  content: "";
  position: absolute;
  top: -3rem;
  right: -3rem;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
      rgba(255, 255, 255, 0.16) 0deg 15deg,
      rgba(255, 255, 255, 0) 15deg 30deg);
  -webkit-mask-image: radial-gradient(circle, transparent 24%, #000 25%);
  mask-image: radial-gradient(circle, transparent 24%, #000 25%);
  animation: level-spin 34s linear infinite;
  pointer-events: none;
}

@keyframes level-spin {
  to {
    transform: rotate(360deg);
  }
}

.level__head--1 {
  background: linear-gradient(145deg, #00b3a4, #008c80);
}

.level__head--2 {
  background: linear-gradient(145deg, #7b5cf0, #4a2f9e);
}

.level__head--3 {
  background: linear-gradient(145deg, #3273dc, #1d4d8a);
}

.level__tag {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
  padding: 0;
  background: none;
  border-radius: 0;
  font-family: var(--display);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.9);
}

.level__tag b {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}

/* Out of the tag line and pinned to the corner, so a long card name can never
   push it around. Desktop only — at narrow widths the corner has nowhere
   left to put it without landing on the card name beneath it; see the 860px
   override below, which drops this back into normal flow. */
.level__badge {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  margin-left: 0;
  padding: 0.3rem 0.7rem;
  background: #00b3a4;
  border-radius: 999px;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.level__name {
  position: relative;
  z-index: 1;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}

.level__sub {
  position: relative;
  z-index: 1;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
}

.level__price {
  position: relative;
  z-index: 1;
  margin-top: 1.25rem;
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}

.level__price span {
  font-family: var(--display);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
}

.level__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.module+.module {
  margin-top: 1.25rem;
}

.module__h {
  margin-bottom: 0.6rem;
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #00b3a4;
}

.level--featured .module__h {
  color: #7b5cf0;
}

.module-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.module-chips li {
  padding: 0.3rem 0.65rem;
  background: #fff;
  border: 1px solid rgba(20, 22, 26, 0.1);
  border-radius: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.level__outcome {
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--paper);
  border: 1px dashed var(--line-soft);
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.level__outcome b {
  color: var(--ink);
}

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

.levels__note {
  margin-top: 2rem;
  text-transform: none;
  letter-spacing: 0.06em;
  line-height: 1.8;
}

.outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

.outcomes li {
  padding: 1.5rem;
  border-top: 2px solid var(--accent);
}

.outcomes h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.outcomes p {
  margin-top: 0.4rem;
}

/* ─── CTA & footer ─── */
.cta {
  text-align: center;
}

.cta__title {
  margin-top: 1.25rem;
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.cta__lede {
  max-width: 38rem;
  margin: 1.25rem auto 0;
  color: var(--ink-soft);
  font-weight: 300;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2rem;
}

.cta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem;
  max-width: 60rem;
  margin: clamp(3rem, 8vh, 5rem) auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line-soft);
  text-align: left;
}

.cta__k {
  margin-bottom: 0.5rem;
}

.cta__v {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.6;
}

.cta__v a {
  color: var(--accent);
  text-decoration: none;
}

.foot {
  padding: clamp(3rem, 8vh, 4.5rem) var(--gut) 2.5rem;
  background: var(--paper-2);
  border-top: 1px solid var(--line-soft);
}

.foot__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 2rem;
  padding-bottom: 2.5rem;
}

.foot__blurb {
  max-width: 30rem;
  color: var(--ink-soft);
  font-weight: 300;
}

.foot__blurb a {
  color: var(--accent);
  text-decoration: none;
}

.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-content: start;
}

.foot__nav a {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}

.foot__nav a:hover {
  color: var(--ink);
}

.foot__note {
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.625rem;
}

/* ─────────────────────────── 8. Viewer ─────────────────────────── */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--stage);
  color: #f2f5f7;
  opacity: 0;
}

.viewer__stage {
  position: absolute;
  inset: 0;
}

.viewer__stage canvas {
  display: block;
  touch-action: none;
}

.viewer__ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem var(--gut);
  pointer-events: none;
}

.viewer__top,
.viewer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.viewer__bottom {
  align-items: flex-end;
}

.viewer__ui .btn {
  pointer-events: auto;
  color: #f2f5f7;
  border-color: rgba(255, 255, 255, 0.2);
}

.viewer__ui .btn:hover {
  border-color: #f2f5f7;
}

.viewer .mono {
  color: rgba(242, 245, 247, 0.62);
}

.viewer__part {
  min-height: 1.25rem;
  font-size: 0.75rem;
  transition: opacity 0.35s var(--ease);
}

.viewer__part[data-state="idle"] {
  opacity: 0.55;
}

.viewer__hint {
  font-size: 0.625rem;
  opacity: 0.5;
  text-align: right;
}

.viewer__loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s var(--ease);
}

.viewer__loading.is-hidden {
  opacity: 0;
}

/* ─────────────────────────── Responsive ─────────────────────────── */
@media (max-width: 860px) {
  :root {
    --nav-h: 3.5rem;
  }

  .sequence {
    height: 580svh;
  }

  .nav__links {
    display: none;
  }

  .nav__cta {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    margin-left: auto;
    white-space: nowrap;
  }

  .hero__scroll {
    display: none;
  }

  .hero__title {
    font-size: clamp(2.4rem, 12vw, 4.5rem);
  }

  .hero__stats {
    gap: 1.25rem 2rem;
  }

  .hero__stats li {
    flex: 1 1 7rem;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .finale__actions .btn {
    flex: 1 1 100%;
  }

  .viewer__hint {
    display: none;
  }

  .cta__grid {
    text-align: center;
  }

  .section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  #journey {
    padding-top: 2.5rem;
  }

  .foot-new {
    padding-top: 2.5rem;
  }

  .verticals,
  .why-cards {
    margin-block: 2rem;
  }

  .role-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
  }

  .role-card {
    min-width: 0;
  }

  /* MOST POPULAR badge: on desktop this sits fine in the corner because the
     card is wide (min 19rem). Stacked to a narrow phone-width column, the
     absolute top:1.1rem/right:1.1rem position had nothing keeping it clear
     of the "AR / VR Professional" heading directly below it — nothing in
     `.level__tag`'s normal flow (here the tag paragraph holds only the badge)
     reserves space for an absolutely positioned child, so the badge could
     land on top of that heading instead of sitting beside it. Dropping it
     back into normal flow lets it render as its own line above the name,
     the same as any other in-flow content in the header. */
  .level__tag {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }

  .level__badge {
    position: static;
    display: inline-block;
  }

  .nav {
    backdrop-filter: none;
    background: var(--paper);
  }

  .timeline__tracks {
    backdrop-filter: none;
    background: rgba(11, 13, 17, 0.8);
  }
}

/* ── Portrait phones: full view without letterboxing ──────── */
@media (max-width: 860px) and (orientation: portrait) {
  .hud__thirds {
    opacity: 0.4;
  }

  .timeline__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .timeline__clip {
    font-size: 0.4375rem;
    padding: 0 0.35rem;
  }

  .timeline__tracks {
    background: rgba(11, 13, 17, 0.35);
  }

  .caption,
  .caption--left,
  .caption--right {
    top: auto;
    bottom: 16svh;
    left: var(--gut);
    right: var(--gut);
    width: auto;
    text-align: left;
  }

  .caption--right .caption__eyebrow {
    flex-direction: row;
  }

  .caption__title {
    font-size: clamp(2.6rem, 14vw, 4.75rem);
    line-height: 0.92;
  }

  .caption__body {
    max-width: none;
    font-size: clamp(0.9rem, 3.6vw, 1.05rem);
    line-height: 1.5;
  }
}

@media (max-width: 860px) and (orientation: portrait) and (max-height: 720px) {
  .timeline__row:nth-child(2) {
    display: none;
  }

  .caption {
    bottom: 17svh;
  }

  .caption__title {
    font-size: clamp(2.2rem, 12vw, 3.75rem);
  }

  .caption__body {
    font-size: 0.875rem;
    line-height: 1.45;
  }
}

@media (max-width: 460px) {
  .timeline__row:nth-child(2) {
    display: none;
  }
}

/* ─────────────────────────── Accessibility ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .hud,
  .timeline {
    display: none;
  }

  .sequence {
    height: auto;
  }

  .sequence__sticky {
    position: static;
    height: auto;
    overflow: visible;
  }

  .stage {
    position: static;
  }

  .stage__monitor {
    position: relative;
    aspect-ratio: 16 / 9;
  }

  .stage__gloss {
    display: none;
  }

  .captions {
    position: static;
    display: grid;
    gap: 3rem;
    width: 100%;
    margin-top: 3rem;
    padding: 0 var(--gut);
  }

  .caption,
  .caption--left,
  .caption--right {
    position: static;
    width: auto;
    opacity: 1;
    text-align: left;
    color: var(--ink);
  }

  .caption__title,
  .caption__body {
    text-shadow: none;
  }

  .caption__title span {
    filter: none;
  }

  .caption__body {
    color: var(--ink-soft);
  }

  .finale {
    position: static;
    gap: 2rem;
    padding: 5rem var(--gut) 0;
    opacity: 1;
    pointer-events: auto;
    background: none;
    color: var(--ink);
  }

  .bars__track i {
    width: var(--pct, 0%) !important;
  }
}

:where(a, button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ─────────────────────────── Role Cards ─────────────────────────── */
.role-cards {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 var(--gut);
}

.role-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  padding: 0.8rem 1.25rem;
  border-radius: 0.8rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.03);
  min-width: 14rem;
}

.role-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: #f0f7ff;
  border-radius: 0.5rem;
  font-size: 1.2rem;
}

.role-card:nth-child(2) .role-card__icon {
  background: #eefaf6;
}

.role-card:nth-child(3) .role-card__icon {
  background: #f0f2fa;
}

.role-card:nth-child(4) .role-card__icon {
  background: #fffcf0;
}

.role-card__text h4 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

.role-card__text p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

/* ─────────────────────────── CTA Banner ─────────────────────────── */
.cta-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4rem 2rem;
  background: var(--paper-2);
  border-radius: 1.5rem;
  margin: 0 auto;
  max-width: 60rem;
}

.cta-banner__eyebrow {
  font-family: var(--display);
  font-weight: 600;
  color: #00b3a4;
  margin-bottom: 1rem;
}

.cta-banner__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.cta-banner__title span {
  color: #5c55d9;
}

.cta-banner__lede {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 40rem;
  margin: 0 auto 2rem;
}

.cta-banner__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─────────────────────────── Contact Section ─────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: 70rem;
  margin: 0 auto;
  padding: 0 var(--gut);
}

.contact-layout>* {
  min-width: 0;
}

@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

.contact-info {
  display: flex;
  flex-direction: column;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: #eefaf6;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.contact-k {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-bottom: 0.25rem;
}

.contact-v {
  font-weight: 500;
}

/* ─── Map card ─── */
.contact-map {
  position: relative;
  flex: 1;
  min-height: 22rem;
  margin-top: 2rem;
  padding: 0.5rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 21rem;
  border: 0;
  border-radius: 0.65rem;
  filter: saturate(0.9);
}

@media (max-width: 768px) {
  .contact-map {
    min-height: 16rem;
    margin-top: 1.5rem;
  }

  .contact-map iframe {
    min-height: 15rem;
  }
}

.contact-form-card {
  background: #fff;
  padding: 2.5rem;
  border-radius: 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.contact-form-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.contact-form-card p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.c-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  min-width: 0;
}

@media (max-width: 500px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.c-form label {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.c-form input,
.c-form select,
.c-form textarea {
  width: 100%;
  min-width: 0;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fcfcfc;
}

.c-form input:focus,
.c-form select:focus,
.c-form textarea:focus {
  outline: none;
  border-color: #00b3a4;
  background: #fff;
}

.form-note {
  font-size: 0.75rem !important;
  text-align: center;
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
}

/* ─────────────────────────── Footer ─────────────────────────── */
.foot-new {
  background: var(--paper-2);
  padding: 4rem var(--gut) 2rem;
  margin-top: 0;
}

.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 70rem;
  margin: 0 auto 3rem;
}

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

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

.foot-brand p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

.foot-col h4 {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.foot-col a,
.foot-col p {
  display: block;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}

.foot-col a:hover {
  color: var(--accent);
}

.foot-bottom {
  max-width: 70rem;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.foot-bottom p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ─────────────────────────── Verticals & Why Cards ─────────────────────────── */
.verticals,
.why-cards {
  display: grid;
  gap: 1rem;
  max-width: 70rem;
  margin: 2.5rem auto 0;
  padding: 0;
}

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

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

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

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

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

  .why-cards {
    grid-template-columns: 1fr;
  }
}

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

.verticals li,
.why-cards li {
  background: #fff;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.verticals__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: #f0f7ff;
  border-radius: 0.5rem;
  font-size: 1.2rem;
}

.verticals li:nth-child(2) .verticals__icon,
.why-cards li:nth-child(2) .verticals__icon {
  background: #f3f0ff;
}

.verticals li:nth-child(3) .verticals__icon,
.why-cards li:nth-child(3) .verticals__icon {
  background: #f0f2fa;
}

.verticals li:nth-child(4) .verticals__icon,
.why-cards li:nth-child(4) .verticals__icon {
  background: #fffcf0;
}

.verticals li:nth-child(5) .verticals__icon,
.why-cards li:nth-child(5) .verticals__icon {
  background: #f0f7ff;
}

.verticals li:nth-child(6) .verticals__icon,
.why-cards li:nth-child(6) .verticals__icon {
  background: #eefaf6;
}

.verticals li:nth-child(7) .verticals__icon,
.why-cards li:nth-child(7) .verticals__icon {
  background: #fff0f0;
}

.verticals li:nth-child(8) .verticals__icon,
.why-cards li:nth-child(8) .verticals__icon {
  background: #f0f7ff;
}

.verticals h3,
.why-cards h3 {
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0;
}

.verticals p,
.why-cards p {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   iOS: THE SIDEWAYS SWIPE
   ═══════════════════════════════════════════════════════════════════════════ */
.sequence__sticky,
.marquee {
  contain: paint;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUD: FRAMING OVERLAY OFF
   ═══════════════════════════════════════════════════════════════════════════ */
.hud__thirds,
.hud__bracket {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAV LOCKUP
   ───────────────────────────────────────────────────────────────────────────
   `.nav__logo-img` holds the WHOLE logo.png lockup on this page (mark plus
   wordmark), not a small icon tile — so it needs to scale by height with
   width:auto to keep its own aspect ratio, exactly like `.nav__logo` /
   `.nav__sigil` on the other course pages. This is now the ONLY place
   `.nav__logo-img` sizing is set: an unconditional height:4rem rule used to
   sit in the earlier "Nav & hero" section with no media query, and this
   section used to force a fixed 2.35rem/2rem SQUARE on top of it (styling
   meant for an icon-tile version of the lockup this page's markup doesn't
   use — there's no `.nav__name` text here). Two competing, non-responsive
   definitions meant the breakpoints could never reliably apply — the logo
   stayed one size across screens no matter how they were tuned, which is
   what made it read too small/cramped on a phone. Desktop matches the size
   already approved (4rem). */
.nav__logo-img {
  display: block;
  height: 4rem;
  max-height: calc(var(--nav-h) - 0.5rem);
  width: auto;
  object-fit: contain;
  flex: none;
}

/* --nav-h drops to 3.5rem at this breakpoint. */
@media (max-width: 860px) {
  .nav__logo-img {
    height: 3.2rem;
  }
}

/* Narrow phones: the CTA needs the width more than the logo does. */
@media (max-width: 460px) {
  .nav__logo-img {
    height: 2.8rem;
  }
}

/* ═══════════════════════════ SEO SECTION ═══════════════════════════ */
.seo-section {
  padding: 4rem 1rem;
}

.seo-card {
  max-width: 76rem;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 4.5rem 5.5rem;
  gap: 4rem;
}

@media (max-width: 768px) {
  .seo-card {
    grid-template-columns: 1fr;
    padding: 2rem;
    gap: 2rem;
  }
}

.seo-tag {
  display: inline-block;
  background: #e3f2f1;
  color: #1a9988;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.seo-title {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 2.35rem;
  line-height: 1.35;
  color: #3d2c5e;
  margin-bottom: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
}

.seo-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.15rem;
  line-height: 1.7;
  color: #6b7280;
  font-weight: 400;
}

.seo-keywords {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.5rem;
  padding: 2.5rem;
}

.seo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

@media (max-width: 480px) {
  .seo-list {
    grid-template-columns: 1fr;
  }
}

.seo-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.05rem;
  color: #4b5563;
  font-weight: 500;
  line-height: 1.5;
}

.seo-list svg {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}