/* ==========================================================================
   Home page sections
   ========================================================================== */

/* ---- 1. Hero ---- */
.hero {
  background: var(--gradient-hero);
  color: var(--color-white);
  padding: var(--hero-pad-top) 0 var(--hero-pad-bottom);
  overflow: hidden;
}
.hero__content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
  text-align: center;
  margin-bottom: calc(-1 * var(--space-6));
}
.hero__title { font-size: var(--fs-display-xl); line-height: var(--lh-display); text-wrap: balance; letter-spacing: 0.02em; }
.hero__title span { display: block; }
.hero__text {
  max-width: var(--measure-intro);
  font-size: var(--fs-lead); line-height: var(--lh-lead); text-wrap: pretty;
}
.hero__cta { margin-top: var(--space-2); }
/* Hero photo wall: 12 photos on the inside of a 3D ring (Crowdix-style). Static fan without JS;
   motion.js rotates it. Concave top/bottom edges come from the mask. */
.hero-wall {
  --pw: clamp(200px, 26vw, 470px);           /* panel width */
  --ph: calc(var(--pw) * 0.875);              /* 640 x 560 photos */
  --r: calc(var(--pw) * 2.02);                /* ring radius: 30deg per panel, small gap */
  --rot: 15deg;
  position: relative; width: 100%;
  height: calc(var(--ph) * 1.6);   /* tall enough that the near-side panels are never cut at the top */
  margin-bottom: calc(-1 * var(--space-6));
  overflow: hidden;
}
.hero-wall__stage { position: absolute; inset: 0; perspective: 1000px; }
.hero-wall__ring {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--r) * 0.85)) rotateY(var(--rot));
}
.hero-wall__panel {
  position: absolute; margin: 0;
  width: var(--pw); height: var(--ph);
  left: calc(var(--pw) / -2); top: calc(var(--ph) / -2);
  transform: rotateY(calc(var(--i) * 30deg)) translateZ(calc(var(--r) * -1));
  backface-visibility: hidden;
}
.hero-wall__panel:nth-child(n+3):nth-child(-n+10) { visibility: hidden; }   /* static fan: only the 4 front panels */
.hero-wall__panel img { width: 100%; height: 100%; object-fit: cover; }
.hero__proof {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
}
.avatar-stack { display: flex; }
.avatar-stack__item {
  width: 64px; height: 64px; border-radius: 50%;
  margin-right: -10px;
  object-fit: cover;
  box-shadow: inset 0 0 0 2px var(--color-yellow-400);
  border: 2px solid var(--color-yellow-400);
}
.avatar-stack__count {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--color-yellow-400); color: var(--color-blue-700);
}
.hero__proof-label { font-size: var(--fs-body); line-height: var(--lh-body); }

/* ---- 2. Client logos strip ---- */
.logos { padding: var(--section-pad-y-sm) 0; overflow: hidden; }
.logos__title { max-width: calc(var(--container-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); text-wrap: balance; }
.logos__title { padding-right: max(var(--gutter), calc(var(--container-max) + 2 * var(--gutter) - var(--container-text))); }
.logos__viewport {
  margin-top: var(--space-5); height: 72px; overflow: hidden;
  -webkit-mask-image: url("../assets/icons/logos-mask.svg");
  mask-image: url("../assets/icons/logos-mask.svg");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.logos__track {
  display: flex; align-items: center; gap: var(--space-9);
  width: max-content;
  animation: logos-marquee 40s linear infinite;
}
.logos__item {
  display: flex; align-items: center; justify-content: center;
  height: 72px; flex: none;
}
.logos__item img { height: 44px; width: auto; }   /* one logo height, was ~230-290px wide */
@keyframes logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .logos__track { animation: none; } }

/* ---- 3. What is the future state ---- */
/* Band heads: left on the container like every other page (H2 -> 24px -> lead, lead max 60ch) */
.future__head, .levels__head, .system__head, .results__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); text-align: left; }
.future__head h2, .levels__head h2, .system__head h2, .results__head h2, .coaching__title { max-width: var(--container-text); text-wrap: balance; }
.future__sub, .levels__sub, .system__sub { text-wrap: balance; max-width: var(--measure-intro); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.future__grid {
  margin-top: var(--space-7);
  display: grid; gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr) minmax(0, 1.46fr);
}
.future__col { display: flex; flex-direction: column; gap: var(--grid-gap); }
.future__copy-title {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-tagline); line-height: var(--lh-tight);
}
.future__copy-text { margin-top: var(--space-3); font-family: var(--font-body); color: var(--color-on-dark-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.future__photo {
  position: relative; overflow: hidden;
  background: var(--color-neutral-200);
}
.future__photo img { width: 100%; height: 100%; object-fit: cover; }
.future__photo--team { aspect-ratio: 16 / 10; }
.future__photo--team img { object-position: 30% 50%; }
.future__photo--portrait { background: var(--color-neutral-200); }
.future__photo--portrait img { position: absolute; inset: 0; object-position: 60% 50%; }
.future__quote {
  display: flex; align-items: center; flex: 1;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-display-sm); line-height: var(--lh-tight); letter-spacing: 0.02em; color: var(--color-blue-700);
}
.future__stat {
  display: flex; align-items: center; justify-content: flex-start;
  min-height: 220px; padding: var(--card-pad);
  text-align: left;
}
.future__stat-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.future__stat::after { content: ""; position: absolute; inset: 0; background: var(--overlay-tint); }
.future__stat p { position: relative; z-index: 1; max-width: var(--measure-head); font-size: var(--fs-display-sm); line-height: var(--lh-display); }

/* ---- 4. Coaching video ---- */
.coaching { text-align: left; }
.video {
  container-type: inline-size;
  position: relative; display: block; width: 100%; max-width: 1100px;
  margin: var(--space-7) 0 0;
  aspect-ratio: 1100 / 618.75;
  box-shadow: var(--shadow-rest);
  text-align: left;   /* static card until a video link exists: no pointer, no hover */
}
.video__tint { position: absolute; inset: 0; background: var(--color-primary); opacity: .12; }
/* Collage wrapper: Figma radial mask fades the cards toward the left */
.video__collage {
  position: absolute; inset: 0;
  -webkit-mask-image: url("../assets/icons/video-collage-mask.svg");
  mask-image: url("../assets/icons/video-collage-mask.svg");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
/* Collage of 9 tilted cards (positions in cqw: 1cqw = 11px at full 1100px width) */
.vcard {
  position: absolute;
  width: 31.251cqw; height: 23.438cqw;            /* 343.761 x 257.821 */
  border-radius: 1.875cqw;
  background: var(--color-neutral-300);
  overflow: hidden;
  transform: rotate(-6.62deg);
}
.vcard img { position: absolute; max-width: none; object-fit: cover; }
.vcard__full { left: 50%; top: 0; width: 33.282cqw; transform: translateX(-50%); }
.vcard__q { width: 16.641cqw; height: 29.869cqw; }
/* wrapper top-left + (371.198-343.761)/2 and (295.741-257.821)/2 offsets folded in */
.vcard--1 { left: 89.849cqw; top: 38.026cqw; }
.vcard--2 { left: 56.944cqw; top: 41.846cqw; }
.vcard--3 { left: 24.039cqw; top: 45.666cqw; }
.vcard--4 { left: 92.518cqw; top: 12.232cqw; }
.vcard--5 { left: 59.612cqw; top: 16.052cqw; }
.vcard--6 { left: 26.708cqw; top: 19.872cqw; }
.vcard--7 { left: 84.011cqw; top: -12.264cqw; }
.vcard--8 { left: 51.107cqw; top: -8.444cqw; }
.vcard--9 { left: 18.201cqw; top: -4.624cqw; }
.vcard--1 .vcard__full { height: 47.138cqw; }
.vcard--2 .vcard__full { height: 30.017cqw; top: .758cqw; left: calc(50% - .976cqw); }
.vcard--3 .vcard__full { height: 30.204cqw; }
.vcard--5 .vcard__full { height: 45.497cqw; }
.vcard--7 .vcard__full { height: 43.968cqw; }
.vcard--8 .vcard__full { height: 40.135cqw; }
.vcard--9 .vcard__full { height: 39.973cqw; top: -.721cqw; left: calc(50% + .952cqw); }
.vcard--4 .vcard__q--l { left: -.788cqw; top: -.132cqw; }
.vcard--4 .vcard__q--r { left: 15.853cqw; top: -.132cqw; }
.vcard--6 .vcard__q { height: 30.547cqw; }
.vcard--6 .vcard__q--l { left: -1.473cqw; top: -.081cqw; }
.vcard--6 .vcard__q--r { left: 15.168cqw; top: -.081cqw; }

.video__content {
  position: absolute; left: 6.797cqw; top: 6.5cqw;
  display: flex; flex-direction: column; justify-content: space-between;
  height: 42cqw; width: 51.955cqw;
}
.video__title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(24px, 6cqw, var(--fs-display-lg)); line-height: var(--lh-display); letter-spacing: 0.01em;
  color: var(--color-white); text-shadow: var(--text-shadow-media);
  max-width: 43.83cqw;
}
.video__presenter {
  position: absolute; left: 50cqw; top: -2.2cqw;
  width: 52.361cqw; height: 97.708cqw; overflow: hidden;
}
.video__presenter img {
  position: absolute; top: 0; left: -110.94%;
  width: 279.97%; max-width: none; height: 100%;
}

/* ---- 5. Ready to level up — 3 cards ---- */
.levels__sub { color: var(--color-on-dark-muted); }
.levels__grid {
  margin-top: var(--space-7);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--grid-gap);
}
.level-card {
  display: flex; flex-direction: column;
  color: var(--color-text); overflow: hidden;
}
.level-card__media { aspect-ratio: 449.34 / 284; overflow: hidden; background: var(--color-neutral-200); }
.level-card__media img { width: 100%; height: 100%; object-fit: cover; }
.level-card__media--startup img { object-position: 20% 50%; }
.level-card__media--smb img { object-position: 50% 0; }
.level-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); flex: 1; }
.level-card__title { color: var(--color-blue-700); font-size: var(--fs-display-sm); }  /* card title = display-sm site-wide */
.level-card__rule { width: 64px; height: 2px; background: var(--color-yellow-400); border: 0; margin: 0; }
.level-card__text { font-size: var(--fs-body); line-height: var(--lh-body); }
.level-card__cta { margin-top: auto; padding-top: var(--space-2); }

/* ---- 6. Leadership transformation system grid ---- */
.system__grid {
  margin-top: var(--space-7);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap);
}
.system-card {
  position: relative; display: flex;
  aspect-ratio: 449.33 / 280.83;
  color: var(--color-white);
}
.system-card__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  width: 46%;
}
.system-card__title {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-lead); line-height: var(--lh-tight);
}
.system-card__panel {
  position: absolute; top: 8%; bottom: 8%; left: 46%; right: 0;
  background: var(--color-neutral-100);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  overflow: hidden;
}
.system-card__panel img {
  position: absolute; max-width: none;
  left: -12.35%; top: 5.57%; width: 160.4%; height: 115.8%; object-fit: cover;
}

/* ---- 7. Results + testimonials ---- */
.results__grid {
  margin-top: var(--space-7);
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(3, minmax(0, 445.6fr)) minmax(0, 311fr);
}
.results__img { aspect-ratio: 358.03 / 321.39; overflow: hidden; background: var(--color-white); }
.results__img img { width: 100%; height: 100%; object-fit: cover; }
.results__text, .testimonials__intro-text { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-on-dark-muted); }
.testimonials {
  margin-top: var(--space-7);
  display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 2.6fr); gap: var(--grid-gap);
  align-items: stretch;
}
.testimonials__intro { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); }
.testimonials__intro-text { margin-top: var(--space-5); color: var(--color-on-dark-muted); }
.slider-controls { display: flex; gap: var(--space-4); }
.slider-btn {
  width: 56px; height: 56px;   /* look: base.css .btn-icon */
}
.slider-btn img { width: 24px; height: 24px; }
.slider-btn--prev img { transform: scaleX(-1); } /* Figma mirrors the same arrow icon */
.testimonials__track {
  display: flex; gap: var(--grid-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.testimonials__track::-webkit-scrollbar { display: none; }
.testimonial { flex: 0 0 min(350px, 82%); scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-4); }
.testimonial__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-blue-700); }
.testimonial__media img { width: 100%; height: 100%; object-fit: cover; }
.testimonial__media::after { content: ""; position: absolute; inset: 0; background: var(--overlay-dim); }
.testimonial__who { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); z-index: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.testimonial__name { font-size: var(--fs-display-sm); line-height: var(--lh-display); }
.testimonial__role { font-size: var(--fs-body); line-height: var(--lh-body); }
.testimonial__quote { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-on-dark-muted); }

/* ---- 8. FAQ — accordion styles live in base.css ---- */

/* ---- 9. White paper promo — normal band, 2 columns ---- */
.whitepaper__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.whitepaper__book {
  position: relative; justify-self: center; width: min(100%, 320px);
  transform: rotate(-8deg);
  box-shadow: var(--shadow-rest);
  border-radius: 2px 4px 4px 2px; overflow: hidden;   /* book corners: kept (physical book look) */
}
.whitepaper__book img { width: 100%; height: auto; }
.whitepaper__book::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gradient-book-shine);
}
.whitepaper__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5);
  max-width: 520px;
}
.whitepaper__card h2 { text-wrap: balance; font-size: var(--fs-display-md); }
.whitepaper-spacer { display: none; }

/* ---- 10. Hello, I'm Shay ---- */
.about__grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: var(--space-9); align-items: center; }
.about__media { position: relative; max-width: 520px; width: 100%; }
/* Decorative blue/yellow blocks behind the photo removed 2026-10-13 (Vishnu). */
.about__photo { position: relative; z-index: 1; aspect-ratio: 520 / 624; overflow: hidden; background: var(--color-neutral-100); }
.about__photo img { position: absolute; max-width: none; left: -58.27%; top: -2.31%; width: 207.5%; height: 115.24%; object-fit: cover; }
.about__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-head-intro); }
.about__title { max-width: 14em; text-wrap: balance; }
.about__text { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure-intro); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted); }
.about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); padding-top: var(--space-2); }

/* ==========================================================================
   Responsive — token steps 1068 / 734
   ========================================================================== */
@media (max-width: 1068px) {
  .hero { padding-top: var(--space-8); }
  .future__grid { grid-template-columns: 1fr 1fr; }
  .future__col--right { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .results__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .results__text { grid-column: 1 / -1; max-width: var(--measure-intro); }
  .testimonials { grid-template-columns: 1fr; }
  .testimonials__intro { flex-direction: row; align-items: flex-end; }
  .about__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .about__media { margin-inline: auto; max-width: 440px; }
  .whitepaper__inner { gap: var(--space-7); }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .levels__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .level-card__title { font-size: var(--fs-display-sm); }
}

@media (max-width: 734px) {
  .hero-wall { --pw: 46vw; margin-bottom: calc(-1 * var(--space-4)); }
  .hero__content { margin-bottom: calc(-1 * var(--space-3)); }
  .future__grid { grid-template-columns: 1fr; }
  .future__col--right { display: flex; }
  .future__photo--portrait { aspect-ratio: 4 / 5; }
  .system-card__body { width: 50%; padding: var(--space-4); }
  .system-card__panel { left: 50%; }
  .results__grid { grid-template-columns: 1fr; }
  .results__img { aspect-ratio: 16 / 11; }
  .testimonials__intro { flex-direction: column; align-items: flex-start; }
  .whitepaper__inner { grid-template-columns: 1fr; justify-items: center; }
  .whitepaper__book { width: min(70%, 280px); }
  .whitepaper__card { width: 100%; }
  .logos__viewport { margin-top: var(--space-6); }
  .logos__item { width: 200px; }
  .logos__item img { max-width: 180px; }
  .logos__track { gap: var(--space-7); }
}

/* Density pass 2026-10-13: keep media in proportion inside the wider 1520 container */
.whitepaper__book { justify-self: end; }
@media (max-width: 1068px) { .system__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 734px)  { .system__grid { grid-template-columns: 1fr; } .whitepaper__book { justify-self: center; } }

/* Size system 2026-10-13: role maxes from tokens */
.logos__item img { height: var(--logo-h); }
.video { max-width: var(--media-max); }
.whitepaper__book { width: min(100%, var(--promo-max)); }
@media (max-width: 734px) { .whitepaper__book { width: min(70%, var(--promo-max)); } }
@media (min-width: 735px) and (max-width: 1068px) { .results__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .results__text { grid-column: 1 / -1; } }

/* Tablet visual pass 2026-10-14 */
@media (min-width: 735px) and (max-width: 1068px) {
  .logos__title { padding-right: var(--gutter); max-width: none; }
}

/* Content pass 2026-10-14 — case-study grid + CONQUER step line removed in repair 2026-10-14 (look restored to size-pass reference) */
.results__cases { margin-top: var(--space-7); display: grid; gap: var(--grid-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.results__case { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--color-on-dark-faint, rgba(255,255,255,.2)); }
.results__case .future__copy-text { margin-top: 0; }
@media (max-width: 1068px) { .results__cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 734px) { .results__cases { grid-template-columns: 1fr; } }
.results__case .level-card__label { color: var(--color-yellow-400); }

/* Repair 2026-10-14: testimonial photo area = brand-blue panel with initials (no stock faces on real names) */
.testimonial__initials {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  z-index: 1; color: var(--color-yellow-400);
  font-family: var(--font-display); font-weight: 400; font-size: clamp(96px, 12vw, 176px); line-height: 1;
  padding-bottom: 30%;
}
/* one dark-card gradient (beats the older gradient in polish.css by specificity) */
.testimonial__media .testimonial__initials { background: var(--gradient-dark); }

/* ==========================================================================
   Premium pass 2026-10-15 (site-v3) — depth, hierarchy, rhythm on the APPROVED design.
   No new colours: only tokens + alpha/gradients of navy / blue / primary / yellow / white.
   No layout / section / order / copy / font changes. Review 2026-10-15 reverted: navy restyle of
   Future State + White paper, glass testimonial cards, yellow rules over band heads, 2+1 tablet levels,
   hero <em> + inline phone H1, kicker type on the proof label.
   Order matters: this block sits after the section rules above and wins ties.
   ========================================================================== */

/* ---- Hero: line 1 yellow (DECISIONS 2026-10-15), muted lead, calm proof row ---- */
.hero__title { letter-spacing: var(--ls-display-xl); line-height: var(--lh-display-tight); }
.hero__text { color: var(--color-on-dark-muted); }
/* desktop: paragraph on 2 lines (was 3) */
@media (min-width: 1100px) { .hero__text { max-width: 1040px; text-wrap: balance; } }
.hero__cta { margin-top: var(--space-3); }
/* photo wall: rounded panels, soft fade into the band under the proof row */
.hero-wall__panel { border-radius: var(--radius-md); overflow: hidden; }
.hero-wall__stage {
  -webkit-mask-image: linear-gradient(180deg, var(--color-black) 0%, var(--color-black) 56%, transparent 100%);
          mask-image: linear-gradient(180deg, var(--color-black) 0%, var(--color-black) 56%, transparent 100%);
}
/* proof: yellow avatar rings kept (original), count reads as a badge */
.avatar-stack__item { margin-right: calc(-1 * var(--space-3)); }
.avatar-stack__count { box-shadow: 0 0 0 2px var(--color-navy-800), var(--shadow-btn-yellow); font-weight: 600; }
.hero__proof { gap: var(--space-3); }
.hero__proof-label { color: var(--color-on-dark-muted); }   /* Roboto 17px kept (original type) */

/* ---- Logos: one optical size per wordmark (J&J is 10:1, SanDisk 5:1, Boston 3:1) ---- */
.logos__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--color-black) 12%, var(--color-black) 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, var(--color-black) 12%, var(--color-black) 88%, transparent 100%);
}
.logos__item--jnj img { height: calc(var(--logo-h) * 0.6); }
.logos__item--sandisk img { height: calc(var(--logo-h) * 0.75); }
.logos__item--boston img { height: var(--logo-h); }
/* ---- Band rhythm: 20px heading -> intro, 56px intro -> content ---- */
.future__head, .levels__head, .system__head, .results__head { gap: var(--gap-head-intro); }
.future__grid, .levels__grid, .system__grid, .results__grid, .testimonials { margin-top: var(--gap-intro-content); }
.video { margin-top: var(--gap-intro-content); }
.future__sub, .levels__sub { color: var(--color-on-dark-muted); }
.system__sub { color: var(--color-text-muted); }
.u-nowrap { white-space: nowrap; }   /* keeps "High-Performing" and "I use" on one line */
/* light bands: white -> parchment floor instead of a flat fill (same recipe as the FAQ band) */
.coaching, .system, .about { background: var(--gradient-light); }
.logos { background: var(--gradient-light); }
/* FAQ band: same recipe as the Contact FAQ band */

/* blue bands: primary glow only (the 10% yellow corner glow read as a grey-olive smudge on royal blue) */
.future, .levels, .results, .whitepaper { background: var(--glow-primary), var(--gradient-band-blue-flat); }

/* ---- Future state ---- */
.future__copy-title { color: var(--color-white); text-wrap: balance; }
.future__quote { line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: pretty; }
.future__stat { border: 1px solid var(--hairline-dark); }
/* lighter grade: the crowd photo shows through, text still reads */
.future__stat::after { background: linear-gradient(180deg, rgba(24, 61, 137, 0.3) 0%, rgba(2, 6, 21, 0.78) 100%); }
.future__stat p { max-width: var(--measure-statement); text-wrap: balance; text-shadow: var(--text-shadow-media); }

/* ---- Coaching video: static card, hairline ring ---- */
.video::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--hairline-dark);
}

/* ---- Level cards: roomier body, muted copy ---- */
.level-card__body { padding: var(--card-pad); gap: var(--space-3); }
.level-card__label { margin-bottom: 0; }
.level-card__title { margin-top: var(--space-1); }
.level-card__rule { width: var(--space-6); margin-block: var(--space-1); }
.level-card__text { color: var(--color-text-muted); }
.level-card__cta { padding-top: var(--space-3); }

/* ---- Template cards: navy gradient, hairline, a different sheet per card ----
   One source image (KEEP 2026-10-13) holds 4 template sheets in a 2x2 grid. `scale` frames one sheet;
   object-position + transform-origin pick which (hover zoom composes via transform). */
.system-card { background: var(--gradient-dark); box-shadow: var(--shadow-rest), inset 0 0 0 1px var(--hairline-dark); }
.system-card__body { padding: var(--card-pad); }
.system-card__panel { border-radius: var(--radius-md) 0 0 var(--radius-md); box-shadow: var(--shadow-rest); }
.system-card__panel img {
  left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; scale: 2;
  transition: transform var(--dur-media) var(--ease);
}
.system-card:nth-child(6n+1) .system-card__panel img { object-position: 15% 0%; transform-origin: 15% 0%; }    /* causes canvas */
.system-card:nth-child(6n+2) .system-card__panel img { object-position: 71% 0%; transform-origin: 71% 0%; }    /* ideas canvas */
.system-card:nth-child(6n+3) .system-card__panel img { object-position: 15% 99%; transform-origin: 15% 99%; }  /* idea filter canvas */
.system-card:nth-child(6n+4) .system-card__panel img { object-position: 71% 99%; transform-origin: 71% 99%; }  /* parking lot */
.system-card:nth-child(6n+5) .system-card__panel img { scale: 2.4; object-position: 0% 0%; transform-origin: 70% 10%; }   /* causes sheet: root-cause column close-up */
.system-card:nth-child(6n+6) .system-card__panel img { scale: 2.6; object-position: 100% 0%; transform-origin: 48% 16%; }   /* ideas sheet: bulb close-up */

/* ---- Results ---- */
.results__img { position: relative; }
.results__img::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--hairline-dark);
}
.results__text { align-self: center; }
@media (min-width: 1069px) {
  /* same 4 columns; the lead column gets a real measure (~44ch) instead of a 22ch caption */
  .results__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr); }
}

/* ---- Testimonials: the approved card (initials panel with name + role, quote under) ----
   Track: first card on the content edge, room for the hover lift, fade where cards continue,
   end room so the last card scrolls clear of the fade. */
.testimonials__intro-text { margin-top: var(--gap-head-intro); }
.testimonials__track {
  padding: var(--space-2) var(--space-2) var(--space-8);
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) calc(-1 * var(--space-8));
  scroll-padding-inline: var(--space-2);
  -webkit-mask-image: linear-gradient(90deg, var(--color-black) calc(100% - var(--space-9)), transparent);
          mask-image: linear-gradient(90deg, var(--color-black) calc(100% - var(--space-9)), transparent);
}
.testimonials__track::after { content: ""; flex: 0 0 var(--space-7); }
.testimonial__media { transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease); }
.testimonial:hover .testimonial__media { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.testimonial__initials { border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hairline-dark); }
@media (min-width: 735px) {
  .testimonial__role { min-height: 3em; }   /* 2 role lines on every card: names line up across the row */
}

/* ---- White paper: approved white card on the blue band; lifted book, soft light behind it ---- */
.whitepaper { position: relative; overflow: hidden; }
.whitepaper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 60% at 30% 50%, rgba(35, 136, 255, 0.22) 0%, rgba(35, 136, 255, 0) 100%);
}
.whitepaper__inner { position: relative; }
.whitepaper__book { box-shadow: var(--shadow-lift), 0 0 0 1px var(--hairline-dark); }
.whitepaper__card { gap: var(--gap-head-intro); max-width: 560px; }
.whitepaper__card h2 { max-width: var(--measure-statement); }
.whitepaper__card .btn { margin-top: var(--space-3); }
@media (min-width: 1069px) {
  /* book + card sit as one centred pair (was ~105px right of centre) */
  .whitepaper__inner { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: var(--space-9); }
  .whitepaper__book { justify-self: center; }
  .whitepaper__card { max-width: 560px; }
}

/* ---- About ---- */
.about__title { max-width: none; }
.about__content .kicker { margin-bottom: 0; }   /* the content gap already gives the 20px */
/* text link keeps its look; the hit area grows to ~50px (touch minimum 44) */
.about__actions .link-underline::before { content: ""; position: absolute; inset: calc(-1 * var(--space-3)) 0; }

/* ---- Tablet ---- */
@media (min-width: 735px) and (max-width: 1068px) {
  .level-card__body { padding: var(--card-pad-sm); }
  /* template cards: wider title column, so the <br> lines never break again */
  .system-card__body { width: 50%; padding: var(--card-pad-sm); }
  .system-card__panel { left: 50%; }
  /* white paper: give the card the wider column; the tilted book keeps clear of the gutter */
  .whitepaper__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .whitepaper__book { justify-self: center; width: min(calc(100% - var(--space-8)), var(--promo-max)); }   /* tilted corner clears the 24px gutter */
}
@media (max-width: 1068px) {
  .whitepaper__card { max-width: none; width: 100%; }
  .whitepaper__card h2 { max-width: none; }
  .about__media { margin-inline: 0; }   /* stacked photo on the text edge, not centred */
}
@media (min-width: 901px) and (max-width: 1068px) {
  .about__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-7); }   /* as desktop */
}

/* ---- Phone ---- */
@media (max-width: 734px) {
  .hero__title { font-size: min(calc(var(--fs-display-xl) * 0.9), 9.2vw); }   /* max 36px: the two lines set as 3 rows from 360px up */
  .hero-wall__panel { border-radius: var(--radius-sm); }
  .avatar-stack__item, .avatar-stack__count { width: var(--space-7); height: var(--space-7); }
  .avatar-stack__count { font-size: var(--fs-small); }
  .logos__item { width: auto; }
  .logos__item img { max-width: none; }   /* the 180px cap squashed the J&J wordmark */
  .logos__track { gap: var(--space-7); }
  .level-card__body, .system-card__body { padding: var(--card-pad); }
  .testimonials__track {
    -webkit-mask-image: linear-gradient(90deg, var(--color-black) calc(100% - var(--space-6)), transparent);
            mask-image: linear-gradient(90deg, var(--color-black) calc(100% - var(--space-6)), transparent);
  }
}

/* ---- Reduced motion: no hover movement ---- */
@media (prefers-reduced-motion: reduce) {
  .testimonial:hover .testimonial__media { transform: none; }
}

/* ==========================================================================
   Area 2 (2026-10-15) — alignment, sizes, phone density
   ========================================================================== */
@media (min-width: 1069px) {
  /* testimonials share the Results 3 + 1.15 grid: card 1 sits under result image 2 */
  .testimonials { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr); }
  .testimonials__intro { grid-column: 1; justify-content: flex-start; }
  .testimonials__track { grid-column: 2 / -1; }
  .slider-controls { margin-top: var(--space-6); }
}
@media (min-width: 735px) and (max-width: 900px) {
  /* level cards: one per row, photo left */
  .levels__grid { grid-template-columns: 1fr; }
  .level-card { flex-direction: row; }
  .level-card__media { flex: 0 0 42%; aspect-ratio: auto; }
  /* about: full-width landscape crop instead of a small orphan portrait */
  .about__media { max-width: none; }
  .about__photo { aspect-ratio: 16 / 10; }
  .about__photo img { left: 0; top: 0; width: 100%; height: 100%; object-position: 55% 25%; }
}
@media (max-width: 734px) {
  /* Results: 3 small tiles in a row, text under them */
  .results__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .results__img { aspect-ratio: 1 / 1; }
  .results__text { grid-column: 1 / -1; }
  /* template cards: sideways swipe row */
  .system__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 85%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--space-2) var(--gutter) var(--space-6); scroll-padding-inline: var(--gutter);
  }
  .system__grid::-webkit-scrollbar { display: none; }
  .system-card { scroll-snap-align: start; }
}

/* ---- Logos band: heading centred, logos always run (marquee at every width) ---- */
.logos__title { text-align: center; padding-right: var(--gutter) !important; max-width: none; }