/* ── TOKENS ─────────────────────────────────── */
    :root {
      --ink:      #111110;
      --ink-mid:  #3a3935;
      --ink-soft: #7a7870;
      --ink-pale: #b8b5af;
      --paper:    #f5f3ef;
      --paper-2:  #eceae4;
      --paper-3:  #e6e2db;
      --rule:     rgba(17,17,16,0.10);

      --font-serif: 'Cormorant', Georgia, serif;
      --font-sans:  'Barlow', sans-serif;
      --font-cond:  'Barlow Condensed', sans-serif;
    }

    /* ── RESET ──────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      background: var(--paper);
      color: var(--ink);
      font-family: var(--font-sans);
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    ::selection { background: var(--ink); color: var(--paper); }

    /* ── HERO ───────────────────────────────────── */
    .hero {
      position: relative;
      width: 100%;
      height: 88vh;
      min-height: 540px;
      max-height: 820px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .hero-veil {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(
          to bottom,
          rgba(17,17,16,0.38) 0%,
          rgba(17,17,16,0.18) 40%,
          rgba(17,17,16,0.62) 100%
        );
    }

    /* ── NAV ── */
    .hero-nav {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 36px 56px 0;
      animation: fadeIn 1.2s ease both;
    }

    .hero-nav-name {
      font-family: var(--font-cond);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(245,243,239,0.78);
    }

    .hero-nav-links {
      display: flex;
      gap: 40px;
      list-style: none;
    }
    .hero-nav-links a {
      font-family: var(--font-cond);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(245,243,239,0.68);
      transition: color 0.3s;
    }
    .hero-nav-links a:hover { color: rgba(245,243,239,1); }

    /* ── HERO BODY ── */
    .hero-body {
      position: relative;
      z-index: 10;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0 56px 44px;
    }

    .hero-eyebrow {
      font-family: var(--font-cond);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(245,243,239,0.58);
      margin-bottom: 14px;
      animation: fadeUp 1s 0.3s ease both;
    }

    .hero-name {
      font-family: var(--font-serif);
      font-weight: 300;
      font-size: clamp(50px, 7.5vw, 102px);
      line-height: 0.93;
      letter-spacing: -0.01em;
      color: #f5f3ef;
      animation: fadeUp 1s 0.45s ease both;
    }
    .hero-name em { font-style: italic; }

    .hero-rule {
      width: 0;
      height: 1px;
      background: rgba(245,243,239,0.34);
      margin: 28px 0 22px;
      animation: expandW 1.2s 0.7s ease forwards;
    }

    .hero-tagline {
      font-family: var(--font-cond);
      font-size: clamp(13px, 1.4vw, 15px);
      font-weight: 300;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(245,243,239,0.68);
      max-width: 520px;
      line-height: 1.75;
      animation: fadeUp 1s 0.6s ease both;
    }

    /* ── CONTACT STRIP ── */
    .hero-contact {
      position: relative;
      z-index: 10;
      background: rgba(20,20,18,0.78);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-top: 1px solid rgba(245,243,239,0.14);
      padding: 18px 56px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0;
      animation: fadeIn 1.4s 0.9s ease both;
    }

    .contact-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 4px 36px 4px 0;
      margin-right: 36px;
      border-right: 1px solid rgba(245,243,239,0.14);
      font-family: var(--font-cond);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.06em;
      color: rgba(245,243,239,0.78);
      transition: color 0.25s, opacity 0.25s;
      white-space: nowrap;
    }
    .contact-item:last-child {
      border-right: none;
      padding-right: 0;
      margin-right: 0;
    }
    .contact-item:hover { color: rgba(245,243,239,1); }
    .contact-item svg { flex-shrink: 0; opacity: 0.82; transition: opacity 0.25s; }
    .contact-item:hover svg { opacity: 1; }

    /* ══════════════════════════════════════════════
       ABOUT
    ══════════════════════════════════════════════ */
    #about {
      background: var(--paper);
      padding: 120px 0 148px;
    }

    .about-layout,
    .gait-layout {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 56px;
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 80px;
      align-items: start;
    }

    .about-meta,
    .gait-meta { padding-top: 4px; }

    .section-index {
      font-family: var(--font-cond);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--ink-pale);
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 48px;
    }

    .section-index::after {
      content: '';
      display: block;
      flex: 1;
      height: 1px;
      background: var(--rule);
    }

    .about-section-index::before { content: '02'; font-size: 10px; color: var(--ink-pale); }
    .gait-section-index::before { content: '03'; font-size: 10px; color: var(--ink-pale); }

    .about-sidebar-label,
    .gait-sidebar-label {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 300;
      font-size: 15px;
      color: var(--ink-soft);
      line-height: 1.8;
      margin-bottom: 40px;
    }

    .about-tags,
    .gait-tags {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .about-tag,
    .gait-tag {
      font-family: var(--font-cond);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.17em;
      text-transform: uppercase;
      color: var(--ink-pale);
      display: flex;
      align-items: center;
      gap: 9px;
    }
    .about-tag::before,
    .gait-tag::before {
      content: '';
      display: block;
      width: 16px;
      height: 1px;
      background: var(--ink-pale);
      flex-shrink: 0;
    }

    .about-headline,
    .gait-headline {
      font-family: var(--font-serif);
      font-weight: 300;
      font-size: clamp(34px, 4.2vw, 56px);
      line-height: 1.08;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-bottom: 16px;
    }
    .about-headline em,
    .gait-headline em { font-style: italic; }

    .about-subtitle,
    .gait-subtitle {
      font-family: var(--font-cond);
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-soft);
      line-height: 1.8;
      margin-bottom: 38px;
      max-width: 760px;
    }


    .about-rule,
    .gait-rule {
      width: 36px;
      height: 1px;
      background: var(--ink-pale);
      margin-bottom: 44px;
    }

    .about-body,
    .gait-body {
      display: flex;
      flex-direction: column;
      gap: 26px;
    }
    .about-body p,
    .gait-body p {
      font-family: var(--font-sans);
      font-size: 17px;
      font-weight: 300;
      line-height: 1.84;
      color: var(--ink-mid);
      letter-spacing: 0.005em;
    }
    .about-body strong,
    .gait-body strong { font-weight: 500; color: var(--ink); }


    .about-pillars {
      margin-top: 72px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--rule);
    }

    .pillar {
      padding: 36px 36px 0 0;
      border-right: 1px solid var(--rule);
    }
    .pillar:nth-child(2) { padding-left: 36px; }
    .pillar:last-child {
      border-right: none;
      padding-left: 36px;
      padding-right: 0;
    }

    .pillar-number {
      font-family: var(--font-serif);
      font-size: 42px;
      font-weight: 300;
      color: var(--ink-pale);
      line-height: 1;
      margin-bottom: 10px;
      letter-spacing: -0.03em;
    }
    .pillar-number sup { font-size: 20px; vertical-align: super; }

    .pillar-label {
      font-family: var(--font-cond);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-bottom: 10px;
    }

    .pillar-desc {
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 300;
      color: var(--ink-pale);
      line-height: 1.62;
    }

    /* ══════════════════════════════════════════════
       GAIT ANALYTICS
    ══════════════════════════════════════════════ */
    #gait-analytics {
      background: var(--paper-2);
      padding: 120px 0 148px;
      border-top: 1px solid rgba(17,17,16,0.05);
      border-bottom: 1px solid rgba(17,17,16,0.05);
    }

    .gait-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 44px;
      margin-top: 68px;
      align-items: start;
    }

    .gait-card {
      background: rgba(255,255,255,0.36);
      border: 1px solid rgba(17,17,16,0.08);
      padding: 28px 28px 26px;
    }

    .gait-card-title {
      font-family: var(--font-cond);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-bottom: 18px;
    }

    .gait-list {
      display: grid;
      gap: 12px;
    }

    .gait-list-item {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 10px;
      align-items: start;
      font-size: 16px;
      line-height: 1.75;
      color: var(--ink-mid);
    }

    .gait-list-item::before {
      content: '—';
      font-family: var(--font-serif);
      font-size: 22px;
      line-height: 1;
      color: var(--ink-pale);
      transform: translateY(-1px);
    }

    .gait-diagram {
      background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.18));
      border: 1px solid rgba(17,17,16,0.08);
      padding: 28px;
    }

    .diagram-title {
      font-family: var(--font-cond);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-bottom: 22px;
    }

    .diagram-flow {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      align-items: center;
      margin-bottom: 26px;
    }

    .diagram-node {
      min-height: 92px;
      border: 1px solid rgba(17,17,16,0.10);
      background: rgba(245,243,239,0.72);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 14px 10px;
      font-family: var(--font-cond);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink);
    }

    .diagram-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-serif);
      font-size: 26px;
      color: var(--ink-pale);
    }

    .diagram-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
      gap: 8px;
      align-items: center;
    }

    .gait-visuals {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 18px;
    }

    .placeholder-visual {
      position: relative;
      min-height: 220px;
      border: 1px solid rgba(17,17,16,0.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.08)),
        var(--paper-3);
      overflow: hidden;
      padding: 18px;
    }

    .placeholder-label {
      position: absolute;
      top: 16px;
      left: 18px;
      font-family: var(--font-cond);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-soft);
    }

    .insole-shape {
      position: absolute;
      left: 50%;
      top: 56%;
      width: 88px;
      height: 170px;
      transform: translate(-50%, -50%);
      background: linear-gradient(180deg, rgba(17,17,16,0.16), rgba(17,17,16,0.08));
      border-radius: 46px 46px 34px 34px / 60px 60px 38px 38px;
      border: 1px solid rgba(17,17,16,0.12);
    }

    .insole-shape::before,
    .insole-shape::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      background: rgba(17,17,16,0.18);
    }

    .insole-shape::before {
      width: 18px;
      height: 18px;
      left: 50%;
      top: 24px;
      transform: translateX(-50%);
      box-shadow:
        0 28px 0 rgba(17,17,16,0.12),
        -14px 58px 0 rgba(17,17,16,0.12),
        14px 58px 0 rgba(17,17,16,0.12),
        0 92px 0 rgba(17,17,16,0.12),
        0 124px 0 rgba(17,17,16,0.12);
    }

    .heatmap-foot {
      position: absolute;
      left: 50%;
      top: 56%;
      width: 94px;
      height: 176px;
      transform: translate(-50%, -50%);
      border-radius: 48px 48px 36px 36px / 62px 62px 42px 42px;
      background:
        radial-gradient(circle at 50% 18%, rgba(255,0,0,0.30), transparent 18%),
        radial-gradient(circle at 48% 42%, rgba(255,120,0,0.40), transparent 22%),
        radial-gradient(circle at 35% 62%, rgba(255,180,0,0.34), transparent 16%),
        radial-gradient(circle at 65% 62%, rgba(255,180,0,0.30), transparent 16%),
        radial-gradient(circle at 50% 82%, rgba(255,0,0,0.34), transparent 18%),
        linear-gradient(180deg, rgba(17,17,16,0.08), rgba(17,17,16,0.03));
      border: 1px solid rgba(17,17,16,0.12);
      filter: grayscale(35%);
    }

    .gait-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      margin-top: 54px;
    }

    .mini-block {
      padding-top: 22px;
      border-top: 1px solid var(--rule);
    }

    .mini-block h3 {
      font-family: var(--font-cond);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-bottom: 16px;
    }

    .mini-block p {
      font-size: 16px;
      line-height: 1.8;
      color: var(--ink-mid);
    }

    .target-list {
      display: grid;
      gap: 10px;
    }

    .target-list span {
      font-size: 15px;
      color: var(--ink-mid);
      line-height: 1.7;
      display: flex;
      align-items: start;
      gap: 10px;
    }

    .target-list span::before {
      content: '•';
      color: var(--ink-pale);
      line-height: 1;
      transform: translateY(2px);
    }

    /* ── FOOTER ── */
    footer {
      padding: 28px 56px;
      border-top: 1px solid var(--rule);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .footer-name {
      font-family: var(--font-cond);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-pale);
    }
    .footer-copy {
      font-family: var(--font-cond);
      font-size: 11px;
      letter-spacing: 0.1em;
      color: var(--ink-pale);
    }

    /* ── ANIMATIONS ── */
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes expandW {
      from { width: 0; }
      to   { width: 48px; }
    }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.85s ease, transform 0.85s ease;
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.15s; }
    .reveal-delay-2 { transition-delay: 0.28s; }
    .reveal-delay-3 { transition-delay: 0.45s; }

    /* ── RESPONSIVE ── */
    @media (max-width: 980px) {
      .gait-grid,
      .gait-columns {
        grid-template-columns: 1fr;
      }

      .diagram-row {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .diagram-arrow {
        transform: rotate(90deg);
      }
    }

    @media (max-width: 860px) {
      .hero {
        height: auto;
        min-height: 0;
        max-height: none;
      }

      .hero-nav { padding: 26px 28px 0; }
      .hero-nav-links { display: none; }
      .hero-body { padding: 0 28px 36px; min-height: 420px; }
      .hero-contact { padding: 14px 28px; gap: 8px 0; }
      .contact-item { border-right: none; padding-right: 0; margin-right: 20px; }

      .about-layout,
      .gait-layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 28px;
      }

      .about-meta,
      .gait-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }

      .section-index { grid-column: 1 / -1; margin-bottom: 0; }
      .about-sidebar-label,
      .gait-sidebar-label { margin-bottom: 0; }

      .about-pillars { grid-template-columns: 1fr; }
      .pillar, .pillar:nth-child(2), .pillar:last-child {
        border-right: none;
        border-bottom: 1px solid var(--rule);
        padding: 28px 0;
      }
      .pillar:last-child { border-bottom: none; }

      .gait-visuals {
        grid-template-columns: 1fr;
      }

      footer { padding: 22px 28px; flex-direction: column; gap: 8px; text-align: center; }
    }

    @media (max-width: 520px) {
      .hero-name { font-size: 42px; }
      #about,
      #gait-analytics { padding: 72px 0 96px; }

      .about-headline,
      .gait-headline { font-size: 30px; }

      .about-body p,
      .gait-body p { font-size: 16px; }

      .about-meta,
      .gait-meta { grid-template-columns: 1fr; }
    }