*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    body {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      color: #0A0A0A;
      background: #FFF;
      line-height: 1.7;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    .section a:not(.cta) { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
    .section a:not(.cta):hover { color: var(--blue-dark); }

    :root {
      --black: #0A0A0A;
      --white: #FFFFFF;
      --blue: #2563EB;
      --blue-dark: #1D4ED8;
      --cyan: #06B6D4;
      --gray: #64748B;
      --text: #475569;
      --gold: #D4AF37;
      --border: #E2E8F0;
      --pad: clamp(24px, 5vw, 80px);
      /* Reserved viewport height when CTA is in view, so the footer is fully visible.
         Footer (~160px) + 72px scroll-margin-top + a small buffer. */
      --footer-h: 240px;
    }

    /* ─── FIXED NAV (appears on scroll) ─── */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      padding: 20px var(--pad);
      display: flex; justify-content: space-between; align-items: center;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
      transform: translateY(-100%);
      transition: transform 0.35s ease;
    }
    .nav--visible { transform: translateY(0); }
    .nav__logo {
      font-family: 'Satoshi', sans-serif;
      font-weight: 900;
      font-size: 1.125rem;
      letter-spacing: -0.06em;
      color: var(--black);
    }
    .logo-dot {
      display: inline-block;
      width: 0.45em;
      height: 0.45em;
      background: var(--blue);
      border-radius: 50%;
      margin-left: 0.04em;
      vertical-align: baseline;
    }
    .nav__links {
      display: flex;
      align-items: center;
      gap: 32px;
    }
    .nav__section-link {
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--gray);
      transition: color 0.15s ease;
    }
    .nav__section-link:hover { color: var(--black); }
    .nav__section-link.active { color: var(--blue); }
    .nav__cta {
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--blue);
      transition: color 0.15s ease;
    }
    .nav__cta:hover { color: var(--blue-dark); }

    /* ─── SIDE DOTS (mobile nav) ─── */
    .side-dots {
      display: none;
      position: fixed;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 100;
      flex-direction: column;
      gap: 18px;
      opacity: 0;
      transition: opacity 0.35s ease;
      pointer-events: none;
    }
    .side-dots--visible { opacity: 1; pointer-events: auto; }
    .side-dot {
      position: relative;
      display: block;
      width: 10px; height: 10px;
      border-radius: 50%;
      background: rgba(0,0,0,0.15);
      transition: background 0.25s ease, transform 0.25s ease;
    }
    .side-dot:hover {
      background: rgba(0,0,0,0.4);
      transform: scale(1.3);
    }
    .side-dot.active {
      background: var(--blue);
      transform: scale(1.3);
    }
    .side-dot__label {
      position: absolute;
      right: 22px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
      color: var(--black);
      background: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }
    .side-dot:hover .side-dot__label { opacity: 1; }

    /* ─── HERO (Supreme-style) ─── */
    .hero {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0;
      overflow: hidden;
    }
    .hero__bg {
      position: absolute; inset: 0;
      background:
        linear-gradient(45deg, rgba(37, 99, 235, 0.95) 70%, rgba(255, 255, 255, 0.0) 100%),
        url('/static/img/hero-bg.jpg') center/cover no-repeat fixed;
      background-blend-mode: multiply;
    }

    /* Hero navigation — left side, vertical */
    .hero__nav {
      position: absolute;
      top: clamp(36px, 5vh, 56px);
      left: var(--pad);
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .hero__nav a {
      font-size: 0.9375rem;
      font-weight: 400;
      color: rgba(255,255,255,0.85);
      letter-spacing: 0.01em;
      transition: color 0.15s ease;
      padding-bottom: 12px;
      margin-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    .hero__nav a:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .hero__nav a:hover { color: var(--white); }
    .hero__bullet { color: var(--gold); }

    /* Hero social — right side, vertical */
    .hero__social {
      position: absolute;
      top: auto;
      bottom: clamp(36px, 5vh, 56px);
      right: var(--pad);
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .hero__social a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px; height: 36px;
      border: 1px solid rgba(255,255,255,0.4);
      color: rgba(255,255,255,0.85);
      transition: border-color 0.15s ease, color 0.15s ease;
    }
    .hero__social a:hover {
      border-color: var(--white);
      color: var(--white);
    }
    .hero__social svg { width: 16px; height: 16px; }

    /* Hero greeting — above wordmark */
    .hero__hello {
      position: relative;
      z-index: 2;
      padding: 0 var(--pad);
      font-family: 'Inter', sans-serif;
      font-weight: 100;
      font-size: clamp(3.85rem, 11.9vw, 15.4rem);
      line-height: 0.82;
      letter-spacing: -0.04em;
      text-indent: -0.06em;
      color: rgba(255,255,255,0.9);
      margin-bottom: 0.1em;
    }

    /* Hero wordmark — bottom left, B&W photo visible through text */
    .hero__wordmark {
      position: relative;
      z-index: 2;
      padding: 0 var(--pad);
      font-family: 'Satoshi', sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      font-size: clamp(5.5rem, 17vw, 22rem);
      line-height: 0.82;
      letter-spacing: -0.07em;
      margin-bottom: 0.07em;
      white-space: nowrap;
      color: var(--white);
    }

    /* ─── SECTIONS ─── */
    .section { padding: clamp(80px, 10vw, 160px) var(--pad); }

    /* Each menu-linked section fills the viewport when scrolled to */
    #about,
    #product-advisory,
    #tech-advisory,
    #innovation-advisory,
    #approach,
    #offerings,
    #cta {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      scroll-margin-top: 72px;
    }
    /* CTA is the last section: shrink it by the footer's height so footer is visible together. */
    #cta {
      min-height: calc(100vh - var(--footer-h));
      min-height: calc(100svh - var(--footer-h));
    }

    /* ─── STATEMENT ─── */
    .statement__heading {
      font-family: 'Satoshi', sans-serif;
      font-weight: 800;
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      line-height: 1.08;
      letter-spacing: -0.03em;
    }
    .statement__heading span { color: var(--blue); }
    .statement__sub {
      font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
      font-weight: 400;
      color: var(--text);
      max-width: 480px;
      margin-top: 24px;
      line-height: 1.75;
    }

    /* ─── SPLIT LAYOUT ─── */
    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 6vw, 100px);
      align-items: center;
    }
    .split--reverse .split__text { order: 2; }
    .split--reverse .split__visual { order: 1; }
    .split__heading {
      font-family: 'Satoshi', sans-serif;
      font-weight: 800;
      font-size: clamp(1.75rem, 3vw, 2.5rem);
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin-bottom: 18px;
    }
    .split__body {
      font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
      font-weight: 400;
      color: var(--text);
      max-width: 480px;
      line-height: 1.75;
      margin-bottom: 14px;
    }
    .split__tags {
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--blue);
      letter-spacing: 0.02em;
    }

    /* ─── GEOMETRIC VISUALS ─── */
    .geo-visual {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #FAFAFA;
      border: 1px solid var(--border);
    }
    .geo-visual svg { width: 60%; height: 60%; }

    /* ─── SERVICE SPLITS ─── */
    /* No borders: when anchored via the nav, a section-edge border sits ~2px below
       the fixed nav's border-bottom and reads as a double-line glitch. The
       alternating .split / .split--reverse rhythm already provides visual separation. */
    .services-section { padding-top: 0; }
    .service-split { padding: clamp(56px, 7vw, 96px) 0; }

    /* ─── NUMBERS ─── */
    .numbers { display: flex; gap: clamp(48px, 8vw, 100px); flex-wrap: wrap; }
    .number__value {
      font-family: 'Satoshi', sans-serif;
      font-weight: 800;
      font-size: clamp(2.5rem, 5vw, 4rem);
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--gold);
    }
    .number__label { font-size: 0.8125rem; font-weight: 500; color: var(--gray); margin-top: 8px; }

    /* ─── ABOUT ─── */
    .about__layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 6vw, 80px);
      align-items: start;
    }
    .about__text-row {
      max-width: none;
    }
    .about__grid .split__body {
      max-width: none;
      margin-bottom: 0.5em;
    }
    .about__tag {
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: 20px;
      display: block;
    }
    .about__title {
      font-family: 'Satoshi', sans-serif;
      font-weight: 800;
      font-size: clamp(1.75rem, 3vw, 2.5rem);
      line-height: 1.2;
      letter-spacing: -0.02em;
      margin-bottom: 28px;
    }
    .about__text {
      font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
      color: var(--text);
      line-height: 1.8;
      margin-bottom: 20px;
      max-width: 500px;
    }
    .about__banner-text {
      font-family: 'Satoshi', sans-serif;
      font-weight: 800;
      font-size: clamp(1.75rem, 3vw, 2.5rem);
      line-height: 1.3;
      letter-spacing: -0.02em;
      color: var(--black);
      max-width: 800px;
    }
    .about__banner-text span { color: var(--blue); }
    .about__stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .about__stat {
      border: 1px solid var(--border);
      padding: clamp(32px, 4vw, 48px);
      transition: border-color 0.3s ease;
    }
    .about__stat:hover {
      border-color: rgba(37,99,235,0.2);
    }
    .about__stat-marker {
      width: 28px;
      height: 2px;
      background: var(--blue);
      margin-bottom: 24px;
    }
    .about__stat-number {
      font-family: 'Satoshi', sans-serif;
      font-weight: 800;
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      letter-spacing: -0.03em;
      line-height: 1.08;
      display: block;
      margin-bottom: 12px;
      color: var(--gold);
    }
    .about__stat-label {
      font-size: 0.9375rem;
      color: var(--text);
      line-height: 1.75;
    }

    /* ─── APPROACH ─── */
    .approach__layout {
      display: grid;
      grid-template-columns: 5fr 5fr;
      gap: clamp(40px, 6vw, 80px);
      align-items: start;
    }
    .approach__intro {
      font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
      color: var(--text);
      max-width: none;
      line-height: 1.75;
      margin-top: 20px;
      margin-bottom: 0;
    }
    .approach__numbers {
      display: flex;
      flex-direction: row;
      gap: 32px;
      flex-wrap: wrap;
    }
    .approach__divider {
      margin-top: 48px;
      padding-top: 48px;
      border-top: 1px solid var(--border);
    }
    .approach__sub-heading {
      font-family: 'Satoshi', sans-serif;
      font-weight: 800;
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      line-height: 1.08;
      letter-spacing: -0.03em;
      margin-bottom: 20px;
    }
    .approach__sub-heading span { color: var(--blue); }
    .approach__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .approach__card {
      padding: clamp(32px, 4vw, 48px);
      border: 1px solid var(--border);
      transition: border-color 0.3s ease;
    }
    .approach__card:hover {
      border-color: rgba(37,99,235,0.2);
    }
    .approach__card-marker {
      width: 28px;
      height: 2px;
      background: var(--blue);
      margin-bottom: 24px;
    }
    .approach__card-title {
      font-family: 'Satoshi', sans-serif;
      font-weight: 700;
      font-size: 1.125rem;
      letter-spacing: -0.01em;
      margin-bottom: 12px;
    }
    .approach__card-text {
      font-size: 0.9375rem;
      color: var(--text);
      line-height: 1.75;
    }

    /* ─── NUMBERS (enhanced) ─── */
    .number__context {
      font-size: 0.75rem;
      color: #94A3B8;
      margin-top: 4px;
      line-height: 1.5;
    }

    /* ─── CREDENTIALS ─── */
    .creds__top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 20px;
      margin-bottom: 24px;
    }
    .creds__card {
      padding: clamp(32px, 4vw, 48px);
      border: 1px solid var(--border);
      transition: border-color 0.3s ease;
    }
    .creds__card:hover {
      border-color: rgba(37,99,235,0.2);
    }
    .creds__card-marker {
      width: 28px;
      height: 2px;
      background: var(--blue);
      margin-bottom: 24px;
    }
    .creds__partner-row {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
    }
    .creds__partner-logo {
      width: 48px;
      height: 48px;
      flex-shrink: 0;
    }
    .creds__card-title {
      font-family: 'Satoshi', sans-serif;
      font-weight: 700;
      font-size: 1.125rem;
      letter-spacing: -0.01em;
    }
    .creds__cert-badge {
      background: #232F3E;
      border-radius: 6px;
      padding: 16px 20px;
      display: inline-block;
      margin-bottom: 20px;
    }
    .creds__stat-number {
      font-family: 'Satoshi', sans-serif;
      font-weight: 900;
      font-size: clamp(2.5rem, 4vw, 3.5rem);
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--gold);
      margin-bottom: 8px;
    }
    .creds__stat-label {
      font-family: 'Satoshi', sans-serif;
      font-weight: 700;
      font-size: 1.125rem;
      letter-spacing: -0.01em;
      margin-bottom: 16px;
    }
    .creds__card-text {
      font-size: 0.9375rem;
      color: var(--text);
      line-height: 1.75;
    }
    .creds__foundation {
      margin-bottom: 24px;
    }
    .creds__foundation-heading {
      font-family: 'Satoshi', sans-serif;
      font-weight: 700;
      font-size: 1.125rem;
      letter-spacing: -0.01em;
      margin-bottom: 20px;
    }
    .creds__foundation-intro {
      font-size: 0.9375rem;
      color: var(--text);
      line-height: 1.75;
      margin-bottom: 16px;
    }
    .creds__milestones {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .creds__milestone {
      padding: clamp(24px, 3vw, 36px);
      border: 1px solid var(--border);
      transition: border-color 0.3s ease;
    }
    .creds__milestone:hover {
      border-color: rgba(37,99,235,0.2);
    }
    .creds__milestone-marker {
      width: 28px;
      height: 2px;
      background: var(--blue);
      margin-bottom: 16px;
    }
    .creds__milestone-text {
      font-size: 0.9375rem;
      color: var(--text);
      line-height: 1.75;
    }
    .creds__closing {
      font-size: 0.9375rem;
      color: var(--text);
      line-height: 1.75;
      max-width: 680px;
      margin-bottom: 16px;
    }
    .creds__track {
      font-size: 0.75rem;
      color: #94A3B8;
      letter-spacing: 0.04em;
    }

    /* ─── OFFERINGS ─── */
    .offerings__layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 6vw, 100px);
      align-items: start;
    }
    .offerings__label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gray);
      margin-bottom: 24px;
    }
    .offerings__marker { width: 6px; height: 6px; background: var(--blue); }
    .offerings__sub {
      font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
      color: var(--text);
      max-width: 480px;
      margin-top: 24px;
      line-height: 1.75;
    }
    /* Offering card — uses Massive's brand throughout, including the wordmark.
       The only DataStructure brand survivor is the #E63B2E dot accent on the logo. */
    .offering {
      display: flex;
      flex-direction: column;
      padding: clamp(28px, 3vw, 40px);
      border: 1px solid var(--border);
      background: #FAFAFA;
      transition: border-color 0.3s ease;
    }
    .offering:hover { border-color: rgba(37, 99, 235, 0.25); }
    .offering__header { margin-bottom: 14px; }
    .offering__index {
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--blue);
    }
    /* Logo wordmark — Massive's Satoshi typography, DataStructure's red dot accent.
       Uppercase via CSS (HTML stays 'DataStructure' for screen-reader readability). */
    .offering__name {
      font-family: 'Satoshi', sans-serif;
      font-weight: 800;
      font-size: clamp(2.125rem, 3.4vw, 3rem);
      line-height: 1.15;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      color: var(--black);
      margin-bottom: 14px;
    }
    .offering__name-dot {
      display: inline-block;
      width: 0.22em;
      height: 0.22em;
      background: #E63B2E;
      border-radius: 50%;
      margin-left: 0.06em;
      vertical-align: baseline;
    }
    .offering__lead {
      font-size: 1rem;
      color: var(--black);
      line-height: 1.6;
      margin-bottom: 16px;
    }
    .offering__body {
      font-size: 0.9375rem;
      color: var(--text);
      line-height: 1.7;
      margin-bottom: 28px;
    }
    .offering__meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      align-items: start;
      padding-top: 24px;
      border-top: 1px solid var(--border);
      margin-bottom: 32px;
    }
    /* Each row is a native <details> element. Closed by default; click summary to expand. */
    .offering__meta-row {
      background: #FFFFFF;
      border: 1px solid var(--border);
      transition: border-color 0.3s ease;
    }
    .offering__meta-row[open] { border-color: rgba(37, 99, 235, 0.25); }
    .offering__meta-row > summary {
      list-style: none;
      cursor: pointer;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--gray);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      transition: color 0.15s ease;
      user-select: none;
    }
    .offering__meta-row > summary::-webkit-details-marker { display: none; }
    .offering__meta-row > summary:hover { color: var(--black); }
    .offering__meta-row[open] > summary { color: var(--black); }
    .offering__meta-row > summary::after {
      content: '+';
      font-size: 1.25rem;
      font-weight: 400;
      line-height: 1;
      color: var(--blue);
      transition: transform 0.2s ease;
    }
    .offering__meta-row[open] > summary::after {
      content: '−';
      color: var(--blue);
    }
    .offering__meta-row__body {
      padding: 0 16px 14px;
      color: var(--text);
      font-size: 0.875rem;
      line-height: 1.55;
    }
    @media (prefers-reduced-motion: reduce) {
      .offering__meta-row > summary::after { transition: none; }
    }
    .offering__cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--blue);
      transition: color 0.15s ease;
      align-self: flex-start;
    }
    .offering__cta:hover { color: var(--blue-dark); }
    .offering__cta svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
    .offering__cta:hover svg { transform: translateX(4px); }
    .offering__attribution {
      margin-top: 28px;
      padding-top: 18px;
      border-top: 1px solid var(--border);
      font-size: 0.6875rem;
      letter-spacing: 0.06em;
      color: var(--gray);
      line-height: 1.7;
    }
    .offering__attribution a {
      color: var(--blue);
      text-decoration: underline;
      text-underline-offset: 2px;
      transition: color 0.15s ease;
    }
    .offering__attribution a:hover { color: var(--blue-dark); }

    /* ─── CTA ─── */
    /* No border-top: the fixed nav's own border-bottom is the visible separator
       when navigating to #cta, and adding a section border-top right next to it
       reads as a 2px-spaced double line. */
    .cta__heading {
      font-family: 'Satoshi', sans-serif;
      font-weight: 800;
      font-size: clamp(2rem, 4.5vw, 3.5rem);
      line-height: 1.08;
      letter-spacing: -0.02em;
      margin-bottom: 20px;
    }
    .cta__sub {
      font-size: clamp(0.9375rem, 1.1vw, 1rem);
      font-weight: 400; color: var(--text);
      max-width: 420px; margin-bottom: 40px; line-height: 1.75;
    }
    .cta__action {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 0.875rem; font-weight: 500;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--blue);
      transition: color 0.15s ease;
    }
    .cta__action:hover { color: var(--blue-dark); }
    .cta__action svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
    .cta__action:hover svg { transform: translateX(4px); }

    /* ─── FOOTER ─── */
    .footer { padding: 56px var(--pad) 28px; border-top: 1px solid var(--border); }
    .footer__row {
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
    }
    .footer__brand { font-family: 'Satoshi', sans-serif; font-weight: 900; font-size: 1rem; letter-spacing: -0.02em; }
    .footer__links { display: flex; align-items: center; gap: 28px; }
    .footer__links a { font-size: 0.8125rem; font-weight: 400; color: var(--gray); transition: color 0.15s ease; }
    .footer__top { display: inline-flex; align-items: center; gap: 6px; }
    .footer__top svg { width: 12px; height: 12px; transition: transform 0.2s ease; }
    .footer__top:hover svg { transform: translateY(-2px); }
    .footer__links a:hover { color: var(--black); }
    .footer__legal { font-size: 0.6875rem; color: #ccc; letter-spacing: 0.02em; }
    .footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; }
    .footer__legal a:hover { color: var(--gray); }

    /* ─── REVEAL ─── */
    .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .reveal--visible { opacity: 1; transform: translateY(0); }
    .reveal--d1 { transition-delay: 0.1s; }
    .reveal--d2 { transition-delay: 0.2s; }
    @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

    /* ─── MOBILE ─── */
    @media (max-width: 768px) {
      :root { --footer-h: 280px; }

      /* Fix: hero bg — remove fixed attachment (broken on mobile Safari), extend gradient to full coverage */
      .hero__bg {
        background:
          linear-gradient(45deg, rgba(37, 99, 235, 0.95) 55%, rgba(37, 99, 235, 0.80) 100%),
          url('/static/img/hero-bg.jpg') center/cover no-repeat scroll;
      }

      /* Fix: MASSIVE wordmark overflow — lower clamp minimum so vw can kick in */
      .hero__wordmark { font-size: clamp(3.5rem, 17vw, 22rem); }

      .hero__nav { gap: 8px; }
      .hero__nav a { font-size: 0.8125rem; }
      .hero__social { bottom: auto; top: clamp(36px, 5vh, 56px); }
      .split { grid-template-columns: 1fr; gap: 32px; }
      .split--reverse .split__text { order: 1; }
      .split--reverse .split__visual { order: 2; }
      .geo-visual { aspect-ratio: 4/3; }
      .about__layout { grid-template-columns: 1fr; }

      /* Fix: stat cards overflow — minmax(0,1fr) forces grid to respect container instead of content */
      .about__stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
      .about__stat { padding: 20px; }
      .about__stat-number { font-size: clamp(1.5rem, 7vw, 2.5rem); }

      .approach__layout { grid-template-columns: 1fr; }

      /* Fix: approach cards overflow — same minmax trick + tighter padding */
      .approach__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
      .approach__card { padding: 20px; }

      .offerings__layout { grid-template-columns: 1fr; gap: 48px; }
      .offering__meta { grid-template-columns: 1fr; }


      .creds__top { grid-template-columns: 1fr; }
      .creds__milestones { grid-template-columns: 1fr; }
      .numbers { flex-direction: column; gap: 32px; }
      .footer__row { flex-direction: column; align-items: flex-start; }

      /* Nav: hide sticky bar section links, show side dots */
      .nav__links { display: none; }
      .side-dots { display: flex; }
    }