/*
   * the design-derived home page styles.
 *
   * Every value here is transcribed from the design
 * ("Homepage", 1512x7676) in file xW35xsSSd0uU8fMd8dxXMf. Node ids are noted
 * next to each block so the source of a number is always traceable.
 *
 * Loaded on the front page and in the Elementor editor, on top of style.css.
 * It styles the markup rendered by the Statera section widgets in
   * inc/elementor/widgets/ — each of those is one whole section, so the classes
 * below describe complete sections rather than individual atoms.
 */

:root {
  --st-charcoal: #333333;
  --st-text-grey: #404040;
  --st-fog: #f2f2f2;
  --st-green-soft: #e6e9d7;
  --st-green-strong: #e2e6d1;
  --st-green-accent: #a8e565;
  --st-blue: #65a8e5;
  --st-heading: #2b2b29;
  --st-eyebrow: #686e76;
  --st-body-grey: #44474f;
  --st-date: #777777;
}

/* Each section widget is one Elementor element; the wrapper must not add any
   box model of its own or the section geometry drifts from the design. The
   selectors are specific enough to beat Elementor's own widget spacing rules,
   which load after this sheet. */
.elementor .elementor-element[class*="elementor-widget-statera-"] {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  --widgets-spacing: 0px 0px;
}

.elementor .elementor-element[class*="elementor-widget-statera-"]:not(:last-child) {
  margin-block-end: 0;
}

/* The container holding the section widgets is a plain block so the sections'
   own top margins and auto side margins produce the design rhythm. */
/* .fh-root is the pre-rename container class. Production's saved homepage
   still carries it, so both match until that page is rebuilt. */
.elementor .elementor-element.st-root,
.elementor .elementor-element.fh-root {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  --content-width: 100%;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --margin-block-start: 0px;
  --margin-block-end: 0px;
  --gap: 0px;
}

.st-sec,
.st-box {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.st-sec p,
.st-sec h1,
.st-sec h2,
.st-sec h3 {
  margin: 0;
}

.st-sec img {
  display: block;
  max-width: 100%;
}

/* Card titles may carry a link; it must not restyle the heading. */
.st-sec h1 a,
.st-sec h2 a,
.st-sec h3 a {
  color: inherit;
  text-decoration: inherit;
}

/* These frames take their height from a flex row or an aspect-ratio, neither of
   which gives a percentage height anything to resolve against, so the image
   fell back to its intrinsic size and object-fit had nothing to do: the picture
   simply overflowed and was clipped, or left the frame part empty. Filling the
   frame absolutely pins both axes however the frame itself was sized. */
.st-ourrole-img,
.st-card-img,
.st-ot-img,
.st-ins-img,
.st-cta-img {
  position: relative;
}

/* The prefix outranks Elementor's `.elementor img { height: auto }`, which
   otherwise wins on specificity and drops the height back to intrinsic. */
body.wp-theme-statera .st-ourrole-img img,
body.wp-theme-statera .st-card-img img,
body.wp-theme-statera .st-ot-img img,
body.wp-theme-statera .st-ins-img img,
body.wp-theme-statera .st-cta-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Shared type (eyebrow / section heading) ---------- */
/* the design: eyebrow 16px/1.3 w500 #686E76 ls -0.2 uppercase; h2 48px/1.1 w600 #2B2B29 ls -1.44 */
.st-eyebrow {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--st-eyebrow);
  text-transform: uppercase;
}

.st-sec .st-h2 {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1.44px;
  color: var(--st-heading);
}

/* ---------- Shared buttons ----------
   The interaction states
noted "This Apply to all CTAs") defines
   both CTA styles in normal and hover,
so the accent green is a hover colour,
never a resting one. */

/* Pill button,
   h 50.005,
px 20,
radius 80.
   Normal is #404040 on white,
   hover #A8E565 on #333. */
.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  /* height: 50.005px; */
  padding: 10px 20px;
  border-radius: 80px;
  background: var(--st-text-grey);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  /* letter-spacing: -0.16px; */
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover is a fine-pointer-only affordance (accent green is a hover colour,
   never resting) — gated so a touch tap doesn't latch it; :focus-visible
   stays outside the gate so keyboard focus still shows on every device.
   Scoped body.wp-theme-statera a.st-btn rather than .st-sec .st-btn: the
   dark-arrow-btn renders outside .st-sec too (investments hero), and the
   prefix also outranks the Elementor kit's a:hover, which painted the
   label green there. */
@media (hover: hover) and (pointer: fine) {
  body.wp-theme-statera a.st-btn:hover {
    background: var(--st-green-accent);
    color: var(--st-charcoal);
  }
}
  body.wp-theme-statera a.st-btn:active {
    background: var(--st-green-accent);
    color: var(--st-charcoal);
  }

body.wp-theme-statera a.st-btn:focus-visible {
  background: var(--st-green-accent);
  color: var(--st-charcoal);
}

/* Disc button,
   white pill,
pl 19,
gap 20,
trailing 50 x 50.005 disc holding a 24px arrow at left calc(50% - 3px).
   Normal disc is #65A8E5,
   hover disc #A8E565. */
.st-btn-disc {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 20px;
  height: 50.005px;
  padding: 0 0 0 19px;
  background: #ffffff;
  border-radius: 80px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.16px;
  color: #000000;
  text-decoration: none;
}

.st-sec .st-btn-disc::after {
  content: "";
  width: 50px;
  height: 50.005px;
  flex: none;
  background-color: var(--st-blue);
  background-image: url("../assets/icon-arrow-right-dark.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: calc(50% - 3px) 50%;
  transition: background-color 0.2s ease;
}

/* Disc turns accent green on hover only (node 40:5212); fine-pointer gate
   keeps a tapped disc from staying green on touch. Focus keeps the same
   affordance outside the gate for keyboard users. */
@media (hover: hover) and (pointer: fine) {
  .st-sec .st-btn-disc:hover::after {
    background-color: var(--st-green-accent);
  }
}
  .st-sec .st-btn-disc:active::after {
    background-color: var(--st-green-accent);
  }

.st-sec .st-btn-disc:focus-visible::after {
  background-color: var(--st-green-accent);
}

/* Arrow-suffixed dark pill, gap 10, trailing 24px arrow. */
.st-btn--arrow {
  gap: 10px;
}

.st-btn--arrow::after {
  content: "";
  width: 24px;
  height: 24px;
  flex: none;
  background: url("../assets/icon-arrow-right-light.svg") center / 24px 24px no-repeat;
}

/* On hover the pill fill goes accent green and the label charcoal, so the
   arrow must follow the label to the dark glyph — a light arrow on green
   reads as a contrast bug. Same guard trio as .st-btn above. */
@media (hover: hover) and (pointer: fine) {
  body.wp-theme-statera a.st-btn--arrow:hover::after {
    background-image: url("../assets/icon-arrow-right-dark.svg");
  }
}
  body.wp-theme-statera a.st-btn--arrow:active::after {
    background-image: url("../assets/icon-arrow-right-dark.svg");
  }

body.wp-theme-statera a.st-btn--arrow:focus-visible::after {
  background-image: url("../assets/icon-arrow-right-dark.svg");
}

/* ---------- Hero,
   the design (1152 x 661 at y 132) ---------- */
.st-hero {
  position: relative;
  width: var(--content-max);
  /* The design draws the hero 661 tall; viewport-relative sizing changed the
     section ratios, so the design value governs. */
  /* Strict spacing rule: 56px gap above the hero (was the design's 62px
     nav bottom 70 -> hero top 132). */
  --st-hero-gap: 56px;
  height: 661px;
  margin: var(--st-hero-gap) auto 0;
  border-radius: 30px;
  overflow: hidden;
  display: block;
  /* The photograph is content: the widget sets background-image inline from
     its own media field, so nothing is hardcoded here. */
  background-color: #ffffff;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* absolute left 40,
top 28,
padding-bottom 10 */
.st-hero-eyebrow {
  position: absolute;
  left: 40px;
  top: 28px;
  padding-bottom: 10px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: #ffffff;
  text-transform: none;
}

/* absolute left 40.1, bottom 45, w 637, column gap 45 */
.st-hero-copy {
  position: absolute;
  left: 40.1px;
  bottom: 45px;
  width: 637px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 45px;
}

/* column gap 18 */
.st-hero-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.st-sec .st-hero-h1 {
  font-family: var(--font-heading);
  font-size: 54px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1.62px;
  color: #ffffff;
}

.st-sec .st-hero-p {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.54px;
  color: #ffffff;
}

/* ---------- Our Role, the design (1288 x 608.688 at y 936) ---------- */
.st-ourrole {
  width: 1288px;
  margin: 56px auto 0; /* strict 56px section gap (design's 143px superseded) */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 100px;
}

.st-ourrole-img {
  width: 563.769px;
  height: 608.688px;
  flex: none;
  border-radius: 35.033px;
  overflow: hidden;
  background: #ffffff;
  display: block;
}

.st-ourrole-text {
  width: 488px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.st-head-16 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

/* w 440.422, 17px/1.5 regular black, blank line between paras */
.st-ourrole-body {
  width: 440.422px;
}

.st-sec .st-ourrole-body p {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}

/* ---------- Section shells ---------- */
.st-sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

/* ---------- What We Believe ----------
   A scroll-driven stack rather than a static composition: the stage pins while
   the cards advance. The the design frame draws the deck mid-scroll at its second
   card, so its three-card composition is one frame of this effect and supplies
   the neighbour offsets used below. js/home-sections.js drives --st-card-y and
   --st-card-scale from the scroll position.

   The section is therefore taller than the frame's 922: the track adds
   --st-deck-step of scroll per extra card. Every other section is unaffected. */
.st-believe {
  margin-top: 56px;
  background: var(--st-fog);
  --st-deck-count: 5;
  --st-deck-step: 520px;
  /* Stage fits its content (head 94 + gap 70 + deck 558) instead of the
     full viewport, so no dead space collects below the cards. */
  --st-stage-h: 722px;
}

.st-believe-track {
  position: relative;
  height: calc(var(--st-stage-h) + (var(--st-deck-count) - 1) * var(--st-deck-step));
}

.st-believe-stage {
  position: sticky;
  top: 0;
  height: var(--st-stage-h);
  box-sizing: border-box;
  /* Content starts at the stage top — the wrapper model (100+56+100)
     already supplies the space above this section, so no extra headroom
     or footroom here. */
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 70px;
}

@media (min-width: 901px) and (max-height: 1021px) {
  .st-believe { --st-stage-h: 708px; } /* head 94 + gap 56 + deck 558 */
  .st-believe-stage { gap: 56px; }
}

@media (min-width: 901px) and (max-height: 800px) {
  .st-believe { --st-stage-h: 692px; } /* head 94 + gap 40 + deck 558 */
  .st-believe-stage { gap: 40px; }
}

.st-believe .st-sec-head {
  width: 761px;
}

/* 1022 x 558 stage */
.st-deck {
  position: relative;
  width: 1022px;
  height: 558px;
  display: block;
}

/* Every card is the front card; the stack
   positions are transforms, so the 0.93 neighbour scale also produces the
   0.93px border and 27.9px radius the smaller the design cards carry. */
.st-deck .st-card {
  position: absolute;
  top: 35px;
  left: 0;
  width: 1022px;
  height: 488px;
  padding-right: 50px;
  gap: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: var(--st-green-soft);
  border: 1px solid rgba(51, 51, 51, 0.2);
  border-radius: 30px;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transform: translateY(var(--st-card-y, 53.48px)) scale(var(--st-card-scale, 0.93));
  transform-origin: center center;
  z-index: 90;
}

/* Resting state before the script runs: first card front, rest stacked below. */
.st-deck .st-card:first-child {
  --st-card-y: 0px;
  --st-card-scale: 1;
  z-index: 100;
}

.st-card-img {
  flex: none;
  width: 470px;
  height: 100%;
  overflow: hidden;
  display: block;
}

.st-card-text {
  flex: none;
  width: 452px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.st-sec .st-card-title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.72px;
  color: var(--st-heading);
}

.st-sec .st-card-body {
  width: 336.288px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--st-body-grey);
}

/* 32 x 102 rail at left 1048, top 228; dots r4 every 16px,
   active #65A8E5 on #ECE8E2. */
.st-deck-dots {
  position: absolute;
  left: 1048px;
  top: 228px;
  width: 32px;
  height: 102px;
  box-sizing: border-box;
  padding: 15px 0;
  border-radius: 16px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 110;
}

.st-deck-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ece8e2;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.st-deck-dot.is-active {
  background: var(--st-blue);
}

/* Without the scroll effect the stack would hide four of the five cards, so
   fall back to a plain vertical list. Same inside the Elementor editor, where a
   pinned viewport-tall section makes the page awkward to edit. */
@media (prefers-reduced-motion: reduce) {
  .st-believe-track,
  .st-believe-stage {
    position: static;
    height: auto;
    min-height: 0;
}

  .st-deck {
    height: auto;
  display: flex;
  flex-direction: column;
    gap: 30px;
}

  .st-deck .st-card {
    position: static;
    transform: none;
}

  .st-deck-dots {
    display: none;
}
}

body.elementor-editor-active .st-believe-track,
body.elementor-editor-active .st-believe-stage {
    position: static;
    height: auto;
    min-height: 0;
}

/* ---------- What We Help With, the design (h 993) ---------- */
.st-services {
  margin-top: 56px;
  padding: 100px 0;
  background: var(--st-fog);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
}

.st-services .st-sec-head {
  width: 427px;
}

.st-svc-grid {
  width: 1022px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.st-svc-card {
  position: relative;
  height: 299px;
  padding: 40px;
  background: var(--st-green-soft);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.st-svc-card:nth-child(n + 3) {
  height: 300px;
}

.st-svc-top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.st-svc-txt {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.st-sec .st-svc-txt .st-svc-title {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--st-heading);
}

.st-sec .st-svc-txt .st-svc-body {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--st-body-grey);
}

/* 33.414 x 31.414 */
.st-svc-arrow {
  flex: none;
  width: 33.414px;
}

.st-svc-arrow img {
  width: 33.414px;
  height: 31.414px;
  display: block;
}

/* ---------- One Team, the design (h 1966) ---------- */
.st-oneteam {
  margin-top: 56px;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.st-oneteam-inner {
  width: 1022px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
    gap: 30px;
}

.st-ot-banner {
  width: 100%;
  padding: 140px 243px;
  background: var(--st-green-strong);
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.st-sec .st-ot-banner .st-eyebrow {
  color: #4f555c;
}

.st-ot-row {
  width: 100%;
  height: 661px;
  display: flex;
  flex-direction: row;
  align-items: center;
    gap: 30px;
}

.st-ot-img {
  width: 496px;
  height: 661px;
  flex: none;
  border-radius: 30px;
  overflow: hidden;
  display: block;
}

.st-ot-card {
  width: 496px;
  height: 661px;
  flex: none;
  padding: 40px;
  background: var(--st-green-soft);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.st-sec .st-ot-card p,
.st-sec .st-ot-cta-copy p {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--st-charcoal);
}

/* The design makes this row 671.005 tall: the CTA card is 671.005 and the dark
   card is 661, centred against it. Both card heights are pinned because the
   theme's typeface is not the one the design was drawn in, so the copy wraps to
   fewer lines — left to size themselves, the cards come out 38px short and
   every section below them rides up. */
.st-ot-row2 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
}

.st-ot-cta {
  width: 496px;
  min-height: 671.005px;
  flex: none;
  padding: 40px;
  background: var(--st-green-soft);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Button sits 40 from the bottom in the design, whatever the copy does. */
  justify-content: space-between;
  gap: 79px;
}

.st-ot-dark {
  width: 496px;
  min-height: 661px;
  flex: none;
  padding: 40px;
  background: var(--st-text-grey);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 47px;
}

.st-sec .st-ot-dark .st-ot-dark-title {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--st-fog);
}

/* rows gap 13, each py 20 with a hairline rule */
.st-ot-list {
  width: 100%;
}

.st-sec .st-ot-list p {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
}

.st-ot-list p + p {
  margin-top: 13px;
}

.st-sec .st-ot-list .st-num {
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Latest from Insights, the design (h 814.375) ---------- */
.st-insights {
  margin-top: 56px;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  overflow: hidden;
}

.st-ins-head,
.st-ins-row {
  width: 1192px;
  max-width: 100%;
}

.st-ins-head {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

.st-ins-head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* six 343px cards, gap 40 — overflows the frame by design, so the row is a
   scroll-snap rail on every page (the prev/next discs in .st-ins-nav scroll
   it one card at a time; was investments-only via .inv-root). */
.st-ins-row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.st-ins-row::-webkit-scrollbar { display: none; }

.st-ins-card {
  width: 343px;
  flex: none;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

.st-ins-img {
  width: 100%;
  aspect-ratio: 265.44140625 / 165.90087890625;
  border-radius: 18px;
  overflow: hidden;
  display: block;
}

.st-ins-txt {
  width: 100%;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

.st-sec .st-ins-txt .st-ins-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -1.04px;
  color: var(--st-heading);
  height: 117px;
  overflow: hidden;
}

/* the design shows the blog card in both states: the title underlines
   on hover and nothing else changes. Fine-pointer gate keeps a tapped card
   from staying underlined on touch; :focus-within stays outside the gate. */
@media (hover: hover) and (pointer: fine) {
  .st-ins-card:hover .st-ins-title {
    text-decoration: underline;
  }
}
  .st-ins-card:active .st-ins-title {
    text-decoration: underline;
  }

.st-sec .st-ins-card:focus-within .st-ins-title {
  text-decoration: underline;
}

.st-sec .st-ins-txt .st-ins-date {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--st-date);
}

.st-sec .st-ins-empty {
  font-size: 16px;
  line-height: 1.5;
  color: var(--st-eyebrow);
}

/* ---------- CTA, the design (1152 x 590) ---------- */
.st-cta {
  width: var(--content-max);
  height: 590px;
  margin: 56px auto 0;
  padding: 30px 30px 30px 50px;
  background: var(--st-green-strong);
  border-radius: 30px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 50px;
}

.st-cta-left {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.st-cta-copy {
  width: 542px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.st-sec .st-cta-copy .st-h2 {
  color: #000000;
}

.st-sec .st-cta-copy .st-cta-body {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}

.st-cta-img {
  flex: 1 0 0;
  min-width: 1px;
  height: 530px;
  border-radius: 20px;
  overflow: hidden;
  display: block;
}

/* ---------- Nav parity with the design ----------
   The the design button node is 42px tall with the 1px stroke drawn inside, so the
   padding has to give back the 2px the CSS border adds. */
.nav .btn-outline {
  padding: 11px 17px;
}

/* ---------- Responsive fallback ----------
   The design is a fixed 1512 desktop frame; below that the fixed widths simply
   shrink so the page stays usable. Mobile refinement is out of scope here. */
@media (max-width: 1511px) {
  .st-hero,
  .st-ourrole,
  .st-cta {
    width: min(100% - 48px, 1288px);
}

  .st-hero,
  .st-cta {
    max-width: var(--content-max);
}
}

@media (max-width: 1100px) {
  .st-ourrole,
  .st-ot-row,
  .st-ot-row2,
  .st-cta {
  flex-direction: column;
    height: auto;
}

  .st-ourrole-img,
  .st-ourrole-text,
  .st-ot-img,
  .st-ot-card,
  .st-ot-cta,
  .st-ot-dark,
  .st-cta-img {
  width: 100%;
    height: auto;
}

  /* height: auto above collapses any image block whose <img> is absolutely
     positioned (inset: 0 → 0px tall). The aspect-ratios restore each block's
     desktop proportion from its width. The ≤900 rules repeat the same ratio
     for .st-ourrole-img; both blocks need it because the collapse starts at
     1100, not 900. .st-cta-img is legacy markup (deprecated home CTA widget)
     and is left to collapse — nothing current emits it. */
  .st-ourrole-img { aspect-ratio: 563.77 / 608.69; }
  .st-ot-img { aspect-ratio: 496 / 661; }

  .st-deck,
  .st-svc-grid,
  .st-oneteam-inner,
  .st-ins-head,
  .st-ins-row {
    width: min(100% - 48px, 1022px);
}
}

/* ---------- Mobile refinement ---------- */
@media (max-width: 900px) {
  .st-sec .st-h2 { font-size: 28px; letter-spacing: -0.6px; }
  .st-eyebrow { font-size: 14px; }

  .st-hero {
    width: calc(100% - 40px);
    height: auto;
    min-height: 460px;
    margin: 24px auto 0;
    border-radius: 24px;
}
  .st-hero-eyebrow { left: 20px; top: 20px; right: 20px; overflow: hidden; text-overflow: ellipsis; }
  .st-hero-copy { left: 20px; bottom: 24px; width: calc(100% - 40px); gap: 20px; }
  /* The hero h1 is the one heading that escapes the shared type scale: this
     selector is (0,2,0) and outranks style.css's body.wp-theme-statera h1
     at (0,1,2), so the scale's 32px/-0.8px phone step never reached it and
     the hero sat at 30px while every other h1 on the page stepped down.
     Matched to the scale rather than left a third of a pixel-size adrift. */
  .st-sec .st-hero-h1 { font-size: 32px; letter-spacing: -0.8px; }
  .st-sec .st-hero-p { font-size: 15px; letter-spacing: -0.3px; }

  .st-ourrole {
    width: calc(100% - 40px);
    margin: 36px auto 0;
  flex-direction: column;
    gap: 32px;
}
  .st-ourrole-img { width: 100%; height: auto; aspect-ratio: 563.77 / 608.69; border-radius: 24px; }
  .st-ourrole-text { width: 100%; gap: 24px; }
  .st-ourrole-body { width: 100%; }
  .st-sec .st-ourrole-body p { font-size: 16px; }

  .st-believe { margin-top: 36px; }
  .st-believe-track,
  .st-believe-stage {
    position: static;
    height: auto;
    min-height: 0;
    padding: 48px 0;
    gap: 32px;
}
  .st-believe .st-sec-head { width: 100%; padding: 0 20px; }
  /* Gap between stacked cards is 30px in the mobile system — matches the
     prefers-reduced-motion fallback above, which stacks the same cards. */
  .st-deck {
    width: calc(100% - 40px);
    height: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
  .st-deck .st-card {
    position: static !important;
    transform: none !important;
  width: 100%;
    height: auto;
    padding: 0 0 20px;
  flex-direction: column;
    gap: 0;
    border-radius: 24px;
}
  /* Card image block is 350x272 in the mobile system (20px side gutter ->
     350 content width at the 390 frame); an aspect-ratio keeps that
     proportion as the card's own width shrinks/grows across 360-900,
     instead of a fixed height that over- or under-crops the photo. */
  .st-card-img { width: 100%; aspect-ratio: 350 / 272; }
  .st-card-text { width: 100%; padding: 20px; gap: 12px; }
  .st-sec .st-card-title { font-size: 24px; letter-spacing: -0.4px; }
  .st-sec .st-card-body { width: 100%; font-size: 16px; }
  .st-deck-dots { display: none; }

  .st-services { margin-top: 36px; padding: 48px 0; gap: 32px; }
  .st-services .st-sec-head { width: 100%; padding: 0 20px; }
  /* Gap between stacked cards is 30px in the mobile system. */
  .st-svc-grid { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 30px; }
  /* Card inner padding is 20px in the mobile system. The desktop card pins
     its height and spaces the button off the text with justify-content:
     space-between; at auto height there is no slack, so the gap carries it. */
  .st-svc-card { height: auto; padding: 20px; border-radius: 24px; gap: 20px; }
  .st-svc-card:nth-child(n + 3) { height: auto; }
  .st-svc-top { gap: 16px; }
  .st-svc-txt { gap: 12px; }
  /* font-size comes from the strict mobile scale (overrides.css): h3 24px. */
  .st-sec .st-svc-txt .st-svc-title { letter-spacing: -0.4px; }
  .st-sec .st-svc-txt .st-svc-body { font-size: 16px; }
  .st-svc-arrow { width: 28px; }
  .st-svc-arrow img { width: 28px; height: 26px; }

  .st-oneteam { margin-top: 36px; padding: 48px 0; }
  .st-oneteam-inner { width: calc(100% - 40px); gap: 20px; }
  .st-ot-banner { padding: 48px 24px; border-radius: 24px; gap: 12px; }
  /* Gap between stacked cards is 30px in the mobile system. */
  .st-ot-row,
  .st-ot-row2 { flex-direction: column; height: auto; gap: 30px; }
  .st-ot-img,
  .st-ot-card,
  .st-ot-cta,
  .st-ot-dark { width: 100%; height: auto; min-height: 0; border-radius: 24px; }
  /* Card inner padding is 20px in the mobile system. */
  .st-ot-card,
  .st-ot-cta,
  .st-ot-dark { padding: 20px; }
  .st-sec .st-ot-card p,
  .st-sec .st-ot-cta-copy p { font-size: 16px; }
  .st-ot-cta { gap: 28px; }
  .st-sec .st-ot-dark .st-ot-dark-title { font-size: 22px; letter-spacing: -0.4px; }
  .st-sec .st-ot-list p { padding: 16px 0; font-size: 16px; white-space: normal; }
  .st-ot-list p + p { margin-top: 0; }

  .st-insights { margin-top: 36px; padding: 48px 0; gap: 32px; overflow: visible; }
  .st-ins-head,
  .st-ins-row { width: calc(100% - 40px); }
  .st-ins-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .st-ins-head-text { gap: 12px; }
  .st-ins-row { gap: 20px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
  .st-ins-card { width: 280px; scroll-snap-align: start; }
  .st-ins-img { border-radius: 14px; }
  .st-ins-txt { padding: 20px 0; gap: 16px; }
  .st-sec .st-ins-txt .st-ins-title { font-size: 18px; letter-spacing: -0.4px; height: auto; }

  .st-cta {
    width: calc(100% - 40px);
    height: auto;
    margin: 24px auto 0;
    padding: 24px;
  flex-direction: column;
    gap: 24px;
    border-radius: 24px;
}
  .st-cta-left { width: 100%; gap: 24px; }
  .st-cta-copy { width: 100%; gap: 16px; }
  .st-sec .st-cta-copy .st-cta-body { font-size: 16px; }
  .st-cta-img { width: 100%; height: 200px; border-radius: 16px; }
}