/* ========== WHAT WE DO ========== */
    #whatwedo {
      background: var(--white);
      padding: 140px 5%;
      overflow: hidden;
    }

    .wwd-container {
      max-width: 100%;
      margin: 0 auto;
    }

    .wwd-top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
      margin-bottom: 120px;
    }

    .wwd-services {
      display: flex;
      flex-direction: column;
    }

    .wwd-service-item {
      padding: 28px 0;
      border-bottom: 1px solid var(--light-gray);
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 24px;
      align-items: center;
      position: relative;
      overflow: hidden;
      opacity: 0;
      transform: translateX(-60px);
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .wwd-service-item.visible {
      opacity: 1;
      transform: translateX(0);
    }

    .wwd-service-item::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(255, 69, 19, 0.04), transparent);
      transform: translateX(-100%);
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .wwd-service-item:hover::before {
      transform: translateX(0);
    }

    .wwd-service-item:hover {
      padding-left: 16px;
    }

    .wwd-service-item:first-child {
      border-top: 1px solid var(--light-gray);
    }

    .wwd-service-num {
      font-family: 'Sequel Sans Display', 'Aptos Display', Arial, sans-serif;
      font-size: 13px;
      color: var(--orange);
      font-weight: 500;
      position: relative;
      z-index: 1;
    }

    .wwd-service-name {
      font-family: 'Sequel Sans Display', 'Aptos Display', Arial, sans-serif;
      font-size: clamp(20px, 2.2vw, 28px);
      font-weight: 600;
      letter-spacing: -0.5px;
      transition: color 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .wwd-service-item:hover .wwd-service-name {
      color: var(--orange);
    }

    .wwd-service-arrow {
      width: 36px;
      height: 36px;
      border: 1px solid var(--light-gray);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      z-index: 1;
    }

    .wwd-service-arrow svg {
      width: 14px;
      height: 14px;
      transition: transform 0.3s ease;
    }

    .wwd-service-item:hover .wwd-service-arrow {
      background: var(--orange);
      border-color: var(--orange);
      color: var(--white);
      transform: rotate(-45deg);
    }

    .wwd-service-item:hover .wwd-service-arrow svg {
      transform: rotate(45deg);
    }

    .wwd-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      max-width: 100%;
      margin: 0 auto;
      border: 1px solid var(--light-gray);
    }

    .wwd-stat {
      text-align: center;
      padding: 52px 20px;
      position: relative;
      overflow: hidden;
      border-right: 1px solid var(--light-gray);
    }

    .wwd-stat:last-child {
      border-right: none;
    }

    .wwd-stat::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--orange);
      transform: scaleY(0);
      transform-origin: bottom;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 0;
    }

    .wwd-stat:hover::before {
      transform: scaleY(1);
    }

    .wwd-stat>* {
      position: relative;
      z-index: 1;
      transition: color 0.4s ease;
    }

    .wwd-stat:hover .wwd-stat-number,
    .wwd-stat:hover .wwd-stat-number span,
    .wwd-stat:hover .wwd-stat-label {
      color: var(--white) !important;
    }

    .wwd-stat-number {
      font-family: 'Sequel Sans Display', 'Aptos Display', Arial, sans-serif;
      font-size: clamp(36px, 3.5vw, 54px);
      font-weight: 700;
      color: var(--black);
      letter-spacing: -2px;
      line-height: 1;
      margin-bottom: 8px;
    }

    .wwd-stat-number span {
      color: var(--orange);
      transition: color 0.4s ease;
    }

    .wwd-stat-label {
      font-size: 11px;
      color: var(--gray);
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    /* ========== WHAT WE DO (SERVICES) ========== */
    .wwd-section {
      position: relative;
      /* Sits above the cube canvas (z-index 100002) but is TRANSPARENT: the orange cube face
         expands BEHIND this content (see setOrangeExpansion `behind`). Content is black on the
         cream backdrop and flips to white via `.is-orange` once the orange fills the screen. */
      z-index: 100003;
      background-color: transparent;
      transition: background-color 0.4s ease;
      padding: 0px 5% 0px;
      font-family: 'Sequel Sans Display', 'Sequel Sans Display', Arial, sans-serif;
      overflow-x: clip;
      margin-top: 0px;
      overflow-y: visible;
    }

    /* Once the orange has "committed" (item 03 reaches the viewport top), the section takes its
       OWN orange background so it stays orange regardless of what the cube does afterwards (it
       leaves the scene for the video / later sections). Same hex as the cube face = no seam. */
    .wwd-section.wwd-solid-orange {
      background-color: #ff4612;
    }

    /* Horizontal sticky sequences. Two separate wrappers:
       - `.sa-slide-wrapper--first`: 2 panes (video → OUR APPROACH intro). Extra height
         gives a scroll-dwell where the pinned video stays still before horizontal starts.
       - `.sa-slide-wrapper--second`: 5 panes (Data-Driven → Sustainability-Focused).
       Each wrapper's height - 100vh = its sticky travel. JS reads children count + a
       data-dwell attribute to know how to map progress → horizontal translation. */
    .sa-slide-wrapper {
      width: 100%;
    }
    .sa-slide-wrapper--first  { height: 600vh; } /* cascade open + wheel through 6 cards + swap (trimmed: no intro slide-in, no post-swap dwell — pre-footer arrives ~100vh sooner) */
    .sa-slide-wrapper--second { height: 700vh; } /* Investor-First dwell + 5 horizontal transitions */

    /* Vertical pinned video section (used to live as the first pane of wrapper--first
       as a horizontal slide; now scrolls vertically until Six Principles is reached). */
    .video-vertical-wrapper {
      width: 100%;
      /* Just slightly taller than the viewport: a brief 30vh pin lets the block-mask
         staircase trigger, then the section scrolls naturally into the next one. */
      height: 130vh;
    }
    .video-vertical-sticky {
      position: sticky;
      top: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      z-index: 100005;
    }
    .video-vertical-sticky .sa-pane--video {
      width: 100%;
      height: 100%;
    }
    .sa-slide-sticky {
      position: sticky;
      top: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      /* Above the cube canvas (z-index: 100002) so the orange video pane and each slide's
         text paint on top of the cube. Where the slides have no background (all of them
         except the orange video pane), the transparent area lets the cube show through —
         so the cube appears to sit inside the scene behind the slide content. */
      z-index: 100005;
    }
    .sa-slide-track {
      display: flex;
      height: 100%;
      will-change: transform;
    }
    /* Track widths: one 100vw pane per child. Individual wrappers override via the
       number of panes they contain. */
    .sa-slide-wrapper--first  .sa-slide-track { width: 200vw; }
    .sa-slide-wrapper--second .sa-slide-track { width: 600vw; }

    /* OUR APPROACH intro pane: small label above the title; cube renders on the right
       30% via the existing canvas overlay (see cube3D approach mode). */
    .sa-oa-label {
      display: inline-block;
      font-family: 'Sequel Sans Display', Arial, sans-serif;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(10, 10, 10, 0.6);
      margin-bottom: 28px;
    }

    /* (Investor-First is now the first slide of .sa-slide-wrapper--second; no standalone
       section needed.) */
    .sa-pane {
      width: 100vw;
      height: 100vh;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }
    .sa-pane--video {
      background: #ff4612;
      position: relative;
      overflow: hidden;
    }
    .sa-pane--if {
      background: #f5f5f0;
      padding: 0 10vw;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
    }
    .sa-if-inner {
      max-width: 720px;
    }

    .wwd-video {
      width: min(90vw, 1700px);
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: 8px;
      position: relative;
    }

    .wwd-video video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center center;
    }

    .wwd-bottom-text {
      font-family: 'Sequel Sans Display', 'Sequel Sans Display', Arial, sans-serif;
      font-weight: 700;
      white-space: nowrap;
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100vw;
      text-align: center;
      line-height: 0.85;
      margin: 0;
      z-index: 8;
      pointer-events: none;
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 100%);
      will-change: transform;
      display: none;
    }

    .wwd-header {
      text-align: start;
      margin-bottom: 100px;
      max-width: 50%;
    }

    .wwd-label {
      display: inline-block;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(0, 0, 0, 0.6);
      border-radius: 40px;
      margin-bottom: 28px;
      transition: color 0.5s ease;
    }

    .wwd-title {
      font-family: 'Sequel Sans Display', 'Sequel Sans Display', Arial, sans-serif;
      font-size: 72px;
      font-weight: 500;
      line-height: 1.1;
      color: #000000;
      margin: 0;
      transition: color 0.5s ease;
    }

    .wwd-list {
      display: flex;
      flex-direction: column;
    }

    .wwd-item {
      display: grid;
      grid-template-columns: 60px 1fr 1fr;
      gap: 24px;
      align-items: baseline;
      padding: 48px 0;
      border-top: 1px solid rgba(0, 0, 0, 0.15);
      opacity: 0.5;
      transition: opacity 0.4s ease, border-color 0.5s ease;
    }

    .wwd-item:last-child {
      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    }

    .wwd-item.active {
      opacity: 1;
    }

    .wwd-num {
      font-family: 'Sequel Sans Display', 'Sequel Sans Display', Arial, sans-serif;
      font-size: 22px;
      font-weight: 400;
      color: #000000;
      transition: color 0.5s ease;
    }

    .wwd-item-title {
      font-family: 'Sequel Sans Display', 'Sequel Sans Display', Arial, sans-serif;
      font-size: 56px;
      font-weight: 500;
      color: #000000;
      line-height: 1.2;
      margin: 0;
      transform: translateY(2px);
      transition: color 0.5s ease;
    }

    .wwd-item-desc {
      font-family: 'Sequel Sans Display', 'Sequel Sans Display', Arial, sans-serif;
      font-size: 22px;
      font-weight: 400;
      line-height: 1.6;
      color: #000000;
      margin: 0;
      max-width: 540px;
      transition: color 0.5s ease;
    }

    /* White text whenever the backdrop is orange — either during the cube entry (.is-orange,
       driven by the expansion progress) or once the section has committed to its own orange bg
       (.wwd-solid-orange). Smooth crossfade via the per-element color transitions above. */
    .wwd-section.is-orange .wwd-label,
    .wwd-section.wwd-solid-orange .wwd-label { color: rgba(255, 255, 255, 0.7); }
    .wwd-section.is-orange .wwd-title,
    .wwd-section.is-orange .wwd-num,
    .wwd-section.is-orange .wwd-item-title,
    .wwd-section.is-orange .wwd-item-desc,
    .wwd-section.wwd-solid-orange .wwd-title,
    .wwd-section.wwd-solid-orange .wwd-num,
    .wwd-section.wwd-solid-orange .wwd-item-title,
    .wwd-section.wwd-solid-orange .wwd-item-desc { color: #ffffff; }
    .wwd-section.is-orange .wwd-item,
    .wwd-section.wwd-solid-orange .wwd-item { border-color: rgba(255, 255, 255, 0.15); }