:root {
        /* Quiet palette: paper, ink, one gold accent */
        --paper: #f7f6f2;
        --paper-deep: #efede7;
        --ttl-blauw-donker: #032950;
        --ttl-blauw: #0057A3;
        --ttl-blauw-licht: #03B4CC;

        --muted: #5d6b76;
        --line: #10222e1a;
        --gold: #c8a15a;
        --gold-deep: #a98342;
        --gold-soft: #c8a15a24;

        --radius-sm: 14px;
        --radius-md: 20px;
        --radius-lg: 30px;
        --shadow-soft: 0 24px 60px rgba(16, 34, 46, 0.1);
        --max-width: 1180px;
        --header-height: 82px;

        --ease: cubic-bezier(0.22, 0.61, 0.21, 1);

        --font-body:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
        --font-display: "Poppins", Georgia, "Times New Roman", serif;

        font-family: var(--font-body);
      }

      * {
        box-sizing: border-box;
      }

      .poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        background: var(--paper);
        color: var(--ttl-blauw-donker);
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      img {
        display: block;
        max-width: 100%;
      }

      ::selection {
        background: var(--gold-soft);
        color: var(--ttl-blauw-donker);
      }

      /* ————— subtle paper grain ————— */
      .grain {
        position: fixed;
        inset: 0;
        z-index: 60;
        pointer-events: none;
        opacity: 0.028;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
      }

      /* ————— header ————— */
      .site-header {
        position: sticky;
        top: 0;
        z-index: 20;
        background: rgba(247, 246, 242, 0.82);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid transparent;
        transition:
          border-color 0.4s var(--ease),
          box-shadow 0.4s var(--ease);
      }

      .site-header.is-scrolled {
        border-bottom-color: var(--line);
        box-shadow: 0 10px 34px rgba(16, 34, 46, 0.05);
      }

      .header-inner {
        max-width: var(--max-width);
        height: var(--header-height);
        margin: 0 auto;
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
      }

      /* ————— logo (out of scope — unchanged) ————— */
      .brand {
        display: flex;
        align-items: center;
        gap: 14px;
        color: #0f3446;
      }

      .brand img {
        height: 52px;
        margin: 16px 0 0 0; 
      }

      .brand-mark {
        width: 54px;
        height: 54px;
        display: block;
        flex: 0 0 54px;
        border-radius: 18px;
        box-shadow: 0 0 2px rgba(15, 52, 70, 0.22);
        overflow: hidden;
      }

      .brand-mark svg,
      .brand-mark img {
        width: 100%;
        height: 100%;
        display: block;
      }

      .brand-wordmark-svg {
        width: 247px;
        height: 42px;
        display: block;
        overflow: visible;
      }

      .brand-wordmark-svg text {
        fill: #0f3446;
        font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
        font-weight: 900;
        dominant-baseline: hanging;
        text-rendering: geometricPrecision;
      }

      .brand-wordmark-svg .brand-wordmark-small-text {
        font-size: 16px;
        letter-spacing: -0.75px;
        text-transform: uppercase;
      }

      .brand-wordmark-svg .brand-wordmark-main-text {
        font-size: 44px;
        letter-spacing: -3px;
      }
      /* ————— end logo ————— */

      .nav {
        display: flex;
        align-items: center;
        gap: 30px;
        color: var(--muted);
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.01em;
      }

      .nav a {
        position: relative;
        padding: 4px 0;
        transition: color 0.3s var(--ease);
      }

      .nav a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 100%;
        bottom: 0;
        height: 1px;
        background: var(--gold);
        transition: right 0.35s var(--ease);
      }

      .nav a:hover {
        color: var(--ttl-blauw-donker);
      }

      .nav a:hover::after {
        right: 0;
      }

      .nav a.active {
        color: var(--ink);
      }

      .nav a.active::after {
        right: 0;
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      /* ————— buttons ————— */
      .btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 40px;
        padding: 0 20px;
        border-radius: 999px;
        border: 1px solid transparent;
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 14.5px;
        letter-spacing: 0.01em;
        cursor: pointer;
        overflow: hidden;
        transition:
          transform 0.35s var(--ease),
          box-shadow 0.35s var(--ease),
          background-color 0.35s var(--ease),
          border-color 0.35s var(--ease),
          color 0.35s var(--ease);
      }

      .btn:hover {
        transform: translateY(-2px);
      }

      .btn:active {
        transform: translateY(0);
        transition-duration: 0.12s;
      }

      .btn-primary {
        color: #f7f6f2;
        background: var(--ttl-blauw-donker);
        box-shadow: 0 14px 30px rgba(16, 34, 46, 0.18);
        opacity: 0.8;
      }

      .btn-primary:hover {
        background: var(--ttl-blauw);
        box-shadow: 0 18px 38px rgba(16, 34, 46, 0.24);
      }

      .btn-primary .btn-arrow {
        transition: transform 0.35s var(--ease);
      }

      .btn-primary:hover .btn-arrow {
        transform: translateX(4px);
      }

      .btn-secondary {
        color: white;
        background: var(--ttl-blauw-licht);
        border-color: rgba(16, 34, 46, 0.18);
        opacity: 0.8;
      }

      .btn-secondary:hover {
        border-color: var(--gold);
        background: var(--gold-soft);
      }

      .btn-gold {
        color: #241a08;
        background: linear-gradient(150deg, #dcc084, var(--gold));
        box-shadow: 0 14px 32px rgba(120, 86, 26, 0.22);
        white-space: nowrap;
      }

      .btn-gold:hover {
        box-shadow: 0 20px 42px rgba(120, 86, 26, 0.3);
      }

      .btn-ghost-light {
        color: #f7f6f2;
        background: transparent;
        border-color: rgba(247, 246, 242, 0.4);
      }

      .btn-ghost-light:hover {
        border-color: var(--gold);
        background: rgba(200, 161, 90, 0.16);
      }

        .photo-hero {
        position: relative;
        overflow: hidden;
        min-height: calc(100svh - var(--header-height));
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background: var(--ink);
        color: #f2f1ec;
      }

      .hero-media {
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: 0;
        animation: media-in 2s var(--ease) 0.15s forwards;
      }

      @keyframes media-in {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      /* outer layer = mouse parallax (JS), inner img = slow ken burns (CSS) */
      .hero-media-move {
        position: absolute;
        inset: -4%;
        will-change: transform;
      }

      .hero-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 42%;
        animation: ken-burns 44s ease-in-out infinite alternate;
        will-change: transform;
      }

      @keyframes ken-burns {
        from { transform: scale(1.06) translate3d(0, 0, 0); }
        to { transform: scale(1.16) translate3d(-1.4%, -1%, 0); }
      }

      .hero-shade {
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          radial-gradient(
            110% 90% at 18% 88%,
            rgba(9, 22, 32, 0.82) 0%,
            rgba(9, 22, 32, 0.32) 52%,
            transparent 78%
          ),
          linear-gradient(
            90deg,
            rgba(9, 22, 32, 0.6) 0%,
            rgba(9, 22, 32, 0.24) 48%,
            rgba(9, 22, 32, 0.08) 100%
          ),
          linear-gradient(
            195deg,
            rgba(13, 29, 39, 0.44) 0%,
            rgba(13, 29, 39, 0.2) 42%,
            rgba(9, 22, 32, 0.8) 100%
          );
        pointer-events: none;
      }

      @media (max-width: 700px) {
        .hero-shade {
          background: linear-gradient(
            180deg,
            rgba(13, 29, 39, 0.52) 0%,
            rgba(13, 29, 39, 0.46) 45%,
            rgba(9, 22, 32, 0.88) 100%
          );
        }
      }

      /* ————— hero ————— */
      .hero {
        position: relative;
        overflow: hidden;
        min-height: calc(100svh - var(--header-height));
        display: flex;
        flex-direction: column;
        background: linear-gradient(180deg, #fbfaf7 0%, var(--paper) 82%);
      }

      #hero-canvas {
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: 0;
        transition: opacity 2.4s var(--ease);
        pointer-events: none;
      }

      #hero-canvas.is-ready {
        opacity: 1;
      }

      .hero::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 180px;
        z-index: 1;
        background: linear-gradient(180deg, transparent, var(--paper));
        pointer-events: none;
      }

      .hero-inner {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: var(--max-width);
        margin: 0 auto;
        padding: clamp(56px, 9vh, 110px) 24px 40px;
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
        gap: 56px;
        align-items: center;
        flex: 1;
      }

      .photo-hero .hero-inner-detail {
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: var(--max-width);
        margin: 0 auto;
        padding: clamp(120px, 18vh, 200px) 24px 46px;
      }
        .photo-hero .hero-inner-detail,
        .section,
        .visit-band,
        .quote-section {
          padding-left: 18px;
          padding-right: 18px;
        }

      #dust-canvas {
        position: absolute;
        inset: 0;
        z-index: 2;
        opacity: 0;
        transition: opacity 2.6s var(--ease);
        pointer-events: none;
      }

      #dust-canvas.is-ready {
        opacity: 1;
      }

      .photo-hero .hero-inner {
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: var(--max-width);
        margin: 0 auto;
        padding: clamp(120px, 18vh, 200px) 24px 46px;
      }

      .photo-hero .eyebrow {
        color: var(--gold);
      }

      .photo-hero h1 {
        color: #f7f6f2;
      }

      .photo-hero h1 em {
        color: var(--ttl-blauw-licht);
      }

      .photo-hero .hero-copy {
        color: rgba(242, 241, 236, 0.78);
      }

      .hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 26px;
        margin-top: 42px;
        padding-top: 22px;
        border-top: 1px solid rgba(247, 246, 242, 0.18);
        color: rgba(242, 241, 236, 0.6);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .hero-meta span::before {
        content: "·";
        margin-right: 26px;
        color: var(--gold);
      }

      .hero-meta span:first-child::before {
        content: none;
        margin: 0;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 28px;
        color: var(--gold-deep);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
      }

      .eyebrow::before {
        content: "";
        width: 34px;
        height: 1px;
        background: var(--gold);
      }

      h1 {
        margin: 0;
        max-width: 640px;
        font-family: var(--font-display);
        font-weight: 500;
        font-size: clamp(44px, 6.4vw, 82px);
        line-height: 1.12;
        letter-spacing: -0.02em;
        color: var(--ttl-blauw-donker);
      }

      h1 em {
        font-style: italic;
        font-weight: 400;
        color: var(--ttl-blauw-licht);
      }

      .hero-copy {
        max-width: 540px;
        margin: 26px 0 0;
        font-size: 18px;
        line-height: 1.7;
        color: var(--muted);
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 38px;
      }

      /* staggered load choreography */
      .rise {
        opacity: 0;
        transform: translateY(26px);
        animation: soft-rise 1.1s var(--ease) forwards;
      }

      .rise-1 { animation-delay: 0.1s; }
      .rise-2 { animation-delay: 0.22s; }
      .rise-3 { animation-delay: 0.36s; }
      .rise-4 { animation-delay: 0.5s; }
      .rise-5 { animation-delay: 0.66s; }

      @keyframes soft-rise {
        from {
          opacity: 0;
          transform: translateY(26px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* ————— scroll hint (light, on photo) ————— */
      .scroll-hint {
        position: relative;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding-bottom: 30px;
        color: rgba(242, 241, 236, 0.55);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.3em;
        text-transform: uppercase;
      }

      .scroll-hint::after {
        content: "";
        width: 1px;
        height: 44px;
        background: linear-gradient(180deg, var(--gold), transparent);
        animation: hint-drop 2.4s var(--ease) infinite;
        transform-origin: top;
      }

      @keyframes hint-drop {
        0% { transform: scaleY(0); opacity: 0; }
        35% { transform: scaleY(1); opacity: 1; }
        100% { transform: scaleY(1) translateY(18px); opacity: 0; }
      }

      /* ————— scroll reveal ————— */
      [data-reveal] {
        opacity: 0;
        transform: translateY(30px);
        transition:
          opacity 1s var(--ease),
          transform 1s var(--ease);
        transition-delay: var(--d, 0s);
        will-change: opacity, transform;
      }

      [data-reveal].is-visible {
        opacity: 1;
        transform: none;
      }

      /* ————— hero order card ————— */
      .hero-card {
        position: relative;
        padding: 10px;
        border-radius: var(--radius-lg);
        background: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.9);
        box-shadow: var(--shadow-soft);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }

      /* ————— sections ————— */
      .section {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: clamp(70px, 10vw, 120px) 24px 0;
      }

      .section-header {
        max-width: 640px;
        margin-bottom: clamp(40px, 6vw, 64px);
      }

      .kicker {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
        color: var(--gold-deep);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
      }

      .kicker::before {
        content: "";
        width: 28px;
        height: 1px;
        background: var(--gold);
      }

      .section-header h2,
      .h-display {
        margin: 0;
        font-family: var(--font-display);
        font-weight: 500;
        font-size: clamp(32px, 4.4vw, 52px);
        line-height: 1.06;
        letter-spacing: -0.018em;
        color: var(--ink);
      }

      .section-header h2 em,
      .h-display em {
        font-style: italic;
        font-weight: 400;
        color: var(--gold-deep);
      }

      .section-header p {
        margin: 18px 0 0;
        color: var(--muted);
        font-size: 17px;
        line-height: 1.7;
      }

      /* ————— service index: the menu of work ————— */
      .services-layout-detail {
        display: grid;
        grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
        gap: clamp(40px, 6vw, 80px);
        align-items: start;
      }

      .services-intro-detail p {
        margin: 18px 0 0;
        color: var(--muted);
        font-size: 16.5px;
        line-height: 1.7;
        max-width: 400px;
      }

      /* ————— service index: the menu of work ————— */
      .services-layout {
        display: grid;
        grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
        gap: clamp(40px, 6vw, 80px);
        align-items: start;
      }

      .services-intro {
        position: sticky;
        top: calc(var(--header-height) + 40px);
      }

      .services-intro p {
        margin: 18px 0 0;
        color: var(--muted);
        font-size: 16.5px;
        line-height: 1.7;
        max-width: 400px;
      }

      .specialty-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 30px;
      }

      .specialty-tags span {
        display: inline-flex;
        align-items: center;
        height: 32px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: #fff;
        color: var(--muted);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 0.02em;
        transition:
          border-color 0.35s var(--ease),
          color 0.35s var(--ease);
        margin: 0 0 10px 0;
      }

      .specialty-tags span:hover {
        border-color: var(--gold);
        color: var(--ink);
      }

      .service-list {
        border-top: 1px solid var(--line);
      }

      .service-row {
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 6px 20px;
        padding: 22px 8px 24px 0;
        border-bottom: 1px solid var(--line);
        transition: background-color 0.4s var(--ease);
      }

      .service-row:hover {
        background: rgba(255, 255, 255, 0.7);
      }

      .service-num {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 15px;
        line-height: 1.9;
        color: var(--gold-deep);
      }

      .service-row h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -0.02em;
        transition: color 0.35s var(--ease);
      }

      .service-row p {
        grid-column: 2;
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 14.5px;
        line-height: 1.6;
        max-width: 480px;
      }

      .repair-note {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin: 50px 0 25px 0;
        padding: 22px 24px;
        border-radius: var(--radius-md);
        border: 1px solid rgba(200, 161, 90, 0.4);
        background: var(--gold-soft);
      }

      .repair-note strong {
        display: block;
        font-size: 16px;
        letter-spacing: -0.01em;
      }

      .repair-note span {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 13.5px;
      }

      .repair-note a {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 22px;
        letter-spacing: -0.01em;
        color: var(--gold-deep);
        white-space: nowrap;
        transition: color 0.3s var(--ease);
      }

      .repair-note a:hover {
        color: var(--ttl-blauw);
      }

      .leerbedrijf {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 18px;
        padding: 18px 24px;
        border-radius: var(--radius-md);
        border: 1px solid var(--line);
        background: #fff;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.6;
      }

      .leerbedrijf svg {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        color: var(--gold-deep);
      }

      .leerbedrijf strong {
        color: var(--ink);
      }

      /* ————— room tour: scroll-scrubbed walkthrough ————— */
      .tour {
        position: relative;
        margin-top: clamp(70px, 10vw, 120px);
        background: var(--ink);
      }

      .tour-track {
        position: relative;
        height: 380svh;
      }

      .tour-viewport {
        position: sticky;
        top: 0;
        height: 100svh;
        overflow: hidden;
      }

      .tour-scene {
        position: absolute;
        inset: 0;
        margin: 0;
        opacity: 0;
        will-change: opacity;
      }

      .tour-scene:first-child {
        opacity: 1;
      }

      .tour-scene img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        will-change: transform;
      }

      .tour-scene::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          200deg,
          rgba(13, 29, 39, 0.16) 0%,
          transparent 42%,
          rgba(9, 22, 32, 0.82) 100%
        );
        pointer-events: none;
      }

      .tour-caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 24px clamp(48px, 8vh, 84px);
        color: #f2f1ec;
        will-change: transform, opacity;
      }

      .tour-caption .tour-num {
        display: block;
        margin-bottom: 12px;
        font-family: var(--font-display);
        font-style: italic;
        font-size: 16px;
        color: var(--gold);
      }

      .tour-caption h3 {
        margin: 0;
        font-family: var(--font-display);
        font-weight: 500;
        font-size: clamp(30px, 4.4vw, 50px);
        line-height: 1.05;
        letter-spacing: -0.018em;
      }

      .tour-caption p {
        margin: 14px 0 0;
        max-width: 460px;
        color: rgba(242, 241, 236, 0.74);
        font-size: 16px;
        line-height: 1.65;
      }

      .tour-ui {
        position: absolute;
        top: 50%;
        right: clamp(18px, 3vw, 40px);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        transform: translateY(-50%);
      }

      .tour-ui span {
        width: 7px;
        height: 7px;
        border-radius: 99px;
        background: rgba(242, 241, 236, 0.32);
        transition:
          background-color 0.4s var(--ease),
          transform 0.4s var(--ease);
      }

      .tour-ui span.is-active {
        background: var(--gold);
        transform: scale(1.35);
      }

      .tour-hint {
        position: absolute;
        left: 24px;
        top: clamp(28px, 5vh, 56px);
        z-index: 3;
        color: rgba(242, 241, 236, 0.5);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.3em;
        text-transform: uppercase;
      }

      /* static fallback (reduced motion / no JS): plain stacked photos */
      .tour.is-static .tour-track {
        height: auto;
      }

      .tour.is-static .tour-viewport {
        position: static;
        height: auto;
        display: grid;
      }

      .tour.is-static .tour-scene {
        position: relative;
        height: 72svh;
        opacity: 1;
      }

      .tour.is-static .tour-ui,
      .tour.is-static .tour-hint {
        display: none;
      }

      .order-preview {
        border-radius: 22px;
        background: #fff;
        overflow: hidden;
        border: 1px solid var(--line);
      }

      .order-preview-header {
        padding: 20px 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--line);
      }

      .order-preview-header strong {
        font-size: 16px;
        letter-spacing: -0.01em;
        color: var(--ttl-blauw-donker);
      }

      .status-chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 28px;
        padding: 0 12px;
        border-radius: 999px;
        background: var(--gold-soft);
        color: var(--ttl-blauw-donker);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
      }

      .status-chip::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 99px;
        background: var(--ttl-blauw-licht);
        animation: pulse-dot 2.6s ease-in-out infinite;
      }

      @keyframes pulse-dot {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.45; transform: scale(0.72); }
      }

      .order-preview-body {
        padding: 20px 22px 22px;
        display: grid;
        gap: 12px;
      }

      .mini-field {
        padding: 13px 15px;
        border: 1px solid var(--line);
        border-radius: 15px;
        background: #fcfbf9;
      }

      .mini-field span {
        display: block;
        color: var(--gold-deep);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .mini-field strong {
        display: block;
        margin-top: 5px;
        font-size: 15px;
        letter-spacing: -0.01em;
      }

      .mini-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      .progress-line {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-top: 10px;
      }

      .progress-step {
        height: 5px;
        border-radius: 99px;
        background: var(--paper-deep);
        overflow: hidden;
        position: relative;
      }

      .progress-step.is-active::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 99px;
        background: var(--ttl-blauw-licht);
        transform-origin: left;
        animation: fill-step 1.4s var(--ease) 1.1s both;
      }

      .progress-step:nth-child(2).is-active::after {
        animation-delay: 1.7s;
      }

      @keyframes fill-step {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
      }

      /* ————— scroll hint ————— */
      .scroll-hint {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding-bottom: 34px;
        color: var(--ink-40);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.3em;
        text-transform: uppercase;
      }

      .scroll-hint::after {
        content: "";
        width: 1px;
        height: 44px;
        background: linear-gradient(180deg, var(--gold), transparent);
        animation: hint-drop 2.4s var(--ease) infinite;
        transform-origin: top;
      }

      @keyframes hint-drop {
        0% { transform: scaleY(0); opacity: 0; }
        35% { transform: scaleY(1); opacity: 1; }
        100% { transform: scaleY(1) translateY(18px); opacity: 0; }
      }

      /* ————— scroll reveal ————— */
      [data-reveal] {
        opacity: 0;
        transform: translateY(30px);
        transition:
          opacity 1s var(--ease),
          transform 1s var(--ease);
        transition-delay: var(--d, 0s);
        will-change: opacity, transform;
      }

      [data-reveal].is-visible {
        opacity: 1;
        transform: none;
      }

      /* ————— sections ————— */
      .section {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: clamp(70px, 10vw, 120px) 24px 0;
      }

      .section-header {
        max-width: 640px;
        margin-bottom: clamp(40px, 6vw, 64px);
      }

      .kicker {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
        color: var(--gold-deep);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
      }

      .kicker::before {
        content: "";
        width: 28px;
        height: 1px;
        background: var(--gold);
      }

      .section-header h2,
      .h-display {
        margin: 0;
        font-family: var(--font-display);
        font-weight: 500;
        font-size: clamp(32px, 4.4vw, 52px);
        line-height: 1.06;
        letter-spacing: -0.018em;
            color: var(--ttl-blauw);
      }

      .section-header h2 em,
      .h-display em {
        font-style: italic;
        font-weight: 400;
        color: var(--gold-deep);
      }

      .section-header p {
        margin: 18px 0 0;
        color: var(--muted);
        font-size: 17px;
        line-height: 1.7;
      }

      /* ————— stats strip ————— */
      .stats-strip {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: clamp(56px, 8vw, 90px) 24px 0;
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid var(--line);
      }

      .stat {
        padding: 34px 26px 6px;
        border-left: 1px solid var(--line);
      }

      .stat:first-child {
        border-left: none;
        padding-left: 0;
      }

      .stat-number {
font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(38px, 4.6vw, 58px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ttl-blauw-licht);
    font-variant-numeric: tabular-nums;
      }

      .stat-number sup {
        font-size: 0.55em;
        color: var(--gold-deep);
      }

      .stat-label {
        margin-top: 12px;
        color: var(--muted);
        font-size: 14.5px;
        line-height: 1.6;
        max-width: 240px;
      }

      /* ————— service cards ————— */
      .service-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
      }

      .service-card {
        position: relative;
        padding: 28px 24px 30px;
        border-radius: var(--radius-md);
        background: #fff;
        border: 1px solid var(--line);
        transition:
          transform 0.5s var(--ease),
          box-shadow 0.5s var(--ease),
          border-color 0.5s var(--ease);
      }

      .service-card:hover {
        transform: translateY(-6px);
        border-color: rgba(200, 161, 90, 0.5);
        box-shadow: 0 26px 54px rgba(16, 34, 46, 0.1);
      }

      .service-index {
        display: block;
        margin-bottom: 34px;
        font-family: var(--font-display);
        font-style: italic;
        font-size: 15px;
        color: var(--gold-deep);
      }

      .service-index::after {
        content: "";
        display: block;
        width: 26px;
        height: 1px;
        margin-top: 10px;
        background: var(--gold);
        transition: width 0.5s var(--ease);
      }

      .service-card:hover .service-index::after {
        width: 46px;
      }

      .service-card h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -0.02em;
            color: var(--ttl-blauw-licht);
      }

      .service-card p {
        margin: 10px 0 0;
        color: var(--muted);
        font-size: 14.5px;
        line-height: 1.65;
      }

      /* ————— werkwijze timeline ————— */
      .process {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        border-top: 1px solid var(--line);
      }

      .process-step {
        position: relative;
        padding: 36px 28px 10px 0;
        border-right: 1px solid var(--line);
      }

      .process-step:last-child {
        border-right: none;
      }

      .process-step + .process-step {
        padding-left: 28px;
      }

      .process-step::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--gold);
        transition: width 1.2s var(--ease) 0.2s;
      }

      .process-step.is-visible::before {
        width: 56px;
      }

      .process-num {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 15px;
        color: var(--gold-deep);
      }

      .process-step h3 {
        margin: 20px 0 0;
        font-size: 17.5px;
        font-weight: 600;
        letter-spacing: -0.02em;
            color: var(--ttl-blauw-licht);
      }

      .process-step p {
        margin: 10px 0 0;
        color: var(--ttl-blauw-donker);
        font-size: 14.5px;
        line-height: 1.65;
      }

      /* ————— prothese specialisatie ————— */
      .specialty-panel {
        border-radius: var(--radius-lg);
        border: 1px solid var(--line);
        background: #fff;
        box-shadow: 0 20px 50px rgba(16, 34, 46, 0.06);
        padding: clamp(28px, 4vw, 48px);
      }

      .prosthesis-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-top: clamp(30px, 4vw, 44px);
      }

      .prosthesis-card {
        display: grid;
        gap: 14px;
        padding: 14px 14px 20px;
        border-radius: 18px;
        background: #fdfcfa;
        border: 1px solid var(--line);
        transition:
          transform 0.5s var(--ease),
          box-shadow 0.5s var(--ease),
          border-color 0.5s var(--ease);
      }

      .prosthesis-card:hover {
        transform: translateY(-6px);
        border-color: rgba(200, 161, 90, 0.5);
        box-shadow: 0 24px 46px rgba(16, 34, 46, 0.09);
      }

      .prosthesis-media {
        height: 104px;
        border-radius: 13px;
        background:
          radial-gradient(
            circle at 30% 22%,
            rgba(200, 161, 90, 0.1),
            transparent 42%
          ),
          linear-gradient(150deg, #f4f2ec, #eae7df);
        display: grid;
        place-items: center;
        color: var(--ttl-blauw-licht);
        overflow: hidden;
      }

      .prosthesis-media img {
        width: 54px;
        height: 54px;
        opacity: 0.75;
        transition: transform 0.6s var(--ease);
        color: var(--ttl-blauw-donker);
      }

      .prosthesis-card:hover .prosthesis-media svg {
        transform: translateY(-3px) scale(1.06);
      }

      .prosthesis-card h3 {
        margin: 0;
        padding: 0 6px;
        font-size: 15.5px;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.02em;
            color: var(--ttl-blauw-donker);
      }

      .prosthesis-card p {
        margin: 0;
        padding: 0 6px;
        color: var(--muted);
        font-size: 13.5px;
        line-height: 1.55;
      }

      .prosthesis-card a {
        margin: 4px 6px 0;
        color: var(--gold-deep);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 0.02em;
        transition: color 0.3s var(--ease);
      }

      .prosthesis-card a:hover {
        color: var(--ttl-blauw-donker);
      }

      /* ————— care panels ————— */
      .care-stack {
        display: grid;
        gap: 18px;
        grid-template-columns: 1fr 1fr;
        margin-top: 50px;
      }

      .care-panel {
        position: relative;
        min-height: 210px;
        padding: 32px;
        border-radius: var(--radius-lg);
        /* background: var(--ttl-blauw-donker); */
        /* color: #eef0ee; */
        /* overflow: hidden; */
        background: transparent;
        border: 1px solid var(--line);
        transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
      }

      .care-panel::before {
        content: "";
        position: absolute;
        inset: -110px -110px auto auto;
        width: 260px;
        height: 260px;
        border-radius: 999px;
        background: radial-gradient(
          circle,
          rgba(200, 161, 90, 0.22),
          transparent 68%
        );
      }

      .care-icon {
        width: 50px;
        height: 50px;
        display: grid;
        place-items: center;
        margin-bottom: 34px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.07);
        color: var(--gold);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
      }

      .care-icon svg {
        width: 50px;
        height: 50px;
      }

      .care-panel h3 {
        margin: 0;
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 24px;
        line-height: 1.15;
        letter-spacing: -0.015em;
            color: var(--ttl-blauw);
      }

      .care-panel p {
        margin: 12px 0 0;
        font-size: 14.5px;
        line-height: 1.65;
        max-width: 420px;
        color: var(--ttl-blauw-donker);
      }

      /* ————— portal band ————— */
      .portal-band {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: clamp(70px, 10vw, 120px) 24px 0;
      }

      .portal-card {
        position: relative;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 40px;
        align-items: center;
        padding: clamp(36px, 5vw, 56px);
        border-radius: var(--radius-lg);
        background: var(--ttl-blauw-donker);
        color: #eef0ee;
        box-shadow: var(--shadow-soft);
        overflow: hidden;
      }

      .portal-card::before {
        content: "";
        position: absolute;
        inset: auto auto -140px -120px;
        width: 340px;
        height: 340px;
        border-radius: 999px;
        background: radial-gradient(
          circle,
          rgba(200, 161, 90, 0.18),
          transparent 68%
        );
      }

      .portal-card .kicker {
        color: var(--gold);
      }

      .portal-card h2 {
        margin: 0;
        font-family: var(--font-display);
        font-weight: 500;
        font-size: clamp(30px, 4vw, 46px);
        line-height: 1.08;
        letter-spacing: -0.018em;
      }

      .portal-card h2 em {
        font-style: italic;
        font-weight: 400;
            color: var(--ttl-blauw-licht);
      }

      .portal-card p {
        max-width: 620px;
        margin: 16px 0 0;
        color: rgba(238, 240, 238, 0.66);
        font-size: 16.5px;
        line-height: 1.7;
      }

      /* ————— visit & contact band ————— */
      .visit-band {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: clamp(70px, 10vw, 120px) 24px 0;
      }

      .visit-card {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        border-radius: var(--radius-lg);
        background: var(--ink);
        color: #eef0ee;
        box-shadow: var(--shadow-soft);
        overflow: hidden;
      }

      .visit-media {
        position: relative;
        min-height: 420px;
        overflow: hidden;
      }

      .visit-media img {
        position: absolute;
        inset: -12% 0;
        width: 100%;
        height: 124%;
        object-fit: cover;
        will-change: transform;
      }

      .visit-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          transparent 55%,
          rgba(16, 34, 46, 0.55) 100%
        );
        pointer-events: none;
      }

      .visit-body {
        position: relative;
        padding: clamp(34px, 5vw, 56px);
      }

      .visit-body::before {
        content: "";
        position: absolute;
        inset: auto auto -140px -120px;
        width: 340px;
        height: 340px;
        border-radius: 999px;
        background: radial-gradient(
          circle,
          rgba(200, 161, 90, 0.18),
          transparent 68%
        );
        pointer-events: none;
      }

      .visit-body .kicker {
        color: var(--gold);
      }

      .visit-body h2 {
        margin: 0;
        font-family: var(--font-display);
        font-weight: 500;
        font-size: clamp(30px, 4vw, 46px);
        line-height: 1.08;
        letter-spacing: -0.018em;
        color: var(--ttl-blauw-donker);
      }

      .visit-body h2 em {
        font-style: italic;
        font-weight: 400;
        color: var(--gold);
      }

      .visit-body > p {
        max-width: 480px;
        margin: 16px 0 0;
        color: var(--ttl-blauw);
        font-size: 16px;
        line-height: 1.7;
      }

      .contact-rows {
        display: grid;
        gap: 0;
        margin: 30px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
      }

      .contact-row {
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 18px;
        padding: 13px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-style: normal;
        font-size: 15px;
      }

      .contact-row dt {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        line-height: 2;
        color: var(--ttl-blauw-donker);
      }

      .contact-row dd {
        margin: 0;
        color: var(--ttl-blauw-donker);
        line-height: 1.55;
      }

      .contact-row a {
        transition: color 0.3s var(--ease);
      }

      .contact-row a:hover {
        color: var(--gold);
      }

      .visit-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 30px;
      }

      /* ————— quote ————— */
      .quote-section {
        max-width: 820px;
        margin: 0 auto;
        padding: clamp(80px, 11vw, 130px) 24px 0;
        text-align: center;
      }

      .quote-mark {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 64px;
        line-height: 0.4;
        color: var(--gold);
        display: block;
        margin-bottom: 26px;
      }

      .quote-section blockquote {
        margin: 0;
        font-family: var(--font-display);
        font-weight: 400;
        font-style: italic;
        font-size: clamp(24px, 3.4vw, 36px);
        line-height: 1.3;
        letter-spacing: -0.01em;
        color: var(--ttl-blauw-donker);
      }

      .quote-section figcaption {
        margin-top: 26px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }

      /* ————— footer ————— */
      .footer {
        margin-top: clamp(80px, 11vw, 130px);
        background: linear-gradient(180deg, var(--ttl-blauw-donker) 0%, var(--ttl-blauw-donker) 50%, var(--ttl-blauw)  100%);
        color: #fff;
      }

      .footer-inner {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: clamp(56px, 7vw, 80px) 24px 34px;
        color: white;
        font-size: 14.5px;
      }

      .footer-grid {
        display: grid;
        grid-template-columns: 1.3fr 1fr 1fr 1fr;
        gap: 40px;
        padding-bottom: 44px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
      }

      .footer-brandline {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 26px;
        line-height: 1.2;
        letter-spacing: -0.015em;
        color: #fff;
        max-width: 300px;
      }

      .footer-brandline em {
        font-style: italic;
        font-weight: 400;
        color: var(--gold);
      }

      .footer h3 {
        margin: 0 0 16px;
        color: var(--ttl-blauw-licht);
        font-size: 1.1rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .footer-links,
      .footer-contact {
        display: grid;
        gap: 10px;
        font-style: normal;
      }

      .footer-links a,
      .footer-contact a {
        color: white;
        transition: color 0.3s var(--ease);
      }

      .footer-links a:hover,
      .footer-contact a:hover {
        color: #fff;
      }

      .footer-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding-top: 26px;
        font-size: 13px;
        color: white;
      }

      /* ————— hamburger toggle ————— */
      .menu-toggle {
        display: none;
        position: relative;
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        padding: 0;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid var(--ttl-blauw);
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
          border-color 0.35s var(--ease),
          background-color 0.35s var(--ease),
          transform 0.35s var(--ease);
      }

      .menu-toggle:hover {
        border-color: var(--gold);
        background: var(--gold-soft);
      }

      .menu-toggle:active {
        transform: scale(0.94);
        transition-duration: 0.12s;
      }

      .menu-toggle-box {
        position: relative;
        display: block;
        width: 18px;
        height: 12px;
      }

      .menu-line {
        position: absolute;
        left: 0;
        width: 18px;
        height: 1.6px;
        border-radius: 99px;
        background: var(--ttl-blauw-donker);
        transition:
          transform 0.5s var(--ease),
          opacity 0.3s var(--ease);
      }

      .menu-line-1 { top: 0; }
      .menu-line-2 { top: 5.2px; transform-origin: center; }
      .menu-line-3 { top: 10.4px; }

      .menu-toggle[aria-expanded="true"] .menu-line-1 {
        transform: translateY(5.2px) rotate(45deg);
      }

      .menu-toggle[aria-expanded="true"] .menu-line-2 {
        opacity: 0;
        transform: scaleX(0.2);
      }

      .menu-toggle[aria-expanded="true"] .menu-line-3 {
        transform: translateY(-5.2px) rotate(-45deg);
      }

      /* ————— mobile menu overlay ————— */
      .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 19;
        display: flex;
        flex-direction: column;
        padding: calc(var(--header-height) + 26px) 24px 28px;
        background: rgba(247, 246, 242, 0.88);
        backdrop-filter: blur(26px);
        -webkit-backdrop-filter: blur(26px);
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.5s var(--ease),
          visibility 0s linear 0.5s;
      }

      .mobile-menu::before {
        content: "";
        position: absolute;
        top: -130px;
        right: -130px;
        width: 320px;
        height: 320px;
        border-radius: 999px;
        background: radial-gradient(
          circle,
          rgba(200, 161, 90, 0.16),
          transparent 68%
        );
        pointer-events: none;
      }

      .mobile-menu.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.45s var(--ease);
      }

      .mobile-menu .kicker {
        margin-bottom: 6px;
        opacity: 0;
        transform: translateY(18px);
        transition:
          opacity 0.6s var(--ease),
          transform 0.6s var(--ease);
      }

      .mobile-menu.is-open .kicker {
        opacity: 1;
        transform: none;
        transition-delay: 0.08s;
      }

      .mobile-menu-nav {
        display: grid;
        margin-top: 10px;
      }

      .mobile-menu-nav a {
        display: flex;
        align-items: baseline;
        gap: 18px;
        padding: 17px 4px;
        border-bottom: 1px solid var(--line);
        font-family: var(--font-display);
        font-weight: 500;
        font-size: clamp(28px, 7.4vw, 38px);
        line-height: 1.08;
        letter-spacing: -0.02em;
        color: var(--ttl-blauw-donker);
        opacity: 0;
        transform: translateY(26px);
        transition:
          opacity 0.6s var(--ease),
          transform 0.6s var(--ease),
          color 0.3s var(--ease);
      }

      .mobile-menu-nav a:active {
        color: var(--gold-deep);
      }

      .mobile-menu.is-open .mobile-menu-nav a {
        opacity: 1;
        transform: none;
        transition-delay: calc(0.14s + var(--i, 0) * 0.07s);
      }

      .mobile-menu-index {
        font-style: italic;
        font-size: 14px;
        color: var(--gold-deep);
        min-width: 30px;
      }

      .mobile-menu-actions {
        display: grid;
        gap: 12px;
        margin-top: auto;
        padding-top: 30px;
        opacity: 0;
        transform: translateY(22px);
        transition:
          opacity 0.6s var(--ease),
          transform 0.6s var(--ease);
      }

      .mobile-menu.is-open .mobile-menu-actions {
        opacity: 1;
        transform: none;
        transition-delay: 0.44s;
      }

      body.menu-open {
        overflow: hidden;
      }

      /* ————— reduced motion ————— */
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }

        .rise,
        [data-reveal] {
          opacity: 1 !important;
          transform: none !important;
        }
      }

      /* ————— responsive ————— */
      @media (max-width: 980px) {
        .nav {
          display: none;
        }

        .header-actions .btn-primary {
          display: none;
        }

        .menu-toggle {
          display: inline-flex;
          margin: 16px 0 0 0;
        }

        .hero-inner {
          grid-template-columns: 1fr;
          gap: 44px;
          align-items: start;
          padding-top: 64px;
        }

        .hero-card {
          max-width: 480px;
        }

        .service-grid {
          grid-template-columns: repeat(2, 1fr);
        }

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

        .process-step {
          border-right: none;
          border-top: 1px solid var(--line);
          padding: 30px 0 26px;
        }

        .process-step + .process-step {
          padding-left: 0;
        }

        .process {
          border-top: none;
          gap: 0 32px;
        }

        .prosthesis-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .care-stack {
          grid-template-columns: 1fr;
        }

        .portal-card {
          grid-template-columns: 1fr;
          gap: 28px;
        }

        .stats-grid {
          grid-template-columns: 1fr;
          border-top: none;
        }

        .stat {
          border-left: none;
          border-top: 1px solid var(--line);
          padding: 28px 0 10px;
        }

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

      @media (max-width: 640px) {
        :root {
          --header-height: 72px;
        }

        .header-inner {
          height: 72px;
          padding: 0 16px;
          align-items: start;
        }

        /* logo scaling (unchanged from original) */
        .brand-wordmark-svg {
          width: 194px;
          height: 30px;
        }

        .brand-wordmark-svg .brand-wordmark-small-text {
          font-size: 12px;
          letter-spacing: -0.55px;
        }

        .brand-wordmark-svg .brand-wordmark-main-text {
          font-size: 30px;
          letter-spacing: -2.3px;
        }

        .header-actions .btn-secondary {
          display: none;
        }

        .hero-inner,
        .section,
        .stats-strip,
        .portal-band,
        .quote-section {
          padding-left: 18px;
          padding-right: 18px;
        }

        .hero-actions .btn {
          flex: 1 1 auto;
        }

        .service-grid,
        .prosthesis-grid,
        .mini-grid {
          grid-template-columns: 1fr;
        }

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

        .portal-card {
          padding: 30px 24px;
        }

        .footer-bottom {
          align-items: flex-start;
          flex-direction: column;
        }
      }