/* ============================================================
   Statera — Homepage styles
   Loaded after css/style.css
   ============================================================ */

/* Page-level eyebrow: 16px medium uppercase grey (differs from shared .eyebrow) */
.home-eyebrow {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: #686E76;
}
.home-eyebrow--soft { color: #4F555C; }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.section-head h2 { color: #2B2B29; }

/* Green-disc / blue-disc arrows point right (source icon points left) */
.btn-disc img { transform: scaleX(-1); }
.btn-disc--blue { background: var(--signal-blue); }

/* Dark pill button used across home sections */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  gap: 10px;
  height: 50px;
  padding: 0 20px;
  border-radius: 80px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.16px;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
/* Hover is a fine-pointer-only affordance (interaction states doc: accent green
   is a hover colour) — a touch tap must not latch it, so :hover is gated and
   :focus-visible stays outside the gate for keyboard users on every device. */
@media (hover: hover) and (pointer: fine) {
  .btn-pill:hover { background: var(--green-accent); color: var(--black); }
}
  .btn-pill:active { background: var(--green-accent); color: var(--black); }

.btn-pill:focus-visible { background: var(--green-accent); color: var(--black); }
.btn-pill--dark { background: var(--text-grey); color: var(--white); }
.btn-pill--green { background: var(--green-accent); color: var(--charcoal); }
.btn-pill--arrow img { width: 24px; height: 24px; transform: scaleX(-1); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 661px;
  margin-top: 62px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--charcoal);
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(242,242,242,0) 24.387%, rgba(0,0,0,.2) 55.241%),
    linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(242,242,242,0) 16.613%);
  pointer-events: none;
}
.hero-eyebrow {
  position: absolute;
  top: 28px;
  left: 40px;
  z-index: 2;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--white);
  white-space: nowrap;
}
.hero-content {
  position: absolute;
  left: 40px;
  bottom: 44.7px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 45px;
  width: 598.8px;
  max-width: calc(100% - 80px);
}
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--white);
}
.hero-text p {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.54px;
  width: 466px;
  max-width: 100%;
}
.hero-badge {
  position: absolute;
  right: 30px;
  bottom: 39.7px;
  z-index: 2;
  width: 56px;
  height: 56px;
}

/* ---------- Our Role ---------- */
.our-role {
  margin-top: 143px;
  display: flex;
  gap: 100px;
  align-items: flex-start;
}
.our-role-img {
  flex: none;
  width: 563.77px;
  height: 608.69px;
  border-radius: 35px;
  overflow: hidden;
  background: var(--white);
}
.our-role-img img { width: 100%; height: 100%; object-fit: cover; }
.our-role-text {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 488px;
}
.our-role-body {
  display: flex;
  flex-direction: column;
  gap: 25.5px; /* blank line between paragraphs at lh 1.5 / 17px */
  width: 440.42px;
  max-width: 100%;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
}

/* ---------- What We Believe deck ---------- */
.believe {
  margin-top: 56px;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  gap: 70px;
  align-items: center;
}
.believe .section-head { align-items: center; width: 761px; max-width: 100%; }
.believe-deck {
  position: relative;
  width: 1022px;
  max-width: 100%;
  height: 558px;
}
.believe-slide {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 46.5px;
  width: 950.9px;
  height: 453.1px;
  padding-right: 46.5px;
  background: var(--green-pale-2);
  border: 1px solid rgba(51,51,51,.2);
  border-radius: 28px;
  overflow: hidden;
  transition: top .5s ease, width .5s ease, height .5s ease, border-radius .5s ease, box-shadow .5s ease;
}
.believe-slide.is-front {
  top: 35px;
  z-index: 3;
  width: 1022px;
  height: 488px;
  gap: 50px;
  padding-right: 50px;
  border-radius: 30px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.believe-slide.is-mid { top: -1px; z-index: 2; }
.believe-slide.is-back { top: 106px; z-index: 1; }
.believe-img {
  flex: none;
  width: 437.3px;
  height: calc(100% + 32px);
  margin: -16px 0;
  overflow: hidden;
}
.believe-img img { width: 100%; height: 100%; object-fit: cover; }
.is-front .believe-img { width: 470px; }
.believe-text {
  display: flex;
  flex-direction: column;
  gap: 37.2px;
  width: 420.5px;
}
.is-front .believe-text { gap: 40px; width: 452px; }
.believe-text h3 {
  font-size: 35.4px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1.06px;
  color: #2B2B29;
  white-space: nowrap;
}
.is-front .believe-text h3 { font-size: 36px; letter-spacing: -0.72px; }
.believe-text p {
  font-size: 18.6px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
}
.is-front .believe-text p { font-size: 20px; color: #44474F; width: 336px; }
.believe-dots {
  position: absolute;
  right: -38px;
  top: 228px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 12px;
}
.believe-dots .dot {
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 50%;
  background: rgba(51,51,51,.25);
  cursor: pointer;
  transition: background .2s ease;
}
.believe-dots .dot.active { background: var(--charcoal); }

/* ---------- What We Help With ---------- */
.services {
  margin-top: 56px;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  gap: 70px;
  align-items: center;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  width: 1022px;
  max-width: 100%;
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 300px;
  padding: 40px;
  background: var(--green-pale-2);
  border-radius: 30px;
}
.service-top {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.service-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.service-text h3 {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: #2B2B29;
}
.service-text p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #44474F;
}
.service-arrow { flex: none; width: 33.4px; height: 31.4px; }
.service-card .btn-pill { align-self: flex-start; }
/* ---------- One Team, Not a Handoff ---------- */
.one-team { margin-top: 56px; padding: 100px 0; }
.one-team-inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 1022px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
}
.one-team-banner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  padding: 140px 40px;
  background: var(--green-pale);
  border-radius: 40px;
  overflow: hidden;
  text-align: center;
}
.one-team-banner h2 { color: #2B2B29; }
.one-team-row {
  display: flex;
  gap: 30px;
  align-items: stretch;
}
.one-team-img {
  flex: none;
  width: 496px;
  border-radius: 30px;
  overflow: hidden;
}
.one-team-img img { width: 100%; height: 100%; object-fit: cover; }
.one-team-card {
  flex: none;
  width: 496px;
  padding: 40px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
}
.one-team-card--pale {
  background: var(--green-pale-2);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--charcoal);
}
.one-team-card--pale p + p { margin-top: 33px; }
.one-team-card--cta { gap: 79px; }
.one-team-card--cta .btn-pill { align-self: flex-start; margin-top: auto; }
.one-team-card--dark {
  background: var(--text-grey);
  gap: 47px;
}
.one-team-card--dark h3 {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--fog);
}
.priority-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.priority-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--white);
  white-space: nowrap;
}
.priority-list .num {
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: rgba(255,255,255,.5);
}

/* ---------- Latest from Insights ---------- */
.insights { margin-top: 56px; padding: 100px 0; }
.insights-inner {
  width: 1192px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.insights-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.insights-row {
  position: relative;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 10px;
}
.blog-card {
  flex: none;
  width: 343px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.blog-img {
  width: 100%;
  aspect-ratio: 343 / 214.375;
  border-radius: 18px;
  overflow: hidden;
}
.blog-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-img--dim { opacity: .8; }
.blog-text {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 30px 0;
  font-weight: 500;
  line-height: 1.5;
}
.blog-text h3 {
  height: 117px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -1.04px;
  color: #2B2B29;
}
/* Fine-pointer only: a tapped card must not keep the underline on touch. */
@media (hover: hover) and (pointer: fine) {
  .blog-card:hover .blog-text h3 { text-decoration: underline; }
}
  .blog-card:active .blog-text h3 { text-decoration: underline; }

.blog-card--sm .blog-text { padding: 30px 10px; }
.blog-card--sm .blog-text h3 {
  height: auto;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.96px;
}
.blog-date {
  font-size: 14px;
  color: #777777;
  white-space: nowrap;
}
/* ---------- CTA ---------- */
.home-cta {
  margin-top: 56px;
  display: flex;
  gap: 50px;
  align-items: center;
  padding: 30px 30px 30px 50px;
  background: var(--green-pale);
  border-radius: 30px;
  overflow: hidden;
}
.home-cta-text {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  flex: none;
}
.home-cta-copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 542px;
  max-width: 100%;
}
.home-cta-copy h2 { color: var(--black); }
.home-cta-copy p:last-child {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
}
.home-cta-img {
  flex: 1;
  min-width: 0;
  height: 530px;
  border-radius: 20px;
  overflow: hidden;
}
.home-cta-img img { width: 100%; height: 100%; object-fit: cover; }

/* Footer gap lives in overrides.css (global, all pages) */

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .believe-deck { transform: scale(.9); transform-origin: top center; margin-bottom: -56px; }
  .believe-dots { right: 0; }
}

@media (max-width: 900px) {
.hero {
  height: auto;
    min-height: 520px;
    margin-top: 36px;
    border-radius: 24px;
}
.hero-content {
    left: 20px;
    bottom: 28px;
  width: 100%;
    max-width: calc(100% - 40px);
    gap: 24px;
}
  .hero-text { gap: 14px; }
  .hero-text p { width: 100%; font-size: 16px; letter-spacing: -0.32px; }
  .hero-eyebrow { top: 20px; left: 20px; right: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hero-badge { width: 44px; height: 44px; right: 16px; bottom: 16px; }

  .our-role { margin-top: 48px; flex-direction: column; gap: 32px; }
  .our-role-img { width: 100%; height: auto; aspect-ratio: 563.77 / 608.69; border-radius: 24px; }
  .our-role-text { width: 100%; gap: 24px; }
  .our-role-body { width: 100%; gap: 18px; font-size: 16px; }

  .believe, .services, .one-team, .insights { margin-top: 36px; padding: 48px 0; gap: 32px; }
  .believe .section-head { gap: 12px; }
  .believe-deck { transform: none; margin-bottom: 0; height: auto; width: 100%; padding: 0 20px; }
  .believe-slide,
  .believe-slide.is-front,
  .believe-slide.is-mid,
  .believe-slide.is-back {
    position: static;
    transform: none;
  width: 100%;
  height: auto;
  flex-direction: column;
  align-items: stretch;
    gap: 0;
    padding: 0 0 24px;
    border-radius: 24px;
    display: none;
}
  .believe-slide.is-front { display: flex; }
  /* 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
     content width itself shrinks/grows across 360-900, instead of a fixed
     height that over- or under-crops the photo. */
  .believe-img, .is-front .believe-img { width: 100%; aspect-ratio: 350 / 272; margin: 0; }
  .believe-text, .is-front .believe-text { width: 100%; padding: 20px; gap: 12px; }
  .believe-text h3, .is-front .believe-text h3 { letter-spacing: -0.6px; white-space: normal; }
  .believe-text p, .is-front .believe-text p { width: 100%; font-size: 16px; }
.believe-dots {
    position: static;
    flex-direction: row;
  justify-content: center;
    padding: 20px 0 0;
  gap: 10px;
}
  .believe-dots .dot { width: 10px; height: 10px; }

  .services .section-head { gap: 12px; }
  /* Gap between stacked cards is 30px in the mobile system. */
  .services-grid { grid-template-columns: 1fr; width: 100%; padding: 0 20px; gap: 30px; }
  /* Card inner padding is 20px in the mobile system. */
  .service-card { height: auto; gap: 24px; padding: 20px; border-radius: 24px; }
  .service-top { gap: 16px; }
  .service-text { gap: 12px; }
  .service-text h3 { letter-spacing: -0.4px; }
  .service-text p { font-size: 16px; }
  .service-arrow { width: 28px; height: 26px; }
    .one-team { padding: 48px 0; }
  .one-team-inner { width: 100%; max-width: 100%; padding: 0 20px; gap: 20px; }
  /* Gap between stacked cards is 30px in the mobile system. */
  .one-team-row { flex-direction: column; gap: 30px; }
  .one-team-img, .one-team-card { width: 100%; flex: 1; border-radius: 24px; }
  .one-team-img { aspect-ratio: 496 / 661; }
  /* Card inner padding is 20px in the mobile system. */
  .one-team-card { padding: 20px; }
  .one-team-card--pale { font-size: 17px; }
  .one-team-card--pale p + p { margin-top: 18px; }
  .one-team-card--cta { gap: 28px; }
  .one-team-card--dark { gap: 28px; }
  .one-team-card--dark h3 { letter-spacing: -0.4px; }
  .one-team-banner { padding: 48px 24px; border-radius: 24px; gap: 12px; }
  .priority-list { gap: 0; }
  .priority-list li { padding: 16px 0; font-size: 17px; white-space: normal; }

  .insights { padding: 48px 0; }
  .insights-inner { width: 100%; max-width: 100%; padding: 0 20px; gap: 32px; }
  .insights-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .insights-row { gap: 20px; }
  .blog-card { width: 280px; }
  .blog-img { border-radius: 14px; }
  .blog-text { padding: 20px 0; gap: 16px; }
  .blog-text h3 { height: auto; letter-spacing: -0.5px; }
  .blog-card--sm .blog-text { padding: 20px 8px; }
  /* .home-cta also carries .container, but its own padding below fully
     replaces .container's 20px side padding (same specificity, later in the
     cascade) — without a width here the card loses the page's mobile gutter
     and sits flush to the viewport edge, unlike .hero/.our-role next to it
     and unlike .st-cta's own mobile rule in home-sections.css. */
    .home-cta { width: calc(100% - 40px); margin: 24px auto 0; flex-direction: column; gap: 28px; padding: 28px; align-items: stretch; border-radius: 24px; }
  .home-cta-text { width: 100%; gap: 24px; }
  .home-cta-copy { width: 100%; gap: 16px; }
  .home-cta-copy p:last-child { font-size: 16px; }
  .home-cta-img { width: 100%; height: 240px; border-radius: 16px; }
}

@media (max-width: 600px) {
  .hero { min-height: 460px; }
  .hero-content { bottom: 24px; }
  /* 32px matches the site h1 scale at this breakpoint (style.css); this was
     drifting to 30px, a step off the shared type ladder. */
  .hero-text h1 { font-size: 32px; letter-spacing: -0.8px; }
  .hero-text p { font-size: 15px; }
  .hero-eyebrow { font-size: 16px; }
  .hero-badge { display: none; }

  .our-role-body { font-size: 15px; }

  /* No separate height here: the 350x272 aspect-ratio set at 900px already
     scales the image correctly down to 360, a fixed height would fight it. */

  .service-card { padding: 20px; }

  .one-team-card--pale { font-size: 16px; }
  .one-team-banner { padding: 40px 20px; }
  .priority-list li { font-size: 16px; }

  .blog-card { width: 260px; }

  .home-cta { padding: 24px; }
  .home-cta-img { height: 200px; }
}