@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════
       CSS VARIABLES & RESET
    ═══════════════════════════════════════════════ */
    :root {
      --black: #080807;
      --warm-black: #0d0c0a;
      --charcoal: #1a1916;
      --dark: #242220;
      --mid: #3d3a35;
      --stone: #a09890;
      --warm-grey: #ccc6be;
      --sand: #dedad4;
      --cream: #e8e2d9;
      --ivory: #f5f1eb;
      --white: #fdfcfa;
      --gold: #c9a96e;
      --gold-light: #e2c998;
      --gold-dark: #9c7a44;
      --red: #9b2c2c;
      --red-light: #c0392b;
      --accent: #b8976a;

      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-body: 'Montserrat', sans-serif;
      --font-accent: 'Playfair Display', Georgia, serif;
      --font-arabic: 'Amiri', 'Noto Naskh Arabic', serif;

      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; font-size: 16px; }

    body {
      background: var(--black);
      color: var(--cream);
      font-family: var(--font-body);
      font-weight: 300;
      overflow-x: hidden;
      cursor: auto;
    }

    ::selection { background: var(--gold); color: var(--black); }

    /* ═══════════════════════════════════════════════
       CUSTOM CURSOR
    ═══════════════════════════════════════════════ */
    .cursor {
      position: fixed;
      width: 8px;
      height: 8px;
      background: var(--gold);
      border-radius: 50%;
      pointer-events: none;
      z-index: 10000;
      transform: translate(-50%, -50%);
      transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), background 0.3s;
      mix-blend-mode: normal;
    }
    .cursor-ring {
      position: fixed;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(201,169,110,0.5);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: width 0.5s var(--ease-out), height 0.5s var(--ease-out), border-color 0.3s;
    }
    .cursor.hover { width: 16px; height: 16px; background: var(--gold-light); }
    .cursor-ring.hover { width: 56px; height: 56px; border-color: rgba(201,169,110,0.8); }

    /* ═══════════════════════════════════════════════
       NAVIGATION
    ═══════════════════════════════════════════════ */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 24px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      mix-blend-mode: normal;
      transition: padding 0.4s var(--ease-out), background 0.4s;
    }
    nav.scrolled {
      padding: 16px 48px;
      background: rgba(8,8,7,0.76);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(201,169,110,0.1);
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      color: var(--white);
      text-decoration: none;
      text-transform: uppercase;
    }
    .nav-logo-img {
      width: 36px;
      height: 36px;
      object-fit: contain;
      flex-shrink: 0;
    }
    .nav-logo span { color: var(--gold); }

    .nav-links {
      display: flex;
      gap: 40px;
      list-style: none;
    }
    .nav-links a {
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--sand);
      text-decoration: none;
      transition: color 0.3s;
      position: relative;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--gold);
      transition: width 0.4s var(--ease-out);
    }
    .nav-links a:hover { color: var(--white); }
    .nav-links a:hover::after { width: 100%; }

    .nav-cta {
      font-family: var(--font-body);
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--black);
      background: var(--gold);
      padding: 12px 28px;
      text-decoration: none;
      transition: background 0.3s, transform 0.3s;
    }
    .nav-cta:hover { background: var(--gold-light); transform: translateY(-1px); }

    .nav-hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
    .nav-hamburger span { display: block; width: 24px; height: 1px; background: var(--cream); transition: all 0.3s; }

    /* ═══════════════════════════════════════════════
       SECTION UTILITIES
    ═══════════════════════════════════════════════ */
    section { position: relative; overflow: hidden; }

    .section-label {
      font-family: var(--font-body);
      font-size: 0.62rem;
      font-weight: 400;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .section-label::before {
      content: '';
      width: 32px;
      height: 1px;
      background: var(--red);
      flex-shrink: 0;
    }

    .reveal-text {
      overflow: hidden;
      display: block;
    }
    .reveal-text-inner {
      display: block;
      transform: translateY(110%);
      opacity: 0;
    }

    /* ═══════════════════════════════════════════════
       01. HERO SECTION
    ═══════════════════════════════════════════════ */
    #hero {
      height: 100vh;
      min-height: 700px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0 48px 60px;
      position: relative;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom, rgba(8,8,7,0.2) 0%, rgba(8,8,7,0) 30%, rgba(8,8,7,0.5) 70%, rgba(8,8,7,0.95) 100%),
        linear-gradient(105deg, #1a1410 0%, #2a2218 25%, #1c1a15 50%, #0d0c0a 100%);
      z-index: 0;
    }

    .hero-slideshow {
      --hero-image-base-opacity: 0.9;
      --hero-image-scroll-opacity: 1;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(76vw, 1420px);
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      opacity: 0;
      transition: opacity 1.2s ease;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0) 8%, rgba(0,0,0,0.4) 26%, #000 46%, #000 100%);
      mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0) 8%, rgba(0,0,0,0.4) 26%, #000 46%, #000 100%);
    }
    .hero-slideshow.ready { opacity: calc(var(--hero-image-base-opacity) * var(--hero-image-scroll-opacity)); }
    .hero-slideshow::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 30%;
      z-index: 3;
      background: linear-gradient(to bottom, transparent, rgba(8,8,7,0.92));
      pointer-events: none;
    }
    .hero-slideshow::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      background:
        linear-gradient(to bottom, rgba(8,8,7,0.1), rgba(8,8,7,0.28)),
        linear-gradient(to right, rgba(8,8,7,0.18), rgba(8,8,7,0.02));
    }
    .hero-slide {
      position: absolute;
      inset: 0;
      z-index: 1;
      background-size: cover;
      background-position: center right;
      background-repeat: no-repeat;
      opacity: 0;
      transform: scale(1.02);
      transition: opacity 1.6s ease, transform 10s linear;
      filter: saturate(0.96) contrast(1.04) brightness(0.86);
    }
    .hero-slide.active {
      opacity: 1;
      transform: scale(1.07);
    }
    body.light-mode .hero-slideshow {
      --hero-image-base-opacity: 0.82;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.36) 28%, #000 48%, #000 100%);
      mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.36) 28%, #000 48%, #000 100%);
    }
    body.light-mode .hero-slideshow::before {
      background: linear-gradient(to bottom, transparent, rgba(232,224,212,0.95));
    }
    body.light-mode .hero-slideshow::after {
      background:
        linear-gradient(to bottom, rgba(232,224,212,0.08), rgba(232,224,212,0.2)),
        linear-gradient(to right, rgba(232,224,212,0.12), rgba(232,224,212,0.01));
    }
    body.light-mode .hero-slide {
      filter: saturate(0.9) contrast(0.96) brightness(0.96);
    }

    /* Architectural grid lines */
    .hero-grid {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden;
    }
    .hero-grid::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(201,169,110,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,169,110,0.04) 1px, transparent 1px);
      background-size: 80px 80px;
    }

    /* Large architectural number */
    .hero-number {
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      font-family: var(--font-display);
      font-size: clamp(220px, 26vw, 430px);
      font-weight: 300;
      color: rgba(201,169,110,0.035);
      -webkit-text-stroke: 0.75px rgba(201,169,110,0.34);
      text-shadow: 0 0 34px rgba(201,169,110,0.14), 0 0 96px rgba(201,169,110,0.075);
      line-height: 1;
      z-index: 1;
      user-select: none;
      letter-spacing: -0.02em;
      opacity: 0.98;
    }

    /* Floating image panels */
    .hero-panels {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }
    .hero-panel {
      --panel-image: none;
      --panel-image-opacity: 0.24;
      --panel-scroll-opacity: 1;
      position: absolute;
      overflow: hidden;
      border: 1px solid rgba(201,169,110,0.26);
      opacity: var(--panel-scroll-opacity);
      box-shadow:
        0 0 30px rgba(201,169,110,0.11),
        0 0 100px rgba(201,169,110,0.06),
        inset 0 0 44px rgba(201,169,110,0.055);
      transition: border-color 1.2s ease, box-shadow 1.2s ease;
    }
    .hero-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      background-image: var(--panel-image);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: var(--panel-image-opacity);
      filter: saturate(0.95) contrast(1.05) brightness(1.02);
      transform: scale(1.04);
      transition: opacity 1.6s ease, background-image 0.6s ease, transform 10s linear;
      mix-blend-mode: screen;
    }
    .hero-panel.has-project-image {
      border-color: rgba(201,169,110,0.36);
      box-shadow:
        0 0 38px rgba(201,169,110,0.15),
        0 0 130px rgba(201,169,110,0.08),
        inset 0 0 56px rgba(201,169,110,0.065);
    }
    .hero-panel.has-project-image::before {
      transform: scale(1.1);
    }
    .hero-panel img, .hero-panel-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .panel-1 {
      top: 15%;
      right: 8%;
      width: clamp(160px, 18vw, 280px);
      height: clamp(220px, 28vw, 400px);
    }
    .panel-2 {
      top: 38%;
      right: 22%;
      width: clamp(100px, 11vw, 180px);
      height: clamp(130px, 16vw, 240px);
    }
    .panel-3 {
      top: 8%;
      right: 28%;
      width: clamp(80px, 9vw, 140px);
      height: clamp(100px, 13vw, 190px);
    }

    /* Fake interior images using CSS art */
    .img-room-1 {
      background: linear-gradient(145deg, #2a2218 0%, #3d3228 30%, #1a1510 60%, #0d0b08 100%);
      position: relative;
    }
    .img-room-1::before {
      content: '';
      position: absolute;
      bottom: 20%;
      left: 10%;
      right: 10%;
      height: 35%;
      background: linear-gradient(90deg, #1a1208 0%, #2e2416 50%, #1a1208 100%);
      border-top: 1px solid rgba(201,169,110,0.3);
    }
    .img-room-1::after {
      content: '';
      position: absolute;
      top: 15%;
      left: 25%;
      width: 50%;
      height: 40%;
      background: rgba(201,169,110,0.06);
      border: 1px solid rgba(201,169,110,0.2);
    }

    .img-room-2 {
      background: linear-gradient(160deg, #161310 0%, #241e16 40%, #1a1510 100%);
      position: relative;
    }
    .img-room-2::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 30%;
      background: linear-gradient(to top, rgba(201,169,110,0.08), transparent);
    }

    .img-room-3 {
      background: linear-gradient(135deg, #0d0c0a 0%, #1e1b15 50%, #2a2418 100%);
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 620px;
      flex-shrink: 0;
    }

    .hero-eyebrow {
      font-family: var(--font-body);
      font-size: 0.62rem;
      font-weight: 400;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 24px;
      opacity: 0;
      transform: translateX(-20px);
    }

    .hero-title {
      font-family: var(--font-display);
      font-size: clamp(52px, 7vw, 108px);
      font-weight: 300;
      line-height: 0.95;
      letter-spacing: -0.02em;
      color: var(--white);
      margin-bottom: 32px;
    }
    .hero-title em {
      font-style: italic;
      color: var(--gold);
    }
    .hero-title .line { overflow: hidden; display: block; }
    .hero-title .line-inner { display: block; transform: translateY(100%); }

    .hero-desc {
      font-size: 0.8rem;
      font-weight: 300;
      letter-spacing: 0.08em;
      line-height: 1.9;
      color: var(--warm-grey);
      max-width: 380px;
      margin-bottom: 36px;
      opacity: 0;
    }

    .hero-actions {
      display: flex;
      gap: 24px;
      align-items: center;
      opacity: 0;
      margin-bottom: 48px;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-body);
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--black);
      background: var(--gold);
      padding: 16px 36px;
      text-decoration: none;
      border: none;
      cursor: auto;
      transition: background 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
    }
    .btn-primary:hover {
      background: var(--gold-light);
      transform: translateY(-2px);
      box-shadow: 0 20px 40px rgba(201,169,110,0.2);
    }
    .btn-primary svg { width: 14px; height: 14px; }

    .btn-secondary {
      font-family: var(--font-body);
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--sand);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: color 0.3s;
    }
    .btn-secondary:hover { color: var(--white); }

    .hero-scroll-indicator {
      position: absolute;
      bottom: 60px;
      right: 48px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      opacity: 0;
    }
    .scroll-line {
      width: 1px;
      height: 60px;
      background: linear-gradient(to bottom, var(--gold), transparent);
      animation: scrollPulse 2s ease-in-out infinite;
    }
    @keyframes scrollPulse {
      0%, 100% { opacity: 0.4; transform: scaleY(1); }
      50% { opacity: 1; transform: scaleY(1.1); }
    }
    .scroll-text {
      font-size: 0.55rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--stone);
      writing-mode: vertical-rl;
    }

    .hero-stats {
      position: relative;
      z-index: 2;
      display: flex;
      gap: 48px;
      opacity: 0;
      padding-top: 0;
      border-top: 1px solid rgba(201,169,110,0.12);
      padding-top: 24px;
    }
    .stat-item { text-align: center; }
    .stat-number {
      font-family: var(--font-display);
      font-size: 2.2rem;
      font-weight: 300;
      color: var(--white);
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .stat-number span { color: var(--gold); }
    .stat-label {
      font-size: 0.58rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--stone);
      margin-top: 6px;
    }

    /* ═══════════════════════════════════════════════
       02. STORYTELLING — FROM EMPTY TO DELIVERED
    ═══════════════════════════════════════════════ */
    #storytelling {
      background: var(--warm-black);
      padding: 160px 0 0;
      position: relative;
      z-index: 3;
    }

    .story-header {
      text-align: center;
      padding: 120px 48px 0;
      margin-bottom: 70px;
    }

    .story-title {
      font-family: var(--font-display);
      font-size: clamp(36px, 5.5vw, 82px);
      font-weight: 300;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--white);
    }
    .story-title em { font-style: italic; color: var(--gold); }
    .story-intro-text {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 300;
      color: var(--warm-grey);
      letter-spacing: 0.08em;
      line-height: 1.9;
      max-width: 560px;
      margin: 20px auto 0;
      text-align: center;
    }

    /* Horizontal scrolling story strip */
    .story-pin-wrapper {
      height: 320vh;
      position: relative;
    }
    .story-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-bottom: 60px;
    }
    .story-strip-wrapper {
      overflow: hidden;
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
    }
    .story-strip {
      display: flex;
      gap: 0;
      width: max-content;
      will-change: transform;
    }
    .story-step {
      width: clamp(300px, 28vw, 400px);
      flex-shrink: 0;
      padding: 22px 40px 30px;
      border-right: 1px solid rgba(201,169,110,0.1);
      position: relative;
      transition: background 0.4s;
    }
    .story-step:first-child { padding-left: 72px; }
    .story-step:last-child { border-right: none; padding-right: 80px; }
    .story-step:hover { background: rgba(201,169,110,0.03); }

    .step-num {
      font-family: var(--font-display);
      font-size: 4rem;
      font-weight: 300;
      color: transparent;
      -webkit-text-stroke: 1px rgba(201,169,110,0.2);
      line-height: 1;
      margin-bottom: 12px;
      display: block;
    }

    .step-visual {
      width: 100%;
      height: 118px;
      margin-bottom: 16px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(201,169,110,0.1);
    }

    /* CSS architecture stages */
    .stage-empty {
      background: linear-gradient(160deg, #0a0908 0%, #141210 100%);
    }
    .stage-empty::before {
      content: '';
      position: absolute;
      inset: 20px;
      border: 1px dashed rgba(201,169,110,0.15);
    }
    .stage-empty::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 20px;
      right: 20px;
      height: 2px;
      background: rgba(201,169,110,0.1);
    }

    .stage-concept {
      background: linear-gradient(160deg, #0f0d0a 0%, #1a1510 100%);
      overflow: hidden;
    }
    .stage-concept::before {
      content: '';
      position: absolute;
      top: 30px;
      left: 30px;
      width: 60%;
      height: 40%;
      border: 1px solid rgba(201,169,110,0.25);
      background: rgba(201,169,110,0.03);
    }
    .stage-concept::after {
      content: '';
      position: absolute;
      bottom: 30px;
      right: 30px;
      width: 40%;
      height: 35%;
      border: 1px solid rgba(201,169,110,0.15);
    }

    .stage-design {
      background: linear-gradient(135deg, #0d0c0a 0%, #1e1a14 60%, #261f16 100%);
      position: relative;
    }
    .stage-design::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40%;
      background: linear-gradient(to top, rgba(201,169,110,0.07), transparent);
    }
    .stage-design::after {
      content: '';
      position: absolute;
      top: 20px;
      left: 20px;
      right: 20px;
      bottom: 40%;
      background:
        linear-gradient(90deg, rgba(201,169,110,0.04) 1px, transparent 1px),
        linear-gradient(rgba(201,169,110,0.04) 1px, transparent 1px);
      background-size: 20px 20px;
    }

    .stage-3d {
      background: radial-gradient(ellipse at 30% 40%, rgba(201,169,110,0.1) 0%, transparent 60%),
                  linear-gradient(145deg, #0a0908 0%, #1a1510 100%);
    }
    .stage-3d::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      border: 1px solid rgba(201,169,110,0.2);
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .stage-execution {
      background: linear-gradient(160deg, #0f0e0b 0%, #201c14 100%);
    }
    .stage-execution::before {
      content: '';
      position: absolute;
      bottom: 20px;
      left: 20px;
      right: 20px;
      height: 3px;
      background: linear-gradient(90deg, var(--gold-dark), transparent);
    }

    .stage-delivery {
      background: linear-gradient(160deg, #1a1510 0%, #2a2218 50%, #1a1510 100%);
    }
    .stage-delivery::before {
      content: '';
      position: absolute;
      inset: 15px;
      border: 1px solid rgba(201,169,110,0.2);
      background: rgba(201,169,110,0.03);
    }
    .stage-delivery::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 24px;
      height: 24px;
      border-right: 2px solid var(--gold);
      border-bottom: 2px solid var(--gold);
      transform: translate(-50%, -60%) rotate(-45deg);
    }

    .step-title {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 400;
      color: var(--white);
      margin-bottom: 10px;
      letter-spacing: 0.01em;
    }
    .step-desc {
      font-size: 0.68rem;
      line-height: 1.6;
      color: var(--stone);
      font-weight: 300;
      letter-spacing: 0.05em;
    }

    .step-connector {
      position: absolute;
      top: 50%;
      right: -1px;
      width: 8px;
      height: 8px;
      background: var(--gold);
      border-radius: 50%;
      transform: translateY(-50%) translateX(4px);
      z-index: 2;
    }

    /* ═══════════════════════════════════════════════
       03. PROCESS — PINNED SCROLL SECTION
    ═══════════════════════════════════════════════ */
    #process {
      background: var(--black);
    }

    .process-pin-wrapper {
      height: 500vh;
    }

    .process-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: hidden;
    }

    .process-left {
      padding: 80px 64px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      border-right: 1px solid rgba(201,169,110,0.08);
    }

    .process-counter {
      font-family: var(--font-display);
      font-size: clamp(100px, 14vw, 180px);
      font-weight: 300;
      color: transparent;
      -webkit-text-stroke: 1px rgba(201,169,110,0.15);
      line-height: 1;
      position: absolute;
      top: 60px;
      right: 40px;
    }

    .process-steps-container {
      position: relative;
      z-index: 1;
      min-height: 320px;
    }

    .process-step-item {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      opacity: 0;
      transform: translateY(24px);
      pointer-events: none;
      transition: none;
      visibility: hidden;
    }
    .process-step-item.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
      position: absolute;
      visibility: visible;
    }

    .process-step-num {
      font-family: var(--font-body);
      font-size: 0.62rem;
      font-weight: 400;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 24px;
    }

    .process-step-title {
      font-family: var(--font-display);
      font-size: clamp(28px, 3.5vw, 52px);
      font-weight: 300;
      color: var(--white);
      line-height: 1.1;
      margin-bottom: 20px;
      letter-spacing: -0.01em;
    }
    .process-step-title em { font-style: italic; color: var(--gold); }

    .process-step-desc {
      font-size: 0.78rem;
      line-height: 2;
      color: var(--warm-grey);
      font-weight: 300;
      max-width: 400px;
      letter-spacing: 0.05em;
    }

    .process-step-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 28px;
    }
    .process-tag {
      font-size: 0.6rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      border: 1px solid rgba(201,169,110,0.3);
      padding: 6px 16px;
    }

    .process-progress {
      position: absolute;
      bottom: 60px;
      left: 64px;
      right: 64px;
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .progress-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(201,169,110,0.2);
      transition: all 0.4s var(--ease-out);
      cursor: default;
    }
    .progress-dot.active {
      background: var(--gold);
      width: 24px;
      border-radius: 3px;
    }

    .process-right {
      position: relative;
      overflow: hidden;
    }

    .process-panels {
      position: absolute;
      inset: 0;
    }

    .process-panel {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.8s var(--ease-out);
    }
    .process-panel.active { opacity: 1; }

    .process-panel-bg {
      position: absolute;
      inset: 0;
    }

    .process-panel-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(8,8,7,0.3), transparent);
    }

    /* Process panel visuals */
    .panel-bg-1 {
      background: linear-gradient(135deg, #0f0d0a 0%, #1a1510 30%, #261e14 60%, #1a1510 100%);
    }
    .panel-bg-2 {
      background: linear-gradient(160deg, #0a0908 0%, #141008 40%, #1e1a10 100%);
    }
    .panel-bg-3 {
      background: radial-gradient(ellipse at 60% 40%, rgba(201,169,110,0.08) 0%, transparent 70%),
                  linear-gradient(145deg, #0d0b08 0%, #1a1610 100%);
    }
    .panel-bg-4 {
      background: linear-gradient(135deg, #0a0908 0%, #1c1810 50%, #281f12 100%);
    }
    .panel-bg-5 {
      background: linear-gradient(160deg, #0f0d0a 0%, #201a10 50%, #1a1408 100%);
    }

    /* Architectural decorative elements for panels */
    .panel-deco {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    .panel-deco::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 55%;
      height: 55%;
      border: 1px solid rgba(201,169,110,0.1);
    }
    .panel-deco::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      width: 30%;
      height: 30%;
      border: 1px solid rgba(201,169,110,0.07);
    }

    /* ═══════════════════════════════════════════════
       04. SERVICES
    ═══════════════════════════════════════════════ */
    #services {
      background: var(--charcoal);
      padding: 160px 48px;
    }

    .services-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
      margin-bottom: 100px;
    }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(36px, 4.5vw, 68px);
      font-weight: 300;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--white);
    }
    .section-title em { font-style: italic; color: var(--gold); }

    .services-intro {
      font-size: 0.8rem;
      line-height: 2;
      color: var(--warm-grey);
      font-weight: 300;
      padding-top: 12px;
      letter-spacing: 0.06em;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: rgba(201,169,110,0.08);
    }

    .service-card {
      background: var(--charcoal);
      padding: 52px 44px;
      position: relative;
      overflow: hidden;
      transition: background 0.4s;
      cursor: auto;
    }
    .service-card::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--gold);
      transition: width 0.5s var(--ease-out);
    }
    .service-card:hover { background: var(--dark); }
    .service-card:hover::before { width: 100%; }

    .service-icon {
      width: 48px;
      height: 48px;
      margin-bottom: 32px;
      position: relative;
    }
    .service-icon svg { width: 100%; height: 100%; }

    .service-num {
      position: absolute;
      top: 44px;
      right: 44px;
      font-family: var(--font-display);
      font-size: 0.8rem;
      font-weight: 300;
      color: rgba(201,169,110,0.3);
      letter-spacing: 0.05em;
    }

    .service-name {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 400;
      color: var(--white);
      margin-bottom: 16px;
      letter-spacing: 0.01em;
    }

    .service-desc {
      font-size: 0.72rem;
      line-height: 1.9;
      color: var(--stone);
      font-weight: 300;
      letter-spacing: 0.05em;
    }

    /* ═══════════════════════════════════════════════
       05. PORTFOLIO — HORIZONTAL SCROLL
    ═══════════════════════════════════════════════ */
    #portfolio {
      background: var(--black);
    }

    .portfolio-intro {
      padding: 120px 48px 80px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    .portfolio-pin-wrapper {
      height: 300vh;
    }

    .portfolio-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .portfolio-track-wrapper {
      flex: 1;
      overflow: hidden;
      position: relative;
      box-sizing: border-box;
      padding: calc(74px + clamp(12px, 2vh, 18px)) 20px clamp(52px, 6vh, 70px);
      display: flex;
      align-items: flex-start;
    }

    .portfolio-track {
      display: flex;
      height: clamp(560px, calc(100vh - 175px), 790px);
      gap: 18px;
      align-items: stretch;
      will-change: transform;
    }

    .portfolio-item {
      flex-shrink: 0;
      display: block;
      width: clamp(520px, calc((100vw - 58px) / 2), 940px);
      height: 100%;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      box-sizing: border-box;
      border: 1px solid rgba(201,169,110,0.1);
      color: inherit;
      text-decoration: none;
    }
    .portfolio-item:first-child { width: clamp(520px, calc((100vw - 58px) / 2), 940px); }

    .portfolio-bg {
      position: absolute;
      inset: 0;
      transition: transform 0.6s var(--ease-out);
      background-size: cover;
      background-position: center;
    }
    .portfolio-item:hover .portfolio-bg { transform: scale(1.04); }

    .portfolio-bg.has-selected-work-image .room-sim {
      display: none;
    }

    .selected-work-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      background-size: cover;
      background-position: center;
      filter: brightness(0.78) saturate(0.94) contrast(1.04);
      transform: scale(1.012);
      transition: opacity 1.2s var(--ease-out), transform 5.4s linear;
      will-change: opacity, transform;
    }

    .selected-work-slide.active {
      opacity: 1;
      transform: scale(1.045);
    }

    .p-bg-1 {
      background: linear-gradient(145deg, #1a1510 0%, #2a2018 30%, #1a140e 60%, #0d0b08 100%);
    }
    .p-bg-2 {
      background: linear-gradient(160deg, #0f0c09 0%, #1e1a12 50%, #2a2216 100%);
    }
    .p-bg-3 {
      background: linear-gradient(135deg, #0a0908 0%, #161210 40%, #1e1a14 100%);
    }
    .p-bg-4 {
      background: linear-gradient(150deg, #12100d 0%, #201c14 60%, #1a1510 100%);
    }
    .p-bg-5 {
      background: linear-gradient(140deg, #0d0b08 0%, #1a1610 50%, #241e14 100%);
    }

    /* Simulated room interiors */
    .room-sim {
      position: absolute;
      inset: 0;
    }
    .room-sim::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 35%;
      background: inherit;
      filter: brightness(0.6);
    }

    .portfolio-item-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to top, rgba(8,8,7,0.86) 0%, rgba(8,8,7,0.22) 50%, rgba(8,8,7,0.08) 100%),
        radial-gradient(circle at 50% 35%, transparent 0%, rgba(8,8,7,0.34) 100%);
      opacity: 0.66;
      transition: opacity 0.5s;
    }
    .portfolio-item:hover .portfolio-item-overlay { opacity: 1; }

    .portfolio-item-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 40px;
      transform: translateY(0);
      opacity: 1;
      transition: transform 0.5s var(--ease-out), opacity 0.5s;
    }
    .portfolio-item:hover .portfolio-item-info { transform: translateY(0); opacity: 1; }

    .portfolio-item-cat {
      display: none;
      font-size: 0.6rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 8px;
    }
    .portfolio-item-title {
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: 400;
      color: var(--white);
      letter-spacing: 0.01em;
    }

    .portfolio-deco {
      position: absolute;
      top: 32px;
      left: 32px;
      width: 40px;
      height: 40px;
      border-top: 1px solid rgba(201,169,110,0.4);
      border-left: 1px solid rgba(201,169,110,0.4);
    }

    .portfolio-item-num {
      position: absolute;
      top: 32px;
      right: 32px;
      font-family: var(--font-display);
      font-size: 0.75rem;
      color: rgba(201,169,110,0.3);
    }

    .portfolio-scroll-hint {
      padding: 20px 48px;
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }
    .scroll-hint-line {
      flex: 1;
      height: 1px;
      background: rgba(201,169,110,0.15);
      position: relative;
      overflow: hidden;
    }
    .scroll-hint-line::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 30%;
      height: 100%;
      background: var(--gold);
      animation: scanLine 3s ease-in-out infinite;
    }
    @keyframes scanLine {
      0% { left: -30%; }
      100% { left: 100%; }
    }
    .scroll-hint-text {
      font-size: 0.6rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--stone);
      white-space: nowrap;
    }

    /* ═══════════════════════════════════════════════
       06. FURNITURE MANUFACTURING
    ═══════════════════════════════════════════════ */
    #furniture {
      background: var(--warm-black);
      padding: 160px 48px;
    }

    .furniture-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 100px;
      align-items: center;
    }

    .furniture-visual {
      position: relative;
      height: 580px;
    }

    .furniture-main-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 75%;
      height: 80%;
      background: linear-gradient(145deg, #1a1510 0%, #2e2418 40%, #201a10 100%);
      border: 1px solid rgba(201,169,110,0.1);
      overflow: hidden;
    }
    .furniture-main-img::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 45%;
      background: linear-gradient(to top, rgba(201,169,110,0.08), transparent);
    }
    .furniture-main-img::after {
      content: '';
      position: absolute;
      top: 40px;
      left: 40px;
      right: 40px;
      bottom: 45%;
      border: 1px solid rgba(201,169,110,0.12);
    }

    .furniture-accent-img {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 50%;
      height: 45%;
      background: linear-gradient(135deg, #0d0b08 0%, #1a1610 50%, #241e14 100%);
      border: 1px solid rgba(201,169,110,0.12);
    }

    .step-visual.has-section-image {
      background-image:
        linear-gradient(180deg, rgba(8,8,7,0.2), rgba(8,8,7,0.68)),
        var(--section-image) !important;
      background-size: cover;
      background-position: center;
      box-shadow:
        inset 0 0 0 1px rgba(201,169,110,0.1),
        0 18px 42px rgba(0,0,0,0.26);
    }

    .step-visual.has-section-image::before,
    .step-visual.has-section-image::after {
      z-index: 1;
    }

    .process-panel-bg.has-process-image {
      background-image:
        linear-gradient(90deg, rgba(8,8,7,0.72), rgba(8,8,7,0.28) 48%, rgba(8,8,7,0.58)),
        var(--process-image) !important;
      background-size: cover;
      background-position: center;
      filter: brightness(0.82) saturate(0.95);
    }

    .process-panel-bg.has-process-image::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 52% 48%, rgba(201,169,110,0.1), transparent 42%),
        linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.42));
      pointer-events: none;
    }

    .furniture-main-img.has-section-image {
      background-image:
        linear-gradient(180deg, rgba(8,8,7,0.08), rgba(8,8,7,0.48)),
        var(--furniture-main-image) !important;
      background-size: cover;
      background-position: center;
      box-shadow: 0 24px 70px rgba(0,0,0,0.3);
    }

    .furniture-accent-img.has-section-image {
      background-image:
        linear-gradient(180deg, rgba(8,8,7,0.05), rgba(8,8,7,0.46)),
        var(--furniture-accent-image) !important;
      background-size: cover;
      background-position: center;
      box-shadow: 0 20px 54px rgba(0,0,0,0.34);
      overflow: hidden;
    }

    .furniture-accent-img.has-section-image::after {
      content: '';
      position: absolute;
      inset: 18px;
      border: 1px solid rgba(201,169,110,0.14);
      pointer-events: none;
    }

    .furniture-gold-bar {
      position: absolute;
      top: 48px;
      right: 25%;
      width: 2px;
      height: 100px;
      background: linear-gradient(to bottom, transparent, var(--gold), transparent);
    }

    .furniture-content .section-label { margin-bottom: 28px; }

    .furniture-title {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 60px);
      font-weight: 300;
      line-height: 1.1;
      color: var(--white);
      margin-bottom: 28px;
      letter-spacing: -0.02em;
    }
    .furniture-title em { font-style: italic; color: var(--gold); }

    .furniture-desc {
      font-size: 0.78rem;
      line-height: 2;
      color: var(--warm-grey);
      font-weight: 300;
      margin-bottom: 48px;
      letter-spacing: 0.05em;
    }

    .furniture-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 48px;
    }
    .furniture-feature {
      padding: 20px 0;
      border-bottom: 1px solid rgba(201,169,110,0.1);
    }
    .ff-label {
      font-size: 0.6rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 6px;
    }
    .ff-value {
      font-family: var(--font-display);
      font-size: 1.1rem;
      color: var(--white);
      font-weight: 300;
    }

    /* ═══════════════════════════════════════════════
       07. WHY CHOOSE US
    ═══════════════════════════════════════════════ */
    #why {
      background: var(--black);
      padding: 160px 48px;
      position: relative;
    }

    #why::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(201,169,110,0.04) 0%, transparent 70%);
      pointer-events: none;
    }

    .why-header {
      text-align: center;
      margin-bottom: 100px;
    }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: rgba(201,169,110,0.08);
      max-width: 1200px;
      margin: 0 auto;
    }

    .why-card {
      background: var(--black);
      padding: 60px 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: background 0.4s;
    }
    .why-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background: var(--gold);
      transition: width 0.5s var(--ease-out);
    }
    .why-card:hover { background: rgba(201,169,110,0.03); }
    .why-card:hover::after { width: 60%; }

    .why-icon {
      width: 52px;
      height: 52px;
      margin: 0 auto 28px;
    }

    .why-number {
      font-family: var(--font-display);
      font-size: 3rem;
      font-weight: 300;
      color: var(--white);
      line-height: 1;
      margin-bottom: 8px;
    }
    .why-number span { color: var(--gold); }

    .why-label {
      font-size: 0.62rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--stone);
      margin-bottom: 20px;
    }

    .why-desc {
      font-size: 0.72rem;
      line-height: 1.9;
      color: var(--warm-grey);
      font-weight: 300;
    }

    /* ═══════════════════════════════════════════════
       08. GET A QUOTE — MULTI-STEP FORM
    ═══════════════════════════════════════════════ */
    #quote {
      background: var(--warm-black);
      padding: 160px 48px;
    }

    .quote-header {
      text-align: center;
      margin-bottom: 80px;
    }

    .quote-form-wrapper {
      max-width: 900px;
      margin: 0 auto;
    }

    /* Step progress */
    .form-progress {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 60px;
      gap: 0;
    }

    .form-step-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      position: relative;
    }

    .step-circle {
      width: 36px;
      height: 36px;
      border: 1px solid rgba(201,169,110,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 0.85rem;
      color: var(--stone);
      transition: all 0.4s var(--ease-out);
      background: var(--warm-black);
      position: relative;
      z-index: 1;
    }
    .step-circle.active {
      border-color: var(--gold);
      color: var(--gold);
    }
    .step-circle.done {
      border-color: var(--gold);
      background: var(--gold);
      color: var(--black);
    }

    .step-label-text {
      font-size: 0.55rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--stone);
      transition: color 0.3s;
      text-align: center;
      max-width: 60px;
    }
    .step-label-text.active { color: var(--gold); }

    .step-connector-line {
      flex: 1;
      height: 1px;
      background: rgba(201,169,110,0.15);
      margin-bottom: 28px;
      transition: background 0.4s;
      min-width: 20px;
    }
    .step-connector-line.done { background: rgba(201,169,110,0.4); }

    /* Form steps */
    .form-step {
      display: none;
    }
    .form-step.active {
      display: block;
      animation: stepIn 0.5s var(--ease-out) forwards;
    }
    @keyframes stepIn {
      from { opacity: 0; transform: translateX(30px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .form-step-question {
      font-family: var(--font-display);
      font-size: clamp(22px, 3vw, 38px);
      font-weight: 300;
      color: var(--white);
      text-align: center;
      margin-bottom: 16px;
      letter-spacing: -0.01em;
    }
    .form-step-question em { font-style: italic; color: var(--gold); }

    .form-step-sub {
      font-size: 0.72rem;
      color: var(--stone);
      text-align: center;
      letter-spacing: 0.08em;
      margin-bottom: 52px;
    }

    /* Option cards */
    .options-grid {
      display: grid;
      gap: 12px;
    }
    .options-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .options-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .options-grid-4 { grid-template-columns: repeat(4, 1fr); }

    .option-card {
      background: rgba(201,169,110,0.03);
      border: 1px solid rgba(201,169,110,0.12);
      padding: 28px 24px;
      cursor: pointer;
      transition: all 0.3s var(--ease-out);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .option-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(201,169,110,0.05);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .option-card:hover { border-color: rgba(201,169,110,0.4); }
    .option-card:hover::before { opacity: 1; }
    .option-card.selected {
      border-color: var(--gold);
      background: rgba(201,169,110,0.08);
    }
    .option-card.selected::after {
      content: '✓';
      position: absolute;
      top: 10px;
      right: 14px;
      font-size: 0.7rem;
      color: var(--gold);
    }

    .option-icon {
      font-size: 1.6rem;
      line-height: 1;
    }

    .option-label {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 400;
      color: var(--white);
    }

    /* Budget slider */
    .budget-section { text-align: center; }

    .budget-range-wrapper {
      margin: 0 auto 32px;
      max-width: 500px;
    }

    .budget-display {
      font-family: var(--font-display);
      font-size: 3rem;
      font-weight: 300;
      color: var(--gold);
      margin-bottom: 24px;
      letter-spacing: -0.02em;
    }

    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 1px;
      background: rgba(201,169,110,0.2);
      outline: none;
      cursor: pointer;
      position: relative;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--gold);
      cursor: pointer;
      border: 2px solid var(--black);
      box-shadow: 0 0 12px rgba(201,169,110,0.3);
      transition: box-shadow 0.2s;
    }
    input[type="range"]::-webkit-slider-thumb:hover {
      box-shadow: 0 0 20px rgba(201,169,110,0.5);
    }
    input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--gold);
      cursor: pointer;
      border: 2px solid var(--black);
    }

    .budget-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
    }
    .budget-label-item {
      font-size: 0.6rem;
      letter-spacing: 0.12em;
      color: var(--stone);
    }

    /* Upload zone */
    .upload-zone {
      border: 1px dashed rgba(201,169,110,0.3);
      padding: 60px 40px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;
      max-width: 600px;
      margin: 0 auto 24px;
    }
    .upload-zone:hover { border-color: rgba(201,169,110,0.6); background: rgba(201,169,110,0.03); }
    .upload-zone.drag-over { border-color: var(--gold); background: rgba(201,169,110,0.06); }

    .upload-icon { font-size: 2.5rem; margin-bottom: 16px; color: var(--gold); }
    .upload-text { font-family: var(--font-display); font-size: 1.1rem; color: var(--white); margin-bottom: 8px; }
    .upload-sub { font-size: 0.65rem; letter-spacing: 0.12em; color: var(--stone); }

    input[type="file"] { display: none; }

    .uploaded-files {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-top: 16px;
    }
    .uploaded-file-chip {
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      color: var(--sand);
      background: rgba(201,169,110,0.1);
      border: 1px solid rgba(201,169,110,0.2);
      padding: 6px 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .remove-file { cursor: pointer; color: var(--stone); transition: color 0.2s; }
    .remove-file:hover { color: var(--gold); }

    /* Contact form */
    .contact-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .contact-field { position: relative; }
    .contact-field.full { grid-column: 1 / -1; }

    .contact-field label {
      display: block;
      font-size: 0.6rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 10px;
    }

    .contact-field input,
    .contact-field textarea {
      width: 100%;
      background: rgba(201,169,110,0.04);
      border: 1px solid rgba(201,169,110,0.15);
      border-bottom: 1px solid rgba(201,169,110,0.3);
      padding: 16px 18px;
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 300;
      color: var(--cream);
      outline: none;
      transition: border-color 0.3s, background 0.3s;
      letter-spacing: 0.05em;
    }
    .contact-field input::placeholder,
    .contact-field textarea::placeholder { color: var(--stone); }
    .contact-field input:focus,
    .contact-field textarea:focus {
      border-color: rgba(201,169,110,0.5);
      background: rgba(201,169,110,0.06);
    }
    .contact-field textarea { height: 120px; resize: vertical; }

    /* Form navigation */
    .form-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 52px;
    }

    .btn-form-back {
      font-family: var(--font-body);
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--stone);
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: color 0.3s;
    }
    .btn-form-back:hover { color: var(--cream); }

    .btn-form-next {
      font-family: var(--font-body);
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--black);
      background: var(--gold);
      border: none;
      padding: 16px 40px;
      cursor: pointer;
      transition: background 0.3s, transform 0.3s var(--ease-out);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .btn-form-next:hover { background: var(--gold-light); transform: translateY(-2px); }
    .btn-form-next:disabled { opacity: 0.4; cursor: default; transform: none; }

    /* Success */
    .form-success {
      display: none;
      text-align: center;
      padding: 80px 40px;
      animation: stepIn 0.6s var(--ease-out) forwards;
    }
    .form-success.show { display: block; }
    .success-icon { font-size: 3rem; color: var(--gold); margin-bottom: 24px; }
    .success-title {
      font-family: var(--font-display);
      font-size: 2.5rem;
      font-weight: 300;
      color: var(--white);
      margin-bottom: 16px;
    }
    .success-desc { font-size: 0.78rem; color: var(--warm-grey); line-height: 2; }

    /* ═══════════════════════════════════════════════
       09. FOOTER
    ═══════════════════════════════════════════════ */
    footer {
      background: var(--black);
      border-top: 1px solid rgba(201,169,110,0.1);
      padding: 100px 48px 60px;
    }

    .footer-top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 80px;
      margin-bottom: 80px;
    }

    .footer-brand .nav-logo {
      font-size: 2rem;
      display: block;
      margin-bottom: 20px;
    }

    .footer-tagline {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 300;
      font-style: italic;
      color: var(--warm-grey);
      margin-bottom: 32px;
      line-height: 1.6;
    }

    .footer-social {
      display: flex;
      gap: 16px;
    }
    .footer-social a {
      width: 40px;
      height: 40px;
      border: 1px solid rgba(201,169,110,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--stone);
      text-decoration: none;
      transition: all 0.3s;
      font-size: 0.75rem;
    }
    .footer-social a:hover { border-color: var(--gold); color: var(--gold); }

    .footer-col-title {
      font-family: var(--font-body);
      font-size: 0.62rem;
      font-weight: 400;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 28px;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .footer-links a {
      font-size: 0.75rem;
      font-weight: 300;
      color: var(--stone);
      text-decoration: none;
      letter-spacing: 0.06em;
      transition: color 0.3s;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .footer-links a::before {
      content: '';
      width: 12px;
      height: 1px;
      background: rgba(201,169,110,0.3);
      flex-shrink: 0;
      transition: background 0.3s, width 0.3s;
    }
    .footer-links a:hover { color: var(--cream); }
    .footer-links a:hover::before { background: var(--gold); width: 18px; }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 40px;
      border-top: 1px solid rgba(201,169,110,0.08);
    }

    .footer-copy {
      font-size: 0.62rem;
      letter-spacing: 0.12em;
      color: var(--stone);
    }
    .footer-copy span { color: var(--gold); }

    .footer-legal {
      display: flex;
      gap: 28px;
    }
    .footer-legal a {
      font-size: 0.62rem;
      letter-spacing: 0.12em;
      color: var(--stone);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-legal a:hover { color: var(--cream); }

    /* ═══════════════════════════════════════════════
       MOBILE RESPONSIVE
    ═══════════════════════════════════════════════ */
    @media (max-width: 1024px) {
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .why-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-top { grid-template-columns: 1fr 1fr; gap: 48px; }
    }

    @media (max-width: 768px) {
      nav { padding: 20px 24px; }
      nav.scrolled { padding: 14px 24px; }
      .nav-links, .nav-cta { display: none; }
      .nav-hamburger { display: flex; }

      #hero { padding: 0 24px 60px; }
      .hero-number { display: none; }
      .hero-panels { display: none; }
      .hero-stats { left: 24px; gap: 28px; }
      .hero-scroll-indicator { right: 24px; }

      #storytelling { padding: 0; }
      .story-header { padding: 0 24px; margin-bottom: 40px; }
      .story-step { width: 280px; padding: 36px 28px; }
      .story-step:first-child { padding-left: 40px; }

      .process-sticky { grid-template-columns: 1fr; }
      .process-right { display: none; }
      .process-left { padding: 60px 24px; border-right: none; }

      #services { padding: 100px 24px; }
      .services-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 60px; }
      .services-grid { grid-template-columns: 1fr; }

      .portfolio-item { width: 85vw; }
      .portfolio-item:first-child { width: 85vw; }
      .portfolio-track-wrapper { padding: 92px 24px 72px; }
      .portfolio-track { height: clamp(360px, 58vh, 520px); }
      .portfolio-track { gap: 18px; }
      .portfolio-intro { padding: 80px 24px 40px; flex-direction: column; gap: 16px; }

      #furniture { padding: 100px 24px; }
      .furniture-grid { grid-template-columns: 1fr; gap: 60px; }
      .furniture-visual { height: 400px; }

      #why { padding: 100px 24px; }
      .why-grid { grid-template-columns: 1fr 1fr; }

      #quote { padding: 100px 24px; }
      .options-grid-3 { grid-template-columns: repeat(2, 1fr); }
      .options-grid-4 { grid-template-columns: repeat(2, 1fr); }
      .contact-fields { grid-template-columns: 1fr; }
      .form-progress { gap: 0; }
      .step-circle { width: 28px; height: 28px; font-size: 0.7rem; }
      .step-label-text { display: none; }

      footer { padding: 80px 24px 40px; }
      .footer-top { grid-template-columns: 1fr; gap: 48px; }
      .footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
    }

    @media (max-width: 480px) {
      .options-grid-3, .options-grid-4 { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════════════
       MOBILE NAV MENU
    ═══════════════════════════════════════════════ */
    .mobile-menu {
      position: fixed;
      inset: 0;
      background: rgba(8,8,7,0.97);
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 40px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s;
    }
    .mobile-menu.open { opacity: 1; pointer-events: auto; }
    .mobile-menu a {
      font-family: var(--font-display);
      font-size: 2.2rem;
      font-weight: 300;
      color: var(--cream);
      text-decoration: none;
      letter-spacing: 0.05em;
      transition: color 0.3s;
    }
    .mobile-menu a:hover { color: var(--gold); }
    .mobile-menu a.mobile-portal-link {
      width: 48px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(201,169,110,0.24);
      background: rgba(201,169,110,0.06);
      font-size: 0;
      line-height: 0;
      letter-spacing: 0;
    }
    .mobile-menu a.mobile-portal-link svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    /* Misc */
    .gold-line {
      width: 60px;
      height: 1px;
      background: var(--gold);
      margin: 0 auto;
    }

    /* ═══════════════════════════════════════════════
       SHOP SECTION
    ═══════════════════════════════════════════════ */
    #shop {
      background: var(--ivory);
      padding: 140px 0 100px;
      color: var(--black);
    }
    .shop-inner { max-width: 1400px; margin: 0 auto; padding: 0 48px; }
    .shop-header { margin-bottom: 60px; }
    .shop-header .section-label { color: var(--gold-dark); }
    .shop-header .section-label::before { background: var(--gold-dark); }
    .shop-title {
      font-family: var(--font-display);
      font-size: clamp(36px, 4.5vw, 68px);
      font-weight: 300;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--black);
      margin-bottom: 14px;
    }
    .shop-title em { font-style: italic; color: var(--gold-dark); }
    .shop-subtitle {
      font-size: 0.78rem;
      font-weight: 300;
      color: var(--stone);
      letter-spacing: 0.08em;
      line-height: 1.8;
      max-width: 520px;
    }
    .shop-layout {
      display: grid;
      grid-template-columns: 210px 1fr;
      gap: 56px;
      align-items: start;
    }
    .shop-sidebar { position: sticky; top: 100px; }
    .shop-filter-group { margin-bottom: 40px; }
    .shop-filter-title {
      font-family: var(--font-body);
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--black);
      margin-bottom: 18px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .shop-cat-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .shop-cat-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.75rem;
      font-weight: 300;
      color: var(--stone);
      cursor: pointer;
      letter-spacing: 0.06em;
      transition: color 0.25s;
      padding: 2px 0;
    }
    .shop-cat-item::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: transparent;
      border: 1px solid var(--sand);
      flex-shrink: 0;
      transition: all 0.25s;
    }
    .shop-cat-item.active { color: var(--black); font-weight: 400; }
    .shop-cat-item.active::before { background: var(--gold-dark); border-color: var(--gold-dark); }
    .shop-cat-item:hover { color: var(--black); }
    .shop-mat-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .shop-mat-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.72rem;
      font-weight: 300;
      color: var(--stone);
      cursor: pointer;
      letter-spacing: 0.05em;
      transition: color 0.25s;
    }
    .shop-mat-item input[type="checkbox"] {
      width: 14px; height: 14px;
      border: 1px solid var(--sand);
      appearance: none; -webkit-appearance: none;
      cursor: pointer;
      position: relative;
      flex-shrink: 0;
      background: white;
      transition: all 0.2s;
    }
    .shop-mat-item input[type="checkbox"]:checked { background: var(--gold-dark); border-color: var(--gold-dark); }
    .shop-mat-item input[type="checkbox"]:checked::after {
      content: '';
      position: absolute;
      top: 1px; left: 3px;
      width: 5px; height: 8px;
      border-right: 1.5px solid white;
      border-bottom: 1.5px solid white;
      transform: rotate(45deg);
    }
    .shop-mat-item:hover { color: var(--black); }
    .shop-consult-card {
      background: rgba(201,169,110,0.1);
      border: 1px solid rgba(201,169,110,0.25);
      padding: 22px 20px;
      margin-top: 36px;
    }
    .shop-consult-title { font-size: 0.7rem; font-weight: 500; color: var(--black); letter-spacing: 0.06em; margin-bottom: 8px; }
    .shop-consult-desc { font-size: 0.65rem; font-weight: 300; color: var(--stone); line-height: 1.8; margin-bottom: 14px; }
    .shop-consult-link {
      font-size: 0.6rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--gold-dark); text-decoration: none;
      border-bottom: 1px solid var(--gold-dark); padding-bottom: 2px;
      transition: opacity 0.2s;
    }
    .shop-consult-link:hover { opacity: 0.7; }
    .shop-sort-bar {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 28px; padding-bottom: 16px;
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .shop-result-count { font-size: 0.68rem; font-weight: 300; color: var(--stone); letter-spacing: 0.08em; }
    .shop-result-count span { color: var(--black); font-weight: 400; }
    .shop-sort-select {
      font-family: var(--font-body);
      font-size: 0.68rem; font-weight: 300; color: var(--black);
      background: transparent; border: 1px solid rgba(0,0,0,0.15);
      padding: 8px 32px 8px 14px; outline: none; cursor: pointer; letter-spacing: 0.06em;
      appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6560' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-color: transparent;
    }
    .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .product-card {
      background: white;
      cursor: auto;
      transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
      position: relative;
    }
    .product-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0,0,0,0.09); }
    .product-img-wrap {
      position: relative; overflow: hidden;
      aspect-ratio: 4/3; background: #f0ece6;
    }
    .prod-bg {
      width: 100%; height: 100%;
      position: absolute; inset: 0;
      transition: transform 0.6s var(--ease-out);
    }
    .product-card:hover .prod-bg { transform: scale(1.04); }
    /* product background art */
    .prod-chair { background: linear-gradient(145deg,#e8ddd0,#c9bba8); }
    .prod-chair::before { content:''; position:absolute; bottom:15%; left:20%; right:20%; height:35%; background:linear-gradient(90deg,#8b6914,#a07820,#8b6914); border-radius:2px; }
    .prod-chair::after { content:''; position:absolute; bottom:48%; left:30%; right:30%; height:30%; background:linear-gradient(180deg,#9a7320,#7a5c10); border-radius:0 0 4px 4px; }
    .prod-table { background: linear-gradient(135deg,#e4ddd5,#d8d0c8); }
    .prod-table::before { content:''; position:absolute; top:25%; left:15%; right:15%; height:40%; background:radial-gradient(ellipse,#c8c0b4,#a89888); border-radius:50%; }
    .prod-table::after { content:''; position:absolute; bottom:15%; left:44%; width:12%; height:30%; background:linear-gradient(180deg,#9c8060,#7a6040); border-radius:50px; }
    .prod-sofa { background: linear-gradient(160deg,#2a4a3a,#162a1e); }
    .prod-sofa::before { content:''; position:absolute; bottom:20%; left:10%; right:10%; height:40%; background:linear-gradient(180deg,#2e5040,#1a3028); border-radius:8px 8px 0 0; }
    .prod-shelf { background: linear-gradient(145deg,#f0ebe4,#e0d8cc); }
    .prod-shelf::before { content:''; position:absolute; bottom:20%; left:10%; right:10%; height:45%; background:linear-gradient(180deg,#b09060,#8a7040); border-radius:2px; }
    .prod-shelf::after { content:''; position:absolute; bottom:20%; left:10%; right:10%; height:3px; background:#7a6030; }
    .prod-desk { background: linear-gradient(140deg,#1a2030,#1a2030); }
    .prod-desk::before { content:''; position:absolute; bottom:25%; left:15%; right:15%; height:30%; background:linear-gradient(180deg,#b09060,#8a6a30); border-radius:60% 60% 40% 40%; }
    .prod-lamp { background: linear-gradient(160deg,#1a3040,#1a3040); }
    .prod-lamp::before { content:''; position:absolute; top:10%; left:35%; right:35%; height:50%; background:linear-gradient(180deg,#c09040,#e0b060,#c09040); border-radius:0 0 40% 40%; clip-path:polygon(10% 0%,90% 0%,100% 100%,0% 100%); }
    .prod-lamp::after { content:''; position:absolute; top:5%; left:48%; width:4%; height:12%; background:rgba(255,255,255,0.15); }
    .prod-armchair { background: linear-gradient(145deg,#f2ede6,#e8e0d6); }
    .prod-armchair::before { content:''; position:absolute; bottom:18%; left:12%; right:12%; height:42%; background:linear-gradient(180deg,#d8d0c4,#c4b8a8); border-radius:50% 50% 10% 10%; }
    .prod-bed { background: linear-gradient(160deg,#f8f4ee,#eee8e0); }
    .prod-bed::before { content:''; position:absolute; bottom:20%; left:8%; right:8%; height:35%; background:linear-gradient(90deg,#c4b89c,#d0c4a8,#c4b89c); border-radius:4px; }
    .prod-mirror { background: linear-gradient(135deg,#e8e4dc,#ddd8d0); }
    .prod-mirror::before { content:''; position:absolute; top:12%; left:28%; right:28%; bottom:15%; background:linear-gradient(135deg,rgba(200,190,180,0.6),rgba(180,170,160,0.4)); border:2px solid #b0a898; border-radius:100px; }
    .prod-vase { background: linear-gradient(145deg,#1e1a14,#2a2418); }
    .prod-vase::before { content:''; position:absolute; bottom:15%; left:36%; right:36%; height:55%; background:linear-gradient(180deg,#c9a96e,#a08040,#c9a96e); border-radius:30% 30% 20% 20%; }
    .prod-stool { background: linear-gradient(160deg,#2c2820,#1e1c16); }
    .prod-stool::before { content:''; position:absolute; top:30%; left:20%; right:20%; height:20%; background:linear-gradient(90deg,#8a7050,#a08860,#8a7050); border-radius:4px; }
    .prod-stool::after { content:''; position:absolute; bottom:20%; left:35%; right:35%; height:30%; background:linear-gradient(180deg,#6a5030,#4a3820); }
    .product-quick-add {
      position: absolute; bottom:0; left:0; right:0;
      background: rgba(8,8,7,0.85);
      backdrop-filter: blur(8px);
      padding: 12px 18px;
      display: flex; align-items: center; justify-content: space-between;
      transform: translateY(100%);
      transition: transform 0.35s var(--ease-out);
    }
    .product-card:hover .product-quick-add { transform: translateY(0); }
    .quick-add-text { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream); }
    .quick-add-btn {
      width: 32px; height: 32px;
      background: var(--gold); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s;
    }
    .quick-add-btn:hover { background: var(--gold-light); }
    .quick-add-btn svg { width: 14px; height: 14px; }
    .product-badge {
      position: absolute; top:12px; left:12px;
      font-size: 0.52rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase;
      padding: 4px 10px; z-index: 1;
    }
    .badge-new { background: var(--gold); color: var(--black); }
    .badge-custom { background: rgba(8,8,7,0.7); color: var(--cream); border: 1px solid rgba(201,169,110,0.4); }
    .product-info { padding: 16px 18px 20px; }
    .product-name {
      font-family: var(--font-display);
      font-size: 1.05rem; font-weight: 400; color: var(--black);
      margin-bottom: 4px;
      display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    }
    .product-price { font-family: var(--font-display); font-size: 0.95rem; font-weight: 300; color: var(--black); white-space: nowrap; }
    .product-material-tag {
      display: inline-block;
      font-size: 0.52rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--gold-dark); background: rgba(156,122,68,0.1);
      padding: 3px 10px; margin-top: 8px;
    }
    .cart-toast {
      position: fixed; bottom:32px; right:32px;
      background: var(--black); border: 1px solid rgba(201,169,110,0.3);
      padding: 16px 24px;
      display: flex; align-items: center; gap: 14px;
      z-index: 9000;
      transform: translateY(120px); opacity: 0;
      transition: transform 0.4s var(--ease-out), opacity 0.4s;
      pointer-events: none;
    }
    .cart-toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .cart-toast-icon { font-size: 1.1rem; }
    .cart-toast-text { font-size: 0.68rem; letter-spacing: 0.1em; color: var(--cream); }
    .cart-toast-name { color: var(--gold); font-weight: 400; }
    .nav-cart {
      position: relative; display: flex; align-items: center; gap: 8px;
      font-family: var(--font-body);
      font-size: 0.68rem; font-weight: 400; letter-spacing: 0.12em;
      color: var(--sand); cursor: pointer; text-decoration: none;
      transition: color 0.3s;
    }
    .nav-cart:hover { color: var(--white); }
    .cart-badge {
      position: absolute; top:-6px; right:-8px;
      width: 16px; height: 16px;
      background: var(--gold); border-radius: 50%;
      font-size: 0.52rem; font-weight: 500; color: var(--black);
      display: none; align-items: center; justify-content: center; line-height: 1;
    }
    .cart-badge.visible { display: flex; }
    @media (max-width: 900px) {
      .shop-layout { grid-template-columns: 1fr; }
      .shop-sidebar { position: static; }
      .shop-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 580px) {
      .shop-grid { grid-template-columns: 1fr; }
      .shop-inner { padding: 0 24px; }
    }

    /* NAV SEARCH */
    .nav-search {
      position: relative;
      display: flex;
      align-items: center;
    }
    .nav-search-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--sand);
      display: flex;
      align-items: center;
      padding: 6px;
      transition: color 0.3s;
    }
    .nav-search-btn:hover { color: var(--white); }
    .nav-search-expand {
      position: absolute;
      right: 32px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(8,8,7,0.95);
      border: 1px solid rgba(201,169,110,0.25);
      padding: 0;
      width: 0;
      overflow: hidden;
      opacity: 0;
      transition: width 0.4s var(--ease-out), opacity 0.3s, padding 0.4s;
      white-space: nowrap;
    }
    .nav-search-expand.open {
      width: 240px;
      opacity: 1;
      padding: 10px 14px;
    }
    .nav-search-input {
      background: none;
      border: none;
      outline: none;
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 300;
      color: var(--cream);
      letter-spacing: 0.08em;
      width: 100%;
    }
    .nav-search-input::placeholder { color: var(--stone); }
    .nav-search-close {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--stone);
      font-size: 0.65rem;
      transition: color 0.2s;
      flex-shrink: 0;
    }
    .nav-search-close:hover { color: var(--gold); }

    /* ── LIGHT / DARK TOGGLE ── */
    body.light-mode {
      --black: #f5f1eb;
      --warm-black: #ede8e0;
      --charcoal: #e0dbd2;
      --dark: #d4cec6;
      --stone: #6b6056;
      --warm-grey: #4a4238;
      --sand: #3a3228;
      --cream: #2a2420;
      --white: #1a1612;
      background: #f5f1eb;
      color: #2a2420;
    }
    body.light-mode nav { background: rgba(245,241,235,0.78) !important; border-bottom-color: rgba(155,44,44,0.15); }
    body.light-mode nav .nav-links a { color: #5a5248; }
    body.light-mode nav .nav-links a:hover { color: #1a1612; }
    body.light-mode .hero-bg { background: linear-gradient(105deg, #ddd6cc 0%, #e8e0d4 50%, #f0ebe2 100%) !important; }
    body.light-mode #storytelling { background: #e8e2d8; }
    body.light-mode #process { background: #f5f1eb; }
    body.light-mode #services { background: #ede8e0; }
    body.light-mode #why { background: #f5f1eb; }
    body.light-mode #furniture { background: #e8e2d8; }
    body.light-mode .service-card { background: #ede8e0; }
    body.light-mode .service-card:hover { background: #e5dfd6; }
    body.light-mode .why-card { background: #f5f1eb; }
    body.light-mode footer { background: #e8e2d8; }
    body.light-mode .process-sticky { background: #f5f1eb; }

    .theme-toggle {
      position: fixed;
      bottom: 32px;
      right: 32px;
      z-index: 500;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(155,44,44,0.12);
      border: 1px solid rgba(155,44,44,0.35);
      cursor: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      backdrop-filter: blur(8px);
    }
    .theme-toggle:hover { background: rgba(155,44,44,0.25); transform: scale(1.08); }
    .icon-dark { display: block; }
    .icon-light { display: none; }
    body.light-mode .icon-dark { display: none; }
    body.light-mode .icon-light { display: block; }

    /* ══ TEXT READABILITY FIXES ══ */
    .section-label { font-size: 0.72rem !important; font-weight: 500 !important; letter-spacing: 0.28em !important; color: var(--red) !important; }
    body.light-mode .section-label { color: var(--red) !important; }
    .section-label::before { background: var(--red) !important; width: 28px !important; height: 2px !important; }
    body.light-mode .section-label::before { background: var(--red) !important; }
    .process-step-num { font-size: 0.72rem !important; font-weight: 500 !important; letter-spacing: 0.25em !important; color: var(--red) !important; }
    body.light-mode .process-step-num { color: var(--red) !important; }
    .process-step-desc { font-size: 0.88rem !important; line-height: 1.85 !important; color: var(--cream) !important; }
    body.light-mode .process-step-desc { color: #2a2420 !important; }
    .process-tag { font-size: 0.65rem !important; letter-spacing: 0.15em !important; color: var(--cream) !important; border-color: rgba(201,169,110,0.35) !important; }
    body.light-mode .process-tag { color: #3a3228 !important; border-color: rgba(155,44,44,0.3) !important; }
    .service-desc { font-size: 0.82rem !important; line-height: 1.9 !important; color: var(--cream) !important; }
    body.light-mode .service-desc { color: #3a3228 !important; }
    .service-name { font-size: 1.5rem !important; }
    .step-desc { font-size: 0.7rem !important; line-height: 1.6 !important; color: var(--cream) !important; }
    body.light-mode .step-desc { color: #3a3228 !important; }
    .step-title { font-size: 1.28rem !important; }
    .why-desc { font-size: 0.82rem !important; line-height: 1.9 !important; color: var(--cream) !important; }
    body.light-mode .why-desc { color: #3a3228 !important; }
    .why-label { font-size: 0.68rem !important; letter-spacing: 0.2em !important; color: var(--warm-grey) !important; }
    .story-intro-text { font-size: 0.85rem !important; color: var(--cream) !important; }
    body.light-mode .story-intro-text { color: #3a3228 !important; }
    .hero-desc { font-size: 0.88rem !important; color: var(--cream) !important; }
    body.light-mode .hero-desc { color: #3a3228 !important; }
    .furniture-desc { font-size: 0.85rem !important; color: var(--cream) !important; line-height: 2 !important; }
    body.light-mode .furniture-desc { color: #3a3228 !important; }
    .ff-value { font-size: 1.05rem !important; color: var(--cream) !important; }
    body.light-mode .ff-value { color: #2a2420 !important; }
    .ff-label { font-size: 0.65rem !important; letter-spacing: 0.2em !important; color: var(--red) !important; }
    body.light-mode .ff-label { color: var(--red) !important; }
    .hero-eyebrow { font-size: 0.72rem !important; color: var(--red) !important; }
    body.light-mode .hero-eyebrow { color: var(--red) !important; }
    .stat-label { font-size: 0.65rem !important; color: var(--warm-grey) !important; }
    .footer-col-title { font-size: 0.68rem !important; color: var(--red) !important; }
    body.light-mode .footer-col-title { color: var(--red) !important; }
    .footer-tagline { font-size: 1.1rem !important; color: var(--warm-grey) !important; }
    body.light-mode .footer-tagline { color: #5a5248 !important; }
    .nav-links a { font-size: 0.72rem !important; }

    /* Language menu */
    .lang-menu {
      position: relative;
      display: flex;
      align-items: center;
      margin-right: 8px;
      z-index: 1200;
    }
    .lang-trigger {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 58px;
      justify-content: center;
      padding: 8px 10px;
      border: 1px solid rgba(201,169,110,0.22);
      background: rgba(201,169,110,0.06);
      color: var(--sand);
      font-family: var(--font-body);
      font-size: 0.58rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .lang-trigger:hover,
    .lang-menu.open .lang-trigger {
      color: var(--white);
      border-color: rgba(201,169,110,0.5);
      background: rgba(155,44,44,0.14);
    }
    .lang-trigger svg {
      width: 10px;
      height: 10px;
      transition: transform 0.2s;
    }
    .lang-menu.open .lang-trigger svg { transform: rotate(180deg); }
    .lang-options {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 150px;
      padding: 6px;
      display: grid;
      gap: 2px;
      background: rgba(13,12,10,0.96);
      border: 1px solid rgba(201,169,110,0.22);
      box-shadow: 0 18px 46px rgba(0,0,0,0.28);
      backdrop-filter: blur(18px);
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity 0.2s, transform 0.2s;
    }
    .lang-menu.open .lang-options {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .lang-option {
      border: 0;
      background: transparent;
      color: var(--sand);
      padding: 9px 10px;
      text-align: left;
      font-family: var(--font-body);
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color 0.2s, background 0.2s;
    }
    .lang-option:hover,
    .lang-option.active {
      color: var(--white);
      background: rgba(155,44,44,0.18);
    }
    body.light-mode .lang-trigger {
      color: #4a4238;
      border-color: rgba(155,44,44,0.24);
      background: rgba(155,44,44,0.06);
    }
    body.light-mode .lang-trigger:hover,
    body.light-mode .lang-menu.open .lang-trigger {
      color: #1a1612;
      border-color: rgba(155,44,44,0.45);
      background: rgba(155,44,44,0.1);
    }
    body.light-mode .lang-options {
      background: rgba(245,241,235,0.98);
      border-color: rgba(155,44,44,0.18);
      box-shadow: 0 18px 40px rgba(80,55,35,0.14);
    }
    body.light-mode .lang-option { color: #5a5248; }
    body.light-mode .lang-option:hover,
    body.light-mode .lang-option.active {
      color: #1a1612;
      background: rgba(155,44,44,0.1);
    }
    body[dir="rtl"] .nav-links { flex-direction: row-reverse; }
    body[dir="rtl"] .hero-content,
    body[dir="rtl"] .portfolio-intro p { text-align: right; }
    body[dir="rtl"] .hero-panels { transform: none; }
    body[dir="rtl"] .panel-1 { right: auto; left: 8%; }
    body[dir="rtl"] .panel-2 { right: auto; left: 22%; }
    body[dir="rtl"] .panel-3 { right: auto; left: 28%; }
    body[dir="rtl"] .hero-number { left: 48px; right: auto; }
    body[dir="rtl"] .story-strip-wrapper,
    body[dir="rtl"] .portfolio-track-wrapper { direction: ltr; }
    body[dir="rtl"] footer { direction: rtl; }
    body[dir="rtl"] .footer-top {
      direction: rtl;
      grid-template-columns: 1fr 1fr 2fr;
      gap: 80px;
      text-align: right;
      align-items: start;
    }
    body[dir="rtl"] .footer-brand { grid-column: 3; grid-row: 1; justify-self: end; direction: rtl; text-align: right; }
    body[dir="rtl"] .footer-top > div:nth-child(2) { grid-column: 2; grid-row: 1; justify-self: stretch; direction: rtl; text-align: right; }
    body[dir="rtl"] .footer-top > div:nth-child(3) { grid-column: 1; grid-row: 1; justify-self: stretch; direction: rtl; text-align: right; }
    body[dir="rtl"] .footer-brand .nav-logo { flex-direction: row-reverse; }
    body[dir="rtl"] .footer-tagline { direction: rtl; text-align: right; }
    body[dir="rtl"] .footer-social { justify-content: flex-end; }
    body[dir="rtl"] .footer-bottom { direction: rtl; flex-direction: row; }
    body[dir="rtl"] .footer-copy { text-align: right; }
    body[dir="rtl"] .footer-legal { flex-direction: row-reverse; }
    body[dir="rtl"] .section-label { flex-direction: row-reverse; }
    body[dir="rtl"] .section-label::before { display: none; }
    body[dir="rtl"] .section-label::after { content:''; width:32px; height:1px; background:var(--red); flex-shrink:0; }
    body[dir="rtl"] .footer-links a { direction: rtl; flex-direction: row-reverse; justify-content: flex-start; text-align: right; }
    body[dir="rtl"] .footer-links a::before { display: block; }
    body[dir="rtl"] .lang-options { right: auto; left: 0; }

    html[lang="ar"] body,
    html[lang="ar"] body :where(a, button, input, select, textarea, label, p, span, li, h1, h2, h3, h4, h5, h6, small, div) {
      font-family: var(--font-arabic) !important;
      letter-spacing: 0 !important;
    }

    html[lang="ar"] .nav-logo,
    html[lang="ar"] .footer-brand .nav-logo {
      font-family: var(--font-display) !important;
      letter-spacing: 0.18em !important;
    }

    html[lang="ar"] .section-label,
    html[lang="ar"] .hero-eyebrow,
    html[lang="ar"] .footer-col-title,
    html[lang="ar"] .project-filter,
    html[lang="ar"] .project-status,
    html[lang="ar"] .project-back-link {
      letter-spacing: 0.03em !important;
    }

    html[lang="ar"] .hero-title,
    html[lang="ar"] .section-title,
    html[lang="ar"] .story-title,
    html[lang="ar"] .process-heading,
    html[lang="ar"] .furniture-title,
    html[lang="ar"] .why-title,
    html[lang="ar"] .portfolio-item-title,
    html[lang="ar"] .footer-tagline {
      font-family: var(--font-arabic) !important;
      font-weight: 600;
      letter-spacing: 0 !important;
    }

      body.light-mode .nav-logo,
    body.light-mode .nav-search-btn,
    body.light-mode .nav-cart,
    body.light-mode .nav-cta,
    body.light-mode .hero-title,
    body.light-mode .section-title,
    body.light-mode .story-title,
    body.light-mode .process-step-title,
    body.light-mode .portfolio-item-title,
    body.light-mode .furniture-title,
    body.light-mode .footer-copy,
    body.light-mode .footer-legal a,
    body.light-mode .footer-links a { color: #1a1612 !important; }
    body.light-mode .nav-search-expand { background: rgba(245,241,235,0.96); border-color: rgba(155,44,44,0.2); }
    body.light-mode .nav-search-input { color: #1a1612; }
    body.light-mode .nav-search-input::placeholder,
    body.light-mode .nav-search-close,
    body.light-mode .scroll-text,
    body.light-mode .portfolio-item-cat,
    body.light-mode .scroll-hint-text { color: #5a5248 !important; }
    body.light-mode .btn-secondary { color: #1a1612; border-bottom-color: rgba(155,44,44,0.35); }

  
    /* Follow-up fixes */
    html, body, * { cursor: auto !important; }
    a, button, input, select, textarea, label, .option-card, .product-card, .shop-cat-item, .shop-mat-item, .quick-add-btn, .lang-trigger, .lang-option { cursor: pointer !important; }
    input, textarea { cursor: text !important; }
    .cursor, .cursor-ring { display: none !important; }
    nav { gap: 22px; justify-content: flex-start; background: rgba(8,8,7,0.68); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(201,169,110,0.1); }
    .nav-logo { display: inline-flex !important; align-items: center !important; gap: 12px !important; white-space: nowrap; }
    .nav-logo-img { display: block !important; width: 42px !important; height: 42px !important; object-fit: contain !important; }
    .nav-links { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; align-items: center; }
    .nav-search { margin-left: auto; }
    .lang-menu { margin: 0 10px !important; flex-shrink: 0; z-index: 1300; }
    .lang-options { z-index: 3000; }
    body[dir="rtl"] nav { direction: rtl; }
    body[dir="rtl"] .nav-links { left: 50%; right: auto; margin: 0; transform: translateX(-50%); flex-direction: row-reverse; }
    body[dir="rtl"] .nav-search { margin-left: 0; margin-right: auto; }
    body[dir="rtl"] .lang-menu { margin: 0 10px !important; }
    html[lang="tr"] .hero-title { font-size: clamp(46px, 5.7vw, 86px); line-height: 0.98; }
    html[lang="tr"] .hero-eyebrow { margin-bottom: 14px; }
    html[lang="tr"] .hero-actions { margin-bottom: 34px; }
    body.light-mode,
    body.light-mode p,
    body.light-mode li,
    body.light-mode a,
    body.light-mode span,
    body.light-mode label,
    body.light-mode input,
    body.light-mode textarea,
    body.light-mode select,
    body.light-mode .section-label,
    body.light-mode .services-intro,
    body.light-mode .story-intro-text,
    body.light-mode .process-step-desc,
    body.light-mode .portfolio-intro p,
    body.light-mode .furniture-desc,
    body.light-mode .why-desc,
    body.light-mode .footer-links a,
    body.light-mode .footer-copy,
    body.light-mode .footer-legal a,
    body.light-mode .footer-tagline,
    body.light-mode .form-step-sub,
    body.light-mode .quote-left-desc,
    body.light-mode .ql-step,
    body.light-mode .fpd-label,
    body.light-mode .shop-page-desc,
    body.light-mode .shop-consult-desc,
    body.light-mode .commission-desc { color: #211a14 !important; }
    body.light-mode .section-title,
    body.light-mode .hero-title,
    body.light-mode .story-title,
    body.light-mode .process-step-title,
    body.light-mode .portfolio-item-title,
    body.light-mode .furniture-title,
    body.light-mode .why-number,
    body.light-mode .form-step-question,
    body.light-mode .option-label,
    body.light-mode .shop-page-title,
    body.light-mode .commission-title,
    body.light-mode .product-name,
    body.light-mode .product-price { color: #0f0c09 !important; }
    body.light-mode .hero-eyebrow,
    body.light-mode .section-label,
    body.light-mode .footer-col-title,
    body.light-mode .quote-left-label,
    body.light-mode .shop-eyebrow,
    body.light-mode .commission-eyebrow { color: #8f2626 !important; }
    body.light-mode .hero-number,
    body.light-mode .step-num,
    body.light-mode .why-number { -webkit-text-stroke-color: rgba(130,70,35,0.26) !important; }
    body.light-mode .hero-number {
      color: rgba(130,70,35,0.035) !important;
      text-shadow: 0 0 34px rgba(130,70,35,0.13), 0 0 90px rgba(130,70,35,0.065);
    }

    /* ═══════════════════════════════════════════════
       PROJECT ARCHIVE PAGES
    ═══════════════════════════════════════════════ */
    .nav-links a.active { color: var(--gold); }

    .project-page {
      min-height: 100vh;
      background:
        radial-gradient(circle at 72% 14%, rgba(201,169,110,0.08), transparent 32%),
        linear-gradient(180deg, #0b0a09 0%, #12110f 48%, #0a0908 100%);
      color: var(--cream);
    }

    .projects-hero,
    .project-detail-hero {
      position: relative;
      min-height: 52vh;
      padding: 170px 48px 90px;
      overflow: hidden;
      border-bottom: 1px solid rgba(201,169,110,0.1);
    }

    .projects-hero::before,
    .project-detail-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(8,8,7,0.95) 0%, rgba(8,8,7,0.78) 46%, rgba(8,8,7,0.55) 100%),
        radial-gradient(circle at 78% 45%, rgba(201,169,110,0.14), transparent 34%);
      z-index: 1;
    }

    .projects-hero .hero-grid,
    .project-detail-hero .hero-grid { z-index: 0; }

    .projects-hero-inner,
    .project-detail-hero > :not(.hero-grid) {
      position: relative;
      z-index: 2;
    }

    .projects-hero-inner {
      max-width: 760px;
    }

    .projects-hero h1,
    .project-detail-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(54px, 7.8vw, 126px);
      font-weight: 300;
      line-height: 0.92;
      color: var(--white);
      letter-spacing: -0.02em;
      margin-top: 26px;
    }

    .projects-hero h1 em,
    .project-detail-hero h1 em {
      color: var(--gold);
      font-style: italic;
    }

    .projects-hero p,
    .project-detail-hero p {
      max-width: 620px;
      color: var(--warm-grey);
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      line-height: 2;
      margin-top: 28px;
    }

    .projects-shell,
    .project-detail-shell {
      padding: 54px 42px 110px;
      max-width: 1880px;
      margin: 0 auto;
    }

    .project-filters {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      margin-bottom: 42px;
    }

    .project-filter {
      appearance: none;
      border: 1px solid rgba(201,169,110,0.16);
      background: rgba(255,255,255,0.02);
      color: var(--stone);
      min-width: 150px;
      height: 44px;
      padding: 0 24px;
      font-family: var(--font-body);
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      transition: color 0.3s, background 0.3s, border-color 0.3s, transform 0.3s;
    }

    .project-filter:hover,
    .project-filter.active {
      color: var(--black);
      background: var(--gold);
      border-color: var(--gold);
      transform: translateY(-1px);
    }

    .nav-portal {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      color: var(--sand);
      text-decoration: none;
      border: 1px solid rgba(201,169,110,0.24);
      background: rgba(201,169,110,0.06);
      padding: 0;
      transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s;
      flex-shrink: 0;
    }
    .nav-portal svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }
    .nav-portal:hover {
      color: var(--white);
      border-color: rgba(201,169,110,0.5);
      background: rgba(155,44,44,0.12);
      transform: translateY(-1px);
    }

    .project-status {
      min-height: 20px;
      margin-bottom: 24px;
      color: var(--stone);
      font-size: 0.68rem;
      letter-spacing: 0.18em;
      text-align: center;
      text-transform: uppercase;
    }

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 34px;
    }

    .project-card {
      position: relative;
      display: block;
      min-height: clamp(260px, 18vw, 380px);
      overflow: hidden;
      background: #12100e;
      border: 1px solid rgba(201,169,110,0.12);
      text-decoration: none;
      isolation: isolate;
      animation: projectCardIn 0.8s var(--ease-out) both;
      animation-delay: var(--project-delay, 0ms);
    }

    .project-cover,
    .project-cover img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .project-cover {
      background-size: cover;
      background-position: center;
      transform: scale(1.01);
      filter: brightness(1.12) saturate(1.04) contrast(1.02);
      transition: transform 0.9s var(--ease-out), filter 0.6s;
    }

    .project-cover img {
      object-fit: cover;
      opacity: 1;
      filter: brightness(1.12) saturate(1.04) contrast(1.02);
    }

    .project-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(8,8,7,0.02) 0%, rgba(8,8,7,0.03) 42%, rgba(8,8,7,0.32) 100%),
        linear-gradient(90deg, rgba(8,8,7,0.08), transparent 44%);
      opacity: 0.16;
      z-index: 1;
      transition: opacity 0.45s;
    }

    .project-card-glow {
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(201,169,110,0.2);
      box-shadow: 0 0 40px rgba(201,169,110,0.08), inset 0 0 34px rgba(201,169,110,0.035);
      opacity: 0;
      z-index: 2;
      transition: opacity 0.45s, transform 0.45s;
      transform: scale(0.985);
    }

    .project-card-name {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      padding: 32px;
      color: var(--white);
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
      text-align: center;
    }

    .project-card-name span {
      display: block;
      font-family: var(--font-body);
      font-size: 0.74rem;
      font-weight: 500;
      letter-spacing: 0.38em;
      text-transform: uppercase;
      overflow-wrap: anywhere;
    }

    .project-card-name small {
      display: block;
      margin-top: 12px;
      color: var(--gold);
      font-size: 0.58rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }

    .project-card:hover .project-cover,
    .project-card:focus-visible .project-cover {
      transform: scale(1.065);
      filter: brightness(0.88) saturate(1) contrast(1.02);
    }

    .project-card:hover::before,
    .project-card:focus-visible::before { opacity: 0.72; }

    .project-card:hover .project-card-glow,
    .project-card:focus-visible .project-card-glow {
      opacity: 1;
      transform: scale(1);
    }

    .project-card:hover .project-card-name,
    .project-card:focus-visible .project-card-name {
      opacity: 1;
      transform: translateY(0);
    }

    .project-back-link {
      display: inline-flex;
      color: var(--gold);
      text-decoration: none;
      font-size: 0.66rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      margin-bottom: 28px;
    }

    .project-gallery {
      column-count: 3;
      column-gap: 28px;
    }

    .project-gallery-item {
      appearance: none;
      display: block;
      width: 100%;
      margin: 0 0 28px;
      border: 1px solid rgba(201,169,110,0.13);
      background: #12100e;
      padding: 0;
      overflow: hidden;
      break-inside: avoid;
      cursor: pointer !important;
      animation: projectCardIn 0.8s var(--ease-out) both;
      animation-delay: var(--project-delay, 0ms);
    }

    .project-gallery-item img {
      display: block;
      width: 100%;
      height: auto;
      transition: transform 0.7s var(--ease-out), filter 0.5s;
    }

    .project-gallery-item:hover img {
      transform: scale(1.035);
      filter: brightness(1.08);
    }

    .project-lightbox {
      position: fixed;
      inset: 0;
      z-index: 5000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 44px;
      background: rgba(3,3,3,0.92);
      backdrop-filter: blur(18px);
    }

    .project-lightbox.active { display: flex; }

    .project-lightbox img {
      max-width: min(92vw, 1500px);
      max-height: 88vh;
      object-fit: contain;
      box-shadow: 0 26px 90px rgba(0,0,0,0.55);
    }

    .project-lightbox button {
      position: absolute;
      top: 24px;
      right: 28px;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(201,169,110,0.28);
      background: rgba(8,8,7,0.76);
      color: var(--gold);
      font-size: 1rem;
      cursor: pointer !important;
    }

    .whatsapp-float {
      position: fixed;
      left: 26px;
      bottom: 26px;
      z-index: 1400;
      width: 58px;
      height: 58px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #25d366;
      color: #fff;
      text-decoration: none;
      box-shadow: 0 0 0 0 rgba(37,211,102,0.55), 0 10px 28px rgba(0,0,0,0.32);
      animation: whatsappPulse 2.4s ease-in-out infinite;
    }

    .whatsapp-float svg {
      width: 31px;
      height: 31px;
      fill: currentColor;
    }

    .whatsapp-float:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 0 12px rgba(37,211,102,0.08), 0 14px 36px rgba(0,0,0,0.4);
    }

    @keyframes whatsappPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.48), 0 10px 28px rgba(0,0,0,0.32); }
      50% { box-shadow: 0 0 0 18px rgba(37,211,102,0), 0 10px 28px rgba(0,0,0,0.32); }
    }

    @keyframes projectCardIn {
      from { opacity: 0; transform: translateY(22px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 1180px) {
      .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .project-gallery { column-count: 2; }
    }

    @media (max-width: 760px) {
      .projects-hero,
      .project-detail-hero { padding: 130px 24px 64px; min-height: auto; }
      .projects-shell,
      .project-detail-shell { padding: 38px 20px 90px; }
      .project-filter { flex: 1 1 160px; min-width: 0; }
      .projects-grid { grid-template-columns: 1fr; gap: 22px; }
      .project-card { min-height: 310px; }
      .project-card-name { opacity: 1; transform: none; padding: 26px; }
      .project-card::before { opacity: 0.76; }
      .project-gallery { column-count: 1; }
      .whatsapp-float { width: 52px; height: 52px; left: 18px; bottom: 18px; }
      .whatsapp-float svg { width: 28px; height: 28px; }
    }

    /* Mobile stabilisation: keep the desktop composition, but remove desktop-only pinning on phones. */
    @media (max-width: 768px) {
      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      nav {
        min-height: 74px;
        padding: 14px 18px !important;
        gap: 10px !important;
        justify-content: flex-start !important;
      }

      body[dir="rtl"] nav {
        direction: ltr;
      }

      .nav-logo {
        max-width: 150px;
        flex: 0 1 150px;
        gap: 8px !important;
        font-size: 0.98rem !important;
        letter-spacing: 0.12em !important;
        overflow: hidden;
      }

      .nav-logo-img {
        width: 32px !important;
        height: 32px !important;
      }

      .nav-links,
      .nav-cta,
      .nav-cart {
        display: none !important;
      }

      .nav-search {
        display: none !important;
      }

      .nav-search-btn {
        padding: 5px !important;
      }

      .nav-search-expand {
        position: fixed;
        top: 78px;
        left: 16px;
        right: 16px;
        width: auto !important;
        max-width: none;
        z-index: 2500;
      }

      .nav-search-expand.open {
        width: auto !important;
        padding: 11px 14px !important;
      }

      .lang-menu {
        position: absolute;
        top: 20px;
        right: 62px;
        margin: 0 !important;
        flex-shrink: 0;
      }

      .lang-trigger {
        min-width: 50px;
        height: 34px;
        padding: 8px 8px;
      }

      .lang-options {
        right: 0;
        left: auto;
      }

      .nav-hamburger {
        display: flex !important;
        position: absolute;
        top: 20px;
        right: 18px;
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
      }

      .mobile-menu.open,
      .mobile-menu.active {
        opacity: 1;
        pointer-events: auto;
      }

      #hero {
        height: auto;
        min-height: 100svh;
        padding: 112px 24px 54px;
        justify-content: center;
      }

      .hero-slideshow {
        width: 100%;
        opacity: 0.32;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.16) 45%, #000 100%);
        mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.16) 45%, #000 100%);
      }

      .hero-slideshow.ready {
        opacity: calc(0.42 * var(--hero-image-scroll-opacity));
      }

      .hero-number {
        display: block;
        right: -36px;
        top: 55%;
        font-size: clamp(150px, 52vw, 230px);
        opacity: 0.5;
      }

      .hero-panels {
        display: none;
      }

      .hero-content {
        width: 100%;
        max-width: 100%;
      }

      .hero-eyebrow,
      .hero-desc,
      .hero-actions,
      .hero-stats,
      .hero-scroll-indicator {
        opacity: 1 !important;
        transform: none !important;
      }

      .hero-eyebrow {
        font-size: 0.58rem !important;
        letter-spacing: 0.28em;
        margin-bottom: 18px;
      }

      .hero-title {
        font-size: clamp(47px, 16vw, 68px);
        line-height: 0.96;
        margin-bottom: 24px;
      }

      .hero-title .line,
      .hero-title .line-inner {
        overflow: visible;
        transform: none !important;
      }

      .hero-desc {
        max-width: 330px;
        margin-bottom: 26px;
        font-size: 0.76rem !important;
      }

      .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 30px;
      }

      .btn-primary {
        max-width: 100%;
        padding: 14px 24px;
        white-space: normal;
      }

      .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        padding-top: 18px;
      }

      .stat-item {
        text-align: left;
      }

      .stat-number {
        font-size: 1.75rem;
      }

      .stat-label {
        font-size: 0.47rem;
        letter-spacing: 0.12em;
      }

      .hero-scroll-indicator {
        display: none;
      }

      #storytelling {
        padding: 84px 0 72px;
      }

      .story-header {
        padding: 0 24px;
        margin-bottom: 36px;
      }

      .story-title,
      .section-title {
        font-size: clamp(34px, 12vw, 52px);
        overflow-wrap: anywhere;
      }

      .story-pin-wrapper,
      .process-pin-wrapper,
      .portfolio-pin-wrapper {
        height: auto !important;
      }

      .story-sticky,
      .process-sticky,
      .portfolio-sticky {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        display: block !important;
      }

      .story-strip-wrapper {
        display: block;
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x proximity;
      }

      .story-strip {
        width: max-content;
        padding: 0 24px 8px;
        transform: none !important;
      }

      .story-step {
        width: min(82vw, 320px);
        padding: 30px 24px;
        scroll-snap-align: start;
      }

      .story-step:first-child {
        padding-left: 24px;
      }

      .process-left {
        padding: 90px 24px;
        border-right: 0;
      }

      .process-right,
      .process-counter,
      .process-progress {
        display: none !important;
      }

      .process-steps-container {
        min-height: 0;
      }

      .process-step-item,
      .process-step-item.active {
        position: relative !important;
        inset: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        margin-bottom: 36px;
      }

      .process-step-title {
        font-size: clamp(30px, 10vw, 44px);
      }

      #services,
      #furniture,
      #why,
      #quote {
        padding: 88px 24px;
      }

      .services-header,
      .furniture-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }

      .services-grid,
      .why-grid,
      .furniture-features {
        grid-template-columns: 1fr;
      }

      .service-card,
      .why-card {
        padding: 38px 28px;
      }

      .furniture-visual {
        height: 360px;
      }

      .portfolio-intro {
        padding: 88px 24px 34px;
        align-items: flex-start;
      }

      .portfolio-track-wrapper {
        display: block;
        overflow-x: auto;
        padding: 0 20px 28px;
        scroll-snap-type: x proximity;
      }

      .portfolio-track {
        width: max-content;
        height: auto !important;
        gap: 16px;
        padding-bottom: 12px;
        transform: none !important;
      }

      .portfolio-item,
      .portfolio-item:first-child {
        width: min(84vw, 340px) !important;
        height: 420px !important;
        scroll-snap-align: start;
      }

      .portfolio-scroll-hint {
        display: none;
      }

      footer {
        padding: 78px 24px 36px;
      }

      .footer-top {
        grid-template-columns: 1fr !important;
        gap: 42px;
      }

      .footer-bottom,
      body[dir="rtl"] .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        text-align: left;
      }

      body[dir="rtl"] .footer-brand,
      body[dir="rtl"] .footer-top > div:nth-child(2),
      body[dir="rtl"] .footer-top > div:nth-child(3) {
        grid-column: auto;
        grid-row: auto;
        justify-self: stretch;
      }

      .footer-legal,
      body[dir="rtl"] .footer-legal {
        flex-wrap: wrap;
        flex-direction: row;
        gap: 16px 24px;
      }

      .projects-hero,
      .project-detail-hero {
        min-height: auto;
        padding: 120px 24px 58px;
      }

      .projects-hero h1,
      .project-detail-hero h1 {
        max-width: 100%;
        font-size: clamp(44px, 16vw, 68px);
        line-height: 0.96;
        overflow-wrap: anywhere;
      }

      .projects-hero p,
      .project-detail-hero p {
        width: 100%;
        max-width: 330px !important;
        overflow-wrap: anywhere;
        font-size: 0.74rem;
      }

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

      .project-filter {
        width: 100%;
      }
    }

    @media (max-width: 420px) {
      .nav-logo {
        max-width: 140px;
        flex-basis: 140px;
        font-size: 0.92rem !important;
      }

      .hero-title {
        font-size: clamp(43px, 15vw, 60px);
      }

      .hero-stats {
        grid-template-columns: 1fr;
      }

      .portfolio-item,
      .portfolio-item:first-child {
        width: calc(100vw - 40px) !important;
      }
    }

    @media (max-width: 768px) {
      body nav .lang-menu {
        position: fixed !important;
        top: 20px !important;
        right: 62px !important;
        left: auto !important;
        margin: 0 !important;
        z-index: 2600 !important;
      }

      body nav .nav-hamburger {
        position: fixed !important;
        top: 20px !important;
        right: 18px !important;
        display: flex !important;
      }

      .nav-portal {
        width: 40px;
        height: 40px;
      }
    }