/* assets/css/components/home.css
 * @layer components — Homepage exclusive sections
 * Sectors bento, Services list, Why Choose bento
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ════════════════════════════════════════════════════════════════════
     SECTORS BENTO
     ════════════════════════════════════════════════════════════════════ */

  .home-sectors {
    background-color: var(--white);
  }

  .home-sectors__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: calc(var(--container-gap) * 2);  /* left heading ↔ right descriptor */
    margin-block-end: var(--container-gap);  /* header → bento grid */
  }

  .home-sectors__descriptor {
    font-size: var(--text-m);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
    max-inline-size: 24rem;
    text-align: right;
    margin: 0;
  }

  @media (max-width: 48em) {
    .home-sectors__descriptor {
      display: none;
    }
  }

  .home-sectors__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--text-accent);
    margin: 0;
    margin-block-end: var(--stack-gap);  /* eyebrow → heading */
  }

  .home-sectors__title {
    font-family: var(--font-heading);
    font-size: var(--heading-m);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    line-height: var(--leading-tight);
    margin: 0;
  }


  /* Header right — view-all above, arrows below, right-aligned */
  .home-sectors__header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--stack-gap);
    flex-shrink: 0;
  }

  /* Custom arrow buttons — hidden on desktop, shown on mobile */
  .home-sectors__arrows {
    display: none;
    gap: var(--cluster-gap);
    align-items: center;
  }

  /* Suppress Splide's own injected arrows — we use custom ones in header */
  .home-sectors__splide > .splide__arrows { display: none !important; }

  .home-sectors__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-full);
    background: var(--surface-primary);
    color: var(--white);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration-fast) var(--ease-default),
                transform var(--duration-fast) var(--ease-default);
  }

  .home-sectors__arrow:hover { background: var(--primary-dark); }
  .home-sectors__arrow:active { transform: scale(0.93); }
  .home-sectors__arrow:disabled { opacity: var(--opacity-dim); cursor: not-allowed; }
  .home-sectors__arrow:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* Splide version (hidden on desktop) */
  .home-sectors__splide { display: none; }

  /* Allow peek — don't clip the track */
  .home-sectors__splide .splide__track {
    overflow: visible;
  }

  /* Clip only at section edges so peeked card doesn't bleed into next section */
  .home-sectors__splide {
    overflow: hidden;
  }

  /* No pagination dots on sectors carousel */
  .home-sectors__splide .splide__pagination { display: none !important; }

  /* Desktop grid: 12-col. Row 1 = 7+5 cols, Row 2 = 4+4+4 cols */
  .home-sectors__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 340px 240px;
    gap: var(--grid-gap);            /* between bento cells */
  }

  /* Tablet + mobile: hide bento grid, show carousel + arrows */
  @media (max-width: 64em) {
    .home-sectors__grid   { display: none; }
    .home-sectors__splide { display: block; }
    .home-sectors__arrows { display: flex; }
  }

  /* Tablet (48em–64em): 2-up cards, taller slides */
  @media (min-width: 48em) and (max-width: 64em) {
    .home-sectors__splide .card-sector-bento {
      min-block-size: 300px;
    }
  }

  /* Mobile (<48em): 1-up cards */
  @media (max-width: 47.99em) {
    .home-sectors__splide .card-sector-bento {
      min-block-size: 260px;
    }
  }

  .home-sectors__grid .card-sector-bento:nth-child(1) { grid-column: 1 / 8; grid-row: 1; }
  .home-sectors__grid .card-sector-bento:nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
  .home-sectors__grid .card-sector-bento:nth-child(3) { grid-column: 1 / 5; grid-row: 2; }
  .home-sectors__grid .card-sector-bento:nth-child(4) { grid-column: 5 / 9; grid-row: 2; }
  .home-sectors__grid .card-sector-bento:nth-child(5) { grid-column: 9 / 13; grid-row: 2; }

  /* card-sector-bento styles live in card.css */



  /* ════════════════════════════════════════════════════════════════════
     SERVICES LIST
     ════════════════════════════════════════════════════════════════════ */

  .home-services {
    background: linear-gradient(
      180deg,
      var(--secondary-ultra-light) 0%,
      var(--secondary-light)       100%
    );
    border-block-start: 1px solid var(--border-secondary);
  }

  .home-services__layout {
    display: flex;
    gap: calc(var(--container-gap) * 3);  /* left col ↔ cards col — generous split */
    align-items: flex-start;
  }

  .home-services__left {
    flex-shrink: 0;
    inline-size: 22rem;
    position: sticky;
    inset-block-start: calc(var(--header-height, 4rem) + var(--container-gap));
    /* Viewport-cap + internal overflow guard — content is short by design
       (eyebrow → title → desc → cta) but this keeps the CTA reachable on
       short viewports or if copy grows. See feedback_sticky_sidebar_floating. */
    max-block-size: calc(100vh - var(--header-height, 4rem) - var(--container-gap) * 2);
    overflow-y: auto;
    overscroll-behavior-block: contain;
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);         /* eyebrow → title → desc → cta */
    scrollbar-width: thin;
    scrollbar-color: var(--border-muted) transparent;
  }

  .home-services__left::-webkit-scrollbar {
    inline-size: 6px;
  }

  .home-services__left::-webkit-scrollbar-thumb {
    background-color: var(--border-muted);
    border-radius: var(--radius-s);
  }

  .home-services__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--text-accent);
    margin: 0;
  }

  .home-services__title {
    font-family: var(--font-heading);
    font-size: var(--heading-m);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    line-height: var(--leading-tight);
    margin: 0;
  }

  .home-services__desc {
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    margin: 0;
  }

  .home-services__cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);            /* between stacked service cards */
  }

  /* ════════════════════════════════════════════════════════════════════
     SERVICE-CARD — horizontal icon + body framework variant.
     The body uses flex-row internally so the icon sits left and the
     content sits right. Border + hover state stay variant-specific
     because they use the secondary palette (matches the section's
     blush gradient background).
     ════════════════════════════════════════════════════════════════════ */

  .service-card {
    container-type: normal;
    --card-bg: var(--white);
    border-color: color-mix(in oklch, var(--secondary-semi-dark) 20%, transparent);
  }

  .service-card .card__body {
    flex-direction: row;             /* desktop: icon left, content right */
    gap: var(--card-gap);
  }

  @media (max-width: 48em) {
    .service-card .card__body {
      flex-direction: column;        /* mobile: stack vertically */
    }
  }

  .service-card__content {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
  }

  .service-card__icon {
    background: var(--primary-ultra-light);
    color: var(--icon-color);
  }

  .service-card:hover {
    border-color: color-mix(in oklch, var(--secondary-semi-dark) 35%, transparent);
  }

  @media (max-width: 48em) {
    .home-services__layout {
      flex-direction: column;
      gap: var(--container-gap);
    }
    .home-services__left {
      position: static;
      inline-size: 100%;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     WHY CHOOSE BENTO
     ════════════════════════════════════════════════════════════════════ */

  .home-why__header {
    text-align: left;
    margin-block-end: var(--container-gap);  /* header → bento grid */
    max-inline-size: 36rem;
  }

  .home-why__eyebrow {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--text-accent);
    margin-block-end: var(--space-xs);
  }

  .home-why__title {
    font-family: var(--font-heading);
    font-size: var(--heading-m);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin: 0;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }

  /* Desktop grid — hidden on mobile */
  .home-why__grid--desktop {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);            /* between bento rows */
  }

  .home-why__row {
    display: flex;
    gap: var(--grid-gap);            /* between bento cells in a row */
  }

  /* Bento row layout — flex sizing per cell */
  .home-why__row--1 .why-card--wide { flex: 2; }
  .home-why__row--1 .why-card--stat { flex: 1; }
  .home-why__row--2 .why-card        { flex: 1; }
  .home-why__row--3 .why-card        { flex: 1; }

  .home-why__row--1 { min-block-size: var(--slide-min-m); }
  .home-why__row--2 { min-block-size: var(--slide-min-m); }
  .home-why__row--3 { min-block-size: var(--slide-min-s); }

  /* Mobile Splide — hidden on desktop */
  .home-why__splide { display: none; }


  /* ════════════════════════════════════════════════════════════════════
     WHY-CARD — framework-native variant with 5 color modifiers.
     Shell, padding, body, header, title, text all from .card base.
     This block only owns: stat shape (centered numbers) + variant
     backgrounds + the icon chip background tint (icon framework
     handles the chip sizing/padding/radius).
     ════════════════════════════════════════════════════════════════════ */

  .why-card {
    container-name: card why-card;
    border-radius: var(--radius-xl);
  }

  /* Stat shape — centered big number + label, no header stack */
  .why-card--stat .card__body {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .why-card__number {
    font-family: var(--font-heading);
    font-size: var(--heading-l);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    color: var(--card-heading-color);
  }

  .why-card__number--accent { color: var(--accent); }

  .why-card__label {
    font-size: var(--text-s);
    color: var(--card-meta-color);
  }

  /* ── Color variants (token overrides only) ── */

  .why-card--dark {
    background: var(--surface-dark);
    --card-heading-color: var(--text-on-dark);
    --card-text-color:    var(--text-on-dark);
    --card-meta-color:    color-mix(in oklch, var(--text-on-dark) 80%, transparent);
    border-color: transparent;
  }

  .why-card--primary {
    background: var(--surface-primary);
    --card-heading-color: var(--text-on-primary);
    --card-text-color:    var(--text-on-primary);
    --card-meta-color:    color-mix(in oklch, var(--text-on-primary) 80%, transparent);
    border-color: transparent;
  }

  /* Blush card — mixes --secondary-semi-dark (unchanged, visibly warm) with
     white to restore the old peach tint. The v2 --secondary is near-white
     and loses identity next to sibling --light/--primary cards. */
  .why-card--blush {
    background: color-mix(in oklch, var(--secondary-semi-dark) 40%, var(--white));
  }

  .why-card--light {
    background: var(--surface-raised);
  }

  .why-card--accent-light {
    background: var(--accent-light);
    border-color: color-mix(in oklch, var(--accent) 12%, transparent);
  }

  /* ── Icon chip — only the background tint per variant. Sizing,
     padding, radius all come from [data-icon-style="boxed"]. ── */

  .why-card__icon { background: var(--primary-ultra-light); color: var(--icon-color); }
  .why-card__icon--glass  { background: var(--overlay-glass-subtle); color: var(--text-on-dark); }
  .why-card__icon--accent { background: color-mix(in oklch, var(--accent) 12%, transparent); color: var(--accent); }

  /* Mobile slide bounds — same hybrid pattern as insights cards */
  @media (max-width: 48em) {
    .home-why__grid--desktop { display: none; }
    .home-why__splide { display: block; }

    .home-why__splide .why-card {
      min-block-size: var(--slide-min-s);
      block-size: 100%;
    }
  }

  /* Splide pagination dots — teal active */
  .home-why__splide .splide__pagination {
    margin-block-start: var(--space-l);
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
  }
  .home-why__splide .splide__pagination__page {
    display: block;
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--radius-full);
    background: var(--border-default);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
  }
  .home-why__splide .splide__pagination__page.is-active {
    background: var(--surface-primary);
    transform: scale(1.4);
  }


  /* ════════════════════════════════════════════════════════════════════
     FAQ — Split layout override (header left, accordion right)
     ════════════════════════════════════════════════════════════════════ */

  /* V2 FAQ inherits the two-col grid from accordion.css — no override needed */

  /* ════════════════════════════════════════════════════════════════════
     V2 INSIGHTS HUB
     ════════════════════════════════════════════════════════════════════ */

  .home-insights {
    background-color: var(--secondary-ultra-light);
    border-block-start: 1px solid var(--border-subtle);
  }

  .home-insights__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: calc(var(--container-gap) * 2);  /* left heading ↔ right descriptor */
    margin-block-end: var(--container-gap);  /* header → card rows */
  }

  /* Eyebrow → heading gap inside plain div wrappers in insights + sectors */
  .home-insights__header .section-header__eyebrow {
    margin: 0;
    margin-block-end: var(--stack-gap);
  }

  /* Header right — descriptor text + mobile arrows */
  .home-insights__header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--stack-gap);
    flex-shrink: 0;
    max-inline-size: 24rem;
  }

  .home-insights__descriptor {
    font-size: var(--text-m);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
    text-align: right;
    margin: 0;
  }

  @media (max-width: 48em) {
    .home-insights__descriptor { display: none; }
  }

  /* Custom nav arrows — hidden on desktop, shown on mobile alongside sectors pattern */
  .home-insights__arrows {
    display: none;
    gap: var(--cluster-gap);
    align-items: center;
  }

  .home-insights__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-full);
    background: var(--surface-primary);
    color: var(--white);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration-fast) var(--ease-default),
                transform   var(--duration-fast) var(--ease-default);
  }
  .home-insights__arrow:hover  { background: var(--primary-dark); }
  .home-insights__arrow:active { transform: scale(0.93); }
  .home-insights__arrow:disabled { opacity: var(--opacity-dim); cursor: not-allowed; }
  .home-insights__arrow:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* ════════════════════════════════════════════════════════════════════
     INSIGHTS HUB — uniform 3×2 grid.
     ─────────────────────────────────────────────────────────────────────
     Six curated slots, all rendered as the unified card family's default
     variant. No featured / no compact — every card carries the same teal
     identity bar + blush accent + body, and all six sit in equal cells.

     Why uniform: the unified card family (card-event / case-study /
     resource / job / blog) gives each card a strong visual identity
     through its identity bar and accent strip. Layered hierarchy via a
     "hero card" was a magazine convention inherited from the old
     card-featured component — for B2B content where every slot is
     equally weighty (events, whitepapers, case studies, jobs, posts), a
     uniform grid is the truthful representation.

     Responsive: 3-col desktop → 2-col tablet → 1-col mobile (Splide).
     ════════════════════════════════════════════════════════════════════ */

  /* Row 1 — two horizontal featured cards (image-left + body-right). */
  .home-insights__row-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--content-gap-wide);
    align-items: stretch;
    margin-block-end: var(--content-gap-wide);
  }

  /* Row 2 — three image-top default cards. */
  .home-insights__row-default {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--content-gap-wide);
    align-items: stretch;
  }

  /* Pin each card's footer to the bottom so CTAs align across the row
     even when content lengths differ. ONLY applies at desktop widths
     where Row 1 has 2 columns / Row 2 has 3 columns — in those layouts
     cards stretch to uniform height and the footer pin prevents CTAs
     from floating mid-card. On tablet single-column (below 64em),
     cards size to natural content and pinning creates empty voids
     between content and footer, so we disengage the pin. */
  @media (min-width: 64em) {
    .home-insights .card-event__footer,
    .home-insights .card-resource__footer,
    .home-insights .card-case-study__footer,
    .home-insights .card-blog__footer,
    .home-insights .card-job__footer {
      margin-block-start: auto;
    }
  }

  /* ════════════════════════════════════════════════════════════════════
     BLOG-CARD — framework-native variant.
     All shell, padding, body, header, title, hover lift, media clipping
     come from .card base. Only the placeholder fallback (when no image
     is supplied) is unique to this variant.
     ════════════════════════════════════════════════════════════════════ */

  .blog-card {
    container-name: card blog-card;
    --card-bg: var(--white);
    --card-media-aspect-ratio: var(--slide-ratio-landscape);
  }

  /* Placeholder shown inside .card__media when no image is supplied —
     subtle tinted block that fills the media slot. */
  .blog-card__placeholder {
    position: absolute;
    inset: 0;
    background: var(--surface-sunken);
  }

  /* Ensure the media slot is the placeholder's positioning context. */
  .blog-card .card__media { position: relative; }

  /* ── Full-section Splide (mobile) — hidden on desktop ── */
  .home-insights__splide {
    display: none;
    overflow: hidden;   /* clips peek overflow to section bounds */
    margin-block-start: var(--space-l);
  }

  .home-insights__splide .splide__track { overflow: visible; }
  .home-insights__splide .splide__pagination { display: none !important; }
  .home-insights__splide > .splide__arrows  { display: none !important; }

  /* Uniform slide layout — every card in the carousel the same shape.
     The slide-card class lives on the splide <li> wrapper and forces
     the inner .card to fill it. Hybrid height: aspect-ratio drives the
     shape, min/max bounds protect against collapse and blowout. */
  .home-insights__slide-card {
    inline-size: 100%;
    display: flex;
  }

  .home-insights__slide-card > .card {
    flex: 1;
    min-block-size: var(--slide-min-m);
    /* No max-block-size — the unified card family has richer content
       (teal identity bar + accent strip + image + body + footer) than
       the old promo/featured cards, which easily exceeds the old 28rem
       cap and gets clipped. Splide handles variable-height slides
       correctly (tallest slide sets the track height). */
    /* Bump body padding on mobile slides — fluid --card-padding hits its
       smallest value at narrow viewports (16px) which leaves the CTA too
       close to the card's bottom edge. Use --space-l for breathing room. */
    --card-padding: var(--space-l);
  }

  /* Pin the CTA to the bottom of the body on slide cards. With short
     content + a min-height card, the natural --card-gap rhythm leaves
     a visual void; auto-push gives the carousel a consistent layout
     where header sits at top, CTA always at bottom. Applies to the
     unified card family's __footer (all 5 content types) plus the
     legacy .card__cta fallback. */
  .home-insights__slide-card .card__cta,
  .home-insights__slide-card .card-event__footer,
  .home-insights__slide-card .card-resource__footer,
  .home-insights__slide-card .card-case-study__footer,
  .home-insights__slide-card .card-blog__footer,
  .home-insights__slide-card .card-job__footer {
    margin-block-start: auto;
  }

  /* Content-with-media cards in the mobile carousel: constrain media to
     a uniform landscape ratio so all slides feel the same height. */
  .home-insights__splide .card-blog__media,
  .home-insights__splide .card-case-study__media,
  .home-insights__splide .card-resource__cover-image {
    aspect-ratio: var(--slide-ratio-landscape);
    flex-shrink: 0;
  }

  /* ── Responsive ── */
  @media (max-width: 64em) {
    /* Tablet: Row 1 collapses to single column (featured cards fall
       back to default vertical — same breakpoint as card-family.css's
       @media min-width: 60em so the fallback is seamless). Row 2 goes
       2-col, 3rd card wraps. */
    .home-insights__row-featured { grid-template-columns: 1fr; }
    .home-insights__row-default  { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 48em) {
    /* Mobile: hide the grid, show Splide carousel (defined above). */
    .home-insights__row-featured { display: none; }
    .home-insights__row-default  { display: none; }
    .home-insights__splide       { display: block; }
    .home-insights__arrows       { display: flex; }
    .home-insights__header       { margin-block-end: 0; }
  }

  /* ════════════════════════════════════════════════════════════════════
     V2 PIONEER / ABOUT
     ════════════════════════════════════════════════════════════════════ */

  /* Matches the canonical page-banner gradient recipe — same angle, same
     stops — so the in-page Pioneer surface visually echoes the hero/banner
     brand surface visitors meet on every interior page. One brand recipe,
     two contexts, recurring brand recognition. */
  .home-pioneer {
    background: linear-gradient(
      155deg,
      var(--primary-ultra-dark)  0%,
      var(--primary-dark)       55%,
      var(--primary)            100%
    );
  }

  .home-pioneer__grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: calc(var(--container-gap) * 2);
    align-items: center;
  }

  /* ── Outer decorative frame ──
     Slightly larger radius than the inner media; the gap between them
     reads as a precise "mat" in the dark background colour. */
  .home-pioneer__media-frame {
    border-radius: var(--radius-2xl);
    border: 1px solid color-mix(in oklch, var(--white) 14%, transparent);
    box-shadow:
      inset 0 0 0 1px color-mix(in oklch, var(--white) 6%, transparent),
      0 24px 64px color-mix(in oklch, var(--primary-ultra-dark) 60%, transparent);
    padding: var(--space-xs);
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
  }

  /* ── Inner mat — clip to inner radius cleanly ── */
  .home-pioneer__media-mat {
    border-radius: var(--radius-xl);
    overflow: hidden;
    inline-size: 100%;
    block-size: 100%;
    position: relative;
    background: color-mix(in oklch, var(--primary-dark) 80%, transparent);
  }

  /* ── Video ── */
  .home-pioneer__video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: var(--radius-xl);
  }

  /* ── Image fallback (static or noscript) ── */
  .home-pioneer__image,
  .home-pioneer__image--noscript {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* noscript image sits over the video space absolutely */
  .home-pioneer__image--noscript {
    position: absolute;
    inset: 0;
  }

  /* ── YouTube lazy-autoplay placeholder ──
     Renders as just a poster image inside a dark frame. IIFE #22 swaps
     this node for a real iframe when the section scrolls into view,
     preserving the original background-video UX while keeping the 767 KiB
     of YouTube JS out of the initial page load. */
  .home-pioneer__yt-lazy {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    background: var(--primary-ultra-dark);
    overflow: hidden;
    border-radius: inherit;
  }

  .home-pioneer__yt-poster {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  /* ── YouTube embed (iframe) — fills mat after lazy-load swap ── */
  .home-pioneer__image--yt-poster {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    z-index: 0;
  }

  .home-pioneer__yt-embed {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: none;
    z-index: 1;
    /* Scale up to hide YouTube letterbox / controls strip */
    transform: scale(1.05);
  }

  /* ── Empty placeholder ── */
  .home-pioneer__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    color: color-mix(in oklch, var(--white) 18%, transparent);
    font-size: var(--text-s);
  }

  /* Content column — container-gap drives all spacing between header/text/stats/cta */
  .home-pioneer__content {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
  }

  .home-pioneer .section-header__eyebrow { color: var(--secondary); }
  .home-pioneer .section-header__heading { color: var(--white); }

  .home-pioneer__text {
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: color-mix(in oklch, var(--white) 72%, transparent);
    margin: 0;
  }

  .home-pioneer__stats {
    display: flex;
    gap: var(--container-gap);
    padding-block-start: var(--container-gap);
    border-block-start: 1px solid color-mix(in oklch, var(--white) 10%, transparent);
    margin: 0;
  }

  .home-pioneer__stat {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
  }

  /* Warm blush on deep teal — maximum contrast, consistent with eyebrow */
  .home-pioneer__stat-number {
    font-family: var(--font-heading);
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    color: var(--secondary);
  }

  .home-pioneer__stat-label {
    font-size: var(--text-s);
    color: color-mix(in oklch, var(--white) 60%, transparent);
  }

  @media (max-width: 48em) {
    .home-pioneer__grid {
      grid-template-columns: 1fr;
      gap: var(--container-gap);
    }
    .home-pioneer__media-frame { aspect-ratio: 16 / 9; }
    .home-pioneer__stats { flex-wrap: wrap; gap: var(--content-gap); }
    .home-pioneer__stat { flex: 1 1 30%; }
  }


  /* ════════════════════════════════════════════════════════════════════
     V3 PIONEER — secondary bg, warm palette, card-style stats
     ════════════════════════════════════════════════════════════════════ */

  /* V3 Pioneer — full-section warm band. --secondary-semi-dark mixed with
     white retains the warm-peach register at section scale without the
     loudness of the raw --secondary-semi-dark (80% L). */
  .home-pioneer[data-version="v3"] {
    background: color-mix(in oklch, var(--secondary-semi-dark) 35%, var(--white));
  }

  /* Eyebrow: primary teal — deliberate single accent on warm bg */
  .home-pioneer[data-version="v3"] .section-header__eyebrow {
    color: var(--primary);
  }

  /* Heading: black — maximum legibility on blush bg */
  .home-pioneer[data-version="v3"] .section-header__heading {
    color: var(--black);
  }

  /* Body text: near-black, fully readable */
  .home-pioneer[data-version="v3"] .home-pioneer__text {
    color: var(--secondary-ultra-dark);
  }

  /* Stats row: remove the top divider — cards have their own borders now */
  .home-pioneer[data-version="v3"] .home-pioneer__stats {
    border-block-start: none;
    gap: var(--grid-gap);
  }

  /* Each stat: shadcn-style card — white bg, subtle border, rounded, padded */
  .home-pioneer[data-version="v3"] .home-pioneer__stat {
    background: var(--white);
    border: 1px solid color-mix(in oklch, var(--secondary-dark) 30%, transparent);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
    box-shadow: 0 1px 3px color-mix(in oklch, var(--secondary-ultra-dark) 10%, transparent);
    flex: 1;
  }

  /* Stat numbers: primary teal — accent on white card */
  .home-pioneer[data-version="v3"] .home-pioneer__stat-number {
    color: var(--primary);
  }

  /* Stat labels: secondary-ultra-dark — warm dark, readable on white */
  .home-pioneer[data-version="v3"] .home-pioneer__stat-label {
    color: var(--secondary-ultra-dark);
  }

  /* Video frame: secondary-toned border, warm shadow */
  .home-pioneer[data-version="v3"] .home-pioneer__media-frame {
    border-color: color-mix(in oklch, var(--secondary-dark) 45%, transparent);
    box-shadow:
      inset 0 0 0 1px color-mix(in oklch, var(--secondary-dark) 20%, transparent),
      0 24px 64px color-mix(in oklch, var(--secondary-ultra-dark) 18%, transparent);
  }

  /* Video mat: warm secondary tint as placeholder bg */
  .home-pioneer[data-version="v3"] .home-pioneer__media-mat {
    background: color-mix(in oklch, var(--secondary-semi-dark) 30%, transparent);
  }

  /* Placeholder text: secondary-ultra-dark readable */
  .home-pioneer[data-version="v3"] .home-pioneer__placeholder {
    color: var(--secondary-ultra-dark);
  }

  /* CTA button: white bg with ultra-dark warm text — clean card look on blush bg */
  .home-pioneer[data-version="v3"] .home-pioneer__cta {
    background-color: var(--white);
    border-color: color-mix(in oklch, var(--secondary-dark) 40%, transparent);
    color: var(--secondary-ultra-dark);
    box-shadow: 0 1px 3px color-mix(in oklch, var(--secondary-ultra-dark) 10%, transparent);
  }
  .home-pioneer[data-version="v3"] .home-pioneer__cta:hover:not(:disabled) {
    background-color: var(--secondary-ultra-light);
    border-color: var(--secondary-dark);
    color: var(--primary);
  }

  /* ════════════════════════════════════════════════════════════════════
     TESTIMONIALS — Desktop 3-col grid / Mobile Splide toggle
     ════════════════════════════════════════════════════════════════════ */

  /* Desktop: show grid, hide Splide */
  .front-testimonials__grid--desktop { display: grid; }
  .front-testimonials__splide-wrap   { display: none; }

  @media (max-width: 64em) {
    .front-testimonials__grid--desktop { display: none; }
    .front-testimonials__splide-wrap   { display: block; }

    /* Splide slide cards fill the slide */
    .front-testimonials__splide-wrap .card-testimonial {
      block-size: 100%;
    }
  }

  /* card-testimonial V2 style — matches Pencil: #F9FAFB bg, 10px radius, 32px padding */
  .card-testimonial {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-l);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);           /* quote → text → author */
  }

  .card-testimonial__quote-mark {
    font-family: var(--font-heading);
    font-size: var(--heading-m);
    font-weight: var(--weight-bold);
    line-height: var(--leading-compressed);
    color: var(--primary-light);
    opacity: var(--opacity-moderate);
    margin: 0;
    user-select: none;
  }

  .card-testimonial__text {
    font-size: var(--text-m);
    line-height: var(--leading-loose);
    color: var(--text-body);
    margin: 0;
    flex: 1;
  }

  .card-testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--cluster-gap);
    padding-block-start: var(--space-xs);
  }

  .card-testimonial__photo {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
  }

  .card-testimonial__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-full);
    background: var(--primary-ultra-light);
    color: var(--primary);
    font-size: var(--text-s);
    font-weight: var(--weight-bold);
    flex-shrink: 0;
  }

  .card-testimonial__name {
    font-size: var(--text-m);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin: 0;
  }

  .card-testimonial__role {
    font-size: var(--text-s);
    color: var(--text-muted);
    margin: 0;
  }

  /* Splide pagination dots for testimonials carousel */
  .front-testimonials__splide-wrap .splide__pagination {
    margin-block-start: var(--space-l);
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
  }
  .front-testimonials__splide-wrap .splide__pagination__page {
    display: block;
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--radius-full);
    background: var(--border-default);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
  }
  .front-testimonials__splide-wrap .splide__pagination__page.is-active {
    background: var(--surface-primary);
    transform: scale(1.4);
  }


  /* ════════════════════════════════════════════════════════════════════
     VIDEO GRID
     ════════════════════════════════════════════════════════════════════ */

  .home-video-grid__header {
    margin-block-end: var(--space-2xl);
    max-inline-size: 36rem;
  }

  .home-video-grid__eyebrow {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--text-accent);
    margin-block-end: var(--space-xs);
  }

  .home-video-grid__title {
    font-family: var(--font-heading);
    font-size: var(--heading-m);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin: 0;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }

  /* Bento: video spans 2 rows left, 4 tiles right (2×2) */
  .home-video-grid__bento {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: var(--grid-gap);
    min-block-size: 32rem;
  }

  .home-video-grid__main {
    grid-row: 1 / 3;
    border-radius: var(--radius-m);
    overflow: hidden;
    background: var(--surface-dark);
  }

  .home-video-grid__embed-wrap {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    padding-block-end: 56.25%; /* 16:9 */
  }

  .home-video-grid__embed {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: none;
  }

  /* Placeholder (no video URL set yet) */
  .home-video-grid__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--stack-gap);
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 20rem;
    background: var(--surface-dark);
    cursor: pointer;
  }

  .home-video-grid__play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--primary) 90%, transparent);
    color: var(--white);
    transition: transform var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
  }

  .home-video-grid__placeholder:hover .home-video-grid__play-btn {
    transform: scale(1.1);
    background: var(--primary);
  }

  .home-video-grid__placeholder-label {
    font-size: var(--text-s);
    color: color-mix(in oklch, var(--white) 60%, transparent);
    margin: 0;
  }

  /* Tiles use the .why-card framework variant — see WHY-CARD block above.
     This section only owns the bento grid placement, not the card visuals. */

  @media (max-width: 64em) {
    .home-video-grid__bento {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto auto;
    }
    .home-video-grid__main {
      grid-column: 1 / -1;
      grid-row: 1;
      min-block-size: var(--slide-min-m);
    }
    .home-video-grid__bento .why-card { min-block-size: var(--slide-min-s); }
  }

  @media (max-width: 40em) {
    .home-video-grid__bento {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }
    .home-video-grid__main {
      grid-column: 1;
      min-block-size: 22rem;
    }
  }

  /* ════════════════════════════════════════════════════════════════════
     V3 QUICK LINKS — primary text, secondary underlines
     ════════════════════════════════════════════════════════════════════ */

  /* Label: keep primary (teal) text, swap underline to secondary (blush) */
  [data-version="v3"] .front-quick-links__label {
    color: var(--primary);
    text-decoration-color: var(--secondary);
  }

  /* Hover: deeper teal text, underline stays secondary */
  [data-version="v3"] .front-quick-links__link:hover .front-quick-links__label,
  [data-version="v3"] .front-quick-links__link:focus-visible .front-quick-links__label {
    color: var(--primary-hover);
    text-decoration-color: var(--secondary);
  }

  /* Accent bar on hover: secondary instead of primary gradient */
  [data-version="v3"] .front-quick-links__item::before {
    background: linear-gradient(to right, var(--secondary), var(--secondary-semi-dark));
  }

  /* Icon pill: secondary tint bg, primary icon color */
  [data-version="v3"] .front-quick-links__icon {
    background: color-mix(in oklch, var(--secondary) 40%, transparent);
    color: var(--primary);
  }

  /* Icon pill hover: secondary-dark fill, white icon */
  [data-version="v3"] .front-quick-links__link:hover .front-quick-links__icon,
  [data-version="v3"] .front-quick-links__link:focus-visible .front-quick-links__icon {
    background: var(--secondary-dark);
    color: var(--white);
  }

  /* ════════════════════════════════════════════════════════════════════
     V3 CONTACT — secondary-ultra-light bg, warm-toned palette
     ════════════════════════════════════════════════════════════════════ */

  /* Section bg: warm blush ultra-light instead of cold teal tint */
  [data-version="v3"] .front-contact {
    background-color: var(--secondary-ultra-light);
    border-block-start-color: color-mix(in oklch, var(--secondary) 35%, transparent);
  }

  /* Office blocks: shadcn-style white cards, remove divider line */
  [data-version="v3"] .front-contact__offices {
    gap: var(--card-gap);
    display: flex;
    flex-direction: column;
  }

  [data-version="v3"] .front-contact__office {
    background: var(--white);
    border: 1px solid color-mix(in oklch, var(--secondary-dark) 28%, transparent);
    border-radius: var(--radius-m);
    padding: var(--space-m);
    box-shadow: 0 1px 3px color-mix(in oklch, var(--secondary-ultra-dark) 8%, transparent);
    border-block-end: 1px solid color-mix(in oklch, var(--secondary-dark) 28%, transparent);
    padding-block-start: var(--space-m);
  }

  [data-version="v3"] .front-contact__office:first-child {
    padding-block-start: var(--space-m);
  }

  [data-version="v3"] .front-contact__office:last-child {
    border-block-end: 1px solid color-mix(in oklch, var(--secondary-dark) 28%, transparent);
    padding-block-end: var(--space-m);
  }

  /* Pin icon: secondary tint bg, primary icon — teal on warm bg reads well */
  [data-version="v3"] .front-contact__office-pin {
    background: color-mix(in oklch, var(--secondary) 40%, transparent);
    color: var(--primary);
  }

  /* Office label: secondary-ultra-dark — warm dark tone, not cold teal */
  [data-version="v3"] .front-contact__office-label {
    color: var(--secondary-ultra-dark);
  }

  /* Eyebrow: primary teal — one deliberate primary accent */
  [data-version="v3"] .front-contact .section-header__eyebrow {
    color: var(--primary);
  }

  /* Form card: warm shadow instead of cold teal tint */
  [data-version="v3"] .front-contact__form {
    box-shadow:
      0 8px 32px  color-mix(in oklch, var(--secondary-dark) 14%, transparent),
      0 2px 8px   color-mix(in oklch, var(--secondary-dark) 8%, transparent),
      0 0 0 1px   color-mix(in oklch, var(--secondary) 40%, transparent);
  }

  /* Field hover: secondary tint instead of primary tint */
  [data-version="v3"] .front-contact__form .form-group__field:hover {
    border-color: color-mix(in oklch, var(--secondary-dark) 50%, transparent);
  }

  /* Checkbox: secondary-dark accent */
  [data-version="v3"] .front-contact__form .form-group__checkbox {
    accent-color: var(--secondary-dark);
  }

  /* Reply icon: secondary-dark */
  [data-version="v3"] .front-contact__form .contact-form__reply-icon {
    color: var(--secondary-dark);
  }

  /* Field focus ring: warm secondary tone instead of teal */
  [data-version="v3"] .front-contact__form .form-group__field:focus {
    border-color: var(--secondary-dark);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--secondary-dark) 18%, transparent);
  }

  /* Address body text: secondary-ultra-dark, nudged above text-s toward text-m */
  [data-version="v3"] .front-contact__office-address {
    color: var(--secondary-ultra-dark);
    font-size: calc(var(--text-s) + (var(--text-m) - var(--text-s)) * 0.45);
  }

  /* Section heading: black */
  [data-version="v3"] .front-contact .section-header__heading {
    color: var(--black);
  }

  /* Intro paragraph: secondary-ultra-dark */
  [data-version="v3"] .front-contact__intro {
    color: var(--secondary-ultra-dark);
  }

} /* end @layer components */