:root {
        --navy: #201f28;
        --coral: #ff5c5d;
        --coral-dim: #ff5c5d99;
        --cream: #edeae4;
        --cream-dim: #b9b6b2;
        --ink: #1a1a1d;
        --ink-dim: #6b6a70;
        --paper: #ffffff;
        --rule: #e4e1da;
        --rule-dark: #3a3944;
        --serif: "Newsreader", Georgia, serif;
        --sans:
          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --display: "Staatliches", sans-serif;

        /* Type scale — static font sizes, smallest to largest.
       Fluid headline sizes stay on clamp() and aren't part of this scale. */
        --fs-2xs: 0.7rem; /* micro uppercase labels: eyebrows, tags, legend, meta */
        --fs-sm: 0.8rem; /* secondary labels, nav links, buttons, small links */
        --fs-sm2: 0.85rem; /* compact body text */
        --fs-base: 0.9rem; /* default small paragraph / body text */
        --fs-base2: 0.95rem; /* comfortable reading paragraph */
        --fs-md: 1rem; /* index numerals, emphasis marks */
        --fs-lg: 1.1rem; /* names, tags, lead emphasis */
        --fs-lg2: 1.15rem; /* larger emphasis: quotes, amounts, org names */
        --fs-xl: 1.3rem; /* small headings, accents, totals */
        --fs-2xl: 1.5rem; /* subheadings */
        --fs-3xl: 1.9rem; /* large modal headings */
      }
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
        overflow-x: clip;
        overflow-y: visible;
      }
      body {
        font-family: var(--sans);
        color: var(--ink);
        background: var(--paper);
        -webkit-font-smoothing: antialiased;
        overflow-x: clip;
      }
      img {
        max-width: 100%;
        display: block;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      .eyebrow {
        font-family: var(--sans);
        font-size: var(--fs-2xs);
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      section {
        position: relative;
      }
      .wrap {
        margin: 0 auto;
        padding-left: 6vw;
        padding-right: 6vw;
      }
      .dark {
        background: var(--navy);
        color: var(--cream);
      }

      /* ---------- NAV ---------- */
      header.nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 6vw;
        transition:
          background 0.35s ease,
          padding 0.35s ease,
          backdrop-filter 0.35s ease;
      }
      header.nav.scrolled {
        background: rgba(32, 31, 40, 0.86);
        backdrop-filter: blur(10px);
        padding: 14px 6vw;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .logo-lockup {
        display: flex;
        align-items: center;
        gap: 14px;
        color: #fff;
        font-size: var(--fs-base);
      }
      .logo-lockup .divider {
        width: 1px;
        height: 16px;
        background: rgba(255, 255, 255, 0.4);
      }
      .logo-img {
        display: block;
        width: auto;
      }
      .logo-img-mr {
        height: 32px;
      }
      nav.links {
        display: flex;
        gap: 34px;
        align-items: center;
      }
      nav.links a {
        position: relative;
        color: rgba(255, 255, 255, 0.75);
        font-size: var(--fs-sm);
        font-weight: 500;
        letter-spacing: 0.02em;
        transition: color 0.2s ease;
        white-space: nowrap;
        padding-bottom: 4px;
      }
      nav.links a:hover {
        color: #fff;
      }
      nav.links a.is-active {
        color: #fff;
        font-weight: 700;
      }
      .nav-active-dot {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 7px;
        height: 7px;
        margin-left: -3.5px;
        border-radius: 50%;
        background: var(--coral);
        opacity: 0;
        transform: translateY(50%) scale(0);
        transition:
          transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
          opacity 0.2s ease,
          left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
      }
      .nav-active-dot.is-visible {
        opacity: 1;
        transform: translateY(50%) scale(1);
      }
      .nav-tag {
        color: rgba(255, 255, 255, 0.5);
        font-size: var(--fs-2xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: right;
      }
      .menu-btn {
        display: none;
        background: none;
        border: 0;
        color: #fff;
        cursor: pointer;
        width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        padding: 0;
      }
      .menu-btn svg {
        width: 24px;
        height: 24px;
      }
      .mobile-menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 700;
        background: var(--navy);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 0.35s ease,
          visibility 0s linear 0.35s;
      }
      .mobile-menu-overlay.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
          opacity 0.35s ease,
          visibility 0s linear;
      }
      .mobile-menu-close {
        position: absolute;
        top: 22px;
        right: 6vw;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.2s ease,
          transform 0.2s ease;
      }
      .mobile-menu-close svg {
        width: 18px;
        height: 18px;
      }
      .mobile-menu-close:hover {
        background: rgba(255, 255, 255, 0.16);
        transform: rotate(90deg);
      }
      .mobile-menu-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 28px;
      }
      .mobile-menu-links a {
        font-family: var(--serif);
        font-weight: 400;
        font-size: clamp(1.6rem, 6vw, 2.1rem);
        color: var(--cream);
        opacity: 0;
        transform: translateY(14px);
        transition:
          opacity 0.4s ease,
          transform 0.4s ease,
          color 0.2s ease;
      }
      .mobile-menu-links a:hover,
      .mobile-menu-links a.is-active {
        color: var(--coral);
      }
      .mobile-menu-overlay.is-open .mobile-menu-links a {
        opacity: 1;
        transform: translateY(0);
      }
      .mobile-menu-overlay.is-open .mobile-menu-links a:nth-child(1) {
        transition-delay: 0.06s;
      }
      .mobile-menu-overlay.is-open .mobile-menu-links a:nth-child(2) {
        transition-delay: 0.11s;
      }
      .mobile-menu-overlay.is-open .mobile-menu-links a:nth-child(3) {
        transition-delay: 0.16s;
      }
      .mobile-menu-overlay.is-open .mobile-menu-links a:nth-child(4) {
        transition-delay: 0.21s;
      }
      .mobile-menu-overlay.is-open .mobile-menu-links a:nth-child(5) {
        transition-delay: 0.26s;
      }
      .mobile-menu-overlay.is-open .mobile-menu-links a:nth-child(6) {
        transition-delay: 0.31s;
      }

      /* ---------- FADE UP REVEAL ---------- */
      .fade-up {
        opacity: 0;
        transform: translateY(28px);
        transition:
          opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
          background-color 1s ease,
          color 1s ease,
          border-color 1s ease;
      }
      .fade-up.is-visible {
        opacity: 1;
        transform: translateY(0);
      }
      .work-grid .work-card.fade-up:nth-child(1) {
        transition-delay: 0s;
      }
      .work-grid .work-card.fade-up:nth-child(2) {
        transition-delay: 0.08s;
      }
      .work-grid .work-card.fade-up:nth-child(3) {
        transition-delay: 0.16s;
      }
      .work-grid .work-card.fade-up:nth-child(4) {
        transition-delay: 0.24s;
      }
      .work-grid .work-card.fade-up:nth-child(5) {
        transition-delay: 0.32s;
      }
      .work-grid .work-card.fade-up:nth-child(6) {
        transition-delay: 0.4s;
      }
      .phase-grid .phase.fade-up:nth-child(1) {
        transition-delay: 0s;
      }
      .phase-grid .phase.fade-up:nth-child(2) {
        transition-delay: 0.1s;
      }
      .phase-grid .phase.fade-up:nth-child(3) {
        transition-delay: 0.2s;
      }
      .phase-grid .phase.fade-up:nth-child(4) {
        transition-delay: 0.3s;
      }
      .team-grid .team-profile.fade-up:nth-child(1) {
        transition-delay: 0s;
      }
      .team-grid .team-profile.fade-up:nth-child(2) {
        transition-delay: 0.1s;
      }
      .team-grid .team-profile.fade-up:nth-child(3) {
        transition-delay: 0.2s;
      }
      .team-grid .team-profile.fade-up:nth-child(4) {
        transition-delay: 0.3s;
      }
      @media (prefers-reduced-motion: reduce) {
        .fade-up {
          transition:
            background-color 1s ease,
            color 1s ease,
            border-color 1s ease;
          opacity: 1;
          transform: none;
        }
      }

      /* ---------- HERO ---------- */
      .hero {
        position: relative;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 110px 6vw 70px;
        background-image: radial-gradient(
          ellipse 900px 500px at 85% 15%,
          rgba(255, 92, 93, 0.1),
          transparent 60%
        );
        background-color: var(--navy);
        transition: background-color 1s ease;
        overflow: hidden;
      }
      .hero.bg-red {
        background-color: var(--coral);
        background-image: none;
      }
      .hero.bg-red .hero-top .eyebrow {
        color: rgba(32, 31, 40, 0.65);
      }
      .hero.bg-red .hero-title {
        color: #fff;
      }
      .hero.bg-red .hero-mid-eyebrow {
        color: rgba(32, 31, 40, 0.65);
      }
      .hero.bg-red .hero-title .who {
        color: var(--navy);
      }
      .hero.bg-red .hero-caption {
        color: rgba(32, 31, 40, 0.78);
        opacity: 0;
        pointer-events: none;
      }
      .hero.bg-red .hero-contact {
        color: rgba(32, 31, 40, 0.6);
        opacity: 0;
        pointer-events: none;
      }
      .hero.bg-red .scroll-cue {
        color: rgba(32, 31, 40, 0.6);
        opacity: 0;
        pointer-events: none;
      }
      .hero.bg-red .scroll-cue .arrow-down {
        color: var(--navy);
      }
      .hero.bg-red .hero-mockup {
        opacity: 0;
      }
      .hero,
      .hero * {
        transition:
          background-color 1s ease,
          color 1s ease,
          opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .hero-mockup {
        position: absolute;
        right: -2vw;
        top: 50%;
        width: min(66vw, 1100px);
        aspect-ratio: 1620/1080;
        z-index: 1;
        pointer-events: none;
        opacity: 0;
        transform: translate(12vw, -52%);
        transition:
          opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
          transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .hero-mockup.is-visible {
        opacity: 1;
        transform: translate(0, -52%);
      }
      .hero-mockup-media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
      }
      .hero-mockup-video-el {
        filter: url(#heroChromaKey);
      }
      .hero-mockup-canvas-el {
        opacity: 0;
        transition: opacity 0.2s ease;
      }
      .hero-mockup-canvas-el.is-active {
        opacity: 1;
      }
      .hero-mockup.canvas-active .hero-mockup-video-el {
        opacity: 0;
      }
      .hero-mockup {
        display: none !important;
      }
      .hero-bottom {
        margin-top: 64px;
      }
      .hero-mid {
        margin-top: 64px;
      }
      @media (max-width: 1100px) {
        .hero-bottom {
          margin-top: 64px;
        }
        .hero-mid {
          margin-top: 64px;
        }
      }

      /* ---------- HERO BACKGROUND VIDEO (YouTube, blurred + overlay) ---------- */
      .hero-bg-video-wrap {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        opacity: 1;
      }
      .hero.bg-red .hero-bg-video-wrap {
        opacity: 0;
      }
      .hero-bg-video-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.06);
        filter: blur(6px) saturate(1.05);
        border: 0;
      }
      .hero-bg-overlay {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 900px 500px at 85% 15%,
            rgba(255, 92, 93, 0.16),
            transparent 60%
          ),
          linear-gradient(
            180deg,
            rgba(32, 31, 40, 0.62) 0%,
            rgba(32, 31, 40, 0.58) 45%,
            rgba(32, 31, 40, 0.86) 100%
          );
        pointer-events: none;
      }
      .hero.bg-red .hero-bg-overlay {
        opacity: 0;
      }
      .hero-content {
        position: relative;
        z-index: 1;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100%;
      }
      .hero-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }
      .hero-proposal-tag {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .version-pill {
        display: inline-flex;
        align-items: center;
        font-family: var(--sans);
        font-size: var(--fs-2xs);
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--cream-dim);
        border: 1px solid var(--cream-dim);
        border-radius: 999px;
        padding: 4px 10px;
        text-transform: none;
      }
      .hero-mid {
        flex: 1;
        display: flex;
        align-items: center;
      }
      .hero-mid-inner {
        display: flex;
        flex-direction: column;
      }
      .hero-mid-eyebrow {
        margin-bottom: 18px;
        color: var(--cream-dim);
      }
      .hero-title {
        font-family: var(--display);
        font-weight: 400;
        color: var(--cream);
        font-size: clamp(3.6rem, 12vw, 8.4rem);
        line-height: 1;
        letter-spacing: 0.01em;
        max-width: 1150px;
      }
      .hero-title .who {
        color: var(--coral);
      }
      .hero-bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 40px;
        flex-wrap: wrap;
      }
      .hero-bottom-left {
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-width: 420px;
      }
      .hero-caption {
        color: var(--cream-dim);
        font-size: var(--fs-base2);
        line-height: 1.6;
      }
      .hero-caption a,
      .hero-contact a {
        color: var(--cream);
        text-decoration: underline;
        text-decoration-color: rgba(237, 234, 228, 0.35);
        text-underline-offset: 3px;
        transition:
          color 0.2s ease,
          text-decoration-color 0.2s ease;
      }
      .hero-caption a:hover,
      .hero-contact a:hover {
        color: var(--coral);
        text-decoration-color: var(--coral);
      }
      .hero-contact {
        color: var(--cream-dim);
        font-size: var(--fs-sm);
        line-height: 1.6;
      }
      .scroll-cue {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--cream-dim);
        font-size: var(--fs-2xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .scroll-cue .arrow-down {
        display: inline-block;
        font-size: var(--fs-base);
        color: var(--coral);
        animation: bounce-down 1.6s ease-in-out infinite;
      }
      .nav-arrow-glyph {
        display: inline-block;
        font-family: var(--sans);
        font-size: var(--fs-lg2);
        line-height: 1;
        color: inherit;
      }
      @keyframes bounce-down {
        0%,
        100% {
          transform: translateY(0);
          opacity: 0.5;
        }
        50% {
          transform: translateY(5px);
          opacity: 1;
        }
      }

      /* ---------- INTRO / MEET + VISION (merged, single column) ---------- */
      .meet {
        padding: 0;
      }
      .meet-hero {
        min-height: 100vh;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 150px 0;
        background-color: var(--navy);
        transition: background-color 1s ease;
      }
      .meet-hero.bg-red {
        background-color: var(--coral);
      }
      .meet-hero.bg-red h2 {
        color: #fff;
      }
      .meet-hero.bg-red h2 em {
        color: #fff;
      }
      .meet-hero.bg-red .meet-col p {
        color: #fff;
      }
      .meet-hero.bg-red .meet-col p strong {
        color: #fff;
      }
      .meet-hero.bg-red .meet-col .eyebrow {
        color: #fff;
      }
      .meet-hero,
      .meet-hero * {
        transition:
          background-color 1s ease,
          color 1s ease,
          opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .meet-center {
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
      }
      .meet h2 {
        font-family: var(--display);
        font-weight: 400;
        font-size: clamp(2.4rem, 5vw, 3.6rem);
        line-height: 1.2;
        color: #fff;
        margin-bottom: 56px;
      }
      .meet h2 em {
        color: #fff;
      }
      .meet-col {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .meet-col .eyebrow {
        color: #fff;
        margin-top: 28px;
        margin-bottom: 18px;
      }
      .meet-col .eyebrow:first-of-type {
        margin-top: 0;
      }
      .meet-col .divider-line {
        width: 48px;
        height: 1px;
        background: #fff;
        border: none;
        margin: 48px auto;
      }
      .meet-col p {
        color: #fff;
        font-size: var(--fs-lg2);
        line-height: 1.75;
        margin-bottom: 24px;
        text-align: center;
      }
      .meet-col p.no-mb {
        margin-bottom: 0;
      }
      .meet-col p.studio-tagline {
        font-family: var(--serif);
        font-style: italic;
        font-weight: 400;
        color: var(--coral);
        font-size: var(--fs-xl);
        line-height: 1.5;
        margin-top: 28px;
        margin-bottom: 0;
      }
      .meet-col p strong {
        color: #fff;
        font-weight: 700;
      }
      .meet-col p.text-regular {
        font-size: var(--fs-base2);
        line-height: 1.7;
      }
      .team-grid {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 40px;
        margin-top: 56px;
      }
      .team-profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: none;
        border: none;
        padding: 14px;
        margin: -14px;
        border-radius: 16px;
        cursor: pointer;
        font: inherit;
      }
      .team-profile:hover,
      .team-profile:focus-visible {
        outline: none;
      }
      .team-profile:hover .team-photo,
      .team-profile:focus-visible .team-photo {
        transform: scale(1.04);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
      }
      .team-profile:hover .team-photo img,
      .team-profile:focus-visible .team-photo img {
        transform: scale(1.03);
      }
      .team-photo {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        overflow: hidden;
        transform-origin: center;
        transition:
          transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
          box-shadow 0.35s ease;
      }
      .team-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .team-name {
        font-family: var(--sans);
        font-weight: 700;
        font-size: var(--fs-lg);
        color: #fff;
        margin-bottom: 6px;
        transition: color 0.3s ease;
      }
      .team-role {
        font-size: var(--fs-sm);
        color: rgba(255, 255, 255, 0.75);
        line-height: 1.4;
      }

      /* ---------- TRUST STRIP / MARQUEE ---------- */
      .trust {
        background: var(--paper);
        padding: 52px 0;
        border-bottom: 1px solid var(--rule);
      }
      .trust .eyebrow {
        display: block;
        color: var(--ink-dim);
        margin-bottom: 30px;
      }
      .marquee {
        position: relative;
        width: 100%;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(
          to right,
          transparent 0,
          #000 8%,
          #000 92%,
          transparent 100%
        );
        mask-image: linear-gradient(
          to right,
          transparent 0,
          #000 8%,
          #000 92%,
          transparent 100%
        );
      }
      .marquee-track {
        display: flex;
        align-items: center;
        gap: 72px;
        width: max-content;
        animation: marquee-scroll 32s linear infinite;
      }
      .marquee:hover .marquee-track {
        animation-play-state: paused;
      }
      .marquee-item {
        font-family: var(--sans);
        font-weight: 700;
        font-size: var(--fs-lg2);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ink-dim);
        opacity: 0.5;
        white-space: nowrap;
        filter: grayscale(1);
      }
      @keyframes marquee-scroll {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .marquee-track {
          animation: none;
        }
      }

      /* ---------- SELECT WORK ---------- */
      .work {
        padding: 120px 0 100px;
        background: var(--paper);
      }
      .section-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 30px;
        margin-bottom: 56px;
        flex-wrap: wrap;
      }
      .section-head .eyebrow {
        color: var(--coral);
        margin-bottom: 14px;
        display: block;
      }
      .section-head h2 {
        font-family: var(--display);
        font-weight: 400;
        color: var(--ink);
        font-size: clamp(2rem, 4vw, 3rem);
      }
      .section-head .desc {
        max-width: 360px;
        color: var(--ink-dim);
        font-size: var(--fs-base2);
        line-height: 1.65;
      }
      .work .section-head {
        justify-content: center;
        text-align: center;
      }
      .work-cycle-desc {
        max-width: 640px;
        margin: 0 auto;
        text-align: center;
      }
      .cycle-flow {
        font-weight: 700;
        color: var(--ink);
      }
      .cycle-arrow {
        color: var(--coral);
        font-weight: 700;
        margin: 0 1px;
      }
      .work-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 34px;
      }
      .work-card {
        display: block;
        position: relative;
        overflow: hidden;
        border-radius: 2px;
      }
      .work-card .img-wrap {
        aspect-ratio: 4/3;
        overflow: hidden;
        background: #eee;
      }
      .work-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .work-card:hover img {
        transform: scale(1.06);
      }
      .work-card .meta {
        padding: 20px 2px 0;
      }
      .work-card .name {
        font-family: var(--sans);
        font-weight: 600;
        font-size: var(--fs-base);
        color: var(--ink);
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .work-card .tag {
        font-family: var(--serif);
        font-style: italic;
        color: var(--ink-dim);
        font-size: var(--fs-lg);
        margin-top: 6px;
      }
      .work-card .img-wrap {
        cursor: none;
      }

      /* ---------- PORTFOLIO CUSTOM CURSOR ---------- */
      .portfolio-cursor {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 400;
        width: 88px;
        height: 88px;
        border-radius: 50%;
        background: var(--coral);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--sans);
        font-weight: 700;
        font-size: var(--fs-sm);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        transition:
          transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
          opacity 0.25s ease;
      }
      .portfolio-cursor.is-active {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
      @media (hover: none) {
        .portfolio-cursor {
          display: none;
        }
        .work-card .img-wrap {
          cursor: pointer;
        }
      }

      /* ---------- PORTFOLIO PROJECT MODAL ---------- */
      .portfolio-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 500;
        background: var(--navy);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
      }
      .portfolio-modal-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
      }
      .portfolio-modal {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .portfolio-modal-media {
        position: relative;
        overflow: hidden;
        background: #111;
        opacity: 0;
        transform: scale(1.04);
        transition:
          opacity 0.5s ease 0.05s,
          transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
      }
      .portfolio-modal-overlay.is-open .portfolio-modal-media {
        opacity: 1;
        transform: scale(1);
      }
      .portfolio-modal-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: opacity 0.3s ease;
      }
      .portfolio-modal-media.is-switching img {
        opacity: 0;
      }
      .portfolio-modal-nav {
        position: absolute;
        top: 50%;
        margin-top: -24px;
        transform: scale(1);
        transform-origin: center center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: none;
        background: #fff;
        color: var(--ink);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        transition:
          background-color 0.2s ease,
          color 0.2s ease,
          transform 0.2s ease;
        z-index: 2;
      }
      .portfolio-modal-nav:hover {
        background: var(--coral);
        color: #fff;
        transform: scale(1.08);
      }
      .portfolio-modal-nav.is-prev {
        left: 24px;
      }
      .portfolio-modal-nav.is-next {
        right: 24px;
      }
      .portfolio-modal-dots {
        position: absolute;
        left: 50%;
        bottom: 26px;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 2;
      }
      .portfolio-modal-dots button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.35);
        cursor: pointer;
        padding: 0;
        transition:
          background-color 0.25s ease,
          transform 0.25s ease;
      }
      .portfolio-modal-dots button.is-active {
        background: var(--coral);
        transform: scale(1.2);
      }
      .portfolio-modal-info {
        background: var(--paper);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 7vw 6vw;
        overflow-y: auto;
      }
      .portfolio-modal-eyebrow {
        font-family: var(--sans);
        font-size: var(--fs-2xs);
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--coral);
        margin-bottom: 18px;
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
          transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
      }
      .portfolio-modal-name {
        font-family: var(--display);
        font-weight: 400;
        color: var(--ink);
        font-size: clamp(1.8rem, 2.6vw, 2.6rem);
        line-height: 1.15;
        margin-bottom: 14px;
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
          transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
      }
      .portfolio-modal-tag {
        font-family: var(--serif);
        font-style: italic;
        color: var(--ink-dim);
        font-size: var(--fs-lg);
        margin-bottom: 24px;
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s,
          transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
      }
      .portfolio-modal-desc {
        font-size: var(--fs-base2);
        line-height: 1.75;
        color: var(--ink-dim);
        max-width: 440px;
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.42s,
          transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.42s;
      }
      .portfolio-modal-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 24px;
        font-family: var(--sans);
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--ink);
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s,
          transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s,
          color 0.2s ease;
      }
      .portfolio-modal-link svg {
        width: 13px;
        height: 13px;
      }
      .portfolio-modal-link:hover {
        color: var(--coral);
      }
      .portfolio-modal-overlay.is-open .portfolio-modal-eyebrow,
      .portfolio-modal-overlay.is-open .portfolio-modal-name,
      .portfolio-modal-overlay.is-open .portfolio-modal-tag,
      .portfolio-modal-overlay.is-open .portfolio-modal-desc,
      .portfolio-modal-overlay.is-open .portfolio-modal-link {
        opacity: 1;
        transform: translateY(0);
      }
      .portfolio-modal-info.is-switching .portfolio-modal-eyebrow,
      .portfolio-modal-info.is-switching .portfolio-modal-name,
      .portfolio-modal-info.is-switching .portfolio-modal-tag,
      .portfolio-modal-info.is-switching .portfolio-modal-desc,
      .portfolio-modal-info.is-switching .portfolio-modal-link {
        opacity: 0;
        transform: translateY(10px);
        transition-delay: 0s;
      }
      .portfolio-modal-close {
        position: fixed;
        top: 24px;
        right: 24px;
        z-index: 501;
        padding: 11px 20px;
        border-radius: 999px;
        border: none;
        background: var(--coral);
        color: #fff;
        font-family: var(--sans);
        font-size: var(--fs-2xs);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition:
          transform 0.2s ease,
          opacity 0.3s ease,
          background-color 0.2s ease;
      }
      .portfolio-modal-close:hover {
        background: #ff7677;
        transform: scale(1.04);
      }
      .portfolio-modal-overlay.is-open .portfolio-modal-close {
        opacity: 1;
        pointer-events: auto;
      }
      .portfolio-modal-next-project {
        position: fixed;
        bottom: 28px;
        left: 50%;
        z-index: 501;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 22px;
        border-radius: 999px;
        border: none;
        cursor: pointer;
        background: var(--navy);
        color: #fff;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 0);
        transition:
          opacity 0.3s ease 0.25s,
          transform 0.25s ease,
          background-color 0.2s ease;
      }
      .portfolio-modal-overlay.is-open .portfolio-modal-next-project {
        opacity: 1;
        pointer-events: auto;
      }
      .portfolio-modal-next-project:hover {
        background: var(--coral);
        transform: translate(-50%, -3px);
      }
      .portfolio-modal-next-project .next-label {
        font-family: var(--sans);
        font-size: var(--fs-2xs);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0.65;
      }
      .portfolio-modal-next-project .next-name {
        font-family: var(--serif);
        font-size: var(--fs-base2);
      }
      @media (max-width: 900px) {
        .portfolio-modal {
          grid-template-columns: 1fr;
          grid-template-rows: 40% 60%;
          overflow: hidden;
        }
        .portfolio-modal-media {
          min-height: 0;
        }
        .portfolio-modal-info {
          padding: 36px 7vw 44px;
          min-height: 0;
          overflow-y: auto;
        }
        .portfolio-modal-nav.is-prev {
          left: 14px;
        }
        .portfolio-modal-nav.is-next {
          right: 14px;
        }
        .portfolio-modal-next-project {
          display: none;
        }
        .portfolio-modal-close {
          right: 14px;
        }
      }

      /* ---------- PLATFORM VISION ---------- */
      .platform {
        padding: 130px 0;
        background: var(--paper);
        border-top: 1px solid var(--rule);
      }
      .platform .eyebrow {
        color: var(--ink-dim);
        margin-bottom: 44px;
        display: block;
      }
      .platform blockquote {
        font-family: var(--serif);
        font-weight: 400;
        color: var(--coral);
        font-size: clamp(1.6rem, 3.4vw, 2.55rem);
        line-height: 1.32;
        max-width: 900px;
        margin-bottom: 64px;
      }
      .quote-accent {
        display: block;
        margin-top: 22px;
        font-style: italic;
        font-weight: 400;
        color: var(--ink-dim);
        font-size: 0.55em;
        line-height: 1.5;
      }
      .capability-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
        background: var(--rule);
        border: 1px solid var(--rule);
      }
      .capability-card {
        background: var(--paper);
        padding: 40px 32px;
      }
      .capability-card .num {
        font-family: var(--serif);
        font-style: italic;
        color: var(--coral);
        font-size: var(--fs-md);
        margin-bottom: 22px;
        display: block;
      }
      .capability-card h3 {
        font-family: var(--display);
        font-weight: 400;
        font-size: var(--fs-xl);
        color: var(--ink);
        margin-bottom: 12px;
        line-height: 1.25;
      }
      .capability-card p {
        color: var(--ink-dim);
        font-size: var(--fs-base);
        line-height: 1.65;
      }
      .capability-card p strong {
        font-weight: 700;
        color: var(--ink);
      }
      .platform-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        align-items: start;
        margin-bottom: 56px;
      }
      .platform-split blockquote {
        margin-bottom: 0;
        position: sticky;
        top: 120px;
        align-self: start;
      }
      .platform-cols {
        display: flex;
        flex-direction: column;
        gap: 32px;
      }
      .platform-cols p {
        color: var(--ink);
        font-size: var(--fs-base2);
        line-height: 1.7;
      }
      .platform-cols p strong {
        font-weight: 700;
      }
      .platform-tags {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 56px;
      }
      .ptag {
        border: 1px solid var(--rule);
        border-radius: 100px;
        padding: 8px 18px;
        font-size: var(--fs-sm);
        color: var(--ink-dim);
      }

      /* ---------- APPROACH — DARK VARIANT ---------- */
      .platform-dark {
        background: var(--navy);
        border-top-color: var(--rule-dark);
        position: relative;
        overflow: hidden;
      }
      .platform-dark .eyebrow {
        color: var(--coral-dim);
      }
      .platform-dark blockquote {
        color: var(--coral);
      }
      .platform-dark .quote-accent {
        color: var(--cream-dim);
      }
      .platform-dark .platform-cols p {
        color: var(--cream);
      }
      .platform-dark .platform-cols p strong {
        color: #fff;
      }
      .approach-bg-video-wrap {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        opacity: 1;
        z-index: 0;
      }
      .approach-bg-video-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.06);
        filter: blur(6px) saturate(1.05);
        border: 0;
      }
      .approach-bg-overlay {
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
          radial-gradient(
            ellipse 900px 500px at 85% 10%,
            rgba(255, 92, 93, 0.14),
            transparent 60%
          ),
          linear-gradient(
            180deg,
            rgba(32, 31, 40, 0.78) 0%,
            rgba(32, 31, 40, 0.72) 45%,
            rgba(32, 31, 40, 0.92) 100%
          );
        pointer-events: none;
      }
      .platform-dark .wrap {
        position: relative;
        z-index: 1;
      }

      /* ---------- VIDEO MORPH ---------- */
      .video-morph {
        position: relative;
        height: 280vh;
        background: var(--navy);
      }
      .video-morph-sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        will-change: transform;
      }
      .video-morph-stage {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100vh;
        border-radius: 0;
        background: #000;
        will-change: width, height, border-radius;
      }
      .video-morph-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .video-morph-bezel {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        border: 2px solid rgb(61 61 61);
        box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
        opacity: 0;
        pointer-events: none;
      }
      .video-morph-notch {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 76px;
        border-radius: 100px;
        background: #000;
      }
      .video-morph-browser {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: rgba(18, 18, 20, 0.22);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0 40px;
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
      .vmb-group {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: none;
      }
      .vmb-btn {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        flex: none;
        background: rgba(255, 255, 255, 0.14);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }
      .vmb-btn svg {
        width: 12px;
        height: 12px;
      }
      .vmb-pill {
        flex: 1;
        max-width: 220px;
        height: 26px;
        min-width: 0;
        background: rgba(255, 255, 255, 0.14);
        border-radius: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 0 12px;
        color: #fff;
      }
      .vmb-pill-icon {
        width: 11px;
        height: 11px;
        flex: none;
        opacity: 0.85;
      }
      .video-morph-bottombar {
        display: none;
        position: absolute;
        left: 50%;
        bottom: 14px;
        transform: translateX(-50%);
        width: calc(100% - 32px);
        max-width: 340px;
        height: 44px;
        background: rgba(18, 18, 20, 0.32);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-radius: 100px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        align-items: center;
        justify-content: space-evenly;
        padding: 0 8px;
      }
      .vmbb-icon {
        color: #fff;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
      }
      .vmbb-icon svg {
        width: 19px;
        height: 19px;
      }
      .vmbb-icon.vmbb-disabled {
        color: rgba(255, 255, 255, 0.32);
      }
      .vmb-url {
        font-family: var(--sans);
        font-size: 0.62rem;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .video-morph-caption {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 2;
        width: 100%;
        padding: 0 24px;
      }
      .video-morph-caption .eyebrow {
        color: var(--cream-dim);
        margin-bottom: 18px;
        display: block;
      }
      .video-morph-caption h2 {
        font-family: var(--display);
        font-weight: 400;
        color: #fff;
        font-size: clamp(1.8rem, 4.5vw, 3.4rem);
        line-height: 1.15;
        max-width: 780px;
        margin: 0 auto;
      }
      @media (max-width: 700px) {
        .video-morph-notch {
          left: 50%;
          top: 12px;
          transform: translateX(-50%);
          width: 76px;
          height: 22px;
        }
        .video-morph-browser {
          top: 44px;
          background: none;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
          justify-content: center;
          border-radius: 0;
        }
        .vmb-group {
          display: none;
        }
        .vmb-pill-icon {
          display: none;
        }
        .vmb-pill {
          flex: none;
          background: rgba(18, 18, 20, 0.32);
          backdrop-filter: blur(20px) saturate(180%);
          -webkit-backdrop-filter: blur(20px) saturate(180%);
          justify-content: center;
        }
        .video-morph-bottombar {
          display: flex;
        }
      }

      /* ---------- PROCESS ---------- */
      .process {
        padding: 120px 0;
        background: var(--navy);
        color: var(--cream);
      }
      .process .section-head h2 {
        color: var(--cream);
      }
      .process .section-head .desc {
        color: var(--cream-dim);
      }
      .process .section-head.process-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .process .section-head.process-head .desc {
        max-width: 640px;
        margin: 18px auto 0;
      }
      .phase-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      .phase-grid.fade-up {
        opacity: 1;
        transform: none;
        border: 1px solid transparent;
      }
      .phase-grid.fade-up.is-visible {
        border-color: var(--rule-dark);
      }
      .phase {
        background: var(--navy);
        padding: 40px 32px;
      }
      .phase:not(:last-child) {
        border-right: 1px solid var(--rule-dark);
      }
      .phase .num {
        font-family: var(--serif);
        font-style: italic;
        color: var(--coral);
        font-size: var(--fs-md);
        margin-bottom: 22px;
        display: block;
      }
      .phase h3 {
        font-family: var(--display);
        font-weight: 400;
        font-size: var(--fs-2xl);
        color: var(--cream);
        margin-bottom: 8px;
        line-height: 1.25;
      }
      .phase .dur {
        font-size: var(--fs-sm);
        color: var(--coral);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 22px;
        display: block;
        font-weight: 600;
      }
      .phase ul {
        list-style: none;
      }
      .phase li {
        color: var(--cream-dim);
        font-size: var(--fs-base);
        line-height: 1.6;
        margin-bottom: 10px;
        padding-left: 16px;
        position: relative;
      }
      .phase li::before {
        content: "•";
        position: absolute;
        left: 0;
        color: var(--coral);
        font-weight: 700;
      }

      .timeline-viz {
        margin: 50px 0 66px;
      }
      .timeline-track {
        position: relative;
        height: 60px;
      }
      .tl-segments {
        display: flex;
        height: 100%;
        overflow: hidden;
        background: var(--rule-dark);
        position: relative;
      }
      .tl-segments::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: repeating-linear-gradient(
          to right,
          rgba(255, 255, 255, 0.35) 0,
          rgba(255, 255, 255, 0.35) 1px,
          transparent 1px,
          transparent calc(100% / 24)
        );
      }
      .tl-segment {
        height: 100%;
      }
      .tl-discovery {
        background: #ffd1d1;
      }
      .tl-design {
        background: #ff8f8f;
      }
      .tl-development {
        background: var(--coral);
      }
      .tl-launch {
        background: #b33a3a;
      }
      .tl-optimize {
        background: #7a1f1f;
      }
      .tl-holiday {
        background-image: repeating-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.16) 0 6px,
          rgba(255, 255, 255, 0.03) 6px 12px
        );
        border-left: 1px solid rgba(255, 255, 255, 0.25);
        border-right: 1px solid rgba(255, 255, 255, 0.25);
      }
      .tl-reveal {
        position: absolute;
        inset: 0;
        display: flex;
        z-index: 2;
        pointer-events: none;
      }
      .tl-reveal-cell {
        flex: 1;
        height: 100%;
        background: var(--navy);
        opacity: 1;
        transition: opacity 0.35s ease;
      }
      .timeline-viz.is-visible .tl-reveal-cell {
        opacity: 0;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(1) {
        transition-delay: 0s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(2) {
        transition-delay: 0.025s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(3) {
        transition-delay: 0.05s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(4) {
        transition-delay: 0.075s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(5) {
        transition-delay: 0.1s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(6) {
        transition-delay: 0.125s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(7) {
        transition-delay: 0.15s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(8) {
        transition-delay: 0.175s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(9) {
        transition-delay: 0.2s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(10) {
        transition-delay: 0.225s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(11) {
        transition-delay: 0.25s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(12) {
        transition-delay: 0.275s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(13) {
        transition-delay: 0.3s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(14) {
        transition-delay: 0.325s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(15) {
        transition-delay: 0.35s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(16) {
        transition-delay: 0.375s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(17) {
        transition-delay: 0.4s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(18) {
        transition-delay: 0.425s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(19) {
        transition-delay: 0.45s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(20) {
        transition-delay: 0.475s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(21) {
        transition-delay: 0.5s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(22) {
        transition-delay: 0.525s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(23) {
        transition-delay: 0.55s;
      }
      .timeline-viz.is-visible .tl-reveal-cell:nth-child(24) {
        transition-delay: 0.575s;
      }
      .tl-week-hits {
        position: absolute;
        inset: 0;
        display: flex;
        z-index: 1;
      }
      .tl-week-hit {
        flex: 1;
        position: relative;
        height: 100%;
        cursor: default;
        transition: background-color 0.15s ease;
      }
      .tl-week-hit:hover {
        background: rgba(255, 255, 255, 0.18);
      }
      .tl-week-hit::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%) translateY(6px);
        background: #0d0d10;
        color: #fff;
        font-family: var(--sans);
        font-size: var(--fs-2xs);
        font-weight: 600;
        white-space: nowrap;
        padding: 8px 14px;
        border-radius: 8px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
        opacity: 0;
        pointer-events: none;
        transition:
          opacity 0.15s ease,
          transform 0.15s ease;
        z-index: 5;
      }
      .tl-week-hit::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 2px);
        left: 50%;
        transform: translateX(-50%) translateY(6px);
        border: 6px solid transparent;
        border-top-color: #0d0d10;
        opacity: 0;
        pointer-events: none;
        transition:
          opacity 0.15s ease,
          transform 0.15s ease;
        z-index: 5;
      }
      .tl-week-hit:hover::after,
      .tl-week-hit:hover::before {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
      .tl-week-hit:first-child::after,
      .tl-week-hit:first-child::before {
        left: 0;
        transform: translateX(0) translateY(6px);
      }
      .tl-week-hit:first-child:hover::after,
      .tl-week-hit:first-child:hover::before {
        transform: translateX(0) translateY(0);
      }
      .tl-week-hit:last-child::after,
      .tl-week-hit:last-child::before {
        left: auto;
        right: 0;
        transform: translateX(0) translateY(6px);
      }
      .tl-week-hit:last-child:hover::after,
      .tl-week-hit:last-child:hover::before {
        transform: translateX(0) translateY(0);
      }
      .timeline-months {
        position: relative;
        height: 18px;
        margin-top: 12px;
      }
      .timeline-months span {
        position: absolute;
        top: 0;
        font-size: var(--fs-2xs);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--cream-dim);
      }
      .timeline-months span.tl-end {
        transform: translateX(-100%);
        color: var(--coral);
      }
      .timeline-milestones {
        position: relative;
        height: 20px;
        margin-top: 4px;
      }
      .tl-milestone {
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: var(--fs-sm);
        color: var(--cream);
        white-space: nowrap;
      }
      .tl-milestone-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--coral);
        flex: none;
      }
      .tl-milestone-end {
        transform: translateX(-100%);
        flex-direction: row-reverse;
      }
      .timeline-legend {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 24px;
        margin-top: 30px;
      }
      .timeline-note {
        text-align: center;
        font-family: var(--serif);
        font-style: italic;
        color: var(--cream-dim);
        font-size: var(--fs-sm2);
        margin-top: 20px;
      }
      .tl-legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: var(--fs-sm);
        color: var(--cream-dim);
      }
      .tl-dot {
        width: 10px;
        height: 10px;
        border-radius: 2px;
        flex: none;
      }
      .tl-dot-discovery {
        background: #ffd1d1;
      }
      .tl-dot-design {
        background: #ff8f8f;
      }
      .tl-dot-development {
        background: var(--coral);
      }
      .tl-dot-launch {
        background: #b33a3a;
      }
      .tl-dot-optimize {
        background: #7a1f1f;
      }
      .tl-dot-holiday {
        background-image: repeating-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.55) 0 3px,
          rgba(255, 255, 255, 0.12) 3px 6px
        );
      }

      /* ---------- INVESTMENT ---------- */
      .investment {
        padding: 120px 0;
        background: var(--paper);
      }
      .invest-top {
        display: grid;
        grid-template-columns: 0.62fr 1.38fr;
        gap: 60px;
        margin-bottom: 10px;
      }
      .invest-head {
        position: sticky;
        top: 120px;
        align-self: start;
      }
      .invest-head .eyebrow {
        color: var(--ink-dim);
        margin-bottom: 44px;
        display: block;
      }
      .invest-head h2 {
        font-family: var(--serif);
        font-weight: 400;
        color: var(--coral);
        font-size: clamp(2.2rem, 4vw, 3.2rem);
        margin-bottom: 26px;
      }
      .invest-head p {
        color: var(--ink);
        font-size: var(--fs-base2);
        line-height: 1.7;
        margin-bottom: 16px;
      }
      .invest-table {
        border-top: 1px solid var(--rule);
        margin-top: 44px;
      }
      .row {
        display: grid;
        grid-template-columns: 150px 1fr auto;
        gap: 24px;
        padding: 22px 0;
        border-bottom: 1px solid var(--rule);
        align-items: start;
      }
      .row.flat {
        grid-template-columns: 1fr auto;
      }
      .row .phase-label {
        font-size: var(--fs-sm);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink);
      }
      .row .phase-dur {
        display: block;
        font-family: var(--serif);
        font-style: italic;
        color: var(--ink-dim);
        font-size: var(--fs-base);
        margin-top: 4px;
        font-weight: 400;
      }
      .row .phase-note {
        display: block;
        font-size: var(--fs-2xs);
        color: var(--ink-dim);
        margin-top: 4px;
      }
      .row .desc-block .line-title {
        font-size: var(--fs-sm);
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ink);
        margin-bottom: 4px;
      }
      .row .desc-block .line-desc {
        font-family: var(--serif);
        font-style: italic;
        color: var(--ink-dim);
        font-size: var(--fs-base2);
        line-height: 1.55;
      }
      .row .amount {
        font-family: var(--serif);
        font-size: var(--fs-lg2);
        color: var(--ink);
        white-space: nowrap;
        text-align: right;
      }
      .row.sub .desc-block .line-title {
        font-weight: 600;
        font-size: var(--fs-sm);
      }
      .row.total {
        border-bottom: none;
        border-top: 2px solid var(--ink);
        margin-top: 10px;
      }
      .row.total .amount {
        font-weight: 700;
        color: var(--coral);
        font-size: var(--fs-xl);
      }
      .row.total .phase-label {
        font-size: var(--fs-base);
      }
      .invest-table .row:has(+ .row.total) {
        border-bottom: none;
      }
      .row.postlaunch {
        margin-top: 24px;
        padding-top: 22px;
        border-top: 1px dashed var(--rule);
      }
      .invest-link {
        display: inline-block;
        margin-top: 10px;
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--coral);
        border: none;
        border-bottom: 1px solid var(--coral-dim);
        padding-bottom: 1px;
        background: none;
        cursor: pointer;
        font-family: var(--sans);
        transition:
          color 0.2s ease,
          border-color 0.2s ease;
      }
      .invest-link:hover {
        color: #ff7677;
        border-color: #ff7677;
      }
      .addl-costs {
        margin-top: 70px;
        padding-top: 50px;
        border-top: 1px solid var(--rule);
        display: grid;
        grid-template-columns: 0.62fr 1.38fr;
        gap: 60px;
      }
      .addl-costs h3 {
        font-family: var(--serif);
        font-weight: 400;
        font-size: var(--fs-2xl);
        margin-bottom: 14px;
      }
      .addl-costs p {
        color: var(--ink);
        font-size: var(--fs-base2);
        line-height: 1.65;
      }

      /* ---------- NEXT ---------- */
      .next {
        padding: 150px 0;
        background: var(--navy);
        color: var(--cream);
        text-align: left;
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(
            ellipse 800px 500px at 15% 100%,
            rgba(255, 92, 93, 0.12),
            transparent 60%
          ),
          var(--navy);
      }
      .next-bg-video-wrap {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        opacity: 1;
        z-index: 0;
      }
      .next-bg-video-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.06);
        filter: blur(6px) saturate(1.05);
        border: 0;
      }
      .next-bg-overlay {
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
          radial-gradient(
            ellipse 900px 500px at 15% 100%,
            rgba(255, 92, 93, 0.16),
            transparent 60%
          ),
          linear-gradient(
            180deg,
            rgba(32, 31, 40, 0.72) 0%,
            rgba(32, 31, 40, 0.68) 45%,
            rgba(32, 31, 40, 0.9) 100%
          );
        pointer-events: none;
      }
      .next .wrap {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.7fr 1fr;
        gap: 60px;
        align-items: start;
      }
      .next .eyebrow {
        color: var(--coral);
        margin-bottom: 26px;
      }
      .next h2 {
        font-family: var(--display);
        font-weight: 400;
        font-size: clamp(2rem, 4.4vw, 3.4rem);
        max-width: 820px;
        line-height: 1.28;
        margin-bottom: 24px;
      }
      .next-thanks {
        font-family: var(--serif);
        font-style: italic;
        color: var(--coral);
        font-size: var(--fs-xl);
        margin-bottom: 28px;
      }
      .next-validity {
        font-family: var(--serif);
        font-style: italic;
        color: var(--cream-dim);
        font-size: var(--fs-lg);
        line-height: 1.6;
        max-width: 820px;
        margin-bottom: 14px;
      }
      .next-actions {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 15px 28px;
        border-radius: 100px;
        font-size: var(--fs-base);
        font-weight: 600;
        transition: all 0.25s ease;
        border: none;
        cursor: pointer;
        font-family: var(--sans);
      }
      .btn.ghost {
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: var(--cream);
        background: none;
      }
      .btn.ghost:hover {
        border-color: #fff;
        background: rgba(255, 255, 255, 0.06);
      }
      .next-side {
        display: flex;
        flex-direction: column;
        gap: 36px;
      }
      .next-block-divider {
        padding-top: 12px;
        border-top: 1px solid var(--rule-dark);
      }
      .next-block .eyebrow {
        display: block;
        margin-bottom: 16px;
      }
      .next-block p {
        color: var(--cream-dim);
        font-size: var(--fs-base2);
        line-height: 1.7;
        margin-bottom: 24px;
      }
      .next-block .next-actions {
        margin-bottom: 0;
      }

      /* ---------- REFERENCES MODAL ---------- */
      .refs-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 600;
        background: rgba(20, 19, 25, 0.82);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
      }
      .refs-modal-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
      }
      .refs-modal {
        position: relative;
        background: var(--paper);
        width: 100%;
        max-width: 800px;
        max-height: 86vh;
        overflow-y: auto;
        padding: 56px 48px;
        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
        transform: scale(0.96) translateY(12px);
        opacity: 0;
        transition:
          transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
          opacity 0.4s ease;
      }
      .refs-modal-overlay.is-open .refs-modal {
        transform: scale(1) translateY(0);
        opacity: 1;
      }
      .refs-modal h2 {
        font-family: var(--display);
        font-weight: 400;
        color: var(--ink);
        font-size: clamp(1.8rem, 3vw, 2.4rem);
        margin: 10px 0 14px;
        line-height: 1.2;
      }
      .refs-modal-desc {
        color: var(--ink-dim);
        font-size: var(--fs-base2);
        line-height: 1.65;
      }
      .refs-modal-close {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: rgba(0, 0, 0, 0.06);
        color: var(--ink);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background-color 0.2s ease,
          transform 0.2s ease;
      }
      .refs-modal-close svg {
        width: 16px;
        height: 16px;
      }
      .refs-modal-close:hover {
        background: rgba(0, 0, 0, 0.12);
        transform: rotate(90deg);
      }
      .refs-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--rule);
        border: 1px solid var(--rule);
        margin-top: 20px;
      }
      .ref-card {
        background: var(--paper);
        padding: 26px 22px;
      }
      .ref-card .org {
        font-family: var(--serif);
        font-size: var(--fs-lg2);
        margin-bottom: 14px;
        color: var(--ink);
      }
      .ref-card .person {
        font-size: var(--fs-sm2);
        font-weight: 600;
        color: var(--ink);
      }
      .ref-card .role {
        font-size: var(--fs-sm);
        color: var(--ink-dim);
        margin-bottom: 10px;
      }
      .ref-card .contact {
        font-size: var(--fs-sm);
        color: var(--ink-dim);
      }
      .refs-group-label {
        font-size: var(--fs-2xs);
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--coral);
        margin-top: 36px;
        margin-bottom: 0;
      }

      /* ---------- CARE PLAN MODAL (reuses .refs-modal chrome) ---------- */
      .care-modal-plan-name {
        font-family: var(--serif);
        font-weight: 400;
        color: var(--coral);
        font-size: var(--fs-xl);
        margin-top: 36px;
        margin-bottom: 0;
      }
      .care-modal-items {
        margin-top: 10px;
      }
      .care-modal-item {
        padding: 22px 0;
        border-bottom: 1px solid var(--rule);
      }
      .care-modal-item:last-child {
        border-bottom: none;
      }
      .care-modal-item-title {
        font-size: var(--fs-sm);
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ink);
        margin-bottom: 8px;
      }
      .care-modal-item p {
        color: var(--ink-dim);
        font-size: var(--fs-base2);
        line-height: 1.65;
      }
      .care-modal-note {
        font-size: var(--fs-sm);
        color: var(--ink-dim);
        margin-top: 24px;
        font-style: italic;
        font-family: var(--serif);
      }
      @media (max-width: 640px) {
        .refs-modal {
          padding: 44px 24px;
        }
      }

      /* ---------- FOOTER ---------- */
      footer {
        background: var(--navy);
        color: var(--cream);
        padding: 40px 0;
      }
      .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
      }
      .footer-meta {
        font-size: var(--fs-2xs);
        color: var(--cream-dim);
      }

      /* ---------- TEAM BUBBLE (fixed contact trigger) ---------- */
      .team-bubble-wrap {
        position: fixed;
        bottom: 28px;
        right: 28px;
        z-index: 200;
        display: flex;
        align-items: center;
        gap: 12px;
        transform: translateX(120%);
        pointer-events: none;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .team-bubble-wrap.is-active {
        transform: translateX(0);
        pointer-events: auto;
      }
      .team-bubble-label {
        background: var(--navy);
        color: #fff;
        font-size: var(--fs-sm);
        font-weight: 600;
        padding: 11px 18px;
        border-radius: 100px;
        white-space: nowrap;
        opacity: 0;
        transform: translateX(8px);
        transition:
          opacity 0.25s ease,
          transform 0.25s ease;
        pointer-events: none;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
      }
      .team-bubble-wrap:hover .team-bubble-label {
        opacity: 1;
        transform: translateX(0);
      }
      .team-bubble {
        display: flex;
        align-items: center;
        background: #fff;
        border: none;
        border-radius: 100px;
        padding: 6px;
        cursor: pointer;
        transform-origin: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
        transition:
          transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
          box-shadow 0.3s ease;
      }
      .team-bubble-wrap:hover .team-bubble {
        transform: scale(1.1);
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24);
      }
      .team-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff;
        margin-left: -14px;
        overflow: hidden;
      }
      .team-avatar:first-child {
        margin-left: 0;
      }
      .team-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform-origin: center;
        will-change: transform;
      }
      .team-avatar:nth-child(1) {
        animation-delay: 0s;
      }
      .team-avatar:nth-child(2) {
        animation-delay: 0.15s;
      }
      .team-avatar:nth-child(3) {
        animation-delay: 0.3s;
      }
      .team-avatar:nth-child(4) {
        animation-delay: 0.45s;
      }
      @keyframes avatar-wave {
        0%,
        16%,
        100% {
          transform: scale(1);
        }
        8% {
          transform: scale(1.08);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .team-avatar {
          animation: none;
        }
      }
      @media (max-width: 640px) {
        .team-bubble-wrap {
          bottom: 18px;
          right: 18px;
        }
        .team-bubble-label {
          display: none;
        }
        .team-avatar {
          width: 36px;
          height: 36px;
        }
      }

      /* ---------- TEAM MODAL / CAROUSEL ---------- */
      .team-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 300;
        background: rgba(10, 9, 13, 0.85);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
      }
      .team-modal-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
      }
      .team-modal {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 620px;
        transform: scale(0.94) translateY(10px);
        opacity: 0;
        transition:
          transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
          opacity 0.4s ease;
      }
      .team-modal-overlay.is-open .team-modal {
        transform: scale(1) translateY(0);
        opacity: 1;
      }
      .team-modal-photo {
        width: 230px;
        height: 230px;
        flex: none;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: 36px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
      }
      .team-modal-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: opacity 0.3s ease;
      }
      .team-modal-photo.is-switching img {
        opacity: 0;
      }
      .team-modal-info {
        text-align: center;
      }
      .team-modal-name {
        font-family: var(--serif);
        font-weight: 400;
        font-size: var(--fs-3xl);
        color: #fff;
        margin-bottom: 8px;
        transition:
          opacity 0.3s ease,
          transform 0.3s ease;
      }
      .team-modal-role {
        font-size: var(--fs-sm);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--coral);
        margin-bottom: 10px;
        transition:
          opacity 0.3s ease,
          transform 0.3s ease;
        transition-delay: 0.04s;
      }
      .team-modal-email {
        display: inline-block;
        font-size: var(--fs-sm2);
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        margin-bottom: 22px;
        transition:
          opacity 0.3s ease,
          transform 0.3s ease,
          color 0.2s ease;
        transition-delay: 0.06s;
      }
      .team-modal-email:hover {
        color: #fff;
        text-decoration: underline;
      }
      .team-modal-bio {
        font-size: var(--fs-base2);
        line-height: 1.7;
        color: rgba(255, 255, 255, 0.72);
        max-width: 580px;
        margin: 0 auto;
        transition:
          opacity 0.3s ease,
          transform 0.3s ease;
        transition-delay: 0.08s;
      }
      .team-modal-info.is-switching .team-modal-name,
      .team-modal-info.is-switching .team-modal-role,
      .team-modal-info.is-switching .team-modal-email,
      .team-modal-info.is-switching .team-modal-bio {
        opacity: 0;
        transform: translateY(10px);
      }
      .team-modal-carousel-controls {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 22px;
        margin-top: 36px;
      }
      .team-modal-dots {
        display: flex;
        gap: 8px;
      }
      .team-modal-dots button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        padding: 0;
        transition:
          background-color 0.25s ease,
          transform 0.25s ease;
      }
      .team-modal-dots button.is-active {
        background: var(--coral);
        transform: scale(1.2);
      }
      .team-modal-close {
        position: fixed;
        top: 24px;
        right: 24px;
        z-index: 302;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition:
          background-color 0.2s ease,
          transform 0.2s ease,
          opacity 0.3s ease;
      }
      .team-modal-overlay.is-open .team-modal-close {
        opacity: 1;
        pointer-events: auto;
      }
      .team-modal-close svg {
        width: 16px;
        height: 16px;
      }
      .team-modal-close:hover {
        background: rgba(255, 255, 255, 0.22);
        transform: rotate(90deg);
      }
      .team-modal-nav {
        position: static;
        transform: scale(1);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: none;
        background: #fff;
        color: var(--ink);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        transition:
          background-color 0.2s ease,
          color 0.2s ease,
          transform 0.2s ease;
      }
      .team-modal-nav:hover {
        background: var(--coral);
        color: #fff;
        transform: scale(1.08);
      }
      @media (max-width: 640px) {
        .team-modal-photo {
          display: none;
        }
        .team-modal-overlay {
          align-items: flex-start;
          padding: 76px 20px 50px;
        }
        .team-modal-close {
          top: 16px;
          right: 16px;
          background: rgba(10, 9, 13, 0.55);
        }
        .team-modal-carousel-controls {
          display: none;
        }
      }

      /* ---------- WELCOME MODAL ---------- */
      .welcome-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 600;
        background: rgba(20, 19, 25, 0.82);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
        overflow: hidden;
      }
      .welcome-modal-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
      }
      .welcome-modal-bgvideo-wrap {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
      }
      .welcome-modal-bgvideo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.06);
        filter: blur(6px) saturate(1.05);
        opacity: 0.6;
        border: 0;
      }
      .welcome-modal-bg-overlay {
        position: absolute;
        inset: 0;
        background: rgba(20, 19, 25, 0.55);
        pointer-events: none;
      }
      .welcome-modal {
        position: relative;
        z-index: 1;
        background: var(--paper);
        width: 100%;
        max-width: 520px;
        padding: 56px 48px;
        text-align: center;
        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
        transform: scale(0.94) translateY(14px);
        opacity: 0;
        transition:
          transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
          opacity 0.5s ease;
      }
      .welcome-modal-overlay.is-open .welcome-modal {
        transform: scale(1) translateY(0);
        opacity: 1;
      }
      .welcome-modal-mark {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        color: var(--ink-dim);
        margin-bottom: 28px;
      }
      .welcome-modal-mark .divider {
        width: 1px;
        height: 12px;
        background: var(--rule-dark);
      }
      .welcome-modal-mark .logo-img-mr {
        height: 26px;
      }
      .welcome-modal-title {
        font-family: var(--display);
        font-weight: 400;
        color: var(--ink);
        font-size: clamp(1.7rem, 3vw, 2.2rem);
        line-height: 1.2;
        margin-bottom: 20px;
      }
      .welcome-modal-body {
        font-size: var(--fs-base2);
        line-height: 1.7;
        color: var(--ink-dim);
        margin-bottom: 14px;
      }
      .welcome-modal-cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 22px;
        padding: 14px 28px;
        border-radius: 999px;
        border: none;
        cursor: pointer;
        background: var(--coral);
        color: #fff;
        font-family: var(--sans);
        font-size: var(--fs-sm2);
        font-weight: 600;
        transition:
          background-color 0.2s ease,
          transform 0.2s ease;
      }
      .welcome-modal-cta:hover {
        background: #ff7677;
        transform: translateY(-2px);
      }
      .welcome-modal-close {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: rgba(0, 0, 0, 0.06);
        color: var(--ink);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background-color 0.2s ease,
          transform 0.2s ease;
      }
      .welcome-modal-close svg {
        width: 16px;
        height: 16px;
      }
      .welcome-modal-close:hover {
        background: rgba(0, 0, 0, 0.12);
        transform: rotate(90deg);
      }
      @media (max-width: 640px) {
        .welcome-modal {
          padding: 44px 28px;
        }
      }

      /* ---------- RESPONSIVE ---------- */
      @media (max-width: 980px) {
        nav.links {
          display: none;
        }
        .nav-tag {
          display: none;
        }
        .nav-active-dot {
          display: none;
        }
        .menu-btn {
          display: flex;
        }
        .work-grid {
          grid-template-columns: 1fr 1fr;
        }
        .capability-grid {
          grid-template-columns: 1fr;
        }
        .platform-split {
          grid-template-columns: 1fr;
          gap: 36px;
        }
        .platform-split blockquote {
          position: static;
        }
        .platform-cols {
          gap: 26px;
        }
        .phase-grid {
          grid-template-columns: 1fr;
        }
        .phase:not(:last-child) {
          border-right: none;
          border-bottom: 1px solid var(--rule-dark);
        }
        .invest-top,
        .addl-costs {
          grid-template-columns: 1fr;
          gap: 26px;
        }
        .invest-head {
          position: static;
        }
        .row,
        .row.flat {
          grid-template-columns: 1fr;
          gap: 8px;
        }
        .row .amount {
          text-align: left;
        }
        .next .wrap {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .next-side {
          border-top: none;
          padding-top: 0;
        }
        .refs-grid {
          grid-template-columns: 1fr;
        }
        .footer-bottom {
          flex-direction: column;
          align-items: flex-start;
        }
      }
      @media (max-width: 640px) {
        .work-grid {
          grid-template-columns: 1fr;
        }
        .hero {
          padding-top: 120px;
        }
      }