/* ==========  MAZZARD — self-hosted brand font  ========== */
  @font-face {
    font-family: "Mazzard";
    src: url("fonts/MazzardH-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Mazzard";
    src: url("fonts/MazzardH-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Mazzard";
    src: url("fonts/MazzardH-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }



  /* ==========  TOKENS  ========== */
  :root {
    --deep-blue: #011848;
    --cyan: #00bc9c;
    --cyan-hover: #00a98c;
    --mint: #6fe7c3;
    --grey-blue: #c5d5df;
    --white: #ffffff;

    --text-on-dark: #ffffff;
    --text-on-dark-muted: rgba(255, 255, 255, 0.72);
    --border-on-dark: rgba(197, 213, 223, 0.18);

    --text-on-light: #011848;
    --text-on-light-muted: rgba(1, 24, 72, 0.62);
    --text-on-light-soft: rgba(1, 24, 72, 0.45);
    --border-on-light: rgba(1, 24, 72, 0.10);
    --surface-soft: #f6f9fb;

    --container: 1280px;
    --side-pad: clamp(24px, 5vw, 96px);

    --radius-btn: 8px;

    --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

    --font-sans: "Mazzard", system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--white);
    color: var(--deep-blue);
  }

  /* ==========  HERO SECTION  ========== */
  .hero {
    position: relative;
    color: var(--text-on-dark);
  }

  /* Cyan glow at the top — radial blur creating brand atmosphere.
     Sits below the header CTA, doesn't dominate the centre. */
  .hero__glow {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    top: -80px;
    right: -120px;
    width: 770px;
    height: auto;
    opacity: 0.85;
  }
  .hero__glow svg {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Brand mark — large decorative SVG on the right, partially clipped
     off-screen. CSS mask gently fades the LEFT side of the mark so it
     dissolves into the background without darkening the whole hero.
     
     Position is anchored to the mark's own width (not parent's) via
     translateX, so the visible portion stays consistent across all
     viewport sizes — 60% of the mark is always visible, 40% clipped right. */
  .hero__mark {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    /* Centred relative to hero content (not whole hero) — pushed down
       below the 88px header so the mark doesn't fight with the nav CTA */
    top: calc(50% + 44px);
    right: 0;
    transform: translate(40%, -50%);
    width: 55%;
    max-width: 700px;
    aspect-ratio: 941 / 988;
    /* Soft fade on the left edge — gently dissolves the mark behind the
       headline without creating a visible "cut" */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.20) 15%,
      rgba(0, 0, 0, 0.65) 35%,
      black 55%,
      black 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.20) 15%,
      rgba(0, 0, 0, 0.65) 35%,
      black 55%,
      black 100%
    );
  }
  .hero__mark svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Tablet — slightly smaller mark, same anchoring logic */
  @media (max-width: 1100px) {
    .hero__mark {
      width: 60%;
    }
    .hero__glow {
      width: 620px;
      top: -60px;
    }
  }

  /* Mobile — mark stays vertically centred just like desktop, only smaller.
     Same translateX(40%) keeps the visible-vs-clipped ratio consistent. */
  @media (max-width: 720px) {
    .hero__content { max-width: 100%; }
    .hero__mark {
      top: calc(50% + 30px);
      width: 95%;
      max-width: 520px;
      opacity: 0.75;
    }
    .hero__glow {
      width: 500px;
      top: -100px;
      right: -160px;
      opacity: 0.65;
    }
  }

  /* Hero shell — wrapper for Hero + Trust. Shares the dark background
     and the cursor spotlight, so they read as one continuous zone. */
  .hero-shell {
    --mx: 50%;
    --my: 50%;
    position: relative;
    background: var(--deep-blue);
    overflow: hidden;
    isolation: isolate;
  }

  /* Cursor spotlight — accent gradient that follows the pointer
     across the entire dark zone (Hero + Trust). */
  .hero-shell__spotlight {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
      520px circle at var(--mx) var(--my),
      rgba(0, 188, 156, 0.16),
      rgba(111, 231, 195, 0.06) 30%,
      transparent 55%
    );
    opacity: 0;
    transition: opacity 320ms var(--ease);
  }
  .hero-shell:hover .hero-shell__spotlight {
    opacity: 1;
  }
  /* Disable on touch / no-hover devices */
  @media (hover: none), (prefers-reduced-motion: reduce) {
    .hero-shell__spotlight { display: none; }
  }

  /* Subtle technical grid — pure CSS, no images */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(197, 213, 223, 0.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(197, 213, 223, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 30% 50%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 30% 50%, black 30%, transparent 75%);
    z-index: 0;
    pointer-events: none;
  }

  /* Glow accent in the brand gradient direction (Deep Blue → Mint) */
  .hero::after {
    content: "";
    position: absolute;
    top: -25%;
    right: -15%;
    width: 70%;
    height: 110%;
    background:
      radial-gradient(closest-side, rgba(111, 231, 195, 0.22), rgba(0, 188, 156, 0.10) 40%, transparent 70%);
    filter: blur(20px);
    z-index: 0;
    pointer-events: none;
  }

  .hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }



  /* ==========  HERO CONTENT  ========== */
  .hero__content {
    padding-top: clamp(80px, 14vh, 120px);
    padding-bottom: clamp(64px, 12vh, 96px);
    max-width: min(75%, 820px);
  }

  .hero__title {
    font-size: clamp(40px, 6.4vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 700;
    margin: 0 0 24px;
    color: var(--text-on-dark);
    text-wrap: balance;
  }
  .hero__title em {
    font-style: normal;
    background: linear-gradient(110deg, var(--cyan) 0%, var(--mint) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero__sub {
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.55;
    font-weight: 400;
    color: var(--text-on-dark-muted);
    max-width: 640px;
    margin: 0 0 32px;
  }

  .hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--radius-btn);
    cursor: pointer;
    text-decoration: none;
    transition: background 180ms var(--ease), transform 180ms var(--ease), box-shadow 220ms var(--ease);
    border: 1px solid transparent;
  }
  .btn--primary {
    background: var(--cyan);
    color: var(--deep-blue);
  }
  .btn--primary:hover {
    background: var(--cyan-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(0, 188, 156, 0.28);
  }
  .btn .arrow { transition: transform 200ms var(--ease); }
  .btn:hover .arrow { transform: translateX(3px); }

  /* ==========  TRUST BAR (Block 2)  ========== */
  /* Continues the dark Hero zone — same background via .hero-shell wrapper */
  .trust {
    color: var(--text-on-dark);
    padding: 0 0 clamp(72px, 10vh, 96px);
  }

  .trust__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }

  /* Outer grid: 2 columns × 2 rows (labels row + logos row).
     Each .trust__col uses subgrid to align labels/logos across columns. */
  .trust__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: clamp(40px, 5vw, 88px);
    row-gap: 36px;
    padding-top: clamp(56px, 8vh, 80px);
  }

  .trust__col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }

  .trust__col--full{grid-column:1 / -1}
  .trust__col--full .trust__logos {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  @media (max-width: 1100px) {
    .trust__col--full .trust__logos {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (max-width: 720px) {
    .trust__col--full .trust__logos {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .trust__col-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
    align-self: start;
  }

  /* Logos grid: 4 in a row on desktop, 2×2 on mid-range / mobile.
     Prevents orphan logos from flex-wrap. */
  .trust__logos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 22px;
    align-items: center;
    justify-items: center;
    align-self: start;
  }

  /* Below 1100px (vertical tablet, narrow desktop): stack the two label
     groups vertically. Each label has its own 4-logos-in-a-row grid below. */
  @media (max-width: 1100px) {
    .trust__grid {
      display: flex;
      flex-direction: column;
      gap: 48px;
    }
    .trust__col {
      display: block;
    }
    .trust__col-label {
      margin-bottom: 36px;
    }
    .trust__logos {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Per-logo height tweaks for narrower viewports.
       On desktop only the size modifier classes (--xs/--sm/--md/--lg) apply;
       these per-logo rules kick in below 1100px. */
    .trust__logo[data-logo="mailtrap"] img      { height: 50px; }
    .trust__logo[data-logo="quinncia"] img      { height: 40px; }
    .trust__logo[data-logo="mint"] img          { height: 40px; }
    .trust__logo[data-logo="infologistics"] img { height: 28px; }
    .trust__logo[data-logo="danone"] img        { height: 40px; }
    /* carlsberg & tp-link: revert to default 44px (override --sm) */
    .trust__logo[data-logo="carlsberg"] img     { height: 44px; }
    .trust__logo[data-logo="tp-link"] img       { height: 44px; }
    /* zeppelin: no override — falls back to --md (36px) */
  }

  /* Mid breakpoint — Quinncia needs to come down a notch before mobile */
  @media (max-width: 880px) {
    .trust__logo[data-logo="quinncia"] img  { height: 34px; }
  }

  .trust__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 0;
  }

  .trust__logo img,
  .trust__logo svg {
    display: block;
    height: 44px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    opacity: 0.7;
    transition: opacity 200ms var(--ease);
  }
  .trust__logo:hover img,
  .trust__logo:hover svg {
    opacity: 1;
  }

  /* Individual size adjustments — applied via modifier classes on the <li>.
     Use these to balance logos that are visually too dominant or too small.
     Override default 44px height per logo. */
  .trust__logo--xs img,
  .trust__logo--xs svg { height: 26px; }

  .trust__logo--sm img,
  .trust__logo--sm svg { height: 34px; }

  .trust__logo--md img,
  .trust__logo--md svg { height: 36px; }

  .trust__logo--lg img,
  .trust__logo--lg svg { height: 50px; }

  .trust__logo--xl img,
  .trust__logo--xl svg { height: 56px; }

  /* Placeholder visual on dark background (no src yet) */
  .trust__logo img:not([src]),
  .trust__logo img[src=""] {
    width: 124px;
    height: 36px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    opacity: 1;
  }

  /* Mobile: stack columns + drop logos to 2×2 (4 in a row too cramped). */
  @media (max-width: 720px) {
    .trust__grid {
      gap: 44px;
    }
    .trust__logos {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px 24px;
    }
    .trust__logo { height: 38px; }
    .trust__logo img,
    .trust__logo svg { height: 38px; }

    /* Mobile per-logo overrides */
    .trust__logo[data-logo="mailtrap"] img      { height: 50px; }
    .trust__logo[data-logo="quinncia"] img      { height: 40px; }
    .trust__logo[data-logo="mint"] img          { height: 40px; }
    .trust__logo[data-logo="infologistics"] img { height: 30px; }
    .trust__logo[data-logo="danone"] img        { height: 34px; }
    .trust__logo[data-logo="carlsberg"] img     { height: 44px; }
    .trust__logo[data-logo="tp-link"] img       { height: 44px; }
    .trust__logo[data-logo="zeppelin"] img      { height: 32px; }
  }

  /* ==========  PROBLEMS BENTO (Block 3)  ========== */
  .problems {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--white);
    color: var(--text-on-light);
    padding: clamp(80px, 12vh, 128px) 0 clamp(64px, 10vh, 96px);
  }

  /* Subtle ambient glow — cyan from top-left */
  .problems::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 55% 50% at 18% 18%, rgba(0, 188, 156, 0.10), transparent 65%),
      radial-gradient(ellipse 40% 40% at 88% 85%, rgba(111, 231, 195, 0.06), transparent 70%);
    pointer-events: none;
  }

  .problems__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }

  .problems__heading {
    font-size: clamp(32px, 4.6vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(32px, 5vh, 56px);
    color: var(--text-on-light);
    text-wrap: balance;
  }

  .problems__grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 20px;
  }

  .card {
    background: rgba(197, 213, 223, 0.22);
    border: 1px solid rgba(1, 24, 72, 0.06);
    border-radius: 14px;
    padding: 28px;
    transition: transform 220ms var(--ease), box-shadow 260ms var(--ease), border-color 220ms var(--ease);
  }
  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(1, 24, 72, 0.08);
    border-color: rgba(1, 24, 72, 0.10);
  }

  .card__title {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-on-light);
    margin: 0 0 14px;
    text-wrap: balance;
  }
  .card__body {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(1, 24, 72, 0.72);
    margin: 0;
  }

  /* Eyebrow tag above title — small uppercase categoriser.
     To remove site-wide: add `.card__eyebrow { display: none; }` here
     or just remove the <span class="card__eyebrow"> from the markup. */
  .card__eyebrow {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(1, 24, 72, 0.45);
    margin: 0 0 14px;
  }

  /* Featured cards — top-row priority. Subtle cyan/blue gradient tint
     so the three most-important problems read as a featured row. */
  .card--featured {
    background: linear-gradient(135deg,
      rgba(0, 188, 156, 0.06) 0%,
      rgba(197, 213, 223, 0.30) 100%);
    border-color: rgba(1, 24, 72, 0.08);
  }
  .card--featured .card__eyebrow {
    color: rgb(0, 152, 124);
  }

  /* Large card — left, spans 2 rows. Sizing only. */
  .card--large {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
  }
  .card--large .card__title {
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.2;
    margin-bottom: 18px;
  }
  .card--large .card__body {
    font-size: 17px;
    line-height: 1.6;
  }

  /* Large + featured — section anchor, richer gradient */
  .card--large.card--featured {
    background: linear-gradient(135deg,
      rgba(0, 188, 156, 0.12) 0%,
      rgba(111, 231, 195, 0.05) 30%,
      rgba(197, 213, 223, 0.38) 100%);
  }

  /* Wide card — bottom, full width */
  .card--wide {
    grid-column: 1 / -1;
    padding: 28px 36px;
  }
  .card--wide .card__title {
    font-size: 22px;
  }

  /* Mobile: single column stack */
  @media (max-width: 880px) {
    .problems__grid {
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .card--large,
    .card--wide {
      grid-column: auto;
      grid-row: auto;
      padding: 24px;
    }
    .card--large .card__title {
      font-size: 22px;
    }
    .card--large .card__body,
    .card__body {
      font-size: 15.5px;
    }
  }

  /* ==========  STAKES (Block 4)  ========== */
  .stakes {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--white);
    color: var(--text-on-light);
    padding: clamp(72px, 11vh, 96px) 0;
  }

  /* Subtle cyan glow centered behind stats */
  .stakes::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 65% 38% at 50% 55%, rgba(0, 188, 156, 0.09), transparent 65%);
    pointer-events: none;
  }

  .stakes__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }

  .stakes__heading {
    font-size: clamp(32px, 4.6vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(40px, 7vh, 64px);
    color: var(--text-on-light);
    text-wrap: balance;
  }

  .stakes__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .stat__number {
    font-size: clamp(52px, 7.6vw, 100px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: 0;
    background: linear-gradient(110deg, var(--cyan) 0%, var(--mint) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-wrap: balance;
  }

  /* Counter span — tabular numerals so digits don't jiggle while counting */
  .stat__count {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  /* Accent bar — reveals on scroll-into-view, brand cyan→mint gradient */
  .stat__bar {
    display: block;
    width: 56px;
    height: 2px;
    margin: 18px 0 22px;
    background: linear-gradient(to right, var(--cyan), var(--mint));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms cubic-bezier(0.2, 0.6, 0.2, 1) 200ms;
  }
  .stakes.is-revealed .stat__bar {
    transform: scaleX(1);
  }
  @media (prefers-reduced-motion: reduce) {
    .stat__bar {
      transform: scaleX(1);
      transition: none;
    }
  }

  .stat__body {
    font-size: 17px;
    line-height: 1.55;
    color: rgba(1, 24, 72, 0.78);
    margin: 0;
    max-width: 360px;
  }

  @media (max-width: 880px) {
    .stakes__grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .stat__number {
      font-size: clamp(48px, 14vw, 72px);
    }
    .stat__body {
      font-size: 16px;
      max-width: none;
    }
  }

  /* ==========  SOLUTION (Block 5: 5A + 5B)  ========== */
  .solution {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--white);
    color: var(--text-on-light);
    padding: clamp(80px, 12vh, 128px) 0;
  }

  /* Subtle ambient gradient — center, soft grey-blue, "polished" feel */
  .solution::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 60% 50% at 50% 60%, rgba(197, 213, 223, 0.32), transparent 70%);
    pointer-events: none;
  }

  .solution__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }

  .solution__sub + .solution__sub {
    margin-top: clamp(72px, 10vh, 112px);
  }

  /* scroll-margin so anchored scroll-into-view (slider nav) leaves breathing room */
  #what-manual-means {
    scroll-margin-top: 24px;
  }

  /* Final CTA / form anchor — leaves breathing room above the heading
     when CTAs throughout the page scroll the user to it. */
  #contact {
    scroll-margin-top: 24px;
  }

  .solution__heading {
    font-size: clamp(32px, 4.6vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    color: var(--text-on-light);
    text-wrap: balance;
  }

  /* Gradient accent inside heading — same treatment as Hero "B2B SaaS",
     but with deeper start color so it reads on a white background. */
  .solution__heading em {
    font-style: normal;
    font-weight: 800;
    background: linear-gradient(110deg, #007a64 0%, var(--cyan) 60%, var(--mint) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .solution__sub-text {
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 2;
    color: rgba(1, 24, 72, 0.72);
    max-width: 720px;
    margin: 0 0 clamp(40px, 5vh, 56px);
  }

  /* Inline highlight — for key phrases inside sub-text.
     `inline-block` makes the whole phrase wrap as a single unit.
     Tight `line-height: 1` overrides parent so the mark's own height
     doesn't grow with parent line-height (which would cause overlap). */
  .solution__sub-text mark {
    background: var(--cyan);
    color: var(--white);
    font-weight: 700;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 5px;
    display: inline-block;
    vertical-align: baseline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* ----- 5A: Approaches highlighted row ----- */
  .approaches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: clamp(48px, 6vh, 72px);
  }

  .approach {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--deep-blue);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 24px;
    box-shadow: 0 4px 16px rgba(1, 24, 72, 0.10);
    transition: transform 220ms var(--ease), box-shadow 260ms var(--ease), border-color 220ms var(--ease);
  }
  .approach:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(1, 24, 72, 0.22);
    border-color: rgba(255, 255, 255, 0.14);
  }

  /* Cyan/mint glow accent in top-right corner */
  .approach::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(0, 188, 156, 0.18), transparent 60%);
    pointer-events: none;
    z-index: 0;
  }
  .approach--grey::before {
    background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(111, 231, 195, 0.20), transparent 60%);
  }
  .approach > * {
    position: relative;
    z-index: 1;
  }

  .approach__icon {
    flex: none;
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
  }

  .approach__content {
    min-width: 0;
  }

  .approach__label {
    font-size: clamp(22px, 2.2vw, 26px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--cyan);
    margin: 0 0 8px;
  }
  .approach--grey .approach__label {
    color: var(--mint);
  }

  .approach__text {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.80);
    margin: 0;
  }

  @media (max-width: 720px) {
    .approaches { grid-template-columns: 1fr; }
    .approach { gap: 20px; padding: 24px; }
    .approach__icon { width: 48px; height: 48px; }
  }

  /* ----- 5A: Chip grids ----- */
  .chip-grids {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }

  .chip-column__heading {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--text-on-light);
    margin: 0 0 22px;
  }

  .chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Collapsible chips list — show ~4 rows + fade teaser of 5th row */
  .chips--collapsible {
    position: relative;
  }
  .chips--collapsed {
    max-height: 168px;
    overflow: hidden;
  }
  .chips--collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.85) 60%,
      var(--white) 100%);
    pointer-events: none;
  }

  /* "Show more" button — link-style with cyan underline */
  .chips__more {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(0, 188, 156, 0.40);
    padding: 4px 0 3px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: rgb(0, 152, 124);
    cursor: pointer;
    border-radius: 0;
    transition: color 180ms var(--ease), border-color 180ms var(--ease);
  }
  .chips__more:hover {
    color: var(--cyan);
    border-color: var(--cyan);
  }
  .chips__more .arrow {
    width: 12px;
    height: 12px;
    transition: transform 180ms var(--ease);
  }
  .chips__more:hover .arrow {
    transform: translateY(2px);
  }
  .chips__more[hidden] {
    display: none;
  }

  .chip {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    padding: 9px 15px;
    background: rgba(197, 213, 223, 0.32);
    color: rgba(1, 24, 72, 0.85);
    border: 1px solid rgba(1, 24, 72, 0.06);
    border-radius: 7px;
    white-space: nowrap;
    transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
  }
  .chip:hover {
    background: rgba(0, 188, 156, 0.12);
    border-color: rgba(0, 188, 156, 0.30);
    color: var(--text-on-light);
  }

  @media (max-width: 880px) {
    .chip-grids { grid-template-columns: 1fr; gap: 48px; }
  }

  /* ----- 5B: Slider (CSS scroll-snap, arrows via small JS) ----- */
  .slider {
    position: relative;
  }

  .slider__track {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    transition: height 360ms cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  .slider__track::-webkit-scrollbar { display: none; }

  .slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    padding: 8px clamp(8px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .slide__heading {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 24px;
    color: var(--text-on-light);
    text-align: center;
  }

  /* ----- 5B: Tiers container — cyan-bordered "example" wrapper ----- */
  .tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 20px;
    border: 1px solid rgba(0, 188, 156, 0.32);
    border-radius: 16px;
    background: linear-gradient(135deg,
      rgba(0, 188, 156, 0.04) 0%,
      rgba(255, 255, 255, 0.5) 100%);
  }

  /* ----- 5B: Individual tier card — dark, progressive accent ----- */
  .tier {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 22px 24px;
    background: var(--deep-blue);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(1, 24, 72, 0.10);
  }

  /* Tier 3 (XRAY) — strongest cyan glow, signals "the deep tier" */
  .tier[data-tier="3"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(0, 188, 156, 0.22), rgba(111, 231, 195, 0.05) 35%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .tier > * {
    position: relative;
    z-index: 1;
  }

  .tier__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .tier__num {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.50);
  }
  .tier[data-tier="3"] .tier__num {
    color: var(--cyan);
  }
  .tier__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-on-dark);
    margin: 0;
  }

  .tier__screenshot {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 8px;
  }
  .tier__screenshot[src]:not([src=""]) {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-style: solid;
  }

  .tier__source {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .tier__source-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.40);
  }
  .tier[data-tier="3"] .tier__source-label {
    color: rgba(0, 188, 156, 0.75);
  }
  .tier__source-target {
    font-size: 13.5px;
    font-style: italic;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
  }

  .tier__text {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
  }

  /* ----- 5B: Solo-tier variant (slide 3 — single full-width dark panel
     inside the cyan-bordered .tiers wrapper, mirrors slides 1-2 layout) ----- */
  .tiers--solo {
    grid-template-columns: 1fr;
  }
  .tier--full {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px);
    gap: 18px;
    /* min-height set by JS on desktop to match slides 1-2 height;
       on mobile it stays 0 so the slide can shrink to its content */
  }
  .tier--full::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 65% 70% at 92% 12%, rgba(0, 188, 156, 0.22), rgba(111, 231, 195, 0.05) 35%, transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  .tier--full .tier__title {
    color: var(--cyan);
    font-size: clamp(20px, 2.2vw, 26px);
  }
  /* Inner cyan-bordered callout — defines the "message area" inside the
     large dark panel so the text doesn't read as floating in empty space.
     Echoes the outer .tiers cyan frame but at higher opacity, since it sits
     on dark blue where the same 0.32 alpha would be hard to see. */
  .tier__callout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 680px;
    padding: clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 40px);
    border: 1px solid rgba(0, 188, 156, 0.45);
    border-radius: 12px;
  }
  .tier__body {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
  }
  .tier__body p {
    margin: 0 0 14px;
  }
  .tier__body p:last-child {
    margin: 0;
  }

  /* ----- 5B: Slider arrows (desktop only) ----- */
  .slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid rgba(1, 24, 72, 0.10);
    border-radius: 50%;
    color: var(--deep-blue);
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 8px 24px rgba(1, 24, 72, 0.12);
    transition: border-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease), box-shadow 220ms var(--ease);
  }
  .slider__arrow:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 10px 28px rgba(0, 188, 156, 0.20);
  }
  .slider__arrow svg {
    width: 18px;
    height: 18px;
  }
  .slider__arrow--prev { left: -32px; }
  .slider__arrow--next { right: -32px; }

  /* ----- 5B: Slider nav (dots) ----- */
  .slider__nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
  }
  .slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(1, 24, 72, 0.20);
    text-indent: -9999px;
    overflow: hidden;
    transition: background 200ms var(--ease), transform 200ms var(--ease);
  }
  .slider__dot:hover {
    background: rgba(1, 24, 72, 0.45);
    transform: scale(1.15);
  }

  @media (max-width: 880px) {
    .tiers {
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 14px;
    }
    .tier { padding: 20px; }
    .slider__arrow { display: none; }
    /* On mobile the slide shrinks to its natural content height, so the
       text doesn't read as floating — the callout border becomes visual
       noise. Strip border + own padding; the surrounding .tier--full
       padding still gives the text breathing room. */
    .tier__callout {
      border: 0;
      padding: 0;
      max-width: none;
    }
  }

  @media (max-width: 720px) {
    .slide { padding: 8px; }
    .slide__heading { font-size: 20px; margin-bottom: 18px; }
  }

  /* ==========  MID-PAGE CTA (Block 6)  ========== */
  .mid-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--white);
    border-top: 1px solid rgba(1, 24, 72, 0.08);
    border-bottom: 1px solid rgba(1, 24, 72, 0.08);
    padding: clamp(56px, 9vh, 88px) 0;
    text-align: center;
  }

  /* Layered radial gradients — soft "mesh" feel without an image.
     3 overlapping ellipses in brand colours, low opacity, large blur via mask. */
  .mid-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 50% 60% at 18% 50%,  rgba(0, 188, 156, 0.10), transparent 65%),
      radial-gradient(ellipse 45% 55% at 82% 30%,  rgba(111, 231, 195, 0.10), transparent 65%),
      radial-gradient(ellipse 60% 70% at 50% 110%, rgba(197, 213, 223, 0.45), transparent 70%);
    pointer-events: none;
  }

  .mid-cta__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }

  /* Strong variant — dark Deep Blue, used between Testimonials and FAQ.
     Higher conversion intent: "ready to start?" tone vs Block 6 "want to learn more?" */
  .mid-cta--strong {
    background: var(--deep-blue);
    color: var(--text-on-dark);
    border: none;
    padding: clamp(72px, 11vh, 104px) 0;
  }
  .mid-cta--strong::before {
    background:
      radial-gradient(ellipse 50% 60% at 18% 30%,  rgba(0, 188, 156, 0.18), transparent 65%),
      radial-gradient(ellipse 45% 55% at 82% 70%,  rgba(111, 231, 195, 0.14), transparent 65%);
  }
  .mid-cta--strong .mid-cta__heading {
    color: var(--text-on-dark);
  }
  .mid-cta--strong .mid-cta__body {
    color: rgba(255, 255, 255, 0.72);
  }

  /* MID-PAGE CTA — original shared styles (used by both Block 6 and the strong variant before FAQ) */
  .mid-cta__heading {
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: var(--text-on-light);
    margin: 0 auto 28px;
    max-width: 760px;
    text-wrap: balance;
  }

  .mid-cta__body {
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.6;
    color: rgba(1, 24, 72, 0.72);
    max-width: 640px;
    margin: 0 auto 28px;
  }

  /* CTA row inside mid-cta — primary + secondary buttons centered */
  .mid-cta__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
  }

  /* Outline button — cyan border + cyan text + transparent fill */
  .btn--outline {
    background: transparent;
    color: var(--cyan);
    border: 1px solid var(--cyan);
  }
  .btn--outline:hover {
    background: rgba(0, 188, 156, 0.10);
    color: var(--cyan);
    border-color: var(--cyan);
    transform: translateY(-1px);
  }

  /* ==========  DELIVERABLES (Block 7)  ========== */
  .deliverables {
    background: var(--white);
    color: var(--text-on-light);
    padding: clamp(80px, 12vh, 128px) 0;
  }

  .deliverables__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }

  .deliverables__heading {
    font-size: clamp(32px, 4.6vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    color: var(--text-on-light);
    text-wrap: balance;
  }

  .deliverables__sub {
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.55;
    color: rgba(1, 24, 72, 0.72);
    max-width: 720px;
    margin: 0 0 clamp(40px, 5vh, 56px);
  }

  /* ----- Hero row (image + sample-CTA), spans full width ----- */
  .deliverables__hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
  }

  .hero-card {
    border-radius: 14px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    transition: transform 220ms var(--ease), box-shadow 260ms var(--ease);
  }

  /* Left — soft grey card with the documents/certificate visual.
     No padding so the image fills the card. Cyan glow from bottom-left
     reaches toward the centre to emphasise the visual. */
  .hero-card--image {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: rgba(197, 213, 223, 0.32);
    border: 1px solid rgba(1, 24, 72, 0.06);
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    min-height: 320px;
  }
  .hero-card--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 95% 100% at 0% 100%, rgba(0, 188, 156, 0.42), rgba(111, 231, 195, 0.16) 50%, transparent 85%);
    pointer-events: none;
    z-index: 0;
  }
  .hero-card--image img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
  }
  .hero-card--image img:not([src]),
  .hero-card--image img[src=""] {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: rgba(255, 255, 255, 0.4);
    border: 1px dashed rgba(1, 24, 72, 0.18);
    border-radius: 8px;
    z-index: 1;
    position: relative;
  }

  /* Right — solid cyan accent CTA card. Strongest CTA on the page;
     warranted by its strategic role (sample report = key conversion). */
  .hero-card--cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--cyan);
    color: var(--deep-blue);
    border: 1px solid rgba(1, 24, 72, 0.06);
    box-shadow: 0 8px 28px rgba(0, 188, 156, 0.25);
    justify-content: center;
    padding: clamp(32px, 4vw, 44px);
  }
  /* Subtle mint highlight to add depth (avoids flat fill) */
  .hero-card--cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 70% at 100% 0%, rgba(111, 231, 195, 0.45), transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  .hero-card--cta > * {
    position: relative;
    z-index: 1;
  }
  .hero-card--cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0, 188, 156, 0.35);
  }

  .hero-card__heading {
    font-size: clamp(20px, 1.9vw, 24px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--deep-blue);
    margin: 0 0 18px;
    text-wrap: balance;
  }

  .hero-card__cta-row {
    margin: 0 0 16px;
  }

  /* Inverted button: deep-blue fill on cyan card so it still pops */
  .hero-card--cta .btn--primary {
    background: var(--deep-blue);
    color: var(--white);
  }
  .hero-card--cta .btn--primary:hover {
    background: #0a2461;
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(1, 24, 72, 0.28);
  }

  .hero-card__sub {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(1, 24, 72, 0.78);
    margin: 0;
  }

  @media (max-width: 880px) {
    .deliverables__hero {
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .hero-card--image { min-height: 260px; padding: 0; }
  }

  .deliverables__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }

  .deliverable {
    position: relative;
    overflow: hidden;
    grid-column: span 2;
    background: var(--deep-blue);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(1, 24, 72, 0.10);
    transition: transform 220ms var(--ease), box-shadow 260ms var(--ease), border-color 220ms var(--ease);
  }
  .deliverable:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(1, 24, 72, 0.22);
    border-color: rgba(255, 255, 255, 0.14);
  }

  .deliverable__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--text-on-dark);
    margin: 0 0 12px;
    text-wrap: balance;
    position: relative;
  }
  .deliverable__subtitle {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    font-style: italic;
    color: rgba(255, 255, 255, 0.62);
    margin: 0 0 18px;
    position: relative;
  }
  .deliverable__body {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 28px;
    flex-grow: 1;
    position: relative;
  }

  /* "For" footer — cyan top divider + cyan eyebrow label */
  .deliverable__for {
    border-top: 1px solid rgba(0, 188, 156, 0.50);
    padding-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    position: relative;
  }
  .deliverable__for-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--cyan);
  }
  .deliverable__for-text {
    font-size: 13.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
  }

  /* Featured card (Security Certificate) — span 4 cols, cyan glow accent */
  .deliverable--featured {
    grid-column: span 4;
  }
  .deliverable--featured::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 80% at 100% 0%, rgba(0, 188, 156, 0.22), rgba(111, 231, 195, 0.06) 35%, transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  .deliverable--featured .deliverable__title {
    font-size: 28px;
  }

  /* Tablet: 2-column layout */
  @media (max-width: 1024px) and (min-width: 721px) {
    .deliverables__grid { grid-template-columns: repeat(2, 1fr); }
    .deliverable { grid-column: span 1; }
    .deliverable--featured { grid-column: span 2; }
  }

  /* Mobile: single column */
  @media (max-width: 720px) {
    .deliverables__grid { grid-template-columns: 1fr; gap: 14px; }
    .deliverable,
    .deliverable--featured { grid-column: auto; padding: 24px; }
    .deliverable__title,
    .deliverable--featured .deliverable__title { font-size: 22px; }
  }

  /* ==========  METHODOLOGY (Block 8: Standards + How we work)  ========== */
  .methodology {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--white);
    color: var(--text-on-light);
    padding: clamp(80px, 12vh, 128px) 0;
  }

  /* Subtle technical grid pattern — fades at edges via radial mask */
  .methodology::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
      linear-gradient(to right, rgba(1, 24, 72, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(1, 24, 72, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 80%);
    pointer-events: none;
  }

  .methodology__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }

  .methodology__heading {
    font-size: clamp(32px, 4.6vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    color: var(--text-on-light);
    text-wrap: balance;
  }

  .methodology__sub {
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.55;
    color: rgba(1, 24, 72, 0.72);
    max-width: 720px;
    margin: 0 0 clamp(40px, 5vh, 56px);
  }

  /* Sub-block heading (Standards / How we work) */
  .methodology__sub-heading {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--text-on-light);
    margin: 0 0 28px;
  }

  /* Sub-block separator (Standards → How we work) */
  .methodology__work {
    margin-top: clamp(56px, 7vh, 80px);
  }

  /* "How we work" 3×3 Bento — cards with icon left + title+body right */
  .work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .work-card {
    position: relative;
    background: rgba(197, 213, 223, 0.22);
    border: 1px solid rgba(1, 24, 72, 0.06);
    border-radius: 14px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 220ms var(--ease), box-shadow 260ms var(--ease), border-color 220ms var(--ease);
  }
  .work-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(1, 24, 72, 0.08);
    border-color: rgba(1, 24, 72, 0.10);
  }

  /* Icon + title form a single visual unit, centered to each other.
     Body sits below this unit, top-aligned to the rest of the card. */
  .work-card__head {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .work-card__icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
    flex: none;
  }

  .work-card__title {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-on-light);
    margin: 0;
    text-wrap: balance;
  }

  .work-card__body {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(1, 24, 72, 0.72);
    margin: 0;
  }

  @media (max-width: 1024px) and (min-width: 721px) {
    .work-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 720px) {
    .work-grid { grid-template-columns: 1fr; gap: 14px; }
    .work-card { padding: 22px; }
    .work-card__head { gap: 16px; }
    .work-card__icon { width: 48px; height: 48px; }
  }

  /* ==========  TIMELINE (Block 9)  ========== */
  .timeline {
    background: var(--white);
    color: var(--text-on-light);
    padding: clamp(80px, 12vh, 128px) 0;
  }

  .timeline__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }

  .timeline__heading {
    font-size: clamp(32px, 4.6vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    color: var(--text-on-light);
    text-wrap: balance;
  }

  .timeline__sub {
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.55;
    color: rgba(1, 24, 72, 0.72);
    max-width: 720px;
    margin: 0 0 clamp(48px, 7vh, 72px);
  }

  /* Timeline rail container */
  .timeline__list {
    position: relative;
    padding-left: 140px;
    max-width: 920px;
    list-style: none;
    margin: 0;
  }

  .timeline__list::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 97px;
    width: 2px;
    background: rgba(1, 24, 72, 0.10);
  }

  .step {
    position: relative;
    padding-bottom: clamp(44px, 6vh, 64px);
    padding-top: 4px;
    list-style: none;
    display: block;
    overflow: visible;
  }

  .step:last-child {
    padding-bottom: 0;
  }

  /* Stage dot on rail */
  .step::before {
    content: "";
    position: absolute;
    left: -49px;
    top: 14px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow:
      0 0 0 4px var(--white),
      0 0 0 5px rgba(0, 188, 156, 0.22);
    z-index: 2;
  }

  /* Ghost number — large outlined-feel digit on the left, gradient cyan→fade.
     Positioned to the left of the rail, behind content. Pushed down so the
     number sits below the dot, not under it. */
  .step__num {
    position: absolute;
    left: -140px;
    top: 30px;
    width: 130px;
    text-align: center;
    font-size: clamp(120px, 14vw, 180px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.06em;
    background: linear-gradient(to bottom,
      rgba(0, 188, 156, 0.85) 0%,
      rgba(0, 188, 156, 0.60) 40%,
      rgba(111, 231, 195, 0.30) 70%,
      transparent 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    pointer-events: none;
    z-index: 0;
    user-select: none;
  }

  .step__title {
    font-size: clamp(22px, 2.4vw, 26px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--text-on-light);
    margin: 0 0 18px;
    text-wrap: balance;
  }

  .step__what {
    margin-bottom: 16px;
  }

  .step__what-label,
  .step__receive-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin: 0 0 10px;
  }

  .step__what-label {
    color: rgba(1, 24, 72, 0.48);
  }

  .step__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .step__list li {
    position: relative;
    padding-left: 18px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(1, 24, 72, 0.78);
    margin-bottom: 8px;
  }

  .step__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 8px;
    height: 1.5px;
    background: rgba(1, 24, 72, 0.40);
  }

  .step__list li:last-child {
    margin-bottom: 0;
  }

  /* Boxed "You receive" highlight */
  .step__receive {
    background: rgba(0, 188, 156, 0.06);
    border: 1px solid rgba(0, 188, 156, 0.18);
    border-radius: 8px;
    padding: 14px 18px;
    margin-top: 18px;
  }

  .step__receive-label {
    color: rgba(0, 152, 124, 1);
    margin-bottom: 4px;
  }

  .step__receive-text {
    display: block;
    color: rgba(1, 24, 72, 0.85);
    font-size: 15.5px;
    line-height: 1.55;
  }

  @media (max-width: 720px) {
    .timeline__list { padding-left: 76px; }
    .timeline__list::before { left: 51px; }
    .step::before { left: -27px; top: 12px; width: 12px; height: 12px; }
    .step__num {
      left: -76px;
      width: 70px;
      top: 30px;
      font-size: 120px;
    }
    .step__title { font-size: 20px; }
    .step__list li { font-size: 15.5px; }
    .step__receive { padding: 12px 16px; }
    .step__receive-text { font-size: 15px; }
  }

  /* ==========  CERTIFICATIONS BAR (Block 10)  ========== */
  .certifications {
    background: var(--white);
    color: var(--text-on-light);
    padding: clamp(64px, 10vh, 80px) 0;
  }

  .certifications__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }

  .certifications__heading {
    font-size: clamp(32px, 4.6vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-on-light);
    text-align: center;
    margin: 0 0 clamp(40px, 5vh, 56px);
    text-wrap: balance;
  }

  .cert-group {
    text-align: center;
  }
  .cert-group + .cert-group {
    margin-top: clamp(36px, 5vh, 48px);
  }

  .cert-group__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(1, 24, 72, 0.50);
    margin: 0 0 22px;
  }

  .cert-group__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px 36px;
  }

  .cert-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100px;
  }

  .cert-item img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 220px;
    object-fit: contain;
  }

  /* Top-rated badges — taller so they're legible without hover/zoom */
  .cert-group__items--top-rated .cert-item {
    height: 200px;
  }
  .cert-group__items--top-rated .cert-item img {
    max-width: none;
  }

  /* Placeholder visual (no src yet) */
  .cert-item img:not([src]),
  .cert-item img[src=""] {
    width: 160px;
    background: var(--surface-soft);
    border: 1px dashed var(--border-on-light);
    border-radius: 6px;
  }

  /* Clickable variants (Forbes, Clutch) */
  .cert-item--link {
    border-radius: 8px;
    padding: 4px 10px;
    transition: background 200ms var(--ease), box-shadow 220ms var(--ease);
    text-decoration: none;
  }
  .cert-item--link:hover {
    background: var(--surface-soft);
    box-shadow: 0 0 0 1px rgba(0, 188, 156, 0.22), 0 4px 16px rgba(1, 24, 72, 0.06);
  }

  @media (max-width: 640px) {
    .cert-group__items {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px 16px;
      justify-items: center;
    }
    .cert-item { height: 80px; }
    .cert-item img { max-width: 160px; }

    .cert-group__items--top-rated { display: flex; flex-wrap: wrap; gap: 16px 24px; }
    .cert-group__items--top-rated .cert-item { height: 120px; }
    .cert-group__items--top-rated .cert-item img { max-width: none; }
  }

  /* ==========  FOUNDER MESSAGE (Block 11)  ========== */
  .founder {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--white);
    color: var(--text-on-light);
    padding: clamp(80px, 12vh, 128px) 0;
  }

  /* Mint ambient glow — left side, behind photo */
  .founder::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 50% 60% at 22% 50%, rgba(111, 231, 195, 0.12), transparent 65%);
    pointer-events: none;
  }

  .founder__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }

  .founder__layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: clamp(48px, 6vw, 64px);
    align-items: start;
  }

  .founder__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
    background: var(--surface-soft);
    box-shadow: 0 14px 40px rgba(1, 24, 72, 0.10);
  }

  .founder__photo:not([src]),
  .founder__photo[src=""] {
    border: 1px dashed var(--border-on-light);
    box-shadow: none;
  }

  .founder__heading {
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-on-light);
    margin: 0 0 28px;
    text-wrap: balance;
  }

  .founder__text p {
    font-size: clamp(17px, 1.4vw, 19px);
    line-height: 1.6;
    color: rgba(1, 24, 72, 0.85);
    margin: 0 0 18px;
  }

  .founder__text p:last-child {
    margin-bottom: 0;
  }

  .founder__signature {
    margin-top: clamp(36px, 5vh, 48px);
    padding-top: clamp(28px, 4vh, 36px);
    border-top: 1px solid rgba(1, 24, 72, 0.08);
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .founder__signature-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-soft);
    flex: none;
  }
  .founder__signature-photo:not([src]),
  .founder__signature-photo[src=""] {
    border: 1px dashed var(--border-on-light);
  }

  .founder__signature-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .founder__signature-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-on-light);
    line-height: 1.3;
  }

  .founder__signature-role {
    font-size: 14.5px;
    color: rgba(1, 24, 72, 0.62);
    line-height: 1.3;
  }

  .founder__signature-creds {
    font-size: 13px;
    color: rgba(1, 24, 72, 0.50);
    line-height: 1.3;
  }

  @media (max-width: 880px) {
    .founder__layout {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .founder__photo {
      max-width: 320px;
    }
  }

  /* ==========  TESTIMONIALS (Block 12)  ========== */
  .testimonials {
    background: var(--white);
    color: var(--text-on-light);
    padding: clamp(64px, 10vh, 96px) 0;
  }

  .testimonials__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }

  .testimonials__heading {
    font-size: clamp(32px, 4.6vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(40px, 5vh, 56px);
    color: var(--text-on-light);
    text-wrap: balance;
  }

  .testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .testimonial {
    position: relative;
    background: rgba(197, 213, 223, 0.22);
    border: 1px solid rgba(1, 24, 72, 0.06);
    border-radius: 14px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    transition: transform 220ms var(--ease), box-shadow 260ms var(--ease), border-color 220ms var(--ease);
  }
  .testimonial:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(1, 24, 72, 0.08);
    border-color: rgba(1, 24, 72, 0.10);
  }

  /* Featured testimonial — solid Deep Blue with cyan glow */
  .testimonial--featured {
    grid-column: span 2;
    padding: 36px;
    background: var(--deep-blue);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(1, 24, 72, 0.10);
  }

  /* Cyan glow accent in top-right corner */
  .testimonial--featured::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 80% at 100% 0%, rgba(0, 188, 156, 0.22), rgba(111, 231, 195, 0.06) 35%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }

  /* Lift content above glow */
  .testimonial--featured > * {
    position: relative;
    z-index: 1;
  }

  .testimonial--featured:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(1, 24, 72, 0.22);
    border-color: rgba(255, 255, 255, 0.16);
  }

  /* Featured: invert text to white */
  .testimonial--featured .testimonial__quote {
    font-size: 19px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
  }
  .testimonial--featured .testimonial__quote::before {
    font-size: 88px;
    top: -40px;
    color: rgba(0, 188, 156, 0.55);
  }

  .testimonial--featured .testimonial__name {
    color: var(--text-on-dark);
  }
  .testimonial--featured .testimonial__role {
    color: rgba(255, 255, 255, 0.62);
  }

  .testimonial--featured .testimonial__clutch {
    color: rgba(255, 255, 255, 0.42);
  }
  .testimonial--featured .testimonial__clutch:hover {
    color: var(--cyan);
  }

  /* Featured logo placeholder — dark variant */
  .testimonial--featured .testimonial__logo:not([src]),
  .testimonial--featured .testimonial__logo[src=""] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.22);
  }


  .testimonial__logo {
    display: block;
    height: 28px;
    width: auto;
    max-width: 140px;
    margin: 0 0 22px;
    object-fit: contain;
  }
  .testimonial__logo:not([src]),
  .testimonial__logo[src=""] {
    height: 28px;
    width: 100px;
    background: var(--surface-soft);
    border: 1px dashed var(--border-on-light);
    border-radius: 4px;
  }

  /* When the optional logo is omitted entirely, reserve top space so the
     absolute .testimonial__tag pill (top: 24px, ~22px tall) cannot overlap
     the quote text. Once a <img class="testimonial__logo"> is present,
     these rules disable themselves and the original layout returns. */
  .testimonial:not(:has(.testimonial__logo)) {
    padding-top: 60px;
  }
  .testimonial--featured:not(:has(.testimonial__logo)) {
    padding-top: 72px; /* featured tag is at top: 32px */
  }

  /* Tag — small green pill in top-right corner that hints at what was tested.
     Positioned absolute so it doesn't steal vertical space from quote/author. */
  .testimonial__tag {
    position: absolute;
    top: 24px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    color: rgb(0, 110, 90);
    background: rgba(0, 188, 156, 0.14);
    border: 1px solid rgba(0, 188, 156, 0.30);
    border-radius: 6px;
    z-index: 2;
  }

  /* Featured — invert tag for dark background. Slightly higher offset
     because featured has more padding (36px). */
  .testimonial--featured .testimonial__tag {
    top: 32px;
    right: 32px;
    color: var(--mint);
    background: rgba(0, 188, 156, 0.16);
    border-color: rgba(111, 231, 195, 0.32);
  }

  /* People row — name/role/source link (photo removed for B2B SaaS pentest tone) */
  .testimonial__people {
    margin-top: auto;
  }
  .testimonial__people-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .testimonial__source {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 188, 156, 0.30);
    align-self: flex-start;
    line-height: 1.3;
    transition: color 180ms var(--ease), border-color 180ms var(--ease);
  }
  .testimonial__source:hover {
    color: var(--cyan-hover);
    border-color: var(--cyan);
  }

  /* Featured — invert source link colour against dark background */
  .testimonial--featured .testimonial__source {
    color: var(--mint);
    border-bottom-color: rgba(111, 231, 195, 0.40);
  }
  .testimonial--featured .testimonial__source:hover {
    color: var(--cyan);
    border-bottom-color: var(--cyan);
  }

  .testimonial__quote {
    position: relative;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(1, 24, 72, 0.85);
    margin: 0 0 24px;
    flex-grow: 1;
  }
  .testimonial__quote::before {
    content: "\201C";
    position: absolute;
    left: -8px;
    top: -28px;
    font-size: 64px;
    font-family: Georgia, "Times New Roman", serif;
    color: rgba(0, 188, 156, 0.30);
    line-height: 1;
    pointer-events: none;
  }

  .testimonial__name {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text-on-light);
    line-height: 1.3;
  }
  .testimonial__role {
    font-size: 14px;
    color: rgba(1, 24, 72, 0.62);
    line-height: 1.3;
  }

  .testimonial__clutch {
    position: absolute;
    bottom: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: rgba(1, 24, 72, 0.38);
    transition: color 180ms var(--ease), transform 180ms var(--ease);
    border-radius: 4px;
  }
  .testimonial__clutch:hover {
    color: var(--cyan);
    transform: translateY(-1px);
  }

  /* Clutch signal row below grid */
  .testimonials__clutch-signal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: clamp(36px, 5vh, 48px);
    font-size: 16px;
    color: rgba(1, 24, 72, 0.78);
  }

  .testimonials__stars {
    color: var(--cyan);
    letter-spacing: 0.06em;
    font-size: 18px;
  }

  .testimonials__clutch-link {
    color: var(--text-on-light);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 188, 156, 0.40);
    transition: border-color 180ms var(--ease);
  }
  .testimonials__clutch-link:hover {
    border-color: var(--cyan);
  }
  .testimonials__clutch-link .arrow {
    display: inline-block;
    margin-left: 4px;
    transition: transform 180ms var(--ease);
  }
  .testimonials__clutch-link:hover .arrow {
    transform: translateX(3px);
  }

  /* Tablet */
  @media (max-width: 1024px) and (min-width: 721px) {
    .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
    .testimonial--featured {
      grid-column: span 2;
    }
  }

  /* Mobile */
  @media (max-width: 720px) {
    .testimonials__grid { grid-template-columns: 1fr; gap: 14px; }
    .testimonial,
    .testimonial--featured {
      grid-column: auto;
      grid-row: auto;
      padding: 24px;
    }
    /* No-logo state: tighter clearance acceptable on mobile */
    .testimonial:not(:has(.testimonial__logo)),
    .testimonial--featured:not(:has(.testimonial__logo)) {
      padding-top: 56px;
    }
    .testimonial--featured .testimonial__quote { font-size: 17px; }
  }

  /* ==========  FAQ (Block 13)  ========== */
  .faq {
    background: var(--white);
    color: var(--text-on-light);
    padding: clamp(80px, 12vh, 96px) 0;
  }

  .faq__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }

  .faq__heading {
    font-size: clamp(32px, 4.6vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(40px, 5vh, 56px);
    color: var(--text-on-light);
    text-wrap: balance;
  }

  .faq__list {
    max-width: 880px;
    border-top: 1px solid rgba(1, 24, 72, 0.10);
    border-bottom: 1px solid rgba(1, 24, 72, 0.10);
  }

  .faq__item {
    border-bottom: 1px solid rgba(1, 24, 72, 0.08);
  }
  .faq__item:last-child {
    border-bottom: none;
  }

  /* Question (summary) */
  .faq__q {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 4px 22px 0;
    font-size: clamp(17px, 1.4vw, 19px);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-on-light);
    letter-spacing: -0.01em;
    transition: color 180ms var(--ease);
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q::marker { content: ""; }

  .faq__q:hover .faq__chevron {
    color: var(--cyan);
  }

  .faq__chevron {
    flex: none;
    width: 18px;
    height: 18px;
    color: rgba(1, 24, 72, 0.42);
    transition: transform 240ms var(--ease), color 200ms var(--ease);
  }

  .faq__item[open] .faq__chevron {
    transform: rotate(90deg);
    color: var(--cyan);
  }

  /* Answer with smooth height transition (grid trick, no JS) */
  .faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 320ms var(--ease);
  }
  .faq__item[open] .faq__a {
    grid-template-rows: 1fr;
  }

  .faq__a-content {
    overflow: hidden;
    min-height: 0;
    max-width: 760px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(1, 24, 72, 0.78);
    padding-bottom: 28px;
  }

  .faq__a-content p {
    margin: 0 0 14px;
  }
  .faq__a-content p:last-child {
    margin-bottom: 0;
  }

  @media (max-width: 720px) {
    .faq__q { font-size: 16.5px; padding: 20px 4px 20px 0; gap: 16px; }
    .faq__chevron { width: 16px; height: 16px; }
    .faq__a-content { padding-bottom: 24px; font-size: 15.5px; }
  }

  /* ==========  FINAL CTA (Block 14)  ========== */
  .final-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--deep-blue);
    color: var(--text-on-dark);
    padding: clamp(96px, 14vh, 128px) 0;
  }

  /* Subtle technical grid — echo of Hero */
  .final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(197, 213, 223, 0.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(197, 213, 223, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 30% 50%, black 25%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 30% 50%, black 25%, transparent 75%);
    z-index: 0;
    pointer-events: none;
  }

  /* Cyan glow — mirror of Hero (top-left this time, balances composition) */
  .final-cta::after {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 100%;
    background:
      radial-gradient(closest-side, rgba(111, 231, 195, 0.20), rgba(0, 188, 156, 0.08) 40%, transparent 70%);
    filter: blur(20px);
    z-index: 0;
    pointer-events: none;
  }

  .final-cta__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }

  .final-cta__heading {
    font-size: clamp(32px, 4.4vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.022em;
    color: var(--text-on-dark);
    margin: 0 0 18px;
    text-wrap: balance;
  }

  .final-cta__sub {
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.55;
    color: var(--text-on-dark-muted);
    margin: 0 0 clamp(36px, 5vh, 48px);
    max-width: 560px;
  }

  /* Form */
  .final-cta__form {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .field {
    position: relative;
  }

  .field input,
  .field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-on-dark);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(197, 213, 223, 0.18);
    border-radius: 8px;
    padding: 22px 16px 10px;
    box-sizing: border-box;
    transition: border-color 200ms var(--ease), background-color 200ms var(--ease), box-shadow 200ms var(--ease);
  }

  .field input { height: 56px; }

  .field textarea {
    min-height: 120px;
    resize: vertical;
    padding: 26px 16px 14px;
    line-height: 1.5;
  }
  .fieldids {
      display:none;
  }
  
  .field input:hover,
  .field textarea:hover {
    border-color: rgba(197, 213, 223, 0.32);
  }

  .field input:focus,
  .field textarea:focus {
    outline: none;
    border-color: var(--cyan);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(0, 188, 156, 0.18);
  }

  /* Floating label */
  .field label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.52);
    pointer-events: none;
    transition: top 180ms var(--ease), font-size 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
  }

  .field--textarea label {
    top: 18px;
    transform: none;
  }

  .field input:focus + label,
  .field input:not(:placeholder-shown) + label,
  .field--textarea textarea:focus + label,
  .field--textarea textarea:not(:placeholder-shown) + label {
    top: 9px;
    transform: translateY(0);
    font-size: 12px;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 0.02em;
  }

  /* Consent checkbox — required, accessible, in-line with form spacing */
  .field-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    user-select: none;
  }
  .field-consent input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--cyan);
    cursor: pointer;
  }
  .field-consent a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.32);
    transition: color 180ms var(--ease), border-color 180ms var(--ease);
  }
  .field-consent a:hover {
    color: var(--cyan);
    border-color: var(--cyan);
  }

  /* Submit button — full width within form column */
  .final-cta__submit {
    margin-top: 6px;
    justify-content: center;
    width: 100%;
  }

  /* Secondary CTA below form — alternative conversion path (book a call).
     Cyan-emphasised so it's visible without competing with the primary submit. */
  .final-cta__secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: clamp(28px, 4vh, 36px);
    font-size: 17px;
    font-weight: 600;
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 188, 156, 0.40);
    padding-bottom: 2px;
    transition: color 180ms var(--ease), border-color 180ms var(--ease);
  }
  .final-cta__secondary:hover {
    color: var(--mint);
    border-color: var(--mint);
  }
  .final-cta__secondary .arrow {
    transition: transform 180ms var(--ease);
  }
  .final-cta__secondary:hover .arrow {
    transform: translateX(3px);
  }

  @media (max-width: 640px) {
    .final-cta__heading { font-size: 30px; }
  }













  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
    border-radius: 6px;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: 0ms !important;
      animation-duration: 0ms !important;
    }
  }

  /* Mobile tweaks */
  @media (max-width: 640px) {
    .nav { height: 72px; }
    .nav__logo { height: 30px; }
    .nav__cta { display: none; }
  }



  /* ==========  BOOKING MODAL  ========== */
  .booking-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vh, 40px);
    background: rgba(1, 24, 72, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 220ms var(--ease);
  }
  .booking-modal.is-open {
    display: flex;
    opacity: 1;
  }

  .booking-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 920px;
    max-height: calc(100vh - 80px);
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(1, 24, 72, 0.40);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(8px);
    transition: transform 240ms var(--ease);
  }
  .booking-modal.is-open .booking-modal__dialog {
    transform: translateY(0);
  }

  .booking-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(1, 24, 72, 0.06);
    color: var(--deep-blue);
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    transition: background 180ms var(--ease);
  }
  .booking-modal__close:hover {
    background: rgba(1, 24, 72, 0.12);
  }

  .booking-modal__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(1, 24, 72, 0.60);
    font-size: 14px;
    pointer-events: none;
    transition: opacity 220ms var(--ease);
  }
  /* Hide loading once the iframe is rendered inside widget */
  .booking-modal__widget:has(iframe) ~ .booking-modal__loading,
  .booking-modal.is-loaded .booking-modal__loading {
    opacity: 0;
  }
  .booking-modal__widget {
    width: 100%;
    overflow: auto;
  }
  .booking-modal__widget .meetings-iframe-container {
    width: 100%;
  }
  .booking-modal__widget iframe {
    width: 100% !important;
    border: none;
    display: block;
  }

  /* Mobile — fullscreen */
  @media (max-width: 720px) {
    .booking-modal {
      padding: 0;
    }
    .booking-modal__dialog {
      max-width: 100%;
      max-height: 100%;
      border-radius: 0;
    }
  }

  /* Lock body scroll when modal open */
  body.booking-modal-open {
    overflow: hidden;
  }

  /* ==========  SAMPLE REPORT MODAL  ========== */
  .sample-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vh, 40px);
    background: rgba(1, 24, 72, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 220ms var(--ease);
  }
  .sample-modal.is-open {
    display: flex;
    opacity: 1;
  }

  .sample-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 80px);
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(1, 24, 72, 0.40);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(8px);
    transition: transform 240ms var(--ease);
  }
  .sample-modal.is-open .sample-modal__dialog {
    transform: translateY(0);
  }

  .sample-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(1, 24, 72, 0.06);
    color: var(--deep-blue);
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    transition: background 180ms var(--ease);
  }
  .sample-modal__close:hover {
    background: rgba(1, 24, 72, 0.12);
  }

  .sample-modal__body {
    padding: 40px 32px 32px;
    overflow-y: auto;
  }

  .sample-modal__heading {
    margin: 0 0 20px;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--deep-blue);
    padding-right: 32px; /* leave room for the close button */
  }

  .sample-modal__widget {
    position: relative;
    min-height: 240px; /* keeps height stable while form is loading */
  }

  .sample-modal__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(1, 24, 72, 0.60);
    font-size: 14px;
    pointer-events: none;
    transition: opacity 220ms var(--ease);
  }
  /* Hide loading once HubSpot has rendered the form */
  .sample-modal.is-loaded .sample-modal__loading {
    opacity: 0;
  }

  /* Mobile — fullscreen */
  @media (max-width: 720px) {
    .sample-modal {
      padding: 0;
    }
    .sample-modal__dialog {
      max-width: 100%;
      max-height: 100%;
      border-radius: 0;
    }
    .sample-modal__body {
      padding: 56px 24px 32px;
    }
  }

  /* Lock body scroll when modal open */
  body.sample-modal-open {
    overflow: hidden;
  }



  /* ==========  SITE HEADER / FOOTER — overrides for inline page palette  ========== */
  /* Map site CSS variables onto local palette */
  :root {
    --navy: #011848;
    --teal: #00BC9C;
    --teal-soft: #6FE7C3;
    --teal-12: rgba(0,188,156,.12);
    --teal-line: rgba(0,188,156,.22);
    --ink: #0b1430;
    --muted: #5a6480;
    --line: rgba(1,24,72,.10);
    --line-2: rgba(1,24,72,.06);
    --bg: #F6F8FB;
    --bg-2: #EDF1F7;
    --white: #ffffff;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --pad: var(--side-pad);
    --shadow-sm: 0 1px 2px rgba(1,24,72,.06), 0 4px 14px rgba(1,24,72,.06);
  }

  /* Language picker (footer) */
  .lang{position:relative;display:inline-flex;align-items:center}
  .lang__toggle{
    display:inline-flex;align-items:center;gap:8px;
    background:transparent;border:0;color:rgba(255,255,255,.72);
    font:inherit;font-size:13px;cursor:pointer;padding:6px 0;
    transition:color .15s;
  }
  .lang__toggle:hover,.lang__toggle:focus-visible{color:#fff;outline:none}
  .lang__toggle svg{opacity:.8;transition:transform .2s ease}
  .lang:hover .lang__toggle svg:last-child,
  .lang:focus-within .lang__toggle svg:last-child{transform:rotate(180deg)}
  .lang__menu{
    position:absolute;bottom:calc(100% + 8px);left:0;
    min-width:170px;list-style:none;margin:0;padding:6px;
    background:#fff;color:var(--deep-blue);
    border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,.25),0 0 0 1px rgba(1,24,72,.06);
    opacity:0;visibility:hidden;transform:translateY(4px);
    transition:opacity .15s,transform .15s,visibility .15s;
    z-index:5;
  }
  .lang:hover .lang__menu,
  .lang:focus-within .lang__menu{opacity:1;visibility:visible;transform:translateY(0)}
  .lang__menu li{margin:0}
  .foot-bottom .lang__menu a{
    display:block;padding:8px 12px;font-size:14px;
    color:var(--deep-blue);text-decoration:none;border-radius:6px;
    transition:background 180ms var(--ease),color 180ms var(--ease);
  }
  .foot-bottom .lang__menu a:hover{background:var(--surface-soft);color:var(--deep-blue)}
  .foot-bottom .lang__menu a[aria-current="true"]{
    color:var(--cyan);font-weight:600;background:rgba(0,188,156,.10);
  }

  /* Site nav (matches /assets/styles.css) */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--line-2);
  }
  .nav .wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }
  .nav__row {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px; gap: 24px;
  }
  .nav__logo { display: flex; align-items: center; }
  .nav__logo svg { height: 28px; width: auto; }
  .nav__menu { display: flex; gap: 30px; align-items: center; }
  .nav__menu a {
    font-size: 14.5px; color: var(--ink);
    font-weight: 500; opacity: .78;
    text-decoration: none;
    transition: opacity .15s, color .15s;
  }
  .nav__menu a:hover { opacity: 1; color: var(--navy); }
  .nav__cta { display: flex; align-items: center; gap: 14px; }
  .nav__cta .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 11px 21px; border-radius: 999px;
    font-weight: 600; font-size: 14.5px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 180ms var(--ease), transform 180ms var(--ease);
  }
  .nav__cta .btn--ink {
    background: var(--navy); color: #fff;
  }
  .nav__cta .btn--ink:hover {
    background: #031f5e; transform: translateY(-1px);
  }
  .nav__menu-toggle {
    display: none; background: transparent; border: 0;
    width: 40px; height: 40px;
  }
  .nav__menu-toggle span {
    display: block; width: 22px; height: 2px; background: var(--navy); position: relative;
  }
  .nav__menu-toggle span::before, .nav__menu-toggle span::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--navy);
  }
  .nav__menu-toggle span::before { top: -7px; } .nav__menu-toggle span::after { top: 7px; }
  @media (max-width: 720px) {
    .nav__menu { display: none; }
    .nav__menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  }

  /* Site footer */
  body > footer {
    background: #020F30; color: rgba(255,255,255,.72);
    padding: 64px 0 28px;
  }
  body > footer .wrap {
    max-width: var(--container); margin: 0 auto; padding: 0 var(--side-pad);
  }
  .foot-grid {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
    gap: 36px; margin-bottom: 44px;
  }
  .foot-grid h5 {
    margin: 0 0 14px; font-size: 13px; text-transform: uppercase;
    letter-spacing: .14em; color: #fff; font-weight: 600;
  }
  .foot-grid ul { list-style: none; margin: 0; padding: 0; }
  .foot-grid li { margin: 6px 0; font-size: 14.5px; }
  .foot-grid li.is-soon { position: relative; color: rgba(255,255,255,.4); }
  .foot-grid li.is-soon::after {
    content: "Soon"; display: inline-block; margin-left: 8px;
    font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--teal); background: rgba(0,188,156,.14);
    padding: 2px 6px; border-radius: 4px; vertical-align: 1px;
  }
  .foot-grid a {
    transition: color .15s; color: rgba(255,255,255,.72);
    text-decoration: none;
  }
  .foot-grid a:hover { color: var(--teal); }
  .foot-grid .addr {
    font-size: 13.5px; color: rgba(255,255,255,.55);
    line-height: 1.4;
  }
  .foot-bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    padding-top: 24px; border-top: 1px solid rgba(255,255,255,.10);
    font-size: 13px; color: rgba(255,255,255,.5);
  }
  .foot-bottom a {
    color: rgba(255,255,255,.72); text-decoration: none;
  }
  .foot-bottom a:hover { color: var(--teal); }
  .socials { display: flex; gap: 10px; }
  .socials a {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.05);
    transition: background .2s, transform .15s;
  }
  .socials a:hover { background: var(--teal); transform: translateY(-2px); }
  .socials svg { width: 16px; height: 16px; fill: #fff; }
  @media (max-width: 1080px) {
    .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  }
  @media (max-width: 720px) {
    .foot-grid { grid-template-columns: 1fr; }
  }

  
  /* Lead-card + svc-card text-decoration override (kills <a> underline inheritance) */
  .lead-card, .lead-card *, .svc-card, .svc-card *,
  .blog-card, .blog-card *, .blog-featured, .blog-featured *,
  .blog-card__cta, .blog-featured__cta { text-decoration: none !important; }
  .lead-card:hover, .svc-card:hover { box-shadow: 0 12px 32px -14px rgba(1,24,72,.22); }

  /* Page breadcrumbs — small, low-attention strip above 'Sound familiar?' */
  .page-crumbs {
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border-on-light);
    font-size: 13px;
    color: rgba(1, 24, 72, 0.45);
  }
  .page-crumbs__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 14px var(--side-pad);
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    letter-spacing: .01em;
  }
  .page-crumbs a {
    color: rgba(1, 24, 72, 0.55);
    text-decoration: none;
    transition: color .15s;
  }
  .page-crumbs a:hover { color: var(--cyan); }
  .page-crumbs svg { opacity: .35; flex-shrink: 0; }
  .page-crumbs__current { color: rgba(1, 24, 72, 0.55); }

  /* ==========  Section "Resources" + "Other services" — inline page-level overrides  ========== */
  .pre-faq {
    background: var(--white);
    padding: clamp(64px, 8vw, 96px) 0;
  }
  .pre-faq__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }
  .pre-faq__head {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 0; max-width: 760px;
    margin: 0 auto clamp(36px, 4vw, 56px);
  }
  .pre-faq__head h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 600; letter-spacing: -.015em;
    color: var(--deep-blue); margin: 0;
  }
  .pre-faq__head p {
    margin: 14px auto 0; font-size: clamp(17px, 1.4vw, 20px);
    color: var(--text-on-light-muted); max-width: 60ch;
  }
  .pre-faq__lbl {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cyan); background: rgba(0, 188, 156, 0.12);
    padding: 8px 12px; border-radius: 999px; margin-bottom: 16px;
  }
  .pre-faq__lbl::before { content: ""; width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; }
  .pre-faq__more { text-align: center; margin-top: clamp(36px, 4.5vw, 56px); }
  .btn--line {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px; border-radius: 999px; font-weight: 600; font-size: 15px;
    text-decoration: none; cursor: pointer;
    background: transparent; color: var(--deep-blue);
    border: 1px solid var(--border-on-light);
    transition: border-color .2s, background .2s, color .2s;
  }
  .btn--line:hover { border-color: var(--deep-blue); background: var(--deep-blue); color: #fff; }
  .btn--line .arr { transition: transform .2s ease; }
  .btn--line:hover .arr { transform: translateX(3px); }
  /* spacing rule moved above */