/* =============================================================
   index.css — homepage-only styles (no media queries)
   Extracted from the two inline <style> blocks that used to live in
   index.html. Loaded AFTER custom.css so it keeps overriding it.
   Breakpoint rules live in index-responsive.css, loaded after this.
   ============================================================= */

/* ---------- Light header theme (index only) ---------- */
/* ---- Light header theme (index only) ---- */
/* The #header wrapper is a direct child of <body>, so making IT sticky lets
   the header sit in normal flow at the top and smoothly pin to the top on
   scroll — native (no JS, no reflow, no jump/jerk). The inner <header> stays
   static and fills the wrapper. */
#header {
    position: sticky;
    top: 0;
    z-index: 998;
}

header {
    position: static;
    background: linear-gradient(90deg, #ffffff 0%, #eef4fc 55%, #e6eefb 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e3ebf6;
}

.navbar a,
.navbar a:focus {
    color: #0e2545;
}

.navbar a:hover,
.navbar .nav-link:hover,
.dropdown a:first-child:hover {
    color: #f77e1a;
}

.header-scrolled .navbar a,
.header-scrolled .navbar a:focus {
    color: #0e2545;
}

.header-scrolled .navbar a:hover {
    color: #f77e1a;
}

/* The base header logo svg has a baked-in dark background (blends on the old
   dark header, shows as a black box on the light one). Hide both imgs and
   paint the clean dark wordmark as the link background instead. */
.index-page #header #logo a {
    display: inline-block;
    width: 175px;
    height: 82px;
    /* path is relative to this stylesheet (assets/css/), not to the page */
    background: url("../img/Difrex-Homepage-Img/Difrex-Logo-black.png") left center / auto 82px no-repeat;
}

.index-page #header #logo a img {
    display: none;
}

.header-scrolled header {
    background: linear-gradient(90deg, #ffffff 0%, #eef4fc 55%, #e6eefb 100%);
    border-bottom: 1px solid #e3ebf6;
    box-shadow: 0 4px 18px rgba(20, 45, 90, .06);
}

/* hamburger icon dark on light header */
#header .navbar-btn .bi,
#header .navbar .bi-list {
    color: #0e2545;
}

body {
    background-color: #eef5fc !important;
    color: #0d2238 !important;
}

#main {
    background-color: #eef5fc;
}

.section-with-bg {
    background-color: #dfecf9 !important;
}

/* ---------- Tech Suite hero (scoped light hero slider) ---------- */
/* Scoped light hero — all rules under .ts-hero-shell to avoid collisions */
.ts-hero-shell {
    --tsh-navy: #0e2545;
    --tsh-navy-soft: #40506b;
    --tsh-blue: #17347e;
    --tsh-blue2: #1b45b0;
    --tsh-orange: #f2751a;
    --tsh-purple: #7a3ff2;
    --tsh-page: #eaf1fb;
    --tsh-chip: #eef3fc;
    --tsh-chip-border: #dde6f6;
    --tsh-icon-bg: #e4ecfb;

    font-family: 'Barlow', system-ui, sans-serif;
    color: var(--tsh-navy);
    background: var(--tsh-page);
    padding-top: 0;
}

.ts-hero-shell * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---------- Slider wrapper ---------- */
.ts-hero-carousel {
    position: relative;
    display: grid;
    isolation: isolate;
    background: #eaf1fb;
    overflow: hidden;
}

/* allow the stacked grid slides to shrink below their content width so
   text wraps instead of overflowing on narrow screens */
.ts-hero-carousel .ts-slide,
.ts-hero-shell,
.ts-hero-shell .ts-body,
.ts-hero-shell .ts-hero,
.ts-hero-shell .ts-side,
.ts-hero-shell .ts-award,
.ts-hero-shell .ts-award p,
.ts-hero-shell .ts-feature,
.ts-hero-shell .ts-feature>div,
.ts-hero-shell .ts-bb-left,
.ts-hero-shell .ts-bb-left p,
.ts1,
.ts1-inner {
    min-width: 0;
}

.ts-hero-carousel .ts-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* opaque so the active slide fully covers the stacked inactive one
       (prevents bleed-through when the slides differ in height) */
    background: #eaf1fb;
    transition: opacity .8s ease, visibility 0s linear .8s;
}

.ts-hero-carousel .ts-slide.ts-slide-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
    transition: opacity .8s ease;
}

/* When Slide 2 becomes active, its sidebar slides in from the left */
.ts-hero-carousel .ts-slide .ts-side {
    opacity: 0;
    transform: translateX(-70px);
    transition: transform .85s cubic-bezier(.16, 1, .3, 1) .15s, opacity .85s ease .15s;
}

.ts-hero-carousel .ts-slide.ts-slide-active .ts-side {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- Slider nav arrow (single, direction-aware; right edge, vertically centred) ---------- */
.ts-hero-nav {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
    z-index: 30;
}

.ts-hero-nav .ts-nav-arrow {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f2751a;
    color: #fff;
    cursor: pointer;
    transition: background .3s ease, transform .3s ease;
}

.ts-hero-nav .ts-nav-arrow:hover {
    background: #d9620c;
    transform: scale(1.08);
}

/* only the arrow glyph blinks — the orange circle stays steady */
.ts-hero-nav .ts-nav-arrow svg {
    width: 25px;
    height: 25px;
    display: block;
    animation: ts-nav-blink 1.1s ease-in-out infinite;
}

.ts-hero-nav .ts-nav-arrow:hover svg {
    animation-play-state: paused;
    opacity: 1;
}

/* Only one arrow shows at a time: next on the first slide, prev on the last */
.ts-hero-nav .ts-nav-arrow[hidden] {
    display: none;
}

@keyframes ts-nav-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .12;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ts-hero-nav .ts-nav-arrow svg {
        animation: none;
    }
}

/* ---------- Slide dots (bottom centre, laid out in a row) ---------- */
.ts-hero-dots {
    position: absolute;
    left: 50%;
    bottom: 30px;
    top: auto;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    z-index: 30;
    transition: bottom .5s ease;
}

/* On Slide 2 they sit just above the bottom bar (~92px tall) — the inactive
   dot is white and would vanish against the light bar. Slide 2 also has the
   340px sidebar, so centre them on the hero/plant area, not on the section */
.ts-hero-carousel.ts-on-2 .ts-hero-dots {
    bottom: 145px;
    left: calc(50% + 170px);
}

.ts-hero-dots .ts-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: none;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(10, 25, 45, .35);
    transition: width .3s ease, background .3s ease, border-radius .3s ease;
}

.ts-hero-dots .ts-dot.active {
    width: 34px;
    border-radius: 20px;
    background: #f2751a;
}

/* ---------- Body grid ---------- */
.ts-hero-shell .ts-body {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    flex: 1 1 auto;
}

/* ---------- Sidebar ---------- */
.ts-hero-shell .ts-side {
    background: #fbfdff;
    padding: 15px 22px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-right: 1px solid #e6eef8;
}

.ts-hero-shell .ts-side-logo img {
    height: 52px;
    width: auto;
}

/* "the TECH SUITE(TM) PLATFORM" branding in place of the sidebar logo */
.ts-hero-shell .ts-side-brand {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    line-height: 1;
    font-weight: 800;
    font-size: 30px;
    letter-spacing: .5px;
    padding-bottom: 16px;
    align-self: flex-start;
}

.ts-hero-shell .tsb-the {
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
    font-size: 26px;
    color: var(--tsh-navy);
    margin-right: 8px;
    transform: translateY(3px);
}

.ts-hero-shell .tsb-tech {
    color: #101828;
}

.ts-hero-shell .tsb-suite {
    color: var(--tsh-orange);
    margin-left: 7px;
}

.ts-hero-shell .tsb-tm {
    font-size: 12px;
    font-weight: 700;
    color: var(--tsh-orange);
    margin-top: 1px;
    margin-left: 2px;
}

.ts-hero-shell .tsb-platform {
    position: absolute;
    right: 2px;
    bottom: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--tsh-purple);
}

.ts-hero-shell .ts-award {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.ts-hero-shell .ts-award .badge {
    width: 150px;
    flex: 0 0 150px;
}

.ts-hero-shell .ts-award .badge img {
    width: 100%;
    display: block;
}

.ts-hero-shell .ts-award p {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--tsh-navy-soft);
    font-weight: 500;
}

.ts-hero-shell .ts-award b {
    color: var(--tsh-blue);
    font-weight: 700;
}

.ts-hero-shell .ts-feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--tsh-chip);
    border: 1px solid var(--tsh-chip-border);
    border-radius: 14px;
    padding: 10px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ts-hero-shell .ts-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(20, 45, 90, .08);
}

.ts-hero-shell .ts-ic {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--tsh-icon-bg);
    color: var(--tsh-blue);
    display: grid;
    place-items: center;
}

.ts-hero-shell .ts-ic svg {
    width: 24px;
    height: 24px;
}

.ts-hero-shell .ts-feature h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--tsh-blue);
    margin-bottom: 4px;
}

.ts-hero-shell .ts-feature p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--tsh-navy-soft);
    font-weight: 500;
}

.ts-hero-shell .ts-feature p b {
    color: var(--tsh-blue);
}

/* ---------- Hero ---------- */
.ts-hero-shell {
    height: 92vh;
    display: flex;
    flex-direction: column;
}

.ts-hero-shell .ts-hero {
    position: relative;
    /* min-height: 92vh; */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ts-hero-shell .ts-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ts-hero-shell .ts-hero-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .ts-hero-shell .ts-hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            rgba(234, 241, 251, .98) 0%,
            rgba(234, 241, 251, .95) 34%,
            rgba(234, 241, 251, .6) 55%,
            rgba(234, 241, 251, .12) 82%,
            rgba(234, 241, 251, 0) 100%);
} */

/* Reactor markers */

/* Hero copy */
.ts-hero-shell .ts-hero-content {
    position: relative;
    z-index: 3;
    padding: 54px 56px 0 15px;
    max-width: 620px;
}

/* Light wash behind the slide-2 copy (>=768px), same idea as slide 1: an ellipse
   sized to the copy block, so the text reads over the towers while the rest of
   the plant stays clear. (.ts-hero-bg::before never shows here: the plant <img>s
   paint over it.) It sits at z-index -1 inside the copy's own stacking context,
   i.e. above the plant and below the text. closest-side = fully clear at the
   pseudo-element's edges, so there is no hard cut. <=767px has its own wash. */


.ts-hero-shell .ts-eyebrow {
    font-style: italic;
    font-size: clamp(14px, 1.2vw, 17px);
    font-weight: 500;
    color: var(--tsh-navy);
    line-height: 1.5;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--tsh-orange);
}

.ts-hero-shell .ts-hero-content :is(h1, h2:where(.ts-nexgen-title)) {
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
    line-height: 1.06;
    font-weight: 800;
    color: var(--tsh-navy);
    margin: 22px 0 18px;
    letter-spacing: -.5px;
}

.ts-hero-shell .ts-hero-content .lead {
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.55;
    color: #2c3d59;
    max-width: 430px;
    font-weight: 500;
    margin-bottom: 30px;
}

.ts-hero-shell .ts-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--tsh-blue);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    padding: 16px 30px;
    border-radius: 10px;
    box-shadow: 0 12px 26px rgba(23, 52, 126, .28);
    transition: transform .2s ease, box-shadow .2s ease;
}

.ts-hero-shell .ts-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(23, 52, 126, .34);
}

.ts-hero-shell .ts-cta svg {
    width: 20px;
    height: 20px;
}

/* Bottom hero cards */
.ts-hero-shell .ts-cards {
    position: relative;
    z-index: 3;
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 30px 34px;
}

.ts-hero-shell .ts-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px 20px 22px;
    box-shadow: 0 14px 30px rgba(18, 42, 84, .12);
    transition: transform .2s ease, box-shadow .2s ease;
}

.ts-hero-shell .ts-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 38px rgba(18, 42, 84, .18);
}

.ts-hero-shell .ts-card .ts-ic {
    margin-bottom: 16px;
}

.ts-hero-shell .ts-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--tsh-navy);
    line-height: 1.2;
    margin-bottom: 8px;
}

.ts-hero-shell .ts-card span {
    font-size: 14px;
    color: var(--tsh-navy-soft);
}

.ts-hero-shell .ts-card .rule {
    display: block;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background: var(--tsh-blue2);
    margin-top: 12px;
}

/* ---------- Bottom bar ---------- */
.ts-hero-shell .ts-bottombar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 15px;
    background: #dbe8fa;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.ts-hero-shell .ts-bb-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ts-hero-shell .ts-bb-left .ts-ic {
    background: #cbdcf5;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
}

.ts-hero-shell .ts-bb-left p {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tsh-navy);
    letter-spacing: .3px;
    max-width: 900px;
}

.ts-hero-shell .ts-bb-left b {
    color: var(--tsh-orange);
}

/* Lifted off the bottom bar and onto the sky just left of R-101.
   Anchored from the bar's top edge in vh so it tracks the 92vh hero.
   Sits in a light glass chip so the orange reads against sky, cloud
   and the red glow alike. */
.ts-bb-right {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 0;
    padding: 10px 18px 10px 14px;
    border-radius: 12px;
    border-left: 4px solid var(--tsh-orange);
    background: #00000000;
    backdrop-filter: blur(3px);
    box-shadow: 0 10px 26px rgba(10, 25, 45, .28);
    text-shadow: none;
    width: fit-content;
}

.ts-hero-shell .ts-bb-right .ts-ic {
    background: var(--tsh-blue);
    color: #fff;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 50%;
}

.ts-hero-shell .ts-bb-right .here {
    font-family: inherit;
    font-weight: 800;
    font-size: 24px;
    color: var(--tsh-orange);
    line-height: 1.1;
}

.ts-hero-shell .ts-bb-right .exp {
    font-size: 18px;
    font-weight: 800;
    color: var(--tsh-orange);

}

/* ---------- SLIDE 1 — full-bleed dark vision hero (text only) ---------- */
.ts1 {
    position: relative;
    height: 92vh;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    font-family: 'Barlow', system-ui, sans-serif;
    padding-bottom: 20vh;
}

.ts1 * {
    box-sizing: border-box;
}

.ts1-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* >=768px: match slide 2 — the desktop/ re-composition (plant smaller, bottom-right,
   open sky top-left for the copy), cover-fit and anchored bottom, with slide 2's
   sky fill behind it. 768-1279 pushes the reactors right, out from under the copy. */
@media (min-width: 768px) {
    .ts1 {
        background: linear-gradient(90deg, #98b5cb 0%, #92b2cd 20%, #9cb8d0 40%,
                #4c8bc6 60%, #0564b1 80%, #336eb1 100%);
    }

    .ts1-bg {
        object-fit: cover;
        object-position: 78% bottom;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .ts1-bg {
        object-position: 55% bottom;
    }
}

/* Light wash behind the copy only, so the dark navy text stays readable over the
   towers while the rest of the plant stays clear: an ellipse centred on the copy
   block (~600 x 330px) instead of a full-width band. --ts1-col is where
   .container-xxl starts (max-width 1320px, centred), so the ellipse follows the
   copy at every width. <=767px overrides it with a top wash. */
/* .ts1-overlay {
    --ts1-col: max(0px, (100% - 1320px) / 2);
    position: absolute;
    inset: 0;
    background: radial-gradient(440px 260px at calc(var(--ts1-col) + 300px) 46%,
            rgba(234, 241, 251, .92) 0,
            rgba(234, 241, 251, .85) 70%,
            rgba(234, 241, 251, 0) 100%);
} */

/* Uses Bootstrap `.container container-xxl` (same as the header) so the
   text left-edge lines up with the header logo at every breakpoint. */
.ts1-inner {
    position: relative;
    z-index: 2;
    padding-top: 56px;
    padding-bottom: 56px;
    text-align: left;
    color: #0e2545;
}

/* Text color + font sizes matched to Slide 2 (.ts-eyebrow / h1 / .lead) */
.ts1-eyebrow {
    font-style: italic;
    font-size: clamp(14px, 1.2vw, 17px);
    font-weight: 500;
    color: #0e2545;
    line-height: 1.5;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 3px solid #f2751a;
    margin: 0 0 22px;
}

.ts1-title {
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
    font-weight: 800;
    line-height: 1.06;
    color: #0e2545;
    margin: 0 0 18px;
    letter-spacing: -.5px;
}

.ts1-title em {
    color: #f2751a;
    font-style: italic;
    text-decoration: underline;
    text-underline-offset: 6px;
}

.ts1-sub {
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 500;
    line-height: 1.55;
    color: #2c3d59;
    max-width: 620px;
    margin: 0;
}

.index-page .slider-top-content {
    overflow: visible;
    opacity: 1;
    min-height: auto;
    background: none;
}

/* "PROCESS PLANT SIMULATORS PLATFORM": white text with a 2px shadow
   washed out over the pale sky of the plant photo. Navy on a frosted
   pill reads over both the pale and the deep-blue parts of the sky.
   No vertical margin: the bar collapses to a 0fr grid row on scroll. */
.index-page .ts-hero .slider-top-content {
    width: fit-content;
    max-width: calc(100% - 32px);
    margin-inline: auto;
    position: relative;
    top: 8px;
    padding: 6px 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 6px 18px rgba(13, 34, 56, .12);
    color: #0d2238;
    text-shadow: none;
}

/* <=767px the banner sits below the TECH SUITE sidebar and the stepper, so
   the page is always scrolled (body.header-scrolled, main.js) by the time it
   comes into view — and custom.css fades this bar out on that class. It lives
   in the banner, not the header, so keep it shown, and give its grid row real
   height so it pushes the copy down instead of overlapping it. */
@media (max-width: 767px) {

    .index-page .ts-hero .slider-top-content-main,
    .index-page.header-scrolled .ts-hero .slider-top-content-main {
        grid-template-rows: 1fr;
    }

    .index-page .ts-hero .slider-top-content,
    .index-page.header-scrolled .ts-hero .slider-top-content {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ---------- Award badge lightbox ----------
   The sidebar badge opens the full-size artwork in a Bootstrap modal.
   The modal markup sits next to the other kw-modals, NOT inside
   .ts-hero-carousel — that wrapper is `overflow: hidden` + `isolation:
   isolate`, which would clip the dialog. */
.ts-hero-shell .ts-award .badge img {
    cursor: zoom-in;
}

.badge-modal .badge-modal-dialog {
    max-width: 560px;
}

.badge-modal .badge-modal-content {
    position: relative;
    border: none;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(10, 25, 60, .35);
}

.badge-modal .badge-modal-body {
    padding: 30px;
}

.badge-modal .badge-modal-body img {
    display: block;
    width: 100%;
    height: auto;
}

.badge-modal .badge-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    opacity: .6;
}

.badge-modal .badge-modal-close:hover {
    opacity: 1;
}

/* hero "the TECH SUITE" brand opens the platform-map modal */
.ts-side-brand[data-bs-toggle="modal"] {
    cursor: pointer;
}

/* "click the brand -> modal opens" demo loop (3.8s):
   hand glides in, taps the text (text dips + glows, ripple),
   then a mini window card pops from the tap point like the modal opening */
.ts-hero-shell .ts-side-brand[data-bs-toggle="modal"]::before {
    content: "";
    position: absolute;
    inset: -6px -10px -4px -10px;
    border-radius: 10px;
    background: rgba(242, 117, 26, .12);
    box-shadow: 0 0 0 2px rgba(242, 117, 26, .35);
    opacity: 0;
    pointer-events: none;
    animation: tsbGlow 3.8s ease-in-out infinite;
}

/* the whole brand dips when the finger lands ("the" keeps its own translateY) */
.ts-hero-shell .ts-side-brand[data-bs-toggle="modal"] {
    animation: tsbPress 3.8s ease-in-out infinite;
}

/* ripple where the finger lands */

/* mini "window" that pops out of the tap point */

@keyframes tsbPress {

    0%,
    28%,
    40%,
    100% {
        transform: scale(1);
    }

    32% {
        transform: scale(.95);
    }
}

@keyframes tsbGlow {

    0%,
    28% {
        opacity: 0;
    }

    33% {
        opacity: 1;
    }

    80% {
        opacity: .6;
    }

    92%,
    100% {
        opacity: 0;
    }
}

/* on hover the user is already there: hold the "opened" state */
.ts-hero-shell .ts-side-brand[data-bs-toggle="modal"]:hover::before {
    animation-play-state: paused;
    animation-delay: -1.9s;
}

@media (prefers-reduced-motion: reduce) {

    .ts-hero-shell .ts-side-brand[data-bs-toggle="modal"]::before,
    .ts-hero-shell .ts-side-brand[data-bs-toggle="modal"] {
        animation: none;
    }

}

.ts-side-brand[data-bs-toggle="modal"]:focus-visible {
    outline: 2px solid #f2751a;
    outline-offset: 4px;
    border-radius: 6px;
}

/* Tech Suite platform map modal (reuses the .wp-section "What we provide" styles) */
.ts-suite-modal .ts-suite-modal-dialog {
    max-width: 1130px;
}

.ts-suite-modal .ts-suite-modal-content {
    position: relative;
    border: none;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(10, 25, 60, .35);
}

.ts-suite-modal .ts-suite-modal-body {
    padding: 44px 40px 40px;
    border-radius: 18px;
}

.ts-suite-modal .wp-map {
    margin-bottom: 36px;
}

.ts-suite-modal .ts-suite-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    opacity: .6;
}

.ts-suite-modal .ts-suite-modal-close:hover {
    opacity: 1;
}

@media (max-width: 767px) {
    .ts-suite-modal .ts-suite-modal-body {
        padding: 40px 16px 28px;
    }
}

/* ======= Reactor Pillars Section ======= */
/* Light theme, header reuses .cred-header / .cred-eyebrow / .cred-main-title / .cred-subtitle */
.rp-section {
    position: relative;
    padding: 60px 0 72px;
    background:
        radial-gradient(rgba(247, 126, 26, 0.12) 1px, transparent 1.5px) 0 0 / 22px 22px,
        radial-gradient(circle at 0% 0%, rgba(247, 126, 26, 0.12), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(247, 126, 26, 0.1), transparent 45%),
        linear-gradient(180deg, #fff6ee 0%, #fffaf6 100%);
    border-top: 1px solid rgba(247, 126, 26, 0.15);
    border-bottom: 1px solid rgba(247, 126, 26, 0.15);
}

.rp-section .cred-header {
    margin-bottom: 48px;
}

.rp-section .cred-subtitle {
    max-width: 640px;
}

.rp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.rp-card {
    position: relative;
    display: flex;
    min-height: 380px;
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    background: #10243b;
    border: 1px solid rgba(13, 34, 56, 0.12);
    box-shadow: 0 16px 36px rgba(13, 34, 56, 0.18);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.rp-card__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.rp-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.rp-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(8, 20, 36, 0.15) 0%, rgba(8, 20, 36, 0.75) 45%, rgba(8, 20, 36, 0.97) 100%);
    transition: background .35s ease;
}

.rp-card__num {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6);
}

.rp-card__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    padding: 28px 26px 26px;
}

.rp-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 12px;
    font-size: 1.3rem;
    color: #fff;
    background: linear-gradient(135deg, #f88b39, #ff5e3a);
    box-shadow: 0 8px 20px rgba(247, 126, 26, 0.35);
}

.rp-card__title {
    display: block;
    font-size: clamp(1.2rem, 1.6vw, 1.4rem);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.rp-card__text {
    display: block;
    margin-top: 10px;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

.rp-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--color-accent);
}

.rp-card__more i {
    transition: transform .3s ease;
}

.rp-card:hover {
    transform: translateY(-6px);
    border-color: rgba(247, 126, 26, 0.7);
    box-shadow: 0 24px 48px rgba(13, 34, 56, 0.28);
}

.rp-card:hover .rp-card__img {
    transform: scale(1.08);
}

.rp-card:hover::before {
    background: linear-gradient(180deg, rgba(8, 20, 36, 0.05) 0%, rgba(8, 20, 36, 0.7) 45%, rgba(8, 20, 36, 0.97) 100%);
}

.rp-card:hover .rp-card__more i {
    transform: translateX(4px);
}

/* style.css underlines + recolours every a:hover/focus/active */
.rp-card:hover,
.rp-card:focus,
.rp-card:active {
    text-decoration: none;
    color: inherit;
}

.rp-card:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

@media (max-width: 991px) {
    .rp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .rp-section {
        padding: 48px 0 56px;
    }

    .rp-section .cred-header {
        margin-bottom: 36px;
    }

    .rp-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .rp-card {
        min-height: 320px;
    }
}

/* ---------- Slide 2: COC + ROC + TOC co-development panel ----------
   Stands on the right of the plant, clear of the slider arrow (right 40px,
   48px wide), anchored to the BOTTOM just above the bottom bar: hung from the
   top it sat right over R-103's tower and label on wide screens, while the
   lower right of the photo is only pipework. Its double arrows point left, at
   the reactors. On <=767px the slider JS moves it into the drawer (.ts-side);
   see index-responsive.css. */
.ts-hero-shell .ts-codev {
    --cd-coc: #3aa844;
    --cd-roc: #6a3fc0;
    --cd-toc: #e2231a;
    --cd-arrow: #24356f;
    position: absolute;
    z-index: 4;
    bottom: 118px;
    right: 100px;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 14px 16px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .7) 100%);
    box-shadow: 0 12px 30px rgba(10, 25, 45, .18);
    text-align: center;
    color: var(--tsh-navy);
}

.ts-hero-shell .ts-codev .c-coc {
    color: var(--cd-coc);
}

.ts-hero-shell .ts-codev .c-roc {
    color: var(--cd-roc);
}

.ts-hero-shell .ts-codev .c-toc {
    color: var(--cd-toc);
}

.ts-hero-shell .ts-codev-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tsh-navy);
}

.ts-hero-shell .ts-codev-title u {
    white-space: nowrap;
    text-underline-offset: 3px;
}

/* the flow itself is one SVG — a mini process-flow diagram */
.ts-hero-shell .ts-codev-pfd {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: 'Barlow', system-ui, sans-serif;
}

.ts-hero-shell .ts-codev-pfd .node {
    fill: rgba(255, 255, 255, .94);
    stroke-width: 2;
    filter: drop-shadow(0 3px 6px rgba(10, 25, 45, .14));
}

.ts-hero-shell .ts-codev-pfd .node-cat {
    stroke: #35b5a8;
}

.ts-hero-shell .ts-codev-pfd .node-sci {
    stroke: #8b6fd8;
}

.ts-hero-shell .ts-codev-pfd .node-txt {
    font-size: 13px;
    font-weight: 600;
    text-anchor: middle;
}

.ts-hero-shell .ts-codev-pfd .t-cat {
    fill: #16958a;
}

.ts-hero-shell .ts-codev-pfd .t-sci {
    fill: var(--cd-roc);
    font-size: 12px;
}

/* ⇄ between the two parties: they co-develop */
.ts-hero-shell .ts-codev-pfd .swap {
    fill: var(--cd-arrow);
    stroke: var(--cd-toc);
    stroke-width: .8;
}

/* pipes: a pale run with a coloured dash flowing along it */
.ts-hero-shell .ts-codev-pfd .pipe {
    stroke-width: 7;
}

.ts-hero-shell .ts-codev-pfd .pipe-coc {
    stroke: rgba(58, 168, 68, .2);
}

.ts-hero-shell .ts-codev-pfd .pipe-roc {
    stroke: rgba(106, 63, 192, .2);
}

.ts-hero-shell .ts-codev-pfd .pipe-out {
    stroke: rgba(226, 35, 26, .18);
}

.ts-hero-shell .ts-codev-pfd .flow {
    stroke-width: 2.6;
    stroke-dasharray: 6 8;
    animation: ts-codev-flow 1.4s linear infinite;
}

.ts-hero-shell .ts-codev-pfd .flow-coc {
    stroke: var(--cd-coc);
}

.ts-hero-shell .ts-codev-pfd .flow-roc {
    stroke: var(--cd-roc);
}

.ts-hero-shell .ts-codev-pfd .flow-out {
    stroke: var(--cd-toc);
}

@keyframes ts-codev-flow {
    to {
        stroke-dashoffset: -14;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ts-hero-shell .ts-codev-pfd .flow {
        animation: none;
    }
}

.ts-hero-shell .ts-codev-pfd .head {
    fill: var(--cd-toc);
}

.ts-hero-shell .ts-codev-pfd .lbl {
    font-size: 10.5px;
    fill: var(--tsh-navy-soft);
}

.ts-hero-shell .ts-codev-pfd .lbl-key {
    font-size: 13px;
    font-weight: 700;
}

.ts-hero-shell .ts-codev-pfd .c-coc {
    fill: var(--cd-coc);
}

.ts-hero-shell .ts-codev-pfd .c-roc {
    fill: var(--cd-roc);
}

.ts-hero-shell .ts-codev-pfd .lbl-sum {
    font-size: 11.5px;
    font-weight: 700;
    fill: var(--tsh-navy);
}

.ts-hero-shell .ts-codev-pfd .lbl-chain {
    font-size: 11px;
    font-weight: 600;
    fill: var(--cd-toc);
}

.ts-hero-shell .ts-codev-pfd .lbl-feas {
    fill: #1ba3d6;
}

/* the reactor — TOC is what COC + ROC "react" into */
.ts-hero-shell .ts-codev-pfd .vessel {
    fill: url(#tsCodevVessel);
    stroke: var(--cd-toc);
    stroke-width: 2;
    filter: drop-shadow(0 4px 8px rgba(226, 35, 26, .25));
}

.ts-hero-shell .ts-codev-pfd .vessel-band {
    stroke: rgba(14, 37, 69, .18);
    stroke-width: 1;
}

.ts-hero-shell .ts-codev-pfd .vessel-txt {
    font-size: 15px;
    font-weight: 800;
    text-anchor: middle;
    fill: var(--cd-toc);
}

.ts-hero-shell .ts-codev-pfd .out {
    fill: url(#tsCodevOut);
    filter: drop-shadow(0 4px 10px rgba(14, 37, 69, .3));
}

.ts-hero-shell .ts-codev-pfd .out-txt {
    font-size: 14px;
    font-weight: 700;
    text-anchor: middle;
    fill: #fff;
}

.ts-hero-shell .ts-codev-pfd .out-key {
    fill: #ffa64d;
}

.ts-hero-shell .ts-codev-note {
    font-size: 11px;
    line-height: 1.4;
    color: var(--tsh-navy-soft);
}

.ts-hero-shell .ts-codev-note b {
    color: var(--cd-toc);
}

.ts-hero-shell .ts-codev-note span {
    display: block;
    margin-top: 2px;
    font-weight: 600;
    color: #1b7fb8;
}

/* ---------- Slide 2: the co-development story drawn ON the plant ----------
   One SVG over the photo, in the photo's 1920x1080 space (see the markup
   comment). Replaces the separate panel on desktop: the panel element stays
   in the DOM only because the slider JS moves it into the mobile drawer. */
.ts-hero-shell .ts-hero-bg .ts-plant-story {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: initial;
    pointer-events: none;
    font-family: 'Barlow', system-ui, sans-serif;
    --st-coc: #3aa844;
    --st-roc: #6a3fc0;
    --st-toc: #e2231a;
    --st-arrow: #24356f;
}

.ts-plant-story .k-coc {
    fill: var(--st-coc);
}

.ts-plant-story .k-roc {
    fill: var(--st-roc);
}

.ts-plant-story .k-toc {
    fill: var(--st-toc);
}

.ts-plant-story .st-title rect {
    fill: rgba(255, 255, 255, .88);
    filter: drop-shadow(0 6px 14px rgba(10, 25, 45, .22));
}

.ts-plant-story .st-title text {
    font-size: 30px;
    font-weight: 700;
    text-anchor: middle;
    fill: var(--tsh-navy);
}

.ts-plant-story .st-title-u {
    text-decoration: underline;
}

/* tags pinned under each reactor's own label */
.ts-plant-story .st-tag rect {
    fill: rgba(255, 255, 255, .93);
    stroke-width: 3;
    filter: drop-shadow(0 6px 14px rgba(10, 25, 45, .28));
}

.ts-plant-story .t-coc rect {
    stroke: var(--st-coc);
}

.ts-plant-story .t-roc rect {
    stroke: var(--st-roc);
}

.ts-plant-story .t-toc rect {
    stroke: var(--st-toc);
}

.ts-plant-story .st-tag .key {
    font-size: 32px;
    font-weight: 800;
}

.ts-plant-story .st-tag .what {
    font-size: 24px;
    font-weight: 600;
    fill: var(--tsh-navy);
}

.ts-plant-story .st-tag .who {
    font-size: 21px;
    font-weight: 500;
    fill: var(--tsh-navy-soft);
}

/* process lines: a soft glow under a moving dash */
.ts-plant-story .glow {
    stroke-width: 16;
    opacity: .45;
    filter: url(#tsStoryGlow);
}

.ts-plant-story .flow {
    stroke-width: 6;
    stroke-dasharray: 16 14;
    animation: ts-story-flow 1.2s linear infinite;
}

.ts-plant-story .g-coc,
.ts-plant-story .f-coc {
    stroke: var(--st-coc);
}

.ts-plant-story .g-roc,
.ts-plant-story .f-roc {
    stroke: var(--st-roc);
}

.ts-plant-story .g-out,
.ts-plant-story .f-out {
    stroke: var(--st-toc);
}

.ts-plant-story .f-coc,
.ts-plant-story .f-roc,
.ts-plant-story .f-out {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9));
}

@keyframes ts-story-flow {
    to {
        stroke-dashoffset: -30;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ts-plant-story .flow {
        animation: none;
    }
}

.ts-plant-story .st-head {
    fill: var(--st-toc);
}

.ts-plant-story .st-swap {
    fill: var(--st-arrow);
    stroke: var(--st-toc);
    stroke-width: 2;
    filter: drop-shadow(0 3px 6px rgba(10, 25, 45, .3));
}

/* outcome badge */
.ts-plant-story .st-out rect {
    fill: url(#tsStoryOut);
    stroke: rgba(255, 255, 255, .7);
    stroke-width: 2;
    filter: drop-shadow(0 8px 18px rgba(14, 37, 69, .4));
}

.ts-plant-story .st-out text {
    text-anchor: middle;
}

.ts-plant-story .st-out .chain {
    font-size: 21px;
    font-weight: 600;
    fill: #ff9a90;
}

.ts-plant-story .st-out .feas {
    fill: #7fd3ff;
}

.ts-plant-story .st-out .nexgen {
    font-size: 35px;
    font-weight: 800;
    fill: #fff;
}

.ts-plant-story .st-out .ng {
    fill: #ffa64d;
}

/* first-principles footnote, under the "No expertise" chip */
.ts-hero-shell .ts-hero-note {
    margin-top: 14px;
    /* stays clear of the COC tag on R-101 at laptop widths */
    max-width: 380px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--tsh-navy-soft);
}

.ts-hero-shell .ts-hero-note b {
    color: #e2231a;
}

.ts-hero-shell .ts-hero-note span {
    display: block;
    font-weight: 600;
    color: #1b7fb8;
}

/* Desktop: the frames are WIDTH-fit and bottom-anchored instead of `cover`.
   On the squarer hero boxes of 1024-1366 screens `cover` zooms the photo by
   height, which slid the reactors (and their tags) under the hero copy and
   cut TOC / NexGen off the right edge. Width-fit always shows the whole plant
   across the hero; what is left above it is filled with the photo's own top
   sky colours. The overlay SVG sits in the same box. */
@media (min-width: 768px) {
    .ts-hero-carousel .ts-hero-shell .ts-hero-bg {
        background: linear-gradient(90deg, #98b5cb 0%, #92b2cd 20%, #9cb8d0 40%,
                #4c8bc6 60%, #0564b1 80%, #336eb1 100%);
    }

    .ts-hero-carousel .ts-hero-shell .ts-hero-bg img,
    .ts-hero-carousel .ts-hero-shell .ts-hero-bg .ts-plant-story {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        object-fit: fill;
    }

    /* fade the art's top edge into that fill, or it shows as a hard line */
    .ts-hero-carousel .ts-hero-shell .ts-hero-bg img {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
    }
}

/* the footnote has no room beside the plant on small laptops */
@media (min-width: 768px) and (max-width: 1279px) {
    .ts-hero-carousel .ts-hero-shell .ts-hero-content {
        max-width: 420px;
    }

    .ts-hero-shell .ts-hero-note {
        display: none;
    }

    /* the art is only ~380px tall here and the bottom bar would sit on the
       NexGen badge — stand the art on top of the bar instead */
    .ts-hero-carousel .ts-hero-shell .ts-hero-bg img,
    .ts-hero-carousel .ts-hero-shell .ts-hero-bg .ts-plant-story {
        bottom: 84px;
    }

    /* the art is drawn smaller here, so lift the tags a notch about their
       own centres (they stay pinned to their reactors) */
    .ts-plant-story .st-tag,
    .ts-plant-story .st-out,
    .ts-plant-story .st-title {
        transform-box: fill-box;
        transform-origin: center;
        transform: scale(1.2);
    }
}

/* phones/tablets: the story lives in the drawer card instead */
@media (max-width: 767px) {

    .ts-hero-shell .ts-hero-bg .ts-plant-story,
    .ts-hero-shell .ts-hero-note {
        display: none;
    }
}

/* ---------- Slide 2 desktop: co-development stepper ----------
   A numbered timeline stands between the TECH SUITE sidebar and the hero
   copy: 1 Catalyst/ Material Developer, 2 Scientist..., 3 TOC, 4 NexGen.
   The rail runs through the number circles; each step's colour is its key
   (COC green, ROC purple, TOC red, NexGen navy). The plant overlay and the
   hero footnote would repeat the flow, so both stay hidden. */
.ts-hero-shell .ts-steps {
    display: none;
}

@media (min-width: 768px) {
    #tsHero .ts-hero-shell .ts-hero>.ts-codev {
        position: absolute;
        z-index: 3;
        top: 0;
        bottom: 92px;
        left: 0;
        width: 260px;
        margin: 0;
        display: flex;
        /* top/bottom padding = the mask's fade, so no text sits in it */
        padding: 70px 18px 36px 22px;
        border: 0;
        border-radius: 0;
        background: linear-gradient(90deg, rgba(251, 253, 255, .92) 0%, rgba(244, 248, 254, .8) 75%, rgba(244, 248, 254, 0) 100%);
        box-shadow: none;
        /* soft top and bottom edges, so the wash has no hard box line */
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    #tsHero .ts-hero>.ts-codev> :not(.ts-steps) {
        display: none;
    }

    #tsHero .ts-hero>.ts-codev .ts-steps {
        display: flex;
    }

    #tsHero .ts-hero-shell .ts-hero-content {
        padding-left: 290px;
        max-width: 890px;
    }

    #tsHero .ts-hero-shell .ts-hero-bg .ts-plant-story,
    #tsHero .ts-hero-shell .ts-hero-note {
        display: none;
    }
}

.ts-hero-shell .ts-steps {
    --st-num: 30px;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    width: 100%;
    font-family: 'Barlow', system-ui, sans-serif;
    color: var(--tsh-navy);
    text-align: left;
}

.ts-hero-shell .st-head {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--tsh-orange);
}

.ts-hero-shell .st-head b {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
}

.ts-hero-shell .st-head>span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tsh-navy-soft);
}

.ts-hero-shell .ts-steps .c-coc {
    color: #2f9a3b;
}

.ts-hero-shell .ts-steps .c-roc {
    color: #6a3fc0;
}

.ts-hero-shell .ts-steps .c-toc {
    color: #e2231a;
}

.ts-hero-shell .st-list {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* the rail, through the centres of the number circles */
.ts-hero-shell .st-list::before {
    content: "";
    position: absolute;
    left: calc(var(--st-num) / 2 - 1px);
    top: calc(var(--st-num) / 2);
    bottom: calc(var(--st-num) / 2);
    width: 2px;
    background: linear-gradient(180deg, #2f9a3b 0%, #6a3fc0 38%, #e2231a 70%, #17347e 100%);
    opacity: .55;
}

.ts-hero-shell .st-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ts-hero-shell .st-num {
    position: relative;
    flex: 0 0 var(--st-num);
    height: var(--st-num);
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: #fff;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 3px 8px rgba(10, 25, 45, .15);
}

.ts-hero-shell .st-coc {
    color: #2f9a3b;
}

.ts-hero-shell .st-roc {
    color: #6a3fc0;
}

.ts-hero-shell .st-toc {
    color: #e2231a;
}

.ts-hero-shell .st-out {
    color: #17347e;
}

/* the result step is filled: it is where the flow lands */
.ts-hero-shell .st-out .st-num {
    background: #17347e;
    border-color: #17347e;
    color: #fff;
}

.ts-hero-shell .st-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 3px;
}

.ts-hero-shell .st-body b {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.ts-hero-shell .st-toc .st-body b {
    font-size: 18px;
    font-weight: 800;
}

.ts-hero-shell .st-out .st-body b {
    color: var(--tsh-navy);
}

.ts-hero-shell .st-out .ng {
    color: var(--tsh-orange);
}

.ts-hero-shell .st-body small {
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--tsh-navy-soft);
    font-weight: 500;
}

.ts-hero-shell .st-body small .c-coc,
.ts-hero-shell .st-body small .c-roc {
    font-weight: 700;
}

/* steps appear one after another when slide 2 comes in */
@media (min-width: 768px) {
    #tsHero .ts-steps .st-step {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .5s ease, transform .5s ease;
    }

    #tsHero .ts-slide.ts-slide-active .ts-steps .st-step {
        opacity: 1;
        transform: none;
    }

    #tsHero .ts-slide.ts-slide-active .ts-steps .st-step:nth-child(1) {
        transition-delay: .5s;
    }

    #tsHero .ts-slide.ts-slide-active .ts-steps .st-step:nth-child(2) {
        transition-delay: .7s;
    }

    #tsHero .ts-slide.ts-slide-active .ts-steps .st-step:nth-child(3) {
        transition-delay: .9s;
    }

    #tsHero .ts-slide.ts-slide-active .ts-steps .st-step:nth-child(4) {
        transition-delay: 1.1s;
    }
}

@media (prefers-reduced-motion: reduce) {
    #tsHero .ts-steps .st-step {
        transition: none;
    }
}

/* small / short laptops: narrower column, tighter steps */
@media (min-width: 768px) and (max-width: 1279px),
(min-width: 768px) and (max-height: 820px) {
    #tsHero .ts-hero-shell .ts-hero>.ts-codev {
        width: 220px;
        padding: 56px 12px 30px 16px;
    }

    #tsHero .ts-hero-shell .ts-hero-content {
        padding-left: 240px;
    }

    .ts-hero-shell .ts-steps {
        gap: 12px;
        --st-num: 26px;
    }

    .ts-hero-shell .st-list {
        gap: 12px;
    }

    .ts-hero-shell .st-head b {
        font-size: 16px;
    }

    /* 11.5px subtext ("Catalyst of choice") was too small to read on a
       13" laptop at 150% scaling; 13px is the floor for this copy */
    .ts-hero-shell .st-body b {
        font-size: 14.5px;
    }

    .ts-hero-shell .st-toc .st-body b {
        font-size: 17px;
    }

    .ts-hero-shell .st-body small {
        font-size: 13px;
    }

    .ts-hero-shell .st-co {
        font-size: 12px;
    }
}

/* small and short laptops (XPS 13 at 150% = 1280x800, 1024x768): 16px more
   column so "COC · Catalyst of choice" stays on one line at the 13px size
   above and the footnote clears the bottom bar. 236 still clears the
   PLATFORM bar. Tablets (768-991) keep their own narrower column. */
@media (min-width: 992px) and (max-width: 1279px),
(min-width: 992px) and (max-height: 820px) {
    #tsHero .ts-hero-shell .ts-hero>.ts-codev {
        width: 236px;
    }

    #tsHero .ts-hero-shell .ts-hero-content {
        padding-left: 256px;
    }
}

/* short laptop screens: a smaller headline so the copy clears the bar */
@media (min-width: 768px) and (max-height: 820px) {
    #tsHero .ts-hero-shell .ts-hero-content {
        padding-top: 18px;
    }

    #tsHero .ts-hero-shell .ts-hero-content :is(h1, h2:where(.ts-nexgen-title)) {
        font-size: clamp(1.6rem, 1rem + 1.6vw, 2.4rem);
    }
}

/* ---------- Stepper as part of the TECH SUITE sidebar ----------
   Same surface as the sidebar (solid #fbfdff, no wash, no fade), the
   sidebar's own divider moves to the stepper's right edge so the two read
   as one panel, and the steps sit in a card styled like the sidebar's
   .ts-feature cards. */
@media (min-width: 768px) {
    #tsHero .ts-hero-shell .ts-hero>.ts-codev {
        background: #fbfdff;
        border-right: 1px solid #e6eef8;
        box-shadow: 8px 0 18px -14px rgba(10, 25, 45, .35);
        -webkit-mask-image: none;
        mask-image: none;
        padding-top: 22px;
        justify-content: flex-start;
    }

    #tsHero .ts-slide .ts-hero-shell .ts-side {
        border-right: 0;
    }

    #tsHero .ts-hero>.ts-codev .ts-steps {
        justify-content: flex-start;
        gap: 12px;
    }

    #tsHero .ts-hero>.ts-codev .st-head {
        padding-bottom: 8px;
    }

    #tsHero .ts-hero>.ts-codev .st-list {
        padding: 14px 12px;
        border: 1px solid var(--tsh-chip-border);
        border-radius: 14px;
        background: var(--tsh-chip);
    }

    #tsHero .ts-hero>.ts-codev .st-list::before {
        left: calc(12px + var(--st-num) / 2 - 1px);
        top: calc(14px + var(--st-num) / 2);
        bottom: calc(14px + var(--st-num) / 2);
    }
}

@media (min-width: 768px) and (max-width: 1279px),
(min-width: 768px) and (max-height: 820px) {
    #tsHero .ts-hero-shell .ts-hero>.ts-codev {
        padding-top: 16px;
    }

    #tsHero .ts-hero>.ts-codev .st-list {
        padding: 10px 8px;
    }

    #tsHero .ts-hero>.ts-codev .st-list::before {
        left: calc(8px + var(--st-num) / 2 - 1px);
        top: calc(10px + var(--st-num) / 2);
        bottom: calc(10px + var(--st-num) / 2);
    }
}

/* run the stepper panel down to the bar with no sliver of plant between */
@media (min-width: 768px) {
    #tsHero .ts-hero-shell .ts-hero>.ts-codev {
        bottom: 0;
    }

    #tsHero .ts-hero-shell .ts-bottombar {
        z-index: 4;
    }
}

/* fill the panel's height: the step card stretches and spreads its steps
   evenly, and the CRE / PSE footnote closes the column at the foot */
@media (min-width: 768px) {
    #tsHero .ts-hero-shell .ts-hero>.ts-codev {
        padding-bottom: 110px;
    }

    #tsHero .ts-hero>.ts-codev .ts-steps {
        height: 100%;
    }

    #tsHero .ts-hero>.ts-codev .st-list {
        flex: 1 1 auto;
        justify-content: space-around;
        max-height: 560px;
    }

    #tsHero .ts-hero>.ts-codev .st-note {
        display: block;
    }
}

.ts-hero-shell .st-note {
    display: none;
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid var(--tsh-orange);
    border-radius: 0 10px 10px 0;
    background: var(--tsh-chip);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--tsh-navy-soft);
    font-weight: 600;
}

.ts-hero-shell .st-note b {
    color: #e2231a;
}

.ts-hero-shell .st-note span {
    display: block;
    margin-top: 3px;
    font-weight: 600;
    color: #1b7fb8;
}

@media (min-width: 768px) and (max-width: 1279px),
(min-width: 768px) and (max-height: 820px) {
    #tsHero .ts-hero-shell .ts-hero>.ts-codev {
        padding-bottom: 104px;
    }

    .ts-hero-shell .st-note {
        padding: 7px 9px;
        font-size: 12px;
    }
}

/* tall screens: bigger steps instead of wide gaps between them */
@media (min-width: 1280px) and (min-height: 900px) {
    #tsHero .ts-hero>.ts-codev .ts-steps {
        --st-num: 36px;
        gap: 16px;
    }

    #tsHero .ts-hero>.ts-codev .st-head b {
        font-size: 22px;
    }

    #tsHero .ts-hero>.ts-codev .st-body b {
        font-size: 17px;
    }

    #tsHero .ts-hero>.ts-codev .st-toc .st-body b {
        font-size: 21px;
    }

    #tsHero .ts-hero>.ts-codev .st-body small {
        font-size: 13.5px;
    }

    #tsHero .ts-hero>.ts-codev .st-num {
        font-size: 16px;
    }

    #tsHero .ts-hero>.ts-codev .st-list {
        max-height: 520px;
        padding: 18px 14px;
    }

    #tsHero .ts-hero>.ts-codev .st-list::before {
        left: calc(14px + var(--st-num) / 2 - 1px);
        top: calc(18px + var(--st-num) / 2);
        bottom: calc(18px + var(--st-num) / 2);
    }

    #tsHero .ts-hero>.ts-codev .st-note {
        font-size: 12.5px;
    }
}

/* ---------- Slide 2 headline: "NexGen Reactor, Technology and Plant Design" ----------
   From the client's reference: each line sits on its own highlight bar
   (second bar shorter), "NexGen" glows orange, "and" glows violet, the rest
   is bright yellow. The bars are deep navy rather than the reference's pale
   cyan so the yellow stays readable over the sky. */
.ts-hero-shell .ts-hero-content :is(h1, h2).ts-nexgen-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.1;
    color: #ffe24a;
}

.ts-hero-shell .ts-nexgen-title .nx-bar {
    display: inline-block;
    padding: .14em .5em .18em .3em;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(23, 52, 126, .94) 0%, rgba(14, 37, 69, .94) 100%);
    box-shadow: 0 8px 20px rgba(10, 25, 45, .3), inset 0 1px 0 rgba(255, 255, 255, .18);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.ts-hero-shell .ts-nexgen-title .nx-ng {
    color: #ff9a3d;
    text-shadow: 0 0 10px rgba(255, 120, 40, .85), 0 0 22px rgba(255, 60, 120, .5);
}

.ts-hero-shell .ts-nexgen-title .nx-and {
    color: #fff;
    text-shadow: 0 0 10px rgba(190, 111, 255, .95), 0 0 20px rgba(122, 63, 242, .7);
}

/* each bar stays one line: size the title to the copy column, not the hero */
@media (min-width: 768px) {
    #tsHero .ts-hero-shell .ts-hero-content :is(h1, h2).ts-nexgen-title {
        font-size: clamp(26px, 2.25vw, 44px);
    }

    #tsHero .ts-hero-shell .ts-nexgen-title .nx-bar {
        white-space: nowrap;
    }
}

/* ---------- Stepper v2: each step plugs into the TECH SUITE ----------
   Following the client's reference (arrows from the sidebar into each box)
   but drawn differently: every step is its own card, and a "plug" line runs
   from the sidebar edge into it (dot on the sidebar side, a pulse travelling
   in). The rail between the numbers shows only in the gaps between cards,
   so the cards read as one chain. */
@media (min-width: 768px) {

    #tsHero .ts-hero>.ts-codev .st-list,
    #tsHero .ts-hero>.ts-codev .st-list {
        padding: 0;
        border: 0;
        background: none;
        gap: 14px;
    }

    #tsHero .ts-hero>.ts-codev .st-list::before {
        left: calc(12px + var(--st-num) / 2 - 1px);
        top: 20px;
        bottom: 20px;
        width: 2px;
        z-index: 0;
        opacity: .7;
    }

    #tsHero .ts-hero>.ts-codev .st-step {
        z-index: 1;
        align-items: center;
        padding: 10px 10px 10px 10px;
        border: 1.5px solid color-mix(in srgb, currentColor 35%, #e3ebf6);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 4px 12px rgba(10, 25, 45, .07);
    }

    #tsHero .ts-hero>.ts-codev .st-out {
        background: linear-gradient(90deg, #f3f6fc, #fff);
    }

    /* the plug: from the sidebar edge (panel padding-left 22px) into the card */
    #tsHero .ts-hero>.ts-codev .st-step::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        width: 24px;
        height: 10px;
        transform: translateY(-50%);
        background:
            radial-gradient(circle at 5px 50%, var(--tsh-orange) 4px, transparent 4.5px),
            linear-gradient(90deg, var(--tsh-orange), currentColor) 5px 50% / calc(100% - 5px) 2px no-repeat;
    }

    #tsHero .ts-hero>.ts-codev .st-step::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        width: 6px;
        height: 6px;
        margin-top: -3px;
        border-radius: 50%;
        background: var(--tsh-orange);
        box-shadow: 0 0 6px var(--tsh-orange);
        animation: ts-plug 2.4s ease-in-out infinite;
    }

    #tsHero .ts-hero>.ts-codev .st-step:nth-child(2)::after {
        animation-delay: .6s;
    }

    #tsHero .ts-hero>.ts-codev .st-step:nth-child(3)::after {
        animation-delay: 1.2s;
    }

    #tsHero .ts-hero>.ts-codev .st-step:nth-child(4)::after {
        animation-delay: 1.8s;
    }

    /* the sidebar's own edge, where the plugs start */
    #tsHero .ts-slide .ts-hero-shell .ts-side {
        border-right: 0;
        box-shadow: inset -2px 0 0 rgba(242, 117, 26, .35);
    }
}

/* the pulse runs from the sidebar end of the plug to the card's edge */
@keyframes ts-plug {
    0% {
        transform: translateX(-18px);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    75% {
        transform: translateX(-2px);
        opacity: 1;
    }

    100% {
        transform: translateX(-2px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #tsHero .ts-hero>.ts-codev .st-step::after {
        animation: none;
        opacity: 0;
    }
}

@media (min-width: 768px) and (max-width: 1279px),
(min-width: 768px) and (max-height: 820px) {
    #tsHero .ts-hero>.ts-codev .st-list {
        padding: 0;
        gap: 10px;
    }

    #tsHero .ts-hero>.ts-codev .st-step {
        padding: 7px 8px;
    }

    #tsHero .ts-hero>.ts-codev .st-step::before {
        width: 18px;
    }

    #tsHero .ts-hero>.ts-codev .st-list::before {
        left: calc(9.5px + var(--st-num) / 2 - 1px);
    }
}

@media (min-width: 1280px) and (min-height: 900px) {
    #tsHero .ts-hero>.ts-codev .st-list {
        padding: 0;
    }

    #tsHero .ts-hero>.ts-codev .st-list::before {
        left: calc(12px + var(--st-num) / 2 - 1px);
        top: 20px;
        bottom: 20px;
    }

    #tsHero .ts-hero>.ts-codev .st-step {
        padding: 14px 12px 14px 10px;
    }
}

/* ---------- Stepper v3: pair -> merge -> TOC -> NexGen ----------
   1 and 2 work together (co-develop), so they sit in one bracketed pair
   with a ⇅ between them; the bracket closes into a "COC + ROC" merge pill
   that feeds TOC. Applies everywhere the stepper shows (desktop panel and
   the mobile drawer). */
.ts-hero-shell .st-pair {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 16px;
}

/* the bracket on the right of the pair */
.ts-hero-shell .st-pair::after {
    content: "";
    position: absolute;
    top: 22%;
    bottom: 22%;
    right: 2px;
    width: 10px;
    border: 2px solid #8f7fd6;
    border-left: 0;
    border-radius: 0 12px 12px 0;
}

.ts-hero-shell .st-co {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 4px;
    padding: 2px 9px 2px 6px;
    border: 1px solid #dde6f6;
    border-radius: 999px;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tsh-navy);
}

.ts-hero-shell .st-co svg {
    width: 8px;
    height: 13px;
    fill: var(--tsh-orange);
}

.ts-hero-shell .st-merge {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin: -4px 0;
}

.ts-hero-shell .st-merge>span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #dde6f6;
    box-shadow: 0 3px 8px rgba(10, 25, 45, .08);
    font-size: 12.5px;
    font-weight: 800;
}

.ts-hero-shell .st-merge>span::before,
.ts-hero-shell .st-merge>span::after {
    content: "▼";
    font-size: 8px;
    color: var(--tsh-orange);
}

/* the pair's cards keep the step card look; numbers no longer need the rail
   to explain the order, so it only shows between the blocks */
.ts-hero-shell .st-pair .st-step {
    margin: 0;
}

/* animation + plug delays by step, not by position (the list now has
   non-step items in it) */
@media (min-width: 768px) {
    #tsHero .ts-slide.ts-slide-active .ts-steps .st-step.st-coc {
        transition-delay: .5s;
    }

    #tsHero .ts-slide.ts-slide-active .ts-steps .st-step.st-roc {
        transition-delay: .7s;
    }

    #tsHero .ts-slide.ts-slide-active .ts-steps .st-step.st-toc {
        transition-delay: .9s;
    }

    #tsHero .ts-slide.ts-slide-active .ts-steps .st-step.st-out {
        transition-delay: 1.1s;
    }

    #tsHero .ts-hero>.ts-codev .st-step.st-coc::after {
        animation-delay: 0s;
    }

    #tsHero .ts-hero>.ts-codev .st-step.st-roc::after {
        animation-delay: .6s;
    }

    #tsHero .ts-hero>.ts-codev .st-step.st-toc::after {
        animation-delay: 1.2s;
    }

    #tsHero .ts-hero>.ts-codev .st-step.st-out::after {
        animation-delay: 1.8s;
    }

    #tsHero .ts-hero>.ts-codev .st-list {
        justify-content: space-between;
    }

    #tsHero .ts-hero>.ts-codev .st-step {
        cursor: default;
        transition: opacity .5s ease, transform .5s ease, box-shadow .3s ease, border-color .3s ease;
    }

    #tsHero .ts-hero>.ts-codev .st-step:hover,
    #tsHero .ts-hero>.ts-codev .st-step:focus-visible {
        outline: none;
        border-color: currentColor;
        box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent), 0 6px 16px rgba(10, 25, 45, .12);
    }
}

/* ---------- 2. Power On: steps light up with the reactors ---------- */
.ts-hero-shell .st-step .st-num {
    transition: background .4s ease, color .4s ease, box-shadow .4s ease;
}

.ts-hero-shell .st-step.st-lit .st-num {
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent), 0 0 14px currentColor;
}

/* the number text turns white on the filled circle */
.ts-hero-shell .st-step.st-lit .st-num {
    color: inherit;
}

.ts-hero-shell .st-step.st-lit .st-num {
    -webkit-text-fill-color: #fff;
}

.ts-hero-shell .st-step.st-lit {
    border-color: currentColor !important;
}

/* the list keeps its natural height (the pair + merge made it taller than
   the old stretch-to-fill allowed, and it ran into the footnote) */
@media (min-width: 768px) {
    #tsHero .ts-hero>.ts-codev .st-list {
        flex: 0 0 auto;
        max-height: none;
    }
}

@media (min-width: 1280px) and (min-height: 900px) {
    #tsHero .ts-hero>.ts-codev .st-body b {
        font-size: 16px;
    }

    #tsHero .ts-hero>.ts-codev .st-body small {
        font-size: 13px;
    }

    #tsHero .ts-hero>.ts-codev .st-step {
        padding: 12px 10px 12px 10px;
    }
}

/* phones/tablets: the slider JS moves the stepper out of the hero (it would
   sit on the plant); it shows between the TECH SUITE sidebar and the banner. Here it
   is an ordinary full-width section in the stacked column: steps in the same
   chip card as desktop, a plug from the left edge into each card. */
@media (max-width: 767px) {
    #tsHero .ts-hero-shell .ts-body>.ts-codev {
        order: 2;
        position: static;
        width: auto;
        margin: 0;
        padding: 22px 18px 24px 30px;
        border: 0;
        border-top: 1px solid #e6eef8;
        border-bottom: 1px solid #e6eef8;
        border-left: 3px solid rgba(242, 117, 26, .35);
        border-radius: 0;
        background: #fbfdff;
        box-shadow: none;
        display: block;
        text-align: left;
    }

    #tsHero .ts-body>.ts-codev> :not(.ts-steps) {
        display: none;
    }

    #tsHero .ts-body>.ts-codev .ts-steps {
        display: flex;
        gap: 14px;
        max-width: 560px;
    }

    #tsHero .ts-body>.ts-codev .st-list {
        gap: 14px;
        padding: 14px 12px;
        border: 1px solid var(--tsh-chip-border);
        border-radius: 14px;
        background: var(--tsh-chip);
    }

    #tsHero .ts-body>.ts-codev .st-list::before {
        left: calc(12px + var(--st-num) / 2 - 1px);
        top: calc(14px + var(--st-num) / 2);
        bottom: calc(14px + var(--st-num) / 2);
    }

    #tsHero .ts-body>.ts-codev .st-step {
        z-index: 1;
        align-items: center;
        padding: 10px;
        border: 1.5px solid color-mix(in srgb, currentColor 35%, #e3ebf6);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 4px 12px rgba(10, 25, 45, .07);
    }

    #tsHero .ts-body>.ts-codev .st-out {
        background: linear-gradient(90deg, #f3f6fc, #fff);
    }

    /* the plug: from the section's orange left edge into each card */
    #tsHero .ts-body>.ts-codev .st-step::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        width: 34px;
        height: 10px;
        transform: translateY(-50%);
        background:
            radial-gradient(circle at 5px 50%, var(--tsh-orange) 4px, transparent 4.5px),
            linear-gradient(90deg, var(--tsh-orange), currentColor) 5px 50% / calc(100% - 5px) 2px no-repeat;
    }

    #tsHero .ts-body>.ts-codev .st-pair .st-step::before {
        width: 46px;
    }

    #tsHero .ts-body>.ts-codev .st-note {
        display: block;
    }
}

/* title bars removed: the words sit straight on the sky. Yellow on pale sky
   needs a dark halo to stay readable, so every word gets a navy outline +
   soft shadow; NexGen and "and" keep their glows on top of it. */
.ts-hero-shell .ts-nexgen-title .nx-bar {
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.ts-hero-shell .ts-hero-content :is(h1, h2).ts-nexgen-title {
    gap: 2px;
    text-shadow: -1px -1px 0 #0e2545, 1px -1px 0 #0e2545, -1px 1px 0 #0e2545, 1px 1px 0 #0e2545,
        0 3px 10px rgba(14, 37, 69, .55);
}

.ts-hero-shell .ts-nexgen-title .nx-ng {
    text-shadow: -1px -1px 0 #0e2545, 1px -1px 0 #0e2545, -1px 1px 0 #0e2545, 1px 1px 0 #0e2545,
        0 0 12px rgba(255, 120, 40, .9), 0 0 22px rgba(255, 60, 120, .5);
}

.ts-hero-shell .ts-nexgen-title .nx-and {
    text-shadow: -1px -1px 0 #0e2545, 1px -1px 0 #0e2545, -1px 1px 0 #0e2545, 1px 1px 0 #0e2545,
        0 0 12px rgba(190, 111, 255, .95), 0 0 20px rgba(122, 63, 242, .7);
}

/* title colours matched to the rest of the hero: navy like the eyebrow and
   lead, "NexGen" in the site orange, "and" in the TECH SUITE platform
   purple. No outline or glow needed on navy. */
.ts-hero-shell .ts-hero-content :is(h1, h2).ts-nexgen-title {
    color: var(--tsh-navy);
    text-shadow: none;
}

.ts-hero-shell .ts-nexgen-title .nx-ng {
    color: var(--tsh-orange);
    text-shadow: none;
}

.ts-hero-shell .ts-nexgen-title .nx-and {
    color: var(--tsh-purple);
    text-shadow: none;
}

/* ======= WHAT WE PROVIDE (below client logos) ======= */
.wp-section {
    padding: 60px 0 70px;
    background: #fff;
    font-family: 'Barlow', system-ui, sans-serif;
    color: #0e2545;
}

.wp-section>.container {
    max-width: 1130px;
}

.wp-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 36px;
}

.wp-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #40506b;
    padding-bottom: 6px;
    border-bottom: 2px solid #f9c79f;
}

.wp-section .wp-title {
    margin: 14px 0 12px;
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 800;
    line-height: 1.1;
    color: #0e1a3d;
}

.wp-title span {
    color: #f2751a;
}

.wp-section .wp-lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #40506b;
}

.wp-map {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto 50px;
    padding-top: 24px;
}

/* left hub card */
.wp-hub {
    flex: 0 0 330px;
    height: 430px;
    padding: 40px 22px 16px;
    border-radius: 18px;
    border: 1.5px solid #f2751a;
    background: linear-gradient(180deg, #1c2456 0%, #141a40 100%);
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 14px 30px rgba(20, 26, 64, .18);
}

/* centre the brand block in the space above the footer */
.wp-hub-icon {
    margin-top: auto;
}

.wp-hub-icon svg {
    width: 56px;
    height: 56px;
    display: block;
}

.wp-hub-brand {
    margin-top: 14px;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
}

.wp-hub-brand em {
    font-style: italic;
    font-weight: 500;
    font-size: 26px;
}

.wp-hub-brand span {
    color: #f2751a;
}

.wp-hub-platform {
    margin-top: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: #b48cff;
}

.wp-section .wp-hub-text {
    margin: 22px 0 22px;
    font-size: 16px;
    line-height: 1.5;
    color: #e3e7f5;
}

.wp-hub-foot {
    margin-top: auto;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wp-hub-built {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #f2751a;
}

.wp-hub-cre {
    font-size: 15px;
    font-weight: 800;
    color: #ff7a7a;
}

.wp-hub-cre i {
    font-style: normal;
    color: #fff;
}

.wp-hub-cre b {
    color: #b48cff;
}

.wp-hub-note {
    font-size: 12px;
    color: #cfd5ea;
}

/* connectors */
.wp-links {
    flex: 0 0 120px;
    height: 430px;
}

.wp-links svg {
    width: 120px;
    height: 430px;
    display: block;
    overflow: visible;
}

/* right list */
.wp-list {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* 4 x 85 + 3 x 30 = 430 = the hub / connector height; the connector ends
       in index.html (y 42.5, 157.5, 272.5, 387.5) are these card centres */
    gap: 30px;
    position: relative;
}

.wp-provides {
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #40506b;
}

.wp-item {
    --wp-c: #2e9e4f;
    --wp-bg: #e9f6ed;
    height: 85px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--wp-c) 25%, #fff);
    border-left: 4px solid var(--wp-c);
    border-radius: 8px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.wp-item:hover {
    transform: translateX(3px);
    box-shadow: 0 8px 20px rgba(14, 37, 69, .08);
}

.wp-purple {
    --wp-c: #7a3ff2;
    --wp-bg: #f1ebfe;
}

.wp-red {
    --wp-c: #e5484d;
    --wp-bg: #fdeced;
}

.wp-navy {
    --wp-c: #141a40;
    --wp-bg: #141a40;
}

/* flow arrow between the cards, pointing UP (each card feeds the one above),
   drawn like the hub connectors: a flowing dashed stem + a solid triangle
   head, in the colour of the card it starts from, centred in the 30px gap */
.wp-item+.wp-item {
    position: relative;
}

.wp-item+.wp-item::before,
.wp-item+.wp-item::after {
    content: "";
    position: absolute;
    left: 50%;
    z-index: 2;
    pointer-events: none;
}

.wp-item+.wp-item::before {
    top: -18px;
    width: 2px;
    height: 14px;
    margin-left: -1px;
    background: repeating-linear-gradient(to bottom, var(--wp-c) 0 4px, transparent 4px 8px);
    animation: wpDrop .8s linear infinite;
}

.wp-item+.wp-item::after {
    top: -26px;
    margin-left: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 9px solid var(--wp-c);
}

@keyframes wpDrop {
    to {
        background-position: 0 -8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wp-item+.wp-item::before {
        animation: none;
    }
}

.wp-ico {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wp-bg);
    color: var(--wp-c);
    display: grid;
    place-items: center;
}

.wp-ico svg {
    width: 22px;
    height: 22px;
}

.wp-navy .wp-ico {
    color: #fff;
}

.wp-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--wp-bg);
    color: var(--wp-c);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.wp-navy .wp-tag {
    background: #e8ebf3;
    color: #141a40;
}

.wp-section .wp-item h3 {
    margin: 4px 0 0;
    font-size: 17px;
    font-weight: 700;
    color: #0e1a3d;
    line-height: 1.2;
}

.wp-ng {
    color: #f2751a;
}

/* nothing follows the map now (the CTA button was removed) */
.wp-map:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .wp-section {
        padding: 44px 0 50px;
    }

    .wp-map {
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
        margin-bottom: 36px;
    }

    .wp-hub {
        flex: none;
        height: auto;
        min-height: 0;
        max-width: 340px;
        width: 100%;
        margin: 0 auto;
        padding: 30px 20px 16px;
    }

    .wp-hub-text {
        margin: 18px 0 18px;
    }

    .wp-links {
        display: none;
    }

    .wp-map {
        padding-top: 0;
    }

    .wp-list {
        padding-top: 22px;
    }

    .wp-provides {
        top: 0;
    }

    .wp-item {
        height: auto;
        min-height: 78px;
        padding: 12px 14px;
    }

    .wp-tag {
        white-space: normal;
    }
}

/* connector animation: dashes flow hub -> cards, hub dot pulses */
.wp-flow path {
    animation: wpFlow .8s linear infinite;
}

.wp-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: wpPulse 1.6s ease-out infinite;
}

@keyframes wpFlow {
    to {
        stroke-dashoffset: -8;
    }
}

@keyframes wpPulse {
    0% {
        transform: scale(1);
        opacity: .6;
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .wp-flow path,
    .wp-pulse {
        animation: none;
    }
}

/* =============================================================
   homepage hero - slide 2 redesign from the client mockup:
   blue copy panel in the sidebar, co-development flow column
   between the sidebar and the banner, boxed eyebrow + lead.
   Loaded after index.css / index-responsive.css.
   ============================================================= */

/* ---------- grid: sidebar | flow | banner (>=992px) ---------- */
/* the flow column starts closed (0 wide); "the TECH SUITE" brand opens it
   and it slides in from the left (.v2-flow-open on #tsHero, set by the
   slider script) */
@media (min-width: 992px) {
    :root .ts-hero-carousel .ts-hero-shell .ts-body {
        grid-template-columns: var(--v2-side-w, var(--v2-side, 315px)) var(--v2-flow-w, 0px) minmax(0, 1fr);
        transition: grid-template-columns .6s cubic-bezier(.22, 1, .36, 1);
    }

    :root #tsHero.v2-flow-open .ts-hero-shell .ts-body {
        --v2-flow-w: var(--v2-flow, 230px);
    }

    /* slide 2 opens with the banner alone (.v2-side-closed, set by the slider
       script); the sidebar then slides in from the left. It keeps its full
       width while its track is 0, so nothing inside reflows - it just moves. */
    :root #tsHero.v2-side-closed .ts-hero-shell .ts-body {
        --v2-side-w: 0px;
    }

    :root .ts-hero-carousel .ts-hero-shell .ts-side {
        width: var(--v2-side, 315px);
        transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
    }

    :root #tsHero.v2-side-closed .ts-hero-shell .ts-side {
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
    }

    :root body.index-page .ts-hero-shell .ts-side-brand[role="button"] {
        cursor: pointer;
    }

    :root body.index-page .ts-hero-shell .ts-side-brand[role="button"]:focus-visible {
        outline: 2px solid #f2751a;
        outline-offset: 4px;
        border-radius: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root .ts-hero-carousel .ts-hero-shell .ts-body {
        transition: none;
    }
}

/* laptops: a wider sidebar and a slimmer flow column, so the panel copy
   fits the short viewport at 13px without scrolling */
@media (min-width: 1201px) and (max-width: 1599px) {
    :root .ts-hero-carousel .ts-hero-shell .ts-body {
        --v2-side: 315px;
        --v2-flow: 220px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    :root .ts-hero-carousel .ts-hero-shell .ts-body {
        --v2-side: 315px;
        --v2-flow: 170px;
    }
}

@media screen and (min-width: 1920px) and (min-height: 1200px) {
    :root .ts-hero-carousel .ts-hero-shell .ts-body {
        --v2-side: 380px;
        --v2-flow: 260px;
    }
}

/* the slide keeps its height; a long panel scrolls inside the sidebar */
@media (min-width: 992px) {
    :root .ts-hero-carousel .ts-hero-shell .ts-body {
        min-height: 0;
        grid-template-rows: minmax(0, 1fr);
    }

    :root body.index-page .ts-hero-carousel .ts-hero-shell .ts-side {
        min-height: 0;
        overflow: hidden;
        /* panel runs edge to edge and down to the bottom */
        padding-left: 0px;
        padding-right: 0px;
        bottom: 0;
        padding-bottom: 0;
    }

    /* the brand row keeps a gap from both edges (the panel stays edge to edge) */
    :root body.index-page .ts-hero-carousel .ts-hero-shell .ts-side-top {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ---------- sidebar: one blue panel ---------- */
:root body.index-page .ts-hero-shell .ts-side {
    background: #fff;
    gap: 10px;
}

/* 13px on a short laptop viewport, growing to 15px where the sidebar is
   tall, so the panel copy fills it instead of leaving an empty blue block */
:root .ts-hero-shell .ts-side {
    --v2-fs: clamp(13px, calc(1.7vh + 1.5px), 15.5px);
}

:root .ts-hero-shell .v2-panel {
    /* whatever height is left over is shared out between the blocks */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.3px) 0 0 / 14px 14px,
        radial-gradient(120% 45% at 0 0, rgba(255, 255, 255, .14) 0, transparent 60%),
        linear-gradient(180deg, #2a68ad 0%, #1d4f8c 50%, #133a6c 100%);
    border: 1px solid #2b5c98;
    border-radius: 0;
    /* centred shadow: an offset one ate into the right-hand gap */
    box-shadow: 0 -2px 14px rgba(10, 30, 60, .22);
    padding: 12px 12px 12px;
    gap: 10px;
    color: #fff;
    /* Segoe UI is hinted for Windows screens and stays sharp at small sizes
       (Barlow bold at 13px smears white-on-blue on a 150% scaled laptop) */
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--v2-fs);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* the slide-in leaves translateX(0) on the sidebar, which keeps it on its own
   compositor layer and softens the text; drop the transform once it is in */
:root .ts-hero-carousel .ts-slide.ts-slide-active .ts-side {
    transform: none;
}

:root body.index-page .ts-hero-shell .v2-panel p {
    margin: 0 0 7px;
    color: #fff;
    font-family: inherit;
    /* font-size: var(--v2-fs); */
    font-weight: 500;
    line-height: 1.35;
    font-size: 13px;
}

:root .ts-hero-shell .v2-panel :is(a, :root b, :root span, :root em) {
    font-family: inherit;
}

:root .ts-hero-shell .v2-panel a {
    text-decoration: none;
    cursor: pointer;
}

:root .ts-hero-shell .v2-panel a:hover {
    text-decoration: underline;
}

:root .ts-hero-shell .v2-award {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 4px;
}

:root .ts-hero-shell .v2-award .badge {
    flex: 0 0 112px;
    width: 112px;
    padding: 5px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(5, 18, 40, .35);
}

:root .ts-hero-shell .v2-award .badge img {
    width: 100%;
    display: block;
    cursor: pointer;
}

:root body.index-page .ts-hero-shell .v2-award p {
    margin: 0;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

/* the three points: one card each, gold icon on the left; the list takes
   the panel's spare height and spreads the cards over it */
:root .ts-hero-shell .v2-feats {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

:root .ts-hero-shell .v2-feat {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 9px 10px 9px 9px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
}

:root .ts-hero-shell .v2-feat-ic {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 211, 77, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 211, 77, .45);
    color: #ffd34d;
    font-size: 14px;
}

:root body.index-page .ts-hero-shell .v2-feat p {
    margin: 0;
}

/* closing line */
:root body.index-page .ts-hero-shell .v2-panel .v2-shift {
    margin: 0;
    padding: 8px 12px;
    text-align: center;
    font-weight: 700;
    background: linear-gradient(90deg, rgba(242, 117, 26, .28), rgba(242, 117, 26, .1));
    border: 1px solid rgba(242, 117, 26, .55);
    border-radius: 10px;
}

:root .ts-hero-shell .v2-shift .bi {
    color: #ffb27a;
    margin-right: 4px;
}

:root .ts-hero-shell .v2-yel {
    color: #ffe94d !important;
}

:root .ts-hero-shell .v2-pink {
    color: #f08cff !important;
}

:root .ts-hero-shell .v2-red {
    color: #ff4b4b;
    font-size: 1.15em;
}

/* short laptop viewports (e.g. 1920x1200 at 150% = ~1280x620 inside the
   browser): same 13px text, tighter leading, so the panel still fits */
@media (min-width: 992px) and (max-height: 700px) {
    :root body.index-page .ts-hero-carousel .ts-hero-shell .ts-side {
        padding-top: 10px;
        padding-bottom: 0;
        gap: 6px;
    }

    :root .ts-hero-shell .v2-panel,
    :root body.index-page .ts-hero-shell .v2-panel p {
        line-height: 1.25;
    }

    :root body.index-page .ts-hero-shell .v2-panel p {
        margin-bottom: 4px;
    }

    :root .ts-hero-shell .v2-panel {
        gap: 7px;
        padding: 10px 10px;
        padding-bottom: 20px;
    }

    :root .ts-hero-shell .v2-feats {
        gap: 6px;
    }

    /* no icon column here: the copy gets the full card width (fewer lines) */
    :root .ts-hero-shell .v2-feat {
        display: block;
        padding: 6px 9px;
    }

    :root .ts-hero-shell .v2-feat-ic {
        display: none;
    }

    :root .ts-hero-shell .v2-award .badge {
        flex-basis: 84px;
        width: 84px;
        padding: 4px;
    }

    :root body.index-page .ts-hero-shell .v2-panel .v2-shift {
        padding: 5px 10px;
    }
}

/* ---------- co-development flow column ----------
   Two party cards feed the Tech Suite core through flowing pipes; a gold
   "co-develop" line links the two parties; chevrons stream from each card
   into the banner. */
/* the outer box is the grid track (0 wide while closed) and clips; the inner
   box always keeps the open width, so nothing reflows while it slides */
:root .ts-hero-shell .v2-flow {
    position: relative;
    z-index: 2;
    min-width: 0;
    overflow: hidden;
    background:
        radial-gradient(circle, rgba(15, 29, 61, .09) 1px, transparent 1.3px) 0 0 / 14px 14px,
        linear-gradient(180deg, #f7faff 0%, #eef4fc 100%);
    border-left: 1px solid #e3ebf6;
}

:root .ts-hero-shell .v2-flow-in {
    --v2-orange: #f2751a;
    --v2-navy: #0f1d3d;
    --v2-gold: #e2a51d;
    width: var(--v2-flow, 230px);
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    grid-template-rows: auto 26px minmax(160px, 180px) 26px auto auto;
    align-content: center;
    padding: 0 38px 0 12px;
    /* closed: shifted left and faded; hidden once the column has shut */
    opacity: 0;
    transform: translateX(-40px);
    visibility: hidden;
    transition: opacity .35s ease, transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .6s;
}

:root #tsHero.v2-flow-open .v2-flow-in {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity .5s ease .1s, transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {

    :root .ts-hero-shell .v2-flow-in,
    :root #tsHero.v2-flow-open .v2-flow-in {
        transition: none;
    }
}

/* party cards */
:root .ts-hero-shell .v2-node {
    --v2-accent: #16a4e6;
    --v2-accent-2: #0b7fc4;
    grid-column: 1 / 3;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px 10px;
    background: #fff;
    border: 1px solid #dbe5f3;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(15, 29, 61, .1);
    text-align: center;
}

:root .ts-hero-shell .v2-node::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, var(--v2-accent), var(--v2-accent-2));
}

:root .ts-hero-shell .v2-node-cat {
    grid-row: 1;
}

:root .ts-hero-shell .v2-node-eng {
    grid-row: 5;
    --v2-accent: #2563eb;
    --v2-accent-2: #1e3a8a;
}

:root .ts-hero-shell .v2-node-ic {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--v2-accent), var(--v2-accent-2));
    color: #fff;
    font-size: 17px;
    box-shadow: 0 4px 10px rgba(15, 29, 61, .18);
}

:root .ts-hero-shell .v2-node-t {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--v2-navy);
}

/* chevrons streaming from the card into the banner */
:root .ts-hero-shell .v2-tap {
    position: absolute;
    top: 50%;
    right: -34px;
    width: 30px;
    height: 14px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M2 2l5 5-5 5' fill='none' stroke='%23f2751a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 50% / 10px 14px repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 70%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 70%, transparent 100%);
    animation: v2-stream 1.1s linear infinite;
}

/* pipes between the cards and the core: dashes flowing in */
:root .ts-hero-shell .v2-pipe {
    grid-column: 1;
    justify-self: center;
    position: relative;
    width: 4px;
    margin: 9px 0;
    border-radius: 4px;
    background:
        repeating-linear-gradient(180deg, var(--v2-orange) 0 6px, transparent 6px 12px) 0 0 / 100% 24px,
        #dfe8f5;
    animation: v2-flow-down .9s linear infinite;
}

:root .ts-hero-shell .v2-pipe-1 {
    grid-row: 2;
}

:root .ts-hero-shell .v2-pipe-2 {
    grid-row: 4;
    animation-name: v2-flow-up;
}

:root .ts-hero-shell .v2-pipe::before,
:root .ts-hero-shell .v2-pipe::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 12px;
    height: 8px;
    transform: translateX(-50%);
    background: var(--v2-orange);
}

:root .ts-hero-shell .v2-pipe::before {
    top: -8px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

:root .ts-hero-shell .v2-pipe::after {
    bottom: -8px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* the Tech Suite core */
:root .ts-hero-shell .v2-suite {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    width: 64px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 9px 0 10px;
    border-radius: 16px;
    border: 2px solid var(--v2-orange);
    background:
        radial-gradient(120% 60% at 50% 0, rgba(242, 117, 26, .28) 0, transparent 60%),
        linear-gradient(180deg, #1c2e63 0%, #0b1533 100%);
    color: #fff;
    animation: v2-core 2.6s ease-in-out infinite;
}

:root .ts-hero-shell .v2-suite-ic {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(242, 117, 26, .16);
    box-shadow: inset 0 0 0 1.5px rgba(242, 117, 26, .7);
    color: var(--v2-orange);
    font-size: 17px;
    line-height: 1;
}

:root .ts-hero-shell .v2-suite-txt {
    writing-mode: vertical-rl;
    white-space: nowrap;
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: 1.2px;
    line-height: 1;
}

:root .ts-hero-shell .v2-suite-txt i {
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0;
    margin-bottom: 3px;
    color: #ffb27a;
}

/* gold "co-develop" line linking the two parties */
:root .ts-hero-shell .v2-link {
    grid-column: 2;
    grid-row: 2 / 5;
    justify-self: center;
    position: relative;
    width: 3px;
    margin: 4px 0;
    background:
        repeating-linear-gradient(180deg, var(--v2-gold) 0 5px, transparent 5px 10px) 0 0 / 100% 20px;
    animation: v2-flow-down 1.4s linear infinite;
}

:root .ts-hero-shell .v2-link::before,
:root .ts-hero-shell .v2-link::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 11px;
    height: 8px;
    transform: translateX(-50%);
    background: var(--v2-gold);
}

:root .ts-hero-shell .v2-link::before {
    top: -6px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

:root .ts-hero-shell .v2-link::after {
    bottom: -6px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

:root .ts-hero-shell .v2-link b {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    writing-mode: vertical-rl;
    white-space: nowrap;
    padding: 6px 2px;
    background: #fff8e6;
    border: 1px solid #f2d48a;
    border-radius: 8px;
    color: #9a6a06;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* foundation card under the flow: first principles, CRE + PSE.
   Dark like the Tech Suite core, with white text, so it reads at a glance
   (the cream version with 9.5px grey text was too faint). */
:root .ts-hero-shell .v2-found {
    grid-column: 1 / 3;
    grid-row: 6;
    margin-top: 12px;
    /* the column keeps 38px on the right for the chevrons; this card has
       none, so it runs into that space: 13px gap on both sides */
    margin-right: -25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 11px 8px 10px;
    text-align: center;
    background:
        radial-gradient(120% 50% at 50% 0, rgba(226, 165, 29, .22) 0, transparent 65%),
        linear-gradient(180deg, #1c2e63 0%, #0b1533 100%);
    border: 1.5px solid #e2a51d;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(11, 21, 51, .25);
    color: #fff;
}

:root .ts-hero-shell .v2-found-ic {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    margin-bottom: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5c04a, #c98a0c);
    color: #fff;
    font-size: 16px;
}

:root .ts-hero-shell .v2-found-k {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .6px;
    line-height: 1.25;
    text-transform: uppercase;
    color: #ffc857;
}

:root .ts-hero-shell .v2-found-int {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}

:root .ts-hero-shell .v2-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
    cursor: help;
    color: #fff;
}

:root .ts-hero-shell .v2-chip-cre {
    background: #f2751a;
}

:root .ts-hero-shell .v2-chip-pse {
    background: #7c3aed;
}

:root .ts-hero-shell .v2-found-ded {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
    color: #d5e0f3;
}

:root .ts-hero-shell .v2-found-who {
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}

:root .ts-hero-shell .v2-found-key {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, .25);
    font-size: 11px;
    line-height: 1.45;
    color: #d5e0f3;
}

:root .ts-hero-shell .v2-found-key .k-cre {
    color: #ff9a4d;
}

:root .ts-hero-shell .v2-found-key .k-pse {
    color: #c9a8ff;
}

/* short laptop viewports: the flow plus the foundation card must fit the
   ~540px column, so the cards, pipes and core tighten up */
@media (min-width: 992px) and (max-height: 760px) {
    :root .ts-hero-shell .v2-flow-in {
        grid-template-rows: auto 22px minmax(140px, 150px) 22px auto auto;
    }

    :root .ts-hero-shell .v2-node {
        gap: 4px;
        padding: 9px 4px 7px;
    }

    :root .ts-hero-shell .v2-node-ic {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    :root .ts-hero-shell .v2-node-t {
        font-size: 11.5px;
    }

    :root .ts-hero-shell .v2-pipe {
        margin: 7px 0;
    }

    :root .ts-hero-shell .v2-suite {
        gap: 6px;
        padding: 7px 0 8px;
    }

    :root .ts-hero-shell .v2-suite-ic {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }

    :root .ts-hero-shell .v2-suite-txt {
        font-size: 12.5px;
        letter-spacing: 1px;
    }

    :root .ts-hero-shell .v2-found {
        margin-top: 10px;
        padding: 7px 4px 6px;
    }

    :root .ts-hero-shell .v2-found-ic {
        display: none;
    }

    :root .ts-hero-shell .v2-found-ded {
        margin-top: 3px;
    }

    /* the CRE / PSE chips carry the full names as tooltips */
    :root .ts-hero-shell .v2-found-key,
    :root .ts-hero-shell .v2-suite-ic {
        display: none;
    }
}

@keyframes v2-stream {
    to {
        background-position: 10px 50%;
    }
}

@keyframes v2-flow-down {
    to {
        background-position: 0 24px, 0 0;
    }
}

@keyframes v2-flow-up {
    to {
        background-position: 0 -24px, 0 0;
    }
}

@keyframes v2-core {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(242, 117, 26, .35), 0 10px 22px rgba(11, 21, 51, .3);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(242, 117, 26, 0), 0 10px 22px rgba(11, 21, 51, .3);
    }
}

@media (prefers-reduced-motion: reduce) {

    :root .ts-hero-shell .v2-tap,
    :root .ts-hero-shell .v2-pipe,
    :root .ts-hero-shell .v2-link,
    :root .ts-hero-shell .v2-suite {
        animation: none;
    }
}

/* ---------- banner copy ---------- */
/* Frosted panels behind the copy on both slides: a light tint plus a
   backdrop blur, so the plant/sky behind reads as soft colour, not detail. */
:root .ts-hero-shell .ts-hero-content .ts-eyebrow,
:root .ts1 .ts1-eyebrow {
    background: rgba(238, 243, 250, .45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 8px 8px 0 0;
}

:root .ts1 .ts1-eyebrow {
    padding: 6px 12px 10px;
}

/* Big headline on both slides: a frosted strip behind each LINE (not one
   block), so the plant shows between and beside the lines. */
:root body.index-page .ts1 .ts1-title .ts1-line,
:root body.index-page .ts-hero-shell .ts-hero-content .ts-nexgen-title .nx-bar {
    padding: 2px 12px 4px !important;
    border-radius: 6px !important;
    background: rgba(238, 243, 250, .55) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

:root body.index-page .ts1 .ts1-title {
    line-height: 1.55 !important;
}

:root body.index-page .ts-hero-shell .ts-hero-content .ts-nexgen-title {
    gap: 6px !important;
    /* the eyebrow panel and the first headline strip sat edge to edge */
    margin-top: 6px !important;
}

:root .ts-hero-shell .ts-hero-content .ts-eyebrow {
    /* the tail now matches the rest (italic, full size); at 17px the second
       line wrapped "recovery" onto a third line in this narrower column */
    font-size: clamp(14px, 1.2vw, 17px);
    padding: 6px 12px 10px;
    /* 2 lines + padding + border, so nothing below moves while it types */
    min-height: calc(3em + 19px);
}

:root .ts-hero-shell .ts-eyebrow .v2-tail,
:root .ts1 .ts1-eyebrow .v2-tail {
    font-style: inherit;
    font-size: inherit;
    background: none;
    padding: 1px 0 1px 4px;
}

:root .ts-hero-shell .ts-eyebrow .v2-emerging,
:root .ts1 .ts1-eyebrow .v2-emerging {
    color: #d32f2f;
}

:root body.index-page .ts-hero-shell .ts-hero-content .v2-lead,
:root body.index-page .ts1 .ts1-sub {
    display: inline-block;
    max-width: 380px;
    background: rgba(212, 236, 250, .45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    color: #10213d;
    padding: 10px 14px;
    line-height: 1.5;
}

/* >=992: show the WHOLE plant, never cropped. The art is drawn at the
   banner's full width (16:9) standing on the bottom bar; the sky gradient on
   .ts-hero-bg fills whatever is left above it and the art's top edge fades
   into it. All the reactor frames (R101-R103) share this rule, so the
   Power On cross-fade stays aligned. */
@media (min-width: 992px) {
    :root .ts-hero-carousel .ts-hero-shell .ts-hero-bg img {
        top: auto;
        bottom: 82px;
        left: 0;
        width: 100%;
        height: auto;
        object-fit: fill;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
    }
}

/* 992-1279: the flow column narrows the banner to ~690px, so the cover-fitted
   plant shrinks and R-101/R-102 slid under the copy, where the white wash
   bleached them. Show the art from its left edge (the reactors move right,
   clear of the copy) and keep the wash small and light: the eyebrow and lead
   have their own boxes now. */
@media (min-width: 992px) and (max-width: 1279px) {
    :root .ts-hero-shell .ts-hero-content::before {
        background: radial-gradient(ellipse 300px 150px at 360px 38%,
                rgba(234, 241, 251, .75) 0,
                rgba(234, 241, 251, .45) 60%,
                rgba(234, 241, 251, 0) 100%);
    }
}

/* ---------- <=991px: sidebar and banner stack; the flow column is desktop only ---------- */
@media (max-width: 991px) {
    :root .ts-hero-shell .v2-flow {
        display: none !important;
    }

    :root .ts-hero-shell .v2-panel {
        overflow: visible;
    }
}

/* =============================================================
   Phones (<=767px) - client storyboard:
   slide 1  = big headline over the sky, plant below, arrow mid-right;
   after 5s = the banner: compact TECH SUITE card, platform pill,
              italic NexGen title, short copy, NO REACTOR chip, plant,
              bottom bar; the reactors power up red -> purple -> blue.
   The TECH SUITE card opens the details panel (third slide).
   ============================================================= */
:root .v2-m-card {
    display: none;
}

@media (max-width: 767px) {

    /* ---------- slide 1 ---------- */

    :root body.index-page .ts1-eyebrow {
        display: inline-block;
        font-size: 13px !important;
        line-height: 1.45;
        max-width: 100%;
        margin: 0 0 14px;
        padding-bottom: 8px;
        /* 2 lines + padding + border */
        min-height: calc(2.9em + 11px);
    }

    :root body.index-page .ts1-title {
        font-size: clamp(30px, 9vw, 40px) !important;
        line-height: 1.12;
        margin-top: 0;
        max-width: 100%;
    }

    :root body.index-page .ts1-sub {
        font-size: 14px !important;
        line-height: 1.5;
        max-width: 300px;
    }

    /* arrow mid-right, beside the copy, as in the storyboard */
    :root #tsHero:not(.ts-on-2):not(.ts-m-side) .ts-hero-nav {
        top: 38%;
        bottom: auto;
    }

    /* ---------- banner ---------- */
    :root .v2-m-card {
        position: relative;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 12px;
        width: calc(100% - 28px);
        margin: 12px 14px 4px;
        padding: 10px 12px;
        background: #fff;
        border: 1px solid #e3eaf5;
        border-radius: 16px;
        box-shadow: 0 6px 18px rgba(20, 45, 90, .1);
        text-align: left;
        color: inherit;
    }

    /* award badge (same image as the desktop side panel) in place of the chip icon */
    :root .v2-m-card-ic {
        flex: 0 0 58px;
        width: 58px;
        display: block;
    }

    :root .v2-m-card-ic img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

    :root .v2-m-card-txt {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    :root .v2-m-card-txt b {
        font-size: 18px;
        font-weight: 800;
        line-height: 1.1;
        color: #101828;
    }

    :root .v2-m-card-txt b span {
        color: #f2751a;
    }

    :root .v2-m-card-txt small {
        font-size: 11.5px;
        line-height: 1.35;
        color: #5b6b85;
    }

    :root .v2-m-card-go {
        flex: 0 0 auto;
        font-size: 20px;
        color: #101828;
    }

    /* no eyebrow on phones; plain copy, no box */
    :root .ts-hero-shell .ts-hero-content .ts-eyebrow {
        display: none;
    }

    :root body.index-page .ts-hero-shell .ts-hero-content .ts-nexgen-title {
        font-style: italic;
        font-size: clamp(24px, 7vw, 30px) !important;
        line-height: 1.12;
        margin-top: 10px !important;
    }

    :root body.index-page .ts-hero-shell .ts-hero-content .ts-nexgen-title * {
        font-style: italic !important;
    }

    :root body.index-page .ts-hero-shell .ts-hero-content .v2-lead {
        display: block;
        max-width: 320px;
        background: none;
        padding: 0;
        font-size: 14px !important;
        color: #475569;
    }

    :root body.index-page .ts1 .ts1-sub {
        display: block;
        max-width: 300px;
        background: none;
        padding: 0;
    }

    /* NO REACTOR chip: orange icon + two lines */
    :root body.index-page .ts-hero-shell .ts-bb-right.ts-expert-chip {
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        width: auto !important;
        padding: 8px 16px 8px 8px;
        border: 0 !important;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 6px 16px rgba(20, 45, 90, .12);
    }

    :root body.index-page .ts-hero-shell .ts-expert-chip .ts-expert-ic {
        display: grid !important;
        place-items: center;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #f2751a;
        color: #fff;
        font-size: 16px;
    }

    /* same wand icon as desktop (the play mark here made the icon change on phones) */
    :root body.index-page .ts-hero-shell .ts-expert-chip .ts-expert-ic i {
        display: block;
        line-height: 1;
    }

    :root body.index-page .ts-hero-shell .ts-expert-chip .text-center {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 0;
    }

    :root body.index-page .ts-hero-shell .ts-expert-chip .here {
        font-size: 15px !important;
        font-weight: 800;
        text-transform: uppercase;
        color: #f2751a;
        line-height: 1.15;
    }

    :root body.index-page .ts-hero-shell .ts-expert-chip .exp {
        font-size: 12px !important;
        color: #1f2a44;
        line-height: 1.2;
    }

    /* the banner has no slider arrow in the storyboard (swipe / dots) */
    :root #tsHero.ts-m-hero .ts-hero-nav {
        display: none;
    }
}

/* <=575px phones use the portrait art (banner-slider/mobile/*.webp). Its sky
   is the crop's top row stretched down, so it shows as hard vertical bands
   (light left, deep blue right). Fade the art out above the plant (the
   towers start at ~56% of its height) into a clean top-to-bottom sky.
   The red art and the R101-R103 frames share the mask, so they stay aligned. */
@media (max-width: 575px) {

    /* both slides fill the phone screen under the header, as in the
       storyboard (the bottom bar sits on the bottom edge) */
    :root .ts-hero-carousel {
        --ts-hero-h: max(calc(100vh - 82px), 600px);
        --ts-hero-h: max(calc(100svh - 82px), 600px);
    }

    :root body.index-page .ts1 {
        min-height: var(--ts-hero-h);
    }

    /* the copy sits on clear blue sky: only a light veil behind the text,
       instead of the near-white wash that dulled the whole picture */
    /* :root body.index-page .ts1-overlay {
        background: linear-gradient(180deg,
                rgba(234, 241, 251, .55) 0,
                rgba(234, 241, 251, .35) 200px,
                rgba(234, 241, 251, 0) 330px);
    } */

    :root body.index-page .ts1 {
        background: linear-gradient(180deg, #e6f1fb 0%, #cfe5f8 30%, #9ccaf0 44%, #5aa1df 54%, #2a83d4 64%, #0b6fcb 100%);
    }

    :root body.index-page .ts1-bg {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 40%, #000 58%);
        mask-image: linear-gradient(to bottom, transparent 0, transparent 40%, #000 58%);
    }

    /* banner: light behind the card, pill, title and chip, blue sky from
       just above the towers; this replaces both washes (the copy's own
       gradient and the ::after above), whose hard lower edge showed */
    :root #tsHero .ts-hero-shell .ts-hero-bg {
        background: linear-gradient(180deg, #eef4fb 0%, #eef4fb 34%, #b4d7f3 46%, #5aa1df 56%, #2a83d4 66%, #0b6fcb 100%);
    }

    :root #tsHero .ts-hero-shell .ts-hero-bg img {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 44%, #000 58%);
        mask-image: linear-gradient(to bottom, transparent 0, transparent 44%, #000 58%);
    }

    /* the old diagonal wash under the art shows through the faded top and
       drew a hard line; the gradient above does its job now */
    :root #tsHero .ts-hero-shell .ts-hero-bg::before {
        display: none;
    }

    :root #tsHero .ts-hero-shell .ts-hero-content {
        background: none !important;
    }
}

/* 576-767: the landscape art sits behind the new TECH SUITE card and pill;
   give that strip the page colour, running into the copy's own wash below */
@media (min-width: 576px) and (max-width: 767px) {
    :root #tsHero.ts-m-hero .ts-hero-shell .ts-hero-bg::after {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 170px;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to bottom, #eef4fb 0, #eef4fb 130px, rgba(238, 244, 251, 0) 170px);
    }
}

/* ---------- "PROCESS PLANT SIMULATORS PLATFORM" pill ----------
   One line at every size. Sized from the banner's own width (container
   units), so it also follows the banner when the flow column opens or
   closes. index-responsive.css pads its row 196-220px from the left at
   768-1279px to clear the co-development stepper, which index1 hides,
   so that padding goes too. */
:root .ts-hero-carousel .ts-hero-shell .ts-hero {
    container-type: inline-size;
}

@media (min-width: 768px) {
    :root #tsHero .ts-hero .slider-top-content-main {
        padding-left: 0;
    }
}

:root body.index-page #tsHero .ts-hero .slider-top-content {
    white-space: nowrap;
    font-size: clamp(11px, 2.1cqi, 1.2rem);
    letter-spacing: clamp(.4px, .12cqi, 1.5px);
    padding: clamp(4px, .6cqi, 6px) clamp(12px, 2cqi, 22px);
}

:root body.index-page #tsHero .ts-hero .slider-top-content span {
    text-underline-offset: clamp(3px, .45cqi, 5px);
    text-decoration-thickness: clamp(2px, .28cqi, 3px);
}

@media screen and (min-width: 1920px) and (min-height: 1200px) {
    :root body.index-page #tsHero .ts-hero .slider-top-content {
        font-size: clamp(11px, 2.1cqi, 1.5rem);
    }
}

/* ---------- hero typewriter, slides 1 + 2 (makeTyper, before the #tsHero slider JS) ---------- */
/* letters are hidden (visibility), not removed, so the lines wrap exactly as
   they will when typed. .tw-word stays a plain inline span: inline-block
   would add a break point between "boxes" and the "." after its link. */
/* slide 1 eyebrow: reserve its 2 lines (+ padding + border) so nothing below
   moves while it types or while the web font swaps in */
:root .ts-hero-carousel .ts1-eyebrow {
    min-height: calc(3em + 13px);
}

/* before makeTyper has wrapped the letters (html.tw-js is set in <head>) */
:root.tw-js #tsHero .ts1-inner:not(.tw-ready) .ts1-eyebrow,
:root.tw-js #tsHero .ts1-inner:not(.tw-ready) .ts1-title,
:root.tw-js #tsHero .ts1-inner:not(.tw-ready) .ts1-sub,
:root.tw-js #tsHero .ts-hero-content:not(.tw-ready) .ts-eyebrow,
:root.tw-js #tsHero .ts-hero-content:not(.tw-ready) .ts-nexgen-title,
:root.tw-js #tsHero .ts-hero-content:not(.tw-ready) .v2-lead {
    visibility: hidden;
}

:root #tsHero .tw-ready .tw-ch {
    position: relative;
    visibility: hidden;
}

:root #tsHero .tw-ready .tw-ch.on {
    visibility: visible;
}

/* a line waiting its turn hides with its box (eyebrow / lead backgrounds) */
:root #tsHero .tw-ready .tw-pending {
    visibility: hidden;
}

/* shown only once the typing is done (makeTyper `after`): the chip on slide 2 */
:root #tsHero .tw-after {
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.96);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .5s;
}

:root #tsHero .tw-after.tw-after-in {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}

/* caret after the last typed letter: a shadow on the letter itself, not a
   ::after box - an out-of-flow box inside the line adds a wrap point and made
   the line jump to 3 lines (and back) for a moment while typing */
:root #tsHero .tw-ready .tw-caret {
    box-shadow: 2px 0 0 #f77e1a;
    animation: twBlink 0.9s steps(1) infinite;
}

@keyframes twBlink {
    50% {
        box-shadow: 2px 0 0 transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root #tsHero .tw-ready .tw-caret {
        animation: none;
    }
}

/* the header comes in by jQuery .load() a moment after the hero has painted:
   hold its 83px (sticky bar) so the hero copy doesn't drop while it types */
:root div#header:empty {
    min-height: 83px;
}

/* ---------- slide 2, step 4: the hand that taps Power On (handDemo in the slider JS) ---------- */
/* positioned by its fingertip: the box's top-left corner is the touch point */
:root #tsHero .v2-hand {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
}

:root #tsHero .v2-hand>i {
    position: absolute;
    /* the bi-hand-index-thumb glyph's fingertip is ~38% across its box */
    left: -17px;
    top: -4px;
    font-size: 46px;
    line-height: 1;
    color: #ffffff;
    transform: rotate(-12deg);
    transform-origin: 38% 8%;
    -webkit-text-stroke: 1.5px #0f1d3d;
    filter: drop-shadow(0 6px 10px rgba(15, 29, 61, .45));
}

:root #tsHero .v2-hand-ring {
    position: absolute;
    left: -22px;
    top: -22px;
    width: 44px;
    height: 44px;
    border: 3px solid #f2751a;
    border-radius: 50%;
    opacity: 0;
}

:root #tsHero .v2-hand.v2-hand-tap .v2-hand-ring {
    animation: v2HandRing .7s ease-out forwards;
}

@keyframes v2HandRing {
    0% {
        opacity: .9;
        transform: scale(.4);
    }

    100% {
        opacity: 0;
        transform: scale(1.7);
    }
}

/* ---------- tablets (768-991px): sidebar | banner ----------
   index-responsive.css sizes this range for index.html, where a 196px
   stepper sits inside the banner; index1 hides that stepper, so the
   sidebar gets the room instead and the dots centre on the plant. */
@media (min-width: 768px) and (max-width: 991px) {
    :root .ts-hero-carousel .ts-hero-shell .ts-body {
        --v2-side: 280px;
        grid-template-columns: var(--v2-side) minmax(0, 1fr);
    }

    /* at 280px the copy beside the badge broke one word per line: badge on top */
    :root .ts-hero-shell .v2-award {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    :root .ts-hero-shell .v2-award .badge {
        flex: 0 0 auto;
        width: 96px;
    }

    :root body.index-page .ts-hero-shell .v2-award p {
        width: 100%;
    }

    /* plant area = section minus the sidebar */
    :root #tsHero.ts-on-2 .ts-hero-dots {
        left: calc(50% + var(--v2-side, 280px) / 2);
    }
}

/* 768-991: the banner shows the portrait art (index.html <source>); anchor it
   bottom-centre so all three reactors stand in view. R101-R103 share it. */
@media (min-width: 768px) and (max-width: 991px) {
    :root .ts-hero-carousel .ts-hero-shell .ts-hero-bg img {
        object-position: center bottom;
    }
}
/* slide 2, sidebar closed: the banner runs full width and the copy sits over
   the plant, so it steps down a size; it grows back as the sidebar opens */
@media (min-width: 992px) {
    :root body.index-page #tsHero .ts-hero-shell .ts-hero-content :is(.ts-eyebrow, .ts-nexgen-title, .v2-lead),
    :root body.index-page #tsHero .ts-hero-shell .ts-expert-chip :is(.here, .exp) {
        transition: font-size .6s cubic-bezier(.22, 1, .36, 1);
    }

    :root body.index-page #tsHero.v2-side-closed .ts-hero-shell .ts-hero-content .ts-eyebrow {
        font-size: clamp(13px, 1vw, 15px) !important;
    }

    :root body.index-page #tsHero.v2-side-closed .ts-hero-shell .ts-hero-content .ts-nexgen-title {
        font-size: clamp(26px, 2.2vw, 36px) !important;
    }

    :root body.index-page #tsHero.v2-side-closed .ts-hero-shell .ts-hero-content .v2-lead {
        font-size: clamp(14px, 1vw, 16px) !important;
    }

    :root body.index-page #tsHero.v2-side-closed .ts-hero-shell .ts-expert-chip .here {
        font-size: clamp(13px, .85vw, 16px) !important;
    }

    :root body.index-page #tsHero.v2-side-closed .ts-hero-shell .ts-expert-chip .exp {
        font-size: clamp(11px, .65vw, 12px) !important;
    }
}