/* =============================================================
   index-responsive.css — homepage breakpoint rules only
   Load AFTER index.css (and after custom.css): every rule here is a
   media query, so source order is what settles ties with the base
   rules it overrides.
   ============================================================= */

/* ---------- Tech Suite hero ---------- */
/* ---------- Responsive ---------- */
/* Below 1600px shrink the hero heading + bottom-bar text */
@media (max-width: 1600px) {

    /* .ts-hero-carousel prefix lifts specificity above the .ts1-title base
       rule in index.css */
    .ts-hero-carousel .ts1-title,
    .ts-hero-shell .ts-hero-content :is(h1, h2:where(.ts-nexgen-title)) {
        font-size: clamp(1.75rem, 1rem + 2.2vw, 2.75rem);
    }

    .ts-hero-shell .ts-bb-left p {
        font-size: clamp(14px, 1.05vw, 16px);
    }

    .ts-hero-shell {
        height: 89vh;
    }
}

/* =============================================================
   TABLET LANDSCAPE / SMALL LAPTOP — 1200px and below
   Sidebar still sits beside the hero, just narrower, so the headline
   keeps a usable measure instead of crashing into the plant.
   ============================================================= */
@media (max-width: 1200px) {

    .ts-hero-carousel .ts-hero-shell .ts-body {
        grid-template-columns: 290px minmax(0, 1fr);
    }

    /* dots centred on the hero area (sidebar is 290px here) */
    .ts-hero-carousel.ts-on-2 .ts-hero-dots {
        left: calc(50% + 145px);
    }

    .ts-hero-carousel .ts-hero-shell .ts-side {
        padding: 14px 16px 10px;
    }

    .ts-hero-carousel .ts-hero-shell .ts-side-brand {
        font-size: 26px;
    }

    .ts-hero-carousel .ts-hero-shell .tsb-the {
        font-size: 22px;
    }

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

    .ts-hero-shell .ts-hero-content {
        padding: 34px 30px 0 15px;
    }

    .ts-hero-shell .ts-bb-left p {
        font-size: 15px;
    }

}

/* =============================================================
   STACKED HERO — 991px and below
   Below this the 290px sidebar leaves the hero too narrow to read, so
   the two-column body stacks: hero (image + headline + bottom bar)
   first, supporting sidebar copy under it.
   ============================================================= */
@media (max-width: 767px) {

    /* Stacked, slide 2 is several times taller than slide 1 — sharing one
       grid cell would stretch the short slide to the tall one's height.
       Only the ACTIVE slide stays in flow; the other is lifted out with
       position: absolute, so the section is exactly as tall as whatever is
       on screen. (The wrapper is already position: relative.) */
    .ts-hero-carousel {
        display: block;
    }

    .ts-hero-carousel .ts-slide {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

    .ts-hero-carousel .ts-slide.ts-slide-active {
        position: relative;
    }

    /* ---------- Slide 2 ---------- */
    .ts-hero-shell {
        height: auto;
        min-height: 0;
    }

    .ts-hero-carousel .ts-hero-shell .ts-body {
        grid-template-columns: minmax(0, 1fr);
    }

    /* A px floor as well as the vh: on a short phone (375x667) the copy plus
       the stacked bottom bar eat the whole 62-74vh and leave ~40px of plant.
       The floor lives in a custom property because the dots/arrow have to be
       positioned from it too — see the .ts-on-2 rules at the end of this block.
       Declare it once here, override it once at 575, and the controls follow. */
    .ts-hero-carousel {
        --ts-hero-h: max(62vh, 620px);
        --ts-bar-h: 86px;
    }

    /* mobile order: TECH SUITE sidebar, co-development stepper, then the banner */
    .ts-hero-shell .ts-hero {
        order: 3;
        min-height: var(--ts-hero-h);
    }

    .ts-hero-shell .ts-side {
        order: 1;
        border-right: none;
        border-top: 1px solid #e6eef8;
        padding: 20px 18px 26px;
        gap: 10px;
    }

    /* the slide-in only reads as one when the sidebar enters from the section's
       own left edge — stacked under the hero it just looks like a jump */
    .ts-hero-carousel .ts-slide .ts-side {
        transform: none;
    }

    /* Stacked, the copy sits ON the plant instead of beside it, so it needs a
       wash behind it — but the wash belongs on the COPY, not on the photo. Put
       it on .ts-hero-bg::before and it covers a fixed slab of the picture no
       matter how short the hero turns out; here it is exactly as tall as the
       text, and every pixel below is untouched plant. (.ts-hero-content is
       z-index 3, already above .ts-hero-bg.) The bottom 44px fades out so there
       is no hard edge, and the padding keeps the last line clear of it. */
    .ts-hero-shell .ts-hero-content {
        padding: 26px 18px 44px;
        max-width: none;
        background: linear-gradient(to top,
                rgba(234, 241, 251, 0) 0,
                rgba(234, 241, 251, .97) 44px,
                rgba(234, 241, 251, .97) 100%);
    }

    .ts-hero-shell .ts-hero-content .lead {
        max-width: none;
        margin-bottom: 18px;
    }

    /* Back into normal flow — absolutely positioned over a now auto-height hero
       it would land on top of the copy. `relative`, not `static`: .ts-hero-bg is
       positioned, so a static bar paints underneath the plant and disappears. */
    .ts-hero-shell .ts-bottombar {
        position: relative;
        z-index: 3;
        margin-top: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 18px;
    }

    .ts-hero-shell .ts-bb-left p {
        font-size: 15px;
    }

    /* The chip lives in .ts-hero-content, not in the bottom bar. Stretched to
       width:100% it rendered as a near-empty 354px card with the
       script "No" floating in the middle of it and "Expertise required" hard
       left — the two lines are centred inside a 125px .text-center box, so they
       only line up while the box hugs its text. Shrink-wrap it back into a chip
       and put the two words on one baseline; that also gives ~25px of the short
       mobile hero back to the plant. */
    .ts-hero-shell .ts-bb-right {
        position: static;
        margin-top: 0;
        width: fit-content;
        max-width: 100%;
        gap: 0;
        padding: 8px 16px 8px 12px;
        border-top: none;
        border-left: 4px solid var(--tsh-orange);
        border-radius: 10px;
        background: rgba(255, 255, 255, .74);
        box-shadow: 0 6px 16px rgba(10, 25, 45, .16);
    }

    .ts-hero-shell .ts-bb-right .text-center {
        display: flex;
        align-items: baseline;
        gap: 7px;
        text-align: left;
    }

    /* ---------- Slide 1 ---------- */
    /* no px floor here, unlike .ts-hero: slide 1 has no bottom bar eating the
       box, and a floor taller than the viewport would push the bottom dots
       off screen */
    .ts1 {
        height: auto;
        min-height: 62vh;
        align-items: flex-start;
        padding-bottom: 0;
    }

    .ts1-bg {
        /* object-fit: fill smears the 16:9 plant on a portrait screen */
        object-fit: cover;
        object-position: 62% center;
    }

    /* The base overlay is commented out on desktop because the copy sits over
       plain sky there. Down here it runs across the towers, so bring a wash back. */
    /* .ts1-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,
                rgba(234, 241, 251, .95) 0,
                rgba(234, 241, 251, .93) 300px,
                rgba(234, 241, 251, .4) 370px,
                rgba(234, 241, 251, 0) 440px);
    } */

    .ts1-inner {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    /* the hard-coded <br> breaks are tuned to the desktop measure and orphan
       single words once the column is this narrow */
    .ts1-eyebrow br,
    .ts1-title br,
    .ts1-sub br,
    .ts-hero-shell .ts-eyebrow br,
    .ts-hero-shell .ts-bb-left p br {
        display: none;
    }

    /* ---------- Nav arrow ---------- */
    /* Stacked layout: the right edge's vertical centre lands mid-sidebar on
       slide 2 (the nav is outside .ts-hero, so it anchors to the section box),
       so the arrow drops to the bottom-right corner and the dots take the
       bottom centre. */
    .ts-hero-nav,
    .ts-hero-carousel.ts-on-2 .ts-hero-nav {
        top: auto;
        bottom: 16px;
        right: 14px;
        left: auto;
        transform: none;
    }

    .ts-hero-nav .ts-nav-arrow {
        width: 42px;
        height: 42px;
    }

    .ts-hero-nav .ts-nav-arrow svg {
        width: 20px;
        height: 20px;
    }

    /* Dots bottom-centre, in a translucent pill — the inactive dot is white
       and would vanish against the stacked white sidebar. */
    .ts-hero-dots,
    .ts-hero-carousel.ts-on-2 .ts-hero-dots {
        top: auto;
        bottom: 16px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        gap: 8px;
        padding: 7px 9px;
        border-radius: 999px;
        background: rgba(14, 37, 69, .38);
    }

    .ts-hero-dots .ts-dot {
        width: 11px;
        height: 11px;
    }

    .ts-hero-dots .ts-dot.active {
        width: 26px;
    }

    /* Stacked, the section's bottom edge is the foot of the SIDEBAR — a full
       screen below the hero — so `bottom: 16px` dropped both controls on top of
       the last feature card and made the slider unreachable without scrolling
       past it. The slides are siblings of the controls, so the only handle is
       the section box; measure down from its top instead, using the same
       --ts-hero-h that sets the hero's height. Safe because the hero's content
       (copy + bar) is well under the floor at every phone width, so the hero is
       exactly --ts-hero-h tall. Slide 1 keeps bottom: 16px — it has no sidebar
       under it, so its section bottom IS the hero bottom. */
    /* The hero is now the LAST block (TECH SUITE, then the stepper, then the
       banner), so the slider JS writes its offset from the section top into
       --ts-hero-top and the controls are measured from there. */
    .ts-hero-carousel.ts-on-2 .ts-hero-dots {
        top: calc(var(--ts-hero-top, 0px) + var(--ts-hero-h) - var(--ts-bar-h) - 40px);
        bottom: auto;
    }

    .ts-hero-carousel.ts-on-2 .ts-hero-nav {
        top: calc(var(--ts-hero-top, 0px) + var(--ts-hero-h) - var(--ts-bar-h) - 56px);
        bottom: auto;
    }
}

/* =============================================================
   PHONES — 767px and below
   ============================================================= */
@media (max-width: 767px) {

    .ts-hero-shell .ts-award p,
    .ts-hero-shell .ts-feature p {
        font-size: 13px;
    }

    .ts-hero-shell .ts-bb-left p {
        font-size: 13.5px;
    }

    .ts-hero-shell .ts-bb-left .ts-ic {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    /* uppercase + 1.5px tracking runs this bar off the side of a phone */
    .index-page .slider-top-content {
        font-size: .8rem;
        letter-spacing: .5px;
        padding: 6px 12px;
    }

    .ts-hero-shell .ts-cards {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px 18px;
    }
}

/* =============================================================
   SMALL PHONES — 575px and below
   Portrait screens are narrow but tall, so the hero takes some height
   back to keep the plant recognisable under the copy.
   ============================================================= */
@media (max-width: 575px) {

    /* the number badge hangs outside the card — keep the gutter narrow
       enough that it still fits inside the container on a phone */
    .detailPoints .bullet-box {
        padding-left: 38px;
    }

    .detailPoints .bullet-box li {
        padding: 14px 16px;
    }

    .detailPoints .bullet-box li::after {
        left: -38px;
        top: 12px;
        width: 26px;
        height: 26px;
        font-size: 14px;
        border-width: 2px;
    }

    .ts-hero-carousel {
        --ts-hero-h: max(74vh, 650px);
    }

    /* Phones get their own portrait art (banner-slider/mobile/*.webp, 900x1500,
       same 0.6 shape as the hero box): R-101..R-103 cropped tight across the
       bottom ~48%, open sky above for the copy. Anchor it to the bottom so a
       taller or wider box trims sky / edges, never the reactors. */
    .ts-hero-shell .ts-hero-bg img {
        object-position: center bottom;
    }

    .ts1-bg {
        object-position: center bottom;
    }

    .ts1 {
        min-height: 74vh;
    }

    .ts-hero-carousel .ts-hero-shell .ts-side-brand {
        font-size: 22px;
        padding-bottom: 14px;
    }

    .ts-hero-carousel .ts-hero-shell .tsb-the {
        font-size: 19px;
        margin-right: 6px;
    }

    .ts-hero-shell .tsb-platform {
        letter-spacing: 2.5px;
    }

    .ts-hero-shell .ts-award {
        gap: 10px;
    }

    .ts-hero-carousel .ts-hero-shell .ts-award .badge {
        width: 84px;
        flex: 0 0 84px;
        padding: 6px;
    }

    .ts-hero-shell .ts-hero-content {
        padding: 22px 16px 44px;
    }

    .ts-hero-shell .ts-bottombar {
        padding: 12px 16px;
    }

    .ts1-inner {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .ts-hero-shell .ts-cards {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   FULL-HD+ DISPLAYS — the 1920x1200 laptop
   Base type is tuned for ~1366-1600px screens and reads small here,
   so this block scales the whole homepage up one step: hero first,
   then every below-hero section.

   Two conditions, same screen:
   - 1920 x 1200 matches DevTools' responsive preview, where the
     viewport is exactly the numbers you type.
   - 1900 x 900 matches that same laptop in a real browser window,
     where the viewport is ~1904 x 1080 (scrollbar gutter comes off
     the width, tab + address bar off the height).
   Without the second line the styles only show up in DevTools.
   ============================================================= */
@media screen and (min-width: 1920px) and (min-height: 1200px) {
    :root {
        --nave-font-size: 25.2px;
    }

    .hamburger a i {
        font-size: 50px;
    }

    .hamburger a:focus i {
        font-size: 50px;
    }

    /* ---------- Hero sidebar ---------- */
    .ts-hero-carousel .ts-hero-shell .ts-body {
        grid-template-columns: 500px minmax(0, 1fr);
    }

    /* dots centred on the hero area (sidebar is 500px here) */
    .ts-hero-carousel.ts-on-2 .ts-hero-dots {
        left: calc(50% + 250px);
    }

    .ts-hero-carousel .ts-hero-shell .ts-side {
        padding: 20px 28px 14px;
        /* tight gap + chip padding below: the 25px award copy makes the
           column tall, and it has to fit the 92vh shell without scrolling */
        gap: 9px;
    }

    .ts-hero-carousel .ts-hero-shell .ts-side-brand {
        font-size: 54px;
        padding-bottom: 20px;
    }

    .ts-hero-carousel .ts-hero-shell .tsb-the {
        font-size: 35px;
    }

    .ts-hero-carousel .ts-hero-shell .tsb-tm,
    .ts-hero-carousel .ts-hero-shell .tsb-platform {
        font-size: 21px;
    }

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

    .ts-hero-shell .ts-award p {
        font-size: 21px;
        line-height: 1.4;
    }

    .ts-hero-carousel .ts-hero-shell .ts-feature {
        padding: 11px 14px;
    }

    .ts-hero-carousel .ts-hero-shell .ts-feature h4 {
        font-size: 21px;
    }

    .ts-hero-carousel .ts-hero-shell .ts-feature p {
        font-size: 21px;
        line-height: 1.5;
    }

    /* ---------- Hero copy ---------- */
    .ts-hero-carousel .ts-hero-shell .ts-hero-content {
        padding: 70px 56px 0 34px;
        /* keeps the bigger heading inside the light gradient zone
           instead of running over the reactors */
        max-width: 800px;
    }

    .ts-hero-carousel .ts-hero-shell .ts-eyebrow,
    .ts-hero-carousel .ts1-eyebrow {
        font-size: 23px;
    }

    .index-page .slider-top-content {
        font-size: 1.5rem;
    }

    .ts-hero-carousel .ts-hero-shell .ts-hero-content .lead {
        font-size: 24px;
        max-width: 600px;
    }

    .ts-hero-carousel .ts1-sub {
        font-size: 24px;
        max-width: 900px;
    }

    .ts-hero-carousel .ts-hero-shell .ts-cta {
        font-size: 23px;
        padding: 20px 38px;
    }

    /* ---------- Hero cards + bottom bar ---------- */
    .ts-hero-carousel .ts-hero-shell .ts-card h3 {
        font-size: 25px;
    }

    .ts-hero-carousel .ts-hero-shell .ts-card span {
        font-size: 17px;
    }

    .ts-hero-carousel .ts-hero-shell .ts-bb-left p {
        font-size: 24px;
        /* wider cap so the bigger type still holds 2 lines, not 3 */
        max-width: 1250px;
    }

    .ts-hero-carousel .ts-hero-shell .ts-bb-left .ts-ic {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
    }

    .ts-hero-carousel .ts-hero-shell .ts-bb-right .here {
        font-size: 32px;
    }

    .ts-hero-carousel .ts-hero-shell .ts-bb-right .exp {
        font-size: 24px;
    }

    /* ---------- Facility specs ---------- */
    .facility-specs-title {
        font-size: 48px;
    }

    .facility-specs-subtitle {
        font-size: 22px;
    }

    .facility-specs-section .reactor-card-name {
        font-size: 23px;
    }

    .facility-specs-section .reactor-card-desc {
        font-size: 21px;
        line-height: 1.5;
        font-weight: 500;
    }

    /* ---------- Credentials ---------- */
    .cred-main-title {
        font-size: 50px;
    }

    .cred-subtitle {
        font-size: 22px;
    }

    .cred-section .cred-eyebrow {
        font-size: 19px;
    }

    .cred-section .cf-card__title {
        font-size: 23.5px;
    }

    .cred-section .cf-card__text {
        font-size: 21px;
        line-height: 1.6;
    }

    /* ---------- "At DIFREX, we don't just design reactors" ---------- */
    .reactor-section h3,
    .reactor-section h3 span {
        font-size: 38px;
    }

    .reactor-section h6 {
        font-size: 22px;
    }

    .reactor-section h4 {
        font-size: 26px;
    }

    .reactor-section p {
        font-size: 21px;
        line-height: 1.6;
    }

    /* ---------- Tech Suite / Positioning / FAQ headings ---------- */
    .tech-suite-section .tech-suite-title,
    .positioning-section .tech-suite-title,
    .investor-dialogue-section .tech-suite-title {
        font-size: 34px;
    }

    .tech-suite-quote,
    .tech-suite-quote em,
    .tech-suite-quote .ts-highlight {
        font-size: 22px;
        line-height: 1.6;
    }

    .positioning-section th,
    .positioning-section td {
        font-size: 21px;
    }

    /* ---------- "We stand by your reactor" ---------- */
    /* 35px keeps this long heading on one line inside the container
       instead of orphaning the last word */
    #hotels .profit h3,
    #hotels .profit h3 span {
        font-size: 35px;
    }

    #hotels .profit p {
        font-size: 22px;
    }

    #hotels .hotel p {
        font-size: 21px;
        line-height: 1.55;
    }

    /* ---------- Numbered bullet list ---------- */
    .detailPoints .bullet-box li p,
    .detailPoints .bullet-box li p a,
    .detailPoints .bullet-box li p em,
    .detailPoints .bullet-box li p span {
        font-size: 22px;
        line-height: 1.7;
    }

    /* ---------- FAQ ---------- */
    .investor-dialogue-section .accordion-button {
        font-size: 21px;
    }

    .investor-dialogue-section .accordion-body p,
    .investor-dialogue-section .accordion-body p strong,
    .investor-dialogue-section .accordion-body p em {
        font-size: 21px;
        line-height: 1.7;
    }

    .ts-hero-nav .ts-nav-arrow {
        width: 62px;
        height: 62px;
    }

    .ts-hero-nav .ts-nav-arrow svg {
        width: 28px;
        height: 28px;
    }

    .ts-hero-dots .ts-dot {
        width: 18px;
        height: 18px;
    }

    .ts-hero-dots .ts-dot.active {
        width: 46px;
    }

    .supporter-logo img {
        max-height: 90px;
    }

    .ts-hero-shell .btn-power-on svg {
        width: 34px;
        height: 34px;
    }

    .btn-icon-circle {
        width: 40px;
        height: 40px;
    }

    .ts-hero-shell .btn-power-on {
        width: 50px;
        height: 50px;
    }

    .index-page #header #logo a {
        display: inline-block;
        width: 215px;
        height: 105px;
        /* 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 110px no-repeat;
    }

    .ts-hero-shell .ts-bb-right .here {
        font-size: 30px;
    }
}

/* =============================================================
   SLIDE 2 DOTS ON DESKTOP — bottom centre of the plant, above the bar
   Centred on the hero area right of the sidebar + co-development panel:
   50% of the section + half their combined width.
   #tsHero outranks the per-breakpoint `left: calc(50% + N)` rules above.
   ============================================================= */
@media (min-width: 768px) {
    #tsHero.ts-on-2 .ts-hero-dots {
        top: auto;
        bottom: 106px;
        right: auto;
        left: calc(50% + 300px);
        transform: translateX(-50%);
    }
}

@media (min-width: 768px) and (max-width: 1279px),
(min-width: 768px) and (max-height: 820px) {
    #tsHero.ts-on-2 .ts-hero-dots {
        left: calc(50% + 280px);
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    #tsHero.ts-on-2 .ts-hero-dots {
        left: calc(50% + 255px);
    }
}

/* =============================================================
   TABLET (768-991px) — the desktop slider layout, packed tighter
   The side-by-side layout now starts at 768px, so on tablets three columns
   share the width: TECH SUITE sidebar, co-development stepper, then the
   copy over the plant. Both side columns narrow, the title may wrap, and
   the copy keeps clear of the slider arrow on the right.
   ============================================================= */
@media (min-width: 768px) and (max-width: 991px) {
    .ts-hero-carousel .ts-hero-shell .ts-body {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .ts-hero-carousel .ts-hero-shell .ts-side {
        padding: 14px 12px 10px;
    }

    /* brand + Power On share one 216px row: shrink the brand so the button
       isn't pushed under the stepper */
    .ts-hero-carousel .ts-hero-shell .ts-side-brand {
        font-size: 20px;
    }

    .ts-hero-carousel .ts-hero-shell .tsb-the {
        font-size: 17px;
        margin-right: 4px;
    }

    .ts-hero-shell .tsb-platform {
        letter-spacing: 2.5px;
    }

    .ts-hero-carousel .ts-hero-shell .ts-side-top {
        gap: 6px;
    }

    #tsHero .ts-hero-shell .ts-hero>.ts-codev {
        width: 196px;
        padding-left: 12px;
        padding-right: 10px;
    }

    #tsHero .ts-hero-shell .ts-hero-content {
        padding-left: 214px;
        padding-right: 84px;
    }

    #tsHero .ts-hero-shell .ts-hero-content :is(h1, h2).ts-nexgen-title {
        font-size: 24px;
    }

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

    /* the PLATFORM bar is centred over the hero; centre it over the part
       right of the stepper instead, so it doesn't run over the stepper title */
    #tsHero .ts-hero .slider-top-content-main {
        padding-left: 196px;
    }

    .index-page .ts-hero .slider-top-content {
        font-size: 1rem;
        letter-spacing: .5px;
    }

    /* plant area = section minus sidebar (240) and stepper (196) */
    #tsHero.ts-on-2 .ts-hero-dots {
        left: calc(50% + 218px);
    }
}

/* small laptops (992-1279px): same fix for the PLATFORM bar (stepper 220px) */
@media (min-width: 992px) and (max-width: 1279px) {
    #tsHero .ts-hero .slider-top-content-main {
        padding-left: 220px;
    }
}

/* =============================================================
   PHONES (<=767px) — slide 2 split into three slides
   The slider JS puts one of ts-m-side / ts-m-codev / ts-m-hero on the
   section; only that block of slide 2 shows, so the phone slider runs
   1 Faster path -> 2 TECH SUITE -> 3 co-development -> 4 NexGen banner.
   ============================================================= */
.ts-hero-dots .ts-dot-m {
    display: none;
}

@media (max-width: 767px) {
    .ts-hero-dots .ts-dot-m {
        display: block;
    }

    #tsHero.ts-m-side .ts-body> :not(.ts-side),
    #tsHero.ts-m-codev .ts-body> :not(.ts-codev),
    #tsHero.ts-m-hero .ts-body> :not(.ts-hero) {
        display: none !important;
    }

    /* the two text slides are as tall as the banner, and keep their last
       lines clear of the dots + arrow at the bottom */
    #tsHero.ts-m-side .ts-body>.ts-side,
    #tsHero.ts-m-codev .ts-body>.ts-codev {
        min-height: var(--ts-hero-h);
        padding-bottom: 76px;
        border-top: 0;
        border-bottom: 0;
        animation: ts-m-panel-in .5s ease both;
    }

    #tsHero.ts-m-hero .ts-body>.ts-hero {
        animation: ts-m-panel-in .5s ease both;
    }
}

@keyframes ts-m-panel-in {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #tsHero .ts-body>* {
        animation: none !important;
    }
}

/* =============================================================
   "NO REACTOR / Expertise required" chip — one place for every size
   Desktop: two stacked lines. Tablet: same, packed tighter.
   Mobile: one line (layout set in the <=767px block above), wraps on
   the narrowest phones instead of running off the edge.
   ============================================================= */
.ts-hero-shell .ts-bb-right .here,
.ts-hero-shell .ts-bb-right .exp {
    white-space: nowrap;
}

/* small laptop 992-1199 */
@media (max-width: 1199px) {
    .ts-hero-shell .ts-bb-right {
        padding: 9px 16px 9px 12px;
    }

    .ts-hero-shell .ts-bb-right .here {
        font-size: 21px;
    }

    .ts-hero-shell .ts-bb-right .exp {
        font-size: 16px;
    }
}

/* tablet 768-991 */
@media (max-width: 991px) {
    .ts-hero-shell .ts-bb-right {
        padding: 8px 14px 8px 11px;
        border-radius: 10px;
    }

    .ts-hero-shell .ts-bb-right .here {
        font-size: 19px;
    }

    .ts-hero-shell .ts-bb-right .exp {
        font-size: 15px;
    }
}

/* mobile */
@media (max-width: 767px) {
    .ts-hero-shell .ts-bb-right {
        margin: 6px 0 4px;
        padding: 7px 14px 7px 11px;
    }

    .ts-hero-shell .ts-bb-right .text-center {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .ts-hero-shell .ts-bb-right .here {
        font-size: 17px;
    }

    .ts-hero-shell .ts-bb-right .exp {
        font-size: 14px;
    }
}

/* small phones */
@media (max-width: 400px) {
    .ts-hero-shell .ts-bb-right {
        padding: 6px 12px 6px 10px;
    }

    .ts-hero-shell .ts-bb-right .here {
        font-size: 15px;
    }

    .ts-hero-shell .ts-bb-right .exp {
        font-size: 13px;
    }
}

/* =============================================================
   HOMEPAGE TYPE SCALE — tablet + mobile, every section below the hero
   custom.css has a second `@media (max-width: 991px) :root {...}` block
   AFTER its 767/480 ones, so --body-font-size snaps back to 17.2px on
   phones and the p { line-height: 1.8 } default makes every section
   very tall. Reset the scale here (this file only loads on index.html).
     tablet 768-991:  body 16px  · section title 26px · card title 18px
     mobile <=767:    body 15px  · section title 22px · card title 17px
     phone  <=360:    body 14.5px· section title 20px · card title 16px
   ============================================================= */
@media (max-width: 991px) {
    :root {
        --body-font-size: 16px;
        --a-font-size: 16px;
        --h2-font-size: 1.625rem;
        --h3-font-size: 1.5rem;
        --h4-font-size: 1.25rem;
        --h5-font-size: 1.125rem;
    }

    .index-page #main p,
    .index-page #main li {
        line-height: 1.7;
    }

    /* section titles */
    .cred-main-title,
    .reactor-section h3,
    #hotels h3 {
        font-size: 26px;
        line-height: 1.25;
    }

    .tech-suite-section .tech-suite-title,
    .positioning-section .tech-suite-title,
    .investor-dialogue-section .tech-suite-title {
        font-size: 20px;
    }

    .cred-subtitle,
    .rp-section .cred-subtitle {
        font-size: 17px;
        line-height: 1.6;
    }

    /* cards */
    .cf-card__title,
    .rp-card__title {
        font-size: 18px;
    }

    .cf-card__text {
        font-size: 16px;
        line-height: 1.65;
    }

    .reactor-section h4 {
        font-size: 20px;
    }

    .reactor-section h6 {
        font-size: 16px;
        line-height: 1.5;
    }

    .tech-suite-quote {
        font-size: 17px;
        line-height: 1.7;
    }

    .positioning-table th {
        font-size: 16px;
        padding: 16px;
    }

    .positioning-table td {
        font-size: 15.5px;
        padding: 16px;
    }

    .detailPoints .bullet-box li {
        font-size: 16px !important;
    }

    .custom-accordion .accordion-body {
        font-size: 16px;
        padding: 20px 24px;
    }
}

@media (max-width: 767px) {
    :root {
        --body-font-size: 15px;
        --a-font-size: 15px;
        --h2-font-size: 1.375rem;
        --h3-font-size: 1.3rem;
        --h4-font-size: 1.15rem;
        --h5-font-size: 1.05rem;
    }

    .index-page #main p,
    .index-page #main li {
        line-height: 1.6;
    }

    /* ---- section titles: one size for every section ----
       !important only because custom.css forces h2 { 1.4rem !important } */
    .cred-main-title,
    .reactor-section h3,
    .reactor-section h3 span,
    #hotels h3,
    #hotels h3 span {
        font-size: 22px !important;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    #hotels h3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .tech-suite-section .tech-suite-title,
    .positioning-section .tech-suite-title,
    .investor-dialogue-section .tech-suite-title {
        font-size: 19px !important;
        line-height: 1.35;
    }

    .cred-eyebrow {
        font-size: 12.5px;
        padding: 4px 14px;
        margin-bottom: 12px;
    }

    .cred-subtitle,
    .rp-section .cred-subtitle {
        font-size: 15.5px;
        line-height: 1.55;
    }

    /* ---- Credentials ---- */
    .cred-section {
        padding: 44px 0;
    }

    .cred-section .row.g-4 {
        --bs-gutter-y: 14px;
    }

    .cf-card {
        padding: 20px 18px 18px 20px;
    }

    .cf-card__title {
        font-size: 17px;
        line-height: 1.35;
        margin-bottom: 6px;
    }

    .cf-card__text {
        font-size: 15px;
        line-height: 1.6;
    }

    /* ---- Reactor pillars ---- */
    .rp-card__title {
        font-size: 17px;
    }

    .rp-card__text {
        font-size: 14.5px;
        line-height: 1.55;
    }

    .rp-card__more {
        font-size: 14px;
    }

    /* ---- "At DIFREX we redefine them" ---- */
    .reactor-section h6 {
        font-size: 15px;
        line-height: 1.55;
    }

    .reactor-section h4 {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .reactor-section .row.mt-5 {
        margin-top: 1.5rem !important;
    }

    /* ---- Tech Suite quote ---- */
    .tech-suite-section {
        padding: 36px 0 24px;
    }

    .tech-suite-quote-card {
        padding: 20px 18px;
    }

    .tech-suite-quote {
        font-size: 15.5px;
        line-height: 1.65;
    }

    .tech-suite-quote .ts-highlight,
    .ts-highlight {
        font-size: inherit;
    }

    /* ---- Positioning table: 2 narrow columns, so tighter type + padding ---- */
    .positioning-table-wrapper {
        margin-top: 18px;
    }

    .positioning-table th {
        font-size: 14.5px;
        padding: 12px 10px;
    }

    .positioning-table td,
    .positioning-table td strong {
        font-size: 14px;
        line-height: 1.5;
    }

    .positioning-table td {
        padding: 12px 10px;
    }

    /* ---- We stand by your reactor ---- */
    #hotels .hotel p {
        font-size: 15px;
        line-height: 1.55;
        padding: 12px 14px;
    }

    /* ---- Detail points ---- */
    .detailPoints .bullet-box {
        padding-left: 40px;
    }

    .detailPoints .bullet-box li {
        font-size: 15px !important;
        padding: 14px 16px;
        margin-bottom: 12px;
    }

    .detailPoints .bullet-box li p,
    .detailPoints .bullet-box li p a,
    .detailPoints .bullet-box li p em,
    .detailPoints .bullet-box li p span {
        font-size: 15px;
        line-height: 1.6;
    }

    /* ---- FAQ ---- */
    .custom-accordion .accordion-button,
    .investor-dialogue-section .accordion-button {
        font-size: 15px;
        line-height: 1.35;
        padding: 14px 16px;
    }

    .custom-accordion .accordion-body {
        font-size: 15px;
        line-height: 1.6;
        padding: 16px 18px;
    }

    .investor-dialogue-section .accordion-body p,
    .investor-dialogue-section .accordion-body p strong,
    .investor-dialogue-section .accordion-body p em {
        font-size: 15px;
        line-height: 1.6;
    }

    /* ---- Footer (footer.html, loaded into #footer) ---- */

    #footer .footer-top .footer-info p {
        font-size: 14.5px;
        line-height: 1.55;
    }
}

@media (max-width: 360px) {
    :root {
        --body-font-size: 14.5px;
        --a-font-size: 14.5px;
    }

    .cred-main-title,
    .reactor-section h3,
    .reactor-section h3 span,
    #hotels h3,
    #hotels h3 span {
        font-size: 20px !important;
    }

    .cred-subtitle,
    .rp-section .cred-subtitle,
    .tech-suite-quote {
        font-size: 15px;
    }

    .cf-card__title,
    .rp-card__title {
        font-size: 16px;
    }

    .cf-card__text,
    #hotels .hotel p,
    .detailPoints .bullet-box li p,
    .custom-accordion .accordion-body,
    .investor-dialogue-section .accordion-body p {
        font-size: 14.5px;
    }

    .detailPoints .bullet-box li {
        font-size: 14.5px !important;
    }

    .positioning-table th,
    .positioning-table td {
        padding: 10px 8px;
    }

    .positioning-table td,
    .positioning-table td strong {
        font-size: 13.5px;
    }
}

/* =============================================================
   "NO REACTOR / Expertise required" — slide 2, under the hero copy
   (inside .ts-hero-content, right after the .lead paragraph).
   Frosted card + orange icon disc; the two lines are left-aligned next
   to the icon. Phones keep the compact one-line chip from the <=767px
   blocks above.
   ============================================================= */
@media (min-width: 768px) {
    #tsHero .ts-expert-chip {
        position: relative;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 12px;
        width: fit-content;
        margin: 4px 0 0;
        padding: 6px 6px 6px 6px;
        border: 1px solid rgba(255, 255, 255, .8);
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .82));
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 14px 34px rgba(10, 25, 45, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    #tsHero .ts-expert-chip .ts-expert-ic {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: clamp(38px, 2.9vw, 52px);
        height: clamp(38px, 2.9vw, 52px);
        border-radius: 50%;
        background: linear-gradient(135deg, #ffa24a, #f06a0c);
        color: #fff;
        font-size: clamp(17px, 1.3vw, 23px);
        box-shadow: 0 6px 14px rgba(240, 106, 12, .4);
    }

    #tsHero .ts-expert-chip .text-center {
        display: block;
        text-align: left;
    }

    #tsHero .ts-expert-chip .here {
        font-size: clamp(16px, 1.3vw, 23px);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: .6px;
        text-transform: uppercase;
        text-align: left;
        color: #e8650a;
    }

    #tsHero .ts-expert-chip .exp {
        display: block;
        margin-top: 3px;
        font-size: clamp(12.5px, .95vw, 16px);
        font-weight: 600;
        line-height: 1.2;
        color: #0d2238;
    }
}

/* phones: the icon would crowd the one-line chip */
@media (max-width: 767px) {
    #tsHero .ts-expert-chip .ts-expert-ic {
        display: none;
    }

}

/* co-development stepper is hidden (index.html), so the slide 2 copy no
   longer needs to clear its 214-290px column */
@media (min-width: 768px) {
    #tsHero .ts-hero-shell .ts-hero-content {
        padding-left: 15px;
    }
}

/* slide 2 plant: fill the whole hero box at every desktop size instead of
   the width-fit strip, anchored bottom-right where the reactors are, so the
   plant grows with the screen (taller screens no longer show a band of
   empty sky above it) */
@media (min-width: 768px) {
    .ts-hero-carousel .ts-hero-shell .ts-hero-bg img {
        top: 0;
        bottom: 0;
        height: 100%;
        object-fit: cover;
        object-position: 78% bottom;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* 768-1279: keep the art standing on the bottom bar */
@media (min-width: 768px) and (max-width: 1279px) {
    .ts-hero-carousel .ts-hero-shell .ts-hero-bg img {
        bottom: auto;
        height: calc(100% - 84px);
        /* narrow plant column: push the reactors right, out from under the copy */
        object-position: 55% bottom;
    }
}

/* ==========================================================
   Homepage typography scale (2026-10-22)
   H1 48-56/32-38 | H2 34-40/26-32 | H3 20-24/19-22 | body 16-18/16 | helper 14
   Font family unchanged (Barlow). Scoped to the homepage only.
   ========================================================== */
/* Both hero headings share one style and one fluid size (~30px at 1024, ~41px at
   1400, capped at 46px so slide 2's longer line still ends before the reactors).
   Upright 800 weight like slide 1; the coloured words stay italic
   (slide 1 <em>better</em>, slide 2 "NexGen" / "and"). */
body.index-page .ts1-title,
body.index-page .ts-hero-shell .ts-hero-content .ts-nexgen-title {
    font-size: clamp(28px, 2.9vw, 46px) !important;
    font-weight: 800 !important;
    font-style: normal !important;
    line-height: 1.08 !important;
    letter-spacing: -.5px !important;
    margin: 0 0 6px !important;
}

body.index-page .ts-hero-shell .ts-hero-content .ts-nexgen-title {
    gap: 0 !important;
}

body.index-page .ts-hero-shell .ts-nexgen-title .nx-bar {
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: normal !important;
    letter-spacing: inherit !important;
}

body.index-page .ts-hero-shell .ts-nexgen-title :is(.nx-ng, .nx-and) {
    font-style: italic !important;
}

/* italic word next to an upright one: a hair of room so the slant does not touch it */
body.index-page .ts-hero-shell .ts-nexgen-title :is(.nx-ng, .nx-and),
body.index-page .ts1-title em {
    margin-right: .1em;
}

body.index-page .ts1-sub,
body.index-page .ts-hero-content .lead {
    font-size: clamp(15px, 1.25vw, 18px) !important;
}

body.index-page .ts-hero-note {
    font-size: 14px !important;
}

/* slide-2 sidebar (award text + feature cards): sidebar scale on desktop, body size once stacked */
body.index-page .ts-side .ts-award p,
body.index-page .ts-side .ts-feature p {
    font-size: 15px !important;
}

body.index-page .cred-main-title {
    font-size: 30px !important;
    font-weight: 700 !important;
}

body.index-page #tech-suite .tech-suite-title,
body.index-page #positioning .tech-suite-title,
body.index-page .investor-dialogue-section .tech-suite-title {
    font-size: 30px !important;
    font-weight: 700 !important;
}

body.index-page .reactor-section h3,
body.index-page #hotels h3 {
    font-size: 30px !important;
    font-weight: 700 !important;
}

body.index-page .cf-card__title,
body.index-page .reactor-section h4 {
    font-size: 22px !important;
    font-weight: 600 !important;
}

body.index-page .custom-accordion .accordion-button {
    font-size: 20px !important;
    font-weight: 600 !important;
}

body.index-page .modal-title {
    font-size: 22px !important;
}

body.index-page #main p,
body.index-page #main li {
    font-size: 17px !important;
}

body.index-page #main .cred-subtitle,
body.index-page #main .reactor-section h6,
body.index-page #main .tech-suite-quote {
    font-size: 18px !important;
}

body.index-page #main p.small {
    font-size: 14px !important;
}

@media (max-width: 991px) {
    body.index-page .cred-main-title {
        font-size: 28px !important;
    }

    body.index-page #tech-suite .tech-suite-title,
    body.index-page #positioning .tech-suite-title,
    body.index-page .investor-dialogue-section .tech-suite-title,
    body.index-page .reactor-section h3,
    body.index-page #hotels h3 {
        font-size: 28px !important;
    }

    body.index-page .cf-card__title,
    body.index-page .reactor-section h4,
    body.index-page .modal-title {
        font-size: 21px !important;
    }

    body.index-page .ts-side .ts-award p,
    body.index-page .ts-side .ts-feature p {
        font-size: 16px !important;
    }
}

@media (max-width: 767px) {

    body.index-page .ts1-title,
    body.index-page .ts-hero-shell .ts-hero-content .ts-nexgen-title {
        font-size: clamp(28px, 6vw, 30px) !important;
    }

    body.index-page .ts1-sub,
    body.index-page .ts-hero-content .lead {
        font-size: 16px !important;
    }

    body.index-page .cred-main-title {
        font-size: 24px !important;
    }

    body.index-page #tech-suite .tech-suite-title,
    body.index-page #positioning .tech-suite-title,
    body.index-page .investor-dialogue-section .tech-suite-title,
    body.index-page .reactor-section h3,
    body.index-page #hotels h3 {
        font-size: 24px !important;
    }

    body.index-page .cf-card__title,
    body.index-page .reactor-section h4,
    body.index-page .modal-title {
        font-size: 20px !important;
    }

    body.index-page .custom-accordion .accordion-button {
        font-size: 19px !important;
    }

    body.index-page #main p,
    body.index-page #main li,
    body.index-page #main .cred-subtitle,
    body.index-page #main .reactor-section h6,
    body.index-page #main .tech-suite-quote,
    body.index-page .modal li {
        font-size: 16px !important;
    }

    body.index-page #main p.small {
        font-size: 14px !important;
    }
}

/* Slide 2 headline: sized from the BANNER's width, not the screen's. The
   sidebar keeps a fixed width, so the banner shrinks much faster than the
   viewport and a vw-sized title grew from ~44% of the banner at 1920 to ~75%
   at 1024, landing on the towers. cqi keeps it at the same share everywhere. */
@media (min-width: 768px) {
    :root body.index-page #tsHero .ts-hero-shell .ts-hero {
        container-type: inline-size;
    }

    :root body.index-page #tsHero .ts-hero-shell .ts-hero-content .ts-nexgen-title {
        font-size: clamp(22px, 3.6cqi, 46px) !important;
    }
}

/* Slide 2 lead box: same idea as the headline above. It was a fixed 380px at
   every size, so on a narrow banner it covered the towers. */
@media (min-width: 768px) {
    :root body.index-page #tsHero .ts-hero-shell .ts-hero-content .v2-lead {
        max-width: min(370px, 40cqi);
        font-size: clamp(12px, 2cqi, 16px);
    }
}

/* Slide 2 plant (>=992px): the art is 16:9 and its tower tops sit only ~3%
   below its top edge. Drawn at the banner's full width, a banner wider than
   16:9 (1600-1920, most of all while slide 2 opens full width before the
   sidebar slides in) made it taller than the space above the bottom bar, so
   the towers lost their tops - or, cropped from the bottom, the dome and the
   base. Fit it to the HEIGHT above the bar instead (wider only while the
   sidebar is closed, below), anchor it right and fade its left edge into the
   sky gradient. On a banner narrower than the box the width caps it and
   cover trims a little off the sides. All reactor frames (R101-R103) share
   this rule, so the Power On cross-fade stays aligned. */
@media (min-width: 992px) {
    :root body.index-page .ts-hero-carousel .ts-hero-shell .ts-hero-bg img {
        top: auto;
        bottom: 55px;
        left: auto;
        right: 0;
        height: calc(100% - 82px);
        width: auto;
        max-width: 100%;
        object-fit: cover;
        object-position: 55% 72%;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%),
            linear-gradient(to right, transparent 0, #000 14%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to bottom, transparent 0, #000 4%),
            linear-gradient(to right, transparent 0, #000 14%);
        mask-composite: intersect;
    }

    /* slide 2 opens with the banner alone (.v2-side-closed): the banner is
       full width, so widen the box to 2.4:1 and the plant fills it. Once the
       TECH SUITE sidebar slides in the banner narrows by ~320px and that size
       ran under the copy (R-102's top hid behind the eyebrow), so every other
       state keeps the art's own 16:9 at the height above the bar. */
    :root body.index-page .ts-hero-carousel.v2-side-closed .ts-hero-shell .ts-hero-bg img {
        aspect-ratio: 2.4;
    }

    /* what shows left of the faded edge: the art's own left column top to
       bottom (light sky, haze, then road grey) instead of the flat grey-blue */
    :root body.index-page .ts-hero-carousel .ts-hero-shell .ts-hero-bg {
        background: linear-gradient(180deg, #bcd8f2 0%, #dbe9f7 40%, #d6e4f1 66%,
                #b9c6d2 78%, #9ea8b1 88%, #9ea8b1 100%);
    }
}

/* Slide 1 plant (>=992px): cover-fitted at the full banner width and
   anchored to the bottom, the 16:9 art grew far taller than the banner and
   lost ~300px off the top - the tower tops. Same fit as slide 2 with its
   sidebar closed: a 2.4:1 box at the banner's height, anchored right, so
   cover trims only empty sky and some road; left edge faded into the same
   sky gradient. */
@media (min-width: 992px) {
    :root body.index-page .ts-hero-carousel .ts1-bg {
        inset: 0 0 0 auto;
        height: 100%;
        width: auto;
        aspect-ratio: 2.4;
        max-width: 100%;
        object-fit: cover;
        object-position: 70% 72%;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%),
            linear-gradient(to right, transparent 0, #000 14%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to bottom, transparent 0, #000 4%),
            linear-gradient(to right, transparent 0, #000 14%);
        mask-composite: intersect;
    }

    :root body.index-page .ts-hero-carousel .ts1 {
        background: linear-gradient(180deg, #bcd8f2 0%, #dbe9f7 40%, #d6e4f1 66%,
                #b9c6d2 78%, #9ea8b1 88%, #9ea8b1 100%);
    }
}

/* <=991px: the headline lines wrap ("Faster path to better | reactor"), and
   Chrome draws the backdrop blur of a line split over two rows on top of the
   second row's text, so "reactor" came out blurred. Drop the blur there; the
   frosted tint stays. */
@media (max-width: 991px) {

    :root body.index-page .ts1 .ts1-title .ts1-line,
    :root body.index-page .ts-hero-shell .ts-hero-content .ts-nexgen-title .nx-bar {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* <=767px: both slide headlines read as exactly two lines.
   Slide 1 "Faster path to better reactor" | "and technology solutions."
   (its first <br> comes back; the other one stays hidden so the last two
   spans share line 2). Slide 2 "NexGen Reactor, Technology" |
   "and Plant Design" (one .nx-bar each). Each strip stays on one row and
   the size follows the viewport, so the longest line (~15em with its
   padding) still fits a 320px phone. */
@media (max-width: 767px) {

    body.index-page .ts-hero-carousel .ts1-title,
    body.index-page .ts-hero-shell .ts-hero-content .ts-nexgen-title {
        font-size: clamp(17px, 5.5vw, 30px) !important;
    }

    /* slide 1's longest line is narrower than slide 2's, so it can be larger */
    :root body.index-page .ts-hero-carousel .ts1 .ts1-title {
        font-size: clamp(20px, 7vw, 30px) !important;
    }

    :root body.index-page .ts1 .ts1-title .ts1-line,
    :root body.index-page .ts-hero-shell .ts-hero-content .ts-nexgen-title .nx-bar {
        white-space: nowrap;
    }

    .ts-hero-carousel .ts1-title br:first-of-type {
        display: inline;
    }
}

/* <=767px: TECH SUITE card - title, then one button ("Explore Tech Suite")
   that opens, in one box over the banner, a copy of the desktop sidebar copy
   (typed out like desktop) and of the co-development flow. The drawer grows
   from 0fr to 1fr so the open is a smooth expand. Desktop never shows
   .v2-m-card. */
@media (max-width: 767px) {

    /* above the platform pill, title and dots, so an open drawer covers them.
       Full width, square corners. Badge on the left across both rows; right:
       title + power button, then the two buttons */
    :root .v2-m-card {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        width: 100%;
        margin: 0 0 4px;
        padding: 12px 16px;
        border: 0;
        border-bottom: 1px solid #e3eaf5;
        border-radius: 0;
        z-index: 20;
    }

    /* the platform pill carries z-index 998 (custom.css); keep it under the card */
    :root body.index-page #tsHero .ts-hero .slider-top-content {
        z-index: 5;
    }

    :root .v2-m-card .v2-m-card-ic {
        flex: none;
        width: 64px;
    }

    :root .v2-m-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    /* the sidebar's brand lockup (index.css .tsb-*), sized for the card */
    :root .ts-hero-shell .v2-m-brand {
        position: relative;
        display: inline-flex;
        align-items: flex-start;
        line-height: 1;
        font-weight: 800;
        font-size: 18px;
        letter-spacing: .5px;
        padding-bottom: 14px;
        white-space: nowrap;
    }

    :root .ts-hero-shell .v2-m-brand .tsb-the {
        font-size: 19px;
        margin-right: 5px;
    }

    :root .ts-hero-shell .v2-m-brand .tsb-suite {
        margin-left: 5px;
    }

    :root .ts-hero-shell .v2-m-brand .tsb-tm {
        font-size: 10px;
    }

    :root .ts-hero-shell .v2-m-brand .tsb-platform {
        font-size: 10px;
        letter-spacing: 3px;
    }

    /* same button (and handler) as the sidebar's, sized for the card */
    :root .ts-hero-shell .v2-m-card .v2-m-pwr {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
    }

    /* white disc inside the orange ring, as on the sidebar button */
    :root .ts-hero-shell .v2-m-card .v2-m-pwr .btn-icon-circle {
        width: 26px;
        height: 26px;
    }

    :root .ts-hero-shell .v2-m-card .v2-m-pwr svg {
        width: 18px;
        height: 18px;
    }

    :root .v2-m-btns {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 8px;
    }

    :root .v2-m-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 9px 6px;
        border: 1.5px solid #f2751a;
        border-radius: 10px;
        background: #fff;
        color: #f2751a;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        transition: background .25s ease, color .25s ease;
    }

    :root .v2-m-btn[aria-expanded="true"] {
        background: #f2751a;
        color: #fff;
    }

    :root .v2-m-btn i {
        font-size: 11px;
        transition: transform .3s ease;
    }

    :root .v2-m-btn[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

    /* the drawer opens OVER the banner (title, copy, plant), hanging from the
       card's bottom edge, instead of pushing the banner down */
    :root .v2-m-drawer {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 6;
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        visibility: hidden;
        transition: grid-template-rows .5s cubic-bezier(.22, 1, .36, 1), opacity .35s ease,
            visibility 0s linear .5s;
    }

    :root .v2-m-drawer.is-open {
        grid-template-rows: 1fr;
        opacity: 1;
        visibility: visible;
        transition: grid-template-rows .5s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, visibility 0s;
    }

    /* one box: the sidebar copy with the co-development flow on its right,
       two equal columns, shown in full - the slider script grows the banner to hold it */
    :root .v2-m-drawer-in {
        min-height: 0;
        overflow: hidden;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        border-radius: 12px;
        box-shadow: 0 14px 34px rgba(10, 25, 45, .3);
    }

    /* sidebar copy: the blue panel at its phone size */
    :root .ts-hero-shell .v2-m-drawer .v2-panel {
        --v2-fs: 13px;
        height: 100%;
        overflow: visible;
        border: 0;
        border-radius: 0;
        padding: 12px;
    }

    /* the desktop panel shares spare height out between its blocks; here
       they keep their own height and stack from the top */
    :root .ts-hero-shell .v2-m-drawer .v2-panel,
    :root .ts-hero-shell .v2-m-drawer .v2-feats {
        justify-content: flex-start;
    }

    :root .ts-hero-shell .v2-m-drawer .v2-panel>*,
    :root .ts-hero-shell .v2-m-drawer .v2-feat {
        flex: 0 0 auto;
    }

    /* flow: the column's dotted ground, always "open", centred */
    :root .ts-hero-shell .v2-m-part-eco {
        background:
            radial-gradient(circle, rgba(15, 29, 61, .09) 1px, transparent 1.3px) 0 0 / 14px 14px,
            linear-gradient(180deg, #f7faff 0%, #eef4fc 100%);
    }

    /* column right of the copy, with a 34px gutter for the chevrons */
    :root .ts-hero-shell .v2-m-drawer .v2-flow-in {
        width: 100%;
        height: auto;
        align-content: start;
        grid-template-columns: minmax(0, 1fr) 20px;
        padding: 12px 34px 12px 8px;
        opacity: 1;
        transform: none;
        visibility: visible;
        transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
    }

    /* slide 2 sequence: the flow waits until the copy beside it has typed,
       then slides in */
    :root #tsHero.v2-m-eco-wait .v2-m-drawer .v2-flow-in {
        opacity: 0;
        transform: translateX(24px);
        transition: none;
    }

    :root .ts-hero-shell .v2-m-drawer .v2-tap {
        right: -32px;
        width: 28px;
    }

    /* compact flow, as on a short laptop: smaller party cards, and a
       shorter Tech Suite core with no icon, just its vertical name */
    :root .ts-hero-shell .v2-m-drawer .v2-flow-in {
        grid-template-rows: auto 22px 130px 22px auto auto;
    }

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

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

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

    :root .ts-hero-shell .v2-m-drawer .v2-suite {
        width: 58px;
        justify-content: center;
        padding: 8px 0;
        border-radius: 14px;
    }

    :root .ts-hero-shell .v2-m-drawer .v2-suite-ic {
        display: none;
    }

    /* like desktop, the card runs into the chevron gutter (8px gap each side)
       and its lines may wrap */
    :root .ts-hero-shell .v2-m-drawer .v2-found {
        margin-right: -26px;
        padding: 10px 6px;
        overflow-wrap: anywhere;
    }
}

/* wider phones: the desktop copy size */
@media (min-width: 520px) and (max-width: 767px) {
    :root .ts-hero-shell .v2-m-drawer .v2-panel {
        --v2-fs: 15px;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    :root .v2-m-drawer {
        transition: none;
    }
}

/* <=767px: no award badge beside the panel's opening paragraph (the TECH
   SUITE card already shows it); the paragraph takes the full width. The
   three feature points lose their icon and card box too: plain paragraphs. */
@media (max-width: 767px) {

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

    :root .ts-hero-shell .v2-feat {
        display: block;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
    }
}

/* <=767px: while the TECH SUITE drawer is open the banner is taller than
   usual, and the dots / arrow (placed for its usual height) would land on
   the drawer - hide them until it closes */
@media (max-width: 767px) {

    #tsHero.ts-m-open .ts-hero-dots,
    #tsHero.ts-m-open .ts-hero-nav {
        display: none;
    }
}

/* <=767px: the Explore box copy - 12px, normal line height, justified
   (the "That simple shift..." pill keeps its centred line) */
@media (max-width: 767px) {
    :root body.index-page .ts-hero-shell .v2-m-drawer .v2-panel p:not(.v2-shift) {
        font-size: 12px;
    }
}