/* Copyright (c) 2026 Chinaready. All rights reserved. */

/* ==========================================================================
   Homepage section styles (P2). Layout per spec §4, motion hooks per §5.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--cr-dark-surface);
  color: var(--cr-on-dark-primary);
  overflow: clip;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.hero__video {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  opacity: 0.35;
  mix-blend-mode: screen;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 30, 62, 0.92) 0%, rgba(12, 30, 62, 0.55) 55%, rgba(12, 30, 62, 0.25) 100%),
    linear-gradient(0deg, rgba(12, 30, 62, 0.85) 0%, transparent 40%);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-block: 160px 18vh;
}

.hero__title {
  max-width: 11em;
  margin-top: var(--cr-space-4);
}

.hero__subtitle {
  margin-top: var(--cr-space-5);
}

.hero__ctas {
  display: flex;
  gap: var(--cr-space-4);
  flex-wrap: wrap;
  margin-top: var(--cr-space-7);
}

/* Quiet scroll cue: a faint vertical line with a light streak drifting down. */
.hero__scroll {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
}

.hero__scroll-track {
  display: block;
  position: relative;
  width: 1px;
  height: 56px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}

.hero__scroll-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 18px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.9));
  animation: hero-scroll-cue 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes hero-scroll-cue {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(60px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-dot {
    animation: none;
  }
}

/* The announcement bar spans most of the width on small screens. */
@media (max-width: 720px) {
  .hero__scroll {
    display: none;
  }
}

.hero__announcement {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--cr-space-3);
  max-width: min(480px, 90vw);
  padding: 18px 28px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--cr-on-dark-border);
  border-left: 1px solid var(--cr-on-dark-border);
  color: var(--cr-on-dark-secondary);
  text-decoration: none;
  font-size: var(--cr-fs-small);
  transition: background-color var(--cr-dur-base) var(--cr-ease-standard);
}

.hero__announcement:hover {
  background: rgba(255, 255, 255, 0.12);
}

.hero__announcement-tag {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--cr-brand-blue);
  color: #fff;
  font-weight: var(--cr-fw-semibold);
  font-size: var(--cr-fs-caption);
  letter-spacing: var(--cr-tracking-wide);
  text-transform: uppercase;
}

.hero__announcement-arrow {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   2. Intro — Inizio partner block (video left, copy right) presented as a
   white card on a fog-grey ground.
   -------------------------------------------------------------------------- */

.intro {
  background: var(--cr-surface); /* fog grey — first light beat after the dark hero */
}

.intro__card {
  background: var(--cr-background);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-card);
  box-shadow: var(--cr-shadow-card);
  padding: clamp(24px, 3.5vw, 48px);
}

.intro__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.intro__media {
  border-radius: var(--cr-radius-card);
  overflow: hidden;
  box-shadow: var(--cr-shadow-overlay);
}

.intro__video-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--cr-radius-card);
  overflow: hidden;
  box-shadow: var(--cr-shadow-overlay);
}

.intro__video-poster {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--cr-ease-standard);
}

.intro__video-trigger:hover .intro__video-poster {
  transform: scale(1.03);
}

.intro__video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 30, 62, 0.25);
  color: #fff;
  transition: background-color var(--cr-dur-base) var(--cr-ease-standard);
}

.intro__video-play svg {
  width: 64px;
  height: 64px;
  padding: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--cr-primary);
  box-shadow: var(--cr-shadow-overlay);
}

.intro__video-trigger:hover .intro__video-play {
  background: rgba(12, 30, 62, 0.38);
}

.intro__statement {
  max-width: 16em;
  margin: 0;
}

.intro__subtitle {
  margin-top: var(--cr-space-5);
  max-width: 36em;
}

.intro__cta {
  margin-top: var(--cr-space-6);
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: var(--cr-z-modal);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--cr-space-5);
  border: 0;
  background: transparent;
  color: inherit;
}
.video-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal__backdrop-form {
  position: absolute;
  inset: 0;
  margin: 0;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(12, 30, 62, 0.88);
  border: 0;
  cursor: pointer;
}

.video-modal__panel {
  position: relative;
  width: min(960px, 100%);
  z-index: 1;
}

.video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: 0;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.video-modal__video {
  width: 100%;
  border-radius: var(--cr-radius-card);
  background: #000;
}

@media (max-width: 900px) {
  .intro__grid {
    grid-template-columns: 1fr;
    gap: var(--cr-space-6);
  }
}

/* --------------------------------------------------------------------------
   3. Lifecycle — Inizio expanding panels on a powder-blue ground.
   One panel open at a time (.is-open, toggled by clicking a rail).
   Collapsed panels show only their colored name rail (no image).
   -------------------------------------------------------------------------- */

.lifecycle {
  background: var(--cr-info-bg); /* powder blue — distinct from intro fog and services white */
}

.lifecycle__head {
  margin-bottom: var(--cr-space-7);
}

.lifecycle__head .t-lead {
  margin-top: var(--cr-space-3);
}

.lifecycle__deck {
  --lc-rail-w: clamp(68px, 6vw, 88px);
  display: flex;
  gap: 8px;
  height: clamp(420px, 50vh, 540px);
}

.lifecycle__panel {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 0 0 var(--lc-rail-w); /* collapsed = rail only */
  flex-grow: 0;
  min-width: var(--lc-rail-w);
  border-radius: var(--cr-radius-card);
  overflow: hidden;
  background: var(--cr-background);
  box-shadow: var(--cr-shadow-card);
  transition: flex-grow 0.55s var(--cr-ease-standard);
}

.lifecycle__panel.is-open {
  flex-grow: 1;
}

.lifecycle__rail {
  flex: none;
  width: var(--lc-rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cr-space-4);
  padding: var(--cr-space-5) 0;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  background: var(--lc-rail, var(--cr-primary));
  color: #fff;
  transition: filter var(--cr-dur-base) var(--cr-ease-standard);
}

.lifecycle__panel:not(.is-open) .lifecycle__rail:hover {
  filter: brightness(1.18);
}

.lifecycle__rail:focus-visible {
  outline: var(--cr-border-focus);
  outline-offset: -3px;
}

.lifecycle__n {
  font-family: var(--cr-font-mono);
  font-size: var(--cr-fs-caption);
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  letter-spacing: var(--cr-tracking-wide);
}

.lifecycle__title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--cr-font-display);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: var(--cr-fw-bold);
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  margin: auto 0 0; /* pin to the bottom of the rail; reads bottom-to-top */
}

.lifecycle__media {
  position: relative;
  flex: 1;
  min-width: 0; /* collapses to nothing when the panel is closed */
  overflow: hidden;
}

.lifecycle__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9);
}

.lifecycle__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--cr-space-8) var(--cr-space-6) var(--cr-space-6);
  background: linear-gradient(180deg, transparent 0%, rgba(12, 30, 62, 0.9) 72%);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s var(--cr-ease-standard) 0.15s,
    transform 0.45s var(--cr-ease-standard) 0.15s;
}

.lifecycle__panel.is-open .lifecycle__overlay {
  opacity: 1;
  transform: translateY(0);
}

.lifecycle__body {
  margin: 0;
  color: #fff;
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.55;
  max-width: 30em;
}

@media (max-width: 860px) {
  .lifecycle__deck {
    flex-direction: column;
    height: auto;
    gap: var(--cr-space-3);
  }

  .lifecycle__panel {
    /* tallest vertical title ("Adapt & Host") needs ~260px of rail */
    min-height: 300px;
    flex: 1 1 auto;
  }

  .lifecycle__media {
    min-width: 50%;
  }

  .lifecycle__overlay {
    opacity: 1;
    transform: none;
  }

  .lifecycle__body {
    font-size: var(--cr-fs-body);
  }
}

/* --------------------------------------------------------------------------
   4. Services — hover panels, per-service theme colours
   -------------------------------------------------------------------------- */

.services__head {
  margin-bottom: var(--cr-space-7);
}

.services__head .t-lead {
  margin-top: var(--cr-space-3);
}

.svc__layout {
  display: grid;
  grid-template-columns: minmax(280px, 2fr) 3fr;
  gap: 0;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-card);
  overflow: hidden;
}

.svc__nav {
  position: relative;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--cr-border);
}

/* Gliding accent bar for the hover invitation (positioned + animated by
   services-hover.js via GSAP; height/translateY are set inline). */
.svc__cue {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--cr-brand-blue);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
  will-change: transform, height;
}

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

.svc__nav-item {
  display: flex;
  align-items: center;
  gap: var(--cr-space-4);
  width: 100%;
  text-align: left;
  padding: 22px 20px;
  border: 0;
  border-bottom: 1px solid var(--cr-border);
  background: var(--cr-background);
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--cr-fw-semibold);
  color: var(--cr-text-secondary);
  cursor: default;
  transition:
    color var(--cr-dur-base) var(--cr-ease-standard),
    background-color var(--cr-dur-base) var(--cr-ease-standard);
}

.svc__nav-item:last-child {
  border-bottom: 0;
}

.svc__nav-icon {
  flex: none;
  display: inline-flex;
}

/* Per-service DS theme accents */
.svc__nav-item--blue { --svc-accent: var(--cr-brand-blue); --svc-tint: var(--cr-info-bg); }
.svc__nav-item--teal { --svc-accent: #0d7a6f; --svc-tint: #e6f4f2; }
.svc__nav-item--navy { --svc-accent: var(--cr-primary); --svc-tint: #e8ecf4; }
.svc__nav-item--indigo { --svc-accent: #4f46b8; --svc-tint: #eeedfb; }

.svc__nav-item--blue .svc__nav-icon { color: var(--cr-brand-blue); }
.svc__nav-item--teal .svc__nav-icon { color: #0d7a6f; }
.svc__nav-item--navy .svc__nav-icon { color: var(--cr-primary); }
.svc__nav-item--indigo .svc__nav-icon { color: #4f46b8; }

.svc__nav-item.is-active,
.svc__nav-item:hover,
.svc__nav-item:focus-visible {
  color: var(--cr-text-primary);
  background: var(--svc-tint, var(--cr-surface));
  box-shadow: inset 4px 0 0 var(--svc-accent, var(--cr-brand-blue));
  outline: none;
}

.svc__detail {
  position: relative;
  padding: 40px 48px;
  background: var(--cr-background);
  transition: background-color 0.35s var(--cr-ease-standard);
}

.svc__detail--blue { background: linear-gradient(135deg, #fff 0%, var(--cr-info-bg) 100%); }
.svc__detail--teal { background: linear-gradient(135deg, #fff 0%, #e6f4f2 100%); }
.svc__detail--navy { background: linear-gradient(135deg, #fff 0%, #e8ecf4 100%); }
.svc__detail--indigo { background: linear-gradient(135deg, #fff 0%, #eeedfb 100%); }

.svc__detail-title {
  font-size: var(--cr-fs-h3);
  font-weight: var(--cr-fw-bold);
  margin: 0 0 var(--cr-space-4);
}

.svc__summary {
  margin: 0;
}

.svc__bullets {
  list-style: none;
  margin: var(--cr-space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cr-space-3);
}

.svc__bullets li {
  position: relative;
  padding-left: 28px;
  font-size: var(--cr-fs-body);
  line-height: 1.6;
}

.svc__detail--blue .svc__bullets li::before { border-color: var(--cr-brand-blue); }
.svc__detail--teal .svc__bullets li::before { border-color: #0d7a6f; }
.svc__detail--navy .svc__bullets li::before { border-color: var(--cr-primary); }
.svc__detail--indigo .svc__bullets li::before { border-color: #4f46b8; }

.svc__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--cr-brand-blue);
  border-bottom: 2px solid var(--cr-brand-blue);
  transform: rotate(-45deg);
}

.svc__cta-stack {
  display: grid;
  margin-top: var(--cr-space-6);
}

.svc__cta-stack .svc__cta {
  grid-area: 1 / 1;
  justify-self: start;
}

.svc__cta-stack .svc__cta:not(.is-active) {
  visibility: hidden;
  pointer-events: none;
}

.svc__cta {
  margin-top: 0;
}

.svc__boundary {
  margin-top: var(--cr-space-6);
  max-width: 52em;
  font-size: var(--cr-fs-small);
}

/* Hover invitation hint chip — shown on desktop while the gliding cue loops.
   Fully disabled under reduced motion (the island never starts). */
.svc__hint {
  position: absolute;
  top: var(--cr-space-5);
  right: var(--cr-space-5);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--cr-space-2);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cr-background);
  border: 1px solid var(--cr-border);
  box-shadow: var(--cr-shadow-card);
  font-size: var(--cr-fs-caption);
  font-weight: var(--cr-fw-semibold);
  letter-spacing: var(--cr-tracking-wide);
  text-transform: uppercase;
  color: var(--cr-text-secondary);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .svc__hint {
    animation: svc-hint-pulse 1.6s var(--cr-ease-standard) infinite;
  }
}

@media (max-width: 860px), (hover: none) {
  .svc__hint {
    display: none;
  }
}

@keyframes svc-hint-pulse {
  0%, 100% {
    opacity: 0.65;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@media (max-width: 860px) {
  .svc__layout {
    grid-template-columns: 1fr;
  }

  .svc__nav {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--cr-border);
  }

  .svc__nav-item {
    flex: 1 1 45%;
    border-bottom: 1px solid var(--cr-border);
    font-size: 15px;
    padding: 16px 14px;
  }

  .svc__detail {
    padding: 28px 20px;
  }
}

/* --------------------------------------------------------------------------
   5. Stats — Inizio "Global scale. Proven results." 2×2 cards, solid navy
   -------------------------------------------------------------------------- */

.stats__head {
  margin-bottom: var(--cr-space-7);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cr-space-5);
}

.stats__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--cr-space-5);
  min-height: 148px;
  padding: clamp(20px, 2.5vw, 32px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--cr-on-dark-border);
  border-radius: var(--cr-radius-card);
}

.stats__value {
  font-family: var(--cr-font-display);
  font-size: clamp(40px, 4.2vw, 64px);
  font-weight: var(--cr-fw-bold);
  letter-spacing: var(--cr-tracking-h1);
  line-height: 1;
  color: #fff;
  margin: 0;
  white-space: nowrap;
}

.stats__card .t-body {
  font-size: var(--cr-fs-small);
  max-width: 30em;
}

@media (max-width: 720px) {
  .stats__grid {
    grid-template-columns: 1fr;
  }

  .stats__card {
    min-height: 0;
    gap: var(--cr-space-4);
  }
}

/* --------------------------------------------------------------------------
   6. Pillars — 2×2 expert portraits on a dark band with cursor glow
   -------------------------------------------------------------------------- */

.pillars {
  position: relative;
  overflow: hidden;
}

.pillars__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--cr-ease-standard);
  background: radial-gradient(
    600px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(255, 255, 255, 0.14) 0%,
    rgba(0, 91, 172, 0.08) 35%,
    transparent 70%
  );
}

.pillars .container {
  position: relative;
  z-index: 1;
}

.pillars__head {
  margin-bottom: var(--cr-space-7);
}

.pillars__subtitle {
  margin-top: var(--cr-space-3);
  max-width: 40em;
}

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cr-space-5);
}

.pillars__card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--cr-space-5);
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--cr-on-dark-border);
  border-radius: var(--cr-radius-card);
  padding: var(--cr-space-5);
  transition:
    transform 0.25s var(--cr-ease-standard),
    background-color 0.25s var(--cr-ease-standard);
}

.pillars__card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.09);
}

.pillars__portrait {
  width: 120px;
  height: 140px;
  border-radius: var(--cr-radius-card);
  overflow: hidden;
  flex: none;
}

.pillars__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: saturate(0.92);
  transition: filter 0.35s var(--cr-ease-standard);
}

.pillars__card:hover .pillars__portrait img {
  filter: saturate(1);
}

.pillars__title {
  font-size: 18px;
  font-weight: var(--cr-fw-semibold);
  margin: 0 0 var(--cr-space-2);
  line-height: 1.3;
}

.pillars__text {
  font-size: var(--cr-fs-small);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 720px) {
  .pillars__grid {
    grid-template-columns: 1fr;
  }

  .pillars__card {
    grid-template-columns: 96px 1fr;
  }

  .pillars__portrait {
    width: 96px;
    height: 112px;
  }
}

/* --------------------------------------------------------------------------
   7. Workbench
   -------------------------------------------------------------------------- */

.workbench__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--cr-space-8);
  align-items: center;
}

.workbench__points {
  list-style: none;
  margin: var(--cr-space-6) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cr-space-4);
}

.workbench__points li {
  position: relative;
  padding-left: 28px;
}

.workbench__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--cr-brand-blue);
  border-bottom: 2px solid var(--cr-brand-blue);
  transform: rotate(-45deg);
}

.workbench__media img {
  border-radius: var(--cr-radius-card);
  border: 1px solid var(--cr-border);
  box-shadow: var(--cr-shadow-overlay);
}

@media (max-width: 960px) {
  .workbench__grid {
    grid-template-columns: 1fr;
    gap: var(--cr-space-6);
  }
}

/* --------------------------------------------------------------------------
   8. Insights
   -------------------------------------------------------------------------- */

.insights__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cr-space-5);
  margin-bottom: var(--cr-space-7);
  flex-wrap: wrap;
}

.insights__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cr-space-5);
}

.insights__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-card);
  overflow: hidden;
  background: var(--cr-background);
  transition: transform 0.25s var(--cr-ease-standard), box-shadow 0.25s var(--cr-ease-standard);
}

.insights__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cr-shadow-card);
}

.insights__card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.insights__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--cr-ease-standard);
}

.insights__card:hover .insights__card-media img {
  transform: scale(1.04);
}

.insights__card-body {
  padding: var(--cr-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--cr-space-3);
}

.insights__tag {
  align-self: flex-start;
  font-size: var(--cr-fs-caption);
  font-weight: var(--cr-fw-semibold);
  letter-spacing: var(--cr-tracking-wide);
  text-transform: uppercase;
  color: var(--cr-brand-blue);
}

.insights__card-title {
  font-size: 18px;
  line-height: 1.35;
  font-weight: var(--cr-fw-semibold);
  margin: 0;
  color: var(--cr-text-primary);
}

.insights__excerpt {
  font-size: var(--cr-fs-small);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1024px) {
  .insights__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .insights__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   9. Final CTA — mid-tone band flowing directly into the footer navy
   -------------------------------------------------------------------------- */

.final-cta {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: clamp(72px, 10vw, 120px);
  color: var(--cr-on-dark-primary);
  overflow: clip;
}

.final-cta__bg {
  position: absolute;
  inset: 0;
}

.final-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Focal point set in home.js finalCta.backgroundPosition (inline style). */
  object-position: center bottom;
}

.final-cta__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(26, 58, 110, 0.94) 0%,
    rgba(36, 72, 128, 0.82) 45%,
    rgba(20, 48, 96, 0.55) 100%
  );
}

.final-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cr-space-4);
}

.final-cta__title {
  max-width: 14em;
  color: inherit;
}

.final-cta__subtitle {
  max-width: 32em;
  color: var(--cr-on-dark-secondary);
  margin: 0;
}

.final-cta__actions {
  display: flex;
  gap: var(--cr-space-4);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--cr-space-3);
}

:is(.final-cta) :is(h1, h2, h3, p) {
  color: inherit;
}

.final-cta .t-muted,
.final-cta__subtitle {
  color: var(--cr-on-dark-secondary);
}

/* --------------------------------------------------------------------------
   Reduced motion: ken-burns handled globally; hero video stays static frame.
   -------------------------------------------------------------------------- */

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