/* ==========================================================
style.css — Kim Matthews Portfolio
Order: tokens → base → skip link → header → hero → sections → footer →
responsive
========================================================== */
/* ==========================================================
1. DESIGN TOKENS
Edit values here to update the entire site.
========================================================== */
:root {
  /* Colors */
  --hero-orange: #f7bb43;
  --case-orange: #ce6219;
  --electric-blue: #07a6f7;
  --baby-blue: #0de0fe;
  --white: #ffffff;
  --black: #000000;
  --lightest-orange: #fbf1da;
  --twilight: #4A4E70;
  --twilight-dark: #363957;
  --champagne: #dcc8a8;
  --saffron: #e5a04c;
  /* Fonts */
  --font-display: 'Overpass Mono', monospace;
  --font-label: 'IBM Plex Sans', sans-serif;
  --font-accent: 'Special Elite', 'Courier Prime', monospace;
  /* Type scale */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  /* Layout */
  --maxw: 1440px;
  --header-height: 60px;
  --content-pad: clamp(1rem, 4vw, 3rem);
  /* Step labels — single source of truth for label type size across all 7.
     clamp(min, fluid, max): never smaller than 1.4rem, scales ~2.6% of viewport
     width, capped at 2.6rem on wide monitors. Edit here to resize all labels. */
  --step-label-h: clamp(1.365rem, 2.535vw, 2.535rem);
  /* Largest mobile step flower (step 7) — smaller flowers center within this
     column so all step labels share one left edge */
  --flower-max: 6rem;
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.20);
}
/* ==========================================================
2. BASE
========================================================== */
body {
  font-family: var(--font-label);
  font-size: var(--text-base);
  color: var(--black);
  background-color: var(--white);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.2;
}
a {
  color: inherit;
  text-decoration: none;
}
a:focus-visible {
  outline: 3px solid var(--hero-orange);
  outline-offset: 3px;
  border-radius: 2px;
}
/* ==========================================================
3. SKIP LINK — accessibility
========================================================== */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--twilight);
  color: var(--white);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: 0 0 4px 4px;
}
.skip-link:focus {
  top: 0;
}
.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;
}
/* ==========================================================
4. HEADER
♿ White on Twilight = 5.74:1 contrast — passes WCAG AA
========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background-color: var(--champagne);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--content-pad) var(--space-2);
  height: 100%;
}
.site-title {
  font-family: var(--font-label);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--black);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.site-title:hover {
  opacity: 0.85;
}
.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.primary-nav a {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--black);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-1) 0;
  position: relative;
}
.primary-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--hero-orange);
  transition: width 250ms ease;
}
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after {
  width: 100%;
}
.primary-nav a:hover {
  opacity: 0.85;
}
/* Hamburger — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 110;
}
.bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--black);
  border-radius: 2px;
  transition: transform 250ms ease, opacity 150ms ease;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}
/* ==========================================================
5. HERO
♿ Black on #fbf1da = 17.8:1 — exceeds WCAG AAA
========================================================== */
.hero {
  background-color: var(--lightest-orange);
  background-image: linear-gradient(
  to bottom,
  var(--lightest-orange) 20%,
  var(--hero-orange) 65%
  );
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-x: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  align-items: flex-start;
  gap: 0;
  max-width: var(--maxw);
  margin: -357px auto 0;
  padding: var(--space-2) var(--content-pad);
  width: 100%;
}
/* Empty left column placeholder keeps TV in its column */
.hero-inner::before {
  content: '';
  display: block;
}
/* .hero-text removed — heading is now in .hero-heading-wrap above the grid */
/* Hero heading — full width row above the TV grid */
.hero-heading-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-4) var(--content-pad) 0; /* top reduced from --space-16 — heading sits
  close to header */
}
.hero-heading-svg {
  width: 36.5%; /* 50% smaller than prior 73% — new SVG artwork renders larger */
  max-width: 2250px;
  height: auto;
  display: block;
}
.hero-visual {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.tv-wrapper {
  position: relative;
  width: 100%;
  max-width: 960px;
  cursor: pointer;
  z-index: 3; /* lifts antenna in front of the hero heading instead of behind it */
}
.tv-image {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
  filter: none;
  transition: filter 400ms ease;
}
/* Orange glow on hover and keyboard focus — filter lives on image so transition works */
/* Whole-TV backlit warm glow — hover/focus cue, nothing on the screen itself */
.tv-wrapper:hover .tv-image,
.tv-wrapper:focus-visible .tv-image {
  filter: brightness(1.12) drop-shadow(0 0 35px rgba(247, 187, 67, 0.9)) drop-shadow(0 0 60px
  rgba(247, 187, 67, 0.4));
}
/* Keyboard focus ring — distinct from hover glow, meets WCAG 2.4.11 Focus Appearance */
.tv-wrapper:focus-visible {
  outline: 3px solid var(--hero-orange);
  outline-offset: 6px;
  border-radius: 2px;
}
/* No overlay, no arrow — screen plays clean
♿ Hover/click cue is the whole TV backlit glow; aria-label on .tv-wrapper covers screen
readers */
.tv-screen-overlay {
  position: absolute;
  top: 36%;
  left: 7%;
  width: 65%;
  height: 46%;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}
.tv-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.tv-badge {
  position: absolute;
  top: 87%;
  left: 7%;
  width: 24%;
  cursor: pointer;
}
.tv-badge-svg {
  width: 100%;
  height: auto;
  display: block;
}
.tv-wrapper:hover .tv-badge,
.tv-wrapper:focus-visible .tv-badge {
  opacity: 0.85;
}
/* Hero bottom — margin-top: auto pushes it to foot of hero */
.hero-bottom {
  margin-top: auto;
}
/* subheading1 — centered, tight padding before methodology text */
.hero-subheading {
  display: flex;
  justify-content: center;
  padding: 0; /* removed content-pad so SVG can reach full hero width */
}
/* subheading1 ("The 7-step Process") — scoped to its wrapper so it is sized
independently of the methodology heading, which shares the .subheading-svg
class. clamp() lets it scale ~2X larger with the viewport: never below
480px, ideally ~95% of the hero width, capped near the layout max so it
doesn't overflow on very wide monitors. Adjust the middle value to taste. */
.hero-subheading .subheading-svg {
  width: clamp(480px, 95vw, 1400px);
  max-width: 100%;
  height: auto;
  display: block;
}
.subheading-svg {
  width: 100%; /* fills the full hero container — practical maximum */
  max-width: none; /* overrides reset.css max-width:100% so nothing clamps it */
  height: auto;
  display: block;
}
/* Methodology intro text — centered under subheading1 */
.methodology-text-wrap {
  margin-top: var(--space-2);
  position: relative;
  z-index: 2;
}
.methodology-text-svg {
  display: block;
  width: 81%; /* eased from 93.75% — restores side margins, stays large */
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
/* bloomcta — centered CTA below the three question cards.
Now a sibling after .qa-cards-row, so it spans the inner width and centers.
Desktop width via clamp; mobile width bumped up in the media query. */
.bloom-cta-svg {
  display: block;
  width: clamp(200px, 36%, 520px);
  height: auto;
  margin: var(--space-10) auto 0; /* clearance below cards; centered */
}
/* ==========================================================
Q&A SUBSECTION — within hero, directly under TV
DevTools tuning points:
"¢ .hero-qa margin-top — move qasubheading up/down to align
with TV bottom
"¢ .qa-subheading-svg width — scale heading up/down
"¢ .qa-flower margin-top negative value — controls how deep
the flower overlaps into the bottom of each q card
========================================================== */
.hero-qa {
  width: 100%;
  margin-top: -93px; /* confirmed in DevTools */
  padding: 0 var(--content-pad) var(--space-20);
}
.hero-qa-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  /* Flex column so each child's vertical position can be set with `order`,
  letting desktop and mobile stack the same elements differently.
  Desktop: heading (1) → cards (2) → bloomcta (3, below cards). */
  display: flex;
  flex-direction: column;
}
.qa-subheading-wrap { order: 1; }
.qa-cards-row { order: 2; }
.bloom-cta-svg { order: 3; }
/* qasubheading — very large, left edge matches hero heading margin */
.qa-subheading-wrap {
  margin-top: var(--space-16); /* drops the whole Q&A group down the page (desktop) */
  margin-bottom: 0; /* closed gap to the flower row below (was --space-2) */
}
/* Pull the flower/card row up toward the heading on desktop — closes the gap.
Overridden back to 0 in the mobile media query. */
.qa-cards-row {
  margin-top: calc(var(--space-12) * -1); /* tune in DevTools to close the gap exactly */
}
.qa-subheading-svg {
  display: block;
  /* "Very large" — adjust width in DevTools to taste */
  width: clamp(240px, 38%, 560px);
  height: auto;
  /* No extra left offset needed — hero-qa-inner padding = content-pad,
  same left margin as the hero heading SVG */
}
/* Three q cards evenly distributed across full width */
.qa-cards-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(var(--space-6), 3vw, var(--space-10));
}
/* Each card is an equal third */
.qa-card-wrap {
  flex: 1;
  min-width: 0;
  overflow: visible;
  cursor: pointer;
  position: relative;
}
.qa-card-wrap:focus-visible {
  outline: 3px solid var(--hero-orange);
  outline-offset: 6px;
  border-radius: 2px;
}
/* Card SVG — no hover transform, no filter; the flower is the interactive element */
.qa-card-svg {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
/* Flower — sits at top of card, overlaps card top edge.
pointer-events: auto so JS can catch mouseenter for the silver burst.
Negative margin-bottom pulls the card up into the flower.
Tune margin-bottom in DevTools — bigger negative = more overlap.
Using clamp() so it scales with viewport rather than being a fixed pixel hit. */
.qa-flower {
  display: block;
  width: clamp(160px, 70%, 380px);
  height: auto;
  margin: 0 auto -70px; /* overlap into top of card circle — deepened from -20px; tune in
  DevTools */
  position: relative;
  z-index: 2;
  pointer-events: auto; /* enables hover without breaking click-bubble to parent */
  transition: filter 300ms ease;
}
/* Silver burst on flower hover — same Tinkerbell animation as flowerspine blooms.
drop-shadow follows the flower's alpha channel so it glows around the
flower shape only, never touching the card text below. */
.qa-flower.is-hovering {
  animation: silverGlitterBurst 0.75s ease-out 1 forwards;
}
/* Mobile: stack cards vertically */
@media (max-width: 768px) {
  .hero-qa {
    padding-bottom: var(--space-4); /* tightened from --space-12 — pulls subheading1 up toward the Q3 card */
  }
  .qa-subheading-svg {
    width: 45%; /* substantially smaller on mobile so it doesn't dwarf the hero */
    max-width: 100%;
    margin: var(--space-16) auto 0; /* dropped down toward bloomcta (was --space-8) */
  }
  /* bloomcta readable on mobile — larger share of width than desktop clamp gives.
  Mobile order: heading (1) → bloomcta (2, above cards) → cards (3).
  Desktop keeps bloomcta below the cards via its base order. */
  .bloom-cta-svg {
    order: 2;
    width: 70%;
    max-width: 360px;
    margin: var(--space-4) auto var(--space-6);
  }
  /* Subheading wrap holds qasubheading + bloomcta centered.
  margin-top reset to 0 here so the desktop --space-16 drop doesn't
  leak into mobile (mobile heading spacing is set on .qa-subheading-svg). */
  .qa-subheading-wrap {
    text-align: center;
    margin-top: 0;
    margin-bottom: var(--space-6); /* tighter: brings first card up toward the CTA */
  }
  .qa-cards-row {
    order: 3; /* below bloomcta on mobile (bloomcta is order 2) */
    margin-top: 0; /* reset desktop negative margin — mobile stacks normally */
    flex-direction: column;
    align-items: center; /* center each card when stacked */
    gap: var(--space-4); /* tightened from --space-12 so the three cluster closer */
  }
  .qa-card-wrap {
    width: 60%; /* smaller card footprint on mobile */
    max-width: 320px;
  }
  /* Flowers visible on mobile — perch on top of each card, overlapping
  slightly INTO the top of the circle, above all question text.
  The negative margin-bottom pulls the card up into the flower so the
  flower's lower petals sit over the circle's top edge.
  ── DevTools tuning: make the margin-bottom MORE negative to push the
  flower deeper into the circle, LESS negative to lift it off.
  Adjust width to scale the flower itself. */
  .qa-flower {
    display: block;
    width: 60%; /* tune in DevTools */
    max-width: 220px;
    margin: 0 auto -40px; /* overlap depth — lifted from -90px so flower clears the
    question text; tune in DevTools */
    position: relative;
    z-index: 2;
  }
}
/* Mobile TV + video in hero — hidden on desktop.
Tappable: opens the video modal (wired in video.js). */
.hero-mobile-media {
  display: none;
  cursor: pointer;
  position: relative;
}
.hero-mobile-media:focus-visible {
  outline: 3px solid var(--hero-orange);
  outline-offset: 6px;
  border-radius: 2px;
}
.hero-mobile-tv {
  width: 100%;
  max-width: 130px;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}
.hero-mobile-video {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  border-radius: 4px;
}
/* "Tap to play with sound" cue — soundlabel.svg, centered under the
video preview. Visible only on mobile (parent is display:none on desktop).
Width ≈ 75% of the video's max-width (300px) so it reads as a caption
that belongs to the screen above it. Sits as close under the video as
the parent gap allows. */
.hero-mobile-cue {
  display: block;
  width: 75%;
  max-width: 225px;
  height: auto;
  margin: 0 auto;
}
/* ==========================================================
VIDEO POPUP MODAL
♿ Uses role="dialog", aria-modal, focus trap in video.js
========================================================== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-modal[hidden] {
  display: none;
}
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}
.video-modal-content {
  position: relative;
  z-index: 501;
  width: min(900px, 92vw);
  background: var(--black);
  border: 3px solid var(--twilight);
  box-shadow: var(--shadow-lg);
}
.video-modal-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.25rem;
  cursor: pointer;
  padding: var(--space-2);
  line-height: 1;
  opacity: 0.8;
  transition: opacity 150ms ease;
}
.video-modal-close:hover {
  opacity: 1;
}
.video-modal-close:focus-visible {
  outline: 3px solid var(--hero-orange);
  outline-offset: 3px;
}
.video-modal-frame {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.video-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* ==========================================================
QA TRANSCRIPT MODAL
Wide format to match the open-book density of transcript SVGs.
♿ role="dialog", aria-modal, focus trap in qa.js
========================================================== */
.qa-modal {
  position: fixed;
  inset: 0;
  z-index: 600; /* above video modal (500) */
  display: flex;
  align-items: center;
  justify-content: center;
}
.qa-modal[hidden] {
  display: none;
}
.qa-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.90);
  cursor: pointer;
}
/* Wide container — transcript SVGs are dense open-book spreads */
.qa-modal-content {
  position: relative;
  z-index: 601;
  width: min(1100px, 94vw);
}
.qa-modal-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.25rem;
  cursor: pointer;
  padding: var(--space-2);
  line-height: 1;
  opacity: 0.8;
  transition: opacity 150ms ease;
}
.qa-modal-close:hover {
  opacity: 1;
}
.qa-modal-close:focus-visible {
  outline: 3px solid var(--hero-orange);
  outline-offset: 3px;
}
/* Transcript image fills the modal width — height follows SVG aspect ratio.
Background is lightest-orange so transparent SVGs render correctly
(without this, a transparent SVG reads as black against the dark backdrop) */
.qa-modal-frame {
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.60);
  background-color: var(--lightest-orange);
}
.qa-modal-img {
  display: block;
  width: 100%;
  height: auto;
}
/* ==========================================================
6. METHODOLOGY SECTION
Background: solid case-orange — continues seamlessly from the bottom
of the spine gradient (which resolves to case-orange at its lower edge).
overflow:hidden clips spine at section edges. min-height prevents
collapse while inner is sparse.
♿ Spine and mobile TV are decorative — aria-hidden.
========================================================== */
.methodology {
  background-color: var(--case-orange);
  padding-top: 0;
  padding-bottom: var(--space-20);
  position: relative;
  min-height: clamp(800px, 130vh, 1600px);
}
.methodology-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  position: relative;
  z-index: 2; /* sits above spine (z-index: 1) */
}
/* Section heading — centered, above spine content */
.methodology-heading {
  display: flex;
  justify-content: center;
  padding: 0 var(--content-pad) var(--space-6);
}
/* "The Debrief: Case Studies" — methodology section heading.
   Centered wrapper; SVG sized to match the hero's "7-step Process"
   subheading exactly: clamp(480px, 95vw, 1400px). */
.debrief-heading {
  display: flex;
  justify-content: center;
  padding: 0 var(--content-pad) var(--space-6);
}
.debrief-subheading-svg {
  width: clamp(480px, 95vw, 1400px);
  max-width: 100%;
  height: auto;
  display: block;
}
/* ==========================================================
   CASE STUDY ROWS — 8 asymmetric card pairs below the debrief
   heading. One wide + one narrow card per row, sides swapping
   each row. Colors cycle saffron → electric-blue → baby-blue.
   Cards slide in from the outer edges the first time they
   scroll into view (.is-in added by js/cases.js), then hold.
   Cards are empty shells — case study SVGs drop inside; each
   card is a flex container so a dropped-in SVG centers itself.
========================================================== */
.case-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  margin-top: var(--space-8);
}
.case-row {
  display: flex;
  gap: clamp(var(--space-4), 2vw, var(--space-8));
  align-items: stretch;
}
/* Card shell — generous rounded corners, soft shadow, min-height
   keeps the colored boxes visible; padding frames the title inside */
.case-card {
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  min-height: clamp(220px, 24vw, 320px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(var(--space-4), 3vw, var(--space-8));
}
/* Title SVGs sit INSIDE the visible colored card — sized to a
   comfortable share of the card width, never stretched to fill it */
.case-card img,
.case-card svg {
  width: clamp(160px, 70%, 560px);
  height: auto;
  display: block;
}
/* Asymmetric widths — wide ≈ 62%, narrow ≈ 38% */
.case-card--wide   { flex: 1 1 62%; }
.case-card--narrow { flex: 1 1 38%; }
/* Color cycle */
.case-card--saffron  { background-color: var(--saffron); }
.case-card--electric { background-color: var(--electric-blue); }
.case-card--baby     { background-color: var(--baby-blue); }
/* Slide-in from the outer edges — the hidden starting state only applies
   once js/cases.js has confirmed it is running (it adds .js-anim to body).
   If the script is missing or fails, the boxes are simply visible — the
   section can never render blank. Once .is-in lands, a card settles to
   rest and never moves again. */
.js-anim .case-from-left,
.js-anim .case-from-right {
  opacity: 0;
  transition: opacity 600ms ease-out, transform 600ms ease-out;
  will-change: opacity, transform;
}
.js-anim .case-from-left  { transform: translateX(-64px); }
.js-anim .case-from-right { transform: translateX(64px); }
.js-anim .case-from-left.is-in,
.js-anim .case-from-right.is-in {
  opacity: 1;
  transform: translateX(0);
}
/* Reduced motion — cards simply appear, no slide
   (reset.css also zeroes transition durations globally) */
@media (prefers-reduced-motion: reduce) {
  .js-anim .case-from-left,
  .js-anim .case-from-right {
    transform: none;
  }
}
.subheading-svg {
  width: 65%;
  max-width: 880px;
  height: auto;
  display: block;
}
/* Flowerspine — full width, transparent PNG, no blend mode needed.
   Gradient runs hero-orange (matching the hero ground above) at the top
   down to full case-orange at the spine's bottom edge, so the color deepens
   across the spine and lands on solid case-orange right where the spine ends.
   The methodology section below continues as solid case-orange — no seam. */
.spine-wrap {
  width: 100%;
  position: relative;
  overflow: visible;
  pointer-events: none;
  line-height: 0;
  margin-top: -27px;
  z-index: 1;
  background-image: linear-gradient(
    to bottom,
    var(--hero-orange) 0%,
    var(--case-orange) 100%
  );
}
.spine-img {
  width: 100%;
  height: auto;
  display: block;
}
/* Step labels — absolutely positioned within spine-wrap, each independently movable.
   Sized by HEIGHT, not width: a shared clamp() height gives every label the same
   rendered type size regardless of how long its phrase is. Width is auto, so each
   label takes only the width its own content needs — left edges line up where the
   `left` anchor places them, right edges stay naturally ragged. To scale all seven
   labels up or down at once, edit the single --step-label-h token below. */
.step-label {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  height: var(--step-label-h);
  width: auto;
}
/* SVG fills the container height; width follows its intrinsic aspect ratio */
.step-label-svg {
  height: 100%;
  width: auto;
  display: block;
}
/* Individual label positions — only top/left anchors here.
   Size is uniform via --step-label-h; no per-label width tuning needed.
   Adjust top/left in DevTools, read back values to lock in. */
.step-label--1 { top: 10%; left: 31%; }
.step-label--2 { top: 22%; left: 31%; }
.step-label--3 { top: 26%; left: 31%; }
.step-label--4 { top: 31%; left: 31%; }
.step-label--5 { top: 43%; left: 31%; }
.step-label--6 { top: 43%; left: 57%; }
.step-label--7 { top: 51%; left: 72%; }
/* Step labels are interactive — restore pointer events for all */
.step-label--1,
.step-label--2,
.step-label--3,
.step-label--4,
.step-label--5,
.step-label--6,
.step-label--7 {
  pointer-events: auto;
}
/* Silver Tinkerbell dust — single burst, plays once, holds */
@keyframes silverGlitterBurst {
  0% { filter: drop-shadow(0 0 2px rgba(220,220,240,0.5)); }
  10% { filter: drop-shadow(0 0 30px #F0F0FF) drop-shadow(0 0 60px rgba(210,210,235,0.9))
    brightness(1.65); }
  24% { filter: drop-shadow(0 0 6px rgba(200,200,225,0.4)) brightness(1.05); }
  40% { filter: drop-shadow(0 0 40px #FFFFFF) drop-shadow(0 0 80px rgba(210,210,240,0.75))
    drop-shadow(0 0 14px #E8E8FF) brightness(1.8); }
  56% { filter: drop-shadow(0 0 5px rgba(190,190,220,0.3)); }
  72% { filter: drop-shadow(0 0 22px #E8E8F8) drop-shadow(0 0 44px rgba(200,200,230,0.6))
    brightness(1.45); }
  86% { filter: drop-shadow(0 0 4px rgba(180,180,215,0.25)); }
  100% { filter: drop-shadow(0 0 8px rgba(210,210,235,0.5)); }
}
/* Flower silver burst — Tinkerbell light on the flower */
@keyframes flowerSilverBurst {
  0% { opacity: 0.12; transform: scale(0.8); }
  14% { opacity: 1; transform: scale(1.28); }
  30% { opacity: 0.35; transform: scale(0.92); }
  50% { opacity: 0.98; transform: scale(1.18); }
  70% { opacity: 0.45; transform: scale(0.97); }
  100% { opacity: 0.65; transform: scale(1.0); }
}
/* Step label active — silver glitter burst fires on all labels */
.step-label--1.is-active .step-label-svg,
.step-label--2.is-active .step-label-svg,
.step-label--3.is-active .step-label-svg,
.step-label--4.is-active .step-label-svg,
.step-label--5.is-active .step-label-svg,
.step-label--6.is-active .step-label-svg,
.step-label--7.is-active .step-label-svg {
  animation: silverGlitterBurst 0.75s ease-out 1 forwards;
}
/* Flower hotspot — invisible hover trigger over flower position */
.flower-hotspot {
  position: absolute;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
}
/* ── Hotspot positions — ALL placeholder. Tune each in DevTools.
Selector → adjust top/left/width/height until it covers its bloom exactly. */
.flower-hotspot--1 { top: 0%; left: 1%; width: 14%; height: 22%; }
.flower-hotspot--2 { top: 9%; left: 4%; width: 12%; height: 18%; } /* placeholder */
.flower-hotspot--3 { top: 16%; left: 10%; width: 12%; height: 18%; } /* placeholder */
.flower-hotspot--4 { top: 23%; left: 17%; width: 12%; height: 18%; } /* placeholder */
.flower-hotspot--5 { top: 36%; left: 14%; width: 12%; height: 18%; } /* placeholder */
.flower-hotspot--6 { top: 48%; left: 42%; width: 12%; height: 18%; } /* placeholder */
.flower-hotspot--7 { top: 58%; left: 60%; width: 12%; height: 18%; } /* placeholder */
/* Flower glow overlay — silver-white screen blend, Tinkerbell light */
.flower-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 2;
}
/* ── Glow positions mirror hotspot positions (slightly larger for the halo) */
.flower-glow--1 { top: -1%; left: 0%; width: 16%; height: 24%; }
.flower-glow--2 { top: 8%; left: 3%; width: 14%; height: 20%; } /* placeholder */
.flower-glow--3 { top: 15%; left: 9%; width: 14%; height: 20%; } /* placeholder */
.flower-glow--4 { top: 22%; left: 16%; width: 14%; height: 20%; } /* placeholder */
.flower-glow--5 { top: 35%; left: 13%; width: 14%; height: 20%; } /* placeholder */
.flower-glow--6 { top: 47%; left: 41%; width: 14%; height: 20%; } /* placeholder */
.flower-glow--7 { top: 57%; left: 59%; width: 14%; height: 20%; } /* placeholder */
/* All glows use same radial gradient */
.flower-glow--1,
.flower-glow--2,
.flower-glow--3,
.flower-glow--4,
.flower-glow--5,
.flower-glow--6,
.flower-glow--7 {
  background: radial-gradient(ellipse at center,
  rgba(255,255,255,0.9) 0%,
  rgba(220,220,245,0.55) 40%,
  transparent 72%
  );
  mix-blend-mode: screen;
}
/* is-active fires the Tinkerbell burst on every glow */
.flower-glow--1.is-active,
.flower-glow--2.is-active,
.flower-glow--3.is-active,
.flower-glow--4.is-active,
.flower-glow--5.is-active,
.flower-glow--6.is-active,
.flower-glow--7.is-active {
  opacity: 1;
  animation: flowerSilverBurst 0.75s ease-out 1 forwards;
}
/* Elevate spine-wrap above methodology text when card is open */
.spine-wrap.has-active-card {
  z-index: 3;
}
/* Defcard popup — shared transition */
.step-card {
  position: absolute;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transition: opacity 280ms ease, transform 280ms ease;
  transition-delay: 60ms;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35));
  z-index: 5;
}
.step-card.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  z-index: 200;
}
.step-card-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
/* ── Card positions — ALL placeholder except step 1 (confirmed).
Tune each in DevTools: move popup so it's readable and doesn't
overlap its own flower. Step 1 is the baseline reference. */
.step-card--1 { top: 1%; left: 44%; width: 28%; }
.step-card--2 { top: 17%; left: 44%; width: 28%; } /* aligned to label row; tune in DevTools */
.step-card--3 { top: 24%; left: 44%; width: 28%; }
.step-card--4 { top: 31%; left: 44%; width: 28%; }
.step-card--5 { top: 33%; left: 28%; width: 28%; } /* placeholder */
.step-card--6 { top: 45%; left: 54%; width: 28%; } /* placeholder */
.step-card--7 { top: 55%; left: 66%; width: 28%; } /* placeholder */
/* ── Mobile steps list — hidden on desktop, shown in the 768px media query.
   Each row is a real <button>: flower.png + step label SVG, tap → defcard
   modal. Flower sizes graduate 1 (smallest) → 7 (largest) via per-row vars. */
.steps-mobile {
  display: none;
}
.step-mobile-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.step-mobile-row:focus-visible {
  outline: 3px solid var(--hero-orange);
  outline-offset: 4px;
  border-radius: 4px;
}
/* Flower column reserves the width of the LARGEST flower so every label
   starts at the same left edge — labels stay aligned with Step 1 */
.step-mobile-flower {
  width: var(--flower-size);
  height: auto;
  flex: 0 0 var(--flower-size);
  margin-left: calc((var(--flower-max) - var(--flower-size)) / 2);
  margin-right: calc((var(--flower-max) - var(--flower-size)) / 2);
}
/* Graduating flower sizes, smallest → largest */
.step-mobile-flower--1 { --flower-size: 2.25rem; }
.step-mobile-flower--2 { --flower-size: 2.75rem; }
.step-mobile-flower--3 { --flower-size: 3.25rem; }
.step-mobile-flower--4 { --flower-size: 3.75rem; }
.step-mobile-flower--5 { --flower-size: 4.5rem; }
.step-mobile-flower--6 { --flower-size: 5.25rem; }
.step-mobile-flower--7 { --flower-size: 6rem; }
/* Uniform label type size — height-based, same principle as desktop labels.
   Sized up for mobile legibility; flowers are unaffected (separate vars). */
.step-mobile-label {
  height: clamp(2.25rem, 8vw, 3rem);
  width: auto;
}
/* bloomcta repeated below Step 7 — centered. Hidden with its parent
   (.steps-mobile) on desktop; visible on mobile via the media query. */
.steps-mobile-cta {
  display: block;
  width: 70%;
  max-width: 360px;
  height: auto;
  margin: var(--space-6) auto var(--space-4);
}
/* Mobile TV stack — hidden on desktop, shown in hero on mobile */
.mobile-hero-tv {
  display: none;
}
/* placeholder — mobile-tv-wrap removed from methodology */
/* ==========================================================
7. CONTENT SECTION SYSTEM
Generic sections below methodology.
Set --section-bg per section inline in HTML.
========================================================== */
.content-section {
  --section-bg: var(--white);
  background-color: var(--section-bg);
  padding: var(--space-20) var(--content-pad);
}
.section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.section-heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-5xl));
  font-weight: 700;
  color: var(--twilight);
  margin-bottom: var(--space-8);
}
.section-body {
  font-family: var(--font-label);
  font-size: var(--text-lg);
  line-height: 1.7;
  max-width: 72ch;
}
.graphic-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.graphic-block.label-above { flex-direction: column-reverse; }
.graphic-block.label-right { flex-direction: row; align-items: center; }
.graphic-block.label-left { flex-direction: row-reverse; align-items: center; }
.graphic-label {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--twilight);
  letter-spacing: 0.03em;
}
/* ==========================================================
8. FOOTER
========================================================== */
.site-footer {
  background-color: var(--twilight);
  color: var(--white);
  padding: var(--space-8) var(--content-pad);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-inner p {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  opacity: 0.8;
}
/* ==========================================================
9. RESPONSIVE — MOBILE (max 768px)
TV hidden on hero. Mobile TV shown in methodology.
Spine hidden on mobile. Clean single column.
========================================================== */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }
  .primary-nav {
    position: fixed;
    inset: 0 0 auto 0;
    background-color: var(--champagne);
    padding: calc(var(--header-height) + var(--space-4)) var(--content-pad) var(--space-8);
    border-bottom: 3px solid var(--hero-orange);
    box-shadow: var(--shadow-lg);
    transform: translateY(-100%);
    transition: transform 250ms ease;
    z-index: 99;
  }
  .primary-nav.is-open {
    transform: translateY(0);
  }
  .primary-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .primary-nav a {
    font-size: var(--text-base);
  }
  .hero-inner {
    grid-template-columns: 1fr;
    margin-top: 0;
    padding: var(--space-4) var(--content-pad);
  }
  /* Hero shrinks to content on mobile */
  .hero {
    min-height: auto;
  }
  /* Hero heading: reduced top padding on mobile */
  .hero-heading-wrap {
    padding-top: var(--space-6);
  }
  .hero-text {
    padding-right: 0;
    padding-top: 0;
    padding-left: 0;
  }
  /* Hero heading: full width on mobile — base rule is 50%, written for desktop */
  .hero-heading-svg {
    width: 100%;
    max-width: 100%;
  }
  /* Hero TV hidden on mobile — mobile TV stack in hero section shows instead */
  .hero-visual {
    display: none;
  }
  /* Hero mobile media — TV chassis + video stacked */
  .hero-mobile-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) 0 var(--space-6);
  }
  .mobile-hero-tv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--content-pad) var(--space-8);
  }
  .mobile-hero-tv-img {
    width: 65%;
    max-width: 260px;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
  }
  .mobile-hero-video {
    width: 80%;
    max-width: 320px;
    height: auto;
    display: block;
    border-radius: 4px;
  }
  /* Methodology: tighter min-height on mobile */
  .methodology {
    min-height: auto;
  }
  /* Case rows stack vertically on mobile — every card full width */
  .case-row {
    flex-direction: column;
  }
  .case-card--wide,
  .case-card--narrow {
    flex: 1 1 auto;
    width: 100%;
  }
  /* Shorter slide distance on small screens so cards never start offscreen */
  .js-anim .case-from-left  { transform: translateX(-32px); }
  .js-anim .case-from-right { transform: translateX(32px); }
  .js-anim .case-from-left.is-in,
  .js-anim .case-from-right.is-in {
    transform: translateX(0);
  }
  /* hero-bottom: no auto-push on mobile; zero margin pulls subheading1
     and methodologytext up close under the Q3 card */
  .hero-bottom {
    margin-top: 0;
  }
  /* Methodology text: full width centered on mobile */
  .methodology-text-svg {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Flowerspine hidden on mobile — the steps-mobile list replaces it.
     Hiding spine-wrap also hides the desktop labels/hotspots/defcards
     positioned inside it, so the ONLY way defcards appear on mobile is
     the tap-to-open modal. */
  .spine-wrap {
    display: none;
  }
  /* Mobile steps list — flower + label rows, left-aligned, tappable.
     Carries the hero-orange → case-orange gradient (the desktop spine's
     job) so the steps section transitions smoothly into the solid
     case-orange methodology/case-studies section below — no hard seam. */
  .steps-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6) var(--content-pad) var(--space-8);
    background-image: linear-gradient(
      to bottom,
      var(--hero-orange) 0%,
      var(--case-orange) 100%
    );
  }
  /* Mobile: show only the 8 large (wide) case boxes; hide the narrow ones */
  .case-card--narrow {
    display: none;
  }
  /* Heading centered, full-width SVG on mobile */
  .methodology-heading {
    padding: var(--space-6) 0 var(--space-4);
  }
  .subheading-svg {
    width: 90%;
    max-width: 100%;
  }
  .content-section {
    padding: var(--space-12) var(--content-pad);
  }
  .graphic-block.label-right,
  .graphic-block.label-left {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ==========================================================
10. RESPONSIVE — MEDIUM (769px–1100px)
TV scales down, two-column layout maintained.
========================================================== */
@media (min-width: 769px) and (max-width: 1100px) {
  .hero-heading-svg {
    max-width: 100%;
  }
  .tv-wrapper {
    max-width: 640px;
  }
  /* Reduce negative overlap at medium widths — prevents hero elements crossing */
  .hero-inner {
    margin-top: -120px;
  }
}