@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Archivo+Black&display=swap');


  * { margin: 0; padding: 0; box-sizing: border-box; }


  /* ══════════════════════════════════
     FULL-SCREEN VIDEO CANVAS
     ══════════════════════════════════ */


  /* Subtle gradient at bottom for text legibility */

  /* ══════════════════════════════════
     NAV (top-right: wordmark + burger)
     ══════════════════════════════════ */






  /* ══════════════════════════════════
     GIANT BRAND NAME (bottom-left)
     ══════════════════════════════════ */


  /* ══════════════════════════════════
     MISSION TEXT (mid-left)
     ══════════════════════════════════ */



  /* ══════════════════════════════════
     RIGHT-SIDE CARD GRID
     Geometry matched to akercompanies.com measured at 1808x971.
       upper panel  538 x 208   (aspect 2.59)
       inner pad    9.6px, tile is 50% x 100% of the content box
       lower zone   259px tall, two columns, the right one square
       left column  pills 38 + gap 14 + brand tile 207 = 259
     Finish values lifted from the Aker stylesheet.
     ══════════════════════════════════ */


  /* Shared card primitive */


  /* ── Upper panel: horizontal slider, tile floats inside the padding ── */














  /* ── Lower zone: two columns, right one spans the full height ── */









  /* Lower right: vertical slider, square, spans the whole lower zone */






  /* ══════════════════════════════════
     CONTACT CTA (bottom-left pill)
     ══════════════════════════════════ */



  /* ══════════════════════════════════
     FULL-SCREEN MOBILE MENU
     ══════════════════════════════════ */




  /* ══════════════════════════════════
     SCROLL CONTENT BELOW THE FOLD
     ══════════════════════════════════ */
  /* Scrolls up over the stationary hero */

  /* Light band: team statement + core services */











  /* Dark band: everything from the impact stage down */






  /* ── Mission band ────────────────────────────────────────────────
     Sits between the video hero and Core Services. It is the first child
     of .below-fold, so it owns the rounded cream sheet edge that reads
     against the video.                                                */
  .mission-band {
    background: var(--cream);
    color: var(--dark);
  }
  .mission-grid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 104px 48px 96px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
  }
  .mission-lede {
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.72;
    color: #6B665F;
    max-width: 470px;
    margin-bottom: 54px;
  }
  /* Not bolder, darker. The reference shifts tone rather than weight, so
     the sentence stays one texture and the emphasis still lands. */
  .mission-lede strong {
    font-weight: 400;
    color: var(--body-text);
  }
  .mission-band .eyebrow { color: var(--gold-deep); }
  .mission-head {
    font-family: 'Archivo Black', sans-serif;
    /* Sized so "Making emerging brands" clears the column on one line.
       Archivo Black runs wide, so anything above ~34px wraps to four. */
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.018em;
    color: var(--dark);
  }
  .mission-fig {
    margin: 0 0 0 auto;
    max-width: 420px;
  }
  .mission-fig img {
    display: block;
    width: 100%;
    height: auto;
  }
  .mission-fig figcaption {
    margin-top: 20px;
    text-align: center;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: #736D65;
  }
  @media (max-width: 900px) {
    .mission-grid {
      grid-template-columns: 1fr;
      gap: 44px;
      padding: 72px 24px 64px;
    }
    .mission-lede { margin-bottom: 40px; }
    .mission-fig { max-width: 360px; margin: 0 auto; }
  }


  /* What We Do (numbered blocks) */





  /* Sub-services: resting hairline, gold sweep on hover */


  /* The gold sweep rides on top of the resting hairline */






  /* Impact stage: numbers by default, service detail on hover */






  /* Each column enters from the left, staggered */











  /* Numbers row */




  /* CTA band */





  /* Footer */









  /* ══════════════════════════════════
     RESPONSIVE
     ══════════════════════════════════ */





  /* ── Band seam ────────────────────────────────────────────────────
     Hairline between the mission band and Core Competency. Sits on the
     cream ground so it reads as the closing edge of the section above,
     and is inset to the same 1280 / 48 gutter as .mission-grid. */
  .band-rule {
    background: var(--cream);
    padding: 0 48px;
  }
  .band-rule hr {
    border: 0;
    height: 1px;
    background: var(--light-border);
    max-width: 1280px;
    margin: 0 auto;
  }
  @media (max-width: 900px) {
    .band-rule { padding: 0 24px; }
  }




  /* ══════════════════════════════════════════════════════════════
     MERGED FROM Home-we-do-section-v16. Appended rather than
     interleaved: both sheets descend from playbook-homepage-v2-17,
     so the shared rules are identical and the later copy simply
     wins where v16 moved on. The only new token is --teal.
     ══════════════════════════════════════════════════════════════ */


  * { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --dark: #202022;
    --gold: #E8A849;
    --cream: #F7F5F2;
    --white: #FFFFFF;
    --text-muted: #9A9AA0;
    /* Light-band tokens, matched to playbook-services-v22_1 */
    --body-text: #3A3A3C;
    --light-border: #E5E5E7;
    --gold-deep: #8F6318;   /* gold is unreadable on cream at small sizes.
                               #9A6A18 was 4.34:1 on cream, just under the
                               4.5:1 WCAG AA floor for text this size.
                               #8F6318 is 4.87:1 on cream, 5.30:1 on white. */
    --green-cta: #193F32;
    --teal: #47A99C;
    --gold-hover: #d4963e;   /* CTA button hover, from Footer-and-CTA-v5 */        /* market art at rest, swaps to gold on hover */
  }

  html, body {
    height: 100%;
    /* clip, not hidden: overflow-x:hidden breaks position:sticky on the hero */
    overflow-x: clip;
    font-family: 'Inter', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--dark);
    color: var(--cream);
  }

  /* ══════════════════════════════════
     FULL-SCREEN VIDEO CANVAS
     ══════════════════════════════════ */
  .hero-canvas {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
  }

  .hero-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  /* Subtle gradient at bottom for text legibility */
  .hero-canvas::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 55%;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(32,32,34,0.15) 30%,
      rgba(32,32,34,0.68) 65%,
      rgba(32,32,34,0.7) 100%
    );
    z-index: 2;
    pointer-events: none;
  }

  /* ══════════════════════════════════
     NAV (top-right: wordmark + burger)
     ══════════════════════════════════ */
  .nav {
    position: fixed;
    top: 20px; right: 20px;
    z-index: 100;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(0,0,0,0.85);
    border-radius: 6px;
  }

  .nav-wordmark {
    width: 110px;
    height: auto;
    display: block;
  }

  .nav-burger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 6px;
  }
  .nav-burger span {
    width: 32px;
    height: 2px;
    background: var(--white);
    transition: transform 0.3s, opacity 0.3s;
  }
  .nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(3px, 4px); }
  .nav-burger.open span:nth-child(2) { transform: rotate(-45deg) translate(0px, 0px); }

  /* ══════════════════════════════════
     GIANT BRAND NAME (bottom-left)
     ══════════════════════════════════ */
  .brand-giant {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 3;
    user-select: none;
    pointer-events: none;
  }
  .brand-giant img {
    /* Cropped source is 2914x316 (9.22:1), so this is sized by width.
       Aker's 4-character wordmark sits at 29vw; a 12-character one needs
       more width to reach a comparable cap height. 41vw lands at ~81px tall
       on a 1813px viewport, against Aker's 130px. */
    width: clamp(300px, 41vw, 800px);
    height: auto;
    opacity: 0.92;
    display: block;
  }

  /* ══════════════════════════════════
     MISSION TEXT (mid-left)
     ══════════════════════════════════ */
  .mission-block {
    position: absolute;
    left: 24px;
    top: calc(50% + 16px);
    z-index: 4;
    max-width: 390px;
  }

  .horizon-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255,255,255,0.18);
    z-index: 3;
    pointer-events: none;
  }

  /* The page had no h1 at all, so crawlers and screen readers had no title
     for it. It sits above the mission paragraph in the same left column,
     sized to stay clear of the wordmark at the bottom of the canvas. */
  .hero-h1 {
    font-size: clamp(22px, 2.1vw, 30px);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0 0 14px;
    text-wrap: balance;
  }

  .mission-text {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--white);
    /* the block widened to give the headline a clean two-line wrap.
       the paragraph keeps the measure it was composed at. */
    max-width: 320px;
  }

  /* ══════════════════════════════════
     RIGHT-SIDE CARD GRID
     Geometry matched to akercompanies.com measured at 1808x971.
       upper panel  538 x 208   (aspect 2.59)
       inner pad    9.6px, tile is 50% x 100% of the content box
       lower zone   259px tall, two columns, the right one square
       left column  pills 38 + gap 14 + brand tile 207 = 259
     Finish values lifted from the Aker stylesheet.
     ══════════════════════════════════ */
  :root {
    --grid-w: 538px;
    --panel-h: 208px;         /* 538 / 2.59 */
    --panel-pad: 9.6px;       /* .6rem */
    --panel-gap: 16px;        /* 1rem, tile to copy */
    --zone-gap: 20px;         /* upper panel to lower zone */
    --lower-h: 259px;         /* right square, spans the whole lower zone */
    --col-left: 269px;
    --col-right: 259px;
    --pills-h: 38px;
    --stack-gap: 14px;        /* pills to brand tile */
    --grid-drop: 19px;        /* horizon line to grid top */

    /* Aker finish tokens */
    --card-bg: rgba(0,0,0,0.60);
    --card-bg-hover: rgba(0,0,0,0.90);
    --card-blur: 20px;
    --card-r: 8px;
    --card-r-hover: 16px;
    --inner-r: 3.2px;
    --inner-r-hover: 6px;
    --pill-bg: rgba(255,255,255,0.20);
    --pill-bg-hover: rgba(255,255,255,0.35);
    --pill-blur: 5px;
    --pill-r: 80px;
    --fin: 0.25s;
    --fin-btn: 0.3s;
    --slide-ease: cubic-bezier(0.65, 0, 0.35, 1);
    --slide-dur: 0.7s;
  }

  .cards-panel {
    position: absolute;
    right: 28px;
    bottom: 24px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: var(--zone-gap);
    width: var(--grid-w);
    transform-origin: bottom right;
    transform: scale(var(--gs, 1));
  }

  /* Shared card primitive */
  .feed-item {
    background: var(--card-bg);
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
    border-radius: var(--card-r);
    overflow: hidden;
    transition: background-color var(--fin), border-radius var(--fin);
  }
  .feed-item:hover {
    background: var(--card-bg-hover);
    border-radius: var(--card-r-hover);
  }

  /* ── Upper panel: horizontal slider, tile floats inside the padding ── */
  .top-swiper {
    height: var(--panel-h);
    cursor: grab;
  }
  .top-swiper:active { cursor: grabbing; }

  .swiper-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform var(--slide-dur) var(--slide-ease);
  }
  .swiper-track.vert {
    flex-direction: column;
    width: 100%;
    height: 200%;
  }

  .slide {
    width: 33.3333%;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    gap: var(--panel-gap);
    padding: var(--panel-pad);
    text-decoration: none;
  }
  .slide-img {
    width: 50%;
    height: 100%;
    flex: none;
    border-radius: var(--inner-r);
    overflow: hidden;
    transition: border-radius var(--fin);
  }
  .feed-item:hover .slide-img { border-radius: var(--inner-r-hover); }
  .slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .slide-copy {
    flex: 1;
    min-width: 0;
    padding: 10px 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .slide-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
  }
  .slide-head span:first-child {
    font-size: 13.6px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--white);
  }
  .slide-head .arrow {
    font-size: 15px;
    color: var(--white);
    flex: none;
    transition: transform var(--fin);
  }
  .slide:hover .arrow { transform: translateX(4px); }
  .slide-text {
    font-size: 15px;
    line-height: 1.3;
    color: var(--white);
    opacity: 0.75;
  }

  /* ── Lower zone: two columns, right one spans the full height ── */
  .lower-zone {
    display: flex;
    gap: 10px;
    height: var(--lower-h);
  }

  .lower-left {
    width: var(--col-left);
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
  }

  .pills-row {
    display: flex;
    gap: 10px;
    height: var(--pills-h);
    flex: none;
  }
  .pill {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pill-bg);
    backdrop-filter: blur(var(--pill-blur));
    -webkit-backdrop-filter: blur(var(--pill-blur));
    border-radius: var(--pill-r);
    font-size: 13px;
    font-weight: 500;
    color: var(--white);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--fin-btn);
  }
  .pill:hover { background: var(--pill-bg-hover); }

  .brand-tile {
    flex: 1;
    background: var(--green-cta);
    border-radius: var(--card-r);
    padding: 20px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: filter var(--fin), border-radius var(--fin);
  }
  .brand-tile:hover {
    filter: brightness(1.12);
    border-radius: var(--card-r-hover);
  }
  .brand-tile-mark {
    margin: auto 0;            /* centers in the leftover space, Aker-style */
    font-family: 'Archivo Black', sans-serif;
    font-size: 21px;
    color: var(--white);
    line-height: 1.05;
  }
  .brand-tile-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.78);
  }

  /* Lower right: vertical slider, square, spans the whole lower zone */
  .bottom-swiper {
    width: var(--col-right);
    height: 100%;
    flex: none;
    cursor: grab;
  }
  .bottom-swiper:active { cursor: grabbing; }

  .vslide {
    width: 100%;
    height: 50%;
    flex: none;
    display: flex;
    align-items: flex-end;
    padding: 10.4px;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    position: relative;
  }
  .vslide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%);
  }
  .vslide span {
    position: relative;
    z-index: 1;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--white);
  }

  .pill:focus-visible,
  .slide:focus-visible,
  .brand-tile:focus-visible,
  .vslide:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  /* ══════════════════════════════════
     CONTACT CTA (bottom-left pill)
     ══════════════════════════════════ */
  .contact-pill {
    position: absolute;
    left: 24px;
    top: calc(50% + 100px);
    z-index: 4;
  }
  .contact-pill a {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 12px 28px;
    border-radius: 0;
    transition: border-color 0.3s, background 0.3s;
  }
  .contact-pill a:hover {
    border-color: var(--gold);
    background: rgba(232,168,73,0.1);
  }

  /* ══════════════════════════════════
     FULL-SCREEN MOBILE MENU
     ══════════════════════════════════ */
  .mobile-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background: var(--dark);
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
  .mobile-overlay.open {
    opacity: 1;
    pointer-events: all;
  }
  .mobile-overlay a {
    font-family: 'Archivo Black', sans-serif;
    font-size: 32px;
    color: var(--cream);
    text-decoration: none;
    transition: color 0.3s;
  }
  .mobile-overlay a:hover { color: var(--gold); }

  /* ══════════════════════════════════
     SCROLL CONTENT BELOW THE FOLD
     ══════════════════════════════════ */
  /* Scrolls up over the stationary hero */
  .below-fold {
    position: relative;
    z-index: 10;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -24px 60px rgba(0,0,0,0.45);
    overflow: hidden;
  }

  /* Light band: team statement + core services */
  .light-band {
    background: var(--white);
    color: var(--dark);
  }
  .light-band .team-statement {
    border-top: none;
  }
  .light-band .team-statement h2 { color: var(--dark); }
  .light-band .eyebrow { color: var(--gold-deep); }
  .light-band .section-head { color: var(--dark); }
  .light-band .wwd-title { color: var(--dark); }
  .light-band .wwd-desc { color: var(--body-text); }

  .light-band .wwd-sub { color: var(--dark); }
  .light-band .wwd-sub::before { background: var(--gold-deep); }
  .light-band .wwd-sub:hover,
  .light-band .wwd-sub:focus-visible { color: var(--gold-deep); }
  .light-band .wwd-sub:focus-visible { outline-color: var(--gold-deep); }

  /* Dark band: everything from the impact stage down */
  .dark-band {
    background: var(--dark);
  }
  .dark-band .numbers-strip { border-top: none; }


  .section-pad {
    padding: 72px 48px 40px;
    max-width: 1280px;
    margin: 0 auto;
  }

  .eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
  }

  .section-head {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 400;
    color: var(--cream);
    margin-bottom: 64px;
  }

  /* Team statement */
  .team-statement {
    padding: 104px 48px 60px;
    border-top: 1px solid rgba(232,168,73,0.08);
    max-width: 1280px;
    margin: 0 auto;
  }
  .team-statement h2 {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(20px, 2.8vw, 32px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--cream);
    max-width: 860px;
  }

  /* What We Do */
  .wwd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
  .wwd-item {}
  .wwd-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--cream);
    margin-bottom: 14px;
  }
  /* The three pillar headings now link to their service page. Inherit the
     heading colour so nothing moves visually, and take the band's gold on
     hover: full gold on the dark band, the deep gold on the light one where
     #E8A849 does not clear 4.5:1. */
  .wwd-title a { color: inherit; text-decoration: none; }
  .wwd-title a:hover,
  .wwd-title a:focus-visible { color: var(--gold); }
  .light-band .wwd-title a:hover,
  .light-band .wwd-title a:focus-visible { color: var(--gold-deep); }
  .wwd-desc {
    /* matched to .flow-line, the "01 Earn the attention" row above */
    font-size: 12px;
    line-height: 1.65;
    color: var(--text-muted);
    text-align: justify;
    /* Justify in a ~360px column opens rivers between words unless the
       renderer is allowed to break. Hyphens keep the gaps closed. */
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Sub-services: dot-bulleted list. The marker lives on the anchor, not
     the li, so hover state and dot stay on one element. */
  .wwd-subs {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    text-align: left;
  }
  .wwd-subs li { margin-bottom: 11px; }
  .wwd-subs li:last-child { margin-bottom: 0; }
  .wwd-sub {
    position: relative;
    display: block;
    padding-left: 18px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1.5;
    color: rgba(247,245,242,0.82);
    text-decoration: none;
    transition: color var(--fin);
  }
  .wwd-sub::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    transition: transform var(--fin) ease;
  }
  .wwd-sub:hover,
  .wwd-sub:focus-visible {
    color: var(--gold);
  }
  .wwd-sub:hover::before,
  .wwd-sub:focus-visible::before {
    transform: scale(1.6);
  }
  .wwd-sub:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
  .wwd-sub-arrow {
    display: inline-block;
    margin-left: 6px;
    font-size: 13px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--fin), transform var(--fin);
  }
  .wwd-sub:hover .wwd-sub-arrow,
  .wwd-sub:focus-visible .wwd-sub-arrow {
    opacity: 1;
    transform: translateX(0);
  }

  /* ── Services on a phone ──────────────────────────────────────────
     Two things were broken here, and neither was height. The sub-service
     arrow and the gold colour are revealed on :hover, which never fires on
     a touch screen, so twelve service links rendered as plain black
     bulleted text indistinguishable from body copy. And the description is
     justified, which opens rivers in a 342px column even with hyphens on.
     Chips give each link a visible edge and a 44px tap target, in two
     columns so the block gets shorter rather than longer.            */
  @media (max-width: 700px) {
    .wwd-grid { gap: 34px; }
    .wwd-desc { text-align: left; }

    .wwd-subs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 16px;
    }
    .wwd-subs li,
    .wwd-subs li:last-child { margin-bottom: 0; }

    .wwd-sub {
      display: flex;
      align-items: center;
      min-height: 44px;
      padding: 7px 10px 7px 22px;
      border: 1px solid rgba(247,245,242,0.22);
      border-radius: 8px;
      font-size: 12.5px;
      line-height: 1.3;
      letter-spacing: 0;
    }
    .light-band .wwd-sub { border-color: rgba(18,18,20,0.16); }
    .light-band .wwd-sub:hover,
    .light-band .wwd-sub:focus-visible { border-color: var(--gold-deep); }

    .wwd-sub::before {
      top: 50%;
      left: 9px;
      transform: translateY(-50%);
    }
    .wwd-sub:hover::before,
    .wwd-sub:focus-visible::before { transform: translateY(-50%) scale(1.6); }

    /* hover-only, so on touch it could never appear. the chip edge is the
       affordance instead. */
    .wwd-sub-arrow { display: none; }
  }

  /* Impact stage: numbers by default, service detail on hover */
  .numbers-strip .section-head { margin-bottom: 20px; }

  .impact-stage {
    margin-top: 20px;
    /* Sized to the three market panels so the stage does not resize when
       the service panel swaps in. */
    min-height: 420px;
    display: flex;
    align-items: center;
  }
  .numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 0;
    width: 100%;
  }
  .impact-stage.showing-svc .numbers-grid { display: none; }

  .svc-panel {
    display: none;
    width: 100%;
    grid-template-columns: 180px 1fr 1fr;
    gap: 32px;
    align-items: start;
  }
  .impact-stage.showing-svc .svc-panel { display: grid; }

  /* Each column enters from the left, staggered */
  .svc-panel > * {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.45s var(--slide-ease), transform 0.45s var(--slide-ease);
  }
  .svc-panel.in > * {
    opacity: 1;
    transform: translateX(0);
  }
  .svc-panel > *:nth-child(2) { transition-delay: 0.08s; }
  .svc-panel > *:nth-child(3) { transition-delay: 0.16s; }

  .svc-panel-img {
    width: 180px;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
  }
  .svc-panel-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .svc-panel h3 {
    font-family: 'Archivo Black', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--cream);
    margin-bottom: 12px;
  }
  .svc-panel p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
  }
  .svc-panel .proof {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .svc-panel .proof span {
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.3px;
  }
  @media (max-width: 900px) {
    .svc-panel { grid-template-columns: 1fr; gap: 24px; }
    .svc-panel-img { width: 140px; height: 140px; }
  }


  /* Numbers row */
  .numbers-strip {
    padding: 40px 48px 100px;
    border-top: 1px solid rgba(232,168,73,0.08);
    max-width: 1280px;
    margin: 0 auto;
  }
  .numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 48px;
  }
  .num-val {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(32px, 4vw, 48px);
    color: var(--gold);
    line-height: 1;
    margin-bottom: 10px;
    font-weight: 400;
  }
  .num-label {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.55;
  }

  /* ── Market panels: three image cards ──────────────────────────
     Replaces the six-card taxonomy. Lives inside .impact-stage so the
     sub-service hover swap still has something to hide.               */
  .market-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
  }
  .impact-stage.showing-svc .market-panels { display: none; }

  .mkt-panel {
    position: relative;
    display: block;
    height: clamp(340px, 30vw, 420px);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    isolation: isolate;
  }
  .mkt-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: scale(1.001);           /* kills the 1px edge seam on scale */
    transition: transform 0.6s var(--slide-ease);
  }
  /* Two stops, not one. A single linear scrim either washes the image or
     leaves the first line of copy sitting on a bright patch. */
  .mkt-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(to top, rgba(18,18,20,0.92) 0%, rgba(18,18,20,0.72) 26%,
                      rgba(18,18,20,0.18) 52%, rgba(18,18,20,0) 72%);
  }
  .mkt-body {
    position: absolute;
    z-index: 2;
    left: 0; right: 0; bottom: 0;
    padding: 22px 20px 20px;
  }
  .mkt-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(16px, 1.5vw, 19px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--white);
    margin-bottom: 9px;
  }
  .mkt-copy {
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(247,245,242,0.82);
    margin-bottom: 16px;
  }
  .mkt-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--dark);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background var(--fin), transform var(--fin);
  }
  .mkt-cta span { transition: transform var(--fin); }
  .mkt-panel:hover .mkt-img,
  .mkt-panel:focus-visible .mkt-img { transform: scale(1.05); }
  .mkt-panel:hover .mkt-cta span,
  .mkt-panel:focus-visible .mkt-cta span { transform: translateX(4px); }
  .mkt-panel:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
  }

  /* Section head row: title left, index link right */
  .mkt-head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }
  .mkt-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    white-space: nowrap;
    transition: gap var(--fin);
  }
  .mkt-all:hover { gap: 12px; }
  .impact-stage.showing-svc ~ .mkt-all { opacity: 0; }
  @media (max-width: 900px) {
    .market-panels { grid-template-columns: 1fr; gap: 18px; }
    .mkt-panel { height: 320px; }
  }
  /* Three stacked 320px cards ran 996px on a phone, so the third market was
     three screens down and almost never seen. Aker runs these as a swipe
     rail. The rail bleeds to both screen edges and re-insets with its own
     padding, so card one still lines up with the section gutter while a
     sliver of card two shows as the affordance. */
  @media (max-width: 700px) {
    /* The stage is held at 420px so the desktop hover swap does not resize
       it. There is no hover on a phone, so that reserve is just dead space
       above and below the rail. */
    .impact-stage { min-height: 0; }
    .market-panels {
      display: flex;
      grid-template-columns: none;
      gap: 12px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      /* .impact-stage is a grid, so width:auto would shrink-to-fit rather
         than fill. State the bleed as an explicit width instead: the
         content column plus both gutters. */
      width: calc(100% + 48px);
      margin-inline: -24px;
      padding: 0 24px 6px;
      /* snap to the inset edge, not the scrollport edge, so a snapped card
         lines up with the section gutter above it */
      scroll-padding-inline: 24px;
    }
    .market-panels::-webkit-scrollbar { display: none; }
    .mkt-panel {
      flex: 0 0 74%;
      height: 300px;
      scroll-snap-align: start;
    }
  }


  /* Clickable stat card. Sits inside .numbers-grid, which the
     sub-service hover hides via display:none, so there is no
     overlay to intercept clicks and no conflict with the swap. */
  .num-card {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(232,168,73,0.14);
    cursor: pointer;
  }
  .num-card::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--fin) ease;
  }
  .num-card:hover::after,
  .num-card:focus-visible::after { transform: scaleX(1); }
  .num-card:hover .num-label { color: rgba(247,245,242,0.9); }
  .num-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 6px;
  }

  /* Reserves its space at rest so the grid never jumps on hover */
  .num-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: 0.2px;
    color: var(--gold);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--fin), transform var(--fin);
  }
  .num-card:hover .num-cta,
  .num-card:focus-visible .num-cta {
    opacity: 1;
    transform: translateY(0);
  }
  @media (hover: none) {
    .num-cta { opacity: 1; transform: none; }
  }

  /* CTA band */





  /* Footer */









  /* ══════════════════════════════════
     RESPONSIVE
     ══════════════════════════════════ */
  @media (max-width: 1180px) {
    .cards-panel { right: 20px; }
    .brand-giant {
      left: 20px;
    }
    .brand-giant img {
      width: clamp(280px, 40vw, 620px);
    }
    .mission-block { left: 20px; max-width: 300px; }
    .mission-text { max-width: 280px; }
    .contact-pill { left: 20px; }
  }

  @media (max-width: 700px) {
    /* ── Mobile hero, Aker pattern ────────────────────────────
       The cluster used to be hidden outright below 700px. It now
       takes the bottom of the hero at full width and reflows, the
       way akercompanies.com does it. The giant wordmark steps
       aside to make room; the brand still reads from the nav pill.
       transform is cleared because home.js scales the desktop
       cluster to fit, and scaling here would shrink the type
       instead of reflowing it. */
    .cards-panel {
      left: 16px;
      right: 16px;
      bottom: 16px;
      width: auto;
      transform: none;
      --panel-h: calc((100vw - 32px) / 2.59);
      --lower-h: calc((100vw - 42px) / 2);
      --zone-gap: 14px;
      --stack-gap: 10px;
      --pills-h: 34px;
      --panel-pad: 10px;
      --panel-gap: 12px;
    }
    /* two equal columns, right tile square, green card bottom aligned */
    .lower-left   { width: auto; flex: 1; }
    .bottom-swiper{ width: auto; flex: 1; }
    .pills-row    { gap: 8px; }
    .brand-tile   { padding: 16px; }
    .brand-tile-mark { font-size: 18px; }

    /* the wordmark yields the bottom of the screen to the cluster */
    .brand-giant { display: none; }

    /* mission copy moves up out of the cluster's way */
    .mission-block { top: 120px; }
    .brand-giant {
      left: 16px;
      bottom: 12px;
    }
    .brand-giant img {
      width: clamp(220px, 62vw, 460px);
    }
    .mission-block { left: 16px; max-width: 292px; }
    .mission-text { font-size: 14px; max-width: 260px; }
    .hero-h1 { font-size: 20px; margin-bottom: 10px; }
    .contact-pill { left: 16px; }
    .nav { padding: 20px 20px; }
    .wwd-grid { grid-template-columns: 1fr; gap: 40px; }
    .numbers-grid { grid-template-columns: repeat(2, 1fr); }
    .team-statement { padding: 72px 24px 44px; }
    .section-pad { padding: 52px 24px 32px; }
    .numbers-strip { padding: 32px 24px 72px; }



  }

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

  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition-duration: 0.01ms !important; }
  }


  /* Standalone section: the homepage set height:100% for the sticky
     hero, which this file no longer has. */
  html, body { height: auto; }

  /* ══════════════════════════════════
     v6 SECTION ADDITIONS
     Transcribed from the reference comp. Everything above this
     block is carried over from playbook-homepage-v2-17 unchanged.
     ══════════════════════════════════ */

  /* Section head sits tighter so the flow line reads as a subtitle */
  .section-pad .section-head { margin-bottom: 8px; }

  /* 01 Earn the attention -> 02 Build the awareness -> 03 Cultivate the relevance -> 04 Maintain the consideration */
  .flow-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 12px;
    color: var(--body-text);
    margin-bottom: 72px;
  }
  .flow-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .flow-num {
    font-family: 'Archivo Black', sans-serif;
    font-size: 10px;
    color: var(--gold-deep);
  }
  .flow-arrow {
    color: var(--gold-deep);
    font-size: 12px;
    padding: 0 4px;
  }
  /* Scaffold only: gives the bottom-row market links a target while
     this section is viewed standalone. Delete on merge. */

  @media (max-width: 700px) {
    .flow-line { font-size: 11px; margin-bottom: 40px; }
  }





  /* ══════════════════════════════════════════════════════════════
     MERGED FROM playbook-logo-wall-dark-v2.
     Its :root, body and * rules were dropped: the wall shipped with
     --dark #1C1C1E and --white #FAFAFA, which would have repainted the
     whole page. It now inherits the page tokens, so the wall ground
     matches the markets band directly above it.
     ══════════════════════════════════════════════════════════════ */

.logo-wall{padding:104px 56px 116px;background:var(--dark);border-top:1px solid rgba(255,255,255,0.08)}
.logo-wall-label{text-align:center;font-size:12px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:rgba(247,245,242,0.66);margin-bottom:72px}

.logo-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:44px 56px;align-items:center;max-width:1200px;margin:0 auto}
.logo-cell{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:150px;height:56px}
.logo-cell img{max-width:100%;max-height:50px;width:auto;height:auto;object-fit:contain;opacity:0.72;transition:opacity .3s}
.logo-cell img:hover,.logo-cell img:focus-visible{opacity:1}
  @media (max-width:900px) {
  .logo-wall{padding:64px 24px 72px}
  .logo-wall-label{margin-bottom:48px}
  .logo-grid{gap:32px 36px}
  .logo-cell{width:114px;height:50px}
  .logo-cell img{max-height:44px;opacity:0.9}
}

  @media (max-width:480px) {
  .logo-grid{gap:26px 28px}
  .logo-cell{width:96px;height:44px}
  .logo-cell img{max-height:38px}
}

  @media (prefers-reduced-motion:reduce) {*{transition:none !important}}

  @media print {.logo-wall{background:#fff}.logo-wall-label{color:#666}.logo-cell img{opacity:1}}




  /* ══════════════════════════════════════════════════════════════
     MERGED FROM Footer-and-CTA-v5.
     Globals dropped. Its :root set --teal #17B8A6 and --fin 0.35s,
     which would have recoloured the market illustrations and slowed
     every transition on the page. Only --gold-hover was genuinely new,
     and it now lives in the page :root above.
     ══════════════════════════════════════════════════════════════ */


  /* ── CTA band ─────────────────────────────────────────────── */
  .cta-band {
    /* .below-fold is transparent and the hero underneath is position:sticky,
       so every band has to paint its own ground. */
    background: var(--dark);
    padding: 140px 48px;
    text-align: center;
    border-top: 1px solid rgba(232,168,73,0.08);
  }
  .cta-band h2 {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 400;
    color: var(--cream);
    margin-bottom: 16px;
  }
  .cta-band p {
    font-size: 15px;
    color: var(--text-muted);
    max-width: 520px;
    margin: 0 auto 36px;
    line-height: 1.6;
  }
  .cta-btn {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dark);
    background: var(--gold);
    padding: 16px 52px;
    text-decoration: none;
    transition: background var(--fin), transform 0.2s;
  }
  .cta-btn:hover { background: var(--gold-hover); transform: translateY(-2px); }
  .cta-btn:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 4px;
  }

  .cta-reply {
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-muted);
  }

  /* ── Footer ───────────────────────────────────────────────── */
  /* Full-bleed ground and separator. .footer itself is capped at 1280 and
     centred, so it cannot carry either without insetting them. */
  .footer-band {
    background: var(--dark);
    border-top: 1px solid rgba(232,168,73,0.08);
  }
  .footer {
    padding: 60px 48px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
  }
  .footer-wordmark {
    width: 150px;
    height: auto;
    display: block;
    margin-bottom: 16px;
  }
  .footer-addr {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
  }
  .footer-addr a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--fin);
  }
  .footer-addr a:hover,
  .footer-addr a:focus-visible { color: var(--teal); }

  .footer-links { display: flex; gap: 56px; }
  .footer-col h4 {
    font-size: 11px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
  }
  .footer-col a {
    display: block; font-size: 13px; color: var(--text-muted);
    text-decoration: none; margin-bottom: 10px;
    transition: color var(--fin);
  }
  .footer-col a:hover,
  .footer-col a:focus-visible { color: var(--cream); }

  .footer-copy {
    width: 100%; padding-top: 36px;
    border-top: 1px solid rgba(154,154,160,0.1);
    font-size: 12px; color: rgba(154,154,160,0.92);
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
  }
  .footer-copy a {
    color: rgba(154,154,160,0.92);
    text-decoration: none;
    transition: color var(--fin);
  }
  .footer-copy a:hover,
  .footer-copy a:focus-visible { color: var(--cream); }

  a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

  @media (max-width: 700px) {
    .cta-band { padding: 100px 24px; }
    .footer { padding: 48px 24px; }
    .footer-links { gap: 36px; }
  }
  @media (max-width: 560px) {
    .footer-links { flex-direction: column; gap: 28px; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition-duration: 0.01ms !important; }
    .cta-btn:hover { transform: none; }
  }



/* A landscape phone has no room for the cluster under the copy, so it keeps
   the previous behaviour and the wordmark comes back. */
@media (max-width: 700px) and (max-height: 620px){
  .cards-panel { display: none; }
  .brand-giant { display: block; }
  .mission-block { top: calc(50% + 16px); }
}


/* ══════════════════════════════════════════════════════════════
   CLIENT LOGO WALL ON A PHONE                          v12
   The wall is a flex-wrap row of fixed-width cells, so the column
   count is whatever happens to fit rather than a decision. At 390px
   it landed on two by four pixels: 40 logos became 20 rows and
   1573px, which is 1.9 phone screens of nothing but logos.

   Stated as a grid, four across. Four is the last column count where
   the wide wordmarks survive. At five, Roc Nation renders 12px tall
   and United Nude 8px, because a wide mark squeezed into a narrow
   cell has to shrink vertically to keep its shape, and a logo nobody
   can resolve is taking up space without building any trust.

   The old column gap was also eating a third of the available width
   for no gain, so it comes down to 12px. Desktop above 700px is
   untouched.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .logo-wall { padding: 56px 24px 64px; }
  .logo-wall-label { margin-bottom: 40px; }

  .logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px 12px;
    max-width: none;
  }
  /* the cell was a fixed 96px box inside a flex row. in the grid the
     track sets the width, so the cell must stop declaring one. */
  .logo-cell {
    width: auto;
    height: 36px;
  }
  .logo-cell img { max-height: 28px; }
}

/* The 701-900 band still ran the old flex row, which left a tablet worse
   off than a phone: beauty measured 1027px at 768px wide against 675px at
   700px. Same grid, six across, because the extra width is there. */
@media (min-width: 701px) and (max-width: 900px) {
  .logo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 26px 16px;
    max-width: none;
  }
  .logo-cell {
    width: auto;
    height: 44px;
  }
  .logo-cell img { max-height: 34px; }
}

/* 901-1200 was the worst band of all and it predates this patch: the flex
   row uses fixed 150px cells with a 56px column gap, which only fits four
   per row until about 1200px, so a 1024px laptop rendered a taller wall
   than a phone. Same grid, seven across, which lands on the cell width the
   1440px layout was designed around. Above 1200 the original row fits its
   own geometry and is left alone. */
/* The ceiling is 1311px, not 1200px, because the flex row only works once
   its 1200px container is fully available, which needs 1200 + 112px of
   padding. Below that it silently drops to four or five per row. */
@media (min-width: 901px) and (max-width: 1311px) {
  .logo-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 34px 20px;
    max-width: none;
  }
  .logo-cell {
    width: auto;
    height: 52px;
  }
  .logo-cell img { max-height: 44px; }
}


/* ══════════════════════════════════════════════════════════════
   HOME HERO ON A PHONE                                   v12
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* 100vh on iOS is the LARGE viewport, measured with the URL bar
     hidden, so a bottom-anchored cluster starts about 74px underneath
     it. 100svh is the viewport actually on screen. vh stays first as
     the fallback for engines that do not know svh. */
  .hero-canvas {
    height: 100vh;
    height: 100svh;
  }

  /* Masthead hairline under the nav, the way Aker opens its hero.
     ::after is already the scrim below, so this rides on ::before.
     The line above the cards is a different device, positioned from
     home.js, and is left alone. */
  .hero-canvas::before {
    content: '';
    position: absolute;
    top: 61px;
    left: 16px;
    right: 16px;
    height: 1px;
    background: rgba(255,255,255,0.18);
    z-index: 3;
    pointer-events: none;
  }

  /* The scrim covered only the bottom 55%, so the hero copy sat on raw
     video. Measured off the rendered page, the subheader came in at
     4.4:1 on a 390 and 4.1:1 on a 430, against a 4.5:1 requirement,
     and opacity could not fix it: white tops out at 4.8:1 on that
     frame. So ::after now spans the whole canvas and carries two
     layers. The lower one restates the original bottom gradient across
     the full height (its 0/30/65/100 stops inside the bottom 55%
     become 45/61.5/80.75/100), so the existing look is unchanged. The
     upper one is new. With it: 6.2:1 at 390 and 6.3:1 at 430.
     A scrim also travels with the video, which a tuned opacity cannot:
     the clip moves and a pale frame would drop the copy through the
     floor. */
  .hero-canvas::after {
    top: 0;
    bottom: 0;
    height: auto;
    background:
      linear-gradient(to bottom,
        rgba(20,20,22,0.55) 0%,
        rgba(20,20,22,0.30) 17%,
        rgba(20,20,22,0) 33%),
      linear-gradient(to bottom,
        transparent 45%,
        rgba(32,32,34,0.15) 61.5%,
        rgba(32,32,34,0.68) 80.75%,
        rgba(32,32,34,0.7) 100%);
  }

  /* type */
  .hero-h1 {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em;
    margin-bottom: 4px;
  }
  .mission-text {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.39;
    opacity: 0.84;
  }
  .mission-block { top: 76px; }

  /* card cluster */
  .cards-panel {
    bottom: 16px;
    --panel-h: calc((100vw - 32px) / 2.80);
    --lower-h: 126px;
  }
  /* the copy column was losing its last line to a hard cut at the panel
     edge. the card does not need to be taller: 42% and 12.5px clears it
     on every phone from 375 to 430. */
  .slide-img { width: 42%; }
  .slide-text { font-size: 12.5px; }
  .slide-head span:first-child { font-size: 13.5px; }
}

/* The landscape guard was written against 100vh heights. Under 100svh an
   iPhone SE in PORTRAIT reports 577px, which tripped the 620px threshold
   and hid the entire card cluster. Scope it to landscape and drop the
   threshold below the SE. */
@media (max-width: 700px) and (max-height: 620px) and (orientation: portrait) {
  .cards-panel { display: flex; }
  .brand-giant { display: none; }
}
@media (max-width: 700px) and (max-height: 520px) {
  .cards-panel { display: none; }
  .brand-giant { display: block; }
}


  /* ══════════════════════════════════════════════════════════════════════
     WHAT WE DO, three-pillar version
     The pillar name is now the link, which removes a whole row per column,
     and the proof line carries a real figure from the case study it points
     at. Scoped to .wwd-grid-3 so the .wwd-* rules above, which four other
     stylesheets also define, keep working wherever they are still used.
     ══════════════════════════════════════════════════════════════════════ */
  .wwd-arg {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 400;
    /* 27ch, not 19ch: the narrower measure forced a third line at 46px and
       cost more height than the twelve links it replaced. */
    font-size: clamp(28px, 3.9vw, 42px);
    letter-spacing: -0.03em;
    line-height: 1.06;
    color: var(--dark);
    margin: 0 0 30px;
    max-width: 27ch;
    text-wrap: balance;
  }
  .wwd-arg em { font-style: normal; color: var(--gold-deep); }

  .wwd-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 2px solid var(--dark);
  }
  .wwd-grid-3 .wwd-item {
    padding: 22px 28px 22px 0;
    border-right: 1px solid var(--light-border);
  }
  .wwd-grid-3 .wwd-item:last-child { border-right: 0; padding-right: 0; }
  .wwd-grid-3 .wwd-title {
    margin: 0 0 9px;
    font-size: 18px;
    letter-spacing: -0.01em;
  }
  .wwd-grid-3 .wwd-title a { font-weight: 600; }
  .wwd-grid-3 .wwd-title a::after { content: " \2192"; color: var(--gold-deep); }
  .wwd-grid-3 .wwd-desc {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 14px;
    text-align: left;
  }

  .wwd-proof {
    display: block;
    text-decoration: none;
    color: #5A5A5E;
    font-size: 12.5px;
    line-height: 1.5;
    border-left: 2px solid var(--gold);
    padding-left: 12px;
  }
  .wwd-proof b {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    letter-spacing: -0.01em;
    color: var(--gold-deep);
    margin-right: 6px;
  }
  .wwd-proof em { font-style: normal; color: #736D65; }
  .wwd-proof:hover { color: var(--dark); }
  .wwd-proof:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

  @media (max-width: 820px) and (min-width: 701px) {
    .wwd-grid-3 { grid-template-columns: 1fr; }
    .wwd-grid-3 .wwd-item {
      border-right: 0;
      border-bottom: 1px solid var(--light-border);
      padding: 20px 0;
    }
    .wwd-grid-3 .wwd-item:last-child { border-bottom: 0; }
  }

  @media (max-width: 700px) {
    /* the swipe rail the markets section already uses below 700px, so the
       gesture is one the page has already taught by the time you reach it */
    .wwd-grid-3 {
      display: flex;
      gap: 14px;
      border-top: 0;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      width: calc(100% + 40px);
      margin-inline: -20px;
      padding: 0 20px 14px;
      scroll-padding-inline: 20px;
      -webkit-overflow-scrolling: touch;
    }
    .wwd-grid-3::-webkit-scrollbar { display: none; }
    .wwd-grid-3 .wwd-item {
      flex: 0 0 78%;
      scroll-snap-align: start;
      border-right: 0;
      border-top: 2px solid var(--dark);
      padding: 18px 0 4px;
    }
  }

  /* ══════════════════════════════════════════════════════════════════════
     CASE STUDY ACCORDION
     Moved here from the beauty market page. Proportions are Jean's from the
     prototype: 440px tall, 54px spines, 9x open weight, 14px vertical labels,
     cream ground. The covers link out to the case study pages, so there is no
     overlay on this page and none of its weight.
     ══════════════════════════════════════════════════════════════════════ */
  .cases-band {
    background: var(--cream);
    padding: clamp(56px, 7vw, 92px) clamp(20px, 5vw, 76px) clamp(56px, 7vw, 92px);
  }
  .cases-head { margin-bottom: clamp(26px, 3vw, 40px); }
  .cases-title {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -0.03em;
    line-height: 1.04;
    color: var(--dark);
    margin: 0;
  }

  .accordion {
    display: flex;
    height: 520px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
    position: relative;
  }
  /* min-width is the spine floor. At full width the flex ratio already gives
     each closed panel more than 54px, so it only binds as the window narrows. */
  .acc-panel {
    position: relative;
    flex: 1 1 0;
    min-width: 54px;
    cursor: pointer;
    overflow: hidden;
    transition: flex 0.65s cubic-bezier(0.65,0,0.35,1);
    background: var(--strip);
  }
  .acc-panel.active { flex: 10.5 1 0; }
  .acc-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: var(--imgpos, center);
    filter: brightness(1.05);
    transform: scale(var(--zoom, 1));
    transform-origin: var(--imgpos, center);
    opacity: 0;
    transition: opacity 0.5s ease 0.15s;
  }
  .acc-panel.active .acc-img { opacity: 1; }
  .acc-label {
    position: absolute; bottom: 30px; left: 50%;
    transform: translateX(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-family: 'Archivo Black', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    white-space: nowrap;
    color: var(--lblcol);
    transition: opacity 0.35s;
  }
  .acc-panel.active .acc-label { opacity: 0; }
  .acc-num {
    position: absolute; top: 24px; left: 50%;
    transform: translateX(-50%);
    font-family: 'Archivo Black', sans-serif;
    font-size: 17px;
    color: var(--numcol);
    transition: opacity 0.35s;
  }
  .acc-panel.active .acc-num { opacity: 0; }
  .acc-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px 36px 26px;
    /* Jean's tuning, 21 Sep 2026: a lighter box (47% desktop, 32% mobile)
     chosen over the earlier 86%, knowing the text reads below 4.5:1 on the
     lighter covers. */
    background: rgba(0,0,0,0.47);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease 0.35s, transform 0.4s ease 0.35s;
    z-index: 3;
  }
  .acc-panel.active .acc-caption { opacity: 1; transform: translateY(0); }
  .acc-caption::before {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 100%;
    height: 100px;
    background: linear-gradient(to top, rgba(0,0,0,0.47), rgba(0,0,0,0));
    pointer-events: none;
  }
  /* gold, not gold-deep: this sits on a near-black scrim, where the deep tone
     drops under 4.5:1 */
  .acc-caption .ac-cat {
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
  }
  .acc-caption .ac-name {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(22px, 2.2vw, 30px);
    color: #fff; margin-bottom: 8px;
  }
  .acc-caption .ac-desc {
    font-size: 13.5px; line-height: 1.55;
    color: rgba(255,255,255,0.90);
    max-width: 460px; margin-bottom: 14px;
  }
  .acc-caption .ac-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 24px;
    background: #fff; color: var(--dark);
    border-radius: 100px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
    text-decoration: none;
    transition: background 0.3s;
  }
  .acc-caption .ac-btn:hover { background: var(--gold); }
  .acc-caption .ac-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .acc-caption .ac-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

  .cases-foot { margin: 22px 0 0; font-size: 13px; }
  .cases-foot a {
    color: var(--gold-deep); text-decoration: none;
    font-weight: 600; letter-spacing: 0.02em;
  }
  .cases-foot a:hover { text-decoration: underline; }

  @media (max-width: 900px) {
    /* Below 900px eight spines leave the open panel too little room, so the
       component stacks: every panel opens to a readable card. */
    .accordion { flex-direction: column; height: auto; border-radius: 14px; }
    .acc-panel, .acc-panel.active { flex: none; height: 190px; }
    .acc-img { opacity: 1; }
    .acc-label, .acc-num { display: none; }
    .acc-caption { opacity: 1; transform: none; padding: 22px; background: rgba(0,0,0,0.32); }
    .acc-caption::before { height: 30px; background: linear-gradient(to top, rgba(0,0,0,0.32), rgba(0,0,0,0)); }
    .acc-caption .ac-desc { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .acc-panel, .acc-img, .acc-caption, .acc-label, .acc-num { transition: none; }
  }