/*
 * =========================================================
 * OLYTIC SOLUTIONS - Homepage Page-Specific Styles
 * home.css  /  Route: /
 *
 * Covers:
 *   - Hero section (dark, two-column, decorative mark)
 *   - Systems banner (auto-scrolling logo/platform strip)
 *   - "What's slowing you down" intro + capability card grid
 *   - Case study (Valor Medical Reviews spotlight)
 *   - Roadmap CTA (Navy, two-column)
 *
 * CSS load order (must follow):
 *   tokens.css → typography.css → buttons.css → nav.css → footer.css → layout.css → home.css
 * =========================================================
 */

/* ─────────────────────────────────────────────────────── */
/* SECTION 1: HERO                                         */
/* ─────────────────────────────────────────────────────── */

.hero {
  background-color: var(--color-obsidian);
  color: #FFFFFF;
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  position: relative;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: var(--space-16);
}

.hero__accent-rule {
  width: 48px;
  height: 2px;
  background-color: var(--color-gold);
  margin-bottom: var(--space-8);
}

.hero__headline {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
  max-width: 760px;
}

.hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: rgba(255, 255, 255, 0.78);
  line-height: var(--leading-body);
  max-width: 560px;
  margin-bottom: var(--space-10);
}

.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

/* Locked shape composition.
   Grammar: every shape is a segment of the same circle family
   (152px petal radius, 80px accent radius), flat brand color,
   sized and positioned on the 8pt grid, and anchored to an edge
   line of the photo. Nothing floats, nothing overlaps a face. */
.hero__composition {
  position: relative;
  width: 448px;
  height: 448px;
}

.hero__shape {
  position: absolute;
}

/* Teal quarter-disc tucked behind the photo's shoulder,
   sharing the composition's top edge. */
.hero__shape--teal {
  top: 0;
  right: 0;
  width: 160px;
  height: 160px;
  background-color: var(--color-teal);
  border-radius: 0 160px 0 0;
}

/* Gold half-disc anchored under the photo's bottom edge. */
.hero__shape--gold {
  left: 64px;
  bottom: 0;
  width: 160px;
  height: 80px;
  background-color: var(--color-gold);
  border-radius: 0 0 80px 80px;
}

/* Small gold disc nested beside the photo's squared corner. */
.hero__shape--dot {
  left: 312px;
  top: 312px;
  width: 48px;
  height: 48px;
  background-color: var(--color-gold);
  border-radius: 50%;
}

/* Thin brand ring peeking from behind the photo's top-left curve. */
.hero__shape--ring {
  left: -8px;
  top: 0;
  width: 96px;
  height: 96px;
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  opacity: 0.8;
}

/* Photo petal: three corners on the ring radius, one squared,
   echoing the clipped-corner photo card in the Engage section. */
.hero__photo-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 304px;
  height: 360px;
  border-radius: 152px 152px 24px 152px;
  overflow: hidden;
  background-color: var(--color-obsidian);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Narrow desktops: scale the whole composition, never reflow it. */
@media (max-width: 1160px) {
  .hero__composition {
    transform: scale(0.82);
    transform-origin: center;
  }
}

.hero__rule {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--color-gold) 20%,
    var(--color-gold) 80%,
    transparent 100%
  );
  opacity: 0.6;
}

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

  .hero__visual {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero__sub {
    font-size: var(--text-base);
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 2: SYSTEMS BANNER (auto-scrolling logo strip)    */
/* ─────────────────────────────────────────────────────── */

.systems-banner {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  overflow: hidden;
}

.systems-banner__caption {
  text-align: center;
  margin-top: var(--space-4);
}

.systems-banner__caption p {
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: var(--leading-body);
  max-width: none;
  margin: 0;
}

/* Full-bleed track: intentionally not wrapped in .container so it can
   scroll edge to edge of the section. */
.systems-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.systems-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--space-16);
  animation: systems-scroll 90s linear infinite;
}

.systems-marquee:hover .systems-track {
  animation-play-state: paused;
}

@keyframes systems-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.sys-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  color: var(--color-muted);
}

.sys-icon {
  width: 32px;
  height: 32px;
  fill: currentColor;
  flex-shrink: 0;
  opacity: 0.9;
}

.sys-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

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

  .systems-marquee {
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  .systems-track {
    gap: var(--space-10);
  }

  .sys-icon {
    width: 24px;
    height: 24px;
  }

  .sys-name {
    font-size: var(--text-base);
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 3: WHAT'S SLOWING YOU DOWN + CAPABILITIES        */
/* ─────────────────────────────────────────────────────── */

.problem {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.problem__intro {
  max-width: 720px;
  margin-bottom: var(--space-16);
}

.problem__intro p {
  font-size: var(--text-md);
  color: var(--color-body-steel);
  line-height: var(--leading-body);
  margin-bottom: var(--space-5);
}

/* ── Process diagram (same markup as How We Work's process-hero;
     text recolored here for a white background instead of teal) ── */

.process-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 390;
  min-height: 280px;
  margin-bottom: var(--space-16);
}

.process-diagram__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.process-node {
  position: absolute;
}

.process-node svg {
  margin-bottom: var(--space-4);
}

.process-node h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  margin-bottom: var(--space-2);
}

.process-node p {
  font-size: var(--text-sm);
  color: var(--color-body-steel);
  line-height: var(--leading-body);
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .process-diagram {
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .process-diagram__line {
    display: none;
  }

  .process-node {
    position: static;
    width: 100% !important;
  }
}

.capability-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.capability-header__rule {
  display: inline-block;
  width: 40px;
  height: 2px;
  background-color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.capability-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-gold);
  max-width: none;
  margin: 0;
}

/* Win over .section--dark p (the eyebrow is a <p> on the dark band) */
.capabilities .capability-eyebrow {
  color: var(--color-gold);
}

.capability-heading {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  max-width: 22ch;
  margin: var(--space-4) auto 0;
}

/* Capability tiles: gold rule + noun-phrase title + one-line tagline */
.capability-grid {
  row-gap: var(--space-10);
}

.capability-tile {
  display: flex;
  flex-direction: column;
}

.capability-tile__icon {
  display: block;
  width: 28px;
  height: 28px;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.capability-tile__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  margin: 0 0 var(--space-2);
}

.capability-tile__body {
  font-size: var(--text-base);
  color: var(--color-body-steel);
  line-height: var(--leading-body);
  margin: 0;
}

/* ─────────────────────────────────────────────────────── */
/* MOTION: hover polish, scroll-reveal, process line draw   */
/* Reveal states are gated on html.js so content is never   */
/* hidden if JavaScript fails to run.                       */
/* ─────────────────────────────────────────────────────── */

/* Capability tile hover: icon lifts slightly, title shifts to gold */
.capability-tile__icon {
  transition: transform var(--transition-base) ease;
}

.capability-tile__title {
  transition: color var(--transition-fast) ease;
}

.capability-tile:hover .capability-tile__icon {
  transform: translateY(-2px);
}

.capability-tile:hover .capability-tile__title {
  color: var(--color-gold);
}

/* Initial hidden state (JS present only) */
html.js .capability-tile,
html.js .process-node {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease,
              transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

html.js .capability-grid.is-visible .capability-tile,
html.js .process-diagram.is-visible .process-node {
  opacity: 1;
  transform: none;
}

/* Staggered cascade for capability tiles */
html.js .capability-grid.is-visible .capability-tile:nth-child(2) { transition-delay: 0.06s; }
html.js .capability-grid.is-visible .capability-tile:nth-child(3) { transition-delay: 0.12s; }
html.js .capability-grid.is-visible .capability-tile:nth-child(4) { transition-delay: 0.18s; }
html.js .capability-grid.is-visible .capability-tile:nth-child(5) { transition-delay: 0.24s; }
html.js .capability-grid.is-visible .capability-tile:nth-child(6) { transition-delay: 0.30s; }

/* Process nodes fade in as the connector line reaches them */
html.js .process-diagram.is-visible .process-node:nth-of-type(2) { transition-delay: 0.35s; }
html.js .process-diagram.is-visible .process-node:nth-of-type(3) { transition-delay: 0.70s; }
html.js .process-diagram.is-visible .process-node:nth-of-type(4) { transition-delay: 1.05s; }

/* Wavy connector draws itself in when the diagram scrolls into view */
html.js .process-diagram__path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

html.js .process-diagram.is-visible .process-diagram__path {
  transition: stroke-dashoffset 1.6s ease;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.js .capability-tile,
  html.js .process-node {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js .process-diagram__path {
    stroke-dashoffset: 0;
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 5: EXPLORE (image card carousel, dark band)      */
/* ─────────────────────────────────────────────────────── */

/* Continue the obsidian band from capabilities as one region */
.capabilities {
  padding-bottom: var(--space-16);
}

.explore {
  padding-top: var(--space-8);
  padding-bottom: 0;
  margin-top: -1px;
  overflow: hidden;
}

/* Positioning context for the side buttons; clips the peek cards
   at the content column so a partial card shows on each edge.
   Vertical padding leaves room for the card hover lift + shadow. */
.explore__viewport {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) 0;
}

/* Prev/next buttons overlaid on the left and right edges */
.explore__btn {
  position: absolute;
  top: 34%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-obsidian);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-fast) ease,
              box-shadow var(--transition-fast) ease,
              opacity var(--transition-fast) ease;
}

.explore__btn--prev { left: 8px; }
.explore__btn--next { right: 8px; }

.explore__btn svg {
  width: 22px;
  height: 22px;
}

.explore__btn:hover {
  background: #FFFFFF;
  box-shadow: var(--shadow-md);
}

.explore__btn:disabled {
  opacity: 0;
  pointer-events: none;
}

/* Transform-driven track: JS sizes the cards and translates the
   track. Two full cards show, with a faded partial card peeking on
   BOTH edges. Rotation of DOM order makes it loop endlessly. */
.explore__track {
  display: flex;
  gap: var(--space-6);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Light-surface card: icon badge, title, full description stacked
   top-to-bottom (no split media panel). Only the bottom-right corner
   stays square; the other three are rounded. */
.explore-card {
  flex: 0 0 44%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 420px;
  border-radius: 28px 28px 0 28px;
  border: none;
  background-color: var(--color-surface);
  padding: var(--space-8);
  text-decoration: none;
  transition: box-shadow var(--transition-fast) ease,
              transform var(--transition-fast) ease,
              opacity var(--transition-base) ease;
}

/* Active (non-peek) cards carry a standing shadow so they read as
   "lifted" against the faded peeks; hover lifts further still. */
.explore-card:not(.explore-card--peek) {
  box-shadow: 0 12px 28px rgba(26, 26, 26, 0.10);
}

.explore-card:hover {
  box-shadow: 0 18px 38px rgba(26, 26, 26, 0.16);
  transform: translateY(-4px);
}

.explore-card--peek {
  opacity: 0.4;
}

.explore-card--peek:hover {
  box-shadow: none;
  transform: none;
}

.explore-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-obsidian);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
  flex-shrink: 0;
}

.explore-card__icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.explore .explore-card__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  margin: 0 0 var(--space-3);
}

.explore .explore-card__desc {
  font-size: var(--text-base);
  color: var(--color-body-steel);
  line-height: var(--leading-body);
  margin: 0;
}

@media (max-width: 760px) {
  .explore-card {
    flex-basis: 82%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .explore__track {
    transition: none;
  }

  .explore-card {
    transition: none;
  }

  .explore-card:hover {
    transform: none;
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 4: CASE STUDY (full-dark client spotlight)       */
/* ─────────────────────────────────────────────────────── */

.case-study {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

/* ─── Header: logo beside a two-line headline ─── */
.cs-head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  max-width: 760px;
  margin-bottom: var(--space-6);
}

.cs-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background-color: #FFFFFF;
  padding: var(--space-3);
}

.cs-logo-chip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cs-headline {
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 18ch;
  margin: 0;
}

/* ─── Two-column body ─── */
.cs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* ─── Story: problem, solutions, outcome (no labels) ─── */
.cs-problem {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.82);
  line-height: var(--leading-body);
  margin: 0 0 var(--space-5);
}

.cs-solutions-intro {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: #FFFFFF;
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-3);
}

.cs-solutions {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-solutions li {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.75);
  line-height: var(--leading-normal);
  padding-left: var(--space-6);
  position: relative;
}

.cs-solutions li::before {
  content: '\2192';   /* → */
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-weight: var(--weight-bold);
}

.cs-outcome-text {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: #FFFFFF;
  line-height: var(--leading-body);
  margin: 0;
}

/* ─── Diagram: Claude → connected tools ─── */
.cs-diagram {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 420px;
  justify-self: center;
}

.cs-node {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.cs-node--hub {
  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
  text-align: center;
}

.cs-nodes {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.cs-chip {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.cs-node--hub .cs-chip {
  width: 78px;
  height: 78px;
  border-radius: var(--radius-lg);
}

.cs-logo {
  width: 56%;
  height: 56%;
}

/* Chip fills */
.cs-chip--claude { background-color: #D97757; }
.cs-chip--claude .cs-logo { fill: #FFFFFF; }
.cs-chip--ads .cs-logo    { fill: #4285F4; }
.cs-chip--ga  .cs-logo    { fill: #E37400; }
.cs-chip--li  { background-color: #0A66C2; }
.cs-chip--li  .cs-logo    { fill: #FFFFFF; }

.cs-node__name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: #FFFFFF;
}

.cs-node--hub .cs-node__name {
  font-size: var(--text-lg);
}

/* Dashed connectors (stretch to fill the gap; strokes stay crisp) */
/* Fixed size (not stretched): a viewBox SVG as a flex item otherwise
   derives its height from the viewBox ratio and balloons the whole row. */
.cs-links {
  flex: 0 0 96px;
  height: 250px;
}

.cs-links path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}

@media (max-width: 860px) {
  .cs-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .cs-diagram {
    max-width: 420px;
  }
}

/* Below this, the flex row's fixed-size parts (none of them shrink) no
   longer fit a phone viewport. Step every dimension back down. */
@media (max-width: 640px) {
  .cs-chip {
    width: 48px;
    height: 48px;
  }

  .cs-node--hub .cs-chip {
    width: 60px;
    height: 60px;
  }

  .cs-node__name {
    font-size: var(--text-sm);
  }

  .cs-node--hub .cs-node__name {
    font-size: var(--text-base);
  }

  .cs-links {
    flex-basis: 56px;
    height: 200px;
  }

  .cs-nodes {
    gap: var(--space-5);
  }
}

@media (max-width: 400px) {
  .cs-node__name { font-size: var(--text-xs); }
  .cs-nodes { gap: var(--space-6); }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 5: ROADMAP CTA                                   */
/* ─────────────────────────────────────────────────────── */

.roadmap-section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  margin-top: -1px;
}

.roadmap-section__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-12);
  align-items: center;
}


.roadmap-section__inner h2 {
  font-size: clamp(1.875rem, 3vw, 3rem);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

.roadmap-section__inner p {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--leading-body);
  max-width: 52ch;
  margin-bottom: 0;
}

.roadmap-section__inner .btn {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .roadmap-section__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .roadmap-section__inner .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 5: ENGAGE (two path cards + tagged carousel)     */
/* Lives inside the dark .explore band. Teal = services     */
/* (engagement models), gold = solutions (set plays),       */
/* mirroring the accent split on the pages themselves.      */
/* ─────────────────────────────────────────────────────── */

.explore .engage__head {
  margin-bottom: var(--space-8);
}

.explore .engage-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--space-3);
}

.explore .engage__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  margin-bottom: 0;
}

.explore .engage__row {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.explore .engage__photo {
  position: relative;
  border-radius: 16px;
  /* Diagonal cut top-right corner, mirrored at bottom-left. */
  clip-path: polygon(0 0, 88% 0, 100% 15%, 100% 100%, 12% 100%, 0 85%);
  overflow: hidden;
  aspect-ratio: 14 / 15;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.explore .engage__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.explore .engage__paths {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-6);
}

/* Fixed-pixel-width bars (not an SVG stroke) so the line reads as the
   same thickness on both the vertical and horizontal legs -- see the
   HTML comment above these elements for why an SVG path can't do this. */
.explore .engage__paths-track-seg {
  position: absolute;
  background-color: var(--color-gold);
  z-index: 0;
}

.explore .engage__paths-track-seg--v1 {
  left: 1%;
  top: 4%;
  width: 2px;
  height: 46%;
  transform: translateX(-50%);
  transform-origin: top;
}

.explore .engage__paths-track-seg--h {
  left: 1%;
  top: 50%;
  width: 98%;
  height: 2px;
  transform: translateY(-50%);
  transform-origin: left;
}

.explore .engage__paths-track-seg--v2 {
  left: 99%;
  top: 50%;
  width: 2px;
  height: 46%;
  transform: translateX(-50%);
  transform-origin: top;
}

.explore .engage__paths-node {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  background-color: var(--color-obsidian);
  z-index: 1;
  transform: translate(-50%, -50%);
}

.explore .engage__paths-node--start {
  top: 4%;
  left: 1%;
}

.explore .engage__paths-node--end {
  top: 96%;
  left: 99%;
}

/* Each leg's transition-delay starts exactly when the previous leg's
   duration ends (durations are proportional to each leg's actual pixel
   length), so the three bars read as one continuous, uninterrupted draw. */
html.js .engage__paths-track-seg--v1 {
  transform: translateX(-50%) scaleY(0);
}

html.js .engage__paths-track-seg--h {
  transform: translateY(-50%) scaleX(0);
}

html.js .engage__paths-track-seg--v2 {
  transform: translateX(-50%) scaleY(0);
}

html.js .engage__paths.is-visible .engage__paths-track-seg--v1 {
  transform: translateX(-50%) scaleY(1);
  transition: transform 0.24s linear;
}

html.js .engage__paths.is-visible .engage__paths-track-seg--h {
  transform: translateY(-50%) scaleX(1);
  transition: transform 1.3s linear 0.24s;
}

html.js .engage__paths.is-visible .engage__paths-track-seg--v2 {
  transform: translateX(-50%) scaleY(1);
  transition: transform 0.26s linear 1.54s;
}

@media (prefers-reduced-motion: reduce) {
  html.js .engage__paths-track-seg--v1,
  html.js .engage__paths-track-seg--v2 {
    transform: translateX(-50%) scaleY(1);
  }

  html.js .engage__paths-track-seg--h {
    transform: translateY(-50%) scaleX(1);
  }
}

/* Icon sits in its own column so the title and description below it
   share one left edge, matching the Core Values pattern. */
.explore .engage-path {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.explore .engage-path__icon {
  display: block;
  line-height: 0;
  flex-shrink: 0;
  margin-top: 2px;
}

.explore .engage-path__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.explore .engage-path__label {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gold);
  margin: 0;
}

.explore .engage-path__desc {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.68);
  line-height: var(--leading-body);
  max-width: 46ch;
  margin: 0;
}

@media (max-width: 1024px) {
  .explore .engage__row {
    grid-template-columns: 1fr;
  }

  .explore .engage__photo,
  .explore .engage__paths-track-seg,
  .explore .engage__paths-node {
    display: none;
  }
}

.explore .engage__head {
  margin-bottom: var(--space-6);
  max-width: 640px;
}

/* ── Compact ENGAGE: head + paths + carousel in one laptop viewport ── */

.explore {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.explore .engage__title {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
}

.explore .engage__paths {
  gap: var(--space-12);
  margin-bottom: var(--space-6);
}

.explore .engage-path__body {
  font-size: var(--text-sm);
}

.explore .explore-card__desc {
  font-size: var(--text-lg);
}


/* ── THESIS (section 3: why now + what we do) ───────────── */
.thesis {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}
.thesis__inner {
  max-width: 760px;
}
.thesis__rule {
  width: 48px;
  height: 3px;
  background-color: var(--color-gold);
  margin-bottom: var(--space-8);
}
.thesis__lead {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.6;
  color: var(--color-body-steel);
  margin-bottom: var(--space-8);
  max-width: 720px;
}
.thesis__statement {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-obsidian);
  max-width: 620px;
}
@media (max-width: 640px) {
  .thesis {
    padding-top: var(--space-14);
    padding-bottom: var(--space-14);
  }
  .thesis__lead { font-size: var(--text-md); }
  .thesis__statement { font-size: var(--text-lg); }
}

/* ── CASE STUDY (section 5: Valor Medical) ──────────────── */
.home-case {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}
.home-case__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-12);
  align-items: center;
}
.home-case__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.home-case__logo img { display: block; }
.home-case__headline {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  color: var(--color-obsidian);
}
.home-case__body p {
  font-size: var(--text-md);
  color: var(--color-body-steel);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.home-case__solutions-intro { margin-bottom: var(--space-2); }
.home-case__solutions {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}
.home-case__solutions li {
  font-size: var(--text-md);
  color: var(--color-body-steel);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}
.home-case__outcome {
  font-weight: 500;
  color: var(--color-obsidian);
}
.home-case__photo { margin: 0; }
.home-case__photo img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.home-case__result {
  margin-top: var(--space-6);
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}
.home-case__result-figure {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
}
.home-case__result-label {
  font-size: var(--text-sm);
  color: var(--color-body-steel);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .home-case__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ── CASE STUDY: teal accent blob behind photo (FieldCraft-style) ── */
.home-case__evidence {
  position: relative;
  isolation: isolate;
}
.home-case__accent {
  position: absolute;
  z-index: 0;
  top: -20px;
  right: -20px;
  width: 55%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-teal);
  border-radius: 62% 38% 47% 53% / 55% 43% 57% 45%;
}
.home-case__photo {
  position: relative;
  z-index: 1;
}
.home-case__result {
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .home-case__accent { top: -14px; right: -14px; width: 48%; }
}

/* ── CASE STUDY blob: bolder offset so it clearly peeks past the rectangular photo ── */
.home-case__accent {
  top: -30px;
  right: -36px;
  bottom: auto;
  width: 64%;
}
@media (max-width: 900px) {
  .home-case__accent { top: -18px; right: -18px; width: 52%; }
}

/* ── CASE STUDY headline on one line ── */
.home-case__headline {
  white-space: nowrap;
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
}
@media (max-width: 640px) {
  .home-case__headline { white-space: normal; font-size: 1.5rem; }
}

/* ── CASE STUDY: +30% outcome as a gold blob ── */
.home-case__result { align-items: center; gap: var(--space-6); }
.home-case__result-figure {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  background-color: var(--color-gold);
  color: var(--color-obsidian);
  border-radius: 62% 38% 47% 53% / 55% 43% 57% 45%;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
}
.home-case__result-label { flex: 1; }

/* ── THESIS: tale-as-old-as-time opener, problem list, question ── */
.thesis__opener {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.6;
  color: var(--color-body-steel);
  margin-bottom: var(--space-6);
}
.thesis__list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}
.thesis__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-body-steel);
}
.thesis__check {
  flex: 0 0 auto;
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 0.15em;
  border: 2px solid var(--color-muted);
  border-radius: 50%;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.thesis__check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 5px;
  height: 9px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.thesis__item-text {
  text-decoration: none;
}
.thesis__item.is-checked .thesis__check {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
}
.thesis__item.is-checked .thesis__check::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .thesis__check, .thesis__check::after, .thesis__item-text { transition: none; }
}
.thesis__question {
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  font-weight: 500;
  color: var(--color-obsidian);
  margin: 0 0 var(--space-6);
}

/* ── HOW WE WORK: operator framing intro ── */
.how-we-work__intro {
  max-width: 640px;
  margin: var(--space-4) auto 0;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-body-steel);
}

/* ── SOUND FAMILIAR: white card on a light band ── */
.sound-familiar {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.sound-familiar__card {
  max-width: 720px;
  margin: 0 auto;
  background-color: #FFFFFF;
  border: 1px solid rgba(26, 26, 26, 0.05);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(26, 26, 26, 0.08);
  padding: var(--space-10);
}
@media (max-width: 640px) {
  .sound-familiar__card { padding: var(--space-8) var(--space-6); }
}

/* ── HOW WE WORK: business-outcome lead above the operator framing ── */
.how-we-work__lead {
  max-width: 680px;
  margin: var(--space-4) auto 0;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-obsidian);
}
.how-we-work__intro { margin-top: var(--space-5); }

/* ── SOUND FAMILIAR: opener & question sit outside the card ── */
.sound-familiar .thesis__opener {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-8);
}
.sound-familiar .thesis__question {
  text-align: center;
  max-width: 720px;
  margin: var(--space-8) auto 0;
}
.sound-familiar__card .thesis__list { margin: 0; }

/* ── SCALE YOUR PEOPLE: two-column, prompt + animated arrow beside the card ── */
.sound-familiar__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.sf__heading {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  color: var(--color-obsidian);
  margin: 0 0 var(--space-6);
}
.sf__prompt { margin-bottom: var(--space-6); }
.sf__prompt-text {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--color-body-steel);
  margin: 0;
}
.sf__arrow {
  width: 200px;
  height: auto;
  margin-top: var(--space-4);
  display: block;
}
.sf__arrow-path {
  stroke-dasharray: 7 7;
  animation: sf-arrow-march 1s linear infinite;
}
@keyframes sf-arrow-march { to { stroke-dashoffset: -28; } }
.sf__statement {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-body-steel);
  margin: 0;
}
@media (max-width: 900px) {
  .sound-familiar__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .sf__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sf__arrow-path { animation: none; }
}

/* ── SCALE YOUR PEOPLE: card left, text right, arrow connects them ── */
.sound-familiar__grid { position: relative; }
.sf__card-col { grid-column: 1; }
.sf__text-col { grid-column: 2; }
.sf__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  z-index: 2;
}
@media (max-width: 900px) {
  .sf__card-col, .sf__text-col { grid-column: auto; }
}

/* ── SCALE YOUR PEOPLE: pin both to one row (fix diagonal), widen card, enlarge text ── */
.sound-familiar__grid {
  grid-template-columns: 1.12fr 0.88fr;
  align-items: center;
  gap: var(--space-10);
}
.sf__card-col { grid-column: 1; grid-row: 1; }
.sf__text-col { grid-column: 2; grid-row: 1; }
.sf__heading {
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  margin: 0 0 var(--space-8);
}
.sf__prompt-text {
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  line-height: 1.5;
  margin: 0 0 var(--space-8);
}
.sf__statement {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.7;
}
.sf__arrow { left: 56%; width: 150px; }
@media (max-width: 900px) {
  .sound-familiar__grid { grid-template-columns: 1fr; }
  .sf__card-col, .sf__text-col { grid-column: auto; grid-row: auto; }
}

/* ── SCALE YOUR PEOPLE: more separation + right-align the text column ── */
.sound-familiar__grid { gap: var(--space-20); }
.sf__text-col { text-align: right; }
@media (max-width: 900px) {
  .sound-familiar__grid { gap: var(--space-10); }
  .sf__text-col { text-align: left; }
}

/* ── HOW WE WORK: left-justify the header text above the diagram ── */
.how-we-work .capability-header { text-align: left; }
.how-we-work .capability-heading { margin-left: 0; margin-right: 0; max-width: none; }
.how-we-work__intro { max-width: 680px; margin: var(--space-5) 0 0; }

/* ── CASE STUDY: remove the blobs (teal accent + gold +30% blob) ── */
.home-case__accent { display: none; }
.home-case__result-figure {
  width: auto;
  height: auto;
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  color: var(--color-gold);
}

/* ── SCALE YOUR PEOPLE: match statement size to the prompt text above ── */
.sf__statement { font-size: clamp(1.25rem, 1.9vw, 1.55rem); }

/* ── CASE STUDY: Valor hub-and-spoke infographic (replaces the photo) ── */
.home-case__diagram { width: 100%; max-width: 440px; margin: 0 auto; }
.home-case__diagram svg { width: 100%; height: auto; display: block; }

/* ── CASE STUDY: healthcare photo fading in from the right side ── */
.home-case__photo { margin: 0; }
.home-case__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
  mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}
@media (max-width: 900px) {
  .home-case__photo img {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 12px;
    aspect-ratio: 16 / 9;
  }
}

/* ── CASE STUDY: stack infographic + faded photo in the evidence column ── */
.home-case__evidence { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.home-case__diagram { max-width: 380px; }
.home-case__photo img { aspect-ratio: 16 / 9; }

/* ── CASE STUDY option 2: photo backdrop from the right, infographic in front ── */
.home-case { position: relative; overflow: hidden; }
.home-case .container { position: relative; z-index: 1; }
.home-case__photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 58%;
  margin: 0;
  z-index: 0;
  pointer-events: none;
}
.home-case__photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to left, #000 42%, transparent 100%);
  mask-image: linear-gradient(to left, #000 42%, transparent 100%);
}
.home-case__evidence { display: block; }
.home-case__diagram { max-width: 420px; margin-left: auto; }
@media (max-width: 900px) {
  .home-case { overflow: visible; }
  .home-case__photo { position: static; width: 100%; margin-top: var(--space-8); }
  .home-case__photo img {
    -webkit-mask-image: none; mask-image: none;
    border-radius: 12px; aspect-ratio: 16 / 9;
  }
}

/* ── CASE STUDY: photo left + infographic layered over it (left), text on the right ── */
.home-case__photo { left: 0; right: auto; width: 55%; }
.home-case__photo img {
  -webkit-mask-image: linear-gradient(to right, #000 22%, transparent 85%);
  mask-image: linear-gradient(to right, #000 22%, transparent 85%);
}
.home-case__evidence { grid-column: 1; grid-row: 1; }
.home-case__main { grid-column: 2; grid-row: 1; }
.home-case__diagram { margin-left: 0; margin-right: auto; }
@media (max-width: 900px) {
  .home-case__evidence, .home-case__main { grid-column: auto; grid-row: auto; }
}

/* ── Consistent vertical spacing across the main content sections ── */
.sound-familiar,
.how-we-work,
.home-case,
.explore,
.roadmap-section {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}
@media (max-width: 900px) {
  .sound-familiar,
  .how-we-work,
  .home-case,
  .explore,
  .roadmap-section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

/* ── HOW WE WORK intro: match the "sound familiar" prompt size ── */
.how-we-work__intro {
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  line-height: 1.5;
}

/* ── Consistent section-heading size across the homepage ── */
.sf__heading,
.how-we-work .capability-heading,
.explore #engage-heading,
.home-case__headline,
.roadmap-section__inner h2 {
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  line-height: 1.15;
}
.home-case__headline { white-space: normal; }

/* Step body up to the 16px body scale */
.process-node p { font-size: var(--text-base); }

/* ── HOW WE WORK: gold fading accent bar as a symmetrical separator ── */
.how-we-work { position: relative; }


/* ── ENGAGE cards redesigned: photo top-half, content bottom-half, icon overlay ── */
.explore-card {
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  min-height: 440px;
}
.explore-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  flex-shrink: 0;
}
.explore-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.explore-card__icon {
  position: absolute;
  left: var(--space-6);
  bottom: var(--space-6);
  margin-bottom: 0;
}
.explore-card__body {
  flex: 1;
  padding: var(--space-6) var(--space-8) var(--space-8);
}
.explore .explore-card__title { color: var(--color-teal); }

/* ── ENGAGE cards: fixed old height, uniform photo crop, non-bold title ── */
.explore-card { height: 420px; min-height: 420px; }
.explore-card__media { height: 200px; aspect-ratio: auto; }
.explore-card__body { flex: 1; overflow: hidden; }
.explore .explore-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.explore .explore-card__title { font-weight: var(--weight-medium); }

/* ── ENGAGE cards: 10% taller, fine gold border, tighter desc ── */
.explore-card {
  height: 462px;
  min-height: 462px;
  border: 1px solid var(--color-gold);
}
.explore-card__media { height: 220px; }
.explore .explore-card__desc { -webkit-line-clamp: 4; line-clamp: 4; }

/* ── ENGAGE: gold divider between the two-ways block and the carousel ── */
.engage__divider {
  height: 1px;
  max-width: 1160px;
  margin: var(--space-16) auto;
  background: linear-gradient(to right, transparent, var(--color-gold) 18%, var(--color-gold) 82%, transparent);
}

/* ── HOW WE WORK on black: light text, gold eyebrow ── */
.how-we-work__intro { color: rgba(255, 255, 255, 0.75); }
.how-we-work .capability-eyebrow { color: var(--color-gold); }
.how-we-work .process-node h3 { color: #FFFFFF; }
.how-we-work .process-node p { color: rgba(255, 255, 255, 0.72); }

/* ── ENGAGE cards: icon in body (not overlaying photo), roomier body ── */
.explore-card__media { height: 200px; }
.explore-card__icon {
  position: static;
  left: auto;
  bottom: auto;
  margin-bottom: var(--space-4);
}
.explore-card__body {
  padding: var(--space-6) var(--space-8) var(--space-8);
}
.explore .explore-card__desc { -webkit-line-clamp: 3; line-clamp: 3; }

/* ── ENGAGE cards: per-photo crop fixes. The card media window is very
   wide and short (441x200, ~2.2:1), so a tall portrait hero photo gets
   cropped down to a thin band; default center cropping cut faces off
   on the portrait-oriented photos below since their subjects sit in
   the upper half of the frame. Landscape photos (roadmapping,
   managed-admin) already center fine and aren't touched. ── */
.explore-card__photo[src*="workstream-hero"],
.explore-card__photo[src*="buildline-hero"] {
  object-position: 50% 8%;
}
.explore-card__photo[src*="mcprecision-hero"] {
  object-position: 50% 8%;
}

/* ── HOW WE WORK diagram: step body back to 14px (node positions are tuned for it) ── */
.process-node p { font-size: var(--text-sm); }

/* Valor infographic: animated spoke draw */
.hc-spoke {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.45s ease;
}
html.js .hc-spoke { stroke-dashoffset: 1; }
html.js .hc-spoke.is-drawn { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  html.js .hc-spoke { stroke-dashoffset: 0; transition: none; }
}