/* ===========================================
   TRUSTMI CASE STUDY
   Fonts: Assistant + Poppins | From Figma
   =========================================== */

:root {
  --dark-bg: #010312;
  --light-bg: #ffffff;
  --text-dark: #010312;
  --text-white: #ffffff;
  --text-muted: #9a9a9a;
  --coral: #f77070;
  --navy: #2f4989;
  --yellow: #ffde59;
  --blue: #7ec8e3;
  --pink: #f2a7c3;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-stat: 'Poppins', sans-serif;

  --max-w: 1502px;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; scroll-snap-type: y proximity; }
body { font-family: var(--font); font-weight: 300; font-size: 13px; line-height: 1.6; color: var(--text-dark); background: var(--dark-bg); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ===========================================
   LAYOUT
   =========================================== */

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 48px; width: 100%; }
.container--center { text-align: center; }

.section { padding: 140px 0; position: relative; min-height: 100vh; display: flex; align-items: center; }
.section--dark { background: var(--dark-bg); color: var(--text-white); }
.section--light { background: var(--light-bg); color: var(--text-dark); }
.section--fullscreen { min-height: 50vh; display: flex; align-items: center; justify-content: center; }
#challenges { padding-bottom: 0; }

/* ===========================================
   SHARED TYPOGRAPHY
   =========================================== */

.section__title-hero {
  font-weight: 200;
  font-size: 57px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.section__title-xl {
  font-weight: 200;
  font-size: 57px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.section__subtitle {
  font-weight: 300;
  font-size: clamp(0.85rem, 1.2vw, 1.1rem);
  line-height: 1.5;
  color: #010312;
  opacity: 0.7;
  margin: 4px 0 0;
  text-align: center;
}

.section__subtitle-lg {
  font-weight: 300;
  font-size: clamp(1.08rem, 2vw, 2.2rem);
  line-height: 1.4;
  white-space: nowrap;
}

.section__body-lg {
  font-weight: 300;
  font-size: clamp(0.84rem, 1.28vw, 1.08rem);
  line-height: 1.8;
  max-width: 700px;
}

.section__icon { margin-bottom: 24px; }

.badge-label {
  font-weight: 500;
  font-size: 0.64rem;
  color: var(--navy);
  letter-spacing: 0.04em;
  margin-top: 32px;
}

.methodology-badge {
  display: inline-block;
  font-weight: 500;
  font-size: 0.6rem;
  color: var(--navy);
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border: 1px solid var(--navy);
  border-radius: 20px;
  margin-top: 12px;
}

/* Figma section images — full-width Figma exports */
.figma-section { width: 100%; }
.figma-section img { width: 100%; height: auto; }

/* ===========================================
   1. COVER
   =========================================== */

.section--cover {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cover__content { display: flex; flex-direction: column; align-items: center; }
.cover__logo { height: clamp(32px, 5.6vw, 64px); width: auto; margin-bottom: 24px; }

.cover__usecase {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(0.8rem, 1.44vw, 1.2rem);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
  margin-bottom: 120px;
}
.cover__tags, .cover__since {
  font-weight: 300;
  font-size: clamp(1.2rem, 2.24vw, 2rem);
  color: var(--text-white);
}

/* ===========================================
   2. PROBLEM 1
   =========================================== */

/* Presentation version: single static slide, chaos panel + 40,000 stat side by side
   (replaces the scroll-driven camera pan + falling-papers canvas animation below,
   which trustmi-main.js already no-ops when #p1-scroll-wrapper is absent). */
.section--problem1-static {
  background: #010312;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding-top: 0 !important;
}
.problem1-static__grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(40px, 6vw, 96px);
  flex-wrap: wrap;
  padding: 120px 0 80px;
}
.problem1-static__col { flex: 1 1 380px; min-width: 300px; }
.problem1-static__col--chaos {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.2vw, 32px);
}
.problem1-static__col--stat {
  display: flex;
  flex-direction: column;
}
.problem1-static__col--stat .p1-stat-value .stat-approx,
.problem1-static__col--stat .p1-stat-value .stat-number { font-size: clamp(3.2rem, 6.4vw, 6.4rem); }
.problem1-static__col--stat .p1-stat-value { margin-bottom: 4px; line-height: 1; }
.problem1-static__col--stat .p1-stat-label { font-size: clamp(0.95rem, 1.6vw, 1.6rem); max-width: 440px; }

@media (max-width: 768px) {
  .problem1-static__grid { padding: 56px 0; gap: 48px; }
}

/* Scroll wrapper — creates the vertical scroll space for camera-down effect */
.p1-scroll-wrapper {
  position: relative;
  height: 300vh;
}

/* Sticky viewport — stays pinned while user scrolls through the wrapper */
.section--problem1 {
  position: sticky !important;
  top: 0;
  height: 100vh !important;
  min-height: unset !important;
  overflow: hidden;
  background: #010312;
  padding: 0 !important;
  display: block !important;
}

/* Camera: 200vh tall — JS translates it upward to pan between floors */
.p1-camera {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 200vh;
  will-change: transform;
}

/* Each floor is exactly one viewport tall */
.p1-frame {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #010312;
}

.p1-cat-wrap {
  position: absolute;
  bottom: 8.5vw;
  left: 14%;
  width: clamp(221px, 26.9vw, 348px);
  z-index: 2;
}
/* REVERT: remove mix-blend-mode line to go back to original */
.p1-cat-img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }

.p1-eye-anchor {
  position: absolute;
  width: 2.10%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.p1-eye-anchor--l { left: 67%; top: 32%; }
.p1-eye-anchor--r { left: 75%; top: 29%; }

.p1-eye-anchor span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #111;
  transform-origin: center center;
  animation: catLook 10s ease-in-out infinite;
}
.p1-eye-anchor--r span { animation-delay: 0.07s; }

@keyframes catLook {
  0%,  12%  { transform: translate(38%,  -38%); }
  20%, 28%  { transform: translate(72%,  -70%); }
  36%, 44%  { transform: translate(28%,  -18%); }
  52%, 60%  { transform: translate(68%,  -50%); }
  68%, 78%  { transform: translate(42%,  -65%); }
  86%, 100% { transform: translate(38%,  -38%); }
}

/* Chair image: JS drives opacity from 0→1 during scroll.
   background-image is deliberately NOT set here — a CSS background-image
   loads the moment its rule matches an element in the DOM, regardless of
   scroll position, unlike <img loading="lazy">. It's added via the
   .bg-loaded class instead, by the same JS that starts this section's
   canvas animation (trustmi-main.js), so the ~320KB file only loads once
   this section is actually about to be scrolled into view. */
.p1-bg-chair {
  position: absolute;
  inset: 0;
  background-color: #010312;
  background-position: center bottom;
  background-size: 100% 9.43vw;
  background-repeat: no-repeat;
  background-blend-mode: luminosity;
  opacity: 0;
}
.p1-bg-chair.bg-loaded {
  background-image: url('assets/Problem/balck-nobg.png');
}
.p1-bg-chair::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #010312 20%, rgba(1,3,18,0.08) 48%, transparent 65%);
}

.paper-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* Left panel: text above the paper canvas (canvas = z-index 1) */
.p1-left-panel {
  position: absolute;
  left: clamp(24px, 5.5vw, 80px);
  top: 0; bottom: 0;
  z-index: 3;
  width: 42%;
  display: flex;
  align-items: center;
}

/* State 1: integrations — JS drives opacity */
.p1-chaos-state {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.2vw, 32px);
  width: 100%;
}
.p1-chaos-header {
  font-weight: 300;
  font-size: clamp(0.78rem, 1.3vw, 1.5rem);
  color: var(--text-white);
  line-height: 1.5;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.p1-integrations-label {
  font-weight: 400;
  font-size: clamp(0.58rem, 0.85vw, 0.9rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: -8px;
}
.p1-integration-category {
  font-weight: 300;
  font-size: clamp(1.2rem, 2.6vw, 3.2rem);
  color: var(--text-white);
  margin-bottom: 4px;
}
.p1-integration-providers {
  font-weight: 300;
  font-size: clamp(0.65rem, 0.95vw, 1.1rem);
  color: rgba(255, 255, 255, 0.45);
}

/* Landed panel: aligns text to top so it sits in the black zone above the chair */
.p1-left-panel--landed {
  align-items: flex-start;
  padding-top: 10vh;
}

/* State 2: stat — in its own floor, JS drives opacity on arrival */
.p1-landed-state {
  display: flex;
  flex-direction: column;
  opacity: 0;
}
.p1-stat-label-top {
  display: block;
  font-weight: 300;
  font-size: clamp(0.85rem, 1.4vw, 1.6rem);
  letter-spacing: 0.04em;
  color: #ffffff;
  margin-bottom: 4px;
}
.p1-stat-value {
  display: block;
  font-weight: 300;
  color: var(--text-white);
  margin-bottom: 20px;
}
.p1-stat-label {
  font-weight: 300;
  font-size: clamp(1.2rem, 2vw, 2.2rem);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  max-width: 440px;
}

.stat-approx {
  color: var(--coral);
  font-size: clamp(3.2rem, 6.4vw, 6.4rem);
  font-weight: 300;
}
.stat-number {
  font-family: var(--font-stat);
  font-weight: 300;
  color: var(--coral);
  font-size: clamp(3.2rem, 6.4vw, 6.4rem);
}

/* p1 landed state */
.p1-stat-value .stat-approx,
.p1-stat-value .stat-number {
  font-size: 144px;
}
.p1-stat-value {
  margin-bottom: 4px !important;
  line-height: 1;
}
.p1-stat-label {
  font-size: clamp(0.85rem, 1.4vw, 1.6rem);
  font-weight: 300;
  max-width: 700px;
  line-height: 1.5;
}

/* ===========================================
   3. PROBLEM 2
   =========================================== */

.section--problem2 { padding: 0; overflow: hidden; align-items: stretch; position: relative; }

.city-lights {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.lamp-flicker {
  position: absolute;
  left: 65%;
  top: 49%;
  width: 7vw;
  height: 7vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,190,60,0.80) 0%, rgba(255,140,20,0.45) 40%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
  animation: lampA 3.2s ease-in-out infinite alternate, lampB 2.1s ease-in-out infinite alternate;
  transform-origin: center center;
}

@keyframes lampA {
  0%   { opacity: 0.55; transform: scale(1.00); }
  15%  { opacity: 0.72; transform: scale(1.04); }
  30%  { opacity: 0.48; transform: scale(0.97); }
  50%  { opacity: 0.80; transform: scale(1.06); }
  65%  { opacity: 0.52; transform: scale(0.98); }
  80%  { opacity: 0.76; transform: scale(1.03); }
  100% { opacity: 0.60; transform: scale(1.01); }
}

@keyframes lampB {
  0%   { filter: blur(18px) brightness(1.0); }
  20%  { filter: blur(22px) brightness(1.3); }
  45%  { filter: blur(16px) brightness(0.85); }
  70%  { filter: blur(24px) brightness(1.2); }
  100% { filter: blur(19px) brightness(1.0); }
}

.section--problem2::after {
  content: '';
  position: absolute;
  left: 62%;
  top: 43%;
  width: 130px;
  height: 170px;
  background: radial-gradient(ellipse at 50% 80%,
    rgba(255, 200, 60, 0.32) 0%,
    rgba(255, 160, 30, 0.18) 35%,
    rgba(255, 120, 20, 0.07) 60%,
    transparent 80%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  animation: candleFlicker 4s ease-in-out infinite;
}

@keyframes candleFlicker {
  0%   { opacity: 0.85; transform: scale(1) translateY(0); }
  20%  { opacity: 1;    transform: scale(1.04) translateY(-4px); }
  45%  { opacity: 0.75; transform: scale(0.97) translateY(2px); }
  65%  { opacity: 1;    transform: scale(1.06) translateY(-6px); }
  80%  { opacity: 0.88; transform: scale(1.01) translateY(-2px); }
  100% { opacity: 0.85; transform: scale(1) translateY(0); }
}

.problem2__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.problem2__mobile-pin { display: none; }


.problem2__left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 64px 120px;
  gap: 20px;
  width: 55%;
  min-height: 100vh;
  color: #010312;
}

.problem2__threat-title {
  font-weight: 300;
  font-size: clamp(1.2rem, 2vw, 2rem);
  color: #010312;
}
.problem2__threats {
  font-weight: 300;
  font-size: clamp(0.64rem, 0.96vw, 0.88rem);
  opacity: 0.65;
  line-height: 2;
  color: #010312;
}
.problem2__stat { margin-top: 16px; }
.problem2__stat-value { display: block; line-height: 0.9; margin-bottom: 12px; }
.problem2__stat-value .stat-number { font-size: clamp(4rem, 9.6vw, 9.6rem); color: var(--coral); }
.problem2__stat-prefix { font-weight: 300; font-size: clamp(2.4rem, 4.8vw, 4.8rem); color: var(--coral); }
.problem2__stat-label { display: block; font-weight: 300; font-size: clamp(1.4rem, 2.8vw, 3.2rem); color: #010312; }
.problem2__stat-date { display: block; font-weight: 300; font-size: clamp(0.8rem, 1.6vw, 1.8rem); margin-top: 8px; color: #010312; }

/* ===========================================
   CISO EMPATHY MAP
   =========================================== */

.ciso__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 80px;
}
.ciso__persona {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-left: 64px;
}
.ciso__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
}
.ciso__title {
  font-size: 2rem;
  font-weight: 300;
  color: var(--text-dark);
  margin-top: 24px;
}
.ciso__roles {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  color: var(--navy);
  line-height: 2;
}
.ciso__empathy {
  position: relative;
}
.empathy__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  gap: 24px 48px;
  align-items: start;
}
.empathy__quadrant {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-dark);
  max-width: 300px;
}
.empathy__quadrant p {
  margin: 0 0 8px;
}
.empathy__quadrant-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 12px;
}
.empathy__quadrant strong {
  font-weight: 600;
}
.empathy__quadrant--needs {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}
.empathy__quadrant--thinks {
  grid-column: 3;
  grid-row: 1;
}
.empathy__center {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empathy__map-img {
  width: 552px;
  height: auto;
}

/* Empathy Map SVG Animation */
.empathy-svg__label,
.empathy-svg__arrow,
.empathy-svg__icon {
  opacity: 0;
}

.empathy__center.visible .empathy-svg__label {
  animation: empathyFadeIn 0.6s ease-out 0.3s forwards;
}

.empathy__center.visible .empathy-svg__arrow--vertical {
  animation: empathyScaleY 0.8s ease-out 0.8s forwards;
  transform-origin: center center;
}

.empathy__center.visible .empathy-svg__arrow--horizontal {
  animation: empathyScaleX 0.8s ease-out 1.0s forwards;
  transform-origin: center center;
}

.empathy__center.visible .empathy-svg__icon--speech {
  animation: empathyFadeIn 0.5s ease-out 1.6s forwards;
}

.empathy__center.visible .empathy-svg__icon--brain {
  animation: empathyFadeIn 0.5s ease-out 1.8s forwards;
}

.empathy__center.visible .empathy-svg__icon--heart {
  animation: empathyFadeIn 0.5s ease-out 2.0s forwards;
}

.empathy__center.visible .empathy-svg__icon--hand {
  animation: empathyFadeIn 0.5s ease-out 2.2s forwards;
}

@keyframes empathyFadeIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes empathyScaleY {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

@keyframes empathyScaleX {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
.empathy__quadrant--does {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
  margin-top: 50px;
}
.empathy__quadrant--feels {
  grid-column: 3;
  grid-row: 2;
  margin-top: 50px;
}
.ciso__footer {
  position: absolute;
  top: 60px;
  left: 64px;
  font-family: var(--font);
  font-size: 57px;
  font-weight: 200;
  font-style: normal;
  color: var(--text-dark);
  opacity: 1;
}

/* No empathy map next to the persona anymore, so center the whole
   CISO block instead of the old 2-column layout. */
#ciso .ciso__layout {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
#ciso .ciso__persona {
  align-items: center;
  padding-left: 0;
}
#ciso .ciso__footer {
  position: static;
  left: auto;
  top: auto;
  text-align: center;
  margin-top: 40px;
}

/* ===========================================
   4. CONTEXT
   =========================================== */

.section--context {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 0;
  text-align: center;
}

.context__icon { margin-bottom: 12px; margin-top: -124px; display: flex; justify-content: center; }
.context__icon.bounce img {
  animation: starBounce 1.4s ease-in-out 2;
}
@keyframes starBounce {
  0% { transform: translateY(0); }
  30% { transform: translateY(-12px); }
  50% { transform: translateY(0); }
  70% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
.section--context .section__title-xl {
  font-size: 57px;
  font-weight: 200;
  white-space: normal;
  letter-spacing: -0.03em;
  line-height: 1.6;
}
.section__title-xl--centered { text-align: center; }

/* ===========================================
   5. CISO EMPATHY MAP (Figma image)
   =========================================== */

.section--ciso {
  position: relative;
  padding: 120px 0 120px;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.section--ciso .container { padding: 0; }

/* ===========================================
   6. FIRST USER FLOW
   =========================================== */

.section--first-flow {
  padding: 0;
  border-left: 4px solid var(--coral);
  background: var(--light-bg);
}
.section--first-flow .container { padding-right: 0; padding-left: 0; }

.first-flow__layout {
  display: grid;
  grid-template-columns: 0.7fr 2fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 24px;
}

.first-flow__left {
  overflow: visible;
  margin-right: -48px;
}
.first-flow__left img { width: 100%; }

/* ── First-flow click animation ── */
.ff-anim {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ff-frame--base {
  display: block;
  width: 100%;
  position: relative;
  animation: ffBase 7s step-end infinite;
}

.ff-frame--selected {
  display: block;
  width: 100%;
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  animation: ffSelected 7s step-end infinite;
}

.ff-frame--panel {
  display: block;
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: 32.2%;
  object-fit: contain;
  object-position: right top;
  animation: ffPanel 7s linear infinite;
}

@keyframes ffPanel {
  0%, 30% {
    transform: translateX(110%);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  37%, 76% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0);
  }
  83%, 100% { transform: translateX(110%); }
}

@keyframes ffBase {
  0%,  30%  { opacity: 1; }
  31%, 82%  { opacity: 0; }
  83%, 100% { opacity: 1; }
}
@keyframes ffSelected {
  0%,  30%  { opacity: 0; }
  31%, 82%  { opacity: 1; }
  83%, 100% { opacity: 0; }
}

/* Cursor */
.ff-cursor {
  position: absolute;
  pointer-events: none;
  top: 67%;
  left: 18%;
  animation: ffCursorMove 7s ease-in-out infinite;
}
.ff-cursor__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 6px rgba(0,0,0,0.45);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: ffCursorClick 7s ease-in-out infinite;
}
.ff-cursor__ripple {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.55);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation: ffRipple 7s ease-in-out infinite;
}

@keyframes ffCursorMove {
  0%        { opacity: 0; transform: translate(-40px, -20px); }
  8%        { opacity: 1; transform: translate(-40px, -20px); }
  28%       { opacity: 1; transform: translate(0, 0); }
  45%       { opacity: 0; transform: translate(0, 0); }
  100%      { opacity: 0; transform: translate(-40px, -20px); }
}
@keyframes ffCursorClick {
  0%, 29%   { transform: translate(-50%, -50%) scale(1); }
  32%       { transform: translate(-50%, -50%) scale(0.55); }
  35%       { transform: translate(-50%, -50%) scale(1); }
  100%      { transform: translate(-50%, -50%) scale(1); }
}
@keyframes ffRipple {
  0%, 30%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  31%       { transform: translate(-50%, -50%) scale(0); opacity: 0.7; }
  42%       { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
  100%      { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}

.first-flow__right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.first-flow__star {
  width: 48px;
  height: auto;
  animation: starShine 3s ease-in-out 1;
}

@keyframes starShine {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  50% { filter: brightness(1.3) drop-shadow(0 0 8px rgba(248, 112, 112, 0.6)); }
}

.section__title-display {
  font-family: var(--font);
  font-size: 57px;
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-dark);
}

.first-flow__subtitle {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 300;
  color: var(--navy);
  margin: 0;
}

.first-flow__desc {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 300;
  color: #010312;
  margin: 12px 0 0;
  opacity: 0.7;
  line-height: 1.5;
}

.first-flow__details {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  margin-top: 16px;
}

.first-flow__card {
  background: var(--light-bg);
  overflow: hidden;
}
.first-flow__card img { width: 100%; }
.first-flow__card--score { max-width: 128px; }
.first-flow__card--menu { max-width: 144px; }

/* ===========================================
   7. PRODUCT SHIFT
   =========================================== */

.section--product-shift { padding: 120px 0; background: var(--light-bg); }
.section--product-shift .section__title-display { text-align: center; margin-bottom: 120px; margin-top: -100px; font-size: 57px; }

.product-shift__header {
  text-align: center;
  margin-bottom: 48px;
}

.product-shift__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 56px;
  max-width: 960px;
  margin: 0 auto;
}

.product-shift__grid { position: relative; }
.product-shift__persona { text-align: left; }

.product-shift__avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 0 32px;
  background: var(--dark-bg);
}


.product-shift__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-shift__name {
  font-family: var(--font);
  font-size: 35px;
  font-weight: 200;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.product-shift__roles {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 300;
  color: var(--navy);
  line-height: 1.8;
  text-align: left;
  display: inline-block;
}

/* --- Product Shift animation (before triggered) --- */
.product-shift__persona--infosec {
  opacity: 0;
  transform: translateX(55%);
}
.product-shift__persona--finance { opacity: 0; }
.product-shift__persona--procurement { opacity: 0; }

/* All three slide in simultaneously */
.product-shift__grid.animated .product-shift__persona--infosec {
  animation: shiftInfoSecIn 1.0s ease-in-out 0.3s forwards;
}

.product-shift__grid.animated .product-shift__persona--finance {
  animation: shiftFinanceIn 1.0s ease-in-out 0.3s forwards;
}

.product-shift__grid.animated .product-shift__persona--procurement {
  animation: shiftProcurementIn 1.0s ease-in-out 0.3s forwards;
}

@keyframes shiftInfoSecIn {
  from { opacity: 0; transform: translateX(55%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes shiftFinanceIn {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes shiftProcurementIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ===========================================
   8-10. CHALLENGES (DARK FULLSCREEN)
   =========================================== */

#challenges-grid { padding: 80px 0 100px; }

.challenges-title {
  text-align: left;
  max-width: 860px;
  margin: 0 auto 20px;
}

.challenges-intro {
  max-width: 860px;
  margin: 0 auto 52px;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
}

.challenges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 120px;
  row-gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}

.challenge-col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-items: start;
}

.challenge-col > * {
  align-self: start;
}

.challenge__icon { margin-bottom: 24px; padding: 8px; }
.challenge__svg { width: 106px; height: auto; overflow: visible; }

.challenge-col .section__title-xl {
  font-size: 38px;
  margin-bottom: 0;
}

.challenge-col .section__subtitle-lg {
  font-size: 15px;
  margin-top: 0;
  align-self: center;
}

.challenge__flow-text {
  font-size: clamp(0.85rem, 1.4vw, 1.6rem);
  line-height: 1.4;
}

.challenge__flow-emphasis {
  font-size: clamp(1.1rem, 2vw, 2rem);
}

/* Flexibility line draw animation */
#flex-path {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}
#flex-path.drawing {
  animation: flexDraw 2s forwards;
}
@keyframes flexDraw {
  0%   { stroke-dashoffset: 900; stroke-width: 9; }
  20%  { stroke-dashoffset: 720; stroke-width: 14; }
  45%  { stroke-dashoffset: 450; stroke-width: 15; }
  70%  { stroke-dashoffset: 180; stroke-width: 12; }
  85%  { stroke-dashoffset: 40;  stroke-width: 11; }
  100% { stroke-dashoffset: 0;   stroke-width: 12; }
}

/* Product Shift icon animation */
#ps-person1 {
  transform: translateX(57px);
  animation: psSlideLeft 1.8s ease-out forwards;
}
#ps-person2 {
  transform: translateX(-57px);
  opacity: 0;
  animation: psSlideRight 1.8s ease-out forwards;
}

@keyframes psSlideLeft {
  0%   { transform: translateX(57px); }
  33%  { transform: translateX(57px); }
  78%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

@keyframes psSlideRight {
  0%   { transform: translateX(-57px); opacity: 0; }
  33%  { transform: translateX(-57px); opacity: 0; }
  34%  { transform: translateX(-57px); opacity: 0.3; }
  78%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

.challenge__flow {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 0;
  align-self: start;
}

.challenge__flow-text {
  font-weight: 300;
  font-size: 15px;
}

.challenge__flow-emphasis {
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 2rem);
}

/* ===========================================
   11. RESEARCH
   =========================================== */

.section--research { padding: 140px 0; scroll-snap-align: start; scroll-snap-stop: always; background: #F87070; }

.research__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.research__text { flex: 1; }

.research__book-wrap {
  flex-shrink: 0;
  width: 338px;
  height: 432px;
  position: relative;
}
.rp-pencil {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 168px;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#research-pages.animated .rp-pencil {
  opacity: 1;
  transition-delay: 1.2s;
}

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

/* Pages — flip from right to left, stack and freeze at 30% */
/* ── Book page flip — full page travels right→spine→left, then freezes ── */
@keyframes pageFlip {
  0%   { transform: translateX(310px) scaleX(1);    opacity: 0.7; }
  30%  { transform: translateX(144px) scaleX(0.06); opacity: 0.5; } /* crosses spine */
  50%  { transform: translateX(-8px)  scaleX(1.04); opacity: 0.26; }
  65%  { transform: translateX(4px)   scaleX(0.98); opacity: 0.21; }
  100% { transform: translateX(0)     scaleX(1);    opacity: 0.2; }
}

.rp-page { opacity: 0; }

#research-pages.animated .rp-page--1 { animation: pageFlip 0.5s 0.1s  cubic-bezier(0.4, 0, 0.2, 1) forwards; }
#research-pages.animated .rp-page--2 { animation: pageFlip 0.5s 0.3s  cubic-bezier(0.4, 0, 0.2, 1) forwards; }
#research-pages.animated .rp-page--3 { animation: pageFlip 0.5s 0.5s  cubic-bezier(0.4, 0, 0.2, 1) forwards; }
#research-pages.animated .rp-page--4 { animation: pageFlip 0.5s 0.7s  cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* ── Unified mobile heading scale ──────────────────────────────────
   Every "big section headline" class renders at 57px on desktop. On mobile
   they used to be shrunk section-by-section to different, inconsistent
   sizes (24-32px, some not shrunk at all). One fluid size for all of them
   here instead, so headings read as one consistent tier while scrolling. */
@media (max-width: 768px) {
  .section__title-hero,
  .section__title-xl,
  .section__title-display,
  .sys-realities__title,
  .ciso__footer {
    font-size: clamp(1.3rem, 6vw, 2rem) !important;
  }

  /* Second (smaller) tier: sub-block headings within a section — these were
     fixed at 32px with no mobile override, which made them read LARGER than
     the section headlines above once those got scaled down. */
  .phase1__block-title,
  .ciso__title {
    font-size: clamp(1.15rem, 5vw, 1.5rem) !important;
  }
}

@media (max-width: 768px) {
  .research__book-wrap { width: 200px; height: 256px; }
  .research__content { flex-direction: column; }
}

.research__body {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  line-height: 1.7;
  color: var(--text-dark);
  opacity: 0.75;
  margin-top: 16px;
}

.research__subtitle {
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dark);
  margin-top: 24px;
}

/* Research intro — sequential reveal */
.research-delay--1 { transition-delay: 0s; }
.research-delay--2 { transition-delay: 0.3s; }
.research-delay--3 { transition-delay: 0.6s; }
.research-delay--4 { transition-delay: 0.9s; }

/* --- System Realities section --- */
.section--sys-realities { padding: 140px 0 0; }

.sys-realities__layout {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 80px;
  align-items: start;
}

.sys-realities__title {
  font-family: var(--font);
  font-size: 57px;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.sys-realities__intro {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-dark);
  opacity: 0.6;
  line-height: 1.6;
  margin-top: 24px;
  width: 100%;
}

.sys-realities__items {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.sys-realities__num {
  font-family: var(--font-stat);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 8px;
}

.sys-realities__item-title {
  font-family: var(--font);
  font-size: 35px;
  font-weight: 300;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.sys-realities__item p {
  font-weight: 300;
  font-size: 15px;
  color: var(--text-dark);
  line-height: 1.7;
}

/* --- Constraints & Timeline section --- */
.section--constraints { padding: 60px 0; }

.constraints__grid {
  display: flex;
  flex-direction: row;
  gap: 60px;
  margin-bottom: 32px;
  align-items: flex-start;
}

.constraints__col-title {
  font-family: var(--font);
  font-weight: 300;
  font-size: 35px;
  margin-bottom: 4px;
  color: var(--text-dark);
}

.constraints__text {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-dark);
  max-width: 600px;
}

/* Timeline */
.research__timeline {
  margin-top: 20px;
  position: relative;
}

.timeline__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.timeline__anchor-img {
  width: clamp(252px, 32.4vw, 468px);
  height: auto;
  pointer-events: none;
}
.research__timeline-title {
  font-family: var(--font);
  font-weight: 300;
  font-size: 35px;
  margin-bottom: 24px;
  color: var(--text-dark);
}

/* --- Timeline chart (Gantt) --- */
.timeline-chart {
  position: relative;
  height: 150px;
  overflow: hidden;
  border-radius: 6px;
}

/* Grey columns — two fast sweeps then settle */
.tl-grid {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    #E8EBF2 0px, #E8EBF2 56px,
    transparent 56px, transparent 62px
  );
  opacity: 0.5;
  transform: translateX(200px);
}

/* Phase bars — slide in from left */
.tl-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 40px;
  gap: 14px;
  transform: translateX(-110%);
}

.tl-phase {
  height: 62px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(0.8rem, 1.28vw, 1.4rem);
  color: var(--text-white);
  white-space: nowrap;
}

.tl-phase--1 { background: #F87070; flex: 703; }
.tl-phase--2 { background: #FD627C; flex: 988; }

/* Triggered by JS */
.timeline-chart.animated .tl-grid {
  animation: tlGridScroll 1.6s linear forwards;
}
.timeline-chart.animated .tl-bars {
  animation: tlBarsSlide 0.5s ease-out 0.9s forwards;
}

/* Grey: two sequential bursts left, like scrolling a timeline */
@keyframes tlGridScroll {
  0%   { transform: translateX(400px); }  /* start far right, off screen */
  35%  { transform: translateX(140px); }  /* first burst lands mid-way */
  52%  { transform: translateX(110px); }  /* brief slow between bursts */
  88%  { transform: translateX(-6px); }   /* second burst overshoots */
  100% { transform: translateX(0); }      /* settle */
}

/* Bars: fly in fast from completely off-screen left */
@keyframes tlBarsSlide {
  from { transform: translateX(-110%); }
  to   { transform: translateX(0); }
}

/* ===========================================
   12. PHASE 1
   =========================================== */

.section--phase1 { padding: 140px 0; border-top: 1px solid rgba(0,0,0,0.06); }

.phase1__layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 120px;
}

.phase1__text { display: flex; flex-direction: column; }

.phase1__ocd {
  position: relative;
  width: 100%;
  aspect-ratio: 817 / 797;
  overflow: hidden;
  margin-left: auto;
}

.ocd-col {
  position: absolute;
  top: 0;
  height: 100%;
  width: calc(100% / 7);
  background-repeat: no-repeat;
  background-size: 700% 100%;
  transform: translateY(-110%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* background-image deferred until this grid is about to scroll into view
   (see .bg-loaded, added by the same observer that triggers .animated in
   trustmi-main.js) rather than loading unconditionally on page load. */
#phase1-ocd.bg-loaded .ocd-col {
  background-image: url('assets/phase-1/ocd.svg');
}

.ocd-col--1 { left: 0%;          background-position: 0%       0%; }
.ocd-col--2 { left: 14.2857%;   background-position: 16.667%  0%; }
.ocd-col--3 { left: 28.5714%;   background-position: 33.333%  0%; }
.ocd-col--4 { left: 42.8571%;   background-position: 50%      0%; }
.ocd-col--5 { left: 57.1428%;   background-position: 66.667%  0%; }
.ocd-col--6 { left: 71.4285%;   background-position: 83.333%  0%; }
.ocd-col--7 { left: 85.7142%;   background-position: 100%     0%; }

/* Gentle fade-in for phase1 title and text before OCD animation */
.section--phase1 .phase__title.visible      { transition-delay: 0.4s; }
.section--phase1 .phase1__block.visible:nth-child(2) { transition-delay: 0.7s; }
.section--phase1 .phase1__block.visible:nth-child(3) { transition-delay: 0.95s; }

.phase1__ocd.animated .ocd-col    { transform: translateY(0); }
.phase1__ocd.animated .ocd-col--1 { transition-delay: 1.3s; }
.phase1__ocd.animated .ocd-col--2 { transition-delay: 1.38s; }
.phase1__ocd.animated .ocd-col--3 { transition-delay: 1.46s; }
.phase1__ocd.animated .ocd-col--4 { transition-delay: 1.54s; }
.phase1__ocd.animated .ocd-col--5 { transition-delay: 1.62s; }
.phase1__ocd.animated .ocd-col--6 { transition-delay: 1.70s; }
.phase1__ocd.animated .ocd-col--7 { transition-delay: 1.78s; }

.phase__title {
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 56px;
}

.phase__desc {
  font-weight: 300;
  font-size: 0.9rem;
  max-width: 700px;
  margin-bottom: 16px;
  line-height: 1.7;
}
.section--phase2 .phase__desc {
  max-width: 300px;
}
.lf-scene .phase__desc {
  max-width: none;
}

.phase1__block { margin-bottom: 40px; }
.phase1__block-title {
  font-weight: 400;
  font-size: 2rem;
  margin-bottom: 12px;
  color: var(--text-dark);
}
.phase1__block p {
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-dark);
}

/* Object cards with images */
.phase1__objects {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 20px;
  margin: 48px 0 64px;
}

.phase1__data-flows {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 80px;
  align-items: start;
  margin: 80px 0 80px;
}

.data-flows__text p {
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-dark);
  margin-top: 12px;
}

.data-flows__diagram { display: flex; justify-content: flex-end; }
.data-flows__diagram img { width: 100%; display: block; }
.data-flows__mobile-flow { display: none; }
.object-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.object-card__img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.object-card__label {
  font-family: var(--font-stat);
  font-weight: 500;
  font-size: 0.68rem;
  color: var(--text-dark);
}

/* Diagram image */
.phase1__diagram {
  margin: 40px 0 56px;
}
.phase1__diagram img { width: 100%; }

/* Relationship Mapping — full-width canvas */
.phase1__rel-map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-top: 50px;
  margin-bottom: 50px;
  overflow: hidden;
}

.rel-map__text {
  position: absolute;
  left: 0;
  top: 6%;
  width: 38%;
  z-index: 1;
}
.rel-map__text p {
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-dark);
  margin-top: 12px;
}

.rel-map__scatter {
  position: absolute;
  inset: 0;
  z-index: 2;
  will-change: transform;
  pointer-events: none;
}

.rel-map__scatter img {
  position: absolute;
  filter: drop-shadow(0 16px 32px rgba(247, 220, 30, 0.22));
}

/* positions are now relative to the scatter (right 60% of section) */
.rel-map__vendor  { width: 41%; right: 0;  top: 2%; }
.rel-map__invoice { width: 26%; left: 0;   top: 48%; }
.rel-map__payment { width: 25%; left: 33%; top: 52%; }


/* Mobile — rel-map and persona stack vertically */
@media (max-width: 768px) {
  /* Rel-map: stack vertically, hide secondary diagrams */
  .phase1__rel-map {
    aspect-ratio: unset;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .rel-map__invoice,
  .rel-map__payment { display: none; }
  .rel-map__text {
    position: static;
    width: 100%;
  }
  .rel-map__scatter {
    position: relative;
    width: 100%;
    height: 360px;
  }
  .rel-map__vendor  { width: 55%; right: 0;  top: 0%;  }
  .rel-map__invoice { width: 40%; left: 0;   top: 38%; }
  .rel-map__payment { width: 44%; left: 28%; top: 55%; }

  /* Persona: stack vertically */
  .phase1__persona-wrap {
    grid-template-columns: 1fr;
  }
}

/* ── Sticky 4-scene scroll ── */
.sticky-container { height: 600vh; margin-top: 120px; }
.sticky-container + .phase1__block { margin-top: 120px; }
.sticky-scene {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  align-items: flex-start;
  padding: 80px 48px;
}
.scene--active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.scene .phase1__rel-map,
.scene .phase1__data-flows,
.scene .phase1__persona-wrap,
.scene .persona-flows__layout { margin: 0; width: 100%; }
/* Rel-map text: start from same top as other scene titles */
.scene .rel-map__text { top: 0; }
/* Constrain rel-map height to fit within viewport */
.scene .phase1__rel-map {
  height: calc(100vh - 200px);
  aspect-ratio: unset;
  overflow: hidden;
}
/* Data flows — text top-aligned, image fills remaining space */
.scene .phase1__data-flows {
  align-items: start;
}
.scene .data-flows__diagram img {
  width: 100%;
  max-height: calc(100vh - 220px);
  object-fit: contain;
  object-position: left top;
}

@media (max-width: 768px) {
  .sticky-container { height: auto; }
  .sticky-scene { position: static; height: auto; overflow: visible; }
  .scene {
    position: static; opacity: 1; transform: none;
    transition: none; pointer-events: auto;
    padding: 40px 24px; display: block;
  }
  .scene .phase1__data-flows { grid-template-columns: 1fr; gap: 32px; }

  /* Data Flows scene — mobile-only redesigned flow with tappable persona pop-ups (Figma mobile mockup) */
  .data-flows__diagram { display: block !important; }
  .data-flows__img-desktop { display: none !important; }
  .data-flows__mobile-flow {
    display: block;
    position: relative;
    width: 100%;
  }
  .dfm__vendor {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 92px;
    background: #fff;
    border: 1.5px solid var(--text-dark);
    border-radius: 10px;
    padding: 12px 8px;
    font-family: var(--font-stat);
    font-size: 0.8rem;
    color: var(--text-dark);
    margin: 0;
    text-align: center;
  }
  .dfm__vendor-icon { display: inline-flex; color: #353F4D; flex: none; }
  /* Connector: Vendor box → vertical spine, with an arrowhead pointing into Vendor */
  .dfm__vendor-link {
    position: absolute;
    left: 92px;
    top: 50%;
    width: 30px;
    height: 1.5px;
    background: var(--text-dark);
    opacity: 0.4;
    z-index: 1;
  }
  .dfm__vendor-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 5px solid var(--text-dark);
    opacity: 0.7;
  }
  /* Vertical spine threading through the persona avatars, top to bottom */
  .dfm__spine {
    position: absolute;
    left: 122px;
    top: 21px;
    bottom: 21px;
    width: 1.5px;
    background: var(--text-dark);
    opacity: 0.3;
    z-index: 0;
  }
  .dfm__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 101px;
  }
  .dfm__row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  .dfm__avatar {
    position: relative;
    z-index: 1;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: #f4f4f4;
  }
  .dfm__avatar img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; object-position: center !important; display: block; }
  .dfm__arrow { flex: none; color: var(--text-dark); opacity: 0.55; font-size: 1rem; }
  .dfm__box {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 92px;
    border: 1.5px solid var(--text-dark);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: var(--font-stat);
    font-size: 0.82rem;
    color: var(--text-dark);
    text-align: center;
    transition: border-color 0.2s ease;
  }
  .dfm__box-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #353F4D;
    font-weight: 600;
    font-size: 1rem;
    flex: none;
  }
  .dfm__row.is-open .dfm__box { border-color: var(--yellow, #F7DC1E); }

  .dfm__popup {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    background: #fff;
    border: 1px solid rgba(1, 3, 18, 0.08);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(1, 3, 18, 0.18);
    padding: 20px;
  }
  .dfm__popup[hidden] { display: none; }
  .dfm__popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--text-dark);
    cursor: pointer;
    padding: 0;
  }
  .dfm__popup-avatars { display: flex; gap: 8px; margin-bottom: 14px; }
  .dfm__popup-avatars img {
    width: 56px !important;
    height: 56px !important;
    max-height: none !important;
    border-radius: 50%;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
  }
  .dfm__popup-title {
    font-family: var(--font-stat);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--text-dark);
    margin: 0 0 10px;
  }
  .dfm__popup-line {
    font-weight: 300;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-dark);
    margin: 0 0 6px;
  }
}

/* Persona mapping parallax wrapper */
.phase1__persona-wrap {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
  margin: 100px 0 60px;
  overflow: hidden;
}

.persona-text p {
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-dark);
  margin-top: 12px;
}
.persona-text p strong { font-weight: 700; }

/* Persona template visual */
.persona-template-visual {
  max-width: 700px;
  margin-left: auto;
}
.ptv__row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.ptv__label {
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 2.4rem);
  white-space: nowrap;
}
.ptv__value {
  font-weight: 300;
  font-size: clamp(1.2rem, 2.4vw, 2.4rem);
}
.ptv__row--highlight { background: rgba(255, 222, 89, 0.7); margin: 0 -16px; padding: 20px 16px; border-radius: 0; }
.ptv__value--highlight { background: rgba(255, 222, 89, 0.7); padding: 2px 8px; }

/* Persona flows */
.persona-flows__layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
  margin: 40px 0 20px;
}
.persona-flows__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.persona-flows__diagram img {
  width: 120%;
  display: block;
}

@media (max-width: 768px) {
  .persona-flows__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.persona-flows__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 24px 0 48px;
}
.persona-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  text-align: center;
}
.persona-flow__icon { font-size: 1.6rem; opacity: 0.5; }
.persona-flow__name {
  font-weight: 600;
  font-size: 0.68rem;
}
.persona-flow__items {
  font-weight: 400;
  font-size: 0.64rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ===========================================
   13. PHASE 2
   =========================================== */

.section--phase2 { padding: 140px 0 80px; border-top: 1px solid rgba(0,0,0,0.06); }

.phase2__hero {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 100px;
  align-items: center;
  margin-bottom: 100px;
}
.phase2__hero-text { display: flex; flex-direction: column; gap: 24px; }
.phase2__hero-image { border-radius: 0; overflow: hidden; }
.phase2__hero-image img { width: 100%; display: block; }

@media (max-width: 768px) {
  .phase2__hero { grid-template-columns: 1fr; gap: 40px; }
  /* The process map is too dense to read once shrunk to the viewport width —
     let it scroll horizontally at a legible size instead (same approach as
     the Timeline Gantt chart). */
  .phase2__photo {
    margin: 32px 0 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .phase2__photo img { width: auto; height: auto; min-width: 900px; max-width: none; }
}

.phase2__journey { margin: 48px 0; }
.phase2__journey h4 {
  font-weight: 300;
  font-size: clamp(0.88rem, 1.6vw, 1.4rem);
  margin-bottom: 8px;
}
.phase2__journey p { font-weight: 300; font-size: 0.8rem; }

.phase2__photo {
  margin: 48px -48px 0;
}
.phase2__photo img { width: 100%; display: block; }

/* ===========================================
   OUTCOME
   =========================================== */

.section--outcome {
  padding: 160px 0;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.outcome__label {
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 12px;
}

.section--outcome .section__title-xl {
  margin-bottom: 64px;
}

.outcome__items {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.outcome__item {
  display: flex;
  align-items: baseline;
  gap: 32px;
}

.outcome__num {
  font-family: var(--font-stat);
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 700;
  color: var(--coral);
  flex-shrink: 0;
  line-height: 1;
}

.outcome__body {
  font-size: clamp(1rem, 2vw, 1.6rem);
  font-weight: 300;
  line-height: 1.4;
  color: #fff;
}

.outcome__body strong {
  font-weight: 700;
}

/* ===========================================
   MODULES
   =========================================== */

.section--modules {
  position: relative;
  overflow: hidden;
}

.modules__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center;
  top: -15%;
  will-change: transform;
  z-index: 0;
}

.section--modules .container {
  position: relative;
  z-index: 1;
}

.section--module {
  padding: 72px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.module__header { margin-bottom: 48px; }

/* Email module */
.section--module-email { min-height: 0; display: block; padding: 80px 0; }

.email-module__top {
  /* title sits in grid row 1, col 1 */
}

.email-module__persona-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  margin-bottom: 4px;
}

/* 2-column, 2-row grid: title+dashboard on left, panel spans full height on right */
.email-module__layout {
  display: grid;
  grid-template-columns: 2.25fr 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 24px;
  row-gap: 20px;
  align-items: start;
  position: relative;
  transition: grid-template-columns 0.4s ease;
}
.email-module__layout.panel-collapsed {
  grid-template-columns: 4fr 0.4fr;
}
.email-module__layout .email-module__top {
  grid-column: 1;
  grid-row: 1;
}
.email-module__layout .email-module__dashboard {
  grid-column: 1;
  grid-row: 2;
}
.email-module__layout .email-module__panel {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.section--module .container { display: block; }

.email-module__dashboard > img,
.email-module__dashboard .onboarding-anim__base,
.email-module__dashboard .cfo-anim__base,
.email-module__dashboard .cfo-crossfade__base,
.email-module__dashboard .email-hover__base {
  width: 100%;
  display: block;
}

.email-module__dashboard { position: relative; }

/* ── Shrink module dashboard visuals to ~80% so they take up less visual space ── */
.email-module__dashboard > img,
.email-module__dashboard > iframe,
.email-module__dashboard > .email-module__visual,
.email-module__dashboard > .onboarding-anim,
.email-module__dashboard > .lifecycle-carousel {
  width: 70%;
  margin: 0 auto;
}

/* ── Email Security dashboard: static relationship-map image + animated graph overlay
   (reused from the use-case page's "From seeing risk to understanding it" section) ── */
.email-module__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1064;
  background: #0A0206;
  overflow: hidden;
}
.email-module__visual-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.email-module__graph-overlay {
  position: absolute;
  left: 12.15%;
  top: 28.25%;
  width: 56.8%;
  pointer-events: auto;
  z-index: 4;
}
.email-module__graph-overlay iframe {
  width: 100%;
  border: none;
  display: block;
  aspect-ratio: 1100 / 600;
  background: transparent;
}

/* ===========================================
   MODULES OVERVIEW — Security / Supply Chain / Finance
   3-column compact overview replacing the old 5 detailed
   module sections. Each graph is a chrome-less, animation-only
   component embedded via iframe, matching the Figma crop:
     - Security: mailbox ↔ domain relationship graph (particles in motion)
     - Supply Chain ("Trusted Network"): gentle idle-drift graph, topbar/panel stripped
     - Finance: rotating globe (sped up) with periodic transaction arcs
   =========================================== */
.section--modov { min-height: 0; display: block; padding: 96px 0 140px; }

.modov__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 72px;
  align-items: start;
}

.modov__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Title + tagline sit close together as one header block; the larger
   gaps remain only above (to the graph) and below (to the cards). */
.modov__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Graph boxes ──
   Each thumbnail is now an <a> (href is a placeholder "#" until the real
   module pages exist — see trustmi-main.html), so it needs block display,
   link styling reset, and a hover affordance to read as clickable. */
.modov__graph {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: #0A0206;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.modov__graph:hover,
.modov__graph:focus-visible {
  box-shadow: 0 8px 24px rgba(10, 2, 6, 0.18);
  transform: translateY(-2px);
}
/* Rectangle, but less narrow than the original ~1.8:1 — the square (1:1)
   version didn't land well, so this splits the difference (~4:3) instead:
   still clearly a rectangle, just taller than before, which is also what
   reads as "bigger" since column width is fixed by the 3-up grid. */
.modov__graph--security { aspect-ratio: 4 / 3; }
.modov__graph--supply {
  aspect-ratio: 4 / 3;
  background: #ffffff;
  border: 1px solid #e8ebf2;
}
.modov__graph--finance {
  aspect-ratio: 4 / 3;
  background: #ffffff;
  border: 1px solid #e8ebf2;
}

/* All three graphs are now chrome-less, self-sizing animation
   components (no dashboard UI) — simple 100% fill, no scale hacks. */
.modov__graph-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}

/* Small "view module" arrow badge — hidden until the thumbnail is
   hovered/focused, signaling that it leads somewhere (real destination
   to be wired up later). */
.modov__graph-arrow {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: #0A0206;
  opacity: 0;
  transform: translate(4px, 4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.modov__graph--security .modov__graph-arrow {
  background: rgba(255, 255, 255, 0.92);
}
.modov__graph:hover .modov__graph-arrow,
.modov__graph:focus-visible .modov__graph-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

/* ── Title / tagline ── */
.modov__title {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.14px;
  color: var(--text-dark);
}
.modov__tagline {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-dark);
  /* Reserve space for 2 lines even when the copy only wraps to 1, so the
     graph thumbnail below always starts at the same height across all 3
     columns — otherwise a shorter tagline makes its column's graph sit
     higher than the others ("staircase" misalignment). */
  min-height: 36px;
}

/* (The persona-card rows that used to sit under each graph — .modov__cards,
   .modov__card, etc. — were removed from the HTML earlier this project
   when the avatars/descriptions were dropped from this section, so those
   rules were deleted here too rather than left as dead CSS.) */

@media (max-width: 1100px) {
  .modov__grid { grid-template-columns: 1fr; gap: 56px; }
}

/* Touch devices have no hover state, so the "view module" arrow badge
   above would otherwise never be visible — show it at rest instead of
   only on hover/focus. (The links are placeholders for now per the TODOs
   in trustmi-main.html, but the affordance should already work once
   they're wired up.) */
@media (hover: none) {
  .modov__graph-arrow {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* ── "Learn about this module" button ── */
.module__usecase-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 13px 12px;
  border-radius: 12px;
  border: 1.5px solid #0A0206;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #0A0206;
  text-decoration: none;
  background: #fff;
  transition: background 0.2s, border-color 0.2s;
}
.module__usecase-btn:hover {
  background: rgba(10, 2, 6, 0.04);
}
.module__usecase-btn--disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}
.module__usecase-btn--secondary {
  margin-top: 0;
  padding: 9px 12px;
  font-size: 12px;
  border-radius: 10px;
}
.email-module__title-row {
  display: flex;
  align-items: center;
  gap: 25px;
}

.email-hover__arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}

.email-module__dashboard:hover .email-hover__arrows {
  opacity: 1;
}

/* ── theme slider ── */
.theme-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
}
.theme-slider__dark {
  width: 100%;
  height: auto;
  display: block;
}
.theme-slider__light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 50% 0 0);
}
.theme-slider__line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255,255,255,0.85);
  transform: translateX(-50%);
  z-index: 9;
  pointer-events: none;
}
.theme-slider__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  z-index: 10;
}

@keyframes sliderHint {
  0%   { left: 100%; }
  45%  { left: 45%; }
  100% { left: 100%; }
}

@keyframes sliderHintReveal {
  0%   { clip-path: inset(0 0% 0 0); }
  45%  { clip-path: inset(0 55% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}

.theme-slider--hinting .theme-slider__handle {
  animation: sliderHint 1.4s ease-in-out forwards;
}
.theme-slider--hinting .theme-slider__line {
  animation: sliderHint 1.4s ease-in-out forwards;
}
.theme-slider--hinting .theme-slider__light {
  animation: sliderHintReveal 1.4s ease-in-out forwards;
}

.email-hover__arrow {
  pointer-events: all;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}

.email-hover__arrow:hover {
  background: rgba(255,255,255,1);
  border-color: rgba(0,0,0,0.3);
}

.email-hover__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.email-hover__stack {
  position: relative;
  display: block;
  line-height: 0;
  overflow: hidden;
}

/* ── Vendor Onboarding scroll animation ── */
.onboarding-anim {
  position: relative;
  line-height: 0;
  overflow: hidden;
}
.onboarding-anim__base {
  width: 100%;
  height: auto;
  display: block;
}
.onboarding-anim__scroll {
  position: absolute;
  top: 8%;
  left: 3%;
  width: 60%;
  transform: translateY(0%);
}
@keyframes onboardingScroll {
  0%   { transform: translateY(0%); }
  100% { transform: translateY(-45%); }
}
.onboarding-anim.animated .onboarding-anim__scroll {
  animation: onboardingScroll 12s linear forwards;
}
.onboarding-anim__ask {
  position: absolute;
  bottom: 4%;
  left: 3%;
  width: 60%;
  z-index: 10;
}

/* ── CFO crossfade ── */
.cfo-crossfade {
  position: relative;
  line-height: 0;
  overflow: hidden;
}
.cfo-crossfade__base {
  width: 100%;
  height: auto;
  display: block;
}
.cfo-crossfade__tooltip {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.reveal-image.visible .cfo-crossfade__tooltip {
  opacity: 1;
  transition-delay: 1s;
}

/* ── CFO Dashboard animation ── */
.cfo-anim {
  position: relative;
  display: block;
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
}
.cfo-anim__base {
  width: 100%;
  height: auto;
  display: block;
}
.cfo-anim__layer {
  position: absolute;
  height: auto;
}

/* Green arc — 199/1152 = 17%, draws left to right */
.cfo-anim__green {
  width: 17%;
  top: 22%;
  left: 19%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Red arc — 159/1152 = 14%, draws left to right */
.cfo-anim__red {
  width: 14%;
  top: 27%;
  left: 22%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tooltip overlay — full size, fades in over base */
.cfo-anim__tooltips {
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.cfo-anim.animated .cfo-anim__green    { clip-path: inset(0 0% 0 0); transition-delay: 0.3s; }
.cfo-anim.animated .cfo-anim__red      { clip-path: inset(0 0% 0 0); transition-delay: 0.9s; }
.cfo-anim.animated .cfo-anim__tooltips { opacity: 1; transition-delay: 1.6s; }

.email-hover__base {
  width: 100%;
  display: block;
}

/* Layer 1: clip-path reveal with small delay so it's noticeable */
.email-hover__layer--1 {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translateX(-100%);
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* State 1: slide in from left */
.email-hover__stack[data-state="1"] .email-hover__layer--1 {
  transform: translateX(0);
}

/* State 2: slide out to the right */
.email-hover__stack[data-state="2"] .email-hover__layer--1 {
  transform: translateX(100%);
}

/* Layer 2: starts off-screen left, slides in from left */
.email-hover__layer--2 {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  transform: translateX(-100%);
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.email-hover__stack[data-state="2"] .email-hover__layer--2 {
  transform: translateX(0);
}

.email-module__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 28px 32px;
  position: relative;
  min-width: 0;
  overflow-y: auto;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.email-module__panel.is-hiding {
  opacity: 0;
  transform: translateX(10px) scale(0.98);
  pointer-events: none;
}
.email-module__panel.is-showing {
  opacity: 0;
  transform: translateX(10px) scale(0.98);
}

/* Close button — top-right corner inside panel */
.panel-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #64748b;
  flex-shrink: 0;
  transition: background 0.15s;
  z-index: 5;
}
.panel-toggle:hover { background: #e2e8f0; }

/* Collapsed state */
.email-module__layout.panel-collapsed .email-module__panel .email-module__desc,
.email-module__layout.panel-collapsed .email-module__panel .email-module__need,
.email-module__layout.panel-collapsed .email-module__panel .email-module__experience,
.email-module__layout.panel-collapsed .email-module__panel .email-module__impact {
  display: none;
}
.email-module__layout.panel-collapsed .email-module__panel .email-module__persona-area {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ── Email module: slide-panel behavior ── */
.section--module-email .email-module__layout {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  transition: none;
  align-items: start;
}
/* title row spans both columns */
.section--module-email .email-module__top {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.section--module-email .email-module__top-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* dashboard + panel share the same row — row height = dashboard image height */
.section--module-email .email-module__layout .email-module__dashboard {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}
.section--module-email .email-module__right {
  position: absolute;
  grid-row: 2;
  grid-column: 1;
  right: 0;
  top: 0;
  bottom: 0;
  width: 360px;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
}
.section--module-email .email-module__panel {
  overflow: hidden;
  width: 360px;
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: row;
  transform: translateX(0);
  transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  border-radius: 0;
  border-left: 1px solid #E8EBF2;
}
.section--module-email .email-module__panel.is-collapsed {
  transform: translateX(100%);
  pointer-events: none;
  box-shadow: none;
  border-left: none;
}
.panel-peek {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: auto;
  padding: 0 0 12px 16px;
  gap: 6px;
}
.panel-peek__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.panel-body {
  flex-shrink: 0;
  width: 360px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.panel-peek__role {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dark);
  white-space: nowrap;
  text-align: center;
}
.section--module-email .panel-toggle {
  position: static;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.section--module-email .panel-toggle svg {
  transition: transform 0.3s ease;
}
.section--module-email .email-module__panel.is-collapsed .panel-toggle svg {
  transform: rotate(180deg);
}
@keyframes panelPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(100,116,139,0); }
  50%       { box-shadow: 0 0 0 5px rgba(100,116,139,0.14); }
}
.section--module-email .email-module__panel.is-collapsed .panel-toggle {
  animation: panelPulse 2.8s ease-in-out infinite;
}
.section--module-email .email-module__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ── Overlay panel: CFO / Onboarding / AP / Lifecycle ── */
.section--module-cfo .email-module__layout,
.section--module-onboarding .email-module__layout,
.section--module-ap .email-module__layout,
.section--module-lifecycle .email-module__layout {
  grid-template-columns: 1fr;
  align-items: start;
}

.section--module-cfo .email-module__top,
.section--module-onboarding .email-module__top,
.section--module-ap .email-module__top,
.section--module-lifecycle .email-module__top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.email-module__top-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section--module-cfo .email-module__right,
.section--module-onboarding .email-module__right,
.section--module-ap .email-module__right,
.section--module-lifecycle .email-module__right {
  position: absolute;
  grid-row: 2;
  grid-column: 1;
  right: 0;
  top: 0;
  bottom: 0;
  width: 360px;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
}

.section--module-cfo .email-module__panel,
.section--module-onboarding .email-module__panel,
.section--module-ap .email-module__panel,
.section--module-lifecycle .email-module__panel {
  width: 360px;
  height: 100%;
  padding: 24px 28px;
  overflow-y: auto;
  transform: translateX(0);
  transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  border-radius: 0;
  border-left: 1px solid #E8EBF2;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section--module-cfo .email-module__panel.is-collapsed,
.section--module-onboarding .email-module__panel.is-collapsed,
.section--module-ap .email-module__panel.is-collapsed,
.section--module-lifecycle .email-module__panel.is-collapsed {
  transform: translateX(100%);
  pointer-events: none;
  box-shadow: none;
  border-left: none;
}

.section--module-cfo .panel-toggle,
.section--module-onboarding .panel-toggle,
.section--module-ap .panel-toggle,
.section--module-lifecycle .panel-toggle {
  position: static;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  transition: background 0.15s;
}

/* Onboarding: center image without enlarging when panel is collapsed */
.section--module-onboarding .email-module__layout.panel-collapsed .email-module__dashboard {
  display: flex;
  justify-content: center;
}
.section--module-onboarding .email-module__layout.panel-collapsed .onboarding-anim {
  width: auto;
  max-width: 60%;
}


.email-module__persona-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.email-module__icons {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}

.email-module__icons-img {
  height: 30px;
  width: auto;
  display: block;
}

.email-module__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 50%;
  font-size: 0.72rem;
  color: var(--text-dark);
}

.email-module__photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.email-module__photo--sm {
  width: 40px;
  height: 40px;
  align-self: center;
}

/* Lifecycle: hide icons when panel is collapsed */
.section--module-lifecycle .email-module__layout.panel-collapsed .email-module__icons {
  display: none;
}

.email-module__persona-name {
  font-weight: 500;
  font-size: 0.72rem;
  margin: 0;
}

.email-module__persona-role {
  font-weight: 300;
  font-size: 0.64rem;
  color: var(--text-dark);
  margin: 0;
}

.email-module__persona-role {
  font-weight: 300;
  font-size: 0.68rem;
  color: var(--text-dark);
  margin: 0;
}

.email-module__desc {
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--text-dark);
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 4px;
}

.email-module__need {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.email-module__experience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.email-module__exp-col h5 {
  font-weight: 700;
  font-size: 0.68rem;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.email-module__exp-col ul {
  list-style: disc;
  padding-left: 16px;
  margin: 0;
}

.email-module__exp-col li {
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.7;
  padding-left: 0;
  position: static;
}

.email-module__exp-col li::before {
  display: none;
}

.email-module__impact {
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.email-module__impact-label {
  font-weight: 700;
  font-size: 0.65rem;
  margin-bottom: 4px;
}

.email-module__impact-text {
  font-weight: 300;
  font-size: 0.65rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.email-module__impact-list {
  list-style: disc;
  padding-left: 16px;
  margin: 0 0 16px;
}

.email-module__impact-list li {
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.7;
}

.email-crit-value--medium { color: var(--coral); }
.email-crit-value--low { color: var(--text-muted); }

.email-module__criticality {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.email-crit-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.email-crit-label {
  font-size: 0.56rem;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.3;
}

.email-crit-value {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--navy);
}

.module__name {
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.module__tagline {
  font-weight: 300;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.module__layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: start;
}

.module__ui-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.module__ui--secondary {
  opacity: 0.92;
}

.module__ui {
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,0.1);
}
.module__ui img { width: 100%; }

.module__persona {
  font-weight: 400;
  font-size: 0.68rem;
  margin-bottom: 8px;
}

.module__core-need {
  font-weight: 400;
  font-size: 0.88rem;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 20px;
}

.module__experience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.module__exp-col h4 {
  font-weight: 400;
  font-size: 0.68rem;
  margin-bottom: 6px;
}
.module__exp-col li {
  font-weight: 400;
  font-size: 0.64rem;
  line-height: 1.6;
  padding-left: 14px;
  position: relative;
}
.module__exp-col li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--navy);
}

.module__impact {
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.module__impact-label { font-weight: 400; font-size: 0.8rem; margin-bottom: 4px; }
.module__impact-text { font-weight: 400; font-size: 0.68rem; margin-bottom: 12px; line-height: 1.7; }

.module__criticality { display: flex; gap: 10px; flex-wrap: wrap; }
.crit {
  font-weight: 400;
  font-size: 0.56rem;
  padding: 3px 10px;
  border-radius: 12px;
}
.crit--high { background: rgba(47,73,137,0.1); color: var(--navy); }
.crit--medium { background: rgba(247,112,112,0.1); color: var(--coral); }

/* ===========================================
   SCREENSHOTS
   =========================================== */

.section--screenshots { padding: 80px 0; }

.screenshot-full {
  margin-bottom: 64px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,0.08);
}
.screenshot-full:last-child { margin-bottom: 0; }
.screenshot-full img { width: 100%; }
.screenshot-full__caption {
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  padding: 16px 0;
}

/* ===========================================
   BUSINESS IMPACT
   =========================================== */

.section--business-impact {
  padding: 120px 0;
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.business-impact__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.business-impact__text .section__title-xl {
  margin-bottom: 32px;
  color: #fff;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
}
.business-impact__image {
  position: relative;
}
.business-impact__image img {
  width: 37%;
  height: auto;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.impact-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.impact-cloud {
  position: absolute;
  fill: white;
}

.impact-cloud--1 {
  width: 42%;
  top: 8%;
  left: 5%;
  opacity: 0.07;
  animation: cloudDrift1 30s ease-in-out infinite;
}
.impact-cloud--2 {
  width: 52%;
  top: 38%;
  right: -4%;
  opacity: 0.05;
  animation: cloudDrift2 42s ease-in-out infinite;
}
.impact-cloud--3 {
  width: 28%;
  top: 4%;
  right: 18%;
  opacity: 0.06;
  animation: cloudDrift3 24s ease-in-out infinite;
}

@keyframes cloudDrift1 {
  0%, 100% { transform: translateX(0)    translateY(0); }
  50%       { transform: translateX(-18px) translateY(-7px); }
}
@keyframes cloudDrift2 {
  0%, 100% { transform: translateX(0)   translateY(0); }
  50%       { transform: translateX(14px) translateY(-10px); }
}
@keyframes cloudDrift3 {
  0%, 100% { transform: translateX(0)   translateY(0); }
  40%       { transform: translateX(9px)  translateY(-5px); }
}

/* Float animation — remove class "impact-float" from img to revert */
@keyframes impactFloat {
  0%   { transform: translateY(0px)   rotate(6deg); }
  30%  { transform: translateY(-10px) rotate(7.5deg); }
  60%  { transform: translateY(-5px)  rotate(5.5deg); }
  100% { transform: translateY(0px)   rotate(6deg); }
}
.impact-float {
  animation: impactFloat 4s ease-in-out infinite;
  transform-origin: center bottom;
}
.business-impact__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.business-impact__list li {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: #fff;
}
.business-impact__list strong {
  font-weight: 600;
}

/* ===========================================
   LOOK AND FEEL
   =========================================== */

.section--look-feel { padding: 0; }

.look-feel__intro {
  text-align: left;
  margin-bottom: 64px;
}
.look-feel__title-row {
  margin-bottom: 0;
  padding: 120px 80px 0;
}
.look-feel__pen {
  display: block;
  margin: 96px auto 0;
  width: 110px;
  height: 107px;
}
.pen-path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}
.lf-scene--intro.lf-scene--active .pen-path {
  animation: penDraw 4s ease forwards 0.5s;
}
@keyframes penDraw {
  to { stroke-dashoffset: 0; }
}
.look-feel__title {
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.look-feel__subtitle {
  font-size: 48px;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.1;
  margin: 0;
}
/* ── Look & Feel sticky scenes ── */
.lf-sticky-container { height: 600vh; margin-top: 0; }
.lf-sticky-scene {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.lf-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  padding: 120px 80px 60px;
}
.lf-scene--active {
  opacity: 1;
  pointer-events: auto;
}
.lf-scene__title {
  font-size: clamp(0.88rem, 1.6vw, 1.28rem);
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 8px;
}
.lf-scene__subtitle {
  font-size: clamp(0.68rem, 0.96vw, 0.8rem);
  font-weight: 500;
  color: var(--text-dark);
  margin: 0 0 32px;
}
.lf-scene__image {
  flex: 1;
  display: flex;
  align-items: flex-start;
}
.lf-scene__image img {
  max-width: 100%;
  max-height: calc(100vh - 240px);
  object-fit: contain;
  object-position: left top;
}
.lf-scene__cols {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 24px;
  align-items: start;
}
.lf-scene__col img {
  width: 100%;
  max-height: calc(100vh - 280px);
  object-fit: contain;
  object-position: left top;
}
.lf-scene__col-labels {
  display: flex;
  gap: 32px;
  margin: 0 0 20px;
}
.lf-scene__col-label {
  font-size: 0.76rem;
  color: var(--text-dark);
}
.lf-scene__col-label strong {
  font-weight: 700;
}
@media (max-width: 768px) {
  .lf-sticky-container { height: auto; }
  .lf-sticky-scene { position: static; height: auto; overflow: visible; }
  .lf-scene {
    position: static; opacity: 1; transform: none;
    transition: none; pointer-events: auto;
    padding: 40px 24px; display: flex;
  }
}


.lifecycle-carousel {
  width: 100%;
  line-height: 0;
  background: var(--light-bg);
}
.lifecycle-carousel img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===========================================
   FOOTER
   =========================================== */

.case-footer { padding: 64px 0; text-align: center; }
.case-footer .container { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.case-footer__back { font-weight: 300; font-size: 0.8rem; color: var(--coral); transition: opacity 0.3s; }
.case-footer__back:hover { opacity: 0.7; }
.case-footer__copyright { font-weight: 300; font-size: 0.68rem; color: var(--text-muted); }

/* ===========================================
   ANIMATIONS
   =========================================== */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-image {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-image.visible { opacity: 1; transform: translateY(0); }

/* Stagger animation delays */
.stagger--1 { transition-delay: 0s; }
.stagger--2 { transition-delay: 0.3s; }
.stagger--3 { transition-delay: 0.6s; }
.stagger--4 { transition-delay: 0.9s; }

/* System Realities — longer delays */
.sys-realities__items .stagger--1 { transition-delay: 0.4s; }
.sys-realities__items .stagger--2 { transition-delay: 1.0s; }
.sys-realities__items .stagger--3 { transition-delay: 1.6s; }
.sys-realities__items .stagger--4 { transition-delay: 2.2s; }


/* ===========================================
   RESPONSIVE
   =========================================== */

@media (max-width: 1024px) {
  .sys-realities__layout { grid-template-columns: 1fr; gap: 48px; margin-top: 100px; }
  .constraints__grid { flex-direction: column; gap: 48px; }
  .persona-flows__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .container { padding: 0 24px; }
  .section { padding: 80px 0; }
  .section--fullscreen { min-height: 80vh; }
  .section--research, .section--phase1, .section--phase2, .section--outcome { padding: 100px 0; }

  .section__subtitle-lg { white-space: normal; }

  .cover__logo { height: clamp(24px, 8vw, 48px); margin-bottom: 80px; }

  .problem1__layout { grid-template-columns: 1fr; min-height: auto; }
  .problem1__photo { min-height: 50vh; }
  .problem1__photo h2 { font-size: 23px; }
  .problem1__integrations { padding: 48px 24px; gap: 36px; }
  .stat-approx { font-size: clamp(2rem, 4.8vw, 3.2rem); }
  .stat-number { font-size: clamp(2rem, 4.8vw, 3.2rem); }

  .problem2__layout { grid-template-columns: 1fr; min-height: auto; }
  .problem2__left { padding: 48px 24px; order: 1; }
  .problem2__right { min-height: 40vh; order: 0; }

  .ciso__layout { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; }
  .ciso__persona { align-items: center; text-align: center; padding-left: 0; }
  .ciso__photo { width: 120px; height: 120px; }
  .ciso__roles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 1.6;
  }
  .ciso__roles li { display: inline; }
  .ciso__roles li:not(:last-child)::after { content: "\00a0|\00a0"; opacity: 0.6; }
  .section--ciso .container { display: flex; flex-direction: column; }
  .ciso__footer {
    position: static;
    order: -1;
    font-size: clamp(1.3rem, 6vw, 2rem);
    margin-bottom: 24px;
    padding: 0 24px;
  }
  .empathy__grid { gap: 24px 24px; grid-template-columns: 1fr; }
  .empathy__quadrant { padding: 0 24px; max-width: none; }
  .empathy__quadrant--needs,
  .empathy__quadrant--thinks,
  .empathy__quadrant--does,
  .empathy__quadrant--feels { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .empathy__center { grid-column: 1; grid-row: auto; order: -1; margin: 0 auto 8px; }
  .empathy__map-img { max-width: 280px; width: 100%; height: auto; }

  /* The coral accent border sits flush against the page edge once the mobile
     container loses its side padding — reads as a stray pink stripe, so drop it here. */
  .section--first-flow { border-left: none; }
  /* Figma splits the title into "CISO" (small caption) / "First User Flow"
     (large) on its own line, instead of one run-on "CISO-First User Flow". */
  .first-flow__title-caption {
    display: block;
    font-size: clamp(0.95rem, 4vw, 1.1rem) !important;
    font-weight: 400 !important;
    margin-bottom: 4px;
  }
  .first-flow__title-dash { display: none; }
  .first-flow__title-main {
    display: block;
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
    line-height: 1.1;
  }
  .first-flow__layout { grid-template-columns: 1fr; gap: 40px; }
  .first-flow__details { flex-wrap: wrap; }
  .first-flow__left { margin-right: 0; overflow: hidden; }
  .module__layout { grid-template-columns: 1fr; }
  .persona-flows__grid { grid-template-columns: repeat(2, 1fr); }
  .challenge__flow { flex-direction: column; gap: 8px; }
  .phase1__objects { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .phase1__layout { grid-template-columns: 1fr; gap: 48px; }
  .phase1__persona-wrap { grid-template-columns: 1fr; gap: 32px; margin: 48px 0; }

  /* Figma mobile mockup inverts the desktop emphasis: a small caption label
     above a large "fill-in-the-blank" value, instead of equal-sized label/value
     side by side — and the highlight sits tight around just the value text,
     not a full-bleed row background. */
  .ptv__row { flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px 0; }
  .ptv__row--highlight { background: none; margin: 0; padding: 24px 0; }
  .ptv__label {
    white-space: normal;
    font-size: clamp(0.85rem, 3.5vw, 0.95rem);
    font-weight: 400;
  }
  .ptv__value {
    font-size: clamp(1.8rem, 9vw, 2.4rem);
    font-weight: 400;
  }
}

@media (max-width: 480px) {
  .module__experience { grid-template-columns: 1fr; }
  .persona-flows__grid { grid-template-columns: 1fr; }
  .phase1__objects { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .object-card__img { width: 56px; height: 56px; }
  /* Match Figma: phases stay side-by-side, bar width proportional to duration (like desktop),
     row scrolls horizontally on narrow screens instead of collapsing the proportion */
  .timeline-chart { height: 84px; overflow-x: auto; overflow-y: hidden; border-radius: 0; -webkit-overflow-scrolling: touch; }
  .tl-grid { display: none; }
  .tl-bars {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: max-content;
    min-width: 100%;
    height: 100%;
    padding: 0 16px;
    gap: 10px;
    transform: none !important;
  }
  .tl-phase {
    height: 52px;
    padding: 0 16px;
    font-size: 0.78rem;
    white-space: nowrap;
    flex: none;
  }
  .tl-phase--1 { width: 174px; }
  .tl-phase--2 { width: 246px; }
  .timeline-chart.animated .tl-bars,
  .timeline-chart.animated .tl-grid { animation: none; }

  .empathy__grid { grid-template-columns: 1fr; }
  .empathy__quadrant--needs { grid-column: 1; grid-row: auto; }
  .empathy__quadrant--thinks { grid-column: 1; grid-row: auto; }
  .empathy__center { grid-column: 1; grid-row: auto; }
  .empathy__quadrant--does { grid-column: 1; grid-row: auto; }
  .empathy__quadrant--feels { grid-column: 1; grid-row: auto; }
  .empathy__map-img { max-width: 250px; }

  .problem1__photo { padding: 48px 24px; }
  .problem1__stat-label { max-width: none; }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-image { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* PRINT */
@media print {
  .reveal, .reveal-image { opacity: 1 !important; transform: none !important; }
  .section { page-break-inside: avoid; }
  .section--dark { background: white !important; color: black !important; }
}

/* ============================================================
   MOBILE RESPONSIVE — iPhone 6 (375px) and up to 768px
   All rules below are additive overrides inside @media blocks.
   Desktop styles above are never touched.
   ============================================================ */

/* ── 1. COVER (per Figma mobile mockup: tagline splits into 3 lines
   instead of wrapping wherever the viewport happens to cut it, and gets
   more breathing room before "Since 2021") ── */
@media (max-width: 768px) {
  .cover__tags-seg { display: block; }
  .cover__since { margin-top: 24px; }
}

/* ── 2. CONTEXT ── */
@media (max-width: 768px) {
  .section--context { padding: 60px 0; }
  .context__icon img { width: 60px !important; height: auto !important; }

  /* Figma gives "Payment Security" its own large display treatment instead
     of matching the unified heading scale above, with the subtitle staying
     small/light — a bigger jump than the rest of the site's headings get. */
  .context__subtitle {
    display: block;
    font-size: clamp(0.95rem, 4vw, 1.1rem) !important;
    font-weight: 400 !important;
    margin-bottom: 8px;
  }
  .context__title-main {
    display: block;
    font-size: clamp(2.4rem, 13vw, 3.6rem) !important;
    line-height: 1.05;
  }
}

/* ── 3. PROBLEM 1: widen text panel, keep scroll animation ── */
@media (max-width: 768px) {
  .p1-left-panel {
    width: 62%;
    left: 24px;
    transform: none;
    top: auto;
    bottom: auto;
    align-items: flex-start;
    padding-top: 96px;
    padding-bottom: 48px;
  }
  .p1-chaos-header { font-size: clamp(1.1rem, 4.5vw, 1.6rem); }
  .p1-cat-wrap {
    left: 8%;
    width: clamp(160px, 42vw, 240px);
  }
  .p1-left-panel--landed { padding-top: 96px; }
  .p1-stat-value .stat-approx,
  .p1-stat-value .stat-number { font-size: clamp(2.2rem, 11vw, 3.5rem); }
  .p1-stat-label-top { font-size: clamp(0.8rem, 3.5vw, 1rem); }
}

/* ── 4. PROBLEM 2 ──
   Mobile swaps the desktop side-by-side layout for a pinned-image effect
   (per Figma's 3-frame mobile mockup): the illustration stays fixed while
   the title / threat list / stat scroll past over it. */
@media (max-width: 768px) {
  .problem2__left,
  .problem2__img,
  .city-lights,
  .lamp-flicker {
    display: none !important;
  }
  .section--problem2::after { content: none; }
  /* overflow:hidden on the section breaks position:sticky below (it becomes
     the sticky containing block, but never itself scrolls) — nothing left
     inside this section on mobile needs the clipping, so drop it here. */
  .section--problem2 { overflow: visible !important; }

  .problem2__mobile-pin {
    display: block;
    position: relative;
    height: 300vh;
  }
  .problem2__pin-media {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
  }
  .problem2__pin-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 66%;
  }
  .problem2__pin-slide {
    position: absolute;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    padding: 64px 24px 0;
  }
  .problem2__pin-slide--1 { top: 0; }
  .problem2__pin-slide--2 { top: 100vh; }
  .problem2__pin-slide--3 { top: 200vh; }

  .problem2__mobile-pin .problem2__threat-title { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .problem2__mobile-pin .problem2__threats { font-size: clamp(0.95rem, 4vw, 1.15rem); opacity: 0.75; }
  .problem2__mobile-pin .problem2__stat-value .stat-number { font-size: clamp(3rem, 14vw, 5.5rem); }
  .problem2__mobile-pin .problem2__stat-prefix { font-size: clamp(1.6rem, 7vw, 3rem); }
  .problem2__mobile-pin .problem2__stat-label { font-size: clamp(1rem, 4.5vw, 2rem); }
}

/* ── 7. PRODUCT SHIFT ──
   Figma gives the title the same small-caption/big-display split as
   Context's "Payment Security", and treats each persona as a compact
   badge (small avatar + name + one wrapping, pipe-separated role line)
   rather than the desktop's large hero avatar + stacked role list. */
@media (max-width: 768px) {
  .section--product-shift .section__title-display {
    margin-bottom: 40px;
    margin-top: 0;
    text-align: left;
  }
  .product-shift__title-caption {
    display: block;
    font-size: clamp(0.95rem, 4vw, 1.1rem) !important;
    font-weight: 400 !important;
    margin-bottom: 4px;
  }
  .product-shift__title-main {
    display: block;
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
    line-height: 1.1;
  }
  .product-shift__header { text-align: left; }

  .product-shift__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 100%;
  }
  /* Show all personas without waiting for scroll-triggered animation */
  .product-shift__persona--infosec,
  .product-shift__persona--finance,
  .product-shift__persona--procurement {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .product-shift__avatar { width: 76px; height: 76px; margin: 0 0 16px; }
  .product-shift__name { font-size: 22px; margin-bottom: 8px; }
  /* Pipe-separated, wrapping line instead of one role per row — same
     technique as the InfoSec roles list in the ICP section above. */
  .product-shift__roles { display: block; }
  .product-shift__roles li { display: inline; }
  .product-shift__roles li:not(:last-child)::after { content: "\00a0|\00a0"; opacity: 0.6; }
}

/* ── 8. CHALLENGES GRID ── */
@media (max-width: 768px) {
  .challenges-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 56px;
  }
  .challenge-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-row: auto;
  }
}

/* ── 10. SYSTEM REALITIES ── */
@media (max-width: 768px) {
  .sys-realities__item-title { font-size: 20px; }
}

/* ── 11. CONSTRAINTS / TIMELINE ── */
@media (max-width: 768px) {
  .timeline__header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .timeline__anchor-img { width: clamp(160px, 55vw, 260px); }
  .constraints__title-caption {
    display: block;
    font-size: clamp(0.95rem, 4vw, 1.1rem) !important;
    font-weight: 400 !important;
    margin-bottom: 4px;
  }
  .constraints__title-main {
    display: block;
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
    line-height: 1.1;
  }
}

/* ── MODULES: all email-module__layout → single column ── */
@media (max-width: 768px) {

  /* Generic layout used by cfo/onboarding/ap/lifecycle modules */
  .email-module__layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto;
    column-gap: 0;
    row-gap: 24px;
  }
  .email-module__layout .email-module__top    { grid-column: 1; grid-row: 1; }
  .email-module__layout .email-module__dashboard { grid-column: 1; grid-row: 2; }
  .email-module__layout .email-module__panel  { grid-column: 1; grid-row: 3; }

  /* Email module: disable sliding panel, show as full-width block */
  .section--module-email .email-module__layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .section--module-email .email-module__top {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .email-module__title-row {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .section--module-email .email-module__layout .email-module__dashboard {
    grid-column: 1;
    grid-row: 2;
  }
  .section--module-email .email-module__right,
  .section--module-cfo .email-module__right,
  .section--module-onboarding .email-module__right,
  .section--module-ap .email-module__right,
  .section--module-lifecycle .email-module__right {
    position: static;
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    overflow: visible;
    height: auto;
  }

  .section--module-cfo .email-module__panel,
  .section--module-onboarding .email-module__panel,
  .section--module-ap .email-module__panel,
  .section--module-lifecycle .email-module__panel,
  .section--module-cfo .email-module__panel.is-collapsed,
  .section--module-onboarding .email-module__panel.is-collapsed,
  .section--module-ap .email-module__panel.is-collapsed,
  .section--module-lifecycle .email-module__panel.is-collapsed {
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    overflow-y: visible !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  .section--module-cfo .panel-toggle,
  .section--module-onboarding .panel-toggle,
  .section--module-ap .panel-toggle,
  .section--module-lifecycle .panel-toggle {
    display: none;
  }
  .section--module-email .email-module__panel,
  .section--module-email .email-module__panel.is-collapsed {
    width: 100% !important;
    overflow: visible !important;
    flex-direction: column !important;
    padding: 24px !important;
    height: auto !important;
    transform: none !important;
    pointer-events: auto !important;
    border-radius: 12px;
    background: #fff;
  }
  /* Fixed 360px desktop panel width was forcing the whole module card wider than the viewport */
  .panel-body {
    width: 100% !important;
    flex-shrink: 1 !important;
    padding: 0 !important;
  }
  /* Hide the toggle button — panel always visible on mobile */
  .section--module-email .panel-toggle { display: none; }
  .panel-peek { display: none; }

  /* Restore panel content that JS collapses on desktop */
  .email-module__layout.panel-collapsed .email-module__panel .email-module__desc,
  .email-module__layout.panel-collapsed .email-module__panel .email-module__need,
  .email-module__layout.panel-collapsed .email-module__panel .email-module__experience,
  .email-module__layout.panel-collapsed .email-module__panel .email-module__impact {
    display: block !important;
  }
  .email-module__layout.panel-collapsed .email-module__panel .email-module__persona-area {
    border-bottom: 1px solid rgba(0,0,0,0.07);
    padding-bottom: 16px;
    margin-bottom: 4px;
  }

  /* Other modules: show panel as a padded card */
  .email-module__panel { padding: 24px; }

  /* Experience grid stays 2 columns (already defined as 1fr 1fr, fits mobile fine) */
}

/* ── BUSINESS IMPACT ── */
@media (max-width: 768px) {
  .section--business-impact { min-height: unset; padding: 80px 0; }
  .business-impact__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .business-impact__image { display: none; }
}

/* ── LOOK AND FEEL: fix title-row padding ── */
@media (max-width: 768px) {
  .look-feel__title-row { padding: 60px 24px 0; }
  /* lf-scene padding is already handled in the existing mobile block above */
  .lf-scene__image img { max-height: 55vw; }
  .lf-scene__cols { grid-template-columns: 1fr; }
  .lf-scene__col-labels { flex-direction: column; gap: 8px; }
}

/* ── iPhone 6 (375px) final adjustments ── */
@media (max-width: 375px) {
  .container { padding: 0 16px; }
  .p1-chaos-header { font-size: 1rem; }
  .p1-left-panel { padding-top: 96px; padding-bottom: 40px; }
  .sys-realities__item-title { font-size: 17px; }
  .product-shift__name { font-size: 24px; }
  .look-feel__title-row { padding: 48px 16px 0; }
}