/* =============================================================================
   home-v2-0811.css — the designer's 2026-08-11 pass on top of home-v2.css.

   Loaded AFTER home-v2.css, so equal-specificity rules here win. That is how the
   superseded rules are retired without editing the base file: the 4-up case-study
   grid at >=901px is overridden rather than deleted, which keeps the base file a
   faithful copy of the earlier deliverable and this file a faithful copy of the
   new one. Every block below is lifted verbatim from index-v2.html; the only
   additions are these comments.

   Blocks, in the designer's own order:
     1. wwo-heading-0811                  heading above the concepts filmstrip
     2. wwo mobile .mnav                  chevrons for the mobile concepts slider
     3. case-studies mobile               one card at a time, chevrons
     4. idxpass-0811                      desktop filmstrips replace mosaic + grid
     5. chevrons-1502                     bigger chevrons, overlaid on the strips
     6. contact-headline-smallscreen      stops the headline clipping under 520px
     7. slick-skin-0811                   keeps the look once slick owns the DOM
   ============================================================================= */


/* ── 1. Concepts heading (id="wwo-heading-0811") ─────────────────────────── */
#wwo-heading-wrap + #wwo-mosaic { margin-top: 36px; }
    /* 14:07 (Theresa): heading now matches the 01/02/03 facet headings (.ww-fac-label) exactly — desktop clamp(22px,1.9vw,30px), mobile 24px (supersedes 13:42 ~39px request) */
    #wwo-heading-wrap .wm-heading { font-size: clamp(22px, 1.9vw, 30px); }
    @media (max-width: 700px) {
      #wwo-heading-wrap .wm-heading { font-size: 24px; }
      #wwo-heading-wrap { margin-top: 48px; }
      #wwo-heading-wrap + #wwo-mosaic { margin-top: 20px; }
    }


/* ── 2. Concepts mobile slider chevrons ──────────────────────────────────────
   These belong to the mobile-slider block in home-v2.css, which lives inside a
   (max-width: 768px) media query — repeated here so they land in the same place.
   ───────────────────────────────────────────────────────────────────────────── */
      @media (max-width: 768px) {
/* 14:07 (Theresa): manual advance — bracket arrows at the BOTTOM, below image + supporting content */
        #wwo-mslider .mnav { display: flex; justify-content: center; gap: 28px; padding: 14px 0 4px; }
        /* 2026-08-11 14:44 (Theresa): traditional chevrons, slightly faded */
        #wwo-mslider .mnav button { background: rgba(10,10,15,0.55); border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 300; font-size: 34px; line-height: 1; color: #FFE2C0; opacity: 0.55; padding: 8px 20px 12px; min-width: 64px; }
        #wwo-mslider .mnav button:hover { opacity: 0.9; }
        #wwo-mslider .mnav button:focus-visible { outline: 2px solid #C47D6A; outline-offset: 2px; }
        #wwo-mslider .mnav button:active { color: #C47D6A; }
      }


/* ── 3. Case studies on mobile: one at a time ────────────────────────────── */
/* 2026-08-11 14:07 (Theresa): mobile = ONE case study at a time (image + supporting
       content), manual bracket arrows at the BOTTOM — same pattern as the WWO mobile filmstrip. */
    @media (max-width: 768px) {
      .csf-strip {
        flex-direction: column; gap: 0;
        overflow-x: visible; scroll-snap-type: none;
      }
      .csf-strip .csf-tile {
        width: 100%; max-width: 100%; flex: 0 0 auto;
        scroll-snap-align: none;
        display: none;
      }
      .csf-strip .csf-tile.csf-on { display: flex; }
      .csf-tile img { opacity: 1; }
      .csf-wrap { padding-bottom: 12px; }
      .csf-mnav { display: flex; justify-content: center; gap: 28px; padding: 14px 0 40px; }
      /* 2026-08-11 14:44 (Theresa): traditional chevrons, slightly faded */
      .csf-mnav button { background: rgba(10,10,15,0.55); border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 300; font-size: 34px; line-height: 1; color: #FFE2C0; opacity: 0.55; padding: 8px 20px 12px; min-width: 64px; }
      .csf-mnav button:hover { opacity: 0.9; }
      .csf-mnav button:focus-visible { outline: 2px solid #C47D6A; outline-offset: 2px; }
      .csf-mnav button:active { color: #C47D6A; }
    }
    @media (min-width: 769px) { .csf-mnav { display: none; } }



/* ── 4. Desktop filmstrips (id="idxpass-0811") ───────────────────────────────
   #wwo-mosaic .mosaic is hidden at every width from here on. The mosaic markup
   stays in the DOM on purpose: the mobile slider is still built from its tiles,
   and it remains the source of the concept data.
   ───────────────────────────────────────────────────────────────────────────── */
  /* ── A2) WWO (Theresa 11:32 spec): desktop = wwo-gallery "One-Line Filmstrip" LOOK —
     multiple tiles visible, smooth advancing strip, bracket arrows, slow auto-advance,
     NO index numbers. Mobile (≤768) keeps the 8/11 slider. ── */
  #wwo-mosaic .mosaic { display: none !important; }
  #wwo-fs { display: none; }
  @media (min-width: 769px) {
    #wwo-fs { display: block; position: relative; }
    /* ruler at 50% of its wwo-gallery opacity */
    #wwo-fs .wfs-ruler {
      height: 18px; width: 100%;
      background-image: repeating-linear-gradient(90deg, rgba(127,131,167,0.28) 0 1px, transparent 1px 20px);
      background-position: bottom; background-size: 100% 8px; background-repeat: no-repeat;
      border-bottom: 1px solid rgba(127,131,167,0.18);
    }
    #wwo-fs .wfs-track {
      display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch; scrollbar-width: thin;
      scrollbar-color: #292B3D transparent;
    }
    #wwo-fs .tile.wfs-slide {
      flex: 0 0 auto; width: min(520px, 42vw); aspect-ratio: 3 / 2;
      scroll-snap-align: start;
    }
    /* bracket-with-arrow controls (site control style) */
    /* 13:46 (Theresa): arrows moved BELOW the strip, not overlaid on images */
    #wwo-fs { padding-bottom: 58px; }
    /* 2026-08-11 14:44 (Theresa): traditional chevrons, slightly faded */
    .wfs-arrow {
      position: absolute; top: auto; bottom: 4px; transform: none; z-index: 6;
      background: rgba(10,10,15,0.55); border: none; cursor: pointer;
      font-family: var(--font-body); font-weight: 300;
      font-size: 34px; line-height: 1; color: #FFE2C0; opacity: 0.55;
      padding: 8px 18px 12px;
    }
    .wfs-arrow:hover, .wfs-arrow:focus-visible { color: #C47D6A; opacity: 0.9; outline: none; }
    .wfs-prev { left: 10px; }
    .wfs-next { right: 10px; }
  }

  /* ── A3) CASE STUDIES (Theresa 11:32 spec): non-mobile = advanceable, scrollable strip
     like the One-Line Filmstrip — multiple tiles visible, bracket arrows, horizontal
     scroll/advance. ≤768 keeps the existing stacking. ── */
  .csx-arrow { display: none; }
  @media (min-width: 769px) {
    .csf-wrap { width: 100vw; margin-left: calc(50% - 50vw); position: relative; }
    .csf-strip { gap: 2px; }
    .csf-strip .csf-tile {
      flex: 0 0 auto; width: min(520px, 42vw); max-width: none;
      scroll-snap-align: start;
    }
    /* 13:46 (Theresa): arrows moved BELOW the strip, not overlaid on images */
    .csf-wrap { padding-bottom: 58px; }
    /* 2026-08-11 14:44 (Theresa): traditional chevrons, slightly faded */
    .csx-arrow {
      display: block; position: absolute; top: auto; bottom: 4px; z-index: 6;
      background: rgba(10,10,15,0.55); border: none; cursor: pointer;
      font-family: var(--font-body); font-weight: 300;
      font-size: 34px; line-height: 1; color: #FFE2C0; opacity: 0.55;
      padding: 8px 18px 12px;
    }
    .csx-arrow:hover, .csx-arrow:focus-visible { color: #C47D6A; opacity: 0.9; outline: none; }
    .csx-prev { left: 10px; }
    .csx-next { right: 10px; }
  }

  /* ── 13:21 (Theresa): filmstrip overlay — clear rules below title+desc (above TECH USED) and below TECH USED (above INDUSTRIES) ── */
  #wwo-fs .tile .tags .fold-panel { border-top: 1px solid rgba(255,226,192,0.5); }

  /* ── A5) WHERE WE DO IT: more air at the top so the player's head clears the section edge ── */
  #solutions { padding-top: 104px !important; }
  #solutions .env-bball { top: 34px; }



/* ── 5. Chevrons, enlarged and overlaid (id="chevrons-1502") ─────────────── */
  /* 2026-08-11 15:02 (Theresa): chevrons ~4x larger, overlaid + vertically centered ON the strips (not below). */
  @media (min-width: 769px) {
    #wwo-fs { padding-bottom: 0; }
    .wfs-arrow, .csx-arrow {
      top: 50%; bottom: auto; transform: translateY(-50%);
      font-size: 136px; line-height: 0.85; padding: 0 20px 14px;
      background: rgba(10,10,15,0.35);
    }
    .wfs-arrow:hover, .wfs-arrow:focus-visible,
    .csx-arrow:hover, .csx-arrow:focus-visible { transform: translateY(-50%); }
    .wfs-prev, .csx-prev { left: 14px; }
    .wfs-next, .csx-next { right: 14px; }
    .csf-wrap { padding-bottom: 0; }
  }
  @media (max-width: 768px) {
    /* WWO mobile slider: chevrons overlaid at the image's vertical midpoint (image is 62vw tall) */
    #wwo-mslider .mnav {
      position: absolute; left: 0; right: 0; top: 31vw; transform: translateY(-50%);
      z-index: 6; justify-content: space-between; gap: 0; padding: 0 2px;
      pointer-events: none;
    }
    #wwo-mslider .mnav button {
      pointer-events: auto; font-size: 76px; line-height: 0.85;
      min-width: 52px; padding: 2px 14px 10px; background: rgba(10,10,15,0.35);
    }
    /* Case studies mobile: overlay box matches the 3:2 image, chevrons centered in it */
    .csf-wrap { position: relative; }
    .csf-mnav {
      position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 3 / 2;
      z-index: 6; display: flex; align-items: center; justify-content: space-between;
      gap: 0; padding: 0 2px; pointer-events: none;
    }
    .csf-mnav button {
      pointer-events: auto; font-size: 76px; line-height: 0.85;
      min-width: 52px; padding: 2px 14px 10px; background: rgba(10,10,15,0.35);
    }
  }



/* ── 6. Contact headline on small phones (id="contact-headline-smallscreen-0811") ── */
  /* 2026-08-11 QA: "LET'S BUILD TOGETHER" clipped at right edge on small phones —
     52px clamp floor overflowed the ~343px content width at 390. Scale with viewport below 520px. */
  @media (max-width: 520px) {
    .contact-headline { font-size: clamp(36px, 11.5vw, 52px); }
  }



/* ── 7. Slick skin (id="slick-skin-0811") ────────────────────────────────── */
    /* Keep the current visual look — slick only replaces the engine. */
    #wfs-track.slick-initialized, #csf-strip.slick-initialized {
      display: block; overflow: visible; scroll-snap-type: none;
    }
    #wwo-fs .wfs-track.slick-initialized { display: block; overflow: visible; scroll-snap-type: none; }
    #wfs-track .slick-list, #csf-strip .slick-list, #wwo-mtrack .slick-list { overflow: hidden; }
    #wfs-track .slick-slide, #csf-strip .slick-slide { margin-right: 2px; }
    #csf-strip.slick-initialized .csf-tile { display: flex; }
    @media (max-width: 768px) {
      /* slick fade mode owns positioning/opacity on mobile — neutralize the old .mslide fade CSS */
      #wwo-mslider .mslide {
        position: static; opacity: 1; visibility: visible; pointer-events: auto; transition: none;
      }
      #csf-strip.slick-initialized { flex-direction: row; }
      #csf-strip.slick-initialized .csf-tile { display: flex !important; width: 100%; max-width: 100%; }
    }