:root {
    /* ============================================================
       DESIGN SYSTEM — Color
       ============================================================ */

    /* --- Brand / Primary (indigo) ----------------------------- */
    --brand-primary-0:   #F4F5FA;
    --brand-primary-50:  #DFE2F0;
    --brand-primary-100: #CACEE5;
    --brand-primary-200: #B5BADB;
    --brand-primary-300: #959DCC;
    --brand-primary-400: #606CB3;
    --brand-primary-500: #2B3B99;
    --brand-primary-600: #202C73;
    --brand-primary-700: #161E4D;
    --brand-primary-800: #0F1536;
    --brand-primary-900: #0B0F26;
    --brand-primary-950: #060917;

    /* --- Brand / Secondary (yellow-green) --------------------- */
    --brand-secondary-0:   #FEFFF0;
    --brand-secondary-50:  #FCFFD6;
    --brand-secondary-100: #FAFFB3;
    --brand-secondary-200: #F7FF8F;
    --brand-secondary-300: #F4FF5C;
    --brand-secondary-400: #F1FF29;
    --brand-secondary-500: #E1F300;
    --brand-secondary-600: #BECC00;
    --brand-secondary-700: #959F04;
    --brand-secondary-800: #646B06;
    --brand-secondary-900: #3E4205;
    --brand-secondary-950: #1E2004;

    /* --- Neutrals (warm paper & ink) -------------------------- */
    --paper:   #ffffff;
    --paper-2: #f6f6f4;
    --paper-3: #ececea;
    --ink:     #181410;
    --ink-2:   #3a342c;
    --ink-3:   #6b6358;
    --rule:        #1814101a;
    --rule-strong: #18141033;

    /* --- Semantic accents (mapped to brand) ------------------- */
    /* Indigo scale — interactive states for text, links & focus */
    --accent:           var(--brand-primary-500);   /* link & focus emphasis */
    --accent-strong:    var(--brand-primary-600);   /* link hover / pressed */
    --accent-deep:      var(--brand-primary-700);
    --accent-soft:      var(--brand-primary-50);    /* tinted surface */
    --accent-mist:      var(--brand-primary-0);

    /* Pink scale — eyebrows, em emphasis, supporting accents.
       Always uses the default brand-secondary shade (500). */
    --accent-secondary:      var(--brand-secondary-500);
    --accent-secondary-soft: var(--brand-secondary-50);

    /* Call-to-action — pink anchor with deeper hover/active states.
       Used by .btn-primary, .topbar-cta and .hero-actions .btn-primary. */
    --cta:        var(--brand-secondary-500);
    --cta-hover:  var(--brand-secondary-600);
    --cta-active: var(--brand-secondary-700);

    /* Legacy aliases — keep for any inline references */
    --accent-2: var(--brand-primary-400);
    --moss:     var(--brand-secondary-700);

    /* Typography — one font, one scale */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Type scale */
    --text-xs:   12px;
    --text-sm:   13px;
    --text-md:   14px;
    --text-base: 16px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  clamp(26px, 3vw, 34px);
    --text-3xl:  clamp(34px, 4.6vw, 56px);
    --text-3point5xl: clamp(39px, 6.3vw, 80px);
    --text-4xl:  clamp(44px, 8vw, 104px);

    /* Weights */
    --w-regular:  400;
    --w-medium:   500;
    --w-semibold: 600;
    --w-bold:     700;

    /* Line heights */
    --lh-tight:   1.05;
    --lh-snug:    1.2;
    --lh-base:    1.5;
    --lh-loose:   1.6;

    /* Letter spacing */
    --ls-tightest: -0.035em;
    --ls-tighter:  -0.025em;
    --ls-tight:    -0.015em;
    --ls-snug:     -0.005em;
    --ls-normal:   0;

    /* Layout */
    --gutter: 28px;
    --max-w: 1440px;
  }
  @media (max-width: 720px) {
    :root { --gutter: 18px; }
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  /* Defensive clip on the horizontal axis so off-screen elements (e.g.
     the mobile nav drawer translated 100% to the right, or scaled phone
     mockups whose layout box is wider than their visual) can never
     trigger horizontal page scroll on small viewports. `clip` (not
     `hidden`) doesn't establish a new scroll container or break sticky
     positioning. */
  html, body { overflow-x: clip; }
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
  section[id] { scroll-margin-top: 80px; }
  body {
    font-family: var(--font);
    color: var(--ink);
    background: #ffffff;
    font-size: var(--text-base);
    line-height: var(--lh-loose);
    font-weight: var(--w-regular);
    letter-spacing: var(--ls-snug);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* `overflow-x` is set globally via `html, body { overflow-x: clip; }`
       above. `clip` (rather than `hidden`) prevents horizontal scroll on
       mobile WITHOUT establishing a scroll container — which is what was
       silently breaking `position: sticky` on .story-pin (and any other
       sticky descendants). Do not reintroduce `overflow-x: hidden` here. */
  }

  ::selection { background: var(--accent); color: var(--paper); }
  ::-moz-selection { background: var(--accent); color: var(--paper); }

  /* Global typography guardrails */
  *, *::before, *::after { font-style: normal !important; }
  .eyebrow { text-transform: uppercase !important; }

  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; cursor: pointer; }

  /* ---------- Layout ---------- */
  .wrap {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }

  .rule { border-top: 1px solid var(--rule-strong); }
  .rule-thin { border-top: 1px solid var(--rule); }

  /* ---------- Top bar ---------- */
  .topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: transparent;
    border-bottom: 1px solid transparent;
    transform: translateY(0);
    transition:
      background-color .45s cubic-bezier(.2,.7,.2,1),
      border-color .45s cubic-bezier(.2,.7,.2,1),
      box-shadow .45s cubic-bezier(.2,.7,.2,1),
      backdrop-filter .45s cubic-bezier(.2,.7,.2,1),
      transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .topbar.no-transition {
    transition: none !important;
  }
  .topbar.is-fixed {
    position: fixed;
  }
  .topbar.is-hidden {
    transform: translateY(-100%);
  }
  .topbar.is-scrolled {
    background: #ffffffcc;
    border-bottom-color: var(--rule-strong);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
  }
  @media (prefers-reduced-motion: reduce) {
    .topbar { transition: none; }
  }
  .topbar-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
    padding-block: 18px;
    color: var(--ink-2);
  }
  .topbar nav {
    grid-column: 2 / 3;
    display: flex;
    gap: 28px;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: #ffffff;
    transition: color .45s cubic-bezier(.2,.7,.2,1);
  }
  .topbar.is-scrolled nav { color: var(--ink); }
  .topbar-inner > nav a {
    position: relative;
    transition: color .25s ease;
  }
  /* On the dark hero backdrop the link stays white; the underline alone signals hover. */
  .topbar-inner > nav a:hover { color: #ffffff; }
  /* Once the topbar is scrolled (white surface, ink text), the underline alone signals hover. */
  .topbar.is-scrolled .topbar-inner > nav a:hover { color: var(--ink); }
  .topbar-inner > nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
    height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .topbar-inner > nav a:hover::after { transform: scaleX(1); transform-origin: left; }
  .topbar-inner > nav a[aria-current="page"] {
    font-weight: var(--w-semibold);
  }
  .topbar-inner > nav a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* ---------- Top bar dropdown menu ----------
     Hover-and-keyboard "For organisations" submenu. The trigger sits inline
     with the other nav links and inherits their color states. The menu is
     a white card that fades in below the trigger. */
  .nav-item--has-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: inherit;
    cursor: pointer;
    position: relative;
    transition: color .25s ease;
  }
  .nav-trigger::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .nav-trigger:hover::after,
  .nav-item--has-menu:hover .nav-trigger::after,
  .nav-item--has-menu:focus-within .nav-trigger::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  .nav-trigger[aria-current="page"] {
    font-weight: var(--w-semibold);
  }
  .nav-trigger[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  .topbar-inner > nav a:hover,
  .nav-trigger:hover { color: #ffffff; }
  .topbar.is-scrolled .nav-trigger:hover { color: var(--ink); }
  .nav-caret {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transform-origin: center;
    transition: transform .25s ease;
  }
  .nav-item--has-menu:hover .nav-caret,
  .nav-item--has-menu:focus-within .nav-caret,
  .nav-trigger[aria-expanded="true"] .nav-caret {
    transform: rotate(180deg);
  }

  .nav-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, -4px);
    min-width: 300px;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: 12px;
    box-shadow: 0 16px 40px -16px #18141033, 0 4px 12px -6px #1814101a;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 60;
  }
  /* A small invisible bridge so the menu doesn't close when the cursor
     travels from the trigger to the first menu item. */
  .nav-menu::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
  }
  .nav-item--has-menu:hover .nav-menu,
  .nav-item--has-menu:focus-within .nav-menu,
  .nav-trigger[aria-expanded="true"] + .nav-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .nav-menu a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
    transition: background-color .2s ease, color .2s ease;
    white-space: nowrap;
  }
  .topbar nav .nav-menu a::after,
  .topbar nav .nav-menu a:hover::after { content: none; }
  .topbar nav .nav-menu a:hover {
    background: var(--paper-2);
    color: var(--ink-2);
  }
  .topbar nav .nav-menu a[aria-current="page"] {
    background: var(--paper-2);
    color: var(--ink);
    font-weight: var(--w-semibold);
  }

  .brand-mark {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
  }
  .brand-mark .glyph {
    display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
    background: var(--ink); color: var(--paper);
    align-items: center; justify-content: center;
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--w-medium);
    letter-spacing: var(--ls-normal);
  }
  .brand-logo {
    display: inline-flex;
    align-items: center;
  }
  .brand-logo img {
    display: block;
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
    transition: filter .45s cubic-bezier(.2,.7,.2,1);
  }
  .topbar.is-scrolled .brand-logo img {
    filter: none;
  }
  .topbar-end {
    grid-column: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }
  .topbar-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 6px;
    background: var(--cta);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-medium);
    line-height: 1;
    letter-spacing: var(--ls-snug);
    white-space: nowrap;
    transition: background .25s cubic-bezier(.2,.7,.2,1), transform .25s cubic-bezier(.2,.7,.2,1);
  }
  .topbar-cta:hover { background: var(--cta-hover); }
  .topbar-cta:active { background: var(--cta-active); }

  /* Secondary header CTA (e.g. "Offer your product in-app") — sits next to the
     primary CTA. Ghost styling that adapts to the topbar's three states:
     dark hero (white-on-transparent), scrolled (ink-on-paper), light pages. */
  .topbar-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 6px;
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-medium);
    line-height: 1;
    letter-spacing: var(--ls-snug);
    white-space: nowrap;
    transition: background .25s cubic-bezier(.2,.7,.2,1),
                color .25s cubic-bezier(.2,.7,.2,1),
                border-color .25s cubic-bezier(.2,.7,.2,1);
  }
  .topbar-cta-secondary:hover {
    background: #ffffff;
    color: var(--ink);
    border-color: #ffffff;
  }
  /* When the topbar is scrolled (white frosted surface), flip to ink-on-paper
     so the ghost button reads cleanly on the light background. The light-page
     non-scrolled variant lives in the LIGHT-PAGE THEME section below. */
  .topbar.is-scrolled .topbar-cta-secondary {
    color: var(--ink);
    border-color: var(--rule-strong);
  }
  .topbar.is-scrolled .topbar-cta-secondary:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  /* ---------- Mobile nav toggle (hamburger) ---------- */
  .nav-toggle {
    display: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 10px;
    margin: -10px -10px -10px 0;
    cursor: pointer;
    color: #ffffff;
    border-radius: 8px;
    transition: color .45s cubic-bezier(.2,.7,.2,1);
  }
  .topbar.is-scrolled .nav-toggle { color: var(--ink); }
  /* On light pages the hero is already light, so start with ink. */
  .page--light .nav-toggle { color: var(--ink); }
  .nav-toggle-bars {
    display: block;
    width: 22px;
    height: 16px;
    position: relative;
  }
  .nav-toggle-bars span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .3s cubic-bezier(.2,.7,.2,1),
                opacity .2s ease,
                top .3s cubic-bezier(.2,.7,.2,1);
  }
  .nav-toggle-bars span:nth-child(1) { top: 0; }
  .nav-toggle-bars span:nth-child(2) { top: 7px; }
  .nav-toggle-bars span:nth-child(3) { top: 14px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
  }
  .nav-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  /* Keep the hamburger/close button above the drawer surface so it remains
     a tappable close affordance while the menu is open. Force dark colour
     because the drawer sits on a light surface, regardless of the topbar's
     scroll state. */
  body.drawer-open .nav-toggle {
    position: relative;
    z-index: 120;
    color: var(--ink);
  }

  /* ---------- Mobile drawer ---------- */
  .mobile-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(20, 16, 12, 0.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s cubic-bezier(.2,.7,.2,1);
    z-index: 90;
  }
  /* The `.mobile-drawer { display: flex }` rule below overrides the UA
     stylesheet's `[hidden] { display: none }`, so without this the closed
     drawer keeps occupying layout (translated off-screen to the right)
     and extends the page's horizontal scroll width — visible on iPhone
     12/13 as the user being able to scroll right and reveal the panel.
     Force the closed state back to `display: none` so it's truly out of
     flow when the JS hasn't toggled it open. */
  .mobile-drawer[hidden],
  .mobile-drawer-backdrop[hidden] {
    display: none;
  }
  .mobile-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(340px, 100vw);
    height: 100dvh;
    background: var(--paper);
    color: var(--ink);
    padding: 0 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.2,.7,.2,1);
    box-shadow: -20px 0 60px -20px rgba(20, 16, 12, 0.22);
    z-index: 100;
  }
  /* Sticky shield pinned at the top of the drawer's scroll viewport so
     scrolling links don't bleed through behind the close icon. The
     pseudo-element is a real flex child, sized to the topbar height,
     and z-indexed above the rest of the drawer content. */
  .mobile-drawer::before {
    content: "";
    display: block;
    position: sticky;
    top: 0;
    flex-shrink: 0;
    height: 72px;
    margin: 0 -24px;
    background: var(--paper);
    z-index: 1;
    pointer-events: none;
  }
  .mobile-drawer.is-open {
    transform: translateX(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-drawer,
    .mobile-drawer-backdrop { transition: none; }
  }
  .mobile-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 16px;
  }
  /* Subtle dividers between top-level rows. Borders sit on the row's
     direct child of the nav so an expanded "For organisations" group
     keeps its single divider below the whole expanded section. */
  .mobile-drawer-nav > a,
  .mobile-drawer-nav > .mobile-drawer-group {
    border-bottom: 1px solid var(--paper-3);
  }
  .mobile-drawer-nav > :last-child {
    border-bottom: 0;
  }
  .mobile-drawer-link,
  .mobile-drawer-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    font-family: var(--font);
    font-size: var(--text-lg);
    font-weight: var(--w-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
    text-decoration: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: opacity .15s ease;
  }
  /* Press feedback on touch (we deliberately skip hover styles). */
  .mobile-drawer-link:active,
  .mobile-drawer-trigger:active,
  .mobile-drawer-submenu a:active {
    opacity: .55;
  }
  .mobile-drawer-link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
  }
  .mobile-drawer-trigger .nav-caret {
    width: 14px;
    height: 14px;
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
  }
  .mobile-drawer-trigger[aria-expanded="true"] .nav-caret {
    transform: rotate(180deg);
  }
  .mobile-drawer-submenu {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 0;
    padding-left: 24px;
    visibility: hidden;
    transition: max-height .32s cubic-bezier(.2,.7,.2,1),
                visibility 0s linear .32s;
  }
  .mobile-drawer-trigger[aria-expanded="true"] + .mobile-drawer-submenu {
    max-height: 600px;
    visibility: visible;
    transition: max-height .32s cubic-bezier(.2,.7,.2,1),
                visibility 0s linear 0s;
  }
  .mobile-drawer-submenu a {
    display: block;
    padding: 14px 0;
    font-family: var(--font);
    font-size: var(--text-lg);
    font-weight: var(--w-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--ink-3);
    text-decoration: none;
    transition: opacity .15s ease;
  }
  .mobile-drawer-submenu a[aria-current="page"] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
  }
  .mobile-drawer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 6px;
    background: var(--cta);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    text-decoration: none;
    transition: background .25s cubic-bezier(.2,.7,.2,1);
    margin-top: auto;
  }
  .mobile-drawer-cta:hover { background: var(--cta-hover); }
  .mobile-drawer-cta:active { background: var(--cta-active); }
  .mobile-drawer-cta .arrow {
    display: inline-block;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .mobile-drawer-cta:hover .arrow { transform: translateX(3px); }
  /* Container for the stacked primary + secondary CTAs at the drawer bottom. */
  .mobile-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .mobile-drawer-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--rule-strong);
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    transition: background .25s cubic-bezier(.2,.7,.2,1),
                color .25s cubic-bezier(.2,.7,.2,1),
                border-color .25s cubic-bezier(.2,.7,.2,1);
  }
  .mobile-drawer-cta-secondary:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  .mobile-drawer-cta-secondary .arrow {
    display: inline-block;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .mobile-drawer-cta-secondary:hover .arrow { transform: translateX(3px); }

  body.drawer-open {
    overflow: hidden;
  }
  /* When the drawer is open keep the topbar anchored at the top of the
     viewport (so the drawer, a fixed child, isn't shifted by the header's
     own hide-on-scroll transform) and lift it above the backdrop so the
     hamburger/close button stays tappable. */
  body.drawer-open .topbar {
    transform: none !important;
    position: fixed !important;
    top: 0;
    z-index: 110;
  }

  /* Switch to the hamburger + drawer well before the desktop nav starts to
     crowd. With two CTAs ("Offer your product in-app" + "Download") in the
     right column, the layout begins to feel cramped under ~1024px even though
     the rest of the page can still render in a desktop-style two-column grid.
     Keep the primary CTA visible next to the hamburger so users can act
     without opening the drawer. */
  @media (max-width: 1024px) {
    .topbar-inner > nav,
    .topbar-inner > nav .nav-item--has-menu,
    .topbar-inner > nav .nav-menu { display: none; }
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .topbar-cta-secondary { display: none; }
    /* The 32px desktop gap between brand, nav, and topbar-end sums with
       the min-content of the side columns to overflow the topbar's
       content area on narrow viewports (logo wordmark ~164px + CTA pill
       + hamburger ≈ 143px + 64px of gap = 371px against a 354px content
       width at 390 viewport). Shrink the gap so the grid fits. */
    .topbar-inner { gap: 16px; }
    /* The hamburger's `-10px` right margin (a hit-area bleed that aligns
       the icon visually with the gutter on desktop) pushes the button
       past the topbar's right edge on mobile, where the gutter is only
       18px — producing both a faint horizontal scroll and a too-tight
       icon. Drop the right bleed so the button sits flush with the
       gutter-bounded grid track instead. */
    .nav-toggle { margin-right: 0; }
  }
  /* On very narrow viewports the primary CTA crowds the hamburger; fall
     back to drawer-only for the CTA. */
  @media (max-width: 380px) {
    .topbar-cta { display: none; }
  }

  /* ---------- Brand gradient backdrop ----------
     Absolute-positioned at the top of the document, sized in JS to the press
     band's bottom. Scrolls naturally with the page — once it's past the top
     of the viewport, the white sections beneath simply take over. No fade,
     no opacity blend, no muddy mid-state. */
  .gradient-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--gradient-height, 100vh);
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      #0F1D36 0%,
      #1A3252 14.285%,
      #24476D 28.571%,
      #236F9A 48.266%,
      #3791CD 61.848%,
      #4BB4FF 75.431%,
      #71C4FF 82.392%,
      #98D4FF 89.353%,
      #CBE9FF 94.677%,
      #FFFFFF 100%
    );
  }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    padding: clamp(112px, 16vh, 192px) 0 clamp(64px, 9vh, 96px);
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    min-height: 480px;
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 520px;
  }
  .hero-title {
    font-family: var(--font);
    font-size: var(--text-3point5xl);
    font-weight: var(--w-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tighter);
    color: #ffffff;
    margin: 0;
  }
  .hero-title .row { display: block; }
  .hero-lede {
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    max-width: 52ch;
  }

  .hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
  }
  .hero-actions .btn-primary {
    background: var(--cta);
    color: var(--ink);
  }
  .hero-actions .btn-primary:hover {
    background: var(--cta-hover);
    color: var(--ink);
  }
  .hero-actions .btn-primary:active {
    background: var(--cta-active);
    color: var(--ink);
  }
  .hero-actions .btn-ghost {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
  }
  .hero-actions .btn-ghost:hover {
    background: #ffffff;
    color: var(--ink);
    border-color: #ffffff;
  }

  .hero-mockup {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .hero-mockup img {
    max-width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: contain;
  }
  /* Keep the headline above any orbit overflow that may extend leftward */
  .hero-content { position: relative; z-index: 3; }

  @media (max-width: 1024px) {
    .hero-grid { gap: 40px; }
    .hero-content { max-width: 460px; }
  }

  @media (max-width: 880px) {
    .hero { padding: 144px 0 64px; }
    /* `minmax(0, 1fr)` (rather than plain `1fr`) lets the column shrink
       below its content's intrinsic min-width. The `.pf-stage` phone
       mockup has a fixed 384px layout box (scaled visually via
       `transform`), and with `1fr` that 384px min-content forced the
       column — and therefore the page — wider than the viewport. */
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; min-height: 0; }
    .hero-content {
      max-width: none;
      align-items: center;
      text-align: center;
      margin-inline: auto;
    }
    .hero-title {
      font-size: clamp(2.75rem, 9vw, 3.5rem);
    }
    .hero-lede { margin-inline: auto; }
    .hero-actions { justify-content: center; }
    .hero-mockup {
      justify-content: center;
      /* Let orbits and avatars bleed beyond the column;
         horizontal page overflow is already clipped at the
         html/body level via `overflow-x: clip`. */
      overflow: visible;
    }
    .hero-mockup img { max-height: 480px; }
  }

  @media (max-width: 480px) {
    .hero-actions { width: 100%; }
    .hero-actions .btn { width: 100%; }
  }

  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 6px;
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, box-shadow .25s;
    border: 1px solid transparent;
    will-change: transform;
  }
  .btn .btn-icon {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
  }
  .btn-primary {
    background: var(--cta); color: var(--ink);
  }
  .btn-primary:hover { background: var(--cta-hover); }
  .btn-primary:active { background: var(--cta-active); }
  .btn-ghost {
    background: transparent; color: var(--ink);
    border-color: var(--rule-strong);
  }
  .btn-ghost:hover  { background: var(--paper-2); border-color: var(--rule-strong); }
  .btn-ghost:active { background: var(--paper-3); border-color: var(--rule-strong); }
  .btn .arrow {
    display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .btn:hover .arrow { transform: translateX(4px); }

  /* Passport card */
  .passport {
    position: relative;
    margin: 64px 0 24px;
    padding: 28px;
    border: 1px solid var(--rule-strong);
    background:
      repeating-linear-gradient(135deg, #ffffff05 0 8px, transparent 8px 16px),
      linear-gradient(180deg, #ede4d0, #e6dcc4);
    border-radius: 14px;
    box-shadow: 0 1px 0 #ffffff60 inset, 0 30px 60px -40px #18141055;
    overflow: hidden;
  }
  .passport::before {
    content: "";
    position: absolute; inset: 10px;
    border: 1px dashed var(--rule-strong);
    border-radius: 8px;
    pointer-events: none;
  }
  .passport-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 28px;
    position: relative;
  }
  @media (max-width: 880px) {
    .passport-grid { grid-template-columns: 1fr; gap: 18px; }
  }
  .pp-label {
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-medium);
    color: var(--ink-3);
  }
  .pp-value {
    font-family: var(--font);
    font-size: var(--text-xl);
    font-weight: var(--w-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
    margin-top: 6px;
  }
  .pp-value small {
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-medium);
    color: var(--ink-3);
    margin-left: 8px;
  }
  .pp-mrz {
    grid-column: 1 / -1;
    margin-top: 14px;
    padding-top: 18px;
    border-top: 1px dashed var(--rule-strong);
    font-family: var(--font);
    font-size: var(--text-sm);
    color: var(--ink-2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .pp-stamp {
    position: absolute;
    right: 22px; top: 14px;
    color: var(--ink-2);
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--w-medium);
    line-height: var(--lh-snug);
    border: 1.5px solid currentColor;
    padding: 8px 12px;
    border-radius: 6px;
    opacity: 0.85;
    text-align: center;
  }
  .pp-stamp::after {
    content: "";
    position: absolute; inset: -3px;
    border: 1.5px solid currentColor;
    border-radius: 8px;
    opacity: 0.4;
  }

  /* hero scroll cue */
  .scroll-cue {
    margin-top: 32px;
    display: flex; align-items: center; gap: 14px;
    color: var(--ink-3);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
  }
  .scroll-cue .line {
    display: inline-block; width: 64px; height: 1px;
    background: currentColor; opacity: 0.5;
  }

  /* ---------- Press marquee ---------- */
  .press {
    padding: 80px 0 40px;
    overflow: hidden;
    position: relative;
    background: transparent;
  }
  .press-head {
    display: flex; justify-content: center;
    margin-bottom: 32px;
  }
  .press-caption {
    margin: 0;
    text-align: center;
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: rgba(255, 255, 255, 0.72);
    max-width: 52ch;
  }
  @media (max-width: 720px) {
    .press-head { margin-bottom: 24px; }
  }
  .press-track {
    display: flex;
    width: max-content;
    animation: press-scroll 60s linear infinite;
    will-change: transform;
  }
  .press:hover .press-track { animation-play-state: paused; }
  .press-set {
    display: flex;
    align-items: center;
    gap: 90px;
    padding-right: 90px;
    flex-shrink: 0;
  }
  .press-set img {
    display: block;
    height: 2.8125rem;
    width: auto;
    max-width: none;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }
  @keyframes press-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .press-track { animation: none; }
  }
  @media (max-width: 720px) {
    .press-set { gap: 60px; padding-right: 60px; }
    .press-set img { height: 2.25rem; }
  }

  /* ---------- Section base ---------- */
  section { padding: 96px 0; position: relative; }
  @media (max-width: 720px) { section { padding: 64px 0; } }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--w-semibold);
    line-height: var(--lh-base);
    letter-spacing: 0.04em;
    text-transform: uppercase !important;
    color: var(--ink-2);
  }

  .h2 {
    font-family: var(--font);
    font-size: var(--text-3xl);
    font-weight: var(--w-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tighter);
    color: var(--ink);
    margin: 22px 0 0;
  }
  .h2-sub {
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
    max-width: 60ch;
    margin-top: 22px;
  }

  /* ---------- Heading underline (em mark) ----------
     Hand-drawn, brush-style underline that sits beneath an <em> inside a
     headline. The mark is a single SVG curve used as a CSS mask so the
     visible color always comes from `--mark-color` (defaults to the brand
     yellow-green) and can be retheme'd in one place.
     The line "draws" itself left → right via clip-path once its parent
     heading scrolls into view (JS toggles `.is-drawn` on the <em>). */
  .h2 em,
  .hero-title em,
  .b2b-panel h3 em,
  .features-panel h3 em,
  .story-paragraph em {
    font-style: normal;
    position: relative;
    display: inline;
    white-space: nowrap;
    /* Establish a local stacking context so the underline (z-index: -1) sits
       behind the text glyphs but still above the page background. */
    isolation: isolate;
    --mark-color: var(--brand-secondary-500);
  }
  .h2 em::after,
  .hero-title em::after,
  .b2b-panel h3 em::after,
  .features-panel h3 em::after,
  .story-paragraph em::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -0.06em;
    right: -0.06em;
    bottom: -0.12em;
    height: 0.36em;
    background-color: var(--mark-color);
    /* The mask shape is generated per-em in JS — one of four distinct
       silhouettes (down→up, up→middle, up→down, straight) with jittered
       parameters. The fallback below renders a sensible static smile when
       JS is unavailable. */
    -webkit-mask-image: var(--mark-shape, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'><path d='M5 5 C 90 14, 310 14, 395 6' stroke='black' stroke-width='7.5' stroke-linecap='butt' fill='none'/></svg>"));
            mask-image: var(--mark-shape, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'><path d='M5 5 C 90 14, 310 14, 395 6' stroke='black' stroke-width='7.5' stroke-linecap='butt' fill='none'/></svg>"));
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    /* Brush flick: high initial velocity, soft landing (easeOutExpo). Delay
       holds the stroke back ~0.45s so the heading is visibly in the reading
       zone before the brush hits paper. */
    transition: clip-path 0.65s cubic-bezier(.16, 1, .3, 1) 0.45s;
  }
  .h2 em.is-drawn::after,
  .hero-title em.is-drawn::after,
  .b2b-panel h3 em.is-drawn::after,
  .features-panel h3 em.is-drawn::after,
  .story-paragraph em.is-drawn::after {
    clip-path: inset(0 -2% 0 0);
  }
  @media (prefers-reduced-motion: reduce) {
    .h2 em::after,
    .hero-title em::after,
    .b2b-panel h3 em::after,
    .features-panel h3 em::after,
    .story-paragraph em::after {
      transition: none;
      clip-path: inset(0 -2% 0 0);
    }
  }

  /* Long-phrase opt-out: applied by JS when an em's text exceeds the
     character threshold. Drops the layout constraints (`nowrap`,
     stacking context) so the phrase flows like normal heading text and
     hides the brush pseudo entirely. Base `font-style: normal` from the
     selector above is preserved. */
  .h2 em.is-mark-skip,
  .hero-title em.is-mark-skip,
  .b2b-panel h3 em.is-mark-skip,
  .features-panel h3 em.is-mark-skip,
  .story-paragraph em.is-mark-skip {
    white-space: normal;
    isolation: auto;
  }
  .h2 em.is-mark-skip::after,
  .hero-title em.is-mark-skip::after,
  .b2b-panel h3 em.is-mark-skip::after,
  .features-panel h3 em.is-mark-skip::after,
  .story-paragraph em.is-mark-skip::after {
    display: none;
  }

  /* Story paragraph brush — bump the band thickness so it matches the
     visual heft of the headline brushes (.h2 etc.), which look bolder
     on screen because their parent font-size is much larger. */
  .story-paragraph em::after {
    height: 0.5em;
    bottom: -0.16em;
  }

  /* ---------- Highlight bar variant (red) ----------
     Brush-style highlighter that reuses the same SVG silhouettes as the
     yellow underline (set via JS in `--mark-shape` with a much thicker
     stroke), inherits the left → right clip-path draw-in animation, but
     fills with a soft coral red and sits taller so the mark covers the
     whole word, not just the underline strip. Selector is scoped to
     `.story-paragraph` so it wins over the yellow story override above
     without needing !important. */
  .story-paragraph em.mark-bar-red::after,
  em.mark-bar-red::after {
    background-color: var(--accent-red, #FCA5A5);
    height: 1em;
    bottom: -0.1em;
    left: -0.06em;
    right: -0.06em;
  }

  /* ---------- Final CTA ---------- */
  .final {
    padding: 140px 0 100px;
    position: relative;
  }
  .final-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .final-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 520px;
  }
  .final .h2 {
    font-size: var(--text-3xl);
    font-weight: var(--w-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tighter);
    color: var(--ink);
    margin: 22px 0 0;
  }
  .final-sub {
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
    margin: 22px 0 36px;
    max-width: 50ch;
  }
  .final .actions {
    display: inline-flex; gap: 12px; flex-wrap: wrap;
  }
  .final-visual {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .final-visual img {
    max-width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
  }

  @media (max-width: 880px) {
    .final { padding: 96px 0 80px; }
    .final-grid { grid-template-columns: 1fr; gap: 48px; }
    .final-content {
      max-width: none;
      align-items: center;
      text-align: center;
    }
    .final-content .eyebrow { justify-content: center; }
    .final-sub { margin-inline: auto; }
    .final .actions { justify-content: center; }
    .final-visual { justify-content: center; }
    .final-visual img { max-height: 480px; }
  }
  
  /* Scroll-based reveal animation for CTA */
  .final .h2 {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
  }
  .final .h2.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ---------- Footer ----------
     The footer mirrors the hero's brand gradient: white at the top so it hands
     off cleanly from the (white) CTA section above, then deepens through sky
     blue into the same #0F1D36 navy that opens the page at the top. The two
     dark surfaces bookend the site. All footer content sits in the deeper
     portion of the gradient and uses light typography.

     Scoped to `body > footer` so the rule only targets the site-wide page
     footer and never bleeds into <footer> elements nested inside sections
     (e.g. the comparison-card-foot on /for-employers, or any <article>
     footer used elsewhere). */
  body > footer {
    padding: 220px 0 44px;
    border-top: none;
    color: #ffffff;
    background: linear-gradient(
      to bottom,
      #FFFFFF 0%,
      #CBE9FF 5.323%,
      #98D4FF 10.647%,
      #71C4FF 17.608%,
      #4BB4FF 24.569%,
      #3791CD 38.152%,
      #236F9A 51.734%,
      #24476D 71.429%,
      #1A3252 85.715%,
      #0F1D36 100%
    );
  }
  .footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 96px;
    align-items: start;
    padding-bottom: 64px;
  }
  .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 360px;
  }
  .footer-logo {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
  }
  .footer-logo img {
    display: block;
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
  }
  .footer-tagline {
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    max-width: 36ch;
  }

  .footer-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, max-content));
    gap: 56px;
  }
  .footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .footer-col-title {
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--w-semibold);
    line-height: var(--lh-base);
    letter-spacing: 0.04em;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 6px;
  }
  .footer-col a {
    position: relative;
    align-self: flex-start;
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: #ffffff;
    transition: color .25s ease;
  }
  .footer-col a:hover { color: #ffffff; }
  .footer-col a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
    height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .footer-col a:hover::after { transform: scaleX(1); transform-origin: left; }

  .footer-bottom {
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-regular);
    line-height: var(--lh-base);
    color: rgba(255, 255, 255, 0.6);
    flex-wrap: wrap;
  }
  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
  }
  .footer-legal a {
    position: relative;
    color: rgba(255, 255, 255, 0.78);
    transition: color .25s ease;
  }
  .footer-legal a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
    height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .footer-legal a:hover { color: #ffffff; }
  .footer-legal a:hover::after { transform: scaleX(1); transform-origin: left; }
  .footer-copy { color: rgba(255, 255, 255, 0.5); }

  /* Stack the footer (brand above link columns; columns 4→2) well before
     the layout starts to crowd. With 4 link columns next to the brand block
     — and one column containing the long "Freelance Relocation & Integration
     Managers" link — the auto-sized columns track eats most of the row and
     leaves the brand description squeezed to one word per line below ~1180px.
     Switching to the stacked layout at 1180 keeps the brand readable across
     all common laptop widths. */
  @media (max-width: 1180px) {
    body > footer { padding: 160px 0 32px; }
    .footer-top {
      grid-template-columns: 1fr;
      gap: 48px;
      padding-bottom: 48px;
    }
    .footer-cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 36px 24px;
    }
    .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
  }
  @media (max-width: 480px) {
    body > footer { padding: 132px 0 28px; }
    .footer-cols { grid-template-columns: 1fr; gap: 32px; }
  }

  /* ---------- For organizations (B2B) ---------- */
  .b2b { padding: 0; position: relative; }
  .b2b-intro {
    padding: 96px 0 40px;
  }
  .b2b-intro .h2 { max-width: 22ch; }

  .b2b-tabs-wrap {
    position: sticky;
    top: 140px;
    z-index: 30;
    align-self: flex-start;
    pointer-events: none;
    margin-bottom: -56px;
  }
  .b2b-tabs {
    pointer-events: auto;
    display: inline-flex;
    gap: 4px;
    padding: 6px;
    background: #ffffff99;
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border: 1px solid var(--rule-strong);
    border-radius: 12px;
    box-shadow: 0 2px 8px -4px #1814101a;
  }
  .b2b-tab {
    background: transparent;
    border: 1px solid transparent;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
    position: relative;
    cursor: pointer;
    transition: color .3s ease, background-color .3s ease, border-color .3s ease;
    white-space: nowrap;
  }
  .b2b-tab:hover { color: var(--ink); }
  .b2b-tab.is-active {
    color: var(--ink);
    background: var(--paper);
    border-color: var(--rule-strong);
    box-shadow: 0 1px 2px #18141014;
  }

  .b2b-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    padding: 0 0 96px;
  }

  .b2b-content {
    display: flex;
    flex-direction: column;
  }
  .b2b-panel {
    min-height: 80vh;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    max-width: 48ch;
  }
  .b2b-panel h3 {
    font-family: var(--font);
    font-size: var(--text-2xl);
    font-weight: var(--w-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tighter);
    color: var(--ink);
    margin: 0;
  }
  .b2b-panel p {
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    color: var(--ink-2);
    margin: 0;
  }
  .b2b-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-medium);
    letter-spacing: var(--ls-snug);
    color: var(--ink);
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 6px;
    align-self: flex-start;
    transition: color .3s ease, border-color .3s ease;
  }
  .b2b-link .arrow { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .b2b-link:hover { border-color: var(--ink); }
  .b2b-link:hover .arrow { transform: translateX(4px); }

  .b2b-visuals {
    position: sticky;
    top: 140px;
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    overflow: hidden;
    background: var(--paper-2);
    border: 1px solid var(--rule-strong);
  }
  .b2b-visual {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
    background:
      repeating-linear-gradient(135deg, #18141008 0 1px, transparent 1px 14px),
      var(--paper-2);
    color: var(--ink-3);
    font-family: var(--font);
    font-size: var(--text-lg);
    font-weight: var(--w-medium);
    letter-spacing: var(--ls-tight);
  }
  .b2b-visual.is-active {
    opacity: 1;
    transform: scale(1);
  }
  .b2b-visual .placeholder-num {
    font-size: clamp(64px, 10vw, 140px);
    font-weight: var(--w-bold);
    color: var(--ink);
    opacity: 0.08;
    line-height: 1;
    letter-spacing: var(--ls-tightest);
  }

  @media (max-width: 880px) {
    .b2b-intro { padding: 64px 0 32px; }
    .b2b-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 64px; }
    .b2b-visuals {
      position: relative;
      top: auto;
      order: -1;
      aspect-ratio: 4 / 3;
    }
    .b2b-panel { min-height: 0; padding: 48px 0; }
  }

  /* ---------- Services marquee ---------- */
  .services-marquee-section {
    padding: 120px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .services-marquee-intro {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  .services-marquee-intro .eyebrow { justify-content: center; }
  .services-marquee-intro .h2 { margin: 0; }
  .services-marquee-intro .h2-sub { margin: 0 auto; max-width: 56ch; }

  .services-marquee {
    overflow: hidden;
    position: relative;
    padding: 24px 0 56px;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
  .services-marquee.is-dragging { cursor: grabbing; }
  .services-marquee.is-dragging * { cursor: grabbing !important; }
  .services-marquee::before,
  .services-marquee::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 160px;
    z-index: 2;
    pointer-events: none;
  }
  .services-marquee::before {
    left: 0;
    background: linear-gradient(90deg, var(--paper) 0%, #ffffff00 100%);
  }
  .services-marquee::after {
    right: 0;
    background: linear-gradient(270deg, var(--paper) 0%, #ffffff00 100%);
  }
  .services-track {
    display: flex;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
  }
  .services-set {
    display: flex;
    align-items: stretch;
    gap: 24px;
    padding-right: 24px;
    flex-shrink: 0;
  }
  /* Suppress accidental click-through on cards immediately after a drag */
  .services-marquee.was-dragged a,
  .services-marquee.was-dragged button { pointer-events: none; }

  .service-card {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--rule-strong);
    border-radius: 14px;
    background: var(--paper);
    transition:
      transform .35s cubic-bezier(.2,.7,.2,1),
      border-color .35s ease,
      box-shadow .35s ease;
  }
  .service-card > * { margin: 0; }
  .service-card:hover {
    transform: translateY(-3px);
    border-color: var(--ink);
    box-shadow: 0 24px 40px -32px #18141055;
  }
  .service-card .avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 28px;
  }
  .service-card .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .service-card .avatar.avatar--letter {
    font-family: var(--font);
    font-size: 20px;
    font-weight: var(--w-semibold);
    line-height: 1;
    color: var(--ink);
    background: var(--paper-2);
    letter-spacing: var(--ls-tight);
  }
  .service-card .avatar.avatar--icon {
    color: var(--ink);
    background: var(--paper-2);
  }
  .service-card .avatar.avatar--icon svg {
    width: 26px;
    height: 26px;
    display: block;
  }
  .service-card .avatar.avatar--duo {
    width: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    align-self: flex-start;
    padding: 0;
  }
  .service-card .avatar.avatar--duo .duo-tile {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid var(--rule);
    background: var(--paper-2);
    overflow: hidden;
    display: inline-flex;
    flex-shrink: 0;
  }
  .service-card .avatar.avatar--duo .duo-tile:first-child {
    position: relative;
    z-index: 2;
    box-shadow: 2px 0 0 0 var(--paper);
  }
  .service-card .avatar.avatar--duo .duo-tile + .duo-tile {
    margin-left: -14px;
  }
  .service-card .avatar.avatar--duo .duo-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  a.service-card {
    text-decoration: none;
    color: inherit;
    position: relative;
  }
  a.service-card:hover { color: inherit; }
  a.service-card .name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  a.service-card .name::after {
    content: "↗";
    font-size: 14px;
    font-weight: var(--w-medium);
    color: var(--ink-3);
    transition: transform .25s ease, color .25s ease;
  }
  a.service-card:hover .name::after {
    transform: translate(2px, -2px);
    color: var(--ink);
  }
  .service-card .type {
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--w-semibold);
    line-height: var(--lh-base);
    letter-spacing: 0.04em;
    text-transform: uppercase !important;
    color: var(--ink-2);
    margin-bottom: 6px;
  }
  .service-card .name {
    font-family: var(--font);
    font-size: var(--text-lg);
    font-weight: var(--w-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
    margin-bottom: 12px;
  }
  .service-card .desc {
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    color: var(--ink-3);
  }
  .service-card.is-placeholder {
    background: var(--paper-2);
    border-style: dashed;
  }
  .service-card.is-placeholder .type { color: var(--ink-3); }
  .service-card.is-placeholder .name { color: var(--ink-2); }
  .service-card.is-placeholder:hover { border-color: var(--ink-3); }
  .service-card.is-placeholder .avatar {
    background: var(--paper-3);
    border-style: dashed;
    color: var(--ink-3);
    font-family: var(--font);
    font-size: var(--text-xl);
    font-weight: var(--w-medium);
    line-height: 1;
  }

  @media (max-width: 900px) {
    .services-marquee::before,
    .services-marquee::after { width: 100px; }
  }
  @media (max-width: 720px) {
    .services-marquee-section { padding: 72px 0; }
    .services-marquee-intro { margin-bottom: 48px; }
    .services-marquee::before,
    .services-marquee::after { width: 80px; }
    .service-card { width: 280px; padding: 22px; }
    .services-set { gap: 16px; padding-right: 16px; }
  }

  /* ---------- About / Team ---------- */
  .team-section { padding: 120px 0; }
  .team-intro {
    max-width: 720px;
    margin: 0 0 72px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .team-intro .h2 { margin: 0; }
  .team-intro .h2-sub { margin: 0; max-width: 56ch; }

  /* ---------- Team grid (4-up cards, mirrors the Relume Team 4 pattern) ---------- */
  .team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    column-gap: 32px;
    row-gap: 64px;
  }
  .team-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .team-photo {
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background:
      repeating-linear-gradient(135deg, #18141008 0 1px, transparent 1px 14px),
      var(--paper-2);
    border: 1px solid var(--rule-strong);
    position: relative;
    margin-bottom: 24px;
  }
  .team-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    display: block;
  }

  .team-content {
    display: flex;
    flex-direction: column;
  }
  .team-meta {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
  }
  .team-identity {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .team-name {
    font-family: var(--font);
    font-size: var(--text-lg);
    font-weight: var(--w-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
    margin: 0;
  }
  .team-role {
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: 0.04em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin: 0;
  }
  .team-bio {
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
    margin: 16px 0 0;
  }
  .team-social {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
  .team-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-2);
    transition: color .2s ease, transform .2s ease;
  }
  .team-social a:hover {
    color: var(--ink);
    transform: translateY(-1px);
  }
  .team-social svg { width: 22px; height: 22px; display: block; }

  /* Tablet — 2 columns. */
  @media (max-width: 1023px) {
    .team-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 32px;
      row-gap: 56px;
    }
  }

  /* Mobile — single column, capped photo width to keep the squares from
     dominating the viewport. */
  @media (max-width: 640px) {
    .team-section { padding: 72px 0; }
    .team-intro { margin-bottom: 48px; }
    .team-grid {
      grid-template-columns: 1fr;
      row-gap: 48px;
    }
    .team-photo {
      max-width: 360px;
    }
    .team-name { font-size: var(--text-md); }
  }

  /* ---------- Features (sticky-image scroll) ---------- */
  .features-section { padding: 120px 0; }
  .features-intro {
    max-width: 720px;
    margin: 0 auto 96px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  .features-intro .eyebrow { justify-content: center; }
  .features-intro .h2 { margin: 0; }
  .features-intro .h2-sub { margin: 0 auto; max-width: 56ch; }

  .features-grid {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 360px) 1fr;
    grid-template-rows: repeat(5, auto);
    column-gap: 80px;
    row-gap: 0;
    align-items: stretch;
    position: relative;
  }

  .features-panel {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    max-width: 44ch;
  }
  .features-panel h3 {
    font-family: var(--font);
    font-size: var(--text-2xl);
    font-weight: var(--w-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tighter);
    color: var(--ink);
    margin: 0;
  }
  .features-panel p {
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    color: var(--ink-2);
    margin: 0;
  }

  .features-panel.is-left  { grid-column: 1; justify-self: end;   }
  .features-panel.is-right { grid-column: 3; justify-self: start; }
  .features-panel.row-1 { grid-row: 1; }
  .features-panel.row-2 { grid-row: 2; }
  .features-panel.row-3 { grid-row: 3; }
  .features-panel.row-4 { grid-row: 4; }
  .features-panel.row-5 { grid-row: 5; }

  .features-panel {
    opacity: 0;
    transform: translateY(32px);
    transition:
      opacity 1.1s cubic-bezier(.2,.7,.2,1),
      transform 1.1s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
  }
  .features-panel.is-revealed {
    opacity: 1;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .features-panel { opacity: 1; transform: none; transition: none; }
  }

  .features-visuals {
    grid-column: 2;
    grid-row: 1 / span 5;
    position: relative;
  }
  .features-visuals-inner {
    /* Vertically centers in the viewport when possible, but never higher than 100px
       (so it can't slide above its grid cell and overlap the intro). */
    position: sticky;
    top: max(100px, calc((100vh - 640px) / 2));
    aspect-ratio: 9 / 16;
  }
  .features-visual {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  }
  .features-visual.is-active {
    opacity: 1;
    transform: scale(1);
  }
  .features-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Tablet & mobile: pair each feature with its own mockup. The desktop
     layout uses a single sticky phone in the middle column that cross-fades
     as you scroll past each panel; below this breakpoint sticky positioning
     starts fighting the narrow column, so we flatten the visuals wrapper
     (`display: contents`) and interleave each `.features-visual` with its
     corresponding `.features-panel` in a single-column grid. All five
     mockups are visible, each one sits directly above its feature text,
     and the text is centred for a calm vertical rhythm. */
  @media (max-width: 980px) {
    .features-section { padding: 72px 0; }
    .features-intro { margin-bottom: 48px; }

    .features-grid {
      grid-template-columns: 1fr;
      column-gap: 0;
      row-gap: 0;
    }

    /* Let each .features-visual become a direct child of .features-grid so
       we can place it in its own row right above its panel. */
    .features-visuals,
    .features-visuals-inner {
      display: contents;
    }

    .features-visual {
      position: relative;
      inset: auto;
      grid-column: 1;
      justify-self: center;
      width: 100%;
      max-width: clamp(280px, 75vw, 360px);
      aspect-ratio: 9 / 16;
      margin: 0 auto;
      opacity: 1;
      transform: none;
      transition: opacity .6s cubic-bezier(.2,.7,.2,1),
                  transform .6s cubic-bezier(.2,.7,.2,1);
    }
    .features-visual img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* Interleave visuals (odd rows) and panels (even rows). */
    .features-visual[data-for="feat-1"] { grid-row: 1; }
    .features-visual[data-for="feat-2"] { grid-row: 3; }
    .features-visual[data-for="feat-3"] { grid-row: 5; }
    .features-visual[data-for="feat-4"] { grid-row: 7; }
    .features-visual[data-for="feat-5"] { grid-row: 9; }

    .features-panel,
    .features-panel.is-left,
    .features-panel.is-right {
      grid-column: 1;
      justify-self: center;
      align-items: center;
      text-align: center;
      max-width: 56ch;
      margin: 0 auto;
      min-height: 0;
      padding: 24px 0 64px;
    }
    .features-panel.row-1 { grid-row: 2; }
    .features-panel.row-2 { grid-row: 4; }
    .features-panel.row-3 { grid-row: 6; }
    .features-panel.row-4 { grid-row: 8; }
    .features-panel.row-5 { grid-row: 10; }

    .features-panel .eyebrow { justify-content: center; }
  }

  /* ---------- Story (pinned scroll-reveal) ---------- */
  .story-section {
    padding: 0;
    background: transparent;
    position: relative;
  }
  .story-scroll {
    position: relative;
    height: 320vh;
  }
  .story-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden;
  }
  .story-parallax {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  .story-parallax-item {
    position: absolute;
    top: 50%;
    width: clamp(195px, 19.5vw, 300px);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 12px;
    transform: translateY(calc(-50% + var(--py, 0px)));
    will-change: transform;
  }
  .story-parallax-left  { left: var(--inset, 2vw); }
  .story-parallax-right { right: var(--inset, 2vw); }
  .story .wrap,
  .story-pin > .wrap {
    position: relative;
    z-index: 1;
  }
  .story {
    max-width: 920px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
  }
  .story-paragraph {
    font-family: var(--font);
    font-size: var(--text-2xl);
    font-weight: var(--w-semibold);
    line-height: 1.4;
    letter-spacing: var(--ls-tighter);
    color: var(--ink);
    margin: 0 0 32px;
  }
  .story-paragraph:last-child { margin-bottom: 0; }
  .story-paragraph-final { margin-top: 64px; }
  .story-line {
    display: block;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    will-change: opacity;
  }
  .story-line.is-revealed { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .story-scroll { height: auto; }
    .story-pin {
      position: relative;
      height: auto;
      padding: 96px 0;
    }
    .story-line { opacity: 1; transition: none; }
  }
  @media (max-width: 900px) {
    .story-scroll { height: 240vh; }
  }
  @media (max-width: 720px) {
    .story-scroll { height: 240vh; }
    .story-paragraph { margin-bottom: 24px; }
    .story-paragraph-final { margin-top: 40px; }
  }

  /* ---------- Real stories (testimonials carousel) ---------- */
  .stories-section { padding: 120px 0; }
  .stories-intro {
    max-width: 720px;
    margin: 0 auto 64px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  .stories-intro .eyebrow { justify-content: center; }
  .stories-intro .h2 { margin: 0; }
  .stories-intro .h2-sub { margin: 0 auto; max-width: 56ch; }

  .stories-carousel {
    width: 100%;
  }
  .stories-stage {
    display: grid;
    position: relative;
  }
  .stories-slide {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 64px;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity .55s cubic-bezier(.2,.7,.2,1),
      visibility 0s linear .55s;
  }
  .stories-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition:
      opacity .55s cubic-bezier(.2,.7,.2,1),
      visibility 0s linear 0s;
    z-index: 2;
  }

  .stories-media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--rule-strong);
    background: var(--paper-2);
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
  }
  .stories-media[data-tone="indigo"] {
    background:
      radial-gradient(120% 90% at 20% 0%, var(--brand-primary-50) 0%, transparent 60%),
      linear-gradient(150deg, var(--brand-primary-100), var(--brand-primary-400));
  }
  .stories-media[data-tone="teal"] {
    background:
      radial-gradient(120% 90% at 20% 0%, var(--brand-secondary-50) 0%, transparent 60%),
      linear-gradient(150deg, var(--brand-secondary-100), var(--brand-secondary-500));
  }
  .stories-media[data-tone="ink"] {
    background:
      radial-gradient(120% 90% at 20% 0%, var(--paper-2) 0%, transparent 60%),
      linear-gradient(150deg, var(--paper-3), var(--ink-3));
  }
  .stories-media[data-tone="paper"] {
    background:
      radial-gradient(120% 90% at 20% 0%, var(--paper) 0%, transparent 60%),
      linear-gradient(150deg, var(--paper-2), var(--paper-3));
  }
  .stories-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(135deg, #18141008 0 1px, transparent 1px 16px);
    pointer-events: none;
    z-index: 1;
  }
  .stories-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 2;
  }
  .stories-monogram {
    position: relative;
    z-index: 1;
    font-family: var(--font);
    font-size: clamp(96px, 16vw, 220px);
    font-weight: var(--w-bold);
    letter-spacing: var(--ls-tightest);
    line-height: 1;
    color: #ffffff;
    opacity: .5;
    user-select: none;
    text-shadow: 0 4px 30px #18141022;
  }

  .stories-body {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 8px 0;
  }
  .stories-quote {
    font-family: var(--font);
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: var(--w-medium);
    line-height: 1.35;
    letter-spacing: var(--ls-tight);
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
  }
  .stories-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
  }
  .stories-name {
    font-family: var(--font);
    font-size: var(--text-lg);
    font-weight: var(--w-semibold);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
    margin: 0;
  }
  .stories-role {
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-regular);
    color: var(--ink-3);
    margin: 0;
  }

  .stories-controls {
    margin-top: 36px;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 64px;
    align-items: start;
  }
  .stories-dots {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-self: start;
  }
  .stories-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    background: var(--rule-strong);
    padding: 0;
    cursor: pointer;
    transition:
      background .3s ease,
      width .35s cubic-bezier(.2,.7,.2,1);
  }
  .stories-dot:hover { background: var(--ink-3); }
  .stories-dot.is-active {
    background: var(--ink);
    width: 28px;
  }
  .stories-arrows {
    display: inline-flex;
    gap: 12px;
    justify-self: end;
  }
  .stories-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--rule-strong);
    background: var(--paper);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      background .3s ease,
      border-color .3s ease,
      color .3s ease,
      transform .25s cubic-bezier(.2,.7,.2,1);
  }
  .stories-arrow:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  .stories-arrow:active { transform: scale(.96); }
  .stories-arrow svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  @media (max-width: 880px) {
    .stories-section { padding: 72px 0; }
    .stories-intro { margin-bottom: 40px; }
    .stories-slide {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    /* Keep dots + arrows on a single row at narrow widths so the
       `align-items: start` from the base rule keeps their top edges
       aligned; just tighten the gap. */
    .stories-controls {
      gap: 20px;
      margin-top: 28px;
    }
    .stories-arrows { justify-self: end; }
    .stories-quote { font-size: clamp(20px, 5vw, 26px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .stories-slide { transition: opacity 0s, visibility 0s; }
  }

  /* tiny reveal animation on load */
  .reveal { opacity: 0; transform: translateY(14px); animation: reveal .9s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes reveal { to { opacity: 1; transform: none; } }

  /* staggered hero */
  .hero .reveal-1 { animation-delay: .05s; }
  .hero .reveal-2 { animation-delay: .25s; }
  .hero .reveal-3 { animation-delay: .45s; }
  .hero .reveal-4 { animation-delay: .65s; }
  .hero .reveal-5 { animation-delay: .85s; }
  .hero .reveal-6 { animation-delay: 1.05s; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; opacity: 1; transform: none; }
    .ai-tag .pulse { animation: none; }
    .typing i { animation: none; }
  }

  /* ============================================================
     HERO ORBIT
     Avatars of international workers (candidates) orbit slowly
     behind the phone. On hover, each avatar expands into a pill
     showing the candidate's name and job title.
     ============================================================ */

  .orbit-scene {
    position: relative;
    display: inline-block;
    isolation: isolate;
  }
  .orbit-scene .pf-stage {
    position: relative;
    z-index: 2;
  }

  /* Three concentric solid circles (the "orbit" tracks).
     All three use the same standard border colour for a calm,
     uniform look — the depth comes from spacing, not colour. */
  .orbit-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 800px;
    height: 800px;
    margin: -400px 0 0 -400px;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
  }
  .orbit-ring circle {
    fill: none;
    stroke: var(--paper);
    stroke-width: 1;
    opacity: .3;
  }

  /* Container holding all avatar slots (centered on phone) */
  .orbit-people {
    position: absolute;
    top: 50%; left: 50%;
    width: 800px;
    height: 800px;
    margin: -400px 0 0 -400px;
    pointer-events: none;
    z-index: 1;
  }

  /* Shared orbit slot — path & speed come from the ring,
     so two avatars on the same orbit move in lockstep and
     never overtake each other. Per-avatar offset only. */
  .orbit-slot {
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    offset-rotate: 0deg;
    offset-anchor: 50% 50%;
    offset-distance: 0%;
    pointer-events: auto;
    will-change: offset-distance;
    animation-name: orbit-travel;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: var(--orbit-delay, 0s);
  }
  /* Outer orbit — r=380, slowest, clockwise */
  .orbit-slot[data-ring="outer"] {
    offset-path: path('M 400,20 A 380,380 0 1,1 400,780 A 380,380 0 1,1 400,20');
    animation-duration: 60s;
  }
  /* Middle orbit — r=300, medium, counter-clockwise */
  .orbit-slot[data-ring="middle"] {
    offset-path: path('M 400,100 A 300,300 0 1,0 400,700 A 300,300 0 1,0 400,100');
    animation-duration: 44s;
  }
  /* Inner orbit — r=220, fastest, clockwise */
  .orbit-slot[data-ring="inner"] {
    offset-path: path('M 400,180 A 220,220 0 1,1 400,620 A 220,220 0 1,1 400,180');
    animation-duration: 30s;
  }
  @keyframes orbit-travel {
    to { offset-distance: 100%; }
  }

  /* Pause every avatar when any one of them is hovered/focused,
     so the user can read the expanded label without it sliding away. */
  .orbit-people:has(.orbit-pill:hover) .orbit-slot,
  .orbit-people:has(.orbit-pill:focus-visible) .orbit-slot {
    animation-play-state: paused;
  }

  /* The avatar pill itself.
     Collapsed state has zero padding so the avatar fills the
     pill edge-to-edge — the pill's white background is only
     visible on hover, when it expands to reveal the text. */
  .orbit-pill {
    appearance: none;
    -webkit-appearance: none;
    background: var(--paper);
    border: 1px solid rgba(20, 16, 12, 0.08);
    box-shadow:
      0 8px 22px -10px rgba(20, 16, 12, 0.18),
      0 2px 6px -2px rgba(20, 16, 12, 0.12);
    border-radius: 999px;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    color: var(--ink);
    font-family: var(--font);
    transform: translate(-50%, -50%);
    transition: gap .28s cubic-bezier(.2,.7,.2,1),
                padding .28s cubic-bezier(.2,.7,.2,1),
                box-shadow .28s ease,
                border-color .28s ease,
                transform .28s ease;
  }
  .orbit-pill:hover,
  .orbit-pill:focus-visible {
    gap: 10px;
    padding: 2px 16px 2px 2px;
    border-color: rgba(20, 16, 12, 0.14);
    box-shadow:
      0 14px 32px -12px rgba(20, 16, 12, 0.28),
      0 4px 10px -4px rgba(20, 16, 12, 0.18);
    outline: none;
  }
  .orbit-pill:focus-visible {
    border-color: var(--accent);
  }

  .orbit-pill-avatar {
    flex: none;
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--paper-2);
  }
  .orbit-pill-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
  }

  .orbit-pill-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    transition: max-width .38s cubic-bezier(.2,.7,.2,1),
                opacity .26s ease;
  }
  .orbit-pill-text > span {
    display: block;
    line-height: 1.2;
    text-align: left;
  }
  .orbit-pill-name {
    font-size: var(--text-sm);
    font-weight: var(--w-medium);
    color: var(--ink);
  }
  .orbit-pill-role {
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--ink-3);
  }
  .orbit-pill:hover .orbit-pill-text,
  .orbit-pill:focus-visible .orbit-pill-text {
    max-width: 240px;
    opacity: 1;
  }

  /* Scale orbit on smaller viewports so it stays inside
     the column on mid-size desktops and the section bounds
     on mobile. */
  @media (max-width: 1100px) {
    .orbit-ring,
    .orbit-people {
      transform: translate(-50%, -50%) scale(.9);
      top: 50%; left: 50%;
      margin: 0;
    }
  }
  @media (max-width: 1000px) {
    .orbit-ring,
    .orbit-people {
      transform: translate(-50%, -50%) scale(.82);
    }
  }
  @media (max-width: 880px) {
    .orbit-ring,
    .orbit-people {
      transform: translate(-50%, -50%) scale(.88);
    }
    .orbit-scene::before { width: 520px; height: 520px; }
  }
  @media (max-width: 600px) {
    .orbit-ring,
    .orbit-people {
      transform: translate(-50%, -50%) scale(.8);
    }
  }
  @media (max-width: 480px) {
    .orbit-ring,
    .orbit-people {
      transform: translate(-50%, -50%) scale(.72);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .orbit-slot { animation: none; }
    .orbit-pill { transition: none; }
  }

  /* ============================================================
     HERO PHONE FLOW
     A 5-screen looping animation rendered in a CSS phone frame.
     Recreates Figma screens 1:1 (360px-wide screens) then scales
     to fit the hero column.
     ============================================================ */

  /* ---- Stage / phone frame ---- */
  .pf-stage {
    --pf-screen-w: 360px;
    --pf-screen-h: 720px;
    --pf-bezel: 12px;
    --pf-radius: 48px;

    position: relative;
    width: calc(var(--pf-screen-w) + var(--pf-bezel) * 2);
    margin: 0 auto;
    transform-origin: center;
    /* Scale the whole phone down so 384px native fits in the hero column */
    transform: scale(.78);
  }
  @media (max-width: 1100px) {
    .pf-stage { transform: scale(.7); }
  }
  @media (max-width: 880px) {
    .pf-stage { transform: scale(.65); }
  }
  @media (max-width: 600px) {
    .pf-stage { transform: scale(.6); }
  }
  @media (max-width: 480px) {
    .pf-stage { transform: scale(.55); }
  }

  .pf-phone {
    position: relative;
    width: 100%;
    padding: var(--pf-bezel);
    border-radius: var(--pf-radius);
    background: linear-gradient(165deg, #1a1a1d 0%, #2a2a2e 50%, #1a1a1d 100%);
    box-shadow:
      0 0 0 1.5px #3a3a3e,
      0 1px 0 1.5px #5a5a5e inset,
      0 30px 60px -20px rgba(10,13,18,.45),
      0 12px 28px -10px rgba(10,13,18,.25);
  }
  /* Side buttons */
  .pf-phone::before,
  .pf-phone::after {
    content: "";
    position: absolute;
    background: #1a1a1d;
    border-radius: 2px;
  }
  .pf-phone::before { /* power button right */
    right: -2px; top: 130px;
    width: 3px; height: 64px;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  }
  .pf-phone::after { /* volume button left */
    left: -2px; top: 110px;
    width: 3px; height: 92px;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  }

  .pf-screen {
    position: relative;
    width: var(--pf-screen-w);
    height: var(--pf-screen-h);
    border-radius: calc(var(--pf-radius) - var(--pf-bezel));
    overflow: hidden;
    background: #fff;
    isolation: isolate;
  }

  /* Phone-scoped design tokens (mirrors Figma vars) */
  .pf-screen, .pf-s {
    --pf-white: #fff;
    --pf-bg-0: #fff;
    --pf-bg-50: #f6f6f6;
    --pf-bg-muted: #f7f8f7;
    --pf-bg-800: #414040;
    --pf-bg-dark: #181719;
    --pf-border-100: #e6e6e6;
    --pf-border-200: #dddcdb;
    --pf-border-300: #d3d3d3;
    --pf-text-950: #171717;
    --pf-text-900: #262627;
    --pf-text-800: #404040;
    --pf-text-700: #525252;
    --pf-text-600: #737373;
    --pf-text-500: #8c8c8c;
    --pf-text-400: #a3a3a3;
    --pf-text-0:   #fefeff;
    --pf-brand:    #2b3b99;
    --pf-success-bg:     #edfcf2;
    --pf-success-text:   #166534;
    --pf-success-border: #66b584;
    --pf-info-bg:        #ebf8fe;
    --pf-info-text:      #075a83;
    --pf-info-border:    #57c2f6;
    --pf-shadow-card: 0 1px 2px 0 rgba(10,13,18,.05);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
    letter-spacing: -0.02em;
    -webkit-font-smoothing: antialiased;
  }
  /* Override the global "no italics" guardrail inside the phone — not needed, but safe */
  .pf-screen *, .pf-screen *::before, .pf-screen *::after { font-style: normal !important; }

  /* ---- Screen base + transitions ---- */
  .pf-s {
    position: absolute; inset: 0;
    background: var(--pf-bg-0);
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
    will-change: opacity, transform;
  }
  .pf-s.is-active { opacity: 1; pointer-events: auto; }
  /* Fade in/out are implemented as animations (not transitions) because the
     incoming/outgoing screens often have a previous animation with `forwards`
     that holds their opacity. Browsers do NOT trigger a transition from an
     animation-held value, so we use animations on both sides for reliability. */
  .pf-s.is-fade-in       { animation: pfFadeIn .55s cubic-bezier(.4,0,.2,1) forwards; }
  .pf-s.is-fade-in-slow  { animation: pfFadeIn 1s   cubic-bezier(.4,0,.2,1) forwards; }
  .pf-s.is-fade-out      { animation: pfFadeOut .55s cubic-bezier(.4,0,.2,1) forwards; }
  .pf-s.is-fade-out-slow { animation: pfFadeOut 1.1s cubic-bezier(.4,0,.2,1) forwards; }
  .pf-s.is-slide-in-r    { animation: pfSlideInRight .5s cubic-bezier(.4,0,.2,1) forwards; }
  .pf-s.is-slide-out-l   { animation: pfSlideOutLeft .5s cubic-bezier(.4,0,.2,1) forwards; }

  @keyframes pfFadeIn  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pfFadeOut { from { opacity: 1; } to { opacity: 0; } }
  @keyframes pfSlideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes pfSlideOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-40px); }
  }

  /* ---- Tap ripple (feedback when a button is "tapped") ----
     Designed to read on top of light AND dark backgrounds: a bright translucent
     fill with a high-contrast brand ring and a soft drop shadow. */
  .pf-tap {
    position: absolute;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    border: 2px solid rgba(43,59,153,.95);
    box-shadow:
      0 0 0 2px rgba(255,255,255,.35),
      0 6px 18px rgba(0,0,0,.28);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.4);
    opacity: 0;
  }
  .pf-tap.is-on { animation: pfTap .65s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes pfTap {
    0%   { opacity: 1;  transform: translate(-50%, -50%) scale(.4); }
    50%  { opacity: .95; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0;  transform: translate(-50%, -50%) scale(2.6); }
  }

  /* ---- Swipe gesture (finger-drag indicator for chat scroll) ----
     Same visual language as the tap ripple: a bright translucent dot with a
     contrasting ring and shadow, traveling from low on the screen up to high
     on the screen — synced with the auto-scroll on the chat screen. */
  .pf-swipe {
    position: absolute;
    left: 50%;
    top: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    border: 2px solid rgba(43,59,153,.95);
    box-shadow:
      0 0 0 2px rgba(255,255,255,.35),
      0 6px 18px rgba(0,0,0,.28);
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transform: translate(-50%, 540px) scale(.6);
  }
  .pf-swipe.is-on {
    animation: pfSwipe 1.6s cubic-bezier(.55,.05,.4,1) forwards;
  }
  @keyframes pfSwipe {
    0%   { opacity: 0; transform: translate(-50%, 540px) scale(.6); }
    12%  { opacity: 1; transform: translate(-50%, 520px) scale(1); }
    88%  { opacity: 1; transform: translate(-50%, 180px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, 160px) scale(.6); }
  }

  /* ---- Common element rules used across screens ---- */
  .pf-screen p { margin: 0; }
  .pf-icon { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; }
  .pf-icon svg { width: 100%; height: 100%; display: block; }

  /* Scrollable content area for screen 2 (chat) */
  .pf-scrollarea {
    position: absolute; inset: 0;
    overflow: hidden;
  }
  .pf-scrollarea-inner {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    transition: transform 1.6s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }

  /* ============= STAGGERED ELEMENT REVEAL (screen 1) ============= */
  .pf-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
  }
  .pf-s.is-active .pf-reveal { opacity: 1; transform: none; }
  .pf-s.is-active .pf-reveal[data-d="1"] { transition-delay: .05s; }
  .pf-s.is-active .pf-reveal[data-d="2"] { transition-delay: .15s; }
  .pf-s.is-active .pf-reveal[data-d="3"] { transition-delay: .25s; }
  .pf-s.is-active .pf-reveal[data-d="4"] { transition-delay: .35s; }
  .pf-s.is-active .pf-reveal[data-d="5"] { transition-delay: .45s; }
  .pf-s.is-active .pf-reveal[data-d="6"] { transition-delay: .55s; }
  .pf-s.is-active .pf-reveal[data-d="7"] { transition-delay: .65s; }
  .pf-s.is-active .pf-reveal[data-d="8"] { transition-delay: .75s; }

  /* ============= SCREEN 1 — HOME ============= */
  .pf-home { background: #fff; }
  /* "Arriving to Germany in" badge */
  .pf-home-arriving {
    position: absolute;
    top: 16px; right: 16px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px;
    background: var(--pf-info-bg);
    border-radius: 9999px;
    font-size: 12px; line-height: 1; letter-spacing: -0.02em;
  }
  .pf-home-arriving .pf-arriving-pre { color: rgba(7,90,131,.6); font-weight: 400; }
  .pf-home-arriving .pf-arriving-time {
    display: inline-flex; align-items: center; gap: 2px;
    color: var(--pf-info-text); font-weight: 600;
  }
  .pf-home-arriving .pf-arriving-time svg { width: 12px; height: 12px; }

  /* Header (mascot + greeting) */
  .pf-home-header {
    position: absolute; left: 0; right: 0; top: 100px;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 16px 16px 24px;
  }
  .pf-home-mascot { width: 43px; height: 40px; }
  .pf-home-greeting { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
  .pf-home-hello {
    font-size: 24px; font-weight: 700; line-height: 1;
    letter-spacing: -0.5px; color: var(--pf-text-900);
  }
  .pf-home-sub {
    font-size: 16px; font-weight: 400; line-height: 1.5;
    letter-spacing: -0.32px; color: var(--pf-text-500); text-align: center;
  }

  /* Service cards */
  .pf-home-services {
    position: absolute; left: 0; right: 0; top: 257px;
    display: flex; flex-direction: column; gap: 12px;
    padding: 0 16px 24px;
  }
  .pf-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--pf-border-100);
    border-radius: 18px;
    box-shadow: var(--pf-shadow-card), inset 0 -2px 0 0 rgba(10,13,18,.05);
  }
  .pf-card-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    flex-shrink: 0; overflow: hidden;
    background: #f3f3f3;
  }
  .pf-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .pf-card-avatar-group {
    display: flex; align-items: center;
    flex-shrink: 0;
  }
  .pf-card-avatar-group .pf-card-avatar { position: relative; }
  .pf-card-avatar-group .pf-card-avatar--stacked {
    margin-left: -9px;
    box-shadow: 0 0 0 1.3px #fff;
  }
  .pf-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .pf-card-title {
    font-size: 14px; font-weight: 500; line-height: 1;
    letter-spacing: -0.28px; color: var(--pf-text-950);
  }
  .pf-card-sub {
    font-size: 12px; font-weight: 400; line-height: 1;
    letter-spacing: -0.24px; color: var(--pf-text-500);
  }
  .pf-card-chev { width: 18px; height: 18px; color: var(--pf-text-500); flex-shrink: 0; }
  .pf-card-chev svg { width: 100%; height: 100%; }

  /* bunq colored bars logo */
  .pf-bunq {
    width: 36px; height: 36px; border-radius: 50%;
    overflow: hidden; flex-shrink: 0;
    display: grid; grid-template-columns: repeat(6, 1fr);
    position: relative;
  }
  .pf-bunq i { display: block; }
  .pf-bunq i:nth-child(1) { background: #61b74f; }
  .pf-bunq i:nth-child(2) { background: #3cb8ac; }
  .pf-bunq i:nth-child(3) { background: #2772bc; }
  .pf-bunq i:nth-child(4) { background: #9a3333; }
  .pf-bunq i:nth-child(5) { background: #f28826; }
  .pf-bunq i:nth-child(6) { background: #f5c837; }
  .pf-bunq::after {
    content: "b";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: Georgia, serif;
    font-weight: 700; font-size: 22px; color: #fff;
    line-height: 1; padding-bottom: 2px;
  }

  /* Action buttons under cards */
  .pf-home-buttons {
    display: flex; gap: 12px;
    margin-top: 8px;
  }
  .pf-btn {
    flex: 1; height: 36px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--pf-border-100);
    border-radius: 8px;
    font-size: 14px; font-weight: 500; line-height: 1;
    letter-spacing: -0.28px; color: var(--pf-text-800);
    box-shadow: var(--pf-shadow-card), inset 0 -2px 0 0 rgba(10,13,18,.04);
  }
  .pf-btn--glow {
    border-color: #e0c3fc;
    box-shadow:
      0 0 6px 0 rgba(0,68,255,.4),
      0 1px 2px 0 rgba(10,13,18,.05),
      inset 0 -2px 0 0 rgba(10,13,18,.04);
  }
  .pf-btn .pf-btn-ic { width: 16px; height: 16px; }
  .pf-btn .pf-btn-ic svg { width: 100%; height: 100%; }

  /* Bottom nav */
  .pf-navbar-wrap {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: center;
    padding: 16px 16px 24px;
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,.01);
  }
  .pf-navbar {
    flex: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 16px;
    background: #fff;
    border: 1px solid var(--pf-border-100);
    border-radius: 9999px;
    box-shadow: var(--pf-shadow-card), inset 0 -2px 0 0 rgba(10,13,18,.05);
  }
  .pf-navbar-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px;
    border-radius: 6px;
    background: #fff;
  }
  .pf-navbar-item .pf-icon { width: 24px; height: 24px; color: var(--pf-text-500); }
  .pf-navbar-item span {
    font-size: 12px; font-weight: 500; line-height: 1;
    letter-spacing: -0.24px; color: var(--pf-text-500);
  }
  .pf-navbar-item.is-active .pf-icon,
  .pf-navbar-item.is-active span { color: var(--pf-text-800); }
  .pf-navbar-chat {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pf-brand);
    border-radius: 9999px;
    box-shadow: 0 1px 2px 0 rgba(10,13,18,.2),
                inset 0 -2px 0 0 rgba(10,13,18,.1);
    border: 1px solid rgba(255,255,255,.2);
  }
  .pf-navbar-chat .pf-icon { width: 24px; height: 24px; color: #fff; }

  /* ============= SCREEN 2 — DAK INTRO (chat-like, scrollable) ============= */
  .pf-chat { background: #fff; }
  .pf-chat-header {
    position: absolute; top: 35px; left: 0; right: 0;
    display: flex; align-items: center;
    padding: 16px;
    background: #fff;
    border-bottom: 1px solid var(--pf-border-100);
    z-index: 5;
  }
  .pf-chat-header-title {
    flex: 1; min-width: 0;
    font-size: 16px; font-weight: 700; line-height: 1;
    letter-spacing: -0.5px; color: var(--pf-text-900);
  }
  .pf-chat-header-x { width: 24px; height: 24px; color: var(--pf-text-900); }
  .pf-chat-header-x svg { width: 100%; height: 100%; }

  .pf-chat-scroll {
    position: absolute;
    top: 95px; /* below header (35 + ~60 padding) */
    left: 0; right: 0;
    bottom: 90px; /* above input bar */
    overflow: hidden;
  }
  .pf-chat-scroll-inner {
    position: absolute; left: 0; top: 0; right: 0;
    padding: 24px 16px 40px;
    display: flex; flex-direction: column; gap: 32px;
    transition: transform 1.6s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }

  .pf-chat-banner {
    width: 100%; height: 184px;
    border-radius: 24px;
    overflow: hidden;
    background: #2bbcd1;
  }
  .pf-chat-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .pf-chat-h1 {
    font-size: 24px; font-weight: 700; line-height: 1;
    letter-spacing: -0.5px; color: var(--pf-text-900);
  }
  .pf-chat-h2 {
    font-size: 18px; font-weight: 700; line-height: 1;
    letter-spacing: -0.5px; color: var(--pf-text-900);
  }
  .pf-chat-body-text {
    font-size: 16px; font-weight: 400; line-height: 1.5;
    letter-spacing: -0.32px; color: var(--pf-text-900);
  }

  .pf-chat-cards {
    display: flex; gap: 12px;
    overflow: hidden;
  }
  .pf-chat-cards .pf-deal-card {
    flex: 0 0 auto; width: 200px;
    background: #fff;
    border: 1px solid var(--pf-border-100);
    border-radius: 18px;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .pf-deal-card-img {
    width: 100%; height: 100px; background: #ddd;
    overflow: hidden;
  }
  .pf-deal-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pf-deal-card-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
  .pf-deal-card-title {
    font-size: 14px; font-weight: 500; line-height: 1;
    letter-spacing: -0.28px; color: var(--pf-text-950);
  }
  .pf-deal-card-text {
    font-size: 12px; font-weight: 400; line-height: 1.5;
    letter-spacing: -0.24px; color: var(--pf-text-500);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pf-benefit-list { display: flex; flex-direction: column; gap: 16px; }
  .pf-benefit { display: flex; gap: 8px; }
  .pf-benefit-ic {
    width: 24px; height: 24px; flex-shrink: 0; color: var(--pf-text-900);
  }
  .pf-benefit-ic svg { width: 100%; height: 100%; }
  .pf-benefit-text { display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .pf-benefit-title {
    font-size: 16px; font-weight: 600; line-height: 1.2;
    letter-spacing: -0.32px; color: var(--pf-text-900);
  }
  .pf-benefit-body {
    font-size: 14px; font-weight: 400; line-height: 1.5;
    letter-spacing: -0.28px; color: var(--pf-text-900);
  }

  .pf-legal-btn {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 16px;
    background: #fff;
    border: 1px solid var(--pf-border-100);
    border-radius: 8px;
    font-size: 14px; font-weight: 500; letter-spacing: -0.28px;
    color: var(--pf-text-800);
  }
  .pf-legal-btn .pf-icon { width: 16px; height: 16px; }

  .pf-chat-cta {
    align-self: flex-start;
    display: inline-flex; align-items: center; justify-content: center;
    height: 36px; padding: 0 16px;
    background: var(--pf-brand);
    color: #fff;
    border-radius: 8px;
    font-size: 14px; font-weight: 500; letter-spacing: -0.28px;
    box-shadow: 0 8px 18px -8px rgba(43,59,153,.6);
  }

  .pf-chat-input-wrap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0 16px 24px;
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,.01);
  }
  .pf-chat-input {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 8px 8px 12px;
    background: #fff;
    border: 1px solid var(--pf-border-200);
    border-radius: 9999px;
  }
  .pf-chat-input .pf-spark { width: 20px; height: 20px; color: var(--pf-brand); }
  .pf-chat-input-field {
    flex: 1; min-width: 0; padding: 6px 0;
    font-size: 16px; line-height: 1.5;
    color: var(--pf-text-400); letter-spacing: -0.32px;
  }
  .pf-chat-send {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pf-brand);
    border-radius: 50%;
    opacity: .4;
    color: #fff;
  }
  .pf-chat-send .pf-icon { width: 18px; height: 18px; }

  /* Typed-text reveal: a wipe animation that uncovers the chat content */
  .pf-typing-mask {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,1) 60%,
      rgba(255,255,255,1) 100%);
    pointer-events: none;
    transform: translateY(0);
    transition: transform 3.2s linear;
  }
  .pf-typing-mask.is-done { transform: translateY(120%); }
  /* Cursor blink while "typing" */
  .pf-cursor {
    position: absolute;
    width: 2px; height: 18px;
    background: var(--pf-brand);
    animation: pfBlink 0.6s steps(2, start) infinite;
    pointer-events: none;
  }
  .pf-cursor.is-hidden { display: none; }
  @keyframes pfBlink { to { opacity: 0; } }

  /* ============= SCREEN 3 — FACE SCAN ============= */
  .pf-scan {
    background: var(--pf-bg-dark);
    overflow: hidden;
  }
  /* Match Figma exactly: a 360x800 image box centered in the 360x720 screen,
     so 40px overflows above and 40px below the visible viewport (clipped by
     .pf-scan { overflow: hidden }). Using background-image gives consistent
     positioning without object-fit quirks. */
  .pf-scan-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 360px;
    height: 800px;
    transform: translate(-50%, -50%);
    background:
      linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
      url('hero-flow/face.png') center center / cover no-repeat,
      var(--pf-bg-dark);
  }
  .pf-scan-alert {
    position: absolute;
    top: 51px; left: 16px; right: 16px;
    display: flex; align-items: flex-start; gap: 8px;
    padding: 12px 16px;
    background: var(--pf-success-bg);
    border-radius: 6px;
    z-index: 5;
  }
  .pf-scan-alert .pf-icon { width: 18px; height: 18px; color: var(--pf-success-text); }
  .pf-scan-alert p {
    font-size: 16px; font-weight: 400; line-height: 1.5;
    letter-spacing: -0.32px; color: var(--pf-success-text);
  }

  /* The oval scan frame — uses the exact Figma camera-frame asset */
  .pf-scan-oval {
    position: absolute;
    left: 50%; top: 50%;
    width: 256px; height: 356px;
    transform: translate(-50%, -50%);
  }
  /* The Figma green ring asset (drawn first → underneath the sweep) */
  .pf-scan-frame-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    display: block;
  }
  /* Container that clips the animated sweep to the oval shape (drawn on top) */
  .pf-scan-oval-clip {
    position: absolute; inset: 0;
    clip-path: ellipse(50% 50% at 50% 50%);
    -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    overflow: hidden;
    pointer-events: none;
  }
  /* The animated scan gradient that sweeps top to bottom inside the oval.
     The gradient stop alpha shape matches the Figma overlay: a soft band that
     intensifies in the middle and fades back out — looks like a moving scanner. */
  .pf-scan-gradient {
    position: absolute;
    left: 0; right: 0;
    /* The band is taller than the oval so its head/tail fade in/out cleanly */
    height: 60%;
    top: 0;
    background: linear-gradient(180deg,
      rgba(162,241,192,0)   0%,
      rgba(162,241,192,.85) 50%,
      rgba(64,179,96,.95)   100%);
    transform: translateY(-100%);
  }
  .pf-scan-oval.is-scanning .pf-scan-gradient {
    animation: pfScan 2.2s cubic-bezier(.4,0,.2,1) forwards;
  }
  @keyframes pfScan {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(266%); }
  }
  .pf-scan-buttons {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 16px;
    display: flex; flex-direction: column; gap: 8px;
    z-index: 5;
  }
  .pf-scan-btn-primary,
  .pf-scan-btn-secondary {
    height: 44px; width: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 24px;
    border-radius: 12px;
    font-size: 18px; font-weight: 500; letter-spacing: -0.36px;
  }
  .pf-scan-btn-primary {
    background: var(--pf-brand); color: #fff;
  }
  .pf-scan-btn-secondary {
    background: #fff; color: var(--pf-text-800);
    border: 1px solid var(--pf-border-100);
  }

  /* ============= SCREEN 4 — CONTRACTS ============= */
  .pf-cn { background: var(--pf-bg-50); }
  .pf-cn-notch {
    position: absolute; top: 0; left: 0; right: 0;
    height: 35px;
    background: rgba(0,0,0,.1);
  }
  .pf-cn-header {
    position: absolute; top: 35px; left: 0; right: 0;
    padding: 16px 16px 24px;
  }
  .pf-cn-h1 {
    font-size: 24px; font-weight: 700; line-height: 1;
    letter-spacing: -0.5px; color: var(--pf-text-900);
    margin-bottom: 8px;
  }
  .pf-cn-sub {
    font-size: 14px; font-weight: 400; line-height: 1.5;
    letter-spacing: -0.28px; color: var(--pf-text-800);
  }
  .pf-cn-search-wrap {
    position: absolute; top: 133px; left: 0; right: 0;
    padding: 0 16px 16px;
  }
  .pf-cn-search {
    display: flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 12px;
    background: #fff;
    border: 1px solid var(--pf-border-300);
    border-radius: 12px;
  }
  .pf-cn-search .pf-icon { width: 14px; height: 14px; color: var(--pf-text-600); }
  .pf-cn-search-text {
    flex: 1; font-size: 14px; font-weight: 400; line-height: 1.5;
    letter-spacing: -0.28px; color: var(--pf-text-600);
  }
  /* White rounded sheet with tabs/cards */
  .pf-cn-sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 530px;
    background: #fff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding-top: 16px;
  }
  .pf-cn-tabs-wrap { padding: 0 16px; }
  .pf-cn-tabs {
    display: flex; gap: 6px; align-items: center;
    padding: 4px;
    background: var(--pf-bg-50);
    border-radius: 8px;
  }
  .pf-cn-tab {
    flex: 1; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 14px;
    border-radius: 4px;
    font-size: 14px; font-weight: 600; letter-spacing: -0.28px;
    color: var(--pf-text-700);
  }
  .pf-cn-tab.is-active {
    background: #fff;
    color: var(--pf-text-900);
    box-shadow: 0 0 20px 0 rgba(38,38,38,.1);
  }

  .pf-cn-body { padding: 24px 0 0; }
  .pf-cn-body-title {
    padding: 0 16px;
    font-size: 16px; font-weight: 700; line-height: 1;
    letter-spacing: -0.5px; color: var(--pf-text-900);
    margin-bottom: 20px;
  }
  .pf-cn-list {
    display: flex; gap: 12px;
    padding: 0 16px;
    overflow: hidden;
  }
  .pf-cn-card {
    flex: 0 0 auto; width: 200px;
    background: #fff;
    border: 1px solid var(--pf-border-100);
    border-radius: 18px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .25s cubic-bezier(.2,.7,.2,1),
                box-shadow .25s cubic-bezier(.2,.7,.2,1);
  }
  .pf-cn-card.is-tapped {
    transform: scale(.97);
    box-shadow: 0 8px 20px -10px rgba(43,59,153,.4);
  }
  .pf-cn-card-img { width: 100%; height: 110px; }
  .pf-cn-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pf-cn-card-img--split { display: flex; }
  .pf-cn-card-img-half { flex: 1 1 0; height: 100%; overflow: hidden; }
  .pf-cn-card-img-half img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pf-cn-card-body { display: flex; gap: 4px; align-items: flex-start; padding: 12px 8px 12px 12px; }
  .pf-cn-card-text { flex: 1; display: flex; flex-direction: column; gap: 6px; }
  .pf-cn-card-caption { display: flex; flex-direction: column; gap: 2px; }
  .pf-cn-card-caption strong {
    font-size: 14px; font-weight: 500; letter-spacing: -0.28px; color: var(--pf-text-950);
  }
  .pf-cn-card-caption span {
    font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px; color: var(--pf-text-500);
  }
  .pf-cn-badges { display: flex; flex-wrap: wrap; gap: 4px; }
  .pf-badge {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 4px 8px;
    border-radius: 9999px;
    font-size: 10px; font-weight: 500; line-height: 1;
    letter-spacing: -0.2px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .pf-badge--neutral {
    background: var(--pf-bg-muted);
    color: var(--pf-bg-800);
    border: 1px solid var(--pf-border-300);
  }
  .pf-badge--success {
    background: var(--pf-success-bg);
    color: var(--pf-success-text);
    border: 1px solid var(--pf-success-border);
  }
  .pf-badge--info {
    background: var(--pf-info-bg);
    color: var(--pf-info-text);
    border: 1px solid var(--pf-info-border);
  }
  .pf-badge svg { width: 12px; height: 12px; }
  .pf-cn-card-chev { width: 18px; height: 18px; color: var(--pf-text-500); }

  /* ============= SCREEN 5 — DAK SERVICE DETAIL ============= */
  .pf-sv { background: #fff; }
  .pf-sv-notch {
    position: absolute; top: 0; left: 0; right: 0;
    height: 35px;
    background: rgba(0,0,0,.1);
    z-index: 5;
  }
  .pf-sv-body {
    position: absolute; top: 35px; left: 0; right: 0;
    padding: 16px 0;
    display: flex; flex-direction: column; gap: 24px;
  }
  .pf-sv-header { display: flex; flex-direction: column; gap: 16px; padding: 0 16px; }
  .pf-sv-actions { display: flex; align-items: center; justify-content: space-between; }
  .pf-sv-actions .pf-icon { width: 24px; height: 24px; color: var(--pf-text-900); }
  .pf-sv-banner {
    width: 100%; height: 150px; border-radius: 24px;
    overflow: hidden; background: #f08200;
  }
  .pf-sv-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pf-sv-banner--split { display: flex; background: transparent; }
  .pf-sv-banner-half { flex: 1 1 0; height: 100%; overflow: hidden; }
  .pf-sv-banner-half img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pf-sv-text { display: flex; flex-direction: column; gap: 4px; }
  .pf-sv-title {
    font-size: 20px; font-weight: 700; line-height: 1;
    letter-spacing: -0.5px; color: var(--pf-text-900);
  }
  .pf-sv-sub {
    font-size: 16px; font-weight: 400; line-height: 1.5;
    letter-spacing: -0.32px; color: var(--pf-text-500);
  }
  .pf-sv-badges { display: flex; gap: 8px; }
  .pf-sv-badges .pf-badge { font-size: 14px; padding: 4px 8px; line-height: 1.5; }
  .pf-sv-badges .pf-badge--neutral { font-weight: 400; }
  .pf-sv-badges .pf-badge--success { font-weight: 400; }
  .pf-sv-badges .pf-badge .pf-icon { width: 16px; height: 16px; }

  .pf-sv-cta-group { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
  .pf-sv-cta-primary {
    width: 100%; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 20px;
    background: var(--pf-brand);
    color: #fff;
    border-radius: 12px;
    font-size: 16px; font-weight: 500; letter-spacing: -0.32px;
  }
  .pf-sv-cta-row { display: flex; gap: 8px; }
  .pf-sv-cta-secondary {
    flex: 1; height: 40px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 20px;
    background: #fff;
    border: 1px solid var(--pf-border-100);
    border-radius: 12px;
    font-size: 16px; font-weight: 500; letter-spacing: -0.32px;
    color: var(--pf-text-800);
  }
  .pf-sv-cta-secondary .pf-icon { width: 18px; height: 18px; color: var(--pf-text-800); }

  .pf-divider {
    width: 100%; height: 1px;
    background: var(--pf-border-200);
  }
  .pf-accordion {
    display: flex; flex-direction: column; gap: 24px;
    padding: 0 16px;
    background: #fff;
  }
  .pf-accordion-row { display: flex; align-items: center; gap: 16px; }
  .pf-accordion-title {
    flex: 1;
    font-size: 16px; font-weight: 600; line-height: 1;
    letter-spacing: -0.32px; color: var(--pf-text-950);
  }
  .pf-accordion-row .pf-icon { width: 18px; height: 18px; color: var(--pf-text-900); }

  /* ===== reduced motion: show first screen only, static ===== */
  @media (prefers-reduced-motion: reduce) {
    .pf-stage .pf-s { transition: none; animation: none; }
    .pf-typing-mask, .pf-cursor, .pf-tap, .pf-swipe { display: none; }
    .pf-scan-oval .pf-scan-gradient { display: none; }
  }

  /* ============================================================
     SUB-PAGE HERO — compact dark variant
     Used on secondary pages (B2B, Who we are, …). Reuses the .hero
     shell so the topbar (transparent + white text + inverted logo)
     keeps its in-hero styling here too.
     ============================================================ */
  .hero.hero--page {
    padding: clamp(140px, 18vh, 220px) 0 clamp(72px, 10vh, 112px);
  }
  .hero.hero--page .hero-grid {
    grid-template-columns: minmax(0, 720px);
    min-height: 0;
    gap: 0;
  }
  .hero.hero--page .hero-content {
    max-width: none;
    gap: 22px;
  }
  .hero.hero--page .eyebrow {
    color: rgba(255, 255, 255, 0.65);
  }
  .hero.hero--page .hero-title {
    max-width: 18ch;
  }
  .hero.hero--page .hero-lede {
    max-width: 56ch;
  }
  @media (max-width: 880px) {
    .hero.hero--page { padding: 128px 0 56px; }
    .hero.hero--page .hero-grid { grid-template-columns: 1fr; }
  }

  /* ============================================================
     SUB-PAGE HERO — centered variant
     A simple centered, max-width-constrained block with a large
     headline and a description below. No eyebrow. Use on pages
     that don't have the dark gradient backdrop (pair with
     <body class="page--light"> so the topbar inverts).
     Adapted from Relume Header64.
     ============================================================ */
  .hero.hero--page.hero--center {
    padding: clamp(128px, 16vh, 200px) 0 clamp(56px, 8vh, 96px);
    text-align: center;
    background: var(--paper-2);
  }
  .hero.hero--page.hero--center .hero-grid {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
    justify-items: center;
  }
  .hero.hero--page.hero--center .hero-content {
    align-items: center;
    text-align: center;
    gap: 24px;
  }
  .hero.hero--page.hero--center .hero-title {
    max-width: none;
    font-size: var(--text-3xl);
    letter-spacing: var(--ls-tighter);
  }
  .hero.hero--page.hero--center .hero-lede {
    max-width: 56ch;
  }
  @media (max-width: 880px) {
    .hero.hero--page.hero--center { padding: 112px 0 48px; }
  }

  /* ============================================================
     SUB-PAGE HERO — split variant with vertical image marquee
     Adapted from Relume Header76 (two columns of portrait images
     looping vertically). Re-skinned to brand tokens and rebuilt
     for our static stack. Use as: .hero.hero--page.hero--marquee.
     ============================================================ */
  .hero.hero--page.hero--marquee .hero-grid {
    grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
    min-height: 0;
  }
  .hero.hero--page.hero--marquee .hero-content {
    max-width: 540px;
  }
  .hero.hero--page.hero--marquee .hero-title {
    max-width: 14ch;
    font-size: var(--text-3xl);
    letter-spacing: var(--ls-tighter);
  }
  /* Longer marquee hero headline (e.g. for-universities): use column width. */
  .hero.hero--page.hero--marquee.hero--long-headline .hero-title {
    max-width: none;
  }

  .hero-marquee {
    position: relative;
    height: clamp(440px, 64vh, 660px);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 14%,
      #000 86%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 14%,
      #000 86%,
      transparent 100%
    );
  }
  .hero-marquee-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    height: 100%;
    align-items: start;
    /* Vertical offset between the two upward columns (stagger, not opposite scroll). */
    --hero-marquee-stagger: clamp(6.5rem, 22vw, 14rem);
  }
  .hero-marquee-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: hero-marquee-loop 36s linear infinite;
    will-change: transform;
  }
  /* Same upward motion as the first column, but starts lower so cards are not
     locked side-by-side. Loop distance stays one half-height for seamless wrap. */
  .hero-marquee-col--offset {
    animation-name: hero-marquee-loop-stagger;
  }
  .hero-marquee-card {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.08) inset,
      0 18px 40px -24px rgba(6, 9, 23, 0.55);
  }
  .hero-marquee-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  @keyframes hero-marquee-loop {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
  }
  @keyframes hero-marquee-loop-stagger {
    from { transform: translateY(var(--hero-marquee-stagger)); }
    to {
      transform: translateY(calc(-50% + var(--hero-marquee-stagger)));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-marquee-col {
      animation: none;
    }
  }
  @media (max-width: 880px) {
    .hero.hero--page.hero--marquee .hero-grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    /* Center the hero content once it stacks — eyebrow, headline, lede and
       CTAs all share the same vertical axis and the column doesn't feel
       orphan-left next to nothing. */
    .hero.hero--page.hero--marquee .hero-content {
      max-width: none;
      align-items: center;
      text-align: center;
      margin-inline: auto;
    }
    .hero.hero--page.hero--marquee .hero-content .eyebrow { justify-content: center; }
    .hero.hero--page.hero--marquee .hero-content .hero-lede { margin-inline: auto; }
    .hero.hero--page.hero--marquee .hero-content .hero-actions { justify-content: center; }
    .hero.hero--page.hero--marquee .hero-title {
      max-width: none;
      font-size: clamp(2.25rem, 7.5vw, 2.875rem);
    }
    .hero-marquee {
      height: 380px;
    }
  }

  /* Static composite image in the marquee column (e.g. for-universities). */
  .hero-marquee.hero-marquee--single {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: clamp(280px, 48vh, 520px);
    max-height: clamp(440px, 64vh, 660px);
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-marquee--single .hero-marquee-single-img {
    width: 100%;
    max-width: 100%;
    max-height: clamp(440px, 64vh, 660px);
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  @media (max-width: 880px) {
    .hero-marquee.hero-marquee--single {
      min-height: 240px;
      max-height: none;
    }
    .hero-marquee--single .hero-marquee-single-img {
      max-height: 420px;
    }
  }

  /* ============================================================
     SUB-PAGE HERO — services-marquee variant
     A centred intro (eyebrow, h1, lede, CTAs) sits above two
     horizontal service-card marquees that drift in opposite
     directions. Mirrors the home page #services rhythm but
     stacked so it carries the full visual weight of the hero.
     Pair with <body class="page--light">.
     ============================================================ */
  .hero.hero--page.hero--marquee-services {
    padding: clamp(132px, 16vh, 200px) 0 clamp(48px, 7vh, 80px);
  }
  .hero-marquee-services-intro {
    max-width: 760px;
    margin: 0 auto 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  .hero-marquee-services-intro .eyebrow { justify-content: center; }
  /* Match the For-organisations hero scale (--text-3xl) so all sub-page
     heroes share the same headline rhythm — not the larger landing-page
     scale that the base .hero-title carries by default. */
  .hero-marquee-services-intro .hero-title {
    max-width: 22ch;
    margin: 0;
    font-size: var(--text-3xl);
    letter-spacing: var(--ls-tighter);
  }
  .hero-marquee-services-intro .hero-lede {
    max-width: 64ch;
    margin: 0 auto;
  }
  .hero-marquee-services-intro .hero-actions {
    justify-content: center;
  }
  /* Tighten the marquee spacing under the hero intro so the two
     rows read as a single visual unit. */
  .hero.hero--page.hero--marquee-services .services-marquee {
    padding: 18px 0;
  }
  .hero.hero--page.hero--marquee-services .services-marquee + .services-marquee {
    padding-top: 6px;
  }
  /* On light pages the marquee fade gradients need to match paper, not the
     dark hero. var(--paper) already covers it, but be explicit so the fade
     reads cleanly on the light hero surface. */
  .page--light .hero.hero--page.hero--marquee-services .services-marquee::before {
    background: linear-gradient(90deg, var(--paper) 0%, rgba(255, 255, 255, 0) 100%);
  }
  .page--light .hero.hero--page.hero--marquee-services .services-marquee::after {
    background: linear-gradient(270deg, var(--paper) 0%, rgba(255, 255, 255, 0) 100%);
  }
  @media (max-width: 880px) {
    .hero.hero--page.hero--marquee-services {
      padding: 112px 0 40px;
    }
    .hero-marquee-services-intro {
      margin-bottom: 24px;
      gap: 18px;
    }
    .hero-marquee-services-intro .hero-title {
      font-size: clamp(2.25rem, 7.5vw, 2.875rem);
    }
  }

  /* ============================================================
     SUB-PAGE HERO — card-shuffle variant (for /for-freelance-consultants).
     Three worker-profile cards fan out in a deck (L, C, R), then
     rotate left-to-right on a loop: L→C, C→R, R fades behind the
     deck, and the recycled card fades back in at L. Same column
     layout as .hero--marquee, but the right column hosts an
     animated 3-card stage instead of a vertical avatar marquee.
     ============================================================ */
  .hero-cards {
    /* Side cards are ~70% visible (centres offset by 70% of card width), matching the
       Figma "fanned deck" feel. Card width is capped lower than the centre column can
       hold so the L/R cards never escape the right column on common desktop widths. */
    --card-w: clamp(200px, 22vw, 260px);
    --card-shift-x: 70%;
    --card-y-side: 5%;
    --card-tilt: 7.64deg;
    --card-scale-side: 0.94;
    --card-opacity-side: 0.4;
    /* 10.5s loop = three 3.5s slot durations. Each card holds 2s at L/C/R then
       transitions for 1.5s. The recycled card just fades out at R and fades
       back in at L during its 1.5s window (no slide behind the deck). */
    --cards-loop: 10.5s;
    position: relative;
    width: 100%;
    height: clamp(440px, 64vh, 660px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-cards-stage {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .hero-card {
    /* Cards are pinned to the stage centre; the keyframe transforms include
       the -50%/-50% centering offset so the same transform property animates
       both placement and rotation/scale/opacity in one declaration. */
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--card-w);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: clamp(18px, 2vw, 26px);
    box-shadow:
      0 28px 56px -16px rgba(10, 13, 18, 0.18),
      0 10px 16px -6px rgba(10, 13, 18, 0.06),
      0 2px 4px -2px rgba(10, 13, 18, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 1.8vw, 22px);
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform, opacity;
    animation: hero-cards-shuffle var(--cards-loop) cubic-bezier(0.5, 0, 0.3, 1) infinite;
  }
  .hero-card--1 { animation-delay: 0s; }
  .hero-card--2 { animation-delay: calc(var(--cards-loop) / -3); }      /* -6s of 18s → starts at C */
  .hero-card--3 { animation-delay: calc(var(--cards-loop) / -3 * 2); }  /* -12s of 18s → starts at R */

  .hero-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px 3px 9px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    /* The pill uses currentColor for border and the swatch token for the
       tinted background — keeps each variant compact and easy to retint. */
  }
  .hero-card-badge svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
  }
  .hero-card-badge--green {
    color: #067647;
    background: #ecfdf3;
    border-color: #abefc6;
  }
  .hero-card-badge--indigo {
    color: #3538cd;
    background: #eef4ff;
    border-color: #c7d7fe;
  }
  .hero-card-badge--sky {
    color: #026aa2;
    background: #f0f9ff;
    border-color: #b9e6fe;
  }
  .hero-card-avatar {
    width: clamp(120px, 13.5vw, 150px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 6px;
    background: var(--paper);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow:
      0 24px 48px -16px rgba(10, 13, 18, 0.18),
      0 4px 6px -3px rgba(10, 13, 18, 0.04);
    box-sizing: border-box;
  }
  .hero-card-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }
  .hero-card-name {
    margin: 0;
    font-size: clamp(20px, 2.1vw, 26px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-align: center;
  }
  .hero-card-location {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(14px, 1.2vw, 16px);
    color: var(--ink-3);
    letter-spacing: -0.01em;
  }
  .hero-card-location svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  /* 10.5s loop, 3 cards offset by 3.5s each. Three identical "shuffle
     moments" per loop, each lasting 1.5s; between them every card holds
     for 2s. All three cards animate in lock-step during a shuffle:
       - the L card slides right into C
       - the C card slides right into R
       - the R card fades out at R, snaps invisibly to L, fades back in

     The R-exit takes ~0.5s (so the fade is well finished before the
     C-going-to-R card reaches R) and the L-fade-in takes the remaining
     ~1s of the window. By the time the recycled card is visibly fading
     in at L, the previous L card has already shifted significantly toward
     C, so the L slot never has two visible cards stacked.

     0–19.05%   (0–2s)    hold at L
     19.05–33.33% (2–3.5s) shift L → C
     33.33–52.38% (3.5–5.5s) hold at C
     52.38–66.67% (5.5–7s) shift C → R
     66.67–85.71% (7–9s)  hold at R
     85.71–90.48% (9–9.5s) fade out + drift further right at R
     90.48–90.49%          snap to L (invisible)
     90.49–100% (9.5–10.5s) fade in at L

     z-index is stepped (not interpolated) at the midpoint between adjacent
     keyframes. The 85.72% frame forces z to drop to 0 the instant the
     fade-out begins, so the recycled card never re-appears above the
     C-going-to-R card mid-transition. */
  @keyframes hero-cards-shuffle {
    /* HOLD at L */
    0%, 19.05% {
      transform:
        translate(calc(-50% - var(--card-shift-x)), calc(-50% + var(--card-y-side)))
        rotate(calc(var(--card-tilt) * -1))
        scale(var(--card-scale-side));
      opacity: var(--card-opacity-side);
      z-index: 1;
    }
    /* ARRIVE at C → HOLD at C */
    33.33%, 52.38% {
      transform: translate(-50%, -50%) rotate(0deg) scale(1);
      opacity: 1;
      z-index: 3;
    }
    /* ARRIVE at R → HOLD at R */
    66.67%, 85.71% {
      transform:
        translate(calc(-50% + var(--card-shift-x)), calc(-50% + var(--card-y-side)))
        rotate(var(--card-tilt))
        scale(var(--card-scale-side));
      opacity: var(--card-opacity-side);
      z-index: 2;
    }
    /* Drop to z=0 the instant the fade-out begins (same pose as R hold).
       Use LINEAR easing for the fade-out segment so position and opacity
       change at constant speed — the default ease has a slow-end tail
       that visibly "hard stops" the drift before the card is fully gone. */
    85.72% {
      transform:
        translate(calc(-50% + var(--card-shift-x)), calc(-50% + var(--card-y-side)))
        rotate(var(--card-tilt))
        scale(var(--card-scale-side));
      opacity: var(--card-opacity-side);
      z-index: 0;
      animation-timing-function: linear;
    }
    /* FADE OUT at R + drift further right (card visibly exits to the right) */
    90.48% {
      transform:
        translate(calc(-50% + var(--card-shift-x) * 1.18), calc(-50% + var(--card-y-side)))
        rotate(var(--card-tilt))
        scale(var(--card-scale-side));
      opacity: 0;
      z-index: 0;
    }
    /* Instant snap to L-out pose (further left than the final L position,
       still invisible). The card will translate rightward into L during
       the fade-in. Linear easing keeps the motion/opacity in lock-step
       with the symmetric fade-out. */
    90.49% {
      transform:
        translate(calc(-50% - var(--card-shift-x) * 1.18), calc(-50% + var(--card-y-side)))
        rotate(calc(var(--card-tilt) * -1))
        scale(var(--card-scale-side));
      opacity: 0;
      z-index: 0;
      animation-timing-function: linear;
    }
    /* FADE IN at L (matches 0% / 19.05% pose, z back to 1) */
    100% {
      transform:
        translate(calc(-50% - var(--card-shift-x)), calc(-50% + var(--card-y-side)))
        rotate(calc(var(--card-tilt) * -1))
        scale(var(--card-scale-side));
      opacity: var(--card-opacity-side);
      z-index: 1;
    }
  }

  /* Respect reduced-motion: drop the shuffle entirely and pin each card
     to its starting pose (L / C / R) so users still see the full layout
     but nothing moves. */
  @media (prefers-reduced-motion: reduce) {
    .hero-card {
      animation: none;
      will-change: auto;
    }
    .hero-card--1 {
      transform:
        translate(calc(-50% - var(--card-shift-x)), calc(-50% + var(--card-y-side)))
        rotate(calc(var(--card-tilt) * -1))
        scale(var(--card-scale-side));
      opacity: var(--card-opacity-side);
      z-index: 1;
    }
    .hero-card--2 {
      transform: translate(-50%, -50%) rotate(0deg) scale(1);
      opacity: 1;
      z-index: 3;
    }
    .hero-card--3 {
      transform:
        translate(calc(-50% + var(--card-shift-x)), calc(-50% + var(--card-y-side)))
        rotate(var(--card-tilt))
        scale(var(--card-scale-side));
      opacity: var(--card-opacity-side);
      z-index: 2;
    }
  }

  /* Stack the freelance-consultants hero earlier (at 1240px) than the
     general marquee rule (880px). The fanned card deck is naturally
     ~3 × card-width wide; at narrow desktop widths the L/R cards spill
     outside the right grid column. Giving the deck a full-width row
     below the text keeps every card on-screen. Scoped via `:has()` so
     this only affects the cards variant (e.g. /for-freelance-consultants)
     and not the image-marquee variant used on /for-employers. Once
     stacked, centre the text + CTAs so the column doesn't feel orphan-
     left next to the symmetrical fanned deck below. */
  @media (max-width: 1240px) {
    .hero.hero--page.hero--marquee .hero-grid:has(.hero-cards) {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .hero.hero--page.hero--marquee .hero-grid:has(.hero-cards) .hero-content {
      max-width: none;
      align-items: center;
      text-align: center;
      margin-inline: auto;
    }
    .hero.hero--page.hero--marquee .hero-grid:has(.hero-cards) .hero-content .eyebrow {
      justify-content: center;
    }
    .hero.hero--page.hero--marquee .hero-grid:has(.hero-cards) .hero-content .hero-lede {
      margin-inline: auto;
    }
    .hero.hero--page.hero--marquee .hero-grid:has(.hero-cards) .hero-content .hero-actions {
      justify-content: center;
    }
    .hero.hero--page.hero--marquee .hero-grid:has(.hero-cards) .hero-title {
      max-width: none;
    }
  }

  @media (max-width: 960px) {
    .hero-cards {
      height: 420px;
      --card-w: clamp(180px, 48vw, 240px);
      --card-shift-x: 55%;
    }
  }

  /* Shrink the job-title badge on mobile so the longest label
     ("Heavy Equipment Operator") fits inside the narrower card width
     without spilling past the rounded corner. Icon and padding scale
     down together to keep the pill proportions consistent. */
  @media (max-width: 600px) {
    .hero-card-badge {
      font-size: 11px;
      padding: 2px 8px 2px 7px;
      gap: 4px;
    }
    .hero-card-badge svg {
      width: 12px;
      height: 12px;
    }
  }
  @media (max-width: 480px) {
    .hero-card-badge {
      font-size: 9px;
      padding: 2px 7px 2px 6px;
      gap: 3px;
    }
    .hero-card-badge svg {
      width: 10px;
      height: 10px;
    }
  }

  /* ============================================================
     SUB-PAGE HERO — orbit variant (for /for-relocation-agencies).
     Avatars travel counter-clockwise along a ring whose centre
     sits at the bottom-right corner of the hero column, so only
     the upper-left ~90° of the orbit is visible. Each spoke is
     a 0×0 pivot at that corner; the avatar counter-rotates so
     faces stay upright. Density and speed are tuned to feel
     continuous on desktop. Use as: .hero.hero--page.hero--orbit.
     ============================================================ */
  .hero.hero--page.hero--orbit {
    /* Pull the hero content towards the top so the orbit visual extends below
       it (matching the reference layout). */
    padding-top: clamp(96px, 13vh, 152px);
  }
  .hero.hero--page.hero--orbit .hero-grid {
    grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    min-height: 0;
  }
  .hero.hero--page.hero--orbit .hero-content {
    max-width: 540px;
  }
  .hero.hero--page.hero--orbit .hero-title {
    max-width: 14ch;
    font-size: var(--text-3xl);
    letter-spacing: var(--ls-tighter);
  }

  .hero-orbit {
    /* Tunables */
    --orbit-radius: clamp(340px, 48vw, 520px);
    --orbit-avatar: clamp(58px, 7.2vw, 92px);
    /* Roughly 14–18% of the avatar orbit radius (matches the Figma proportions
       at the upper end of the clamp). */
    --orbit-ring-thickness: clamp(64px, 10vw, 128px);
    --orbit-cycle: 32s;

    position: relative;
    height: clamp(440px, 64vh, 660px);
    overflow: hidden;
    /* Two feather masks intersected: bottom (where avatars exit) + right
       (where the band meets the right edge before the orbit centre). The
       intersect composite is supported in modern Chromium/Safari/Firefox;
       in older Safari it falls back to `-webkit-mask-composite: source-in`. */
    -webkit-mask-image:
      linear-gradient(to bottom, #000 62%, transparent 100%),
      linear-gradient(to right, #000 70%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, #000 62%, transparent 100%),
      linear-gradient(to right, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  /* CSS `border` always grows inward from the box edge. To get a *centred*
     stroke (where the avatar orbit sits on the middle of the band), the
     ring box is inflated by half the thickness on all sides, so the band's
     outer radius = orbit-radius + thickness/2 and inner radius =
     orbit-radius - thickness/2. */
  .hero-orbit-ring {
    position: absolute;
    width: calc(2 * var(--orbit-radius) + var(--orbit-ring-thickness));
    height: calc(2 * var(--orbit-radius) + var(--orbit-ring-thickness));
    right: calc(-1 * (var(--orbit-radius) + var(--orbit-ring-thickness) / 2));
    bottom: calc(-1 * (var(--orbit-radius) + var(--orbit-ring-thickness) / 2));
    border-radius: 50%;
    border: var(--orbit-ring-thickness) solid rgba(6, 9, 23, 0.05);
    pointer-events: none;
    animation: hero-orbit-breath 6s ease-in-out infinite;
  }
  @keyframes hero-orbit-breath {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
  }

  .hero-orbit-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* A 0×0 pivot anchored at the orbit centre (bottom-right of .hero-orbit).
     Each spoke is phase-shifted via a negative animation-delay so the
     twelve copies are evenly distributed around the ring at t = 0. */
  .hero-orbit-spoke {
    --i: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    animation: hero-orbit-spin var(--orbit-cycle) linear infinite;
    animation-delay: calc(var(--i) * var(--orbit-cycle) / -12);
    will-change: transform;
  }
  /* +90° → 12 o'clock, -270° = back to 12 o'clock after a full CCW revolution.
     Going from +90 to -270 over the cycle is a steady 360° decrease, which
     reads as counter-clockwise on screen. */
  @keyframes hero-orbit-spin {
    from { transform: rotate(90deg); }
    to   { transform: rotate(-270deg); }
  }

  /* Avatar sits at distance --orbit-radius from the spoke pivot, towards
     local −x. After the spoke's +90° start rotation it ends up directly
     above the corner (12 o'clock). The counter-rotation keeps the face
     upright as the spoke turns. */
  .hero-orbit-avatar {
    position: absolute;
    width: var(--orbit-avatar);
    height: var(--orbit-avatar);
    left: calc(-1 * var(--orbit-radius) - var(--orbit-avatar) / 2);
    top: calc(-0.5 * var(--orbit-avatar));
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    box-shadow:
      0 1px 0 rgba(6, 9, 23, 0.05) inset,
      0 10px 26px -16px rgba(6, 9, 23, 0.32);
    animation: hero-orbit-upright var(--orbit-cycle) linear infinite;
    animation-delay: calc(var(--i) * var(--orbit-cycle) / -12);
    will-change: transform;
  }
  @keyframes hero-orbit-upright {
    from { transform: rotate(-90deg); }
    to   { transform: rotate(270deg); }
  }
  .hero-orbit-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-orbit-spoke,
    .hero-orbit-avatar,
    .hero-orbit-ring {
      animation: none !important;
    }
  }

  /* Below 1240: the orbit ring is naturally ~1150px wide and would only show
     a thin sliver inside the right grid column at narrow desktop widths.
     Stack the layout so the orbit gets the full row below the text. Keep
     the text + CTAs left-aligned to match the orbit being anchored to the
     right of the row — centring the content would leave a large empty
     wedge in the bottom-left where the orbit doesn't reach. */
  @media (max-width: 1240px) {
    .hero.hero--page.hero--orbit .hero-grid {
      grid-template-columns: 1fr;
      /* No gap — the orbit container is sized below to fit the visible arc
         exactly (topmost avatar sits flush against the box top), so any
         grid gap would just add dead space between the CTAs and the ring. */
      gap: 0;
    }
    /* Scale the orbit visual to the full row width. Avatar / ring grow with
       the viewport so the orbit reads as substantial on tablets and larger
       phones, not as a tiny corner decoration. Ring-thickness is computed
       from avatar size so the band is always thicker than the heads in it.
       Height is sized so the topmost avatar (at 12 o'clock) sits flush
       against the top of the box — `orbit-radius + avatar/2` is the exact
       distance from the ring centre (bottom-right corner) to the top of
       that avatar. This removes the empty zone that used to live above the
       visible arc, so the orbit reads as immediately following the CTAs. */
    .hero-orbit {
      --orbit-radius: clamp(280px, 50vw, 520px);
      --orbit-avatar: clamp(56px, 8.5vw, 96px);
      --orbit-ring-thickness: calc(var(--orbit-avatar) * 1.35);
      height: calc(var(--orbit-radius) + var(--orbit-avatar) / 2);
    }
  }

  @media (max-width: 880px) {
    .hero.hero--page.hero--orbit .hero-title {
      font-size: clamp(2.25rem, 7.5vw, 2.875rem);
    }
    /* Keep the text + CTAs left-aligned on mobile (the general
       `.hero-content` rule above centres everything below 880px — opt out
       for this variant so the eyebrow / headline / lede / CTAs line up
       with the page gutter, matching the orbit's right-anchored arc). */
    .hero.hero--page.hero--orbit .hero-content {
      align-items: start;
      text-align: left;
      margin-inline: 0;
    }
    .hero.hero--page.hero--orbit .hero-content .hero-lede {
      margin-inline: 0;
    }
    .hero.hero--page.hero--orbit .hero-content .hero-actions {
      justify-content: flex-start;
    }
    /* Restore a small gap between the (now left-aligned) CTAs and the
       orbit so the topmost avatar isn't crammed against the buttons. */
    .hero.hero--page.hero--orbit .hero-grid {
      gap: 32px;
    }
  }

  /* ============================================================
     UNIVERSITIES HERO — Figma composite (node 1402:13150).
     Implementation strategy:
       • The shell is a CSS container (`container-type: inline-size`).
       • Inside, a `--uh-px` custom property gives a "design pixel"
         unit: 1 design px in Figma = 1 actual px when the shell is at
         its natural 1145px width, scaling proportionally below that
         (and capping at 1px above).
       • Absolute positions use percentages of the canvas
         (1145 × 1021); element widths/heights/typography use
         `calc(N * var(--uh-px))` to track Figma pixels exactly.
     ============================================================ */
  @keyframes universities-hero-float-y {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -12px, 0); }
  }

  .hero-marquee.hero-marquee--universities-composite {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: clamp(280px, 48vh, 520px);
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .universities-hero-shell {
    container-type: inline-size;
    container-name: univ-hero;
    width: 100%;
    margin-inline: auto;
    overflow: visible;
  }

  .universities-hero {
    --uh-px: min(1px, calc(100cqw / 1145));
    position: relative;
    width: 100%;
    aspect-ratio: 1145 / 1021;
    margin-inline: auto;
    isolation: isolate;
  }

  /* ---- Background photo ------------------------------------- */
  .universities-hero__photo-wrap {
    position: absolute;
    left: calc(125 / 1145 * 100%);
    top: 0;
    width: calc(960 / 1145 * 100%);
    height: calc(960 / 1021 * 100%);
    border-radius: calc(40 * var(--uh-px));
    overflow: hidden;
    z-index: 1;
  }

  .universities-hero__photo {
    position: absolute;
    left: 0;
    top: 0;
    width: 106.67%;
    height: 106.67%;
    max-width: none;
    object-fit: cover;
    display: block;
  }

  /* ---- Phone (UI screenshot masked into phone outline) ------ */
  .universities-hero__phone {
    position: absolute;
    left: calc(531.5 / 1145 * 100%);
    top: calc(331.5 / 1021 * 100%);
    width: calc(204.5 / 1145 * 100%);
    height: calc(346.169 / 1021 * 100%);
    z-index: 2;
    pointer-events: none;
    -webkit-mask-image: url("solutions-images/universities-hero/phone-mask.svg");
    mask-image: url("solutions-images/universities-hero/phone-mask.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0.991% 0.152%;
    mask-position: 0.991% 0.152%;
    -webkit-mask-size: 98.02% 99.49%;
    mask-size: 98.02% 99.49%;
    filter: drop-shadow(0 12px 28px rgba(15, 29, 54, 0.28));
  }

  .universities-hero__phone-ui {
    position: absolute;
    top: 0.152%;
    left: 0.991%;
    width: 98.02%;
    height: 99.49%;
    max-width: none;
    display: block;
    object-fit: fill;
  }

  /* ---- Cards (4) -------------------------------------------- */
  .universities-hero-card {
    position: absolute;
    left: 0;
    box-sizing: border-box;
    width: calc(485 / 1145 * 100%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: calc(18.471 * var(--uh-px));
    padding: calc(18.471 * var(--uh-px));
    background: #fff;
    border-radius: calc(27.706 * var(--uh-px));
    border: calc(1.539 * var(--uh-px)) solid #e6e6e6;
  }

  .universities-hero-card--dak {
    top: calc(50 / 1021 * 100%);
    border-color: #a2ddfa;
  }
  .universities-hero-card--vodafone   { top: calc(154.353 / 1021 * 100%); }
  .universities-hero-card--bunq       { top: calc(258.706 / 1021 * 100%); }
  .universities-hero-card--interlloyd { top: calc(363.057 / 1021 * 100%); }

  .universities-hero-card--dak.universities-hero-float        { animation-delay: 0s; }
  .universities-hero-card--vodafone.universities-hero-float   { animation-delay: 0.35s; }
  .universities-hero-card--bunq.universities-hero-float       { animation-delay: 0.7s; }
  .universities-hero-card--interlloyd.universities-hero-float { animation-delay: 1.05s; }

  /* Avatars ---------------------------------------------------- */
  .universities-hero-card__avatars {
    position: relative;
    flex-shrink: 0;
    width: calc(96.94 * var(--uh-px));
    height: calc(55.412 * var(--uh-px));
  }

  .universities-hero-card__avatars img {
    position: absolute;
    top: 0;
    width: calc(55.412 * var(--uh-px));
    height: calc(55.412 * var(--uh-px));
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }
  .universities-hero-card__avatars img:nth-child(1) { left: 0; z-index: 1; }
  .universities-hero-card__avatars img:nth-child(2) {
    left: calc(41.53 * var(--uh-px));
    z-index: 2;
    box-shadow: 0 0 0 calc(2 * var(--uh-px)) #fff;
  }

  .universities-hero-card__avatar--single {
    position: relative;
    flex-shrink: 0;
    width: calc(55.412 * var(--uh-px));
    height: calc(55.412 * var(--uh-px));
    border-radius: 50%;
    overflow: hidden;
  }

  .universities-hero-card__avatar--single img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Vodafone-specific photo crop (matches Figma left[-42.04%] w[184.08%]) */
  .universities-hero-card__avatar--single img.universities-hero-card__vodafone-photo {
    inset: 0 auto auto -42.04%;
    width: 184.08%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  /* Interlloyd avatar — bordered ring + smaller logo glyph (Figma) */
  .universities-hero-card--interlloyd .universities-hero-card__avatar--single {
    border: calc(1.539 * var(--uh-px)) solid #e6e6e6;
  }
  .universities-hero-card--interlloyd .universities-hero-card__avatar--single img {
    inset: 18.9% auto auto 18.9%;
    width: 61.46%;
    height: 61.46%;
  }

  /* bunq avatar (six stripes + white "B" mark) */
  .universities-hero-card__bunq {
    position: relative;
    flex-shrink: 0;
    width: calc(55.41 * var(--uh-px));
    height: calc(55.41 * var(--uh-px));
    border-radius: 50%;
    overflow: hidden;
  }
  .universities-hero-card__bunq-stripes {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  .universities-hero-card__bunq-stripes span {
    flex: 1 1 16.6667%;
    min-width: 0;
  }
  .universities-hero-card__bunq-stripes span:nth-child(1) { background: #61b74f; }
  .universities-hero-card__bunq-stripes span:nth-child(2) { background: #3cb8ac; }
  .universities-hero-card__bunq-stripes span:nth-child(3) { background: #2772bc; }
  .universities-hero-card__bunq-stripes span:nth-child(4) { background: #9a3333; }
  .universities-hero-card__bunq-stripes span:nth-child(5) { background: #f28826; }
  .universities-hero-card__bunq-stripes span:nth-child(6) { background: #f5c837; }
  .universities-hero-card__bunq-mark {
    position: absolute;
    left: 33.33%;
    top: 19.44%;
    width: 41.05%;
    height: 57.59%;
    display: block;
  }

  /* Card text + actions --------------------------------------- */
  .universities-hero-card__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(6.157 * var(--uh-px));
  }

  .universities-hero-card__title {
    margin: 0;
    font-family: var(--font);
    font-size: calc(21.549 * var(--uh-px));
    font-weight: var(--w-medium);
    letter-spacing: calc(-0.431 * var(--uh-px));
    color: #171717;
    line-height: normal;
    white-space: nowrap;
  }

  .universities-hero-card__subtitle {
    margin: 0;
    font-family: var(--font);
    font-size: calc(18.471 * var(--uh-px));
    font-weight: var(--w-regular);
    letter-spacing: calc(-0.3694 * var(--uh-px));
    color: #8c8c8c;
    line-height: normal;
    white-space: nowrap;
  }

  /* Note: Figma spec'd 23.69px for the badge text, but at that size the
     pill (31.3px tall) cannot contain the line-box, so the rendered
     Figma frame visibly shows the text smaller than the spec. We scale
     it back to ~17.56 design px to match the visual badge proportions. */
  .universities-hero-card__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: calc(4.5 * var(--uh-px));
    padding: calc(4.5 * var(--uh-px)) calc(10 * var(--uh-px));
    border-radius: 999px;
    background: #ebf8fe;
    border: calc(1.539 * var(--uh-px)) solid #57c2f6;
    font-family: var(--font);
    font-size: calc(17.561 * var(--uh-px));
    font-weight: var(--w-medium);
    color: #075a83;
    letter-spacing: calc(-0.351 * var(--uh-px));
    white-space: nowrap;
    line-height: 1;
  }
  .universities-hero-card__badge img {
    display: block;
    width: calc(4.5 * var(--uh-px));
    height: calc(7.875 * var(--uh-px));
  }

  /* Chevron — chevron viewBox is 9.235×16.162; Figma shows it
     inset 33.33% horiz / 20.83% vert inside a 27.706 square. */
  .universities-hero-card__chevron {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(27.706 * var(--uh-px));
    height: calc(27.706 * var(--uh-px));
    opacity: 0.85;
  }
  .universities-hero-card__chevron img {
    width: calc(9.235 * var(--uh-px));
    height: calc(16.162 * var(--uh-px));
    display: block;
  }

  /* ---- Chat input ------------------------------------------- */
  .universities-hero-chat {
    position: absolute;
    left: calc(665 / 1145 * 100%);
    top: calc(903 / 1021 * 100%);
    box-sizing: border-box;
    width: calc(480 / 1145 * 100%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(5.854 * var(--uh-px));
    padding:
      calc(23.415 * var(--uh-px))
      calc(11.707 * var(--uh-px))
      calc(11.707 * var(--uh-px))
      calc(23.415 * var(--uh-px));
    background: #fff;
    border-radius: calc(35.122 * var(--uh-px));
    border: calc(2.927 * var(--uh-px)) solid #e0c3fc;
    box-shadow: 0 0 calc(19.024 * var(--uh-px)) rgba(0, 68, 255, 0.4);
  }

  .universities-hero-chat__label {
    margin: 0;
    font-family: var(--font);
    font-size: calc(17.561 * var(--uh-px));
    font-weight: var(--w-regular);
    color: #a3a3a3;
    letter-spacing: calc(-0.3512 * var(--uh-px));
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .universities-hero-chat__row {
    display: flex;
    align-items: center;
    gap: calc(11.707 * var(--uh-px));
  }

  .universities-hero-chat__placeholder {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font);
    font-size: calc(23.415 * var(--uh-px));
    font-weight: var(--w-regular);
    color: #737373;
    letter-spacing: calc(-0.4683 * var(--uh-px));
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .universities-hero-chat__send {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(55.609 * var(--uh-px));
    height: calc(55.609 * var(--uh-px));
    border-radius: 50%;
    background: #2b3b99;
    opacity: 0.4;
  }
  .universities-hero-chat__send img {
    width: calc(17.561 * var(--uh-px));
    height: calc(17.561 * var(--uh-px));
    display: block;
    filter: brightness(0) invert(1);
  }

  /* ---- Floating motion -------------------------------------- */
  .universities-hero-float {
    animation: universities-hero-float-y 5.4s ease-in-out infinite;
    will-change: transform;
  }

  .universities-hero-float--chat {
    animation-duration: 6.8s;
    animation-delay: 0.55s;
  }

  @media (prefers-reduced-motion: reduce) {
    .universities-hero-float {
      animation: none !important;
    }
  }

  /* Below 1080: the default marquee grid (`minmax(0, 540px) minmax(0, 1fr)`
     + 64px gap) leaves too little room for the 1145-design-width
     composite, so it collapses far smaller than the headline column.
     Switch this specific hero to single-column earlier and cap the
     composite for visual balance under the text. */
  @media (max-width: 1080px) {
    .hero.hero--page.hero--marquee.hero--long-headline .hero-grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    /* Once the long-headline marquee hero stacks (composite below text),
       centre the eyebrow / headline / lede / CTAs so the content reads
       as a single column instead of orphan-left next to nothing. */
    .hero.hero--page.hero--marquee.hero--long-headline .hero-content {
      max-width: none;
      align-items: center;
      text-align: center;
      margin-inline: auto;
    }
    .hero.hero--page.hero--marquee.hero--long-headline .hero-content .eyebrow { justify-content: center; }
    .hero.hero--page.hero--marquee.hero--long-headline .hero-content .hero-lede { margin-inline: auto; }
    .hero.hero--page.hero--marquee.hero--long-headline .hero-content .hero-actions { justify-content: center; }
    .hero.hero--page.hero--marquee.hero--long-headline .hero-title {
      max-width: none;
    }
    .universities-hero-shell {
      max-width: 600px;
    }
  }

  @media (max-width: 880px) {
    .hero-marquee.hero-marquee--universities-composite {
      height: auto;
      max-height: none;
      min-height: 320px;
    }
    .universities-hero-shell {
      max-width: 100%;
    }
  }

  /* ============================================================
     LIGHT-PAGE THEME — applied via <body class="page--light">
     For pages that drop the dark gradient backdrop. Flips the
     topbar (nav text + logo) and the dark-hero typography to
     ink-on-white, and adapts the marquee card shadow to read
     well on a light surface.
     ============================================================ */
  .page--light .topbar nav { color: var(--ink); }
  .page--light .topbar:not(.is-scrolled) nav a:hover { color: var(--ink); }
  .page--light .topbar:not(.is-scrolled) .nav-trigger:hover { color: var(--ink); }
  .page--light .brand-logo img { filter: none; }
  /* Secondary header CTA on light pages: when the topbar is not yet scrolled
     it sits over a paper hero, so the ghost styling needs ink-on-paper too.
     Once scrolled, the .topbar.is-scrolled rule above takes over. */
  .page--light .topbar:not(.is-scrolled) .topbar-cta-secondary {
    color: var(--ink);
    border-color: var(--rule-strong);
  }
  .page--light .topbar:not(.is-scrolled) .topbar-cta-secondary:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }

  .page--light .hero.hero--page .hero-title { color: var(--ink); }
  .page--light .hero.hero--page .hero-lede { color: var(--ink-2); }
  .page--light .hero.hero--page .eyebrow { color: var(--ink-3); }
  .page--light .hero-actions .btn-ghost {
    color: var(--ink);
    border-color: var(--rule-strong);
  }
  .page--light .hero-actions .btn-ghost:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }

  .page--light .hero-marquee-card {
    background: var(--paper-2);
    box-shadow:
      0 0 0 1px var(--rule) inset,
      0 18px 40px -24px rgba(24, 20, 16, 0.18);
  }

  /* ============================================================
     SUB-PAGE HERO — globe variant
     A slowly-rotating dotted Earth rendered as a horizon dome:
     the sphere's centre sits at (or just below) the bottom edge
     of the hero, so only the top half of the globe rises into
     the section. The visible top arc is feathered with a mask
     centred on the bottom of the wrapper, dissolving the upper
     rim into the page. Pair with .hero.hero--page.
     ============================================================ */
  .hero.hero--page.hero--globe {
    position: relative;
    overflow: hidden;
    /* Tighter top padding than the base sub-page hero — the globe at the
       bottom carries the visual weight, so the headline doesn't need as
       much breathing room above it. */
    padding-top: clamp(112px, 13vh, 160px);
  }
  .hero.hero--page.hero--globe .hero-grid {
    grid-template-columns: minmax(0, 620px);
    /* Just enough vertical room for the text column + a comfortable arc of
       the dome below it. Trimmed back from the previous 460–660px range,
       which left a wide empty band between the lede and the dome's peak. */
    min-height: clamp(360px, 50vh, 520px);
    position: relative;
    z-index: 2;
    /* Anchor the copy to the top of the grid; the remaining vertical room
       lives below the lede where the dome rises, not above the eyebrow. */
    align-items: start;
  }
  .hero.hero--page.hero--globe .hero-content {
    max-width: 620px;
  }

  .hero-globe {
    position: absolute;
    bottom: 0;
    /* Anchor the wrapper centre to the right portion of the hero so the
       dome sits visually to the right of the text column on desktop. */
    left: auto;
    right: 0;
    width: clamp(720px, 78vw, 1180px);
    aspect-ratio: 1 / 1;
    /* Push the wrapper below the hero so only the top portion of the
       sphere emerges, like a horizon. translateX shifts the dome's centre
       so the visible peak sits roughly above the hero's right column.
       The mask below trims everything past 52% of the wrapper height, so
       changing translateY moves the dome up/down inside the hero without
       changing how much of it reads visibly. 38% lifts the dome so it sits
       close to the lede instead of leaving a wide gap below the text. */
    transform: translate(18%, 38%);
    pointer-events: none;
    z-index: 1;
    /* Feather: top of the visible dome stays sharp (so the rim and dotted
       Earth read clearly); the BOTTOM of the visible dome — where it would
       otherwise meet the hero's bottom edge in a hard horizon line — fades
       softly to transparent. The wrapper's lower half is below the hero
       (clipped) so anything past 50% is gone anyway. */
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 32%,
      rgba(0, 0, 0, 0.55) 44%,
      transparent 52%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 32%,
      rgba(0, 0, 0, 0.55) 44%,
      transparent 52%
    );
  }
  .hero-globe-canvas,
  .hero-globe-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  /* Tone down the cobe-rendered dotted Earth to a soft gray so the
     highlighted city markers (rendered on the overlay above) read as the
     focal points. Using opacity on the canvas itself lightens every dot
     uniformly while preserving their full geometric size. */
  .hero-globe-canvas { opacity: 0.45; }
  /* Markers + arcs are drawn on the overlay so they can pulse and animate
     beyond what cobe's flat shader supports. The overlay sits on top of the
     dotted-Earth canvas and never intercepts clicks. */
  .hero-globe-overlay { pointer-events: none; }

  /* Tablet — pull the dome toward centre and shrink slightly so the
     horizon still reads but the headline always wins the focus. */
  @media (max-width: 1180px) {
    .hero.hero--page.hero--globe .hero-grid {
      grid-template-columns: minmax(0, 540px);
    }
    .hero-globe {
      width: clamp(640px, 88vw, 960px);
      transform: translate(28%, 40%);
    }
  }

  /* Mobile — keep the dome as a faint horizon below the copy. Hero gets
     extra padding-bottom so the visible dome arc never crowds the lede.
     Opacity is dialled down so the dotted texture stays decorative. */
  @media (max-width: 880px) {
    .hero.hero--page.hero--globe {
      padding-bottom: clamp(220px, 48vw, 320px);
    }
    .hero.hero--page.hero--globe .hero-grid {
      grid-template-columns: 1fr;
      min-height: 0;
    }
    .hero-globe {
      bottom: 0;
      right: 50%;
      width: 130vw;
      max-width: 540px;
      transform: translate(50%, 65%);
      opacity: 0.55;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-globe-canvas { animation: none; }
  }

  /* On the B2B page, the b2b section is the first content section
     beneath the hero, so dial back its top intro padding. */
  .b2b.b2b--page > .wrap > .b2b-intro {
    padding-top: 64px;
  }

  /* ============================================================
     CONTACT SECTION (B2B page)
     Two-column: sticky left intro + reassurance points,
     right card containing the actual form.
     ============================================================ */
  .contact { padding: 120px 0; border-top: 1px solid var(--rule); }
  .contact.contact--press { border-top: 0; }
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: start;
  }
  .contact-intro {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 46ch;
  }
  .contact-intro .h2 { margin: 0; }
  .contact-intro .h2-sub { margin: 0; max-width: 48ch; }
  .contact-host-label {
    margin: 12px 0 0;
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--w-semibold);
    line-height: var(--lh-base);
    letter-spacing: 0.04em;
    text-transform: uppercase !important;
    color: var(--ink-3);
  }
  .contact-host {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 0 0 14px;
    margin: 8px 0 0;
    overflow: hidden;
    border: 1px solid var(--rule-strong);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: 0 16px 40px -32px #1814101f;
  }
  /* Photo column is 25% wider than the original 96px strip, still
     flush to the card top/bottom; host padding-left insets the strip
     from the card's outer left edge. Photo strip stays square-cornered. */
  .contact-host-photo {
    width: 120px;
    min-height: 120px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 0;
    overflow: hidden;
    background: var(--paper-2);
  }
  .contact-host-photo picture {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
  }
  .contact-host-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
  }
  .contact-host-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
    padding: 16px 16px 16px 18px;
  }
  .contact-host-name {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-xl);
    font-weight: var(--w-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
  }
  .contact-host-role {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 40px;
    border: 1px solid var(--rule-strong);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: 0 24px 48px -36px #18141026;
  }
  .contact-field { display: flex; flex-direction: column; gap: 8px; }
  .contact-field label,
  .contact-fieldset legend {
    padding: 0;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink);
  }
  .contact-field input[type="text"],
  .contact-field input[type="email"],
  .contact-field textarea {
    appearance: none;
    width: 100%;
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-regular);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink);
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
  }
  .contact-field textarea {
    resize: vertical;
    min-height: 132px;
    line-height: var(--lh-loose);
  }
  .contact-field input::placeholder,
  .contact-field textarea::placeholder { color: var(--ink-3); }
  .contact-field input:hover,
  .contact-field textarea:hover { border-color: var(--ink-3); }
  .contact-field input:focus,
  .contact-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  @media (max-width: 540px) {
    .contact-row { grid-template-columns: 1fr; gap: 22px; }
  }

  .contact-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .contact-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .contact-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--rule-strong);
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
  }
  .contact-option:hover {
    border-color: var(--ink-3);
    color: var(--ink);
  }
  .contact-option input[type="radio"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
  }
  .contact-option:has(input:checked) {
    border-color: var(--accent);
    color: var(--ink);
    background: var(--accent-soft);
  }

  .contact-consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: flex-start;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
  }
  .contact-consent input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    margin-top: 4px;
  }
  .contact-consent a {
    color: var(--ink-2);
    border-bottom: 1px solid var(--rule-strong);
    transition: color .25s ease, border-color .25s ease;
  }
  .contact-consent a:hover { color: var(--ink); border-color: var(--ink); }

  .contact-submit {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 4px;
  }
  .contact-submit .btn { padding: 13px 26px; }
  .contact-fineprint {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-regular);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
  }

  @media (max-width: 980px) {
    .contact { padding: 80px 0; }
    .contact-grid { grid-template-columns: 1fr; gap: 48px; }
    .contact-intro { position: static; max-width: none; }
    .contact-form { padding: 28px; gap: 20px; }
  }

  /* ============================================================
     B2B PAGE — Audiences (4-tab responsive nudge)
     The default .b2b-tabs is an inline-flex pill row. With four
     longer labels it can overflow on narrow viewports — let the
     row scroll horizontally there instead of breaking the layout.
     ============================================================ */
  @media (max-width: 980px) {
    .b2b-tabs-wrap {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      margin-left: calc(var(--gutter) * -1);
      margin-right: calc(var(--gutter) * -1);
      padding: 0 var(--gutter);
    }
    .b2b-tabs-wrap::-webkit-scrollbar { display: none; }
    .b2b-tabs { flex-wrap: nowrap; white-space: nowrap; }
    .b2b-tab { flex: 0 0 auto; }
  }

  /* ============================================================
     B2B PAGE — Services included
     ============================================================ */
  .b2b-included { padding: 120px 0; background: var(--paper); }
  .b2b-included-intro {
    max-width: 720px;
    margin: 0 0 64px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .b2b-included-intro .h2 { margin: 0; }
  .b2b-included-intro .h2-sub { margin: 0; }

  .b2b-included-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    column-gap: 32px;
    border-top: 1px solid var(--rule);
  }
  .b2b-included-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font);
    font-size: var(--text-lg);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
  }
  .b2b-included-list li strong {
    color: var(--ink);
    font-weight: var(--w-semibold);
  }
  .b2b-included-list li span {
    color: var(--ink-3);
    font-weight: var(--w-regular);
  }

  .b2b-included-link {
    margin: 40px 0 0;
    font-family: var(--font);
    font-size: var(--text-base);
    font-style: italic;
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
  }
  .b2b-included-link a {
    color: var(--accent-secondary);
    font-style: normal;
    font-weight: var(--w-medium);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
  }

  @media (max-width: 720px) {
    .b2b-included { padding: 72px 0; }
    .b2b-included-intro { margin-bottom: 40px; }
    .b2b-included-list { grid-template-columns: 1fr; column-gap: 0; }
    .b2b-included-list li { padding: 18px 0; font-size: var(--text-base); }
  }

  /* ============================================================
     B2B PAGE — FAQ accordion
     Native <details>/<summary>. The expand/collapse animation is
     JS-driven (assets/scripts.js) for cross-browser smoothness;
     the chevron rotation is pure CSS off the [open] attribute.
     ============================================================ */
  .faq { padding: 120px 0; }
  .faq-intro {
    max-width: 720px;
    margin: 0 0 56px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .faq-intro .h2 { margin: 0; }

  .faq-list {
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
  }
  .faq-item + .faq-item { border-top: 1px solid var(--rule); }

  .faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 4px;
    min-height: 44px;
    font-family: var(--font);
    font-size: var(--text-lg);
    font-weight: var(--w-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-snug);
    color: var(--ink);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::marker { content: ""; }
  .faq-item summary:focus-visible {
    outline: 2px solid var(--accent-secondary);
    outline-offset: 4px;
    border-radius: 4px;
  }
  /* Question text sits as a flex child that hugs its own width so the
     chevron is pushed to the right by `justify-content: space-between`
     on the parent <summary>. No hover treatment — the chevron itself
     signals interactivity. */
  .faq-q { flex: 0 1 auto; }
  .faq-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 999px;
    color: var(--ink-3);
    transition: transform 220ms ease;
  }
  .faq-chevron svg { width: 16px; height: 16px; display: block; }
  .faq-item[open] .faq-chevron {
    transform: rotate(180deg);
  }
  /* During a JS-driven close the [open] attribute is held on until the
     height transition ends, so without this override the chevron would
     only rotate back after the body had already collapsed — perceived as
     a lag. `.is-closing` lets the chevron rotate in parallel with the
     body collapse. */
  .faq-item[open].is-closing .faq-chevron {
    transform: rotate(0deg);
  }

  .faq-a {
    padding: 0 4px 28px;
    color: var(--ink-2);
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
  }
  .faq-a p { margin: 0; max-width: 70ch; }
  .faq-a p + p { margin-top: 12px; }
  .faq-a a {
    color: var(--accent-secondary);
    font-weight: var(--w-medium);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
  }
  /* The JS animation toggles .is-animating on the <details> and sets
     inline `height` and `padding-bottom` on .faq-a. While animating we
     hide overflow so the content reveals/collapses without spilling
     past the row. `padding-bottom` is animated alongside `height`
     because with box-sizing: border-box, `height: 0` doesn't compress
     padding — the box would otherwise bottom out at padding height
     and snap shut at the end of the close transition. */
  .faq-item.is-animating .faq-a {
    overflow: hidden;
    transition: height 280ms cubic-bezier(.2, .7, .2, 1),
                padding-bottom 280ms cubic-bezier(.2, .7, .2, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    .faq-item.is-animating .faq-a { transition: none; }
  }

  @media (max-width: 720px) {
    .faq { padding: 72px 0; }
    .faq-intro { margin-bottom: 36px; }
    .faq-item summary { padding: 20px 4px; font-size: var(--text-base); }
    .faq-a { padding: 0 4px 22px; font-size: var(--text-base); }
  }

  /* ============================================================
     SOLUTION PAGES — value-prop grid
     Used as "How we help" / "Why partner with us" — three short
     cards on a paper surface, mirroring the b2b-included rhythm.
     ============================================================ */
  .value-grid-section { padding: 120px 0; }
  .value-grid-intro {
    max-width: 720px;
    margin: 0 0 56px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .value-grid-intro .h2 { margin: 0; }
  .value-grid-intro .h2-sub { margin: 0; }

  .value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .value-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: 16px;
    box-shadow: 0 16px 40px -32px #1814101f;
  }
  .value-card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--accent-secondary);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-semibold);
    letter-spacing: var(--ls-snug);
  }
  /* Icon variant of the value-card lozenge — same circular pill, but holds
     an inline SVG instead of a number. Used on the Who we are principles
     grid; B2B pages keep the numbered .value-card-num. */
  .value-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--accent-secondary);
    color: var(--ink);
    flex-shrink: 0;
  }
  .value-card-icon svg {
    width: 22px;
    height: 22px;
    display: block;
  }
  .value-card h3 {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-xl);
    font-weight: var(--w-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
  }
  .value-card p {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
  }
  @media (max-width: 880px) {
    .value-grid { grid-template-columns: 1fr; gap: 18px; }
  }
  @media (max-width: 720px) {
    .value-grid-section { padding: 72px 0; }
    .value-grid-intro { margin-bottom: 36px; }
    .value-card { padding: 26px; }
  }

  /* ============================================================
     SOLUTION PAGES — Comparison section
     Editorial split-screen "before / after" verdict on a plain
     white paper surface so the cards themselves carry all the
     contrast.

       • The "before" card is the muted past tense: borderless
         paper-2 fill, a standard .eyebrow ("Today"), washed-out
         ink-3 type and circular gray X marks.
       • The "after" card is the deep brand-indigo present tense:
         solid --brand-primary-900 fill with a large, low-opacity WTE
         icon watermark bleeding out of the upper-right corner
         (clipped by the card's overflow: hidden), a brand-yellow
         eyebrow ("The smarter way"), white type, and brand-yellow
         circular check marks with an indigo check glyph.
       • Each row is a labelled mini-record (small uppercase
         category, then the sentence) so the cards read as a chart,
         not a bullet list.
       • Each card foot is a full-width, centred CTA (no arrow
         glyphs): the left card uses a paper-3-on-hover ghost
         button; the right card uses the default brand-yellow
         .btn-primary so it punches off the deep-indigo card.
     ============================================================ */
  .comparison-section {
    padding: 120px 0;
    background: var(--paper);
  }

  .comparison-intro {
    max-width: 720px;
    margin: 0 0 64px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .comparison-intro .h2 { margin: 0; }
  .comparison-intro .h2-sub { margin: 0; }

  /* Stage holds the two cards and the centre badge. Positioned so
     the badge can ride on top of the gap between cards. */
  .comparison-stage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
  }

  /* Card shell — both variants share spacing + radius so they sit
     on the same baseline; the variants below diverge on tone. */
  .comparison-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 36px 36px 32px;
    border-radius: 20px;
    isolation: isolate;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  }

  /* ---- BEFORE: the "today" card — warm, faded, past-tense ----
     Flat paper-2 surface, no border, no gloss highlight, no drop
     shadow. The card carries its tone from the warm fill alone. */
  .comparison-card--before {
    background: var(--paper-2);
    border: 0;
    color: var(--ink-2);
    box-shadow: none;
  }

  /* ---- AFTER: the "with WTE" card — deep brand indigo (accent-
     deep). The card carries a large, low-opacity WTE icon
     watermark in the upper-right that bleeds outside the card's
     bounds (clipped by overflow: hidden). All foreground content
     sits on a stacking context above the watermark. */
  .comparison-card--after {
    background: var(--brand-primary-900);
    color: #ffffff;
    border: 0;
    box-shadow: none;
    overflow: hidden;
  }
  .comparison-card-watermark {
    position: absolute;
    top: -10%;
    right: -8%;
    width: 38.4%;
    height: auto;
    pointer-events: none;
    user-select: none;
    /* Solid-fill SVG → flip to pure white via brightness/invert,
       then knock down with opacity so it reads as a quiet
       background mark, not a foreground graphic. */
    filter: brightness(0) invert(1);
    opacity: 0.08;
    z-index: 0;
  }
  .comparison-card--after > .comparison-card-head,
  .comparison-card--after > .comparison-rows,
  .comparison-card--after > .comparison-card-foot {
    position: relative;
    z-index: 1;
  }

  /* ---- Card head ---- */
  .comparison-card-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .comparison-card--before .comparison-card-eyebrow { color: var(--ink-3); }
  .comparison-card--after  .comparison-card-eyebrow { color: var(--accent-secondary); }

  .comparison-card-title {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-2xl);
    font-weight: var(--w-semibold);
    line-height: 1.15;
    letter-spacing: var(--ls-tight);
  }
  .comparison-card--before .comparison-card-title { color: var(--ink); }
  .comparison-card--after  .comparison-card-title { color: #ffffff; }

  .comparison-card-dek {
    margin: 0;
    max-width: 38ch;
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
  }
  .comparison-card--before .comparison-card-dek { color: var(--ink-3); }
  .comparison-card--after  .comparison-card-dek { color: #d6dafd; }

  /* ---- Rows: labelled mini-records ---- */
  .comparison-rows {
    list-style: none;
    counter-reset: cmp;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .comparison-row {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 14px;
    padding: 18px 0;
    border-top: 1px solid;
  }
  .comparison-row:first-child { border-top: 0; padding-top: 6px; }
  .comparison-row:last-child  { padding-bottom: 4px; }
  .comparison-card--before .comparison-row { border-top-color: #18141014; }
  /* Soft white hairline that reads against the deep-indigo card
     surface without flooding it. */
  .comparison-card--after  .comparison-row { border-top-color: #ffffff1f; }

  .comparison-row-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    border-radius: 999px;
    flex-shrink: 0;
  }
  .comparison-row-mark svg { width: 12px; height: 12px; display: block; }
  .comparison-card--before .comparison-row-mark {
    background: var(--paper-3);
    color: var(--ink-3);
  }
  /* Right card mark: brand-yellow circle with the indigo check
     glyph, so it pops off the deep-indigo card surface like a
     spotlight and mirrors the brand's primary/secondary pairing. */
  .comparison-card--after .comparison-row-mark {
    background: var(--accent-secondary);
    color: var(--ink);
  }
  .comparison-card--after .comparison-row-mark svg { width: 13px; height: 13px; }

  .comparison-row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  /* Row labels use the standard .eyebrow class on both cards.
     Left card inherits the default .eyebrow ink-2 colour (reads on
     paper-2). Right card flips to brand-yellow so the small caps
     read crisply on the deep-indigo surface. */
  .comparison-card--after .comparison-row-label.eyebrow,
  .comparison-card--after .eyebrow.comparison-row-label { color: var(--accent-secondary); }
  .comparison-row-body p {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
  }
  .comparison-card--before .comparison-row-body p { color: var(--ink-2); }
  .comparison-card--after  .comparison-row-body p { color: #e8eafe; }

  /* ---- Foot CTA — anchors each card to the contact section ----
     Both cards drop the same ghost-style button into the foot.
     The .--dark variant is the white-on-indigo flip used by the
     "after" card so the button stays legible on the deep surface. */
  .comparison-card-foot {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-top: auto;
    padding-top: 8px;
  }
  .comparison-card-cta {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
  }
  /* Left-card CTA sits on a paper-2 surface, so the default
     btn-ghost hover (paper-2 fill) would disappear into the card.
     Bump it to paper-3 here so the hover still reads. */
  .comparison-card--before .comparison-card-cta:hover {
    background: var(--paper-3);
    border-color: var(--rule-strong);
  }
  .comparison-card--before .comparison-card-cta:active {
    background: var(--paper);
  }

  /* Solid variant — the right card is now deep indigo, so the
     default .btn-primary brand-yellow CTA reads beautifully and
     mirrors the global "Talk to us" topbar treatment. We just
     re-state the colours here to make the rule self-contained
     and to override any cascade specificity issues. */
  .comparison-card-cta--solid {
    background: var(--cta);
    color: var(--ink);
    border-color: var(--cta);
  }
  .comparison-card-cta--solid:hover {
    background: var(--cta-hover);
    border-color: var(--cta-hover);
    color: var(--ink);
  }
  .comparison-card-cta--solid:active {
    background: var(--cta-active);
    border-color: var(--cta-active);
    color: var(--ink);
  }

  /* ---- Responsive ---- */
  @media (max-width: 880px) {
    .comparison-stage { grid-template-columns: 1fr; gap: 20px; }
  }
  @media (max-width: 720px) {
    .comparison-section { padding: 72px 0; }
    .comparison-intro { margin-bottom: 40px; }
    .comparison-card { padding: 28px 26px 26px; gap: 22px; }
    .comparison-card-title { font-size: var(--text-xl); }
    .comparison-stat-value { font-size: var(--text-xl); }
  }
  @media (prefers-reduced-motion: reduce) {
    .comparison-card { transition: none; }
  }

  /* ============================================================
     SOLUTION PAGES — "Why it matters" final-style closer
     Reuses the home page .final two-column layout (copy + app
     screens) and swaps the download CTAs for a quiet legal-caption
     line, separated from the body by a hairline rule. Sits on
     paper-2 so it reads as a coda after the white comparison
     section above it, but stays calmer than the deep contact band
     that follows.
     ============================================================ */
  .final--caption { background: var(--paper-2); padding: 120px 0 96px; }
  .final--caption .final-content { max-width: 560px; gap: 0; }
  .final--caption .final-sub { margin: 22px 0 24px; max-width: 56ch; }
  .final-caption {
    margin: 0;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    max-width: 56ch;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-style: italic;
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
  }
  /* Side-by-side closing block — eyebrow + heading sit in the left
     column, the subheading and italic caption sit in the right column.
     Drops the optional image visual; both columns are text and the
     grid keeps them top-aligned so the eyebrow lines up visually with
     the first line of the supporting copy. Pair with .final--caption. */
  .final--split .final-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 80px;
  }
  .final--split .final-content {
    max-width: none;
    gap: 0;
  }
  .final--split .final-content--lede .h2 {
    margin: 22px 0 0;
  }
  .final--split .final-content--detail {
    /* Push the right column down by the exact vertical space the left
       column's eyebrow occupies (eyebrow line-height + h2's 22px
       margin-top) so the first line of the supporting copy lines up
       with the top of the heading, not the eyebrow above it. */
    padding-top: calc(var(--text-xs) * var(--lh-base) + 22px);
  }
  .final--split .final-content--detail .final-sub {
    margin: 0 0 24px;
    max-width: 56ch;
  }
  .final--split .final-content--detail .final-caption {
    margin: 0;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    max-width: 56ch;
  }
  @media (max-width: 880px) {
    .final--caption { padding: 80px 0 64px; }
    .final--split .final-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .final--split .final-content--detail { padding-top: 0; }
  }

  /* ============================================================
     SOLUTION PAGES — Cross-sell strip
     "Also relevant for…" row that links sideways between sibling
     organisation pages. Smaller cards, paper-2 surface so it sits
     calmer than the value grid.
     ============================================================ */
  .cross-sell { padding: 96px 0; background: var(--paper-2); }
  .cross-sell-intro {
    max-width: 720px;
    margin: 0 0 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .cross-sell-intro .eyebrow { color: var(--ink-3); }
  .cross-sell-intro h2 {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-xl);
    font-weight: var(--w-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
  }
  .cross-sell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
  }
  .cross-sell-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: 12px;
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink);
    transition: border-color .25s ease, color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
  }
  .cross-sell-card .arrow {
    display: inline-block;
    color: var(--ink-3);
    transition: color .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .cross-sell-card:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
  }
  .cross-sell-card:hover .arrow {
    color: var(--accent-secondary);
    transform: translateX(4px);
  }
  @media (max-width: 720px) {
    .cross-sell { padding: 72px 0; }
  }

  /* ============================================================
     SERVICE PARTNER — criteria checklist
     "What we look for" — a vertical list of partner criteria,
     each with a check icon. Sits on paper background.
     ============================================================ */
  .criteria { padding: 120px 0; }
  .criteria-intro {
    max-width: 720px;
    margin: 0 0 48px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .criteria-intro .h2 { margin: 0; }
  .criteria-intro .h2-sub { margin: 0; }
  .criteria-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
  }
  .criteria-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px;
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: 12px;
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
  }
  .criteria-item strong {
    display: block;
    margin-bottom: 4px;
    font-weight: var(--w-semibold);
    color: var(--ink);
  }
  .criteria-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    background: var(--accent-secondary);
    color: var(--ink);
    margin-top: 2px;
  }
  .criteria-check svg { width: 14px; height: 14px; display: block; }
  /* Numbered lozenge variant — same circular pill as .criteria-check,
     but holds a two-digit editorial counter (01, 02, …) instead of
     the inline check glyph. Sized for the bento layout where the
     lozenge sits stacked above the heading rather than inline. */
  .criteria-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 999px;
    background: var(--accent-secondary);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-semibold);
    line-height: 1;
    letter-spacing: var(--ls-snug);
    font-variant-numeric: tabular-nums;
  }

  /* ---------- Bento variant ----------
     Asymmetric 3-column grid that pairs each row of cards as
     small + large (and large + small on the next row), creating
     a Z-shaped rhythm. Longer copy lives in the wider cells.
     Cards switch to a vertical column layout — icon lozenge at
     the top, heading and body stacked beneath — so the larger
     cells get visual weight from internal scale, not just area.
     Falls back to a single-column stack on narrow viewports. */
  .criteria-list--bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .criteria-list--bento .criteria-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 32px;
  }
  .criteria-list--bento .criteria-item--sm { grid-column: span 1; }
  .criteria-list--bento .criteria-item--lg { grid-column: span 2; padding: 36px 40px; }
  .criteria-list--bento .criteria-body { display: block; }
  .criteria-list--bento .criteria-body strong {
    margin-bottom: 8px;
    font-size: var(--text-lg);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
  }
  .criteria-list--bento .criteria-item--lg .criteria-body strong {
    font-size: var(--text-xl);
  }
  .criteria-list--bento .criteria-body p {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
    max-width: 60ch;
  }

  @media (max-width: 880px) {
    .criteria-list--bento { grid-template-columns: 1fr; gap: 14px; }
    .criteria-list--bento .criteria-item--sm,
    .criteria-list--bento .criteria-item--lg {
      grid-column: span 1;
      padding: 28px;
    }
    .criteria-list--bento .criteria-item--lg .criteria-body strong {
      font-size: var(--text-lg);
    }
  }
  @media (max-width: 720px) {
    .criteria { padding: 72px 0; }
    .criteria-intro { margin-bottom: 32px; }
  }

  /* ============================================================
     SERVICE PARTNER — How it works (3-step process)
     ============================================================ */
  .steps { padding: 120px 0; background: var(--paper-2); }
  .steps-intro {
    max-width: 720px;
    margin: 0 0 56px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .steps-intro .h2 { margin: 0; }
  .steps-intro .h2-sub { margin: 0; }
  .steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    counter-reset: step;
  }
  .step {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px;
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: 16px;
    box-shadow: 0 16px 40px -32px #1814101f;
  }
  .step-number {
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase !important;
    color: var(--ink-3);
  }
  .step h3 {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-xl);
    font-weight: var(--w-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
  }
  .step p {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
  }
  @media (max-width: 880px) {
    .steps-grid { grid-template-columns: 1fr; gap: 18px; }
  }
  @media (max-width: 720px) {
    .steps { padding: 72px 0; }
    .step { padding: 26px; }
  }

  /* ============================================================
     SERVICE PARTNER — Current partners strip
     A simple grid of partner names + descriptors, mirroring the
     b2b-included rhythm but a touch lighter (no border rules
     between rows — just a card-per-partner).
     ============================================================ */
  .partners-strip { padding: 120px 0; }
  .partners-intro {
    max-width: 720px;
    margin: 0 0 48px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .partners-intro .h2 { margin: 0; }
  .partners-intro .h2-sub { margin: 0; }
  .partners-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }
  .partners-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 22px;
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: 12px;
    font-family: var(--font);
    font-size: var(--text-md);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
  }
  .partners-list li strong {
    color: var(--ink);
    font-size: var(--text-base);
    font-weight: var(--w-semibold);
  }
  .partners-list li span {
    color: var(--ink-3);
    font-size: var(--text-sm);
  }
  @media (max-width: 720px) {
    .partners-strip { padding: 72px 0; }
    .partners-intro { margin-bottom: 32px; }
  }

  /* ============================================================
     PRESS PAGE — featured TV interview block
     A two-column section directly under the hero: copy on the
     left, a portrait "thumbnail" of the interview on the right
     with a play badge and a small caption strip. Anchor-wrapped
     so the whole tile is a single, accessible link.
     ============================================================ */
  .press-feature { padding: 96px 0 64px; background: var(--paper); }
  .press-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .press-feature-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 48ch;
  }
  .press-feature-content .h2 { margin: 0; }
  .press-feature-content .h2-sub { margin: 0; }

  .press-feature-visual {
    display: block;
    width: 100%;
  }

  /* YouTube facade — shows a static thumbnail + YouTube-style play
     button until clicked, then swaps in an autoplay iframe. Avoids
     loading the YouTube SDK + tracking until the user opts in. */
  .yt-facade {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    background: #000;
    box-shadow: 0 28px 60px -36px #18141033;
  }
  .yt-facade-button {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: block;
  }
  .yt-facade-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .25s ease;
  }
  .yt-facade-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(56px, 8vw, 72px);
    height: auto;
    display: inline-flex;
    pointer-events: none;
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
  }
  .yt-facade-play svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .yt-facade-play-bg {
    fill: #212121;
    fill-opacity: .8;
    transition: fill .15s ease, fill-opacity .15s ease;
  }
  .yt-facade-button:hover .yt-facade-play-bg,
  .yt-facade-button:focus-visible .yt-facade-play-bg {
    fill: #f00;
    fill-opacity: 1;
  }
  .yt-facade-button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
  }
  .yt-facade iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
  .yt-facade.is-playing .yt-facade-button { display: none; }

  @media (max-width: 880px) {
    .press-feature { padding: 64px 0 32px; }
    .press-feature-grid { grid-template-columns: 1fr; gap: 36px; }
  }

  /* ============================================================
     PRESS PAGE — "In the media" article list
     A clean, ruled list of articles / podcasts / interviews,
     each row showing outlet · title · date · arrow. Reuses the
     b2b-included rhythm (top + bottom rule per row) but the rows
     are full-width anchors with hover treatment.
     ============================================================ */
  .press-list-section { padding: 96px 0 120px; background: var(--paper); }
  .press-list-intro {
    max-width: 720px;
    margin: 0 0 48px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .press-list-intro .h2 { margin: 0; }
  .press-list-intro .h2-sub { margin: 0; }

  .press-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule-strong);
  }
  .press-list-item { border-bottom: 1px solid var(--rule); }
  .press-list-link {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 26px 4px;
    color: var(--ink);
    transition: background-color .25s ease, padding-inline .25s ease;
  }
  /* Outlet column now hosts the publication's official logo as an
     <img>. The <img> alt text serves screen readers (no visible text
     fallback). Logos are rendered at a fixed visual height so they
     occupy roughly the same vertical rhythm as the previous all-caps
     wordmark, regardless of source aspect ratio. They sit slightly
     dimmed by default and brighten on row hover, with stronger dimming
     for non-active rows during cursor follow. */
  .press-list-outlet {
    display: flex;
    align-items: center;
    min-height: 28px;
  }
  .press-list-outlet img {
    display: block;
    width: auto;
    height: auto;
    max-height: 22px;
    max-width: 100%;
    object-fit: contain;
    opacity: .7;
    transition: opacity .25s ease, filter .25s ease;
  }
  .press-list-title {
    font-family: var(--font);
    font-size: var(--text-lg);
    font-weight: var(--w-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
  }
  .press-list-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 18px;
    color: var(--ink-3);
  }
  .press-list-date {
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-medium);
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
    white-space: nowrap;
  }
  .press-list-arrow {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    color: var(--ink-3);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), color .25s ease;
  }
  .press-list-link:hover {
    background: var(--paper-2);
    padding-inline: 18px;
  }
  .press-list-link:hover .press-list-title { color: var(--accent); }
  .press-list-link:hover .press-list-outlet img { opacity: 1; }
  .press-list-link:hover .press-list-arrow {
    color: var(--accent);
    transform: translateX(4px);
  }
  .press-list-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
  }

  /* Cursor-follow hover thumbnail.
     When hovering a row on a fine pointer device, the article's preview
     image floats near the cursor and the other rows dim. The floating
     element is `position: fixed`, so the JS only needs to translate it
     by the raw clientX/clientY values (eased toward the target each
     frame). The inner element offsets itself to slide in from the side
     the cursor entered the row from. */
  .press-list.is-hovering .press-list-item.is-dim .press-list-link {
    color: var(--ink-3);
  }
  .press-list.is-hovering .press-list-item.is-dim .press-list-title {
    color: var(--ink-3);
  }
  .press-list.is-hovering .press-list-item.is-dim .press-list-outlet img {
    opacity: .25;
    filter: grayscale(100%);
  }
  .press-list.is-hovering .press-list-link:hover {
    background: transparent;
    padding-inline: 4px;
  }
  .press-list.is-hovering .press-list-link:hover .press-list-title {
    color: var(--ink);
  }
  .press-list.is-hovering .press-list-link:hover .press-list-arrow {
    color: var(--ink);
    transform: translateX(4px);
  }

  .press-hover-thumb {
    --thumb-max: clamp(220px, 20vw, 280px);
    position: fixed;
    top: 0;
    left: 0;
    /* Bottom-LEFT corner of the image anchors at the cursor's top-RIGHT
       corner (cursor treated as a small square at its hotspot), with an
       equal H/V margin separating the two corners. Rotation pivots from
       the same bottom corner so the image swings like a pendulum hanging
       off a pin. JS sets marginTop = -(offsetHeight + MARGIN) each frame
       so the bottom edge sits MARGIN px above the cursor's Y. */
    margin-left: 30px;
    pointer-events: none;
    z-index: 80;
    opacity: 0;
    transition: opacity .22s ease;
    will-change: transform, opacity;
    transform-origin: 0 100%;
  }
  .press-hover-thumb[data-side="left"] {
    /* Mirror: bottom-RIGHT corner anchors at cursor. JS sets margin-left
       dynamically based on the rendered width. */
    margin-left: 0;
    transform-origin: 100% 100%;
  }
  .press-hover-thumb.is-active { opacity: 1; }
  .press-hover-thumb-inner {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
      0 1px 0 rgba(255,255,255,.6) inset,
      0 26px 60px -22px rgba(15,21,54,.45);
    background: var(--paper-2);
    transform: translate3d(0, 0, 0) scale(.96);
    transition:
      transform .55s cubic-bezier(.16, 1, .3, 1),
      opacity   .35s ease;
  }
  .press-hover-thumb.is-active .press-hover-thumb-inner {
    transform: translate3d(0, 0, 0) scale(1);
  }
  .press-hover-thumb-inner img {
    display: block;
    width: auto;
    height: auto;
    max-width: var(--thumb-max);
    max-height: var(--thumb-max);
    object-fit: contain;
  }
  /* Slide-in start positions per entry direction. The active state above
     resets translate to 0, so the inner element eases back to centre. */
  .press-hover-thumb.is-active .press-hover-thumb-inner[data-dir="top"] {
    animation: press-thumb-from-top .55s cubic-bezier(.16, 1, .3, 1);
  }
  .press-hover-thumb.is-active .press-hover-thumb-inner[data-dir="bottom"] {
    animation: press-thumb-from-bottom .55s cubic-bezier(.16, 1, .3, 1);
  }
  .press-hover-thumb.is-active .press-hover-thumb-inner[data-dir="left"] {
    animation: press-thumb-from-left .55s cubic-bezier(.16, 1, .3, 1);
  }
  .press-hover-thumb.is-active .press-hover-thumb-inner[data-dir="right"] {
    animation: press-thumb-from-right .55s cubic-bezier(.16, 1, .3, 1);
  }
  @keyframes press-thumb-from-top {
    from { transform: translate3d(0, -28px, 0) scale(.96); }
    to   { transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes press-thumb-from-bottom {
    from { transform: translate3d(0, 28px, 0) scale(.96); }
    to   { transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes press-thumb-from-left {
    from { transform: translate3d(-28px, 0, 0) scale(.96); }
    to   { transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes press-thumb-from-right {
    from { transform: translate3d(28px, 0, 0) scale(.96); }
    to   { transform: translate3d(0, 0, 0) scale(1); }
  }

  @media (max-width: 880px) {
    .press-list-section { padding: 64px 0 96px; }
    .press-list-intro { margin-bottom: 32px; }
    .press-list-link {
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "outlet  arrow"
        "title   title"
        "date    date";
      gap: 6px 14px;
      padding: 22px 4px;
    }
    .press-list-outlet { grid-area: outlet; }
    .press-list-title  { grid-area: title; font-size: var(--text-base); }
    .press-list-meta   { grid-area: date; }
    .press-list-link:hover { padding-inline: 12px; }
    .press-list-arrow {
      grid-area: arrow;
      align-self: start;
      transform: translateY(2px);
    }
    /* Floating thumbnail is desktop-only; the JS gate already covers
       coarse pointers, but hide the element defensively at narrow widths. */
    .press-hover-thumb { display: none; }
  }

  /* ============================================================
     PRESS PAGE — contact host meta line
     The press page reuses the .contact-host card from the B2B
     contact section but adds a meta row (email · phone) under
     the role.
     ============================================================ */
  .contact-host-meta {
    margin: 6px 0 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    font-family: var(--font);
    font-size: var(--text-sm);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
  }
  .contact-host-meta a {
    color: var(--ink-2);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
    transition: color .2s ease, border-color .2s ease;
  }
  .contact-host-meta a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  /* ============================================================
     WHO WE ARE — Mission ("Why we exist")
     A two-column narrative section: eyebrow + headline on the
     left, supporting paragraph on the right. Sits flush on the
     default paper background, separated from neighbouring
     sections by hairline rules.
     ============================================================ */
  /* Two-column layout (Relume Gallery 26 pattern): heading + lede on the
     left, scrollable image carousel on the right that bleeds to the
     viewport's right edge. Section uses overflow: hidden so the carousel
     can extend past the right column without affecting page width. */
  .who-mission {
    padding: 120px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    overflow: hidden;
  }
  /* Three rows: eyebrow on its own row at the top of the left column,
     then headline (left) and gallery (right) start at the same y on row
     2, with the lede sitting under the headline on row 3. The gallery
     spans rows 2-3 so it can grow to match the text height naturally. */
  .who-mission-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    column-gap: 0;
    row-gap: 22px;
  }
  /* All three text-column elements share the same left padding so they
     align with the rest of the page's wrap content, and the same right
     padding so they keep breathing room from the gallery. */
  .who-mission-eyebrow,
  .who-mission-headline,
  .who-mission-lede {
    padding-left: max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter)));
    padding-right: 64px;
    min-width: 0;
  }
  .who-mission-eyebrow {
    grid-column: 1;
    grid-row: 1;
  }
  .who-mission-headline {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    max-width: calc(22ch + max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter))) + 64px);
  }
  .who-mission-lede {
    grid-column: 1;
    grid-row: 3;
    margin: 0;
    max-width: calc(56ch + max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter))) + 64px);
    /* Lede is now a wrapper for one or more <p> children, so the
       typography lives on the paragraphs and a flex column gives even
       spacing between them. */
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .who-mission-lede p {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
  }
  .who-mission-lede a {
    color: var(--ink);
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 1px;
    transition: color .2s ease, border-color .2s ease;
  }
  .who-mission-lede a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  /* Gallery — auto-scrolling marquee. Two duplicate sets are translated
     by -50% in a continuous loop so the seam is invisible. The gallery
     spans rows 2-3 in the layout grid so its top aligns with the
     headline (row 2) and it extends past the lede on the left. The
     horizontal mask gradient softly fades slides in/out at the edges. */
  .who-mission-gallery {
    grid-column: 2;
    grid-row: 2 / 4;
    min-width: 0;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .who-mission-track {
    display: flex;
    width: max-content;
    animation: who-mission-scroll 40s linear infinite;
    will-change: transform;
  }
  .who-mission-set {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-right: 24px;
    flex-shrink: 0;
  }
  .who-mission-slide {
    flex: 0 0 380px;
    min-width: 0;
  }
  .who-mission-photo {
    margin: 0;
    aspect-ratio: 4 / 3;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: var(--paper-2);
    border: 1px solid var(--rule-strong);
  }
  .who-mission-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  @keyframes who-mission-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  @media (max-width: 880px) {
    .who-mission { padding: 72px 0; }
    .who-mission-layout {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto;
      column-gap: 0;
      row-gap: 22px;
    }
    .who-mission-eyebrow,
    .who-mission-headline,
    .who-mission-lede {
      padding: 0 var(--gutter);
      max-width: none;
    }
    .who-mission-eyebrow  { grid-row: 1; }
    .who-mission-headline { grid-row: 2; }
    .who-mission-lede     { grid-row: 3; }
    .who-mission-gallery {
      grid-column: 1;
      grid-row: 4;
      margin-top: 18px;
    }
    .who-mission-set { gap: 16px; padding-right: 16px; }
    .who-mission-slide { flex: 0 0 280px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .who-mission-track { animation: none; }
  }

  /* ============================================================
     WHO WE ARE — Principles (4-up value grid variant)
     Reuses .value-grid-section / .value-card from the solution
     pages, but on a paper-2 surface and laid out as a 4-up grid
     on desktop, 2-up on tablet, 1-up on mobile.
     ============================================================ */
  .value-grid-section--paper { background: var(--paper-2); }

  .value-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (max-width: 1080px) {
    .value-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .value-grid--four { grid-template-columns: 1fr; }
  }

  /* ============================================================
     WHO WE ARE — Backed by (partner marquee)
     Intro block on the wrap, then a full-bleed marquee of
     partner avatars + names that scrolls horizontally. Mirrors
     the press marquee mechanic but with avatar pills instead of
     bare logos.
     ============================================================ */
  .backed-by {
    padding: 120px 0 96px;
    background: var(--paper-2);
    overflow: hidden;
    position: relative;
  }
  .backed-by-intro {
    max-width: 720px;
    margin: 0 0 56px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .backed-by-intro .h2 { margin: 0; }
  .backed-by-intro .h2-sub { margin: 0; max-width: 56ch; }

  .backed-by-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .backed-by-track {
    display: flex;
    width: max-content;
    animation: backed-by-scroll 50s linear infinite;
    will-change: transform;
  }
  .backed-by:hover .backed-by-track { animation-play-state: paused; }
  .backed-by-set {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 16px;
    flex-shrink: 0;
  }
  .backed-by-item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 22px 12px 14px;
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    box-shadow: 0 12px 28px -28px #1814103d;
    flex-shrink: 0;
  }
  .backed-by-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    flex-shrink: 0;
  }
  .backed-by-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .backed-by-name {
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-semibold);
    line-height: 1;
    letter-spacing: var(--ls-tight);
    color: var(--ink);
    white-space: nowrap;
  }
  @keyframes backed-by-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .backed-by-track { animation: none; }
  }
  @media (max-width: 720px) {
    .backed-by { padding: 72px 0 56px; }
    .backed-by-intro { margin-bottom: 36px; }
    .backed-by-item { padding: 10px 18px 10px 12px; gap: 12px; }
    .backed-by-avatar { width: 36px; height: 36px; }
    .backed-by-name { font-size: var(--text-sm); }
  }

  /* ============================================================
     WHO WE ARE — Team intro link
     Inline link inside the team-intro h2-sub paragraph, used to
     point at Charkos. Subtle underline + accent on hover so it
     reads as a link without competing with the surrounding copy.
     ============================================================ */
  .team-intro .h2-sub a {
    color: var(--ink);
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 1px;
    transition: color .2s ease, border-color .2s ease;
  }
  .team-intro .h2-sub a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  .team-bio a {
    color: var(--ink);
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 1px;
    transition: color .2s ease, border-color .2s ease;
  }
  .team-bio a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  /* ============================================================
     BLOG PAGE — featured article block
     The big article that opens the page below the centered hero.
     The whole anchor is one card surface: a full-bleed landscape
     image on the left flush with the card edge, and a right-hand
     content column with internal padding holding the eyebrow,
     headline (h2 with em-mark), lede, byline and a "Read article →"
     text CTA. Mirrors the press-feature rhythm so the two pages
     feel related.
     ============================================================ */
  /* No explicit background — inherits the body's white. Letting the
     section be transparent prevents the next section's background
     from painting over the card's hover shadow. */
  .blog-feature { padding: 88px 0 24px; }
  .blog-feature-card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
    color: var(--ink);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 28px 60px -42px #18141026;
    transition:
      transform .45s cubic-bezier(.2,.7,.2,1),
      box-shadow .45s cubic-bezier(.2,.7,.2,1),
      border-color .25s ease;
  }
  .blog-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 36px 72px -36px #1814103d;
    border-color: var(--rule-strong);
  }
  .blog-feature-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 6px;
  }

  .blog-feature-visual {
    position: relative;
    /* The grid stretches this column to match the content column's
       height (align-items: stretch on the parent), and the image fills
       it via inset:0 + object-fit:cover. The pixel min-height keeps
       the box visible even when the content column is unusually short.
       Card height is governed by the content column — keep its copy
       compact (see card-scale .h2 override below) and the image will
       stay at a comfortable landscape ratio.
       NB: aspect-ratio is intentionally avoided here — combining it
       with the grid stretch would over-size the box and overflow the
       card. */
    min-height: 320px;
    overflow: hidden;
    background: var(--paper-3);
  }
  .blog-feature-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
  }
  .blog-feature-card:hover .blog-feature-visual img {
    transform: scale(1.03);
  }

  .blog-feature-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    max-width: 52ch;
    padding: clamp(32px, 4vw, 56px);
  }
  /* Card-scale headline override — the global .h2 size (clamp 34-56px)
     is meant for full section headlines. Inside the featured card it
     would dwarf everything and force the card (and the image alongside)
     to be too tall. We bring it down to a card-appropriate size. */
  .blog-feature-content .h2 {
    margin: 0;
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: var(--lh-snug);
  }
  .blog-feature-content .h2-sub {
    margin: 0;
  }

  .blog-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: 4px;
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-semibold);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink);
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 4px;
    transition: color .25s ease, border-color .25s ease;
  }
  .blog-feature-cta-arrow {
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .blog-feature-card:hover .blog-feature-cta {
    color: var(--accent);
    border-color: var(--accent);
  }
  .blog-feature-card:hover .blog-feature-cta-arrow {
    transform: translateX(4px);
  }

  /* Byline — small avatar + name/meta two-line block. Used on both
     the feature card and at the foot of every grid card. */
  .blog-byline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
  }
  .blog-byline-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
    background: var(--paper-2);
    flex: 0 0 auto;
  }
  .blog-byline-text { display: flex; flex-direction: column; }
  .blog-byline-name {
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-semibold);
    line-height: 1.3;
    letter-spacing: var(--ls-snug);
    color: var(--ink);
    margin: 0;
  }
  .blog-byline-meta {
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--w-regular);
    line-height: 1.3;
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
    margin: 2px 0 0;
    text-transform: none;
  }

  @media (max-width: 880px) {
    .blog-feature { padding: 56px 0 16px; }
    .blog-feature-card { grid-template-columns: 1fr; }
    .blog-feature-visual { aspect-ratio: 16 / 10; min-height: 0; }
  }

  /* ============================================================
     BLOG PAGE — list section (intro + filter + grid + load more)
     ============================================================ */
  /* Same reasoning as .blog-feature — transparent background lets the
     featured card's hover shadow bleed naturally into the gap between
     the two sections instead of being clipped by an opaque white fill. */
  .blog-list-section { padding: 80px 0 120px; }
  .blog-list-intro {
    max-width: 720px;
    margin: 0 0 36px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .blog-list-intro .h2 { margin: 0; }
  .blog-list-intro .h2-sub { margin: 0; }

  /* --- Category filter --- */
  .blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 40px;
    padding: 0 0 28px;
    border-bottom: 1px solid var(--rule);
  }
  .blog-filter-pill {
    appearance: none;
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  }
  .blog-filter-pill:hover {
    background: var(--paper-2);
    color: var(--ink);
  }
  .blog-filter-pill:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  .blog-filter-pill.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  .blog-filter-pill.is-active:hover {
    background: var(--ink-2);
    border-color: var(--ink-2);
  }

  /* --- Article grid --- */
  .blog-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 28px;
  }
  .blog-card {
    display: flex;
    flex-direction: column;
  }
  .blog-card.is-collapsed,
  .blog-card.is-filtered-out {
    display: none;
  }

  .blog-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--ink);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .blog-card-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 6px;
    border-radius: 14px;
  }

  /* Thumbnail */
  .blog-card-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 14px;
    background: var(--paper-2);
    margin-bottom: 22px;
    transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s cubic-bezier(.2,.7,.2,1);
  }
  .blog-card-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
  }
  .blog-card-link:hover .blog-card-thumb {
    transform: translateY(-2px);
    box-shadow: 0 24px 48px -28px #18141040;
  }
  .blog-card-link:hover .blog-card-thumb img {
    transform: scale(1.04);
  }

  /* Logo-style thumbnail (used for service-partner avatars) — the
     image is a centered logo on a tinted gradient backdrop instead
     of a full-bleed photograph. */
  .blog-card-thumb--logo {
    background:
      radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
      var(--paper-2);
  }
  .blog-card-thumb--logo img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: clamp(64px, 22%, 96px);
    height: clamp(64px, 22%, 96px);
    object-fit: contain;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 12px 28px -16px #18141040;
    padding: 14px;
    transition: transform .55s cubic-bezier(.2,.7,.2,1);
  }
  .blog-card-link:hover .blog-card-thumb--logo img {
    transform: scale(1.06);
  }
  /* Per-partner background tints — each is a soft, newspaper-y wash
     that nods to the partner's brand without being shouty. */
  .blog-card-thumb--logo[data-tint="dak"]       { background-color: #eaf5ff; }
  .blog-card-thumb--logo[data-tint="wundertax"] { background-color: #f4f0e6; }
  .blog-card-thumb--logo[data-tint="bunq"]      { background-color: #efeaff; }
  .blog-card-thumb--logo[data-tint="vodafone"]  { background-color: #ffeaea; }

  /* Category badge — pinned to the top-left of the thumbnail. Used
     on both grid cards and the featured card. */
  .blog-card-category {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 14px -8px rgba(24,20,16,.25);
    font-family: var(--font);
    font-size: 10.5px;
    font-weight: var(--w-semibold);
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
  }
  /* Optional per-category tint on the dot before the label */
  .blog-card-category::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 8px;
    background: var(--ink-3);
  }
  /* Per-category dot tints — keyed off the live CMS category slugs.
     Unknown / future slugs fall through to the default ink-3 dot
     defined above, so the badge always renders. */
  .blog-card-category[data-cat="getting-started"]::before   { background: var(--brand-primary-500); }
  .blog-card-category[data-cat="living-in-germany"]::before { background: var(--brand-secondary-500); }
  .blog-card-category[data-cat="work-career"]::before       { background: var(--brand-primary-700); }
  .blog-card-category[data-cat="finance-banking"]::before   { background: #d68b3a; }
  .blog-card-category[data-cat="health-insurance"]::before  { background: #d6543a; }
  .blog-card-category[data-cat="language-culture"]::before  { background: var(--ink-2); }

  /* Card body */
  .blog-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
  }
  .blog-card-readtime {
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
  }
  .blog-card-title {
    font-family: var(--font);
    font-size: var(--text-xl);
    font-weight: var(--w-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
    margin: 0;
    transition: color .25s ease;
  }
  .blog-card-link:hover .blog-card-title {
    color: var(--accent);
  }
  .blog-card-excerpt {
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
    margin: 0;
  }
  .blog-card-byline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
  }
  .blog-card-byline-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    object-fit: cover;
    background: var(--paper-2);
    flex: 0 0 auto;
  }
  .blog-card-byline-text {
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
  }

  /* Empty state shown by JS when the active filter has zero matches */
  .blog-empty {
    padding: 56px 0;
    text-align: center;
    border: 1px dashed var(--rule-strong);
    border-radius: 14px;
    background: var(--paper-2);
  }
  .blog-empty p {
    font-family: var(--font);
    font-size: var(--text-base);
    color: var(--ink-2);
    margin: 0;
  }

  /* --- Load more --- */
  .blog-load-more {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .blog-load-more[hidden] { display: none; }
  .blog-load-more .btn {
    min-width: 220px;
    justify-content: center;
  }
  .blog-load-more-arrow {
    display: inline-block;
    margin-left: 8px;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .blog-load-more .btn:hover .blog-load-more-arrow {
    transform: translateY(3px);
  }
  .blog-load-more-meta {
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-regular);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
    margin: 0;
  }

  @media (max-width: 1080px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 720px) {
    .blog-list-section { padding: 56px 0 96px; }
    .blog-list-intro { margin-bottom: 28px; }
    .blog-filter { margin-bottom: 28px; padding-bottom: 20px; }
    .blog-grid { grid-template-columns: 1fr; gap: 32px; }
    .blog-card-title { font-size: var(--text-lg); }
    .blog-load-more { margin-top: 40px; }
  }

  /* ============================================================
     ARTICLE PAGE — single blog post detail view (blog/article.html)
     A long-form reading template that pairs with the blog index.
     Served for any `/blog/:slug` URL via a vercel rewrite, populated
     at runtime by the page module (see /assets/js/articles.js).
     Sections, in vertical order:
       .article-hero          → centered light hero (back link,
                                category badge, H1, lede, byline,
                                share cluster)
       .article-cover-section → big 16:9 cover image
       .article-body-section  → two-column body grid:
                                  - .article-toc (sticky, desktop)
                                  - .article-prose (long-form text)
       .article-footer-section→ tag pills, author card, share row
       .article-related       → 3-up "Keep reading" grid (reuses
                                .blog-grid + .blog-card)
     The shared .final block + footer close out the page (no extra
     CSS needed — they're already styled).
     ============================================================ */

  /* --- Hero --------------------------------------------------- */
  /* Light surface, centered narrow column. Padding mirrors the
     .hero--center variant so the article feels like a sibling
     of the blog index, not a different design family. */
  .article-hero {
    padding: clamp(112px, 14vh, 168px) 0 clamp(32px, 5vh, 56px);
    background: var(--paper-2);
    text-align: center;
  }
  .article-hero .wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* Back-to-blog link — sits flush-left above the centered hero
     content so the reader can always escape upward without scrolling. */
  .article-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
    margin-bottom: clamp(28px, 5vh, 48px);
    transition: color .25s ease;
  }
  .article-back:hover { color: var(--ink); }
  .article-back-arrow {
    display: inline-block;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .article-back:hover .article-back-arrow {
    transform: translateX(-3px);
  }

  .article-hero-inner {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  /* The badge is shared with .blog-card-category, where it's
     absolutely-positioned over a thumbnail. Here it sits in-flow
     above the H1 — neutralise the absolute placement. */
  .article-hero-category {
    position: static;
    top: auto;
    left: auto;
  }

  .article-title {
    font-family: var(--font);
    font-size: var(--text-3xl);
    font-weight: var(--w-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tighter);
    color: var(--ink);
    margin: 0;
    max-width: 22ch;
  }
  /* Inherit the brush-mark behaviour wired up for .h2 em / .hero-title em.
     The global selector list doesn't include .article-title, so re-declare
     the same shape + draw-in animation here so an <em> word in the headline
     still gets the yellow brush. */
  .article-title em {
    font-style: normal;
    position: relative;
    display: inline;
    white-space: nowrap;
    isolation: isolate;
    --mark-color: var(--brand-secondary-500);
  }
  .article-title em::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -0.06em;
    right: -0.06em;
    bottom: -0.12em;
    height: 0.36em;
    background-color: var(--mark-color);
    -webkit-mask-image: var(--mark-shape, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'><path d='M5 5 C 90 14, 310 14, 395 6' stroke='black' stroke-width='7.5' stroke-linecap='butt' fill='none'/></svg>"));
            mask-image: var(--mark-shape, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'><path d='M5 5 C 90 14, 310 14, 395 6' stroke='black' stroke-width='7.5' stroke-linecap='butt' fill='none'/></svg>"));
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    pointer-events: none;
    /* No clip-path animation here: the article H1 is above the fold,
       so we just paint the mark immediately rather than waiting for
       the IntersectionObserver to add .is-drawn. */
  }

  .article-lede {
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
    margin: 0;
    max-width: 56ch;
  }

  /* Byline / meta / share cluster — single horizontal row on desktop,
     stacks vertically on mobile. */
  .article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 20px;
    margin-top: 12px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
    width: 100%;
    max-width: 640px;
  }

  .article-byline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    transition: opacity .2s ease;
  }
  .article-byline:hover { opacity: 0.75; }
  .article-byline-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
    background: var(--paper-3);
    flex: 0 0 auto;
  }
  .article-byline-text {
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  .article-byline-name {
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--w-semibold);
    line-height: 1.3;
    letter-spacing: var(--ls-snug);
    color: var(--ink);
  }
  .article-byline-meta {
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--w-regular);
    line-height: 1.3;
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
    margin-top: 2px;
  }

  .article-meta-divider {
    width: 1px;
    height: 24px;
    background: var(--rule-strong);
  }
  .article-meta-info {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-regular);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
  }
  .article-meta-dot {
    display: inline-block;
    margin: 0 6px;
    color: var(--ink-3);
  }

  /* Share cluster — small icon buttons that sit at the right end of the
     hero meta row on desktop, and re-appear in the article footer. */
  .article-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .article-share-label {
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--w-semibold);
    line-height: var(--lh-base);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-right: 4px;
  }
  .article-share-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--rule-strong);
    background: var(--paper);
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  }
  .article-share-btn:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    transform: translateY(-1px);
  }
  .article-share-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  .article-share-icon {
    width: 16px;
    height: 16px;
    display: block;
  }

  /* "Copied" toast — appears above the copy-link button for ~1.4s after
     a successful clipboard write (JS adds .is-copied to the button). */
  .article-share-copy {
    overflow: visible;
  }
  .article-share-copy-toast {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 4px);
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--w-medium);
    line-height: 1.3;
    letter-spacing: var(--ls-snug);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .article-share-copy.is-copied .article-share-copy-toast {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  @media (max-width: 720px) {
    .article-meta { flex-direction: column; gap: 16px; }
    .article-meta-divider { display: none; }
    .article-share { margin-left: 0; }
    .article-title { font-size: clamp(28px, 7vw, 38px); }
  }

  /* --- Cover image -------------------------------------------- */
  /* The image sits directly under the hero. Because the global
     `section { padding: 96px 0; }` rule would otherwise stack a
     huge gap above and below it, we collapse the section padding
     to a small visual breath that lets the cover sit right beneath
     the byline rule. */
  .article-cover-section {
    padding: 28px 0 0;
  }
  .article-cover {
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--paper-3);
    aspect-ratio: 16 / 9;
    box-shadow: 0 28px 60px -42px #18141026;
  }
  .article-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- Body grid ---------------------------------------------- */
  .article-body-section {
    padding: clamp(56px, 8vh, 96px) 0 clamp(64px, 9vh, 112px);
  }
  .article-body-grid {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 720px);
    justify-content: center;
    column-gap: clamp(40px, 6vw, 96px);
    row-gap: 32px;
    align-items: start;
  }

  /* Sticky TOC — sits to the left of the prose, follows the reader
     down the page. Hidden on tablet/mobile where the prose already
     fills the viewport. */
  .article-toc {
    position: sticky;
    top: 96px;
    align-self: start;
    padding-right: 16px;
  }
  .article-toc-eyebrow {
    margin: 0 0 14px;
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--w-semibold);
    line-height: var(--lh-base);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .article-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 1px solid var(--rule);
  }
  .article-toc-list li { margin: 0; }
  .article-toc-list a {
    display: block;
    padding: 4px 0 4px 16px;
    margin-left: -1px;
    border-left: 1px solid transparent;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-medium);
    line-height: 1.45;
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
    transition: color .2s ease, border-color .2s ease;
  }
  .article-toc-list a:hover {
    color: var(--ink);
    border-left-color: var(--ink);
  }
  .article-toc-list a.is-active {
    color: var(--ink);
    border-left-color: var(--ink);
  }

  /* --- Long-form prose ---------------------------------------- */
  /* Typography tuned for sustained reading. Line length ~70ch,
     comfortable line-height, generous heading hierarchy.
     Margins are explicit so the rhythm is predictable regardless of
     the order CMS-generated content might end up in. */
  .article-prose {
    color: var(--ink);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.7;
    letter-spacing: var(--ls-snug);
    max-width: 70ch;
  }
  .article-prose > * + * {
    margin-top: 1.4em;
  }
  .article-prose p {
    margin: 0;
    color: var(--ink-2);
  }
  .article-prose strong {
    color: var(--ink);
    font-weight: var(--w-semibold);
  }
  /* The global `* { font-style: normal !important }` rule turns plain
     <em> into upright text — fine on headlines (where <em> is the
     brush-mark accent), but inside body prose we want <em> to read as
     true italic emphasis. Restore italics inside .article-prose. */
  .article-prose em {
    font-style: italic !important;
  }
  .article-prose a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .2s ease, text-decoration-color .2s ease;
  }
  .article-prose a:hover {
    color: var(--accent-strong);
  }

  /* Headings — give every section heading a scroll margin so TOC
     anchor jumps land below the sticky topbar. */
  .article-prose h2,
  .article-prose h3,
  .article-prose h4 {
    color: var(--ink);
    font-family: var(--font);
    font-weight: var(--w-semibold);
    letter-spacing: var(--ls-tight);
    margin: 0;
    scroll-margin-top: 96px;
  }
  .article-prose h2 {
    font-size: clamp(22px, 2.6vw, 28px);
    line-height: var(--lh-snug);
    margin-top: 2.2em;
  }
  .article-prose h3 {
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.3;
    margin-top: 1.8em;
  }
  .article-prose h4 {
    font-size: var(--text-lg);
    line-height: 1.35;
    margin-top: 1.6em;
  }

  /* Lists — slightly indented, comfortable spacing between items. */
  .article-prose ul,
  .article-prose ol {
    margin: 0;
    padding-left: 1.4em;
    color: var(--ink-2);
  }
  .article-prose ul li,
  .article-prose ol li {
    margin: 0.4em 0;
  }
  .article-prose ul li::marker {
    color: var(--ink-3);
  }
  .article-prose ol li::marker {
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }

  /* Pull quote — block quote with a left rule and a touch of indent.
     The CMS renderer outputs plain <blockquote> tags inside .article-prose;
     attribution comes through as a <cite> child (was <footer> in the
     static draft). Style by tag, not by bespoke class, so any future
     blockquote in CMS content picks the same look up. */
  .article-prose blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--accent);
    font-family: var(--font);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: var(--w-medium);
    line-height: 1.5;
    letter-spacing: var(--ls-tight);
    color: var(--ink);
  }
  .article-prose blockquote p {
    margin: 0;
    color: var(--ink);
  }
  .article-prose blockquote cite {
    display: block;
    margin-top: 12px;
    font-size: var(--text-sm);
    font-weight: var(--w-regular);
    font-style: normal !important;
    color: var(--ink-3);
    letter-spacing: var(--ls-snug);
  }

  /* Callout — soft-tinted card the writer uses to surface a key point
     ("In short", "Don't miss this"). Three variants come from the CMS:
     info (default brand tint), warning (warm amber), tip (yellow).
     Renderer outputs <aside class="callout callout--{variant}">. */
  .article-prose .callout {
    margin: 1.6em 0;
    padding: 22px 24px;
    border-radius: 14px;
    background: var(--brand-primary-0);
    border: 1px solid var(--accent-soft);
  }
  .article-prose .callout p {
    margin: 0;
    color: var(--ink);
  }
  .article-prose .callout p + p { margin-top: 8px; }
  .article-prose .callout--info {
    background: var(--brand-primary-0);
    border-color: var(--accent-soft);
  }
  .article-prose .callout--warning {
    background: rgba(214, 139, 58, 0.08);
    border-color: rgba(214, 139, 58, 0.35);
  }
  .article-prose .callout--tip {
    background: var(--accent-secondary-soft, rgba(207, 219, 67, 0.18));
    border-color: rgba(167, 184, 26, 0.40);
  }

  /* Figure with caption — renderer emits plain <figure>/<figcaption>. */
  .article-prose figure {
    margin: 1.8em 0;
  }
  .article-prose figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    background: var(--paper-3);
  }
  .article-prose figure figcaption {
    margin-top: 12px;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-regular);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
    text-align: center;
  }

  /* Inline code + code blocks — kept simple; nothing fancy until we
     have a real piece of writing that needs syntax highlighting. */
  .article-prose code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: var(--paper-3);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--ink);
  }
  .article-prose pre {
    margin: 0;
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--ink);
    color: var(--paper);
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--text-sm);
    line-height: 1.55;
  }
  .article-prose pre code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
  }

  /* Horizontal divider — plain <hr> from the CMS renderer. */
  .article-prose hr {
    border: 0;
    height: 1px;
    background: var(--rule-strong);
    margin: 2.4em 0;
  }

  @media (max-width: 1080px) {
    /* Drop the TOC entirely on tablet and below — the prose column
       takes the full width so the reader still gets a comfortable
       line length. The TOC adds value on a wide desktop window;
       below that it's just clutter. */
    .article-body-grid {
      grid-template-columns: minmax(0, 720px);
    }
    .article-toc { display: none; }
  }
  @media (max-width: 720px) {
    .article-prose { font-size: 16px; }
  }

  /* --- Article footer (tags + author + share) ----------------- */
  .article-footer-section {
    padding: 0 0 clamp(56px, 8vh, 96px);
  }
  .article-footer-grid {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  /* Tag pills */
  .article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 32px;
    border-top: 1px solid var(--rule);
  }
  .article-tags-label {
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--w-semibold);
    line-height: var(--lh-base);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-right: 6px;
  }
  .article-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-medium);
    line-height: 1.3;
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .article-tag:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }

  /* Author card — large, with portrait + bio + LinkedIn */
  .article-author {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 28px;
    align-items: start;
    padding: 32px;
    border-radius: 16px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
  }
  .article-author-photo {
    width: 120px;
    height: 120px;
    border-radius: 999px;
    object-fit: cover;
    background: var(--paper-3);
  }
  .article-author-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .article-author-eyebrow {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--w-semibold);
    line-height: var(--lh-base);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .article-author-name {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-xl);
    font-weight: var(--w-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
  }
  .article-author-role {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-medium);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink-3);
  }
  .article-author-bio {
    margin: 12px 0 0;
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--w-regular);
    line-height: var(--lh-loose);
    letter-spacing: var(--ls-snug);
    color: var(--ink-2);
  }
  .article-author-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--w-semibold);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-snug);
    color: var(--ink);
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 3px;
    align-self: flex-start;
    transition: color .25s ease, border-color .25s ease;
  }
  .article-author-link-arrow {
    display: inline-block;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .article-author-link:hover {
    color: var(--accent);
    border-color: var(--accent);
  }
  .article-author-link:hover .article-author-link-arrow {
    transform: translateX(3px);
  }

  /* Footer share row — centred, with the label inline */
  .article-share--footer {
    margin-left: 0;
    align-self: center;
    flex-wrap: wrap;
    justify-content: center;
  }

  @media (max-width: 720px) {
    .article-author {
      grid-template-columns: 1fr;
      text-align: left;
      padding: 24px;
    }
    .article-author-photo {
      width: 88px;
      height: 88px;
    }
  }

  /* --- Related articles --------------------------------------- */
  .article-related {
    padding: clamp(64px, 9vh, 96px) 0;
    background: var(--paper-2);
    border-top: 1px solid var(--rule);
  }
  .article-related-head {
    max-width: 720px;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .article-related-head .h2 { margin: 0; }
  /* Tighten the gap inside the related grid relative to the blog index
     — three cards inside a single section read better with a slightly
     more contained gutter. */
  .article-related-grid {
    gap: 32px 28px;
  }
  .article-related-foot {
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }
  .article-related-foot .btn {
    min-width: 220px;
  }

  @media (max-width: 720px) {
    .article-related { padding: 56px 0; }
    .article-related-head { margin-bottom: 24px; }
  }

  /* --- API-driven additions ----------------------------------
     Styles below cover the runtime states added when the article
     pages were wired to the live CMS (skeletons, fallbacks, slim
     author variant, single-column body when there's no TOC). */

  /* Two-column body collapses to one when the article has no h2
     blocks (set by the page module via .article-body-grid--no-toc). */
  .article-body-grid.article-body-grid--no-toc {
    grid-template-columns: minmax(0, 720px);
    justify-content: start;
  }

  /* Slim author card — no portrait, name only. Used when the CMS
     ships an author who isn't in the team registry. */
  .article-author.article-author--slim {
    grid-template-columns: 1fr;
    padding: 24px 28px;
  }

  /* Centred WTE wordmark fallback for featured cards whose article
     has no coverImageUrl. Keeps the grid rhythm uniform without
     forcing a real photograph on every story. */
  .blog-feature-visual-fallback {
    width: clamp(180px, 22%, 260px) !important;
    height: auto !important;
    object-fit: contain !important;
    margin: auto;
    opacity: 0.55;
    filter: grayscale(0.2);
  }

  /* Loading skeletons — used by blog/article.html while the CMS
     request is in flight. Soft shimmer keyed off paper-3, no
     animation lock-in (respects prefers-reduced-motion below). */
  .article-skeleton {
    background: var(--paper-3);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
  }
  .article-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.55) 50%,
      transparent 100%
    );
    transform: translateX(-100%);
    animation: article-skeleton-shimmer 1.6s infinite ease-in-out;
  }
  .article-skeleton--badge { width: 110px; height: 22px; margin-bottom: 24px; }
  .article-skeleton--title { width: 90%; height: 56px; margin-bottom: 18px; }
  .article-skeleton--lede  { width: 80%; height: 22px; margin-bottom: 28px; }
  .article-skeleton--meta  { width: 240px; height: 18px; }
  .article-skeleton--cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    margin-top: 24px;
  }
  @keyframes article-skeleton-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .article-skeleton::after { animation: none; }
  }

  /* Blog grid + featured-card skeletons. The grid is sized to keep
     its eventual height roughly stable so we don't trigger a big
     layout jump when cards arrive. */
  .blog-grid[aria-busy="true"] {
    min-height: 320px;
    background:
      linear-gradient(var(--paper-2), var(--paper-2)) no-repeat,
      var(--paper-2);
    background-size: 100% 100%;
    border-radius: 14px;
    opacity: 0.55;
  }
  .blog-feature-card.blog-feature-card--placeholder {
    min-height: 360px;
    background: var(--paper-2);
    border-radius: 24px;
    opacity: 0.55;
    pointer-events: none;
  }

  /* Visually-hidden helper used by the loading "status" message so
     screen readers get told the page is loading even though the
     skeleton is purely visual. */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Blog index error state — same shape as .blog-empty but with a
     warmer border to read as "something went wrong" rather than
     "nothing here". */
  .blog-error {
    padding: 56px 0;
    text-align: center;
    border: 1px dashed rgba(214, 84, 58, 0.55);
    border-radius: 14px;
    background: rgba(214, 84, 58, 0.04);
  }
  .blog-error p {
    font-family: var(--font);
    font-size: var(--text-base);
    color: var(--ink-2);
    margin: 0;
  }