/* ════════════════════════════════════════════════════════════════════
       ELECTROGENOS — responsive stylesheet (mobile-first)

       Base rules target the narrowest supported viewport (320px); wider
       layouts are layered on with min-width queries at 640 / 768 / 1024 /
       1280px. No fixed pixel widths on containers, no 100vw, and no
       overflow-x:hidden on <html>/<body> — every overflow is contained at
       the element that causes it.
       ════════════════════════════════════════════════════════════════════ */

    /* ── RESET & TOKENS ───────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }

    :root {
      /* Brand book colours (p.7) */
      --navy: #0C1826;            /* Navy Blue — headings + dark surfaces */
      --blue: #4285F4;            /* Electrogenos Blue — accent + eyebrows  */
      --sky:  #92D7F8;            /* Sky Blue — eyebrows on dark surfaces   */
      --turquoise: #66FFDA;       /* Sky/Turquoise secondaries              */
      --blue-dark: #1D4ED8;
      --text: #111827; --muted: #6B7280; --light: #F8FAFC;
      --body-light: #475569;      /* body copy on light sections */
      --body-dark:  #CBD5E1;      /* body copy on dark sections  */

      /* ── Section surfaces ──
         Every section background is one of these three. --bg-tint is the
         hero/Target-sectors blue flattened to an opaque value: it is what
         rgba(146,215,248,.40) already composited to over white, so the
         rendered colour is unchanged.
         Sections do not butt up against each other: each one begins with a
         band that fades in from the colour of the section above it. Light
         to light needs little; anything involving navy needs more. */
      --bg-white: #FFFFFF;
      --bg-tint:  #D3EFFC;
      --bg-navy:  #0C1826;
      --fade-soft:   160px;
      /* Every section but the hero uses this, top and bottom. */
      --sec-pad: clamp(3.5rem, 6vw, 5rem);

      --pad-x: 1.25rem;                   /* container gutter: 20 / 32 / 40px */
      --maxw: 75rem;                      /* 1200px content ceiling          */
      --nav-h: 3.75rem;                   /* 60px compact bar + hamburger */
      --tap: 2.75rem;                     /* 44px minimum touch target    */
      --hero-pb: 2.5rem;
    }


    body {
      font-size: clamp(1rem, 1.6vw, 1.25rem);   /* floor is 16px */
      color: var(--text);
      background: var(--bg-white);
      /* A long word or URL can never force the document wider than the screen. */
      overflow-wrap: anywhere;
    }

    /* Media scales with its container instead of dictating page width. */
    img, video, iframe { max-width: 100%; height: auto; }
    svg { max-width: 100%; }

    /* Wide content (e.g. a data table) scrolls inside its own box. */
    .table-scroll { width: 100%; overflow-x: auto; }
    .table-scroll > table { min-width: 34rem; border-collapse: collapse; }

    /* Anchored sections come to rest below the fixed navbar. */
    [id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

    /* ══════════════════════════════════════════════════════════════════
       SHARED LAYOUT CONTAINER — the single place a content width is set.
       Every section's content sits in one of these, so all sections share
       exactly the same left and right edges at every viewport width.
       Sections themselves stay full-bleed and carry only background and
       vertical spacing.
       ══════════════════════════════════════════════════════════════════ */
    .container {
      position: relative;        /* absolute children anchor here, not the viewport */
      width: 100%;
      max-width: var(--maxw);    /* 1200px */
      margin-inline: auto;
      padding-inline: var(--pad-x);
    }

    /* ══════════════════════════════════════════════════════════════════
       TYPOGRAPHY SYSTEM — single source for every H1, H2, eyebrow, deck
       and body paragraph on the site. Poppins throughout (brand book p.12:
       headlines bold, drop-heads light). Sections must not override these.
       Put .on-dark on any dark-background section to flip the colours.
       ══════════════════════════════════════════════════════════════════ */

    /* ── SECTION HEADER ──
       One block shared by every section below the hero: eyebrow, H2,
       turquoise rule, subtitle. The margins here are the only spacing
       between them, so no section defines its own. */
    .t-eyebrow {
      font-size: .75rem; font-weight: 500; line-height: 1.25;
      letter-spacing: .16em; text-transform: uppercase;
      color: var(--blue); margin: 0 0 .5rem;
    }
    /* Brand-book signature accent under every section heading. */
    .sec-rule {
      display: block; width: 56px; height: 4px;
      background: var(--turquoise); border-radius: 2px;
      margin: 0 0 1rem;
    }
    .sec-sub {
      font-weight: 400; font-size: 1.125rem; line-height: 1.6;
      color: #64748B;                      /* slate-500 */
      max-width: 60ch; margin: 0;
    }
    .on-dark .sec-sub { color: #94A3B8; }  /* slate-400 */
    /* Keywords take the accent colour but not <strong>'s bold. */
    .sec-sub strong { font-weight: inherit; }

    /* H1 — hero only, one per page */
    .t-h1 {
      font-size: 2.25rem; font-weight: 800; line-height: 1.25;
      letter-spacing: -.02em; color: var(--navy); margin: 0;
    }

    /* H2 — every section heading below the hero */
    .t-h2 {
      font-size: clamp(1.875rem, 2.8vw, 2.5rem); font-weight: 700;
      line-height: 1.12; letter-spacing: -.02em;
      color: var(--navy); margin: 0 0 .75rem;
    }
    /* <strong> defaults to `bolder` (= 900 next to 700): pin it so a
       highlighted phrase changes colour only, never weight. */
    .t-h2 strong, .t-h1 strong { font-weight: inherit; }

    /* Deck — the drop-head under a heading: Poppins light, above body size */
    .t-deck {
      font-size: 1.125rem; font-weight: 300; line-height: 1.5;
      color: var(--body-light); margin: 0;
    }

    /* Body copy — one size, weight and leading everywhere */
    .t-body { font-size: 1rem; font-weight: 400; line-height: 1.625; color: var(--body-light); }

    /* Shared accent for emphasised words inside a heading or deck */
    .t-accent { color: var(--blue); }

    /* Dark-section colour flip */
    .on-dark .t-h1, .on-dark .t-h2 { color: #fff; }
    .on-dark .t-eyebrow { color: var(--sky); }
    .on-dark .t-deck, .on-dark .t-body { color: var(--body-dark); }
    .on-dark .t-accent { color: var(--sky); }

    /* Alignment: sections are left-aligned; .sec-center is for standalone
       single-statement / CTA blocks only. */
    .sec-center { text-align: center; }

    @media (min-width: 48rem) {
      .t-h1 { font-size: 3rem; }
      .t-deck { font-size: 1.25rem; }
    }
    @media (min-width: 64rem) {
      .t-h1 { font-size: 3.75rem; }
    }

    /* ── BUTTONS ──────────────────────────────────────────────────────── */
    .btn, .btn-outline {
      display: inline-block;
      padding: .75rem 1.75rem;
      min-height: var(--tap);          /* comfortable tap target on touch */
      border-radius: 100px;
      font-size: .875rem; font-weight: 700;
      text-decoration: none; white-space: nowrap; cursor: pointer;
    }
    .btn {
      background: var(--blue); color: #fff; border: none;
      transition: background .2s, transform .15s;
    }
    .btn:hover { background: var(--blue-dark); transform: scale(1.03); }
    .btn-outline {
      background: transparent; color: var(--navy);
      border: 2px solid var(--navy);
      transition: all .2s;
    }
    .btn-outline:hover { background: var(--navy); color: #fff; }

    /* ── NAV ──────────────────────────────────────────────────────────── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(0,0,0,.05);
    }
    /* The bar is full-bleed; the row of links lives in the shared container. */
    .nav-inner {
      display: flex; align-items: center; flex-wrap: wrap;
      gap: 1rem;
      min-height: var(--nav-h);
    }
    .nav-logo { margin-right: auto; display: flex; align-items: center; min-height: var(--tap); min-width: 0; }
    /* Fluid logo: 273px wide at full size would collide with the hamburger
       on a 320px screen, so it scales with the viewport. */
    .nav-logo svg { height: clamp(2rem, 6vw, 3.25rem); width: auto; display: block; }

    .nav-ham {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 5px;
      width: var(--tap); height: var(--tap);
      margin-right: -.5rem;            /* optical alignment, stays inside padding */
      background: none; border: none; cursor: pointer;
    }
    .nav-ham span {
      display: block; width: 24px; height: 2px;
      background: var(--navy); border-radius: 2px;
      transition: transform .3s, opacity .3s;
    }
    .nav-ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-ham.open span:nth-child(2) { opacity: 0; }
    .nav-ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Collapsed menu: a full-width sheet under the bar. */
    .nav-links {
      display: none;
      flex-basis: 100%;
      flex-direction: column; align-items: stretch;
      padding: .25rem 0 1rem;
      gap: .25rem;
      max-height: calc(100vh - var(--nav-h));
      max-height: calc(100dvh - var(--nav-h));
      overflow-y: auto;
    }
    .nav-links.open { display: flex; }
    nav a.nav-link {
      display: flex; align-items: center;
      min-height: var(--tap);
      font-size: 1.25rem; font-weight: 700;
      text-decoration: none; color: var(--navy);
      transition: color .2s;
    }
    nav a.nav-link:hover { color: var(--blue); }
    .nav-links .btn { display: none; }   /* CTA lives in the hero on small screens */

    /* ── KEYFRAMES ────────────────────────────────────────────────────── */
    @keyframes fadeUp    { to { opacity: 1; transform: none; } }
    @keyframes fadeRight { to { opacity: 1; transform: none; } }
    @keyframes solFloat  { 0%,100% { transform: translateY(0) scale(1); }
                           50%     { transform: translateY(-16px) scale(1.04); } }
    @keyframes marquee-scroll { from { transform: translateX(0); }
                                to   { transform: translateX(-50%); } }

    /* ── HERO ─────────────────────────────────────────────────────────── */
    .hero {
      position: relative; overflow: hidden;
      display: flex; flex-direction: column; align-items: stretch;
      min-height: 100vh; min-height: 100svh;
      padding: calc(var(--nav-h) + 5.9375rem) 0 var(--hero-pb);
      background: linear-gradient(to bottom, var(--bg-white) 50%, var(--bg-tint) 100%);
    }
    .hero-inner {
      flex: 1 1 auto;
      display: flex; flex-direction: column;
      align-items: flex-start; gap: 2.25rem;
      width: 100%; position: relative; z-index: 1;
    }
    .hero-left { width: 100%; max-width: 47.5rem; }
    /* Reveal animation only — all type comes from .t-h1 / .t-accent / .t-deck */
    .ht1, .ht2 { display: block; opacity: 0; transform: translateY(24px); }
    /* Turquoise rule under "green" only. All lengths are in em so the
       underline scales with the heading at every breakpoint; skip-ink lets
       it break cleanly around the descender of the "g". */
    .hl-green {
      text-decoration-line: underline;
      text-decoration-color: var(--turquoise);
      text-decoration-thickness: .09em;
      /* skip-ink must be off or the rule breaks around the "g" descender and
         no longer spans the word; the larger offset then clears the tail. */
      text-decoration-skip-ink: none;
      text-underline-offset: .22em;
      padding-bottom: .1em;        /* room so the rule is never clipped */
    }
    .ht1 { animation: fadeUp .65s .1s  cubic-bezier(.22,1,.36,1) forwards; }
    .ht2 { animation: fadeUp .65s .28s cubic-bezier(.22,1,.36,1) forwards; }
    .hero-sub {
      margin: .875rem 0 1.75rem;
      opacity: 0; transform: translateY(16px);
      animation: fadeUp .65s .5s cubic-bezier(.22,1,.36,1) forwards;
    }
    .hero-btn-wrap {
      display: flex; flex-direction: column;
      align-items: flex-start; gap: .75rem; flex-wrap: wrap;
      opacity: 0; transform: translateY(16px);
      animation: fadeUp .65s .7s cubic-bezier(.22,1,.36,1) forwards;
    }

    /* ── Hero bubble cluster ──
       Four variables drive everything: the two diameters and the two drift
       distances. Both gaps are derived from the drift, so two bubbles can at
       most just touch at the extremes of their paths and never overlap:
         H2 <-> stat gap = H2 drift + stat drift
         stat <-> stat gap = stat drift x 2
       Positions are computed from each centre and radius, and the wrapper
       reserves the drift distance on every side so the layout never shifts. */
    .hero-visual {
      --h2: clamp(140px, 42vw, 180px);
      --stat: clamp(110px, 32vw, 130px);
      --mv-h2: 6px;                  /* H2 max distance from rest   */
      --mv-st: 10px;                 /* stat max distance from rest */
      /* Minimum legible type inside a stat bubble. Restored to the original
         values at 1024px so the desktop cluster is untouched. */
      --num-min: 1.5rem;
      --lbl-min: 11px;
      --gap-hs: calc(var(--mv-h2) + var(--mv-st));
      --gap-ss: calc(var(--mv-st) * 2);
      position: relative;            /* bubbles anchor here, not the viewport */
      display: flex; align-items: center; justify-content: center;
      flex: 0 0 auto;
      width: calc(var(--mv-h2) + var(--h2) + var(--gap-hs) + var(--stat) + var(--mv-st));
      max-width: 100%;
      margin-inline: auto;           /* centred under the buttons on small screens */
      opacity: 0; transform: translateX(32px);
      animation: fadeRight .9s .3s cubic-bezier(.22,1,.36,1) forwards;
    }
    .hero-bubble-wrap {
      position: relative;
      width: 100%;
      height: calc(var(--stat) * 2 + var(--gap-ss) + var(--mv-st) * 2);
    }

    /* Drift paths — each traces a shallow arc in x and y. Every keyframe sits
       at a radius of ~1.0 x --mv from rest, so that is the true maximum. */
    @keyframes bubbleDriftA {
      0%   { transform: translate(0, 0); }
      50%  { transform: translate(calc(var(--mv) * -.55), calc(var(--mv) * -.83)); }
      100% { transform: translate(calc(var(--mv) *  .62), calc(var(--mv) * -.78)); }
    }
    @keyframes bubbleDriftB {
      0%   { transform: translate(0, 0); }
      50%  { transform: translate(calc(var(--mv) *  .80), calc(var(--mv) * -.60)); }
      100% { transform: translate(calc(var(--mv) * -.45), calc(var(--mv) * -.89)); }
    }
    @keyframes bubbleDriftC {
      0%   { transform: translate(0, 0); }
      50%  { transform: translate(calc(var(--mv) * -.70), calc(var(--mv) *  .71)); }
      100% { transform: translate(calc(var(--mv) *  .75), calc(var(--mv) *  .66)); }
    }

    .stat-bubble {
      /* Visible at every width. */
      display: flex;
      position: absolute; border-radius: 50%;
      width: var(--stat); height: var(--stat); aspect-ratio: 1;
      left: calc(var(--mv-h2) + var(--h2) + var(--gap-hs));
      background: radial-gradient(circle at 38% 35%, #eaf4fd 0%, #cce4f5 60%, #b8d9f0 100%);
      box-shadow: 0 12px 48px rgba(59,130,246,.12);
      flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center; padding: calc(var(--stat) * .09);
      --mv: var(--mv-st);
      will-change: transform;
    }
    /* Type is a fixed share of the bubble diameter (17.8% / 6.9% — the same
       ratios the old design used), with a floor so it stays legible. */
    .stat-bubble-num { font-size: max(var(--num-min), calc(var(--stat) * .178)); font-weight: 700; color: var(--blue); line-height: 1.1; }
    .stat-bubble-lbl { font-size: max(var(--lbl-min), calc(var(--stat) * .069)); line-height: 1.25; color: var(--muted); margin-top: .3em; }
    .stat-b2 { top: var(--mv-st);                        animation: bubbleDriftB 7s ease-in-out -2s infinite alternate; }
    .stat-b3 { top: calc(50% + var(--gap-ss) / 2);       animation: bubbleDriftC 8s ease-in-out -4s infinite alternate; }

    .h2-main-bubble {
      position: absolute; left: var(--mv-h2); top: calc(50% - var(--h2) / 2);
      width: var(--h2); height: var(--h2); aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle at 38% 35%, #eaf4fd 0%, #cce4f5 60%, #b8d9f0 100%);
      box-shadow: 0 12px 48px rgba(59,130,246,.12);
      display: flex; align-items: center; justify-content: center;
      --mv: var(--mv-h2);
      will-change: transform;
      animation: bubbleDriftA 9s ease-in-out 0s infinite alternate;
    }
    .h2-letter { font-size: calc(var(--h2) * .35); font-weight: 700; color: var(--blue); letter-spacing: -2px; }
    .h2-sub    { font-size: calc(var(--h2) * .153); font-weight: 600; color: var(--blue); align-self: flex-end; margin-bottom: calc(var(--h2) * .06); }

    /* Below 360px the side-by-side triangle would need 282px of the 280px
       free at 320px, so the cluster stacks: H2 on top, the two stats in a
       row beneath. Gaps are still derived from the drift distances, so the
       no-overlap guarantee holds. */
    @media (max-width: 22.4375rem) {
      .hero-visual { width: calc(var(--stat) * 2 + var(--gap-ss) + var(--mv-st) * 2); }
      .hero-bubble-wrap {
        height: calc(var(--mv-h2) + var(--h2) + var(--gap-hs) + var(--stat) + var(--mv-st));
      }
      .h2-main-bubble { top: var(--mv-h2); left: calc(50% - var(--h2) / 2); }
      .stat-bubble { top: calc(var(--mv-h2) + var(--h2) + var(--gap-hs)); }
      .stat-b2 { left: var(--mv-st); right: auto; }
      .stat-b3 { left: auto; right: var(--mv-st); }
    }

    @media (prefers-reduced-motion: reduce) {
      .h2-main-bubble, .stat-bubble { animation: none; }
    }

    /* ── TRUST BAR (partner marquee) ──────────────────────────────────── */
    /* Hidden on phones; from 768px it is a full-bleed strip pinned to the
       bottom of the hero rather than a flex sibling squeezed beside it. */
    .trust-bar { display: none; }
    .marquee-outer { overflow: hidden; width: 100%; }
    .marquee-track { display: flex; width: max-content; animation: marquee-scroll 60s linear infinite; }
    .marquee-track:hover { animation-play-state: paused; }
    .marquee-set {
      display: grid; grid-auto-flow: column;
      grid-auto-columns: clamp(5rem, 8vw, 6.875rem);
      align-items: center;
      gap: clamp(1.25rem, 3vw, 2rem);
      padding: .5rem clamp(1.5rem, 4vw, 3rem);
    }
    .marquee-set img {
      width: 100%; height: 2.25rem; object-fit: contain; object-position: center;
      /* Grey in the strip; full colour belongs to the Recognition cards only. */
      filter: grayscale(1); opacity: .5;
      transition: opacity .2s;
    }
    .marquee-set img:hover { opacity: .85; }

    /* ── REVEAL UTILITIES ─────────────────────────────────────────────── */
    .word-reveal .word {
      display: inline-block; opacity: 0; transform: translateY(22px);
      transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
    }
    .word-reveal.words-in .word { opacity: 1; transform: none; }
    .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.visible { opacity: 1; transform: none; }

    /* ── GREEN HYDROGEN SECTORS ───────────────────────────────────────── */
    /* Anchor target lands 2rem clear of the nav, not flush against it. */
    #ghSector { scroll-margin-top: calc(var(--nav-h) + 2rem); }
    /* ── Shared section surface ──
       White through the upper half, settling into the page tint at the foot.
       Used by Target sectors, Our advantage and Recognition, defined once so
       they cannot drift apart.

       --tint-head is how deep the section rises out of a tinted section above
       it. At the default 0px the first two stops collapse onto each other and
       the surface simply starts white; set it to --fade-soft and the same
       gradient grows a soft head instead. One definition, both cases. */
    .bg-sectors-gradient {
      --tint-head: 0px;
      background: linear-gradient(to bottom,
        var(--bg-tint) 0,
        var(--bg-white) var(--tint-head),
        var(--bg-white) 50%,
        var(--bg-tint) 100%);
    }
    /* Below 768px the hero ends on its own tint rather than the opaque white
       .trust-bar, so Target sectors has something to rise out of. Two classes,
       so this beats .bg-sectors-gradient whatever the source order. */
    @media (max-width: 47.9375rem) {
      .gh-sector.bg-sectors-gradient { --tint-head: var(--fade-soft); }
    }
    /* Our advantage now ends on the tint, so Recognition rises out of it. */
    .recognition.bg-sectors-gradient { --tint-head: var(--fade-soft); }

    .gh-sector {
      padding-block: var(--sec-pad);
    }
    /* ── Target sectors ───────────────────────────────────────────────
       Left column: eyebrow, H2, turquoise rule, subtitle, sector list.
       Right column (1024px+): one image frame spanning the column's full
       height, with the sector photos stacked inside for the crossfade.
       ─────────────────────────────────────────────────────────────────── */
    .ind-split { display: grid; gap: 2.5rem; width: 100%; text-align: left; }
    .ind-col { min-width: 0; }

    .ind-head { margin-bottom: 2rem; }

    /* ── Sector list ── */
    .ind-list { display: flex; flex-direction: column; gap: 1rem; }
    /* Dotted accent rail on the open item, spanning title + description. The
       transparent border on inactive items keeps the padding identical, so
       titles never shift sideways when the active item changes. */
    .ind-item {
      position: relative;
      border-left: 2px dotted transparent; border-radius: 0;
      padding-left: 1.5rem;
      transition: border-left-color .25s ease;
    }
    .ind-item.is-active { border-left-color: var(--blue); }

    .ind-title {
      display: block; width: 100%;
      margin: 0; padding: .5rem 0; min-height: var(--tap);
      background: none; border: 0;
      font-family: inherit; text-align: left; cursor: pointer;
      font-size: clamp(1.25rem, 1.8vw, 1.5rem);
      font-weight: 500; letter-spacing: -.02em; line-height: 1.1;
      color: #94A3B8;                        /* slate-400 when inactive */
      transition: color .25s ease;
    }
    .ind-item.is-active .ind-title { color: var(--navy); }
    .ind-title:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

    /* Turquoise underline, drawn only under the word "Green", wiping in
       from the left when the item becomes active. */
    .sector-prefix {
      background-image: linear-gradient(var(--turquoise), var(--turquoise));
      background-repeat: no-repeat;
      background-position: 0 90%;
      background-size: 0% .28em;
      transition: background-size .3s ease;
    }
    .ind-item.is-active .sector-prefix { background-size: 100% .28em; }

    /* Description — height animates via grid-template-rows 0fr -> 1fr. */
    .ind-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
    .ind-item.is-active .ind-panel { grid-template-rows: 1fr; }
    .ind-panel-inner {
      overflow: hidden; min-height: 0;
      visibility: hidden;                    /* keeps collapsed copy out of the a11y tree */
      transition: visibility 0s linear .3s;
    }
    .ind-item.is-active .ind-panel-inner { visibility: visible; transition-delay: 0s; }
    .ind-desc {
      font-weight: 400; font-size: 1rem; line-height: 1.6;
      color: #475569;                        /* slate-600 */
      max-width: 42ch; padding-block: 0 .875rem;
    }

    /* ── Image frames ── */
    .ind-media, .ind-inline-media {
      position: relative; width: 100%;
      border-radius: 1rem; overflow: hidden;
      background: rgba(146,215,248,.25);
    }
    .ind-media { display: none; }            /* desktop-only column */
    .ind-inline-media { aspect-ratio: 4 / 3; margin-top: .25rem; margin-bottom: .875rem; }

    .ind-media-img {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; object-position: center;
    }
    .ind-media .ind-media-img { opacity: 0; transition: opacity .4s ease; }
    .ind-media .ind-media-img.is-shown { opacity: 1; }

    @media (prefers-reduced-motion: reduce) {
      .ind-item::before, .ind-title, .ind-panel, .ind-panel-inner,
      .sector-prefix, .ind-media .ind-media-img { transition-duration: .01ms !important; }
    }

    /* ── THE PROBLEM / TRADEOFF ───────────────────────────────────────── */
    /* Base: a plain stack of cards. The scroll-driven circle physics is a
       pointer-and-space affordance, so it only switches on from 768px. */
    .tradeoff-track { position: relative; }
    .tradeoff-sticky {
      position: relative; overflow: hidden;   /* contains the decorative bubbles */
      display: flex; flex-direction: column; align-items: center;
      /* Clears the fixed navbar: at 48px the eyebrow sat underneath it.
         Below 1024px the statement is the last thing in the section, so the
         foot is trimmed to 1.5rem; with Our solution's matching 1.5rem that
         is 3rem between the statement and the OUR SOLUTION eyebrow. The
         desktop block restores the full padding. */
      padding: var(--sec-pad) 0 1.5rem;
      background: linear-gradient(to bottom,
        var(--bg-tint) 0, var(--bg-white) var(--fade-soft),
        var(--bg-white) 100%);
    }
    #tradeoffTrack { scroll-margin-top: var(--nav-h); }
    .tradeoff-header { text-align: left; width: 100%; margin-bottom: 2rem; position: relative; z-index: 2; transition: opacity .3s ease; }

    .trd-bub { display: none; }
    /* Wrapper stays in flow so the statement can follow the cards; the
       desktop scene inside it (.trd-stage) is hidden separately above. */
    .tradeoff-circles { display: block; }
    /* Statement follows the cards on small screens too, with matching
       breathing room above and below it. */
    .tradeoff-brand {
      display: flex; flex-direction: column; align-items: center;
      margin: 3rem auto 0; text-align: center;
      position: relative; z-index: 2;
    }
    /* "breaks" lands with a small emphasis as the statement settles. */
    .tradeoff-brand-cap .t-accent { display: inline-block; }
    /* Pieces thrown out from behind the statement on small screens. Same
       gradient as the desktop ones; the section's overflow clips them, so
       they can never widen the page. */
    .trd-mob-bub {
      position: absolute; border-radius: 50%;
      pointer-events: none; z-index: 1; opacity: 0;
      background: radial-gradient(circle at 38% 35%, #eaf4fd 0%, #cce4f5 60%, #b8d9f0 100%);
      box-shadow: 0 3px 12px rgba(59,130,246,.12);
    }
    @media (prefers-reduced-motion: reduce) { .trd-mob-bub { display: none; } }
    .tradeoff-brand img { width: min(20rem, 70vw); height: auto; display: block; }
    .tradeoff-brand-cap { font-size: clamp(1.25rem, 6vw, 1.75rem); font-weight: 700;
      color: var(--navy); margin-top: .5rem; letter-spacing: -.02em; }
    .trd-stage, .trd-tri, .trd-cap { display: none; }

    /* Below 1024px the scroll-driven circle scene is replaced by a plain
       list. Deliberately NO card chrome: the soft blue icon bubble echoes the
       desktop circles, and the absence of borders keeps this section visually
       distinct from the bordered Solution cards directly below it. */
    .tradeoff-mob-cards { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; }
    .tmc {
      display: flex; align-items: flex-start; gap: 1rem;
      background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
    }
    /* Same gradient and glow as the desktop .tc circles, at 56px. */
    .tmc-bubble {
      flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: radial-gradient(circle at 38% 35%, #eaf4fd 0%, #cce4f5 60%, #b8d9f0 100%);
      box-shadow: 0 8px 24px rgba(59,130,246,.12);
    }
    .tmc img { width: 26px; height: 26px; object-fit: contain;
      filter: brightness(0) saturate(100%) invert(12%) sepia(80%) saturate(800%) hue-rotate(210deg) brightness(90%); }
    .tmc-title { font-size: 1.125rem; font-weight: 600; color: var(--navy); margin-bottom: .25rem; }
    .tmc-body  { font-size: 1rem; font-weight: 400; line-height: 1.6; color: #64748B; }

    /* ── OUR SOLUTION (stages) ────────────────────────────────────────── */
    /* Base: every stage is a static card. From 1024px the section becomes a
       two-column, sticky scroll-driven sequence. */
    .stg-container { position: relative; scroll-margin-top: calc(var(--nav-h) + 1rem); }
    .stg-frame {
      position: relative; overflow: hidden;   /* contains .sol-bub decorations */
      display: block; background: var(--bg-white);
      /* Top half of the 3rem handover from the trade-off statement; the
         desktop block restores the symmetrical --sec-pad. */
      padding: 1.5rem 0 var(--sec-pad);
    }
    .stg-frame::after { display: none; }
    .sol-bub {
      position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
      background: radial-gradient(circle at 38% 35%, #eaf4fd 0%, #cce4f5 60%, #b8d9f0 100%);
      opacity: .4; animation: solFloat ease-in-out infinite;
    }
    .sol-bub.lb1  { width: 90px;  height: 90px;  top: 12%; left: -18px;  animation-duration: 5.5s; animation-delay: 0s;   }
    .sol-bub.lb1b { width: 55px;  height: 55px;  top: 30%; left: -8px;   animation-duration: 4.6s; animation-delay: 1.2s; }
    .sol-bub.lb2  { width: 115px; height: 115px; top: 42%; left: -15px;  animation-duration: 7s;   animation-delay: 1.3s; }
    .sol-bub.lb2b { width: 80px;  height: 80px;  top: 65%; left: -10px;  animation-duration: 5.0s; animation-delay: 2.7s; }
    .sol-bub.lb3  { width: 180px; height: 180px; top: 80%; left: -10px;  animation-duration: 8s;   animation-delay: 0.6s; }
    .sol-bub.rb1  { width: 90px;  height: 90px;  top: 12%; right: -18px; animation-duration: 6s;   animation-delay: 1.8s; }
    .sol-bub.rb1b { width: 55px;  height: 55px;  top: 30%; right: -8px;  animation-duration: 4.8s; animation-delay: 0.9s; }
    .sol-bub.rb2  { width: 115px; height: 115px; top: 42%; right: -15px; animation-duration: 7.5s; animation-delay: 0.4s; }
    .sol-bub.rb2b { width: 80px;  height: 80px;  top: 65%; right: -10px; animation-duration: 5.2s; animation-delay: 3.0s; }
    .sol-bub.rb3  { width: 180px; height: 180px; top: 80%; right: -10px; animation-duration: 8.5s; animation-delay: 2.2s; }

    /* Below 768px everything stacks: eyebrow, H2, product image, panels. */
    /* The arc is drawn only from 1024px, where it is absolutely positioned
       behind the row. Without a box of its own below that it still reserves
       an SVG's default 150px of empty height above the image. */
    .stg-arc { display: none; }
    .stg-layout { display: flex; flex-direction: column; gap: .5rem; }
    .stg-body   { display: flex; flex-direction: column; gap: 1.5rem; }
    .stg-panels { display: flex; flex-direction: column; gap: .75rem; }
    .stg-header { position: relative; z-index: 2; text-align: left; }
    /* Restored heading treatment: light lead-in, bold emphasis, both in the
       dark heading colour. Deliberate, requested deviation from .t-h2's
       single weight. */

    .stg-visual {
      position: relative; display: flex; align-items: center; justify-content: center;
      width: 100%; max-width: 17.5rem; aspect-ratio: 1; margin-inline: auto;
    }
    .stg-visual::before {
      content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 0;
      background: radial-gradient(circle, #dbeafe 0%, #eff6ff 60%, transparent 100%);
    }
    .stg-visual img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }

    /* ── Pillars ──
       One open at any width. Below 1024px they are a plain vertical list
       threaded on a dotted rail; the desktop block bends that rail into an
       arc around the product image. */
    .stg-panels { position: relative; }
    /* The rail, drawn behind the icon discs. 4px dash / 6px gap, matching
       the arc. */
    .stg-panels::before {
      content: ''; position: absolute; z-index: 0;
      left: 22.25px; top: 23px; bottom: 23px; width: 1.5px;
      background-image: repeating-linear-gradient(to bottom,
        #CBD5E1 0 4px, transparent 4px 10px);
    }
    .stg-pillar {
      position: relative; display: block; padding: 0;
      background: none; border: 0; box-shadow: none;
    }
    .stg-ph {
      display: flex; align-items: flex-start; gap: 1rem;
      width: 100%; margin: 0; padding: 0;
      background: none; border: 0; text-align: left;
      font: inherit; color: inherit; cursor: pointer;
    }
    /* Icon disc sits on the rail; the ring in the page colour makes the
       dotted line look as though it passes behind it. */
    .stg-step-n {
      width: 46px; height: 46px; flex: 0 0 46px;
      border-radius: 50%; background: var(--blue);
      box-shadow: 0 0 0 6px var(--bg-white);
      display: grid; place-items: center;
      position: relative; z-index: 1;
      transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    }
    .stg-pillar.is-open .stg-step-n { transform: scale(1.08); }
    .stg-step-n img { width: 22px; height: 22px; object-fit: contain;
      filter: brightness(0) invert(1); }
    .stg-ph:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
    .stg-ph-text { display: block; min-width: 0; padding-top: .125rem; }
    .stg-item-title { display: block; font-size: 1.25rem; font-weight: 600; color: var(--navy); margin-bottom: .125rem; }
    .stg-item-sub   { display: block; font-size: 1rem; font-weight: 500; color: var(--blue); margin: 0; }
    /* Collapsible panel: 0fr -> 1fr animates height with no magic numbers. */
    .stg-panel { display: grid; grid-template-rows: 0fr; opacity: 0;
      transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1), opacity .45s ease;
      padding-left: calc(46px + 1rem); }
    .stg-pillar.is-open .stg-panel { opacity: 1; }
    .stg-pillar.is-open .stg-panel { grid-template-rows: 1fr; }
    .stg-panel > div { overflow: hidden; min-height: 0; }
    /* Height measuring pass: no transitions at any width, so scrollHeight is
       read at each state's final size rather than mid-animation. */
    .stg-measuring .stg-panel,
    .stg-measuring .stg-pillar,
    .stg-measuring .stg-step-n,
    .stg-measuring .stg-copy ul { transition: none !important; }
    .stg-copy ul { list-style: none; max-width: 42.5rem; display: flex; flex-direction: column; gap: .5rem; margin: .625rem 0 1.375rem; }
    /* Marker drawn rather than listed, so a wrapped line hangs level with
       the first line's text instead of tucking under the dot. */
    .stg-copy ul li {
      position: relative; padding-left: 1.125rem;
      font-size: 1rem; color: var(--muted);
    }
    .stg-copy ul li::before {
      content: ''; position: absolute; left: 0; top: .8em;
      transform: translateY(-50%);
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--blue);
    }

    /* ── REPORT FORMS ──────────────────────────────────────────────────
       Shared by the modal and the CTA section. Styling of the existing
       fields is untouched; this only adds the consent row, inline errors,
       the status line and the spam trap. */
    .consent-row {
      display: flex; align-items: flex-start; gap: .625rem;
      margin: .25rem 0 .5rem; cursor: pointer;
      /* The whole row is the hit area, so padding lifts it past 44px even
         though the box itself is 18px. */
      padding: .375rem 0;
      font-size: 1rem; line-height: 1.5;
    }
    .consent-row input {
      flex-shrink: 0; width: 1.125rem; height: 1.125rem;
      margin: .125rem 0 0; accent-color: var(--blue); cursor: pointer;
    }
    .field-err {
      margin: .25rem 0 0; font-size: .8125rem; line-height: 1.4;
      color: #B91C1C; min-height: 0;
    }
    .cta-form-fields .field-err:empty, .report-box .field-err:empty { display: none; }
    [aria-invalid="true"] { border-color: #B91C1C !important; }
    .form-status {
      margin: .625rem 0 0; font-size: .875rem; line-height: 1.5;
      color: #B91C1C; font-weight: 500;
    }
    .form-status:empty { display: none; }
    /* Spam trap: moved off-screen rather than display:none, so bots that
       skip hidden fields still fill it in. */
    .hp-field {
      position: absolute !important; left: -9999px; top: auto;
      width: 1px; height: 1px; overflow: hidden;
    }
    button[disabled] { opacity: .65; cursor: progress; }

    /* ── OUR ADVANTAGE ────────────────────────────────────────────────── */
    .advantage { position: relative; }
    .advantage-frame {
      position: relative; overflow: hidden;
      display: flex; flex-direction: column;
      padding-block: var(--sec-pad);
    }
    .advantage-frame::after { display: none; }
    /* ── Our advantage ──
       Chart and list stack below 1024px; the desktop block sets them side
       by side. */
    .adv-head { margin-bottom: 2.5rem; }
    /* Keeps "43%" from being left alone on its own line. The non-breaking
       space before it is the fallback where balance is unsupported. */
    .adv-h2 { text-wrap: balance; }
    .adv-body { display: flex; flex-direction: column; gap: 2rem; }
    .adv-list { display: flex; flex-direction: column; gap: .75rem; }

    .adv-item { border-radius: 14px; transition: background-color .3s ease; }
    /* Open item lifts off the gradient on a soft white panel. */
    .adv-item.is-open { background: rgba(255,255,255,.7); }

    .adv-head-btn {
      display: flex; align-items: center; gap: .875rem;
      width: 100%; margin: 0; padding: .875rem 1rem;
      background: none; border: 0; text-align: left;
      font: inherit; color: inherit; cursor: pointer;
    }
    .adv-head-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 10px; }
    .adv-ico {
      width: 40px; height: 40px; flex: 0 0 40px;
      border-radius: 50%; background: var(--blue); color: #fff;
      display: grid; place-items: center;
    }
    .adv-ico svg { width: 20px; height: 20px; }
    .adv-title { font-weight: 600; color: var(--navy); line-height: 1.35; }

    .adv-panel {
      display: grid; grid-template-rows: 1fr; opacity: 1;
      transition: grid-template-rows .35s ease, opacity .35s ease;
    }
    .adv-panel > div { overflow: hidden; min-height: 0; }
    .adv-item.is-collapsed .adv-panel { grid-template-rows: 0fr; opacity: 0; }
    /* Measuring pass: without this the panels are still animating when
       scrollHeight is read, so two of them are open at once and the
       reserved height comes out far too tall. */
    .adv-measuring .adv-item,
    .adv-measuring .adv-panel { transition: none !important; }

    /* Same dotted-bullet treatment as Our solution. */
    .dot-list { list-style: none; display: flex; flex-direction: column; gap: .5rem;
      margin: 0; padding: 0 1rem 1rem calc(40px + 1.875rem); }
    .dot-list li { position: relative; padding-left: 1.125rem;
      font-size: 1rem; line-height: 1.6; color: var(--muted); }
    .dot-list li::before {
      content: ''; position: absolute; left: 0; top: .8em;
      transform: translateY(-50%);
      width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
    }

    /* Step bars recolour when their advantage opens. */
    .wf2-step, .wf2-val { transition: fill .3s ease; }
    .wf2-step { cursor: pointer; }
    /* Chart stays inside the page gutters at every width, so no bar is
       ever cropped at the screen edge. */
    .adv-chart-col { min-width: 0; width: 100%; }
    .wf2-svg { width: 100%; height: auto; display: block; overflow: visible; }

    /* Waterfall bar animation */
    #wfB0, #wfB4 { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0);
      transition: transform 1s cubic-bezier(.22,1,.36,1), opacity .4s ease; }
    #wfB0.in, #wfB4.in { opacity: 1; transform: scaleY(1); }
    #wfB1 { opacity: 0; transform: translateY(-32px); transition: transform .75s cubic-bezier(.22,1,.36,1), opacity .5s ease; }
    #wfB2 { opacity: 0; transform: translateY(-24px); transition: transform .75s .1s cubic-bezier(.22,1,.36,1), opacity .5s .1s ease; }
    #wfB3 { opacity: 0; transform: translateY(-20px); transition: transform .75s .2s cubic-bezier(.22,1,.36,1), opacity .5s .2s ease; }
    #wfB1.in, #wfB2.in, #wfB3.in { opacity: 1; transform: translateY(0); }

    /* ── TEAM ─────────────────────────────────────────────────────────── */
    /* Phones get a link through to the dedicated team page instead of a
       hover-only carousel, which has no touch equivalent. */
    /* ── TEAM PAGE (team.html) ────────────────────────────────────────
       Same card design as the old carousel, laid out as a grid that scrolls
       naturally. Navy is kept because the cards' type colours were built for
       a dark surface. */
    .team-page {
      background: var(--navy); color: #fff;
      padding-block: calc(var(--nav-h) + var(--sec-pad)) var(--sec-pad);
    }
    .team-page-head { margin-bottom: 3rem; }
    .team-grid {
      display: grid; gap: 3rem 2rem;
      grid-template-columns: minmax(0, 1fr);
    }
    @media (min-width: 40rem) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 64rem) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    /* Full bios here: there is room, unlike the old carousel card. */
    .team-page .tm-bio { -webkit-line-clamp: none; line-clamp: none; overflow: visible; display: block; }
    .team-page .tm-card { flex: initial; }

    .team-cta {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
      gap: 1rem 1.5rem; margin-top: clamp(3rem, 6vw, 4.5rem);
      padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid #1E293B;
    }
    .team-cta-line { font-size: 1.125rem; font-weight: 500; color: #CBD5E1; margin: 0; }

    /* Current page in the nav. */
    nav a.nav-link.is-current { color: var(--blue); }

    /* ── TEAM TEASER ──────────────────────────────────────────────────
       Sits where the team section used to be, so the navy that Our advantage
       fades into still lands on a dark block before Recognition. */

    /* ── RECOGNITION ───────────────────────────────────────────────────
       Cards render from the RECOGNITION array in the page script, which is
       also the marquee's source, so the two can never disagree.
       Same navy as The team; the slate divider keeps the two dark sections
       from reading as one slab where they meet. */
    #recognition { scroll-margin-top: var(--nav-h); }
    /* Background comes from .bg-sectors-gradient, shared with Target
       sectors. White above it, so the top join needs no fade. */
    .recognition {
      padding-block: var(--sec-pad);
    }
    .rec-head { margin-bottom: 2.5rem; }

    /* 3rem between groups. The Programmes block carries the same margin
       inside the collapsible panel, whose overflow:hidden clips it while
       collapsed, so no phantom gap appears before it opens. */
    .rec-group + .rec-group, .rec-collapse .rec-group { margin-top: 3rem; }
    .rec-group-title {
      font-size: .75rem; font-weight: 500; text-transform: uppercase;
      letter-spacing: .16em; color: #64748B;  /* slate-500 */
      margin: 0 0 1rem;
    }

    /* Flex rather than grid, so a part-full last row centres instead of
       hanging off to the left. --cols is the count for the breakpoint; the
       width calc turns it into equal, fixed card widths, so cards in a short
       last row match the rows above exactly. */
    .rec-grid {
      --cols: 2; --rec-gap: 1.25rem;
      display: flex; flex-wrap: wrap; gap: var(--rec-gap);
      justify-content: center;
    }
    .rec-grid > * {
      flex: 0 0 auto;
      width: calc((100% - (var(--cols) - 1) * var(--rec-gap)) / var(--cols));
    }
    @media (min-width: 40rem) { .rec-grid { --cols: 3; } }
    @media (min-width: 64rem) { .rec-grid { --cols: 4; } }
    /* From 1280px each group uses its own column count, set inline as --g. */
    @media (min-width: 80rem) { .rec-grid { --cols: var(--g, 4); } }

    .rec-card {
      position: relative; padding: 1.25rem;
      background: #fff;
      /* slate-300, not slate-200: the section now ends on the page tint,
         and a slate-200 edge all but vanishes against it. */
      border: 1px solid #CBD5E1;
      border-radius: 1rem;
      box-shadow: 0 1px 3px rgba(12, 24, 38, .10);
      display: flex; flex-direction: column;
      text-decoration: none; color: inherit;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    /* The logo sits straight on the white card, so every mark keeps its own
       colours — nothing is inverted, recoloured or filtered. */
    .rec-logo {
      display: flex; align-items: center; justify-content: center;
      width: 100%; height: 96px;
      /* Guaranteed breathing room on all four sides. box-sizing is
         border-box globally, so the usable area is (width - 24) x 72. */
      padding: 12px;
      overflow: hidden;                        /* belt and braces */
    }
    .rec-logo img {
      /* The per-logo optical correction is applied to the size caps, not as
         a transform. A transform is applied after layout, so max-height and
         max-width could not hold it back and a large --s drew straight
         through the box: KPMG at 2.6 rendered 125px tall in a 96px box.
         Folding --s into the caps makes the scale layout-aware, and the
         100% term clamps it to the padded area at every column count.
         width/height auto keeps the aspect ratio, so nothing distorts. */
      max-height: min(calc(48px * var(--s, 1)), 100%);
      max-width:  min(calc(160px * var(--s, 1)), 100%);
      width: auto; height: auto;
      object-fit: contain;
    }
    .rec-label {
      font-size: .875rem; line-height: 1.45; color: #475569;  /* slate-600 */
      margin-top: .75rem;
      /* Two-line floor so every card in a group is the same height. */
      min-height: 2.9em;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
      line-clamp: 2; overflow: hidden;
    }
    /* Fallback if a logo file is ever missing: reads on the white tile. */
    .rec-wordmark { font-size: 15px; font-weight: 600; color: #334155; text-align: center; line-height: 1.3; }

    a.rec-card:hover, a.rec-card:focus-visible {
      border-color: var(--blue); box-shadow: 0 4px 14px rgba(12, 24, 38, .12);
    }
    /* Scoped to the anchor: an unlinked card is not focusable and must not
       pick up a focus ring that would suggest otherwise. */
    a.rec-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
    .rec-ext { position: absolute; top: .75rem; right: .75rem; width: 12px; height: 12px; color: #94A3B8; z-index: 1; }

    /* Programmes: collapsed until the button is pressed. */
    /* Open by default: with no JavaScript the whole section stays readable
       and the button never appears. The script collapses it on load. */
    .rec-collapse { display: grid; grid-template-rows: 1fr; opacity: 1;
      transition: grid-template-rows .4s ease, opacity .4s ease; }
    .rec-collapse > div { overflow: hidden; min-height: 0; }
    .rec-collapse.is-collapsed { grid-template-rows: 0fr; opacity: 0; }
    /* Overflow cards continue the grid above them, one gap below it. */
    .rec-grid-more { margin-top: 1.25rem; }
    .rec-more-wrap { display: flex; justify-content: flex-start; margin-top: 2rem; }
    /* Visual style comes from .btn-outline, shared with "Explore Technology";
       only the icon layout is added here. */
    .rec-more {
      display: inline-flex; align-items: center; gap: .5rem;
      font: inherit; font-size: .875rem; font-weight: 700;
    }
    .rec-more:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
    .rec-more svg { width: 14px; height: 14px; transition: transform .3s ease; }
    .rec-more[aria-expanded="true"] svg { transform: rotate(180deg); }

    /* Marquee pauses on hover and on keyboard focus. */
    .marquee-track:hover, .marquee-track:focus-within { animation-play-state: paused; }

    @media (prefers-reduced-motion: reduce) {
      .rec-card, .rec-collapse, .rec-more svg { transition: none; }
      /* Static wrapping row instead of a moving strip. */
      .marquee-outer { overflow: visible; }
      .marquee-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
      .marquee-track .marquee-set[aria-hidden="true"] { display: none; }
      .marquee-set { grid-auto-flow: row dense; grid-template-columns: repeat(auto-fit, minmax(5rem, 6.875rem)); justify-content: center; }
    }

    /* ── THE TEAM ─────────────────────────────────────────────────────
       Header + scroll-snap carousel, sized to fit one screen on desktop.
       --card-w drives everything: card width, the track width (exactly one
       page of cards) and the arrows' vertical offset so they centre on the
       photos rather than the whole card. It is capped by the space actually
       available, so the group can never outgrow the shared container.
       ─────────────────────────────────────────────────────────────────── */
    #team { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
    .team {
      padding-block: clamp(1rem, 3vh, 2.5rem);
      background: var(--navy); color: #fff;
    }

    /* ── Header ── */
    .tm-head { margin-bottom: 1.25rem; }
    /* header spacing comes from the shared .t-eyebrow / .t-h2 / .sec-rule */

    /* ── Carousel row ── */
    .tm-row {
      /* Width the shared container actually offers, as a pure length. */
      --avail: calc(min(75rem, 100vw - 1rem) - 2 * var(--pad-x));
      --controls: 8.5rem;                 /* 2 x 44px arrow + 2 x 1.5rem gap */
      --card-w: min(320px, var(--avail));
      display: flex; align-items: flex-start; justify-content: center;
      gap: 1.5rem;
    }
    .tm-track {
      display: flex; gap: 2rem;
      width: 100%; max-width: var(--card-w);
      overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none; -ms-overflow-style: none;   /* hidden, still scrollable */
    }
    .tm-track::-webkit-scrollbar { display: none; }
    .tm-track:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }

    .tm-arrow { display: none; }                          /* swipe + dots below 640px */

    /* ── Card ── */
    .tm-card { display: flex; flex-direction: column; flex: 0 0 var(--card-w); scroll-snap-align: start; }
    .tm-photo {
      position: relative; overflow: hidden;
      border-radius: 1rem; aspect-ratio: 5 / 6;           /* always portrait */
      background: rgba(255,255,255,.06);
    }
    .tm-photo img {
      width: 100%; height: 100%; display: block;
      object-fit: cover; object-position: center 20%;
      transition: transform .3s ease;
    }
    @media (hover: hover) { .tm-card:hover .tm-photo img { transform: scale(1.03); } }

    .tm-meta {
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; margin-top: .875rem;
      /* Fixed height so a card without a LinkedIn icon keeps its name,
         divider and bio level with the rest of the row. */
      min-height: 1.25rem;
    }
    .tm-role {
      font-size: .75rem; font-weight: 500; line-height: 1.25;
      text-transform: uppercase; letter-spacing: .1em; color: #94A3B8;
    }
    .tm-li {
      display: inline-flex; align-items: center; justify-content: center;
      /* A flex item by default shrinks; without this a long role label
         squeezed the icon to 43px and broke the 44px tap target. */
      flex-shrink: 0;
      width: var(--tap); height: var(--tap);
      /* Block-only negative margin: an inline one would overhang the last
         card and add phantom scroll distance to the track. */
      margin-block: calc(var(--tap) / -2 + 10px);
      color: #94A3B8; transition: color .2s;
    }
    .tm-li svg { width: 20px; height: 20px; display: block; }
    .tm-li:hover { color: var(--blue); }
    .tm-li:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

    .tm-name { font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: #fff; margin-top: .25rem; }
    .tm-divider { border: 0; border-top: 1px solid #1E293B; margin: .875rem 0; }
    .tm-bio {
      font-size: 13px; line-height: 1.5; color: #CBD5E1;
      /* Safety net only — the copy is written to fit. */
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
      line-clamp: 4; overflow: hidden;
    }

    /* ── Dots ── */
    /* wrap: 9 dots at 44px do not fit a 320px screen on one row. */
    .tm-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: 1.25rem; }
    .tm-dot {
      width: var(--tap); height: var(--tap);
      display: grid; place-items: center;
      background: none; border: 0; cursor: pointer;
    }
    .tm-dot::before {
      content: ''; display: block;
      width: 8px; height: 8px; border-radius: 999px;
      background: #475569; transition: width .3s ease, background .3s ease;
    }
    .tm-dot.is-on::before { width: 24px; background: var(--blue); }
    .tm-dot:focus-visible { outline: 2px solid var(--blue); outline-offset: -8px; border-radius: 8px; }

    @media (prefers-reduced-motion: reduce) {
      .tm-photo img { transition: none; }
      .tm-card:hover .tm-photo img { transform: none; }
      .tm-dot::before { transition: none; }
    }

    /* ── Tablet: 2 cards, arrows appear ── */
    @media (min-width: 40rem) {
      .tm-row {
        --card-w: min(280px, calc((var(--avail) - var(--controls) - 2rem) / 2));
      }
      .tm-track { max-width: calc(var(--card-w) * 2 + 2rem); }
      .tm-arrow {
        display: inline-flex; align-items: center; justify-content: center;
        flex: 0 0 auto;
        width: 2.75rem; height: 2.75rem; border-radius: 50%;
        border: 1px solid #475569; background: none; color: #fff; cursor: pointer;
        /* Centred on the photo (height = card width x 6/5), not the whole card. */
        margin-top: calc(var(--card-w) * .6 - 1.375rem);
        transition: border-color .2s, color .2s, opacity .2s;
      }
      .tm-arrow svg { width: 18px; height: 18px; display: block; }
      .tm-arrow:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
      .tm-arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }
      .tm-arrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
    }

    /* ── Desktop: 3 cards, section fits the screen ── */
    @media (min-width: 64rem) {
      .team {
        min-height: calc(100svh - var(--nav-h));
        display: flex; flex-direction: column; justify-content: center;
      }
      .tm-row {
        /* 34vh keeps the card (and so the photo) short enough to fit a
           900px-tall screen; the second term stops the group outgrowing the
           container on tall displays. */
        --card-w: min(clamp(260px, 34vh, 340px), calc((var(--avail) - var(--controls) - 4rem) / 3));
      }
      .tm-track { max-width: calc(var(--card-w) * 3 + 4rem); }
      /* Shorter dot button buys back the vertical space the one-screen fit
         needs; below 1024px the full 44px target is restored. */
      .tm-dot { height: 2rem; }
    }

    /* ── CTA / CONTACT ────────────────────────────────────────────────── */
    /* Recognition ends on the tint, so this rises out of it — the same
       light-to-light fade Target sectors hands to the section below it. */
    .cta {
      padding-block: var(--sec-pad);
      background: linear-gradient(to bottom,
        var(--bg-tint) 0, var(--bg-white) var(--fade-soft),
        var(--bg-white) 100%);
    }
    .cta-layout { display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; }
    .cta-col { flex: 1; min-width: 0; width: 100%; }
    .cta-lede { margin-top: 0; }
    .cta-form { width: 100%; max-width: 35rem; margin-top: 0; padding-top: 0; }
    .cta-form-fields { display: flex; flex-direction: column; gap: 1rem; }
    .cta-form-submit { display: flex; gap: .75rem; align-items: center; margin-top: .25rem; }
    .cta-field { display: flex; flex-direction: column; gap: .375rem; margin-bottom: 1rem; }
    .cta-field label { font-size: .875rem; font-weight: 600; color: var(--navy); letter-spacing: .04em; text-transform: uppercase; }
    .cta-field input {
      width: 100%;
      border: 1.5px solid #D1D5DB; border-radius: 10px;
      padding: .875rem 1.125rem;
      font-size: 1rem;              /* 16px stops iOS zooming on focus */
      font-family: inherit; outline: none; color: var(--navy);
      transition: border-color .2s, box-shadow .2s;
    }
    .cta-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }

    /* ── FOOTER ───────────────────────────────────────────────────────── */
    /* Deliberately no fade into the footer: it starts on a clean edge. */
    footer {
      position: relative; z-index: 1;
      background: var(--bg-navy); color: rgba(255,255,255,.6);
      padding-block: 3rem 2rem;
    }
    .foot-top { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
    .foot-brand { display: flex; align-items: flex-start; gap: 2rem; }
    .foot-brand img { height: clamp(2.5rem, 5vw, 3.25rem); width: auto; flex-shrink: 0; filter: brightness(0) invert(1); }
    .foot-right { font-size: .875rem; text-align: left; line-height: 1.8; }
    .foot-right a { display: inline-block; min-height: var(--tap); padding-block: .625rem; color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s; }
    .foot-right a:hover { color: #fff; }
    .foot-copyright { display: none; }

    /* ── REPORT MODAL ─────────────────────────────────────────────────── */
    /* Body scroll lock while the report modal is open. The modal is its own
       scroll container, so a tall form is still reachable. */
    html.scroll-locked, html.scroll-locked body { overflow: hidden; }
    .report-modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; }
    .report-modal.open { display: flex; }
    .report-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); cursor: pointer; }
    .report-box {
      position: relative; z-index: 1; background: #fff; border-radius: 20px;
      padding: clamp(1.5rem, 5vw, 2.75rem);
      width: min(32.5rem, 100%);           /* % of the viewport, not 100vw */
      max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
      overflow-y: auto;
      box-shadow: 0 32px 80px rgba(0,0,0,.2);
    }
    .report-box h3 { font-size: 1.5rem; font-weight: 700; color: var(--navy); margin-bottom: .375rem; }
    .report-box .report-sub { font-size: .875rem; color: var(--muted); margin-bottom: 1.75rem; }
    .report-close {
      position: absolute; top: .5rem; right: .5rem;
      width: var(--tap); height: var(--tap);
      display: grid; place-items: center;
      background: none; border: none; cursor: pointer;
      font-size: 1.5rem; color: var(--muted);
    }
    .report-close:hover { color: var(--navy); }

    /* ════════════════════════════════════════════════════════════════════
       640px — LARGE PHONES
       ════════════════════════════════════════════════════════════════════ */
    @media (min-width: 40rem) {
      .hero-btn-wrap { flex-direction: row; align-items: center; gap: 1rem; }
    }

    /* ════════════════════════════════════════════════════════════════════
       768px — TABLETS.  Scroll-driven sections switch on here.
       ════════════════════════════════════════════════════════════════════ */
    @media (min-width: 48rem) {
      :root { --pad-x: 2rem; }

      .hero-visual { --h2: 220px; --stat: 140px; --mv-h2: 10px; --mv-st: 14px; }

      /* ── HERO ── */
      .hero { padding-top: calc(var(--nav-h) + 2.5rem); }
      .hero-inner { justify-content: center; }
      .hero-sub { margin: 1.5rem 0 2.25rem; }

      /* ── TRUST BAR: full-bleed strip across the foot of the hero ── */
      .trust-bar {
        display: flex; flex-direction: column; align-items: center;
        width: 100%;
        /* 2rem floor guarantees the 43% bubble always clears the logo bar
           on short viewports. */
        margin: clamp(2rem, 3vh, 2.5rem) 0 calc(var(--hero-pb) * -1);
        padding: .75rem 0;
        background: #fff; border-top: 1px solid rgba(0,0,0,.07);
      }

      /* ── ADVANTAGE: sticky ── */
      /* Natural height: the chart animates once on an IntersectionObserver,
         so there is nothing here that needs scroll distance. */
      .advantage { height: auto; }
      .advantage-frame {
        position: relative; height: auto;
        padding-block: var(--sec-pad);
      }
      .adv-body {
        /* List left, chart right. The markup keeps the chart first so the
           stacked layout below 1024px leads with it; order swaps them here. */
        display: grid; grid-template-columns: 45fr 55fr;
        gap: 4rem; align-items: start;
      }
      .adv-list      { order: 1; }
      .adv-chart-col { order: 2; align-self: start; }
      /* No top offset: the chart's top edge sits level with the top of the
         first advantage item. */
      .wf2-svg { margin-top: 0; }

      /* ── TEAM: carousel replaces the mobile CTA ── */

      /* ── CTA ── */
      .cta-layout { flex-direction: row; align-items: flex-start; gap: clamp(2rem, 5vw, 5rem); }
      .cta-field input { font-size: .875rem; }

      /* ── FOOTER ── */
      .foot-top { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 5vw, 3.75rem); }
      .foot-right { text-align: right; }
      .foot-copyright { display: block; }
    }

    /* ════════════════════════════════════════════════════════════════════
       THE PROBLEM — the scroll-driven circle scene. Gated at 1024px: on
       tablets the 250vh track left a large empty void around the circles,
       so below this width the plain list above is used instead.
       ════════════════════════════════════════════════════════════════════ */
    @media (min-width: 64rem) {
      /* ── TRADEOFF: sticky "pick two" triangle ── */
      /* Natural height: the scene plays on a timer when it scrolls into
         view, so the section no longer pins the page. */
      .tradeoff-track { height: auto; }
      .tradeoff-sticky {
        position: relative; height: auto;
        justify-content: flex-start;
        padding: var(--sec-pad) 0 calc(var(--sec-pad) + 4rem);
      }
      .tradeoff-header { margin-bottom: 3.375rem; }
      .tradeoff-mob-cards { display: none; }

      /* In flow as a flex child, so it fills exactly the space left below
         the heading — the triangle is laid out in that box, never over it. */
      .tradeoff-circles {
        display: block; position: relative; inset: auto;
        width: 100%;
      }
      /* Same content box as .container, so every vertex and caption is
         inside the shared 1200px column. All positions are set in px by the
         script from this element's box. */
      .trd-stage {
        display: block; position: relative; height: auto;   /* the script sizes this to the triangle */   /* fixed: the section is no longer pinned */
        width: calc(min(var(--maxw), 100%) - 2 * var(--pad-x));
        margin-inline: auto;
      }
      /* Decorative: the polygon points are rewritten each frame from the
         bubbles' live centres, so the dashes follow the idle float. */
      .trd-tri {
        display: block; position: absolute; inset: 0;
        width: 100%; height: 100%; z-index: 0;
        pointer-events: none; overflow: visible;
      }
      /* The script fills these; until it does (or if it never does) they are
         empty boxes stacked at the stage origin, with the statement laid over
         them. Hiding them leaves the heading and the statement, both intact. */
      .tc:empty, .trd-cap:empty { display: none; }
      .tc {
        position: absolute; width: clamp(7.5rem, 11vw, 10rem); aspect-ratio: 1;
        z-index: 1;
        border-radius: 50%; display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        background: radial-gradient(circle at 38% 35%, #eaf4fd 0%, #cce4f5 60%, #b8d9f0 100%);
        box-shadow: 0 12px 48px rgba(59,130,246,.12); will-change: transform;
      }
      /* Shards thrown off by a bubble as it pops. Same gradient family as
         .tc so they read as pieces of it, but no shadow and no filter —
         only transform and opacity ever change. */
      /* A piece of the big bubble: the same gradient and the same glow as
         .tc, scaled down. Nothing glossy, no ring. */
      .trd-burst {
        position: absolute; border-radius: 50%;
        pointer-events: none; z-index: 1; opacity: 0;
        background: radial-gradient(circle at 38% 35%, #eaf4fd 0%, #cce4f5 60%, #b8d9f0 100%);
        box-shadow: 0 3px 12px rgba(59,130,246,.12);
      }

      /* ── Tension on hover ──
         The bubble is interactive now: hovering, tapping or focusing it shows
         what it costs the others. Opacity on .tc and .trd-cap is written every
         frame by the scroll loop, so the dimming is eased there rather than in
         CSS; only the edges and loss captions transition here. */
      .tc { cursor: pointer; }
      .tc:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

      .trd-dot {
        stroke: #93C5FD; stroke-width: 1.5; stroke-dasharray: 4 6;
        pointer-events: none;
      }
      .trd-edge {
        stroke: var(--navy); stroke-width: 2.5; stroke-linecap: round;
        opacity: 0; transition: opacity .3s ease; pointer-events: none;
      }
      .trd-edge.is-taut { opacity: 1; }

      .trd-loss {
        position: absolute; z-index: 2; transform: translate(-50%, 0);
        font-size: .75rem; font-weight: 500; color: var(--navy);
        white-space: nowrap; pointer-events: none;
        opacity: 0; transition: opacity .2s ease;
      }
      .trd-loss.is-shown { opacity: 1; }
      /* The bubble under the cursor names what it buys, in brand blue. */
      .trd-loss.is-active { color: var(--blue); }
      /* Reduced motion: the states still change, they just snap. */
      @media (prefers-reduced-motion: reduce) {
        .trd-edge, .trd-loss { transition: none; }
      }

      /* Captions sit outward from the triangle; the script pins each one to
         the outer edge of its bubble and caps the width to the space left. */
      .trd-cap {
        display: block; position: absolute; z-index: 1;
        /* 34ch: the longer descriptions need the extra room. Cost and
           Durability are clamped tighter than this by the space beside their
           bubble; only Efficiency, which has the open right-hand side,
           actually reaches it. */
        max-width: 34ch; pointer-events: none;
        will-change: transform, opacity;
      }
      .trd-cap-title { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--navy); margin-bottom: .25rem; }
      .trd-cap-body  { font-size: 16px; line-height: 1.6; color: #475569; }
      .trd-cap-cost { text-align: right; }
      /* Icon is a share of the circle so it scales with it. */
      .tc-icon { width: 45%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
      .tc-icon img { width: 100%; height: 100%; object-fit: contain;
        filter: brightness(0) saturate(100%) invert(12%) sepia(80%) saturate(800%) hue-rotate(210deg) brightness(90%); }
      .tc-label { color: var(--navy); font-weight: 700; font-size: clamp(.9375rem, 1.5vw, 1.25rem); }

      /* Default: in flow, below the triangle. This is what reduced motion
         and a failed script get, so the statement is always readable and
         never sits on top of a visible bubble. */
      .tradeoff-brand {
        display: flex; flex-direction: column; align-items: center;
        position: relative; margin: .4375rem auto 0;
        text-align: center; z-index: 5; pointer-events: none;
      }
      /* Scroll-driven scene only: lifted out of flow onto the Cost/Durability
         line, horizontally centred on the triangle. The script sets `top` to
         that line; the -50%/-50% puts the block's own centre on it. Taken out
         of flow, it leaves no gap below the triangle. */
      .tradeoff-brand.is-centred {
        position: absolute; left: 50%; top: 0; margin: 0;
        width: max-content; max-width: 100%;
      }
      .tradeoff-brand img { width: min(37.5rem, 70vw); height: auto; display: block; }
      .tradeoff-brand-cap { font-size: clamp(1.5rem, 4.7vw, 3.75rem); font-weight: 700; color: var(--navy); margin-top: .5rem; letter-spacing: -.02em; }

      .trd-bub {
        display: block; position: absolute; border-radius: 50%;
        pointer-events: none; z-index: 0; opacity: .4;
        background: radial-gradient(circle at 38% 35%, #eaf4fd 0%, #cce4f5 60%, #b8d9f0 100%);
        animation: solFloat ease-in-out infinite;
      }
      .trd-lb1  { width: 180px; height: 180px; top: 12%; left: -18px;  animation-duration: 5.5s; animation-delay: 0s;
        -webkit-mask-image: linear-gradient(to top, black 55%, transparent 100%); mask-image: linear-gradient(to top, black 55%, transparent 100%); }
      .trd-lb1b { width: 80px;  height: 80px;  top: 40%; left: -8px;   animation-duration: 4.6s; animation-delay: 1.2s; }
      .trd-lb2  { width: 115px; height: 115px; top: 55%; left: -15px;  animation-duration: 7s;   animation-delay: 1.3s; }
      .trd-lb2b { width: 55px;  height: 55px;  top: 75%; left: -10px;  animation-duration: 5.0s; animation-delay: 2.7s; }
      .trd-lb3  { width: 90px;  height: 90px;  top: 88%; left: -10px;  animation-duration: 8s;   animation-delay: 0.6s; }
      .trd-rb1  { width: 180px; height: 180px; top: 12%; right: -18px; animation-duration: 6s;   animation-delay: 1.8s;
        -webkit-mask-image: linear-gradient(to top, black 55%, transparent 100%); mask-image: linear-gradient(to top, black 55%, transparent 100%); }
      .trd-rb1b { width: 80px;  height: 80px;  top: 40%; right: -8px;  animation-duration: 4.8s; animation-delay: 0.9s; }
      .trd-rb2  { width: 115px; height: 115px; top: 55%; right: -15px; animation-duration: 7.5s; animation-delay: 0.4s; }
      .trd-rb2b { width: 55px;  height: 55px;  top: 75%; right: -10px; animation-duration: 5.2s; animation-delay: 3.0s; }
      .trd-rb3  { width: 90px;  height: 90px;  top: 88%; right: -10px; animation-duration: 8.5s; animation-delay: 2.2s; }
    }

    /* Reduced motion: no drift, and the brand block sits in normal flow. */
    @media (min-width: 64rem) and (prefers-reduced-motion: reduce) {
      .trd-bub { animation: none; }
    }

    /* ════════════════════════════════════════════════════════════════════
       1024px — SMALL LAPTOPS.  Full nav bar and the hero bubble cluster.
       ════════════════════════════════════════════════════════════════════ */
    @media (min-width: 64rem) {
      :root { --nav-h: 4.5rem; --hero-pb: 5rem; --pad-x: 2.5rem; }

      .nav-inner { gap: clamp(1rem, 3vw, 3rem); }
      .nav-ham { display: none; }
      .nav-links {
        display: flex; flex-basis: auto;
        flex-direction: row; align-items: center;
        gap: clamp(1rem, 3vw, 3rem);
        padding: 0; max-height: none; overflow: visible;
      }
      nav a.nav-link { font-size: clamp(.875rem, 1.4vw, 1.125rem); min-height: 0; }
      .nav-links .btn { display: inline-block; }

      .hero { padding-top: calc(var(--nav-h) + 1.75rem); }
      .hero-inner {
        flex-direction: row; justify-content: space-between;
        align-items: center; gap: clamp(2rem, 5vw, 3.75rem);
      }
      .hero-left { flex: 1 1 20rem; }
      .hero-visual {
        --h2:   clamp(240px, 22vw, 320px);
        --stat: clamp(140px, 12vw, 180px);
        --mv-h2: 12px; --mv-st: 20px;
        --num-min: 15px; --lbl-min: 10px;   /* desktop type unchanged */
        margin-inline: 0;              /* flush to the container's right edge */
      }

      /* Target sectors: equal columns, both vertically centred. */
      .ind-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
      /* Height comes from the aspect ratio alone — no height/min-height here,
         they would override it. */
      .ind-media {
        display: block;
        width: 92%; max-width: 560px; aspect-ratio: 4 / 5;
        justify-self: end; align-self: center;
      }
      .ind-inline-media { display: none; }
    }

    /* ════════════════════════════════════════════════════════════════════
       1280px — DESKTOPS
       ════════════════════════════════════════════════════════════════════ */
    @media (min-width: 80rem) {
      .hero-left { max-width: 47.5rem; }
    }

    /* ══════════════════════════════════════════════════════════════════
       OUR SOLUTION — sticky scene from 768px.
       Row 1: header across the full container width.
       Row 2: product image (5fr) beside the feature panels (7fr).
       ══════════════════════════════════════════════════════════════════ */
    @media (min-width: 64rem) {
      /* Natural height: panels are tabs now, not scroll positions. */
      .stg-container { height: auto; }
      .stg-frame {
        position: relative; height: auto;
        display: flex; align-items: center;
        padding: var(--sec-pad) 0;
      }

      .stg-layout { display: block; width: 100%; }

      /* ── Row 1: header ── */
      .stg-header { margin-bottom: 3rem; }

      /* ── Row 2: the arc ──
         The image is pinned left and vertically centred; the script places
         each item absolutely so its icon lands on the dotted arc, which is
         concentric with the image. */
      .stg-body { display: block; position: relative; }
      .stg-arc {
        display: block; position: absolute; inset: 0;
        width: 100%; height: 100%; overflow: visible;
        pointer-events: none; z-index: 0;
      }
      .stg-visual {
        position: absolute; left: 0; top: 50%; transform: translateY(-50%);
        max-width: 25rem; margin-inline: 0;                 /* left edge = eyebrow/H2 */
      }

      /* The column is held by the script at the height of its tallest open
         state, so the heading and the product image never move as pillars
         open and close. */
      .stg-panels { position: static; display: block; z-index: 1; }
      .stg-panels::before { display: none; }     /* the arc replaces the rail */
      .stg-pillar {
        position: absolute; left: 0; top: 0;
        padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
        transition: transform .55s cubic-bezier(.4, 0, .2, 1);
        will-change: transform;
      }

      .stg-ph { align-items: flex-start; gap: 1rem; }
      .stg-item-title {
        font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 600; color: var(--navy);
        margin-bottom: .125rem;
      }
      .stg-item-sub {
        font-size: clamp(.9375rem, 1.2vw, 1.0625rem); font-weight: 500; color: var(--blue);
        margin: 0;
      }
      .stg-copy ul {
        margin: 1.25rem 0 0; opacity: 0; transition: opacity .3s ease;
      }
      .stg-pillar.is-open .stg-copy ul { opacity: 1; transition-delay: .15s; }
      .stg-copy ul li { font-size: clamp(.9375rem, 1.2vw, 1.0625rem); }
    }

    /* Short desktop viewports (<=900px tall): tighten the stack so three
       collapsed headers plus the longest open panel finish above the
       .stg-frame bottom fade instead of washing out inside it. */
    @media (min-width: 64rem) and (max-height: 56.25rem) {
      .stg-header { margin-bottom: 1.5rem; }
      .stg-panels { gap: .75rem; }
      .stg-copy ul { margin-top: .75rem; gap: .5rem; }
      .stg-copy ul li { font-size: .9375rem; }
    }

    /* Very short desktop viewports (<=800px tall): at 25rem the square image
       is the tallest element in the row, so it sets the block height. Trim it
       until the pillar column is the tallest thing again. */
    @media (min-width: 64rem) and (max-height: 50rem) {
      .stg-visual { max-width: 21rem; }
    }

    /* Reduced motion: the list still expands on hover, tap and keyboard —
       it just does so instantly, exactly as the Target sectors list does. */
    @media (prefers-reduced-motion: reduce) {
      .stg-pillar, .stg-panel, .stg-copy ul, .stg-step-n,
      .adv-item, .adv-panel, .wf2-step, .wf2-val { transition-duration: .01ms !important; }
    }

    /* ════════════════════════════════════════════════════════════════════
       INDUSTRIES — fit the section to the viewport (tablet + desktop only).
       Gated on viewport HEIGHT as well as width: below ~650px tall (or ~900px
       tall on single-column tablet) none of this applies and the section
       simply flows and scrolls as before.
       ════════════════════════════════════════════════════════════════════ */
    @media (min-width: 48rem) and (min-height: 56.25rem),
           (min-width: 64rem) and (min-height: 40.625rem) {
      .gh-sector {
        display: flex; flex-direction: column;
      }
      /* Content-height (not stretched), then centred: the image frame takes
         its height from the left column, so the two stay in step. */
      .gh-sector > .container { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; }
      .ind-split { flex: 0 0 auto; }
    }

    /* Default leading; headings and decks set their own via the system above. */
    body { line-height: 1.5; }