/* Homepage opening composition. Website typography and the industry loop are retained. */
.home-page .hero {
  color: var(--navy);
  background: var(--stone);
  min-height: 0;
  padding-top: 7rem;
}
.home-page .hero::after { display: none; }
.home-page .hero .hero-grid {
  padding-inline: var(--page-gutter);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 5vw, 5rem);
}
.home-page .hero-copy { min-width: 0; max-width: 38rem; container-type: inline-size; }
.home-page .hero .hero-title {
  color: var(--navy);
  font-size: min(var(--home-heading-size), 10.5cqw);
  white-space: nowrap;
  text-wrap: nowrap;
}
.hero-title-line { display: inline-flex; align-items: baseline; gap: 0.18em; }
.hero-role { position: relative; display: inline-grid; grid-template-columns: minmax(0, 1fr); vertical-align: baseline; text-align: left; overflow: visible; flex-shrink: 0; }
.hero-role > span { grid-area: 1 / 1; }
.hero-role-width { visibility: hidden; pointer-events: none; }
.hero-role-current { opacity: var(--hero-role-outgoing, 1); transform: translateY(calc(var(--hero-role-progress, 0) * -0.16em)); }
.hero-role-next { opacity: var(--hero-role-incoming, 0); transform: translateY(calc((1 - var(--hero-role-progress, 0)) * 0.16em)); }
.hero-role-next { position: absolute; top: 0; left: 0; }
.home-page .hero .hero-sub { color: var(--slate); max-width: 46ch; }
.home-page .hero .hero-cta { margin-bottom: 0; gap: 0.75rem; }
.home-page .hero .hero-cta .btn { width: auto; }
.home-page .hero .btn-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--stone);
}
.home-page .hero .btn-primary:hover { background: var(--slate); border-color: var(--slate); color: var(--stone); }
.home-page .hero .btn-ghost { color: var(--navy); background: transparent; border-color: rgba(7, 17, 27, 0.22); box-shadow: none; backdrop-filter: none; }
.home-page .hero .btn-ghost:hover { color: var(--navy); background: var(--limestone); border-color: var(--navy); }
.home-page #product { scroll-margin-top: 80px; }

/* A quiet sector loop belongs to the copy column, below the CTAs. */
.hero-sectors { margin-top: 2rem; min-width: 0; }
.hero-sectors-label {
  margin: 0 0 0.75rem;
  font: 400 16px/1.5 var(--font-text);
  letter-spacing: -0.01em;
  text-transform: none;
  text-wrap: initial;
  color: var(--faint);
}
.hero-sectors-window {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 90%, transparent);
}
.hero-sectors .strip-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  width: 100%;
  padding: 0.25rem 0;
  scroll-snap-type: none;
}
.hero-sectors .strip-tags.is-marquee {
  width: max-content;
  min-width: max-content;
  padding-right: 2rem;
  animation: hero-sector-marquee 100s linear infinite;
}
.hero-sectors .strip-tags li,
.hero-sectors .strip-tags li:hover {
  font: 400 16px/1.5 var(--font-text);
  letter-spacing: -0.01em;
  color: var(--faint);
  border: 0;
  background: transparent;
}
.hero-sectors:hover .strip-tags.is-marquee,
.hero-sectors:focus-within .strip-tags.is-marquee { animation-play-state: paused; }
@keyframes hero-sector-marquee {
  to { transform: translateX(-50%); }
}

.hero-visual { position: relative; width: 100%; min-width: 0; padding: 0 0 24px clamp(2rem, 4vw, 4rem); }
.hero-portrait {
  display: block;
  width: min(calc(100% - 32px), 480px, clamp(320px, calc((100svh - 280px) * 0.8), 480px));
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.hero-command-card { position: absolute; inset: 0; max-width: none; margin: 0; }
.hero-command-card .cc-stage { position: absolute; right: 0; bottom: 24px; width: min(420px, calc(100% - 20px)); }
.hero-command-card .ps-controls { position: absolute; top: 12%; left: 0; }
.hero-command-card .ps-tabs { background: var(--navy); border-color: rgba(252, 251, 248, 0.12); box-shadow: 0 8px 22px rgb(7 17 27 / 0.16); }
.hero-command-card .ps-tabs button { color: rgba(252, 251, 248, 0.75); }
.hero-command-card .ps-tabs button:hover { color: var(--stone); }
.hero-command-card .ps-tabs button[aria-selected="true"] { color: var(--stone); background: rgba(252, 251, 248, 0.13); box-shadow: none; }
.hero-command-card .ps-tab-progress { background: #8eb8ff; }
.hero-command-card button:focus-visible { outline-color: var(--stone); outline-offset: -2px; }

/* The navigation sits on the new light hero, using the established light-header treatment. */
.home-page .site-header:not(.scrolled) .brand-logo-on-hero { display: none; }
.home-page .site-header:not(.scrolled) .brand-logo-on-white { display: block; }
.home-page .site-header:not(.scrolled) .site-nav a,
.home-page .site-header:not(.scrolled) .link-quiet { color: var(--slate); }
.home-page .site-header:not(.scrolled) .site-nav a:hover,
.home-page .site-header:not(.scrolled) .link-quiet:hover { color: var(--navy); }
.home-page .site-header:not(.scrolled) .header-actions .btn-primary { color: var(--navy); background: transparent; border-color: rgba(13, 27, 42, 0.14); box-shadow: none; }
.home-page .site-header:not(.scrolled) .header-actions .btn-primary:hover { color: var(--navy); background: var(--sky); border-color: var(--slate); box-shadow: none; }
.home-page .site-header:not(.scrolled):not(.menu-open) .mobile-menu-toggle { color: var(--navy); }

@media (min-width: 761px) and (max-width: 1000px) {
  .home-page .site-header .container { padding-inline: clamp(1.5rem, 3.75vw, 3rem); }
  .home-page .header-inner, .home-page .site-nav { gap: 1rem; }
  .home-page .site-nav a, .home-page .header-actions a { white-space: nowrap; }
}

@media (max-width: 1100px) {
  .home-page .hero { padding-top: 8.5rem; }
  .home-page .hero .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .home-page .hero-copy { max-width: 760px; }
  .home-page .hero .hero-sub { max-width: 58ch; }
  .hero-visual { max-width: 560px; margin-inline: auto; padding-left: 48px; }
  .hero-portrait { width: min(calc(100% - 64px), 384px); }
}
@media (max-width: 600px) {
  .home-page .hero { padding-top: 8rem; }
  .home-page .hero .hero-grid { gap: 2.5rem; }
  .home-page .hero .hero-cta .btn { width: auto; }
  .hero-visual { max-width: 400px; padding: 0 0 80px; }
  .hero-portrait { width: 100%; }
  .hero-command-card .cc-stage { width: 100%; bottom: 0; }
  .hero-command-card .ps-controls { top: 20px; left: 12px; }
}
@media (max-width: 360px) {
  .home-page .hero .hero-cta .btn { padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-role-current { opacity: 1; transform: none; }
  .hero-role-next { visibility: hidden; }
  .hero-sectors .strip-tags.is-marquee { animation: none; }
}

/* Neighbouring content sections each contribute half of the shared gap. */
.home-page {
  --home-section-gap: 8rem;
  --home-cta-overlap: clamp(1.5rem, 4vw, 4rem);
}
.home-page main > .section {
  padding-block: calc(var(--home-section-gap) / 2);
}
.home-page main > .hero {
  padding-bottom: calc(var(--home-section-gap) / 2);
}
.home-page .cta-surround {
  --cta-overlap: var(--home-cta-overlap);
}
/* The inset closing card owns its internal padding; reserve its full gap here. */
.home-page main > .markets-section {
  padding-bottom: calc(var(--home-section-gap) + var(--home-cta-overlap));
}
@media (max-width: 760px) {
  .home-page { --home-section-gap: 6rem; }
}