@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=Inter:wght@400;500;600;700;800;900&display=swap');

      :root {
        --bg: #08090b;
        --bg-2: #111317;
        --elevated: #191b20;
        --panel: rgba(22, 24, 27, 0.82);
        --text: #f5f3ef;
        --muted: #a6a7ab;
        --gold-1: #f4de9b;
        --gold-2: #d9ab4f;
        --gold-3: #9d6b22;
        --gold-4: rgba(200, 169, 107, 0.27);
        --line: rgba(255, 255, 255, 0.08);
        --shadow: rgba(0, 0, 0, 0.45);
        --container: 1200px;
      }

      * { box-sizing: border-box; }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font-family: 'Inter', sans-serif;
        line-height: 1.6;
        min-height: 100vh;
      }

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

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

      a,
      button,
      input,
      select,
      textarea {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
      }

      button, input, textarea, select {
        font: inherit;
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      .page-shell {
        background:
          radial-gradient(circle at top, rgba(201, 168, 101, 0.08), transparent 38%),
          linear-gradient(180deg, #050608 0%, #08090b 20%, #111317 100%);
      }

      .container {
        width: min(calc(100% - 2rem), var(--container));
        margin: 0 auto;
      }

      header.site-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 78px;
        z-index: 50;
        background: rgba(8, 9, 11, 0.82);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(200, 169, 107, 0.2);
        transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
      }

      header.site-header.scrolled {
        background: rgba(8, 9, 11, 0.9);
        border-color: rgba(200, 169, 107, 0.25);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
      }

      .nav-wrap {
        width: min(calc(100% - 2rem), 1400px);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        gap: 1.25rem;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 0.9rem;
        min-width: 0;
      }

      .brand-mark {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        object-fit: cover;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 8px 24px rgba(0,0,0,0.32);
      }

      .brand-text {
        position: relative;
        font-weight: 800;
        letter-spacing: 0.04em;
        font-size: clamp(0.7rem, 1vw, 0.95rem);
        text-transform: uppercase;
        color: #f5d88d;
        white-space: nowrap;
        display: inline-block;
        background: linear-gradient(90deg, #f5d88d 0%, #dca93b 45%, #f5d88d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 18px rgba(223, 178, 80, 0.12);
      }

      .brand-text::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -5px;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(244, 222, 155, 0.8), transparent);
        transform: scaleX(0.8);
        opacity: 0.7;
      }

      .nav {
        display: flex;
        align-items: center;
        gap: clamp(0.75rem, 1.8vw, 1.5rem);
      }

      .nav a {
        position: relative;
        color: rgba(245, 243, 239, 0.84);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.68rem;
        font-weight: 600;
        transition: color 0.25s ease;
      }

      .nav a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -0.45rem;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold-1), transparent);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.25s ease;
      }

      .nav a:hover,
      .nav a:focus-visible {
        color: var(--text);
      }

      .nav a:hover::after,
      .nav a:focus-visible::after {
        transform: scaleX(1);
      }

      .nav .nav-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.55rem;
        padding: 0.65rem 0.9rem;
        border: 1px solid rgba(217, 171, 79, 0.72);
        border-radius: 7px;
        background: rgba(217, 171, 79, 0.1);
        color: var(--gold-1);
        font-size: 0.63rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        white-space: nowrap;
        transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
      }

      .nav .nav-consultant {
        display: none;
      }

      .nav .nav-cta::after {
        display: none;
      }

      .nav .nav-cta:hover,
      .nav .nav-cta:focus-visible {
        border-color: var(--gold-1);
        background: rgba(217, 171, 79, 0.18);
        color: #fff8e7;
      }

      .nav-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .nav-portfolio {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.55rem;
        padding: 0.65rem 0.75rem;
        border: 1px solid rgba(217, 171, 79, 0.72);
        border-radius: 7px;
        background: rgba(217, 171, 79, 0.1);
        color: var(--gold-1);
        font: inherit;
        font-size: 0.59rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        white-space: nowrap;
        cursor: pointer;
        transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
      }

      .nav-portfolio:hover,
      .nav-portfolio:focus-visible {
        border-color: var(--gold-1);
        background: rgba(217, 171, 79, 0.18);
        color: #fff8e7;
      }

      .cta-button,
      .button,
      .button.secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        padding: 0.85rem 1.4rem;
        border-radius: 999px;
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        font-weight: 800;
        text-transform: uppercase;
        transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
      }

      .cta-button,
      .button.primary {
        background: linear-gradient(135deg, rgba(247, 225, 155, 0.95), rgba(217, 171, 79, 0.9));
        color: #111317;
        border: 1px solid rgba(247, 225, 155, 0.9);
        box-shadow: 0 12px 35px rgba(201, 166, 101, 0.2);
      }

      .button.secondary {
        background: transparent;
        color: var(--text);
        border: 1px solid rgba(200, 169, 107, 0.4);
      }

      .cta-button:hover,
      .button:hover,
      .button:focus-visible {
        transform: translateY(-1px);
      }

      .floating-actions {
        position: fixed;
        right: 1.5rem;
        bottom: 1.5rem;
        z-index: 60;
        width: 3.75rem;
        height: 3.75rem;
        overflow: hidden;
        border: 1px solid rgba(244, 222, 155, 0.82);
        border-radius: 50%;
        background: linear-gradient(145deg, #f4de9b, #b9822c);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42), 0 0 24px rgba(217, 171, 79, 0.2);
        transition:
          width 0.35s cubic-bezier(0.2, 0.75, 0.25, 1),
          height 0.35s cubic-bezier(0.2, 0.75, 0.25, 1),
          border-radius 0.35s ease,
          box-shadow 0.25s ease;
      }

      .floating-actions.is-open {
        width: min(22rem, calc(100vw - 2rem));
        height: 21rem;
        border-radius: 20px;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 32px rgba(217, 171, 79, 0.14);
      }

      .floating-trigger {
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1;
        display: grid;
        width: 3.75rem;
        height: 3.75rem;
        place-items: center;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #17120a;
        cursor: pointer;
        transition:
          border-radius 0.35s ease,
          background 0.2s ease,
          color 0.2s ease,
          width 0.35s ease,
          height 0.35s ease;
      }

      .floating-trigger:focus-visible {
        outline: 2px solid #fff8e7;
        outline-offset: -5px;
      }

      .floating-actions.is-open .floating-trigger {
        background: rgba(244, 222, 155, 0.12);
        color: var(--gold-1);
      }

      .floating-trigger svg {
        width: 1.65rem;
        height: 1.65rem;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.7;
      }

      .floating-artwork {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        background:
          radial-gradient(ellipse at 50% 42%, rgba(217, 171, 79, 0.25), transparent 58%),
          linear-gradient(150deg, #28251f, #111214 66%);
        transition: opacity 0.3s ease, visibility 0.3s ease;
      }

      .floating-actions.is-open .floating-artwork,
      .floating-actions.is-open .floating-content {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
      }

      .floating-artwork::after {
        position: absolute;
        inset: 30% 0 0;
        background: linear-gradient(180deg, transparent 0%, rgba(13, 14, 16, 0.24) 32%, #111214 100%);
        content: "";
        pointer-events: none;
      }

      .floating-artwork img {
        position: absolute;
        top: 0.25rem;
        left: 50%;
        width: min(100%, 21rem);
        height: 13rem;
        object-fit: contain;
        object-position: center bottom;
        transform: translateX(-50%);
        filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.32));
      }

      .floating-content {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        gap: 0.85rem;
        padding: 1rem 4.75rem 1.15rem 1.2rem;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transform: translateY(0.5rem);
        transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
      }

      .floating-eyebrow {
        margin: 0 0 0.35rem;
        color: #d9ab4f;
        font-size: 0.54rem;
        font-weight: 700;
        letter-spacing: 0.18em;
      }

      .floating-title {
        margin: 0;
        color: #fff;
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: 1.65rem;
        font-weight: 700;
        line-height: 1.05;
      }

      .floating-description {
        max-width: 18rem;
        margin: 0.4rem 0 0;
        color: rgba(245, 243, 239, 0.68);
        font-size: 0.7rem;
        line-height: 1.5;
      }

      .floating-appointment {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
        min-height: 2.7rem;
        padding: 0.65rem 0.9rem;
        border: 1px solid rgba(244, 222, 155, 0.72);
        border-radius: 7px;
        background: linear-gradient(135deg, #f4de9b, #d9ab4f);
        color: #17120a;
        font-size: 0.67rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .floating-appointment:hover,
      .floating-appointment:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(217, 171, 79, 0.22);
      }

      .nav-toggle {
        display: none;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(255,255,255,0.02);
        border: 1px solid rgba(255,255,255,0.09);
        color: var(--text);
        cursor: pointer;
      }

      .nav-calculator {
        display: none;
      }

      .hamburger {
        position: relative;
        width: 18px;
        height: 2px;
        background: var(--text);
        display: block;
        margin: 0 auto;
      }

      .hamburger::before,
      .hamburger::after {
        content: "";
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        background: var(--text);
        transition: transform 0.25s ease;
      }

      .hamburger::before { top: -6px; }
      .hamburger::after { top: 6px; }

      .nav-toggle[aria-expanded="true"] .hamburger {
        background: transparent;
      }

      .nav-toggle[aria-expanded="true"] .hamburger::before {
        transform: translateY(6px) rotate(45deg);
      }

      .nav-toggle[aria-expanded="true"] .hamburger::after {
        transform: translateY(-6px) rotate(-45deg);
      }

      main {
        overflow: clip;
      }

      .loading-screen {
        position: fixed;
        inset: 0;
        background: #000;
        z-index: 100;
        display: grid;
        place-items: center;
        transition: opacity 0.8s ease, visibility 0.8s ease;
      }

      .loading-screen.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }

      .loading-screen::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at center, rgba(182, 149, 72, 0.12), transparent 30%),
          linear-gradient(180deg, rgba(255,255,255,0.02), transparent 38%, rgba(0,0,0,0.18));
      }

      .loading-content {
        position: relative;
        text-align: center;
        width: min(90vw, 1000px);
      }

      .loading-title {
        margin: 0;
        color: var(--gold-1);
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: clamp(2.5rem, 7vw, 5.5rem);
        font-weight: 500;
        line-height: 1;
        text-shadow: 0 0 34px rgba(223, 178, 80, 0.2);
        opacity: 0;
        transform: translateY(25px);
        animation: fadeUp 0.9s ease forwards;
      }

      .loading-caption {
        margin: 0.9rem 0 0;
        color: rgba(245, 243, 239, 0.64);
        font-size: 0.68rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
      }

      .loading-progress {
        width: min(52vw, 600px);
        height: 1px;
        margin: 2rem auto 1rem;
        background: rgba(255,255,255,0.1);
        position: relative;
        overflow: hidden;
        box-shadow: 0 0 18px rgba(214, 176, 98, 0.18);
      }

      .loading-progress-bar {
        position: absolute;
        inset: 0 auto 0 0;
        width: 0%;
        background: linear-gradient(90deg, rgba(245, 217, 131, 0.45), rgba(245, 217, 131, 1), rgba(189, 132, 38, 0.85));
        box-shadow: 0 0 20px rgba(218, 165, 74, 0.8);
        transition: width 0.35s ease;
      }

      .loading-progress-bar.is-indeterminate {
        width: 35%;
        animation: loadingProgressIndeterminate 1.2s ease-in-out infinite alternate;
      }

      @keyframes loadingProgressIndeterminate {
        from { transform: translateX(-20%); }
        to { transform: translateX(205%); }
      }

      .loading-status {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.7rem;
        font-size: 0.76rem;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: rgba(245, 243, 239, 0.7);
      }

      .loading-percent {
        color: var(--gold-1);
        font-weight: 700;
      }

      .loading-message {
        margin-top: 0.9rem;
        min-height: 1.5em;
        color: rgba(247, 221, 150, 0.8);
        letter-spacing: 0.08em;
        font-size: 0.74rem;
        text-transform: uppercase;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.45s ease, transform 0.45s ease;
      }

      .loading-message.visible {
        opacity: 1;
        transform: translateY(0);
      }

      .hero {
        position: relative;
      }

      .hero-scene {
        position: relative;
        height: 760vh;
        background: var(--bg);
      }

      .video-stage {
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100svh;
        width: 100%;
        overflow: hidden;
        background: var(--bg);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .intro-screen {
        position: absolute;
        inset: 0;
        z-index: 10;
        display: grid;
        place-items: center;
        overflow: hidden;
        background:
          radial-gradient(ellipse at 50% 43%, rgba(200, 146, 55, 0.17), transparent 34%),
          radial-gradient(ellipse at 50% 100%, rgba(135, 85, 24, 0.13), transparent 45%),
          linear-gradient(145deg, #101114 0%, #050607 58%, #0d0c09 100%);
        transform: translate3d(0, var(--intro-translate, 0%), 0);
        will-change: transform;
      }

      .intro-screen::before,
      .intro-screen::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(78vw, 540px);
        aspect-ratio: 1;
        border: 1px solid rgba(226, 184, 101, 0.2);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: introOrbit 18s linear infinite;
      }

      .intro-screen::after {
        width: min(62vw, 420px);
        border-color: rgba(226, 184, 101, 0.12);
        animation-direction: reverse;
        animation-duration: 24s;
      }

      .intro-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: min(90vw, 680px);
        text-align: center;
        animation: introArrive 1s cubic-bezier(0.2, 0.75, 0.25, 1) both;
      }

      .intro-eyebrow {
        margin: 0 0 1.15rem;
        color: var(--gold-1);
        font-size: 0.66rem;
        font-weight: 600;
        letter-spacing: 0.32em;
        text-transform: uppercase;
      }

      .intro-title {
        margin: 0;
        color: #fff8e7;
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: clamp(3.2rem, 8vw, 6.8rem);
        font-weight: 500;
        line-height: 0.92;
        text-shadow: 0 0 36px rgba(223, 178, 80, 0.18);
      }

      .intro-title em {
        color: var(--gold-1);
        font-weight: 500;
      }

      .intro-prompt {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.55rem;
        margin-top: clamp(2.5rem, 8vh, 4.5rem);
        color: rgba(255, 248, 231, 0.9);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        animation: promptPulse 1.8s ease-in-out infinite;
      }

      .intro-prompt::after {
        content: "";
        width: 1px;
        height: 36px;
        background: linear-gradient(180deg, #f4de9b, transparent);
      }

      .intro-screen.is-dismissed {
        pointer-events: none;
      }

      @keyframes introOrbit {
        to { rotate: 360deg; }
      }

      @keyframes introArrive {
        from { opacity: 0; transform: translateY(20px); filter: blur(8px); }
        to { opacity: 1; transform: translateY(0); filter: blur(0); }
      }

      @keyframes promptPulse {
        0%, 100% { opacity: 0.58; transform: translateY(0); }
        50% { opacity: 1; transform: translateY(-5px); }
      }

      .video-frame {
        position: absolute;
        inset: 0;
        background: #08090b;
        overflow: hidden;
        transition: filter 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
      }

      .video-frame.media-fallback {
        background:
          radial-gradient(ellipse at 50% 45%, rgba(169, 124, 47, 0.2), transparent 52%),
          linear-gradient(145deg, #111317, #030405 72%);
      }

      .video-frame canvas {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: saturate(0.9) contrast(1.06) brightness(1);
        transform: scale(1.015);
      }

      .video-frame video {
        position: absolute;
        width: 1px;
        height: 1px;
        left: -2px;
        top: 0;
        opacity: 0;
        pointer-events: none;
      }

      .video-frame.canvas-fallback video.ready {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
        object-fit: cover;
        filter: saturate(0.9) contrast(1.06) brightness(1);
        transform: scale(1.015);
      }

      .experience-endcard {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: grid;
        place-items: center;
        padding: 2rem;
        text-align: center;
        background:
          radial-gradient(ellipse at center, rgba(200, 169, 107, 0.09), transparent 50%),
          var(--bg);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
      }

      .experience-endcard-content {
        width: min(90vw, 820px);
      }

      .experience-endcard p {
        margin: 0 0 1rem;
        color: var(--gold-1);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.3em;
        text-transform: uppercase;
      }

      .experience-endcard h2 {
        margin: 0;
        color: #fff8e7;
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: clamp(2.8rem, 7vw, 6rem);
        font-weight: 500;
        line-height: 0.98;
      }

      .experience-endcard h2 em {
        color: var(--gold-1);
        font-weight: 500;
      }

      .experience-endcard span {
        display: block;
        width: 52px;
        height: 1px;
        margin: 1.7rem auto 0;
        background: linear-gradient(90deg, transparent, var(--gold-1), transparent);
      }

      .video-stage.timeline-complete .experience-endcard {
        opacity: var(--endcard-progress, 0);
      }

      .hero-copy {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: clamp(5rem, 12vh, 9rem);
        text-align: center;
        pointer-events: none;
        transition: opacity 0.35s ease;
      }

      .hero-copy-inner {
        width: min(90vw, 980px);
      }

      .message-item {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 12px);
        width: min(90vw, 900px);
        opacity: 0;
        transition: opacity 0.5s ease, transform 0.55s ease;
        text-shadow:
          0 2px 4px rgba(0, 0, 0, 0.95),
          0 6px 18px rgba(0, 0, 0, 0.8),
          0 0 30px rgba(0, 0, 0, 0.55);
      }

      .message-item.visible {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      .message-item p {
        margin: 0;
        display: inline-block;
        padding: 0.12em 0.36em 0.2em;
        border: 1px solid transparent;
        border-radius: 0.18em;
        background-image:
          linear-gradient(90deg, #f5d88d 0%, #dca93b 45%, #f5d88d 100%),
          linear-gradient(rgba(5, 6, 8, 0.76), rgba(5, 6, 8, 0.76)),
          linear-gradient(90deg, #f5d88d 0%, #dca93b 45%, #f5d88d 100%);
        background-origin: border-box;
        background-clip: text, padding-box, border-box;
        -webkit-background-clip: text, padding-box, border-box;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.65);
        font-family: 'Inter', sans-serif;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1.25;
        text-transform: uppercase;
        color: transparent;
        text-shadow: 0 0 18px rgba(223, 178, 80, 0.12);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        font-size: clamp(1.2rem, 2.5vw, 2rem);
      }

      .message-item small {
        display: inline-block;
        margin-top: 0.65rem;
        color: rgba(255, 248, 231, 0.92);
        -webkit-text-stroke: 0.35px rgba(20, 16, 10, 0.8);
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        font-size: 0.7rem;
      }

      .hero-scroll {
        position: absolute;
        left: 50%;
        bottom: clamp(1.5rem, 4vh, 3rem);
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.65rem;
        color: rgba(255,255,255,0.8);
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.24em;
        z-index: 3;
        transition: opacity 0.3s ease;
      }

      .film-progress {
        width: clamp(110px, 18vw, 190px);
        height: 2px;
        overflow: hidden;
        background: rgba(255,255,255,0.24);
      }

      .film-progress span {
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, var(--gold-2), var(--gold-1));
        transform: scaleX(0);
        transform-origin: left center;
      }

      .scroll-indicator {
        width: 1px;
        height: 46px;
        background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.4), rgba(255,255,255,0));
        position: relative;
        overflow: hidden;
      }

      .scroll-indicator::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold-1);
        transform: translateX(-50%);
        box-shadow: 0 0 20px rgba(245, 216, 141, 0.75);
        animation: scrollPulse 1.8s ease-in-out infinite;
      }

      @keyframes scrollPulse {
        0% { transform: translate(-50%, -10px); opacity: 0; }
        20% { opacity: 1; }
        100% { transform: translate(-50%, 34px); opacity: 0; }
      }

      .content-section {
        padding: 7.5rem 0;
      }

      .section-label {
        color: var(--gold-1);
        letter-spacing: 0.22em;
        font-size: 0.76rem;
        font-weight: 700;
        text-transform: uppercase;
      }

      .heading-block {
        margin-top: 1rem;
        display: grid;
        gap: 1rem;
      }

      .heading-block h2 {
        margin: 0;
        font-size: clamp(2.5rem, 4vw, 4rem);
        line-height: 1.04;
        letter-spacing: -0.05em;
        max-width: 540px;
      }

      .heading-block p {
        margin: 0;
        color: var(--muted);
        max-width: 710px;
        font-size: 1.05rem;
      }

      .portfolio-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
        margin-top: 3rem;
      }

      .project-card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 540px;
        padding: 1.2rem;
        border-radius: 24px;
        overflow: hidden;
        background: #101316;
        border: 1px solid rgba(255,255,255,0.04);
        box-shadow: 0 20px 48px rgba(0,0,0,0.18);
      }

      .project-image {
        position: absolute;
        inset: 0;
        overflow: hidden;
      }

      .project-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.04);
        transition: transform 0.7s ease;
      }

      .project-card:hover .project-image img,
      .project-card:focus-within .project-image img {
        transform: scale(1.12);
      }

      .project-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(6,7,8,0.08), rgba(6,7,8,0.18) 35%, rgba(6,7,8,0.82));
      }

      .project-meta {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 0.75rem;
      }

      .project-tag {
        display: inline-flex;
        padding: 0.45rem 0.8rem;
        border-radius: 999px;
        background: rgba(13, 16, 18, 0.38);
        border: 1px solid rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.85);
        font-size: 0.62rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        backdrop-filter: blur(2px);
      }

      .project-arrow {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.22);
        background: rgba(10,12,14,0.28);
        color: white;
        transform: translateX(-5px);
        transition: transform 0.25s ease, border-color 0.25s ease;
      }

      .project-card:hover .project-arrow,
      .project-card:focus-within .project-arrow {
        transform: translateX(0);
        border-color: rgba(247, 220, 136, 0.7);
      }

      .brand-section {
        background: linear-gradient(180deg, rgba(8, 9, 11, 0), rgba(17,19,23,0.5) 8%, rgba(17,19,23,0.95));
      }

      .brand-layout {
        display: grid;
        grid-template-columns: 1.1fr 1.2fr;
        gap: 3rem;
        align-items: center;
      }

      .brand-visual {
        display: grid;
        place-items: center;
        padding: 2rem 1rem;
      }

      .brand-visual-shell {
        width: min(100%, 580px);
        display: grid;
        place-items: center;
        text-align: center;
      }

      .brand-visual img {
        width: min(100%, 520px);
        filter: drop-shadow(0 20px 50px rgba(200, 169, 107, 0.18));
      }

      .brand-copy {
        display: grid;
        gap: 1.25rem;
      }

      .brand-copy h3 {
        margin: 0;
        font-size: clamp(2.2rem, 4vw, 4rem);
        line-height: 0.98;
        letter-spacing: -0.06em;
      }

      .brand-copy p {
        margin: 0;
        color: var(--muted);
        font-size: 1.04rem;
      }

      .service-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 0.6rem;
      }

      .service-item {
        padding: 1.2rem 1rem 1.1rem;
        border: 1px solid rgba(255,255,255,0.06);
        background: rgba(255,255,255,0.015);
        border-radius: 18px;
      }

      .service-item h4 {
        margin: 0 0 0.55rem;
        font-size: 1.1rem;
        letter-spacing: -0.04em;
      }

      .service-item p {
        margin: 0;
        color: var(--muted);
        font-size: 0.95rem;
      }

      .cta-panel {
        padding-top: 0;
      }

      .cta-panel-inner {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(200, 169, 107, 0.25);
        background:
          radial-gradient(circle at top right, rgba(200, 169, 107, 0.16), transparent 38%),
          rgba(17, 19, 23, 0.8);
        border-radius: 32px;
        padding: clamp(1.6rem, 5vw, 4rem);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
      }

      .cta-panel-inner::before {
        content: "";
        position: absolute;
        inset: 0 auto auto 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(245, 216, 141, 0.65), transparent);
      }

      .cta-copy {
        max-width: 620px;
      }

      .cta-copy h3 {
        margin: 0 0 0.5rem;
        font-size: clamp(2rem, 4vw, 3.5rem);
        line-height: 1.02;
        letter-spacing: -0.06em;
      }

      .cta-copy p {
        margin: 0;
        color: var(--muted);
        font-size: 1.02rem;
      }

      .cta-actions {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
      }

      footer.site-footer {
        border-top: 1px solid rgba(255,255,255,0.06);
        padding: 2.2rem 0 3.25rem;
      }

      .footer-inner {
        display: grid;
        gap: 2rem;
      }

      .footer-top {
        display: flex;
        justify-content: space-between;
        gap: 2rem;
        align-items: flex-start;
      }

      .footer-brand {
        display: grid;
        gap: 0.7rem;
      }

      .footer-brand strong {
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 1.1rem;
      }

      .footer-brand span {
        color: var(--muted);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        font-size: 0.68rem;
      }

      .footer-socials {
        display: flex;
        gap: 0.65rem;
      }

      .footer-socials a {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 50%;
        color: var(--muted);
        transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
      }

      .footer-socials a:hover,
      .footer-socials a:focus-visible {
        border-color: var(--gold-4);
        background: rgba(217,171,79,0.08);
        color: var(--gold-1);
      }

      .footer-socials a:focus-visible {
        outline: 2px solid var(--gold-1);
        outline-offset: 3px;
      }

      .footer-socials svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
      }

      .footer-socials a:first-child svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
      }

      .footer-details {
        display: grid;
        gap: 0.35rem;
        color: var(--muted);
        font-size: 0.96rem;
      }

      .footer-nav {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
      }

      .footer-nav a {
        color: var(--muted);
        font-size: 0.8rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .footer-bottom {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: center;
        flex-wrap: wrap;
        border-top: 1px solid rgba(255,255,255,0.06);
        padding-top: 1.25rem;
      }

      .footer-meta {
        color: var(--muted);
        font-size: 0.85rem;
      }

      .footer-top-link {
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--gold-1);
      }

      .projects-page .hero-scene,
      .interiors-page .hero-scene {
        height: 620vh;
      }

      .projects-page .projects-video,
      .interiors-page .projects-video {
        transition: opacity 0.25s linear;
        will-change: opacity;
      }

      .projects-page .projects-video video,
      .interiors-page .projects-video video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1;
        pointer-events: none;
      }

      .projects-loading-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.8rem;
        margin-top: 1.5rem;
      }

      .projects-loading-actions[hidden] {
        display: none;
      }

      .projects-loading-actions button {
        cursor: pointer;
      }

      .projects-page .video-stage,
      .interiors-page .video-stage {
        isolation: isolate;
      }

      .projects-page .hero-scroll,
      .interiors-page .hero-scroll {
        pointer-events: none;
      }

      .projects-gallery {
        padding-top: clamp(5rem, 10vw, 9rem);
        padding-bottom: clamp(5rem, 10vw, 9rem);
      }

      .projects-gallery .section-label {
        margin-bottom: 1.2rem;
      }

      .projects-gallery .heading-block {
        max-width: 780px;
      }

      .projects-gallery .portfolio-grid {
        align-items: start;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.15rem;
        margin-top: 3.5rem;
      }

      .projects-gallery .project-card {
        display: block;
        min-height: 0;
        padding: 0;
        border-radius: 18px;
      }

      .projects-gallery .project-image {
        position: relative;
        inset: auto;
        height: auto;
      }

      .projects-gallery .project-image img {
        height: auto;
        object-fit: initial;
      }

      .projects-gallery .project-meta {
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
      }

      .projects-gallery .project-tag {
        max-width: calc(100% - 48px);
        white-space: normal;
        line-height: 1.5;
      }

      .interiors-gallery {
        min-height: 100vh;
      }

      .interiors-gallery .heading-block h2 {
        color: #fff8e7;
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: clamp(2.6rem, 6vw, 5rem);
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 1;
        text-transform: uppercase;
      }

      .interiors-gallery .portfolio-grid {
        display: block;
        columns: 3;
        column-gap: 1.15rem;
      }

      .interiors-gallery .project-card {
        display: inline-block;
        width: 100%;
        margin: 0 0 1.15rem;
        overflow: hidden;
        break-inside: avoid;
        border: 1px solid rgba(200, 169, 107, 0.2);
        background: rgba(17, 19, 23, 0.74);
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.25);
      }

      .interiors-gallery .project-image {
        position: relative;
        inset: auto;
        height: auto;
        overflow: hidden;
        background: #111317;
      }

      .interiors-gallery .project-image img {
        width: 100%;
        height: auto;
        object-fit: initial;
        transform: none;
        transition: transform 0.7s ease;
      }

      .interiors-gallery .project-card:hover .project-image img,
      .interiors-gallery .project-card:focus-within .project-image img {
        transform: scale(1.035);
      }

      .interiors-gallery .project-image::after {
        display: none;
      }

      .interiors-gallery .project-meta {
        position: static;
        padding: 0.85rem 1rem;
      }

      .interiors-gallery .project-tag {
        max-width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--gold-1);
        font-size: 0.65rem;
        letter-spacing: 0.14em;
      }

      .interiors-gallery .project-arrow {
        width: 30px;
        height: 30px;
        flex: 0 0 auto;
      }

      @keyframes fadeUp {
        0% {
          opacity: 0;
          transform: translateY(22px);
          filter: blur(7px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
          filter: blur(0);
        }
      }

      @media (max-width: 980px) {
        header.site-header {
          height: 72px;
        }

        .nav {
          position: absolute;
          top: calc(100% + 0.75rem);
          right: 1rem;
          left: 1rem;
          display: none;
          flex-direction: column;
          align-items: flex-start;
          padding: 1rem 1.2rem;
          background: rgba(10, 12, 14, 0.9);
          border: 1px solid rgba(255,255,255,0.06);
          border-radius: 20px;
          box-shadow: 0 16px 36px rgba(0,0,0,0.26);
        }

        .nav.open {
          display: flex;
        }

        .nav a {
          width: 100%;
          padding: 0.35rem 0;
          text-align: left;
        }

        .nav-actions {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .nav-toggle {
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }

        .nav-calculator {
          display: inline-flex;
          min-height: 44px;
          align-items: center;
          justify-content: center;
          gap: 0.4rem;
          margin-left: auto;
          padding: 0 0.65rem;
          border: 1px solid rgba(217, 171, 79, 0.66);
          border-radius: 7px;
          background: rgba(217, 171, 79, 0.1);
          color: var(--gold-1);
          font-size: 0.62rem;
          font-weight: 800;
          letter-spacing: 0.08em;
          white-space: nowrap;
        }

        .nav-calculator svg {
          width: 17px;
          height: 17px;
          flex: 0 0 auto;
          fill: none;
          stroke: currentColor;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 1.7;
        }

        .nav-toggle {
          margin-left: 0.45rem;
        }

        .nav .nav-cta {
          display: none;
        }

        .nav .nav-consultant {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 2.55rem;
          padding: 0.65rem 0.9rem;
          border: 1px solid rgba(217, 171, 79, 0.72);
          border-radius: 7px;
          background: rgba(217, 171, 79, 0.1);
          color: var(--gold-1);
          font-size: 0.63rem;
          font-weight: 800;
          letter-spacing: 0.1em;
          white-space: nowrap;
          text-align: center;
        }

        .nav .nav-consultant::after {
          display: none;
        }

        .site-header .cta-button {
          display: none;
        }

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

        .projects-gallery .portfolio-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .brand-layout,
        .cta-panel-inner {
          grid-template-columns: 1fr;
          display: grid;
        }

        .brand-layout {
          gap: 2rem;
        }

        .service-list {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 640px) {
        .floating-actions {
          right: 1rem;
          bottom: 1rem;
        }

        .floating-actions.is-open {
          width: min(21rem, calc(100vw - 2rem));
          height: 20rem;
          border-radius: 17px;
        }

        .floating-content {
          padding: 0.9rem 4.5rem 1rem 1rem;
          gap: 0.7rem;
        }

        .floating-title {
          font-size: 1.45rem;
        }

        .floating-description {
          max-width: 16rem;
          font-size: 0.66rem;
        }

        .brand {
          gap: 0.7rem;
        }

        .brand-mark {
          width: 32px;
          height: 32px;
        }

        .hero-scene {
          height: 680vh;
        }

        .intro-screen::before {
          width: 92vw;
        }

        .intro-screen::after {
          width: 74vw;
        }

        .hero-copy {
          padding-top: 4rem;
        }

        .message-item p {
          font-size: clamp(1.65rem, 7vw, 2.5rem);
        }

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

        .projects-page .hero-scene,
        .interiors-page .hero-scene {
          height: 520vh;
        }

        .projects-gallery .portfolio-grid {
          grid-template-columns: 1fr;
          gap: 1rem;
        }

        .interiors-gallery .portfolio-grid {
          columns: 1;
        }

        .projects-gallery .project-card {
          min-height: 0;
          grid-row: auto;
        }

        .project-card {
          min-height: 430px;
        }

        .cta-actions {
          width: 100%;
        }

        .cta-actions a {
          width: 100%;
        }

        .footer-top {
          flex-direction: column;
        }
      }

      @media (max-width: 480px) {
        .nav-wrap {
          gap: 0.5rem;
        }

        .brand {
          flex: 0 0 auto;
        }

        .brand-text {
          display: inline-block;
        }

        .nav-calculator {
          flex: 0 0 auto;
          margin-left: auto;
          width: 44px;
          padding: 0;
        }

        .nav-calculator span {
          display: none;
        }

        .nav-toggle {
          flex: 0 0 44px;
          margin-left: 0.15rem;
        }
      }

      @media (max-width: 640px), (pointer: coarse) and (hover: none) {
        .hero-copy {
          display: none;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        * {
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.001ms !important;
          scroll-behavior: auto !important;
        }
      }

      .mobile-story-hero {
        display: none;
      }

      @media (max-width: 767px), (pointer: coarse) and (hover: none) {
        .loading-screen {
          display: none !important;
        }

        .home-page .hero,
        .projects-page .hero,
        .interiors-page .hero {
          display: none;
        }

        .mobile-story-hero {
          position: relative;
          isolation: isolate;
          display: grid;
          align-items: end;
          box-sizing: border-box;
          min-height: max(560px, 100svh);
          padding: max(6.5rem, 15vh) 1.25rem 1.7rem;
          overflow: hidden;
          background: #101113;
          color: #fff8e7;
        }

        .mobile-story-hero::before,
        .mobile-story-hero::after {
          position: absolute;
          inset: 0;
          z-index: -1;
          content: "";
        }

        .mobile-story-hero::before {
          background-position: center;
          background-size: cover;
          animation: mobileStoryImage 1.2s ease-out both;
        }

        .mobile-story-hero::after {
          background:
            linear-gradient(180deg, rgba(7, 8, 10, 0.08) 8%, rgba(7, 8, 10, 0.2) 32%, rgba(7, 8, 10, 0.89) 76%, #0c0d0f 100%),
            linear-gradient(90deg, rgba(7, 8, 10, 0.24), transparent 70%);
        }

        .mobile-story-home::before {
          background-image: url("/assets/mobile-cover-construction.jpg");
          background-position: center;
        }

        .mobile-story-projects::before {
          background-image: url("/assets/mobile-cover-projects.jpg");
          background-position: center;
        }

        .mobile-story-construction::before {
          background-image: url("/assets/mobile-cover-construction.jpg");
          background-position: center;
        }

        .mobile-story-home::after {
          background:
            linear-gradient(180deg, rgba(7, 8, 10, 0.06) 8%, rgba(7, 8, 10, 0.2) 32%, rgba(7, 8, 10, 0.89) 76%, #0c0d0f 100%),
            linear-gradient(90deg, rgba(7, 8, 10, 0.3), transparent 72%);
        }

        .mobile-story-projects::after {
          background:
            linear-gradient(180deg, rgba(8, 13, 14, 0.1) 0%, rgba(8, 13, 14, 0.08) 35%, rgba(8, 13, 14, 0.88) 78%, #0c0f10 100%),
            linear-gradient(115deg, rgba(8, 13, 14, 0.42), transparent 70%);
        }

        .mobile-story-construction::after {
          background:
            linear-gradient(180deg, rgba(10, 12, 10, 0.14) 0%, rgba(10, 12, 10, 0.18) 30%, rgba(10, 12, 10, 0.9) 77%, #0d100e 100%),
            linear-gradient(90deg, rgba(10, 12, 10, 0.36), transparent 76%);
        }

        .mobile-story-projects .mobile-story-kicker {
          color: #b6d6c6;
        }

        .mobile-story-projects .mobile-story-content h1 em {
          color: #b6d6c6;
        }

        .mobile-story-projects .mobile-story-primary {
          border-color: rgba(182, 214, 198, 0.75);
          color: #ecfff4;
        }

        .mobile-story-projects .mobile-story-primary span {
          color: #b6d6c6;
        }

        .mobile-story-projects {
          align-items: center;
        }

        .mobile-story-projects .mobile-story-content {
          margin: auto 0;
          padding: 1.35rem 0.9rem 1.5rem 1rem;
          border-left: 1px solid rgba(182, 214, 198, 0.62);
          background: linear-gradient(90deg, rgba(8, 13, 14, 0.36), transparent);
        }

        .mobile-story-construction .mobile-story-kicker,
        .mobile-story-construction .mobile-story-content h1 em {
          color: #e5b884;
        }

        .mobile-story-construction .mobile-story-primary {
          border-color: rgba(229, 184, 132, 0.76);
          background: rgba(23, 18, 12, 0.66);
        }

        .mobile-story-construction .mobile-story-primary span {
          color: #e5b884;
        }

        .mobile-story-construction .mobile-story-kicker {
          align-items: flex-start;
          flex-direction: column;
          gap: 0.45rem;
        }

        .mobile-story-construction .mobile-story-kicker::before {
          width: 2rem;
          height: 2px;
        }

        .mobile-story-interiors {
          min-height: max(650px, 100svh);
          align-items: end;
          padding: max(6rem, 12vh) 1.1rem 1.5rem;
          background: #0e1115;
          color: #fff8e7;
        }

        .mobile-story-interiors::before {
          inset: 0;
          background-image: url("/assets/mobile-cover-interiors.jpg");
          background-position: center;
          background-size: cover;
          animation: mobileStoryImage 1.2s ease-out both;
        }

        .mobile-story-interiors::after {
          background: linear-gradient(180deg, rgba(10, 12, 14, 0.08) 0%, rgba(10, 12, 14, 0.18) 30%, rgba(9, 11, 13, 0.9) 72%, #0d1014 100%);
        }

        .mobile-story-interiors .mobile-story-content {
          width: min(100%, 34rem);
          padding: 0.2rem 0.3rem 0;
        }

        .mobile-story-interiors .mobile-story-kicker {
          color: #f0d48d;
        }

        .mobile-story-interiors .mobile-story-kicker::before {
          background: #d3a94d;
        }

        .mobile-story-interiors .mobile-story-content h1,
        .mobile-story-interiors .mobile-story-content h1 em {
          color: #fff8e7;
        }

        .mobile-story-interiors .mobile-story-content h1 em {
          color: #edcc79;
        }

        .mobile-story-interiors .mobile-story-description {
          color: rgba(255, 248, 231, 0.82);
        }

        .mobile-story-interiors .mobile-story-primary {
          border-color: rgba(241, 211, 134, 0.72);
          background: rgba(16, 17, 19, 0.72);
          color: #fff4d2;
        }

        .mobile-story-interiors .mobile-story-primary span {
          color: #edcc79;
        }

        .mobile-story-interiors .mobile-story-secondary {
          color: rgba(255, 248, 231, 0.88);
          text-decoration-color: rgba(237, 204, 121, 0.65);
        }

        .mobile-story-interiors .mobile-story-footnote {
          border-color: rgba(255, 248, 231, 0.24);
          color: rgba(255, 248, 231, 0.62);
        }

        .interiors-gallery {
          padding: 4.5rem 0 5rem;
          background: #0e1115;
          color: #fff8e7;
        }

        .interiors-gallery .section-label {
          color: var(--gold-1);
        }

        .interiors-gallery .heading-block h2 {
          color: #fff8e7;
          font-size: clamp(2.35rem, 11vw, 3.2rem);
          line-height: 0.98;
          text-transform: none;
        }

        .interiors-gallery .heading-block p {
          color: var(--muted);
        }

        .interiors-gallery .portfolio-grid {
          columns: 2;
          column-gap: 0.65rem;
          margin-top: 2rem;
        }

        .interiors-gallery .project-card {
          margin-bottom: 0.65rem;
          border: 1px solid rgba(200, 169, 107, 0.18);
          border-radius: 5px;
          background: rgba(17, 19, 23, 0.82);
          box-shadow: 0 5px 18px rgba(0, 0, 0, 0.22);
        }

        .interiors-gallery .project-meta {
          padding: 0.65rem 0.7rem;
        }

        .interiors-gallery .project-tag {
          color: var(--gold-1);
          font-size: 0.56rem;
          letter-spacing: 0.08em;
        }

        .interiors-gallery .project-arrow {
          width: 25px;
          height: 25px;
          border-color: rgba(200, 169, 107, 0.3);
          color: var(--gold-1);
        }

        .mobile-story-content {
          width: min(100%, 34rem);
          margin-inline: auto;
          animation: mobileStoryContent 0.8s 0.1s cubic-bezier(0.2, 0.75, 0.25, 1) both;
        }

        .mobile-story-kicker {
          display: flex;
          align-items: center;
          gap: 0.65rem;
          margin: 0 0 1.1rem;
          color: #f0d48d;
          font-size: 0.66rem;
          font-weight: 700;
          letter-spacing: 0.2em;
          line-height: 1.5;
          text-transform: uppercase;
        }

        .mobile-story-kicker::before {
          width: 1.5rem;
          height: 1px;
          flex: 0 0 auto;
          background: #d3a94d;
          content: "";
        }

        .mobile-story-content h1 {
          max-width: 12ch;
          margin: 0;
          color: #fff8e7;
          font-family: 'Cormorant Garamond', Georgia, serif;
          font-size: 3rem;
          font-weight: 500;
          line-height: 0.94;
          text-wrap: balance;
        }

        .mobile-story-content h1 em {
          color: #edcc79;
          font-weight: 500;
        }

        .mobile-story-description {
          max-width: 29rem;
          margin: 1.1rem 0 0;
          color: rgba(255, 248, 231, 0.82);
          font-size: 0.98rem;
          line-height: 1.65;
        }

        .mobile-story-actions {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 0.7rem 1.1rem;
          margin-top: 1.5rem;
        }

        .mobile-story-primary,
        .mobile-story-secondary {
          display: inline-flex;
          min-height: 48px;
          align-items: center;
          justify-content: center;
          gap: 0.7rem;
          font-size: 0.72rem;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
        }

        .mobile-story-primary {
          padding: 0.2rem 1rem;
          border: 1px solid rgba(241, 211, 134, 0.72);
          background: rgba(16, 17, 19, 0.62);
          color: #fff4d2;
        }

        .mobile-story-primary span {
          color: #edcc79;
          font-size: 1.1rem;
        }

        .mobile-story-secondary {
          color: rgba(255, 248, 231, 0.88);
          text-decoration: underline;
          text-decoration-color: rgba(237, 204, 121, 0.65);
          text-underline-offset: 5px;
        }

        .mobile-story-footnote {
          display: flex;
          justify-content: space-between;
          gap: 1rem;
          margin-top: 2rem;
          padding-top: 0.8rem;
          border-top: 1px solid rgba(255, 248, 231, 0.24);
          color: rgba(255, 248, 231, 0.62);
          font-size: 0.62rem;
          letter-spacing: 0.12em;
          line-height: 1.5;
          text-transform: uppercase;
        }

        .mobile-motion-ready .reveal-item {
          opacity: 0;
          transform: translate3d(0, 20px, 0);
          transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.75, 0.25, 1);
        }

        .mobile-motion-ready .reveal-item.mobile-revealed {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }

        .projects-page .hero-scene,
        .home-page .hero-scene {
          height: auto;
        }

        .projects-page .construction-intro-grid,
        .projects-page .construction-materials-layout {
          grid-template-columns: minmax(0, 1fr);
        }

        .projects-page .construction-intro-image,
        .projects-page .construction-materials-image {
          min-height: 300px;
        }

        .projects-page .construction-quality-grid {
          grid-template-columns: minmax(0, 1fr);
        }

      }

      @media (max-width: 350px) {
        .mobile-story-content h1 {
          font-size: 2.65rem;
        }

        .brand-text {
          display: none;
        }

        .mobile-story-footnote {
          font-size: 0.56rem;
          letter-spacing: 0.08em;
        }

        .interiors-gallery .portfolio-grid {
          columns: 1;
        }
      }

      @keyframes mobileStoryImage {
        from { transform: scale(1.045); }
        to { transform: scale(1); }
      }

      @keyframes mobileStoryContent {
        from { opacity: 0; transform: translate3d(0, 18px, 0); }
        to { opacity: 1; transform: translate3d(0, 0, 0); }
      }

      @media (prefers-reduced-motion: reduce) {
        .mobile-story-hero::before,
        .mobile-story-content {
          animation: none;
        }
      }

      .construction-intro {
        padding-top: clamp(5rem, 10vw, 9rem);
        padding-bottom: clamp(5rem, 10vw, 9rem);
      }

      .construction-intro-grid,
      .construction-materials-layout {
        display: grid;
        grid-template-columns: 1fr 0.95fr;
        align-items: center;
        gap: clamp(2.5rem, 7vw, 6rem);
      }

      .construction-intro-image,
      .construction-materials-image {
        position: relative;
        min-height: 460px;
        overflow: hidden;
        border: 1px solid rgba(200, 169, 107, 0.24);
        border-radius: 22px;
        background: var(--elevated);
      }

      .construction-intro-image img,
      .construction-materials-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .construction-image-caption {
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        padding: 0.9rem 1rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        background: rgba(8, 9, 11, 0.72);
        color: #fff8e7;
        font-size: 0.74rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        backdrop-filter: blur(10px);
      }

      .construction-intro-copy {
        display: grid;
        justify-items: start;
        gap: 1.2rem;
      }

      .construction-intro-copy h2,
      .construction-materials-copy h2,
      .construction-gallery-heading h2 {
        margin: 0;
        color: #fff8e7;
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: clamp(2.8rem, 5.4vw, 5rem);
        font-weight: 500;
        line-height: 0.98;
      }

      .construction-intro-copy h2 em {
        color: var(--gold-1);
        font-weight: 500;
      }

      .construction-intro-copy p,
      .construction-materials-copy > p {
        margin: 0;
        color: var(--muted);
        font-size: 0.98rem;
      }

      .text-link {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        margin-top: 0.6rem;
        color: var(--gold-1);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .text-link span {
        transition: transform 0.2s ease;
      }

      .text-link:hover span {
        transform: translateX(4px);
      }

      .construction-qualities {
        padding-top: clamp(4rem, 8vw, 7rem);
        padding-bottom: clamp(5rem, 9vw, 8rem);
        background: linear-gradient(180deg, rgba(17, 19, 23, 0.1), rgba(17, 19, 23, 0.8));
      }

      .construction-qualities .heading-block {
        max-width: 720px;
      }

      .construction-qualities .heading-block h2,
      .construction-journey .heading-block h2 {
        color: #fff8e7;
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: clamp(2.8rem, 5.6vw, 5rem);
        font-weight: 500;
        line-height: 0.98;
      }

      .construction-quality-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 3rem;
      }

      .construction-quality-card {
        min-height: 250px;
        padding: 1.5rem;
        border: 1px solid rgba(200, 169, 107, 0.2);
        border-radius: 16px;
        background: linear-gradient(145deg, rgba(25, 27, 32, 0.86), rgba(13, 15, 18, 0.7));
        transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
      }

      .construction-quality-card:hover {
        transform: translateY(-5px);
        border-color: rgba(244, 222, 155, 0.48);
        background: linear-gradient(145deg, rgba(35, 32, 25, 0.92), rgba(13, 15, 18, 0.8));
      }

      .quality-index,
      .construction-step > span {
        color: var(--gold-2);
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: 1.6rem;
      }

      .construction-quality-card h3,
      .construction-step h3 {
        margin: 1.8rem 0 0.55rem;
        color: #fff8e7;
        font-size: 1.1rem;
        letter-spacing: -0.025em;
      }

      .construction-quality-card p,
      .construction-step p {
        margin: 0;
        color: var(--muted);
        font-size: 0.88rem;
      }

      .construction-materials {
        padding: clamp(5rem, 9vw, 8rem) 0;
        background: rgba(5, 6, 8, 0.5);
      }

      .construction-materials-copy {
        display: grid;
        justify-items: start;
        gap: 1.2rem;
      }

      .construction-materials-copy h2 {
        max-width: 570px;
      }

      .construction-material-list {
        display: grid;
        gap: 1rem;
        width: 100%;
        margin: 0.5rem 0 0;
        padding: 0;
        list-style: none;
      }

      .construction-material-list li {
        display: grid;
        grid-template-columns: 1.4rem 1fr;
        gap: 0.65rem;
        color: var(--muted);
        font-size: 0.88rem;
      }

      .construction-material-list li > span:first-child {
        color: var(--gold-2);
      }

      .construction-material-list strong {
        color: #f5f3ef;
        font-weight: 600;
      }

      .construction-materials-image {
        min-height: 540px;
      }

      .materials-image-note {
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        background: rgba(8, 9, 11, 0.72);
        color: #fff8e7;
        font-size: 0.67rem;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        backdrop-filter: blur(10px);
      }

      .construction-journey {
        padding-top: clamp(5rem, 9vw, 8rem);
        padding-bottom: clamp(5rem, 9vw, 8rem);
      }

      .construction-journey .heading-block {
        max-width: 760px;
      }

      .construction-steps {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-top: 3rem;
        border-top: 1px solid rgba(200, 169, 107, 0.3);
      }

      .construction-step {
        position: relative;
        padding: 1.6rem 1.25rem 0 0;
      }

      .construction-step::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 0;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--gold-2);
        box-shadow: 0 0 16px rgba(217, 171, 79, 0.5);
      }

      .construction-step h3 {
        margin-top: 0.7rem;
      }

      .construction-gallery {
        padding: clamp(4rem, 8vw, 7rem) 0;
        background: linear-gradient(180deg, rgba(17, 19, 23, 0.8), rgba(8, 9, 11, 0.2));
      }

      .construction-gallery-heading {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 2rem;
        margin-bottom: 2rem;
      }

      .construction-gallery-heading h2 {
        font-size: clamp(2.6rem, 5vw, 4.5rem);
      }

      .construction-gallery-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr 1fr;
        gap: 1rem;
      }

      .construction-gallery-grid img {
        width: 100%;
        height: 310px;
        border: 1px solid rgba(200, 169, 107, 0.2);
        border-radius: 14px;
        object-fit: cover;
        transition: transform 0.5s ease;
      }

      .construction-gallery-grid img:hover {
        transform: translateY(-4px);
      }

      .construction-page .cta-panel {
        padding-top: clamp(4rem, 8vw, 7rem);
      }

      .construction-page .cta-copy h2 {
        margin: 0 0 0.5rem;
        color: #fff8e7;
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: clamp(2.4rem, 4.6vw, 4.3rem);
        font-weight: 500;
        line-height: 0.98;
      }

      .construction-page .reveal-item {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s ease, transform 0.7s ease;
      }

      .construction-page .reveal-item.is-revealed {
        opacity: 1;
        transform: translateY(0);
      }

      @media (max-width: 980px) {
        .construction-quality-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .construction-intro-grid,
        .construction-materials-layout {
          grid-template-columns: 1fr 1fr;
          gap: 2rem;
        }

        .construction-intro-image {
          min-height: 400px;
        }

        .construction-materials-image {
          min-height: 460px;
        }
      }

      @media (max-width: 640px) {
        .construction-intro-grid,
        .construction-materials-layout {
          grid-template-columns: 1fr;
        }

        .construction-intro-grid {
          gap: 2.2rem;
        }

        .construction-intro-image,
        .construction-materials-image {
          min-height: 360px;
        }

        .construction-quality-grid {
          grid-template-columns: 1fr;
          margin-top: 2rem;
        }

        .construction-quality-card {
          min-height: 0;
        }

        .construction-quality-card h3 {
          margin-top: 1rem;
        }

        .construction-steps {
          grid-template-columns: 1fr 1fr;
          row-gap: 1.5rem;
        }

        .construction-gallery-heading {
          display: grid;
          gap: 0.8rem;
          align-items: start;
        }

        .construction-gallery-grid {
          grid-template-columns: 1fr;
        }

        .construction-gallery-grid img {
          height: 260px;
        }

        .materials-image-note {
          font-size: 0.55rem;
        }
      }

      @media (max-width: 980px) {
        .nav {
          max-height: calc(100vh - 92px);
          max-height: calc(100dvh - 92px);
          overflow-y: auto;
          overscroll-behavior: contain;
        }

        .nav a,
        .nav-actions > * {
          min-height: 44px;
          display: inline-flex;
          align-items: center;
        }
      }

      @media (max-width: 640px) {
        html,
        body {
          max-width: 100%;
          overflow-x: clip;
        }

        main,
        section,
        article,
        .container,
        .nav-wrap {
          min-width: 0;
        }

        .container {
          width: min(calc(100% - 2rem), var(--container));
        }

        .nav-wrap {
          width: calc(100% - 2rem);
        }

        .nav-toggle {
          min-width: 44px;
          min-height: 44px;
        }

        input,
        select,
        textarea {
          font-size: 16px;
        }

        .site-footer {
          padding-right: 1rem;
          padding-left: 1rem;
        }
      }