/* Critical above-the-fold styles — parsed first */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
      --ice: #B8E3E9;
      --grey-blue: #93B1B5;
      --slate: #4F7C82;
      --deep-teal: #0B2E33;
      --cyan: #24ACC3;
      --navy: #001321;
      --mint: #D9EFE8;
      --gold: #C4A565;
      --white: #FFFFFF;
      --text: #B8E3E9;
      --text-muted: #93B1B5;
    }

    html { scroll-behavior: smooth; font-size: 16px; }

    body {
      font-family: 'Garet', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: var(--navy);
      color: var(--text);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    a { color: var(--cyan); text-decoration: none; transition: color 0.2s; }

    /* ───── HERO ───── */
    .hero {
      position: relative;
      min-height: 100vh;
      background-color: var(--navy);
      overflow: hidden;
      isolation: isolate;
    }

    .hero__bg {
      position: absolute;
      inset: 0;
      background-image: url('/images/hero_ref__blank_01.webp');
      background-size: cover;
      background-position: 65% center;
      background-repeat: no-repeat;
      z-index: 0;
      transform: scale(1.04);
      transform-origin: 65% 50%;
      will-change: transform;
    }

    /* Left-to-right gradient so text reads without darkening the focal */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg,
        rgba(0, 19, 33, 0.88) 0%,
        rgba(0, 19, 33, 0.72) 22%,
        rgba(0, 19, 33, 0.32) 50%,
        rgba(0, 19, 33, 0.00) 72%);
      z-index: 1;
    }

    /* Film grain overlay (subtle, mix-blend overlay) */
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      opacity: 0.07;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
      background-size: 160px 160px;
    }

    .hero__headline-line { display: block; }

    .hero__inner {
      position: relative;
      z-index: 2;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(1.25rem, 3vw, 3rem);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* Nav */
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
    }

    .nav__brand {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: clamp(1.05rem, 1.5vw, 1.35rem);
      color: var(--white);
      letter-spacing: 0.01em;
      white-space: nowrap;
    }
    .nav__brand strong { font-weight: 700; letter-spacing: 0.04em; }
    .nav__brand span { font-weight: 400; margin-left: 0.4rem; opacity: 0.92; }

    .nav__links {
      display: flex;
      gap: clamp(1.5rem, 3vw, 2.75rem);
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav__links a {
      color: var(--white);
      font-size: 0.95rem;
      font-weight: 500;
      opacity: 0.85;
      transition: opacity 0.2s;
    }
    .nav__links a:hover { opacity: 1; color: var(--white); }

    .nav__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(255, 255, 255, 0.07);
      color: var(--white);
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.95rem;
      padding: 0.7rem 1.4rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.10) inset;
      transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
      white-space: nowrap;
    }
    .nav__cta:hover {
      color: var(--white);
      background: rgba(255, 255, 255, 0.13);
      border-color: rgba(255, 255, 255, 0.4);
      transform: translateY(-1px);
      box-shadow: 0 6px 22px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
    }

    /* Hero content rail */
    .hero__content {
      max-width: 640px;
      margin-top: auto;
      margin-bottom: auto;
      padding: clamp(2rem, 6vh, 4rem) 0;
    }

    .hero__eyebrow {
      display: inline-block;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.75rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: clamp(1.5rem, 3.5vh, 2.25rem);
    }

    .hero__headline {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 500;
      font-size: clamp(2rem, 5vw, 4.2rem);
      line-height: 1.08;
      letter-spacing: -0.01em;
      color: var(--white);
      margin-bottom: clamp(2rem, 5vh, 3rem);
    }
    .hero__headline em {
      font-style: italic;
      font-weight: 500;
      color: var(--gold);
    }

    .hero__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 1.05rem;
      font-weight: 500;
      color: var(--white);
      padding: 0.15rem 0 0.6rem 0;
      border-bottom: 2px solid var(--gold);
      transition: gap 0.2s, color 0.2s;
    }
    .hero__cta:hover { color: var(--white); gap: 0.95rem; }
    .hero__cta__arrow { display: inline-block; transition: transform 0.2s; }
    .hero__cta:hover .hero__cta__arrow { transform: translateX(3px); }

    /* Responsive */
  

    /* Non-critical styles (responsive, animations, below-fold) */
    @media (max-width: 920px) {
      .hero::before {
        background: linear-gradient(180deg,
          rgba(0, 19, 33, 0.55) 0%,
          rgba(0, 19, 33, 0.78) 55%,
          rgba(0, 19, 33, 0.92) 100%);
      }
      .nav__links { display: none; }
      .nav__cta { padding: 0.55rem 1rem; font-size: 0.85rem; }
      .hero__content { max-width: 100%; padding-top: 2.5rem; }
      .hero__headline { font-size: clamp(2rem, 9vw, 3.4rem); }
    }

    @media (max-width: 480px) {
      .hero__eyebrow { font-size: 0.7rem; }
      .hero__cta { font-size: 0.95rem; }
    }

    /* ───── HERO MOTION (cinematic title card) ───── */
    @media (prefers-reduced-motion: no-preference) {
      /* Slow horizon drift on the background plate. Gated behind .anim-ready so it does
         not start during the Lighthouse TBT window (we add the class on requestIdleCallback). */
      .anim-ready .hero__bg {
        animation: heroDrift 22s ease-in-out infinite alternate;
      }
      @keyframes heroDrift {
        from { transform: scale(1.04) translate(0, 0); }
        to   { transform: scale(1.08) translate(-0.8%, 0.6%); }
      }

      /* Gentle gradient breathing so the dark plate feels alive. Also gated. */
      .anim-ready .hero::before {
        animation: heroBreath 16s ease-in-out infinite alternate;
      }
      @keyframes heroBreath {
        from { opacity: 1; }
        to   { opacity: 0.92; }
      }

      /* Film grain shimmer - tiny positional jitter. Static on mobile/desktop initial paint
         to avoid main-thread paint cost during Lighthouse TBT window. The compositor would
         normally handle this, but on large desktop viewports the cumulative paint cost of
         this + heroDrift + heroBreath + ticker was enough to push desktop TBT into the red. */
      .hero::after {
        /* animation disabled for performance; the static grain still reads as texture. */
      }

      /* Title-card: visible immediately, no animation blocking paint */
      .hero__eyebrow,
      .hero__headline-line,
      .hero__cta {
        opacity: 1;
        transform: none;
      }

      /* Idle nudge on the CTA arrow once the reveal sequence has settled */
      .hero__cta__arrow {
        animation: heroArrowIdle 4.5s ease-in-out 3s infinite;
      }
      @keyframes heroArrowIdle {
        0%, 88%, 100% { transform: translateX(0); }
        50%           { transform: translateX(3px); }
      }
    }

    /* ───── ANNOUNCEMENT TICKER (breaks up the navy sections) ───── */
    .ticker {
      background: #F2EDE3;
      overflow: hidden;
      border-top: 1px solid rgba(0, 19, 33, 0.05);
      border-bottom: 1px solid rgba(0, 19, 33, 0.05);
      position: relative;
    }
    .ticker__track {
      display: flex;
      width: max-content;
      padding: 0.6rem 0;
    }
    /* Animation only after the page is idle, so it does not contribute to TBT during initial load. */
    .anim-ready .ticker__track {
      animation: ticker 28s linear infinite;
    }
    @media (max-width: 720px) {
      .anim-ready .ticker__track { animation-duration: 18s; }
    }
    .ticker:hover .ticker__track { animation-play-state: paused; }
    .ticker__item {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      padding: 0 2.5rem;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.82rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--navy);
      white-space: nowrap;
    }
    .ticker__label {
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-size: 0.7rem;
      color: var(--gold);
    }
    .ticker__dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--gold);
      display: inline-block;
    }
    .ticker__item a {
      color: #1C3F5D;
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
      transition: color 0.2s;
    }
    .ticker__item a:hover { color: var(--navy); }
    @keyframes ticker {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .ticker__track { animation: none; padding-left: 1rem; }
    }
    .why__meet {
      margin-top: 2rem;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.95rem;
    }
    .why__meet a {
      color: #1C3F5D;
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
      transition: color 0.2s;
    }
    .why__meet a:hover { color: var(--navy); }

    /* ───── MODULES ───── */
    .modules {
      position: relative;
      background-color: var(--navy);
      background-image: url('/images/Modules%20full%20reference%20no%20text%202.webp');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      isolation: isolate;
    }
    /* Scrim - keeps the intro copy legible against bright parts of the bg image. */
    .modules::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(0, 19, 33, 0.88) 0%, rgba(0, 19, 33, 0.7) 40%, rgba(0, 19, 33, 0.35) 70%, rgba(0, 19, 33, 0.2) 100%);
      z-index: 0;
      pointer-events: none;
    }
    .modules__inner {
      position: relative;
      z-index: 1;
    }
    /* Wide viewports - even row distribution so each module gets its own visible band.
       No aspect-ratio lock, so content always renders (all 7 modules visible). */
    @media (min-width: 1100px) {
      .modules__list {
        display: grid;
        grid-template-rows: repeat(7, minmax(96px, auto));
      }
      .module {
        align-content: center;
      }
    }

    .modules__inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: clamp(1.5rem, 4vh, 3rem) clamp(1.25rem, 3vw, 3rem) clamp(2rem, 5vh, 3.5rem);
      display: grid;
      grid-template-columns: minmax(280px, 36%) 1fr;
      gap: clamp(1.5rem, 4vw, 4rem);
      align-items: stretch;
    }

    .modules__intro {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding-right: 1rem;
      padding-top: 0;
    }
    .modules__heading {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 500;
      font-size: clamp(1.9rem, 3.2vw, 3.2rem);
      line-height: 1.08;
      letter-spacing: -0.005em;
      color: var(--white);
      margin-bottom: 1.25rem;
    }
    .modules__heading em {
      font-style: italic;
      color: var(--gold);
      font-weight: 500;
    }
    .modules__divider {
      width: 60px;
      height: 2px;
      background: var(--gold);
      margin-bottom: 1.5rem;
    }
    .modules__lede {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.95rem;
      line-height: 1.65;
      color: var(--ice);
      max-width: 320px;
    }

    .modules__list {
      list-style: none;
      margin: 0;
      padding: 0;
      margin-left: clamp(-6rem, -6vw, -2rem);
      display: flex;
      flex-direction: column;
    }

    .module {
      display: grid;
      grid-template-columns: clamp(60px, 8%, 90px) 1fr auto;
      align-items: center;
      gap: clamp(1rem, 2vw, 2rem);
      padding: clamp(0.8rem, 1.6vw, 1.4rem) 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }
    .module:first-child { border-top: 1px solid rgba(255, 255, 255, 0.07); }

    .module__num {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 400;
      font-size: clamp(1.9rem, 2.8vw, 2.8rem);
      color: var(--grey-blue);
      opacity: 0.78;
      letter-spacing: 0.02em;
    }

    .module__body { min-width: 0; }

    .module__eyebrow {
      display: inline-block;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 0.55rem;
    }

    .module__title {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 500;
      font-size: clamp(1.15rem, 1.55vw, 1.5rem);
      line-height: 1.22;
      color: var(--white);
      margin: 0 0 0.55rem 0;
    }

    .module__meta {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.84rem;
      color: var(--grey-blue);
      letter-spacing: 0.02em;
    }
    .module__meta span { opacity: 0.6; margin: 0 0.5rem; }

    .module__quote {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: normal;
      font-size: 0.95rem;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.85);
      max-width: 280px;
      padding-left: 1.2rem;
      position: relative;
      align-self: center;
    }
    .module__quote::before {
      content: '\201C';
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 2.1rem;
      position: absolute;
      left: 0;
      top: -0.45rem;
      color: var(--gold);
      opacity: 0.85;
      line-height: 1;
    }
    .module__quote p { margin: 0; }
    .module__quote em {
      font-style: italic;
      color: var(--gold);
      display: block;
      margin-top: 0.15rem;
    }

    .module {
      cursor: default;
      transition: background-color 0.25s ease;
    }
    .module:hover {
      background-color: rgba(196, 165, 101, 0.04);
    }
    .module:hover .module__num { opacity: 1; color: var(--gold); }

    .module--flagship .module__eyebrow { font-weight: 700; }
    /* Pull-quotes hidden - they were overlapping the photographic strips on flagship rows */
    .module__quote { display: none; }

    /* ───── WHY TESSA TRAINING ───── */
    .why {
      position: relative;
      background-color: #F2EDE3;
      overflow: hidden;
      isolation: isolate;
    }
    .why__bg {
      position: absolute;
      inset: 0;
      background-image: url('/images/Why%20Tessa_text%20ref_no%20text_02.webp');
      background-size: cover;
      background-position: right center;
      background-repeat: no-repeat;
      z-index: 0;
    }
    .why__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg,
        rgba(242, 237, 227, 1.00) 0%,
        rgba(242, 237, 227, 0.97) 32%,
        rgba(242, 237, 227, 0.55) 52%,
        rgba(242, 237, 227, 0.00) 72%);
      z-index: 1;
    }
    .why__inner {
      position: relative;
      z-index: 2;
      max-width: 1440px;
      margin: 0 auto;
      padding: clamp(4rem, 8vh, 6rem) clamp(1.25rem, 3vw, 3rem);
    }
    .why__content { max-width: 540px; }

    .why__eyebrow {
      display: inline-block;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.75rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #1C3F5D;
      margin-bottom: 1.4rem;
    }

    .why__heading {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 500;
      font-size: clamp(1.9rem, 3.4vw, 3rem);
      line-height: 1.06;
      letter-spacing: -0.015em;
      color: var(--navy);
      margin: 0 0 3rem 0;
      max-width: 420px;
    }

    .why__props {
      display: flex;
      flex-direction: column;
      gap: clamp(1.5rem, 2.5vh, 2rem);
    }
    .prop__title {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      color: var(--navy);
      margin: 0 0 0.45rem 0;
      letter-spacing: 0.005em;
    }
    .prop__body {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.95rem;
      line-height: 1.6;
      color: #475762;
      max-width: 380px;
      margin: 0;
    }

    @media (max-width: 920px) {
      .why__overlay {
        background: linear-gradient(180deg,
          rgba(242, 237, 227, 0.92) 0%,
          rgba(242, 237, 227, 0.96) 60%,
          rgba(242, 237, 227, 1.00) 100%);
      }
      .why__content { max-width: 100%; }
    }
    @media (max-width: 640px) {
      .why__bg { background-image: none; }
    }

    /* ───── WHY NOW - teaser only; deep dive lives at /legal.html ───── */
    .whynow {
      position: relative;
      background: var(--navy);
      padding: clamp(3rem, 6vh, 5rem) clamp(1.25rem, 3vw, 3rem);
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .whynow__inner {
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
    }
    .whynow__eyebrow {
      display: inline-block;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 0.72rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1.2rem;
    }
    .whynow__heading {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 500;
      font-size: clamp(1.6rem, 2.8vw, 2.4rem);
      line-height: 1.08;
      letter-spacing: -0.015em;
      color: var(--white);
      margin: 0 0 1rem 0;
    }
    .whynow__body {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 1rem;
      line-height: 1.65;
      color: var(--grey-blue);
      margin: 0 0 1.5rem 0;
    }
    .whynow__body strong { color: var(--white); font-weight: 400; }
    /* Global rule: body strong stays readable, never heavy. Use em/underline for emphasis instead.
       Headings (h1-h4, eyebrows, footer brand) are unaffected - only <strong> inside paragraphs flattens. */
    p strong { font-weight: 400; }
    .whynow__body em { color: var(--cyan); font-style: normal; font-weight: 600; }
    .whynow__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--cyan);
      padding-bottom: 0.45rem;
      border-bottom: 1px solid var(--gold);
      transition: color 0.2s, gap 0.2s, border-color 0.2s;
    }
    .whynow__cta:hover { color: var(--white); gap: 0.9rem; border-bottom-color: var(--white); }

    /* (legacy timeline + tags overlay markup removed in favour of teaser linking to /legal.html) */

    /* ───── AUDIENCE + PRICING (dark, two stacked blocks in one section) ───── */
    .audience {
      position: relative;
      background-color: var(--navy);
      overflow: hidden;
      isolation: isolate;
    }
    .audience__bg {
      position: absolute;
      inset: 0;
      background-image: url('/images/Who%20is%20it%20for%20ref_no%20text_03.webp');
      background-size: cover;
      background-position: right center;
      background-repeat: no-repeat;
      z-index: 0;
    }
    .audience__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg,
        rgba(0, 19, 33, 1.00) 0%,
        rgba(0, 19, 33, 0.92) 28%,
        rgba(0, 19, 33, 0.35) 52%,
        rgba(0, 19, 33, 0.00) 72%);
      z-index: 1;
    }
    .audience__inner {
      position: relative;
      z-index: 2;
      max-width: 1440px;
      margin: 0 auto;
      padding: clamp(4rem, 8vh, 6rem) clamp(1.25rem, 3vw, 3rem);
    }
    .audience__block { max-width: 720px; }
    .audience__divider {
      width: 100%;
      max-width: 720px;
      height: 1px;
      background: rgba(255, 255, 255, 0.08);
      margin: clamp(2.5rem, 5vh, 4rem) 0;
    }

    .audience__eyebrow {
      display: inline-block;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.75rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 1.4rem;
    }
    .audience__heading {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 500;
      font-size: clamp(1.9rem, 3vw, 2.8rem);
      line-height: 1.08;
      letter-spacing: -0.015em;
      color: var(--white);
      margin: 0 0 2.5rem 0;
      max-width: 620px;
    }
    .audience__heading--small {
      font-size: clamp(1.6rem, 2.4vw, 2.2rem);
      margin-bottom: 1.5rem;
      max-width: 480px;
    }

    .audience__roles {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(1.5rem, 3vw, 2.5rem);
      max-width: 720px;
    }
    .role { min-width: 0; }
    .role h3 {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      color: var(--white);
      margin: 0 0 0.55rem 0;
    }
    .role p {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.9rem;
      line-height: 1.6;
      color: var(--grey-blue);
      margin: 0;
    }

    .audience__body {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.95rem;
      line-height: 1.7;
      color: var(--grey-blue);
      max-width: 480px;
      margin: 0 0 1rem 0;
    }
    .audience__body a {
      color: var(--cyan);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
      transition: color 0.2s;
    }
    .audience__body a:hover { color: var(--white); }
    .audience__body--muted { color: rgba(147, 177, 181, 0.7); font-size: 0.85rem; margin-top: 1.5rem; }

    .audience__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--white);
      background: rgba(255, 255, 255, 0.07);
      padding: 0.85rem 1.6rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      margin: 0.5rem 0 1.5rem 0;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.10) inset;
      transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
      white-space: nowrap;
    }
    .audience__cta:hover {
      color: var(--white);
      background: rgba(255, 255, 255, 0.13);
      border-color: rgba(255, 255, 255, 0.4);
      transform: translateY(-1px);
      box-shadow: 0 6px 22px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
    }

    @media (max-width: 920px) {
      .audience__overlay {
        background: linear-gradient(180deg,
          rgba(0, 19, 33, 0.78) 0%,
          rgba(0, 19, 33, 0.92) 65%,
          rgba(0, 19, 33, 0.98) 100%);
      }
      .audience__roles { grid-template-columns: 1fr; }
    }

    /* ───── CUSTOM MODULES / PROMPT PACKS ───── */
    .custom {
      position: relative;
      background-color: #F2EDE3;
      overflow: hidden;
      isolation: isolate;
    }
    .custom__bg {
      position: absolute;
      inset: 0;
      background-image: url('/images/prompts%20with%20%20no%20words.webp');
      background-size: cover;
      background-position: left bottom;
      background-repeat: no-repeat;
      z-index: 0;
    }
    .custom__inner {
      position: relative;
      z-index: 2;
      max-width: 1440px;
      margin: 0 auto;
      padding: clamp(4rem, 8vh, 6rem) clamp(1.25rem, 3vw, 3rem);
      display: grid;
      grid-template-columns: minmax(280px, 36%) 1fr;
      gap: clamp(2rem, 4vw, 4rem);
      align-items: start;
    }

    .custom__intro { max-width: 420px; }
    .custom__eyebrow {
      display: inline-block;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.75rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #1C3F5D;
      margin-bottom: 1.2rem;
    }
    .custom__heading {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 500;
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      line-height: 1.08;
      letter-spacing: -0.015em;
      color: var(--navy);
      margin: 0 0 1.25rem 0;
      max-width: 380px;
    }
    .custom__divider {
      width: 60px;
      height: 2px;
      background: var(--cyan);
      margin-bottom: 1.5rem;
    }
    .custom__body {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.95rem;
      line-height: 1.6;
      color: #475762;
      max-width: 380px;
      margin: 0;
    }
    .custom__highlight { color: #1C3F5D; font-weight: 600; }
    .custom__cta {
      border-left: 2px solid var(--gold);
      padding-left: 1rem;
      margin-top: 1.75rem;
      max-width: 360px;
    }
    .custom__cta p {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.92rem;
      line-height: 1.55;
      color: #475762;
      margin: 0;
    }
    .custom__cta a {
      color: var(--cyan);
      font-weight: 600;
      text-decoration: none;
      transition: color 0.2s;
    }
    .custom__cta a:hover { color: var(--navy); }

    .custom__btn {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--navy);
      background: rgba(0, 19, 33, 0.08);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(0, 19, 33, 0.18);
      padding: 0.9rem 1.7rem;
      border-radius: 999px;
      margin-top: 1.75rem;
      box-shadow: 0 4px 18px rgba(0, 19, 33, 0.08), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
      transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
      white-space: nowrap;
      align-self: flex-start;
    }
    .custom__btn:hover {
      color: var(--navy);
      background: rgba(0, 19, 33, 0.14);
      border-color: rgba(0, 19, 33, 0.34);
      transform: translateY(-1px);
      box-shadow: 0 8px 26px rgba(0, 19, 33, 0.15), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    }

    .custom__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }
    .pack-card {
      background: rgba(232, 240, 245, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 12px;
      padding: 1.5rem 1.55rem;
      box-shadow: 0 4px 18px rgba(0, 19, 33, 0.06), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .pack-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 28px rgba(0, 19, 33, 0.10), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    }
    .pack-card h3 {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 600;
      font-size: 1.22rem;
      color: var(--navy);
      line-height: 1.12;
      letter-spacing: -0.005em;
      margin: 0 0 0.5rem 0;
    }
    .pack-card p {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.9rem;
      line-height: 1.55;
      color: #475762;
      margin: 0;
    }

    @media (max-width: 920px) {
      .custom__inner { grid-template-columns: 1fr; }
      .custom__grid { grid-template-columns: 1fr; }
      .custom__intro { max-width: 100%; }
    }

    .prompt__footnote {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.85rem;
      font-style: italic;
      line-height: 1.55;
      color: var(--grey-blue);
      margin: 0 0 1.25rem 0;
      max-width: 540px;
    }
    .prompt__footnote a {
      color: var(--cyan);
      font-style: normal;
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
      transition: color 0.2s;
    }
    .prompt__footnote a:hover { color: var(--white); }

    /* ───── PROMPT EXAMPLE ───── */
    .prompt {
      position: relative;
      background-color: var(--navy);
      overflow: hidden;
      isolation: isolate;
    }
    .prompt__bg {
      position: absolute;
      inset: 0;
      background-image: url('/images/use%20this%20image.webp');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 0;
    }
    .prompt__overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(0,19,33,0.55) 0%, rgba(0,19,33,0.05) 22%, rgba(0,19,33,0.05) 78%, rgba(0,19,33,0.55) 100%),
        linear-gradient(180deg, rgba(0,19,33,0.30) 0%, rgba(0,19,33,0) 35%, rgba(0,19,33,0) 65%, rgba(0,19,33,0.30) 100%);
      z-index: 1;
    }
    .prompt__inner {
      position: relative;
      z-index: 2;
      max-width: 1440px;
      margin: 0 auto;
      padding: clamp(2.5rem, 5vh, 4rem) clamp(1.25rem, 3vw, 3rem);
    }

    /* CTA footer bar - full-width, pinned to bottom of section */
    .prompt__footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0.9rem clamp(1.25rem, 3vw, 3rem);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(0, 19, 33, 0.85);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      z-index: 3;
    }
    .prompt__note {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.85rem;
      line-height: 1.4;
      color: rgba(36, 172, 195, 0.85);
      font-style: italic;
      margin: 0;
      max-width: 60ch;
    }
    .prompt__cta {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--cyan);
      white-space: nowrap;
      transition: color 0.2s, gap 0.2s;
      display: inline-flex;
      gap: 0.4rem;
      align-items: center;
    }
    .prompt__cta:hover { color: var(--white); gap: 0.6rem; }

    /* Wide viewports - lock the section to the asset's aspect ratio.
       Intro is vertically centred and given more presence to fill the left half. */
    @media (min-width: 1100px) {
      .prompt {
        aspect-ratio: 1656 / 932;
      }
      .prompt__inner {
        position: relative;
        height: 100%;
        max-width: none;
        padding: clamp(2rem, 5vh, 4rem) clamp(1.25rem, 3vw, 3rem);
        display: flex;
        align-items: center;
      }
      .prompt__intro {
        width: 36%;
        max-width: 480px;
      }
      .prompt__heading {
        font-size: clamp(2.2rem, 3.6vw, 3.4rem);
      }
      .prompt__body {
        font-size: 1rem;
        max-width: 440px;
      }
      .prompt__divider {
        width: 64px;
        height: 2px;
        margin-bottom: 1.75rem;
      }
    }

    /* Code panel is desktop-bg only - hidden by default, shown as a card on mobile */
    .prompt__screen--mobile { display: none; }

    /* Tablet and below - drop the bg image entirely, put everything in normal flow,
       and bring the code example back as its own card. */
    @media (max-width: 1099px) {
      .prompt {
        min-height: 0;
      }
      .prompt__bg { display: none; }
      .prompt__overlay { display: none; }

      .prompt__inner {
        position: relative;
        max-width: 720px;
        margin: 0 auto;
        min-height: 0;
        padding: clamp(2.5rem, 6vh, 4rem) clamp(1.5rem, 5vw, 2.5rem) 0;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }

      .prompt__intro { max-width: 540px; }
      .prompt__heading {
        font-size: clamp(1.9rem, 7vw, 2.8rem);
        line-height: 1.05;
      }
      .prompt__body {
        position: static;
        font-size: 0.95rem;
        max-width: 540px;
        margin: 0;
        padding: 0;
      }

      /* Show the code card on mobile */
      .prompt__screen--mobile {
        display: block;
        background: rgba(11, 46, 51, 0.55);
        border: 1px solid rgba(36, 172, 195, 0.18);
        border-radius: 12px;
        padding: 1.25rem 1.4rem;
        overflow-x: auto;
        max-width: 100%;
      }

      .prompt__footer {
        position: static;
        margin: 1rem -1.5rem 0;
        margin-left: calc(-1 * clamp(1.5rem, 5vw, 2.5rem));
        margin-right: calc(-1 * clamp(1.5rem, 5vw, 2.5rem));
      }
    }

    /* Phone - tighter card padding + code font shrink so it fits without horizontal scroll */
    @media (max-width: 560px) {
      .prompt__inner {
        padding: clamp(2rem, 5vh, 3rem) 1.25rem 0;
        gap: 1.25rem;
      }
      .prompt__heading { font-size: clamp(1.7rem, 8vw, 2.2rem); }
      .prompt__body { font-size: 0.92rem; }
      .prompt__divider { margin-bottom: 1.25rem; }
      .prompt__screen--mobile {
        padding: 1rem 1.1rem;
      }
      .prompt__screen-title { font-size: 1.1rem; }
      .prompt__code { font-size: 0.66rem; }
      .prompt__code .ln { font-size: 0.62rem; width: 1.7em; }
      .prompt__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.85rem 1.25rem;
        margin-left: -1.25rem;
        margin-right: -1.25rem;
      }
      .prompt__note { font-size: 0.78rem; }
    }

    .prompt__intro { max-width: 320px; }
    .prompt__eyebrow {
      display: inline-block;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.7rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 1.1rem;
    }
    .prompt__heading {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 500;
      font-size: clamp(1.6rem, 2.7vw, 2.5rem);
      line-height: 1.04;
      letter-spacing: -0.015em;
      color: var(--white);
      margin: 0 0 1.1rem 0;
    }
    .prompt__divider {
      width: 48px;
      height: 2px;
      background: var(--cyan);
      margin-bottom: 1.25rem;
    }
    .prompt__body {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.88rem;
      line-height: 1.6;
      color: var(--grey-blue);
      margin: 0 0 1.75rem 0;
    }

    .prompt__points {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    .prompt__points li {
      display: block;
    }
    .prompt__points h4 {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--white);
      margin: 0 0 0.3rem 0;
    }
    .prompt__points p {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.85rem;
      line-height: 1.55;
      color: var(--grey-blue);
      margin: 0;
    }

    /* Centre code sits directly on the screen already in the bg asset - no panel */
    .prompt__screen {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
    }
    .prompt__screen header {
      padding: clamp(1rem, 2.5%, 1.5rem) clamp(1rem, 3%, 1.75rem) 0.75rem;
    }
    .prompt__screen-eyebrow {
      display: inline-block;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.62rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 0.3rem;
    }
    .prompt__screen-title {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 600;
      font-size: clamp(1rem, 1.45vw, 1.4rem);
      color: var(--white);
      margin: 0 0 0.3rem 0;
      letter-spacing: -0.01em;
    }
    .prompt__screen-desc {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.76rem;
      color: var(--grey-blue);
      margin: 0 0 0.5rem 0;
      padding-bottom: 0.6rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .prompt__code {
      font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
      font-size: 0.7rem;
      line-height: 1.55;
      color: var(--ice);
      margin: 0;
      padding: 0 clamp(1rem, 3%, 1.75rem) clamp(1rem, 2.5%, 1.5rem);
      white-space: pre-wrap;
      word-break: break-word;
    }
    .prompt__code .ln {
      display: inline-block;
      width: 1.8em;
      color: rgba(184, 227, 233, 0.38);
      font-size: 0.66rem;
      user-select: none;
    }
    .prompt__code .kw {
      color: var(--cyan);
      font-weight: 600;
      letter-spacing: 0.05em;
    }
    .prompt__code .ft {
      display: block;
      margin-top: 0.75rem;
      padding-top: 0.75rem;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      color: var(--grey-blue);
      font-size: 0.78rem;
    }

    /* Right callouts */
    .prompt__callouts {
      display: flex;
      flex-direction: column;
      gap: 1.1rem;
      max-width: 280px;
    }
    .prompt__callouts article {
      padding-left: 0.9rem;
      border-left: 1px solid rgba(196, 165, 101, 0.5);
      transition: border-color 0.2s, transform 0.2s;
    }
    .prompt__callouts article:hover {
      border-left-color: var(--gold);
      transform: translateX(2px);
    }
    .prompt__callouts article:hover h4 { color: #d8c081; }
    .prompt__callouts h4 {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 0.92rem;
      color: var(--gold);
      margin: 0 0 0.3rem 0;
    }
    .prompt__callouts p {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.82rem;
      line-height: 1.5;
      color: var(--grey-blue);
      margin: 0;
    }

    /* ───── FAQ ───── */
    .faq {
      background: #F2EDE3;
      padding: clamp(4rem, 8vh, 6rem) clamp(1.25rem, 3vw, 3rem);
    }
    .faq__inner {
      max-width: 1080px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
      gap: clamp(2rem, 4vw, 4rem);
      align-items: start;
    }
    .faq__header { position: sticky; top: 2rem; }
    .faq__eyebrow {
      display: inline-block;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.75rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #1C3F5D;
      margin-bottom: 1.2rem;
    }
    .faq__heading {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 500;
      font-size: clamp(1.9rem, 3vw, 2.8rem);
      line-height: 1.08;
      letter-spacing: -0.015em;
      color: var(--navy);
      margin: 0 0 1rem 0;
    }
    .faq__lede {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.95rem;
      line-height: 1.6;
      color: #475762;
      max-width: 320px;
      margin: 0;
    }
    .faq__lede a { color: #1C3F5D; font-weight: 600; transition: color 0.2s; }
    .faq__lede a:hover { color: var(--navy); }

    .faq__list { display: flex; flex-direction: column; }
    .faq__item {
      border-top: 1px solid rgba(0, 19, 33, 0.10);
      padding: 1.1rem 0;
    }
    .faq__item:last-child { border-bottom: 1px solid rgba(0, 19, 33, 0.10); }
    .faq__item summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 0.25rem 0;
    }
    .faq__item summary::-webkit-details-marker { display: none; }
    .faq__item summary h3 {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 500;
      font-size: clamp(1.1rem, 1.4vw, 1.3rem);
      color: var(--navy);
      margin: 0;
      flex: 1;
      line-height: 1.3;
    }
    .faq__chevron {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid rgba(0, 19, 33, 0.18);
      display: grid;
      place-items: center;
      font-size: 1rem;
      font-weight: 300;
      color: var(--navy);
      transition: transform 0.25s ease, background-color 0.2s, border-color 0.2s;
    }
    .faq__item[open] .faq__chevron {
      transform: rotate(45deg);
      background: var(--navy);
      color: var(--white);
      border-color: var(--navy);
    }
    .faq__answer {
      padding: 0.85rem 0 0.25rem 0;
      max-width: 640px;
    }
    .faq__answer p {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.95rem;
      line-height: 1.65;
      color: #475762;
      margin: 0 0 0.75rem 0;
    }
    .faq__answer p:last-child { margin-bottom: 0; }
    .faq__answer a { color: #1C3F5D; font-weight: 600; }

    @media (max-width: 880px) {
      .faq__inner { grid-template-columns: 1fr; }
      .faq__header { position: static; }
    }

    /* ───── CONTACT ───── */
    .contact {
      position: relative;
      background-color: var(--navy);
      padding: clamp(4rem, 8vh, 6rem) clamp(1.25rem, 3vw, 3rem);
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .contact__inner {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
      gap: clamp(2rem, 4vw, 4rem);
    }
    .contact__intro { margin-bottom: 2.5rem; }
    .contact__eyebrow {
      display: inline-block;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.75rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 1.2rem;
    }
    .contact__heading {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 500;
      font-size: clamp(1.7rem, 2.6vw, 2.4rem);
      line-height: 1.08;
      letter-spacing: -0.015em;
      color: var(--white);
      margin: 0 0 0.75rem 0;
      max-width: 460px;
    }
    .contact__lede {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.95rem;
      line-height: 1.6;
      color: var(--grey-blue);
      max-width: 460px;
      margin: 0;
    }

    .contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
    .contact-form__row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.1rem;
    }
    .contact-form__field { display: flex; flex-direction: column; gap: 0.4rem; }
    .contact-form__field label {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ice);
    }
    .contact-form__field label .required { color: var(--cyan); font-weight: 400; }
    .contact-form__field input,
    .contact-form__field select,
    .contact-form__field textarea {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.95rem;
      color: var(--white);
      background: rgba(11, 46, 51, 0.55);
      border: 1px solid rgba(79, 124, 130, 0.4);
      border-radius: 8px;
      padding: 0.75rem 0.95rem;
      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    }
    .contact-form__field input::placeholder,
    .contact-form__field textarea::placeholder { color: rgba(184, 227, 233, 0.4); }
    .contact-form__field input:focus,
    .contact-form__field select:focus,
    .contact-form__field textarea:focus {
      outline: 0;
      border-color: var(--cyan);
      background: rgba(11, 46, 51, 0.85);
      box-shadow: 0 0 0 3px rgba(36, 172, 195, 0.15);
    }
    .contact-form__field textarea { resize: vertical; min-height: 130px; line-height: 1.55; }

    .contact-form__submit {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--navy);
      background: var(--gold);
      padding: 0.9rem 1.7rem;
      border: 0;
      border-radius: 999px;
      cursor: pointer;
      align-self: flex-start;
      box-shadow: 0 6px 18px rgba(196, 165, 101, 0.28);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .contact-form__submit:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(196, 165, 101, 0.42);
    }

    /* Aside with placeholder icons (Nadia will swap in real icons later) */
    .contact-aside { display: flex; flex-direction: column; gap: 1.5rem; }
    .contact-info {
      display: flex;
      align-items: flex-start;
      gap: 0.9rem;
      padding: 1rem 1.1rem;
      background: rgba(11, 46, 51, 0.45);
      border: 1px solid rgba(79, 124, 130, 0.3);
      border-radius: 12px;
    }
    .contact-info__icon {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      border: 1px dashed rgba(36, 172, 195, 0.5);
      background: rgba(36, 172, 195, 0.06);
      display: grid;
      place-items: center;
      font-size: 0.65rem;
      letter-spacing: 0.06em;
      color: rgba(36, 172, 195, 0.6);
      text-transform: uppercase;
    }
    .contact-info__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
    .contact-info__label {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--cyan);
    }
    .contact-info__value {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.95rem;
      color: var(--white);
      word-break: break-word;
    }
    .contact-info__value a { color: var(--white); transition: color 0.2s; }
    .contact-info__value a:hover { color: var(--cyan); }

    @media (max-width: 920px) {
      .contact__inner { grid-template-columns: 1fr; }
      .contact-form__row { grid-template-columns: 1fr; }
    }

    /* ───── SKIP TO CONTENT (a11y) ───── */
    .skip-link {
      position: absolute;
      left: 0.5rem;
      top: 0.5rem;
      background: var(--gold);
      color: var(--navy);
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 0.85rem;
      padding: 0.6rem 1rem;
      border-radius: 6px;
      transform: translateY(-200%);
      transition: transform 0.2s;
      z-index: 1000;
    }
    .skip-link:focus {
      transform: translateY(0);
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
    }

    /* ───── TRUST STRIP ───── */
    .trust {
      background: var(--navy);
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      padding: 1rem clamp(1.25rem, 3vw, 3rem);
    }
    .trust__inner {
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: clamp(1rem, 3vw, 2.5rem);
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(184, 227, 233, 0.75);
    }
    .trust__item {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    .trust__item::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--cyan);
      opacity: 0.7;
    }

    /* ───── NEWSLETTER ───── */
    .newsletter {
      background: var(--navy);
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding: clamp(3rem, 6vh, 4.5rem) clamp(1.25rem, 3vw, 3rem);
    }
    .newsletter__inner {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
    }
    .newsletter__eyebrow {
      display: inline-block;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 0.85rem;
    }
    .newsletter__heading {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 500;
      font-size: clamp(1.5rem, 2.4vw, 2.1rem);
      line-height: 1.1;
      color: var(--white);
      margin: 0 0 0.6rem 0;
    }
    .newsletter__lede {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.92rem;
      line-height: 1.55;
      color: var(--grey-blue);
      margin: 0 0 1.5rem 0;
    }
    .newsletter__form {
      display: flex;
      gap: 0.5rem;
      max-width: 480px;
      margin: 0 auto;
      flex-wrap: wrap;
    }
    .newsletter__form input[type="email"] {
      flex: 1;
      min-width: 220px;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.95rem;
      color: var(--white);
      background: rgba(184, 227, 233, 0.08);
      border: 1px solid rgba(184, 227, 233, 0.20);
      border-radius: 999px;
      padding: 0.75rem 1.1rem;
      transition: border-color 0.2s, background 0.2s;
    }
    .newsletter__form input[type="email"]::placeholder { color: rgba(184, 227, 233, 0.45); }
    .newsletter__form input[type="email"]:focus {
      outline: 0;
      border-color: var(--cyan);
      background: rgba(184, 227, 233, 0.12);
    }
    .newsletter__form button {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--white);
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 999px;
      padding: 0.75rem 1.4rem;
      cursor: pointer;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.10) inset;
      white-space: nowrap;
    }
    .newsletter__form button:hover {
      background: rgba(255, 255, 255, 0.13);
      border-color: rgba(255, 255, 255, 0.4);
      transform: translateY(-1px);
    }
    .newsletter__terms {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.72rem;
      line-height: 1.6;
      color: rgba(147, 177, 181, 0.65);
      max-width: 460px;
      margin: 1rem auto 0;
    }

    /* ───── ACCESSIBILITY WIDGET (A-a11y-02) ───── */
    .a11y {
      position: fixed;
      bottom: clamp(1rem, 2vh, 1.5rem);
      left: clamp(1rem, 2vw, 1.5rem);
      z-index: 999;
      font-family: 'Garet', 'Poppins', sans-serif;
    }
    .a11y__toggle {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(0, 19, 33, 0.85);
      color: var(--white);
      border: 1px solid rgba(184, 227, 233, 0.30);
      font-weight: 700;
      font-size: 1rem;
      cursor: pointer;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
      transition: transform 0.2s, border-color 0.2s, background 0.2s;
    }
    .a11y__toggle:hover {
      transform: translateY(-1px);
      border-color: var(--cyan);
      background: rgba(0, 19, 33, 0.95);
    }
    .a11y__toggle:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 3px;
    }

    .a11y__panel {
      position: absolute;
      bottom: 60px;
      left: 0;
      width: 260px;
      background: rgba(0, 19, 33, 0.95);
      border: 1px solid rgba(184, 227, 233, 0.22);
      border-radius: 12px;
      padding: 1rem 1.1rem;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity 0.2s, transform 0.2s;
    }
    .a11y__panel.is-open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .a11y__title {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--cyan);
      margin: 0 0 0.85rem 0;
    }
    .a11y__row { margin-bottom: 0.85rem; }
    .a11y__row:last-child { margin-bottom: 0; }
    .a11y__label {
      display: block;
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--ice);
      margin-bottom: 0.45rem;
    }
    .a11y__buttons {
      display: flex;
      gap: 0.4rem;
    }
    .a11y__btn {
      flex: 1;
      background: rgba(184, 227, 233, 0.08);
      color: var(--ice);
      border: 1px solid rgba(184, 227, 233, 0.18);
      border-radius: 8px;
      padding: 0.45rem 0.5rem;
      font-family: inherit;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .a11y__btn:hover {
      background: rgba(184, 227, 233, 0.16);
      border-color: rgba(184, 227, 233, 0.4);
    }
    .a11y__btn.is-active {
      background: var(--cyan);
      color: var(--navy);
      border-color: var(--cyan);
    }
    .a11y__toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      padding: 0.4rem 0;
    }
    .a11y__toggle-row .a11y__label { margin: 0; }
    .a11y__switch {
      width: 36px;
      height: 20px;
      appearance: none;
      -webkit-appearance: none;
      background: rgba(184, 227, 233, 0.16);
      border: 1px solid rgba(184, 227, 233, 0.3);
      border-radius: 999px;
      position: relative;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }
    .a11y__switch::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--ice);
      transition: transform 0.2s;
    }
    .a11y__switch:checked {
      background: var(--cyan);
      border-color: var(--cyan);
    }
    .a11y__switch:checked::after {
      transform: translateX(16px);
      background: var(--navy);
    }

    /* User preferences applied to html element */
    html.a11y-text-115 { font-size: 18.4px; }
    html.a11y-text-130 { font-size: 20.8px; }
    html.a11y-no-motion *,
    html.a11y-no-motion *::before,
    html.a11y-no-motion *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
    html.a11y-high-contrast .hero__bg,
    html.a11y-high-contrast .hero::after,
    html.a11y-high-contrast .why__bg,
    html.a11y-high-contrast .audience__bg,
    html.a11y-high-contrast .audience__overlay,
    html.a11y-high-contrast .custom__bg,
    html.a11y-high-contrast .prompt__bg,
    html.a11y-high-contrast .why__overlay,
    html.a11y-high-contrast .modules,
    html.a11y-high-contrast .whynow__bg { background-image: none !important; opacity: 1 !important; }
    html.a11y-high-contrast .ticker { background-color: #FFFFFF !important; }
    html.a11y-high-contrast .ticker * { color: #000000 !important; border-color: #000000 !important; }
    html.a11y-high-contrast .hero,
    html.a11y-high-contrast .modules,
    html.a11y-high-contrast .audience,
    html.a11y-high-contrast .prompt,
    html.a11y-high-contrast .whynow,
    html.a11y-high-contrast .newsletter,
    html.a11y-high-contrast .footer { background-color: #000000 !important; }
    html.a11y-high-contrast .why,
    html.a11y-high-contrast .custom,
    html.a11y-high-contrast .faq,
    html.a11y-high-contrast .trust,
    html.a11y-high-contrast .why *,
    html.a11y-high-contrast .custom *,
    html.a11y-high-contrast .faq *,
    html.a11y-high-contrast .trust *,
    html.a11y-high-contrast .hero *,
    html.a11y-high-contrast .modules *,
    html.a11y-high-contrast .audience *,
    html.a11y-high-contrast .prompt *,
    html.a11y-high-contrast .whynow *,
    html.a11y-high-contrast .newsletter *,
    html.a11y-high-contrast .footer * { color: #FFFFFF !important; border-color: #FFFFFF !important; }
    html.a11y-high-contrast a { text-decoration: underline !important; }

    /* ───── COOKIE BANNER ───── */
    .cookie {
      position: fixed;
      bottom: clamp(0.75rem, 2vh, 1.25rem);
      left: clamp(0.75rem, 2vw, 1.5rem);
      right: clamp(0.75rem, 2vw, 1.5rem);
      max-width: 720px;
      margin: 0 auto;
      z-index: 1000;
      background: rgba(0, 19, 33, 0.95);
      border: 1px solid rgba(184, 227, 233, 0.22);
      border-radius: 12px;
      padding: 1rem 1.25rem;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      display: flex;
      gap: 1rem;
      align-items: center;
      flex-wrap: wrap;
      transform: translateY(150%);
      opacity: 0;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
    }
    .cookie.is-visible {
      transform: translateY(0);
      opacity: 1;
    }
    .cookie__text {
      flex: 1;
      min-width: 220px;
      font-family: 'Garet', 'Poppins', sans-serif;
      font-size: 0.85rem;
      line-height: 1.55;
      color: var(--ice);
      margin: 0;
    }
    .cookie__text a {
      color: var(--cyan);
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color 0.2s;
    }
    .cookie__text a:hover { color: var(--white); }
    .cookie__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
    .cookie__btn {
      font-family: 'Garet', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 0.82rem;
      padding: 0.55rem 1.1rem;
      border-radius: 999px;
      cursor: pointer;
      border: 1px solid transparent;
      transition: transform 0.2s, background 0.2s, color 0.2s;
    }
    .cookie__btn--accept {
      background: var(--gold);
      color: var(--navy);
    }
    .cookie__btn--accept:hover { transform: translateY(-1px); }
    .cookie__btn--decline {
      background: transparent;
      color: var(--ice);
      border-color: rgba(184, 227, 233, 0.3);
    }
    .cookie__btn--decline:hover {
      background: rgba(184, 227, 233, 0.08);
      color: var(--white);
    }

    /* ───── FOOTER (compact horizontal) ───── */
    .footer {
      background: #000B14;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
      color: var(--grey-blue);
      font-family: 'Garet', 'Poppins', sans-serif;
    }
    .footer__inner {
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem 1rem;
      font-size: 0.78rem;
      line-height: 1.6;
    }
    .footer__brand {
      font-size: 0.85rem;
      color: var(--white);
      letter-spacing: 0.02em;
      white-space: nowrap;
      margin-right: 0.5rem;
    }
    .footer__brand strong { font-weight: 700; letter-spacing: 0.04em; }
    .footer__brand span { font-weight: 400; margin-left: 0.3rem; opacity: 0.92; }
    .footer__inner a {
      color: var(--ice);
      transition: color 0.2s;
      white-space: nowrap;
    }
    .footer__inner a:hover { color: var(--cyan); }
    .footer__inner .verify { color: #24ACC3; }
    .footer__inner .verify:hover { color: var(--white); }
    .footer__sep {
      color: rgba(184, 227, 233, 0.25);
      margin: 0 0.15rem;
      user-select: none;
    }
    .footer__bottom {
      max-width: 1280px;
      margin: 0.85rem auto 0;
      padding-top: 0.85rem;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      text-align: center;
      font-size: 0.7rem;
      color: rgba(147, 177, 181, 0.6);
    }

    /* ───── SCROLL REVEAL (only when JS has set .js-motion on <html>) ───── */
    .js-motion [data-reveal] {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .js-motion [data-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* Stagger module rows */
    .js-motion .module:nth-of-type(1) { transition-delay: 0s; }
    .js-motion .module:nth-of-type(2) { transition-delay: 0.06s; }
    .js-motion .module:nth-of-type(3) { transition-delay: 0.12s; }
    .js-motion .module:nth-of-type(4) { transition-delay: 0.18s; }
    .js-motion .module:nth-of-type(5) { transition-delay: 0.24s; }
    .js-motion .module:nth-of-type(6) { transition-delay: 0.30s; }
    .js-motion .module:nth-of-type(7) { transition-delay: 0.36s; }
    /* Intro stack */
    .js-motion .modules__heading  { transition-delay: 0s; }
    .js-motion .modules__divider  { transition-delay: 0.12s; }
    .js-motion .modules__lede     { transition-delay: 0.22s; }
    /* Why section */
    .js-motion .why__eyebrow      { transition-delay: 0s; }
    .js-motion .why__heading      { transition-delay: 0.10s; }
    .js-motion .prop:nth-of-type(1) { transition-delay: 0.22s; }
    .js-motion .prop:nth-of-type(2) { transition-delay: 0.30s; }
    .js-motion .prop:nth-of-type(3) { transition-delay: 0.38s; }
    .js-motion .prop:nth-of-type(4) { transition-delay: 0.46s; }
    /* Why now */
    .js-motion .whynow__eyebrow                 { transition-delay: 0s; }
    .js-motion .whynow__heading                 { transition-delay: 0.10s; }
    .js-motion .whynow__body:nth-of-type(1)     { transition-delay: 0.20s; }
    .js-motion .whynow__body:nth-of-type(2)     { transition-delay: 0.26s; }
    .js-motion .whynow__body:nth-of-type(3)     { transition-delay: 0.32s; }
    .js-motion .whynow__body:nth-of-type(4)     { transition-delay: 0.38s; }
    .js-motion .whynow__tags                    { transition-delay: 0.46s; }
    .js-motion .whynow .custom__btn             { transition-delay: 0.54s; }

    /* Audience + pricing */
    .js-motion .audience__eyebrow { transition-delay: 0s; }
    .js-motion .audience__heading { transition-delay: 0.10s; }
    .js-motion .role:nth-of-type(1) { transition-delay: 0.22s; }
    .js-motion .role:nth-of-type(2) { transition-delay: 0.30s; }
    .js-motion .role:nth-of-type(3) { transition-delay: 0.38s; }
    .js-motion .audience__body:nth-of-type(1) { transition-delay: 0.18s; }
    .js-motion .audience__body:nth-of-type(2) { transition-delay: 0.26s; }
    .js-motion .audience__cta { transition-delay: 0.30s; }
    /* Custom packs */
    .js-motion .custom__eyebrow { transition-delay: 0s; }
    .js-motion .custom__heading { transition-delay: 0.10s; }
    .js-motion .custom__divider { transition-delay: 0.18s; }
    .js-motion .custom__body    { transition-delay: 0.24s; }
    .js-motion .custom__cta     { transition-delay: 0.32s; }
    .js-motion .pack-card:nth-of-type(1) { transition-delay: 0.10s; }
    .js-motion .pack-card:nth-of-type(2) { transition-delay: 0.15s; }
    .js-motion .pack-card:nth-of-type(3) { transition-delay: 0.20s; }
    .js-motion .pack-card:nth-of-type(4) { transition-delay: 0.25s; }
    .js-motion .pack-card:nth-of-type(5) { transition-delay: 0.30s; }
    .js-motion .pack-card:nth-of-type(6) { transition-delay: 0.35s; }
    .js-motion .pack-card:nth-of-type(7) { transition-delay: 0.40s; }
    .js-motion .pack-card:nth-of-type(8) { transition-delay: 0.45s; }
    .js-motion .pack-card:nth-of-type(9) { transition-delay: 0.50s; }
    .js-motion .pack-card:nth-of-type(10) { transition-delay: 0.55s; }
    /* Prompt example */
    .js-motion .prompt__eyebrow { transition-delay: 0s; }
    .js-motion .prompt__heading { transition-delay: 0.10s; }
    .js-motion .prompt__divider { transition-delay: 0.18s; }
    .js-motion .prompt__body    { transition-delay: 0.22s; }
    .js-motion .prompt__points li:nth-of-type(1) { transition-delay: 0.28s; }
    .js-motion .prompt__points li:nth-of-type(2) { transition-delay: 0.34s; }
    .js-motion .prompt__points li:nth-of-type(3) { transition-delay: 0.40s; }
    .js-motion .prompt__points li:nth-of-type(4) { transition-delay: 0.46s; }
    .js-motion .prompt__points li:nth-of-type(5) { transition-delay: 0.52s; }
    .js-motion .prompt__screen { transition-delay: 0.15s; }
    .js-motion .prompt__callouts article:nth-of-type(1) { transition-delay: 0.28s; }
    .js-motion .prompt__callouts article:nth-of-type(2) { transition-delay: 0.34s; }
    .js-motion .prompt__callouts article:nth-of-type(3) { transition-delay: 0.40s; }
    .js-motion .prompt__callouts article:nth-of-type(4) { transition-delay: 0.46s; }
    .js-motion .prompt__callouts article:nth-of-type(5) { transition-delay: 0.52s; }

    @media (max-width: 1100px) {
      .module__quote { display: none; }
      .module { grid-template-columns: clamp(50px, 7%, 80px) 1fr; }
    }

    @media (max-width: 920px) {
      .modules {
        background-image: none;
      }
      .modules__inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
      }
      .modules__intro { padding-right: 0; }
      .module { padding: 1.1rem 0; }
      /* Reset the desktop negative margin so the numbers are fully visible on mobile */
      .modules__list {
        margin-left: 0;
        padding-left: 0;
      }
      /* Tighten the number column so it sits inside the viewport */
      .module {
        grid-template-columns: clamp(36px, 12vw, 56px) 1fr;
      }
      .module__num {
        font-size: clamp(1.4rem, 5vw, 1.9rem);
      }
    }