*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: auto;
  /* The scroll experience is fully jacked — wheel/touch drive the video
     scrub while the page is pinned. The native scrollbar is hidden so the
     visitor can't drag the thumb and fight the lock (which made the page
     judder between the intro frame and the FAQ). With no scrollbar there is
     also no width change when the intro toggles `overflow: hidden` on body,
     so the previous `scrollbar-gutter: stable` reservation is no longer
     needed. */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* legacy Edge / IE */
}

/* Chromium + Safari: hide the viewport scrollbar. Scoped to the root so
   any inner scrollable regions keep their own scrollbars. */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* While the intro video auto-plays, lock the page — scroll input is
   ignored so the user can't fast-forward past the intro. */
body.intro-playing {
  overflow: hidden;
  height: 100vh;
}

body {
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* Hint to browsers that there are no horizontal scenes — keeps the
     scrollbar predictable without breaking sticky positioning. */
  overflow-anchor: none;
}


/* Total scroll length sized so the scrub phase has room for a smooth
   per-frame drive across 359 frames (91 → 450). 900vh of scrub budget
   ≈ 2.5vh/frame — a touch slower than the prior model, generous scrub
   feel without the section feeling endless. Plus 100vh sticky = 1000vh
   container. */
.scroll-container {
  position: relative;
  /* Scroll-jacking manages the playhead — the container is a single
     viewport and the JS locks the user inside it while the video scrubs. */
  height: 100vh;
}

.sticky-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
}

/* Both videos sit inside .sticky-stage and use identical positioning so
   the last frame of the intro and the first frame of the main video are
   rendered at the exact same pixel positions — no visible cut. */
.sticky-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

#scroll-video {
  z-index: 1;
  will-change: transform;
}


/* --- Section 1 captions (option C: cinematic descent) -------------------
   Four overlays anchored to videos 2-5 of the scrub. Each exposes
   --enter (0→1 entering) and --exit (0→1 exiting); JS writes those
   per-frame and CSS owns the actual motion. Text-shadow (cheap) is used
   instead of drop-shadow filter to avoid re-rasterising on every frame
   advance. */

.s1-captions {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  text-transform: uppercase;
  color: #fff;
  user-select: none;
}

.s1-caption {
  position: absolute;
  margin: 0;
  --enter: 0;
  --exit: 0;
  opacity: calc(var(--enter) * (1 - var(--exit)));
  will-change: transform, opacity;
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.85),
    0 1px 4px rgba(0, 0, 0, 0.55);
  line-height: 1;
}

/* Caption 1 — Video 2 (Earth + houses below). Documentary-style
   subtitle, bumped large enough to read comfortably. Left side,
   upper-third. */
.s1-caption-1 {
  top: 30%;
  left: 8vw;
  max-width: 22ch;
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 400;
  letter-spacing: 0.12em;
  transform: translateY(calc((1 - var(--enter)) * 18px + var(--exit) * -12px));
}

/* Caption 2 — Video 3 (close to house). Bigger, declarative.
   Right side, vertically centered. */
.s1-caption-2 {
  top: 50%;
  right: 8vw;
  font-size: clamp(48px, 5.4vw, 92px);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-align: right;
  transform: translateY(calc(-50% + (1 - var(--enter)) * 22px + var(--exit) * -16px));
}

/* Caption 3 — Video 4 (inside, office from above). Single word,
   biggest, dead-center. Scale-in echoes the camera pushing in. */
.s1-caption-3 {
  top: 50%;
  left: 50%;
  font-size: clamp(96px, 10vw, 180px);
  font-weight: 600;
  letter-spacing: -0.005em;
  transform:
    translate(-50%, -50%)
    scale(calc(0.85 + var(--enter) * 0.15 - var(--exit) * 0.04));
}

/* Caption 4 — Video 5 (into the screen). The payoff. Left side, sized
   small enough to leave the screen content visible behind it. Forced
   into three lines via .s1-cap-line spans so the cadence is fixed
   regardless of viewport width. */
.s1-caption-4 {
  top: 50%;
  left: 8vw;
  text-align: left;
  font-size: clamp(28px, 3.2vw, 56px);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.08;
  transform:
    translateY(calc(-50% + var(--exit) * -14px))
    scale(calc(0.96 + var(--enter) * 0.04));
}

.s1-caption-4 .s1-cap-line {
  display: block;
}

@media (max-width: 720px) {
  .s1-caption-1 { font-size: clamp(18px, 4.4vw, 24px); max-width: 28ch; }
  .s1-caption-2 { font-size: clamp(36px, 9vw, 60px); }
  .s1-caption-3 { font-size: clamp(64px, 18vw, 120px); }
  .s1-caption-4 { font-size: clamp(22px, 5.6vw, 36px); max-width: 24ch; }
}

/* --- Scroll cue ---------------------------------------------------------- */

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 5vh, 56px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateX(-50%);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
  pointer-events: none;
  user-select: none;
  will-change: opacity, transform;
}

body.intro-playing .scroll-cue {
  opacity: 0 !important;
}

.scroll-cue-text {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(9px, 0.68vw, 11px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.scroll-cue-line {
  position: relative;
  display: block;
  width: 1px;
  height: clamp(42px, 6vh, 68px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}

.scroll-cue-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.92),
    rgba(255, 255, 255, 0)
  );
  animation: scroll-cue-drop 1.45s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scroll-cue-drop {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    transform: translateY(350%);
    opacity: 0;
  }
}

/* --- Site header --------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2vw;
  padding: 1.4em 3vw;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  /* Header is present from the very first frame — visible during the intro
     lock and throughout the rest of the page. */
  opacity: 1;
  pointer-events: auto;
}

.site-brand {
  justify-self: start;
  font-size: clamp(15px, 1.15vw, 19px);
  letter-spacing: 0.34em;
  color: #fff;
  text-decoration: none;
}

.site-nav {
  justify-self: center;
  display: flex;
  gap: clamp(20px, 2.4vw, 40px);
}

.site-nav a {
  font-size: clamp(11px, 0.82vw, 14px);
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-nav a:hover {
  color: #fff;
}

.site-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.75em 1.5em;
  border-radius: 999px;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 4px 14px rgba(0, 0, 0, 0.18);

  color: #fff;
  text-decoration: none;
  font-size: clamp(11px, 0.82vw, 14px);
  letter-spacing: 0.22em;
  line-height: 1;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.site-cta:hover,
.site-cta:focus-visible {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 28px rgba(139, 130, 230, 0.3),
    0 4px 14px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

@media (max-width: 420px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 1.25em 3vw;
  }

  .site-brand {
    font-size: 14px;
    letter-spacing: 0.28em;
  }

  .site-nav {
    gap: 14px;
  }

  .site-nav a,
  .site-cta {
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .site-cta {
    padding: 0.72em 1.05em;
  }
}

@media (max-width: 360px) {
  .site-header {
    gap: 8px;
    padding-inline: 2.6vw;
  }

  .site-brand {
    font-size: 13px;
    letter-spacing: 0.24em;
  }

  .site-nav {
    gap: 11px;
  }

  .site-nav a,
  .site-cta {
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .site-cta {
    padding: 0.7em 0.9em;
  }
}

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

.hero {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  /* Anchored near the top — below the fixed site-header — instead of
     vertically centered. Leaves the lower half of the frame clear for the
     video content. */
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 36px);
  padding: clamp(170px, 20vh, 220px) 6vw 0 8vw;
  pointer-events: none;
  will-change: transform;
}

.hero-title {
  margin: 0;
  display: flex;
  flex-direction: column;

  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 500;
  font-size: clamp(44px, 5vw, 88px);
  line-height: 1.02;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;

  /* Soft shadow keeps the text legible over the video without looking
     stuck-on. Works with the gradient fill below. */
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));

  user-select: none;
}

/* --- Hero (scene 2) ------------------------------------------------------ */

.hero2 {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  /* Pulled in from the right edge so the block sits in the centre-right
     area, not hugging the bezel. */
  padding: 0 16vw 0 6vw;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;

  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  text-align: right;

  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));
}

.hero2-line {
  display: block;
  will-change: opacity;
  opacity: 0;
}

.hero2-top {
  font-size: clamp(36px, 4.4vw, 78px);
  letter-spacing: 0.08em;
  /* line-height roomy enough that Antonio's caps aren't clipped at the
     bottom (gradient + tight line-height was cropping descenders). */
  line-height: 1.1;
}

.hero2-obvious {
  font-size: clamp(82px, 10vw, 156px);
  letter-spacing: 0.04em;
  /* >= 1.0 prevents Antonio from being clipped by the text-clip box. */
  line-height: 1.1;
  padding: 0.04em 0;
}

.hero2-choice {
  font-size: clamp(36px, 4.4vw, 78px);
  letter-spacing: 0.08em;
  line-height: 1.1;
}

/* Shared silver gradient — same vibe as scene 1 so the lines feel like
   they belong to the scene rather than being layered on top. */
.hero2-top,
.hero2-obvious,
.hero2-choice {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(230, 230, 230, 0.9) 45%,
    rgba(170, 170, 170, 0.75) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

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

.hero-cta {
  display: inline-flex;
  align-items: center;
  padding: 1em 2.2em;
  border-radius: 999px;
  animation: hero-cta-in 1.9s cubic-bezier(0.22, 0.61, 0.36, 1) 1.75s forwards;

  /* Glass — echoes the elypt asset's translucent ring. */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 6px 22px rgba(0, 0, 0, 0.25);

  color: #fff;
  text-decoration: none;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;

  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  transition:
    opacity 0.6s ease,
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.hero-cta:hover,
.hero-cta:focus-visible {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  border-color: rgba(255, 255, 255, 0.4);
  /* Violet-blue glow matching the elypt asset. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 0 36px rgba(139, 130, 230, 0.35),
    0 6px 22px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

.hero-cta:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.5);
  outline-offset: 4px;
}

.hero-line {
  display: block;
  opacity: 0;
  will-change: opacity;
  animation: hero-line-in 1.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;

  /* Gradient fill — top of each letter catches "light", bottom fades to
     a soft silver, so the letters feel rendered into the scene rather
     than pasted on top. */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(230, 230, 230, 0.9) 45%,
    rgba(170, 170, 170, 0.75) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Uniform 0.45s cadence — each line lands on a steady beat, ending with
   the CTA at 1.75s as the final note. */
#hero-line-1 { animation-delay: 0.40s; }
#hero-line-2 { animation-delay: 0.85s; }
#hero-line-3 { animation-delay: 1.30s; }

/* Small gap above the second sentence so the two phrases read as two
   distinct thoughts, not four equally-spaced lines. */
.hero-line-break {
  margin-top: 0.45em;
}

@keyframes hero-line-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-cta-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Pass-animation skip button ---------------------------------------- */

.pass-animation {
  position: absolute;
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 5;

  display: inline-flex;
  align-items: center;
  padding: 0.7em 1.4em;
  border-radius: 999px;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 4px 14px rgba(0, 0, 0, 0.18);

  color: #fff;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(10px, 0.78vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;

  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition:
    opacity 0.6s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
  will-change: opacity;
}

.pass-animation.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.pass-animation:hover,
.pass-animation:focus-visible {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 28px rgba(139, 130, 230, 0.3),
    0 4px 14px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

.pass-animation:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.5);
  outline-offset: 4px;
}

.loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #888;
  background: #000;
  transition: opacity 0.4s ease;
}

.loading.hidden {
  opacity: 0;
  pointer-events: none;
}

/* --- Post-hero (dark section after the video) ---------------------------- */

.post-hero {
  background: #000;
  color: #fff;
  /* Holds at least one viewport so the user feels they're in a new
     section — adjust once we know the content. */
  min-height: 100vh;
  padding: clamp(80px, 12vw, 200px) 6vw;
  position: relative;
  z-index: 1;
}

.post-hero-inner {
  max-width: 1440px;
  margin: 0 auto;
}

/* --- Projects: title block (top-left) ----------------------------------- */

.projects-head {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 16px);
  margin-bottom: clamp(48px, 6vw, 96px);
  /* JS adds .is-visible when the section scrolls into view. */
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.projects-head.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.projects-title {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(34px, 4vw, 68px);
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(230, 230, 230, 0.9) 45%,
    rgba(170, 170, 170, 0.75) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.projects-sub {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(12px, 0.95vw, 16px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Projects: video grid ------------------------------------------------ */

.projects-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
}

.project-tile {
  position: relative;
  /* Hero-section recordings — landscape 16:9 keeps the tiles readable
     while still fitting 3 across on desktop. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(14px, 1.4vw, 22px);
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.project-tile.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.project-tile:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.6),
    0 0 32px rgba(139, 130, 230, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.project-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

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

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

/* --- Section 3: scroll-scrubbed video timeline -------------------------

   Three source clips concatenated into a single MP4 (public/section3.mp4)
   with -g 1 keyframes for frame-perfect seeking. The rail gives the user
   a generous scroll budget; the sticky stage holds the video pinned to
   the viewport while JS maps scroll progress to video.currentTime. */

.section3 {
  position: relative;
  z-index: 1;
  background: #000;
  color: #fff;
}

.section3-rail {
  position: relative;
  /* Scroll-jacking owns the scrub — same approach as section 1. The
     container is a single viewport; the JS locks the user inside it
     while the captions and video advance. */
  height: 100vh;
}

.section3-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.section3-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  will-change: transform;
}

/* Mobile + tablet portrait: the source video is wide and the
   iPad/laptop/full-site scenes get cropped by object-fit:cover. Switch
   to a contained, smaller, centred presentation. The stage stays 100vh
   but the video occupies only ~80vw × 60vh of it, centred. Letterboxing
   is invisible (stage is black). Desktop (≥901px) keeps cover. */
@media (max-width: 900px) {
  .section3-stage video {
    object-fit: contain;
    inset: auto;
    /* Source video is 1920×1080 (16:9). In portrait, a perfectly
       contained 16:9 video would only fill ~28% of viewport height.
       To give the iPad / laptop / full-site scenes real presence,
       we overflow the video horizontally — the stage's overflow:hidden
       clips it cleanly. Tuned slightly smaller than the prior 148/88
       so the captions breathe over it. */
    width: 144vw;
    height: 86vh;
    left: -22vw;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* --- Section 3 overlays --------------------------------------------------

   Every animatable element exposes two CSS custom properties: --enter
   (0 → 1 as the element comes in) and --exit (0 → 1 as it goes out).
   JS just writes those numbers each tick; CSS owns the actual motion.
   The combinations below produce: a clip-path wipe + slide for caption 1,
   a focus-pull (scale + blur) for caption 2, and a staggered letter rise
   + underline draw for caption 3. */

.s3-mast,
.s3-caption {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  color: #fff;
  --enter: 0;
  --exit: 0;
  user-select: none;
}

/* --- Mast: opening title only — visible during the transition from
   section 2 into section 3 and through the iPad's first rise (up to
   frame ~22). Lives OUTSIDE the sticky stage as a fixed element so it
   can already be on-screen while section 2 is still visible. Enters
   bottom-to-top with a fade, exits with a slight upward drift + fade.
   All white, no accent. */

.s3-mast {
  position: fixed;
  top: clamp(140px, 22vh, 260px);
  left: 50%;
  z-index: 8;
  /* Entry: starts 28px below resting position and slides up.
     Exit: small extra 16px lift while fading. */
  transform: translate(
    -50%,
    calc((1 - var(--enter)) * 28px - var(--exit) * 16px)
  );
  opacity: calc(var(--enter) * (1 - var(--exit)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  text-align: center;
  width: min(900px, 86vw);
  color: #fff;
  pointer-events: none;
  user-select: none;
  --enter: 0;
  --exit: 0;
  will-change: transform, opacity;
}

.s3-mast-eyebrow {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(10px, 0.78vw, 12px);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: calc(0.32em + (1 - var(--enter)) * 0.18em);
}

.s3-mast-headline {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 200;
  font-size: clamp(28px, 3.6vw, 56px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  color: #fff;
}

/* --- Caption base ------------------------------------------------------- */

.s3-caption {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.1vw, 16px);
  max-width: min(380px, 38vw);
  will-change: transform, opacity, clip-path;
}

.s3-cap-kicker {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(10px, 0.78vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(139, 130, 230, 0.9);
}

.s3-cap-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 200;
  font-size: clamp(40px, 5.4vw, 86px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.s3-cap-line {
  display: inline-block;
}

.s3-cap-sub {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  max-width: 28ch;
}

/* --- Caption 1 — iPad / "Shaped on touch."
   Entry: clip-path wipe left→right + slide up 24px.
   Exit: clip-path wipe left→right (covering) + translate -40px (camera-
         pan past). The two wipes share the same clip-path shape — JS
         drives both edges independently via --enter and --exit. */

.s3-caption-1 {
  top: clamp(220px, 36vh, 380px);
  left: clamp(24px, 6vw, 80px);
  text-align: left;
  opacity: calc(var(--enter) * (1 - var(--exit)));
  transform: translateY(calc(var(--exit) * -16px));
}

/* Letter-rise stagger per line — same pattern as caption 3, which is
   the entry the user wants reused. Each line has its own local-enter
   window so they cascade rather than rising in unison. */
.s3-caption-1 .s3-cap-line {
  transform: translateY(
    calc((1 - clamp(0, calc((var(--enter) - 0) * 1.66), 1)) * 28px)
  );
  opacity: clamp(0, calc((var(--enter) - 0) * 1.66), 1);
}

.s3-caption-1 .s3-cap-line:nth-child(2) {
  transform: translateY(
    calc((1 - clamp(0, calc((var(--enter) - 0.18) * 1.66), 1)) * 28px)
  );
  opacity: clamp(0, calc((var(--enter) - 0.18) * 1.66), 1);
}

/* --- Right-side bullets that anchor caption 1 ---
   Three short value-anchors that fade in with stagger from the right
   while caption 1 holds the title on the left. Shares timing with
   caption 1 (driven by the same --enter/--exit). Each bullet uses a
   local-enter window so they cascade rather than appearing in unison. */

.s3-bullets {
  position: absolute;
  /* Asymmetry vs caption 1: title at top-left, bullets at bottom-right.
     Uses bottom anchor + top: auto so it sits in the lower-right
     quadrant regardless of viewport height. */
  bottom: clamp(80px, 14vh, 180px);
  top: auto;
  right: clamp(24px, 6vw, 80px);
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  max-width: min(360px, 36vw);
  text-align: left;
  color: #fff;
  --enter: 0;
  --exit: 0;
  pointer-events: none;
  user-select: none;
  opacity: calc(var(--enter) * (1 - var(--exit)));
  transform: translateY(calc(var(--exit) * -16px));
  will-change: transform, opacity;
}

.s3-bullet {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1vw, 16px);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
  /* translateY rise (same direction as caption 1 lines) instead of
     the previous translateX — matches caption 3's entry style which
     the user picked as the favourite. */
  opacity: var(--local-enter, 0);
  transform: translateY(calc((1 - var(--local-enter, 0)) * 24px));
}

.s3-bullet:nth-child(1) {
  --local-enter: clamp(0, calc((var(--enter) - 0.00) * 1.66), 1);
}
.s3-bullet:nth-child(2) {
  --local-enter: clamp(0, calc((var(--enter) - 0.18) * 1.66), 1);
}
.s3-bullet:nth-child(3) {
  --local-enter: clamp(0, calc((var(--enter) - 0.34) * 1.66), 1);
}

.s3-bullet-dot {
  flex-shrink: 0;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: rgba(139, 130, 230, 0.95);
  box-shadow: 0 0 10px rgba(139, 130, 230, 0.6);
}

.s3-bullet-text {
  flex: 1;
}

/* --- Caption 2 — Hero / "Identity, revealed."
   Centered above the content. The hero clip fills the frame edge-to-edge
   so we layer a soft dark gradient behind the text to guarantee
   readability against the bright interior render. Entry/exit is a focus
   pull: scale + blur curve. */

.s3-caption-2 {
  top: clamp(120px, 22vh, 240px);
  left: 50%;
  text-align: center;
  align-items: center;
  max-width: min(1100px, 92vw);
  transform-origin: 50% 0%;
  transform: translateX(-50%)
    scale(calc(1.15 - var(--enter) * 0.15 - var(--exit) * 0.06));
  opacity: calc(var(--enter) * (1 - var(--exit)));
  filter: blur(
    calc((8 - var(--enter) * 8 + var(--exit) * 4) * 1px)
  );
}

/* Hero clip fills the frame with a bright interior render — white text
   alone disappears against the beige walls. Two-layer treatment for
   contrast: a darkened radial halo behind the text + a heavy
   drop-shadow on the text itself. The halo is wide enough to cover
   both the eyebrow and the headline. */
.s3-caption-2::before {
  content: "";
  position: absolute;
  inset: -60% -15% -60% -15%;
  z-index: -1;
  background: radial-gradient(
    55% 65% at 50% 50%,
    rgba(0, 0, 0, 0.78),
    rgba(0, 0, 0, 0.42) 45%,
    rgba(0, 0, 0, 0) 80%
  );
  pointer-events: none;
}

/* Single-line variant — bigger, tighter, no line-stack. */
.s3-cap-title--single {
  display: block;
  font-size: clamp(36px, 5.6vw, 86px);
  line-height: 1;
  letter-spacing: 0.005em;
  text-shadow:
    0 2px 24px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(0, 0, 0, 0.5);
  white-space: normal;
}

/* --- Caption 3 — Laptop / "Shipped to the world."
   Left side, vertically centered (the laptop is right-of-center). Entry
   is a staggered letter rise per line + a horizontal rule that draws
   left-to-right under the title. Exit is a plain fade (final beat — let
   it just dissolve). */

.s3-caption-3 {
  top: 44%;
  right: clamp(80px, 14vw, 200px);
  left: auto;
  text-align: left;
  transform: translateY(-50%);
  opacity: calc(var(--enter) * (1 - var(--exit)));
  position: absolute;
}

/* Each line rises during a different sub-window of the enter timeline.
   The clamp math maps the global --enter (0..1) into a local 0..1 for
   each line so they stagger by ~150ms of scroll. */
.s3-caption-3 .s3-cap-line {
  transform: translateY(
    calc((1 - clamp(0, calc((var(--enter) - 0) * 1.66), 1)) * 28px)
  );
  opacity: clamp(0, calc((var(--enter) - 0) * 1.66), 1);
  transition: none;
}

.s3-caption-3 .s3-cap-line:nth-child(2) {
  transform: translateY(
    calc((1 - clamp(0, calc((var(--enter) - 0.18) * 1.66), 1)) * 28px)
  );
  opacity: clamp(0, calc((var(--enter) - 0.18) * 1.66), 1);
}

.s3-caption-3 .s3-cap-sub {
  transform: translateY(
    calc((1 - clamp(0, calc((var(--enter) - 0.34) * 1.66), 1)) * 14px)
  );
  opacity: clamp(0, calc((var(--enter) - 0.34) * 1.66), 1);
}

.s3-cap-rule {
  display: block;
  height: 1px;
  margin-top: clamp(6px, 0.8vw, 10px);
  background: rgba(139, 130, 230, 0.85);
  /* Underline draws left-to-right tracking --enter with a small lead so
     it lands just after the last sub-line settles. */
  width: clamp(0%, calc((var(--enter) - 0.45) * 220%), 100%);
  box-shadow: 0 0 14px rgba(139, 130, 230, 0.6);
}

/* --- Responsive: stack/scale down so overlays don't crowd small screens */

@media (max-width: 720px) {
  .s3-mast-headline {
    font-size: clamp(30px, 7.8vw, 44px);
    letter-spacing: 0.01em;
    line-height: 1.08;
  }

  /* All three captions share the mast's top-centre slot — phones
     don't have horizontal room for left/right anchored copy. Each
     caption collapses to a single line. */
  .s3-caption-1,
  .s3-caption-2,
  .s3-caption-3 {
    position: fixed;
    top: clamp(140px, 22vh, 220px);
    left: 50%;
    right: auto;
    bottom: auto;
    max-width: 92vw;
    width: 92vw;
    text-align: center;
    align-items: center;
    transform-origin: 50% 0%;
  }

  /* Drop the multi-line column layout — make caption titles flow
     inline on one line. */
  .s3-cap-title {
    display: block;
    font-size: clamp(28px, 7.6vw, 40px);
    line-height: 1.1;
    text-align: center;
    white-space: normal;
  }
  .s3-cap-line {
    display: inline;
  }
  .s3-cap-line + .s3-cap-line::before {
    content: " ";
    white-space: pre;
  }

  /* Caption-specific tweaks — preserve --enter/--exit animations
     but with the mast-zone positioning baked in. */
  .s3-caption-1 {
    transform: translateX(-50%) translateY(calc(var(--exit) * -16px));
  }
  .s3-caption-2 {
    /* Drop the GPU-heavy blur + scale calc — iOS blur is one of
       the most expensive filter ops. Simple translate + opacity. */
    transform: translateX(-50%);
    filter: none;
  }
  .s3-caption-2::before {
    /* The radial halo behind caption 2 is full-screen on mobile
       and triggers compositing thrash. Tighten or hide. */
    display: none;
  }
  .s3-caption-3 {
    transform: translateX(-50%);
  }
  /* Disable per-line stagger transforms on mobile — they create
     extra layout/paint work every frame. */
  .s3-caption-1 .s3-cap-line,
  .s3-caption-1 .s3-cap-line:nth-child(2),
  .s3-caption-3 .s3-cap-line,
  .s3-caption-3 .s3-cap-line:nth-child(2) {
    transform: none;
    opacity: 1;
  }
  .s3-cap-sub,
  .s3-caption-3 .s3-cap-sub {
    transform: none;
    opacity: 1;
  }
  .s3-cap-title--single {
    font-size: clamp(28px, 7.6vw, 40px);
    line-height: 1.1;
  }

  .s3-step {
    width: 86vw;
  }
  .s3-step-title {
    font-size: clamp(36px, 10vw, 64px);
  }
  .s3-step-sub {
    font-size: clamp(13px, 3.5vw, 16px);
  }
}

/* Additional mobile perf hardening: the section 3 video element
   carries `will-change: transform` to hint browsers about future
   transforms — but we never actually transform it (we scrub
   currentTime). On mobile this just wastes a GPU layer. Drop it. */
@media (max-width: 900px) {
  .section3-stage video {
    will-change: auto;
  }
}

/* ============================================================
   Mobile loader — covers the full viewport while scroll.mp4 and
   section3.mp4 finish their initial buffer. The rotating status
   line cycles every 0.8s and a thin spinner sits at the bottom.
   Logic is inverted: visible by default everywhere, hidden on
   desktop. This avoids @media-quirks on iOS Safari where the
   fixed positioning sometimes failed to apply.
   ============================================================ */

.mobile-loader {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* dynamic viewport on iOS to cover behind URL bar */
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  color: #f5f3ef;
  opacity: 1;
  transition: opacity 0.45s ease;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.mobile-loader::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(
    ellipse 700px 480px at 50% 48%,
    rgba(255, 232, 198, 0.07),
    rgba(10, 10, 10, 0) 65%
  );
  pointer-events: none;
}
.mobile-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.mobile-loader-inner {
  position: relative;
  text-align: center;
  padding: 0 32px;
  z-index: 1;
}
.mobile-loader-title {
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(56px, 18vw, 110px);
  line-height: 1;
  letter-spacing: -0.022em;
  text-transform: uppercase;
  margin: 0;
  color: #f5f3ef;
}
.mobile-loader-rule {
  width: 56px;
  height: 1px;
  background: rgba(245, 243, 239, 0.22);
  margin: 24px auto 22px;
}
.mobile-loader-line {
  position: relative;
  height: 16px;
}
.mobile-loader-phrase {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 243, 239, 0.55);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.mobile-loader-phrase.is-active {
  opacity: 1;
}
.mobile-loader-spinner {
  position: absolute;
  bottom: clamp(48px, 9vh, 96px);
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  animation: mobile-loader-spin 0.9s linear infinite;
  z-index: 1;
}
.mobile-loader-spinner svg {
  display: block;
  width: 100%;
  height: 100%;
}
@keyframes mobile-loader-spin {
  to { transform: translateX(-50%) rotate(360deg); }
}

/* Hide the loader on desktop — only phones get the splash. */
@media (min-width: 901px) {
  .mobile-loader {
    display: none !important;
  }
}

/* When the mobile loader is active, lock body scroll so the user
   can't start interacting before assets are buffered. JS removes
   this when the loader fades out. */
body.mobile-loader-active {
  overflow: hidden;
  touch-action: none;
}

/* --- Cinematic thesis ----------------------------------------------------

   Long-form editorial breath between the poetic section 3 and the practical
   booking/FAQ area. The JS splits the paragraphs into .thesis-word spans
   and lights them as the section scrolls through the viewport. */

.thesis {
  position: relative;
  z-index: 1;
  background: #000;
  color: #fff;
  padding: 0 6vw clamp(140px, 18vw, 260px);
  overflow: hidden;
  --thesis-spread-enter: 0;
  --thesis-spread-exit: 0;
  --thesis-reading-enter: 0;
  --thesis-reading-exit: 0;
}

.thesis::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.48) 26%, #000 100%),
    radial-gradient(70% 55% at 22% 10%, rgba(255, 255, 255, 0.08), transparent 62%),
    radial-gradient(50% 70% at 100% 64%, rgba(255, 255, 255, 0.045), transparent 68%);
}

.thesis-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.thesis-inner {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
}

.thesis-spread {
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 32px);
  align-items: center;
  padding: clamp(120px, 14vh, 180px) 0 clamp(64px, 8vh, 110px);
}

.thesis-opening {
  grid-column: 1 / 10;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.4vw, 40px);
  opacity: calc(var(--thesis-spread-enter) * (1 - var(--thesis-spread-exit)));
  transform: translateY(calc((1 - var(--thesis-spread-enter)) * 34px - var(--thesis-spread-exit) * 34px));
  transition: opacity 0.12s linear, transform 0.12s linear;
  will-change: opacity, transform;
}

.thesis-eyebrow,
.thesis-stat-kicker,
.thesis-rail span {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(10px, 0.72vw, 12px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
}

.thesis-quote {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(72px, 10.3vw, 168px);
  line-height: 1.01;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  padding-block: 0.06em 0.14em;
  overflow: visible;
}

.thesis-quote span {
  display: block;
  width: max-content;
  max-width: 100%;
  padding-bottom: 0.075em;
  overflow: visible;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(230, 230, 230, 0.86) 48%,
    rgba(112, 112, 112, 0.62) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.thesis-quote span:nth-child(2) {
  margin-left: clamp(28px, 7vw, 112px);
}

.thesis-quote span:nth-child(3) {
  margin-left: clamp(10px, 2.2vw, 36px);
}

.thesis-stat {
  grid-column: 10 / 13;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1vw, 16px);
  padding: clamp(4px, 0.8vw, 10px) 0 clamp(4px, 0.8vw, 10px) clamp(20px, 2vw, 32px);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  opacity: calc(var(--thesis-spread-enter) * (1 - var(--thesis-spread-exit)));
  transform: translateX(calc((1 - var(--thesis-spread-enter)) * 24px + var(--thesis-spread-exit) * 22px));
  transition: opacity 0.12s linear, transform 0.12s linear;
  will-change: opacity, transform;
}

.thesis-stat-main {
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(46px, 5vw, 78px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
}

.thesis-stat-copy {
  max-width: 28ch;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(12px, 0.92vw, 15px);
  line-height: 1.52;
  color: rgba(255, 255, 255, 0.58);
}

.thesis-reading {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 940px);
  gap: clamp(32px, 5vw, 90px);
  padding-top: clamp(112px, 13vw, 210px);
  margin-left: clamp(0px, 4vw, 70px);
  opacity: calc(var(--thesis-reading-enter) * (1 - var(--thesis-reading-exit)));
  transform: translateY(calc((1 - var(--thesis-reading-enter)) * 42px - var(--thesis-reading-exit) * 42px));
  transition: opacity 0.12s linear, transform 0.12s linear;
  will-change: opacity, transform;
}

.thesis-rail {
  position: sticky;
  top: clamp(96px, 12vh, 150px);
  height: min(56vh, 520px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
}

.thesis-rail::before {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.04));
}

.thesis-rail span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.thesis-copy {
  max-width: 940px;
}

.thesis-copy p {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.28;
  letter-spacing: 0.006em;
  color: rgba(255, 255, 255, 0.2);
  text-transform: none;
}

.thesis-copy p:first-child {
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.28;
  letter-spacing: 0.002em;
}

.thesis-copy p + p {
  margin-top: clamp(42px, 4.8vw, 76px);
}

.thesis-word {
  display: inline-block;
  color: rgba(255, 255, 255, 0.22);
  transition:
    color 0.5s ease,
    text-shadow 0.5s ease;
}

.thesis-word.is-lit {
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.08);
}

@media (max-width: 980px) {
  .thesis-spread {
    grid-template-columns: 1fr;
  }

  .thesis-opening,
  .thesis-stat {
    grid-column: auto;
  }

  .thesis-stat {
    max-width: 520px;
  }

  .thesis-reading {
    grid-template-columns: 1fr;
    margin-left: 0;
  }

  .thesis-rail {
    position: relative;
    top: auto;
    height: auto;
    justify-content: flex-start;
  }

  .thesis-rail::before {
    display: none;
  }

  .thesis-rail span {
    writing-mode: horizontal-tb;
    transform: none;
  }
}

@media (max-width: 640px) {
  .thesis {
    padding-inline: 5vw;
  }

  .thesis-quote {
    font-size: clamp(54px, 16.4vw, 88px);
    letter-spacing: 0.004em;
    line-height: 1.02;
  }

  .thesis-quote span:nth-child(2),
  .thesis-quote span:nth-child(3) {
    margin-left: 0;
  }

  .thesis-copy p,
  .thesis-copy p:first-child {
    font-size: 18px;
    line-height: 1.55;
  }
}

@media (max-width: 420px) {
  .thesis-stat {
    max-width: 100%;
    padding-left: 16px;
  }

  .thesis-stat-kicker {
    letter-spacing: 0.24em;
  }

  .thesis-stat-main {
    font-size: clamp(40px, 12vw, 46px);
    letter-spacing: 0.01em;
  }
}

@media (max-width: 360px) {
  .thesis-stat {
    padding-left: 14px;
  }

  .thesis-stat-kicker {
    font-size: 9px;
    letter-spacing: 0.2em;
  }

  .thesis-stat-main {
    font-size: 38px;
  }
}

/* --- Section 4: booking calendar ---------------------------------------

   Two-column layout: intro copy on the left, custom date+time picker
   inside a glass card on the right. The picker's state machine (date →
   slots → confirm → success) is driven by script.js; CSS owns the
   reveal animations and selection visuals. */

.contact {
  position: relative;
  z-index: 1;
  background: #000;
  color: #fff;
  padding: clamp(96px, 14vw, 220px) 6vw clamp(120px, 16vw, 240px);
}

.contact-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

.contact-intro {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 1.8vw, 30px);
}

.contact-eyebrow {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(10px, 0.78vw, 12px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(139, 130, 230, 0.9);
}

.contact-headline {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 76px);
  line-height: 1.02;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(230, 230, 230, 0.9) 45%,
    rgba(170, 170, 170, 0.75) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.contact-sub {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.contact-reassurances {
  list-style: none;
  margin: clamp(8px, 1vw, 16px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 18px);
}

.contact-reassurances li {
  position: relative;
  padding-left: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
}

.contact-reassurances li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(139, 130, 230, 0.95);
  box-shadow: 0 0 10px rgba(139, 130, 230, 0.6);
}

/* --- Calendar card (glass) --- */

.contact-card {
  position: relative;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(139, 130, 230, 0.08) 0%, transparent 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 100%),
    rgba(10, 10, 14, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(20px, 1.8vw, 32px);
  padding: clamp(28px, 2.6vw, 44px);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02),
    0 24px 70px rgba(0, 0, 0, 0.45),
    0 0 80px rgba(139, 130, 230, 0.1);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.2vw, 34px);
  overflow: hidden;
}

/* A barely-there top edge highlight that catches "light" — gives the card
   a sense of being lifted off the page rather than printed on it. */
.contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.32),
    transparent
  );
  pointer-events: none;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cal-nav {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.2s ease;
}

.cal-nav:hover:not(:disabled) {
  background: rgba(139, 130, 230, 0.15);
  border-color: rgba(139, 130, 230, 0.45);
  color: #fff;
}

.cal-nav:active:not(:disabled) {
  transform: scale(0.96);
}

.cal-nav:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.cal-title {
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 26px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  padding: 0 2px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-day {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.86);
  border-radius: 12px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease;
}

.cal-day:hover:not(:disabled):not(.is-other-month) {
  background: rgba(139, 130, 230, 0.18);
  border-color: rgba(139, 130, 230, 0.45);
  color: #fff;
  transform: translateY(-1px);
}

.cal-day.is-other-month {
  color: rgba(255, 255, 255, 0.14);
  background: transparent;
  cursor: default;
}

.cal-day:disabled:not(.is-other-month) {
  color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.015);
  cursor: not-allowed;
}

/* Today is marked with a small violet dot under the number instead of a
   ring — the ring read as a selection cue and was confusing. */
.cal-day.is-today::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(139, 130, 230, 0.95);
  box-shadow: 0 0 6px rgba(139, 130, 230, 0.7);
}

.cal-day.is-selected {
  background: linear-gradient(
    140deg,
    rgba(159, 150, 250, 1) 0%,
    rgba(122, 112, 220, 1) 100%
  );
  color: #fff;
  border-color: rgba(180, 170, 255, 0.5);
  box-shadow:
    0 0 28px rgba(139, 130, 230, 0.45),
    0 4px 14px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* Override the today-dot for the selected day so it doesn't compete with
   the strong gradient background. */
.cal-day.is-today.is-selected::after {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

/* --- Time slots --- */

.cal-slots[hidden] { display: none; }

.cal-slots {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 18px);
  animation: cal-slots-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes cal-slots-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.cal-slots-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cal-slots-eyebrow {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.cal-slots-date {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(13px, 0.95vw, 15px);
  color: rgba(255, 255, 255, 0.86);
  font-weight: 500;
}

.cal-slots-tzhint {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-left: auto;
  white-space: nowrap;
}

.cal-slots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.cal-slots-status {
  grid-column: 1 / -1;
  padding: 14px 6px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(12px, 0.85vw, 14px);
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  letter-spacing: 0.02em;
}

.cal-slot {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  animation: cal-slot-in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 35ms);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.25s ease;
}

@keyframes cal-slot-in {
  to { opacity: 1; transform: translateY(0); }
}

.cal-slot:hover:not(:disabled) {
  background: rgba(139, 130, 230, 0.18);
  border-color: rgba(139, 130, 230, 0.45);
  color: #fff;
}

.cal-slot:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cal-slot.is-selected {
  background: linear-gradient(
    140deg,
    rgba(159, 150, 250, 1) 0%,
    rgba(122, 112, 220, 1) 100%
  );
  border-color: rgba(180, 170, 255, 0.5);
  color: #fff;
  box-shadow:
    0 0 28px rgba(139, 130, 230, 0.45),
    0 4px 14px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* --- Summary pill + qualification form (post date+time pick) --- */

.cal-form[hidden] { display: none; }

.cal-form {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 28px);
  animation: cal-form-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes cal-form-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.cal-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(139, 130, 230, 0.16) 0%,
    rgba(139, 130, 230, 0.04) 100%
  );
  border: 1px solid rgba(139, 130, 230, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 22px rgba(139, 130, 230, 0.12);
}

.cal-summary-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cal-summary-label {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(180, 175, 255, 0.85);
}

.cal-summary-when {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-summary-change {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.86);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}

.cal-summary-change:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Form fields — underline style. Minimal, premium, focused. */

.cal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.6vw, 24px) clamp(18px, 2vw, 28px);
}

.cal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.cal-field-full {
  grid-column: 1 / -1;
}

.cal-field-label {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.cal-field-hint {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.32);
  font-weight: 400;
}

.cal-field-input {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding: 8px 0 10px;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  letter-spacing: 0.01em;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.3s ease;
}

.cal-field-input::placeholder {
  color: rgba(255, 255, 255, 0.28);
  font-weight: 300;
}

.cal-field-input:hover {
  border-bottom-color: rgba(255, 255, 255, 0.32);
}

.cal-field-input:focus {
  border-bottom-color: rgba(139, 130, 230, 0.85);
  box-shadow: 0 1px 0 0 rgba(139, 130, 230, 0.85);
}

/* Invalid styling only after the user has submitted at least once — the
   .cal-form gets data-validated="true" then. Before that, no red error
   noise as they type. */
.cal-form[data-validated="true"] .cal-field-input:invalid {
  border-bottom-color: rgba(255, 110, 110, 0.7);
}

/* --- Confirm button --- */

.cal-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 4px 14px rgba(0, 0, 0, 0.22);
  transition:
    opacity 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cal-confirm[hidden] { display: none; }

.cal-confirm[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.cal-confirm:not([disabled]):hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  border-color: rgba(139, 130, 230, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 36px rgba(139, 130, 230, 0.35),
    0 6px 22px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}

.cal-confirm-arrow {
  font-size: 1.1em;
  transition: transform 0.3s ease;
}

.cal-confirm:not([disabled]):hover .cal-confirm-arrow {
  transform: translateX(3px);
}

/* --- Success state --- */

.cal-success[hidden] { display: none; }

.cal-success {
  display: grid;
  gap: clamp(14px, 1.4vw, 22px);
  text-align: center;
  padding: clamp(24px, 3vw, 56px) 0;
  animation: cal-success-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes cal-success-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.cal-success-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(139, 130, 230, 0.16);
  border: 1px solid rgba(139, 130, 230, 0.55);
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 500;
  color: rgba(180, 175, 255, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 36px rgba(139, 130, 230, 0.35);
}

.cal-success-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cal-success-title {
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 38px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

.cal-success-when {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(14px, 1.05vw, 17px);
  color: rgba(255, 255, 255, 0.78);
}

.cal-success-note {
  margin-top: clamp(4px, 0.4vw, 8px);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(12px, 0.85vw, 14px);
  color: rgba(255, 255, 255, 0.45);
}

/* --- Responsive --- */

@media (max-width: 880px) {
  .contact-inner {
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 60px);
    align-items: start;
  }
}

@media (max-width: 560px) {
  .cal-slots-grid {
    grid-template-columns: 1fr;
  }
  .cal-form-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Process steps (unified s3-step style for the 5 captions) --------- */

.s3-step {
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 1.4vw, 22px);
  width: min(640px, 78vw);
  max-width: none;
  transform: translate(-50%, calc(-50% + (1 - var(--enter)) * 24px));
  opacity: calc(var(--enter) * (1 - var(--exit)));
}

.s3-step-num {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(139, 130, 230, 0.85);
}

.s3-step-title {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(46px, 6.8vw, 108px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.s3-step-sub {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  max-width: 44ch;
}

/* --- About (placeholder until content arrives) ------------------------ */

.about {
  background: #0a0a0a;
  padding: clamp(80px, 14vw, 180px) clamp(24px, 6vw, 80px);
}

.about-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 22px);
}

.about-eyebrow {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(10px, 0.82vw, 12px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(139, 130, 230, 0.9);
}

.about-headline {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(48px, 6.4vw, 104px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
}

.about-sub {
  margin: 0;
  max-width: 58ch;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}

/* --- Standalone pages (about, process, book) ------------------------- */

.page {
  background: #000;
  color: #fff;
  min-height: 100vh;
  padding: clamp(140px, 18vh, 200px) clamp(24px, 6vw, 80px) clamp(100px, 14vw, 180px);
}

.page-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 32px);
}

.page-eyebrow {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(10px, 0.82vw, 12px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(139, 130, 230, 0.9);
}

.page-headline {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(48px, 7vw, 116px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
}

.page-body {
  margin: 0;
  max-width: 58ch;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

.page-cta {
  align-self: flex-start;
  margin-top: clamp(20px, 3vw, 40px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: #fff;
  text-decoration: none;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(13px, 0.95vw, 15px);
  letter-spacing: 0.04em;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.page-cta:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 100%
  );
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

/* --- Process steps (on /process page) -------------------------------- */

.process-steps {
  list-style: none;
  margin: clamp(40px, 6vw, 80px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 56px);
}

.process-step {
  display: grid;
  grid-template-columns: clamp(80px, 9vw, 140px) 1fr;
  gap: clamp(20px, 3vw, 48px);
  padding-top: clamp(20px, 2.5vw, 36px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.process-step-num {
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(40px, 5vw, 76px);
  line-height: 0.9;
  color: rgba(139, 130, 230, 0.85);
}

.process-step-title {
  margin: 0 0 clamp(8px, 0.8vw, 14px);
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: #fff;
}

.process-step-text {
  margin: 0;
  max-width: 56ch;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 600px) {
  .process-step {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* /book page: reduce contact section's top padding since the header is
   already taking visual real estate and there's no scroll preamble. */
.contact--page {
  padding-top: clamp(140px, 18vh, 200px);
}

/* --- FAQ ------------------------------------------------------------
   Sits between the process section and the contact CTA. Single-column
   read, glassmorphic accordion cards. The plus icon morphs into a minus
   on open; the answer panel expands via the grid 0fr→1fr trick so we
   never measure heights from JS. Active items pick up a faint purple
   border + inner glow to echo the accent used elsewhere on the page. */

.faq {
  position: relative;
  z-index: 1;
  background: #000;
  color: #fff;
  padding: clamp(96px, 14vw, 200px) 6vw clamp(40px, 6vw, 96px);
  overflow: hidden;
}

/* Ambient glow behind the FAQ — barely there, but it lifts the section
   off the black void above and below. We use the radial gradient's
   natural falloff instead of a `filter: blur()` so the browser doesn't
   pay for a separate blur compositing pass (that pass was bleeding
   GPU time into the section 3 video scrub above). */
.faq::before {
  content: "";
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: min(800px, 90%);
  height: 420px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(139, 130, 230, 0.09) 0%,
    rgba(139, 130, 230, 0.02) 50%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}

.faq-inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
}

.faq-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(12px, 1.2vw, 20px);
  margin-bottom: clamp(48px, 6vw, 88px);

  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faq-head.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.faq-eyebrow {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(10px, 0.78vw, 12px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(139, 130, 230, 0.9);
}

.faq-headline {
  margin: 0;
  /* A hair of breathing room — line-height: 1 was clipping the descenders
     of the comma + lowercase tails once the gradient is masked to text.
     Matches the looser line-height the projects-title and contact-headline
     already use elsewhere on the site. */
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 88px);
  line-height: 1.05;
  padding-bottom: 0.05em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(230, 230, 230, 0.9) 45%,
    rgba(170, 170, 170, 0.75) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.faq-sub {
  margin: 0;
  max-width: 56ch;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}

.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 16px);
  position: relative;
  --faq-progress: 0;
}

/* Vertical scroll-progress rail to the left of the list. A faint
   hairline track with a purple foreground that grows as the visitor
   scrolls past each item. --faq-progress is written from JS each
   frame the user scrolls inside the FAQ. Desktop only — on phones
   the column is already edge-to-edge so a marker line would float
   awkwardly in the gutter. */
@media (min-width: 900px) {
  .faq-list::before,
  .faq-list::after {
    content: "";
    position: absolute;
    top: 0;
    left: clamp(-44px, -2.8vw, -28px);
    width: 1px;
    height: 100%;
    pointer-events: none;
  }
  .faq-list::before {
    background: rgba(255, 255, 255, 0.06);
  }
  .faq-list::after {
    background: linear-gradient(
      180deg,
      rgba(139, 130, 230, 0.95) 0%,
      rgba(139, 130, 230, 0.7) 100%
    );
    transform-origin: top;
    transform: scaleY(var(--faq-progress));
    transition: transform 0.15s linear;
    box-shadow: 0 0 14px rgba(139, 130, 230, 0.45);
  }
}

.faq-item {
  position: relative;
  /* Layered solid background gives the same glassy depth without a
     `backdrop-filter` compositing layer per item — 7 of those stacked
     was costing GPU time the section 3 scrub needed. */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%),
    rgb(14, 14, 18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(14px, 1.4vw, 22px);
  overflow: hidden;
  /* JS-driven scroll-in animation. Uses translate3d so hover-state
     translateX can compose cleanly with the entrance translateY. */
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 0.7s ease,
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.5s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.35);
}

.faq-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Hover + open both nudge the card slightly right — turns the list
   into a tactile thing that responds to attention. */
.faq-item.is-visible:hover,
.faq-item.is-visible.is-open {
  transform: translate3d(6px, 0, 0);
}

.faq-item:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 36px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(139, 130, 230, 0.10);
}

.faq-item.is-open {
  border-color: rgba(139, 130, 230, 0.42);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(139, 130, 230, 0.10) 0%, transparent 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.012) 100%),
    rgb(16, 16, 22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 44px rgba(0, 0, 0, 0.5),
    0 0 48px rgba(139, 130, 230, 0.16);
}

.faq-question {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  padding: clamp(18px, 1.8vw, 28px) clamp(22px, 2.4vw, 36px);
  text-align: left;
  color: #fff;
  cursor: pointer;
  font: inherit;
  transition: color 0.3s ease;
}

.faq-question:focus-visible {
  outline: 2px solid rgba(139, 130, 230, 0.7);
  outline-offset: -4px;
  border-radius: inherit;
}

/* Big editorial numeral. Antonio at display size, very translucent
   purple at rest so it sits as decoration; brightens on hover and
   reaches near-full purple when the item is open. Tabular figures
   keep the column's left edge perfectly aligned across all 7 rows. */
.faq-q-index {
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: rgba(139, 130, 230, 0.32);
  transition: color 0.4s ease, transform 0.4s ease;
  font-variant-numeric: tabular-nums;
  align-self: center;
  min-width: 1.4em;
  user-select: none;
}

.faq-item:hover .faq-q-index {
  color: rgba(139, 130, 230, 0.72);
}

.faq-item.is-open .faq-q-index {
  color: rgba(139, 130, 230, 0.98);
}

.faq-q-text {
  /* Inter (not Antonio) so the question reads as premium body content
     rather than a condensed display headline — closer to how the rest
     of the site uses Inter for anything you're meant to actually read. */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.96);
}

.faq-q-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.7);
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.3s ease;
}

.faq-item.is-open .faq-q-icon,
.faq-item:hover .faq-q-icon {
  color: rgba(139, 130, 230, 1);
}

/* Subtle 45deg twist on hover — the + tilts toward an × to signal
   "click to open." Restricted with :not(.is-open) so once the item
   opens, the parent rotation resets to 0 and the inner ::after
   animation (rotate + fade) cleanly resolves to a minus. */
.faq-item:hover:not(.is-open) .faq-q-icon {
  transform: rotate(45deg) scale(1.06);
}

.faq-q-icon::before,
.faq-q-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.35s ease;
}

/* Horizontal bar — always visible. */
.faq-q-icon::before {
  width: 100%;
  height: 2px;
  transform: translate(-50%, -50%);
}

/* Vertical bar — fades + rotates to complete the +→− morph. */
.faq-q-icon::after {
  width: 2px;
  height: 100%;
  transform: translate(-50%, -50%);
}

.faq-item.is-open .faq-q-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* Accordion expansion via the grid 0fr → 1fr trick. Browser handles
   the smooth height interpolation without any JS measurement. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 clamp(22px, 2.4vw, 36px);
}

.faq-answer-inner > p {
  margin: 0;
  padding-top: clamp(4px, 0.6vw, 10px);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.74);
}

.faq-answer-inner > p + p {
  padding-top: clamp(10px, 1vw, 16px);
}

/* Padding only when open, so the panel collapses cleanly to height 0
   when closed. The ::before pseudo draws a faint purple hairline between
   the question and answer copy. */
.faq-item.is-open .faq-answer-inner {
  position: relative;
  padding-bottom: clamp(22px, 2.2vw, 32px);
}

.faq-item.is-open .faq-answer-inner::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: clamp(14px, 1.4vw, 22px);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139, 130, 230, 0.32),
    transparent
  );
}

/* --- FAQ closing CTA --- */

.faq-cta {
  margin-top: clamp(40px, 5vw, 72px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
  text-align: center;

  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faq-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.faq-cta-text {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(13px, 0.95vw, 15px);
  color: rgba(255, 255, 255, 0.55);
}

.faq-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(11px, 0.82vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(139, 130, 230, 0.45);
  background: rgba(139, 130, 230, 0.06);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.4s ease;
}

.faq-cta-link:hover {
  background: rgba(139, 130, 230, 0.14);
  border-color: rgba(139, 130, 230, 0.8);
  box-shadow: 0 0 28px rgba(139, 130, 230, 0.25);
}

.faq-cta-arrow {
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faq-cta-link:hover .faq-cta-arrow {
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .faq {
    padding: clamp(72px, 14vw, 120px) 5vw clamp(40px, 8vw, 72px);
  }
  .faq-question {
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    padding: 16px 20px;
  }
  .faq-q-text {
    font-size: 16px;
  }
  /* Numerals scale down on phones so the question text stays the
     primary anchor and the row keeps a reasonable height. */
  .faq-q-index {
    font-size: 34px;
  }
}

/* --- /about page ----------------------------------------------------
   Five-section narrative: hero, manifesto, 3-second stat, principles,
   marquee, CTA. Scroll-driven reveals throughout. Visual language
   pulls directly from sections 1-3 of the homepage — black theatre,
   Antonio gradients, purple accent (rgb 139 130 230), monospace
   technical eyebrows, cinematic pacing. */

.about {
  background: #000;
  color: #fff;
  position: relative;
}

/* Eyebrow shared across about sections. */
.about-eyebrow {
  display: inline-block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(10px, 0.78vw, 12px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(139, 130, 230, 0.85);
}

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

.about-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(120px, 18vh, 200px) 6vw clamp(80px, 12vw, 160px);
  overflow: hidden;
}

/* Very subtle SVG noise grain — adds the "film" texture used in the
   homepage cinematics. Mix-blend-mode: overlay lets it sit on top
   of the gradient without crushing the colours. */
.about-hero-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

.about-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2vw, 32px);
  max-width: 1100px;
}

.about-hero-title {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 500;
  /* Larger than a section headline — this is the page nameplate, and
     a two-word title needs serious display weight to anchor a 100vh
     hero on its own. */
  font-size: clamp(72px, 13vw, 220px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(230, 230, 230, 0.9) 45%,
    rgba(170, 170, 170, 0.75) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.05em;
}

.about-hero-line {
  display: block;
}

/* Per-word entrance — JS adds .is-visible with a stagger so the
   headline assembles itself word by word like the hero cinematic. */
.about-hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(230, 230, 230, 0.9) 45%,
    rgba(170, 170, 170, 0.75) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.about-hero-word.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.about-hero-sub {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(15px, 1.2vw, 19px);
  color: rgba(255, 255, 255, 0.65);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.about-hero-sub.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.about-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 5vh, 56px);
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 1s ease;
}

.about-scroll-cue.is-visible {
  opacity: 1;
}

.about-scroll-cue-text {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.about-scroll-cue-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    transparent 100%
  );
  animation: aboutScrollPulse 2.4s ease-in-out infinite;
}

@keyframes aboutScrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); transform-origin: top; }
  50% { opacity: 0.9; transform: scaleY(1.15); transform-origin: top; }
}

/* --- Manifesto ------------------------------------------------------ */

.about-manifesto {
  position: relative;
  padding: clamp(120px, 16vw, 220px) 6vw;
}

/* Vertical purple hairline running through the manifesto on wide
   screens — visual anchor that ties the section to the page's
   editorial spine. Hidden on narrow viewports. */
.about-manifesto-rail {
  position: absolute;
  top: clamp(120px, 16vw, 220px);
  bottom: clamp(120px, 16vw, 220px);
  left: 50%;
  transform: translateX(-50%) translateX(-480px);
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(139, 130, 230, 0.5) 50%,
    transparent 100%
  );
  pointer-events: none;
}

@media (max-width: 1100px) {
  .about-manifesto-rail { display: none; }
}

.about-manifesto-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 48px);
}

.about-manifesto-text {
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.28;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.92);
}

.about-manifesto-text p {
  margin: 0;
}

.about-manifesto-text p + p {
  margin-top: clamp(18px, 2vw, 32px);
}

/* JS wraps each word in a span at runtime; words start dim and light
   up sequentially as the user scrolls past them. Creates a reading
   spotlight that draws the eye line-by-line through the manifesto. */
.about-word {
  display: inline-block;
  color: rgba(255, 255, 255, 0.18);
  transition: color 0.5s ease;
}

.about-word.is-lit {
  color: rgba(255, 255, 255, 0.95);
}

/* --- 3-second stat -------------------------------------------------- */

.about-stat {
  position: relative;
  padding: clamp(120px, 16vw, 220px) 6vw;
  background: linear-gradient(
    180deg,
    #000 0%,
    rgb(8, 8, 12) 50%,
    #000 100%
  );
  overflow: hidden;
}

.about-stat-glow {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(139, 130, 230, 0.15) 0%,
    rgba(139, 130, 230, 0.03) 40%,
    transparent 70%
  );
  pointer-events: none;
}

.about-stat-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

@media (max-width: 880px) {
  .about-stat-inner {
    grid-template-columns: 1fr;
  }
}

.about-stat-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.about-stat-num {
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(160px, 24vw, 380px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  background: linear-gradient(
    180deg,
    rgba(180, 175, 255, 1) 0%,
    rgba(139, 130, 230, 0.7) 60%,
    rgba(139, 130, 230, 0.3) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 60px rgba(139, 130, 230, 0.35));
  font-variant-numeric: tabular-nums;
}

.about-stat-unit {
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.about-stat-body {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 22px);
}

.about-stat-body p {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.about-stat-emphasis {
  font-family: "Antonio", "Arial Narrow", sans-serif !important;
  font-size: clamp(20px, 1.8vw, 28px) !important;
  font-weight: 300 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.96) !important;
  padding-top: clamp(8px, 1vw, 14px);
}

/* --- Principles ----------------------------------------------------- */

.about-principles {
  padding: clamp(120px, 16vw, 220px) 6vw;
}

.about-principles-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.about-principles-head {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 22px);
  margin-bottom: clamp(48px, 6vw, 96px);
}

.about-principles-title {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 84px);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(180, 180, 180, 0.8) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.05em;
}

.about-principles-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
}

@media (max-width: 760px) {
  .about-principles-list { grid-template-columns: 1fr; }
}

.about-principle {
  position: relative;
  padding: clamp(28px, 3vw, 44px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%),
    rgb(14, 14, 18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(14px, 1.4vw, 22px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 24px);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s ease,
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.4s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.35);
}

.about-principle.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.about-principle:hover {
  border-color: rgba(139, 130, 230, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 36px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(139, 130, 230, 0.12);
}

.about-principle-num {
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(44px, 4.6vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: rgba(139, 130, 230, 0.45);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.about-principle-body {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
}

.about-principle-title {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.1;
  letter-spacing: 0.008em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
}

.about-principle-text {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* --- CTA ----------------------------------------------------------- */

.about-cta-section {
  padding: clamp(140px, 18vw, 240px) 6vw;
  text-align: center;
}

.about-cta-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.about-cta-inner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.about-cta-headline {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 500;
  font-size: clamp(36px, 4.8vw, 76px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(200, 200, 200, 0.85) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.05em;
}

.about-cta-sub {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(14px, 1.05vw, 17px);
  color: rgba(255, 255, 255, 0.6);
}

.about-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(10px, 1.2vw, 18px);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(11px, 0.84vw, 13px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 999px;
  border: 1px solid rgba(139, 130, 230, 0.5);
  background: rgba(139, 130, 230, 0.06);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.4s ease;
}

.about-cta-link:hover {
  background: rgba(139, 130, 230, 0.16);
  border-color: rgba(139, 130, 230, 0.9);
  box-shadow: 0 0 36px rgba(139, 130, 230, 0.28);
}

.about-cta-arrow {
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.about-cta-link:hover .about-cta-arrow {
  transform: translateX(4px);
}

/* --- /process page --------------------------------------------------
   Hero + vertical roadmap + CTA. The roadmap is the centerpiece: a
   thin purple rail down the middle of the section that fills in as
   the visitor scrolls past, with five "stations" alternating
   left/right on desktop. Each station's marker dot brightens when
   the rail passes its anchor point, and its number gains a glowing
   gradient at the same moment. Reads like a timeline you're walking
   through, not a static list of bullet points. */

.process {
  background: #000;
  color: #fff;
  position: relative;
}

.process-eyebrow {
  display: inline-block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(10px, 0.78vw, 12px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(139, 130, 230, 0.85);
}

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

.process-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(120px, 18vh, 200px) 6vw clamp(80px, 12vw, 160px);
  overflow: hidden;
}

.process-hero-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

.process-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2vw, 32px);
  max-width: 1100px;
}

.process-hero-title {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 500;
  /* Same display weight as the about page nameplate — two-word title
     needs to fill the 100vh hero on its own. */
  font-size: clamp(72px, 13vw, 220px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(230, 230, 230, 0.9) 45%,
    rgba(170, 170, 170, 0.75) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.05em;
}

.process-hero-line {
  display: block;
}

.process-hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(230, 230, 230, 0.9) 45%,
    rgba(170, 170, 170, 0.75) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.process-hero-word.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.process-hero-sub {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(15px, 1.2vw, 19px);
  color: rgba(255, 255, 255, 0.65);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.process-hero-sub.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.process-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 5vh, 56px);
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 1s ease;
}

.process-scroll-cue.is-visible {
  opacity: 1;
}

.process-scroll-cue-text {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.process-scroll-cue-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    transparent 100%
  );
  animation: aboutScrollPulse 2.4s ease-in-out infinite;
}

@media (orientation: landscape) and (max-height: 520px) {
  .about-hero,
  .process-hero {
    min-height: 100svh;
    padding: 82px 6vw 42px;
  }

  .about-hero-inner,
  .process-hero-inner {
    gap: 12px;
  }

  .about-hero-title,
  .process-hero-title {
    font-size: clamp(54px, 10.5vw, 112px);
    line-height: 0.96;
  }

  .about-hero-sub,
  .process-hero-sub {
    max-width: min(78ch, 86vw);
    font-size: 14px;
    line-height: 1.35;
  }

  .about-scroll-cue,
  .process-scroll-cue {
    display: none;
  }
}

/* --- Roadmap ------------------------------------------------------- */

.process-roadmap {
  position: relative;
  padding: clamp(100px, 14vw, 180px) 6vw clamp(120px, 14vw, 200px);
}

.process-roadmap-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

/* The vertical track. Sits absolutely positioned at the visual centre
   of the section on desktop, shifts to the left margin on mobile. */
.process-rail {
  position: absolute;
  top: clamp(20px, 3vw, 50px);
  bottom: clamp(20px, 3vw, 50px);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 1;
}

/* The purple fill that grows downward as the user scrolls. Width is
   slightly wider than the track + a glow, so when the fill grows it
   visibly "lights up" the rail rather than just sitting on top of it. */
.process-rail-fill {
  position: absolute;
  top: 0;
  left: -1px;
  width: 3px;
  height: 0%;
  background: linear-gradient(
    180deg,
    rgba(139, 130, 230, 0.95) 0%,
    rgba(139, 130, 230, 0.7) 100%
  );
  box-shadow: 0 0 14px rgba(139, 130, 230, 0.55);
  transition: height 0.15s linear;
  border-radius: 2px;
}

.process-stations {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 8vw, 120px);
}

/* Three-column grid: content / marker / content. Each station picks
   which side its content sits on via data-side. The marker always
   lives in the middle column so it lines up with the rail. */
.process-station {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(30px, 4vw, 60px);
}

.process-station[data-side="left"] .process-station-content {
  grid-column: 1;
  text-align: right;
  align-items: flex-end;
  margin-left: auto;
}

.process-station[data-side="right"] .process-station-content {
  grid-column: 3;
  text-align: left;
  align-items: flex-start;
  margin-right: auto;
}

.process-station-marker {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

/* Dot starts as a dim outline; brightens + scales + adds a halo when
   the rail fill reaches it. The 6px black ring is the trick that
   makes the dot look like it sits over the rail (the ring punches
   through the purple line so the dot stays visually distinct). */
.process-station-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgb(14, 14, 18);
  border: 2px solid rgba(139, 130, 230, 0.4);
  box-shadow: 0 0 0 6px rgb(0, 0, 0);
  transition:
    background-color 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease,
    transform 0.5s ease;
}

.process-station.is-reached .process-station-dot {
  background: rgba(190, 185, 255, 1);
  border-color: rgba(139, 130, 230, 1);
  box-shadow:
    0 0 0 6px rgb(0, 0, 0),
    0 0 26px rgba(139, 130, 230, 0.7);
  transform: scale(1.1);
}

.process-station-content {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 14px);
  max-width: 44ch;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.process-station.is-visible .process-station-content {
  opacity: 1;
  transform: translateY(0);
}

.process-station-num {
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 300;
  font-size: clamp(64px, 7vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  background: linear-gradient(
    180deg,
    rgba(139, 130, 230, 0.55) 0%,
    rgba(139, 130, 230, 0.18) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-variant-numeric: tabular-nums;
  padding-bottom: 0.05em;
  user-select: none;
  /* Filter transition is what carries the glow on into the "reached"
     state — gradient changes alone don't animate cleanly with
     background-clip:text, but filter does. */
  transition: filter 0.6s ease;
}

.process-station.is-reached .process-station-num {
  background: linear-gradient(
    180deg,
    rgba(200, 195, 255, 1) 0%,
    rgba(139, 130, 230, 0.55) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(139, 130, 230, 0.45));
}

.process-station-title {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.05;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
}

.process-station-text {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* Mobile: single-column layout. Marker hugs the left edge, all
   content sits to its right regardless of data-side. The rail moves
   off-centre too, so it lines up with the markers. */
@media (max-width: 760px) {
  .process-rail {
    left: 23px;
    transform: none;
  }
  .process-station {
    grid-template-columns: 48px 1fr;
    column-gap: 20px;
  }
  .process-station[data-side="left"] .process-station-content,
  .process-station[data-side="right"] .process-station-content {
    grid-column: 2;
    text-align: left;
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
  }
  .process-station-marker {
    grid-column: 1;
    justify-content: flex-start;
  }
  .process-station-num {
    font-size: clamp(48px, 12vw, 64px);
  }
}

/* --- Process CTA --------------------------------------------------- */

.process-cta-section {
  padding: clamp(140px, 18vw, 240px) 6vw;
  text-align: center;
  position: relative;
}

.process-cta-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.process-cta-inner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.process-cta-headline {
  margin: 0;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 500;
  font-size: clamp(36px, 4.8vw, 76px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(200, 200, 200, 0.85) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.05em;
}

.process-cta-sub {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(14px, 1.05vw, 17px);
  color: rgba(255, 255, 255, 0.6);
}

.process-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(10px, 1.2vw, 18px);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(11px, 0.84vw, 13px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 999px;
  border: 1px solid rgba(139, 130, 230, 0.5);
  background: rgba(139, 130, 230, 0.06);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.4s ease;
}

.process-cta-link:hover {
  background: rgba(139, 130, 230, 0.16);
  border-color: rgba(139, 130, 230, 0.9);
  box-shadow: 0 0 36px rgba(139, 130, 230, 0.28);
}

.process-cta-arrow {
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.process-cta-link:hover .process-cta-arrow {
  transform: translateX(4px);
}

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

.site-footer {
  background: #0a0a0a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: clamp(40px, 5vw, 70px) clamp(24px, 4vw, 60px) clamp(20px, 2vw, 28px);
}

.site-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 60px);
}

.site-footer-brand {
  justify-self: start;
  font-family: "Antonio", sans-serif;
  font-size: clamp(20px, 1.6vw, 28px);
  letter-spacing: 0.34em;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

.site-footer-nav {
  justify-self: center;
  display: flex;
  gap: clamp(20px, 2.4vw, 40px);
}

.site-footer-nav a {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer-nav a:hover {
  color: #fff;
}

.site-footer-email {
  justify-self: end;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(13px, 0.95vw, 15px);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer-email:hover {
  color: #fff;
}

.site-footer-bottom {
  max-width: 1400px;
  margin: clamp(28px, 4vw, 48px) auto 0;
  padding-top: clamp(16px, 1.5vw, 22px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
@media (min-width: 720px) {
  .site-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
  }
}
.site-footer-legal {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 14px;
}
.site-footer-legal a {
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer-legal a:hover {
  color: rgba(255, 255, 255, 0.95);
}
body.blog .site-footer-bottom { border-top-color: rgba(255, 255, 255, 0.06); }

.site-footer-copy {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

@media (max-width: 720px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 22px;
  }
  .site-footer-brand,
  .site-footer-nav,
  .site-footer-email {
    justify-self: center;
  }
}