/* =====================================================================
       DESIGN SYSTEM  (global tokens)
       ===================================================================== */

    /* Licensed display font — variable font with a weight axis (100–900). */
    @font-face {
      font-family: "Stack Sans Notch";
      src: url("../fonts/StackSansNotch-VariableFont_wght.ttf") format("truetype-variations");
      font-weight: 100 900;
      font-display: swap;
    }

    :root {
      /* Fonts — Stack Sans Notch is the real face; Archivo is the web fallback. */
      --font-display: "Stack Sans Notch", "Archivo", system-ui, sans-serif;
      --font-body: "Archivo", system-ui, -apple-system, sans-serif;

      /* Colors */
      --bg:        #ffffff;
      --ink:       #0e0e0e;   /* primary text / heading line 1 / logo */
      --navy:      #16243d;   /* heading line 2 */
      --muted:     #6b6b6b;   /* sub-text + inactive nav links */
      --line:      #e6e6e6;   /* hairline dividers */
      --primary:   #2d2df5;   /* royal blue — progress bar, active nav, CTAs */

      /* Spacing scale */
      --space-1: 0.5rem;
      --space-2: 1rem;
      --space-3: 1.5rem;
      --space-4: 2rem;
      --space-6: 3rem;
      --space-8: 4rem;

      /* Layout */
      --container: 1200px;
      --nav-h: 64px;
    }

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

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

    body {
      font-family: var(--font-body);
      color: var(--ink);
      background: var(--bg);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    ul { list-style: none; }

    .container {
      width: 100%;
      max-width: var(--container);
      margin-inline: auto;
      padding-inline: var(--space-4);
    }

    /* =====================================================================
       #1  SCROLL PROGRESS BAR  (fixed at very top of the page)
       ===================================================================== */
    .progress {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 4px;
      background: transparent;
      z-index: 1000;
      pointer-events: none;
    }
    .progress__fill {
      height: 100%;
      width: 0%;
      background: var(--primary);
      transition: width 0.05s linear;
    }

    /* =====================================================================
       NAV BAR
       ===================================================================== */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 500;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      padding-inline: clamp(1.5rem, 4vw, 3.5rem);
      background: #ffffff;
      box-shadow: 0 1px 0 rgba(0,0,0,0.07);
    }

    .logo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .logo img { display: block; }

    .nav__links {
      display: flex;
      gap: clamp(1.8rem, 3.5vw, 3.8rem);
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .nav__links a {
      font-size: 0.95rem;
      color: var(--muted);
      transition: color 0.2s ease;
    }
    .nav__links a:hover { color: var(--ink); }
    .nav__links a.is-active { color: var(--primary); }

    /* =====================================================================
       SECTION 1 — HERO
       ===================================================================== */
    .hero {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      min-height: 100dvh;
      padding-top: var(--nav-h);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding-block: var(--space-8);
    }

    .hero__title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(2.75rem, 6.2vw, 80px);
      line-height: 1.1;           /* 88/80 ≈ 1.1 */
      letter-spacing: -0.0375em;  /* -3px @ 80px */
      max-width: 996px;
      color: var(--ink);
    }
    .hero__title .accent { color: var(--navy); display: block; }

    .hero__sub {
      margin-top: var(--space-8);
      color: var(--muted);
      font-size: clamp(1rem, 1.4vw, 1.15rem);
      line-height: 1.6;
    }

    .hero__divider {
      margin-top: var(--space-4);
      width: 320px;
      height: 1px;
      background: var(--line);
    }

    /* =====================================================================
       SECTION 2 — THE PROBLEM
       Part A: scroll-driven image reveal (animations #2 + #3)
       Part B: dark problem-list table (animation #4)
       ===================================================================== */

    /* --- Part A: reveal wrapper (provides scroll runway) --- */
    .problem-reveal {
      position: relative;
      z-index: 0;
      height: 220vh;
      background: #fff;  /* white shows around the expanding image strip */
    }
    .problem-reveal__sticky {
      position: sticky;
      top: var(--nav-h);
      height: calc(100vh - var(--nav-h));
      height: calc(100dvh - var(--nav-h));
      overflow: hidden;
      isolation: isolate;
    }
    /* Gradient fade at the bottom — blends the image into the dark problem list below */
    .problem-reveal__sticky::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 35%;
      pointer-events: none;
      z-index: 3;
    }
    /* Image fills the sticky panel; clip-path driven by JS.
       Initial = narrow strip visible (sides clipped, no top clip — image shows immediately). */
    .problem-reveal__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
      clip-path: inset(0% 35% 0% 35%);
      will-change: clip-path;
    }
    /* CSS vignette — dark radial gradient that mirrors the Figma composite effect */
    .problem-reveal__vignette {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 70% 70% at 50% 50%,
                    transparent 40%,
                    rgba(0,0,0,0.55) 75%,
                    rgba(0,0,0,0.85) 100%);
      pointer-events: none;
    }
    /* Text overlay — fades in after full expand */
    .problem-reveal__text {
      position: absolute;
      inset: 0;
      opacity: 0;
      color: #fff;
      pointer-events: none;
      will-change: opacity;
    }
    .problem-reveal__heading {
      position: absolute;
      top: clamp(2.5rem, 7vh, 5.5rem);
      left: clamp(2rem, 4vw, 5rem);
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(2rem, 4.5vw, 58px);
      line-height: 1.05;
      letter-spacing: -0.03em;
    }
    .problem-reveal__sub {
      position: absolute;
      right: clamp(12rem, 10vw, 10rem);
      bottom: clamp(5rem, 20vh, 9rem);
      font-size: clamp(1rem, 0.95vw, 0.95rem);
      line-height: 1.65;
      color: rgba(255,255,255,0.88);
    }
    .problem-reveal__index {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: clamp(2rem, 4vw, 5rem);
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      color: var(--muted);   /* dark on white at start; JS transitions to white */
      z-index: 2;
      pointer-events: none;
    }
    .problem-reveal__index em { font-style: normal; opacity: 0.6; }
    .problem-reveal__eyebrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: clamp(2rem, 4vw, 5rem);
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      color: var(--muted);   /* dark on white at start; JS transitions to white */
      z-index: 2;
      pointer-events: none;
    }

    /* --- Part B: dark problem-list table (#4) --- */
    .problem-list {
      background: #050505;
      padding: clamp(3rem, 6vh, 5rem) clamp(3rem, 9vw, 10rem);
    }
    .problem-list__row {
      display: grid;
      grid-template-columns: 4rem 1fr 1fr;
      gap: 0 clamp(2rem, 4vw, 5rem);
      align-items: start;
      padding-block: clamp(2rem, 3.5vh, 3rem);
      border-top: 1px solid rgba(255,255,255,0.12);
      cursor: default;
      transition: opacity 0.25s ease;
    }
    .problem-list__row:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
    /* #4 hover: dim inactive rows, brighten on hover */
    .problem-list:hover .problem-list__row { opacity: 0.35; }
    .problem-list:hover .problem-list__row:hover { opacity: 1; }
    .problem-list__num {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.3);
      padding-top: 0.25em;
      letter-spacing: 0.04em;
    }
    .problem-list__title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(1.1rem, 1.8vw, 1.35rem);
      color: rgba(255,255,255,0.88);
      letter-spacing: -0.02em;
      transition: font-weight 0.15s ease;
    }
    .problem-list__row:hover .problem-list__title { font-weight: 700; }
    .problem-list__desc {
      font-size: clamp(0.82rem, 0.95vw, 0.9rem);
      color: rgba(255,255,255,0.4);
      line-height: 1.7;
    }

    @media (prefers-reduced-motion: reduce) {
      .problem-reveal__text { opacity: 1 !important; }
      .problem-reveal__index,
      .problem-reveal__eyebrow { color: rgba(255,255,255,0.55) !important; }
    }

    @media (max-width: 760px) {
      .problem-list__row { grid-template-columns: 2.5rem 1fr; }
      .problem-list__desc { grid-column: 2; margin-top: 0.4rem; }
    }

    /* =====================================================================
       SECTION 3 — THE SOLUTION
       Part A: white intro (heading)
       Part B: pixel transition in  (white → dark)
       Part C: horizontal scroll gallery (5 cards)
       Part D: pixel transition out (dark → white)
       ===================================================================== */

    /* Shared section label style used from S3 onward */
    .section-label {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      color: var(--muted);
      pointer-events: none;
      z-index: 2;
    }
    .section-label--left  { left:  clamp(2rem, 4vw, 5rem); }
    .section-label--right { right: clamp(2rem, 4vw, 5rem); }
    .section-label em { font-style: normal; opacity: 0.6; }

    /* --- Part A: intro --- */
    /* Intro layer lives INSIDE the gallery sticky at z=15 — fades out as pixels dissolve */
    .solution-intro__layer {
      position: absolute;
      inset: 0;
      z-index: 15;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: var(--space-8) clamp(2rem, 8vw, 10rem);
      background: #fff;
      pointer-events: none;
    }
    .solution-intro__layer::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 40%;
      pointer-events: none;
    }
    .solution-intro__heading {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(3.2rem, 7.5vw, 100px);
      line-height: 1.0;
      letter-spacing: -0.04em;
      color: var(--ink);
    }
    .solution-intro__sub {
      margin-top: var(--space-4);
      font-size: clamp(0.9rem, 1.1vw, 1rem);
      color: var(--muted);
      line-height: 1.65;
    }

    /* z-index: 3 — on top. Pixel-out reveals S4 Audience (z:2) directly underneath. */
    .solution-gallery {
      position: relative;
      height: 800vh;
      background: #ffffff;
      z-index: 3;
    }
    .solution-gallery__sticky {
      position: sticky;
      top: var(--nav-h);
      height: calc(100vh - var(--nav-h));
      height: calc(100dvh - var(--nav-h));
      overflow: hidden;
      background: #050505;
    }
    .solution-gallery__track {
      display: flex;
      width: calc(6 * 100vw + 5 * 3px);
      height: 100%;
      gap: 3px;
      will-change: transform;
    }
    /* Pixel overlay sits on top of the gallery sticky for the entry transition */
    .pixel-overlay {
      position: absolute;
      inset: 0;
      z-index: 10;
      pointer-events: none;
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(6, 1fr);
      gap: 0;
    }
    /* Cells are white, slightly overscaled when visible to close sub-pixel gaps */
    .px-cell {
      background: #ffffff;
      transform: scale(1.04);
      transform-origin: center;
      will-change: transform;
      transition: transform 0.22s ease-in;
    }
    .px-cell.is-gone { transform: scale(0); }

    /* Card: full-viewport, image contained, dark bg fills letterbox */
    .solution-card {
      width: 100vw;
      height: 100%;
      flex-shrink: 0;
      position: relative;
      background-image: var(--card-bg);
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      /* Short transition so scale/brightness feel physical, not jittery */
      transition: transform 0.12s ease-out, filter 0.12s ease-out;
      transform-origin: center bottom;
    }
    .solution-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.15) 50%,
        rgba(0,0,0,0.30) 100%);
      z-index: 0;
    }
    /* Text block: num above title (left col) + description (right col)
       Positioned ~30% down from the top — matches the cinematic center-left feel */
    .solution-card__text {
      position: absolute;
      z-index: 1;
      top: clamp(4rem, 30vh, 16rem);
      left:  clamp(3rem, 5.5vw, 7rem);
      right: clamp(3rem, 5.5vw, 7rem);
      display: flex;
      align-items: flex-start;
      gap: clamp(3rem, 8vw, 12rem);
    }
    .solution-card__left { flex-shrink: 0; }
    .solution-card__num {
      display: block;
      font-size: 0.78rem;
      color: rgba(255,255,255,0.4);
      letter-spacing: 0.1em;
      margin-bottom: 1.4rem;
    }
    .solution-card__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(3rem, 5.5vw, 5.5rem);
      color: #fff;
      letter-spacing: -0.03em;
      line-height: 1.02;
    }
    .solution-card__desc {
      /* Pushed to far right, padded down to align with title */
      margin-left: auto;
      padding-top: calc(0.78rem * 1.5 + 1.4rem);
      font-size: clamp(0.9rem, 1.15vw, 1.05rem);
      color: rgba(255,255,255,0.65);
      line-height: 1.7;
      max-width: 380px;
    }
    .solution-card__desc strong { color: rgba(255,255,255,0.92); font-weight: 600; }

    @media (max-width: 760px) {
      .solution-card__text { flex-direction: column; gap: 1.5rem; top: clamp(3rem, 20vh, 8rem); }
      .solution-card__title { font-size: clamp(2.4rem, 9vw, 3.2rem); }
      .solution-card__desc { padding-top: 0; max-width: 100%; font-size: 0.9rem; }
    }

    /* =====================================================================
       RESPONSIVE
       ===================================================================== */
    @media (max-width: 760px) {
      :root { --nav-h: 56px; }
      .nav__links { display: none; }      /* simple mobile fallback for now */
      .nav__spacer { display: none; }
      .hero__title { letter-spacing: -0.02em; }
      .problem__sub { right: clamp(1.5rem, 6vw, 3rem); }
    }

    /* =====================================================================
       SECTION 4 — AUDIENCE  "Built for every decision maker"
       Phase 1: large centered heading visible, strip invisible.
       Phase 2: portrait strip grows from center (50→35 sides).
       Phase 3: strip expands to full screen (35→0 sides).
       Phase 4: full-screen dwell with persona nav.
       ===================================================================== */
    /* z-index: 2 — sits directly behind S3 (z:3). S3's pixel-out reveals this
       white heading panel. margin-top: -100vh eliminates scroll gap. */
    .audience {
      position: relative;
      height: 600vh;
      background: #fff;
      margin-top: -100vh;
      margin-top: -100dvh;
      z-index: 2;
    }

    /* ── Panel 1: heading only ── 200vh container → 100vh of sticky dwell */
    .audience__head-section {
      position: relative;
      height: 200vh;
    }
    .audience__head-sticky {
      position: sticky;
      top: var(--nav-h);
      height: calc(100vh - var(--nav-h));
      height: calc(100dvh - var(--nav-h));
      overflow: hidden;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .audience__heading {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(3rem, 7vw, 8.5rem);
      color: var(--ink);
      letter-spacing: -0.03em;
      line-height: 1.05;
      text-align: center;
    }

    /* ── Panel 2: image reveal ── 400vh container → 300vh of sticky dwell.
       Starts as portrait-width strip (like Section 2 start state).
       JS expands it sideways to full screen. */
    .audience__reveal-section {
      position: relative;
      height: 400vh;
    }
    .audience__reveal-sticky {
      position: sticky;
      top: var(--nav-h);
      height: calc(100vh - var(--nav-h));
      height: calc(100dvh - var(--nav-h));
      overflow: hidden;
      background: #fff;
    }
    .audience__personas {
      position: absolute;
      inset: 0;
      z-index: 7;
      clip-path: inset(0% 35% 0% 35%);
    }
    .audience__persona {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .audience__persona.is-active { opacity: 1; }
    .audience__persona-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .audience__persona-vignette {
      position: absolute;
      inset: 0;
    }
    .audience__persona-content {
      position: absolute;
      bottom: clamp(5rem, 11vh, 9rem);
      left:  clamp(3rem, 5.5vw, 7rem);
      right: clamp(1rem, 2.5vw, 3.5rem);
      display: flex;
      align-items: flex-end;
      gap: clamp(3rem, 8vw, 12rem);
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .audience__persona.is-active .audience__persona-content { opacity: 1; }
    .audience__persona-name {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.8rem, 3vw, 3rem);
      color: #fff;
      letter-spacing: -0.025em;
      line-height: 1.1;
      flex-shrink: 0;
    }
    .audience__persona-right {
      margin-left: auto;
      max-width: 460px;
    }
    .audience__quote-icon {
      display: block;
      font-size: 2.2rem;
      color: #fff;
      line-height: 1;
      margin-bottom: 0.9rem;
      opacity: 0.9;
    }
    .audience__persona-desc {
      font-size: clamp(0.88rem, 1.05vw, 0.98rem);
      color: rgba(255,255,255,0.72);
      line-height: 1.78;
    }
    .audience__persona-desc strong { color: rgba(255,255,255,0.95); font-weight: 600; }

    /* Arrow + dots nav row */
    .audience__nav-row {
      position: absolute;
      bottom: clamp(1.8rem, 3.5vh, 3rem);
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 1.8rem;
      z-index: 10;
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .audience__personas.is-revealed .audience__nav-row { opacity: 1; }
    .audience__nav-btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,0.35);
      background: rgba(255,255,255,0.07);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, border-color 0.2s;
      flex-shrink: 0;
    }
    .audience__nav-btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.65); }
    .audience__dots { display: flex; gap: 0.65rem; align-items: center; }
    .audience__dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      border: none;
      background: rgba(255,255,255,0.3);
      cursor: pointer;
      padding: 0;
      transition: background 0.25s, transform 0.25s;
    }
    .audience__dot.is-active { background: #fff; transform: scale(1.35); }

    @media (max-width: 760px) {
      .audience__persona-content {
        flex-direction: column;
        gap: 1.4rem;
        bottom: 6.5rem;
        align-items: flex-start;
      }
      .audience__persona-right { margin-left: 0; max-width: 100%; }
      .audience__persona-name { font-size: clamp(1.5rem, 7vw, 2rem); }
    }

    /* =====================================================================
       SECTION 5 — TYPE OF WORK  (3-row infinite marquee)
       Row 1 & 3: left→right.  Row 2: right→left.
       Hover item: turns blue. Hover row: pauses the marquee.
       ===================================================================== */
    .type-work {
      background: #050505;
      position: relative;
      overflow: hidden;
      padding: clamp(5rem, 11vh, 9rem) 0 clamp(4rem, 9vh, 8rem);
    }
    .type-work__rows {
      display: flex;
      flex-direction: column;
      gap: clamp(0.4rem, 1.5vh, 1.8rem);
    }
    .type-work__row {
      overflow: hidden;
      width: 100%;
    }
    /* Pause the whole row's animation while hovering so items are readable */
    .type-work__row:hover .type-work__track { animation-play-state: paused; }
    .type-work__track {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      will-change: transform;
    }
    /* Row 1 & 3: left → right (animation starts at -50%, ends at 0%) */
    .type-work__track--ltr { animation: tw-ltr 32s linear infinite; }
    /* Row 2: right → left (animation starts at 0%, ends at -50%) */
    .type-work__track--rtl { animation: tw-rtl 38s linear infinite; }
    @keyframes tw-ltr {
      from { transform: translateX(-50%); }
      to   { transform: translateX(0); }
    }
    @keyframes tw-rtl {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .type-work__item {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.1rem, 3vw, 3rem);
      color: rgba(255,255,255,0.15);
      text-transform: uppercase;
      letter-spacing: -0.02em;
      line-height: 1.1;
      padding: 0 clamp(1.5rem, 3vw, 3.5rem);
      cursor: default;
      user-select: none;
      flex-shrink: 0;
      transition: color 0.22s ease;
    }
    .type-work__item:hover { color: var(--primary); }
    .type-work__sep {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(2.4rem, 5vw, 6rem);
      color: rgba(255,255,255,0.07);
      line-height: 1.1;
      flex-shrink: 0;
      user-select: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .type-work__track { animation: none !important; }
    }

    /* =====================================================================
       SECTION 5 — TRUST / PILLARS
       Heading: full 100vh screen, centered.
       Cards:   full 100vh screen side-by-side, image dominates each card.
       ===================================================================== */
    .trust { background: #050505; position: relative; }

    /* Heading — full viewport screen */
    .trust__header {
      height: calc(100vh - var(--nav-h));
      height: calc(100dvh - var(--nav-h));
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 clamp(2rem, 6vw, 6rem);
    }
    .trust__heading {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2.5rem, 5.5vw, 7.5rem);
      color: #ffffff;
      letter-spacing: -0.03em;
      line-height: 1.05;
    }

    /* Pillars sit in a single viewport panel — no scroll runway */
    .trust__cards-sticky {
      position: relative;
      height: calc(100vh - var(--nav-h));
      height: calc(100dvh - var(--nav-h));
    }
    .trust__pillars {
      display: flex;
      height: 100%;
      gap: 2px;
    }
    .trust__pillar {
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: flex-grow 0.52s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Image fills the entire tile — positioned absolutely, covers every pixel */
    .trust__pillar-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      /* Scale up slightly so blur doesn't show transparent edges at boundary */
      transform: scale(1.08);
      filter: blur(10px);
      transition: filter 0.5s ease, transform 0.5s ease;
      z-index: 0;
    }
    /* All equal by default; hovered one gets ~2× width, others stay visible */
    .trust__pillars:hover .trust__pillar         { flex-grow: 0.8; }
    .trust__pillars:hover .trust__pillar:hover   { flex-grow: 1.6; }

    .trust__pillar-img                                               { filter: blur(0); transform: scale(1); }
    .trust__pillars:hover .trust__pillar         .trust__pillar-img  { filter: blur(4px); transform: scale(1.05); }
    .trust__pillars:hover .trust__pillar:hover   .trust__pillar-img  { filter: blur(0);   transform: scale(1); }

    /* Dark gradient overlay so text stays readable over the image */
    .trust__pillar-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }
    .trust__pillar--1 .trust__pillar-overlay {
      background: linear-gradient(160deg, rgba(5,5,5,0.55) 0%, rgba(80,32,4,0.45) 100%);
    }
    .trust__pillar--2 .trust__pillar-overlay {
      background: linear-gradient(160deg, rgba(4,4,18,0.6) 0%, rgba(12,22,120,0.45) 100%);
    }
    .trust__pillar--3 .trust__pillar-overlay {
      background: linear-gradient(160deg, rgba(4,4,18,0.6) 0%, rgba(8,15,90,0.4) 100%);
    }

    /* Text layer sits above image and overlay */
    .trust__pillar-inner {
      position: absolute;
      inset: 0;
      padding: clamp(2rem, 3.5vw, 3.5rem);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 2;
    }
    .trust__pillar-num {
      font-size: 0.76rem;
      font-weight: 600;
      color: var(--primary);
      letter-spacing: 0.06em;
      margin-bottom: 0.65rem;
      white-space: nowrap;
    }
    .trust__pillar-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.6rem, 2.4vw, 3rem);
      color: #ffffff;
      letter-spacing: -0.025em;
      line-height: 1.1;
    }

    /* Description fades in at the bottom when active/hovered */
    .trust__pillar-desc {
      font-size: clamp(0.82rem, 1vw, 0.9rem);
      color: rgba(255,255,255,0.62);
      line-height: 1.72;
      max-width: 420px;
      margin-top: auto;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.35s ease 0.2s, transform 0.35s ease 0.2s;
    }
    .trust__pillars:hover .trust__pillar:hover .trust__pillar-desc {
      opacity: 1;
      transform: translateY(0);
    }

    /* =====================================================================
       SECTION 6 — HOW IT WORKS  (3 full-screen videos stacked vertically)
       ===================================================================== */
    .hiw {
      background: #080808;
    }

    /* ── Title screen ── */
    .hiw__title-screen {
      position: relative;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hiw__heading {
      font-size: clamp(3.5rem, 8vw, 8rem);
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.02em;
      text-align: center;
      line-height: 1;
    }

    /* ── Slot: tall container that provides scroll room for the sticky reel ── */
    .hiw__slot {
      height: 200vh;
      height: 200dvh;
    }

    /* ── Reel: sticks below the nav, holds while user scrolls through the slot ── */
    .hiw__reel {
      position: sticky;
      top: var(--nav-h, 64px);
      height: calc(100vh - var(--nav-h, 64px));
      height: calc(100dvh - var(--nav-h, 64px));
      overflow: hidden;
    }

    /* Later reels sit on top so each one rises over the previous */
    .hiw__reel--1 { z-index: 1; }
    .hiw__reel--2 { z-index: 2; }
    .hiw__reel--3 { z-index: 3; }
    .hiw__reel--4 { z-index: 4; }

    /* Left gradient fade so overlay text is always readable */
    .hiw__reel::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.9) 28%, rgba(0,0,0,0.5) 36%, transparent 40%);
      z-index: 5;
      pointer-events: none;
    }

    /* Content overlay — vertically centered, left-aligned */
    .hiw__overlay {
      position: absolute;
      top: 50%;
      left: clamp(2.5rem, 5vw, 6rem);
      transform: translateY(-50%);
      z-index: 10;
      max-width: clamp(280px, 38vw, 560px);
    }
    .hiw__step {
      font-size: clamp(0.72rem, 0.9vw, 0.85rem);
      font-weight: 600;
      color: #4f6fff;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 0.6rem;
    }

    /* Narrower overlay for step 3 so text wraps to more lines */
    .hiw__reel--narrow .hiw__overlay {
      max-width: clamp(200px, 22vw, 320px);
    }
    .hiw__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2rem, 3.4vw, 3.4rem);
      color: #fff;
      letter-spacing: -0.025em;
      line-height: 1.08;
      margin-bottom: clamp(2.5rem, 5vh, 4.5rem);
    }
    .hiw__desc {
      font-size: clamp(1.08rem, 1.44vw, 1.4rem);
      color: rgba(255,255,255,0.75);
      line-height: 1.65;
      max-width: 520px;
    }

    /* Video fills the reel */
    .hiw__video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* =====================================================================
       SECTION 7 — FOUNDER
       Phase 0 (white): large "Founder" heading, portrait strip centred
       Phase 1: strip expands sideways, dark bg revealed
       Phase 2: name / bio / quote fade in
       Phase 3: vision + mission fade in at bottom
       ===================================================================== */
    .founder {
      position: relative;
      height: 300vh;
      background: #fff;
    }
    .founder__sticky {
      position: sticky;
      top: var(--nav-h);
      height: calc(100vh - var(--nav-h));
      height: calc(100dvh - var(--nav-h));
      overflow: hidden;
      isolation: isolate;
      background: #fff;
    }

    /* White intro layer */
    .founder__intro {
      position: absolute;
      inset: 0;
      z-index: 15;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      will-change: opacity;
    }
    .founder__section-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(5rem, 14vw, 16rem);
      color: var(--ink);
      letter-spacing: -0.045em;
      line-height: 1;
      text-align: center;
    }

    /* Portrait image */
    .founder__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      clip-path: inset(0% 35% 0% 35%);
      will-change: clip-path;
    }

    /* Vignette — bottom-heavy gradient keeps text readable */
    .founder__vignette {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.20) 0%,
        transparent 22%,
        transparent 50%,
        rgba(0,0,0,0.65) 82%,
        rgba(0,0,0,0.88) 100%
      );
      clip-path: inset(0% 35% 0% 35%);
      pointer-events: none;
      will-change: clip-path;
    }

    /* Content overlay (name + bio + quote) */
    .founder__overlay {
      position: absolute;
      inset: 0;
      opacity: 0;
      will-change: opacity;
      pointer-events: none;
    }

    /* Left: name + bio */
    .founder__left {
      position: absolute;
      top: clamp(6rem, 12vh, 9rem);
      left: clamp(3rem, 5.5vw, 7rem);
    }
    .founder__name {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      color: #fff;
      letter-spacing: -0.025em;
      line-height: 1.1;
      margin-bottom: 0.75rem;
    }
    .founder__bio {
      font-size: clamp(0.82rem, 0.95vw, 0.9rem);
      color: rgba(255,255,255,0.55);
      line-height: 1.75;
      max-width: 270px;
    }

    /* Right: quote */
    .founder__quote-block {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: clamp(3rem, 5.5vw, 7rem);
      max-width: 360px;
    }
    .founder__quote-icon {
      display: block;
      font-size: 2rem;
      color: #fff;
      opacity: 0.85;
      margin-bottom: 1rem;
      font-family: Georgia, serif;
      line-height: 1;
    }
    .founder__quote-text {
      font-size: clamp(0.88rem, 1.05vw, 0.98rem);
      color: rgba(255,255,255,0.72);
      line-height: 1.78;
    }

    /* Vision + Mission */
    .founder__vmission {
      position: absolute;
      bottom: clamp(2.5rem, 5vh, 4rem);
      right: clamp(3rem, 5.5vw, 7rem);
      width: 360px;
      display: flex;
      flex-direction: column;
      gap: clamp(2.5rem, 5vh, 4rem);
      opacity: 0;
      will-change: opacity;
      pointer-events: none;
    }
    .founder__vm-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.54rem, 2.1vw, 1.96rem);
      color: #fff;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 0.55rem;
    }
    .founder__vm-desc {
      font-size: clamp(0.72rem, 0.8vw, 0.82rem);
      color: rgba(255,255,255,0.45);
      line-height: 1.4;
      white-space: nowrap;
    }

    @media (max-width: 760px) {
      .founder__section-title { font-size: clamp(4rem, 18vw, 8rem); }
      .founder__quote-block {
        top: auto;
        transform: none;
        right: clamp(2rem, 5vw, 3rem);
        bottom: clamp(7rem, 18vh, 10rem);
        max-width: 55%;
      }
      .founder__vmission {
        top: auto;
        transform: none;
        right: clamp(2rem, 5vw, 3rem);
        bottom: 1.5rem;
        gap: 1.5rem;
      }
      .founder__vm-desc { max-width: 130px; }
    }

    /* =====================================================================
       SECTION 8 — TESTIMONIALS  (stacked card carousel)
       Single viewport, card stack with left/right arrow navigation.
       ===================================================================== */
    .testimonials {
      position: relative;
      min-height: 100vh;
      min-height: 100dvh;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .testimonials__inner {
      width: 100%;
      max-width: 780px;
      padding-inline: clamp(2rem, 4vw, 4rem);
      padding-top: var(--nav-h);
    }

    /* Name + arrows row */
    .testimonials__meta-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 1.1rem;
    }
    .testimonials__name {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.35rem, 2vw, 1.8rem);
      color: var(--ink);
      letter-spacing: -0.02em;
      line-height: 1.1;
    }
    .testimonials__role {
      font-size: 0.9rem;
      color: var(--muted);
      margin-top: 0.25rem;
    }

    /* Arrow buttons */
    .testimonials__arrows {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      flex-shrink: 0;
      padding-top: 0.1rem;
    }
    .testimonials__arrow {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1.5px solid var(--line);
      background: transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ink);
      transition: background 0.2s, border-color 0.2s;
    }
    .testimonials__arrow:hover:not(:disabled) { background: #f2f2f2; border-color: #bbb; }
    .testimonials__arrow:disabled { opacity: 0.22; cursor: default; }

    /* Photo area — 3 real cards stacked; active front, two others blurred behind */
    .testimonials__photo-area {
      position: relative;
      padding-top: 45.5%; /* 100% / 2.2 ≈ 2.2:1 ratio */
      margin-bottom: 1.2rem;
    }
    .testimonials__card {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center top;
      
      transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
                  filter  0.65s ease,
                  opacity 0.65s ease;
    }

    .testimonials__card--front {
      z-index: 2;
      transform: translate(0, 0);
      filter: none;
      opacity: 1;
    }
    .testimonials__card--mid {
      z-index: 1;
      transform: translate(26px, 8px);
      filter: blur(4px);
      opacity: 0.55;
    }
    .testimonials__card--back {
      z-index: 0;
      transform: translate(50px, 14px);
      filter: blur(9px);
      opacity: 0.28;
    }

    /* Quote block */
    .testimonials__quote-row {
      display: flex;
      gap: 1.2rem;
      align-items: flex-start;
    }
    .testimonials__quote-icon {
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      background: var(--ink);
      color: #fff;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      font-family: Georgia, serif;
      line-height: 1;
      padding-bottom: 3px;
    }
    .testimonials__quote {
      font-size: clamp(0.9rem, 1.05vw, 1rem);
      color: var(--ink);
      line-height: 1.75;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .testimonials__name,
    .testimonials__role { transition: opacity 0.3s ease, transform 0.3s ease; }

    /* =====================================================================
       SECTION 9 — CONTACT  (madlib step form)
       ===================================================================== */
    .contact {
      position: relative;
      min-height: 100vh;
      min-height: 100dvh;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
    }
    .contact__inner {
      padding-top: calc(var(--nav-h) + 3rem);
      padding-bottom: 4rem;
      padding-left: clamp(9rem, 17vw, 14rem);
      padding-right: clamp(3rem, 6vw, 6rem);
      max-width: 1100px;
    }
    .contact__tabs {
      display: flex;
      gap: 1.8rem;
      margin-bottom: clamp(2rem, 5vh, 4rem);
    }
    .contact__tab {
      font-family: var(--font-body);
      font-size: 0.95rem;
      color: var(--muted);
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      transition: color 0.2s;
    }
    .contact__tab.is-active { color: var(--primary); }

    .contact__step {
      opacity: 0.2;
      transition: opacity 0.45s ease;
      cursor: text;
      margin-bottom: clamp(1.2rem, 2.5vw, 2rem);
    }
    .contact__step.is-active { opacity: 1; }
    .contact__step.is-done   { opacity: 0.42; }

    .contact__line {
      display: flex;
      align-items: baseline;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.5rem, 3vw, 3.5rem);
      color: var(--ink);
      line-height: 1.08;
      letter-spacing: -0.03em;
      margin-bottom: clamp(0.5rem, 1.2vw, 1rem);
    }
    .contact__line:last-child { margin-bottom: 0; }
    /* Span wrapper is the flex child — inputs as direct flex children are unreliable */
    .contact__field-wrap {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: baseline;
    }
    .contact__field {
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 2.5px solid var(--ink);
      outline: none;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: inherit;
      color: var(--ink);
      letter-spacing: -0.03em;
      line-height: 1.15;
      padding: 0 0.12em 0.06em;
      transition: border-color 0.2s;
    }
    .contact__field:focus         { border-bottom-color: var(--primary); }
    .contact__field::placeholder  { color: #d0d0d0; }
    .contact__step:not(.is-active) .contact__field { border-bottom-color: #c4c4c4; }

    .contact__submit-row {
      margin-top: clamp(2.5rem, 5vh, 4rem);
      display: flex;
      justify-content: flex-end;
    }
    .contact__send {
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 500;
      padding: 0.75rem 2.5rem;
      cursor: pointer;
      transition: background 0.2s;
    }
    .contact__send:hover { background: #1a1adc; }
    .contact__send:disabled {
      opacity: 0.65;
      cursor: not-allowed;
    }
    .contact__response {
      margin-top: 1rem;
      font-size: 0.95rem;
      line-height: 1.5;
      text-align: right;
      color: var(--muted);
    }
    .contact__response.is-success { color: var(--primary); }
    .contact__response.is-error { color: #c0392b; }

    /* Hidden CF7 bridge — powers submission without changing the madlib UI */
    .touchblack-cf7-bridge-wrap,
    .touchblack-cf7-bridge-wrap .wpcf7-response-output {
      display: none !important;
    }

    /* =====================================================================
       FOOTER
       ===================================================================== */
    .footer {
      background: #080808;
      color: #fff;
    }

    /* Top grid: logo | nav | social | legal | address */
    .footer__top {
      display: grid;
      grid-template-columns: 180px repeat(3, minmax(0,1fr)) minmax(220px, 1.5fr);
      gap: 2.5rem 4rem;
      padding: 4.5rem clamp(2.5rem, 5vw, 5rem);
      align-items: start;
    }
    .footer__logo { display: inline-flex; }
    .footer__logo img { display: block; }

    .footer__links {
      display: flex;
      flex-direction: column;
      gap: 1.35rem;
    }
    .footer__links a {
      font-size: 1rem;
      color: rgba(255,255,255,0.62);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer__links a:hover { color: #fff; }

    .footer__col--address {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }
    .footer__address {
      font-style: normal;
      font-size: 0.875rem;
      color: rgba(255,255,255,0.45);
      line-height: 1.75;
      display: flex;
      gap: 0.5rem;
      align-items: flex-start;
    }
    .footer__address svg { flex-shrink: 0; margin-top: 0.2em; opacity: 0.6; }
    .footer__contact-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1rem;
      color: rgba(255,255,255,0.78);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer__contact-link svg { flex-shrink: 0; opacity: 0.7; }
    .footer__contact-link:hover { color: #fff; }
    .footer__contact-link:hover svg { opacity: 1; }

    /* Giant LOGIN / SIGNUP */
    .footer__cta {
      padding: 1rem clamp(1rem, 1.5vw, 2rem) 0;
      overflow: hidden;
      text-align: center;
    }
    .footer__cta-link {
      display: inline;
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(4rem, 13.5vw, 16rem);
      color: #fff;
      text-decoration: none;
      line-height: 0.88;
      letter-spacing: -0.045em;
      transition: opacity 0.3s ease;
    }
    .footer__cta-sep {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: clamp(4rem, 13.5vw, 16rem);
      color: rgba(255,255,255,0.3);
      line-height: 0.88;
      letter-spacing: -0.045em;
      pointer-events: none;
    }
    .footer__cta:hover .footer__cta-link      { opacity: 0.2; }
    .footer__cta .footer__cta-link:hover      { opacity: 1; }

    /* Copyright bar */
    .footer__bottom {
      border-top: 1px solid rgba(255,255,255,0.1);
      padding: 1.5rem clamp(2.5rem, 5vw, 5rem);
      text-align: center;
    }
    .footer__bottom p {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.32);
    }

    /* =====================================================================
       PRODUCER SECTION — inline embed between marketing nav and footer
       ===================================================================== */
    :root {
      --producer-header-h: 80px; /* producer.talentgridnow.com nav height */
    }

    .producer-section {
      padding-top: var(--nav-h);
      background: #080808; /* dark bg so page flow below iframe is never white */
    }
    .producer-section[hidden] { display: none; }

    .producer-section__wrap {
      height: calc(100vh - var(--nav-h));
      height: calc(100dvh - var(--nav-h));
      overflow: hidden;
      position: relative;
      isolation: isolate;
    }

    .producer-section__frame {
      position: absolute;
      top: calc(-1 * var(--producer-header-h)); /* shifts producer nav out of view */
      left: 0;
      width: 100%;
      height: calc(100% + var(--producer-header-h));
      border: none;
      z-index: 1;
    }

    .producer-section__fade {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 120px;
      background: linear-gradient(to bottom, rgba(8,8,8,0) 0%, #080808 100%);
      pointer-events: none;
      z-index: 10;
    }



    /* =====================================================================
       GENERIC WORDPRESS PAGES (blog, archives, etc.)
       ===================================================================== */
    .page-content__body {
      padding-block: var(--space-6);
      padding-top: calc(var(--nav-h) + var(--space-6));
    }
    .page-content__body--center {
      text-align: center;
    }
    .page-content__article {
      padding-block: var(--space-4);
      border-bottom: 1px solid var(--line);
    }
    .page-content__article:last-of-type {
      border-bottom: none;
    }
    .page-content__title {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2rem);
      margin-bottom: var(--space-1);
    }
    .page-content__title a:hover {
      color: var(--primary);
    }
    .page-content__meta {
      color: var(--muted);
      font-size: 0.9rem;
      margin-bottom: var(--space-2);
    }
    .page-content__excerpt,
    .page-content__entry {
      color: var(--ink);
      line-height: 1.7;
    }
    .page-content__entry > * + * {
      margin-top: var(--space-2);
    }
    .page-content__pagination {
      margin-top: var(--space-6);
    }
    .page-content__description {
      margin-bottom: var(--space-4);
      color: var(--muted);
    }
    /* =====================================================================
       SHORT-SCREEN ADAPTATIONS  (Windows laptops, compact browsers)
       Targets viewports under ~720px tall — tightens vertical spacing so
       nothing is clipped by the nav bar or viewport bottom.
       ===================================================================== */
    @media (max-height: 720px) {

      /* ── Section 2: problem reveal — image anchored to center so face stays visible */
      .problem-reveal__img { object-position: center center; }

      /* ── Section 3: solution gallery — nothing to change, images are cover */

      /* ── Section 4: audience personas — pull content up from bottom */
      .audience__persona-content {
        bottom: clamp(1.5rem, 4vh, 3rem);
        gap: clamp(2rem, 5vw, 7rem);
      }
      .audience__persona-name { font-size: clamp(1.5rem, 2.5vw, 2.2rem); }
      .audience__persona-desc { font-size: clamp(0.75rem, 1vw, 0.9rem); }
      .audience__nav-row      { bottom: clamp(0.75rem, 2vh, 1.5rem); }

      /* ── Section 5: trust cards — smaller heading, tighter pillar description */
      .trust__header { padding-block: 1.5rem; }
      .trust__heading { font-size: clamp(2rem, 4.5vw, 5rem); }
      .trust__pillar-desc {
        font-size: clamp(0.7rem, 0.85vw, 0.82rem);
        max-height: 7rem;
        overflow: hidden;
      }

      /* ── Section 6: How it Works — compact title screen */
      .hiw__title-screen { min-height: 80vh; min-height: 80dvh; padding-block: 3rem; }
      .hiw__heading { font-size: clamp(2.5rem, 6vw, 5.5rem); }
      /* Videos: shrink slot so user doesn't have to scroll as far */
      .hiw__slot { height: 160vh; height: 160dvh; }

      /* ── Section 7: founder — move name/bio closer to top edge */
      .founder__left { top: clamp(4rem, 8vh, 6rem); }
      .founder__name { font-size: clamp(1.5rem, 2.5vw, 2.2rem); }
      .founder__img  { object-position: center 15%; }

      /* ── Section 8: testimonials — reduce top padding */
      .testimonials__inner { padding-top: calc(var(--nav-h) + 0.5rem); }

      /* ── Section 9: contact — less top breathing room */
      .contact__inner { padding-top: calc(var(--nav-h) + 1.5rem); }
    }

    /* Extra tight: very short (budget Windows at 100% zoom, ~600px viewport) */
    @media (max-height: 620px) {
      .audience__persona-content { bottom: 1rem; }
      .audience__nav-row          { bottom: 0.5rem; }
      .trust__heading             { font-size: clamp(1.8rem, 4vw, 4rem); }
      .hiw__title-screen          { min-height: 70vh; min-height: 70dvh; }
      .hiw__heading               { font-size: clamp(2rem, 5vw, 4rem); }
      .founder__left              { top: 3.5rem; }
    }