/*
  Homepage — editorial consultancy composition.
  Scoped under body.home-page where nav/hero need special treatment.
*/

body.home-page {
  background: var(--color-base-light);
  color: var(--color-ink);
  font-family: var(--font-body);
}

body.home-page main {
  padding-top: 0;
}

.home-page .home-focus:focus-visible,
.home-page a:focus-visible,
.home-page button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--color-focus-ring);
}

/* —— Home header: use global premium bar (no local overrides) —— */

/* —— Hero carousel —— */
.home-hero {
  --home-hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --home-hero-fade: 900ms;
  --home-hero-autoplay: 7000ms;
  --home-hero-chrome-h: 5.75rem;
  position: relative;
  min-height: 100vh;
  height: 100vh;
  display: block;
  background: var(--color-base-dark);
  color: var(--color-on-dark);
  padding: 0;
  overflow: hidden;
}

.home-hero__sr-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* safe: if copy is taller than the viewport, align from the top
     instead of clipping the headline under overflow:hidden */
  justify-content: safe flex-end;
  justify-content: flex-end;
  padding-top: calc(var(--header-h, 3.25rem) + 1.25rem);
  box-sizing: border-box;
  overflow: hidden;
  /* Slides stay stacked; only media crossfades. Copy swaps instantly
     so inactive headlines never ghost through during the fade. */
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  z-index: 0;
}

@supports (justify-content: safe flex-end) {
  .home-hero__slide {
    justify-content: safe flex-end;
  }
}

@media (min-width: 1024px) {
  .home-hero__slide {
    padding-top: calc(var(--header-h, 6.7rem) + 1.5rem);
  }
}

.home-hero__slide.is-active {
  pointer-events: auto;
  z-index: 1;
}

.home-hero__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--home-hero-fade) var(--home-hero-ease);
}

.home-hero__slide.is-active .home-hero__media {
  opacity: 1;
}

.home-hero__media picture,
.home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  filter: none;
  transform: scale(1.03);
  transition: transform 8s var(--home-hero-ease);
}

.home-hero__slide.is-active .home-hero__media img {
  transform: scale(1);
}

/* Hide inactive copy immediately — no opacity bleed between slides */
.home-hero__slide .home-hero__inner {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.home-hero__slide.is-active .home-hero__inner {
  opacity: 1;
  visibility: visible;
}

.home-hero__veil {
  position: absolute;
  inset: 0;
  /* Readable text without a muddy full wash — image stays clearly visible */
  background:
    linear-gradient(
      105deg,
      rgba(20, 28, 40, 0.72) 0%,
      rgba(20, 28, 40, 0.48) 38%,
      rgba(20, 28, 40, 0.18) 62%,
      rgba(20, 28, 40, 0.08) 100%
    ),
    linear-gradient(
      180deg,
      rgba(20, 28, 40, 0.35) 0%,
      rgba(20, 28, 40, 0.08) 28%,
      rgba(20, 28, 40, 0.2) 62%,
      rgba(20, 28, 40, 0.72) 100%
    );
}

.home-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding:
    0
    var(--content-pad-x)
    calc(var(--home-hero-chrome-h) + 4.25rem);
  box-sizing: border-box;
  min-height: 0;
}

.home-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.78);
  margin: 0 0 var(--space-3);
}

.home-hero__brand {
  color: var(--brand-mark, #D2011A);
}

.home-hero__eyebrow--brand {
  color: var(--brand-mark, #D2011A);
}

.home-hero__eyebrow-sep {
  opacity: 0.45;
}

.home-hero__capability {
  color: var(--color-on-dark);
}

.home-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-display-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--color-on-dark);
  max-width: 14ch;
  margin: 0;
  text-align: left;
  text-shadow: 0 1px 24px rgba(20, 28, 40, 0.25);
}

.home-hero__subhead {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-body-line);
  color: rgba(247, 245, 240, 0.88);
  max-width: 32rem;
  margin: var(--space-5) 0 0;
  text-align: left;
  text-shadow: 0 1px 18px rgba(20, 28, 40, 0.3);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.home-hero__actions .ds-btn--primary {
  box-shadow: 0 8px 28px rgba(11, 110, 153, 0.28);
}

.home-hero__actions .ds-btn--ghost-light {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(247, 245, 240, 0.06);
}

/* Scroll cue — double chevron bounce */
.home-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: calc(var(--home-hero-chrome-h, 5.75rem) + 0.65rem);
  z-index: 5;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: rgba(242, 239, 232, 0.9);
  text-decoration: none;
  border-radius: 999px;
  transition: opacity 0.35s ease, color 0.2s ease;
  pointer-events: auto;
}

.home-hero__scroll:hover,
.home-hero__scroll:focus-visible {
  color: #F2EFE8;
  outline: none;
}

.home-hero__scroll.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.home-hero__scroll-chevrons {
  display: block;
  animation: home-hero-scroll-bounce 1.7s ease-in-out infinite;
}

@keyframes home-hero-scroll-bounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  45% {
    transform: translateY(7px);
    opacity: 1;
  }
  70% {
    transform: translateY(3px);
    opacity: 0.85;
  }
}

@media (max-width: 899px) {
  .home-hero__scroll {
    bottom: calc(var(--home-hero-chrome-h, 5.75rem) + 0.35rem);
  }
}

.home-hero:not(:has(.home-hero__chrome)) .home-hero__scroll {
  bottom: 1.5rem;
}

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

/* Chrome: capability tabs + quiet controls */
.home-hero__chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
  border-top: 1px solid rgba(247, 245, 240, 0.12);
  background: linear-gradient(
    180deg,
    rgba(20, 28, 40, 0.15) 0%,
    rgba(20, 28, 40, 0.55) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.home-hero__chrome-inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-3) var(--content-pad-x) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}

.home-hero__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1) var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.home-hero__tabs::-webkit-scrollbar {
  display: none;
}

.home-hero__tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.35rem 0 0.55rem;
  margin: 0;
  cursor: pointer;
  color: rgba(247, 245, 240, 0.55);
  font-family: var(--font-body);
  font-size: clamp(0.62rem, 0.55rem + 0.35vw, 0.78rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  min-height: 44px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.45rem;
  transition: color 0.25s ease;
  scroll-snap-align: start;
  white-space: nowrap;
}

.home-hero__tab:hover,
.home-hero__tab:focus-visible {
  color: var(--color-on-dark);
}

.home-hero__tab.is-active {
  color: var(--color-on-dark);
}

.home-hero__tab-label {
  white-space: nowrap;
  max-width: none;
}

.home-hero__tab-progress {
  display: block;
  width: 100%;
  min-width: 4.5rem;
  height: 2px;
  background: rgba(247, 245, 240, 0.18);
  border-radius: 1px;
  overflow: hidden;
}

.home-hero__tab-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(159, 208, 230, 0.85) 0%, var(--brand-mark) 100%);
  transform-origin: left center;
}

.home-hero__tab.is-active .home-hero__tab-progress-bar {
  animation: home-hero-progress var(--home-hero-autoplay) linear forwards;
}

.home-hero.is-paused .home-hero__tab-progress-bar,
.home-hero[data-reduced-motion="true"] .home-hero__tab-progress-bar {
  animation: none;
}

.home-hero.is-paused .home-hero__tab.is-active .home-hero__tab-progress-bar {
  width: 100%;
  opacity: 0.55;
}

@keyframes home-hero-progress {
  from { width: 0%; }
  to { width: 100%; }
}

.home-hero__nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.home-hero__nav-btn,
.home-hero__pause {
  appearance: none;
  border: 1px solid rgba(247, 245, 240, 0.22);
  background: rgba(247, 245, 240, 0.04);
  color: var(--color-on-dark);
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.85rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.home-hero__nav-btn:hover,
.home-hero__pause:hover {
  background: rgba(247, 245, 240, 0.1);
  border-color: rgba(247, 245, 240, 0.4);
}

.home-hero__counter {
  margin: 0 0.35rem;
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  color: rgba(247, 245, 240, 0.7);
  min-width: 3.25rem;
  text-align: center;
}

.home-hero__counter-sep {
  opacity: 0.45;
  margin: 0 0.15rem;
}

.home-hero__pause {
  margin-left: 0.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--text-eyebrow-size);
}

@media (max-height: 780px) {
  .home-hero__title {
    font-size: var(--text-display-size);
  }

  .home-hero__subhead {
    margin-top: var(--space-3);
    font-size: var(--text-body-size);
  }

  .home-hero__actions {
    margin-top: var(--space-4);
  }

  .home-hero__inner {
    padding-bottom: calc(var(--home-hero-chrome-h) + 3.5rem);
  }
}

@keyframes home-hero-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.home-hero__enter {
  opacity: 0;
  animation: home-hero-enter 0.85s var(--home-hero-ease) forwards;
}

.home-hero__enter--delay { animation-delay: 0.12s; }
.home-hero__enter--delay-2 { animation-delay: 0.24s; }

@media (max-width: 900px) {
  .home-hero {
    min-height: min(88vh, 820px);
    min-height: min(88svh, 820px);
  }

  .home-hero__inner {
    /* Keep copy clear of the capability chrome */
    padding-bottom: calc(var(--home-hero-chrome-h) + 2.75rem);
  }

  .home-hero__title {
    max-width: min(var(--text-measure-title), 100%);
    font-size: var(--text-display-size);
    line-height: var(--text-display-line);
  }

  .home-hero__subhead {
    font-size: var(--text-body-lg-size);
    max-width: var(--text-measure-hero);
  }

  .home-hero__scroll {
    bottom: calc(var(--home-hero-chrome-h) + 0.35rem);
  }

  /* Full labels + horizontal scroll — never ellipsis-truncate */
  .home-hero__tabs {
    width: 100%;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    padding-bottom: 0.2rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 1.5rem), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 1.5rem), transparent 100%);
  }

  .home-hero__tabs::-webkit-scrollbar {
    display: none;
  }

  .home-hero__tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    padding-bottom: 0.4rem;
    min-height: 40px;
  }

  .home-hero__tab-label {
    max-width: none;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }

  .home-hero__tab-progress {
    min-width: 3.75rem;
  }

  .home-hero__chrome-inner {
    padding-top: var(--space-2);
    flex-wrap: nowrap;
  }
}

@media (max-width: 640px) {
  .home-hero {
    min-height: min(92vh, 760px);
    min-height: min(92svh, 760px);
    --home-hero-chrome-h: 5.25rem;
  }

  .home-hero__slide {
    padding-top: calc(var(--header-h, 3.25rem) + 0.85rem);
  }

  .home-hero__eyebrow {
    margin-bottom: var(--space-2);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }

  .home-hero__eyebrow-sep {
    display: none;
  }

  .home-hero__capability {
    max-width: 100%;
  }

  .home-hero__media img {
    /* Soften busy slide art (charts / UI chrome baked into photos) */
    filter: brightness(0.72) saturate(0.92);
    transform: scale(1.06);
  }

  .home-hero__slide.is-active .home-hero__media img {
    transform: scale(1.03);
  }

  .home-hero__title {
    font-size: var(--text-display-size);
    max-width: min(18ch, 100%);
    line-height: 1.14;
    text-shadow: 0 2px 28px rgba(20, 28, 40, 0.55);
  }

  .home-hero__actions {
    margin-top: var(--space-4);
    gap: var(--space-2);
  }

  .home-hero__actions .ds-btn {
    min-height: 44px;
    padding-inline: 1rem;
    font-size: 0.875rem;
  }

  /* Stronger veil so busy dashboard hero art doesn't fight the copy */
  .home-hero__veil {
    background:
      linear-gradient(
        180deg,
        rgba(20, 28, 40, 0.68) 0%,
        rgba(20, 28, 40, 0.55) 32%,
        rgba(20, 28, 40, 0.78) 68%,
        rgba(20, 28, 40, 0.92) 100%
      ),
      linear-gradient(
        105deg,
        rgba(20, 28, 40, 0.62) 0%,
        rgba(20, 28, 40, 0.35) 55%,
        rgba(20, 28, 40, 0.22) 100%
      );
  }

  .home-hero__subhead {
    text-shadow: 0 1px 20px rgba(20, 28, 40, 0.5);
  }

  .home-hero__nav {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__enter,
  .home-hero__enter--delay,
  .home-hero__enter--delay-2 {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .home-hero__media,
  .home-hero__slide.is-active .home-hero__media {
    transition: none;
  }

  .home-hero__media img,
  .home-hero__slide.is-active .home-hero__media img {
    transform: none;
    transition: none;
  }

  .home-hero__tab.is-active .home-hero__tab-progress-bar {
    animation: none;
    width: 100%;
  }
}

/* —— Buttons —— */
.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 48px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.home-btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.home-btn--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.home-btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.home-btn--ghost:hover {
  border-color: var(--brand-border-hover);
  color: var(--brand);
  background: var(--brand-soft);
}

.home-cta .home-btn--primary {
  background: var(--cta-band-btn-bg, #FFFFFF);
  color: var(--cta-band-btn-text, #163C4D);
}

.home-cta .home-btn--primary:hover {
  background: #F3F7F6;
  color: var(--cta-band-btn-text, #163C4D);
}

.home-cta .home-btn--ghost {
  color: var(--cta-band-title, #FFFFFF);
  border-color: rgba(255, 255, 255, 0.35);
}

.home-cta .home-btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  color: var(--cta-band-title, #FFFFFF);
}

.home-btn--outline-dark {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}

.home-btn--outline-dark:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* —— Sections —— */
.home-section {
  padding-block: clamp(4.5rem, 10vw, 7.5rem);
}

.home-section--light { background: var(--color-base-light); }
.home-section--surface { background: var(--color-surface); }
.home-section--white {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.home-section__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--content-pad-x);
}

.home-section__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
}

.home-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-h2-line);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
  max-width: 16ch;
  text-align: left;
}

.home-section__title--xl {
  font-size: var(--text-h2-size);
  line-height: 1.08;
  max-width: 14ch;
  letter-spacing: -0.03em;
}

.home-section--white .home-section__title {
  color: var(--text-primary);
}

.home-section__lede {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: 1.65;
  color: var(--color-ink-muted);
  margin: var(--space-4) 0 0;
  max-width: 36rem;
  text-align: left;
}

.home-section--white .home-section__lede {
  color: var(--text-secondary);
}

.home-section__header { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.home-section__header--statement { max-width: 40rem; }
.home-section__footer { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* —— Editorial split —— */
.home-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .home-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5.5rem);
  }
  .home-split--reverse .home-split__copy { order: 2; }
  .home-split--reverse .home-split__media { order: 1; }
}

.home-split__media {
  aspect-ratio: 4 / 3;
  margin: 0;
}

.home-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Calm section reveal */
.home-reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.home-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .home-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* —— Approach list —— */
.home-approach-list {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.home-approach-list li {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-ink-muted);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
}

.home-approach-list strong {
  color: var(--color-ink);
  font-weight: var(--font-weight-semibold);
}

.home-section--white .home-approach-list li {
  color: var(--text-secondary);
}
.home-section--white .home-approach-list strong {
  color: var(--text-primary);
}

/* —— Tech ecosystem —— */
.home-tech-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

@media (min-width: 700px) {
  .home-tech-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.home-tech-grid__item {
  background: var(--color-surface);
  padding: var(--space-4) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  letter-spacing: 0.01em;
}

/* —— Numbers —— */
.home-numbers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin: 0;
}

@media (min-width: 700px) {
  .home-numbers {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

.home-numbers__item {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-strong);
}

.home-numbers__value {
  font-family: var(--font-heading);
  font-size: var(--text-display-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.home-numbers__label {
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
  margin: 0;
  max-width: 16ch;
}

/* —— Featured work (cinematic full-bleed) —— */
.home-work {
  background: var(--color-base-dark);
  color: var(--color-on-dark);
  padding-block: clamp(4rem, 8vw, 6.5rem) 0;
}

.home-work__intro {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--content-pad-x);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.home-work__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
}

.home-work__title {
  font-family: var(--font-heading);
  font-size: var(--text-h1-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--color-on-dark);
  margin: 0 0 var(--space-4);
  max-width: 12ch;
}

.home-work__lede {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-on-dark-muted);
  margin: 0;
  max-width: 42ch;
}

.home-work__stages {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.home-work-stage {
  position: relative;
  display: block;
  min-height: min(72vh, 720px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}

.home-work-stage--lead {
  min-height: min(88vh, 900px);
}

.home-work-stage__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-work-stage__media img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  display: block;
  transform: translate3d(0, var(--work-parallax, -4%), 0) scale(1.04);
  will-change: transform;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-work-stage.is-inview .home-work-stage__media img {
  transform: translate3d(0, var(--work-parallax, 0%), 0) scale(1.02);
}

.home-work-stage:hover .home-work-stage__media img,
.home-work-stage:focus-visible .home-work-stage__media img {
  transform: translate3d(0, var(--work-parallax, -2%), 0) scale(1.06);
}

.home-work-stage__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(7, 11, 20, 0.92) 0%, rgba(7, 11, 20, 0.72) 38%, rgba(7, 11, 20, 0.28) 68%, rgba(7, 11, 20, 0.45) 100%),
    linear-gradient(to top, rgba(7, 11, 20, 0.75) 0%, transparent 45%);
  pointer-events: none;
}

.home-work-stage__content {
  position: relative;
  z-index: 1;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) var(--content-pad-x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: inherit;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-work-stage.is-inview .home-work-stage__content {
  opacity: 1;
  transform: translateY(0);
}

.home-work-stage:nth-child(2) .home-work-stage__content { transition-delay: 0.06s; }
.home-work-stage:nth-child(3) .home-work-stage__content { transition-delay: 0.1s; }

.home-work-stage__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.7);
}

.home-work-stage__index { color: var(--brand-mark); }
.home-work-stage__sep { opacity: 0.5; }

.home-work-stage__name {
  font-family: var(--font-heading);
  font-size: var(--text-display-size);
  font-weight: var(--font-weight-semibold);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: #F2EFE8;
  margin: 0 0 var(--space-4);
  max-width: 10ch;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-work-stage:hover .home-work-stage__name,
.home-work-stage:focus-visible .home-work-stage__name {
  transform: translateX(6px);
}

.home-work-stage__metric {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0 0 var(--space-4);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-accent);
}

.home-work-stage__metric-value {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  color: #F2EFE8;
  letter-spacing: -0.02em;
}

.home-work-stage__metric-label {
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  line-height: 1.45;
  color: rgba(242, 239, 232, 0.72);
  max-width: 32ch;
}

.home-work-stage__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: 1.6;
  color: rgba(242, 239, 232, 0.78);
  margin: 0 0 var(--space-5);
  max-width: 38ch;
}

.home-work-stage__cta {
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease, gap 0.25s ease;
}

.home-work-stage:hover .home-work-stage__cta,
.home-work-stage:focus-visible .home-work-stage__cta {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent-hover);
  gap: 0.65rem;
}

.home-work__footer {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-8) var(--content-pad-x) var(--space-10);
}

@media (max-width: 699px) {
  .home-work-stage,
  .home-work-stage--lead {
    min-height: min(78vh, 640px);
    min-height: min(78svh, 640px);
  }

  .home-work-stage--lead {
    min-height: min(86svh, 700px);
  }

  .home-work-stage__veil {
    background:
      linear-gradient(to top, rgba(7, 11, 20, 0.94) 0%, rgba(7, 11, 20, 0.7) 42%, rgba(7, 11, 20, 0.35) 100%);
  }

  .home-work-stage__content {
    justify-content: flex-end;
    padding-block: 2.5rem 3rem;
    padding-inline: var(--content-pad-x, 16px);
  }

  .home-work-stage__name {
    font-size: var(--text-display-size);
    max-width: min(var(--text-measure-title), 100%);
  }

  .home-work-stage__excerpt {
    font-size: var(--text-body-size);
    -webkit-line-clamp: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-work-stage__media img,
  .home-work-stage__content,
  .home-work-stage__name,
  .home-work-stage__cta {
    transition: none !important;
  }

  .home-work-stage__content {
    opacity: 1;
    transform: none;
  }

  .home-work-stage__media img,
  .home-work-stage.is-inview .home-work-stage__media img,
  .home-work-stage:hover .home-work-stage__media img {
    transform: none;
    height: 100%;
  }

  .home-work-stage:hover .home-work-stage__name {
    transform: none;
  }
}

/* —— Services horizontal rail (native scroll + drag + arrows) —— */
.home-svc-rail {
  --svc-rail-gap: 1.375rem; /* 22px */
  --svc-rail-visible: 1.12;
  --svc-rail-gap-count: 0.12;
  --svc-rail-end-pad: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--bg-primary);
  color: var(--text-primary);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  overflow: visible;
}

.home-svc-rail__pin {
  max-width: none;
}

.home-svc-rail__header {
  max-width: var(--content-max-width);
  margin: 0 auto 1.5rem;
  padding-inline: var(--content-pad-x);
}

.home-svc-rail__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.65rem;
}

.home-svc-rail__heading-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}

.home-svc-rail__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0;
  max-width: 16ch;
}

.home-svc-rail__actions {
  display: flex;
  align-items: center;
  gap: 0.85rem 1.1rem;
  flex-wrap: wrap;
}

.home-svc-rail__nav {
  display: none;
  align-items: center;
  gap: 0.45rem;
}

.home-svc-rail__nav-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.35s ease,
    color 0.35s ease,
    background 0.35s ease,
    opacity 0.35s ease,
    transform 0.35s ease;
}

.home-svc-rail__nav-btn:hover,
.home-svc-rail__nav-btn:focus-visible {
  border-color: var(--brand-border-hover);
  color: var(--color-accent);
  outline: none;
  transform: translateY(-1px);
}

.home-svc-rail__nav-btn:active:not(:disabled) {
  transform: translateY(0);
}

.home-svc-rail__nav-btn:disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
  transform: none;
}

.home-svc-rail__all {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}

.home-svc-rail__all:hover {
  color: var(--brand-hover);
}

.home-svc-rail__lede {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0.85rem 0 0;
  max-width: 38rem;
}

.home-svc-rail__viewport {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: var(--content-pad-x);
  scroll-snap-type: x proximity;
  scroll-behavior: auto; /* JS drives smooth motion */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  cursor: grab;
  container-type: inline-size;
  container-name: svc-rail;
  /* Hide native scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.home-svc-rail__viewport::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Soft edge fades when more cards are off-screen */
.home-svc-rail.has-overflow:not(.is-at-start) .home-svc-rail__viewport {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 100%);
}

.home-svc-rail.has-overflow:not(.is-at-end) .home-svc-rail__viewport {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.75rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.75rem), transparent 100%);
}

.home-svc-rail.has-overflow:not(.is-at-start):not(.is-at-end) .home-svc-rail__viewport {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 1.25rem,
    #000 calc(100% - 1.75rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 1.25rem,
    #000 calc(100% - 1.75rem),
    transparent 100%
  );
}

html[dir="rtl"] .home-svc-rail.has-overflow:not(.is-at-start) .home-svc-rail__viewport {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 1.25rem, #000 100%);
  mask-image: linear-gradient(to left, transparent 0, #000 1.25rem, #000 100%);
}

html[dir="rtl"] .home-svc-rail.has-overflow:not(.is-at-end) .home-svc-rail__viewport {
  -webkit-mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 1.75rem), transparent 100%);
  mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 1.75rem), transparent 100%);
}

html[dir="rtl"] .home-svc-rail.has-overflow:not(.is-at-start):not(.is-at-end) .home-svc-rail__viewport {
  -webkit-mask-image: linear-gradient(
    to left,
    transparent 0,
    #000 1.25rem,
    #000 calc(100% - 1.75rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to left,
    transparent 0,
    #000 1.25rem,
    #000 calc(100% - 1.75rem),
    transparent 100%
  );
}

.home-svc-rail__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.home-svc-rail__viewport.is-scrolling {
  scroll-snap-type: none;
}

.home-svc-rail__viewport.is-dragging .home-svc-rail__link,
.home-svc-rail__viewport.is-scrolling .home-svc-rail__link {
  pointer-events: none;
}

.home-svc-rail__viewport:focus-visible {
  outline: 2px solid var(--brand-border-hover, var(--color-accent));
  outline-offset: 4px;
}

.home-svc-rail__track {
  display: flex;
  gap: var(--svc-rail-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-end: var(--svc-rail-end-pad);
  width: max-content;
  align-items: stretch;
}

.home-svc-rail__card {
  --svc-rail-card-w: calc(
    (100cqi - (var(--svc-rail-gap) * var(--svc-rail-gap-count))) / var(--svc-rail-visible)
  );
  flex: 0 0 var(--svc-rail-card-w);
  width: var(--svc-rail-card-w);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.home-svc-rail__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 22rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.4s ease;
}

.home-svc-rail__link:hover,
.home-svc-rail__link:focus-visible {
  border-color: var(--brand-border-hover);
}

.home-svc-rail__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--bg-tertiary);
  flex: 0 0 auto;
}

.home-svc-rail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.home-svc-rail__link:hover .home-svc-rail__media img,
.home-svc-rail__link:focus-visible .home-svc-rail__media img {
  transform: scale(1.03);
}

.home-svc-rail__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 25%,
      rgba(7, 11, 20, 0.45) 70%,
      rgba(7, 11, 20, 0.92) 100%
    );
  pointer-events: none;
}

.home-svc-rail__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1rem 1.15rem 1.2rem;
  gap: 0.4rem;
  min-height: 0;
}

.home-svc-rail__index {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow-size);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brand-mark);
}

.home-svc-rail__name {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--text-primary);
}

.home-svc-rail__desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-svc-rail__cta {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  margin-top: auto;
  padding-top: 0.55rem;
  transition: color 0.4s ease;
}

.home-svc-rail__cta span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-svc-rail__link:hover .home-svc-rail__cta {
  color: var(--brand-hover);
}

.home-svc-rail__link:hover .home-svc-rail__cta span[aria-hidden="true"],
.home-svc-rail__link:focus-visible .home-svc-rail__cta span[aria-hidden="true"] {
  transform: translateX(0.3rem);
}

.home-svc-rail__progress {
  max-width: var(--content-max-width);
  margin: 1.25rem auto 0;
  padding-inline: var(--content-pad-x);
  height: 2px;
  background: var(--border);
  overflow: hidden;
  flex-shrink: 0;
}

.home-svc-rail__progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #163C4D 0%, #163C4D 72%, var(--brand-mark) 100%);
  transition: transform 0.25s ease-out;
  will-change: transform;
}

html[dir="rtl"] .home-svc-rail__progress-bar {
  transform-origin: right center;
}

/* Small phones: ~1.1 cards peek */
@media (max-width: 599px) {
  .home-svc-rail {
    --svc-rail-gap: 1.25rem; /* 20px */
    --svc-rail-visible: 1.1;
    --svc-rail-gap-count: 0.1;
    padding-block: 2.5rem 2rem;
  }

  .home-svc-rail__link {
    min-height: 0;
  }
}

/* Large phones / small tablets: ~1.5–1.8 cards */
@media (min-width: 600px) and (max-width: 899px) {
  .home-svc-rail {
    --svc-rail-gap: 1.375rem;
    --svc-rail-visible: 1.65;
    --svc-rail-gap-count: 0.7;
  }
}

/* Tablets approaching desktop: ~2–2.2 cards */
@media (min-width: 768px) and (max-width: 899px) {
  .home-svc-rail {
    --svc-rail-visible: 2.05;
    --svc-rail-gap-count: 1.1;
  }
}

/* Desktop: ~3–3.5 cards + arrow controls */
@media (min-width: 900px) {
  .home-svc-rail {
    --svc-rail-gap: 1.5rem; /* 24px */
    --svc-rail-visible: 3.35;
    --svc-rail-gap-count: 2.5;
  }

  .home-svc-rail__nav {
    display: inline-flex;
  }

  .home-svc-rail__link {
    min-height: 24rem;
  }
}

@media (min-width: 1200px) {
  .home-svc-rail {
    --svc-rail-visible: 3.4;
    --svc-rail-gap-count: 2.4;
  }
}

@media (max-width: 899px) {
  .home-svc-rail__progress {
    display: none;
  }

  /* Native swipe — avoid mask fighting touch momentum */
  .home-svc-rail.has-overflow:not(.is-at-start) .home-svc-rail__viewport,
  .home-svc-rail.has-overflow:not(.is-at-end) .home-svc-rail__viewport,
  .home-svc-rail.has-overflow:not(.is-at-start):not(.is-at-end) .home-svc-rail__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .home-svc-rail__viewport {
    scroll-behavior: smooth;
    cursor: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-svc-rail__viewport {
    scroll-behavior: auto;
  }

  .home-svc-rail__link,
  .home-svc-rail__media img,
  .home-svc-rail__cta,
  .home-svc-rail__cta span[aria-hidden="true"],
  .home-svc-rail__nav-btn,
  .home-svc-rail__progress-bar {
    transition: none;
  }

  .home-svc-rail__link:hover .home-svc-rail__media img,
  .home-svc-rail__link:focus-visible .home-svc-rail__media img {
    transform: none;
  }

  .home-svc-rail__link:hover .home-svc-rail__cta span[aria-hidden="true"],
  .home-svc-rail__link:focus-visible .home-svc-rail__cta span[aria-hidden="true"] {
    transform: none;
  }
}

/* —— Insights —— */
.home-insights-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.home-insights-list li {
  border-bottom: 1px solid var(--border);
}

.home-insights-list__link {
  display: grid;
  gap: 0.45rem;
  padding-block: clamp(1.5rem, 3vw, 2.15rem);
  text-decoration: none;
  color: inherit;
}

@media (min-width: 768px) {
  .home-insights-list__link {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .home-insights-list__meta { grid-column: 1; }
  .home-insights-list__title { grid-column: 1; }
  .home-insights-list__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

.home-insights-list__meta {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.home-insights-list__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  max-width: 28ch;
}

.home-insights-list__arrow {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
}

.home-insights-list__link:hover .home-insights-list__title {
  color: var(--brand-mark, #D2011A);
}

.home-insights-list__link:hover .home-insights-list__arrow {
  color: var(--brand-mark, #D2011A);
}

/* —— Final CTA —— */
.home-cta {
  background: var(--cta-band-bg, #163C4D);
  color: var(--cta-band-title, #FFFFFF);
  padding-block: clamp(4.5rem, 10vw, 7.5rem);
}

.home-cta__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--content-pad-x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.home-cta__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--cta-band-title, #FFFFFF);
  margin: 0;
  max-width: 12ch;
}

.home-cta__lede {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: 1.65;
  color: var(--cta-band-text, rgba(255, 255, 255, 0.78));
  margin: 0;
  max-width: 34rem;
}

body.home-page .site-footer__inner {
  max-width: var(--content-max-width);
}

/* —— Hero sticky once; rest of page scrolls over it normally —— */
.page-stack {
  position: relative;
  isolation: isolate;
}

.page-stack__hero {
  position: relative;
  z-index: 1;
}

.page-stack__rest {
  position: relative;
  z-index: 2;
  background: var(--color-base-light);
}

@media (min-width: 900px) {
  .page-stack__hero {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
  }

  .page-stack__rest {
    box-shadow: 0 -20px 48px rgba(16, 24, 32, 0.08);
  }

  .page-stack.is-enhanced .home-hero__slides {
    transform-origin: center center;
  }
}

@media (max-width: 899px) {
  .home-hero {
    height: auto;
    min-height: min(92vh, 820px);
    min-height: min(92svh, 820px);
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-stack__hero {
    position: relative !important;
    height: auto !important;
    min-height: min(92vh, 820px) !important;
    max-height: none !important;
  }
}

/* —— Selected work: stacked card carousel —— */
.work-stack {
  background: var(--bg-primary);
  color: var(--text-primary);
  padding-block: clamp(4rem, 8vw, 6rem);
  overflow: hidden;
}

.work-stack__intro {
  max-width: var(--content-max-width);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding-inline: var(--content-pad-x);
}

.work-stack__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
}

.work-stack__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0;
  max-width: 14ch;
}

.work-stack__lede {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: 1.65;
  color: var(--text-secondary);
  margin: var(--space-4) 0 0;
  max-width: 36rem;
}

.work-stack__stage {
  max-width: min(1120px, calc(100% - 2 * var(--content-pad-x)));
  margin: 0 auto;
  position: relative;
}

.work-stack__deck {
  position: relative;
  height: min(68vh, 560px);
  perspective: 1400px;
  transform-style: preserve-3d;
}

@media (max-width: 899px) {
  .work-stack {
    padding-block: clamp(3rem, 7vw, 4.5rem);
  }

  .work-stack__deck {
    height: min(72svh, 520px);
  }

  .work-stack__card {
    border-width: 8px;
    border-radius: 1.35rem;
  }

  .work-stack__heading {
    font-size: var(--text-h3-size);
  }

  .work-stack__text {
    -webkit-line-clamp: 3;
    font-size: var(--text-body-sm-size);
  }
}

.work-stack__card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0E1624;
  border: 10px solid #0E1624;
  border-radius: 1.75rem;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(22, 60, 77, 0.18);
  transform-origin: center bottom;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.work-stack__link {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1.05fr) minmax(0, 1fr);
  height: 100%;
  gap: 0.65rem;
  padding: 0.35rem;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

.work-stack__media {
  position: relative;
  overflow: hidden;
  border-radius: 1.15rem;
  background: #0E1624;
  min-height: 0;
}

.work-stack__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Soft fill for logo art so cover doesn't look harsh at edges */
.work-stack__media--logo {
  background: var(--bg-tertiary, #F7F5F0);
}

.work-stack__media--logo img {
  object-position: center 42%;
}

.work-stack__media--contain {
  background: var(--bg-secondary, #F0EEE8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-stack__media--contain img {
  object-fit: contain;
}

.work-stack__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.65rem;
  padding: 1.35rem 1.35rem 1.45rem;
  background: var(--surface-elevated, #F7F5F0);
  border-radius: 1.15rem;
  color: var(--text-primary);
  min-height: 0;
  position: relative;
  z-index: 1;
}

.work-stack__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: var(--text-eyebrow-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.work-stack__index { color: var(--brand-mark); }
.work-stack__sep { opacity: 0.4; }

.work-stack__heading {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
  color: var(--text-primary);
  max-width: 16ch;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--brand, #163C4D);
  display: inline-block;
  width: fit-content;
}

.work-stack__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 34rem;
}

.work-stack__metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: auto 0 0;
  padding-top: 0.75rem;
}

.work-stack__metric-value {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
}

.work-stack__metric-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  max-width: 18rem;
}

.work-stack__cta {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent, #163C4D);
}

.work-stack__link:hover .work-stack__cta {
  color: var(--text-primary);
}

.work-stack__link:hover .work-stack__heading {
  color: var(--brand-interactive-hover, #164A66);
}

.work-stack__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.work-stack__nav {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.work-stack__nav:hover,
.work-stack__nav:focus-visible {
  border-color: var(--brand-border-hover);
  color: var(--color-accent);
  outline: none;
}

.work-stack__counter {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  min-width: 4.5rem;
  text-align: center;
}

.work-stack__counter-sep {
  margin: 0 0.25rem;
  opacity: 0.45;
}

.work-stack__footer {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) var(--content-pad-x) 0;
}

@media (min-width: 900px) {
  .work-stack__deck {
    height: min(68vh, 540px);
  }

  .work-stack__card {
    border-width: 12px;
    border-radius: 2rem;
  }

  .work-stack__link {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: 1fr;
    gap: 0.75rem;
    padding: 0.45rem;
  }

  .work-stack__media,
  .work-stack__body {
    border-radius: 1.35rem;
    height: 100%;
    min-height: 0;
  }

  .work-stack__body {
    padding: clamp(1.75rem, 3vw, 2.5rem);
  }

  .work-stack__heading {
    font-size: var(--text-h3-size);
  }

  .work-stack__text {
    -webkit-line-clamp: 4;
    font-size: 1.02rem;
  }

  .work-stack__metric-value {
    font-size: var(--text-h1-size);
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-stack__card {
    transition: none !important;
  }
}

/* —— Dark theme restores for home surfaces —— */
[data-theme="dark"] .home-svc-rail {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

[data-theme="dark"] .home-svc-rail__link {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .home-svc-rail__nav-btn {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

[data-theme="dark"] .work-stack {
  background: var(--bg-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .work-stack__card {
  background: var(--surface-elevated);
  border-color: var(--surface-elevated);
}

[data-theme="dark"] .work-stack__media--logo,
[data-theme="dark"] .work-stack__media--contain {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .work-stack__nav {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

[data-theme="dark"] .home-cta {
  background: var(--cta-band-bg);
  color: var(--cta-band-title);
}

/* —— RTL adjustments (logical flips for directional UI) —— */
html[dir="rtl"] .home-svc-rail__cta span[aria-hidden="true"],
html[dir="rtl"] .home-insights-list__arrow,
html[dir="rtl"] .work-stack__cta span[aria-hidden="true"],
html[dir="rtl"] .home-hero__scroll-cue {
  transform: scaleX(-1);
}

html[dir="rtl"] .home-svc-rail__link:hover .home-svc-rail__cta span[aria-hidden="true"],
html[dir="rtl"] .home-svc-rail__link:focus-visible .home-svc-rail__cta span[aria-hidden="true"] {
  transform: scaleX(-1) translateX(0.3rem);
}

html[dir="rtl"] .home-svc-rail__nav-btn span[aria-hidden="true"] {
  display: inline-block;
  transform: scaleX(-1);
}

html[dir="rtl"] .home-hero__copy,
html[dir="rtl"] .home-section__intro {
  text-align: start;
}