/* ==========================================================================
   DESIGN TOKENS — shared across every page
   ========================================================================== */
:root {
  /* Colour */
  --color-bg: #FAF9F6;
  --color-ink: #1C1C1C;
  --color-ink-muted: #7B7B7B;
  --color-surface: #FFFFFF;
  --color-accent: #1C1C1C;
  --color-border: rgba(0, 0, 0, 0.10);
  --color-border-light: rgba(0, 0, 0, 0.06);
  --color-accent-green: #A5D553;
  --color-projects-bg: #EEFFD2;
  --color-projects-badge: #013131;
  /* A slightly warmer/darker variant of --color-bg, used only where the
     Spotify page's footer/"Thanks for reading" needs to read as a
     distinct band from the page background above it. */
  --color-bg-alt: #F2F0E9;

  /* Typography */
  --font-display: 'DM Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Radii */
  --radius-pill: 100px;
  --radius-card: 14px;
  --radius-avatar: 50%;

  /* Shadows */
  --shadow-nav: 0 2px 20px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 8px 40px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05);
  /* Button elevation: a soft, clearly-visible "lifted" shadow (not just a
     tight ambient blur) so the pill buttons read as floating above the page. */
  --shadow-btn: 0 16px 30px -8px rgba(28, 28, 28, 0.34), 0 5px 10px -2px rgba(28, 28, 28, 0.16);
  --shadow-btn-hover: 0 22px 40px -8px rgba(28, 28, 28, 0.38), 0 7px 14px -2px rgba(28, 28, 28, 0.20);
  --shadow-btn-outline: 0 16px 30px -10px rgba(28, 28, 28, 0.16), 0 5px 10px -2px rgba(28, 28, 28, 0.07);
  --shadow-btn-outline-hover: 0 22px 40px -10px rgba(28, 28, 28, 0.20), 0 7px 14px -2px rgba(28, 28, 28, 0.09);

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Nav-pill / toggle overlays — split out as their own tokens (rather
     than hardcoded rgba(0,0,0,...) at each use site) purely so dark mode
     can flip them to a white-tinted overlay below; every other neutral
     surface already reads correctly in dark mode via --color-bg /
     --color-ink swapping underneath it. */
  --color-nav-bg: rgba(255, 255, 255, 0.85);
  --color-overlay-soft: rgba(0, 0, 0, 0.05);
  --color-overlay-strong: rgba(0, 0, 0, 0.10);
}

/* ==========================================================================
   DARK MODE — scoped to the neutral/chrome surfaces (page background,
   body text, nav, footer, borders) that every page shares. The bespoke
   colour systems inside each case study — pastel feature cards, dark
   hero sections, the Skills/Process/Visuals blocks that are already
   dark by design — are deliberate brand colour choices, not neutral
   UI, so they're intentionally left untouched in both modes; only the
   tokens below change. Toggled by main.js adding/removing this
   attribute on <html> and persisting the choice in localStorage. */
html[data-theme="dark"] {
  --color-bg: #121212;
  --color-ink: #F2F2F0;
  --color-ink-muted: #A3A3A0;
  --color-surface: #1C1C1C;
  --color-accent: #F2F2F0;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-light: rgba(255, 255, 255, 0.07);
  --color-nav-bg: rgba(28, 28, 28, 0.85);
  --color-overlay-soft: rgba(255, 255, 255, 0.08);
  --color-overlay-strong: rgba(255, 255, 255, 0.14);
  --color-bg-alt: #181818;
}

/* "Connect with me" — the LinkedIn icon's fill is hardcoded #595959
   directly in the SVG markup (unlike the mail icon beside it, which uses
   stroke="white" and already reads correctly in both themes), so it
   stays an illegible dark gray on the button's dark-mode background.
   Match the mail icon's treatment: fixed white icon + white label text,
   in dark mode only — light mode keeps its original grey/ink styling. */
html[data-theme="dark"] #about-connect svg path {
  fill: #FFFFFF;
}

html[data-theme="dark"] #about-connect {
  color: #FFFFFF;
}

html,
body {
  transition: background-color 0.25s ease, color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {

  html,
  body {
    transition: none;
  }
}

/* ==========================================================================
   GLOBAL RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-display);
  background-color: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

ul,
ol {
  list-style: none;
}

button {
  font-family: var(--font-display);
}

/* ==========================================================================
   NAV PILL
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 20px 24px;
  pointer-events: none;
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--color-nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 6px 8px 6px 6px;
  pointer-events: all;
  box-shadow: var(--shadow-nav);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
}

.nav-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-avatar);
  background: #D9D6CF;
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  color: var(--color-ink-muted);
  overflow: hidden;
}

.nav-avatar__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.nav-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.nav-divider {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  margin: 0 2px;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
}

.nav-link {
  display: block;
  padding: 8px 13px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--color-ink);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.nav-link:hover {
  opacity: 0.55;
}

.nav-arrow {
  opacity: 0.45;
  font-style: normal;
}

.nav-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-overlay-soft);
  cursor: pointer;
  color: var(--color-ink);
  transition: background 0.2s ease;
  margin-left: 4px;
  flex-shrink: 0;
}

.nav-theme-toggle:hover {
  background: var(--color-overlay-strong);
}

.nav-theme-toggle:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

.nav-theme-toggle__icon--sun {
  display: none;
}

html[data-theme="dark"] .nav-theme-toggle__icon--moon {
  display: none;
}

html[data-theme="dark"] .nav-theme-toggle__icon--sun {
  display: block;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 132px;
  padding-bottom: 0;
  overflow: visible;
}

/* ---- Zone 1: Text ---- */
.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-lg);
  max-width: 900px;
  width: 100%;
}

.hero__headline {
  margin: 0 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hero__line-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: clamp(24px, 3.6vw, 50px);
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
  flex-wrap: wrap;
}

.hero__line-2 {
  display: block;
  font-size: clamp(42px, 7.2vw, 88px);
  font-weight: 800;
  color: var(--color-ink);
  letter-spacing: -0.035em;
  line-height: 1.0;
}

.hero__eyes {
  height: 32px;
  width: auto;
  flex-shrink: 0;
  vertical-align: middle;
  overflow: visible;
}

/* Pupils track the cursor while hovering the icon (see main.js) — the
   transition smooths both the tracking movement itself and the snap
   back to the resting position on mouse-leave. */
.hero__pupil {
  transition: transform 0.15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .hero__pupil {
    transition: none;
  }
}

/* Wraps "Hi, I'm Divinefortune" so .hero__spikes can be pinned to the exact
   trailing edge of the text (i.e. right where the final "e" sits) instead
   of just floating in the flex gap after it. */
.hero__greeting {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Positioned so the cluster of ray origins (bottom-left of the SVG's own
   art) lands over the top-right curve of the final "e", with the rays
   fanning up and away from it — see images/assets/spikes-hero.svg. */
.hero__spikes {
  position: absolute;
  top: 0.05em;
  left: 100%;
  margin-left: -0.14em;
  height: 1em;
  width: auto;
  pointer-events: none;
  transform: rotate(25.095deg);
}

.hero__sub {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.72;
  color: #666666;
  max-width: 900px;
  margin: 0 0 var(--space-xl);
}

/* Second sentence starts on its own line on desktop so the copy sits on
   exactly two lines at 24px. */
.hero__sub-line {
  display: block;
}

/* ---- CTA Buttons ---- */
.hero__ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  line-height: 1;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(0);
}

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

.btn--primary {
  background: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-btn);
}

.btn--primary:hover {
  box-shadow: var(--shadow-btn-hover);
  opacity: 1;
}

/* Hero "Contact me" — exact spec from the Figma export (flat, hard-edged
   offset shadow rather than the soft elevation glow used elsewhere). */
#cta-contact {
  height: 53px;
  padding: 0 20px;
  background: #343330;
  border-color: #343330;
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.25);
}

#cta-contact:hover {
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.25);
}

/* Hero "Connect with me" — exact spec from the Figma export. */
#cta-connect {
  width: 174px;
  height: 53px;
  padding: 0 20px;
  border: 1px solid #595959;
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.10);
}

#cta-connect:hover {
  border-color: #1c1c1c;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.10);
}

.btn--outline {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: var(--shadow-btn-outline);
}

.btn--outline:hover {
  border-color: rgba(0, 0, 0, 0.4);
  box-shadow: var(--shadow-btn-outline-hover);
  opacity: 1;
}

/* ---- Zone 2: Auto-scrolling mockup showcase ----
   Full-bleed marquee: the row breaks out to 100vw regardless of the
   centered .hero__text column above it, clips with overflow:hidden, and
   an inner track scrolls itself continuously via a CSS keyframe — no
   scroll-position math, no JS animation loop. The track's DOM holds the
   9 cards THREE times back to back; animating exactly one third of the
   track's width (translateX 0 -> -33.333%) is what makes the loop invisible
   — by the time it "resets" the second copy is sitting exactly where the
   first one started. Cards use a small negative trailing margin so they
   sit close together with a slight overlap (each repeat carries the same
   margin, so the -33.333% loop math still lands exactly). */
.hero__showcase {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: -36px;
  padding: 20px 0 32px;
  overflow: hidden;
}

.hero__track {
  display: inline-flex;
  align-items: center;
  /* Figma specifies gap: -12px, but the CSS `gap` property can't go
     negative (browsers clamp it to 0) — the -12px overlap is delivered via
     each card's trailing margin below instead. */
  gap: 0;
  width: max-content;
  will-change: transform;
  animation: hero-marquee 36s linear infinite;
}

.hero__card {
  width: clamp(148px, 15.5vw, 208px);
  flex-shrink: 0;
  margin-inline-end: -12px;
  transform: rotate(var(--rot, 0deg)) translateY(var(--y, 0px));
}

/* The 5 "landscape" mockups (browser/dashboard screenshots) read as roughly
   square-ish crops at the same column width as the tall phone mockups,
   so at a shared width they look small relative to their source size —
   size them up to about 2x so they hold their own in the row. */
.hero__card--wide {
  width: clamp(296px, 31vw, 416px);
}

.hero__card img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes hero-marquee {
  from {
    transform: translateX(0);
  }

  to {
    /* exactly one of the three repeated card sets */
    transform: translateX(-33.3333%);
  }
}

/* ==========================================================================
   SELECTED PROJECTS SECTION
   ========================================================================== */
.section-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ==========================================================================
   WHAT I DO — scattered rotated skill tags on the left, a short scope
   paragraph on the right. Reuses the hero's rotated-card technique
   (a plain transform, no JS) for the tag cluster.
   ========================================================================== */
.whatido {
  padding: 72px 0 0;
}

.whatido__row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(40px, 6vw, 80px);
  flex-wrap: wrap;
}

.whatido__tags {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 0 auto;
  width: 350px;
  max-width: 100%;
}

.whatido__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent-green);
  text-transform: uppercase;
}

.whatido__cluster {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 12px 12px 12px;
  cursor: pointer;
}

.whatido__tag {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: #FBF7EF;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transform: rotate(var(--rot, 0deg)) translate(var(--tx, 0), var(--ty, 0)) scale(1);
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.35, 1), box-shadow 0.3s ease;
  cursor: pointer;
  will-change: transform;
}

.whatido__tag--3,
.whatido__tag--6 {
  background: var(--color-projects-bg);
}

/* Fixed (not theme-aware) colours: the pills keep their own light cream/
   green backgrounds in both light and dark mode (a deliberate accent,
   per feedback — same rule as the case-study pastel cards), so their
   text must stay a fixed dark tone rather than following --color-ink,
   which flips to near-white in dark mode and becomes illegible against
   a background that never darkens. */
.whatido__tag-caption {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: rgba(28, 28, 28, 0.6);
}

.whatido__tag-label {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1C1C1C;
}

/* Resting clustered positions */
.whatido__tag--1 {
  --rot: -4deg;
  --tx: 18px;
  --ty: 0px;
}

.whatido__tag--2 {
  --rot: 3deg;
  --tx: -6px;
  --ty: 6px;
}

.whatido__tag--3 {
  --rot: -6deg;
  --tx: 30px;
  --ty: -4px;
}

.whatido__tag--4 {
  --rot: 2deg;
  --tx: -2px;
  --ty: 2px;
}

.whatido__tag--5 {
  --rot: -3deg;
  --tx: -8px;
  --ty: -6px;
}

.whatido__tag--6 {
  --rot: 4deg;
  --tx: 14px;
  --ty: 4px;
}

/* Group hover: pills separate / fan out outward away from each other */
.whatido__tags:hover .whatido__tag--1,
.whatido__cluster:hover .whatido__tag--1 {
  transform: rotate(-9deg) translate(-14px, -18px) scale(1);
}

.whatido__tags:hover .whatido__tag--2,
.whatido__cluster:hover .whatido__tag--2 {
  transform: rotate(7deg) translate(20px, -14px) scale(1);
}

.whatido__tags:hover .whatido__tag--3,
.whatido__cluster:hover .whatido__tag--3 {
  transform: rotate(-10deg) translate(-22px, -4px) scale(1);
}

.whatido__tags:hover .whatido__tag--4,
.whatido__cluster:hover .whatido__tag--4 {
  transform: rotate(6deg) translate(22px, 6px) scale(1);
}

.whatido__tags:hover .whatido__tag--5,
.whatido__cluster:hover .whatido__tag--5 {
  transform: rotate(-7deg) translate(-16px, 20px) scale(1);
}

.whatido__tags:hover .whatido__tag--6,
.whatido__cluster:hover .whatido__tag--6 {
  transform: rotate(8deg) translate(28px, 22px) scale(1);
}

/* Direct pill hover: lift, scale, and focus */
.whatido__tag:hover {
  transform: rotate(var(--rot, 0deg)) translate(var(--tx, 0), var(--ty, 0)) scale(1.08) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  z-index: 10;
}

.whatido__desc {
  flex: 0 0 auto;
  max-width: 600px;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  text-wrap: pretty;
}

/* Scroll-triggered per-line reveal for .whatido__desc. Each line is
   wrapped in its own span by JS at runtime (see main.js — lines are
   detected by measured position, not word count, since how many words
   fit per line depends on viewport width). .is-visible is added once by
   an IntersectionObserver and never removed, so the reveal never
   replays on scroll-up. */
.whatido__desc-line {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.whatido__content {
  flex: 1 1 380px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.whatido__ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Matches the "Connect with me" outline button in both themes. */
#whatido-book-meet {
  height: 53px;
  padding: 0 22px;
  border: 1px solid #595959;
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.10);
}

#whatido-book-meet svg path {
  stroke: #595959;
}

#whatido-book-meet:hover {
  border-color: #1c1c1c;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.10);
}

html[data-theme="dark"] #whatido-book-meet {
  color: #FFFFFF;
}

html[data-theme="dark"] #whatido-book-meet svg path {
  stroke: #FFFFFF;
}

.social-icon-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #343330;
  color: #ffffff;
  border: 1px solid #343330;
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
  text-decoration: none;
}

.social-icon-btn:hover {
  transform: translateY(-3px);
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.25);
}

.social-icon-btn:active {
  transform: translateY(0);
}

.whatido__desc-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .whatido__desc-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) {
  .whatido {
    padding: 0.5rem 0 0;
  }

  .whatido__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .whatido__tags {
    max-width: 100%;
    width: 100%;
  }

  .whatido__desc {
    /* .whatido__row switches to flex-direction:column above — the
       desktop flex-basis of 380px (a WIDTH hint there) would otherwise
       become a minimum HEIGHT here, since flex-basis tracks the main
       axis, padding the paragraph with a large empty gap below its
       actual text. */
    flex: 1 1 auto;
    max-width: 100%;
    font-size: 22px;
  }

  /* Same column-direction flex-basis issue as .whatido__desc: the 380px
     basis becomes a minimum height and leaves a big gap above the CTAs. */
  .whatido__content {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .whatido__desc {
    margin-bottom: 0;
  }

  .whatido__ctas {
    margin-top: 16px;
  }
}

.projects {
  padding: 5rem 0 120px;
}

.projects__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--color-projects-badge);
  color: #E7F5EA;
  padding: 11px 22px 11px 17px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 52px;
}

.projects__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px 40px;
}

.project-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* grid items default to min-width:auto, which floors at the
                   image's intrinsic size and blows out the 1fr track */
}

/* Same "flattened JPG" pattern as the hero cards: the source file already
   bakes in its own white margin, rounded card shape and drop shadow, so it's
   shown at native proportions with no extra CSS clip — a clip here would cut
   unevenly into that baked-in white edge. */
.project-card__media {
  display: block;
  overflow: hidden;
  margin-bottom: 30px;
}

.project-card__media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.project-card__media:hover img {
  transform: scale(1.06);
}

/* All 4 thumbnails are plain rectangular photos (no rounded-corner frame
   baked into the pixels), so the frame is built here in CSS instead —
   letting it flip to --color-surface/--color-border in dark mode, unlike
   a flattened white border would. Aspect-ratio (7:5, ~1.4) is a shared
   middle ground across the four source images' own ratios (1.39-1.46)
   so all four cards stay a uniform height in the grid regardless of
   each image's exact native proportions. */
.project-card__media--framed {
  border-radius: 1.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.625rem;
  box-sizing: border-box;
  aspect-ratio: 7 / 5;
}

.project-card__media--framed img {
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  object-fit: cover;
}

.project-card__meta {
  font-size: 14.5px;
  color: var(--color-ink-muted);
  margin-bottom: 12px;
}

.project-card__meta .dot {
  margin: 0 2px;
  opacity: 0.7;
}

.project-card__title {
  align-self: stretch;
  font-family: var(--font-body);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.06em;
  color: var(--color-ink);
  margin-bottom: 16px;
  max-width: 46ch;
}

.project-card__ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Same flat, hard-edged offset-shadow language as the hero CTAs
   (#cta-contact / #cta-connect), just recolored to the projects section's
   own dark-teal + accent-green palette instead of black/white. */
.projects .btn {
  height: 53px;
  padding: 0 20px;
  justify-content: center;
}

.projects .btn--primary {
  background: #071A18;
  border-color: #071A18;
  box-shadow: 2px 2px 0 0 var(--color-accent-green);
}

.projects .btn--primary:hover {
  box-shadow: 4px 4px 0 0 var(--color-accent-green);
}

/* Fixed (not theme-aware) colours: unlike the default .btn--outline,
   which follows --color-surface/--color-ink and would otherwise turn
   dark-on-light in dark mode, this one stays a light pill with dark
   text in both themes — per feedback. */
.projects .btn--outline {
  background: #FAF9F6;
  color: #071A18;
  border: 1px solid #071A18;
  box-shadow: 2px 2px 0 0 var(--color-accent-green);
}

.projects .btn--outline:hover {
  border-color: #071A18;
  box-shadow: 4px 4px 0 0 var(--color-accent-green);
}

/* ==========================================================================
   SKILLS AND TOOLS SECTION
   ========================================================================== */
.skills {
  position: relative;
  background-color: #081B19;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 45px 45px;
  padding: 120px 0;
  overflow: hidden;
}

.skills__badge {
  display: inline-flex;
  padding: 0.625rem 2rem 0.625rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 2.25rem;
  background: #EFA705;
  color: #1C1400;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 52px;
}

.skills__grid {
  display: flex;
  align-items: stretch;
  gap: 40px;
  margin-bottom: 72px;
}

.skills__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  align-self: stretch;
  border-radius: 1.25rem;
}

.skills__card--tools {
  width: 28.8125rem;
  padding: 2.25rem 1.5rem;
  flex-shrink: 0;
  background: #A5D553;
}

.skills__card--bonuses {
  padding: 2.25rem 2rem 2.25rem 1.5rem;
  flex: 1 0 0;
  background: #E6FFED;
}

/* Small pill badge inside each card ("Tools" / "Bonuses") —
   spacing between card children now comes from .skills__card's own
   gap:1.5rem (per Figma), so no margin-bottom on individual children. */
.skills__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  border-radius: 2.25rem;
  background: #013131;
  color: #E4FFF2;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
}

.skills__pill--tools {
  width: 7.625rem;
  border: 1.6px solid #E4FFF2;
}

.skills__pill--bonuses {
  border: 1.6px solid var(--color-accent-green);
}

.skills__icons {
  display: flex;
  align-items: center;
  gap: 22px;
}

.skills__icons svg {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.skills__card-title {
  font-family: var(--font-body);
  font-size: clamp(26px, 2.8vw, 42px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #013131;
}

.skills__card-desc {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.02em;
}

.skills__card--tools .skills__card-desc {
  color: #0B2A17;
}

.skills__card--bonuses .skills__card-desc {
  color: var(--color-ink-muted);
}

.skills__memoji-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 64px;
}

.skills__memoji {
  width: clamp(160px, 15vw, 230px);
  height: auto;
}

/* Figma exports this frame as `position:absolute; flex-direction:column`,
   which is the auto-layout wrapper Figma generates when every child pill is
   individually drag-positioned inside it. Below 1152px (where the 65.5rem
   frame no longer fits its content area without clipping the outermost
   pills) we reproduce that as a normal-flow, wrapping flex row instead,
   which centers correctly and keeps the section's height in sync with its
   content. At >=1152px (see media query below) we switch to the literal
   Figma frame: each pill absolutely positioned at its exact --x/--y pixel
   center, taken directly from the reference pills.png export. */
.skills__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px 16px;
  width: 100%;
  max-width: 65.5rem;
  margin: 0 auto;
  /* Compresses each pill's --yoff scatter offset so it stays a gentle
     cascade instead of ballooning into huge gaps at 2-4-per-row. */
  --yoff-scale: 0.22;
}

.skill-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15.875rem;
  height: 3.3125rem;
  padding: 0 1.25rem;
  border-radius: 6.25rem;
  border: 1px solid #071A18;
  background: #F9F9F9;
  box-shadow: 2px 2px 0 0 #A5D553;
  color: #071A18;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.1125rem;
  white-space: nowrap;
  flex-shrink: 0;
  transform: rotate(var(--rot, 0deg));
  margin-top: calc(var(--yoff, 0px) * var(--yoff-scale, 1));
  will-change: transform;
}

@keyframes skill-pill-bounce {

  0%,
  100% {
    transform: translateY(0) rotate(var(--rot, 0deg));
  }

  50% {
    transform: translateY(-14px) rotate(var(--rot, 0deg));
  }
}

.skill-pill:hover {
  animation: skill-pill-bounce 0.45s ease;
}

/* Exact Figma scatter — only safe once the 65.5rem (1048px) frame has
   room to render at full size without its outermost pills (e.g.
   User-Centered Thinking, sitting only ~3px from the frame's left edge)
   clipping past the section's content edge. */
@media (min-width: 1152px) {
  .skills__pills {
    position: relative;
    display: block;
    flex-wrap: nowrap;
    width: 65.5rem;
    aspect-ratio: 4200 / 982;
    gap: 0;
  }

  .skill-pill {
    position: absolute;
    left: var(--x);
    top: var(--y);
    margin-top: 0;
  }
}

/* ==========================================================================
   DESIGN PHILOSOPHY SECTION
   ========================================================================== */
.philosophy {
  background-color: #202020;
  padding: 120px 0;
  overflow: hidden;
}

.philosophy__badge {
  display: inline-flex;
  padding: 0.625rem 2rem 0.625rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 2.25rem;
  background: #EFA705;
  color: #1C1400;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0px;
}

/* Mobile-first: stacked column, no connector curves (they only make sense
   spanning a horizontal row — see the >=1300px override below, which is
   also where the row is guaranteed its full 1200px content width so the
   curves' measured pixel positions line up with the reference design). */
.philosophy__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.philosophy__curve {
  display: none;
}

.philosophy__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
  width: 22.0625rem;
  max-width: 100%;
  flex-shrink: 0;
}

.philosophy__number {
  font-family: 'Inika', serif;
  font-weight: 700;
  font-size: 6rem;
  line-height: normal;
  letter-spacing: -0.03125rem;
  color: #959595;
  text-align: center;
}

.philosophy__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
  width: 100%;
  transform: rotate(var(--tilt, 0deg));
}

.philosophy__heading {
  margin: 0;
  align-self: stretch;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: normal;
  letter-spacing: -0.1125rem;
  color: #FFFFFF;
  text-align: center;
}

.philosophy__desc {
  margin: 0;
  align-self: stretch;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: normal;
  letter-spacing: -0.1125rem;
  color: #9A9A9A;
  text-align: center;
}

/* Exact Figma layout — row + connector curves. Only safe once the
   .section-container has reached its capped 1200px content width (see
   the pills scatter above for the identical reasoning), which is what
   the curves' measured pixel positions/sizes are calibrated against. */
@media (min-width: 1300px) {
  .philosophy__row {
    position: relative;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }

  .philosophy__curve {
    display: block;
    position: absolute;
  }

  .philosophy__curve svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .philosophy__curve--one {
    left: 270px;
    top: 120px;
    width: 232px;
    height: 89px;
  }

  .philosophy__curve--two {
    left: 700px;
    top: 300px;
    width: 175px;
    height: 118px;
  }
}

/* ==========================================================================
   TESTIMONIALS SECTION
   ========================================================================== */
.testimonials {
  background: var(--color-bg);
  padding: 120px 0;
}

.testimonials__row {
  display: flex;
  align-items: flex-start;
  gap: 50px;
}

.testimonials__col--left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 77px;
  flex-shrink: 0;
}

.testimonials__col--right {
  flex: 1 0 0;
  min-width: 0;
}

.testimonials__badge {
  display: inline-flex;
  padding: 0.625rem 2rem 0.625rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 2.25rem;
  background: #013131;
  color: #E4FFF2;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.testimonials__divider {
  width: 0.0625rem;
  height: 26.65188rem;
  background: rgba(0, 0, 0, 0.25);
  align-self: center;
  flex-shrink: 0;
}

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 1.125rem 2.5rem;
  border-radius: 1.5rem;
}

.testimonial-card--green {
  width: 35.0625rem;
  height: 34.75rem;
  background: #A5D553;
}

.testimonial-card--yellow {
  width: 100%;
  height: 40.9375rem;
  background: #FFDC8E;
}

.testimonial-card__quote {
  position: absolute;
  right: 2.125rem;
  top: 1.25rem;
  font-family: 'Instrument Serif', serif;
  font-size: 9rem;
  font-weight: 400;
  line-height: 9rem;
}

.testimonial-card--green .testimonial-card__quote {
  color: #446C00;
}

.testimonial-card--yellow .testimonial-card__quote {
  color: #FF7300;
}

.testimonial-card__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #013131;
  margin: 0 0 24px;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonial-card__avatar {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: 18.5625rem;
}

.testimonial-card__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #013131;
}

.testimonial-card__role {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: #071A18;
}

/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */
.about {
  background: var(--color-bg);
  padding-bottom: 5rem;
}

.about__row {
  display: flex;
  align-items: flex-start;
  gap: 72px;
}

.about__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

.about__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 2.75625rem;
  font-weight: 500;
  line-height: 3rem;
  letter-spacing: -0.1125rem;
  margin: 0 0 24px;
}

/* Self-contained asset — the white "polaroid" card, its -5deg tilt, and its
   drop shadow are already baked into divinefortune-image.svg, so it's just
   dropped in at native size rather than re-styled with a wrapper card. */
.about__photo {
  width: 20rem;
  height: auto;
}

.about__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 35.6875rem;
  max-width: 100%;
}

.about__copy p {
  margin: 0;
  color: var(--color-ink-muted);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

.about__ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
}

#about-copy-email,
#about-connect {
  height: 53px;
  padding: 0 20px;
}

#about-copy-email {
  background: #343330;
  border-color: #343330;
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.25);
}

#about-copy-email:hover {
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.25);
}

#about-connect {
  border: 1px solid #595959;
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.10);
}

#about-connect:hover {
  border-color: #1c1c1c;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.10);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-bg);
  padding: 0 0 5rem 0;
}

#page-spotify-case-study:not([hidden])~.site-footer {
  background: var(--color-bg-alt);
  padding: 0 1.5rem 6rem 1.5rem;
}

.footer__card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #1C1C1C;
  border-radius: 2rem;
  padding: 4.5rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.footer__left {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: space-between;
  min-height: 12.5rem;
}

.footer__top {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.footer__email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  transition: opacity 0.2s ease;
}

.footer__email:hover {
  opacity: 0.8;
}

.footer__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #9A9A9A;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
}

.footer__copyright {
  color: #b3bac6;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
}

.footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer__link:hover {
  opacity: 0.8;
}

/* ==========================================================================
   PAGE ROUTING — see router.js. Only the page matching the current URL
   is shown; the rest are removed from layout via the [hidden] attribute.
   ========================================================================== */
.page[hidden] {
  display: none;
}

/* ==========================================================================
   CASE STUDY — Spotify (/spotify-case-study)
   More sections will be added here as they're built out.
   ========================================================================== */
.cs-hero {
  width: 100%;
  padding: 41px 0 140px;
  background: #081B19;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 45px 45px;
  overflow: hidden;
}

.cs-hero .section-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.cs-hero__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  padding: 24px 24px;
  border-radius: 20px;
  background: #A5D553;
}

.cs-hero__card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  flex-wrap: wrap;
}

.cs-hero__title {
  flex: 1 1 460px;
  max-width: 560px;
  align-self: stretch;
  color: #013131;
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -1.2px;
}

.cs-hero__meta {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.cs-hero__meta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(1, 49, 49, 0.18);
}

.cs-hero__meta-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cs-hero__meta-row:first-child {
  padding-top: 0;
}

.cs-hero__meta-row dt {
  width: 84px;
  flex-shrink: 0;
  color: #013131;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
}

.cs-hero__meta-row dd {
  color: #013131;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
}

.cs-hero__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}

/* ==========================================================================
   CASE STUDY HERO — Fashion App (/fashion-case-study)
   The Figma frame CSS (width: 90rem, centred flex layout, #FAF9F6 ground)
   is baked into the fashion-hero-image.svg export (1440×1024), so this
   section simply centres the native-size image on the same ground colour
   and lets it scale fluidly below 90rem.
   ========================================================================== */
.fcs-hero {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: var(--color-bg);
  overflow: hidden;
}

.fcs-hero__frame {
  display: flex;
  width: 90rem;
  max-width: 100%;
  justify-content: center;
  align-items: center;
}

.fcs-hero__img {
  width: 100%;
  height: auto;
}

/* Mobile-only infinite marquee that replaces .fcs-hero__frame below
   900px. Same seamless-loop technique as .hero__track on the home page:
   the track holds 3 identical copies of the row back to back, and the
   animation moves exactly one copy-width (33.3333%) — since copy 1 and
   copy 2 are pixel-identical, the loop resets with no visible seam or
   jump, so it reads as scrolling forever without ever breaking. */
.fcs-hero__mobile-showcase {
  display: none;
}

.fcs-hero__marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  will-change: transform;
  animation: fcs-hero-marquee 70s linear infinite;
}

.fcs-hero__marquee-set {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
}

.fcs-hero__marquee-card {
  width: 19.36969rem;
  height: 42.085rem;
  flex-shrink: 0;
}

.fcs-hero__marquee-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@keyframes fcs-hero-marquee {
  from {
    transform: translateX(0);
  }

  to {
    /* exactly one of the three repeated .fcs-hero__marquee-set copies */
    transform: translateX(-33.3333%);
  }
}

@media (max-width: 900px) {
  .fcs-hero__frame {
    display: none;
  }

  .fcs-hero__mobile-showcase {
    position: relative;
    display: block;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
    padding: 1.25rem 0;
  }
}

/* ==========================================================================
   EDUCATION CASE STUDY — HERO (/education-case-study)
   Plain full-frame Figma export: a single desktop image at native size
   (90rem × 67.5rem) on the --color-bg ground, replaced below 900px by the
   mobile video (lily-ai-video-mobile.mp4) inside a framed card — rounded
   corners, stroke color, white ground — matching the VantageAI hero.
   ========================================================================== */
.ecs-hero {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: var(--color-bg);
  overflow: hidden;
}

.ecs-hero__frame {
  display: flex;
  width: 90rem;
  max-width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

.ecs-hero__title {
  margin: 0;
  padding-top: 8rem;
  padding-bottom: 3rem;
  font-family: "General Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  letter-spacing: -1.5px;
  color: var(--color-ink);
  line-height: 1;
}

.ecs-hero__img {
  display: block;
  width: 1100px;
  max-width: 100%;
  height: 720px;
  object-fit: cover;
  border-radius: 24px;
}

.ecs-hero__frame-card,
.ecs-hero__video {
  display: none;
}

.ecs-hero {
  margin-bottom: var(--space-3xl);
}

@media (max-width: 900px) {
  .ecs-hero__img--desktop {
    display: none;
  }

  .ecs-hero__frame-card {
    display: flex;
    width: 24.5rem;
    max-width: 100%;
    height: 24rem;
    padding: 0.75rem 0.875rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 1.5rem;
    border: 0.6px solid rgba(160, 163, 178, 0.60);
    background: #FFF;
    box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.10);
  }

  .ecs-hero__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
  }

  .ecs-hero__title {
    font-size: 64px;
  }
}

/* ---- Education case study overview: title + meta, dark ground ----------
   Same title/meta structure as .cs-hero__card and .fcs-overview, but on
   its own dark section (not a light card) per the reference screenshot. */
.ecs-overview {
  background: #1C1C1C;
  padding: 3rem 0 4rem;
  margin-bottom: var(--space-3xl);
}

.ecs-overview__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.ecs-overview__title {
  flex: 1 1 460px;
  max-width: 620px;
  margin: 0;
  color: #FAF9F6;
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -1.2px;
}

.ecs-overview__meta {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.ecs-overview__meta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.ecs-overview__meta-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ecs-overview__meta-row:first-child {
  padding-top: 0;
}

.ecs-overview__meta-row dt {
  width: 70px;
  flex-shrink: 0;
  color: rgba(250, 249, 246, 0.6);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
}

.ecs-overview__meta-row dd {
  color: #FAF9F6;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
}

.ecs-overview__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}

@media (max-width: 900px) {
  .ecs-overview__row {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .ecs-overview__title {
    /* flex:1 1 460px was written for the desktop row, where 460px is a
       width basis — in this column layout that same value becomes a
       height basis instead, forcing the title to stretch to 460px tall
       with empty space below it. Reset to its natural content height. */
    flex: none;
    max-width: 100%;
    font-size: 24px;
  }
}

/* ==========================================================================
   VANTAGEAI CASE STUDY — HERO (/vantageai-case-study)
   Same direction as the education hero: project name title above the
   hero image, with a dedicated desktop export at native size on the
   --color-bg ground, replaced below 900px by the mobile video
   (vantage-ai-video-mobile.mp4) inside a framed card — rounded corners,
   stroke color, white ground — matching the education hero.
   ========================================================================== */
.vcs-hero {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: var(--color-bg);
  overflow: hidden;
}

.vcs-hero__frame {
  display: flex;
  width: 90rem;
  max-width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

.vcs-hero__title {
  margin: 0;
  padding-top: 8rem;
  padding-bottom: 3rem;
  font-family: "General Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  letter-spacing: -1.5px;
  color: var(--color-ink);
  line-height: 1;
}

.vcs-hero__img {
  display: block;
  width: 1100px;
  max-width: 100%;
  height: 720px;
  object-fit: cover;
  border-radius: 24px;
}

.vcs-hero__frame-card,
.vcs-hero__video {
  display: none;
}

.vcs-hero {
  margin-bottom: var(--space-3xl);
}

@media (max-width: 900px) {
  .vcs-hero__img--desktop {
    display: none;
  }

  .vcs-hero__frame-card {
    display: flex;
    width: 24.5rem;
    max-width: 100%;
    height: 24rem;
    padding: 0.75rem 0.875rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 1.5rem;
    border: 0.6px solid rgba(160, 163, 178, 0.60);
    background: #FFF;
    box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.10);
  }

  .vcs-hero__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
  }

  .vcs-hero__title {
    font-size: 64px;
  }
}

/* ---- VantageAI case study overview: title + meta, dark ground -----------
   Same title/meta structure as .ecs-overview, on its own dark section
   (not a light card) per the reference direction. */
.vcs-overview {
  background: var(--color-bg);
  padding: 0 0 4rem;
}

.vcs-overview__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.vcs-overview__title {
  flex: 1 1 460px;
  max-width: 620px;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -1.2px;
}

.vcs-overview__meta {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.vcs-overview__meta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.vcs-overview__meta-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.vcs-overview__meta-row:first-child {
  padding-top: 0;
}

.vcs-overview__meta-row dt {
  width: 70px;
  flex-shrink: 0;
  color: var(--color-ink-muted);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
}

.vcs-overview__meta-row dd {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
}

.vcs-overview__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}

@media (max-width: 900px) {
  .vcs-overview__row {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .vcs-overview__title {
    flex: none;
    max-width: 100%;
    font-size: 24px;
  }
}

/* ---- VantageAI Looks Clean: full-bleed section image ---------------------
   No top padding and no gap from the overview above, and the image fills
   the full viewport width (full-bleed) so it reads as a continuous band.
   Follows the fcs-progression full-bleed pattern (100vw +
   margin-inline: calc(50% - 50vw)). */
.vcs-clean {
  display: flex;
  justify-content: center;
}

.vcs-clean__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vcs-clean__mock {
  display: block;
  width: 100vw;
  height: auto;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

.vcs-clean__mock--mobile {
  display: none;
}

@media (max-width: 900px) {
  .vcs-clean__mock--desktop {
    display: none;
  }

  .vcs-clean__mock--mobile {
    display: block;
  }
}

/* ---- VantageAI Idea / Problem framing: three-card row --------------------
   Section sits 4rem below the Looks Clean section. The card row uses the
   exact Figma spec for the container and each card; only the section uses a
   top padding of 4rem for the required gap (the per-card gap is handled by
   the container gap). */
.vcs-idea {
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
  justify-content: center;
}

.vcs-idea__container {
  display: flex;
  width: 77.5rem;
  max-width: 100%;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 3rem;
}

.vcs-idea__card {
  display: flex;
  width: 26.625rem;
  min-height: 17.5rem;
  padding: 1.5rem 1.75rem 1.75rem 1.75rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 4.15438rem;
  flex-shrink: 0;
  border-radius: 1.5rem;
}

.vcs-idea__card--one {
  width: 20.125rem;
  background: #17181C;
}

.vcs-idea__card--two {
  width: 23rem;
  background: #FCE4EC;
}

.vcs-idea__card--three {
  background: #F9A8D4;
}

.vcs-idea__heading {
  width: 15.6875rem;
  max-width: 100%;
  margin: 0;
  font-family: Inter, var(--font-body);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

.vcs-idea__card--one .vcs-idea__heading {
  width: 15.1875rem;
  color: #FFF;
}

.vcs-idea__card--two .vcs-idea__heading {
  color: #430825;
}

.vcs-idea__card--three .vcs-idea__heading {
  color: #860444;
}

.vcs-idea__body {
  align-self: stretch;
  margin: 0;
  font-family: Inter, var(--font-body);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

.vcs-idea__card--one .vcs-idea__body {
  color: #FFF;
}

.vcs-idea__card--two .vcs-idea__body {
  color: #7E395A;
}

.vcs-idea__card--three .vcs-idea__body {
  color: #A40051;
  font-weight: 400;
}

@media (max-width: 900px) {
  .vcs-idea__container {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    margin: 0 1rem;
  }

  .vcs-idea__card,
  .vcs-idea__card--one,
  .vcs-idea__card--two {
    width: 100%;
    max-width: 100%;
  }
}

/* ---- VantageAI video showcase -------------------------------------------
   A framed white card holding the corner video, spaced 4rem below the
   idea/problem section. Desktop card is 77.5×43.75rem; below 900px the
   card takes its mobile size (27.5×37.5rem) and the video source swaps.
   ========================================================================== */
.vcs-video-wrap {
  display: flex;
  justify-content: center;
  padding: 0 0 4rem;
}

.vcs-video__container {
  display: flex;
  width: 77.5rem;
  max-width: 100%;
  justify-content: center;
}

.vcs-video {
  display: flex;
  width: 77.5rem;
  height: 43.75rem;
  padding: 0.75rem 0.875rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1.5rem;
  border: 0.6px solid rgba(160, 163, 178, 0.60);
  background: #FFF;
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.10);
}

.vcs-video__file {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
  display: block;
}

.vcs-video__file--mobile {
  display: none;
}

@media (max-width: 900px) {
  .vcs-video__container {
    width: 27.5rem;
  }

  .vcs-video {
    width: 27.5rem;
    height: 37.5rem;
  }

  .vcs-video__file--desktop {
    display: none;
  }

  .vcs-video__file--mobile {
    display: block;
  }
}

/* ==========================================================================
   KEY FEATURES — numbered pastel cards, same colour system as the
   education case study's .ecs-features grid (2-column layout, numbered
   badges instead of plain screenshots, wide closing card with tags).
   ========================================================================== */
.vcs-features {
  display: flex;
  width: 89.125rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 6.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 7.8125rem;
  box-sizing: border-box;
}

.vcs-features .section-container {
  max-width: none;
  padding: 0;
  width: 100%;
}

.vcs-features__intro {
  display: flex;
  width: 53.625rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.vcs-features__badge {
  display: flex;
  padding: 0.75rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 5.9375rem;
  background: #3F19AB;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: normal;
}

.vcs-features__heading {
  align-self: stretch;
  margin: 0;
  color: var(--color-ink);
  font-family: Inter, var(--font-body);
  font-size: 3rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.1125rem;
}

.vcs-features__grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  align-self: stretch;
  margin-top: 4rem;
}

.vcs-features__row {
  display: flex;
  align-items: center;
  gap: 3rem;
  align-self: stretch;
}

/* Cards 3 & 4 must render the same height so card 4's flex:1 0 0 image
   has real space to grow into, matching card 3's fixed-height image. */
.vcs-features__row--stretch {
  align-items: stretch;
}

.vcs-features__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.75rem 1.75rem 0;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.vcs-features__star {
  position: absolute;
  left: -1.29881rem;
  top: -1.36106rem;
  display: flex;
  width: 3.375rem;
  height: 3.375rem;
  transform: rotate(-10deg);
  justify-content: center;
  align-items: center;
  border-radius: 1.6875rem;
  background: #184209;
  color: #D9F5C2;
}

.vcs-features__card--1 .vcs-features__star {
  background: #1F0D40;
  color: #E2D9FF;
}

.vcs-features__card--2 .vcs-features__star {
  background: #4A0817;
  color: #F9A8D4;
}

.vcs-features__card--4 .vcs-features__star {
  background: #1F0D40;
  color: #A8D8EA;
}

.vcs-features__star svg {
  width: 1.62525rem;
  height: 1.62525rem;
  flex-shrink: 0;
}

.vcs-features__card--1 {
  display: flex;
  flex: 1 1 0;
  padding: 2.5rem 2.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  border-radius: 2.25rem;
  background: #E2D9FF;
}

.vcs-features__text-block {
  display: flex;
  width: 33.1875rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.vcs-features__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  align-self: stretch;
}

.vcs-features__card--2 {
  display: flex;
  width: 31.125rem;
  flex: 0 0 31.125rem;
  padding: 2.5rem 2.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  border-radius: 2.25rem;
  background: #F9A8D4;
}

.vcs-features__card--3 {
  display: flex;
  width: 31.125rem;
  flex: 0 0 31.125rem;
  padding: 2.5rem 2.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  border-radius: 2.25rem;
  background: #D9F5C2;
}

.vcs-features__card--4 {
  display: flex;
  flex: 1 1 0;
  padding: 2.5rem 2.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  border-radius: 2.25rem;
  background: #A8D8EA;
}

.vcs-features__card--5 {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 2.5rem 2.25rem;
  align-items: flex-start;
  gap: 3rem;
  align-self: stretch;
  border-radius: 2.25rem;
  background: #FFF275;
}

.vcs-features__card--5 .vcs-features__number,
.vcs-features__card--5 .vcs-features__title {
  color: #2C2802;
}

.vcs-features__card--5 .vcs-features__body {
  align-self: stretch;
  width: auto;
  color: #373203;
}

.vcs-features__number {
  display: block;
  align-self: stretch;
  color: #1F0D40;
  font-family: Inika;
  font-size: 6rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.1125rem;
}

.vcs-features__title {
  margin: 0;
  align-self: stretch;
  color: #1F0D40;
  font-family: Inter;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.1125rem;
}

.vcs-features__card--1 .vcs-features__title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.05em;
}

.vcs-features__body {
  margin: 0;
  width: 33.1875rem;
  color: #2D1A54;
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

.vcs-features__card--2 .vcs-features__number {
  color: #4A0817;
}

.vcs-features__card--2 .vcs-features__title {
  color: #4A0817;
}

.vcs-features__card--2 .vcs-features__body {
  align-self: stretch;
  width: auto;
  color: #5A0F22;
}

.vcs-features__card--2 .vcs-features__shot {
  width: 100%;
  flex: 1 0 0;
  min-height: 25.6875rem;
  border-radius: 1.25rem;
  border: 6px solid #121212;
  margin-top: 0;
}

.vcs-features__card--3 .vcs-features__number {
  color: #123305;
}

.vcs-features__card--3 .vcs-features__title {
  color: #123305;
}

.vcs-features__card--3 .vcs-features__body {
  align-self: stretch;
  width: auto;
  color: #184209;
}

.vcs-features__card--3 .vcs-features__shot {
  width: 100%;
  flex: 1 0 0;
  min-height: 25.6875rem;
  border-radius: 1.25rem;
  border: 6px solid #121212;
  margin-top: 0;
}

.vcs-features__card--4 .vcs-features__body {
  align-self: stretch;
  width: auto;
}

.vcs-features__card--4 .vcs-features__shot {
  width: 100%;
  flex: 1 0 0;
  min-height: 28.0625rem;
  border-radius: 2rem;
  border: 6px solid #121212;
  margin-top: 0;
}

.vcs-features__shot {
  width: 100%;
  max-width: 100%;
  height: 28.0625rem;
  border-radius: 2rem;
  border: 6px solid #121212;
  overflow: hidden;
  margin-top: 0;
  background: #FFF;
}

.vcs-features__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.vcs-features__wide-text {
  display: flex;
  width: 24.1875rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  flex: none;
  min-width: 0;
}

.vcs-features__shot--wide {
  flex: 1 0 0;
  min-width: 0;
  height: 28.0625rem;
  border-radius: 2rem;
  border: 6px solid #121212;
  margin-top: 0;
  align-self: center;
}

.vcs-features__shot--wide img {
  object-fit: cover;
  object-position: 50% 50%;
}

.vcs-features__tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.75rem;
  width: 15.92856rem;
  height: 5.34563rem;
}

.vcs-features__tag {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  height: 2.37313rem;
  padding: 0.5rem 0.95rem;
  border-radius: 624.9375rem;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: #121212;
  color: #FFF;
  font-family: Montserrat, var(--font-body);
  font-size: 0.78125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.24813rem;
}

.vcs-features__tag--warning {
  border: 1px solid #FF9A36;
  background: #894505;
  color: #ffffff;
}

@media (max-width: 900px) {
  .vcs-features {
    width: 100%;
    padding: 3.5rem 1.5rem 4rem;
  }

  .vcs-features__heading {
    font-size: 20px;
    line-height: 1.3;
  }

  .vcs-features__intro {
    width: 100%;
  }

  .vcs-features__grid {
    gap: 2rem;
    margin-top: 2rem;
  }

  .vcs-features__row {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }

  .vcs-features__card--1,
  .vcs-features__card--2,
  .vcs-features__card--3,
  .vcs-features__card--4 {
    width: 100%;
    flex: none;
    padding: 1.5rem 1.5rem 0;
  }

  .vcs-features__number {
    font-size: 3.5rem;
  }

  .vcs-features__title {
    font-size: 1.5rem;
  }

  .vcs-features__card--1 .vcs-features__title {
    font-size: 28px;
    line-height: 1.2;
  }

  .vcs-features__body {
    width: auto;
  }

  .vcs-features__text-block {
    width: 100%;
  }

  .vcs-features__card--5 {
    flex-direction: column;
    width: 100%;
    padding: 1.5rem 1.5rem 0;
  }

  .vcs-features__wide-text {
    width: 100%;
    flex: none;
  }

  .vcs-features__shot--wide {
    flex: none;
    width: 100%;
    height: 14rem;
    border-radius: 1.25rem 1.25rem 0 0;
    margin-top: 1.5rem;
    align-self: auto;
  }

  .vcs-features__shot,
  .vcs-features__card--2 .vcs-features__shot,
  .vcs-features__card--3 .vcs-features__shot,
  .vcs-features__card--4 .vcs-features__shot {
    width: 100%;
    flex: none;
  }
}

@media (max-width: 600px) {
  .vcs-features__card--5 {
    padding: 1.5rem 1.5rem 0;
  }

  .vcs-features__tags {
    gap: 0.5rem;
  }
}

/* ---- Problem and Motivation: pastel card grid ---------------------------
   Same visual system as .fcs-constraints on the fashion case study (star
   badge, big number, pastel card colors) — badge keeps its original dark
   green here instead of switching to purple, per feedback. */
.ecs-problem {
  background: var(--color-bg);
  padding: 1rem 0 3rem;
}

.ecs-problem__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  border-radius: 5.9375rem;
  background: #071A18;
  color: #E4FFF2;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 2.5rem;
}

.ecs-problem__grid {
  display: flex;
  padding: 1rem 0;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 3rem 1.5rem;
  flex-wrap: wrap;
}

.ecs-problem__card {
  position: relative;
  display: flex;
  width: 20.0625rem;
  min-height: 22rem;
  padding: 4.45938rem 1.25rem 2.5rem 1.25rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.ecs-problem__card--1 {
  background: #E2D9FF;
}

.ecs-problem__card--2 {
  background: #FFD6E8;
}

.ecs-problem__card--3 {
  background: #D9F5C8;
}

.ecs-problem__card--4 {
  background: #C7E8F5;
}

.ecs-problem__star {
  display: flex;
  width: 3.375rem;
  height: 3.375rem;
  transform: rotate(-10deg);
  justify-content: center;
  align-items: center;
  position: absolute;
  left: -1.33006rem;
  top: -1.32981rem;
  border-radius: 1.6875rem;
}

.ecs-problem__star svg {
  width: 1.62538rem;
  height: 1.62538rem;
  flex-shrink: 0;
}

.ecs-problem__card--1 .ecs-problem__star {
  background: #351A7A;
}

.ecs-problem__card--2 .ecs-problem__star {
  background: #5C1030;
}

.ecs-problem__card--3 .ecs-problem__star {
  background: #14401F;
}

.ecs-problem__card--4 .ecs-problem__star {
  background: #0F2E3D;
}

.ecs-problem__num {
  color: #1F0D40;
  font-family: 'Inika', serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03125rem;
}

.ecs-problem__card--2 .ecs-problem__num {
  color: #4A0817;
}

.ecs-problem__card--3 .ecs-problem__num {
  color: #123305;
}

.ecs-problem__card--4 .ecs-problem__num {
  color: #0B2430;
}

.ecs-problem__title {
  align-self: stretch;
  margin: 0.5rem 0 0;
  color: #1F0D40;
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.61rem;
  letter-spacing: -0.0375rem;
}

.ecs-problem__card--2 .ecs-problem__title {
  color: #4A0817;
}

.ecs-problem__card--3 .ecs-problem__title {
  color: #123305;
}

.ecs-problem__card--4 .ecs-problem__title {
  color: #0B2430;
}

.ecs-problem__desc {
  align-self: stretch;
  margin: 0.75rem 0 0;
  color: #2D1A54;
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.91875rem;
  font-weight: 500;
  line-height: 1.51813rem;
}

.ecs-problem__card--2 .ecs-problem__desc {
  color: #5A0F22;
}

.ecs-problem__card--3 .ecs-problem__desc {
  color: #184209;
}

.ecs-problem__card--4 .ecs-problem__desc {
  color: #0B2430;
}

@media (max-width: 480px) {
  .ecs-problem__card {
    width: 100%;
    max-width: 20.0625rem;
  }
}

/* ---- Overview card: title + meta ----------------------------------------
   Mirrors the established cs-hero card system (accent-green surface,
   deep-teal text, Inter via --font-body) so both case studies read as
   one family. Inner row is the Figma-specified 77.5rem flex row. */
.fcs-overview {
  padding: 2.5rem 0 7.5rem;
}

.fcs-overview .section-container {
  display: flex;
  justify-content: start;
}

.fcs-overview__card {
  display: flex;
  min-width: 0;
  width: 100%;
}

.fcs-overview__row {
  display: flex;
  width: 77.5rem;
  max-width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.fcs-overview__title {
  align-self: flex-start;
  flex: 1 1 460px;
  max-width: 560px;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -1.2px;
}

.fcs-overview__meta {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: flex-end;
}

.fcs-overview__meta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.fcs-overview__meta-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.fcs-overview__meta-row:first-child {
  padding-top: 0;
}

.fcs-overview__meta-row dt {
  width: 84px;
  flex-shrink: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
}

.fcs-overview__meta-row dd {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
}

.fcs-overview__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}

@media (max-width: 900px) {
  .fcs-overview__row {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .fcs-overview__title {
    flex: none;
    max-width: 100%;
  }

  .fcs-overview__meta {
    align-self: flex-start;
  }
}

/* ---- Problem and Motivation: three-card row ------------------------------
   Exact Figma values (Inter via --font-body). Card surfaces currently sit
   on the page ground — TODO: confirm surface colours/radius from Figma. */
.fcs-problem {
  padding: 0 0 3.75rem;
}

.fcs-problem .section-container {
  display: flex;
  justify-content: center;
}

.fcs-problem__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.625rem;
  width: 77.5rem;
  max-width: 100%;
}

.fcs-problem__row {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
}

/* Decorative section pill — exact Figma values */
.fcs-problem__badge {
  display: inline-flex;
  padding: 0.75rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 5.9375rem;
  background: #3F19AB;
  color: #E4FFF2;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: normal;
}

.fcs-problem__badge svg {
  width: 1.25rem;
  height: 1.25rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

/* Card shells */
.fcs-problem__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 1.75rem;
}

.fcs-problem__card--background {
  background: #C6D8FF;
  padding: 1.43875rem 1.25rem 1.49938rem 1.25rem;
  gap: 1.25rem;
}

.fcs-problem__card--overview {
  background: #0D1C40 url("images/assets/Background.webp") center / cover no-repeat;
  padding: 1.5rem 1.25rem;
  justify-content: center;
  align-items: center;
}

.fcs-problem__card--goal {
  background: #FFB2CD;
  padding: 1.5rem 1.25rem;
  gap: 0;
  justify-content: flex-start;
}

.fcs-problem__card--goal .fcs-problem__heading {
  color: #380415;
  margin-bottom: 1.25rem;
  font-size: 26px;
}

.fcs-problem__card--goal .fcs-problem__body {
  color: #3D0617;
  margin-bottom: 2rem;
}

.fcs-problem__card--goal .fcs-problem__facts {
  margin-top: auto;
}

.fcs-problem__card--background .fcs-problem__heading {
  /* This card's background (#C6D8FF) is a fixed light blue that doesn't
     follow the theme toggle, but this heading had no color of its own —
     it fell through to body's `color: var(--color-ink)`, which flips to
     near-white in dark mode and disappears against the still-light card. */
  color: #101B33;
  font-size: 26px;
}

/* ==========================================================================
   FASHION VIDEO
   ========================================================================== */
.fcs-video-wrap {
  padding: 0 0 3rem;
}

.fcs-video {
  display: flex;
  height: 45.875rem;
  padding: 0.75rem 0.875rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  border-radius: 1.5rem;
  border: 0.6px solid rgba(160, 163, 178, 0.60);
  background: #FFF;
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.10);
}

.fcs-video__file {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
  display: block;
}

/* ---- AI in Education video (education case study) — same card as
   .fcs-video above, desktop/mobile swap for the video source itself. ---- */
.ecs-video-wrap {
  padding: 0 0 3rem;
}

.ecs-video {
  display: flex;
  height: 45.875rem;
  padding: 0.75rem 0.875rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  border-radius: 1.5rem;
  border: 0.6px solid rgba(160, 163, 178, 0.60);
  background: #FFF;
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.10);
}

.ecs-video__file {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
  display: block;
}

.ecs-video__file--mobile {
  display: none;
}

@media (max-width: 900px) {
  .ecs-video {
    width: 24.5rem;
    height: 24rem;
    max-width: 100%;
    align-self: center;
    margin: 0 auto;
  }

  .ecs-video__file--desktop {
    display: none;
  }

  .ecs-video__file--mobile {
    display: block;
  }
}

/* ==========================================================================
   KEY FEATURES — pastel card grid, same colour system as the fashion
   case study's "Constraints and Challenges" section.
   ========================================================================== */
.ecs-features {
  display: flex;
  width: 89.125rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 6.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 7.8125rem;
  background: var(--color-bg);
  box-sizing: border-box;
}

.ecs-features .section-container {
  max-width: none;
  padding: 0;
  width: 100%;
}

.ecs-features__intro {
  display: flex;
  width: 53.625rem;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.ecs-features__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  border-radius: 5.9375rem;
  background: #071A18;
  color: #E4FFF2;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: normal;
}

.ecs-features__desc {
  margin: 0;
  max-width: 34rem;
  color: var(--color-ink-muted);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.0375rem;
}

.ecs-features__grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  align-self: stretch;
  margin-top: 4rem;
}

.ecs-features__row {
  display: flex;
  align-items: stretch;
  gap: 3rem;
  align-self: stretch;
}

/* Cards must render the same height within each row while keeping their unique widths */
.ecs-features__row--stretch {
  align-items: stretch;
}

.ecs-features__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.75rem 1.75rem 0;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.ecs-features__star {
  position: absolute;
  left: -1.29881rem;
  top: -1.36106rem;
  display: flex;
  width: 3.375rem;
  height: 3.375rem;
  transform: rotate(-10deg);
  justify-content: center;
  align-items: center;
  border-radius: 1.6875rem;
  background: #184209;
  color: #D9F5C8;
}

.ecs-features__card--1 .ecs-features__star {
  background: #1F0D40;
  color: #E2D9FF;
}

.ecs-features__card--2 .ecs-features__star {
  background: #7A1440;
  color: #FFD6E8;
}

.ecs-features__card--4 .ecs-features__star {
  background: #0D3A50;
  color: #C7E8F5;
}

.ecs-features__star svg {
  width: 1.62525rem;
  height: 1.62525rem;
  flex-shrink: 0;
}

.ecs-features__card--1 {
  display: flex;
  flex: 1 1 0;
  padding: 2.5rem 2.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  border-radius: 2.25rem;
  background: #E2D9FF;
}

.ecs-features__card--1 .ecs-features__shot {
  width: 100%;
  flex: 1 0 0;
  min-height: 25.6875rem;
  border-radius: 2rem;
  border: 6px solid #1F0D40;
  margin-top: 0;
}

.ecs-features__text-block {
  display: flex;
  width: 33.1875rem;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.ecs-features__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  align-self: stretch;
}

.ecs-features__card--2 {
  display: flex;
  width: 31.125rem;
  flex: 0 0 31.125rem;
  padding: 2.5rem 2.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  border-radius: 2.25rem;
  background: #FFD6E8;
}

.ecs-features__card--3 {
  display: flex;
  width: 31.125rem;
  flex: 0 0 31.125rem;
  padding: 2.5rem 2.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  border-radius: 2.25rem;
  background: #D9F5C8;
}

.ecs-features__card--4 {
  display: flex;
  flex: 1 1 0;
  padding: 2.5rem 2.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  border-radius: 2.25rem;
  background: #C7E8F5;
}

.ecs-features__card--5 {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 2.5rem 2.25rem;
  align-items: flex-start;
  gap: 3rem;
  align-self: stretch;
  border-radius: 2.25rem;
  background: #FFEB8A;
}

.ecs-features__card--5 .ecs-features__number,
.ecs-features__card--5 .ecs-features__title {
  color: #121418;
}

.ecs-features__card--5 .ecs-features__body {
  align-self: stretch;
  width: auto;
  color: #121418;
}

.ecs-features__number {
  display: block;
  align-self: stretch;
  color: #1F0D40;
  font-family: Inika;
  font-size: 6rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.1125rem;
}

.ecs-features__title {
  margin: 0;
  align-self: stretch;
  color: #1F0D40;
  font-family: var(--font-body);
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.1125rem;
}

.ecs-features__body {
  margin: 0;
  width: 33.1875rem;
  color: #2D1A54;
  font-family: var(--font-body);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

.ecs-features__card--2 .ecs-features__number {
  color: #7A1440;
}

.ecs-features__card--2 .ecs-features__title {
  color: #7A1440;
}

.ecs-features__card--2 .ecs-features__body {
  align-self: stretch;
  width: auto;
  color: #8A1D4C;
}

.ecs-features__card--2 .ecs-features__shot {
  width: 100%;
  flex: 1 0 0;
  min-height: 25.6875rem;
  border-radius: 1.25rem;
  border: 6px solid #7A1440;
  margin-top: 0;
}

.ecs-features__card--3 .ecs-features__number {
  color: #123305;
}

.ecs-features__card--3 .ecs-features__title {
  color: #123305;
}

.ecs-features__card--3 .ecs-features__body {
  align-self: stretch;
  width: auto;
  color: #184209;
}

.ecs-features__card--3 .ecs-features__shot {
  width: 100%;
  flex: 1 0 0;
  min-height: 25.6875rem;
  border-radius: 1.25rem;
  border: 6px solid #123305;
  margin-top: 0;
}

.ecs-features__card--4 .ecs-features__number {
  color: #0D3A50;
}

.ecs-features__card--4 .ecs-features__title {
  color: #0D3A50;
}

.ecs-features__card--4 .ecs-features__body {
  align-self: stretch;
  width: auto;
  color: #124A66;
}

.ecs-features__card--4 .ecs-features__shot {
  width: 100%;
  flex: 1 0 0;
  min-height: 25.6875rem;
  border-radius: 2rem;
  border: 6px solid #0D3A50;
  margin-top: 0;
}

.ecs-features__shot {
  width: 100%;
  max-width: 100%;
  height: 25.6875rem;
  border-radius: 2rem;
  border: 6px solid #1F0D40;
  overflow: hidden;
  margin-top: 0;
  background: #FFF;
}

.ecs-features__shot img {
  width: 100%;
  height: 100%;
  /* progress.png especially is a very tall, full-scroll dashboard capture
     — crop to a consistent card height instead of letting each card's
     height vary wildly with its source screenshot's own aspect ratio. */
  object-fit: cover;
  object-position: top;
  display: block;
}

.ecs-features__wide-text {
  display: flex;
  width: 24.1875rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  flex: none;
  min-width: 0;
}

.ecs-features__shot--wide {
  flex: 1 0 0;
  min-width: 0;
  height: 28.0625rem;
  border-radius: 2rem;
  border: 6px solid #121418;
  margin-top: 0;
  align-self: center;
}

.ecs-features__shot--wide img {
  object-fit: cover;
  object-position: 50% 50%;
}

@media (max-width: 900px) {
  .ecs-features {
    width: 100%;
    padding: 3.5rem 1.5rem 4rem;
  }

  .ecs-features__intro {
    width: 100%;
  }

  .ecs-features__grid {
    gap: 2rem;
  }

  .ecs-features__row {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }

  .ecs-features__card--1,
  .ecs-features__card--2,
  .ecs-features__card--3,
  .ecs-features__card--4 {
    width: 100%;
    flex: none;
    padding: 1.5rem 1.5rem 0;
  }

  .ecs-features__number {
    font-size: 3.5rem;
  }

  .ecs-features__title {
    font-size: 1.5rem;
  }

  .ecs-features__body {
    width: auto;
  }

  .ecs-features__text-block {
    width: 100%;
  }

  .ecs-features__card--5 {
    flex-direction: column;
    width: 100%;
    padding: 1.5rem 1.5rem 0;
  }

  .ecs-features__wide-text {
    width: 100%;
    flex: none;
  }

  .ecs-features__shot--wide {
    flex: none;
    width: 100%;
    height: 14rem;
    border-radius: 1.25rem 1.25rem 0 0;
    margin-top: 1.5rem;
    align-self: auto;
  }

  .ecs-features__shot,
  .ecs-features__card--2 .ecs-features__shot,
  .ecs-features__card--3 .ecs-features__shot,
  .ecs-features__card--4 .ecs-features__shot {
    width: 100%;
    flex: none;
  }
}

/* ==========================================================================
   RESEARCH / PROCESS SECTION
   ========================================================================== */
.fcs-process {
  background: #202020;
  display: flex;
  justify-content: center;
}

.fcs-process__inner {
  display: flex;
  width: 90rem;
  max-width: 100%;
  padding: 6.25rem 6.25rem 5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}

.fcs-process__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}

.fcs-process__badge {
  display: inline-flex;
  padding: 0.75rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 5.9375rem;
  background: #6B34A3;
  color: #FFF;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 500;
}

.fcs-process__badge--yellow {
  background: #F8AF19;
  color: #121418;
}

.fcs-process__badge-icon {
  width: 1.25rem;
  height: 1.25rem;
  aspect-ratio: 1/1;
}

.fcs-process__desc {
  width: 43.5rem;
  color: #D3D3D3;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.0625rem;
  margin: 0;
}

@media (max-width: 768px) {
  .fcs-process__desc {
    font-size: 1rem;
  }
}

.fcs-process__cards {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
}

.fcs-process__index {
  color: #FFF;
  font-family: var(--font-body);
  font-size: 2.025rem;
  font-weight: 700;
  line-height: 2.1rem;
  letter-spacing: -0.03125rem;
  margin-bottom: 0.5rem;
}

.fcs-process__card {
  position: relative;
  display: flex;
  width: 22.66625rem;
  height: 25rem;
  padding: 5.29563rem 2rem 4.60938rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 2.75rem;
  border: 1px solid #A78BFA;
  background: #000;
  flex-shrink: 0;
}

.fcs-process__number {
  position: absolute;
  left: -1.33006rem;
  top: -1.32981rem;
  display: flex;
  width: 3.375rem;
  height: 3.375rem;
  transform: rotate(-10deg);
  justify-content: center;
  align-items: center;
  border-radius: 1.6875rem;
  background: #A78BFA;
}

.fcs-process__number svg {
  width: 1.625rem;
  height: 1.625rem;
}

.fcs-process__card-title {
  color: #FFF;
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.61rem;
  letter-spacing: -0.0375rem;
  margin: 0 0 1rem;
}

.fcs-process__card-desc {
  width: 17.5625rem;
  color: #CBD5E1;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.0625rem;
  margin: 0;
}

/* Card 2 — pink star */
.fcs-process__card--pink {
  border-color: #F9A8D4;
}

.fcs-process__card--pink .fcs-process__number {
  background: #F9A8D4;
}

/* Card 3 — yellow border + yellow star */
.fcs-process__card--yellow {
  padding: 4.53688rem 2rem 3.85063rem;
  border-color: #FDE047;
}

.fcs-process__card--yellow .fcs-process__number {
  background: #FDE047;
}

/* Card 4 — green border + green star */
.fcs-process__card--green {
  border-color: #AEEB6B;
}

.fcs-process__card--green .fcs-process__number {
  background: #AEEB6B;
}

.fcs-problem__body {
  align-self: stretch;
  color: #33415C;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

.fcs-problem__card--goal .fcs-problem__body {
  color: #3D0617;
}

.fcs-problem__facts {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fcs-problem__fact-label {
  color: #33415C;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.0625rem;
  text-transform: uppercase;
}

.fcs-problem__fact-value {
  width: 20.1875rem;
  max-width: 100%;
  color: #33415C;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

.fcs-problem__card--goal .fcs-problem__fact-label,
.fcs-problem__card--goal .fcs-problem__fact-value {
  color: #3D0617;
}

.fcs-problem__tagline {
  align-self: stretch;
  color: #FFF;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

/* Stack the three cards on narrow screens */
@media (max-width: 900px) {
  .fcs-problem__row {
    flex-direction: column;
  }

  .fcs-problem__card--overview {
    min-height: 18rem;
    justify-content: center;
    align-items: center;
  }
}

/* Visually hidden but available to screen readers — used for page titles
   that exist only as imagery (e.g. the fashion case study hero). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Phone showcase ----
   --cs-scale shrinks the whole cluster (phones, labels, curves) uniformly
   from the dimensions/positions given in Figma, so the showcase reads in
   the same scroll as the headline instead of running long. All px values
   below are the original Figma numbers wrapped in calc(...* var(--cs-scale))
   — tune --cs-scale alone to resize the whole composition. */
.cs-showcase {
  --cs-scale: 0.66;
  position: relative;
  width: 100%;
  max-width: calc(1180px * var(--cs-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(70px * var(--cs-scale)) 0 calc(170px * var(--cs-scale));
}

.cs-phone {
  position: relative;
  flex-shrink: 0;
}

/* Phone 1 and 3 are flattened mockup PNGs — the device frame, tilt and
   drop shadow are already baked into the image (same pattern as the hero
   showcase images), so the container just positions/overlaps them; no
   extra rotation, radius or background here. */
.cs-phone--one img,
.cs-phone--three img {
  width: 100%;
  height: auto;
  display: block;
}

.cs-phone--one {
  width: calc(390.5px * var(--cs-scale));
  transform: translate(calc(20px * var(--cs-scale)), calc(40px * var(--cs-scale)));
  z-index: 1;
}

.cs-phone--two {
  width: calc(447px * var(--cs-scale));
  height: calc(745px * var(--cs-scale));
  border-radius: calc(49.9px * var(--cs-scale));
  overflow: hidden;
  background: #050505;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
  z-index: 3;
  margin: 0 calc(6px * var(--cs-scale));
}

.cs-phone--three {
  width: calc(390px * var(--cs-scale));
  transform: translate(calc(-20px * var(--cs-scale)), calc(70px * var(--cs-scale)));
  z-index: 2;
}

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

/* ---- Hand-drawn labels + connector curves ----
   Positioned in px against the actual rendered phone boxes (measured via
   getBoundingClientRect against .cs-showcase, which is the positioning
   context for all of these, at scale 1): phone1 ~ (-10,110)-(381,889),
   phone2 ~ (367,87)-(814,832), phone3 ~ (800,157)-(1190,902). Same
   --cs-scale applied so they track the resized phones. */
.cs-label {
  position: absolute;
  color: #A5D553;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: calc(48px * var(--cs-scale));
  letter-spacing: calc(-1.8px * var(--cs-scale));
  line-height: normal;
  white-space: nowrap;
  z-index: 4;
}

.cs-curve {
  position: absolute;
  display: block;
  z-index: 4;
}

/* "Search" — sits above the phone1/phone2 seam, curve hooks down to
   phone1's top-right corner. */
.cs-label--search {
  left: calc(300px * var(--cs-scale));
  top: calc(6px * var(--cs-scale));
}

.cs-curve--one {
  width: calc(121px * var(--cs-scale));
  height: calc(188px * var(--cs-scale));
  left: calc(336px * var(--cs-scale));
  top: calc(56px * var(--cs-scale));
  transform: rotate(-75deg);
}

/* "Hum To Search" — right of phone2, clear of phone3 (which doesn't
   start until top:157px), curve hooks down to phone2's top-right icon. */
.cs-label--hum {
  left: calc(828px * var(--cs-scale));
  top: calc(96px * var(--cs-scale));
}

.cs-curve--two {
  width: calc(7.5625rem * var(--cs-scale));
  height: calc(11.68694rem * var(--cs-scale));
  left: calc(796px * var(--cs-scale));
  top: calc(92px * var(--cs-scale));
  transform: rotate(-110.342deg);
}

/* "Get Your Result" — below the phone cluster, curve hooks up to
   phone3's bottom-left corner. */
.cs-label--result {
  left: calc(560px * var(--cs-scale));
  top: calc(946px * var(--cs-scale));
}

.cs-curve--three {
  width: calc(121px * var(--cs-scale));
  height: calc(188px * var(--cs-scale));
  left: calc(812px * var(--cs-scale));
  top: calc(858px * var(--cs-scale));
}

/* ---- Mobile-only hero (hidden on desktop) ---- */
.cs-mobile-hero {
  display: none;
}

/* ==========================================================================
   FULL STORY — 5-card overview, absolutely positioned against the exact
   Figma frame (measured from the full-story-spotify.png reference). Only
   card 1 ("Overview") had complete CSS from Figma; the other 4 cards'
   colors/positions are read directly off that same reference so the whole
   set reads as one system, per the same approach used elsewhere in this
   build for un-specified but visually-inferable values.
   ========================================================================== */
.fs {
  background: #EEFFD2;
  padding: 60px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fs__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 1240px;
  margin-bottom: 24px;
}

.fs__icon {
  width: 52px;
  height: auto;
  margin-bottom: 4px;
}

.fs__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 56px);
  /* This section's background (#EEFFD2) is fixed and doesn't follow the
     theme toggle, but this heading did via var(--color-ink) — which
     flips to near-white in dark mode and disappears against the still-
     light background. Fixed dark color instead, on both breakpoints. */
  color: #222222;
  letter-spacing: -0.02em;
}

.fs__divider {
  flex: 1 0 0;
  align-self: stretch;
  background: #A5D553;
  height: 1px;
  margin-top: 16px;
}

.fs-canvas {
  position: relative;
  width: 100%;
  max-width: 1240px;
  height: calc(1500px - 8rem);
}

.fs-curve {
  position: absolute;
  pointer-events: none;
}

.fs-curve--1 {
  width: 637px;
  height: 465px;
  left: -167px;
  top: -80px;
}

.fs-curve--4 {
  width: 637px;
  height: 465px;
  left: 401px;
  top: 327px;
}

.fs-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.9375rem;
  padding: 1.5rem 1.5rem 1.125rem 2rem;
  border-radius: 1.5rem;
  border: 1px solid #FFF;
  /* Each variant sets --fs-rotate instead of its own `transform` so a
     hover scale can layer on top without overwriting the card's tilt
     (scaling after a fresh rotate(0) would otherwise snap the card
     upright for a frame before/after the hover). */
  transform: rotate(var(--fs-rotate, 0deg)) scale(var(--fs-scale, 1));
  transition: transform 0.25s ease;
  will-change: transform;
}

.fs-card:hover {
  --fs-scale: 1.05;
  z-index: 3;
}

.fs-card--1 {
  left: 128px;
  top: 40px;
  width: 31.5625rem;
  --fs-rotate: -3deg;
  background: #86EFAC;
}

.fs-card--2 {
  left: 660px;
  top: 178px;
  width: 31.9375rem;
  --fs-rotate: 2deg;
  background: #FFF2B2;
}

.fs-card--3 {
  left: 128px;
  top: calc(370px - 1rem);
  width: 31.9375rem;
  --fs-rotate: -3deg;
  background: #FFC951;
}

.fs-card--4 {
  left: 665px;
  top: 480px;
  width: 30.8125rem;
  --fs-rotate: 2deg;
  background: #A5D553;
}

.fs-card--5 {
  left: 128px;
  top: calc(950px - 3rem);
  width: 64.3125rem;
  background: #FFF2B2;
}

.fs-card__number {
  position: absolute;
  left: -19px;
  top: -19px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.37513rem;
  height: 2.37513rem;
  border-radius: 1.1875rem;
  border: 2px solid #FFF;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: normal;
  z-index: 2;
}

.fs-card--1 .fs-card__number,
.fs-card--4 .fs-card__number {
  background: #0B421F;
  color: #86EFAC;
  transform: rotate(-3deg);
}

.fs-card--2 .fs-card__number,
.fs-card--3 .fs-card__number,
.fs-card--5 .fs-card__number {
  background: #714000;
  color: #FFE8C2;
}

.fs-card--2 .fs-card__number {
  transform: rotate(2deg);
}

.fs-card--3 .fs-card__number {
  transform: rotate(-2deg);
}

.fs-card--5 .fs-card__number {
  transform: rotate(3deg);
}

.fs-card__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.0625rem;
  line-height: normal;
}

.fs-card--1 .fs-card__title,
.fs-card--4 .fs-card__title {
  color: #0B421F;
}

.fs-card--2 .fs-card__title {
  color: #362D00;
}

.fs-card--3 .fs-card__title,
.fs-card--5 .fs-card__title {
  color: #733400;
}

.fs-card__body {
  margin: 0;
  align-self: stretch;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: -0.03125rem;
  line-height: normal;
}

.fs-card--1 .fs-card__body {
  color: #1C793A;
}

.fs-card--2 .fs-card__body {
  color: #714000;
}

.fs-card--3 .fs-card__body,
.fs-card--5 .fs-card__body {
  color: #3D2200;
}

.fs-card--4 .fs-card__body {
  color: #003815;
}

.fs-card__list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: -0.03125rem;
  line-height: 1.55;
}

.fs-card--3 .fs-card__list {
  color: #3D2200;
}

.fs-card--5 .fs-card__list {
  color: #3D2200;
}

.fs-chip {
  display: inline-flex;
  padding: 0.25rem 0.4375rem;
  border-radius: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.03125rem;
}

.fs-chip--float {
  display: flex;
  padding: 0.25rem 0.4375rem;
  align-items: flex-start;
  position: absolute;
  right: calc(1rem - 3px);
  bottom: calc(3.04013rem + 2px);
  border-radius: 0.25rem;
  background: #16A34A;
  color: #86EFAC;
}

.fs-card--2 .fs-chip {
  background: #FFBA60;
  color: #362D00;
}

.fs-card--3 .fs-chip,
.fs-card--5 .fs-chip {
  background: #D3851E;
  color: #FFF;
}

.fs-card--4 .fs-chip {
  background: #0B421F;
  color: #86EFAC;
}

/* ==========================================================================
   DISCOVERY — sits inside .fcs-process__inner, shares its #202020 ground
   ========================================================================== */
.fcs-discovery__wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  align-self: stretch;
  margin-top: 84px;
}

.fcs-discovery__badge {
  display: flex;
  padding: 0.75rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 5.9375rem;
  background: #6B34A3;
  color: #FFF;
  font-family: Inter, var(--font-body);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: normal;
}

.fcs-discovery__badge-icon {
  width: 1.25rem;
  height: 1.25rem;
  aspect-ratio: 1/1;
  flex-shrink: 0;
}

.fcs-discovery__stat {
  display: flex;
  width: 51.0625rem;
  max-width: 100%;
  padding: 1.1rem 2.25rem;
  align-items: center;
  gap: 1.24938rem;
  border-radius: 1rem;
  background: #A78BFA;
}

.fcs-discovery__stat-number {
  color: #121418;
  font-family: Inter, var(--font-body);
  font-size: 3rem;
  font-weight: 700;
  line-height: 3rem;
  letter-spacing: -0.0625rem;
  flex-shrink: 0;
}

.fcs-discovery__stat-text {
  width: 37.125rem;
  max-width: 100%;
  margin: 0;
  color: #121418;
  font-family: Inter, var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

.fcs-discovery__stat--green {
  width: 58.1875rem;
  max-width: 100%;
  background: #AEEB6B;
}

.fcs-discovery__stat--yellow {
  width: 61.125rem;
  max-width: 100%;
  background: #FDE047;
}

.fcs-discovery__stat--pink {
  width: 64.125rem;
  max-width: 100%;
  background: #F9A8D4;
}

/* ---- Education (LilyAI) page only overrides ---------------------------
   The education case study reuses the shared .fcs-process__* and
   .fcs-discovery__* classes, so these layout / colour tweaks are scoped
   to its route id to keep the fashion case study untouched. */
#page-education-case-study:not([hidden]) .fcs-process__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  gap: 2rem;
}

#page-education-case-study:not([hidden]) .fcs-process__card {
  width: auto;
  box-sizing: border-box;
}

#page-education-case-study:not([hidden]) .fcs-discovery__badge {
  background: #F8AF19;
  color: #121418;
}

/* ---------- Mobile responsive — Research & Discovery (education page) ---- */
@media (max-width: 900px) {

  /* ---- Process container: reduce horizontal padding ---- */
  .fcs-process__inner {
    padding: 3rem 1.25rem 2.5rem;
    gap: 2rem;
  }

  /* ---- Process badge: scale down ---- */
  .fcs-process__badge {
    padding: 0.75rem 1.25rem;
    font-size: 1.2rem;
    gap: 0.625rem;
  }

  .fcs-process__badge-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* ---- Process desc: full width ---- */
  .fcs-process__desc {
    width: 100%;
    max-width: 100%;
  }

  /* ---- 4 research cards: stack vertically, single column ---- */
  .fcs-process__cards {
    flex-direction: column;
    gap: 1.75rem;
  }

  #page-education-case-study:not([hidden]) .fcs-process__cards {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .fcs-process__card {
    width: 90% !important;
    max-width: 22rem;
    align-self: center;
    justify-self: center;
    height: auto;
    min-height: 14rem;
    padding: 3.5rem 1.5rem 2rem;
    border-radius: 1.75rem;
  }

  .fcs-process__card--yellow {
    padding: 3.5rem 1.5rem 2rem;
  }

  .fcs-process__card-desc {
    width: 100%;
    max-width: 100%;
  }

  /* ---- Star/number badge on cards: adjust position for smaller radius ---- */
  .fcs-process__number {
    left: -0.75rem;
    top: -0.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
  }

  .fcs-process__number svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* ---- Discovery section: left-align, full-width ---- */
  .fcs-discovery__wrap {
    align-items: flex-start;
    margin-top: 3rem;
    gap: 0.5rem;
  }

  /* ---- Discovery badge: scale down ---- */
  .fcs-discovery__badge {
    padding: 0.75rem 1.25rem;
    font-size: 1.2rem;
    gap: 0.625rem;
    margin-bottom: 0.25rem;
  }

  .fcs-discovery__badge-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* ---- Discovery stat cards: full-width, proper mobile layout ---- */
  .fcs-discovery__stat,
  .fcs-discovery__stat--green,
  .fcs-discovery__stat--yellow,
  .fcs-discovery__stat--pink {
    width: 100%;
    max-width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 0.875rem;
    gap: 1rem;
  }

  .fcs-discovery__stat-number {
    font-size: 2rem;
    line-height: 2rem;
  }

  .fcs-discovery__stat-text {
    width: auto;
    max-width: 100%;
    font-size: 0.875rem;
    letter-spacing: -0.02rem;
  }
}

/* ---- Extra-small screens (≤ 480px) ---- */
@media (max-width: 480px) {

  .fcs-process__inner {
    padding: 2.5rem 1rem 2rem;
  }

  .fcs-process__badge {
    padding: 0.75rem 1.25rem;
    font-size: 1.2rem;
  }

  .fcs-process__card {
    min-height: 12rem;
    padding: 3rem 1.25rem 1.75rem;
    border-radius: 1.5rem;
  }

  .fcs-process__card--yellow {
    padding: 3rem 1.25rem 1.75rem;
  }

  .fcs-process__index {
    font-size: 1.5rem;
    line-height: 1.6rem;
  }

  .fcs-process__card-title {
    font-size: 1.15rem;
    line-height: 1.35rem;
    margin-bottom: 0.625rem;
  }

  .fcs-process__card-desc {
    font-size: 0.875rem;
  }

  .fcs-discovery__stat {
    padding: 0.875rem 1rem;
    gap: 0.75rem;
  }

  .fcs-discovery__stat-number {
    font-size: 1.625rem;
    line-height: 1.625rem;
  }

  .fcs-discovery__stat-text {
    font-size: 0.8125rem;
  }
}

/* ==========================================================================
   IDEA AND CONCEPTION
   ========================================================================== */
.fcs-idea {
  display: flex;
  justify-content: center;
}

.fcs-idea__frame {
  width: 77.5rem;
  /* Height is content-driven (auto), not fixed: the earlier `height` /
     `min-height` values (171.8125rem) no longer match the lighter content
     after the mockups were resized to their natural aspect ratio, which
     left a large empty gap before the next section. The padding still gives
     the exact 5rem breathing room below, and the footer can't overlap since
     the frame resizes with its content. */
  min-height: auto;
  max-width: 100%;
  /* Breathing room above the "Idea and Conception" badge, per feedback. */
  padding-top: 5rem;
  /* 2rem gap to the section that follows (.fcs-features), trimmed 3rem
     from the original 5rem per feedback. */
  padding-bottom: 2rem;
}

.fcs-idea__header {
  display: flex;
  width: 26.9375rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 4rem;
}

.fcs-idea__badge {
  display: flex;
  padding: 0.75rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 5.9375rem;
  background: #3F19AB;
  color: #E4FFF2;
  font-family: Inter, var(--font-body);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: normal;
}

.fcs-idea__badge-icon {
  width: 1.25rem;
  height: 1.25rem;
  aspect-ratio: 1/1;
  flex-shrink: 0;
}

.fcs-idea__desc {
  height: 1.125rem;
  align-self: stretch;
  margin: 0;
  color: var(--color-ink-muted);
  font-family: Inter, var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.1125rem;
}

.fcs-idea__row {
  display: flex;
  /* .fcs-idea__right is DOM-first (markup order: text, then image) but the
     reference shows the phone mockup on the left and the text on the
     right — reverse the visual order without touching the markup. */
  flex-direction: row-reverse;
  width: 77.5rem;
  max-width: 100%;
  /* Exact Figma spec — both columns start together at the top. */
  align-items: flex-start;
  gap: 8.4375rem;
  /* Clear gap from .fcs-idea__header (badge + description) above it —
     .fcs-idea__frame has no gap of its own between block children, so
     without this the row sits right up against the description line. */
  margin-top: 0rem;
}

.fcs-idea__right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* Exact Figma spec. .fcs-idea__mockup still pulls itself up closer to
     .fcs-idea__method on top of this — see its own margin-top comment. */
  gap: 2.5rem;
  flex: 1 0 0;
  min-width: 0;
  position: relative;
}

.fcs-idea__accent {
  position: absolute;
  left: 0.1875rem;
  top: 0.1875rem;
  width: 6.25rem;
  height: 0.375rem;
  background: #008944;
}

.fcs-idea__title {
  align-self: stretch;
  margin: 0;
  color: var(--color-ink);
  font-family: Inter, var(--font-body);
  font-size: 3rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.1125rem;
}

.fcs-idea__body {
  align-self: stretch;
  margin: 0;
  color: var(--color-ink-muted);
  font-family: Inter, var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.1125rem;
}

/* Wraps just the heading + body copy (not the accent bar, not the
   methods/mockups) for "Multiple input methods" — exact Figma spec. */
.fcs-idea__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  align-self: stretch;
}

.fcs-idea__img {
  /* Shrinkable flex-basis so it doesn't out-compete .fcs-idea__right's
     flex:1 for width (the reference shows the phone at roughly 40% of the
     row, not full-width) while still shrinking below this on narrow
     viewports instead of forcing horizontal overflow. Sized down from
     28rem — that read too large next to the text column. */
  flex: none;
  width: 22rem;
  max-width: 100%;
  height: auto;
  display: block;
  /* The PNG has a soft drop-shadow baked in above the phone itself, so its
     bounding box starts visibly higher than the actual device edge — pull
     it up so the phone's visible top lines up with the text column's top
     instead of sitting a shadow's-width lower than it. */
  margin-top: -18px;
}

/* .fcs-idea__steps bundles each method's number+label with its own
   mockup into one .fcs-idea__step card (see the HTML comment above the
   markup). At desktop, each step uses display:contents so its two
   children drop straight into this grid as independent items — column N
   for step N, row 1 for the label and row 2 for the mockup — recreating
   the original two-separate-rows look with no visual change. Mobile
   turns this same grid into a horizontal scroll-snap carousel of whole
   cards instead (see the max-width:900px block). */
.fcs-idea__steps {
  display: grid;
  grid-template-columns: repeat(3, 12.375rem);
  grid-template-rows: auto auto;
  column-gap: 5rem;
  align-self: stretch;
}

.fcs-idea__step {
  display: contents;
}

.fcs-idea__step:nth-child(1) .fcs-idea__method {
  grid-column: 1;
}

.fcs-idea__step:nth-child(1) .fcs-idea__mockup {
  grid-column: 1;
}

.fcs-idea__step:nth-child(2) .fcs-idea__method {
  grid-column: 2;
}

.fcs-idea__step:nth-child(2) .fcs-idea__mockup {
  grid-column: 2;
}

.fcs-idea__step:nth-child(3) .fcs-idea__method {
  grid-column: 3;
}

.fcs-idea__step:nth-child(3) .fcs-idea__mockup {
  grid-column: 3;
}

.fcs-idea__method {
  display: flex;
  grid-row: 1;
  height: 5.8125rem;
  flex-direction: column;
  align-items: flex-start;
}

.fcs-idea__method-num {
  color: var(--color-ink);
  font-family: 'Inika', serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03125rem;
}

.fcs-idea__method-label {
  align-self: stretch;
  color: #959595;
  font-family: Inter, var(--font-body);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.1125rem;
}

.fcs-idea__mockup {
  /* These are flattened phone-mockup PNGs with the device frame already
     baked in (same pattern as .fcs-idea__img) — no extra card border/
     shadow here, it just doubled up on top of the image's own frame.
     Height is auto: the source PNGs are 1030x1959 (ratio ~1.90), so the
     previous pinned height (26.8875rem against a 12.375rem width = 2.17)
     stretched the baked-in device frame. */
  grid-row: 2;
  /* .fcs-idea__step's row-1 (label) is 5.8125rem tall; the original
     Figma gap from the label row to the mockup row was effectively
     ~12px once .fcs-idea__right's own 40px gap was subtracted — align
     that here with a small negative margin instead of the old row's
     margin-top/transform hack (which assumed a separate flex row). */
  margin-top: -1.75rem;
  width: 12.375rem;
  height: auto;
  display: block;
  /* The source PNGs (1030px wide) carry a symmetric ~66-68px transparent
     gutter baked in on each side around the phone body, so the visible
     device sits ~9.4% inset from this box's edges instead of flush with
     "01"/"AI Scan" above it. Scale the rendered image up by the inverse
     of the visible-content ratio (896/1030 ≈ 0.8117) and pull it left by
     that same inset so the phone's own visible left edge — not this
     element's box edge — lines up with the label above it. */
  transform-origin: left center;
  transform: scale(1.2321) translateX(-9.415%);
}

/* ==========================================================================
   RESPONSIVE — Idea and Conception: the desktop row/header/methods widths
   here are fixed rem values with no shrink path, which overflowed badly
   below ~900px once .fcs-idea__row actually had two real flex children
   fighting for width. Stack to a single column below that.
   ========================================================================== */
@media (max-width: 900px) {
  .fcs-idea {
    justify-content: flex-start;
  }

  .fcs-idea__frame {
    display: flex;
    width: 27.5rem;
    max-width: 100%;
    padding: 3rem 1.5rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    height: auto;
  }

  .fcs-idea__header {
    width: 100%;
    max-width: 100%;
  }

  .fcs-idea__row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 2.5rem;
  }

  .fcs-idea__right {
    display: flex;
    width: 27.5rem;
    max-width: 100%;
    height: auto;
    padding: 0 1.5rem;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .fcs-idea__title {
    font-size: 2rem;
  }

  .fcs-idea__copy {
    width: 100%;
  }

  /* .fcs-idea__accent is absolutely positioned against .fcs-idea__right's
     padding edge at a fixed 0.1875rem offset tuned for desktop, where
     .fcs-idea__right has no padding of its own. Mobile adds 1.5rem of
     side padding to that container, so the bar needs the same offset or
     it sits well left of "Multiple input methods" instead of above it.
     Nudged up 2px from the desktop top value too, per mobile review. */
  .fcs-idea__accent {
    left: 1.5rem;
    top: 0.0625rem;
  }

  .fcs-idea__img {
    flex: 0 0 auto;
    width: 100%;
    max-width: 22rem;
    align-self: center;
  }

  /* Below ~900px, .fcs-idea__steps becomes a horizontally swipeable,
     pure-CSS scroll-snap carousel — each .fcs-idea__step (number+label+
     its own mockup) is one full card instead of desktop's display:contents
     split across two grid rows. Cards are sized to ~85% of the viewport
     so the next one peeks in from the right as a swipe affordance. */
  .fcs-idea__steps {
    display: flex;
    gap: 1rem;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    /* Hide the scrollbar visually while keeping the scroll functional. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .fcs-idea__steps::-webkit-scrollbar {
    display: none;
  }

  .fcs-idea__step {
    display: flex;
    flex: 0 0 85%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    scroll-snap-align: start;
  }

  .fcs-idea__method {
    height: auto;
  }

  .fcs-idea__mockup {
    width: 100%;
    max-width: 16rem;
    height: auto;
    margin-top: 1.5rem;
  }
}

/* ==========================================================================
   PRODUCT FEATURES — Body-Type Detection & Profiling, Style Preference
   Capture, Outfit Recommendation Engine
   ========================================================================== */
.fcs-features {
  display: flex;
  justify-content: center;
}

.fcs-features__frame {
  display: flex;
  width: 77.5rem;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  /* The Figma spec's `gap: -15rem` isn't valid CSS — gaps can't be
     negative — so the overlap between rows is expressed as a negative top
     margin on every row after the first (see .fcs-features__row +). */
}

.fcs-features__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  /* DOM order is always [copy, img]; --flip reverses the visual order so
     the mockup sits on the left without reordering the markup (same pattern
     as .fcs-idea__row). */
}

.fcs-features__row--flip {
  flex-direction: row-reverse;
}

.fcs-features__row+.fcs-features__row {
  /* Equivalent of the Figma `gap: -15rem` between the staggered rows. */
  margin-top: -15rem;
}

.fcs-features__copy {
  display: flex;
  width: 43rem;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.fcs-features__title {
  align-self: stretch;
  margin: 0;
  color: var(--color-ink);
  font-family: Inter, var(--font-body);
  font-size: 3rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.1125rem;
}

.fcs-features__body {
  align-self: stretch;
  margin: 0;
  color: var(--color-ink-muted);
  font-family: Inter, var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

.fcs-features__img {
  /* Figma frames these at 19.99744rem x 44.8125rem and at 20.625rem x
     46.21875rem, but the PNGs are 1648x3236 and 1688x3326 (~1.96 ratio).
     Pinning the listed heights (~2.24 ratio) would vertically stretch the
     baked-in device frame — the same distortion fixed for .fcs-idea__mockup
     — so height stays auto and only the Figma widths drive the size. */
  width: 19.99744rem;
  height: auto;
  flex: 0 0 auto;
  display: block;
}

.fcs-features__img--variant {
  width: 20.625rem;
}

/* Stack the rows below ~900px (same breakpoint as .fcs-idea__row): the
   fixed 43rem text column plus ~20rem mockup overflows narrow viewports. */
@media (max-width: 900px) {

  .fcs-features__row,
  .fcs-features__row--flip {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .fcs-features__row+.fcs-features__row {
    margin-top: 2rem;
  }

  .fcs-features__copy {
    width: 100%;
  }

  .fcs-features__img,
  .fcs-features__img--variant {
    width: min(20.625rem, 100%);
  }
}

/* ==========================================================================
   ACTIONS — View, Save, Regenerate, or Shop Recommended Outfits
   ========================================================================== */
.fcs-actions {
  display: flex;
  justify-content: center;
}

.fcs-actions__frame {
  display: flex;
  width: 77.5rem;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  /* Breathing room from the section above, since none was specified. */
  padding-top: 5rem;
}

.fcs-actions__intro {
  display: flex;
  width: 45.4375rem;
  max-width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

.fcs-actions__title {
  align-self: stretch;
  margin: 0;
  color: var(--color-ink);
  text-align: center;
  font-family: Inter, var(--font-body);
  font-size: 3rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.1125rem;
}

.fcs-actions__body {
  align-self: stretch;
  margin: 0;
  color: var(--color-ink-muted);
  text-align: center;
  font-family: Inter, var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

.fcs-actions__mockups {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  /* Exactly 60px between mockups: the phones are sized to fill the rest of
     the row via calc, so space-between resolves to exactly this gap (2 gaps
     of 3.75rem). */
  gap: 3.75rem;
}

.fcs-actions__mockup {
  /* Width sized so the three phones plus the two fixed 60px gaps exactly
     fill the stretched row (space-between then leaves a true 60px between
     each). Height is auto: the source PNGs are 1776x3427 (~1.93 ratio), so
     pinning a fixed height would stretch the baked-in device frame. */
  flex: 1 1 0;
  max-width: 23.3334rem;
  height: auto;
  display: block;
}

/* Stack below ~900px, matching the breakpoint used throughout this page. */
@media (max-width: 900px) {
  .fcs-actions__mockups {
    flex-direction: column;
    gap: 2rem;
  }

  .fcs-actions__mockup {
    flex: 0 0 auto;
    width: min(20rem, 100%);
    height: auto;
  }
}

/* Mobile only — hide the sections between the "mockup before the multiple
   input methods" and the "Graceful Loading & Feedback Flows" section that
   are still pending re-uploaded mobile content. .fcs-idea's own mobile
   carousel is finished and verified aligned, so it now ships on mobile;
   .fcs-features/.fcs-actions stay hidden until their mobile content is
   ready. Desktop keeps the full build throughout. */
@media (max-width: 900px) {

  .fcs-features,
  .fcs-actions {
    display: none;
  }
}

/* ==========================================================================
   GRACEFUL LOADING & FEEDBACK FLOWS
   ========================================================================== */
.fcs-feedback {
  /* Exact Figma spec for this section's container. */
  display: flex;
  width: 49.125rem;
  max-width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  margin: 0 auto;
  position: relative;
  /* Breathing room above (no spacing was specified) and below so the
     absolutely-positioned curve + CTA never clip. */
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.fcs-feedback__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
}

.fcs-feedback__title {
  align-self: stretch;
  margin: 0;
  color: var(--color-ink);
  text-align: center;
  font-family: Inter, var(--font-body);
  font-size: 48px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.1125rem;
}

.fcs-feedback__body {
  align-self: stretch;
  margin: 0;
  color: var(--color-ink-muted);
  text-align: center;
  font-family: Inter, var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

.fcs-feedback__mockups {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.fcs-feedback__mockup {
  /* Width unspecified — sized so two phones sit beside the text block.
     Height is auto: the source PNGs (1716x3264 ~1.90, 1674x3262 ~1.95)
     would be stretched by a pinned height. */
  width: 15rem;
  height: auto;
  flex: 0 0 auto;
  display: block;
}

/* Dotted curve decoration on the right — exact Figma positioning. */
.fcs-feedback__curve {
  position: absolute;
  width: 24.50006rem;
  height: 12.50394rem;
  right: -13.87506rem;
  bottom: 16.21681rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Note + button grouped together. The group is the positioning origin for
   the curve's tail, which dangles underneath so it points into the button.
   Pinned to the .fcs-feedback__curve box's lower-left (where the dotted
   line's end dangles). */
.fcs-feedback__cta-group {
  position: absolute;
  left: 1.25rem;
  bottom: 11rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

/* Sits directly above .fcs-feedback__cta with a 6px gap. */
.fcs-feedback__note {
  color: var(--color-ink-muted);
  font-family: Inter, var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.fcs-feedback__curve-rot {
  display: flex;
  width: 7.5625rem;
  /* Rotated near-vertical before — reads as a tight squiggle sitting next
     to the button instead of an arrow sweeping over from the phone's
     loading animation to the button. Laid closer to horizontal and
     shifted left so it visually spans that distance. */
  transform: rotate(-14deg) translate(-165px, -52px);
  padding: 0.42731rem 0.54156rem 0.18313rem 0.6245rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fcs-feedback__curve-svg {
  width: 12.39644rem;
  height: 15.56713rem;
}

/* Video CTA points at by the curve's tail. Sits in flow inside
   .fcs-feedback__cta-group, pinned to the group's lower-left where the
   dotted line's end dangles. */
.fcs-feedback__cta {
  display: flex;
  height: 3.3125rem;
  padding: 0 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 6.25rem;
  background: #FAF9F6;
  border: 1px solid #071A18;
  box-shadow: 2px 2px 0 0 #A5D553;
  color: #071A18;
  font-family: Inter, var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.1125rem;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

.fcs-feedback__cta:hover {
  box-shadow: 4px 4px 0 0 #A5D553;
}

.fcs-feedback__cta-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

/* The icon's paths carry a hardcoded light stroke (#E4FFF2) inline, made
   for the button's old dark background — override to match the new
   light button so it doesn't disappear against it. */
.fcs-feedback__cta-icon path {
  stroke: #071A18;
}

/* Stack below ~900px, matching the breakpoint used throughout this page.
   The decorative curve is desktop flourish and can't follow the stacked
   layout cleanly, so it drops out on small screens — but the CTA it holds
   stays in normal flow, centered under the mockups. */
@media (max-width: 900px) {
  .fcs-feedback__title {
    font-size: 38px;
  }

  .fcs-feedback__mockups {
    flex-wrap: wrap;
    row-gap: 1rem;
  }

  .fcs-feedback__mockup {
    width: 40%;
    max-width: 12rem;
    min-width: 8rem;
  }

  .fcs-feedback__curve {
    position: static;
    width: auto;
    height: auto;
    right: auto;
    bottom: auto;
    display: flex;
    justify-content: center;
  }

  .fcs-feedback__cta-group {
    position: static;
    align-self: center;
    align-items: center;
  }

  .fcs-feedback__curve-rot {
    display: none;
  }

  .fcs-feedback__cta {
    align-self: center;
  }
}

/* ==========================================================================
   MOBILE FLOW (fashion case study) — external flex container for the
   section following Graceful Loading & Feedback Flows. Inner items are
   uploaded/built separately (TODO). Spec from the user:
   display:flex / width:27.5rem / padding:3rem 1.5rem / flex-direction:column
   / align-items:flex-start / gap:3.5625rem. Hidden on desktop.
   ========================================================================== */
.fcs-flow {
  display: none;
}

.fcs-flow__intro {
  display: none;
}

@media (max-width: 900px) {
  .fcs-flow {
    display: flex;
    width: 27.5rem;
    max-width: 100%;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.5625rem;
  }

  /* First flex group at the top of .fcs-flow — spec from the user:
     display:flex / width:22.5625rem / flex-direction:column /
     align-items:flex-start / gap:1rem. Mobile only. */
  .fcs-flow__intro {
    display: flex;
    width: 22.5625rem;
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .fcs-flow__button {
    display: inline-flex;
    padding: 1rem 2rem;
    align-items: center;
    gap: 1.25rem;
    border-radius: 3.375rem;
    background: #6B34A3;
    border: none;
    cursor: pointer;
  }

  .fcs-flow__button-text {
    color: #E4FFF2;
    font-family: Inter, var(--font-body);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.0625rem;
  }

  .fcs-flow__button-icon {
    width: 1.75rem;
    height: 1.75rem;
    aspect-ratio: 1/1;
    flex-shrink: 0;
  }

  .fcs-flow__desc {
    align-self: stretch;
    margin: 0;
    color: var(--color-ink-muted);
    font-family: Inter, var(--font-body);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.1125rem;
  }

  /* "Multiple input methods" block — spec from the user: column flex,
     flex-start, 0.75rem gap, align-self stretch. Mobile only. */
  .fcs-flow__methods {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    align-self: stretch;
  }

  /* Decorative accent line anchored to the top of the block — spec from
     the user: absolute, 6.25rem × 0.375rem, green #008944, fully rounded
     ends. top derives from the line's own height so its bottom edge just
     touches the top of the "Multiple input methods" title (-0.375rem line
     height → bottom edge sits at the title's top edge). */
  .fcs-flow__methods-line {
    position: absolute;
    width: 6.25rem;
    height: 0.375rem;
    left: -0.125rem;
    top: -0.375rem;
    border-radius: 999px;
    background: #008944;
  }

  .fcs-flow__methods-title {
    align-self: stretch;
    margin: 0;
    color: var(--color-ink);
    font-family: Inter, var(--font-body);
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.1125rem;
  }

  .fcs-flow__methods-desc {
    align-self: stretch;
    margin: 0;
    color: var(--color-ink-muted);
    font-family: Inter, var(--font-body);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.1125rem;
  }

  /* Mockup below the "Multiple input methods" text group — spec from the
     user. The parent .fcs-flow gap is 3.5625rem, so a -0.5625rem top
     margin nets this down to the requested 3rem gap from the text group. */
  .fcs-flow__mockup {
    width: 17.46875rem;
    height: 33.60938rem;
    flex-shrink: 0;
    display: block;
    align-self: center;
    margin-top: -0.5625rem;
  }

  /* Swipeable carousel of the three input-method cards — spec from the
     user. Container: 24.5rem wide flex row, 1rem gap; at rest it shows the
     first card fully and cuts the second at ~9rem to hint at a third card.
     Inherits the same pure-CSS scroll-snap technique as .fcs-idea__steps. */
  .fcs-flow__carousel {
    display: flex;
    width: 24.5rem;
    max-width: 100%;
    height: 34.6875rem;
    align-items: start;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .fcs-flow__carousel::-webkit-scrollbar {
    display: none;
  }

  .fcs-flow__step {
    display: flex;
    width: 14.8125rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .fcs-flow__step-num {
    color: var(--color-ink);
    font-family: Inika, serif;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.03125rem;
  }

  .fcs-flow__step-label {
    align-self: stretch;
    color: #959595;
    font-family: Inter, var(--font-body);
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.1125rem;
  }

  .fcs-flow__step-label--small {
    font-size: 1.5rem;
  }

.fcs-flow__step-mock {
    width: 12.375rem;
    height: 26.8875rem;
    display: block;
  }

  /* "Body-Type Detection & Profiling" block — spec from the user:
     24.5rem column, center-aligned, 3rem gap between text group and
     mockup (the accent line is decoratively positioned, see below).
     Mobile only. */
  .fcs-flow__profiling {
    display: flex;
    width: 24.5rem;
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }

  /* Accent line — same treatment as .fcs-flow__methods-line: absolutely
     positioned over the text group's top-left, bottom edge just touching
     the title and left-aligned with it. */
  .fcs-flow__profiling-line {
    position: absolute;
    width: 6.25rem;
    height: 0.375rem;
    left: -0.125rem;
    top: -0.375rem;
    border-radius: 999px;
    background: #008944;
  }

  .fcs-flow__profiling-text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    align-self: stretch;
  }

  .fcs-flow__profiling-title {
    align-self: stretch;
    margin: 0;
    color: var(--color-ink);
    font-family: Inter, var(--font-body);
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.1125rem;
  }

  .fcs-flow__profiling-desc {
    align-self: stretch;
    margin: 0;
    color: var(--color-ink-muted);
    font-family: Inter, var(--font-body);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.0625rem;
  }

  .fcs-flow__profiling-mock {
    width: 16.99813rem;
    height: 33.60938rem;
    display: block;
  }
}

/* ==========================================================================
   DETAILS — Desktop + mobile images (padded 100px / 24px)
   ========================================================================== */
.fcs-details {
  display: flex;
  justify-content: center;
}

.fcs-details__frame {
  display: flex;
  width: 90rem;
  max-width: 100%;
  padding: 0 6.25rem 0 6.25rem;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* The mock images have a transparent background with a baked-in dark-gray
   heading (not real DOM text, so it can't follow the theme toggle) — give
   the frame a fixed light background so that heading stays legible in
   dark mode instead of nearly disappearing against the page's near-black
   surface. */
html[data-theme="dark"] .fcs-details__frame {
  background: #FAF9F6;
  border-radius: 1.75rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.fcs-details__mock {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.fcs-details__mock--mobile {
  display: none;
}

@media (max-width: 900px) {
  .fcs-details__frame {
    width: 27.5rem;
    padding: 0 1.5rem;
    flex-direction: column;
    align-items: center;
    gap: 0.45831rem;
  }

  .fcs-details__mock--desktop {
    display: none;
  }

  html[data-theme="dark"] .fcs-details__frame {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .fcs-details__mock--mobile {
    display: block;
  }
}

/* ==========================================================================
   PROGRESSION
   ========================================================================== */
.fcs-progression {
  display: flex;
  justify-content: center;
}

.fcs-progression__frame {
  /* Exact Figma spec — desktop container. */
  display: flex;
  width: 90rem;
  max-width: 100%;
  padding: 6rem 6.25rem 0 6.25rem;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Placeholder wiring — images only for now. TODO: build section properly.
   Images span full screen width (full-bleed), regardless of the frame's
   own max-width. */
.fcs-progression__mock {
  display: block;
  width: 100vw;
  height: auto;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

.fcs-progression__mock--mobile {
  display: none;
}

@media (max-width: 900px) {
  .fcs-progression__frame {
    /* Exact Figma spec — mobile container. */
    width: 27.5rem;
    padding: 6rem 1.90975rem 0 1.90975rem;
    flex-direction: column;
    align-items: center;
    gap: 0.45831rem;
  }

  .fcs-progression__mock--desktop {
    display: none;
  }

  .fcs-progression__mock--mobile {
    display: block;
  }
}

/* ==========================================================================
   CONSTRAINTS & CHALLENGES
   ========================================================================== */
.fcs-constraints {
  display: flex;
  justify-content: center;
}

.fcs-constraints__frame {
  display: flex;
  width: 100%;
  padding: 6.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  background: var(--color-bg);
}

.fcs-constraints__intro {
  display: flex;
  width: 29.75rem;
  max-width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.75rem;
}

.fcs-constraints__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 5.9375rem;
  background: #3F19AB;
  cursor: pointer;
}

.fcs-constraints__button-text {
  color: #E4FFF2;
  font-family: Inter, var(--font-body);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.fcs-constraints__icon {
  width: 1.25rem;
  height: 1.25rem;
  aspect-ratio: 1/1;
  flex-shrink: 0;
}

.fcs-constraints__body {
  margin: 0;
  color: var(--color-ink-muted);
  font-family: Inter, var(--font-body);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

.fcs-constraints__grid {
  display: flex;
  padding: 1rem 0;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 3rem 1.5rem;
  align-self: stretch;
  flex-wrap: wrap;
}

.fcs-constraints__card {
  position: relative;
  display: flex;
  width: 20.0625rem;
  height: 25rem;
  padding: 4.45938rem 1.25rem 4.02125rem 1.25rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.fcs-constraints__card--1 {
  background: #E2D9FF;
}

.fcs-constraints__card--2 {
  background: #FFD6E8;
}

.fcs-constraints__card--3 {
  background: #D9F5C8;
}

.fcs-constraints__card--4 {
  background: #C7E8F5;
}

.fcs-constraints__card--5 {
  background: #FFEB8A;
}

.fcs-constraints__card--6 {
  background: #EDE4FF;
}

.fcs-constraints__star {
  display: flex;
  width: 3.375rem;
  height: 3.375rem;
  transform: rotate(-10deg);
  justify-content: center;
  align-items: center;
  position: absolute;
  left: -1.33006rem;
  top: -1.32981rem;
  border-radius: 1.6875rem;
}

.fcs-constraints__star svg {
  width: 1.62538rem;
  height: 1.62538rem;
  flex-shrink: 0;
}

.fcs-constraints__card--1 .fcs-constraints__star {
  background: #351A7A;
}

.fcs-constraints__card--2 .fcs-constraints__star {
  background: #5C1030;
}

.fcs-constraints__card--3 .fcs-constraints__star {
  background: #14401F;
}

.fcs-constraints__card--4 .fcs-constraints__star {
  background: #0F2E3D;
}

.fcs-constraints__card--5 .fcs-constraints__star {
  background: #3D3D0F;
}

.fcs-constraints__card--6 .fcs-constraints__star {
  background: #351A7A;
}

.fcs-constraints__num {
  width: 22.0625rem;
  max-width: 100%;
  color: #1F0D40;
  font-family: 'Inika', serif;
  font-size: 6rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03125rem;
}

.fcs-constraints__card--2 .fcs-constraints__num,
.fcs-constraints__card--2 .fcs-constraints__title {
  color: #4A0817;
}

.fcs-constraints__card--3 .fcs-constraints__num,
.fcs-constraints__card--3 .fcs-constraints__title {
  color: #123305;
}

.fcs-constraints__card--5 .fcs-constraints__num,
.fcs-constraints__card--5 .fcs-constraints__title {
  color: #373203;
}

.fcs-constraints__card--2 .fcs-constraints__desc {
  color: #5A0F22;
}

.fcs-constraints__card--3 .fcs-constraints__desc {
  color: #184209;
}

.fcs-constraints__card--5 .fcs-constraints__desc {
  color: #373203;
}

.fcs-constraints__title {
  align-self: stretch;
  margin: 0.5rem 0 0;
  color: #1F0D40;
  font-family: Inter, var(--font-body);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.61rem;
  letter-spacing: -0.0375rem;
}

.fcs-constraints__desc {
  align-self: stretch;
  margin: 0.75rem 0 0;
  color: #2D1A54;
  font-family: 'Montserrat', var(--font-body);
  font-size: 0.91875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.51813rem;
}

@media (max-width: 900px) {
  .fcs-constraints__frame {
    padding: 1.5rem;
  }
}

/* ==========================================================================
   WHAT I LEARNED & WHAT'S NEXT
   ========================================================================== */
.fcs-learned {
  display: flex;
  justify-content: center;
}

.fcs-learned__frame {
  display: flex;
  width: 47.5625rem;
  max-width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.25rem;
  padding: 6.25rem 1.5rem;
}

.fcs-learned__header {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 0.75rem;
}

.fcs-learned__icon {
  width: 7.5rem;
  height: 7.5rem;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.fcs-learned__heading {
  flex: none;
  margin: 0;
  color: var(--color-ink);
  text-align: center;
  font-family: Inter, var(--font-body);
  /* Matches the "Thanks for reading" title size on desktop + mobile. */
  font-size: 2.75625rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.1125rem;
}

.fcs-learned__list {
  display: flex;
  width: 38.75rem;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.fcs-learned__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
}

.fcs-learned__item-heading {
  align-self: stretch;
  margin: 0;
  color: var(--color-ink);
  text-align: center;
  font-family: Inter, var(--font-body);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

.fcs-learned__item-body {
  align-self: stretch;
  margin: 0;
  color: var(--color-ink-muted);
  text-align: center;
  font-family: Inter, var(--font-body);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

/* Final Reflection block (education page) reuses .fcs-learned wholesale —
   just a second header+list pair right after the main list, so it stays
   pixel-consistent with "What I Learned" instead of a distinct treatment. */
.fcs-learned__header--reflection {
  margin-top: 0.75rem;
}

@media (max-width: 900px) {
  .fcs-learned__frame {
    padding: 4rem 1.5rem;
  }

  .fcs-learned__header {
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
  }

  .fcs-learned__icon {
    width: 4rem;
    height: 4rem;
  }

  .fcs-learned__heading {
    flex: none;
    min-width: 0;
    /* Same size as the "Thanks for reading" title at every viewport. */
    font-size: 2.75625rem;
  }
}

/* ==========================================================================
   RESPONSIVE — Full story: below ~1300px the 1240px absolute canvas no
   longer fits, so the cards fall back to a normal-flow, single-column
   stack. Decorative curves are desktop-only flourish and are hidden here.
   ========================================================================== */
@media (max-width: 1300px) {
  .fs-canvas {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
  }

  .fs-curve {
    display: none;
  }

  .fs-card {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin-top: 20px;
  }

  .fs-card__number {
    left: 0;
    top: -20px;
  }

  .fs-chip--float {
    position: static;
    display: inline-flex;
  }
}

/* ==========================================================================
   CASE STUDY — Visual Showcase / The Solution Section
   ========================================================================== */
.cs-visuals {
  display: flex;
  width: 100%;
  padding: 100px 24px 120px 24px;
  flex-direction: column;
  align-items: center;
  background: #081B19;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 45px 45px;
  overflow: hidden;
  box-sizing: border-box;
  font-family: var(--font-body);
}

.cs-visuals__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  position: relative;
}

/* Solution Banner Card */
.cs-visuals__banner {
  display: flex;
  width: 100%;
  padding: 48px 56px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 28px;
  background: #A5D553;
  box-sizing: border-box;
  margin-bottom: 80px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.cs-visuals__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: #081B19;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 24px;
}

.cs-visuals__badge-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

.cs-visuals__title {
  align-self: stretch;
  color: #013131;
  font-family: Inter, var(--font-body);
  font-size: 2rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.1125rem;
  margin: 0 0 16px 0;
}

.cs-visuals__desc {
  align-self: stretch;
  color: #0B2A17;
  font-family: Inter, var(--font-body);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.0625rem;
  max-width: 680px;
  margin: 0;
}

/* Showcase Desktop Canvas */
.cs-visuals__showcase {
  position: relative;
  width: 100%;
  height: 1100px;
}

.cs-visuals__phone {
  position: absolute;
  width: 320px;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7);
  background: #000;
  z-index: 2;
}

.cs-visuals__phone img,
.cs-visuals__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Search Screen Position */
.cs-visuals__phone--search {
  left: 30px;
  top: 0;
}

.cs-visuals__callout--search {
  position: absolute;
  left: 390px;
  top: 20px;
  width: 20.41525rem;
  transform: rotate(5deg);
  z-index: 2;
}

.cs-visuals__curve--search {
  position: absolute;
  left: 270px;
  top: 100px;
  width: 120px;
  pointer-events: none;
  z-index: 3;
}

/* Results Screen Position */
.cs-visuals__phone--results {
  left: 400px;
  top: 360px;
}

/* The results showcase is a clean wide screenshot (spotify-results.png),
   not a phone mockup — display it without the phone-frame background. */
.cs-visuals__phone--results {
  width: 24.375rem;
  height: 46.51344rem;
  aspect-ratio: 98/187;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: none;
}

.cs-visuals__phone--results img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-visuals__callout--results {
  position: absolute;
  left: 30px;
  top: 820px;
  width: 20.41525rem;
  transform: rotate(5deg);
  z-index: 2;
}

.cs-visuals__curve--results {
  position: absolute;
  left: 350px;
  top: 835px;
  width: 145px;
  pointer-events: none;
  z-index: 3;
}

/* Loading Screen Position */
.cs-visuals__phone--loading {
  right: 30px;
  top: 90px;
}

.cs-visuals__callout--loading {
  position: absolute;
  right: 20px;
  top: 810px;
  width: 300px;
  z-index: 2;
}

.cs-visuals__curve--loading {
  position: absolute;
  right: 170px;
  top: 650px;
  width: 7.5625rem;
  height: 11.68694rem;
  transform: rotate(90deg);
  pointer-events: none;
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Callout Typography */
.cs-visuals__callout-title {
  color: #A5D553;
  font-family: Inter, var(--font-body);
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.1125rem;
  margin: 0 0 12px 0;
}

.cs-visuals__callout-text {
  color: #E4FFF2;
  font-family: Inter, var(--font-body);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.0625rem;
  margin: 0;
}

/* ---- Responsive — Search, Loading and Results: the desktop showcase is
   an absolute-positioned 1100px-tall canvas (phones/callouts/curves all
   pinned by px offsets), which has no mobile equivalent. Below 900px,
   drop the canvas and stack each item (phone, then heading, then body)
   in normal flow; the connecting curve doodles are desktop-only flourish
   and are hidden, same pattern used for .fs-curve / .cs-curve. ---- */
@media (max-width: 900px) {
  .cs-visuals {
    padding: 4rem 1.25rem 5rem;
  }

  .cs-visuals__banner {
    padding: 2rem 1.5rem;
    margin-bottom: 3rem;
  }

  .cs-visuals__title {
    font-size: 1.5rem;
  }

  .cs-visuals__showcase {
    height: auto;
  }

  .cs-visuals__item {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .cs-visuals__item+.cs-visuals__item {
    margin-top: 3.5rem;
  }

  .cs-visuals__phone {
    position: static;
    width: 100%;
    max-width: 20rem;
    margin: 0 auto 1.5rem;
  }

  .cs-visuals__phone--results {
    width: 100%;
    max-width: 15.625rem;
    height: auto;
    aspect-ratio: 98/187;
  }

  .cs-visuals__callout {
    position: static;
    width: 100%;
    max-width: 26rem;
    transform: none;
  }

  .cs-visuals__curve {
    display: none;
  }
}

/* ==========================================================================
   CONCLUSION SECTION
   ========================================================================== */
.cs-conclusion {
  display: flex;
  width: 100%;
  padding: 6rem 1.5rem;
  justify-content: center;
  align-items: center;
  background: var(--color-bg);
  box-sizing: border-box;
}

.cs-conclusion__container {
  display: flex;
  max-width: 31.25rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
  margin: 0 auto;
}

.cs-conclusion__icon {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  margin-bottom: 0.25rem;
}

.cs-conclusion__title {
  align-self: stretch;
  color: var(--color-ink);
  text-align: center;
  font-family: Inter, var(--font-body);
  /* Matches the "Thanks for reading" title size. */
  font-size: 2.75625rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.1125rem;
  margin: 0;
}

.cs-conclusion__desc {
  align-self: stretch;
  color: #9A9A9A;
  text-align: center;
  font-family: Inter, var(--font-body);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.0625rem;
  margin: 0;
}

/* ==========================================================================
   THANKS FOR READING & FOOTER NAVIGATION SECTION
   ========================================================================== */
.cs-thanks {
  display: flex;
  width: 100%;
  padding: 4rem 1.5rem 4rem 1.5rem;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  background: var(--color-bg-alt);
  box-sizing: border-box;
}

/* Match the "Thanks for reading" section to the footer background per page.
   Spotify's footer (and thanks section) use --color-bg-alt; the fashion
   page's footer falls back to the shared --color-bg. */
#page-fashion-case-study:not([hidden]) .cs-thanks {
  background: var(--color-bg);
}

/* LilyAI's and VantageAI's "Thanks for reading" sit flush against the
   footer with no gap between them on desktop (the section's own bottom
   padding reads as internal breathing room, not separation from what
   follows) — add space between the two on desktop only. */
@media (min-width: 901px) {
  #page-education-case-study:not([hidden]) .cs-thanks {
    margin-bottom: 3rem;
  }

  #page-vantageai-case-study:not([hidden]) .cs-thanks {
    margin-bottom: 4rem;
  }
}

.cs-thanks__container {
  display: flex;
  max-width: 31.25rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
  margin: 0 auto;
}

.cs-thanks__icon {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  margin-bottom: 0.5rem;
}

.cs-thanks__title {
  color: var(--color-ink);
  text-align: center;
  font-family: Inter, var(--font-body);
  font-size: 2.75625rem;
  font-style: normal;
  font-weight: 500;
  line-height: 3rem;
  letter-spacing: -0.1125rem;
  align-self: stretch;
  margin: 0 0 1rem 0;
}

.cs-thanks__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 14rem;
}

.cs-thanks__btn {
  display: flex;
  padding: 1rem 1.86188rem 1rem 1.86rem;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  align-self: stretch;
  border-radius: 1.5rem;
  background: var(--color-surface);
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.10);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cs-thanks__btn:hover {
  transform: translateY(-2px);
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.12);
}

.cs-thanks__btn span {
  color: var(--color-ink-muted);
  font-family: Inter, var(--font-body);
  font-size: 0.925rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.3rem;
}

.cs-thanks__btn svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* ==========================================================================
   RESPONSIVE — Visual Showcase
   ========================================================================== */
@media (max-width: 1100px) {
  .cs-visuals {
    padding: 64px 20px 80px 20px;
  }

  .cs-visuals__banner {
    padding: 36px 28px;
    border-radius: 22px;
    margin-bottom: 56px;
  }

  .cs-visuals__showcase {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
  }

  .cs-visuals__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 420px;
  }

  .cs-visuals__phone {
    position: static;
    width: 100%;
    max-width: 320px;
  }

  .cs-visuals__phone--results {
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    background: none;
  }

  .cs-visuals__phone--results img {
    height: 100%;
    object-fit: cover;
  }

  .cs-visuals__callout {
    position: static;
    width: 100%;
    text-align: center;
    transform: none;
  }

  .cs-visuals__curve {
    display: none;
  }
}

/* ==========================================================================
   RESPONSIVE — Mobile
   ========================================================================== */
@media (max-width: 768px) {
  .cs-thanks {
    padding: 2rem 1.5rem;
  }

  /* Hide the desktop showcase and meta card on mobile — replaced by cs-mobile-hero */
  .cs-hero .section-container>.cs-showcase,
  .cs-hero__card {
    display: none;
  }

  /* Full-bleed mobile hero — remove cs-hero side padding and container padding */
  .cs-hero {
    padding: 0;
  }

  .cs-hero .section-container {
    padding: 0;
    gap: 0;
  }

  /* Hide desktop labels & curves on mobile */
  .cs-label,
  .cs-curve {
    display: none;
  }

  /* Show mobile-only hero block */
  .cs-mobile-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  /* Green hero card — exact Figma CSS */
  .cs-mobile-hero__card {
    display: flex;
    width: 27.5rem;
    max-width: 100%;
    padding: 5rem 1.5rem 3rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    border-radius: 0 0 0.875rem 0.875rem;
    background: #A5D553;
    box-sizing: border-box;
  }

  .cs-mobile-hero__text {
    color: #013131;
    font-family: Inter, var(--font-body);
    font-size: 2rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.1125rem;
    width: 23.625rem;
    max-width: 100%;
    margin: 0;
    text-align: left;
  }

  /* Video mockup below the green card */
  .cs-mobile-hero__mockup {
    border-radius: 2.25rem;
    width: 27.5rem;
    max-width: 100%;
    height: 54.4375rem;
    object-fit: cover;
    display: block;
  }

  .site-header {
    padding: 14px 16px;
  }

  .fs {
    padding: 72px 20px;
  }

  .fs-card {
    padding: 28px 20px;
  }

  .nav-links .nav-link:nth-child(3) {
    display: none;
    /* hide "about" on small nav */
  }

  .hero {
    min-height: auto;
    padding-top: 110px;
    padding-bottom: 3rem;
  }

  .hero__text {
    padding: 0 20px;
  }

  .hero__sub {
    font-size: 18px;
  }

  /* Mobile: let the copy flow naturally instead of forcing the second
     sentence onto its own line. */
  .hero__sub-line {
    display: inline;
  }

  .hero__showcase {
    margin-top: -4px;
    padding: 8px 0 2rem;
    /* 2rem here + the whatido section's 0.5rem top padding = 2.5rem gap
       between the marquee and the "What I Do" pills on small phones. */
  }

  .hero__card {
    width: clamp(110px, 30vw, 160px);
    margin-inline-end: -8px;
  }

  .hero__card--wide {
    width: clamp(200px, 58vw, 300px);
  }

  .section-container {
    padding: 0 20px;
  }

  .projects {
    padding: 1.5rem 0 72px;
  }

  .projects__badge {
    margin-bottom: 36px;
  }

  .projects__grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .project-card__title {
    max-width: none;
  }

  .skills {
    padding: 72px 0;
    background-size: 32px 32px;
  }

  .skills__badge {
    margin-bottom: 36px;
  }

  .skills__grid {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 56px;
  }

  .skills__card {
    padding: 32px 28px;
  }

  .skills__card--tools {
    width: 100%;
    flex-shrink: 1;
  }

  .skills__card--bonuses {
    flex: none;
  }

  .skills__icons {
    gap: 16px;
  }

  .skills__icons svg {
    width: 38px;
    height: 38px;
  }

  .skills__memoji-wrap {
    margin-bottom: 48px;
  }

  .skills__pills {
    gap: 14px 10px;
    --yoff-scale: 0.12;
  }

  .skill-pill {
    width: auto;
    height: auto;
    padding: 11px 20px;
    font-size: 13.5px;
    letter-spacing: -0.06em;
  }

  .testimonials {
    padding: 72px 0;
  }

  .testimonials__row {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .testimonials__col--right {
    flex: none;
  }

  .testimonials__divider {
    display: none;
  }

  .testimonial-card--green,
  .testimonial-card--yellow {
    width: 100%;
    height: auto;
    padding: 24px;
  }

  .testimonial-card__quote {
    font-size: 4.5rem;
    line-height: 4.5rem;
    top: 14px;
    right: 18px;
  }

  .about {
    padding: 72px 0;
  }

  .about__row {
    flex-direction: column;
    gap: 40px;
  }

  .about__intro {
    align-items: center;
    width: 100%;
  }

  .about__headline {
    align-items: center;
    text-align: center;
    font-size: clamp(32px, 8vw, 44.1px);
    line-height: 1.1;
  }

  .about__photo {
    width: clamp(220px, 60vw, 320px);
  }

  .about__content {
    align-items: center;
    width: 100%;
  }

  .about__copy {
    align-items: center;
    text-align: center;
  }

  .about__ctas {
    flex-wrap: wrap;
    justify-content: center;
  }

  .site-footer {
    padding: 48px 0;
  }

  .footer__card {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 32px 24px;
  }

  .footer__left {
    gap: 40px;
    min-height: 0;
    width: 100%;
  }

  .footer__email {
    font-size: 15px;
  }

  .footer-copy-email__label {
    white-space: normal;
    word-break: break-word;
  }
}

@media (max-width: 480px) {
  .nav-name {
    display: none;
  }

  .nav-divider {
    display: none;
  }

  .hero__ctas {
    gap: 10px;
  }

  .btn {
    padding: 12px 20px;
    font-size: 14px;
  }
}

/* ==========================================================================
   EDUCATION CASE STUDY — UI Evolution (full-width image)
   ========================================================================== */
.ecs-ui-evolution {
  width: 100%;
  overflow: hidden;
}

.ecs-ui-evolution__wrap {
  width: 100%;
}

.ecs-ui-evolution__wrap img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ==========================================================================
   EDUCATION CASE STUDY — Constraints and Challenges
   (same card system as fashion .fcs-constraints)
   ========================================================================== */
.ecs-constraints {
  display: flex;
  justify-content: center;
}

.ecs-constraints__frame {
  display: flex;
  width: 100%;
  padding: 6.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  background: var(--color-bg);
}

.ecs-constraints__intro {
  display: flex;
  width: 29.75rem;
  max-width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.75rem;
}

.ecs-constraints__button {
  display: flex;
  padding: 0.75rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border: none;
  border-radius: 5.9375rem;
  background: #013131;
  cursor: pointer;
}

.ecs-constraints__button-text {
  color: #E4FFF2;
  text-align: center;
  font-family: Inter, var(--font-body);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.ecs-constraints__icon {
  width: 1.25rem;
  height: 1.25rem;
  aspect-ratio: 1/1;
  flex-shrink: 0;
}

.ecs-constraints__body {
  margin: 0;
  color: var(--color-ink-muted);
  font-family: Inter, var(--font-body);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.0625rem;
}

.ecs-constraints__grid {
  display: flex;
  padding: 1rem 0;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 3rem 1.5rem;
  align-self: stretch;
  flex-wrap: wrap;
}

.ecs-constraints__card {
  position: relative;
  display: flex;
  width: 20.0625rem;
  height: 25rem;
  padding: 4.45938rem 1.25rem 4.02125rem 1.25rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.ecs-constraints__card--1 {
  background: #E2D9FF;
}

.ecs-constraints__card--2 {
  background: #FFD6E8;
}

.ecs-constraints__card--3 {
  background: #D9F5C8;
}

.ecs-constraints__card--4 {
  background: #C7E8F5;
}

.ecs-constraints__star {
  display: flex;
  width: 3.375rem;
  height: 3.375rem;
  transform: rotate(-10deg);
  justify-content: center;
  align-items: center;
  position: absolute;
  left: -1.33006rem;
  top: -1.32981rem;
  border-radius: 1.6875rem;
}

.ecs-constraints__star svg {
  width: 1.62538rem;
  height: 1.62538rem;
  flex-shrink: 0;
}

.ecs-constraints__card--1 .ecs-constraints__star {
  background: #351A7A;
}

.ecs-constraints__card--2 .ecs-constraints__star {
  background: #5C1030;
}

.ecs-constraints__card--3 .ecs-constraints__star {
  background: #14401F;
}

.ecs-constraints__card--4 .ecs-constraints__star {
  background: #0F2E3D;
}

.ecs-constraints__num {
  width: 22.0625rem;
  max-width: 100%;
  color: #1F0D40;
  font-family: 'Inika', serif;
  font-size: 6rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03125rem;
}

.ecs-constraints__card--2 .ecs-constraints__num,
.ecs-constraints__card--2 .ecs-constraints__title {
  color: #4A0817;
}

.ecs-constraints__card--3 .ecs-constraints__num,
.ecs-constraints__card--3 .ecs-constraints__title {
  color: #123305;
}

.ecs-constraints__card--2 .ecs-constraints__desc {
  color: #5A0F22;
}

.ecs-constraints__card--3 .ecs-constraints__desc {
  color: #184209;
}

.ecs-constraints__title {
  align-self: stretch;
  margin: 0.5rem 0 0;
  color: #1F0D40;
  font-family: Inter, var(--font-body);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.61rem;
  letter-spacing: -0.0375rem;
}

.ecs-constraints__desc {
  align-self: stretch;
  margin: 0.75rem 0 0;
  color: #2D1A54;
  font-family: var(--font-body);
  font-size: 0.91875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.51813rem;
}

@media (max-width: 900px) {
  .ecs-constraints__frame {
    padding: 1.5rem;
  }

  .ecs-constraints__button {
    padding: 0.75rem 1.25rem;
  }

  .ecs-constraints__button-text {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   ACCESSIBILITY — Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

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