/* ═══════════════════════════════════════════════════════════════════════
   AMU SHIRINGANI PORTFOLIO — DESIGN SYSTEM
   Typography: Switzer (display + body)
   Typographic scale follows HIG & Material Design 3 guidance
   ═══════════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────────────────── */
@property --metal-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  /* Fonts */
  --font-display: 'Switzer', 'Inter', system-ui, sans-serif;
  --font-body: 'Switzer', system-ui, sans-serif;

  /* Type Scale */
  --text-xs: 0.75rem;
  /* 12px  — Metadata, badges */
  --text-sm: 0.875rem;
  /* 14px  — Small labels, captions */
  --text-base: 1rem;
  /* 16px  — Body copy baseline */
  --text-lg: 1.125rem;
  /* 18px  — Body large */
  --text-xl: 1.375rem;
  /* 22px  — Section subheadings */
  --text-2xl: 1.75rem;
  /* 28px  — H3 / Section headings */
  --text-3xl: 2.5rem;
  /* 40px  — H2 Display */
  --text-4xl: 3.5rem;
  --text-5xl: 4.9rem;
  /* 78px  — Larger H1 Hero */

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Letter Spacing — Micro-typography tuning (John Dobie reference) */
  --ls-display: -0.038em;
  /* Headlines: editorial tight */
  --ls-heading: -0.028em;
  /* Section headings: solid */
  --ls-body: -0.012em;
  /* Body: neutral, max legibility */
  --ls-meta: 0.04em;
  /* Metadata/tags: spaced uppercase */
  --ls-badge: 0.06em;
  /* Small role tags: breathing room */

  /* Line Height — Swiss architectural proportions */
  --lh-display: 1.08;
  /* H1: tight, visually cohesive */
  --lh-heading: 1.15;
  /* H2/H3: compact but readable */
  --lh-body: 1.6;
  /* Body: comfortable reading ~24px at 15px */
  --lh-relaxed: 1.7;
  /* Long paragraphs: optimal scanning */

  /* Colors */
  --ink: #041a02;
  /* Deep forest-black ink */
  --ink-70: rgba(4, 26, 2, 0.70);
  --ink-50: rgba(4, 26, 2, 0.50);
  --ink-30: rgba(4, 26, 2, 0.30);
  --ink-24: rgba(4, 26, 2, 0.24);
  --ink-12: rgba(4, 26, 2, 0.12);
  --ink-06: rgba(4, 26, 2, 0.06);
  --white: #ffffff;
  --surface: #FAF8F5;
  /* Warm off-white background matching memorisely.com */
  --surface-alt: #EFECE6;
  /* Warm sand tone */
  --green: #14c25f;
  --green-bg: rgba(20, 194, 95, 0.12);
  --purple: #6564ce;
  --color-highlight: #386E85;
  --color-footer-yellow: #c4761a;

  /* Spacing (8pt grid) */
  --space-1: 0.5rem;
  /* 8px */
  --space-2: 1rem;
  /* 16px */
  --space-3: 1.5rem;
  /* 24px */
  --space-4: 2rem;
  /* 32px */
  --space-5: 2.5rem;
  /* 40px */
  --space-6: 3rem;
  /* 48px */
  --space-8: 4rem;
  /* 64px */
  --space-10: 5rem;
  /* 80px */
  --space-12: 6rem;
  /* 96px */
  --space-16: 8rem;
  /* 128px */

  /* Layout — Fluid edge-to-edge system maintaining defined container padding margin */
  --container-max: 100%;
  --container-pad: clamp(1rem, 2.2vw, 2rem);
  --nav-height: 64px;

  /* Radii — Tightened architectural / Swiss proportions */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-full: 6px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(14, 14, 37, 0.08), 0 1px 2px rgba(14, 14, 37, 0.06);
  --shadow-md: 0 4px 16px rgba(14, 14, 37, 0.09), 0 2px 6px rgba(14, 14, 37, 0.06);
  --shadow-lg: 0 12px 32px rgba(14, 14, 37, 0.12), 0 4px 12px rgba(14, 14, 37, 0.06);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
}

/* ── RESET & SUPERELLIPSE SQUIRCLE SHAPING ──────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  corner-shape: squircle;
  corner-shape: superellipse(2);
}

/* Explicit container & card squircle superellipse geometry */
.container,
.card,
.tile,
.archive-tile,
.work-showcase-card,
.work-showcase-card__visual,
.notes-card,
.notes-list-item,
.cv-modal-card,
.nav__mobile-drawer,
.btn,
.nav__cv-btn,
.badge,
.tag {
  corner-shape: squircle;
  corner-shape: superellipse(2);
}

/* ── TEXT SELECTION & HIGHLIGHT ─────────────────────────────────────── */
::selection {
  background-color: var(--color-highlight, #386E85);
  color: #ffffff;
}

::-moz-selection {
  background-color: var(--color-highlight, #386E85);
  color: #ffffff;
}

mark,
.highlight {
  background-color: var(--color-highlight, #386E85);
  color: #ffffff;
}

/* No "scroll-behavior: smooth" here, on purpose. The scroll effects
   (GSAP ScrollTrigger) measure the page by jumping to the top and back;
   with smooth scrolling on the whole page that jump becomes a glide, the
   measurements come out wrong, and the hero ends up pushed down and faded
   at the top of the page (it happened after any window resize part-way
   down). Links within a page still glide: script.js does that per click. */
html {
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
  overscroll-behavior-y: none;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--ink);
  background-color: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

ul,
ol {
  list-style: none;
}

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

strong {
  font-weight: var(--fw-semibold);
}

/* ── LAYOUT UTILITIES ───────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-16);
}

/* ═══════════════════════════════════════════════════════════════════════
   APPLE NAVIGATION & MEGA DROPDOWN SYSTEM
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --apple-nav-bg: rgba(255, 255, 255, 0.82);
  --apple-nav-bg-solid: #ffffff;
  --apple-nav-border: rgba(0, 0, 0, 0.08);
  --apple-nav-text: rgba(24, 24, 27, 0.8);
  --apple-nav-text-hover: #18181b;
  --apple-nav-text-dim: rgba(24, 24, 27, 0.42);
  --apple-nav-accent: #0071e3;
  --apple-dropdown-bg: #ffffff;
  --apple-dropdown-shadow: 0 40px 80px -10px rgba(0, 0, 0, 0.14), 0 20px 30px -10px rgba(0, 0, 0, 0.06);
  --apple-spotlight-bg: #ffffff;
}

html.dark-mode {
  --apple-nav-bg: rgba(17, 17, 16, 0.82);
  --apple-nav-bg-solid: #111110;
  --apple-nav-border: rgba(255, 255, 255, 0.08);
  --apple-nav-text: rgba(228, 230, 223, 0.85);
  --apple-nav-text-hover: #ffffff;
  --apple-nav-text-dim: #92948f;
  --apple-nav-accent: #2997ff;
  --apple-dropdown-bg: #111110;
  --apple-dropdown-shadow: 0 40px 80px -10px rgba(0, 0, 0, 0.7), 0 20px 30px -10px rgba(0, 0, 0, 0.5);
  --apple-spotlight-bg: #1e1e1d;
}

/* Base Nav Container — Gradual progressive blur: 100% at top to 0% at bottom */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: 1100;
  background-color: transparent;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transform: translate3d(0, 0, 0);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
  will-change: transform;
}

/* Hidden state when scrolling down — slides up out of view */
.nav.nav--hidden {
  transform: translate3d(0, -100%, 0);
  pointer-events: none;
}

/* Ensure absolutely no shadow or line pseudo-element */
.nav::after {
  display: none !important;
  box-shadow: none !important;
}

/* Seamless glass on hero — completely borderless and shadowless */
body.has-hero-showcase.on-hero .nav:not(.nav--dropdown-open) {
  background-color: transparent;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.has-hero-showcase.on-hero .nav:not(.nav--dropdown-open) .nav__link {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.35), 0 0 3px rgba(0, 0, 0, 0.22);
}

body.has-hero-showcase.on-hero .nav:not(.nav--dropdown-open) .nav__link:hover {
  color: #ffffff;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.35), 0 0 3px rgba(0, 0, 0, 0.22);
}

/* Centered desktop capsule pill menu (dead center of navigation bar) */
@media (min-width: 861px) {
  .nav__inner {
    position: relative;
  }

  .nav__menu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    margin-left: 0 !important;
    height: 42px;
    max-height: 42px;
    box-sizing: border-box;
    padding: 0 1.5rem !important;
    display: inline-flex;
    align-items: center;
    gap: 1.75rem;
    border-radius: 9999px !important;
    background-color: rgba(14, 14, 17, 0.72);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
    border: none !important;
    outline: none !important;
    z-index: 10;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
  }

  .nav__item {
    display: inline-flex;
    align-items: center;
    height: 100%;
  }

  .nav__link {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
  }
}

/* Hero showcase cv button inherits liquid metal system */

body.has-hero-showcase.on-hero .nav:not(.nav--dropdown-open):not(.nav--drawer-open) .nav__hamburger-line {
  background-color: #ffffff;
}

/* Nav when dropdown or mobile drawer is open — seamless with pop-up/drawer, zero divider line */
.nav.nav--dropdown-open {
  background-color: rgba(14, 14, 17, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.nav.nav--drawer-open {
  background-color: rgba(18, 18, 17, 0.50) !important;
  backdrop-filter: blur(36px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(190%) !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.nav.nav--drawer-open::before {
  opacity: 0;
}

.nav__inner {
  position: relative;
  z-index: 1010;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Brand */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.nav__brand:hover {
  opacity: 0.85;
  transform: scale(1.03);
}

.nav__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.nav__brand-name {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ffffff;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
  transition: color 0.15s ease;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.35), 0 0 3px rgba(0, 0, 0, 0.22);
}

html.dark-mode .nav__avatar {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Audio Player UI hidden per user direction */
.nav__audio {
  display: none !important;
}

/* Desktop Horizontal Menu — Right-aligned, grouped with nav actions */
.nav__menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  pointer-events: auto;
  white-space: nowrap;
  margin-left: auto;
}

.nav__item {
  position: relative;
  flex-shrink: 0;
}

.nav__link {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 450;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  padding: 0.5rem 0.25rem;
  display: inline-flex;
  align-items: center;
  transition: color 0.18s ease;
  cursor: pointer;
  background: transparent;
  border: none;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.35), 0 0 3px rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}

.nav__link:hover {
  color: #ffffff;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.35), 0 0 3px rgba(0, 0, 0, 0.22);
}

@media screen and (max-width: 1024px) {
  .nav__menu {
    gap: 1.25rem;
  }

  .nav__actions {
    gap: 1.15rem;
  }
}

@media screen and (max-width: 940px) {
  .nav__menu {
    gap: 1rem;
  }

  .nav__menu .nav__link {
    font-size: 13px;
    padding: 0.5rem 0.15rem;
  }

  .nav__actions {
    gap: 0.85rem;
  }
}

.nav__link--start-project {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .nav__menu .nav__link--start-project {
    display: none;
  }
}

.nav__link--active {
  color: #ffffff;
  font-weight: 500;
  background: transparent !important;
  background-color: transparent !important;
  text-shadow: none !important;
}

/* Apple effect: when dropdown is open, non-hovered items gently dim */
.nav--dropdown-open .nav__item:not(.nav__item--active) .nav__link {
  opacity: 0.45;
}

/* Utilities (Right) */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   NAV CV BUTTON — REFINED PILL
   Fill matches .hero__headline--muted ('that are intuitive first' = rgba(255, 255, 255, 0.46))
   Calm, premium interaction without chrome distortion
   ═══════════════════════════════════════════════════════════════════ */
.nav__cv-btn:not(.is-close-btn) {
  height: 42px;
  max-height: 42px;
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 9999px !important;
  text-decoration: none !important;
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  border: none !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: 
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  isolation: isolate;
}

/* Disabled iridescent dispersion halo */
.nav__cv-btn:not(.is-close-btn)::after {
  display: none;
}

/* Button Face: Fill matches 'that are intuitive first' (rgba(255, 255, 255, 0.46)) */
.nav__cv-btn:not(.is-close-btn) .nav__cv-body {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.35rem;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.46);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  box-shadow: none;
  border: none !important;
  outline: none !important;
  overflow: hidden;
  z-index: 2;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Disabled specular glare arc */
.nav__cv-btn:not(.is-close-btn) .nav__cv-body::before {
  display: none;
}

/* Crisp typography: Deep dark contrast (#0e1017) against the 46% white fill */
.nav__cv-btn:not(.is-close-btn) .nav__cv-text {
  position: relative;
  z-index: 4;
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Switzer", sans-serif);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: #0e1017;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
  text-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════
   HOVER STATE: CALM, PREMIUM HOVER (CHROME ANIMATION REMOVED)
   ═══════════════════════════════════════════════════════════════════ */
.nav__cv-btn:not(.is-close-btn):hover {
  transform: translateY(-1px) scale(1.02);
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
  animation: none !important;
}

.nav__cv-btn:not(.is-close-btn):focus,
.nav__cv-btn:not(.is-close-btn):focus-visible {
  outline: none !important;
  border: none !important;
}

.nav__cv-btn:not(.is-close-btn):hover::after {
  display: none !important;
  animation: none !important;
}

.nav__cv-btn:not(.is-close-btn):hover .nav__cv-body {
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: none !important;
}

.nav__cv-btn:not(.is-close-btn):hover .nav__cv-body::before {
  display: none !important;
}

.nav__cv-btn:not(.is-close-btn):hover .nav__cv-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #000000 !important;
  color: #000000 !important;
  animation: none !important;
  filter: none !important;
}

.nav__cv-btn:not(.is-close-btn):active {
  transform: translateY(0px) scale(0.98);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Apple Hamburger (Mobile Only) — touch-friendly 44x44 tap target */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 102;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.nav__hamburger-line {
  width: 18px;
  height: 1.75px;
  background-color: var(--apple-nav-text-hover);
  border-radius: 2px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.nav__hamburger.is-active .nav__hamburger-line:nth-child(1) {
  transform: translateY(3.875px) rotate(45deg);
}

.nav__hamburger.is-active .nav__hamburger-line:nth-child(2) {
  transform: translateY(-3.875px) rotate(-45deg);
}

/* ── APPLE MOBILE DRAWER & ACCORDIONS ───────────────────────────────── */
.nav__mobile-drawer {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--nav-height));
  background: rgba(18, 18, 17, 0.50);
  backdrop-filter: blur(36px) saturate(190%);
  -webkit-backdrop-filter: blur(36px) saturate(190%);
  z-index: 1050;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.nav__mobile-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav__mobile-inner {
  padding: 24px 24px 48px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 540px;
  margin: 0 auto;
}

.nav__mobile-accordion {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--apple-nav-border);
}

.nav__mobile-acc-item {
  border-bottom: 1px solid var(--apple-nav-border);
}

.nav__mobile-acc-item:last-child {
  border-bottom: none !important;
}

.nav__mobile-acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: clamp(22px, 5.5vw, 26px);
  font-weight: 600;
  color: var(--apple-nav-text-hover);
  cursor: pointer;
  text-align: left;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.nav__mobile-chevron {
  width: 18px;
  height: 18px;
  color: var(--apple-nav-text-dim);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.nav__mobile-acc-item.is-open .nav__mobile-chevron {
  transform: rotate(180deg);
  color: var(--apple-nav-accent);
}

.nav__mobile-acc-panel {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 6px 4px 22px 10px;
}

.nav__mobile-acc-item.is-open .nav__mobile-acc-panel {
  display: flex;
}

.nav__mobile-sublink {
  font-size: clamp(15px, 4vw, 17px);
  line-height: 1.45;
  color: var(--apple-nav-text);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.15s ease;
}

.nav__mobile-sublink:hover {
  color: var(--apple-nav-accent);
}

.nav__mobile-sublink--bold {
  font-weight: var(--fw-semibold);
  color: var(--apple-nav-accent);
}

.nav__mobile-bottom-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding-top: 0;
  border-top: none !important;
}

.nav__mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  color: var(--apple-nav-text-hover);
  background: var(--ink-06);
  border: 1px solid var(--ink-12);
  transition: all 0.15s ease;
  min-height: 48px;
}

html.dark-mode .nav__mobile-cta {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.nav__mobile-cta--primary {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

html.dark-mode .nav__mobile-cta--primary {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* Mobile Direct Links (About & Contact) */
.nav__mobile-direct-link {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 18px 4px;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: clamp(22px, 5.5vw, 26px);
  font-weight: 600;
  color: var(--apple-nav-text-hover);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  letter-spacing: -0.025em;
  line-height: 1.25;
  transition: color 0.15s ease;
}

.nav__mobile-direct-link:hover {
  color: var(--apple-nav-accent);
}

/* ── CONTACT DETAILS MODAL OVERLAY ──────────────────────────────────── */
.nav__contact-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}

.nav__contact-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav__contact-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 12, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav__contact-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-xl, 18px);
  padding: 28px 26px;
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05);
  transform: scale(0.96) translateY(12px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  color: #ffffff;
  box-sizing: border-box;
}

.nav__contact-overlay.is-active .nav__contact-card {
  transform: scale(1) translateY(0);
}

.nav__contact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.nav__contact-badge {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--ls-meta, 0.04em);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 9999px;
}

.nav__contact-close-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.nav__contact-close-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  transform: scale(1.05);
}

.nav__contact-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.nav__contact-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.45;
  margin: 0 0 20px 0;
}

.nav__contact-channels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.nav__contact-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px;
  border-radius: 12px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.nav__contact-channel:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

.nav__contact-channel-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
}

.nav__contact-channel-info {
  flex: 1;
  min-width: 0;
}

.nav__contact-channel-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  display: block;
  margin-bottom: 2px;
}

.nav__contact-channel-val {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.nav__contact-channel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.nav__contact-action-btn {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.nav__contact-action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.22);
}

.nav__contact-action-btn--primary {
  background: #ffffff;
  color: #0d0d10;
  border-color: #ffffff;
  font-weight: 600;
}

.nav__contact-action-btn--primary:hover {
  background: #ebebeb;
  color: #000000;
  border-color: #ebebeb;
  transform: translateY(-1px);
}

.nav__contact-quicklinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

@media screen and (max-width: 480px) {
  .nav__contact-quicklinks {
    grid-template-columns: 1fr;
  }
}

.nav__contact-quicklink-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  text-decoration: none;
  color: #ffffff;
  transition: all 0.15s ease;
}

.nav__contact-quicklink-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.nav__contact-ql-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
}

.nav__contact-ql-text {
  flex: 1;
  min-width: 0;
}

.nav__contact-ql-title {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  display: block;
  margin-bottom: 2px;
}

.nav__contact-ql-desc {
  font-family: var(--font-body);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.5);
  display: block;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav__contact-ql-arrow {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.15s ease, color 0.15s ease;
}

.nav__contact-quicklink-card:hover .nav__contact-ql-arrow {
  color: #ffffff;
  transform: translateX(3px);
}

.nav__contact-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-body);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  flex-wrap: wrap;
}

.nav__contact-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__contact-social-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.nav__contact-social-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Responsive Breakpoints */
@media screen and (max-width: 860px) {
  .nav__menu {
    display: none !important;
  }

  .nav__hamburger {
    display: flex;
  }

  .nav__mobile-drawer {
    display: block;
  }
}

body.no-scroll {
  overflow: hidden;
}

/* ── BUTTONS ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--r-full);
  /* Capsule buttons */
  padding: 0.75rem 1.75rem;
  /* Slightly wider padding for luxury feel */
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    outline-color var(--dur-base) ease,
    transform var(--dur-fast) ease;
}

.btn:active {
  transform: scale(0.97);
}

/* Primary: dark fill */
.btn--primary {
  background-color: var(--ink);
  color: var(--white);
  outline: 3px solid transparent;
  outline-offset: 2px;
}

.btn--primary:hover {
  background-color: #3f3f46;
  outline-color: rgba(24, 24, 27, 0.2);
}

/* Ghost: outlined */
.btn--ghost {
  background-color: transparent;
  color: var(--ink);
  outline: 1px solid var(--ink-30);
  outline-offset: 0px;
}

.btn--ghost:hover {
  background-color: var(--ink-06);
  outline-color: var(--ink-50);
}

/* Small size modifier */
.btn--sm {
  font-size: var(--text-xs);
  padding: 0.5rem 1rem;
}

/* ── HERO SECTION ───────────────────────────────────────────────────── */

/* Aurora orb keyframes */
@keyframes auroraA {
  0% {
    transform: translate(0%, 0%) scale(1);
  }

  33% {
    transform: translate(8%, -12%) scale(1.12);
  }

  66% {
    transform: translate(-6%, 8%) scale(0.92);
  }

  100% {
    transform: translate(0%, 0%) scale(1);
  }
}

@keyframes auroraB {
  0% {
    transform: translate(0%, 0%) scale(1);
  }

  33% {
    transform: translate(-10%, 6%) scale(1.08);
  }

  66% {
    transform: translate(7%, -9%) scale(1.15);
  }

  100% {
    transform: translate(0%, 0%) scale(1);
  }
}

@keyframes auroraC {
  0% {
    transform: translate(0%, 0%) scale(1);
  }

  50% {
    transform: translate(5%, 10%) scale(1.1);
  }

  100% {
    transform: translate(0%, 0%) scale(1);
  }
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: 140px;
  padding-bottom: var(--space-4);
  overflow: visible;
  isolation: isolate;
}

.hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-grow: 1;
}

/* Aurora canvas — sits behind all hero content */
.hero::before,
.hero::after,
.hero .hero__orb {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Orb 1 — large amber, top-left */
.hero::before {
  width: 640px;
  height: 640px;
  top: -120px;
  left: -160px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.22) 0%, transparent 70%);
  animation: auroraA 14s ease-in-out infinite;
}

/* Orb 2 — warm rose/pink, bottom-right */
.hero::after {
  width: 500px;
  height: 500px;
  bottom: -80px;
  right: -100px;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.18) 0%, transparent 70%);
  animation: auroraB 18s ease-in-out infinite;
}

/* Orb 3 — warm violet, centre-right (via extra element) */
.hero__orb--c {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
  width: 420px;
  height: 420px;
  top: 20%;
  right: 15%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
  animation: auroraC 22s ease-in-out infinite;
}

.hero__copy {
  max-width: 1000px;
  margin-bottom: var(--space-6);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── SHOWCASE HERO (HOME) ───────────────────────────────────────────── */
.hero--showcase {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
  padding-top: var(--nav-height, 64px);
  padding-bottom: calc(var(--hero-card-h-active, 200px) - var(--hero-card-h-inactive, 100px) - var(--hero-sandwich-gap, 14px) - 44px + var(--hero-strip-gap, 4px));
  overflow: hidden;
  isolation: isolate;
  background-color: #111110;
  border: none;
  perspective: 1200px;
  perspective-origin: 50% 70%;
  transform-style: preserve-3d;
}

.hero--showcase::before,
.hero--showcase::after {
  display: none !important;
}

/* Background image slideshow filling the entire space with vertical overscan for smooth parallax */
.hero__bg-wrap {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97);
  transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 2.2s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Outgoing slide holds its continuous pan while fading out underneath */
.hero__slide.is-exiting {
  opacity: 0;
  visibility: visible;
  transform: scale(1.01);
  z-index: 2;
  transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 2s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__slide.is-exiting .hero__bg-img {
  animation: heroImagePan 22s linear forwards;
}

/* Incoming slide fades in on top and begins its pan with organic scale bloom */
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 3;
  transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 2.2s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__bg-img {
  display: block;
  width: 115%;
  height: 100%;
  max-width: none !important;
  min-width: 115%;
  min-height: 100%;
  object-fit: cover;
  object-position: left center;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.hero__slide.is-active .hero__bg-img {
  animation: heroImagePan 22s linear forwards;
}

@keyframes heroImagePan {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-13%, 0, 0);
  }
}

/* Tablet & Mobile: center-referenced pan animation preserving timing, easing & repeat behavior */
@media screen and (max-width: 1024px) {
  .hero__bg-img {
    position: absolute;
    top: 0;
    left: -37.5%;
    width: 175%;
    min-width: 175%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: translate3d(20%, 0, 0);
  }

  .hero__slide.is-active .hero__bg-img,
  .hero__slide.is-exiting .hero__bg-img {
    animation: heroImagePanMobile 22s linear forwards;
  }

  @keyframes heroImagePanMobile {
    0% {
      transform: translate3d(20%, 0, 0);
    }
    50% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-20%, 0, 0);
    }
  }
}

/* Dark scrim behind the hero text. Three soft curves instead of a straight
   band: a pool behind the headline (bottom-left), a smaller one behind
   the folders (bottom-right) and a shallow dome along the bottom that
   meets the page colour. Every curve uses many eased stops, so there is
   no visible line where the darkness begins. */
.hero__gradient-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    /* 0. Top scrim for navbar legibility */
    linear-gradient(to bottom, rgba(17, 17, 16, 0.5) 0%, rgba(17, 17, 16, 0.2) 15%, transparent 30%),
    /* 1. Grounding atmosphere along the bottom area (brought down so the hero artwork remains clear) */
    linear-gradient(to top, rgba(17, 17, 16, 0.96) 0%, rgba(17, 17, 16, 0.76) 18%, rgba(17, 17, 16, 0.36) 32%, transparent 48%),
    /* 2. Soft pool behind the bottom-left progress slider */
    radial-gradient(
      ellipse 72% 38% at 0% 100%,
      rgba(17, 17, 16, 0.92) 0%,
      rgba(17, 17, 16, 0.78) 14%,
      rgba(17, 17, 16, 0.52) 28%,
      rgba(17, 17, 16, 0.26) 44%,
      transparent 70%
    ),
    /* 3. Pool behind the folders on bottom right */
    radial-gradient(
      ellipse 52% 32% at 100% 100%,
      rgba(17, 17, 16, 0.82) 0%,
      rgba(17, 17, 16, 0.62) 16%,
      rgba(17, 17, 16, 0.32) 34%,
      transparent 64%
    ),
    /* 4. A subtle sliver of solid page colour so the hero meets the next section cleanly */
    linear-gradient(to top, #111110 0%, rgba(17, 17, 16, 0.6) 3%, transparent 8%);
}

/* ── HERO TOP HEADER ROW & 4-COLUMN METADATA (MONTRA editorial) ─────── */
.hero__header-container {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.hero__header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3rem);
  width: 100%;
}

.hero__header-sub {
  margin-left: auto;
  flex-shrink: 0;
  max-width: clamp(280px, 28vw, 420px);
}

.hero--showcase .hero__header-sub .hero__sub {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 0.95vw, 0.925rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  width: 100%;
  max-width: 100%;
  text-align: left;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
}

.hero__meta-strip {
  display: flex;
  align-items: baseline;
  gap: clamp(1.25rem, 2.8vw, 3.25rem);
  margin-left: auto;
  padding-bottom: 0;
  flex-shrink: 0;
}

.hero__meta-item {
  font-family: var(--font-body);
  font-size: clamp(11px, 0.8vw, 12px);
  font-weight: 550;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.hero__meta-item--loc {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

@media screen and (max-width: 980px) {
  .hero__header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }

  .hero__header-sub {
    width: 100%;
    margin-left: 0;
    max-width: 560px;
  }

  .hero__meta-strip {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    gap: clamp(1rem, 3.5vw, 2.5rem);
    padding-bottom: 0;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 640px) {
  .hero__meta-strip {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
    gap: 0.75rem;
    padding-top: 0.25rem;
  }

  .hero__meta-item {
    font-size: 11px;
    letter-spacing: 0.05em;
  }
}

/* ── HERO MEDIA STRIP (Center Carousel) ─────────────────────────────── */
:root {
  --hero-card-w: 150px;
  --hero-card-h-inactive: 100px; /* 3:2 landscape (150x100) */
  --hero-card-h-active: 200px;   /* 3:4 portrait (150x200, exactly double height) */
  --hero-strip-gap: 4px;
  --hero-sandwich-gap: clamp(12px, 1.6vh, 18px);
}

.hero-strip {
  position: relative;
  width: 100%;
  height: var(--hero-card-h-inactive, 100px);
  display: flex;
  align-items: flex-start;
  overflow: visible;
  z-index: 6;
  pointer-events: auto;
  user-select: none;
  margin-top: var(--hero-sandwich-gap);
  margin-bottom: var(--hero-sandwich-gap);
  transition:
    height 1.15s cubic-bezier(0.16, 1, 0.3, 1),
    margin-bottom 1.15s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.65s ease;
  will-change: height, margin-bottom, opacity;
}

/* Before entrance animation (during 1s delay): strip has zero height so H1 and supporting text sit together */
.hero-strip.is-enter-pending {
  height: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* While revealing: strip height opens smoothly to 100px, pushing supporting text down and creating separation */
.hero-strip.is-enter-revealing {
  height: var(--hero-card-h-inactive, 100px);
  margin-bottom: var(--hero-sandwich-gap);
  overflow: hidden;
  opacity: 1;
}

/* Once revealed: overflow visible so active 3:4 portrait card extends downwards */
.hero-strip.is-revealed {
  height: var(--hero-card-h-inactive, 100px);
  margin-bottom: var(--hero-sandwich-gap);
  overflow: visible !important;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-strip,
  .hero-strip.is-enter-pending,
  .hero-strip.is-enter-revealing {
    height: var(--hero-card-h-inactive, 100px) !important;
    margin-bottom: var(--hero-sandwich-gap) !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
  }
}

/* Subtle edge gradients removed per user direction */
.hero-strip::before,
.hero-strip::after {
  display: none !important;
}

.hero-strip__track {
  display: flex;
  align-items: flex-start;
  gap: var(--hero-strip-gap, 4px);
  will-change: transform;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  margin: 0;
  list-style: none;
  height: 100%;
  overflow: visible;
}

.hero-strip__card {
  position: relative;
  width: var(--hero-card-w, 150px);
  height: var(--hero-card-h-inactive, 100px); /* 3:2 landscape */
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  background-color: rgba(20, 20, 24, 0.85);
  box-shadow: none;
  opacity: 0.6;
  transition:
    height 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.45s ease,
    box-shadow 0.45s ease;
  will-change: height, opacity;
  padding: 0;
  border: none !important;
  outline: none !important;
}

/* Staggered bottom-up swipe entrance animation with image in place */
.hero-strip__card.is-enter-pending {
  clip-path: inset(100% 0 0 0 round 4px);
  opacity: 0;
  pointer-events: none;
}

.hero-strip__card.is-enter-revealing {
  clip-path: inset(0% 0 0 0 round 4px);
  opacity: 0.6;
  pointer-events: auto;
  transition:
    clip-path 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s ease;
}

.hero-strip__card:hover:not(.is-active) {
  opacity: 0.85;
  border: none !important;
  outline: none !important;
}

.hero-strip__card.is-active {
  height: var(--hero-card-h-active, 200px); /* 3:4 portrait (anchored from top down) */
  opacity: 1;
  border: none !important;
  outline: none !important;
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.8);
  cursor: default;
}

/* The first time the middle card grows (on load, once the cards have
   arrived): slower than a normal change of card, and easing out, so it
   reads as the card opening rather than switching. */
.hero-strip.is-first-grow .hero-strip__card.is-active {
  transition:
    height 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.6s ease,
    box-shadow 0.9s ease;
}

.hero-strip__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  background-color: #18181b;
}

@media screen and (max-width: 768px) {
  :root {
    --hero-card-w: 120px;
    --hero-card-h-inactive: 80px;
    --hero-card-h-active: 160px;
    --hero-strip-gap: 3px;
    --hero-sandwich-gap: 12px;
  }

  .hero--showcase {
    height: auto !important;
    min-height: 100dvh;
    justify-content: flex-start;
    gap: 0;
    padding-bottom: 2.75rem;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --hero-card-w: 96px;
    --hero-card-h-inactive: 64px;
    --hero-card-h-active: 128px;
    --hero-strip-gap: 3px;
    --hero-sandwich-gap: 10px;
  }

  .hero-progress {
    gap: 0.5rem !important;
  }

  .hero-progress__track {
    width: 68px !important;
  }
}

/* ── HERO PROGRESS SLIDER (Bottom Left - Hidden for now per user request) ─ */
.hero-progress {
  display: none !important;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.25rem;
  user-select: none;
}

.hero-progress__num {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.18s ease;
}

.hero-progress__num:hover {
  color: #ffffff;
}

.hero-progress__track {
  width: 130px;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.hero-progress__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #fef08a; /* Golden yellow */
  box-shadow: 0 0 8px rgba(254, 240, 138, 0.95), 0 0 2px #fef08a;
  border-radius: 999px;
  transform-origin: left center;
  will-change: width;
}

.hero--showcase .hero__header-container,
.hero--showcase .hero__container {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  height: auto !important;
}

.hero--showcase .hero__container {
  position: relative;
  z-index: 7;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: clamp(24px, 3.5vw, 48px);
  height: auto !important;
  min-height: 0 !important;
}

.hero--showcase .hero__content {
  width: 100%;
  max-width: clamp(440px, 32vw, 520px);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: auto;
  text-align: left;
  will-change: transform, opacity;
}

.hero--showcase .hero__headline--home {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 2.75vw, 2.85rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 0 !important;
  text-align: left;
  white-space: normal;
  max-width: 580px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.hero--showcase .hero__headline--home br {
  display: none !important;
}

.hero--showcase .hero__headline--primary {
  color: #ffffff;
  display: block;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

.hero--showcase .hero__headline--primary.is-bright {
  color: #ffffff;
  text-shadow: none;
}

.hero--showcase .hero__headline--muted {
  color: #ffffff;
  font-weight: 500;
  display: block;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

.hero__dynamic-slot {
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  white-space: nowrap;
  line-height: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  /* Invisible bleed (padding cancelled by equal negative margin = zero layout change)
     so the mask below has room for the vertical rise + blur halo of swapping words */
  margin: -0.45em 0 -0.45em -0.2em;
  padding: 0.45em 0 0.45em 0.2em;
  border: 0;
  box-sizing: content-box;
  /* Feathered right edge: 0 at rest (crisp), widened by JS only while words swap,
     so text never paints over the gap or "platforms" and reveals softly as space opens */
  --feather: 0px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--feather)), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--feather)), transparent 100%);
}

.hero__dynamic-word {
  display: inline-block;
  vertical-align: baseline;
  line-height: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  color: #ffffff;
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: content-box;
  will-change: transform, opacity, filter;
}

.hero__dynamic-word--out {
  position: absolute;
  /* Match the slot's bleed padding so the outgoing word stays exactly in place */
  left: 0.2em;
  top: 0.45em;
  pointer-events: none;
  white-space: nowrap;
}

.hero--showcase .hero__sub {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 0.95vw, 0.925rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72);
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: left;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
}

.hero--showcase .hero__cta-row {
  display: none !important;
}

.hero--showcase .hero-progress {
  margin-top: 0 !important;
}

/* ── HERO INFINITE CAROUSEL (Disabled) ── */

/* ── 4-IMAGE 1.5-SECOND HARD CUT (6S CYCLE, 1.5S PER IMAGE, ZERO EASING / ZERO TRANSITION) ── */
.archive-tile--hard-cut {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-color: #0c0c10;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  clip-path: inset(0 round 8px);
}

.archive-tile--hard-cut .archive-tile__cut-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none;
  border-radius: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: none !important;
  will-change: opacity, visibility;
}

/* Layer stack:
   1: Codex Image 14 Sept 2026 (0s–1.5s)
   2: glowing laptop mockup (1.5s–3s)
   3: Music streaming app for rising Amapiano sounds (3s–4.5s)
   4: silhouette macbook pro mockup (4.5s–6s)
*/
.archive-tile--hard-cut .archive-tile__cut-img--1 {
  z-index: 4;
  animation: archiveTileCut1 6s steps(1, end) infinite;
}

.archive-tile--hard-cut .archive-tile__cut-img--2 {
  z-index: 3;
  animation: archiveTileCut2 6s steps(1, end) infinite;
}

.archive-tile--hard-cut .archive-tile__cut-img--3 {
  z-index: 2;
  animation: archiveTileCut3 6s steps(1, end) infinite;
}

.archive-tile--hard-cut .archive-tile__cut-img--4 {
  z-index: 1;
  animation: archiveTileCut4 6s steps(1, end) infinite;
}

@keyframes archiveTileCut1 {
  0%, 24.999% {
    opacity: 1;
    visibility: visible;
  }
  25%, 100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes archiveTileCut2 {
  0%, 24.999% {
    opacity: 0;
    visibility: hidden;
  }
  25%, 49.999% {
    opacity: 1;
    visibility: visible;
  }
  50%, 100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes archiveTileCut3 {
  0%, 49.999% {
    opacity: 0;
    visibility: hidden;
  }
  50%, 74.999% {
    opacity: 1;
    visibility: visible;
  }
  75%, 100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes archiveTileCut4 {
  0%, 74.999% {
    opacity: 0;
    visibility: hidden;
  }
  75%, 100% {
    opacity: 1;
    visibility: visible;
  }
}

/* ── Archive Tile 3-Image Hard Cut Sequence (Cards 1–7) ── */
.archive-tile--hard-cut-3 {
  background-color: #0c0c10;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  clip-path: inset(0 round 8px);
}

.archive-tile--hard-cut-3 .archive-tile__cut-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none;
  border-radius: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: none !important;
  will-change: opacity, visibility;
}

.archive-tile--hard-cut-3 .archive-tile__cut-img--1 {
  z-index: 3;
  animation: archiveTileCut3_1 6s steps(1, end) infinite;
}

.archive-tile--hard-cut-3 .archive-tile__cut-img--2 {
  z-index: 2;
  animation: archiveTileCut3_2 6s steps(1, end) infinite;
}

.archive-tile--hard-cut-3 .archive-tile__cut-img--3 {
  z-index: 1;
  animation: archiveTileCut3_3 6s steps(1, end) infinite;
}

@keyframes archiveTileCut3_1 {
  0%, 33.332% {
    opacity: 1;
    visibility: visible;
  }
  33.333%, 100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes archiveTileCut3_2 {
  0%, 33.332% {
    opacity: 0;
    visibility: hidden;
  }
  33.333%, 66.665% {
    opacity: 1;
    visibility: visible;
  }
  66.666%, 100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes archiveTileCut3_3 {
  0%, 66.665% {
    opacity: 0;
    visibility: hidden;
  }
  66.666%, 100% {
    opacity: 1;
    visibility: visible;
  }
}

@media screen and (max-width: 960px) {
  .hero--showcase {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: var(--space-8);
  }
  .hero__gradient-overlay {
    background:
      radial-gradient(
        ellipse 120% 48% at 0% 100%,
        rgba(17, 17, 16, 0.94) 0%,
        rgba(17, 17, 16, 0.78) 18%,
        rgba(17, 17, 16, 0.42) 36%,
        transparent 65%
      ),
      radial-gradient(
        ellipse 140% 40% at 50% 100%,
        rgba(17, 17, 16, 0.96) 0%,
        rgba(17, 17, 16, 0.78) 16%,
        rgba(17, 17, 16, 0.42) 34%,
        transparent 60%
      ),
      linear-gradient(to top, #111110 0%, rgba(17, 17, 16, 0.6) 4%, transparent 10%);
  }
  .hero--showcase .hero__container {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    padding-right: var(--container-pad);
  }
  .hero--showcase .hero__content {
    max-width: 100%;
    flex: none;
  }
  .hero--showcase .hero__headline--home {
    font-size: clamp(1.25rem, 5.5vw, 2.15rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
  }
  .hero--showcase .hero__sub {
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: -0.01em;
    width: var(--hero-sub-width, 100%);
    max-width: var(--hero-sub-width, 100%);
    box-sizing: border-box;
  }
}

/* ── FEATURED WORK SECTION (RACHEL CHEN ARCHITECTURE) ──────────────── */
.featured-work {
  padding-block: 0 var(--space-16);
}

.featured-work__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  width: 100%;
}

/* Section header: a quiet label. No rule above it; spacing separates the sections. Same voice as the
   "Know me a bit better" heading (about-preview.css). */
.featured-work__header {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 14px 0 28px 0;
  margin-bottom: 0;
}

/* Case studies sits straight under the hero with no section padding on
   wide screens; give its label room now that there is no rule above it. */
#work .featured-work__header {
  padding-top: clamp(14px, 3.2vw, 48px);
}

.featured-work__label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #ffffff;
}

.featured-work__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 1.5vw, 1.5rem);
  width: 100%;
}

/* ── Case study card ───────────────────────────────────────────────────
   One link: the picture (a short video that plays once as the card comes
   into view) takes 60% and the words 40%; under 860px they stack.
   It follows the site's conventions (see README.md): the raised-surface
   colour, a hairline border, 8px corners, 13 / 15 / 16px type, and the
   same pill as the other buttons. Its words are revealed by script.js. */
.work-showcase-card {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background-color: #161615;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-showcase-card:hover,
.work-showcase-card:focus-visible {
  border-color: rgba(255, 255, 255, 0.2);
}

@media screen and (min-width: 860px) {
  .work-showcase-card {
    grid-template-columns: 60% 40%;
    align-items: stretch;
    height: clamp(560px, 42vw, 600px);
  }
}

.work-showcase-card__visual {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0;
  background-color: #f8f8f8;   /* the video's own backdrop, so nothing flashes while it loads */
}

@media screen and (min-width: 860px) {
  .work-showcase-card__visual {
    aspect-ratio: auto;
  }
}

.work-showcase-card__img,
.work-showcase-card__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.01);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-showcase-card:hover .work-showcase-card__img,
.work-showcase-card:hover .work-showcase-card__video {
  transform: scale(1.04);
}

.work-showcase-card__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 3.2vw, 48px);
  text-align: left;
}

.work-showcase-card__content-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.work-showcase-card__date {
  display: block;
  margin-bottom: clamp(14px, 2.2vh, 24px);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.6);
}

.work-showcase-card__title {
  margin: 0 0 clamp(12px, 1.6vh, 18px) 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.work-showcase-card__desc-row {
  display: block;
}

.work-showcase-card__sub {
  max-width: 38ch;
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
}

/* The pill. Not a link of its own: the whole card is the link. */
.work-showcase-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 44px;
  margin-top: clamp(24px, 3vh, 36px);
  padding: 0 22px;
  border-radius: 9999px;
  corner-shape: round;   /* a true pill; the site's superellipse corners flatten it otherwise */
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.work-showcase-card:hover .work-showcase-card__cta,
.work-showcase-card:focus-visible .work-showcase-card__cta {
  background: #ffffff;
  color: #161615;
}

@media (prefers-reduced-motion: reduce) {
  .work-showcase-card__img,
  .work-showcase-card__video,
  .work-showcase-card:hover .work-showcase-card__img,
  .work-showcase-card:hover .work-showcase-card__video {
    transform: none;
    transition: none;
  }
}

/* ── OTHER WORK ARCHIVE (INFINITE HORIZONTAL MARQUEE) ──────────────── */
.archive-showcase {
  width: 100%;
  padding-top: 0;
  padding-bottom: clamp(8px, 0.9vw, 13px);
  margin-top: 0;
  overflow: hidden;
  position: relative;
}

.archive-showcase__header {
  margin-bottom: 0;
}

.archive-marquee {
  --grid-total-h: clamp(520px, 46vw, 640px);
  --marquee-gap: clamp(8px, 0.9vw, 13px);

  --tile-1-h: clamp(396px, 35.28vw, 529px);
  --tile-1-w: calc(var(--tile-1-h) * 4 / 5);

  --tile-2-h: clamp(353px, 31.47vw, 473px);
  --tile-2-w: calc(var(--tile-2-h) * 1 / 1);

  --tile-3-h: clamp(320px, 28.73vw, 428px);
  --tile-3-w: calc(var(--tile-3-h) * 3 / 2);

  --tile-4-h: clamp(379px, 33.38vw, 504px);
  --tile-4-w: calc(var(--tile-4-h) * 7 / 6);

  --tile-5-h: clamp(340px, 30.24vw, 454px);
  --tile-5-w: calc(var(--tile-5-h) * 4 / 3);

  --tile-6-h: clamp(358px, 32.14vw, 479px);
  --tile-6-w: calc(var(--tile-6-h) * 5 / 4);

  --tile-7-h: clamp(327px, 29.01vw, 435px);
  --tile-7-w: calc(var(--tile-7-h) * 4 / 3);

  --tile-8-h: clamp(340px, 30.24vw, 454px);
  --tile-8-w: calc(var(--tile-8-h) * 4 / 3);

  width: 100%;
  overflow: hidden;
  position: relative;
  user-select: none;
  padding-top: 8px;
  padding-bottom: 0;
  will-change: transform;
}

.archive-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: archive-marquee-slide 62s linear infinite;
}

#archive-marquee-track {
  margin-bottom: 0;
}

.archive-marquee:hover .archive-marquee__track {
  animation-play-state: running !important;
}

@keyframes archive-marquee-slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.archive-marquee__group {
  display: flex;
  align-items: stretch;
  gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);
  flex-shrink: 0;
}

.archive-column {
  display: flex;
  flex-direction: column;
  gap: var(--marquee-gap);
  flex-shrink: 0;
  height: var(--grid-total-h);
}

.archive-column--1 { width: var(--tile-1-w); }
.archive-column--2 { width: var(--tile-2-w); }
.archive-column--3 { width: var(--tile-3-w); }
.archive-column--4 { width: var(--tile-4-w); }
.archive-column--5 { width: var(--tile-5-w); }
.archive-column--6 { width: var(--tile-6-w); }
.archive-column--7 { width: var(--tile-7-w); }
.archive-column--8 { width: var(--tile-8-w); }

.archive-tile-extension {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-color: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  flex: 1;
  width: 100%;
  cursor: default;
  transition: border-color 0.3s ease;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
}

.archive-tile-extension:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.archive-tile-extension picture {
  display: contents;
}

.archive-tile-extension.archive-tile--hard-cut .archive-tile__cut-img,
.archive-tile-extension.archive-tile--hard-cut-3 .archive-tile__cut-img {
  top: -15%;
  left: -15%;
  width: 130%;
  height: 130%;
  max-width: none;
  max-height: none;
  filter: blur(52px) saturate(1.45);
  opacity: 0.85;
  z-index: 1;
  transition: filter 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

.archive-tile-extension.archive-tile--hard-cut:hover .archive-tile__cut-img,
.archive-tile-extension.archive-tile--hard-cut-3:hover .archive-tile__cut-img {
  filter: blur(40px) saturate(1.7);
  opacity: 0.98;
}

/* Blur Card Single-Line Project Description Overlay */

.archive-tile-extension:hover .archive-tile__sheen {
  opacity: 1;
}

.archive-tile-extension::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    320px circle at var(--sheen-x, 50%) var(--sheen-y, 50%),
    rgba(255, 255, 255, 0.45),
    transparent 65%
  ) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  transition: opacity 0.3s ease;
  z-index: 6;
}

.archive-tile-extension:hover::after {
  opacity: 1;
}

/* Individual Archive Tile with consistent corner clipping and sheen */
.archive-tile {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-color: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  flex-shrink: 0;
  cursor: default;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
  transition: border-color 0.3s ease;
}

.archive-tile:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

/* 7 Distinct Heights & Proportions (scaled up 12%) */
.archive-tile--1 {
  height: var(--tile-1-h);
  width: var(--tile-1-w);
  aspect-ratio: 4 / 5;
}

.archive-tile--2 {
  height: var(--tile-2-h);
  width: var(--tile-2-w);
  aspect-ratio: 1 / 1;
}

.archive-tile--3 {
  height: var(--tile-3-h);
  width: var(--tile-3-w);
  aspect-ratio: 3 / 2;
}

.archive-tile--4 {
  height: var(--tile-4-h);
  width: var(--tile-4-w);
  aspect-ratio: 7 / 6;
}

.archive-tile--5 {
  height: var(--tile-5-h);
  width: var(--tile-5-w);
  aspect-ratio: 4 / 3;
}

.archive-tile--6 {
  height: var(--tile-6-h);
  width: var(--tile-6-w);
  aspect-ratio: 5 / 4;
}

.archive-tile--7 {
  height: var(--tile-7-h);
  width: var(--tile-7-w);
  aspect-ratio: 4 / 3;
}

.archive-tile--8 {
  height: var(--tile-8-h);
  width: var(--tile-8-w);
  aspect-ratio: 4 / 3;
}

.archive-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  border-radius: inherit;
}

/* ── INTERACTIVE CURSOR-FOLLOWING SHEEN (+10% INTENSITY) ──────────── */
.archive-tile__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    480px circle at var(--sheen-x, 50%) var(--sheen-y, 50%),
    rgba(255, 255, 255, 0.44) 0%,
    rgba(255, 255, 255, 0.20) 28%,
    rgba(255, 255, 255, 0) 70%
  );
  mix-blend-mode: overlay;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.archive-tile:hover .archive-tile__sheen {
  opacity: 1;
}

/* Cursor-following border rim specular highlight (+10% INTENSITY) */
.archive-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    320px circle at var(--sheen-x, 50%) var(--sheen-y, 50%),
    rgba(255, 255, 255, 0.65),
    transparent 65%
  ) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  transition: opacity 0.3s ease;
  z-index: 6;
}

.archive-tile:hover::after {
  opacity: 1;
}

/* ── SYNCHRONIZED GLOWING PROJECTION LINES (LIGHT BAR) ──────────────────── */

/* Subtle vertical light beam gradient connecting card to floor projection */

@media (prefers-reduced-motion: reduce) {
  .archive-marquee__track {
    animation-play-state: paused;
  }
}

/* Top chip above the H1 */
.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-70);
  background-color: var(--surface-alt);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-full);
  padding: 0.35rem 0.9rem;
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.hero__chip-accent {
  font-weight: var(--fw-bold);
  color: var(--ink);
}

.hero__headline {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  margin-bottom: var(--space-2);
  text-align: center;
}

.hero__headline--home {
  font-size: clamp(3rem, 5.5vw, 5.25rem);
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.hero__sub {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--ink-70);
  max-width: 660px;
  margin-inline: auto;
  text-align: center;
}

/* Hero sub-text hover-preview trigger — links to PumpPay LinkedIn */
.hero__sub-preview {
  position: relative;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.hero__sub-preview:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* Metadata Row */

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(0.85);
  }
}

/* ── WORK / FOCUS GRID ──────────────────────────────────────────────── */
.work {
  background-color: var(--white);
  border-radius: var(--r-xl);
  margin-inline: var(--space-3);
  padding-block: var(--space-10);
  margin-bottom: var(--space-6);
}

@media screen and (max-width: 768px) {
  .work {
    margin-inline: 0;
    border-radius: 0;
    padding-block: var(--space-8);
  }

}

/* Tile Card — overlay design */
.tile {
  flex: 0 0 360px;
  /* fixed size matching a premium card layout */
  min-width: 290px;
  height: 52vh;
  max-height: 480px;

  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #111;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}

@media screen and (min-width: 1025px) {

  /* First work card (latest work) is statically large */
  .tile:first-child {
    flex: 0 0 600px;
  }

}

/* Ensure the last card isn't flush with the right edge on horizontal scroll */
.tile:last-child {
  margin-right: 60px;
}

@media screen and (max-width: 1024px) {
  .tile:last-child {
    margin-right: 24px;
  }
}

.tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}

/* ── FULL SCREEN PROJECT BENTO OVERLAYS ─────────────────────────────── */

.project-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  /* overlay above navigation and main body */
  background: rgba(14, 14, 37, 0.65);

  /* Match the tag chip properties for the blur */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);

  /* Start hidden, animated fade in */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.project-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Floating Circular Close Trigger */
.project-overlay__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(24, 24, 27, 0.1);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1010;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.project-overlay__close:hover {
  background: var(--white);
  transform: scale(1.08);
  box-shadow: var(--shadow-lg);
}

.project-overlay__close:active {
  transform: scale(0.95);
}

/* Bento Cell default style */

/* Staggered transition delays for the cells */

/* Swiss Bento Grid Layout Positioning */

/* ── LINEAGE (TIMELINE) ─────────────────────────────────────────────── */

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── TOOLKIT & PHILOSOPHY ───────────────────────────────────────────── */

/* ── ABOUT ME (70VH EDITORIAL BREATHING SPACE) ─────────────────────── */
.about {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding-block: clamp(4.5rem, 10vh, 7.5rem);
  margin-bottom: 0;
  width: 100%;
}

.about .container {
  width: 100%;
}

/* ── APPLE ABOUT ME SHOWCASE (HERO PAGE) ────────────────────────────── */

/* Apple Subnav Pill Bar */

/* Two-Column Grid: Copy & Stats (Left) + Device Mockup (Right) */

/* Side-by-side Stats Strip (Matching Apple 48MP callouts) */

/* Visual Device Column */

/* Responsive layout for about */

@media screen and (max-width: 768px) {
  .about {
    padding-block: var(--space-8);
  }
}

/* ── CONTACT (TERMINAL) ─────────────────────────────────────────────── */
.contact {
  padding-top: var(--space-6);
  /* Align blue gap visual spacing to 128px */
  padding-bottom: var(--space-16);
}

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.contact__headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  max-width: 18ch;
}

.contact__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--ink-12);
  transition: border-color var(--dur-base) ease;
}

.contact__link:hover {
  border-color: var(--ink-50);
}

.contact__link:hover .contact__link-value {
  color: var(--ink);
}

.contact__link-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-30);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.contact__link-value {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-70);
  letter-spacing: -0.01em;
  text-align: right;
  transition: color var(--dur-base) ease;
}

/* ── FOOTER: CLEAN SAVANNA SUNSET THEME ─────── */
.footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-footer-yellow);
  background-image: none !important;
}

.footer::before,
.footer::after {
  display: none !important;
  content: none !important;
}

.footer__container,
.footer > .container {
  position: relative;
  z-index: 5;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: clamp(380px, 48vw, 640px);
}

.footer__links {
  display: flex;
  gap: var(--space-10);
}

/* Fallback if columns are direct children */

.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  text-decoration: none;
}

.footer__logo-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.footer__desc {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.15vw, 2.05rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--ink-70);
  max-width: 28ch;
  margin-block: 0.25rem 0.5rem;
}

.footer__btn {
  padding: 0.6rem 1.35rem;
  border: 1px solid var(--ink-12);
  border-radius: var(--r-md) !important;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease, color var(--dur-base) ease, transform var(--dur-fast) ease;
  margin-top: var(--space-1);
}

.footer__btn:hover {
  background: var(--ink-06);
  border-color: var(--ink-30);
  color: var(--ink);
  transform: translateY(-1px);
}

/* ── UNIFIED FULLY-ROUNDED (PILL) BUTTON SYSTEM ──────────────────── */
.btn,
.footer__btn,
button.btn,
a.btn,
.js-trigger-cv-modal,
.js-trigger-contact-modal,
.cv-modal-card .btn,
.contact-modal-card .btn {
  border-radius: var(--r-md) !important;
  /* Entirely rounded capsule edges */
}

.footer__copyright {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-30);
  margin-top: var(--space-2);
}

/* Watermark — Full name spaced out, John Dobie style */

.footer .container {
  position: relative;
  z-index: 2;
}

/* ── GSAP ANIMATION SETUP ───────────────────────────────────────────── */
.js-stagger {
  will-change: opacity, transform;
}

/* ── KINETIC TEXT REVEAL (COMPONENT-STYLE CLIPPED WORD & CHAR MOTIONS) ─ */
.kinetic-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  line-height: inherit;
}

.kinetic-word {
  display: inline-block;
  will-change: transform, opacity, filter;
  vertical-align: top;
  letter-spacing: inherit;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
}

.kinetic-char-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  line-height: inherit;
}

.kinetic-char-space {
  display: inline-block;
  width: 0.28em;
}

.wm-char.kinetic-char {
  display: inline-block;
  will-change: transform, opacity, filter;
}

@media (prefers-reduced-motion: reduce) {
  .kinetic-mask,
  .kinetic-char-mask {
    overflow: visible !important;
  }
  .kinetic-word,
  .wm-char.kinetic-char {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media screen and (max-width: 1024px) {
  :root {
    --container-pad: var(--space-4);
  }

  .hero__headline {
    font-size: 3rem;
  }

  .contact__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

@media screen and (max-width: 768px) {
  :root {
    --container-pad: var(--space-3);
  }

  .section {
    padding-block: var(--space-6);
  }

  .nav__menu {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .hero {
    padding-top: 110px;
    padding-bottom: var(--space-6);
  }

  .hero__headline {
    font-size: 2.25rem;
  }

  .hero__headline--home {
    font-size: 3.25rem;
    line-height: 1.08;
  }

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

  .work {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    scroll-padding-inline: var(--container-pad);
  }

  .contact__headline {
    font-size: var(--text-2xl);
    max-width: none;
  }

  .contact {
    padding-top: var(--space-4);
    padding-bottom: var(--space-8);
  }

  .work .contact {
    padding-top: var(--space-10);
    padding-bottom: var(--space-6);
  }

  .footer__inner {
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  }

  .footer__brand {
    max-width: 100%;
  }

  .footer__desc,
  .site-reveal-footer .footer__brand .footer__desc {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    max-width: 100%;
  }

  .footer__links {
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Generous breathing space between the last contact link (X/Twitter) and the giant name */
  .footer__watermark-giant {
    margin-top: clamp(3.5rem, 8vh, 5.5rem) !important;
    margin-bottom: clamp(1.5rem, 3.5vh, 2.5rem) !important;
  }
}

@media screen and (max-width: 480px) {
  .hero__headline {
    font-size: 1.875rem;
  }

  .hero__headline--home {
    font-size: 2.6rem;
    line-height: 1.1;
  }

  .contact__headline {
    font-size: var(--text-xl);
  }

}

/* ── EDITORIAL / POLICY PAGES ───────────────────────────────────────── */
.editorial {
  padding-top: calc(var(--nav-height) + var(--space-8));
  padding-bottom: var(--space-16);
}

.editorial__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (max-width: 768px) {
  .editorial__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.editorial__sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-right: var(--space-4);
}

@media (max-width: 768px) {
  .editorial__sidebar {
    position: sticky;
    top: var(--nav-height);
    z-index: 1050;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-inline: calc(-1 * var(--space-4));
    padding: 10px var(--space-4);
    background: rgba(14, 14, 17, 0.95);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.4);
    transition: top 0.38s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
    margin-bottom: var(--space-6);
    padding-right: var(--space-4);
  }

  .editorial__sidebar::-webkit-scrollbar {
    display: none;
  }

  .nav.nav--hidden ~ .main .editorial__sidebar,
  .nav.nav--hidden ~ article .editorial__sidebar,
  body.nav-is-hidden .editorial__sidebar {
    top: 0px !important;
  }

  html:not(.dark-mode) .editorial__sidebar {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.06);
  }
}

.editorial__side-link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-50);
  text-decoration: none;
  transition: color var(--dur-base) ease, border-left-color var(--dur-base) ease;
  padding-left: var(--space-2);
  border-left: 2px solid transparent;
}

.editorial__side-link:hover {
  color: var(--ink-70);
}

.editorial__side-link--active {
  color: var(--ink) !important;
  border-left-color: var(--ink) !important;
  font-weight: var(--fw-semibold);
}

@media (max-width: 768px) {
  .editorial__side-link {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-50);
    padding: 7px 14px;
    border-radius: 9999px !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-left: 1px solid transparent !important;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    scroll-margin-inline: var(--space-4);
  }

  .editorial__side-link:hover {
    color: var(--ink);
    background-color: rgba(255, 255, 255, 0.06) !important;
  }

  .editorial__side-link--active,
  .editorial__side-link.active {
    color: var(--ink) !important;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  html:not(.dark-mode) .editorial__side-link:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
  }

  html:not(.dark-mode) .editorial__side-link--active,
  html:not(.dark-mode) .editorial__side-link.active {
    background-color: rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #0e0e11 !important;
  }
}

.editorial__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  max-width: 720px;
}

.editorial__section {
  scroll-margin-top: 120px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── FLOATING PREVIEW ON HOVER (ABOUT PAGE) ─────────────────────────── */
.deliver-hover-preview {
  position: fixed;
  width: 220px;
  height: 140px;
  pointer-events: none;
  z-index: 99999;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background-color: var(--white);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(24, 24, 27, 0.08);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  will-change: transform, opacity;
}

.deliver-hover-preview.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Height-based media queries to optimize spacing on shorter viewports so cards always peek */
@media screen and (max-height: 900px) {
  .hero {
    padding-top: calc(var(--nav-height) + var(--space-8));
    padding-bottom: var(--space-2);
  }

  .hero__copy {
    margin-bottom: var(--space-4);
  }
}

@media screen and (max-height: 750px) {
  .hero {
    padding-top: calc(var(--nav-height) + var(--space-6));
    padding-bottom: var(--space-2);
  }

  .hero__copy {
    margin-bottom: var(--space-3);
  }

  .hero__headline {
    font-size: 2.75rem;
  }
}

/* ── NOTES PAGE ──────────────────────────────────────────────────────── */
.notes-hero {
  padding-block: var(--space-12) var(--space-8);
  text-align: center;
}

/* ── Case Study Card — reverts to previous size, transparent style ────── */
.notes-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--r-lg);
  border: 1px solid var(--ink-12);
  background: transparent;
  padding: var(--space-5) var(--space-5);
  min-height: 180px;
  /* previous height */
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--dur-medium) var(--ease-out),
    background-color var(--dur-medium) var(--ease-out),
    transform var(--dur-medium) var(--ease-out);
}

.notes-card--featured {
  min-height: 376px;

}

.notes-card:hover {
  transform: translateY(-4px);
  background-color: var(--white);
  border-color: var(--ink-24);
  box-shadow: none;
  /* no shadow */
}

/* Stacked column for smaller cards */
.notes-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Divider styling */

/* Notes list view */

.notes-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.notes-list-item:hover {
  background-color: var(--white);
}

/* Responsive adjustments */

@media screen and (max-width: 768px) {
  .notes-hero {
    padding-block: var(--space-8) var(--space-4);
  }

  .notes-list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-2);
  }

}

/* ══════════════════════════════════════════════════════════════════════
   CASE STUDY DETAIL PAGE
   Narrow 680px editorial column, Memorisely-inspired hierarchy
   ══════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ────────────────────────────────────────────────────── */
.cs-breadcrumb {
  padding-top: calc(var(--nav-height) + 24px);
  padding-bottom: 0;
}

.cs-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-50);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.cs-breadcrumb__link:hover {
  color: var(--ink);
}

.cs-breadcrumb__arrow {
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
  transform: scaleX(-1);
  /* flip → into ← */
  transition: transform var(--dur-fast) var(--ease-out);
}

.cs-breadcrumb__link:hover .cs-breadcrumb__arrow {
  transform: scaleX(-1) translateX(4px);
}

/* ── Article wrapper — narrow reading column ───────────────────────── */
.cs-article {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: var(--space-4);
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
}

/* ── Article Header ────────────────────────────────────────────────── */

/* ── Author row ────────────────────────────────────────────────────── */

/* ── Body content ───────────────────────────────────────────────────── */
.cs-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* let each element control its own spacing */
}

/* Paragraphs */
.cs-body p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--ink-70);
  margin-bottom: 20px;
}

.cs-body p:last-child {
  margin-bottom: 0;
}

/* Section headings H2 */
.cs-body h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  margin-top: 48px;
  margin-bottom: 16px;
}

/* Sub-section headings H3 */
.cs-body h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--ink);
  margin-top: 36px;
  margin-bottom: 12px;
}

/* ── Pull quote / stat callout ─────────────────────────────────────── */
.cs-pullquote {
  border-left: 3px solid var(--ink);
  padding-left: 20px;
  margin-block: 36px;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--ink);
  font-style: italic;
}

/* ── Highlight / info box ──────────────────────────────────────────── */
.cs-highlight {
  background: var(--surface);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin-block: 32px;
}

.cs-highlight p {
  margin-bottom: 0;
  font-size: var(--text-sm);
}

/* ── Stat row ──────────────────────────────────────────────────────── */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-block: 36px;
}

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

.cs-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: 1;
  letter-spacing: var(--ls-display);
}

.cs-stat__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-50);
}

/* ── Bullet / metric list ──────────────────────────────────────────── */
.cs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block: 20px;
  padding: 0;
}

.cs-list li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--ink-70);
  padding-left: 20px;
  position: relative;
}

.cs-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--ink-30);
  font-weight: var(--fw-regular);
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .cs-article {
    padding-inline: var(--space-2);
    padding-bottom: var(--space-12);
  }

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

}

/* Pricing Summary Card */

.btn--block {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* ── EXTENDED CASE STUDY CONTENT IMAGES ────────────────────────────── */
.cs-extended-image {
  width: 116%;
  max-width: 116%;
  margin-left: -8%;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  margin-block: var(--space-8);
  object-fit: cover;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  display: block;
}

@media (max-width: 860px) {
  .cs-extended-image {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-block: var(--space-6);
  }
}

/* ── DARK MODE OVERRIDES ────────────────────────────────────────────── */
html.dark-mode {
  --ink: #e4e6df;
  --ink-70: #92948f;
  --ink-50: rgba(146, 148, 143, 0.70);
  --ink-30: rgba(146, 148, 143, 0.40);
  --ink-24: rgba(146, 148, 143, 0.24);
  --ink-12: rgba(255, 255, 255, 0.08);
  --ink-06: rgba(255, 255, 255, 0.04);

  --white: #1c1c1b;
  --surface: #111110;
  --surface-alt: #1e1e1d;
}

html.dark-mode,
html.dark-mode body {
  background-color: #111110;
  color: var(--ink);
}

html,
body {
  transition: background-color var(--dur-slow) var(--ease-in-out), color var(--dur-slow) var(--ease-in-out);
}

/* Dark mode nav styles are managed via CSS variables in Apple Navigation section */

html.dark-mode .project-overlay__close {
  background: rgba(24, 24, 27, 0.92);
  border: 1px solid rgba(244, 244, 245, 0.1);
}

/* Theme Toggle Button Styling */

/* ═══════════════════════════════════════════════════════════════════════
   GET IN CONTACT FLOW
   Multi-step branching contact & project enquiry system
   ═══════════════════════════════════════════════════════════════════════ */

/* ── FLOW CONTAINER ─────────────────────────────────────────────────── */
.cflow {
  max-width: 760px;
  margin-inline: auto;
}

/* ── STEP VISIBILITY & TRANSITION ───────────────────────────────────── */
.cflow-step {
  display: none;
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.42s var(--ease-out),
    transform 0.42s var(--ease-out);
}

.cflow-step.is-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Class added by JS one frame after display:block to trigger transition */
.cflow-step.is-entering {
  opacity: 1;
  transform: translateY(0);
}

/* ── STEP HEADER ────────────────────────────────────────────────────── */
.cflow-header {
  margin-bottom: var(--space-6);
}

.cflow-step-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--purple);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  background: rgba(101, 100, 206, 0.08);
  border: 1px solid rgba(101, 100, 206, 0.18);
  border-radius: var(--r-full);
  padding: 0.3rem 0.85rem;
  margin-bottom: var(--space-3);
}

.cflow-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, var(--text-3xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.cflow-sub {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--lh-body);
  color: var(--ink-70);
  max-width: 600px;
}

/* ── ENTRY CARD GRID ────────────────────────────────────────────────── */
.cflow-entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

@media (max-width: 600px) {
  .cflow-entry-grid {
    grid-template-columns: 1fr;
  }
}

/* ── ENTRY CARDS ────────────────────────────────────────────────────── */
.cflow-entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--white);
  border: 1.5px solid var(--ink-12);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  cursor: pointer;
  transition:
    border-color 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    transform 0.25s var(--ease-out),
    background-color 0.25s var(--ease-out);
  overflow: hidden;
}

.cflow-entry-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(135deg, var(--ink-06) 0%, transparent 70%);
  transition: opacity 0.3s ease;
}

.cflow-entry-card:hover::before {
  opacity: 1;
}

.cflow-entry-card:hover {
  border-color: var(--ink-30);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.cflow-entry-card:active {
  transform: translateY(-1px) scale(0.99);
}

/* Accent variant (Yes card) */
.cflow-entry-card--accent {
  background: var(--ink);
  border-color: var(--ink);
}

.cflow-entry-card--accent::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
}

.cflow-entry-card--accent:hover {
  border-color: #3f3f46;
  background: #3f3f46;
}

.cflow-entry-card--accent .cflow-entry-card__answer {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

.cflow-entry-card--accent .cflow-entry-card__icon {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.12);
}

.cflow-entry-card--accent .cflow-entry-card__title {
  color: #ffffff;
}

.cflow-entry-card--accent .cflow-entry-card__desc {
  color: rgba(255, 255, 255, 0.65);
}

.cflow-entry-card--accent .cflow-entry-card__cta {
  color: rgba(255, 255, 255, 0.75);
}

.cflow-entry-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: var(--space-4);
}

.cflow-entry-card__answer {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--ink-50);
  background: var(--ink-06);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-full);
  padding: 0.25rem 0.75rem;
}

.cflow-entry-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  background: var(--ink-06);
  border: 1px solid var(--ink-12);
  color: var(--ink-70);
  flex-shrink: 0;
}

.cflow-entry-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.cflow-entry-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  color: var(--ink-70);
  margin-bottom: var(--space-5);
  flex: 1;
}

.cflow-entry-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-50);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  margin-top: auto;
  transition: color 0.2s ease, gap 0.2s ease;
}

.cflow-entry-card:hover .cflow-entry-card__cta {
  gap: 0.65rem;
}

/* ── FORMS ──────────────────────────────────────────────────────────── */
.cflow-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

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

.cform-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cform-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  letter-spacing: var(--ls-body);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.cform-label-optional {
  font-weight: var(--fw-regular);
  color: var(--ink-50);
  font-size: var(--text-xs);
}

.cform-required {
  color: var(--purple);
}

.cform-input-wrap {
  position: relative;
}

.cform-input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-30);
  pointer-events: none;
}

.cform-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--ink-12);
  border-radius: var(--r-md);
  padding: 0.875rem 1rem;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-appearance: none;
}

.cform-input--with-icon {
  padding-left: 2.75rem;
}

.cform-input:hover {
  border-color: var(--ink-24);
}

.cform-input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink-06);
}

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

/* Textarea */
.cform-textarea {
  resize: vertical;
  min-height: 160px;
  line-height: var(--lh-body);
}

.cform-hint {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-50);
  line-height: 1.5;
}

/* Validation error state */
.cform-input.is-error {
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

/* Actions row */
.cform-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ── PROJECT TYPE SEARCH ─────────────────────────────────────────────── */
.cflow-search-wrap {
  position: relative;
  margin-bottom: var(--space-4);
}

.cflow-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-30);
  pointer-events: none;
}

.cflow-search-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--ink-12);
  border-radius: var(--r-full);
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
}

.cflow-search-input:hover {
  border-color: var(--ink-24);
}

.cflow-search-input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink-06);
}

.cflow-search-input::placeholder {
  color: var(--ink-30);
}

/* ── PROJECT TYPE CHECKBOX GRID ─────────────────────────────────────── */
.project-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: var(--space-5);
}

.project-type-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--white);
  border: 1.5px solid var(--ink-12);
  border-radius: var(--r-full);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.project-type-item:hover {
  border-color: var(--ink-30);
  background: var(--ink-06);
  transform: translateY(-1px);
}

.project-type-item.is-checked {
  border-color: var(--ink);
  background: var(--ink);
}

.project-type-item.is-checked .project-type-item__label {
  color: #ffffff;
}

.project-type-item.is-checked .project-type-item__check {
  opacity: 1;
  transform: scale(1);
}

/* Hidden native checkbox */
.project-type-item__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.project-type-item__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s var(--ease-out);
  color: #ffffff;
}

.project-type-item__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-70);
  line-height: 1;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.project-type-empty {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-50);
  padding: var(--space-4) 0;
  text-align: center;
}

/* ── PROJECT DETAIL CARDS ───────────────────────────────────────────── */
.project-detail-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.project-detail-card {
  background: var(--white);
  border: 1.5px solid var(--ink-12);
  border-radius: var(--r-xl);
  padding: var(--space-5);
  animation: cardReveal 0.35s var(--ease-out) both;
}

@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.project-detail-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ink-06);
  flex-wrap: wrap;
}

.project-detail-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
}

.project-detail-card__price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  flex-shrink: 0;
}

.project-detail-card__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.project-detail-card__meta-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-70);
}

.project-detail-card__meta-item svg {
  color: var(--ink-30);
  flex-shrink: 0;
}

.project-detail-card__template {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid rgba(20, 194, 95, 0.2);
  border-radius: var(--r-full);
  padding: 0.35rem 0.85rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.project-detail-card__template:hover {
  background: rgba(20, 194, 95, 0.18);
  transform: translateY(-1px);
}

.project-detail-card__template-discount {
  color: var(--ink-50);
  font-weight: var(--fw-regular);
}

/* ── CONFIRMATION SCREEN ────────────────────────────────────────────── */
.cflow-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-4);
}

.cflow-confirm__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--green-bg);
  border: 1.5px solid rgba(20, 194, 95, 0.2);
  color: var(--green);
  margin-bottom: var(--space-5);
  animation: checkPop 0.5s var(--ease-out) both;
}

@keyframes checkPop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  60% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.cflow-confirm .cflow-title {
  margin-bottom: var(--space-2);
}

.cflow-confirm .cflow-sub {
  max-width: 480px;
  margin-inline: auto;
}

.cflow-confirm__summary {
  width: 100%;
  max-width: 520px;
  background: var(--white);
  border: 1.5px solid var(--ink-12);
  border-radius: var(--r-xl);
  padding: var(--space-5);
  margin-top: var(--space-6);
  text-align: left;
}

.cflow-confirm__summary-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: var(--space-3);
}

.cflow-confirm__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--ink-06);
  gap: var(--space-3);
}

.cflow-confirm__summary-row:last-child {
  border-bottom: none;
}

.cflow-confirm__summary-key {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-70);
}

.cflow-confirm__summary-val {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  text-align: right;
}

.cflow-confirm__notice {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-50);
  margin-top: var(--space-3);
  line-height: 1.5;
  text-align: center;
}

/* ── FULL-SCREEN CASE STUDY HERO ────────────────────────────────────── */
.cs-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #ffffff;
  padding-bottom: var(--space-12);
  overflow: hidden;
}

.cs-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom,
      rgba(14, 14, 37, 0.4) 0%,
      rgba(14, 14, 37, 0.75) 100%);
  z-index: 1;
}

.cs-hero__back {
  position: absolute;
  top: 2.25rem;
  left: calc(max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad))));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  z-index: 10;
}

.cs-hero__back:hover {
  opacity: 1;
  transform: translateX(-4px);
}

@media (max-width: 768px) {
  .cs-hero__back {
    top: calc(var(--nav-height) + 14px);
    left: var(--space-4);
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 12px;
    border-radius: 9999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    opacity: 0.9;
  }

  .cs-hero__overlay {
    background: linear-gradient(to bottom,
        rgba(14, 14, 25, 0.5) 0%,
        rgba(14, 14, 25, 0.8) 55%,
        rgba(14, 14, 25, 0.98) 100%);
  }
}

.cs-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: left;
}

.cs-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-2);
}

.cs-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-hero__meta-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta, 0.04em);
}

.cs-hero__meta-val {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.9);
}

.cs-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  max-width: 26ch;
  color: #ffffff;
  margin: 0;
}

/* ── NAV OVERRIDE FOR FULL-SCREEN HERO PAGES ────────────────────────── */
body.has-cs-hero .nav__link {
  color: rgba(255, 255, 255, 0.75);
}

body.has-cs-hero .nav__link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

body.has-cs-hero .nav__hamburger-line {
  background-color: var(--white);
}

/* ── CV REQUEST MODAL OVERLAY ────────────────────────────────────────── */
.cv-modal-card {
  width: 100%;
  max-width: 520px;
  background-color: rgba(250, 248, 245, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-xl);
  padding: var(--space-8);
  box-shadow:
    0 30px 60px -15px rgba(14, 14, 37, 0.25),
    0 0 0 1px rgba(14, 14, 37, 0.05);
  position: relative;
  z-index: 5;
  transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease;
  opacity: 0;
  transform: translateY(20px);
}

html.dark-mode .cv-modal-card {
  background-color: rgba(28, 28, 27, 0.95);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════════
   CV PREVIEW OVERLAY (ALIGNED WITH PROJECT ORDER MODAL / POM STYLES)
   ═══════════════════════════════════════════════════════════════════════ */
#overlay-cv {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 10010;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#overlay-cv.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ── CV PREVIEW MODAL (MATCHING POM MODAL ARCHITECTURE) ───────────── */
#overlay-cv .cv-preview-shell,
#overlay-cv .cv-pom-modal,
.cv-preview-shell,
.cv-pom-modal {
  position: relative;
  width: 100%;
  max-width: 1240px !important;
  height: 88vh !important;
  max-height: 880px !important;
  min-height: 600px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  overflow: hidden;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

#overlay-cv.is-active .cv-preview-shell,
#overlay-cv.is-active .cv-pom-modal {
  transform: translateY(0) scale(1);
}

/* ── Close Button (Mirrors pom-close-btn exactly) ─────────────────── */
.cv-close-btn {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
  z-index: 25;
}

.cv-close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.cv-close-btn:active {
  transform: scale(0.95);
}

/* ── Left Column: Sidebar with Content & Download (Frosted Glass matching pom-sidebar) ─ */
#overlay-cv .cv-pom-sidebar,
#overlay-cv .cv-pom-summary,
.cv-pom-sidebar,
.cv-pom-summary {
  position: relative;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  box-sizing: border-box !important;
  background: rgba(18, 18, 17, 0.50);
  backdrop-filter: blur(36px) saturate(190%);
  -webkit-backdrop-filter: blur(36px) saturate(190%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  user-select: none;
  height: 100% !important;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.cv-pom-sidebar::-webkit-scrollbar,
.cv-pom-summary::-webkit-scrollbar {
  width: 5px;
}

.cv-pom-sidebar::-webkit-scrollbar-thumb,
.cv-pom-summary::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
}

.cv-sidebar-top {
  display: flex;
  flex-direction: column;
}

.cv-summary-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.cv-summary-section .pom-section-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
}

.cv-summary-desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.cv-summary-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: auto;
  flex-shrink: 0;
}

.cv-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
}

.cv-email-btn-secondary {
  width: 100%;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid transparent !important; /* no outline; keeps the same height as the download button */
  border-radius: 9999px !important;
  corner-shape: round; /* true pill; the global superellipse corners flatten it otherwise */
  padding: 11px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  outline: none;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

.cv-email-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-1px);
}

.cv-email-btn-secondary:active {
  transform: scale(0.98);
}

.cv-email-btn-secondary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

.cv-email-btn-secondary.is-copied {
  background: rgba(34, 197, 94, 0.14) !important;
  color: #4ade80 !important;
  transform: none !important;
}

.cv-email-btn-secondary.is-copied .cv-btn-icon--default {
  display: none !important;
}

.cv-email-btn-secondary.is-copied .cv-btn-icon--success {
  display: inline-block !important;
  color: #4ade80 !important;
  animation: cv-icon-pop 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cv-icon-pop {
  0% { transform: scale(0.65); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.cv-download-btn-primary {
  width: 100%;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #111110 !important;
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 9999px !important;
  corner-shape: round;
  padding: 11px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.cv-download-btn-primary:hover {
  background: #e8e8e6 !important;
  border-color: #e8e8e6 !important;
  transform: translateY(-1px);
}

.cv-download-btn-primary:active {
  transform: scale(0.98);
}

.cv-verification-note {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

/* ── Right Column: Document Preview Stage (Dark Charcoal matching pom-body) ─ */
#overlay-cv .cv-pom-preview,
#overlay-cv .cv-pom-body,
.cv-pom-preview,
.cv-pom-body {
  position: relative;
  background: #111110;
  overflow-y: auto;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100% !important;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.cv-pom-preview::-webkit-scrollbar,
.cv-pom-body::-webkit-scrollbar {
  width: 6px;
}

.cv-pom-preview::-webkit-scrollbar-track,
.cv-pom-body::-webkit-scrollbar-track {
  background: transparent;
}

.cv-pom-preview::-webkit-scrollbar-thumb,
.cv-pom-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
}

.cv-pom-preview::-webkit-scrollbar-thumb:hover,
.cv-pom-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* ── Stacked Paper Sheets (Page 1 above Page 2, centered) ─────────── */
.cv-papers-track {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.75rem;
}

.cv-paper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cv-paper__inner {
  width: 100%;
  background: #ffffff;
  border-radius: 6px;
  box-shadow:
    0 20px 48px -10px rgba(0, 0, 0, 0.65),
    0 4px 12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cv-paper:hover .cv-paper__inner {
  transform: translateY(-3px);
  box-shadow:
    0 28px 60px -10px rgba(0, 0, 0, 0.75),
    0 6px 16px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.15);
}

.cv-paper__img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.cv-paper__footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cv-paper__footer .pom-progress-count {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
}

/* ── Responsive Rules ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  #overlay-cv .cv-preview-shell,
  #overlay-cv .cv-pom-modal,
  .cv-preview-shell,
  .cv-pom-modal {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: 94vh !important;
  }

  #overlay-cv .cv-pom-sidebar,
  #overlay-cv .cv-pom-summary,
  .cv-pom-sidebar,
  .cv-pom-summary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    max-height: 44vh !important;
    padding: 24px 20px;
  }

  #overlay-cv .cv-pom-preview,
  #overlay-cv .cv-pom-body,
  .cv-pom-preview,
  .cv-pom-body {
    max-height: 52vh !important;
    padding: 24px 16px;
  }

  .cv-papers-track {
    max-width: 100%;
    gap: 2rem;
  }
}

@media (max-width: 640px) {
  .cv-preview-shell {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }

  .cv-pom-sidebar {
    padding: 20px 16px;
  }

  .cv-close-btn {
    top: 14px;
    right: 14px;
  }

  .cv-pom-body {
    padding: 1.25rem 0.75rem 2rem 0.75rem;
  }
}

.cv-cform-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--ink-12);
  padding: 0.75rem 0;
  outline: none;
  border-radius: 0;
  transition: border-color 0.25s ease;
}

.cv-cform-input:focus {
  border-bottom-color: var(--ink);
}

html.dark-mode .cv-cform-input {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

html.dark-mode .cv-cform-input:focus {
  border-bottom-color: var(--white);
}

.cv-cform-input::placeholder {
  color: var(--ink-30);
}

html.dark-mode .cv-cform-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.cv-cform-input.is-error {
  border-bottom-color: var(--red) !important;
}

textarea.cv-cform-input {
  border: 1.5px solid var(--ink-12);
  border-radius: var(--r-md);
  padding: 0.75rem 0.85rem;
  background: rgba(255, 255, 255, 0.4);
}

textarea.cv-cform-input:focus {
  border-color: var(--ink);
  background: var(--white);
}

html.dark-mode textarea.cv-cform-input {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
}

html.dark-mode textarea.cv-cform-input:focus {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.contact-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-70);
  display: block;
  margin-bottom: 4px;
}

.contact-modal-card {
  max-width: 520px;
}

/* ── SCOPER MODAL CARD OVERRIDES ─────────────────────────────────────── */
.scoper-modal-card {
  width: 100%;
  max-width: 520px;
  background-color: rgba(250, 248, 245, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow:
    0 30px 60px -15px rgba(14, 14, 37, 0.25),
    0 0 0 1px rgba(14, 14, 37, 0.05);
  position: relative;
  z-index: 5;
  transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease;
  opacity: 0;
  transform: translateY(20px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

html.dark-mode .scoper-modal-card {
  background-color: rgba(28, 28, 27, 0.95);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

.scoper-modal-card .cflow {
  overflow-y: auto;
  padding-right: 6px;
  /* Premium thin scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--ink-12) transparent;
}

.scoper-modal-card .cflow::-webkit-scrollbar {
  width: 4px;
}

.scoper-modal-card .cflow::-webkit-scrollbar-track {
  background: transparent;
}

.scoper-modal-card .cflow::-webkit-scrollbar-thumb {
  background-color: var(--ink-12);
  border-radius: var(--r-full);
}

/* Adjust heading sizes inside scoper modal */
.scoper-modal-card .cflow-title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-1);
}

.scoper-modal-card .cflow-sub {
  font-size: var(--text-sm);
  color: var(--ink-70);
  line-height: var(--lh-body);
  margin-bottom: var(--space-4);
}

.scoper-modal-card .cflow-entry-grid {
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.scoper-modal-card .cflow-entry-card {
  padding: var(--space-4);
}

.scoper-modal-card .cflow-entry-card__title {
  font-size: var(--text-md);
  margin-bottom: var(--space-1);
}

.scoper-modal-card .cflow-entry-card__desc {
  font-size: var(--text-xs);
  line-height: 1.4;
  margin-bottom: var(--space-3);
}

/* Form minimalist styling overrides for scoper inputs */
.scoper-modal-card .cform-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--ink-12);
  padding: 0.75rem 0;
  outline: none;
  border-radius: 0;
  transition: border-color 0.25s ease;
}

.scoper-modal-card .cform-input:focus {
  border-bottom-color: var(--ink);
}

html.dark-mode .scoper-modal-card .cform-input {
  border-bottom-color: rgba(255, 255, 255, 0.15);
  color: var(--ink);
}

html.dark-mode .scoper-modal-card .cform-input:focus {
  border-bottom-color: var(--white);
}

.scoper-modal-card .cform-input::placeholder {
  color: var(--ink-30);
}

html.dark-mode .scoper-modal-card .cform-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.scoper-modal-card .cform-input.is-error {
  border-bottom-color: var(--red) !important;
}

/* Ensure checkbox cards inside details fit smaller width */
.scoper-modal-card .project-detail-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-12);
  border-radius: 0;
  padding: var(--space-4) 0;
  box-shadow: none;
}

.scoper-modal-card .project-detail-card:last-of-type {
  border-bottom: none;
}

.scoper-modal-card .project-detail-card__header {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
}

.scoper-modal-card .project-detail-card__name {
  font-size: var(--text-base);
}

.scoper-modal-card .project-detail-card__price {
  font-size: var(--text-base);
}

.scoper-modal-card .project-detail-card__meta-row {
  margin-bottom: 0;
  gap: var(--space-2) var(--space-4);
}

.scoper-modal-card .project-detail-card__meta-item {
  font-size: var(--text-xs);
  color: var(--ink-50);
}

.scoper-modal-card .project-detail-card__template {
  font-size: var(--text-2xs);
  padding: 0.25rem 0.65rem;
  margin-top: var(--space-2);
}

/* Checkbox pill overrides inside scoper modal */
.scoper-modal-card .project-type-item {
  padding: 0.35rem 0.75rem;
  gap: 0.35rem;
  border-radius: var(--r-md);
}

.scoper-modal-card .project-type-item__label {
  font-size: var(--text-xs);
}

/* Confirmation Summary overrides inside scoper modal */
.scoper-modal-card .cflow-confirm__summary {
  background: transparent;
  border: none;
  padding: 0;
  margin-top: var(--space-4);
  box-shadow: none;
}

.scoper-modal-card .cflow-confirm__summary-row {
  padding: 0.45rem 0;
}

.scoper-modal-card .cflow-confirm__summary-key,
.scoper-modal-card .cflow-confirm__summary-val {
  font-size: var(--text-xs);
}

.scoper-modal-card .cflow-confirm__notice {
  margin-top: var(--space-4);
  line-height: var(--lh-body);
}

/* ── PREMIUM TOAST NOTIFICATION ─────────────────────────────────────── */
.cv-toast {
  position: fixed;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ink);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  box-shadow:
    0 10px 25px -5px rgba(14, 14, 37, 0.3),
    0 0 0 1px rgba(14, 14, 37, 0.05);
  z-index: 10020;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}

html.dark-mode .cv-toast {
  background-color: var(--white);
  color: var(--ink);
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ── CONTACT STRIP (FULL-WIDTH EDITORIAL SECTION) ───────────────────── */
.contact-strip {
  width: 100%;
  background-color: #111110; /* the page colour */
  color: #ffffff;
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
  margin-bottom: 0;
  position: relative;
  z-index: 2;
  border-top: none;
  border-bottom: none;
  box-shadow: none;
  scroll-margin-top: calc(var(--nav-height) + 16px);
}

.contact-strip__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.contact-strip__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(2rem, 5vw, 5rem);
}

.contact-strip__left {
  flex: 0 0 60%;
  max-width: 60%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  text-align: left;
}

.contact-strip__headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 4.1rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 0;
  max-width: 18ch;
}

.contact-strip__btn-wrap {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.contact-strip .btn--primary,
#btn-trigger-cv-modal {
  background-color: #ffffff !important;
  color: #0e0e11 !important;
  border: 1px solid #ffffff !important;
  font-family: var(--font-body);
  font-size: var(--text-xs, 0.8125rem);
  font-weight: 550;
  letter-spacing: -0.01em;
  border-radius: 9999px !important;
  corner-shape: round; /* true pill; the global superellipse corners flatten it otherwise */
  padding: 0.65rem 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: all 0.2s ease;
}

.contact-strip .btn--primary:hover,
#btn-trigger-cv-modal:hover {
  background-color: #ededf0 !important;
  color: #000000 !important;
  border-color: #ededf0 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.contact-strip__right {
  flex: 0 0 320px;
  max-width: 320px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.contact-strip__heading {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 0 1.25rem 0;
}

.contact-strip__links {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.contact-strip__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 13px 0;
  margin-inline: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  border-radius: 0;
  background-color: transparent;
  position: relative;
  transition: border-color 0.25s ease;
}

.contact-strip__link:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-strip__link:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background-color: transparent;
}

.contact-strip__link-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-strip__link:hover .contact-strip__link-label {
  color: rgba(255, 255, 255, 0.7);
}

.contact-strip__link-value {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: -0.01em;
  text-align: right;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Staggered inertia underline directly underneath the actual link */
.contact-strip__underline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #ffffff;
  transform: scaleX(0);
  transform-origin: right center;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.contact-strip__link:hover .contact-strip__link-value {
  color: #ffffff;
}

.contact-strip__link:hover .contact-strip__underline {
  transform: scaleX(1);
  transform-origin: left center;
}

.contact-strip__link.is-underlined .contact-strip__underline {
  animation: contactUnderlineSweep 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes contactUnderlineSweep {
  0% {
    transform-origin: left center;
    transform: scaleX(0);
  }
  45% {
    transform-origin: left center;
    transform: scaleX(1);
  }
  55% {
    transform-origin: right center;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right center;
    transform: scaleX(0);
  }
}

@media (max-width: 860px) {
  .contact-strip__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
  }

  .contact-strip__left {
    flex: unset;
    max-width: 100%;
  }

  /* Stacked: the 320px basis would become a fixed 320px height and leave
     the column 7px short of the right margin on phones. */
  .contact-strip__right {
    flex: unset;
    max-width: min(100%, 420px);
  }

  .contact-strip__links {
    flex: unset;
    max-width: 100%;
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   RACHEL CHEN-INSPIRED EDITORIAL CASE STUDY ARCHITECTURE
   Contained hero, sticky sidebar with back link & TOC, 60/40 core flows,
   9:16 vertical user testing cards, insights, decisions, & reflections.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Container Layout ───────────────────────────────────────────────── */
.cs-rc-layout {
  width: 100%;
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-top: calc(var(--nav-height) + var(--space-6));
  padding-bottom: var(--space-16);
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 880px) minmax(180px, 1fr);
  justify-content: center;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 1280px) {
  .cs-rc-layout {
    grid-template-columns: 140px minmax(0, 1fr) 200px;
    gap: var(--space-6);
  }
}

@media (max-width: 1024px) {
  .cs-rc-layout {
    grid-template-columns: 80px minmax(0, 1fr) 190px;
    gap: var(--space-4);
    padding-inline: var(--space-3);
  }
}

@media (max-width: 860px) {
  .cs-rc-layout {
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--nav-height) + var(--space-4));
    padding-inline: var(--space-4);
    gap: 0;
  }
}

/* ── Left Rail: Back Navigation ─────────────────────────────────────── */
.cs-rc-rail-left {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 860px) {
  .cs-rc-rail-left {
    position: static;
    order: 1;
    margin-bottom: var(--space-2);
  }
}

/* ── Back Navigation Link ───────────────────────────────────────────── */
.cs-rc-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-60);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  width: fit-content;
}

.cs-rc-back:hover {
  color: var(--ink);
  transform: translateX(-3px);
}

.cs-rc-back-arrow {
  display: inline-block;
  font-size: 0.85rem;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out);
}

.cs-rc-back:hover .cs-rc-back-arrow {
  transform: translateX(-2px);
}

@media (max-width: 860px) {
  .cs-rc-back {
    display: inline-flex;
    font-size: 11px;
    padding: 6px 14px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ink-12);
    margin-bottom: var(--space-2);
  }

  html:not(.dark-mode) .cs-rc-back {
    background: rgba(0, 0, 0, 0.04);
  }
}

/* ── Right Rail / Sticky Sidebar (TOC Legend) ───────────────────────── */
.cs-rc-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  z-index: 20;
  width: 100%;
}

@media (max-width: 860px) {
  .cs-rc-sidebar {
    position: static;
    order: 2;
    margin-bottom: var(--space-4);
  }
}

/* ── Table of Contents (TOC) ────────────────────────────────────────── */
.cs-rc-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--ink-12);
  padding-left: 0;
  margin-left: 0;
  position: relative;
}

@media (max-width: 860px) {
  .cs-rc-toc {
    position: sticky;
    top: var(--nav-height);
    z-index: 1050;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-inline: calc(-1 * var(--space-4));
    padding: 10px var(--space-4);
    background: rgba(14, 14, 17, 0.95);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.4);
    transition: top 0.38s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
    margin-bottom: var(--space-4);
    border-left: none;
    margin-left: 0;
  }

  .cs-rc-toc::-webkit-scrollbar {
    display: none;
  }

  /* When main nav hides on scroll down, sticky TOC sits flush at screen top */
  .nav.nav--hidden ~ .cs-rc-layout .cs-rc-toc,
  body.nav-is-hidden .cs-rc-toc {
    top: 0px !important;
  }

  html:not(.dark-mode) .cs-rc-toc {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.06);
  }
}

.cs-rc-toc__link {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-40);
  text-decoration: none;
  padding: 6px 14px 6px 18px;
  border-radius: 0 !important;
  background-color: transparent !important;
  transition: color var(--dur-fast) var(--ease-out), font-weight var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  border-left: none !important;
}

.cs-rc-toc__link:hover {
  color: var(--ink-80);
}

.cs-rc-toc__link.active,
.cs-rc-toc__link--active {
  color: var(--ink) !important;
  font-weight: 500;
}

/* ── Interactive Progress Indicator inside TOC Link ─────────────────── */
.cs-rc-toc__indicator {
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
  transition: background-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  opacity: 0;
  z-index: 2;
}

/* When link is active, the white indicator container appears */
.cs-rc-toc__link.active .cs-rc-toc__indicator,
.cs-rc-toc__link--active .cs-rc-toc__indicator {
  opacity: 1;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}

html:not(.dark-mode) .cs-rc-toc__link.active .cs-rc-toc__indicator,
html:not(.dark-mode) .cs-rc-toc__link--active .cs-rc-toc__indicator {
  background: rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* The fluid yellow progress bar filling from top to bottom */
.cs-rc-toc__progress {
  display: block;
  width: 100%;
  height: 0%;
  background: #fef08a; /* Footer golden yellow */
  box-shadow: 0 0 8px rgba(254, 240, 138, 0.95), 0 0 2px #fef08a;
  border-radius: 2px;
  transform-origin: top center;
  transition: height 0.05s linear;
  will-change: height;
}

html:not(.dark-mode) .cs-rc-toc__progress {
  background: #d97706;
  box-shadow: 0 0 6px rgba(217, 119, 6, 0.6);
}

@media (max-width: 860px) {
  .cs-rc-toc__link {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-50);
    padding: 7px 14px 9px 14px;
    border-radius: 9999px !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    margin-left: 0;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    scroll-margin-inline: var(--space-4);
    overflow: hidden;
  }

  .cs-rc-toc__link:hover {
    color: var(--ink);
    background-color: rgba(255, 255, 255, 0.06) !important;
  }

  .cs-rc-toc__link.active,
  .cs-rc-toc__link--active {
    color: var(--ink) !important;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .cs-rc-toc__indicator {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 3px;
    transform: none;
    width: auto;
    height: 2px;
    border-radius: 1px;
  }

  .cs-rc-toc__progress {
    height: 100% !important;
    width: 0%;
    transform-origin: left center;
    transition: width 0.05s linear;
    will-change: width;
  }

  html:not(.dark-mode) .cs-rc-toc__link:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
  }

  html:not(.dark-mode) .cs-rc-toc__link.active,
  html:not(.dark-mode) .cs-rc-toc__link--active {
    background-color: rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #0e0e11 !important;
  }
}

/* ── Main Content Column ────────────────────────────────────────────── */
.cs-rc-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-width: 880px;
  width: 100%;
  margin-inline: auto;
  justify-self: center;
}

@media (max-width: 860px) {
  .cs-rc-main {
    order: 3;
    max-width: 100%;
    margin-inline: auto;
    gap: var(--space-8);
  }
}

/* ── Contained Hero Component ───────────────────────────────────────── */
.cs-rc-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--ink-12);
}

.cs-rc-hero__kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.2;
  color: var(--ink-50);
  margin-bottom: calc(-1 * var(--space-4) + 8px);
}

.cs-rc-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  font-weight: 350;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  max-width: 28ch;
}

@media (max-width: 768px) {
  .cs-rc-hero__title {
    font-size: clamp(1.75rem, 6.8vw, 2.35rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    word-break: normal;
    overflow-wrap: break-word;
  }
}

.cs-rc-hero__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--ink-12);
  background-color: var(--surface-alt);
  box-shadow: 0 4px 20px -2px rgba(24, 24, 27, 0.08);
  margin-top: var(--space-2);
}

.cs-rc-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 4-Column Metadata Grid ─────────────────────────────────────────── */
.cs-rc-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding-top: var(--space-6);
  margin-top: var(--space-2);
}

@media (max-width: 768px) {
  .cs-rc-meta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

.cs-rc-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-rc-meta-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta, 0.04em);
  color: var(--ink-50);
}

.cs-rc-meta-val {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  line-height: 1.45;
}

/* ── Generic Section Structure ──────────────────────────────────────── */
.cs-rc-section {
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-4);
}

@media (max-width: 860px) {
  .cs-rc-section {
    scroll-margin-top: calc(var(--nav-height) + 54px + var(--space-3));
  }

  .nav.nav--hidden ~ .cs-rc-layout .cs-rc-section,
  body.nav-is-hidden .cs-rc-section {
    scroll-margin-top: calc(54px + var(--space-3));
  }
}

.cs-rc-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: var(--ink-50);
  margin-bottom: calc(-1 * var(--space-5) + 8px);
}

.cs-rc-heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.cs-rc-heading+.cs-rc-subhead,
.cs-rc-heading+.cs-rc-body-text,
.cs-rc-heading+p {
  margin-top: calc(-1 * var(--space-5) + 12px);
}

.cs-rc-subhead+.cs-rc-body-text,
.cs-rc-body-text+.cs-rc-body-text {
  margin-top: calc(-1 * var(--space-5) + 16px);
}

.cs-rc-subhead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink-70);
  margin: 0;
}

.cs-rc-body-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--ink-70);
  margin: 0;
}

.cs-rc-body-text strong {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

/* ── Strategic Pillars Grid ─────────────────────────────────────────── */
.cs-rc-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-2);
}

@media (max-width: 768px) {
  .cs-rc-pillars {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

.cs-rc-pillar-card {
  padding: var(--space-5);
  border-radius: var(--r-lg);
  background-color: var(--white);
  border: 1px solid var(--ink-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-xs);
}

.cs-rc-pillar-card h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0;
}

.cs-rc-pillar-card p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0;
}

/* ── Problem & Diagram Card ─────────────────────────────────────────── */
.cs-rc-diagram-box {
  background-color: var(--surface-alt);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  margin-block: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cs-rc-diagram-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-50);
}

.cs-rc-diagram-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.cs-rc-diagram-node {
  background-color: var(--white);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-md);
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-xs);
}

.cs-rc-diagram-node--highlight {
  background-color: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.cs-rc-diagram-arrow {
  color: var(--ink-30);
  font-weight: bold;
}

/* ── Stats Callout Banner ───────────────────────────────────────────── */
.cs-rc-stats-banner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  background-color: var(--white);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  margin-block: var(--space-3);
  box-shadow: var(--shadow-xs);
}

@media (max-width: 640px) {
  .cs-rc-stats-banner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

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

.cs-rc-stat-val {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
}

.cs-rc-stat-label {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-meta, 0.04em);
  color: var(--ink-50);
  font-weight: var(--fw-semibold);
}

/* ── Opportunity Grid ───────────────────────────────────────────────── */
.cs-rc-opp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-2);
}

@media (max-width: 768px) {
  .cs-rc-opp-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

.cs-rc-opp-card {
  padding: var(--space-5);
  border-radius: var(--r-lg);
  background-color: var(--white);
  border: 1px solid var(--ink-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-xs);
}

.cs-rc-opp-card h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0;
}

.cs-rc-opp-card p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0;
}

/* ── Solution Showcase Media ────────────────────────────────────────── */
.cs-rc-solution-media {
  position: relative;
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--ink-12);
  background-color: var(--surface-alt);
  box-shadow: var(--shadow-md);
  margin-block: var(--space-4);
}

.cs-rc-solution-media img,
.cs-rc-solution-media video {
  width: 100%;
  height: auto;
  display: block;
}

.cs-rc-video-pill {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(24, 24, 27, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: var(--r-full);
  z-index: 5;
}

/* ── Core Flows: 60/40 Split Layout ─────────────────────────────────── */
.cs-rc-flows-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-3);
}

.cs-rc-flow-item {
  display: grid;
  grid-template-columns: 58% minmax(0, 1fr);
  gap: var(--space-6);
  align-items: end;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--ink-06);
}

@media (max-width: 768px) {
  .cs-rc-flow-item {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
  }
}

.cs-rc-flow-visual {
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--ink-12);
  background-color: var(--surface-alt);
  box-shadow: var(--shadow-sm);
}

.cs-rc-flow-visual img {
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: cover;
  display: block;
}

.cs-rc-flow-desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
}

.cs-rc-flow-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

.cs-rc-flow-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--ink-70);
  margin: 0;
}

/* ── Prototyping & Testing Unified Strip ────────────────────────────── */
.cs-rc-test-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-block: var(--space-4);
}

@media (max-width: 768px) {
  .cs-rc-test-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

.cs-rc-test-card {
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--ink-12);
  background-color: var(--surface-alt);
  box-shadow: 0 4px 14px -2px rgba(24, 24, 27, 0.08);
  position: relative;
}

.cs-rc-test-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-base) var(--ease-out);
}

.cs-rc-test-card:hover img {
  transform: scale(1.03);
}

.cs-rc-test-card__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(24, 24, 27, 0.85) 0%, transparent 100%);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

/* ── Key User Insights Grid ─────────────────────────────────────────── */
.cs-rc-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-block: var(--space-3);
}

@media (max-width: 640px) {
  .cs-rc-insight-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.cs-rc-insight-card {
  padding: var(--space-5);
  border-radius: var(--r-lg);
  background-color: var(--white);
  border: 1px solid var(--ink-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-xs);
}

.cs-rc-insight-card h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0;
}

.cs-rc-insight-card p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0;
}

/* ── Design Decisions ───────────────────────────────────────────────── */
.cs-rc-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-2);
}

@media (max-width: 768px) {
  .cs-rc-decision-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.cs-rc-decision-card {
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background-color: var(--white);
  border: 1px solid var(--ink-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-xs);
}

.cs-rc-decision-tag {
  display: inline-flex;
  width: fit-content;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background-color: var(--ink-06);
  color: var(--ink-70);
}

.cs-rc-decision-card h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0;
}

.cs-rc-decision-card p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0;
}

/* ── System Constraints & Tradeoffs ─────────────────────────────────── */
.cs-rc-tradeoff-box {
  background-color: var(--surface-alt);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-xl);
  padding: var(--space-8);
  margin-block: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.cs-rc-tradeoff-diagram {
  background-color: var(--white);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--space-4);
  box-shadow: var(--shadow-xs);
}

@media (max-width: 640px) {
  .cs-rc-tradeoff-diagram {
    flex-direction: column;
    text-align: center;
  }
}

.cs-rc-tradeoff-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cs-rc-tradeoff-bubble {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--ink-06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--ink);
  border: 1px solid var(--ink-12);
}

.cs-rc-tradeoff-bubble--primary {
  background-color: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  width: 84px;
  height: 84px;
}

/* ── Reflection Grid & Testimonial ──────────────────────────────────── */
.cs-rc-reflection-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-block: var(--space-4);
}

@media (max-width: 768px) {
  .cs-rc-reflection-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.cs-rc-reflection-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-rc-reflection-card h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 0;
}

.cs-rc-reflection-card p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--ink-70);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   HUMAN ABOUT SECTION & INTERACTIVE TOOLTIP SYSTEM
   ═══════════════════════════════════════════════════════════════════════ */

.about-human__signoff {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 0.5rem !important;
}

/* Interactive Human Hyperlinks with Tooltips */
.human-link {
  position: relative;
  display: inline-block;
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3.5px;
  text-decoration-color: currentColor;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.human-link:hover,
.human-link:focus-visible {
  color: #ffffff;
  text-decoration-color: #ffffff;
  outline: none;
}

/* Floating Tooltip Bubble */
.human-link::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #18181b;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 100;
  letter-spacing: 0.01em;
}

.human-link::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border-width: 4px 4px 0 4px;
  border-style: solid;
  border-color: #18181b transparent transparent transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease;
  z-index: 100;
}

.human-link:hover::after,
.human-link:hover::before,
.human-link:focus-visible::after,
.human-link:focus-visible::before,
.human-link.is-copied::after,
.human-link.is-copied::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.human-link.is-copied::after {
  background: #059669;
  /* emerald green on copied */
}

.human-link.is-copied::before {
  border-color: #059669 transparent transparent transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   ABOUT STATEMENT — John Dobie editorial style
   ═══════════════════════════════════════════════════════════════════════ */

.about-statement {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: clamp(4rem, 10vh, 8rem);
  background-color: #111110;
  overflow: hidden;
  transition: z-index 0.3s ease;
}

/* ── SILK AURORA WEBGL SATIN BACKGROUND (COMPONENTRY SPEC) ─────────── */
.statement-aurora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

.statement-aurora.is-revealed {
  opacity: 1;
}

/* ── STATEMENT IMAGE TRAIL (COMPONENTRY SPEC) ───────────────────────── */

.about-statement__text-wrap {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  text-align: center;
}

.about-statement__text {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3.15rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 0 auto;
  text-align: center;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.65), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.about-statement__highlight {
  color: #ffffff;
}

.about-statement__highlight .statement-word {
  display: inline-block;
  color: #ffffff;
  will-change: color;
  transition: color 0.2s ease;
  text-shadow: none;
}

.about-statement__dim {
  color: #ffffff;
}

/* ── STATEMENT ACTIVE FOCUS MODE (ELEVATED HEADLINE & TAB SWITCHING) ─ */
/* Fullscreen backdrop for active focus state */
.statement-active-backdrop {
  position: fixed;
  inset: 0;
  background-color: #08080b; /* Solid darkest background fill as requested */
  z-index: 920;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
}

body.has-statement-active-mode .statement-active-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Elevated active mode: exact component pushes up to header position */
body.has-statement-active-mode {
  overflow: hidden !important;
}

body.has-statement-active-mode .about-statement {
  position: fixed;
  inset: 0;
  z-index: 940;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: calc(var(--nav-height) + clamp(1.25rem, 2.5vw, 2.25rem));
  padding-bottom: clamp(3rem, 5vw, 5rem);
  background: transparent;
  justify-content: flex-start;
}

body.has-statement-active-mode .about-statement__text-wrap {
  flex: 0 0 100%;
  max-width: 1040px;
  width: 100%;
  transform: translateY(0);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Statement triggers — Clean editorial text with no hover effects */
.statement-trigger {
  position: relative;
  display: inline;
  color: #ffffff;
  cursor: default;
  text-decoration: none !important;
  font-weight: 400;
  border: none !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* "build products" pure white matching all statement text */
.statement-trigger[data-dock="build-products"] {
  color: #ffffff;
}

/* No hover or focus glow */
.statement-trigger:hover,
.statement-trigger:focus-visible {
  color: #ffffff !important;
  text-shadow: none !important;
  text-decoration: none !important;
  outline: none;
  border: none !important;
  background: transparent !important;
}

/* When in active mode: active selected trigger gets BOTH rounded stroke box AND underline */
.statement-trigger.is-selected-tab {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  text-decoration: underline !important;
  text-underline-offset: 6px !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
}

/* ── NAVIGATION BLUR & REQUEST CV TO CLOSE 'X' MORPH ─────────────── */
.nav.is-statement-focused .nav__link {
  filter: blur(8px);
  opacity: 0.22;
  pointer-events: none;
  transition: filter 0.45s ease, opacity 0.45s ease;
}

.nav__cv-btn.is-close-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-size: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5) !important;
  position: relative !important;
  z-index: 1100 !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nav__cv-btn.is-close-btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  transform: scale(1.08) rotate(90deg) !important;
}

.nav__cv-btn.is-close-btn::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-color: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── ACTIVE FOCUS CONTENT & PANELS (SIT UNDER ELEVATED HEADLINE) ─── */
.statement-focus-content {
  display: none;
  width: 100%;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body.has-statement-active-mode .statement-focus-content {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.statement-panel {
  display: none;
  width: 100%;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.statement-panel.is-active-panel {
  display: block;
  opacity: 1;
  animation: statementPanelFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes statementPanelFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.statement-panel__desc {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  color: #c4c4c8;
  max-width: 840px;
  margin: 0 0 clamp(1.5rem, 2.5vw, 2.25rem) 0;
}

.statement-panel__items {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(24px, 4vw, 52px);
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 2.8vw, 2.5rem);
}

/* Minimalist floating item: icon straight above label, NO container box */
.statement-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  cursor: default;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.statement-dock-item:hover {
  transform: translateY(-2px);
}

.statement-dock-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: none;
  border: none;
  box-shadow: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.statement-dock-item:hover .statement-dock-item__icon {
  color: #ffc83b;
  transform: scale(1.1);
}

.statement-dock-item__label {
  font-family: var(--font-body);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease;
}

.statement-dock-item:hover .statement-dock-item__label {
  color: #ffffff;
}

/* Architecture Pillars */
.statement-systems-overlay__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}

.statement-systems-overlay__pillar {
  background: #0d0d12;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px; /* Sharp rounding */
  padding: clamp(1.2rem, 1.8vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.statement-systems-overlay__pillar-num {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  color: #92948f;
}

.statement-systems-overlay__pillar-name {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: #ffffff;
}

.statement-systems-overlay__pillar-desc {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.45;
  color: #8e8e93;
}

/* High-density bento plane filling available width */
.statement-products-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(220px, 20vw, 280px);
  gap: 10px; /* Thin spacing as requested */
  width: 100%;
}

.statement-products-tile {
  position: relative;
  overflow: hidden;
  border-radius: 8px; /* Sharp rounding */
  background-color: #0e0e13;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.statement-products-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.22);
}

.statement-products-tile--feature {
  grid-column: span 2;
  grid-row: span 2;
}

.statement-products-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.statement-products-tile:hover .statement-products-tile__img {
  transform: scale(1.035);
}

.statement-products-tile__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: linear-gradient(to top, rgba(6, 6, 8, 0.95) 0%, rgba(6, 6, 8, 0.4) 65%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.statement-products-tile__tag {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffc83b;
}

.statement-products-tile__name {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.18rem);
  font-weight: 500;
  color: #ffffff;
  margin: 0;
}

@media (max-width: 900px) {
  .statement-systems-overlay__pillars {
    grid-template-columns: 1fr;
  }
  .statement-products-bento {
    grid-template-columns: 1fr 1fr;
  }
  .statement-products-tile--feature {
    grid-column: span 2;
    grid-row: auto;
    min-height: 280px;
  }
}

@media (max-width: 600px) {
  .statement-products-bento {
    grid-template-columns: 1fr;
  }
  .statement-products-tile--feature {
    grid-column: auto;
  }
}

@media (max-width: 768px) {

  .about-statement__text-wrap {
    flex: unset;
    max-width: 100%;
    text-align: center;
  }

  .about-statement__text {
    font-size: clamp(1.75rem, 4.8vw, 2.65rem);
    line-height: 1.15;
    text-align: center;
  }

  .about-hero__statement .about-statement__text {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    line-height: 1.16;
    letter-spacing: -0.03em;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOM CURSOR — Pill badge on work cards (John Dobie capsule style)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hide default cursor only when hovering image visuals, notes cards, and gallery tiles */
.work-showcase-card__visual,
.work-showcase-card__visual *,
.notes-card,
.notes-card *,
.tile,
.tile * {
  cursor: none !important;
}

/* The custom cursor outer wrapper — hardware-accelerated transform tracking */
#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  will-change: transform;
  transform: translate3d(-200px, -200px, 0);
}

/* The custom cursor badge — John Dobie capsule pill */
.custom-cursor__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0.45rem 1.15rem;
  border-radius: 9999px !important;
  corner-shape: round; /* true pill; the global superellipse corners flatten it otherwise */
  background: rgba(22, 22, 25, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Switzer", sans-serif);
  font-size: 0.845rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #ffffff;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease-out;
}

#custom-cursor.is-active .custom-cursor__badge {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#custom-cursor.is-pressed .custom-cursor__badge {
  transform: translate(-50%, -50%) scale(0.92);
  transition: transform 0.08s ease-out;
}

@media (pointer: coarse) {
  #custom-cursor {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER CURTAIN REVEAL EFFECT (LOWER Z-SPACE) & 100VH ELEVATED FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
.site-reveal-footer {
  width: 100%;
  min-height: 100vh;
  background-color: #111110;
  color: #ffffff;
  position: relative;
  z-index: 1;
}

@media (min-width: 769px) and (min-height: 500px) {
  body.has-footer-reveal {
    min-height: 100%;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
  }

  body.has-footer-reveal .site-reveal-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    z-index: 0;
    pointer-events: auto;
    background-color: var(--color-footer-yellow);
  }

  body.has-footer-reveal .main,
  body.has-footer-reveal main {
    position: relative;
    z-index: 2;
    background-color: var(--surface);
    margin-bottom: var(--reveal-footer-height, 100vh);
    box-shadow: none;
  }
}

body:not(.has-footer-reveal) .site-reveal-footer {
  position: relative;
  z-index: 1;
}

/* ── Footer reveal: rounded page corners ──────────────────────────
   The bottom corners of the page round in as the footer is uncovered.
   The radius is set by scroll (assets/js/modules/footer-corners.js);
   --reveal-corner-max is the finished radius. */
body {
  --reveal-corner-max: 32px;
}

body:not(.has-footer-reveal) .main,
body:not(.has-footer-reveal) main {
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

/* Ensure case study layout never has fixed footer curtain overlap */
body:has(.cs-rc-layout) .footer,
body:has(.cs-rc-layout) .site-reveal-footer,
.cs-rc-layout ~ .footer,
.cs-rc-layout ~ .site-reveal-footer {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 5 !important;
  margin-top: var(--space-16);
  pointer-events: auto !important;
}

body:has(.cs-rc-layout) .main,
body:has(.cs-rc-layout) main,
main.cs-rc-layout {
  position: relative !important;
  z-index: 10 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

/* Deep Saturated Sunset Savanna Theme for Footer (100vh Viewport Height) */
.site-reveal-footer .footer,
.footer {
  background-color: var(--color-footer-yellow);
  color: #041a02;
  border-top: none;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(2.5rem, 5vh, 4rem);
  padding-bottom: clamp(1.25rem, 2.5vh, 2rem);
  position: relative;
  overflow: hidden;
}

@media (min-width: 769px) and (min-height: 600px) {
  .site-reveal-footer .footer,
  .footer {
    height: 100vh;
  }
}

/* Layer 1: Ambient Sunset Savanna Sky (Clean, Radiant, NO Bottom Vignette or Shadow) */
.footer__sunset-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 85% 65% at 50% 35%, rgba(255, 215, 95, 0.75) 0%, rgba(245, 158, 11, 0.45) 45%, transparent 80%),
    linear-gradient(180deg, #b86e18 0%, #d47e19 30%, #e08c1d 65%, #c47112 100%);
}

/* Layer 2: Animated Birds in Flight (Center-Top Radiant Sun Sky, Interactive Wingbeat Flight) */
.footer__birds-wrap {
  position: absolute;
  top: clamp(8%, 11.5vh, 15%);
  left: 50.8%;
  transform: translateX(-50%);
  width: clamp(120px, 15.2vw, 240px);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  z-index: 6;
  mix-blend-mode: soft-light;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer__birds-wrap:hover,
.footer__birds-wrap.is-flapping {
  transform: translateX(-50%) translateY(-2px);
}

.footer__birds-img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

.footer__birds-img--still {
  position: relative;
  opacity: 1;
}

.footer__birds-img--animated {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

/* Active Flapping State: either via Hover or initial reveal .is-flapping */
.footer__birds-wrap:hover .footer__birds-img--still,
.footer__birds-wrap.is-flapping .footer__birds-img--still {
  opacity: 0;
}

.footer__birds-wrap:hover .footer__birds-img--animated,
.footer__birds-wrap.is-flapping .footer__birds-img--animated {
  opacity: 1;
}

@media (max-width: 768px) {
  .footer__birds-wrap {
    top: clamp(10%, 14vh, 18%);
    left: 52%;
    width: clamp(110px, 26vw, 160px);
    opacity: 0.9;
  }
}

/* Layer 2.5: Acacia Tree Silhouette (Anchored to Bottom-Right, Soft-Light Blend Mode, Below All Text) */
.footer__tree-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  width: clamp(650px, 75vw, 1350px);
  max-width: 90vw;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  mix-blend-mode: soft-light;
}

.footer__tree-img {
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
  object-position: bottom right;
  display: block;
}

/* Layer 3: Foreground Interactive Container (Elevated Above Tree Layer) */
.footer__container,
.footer > .container {
  position: relative;
  z-index: 5;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

.footer__social-links {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.65rem;
  margin-bottom: 0.65rem;
}

.footer__social-link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: rgba(4, 26, 2, 0.78) !important;
  text-decoration: none;
  transition: color 0.18s ease;
  display: inline-block;
  text-shadow: none !important;
}

.footer__social-link:hover {
  color: #041a02 !important;
  text-decoration: underline;
}

.footer__location {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: rgba(4, 26, 2, 0.65) !important;
  margin-bottom: 0.75rem;
  text-shadow: none !important;
}

.footer__links--simple {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-end;
  margin-left: auto;
}

.footer__links--simple .footer__nav-link {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: #041a02 !important;
  text-decoration: none;
  transition: color 0.18s ease;
  text-shadow: none !important;
}

.footer__links--simple .footer__nav-link:hover {
  color: #041a02 !important;
  text-decoration: underline;
}

.site-reveal-footer .footer__brand,
.footer__brand {
  max-width: clamp(380px, 48vw, 640px);
}

/* Footer text: dark tone with strictly NO text-shadow */
.site-reveal-footer .footer__brand .footer__desc,
.footer__desc {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.15vw, 2.05rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #041a02 !important;
  text-shadow: none !important;
  max-width: 28ch;
  margin-block: 0.25rem 0.5rem;
}

.site-reveal-footer .footer__brand .footer__logo span,
.footer__logo span {
  color: #041a02 !important;
  text-shadow: none !important;
}

/* Footer "Get in touch" button: clean fill, strictly NO outline, NO shadow */
.site-reveal-footer .footer__btn,
.footer__btn {
  background-color: #140d05 !important;
  color: #ffffff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-weight: 500;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  border-radius: var(--r-md) !important;
  padding: 0.65rem 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-shadow: none !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
  margin-top: var(--space-1);
}

.site-reveal-footer .footer__btn:hover,
.footer__btn:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

/* Giant Full-Width Watermark: AMU SHIRINGANI (Edge-to-Edge Margin Scaling, NO Box Artifacts) */
.footer__watermark-giant {
  width: 100%;
  margin-top: auto; /* Pushes watermark way lower towards the bottom */
  margin-bottom: clamp(1rem, 2.2vh, 1.75rem); /* Elegant spacing above the divider line without touching it */
  text-align: left; /* Starts at the leftmost container margin */
  user-select: none;
  line-height: 0.84;
  overflow: hidden;
  padding-bottom: 0.08em;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform-origin: left bottom;
}

.footer__watermark-text {
  font-family: var(--font-display);
  font-size: clamp(3rem, 11.8vw, 16rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #fef08a;
  display: inline-block;
  white-space: nowrap;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(245, 158, 11, 0.42) 0%,
    rgba(245, 158, 11, 0.42) 32%,
    rgba(251, 191, 36, 0.58) 42%,
    rgba(254, 243, 199, 0.82) 48%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(254, 243, 199, 0.82) 52%,
    rgba(251, 191, 36, 0.58) 58%,
    rgba(245, 158, 11, 0.42) 68%,
    rgba(245, 158, 11, 0.42) 100%
  );
  background-size: 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 32px rgba(254, 240, 138, 0.14);
  animation: watermark-luminous-sheen 14s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: background-position;
}

@keyframes watermark-luminous-sheen {
  0% {
    background-position: 220% center;
  }
  50% {
    background-position: -120% center;
  }
  100% {
    background-position: -120% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer__watermark-text {
    animation: none;
    background-position: center;
  }
}

/* Divider Line */
.footer__bottom-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(4, 26, 2, 0.18);
  margin-top: 0;
  margin-bottom: clamp(1rem, 2vh, 1.5rem);
  flex-shrink: 0;
}

/* Bottom Row: Privacy Policy, Terms, Made with Love */
.footer__bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  flex-shrink: 0;
}

.footer__bottom-row .footer__copyright {
  font-family: var(--font-body);
  font-size: var(--text-xs) !important;
  color: rgba(4, 26, 2, 0.65) !important;
  margin: 0;
  text-shadow: none !important;
}

.footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.footer__legal-link {
  font-family: var(--font-body);
  font-size: var(--text-xs) !important;
  color: rgba(4, 26, 2, 0.65) !important;
  text-decoration: none;
  transition: color var(--dur-base) ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-shadow: none !important;
}

.footer__legal-link:hover {
  color: #041a02 !important;
  text-shadow: none !important;
}

.footer__legal-link--credit {
  color: rgba(4, 26, 2, 0.65) !important;
  font-weight: var(--fw-regular);
  text-shadow: none !important;
}

.footer__legal-link--credit .footer__heart {
  color: rgba(4, 26, 2, 0.65) !important;
}

.footer__heart {
  color: rgba(255, 255, 255, 0.45);
  display: inline-block;
  font-size: 0.85em;
  transition: transform 0.2s ease, color 0.2s ease;
}

.footer__legal-link--credit:hover .footer__heart {
  color: #e11d48 !important;
  animation: heartBeat 0.8s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.35);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.35);
  }
  70% {
    transform: scale(1);
  }
}

/* For pages where .contact is wrapped inside .site-reveal-footer */
.site-reveal-footer .contact {
  background-color: #111110;
  color: #ffffff;
  padding-top: clamp(4rem, 6vw, 6rem);
  padding-bottom: clamp(4rem, 6vw, 6rem);
  border-bottom: none;
}

.site-reveal-footer .contact__headline {
  color: #ffffff;
}

.site-reveal-footer .contact__link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-reveal-footer .contact__link-label {
  color: rgba(255, 255, 255, 0.45);
}

.site-reveal-footer .contact__link-value {
  color: rgba(255, 255, 255, 0.85);
}

.site-reveal-footer .contact__link:hover .contact__link-value {
  color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════
   ABOUT PAGE — EDITORIAL REFRESH (MATCHING USER REFERENCES)
   ═══════════════════════════════════════════════════════════════════════ */

/* Section Margins & Spacing */
.about-hero-section {
  padding-top: calc(var(--nav-height) + clamp(2rem, 4vw, 4rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.about-page__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.about-hero__statement {
  max-width: 960px;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.about-hero__statement .about-statement__text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.15vw, 2.05rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 0;
  text-align: left;
  white-space: normal;
  max-width: 100%;
}

.about-hero__statement .about-statement__text-wrap {
  flex: 0 0 100%;
  max-width: 100%;
}

.about-hero__statement .about-statement__dim {
  color: rgba(255, 255, 255, 0.46);
  font-weight: 400;
}

.about-hero__statement .about-statement__highlight,
.about-hero__statement .statement-trigger {
  color: #ffffff;
}

.about-hero__divider {
  width: 100%;
  height: 1px;
  background-color: var(--ink-12);
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

/* Two-column Narrative Story Grid (Matching Image 1) */
.about-story-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 768px) {
  .about-story-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.about-chip {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  color: var(--ink-70);
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  width: fit-content;
}

.about-story__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.about-story__lead {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 48ch;
  margin: 0;
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

.about-story__paragraphs {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  line-height: 1.72;
  color: var(--ink-70);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 64ch;
}

.about-story__right .about-metrics-grid {
  width: 100%;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  margin-bottom: 0;
}

/* Wide Editorial Workspace Banner */

.about-banner__wrap {
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--ink-12);
  margin-bottom: clamp(3.5rem, 5vw, 5rem);
}

.about-banner__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8.5;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

/* Background & Focus Section */

.about-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

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

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

.about-metric-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background-color: var(--surface-alt);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-lg);
}

.about-metric-card__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
}

.about-metric-card__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--ink-70);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   SELECTED WORK PAGE — JOHN DOBIE REFERENCE DESIGN
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Footer "START A PROJECT →" Link (Exact Match to User Reference) ── */
.footer__project-cta-wrap {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.footer__start-project {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #041a02;
  text-decoration: none;
  border-bottom: 1px solid rgba(4, 26, 2, 0.45);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  width: fit-content;
  text-shadow: none !important;
}

.footer__start-project:hover {
  color: #041a02;
  border-bottom-color: #041a02;
  text-shadow: none !important;
}

.footer__start-project svg {
  transition: transform 0.2s ease;
}

.footer__start-project:hover svg {
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════════════
   PROJECT ORDER MODAL (JOHN DOBIE REFERENCE REPRODUCTION)
   ═══════════════════════════════════════════════════════════════════════ */
.pom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pom-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pom-modal {
  position: relative;
  width: 100%;
  max-width: 860px;
  height: 580px;
  max-height: 88vh;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  overflow: hidden;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.pom-overlay.is-active .pom-modal {
  transform: translateY(0) scale(1);
}

/* ── Sidebar (Left Column) ─────────────────────────────────────────── */
.pom-sidebar {
  background: rgba(18, 18, 17, 0.50);
  backdrop-filter: blur(36px) saturate(190%);
  -webkit-backdrop-filter: blur(36px) saturate(190%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  user-select: none;
  height: 100%;
}

.pom-sidebar-top {
  display: flex;
  flex-direction: column;
}

.pom-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
}

.pom-step-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-top: 18px;
  margin-bottom: 12px;
  will-change: transform, opacity;
}

.pom-step-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.52);
  margin: 0;
  will-change: transform, opacity;
}

.pom-sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 24px;
}

/* ── Progress Indicators ───────────────────────────────────────────── */
.pom-progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pom-progress-segments {
  display: flex;
  flex: 1;
  gap: 6px;
}

.pom-progress-seg {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  transition: background-color 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease;
}

.pom-progress-seg.is-filled {
  background: #ffffff;
}

.pom-progress-count {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Sidebar Actions / Nav Buttons ─────────────────────────────────── */
.pom-actions {
  display: flex;
  gap: 10px;
}

.pom-btn-back {
  flex: 1;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  padding: 10px 18px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pom-btn-back:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  transform: translateY(-1px);
}

.pom-btn-back:active {
  transform: scale(0.98);
}

.pom-btn-back.is-hidden {
  display: none !important;
}

.pom-btn-continue {
  flex: 1.3;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #111110;
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: var(--r-md);
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pom-btn-continue:hover {
  background: #e8e8e6;
  border-color: #e8e8e6;
  transform: translateY(-1px);
}

.pom-btn-continue:active {
  transform: scale(0.98);
}

.pom-btn-continue--submit {
  background: #ffffff;
  color: #111110;
  border-color: #ffffff;
}

.pom-btn-continue--submit:hover {
  background: #e8e8e6;
  border-color: #e8e8e6;
}

/* ── Form Body (Right Column) ──────────────────────────────────────── */
.pom-body {
  position: relative;
  overflow-y: auto;
  padding: 32px 36px 36px 36px;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #111110;
}

.pom-body::-webkit-scrollbar {
  width: 6px;
}

.pom-body::-webkit-scrollbar-track {
  background: transparent;
}

.pom-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
}

.pom-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

.pom-close-btn {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
  z-index: 10;
}

.pom-close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* ── Step Container Panes ──────────────────────────────────────────── */
.pom-step-pane {
  display: none;
  flex-direction: column;
  opacity: 1;
  transform: none;
  will-change: transform, opacity;
}

.pom-step-pane.is-active {
  display: flex;
}

/* ── Typography & Headings ─────────────────────────────────────────── */
.pom-section-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 450;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.pom-section-title:not(:first-child) {
  margin-top: 24px;
}

.pom-help-text {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 14px 0;
  line-height: 1.45;
}

/* ── Form Inputs ───────────────────────────────────────────────────── */
.pom-field-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.pom-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 6px;
  transition: color 0.2s ease;
}

.pom-input,
.pom-select,
.pom-textarea {
  font-family: var(--font-body);
  font-size: 13px;
  color: #ffffff;
  background: #1c1c1b;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.18s ease, background-color 0.18s ease;
  width: 100%;
}

.pom-input::placeholder,
.pom-textarea::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.pom-input:focus,
.pom-select:focus,
.pom-textarea:focus {
  background: #222221;
  border-color: rgba(255, 255, 255, 0.35);
}

.pom-textarea {
  min-height: 95px;
  resize: vertical;
  line-height: 1.5;
}

/* ── Error State (Matching Screenshot 9) ───────────────────────────── */
.pom-field--error .pom-label {
  color: #E05252 !important;
}

.pom-field--error .pom-input,
.pom-field--error .pom-select {
  border-color: #E05252 !important;
  background: rgba(224, 82, 82, 0.05) !important;
}

.pom-error-msg {
  display: none;
  font-family: var(--font-body);
  font-size: 11px;
  color: #E05252;
  margin-top: 5px;
}

.pom-field--error .pom-error-msg {
  display: block;
}

/* ── Radio Cards (Screenshots 1, 2, 3, 4, 5) ───────────────────────── */
.pom-radio-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.pom-radio-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1c1c1b;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 13px 18px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.pom-radio-card:hover {
  background: #222221;
  border-color: rgba(255, 255, 255, 0.16);
}

.pom-radio-card.is-selected {
  background: #242423;
  border-color: rgba(255, 255, 255, 0.26);
}

.pom-radio-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 16px;
}

.pom-radio-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
}

.pom-radio-desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
}

.pom-radio-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.pom-radio-card.is-selected .pom-radio-dot {
  border-color: #ffffff;
  background: #ffffff;
  box-shadow: inset 0 0 0 3px #242423;
}

/* ── Two-Column Checkboxes (Step 3) ────────────────────────────────── */
.pom-check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
  margin-bottom: 16px;
}

.pom-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}

.pom-check-box {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #1c1c1b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.pom-check-item:hover .pom-check-box {
  border-color: rgba(255, 255, 255, 0.4);
}

.pom-check-item.is-checked .pom-check-box {
  background: #ffffff;
  border-color: #ffffff;
}

.pom-check-mark {
  display: none;
  width: 10px;
  height: 10px;
  stroke: #111110;
  stroke-width: 2.5;
  fill: none;
}

.pom-check-item.is-checked .pom-check-mark {
  display: block;
}

.pom-check-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.pom-check-item.is-checked .pom-check-label {
  color: #ffffff;
}

/* ── Dynamic Brief Card (Step 5, Screenshot 11) ─────────────────────── */
.pom-brief-card {
  background: #1c1c1b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 24px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  white-space: pre-line;
  margin-bottom: 14px;
  max-height: 380px;
  overflow-y: auto;
}

.pom-brief-hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

/* ── Success Overlay State ─────────────────────────────────────────── */
.pom-modal.is-success {
  grid-template-columns: 1fr;
  max-width: 640px;
  min-height: 490px;
}

.pom-modal.is-success .pom-sidebar {
  display: none !important;
}

.pom-modal.is-success .pom-body {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 36px;
  width: 100%;
  height: 100%;
  text-align: center;
}

.pom-success-wrap {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  gap: 18px;
  width: 100%;
  max-width: 500px;
  margin: auto;
}

.pom-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(20, 194, 95, 0.12);
  border: 1px solid rgba(20, 194, 95, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14c25f;
  box-shadow: 0 0 28px rgba(20, 194, 95, 0.18);
  margin-bottom: 4px;
}

.pom-success-icon svg {
  width: 30px;
  height: 30px;
}

.pom-success-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.22;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

.pom-success-msg {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
}

#pom-btn-done {
  margin-top: 8px;
  min-width: 160px;
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-md);
  align-self: center;
}

/* ── Responsive Rules ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pom-modal {
    grid-template-columns: 1fr;
    height: auto;
    max-height: 92vh;
  }

  .pom-sidebar {
    padding: 22px 20px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .pom-step-title {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 6px;
  }

  .pom-sidebar-bottom {
    padding-top: 14px;
    gap: 14px;
  }

  .pom-body {
    padding: 24px 20px;
  }

  .pom-check-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL SYSTEM — data-reveal attribute
   ══════════════════════════════════════════════════════════════════════════

   Usage: Add data-reveal="fade-up|fade-in|scale-in|slide-left|slide-right"
   Optional: data-reveal-delay="100" (ms, applied as CSS var)
   Optional: data-reveal-stagger on a parent to stagger children 80ms each
   ══════════════════════════════════════════════════════════════════════════ */

/* Base hidden state — set on all reveal elements before IntersectionObserver fires */
[data-reveal] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-duration: 0.72s;
  will-change: opacity, transform;
}

/* Delay support via inline CSS variable */
[data-reveal][data-reveal-delay] {
  transition-delay: var(--reveal-delay, 0ms);
}

/* Prevent layout shift during SSR/no-JS */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Initial positions ─────────────────────────────────────────────────── */
[data-reveal="fade-up"] {
  transform: translateY(28px);
}
[data-reveal="fade-down"] {
  transform: translateY(-20px);
}
[data-reveal="fade-in"] {
  /* opacity only — no transform needed */
}
[data-reveal="scale-in"] {
  transform: scale(0.94);
}
[data-reveal="slide-left"] {
  transform: translateX(-32px);
}
[data-reveal="slide-right"] {
  transform: translateX(32px);
}

/* ── Revealed state (added by JS IntersectionObserver) ─────────────────── */
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ── Stagger children ──────────────────────────────────────────────────── */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal-stagger].is-revealed > *:nth-child(1)  { transition-delay:   0ms; }
[data-reveal-stagger].is-revealed > *:nth-child(2)  { transition-delay:  80ms; }
[data-reveal-stagger].is-revealed > *:nth-child(3)  { transition-delay: 160ms; }
[data-reveal-stagger].is-revealed > *:nth-child(4)  { transition-delay: 240ms; }
[data-reveal-stagger].is-revealed > *:nth-child(5)  { transition-delay: 320ms; }
[data-reveal-stagger].is-revealed > *:nth-child(6)  { transition-delay: 400ms; }
[data-reveal-stagger].is-revealed > *:nth-child(7)  { transition-delay: 480ms; }
[data-reveal-stagger].is-revealed > *:nth-child(8)  { transition-delay: 560ms; }

[data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: none;
}

/* ── Contact form enhanced focus states ──────────────────────────────────── */
.cform-input {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.cform-input:focus {
  border-color: var(--gold, #c9a84c);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15), 0 0 20px rgba(201, 168, 76, 0.08);
  background-color: rgba(201, 168, 76, 0.03);
  outline: none;
}

.cform-input.is-error {
  border-color: #e05252;
  box-shadow: 0 0 0 3px rgba(224, 82, 82, 0.15);
}

.cform-input.is-valid {
  border-color: #4caf7a;
  box-shadow: 0 0 0 3px rgba(76, 175, 122, 0.12);
}

/* Error message */
.cform-error {
  display: none;
  margin-top: 6px;
  font-size: 0.8rem;
  color: #e05252;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.cform-field:has(.is-error) .cform-error {
  display: block;
}

/* Char counter */
.cform-char-counter {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-muted, rgba(255,255,255,0.4));
  text-align: right;
  letter-spacing: 0.02em;
}

.cform-char-counter.is-near-limit {
  color: var(--gold, #c9a84c);
}

/* Submit button loading state */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.75;
  position: relative;
}

.btn.is-loading .btn-text {
  opacity: 0;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: none;
}

.btn__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin-cw 0.7s linear infinite;
}

.btn.is-loading .btn__spinner {
  display: inline-block;
}

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

/* Confirmation checkmark draw animation */
.cflow-confirm__check svg polyline {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.cflow-confirm.is-drawn .cflow-confirm__check svg polyline {
  stroke-dashoffset: 0;
}

/* ── Mobile nav enhancements ─────────────────────────────────────────────── */

/* Premium hamburger → strictly hidden on desktop, only displayed on mobile breakpoint (<= 860px) */
.nav__hamburger {
  display: none !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  color: var(--apple-nav-text, #ffffff);
  transition: background-color 0.2s ease;
  z-index: 102;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

@media screen and (max-width: 860px) {
  .nav__hamburger {
    display: flex !important;
  }
}

@media screen and (min-width: 861px) {
  .nav__hamburger {
    display: none !important;
  }
}

.nav__hamburger:hover {
  background: rgba(255, 255, 255, 0.08);
}

.nav__hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease,
              width 0.25s ease;
}

/* X state centered rotation */
.nav__hamburger.is-active .nav__hamburger-line:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}

.nav__hamburger.is-active .nav__hamburger-line:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* Frosted glass mobile drawer (matching Start Project overlay blur) */
.nav__mobile-drawer {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease;
  backdrop-filter: blur(36px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(190%) !important;
  background: rgba(18, 18, 17, 0.50) !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html.dark-mode .nav__mobile-drawer {
  background: rgba(18, 18, 17, 0.50) !important;
  backdrop-filter: blur(36px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(190%) !important;
}

/* Fix iOS scroll bounce behind drawer */
.nav__mobile-drawer.is-open {
  overscroll-behavior: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT FORM — PREMIUM UI POLISH
   ══════════════════════════════════════════════════════════════════════════ */

/* Gold focus glow on scoper inputs (dark mode) */
html.dark-mode .scoper-modal-card .cform-input:focus {
  border-bottom-color: var(--gold, #c9a84c);
  box-shadow: 0 2px 0 0 rgba(201, 168, 76, 0.3);
}

/* Valid state */
html.dark-mode .scoper-modal-card .cform-input.is-valid {
  border-bottom-color: #4caf7a;
}

/* Error state */
html.dark-mode .scoper-modal-card .cform-input.is-error {
  border-bottom-color: #e05252;
}

/* ── Confirmation step premium styling ────────────────────────────────── */
.cflow-confirm {
  text-align: center;
  padding: var(--space-4) 0;
}

.cflow-confirm__check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(76, 175, 122, 0.15) 0%, rgba(76, 175, 122, 0.05) 100%);
  border: 1.5px solid rgba(76, 175, 122, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
  color: #4caf7a;
}

.cflow-confirm__check svg {
  width: 24px;
  height: 24px;
}

/* ── Input label float animation ──────────────────────────────────────── */
.cform-field {
  position: relative;
}

/* Smooth label transition when field has value or is focused */
.cform-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-50);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  transition: color 0.2s ease;
}

.cform-field:focus-within .cform-label {
  color: var(--ink);
}

html.dark-mode .cform-field:focus-within .cform-label {
  color: var(--gold, #c9a84c);
}

/* Required star */
.cform-required {
  color: #e05252;
  margin-left: 2px;
}

/* ── Row layout for name fields ───────────────────────────────────────── */
.cform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

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

/* ── Cflow action buttons alignment ───────────────────────────────────── */
.cform-actions {
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink-06);
  margin-top: var(--space-6);
}

html.dark-mode .cform-actions {
  border-top-color: rgba(255,255,255,0.06);
}

/* ═══════════════════════════════════════════════════════════════════════
   3D INTERACTIVE BOOKSHELF ARCHIVE (COMPONENTRY SPEC)
   Full-width WebGL shelf with tactile cloth-bound books, 3D orbit inspection,
   horizontal camera navigation, and gold foil stamping.
   ═══════════════════════════════════════════════════════════════════════ */

.about-bookshelf-section {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: clamp(520px, 60vh, 600px);
  background-color: #111110; /* flat page colour: the shelf edge is the only line here */
  border: none;
  overflow: hidden;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.bookshelf-stage {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  outline: none;
  overflow: hidden;
}

.bookshelf-stage:active {
  cursor: grabbing;
}

.bookshelf-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

/* ── Bookshelf Hover Chip (Matching Homepage Case Study Cursor Badge) ── */
.bookshelf-chip {
  pointer-events: none;
  position: absolute;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.45rem 1.15rem;
  border-radius: 9999px !important;
  background: rgba(22, 22, 25, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Switzer", sans-serif);
  font-size: 0.845rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffffff;
  white-space: nowrap;
  transform: translate(-50%, -100%) translateY(-14px) scale(0.7);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease-out;
}

.bookshelf-chip.is-visible {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(-14px) scale(1);
}

.bookshelf-chip__title {
  color: #ffffff;
  font-weight: 500;
}

.bookshelf-chip__author {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 400;
  font-size: 0.82rem;
}

.bookshelf-chip__dot {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.9rem;
  line-height: 1;
}

/* ── Navigation Arrow Buttons (Visible on tablet & mobile, hidden on desktop) ── */
.bookshelf-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(22, 22, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  display: none; /* Hidden on desktop */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bookshelf-arrow--left {
  left: clamp(16px, 3vw, 36px);
}

.bookshelf-arrow--right {
  right: clamp(16px, 3vw, 36px);
}

.bookshelf-arrow:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.08);
}

/* Show navigation arrows only on tablet and mobile viewports */
@media (max-width: 1024px) {
  .bookshelf-arrow {
    display: flex;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   LARGE DISPLAY & DELL S2725QC 4K PROPORTIONAL SCALING SYSTEM
   ═══════════════════════════════════════════════════════════════════════ */

/* Large Desktop (1680px - 2159px) */
@media screen and (min-width: 1680px) {
  :root {
    --container-max: 100%;
    --container-pad: clamp(2rem, 3.2vw, 3.5rem);
    --nav-height: 70px;
  }

  html {
    font-size: 17px;
  }

  .hero--showcase .hero__content {
    max-width: clamp(480px, 32vw, 620px);
  }

  .hero--showcase .hero__headline--home {
    font-size: clamp(2.1rem, 2.5vw, 2.75rem);
  }

  .about-hero__statement .about-statement__text {
    font-size: clamp(1.85rem, 2.2vw, 2.35rem);
  }

  .about-statement__text {
    font-size: clamp(2.65rem, 3.5vw, 3.85rem);
  }

  .featured-work__grid {
    gap: clamp(1.75rem, 2.2vw, 2.5rem);
  }

  .footer__brand {
    max-width: clamp(480px, 42vw, 720px);
  }
}

/* Dell S2725QC 4K / Ultra-Wide Display Scaling (2160px+) */
@media screen and (min-width: 2160px) {
  :root {
    --container-max: 100%;
    --container-pad: clamp(2.5rem, 4vw, 4.5rem);
    --nav-height: 76px;
  }

  html {
    font-size: 18px;
  }

  .hero--showcase .hero__content {
    max-width: clamp(560px, 28vw, 720px);
  }

  .hero--showcase .hero__headline--home {
    font-size: clamp(2.45rem, 2.6vw, 3.25rem);
  }

  .about-hero__statement .about-statement__text {
    font-size: clamp(2.15rem, 2.2vw, 2.75rem);
  }

  .about-statement__text {
    font-size: clamp(3rem, 3.8vw, 4.5rem);
  }

  .featured-work__grid {
    gap: clamp(2rem, 2.5vw, 3rem);
  }

  .footer__brand {
    max-width: clamp(560px, 38vw, 820px);
  }
}

/* Boundary Displays > 2560px: Fluidly maintain container margin padding */
@media screen and (min-width: 2560px) {
  :root {
    --container-max: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   LABS ROW: hover zoom
   ═══════════════════════════════════════════════════════════════════════ */

/* Soft zoom of the image inside the tile on hover (the frame stays put) */
.archive-tile .archive-tile__img,
.archive-tile .archive-tile__cut-img {
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* One gradient per card: the cards used to cut between three or four
   images every couple of seconds. Each now shows its first image only, in
   the row and when lifted out of it. */
.archive-marquee .archive-tile__cut-img,
.labs-lift__face .archive-tile__cut-img {
  animation: none !important;
}

.archive-marquee .archive-tile__cut-img:not(.archive-tile__cut-img--1),
.labs-lift__face .archive-tile__cut-img:not(.archive-tile__cut-img--1) {
  display: none;
}

/* Word-by-word text reveal segments */
.te-word {
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE: HERO TYPE, HAMBURGER AND MENU (2026-10)
   Kept together at the end of the file so these win over the older nav
   rules above without touching them.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero headline and intro on phones ────────────────────────────
   The headline was about 20px on a phone; a page's main heading should
   be the largest text on screen (about 32px here), and body copy 16px. */
@media screen and (max-width: 768px) {
  /* 8vw keeps the longest rotating line ("organisational platforms") on
     one line at any phone width. */
  .hero--showcase .hero__headline--home {
    font-size: clamp(1.5rem, 8vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
  }

  /* Three steady lines: "Designing" / "[word] platforms" / "that are
     intuitive first." The changing word never re-flows the headline. */
  .hero--showcase .hero__headline--primary {
    white-space: normal;
  }

  .hero--showcase .hero__headline-keep {
    display: block;
    white-space: nowrap;
  }

  /* The script sizes the intro to the desktop headline; on phones it
     simply fills the column. */
  .hero--showcase .hero__sub {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1rem;
    line-height: 1.5;
  }
}

/* ── Hamburger: a round chip so it reads on any hero image ───────── */
@media screen and (max-width: 860px) {
  .nav .nav__hamburger {
    width: 42px;
    height: 42px;
    padding: 0;
    gap: 5px;
    border-radius: 9999px !important;
    corner-shape: round;
    background: rgba(17, 17, 16, 0.62);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #ffffff;
  }

  .nav .nav__hamburger:hover,
  .nav .nav__hamburger.is-active {
    background: rgba(255, 255, 255, 0.14);
  }

  .nav .nav__hamburger .nav__hamburger-line {
    width: 18px;
    height: 1.5px;
    background-color: #ffffff !important;
  }

  .nav .nav__hamburger.is-active .nav__hamburger-line:nth-child(1) {
    transform: translateY(3.25px) rotate(45deg);
  }

  .nav .nav__hamburger.is-active .nav__hamburger-line:nth-child(2) {
    transform: translateY(-3.25px) rotate(-45deg);
  }

  /* The name sits on a white image at the top of the hero */
  body.has-hero-showcase.on-hero .nav:not(.nav--drawer-open) .nav__brand {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  }
}

/* ── Menu panel ───────────────────────────────────────────────────
   Near-solid page colour so the links read over any section, large
   light-weight links in the same voice as "Know me a bit better",
   hairline dividers, and two full pills at the bottom. */
.nav.nav--drawer-open {
  background-color: rgba(17, 17, 16, 0.96) !important;
}

.nav .nav__mobile-drawer,
html.dark-mode .nav .nav__mobile-drawer {
  height: calc(100dvh - var(--nav-height));
  background: rgba(17, 17, 16, 0.96) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  backdrop-filter: blur(24px) !important;
}

.nav .nav__mobile-inner {
  min-height: 100%;
  box-sizing: border-box;
  padding: 16px var(--container-pad, 24px) max(32px, env(safe-area-inset-bottom));
  gap: 0;
}

.nav .nav__mobile-accordion {
  border-top: 0;
}

.nav .nav__mobile-acc-item,
.nav .nav__mobile-acc-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.nav .nav__mobile-acc-trigger,
.nav .nav__mobile-direct-link {
  min-height: 64px;
  padding: 14px 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.nav .nav__mobile-direct-link:hover,
.nav .nav__mobile-direct-link--active {
  color: #ffffff;
}

.nav .nav__mobile-chevron {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
  color: rgba(255, 255, 255, 0.5);
}

.nav .nav__mobile-acc-item.is-open .nav__mobile-chevron {
  color: #ffffff;
}

.nav .nav__mobile-acc-panel {
  gap: 4px;
  padding: 0 0 18px 0;
}

.nav .nav__mobile-sublink,
.nav .nav__mobile-sublink--bold {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}

.nav .nav__mobile-sublink:hover,
.nav .nav__mobile-sublink--bold {
  color: #ffffff;
}

.nav .nav__mobile-bottom-actions {
  flex-direction: row;
  gap: 8px;
  margin-top: auto;
  padding-top: 32px;
}

.nav .nav__mobile-cta,
html.dark-mode .nav .nav__mobile-cta {
  flex: 1 1 0;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 9999px !important;
  corner-shape: round;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
}

.nav .nav__mobile-cta--primary,
html.dark-mode .nav .nav__mobile-cta--primary {
  background: #ffffff;
  color: #161615;
}

/* Links rise in one after another when the menu opens */
.nav .nav__mobile-acc-item,
.nav .nav__mobile-bottom-actions {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav .nav__mobile-drawer.is-open .nav__mobile-acc-item,
.nav .nav__mobile-drawer.is-open .nav__mobile-bottom-actions {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav .nav__mobile-drawer.is-open .nav__mobile-acc-item:nth-child(1) { transition-delay: 0.06s; }
.nav .nav__mobile-drawer.is-open .nav__mobile-acc-item:nth-child(2) { transition-delay: 0.11s; }
.nav .nav__mobile-drawer.is-open .nav__mobile-acc-item:nth-child(3) { transition-delay: 0.16s; }
.nav .nav__mobile-drawer.is-open .nav__mobile-acc-item:nth-child(4) { transition-delay: 0.21s; }
.nav .nav__mobile-drawer.is-open .nav__mobile-acc-item:nth-child(5) { transition-delay: 0.26s; }
.nav .nav__mobile-drawer.is-open .nav__mobile-bottom-actions      { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .nav .nav__mobile-acc-item,
  .nav .nav__mobile-bottom-actions {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE AUDIT FIXES (2026-10)
   Hierarchy, hero actions, legibility, type scale and keyboard access.
   Kept together at the end of the file so they win over older rules.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hierarchy: the hero headline is the largest type on the page ─── */
@media screen and (min-width: 961px) {
  .hero--showcase .hero__headline--home {
    font-size: clamp(2.25rem, 3.6vw, 3.5rem);
    line-height: 1.06;
    margin-bottom: 0 !important;
  }

  .hero--showcase .hero__sub {
    font-size: 15px;
  }
}

/* The closing headline steps down so it no longer outranks the hero */
.contact-strip__headline {
  font-size: clamp(2rem, 3.2vw, 3rem);
}

/* ── Hero actions ─────────────────────────────────────────────────── */
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 9999px !important;
  corner-shape: round;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.hero__cta:hover {
  background: rgba(255, 255, 255, 0.26);
  color: #ffffff;
}

.hero__cta--primary {
  background: #ffffff;
  color: #161615;
}

.hero__cta--primary:hover {
  background: #e9e9e6;
  color: #161615;
}

.hero__cta:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ── Name in the nav: a chip, so it reads on a white hero image ───── */
body.has-hero-showcase.on-hero .nav:not(.nav--drawer-open) .nav__brand {
  padding: 4px 14px 4px 4px;
  border-radius: 9999px;
  corner-shape: round;
  background: rgba(17, 17, 16, 0.62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  text-shadow: none;
}


/* ── Type scale: small text is either 13px (labels) or 15px (UI) ──── */
.contact-strip__link-label {
  font-size: 13px;
}

.contact-strip__link-value {
  font-size: 15px;
}

/* ── CV strip button: a proper size under its headline ────────────── */
.contact-strip .btn--primary,
#btn-trigger-cv-modal {
  min-height: 44px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 500;
}

/* ── Skip link: first stop for keyboard users ─────────────────────── */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 3000;
  padding: 10px 16px;
  border-radius: 9999px;
  corner-shape: round;
  background: #ffffff;
  color: #161615;
  font-family: var(--font-body);
  font-size: 15px;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: none;
}

/* ── Labs cards: visible focus, and the row holds still for it ────── */
.archive-tile:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -3px;
}

.archive-marquee:has(.archive-tile:focus-visible) .archive-marquee__track {
  animation-play-state: paused !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ENTERPRISE AUDIT FIXES (2026-10)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero folders had no visible keyboard focus */
#hero-folders button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
  border-radius: 8px;
}

/* Touch-size rules for the Know me and testimonial controls live in
   their own stylesheets, which load after this one. */

/* ═══════════════════════════════════════════════════════════════════════
   HERO TYPE, BUTTON WEIGHT AND PAGE CHANGE (2026-10)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero intro: a readable measure ───────────────────────────────
   Running text reads best at roughly 45 to 75 characters a line. The
   script sizes this paragraph to the headline, which let it run past 90;
   56ch holds it at about 65 whatever the headline width. */
@media screen and (min-width: 769px) {
  .hero--showcase .hero__sub {
    width: auto !important;
    max-width: 56ch !important;
    text-wrap: pretty;
  }
}

/* ── One weight for every pill button (matches the nav's "View my CV") */
.nav__cv-btn:not(.is-close-btn) .nav__cv-text,
.hero__cta,
.about-preview__btn,
.contact-strip .btn--primary,
#btn-trigger-cv-modal,
.nav .nav__mobile-cta,
html.dark-mode .nav .nav__mobile-cta {
  font-weight: 500;
}

/* ── Soft page change (case study cards) ──────────────────────────
   Leaving: a veil in the page colour fades in while the clicked card
   settles forward. Arriving: the new page fades up from that colour. */
.soft-nav-veil {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #111110;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.soft-nav-veil.is-on {
  opacity: 1;
  pointer-events: auto;
}

.work-showcase-card.is-soft-nav-source .work-showcase-card__visual {
  transform: scale(1.012);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Opacity only: moving <body> would briefly unpin the fixed nav and footer */
html.soft-nav-arrive body {
  animation: soft-nav-arrive 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes soft-nav-arrive {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html.soft-nav-arrive body {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CASE STUDY PAGES: TYPE, MEASURE, SURFACES, PROGRESS RAIL (2026-10)
   A refinement layer over the cs-rc-* rules above. The page structure
   is unchanged; this sets one reading measure, one type scale, one card
   treatment and the reading-progress rail.
   ═══════════════════════════════════════════════════════════════════════ */
.cs-rc-layout {
  --cs-pad: clamp(24px, 2.2vw, 32px);          /* same inset as the homepage case study cards */
  --cs-gap: clamp(1rem, 1.5vw, 1.5rem);        /* same gutter as the homepage card grid */
  --cs-surface: #161615;
  --cs-line: rgba(255, 255, 255, 0.08);
  --cs-text: #ffffff;
  --cs-muted: rgba(255, 255, 255, 0.6);
  --cs-gold: #f0ab3c;                          /* the footer's gold */
}

/* ── Reading measure ──────────────────────────────────────────────
   Running text is held to roughly 65 to 72 characters a line (it ran
   past 100). Images, diagrams and card rows keep the full column. */
.cs-rc-layout .cs-rc-subhead      { max-width: 54ch; }
.cs-rc-layout .cs-rc-body-text    { max-width: 58ch; }
.cs-rc-layout .cs-rc-heading      { max-width: 30ch; text-wrap: balance; }
.cs-rc-layout .cs-rc-hero__title  { max-width: 20ch; text-wrap: balance; }

/* ── Labels: one quiet voice instead of tiny bold capitals ───────── */
.cs-rc-layout .cs-rc-hero__kicker,
.cs-rc-layout .cs-rc-kicker,
.cs-rc-layout .cs-rc-meta-label,
.cs-rc-layout .cs-rc-stat-label,
.cs-rc-layout .cs-rc-diagram-label,
.cs-rc-layout .cs-rc-decision-tag,
.cs-rc-layout .cs-rc-tradeoff-item .cs-rc-meta-label,
.cs-rc-layout .cs-rc-back {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cs-muted);
}

.cs-rc-layout .cs-rc-kicker--sub {
  margin-top: 24px;
}

.cs-rc-layout .cs-rc-decision-tag {
  padding: 0;
  background: none;
  border-radius: 0;
}

.cs-rc-layout .cs-rc-back:hover {
  color: var(--cs-text);
}

/* ── Headings and body ────────────────────────────────────────────── */
.cs-rc-layout .cs-rc-hero__title {
  font-size: clamp(2.25rem, 3.6vw, 3.5rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--cs-text);
}

.cs-rc-layout .cs-rc-heading {
  font-size: clamp(1.625rem, 2.2vw, 2rem);
  font-weight: 400;
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--cs-text);
}

.cs-rc-layout h3.cs-rc-heading {
  font-size: clamp(1.375rem, 1.7vw, 1.5rem);
  line-height: 1.25;
}

.cs-rc-layout .cs-rc-subhead {
  font-size: 18px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.78);
}

.cs-rc-layout .cs-rc-body-text {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0;
  color: var(--cs-muted);
}

.cs-rc-layout .cs-rc-body-text strong {
  color: var(--cs-text);
  font-weight: 500;
}

.cs-rc-layout .cs-rc-meta-val {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--cs-text);
}

/* ── Surfaces: every card and panel shares one treatment ─────────── */
.cs-rc-layout .cs-rc-pillar-card,
.cs-rc-layout .cs-rc-opp-card,
.cs-rc-layout .cs-rc-insight-card,
.cs-rc-layout .cs-rc-decision-card,
.cs-rc-layout .cs-rc-diagram-box,
.cs-rc-layout .cs-rc-stats-banner,
.cs-rc-layout .cs-rc-tradeoff-box {
  padding: var(--cs-pad);
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: 8px;
  box-shadow: none;
}

.cs-rc-layout .cs-rc-pillar-card--chosen {
  border-color: rgba(255, 255, 255, 0.36);
}

.cs-rc-layout .cs-rc-pillars,
.cs-rc-layout .cs-rc-opp-grid,
.cs-rc-layout .cs-rc-insight-grid,
.cs-rc-layout .cs-rc-decision-grid,
.cs-rc-layout .cs-rc-test-strip {
  gap: var(--cs-gap);
}

.cs-rc-layout .cs-rc-pillar-card h4,
.cs-rc-layout .cs-rc-opp-card h4,
.cs-rc-layout .cs-rc-insight-card h4,
.cs-rc-layout .cs-rc-decision-card h4,
.cs-rc-layout .cs-rc-reflection-card h4 {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--cs-text);
}

.cs-rc-layout .cs-rc-pillar-card p,
.cs-rc-layout .cs-rc-opp-card p,
.cs-rc-layout .cs-rc-insight-card p,
.cs-rc-layout .cs-rc-decision-card p,
.cs-rc-layout .cs-rc-reflection-card p,
.cs-rc-layout .cs-rc-flow-text {
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--cs-muted);
}

.cs-rc-layout .cs-rc-reflection-grid {
  gap: clamp(2rem, 3.4vw, 3rem);
}

/* ── Media: gradient stand-ins in fixed, matching frames ─────────── */
.cs-rc-layout .cs-rc-hero__media,
.cs-rc-layout .cs-rc-solution-media,
.cs-rc-layout .cs-rc-flow-visual,
.cs-rc-layout .cs-rc-test-card {
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: 8px;
  overflow: hidden;
}

.cs-rc-layout .cs-rc-hero__media,
.cs-rc-layout .cs-rc-solution-media {
  aspect-ratio: 16 / 9;
}

.cs-rc-layout .cs-rc-flow-visual {
  aspect-ratio: 16 / 10;
}

.cs-rc-layout .cs-rc-hero__media img,
.cs-rc-layout .cs-rc-solution-media img,
.cs-rc-layout .cs-rc-flow-visual img,
.cs-rc-layout .cs-rc-test-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cs-rc-layout .cs-rc-test-card__caption {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

.cs-rc-layout .cs-rc-flow-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.015em;
  color: var(--cs-text);
}

/* ── Figures ──────────────────────────────────────────────────────── */
.cs-rc-layout .cs-rc-stat-val {
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--cs-text);
}

.cs-rc-layout .cs-rc-stat-item {
  gap: 10px;
}

/* ── Flow diagram: steps read as labels, not as buttons ──────────── */
.cs-rc-layout .cs-rc-diagram-node {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--cs-text);
}

.cs-rc-layout .cs-rc-diagram-node--highlight {
  background: transparent;
  border-color: color-mix(in srgb, var(--cs-gold) 55%, transparent);
  color: var(--cs-gold);
}

.cs-rc-layout .cs-rc-findings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.cs-rc-layout .cs-rc-findings .cs-rc-body-text {
  margin-top: 0;
  max-width: 68ch;
}

/* ── Trade-off panel: the closing line is a statement, set plainly ── */
.cs-rc-layout .cs-rc-tradeoff-note {
  max-width: 44ch;
  margin: 0 auto;
  font-size: 18px;
  line-height: 28px;
  color: var(--cs-text);
  text-align: center;
  text-wrap: balance;
}

/* ── Testimonial: replaces the boxed, left-barred quote block ────── */
.cs-rc-layout .cs-rc-testimonial {
  margin: 16px 0 0 0;
  padding-top: clamp(2rem, 3.4vw, 3rem);
  border-top: 1px solid var(--cs-line);
}

.cs-rc-layout .cs-rc-testimonial__quote {
  margin: 0;
  padding: 0;
  border: 0;
  quotes: '\201C' '\201D';
}

.cs-rc-layout .cs-rc-testimonial__quote p {
  max-width: 30em;
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.01em;
  color: var(--cs-text);
  text-wrap: pretty;
}

.cs-rc-layout .cs-rc-testimonial__quote p::before { content: open-quote; }
.cs-rc-layout .cs-rc-testimonial__quote p::after  { content: close-quote; }

.cs-rc-layout .cs-rc-testimonial__by {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 24px;
}

.cs-rc-layout .cs-rc-testimonial__name {
  font-size: 15px;
  line-height: 1.4;
  color: var(--cs-text);
}

.cs-rc-layout .cs-rc-testimonial__role {
  font-size: 13px;
  line-height: 1.4;
  color: var(--cs-muted);
}

/* ── Contents rail (desktop) ──────────────────────────────────────
   One 2px line down the list. The gold fill grows from the top to the
   reader's position as the page scrolls; --toc-fill is set by script.js. */
@media (min-width: 861px) {
  .cs-rc-layout .cs-rc-toc {
    gap: 0;
    border-left: 0;
  }

  .cs-rc-layout .cs-rc-toc::before,
  .cs-rc-layout .cs-rc-toc::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    border-radius: 2px;
    pointer-events: none;
  }

  .cs-rc-layout .cs-rc-toc::before {
    bottom: 0;
    background: rgba(255, 255, 255, 0.12);
  }

  .cs-rc-layout .cs-rc-toc::after {
    height: var(--toc-fill, 0px);
    background: var(--cs-gold);
  }

  .cs-rc-layout .cs-rc-toc__indicator {
    display: none;
  }

  .cs-rc-layout .cs-rc-toc__link {
    padding: 7px 0 7px 18px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.42);
    transition: color 0.25s ease;
  }

  .cs-rc-layout .cs-rc-toc__link:hover,
  .cs-rc-layout .cs-rc-toc__link.is-passed {
    color: rgba(255, 255, 255, 0.72);
  }

  .cs-rc-layout .cs-rc-toc__link.active,
  .cs-rc-layout .cs-rc-toc__link--active {
    font-weight: 400;       /* colour alone marks the place, so the list never shifts */
    color: #ffffff !important;
  }

  .cs-rc-layout .cs-rc-toc__link:focus-visible {
    outline: 1.5px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
  }
}

/* Phones keep the horizontal chip bar; its progress line matches */
.cs-rc-layout .cs-rc-toc__progress {
  background: var(--cs-gold);
}

/* ── Bookshelf: the shelf fades out towards both sides of the page ── */
.bookshelf-canvas {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}

/* CV overlay: the university name is a link that looks like the text
   around it, and underlines only on hover or keyboard focus. */
.cv-summary-link {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.cv-summary-link:hover,
.cv-summary-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHONE FIXES (2026-10)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Case study contents bar on phones ────────────────────────────
   The bar's wrapper is now the sticky element (the bar itself sat in a
   wrapper only as tall as the bar, so it could never stick). Restyled to
   match the page: page colour, quiet chips, gold progress line. */
@media (max-width: 860px) {
  .cs-rc-layout .cs-rc-sidebar {
    position: sticky;
    top: var(--nav-height);
    z-index: 1050;
    margin-bottom: 0;
    transition: top 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.nav-is-hidden .cs-rc-layout .cs-rc-sidebar,
  .nav.nav--hidden ~ .cs-rc-layout .cs-rc-sidebar {
    top: 0;
  }

  .cs-rc-layout .cs-rc-toc {
    position: static;
    gap: 4px;
    padding: 8px var(--space-4);
    margin-bottom: 0;
    background: rgba(17, 17, 16, 0.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
  }

  .cs-rc-layout .cs-rc-toc__link {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.5);
    border: 0 !important;
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .cs-rc-layout .cs-rc-toc__link.active,
  .cs-rc-layout .cs-rc-toc__link--active {
    font-weight: 400;
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 0 !important;
  }

  .cs-rc-layout .cs-rc-toc__link.active .cs-rc-toc__indicator,
  .cs-rc-layout .cs-rc-toc__link--active .cs-rc-toc__indicator {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none;
  }

  .cs-rc-layout .cs-rc-toc__indicator {
    bottom: 4px;
  }
}

/* ── Labs row on phones: smaller cards, so two or three show at once ── */
@media (max-width: 768px) {
  .archive-marquee {
    --grid-total-h: 300px;
    --marquee-gap: 6px;
    --tile-1-h: 228px;
    --tile-2-h: 204px;
    --tile-3-h: 184px;
    --tile-4-h: 218px;
    --tile-5-h: 196px;
    --tile-6-h: 206px;
    --tile-7-h: 188px;
    --tile-8-h: 196px;
  }
}

/* ── CV overlay on phones: the Download and Email buttons stay in view ── */
@media (max-width: 860px) {
  #overlay-cv .cv-pom-summary {
    padding-bottom: 0;
  }

  #overlay-cv .cv-summary-bottom {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-inline: -20px;
    padding: 12px 20px 16px;
    background: #161615;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CV FOCUS STATE (assets/js/modules/cv-flag.js)
   While the pointer rests on the "View my CV" pill in the closing strip:
   the rest of the page softens behind a blurred veil, the nav steps back,
   and the CV page flaps in front of the veil as a white sheet. The strip
   lifts above the sheet and drops its own background. It is blended with
   "difference", so the white headline turns to dark ink wherever it lies
   over the white paper and stays white where it overhangs the dark page;
   the pill becomes a dark pill on the paper for the same reason.
   ═══════════════════════════════════════════════════════════════════════ */
.cv-focus-veil,
.cv-flag {
  position: fixed;
  inset: 0;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.cv-focus-veil {
  background-color: rgba(10, 10, 9, 0.56);
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
}

.cv-flag {
  width: 100%;
  height: 100%;
}

.cv-focus-veil.is-on,
.cv-flag.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0s;
}

/* The browser has taken the sheet's drawing context away for a moment
   (cv-flag.js rebuilds it when it comes back). A canvas in that state
   paints as a plain white box, so it is hidden until then. */
.cv-flag.is-lost {
  visibility: hidden;
}

/* the sheet fades itself in and out while it is drawn */
.cv-flag,
.cv-flag.is-on {
  opacity: 1;
  transition: visibility 0s linear 0.6s;
}

.cv-flag.is-on {
  transition: visibility 0s;
}

/* settling into the CV overlay, or leaving it: the sheet is drawn above the overlay */
.cv-flag.is-over {
  z-index: 10020;
}

.contact-strip--centred {
  transition: background-color 0.45s ease;
}

.contact-strip--centred.is-cv-focus {
  z-index: 6;
  background-color: transparent;
  mix-blend-mode: difference;
}

.contact-strip--centred.is-cv-focus .btn--primary {
  box-shadow: none;
}

.contact-strip--centred .contact-strip__line--quiet {
  transition: color 0.45s ease;
}

.contact-strip--centred.is-cv-focus .contact-strip__line--quiet {
  color: rgba(255, 255, 255, 0.62);
}

.nav {
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, opacity 0.45s ease, filter 0.45s ease;
}

html.cv-focus-on .nav {
  opacity: 0.3;
  filter: blur(12px);
}

@media (prefers-reduced-motion: reduce) {
  .cv-focus-veil,
  .cv-focus-veil.is-on,
  .contact-strip--centred {
    transition: none;
  }
}

/* ── Download CV: the page drops into the button (cv-download.js) ──── */
.cv-drop {
  position: fixed;
  z-index: 10020;
  overflow: hidden;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  will-change: transform, opacity;
}

.cv-download-btn-primary.is-received {
  animation: cv-received 0.5s cubic-bezier(0.34, 1.6, 0.64, 1);
}

@keyframes cv-received {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* The message after a download: slides up from the bottom, then away.
   Styled as the "See more" cursor pill on the case study cards: dark
   frosted glass, hairline border, white text. */
.cv-snack {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 10030;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 32px);
  padding: 0.45rem 1.15rem 0.45rem 0.95rem;
  border-radius: 9999px;
  corner-shape: round;
  background: rgba(22, 22, 25, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.845rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, calc(100% + 40px));
  transition: transform 0.5s cubic-bezier(0.34, 1.35, 0.64, 1), opacity 0.25s ease;
}

.cv-snack.is-on {
  pointer-events: auto; /* click to dismiss */
  opacity: 1;
  transform: translate(-50%, 0);
}

.cv-snack svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: #4ade80;
}

@media (prefers-reduced-motion: reduce) {
  .cv-snack {
    transform: translate(-50%, 0);
    transition: opacity 0.2s ease;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ABOUT PAGE: THE CASE STUDY COLUMN
   Below the banner, text is held in the same 880px column as the case
   study pages, with a small label above each heading. The "About" title,
   the statement under it and the banner image keep their original
   full-width styling. The four figures sit in one bordered box inside the column, like
   the figures on a case study. Values match the .cs-rc-* styles.
   ═══════════════════════════════════════════════════════════════════════ */
.about-hero-section .about-story-grid,
.about-focus-section .about-story-grid {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
}

.about-hero-section .about-story-grid,
.about-focus-section .about-story-grid {
  display: block;
}

.about-kicker {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.6);
}

.about-story__right .about-story__lead {
  max-width: 30ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.2vw, 1.98rem);
  font-weight: 400;
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-wrap: balance;
}

.about-story__right .about-story__paragraphs {
  margin-top: 24px;
}

.about-story__right .about-story__paragraphs p {
  max-width: 58ch;
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.6);
}

.about-story__right .about-story__paragraphs p + p {
  margin-top: 16px;
}

.about-story__right .about-story__paragraphs .about-human__signoff {
  color: #ffffff;
}

/* The figures: one box, four across, two across on phones */
.about-story__right .about-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 40px;
  padding: clamp(24px, 2.2vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #161615;
}

.about-story__right .about-metric-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.about-story__right .about-metric-card__num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
  white-space: nowrap;
}

.about-story__right .about-metric-card__label {
  margin: 10px 0 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 760px) {
  .about-story__right .about-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }

  .about-story__right .about-metric-card__num {
    font-size: 32px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BOOKSHELF HEADROOM
   The 3D stage is 1.4 times the height of the shelf it shows, and overlaps
   the sections above and below by the extra, so nothing is cut off at its
   edge: a book lifting on hover, an opened book held out in front, or the
   name label above the pointer. The page spacing is unchanged, because the
   extra height is taken back with negative margins. (bookshelf.js widens
   its camera by the same 1.4 so the books stay the same size.)
   ═══════════════════════════════════════════════════════════════════════ */
.about-bookshelf-section {
  --shelf-h: clamp(520px, 60vh, 600px);
  position: relative;
  z-index: 3;
  height: calc(var(--shelf-h) * 1.4);
  margin-top: calc(var(--shelf-h) * -0.2);
  margin-bottom: calc(var(--shelf-h) * -0.2);
  background: transparent;
  overflow: visible;
  overflow-x: clip;
  pointer-events: none; /* only the books and arrows take the pointer, not the overlap */
}

.about-bookshelf-section .bookshelf-stage {
  overflow: visible;
  pointer-events: none;
}

.about-bookshelf-section .bookshelf-canvas,
.about-bookshelf-section .bookshelf-arrow {
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   SITE INTRO (homepage, first visit of a session; assets/js/modules/intro.js)
   intro-on:   the page is there but dim, like a room with the lights
               low; the avatar and "AMU" sit in their usual place.
   intro-play: a beam of light shoots from the avatar to the far corner,
               then opens like a stage light thrown wide. The dimness is
               lifted inside the light; when the light has gone all the
               way round, the whole room is lit.
   --intro-x / --intro-y: where the avatar is.   --intro-dir: where the
   beam points (set by intro.js; the values here are close enough until
   it runs).   --intro-a: half the beam's width, from 0 to a half turn.
   ═══════════════════════════════════════════════════════════════════════ */
@property --intro-a {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@property --intro-len {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

.site-intro {
  display: none;
}

html.intro-on .site-intro {
  --intro-x: calc(var(--container-pad) + 18px);
  --intro-y: calc(var(--nav-height) / 2);
  --intro-dir: 124deg;
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1090; /* just under the nav (1100), so the mark stays on top */
  pointer-events: none;
}

.site-intro__cover,
.site-intro__beam {
  position: absolute;
  inset: 0;
}

/* The dimness: the room before the light comes on. The page is there and
   can be made out, just dark; inside the beam the dimness is lifted. */
.site-intro__cover {
  /* a soft penumbra, wider as the beam opens: light never has a knife edge */
  --feather: min(17deg, calc(var(--intro-a) * 2.6));
  background: rgba(7, 7, 6, 0.76);
  -webkit-mask-image: conic-gradient(from calc(var(--intro-dir) - var(--intro-a) - var(--feather)) at var(--intro-x) var(--intro-y),
    #000 0deg, transparent var(--feather), transparent calc(var(--feather) + var(--intro-a) * 2), #000 calc(var(--feather) * 2 + var(--intro-a) * 2));
  mask-image: conic-gradient(from calc(var(--intro-dir) - var(--intro-a) - var(--feather)) at var(--intro-x) var(--intro-y),
    #000 0deg, transparent var(--feather), transparent calc(var(--feather) + var(--intro-a) * 2), #000 calc(var(--feather) * 2 + var(--intro-a) * 2));
}

/* The light itself, built in three layers so it reads as a real lamp in
   slightly hazy air rather than a flat wedge:
   - the beam: brightest along its axis and falling away smoothly towards
     both edges, and dimmer the further it travels from the lamp;
   - ::before, the haze: a wider, blurred, fainter cone around the beam,
     the light scattered by the air;
   - ::after, the lamp: a small hot core with a soft bloom and a thin
     horizontal flare, where the light leaves the avatar.
   All of it is added to the page with "screen", like light on a surface. */
.site-intro__beam {
  --soft: min(19deg, calc(var(--intro-a) * 3.2 + 1.2deg));
  --span: calc(var(--intro-a) * 2 + var(--soft) * 2);
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(0.6px);
  background: conic-gradient(from calc(var(--intro-dir) - var(--intro-a) - var(--soft)) at var(--intro-x) var(--intro-y),
    rgba(255, 240, 208, 0) 0deg,
    rgba(255, 240, 208, 0.07) calc(var(--span) * 0.12),
    rgba(255, 241, 212, 0.24) calc(var(--span) * 0.26),
    rgba(255, 244, 220, 0.58) calc(var(--span) * 0.39),
    rgba(255, 250, 236, 0.96) calc(var(--span) * 0.5),
    rgba(255, 244, 220, 0.58) calc(var(--span) * 0.61),
    rgba(255, 241, 212, 0.24) calc(var(--span) * 0.74),
    rgba(255, 240, 208, 0.07) calc(var(--span) * 0.88),
    rgba(255, 240, 208, 0) var(--span),
    rgba(255, 240, 208, 0) 360deg);
  /* it thins out with distance from the lamp */
  -webkit-mask-image: radial-gradient(circle at var(--intro-x) var(--intro-y),
    #000 0, rgba(0, 0, 0, 0.72) calc(var(--intro-len) * 0.3), rgba(0, 0, 0, 0.34) calc(var(--intro-len) * 0.62), transparent var(--intro-len));
  mask-image: radial-gradient(circle at var(--intro-x) var(--intro-y),
    #000 0, rgba(0, 0, 0, 0.72) calc(var(--intro-len) * 0.3), rgba(0, 0, 0, 0.34) calc(var(--intro-len) * 0.62), transparent var(--intro-len));
}

.site-intro__beam::before,
.site-intro__beam::after {
  content: '';
  position: absolute;
  inset: 0;
}

.site-intro__beam::before {
  --halo: calc(var(--intro-a) * 2 + 46deg);
  filter: blur(34px);
  background: conic-gradient(from calc(var(--intro-dir) - var(--intro-a) - 23deg) at var(--intro-x) var(--intro-y),
    rgba(255, 232, 190, 0) 0deg,
    rgba(255, 232, 190, 0.16) calc(var(--halo) * 0.3),
    rgba(255, 236, 198, 0.26) calc(var(--halo) * 0.5),
    rgba(255, 232, 190, 0.16) calc(var(--halo) * 0.7),
    rgba(255, 232, 190, 0) var(--halo),
    rgba(255, 232, 190, 0) 360deg);
}

.site-intro__beam::after {
  background:
    radial-gradient(ellipse 190px 2.5px at var(--intro-x) var(--intro-y), rgba(255, 247, 228, 0.75), rgba(255, 247, 228, 0) 100%),
    radial-gradient(circle at var(--intro-x) var(--intro-y),
      rgba(255, 252, 240, 1) 0, rgba(255, 244, 218, 0.72) 13px, rgba(255, 234, 192, 0.3) 44px, rgba(255, 230, 184, 0.1) 96px, rgba(255, 230, 184, 0) 170px);
}

html.intro-play .site-intro__cover {
  animation: site-intro-open 0.85s linear both;
}

html.intro-play .site-intro__beam {
  animation: site-intro-open 0.85s linear both, site-intro-beam 0.85s linear both;
}

/* 0 to 22%: the beam shoots out, pencil thin. Then it is thrown open,
   slowly at first and quickly at the end. */
@keyframes site-intro-open {
  0%   { --intro-a: 0deg; opacity: 1; }
  6%   { --intro-a: 1.2deg; }
  22%  { --intro-a: 2.4deg; animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.4); }
  92%  { --intro-a: 181deg; opacity: 1; }
  100% { --intro-a: 181deg; opacity: 0; }
}

@keyframes site-intro-beam {
  0%   { --intro-len: 0%; opacity: 0; }
  3%   { opacity: 1; }
  22%  { --intro-len: 150%; opacity: 1; }
  48%  { --intro-len: 150%; opacity: 0.62; }
  70%  { --intro-len: 150%; opacity: 0.2; }
  86%  { --intro-len: 150%; opacity: 0; }
  100% { --intro-len: 150%; opacity: 0; }
}

/* the lamp: the avatar glows while the light is on */
html.intro-on .nav .nav__brand {
  pointer-events: none;
}

html.intro-on.intro-play .nav .nav__avatar {
  animation: site-intro-lamp 0.85s ease-out both;
}

@keyframes site-intro-lamp {
  0%   { box-shadow: 0 0 0 0 rgba(255, 244, 218, 0), 0 0 0 0 rgba(255, 232, 190, 0); filter: brightness(1); }
  10%  { box-shadow: 0 0 10px 2px rgba(255, 250, 236, 0.95), 0 0 46px 14px rgba(255, 232, 190, 0.6); filter: brightness(1.35); }
  55%  { box-shadow: 0 0 8px 1px rgba(255, 250, 236, 0.6), 0 0 34px 8px rgba(255, 232, 190, 0.3); filter: brightness(1.12); }
  100% { box-shadow: 0 0 0 0 rgba(255, 244, 218, 0), 0 0 0 0 rgba(255, 232, 190, 0); filter: brightness(1); }
}

/* the rest of the nav is dim too, then comes up as the light opens.
   (!important and a keyframe animation, because the nav's own entrance
   script writes opacity straight onto these elements) */
html.intro-on:not(.intro-play) .nav .nav__menu,
html.intro-on:not(.intro-play) .nav .nav__actions,
html.intro-on:not(.intro-play) .nav .nav__hamburger {
  opacity: 0.26 !important; /* dim, like the rest of the room */
}

html.intro-on.intro-play .nav .nav__menu,
html.intro-on.intro-play .nav .nav__actions,
html.intro-on.intro-play .nav .nav__hamburger {
  animation: site-intro-nav 0.35s ease 0.36s both;
}

@keyframes site-intro-nav {
  from { opacity: 0.26; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHONE REFINEMENTS (2026-10-07)
   A tidy-up of the small-screen layouts. Kept together at the end so it
   wins over the older phone rules above.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* ── Case study contents bar: words and a progress line, nothing else ──
     The current section is white with a thin gold line filling beneath it
     as you read. No pill, no chip, no border. */
  .cs-rc-layout .cs-rc-toc {
    gap: 22px;
    /* the bar runs edge to edge; its first word lines up with the page text */
    margin-inline: calc(-1 * var(--space-4));
    padding: 0 var(--space-4);
    align-items: stretch;
  }

  .cs-rc-layout .cs-rc-toc__link,
  .cs-rc-layout .cs-rc-toc__link:hover,
  .cs-rc-layout .cs-rc-toc__link.active,
  .cs-rc-layout .cs-rc-toc__link--active {
    min-height: 44px;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-color: transparent !important;
    overflow: visible;
  }

  .cs-rc-layout .cs-rc-toc__link.is-passed {
    color: rgba(255, 255, 255, 0.72);
  }

  /* the line sits on the bar's bottom edge, the width of the word */
  .cs-rc-layout .cs-rc-toc__indicator {
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 0;
    background: transparent;
  }

  .cs-rc-layout .cs-rc-toc__link.active .cs-rc-toc__indicator,
  .cs-rc-layout .cs-rc-toc__link--active .cs-rc-toc__indicator {
    background: rgba(255, 255, 255, 0.14);
  }

  /* room between the bar and the page that follows it */
  .cs-rc-layout .cs-rc-sidebar {
    margin-bottom: 28px;
  }

  /* ── Back: a plain link, not a boxed button ─────────────────────── */
  .cs-rc-layout .cs-rc-back {
    min-height: 44px;
    padding: 0;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 13px;
  }

  /* ── Step diagrams: one step per row, reading downwards ──────────── */
  .cs-rc-layout .cs-rc-diagram-flow {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
  }

  .cs-rc-layout .cs-rc-diagram-node {
    justify-content: flex-start;
    width: 100%;
  }

  .cs-rc-layout .cs-rc-diagram-arrow {
    align-self: flex-start;
    margin-left: 18px;
    line-height: 1;
    transform: rotate(90deg);
  }
}

@media (max-width: 860px) {
  /* ── Contact and project request pages: the headline and the links stack.
     (Their side-by-side layout is written inline on the elements, which is
     why these need !important. Without this the page was 345px too wide.) */
  .contact__inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2rem !important;
  }

  .contact__links {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Phone menu: fully opaque, so the page never shows through it ───── */
@media (max-width: 860px) {
  .nav .nav__mobile-drawer,
  html.dark-mode .nav .nav__mobile-drawer {
    background: #111110 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ── Phone footer: the small print and the tree no longer share a space ─
   The tree is smaller and stands in the bottom-right corner; the
   copyright, legal links and credit stack in a column on the left, so
   every line is on clear ground and readable. */
@media (max-width: 640px) {
  .footer__tree-wrap {
    width: 52vw;
    max-width: 52vw;
    right: -5vw;
  }

  .footer__bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    max-width: 52vw;
  }

  .footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* the credit wraps onto two lines here; the heart stays with the last word */
  .footer__legal-link--credit {
    display: block;
  }

  .footer__legal-link--credit .footer__heart {
    display: inline-block;
    margin-left: 4px;
  }
}

/* ── Older case study pages: their contents strip no longer pushes the
   page 16px wider than the screen on phones ─────────────────────────── */
@media (max-width: 860px) {
  .editorial__sidebar {
    margin-inline: 0;
    max-width: 100%;
  }
}

/* ── Phone nav: once the page has been scrolled, the nav sits on a soft
   band of the page colour, so the text passing underneath can't tangle
   with the logo and buttons. At the very top there is no band. ───────── */
@media (max-width: 860px) {
  .nav.nav--scrolled::before {
    content: '';
    position: absolute;
    inset: 0 0 -14px 0;
    z-index: -1;
    background: linear-gradient(to bottom, #111110 0%, rgba(17, 17, 16, 0.94) 62%, rgba(17, 17, 16, 0) 100%);
    pointer-events: none;
  }
}

/* ── Touch screens: the hero keeps one height while you scroll ─────────
   "dvh" follows the browser bar as it slides away, so a hero sized with it
   grows mid-scroll and pushes the page down under the finger. "svh" is the
   height with the bar showing, and does not change. */
@media (pointer: coarse) {
  .hero {
    min-height: 100svh;
  }

  .hero--showcase {
    min-height: 100svh;
  }
}

@media (pointer: coarse) and (min-width: 961px) {
  .hero--showcase {
    height: 100svh;
  }
}

/* ── One case study on its own: the full row, on a wider image ────────
   The design system case study is switched off for now, which leaves a
   single card. Alone in a two-column grid it would sit in the left half. */
.featured-work__grid:has(> .work-showcase-card:only-child) {
  grid-template-columns: 1fr;
}

/* ── Hero slideshow: pictures from assets/images/work/ ────────────────
   hero-slides.js builds the slides and decides when they change. Here:
   - Each picture fills the hero exactly, cropped only as far as the screen's
     shape demands (the older rules made it wider and taller than the hero
     so it could drift sideways, which cut more off than it needed to).
   - A picture arrives very slightly enlarged (105%) and eases down to its
     true size over its time on screen.
   - Pictures change by a plain cross-fade.
   Until the first picture has loaded the hero is the page colour. */
.hero--showcase .hero__bg-wrap {
  top: 0;
  height: 100%;
  background: #111110;
}

.hero--showcase .hero__slide,
.hero--showcase .hero__slide.is-active,
.hero--showcase .hero__slide.is-exiting {
  transform: none;
  transition: opacity 2s ease, visibility 2s ease;
}

.hero--showcase .hero__bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1);
  transform-origin: 50% 50%;
  animation: none;
}

/* 20s is how long a picture stays (HOLD_MS in hero-slides.js); the fading
   picture carries on from where it was */
.hero--showcase .hero__slide.is-active .hero__bg-img,
.hero--showcase .hero__slide.is-exiting .hero__bg-img {
  animation: heroImageSettle 20s cubic-bezier(0.3, 0.3, 0.45, 1) forwards;
}

@keyframes heroImageSettle {
  from { transform: scale(1.05); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero--showcase .hero__slide.is-active .hero__bg-img,
  .hero--showcase .hero__slide.is-exiting .hero__bg-img {
    animation: none;
  }
}

/* ── Hero on tablets and phones ────────────────────────────────────────
   The hero's words sit over whatever picture is on show, and the pictures
   can be anything (some are mostly white). Three things keep it readable
   and uncluttered on smaller screens:

   1. A shade measured up from the bottom edge, so it follows the words and
      not the screen's height: clear above the headline, dark behind it.
   2. Up to 1100px wide the text under the strip is kept to the left of the
      tall middle card, which hangs down into its row.
   3. On phones there is no room beside that card, so the text starts below
      it instead, and the whole block sits at the bottom of the hero (it
      used to start under the nav, leaving the lower half empty). */
@media screen and (max-width: 1100px) {
  .hero--showcase .hero__gradient-overlay {
    background: linear-gradient(
      to bottom,
      rgba(17, 17, 16, 0) calc(100% - 640px),
      rgba(17, 17, 16, 0.45) calc(100% - 540px),
      rgba(17, 17, 16, 0.78) calc(100% - 440px),
      rgba(17, 17, 16, 0.92) calc(100% - 320px),
      #111110 calc(100% - 180px)
    );
  }

  .hero--showcase .hero__content {
    max-width: calc(50vw - var(--hero-card-w) / 2 - var(--container-pad) - 24px);
  }
}

@media screen and (max-width: 768px) {
  .hero--showcase {
    justify-content: flex-end;
  }

  .hero--showcase .hero__content {
    max-width: 100%;
  }

  /* room for the part of the tall card that hangs below the strip */
  .hero--showcase .hero__container {
    padding-top: calc(var(--hero-card-h-active) - var(--hero-card-h-inactive));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER: THE HIDDEN LOGO AND GALLERY
   Goes with assets/js/modules/footer-egg.js, which explains what happens
   and when. Two states, set as classes on .footer:
     .egg-peek   the pointer is on the big name: the logo is up
     .egg-night  the logo or the name has been clicked: the gallery is open
   The logo is 468 x 431. --mark-w is its drawn width, and one of its units
   (--unit) is used to move its pictures.
   ═══════════════════════════════════════════════════════════════════════ */

/* On wide screens two things stop short of where the logo appears, as in
   the design: the big name ends a little before the collage's black panel
   (31% of the way across the logo), and the row of small print ends where
   the collage's lowest picture begins (5% across). */
@media screen and (min-width: 769px) {
  .footer:has(.footer-egg__mark) .footer__watermark-giant {
    width: calc(100% - (clamp(220px, 26.3vw, 420px) * 0.4394 - var(--container-pad, 32px) + 2.2vw));
  }

  .footer:has(.footer-egg__mark) .footer__bottom-row {
    padding-right: calc(clamp(220px, 26.3vw, 420px) * 0.697 - var(--container-pad, 32px) + 12px);
  }
}

/* ── The logo ──────────────────────────────────────────────────────────
   In the bottom-right corner, placed as in the design: the collage's black
   panel flush with the right and bottom edges, the signature's tail and
   lowest loop running off them. At rest it waits below the edge. */
.footer-egg__mark {
  --mark-w: clamp(220px, 26.3vw, 420px);
  --unit: calc(var(--mark-w) / 468);
  --lean: 0;                       /* -0.5 (pointer at the top of the name) to 0.5 (at its bottom) */
  position: absolute;
  right: calc(var(--mark-w) * -0.2504);
  bottom: calc(var(--mark-w) * -0.0553);
  z-index: 7;
  width: var(--mark-w);
  aspect-ratio: 468 / 431;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  pointer-events: none;
  transform: translate3d(0, 106%, 0);
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.8, 0.3);
  -webkit-tap-highlight-color: transparent;
}

.footer.egg-peek .footer-egg__mark,
.footer-egg__mark:focus-visible {
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-egg__mark:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -6px;
}

/* Each picture slides by its own amount as the pointer moves up and down
   the name; the further "forward" a picture is, the further it goes */
.footer-egg__layer,
.footer-egg__signature {
  position: absolute;
  transform: translate3d(0, calc(var(--lean) * var(--travel) * var(--unit)), 0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.footer-egg__layer img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.footer-egg__signature {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── The gallery ───────────────────────────────────────────────────────
   Black first (the collage's own black, so its panel dissolves into the
   footer), then the picture over it, filling the frame. */
.footer-egg__night {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.footer.egg-night .footer-egg__night {
  opacity: 1;
}

.footer-egg__gallery {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.footer.egg-night .footer-egg__gallery {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 1s ease 0.15s;
}

/* a shade along the bottom, so the name and the small print read over any picture */
.footer-egg__gallery::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.38) 22%, rgba(0, 0, 0, 0) 48%);
  pointer-events: none;
}

.footer-egg__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.footer-egg__slide.is-shown {
  opacity: 1;
}

.footer-egg__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  -webkit-user-drag: none;
  user-select: none;
}

/* a very slow drift while a picture is up, so the frame is never dead still */
.footer.egg-night .footer-egg__slide.is-shown img {
  animation: footer-egg-breathe 24s ease-in-out infinite alternate;
}

@keyframes footer-egg-breathe {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}

/* "2 / 5", only when there is more than one picture */
.footer-egg__count {
  position: absolute;
  top: clamp(1.25rem, 4vh, 2.5rem);
  right: var(--container-pad, 24px);
  z-index: 6;
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.footer.egg-night .footer-egg__count {
  opacity: 1;
}

/* the tree and the birds go */
.footer__tree-wrap,
.footer__birds-wrap {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.footer.egg-night .footer__tree-wrap,
.footer.egg-night .footer__birds-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* the name can be clicked to open the gallery */
.footer.has-egg .footer__watermark-giant {
  cursor: pointer;
}

/* the day's words step aside (they are also made inert by the script) */
.footer .footer__inner {
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.footer.egg-night .footer__inner {
  opacity: 0 !important;        /* beats the scroll effect's inline opacity */
  visibility: hidden;
  pointer-events: none;
}

/* the name stays, a little smaller and whiter, and keeps its sheen */
.footer.egg-night .footer__watermark-text {
  background-image: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 32%,
    rgba(255, 255, 255, 0.5) 42%,
    rgba(255, 255, 255, 0.88) 48%,
    #ffffff 50%,
    rgba(255, 255, 255, 0.88) 52%,
    rgba(255, 255, 255, 0.5) 58%,
    rgba(255, 255, 255, 0.2) 68%,
    rgba(255, 255, 255, 0.2) 100%
  );
  text-shadow: none;   /* its glow is clipped to a box by the name's frame, which shows over a picture */
  transform: scale(0.82);
}

/* it shrinks from its bottom-left corner, so it stays on its line */
.footer.has-egg .footer__watermark-text {
  transform-origin: left bottom;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer .footer__bottom-row,
.footer .footer__bottom-row a,
.footer .footer__copyright,
.footer .footer__bottom-divider {
  transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease, opacity 0.5s ease;
}

.footer.egg-night .footer__bottom-row,
.footer.egg-night .footer__bottom-row a,
.footer.egg-night .footer__bottom-row .footer__copyright,
.footer.egg-night .footer__bottom-row .footer__legal-link,
.footer.egg-night .footer__bottom-row .footer__heart {
  color: rgba(255, 255, 255, 0.5) !important;   /* the day colours are set with !important */
}

.footer.egg-night .footer__bottom-row a:hover {
  color: #ffffff !important;
}

.footer.egg-night .footer__bottom-divider {
  opacity: 0.25;
  filter: brightness(0) invert(1);
}

/* ── Phones ────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .footer-egg__mark {
    --mark-w: 170px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .footer-egg__mark,
  .footer-egg__layer,
  .footer-egg__signature,
  .footer-egg__night,
  .footer-egg__gallery,
  .footer-egg__slide,
  .footer.has-egg .footer__watermark-text {
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }

  .footer.egg-night .footer-egg__slide.is-shown img {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHONES: STEADY SCROLLING AND THE FOOTER
   ═══════════════════════════════════════════════════════════════════════ */

/* The case study cover keeps one height while you scroll, as the home hero
   does: "dvh" follows the browser bar as it slides away, which made the
   cover grow mid-scroll and nudge the page under the finger. */
@media (pointer: coarse) {
  .cs-hero {
    height: 100svh;
  }
}

/* The footer on phones: sized by what is in it rather than stretched to a
   full screen (which spread its groups apart with large, uneven gaps).
   - The line about Amu, then the contact links and the page links side by
     side in two columns, then where Amu is and "Start Project".
   - Every link is a comfortable size to tap.
   - One spacing rhythm from top to bottom.
   Tablets keep the full-screen height, which the tree needs to stand clear
   of the big name. */
@media (max-width: 640px) {
  .site-reveal-footer {
    min-height: 0;
  }

  .site-reveal-footer .footer,
  .footer {
    min-height: 0;
    padding-top: 3rem;
    padding-bottom: 1.5rem;
  }

  .footer__bottom-row,
  .footer__legal {
    gap: 2px;
  }
}

@media (max-width: 768px) {
  .footer__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 0;
    margin-bottom: 0;
  }

  /* the brand's own pieces join the grid directly */
  .site-reveal-footer .footer__brand,
  .footer__brand {
    display: contents;
  }

  .footer__logo {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    margin-bottom: 1.25rem;
  }

  .footer__desc,
  .site-reveal-footer .footer__brand .footer__desc {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-bottom: 1.75rem;
  }

  .footer__social-links {
    grid-column: 1;
    grid-row: 3;
    gap: 0;
    margin: 0;
  }

  .footer__links--simple,
  .footer__links {
    grid-column: 2;
    grid-row: 3;
    align-items: flex-start;
    gap: 0;
    margin-left: 0;
  }

  .footer__social-link,
  .footer__links--simple .footer__nav-link {
    display: block;
    font-size: 15px;
    line-height: 1.3;
    padding: 0.55rem 0;
  }

  .footer__location {
    grid-column: 1 / -1;
    grid-row: 4;
    margin: 1.5rem 0 0;
  }

  .footer__project-cta-wrap {
    grid-column: 1 / -1;
    grid-row: 5;
    justify-self: start;
    margin: 1.25rem 0 0;
  }

  .footer__start-project {
    padding: 0.5rem 0;
  }

  .footer__watermark-giant {
    margin-top: 3.5rem !important;
    margin-bottom: 1.25rem !important;
  }

  .footer__bottom-row .footer__copyright,
  .footer__legal-link {
    padding: 0.4rem 0;
  }
}