@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: #8B857D;
    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: #A39C93;
  }
  @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: #9A6A18;   /* gold is unreadable on cream at small sizes */
    --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.45) 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: 320px;
  }

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

  .mission-text {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--white);
  }

  /* ══════════════════════════════════
     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;
  }
  .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);
  }

  /* 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; }
  }


  /* 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: 280px; }
    .contact-pill { left: 20px; }
  }

  @media (max-width: 700px) {
    .cards-panel { display: none; }
    .brand-giant {
      left: 16px;
      bottom: 12px;
    }
    .brand-giant img {
      width: clamp(220px, 62vw, 460px);
    }
    .mission-block { left: 16px; max-width: 260px; }
    .mission-text { font-size: 14px; }
    .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 Cultivate relevancy -> 03 Maintain 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.45);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.78);
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
  }
  .footer-copy a {
    color: rgba(154,154,160,0.78);
    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; }
  }



  /* ══════════════════════════════════════════════════════════════
     Market landing page. Shares the sheet with the homepage so the
     nav and footer are identical; the rules below are page-only.
     ══════════════════════════════════════════════════════════════ */
  .mkt-hero {
    background: var(--dark);
    padding: 176px 48px 104px;
  }
  .mkt-hero-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
  }
  .mkt-h1 {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(32px, 4.4vw, 60px);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -0.02em;
    color: var(--cream);
    margin-bottom: 22px;
  }
  .mkt-lede {
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.7;
    color: rgba(247,245,242,0.72);
    max-width: 460px;
  }
  .mkt-art {
    margin: 0 0 0 auto;
    max-width: 400px;
    color: var(--teal);
  }
  .mkt-art svg { display: block; width: 100%; height: auto; color: inherit; }

  /* White paper capture */
  .wp-band { background: var(--white); color: var(--dark); }
  .wp-grid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 96px 48px 104px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 72px;
    align-items: start;
  }
  .wp-band .eyebrow { color: var(--gold-deep); }
  .wp-h2 {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(24px, 2.4vw, 36px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin-bottom: 20px;
  }
  .wp-copy {
    font-size: 14px;
    line-height: 1.7;
    color: var(--body-text);
    max-width: 480px;
  }
  .wp-form { display: flex; flex-direction: column; gap: 18px; }
  .wp-field { display: flex; flex-direction: column; gap: 7px; }
  .wp-field label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #8B857D;
  }
  .wp-field input {
    font-family: inherit;
    font-size: 15px;
    color: var(--dark);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--light-border);
    padding: 10px 2px;
    transition: border-color var(--fin);
  }
  .wp-field input:focus {
    outline: none;
    border-bottom-color: var(--gold-deep);
  }
  .wp-submit {
    align-self: flex-start;
    margin-top: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--dark);
    background: var(--gold);
    border: 0;
    border-radius: 999px;
    padding: 15px 32px;
    cursor: pointer;
    transition: background var(--fin), transform var(--fin);
  }
  .wp-submit:hover { background: var(--gold-hover); transform: translateY(-2px); }
  .wp-fine {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-top: 4px;
  }

  @media (max-width: 900px) {
    .mkt-hero { padding: 132px 24px 72px; }
    .mkt-hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .mkt-art { max-width: 320px; margin: 0 auto; }
    .wp-grid { grid-template-columns: 1fr; gap: 44px; padding: 64px 24px 72px; }
  }