/* ===========================================================================
   Technology page - shared by every entry in src/technologies.json
   One stylesheet for all of them, scoped to .sts-technology, which the
   template puts on the page wrapper.
   =========================================================================== */

/* --------------------------------------------------------------- page ---- */
/* theme default is .site-content{padding-top:40px} - drop it so the hero
   starts flush against the header */
body.sts-technology-page .site-content {
    padding-top: 0;
    padding-bottom: 0;
}

/* --------------------------------------------------------------- hero ---- */
/* Same treatment as the service pages: the shared .sts-page-header supplies
   the layout, and only the overlay and the crop are set here. Scoped to this
   page type rather than page-header.css, so the other hero pages keep the
   shared overlay.

   180deg runs top-to-bottom: #000000B2 at the top fading to #00000029 at the
   bottom. Lighter at the foot than the service heroes, which end solid black
   - this artwork's glow sits low in the frame and a solid bottom would bury
   it. */
.sts-technology .sts-page-header .overlay {
    background-image: linear-gradient(180deg, #000000B2, #00000029);
}

/* The artwork is wider than it is tall and the hero is taller still, so
   object-cover crops the sides. Centring keeps the glowing mark in frame at
   every width - unlike the services hero, where the subject sits high and the
   crop is anchored to the top. */
.sts-technology .sts-page-header .entry-thumbnail img {
    object-fit: cover;
    object-position: center center;
}

/* Headings render capitalised rather than uppercase. The H1 carries the
   theme's .uppercase utility in the markup, so this overrides it - (0,3,0)
   against that class's (0,1,0), so it wins wherever the theme sheet loads. */
.sts-technology .sts-page-header .entry-title {
    text-transform: capitalize;
}

/* ===========================================================================
   Section rhythm
   =========================================================================== */
.sts-technology .sts-element.sts-element-tc-what,
.sts-technology .sts-element.sts-element-tc-svc {
    --display: flex;
    --flex-direction: column;
    --gap: 26px 26px;
    --row-gap: 26px;
    --column-gap: 26px;
    --overflow: hidden;
    --padding-top: 110px;
    --padding-bottom: 110px;
}

/* The two sections share the band, so the space between them is one gap
   rather than two stacked paddings - 220px would have pushed the carousel
   clear of the artwork it is meant to sit on. The carousel track already
   carries 100px of its own headroom for the lifted card. */
.sts-technology .sts-element.sts-element-tc-what { --padding-bottom: 0px; }
.sts-technology .sts-element.sts-element-tc-svc { --padding-top: 150px; }

/* ===========================================================================
   The mountain band
   One backdrop behind the intro, the three points and the carousel. It sits on
   this wrapper rather than on a container so it reads as a single landscape,
   and so the sections inside can be spaced without cutting it into pieces.
   =========================================================================== */
.sts-technology .sts-tech-band {
    position: relative;
    background-image: url("../images/mountain.webp");
    background-position: center 58%;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

/* ===========================================================================
   What Is React.js (.sts-what-top / .sts-whys)
   Heading left, copy right, then three supporting points across the bottom
   over a mountain backdrop.
   =========================================================================== */
/* the heading column is wider than the copy column, and the copy sits at the
   top of its column rather than centred against a much taller heading */
.sts-technology .sts-what-top {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: 70px;
    width: 100%;
}

.sts-technology .sts-element.sts-element-tc-what-h .states-side-heading {
    font-size: clamp(36px, 5.2vw, 72px);
    line-height: 1.02;
    text-align: start;
    text-transform: capitalize;
    white-space: normal;
}

/* the second half of the heading drops back, so the first line reads as the
   subject and the rest as the qualifier */
.sts-technology .sts-what-h__muted { color: #FFFFFF59; }

.sts-technology .sts-element.sts-element-tc-what-b .states-side-heading {
    text-align: start;
    white-space: normal;
}

.sts-technology .sts-element.sts-element-tc-what-b .sts-prose p {
    color: #FFFFFF99;
    font-size: 15px;
    line-height: 1.7;
}

/* ---- the three supporting points ---- */
/* the gap is large because the backdrop needs room to read between the copy
   above and the points below */
.sts-technology .sts-whys {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 40px;
    width: 100%;
    margin-top: 130px;
}

.sts-technology .sts-why {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sts-technology .sts-why__title {
    color: #ffffff;
    font-size: clamp(21px, 1.85vw, 28px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.01em;
    text-transform: capitalize;
}

.sts-technology .sts-why__sub {
    color: #ffffff;
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 500;
    line-height: 1.4;
}

.sts-technology .sts-why__text {
    margin-top: 20px;
    color: #FFFFFF80;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.7;
}

/* ===========================================================================
   Services carousel - auto-scrolling, drag-to-browse
   Same widget and treatment as the service pages' services block.
   =========================================================================== */
.sts-technology .sts-element.sts-element-tc-svc-car {
    width: 100%;
    margin-top: 16px;
}

/* The active card lifts 86px, so the track carries 100px of top padding or
   overflow:hidden clips its raised edge.
   That padding is NOT cancelled with a negative margin: doing so pulls the
   headroom up into the heading above, and the lifted card then rises over the
   heading instead of into reserved space. The bottom padding is only there for
   the hover lift, so that one is cancelled. */
.sts-technology .sts-svc-swiper {
    overflow: hidden;
    cursor: grab;
    padding-top: 100px;
    padding-bottom: 24px;
    margin-bottom: -24px;
}

.sts-technology .sts-svc-swiper:active { cursor: grabbing; }

.sts-technology .sts-svc-slide { height: auto; }

.sts-technology .sts-svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
    padding: 34px 30px 38px;
    border-radius: 20px;
    background-color: rgba(26, 26, 26, .72);
    border: 1px solid #FFFFFF4D;
    overflow: hidden;
    transition: border-color .4s ease, transform .4s ease;
}

/* brand gradient fades in behind the copy, as on the services page cards */
.sts-technology .sts-svc-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(204.03% 102.75% at 50.17% 0%, #000000 44.82%, #C83C00 82.29%, #F67300 90.48%, #FAE5B4 100%);
    transition: opacity .45s ease;
    pointer-events: none;
    z-index: 0;
}

.sts-technology .sts-svc-card > * { position: relative; z-index: 1; }

.sts-technology .sts-svc-card:hover { border-color: #FFFFFF80; transform: translateY(-8px); }

.sts-technology .sts-svc-card:hover::after { opacity: 1; }

.sts-technology .sts-svc-card__num {
    color: var(--color-primary, #f25b09);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1;
    transition: color .4s ease;
}

.sts-technology .sts-svc-card:hover .sts-svc-card__num { color: #ffffff; }

.sts-technology .sts-svc-card__icon { display: inline-flex; color: #ffffff; }

.sts-technology .sts-svc-card__icon svg { width: 42px; height: 42px; }

.sts-technology .sts-svc-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding-top: 34px;
}

.sts-technology .sts-svc-card__title {
    color: #ffffff;
    font-size: clamp(17px, 1.25vw, 21px);
    font-weight: 500;
    line-height: 1.3;
    text-transform: capitalize;
}

.sts-technology .sts-svc-card__text {
    color: #FFFFFF99;
    font-size: 14px;
    line-height: 1.65;
    transition: color .4s ease;
}

.sts-technology .sts-svc-card:hover .sts-svc-card__text { color: #FFFFFFD9; }

/* the border sits above the gradient, so the active card keeps a defined edge
   rather than bleeding into the section behind it */
.sts-technology .sts-svc-card::after { z-index: 0; }

/* --------------------------------------------- carousel: active slide -- */
/* With centered-slides the middle card is the active one, and it carries the
   brand gradient permanently; the flanking cards stay muted until hovered.
   The slider also sets initial-slide="1" so card 02 opens in the centre and
   card 01 sits to its left - centring on card 01 instead would pull the loop
   clone of the last card in on the left, opening the list on 11. */
.sts-technology .sts-svc-slide { transition: opacity .45s ease; }

.sts-technology .sts-svc-slide:not(.swiper-slide-active) { opacity: .45; }

.sts-technology .swiper-slide-active .sts-svc-card::after { opacity: 1; }

.sts-technology .swiper-slide-active .sts-svc-card {
    border-color: #FFFFFF66;
    transform: translateY(-86px);
}

.sts-technology .swiper-slide-active .sts-svc-card__num { color: #ffffff; }

.sts-technology .swiper-slide-active .sts-svc-card__text { color: #FFFFFFD9; }

/* drag cursor over the track, replacing the pointer */
.states-side-hover-cursor__tc-svc-car {
    --icon-position: column;
    --content-vertical-alignment: center;
    --text-align: center;
}

.states-side-hover-cursor__tc-svc-car .states-side-hover-cursor__icon {
    width: 74px;
    height: 74px;
    color: #ffffff;
    background-color: rgba(255, 255, 255, .12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
    .sts-technology .sts-svc-card,
    .sts-technology .sts-svc-card::after,
    .sts-technology .sts-svc-slide { transition: none; }
    .sts-technology .sts-svc-card:hover,
    .sts-technology .swiper-slide-active .sts-svc-card { transform: none; }
}

/* ---------------------------------------------------------------- tablet -- */
@media (max-width: 1024px) {
    .sts-technology .sts-what-top { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .sts-technology .sts-whys { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 80px; }
    .sts-technology .sts-tech-band { background-size: 160% auto; }
}

@media (max-width: 767px) {
    .sts-technology .sts-element.sts-element-tc-what,
    .sts-technology .sts-element.sts-element-tc-svc {
        --padding-top: 64px;
        --padding-bottom: 64px;
    }
    .sts-technology .sts-element.sts-element-tc-what { --padding-bottom: 0px; }
    .sts-technology .sts-element.sts-element-tc-svc { --padding-top: 80px; }
    .sts-technology .sts-whys { margin-top: 56px; }
    .sts-technology .sts-tech-band { background-size: 220% auto; }
}

/* ===========================================================================
   Comparison band
   Centred copy over its own glow. The artwork is a soft orange wash in the
   lower left, so the section is sized generously and the background is
   anchored to the bottom - cropping it to the middle would lose the glow
   entirely.
   =========================================================================== */
.sts-technology .sts-element.sts-element-tc-vs {
    --display: flex;
    --flex-direction: column;
    --gap: 26px 26px;
    --row-gap: 26px;
    --column-gap: 26px;
    --overflow: hidden;
    --padding-top: 130px;
    --padding-bottom: 150px;
}

.sts-technology .sts-element.sts-element-tc-vs:not(.sts-motion-effects-element-type-background),
.sts-technology .sts-element.sts-element-tc-vs > .sts-motion-effects-container > .sts-motion-effects-layer {
    background-image: url("../images/section-bg.webp");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.sts-technology .sts-element.sts-element-tc-vs-h .states-side-heading {
    font-size: clamp(36px, 5.2vw, 80px);
    line-height: 1.04;
    text-align: center;
    white-space: normal;
}

.sts-technology .sts-vs-prose {
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
}

.sts-technology .sts-vs-prose p {
    color: #ffffff;
    font-size: clamp(19px, 2.4vw, 36px);
    /* tighter than body copy: at 36px the default leading opens gaps wide
       enough to break the block into separate lines rather than a paragraph */
    line-height: 1.4;
}

.sts-technology .sts-vs-prose p + p { margin-top: 34px; }

/* The reveal dims each word until the section scrolls through. The dimming
   lives on the split words rather than the paragraph, so the brightening can
   run word by word; if the script never runs there are no word elements and
   the copy stays at full strength. */
.sts-technology .sts-vs-prose [data-sts-word] { opacity: .32; }

@media (prefers-reduced-motion: reduce) {
    .sts-technology .sts-vs-prose [data-sts-word] { opacity: 1 !important; }
}

@media (max-width: 767px) {
    .sts-technology .sts-element.sts-element-tc-vs {
        --padding-top: 72px;
        --padding-bottom: 84px;
    }
    .sts-technology .sts-vs-prose p + p { margin-top: 20px; }
}

/* ===========================================================================
   Stack section - copy left, rotating badge ring right
   =========================================================================== */
.sts-technology .sts-element.sts-element-tc-stack {
    --display: flex;
    --flex-direction: column;
    --gap: 26px 26px;
    --row-gap: 26px;
    --column-gap: 26px;
    --overflow: hidden;
    --padding-top: 120px;
    --padding-bottom: 120px;
}

/* the ring is positioned against the section, so the copy has the row to
   itself and simply stops short of it */
.sts-technology .sts-stack {
    position: relative;
    z-index: 1;
    width: 100%;
}

.sts-technology .sts-stack__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    max-width: 850px;
}

.sts-technology .sts-element.sts-element-tc-stack-h .states-side-heading {
    font-size: clamp(36px, 5.6vw, 80px);
    line-height: 1.02;
    text-align: start;
    white-space: normal;
}

.sts-technology .sts-stack__intro {
    text-align: start;
    max-width: 460px;
    color: #FFFFFF99;
    font-size: 15px;
    line-height: 1.7;
}

/* ---------------------------------------------------------------- orbit -- */
/* The ring is anchored past the section's right and bottom edges so only its
   upper-left arc is in frame, and the section clips the rest.

   The offsets come from the reference: fitting a circle to its three badge
   centres puts the centre at about 90% of the width and 84% of the height,
   with a radius near 31% of the width. Expressed against --size that is a
   little over a third of the ring pushed out past each edge.

   It is positioned against the section rather than its grid cell, so it can
   run past the boxed container to the viewport edge. */
.sts-technology .sts-element.sts-element-tc-stack:not(.sts-motion-effects-element-type-background),
.sts-technology .sts-element.sts-element-tc-stack > .sts-motion-effects-container > .sts-motion-effects-layer {
    background-color: #FFFFFF0F;
}

.sts-technology .sts-element.sts-element-tc-stack {
    position: relative;
    min-height: clamp(520px, 46vw, 780px);
    /* the section's height is set by the ring, so without this the copy sits
       at the top with the reserved space empty beneath it */
    --justify-content: center;
    justify-content: center;
}

.sts-technology .sts-stack__orbit {
    --size: min(1160px, 63vw);
    --r: calc(var(--size) / 2);
    /* declared here rather than on the ring itself, so the badges can read it
       too - they sit on the band's centreline, which is half a band in from
       the outer edge */
    --band: calc(var(--size) * 0.145);
    /* 120px wherever the band is wide enough to hold it, and a share of the
       band below that. A fixed size with breakpoints left the badge wider
       than the band it sits on between roughly 900 and 1010px, because the
       ring scales with the viewport and the badge did not. */
    --badge: min(120px, calc(var(--band) * 0.95));
    position: absolute;
    right: calc(var(--size) * -0.595);
    bottom: calc(var(--size) * -0.615);
    width: var(--size);
    height: var(--size);
    pointer-events: none;
}

.sts-technology .sts-orbit {
    position: absolute;
    inset: 0;
    animation: sts-orbit-spin 46s linear infinite;
}

/* The band is a filled circle with a matching circle punched out of the middle
   by a mask. Two stacked circles would need the section's exact background
   behind the inner one, and this sits on the page backdrop rather than a flat
   colour. Thickness scales with the ring so it holds its proportion at every
   width.

   Drawn on the outer wrapper rather than as an element inside the spinning
   layer, for two reasons: the band stays still while the badges travel round
   it, and the badges get :nth-of-type slots 1-4. As a sibling span it took
   slot 1 itself, which left the last badge with no angle - an invalid var()
   drops the whole transform, and it landed dead centre. */
.sts-technology .sts-stack__orbit::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* one sweep between the two brand tones: brightest along the upper-right
       of the arc, falling away to the muted tone round the rest */
    background: conic-gradient(from 340deg,
        #8C35054D 0deg,
        #F25B09B2 48deg,
        #8C35054D 175deg,
        #8C35054D 360deg);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--band)), #000 calc(100% - var(--band)));
    mask: radial-gradient(farthest-side, #0000 calc(100% - var(--band)), #000 calc(100% - var(--band)));
}

/* Each badge is placed by rotating about the ring centre, then translating
   outward. At --a: 0 a badge sits at the foot of the circle and the angle runs
   clockwise, so these four are the reference's positions read back: the
   hexagon high on the right where the arc leaves frame, down to Tailwind at
   the far left. The mark counter-rotates by its own angle and by the parent's
   spin, so the logos stay upright the whole way round. */
.sts-technology .sts-orbit__badge {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--badge);
    height: var(--badge);
    margin: calc(var(--badge) / -2) 0 0 calc(var(--badge) / -2);
    transform: rotate(var(--a)) translateY(calc(var(--r) - var(--band) / 2)) rotate(calc(var(--a) * -1));
}

/* The trail: three copies of the badge circle at the positions it has just
   left, fading and shrinking.

   Each is placed the same way the badge is - walk in to the ring centre, turn
   by --d, walk back out - so it lands on the arc exactly, at the same radius,
   with no trigonometry. The orbit turns anticlockwise, so a positive --d is
   behind.

   They are real elements rather than pseudo-elements because the badge only
   has two of those and this needs three steps to read as motion rather than a
   pair of blobs. They are <i> so :nth-of-type counts only them, not the mark
   beside them, and empty so they carry no meaning of their own. */
.sts-technology .sts-orbit__ghost {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: #C83C00;
    pointer-events: none;
    z-index: -1;
    transform:
        rotate(var(--a))
        translateY(calc(var(--rr) * -1))
        rotate(var(--d))
        translateY(var(--rr))
        scale(var(--s));
}

.sts-technology .sts-orbit__ghost:nth-of-type(1) { --d: 5deg;  --s: .93; opacity: .40; }
.sts-technology .sts-orbit__ghost:nth-of-type(2) { --d: 11deg; --s: .83; opacity: .22; }
.sts-technology .sts-orbit__ghost:nth-of-type(3) { --d: 18deg; --s: .71; opacity: .10; }

@media (prefers-reduced-motion: reduce) {
    .sts-technology .sts-orbit__ghost { display: none; }
}

.sts-technology .sts-orbit__badge:nth-of-type(1) { --a: 189deg; }
.sts-technology .sts-orbit__badge:nth-of-type(2) { --a: 159deg; }
.sts-technology .sts-orbit__badge:nth-of-type(3) { --a: 129deg; }
.sts-technology .sts-orbit__badge:nth-of-type(4) { --a: 99deg; }
.sts-technology .sts-orbit__badge:nth-of-type(5) { --a: 69deg; }
.sts-technology .sts-orbit__badge:nth-of-type(6) { --a: 39deg; }
.sts-technology .sts-orbit__badge:nth-of-type(7) { --a: 9deg; }
.sts-technology .sts-orbit__badge:nth-of-type(8) { --a: 339deg; }
.sts-technology .sts-orbit__badge:nth-of-type(9) { --a: 309deg; }
.sts-technology .sts-orbit__badge:nth-of-type(10) { --a: 279deg; }
.sts-technology .sts-orbit__badge:nth-of-type(11) { --a: 249deg; }
.sts-technology .sts-orbit__badge:nth-of-type(12) { --a: 219deg; }

/* The sphere is drawn here rather than on the badge because this layer
   counter-rotates. Drop shadows are directional, and on the badge itself they
   would swing round with the orbit; here they keep pointing down.

   Fill, sheen and shadow stack are the reference values: #C83C00 under a white
   radial falling 20% to 0%, and six stacked drop shadows. */
.sts-technology .sts-orbit__mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background-color: #C83C00;
    background-image: radial-gradient(circle at 32% 22%, #FFFFFF33 0%, #FFFFFF00 72%);
    box-shadow:
        0 2.77px 2.21px #0000001F,
        0 3px 3px #00000024,
        0 12.52px 10.02px #00000022,
        0 22.34px 17.87px #00000024,
        0 41.78px 33.42px #00000026,
        0 100px 80px #00000026;
    animation: sts-orbit-spin-reverse 46s linear infinite;
}

.sts-technology .sts-orbit__mark svg {
    width: calc(var(--badge) * 0.45);
    height: calc(var(--badge) * 0.45);
}

/* anticlockwise, with the marks turning the opposite way by the same amount
   so they stay upright */
@keyframes sts-orbit-spin {
    to { transform: rotate(-360deg); }
}

@keyframes sts-orbit-spin-reverse {
    to { transform: rotate(360deg); }
}

/* the plain-text list is for assistive tech and for the widths where the ring
   is hidden; it never shows alongside the ring */
.sts-technology .sts-stack__list {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (prefers-reduced-motion: reduce) {
    .sts-technology .sts-orbit,
    .sts-technology .sts-orbit__mark { animation: none; }
}

/* ---------------------------------------------------------------- tablet -- */
@media (max-width: 900px) {
    .sts-technology .sts-element.sts-element-tc-stack { min-height: 0; }
    .sts-technology .sts-stack__copy { max-width: 100%; }
    .sts-technology .sts-stack__intro { max-width: 100%; }
    /* below this the ring has no room to read as an arc, so the badges become
       a plain list rather than a cropped fragment */
    .sts-technology .sts-stack__orbit { display: none; }
    .sts-technology .sts-stack__list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 26px;
        color: #FFFFFF99;
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .sts-technology .sts-element.sts-element-tc-stack {
        --padding-top: 72px;
        --padding-bottom: 72px;
    }
}

/* ===========================================================================
   Why Choose Stateside - hover tabs
   Same widget as the service pages, styled for this page: centred heading,
   numbered rows on the left, artwork and its caption on the right.
   =========================================================================== */
.sts-technology .sts-element.sts-element-tc-why {
    --display: flex;
    --flex-direction: column;
    --gap: 26px 26px;
    --row-gap: 26px;
    --column-gap: 26px;
    --overflow: hidden;
    --padding-top: 120px;
    --padding-bottom: 120px;
}

.sts-technology .sts-element.sts-element-tc-why-h .states-side-heading {
    font-size: clamp(32px, 3.9vw, 58px);
    line-height: 1.08;
    text-align: center;
    white-space: normal;
}

.sts-technology .sts-element.sts-element-tc-why-tabs {
    width: 100%;
    margin-top: 26px;
}

/* The theme starts the numbers at opacity 0 and reveals them on hover, while
   jumping margin-right from 24px to 91px - so the numbers were invisible and
   the titles slid sideways between rows. Fixed opacity and one fixed margin
   keeps all four showing and the titles still. */
.sts-technology .states-side-intro-hover-tabs__index,
.sts-technology .states-side-intro-hover-tabs__item.is-active .states-side-intro-hover-tabs__index,
.sts-technology .states-side-intro-hover-tabs__item:hover .states-side-intro-hover-tabs__index,
.sts-technology .states-side-intro-hover-tabs__accordion-item.is-active .states-side-intro-hover-tabs__index {
    opacity: 1;
    margin-right: 24px;
    /* the numbers read as headings here rather than as small labels, so they
       are sized against the row title instead of body copy */
    font-size: clamp(21px, 2.2vw, 32px);
    line-height: 1.1;
}

/* "01." rather than "01", as in the design */
.sts-technology .states-side-intro-hover-tabs__index::after { content: "."; }

.sts-technology .states-side-intro-hover-tabs__title {
    /* same scale as the number beside it, so the pair reads as one heading */
    font-size: clamp(21px, 2.2vw, 32px);
    font-weight: 500;
    line-height: 1.15;
}

/* the caption sits under the artwork, smaller and quieter than the rows */
/* the line that closes the section, under the tabs */
.sts-technology .sts-why-note {
    max-width: 760px;
    margin: 34px auto 0;
    text-align: center;
    color: #FFFFFF99;
    font-size: 15px;
    line-height: 1.7;
}

.sts-technology .states-side-intro-hover-tabs__description p {
    color: #FFFFFF8C;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 767px) {
    .sts-technology .sts-element.sts-element-tc-why {
        --padding-top: 72px;
        --padding-bottom: 72px;
    }
}

/* ===========================================================================
   FAQ - light band, pill cards
   Each row is its own card rather than a rule-separated list, and the open one
   carries the brand gradient. The theme's accordion JS only toggles .open, so
   everything here keys off that.
   =========================================================================== */
.sts-technology .sts-element.sts-element-tc-faq {
    --display: flex;
    --flex-direction: column;
    --gap: 26px 26px;
    --row-gap: 26px;
    --column-gap: 26px;
    --overflow: hidden;
    --padding-top: 110px;
    --padding-bottom: 110px;
}

.sts-technology .sts-element.sts-element-tc-faq:not(.sts-motion-effects-element-type-background),
.sts-technology .sts-element.sts-element-tc-faq > .sts-motion-effects-container > .sts-motion-effects-layer {
    background-color: #FFFFFF;
}

.sts-technology .sts-element.sts-element-tc-faq-h .states-side-heading {
    color: #000000;
    font-size: clamp(30px, 3.6vw, 54px);
    line-height: 1.1;
    text-align: center;
    white-space: normal;
}

/* the theme draws a divider on each item; these are cards, so it goes */

/* Size and leading are left to the theme, so this matches the home page FAQ
   exactly: .text-heading-2 on the title (16px) and .font-sm on the content
   (14px), both already in the markup. Only the colours are set here. */

/* the toggle is a + that becomes a - when the row opens */

/* only the vertical stroke turns, leaving the minus */

/* ===========================================================================
   Closing CTA
   =========================================================================== */
.sts-technology .sts-element.sts-element-tc-cta {
    --display: flex;
    --flex-direction: column;
    --gap: 22px 22px;
    --row-gap: 22px;
    --column-gap: 22px;
    --overflow: hidden;
    --padding-top: 130px;
    --padding-bottom: 130px;
}

.sts-technology .sts-element.sts-element-tc-cta-h .states-side-heading {
    font-size: clamp(38px, 5.4vw, 84px);
    line-height: 1.02;
    text-align: center;
    white-space: normal;
}

.sts-technology .sts-element.sts-element-tc-cta-b .states-side-heading {
    text-align: center;
    max-width: 620px;
    margin-inline: auto;
    color: #FFFFFF99;
    font-size: 15px;
    line-height: 1.7;
}

.sts-technology .sts-element.sts-element-tc-cta-btn { text-align: center; }

@media (max-width: 767px) {
    .sts-technology .sts-element.sts-element-tc-faq,
    .sts-technology .sts-element.sts-element-tc-cta {
        --padding-top: 72px;
        --padding-bottom: 72px;
    }
}