/* ===========================================================================
   Service page - shared by every entry in src/services.json
   One stylesheet for all of them: they are the same design, so a change here
   lands on every service page at once. Scoped to .sts-service, which the
   template puts on the page wrapper.
   =========================================================================== */

/* --------------------------------------------------------------- page ---- */
/* Two rules, as on the other pages: the WP page title <h1> sits OUTSIDE the
   .sts-service wrapper, so only the body-class rule reaches it. The hero H1 opts
   back in via page-header.css. */

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

/* --------------------------------------------------------------- hero ---- */
/* Scoped to this page rather than page-header.css, so the other hero pages
   keep the shared overlay.
   180deg runs top-to-bottom: #000000B2 at the top, solid #000000 at the
   bottom, so the hero's bottom-aligned heading and intro sit over the
   darkest part of the image. */
.sts-service .sts-page-header .overlay {
    background-image: linear-gradient(180deg, #000000B2, #000000);
}

/* The image is 1536x1024 in a much wider hero, so object-cover crops it top
   and bottom. Anchoring to the top slides the visible window up the image,
   which moves the picture itself down in frame. Tune with a percentage -
   0% is hard to the top, 50% is the default centre. */
.sts-service .sts-page-header .entry-thumbnail img {
    object-position: center top;
}

/* Headings render capitalised rather than uppercase. The H1 and the hover-tab
   titles carry the theme's .uppercase utility in the markup, so those are
   overridden here - the selectors are (0,3,0) and (0,2,0) against that class's
   (0,1,0), so they win wherever the theme stylesheet loads.
   The marquee keeps its uppercase: it is decorative texture, not a heading. */
.sts-service .sts-page-header .entry-title,
.sts-service .states-side-intro-hover-tabs__title {
    text-transform: capitalize;
}

/* ===========================================================================
   Shared section furniture
   =========================================================================== */
.sts-service .sts-element .states-side-heading:is(h2),
.sts-service h2.states-side-heading {
    font-size: clamp(30px, 4.2vw, 66px);
    line-height: 1.04;
    text-align: center;
    text-transform: capitalize;
    white-space: normal;
}

.sts-service .sts-note {
    text-align: center;
    white-space: normal;
    max-width: 760px;
    margin-inline: auto;
    color: #FFFFFF99;
    font-size: 15px;
    line-height: 1.65;
    margin-top: 6px;
}

.sts-service .sts-element.sts-element-sv-svc-b .states-side-heading,
.sts-service .sts-element.sts-element-sv-cost-b .states-side-heading,
.sts-service .sts-element.sts-element-sv-vs-b .states-side-heading,
.sts-service .sts-element.sts-element-sv-look-b .states-side-heading,
.sts-service .sts-element.sts-element-sv-cta-b .states-side-heading {
    text-align: center;
    white-space: normal;
    max-width: 760px;
    margin-inline: auto;
}

.sts-service .sts-element.sts-element-sv-why,
.sts-service .sts-element.sts-element-sv-svc,
.sts-service .sts-element.sts-element-sv-cost,
.sts-service .sts-element.sts-element-sv-vs,
.sts-service .sts-element.sts-element-sv-work,
.sts-service .sts-element.sts-element-sv-ind,
.sts-service .sts-element.sts-element-sv-look,
.sts-service .sts-element.sts-element-sv-faq,
.sts-service .sts-element.sts-element-sv-cta {
    --display: flex;
    --flex-direction: column;
    --gap: 26px 26px;
    --row-gap: 26px;
    --column-gap: 26px;
    --overflow: hidden;
    --padding-top: 110px;
    --padding-bottom: 110px;
}

/* ------------------------------------------------------------ cost tiers -- */
/* Same treatment as the About page's belief cards: a dark rounded card with a
   white pill header floating on top, carrying an orange numbered badge. */
.sts-service .sts-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    width: 100%;
    margin-top: 12px;
}

.sts-service .sts-tier {
    display: flex;
    flex-direction: column;
    padding: 0 0 30px;
    border-radius: 46px;
    background-color: #1a1a1a;
    border: 1px solid #FFFFFF29;
    transition: background-color .35s ease, border-color .35s ease;
}

.sts-service .sts-tier:hover {
    background-color: #212121;
    border-color: #FFFFFF3D;
}

/* the pill uses the theme's primary-button shadow so it reads as the same
   raised surface as the buttons elsewhere on the page */
.sts-service .sts-tier__header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 38px 14px 14px;
    border-radius: 999px;
    background-color: var(--color-snow-white, #ffffff);
    box-shadow: -5px -5px 5px 0px #62260052 inset, 8px -1px 14px 0px #FFFFFF3D inset;
}

.sts-service .sts-tier__num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: var(--color-primary, #f25b09);
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.sts-service .sts-tier__title {
    color: #000000;
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-transform: none;
}

.sts-service .sts-tier__text {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.65;
    padding: 26px 30px 0;
}

/* ------------------------------------------------------ native vs cross -- */
/* Two image-led cards. The photo sits behind a brand gradient so both options
   read as equally weighted, with the copy on the darker lower half. */
.sts-service .sts-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    width: 100%;
    margin-top: 12px;
}

.sts-service .sts-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid #FFFFFF29;
    background-color: #0d0d0d;
    transition: border-color .4s ease, transform .4s ease;
}

.sts-service .sts-choice:hover { border-color: #FFFFFF3D; transform: translateY(-6px); }

/* ---- media ---- */
.sts-service .sts-choice__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.sts-service .sts-choice__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.sts-service .sts-choice:hover .sts-choice__img { transform: scale(1.05); }

/* brand gradient over the photo - warmer on native, cooler on cross-platform */
.sts-service .sts-choice__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sts-service .sts-choice--native .sts-choice__media::after {
    background: linear-gradient(180deg,
        rgba(200, 60, 0, .30) 0%,
        rgba(13, 13, 13, .55) 55%,
        #0d0d0d 100%);
}

.sts-service .sts-choice--cross .sts-choice__media::after {
    background: linear-gradient(180deg,
        rgba(246, 115, 0, .28) 0%,
        rgba(13, 13, 13, .55) 55%,
        #0d0d0d 100%);
}

.sts-service .sts-choice__icon {
    position: absolute;
    left: 28px;
    bottom: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    color: #ffffff;
    background-color: rgba(255, 255, 255, .12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid #FFFFFF29;
}

.sts-service .sts-choice__icon svg { width: 28px; height: 28px; }

/* ---- copy ---- */
.sts-service .sts-choice__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 30px 34px;
}

.sts-service .sts-choice__title {
    color: #ffffff;
    font-size: clamp(18px, 1.4vw, 24px);
    font-weight: 500;
    line-height: 1.25;
    text-transform: capitalize;
}

.sts-service .sts-choice__text { color: #FFFFFF99; font-size: 15px; line-height: 1.65; }

.sts-service .sts-choice__points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.sts-service .sts-choice__points li {
    padding: 8px 14px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid #FFFFFF1F;
    color: #FFFFFFCC;
    font-size: 13px;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .sts-service .sts-choice,
    .sts-service .sts-choice__img { transition: none; }
    .sts-service .sts-choice:hover { transform: none; }
    .sts-service .sts-choice:hover .sts-choice__img { transform: none; }
}

/* ------------------------------------------------------------ how we work -- */
/* Same shape as the About page's Why Us block: a 2x2 grid of icon cards with a
   tall gradient panel alongside carrying the final step. */
/* mountain backdrop, as on the About page's Why Us section */
.sts-service .sts-element.sts-element-sv-work:not(.sts-motion-effects-element-type-background),
.sts-service .sts-element.sts-element-sv-work > .sts-motion-effects-container > .sts-motion-effects-layer {
    background-image: url("../images/mountain.webp");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
}

.sts-service .sts-work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc((100% - 36px) / 3);
    align-items: stretch;
    gap: 18px;
    width: 100%;
    margin-top: 12px;
}

.sts-service .sts-work-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.sts-service .sts-work-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 44px;
    padding: 30px 28px 34px;
    background-color: rgba(26, 26, 26, .7);
    border: 1px solid #FFFFFF29;
    border-radius: 14px;
    transition: background-color .35s ease, border-color .35s ease;
}

.sts-service .sts-work-card:hover {
    background-color: rgba(33, 33, 33, .82);
    border-color: #FFFFFF3D;
}

/* icon alone at the top; the copy block is pushed to the bottom by
   justify-content: space-between on the card */
.sts-service .sts-work-card__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #ffffff;
}

.sts-service .sts-work-card__icon svg { width: 38px; height: 38px; }

.sts-service .sts-work-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.sts-service .sts-work-card__title {
    color: #ffffff;
    font-size: clamp(17px, 1.2vw, 20px);
    font-weight: 500;
    line-height: 1.3;
    text-transform: capitalize;
}

.sts-service .sts-work-card__num,
.sts-service .sts-work-promo__num {
    margin-right: 10px;
    color: var(--color-primary, #f25b09);
}

.sts-service .sts-work-card__text {
    color: #FFFFFF99;
    font-size: 14px;
    line-height: 1.65;
    min-width: 0;
}

/* artwork panel: title pinned top, copy and button pushed to the bottom */
.sts-service .sts-work-promo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 36px 34px 38px;
    border-radius: 14px;
    border: 1px solid #FFFFFF29;
    overflow: hidden;
    position: relative;
    background-color: #000000;
    background-image: url("../images/card-bg.webp");
    /* the artwork is portrait and the panel is taller still, so cover crops
       the sides rather than the ring - centring keeps it in frame */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Two layers, painted top down:
   1. a flat 40% black knocking the artwork back overall;
   2. a vertical scrim. The artwork is already dark top and bottom, but only
      at its own aspect ratio - once cover crops it the falloff moves, so
      this holds the ends dark wherever the crop lands and keeps the title
      and the copy readable. */
.sts-service .sts-work-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, #00000066 0%, #00000066 100%),
        linear-gradient(180deg, #000000B8 0%, #00000000 26%, #00000000 58%, #000000E0 88%, #000000 100%);
    border-radius: inherit;
    z-index: 1;
}

.sts-service .sts-work-promo > * { position: relative; z-index: 2; }

.sts-service .sts-work-promo__title {
    color: #ffffff;
    font-size: clamp(20px, 1.6vw, 27px);
    font-weight: 500;
    line-height: 1.2;
    text-transform: capitalize;
}

.sts-service .sts-work-promo__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.sts-service .sts-work-promo__text { color: #FFFFFFCC; font-size: 15px; line-height: 1.6; }
.sts-service .sts-work-promo__btn { align-self: flex-start; }

/* ---------------------------------------------------------- check list -- */
/* dotted world map behind the section - the artwork is light, and this band
   is dark, so it drops straight in without inverting */
.sts-service .sts-element.sts-element-sv-look:not(.sts-motion-effects-element-type-background),
.sts-service .sts-element.sts-element-sv-look > .sts-motion-effects-container > .sts-motion-effects-layer {
    background-image: url("../images/earth-full.avif");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Pill-header cards: three across, then the last two centred beneath them.

   The track is six columns rather than three and every card spans two. Three
   equal columns cannot centre a two-card row - the pair would sit left, or
   need a spacer element. Halving the track lets row two start one half-column
   in (2-3 and 4-5) and land centred, with no empty markup. */
.sts-service .sts-checks {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    width: 100%;
    margin-top: 16px;
}

.sts-service .sts-check:nth-child(4) { grid-column: 2 / span 2; }
.sts-service .sts-check:nth-child(5) { grid-column: 4 / span 2; }

.sts-service .sts-check {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    padding: 0 0 30px;
    border-radius: 46px;
    background-color: #1a1a1a;
    border: 1px solid #FFFFFF29;
    transition: background-color .35s ease, border-color .35s ease;
}

.sts-service .sts-check:hover {
    background-color: #212121;
    border-color: #FFFFFF3D;
}

/* white pill carrying the orange badge and the question */
.sts-service .sts-check__header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 34px 14px 14px;
    border-radius: 999px;
    background-color: var(--color-snow-white, #ffffff);
    box-shadow: -5px -5px 5px 0px #62260052 inset, 8px -1px 14px 0px #FFFFFF3D inset;
}

.sts-service .sts-check__num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: var(--color-primary, #f25b09);
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.sts-service .sts-check__title {
    color: #000000;
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-transform: none;
}

.sts-service .sts-check__text {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.65;
    padding: 26px 30px 0;
}

/* Two across: four half-columns, so the odd card out still centres the same
   way row two does on desktop. */
@media (max-width: 1024px) {
    .sts-service .sts-checks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sts-service .sts-check:nth-child(4) { grid-column: span 2; }
    .sts-service .sts-check:nth-child(5) { grid-column: 2 / span 2; }
}

@media (max-width: 767px) {
    .sts-service .sts-checks { grid-template-columns: minmax(0, 1fr); }
    .sts-service .sts-check:nth-child(n) { grid-column: 1 / -1; }
    .sts-service .sts-check__header { gap: 16px; padding: 12px 26px 12px 12px; }
    .sts-service .sts-check__num { width: 50px; height: 50px; font-size: 20px; }
    .sts-service .sts-check__text { padding: 22px 24px 0; }
}

/* ------------------------------------------------------------------ faq -- */
.sts-service .sts-element.sts-element-sv-faq:not(.sts-motion-effects-element-type-background),
.sts-service .sts-element.sts-element-sv-faq > .sts-motion-effects-container > .sts-motion-effects-layer {
    background-color: #FFFFFF;
}

.sts-service .sts-element.sts-element-sv-faq-h .states-side-heading { color: #000000; }

/* The accordion runs the full content width rather than the home page's
   narrow 856px column, so the questions line up with the section heading and
   with every other band on the page. */
.sts-service .sts-element.sts-element-sv-faq-a {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.sts-service .states-side-accordion__title {
    color: #000000;
    font-size: clamp(16px, 1.2vw, 20px);
    line-height: 1.35;
}

.sts-service .states-side-accordion__content p {
    color: rgba(0, 0, 0, .68);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}

.sts-service .states-side-accordion__item.open .states-side-accordion__title,
.sts-service .states-side-accordion__item.open .states-side-accordion__content p { color: #ffffff; }

/* ------------------------------------------------------------- closing -- */
.sts-service .sts-element.sts-element-sv-cta {
    --padding-top: 140px;
    --padding-bottom: 60px;
}

.sts-service .sts-element.sts-element-sv-cta-h .states-side-heading {
    font-size: clamp(38px, 5.6vw, 92px);
    line-height: .98em;
}

.sts-service .sts-element.sts-element-sv-work-btn,
.sts-service .sts-element.sts-element-sv-ind-btn,
.sts-service .sts-element.sts-element-sv-cta-btn { text-align: center; }

/* ------------------------------------------------------------- tablet ---- */
@media (max-width: 1024px) {
    .sts-service .sts-tiers { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .sts-service .sts-tier__header { gap: 16px; padding: 12px 28px 12px 12px; }
    .sts-service .sts-tier__num { width: 50px; height: 50px; font-size: 20px; }
    .sts-service .sts-tier__text { padding: 22px 24px 0; }
    /* mountain backdrop, as on the About page's Why Us section */
.sts-service .sts-element.sts-element-sv-work:not(.sts-motion-effects-element-type-background),
.sts-service .sts-element.sts-element-sv-work > .sts-motion-effects-container > .sts-motion-effects-layer {
    background-image: url("../images/mountain.webp");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
}

.sts-service .sts-work-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- mobile ---- */
@media (max-width: 767px) {
    .sts-service .sts-choices,
    .sts-service .sts-work-cards { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .sts-service .sts-check { flex-direction: column; gap: 10px; }
}

/* ---------------------------------------------------------- why: tabs -- */
/* The numbers are always visible, not only on the active row.
   The theme starts them at opacity 0 and reveals them on hover/active, while
   also jumping margin-right from 24px to 91px - so the numbers were hidden
   and the titles slid sideways as you moved between rows. Fixed opacity and
   one fixed margin keeps all four visible and the titles still. */
.sts-service .states-side-intro-hover-tabs__index,
.sts-service .states-side-intro-hover-tabs__item.is-active .states-side-intro-hover-tabs__index,
.sts-service .states-side-intro-hover-tabs__item:hover .states-side-intro-hover-tabs__index,
.sts-service .states-side-intro-hover-tabs__accordion-item.is-active .states-side-intro-hover-tabs__index {
    opacity: 1;
    margin-right: 24px;
}

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

/* The states-side-intro-hover-tabs widget ships its own layout and JS; only the
   type scale needs bringing in line with this page. */
.sts-service .sts-element.sts-element-sv-why-tabs { width: 100%; margin-top: 10px; }

.sts-service .states-side-intro-hover-tabs__title {
    font-size: clamp(19px, 2vw, 34px);
    line-height: 1.15;
}

.sts-service .states-side-intro-hover-tabs__description p {
    color: #FFFFFF99;
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}

/* ===========================================================================
   Services - pinned stacking cards (.sts-deck)
   Cards sit in normal flow. Each one pins when it reaches the top of the
   viewport and stays there while the next scrolls over it, so the stack
   builds up as you scroll. pinSpacing is off, so pinning adds no height and
   the cards genuinely overlap.

   Each card pins a few pixels lower than the one before it, which is what
   makes the covered cards peek out above the front one.

   The section must not clip: the shared rule sets --overflow: hidden and
   .e-con applies it, and a clipped ancestor breaks pinning.
   =========================================================================== */
.sts-service .sts-element.sts-element-sv-svc,
.sts-service .sts-element.sts-element-sv-svc > .e-con-inner {
    --overflow: visible;
    overflow: visible;
}

.sts-service .sts-deck {
    width: 100%;
    margin-top: 44px;
}

.sts-service .sts-deck__card {
    position: relative;
    display: grid;
    align-content: end;
    gap: 16px;
    /* a fixed height keeps every card in the stack the same size, so the
       offsets read as a stack rather than as ragged edges */
    height: 460px;
    margin-bottom: 40px;
    padding: 44px 48px 46px;
    border-radius: 28px;
    background-color: #0e0e0e;
    border: 1px solid #FFFFFF3D;
    overflow: hidden;
    /* scales toward its top edge, so the card below stays put as it shrinks */
    transform-origin: 50% 0%;
    backface-visibility: hidden;
    will-change: transform;
}

.sts-service .sts-deck__card:last-child { margin-bottom: 0; }

/* brand gradient washing up from the bottom */
.sts-service .sts-deck__card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(204.03% 102.75% at 50.17% 0%, #000000 44.82%, #C83C00 82.29%, #F67300 90.48%, #FAE5B4 100%);
    pointer-events: none;
    z-index: 0;
}

/* artwork sits behind the copy, absolutely placed so it can bleed off the
   corner without reserving a grid cell */
.sts-service .sts-deck__art {
    position: absolute;
    top: -6%;
    right: -6%;
    width: 46%;
    max-width: none;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

.sts-service .sts-deck__num,
.sts-service .sts-deck__body { position: relative; z-index: 2; }

.sts-service .sts-deck__num {
    position: absolute;
    top: 40px;
    left: 48px;
    color: #ffffff;
    font-size: clamp(30px, 2.8vw, 44px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
}

.sts-service .sts-deck__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 620px;
}

.sts-service .sts-deck__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid #FFFFFF52;
    color: #ffffff;
}

.sts-service .sts-deck__icon svg { width: 26px; height: 26px; }

.sts-service .sts-deck__title {
    color: #ffffff;
    font-size: clamp(22px, 2.1vw, 34px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.sts-service .sts-deck__text {
    padding-top: 18px;
    border-top: 2px solid #FFFFFF66;
    color: #FFFFFFCC;
    font-size: 15px;
    line-height: 1.6;
}

/* ---------------------------------------------------------------- tablet -- */
@media (max-width: 1024px) {
    .sts-service .sts-deck__card {
        height: 500px;
        margin-bottom: 32px;
        padding: 36px 32px 38px;
        border-radius: 22px;
    }
    .sts-service .sts-deck__num { top: 32px; left: 32px; }
    .sts-service .sts-deck__art { width: 54%; top: -4%; right: -8%; }
}

@media (max-width: 767px) {
    .sts-service .sts-deck__card {
        height: 480px;
        margin-bottom: 24px;
        padding: 28px 22px 30px;
        gap: 12px;
    }
    .sts-service .sts-deck__num { top: 24px; left: 22px; font-size: 26px; }
    .sts-service .sts-deck__icon { width: 46px; height: 46px; }
    .sts-service .sts-deck__icon svg { width: 22px; height: 22px; }
    .sts-service .sts-deck__text { font-size: 14px; padding-top: 14px; }
    .sts-service .sts-deck__art { width: 62%; }
}

/* The cards are readable in flow with no JS at all - pinning is the only
   thing the script adds, so there is nothing to fall back to. */
@media (prefers-reduced-motion: reduce) {
    .sts-service .sts-deck__card { transform: none !important; }
}

/* ===========================================================================
   Industries - full-bleed parallax CTA band
   The image sits on its own oversized layer, translated by GSAP ScrollTrigger
   (see the sts-parallax-js block in scripts.html) rather than
   background-attachment: fixed, which iOS Safari renders badly.
   =========================================================================== */
.sts-service .sts-element.sts-element-sv-ind {
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
    --content-width: 100%;
}

/* The band is sized by min-height rather than by its copy: the artwork is the
   subject here, and the two text blocks sit in its dark corners. Left it
   height-driven by the copy, the phone would be cropped to a sliver. */
.sts-service .sts-ind-cta {
    position: relative;
    width: 100%;
    min-height: 880px;
    padding: 96px 24px 100px;
    overflow: hidden;
}

/* The image lives on its own layer, 30% taller than the band, so ScrollTrigger
   can slide it vertically as the section passes without exposing an edge. */
.sts-service .sts-ind-cta__bg {
    position: absolute;
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
    background-image: url("../images/cta-bg-mob.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    will-change: transform;
    z-index: 0;
}

/* Directional scrim rather than a flat wash. The artwork is already dark on
   the left and bright on the right, so this deepens the two corners the copy
   sits in and leaves the phone through the middle at full strength - a flat
   overlay would dull the glow that makes the shot. */
.sts-service .sts-ind-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #000000BF 0%, #00000073 30%, #00000026 52%, #00000059 78%, #000000A6 100%),
        linear-gradient(180deg, #00000040 0%, #00000000 30%, #00000000 62%, #00000080 100%);
    pointer-events: none;
    /* must sit above the parallax layer (z-index 0), below the copy (2) */
    z-index: 1;
}

/* Two blocks in opposite corners: the lead top left, the detail bottom right.
   A grid rather than absolute positioning, so the row heights still respond
   to the copy and nothing overlaps when the text runs long. */
.sts-service .sts-ind-cta__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 40px;
    width: 100%;
    max-width: 1420px;
    min-height: 684px;
    margin-inline: auto;
    text-align: left;
}

.sts-service .sts-ind-cta__lead {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    max-width: 440px;
}

.sts-service .sts-ind-cta__aside {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    max-width: 370px;
}

.sts-service .sts-element.sts-element-sv-ind-h .states-side-heading {
    text-align: left;
    margin-inline: 0;
}

.sts-service .sts-element.sts-element-sv-ind-b .states-side-heading,
.sts-service .sts-element.sts-element-sv-ind-b2 .states-side-heading {
    text-align: left;
    white-space: normal;
    max-width: 100%;
    margin-inline: 0;
    font-size: 15px;
    line-height: 1.65;
}

/* ---------------------------------------------------------------- tablet -- */
@media (max-width: 1200px) {
    .sts-service .sts-ind-cta { min-height: 760px; }
    .sts-service .sts-ind-cta__inner { min-height: 580px; }
    .sts-service .sts-ind-cta__lead { max-width: 380px; }
    .sts-service .sts-ind-cta__aside { max-width: 320px; }
}

/* Below this the two corners are too close to keep the phone between them, so
   the blocks stack into one column down the left and the artwork is shifted
   to keep the phone in frame behind them. */
@media (max-width: 900px) {
    .sts-service .sts-ind-cta {
        min-height: 0;
        padding: 80px 20px 90px;
    }

    .sts-service .sts-ind-cta__bg { background-position: 68% center; }

    .sts-service .sts-ind-cta::before {
        background: linear-gradient(180deg, #000000CC 0%, #000000A6 45%, #000000CC 100%);
    }

    .sts-service .sts-ind-cta__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        min-height: 0;
        gap: 28px;
        max-width: 620px;
    }

    .sts-service .sts-ind-cta__lead,
    .sts-service .sts-ind-cta__aside {
        grid-column: 1;
        justify-self: start;
        align-self: start;
        max-width: 100%;
    }

    .sts-service .sts-ind-cta__lead { grid-row: 1; }
    .sts-service .sts-ind-cta__aside { grid-row: 2; }
}

/* no drift for anyone who has asked for less motion */
@media (prefers-reduced-motion: reduce) {
    .sts-service .sts-ind-cta__bg {
        top: 0;
        height: 100%;
        transform: none !important;
    }
}

/* ===========================================================================
   Responsive section rhythm
   110px top and bottom is fine on a desktop, but on a 667px-tall phone it eats
   a third of the viewport before any content shows - and it stacks, so the gap
   between two sections reads as 220px. Scaled back in two steps rather than
   removed: the bands still need to read as separate.

   This sits at the end of the file on purpose. Media queries add no
   specificity, so these have to come after the two later rules that also set
   --padding-top (an-cta at 140px, an-ind at 0px) or they would lose the
   cascade and silently do nothing.

   an-ind is deliberately absent: it is a full-bleed band whose padding is 0 by
   design, and .sts-ind-cta handles its own mobile spacing.
   =========================================================================== */
@media (max-width: 1024px) {
    .sts-service .sts-element.sts-element-sv-why,
    .sts-service .sts-element.sts-element-sv-svc,
    .sts-service .sts-element.sts-element-sv-cost,
    .sts-service .sts-element.sts-element-sv-vs,
    .sts-service .sts-element.sts-element-sv-work,
    .sts-service .sts-element.sts-element-sv-look,
    .sts-service .sts-element.sts-element-sv-faq,
    .sts-service .sts-element.sts-element-sv-cta {
        --padding-top: 72px;
        --padding-bottom: 72px;
        --gap: 20px 20px;
        --row-gap: 20px;
        --column-gap: 20px;
    }

    .sts-service .sts-element.sts-element-sv-cta {
        --padding-top: 88px;
        --padding-bottom: 44px;
    }
}

@media (max-width: 767px) {
    .sts-service .sts-element.sts-element-sv-why,
    .sts-service .sts-element.sts-element-sv-svc,
    .sts-service .sts-element.sts-element-sv-cost,
    .sts-service .sts-element.sts-element-sv-vs,
    .sts-service .sts-element.sts-element-sv-work,
    .sts-service .sts-element.sts-element-sv-look,
    .sts-service .sts-element.sts-element-sv-faq,
    .sts-service .sts-element.sts-element-sv-cta {
        --padding-top: 48px;
        --padding-bottom: 48px;
        --gap: 16px 16px;
        --row-gap: 16px;
        --column-gap: 16px;
    }

    .sts-service .sts-element.sts-element-sv-cta {
        --padding-top: 56px;
        --padding-bottom: 32px;
    }

    /* the full-bleed CTA band tightens on its own terms */
    .sts-service .sts-ind-cta { padding: 56px 20px 60px; }
}