/* ---- css/main.css ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --black: #050505;
    --graphite: #0d0d0d;
    --charcoal: #161616;
    --surface: #1d1a17;
    --warm-white: #F5F3EF;
    --soft-gray: #8a8880;
    --muted: #4a4845;
    --tan: #9A7B5F;
    --bronze: #8A6A47;
    --burgundy: #4E1E1E;
    --cream: #e8e4dc;
    --gold: #c9a96e;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  html { scroll-behavior: smooth; }

  body {
    background: #ffffff;
    color: #1a1814;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    cursor: none;
  }

  /* Disable custom cursor on touch devices */
  @media (hover: none) and (pointer: coarse) {
    body { cursor: auto; }
    .cursor, .cursor-ring { display: none; }
  }

  /* CUSTOM CURSOR */
  .cursor {
    position: fixed;
    width: 8px; height: 8px;
    background: var(--gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483646;
    transform: translate(-50%, -50%);
    transition: transform 0.1s var(--ease), width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.35),
      0 0 10px rgba(201, 169, 110, 0.55);
  }
  .cursor-ring {
    position: fixed;
    width: 36px; height: 36px;
    border: 1px solid rgba(201,169,110,0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483645;
    transform: translate(-50%, -50%);
    transition: transform 0.18s var(--ease), width 0.4s var(--ease), height 0.4s var(--ease), opacity 0.3s;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  }
  body:has(a:hover) .cursor, body:has(button:hover) .cursor { width: 14px; height: 14px; }
  body:has(a:hover) .cursor-ring, body:has(button:hover) .cursor-ring { width: 56px; height: 56px; opacity: 0.5; }

  /* NAV */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 22px 40px;
    mix-blend-mode: normal;
    background: rgba(5,5,5,0.62);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(201,169,110,0.08);
    transition: background 0.45s var(--ease), padding 0.35s var(--ease), border-color 0.35s var(--ease);
  }
  nav.scrolled {
    background: rgba(5,5,5,0.92);
    backdrop-filter: blur(20px);
    padding: 16px 40px;
    border-bottom: 1px solid rgba(201,169,110,0.15);
  }
  .nav-logo {
    font-family: 'DM Serif Display', serif;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    transition: opacity 0.3s var(--ease);
  }
  .nav-logo:hover {
    opacity: 0.85;
  }
  .logo-primary {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--warm-white);
    font-style: normal;
    text-transform: uppercase;
    margin-bottom: 2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  .logo-secondary {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--gold);
    font-style: italic;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  
  /* Dark nav logo — consistent site-wide */
  nav.scrolled .logo-primary {
    color: var(--warm-white);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  }
  
  nav.scrolled .logo-secondary {
    color: var(--gold);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  }
  .nav-links { display: flex; gap: 32px; list-style: none; align-items: center; }
  .nav-links li { position: relative; }
  .nav-links a {
    font-family: 'DM Mono', monospace;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.22em;
    color: var(--soft-gray);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.28s var(--ease);
    display: inline-block;
    padding: 8px 0;
  }
  .nav-links a:hover { color: var(--warm-white); }
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: rgba(201,169,110,0.72);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s var(--ease);
  }
  .nav-links a:hover::after,
  .nav-links a.is-active::after {
    transform: scaleX(1);
  }
  .nav-cta {
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border: 1px solid rgba(201,169,110,0.4);
    padding: 11px 20px;
    transition: all 0.3s var(--ease);
  }
  .nav-cta:hover { background: var(--gold); color: var(--black); }

  /* HERO */
  #hero {
    position: relative;
    height: 100vh;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
    padding: 136px 60px 92px;
    overflow: hidden;
  }
  .hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .hero-bg {
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 70% 30%, rgba(154,123,95,0.1) 0%, transparent 55%),
      radial-gradient(ellipse at 20% 80%, rgba(78,30,30,0.18) 0%, transparent 50%),
      linear-gradient(to top, rgba(5,5,5,0.82) 0%, rgba(5,5,5,0.35) 42%, rgba(5,5,5,0.2) 100%);
  }
  .hero-noise {
    position: absolute; inset: 0;
    z-index: 2;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.6;
    pointer-events: none;
  }
  .hero-line {
    position: absolute; top: 0; right: 200px; bottom: 0;
    z-index: 2;
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, rgba(201,169,110,0.12) 30%, rgba(201,169,110,0.06) 70%, transparent 100%);
  }
  .hero-year {
    position: absolute; top: 50%; right: 60px;
    z-index: 3;
    transform: translateY(-50%) rotate(90deg);
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.35em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .hero-scroll-hint {
    position: absolute; bottom: 48px; right: 60px;
    z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
  }
  .hero-scroll-hint span {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--muted);
    text-transform: uppercase;
    writing-mode: vertical-rl;
  }
  .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.3; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.2); }
  }
  .hero-tag {
    position: relative;
    z-index: 4;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.32em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 28px;
    opacity: 0;
    animation: fadeUp 1s var(--ease) 0.3s forwards;
  }
  .hero-h1 {
    position: relative;
    z-index: 4;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(64px, 9vw, 140px);
    line-height: 0.92;
    letter-spacing: 0.01em;
    color: var(--warm-white);
    max-width: 900px;
    opacity: 0;
    animation: fadeUp 1.2s var(--ease) 0.5s forwards;
  }
  .hero-h1 em {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    color: var(--gold);
    font-size: 0.82em;
  }
  .hero-h1 .luxury-video-text {
    display: inline-block;
    position: relative;
    font-size: 1em;
    width: 4.95em;
    height: 1.26em;
    vertical-align: -0.14em;
    line-height: 1;
    overflow: hidden;
  }
  .hero-h1 .hero-for-luxury-line {
    white-space: nowrap;
  }
  .hero-h1 .luxury-video-fill {
    display: none;
  }
  .hero-h1 .luxury-fallback {
    display: inline;
    position: relative;
    z-index: 1;
    font-weight: 700;
  }
  @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .hero-h1 .luxury-video-fill {
      display: block;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Warm the video slightly to stay in the site's gold palette. */
      filter: sepia(0.35) saturate(1.15) brightness(0.88);
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 320'%3E%3Ctext x='24' y='255' font-family='DM Serif Display,serif' font-size='256' font-style='italic' font-weight='700'%3ELuxury%3C/text%3E%3C/svg%3E");
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 320'%3E%3Ctext x='24' y='255' font-family='DM Serif Display,serif' font-size='256' font-style='italic' font-weight='700'%3ELuxury%3C/text%3E%3C/svg%3E");
      mask-repeat: no-repeat;
      mask-size: 100% 100%;
    }
    .hero-h1 .luxury-fallback {
      display: none;
    }
  }
  .hero-h1 .luxury-video-svg {
    display: none;
  }
  .hero-sub {
    position: relative;
    z-index: 4;
    margin-top: 40px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--soft-gray);
    max-width: 520px;
    opacity: 0;
    animation: fadeUp 1s var(--ease) 0.8s forwards;
  }
  .hero-actions {
    position: relative;
    z-index: 4;
    margin-top: 52px;
    display: flex; gap: 24px; align-items: center;
    opacity: 0;
    animation: fadeUp 1s var(--ease) 1s forwards;
  }
  .btn-primary {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--gold);
    padding: 16px 36px;
    text-decoration: none;
    transition: all 0.4s var(--ease);
    display: inline-block;
  }
  .btn-primary:hover { background: var(--warm-white); transform: translateY(-2px); }
  .btn-ghost {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--soft-gray);
    text-decoration: none;
    display: flex; align-items: center; gap: 12px;
    transition: color 0.3s;
  }
  .btn-ghost:hover { color: var(--warm-white); }
  .btn-ghost::after {
    content: '';
    display: block; width: 32px; height: 1px;
    background: currentColor;
    transition: width 0.3s var(--ease);
  }
  .btn-ghost:hover::after { width: 56px; }

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

  /* EDITORIAL DIVIDER */
  .editorial-divider {
    display: flex; align-items: center; gap: 24px;
    padding: 0 60px;
    margin: 0;
  }
  .editorial-divider .line { flex: 1; height: 1px; background: rgba(255,255,255,0.06); }
  .editorial-divider .label {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.4em;
    color: var(--muted);
    text-transform: uppercase;
  }

  /* SECTION BASE */
  section { position: relative; }
  .section-num {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.4em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 20px;
  }

  /* PHILOSOPHY SECTION */
  #philosophy {
    padding: 180px 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    align-items: center;
  }
  .phil-left { }
  .phil-h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(52px, 6vw, 96px);
    line-height: 0.9;
    letter-spacing: 0.01em;
    margin-bottom: 40px;
  }
  .phil-h2 em {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    color: var(--gold);
    font-size: 0.9em;
  }
  .phil-body {
    font-size: 16px;
    line-height: 1.9;
    color: var(--soft-gray);
    margin-bottom: 32px;
  }
  .phil-right {
    position: relative;
  }
  .phil-image-box {
    position: relative;
    background: var(--charcoal);
    aspect-ratio: 3/4;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .phil-image-box::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 30% 60%, rgba(154,123,95,0.15) 0%, transparent 60%),
      linear-gradient(135deg, rgba(78,30,30,0.1) 0%, transparent 70%);
  }
  .phil-leather-texture {
    width: 100%; height: 100%;
    background:
      repeating-linear-gradient(
        45deg,
        rgba(154,123,95,0.03) 0px,
        rgba(154,123,95,0.03) 1px,
        transparent 1px,
        transparent 8px
      ),
      repeating-linear-gradient(
        -45deg,
        rgba(154,123,95,0.02) 0px,
        rgba(154,123,95,0.02) 1px,
        transparent 1px,
        transparent 8px
      ),
      linear-gradient(170deg, #2a2018 0%, #1a1210 50%, #0f0a07 100%);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 24px;
  }
  .texture-label {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.5em;
    color: rgba(201,169,110,0.4);
    text-transform: uppercase;
  }
  .stitch-line {
    display: flex; gap: 4px; align-items: center;
  }
  .stitch-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(201,169,110,0.3);
    animation: stitchPulse 2.4s ease-in-out infinite;
  }
  .stitch-dot:nth-child(2) { animation-delay: 0.2s; }
  .stitch-dot:nth-child(3) { animation-delay: 0.4s; }
  .stitch-dot:nth-child(4) { animation-delay: 0.6s; }
  .stitch-dot:nth-child(5) { animation-delay: 0.8s; }
  .stitch-dot:nth-child(6) { animation-delay: 1.0s; }
  .stitch-dot:nth-child(7) { animation-delay: 1.2s; }
  .stitch-dot:nth-child(8) { animation-delay: 1.4s; }
  @keyframes stitchPulse {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.4); }
  }
  .phil-offset-box {
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 200px; height: 200px;
    border: 1px solid rgba(201,169,110,0.12);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    gap: 8px;
    background: var(--graphite);
  }
  .phil-offset-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 56px;
    color: var(--gold);
    line-height: 1;
  }
  .phil-offset-label {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--muted);
    text-transform: uppercase;
    text-align: center;
  }

  /* MATERIALS SECTION */
  #materials {
    padding: 180px 0;
    background: var(--graphite);
    overflow: hidden;
  }
  .materials-header {
    padding: 0 60px;
    margin-bottom: 80px;
    display: flex; justify-content: space-between; align-items: flex-end;
  }
  .materials-h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(52px, 7vw, 110px);
    line-height: 0.9;
  }
  .materials-sub {
    max-width: 320px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--soft-gray);
    text-align: right;
  }
  .materials-scroll-track {
    display: flex; gap: 2px;
    padding: 0 60px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .materials-scroll-track::-webkit-scrollbar { display: none; }
  .material-card {
    flex: 0 0 340px;
    height: 520px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: flex-basis 0.6s var(--ease);
  }
  .material-card:hover { flex-basis: 480px; }
  .material-bg {
    position: absolute; inset: 0;
    transition: transform 0.8s var(--ease);
  }
  .material-card:hover .material-bg { transform: scale(1.04); }
  .material-bg-leather {
    background:
      repeating-linear-gradient(30deg, rgba(154,123,95,0.06) 0, rgba(154,123,95,0.06) 1px, transparent 1px, transparent 12px),
      linear-gradient(135deg, #3a2a1a, #1f140a);
  }
  .material-bg-velvet {
    background:
      repeating-linear-gradient(60deg, rgba(78,30,30,0.1) 0, rgba(78,30,30,0.1) 1px, transparent 1px, transparent 8px),
      linear-gradient(135deg, #2a0f0f, #1a0808);
  }
  .material-bg-linen {
    background:
      repeating-linear-gradient(0deg, rgba(200,190,170,0.05) 0, rgba(200,190,170,0.05) 1px, transparent 1px, transparent 6px),
      linear-gradient(135deg, #2a2620, #191612);
  }
  .material-bg-suede {
    background:
      radial-gradient(ellipse at 40% 60%, rgba(138,106,71,0.15) 0, transparent 60%),
      linear-gradient(135deg, #261c10, #130e07);
  }
  .material-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0.2) 60%, transparent 100%);
  }
  .material-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 40px 32px;
  }
  .material-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    letter-spacing: 0.04em;
    color: var(--warm-white);
    display: block;
    margin-bottom: 8px;
  }
  .material-origin {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--gold);
    text-transform: uppercase;
    display: block;
    margin-bottom: 16px;
  }
  .material-desc {
    font-size: 13px;
    line-height: 1.7;
    color: var(--soft-gray);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--ease), opacity 0.4s;
    opacity: 0;
  }
  .material-card:hover .material-desc { max-height: 100px; opacity: 1; }
  .material-num {
    position: absolute; top: 32px; right: 32px;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: rgba(201,169,110,0.4);
  }

  /* PROCESS SECTION */
  #process {
    padding: 180px 60px;
    background: var(--black);
  }
  .process-header {
    text-align: center;
    margin-bottom: 120px;
  }
  .process-h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(60px, 8vw, 120px);
    line-height: 0.9;
    margin-bottom: 24px;
  }
  .process-intro {
    font-size: 15px;
    color: var(--soft-gray);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.8;
  }
  .process-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: relative;
  }
  .process-steps::before {
    content: '';
    position: absolute;
    top: 52px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(201,169,110,0.2), rgba(201,169,110,0.4), rgba(201,169,110,0.2), transparent);
  }
  .process-step {
    padding: 0 20px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    position: relative;
  }
  .step-circle {
    width: 104px; height: 104px;
    border: 1px solid rgba(201,169,110,0.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    margin-bottom: 32px;
    background: var(--graphite);
    transition: border-color 0.4s, background 0.4s;
    position: relative;
    z-index: 1;
  }
  .process-step:hover .step-circle {
    border-color: var(--gold);
    background: rgba(201,169,110,0.06);
  }
  .step-num {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--gold);
    display: block;
  }
  .step-icon-text {
    font-size: 22px;
    margin-top: 4px;
  }
  .step-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--warm-white);
    margin-bottom: 12px;
    letter-spacing: 0.02em;
  }
  .step-desc {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
  }

  /* METRICS SECTION */
  #metrics {
    padding: 160px 60px;
    background: var(--surface);
    border-top: 1px solid rgba(201,169,110,0.08);
    border-bottom: 1px solid rgba(201,169,110,0.08);
  }
  .metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(201,169,110,0.06);
  }
  .metric-cell {
    background: var(--surface);
    padding: 60px 40px;
    position: relative;
    overflow: hidden;
    transition: background 0.4s;
  }
  .metric-cell:hover { background: rgba(201,169,110,0.03); }
  .metric-cell::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 2px; height: 0;
    background: var(--gold);
    transition: height 0.6s var(--ease);
  }
  .metric-cell:hover::before { height: 100%; }
  .metric-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(64px, 6vw, 96px);
    color: var(--gold);
    line-height: 1;
    display: block;
    margin-bottom: 12px;
  }
  .metric-label {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--soft-gray);
    text-transform: uppercase;
    display: block;
    margin-bottom: 16px;
  }
  .metric-desc {
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
  }

  /* PROJECTS SECTION */
  #projects {
    padding: 180px 60px;
    background: var(--black);
  }
  .projects-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 80px;
  }
  .projects-h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(52px, 6vw, 96px);
    line-height: 0.9;
  }
  .projects-h2 em {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    color: var(--gold);
  }
  .projects-count {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }
  .project-card {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    cursor: pointer;
    background: var(--charcoal);
  }
  .project-card:first-child {
    grid-row: span 2;
    aspect-ratio: auto;
  }
  .project-bg {
    position: absolute; inset: 0;
    transition: transform 0.9s var(--ease), opacity 0.4s;
  }
  .project-card:hover .project-bg { transform: scale(1.06); }
  .project-bg-1 {
    background:
      radial-gradient(ellipse at 60% 30%, rgba(154,123,95,0.2) 0%, transparent 60%),
      linear-gradient(160deg, #2a1e12 0%, #120c06 100%);
  }
  .project-bg-2 {
    background:
      radial-gradient(ellipse at 30% 70%, rgba(78,30,30,0.25) 0%, transparent 60%),
      linear-gradient(160deg, #1a0d0d 0%, #0d0505 100%);
  }
  .project-bg-3 {
    background:
      radial-gradient(ellipse at 70% 50%, rgba(138,106,71,0.18) 0%, transparent 60%),
      linear-gradient(160deg, #251a10 0%, #100b05 100%);
  }
  .project-bg-4 {
    background:
      radial-gradient(ellipse at 40% 40%, rgba(200,180,150,0.1) 0%, transparent 60%),
      linear-gradient(160deg, #1e1a14 0%, #0f0c09 100%);
  }
  .project-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(5,5,5,0.85) 0%, transparent 60%);
    transition: opacity 0.4s;
  }
  .project-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 40px;
    transform: translateY(20px);
    transition: transform 0.5s var(--ease);
  }
  .project-card:hover .project-info { transform: translateY(0); }
  .project-cat {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.35em;
    color: var(--gold);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
  }
  .project-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    letter-spacing: 0.04em;
    color: var(--warm-white);
    display: block;
    margin-bottom: 12px;
  }
  .project-detail {
    font-size: 13px;
    color: var(--soft-gray);
    line-height: 1.6;
    opacity: 0;
    transition: opacity 0.4s 0.1s;
  }
  .project-card:hover .project-detail { opacity: 1; }
  .project-arrow {
    position: absolute; top: 32px; right: 32px;
    width: 44px; height: 44px;
    border: 1px solid rgba(201,169,110,0.2);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s var(--ease);
    color: var(--gold);
    font-size: 18px;
    font-family: 'DM Mono', monospace;
  }
  .project-card:hover .project-arrow { opacity: 1; transform: translateY(0); }

  /* WORKSHOP / ABOUT */
  #workshop {
    padding: 180px 60px;
    background: var(--graphite);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    align-items: center;
  }
  .workshop-right { }
  .workshop-tag {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.4em;
    color: var(--gold);
    text-transform: uppercase;
    display: block;
    margin-bottom: 24px;
  }
  .workshop-h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(44px, 5vw, 80px);
    line-height: 0.92;
    margin-bottom: 40px;
  }
  .workshop-h2 em {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    color: var(--gold);
  }
  .workshop-body {
    font-size: 15px;
    line-height: 1.9;
    color: var(--soft-gray);
    margin-bottom: 20px;
  }
  .workshop-visual {
    position: relative;
  }
  .workshop-main-box {
    background: var(--charcoal);
    aspect-ratio: 1/1.1;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .workshop-pattern {
    width: 100%; height: 100%;
    background:
      repeating-conic-gradient(rgba(154,123,95,0.03) 0deg, rgba(154,123,95,0.03) 90deg, transparent 90deg, transparent 180deg) 0 0 / 24px 24px,
      linear-gradient(135deg, #1a1410 0%, #0f0c09 100%);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 16px;
  }
  .workshop-center-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 80px;
    color: rgba(201,169,110,0.08);
    letter-spacing: 0.1em;
    line-height: 1;
    text-align: center;
  }
  .workshop-badge {
    position: absolute; bottom: -30px; right: -30px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: var(--gold);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
  }
  .badge-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 0.15em;
    color: var(--black);
    text-align: center;
    line-height: 1.3;
  }
  .badge-year {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px;
    color: var(--black);
    line-height: 1;
  }
  .workshop-qualities {
    margin-top: 48px;
    display: flex; flex-direction: column; gap: 0;
  }
  .quality-item {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    display: flex; align-items: center; gap: 20px;
    transition: padding-left 0.3s var(--ease);
    cursor: default;
  }
  .quality-item:hover { padding-left: 8px; }
  .quality-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
  }
  .quality-text {
    font-size: 14px;
    color: var(--soft-gray);
    letter-spacing: 0.02em;
  }

  /* CONVERSION / CTA */
  #cta {
    padding: 200px 60px;
    background: var(--black);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .cta-bg-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 300px;
    background: radial-gradient(ellipse, rgba(201,169,110,0.04) 0%, transparent 70%);
    pointer-events: none;
  }
  .cta-tag {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.45em;
    color: var(--gold);
    text-transform: uppercase;
    display: block;
    margin-bottom: 40px;
  }
  .cta-h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(60px, 9vw, 140px);
    line-height: 0.88;
    margin-bottom: 32px;
  }
  .cta-h2 em {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    color: var(--gold);
  }
  .cta-sub {
    font-size: 15px;
    line-height: 1.8;
    color: var(--soft-gray);
    max-width: 480px;
    margin: 0 auto 60px;
  }
  .cta-actions {
    display: flex; gap: 20px; align-items: center; justify-content: center;
  }
  .btn-large {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--gold);
    padding: 20px 52px;
    text-decoration: none;
    transition: all 0.4s var(--ease);
    display: inline-block;
  }
  .btn-large:hover { background: var(--warm-white); transform: translateY(-3px); }
  .btn-outline-large {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--soft-gray);
    background: transparent;
    padding: 20px 52px;
    text-decoration: none;
    border: 1px solid rgba(201,169,110,0.2);
    transition: all 0.4s var(--ease);
    display: inline-block;
  }
  .btn-outline-large:hover { border-color: var(--gold); color: var(--gold); }

  /* FOOTER */
  footer {
    background: var(--graphite);
    padding: 80px 60px 40px;
    border-top: 1px solid rgba(201,169,110,0.08);
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 80px;
  }
  .footer-brand { }
  .footer-logo {
    font-family: 'DM Serif Display', serif;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    margin-bottom: 20px;
    transition: opacity 0.3s var(--ease);
  }
  .footer-logo:hover { opacity: 0.85; }
  .footer-logo .logo-primary {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--warm-white);
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  .footer-logo .logo-secondary {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--gold);
    font-style: italic;
    text-transform: uppercase;
  }
  .footer-tagline {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
    max-width: 280px;
  }
  .footer-col-title {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.35em;
    color: var(--gold);
    text-transform: uppercase;
    display: block;
    margin-bottom: 24px;
  }
  .footer-links { list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .footer-links a {
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.3s;
  }
  .footer-links a:hover { color: var(--warm-white); }
  .footer-bottom {
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.04);
    display: flex; justify-content: space-between; align-items: center;
  }
  .footer-copy {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--muted);
  }
  .footer-social { display: flex; gap: 20px; }
  .footer-social a {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--muted);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s;
  }
  .footer-social a:hover { color: var(--gold); }

  /* SCROLL REVEAL */
  .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }
  .reveal-delay-5 { transition-delay: 0.5s; }

  /* HORIZONTAL MARQUEE */
  .marquee-track {
    padding: 40px 0;
    background: var(--surface);
    border-top: 1px solid rgba(201,169,110,0.06);
    border-bottom: 1px solid rgba(201,169,110,0.06);
    overflow: hidden;
  }
  .marquee-inner {
    display: flex; gap: 60px; align-items: center;
    animation: marquee 20s linear infinite;
    white-space: nowrap;
  }
  .marquee-item {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: 0.15em;
    color: var(--muted);
    flex-shrink: 0;
    display: flex; align-items: center; gap: 60px;
  }
  .marquee-item::after {
    content: '✦';
    color: var(--gold);
    font-size: 12px;
  }
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* MOBILE NAV TOGGLE (simplified) */
  .nav-mobile-toggle {
    display: none;
    cursor: pointer;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--soft-gray);
    text-transform: uppercase;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-video-wrap {
      display: block;
    }
    .hero-video,
    .bento-card-video,
    .bento-material-video {
      animation: none !important;
    }
    .hero-bg {
      background:
        radial-gradient(ellipse at 70% 30%, rgba(154,123,95,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(78,30,30,0.12) 0%, transparent 50%),
        linear-gradient(160deg, #0a0805 0%, #050505 100%);
    }
  }

  @media (max-width: 900px) {
    nav { padding: 24px 30px; }
    nav.scrolled { padding: 16px 30px; }
    .nav-links, .nav-cta { display: none; }
    .nav-mobile-toggle { display: block; }
    #hero {
      margin: 0;
      padding-top: 0;
      padding-right: 20px;
      padding-bottom: 80px;
      padding-left: 20px;
    }
    .hero-tag,
    .hero-h1,
    .hero-sub,
    .hero-actions {
      margin-left: 0;
      margin-right: 0;
    }
    .hero-h1 .hero-for-luxury-line {
      white-space: nowrap;
    }
    .hero-h1 .luxury-video-text {
      width: 3.12em;
      height: 0.96em;
      vertical-align: -0.09em;
    }
    .hero-line { right: 28px; }
    .hero-year { right: -56px; }
    #philosophy { grid-template-columns: 1fr; padding: 100px 30px; gap: 60px; }
    #materials { padding: 100px 0; }
    .materials-header { padding: 0 30px; flex-direction: column; gap: 20px; align-items: flex-start; }
    .materials-sub { text-align: left; }
    .process-steps { grid-template-columns: 1fr; gap: 40px; }
    .process-steps::before { display: none; }
    .metrics-grid { grid-template-columns: 1fr 1fr; }
    .projects-grid { grid-template-columns: 1fr; }
    .project-card:first-child { grid-row: auto; }
    #workshop { grid-template-columns: 1fr; padding: 100px 30px; gap: 60px; }
    #cta { padding: 120px 30px; }
    .cta-actions { flex-direction: column; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
    footer { padding: 60px 30px 30px; }
    #process { padding: 100px 30px; }
    #metrics { padding: 100px 30px; }
    #projects { padding: 100px 30px; }
  }

/* Interior pages + shared layout extensions */

/* UX polish */
a:focus-visible,
button:focus-visible,
.nav-mobile-toggle:focus-visible {
  outline: 1px solid rgba(201, 169, 110, 0.8);
  outline-offset: 3px;
}

@media (hover: none), (pointer: coarse) {
  body {
    cursor: auto;
  }
  .cursor,
  .cursor-ring {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.page-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 140px 60px 72px;
  overflow: hidden;
}
.page-hero .hero-h1 {
  font-size: clamp(48px, 8vw, 110px);
  max-width: 920px;
}
.page-hero .hero-sub {
  max-width: 520px;
}
.page-hero .hero-bg,
.page-hero .hero-noise,
.page-hero .hero-line {
  position: absolute;
  inset: 0;
}
.page-hero .hero-line {
  inset: 0;
  right: 200px;
  left: auto;
  width: 1px;
  height: auto;
}
.page-hero .hero-year {
  position: absolute;
  top: 50%;
  right: 60px;
}

.page-main {
  padding: 0 60px 120px;
}
.page-section {
  padding: 100px 0;
  border-top: 1px solid rgba(201, 169, 110, 0.08);
}
.page-section:first-of-type {
  border-top: none;
  padding-top: 40px;
}
.page-section--surface {
  background: var(--surface);
  margin: 0 -60px;
  padding-left: 60px;
  padding-right: 60px;
}
.page-section--graphite {
  background: var(--graphite);
  margin: 0 -60px;
  padding-left: 60px;
  padding-right: 60px;
}

.page-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.page-grid-2--wide-left {
  grid-template-columns: 1.15fr 0.85fr;
}

.prose {
  font-size: 15px;
  line-height: 1.9;
  color: var(--soft-gray);
}
.prose p + p {
  margin-top: 1.25em;
}
.prose strong {
  color: var(--warm-white);
  font-weight: 500;
}

.section-kicker {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.35em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
}
.section-title-page {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.92;
  letter-spacing: 0.02em;
  margin-bottom: 28px;
}
.section-title-page em {
  font-family: "DM Serif Display", serif;
  font-style: italic;
  color: var(--gold);
}

.spec-list {
  list-style: none;
  margin-top: 28px;
}
.spec-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
  color: var(--soft-gray);
}
.spec-list li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 8px;
  flex-shrink: 0;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: rgba(201, 169, 110, 0.08);
}
.service-card {
  background: var(--black);
  padding: 48px 40px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  transition: background 0.4s var(--ease);
}
.service-card:hover {
  background: rgba(201, 169, 110, 0.04);
}
.service-card-num {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(201, 169, 110, 0.5);
  margin-bottom: 20px;
}
.service-card h3 {
  font-family: "Bebas Neue", sans-serif;
  font-size: 32px;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
  line-height: 1;
}
.service-card p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--soft-gray);
  flex: 1;
}
.service-card a {
  margin-top: 24px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  align-self: flex-start;
  border-bottom: 1px solid rgba(201, 169, 110, 0.35);
  padding-bottom: 4px;
}
.service-card a:hover {
  color: var(--warm-white);
  border-bottom-color: var(--warm-white);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(201, 169, 110, 0.12);
}
.stat-row .stat-val {
  font-family: "Bebas Neue", sans-serif;
  font-size: 48px;
  color: var(--gold);
  line-height: 1;
  display: block;
}
.stat-row .stat-lbl {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 10px;
  display: block;
}

.material-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.material-tier {
  border: 1px solid rgba(201, 169, 110, 0.12);
  padding: 32px 28px;
  background: rgba(13, 13, 13, 0.6);
}
.material-tier h4 {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.material-tier .tier-name {
  font-family: "Bebas Neue", sans-serif;
  font-size: 28px;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.material-tier p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--soft-gray);
}

.timeline-deep {
  margin-top: 48px;
  border-left: 1px solid rgba(201, 169, 110, 0.2);
  padding-left: 32px;
}
.timeline-deep-item {
  margin-bottom: 48px;
  position: relative;
}
.timeline-deep-item::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.2);
}
.timeline-deep-item h3 {
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.timeline-deep-item .tl-meta {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.timeline-deep-item p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--soft-gray);
  max-width: 640px;
}

.project-list {
  display: grid;
  gap: 2px;
  margin-top: 40px;
}
.project-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  padding: 48px 40px;
  background: var(--charcoal);
  align-items: center;
}
.project-row:nth-child(even) {
  background: var(--graphite);
}
.project-row-visual {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
}
.project-row-visual .project-bg {
  position: absolute;
  inset: 0;
}
.project-row-copy .project-cat {
  margin-bottom: 8px;
}
.project-row-copy .project-name {
  font-size: 40px;
  margin-bottom: 16px;
}
.project-row-copy .project-detail {
  opacity: 1;
  max-width: 520px;
}

.contact-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 48px;
}
.contact-block {
  border: 1px solid rgba(201, 169, 110, 0.15);
  padding: 40px 36px;
  background: rgba(5, 5, 5, 0.5);
}
.contact-block h3 {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.contact-block p,
.contact-block a {
  font-size: 14px;
  line-height: 1.8;
  color: var(--soft-gray);
  text-decoration: none;
  display: block;
}
.contact-block a:hover {
  color: var(--warm-white);
}

/* Footer: services heading with ring + dot (matches brand screenshot) */
.footer-col-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.footer-title-icon {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(201, 169, 110, 0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer-title-icon::after {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
}

.nav-links a.is-active {
  color: var(--warm-white);
}

/* SPACING UTILITIES */
.section-spacing-xl { padding: 180px 0; }
.section-spacing-l { padding: 120px 0; }
.section-spacing-m { padding: 80px 0; }
.section-spacing-s { padding: 40px 0; }

/* PAGE HERO STANDARDIZATION */
.page-hero {
  position: relative;
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 136px 60px 80px;
  overflow: hidden;
}

.page-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #0a0014 0%, #060d10 40%, #050505 100%);
}

.page-hero .hero-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
}

.page-hero .hero-line {
  position: absolute;
  top: 0;
  right: 200px;
  bottom: 0;
  z-index: 2;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(160,100,220,0.2) 40%, rgba(20,140,100,0.2) 70%, transparent);
}

.page-hero .hero-year {
  position: absolute;
  top: 50%;
  right: 60px;
  z-index: 3;
  transform: translateY(-50%) rotate(90deg);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.35em;
  color: var(--muted);
  text-transform: uppercase;
}

.page-hero .hero-tag,
.page-hero .hero-h1,
.page-hero .hero-sub {
  position: relative;
  z-index: 4;
}

/* Global mobile menu drawer — base layout; theme in mobile-first.css (loaded last) */
body.mobile-menu-open {
  overflow: hidden;
}
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 3, 8, 0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
  z-index: 9990;
}
.mobile-menu-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100vw;
  height: 100dvh;
  height: 100svh;
  background-color: #09080f;
  color: #f5f3ef;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 9991;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.mobile-menu-drawer.open {
  transform: translate3d(0, 0, 0);
}
.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.mobile-nav-links a {
  color: #ece8e0;
  text-decoration: none;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.mobile-nav-links a:hover,
.mobile-nav-links a.is-active {
  color: #ffffff;
}
.mobile-nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #1a1206;
  background: linear-gradient(135deg, #d4b87a 0%, #c9a96e 52%, #a8864a 100%);
  padding: 16px 24px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  text-decoration: none;
}

/* Studio section sidebar (vertical nav + dot + STUDIO kicker) */
.page-with-sidebar {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  max-width: 1600px;
  margin: 0 auto;
  padding: 52px 60px 120px;
  align-items: start;
}
.page-with-sidebar .page-main {
  padding: 0 0 0 0;
  min-width: 0;
}
.page-with-sidebar .page-section:first-of-type {
  padding-top: 0;
}
.studio-sidebar {
  position: sticky;
  top: 132px;
  padding-top: 4px;
  padding-right: 24px;
  padding-left: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(
    180deg,
    rgba(9, 9, 9, 0.92) 0%,
    rgba(9, 9, 9, 0.72) 100%
  );
  min-height: 250px;
  max-width: 260px;
}
.studio-sidebar-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 16px;
}
.studio-sidebar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tan);
  flex-shrink: 0;
}
.studio-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.studio-sidebar-link {
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: var(--soft-gray);
  text-decoration: none;
  line-height: 1.22;
  transition: color 0.3s var(--ease);
}
.studio-sidebar-link:hover {
  color: var(--warm-white);
}
.studio-sidebar-link.is-current {
  color: var(--warm-white);
}

a.material-tier:hover {
  background: rgba(201, 169, 110, 0.06);
  border-color: rgba(201, 169, 110, 0.28);
}

.studio-hub-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.studio-hub-grid a:last-child {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .nav-mobile-toggle {
    position: relative;
    z-index: 140;
    user-select: none;
    font-size: 10px;
    letter-spacing: 0.22em;
    padding: 8px 0;
  }
  #mainNav.mobile-open .nav-mobile-toggle {
    color: var(--gold);
  }
  .page-hero {
    padding: 106px 30px 38px;
    min-height: 42vh;
  }
  .page-hero .hero-h1 {
    font-size: clamp(42px, 12.5vw, 74px);
    line-height: 0.9;
  }
  .page-hero .hero-sub {
    margin-top: 22px;
    font-size: 13px;
    line-height: 1.55;
    max-width: 92%;
  }
  .page-hero .hero-year {
    display: none;
  }
  .page-main {
    padding: 0 30px 64px;
  }
  .mobile-nav-links a {
    font-size: 18px;
    line-height: 1.2;
    padding: 8px 0;
  }
  .mobile-nav-cta {
    min-height: 46px;
  }
  .page-section {
    padding: 72px 0;
  }
  .page-section--surface,
  .page-section--graphite {
    margin: 0 -30px;
    padding-left: 30px;
    padding-right: 30px;
  }
  .page-grid-2,
  .page-grid-2--wide-left {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .service-cards {
    grid-template-columns: 1fr;
  }
  .stat-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .material-tier-grid,
  .studio-hub-grid {
    grid-template-columns: 1fr;
  }
  .studio-hub-grid a:last-child {
    grid-column: auto;
  }
  .project-row {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }
  .contact-panel {
    grid-template-columns: 1fr;
  }
  .page-with-sidebar {
    grid-template-columns: 1fr;
    padding: 0 30px 80px;
  }
  .studio-sidebar {
    position: static;
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: none;
    background: linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.95) 0%,
      rgba(8, 8, 8, 0.9) 100%
    );
    padding-right: 0;
    padding-bottom: 16px;
    padding-left: 14px;
    padding-top: 18px;
    margin-top: 4px;
    margin-bottom: 16px;
    position: relative;
    z-index: 3;
    min-height: 0;
  }
  .studio-sidebar-kicker {
    margin-bottom: 16px;
    font-size: 10px;
    letter-spacing: 0.24em;
  }
  .studio-sidebar-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .studio-sidebar-link {
    font-size: 18px;
    line-height: 1.16;
    letter-spacing: -0.01em;
  }
}

/* ARIA widget — hide on mobile / coarse pointer (desktop-only loader gate) */
@media (max-width: 1024px), (pointer: coarse) {
  #aria-widget-root,
  [data-manifest-widget],
  .manifest-launcher {
    display: none !important;
  }

  body:not(.ai-concierge-page) .sfug-ma-fab,
  body:not(.ai-concierge-page) .sfug-ma-panel,
  body:not(.ai-concierge-page) .sfug-ma-preload-root,
  body:not(.ai-concierge-page) .sfug-ma-permission-gate {
    display: none !important;
  }
}


/* ---- css/vision-theme.css ---- */
/*
  LUXURY UPHOLSTERY THEME
  Champagne gold · Warm charcoal · Ivory · Burgundy accent
  Sitewide refinement for SF Upholstery Group
*/

:root {
  --purple: #c9a96e;
  --purple-dim: rgba(201, 169, 110, 0.18);
  --purple-glow: rgba(201, 169, 110, 0.06);
  --purple-line: rgba(201, 169, 110, 0.22);
  --emerald: #9a7b5f;
  --emerald-dim: rgba(154, 123, 95, 0.15);
  --emerald-glow: rgba(154, 123, 95, 0.05);
  --emerald-line: rgba(154, 123, 95, 0.2);
  --navy: #8a6a47;
  --navy-dim: rgba(138, 106, 71, 0.15);
  --surface: #1d1a17;
  --graphite: #0d0d0d;
  --charcoal: #161616;
}

body {
  background: #ffffff;
}

/* ─── NAVIGATION ──────────────────────────────────────────────── */
nav {
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid rgba(201, 169, 110, 0.12);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.28), inset 0 -1px 0 rgba(201, 169, 110, 0.06);
}

nav.scrolled {
  background: rgba(5, 5, 5, 0.94);
  border-bottom: 1px solid rgba(201, 169, 110, 0.18);
}

.nav-links a::after {
  background: linear-gradient(90deg, rgba(201, 169, 110, 0.85), rgba(154, 123, 95, 0.65));
}

.logo-secondary {
  color: var(--gold);
}

/* ─── HERO (INDEX) ────────────────────────────────────────────── */
.hero-line {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201, 169, 110, 0.16) 28%,
    rgba(154, 123, 95, 0.1) 62%,
    transparent 100%
  );
}

.hero-tag {
  color: rgba(201, 169, 110, 0.92);
}

.hero-h1 em {
  color: var(--gold);
}

.scroll-line {
  background: linear-gradient(to bottom, var(--gold), transparent);
}

/* ─── MARQUEE ─────────────────────────────────────────────────── */
.marquee-track {
  background: #ffffff;
  border-top: 1px solid rgba(201, 169, 110, 0.12);
  border-bottom: 1px solid rgba(154, 123, 95, 0.1);
}

.marquee-item {
  color: rgba(26, 24, 22, 0.35);
}

.marquee-item::after {
  content: "◆";
  color: var(--gold);
  opacity: 0.55;
}

/* ─── EDITORIAL DIVIDERS ──────────────────────────────────────── */
.editorial-divider .line {
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.18), transparent);
}

.editorial-divider .label {
  color: rgba(154, 123, 95, 0.65);
}

/* ─── PHILOSOPHY SECTION ──────────────────────────────────────── */
#philosophy {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(154, 123, 95, 0.12) 0%, transparent 55%),
    #050505;
}

.phil-h2 em {
  color: var(--gold);
}

.phil-image-box::before {
  background:
    radial-gradient(ellipse at 30% 60%, rgba(154, 123, 95, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(78, 30, 30, 0.1) 0%, transparent 55%),
    linear-gradient(135deg, rgba(26, 20, 16, 0.15) 0%, transparent 70%);
}

.phil-leather-texture {
  background:
    repeating-linear-gradient(45deg, rgba(201, 169, 110, 0.025) 0px, rgba(201, 169, 110, 0.025) 1px, transparent 1px, transparent 8px),
    repeating-linear-gradient(-45deg, rgba(154, 123, 95, 0.015) 0px, rgba(154, 123, 95, 0.015) 1px, transparent 1px, transparent 8px),
    linear-gradient(170deg, #2a2018 0%, #1a1210 50%, #0f0a07 100%);
}

.stitch-dot {
  background: rgba(201, 169, 110, 0.35);
}

.texture-label {
  color: rgba(201, 169, 110, 0.45);
}

.phil-offset-box {
  background: #0d0b09;
  border: 1px solid rgba(201, 169, 110, 0.15);
}

.phil-offset-num {
  color: var(--gold);
}

.section-num {
  color: rgba(201, 169, 110, 0.72);
}

/* ─── MATERIALS SECTION ───────────────────────────────────────── */
#materials {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(15, 10, 8, 0.8) 0%, transparent 60%),
    #0a0908;
}

.material-bg-leather {
  background:
    repeating-linear-gradient(30deg, rgba(201, 169, 110, 0.05) 0, rgba(201, 169, 110, 0.05) 1px, transparent 1px, transparent 12px),
    linear-gradient(135deg, #2a2018 0%, #1a1210 60%, #0f0a07 100%);
}

.material-bg-velvet {
  background:
    repeating-linear-gradient(60deg, rgba(78, 30, 30, 0.06) 0, rgba(78, 30, 30, 0.06) 1px, transparent 1px, transparent 8px),
    radial-gradient(ellipse at 40% 60%, rgba(78, 30, 30, 0.12) 0%, transparent 55%),
    linear-gradient(135deg, #1a100e 0%, #100908 100%);
}

.material-bg-linen {
  background:
    repeating-linear-gradient(0deg, rgba(232, 228, 220, 0.04) 0, rgba(232, 228, 220, 0.04) 1px, transparent 1px, transparent 6px),
    radial-gradient(ellipse at 60% 40%, rgba(154, 123, 95, 0.1) 0%, transparent 55%),
    linear-gradient(135deg, #1a1814 0%, #100e0c 100%);
}

.material-bg-suede {
  background:
    radial-gradient(ellipse at 40% 60%, rgba(201, 169, 110, 0.12) 0, transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(78, 30, 30, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, #1a1410 0%, #0f0c09 100%);
}

.material-num {
  color: rgba(201, 169, 110, 0.45);
}

.material-origin {
  color: var(--gold);
}

/* ─── PROCESS SECTION ─────────────────────────────────────────── */
body.home-page #process {
  background: #ffffff !important;
}

#process {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(15, 10, 8, 0.6) 0%, transparent 50%),
    #050505;
}

.process-steps::before {
  background: linear-gradient(
    to right,
    transparent,
    rgba(201, 169, 110, 0.25),
    rgba(154, 123, 95, 0.3),
    rgba(138, 106, 71, 0.25),
    transparent
  );
}

.step-circle {
  background: #0d0b09;
  border: 1px solid rgba(201, 169, 110, 0.2);
}

.process-step:hover .step-circle {
  border-color: var(--gold);
  background: rgba(201, 169, 110, 0.08);
  box-shadow: 0 0 24px rgba(201, 169, 110, 0.15);
}

.step-num {
  color: var(--gold);
}

.step-icon-text {
  color: var(--gold) !important;
}

.process-h2 em {
  font-family: "DM Serif Display", serif;
  font-style: italic;
  color: var(--gold);
}

/* ─── METRICS SECTION ─────────────────────────────────────────── */
#metrics {
  background:
    radial-gradient(ellipse at 70% 50%, rgba(10, 8, 6, 0.9) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 30%, rgba(15, 10, 8, 0.7) 0%, transparent 55%),
    #0d0b09;
  border-top: 1px solid rgba(201, 169, 110, 0.1);
  border-bottom: 1px solid rgba(154, 123, 95, 0.1);
}

.metrics-grid {
  background: rgba(201, 169, 110, 0.06);
}

.metric-cell {
  background: #0d0b09;
}

.metric-cell:hover {
  background: rgba(201, 169, 110, 0.06);
}

.metric-cell::before {
  background: var(--gold);
}

.metric-num {
  color: var(--gold);
}

.metric-cell:nth-child(2)::before {
  background: var(--bronze);
}

.metric-cell:nth-child(2) .metric-num {
  color: var(--bronze);
}

.metric-cell:nth-child(4)::before {
  background: rgba(154, 123, 95, 0.85);
}

.metric-cell:nth-child(4) .metric-num {
  color: rgba(201, 169, 110, 0.9);
}

/* ─── PROJECTS SECTION ────────────────────────────────────────── */
#projects {
  background:
    radial-gradient(ellipse at 80% 10%, rgba(154, 123, 95, 0.12) 0%, transparent 50%),
    #050505;
}

.projects-h2 em {
  color: var(--gold);
}

.project-bg-1 {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(154, 123, 95, 0.28) 0%, transparent 60%),
    linear-gradient(160deg, #2a2018 0%, #0f0a07 100%);
}

.project-bg-2 {
  background:
    radial-gradient(ellipse at 30% 60%, rgba(78, 30, 30, 0.32) 0%, transparent 60%),
    linear-gradient(160deg, #1a100e 0%, #0a0605 100%);
}

.project-bg-3 {
  background:
    radial-gradient(ellipse at 60% 50%, rgba(138, 106, 71, 0.28) 0%, transparent 60%),
    linear-gradient(160deg, #1a1410 0%, #0a0806 100%);
}

.project-bg-4 {
  background:
    radial-gradient(ellipse at 40% 40%, rgba(201, 169, 110, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(78, 30, 30, 0.14) 0%, transparent 50%),
    linear-gradient(160deg, #1a1410 0%, #0a0806 100%);
}

.project-cat {
  color: rgba(201, 169, 110, 0.85);
}

.project-arrow {
  border: 1px solid rgba(201, 169, 110, 0.3);
  color: var(--gold);
}

/* ─── WORKSHOP SECTION ────────────────────────────────────────── */
#workshop {
  background:
    radial-gradient(ellipse at 10% 80%, rgba(10, 8, 6, 0.9) 0%, transparent 55%),
    #0d0b09;
}

.workshop-main-box {
  background: #12100e;
}

.workshop-pattern {
  background:
    repeating-conic-gradient(rgba(201, 169, 110, 0.03) 0deg, rgba(201, 169, 110, 0.03) 90deg, transparent 90deg, transparent 180deg) 0 0 / 24px 24px,
    radial-gradient(ellipse at 50% 50%, rgba(201, 169, 110, 0.06) 0%, transparent 70%),
    linear-gradient(135deg, #1a1410 0%, #0f0c09 100%);
}

.workshop-center-text {
  color: rgba(201, 169, 110, 0.06);
}

.workshop-badge {
  background: linear-gradient(135deg, var(--gold) 0%, var(--bronze) 100%);
}

.workshop-h2 em {
  color: var(--gold);
}

.workshop-tag {
  color: rgba(201, 169, 110, 0.85);
}

.quality-dot {
  background: var(--gold);
}

.quality-item:hover .quality-dot {
  background: var(--bronze);
}

/* ─── CTA SECTION ─────────────────────────────────────────────── */
#cta {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(154, 123, 95, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(78, 30, 30, 0.1) 0%, transparent 45%),
    #050505;
}

.cta-bg-glow {
  width: 800px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(201, 169, 110, 0.08) 0%,
    rgba(154, 123, 95, 0.04) 40%,
    transparent 70%
  );
}

.cta-h2 em {
  color: var(--gold);
}

.cta-tag {
  color: rgba(201, 169, 110, 0.8);
}

.btn-large {
  background: linear-gradient(135deg, #c9a96e 0%, #a8864a 100%);
  color: #1a1814;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.btn-large:hover {
  background: linear-gradient(135deg, #d4b87a 0%, #b89455 100%);
  color: #1a1814;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  transform: translateY(-2px);
}

.btn-outline-large {
  border: 1px solid rgba(201, 169, 110, 0.4);
  color: rgba(232, 213, 176, 0.92);
  background: rgba(201, 169, 110, 0.08);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn-outline-large:hover {
  border-color: rgba(201, 169, 110, 0.65);
  color: var(--gold);
  background: rgba(201, 169, 110, 0.14);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-primary {
  background: linear-gradient(135deg, #c9a96e 0%, #a8864a 100%);
  color: #1a1814;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  border-radius: 999px;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #d4b87a 0%, #b89455 100%);
  color: #1a1814;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  transform: translateY(-2px);
}

/* ─── FOOTER ──────────────────────────────────────────────────── */
footer {
  background:
    linear-gradient(
      135deg,
      rgba(26, 24, 22, 0.98) 0%,
      rgba(13, 11, 9, 0.98) 50%,
      rgba(5, 5, 5, 0.99) 100%
    );
  backdrop-filter: blur(24px);
  border-top: 1px solid rgba(201, 169, 110, 0.14);
  box-shadow: inset 0 1px 0 rgba(201, 169, 110, 0.06);
}

.footer-bottom {
  border-top: 1px solid rgba(201, 169, 110, 0.08);
}

.footer-logo .logo-secondary {
  color: var(--gold);
}

.footer-col-title {
  color: var(--gold);
}

.footer-title-icon {
  border: 1px solid rgba(201, 169, 110, 0.35);
}

.footer-title-icon::after {
  background: var(--gold);
}

.footer-social a:hover {
  color: var(--gold);
}

.footer-links a:hover {
  color: var(--warm-white);
}

/* ─── INTERIOR PAGE HEROES ────────────────────────────────────── */
.page-hero {
  background:
    radial-gradient(ellipse at 70% 25%, rgba(154, 123, 95, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 80%, rgba(78, 30, 30, 0.14) 0%, transparent 50%),
    linear-gradient(160deg, #0d0b09 0%, #050505 100%);
}

.page-hero .hero-bg {
  background:
    radial-gradient(ellipse at 65% 25%, rgba(154, 123, 95, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 75%, rgba(78, 30, 30, 0.12) 0%, transparent 50%),
    linear-gradient(to top, rgba(5, 5, 5, 0.9) 0%, rgba(5, 5, 5, 0.3) 60%, rgba(5, 5, 5, 0.12) 100%);
}

.page-hero .hero-line {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201, 169, 110, 0.16) 30%,
    rgba(154, 123, 95, 0.1) 65%,
    transparent 100%
  );
}

.page-hero .hero-h1 em {
  font-family: "DM Serif Display", serif;
  font-style: italic;
  color: var(--gold);
}

.page-hero .hero-tag {
  color: rgba(201, 169, 110, 0.85);
}

/* ─── SECTION KICKER & TITLES (interior pages) ────────────────── */
.section-kicker {
  color: var(--gold);
}

.section-title-page em {
  color: var(--gold);
}

/* ─── SERVICE CARDS ───────────────────────────────────────────── */
.service-cards {
  background: rgba(201, 169, 110, 0.04);
}

.service-card {
  background: #0d0b09;
}

.service-card:hover {
  background: rgba(201, 169, 110, 0.05);
}

.service-card-num {
  color: rgba(201, 169, 110, 0.5);
}

.service-card:nth-child(even) .service-card-num {
  color: rgba(154, 123, 95, 0.55);
}

.service-card:nth-child(even):hover {
  background: rgba(154, 123, 95, 0.04);
}

.service-card a {
  color: var(--gold);
  border-bottom: 1px solid rgba(201, 169, 110, 0.3);
}

.service-card a:hover {
  color: rgba(232, 213, 176, 1);
  border-bottom-color: rgba(201, 169, 110, 0.6);
}

/* ─── SPEC LIST ───────────────────────────────────────────────── */
.spec-list li::before {
  background: var(--gold);
}

/* ─── STAT ROW ────────────────────────────────────────────────── */
.stat-row {
  border-top: 1px solid rgba(201, 169, 110, 0.14);
}

.stat-row .stat-val {
  color: var(--gold);
}

.stat-row .stat-val:nth-child(odd) {
  color: var(--bronze);
}

/* ─── MATERIAL TIER CARDS ─────────────────────────────────────── */
.material-tier {
  border: 1px solid rgba(201, 169, 110, 0.14);
  background: rgba(13, 11, 9, 0.7);
}

.material-tier h4 {
  color: var(--gold);
}

.material-tier:nth-child(2) h4 {
  color: var(--bronze);
}

.material-tier:nth-child(3) h4 {
  color: rgba(154, 123, 95, 0.85);
}

a.material-tier:hover {
  background: rgba(201, 169, 110, 0.07);
  border-color: rgba(201, 169, 110, 0.3);
  box-shadow: 0 4px 20px rgba(201, 169, 110, 0.1);
}

/* ─── TIMELINE ────────────────────────────────────────────────── */
.timeline-deep {
  border-left: 1px solid rgba(201, 169, 110, 0.25);
}

.timeline-deep-item::before {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.18);
}

/* ─── PROJECT ROWS (work page) ────────────────────────────────── */
.project-row {
  background: #0d0b09;
}

.project-row:nth-child(even) {
  background: #0a0908;
}

/* ─── CONTACT BLOCKS ──────────────────────────────────────────── */
.contact-block {
  border: 1px solid rgba(201, 169, 110, 0.18);
  background: rgba(5, 5, 5, 0.6);
}

.contact-block h3 {
  color: var(--gold);
}

.contact-block:hover {
  border-color: rgba(201, 169, 110, 0.32);
  background: rgba(201, 169, 110, 0.04);
}

/* ─── STUDIO SIDEBAR ──────────────────────────────────────────── */
.studio-sidebar-kicker {
  color: rgba(201, 169, 110, 0.8);
}

.studio-sidebar-dot {
  background: var(--gold);
}

.studio-sidebar {
  border-left: 1px solid rgba(201, 169, 110, 0.18);
  border-right: 1px solid rgba(201, 169, 110, 0.1);
  background: linear-gradient(180deg, rgba(13, 11, 9, 0.95) 0%, rgba(8, 7, 6, 0.75) 100%);
}

.studio-sidebar-link.is-current {
  color: rgba(201, 169, 110, 0.95);
}

.studio-sidebar-link:hover {
  color: rgba(201, 169, 110, 0.7);
}

/* ─── PAGE SECTION BORDERS ────────────────────────────────────── */
.page-section {
  border-top: 1px solid rgba(201, 169, 110, 0.07);
}

.page-section--surface {
  background: #0d0b09;
}

body:not(.interior-page):not(.services-page) .page-section--graphite {
  background: #0a0908;
}

/* ─── FOCUS / ACCESSIBILITY ───────────────────────────────────── */
a:focus-visible,
button:focus-visible,
.nav-mobile-toggle:focus-visible {
  outline: 1px solid rgba(201, 169, 110, 0.85);
}

/* ─── SECTION AMBIENT LINES ───────────────────────────────────── */
#philosophy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.3), rgba(154, 123, 95, 0.2), transparent);
  pointer-events: none;
}

#materials::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(154, 123, 95, 0.25), rgba(201, 169, 110, 0.2), transparent);
  pointer-events: none;
}

#cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.35), transparent);
  pointer-events: none;
}

/* ─── CARD HOVER ACCENT ───────────────────────────────────────── */
.project-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--bronze));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
  z-index: 5;
}

.project-card:hover::after {
  transform: scaleX(1);
}

.material-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--bronze));
  z-index: 5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.material-card:hover::before {
  transform: scaleX(1);
}

/* ─── NAV CTA ─────────────────────────────────────────────────── */
.nav-cta {
  color: var(--gold);
  border: 1px solid rgba(201, 169, 110, 0.4);
  border-radius: 999px;
}

.nav-cta:hover {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
  box-shadow: 0 4px 20px rgba(201, 169, 110, 0.3);
}

.process-intro {
  color: rgba(255, 255, 255, 0.45);
}

.process-h2 {
  color: var(--warm-white);
}

.badge-text {
  color: rgba(26, 24, 22, 0.9);
}

.badge-year {
  color: #1a1814;
}


/* ---- css/bento-glass.css ---- */
/*
  BENTO GLASS SYSTEM
  Glassmorphic bento grid components for SF Upholstery Group
  Champagne gold · Warm bronze · Burgundy · Ivory luxury aesthetic
*/

/* ─── GLASS MIXINS (base classes) ───────────────────────────────── */
/*
  Vivid, saturated glassmorphic gradients.
  Opaque enough to feel rich, blurred enough to feel glass.
  Match: gold/bronze/burgundy upholstery brand palette.
*/

.glass {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Warm champagne gold — primary accent card */
.glass-purple {
  background:
    radial-gradient(ellipse at 58% 42%, rgba(201, 169, 110, 0.28) 0%, transparent 54%),
    linear-gradient(165deg,
      rgba(28, 24, 20, 0.96) 0%,
      rgba(14, 12, 10, 0.98) 100%);
  backdrop-filter: blur(32px) saturate(1.5);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  border: 1px solid rgba(201, 169, 110, 0.2);
  box-shadow:
    0 12px 56px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(201, 169, 110, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

/* Warm bronze — secondary accent card */
.glass-emerald {
  background:
    radial-gradient(ellipse at 58% 50%, rgba(154, 123, 95, 0.24) 0%, transparent 54%),
    linear-gradient(165deg,
      rgba(24, 20, 17, 0.96) 0%,
      rgba(12, 10, 9, 0.98) 100%);
  backdrop-filter: blur(32px) saturate(1.5);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  border: 1px solid rgba(154, 123, 95, 0.2);
  box-shadow:
    0 12px 56px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(154, 123, 95, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

/* Warm gold — matches "Warm Gold" swatch */
.glass-gold {
  background:
    linear-gradient(135deg,
      rgba(160, 110, 30, 0.65) 0%,
      rgba(130, 85, 15, 0.55) 50%,
      rgba(100, 65, 8, 0.50) 100%);
  backdrop-filter: blur(32px) saturate(1.8);
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
  border: 1px solid rgba(210, 170, 90, 0.28);
  box-shadow:
    0 12px 56px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(160, 110, 30, 0.18),
    inset 0 1px 0 rgba(240, 200, 120, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Deep navy blue — matches "Dark Blue" swatch */
.glass-navy {
  background:
    linear-gradient(135deg,
      rgba(14, 34, 90, 0.70) 0%,
      rgba(10, 22, 70, 0.60) 50%,
      rgba(6, 14, 52, 0.55) 100%);
  backdrop-filter: blur(32px) saturate(1.8);
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
  border: 1px solid rgba(60, 120, 240, 0.22);
  box-shadow:
    0 12px 56px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(14, 34, 90, 0.22),
    inset 0 1px 0 rgba(100, 160, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* ─── BENTO SECTION WRAPPER ────────────────────────────────────── */
.bento-section {
  padding: 80px 60px;
  position: relative;
}
.bento-section-header {
  margin-bottom: 48px;
}
.bento-section-kicker {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(128, 64, 208, 0.8);
  display: block;
  margin-bottom: 12px;
}
.bento-section-kicker.em  { color: rgba(26, 184, 122, 0.8); }
.bento-section-kicker.gd  { color: rgba(201, 169, 110, 0.8); }
.bento-section-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.92;
  letter-spacing: 0.03em;
  color: var(--warm-white);
}
.bento-section-h2 em {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  color: rgba(160, 100, 220, 0.9);
}
.bento-section-h2 em.em { color: rgba(26, 184, 122, 0.9); }
.bento-section-h2 em.gd { color: rgba(201, 169, 110, 0.9); }

/* ─── BENTO GRID ────────────────────────────────────────────────── */
.bento-grid {
  display: grid;
  gap: 12px;
}
.bento-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bento-grid-4 { grid-template-columns: repeat(4, 1fr); }
.bento-grid-5 { grid-template-columns: repeat(5, 1fr); }
.bento-grid-12 { grid-template-columns: repeat(12, 1fr); }

/* Span helpers */
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.row-2  { grid-row: span 2; }
.row-3  { grid-row: span 3; }

/* ─── BENTO CELL ────────────────────────────────────────────────── */
.bento-cell {
  border-radius: 20px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), filter 0.4s var(--ease);
}
.bento-cell:hover {
  transform: translateY(-4px) scale(1.005);
  filter: brightness(1.06);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.65),
    0 0 80px rgba(201, 169, 110, 0.16);
}
.bento-cell.glass-emerald:hover {
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.65),
    0 0 80px rgba(154, 123, 95, 0.14);
}
.bento-cell.glass-gold:hover {
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.65),
    0 0 100px rgba(160, 110, 30, 0.25);
}
.bento-cell.glass-navy:hover {
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.65),
    0 0 100px rgba(14, 34, 90, 0.3);
}
.bento-cell.glass:hover {
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(255, 255, 255, 0.06);
  filter: brightness(1.12);
}

/* Sheen highlight sweep (top-left highlight like in the screenshot) */
.bento-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
  border-radius: 20px 20px 0 0;
  pointer-events: none;
  z-index: 1;
}
.bento-cell.no-accent::before { display: none; }

/* Ambient bottom-right glow orb */
.bento-cell::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(88, 28, 180, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.bento-cell.glass-emerald::after {
  background: radial-gradient(ellipse, rgba(10, 120, 65, 0.18) 0%, transparent 70%);
}
.bento-cell.glass-gold::after {
  background: radial-gradient(ellipse, rgba(160, 110, 30, 0.18) 0%, transparent 70%);
}
.bento-cell.glass-navy::after {
  background: radial-gradient(ellipse, rgba(14, 34, 90, 0.2) 0%, transparent 70%);
}
.bento-cell.glass::after {
  background: radial-gradient(ellipse, rgba(255,255,255,0.04) 0%, transparent 70%);
}

/* ─── CELL TYPOGRAPHY HELPERS ───────────────────────────────────── */
.bento-cell-tag {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(128, 64, 208, 0.7);
  display: block;
  margin-bottom: 14px;
  position: relative; z-index: 1;
}
.bento-cell-tag.em { color: rgba(26, 184, 122, 0.7); }
.bento-cell-tag.gd { color: rgba(201, 169, 110, 0.7); }
.bento-cell-tag.nv { color: rgba(80, 140, 220, 0.7); }

.bento-cell-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 0.92;
  letter-spacing: 0.03em;
  color: var(--warm-white);
  position: relative; z-index: 1;
  margin-bottom: 16px;
}
.bento-cell-h2 em {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  color: rgba(160, 100, 220, 0.9);
}
.bento-cell-h2 em.em { color: rgba(26, 184, 122, 0.9); }
.bento-cell-h2 em.gd { color: rgba(201, 169, 110, 0.9); }

.bento-cell-h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(22px, 2.5vw, 36px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: var(--warm-white);
  position: relative; z-index: 1;
  margin-bottom: 12px;
}
.bento-cell-serif {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(24px, 3vw, 44px);
  line-height: 1.1;
  color: var(--warm-white);
  position: relative; z-index: 1;
  margin-bottom: 14px;
}

.bento-cell-body {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.5);
  position: relative; z-index: 1;
}
.bento-cell-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(72px, 8vw, 120px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: rgba(160, 100, 220, 0.85);
  display: block;
  position: relative; z-index: 1;
}
.bento-cell-num.em { color: rgba(26, 184, 122, 0.85); }
.bento-cell-num.gd { color: rgba(201, 169, 110, 0.85); }
.bento-cell-num.nv { color: rgba(80, 140, 220, 0.85); }
.bento-cell-num-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  display: block;
  margin-top: 6px;
  position: relative; z-index: 1;
}

/* ─── STAT CELL ──────────────────────────────────────────────────── */
.bento-stat-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
}

/* ─── VISUAL CELLS ───────────────────────────────────────────────── */
.bento-visual-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 240px;
}
.bento-glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.bento-glow-orb.purple {
  width: 200px; height: 200px;
  background: radial-gradient(ellipse, rgba(201, 169, 110, 0.14) 0%, transparent 70%);
}
.bento-glow-orb.emerald {
  width: 160px; height: 160px;
  background: radial-gradient(ellipse, rgba(154, 123, 95, 0.12) 0%, transparent 70%);
}

/* ─── TEXTURE FILL CELLS ─────────────────────────────────────────── */
.bento-texture-purple {
  background:
    repeating-linear-gradient(45deg, rgba(201, 169, 110, 0.04) 0px, rgba(201, 169, 110, 0.04) 1px, transparent 1px, transparent 10px),
    repeating-linear-gradient(-45deg, rgba(154, 123, 95, 0.03) 0px, rgba(154, 123, 95, 0.03) 1px, transparent 1px, transparent 10px),
    rgba(26, 24, 20, 0.06);
}
.bento-texture-emerald {
  background:
    repeating-linear-gradient(60deg, rgba(154, 123, 95, 0.04) 0px, rgba(154, 123, 95, 0.04) 1px, transparent 1px, transparent 10px),
    rgba(138, 106, 71, 0.05);
}
.bento-texture-dark {
  background:
    repeating-conic-gradient(rgba(255,255,255,0.015) 0deg, rgba(255,255,255,0.015) 90deg, transparent 90deg, transparent 180deg) 0 0 / 20px 20px,
    rgba(10, 8, 20, 0.8);
}

/* ─── LIST / QUALITY ITEMS ───────────────────────────────────────── */
.bento-list {
  list-style: none;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative; z-index: 1;
}
.bento-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.bento-list li:last-child { border-bottom: none; padding-bottom: 0; }
.bento-list li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(128, 64, 208, 0.7);
  flex-shrink: 0;
  margin-top: 5px;
}
.bento-list.em li::before { background: rgba(26, 184, 122, 0.7); }
.bento-list.gd li::before { background: rgba(201, 169, 110, 0.7); }

/* ─── PILL TAGS ──────────────────────────────────────────────────── */
.bento-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  position: relative; z-index: 1;
}
.bento-pill {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid rgba(128, 64, 208, 0.2);
  color: rgba(160, 100, 220, 0.65);
  background: rgba(128, 64, 208, 0.05);
  transition: all 0.25s var(--ease);
  cursor: default;
}
.bento-pill:hover {
  border-color: rgba(128, 64, 208, 0.45);
  color: rgba(160, 100, 220, 0.95);
  background: rgba(128, 64, 208, 0.1);
}
.bento-pill.em {
  border-color: rgba(26, 184, 122, 0.2);
  color: rgba(26, 184, 122, 0.65);
  background: rgba(26, 184, 122, 0.05);
}
.bento-pill.em:hover {
  border-color: rgba(26, 184, 122, 0.5);
  color: rgba(26, 184, 122, 0.95);
  background: rgba(26, 184, 122, 0.1);
}
.bento-pill.gd {
  border-color: rgba(201, 169, 110, 0.2);
  color: rgba(201, 169, 110, 0.65);
  background: rgba(201, 169, 110, 0.05);
}

/* ─── MATERIAL BENTO CELLS ───────────────────────────────────────── */
.bento-material-cell {
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  overflow: hidden;
  border-radius: 20px;
}
.bento-material-bg {
  position: absolute; inset: 0;
  transition: transform 0.7s var(--ease);
}
.bento-material-cell:hover .bento-material-bg { transform: scale(1.04); }
.bento-material-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5,5,12,0.92) 0%, rgba(5,5,12,0.3) 55%, transparent 100%);
}
.bento-material-body { position: relative; z-index: 2; }
.bento-material-num {
  position: absolute;
  top: 20px; right: 24px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.18);
  z-index: 2;
}
.bento-material-origin {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(26, 184, 122, 0.75);
  display: block;
  margin-bottom: 8px;
}
.bento-material-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--warm-white);
  display: block;
  margin-bottom: 8px;
  line-height: 1;
}
.bento-material-desc {
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255,255,255,0.4);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease), opacity 0.4s;
  opacity: 0;
}
.bento-material-cell:hover .bento-material-desc { max-height: 80px; opacity: 1; }

/* material backgrounds */
.bento-mat-leather {
  background:
    linear-gradient(
      180deg,
      rgba(12, 6, 3, 0.15) 0%,
      rgba(8, 4, 2, 0.55) 55%,
      rgba(5, 2, 1, 0.82) 100%
    ),
    url("../assets/aniline-leather.jpg") center center / cover no-repeat;
}

.bento-mat-leather-cell .bento-material-overlay {
  background: linear-gradient(
    0deg,
    rgba(5, 3, 2, 0.82) 0%,
    rgba(8, 5, 3, 0.35) 48%,
    rgba(10, 6, 4, 0.05) 100%
  );
}

#materials .bento-mat-leather {
  background:
    linear-gradient(
      180deg,
      rgba(12, 6, 3, 0.1) 0%,
      rgba(8, 4, 2, 0.4) 55%,
      rgba(5, 2, 1, 0.72) 100%
    ),
    url("../assets/aniline-leather.jpg") center center / cover no-repeat !important;
}
.bento-mat-velvet {
  background:
    linear-gradient(
      180deg,
      rgba(4, 14, 10, 0.14) 0%,
      rgba(6, 20, 14, 0.38) 55%,
      rgba(3, 10, 7, 0.62) 100%
    ),
    url("../assets/performance-velvet.jpg") center center / cover no-repeat;
}

#materials .bento-mat-velvet {
  background:
    linear-gradient(
      180deg,
      rgba(4, 14, 10, 0.12) 0%,
      rgba(6, 20, 14, 0.35) 55%,
      rgba(3, 10, 7, 0.58) 100%
    ),
    url("../assets/performance-velvet.jpg") center center / cover no-repeat !important;
}
.bento-mat-linen {
  background:
    linear-gradient(
      180deg,
      rgba(18, 16, 12, 0.1) 0%,
      rgba(14, 12, 10, 0.34) 55%,
      rgba(10, 8, 6, 0.58) 100%
    ),
    url("../assets/heritage-linen.jpg") center center / cover no-repeat;
}

#materials .bento-mat-linen {
  background:
    linear-gradient(
      180deg,
      rgba(18, 16, 12, 0.08) 0%,
      rgba(14, 12, 10, 0.3) 55%,
      rgba(10, 8, 6, 0.55) 100%
    ),
    url("../assets/heritage-linen.jpg") center center / cover no-repeat !important;
}

.bento-mat-suede {
  background:
    linear-gradient(
      180deg,
      rgba(8, 7, 12, 0.12) 0%,
      rgba(10, 9, 14, 0.36) 55%,
      rgba(6, 5, 10, 0.62) 100%
    ),
    url("../assets/alcantara-microfibre.jpg") center center / cover no-repeat;
}

#materials .bento-mat-suede {
  background:
    linear-gradient(
      180deg,
      rgba(8, 7, 12, 0.1) 0%,
      rgba(10, 9, 14, 0.32) 55%,
      rgba(6, 5, 10, 0.58) 100%
    ),
    url("../assets/alcantara-microfibre.jpg") center center / cover no-repeat !important;
}

/* ─── PROCESS BENTO ──────────────────────────────────────────────── */
.bento-process-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-height: 220px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.bento-step-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: rgba(128, 64, 208, 0.2);
  position: absolute;
  top: 24px; right: 24px;
}
.bento-step-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(128, 64, 208, 0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(160, 100, 220, 0.8);
  flex-shrink: 0;
  position: relative; z-index: 1;
  transition: all 0.3s var(--ease);
}
.bento-cell:hover .bento-step-circle {
  background: rgba(128, 64, 208, 0.15);
  border-color: rgba(128, 64, 208, 0.6);
  box-shadow: 0 0 20px rgba(128, 64, 208, 0.2);
}
.bento-step-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--warm-white);
  letter-spacing: 0.02em;
  position: relative; z-index: 1;
}
.bento-step-desc {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.38);
  position: relative; z-index: 1;
}

/* ─── PROJECT BENTO CELLS ────────────────────────────────────────── */
.bento-project-cell {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border-radius: 20px;
  text-align: left;
}
.bento-project-bg {
  position: absolute; inset: 0;
  transition: transform 0.8s var(--ease);
}
.bento-project-cell:hover .bento-project-bg { transform: scale(1.05); }
.bento-project-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    0deg,
    rgba(5, 5, 12, 0.78) 0%,
    rgba(5, 5, 12, 0.42) 42%,
    rgba(5, 5, 12, 0.12) 68%,
    transparent 100%
  );
  transition: opacity 0.4s;
  z-index: 1;
}
.bento-project-body {
  position: relative;
  z-index: 2;
  width: 100%;
  align-self: stretch;
  text-align: left;
  padding: 32px;
  box-sizing: border-box;
}
.bento-project-cat,
.bento-project-name,
.bento-project-detail {
  display: block;
  text-align: left;
}
.bento-project-cat {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(160, 100, 220, 0.8);
  display: block;
  margin-bottom: 8px;
}
.bento-project-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--warm-white);
  display: block;
  line-height: 1;
  margin-bottom: 10px;
}
.bento-project-detail {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.4);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s var(--ease), opacity 0.4s 0.05s;
}
.bento-project-cell:hover .bento-project-detail { max-height: 80px; opacity: 1; }
.bento-project-arrow {
  position: absolute; top: 20px; right: 20px;
  width: 36px; height: 36px;
  border: 1px solid rgba(128,64,208,0.3);
  display: flex; align-items: center; justify-content: center;
  color: rgba(160, 100, 220, 0.7);
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.35s var(--ease);
  z-index: 2;
}
.bento-project-cell:hover .bento-project-arrow { opacity: 1; transform: translateY(0); }
/* Project bg colors */
.bento-proj-1 {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(80,20,150,0.38) 0%, transparent 60%),
    linear-gradient(160deg, #1a0a30 0%, #0a0518 100%);
}
.bento-proj-2 {
  background:
    radial-gradient(ellipse at 30% 65%, rgba(10,70,45,0.45) 0%, transparent 60%),
    linear-gradient(160deg, #071a12 0%, #030a08 100%);
}
.bento-proj-3 {
  background:
    radial-gradient(ellipse at 60% 50%, rgba(15,40,110,0.4) 0%, transparent 60%),
    linear-gradient(160deg, #060d20 0%, #030810 100%);
}
.bento-proj-4 {
  background:
    radial-gradient(ellipse at 40% 40%, rgba(100,50,180,0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(20,110,75,0.2) 0%, transparent 50%),
    linear-gradient(160deg, #12081e 0%, #080512 100%);
}

/* ─── ICON / SYMBOL CELL ─────────────────────────────────────────── */
.bento-icon {
  width: 52px; height: 52px;
  border: 1px solid rgba(128, 64, 208, 0.25);
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 16px;
  color: rgba(160, 100, 220, 0.7);
  margin-bottom: 20px;
  position: relative; z-index: 1;
  transition: all 0.3s var(--ease);
}
.bento-cell:hover .bento-icon {
  background: rgba(128, 64, 208, 0.12);
  border-color: rgba(128, 64, 208, 0.5);
  box-shadow: 0 0 16px rgba(128, 64, 208, 0.2);
}
.bento-icon.em {
  border-color: rgba(26, 184, 122, 0.25);
  color: rgba(26, 184, 122, 0.7);
}
.bento-cell:hover .bento-icon.em {
  background: rgba(26, 184, 122, 0.1);
  border-color: rgba(26, 184, 122, 0.5);
  box-shadow: 0 0 16px rgba(26, 184, 122, 0.18);
}
.bento-icon.gd {
  border-color: rgba(201, 169, 110, 0.25);
  color: rgba(201, 169, 110, 0.7);
}

/* ─── CTA BENTO ──────────────────────────────────────────────────── */
.bento-cta {
  padding: 80px 60px;
  position: relative;
  overflow: hidden;
}
.bento-cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 60px;
  padding: 64px 60px;
  position: relative;
  z-index: 1;
}
.bento-cta-glow {
  position: absolute;
  top: 50%; left: 40%;
  transform: translate(-50%, -50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse,
    rgba(128, 64, 208, 0.1) 0%,
    rgba(26, 184, 122, 0.05) 40%,
    transparent 70%
  );
  pointer-events: none;
}
.bento-cta-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 5vw, 80px);
  line-height: 0.9;
  letter-spacing: 0.03em;
  color: var(--warm-white);
}
.bento-cta-h2 em {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  color: rgba(160, 100, 220, 0.9);
}
.bento-cta-sub {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,0.42);
  max-width: 460px;
  margin-top: 16px;
}
.bento-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  flex-shrink: 0;
}

/* ─── MARQUEE (editorial strip) ──────────────────────────────────── */
.bento-marquee {
  padding: clamp(20px, 4vw, 32px) 0;
  background: linear-gradient(180deg, #080807 0%, #11100e 50%, #080807 100%);
  border-top: 1px solid rgba(201, 169, 110, 0.2);
  border-bottom: 1px solid rgba(201, 169, 110, 0.2);
  overflow: hidden;
}

/* ─── OVERRIDES for existing site elements inside bento ─────────── */
#philosophy,
#materials,
#metrics,
#projects,
#workshop,
#cta { display: block; padding: 0; background: none; }

#process.bento-section:not(.has-process-carousel) {
  display: block;
  padding: 0;
  background: none;
}

/* ─── AMBIENT BACKGROUND LAYERS ────────────────────────────────── */
.bento-section-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ─── STITCH ANIMATION (reused in bento) ────────────────────────── */
.bento-stitch-row {
  display: flex; gap: 5px; align-items: center;
  position: relative; z-index: 1;
}
.bento-stitch-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(128, 64, 208, 0.45);
  animation: stitchPulse 2.4s ease-in-out infinite;
}
.bento-stitch-dot:nth-child(2) { animation-delay: 0.2s; background: rgba(26, 184, 122, 0.45); }
.bento-stitch-dot:nth-child(3) { animation-delay: 0.4s; }
.bento-stitch-dot:nth-child(4) { animation-delay: 0.6s; background: rgba(26, 184, 122, 0.45); }
.bento-stitch-dot:nth-child(5) { animation-delay: 0.8s; }
.bento-stitch-dot:nth-child(6) { animation-delay: 1.0s; background: rgba(26, 184, 122, 0.45); }
.bento-stitch-dot:nth-child(7) { animation-delay: 1.2s; }
.bento-stitch-dot:nth-child(8) { animation-delay: 1.4s; background: rgba(26, 184, 122, 0.45); }

/* ─── INNER PAGE UPGRADES ────────────────────────────────────────── */

/* Service cards → vivid glass bento */
.service-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  background: transparent;
}
.service-card {
  background:
    linear-gradient(135deg,
      rgba(88, 28, 180, 0.52) 0%,
      rgba(55, 14, 130, 0.42) 100%);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(160, 100, 255, 0.22);
  border-radius: 20px;
  box-shadow:
    0 12px 48px rgba(0,0,0,0.55),
    0 0 70px rgba(88,28,180,0.18),
    inset 0 1px 0 rgba(200,160,255,0.18);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), filter 0.4s;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
  border-radius: 20px 20px 0 0;
  pointer-events: none;
  z-index: 1;
}
.service-card:nth-child(even) {
  background:
    linear-gradient(135deg,
      rgba(10, 120, 65, 0.52) 0%,
      rgba(6, 80, 42, 0.42) 100%);
  border-color: rgba(30, 200, 120, 0.2);
  box-shadow:
    0 12px 48px rgba(0,0,0,0.55),
    0 0 70px rgba(10,120,65,0.15),
    inset 0 1px 0 rgba(80,220,150,0.16);
}
.service-card:hover {
  transform: translateY(-4px) scale(1.005);
  filter: brightness(1.1);
  box-shadow:
    0 24px 64px rgba(0,0,0,0.65),
    0 0 100px rgba(88,28,180,0.3);
}
.service-card:nth-child(even):hover {
  box-shadow:
    0 24px 64px rgba(0,0,0,0.65),
    0 0 100px rgba(10,120,65,0.25);
}

/* Material tier → vivid glass */
.material-tier {
  background:
    linear-gradient(135deg,
      rgba(88, 28, 180, 0.45) 0%,
      rgba(50, 12, 120, 0.35) 100%);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(160, 100, 255, 0.2);
  border-radius: 20px;
  box-shadow:
    0 10px 40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(200,160,255,0.15);
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
.material-tier::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 100%);
  border-radius: 20px 20px 0 0;
  pointer-events: none;
}
.material-tier:nth-child(2) {
  background:
    linear-gradient(135deg,
      rgba(10, 120, 65, 0.48) 0%,
      rgba(6, 80, 42, 0.36) 100%);
  border-color: rgba(30, 200, 120, 0.2);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(80,220,150,0.14);
}
.material-tier:nth-child(3) {
  background:
    linear-gradient(135deg,
      rgba(14, 34, 90, 0.52) 0%,
      rgba(8, 18, 60, 0.40) 100%);
  border-color: rgba(60, 120, 240, 0.2);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(100,160,255,0.14);
}
a.material-tier:hover {
  transform: translateY(-4px);
  filter: brightness(1.1);
  box-shadow: 0 20px 56px rgba(0,0,0,0.6), 0 0 80px rgba(88,28,180,0.25);
}

/* Contact blocks → vivid glass */
.contact-block {
  background:
    linear-gradient(135deg,
      rgba(88, 28, 180, 0.48) 0%,
      rgba(55, 14, 130, 0.36) 100%);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(160, 100, 255, 0.22);
  border-radius: 20px;
  box-shadow:
    0 12px 48px rgba(0,0,0,0.55),
    0 0 60px rgba(88,28,180,0.18),
    inset 0 1px 0 rgba(200,160,255,0.18);
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease);
}
.contact-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
  border-radius: 20px 20px 0 0;
  pointer-events: none;
}
.contact-block:hover {
  transform: translateY(-4px);
  filter: brightness(1.1);
  box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 0 100px rgba(88,28,180,0.3);
}

/* Project rows → glass bento */
.project-row {
  background:
    linear-gradient(135deg,
      rgba(88, 28, 180, 0.38) 0%,
      rgba(50, 12, 110, 0.28) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(160, 100, 255, 0.18);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(200,160,255,0.12);
  transition: all 0.4s var(--ease);
  overflow: hidden;
  position: relative;
}
.project-row::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
  border-radius: 20px 20px 0 0;
  pointer-events: none;
}
.project-row:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow: 0 20px 56px rgba(0,0,0,0.6), 0 0 80px rgba(88,28,180,0.22);
}
.project-row:nth-child(even) {
  background:
    linear-gradient(135deg,
      rgba(10, 120, 65, 0.40) 0%,
      rgba(6, 80, 42, 0.30) 100%);
  border-color: rgba(30, 200, 120, 0.18);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(80,220,150,0.1);
}
.project-row:nth-child(even):hover {
  box-shadow: 0 20px 56px rgba(0,0,0,0.6), 0 0 80px rgba(10,120,65,0.2);
}

/* Timeline node */
.timeline-deep-item::before {
  background: rgba(160, 100, 255, 1);
  box-shadow: 0 0 0 4px rgba(88, 28, 180, 0.25), 0 0 16px rgba(88, 28, 180, 0.5);
}

/* Page sections */
.page-section {
  border-top: 1px solid rgba(88, 28, 180, 0.12);
}
.page-section--surface {
  background:
    linear-gradient(135deg, rgba(88,28,180,0.12) 0%, rgba(50,12,110,0.08) 100%);
  backdrop-filter: blur(16px);
  border-radius: 20px;
  margin: 0 !important;
}
.page-section--graphite {
  background:
    linear-gradient(135deg, rgba(10,120,65,0.1) 0%, rgba(6,80,42,0.06) 100%);
  backdrop-filter: blur(16px);
  border-radius: 20px;
  margin: 0 !important;
}

/* Studio sidebar → vivid glass */
.studio-sidebar {
  background:
    linear-gradient(160deg,
      rgba(88, 28, 180, 0.42) 0%,
      rgba(50, 12, 120, 0.30) 100%);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(160, 100, 255, 0.22);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.55), inset 0 1px 0 rgba(200,160,255,0.16);
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .bento-grid-12 { grid-template-columns: repeat(6, 1fr); }
  .col-7, .col-8 { grid-column: span 6; }
  .col-5 { grid-column: span 6; }
}
@media (max-width: 900px) {
  .bento-section { padding: 60px 28px; }
  .bento-grid-3,
  .bento-grid-4,
  .bento-grid-5 { grid-template-columns: 1fr 1fr; }
  .bento-grid-12 { grid-template-columns: 1fr 1fr; }
  .col-2, .col-3, .col-4, .col-5,
  .col-6, .col-7, .col-8 { grid-column: span 2; }
  .row-2, .row-3 { grid-row: span 1; }
  .bento-cta-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .bento-grid-3,
  .bento-grid-4,
  .bento-grid-5,
  .bento-grid-12 { grid-template-columns: 1fr; }
  .col-2, .col-3, .col-4, .col-5,
  .col-6, .col-7, .col-8 { grid-column: span 1; }
  .bento-cell { padding: 28px 22px; }
}


/* ---- css/spacing-fix.css ---- */
/*
  SPACING & ALIGNMENT FIX
  Comprehensive layout normalization for SF Upholstery Group
  Applied last — overrides conflicts from main.css / bento-glass.css
*/

/* ─── LAYOUT TOKENS ──────────────────────────────────────────────── */
:root {
  --site-edge: 28px;      /* global left/right outer margin */
  --h-pad:      100px;   /* horizontal page padding */
  --h-pad-sm:   40px;    /* mobile horizontal padding */
  --section-v:  168px;   /* vertical section padding */
  --section-v-sm: 80px;  /* mobile vertical section padding */
  --grid-gap:   48px;    /* bento grid gap */
  --cell-pad:   64px 56px;
  --cell-pad-sm:30px 24px;
  --max-w:      1680px;  /* max site width */
  --border-r:   24px;    /* card border radius */
}

@media (max-width: 900px) {
  :root {
    --site-edge: 12px;
  }
}

/* ─── BODY & BASE ────────────────────────────────────────────────── */
body {
  overflow-x: hidden;
  margin-left: var(--site-edge);
  margin-right: var(--site-edge);
}

/* Keep page gutters everywhere; only the homepage hero bleeds full width. */

/* ─── MAX-WIDTH WRAPPER on all major sections ────────────────────── */
.bento-section,
.bento-cta,
footer {
  padding-left:  var(--h-pad);
  padding-right: var(--h-pad);
}
.bento-section > .bento-grid,
.bento-section > .bento-section-header {
  max-width: calc(var(--max-w) - (var(--h-pad) * 2));
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.bento-section {
  padding-top:    var(--section-v);
  padding-bottom: var(--section-v);
}
/* Give first bento block extra clearance from nav/hero rhythm */
#philosophy.bento-section {
  padding-top: calc(var(--section-v) + 24px);
}

/* ─── BENTO GRID GAPS ────────────────────────────────────────────── */
.bento-grid { gap: var(--grid-gap); }

/* Ensure consistent section-to-section rhythm */
.bento-section + .bento-section {
  padding-top: calc(var(--section-v) + 8px);
}

/* ─── BENTO CELL PADDING & CONTENT Z-INDEX ───────────────────────── */
.bento-cell { padding: var(--cell-pad); }

/* Ensure content children float above ::before sheen + ::after glow */
.bento-cell > *:not(.bento-material-bg):not(.bento-material-overlay):not(.bento-project-bg):not(.bento-project-overlay):not(.bento-card-video):not(.bento-card-video-overlay):not(.bento-process-bg):not(.bento-process-overlay):not(.workshop-founder-bg):not(.workshop-founder-overlay):not(.workshop-founder-content):not(.workshop-fr-bg):not(.workshop-fr-overlay):not(.workshop-theater-bg):not(.workshop-theater-overlay):not(.philosophy-hero-bg):not(.philosophy-hero-overlay):not(.philosophy-hero-body):not(.bento-cta-glow),
.bento-cell > div:not(.bento-material-bg):not(.bento-material-overlay):not(.bento-project-bg):not(.bento-project-overlay):not(.bento-card-video):not(.bento-card-video-overlay):not(.bento-process-bg):not(.bento-process-overlay):not(.workshop-founder-bg):not(.workshop-founder-overlay):not(.workshop-founder-content):not(.workshop-fr-bg):not(.workshop-fr-overlay):not(.workshop-theater-bg):not(.workshop-theater-overlay):not(.philosophy-hero-bg):not(.philosophy-hero-overlay):not(.philosophy-hero-body):not(.bento-cta-glow),
.bento-cell > span:not(.bento-material-num),
.bento-cell > p,
.bento-cell > a,
.bento-cell > ul,
.bento-cell > h1,
.bento-cell > h2,
.bento-cell > h3,
.bento-cell > h4 {
  position: relative;
  z-index: 2;
}

.bento-material-cell > .bento-material-bg,
.bento-material-cell > .bento-material-overlay,
.bento-cell.has-video > .bento-card-video,
.bento-cell.has-video > .bento-card-video-overlay,
.bento-project-cell > .bento-project-bg,
.bento-project-cell > .bento-project-overlay,
.bento-project-cell > .bento-card-video,
.bento-project-cell > .bento-card-video-overlay,
.bento-process-cell > .bento-process-bg,
.bento-process-cell > .bento-process-overlay {
  position: absolute !important;
  inset: 0 !important;
}

.bento-material-cell > .bento-material-bg,
.bento-project-cell > .bento-project-bg,
.bento-process-cell > .bento-process-bg {
  z-index: 0 !important;
}

.bento-material-cell > .bento-material-overlay,
.bento-process-cell > .bento-process-overlay {
  z-index: 1 !important;
}

.bento-mat-leather-cell.bento-material-cell,
.bento-mat-velvet-cell.bento-material-cell,
.bento-mat-linen-cell.bento-material-cell,
.bento-mat-suede-cell.bento-material-cell {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#materials .bento-mat-leather-cell .bento-material-bg.bento-mat-leather {
  background:
    linear-gradient(
      180deg,
      rgba(12, 6, 3, 0.12) 0%,
      rgba(8, 4, 2, 0.35) 55%,
      rgba(5, 2, 1, 0.55) 100%
    ),
    url("../assets/aniline-leather.jpg") center center / cover no-repeat !important;
}

#materials .bento-mat-velvet-cell .bento-material-bg.bento-mat-velvet {
  background:
    linear-gradient(
      180deg,
      rgba(4, 14, 10, 0.14) 0%,
      rgba(6, 20, 14, 0.38) 55%,
      rgba(3, 10, 7, 0.62) 100%
    ),
    url("../assets/performance-velvet.jpg") center center / cover no-repeat !important;
}

#materials .bento-mat-leather-cell .bento-material-overlay {
  background: linear-gradient(
    0deg,
    rgba(5, 3, 2, 0.88) 0%,
    rgba(8, 5, 3, 0.4) 48%,
    rgba(10, 6, 4, 0.08) 100%
  ) !important;
}

#materials .bento-mat-velvet-cell .bento-material-overlay {
  background: linear-gradient(
    0deg,
    rgba(3, 10, 7, 0.9) 0%,
    rgba(5, 18, 12, 0.42) 48%,
    rgba(6, 22, 15, 0.1) 100%
  ) !important;
}

#materials .bento-mat-linen-cell .bento-material-bg.bento-mat-linen {
  background:
    linear-gradient(
      180deg,
      rgba(18, 16, 12, 0.1) 0%,
      rgba(14, 12, 10, 0.34) 55%,
      rgba(10, 8, 6, 0.58) 100%
    ),
    url("../assets/heritage-linen.jpg") center center / cover no-repeat !important;
}

#materials .bento-mat-suede-cell .bento-material-bg.bento-mat-suede {
  background:
    linear-gradient(
      180deg,
      rgba(8, 7, 12, 0.12) 0%,
      rgba(10, 9, 14, 0.36) 55%,
      rgba(6, 5, 10, 0.62) 100%
    ),
    url("../assets/alcantara-microfibre.jpg") center center / cover no-repeat !important;
}

#materials .bento-mat-linen-cell .bento-material-overlay {
  background: linear-gradient(
    0deg,
    rgba(8, 7, 6, 0.9) 0%,
    rgba(12, 10, 8, 0.42) 48%,
    rgba(16, 14, 11, 0.1) 100%
  ) !important;
}

#materials .bento-mat-suede-cell .bento-material-overlay {
  background: linear-gradient(
    0deg,
    rgba(5, 4, 8, 0.92) 0%,
    rgba(8, 7, 12, 0.44) 48%,
    rgba(10, 9, 14, 0.1) 100%
  ) !important;
}

/* ─── BENTO SECTION HEADER ───────────────────────────────────────── */
.bento-section-header {
  margin-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bento-section-h2 {
  margin-top: 0;
  line-height: 0.92;
}

/* ─── 12-COL GRID — proper responsive behaviour ───────────────────── */
.bento-grid-12 {
  grid-template-columns: repeat(12, 1fr);
  align-items: stretch;
}
/* At 1280px: collapse to 6 cols */
@media (max-width: 1280px) {
  .bento-grid-12 { grid-template-columns: repeat(6, 1fr); }
  .col-7 { grid-column: span 6; }
  .col-8 { grid-column: span 6; }
  .col-5 { grid-column: span 6; }
  .col-4 { grid-column: span 3; }
  .col-3 { grid-column: span 3; }
  .col-2 { grid-column: span 3; }
  .row-2, .row-3 { grid-row: span 1; }
}
/* At 900px: 2 cols */
@media (max-width: 900px) {
  .bento-grid-12 { grid-template-columns: 1fr 1fr; }
  .col-2, .col-3, .col-4, .col-5,
  .col-6, .col-7, .col-8 { grid-column: span 2; }
  .row-2, .row-3 { grid-row: span 1; }
}
/* At 600px: 1 col */
@media (max-width: 600px) {
  .bento-grid-12,
  .bento-grid-3,
  .bento-grid-4,
  .bento-grid-5 { grid-template-columns: 1fr; }
  .col-2, .col-3, .col-4, .col-5,
  .col-6, .col-7, .col-8 { grid-column: span 1; }
  .row-2, .row-3 { grid-row: span 1; }
}

/* ─── PHILOSOPHY BENTO ───────────────────────────────────────────── */
#philosophy.bento-section .bento-grid {
  grid-template-rows: auto auto;
  align-items: stretch;
}

/* ─── MATERIALS BENTO ────────────────────────────────────────────── */
#materials .bento-material-cell,
#materials .bento-cell {
  display: flex;
  flex-direction: column;
}
/* Fix uneven spacing in the material header/card stack */
#materials .bento-section-header {
  margin-bottom: 84px;
}
#materials .bento-grid {
  column-gap: calc(var(--grid-gap) + 2px);
  row-gap: calc(var(--grid-gap) + 10px);
}
#materials .bento-material-cell {
  min-height: 290px !important;
  border-radius: var(--border-r) !important;
}
#materials .bento-material-cell.row-2 {
  min-height: 612px !important;
}
#projects .bento-project-cell {
  border-radius: var(--border-r) !important;
}

/* ─── PROCESS BENTO ──────────────────────────────────────────────── */
#process.bento-section {
  padding-left: var(--h-pad);
  padding-right: var(--h-pad);
  padding-top: var(--section-v);
  padding-bottom: var(--section-v);
}

@media (max-width: 900px) {
  #process.bento-section {
    padding-left: var(--h-pad-sm);
    padding-right: var(--h-pad-sm);
  }
}

#process.bento-section .bento-grid-5 {
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: calc(var(--grid-gap) - 2px);
}

#process.carousel-gsap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding-top: clamp(72px, 10vh, 128px);
  padding-bottom: clamp(28px, 4vh, 48px);
}

@media (max-width: 900px) {
  #process.carousel-gsap {
    min-height: 100svh;
    padding-top: clamp(48px, 8vh, 88px);
    padding-bottom: clamp(20px, 3vh, 36px);
  }
}

#process.carousel-gsap .bento-section-header {
  margin-bottom: 44px;
  flex-shrink: 0;
}

.bento-process-cell {
  justify-content: flex-start;
  gap: 20px;
  overflow: hidden;
}

.bento-process-photo-cell.bento-process-cell {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#process .bento-process-photo-cell .bento-process-overlay {
  background: linear-gradient(
    0deg,
    rgba(5, 4, 8, 0.58) 0%,
    rgba(8, 6, 12, 0.32) 42%,
    rgba(10, 8, 14, 0.1) 100%
  ) !important;
}

#process .bento-process-strip {
  background:
    linear-gradient(180deg, rgba(8, 6, 5, 0.04) 0%, rgba(5, 4, 3, 0.2) 100%),
    url("../assets/process-01-strip.png") 72% center / cover no-repeat !important;
}

#process .bento-process-strip + .bento-process-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(5, 4, 8, 0.58) 0%,
      rgba(8, 6, 12, 0.32) 42%,
      rgba(10, 8, 14, 0.06) 72%,
      rgba(10, 8, 14, 0.02) 100%
    ),
    linear-gradient(
      0deg,
      rgba(5, 4, 8, 0.55) 0%,
      rgba(8, 6, 12, 0.22) 48%,
      rgba(10, 8, 14, 0.06) 100%
    ) !important;
}

#process .bento-process-frame {
  background:
    linear-gradient(180deg, rgba(10, 7, 4, 0.04) 0%, rgba(6, 4, 2, 0.2) 100%),
    url("../assets/process-02-frame.png") 68% center / cover no-repeat !important;
}

#process .bento-process-frame + .bento-process-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(5, 4, 8, 0.58) 0%,
      rgba(8, 6, 12, 0.34) 40%,
      rgba(10, 8, 14, 0.08) 68%,
      rgba(10, 8, 14, 0.02) 100%
    ),
    linear-gradient(
      0deg,
      rgba(5, 4, 8, 0.55) 0%,
      rgba(8, 6, 12, 0.24) 50%,
      rgba(10, 8, 14, 0.08) 100%
    ) !important;
}

#process .bento-process-materials {
  background:
    linear-gradient(180deg, rgba(4, 10, 8, 0.04) 0%, rgba(3, 8, 6, 0.2) 100%),
    url("../assets/process-03-materials.png") center center / cover no-repeat !important;
}

#process .bento-process-materials + .bento-process-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(4, 8, 6, 0.58) 0%,
      rgba(6, 12, 9, 0.36) 38%,
      rgba(8, 14, 11, 0.08) 65%,
      rgba(8, 14, 11, 0.03) 100%
    ),
    linear-gradient(
      0deg,
      rgba(4, 8, 6, 0.55) 0%,
      rgba(6, 12, 9, 0.22) 50%,
      rgba(8, 14, 11, 0.06) 100%
    ) !important;
}

#process .bento-process-upholstery {
  background:
    linear-gradient(180deg, rgba(6, 5, 8, 0.04) 0%, rgba(4, 3, 6, 0.2) 100%),
    url("../assets/process-04-upholstery.png") 62% 58% / cover no-repeat !important;
}

#process .bento-process-upholstery + .bento-process-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(5, 4, 8, 0.58) 0%,
      rgba(8, 6, 12, 0.36) 38%,
      rgba(10, 8, 14, 0.08) 62%,
      rgba(10, 8, 14, 0.03) 100%
    ),
    linear-gradient(
      0deg,
      rgba(5, 4, 8, 0.55) 0%,
      rgba(8, 6, 12, 0.24) 50%,
      rgba(10, 8, 14, 0.06) 100%
    ) !important;
}

#process .bento-process-final {
  background:
    linear-gradient(180deg, rgba(8, 6, 4, 0.04) 0%, rgba(5, 4, 3, 0.2) 100%),
    url("../assets/process-05-final.png") 70% center / cover no-repeat !important;
}

#process .bento-process-final + .bento-process-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(8, 6, 4, 0.58) 0%,
      rgba(12, 9, 6, 0.36) 38%,
      rgba(14, 11, 8, 0.08) 65%,
      rgba(14, 11, 8, 0.03) 100%
    ),
    linear-gradient(
      0deg,
      rgba(8, 6, 4, 0.55) 0%,
      rgba(12, 9, 6, 0.24) 50%,
      rgba(14, 11, 8, 0.06) 100%
    ) !important;
}

.bento-process-photo-cell .bento-step-num {
  z-index: 2 !important;
}

/* Horizontal pinned process carousel */
.process-carousel-section {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: clamp(420px, 52vh, 540px);
  width: 100%;
}

#process.bento-section.has-process-carousel,
#process.bento-section.carousel-gsap {
  padding-left: 0;
  padding-right: 0;
}

.process-carousel-section.carousel-gsap {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

#process.carousel-gsap .bento-section-header,
#process.bento-section.has-process-carousel .bento-section-header {
  padding-left: var(--h-pad);
  padding-right: var(--h-pad);
}

.process-carousel-track {
  overflow: hidden;
  width: 100%;
}

.process-carousel-rail {
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
  padding-left: 0;
  padding-right: max(var(--site-edge), 24px);
  align-items: stretch;
}

.process-carousel-rail .bento-process-cell {
  flex: 0 0 auto;
  width: clamp(300px, 28vw, 400px);
  min-height: clamp(400px, 50vh, 500px);
  box-sizing: border-box;
}

.process-carousel-section.carousel-gsap .process-carousel-rail .bento-process-cell {
  flex: 0 0 auto;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Desktop fallback when GSAP unavailable */
@media (min-width: 901px) {
  .process-carousel-section.carousel-fallback {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    min-height: 0;
    padding-bottom: 16px;
  }

  .process-carousel-section.carousel-fallback .process-carousel-track {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  .process-carousel-section.carousel-fallback .process-carousel-rail {
    transform: none !important;
  }

  .process-carousel-section.carousel-fallback .bento-process-cell {
    scroll-snap-align: start;
  }
}

/* ─── METRICS BENTO ──────────────────────────────────────────────── */
#metrics.bento-section .bento-grid-12 {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

@media (min-width: 901px) {
  #metrics .bento-grid-12 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
  }

  #metrics .bento-stat-cell,
  #metrics .bento-grid-12 .col-4 {
    grid-column: span 1 !important;
  }
}

.bento-stat-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 360px;
}

/* ─── PROJECTS BENTO ─────────────────────────────────────────────── */
#projects.bento-section .bento-grid-12 {
  align-items: stretch;
}

/* ─── WORKSHOP BENTO ─────────────────────────────────────────────── */
#workshop.bento-section .bento-grid-12 {
  align-items: stretch;
  grid-auto-rows: auto;
}

/* ─── CTA BENTO ──────────────────────────────────────────────────── */
#cta.bento-section,
#workshop.bento-section + #cta.bento-section {
  padding-top: clamp(32px, 4vh, 52px) !important;
  padding-bottom: clamp(32px, 4vh, 52px) !important;
}

#cta.bento-section .bento-grid-12 {
  align-items: start;
}
.bento-cta-main {
  padding: 72px 64px;
  position: relative;
  overflow: hidden;
  min-height: 360px;
}
.bento-cta-main .bento-cta-glow {
  position: absolute !important;
  inset: auto;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  z-index: 0 !important;
  pointer-events: none;
}
.bento-cta-main .bento-cell-h2 {
  margin-top: 4px !important;
}
.bento-cta-main .bento-cell-body {
  margin-top: 14px !important;
}
.bento-cta-actions {
  display: flex;
  gap: 14px;
  margin-top: 24px;
  position: relative;
  z-index: 2;
}
.bento-cta-actions .btn-large,
.bento-cta-actions .btn-outline-large {
  min-width: 0;
  white-space: nowrap;
}

/* ─── Related service navigation ─────────────────────────────────── */
.service-related-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.service-related-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(201, 169, 110, 0.28);
  border-radius: 999px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 234, 224, 0.82);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.service-related-nav a:hover {
  border-color: rgba(201, 169, 110, 0.55);
  background: rgba(201, 169, 110, 0.1);
  color: #f0e4da;
}

.services-page .service-related-section {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.services-page .service-related-panel {
  padding: 24px 20px;
  border: 1px solid rgba(26, 24, 22, 0.08);
  border-radius: 20px;
  background: linear-gradient(180deg, #faf9f7 0%, #ffffff 100%);
  box-shadow: 0 10px 28px rgba(26, 24, 22, 0.05);
}

.services-page .service-related-panel .section-kicker {
  margin-bottom: 12px;
}

.services-page .service-related-panel .section-title-page {
  margin-bottom: 18px;
  max-width: 14ch;
}

.services-page .service-related-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 0;
}

.services-page .service-related-nav a {
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  color: #1a1814 !important;
  background: #ffffff !important;
  border: 1px solid rgba(154, 123, 95, 0.32) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
}

.services-page .service-related-nav a:hover {
  color: #1a1814 !important;
  background: rgba(201, 169, 110, 0.12) !important;
  border-color: rgba(154, 123, 95, 0.55) !important;
}

@media (min-width: 640px) {
  .services-page .service-related-panel {
    padding: 28px 24px;
  }

  .services-page .service-related-panel .section-title-page {
    max-width: none;
  }

  .services-page .service-related-nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .services-page .service-related-nav a {
    width: auto;
    justify-content: flex-start;
  }
}

/* ─── MARQUEE — dark editorial service strip ─────────────────────── */
.bento-marquee {
  position: relative;
  padding: clamp(20px, 4vw, 32px) 0;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #080807 0%,
    #11100e 50%,
    #080807 100%
  ) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(201, 169, 110, 0.2) !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.2) !important;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 7%,
    #000 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 7%,
    #000 93%,
    transparent 100%
  );
}

.bento-marquee::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 169, 110, 0.45),
    transparent
  );
  pointer-events: none;
}

.bento-marquee .marquee-inner {
  display: flex;
  align-items: center;
  gap: clamp(40px, 8vw, 72px);
  white-space: nowrap;
  animation: marquee 28s linear infinite;
}

.bento-marquee .marquee-item {
  font-family: "DM Mono", monospace;
  font-size: clamp(10px, 2.6vw, 12px);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240, 234, 224, 0.82) !important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: clamp(40px, 8vw, 72px);
}

.bento-marquee .marquee-item::after {
  content: "✦";
  color: #c9a96e !important;
  font-size: 11px;
  opacity: 0.95 !important;
  text-shadow: 0 0 12px rgba(201, 169, 110, 0.35);
}

body.home-page .bento-marquee {
  background: linear-gradient(
    180deg,
    #080807 0%,
    #11100e 50%,
    #080807 100%
  ) !important;
}

/* ─── NAV ────────────────────────────────────────────────────────── */
nav {
  padding: 20px var(--h-pad);
}
nav.scrolled {
  padding: 14px var(--h-pad);
}
@media (max-width: 900px) {
  nav, nav.scrolled { padding: 18px var(--h-pad-sm); }
}

/* ─── HERO ───────────────────────────────────────────────────────── */
#hero {
  padding: 0 var(--h-pad) 120px;
}
@media (min-width: 901px) {
  body.home-page #hero {
    margin-left: calc(-1 * var(--site-edge));
    margin-right: calc(-1 * var(--site-edge));
    width: calc(100% + (var(--site-edge) * 2));
  }
}
@media (max-width: 900px) {
  #hero {
    padding: 96px var(--h-pad-sm) 88px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  body.home-page #hero {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    padding-left: var(--h-pad-sm) !important;
    padding-right: var(--h-pad-sm) !important;
    min-height: 100svh;
  }
  body.home-page .hero-year,
  body.home-page .hero-scroll-hint {
    display: none;
  }
  body.home-page .hero-sub {
    max-width: 100%;
  }
  body.home-page .hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* ─── FOOTER ─────────────────────────────────────────────────────── */
footer {
  margin-top: 56px;
  padding-top:    104px;
  padding-bottom: 56px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 64px;
  margin-bottom: 72px;
  align-items: start;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 36px;
  flex-wrap: wrap;
  gap: 22px;
}
@media (max-width: 900px) {
  footer { margin-top: 40px; padding-top: 72px; padding-bottom: 40px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 48px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 600px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ─── INNER PAGES — PAGE HERO ────────────────────────────────────── */
.page-hero {
  min-height: 48vh;
  padding: 130px var(--h-pad) 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
.page-hero .hero-h1 {
  font-size: clamp(44px, 7vw, 100px);
  line-height: 0.9;
  margin-top: 12px;
  margin-bottom: 0;
}
.page-hero .hero-tag { margin-bottom: 0; }
.page-hero .hero-sub {
  margin-top: 20px;
  margin-bottom: 0;
  max-width: 500px;
  font-size: 14px;
  line-height: 1.7;
}
@media (max-width: 900px) {
  .page-hero {
    padding: 100px var(--h-pad-sm) 72px;
    min-height: 44vh;
  }
  .page-hero + .page-with-sidebar {
    padding-top: 20px;
  }
  .page-hero + .page-with-sidebar .studio-sidebar {
    position: static;
    margin-top: 0;
  }
}

/* Work page hero — luxury charcoal (no green/purple) */
.work-hero,
.process-hero,
.team-hero,
.contact-hero,
.services-hero,
.materials-hero,
.studio-hero,
.press-hero {
  background:
    radial-gradient(ellipse at 78% 18%, rgba(201, 169, 110, 0.12) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 86%, rgba(255, 255, 255, 0.03) 0%, transparent 54%),
    linear-gradient(165deg, #0c0f17 0%, #080a11 55%, #06070c 100%) !important;
}
.work-hero .hero-bg,
.process-hero .hero-bg,
.team-hero .hero-bg,
.contact-hero .hero-bg,
.services-hero .hero-bg,
.materials-hero .hero-bg,
.studio-hero .hero-bg,
.press-hero .hero-bg {
  background:
    radial-gradient(ellipse at 70% 22%, rgba(201, 169, 110, 0.1) 0%, transparent 54%),
    linear-gradient(to top, rgba(6, 8, 14, 0.9) 0%, rgba(6, 8, 14, 0.32) 62%, rgba(6, 8, 14, 0.12) 100%) !important;
}
.work-hero .hero-line,
.process-hero .hero-line,
.team-hero .hero-line,
.contact-hero .hero-line,
.services-hero .hero-line,
.materials-hero .hero-line,
.studio-hero .hero-line,
.press-hero .hero-line {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201, 169, 110, 0.2) 36%,
    rgba(201, 169, 110, 0.08) 72%,
    transparent 100%
  ) !important;
}
.work-hero .hero-tag,
.process-hero .hero-tag,
.team-hero .hero-tag,
.contact-hero .hero-tag,
.services-hero .hero-tag,
.materials-hero .hero-tag,
.studio-hero .hero-tag,
.press-hero .hero-tag {
  color: rgba(225, 195, 143, 0.94) !important;
}
.work-hero .hero-h1 em,
.process-hero .hero-h1 em,
.team-hero .hero-h1 em,
.contact-hero .hero-h1 em,
.services-hero .hero-h1 em,
.materials-hero .hero-h1 em,
.studio-hero .hero-h1 em,
.press-hero .hero-h1 em {
  color: #d2b075 !important;
}

/* ─── INNER PAGES — MAIN LAYOUT ──────────────────────────────────── */
.page-main {
  padding: 0 var(--h-pad) 132px;
  max-width: var(--max-w);
  margin-left:  auto;
  margin-right: auto;
}
.page-section {
  padding: 92px 0;
}
.page-section:first-of-type { padding-top: 64px; }

/* Surface/graphite sections — no bleed, glass radius instead */
.page-section--surface,
.page-section--graphite {
  margin: 0;
  padding: 84px 68px;
  border-radius: var(--border-r);
  margin-bottom: 28px;
}
.page-section--surface + .page-section,
.page-section--graphite + .page-section {
  padding-top: 92px;
}
@media (max-width: 900px) {
  .page-main { padding: 0 var(--h-pad-sm) 96px; }
  .page-section { padding: 72px 0; }
  .page-section--surface,
  .page-section--graphite { padding: 52px 28px; margin: 0 0 20px; }
}

/* ─── INNER PAGES — SIDEBAR LAYOUT ──────────────────────────────── */
.page-with-sidebar {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 64px var(--h-pad) 132px;
  align-items: start;
}
.page-with-sidebar .page-main {
  padding: 0;
  max-width: 100%;
}
.studio-sidebar {
  position: sticky;
  top: 120px;
  padding: 32px 24px;
  max-width: 220px;
}
.studio-sidebar-nav { gap: 14px; }
.studio-sidebar-link { font-size: 16px; }
@media (max-width: 900px) {
  .page-with-sidebar {
    grid-template-columns: 1fr;
    padding: 0 var(--h-pad-sm) 96px;
    gap: 32px;
  }
  .studio-sidebar {
    position: static;
    max-width: 100%;
    border-radius: 16px;
    padding: 24px;
  }
}

/* ─── PAGE GRID 2-COL ────────────────────────────────────────────── */
.page-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.page-grid-2--wide-left { grid-template-columns: 1.2fr 0.8fr; }
@media (max-width: 900px) {
  .page-grid-2, .page-grid-2--wide-left {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ─── SERVICE CARDS ──────────────────────────────────────────────── */
.service-cards {
  gap: var(--grid-gap);
  margin-top: 48px;
}
.service-card {
  padding: 48px 44px;
  min-height: 300px;
}
@media (max-width: 700px) {
  .service-cards { grid-template-columns: 1fr; }
}

/* ─── MATERIAL TIER GRID ─────────────────────────────────────────── */
.material-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  margin-top: 48px;
}
.material-tier { padding: 40px 36px; }
@media (max-width: 800px) {
  .material-tier-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .material-tier-grid { grid-template-columns: 1fr; }
}

/* ─── CONTACT PANEL ──────────────────────────────────────────────── */
.contact-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  margin-top: 48px;
}
.contact-block { padding: 48px 42px; }
.contact-cta-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.contact-cta-actions .btn-large,
.contact-cta-actions .btn-outline-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.services-page .contact-cta-actions .btn-large,
body.services-page .contact-cta-actions .btn-outline-large {
  padding: 16px 40px !important;
  min-height: auto;
}
@media (max-width: 700px) {
  .contact-panel { grid-template-columns: 1fr; }
  .contact-cta-actions {
    gap: 10px;
  }
}

/* ─── PROJECT LIST (work page) ───────────────────────────────────── */
.project-list { gap: var(--grid-gap); margin-top: 48px; }
.project-row {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  padding: 50px 44px;
  align-items: center;
}
.project-row-visual { aspect-ratio: 16/10; }

.project-row-visual .project-overlay {
  display: none !important;
}

.project-row-visual .bento-card-video {
  opacity: 1;
}
@media (max-width: 700px) {
  .project-row { grid-template-columns: 1fr; gap: 34px; padding: 36px 28px; }
}

/* ─── WORK PAGE — LUXURY INTRO PANEL ─────────────────────────────── */
.work-intro-luxe {
  position: relative;
  padding: 42px 42px 18px !important;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(ellipse at 85% 20%, rgba(116, 85, 189, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 12% 85%, rgba(17, 108, 84, 0.2) 0%, transparent 52%),
    linear-gradient(162deg, rgba(13, 16, 29, 0.95) 0%, rgba(7, 9, 16, 0.98) 100%);
  box-shadow:
    0 20px 54px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.work-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 34px;
  align-items: start;
  margin-bottom: 38px;
}
.work-intro-copy .prose {
  max-width: 640px;
  margin-top: 16px;
}
.work-intro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.work-intro-tag {
  border: 1px solid rgba(201, 169, 110, 0.28);
  background: rgba(201, 169, 110, 0.1);
  color: rgba(238, 214, 169, 0.92);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.work-intro-meta {
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(7, 10, 18, 0.68);
  border-radius: 18px;
  padding: 24px 22px;
}
.work-meta-item + .work-meta-item {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.work-meta-label {
  display: block;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.88);
  margin-bottom: 8px;
}
.work-meta-value {
  display: block;
  color: rgba(244, 244, 247, 0.9);
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  line-height: 1.45;
}
.work-intro-meta .work-meta-item:first-child .work-meta-value {
  font-family: "Bebas Neue", sans-serif;
  font-size: 54px;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: #f3e8cf;
}
.work-intro-cta {
  width: 100%;
  margin-top: 24px;
  justify-content: center;
  text-align: center;
}
@media (max-width: 900px) {
  .work-intro-luxe {
    padding: 32px 22px 12px !important;
  }
  .work-intro-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 28px;
  }
  .work-intro-copy .prose {
    max-width: 100%;
  }
}

/* ─── STAT ROW ───────────────────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 52px;
  padding-top: 44px;
  border-top: 1px solid rgba(160, 100, 255, 0.15);
}
.stat-row--inline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 600px) {
  .stat-row { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stat-row--inline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .stat-row--inline .stat-val {
    font-size: clamp(40px, 11vw, 62px);
  }
  .stat-row--inline .stat-lbl {
    letter-spacing: 0.16em;
  }
}

/* ─── TIMELINE ───────────────────────────────────────────────────── */
.timeline-deep {
  margin-top: 56px;
  padding-left: 34px;
}
.timeline-deep-item { margin-bottom: 52px; }

/* ─── PROSE / SECTION TITLE ──────────────────────────────────────── */
.section-kicker { margin-bottom: 20px; }
.section-title-page { margin-bottom: 28px; }
.prose { font-size: 15px; }
.prose p + p { margin-top: 1.2em; }

/* ─── EDITORIAL DIVIDERS (still present on inner pages) ──────────── */
.editorial-divider {
  padding: 0 var(--h-pad);
  margin: 0;
}

/* ─── SPEC LIST ──────────────────────────────────────────────────── */
.spec-list { margin-top: 32px; }
.spec-list li { padding: 18px 0; font-size: 14px; gap: 16px; }

/* ─── VISION PAGE ────────────────────────────────────────────────── */
.vision-wrap {
  max-width: calc(var(--max-w) - (var(--h-pad) * 2));
  margin: 0 auto;
  padding: 0 var(--h-pad) 148px;
}
.vision-hero {
  padding: 164px var(--h-pad) 92px;
}
.vision-section { padding: 92px 0; }
.vision-section:first-of-type { padding-top: 68px; }

/* Fly-in motion layer (Framer-style, vanilla implementation) */
.reveal.motion-fly {
  opacity: 0;
  will-change: transform, opacity, filter;
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.motion-fly[data-fly="up"] {
  transform: translate3d(0, 72px, 0) scale(0.965);
  filter: blur(6px);
}
.reveal.motion-fly[data-fly="left"] {
  transform: translate3d(-68px, 40px, 0) scale(0.965) rotate(-0.6deg);
  filter: blur(6px);
}
.reveal.motion-fly[data-fly="right"] {
  transform: translate3d(68px, 40px, 0) scale(0.965) rotate(0.6deg);
  filter: blur(6px);
}
.reveal.motion-fly[data-fly="pop"] {
  transform: translate3d(0, 36px, 0) scale(0.92);
  filter: blur(6px);
}
.reveal.motion-fly.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(0);
  filter: blur(0);
}

/* ─── RESPONSIVE SECTION PADDING ────────────────────────────────── */
@media (max-width: 900px) {
  .bento-section {
    padding: var(--section-v-sm) var(--h-pad-sm);
  }
  .bento-section + .bento-section {
    padding-top: calc(var(--section-v-sm) + 6px);
  }
  #philosophy.bento-section {
    padding-top: calc(var(--section-v-sm) + 20px);
    padding-bottom: 24px !important;
  }

  #philosophy.bento-section + #metrics.bento-section {
    padding-top: 24px !important;
    margin-top: 0 !important;
  }

  #metrics.bento-section {
    padding-bottom: var(--section-v-sm) !important;
  }

  #metrics .bento-stat-cell.reveal:not(.motion-fly):not(.visible) {
    opacity: 1 !important;
    transform: none !important;
  }

  .bento-grid-3,
  .bento-grid-4,
  .bento-grid-5 {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .process-carousel-section:not(.carousel-gsap) {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--h-pad-sm);
    min-height: 0;
    padding-bottom: 12px;
    margin-left: calc(-1 * var(--h-pad-sm));
    margin-right: calc(-1 * var(--h-pad-sm));
    padding-left: var(--h-pad-sm);
    padding-right: var(--h-pad-sm);
    width: calc(100% + (var(--h-pad-sm) * 2));
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .process-carousel-section:not(.carousel-gsap)::-webkit-scrollbar {
    display: none;
  }

  .process-carousel-section.carousel-gsap {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  #process.carousel-gsap .bento-section-header,
  #process.bento-section.has-process-carousel .bento-section-header {
    padding-left: var(--h-pad-sm);
    padding-right: var(--h-pad-sm);
  }

  .process-carousel-section.carousel-gsap .process-carousel-rail {
    gap: 16px;
    padding-left: 0;
    padding-right: max(var(--site-edge), 20px);
  }

  .process-carousel-section.carousel-gsap .process-carousel-rail .bento-process-cell {
    width: min(78vw, 360px);
    min-height: 420px;
  }

  .process-carousel-section:not(.carousel-gsap) .process-carousel-track {
    overflow: visible;
    width: auto;
  }

  .process-carousel-section:not(.carousel-gsap) .process-carousel-rail {
    transform: none !important;
    gap: 0;
    padding-right: var(--h-pad-sm);
  }

  .process-carousel-section:not(.carousel-gsap) .bento-process-cell {
    width: min(78vw, 360px);
    min-height: 460px;
    scroll-snap-align: start;
  }
  #materials .bento-section-header { margin-bottom: 58px; }
  #materials .bento-grid { row-gap: 28px; column-gap: 28px; }
  #materials .bento-material-cell,
  #materials .bento-material-cell.row-2 {
    min-height: 260px !important;
  }
  .bento-cell { padding: var(--cell-pad-sm); }
  .bento-stat-cell { min-height: 220px; }
  .bento-cell-num { font-size: clamp(52px, 10vw, 80px); }
  .editorial-divider { padding: 0 var(--h-pad-sm); }
  #hero { padding-bottom: 88px; }
  .bento-cta-main {
    padding: 36px 28px;
  }
  #cta .bento-grid {
    gap: 20px !important;
  }
  .bento-cta-actions {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 20px;
  }
  .bento-cta-actions .btn-large,
  .bento-cta-actions .btn-outline-large {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 14px 18px !important;
    white-space: normal;
  }
}
@media (max-width: 600px) {
  .bento-grid-3,
  .bento-grid-4,
  .bento-grid-5 { grid-template-columns: 1fr; }
  .process-carousel-section.carousel-gsap .process-carousel-rail .bento-process-cell {
    width: min(84vw, 320px);
    min-height: 420px;
  }
  .bento-section { padding: 64px var(--h-pad-sm); }
  #materials .bento-section-header { margin-bottom: 46px; }
  #materials .bento-grid { row-gap: 24px; }
  #philosophy.bento-section { padding-top: 76px; }
  .footer-social { gap: 16px; }
  .bento-cta-main {
    padding: 28px 20px;
  }
  #cta .bento-grid {
    gap: 32px !important;
  }
  .bento-cta-main .bento-cell-h2 {
    font-size: clamp(34px, 12vw, 58px) !important;
    line-height: 0.95;
  }
  .bento-cta-main .bento-cell-body {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal.motion-fly,
  .reveal.motion-fly[data-fly="up"],
  .reveal.motion-fly[data-fly="left"],
  .reveal.motion-fly[data-fly="right"],
  .reveal.motion-fly[data-fly="pop"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .hero-tag,
  .hero-h1,
  .hero-sub,
  .hero-actions,
  .page-hero .hero-tag,
  .page-hero .hero-h1,
  .page-hero .hero-sub,
  .page-hero .hero-actions {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* UX journey: scroll progress indicator */
#pageProgressTrack {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
#pageProgressBar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #c9a96e, #e2c58f);
  box-shadow: 0 0 12px rgba(201, 169, 110, 0.6);
  transition: width 0.12s linear;
}

/* Remove colored rectangle borders from bento components */
.bento-cell,
.bento-material-cell,
.bento-project-cell,
.service-card,
.material-tier,
.contact-block,
.project-row,
.studio-sidebar {
  border: none !important;
  outline: none !important;
}

/* ─── SECTION FLOW (fix stacked/overlapping feel) ───────────────── */
/* Keep natural bento section padding + add clear progression rhythm */
#philosophy,
#materials,
#metrics,
#projects,
#workshop,
#cta {
  display: block;
}
#process.bento-section:not(.has-process-carousel) {
  display: block;
}
#materials,
#process,
#metrics,
#projects,
#workshop,
#cta {
  margin-top: 34px;
}

#metrics.bento-section {
  margin-top: 0 !important;
}
/* hide legacy homepage modules in mobile if they still render */
@media (max-width: 900px) {
  .materials-header,
  .materials-scroll-track { display: none; }
  .process-steps { display: none; }
  .metrics-grid  { display: none; }
  .projects-grid { display: none; }
}

/* ─── LINK HOVER STATES in CTA quick-links ───────────────────────── */
#cta a[style*="color:rgba(255,255,255"] {
  transition: color 0.25s, opacity 0.25s;
}
#cta a[style*="color:rgba(255,255,255"]:hover {
  color: rgba(255,255,255,0.85) !important;
  opacity: 1;
}

/* ─── GOLD ACCENT OVERRIDE (replace purple accents) ─────────────── */
:root {
  --gold-accent: #c9a96e;
  --gold-accent-2: #b98f4c;
  --gold-accent-3: #8a6a33;
  --btn-gold: #c5a059;
  --btn-gold-hover: #d4b06a;
  --btn-gold-shadow: rgba(0, 0, 0, 0.16);
}

/* Primary accent text */
.logo-secondary,
.hero-tag,
.hero-h1 em,
.bento-section-kicker,
.bento-cell-tag:not(.em):not(.nv),
.bento-cell-h2 em:not(.em),
.bento-project-cat,
.section-kicker,
.section-title-page em {
  color: var(--gold-accent) !important;
}

/* ─── Site-wide buttons — homepage hero gold pill ───────────────── */
.btn-primary,
.btn-large,
.btn-outline-large,
.nav-cta {
  font-family: "DM Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #ffffff !important;
  background: var(--btn-gold) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  padding: 16px 36px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 8px 24px var(--btn-gold-shadow) !important;
  transition:
    background 0.35s var(--ease),
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease) !important;
}

.btn-primary:hover,
.btn-large:hover,
.btn-outline-large:hover,
.nav-cta:hover {
  color: #ffffff !important;
  background: var(--btn-gold-hover) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.2) !important;
}

.nav-cta {
  padding: 11px 22px !important;
}

/* Footer/nav accents */
.footer-logo .logo-secondary,
.footer-col-title,
.footer-social a:hover {
  color: var(--gold-accent) !important;
}
.glass-purple,
.bento-cell.glass-purple {
  background: linear-gradient(
    135deg,
    rgba(160, 120, 50, 0.72) 0%,
    rgba(130, 95, 35, 0.6) 50%,
    rgba(96, 70, 24, 0.55) 100%
  ) !important;
  border-color: rgba(201, 169, 110, 0.28) !important;
  box-shadow:
    0 12px 56px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(160, 120, 50, 0.22),
    inset 0 1px 0 rgba(250, 224, 168, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
}
.bento-cell.glass-purple::after {
  background: radial-gradient(ellipse, rgba(160, 120, 50, 0.2) 0%, transparent 70%) !important;
}

/* Numeric/indicator accents */
.bento-cell-num:not(.em):not(.nv),
.metric-num,
.stat-row .stat-val,
.bento-step-circle {
  color: var(--gold-accent) !important;
  border-color: rgba(201, 169, 110, 0.45) !important;
}

/* Pills and separators */
.bento-pill {
  color: rgba(201, 169, 110, 0.8) !important;
  border-color: rgba(201, 169, 110, 0.35) !important;
  background: rgba(201, 169, 110, 0.12) !important;
}
.bento-pill:hover {
  color: #f0d9b0 !important;
  border-color: rgba(201, 169, 110, 0.6) !important;
  background: rgba(201, 169, 110, 0.2) !important;
}

/* Purple glass cards -> gold glass cards */
/* Matches requested style: dark cinematic cards + subtle indigo core glow */

/* Global atmospheric backdrop */
body {
  background: #ffffff !important;
  color: #1a1814;
}

/* Section surfaces harmonized to same tone */
.bento-section,
.page-section,
.page-hero {
  background-color: transparent;
}

/* Core card language everywhere */
.bento-cell:not(.bento-mat-leather-cell):not(.bento-mat-velvet-cell):not(.bento-mat-linen-cell):not(.bento-mat-suede-cell):not(.bento-process-photo-cell):not(.workshop-founder-cell):not(.workshop-fr-photo-cell):not(.workshop-theater-photo-cell):not(.philosophy-hero-cell):not(.services-maint-step),
.bento-material-cell:not(.bento-mat-leather-cell):not(.bento-mat-velvet-cell):not(.bento-mat-linen-cell):not(.bento-mat-suede-cell),
.bento-process-cell:not(.bento-process-photo-cell),
.bento-project-cell,
.service-card,
.material-tier,
.contact-block,
.project-row {
  background:
    radial-gradient(ellipse at 58% 50%, rgba(154, 123, 95, 0.14) 0%, transparent 52%),
    linear-gradient(165deg, rgba(22, 20, 18, 0.96) 0%, rgba(10, 9, 8, 0.98) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  position: relative;
  overflow: hidden;
}

/* Keep key gold callout cards as accent */
.glass-gold,
.bento-cell.glass-gold {
  background:
    radial-gradient(ellipse at 60% 48%, rgba(165, 116, 34, 0.24) 0%, transparent 55%),
    linear-gradient(160deg, rgba(95, 68, 24, 0.92) 0%, rgba(66, 46, 16, 0.96) 100%) !important;
  border-color: rgba(201, 169, 110, 0.24) !important;
}

/* Bronze accent cards — warm upholstery family */
.glass-emerald,
.bento-cell.glass-emerald {
  background:
    radial-gradient(ellipse at 58% 50%, rgba(154, 123, 95, 0.22) 0%, transparent 54%),
    linear-gradient(165deg, rgba(22, 20, 18, 0.96) 0%, rgba(10, 9, 8, 0.98) 100%) !important;
  border-color: rgba(154, 123, 95, 0.18) !important;
}

/* Keep navy accent cards in-family but still dark */
.glass-navy,
.bento-cell.glass-navy {
  background:
    radial-gradient(ellipse at 58% 50%, rgba(25, 49, 110, 0.26) 0%, transparent 54%),
    linear-gradient(165deg, rgba(13, 19, 33, 0.95) 0%, rgba(8, 12, 21, 0.98) 100%) !important;
  border-color: rgba(80, 140, 220, 0.16) !important;
}

/* Headline rhythm/readability */
.bento-cell-h2,
.bento-cell-h3,
.bento-project-name,
.bento-material-name {
  line-height: 0.95;
  letter-spacing: 0.03em;
}
.bento-cell-body,
.project-detail,
.material-tier p,
.contact-block p {
  color: rgba(245, 245, 248, 0.64) !important;
}

/* Premium hover effect (sitewide) */
.bento-cell,
.bento-material-cell,
.bento-project-cell,
.service-card,
.material-tier,
.contact-block,
.project-row {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    filter 0.35s ease;
}
.bento-cell:hover,
.bento-material-cell:hover,
.bento-project-cell:hover,
.service-card:hover,
.material-tier:hover,
.contact-block:hover,
.project-row:hover {
  transform: translateY(-6px) scale(1.008);
  filter: brightness(1.06);
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.62),
    0 0 70px rgba(88, 66, 152, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Subtle moving sheen on hover */
.bento-cell::after,
.bento-material-cell::after,
.bento-project-cell::after,
.service-card::after,
.material-tier::after,
.contact-block::after,
.project-row::after {
  content: "";
  position: absolute;
  inset: -120% auto auto -40%;
  width: 55%;
  height: 280%;
  transform: rotate(20deg);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.07) 45%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
}
.bento-cell:hover::after,
.bento-material-cell:hover::after,
.bento-project-cell:hover::after,
.service-card:hover::after,
.material-tier:hover::after,
.contact-block:hover::after,
.project-row:hover::after {
  opacity: 1;
  animation: cardSheen 0.95s ease forwards;
}
@keyframes cardSheen {
  from { transform: translateX(-24%) rotate(20deg); }
  to   { transform: translateX(150%) rotate(20deg); }
}

/* Background video support for material hero card */
.bento-material-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0.95;
  pointer-events: none;
}
.bento-material-cell .bento-material-bg {
  z-index: 0;
}
.bento-material-cell .bento-material-overlay {
  z-index: 1;
}
.bento-material-cell.has-video .bento-material-bg {
  display: none !important;
}
.bento-project-cell.has-video .bento-project-bg {
  display: none !important;
}
.project-row-visual.has-video .project-bg {
  display: none !important;
}

/* Generic bento video background support */
.bento-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}
.bento-card-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 8, 14, 0.18) 0%, rgba(6, 8, 14, 0.28) 100%),
    radial-gradient(ellipse at 50% 50%, rgba(28, 22, 56, 0.12) 0%, transparent 65%);
}
.bento-cell.has-video.bento-texture-purple {
  background: none !important;
}

/* Improve nav + button alignment with story flow */
nav {
  background: rgba(8, 10, 16, 0.72) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  left: var(--site-edge);
  right: var(--site-edge);
  width: auto;
}

@media (max-width: 900px) {
  .bento-cell,
  .bento-material-cell,
  .bento-project-cell,
  .service-card,
  .material-tier,
  .contact-block,
  .project-row,
  .studio-sidebar {
    border-radius: 18px !important;
  }
}

/* Leather card — final override (loads last in this file) */
#materials .bento-mat-leather-cell.bento-material-cell.bento-cell {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#materials .bento-mat-leather-cell .bento-material-bg.bento-mat-leather {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  background:
    linear-gradient(
      180deg,
      rgba(12, 6, 3, 0.12) 0%,
      rgba(8, 4, 2, 0.35) 55%,
      rgba(5, 2, 1, 0.55) 100%
    ),
    url("../assets/aniline-leather.jpg") center center / cover no-repeat !important;
}

#materials .bento-mat-leather-cell .bento-material-overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

#materials .bento-mat-velvet-cell .bento-material-overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* Velvet card — final override (loads last in this file) */
#materials .bento-mat-velvet-cell.bento-material-cell.bento-cell {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#materials .bento-mat-velvet-cell .bento-material-bg.bento-mat-velvet {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  background:
    linear-gradient(
      180deg,
      rgba(4, 14, 10, 0.14) 0%,
      rgba(6, 20, 14, 0.38) 55%,
      rgba(3, 10, 7, 0.62) 100%
    ),
    url("../assets/performance-velvet.jpg") center center / cover no-repeat !important;
}

/* Linen card — final override */
#materials .bento-mat-linen-cell.bento-material-cell.bento-cell {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#materials .bento-mat-linen-cell .bento-material-bg.bento-mat-linen {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  background:
    linear-gradient(
      180deg,
      rgba(18, 16, 12, 0.1) 0%,
      rgba(14, 12, 10, 0.34) 55%,
      rgba(10, 8, 6, 0.58) 100%
    ),
    url("../assets/heritage-linen.jpg") center center / cover no-repeat !important;
}

#materials .bento-mat-linen-cell .bento-material-overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* Alcantara card — final override */
#materials .bento-mat-suede-cell.bento-material-cell.bento-cell {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#materials .bento-mat-suede-cell .bento-material-bg.bento-mat-suede {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  background:
    linear-gradient(
      180deg,
      rgba(8, 7, 12, 0.12) 0%,
      rgba(10, 9, 14, 0.36) 55%,
      rgba(6, 5, 10, 0.62) 100%
    ),
    url("../assets/alcantara-microfibre.jpg") center center / cover no-repeat !important;
}

#materials .bento-mat-suede-cell .bento-material-overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* Process phase cards — photo backgrounds (final override) */
#process .bento-process-photo-cell.bento-process-cell.bento-cell {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#process .bento-process-photo-cell .bento-process-bg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}

#process .bento-process-photo-cell .bento-process-overlay {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* Philosophy hero — restaurant interior background */
#philosophy .philosophy-hero-cell.bento-cell {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  min-height: clamp(360px, 42vh, 520px) !important;
}

#philosophy .philosophy-hero-cell.bento-cell::after {
  display: none !important;
}

#philosophy .philosophy-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  background:
    url("../assets/restaurant-booth-interior.png") 50% 45% / cover no-repeat !important;
}

#philosophy .philosophy-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(
      90deg,
      rgba(8, 6, 4, 0.88) 0%,
      rgba(12, 9, 6, 0.72) 42%,
      rgba(16, 12, 8, 0.38) 72%,
      rgba(16, 12, 8, 0.2) 100%
    ),
    linear-gradient(
      0deg,
      rgba(8, 6, 4, 0.78) 0%,
      rgba(12, 9, 6, 0.44) 55%,
      rgba(16, 12, 8, 0.16) 100%
    ) !important;
}

#philosophy .philosophy-hero-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: inherit;
  padding: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 56px);
}

/* Workshop founder portrait — full-bleed cell */
#workshop .workshop-founder-cell.bento-cell {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  min-height: clamp(520px, 58vh, 680px) !important;
}

#workshop .workshop-founder-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  background:
    url("../assets/workshop-founder.jpg") center 18% / cover no-repeat !important;
}

#workshop .workshop-founder-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 24px 20px 28px;
  text-align: center;
}

#workshop .workshop-founder-badge {
  border: 1px solid rgba(201, 169, 110, 0.32);
  padding: 20px 28px;
  background: rgba(8, 6, 4, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
}

#workshop .workshop-founder-badge span {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.2em;
}

#workshop .workshop-founder-badge span:first-child {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

#workshop .workshop-founder-year {
  font-size: 40px;
  line-height: 1;
  color: #c9a96e;
  letter-spacing: 0.06em !important;
}

#workshop .workshop-founder-badge span:last-child {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.48);
}

/* Workshop FR certified — photo background */
#workshop .workshop-fr-photo-cell.bento-cell {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  position: relative;
}

#workshop .workshop-fr-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  background:
    linear-gradient(180deg, rgba(4, 8, 6, 0.03) 0%, rgba(3, 6, 5, 0.18) 100%),
    url("../assets/workshop-fire-retardant.png") center 35% / cover no-repeat !important;
}

#workshop .workshop-fr-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(
      90deg,
      rgba(4, 8, 6, 0.62) 0%,
      rgba(6, 12, 9, 0.42) 42%,
      rgba(8, 14, 11, 0.12) 68%,
      rgba(8, 14, 11, 0.04) 100%
    ),
    linear-gradient(
      0deg,
      rgba(4, 8, 6, 0.58) 0%,
      rgba(6, 12, 9, 0.22) 55%,
      rgba(8, 14, 11, 0.05) 100%
    ) !important;
}

#workshop .workshop-fr-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: inherit;
  padding: 28px 24px;
}

/* Workshop theater curtains — photo background */
#workshop .workshop-theater-photo-cell.bento-cell {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  position: relative;
}

#workshop .workshop-theater-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  background:
    linear-gradient(180deg, rgba(6, 5, 4, 0.08) 0%, rgba(4, 3, 2, 0.28) 100%),
    url("../assets/acoustic-conference-room.png") 50% 40% / cover no-repeat !important;
}

#workshop .workshop-theater-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(
      90deg,
      rgba(8, 6, 4, 0.62) 0%,
      rgba(12, 9, 6, 0.42) 40%,
      rgba(16, 12, 8, 0.12) 68%,
      rgba(16, 12, 8, 0.04) 100%
    ),
    linear-gradient(
      0deg,
      rgba(8, 6, 4, 0.58) 0%,
      rgba(12, 9, 6, 0.24) 55%,
      rgba(16, 12, 8, 0.06) 100%
    ) !important;
}

#workshop .workshop-theater-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: inherit;
  padding: 28px 24px;
}

/* Light page backdrop — readable type on white */
.home-page .bento-section-h2 {
  color: #1a1814 !important;
}

.home-page .bento-section-h2 em {
  color: #c9a96e !important;
}

.home-page .bento-section-h2 em.em {
  color: #9a7b5f !important;
}

.home-page .bento-section-h2 em.gd {
  color: #c1a57b !important;
}

/* Process section — white field (cards stay dark glass) */
body.home-page #process,
.home-page #process.bento-section,
.home-page #process.bento-section.has-process-carousel,
.home-page #process.bento-section.carousel-gsap {
  background: #ffffff !important;
}

.home-page #process .process-carousel-section,
.home-page #process .process-carousel-track,
.home-page #process .process-carousel-rail {
  background: #ffffff !important;
}

.home-page #materials + .pin-spacer,
.home-page .pin-spacer:has(#process.bento-section),
.home-page .pin-spacer {
  background: #ffffff !important;
}

/* Homepage nav theme handled in mobile-first.css (dark frosted over hero) */

.home-page footer {
  background: #ffffff !important;
  border-top: 1px solid rgba(26, 24, 22, 0.08) !important;
}

.home-page .footer-logo .logo-primary,
.home-page .footer-links a {
  color: #1a1814 !important;
}

.home-page .footer-logo .logo-secondary {
  color: #9a7b4a !important;
}

.home-page .footer-tagline,
.home-page .footer-copy,
.home-page .footer-social a {
  color: rgba(26, 24, 22, 0.58) !important;
}

.home-page .footer-social a:hover {
  color: #9a7b4a !important;
}

.home-page .footer-bottom {
  border-top: 1px solid rgba(26, 24, 22, 0.08) !important;
}

/* ─── SERVICES PAGE — light theme ───────────────────────────────── */
.services-page {
  color: #1a1814;
}

.services-page .services-hero,
.services-page .services-hero .hero-bg {
  background: linear-gradient(165deg, #faf9f7 0%, #ffffff 52%, #f3efe8 100%) !important;
}

.services-page .services-hero .hero-bg {
  background:
    radial-gradient(ellipse at 72% 18%, rgba(201, 169, 110, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse at 10% 88%, rgba(154, 123, 95, 0.08) 0%, transparent 48%),
    linear-gradient(to top, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
}

.services-page .services-hero .hero-line {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201, 169, 110, 0.22) 36%,
    rgba(201, 169, 110, 0.08) 72%,
    transparent 100%
  ) !important;
}

.services-page .hero-year,
.services-page .page-hero .hero-h1 {
  color: #1a1814 !important;
}

.services-page .page-hero .hero-h1 em,
.services-page .services-hero .hero-h1 em {
  color: #9a7b5f !important;
}

.services-page .hero-tag,
.services-page .services-hero .hero-tag {
  color: #9a7b4a !important;
}

.services-page .hero-sub,
.services-page .page-hero .hero-sub {
  color: rgba(26, 24, 22, 0.62) !important;
}

.services-page .section-kicker {
  color: #9a7b5f !important;
}

.services-page .section-title-page {
  color: #1a1814 !important;
}

.services-page .section-title-page em {
  color: #9a7b5f !important;
}

.services-page .prose,
.services-page .prose p {
  color: rgba(26, 24, 22, 0.72) !important;
}

.services-page .prose strong {
  color: #1a1814 !important;
}

.services-page .spec-list li {
  color: rgba(26, 24, 22, 0.68) !important;
  border-color: rgba(26, 24, 22, 0.08) !important;
}

.services-page .stat-val {
  color: #1a1814 !important;
}

.services-page .stat-lbl {
  color: rgba(26, 24, 22, 0.52) !important;
}

.services-page .service-card {
  background: #ffffff !important;
  border: 1px solid rgba(26, 24, 22, 0.08) !important;
  border-radius: var(--border-r) !important;
  box-shadow: 0 8px 28px rgba(26, 24, 22, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.services-page .service-card::before {
  display: none !important;
  content: none !important;
}

.services-page .service-card:nth-child(even) {
  background: #faf9f7 !important;
  border-color: rgba(26, 24, 22, 0.08) !important;
  box-shadow: 0 8px 28px rgba(26, 24, 22, 0.05) !important;
}

.services-page .service-card-num {
  color: rgba(201, 169, 110, 0.72) !important;
}

.services-page .service-card:nth-child(even) .service-card-num {
  color: rgba(154, 123, 95, 0.78) !important;
}

.services-page .service-card h3 {
  color: #1a1814 !important;
}

.services-page .service-card p {
  color: rgba(26, 24, 22, 0.62) !important;
}

.services-page .service-card a {
  color: #9a7b4a !important;
  border-bottom-color: rgba(154, 123, 74, 0.35) !important;
}

.services-page .service-card a:hover {
  color: #7a6038 !important;
  border-bottom-color: rgba(122, 96, 56, 0.55) !important;
}

.services-page .service-card:hover {
  transform: translateY(-4px) scale(1.005);
  filter: none !important;
  border-color: rgba(201, 169, 110, 0.28) !important;
  box-shadow: 0 16px 40px rgba(26, 24, 22, 0.1) !important;
}

.services-page .service-card:nth-child(even):hover {
  box-shadow: 0 16px 40px rgba(26, 24, 22, 0.08) !important;
}

/* Maintenance program — light editorial cards on ivory section */
.services-page #maintenance-program .services-maint-bento {
  gap: 24px !important;
}

@media (min-width: 901px) {
  .services-page #maintenance-program .services-maint-bento {
    gap: 28px !important;
  }
}

.services-page #maintenance-program .services-maint-bento .bento-cell,
.services-page #maintenance-program .services-maint-step {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(26, 24, 22, 0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 32px rgba(26, 24, 22, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 32px 28px 34px !important;
}

.services-page #maintenance-program .services-maint-step::before,
.services-page #maintenance-program .services-maint-step::after {
  display: none !important;
  content: none !important;
}

.services-page #maintenance-program .services-maint-step:hover {
  transform: translateY(-3px) !important;
  filter: none !important;
  border-color: rgba(201, 169, 110, 0.28) !important;
  box-shadow: 0 16px 36px rgba(26, 24, 22, 0.08) !important;
}

.services-page #maintenance-program .services-maint-step h3,
.services-page #maintenance-program .services-maint-step .bento-cell-h3 {
  font-family: "Outfit", sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.35 !important;
  color: #1a1814 !important;
  margin-bottom: 0 !important;
}

.services-page #maintenance-program .services-maint-step p,
.services-page #maintenance-program .services-maint-step .bento-cell-body {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: rgba(26, 24, 22, 0.68) !important;
  margin: 0 !important;
}

.services-page #maintenance-program .bento-section-header .bento-cell-body {
  color: rgba(26, 24, 22, 0.72) !important;
}

.services-page #maintenance-program .services-maint-cta {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  margin-top: 40px !important;
  text-align: center !important;
}

.services-page #maintenance-program .services-maint-cta p {
  margin: 0 !important;
  max-width: 520px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: rgba(26, 24, 22, 0.62) !important;
}

.services-page .service-card:hover::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 169, 110, 0.08) 45%,
    transparent 100%
  );
}

.services-page .page-section--surface,
.services-page .page-section--graphite {
  background: #faf9f7 !important;
  border: 1px solid rgba(26, 24, 22, 0.06) !important;
  box-shadow: 0 8px 28px rgba(26, 24, 22, 0.04) !important;
  color: #1a1814 !important;
}

.services-page .page-section--surface .section-title-page,
.services-page .page-section--graphite .section-title-page {
  color: #1a1814 !important;
}

.services-page .page-section--surface .section-title-page em,
.services-page .page-section--graphite .section-title-page em {
  color: #9a7b5f !important;
}

.services-page .page-section--surface .prose strong,
.services-page .page-section--graphite .prose strong {
  color: #1a1814 !important;
}

.services-page nav,
.services-page nav.scrolled {
  background: rgba(5, 5, 5, 0.72) !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.14) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22) !important;
}

.services-page nav.scrolled {
  background: rgba(5, 5, 5, 0.92) !important;
}

.services-page .nav-links a {
  color: rgba(245, 243, 239, 0.62) !important;
}

.services-page .nav-links a:hover,
.services-page .nav-links a.is-active {
  color: #f5f3ef !important;
}

.services-page .logo-primary {
  color: #f5f3ef !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.services-page .logo-secondary {
  color: #c9a96e !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.services-page footer {
  background: #ffffff !important;
  border-top: 1px solid rgba(26, 24, 22, 0.08) !important;
}

.services-page .footer-logo .logo-primary,
.services-page .footer-links a {
  color: #1a1814 !important;
}

.services-page .footer-logo .logo-secondary {
  color: #9a7b4a !important;
}

.services-page .footer-tagline,
.services-page .footer-copy,
.services-page .footer-social a {
  color: rgba(26, 24, 22, 0.58) !important;
}

.services-page .footer-social a:hover {
  color: #9a7b4a !important;
}

.services-page .footer-bottom {
  border-top: 1px solid rgba(26, 24, 22, 0.08) !important;
}

.services-page .footer-col-title,
.services-page .footer-col-title-row .footer-col-title {
  color: rgba(26, 24, 22, 0.72) !important;
}

.services-page .contact-cta-actions,
.services-page .bento-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.services-page .timeline-deep {
  border-left-color: rgba(201, 169, 110, 0.35) !important;
}

.services-page .timeline-deep-item h3 {
  color: #1a1814 !important;
}

.services-page .timeline-deep-item .tl-meta {
  color: rgba(26, 24, 22, 0.48) !important;
}

.services-page .timeline-deep-item p {
  color: rgba(26, 24, 22, 0.68) !important;
}

/* ─── PROCESS CAROUSEL — card spacing & text legibility ─────────── */
#process .process-carousel-rail {
  gap: 18px !important;
}

#process .process-carousel-rail .bento-process-cell {
  width: clamp(300px, 28vw, 400px) !important;
  min-height: clamp(400px, 50vh, 500px) !important;
  padding: 40px 36px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

#process .process-carousel-rail .bento-process-cell .bento-step-title,
#process .process-carousel-rail .bento-process-cell .bento-step-desc,
#process .process-carousel-rail .bento-process-cell .bento-step-circle {
  position: relative;
  z-index: 2;
  max-width: 100%;
}

#process .process-carousel-rail .bento-process-cell .bento-step-desc {
  margin-top: auto;
}

/* Process carousel — no shadow bleed in card gaps (keep gaps white) */
#process .process-carousel-rail .bento-process-cell.bento-cell {
  box-shadow: none !important;
  filter: none !important;
  border: 1px solid rgba(26, 24, 22, 0.08) !important;
}

#process .process-carousel-rail .bento-process-cell.bento-cell:hover {
  box-shadow: none !important;
  filter: none !important;
  transform: translateY(-4px) !important;
  border-color: rgba(26, 24, 22, 0.14) !important;
}

#process .process-carousel-rail .bento-process-cell.bento-cell::after {
  display: none !important;
}

#process .process-carousel-section,
#process .process-carousel-track,
#process .process-carousel-rail {
  background-color: #ffffff !important;
}

@media (max-width: 900px) {
  #process .process-carousel-rail {
    gap: 16px !important;
  }

  #process .process-carousel-rail .bento-process-cell {
    width: min(78vw, 360px) !important;
    min-height: 420px !important;
    padding: 36px 30px !important;
  }
}

@media (max-width: 600px) {
  #process .process-carousel-rail .bento-process-cell {
    width: min(84vw, 320px) !important;
    padding: 32px 26px !important;
  }
}

/* ─── PROCESS CAROUSEL — GSAP pin (stay in page width, no 100vw bleed) ─ */
#process.bento-section.carousel-gsap {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}

#process.bento-section.has-process-carousel:not(.carousel-gsap) {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#process .process-carousel-section.carousel-gsap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: #ffffff !important;
}

#process .process-carousel-track,
#process .process-carousel-rail {
  background: #ffffff !important;
}

#process .process-carousel-rail {
  padding-left: 0 !important;
  padding-right: max(var(--site-edge), 24px) !important;
}

.home-page .pin-spacer:has(#process.bento-section.carousel-gsap) {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: #ffffff !important;
}

.home-page .pin-spacer + #metrics.bento-section {
  margin-top: 0 !important;
  padding-top: clamp(64px, 8vh, 120px) !important;
}

/* ─── PROCESS PIN z-index: keep carousel above metrics while pinned ─────── */
/* GSAP sets position:fixed on the pinned element; z-index ensures it layers
   above the metrics reveal cards that animate up from below. */
#process.bento-section.carousel-gsap,
#process.bento-section.has-process-carousel {
  z-index: 50 !important;
}
#metrics.bento-section {
  z-index: 1;
  position: relative;
}

/* ─── METRICS reveal — staggered delay so cards don't rise until pin releases */
#metrics .bento-stat-cell {
  transition-delay: 0.25s !important;
}
#metrics .bento-stat-cell.reveal-delay-1 {
  transition-delay: 0.5s !important;
}
#metrics .bento-stat-cell.reveal-delay-2 {
  transition-delay: 0.75s !important;
}

/* ─── METRICS — Light mode luxury stat cards ─────────────────────── */
/* Override the global dark glass for these three stat cards only */
#metrics .bento-stat-cell.bento-cell,
#metrics .bento-cell.glass-purple.bento-stat-cell,
#metrics .bento-cell.glass-emerald.bento-stat-cell,
#metrics .bento-cell.glass-gold.bento-stat-cell {
  background: rgba(250, 248, 245, 0.98) !important;
  border: 1px solid rgba(180, 155, 100, 0.18) !important;
  box-shadow:
    0 2px 20px rgba(0, 0, 0, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#metrics .bento-stat-cell.bento-cell::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, transparent 100%) !important;
}

#metrics .bento-stat-cell.bento-cell::after {
  background: radial-gradient(ellipse, rgba(201, 169, 110, 0.06) 0%, transparent 70%) !important;
}

#metrics .bento-stat-cell .bento-cell-tag {
  color: rgba(26, 24, 20, 0.52) !important;
}

#metrics .bento-stat-cell .bento-cell-tag.em {
  color: rgba(154, 123, 95, 0.78) !important;
}

#metrics .bento-stat-cell .bento-cell-tag.gd {
  color: rgba(154, 123, 74, 0.72) !important;
}

#metrics .bento-stat-cell .bento-cell-num {
  color: #c9a96e !important;
}

#metrics .bento-stat-cell .bento-cell-num.em {
  color: #9a7b5f !important;
}

#metrics .bento-stat-cell .bento-cell-num.gd {
  color: #c9a96e !important;
}

#metrics .bento-stat-cell .bento-cell-num-label {
  color: rgba(26, 24, 20, 0.48) !important;
}

#metrics .bento-stat-cell .bento-cell-body {
  color: rgba(26, 24, 20, 0.62) !important;
}

#metrics .bento-stat-cell:hover {
  transform: translateY(-4px) scale(1.006) !important;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(201, 169, 110, 0.32) !important;
  filter: none !important;
}

/* Section background — warm near-white behind the stat cards */
#metrics.bento-section {
  background: #F7F5F0 !important;
  position: relative;
  z-index: 2;
}

/* Pin-spacer z-index — keep process carousel below metrics when scrolling */
.pin-spacer:has(#process.bento-section) {
  z-index: 1 !important;
  position: relative;
}

.home-page #process.bento-section.has-process-carousel,
.home-page #process.bento-section.carousel-gsap {
  padding-bottom: clamp(24px, 3.5vh, 40px) !important;
}

@media (max-width: 900px) {
  #process.carousel-gsap .bento-section-header,
  #process.bento-section.has-process-carousel .bento-section-header {
    padding-left: var(--h-pad-sm) !important;
    padding-right: var(--h-pad-sm) !important;
  }

  #process .process-carousel-rail {
    padding-right: max(var(--site-edge), 20px) !important;
  }
}

/* ─── METRICS STAT CARDS — LIGHT MODE REDESIGN ───────────────── */
/* Converts dark glass cards to a warm, prestigious, light-mode aesthetic */
#metrics .bento-stat-cell.bento-cell,
#metrics .bento-cell.glass-purple.bento-stat-cell,
#metrics .bento-cell.glass-emerald.bento-stat-cell,
#metrics .bento-cell.glass-gold.bento-stat-cell {
  background: #faf8f4 !important;
  border: 1px solid rgba(180, 160, 120, 0.22) !important;
  box-shadow:
    0 2px 20px rgba(26, 24, 22, 0.07),
    0 1px 4px rgba(26, 24, 22, 0.04),
    inset 0 1px 0 rgba(255, 252, 248, 0.9) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Tags — muted warm label */
#metrics .bento-stat-cell .bento-cell-tag {
  color: #9a8a6a !important;
  letter-spacing: 0.22em !important;
}

/* Large numbers */
#metrics .bento-stat-cell .bento-cell-num:not(.em):not(.gd),
#metrics .bento-stat-cell .bento-cell-num {
  color: #c9a96e !important;
}
#metrics .bento-stat-cell .bento-cell-num.em {
  color: #2d6644 !important;
}
#metrics .bento-stat-cell .bento-cell-num.gd {
  color: #b07d2a !important;
}

/* Sublabels */
#metrics .bento-stat-cell .bento-cell-num-label {
  color: #3a3530 !important;
  letter-spacing: 0.14em !important;
}

/* Body copy */
#metrics .bento-stat-cell .bento-cell-body {
  color: #6b6560 !important;
}

/* ─── METRICS ANIMATION — DELAY SO STEP 05 IS SEEN FIRST ─────── */
/* Adds visual reveal delay so metrics cards don't animate in
   while the user is still viewing Process Step 05 */
#metrics .bento-stat-cell.reveal,
#metrics .bento-stat-cell.motion-fly {
  transition-delay: 0.55s !important;
}
#metrics .bento-stat-cell.reveal.reveal-delay-1,
#metrics .bento-stat-cell.motion-fly.reveal-delay-1 {
  transition-delay: 0.75s !important;
}
#metrics .bento-stat-cell.reveal.reveal-delay-2,
#metrics .bento-stat-cell.motion-fly.reveal-delay-2 {
  transition-delay: 0.95s !important;
}

/* ─── DESKTOP EDITORIAL LAYOUT (901px+) ─────────────────────────── */
@media (min-width: 901px) {
  .bento-cta-main .bento-cta-glow {
    left: 50%;
  }

  #cta.bento-section .bento-grid-12 {
    align-items: stretch;
  }

  .footer-top {
    max-width: var(--max-w, 1680px);
    margin-left: auto;
    margin-right: auto;
  }

  .footer-tagline {
    max-width: 52ch;
  }

  .footer-col-title,
  .footer-col-title-row {
    text-align: center;
  }

  .footer-links {
    text-align: center;
  }

  .services-cta-panel .section-title-page {
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
  }

  .services-cta-panel .prose,
  .services-cta-panel .prose p {
    max-width: 58ch;
    margin-left: auto;
    margin-right: auto;
  }

  .service-close .section-title-page,
  .service-close .prose,
  .service-close .prose p {
    max-width: 58ch;
    margin-left: auto;
    margin-right: auto;
  }

  .contact-cta-actions {
    justify-content: center;
  }
}


/* ---- css/motion-layout-fix.css ---- */
/*
  MOTION + LAYOUT FIX — final layer (loads after vibrant-brand.css)
  Resolves Framer-style motion conflicts, section rhythm, carousel layout
*/

/* ─── DISABLE content-visibility (causes scroll/layout jumps) ─────── */
.bento-section,
.bento-section:not(#process) {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

/* ─── UNIFIED MOTION — override legacy main.css .reveal ──────────── */
.reveal:not(.motion-fly) {
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal:not(.motion-fly).visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal.motion-fly {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
  filter: none;
}

.reveal.motion-fly[data-fly="up"]:not(.visible) {
  transform: translate3d(0, 28px, 0) scale(0.992) !important;
  filter: blur(2px) !important;
}

.reveal.motion-fly[data-fly="left"]:not(.visible) {
  transform: translate3d(-24px, 16px, 0) scale(0.992) !important;
  filter: blur(2px) !important;
}

.reveal.motion-fly[data-fly="right"]:not(.visible) {
  transform: translate3d(24px, 16px, 0) scale(0.992) !important;
  filter: blur(2px) !important;
}

.reveal.motion-fly[data-fly="pop"]:not(.visible) {
  transform: translate3d(0, 16px, 0) scale(0.98) !important;
  filter: blur(2px) !important;
}

.reveal.motion-fly[data-fly="fade"]:not(.visible) {
  transform: translate3d(0, 12px, 0) scale(1) !important;
  filter: none !important;
}

.reveal.motion-fly.visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) rotate(0) !important;
  filter: blur(0) !important;
  will-change: auto;
}

/* Stagger — only when becoming visible */
.reveal.motion-fly.reveal-delay-1 { transition-delay: 0.07s; }
.reveal.motion-fly.reveal-delay-2 { transition-delay: 0.14s; }
.reveal.motion-fly.reveal-delay-3 { transition-delay: 0.21s; }
.reveal.motion-fly.reveal-delay-4 { transition-delay: 0.28s; }
.reveal.motion-fly.reveal-delay-5 { transition-delay: 0.35s; }

/* Process carousel cards — no fly (GSAP / horizontal scroll) */
.process-carousel-track .bento-process-cell,
.process-carousel-track .bento-process-cell.reveal,
.process-carousel-rail .bento-process-cell,
.process-carousel-rail .bento-process-cell.reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease !important;
}

/* Page sections — subtle fade only, no blur */
.page-section.reveal.motion-fly:not(.visible) {
  transform: translate3d(0, 20px, 0) !important;
  filter: none !important;
}

/* ─── LAYOUT RHYTHM — fix double gaps ───────────────────────────── */
#materials,
#process,
#metrics,
#projects,
#workshop,
#cta {
  margin-top: 0 !important;
}

.bento-section + .bento-section,
.pin-spacer + .bento-section {
  padding-top: var(--section-v) !important;
}

.pin-spacer + #metrics.bento-section {
  padding-top: clamp(36px, 5vh, 64px) !important;
}

#philosophy.bento-section {
  padding-top: calc(var(--section-v) + 16px) !important;
}

@media (max-width: 900px) {
  .bento-section + .bento-section,
  .pin-spacer + .bento-section {
    padding-top: var(--section-v-sm) !important;
  }

  .pin-spacer + #metrics.bento-section {
    padding-top: clamp(28px, 4vh, 48px) !important;
  }
  #philosophy.bento-section {
    padding-top: calc(var(--section-v-sm) + 12px) !important;
  }
}

/* ─── HOMEPAGE: hero, marquee, journey alignment (desktop full-bleed only) ─ */
@media (min-width: 901px) {
  body.home-page #hero {
    margin-left: calc(-1 * var(--site-edge)) !important;
    margin-right: calc(-1 * var(--site-edge)) !important;
    width: calc(100% + (var(--site-edge) * 2)) !important;
    max-width: none !important;
  }
}

body.home-page .bento-marquee {
  margin-left: calc(-1 * var(--site-edge));
  margin-right: calc(-1 * var(--site-edge));
  width: calc(100% + (var(--site-edge) * 2));
  padding-left: var(--h-pad);
  padding-right: var(--h-pad);
  box-sizing: border-box;
}

body.home-page .journey-strip {
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - (var(--site-edge) * 0));
  max-width: calc(var(--max-w));
  box-sizing: border-box;
}

@media (max-width: 900px) {
  body.home-page .journey-strip {
    width: calc(100% + (var(--site-edge) * 0));
    margin-left: 0;
    margin-right: 0;
  }
}

/* ─── BENTO GRID — consistent cell sizing ─────────────────────────── */
.bento-grid-12 {
  align-items: stretch;
}

.bento-cell,
.bento-material-cell,
.bento-project-cell {
  min-height: 0;
}

.bento-section-header {
  margin-bottom: 56px !important;
  max-width: calc(var(--max-w) - (var(--h-pad) * 2));
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.bento-section-header.reveal.motion-fly:not(.visible) {
  transform: translate3d(0, 20px, 0) !important;
  filter: none !important;
}

/* ─── PROCESS CAROUSEL — horizontal layout + GSAP pin (authoritative) ─ */
#process.bento-section.has-process-carousel,
#process.bento-section.carousel-gsap {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: clamp(72px, 10vh, 128px);
  padding-bottom: clamp(28px, 4vh, 48px);
}

#process .process-carousel-section {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: clamp(420px, 52vh, 540px);
}

#process .process-carousel-section.carousel-gsap {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

#process.carousel-gsap .bento-section-header,
#process.bento-section.has-process-carousel .bento-section-header {
  padding-left: var(--h-pad);
  padding-right: var(--h-pad);
  max-width: calc(var(--max-w) - (var(--h-pad) * 2));
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

#process .process-carousel-track {
  overflow: hidden;
  width: 100%;
}

#process .process-carousel-rail {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch;
  width: max-content;
  gap: 18px;
  padding-left: 0;
  padding-right: max(var(--site-edge), 24px);
  will-change: transform;
}

#process .process-carousel-rail .bento-process-cell {
  flex: 0 0 auto !important;
  display: flex;
  flex-direction: column;
  width: clamp(300px, 28vw, 400px);
  min-height: clamp(400px, 50vh, 500px);
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  #process.bento-section.has-process-carousel,
  #process.bento-section.carousel-gsap {
    min-height: 100svh;
    padding-top: clamp(48px, 8vh, 88px);
    padding-bottom: clamp(20px, 3vh, 36px);
  }

  #process .process-carousel-section.carousel-gsap {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    min-height: clamp(380px, 58svh, 520px);
  }

  #process.carousel-gsap .bento-section-header,
  #process.bento-section.has-process-carousel .bento-section-header {
    padding-left: var(--h-pad-sm);
    padding-right: var(--h-pad-sm);
  }

  #process .process-carousel-rail {
    gap: 16px;
    padding-left: 0;
    padding-right: max(var(--site-edge), 20px);
  }

  #process .process-carousel-rail .bento-process-cell {
    width: min(78vw, 360px);
    min-height: 420px;
  }
}

/* Fallback: keep horizontal row, native swipe if GSAP unavailable */
#process .process-carousel-section.carousel-fallback {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#process .process-carousel-section.carousel-fallback::-webkit-scrollbar {
  display: none;
}

#process .process-carousel-section.carousel-fallback .process-carousel-rail {
  transform: none !important;
}

#process .process-carousel-section.carousel-fallback .bento-process-cell {
  scroll-snap-align: start;
}

/* ─── PROCESS CAROUSEL ───────────────────────────────────────────── */
#process .process-carousel-section {
  max-width: none;
  margin-top: 0;
}

#process .process-carousel-section.carousel-gsap {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 700px) {
  #process .process-carousel-section.carousel-gsap {
    width: calc(100% + (var(--h-pad-sm) * 2));
  }

  #process .process-carousel-section:not(.carousel-gsap) {
    width: calc(100% + (var(--h-pad-sm) * 2));
    max-width: none;
    min-height: 0;
  }
}

.process-carousel-section {
  overflow: hidden;
  min-height: 580px;
}

/* Hide native scrollbars when fallback horizontal scroll is active */
.process-carousel-section.carousel-fallback,
.process-carousel-section:not(.carousel-gsap) {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.process-carousel-section.carousel-fallback::-webkit-scrollbar,
.process-carousel-section:not(.carousel-gsap)::-webkit-scrollbar {
  display: none;
}

@media (max-width: 900px) {
  .process-carousel-section:not(.carousel-gsap) {
    min-height: 0;
  }

  #process.carousel-gsap {
    min-height: 100svh;
    padding-top: clamp(48px, 8vh, 88px);
    padding-bottom: clamp(48px, 8vh, 88px);
  }

  .process-carousel-section.carousel-gsap {
    overflow: hidden;
    margin-left: calc(-1 * var(--h-pad-sm));
    margin-right: calc(-1 * var(--h-pad-sm));
    width: calc(100% + (var(--h-pad-sm) * 2));
    padding-left: var(--h-pad-sm);
    padding-right: 0;
    box-sizing: border-box;
    min-height: clamp(380px, 58svh, 520px);
  }

  .process-carousel-section.carousel-gsap .process-carousel-rail {
    gap: 0;
    padding-right: var(--h-pad-sm);
  }

  .process-carousel-section.carousel-gsap .process-carousel-rail .bento-process-cell {
    width: min(84vw, 320px);
    min-height: 420px;
  }
}

@media (min-width: 901px) {
  .process-carousel-section.carousel-gsap {
    overflow: hidden;
    min-height: clamp(420px, 52vh, 540px);
  }

  .process-carousel-section.carousel-gsap .process-carousel-rail .bento-process-cell {
    width: clamp(280px, 26vw, 380px);
    min-height: clamp(400px, 50vh, 500px);
  }
}

.process-carousel-track {
  overflow: hidden;
  width: 100%;
}

.process-carousel-rail {
  display: flex;
  gap: 18px;
  width: max-content;
  padding-right: max(var(--h-pad), 24px);
  padding-left: 0;
  align-items: stretch;
}

.process-carousel-rail .bento-process-cell {
  flex: 0 0 auto;
  width: clamp(300px, 30vw, 420px);
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

/* Mobile: native horizontal scroll (no GSAP pin) */
@media (max-width: 900px) {
  .process-carousel-section:not(.carousel-gsap) {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--h-pad-sm);
    min-height: 0;
    padding-bottom: 12px;
    margin-left: calc(-1 * var(--h-pad-sm));
    margin-right: calc(-1 * var(--h-pad-sm));
    padding-left: var(--h-pad-sm);
    padding-right: var(--h-pad-sm);
    width: calc(100% + (var(--h-pad-sm) * 2));
    box-sizing: border-box;
  }

  .process-carousel-section:not(.carousel-gsap) .process-carousel-track {
    overflow: visible;
    width: auto;
  }

  .process-carousel-section:not(.carousel-gsap) .process-carousel-rail {
    transform: none !important;
    padding-right: var(--h-pad-sm);
    gap: 16px;
  }

  .process-carousel-section:not(.carousel-gsap) .process-carousel-rail .bento-process-cell {
    flex: 0 0 auto;
    width: min(78vw, 360px);
    min-height: 460px;
    scroll-snap-align: start;
  }
}

@media (max-width: 600px) {
  .process-carousel-section:not(.carousel-gsap) .process-carousel-rail .bento-process-cell {
    width: min(84vw, 320px);
    min-height: 420px;
  }
}

/* Desktop fallback when GSAP unavailable or track fits viewport */
@media (min-width: 901px) {
  .process-carousel-section.carousel-fallback {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    min-height: 0;
    padding-bottom: 16px;
  }

  .process-carousel-section.carousel-fallback .process-carousel-track {
    overflow-x: auto;
    overflow-y: visible;
  }

  .process-carousel-section.carousel-fallback .process-carousel-rail {
    transform: none !important;
  }

  .process-carousel-section.carousel-fallback .bento-process-cell {
    scroll-snap-align: start;
  }
}

/* ─── NO-JS / reduced scripting — keep content visible ───────────── */
@media (scripting: none) {
  .reveal,
  .reveal.motion-fly,
  .reveal.motion-fly[data-fly="up"],
  .reveal.motion-fly[data-fly="left"],
  .reveal.motion-fly[data-fly="right"],
  .reveal.motion-fly[data-fly="pop"],
  .reveal.motion-fly[data-fly="fade"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .process-carousel-section {
    overflow-x: auto !important;
  }

  .process-carousel-rail {
    transform: none !important;
  }
}

/* ─── INTERACTIVE MOTION — buttons & links ───────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .nav-cta,
  .contact-cta-actions a,
  .service-card,
  .footer-social a {
    transition:
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.28s ease;
  }

  .btn:hover,
  .nav-cta:hover,
  .contact-cta-actions a:hover {
    transform: translateY(-2px);
  }

  .service-card.visible:hover {
    transform: translateY(-4px);
  }
}

/* ─── SKIP LINK ──────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--vibrant-gold, #e8b84a);
  color: #0a0812;
  font-family: var(--font-mono, "DM Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ─── CTA + FOOTER spacing ───────────────────────────────────────── */
#cta.bento-section {
  padding-bottom: clamp(32px, 4vh, 52px) !important;
}

footer {
  margin-top: 0 !important;
  padding-top: 72px;
}

/* ─── INNER PAGES ────────────────────────────────────────────────── */
.page-main {
  padding-top: 0;
}

.page-hero {
  margin-left: calc(-1 * var(--site-edge));
  margin-right: calc(-1 * var(--site-edge));
  width: calc(100% + (var(--site-edge) * 2));
  padding-left: var(--h-pad);
  padding-right: var(--h-pad);
  box-sizing: border-box;
}

.page-with-sidebar {
  padding-top: 48px;
}

body.interior-page .page-with-sidebar {
  padding-top: clamp(16px, 2vh, 28px);
}

body.interior-page .page-with-sidebar .page-section:first-of-type {
  padding-top: 0;
  padding-bottom: clamp(32px, 4vh, 48px);
}

.page-section {
  padding-top: 72px;
  padding-bottom: 72px;
}

.page-section--surface,
.page-section--graphite {
  border-radius: var(--border-r);
  margin-bottom: var(--grid-gap);
}

/* ─── NAV — prevent overflow with 7 links ────────────────────────── */
@media (max-width: 1180px) {
  .nav-links {
    gap: 16px !important;
  }
  .nav-links a {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
  }
  .nav-cta {
    padding: 10px 14px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
}

/* ─── HOVER — don't fight motion transform when not hovering ─────── */
.bento-cell.visible:hover,
.bento-material-cell.visible:hover,
.bento-project-cell.visible:hover {
  transform: translateY(-4px) scale(1.006) !important;
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.motion-fly,
  .reveal.motion-fly[data-fly="up"],
  .reveal.motion-fly[data-fly="left"],
  .reveal.motion-fly[data-fly="right"],
  .reveal.motion-fly[data-fly="pop"],
  .reveal.motion-fly[data-fly="fade"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  /* Keep scroll-scrubbed carousel — user-controlled, not auto-animated */
  .process-carousel-section:not(.carousel-gsap) .process-carousel-rail {
    transform: none !important;
  }
}

/* Leather material card — photo on inner bg layer (must beat global card glass) */
#materials .bento-mat-leather-cell.bento-material-cell.bento-cell,
#materials .bento-mat-velvet-cell.bento-material-cell.bento-cell,
#materials .bento-mat-linen-cell.bento-material-cell.bento-cell,
#materials .bento-mat-suede-cell.bento-material-cell.bento-cell {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#materials .bento-mat-leather-cell .bento-material-bg.bento-mat-leather {
  background:
    linear-gradient(
      180deg,
      rgba(12, 6, 3, 0.12) 0%,
      rgba(8, 4, 2, 0.35) 55%,
      rgba(5, 2, 1, 0.55) 100%
    ),
    url("../assets/aniline-leather.jpg") center center / cover no-repeat !important;
}

#materials .bento-mat-velvet-cell .bento-material-bg.bento-mat-velvet {
  background:
    linear-gradient(
      180deg,
      rgba(4, 14, 10, 0.14) 0%,
      rgba(6, 20, 14, 0.38) 55%,
      rgba(3, 10, 7, 0.62) 100%
    ),
    url("../assets/performance-velvet.jpg") center center / cover no-repeat !important;
}

#materials .bento-mat-linen-cell .bento-material-bg.bento-mat-linen {
  background:
    linear-gradient(
      180deg,
      rgba(18, 16, 12, 0.1) 0%,
      rgba(14, 12, 10, 0.34) 55%,
      rgba(10, 8, 6, 0.58) 100%
    ),
    url("../assets/heritage-linen.jpg") center center / cover no-repeat !important;
}

#materials .bento-mat-suede-cell .bento-material-bg.bento-mat-suede {
  background:
    linear-gradient(
      180deg,
      rgba(8, 7, 12, 0.12) 0%,
      rgba(10, 9, 14, 0.36) 55%,
      rgba(6, 5, 10, 0.62) 100%
    ),
    url("../assets/alcantara-microfibre.jpg") center center / cover no-repeat !important;
}

/* Process phase cards — photo on inner bg layer */
#process .bento-process-photo-cell.bento-process-cell.bento-cell {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Breathing room between Materials and Process */
#materials.bento-section {
  padding-bottom: calc(var(--section-v) + 64px) !important;
}

#materials + #process.bento-section,
#materials + .pin-spacer {
  margin-top: 72px !important;
}

/* Breathing room between Process (GSAP pin-spacer) and Metrics */
#process.bento-section.has-process-carousel {
  padding-bottom: clamp(28px, 4vh, 48px) !important;
}

.pin-spacer + #metrics.bento-section,
#metrics.bento-section {
  margin-top: 0 !important;
  padding-top: clamp(32px, 4vh, 56px) !important;
}

@media (max-width: 900px) {
  #materials.bento-section {
    padding-bottom: calc(var(--section-v-sm) + 48px) !important;
  }

  #materials + #process.bento-section,
  #materials + .pin-spacer {
    margin-top: 56px !important;
  }

  #process.bento-section.has-process-carousel {
    padding-bottom: clamp(20px, 3vh, 36px) !important;
  }

  #philosophy.bento-section + #metrics.bento-section {
    padding-top: 24px !important;
  }

  #metrics.bento-section {
    padding-top: 24px !important;
  }
}


/* ---- css/mobile-menu.css ---- */
/* Mobile menu — iOS-style grouped list (authoritative layer, load last) */

html body.mobile-menu-open {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

/* ─── Backdrop ───────────────────────────────────────────────────── */
html body .mobile-menu-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99990 !important;
  background: rgba(0, 0, 0, 0.48) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  transition: opacity 0.32s ease !important;
}

html body .mobile-menu-backdrop.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ─── Drawer shell ───────────────────────────────────────────────── */
html body aside.mobile-menu-drawer,
html body #mobileMenuDrawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99991 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 100dvh !important;
  min-height: 100svh !important;
  height: 100dvh !important;
  height: 100svh !important;
  margin: 0 !important;
  padding:
    max(12px, env(safe-area-inset-top, 0px))
    max(20px, env(safe-area-inset-right, 0px))
    max(24px, env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px)) !important;
  box-sizing: border-box !important;
  color: #f5f5f7 !important;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(201, 169, 110, 0.14) 0%, transparent 52%),
    rgba(12, 12, 14, 0.98) !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, 14px, 0) scale(0.985) !important;
  transition:
    transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.32s ease,
    visibility 0.32s ease !important;
  overflow: hidden !important;
  touch-action: auto !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body aside.mobile-menu-drawer.open,
html body #mobileMenuDrawer.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* ─── Header ─────────────────────────────────────────────────────── */
html body .mobile-menu-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex: 0 0 auto !important;
  padding: 4px 0 20px !important;
  border-bottom: none !important;
  background: transparent !important;
}

html body .mobile-menu-header-start {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body .mobile-menu-brand {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  color: #f5f5f7 !important;
  text-decoration: none !important;
}

html body .mobile-menu-brand span {
  color: #c9a96e !important;
}

html body .mobile-menu-eyebrow {
  margin: 0 !important;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
  font-size: clamp(2rem, 8vw, 2.125rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: #f5f5f7 !important;
  line-height: 1.1 !important;
}

html body .mobile-menu-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(120, 120, 128, 0.28) !important;
  color: rgba(235, 235, 245, 0.82) !important;
  font-family: system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(201, 169, 110, 0.18) !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

html body .mobile-menu-close:active {
  transform: scale(0.94) !important;
  background: rgba(120, 120, 128, 0.42) !important;
}

/* ─── Body + iOS grouped list ────────────────────────────────────── */
html body .mobile-menu-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 8px 0 12px !important;
  background: transparent !important;
}

html body .mobile-menu-section-label {
  margin: 0 0 8px 4px !important;
  padding: 0 !important;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(235, 235, 245, 0.52) !important;
}

html body .mobile-menu-group {
  position: relative !important;
  z-index: 2 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(44, 44, 46, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.22) !important;
  pointer-events: auto !important;
}

html body .mobile-nav-links {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .mobile-nav-links li {
  margin: 0 !important;
  padding: 0 !important;
}

html body .mobile-nav-links li + li {
  border-top: 0.5px solid rgba(255, 255, 255, 0.08) !important;
}

html body .mobile-menu-drawer .mobile-nav-links a,
html body .mobile-menu-drawer .mobile-nav-links a:visited,
html body.services-page .mobile-menu-drawer .mobile-nav-links a,
html body.home-page .mobile-menu-drawer .mobile-nav-links a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  position: relative !important;
  z-index: 3 !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: #f5f5f7 !important;
  background: transparent !important;
  -webkit-text-fill-color: #f5f5f7 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  transition: background 0.18s ease !important;
  -webkit-tap-highlight-color: rgba(201, 169, 110, 0.18) !important;
}

html body .mobile-menu-link-label,
html body .mobile-menu-chevron {
  pointer-events: none !important;
}

html body .mobile-menu-link-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body .mobile-menu-chevron {
  flex-shrink: 0 !important;
  width: 8px !important;
  height: 14px !important;
  opacity: 0.38 !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none'%3E%3Cpath d='M1 1l6 6-6 6' stroke='%23ebebf5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat !important;
}

html body .mobile-menu-drawer .mobile-nav-links a::after {
  display: none !important;
  content: none !important;
}

html body .mobile-menu-drawer .mobile-nav-links a:active {
  background: rgba(255, 255, 255, 0.08) !important;
}

html body .mobile-menu-drawer .mobile-nav-links a.is-active {
  color: #c9a96e !important;
  -webkit-text-fill-color: #c9a96e !important;
  background: rgba(201, 169, 110, 0.1) !important;
}

html body .mobile-menu-drawer .mobile-nav-links a.is-active .mobile-menu-chevron {
  opacity: 0.72 !important;
}

/* ─── Footer CTA ─────────────────────────────────────────────────── */
html body .mobile-menu-footer {
  flex: 0 0 auto !important;
  padding-top: 16px !important;
  border-top: none !important;
  background: transparent !important;
}

html body .mobile-menu-drawer .mobile-nav-cta,
html body .mobile-menu-drawer .mobile-nav-cta:visited {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 0 20px !important;
  border: none !important;
  border-radius: 14px !important;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: #1a1206 !important;
  background: #c9a96e !important;
  -webkit-text-fill-color: #1a1206 !important;
  box-shadow: 0 4px 16px rgba(201, 169, 110, 0.28) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  transition: transform 0.18s ease, filter 0.18s ease !important;
  -webkit-tap-highlight-color: rgba(201, 169, 110, 0.18) !important;
}

html body .mobile-menu-drawer .mobile-nav-cta:active {
  transform: scale(0.985) !important;
  filter: brightness(1.05) !important;
}

html body.mobile-menu-open .sfug-ma-fab {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .mobile-menu-backdrop,
  html body aside.mobile-menu-drawer,
  html body #mobileMenuDrawer {
    transition: none !important;
  }

  html body aside.mobile-menu-drawer,
  html body #mobileMenuDrawer {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Custom cursor — site-wide on fine-pointer devices (authoritative layer) */
@media (hover: hover) and (pointer: fine) {
  body,
  body * {
    cursor: none !important;
  }

  .cursor,
  .cursor-ring {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  .cursor {
    z-index: 2147483646 !important;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.35),
      0 0 10px rgba(201, 169, 110, 0.55);
  }

  .cursor-ring {
    z-index: 2147483645 !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  }

  html body.mobile-menu-open .cursor,
  html body.mobile-menu-open .cursor-ring {
    opacity: 1 !important;
  }
}

@media (hover: none), (pointer: coarse) {
  body {
    cursor: auto !important;
  }

  .cursor,
  .cursor-ring {
    display: none !important;
  }

  html body.mobile-menu-open {
    cursor: auto !important;
  }

  html body.mobile-menu-open .cursor,
  html body.mobile-menu-open .cursor-ring {
    opacity: 0 !important;
  }
}


/* ---- css/luxury-upholstery.css ---- */
/*
  LUXURY UPHOLSTERY — final polish layer
  Authoritative overrides for prestige, clean upholstery brand feel
*/

:root {
  --lux-gold: #c9a96e;
  --lux-gold-light: #e8d5b0;
  --lux-bronze: #9a7b5f;
  --lux-burgundy: #6b3a32;
  --lux-ivory: #faf9f7;
  --lux-charcoal: #1a1814;
  --lux-muted: rgba(26, 24, 22, 0.62);
  --lux-border: rgba(26, 24, 22, 0.08);
  --lux-shadow: 0 16px 48px rgba(26, 24, 22, 0.08);
  --lux-radius: 18px;
  --lux-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── TYPOGRAPHY REFINEMENT ───────────────────────────────────── */
.section-kicker {
  letter-spacing: 0.38em !important;
}

.section-title-page {
  letter-spacing: 0.03em !important;
}

.hero-h1 {
  letter-spacing: 0.02em !important;
}

.prose {
  font-size: 15px;
  line-height: 1.85;
}

/* ─── SERVICES PAGE — gold-only accent system ─────────────────── */
.services-page .page-hero .hero-h1 em,
.services-page .services-hero .hero-h1 em,
.services-page .section-title-page em,
.services-page .page-section--surface .section-title-page em,
.services-page .page-section--graphite .section-title-page em {
  color: var(--lux-bronze) !important;
}

.services-page .section-kicker {
  color: var(--lux-bronze) !important;
}

.services-page .services-hero .hero-bg {
  background:
    radial-gradient(ellipse at 72% 18%, rgba(201, 169, 110, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse at 10% 88%, rgba(154, 123, 95, 0.08) 0%, transparent 48%),
    linear-gradient(to top, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
}

.services-page .services-hero-stat__val em {
  color: var(--lux-gold) !important;
}

.services-page .services-hero-pill::before {
  background: var(--lux-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.14) !important;
}

.services-page .service-card-num {
  color: rgba(201, 169, 110, 0.72) !important;
}

.services-page .service-card:nth-child(even) .service-card-num {
  color: rgba(154, 123, 95, 0.78) !important;
}

.services-page .service-card--booth .service-card__body {
  border-top-color: var(--lux-gold) !important;
}

.services-page .service-card--fire .service-card__body {
  border-top-color: var(--lux-burgundy) !important;
}

.services-page .service-card--acoustic .service-card__body {
  border-top-color: var(--lux-bronze) !important;
}

.services-page .service-card--booth .service-card__icon {
  background: linear-gradient(135deg, #c9a96e, #8a6a33) !important;
}

.services-page .service-card--fire .service-card__icon {
  background: linear-gradient(135deg, #8a5040, #5c3028) !important;
}

.services-page .service-card--acoustic .service-card__icon {
  background: linear-gradient(135deg, #9a7b5f, #6f5630) !important;
}

/* Intro panels — unified luxury accents */
.service-intro-panel::before {
  background: var(
    --intro-accent-bar,
    linear-gradient(90deg, #9a7b5f 0%, #c9a96e 50%, #8a6a47 100%)
  ) !important;
}

.service-intro-panel--booth {
  --intro-accent: #9a7b5f;
  --intro-accent-bar: linear-gradient(90deg, #9a7b5f 0%, #c9a96e 100%);
}

.service-intro-panel--fire {
  --intro-accent: #8a5040;
  --intro-accent-bar: linear-gradient(90deg, #8a5040 0%, #c9a96e 100%);
}

.service-intro-panel--acoustic {
  --intro-accent: #8a6a47;
  --intro-accent-bar: linear-gradient(90deg, #8a6a47 0%, #c9a96e 100%);
}

.services-brand-panel::before {
  background: linear-gradient(90deg, #9a7b5f 0%, #c9a96e 50%, #8a6a47 100%) !important;
}

/* Dark prestige nav — site-wide (matches homepage) */
.services-page nav,
body:not(.home-page) nav {
  background: rgba(5, 5, 5, 0.72) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.14) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22) !important;
}

.services-page nav.scrolled,
body:not(.home-page) nav.scrolled {
  background: rgba(5, 5, 5, 0.92) !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.16) !important;
}

.services-page .nav-mobile-toggle,
body:not(.home-page) .nav-mobile-toggle {
  border-color: rgba(201, 169, 110, 0.45) !important;
  background: rgba(201, 169, 110, 0.1) !important;
  color: #e2c58f !important;
}

body:not(.home-page) .nav-links a {
  color: rgba(245, 243, 239, 0.62) !important;
}

body:not(.home-page) .nav-links a:hover,
body:not(.home-page) .nav-links a.is-active {
  color: #f5f3ef !important;
}

body:not(.home-page) .nav-cta {
  color: var(--lux-gold) !important;
  background: transparent !important;
  border-color: rgba(201, 169, 110, 0.45) !important;
  box-shadow: none !important;
}

body:not(.home-page) .nav-cta:hover,
body:not(.home-page) .nav-cta.is-active {
  color: #050505 !important;
  background: var(--lux-gold) !important;
  border-color: var(--lux-gold) !important;
}

/* ─── FOOTER — editorial luxury on light pages ────────────────── */
.services-page footer,
.home-page footer {
  background: var(--lux-ivory) !important;
  border-top: 1px solid rgba(201, 169, 110, 0.16) !important;
  padding-top: 72px !important;
}

.services-page .footer-col-title,
.home-page .footer-col-title {
  color: var(--lux-bronze) !important;
  letter-spacing: 0.32em !important;
}

.services-page .footer-links a,
.home-page .footer-links a {
  color: rgba(26, 24, 22, 0.72) !important;
  font-size: 14px;
  transition: color 0.28s var(--lux-ease), padding-left 0.28s var(--lux-ease);
}

.services-page .footer-links a:hover,
.home-page .footer-links a:hover {
  color: var(--lux-charcoal) !important;
  padding-left: 4px;
}

.services-page .footer-logo .logo-secondary,
.home-page .footer-logo .logo-secondary {
  color: var(--lux-gold) !important;
}

.services-page .footer-bottom,
.home-page .footer-bottom {
  border-top: 1px solid rgba(201, 169, 110, 0.12) !important;
}

/* ─── LUXURY IMAGE FRAMES (shared) ────────────────────────────── */
.lux-frame,
.fire-materials__card,
.booth-materials__card,
.fire-showcase__figure,
.booth-showcase__figure,
.fire-process__visual,
.booth-process__visual,
.acoustic-showcase__figure,
.service-fire-hero__visual,
.service-acoustic-hero__visual,
.service-booth-hero__visual {
  position: relative;
  border-radius: var(--lux-radius);
  overflow: hidden;
  border: 1px solid rgba(201, 169, 110, 0.14);
  box-shadow: var(--lux-shadow);
}

.lux-frame::after,
.fire-materials__card::after,
.booth-materials__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  border-radius: inherit;
}

.fire-materials__figure img,
.booth-materials__figure img,
.fire-showcase__figure img,
.booth-showcase__figure img,
.fire-process__visual img,
.booth-process__visual img,
.acoustic-showcase__figure img {
  transition: transform 0.7s var(--lux-ease);
}

.fire-materials__card:hover .fire-materials__figure img,
.booth-materials__card:hover .booth-materials__figure img,
.fire-showcase__figure:hover img,
.booth-showcase__figure:hover img {
  transform: scale(1.04);
}

/* ─── FIRE PAGE — burgundy-gold accents ───────────────────────── */
.services-page--fire .service-fire-hero__index,
.services-page--fire .service-fire-hero .hero-h1 em,
.service-fire-feature-bar__val,
.fire-materials__tag,
.fire-process__step-num {
  color: var(--lux-burgundy) !important;
}

.services-page--fire .service-fire-hero__visual,
.fire-showcase__figure,
.fire-process__visual {
  border-color: rgba(138, 80, 64, 0.14) !important;
}

.services-page--fire .service-fire-hero__bg {
  background:
    radial-gradient(ellipse at 88% 12%, rgba(138, 80, 64, 0.08) 0%, transparent 48%),
    radial-gradient(ellipse at 8% 88%, rgba(201, 169, 110, 0.1) 0%, transparent 44%),
    var(--lux-ivory) !important;
}

.fire-process__step-num {
  border-color: rgba(138, 80, 64, 0.28) !important;
  background: rgba(138, 80, 64, 0.06) !important;
}

/* ─── ACOUSTIC PAGE — bronze-gold accents ─────────────────────── */
.services-page--acoustic .service-acoustic-hero__index,
.services-page--acoustic .service-acoustic-hero .hero-h1 em {
  color: var(--lux-bronze) !important;
}

.services-page--acoustic .service-acoustic-hero__bg {
  background:
    radial-gradient(ellipse at 88% 12%, rgba(154, 123, 95, 0.1) 0%, transparent 48%),
    radial-gradient(ellipse at 8% 88%, rgba(201, 169, 110, 0.1) 0%, transparent 44%),
    var(--lux-ivory) !important;
}

.acoustic-compare__tag {
  color: var(--lux-bronze) !important;
}

/* ─── BOOTH PAGE — hero + visual sections ─────────────────────── */
.services-page--booth .service-booth-hero__index,
.services-page--booth .service-booth-hero .hero-h1 em {
  color: var(--lux-gold) !important;
}

.service-booth-hero {
  position: relative;
  overflow-x: clip;
  padding:
    calc(var(--nav-height, 72px) + 20px)
    16px
    28px;
  width: 100%;
  box-sizing: border-box;
}

.service-booth-hero__bg,
.service-booth-hero__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.service-booth-hero__bg {
  background:
    radial-gradient(ellipse at 88% 12%, rgba(201, 169, 110, 0.12) 0%, transparent 48%),
    radial-gradient(ellipse at 8% 88%, rgba(154, 123, 95, 0.08) 0%, transparent 44%),
    var(--lux-ivory);
}

.service-booth-hero__noise {
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.service-booth-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: min(1380px, 100%);
  margin: 0 auto;
}

.service-booth-hero__copy {
  min-width: 0;
  width: 100%;
}

.service-booth-hero__index {
  display: block;
  margin-bottom: 12px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lux-gold);
}

.services-page--booth .service-booth-hero .hero-h1 {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(32px, 8.5vw, 72px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--lux-charcoal);
  margin-bottom: 16px;
}

.services-page--booth .service-booth-hero .hero-sub {
  max-width: 100%;
  font-size: 14px;
  line-height: 1.7;
  color: var(--lux-muted);
}

.service-booth-hero__visual {
  margin: 0;
}

.service-booth-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.service-booth-hero__caption {
  display: block;
  padding: 12px 16px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26, 24, 22, 0.55);
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid var(--lux-border);
}

.service-booth-hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 24px;
}

.service-booth-feature-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 28px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--lux-border);
  background: rgba(26, 24, 22, 0.08);
}

.service-booth-feature-bar__item {
  padding: 18px 14px;
  text-align: center;
  background: rgba(255, 255, 255, 0.96);
}

.service-booth-feature-bar__val {
  display: block;
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--lux-gold);
}

.service-booth-feature-bar__lbl {
  display: block;
  margin-top: 6px;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(26, 24, 22, 0.52);
}

/* Booth materials grid — mirrors fire-materials */
.booth-materials__head {
  max-width: 720px;
  margin-bottom: 28px;
}

.booth-materials__lead {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--lux-muted);
}

.booth-materials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.booth-materials__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--lux-radius);
  overflow: hidden;
  border: 1px solid var(--lux-border);
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(26, 24, 22, 0.06);
  transition: transform 0.4s var(--lux-ease), box-shadow 0.4s var(--lux-ease);
}

.booth-materials__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(26, 24, 22, 0.1);
}

.booth-materials__figure {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.booth-materials__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.booth-materials__body {
  padding: 22px 20px 24px;
}

.booth-materials__tag {
  display: block;
  margin-bottom: 10px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lux-bronze);
}

.booth-materials__title {
  margin: 0 0 10px;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(22px, 5vw, 28px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--lux-charcoal);
}

.booth-materials__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--lux-muted);
}

.booth-showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  min-width: 0;
}

.booth-showcase__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--lux-muted);
}

.booth-showcase__figure {
  margin: 0;
}

.booth-showcase__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.booth-process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

.booth-process__visual {
  margin: 0;
}

.booth-process__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.booth-process__caption {
  display: block;
  padding: 12px 16px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26, 24, 22, 0.55);
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid var(--lux-border);
}

@media (min-width: 768px) {
  .booth-materials__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .booth-materials__card:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .service-booth-hero {
    padding:
      calc(var(--nav-height, 72px) + 48px)
      max(28px, var(--site-edge))
      64px;
  }

  .service-booth-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: 48px 56px;
    align-items: center;
  }

  .service-booth-hero__ctas {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .booth-materials__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .booth-materials__card:last-child {
    grid-column: auto;
  }

  .booth-showcase {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 48px 56px;
  }

  .booth-process {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px 56px;
    align-items: center;
  }
}

/* ─── BUTTONS ON LIGHT PAGES ──────────────────────────────────── */
.services-page .btn-outline-large {
  color: var(--lux-charcoal) !important;
  background: transparent !important;
  border: 1px solid rgba(201, 169, 110, 0.45) !important;
  box-shadow: none !important;
}

.services-page .btn-outline-large:hover {
  color: var(--lux-charcoal) !important;
  background: rgba(201, 169, 110, 0.1) !important;
  border-color: rgba(201, 169, 110, 0.65) !important;
}

/* ─── DARK CARD SURFACES — warm charcoal not purple ───────────── */
.bento-cell:not(.bento-mat-leather-cell):not(.bento-mat-velvet-cell):not(.bento-mat-linen-cell):not(.bento-mat-suede-cell):not(.bento-process-photo-cell):not(.workshop-founder-cell):not(.workshop-fr-photo-cell):not(.workshop-theater-photo-cell):not(.philosophy-hero-cell),
.service-card:not(.services-page .service-card) {
  background:
    radial-gradient(ellipse at 58% 50%, rgba(154, 123, 95, 0.12) 0%, transparent 52%),
    linear-gradient(165deg, rgba(22, 20, 18, 0.96) 0%, rgba(10, 9, 8, 0.98) 100%) !important;
}

/* ─── SERVICE CARDS hover — subtle gold lift ────────────────────── */
.services-page .service-card {
  transition: transform 0.4s var(--lux-ease), box-shadow 0.4s var(--lux-ease), border-color 0.4s var(--lux-ease) !important;
}

.services-page .service-card__link {
  letter-spacing: 0.2em !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SITewide LUXURY POLISH v2 — prestigious upholstery brand system
   ═══════════════════════════════════════════════════════════════════ */

/* Editorial section rules & texture labels */
.lux-section-rule {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 169, 110, 0.28),
    rgba(154, 123, 95, 0.16),
    transparent
  );
}

.bento-texture-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.55);
  z-index: 1;
  position: relative;
}

.bento-texture-label--sub {
  letter-spacing: 0.3em;
  color: rgba(154, 123, 95, 0.5);
}

/* Homepage — gold/bronze/burgundy accent system (no purple/emerald) */
.bento-section-kicker.em,
.bento-cell-tag.em,
.bento-icon.em,
.bento-cell-num.em,
.bento-cell-h2 em.em,
.bento-section-h2 em.em {
  color: var(--lux-bronze) !important;
}

.bento-step-num--bronze,
.bento-step-circle--bronze {
  color: var(--lux-bronze) !important;
  border-color: rgba(154, 123, 95, 0.35) !important;
}

.bento-step-num--bronze {
  opacity: 0.35;
}

.bento-project-cell--gold {
  border: 1px solid rgba(201, 169, 110, 0.18) !important;
}

.bento-project-cell--burgundy {
  border: 1px solid rgba(138, 80, 64, 0.16) !important;
}

.bento-project-cat--bronze {
  color: rgba(154, 123, 95, 0.88) !important;
}

.glass-emerald,
.bento-cell.glass-emerald {
  background:
    radial-gradient(ellipse at 58% 50%, rgba(154, 123, 95, 0.22) 0%, transparent 54%),
    linear-gradient(165deg, rgba(22, 20, 18, 0.96) 0%, rgba(10, 9, 8, 0.98) 100%) !important;
  border-color: rgba(154, 123, 95, 0.18) !important;
  box-shadow:
    0 12px 56px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(154, 123, 95, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.bento-section-kicker,
.bento-section-h2 em {
  color: var(--lux-gold) !important;
}

.bento-section-h2 em.em {
  color: var(--lux-bronze) !important;
}

/* ─── INTERIOR PAGES — ivory editorial canvas ───────────────────── */
body.interior-page,
body.services-page {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(201, 169, 110, 0.06) 0%, transparent 42%),
    radial-gradient(ellipse at 0% 48%, rgba(154, 123, 95, 0.04) 0%, transparent 38%),
    var(--lux-ivory) !important;
  color: var(--lux-charcoal);
}

/* Dark prestige nav — site-wide (matches homepage) */
body:not(.home-page) nav {
  background: rgba(5, 5, 5, 0.72) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.14) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22) !important;
}

body:not(.home-page) nav.scrolled {
  background: rgba(5, 5, 5, 0.92) !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.16) !important;
}

body:not(.home-page) .nav-links a {
  color: rgba(245, 243, 239, 0.62) !important;
}

body:not(.home-page) .nav-links a:hover,
body:not(.home-page) .nav-links a.is-active {
  color: #f5f3ef !important;
}

body:not(.home-page) .nav-cta {
  color: var(--lux-gold) !important;
  background: transparent !important;
  border-color: rgba(201, 169, 110, 0.45) !important;
  box-shadow: none !important;
}

body:not(.home-page) .nav-cta:hover,
body:not(.home-page) .nav-cta.is-active {
  color: #050505 !important;
  background: var(--lux-gold) !important;
  border-color: var(--lux-gold) !important;
}

body:not(.home-page) .nav-mobile-toggle {
  border-color: rgba(201, 169, 110, 0.45) !important;
  background: rgba(201, 169, 110, 0.1) !important;
  color: #e2c58f !important;
}

/* Interior heroes — light, spacious, editorial */
body.interior-page .page-hero,
body.interior-page .process-hero,
body.interior-page .contact-hero,
body.interior-page .studio-hero,
body.interior-page .team-hero {
  background:
    radial-gradient(ellipse at 72% 18%, rgba(201, 169, 110, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse at 10% 88%, rgba(154, 123, 95, 0.08) 0%, transparent 48%),
    linear-gradient(to top, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
  min-height: 58vh;
}

body.interior-page .page-hero .hero-bg,
body.interior-page .process-hero .hero-bg,
body.interior-page .contact-hero .hero-bg,
body.interior-page .studio-hero .hero-bg,
body.interior-page .team-hero .hero-bg {
  background:
    radial-gradient(ellipse at 70% 22%, rgba(201, 169, 110, 0.1) 0%, transparent 54%),
    linear-gradient(to top, rgba(250, 249, 247, 0.95) 0%, rgba(250, 249, 247, 0.35) 62%, rgba(250, 249, 247, 0.12) 100%) !important;
}

body.interior-page .page-hero .hero-line,
body.interior-page .process-hero .hero-line,
body.interior-page .contact-hero .hero-line,
body.interior-page .studio-hero .hero-line,
body.interior-page .team-hero .hero-line {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201, 169, 110, 0.22) 36%,
    rgba(154, 123, 95, 0.1) 72%,
    transparent 100%
  ) !important;
}

body.interior-page .page-hero .hero-h1,
body.interior-page .process-hero .hero-h1,
body.interior-page .contact-hero .hero-h1,
body.interior-page .studio-hero .hero-h1,
body.interior-page .team-hero .hero-h1 {
  color: var(--lux-charcoal) !important;
}

body.interior-page .page-hero .hero-sub,
body.interior-page .process-hero .hero-sub,
body.interior-page .contact-hero .hero-sub,
body.interior-page .studio-hero .hero-sub,
body.interior-page .team-hero .hero-sub {
  color: var(--lux-muted) !important;
}

body.interior-page .page-hero .hero-year,
body.interior-page .process-hero .hero-year,
body.interior-page .contact-hero .hero-year,
body.interior-page .studio-hero .hero-year,
body.interior-page .team-hero .hero-year {
  color: rgba(26, 24, 22, 0.38) !important;
}

body.interior-page .section-kicker {
  color: var(--lux-bronze) !important;
}

body.interior-page .section-title-page {
  color: var(--lux-charcoal) !important;
}

body.interior-page .section-title-page em {
  color: var(--lux-bronze) !important;
}

body.interior-page .prose,
body.interior-page .prose p {
  color: var(--lux-muted);
}

body.interior-page .prose strong {
  color: var(--lux-charcoal) !important;
}

/* Light card surfaces on interior pages (replace dark glass blocks) */
body.interior-page .page-section--surface,
body.interior-page .page-section--graphite,
body.interior-page .contact-block,
body.interior-page .material-tier,
body.interior-page .studio-sidebar {
  background:
    radial-gradient(ellipse at 96% 4%, rgba(201, 169, 110, 0.08) 0%, transparent 46%),
    linear-gradient(160deg, #ffffff 0%, #faf8f4 100%) !important;
  border: 1px solid var(--lux-border) !important;
  border-radius: var(--lux-radius) !important;
  box-shadow: var(--lux-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.interior-page .page-section--surface .section-title-page,
body.interior-page .page-section--graphite .section-title-page,
body.interior-page .contact-block h3,
body.interior-page .material-tier .tier-name,
body.interior-page .timeline-deep-item h3 {
  color: var(--lux-charcoal) !important;
}

body.interior-page .timeline-deep-item p,
body.interior-page .contact-block p,
body.interior-page .material-tier p {
  color: var(--lux-muted) !important;
}

body.interior-page .tl-meta {
  color: var(--lux-bronze) !important;
}

body.interior-page .contact-block a {
  color: var(--lux-charcoal) !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.35);
  display: inline-block;
  padding-bottom: 1px;
  transition: color 0.28s var(--lux-ease), border-color 0.28s var(--lux-ease);
}

body.interior-page .contact-block a:hover {
  color: var(--lux-bronze) !important;
  border-bottom-color: rgba(154, 123, 95, 0.55);
}

/* Studio sidebar — refined navigation */
body.interior-page .studio-sidebar-kicker {
  color: var(--lux-bronze) !important;
}

body.interior-page .studio-sidebar-dot {
  background: var(--lux-gold) !important;
}

body.interior-page .studio-sidebar-link {
  color: rgba(26, 24, 22, 0.58) !important;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: color 0.28s var(--lux-ease), padding-left 0.28s var(--lux-ease);
}

body.interior-page .studio-sidebar-link:hover,
body.interior-page .studio-sidebar-link.is-current {
  color: var(--lux-charcoal) !important;
  padding-left: 4px;
}

body.interior-page .studio-sidebar-link.is-current {
  font-weight: 400;
}

body.interior-page .material-tier h4 {
  color: var(--lux-gold) !important;
}

body.interior-page .material-tier:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(26, 24, 22, 0.1) !important;
  border-color: rgba(201, 169, 110, 0.22) !important;
}

/* Footer — ivory editorial on all pages */
footer {
  background: var(--lux-ivory) !important;
  border-top: 1px solid rgba(201, 169, 110, 0.16) !important;
  padding-top: 72px !important;
}

.footer-col-title {
  color: var(--lux-bronze) !important;
  letter-spacing: 0.32em !important;
}

.footer-logo .logo-primary {
  color: var(--lux-charcoal) !important;
}

.footer-logo .logo-secondary {
  color: var(--lux-bronze) !important;
}

.footer-tagline {
  color: rgba(26, 24, 22, 0.52) !important;
}

.footer-links a {
  color: rgba(26, 24, 22, 0.62) !important;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: color 0.28s var(--lux-ease), padding-left 0.28s var(--lux-ease);
}

.footer-links a:hover {
  color: var(--lux-charcoal) !important;
  padding-left: 4px;
}

.footer-bottom {
  border-top: 1px solid rgba(201, 169, 110, 0.12) !important;
}

.footer-copy,
.footer-social a {
  color: rgba(26, 24, 22, 0.45) !important;
}

.footer-social a:hover {
  color: var(--lux-bronze) !important;
}

.footer-title-icon {
  border-color: rgba(201, 169, 110, 0.45) !important;
}

/* Buttons — refined gold on light pages */
body:not(.home-page) .btn-large,
body:not(.home-page) .btn-primary {
  background: linear-gradient(135deg, #c9a96e 0%, #b8924f 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 28px rgba(154, 123, 95, 0.18) !important;
}

body:not(.home-page) .btn-large:hover,
body:not(.home-page) .btn-primary:hover {
  background: linear-gradient(135deg, #d4b480 0%, #c9a96e 100%) !important;
  transform: translateY(-2px);
}

body:not(.home-page) .btn-outline-large {
  color: var(--lux-charcoal) !important;
  background: transparent !important;
  border: 1px solid rgba(201, 169, 110, 0.45) !important;
  box-shadow: none !important;
}

body:not(.home-page) .btn-outline-large:hover {
  background: rgba(201, 169, 110, 0.1) !important;
  border-color: rgba(201, 169, 110, 0.65) !important;
}

/* Homepage — keep cinematic dark sections, refine typography rhythm */
.home-page .bento-section {
  background: transparent;
}

.home-page #philosophy {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(154, 123, 95, 0.1) 0%, transparent 55%),
    #050505 !important;
}

.home-page .marquee-track {
  background: var(--lux-ivory) !important;
}

.home-page .marquee-track .marquee-item {
  color: rgba(26, 24, 22, 0.32) !important;
  font-family: "DM Mono", monospace;
  letter-spacing: 0.28em;
}

/* Homepage bento marquee — readable on dark strip */
.home-page .bento-marquee .marquee-item,
.bento-marquee .marquee-item {
  color: rgba(240, 234, 224, 0.82) !important;
  font-family: "DM Mono", monospace !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
}

/* Service cards — elevated hover */
.services-page .service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(26, 24, 22, 0.12) !important;
}

.services-page .service-card__media img {
  transition: transform 0.7s var(--lux-ease);
}

.services-page .service-card:hover .service-card__media img {
  transform: scale(1.05);
}

/* Intro chips — subtle luxury pills */
.service-intro-chips li {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(201, 169, 110, 0.12);
  transition: border-color 0.28s var(--lux-ease), background 0.28s var(--lux-ease);
}

.service-intro-chips li:hover {
  border-color: rgba(201, 169, 110, 0.28);
  background: rgba(255, 255, 255, 0.98);
}

/* Timeline on service pages */
.services-page .timeline-deep-item {
  border-left-color: rgba(201, 169, 110, 0.22) !important;
}

.services-page .timeline-deep-item:hover {
  border-left-color: rgba(201, 169, 110, 0.45) !important;
}

/* Selection highlight — brand gold */
::selection {
  background: rgba(201, 169, 110, 0.28);
  color: var(--lux-charcoal);
}

/* ═══════════════════════════════════════════════════════════════════
   SITewide LUXURY POLISH v2 — prestigious upholstery brand
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Editorial micro-details ───────────────────────────────────── */
.lux-section-rule {
  position: absolute;
  inset: 0 auto auto 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 169, 110, 0.28),
    rgba(154, 123, 95, 0.16),
    transparent
  );
}

.bento-texture-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.55);
  z-index: 1;
  position: relative;
}

.bento-texture-label--sub {
  letter-spacing: 0.3em;
  color: rgba(154, 123, 95, 0.55);
}

.bento-step-num--bronze {
  color: rgba(154, 123, 95, 0.35) !important;
}

.bento-step-circle--bronze {
  border-color: rgba(154, 123, 95, 0.4) !important;
  color: rgba(201, 169, 110, 0.85) !important;
}

.bento-project-cell--gold {
  border: 1px solid rgba(201, 169, 110, 0.18) !important;
}

.bento-project-cell--burgundy {
  border: 1px solid rgba(138, 80, 64, 0.18) !important;
}

.bento-project-cat--bronze {
  color: rgba(201, 169, 110, 0.82) !important;
}

/* ─── Homepage bento — gold/bronze only (no purple/emerald) ─────── */
.bento-section-kicker,
.bento-section-kicker.em,
.bento-section-h2 em,
.bento-section-h2 em.em {
  color: var(--lux-gold) !important;
}

.bento-cell-tag.em,
.bento-cell-num.em,
.bento-icon.em {
  color: var(--lux-bronze) !important;
}

.glass-emerald,
.bento-cell.glass-emerald {
  background:
    radial-gradient(ellipse at 58% 50%, rgba(154, 123, 95, 0.22) 0%, transparent 54%),
    linear-gradient(165deg, rgba(22, 20, 18, 0.96) 0%, rgba(10, 9, 8, 0.98) 100%) !important;
  border-color: rgba(201, 169, 110, 0.14) !important;
  box-shadow:
    0 12px 56px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(154, 123, 95, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.bento-texture-purple,
.bento-cell.bento-texture-purple {
  border-color: rgba(201, 169, 110, 0.12) !important;
}

/* ─── Interior pages — ivory editorial canvas ───────────────────── */
body:not(.home-page) {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(201, 169, 110, 0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 0% 60%, rgba(154, 123, 95, 0.04) 0%, transparent 38%),
    var(--lux-ivory) !important;
  color: var(--lux-charcoal);
}

/* Ivory heroes — contact, process, studio, services overview */
body:not(.home-page) .page-hero,
body:not(.home-page) .services-hero,
body:not(.home-page) .contact-hero,
body:not(.home-page) .process-hero,
body:not(.home-page) .studio-hero,
body:not(.home-page) .team-hero {
  background:
    radial-gradient(ellipse at 72% 18%, rgba(201, 169, 110, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse at 10% 88%, rgba(154, 123, 95, 0.08) 0%, transparent 48%),
    linear-gradient(to top, rgba(255, 255, 255, 0.96) 0%, rgba(250, 249, 247, 0.72) 100%) !important;
}

body:not(.home-page) .page-hero .hero-bg,
body:not(.home-page) .services-hero .hero-bg,
body:not(.home-page) .contact-hero .hero-bg,
body:not(.home-page) .process-hero .hero-bg,
body:not(.home-page) .studio-hero .hero-bg,
body:not(.home-page) .team-hero .hero-bg {
  background:
    radial-gradient(ellipse at 70% 22%, rgba(201, 169, 110, 0.1) 0%, transparent 54%),
    linear-gradient(to top, rgba(250, 249, 247, 0.4) 0%, transparent 100%) !important;
}

body:not(.home-page) .page-hero .hero-line,
body:not(.home-page) .services-hero .hero-line,
body:not(.home-page) .contact-hero .hero-line,
body:not(.home-page) .process-hero .hero-line,
body:not(.home-page) .studio-hero .hero-line {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201, 169, 110, 0.22) 36%,
    rgba(154, 123, 95, 0.1) 72%,
    transparent 100%
  ) !important;
}

body:not(.home-page) .page-hero .hero-h1,
body:not(.home-page) .services-hero .hero-h1,
body:not(.home-page) .contact-hero .hero-h1,
body:not(.home-page) .process-hero .hero-h1,
body:not(.home-page) .studio-hero .hero-h1 {
  color: var(--lux-charcoal) !important;
}

body:not(.home-page) .page-hero .hero-sub,
body:not(.home-page) .services-hero .hero-sub,
body:not(.home-page) .contact-hero .hero-sub,
body:not(.home-page) .process-hero .hero-sub,
body:not(.home-page) .studio-hero .hero-sub {
  color: var(--lux-muted) !important;
}

body:not(.home-page) .page-hero .hero-year,
body:not(.home-page) .services-hero .hero-year,
body:not(.home-page) .contact-hero .hero-year,
body:not(.home-page) .process-hero .hero-year,
body:not(.home-page) .studio-hero .hero-year {
  color: rgba(26, 24, 22, 0.38) !important;
}

body:not(.home-page) .hero-tag {
  color: var(--lux-bronze) !important;
}

body:not(.home-page) .hero-h1 em {
  color: var(--lux-gold) !important;
}

/* ─── Interior content panels — clean ivory cards ───────────────── */
body:not(.home-page) .page-section--surface,
body:not(.home-page) .page-section--graphite {
  background:
    radial-gradient(ellipse at 96% 4%, rgba(201, 169, 110, 0.1) 0%, transparent 46%),
    linear-gradient(160deg, #ffffff 0%, #faf8f4 100%) !important;
  border: 1px solid var(--lux-border) !important;
  box-shadow: var(--lux-shadow) !important;
  color: var(--lux-charcoal) !important;
}

body:not(.home-page) .page-section--surface .section-kicker,
body:not(.home-page) .page-section--graphite .section-kicker {
  color: var(--lux-bronze) !important;
}

body:not(.home-page) .page-section--surface .section-title-page,
body:not(.home-page) .page-section--graphite .section-title-page,
body:not(.home-page) .page-section--surface h2,
body:not(.home-page) .page-section--graphite h2,
body:not(.home-page) .page-section--surface h3,
body:not(.home-page) .page-section--graphite h3 {
  color: var(--lux-charcoal) !important;
}

body:not(.home-page) .page-section--surface .section-title-page em,
body:not(.home-page) .page-section--graphite .section-title-page em {
  color: var(--lux-gold) !important;
}

body:not(.home-page) .page-section--surface .prose,
body:not(.home-page) .page-section--graphite .prose,
body:not(.home-page) .page-section--surface p,
body:not(.home-page) .page-section--graphite p {
  color: var(--lux-muted) !important;
}

body:not(.home-page) .page-section--surface .prose strong,
body:not(.home-page) .page-section--graphite .prose strong {
  color: var(--lux-charcoal) !important;
}

body.interior-page .page-section--graphite .spec-list li {
  color: var(--lux-muted) !important;
  border-bottom-color: rgba(26, 24, 22, 0.1) !important;
}

body.interior-page .page-section--graphite .spec-list li::before {
  background: var(--lux-gold) !important;
}

/* Interior panel sections — light readable card on dark-prone shells */
body.interior-page .page-section.interior-panel-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.interior-reading-panel {
  background:
    radial-gradient(ellipse at 96% 4%, rgba(201, 169, 110, 0.08) 0%, transparent 46%),
    linear-gradient(160deg, #ffffff 0%, #faf8f4 100%) !important;
  border: 1px solid var(--lux-border) !important;
  border-radius: var(--lux-radius) !important;
  box-shadow: var(--lux-shadow) !important;
  padding: clamp(28px, 5vw, 56px);
  color: var(--lux-charcoal) !important;
}

.interior-reading-panel .section-kicker {
  color: var(--lux-bronze) !important;
}

.interior-reading-panel .section-title-page {
  color: var(--lux-charcoal) !important;
}

.interior-reading-panel .section-title-page em {
  color: var(--lux-gold) !important;
}

.interior-reading-panel .prose,
.interior-reading-panel .prose p,
.interior-reading-panel .interior-reading-panel__lead {
  color: var(--lux-muted) !important;
}

.interior-reading-panel .prose strong {
  color: var(--lux-charcoal) !important;
}

.interior-reading-panel .spec-list li {
  color: var(--lux-muted) !important;
  border-bottom-color: rgba(26, 24, 22, 0.1) !important;
}

.interior-reading-panel .spec-list li::before {
  background: var(--lux-gold) !important;
}

.studio-visit-panel {
  display: grid;
  gap: 28px;
}

.studio-visit-panel__lead {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--lux-muted);
  max-width: 36ch;
}

.studio-visit-panel__cta {
  display: inline-flex;
  margin-top: 4px;
}

.studio-visit-panel__list {
  margin: 0;
}

@media (min-width: 768px) {
  .studio-visit-panel {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: start;
  }
}

/* Timeline on light pages */
body:not(.home-page) .timeline-deep-item {
  border-left-color: rgba(201, 169, 110, 0.22) !important;
}

body:not(.home-page) .timeline-deep-item h3,
body:not(.home-page) .timeline-deep-item .tl-meta {
  color: var(--lux-charcoal) !important;
}

body:not(.home-page) .timeline-deep-item .tl-meta {
  color: var(--lux-bronze) !important;
}

body:not(.home-page) .timeline-deep-item p {
  color: var(--lux-muted) !important;
}

/* Studio sidebar — editorial light */
body:not(.home-page) .studio-sidebar {
  background:
    linear-gradient(160deg, #ffffff 0%, #faf8f4 100%) !important;
  border: 1px solid var(--lux-border) !important;
  border-radius: var(--lux-radius) !important;
  box-shadow: 0 12px 36px rgba(26, 24, 22, 0.06) !important;
}

body:not(.home-page) .studio-sidebar-link {
  color: rgba(26, 24, 22, 0.62) !important;
}

body:not(.home-page) .studio-sidebar-link:hover,
body:not(.home-page) .studio-sidebar-link.is-current {
  color: var(--lux-charcoal) !important;
}

body:not(.home-page) .studio-sidebar-kicker {
  color: var(--lux-bronze) !important;
}

/* Material tier / hub cards */
body:not(.home-page) .material-tier {
  background:
    linear-gradient(160deg, #ffffff 0%, #faf8f4 100%) !important;
  border: 1px solid var(--lux-border) !important;
  border-radius: var(--lux-radius) !important;
  box-shadow: 0 12px 36px rgba(26, 24, 22, 0.06) !important;
  transition: transform 0.4s var(--lux-ease), box-shadow 0.4s var(--lux-ease), border-color 0.4s var(--lux-ease) !important;
}

body:not(.home-page) .material-tier:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 110, 0.28) !important;
  box-shadow: 0 20px 48px rgba(26, 24, 22, 0.1) !important;
}

body:not(.home-page) .material-tier h4,
body:not(.home-page) .material-tier .tier-name {
  color: var(--lux-charcoal) !important;
}

body:not(.home-page) .material-tier p {
  color: var(--lux-muted) !important;
}

body:not(.home-page) .material-tier h4 {
  color: var(--lux-gold) !important;
}

/* Contact blocks */
body:not(.home-page) .contact-block {
  background:
    linear-gradient(160deg, #ffffff 0%, #faf8f4 100%) !important;
  border: 1px solid var(--lux-border) !important;
  border-radius: var(--lux-radius) !important;
  box-shadow: var(--lux-shadow) !important;
}

body:not(.home-page) .contact-block h3 {
  color: var(--lux-charcoal) !important;
}

body:not(.home-page) .contact-block p,
body:not(.home-page) .contact-block a {
  color: var(--lux-muted) !important;
}

body:not(.home-page) .contact-block a:hover {
  color: var(--lux-gold) !important;
}

body:not(.home-page) .contact-block strong {
  color: var(--lux-charcoal) !important;
}

body:not(.home-page) .contact-panel {
  gap: 20px;
}

/* Contact page — explore & next-step card rhythm */
body.interior-page .contact-section-body {
  max-width: 640px;
  margin-top: 16px;
}

body.interior-page .contact-section-body > p {
  margin-bottom: 0;
}

body.interior-page .page-section--surface .contact-cta-actions {
  margin-top: 20px !important;
  gap: 12px !important;
}

body.interior-page .page-section--surface + .page-section--surface {
  margin-top: 32px;
}

@media (max-width: 768px) {
  body.interior-page .page-section--surface {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
    margin-bottom: 48px !important;
  }

  body.interior-page .page-section--surface + .page-section--surface {
    margin-top: 0;
  }

  body.interior-page .page-section--surface .section-kicker {
    margin-bottom: 12px !important;
  }

  body.interior-page .page-section--surface .section-title-page {
    margin-bottom: 8px !important;
  }

  body.interior-page .contact-section-body {
    margin-top: 12px !important;
  }

  body.interior-page .page-main {
    padding-bottom: 96px !important;
  }
}

/* Section typography on interior pages */
body:not(.home-page) .section-kicker {
  color: var(--lux-bronze) !important;
}

body:not(.home-page) .section-title-page {
  color: var(--lux-charcoal) !important;
}

body:not(.home-page) .section-title-page em {
  color: var(--lux-gold) !important;
}

body:not(.home-page) .prose,
body:not(.home-page) .page-main p {
  color: var(--lux-muted);
}

body:not(.home-page) .prose strong {
  color: var(--lux-charcoal) !important;
}

/* ─── Footer — ivory editorial on every page ────────────────────── */
footer {
  background: var(--lux-ivory) !important;
  border-top: 1px solid rgba(201, 169, 110, 0.16) !important;
  padding-top: 72px !important;
}

.footer-col-title {
  color: var(--lux-bronze) !important;
  letter-spacing: 0.32em !important;
}

.footer-links a {
  color: rgba(26, 24, 22, 0.62) !important;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: color 0.28s var(--lux-ease), padding-left 0.28s var(--lux-ease);
}

.footer-links a:hover {
  color: var(--lux-charcoal) !important;
  padding-left: 4px;
}

.footer-logo .logo-primary {
  color: var(--lux-charcoal) !important;
}

.footer-logo .logo-secondary {
  color: var(--lux-gold) !important;
}

.footer-tagline {
  color: rgba(26, 24, 22, 0.52) !important;
}

.footer-bottom {
  border-top: 1px solid rgba(201, 169, 110, 0.12) !important;
}

.footer-copy {
  color: rgba(26, 24, 22, 0.45) !important;
}

.footer-social a {
  color: rgba(26, 24, 22, 0.45) !important;
}

.footer-social a:hover {
  color: var(--lux-gold) !important;
}

.footer-title-icon {
  border-color: rgba(201, 169, 110, 0.45) !important;
}

/* ─── Buttons — refined gold on light pages ─────────────────────── */
body:not(.home-page) .btn-large,
body:not(.home-page) .btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #c9a96e 0%, #a8864a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 10px 28px rgba(154, 123, 95, 0.22) !important;
}

body:not(.home-page) .btn-large:hover,
body:not(.home-page) .btn-primary:hover {
  background: linear-gradient(135deg, #d4b87a 0%, #b89455 100%) !important;
  transform: translateY(-2px);
}

body:not(.home-page) .btn-outline-large {
  color: var(--lux-charcoal) !important;
  background: transparent !important;
  border: 1px solid rgba(201, 169, 110, 0.45) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

body:not(.home-page) .btn-outline-large:hover {
  background: rgba(201, 169, 110, 0.1) !important;
  border-color: rgba(201, 169, 110, 0.65) !important;
  color: var(--lux-charcoal) !important;
}

/* ─── Service cards — elevated luxury ───────────────────────────── */
.services-page .service-card {
  background: #ffffff !important;
  border: 1px solid var(--lux-border) !important;
  border-radius: var(--lux-radius) !important;
  box-shadow: 0 12px 40px rgba(26, 24, 22, 0.07) !important;
  overflow: hidden;
}

.services-page .service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(26, 24, 22, 0.12) !important;
  border-color: rgba(201, 169, 110, 0.22) !important;
}

.services-page .service-card__body {
  background: #ffffff !important;
}

.services-page .service-card__media img {
  transition: transform 0.7s var(--lux-ease);
}

.services-page .service-card:hover .service-card__media img {
  transform: scale(1.05);
}

/* Brand panel refinement */
.services-brand-panel {
  border-radius: 22px !important;
}

.services-brand-chip {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--lux-border) !important;
}

/* ─── Homepage footer contrast on dark sections above ───────────── */
.home-page footer {
  margin-top: 0;
}

/* ─── Marquee — clean editorial strip ───────────────────────────── */
.marquee-track {
  background: #ffffff !important;
  border-color: rgba(201, 169, 110, 0.12) !important;
}

.marquee-track .marquee-item {
  color: rgba(26, 24, 22, 0.45) !important;
  font-family: "DM Mono", monospace;
  letter-spacing: 0.22em;
}

.bento-marquee {
  background: linear-gradient(
    180deg,
    #080807 0%,
    #11100e 50%,
    #080807 100%
  ) !important;
  border-color: rgba(201, 169, 110, 0.2) !important;
}

/* ─── Selection & focus — brand gold ────────────────────────────── */
::selection {
  background: rgba(201, 169, 110, 0.28);
  color: var(--lux-charcoal);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(201, 169, 110, 0.65);
  outline-offset: 3px;
}

/* ─── Smooth scroll reveal polish ────────────────────────────────── */
.reveal.visible {
  will-change: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   SITewide LUXURY POLISH v3 — prestigious upholstery refinement
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Homepage cinematic hero ───────────────────────────────────── */
.home-page:not(.services-page) #hero {
  padding: 148px 60px 108px;
}

.home-page:not(.services-page) #hero .hero-bg {
  background:
    radial-gradient(ellipse at 68% 28%, rgba(154, 123, 95, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse at 18% 78%, rgba(107, 58, 50, 0.12) 0%, transparent 48%),
    linear-gradient(
      to top,
      rgba(5, 5, 5, 0.94) 0%,
      rgba(5, 5, 5, 0.72) 38%,
      rgba(5, 5, 5, 0.42) 68%,
      rgba(5, 5, 5, 0.28) 100%
    ) !important;
}

.home-page .hero-tag {
  letter-spacing: 0.34em;
  font-size: 10px;
  margin-bottom: 10px;
  color: rgba(201, 169, 110, 0.88) !important;
}

body.services-page.home-page .hero-tag {
  color: #9a7b4a !important;
}

.home-page .hero-h1 {
  font-size: clamp(44px, 6.4vw, 92px) !important;
  letter-spacing: 0.05em !important;
  line-height: 0.92 !important;
  max-width: 760px;
}

.home-page .hero-h1 em {
  font-weight: 400;
  letter-spacing: 0.01em;
}

.home-page:not(.services-page) .hero-sub {
  max-width: 460px;
  margin-top: 36px;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(245, 243, 239, 0.74) !important;
}

body.services-page.home-page .hero-sub {
  color: rgba(26, 24, 22, 0.68) !important;
}

.home-page .hero-actions {
  margin-top: 44px;
  gap: 28px;
}

.home-page .btn-primary {
  min-width: 240px;
  padding: 17px 40px !important;
  background: linear-gradient(135deg, #c9a96e 0%, #a8864a 100%) !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 12px 32px rgba(0, 0, 0, 0.28) !important;
}

.home-page .btn-primary:hover {
  background: linear-gradient(135deg, #d4b87a 0%, #b89455 100%) !important;
  transform: translateY(-2px);
}

.home-page .btn-ghost {
  color: rgba(245, 243, 239, 0.58) !important;
  letter-spacing: 0.22em;
}

.home-page .btn-ghost:hover {
  color: rgba(245, 243, 239, 0.92) !important;
}

.home-page .hero-scroll-hint {
  color: rgba(201, 169, 110, 0.55);
}

/* ─── Homepage nav — refined glass bar ──────────────────────────── */
.home-page nav {
  background: rgba(5, 5, 5, 0.55) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.1) !important;
}

.home-page nav.scrolled {
  background: rgba(5, 5, 5, 0.92) !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.16) !important;
}

.home-page .nav-cta {
  border-color: rgba(201, 169, 110, 0.42) !important;
}

/* ─── Bento editorial rhythm ────────────────────────────────────── */
.bento-section {
  padding-top: 72px;
  padding-bottom: 72px;
}

.bento-section-header {
  margin-bottom: 36px;
}

.bento-section-kicker {
  letter-spacing: 0.38em !important;
  font-size: 10px !important;
}

.bento-section-h2 {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 0.94;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  color: #f5f3ef;
}

.bento-cell-body,
.bento-project-detail {
  line-height: 1.65;
  color: rgba(245, 243, 239, 0.62);
}

.bento-project-name {
  letter-spacing: 0.03em;
}

/* ─── Interior typography — editorial prestige ────────────────────── */
body:not(.home-page) .section-title-page {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 0.96;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
}

body:not(.home-page) .section-title-page em {
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #c9a96e;
}

body:not(.home-page) .section-kicker {
  font-size: 10px;
  letter-spacing: 0.36em;
  margin-bottom: 14px;
}

body:not(.home-page) .page-section {
  position: relative;
}

/* ─── Service intro panels — atelier card feel ────────────────────── */
.service-intro-panel {
  border-radius: 22px !important;
}

.service-intro-aside {
  border-left: 1px solid rgba(201, 169, 110, 0.14);
}

.service-intro-aside__label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lux-bronze);
}

.service-intro-chips li {
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* ─── Closing CTA sections ──────────────────────────────────────── */
.service-close {
  max-width: 720px;
  padding: 48px 0 16px;
}

/* ─── Footer brand lockup — matches nav header ───────────────────── */
.footer-logo .logo-primary {
  font-size: 18px;
  letter-spacing: 0.08em;
}

.footer-logo .logo-secondary {
  font-size: 11px;
  letter-spacing: 0.18em;
}

.footer-tagline {
  max-width: 280px;
  line-height: 1.7;
  font-size: 14px;
}

/* ─── Vision page — align to upholstery palette ─────────────────── */
body.vision-page .vision-section-h2.purple em,
body.vision-page .vision-section-h2.emerald em {
  color: var(--lux-gold) !important;
}

body.vision-page .swatch-purple {
  background: linear-gradient(135deg, #2a2018 0%, #4a3828 100%) !important;
}

body.vision-page .swatch-emerald {
  background: linear-gradient(135deg, #3d2e22 0%, #6b5438 100%) !important;
}

body.vision-page .style-tag.emerald:hover {
  border-color: rgba(201, 169, 110, 0.45) !important;
  color: var(--lux-gold) !important;
}

@media (max-width: 767px) {
  .home-page #hero {
    padding: 120px 20px 72px;
  }

  .home-page .hero-h1 {
    font-size: clamp(38px, 11vw, 56px) !important;
  }

  .home-page .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .home-page .btn-primary {
    width: 100%;
    text-align: center;
  }

  .bento-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* Custom cursor — always above cards, sidebar, and overlays (loads last) */
@media (hover: hover) and (pointer: fine) {
  html > #cursor,
  html > #cursorRing,
  html > .cursor,
  html > .cursor-ring,
  body > #cursor,
  body > #cursorRing,
  body > .cursor,
  body > .cursor-ring {
    position: fixed !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) translateZ(9999px) !important;
    will-change: left, top, transform;
  }

  html > #cursor,
  html > .cursor,
  body > #cursor,
  body > .cursor {
    z-index: 2147483647 !important;
  }

  html > #cursorRing,
  html > .cursor-ring,
  body > #cursorRing,
  body > .cursor-ring {
    z-index: 2147483646 !important;
  }
}

/* Studio sidebar — avoid stacking contexts that cover the cursor */
body:not(.home-page) .studio-sidebar {
  overflow: visible !important;
  isolation: auto !important;
  z-index: auto !important;
  transform: none !important;
  filter: none !important;
}

body:not(.home-page) .studio-sidebar:hover {
  transform: none !important;
  filter: none !important;
}

/* ─── Site-wide nav lockup — dark bar on every page ─────────────── */
body nav .logo-primary,
body nav.scrolled .logo-primary {
  color: #f5f3ef !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

body nav .logo-secondary,
body nav.scrolled .logo-secondary {
  color: #c9a96e !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

body nav,
body nav.scrolled {
  background: rgba(5, 5, 5, 0.72) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.14) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22) !important;
}

body nav.scrolled {
  background: rgba(5, 5, 5, 0.92) !important;
  border-bottom-color: rgba(201, 169, 110, 0.16) !important;
}

body nav .nav-mobile-toggle,
body nav.scrolled .nav-mobile-toggle {
  border-color: rgba(201, 169, 110, 0.45) !important;
  background: rgba(201, 169, 110, 0.1) !important;
  color: #e2c58f !important;
}

/* Nav links — white on dark bar (all pages, including homepage) */
body nav .nav-links a,
body nav.scrolled .nav-links a {
  color: rgba(245, 243, 239, 0.82) !important;
}

body nav .nav-links a:hover,
body nav .nav-links a.is-active,
body nav.scrolled .nav-links a:hover,
body nav.scrolled .nav-links a.is-active {
  color: #ffffff !important;
}

body nav .nav-cta,
body nav.scrolled .nav-cta {
  color: #ffffff !important;
}

/* ─── Site-wide header voice — matches nav logo lockup ──────────── */
.bento-section-h2,
.bento-cell-h2,
.bento-cell-h3,
.section-title-page,
.hero-h1,
.page-hero .hero-h1,
.service-acoustic-hero .hero-h1,
.service-fire-hero .hero-h1 {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bento-section-h2 em,
.bento-cell-h2 em,
.bento-cell-h3 em,
.section-title-page em,
.hero-h1 em,
.page-hero .hero-h1 em,
.service-acoustic-hero .hero-h1 em,
.service-fire-hero .hero-h1 em {
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #c9a96e;
}

.bento-cell-h2,
.bento-cell-h3 {
  color: #f5f3ef;
}

body.home-page .bento-section-h2 {
  color: #1a1814;
}


/* ---- css/desktop-bento.css ---- */
/*
  DESKTOP BENTO GRID — sitewide interior + homepage polish (901px+ only)
  Transforms all interior pages into the homepage bento visual system.
  Mobile layouts are untouched.
*/

@media (min-width: 901px) {

  /* ─── GLOBAL SHELL ─────────────────────────────────────────────── */
  .page-main {
    max-width: var(--max-w, 1680px) !important;
    padding: 0 max(var(--h-pad, 100px), 60px) clamp(96px, 10vh, 132px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-section {
    padding: clamp(48px, 6vh, 80px) 0 !important;
  }

  .page-section:first-of-type {
    padding-top: clamp(56px, 7vh, 80px) !important;
  }

  .page-section--surface,
  .page-section--graphite {
    padding: clamp(56px, 6vw, 80px) clamp(48px, 5vw, 72px) !important;
    border-radius: 24px !important;
    margin-bottom: 0 !important;
  }

  /* 12-column utility for all interior grids */
  .page-grid-2,
  .page-grid-2--wide-left {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
    align-items: start !important;
  }

  .page-grid-2 > * {
    grid-column: span 6 !important;
  }

  .page-grid-2--wide-left > *:first-child {
    grid-column: span 7 !important;
  }

  .page-grid-2--wide-left > *:last-child {
    grid-column: span 5 !important;
  }

  /* ─── SIDEBAR PAGES — bento shell ──────────────────────────────── */
  .page-with-sidebar {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
    max-width: var(--max-w, 1680px) !important;
    margin: 0 auto !important;
    padding: clamp(56px, 7vh, 80px) max(var(--h-pad, 100px), 60px) clamp(96px, 10vh, 132px) !important;
    align-items: start !important;
  }

  .page-with-sidebar .studio-sidebar {
    grid-column: span 3 !important;
    position: sticky !important;
    top: 120px !important;
    max-width: none !important;
    min-height: 280px !important;
    padding: 40px 32px !important;
    border-radius: 24px !important;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(201, 169, 110, 0.12) 0%, transparent 55%),
      linear-gradient(165deg, rgba(28, 24, 20, 0.96) 0%, rgba(14, 12, 10, 0.98) 100%) !important;
    border: 1px solid rgba(201, 169, 110, 0.18) !important;
    box-shadow:
      0 12px 48px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }

  .page-with-sidebar .studio-sidebar-nav {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  .page-with-sidebar .studio-sidebar-link {
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    white-space: normal !important;
  }

  .page-with-sidebar .page-main {
    grid-column: span 9 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  /* ─── MATERIAL / HUB GRIDS ─────────────────────────────────────── */
  .material-tier-grid,
  .studio-hub-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
    margin-top: 48px !important;
  }

  .material-tier,
  .studio-hub-grid .material-tier {
    padding: 48px 40px !important;
    min-height: 280px !important;
    border-radius: 24px !important;
    background:
      radial-gradient(ellipse at 80% 20%, rgba(201, 169, 110, 0.1) 0%, transparent 50%),
      linear-gradient(165deg, rgba(28, 24, 20, 0.94) 0%, rgba(14, 12, 10, 0.97) 100%) !important;
    border: 1px solid rgba(201, 169, 110, 0.16) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
  }

  .material-tier:hover,
  .studio-hub-grid a.material-tier:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(201, 169, 110, 0.32) !important;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.38) !important;
  }

  /* ─── CONTACT PAGE ─────────────────────────────────────────────── */
  .contact-panel {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
    padding: 0 !important;
    flex-direction: unset !important;
  }

  .contact-block {
    grid-column: span 6 !important;
    width: auto !important;
    padding: 56px 48px !important;
    border-radius: 24px !important;
    min-height: 320px !important;
    background:
      radial-gradient(ellipse at 30% 30%, rgba(201, 169, 110, 0.14) 0%, transparent 55%),
      linear-gradient(165deg, rgba(28, 24, 20, 0.96) 0%, rgba(14, 12, 10, 0.98) 100%) !important;
    border: 1px solid rgba(201, 169, 110, 0.18) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.32) !important;
  }

  .contact-hero + .page-main {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
    align-items: stretch !important;
  }

  .contact-hero + .page-main > .page-section {
    grid-column: span 12 !important;
    padding: 0 !important;
  }

  .contact-hero + .page-main > .page-section:nth-child(2),
  .contact-hero + .page-main > .page-section:nth-child(3) {
    grid-column: span 6 !important;
    margin: 0 !important;
  }

  .contact-hero + .page-main > .page-section:nth-child(2).page-section--surface,
  .contact-hero + .page-main > .page-section:nth-child(3).page-section--surface {
    min-height: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* ─── SERVICES PAGE ────────────────────────────────────────────── */
  .services-page .service-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
    margin-top: 48px !important;
  }

  .services-page .service-card {
    min-height: clamp(420px, 28vw, 540px) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(26, 24, 22, 0.08) !important;
    box-shadow: 0 16px 48px rgba(26, 24, 22, 0.1) !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease !important;
  }

  .services-page .service-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 28px 64px rgba(26, 24, 22, 0.14) !important;
  }

  .services-page .service-card__body {
    padding: 36px 36px 40px !important;
  }

  .services-page .services-brand-panel {
    padding: 56px 56px 48px !important;
    border-radius: 24px !important;
  }

  .services-page .services-brand-panel .page-grid-2 > div:first-child {
    grid-column: span 7 !important;
  }

  .services-page .services-brand-panel .page-grid-2 > div:last-child {
    grid-column: span 5 !important;
  }

  .services-brand-chips {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px !important;
    margin-top: 48px !important;
  }

  .services-brand-chip {
    padding: 32px 28px !important;
    border-radius: 20px !important;
    min-height: 120px !important;
  }

  .services-offerings-head {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: end !important;
    gap: 32px !important;
    margin-bottom: 8px !important;
  }

  .services-maint-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 32px !important;
    margin-top: 48px !important;
  }

  .services-maint-step {
    padding: 36px 28px !important;
    border-radius: 20px !important;
    min-height: 200px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .services-maint-step__head {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 14px !important;
  }

  .services-maint-step__num {
    margin-bottom: 0 !important;
    width: 44px !important;
    height: 44px !important;
  }

  .services-page #maintenance-program {
    padding: 64px 64px 56px !important;
    border-radius: 24px !important;
  }

  .services-cta-panel {
    padding: clamp(72px, 7vw, 96px) 64px !important;
    border-radius: 24px !important;
    min-height: 360px !important;
  }

  /* ─── PROCESS TIMELINE — light editorial cards (service pages) ── */
  body.services-page .timeline-deep {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
  }

  body.services-page .timeline-deep-item {
    grid-column: auto !important;
    padding: 30px 28px 32px !important;
    border-radius: 18px !important;
    min-height: 0 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(26, 24, 22, 0.08) !important;
    box-shadow: 0 12px 32px rgba(26, 24, 22, 0.06) !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  }

  body.services-page .timeline-deep-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 40px rgba(26, 24, 22, 0.09) !important;
  }

  body.services-page .timeline-deep-item::before {
    display: none !important;
  }

  body.services-page .timeline-deep-item h3 {
    color: #1a1814 !important;
  }

  body.services-page .timeline-deep-item p {
    color: rgba(26, 24, 22, 0.68) !important;
  }

  body.services-page .timeline-deep-item .tl-meta {
    color: #7a6038 !important;
    background: rgba(201, 169, 110, 0.14) !important;
    border: 1px solid rgba(201, 169, 110, 0.22) !important;
  }

  .interior-reading-panel,
  .studio-visit-panel {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
    align-items: center !important;
  }

  .studio-visit-panel__copy {
    grid-column: span 7 !important;
  }

  .studio-visit-panel__list {
    grid-column: span 5 !important;
  }

  /* ─── SERVICE DETAIL PAGES ─────────────────────────────────────── */
  .service-intro-panel {
    padding: 56px 56px !important;
    border-radius: 24px !important;
  }

  .service-intro-panel__layout {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
    margin-top: 32px !important;
  }

  .service-intro-panel__copy {
    grid-column: span 7 !important;
  }

  .service-intro-aside {
    grid-column: span 5 !important;
    padding: 36px 32px !important;
    border-radius: 20px !important;
  }

  .booth-materials__grid,
  .fire-materials__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
    margin-top: 48px !important;
  }

  .booth-materials__card,
  .fire-materials__card {
    border-radius: 24px !important;
    overflow: hidden !important;
    min-height: 420px !important;
    border: 1px solid rgba(26, 24, 22, 0.08) !important;
    box-shadow: 0 16px 48px rgba(26, 24, 22, 0.1) !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
  }

  .booth-materials__card:hover,
  .fire-materials__card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 24px 56px rgba(26, 24, 22, 0.14) !important;
  }

  .acoustic-compare__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 48px !important;
    margin-top: 48px !important;
  }

  .acoustic-compare__card {
    padding: 48px 44px !important;
    border-radius: 24px !important;
    min-height: 360px !important;
  }

  .booth-showcase,
  .fire-showcase,
  .acoustic-showcase {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
    align-items: center !important;
  }

  .booth-showcase__copy,
  .fire-showcase__copy,
  .acoustic-showcase__copy {
    grid-column: span 5 !important;
  }

  .booth-showcase__figure,
  .fire-showcase__figure,
  .acoustic-showcase__figure {
    grid-column: span 7 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .fire-process,
  .service-fire-services__grid,
  .service-acoustic-services__grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
    align-items: start !important;
  }

  .fire-process__visual {
    grid-column: span 5 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .fire-process__content,
  .service-fire-services__primary,
  .service-fire-services__secondary,
  .service-acoustic-services__primary,
  .service-acoustic-services__secondary {
    grid-column: span 6 !important;
  }

  /* Service hero feature bars → bento stat row */
  .service-booth-feature-bar,
  .service-fire-feature-bar,
  .service-acoustic-feature-bar {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px !important;
    max-width: var(--max-w, 1680px) !important;
    margin: 0 auto !important;
    padding: 32px max(var(--h-pad, 100px), 60px) 48px !important;
  }

  /* Fire hero CTAs → SAFETY/CARE/FINISH row breathing room */
  .services-page--fire .service-fire-feature-bar {
    margin-top: clamp(48px, 5vh, 64px) !important;
  }

  .service-booth-feature-bar__item,
  .service-fire-feature-bar__item,
  .service-acoustic-feature-bar__item {
    padding: 36px 32px !important;
    border-radius: 20px !important;
    text-align: center !important;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(201, 169, 110, 0.12) 0%, transparent 55%),
      linear-gradient(165deg, rgba(28, 24, 20, 0.92) 0%, rgba(14, 12, 10, 0.96) 100%) !important;
    border: 1px solid rgba(201, 169, 110, 0.16) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28) !important;
  }

  /* Dark bento cards — gold headings + ivory labels (WCAG AA on ~#1c1814) */
  .service-booth-feature-bar__val,
  .service-fire-feature-bar__val,
  .service-acoustic-feature-bar__val,
  .services-page--fire .service-fire-feature-bar__val,
  .services-page--booth .service-booth-feature-bar__val,
  .services-page--acoustic .service-acoustic-feature-bar__val {
    color: #c9a96e !important;
  }

  .service-booth-feature-bar__lbl,
  .service-fire-feature-bar__lbl,
  .service-acoustic-feature-bar__lbl {
    color: rgba(245, 243, 239, 0.9) !important;
  }

  .service-close,
  .service-fire-close,
  .service-acoustic-close {
    padding: 64px 56px !important;
    border-radius: 24px !important;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(201, 169, 110, 0.1) 0%, transparent 55%),
      linear-gradient(165deg, rgba(28, 24, 20, 0.94) 0%, rgba(14, 12, 10, 0.97) 100%) !important;
    border: 1px solid rgba(201, 169, 110, 0.14) !important;
  }

  .service-close .section-title-page,
  .service-fire-close .section-title-page,
  .service-acoustic-close .section-title-page {
    color: #f5f3ef !important;
  }

  .service-close .section-title-page em,
  .service-fire-close .section-title-page em,
  .service-acoustic-close .section-title-page em {
    color: #c9a96e !important;
  }

  .service-close .prose,
  .service-close .prose p,
  .service-fire-close .prose,
  .service-fire-close .prose p,
  .service-acoustic-close .prose,
  .service-acoustic-close .prose p {
    color: rgba(245, 243, 239, 0.78) !important;
  }

  .service-close .btn-outline-large,
  .service-fire-close .btn-outline-large,
  .service-acoustic-close .btn-outline-large {
    color: #f5f3ef !important;
    border-color: rgba(201, 169, 110, 0.55) !important;
  }

  .service-close .btn-outline-large:hover,
  .service-fire-close .btn-outline-large:hover,
  .service-acoustic-close .btn-outline-large:hover {
    color: #050505 !important;
    background: #c9a96e !important;
    border-color: #c9a96e !important;
  }

  .service-related-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .service-related-nav a {
    justify-content: center !important;
    width: 100% !important;
  }

  /* ─── VISION PAGE ──────────────────────────────────────────────── */
  .vision-wrap {
    max-width: var(--max-w, 1680px) !important;
    margin: 0 auto !important;
    padding: 0 max(var(--h-pad, 100px), 60px) clamp(96px, 10vh, 132px) !important;
  }

  .objective-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
  }

  .objective-card {
    padding: 40px 36px !important;
    border-radius: 24px !important;
    min-height: 200px !important;
  }

  .env-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
  }

  .env-card {
    border-radius: 24px !important;
    min-height: 320px !important;
    overflow: hidden !important;
  }

  .tech-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 32px !important;
  }

  .tech-cell {
    padding: 36px 28px !important;
    border-radius: 20px !important;
    min-height: 180px !important;
  }

  .production-cols {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
  }

  .deliverables-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 32px !important;
  }

  .palette-row {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
    align-items: start !important;
  }

  /* ─── HOMEPAGE — enhanced desktop bento rhythm ───────────────── */
  body.home-page .bento-section {
    max-width: var(--max-w, 1680px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: max(var(--h-pad, 100px), 60px) !important;
    padding-right: max(var(--h-pad, 100px), 60px) !important;
  }

  body.home-page #metrics .bento-grid-12 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
    align-items: stretch !important;
  }

  body.home-page #metrics .bento-stat-cell,
  body.home-page #metrics .bento-grid-12 .col-4 {
    grid-column: span 1 !important;
  }

  body.home-page #metrics .bento-stat-cell {
    min-height: 380px !important;
  }

  body.home-page .bento-workshop-actions,
  body.home-page .bento-section-actions {
    justify-content: center !important;
    flex-direction: row !important;
  }

  /* ─── SECTION TYPOGRAPHY — desktop scale ─────────────────────── */
  .section-title-page {
    font-size: clamp(40px, 4vw, 64px) !important;
    line-height: 0.95 !important;
  }

  .section-kicker {
    font-size: 11px !important;
    letter-spacing: 0.32em !important;
    margin-bottom: 16px !important;
  }

  .prose,
  .prose p {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  .page-with-sidebar .studio-sidebar-link {
    font-size: 16px !important;
    padding: 12px 16px !important;
  }

  /* Homepage — force 3-up rows inline */
  body.home-page #philosophy .bento-grid-12 {
    grid-template-columns: repeat(12, 1fr) !important;
  }

  body.home-page #philosophy .philosophy-hero-cell {
    grid-column: span 12 !important;
  }

  body.home-page #philosophy .bento-cell:not(.philosophy-hero-cell) {
    grid-column: span 4 !important;
  }

  body.home-page #projects .bento-grid-12 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.home-page #projects .bento-project-cell {
    grid-column: span 1 !important;
  }

  body.home-page #workshop .bento-grid-12 {
    grid-template-columns: repeat(12, 1fr) !important;
  }

  body.home-page #workshop .workshop-founder-cell {
    grid-column: span 4 !important;
    grid-row: span 2 !important;
  }

  body.home-page #workshop .bento-cell.glass-purple.col-8 {
    grid-column: span 8 !important;
  }

  body.home-page #workshop .workshop-fr-photo-cell,
  body.home-page #workshop .workshop-theater-photo-cell {
    grid-column: span 4 !important;
  }

  /* ─── WORKSHOP / TEAM VISUALS ────────────────────────────────── */
  .page-section:has(.workshop-visual) {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
    align-items: start !important;
  }

  .workshop-visual {
    grid-column: span 4 !important;
    max-width: none !important;
    display: block !important;
  }

  .workshop-main-box {
    border-radius: 24px !important;
    min-height: 400px !important;
  }

  .workshop-qualities {
    grid-column: span 8 !important;
    margin-top: 0 !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-self: center !important;
  }

  .page-section:has(.workshop-visual) > .prose {
    grid-column: span 12 !important;
    margin-top: 0 !important;
  }

  .quality-item {
    padding: 28px 24px !important;
    border-radius: 20px !important;
    min-height: 0 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

}

/* Medium desktop — 901–1280px refinements */
@media (min-width: 901px) and (max-width: 1280px) {
  body.home-page #metrics .bento-grid-12,
  body.home-page #projects .bento-grid-12 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.home-page #metrics .bento-stat-cell,
  body.home-page #metrics .col-4,
  body.home-page #projects .bento-project-cell {
    grid-column: span 1 !important;
  }

  body.home-page #philosophy .bento-grid-12,
  body.home-page #workshop .bento-grid-12 {
    grid-template-columns: repeat(12, 1fr) !important;
  }

  body.home-page #philosophy .bento-cell:not(.philosophy-hero-cell) {
    grid-column: span 4 !important;
  }

  body.home-page #workshop .workshop-founder-cell {
    grid-column: span 4 !important;
    grid-row: span 2 !important;
  }

  body.home-page #workshop .bento-cell.glass-purple.col-8 {
    grid-column: span 8 !important;
  }

  body.home-page #workshop .workshop-fr-photo-cell,
  body.home-page #workshop .workshop-theater-photo-cell {
    grid-column: span 4 !important;
  }

  body.services-page .services-maint-bento {
    grid-template-columns: repeat(12, 1fr) !important;
    gap: var(--grid-gap, 34px) !important;
  }

  body.services-page .services-maint-bento .services-maint-step.col-4 {
    grid-column: span 4 !important;
  }

  body.services-page .services-maint-bento .services-maint-step.col-6 {
    grid-column: span 6 !important;
  }

  .tech-grid,
  .deliverables-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .page-with-sidebar .studio-sidebar {
    grid-column: span 4 !important;
  }

  .page-with-sidebar .page-main {
    grid-column: span 8 !important;
  }
}

/* ─── SITE-WIDE NAV — white text on dark header bar ──────────────── */
html body nav .nav-links a,
html body nav.scrolled .nav-links a {
  color: rgba(245, 243, 239, 0.82) !important;
}

html body nav .nav-links a:hover,
html body nav .nav-links a.is-active,
html body nav.scrolled .nav-links a:hover,
html body nav.scrolled .nav-links a.is-active {
  color: #ffffff !important;
}

html body nav .nav-cta,
html body nav.scrolled .nav-cta {
  color: #ffffff !important;
  background: linear-gradient(135deg, #c9a96e 0%, #a8864a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

html body nav .nav-cta:hover,
html body nav.scrolled .nav-cta:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #d4b87a 0%, #b89455 100%) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

@media (min-width: 901px) {
  .page-with-sidebar .studio-sidebar-kicker {
    color: rgba(201, 169, 110, 0.9) !important;
  }

  .page-with-sidebar .studio-sidebar-link {
    color: rgba(245, 243, 239, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  .page-with-sidebar .studio-sidebar-link:hover,
  .page-with-sidebar .studio-sidebar-link.is-current {
    color: #ffffff !important;
    background: rgba(201, 169, 110, 0.14) !important;
    border-color: rgba(201, 169, 110, 0.35) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP HEADER TYPOGRAPHY — logo-matched DM Serif Display (901px+)
   Primary: uppercase warm white · Accent em: gold italic serif
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
  :root {
    --header-type-scale: 1;
    --header-space-scale: 1;
    --header-white: #f5f3ef;
    --header-gold: #c9a96e;
    --header-gold-soft: #c1a57b;
    --header-serif: "DM Serif Display", Georgia, serif;
  }

  .bento-section-h2,
  .bento-section-header .bento-section-h2,
  .bento-cell-h2,
  .bento-section-header .bento-cell-h2,
  .bento-cell-h3,
  .section-title-page,
  .page-hero .hero-h1,
  .service-acoustic-hero .hero-h1,
  .service-fire-hero .hero-h1,
  .vision-hero .hero-h1 {
    font-family: var(--header-serif) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    line-height: 0.92 !important;
  }

  body.home-page #hero .hero-h1,
  #hero .hero-h1 {
    font-family: "Bebas Neue", sans-serif !important;
    letter-spacing: 0.02em !important;
    line-height: 0.9 !important;
    text-transform: uppercase !important;
  }

  .bento-section-h2,
  .bento-section-header .bento-section-h2,
  .bento-cell-h2,
  .bento-section-header .bento-cell-h2,
  .bento-cell-h3 {
    color: var(--header-white) !important;
  }

  body.home-page .bento-section-h2,
  body.home-page .bento-section-header .bento-section-h2 {
    color: #1a1814 !important;
  }

  body.interior-page .section-title-page,
  body.services-page .section-title-page {
    color: var(--lux-charcoal, #1a1814) !important;
  }

  body:not(.interior-page):not(.services-page) .page-section--graphite .section-title-page {
    color: #ffffff !important;
  }

  /* Ivory card panels on interior pages — dark text, not hero white */
  body.interior-page .page-section--surface .section-kicker,
  body.interior-page .page-section--graphite .section-kicker {
    color: var(--lux-bronze, #9a7b5f) !important;
  }

  body.interior-page .page-section--surface .section-title-page,
  body.interior-page .page-section--graphite .section-title-page {
    color: var(--lux-charcoal, #1a1814) !important;
  }

  body.interior-page .page-section--surface .section-title-page em,
  body.interior-page .page-section--graphite .section-title-page em {
    color: var(--lux-gold, #c9a96e) !important;
  }

  body.interior-page .page-section--surface .prose,
  body.interior-page .page-section--graphite .prose,
  body.interior-page .page-section--surface .prose p,
  body.interior-page .page-section--graphite .prose p,
  body.interior-page .page-section--surface .prose strong,
  body.interior-page .page-section--graphite .prose strong {
    color: var(--lux-charcoal, #1a1814) !important;
  }

  body.interior-page .page-hero .hero-h1,
  body.interior-page .studio-hero .hero-h1,
  body.interior-page .process-hero .hero-h1,
  body.interior-page .contact-hero .hero-h1,
  body.interior-page .team-hero .hero-h1 {
    color: var(--lux-charcoal, #1a1814) !important;
  }

  body.home-page #hero .hero-h1,
  #hero .hero-h1 {
    color: var(--header-white) !important;
  }

  .bento-section-h2 em,
  .bento-section-h2 em.em,
  .bento-section-h2 em.gd,
  .bento-cell-h2 em,
  .bento-cell-h2 em.em,
  .bento-cell-h2 em.gd,
  .bento-cell-h3 em,
  .section-title-page em,
  .hero-h1 em,
  .page-hero .hero-h1 em,
  body.home-page #hero .hero-h1 em,
  #hero .hero-h1 em,
  .service-acoustic-hero .hero-h1 em,
  .service-fire-hero .hero-h1 em,
  .vision-hero .hero-h1 em {
    font-family: var(--header-serif) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: 0.12em !important;
    color: var(--header-gold) !important;
    text-transform: uppercase !important;
  }

  .bento-section-h2 em.em,
  .bento-cell-h2 em.em {
    color: #9a7b5f !important;
  }

  .bento-section-h2 em.gd,
  .bento-cell-h2 em.gd {
    color: var(--header-gold-soft) !important;
  }

  .bento-section-h2,
  .bento-section-header .bento-section-h2 {
    font-size: clamp(36px, 4.5vw, 64px) !important;
  }

  .bento-cell-h2,
  .bento-section-header .bento-cell-h2,
  .bento-cta-main .bento-cell-h2 {
    font-size: clamp(36px, 4vw, 64px) !important;
    margin-bottom: 16px !important;
  }

  .bento-cell-h3 {
    font-size: clamp(22px, 2.5vw, 36px) !important;
    margin-bottom: 12px !important;
  }

  .section-title-page,
  body.interior-page .section-title-page,
  body.services-page .section-title-page {
    font-size: clamp(34px, 4.8vw, 58px) !important;
    margin-bottom: 20px !important;
  }

  body.home-page #hero .hero-h1,
  #hero .hero-h1 {
    font-size: clamp(64px, 8vw, 120px) !important;
  }

  .page-hero .hero-h1,
  .service-acoustic-hero .hero-h1,
  .service-fire-hero .hero-h1,
  .vision-hero .hero-h1 {
    font-size: clamp(48px, 6.5vw, 96px) !important;
  }

  .page-hero .hero-h1,
  body.interior-page .studio-hero .hero-h1,
  body.interior-page .page-hero .hero-h1 {
    font-size: clamp(48px, 6vw, 88px) !important;
  }

  .bento-section-header {
    margin-bottom: 80px !important;
    max-width: min(100%, 96rem) !important;
  }

  .bento-section-kicker,
  .section-kicker {
    font-family: "DM Mono", monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.32em !important;
    margin-bottom: 14px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PRESTIGE DESKTOP SYSTEM — expert luxury upholstery UI (901px+)
   Editorial rhythm · warm charcoal glass · champagne gold accents
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
  :root {
    --prestige-ivory: #faf9f7;
    --prestige-charcoal: #0a0908;
    --prestige-warm: #1a1814;
    --prestige-gold: #c9a96e;
    --prestige-bronze: #9a7b5f;
    --prestige-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --prestige-radius: 24px;
    --prestige-gap: 48px;
  }

  /* ─── NAV — contained editorial bar ───────────────────────────── */
  html body nav,
  html body nav.scrolled {
    padding-left: max(var(--h-pad, 100px), 72px) !important;
    padding-right: max(var(--h-pad, 100px), 72px) !important;
  }

  html body nav .nav-links {
    gap: 32px !important;
  }

  html body nav .nav-links a {
    letter-spacing: 0.22em !important;
    font-size: 14px !important;
  }

  html body nav .nav-cta {
    border-radius: 999px !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    padding: 12px 26px !important;
  }

  /* ─── HERO — cinematic editorial column ───────────────────────── */
  body.home-page #hero {
    padding:
      clamp(148px, 15vh, 188px)
      max(var(--h-pad, 100px), 72px)
      clamp(108px, 12vh, 148px) !important;
    justify-content: flex-end !important;
  }

  body.home-page #hero .hero-tag {
    font-size: 10px !important;
    letter-spacing: 0.38em !important;
    margin-bottom: 18px !important;
    color: rgba(201, 169, 110, 0.92) !important;
  }

  body.home-page #hero .hero-h1,
  #hero .hero-h1 {
    font-size: clamp(56px, 5.4vw, 92px) !important;
    max-width: 12ch !important;
    line-height: 0.9 !important;
    letter-spacing: 0.06em !important;
  }

  body.home-page #hero .hero-sub,
  #hero .hero-sub {
    font-size: 16px !important;
    line-height: 1.82 !important;
    max-width: 42ch !important;
    margin-top: 32px !important;
    color: rgba(245, 243, 239, 0.78) !important;
  }

  body.home-page #hero .hero-actions {
    margin-top: 48px !important;
    gap: 20px 32px !important;
  }

  body.home-page #hero .hero-year {
    font-size: 10px !important;
    letter-spacing: 0.34em !important;
    color: rgba(245, 243, 239, 0.38) !important;
  }

  body.home-page #hero .hero-scroll-hint {
    right: max(var(--h-pad, 100px), 72px) !important;
    letter-spacing: 0.28em !important;
  }

  /* ─── MARQUEE — refined prestige strip ────────────────────────── */
  body.home-page .bento-marquee {
    padding: 22px 0 !important;
    border-top: 1px solid rgba(201, 169, 110, 0.14) !important;
    border-bottom: 1px solid rgba(201, 169, 110, 0.14) !important;
  }

  body.home-page .bento-marquee .marquee-item {
    letter-spacing: 0.22em !important;
    color: rgba(240, 234, 224, 0.72) !important;
  }

  /* ─── SECTION CANVAS — dark / ivory alternation ───────────────── */
  body.home-page #philosophy.bento-section {
    background:
      radial-gradient(ellipse at 82% 14%, rgba(154, 123, 95, 0.12) 0%, transparent 48%),
      radial-gradient(ellipse at 8% 88%, rgba(107, 58, 50, 0.08) 0%, transparent 42%),
      var(--prestige-charcoal) !important;
    padding-top: clamp(112px, 13vh, 168px) !important;
    padding-bottom: clamp(96px, 11vh, 140px) !important;
  }

  body.home-page #metrics.bento-section {
    background:
      radial-gradient(ellipse at 100% 0%, rgba(201, 169, 110, 0.08) 0%, transparent 42%),
      #f7f5f0 !important;
  }

  body.home-page #projects.bento-section {
    background:
      radial-gradient(ellipse at 0% 100%, rgba(154, 123, 95, 0.06) 0%, transparent 40%),
      var(--prestige-ivory) !important;
    padding-top: clamp(112px, 13vh, 168px) !important;
    padding-bottom: clamp(96px, 11vh, 140px) !important;
  }

  body.home-page #workshop.bento-section {
    background:
      radial-gradient(ellipse at 72% 18%, rgba(201, 169, 110, 0.1) 0%, transparent 50%),
      radial-gradient(ellipse at 12% 82%, rgba(107, 58, 50, 0.08) 0%, transparent 44%),
      var(--prestige-charcoal) !important;
    padding-top: clamp(112px, 13vh, 168px) !important;
    padding-bottom: clamp(96px, 11vh, 140px) !important;
  }

  body.home-page #cta.bento-section {
    background:
      radial-gradient(ellipse at 50% 0%, rgba(201, 169, 110, 0.1) 0%, transparent 55%),
      var(--prestige-ivory) !important;
    padding-top: clamp(80px, 9vh, 120px) !important;
    padding-bottom: clamp(96px, 11vh, 140px) !important;
  }

  /* ─── BENTO CELLS — restrained luxury hover ───────────────────── */
  body.home-page .bento-cell:not(.no-accent):hover,
  body.home-page .bento-project-cell:hover {
    transform: translateY(-6px) !important;
    filter: brightness(1.04) !important;
    border-color: rgba(201, 169, 110, 0.28) !important;
    box-shadow:
      0 28px 72px rgba(0, 0, 0, 0.48),
      0 0 48px rgba(201, 169, 110, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }

  body.home-page #metrics .bento-stat-cell:hover {
    transform: translateY(-5px) !important;
    filter: none !important;
    border-color: rgba(201, 169, 110, 0.36) !important;
    box-shadow:
      0 16px 48px rgba(26, 24, 22, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  }

  /* ─── PHILOSOPHY — editorial hero row ─────────────────────────── */
  body.home-page #philosophy .philosophy-hero-cell.bento-cell {
    min-height: clamp(400px, 44vh, 560px) !important;
    border-radius: var(--prestige-radius) !important;
    border: 1px solid rgba(201, 169, 110, 0.14) !important;
  }

  body.home-page #philosophy .philosophy-hero-body .bento-cell-h2 {
    font-size: clamp(40px, 3.8vw, 72px) !important;
    max-width: 14ch !important;
  }

  body.home-page #philosophy .bento-cell:not(.philosophy-hero-cell) {
    min-height: 280px !important;
  }

  /* ─── METRICS — editorial stat treatment ──────────────────────── */
  body.home-page #metrics .bento-stat-cell {
    min-height: 400px !important;
    border-radius: var(--prestige-radius) !important;
    padding: 56px 48px !important;
  }

  body.home-page #metrics .bento-cell-num {
    font-family: "DM Serif Display", Georgia, serif !important;
    font-size: clamp(88px, 8vw, 140px) !important;
    line-height: 0.88 !important;
    letter-spacing: 0.02em !important;
  }

  /* ─── PROJECTS — cinematic 3-up showcase ──────────────────────── */
  body.home-page #projects .bento-section-header {
    max-width: 68ch !important;
    margin-bottom: 72px !important;
  }

  body.home-page #projects .bento-section-h2 {
    font-size: clamp(40px, 4.2vw, 72px) !important;
    color: var(--prestige-warm) !important;
  }

  body.home-page #projects .bento-section-h2 em {
    color: var(--prestige-gold) !important;
  }

  body.home-page #projects .bento-project-cell {
    min-height: clamp(480px, 34vw, 620px) !important;
    border-radius: var(--prestige-radius) !important;
    overflow: hidden !important;
    cursor: pointer;
    transition:
      transform 0.55s var(--prestige-ease),
      box-shadow 0.55s var(--prestige-ease),
      border-color 0.55s var(--prestige-ease) !important;
  }

  body.home-page #projects .bento-project-cell .bento-card-video {
    transition: transform 0.9s var(--prestige-ease) !important;
  }

  body.home-page #projects .bento-project-cell:hover .bento-card-video {
    transform: scale(1.06) !important;
  }

  body.home-page #projects .bento-project-arrow {
    opacity: 0.55 !important;
    transition: transform 0.45s var(--prestige-ease), opacity 0.45s var(--prestige-ease) !important;
  }

  body.home-page #projects .bento-project-cell:hover .bento-project-arrow {
    opacity: 1 !important;
    transform: translate(6px, -6px) !important;
  }

  body.home-page #projects .bento-project-name {
    font-family: "DM Serif Display", Georgia, serif !important;
    font-size: clamp(28px, 2.2vw, 40px) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  body.home-page #projects .bento-project-cell {
    align-items: flex-start !important;
    padding: 0 !important;
    text-align: left !important;
  }

  body.home-page #projects .bento-project-overlay {
    background: linear-gradient(
      0deg,
      rgba(5, 5, 12, 0.82) 0%,
      rgba(5, 5, 12, 0.48) 44%,
      rgba(5, 5, 12, 0.14) 72%,
      transparent 100%
    ) !important;
  }

  body.home-page #projects .bento-project-body,
  body.home-page #projects .bento-project-cat,
  body.home-page #projects .bento-project-name,
  body.home-page #projects .bento-project-detail {
    text-align: left !important;
  }

  body.home-page #projects .bento-project-body {
    width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  body.home-page #projects .bento-section-actions {
    margin-top: 56px !important;
    gap: 18px !important;
  }

  /* ─── WORKSHOP — asymmetric magazine bento ────────────────────── */
  body.home-page #workshop .workshop-founder-cell.bento-cell {
    min-height: clamp(580px, 52vh, 720px) !important;
    border-radius: var(--prestige-radius) !important;
    border: 1px solid rgba(201, 169, 110, 0.12) !important;
  }

  body.home-page #workshop .bento-cell.glass-purple.col-8 {
    min-height: 340px !important;
  }

  body.home-page #workshop .workshop-fr-photo-cell,
  body.home-page #workshop .workshop-theater-photo-cell {
    min-height: 320px !important;
    border-radius: var(--prestige-radius) !important;
    border: 1px solid rgba(201, 169, 110, 0.1) !important;
  }

  body.home-page .bento-workshop-actions {
    margin-top: 56px !important;
    gap: 18px !important;
  }

  /* ─── CTA — grand centerpiece ─────────────────────────────────── */
  body.home-page .bento-cta-main {
    border-radius: var(--prestige-radius) !important;
    padding: clamp(88px, 9vw, 128px) 72px !important;
    min-height: 460px !important;
    border: 1px solid rgba(201, 169, 110, 0.18) !important;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(201, 169, 110, 0.16) 0%, transparent 58%),
      linear-gradient(165deg, rgba(22, 20, 18, 0.98) 0%, rgba(8, 7, 6, 0.99) 100%) !important;
    box-shadow:
      0 24px 80px rgba(0, 0, 0, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }

  body.home-page .bento-cta-main .bento-cell-h2 {
    font-size: clamp(44px, 4.5vw, 80px) !important;
    max-width: 14ch !important;
  }

  body.home-page .bento-cta-main .bento-cell-body {
    font-size: 20px !important;
    line-height: 1.75 !important;
    max-width: 52ch !important;
    color: rgba(245, 243, 239, 0.72) !important;
  }

  body.home-page .bento-cta-actions .btn-large,
  body.home-page .bento-cta-actions .btn-outline-large {
    font-size: 14px !important;
    padding: 20px 48px !important;
  }

  /* ─── FOOTER — magazine lockup on homepage ────────────────────── */
  body.home-page footer {
    background: var(--prestige-ivory) !important;
    border-top: 1px solid rgba(201, 169, 110, 0.14) !important;
    padding-top: 96px !important;
  }

  body.home-page .footer-top {
    grid-template-columns: 1.6fr 1fr 1fr 1fr !important;
    gap: 56px 72px !important;
  }

  body.home-page .footer-brand {
    text-align: left !important;
  }

  body.home-page .footer-tagline {
    margin-left: 0 !important;
    text-align: left !important;
  }

  /* ─── INTERIOR PAGES — ivory editorial polish ─────────────────── */
  body:not(.home-page) .page-hero,
  body:not(.home-page) .services-hero,
  body:not(.home-page) .contact-hero,
  body:not(.home-page) .process-hero,
  body:not(.home-page) .studio-hero,
  body:not(.home-page) .team-hero {
    min-height: 62vh !important;
    padding-bottom: clamp(64px, 8vh, 96px) !important;
  }

  body:not(.home-page) .page-hero .hero-h1,
  body:not(.home-page) .studio-hero .hero-h1,
  body:not(.home-page) .process-hero .hero-h1,
  body:not(.home-page) .contact-hero .hero-h1 {
    font-size: clamp(52px, 6.5vw, 96px) !important;
    max-width: 14ch !important;
  }

  body:not(.home-page) .page-section--surface,
  body:not(.home-page) .page-section--graphite {
    border-radius: var(--prestige-radius) !important;
    box-shadow: 0 20px 56px rgba(26, 24, 22, 0.08) !important;
  }

  body:not(.home-page) .services-page .service-card {
    border-radius: var(--prestige-radius) !important;
  }

  body:not(.home-page) .services-page .service-card:hover {
    border-color: rgba(201, 169, 110, 0.28) !important;
  }

  /* Services page — bento sections on ivory canvas */
  body.services-page .bento-section {
    background: transparent !important;
    padding-top: clamp(64px, 8vh, 96px) !important;
    padding-bottom: clamp(64px, 8vh, 96px) !important;
  }

  body.services-page .bento-section-header .bento-section-h2,
  body.services-page .services-brand-bento .bento-section-h2 {
    color: var(--prestige-warm, #1a1814) !important;
  }

  body.services-page .services-brand-bento .bento-section-h2 em {
    color: var(--prestige-gold, #c9a96e) !important;
  }

  body.services-page .service-cards-bento {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
  }

  body.services-page .service-bento-cell.bento-project-cell {
    position: relative !important;
    min-height: clamp(420px, 28vw, 540px) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(26, 24, 22, 0.08) !important;
    box-shadow: 0 16px 48px rgba(26, 24, 22, 0.1) !important;
    cursor: pointer;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease !important;
  }

  body.services-page .service-bento-cell.bento-project-cell:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 28px 64px rgba(26, 24, 22, 0.14) !important;
  }

  body.services-page .service-bento-cell .bento-project-body {
    position: relative !important;
    z-index: 2 !important;
  }

  body.services-page .service-bento-cell .service-card__link {
    color: #f5f3ef !important;
    border-bottom-color: rgba(245, 243, 239, 0.35) !important;
  }

  body.services-page .services-maint-bento {
    grid-template-columns: repeat(12, 1fr) !important;
    gap: var(--grid-gap, 34px) !important;
  }

  body.services-page .services-maint-bento .services-maint-step.col-4 {
    grid-column: span 4 !important;
  }

  body.services-page .services-maint-bento .services-maint-step.col-6 {
    grid-column: span 6 !important;
  }

  body.services-page .services-maint-bento .bento-cell {
    min-height: 200px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(26, 24, 22, 0.08) !important;
    box-shadow: 0 12px 32px rgba(26, 24, 22, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 36px 32px !important;
  }

  body.services-page .services-maint-bento .services-maint-step__head {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 14px !important;
  }

  body.services-page .services-maint-bento .services-maint-step__num {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 0 !important;
    font-size: 11px !important;
  }

  body.services-page .services-maint-bento .bento-cell-h3,
  body.services-page .services-maint-bento h3 {
    font-family: "Outfit", sans-serif !important;
    font-size: clamp(16px, 1.4vw, 18px) !important;
    font-weight: 500 !important;
    color: #1a1814 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }

  body.services-page .services-maint-bento .bento-cell-body,
  body.services-page .services-maint-bento p {
    font-size: 14px !important;
    line-height: 1.75 !important;
    color: rgba(26, 24, 22, 0.68) !important;
    margin: 0 !important;
  }

  body.services-page .services-brand-chip-cell {
    min-height: 160px !important;
  }

  body.services-page .services-brand-chip-cell .bento-cell-h3 {
    font-size: clamp(20px, 2vw, 28px) !important;
    color: #1a1814 !important;
  }

  body.services-page .services-brand-chip-cell .bento-cell-body {
    color: rgba(26, 24, 22, 0.72) !important;
  }
}

/* Wide desktop — 1440px+ breathing room */
@media (min-width: 1440px) {
  :root {
    --h-pad: 120px;
    --grid-gap: 56px;
  }

  body.home-page .bento-section {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }

  html body nav .nav-links {
    gap: 40px !important;
  }

  body.home-page #hero .hero-h1 {
    font-size: clamp(64px, 5vw, 96px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   INTERIOR SIDEBAR PAGES — studio / team / process (901px+)
   Fixes ghost sidebar nav, hero rhythm, and body type scale
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
  body.interior-page .page-hero,
  body.interior-page .studio-hero,
  body.interior-page .process-hero,
  body.interior-page .team-hero,
  body.interior-page .contact-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: calc(var(--nav-offset, 88px) + var(--hero-clearance, 56px)) !important;
    padding-left: max(var(--h-pad, 100px), clamp(48px, 5vw, 88px)) !important;
    padding-right: max(var(--h-pad, 100px), clamp(48px, 5vw, 88px)) !important;
    padding-bottom: clamp(40px, 5vh, 64px) !important;
    box-sizing: border-box !important;
  }

  body.interior-page .page-hero .hero-tag,
  body.interior-page .studio-hero .hero-tag,
  body.interior-page .process-hero .hero-tag,
  body.interior-page .team-hero .hero-tag,
  body.interior-page .contact-hero .hero-tag {
    font-family: "DM Mono", monospace !important;
    font-size: clamp(10px, 0.75vw, 12px) !important;
    letter-spacing: 0.28em !important;
    margin-bottom: 18px !important;
  }

  body.interior-page .page-hero .hero-h1,
  body.interior-page .studio-hero .hero-h1,
  body.interior-page .process-hero .hero-h1,
  body.interior-page .team-hero .hero-h1,
  body.interior-page .contact-hero .hero-h1 {
    font-size: clamp(48px, 5.8vw, 88px) !important;
    max-width: min(820px, 72vw) !important;
    margin: 0 !important;
  }

  body.interior-page .page-hero .hero-sub,
  body.interior-page .studio-hero .hero-sub,
  body.interior-page .process-hero .hero-sub,
  body.interior-page .team-hero .hero-sub,
  body.interior-page .contact-hero .hero-sub {
    margin-top: 24px !important;
    max-width: min(600px, 54ch) !important;
    font-size: clamp(18px, 1.25vw, 22px) !important;
    line-height: 1.65 !important;
  }

  body.interior-page .page-hero + .page-with-sidebar {
    padding-top: clamp(24px, 3vh, 40px) !important;
  }

  body.interior-page .page-with-sidebar {
    gap: clamp(32px, 4vw, 48px) !important;
    align-items: start !important;
  }

  body.interior-page .page-with-sidebar .studio-sidebar {
    position: sticky !important;
    top: calc(var(--nav-offset, 88px) + 24px) !important;
    align-self: start !important;
    min-height: 0 !important;
    padding: 32px 28px !important;
    background:
      radial-gradient(ellipse at 96% 4%, rgba(201, 169, 110, 0.08) 0%, transparent 46%),
      linear-gradient(160deg, #ffffff 0%, #faf8f4 100%) !important;
    border: 1px solid rgba(201, 169, 110, 0.16) !important;
    box-shadow: 0 12px 36px rgba(26, 24, 22, 0.06) !important;
  }

  body.interior-page .page-with-sidebar .studio-sidebar-nav {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.interior-page .page-with-sidebar .studio-sidebar-kicker {
    margin-bottom: 20px !important;
    font-size: clamp(10px, 0.75vw, 12px) !important;
    letter-spacing: 0.28em !important;
    color: var(--lux-bronze, #9a7b5f) !important;
  }

  body.interior-page .page-with-sidebar .studio-sidebar-link {
    font-size: clamp(15px, 1vw, 17px) !important;
    line-height: 1.35 !important;
    color: rgba(26, 24, 22, 0.62) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    background: transparent !important;
    white-space: normal !important;
  }

  body.interior-page .page-with-sidebar .studio-sidebar-link:hover,
  body.interior-page .page-with-sidebar .studio-sidebar-link.is-current {
    color: var(--lux-charcoal, #1a1814) !important;
    background: rgba(201, 169, 110, 0.1) !important;
    padding-left: 16px !important;
  }

  body.interior-page .page-with-sidebar .page-main {
    padding-top: 0 !important;
  }

  body.interior-page .page-with-sidebar .page-section:first-of-type {
    padding-top: 0 !important;
  }

  body.interior-page .section-kicker {
    font-size: clamp(11px, 0.8vw, 13px) !important;
    letter-spacing: 0.28em !important;
    margin-bottom: 14px !important;
  }

  body.interior-page .section-title-page {
    font-size: clamp(36px, 3.8vw, 52px) !important;
    margin-bottom: 18px !important;
  }

  body.interior-page .prose,
  body.interior-page .prose p {
    font-size: clamp(16px, 1.05vw, 19px) !important;
    line-height: 1.72 !important;
  }

  body.interior-page .material-tier p,
  body.interior-page .material-tier .tier-name,
  body.interior-page .studio-visit-panel__lead,
  body.interior-page .spec-list li {
    font-size: clamp(15px, 1vw, 18px) !important;
    line-height: 1.65 !important;
  }

  body.interior-page .material-tier .tier-name {
    font-size: clamp(18px, 1.4vw, 22px) !important;
  }

  /* Process / studio interior — vertical editorial timeline (not bento grid) */
  body.interior-page .timeline-deep {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 0 !important;
    padding-left: 34px !important;
    border-left: 1px solid rgba(201, 169, 110, 0.28) !important;
  }

  body.interior-page .timeline-deep.reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  body.interior-page .timeline-deep-item {
    grid-column: auto !important;
    margin-bottom: clamp(36px, 4vh, 52px) !important;
    padding: 0 0 0 4px !important;
    min-height: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important;
  }

  body.interior-page .timeline-deep-item:last-child {
    margin-bottom: 0 !important;
  }

  body.interior-page .timeline-deep-item::before {
    display: block !important;
    left: -41px !important;
    top: 8px !important;
    width: 10px !important;
    height: 10px !important;
    background: var(--gold, #c9a96e) !important;
    box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.18) !important;
  }

  body.interior-page .timeline-deep-item .tl-meta {
    font-size: clamp(10px, 0.75vw, 12px) !important;
    letter-spacing: 0.28em !important;
    margin-bottom: 10px !important;
  }

  body.interior-page .timeline-deep-item h3 {
    font-size: clamp(22px, 2vw, 28px) !important;
    margin-bottom: 12px !important;
    line-height: 1.2 !important;
  }

  body.interior-page .timeline-deep-item p {
    font-size: clamp(16px, 1.05vw, 19px) !important;
    line-height: 1.72 !important;
    max-width: 62ch !important;
  }

  body.interior-page .page-hero + .page-with-sidebar {
    padding-top: clamp(16px, 2vh, 28px) !important;
  }
}

@media (min-width: 1100px) {
  body.services-page .timeline-deep {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}


/* ---- css/mobile-first.css ---- */
/* Mobile-first responsive system — PERMANENT mobile layout at all viewport widths.
   Base styles apply everywhere; wider breakpoints do NOT re-enable desktop grids or nav.
   Loaded last to override the legacy desktop-first stack. */

:root {
  --page-pad: 16px;
  --section-space: 48px;
  --cell-pad-mobile: 24px 20px;
  --content-max: 1520px;
  --nav-offset: 72px;
  --touch-min: 44px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body {
  margin: 0 !important;
  width: 100%;
  min-width: 0;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

/* Inline/embed videos only — background cover videos override below */
video:not(.hero-video):not(.bento-card-video):not(.bento-material-video) {
  max-width: 100%;
  height: auto;
}

/* Kill legacy full-bleed on small screens */
.page-hero,
.work-hero,
.process-hero,
.team-hero,
.contact-hero,
.services-hero,
.studio-hero,
.materials-hero,
.press-hero,
.service-acoustic-hero,
.service-fire-hero,
.services-page .services-hero,
.vision-hero,
#hero {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#mainNav,
#mainNav.scrolled {
  left: 0;
  right: 0;
  width: auto;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  padding: 16px var(--page-pad) !important;
}

.nav-logo {
  flex: 0 1 auto;
  min-width: 0;
}

/* Mobile logo styling */
@media (max-width: 900px) {
  .logo-primary {
    font-size: 15px !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 2px !important;
    line-height: 1.1 !important;
  }

  .logo-secondary {
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    line-height: 1.2 !important;
  }

  body.home-page .nav-mobile-toggle {
    min-height: 40px !important;
    padding: 9px 14px !important;
    font-size: 9px !important;
  }
}

.nav-mobile-toggle {
  display: block !important;
  flex: 0 0 auto;
  margin-left: auto;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
}

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

/* Prevent legacy desktop layouts from forcing horizontal scroll */
.bento-section,
.bento-marquee,
footer,
.page-main,
.page-with-sidebar,
.page-hero,
.services-page,
.vision-wrap,
.pin-spacer {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.services-page,
.services-page .page-main,
.services-page .services-hero {
  width: 100% !important;
  overflow-x: clip;
}

.material-tier,
.objective-card,
.env-card,
.service-card__media,
.bento-project-cell,
.bento-material-cell {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 600px) {
  .sfug-ma-panel {
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    width: min(400px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }
}

.sfug-ma-fab {
  right: max(12px, env(safe-area-inset-right, 0px)) !important;
  bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  max-width: calc(100vw - 24px);
}

@media (min-width: 901px) {
  .sfug-ma-fab {
    right: max(32px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(32px, env(safe-area-inset-bottom, 0px)) !important;
    padding: 16px 32px !important;
    font-size: 13px !important;
    letter-spacing: 0.22em !important;
    min-height: 52px !important;
  }
}

.skip-link {
  left: var(--page-pad);
}

body.home-page #hero {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 100svh;
  height: auto !important;
  justify-content: flex-start !important;
  padding: calc(var(--nav-offset) + 28px) var(--page-pad) 56px !important;
  overflow: visible !important;
  position: relative !important;
}

.hero-video-wrap {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  display: block !important;
}

.hero-video,
.bento-card-video,
.bento-material-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  pointer-events: none !important;
}

.bento-cell.has-video,
.bento-project-cell.has-video,
.bento-material-cell.has-video {
  position: relative !important;
  overflow: hidden !important;
}

/* Scroll-reveal must not hide background videos on the parent cell */
.bento-cell.has-video.reveal,
.bento-cell.has-video.motion-fly,
.bento-project-cell.has-video.reveal,
.bento-project-cell.has-video.motion-fly,
.bento-material-cell.has-video.reveal,
.bento-material-cell.has-video.motion-fly {
  opacity: 1 !important;
  transform: none !important;
}

.bento-cell.has-video.bento-texture-purple {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: none !important;
}

.hero-video {
  z-index: 0 !important;
}

.bento-card-video,
.bento-material-video {
  z-index: 0 !important;
}

.bento-project-overlay {
  z-index: 1 !important;
  position: absolute !important;
  inset: 0 !important;
}

body.home-page #hero .hero-bg {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(154, 123, 95, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(78, 30, 30, 0.12) 0%, transparent 50%),
    linear-gradient(to top, rgba(5, 5, 5, 0.68) 0%, rgba(5, 5, 5, 0.22) 42%, rgba(5, 5, 5, 0.06) 100%) !important;
}

body.home-page #hero .hero-noise {
  opacity: 0.35 !important;
}

.bento-card-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.bento-cell.has-video > :not(.bento-card-video):not(.bento-card-video-overlay):not(.bento-material-video):not(.bento-material-overlay):not(.bento-material-bg),
.bento-project-cell.has-video > :not(.bento-card-video):not(.bento-card-video-overlay):not(.bento-project-bg):not(.bento-project-overlay) {
  position: relative;
  z-index: 2;
}

body.home-page .bento-marquee {
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(18px, 4vw, 26px) var(--page-pad) !important;
  box-sizing: border-box;
}

body.home-page .journey-strip {
  width: 100% !important;
  max-width: min(var(--content-max), 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-pad) !important;
  padding-right: var(--page-pad) !important;
  box-sizing: border-box !important;
}

.section-kicker {
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
}

.section-title-page {
  font-size: clamp(32px, 9vw, 56px) !important;
  line-height: 0.95 !important;
}

.prose {
  max-width: 100% !important;
}

.prose p,
.prose li {
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.spec-list li {
  padding: 14px 0 !important;
  font-size: 14px !important;
}

.timeline-deep-item {
  margin-bottom: 32px !important;
}

.timeline-deep-item h3 {
  font-size: clamp(22px, 6vw, 32px) !important;
}

.workshop-visual,
.workshop-main-box {
  width: 100% !important;
  max-width: 100% !important;
}

.services-page .services-hero-stats,
.services-hero-stats {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

.services-hero-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.service-card,
.services-page .service-card {
  width: 100% !important;
  box-sizing: border-box !important;
}

.btn-primary,
.btn-ghost,
.btn-large,
.btn-outline-large,
.nav-mobile-toggle,
.studio-sidebar-link {
  min-height: var(--touch-min);
}

.page-hero,
.services-hero,
.service-acoustic-hero,
.service-fire-hero,
.vision-hero {
  min-height: 0 !important;
  justify-content: flex-start !important;
  padding: calc(var(--nav-offset) + 28px) var(--page-pad) 48px !important;
}

.hero-line,
.hero-year,
.hero-scroll-hint,
.page-hero .hero-line,
.page-hero .hero-year {
  display: none !important;
}

.hero-tag,
.page-hero .hero-tag,
.vision-hero .hero-tag {
  margin-bottom: 16px !important;
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
  max-width: 100%;
}

.hero-h1,
.page-hero .hero-h1,
.service-acoustic-hero .hero-h1,
.service-fire-hero .hero-h1,
.vision-hero .hero-h1 {
  font-size: clamp(38px, 12vw, 68px) !important;
  line-height: 0.94 !important;
  max-width: 100% !important;
  text-wrap: balance;
}

.hero-sub,
.page-hero .hero-sub,
.service-acoustic-hero .hero-sub,
.service-fire-hero .hero-sub,
.vision-hero .hero-sub {
  margin-top: 24px !important;
  max-width: min(100%, 30rem) !important;
  text-align: left !important;
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word;
}

@media (max-width: 900px) {
  .hero-actions,
  .contact-cta-actions,
  .service-acoustic-hero__ctas,
  .service-acoustic-close__ctas,
  .service-fire-hero__ctas,
  .service-fire-close__ctas,
  .bento-cta-actions {
    margin-top: 28px !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px !important;
    width: 100%;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-ghost,
  .contact-cta-actions .btn-large,
  .contact-cta-actions .btn-outline-large,
  .service-acoustic-hero__ctas .btn-large,
  .service-acoustic-hero__ctas .btn-outline-large,
  .service-acoustic-close__ctas .btn-large,
  .service-acoustic-close__ctas .btn-outline-large,
  .service-fire-hero__ctas .btn-large,
  .service-fire-hero__ctas .btn-outline-large,
  .service-fire-close__ctas .btn-large,
  .service-fire-close__ctas .btn-outline-large,
  .bento-cta-actions .btn-large,
  .bento-cta-actions .btn-outline-large {
    width: 100% !important;
    min-height: 46px;
    text-align: center !important;
    justify-content: center;
    white-space: normal;
    box-sizing: border-box;
  }
}

.hero-actions .btn-primary {
  color: #1a1206 !important;
  -webkit-text-fill-color: #1a1206 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.bento-section,
footer {
  padding-left: var(--page-pad) !important;
  padding-right: var(--page-pad) !important;
}

.bento-section {
  padding-top: var(--section-space) !important;
  padding-bottom: var(--section-space) !important;
}

.bento-section-header {
  margin-bottom: 28px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.bento-section > .bento-section-header,
.bento-section > .bento-grid {
  max-width: 100% !important;
  width: 100% !important;
}

.bento-section-h2 {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  text-wrap: balance !important;
  hyphens: auto;
  font-size: clamp(28px, 8.2vw, 42px) !important;
  line-height: 0.95 !important;
  letter-spacing: 0.02em !important;
}

.page-main,
.services-page .page-main,
.vision-wrap {
  width: min(var(--content-max), 100%);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.page-main,
.services-page .page-main {
  padding: 0 var(--page-pad) 64px !important;
}

.page-section {
  padding: 48px 0 !important;
}

.page-section--surface,
.page-section--graphite {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--page-pad) !important;
  padding-right: var(--page-pad) !important;
  border-radius: 22px;
}

.page-section--graphite .section-kicker {
  color: #d4b87a !important;
}

body:not(.interior-page):not(.services-page) .page-section--graphite .section-title-page {
  color: #ffffff !important;
}

body:not(.interior-page):not(.services-page) .page-section--graphite .section-title-page em {
  color: #d4b87a !important;
}

body:not(.interior-page):not(.services-page) .page-section--graphite .prose,
body:not(.interior-page):not(.services-page) .page-section--graphite .prose p,
body:not(.interior-page):not(.services-page) .page-section--graphite .prose li {
  color: rgba(255, 255, 255, 0.88) !important;
}

body:not(.interior-page):not(.services-page) .page-section--graphite .prose strong {
  color: #ffffff !important;
}

body:not(.interior-page):not(.services-page) .page-section--graphite .spec-list li {
  color: rgba(255, 255, 255, 0.88) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body:not(.interior-page):not(.services-page) .page-section--graphite .spec-list li::before {
  background: #d4b87a !important;
}

@media (max-width: 900px) {
  .page-grid-2,
  .page-grid-2--wide-left,
  .services-page .page-grid-2,
  .services-page .page-grid-2--wide-left,
  .services-page .timeline-deep,
  .services-maint-grid,
  .service-acoustic-services__grid,
  .service-fire-services__grid,
  .acoustic-showcase,
  .fire-showcase,
  .fire-process,
  .fire-materials__grid,
  .objective-grid,
  .env-grid,
  .tech-grid,
  .deliverables-grid,
  .production-cols {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

@media (max-width: 900px) {
  .bento-grid,
  .bento-grid-3,
  .bento-grid-4,
  .bento-grid-5,
  .bento-grid-12 {
    gap: 20px !important;
    grid-template-columns: 1fr !important;
  }

  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8 {
    grid-column: span 1 !important;
  }

  .row-2,
  .row-3 {
    grid-row: span 1 !important;
  }
}

.bento-cell {
  padding: var(--cell-pad-mobile) !important;
  min-height: 0;
}

body.home-page .bento-project-cell,
body.home-page .workshop-founder-cell,
body.home-page .workshop-fr-photo-cell,
body.home-page .workshop-theater-photo-cell,
body.home-page .bento-stat-cell {
  min-height: auto !important;
}

body.home-page .bento-project-cell {
  min-height: clamp(280px, 60vw, 420px) !important;
}

#projects .bento-project-cell {
  align-items: flex-start !important;
  padding: 0 !important;
  text-align: left !important;
}

#projects .bento-project-body,
#projects .bento-project-cat,
#projects .bento-project-name,
#projects .bento-project-detail {
  text-align: left !important;
  width: 100% !important;
}

#projects .bento-project-body {
  align-self: stretch !important;
  box-sizing: border-box !important;
}

body.home-page .workshop-founder-cell {
  min-height: clamp(340px, 80vw, 520px) !important;
}

/* Process — vertical stack only on very small screens; GSAP pin above 360px */
@media (max-width: 360px) {
  #process,
  #process.bento-section.has-process-carousel,
  #process.bento-section.carousel-gsap,
  #process.bento-section.carousel-fallback {
    display: block !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: var(--section-space) !important;
    padding-bottom: var(--section-space) !important;
  }

  #process .process-carousel-section,
  #process .process-carousel-section.carousel-gsap,
  #process .process-carousel-section.carousel-fallback {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  #process .process-carousel-section .process-carousel-track {
    width: 100% !important;
    overflow: visible !important;
  }

  #process .process-carousel-section .process-carousel-rail {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 16px !important;
    padding: 0 !important;
    transform: none !important;
    will-change: auto !important;
  }

  #process .process-carousel-section .process-carousel-rail .bento-process-cell {
    width: 100% !important;
    min-height: 320px !important;
    flex: none !important;
  }

  .home-page .pin-spacer:has(#process.bento-section) {
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }
}

@media (max-width: 900px) {
  .service-cards,
  .services-page .service-cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 24px !important;
  }

  .services-page .service-card--wide {
    grid-template-columns: 1fr !important;
  }

  .services-page .service-card__body,
  .service-intro-panel,
  .services-page #maintenance-program,
  .services-brand-panel,
  .services-cta-panel,
  .services-page .timeline-deep-item,
  .services-maint-step,
  .services-page .service-acoustic-services.page-section--surface,
  .services-page .service-fire-services.page-section--surface,
  .services-page .fire-process-section {
    padding: 24px 20px !important;
  }

  .service-intro-panel::before,
  .services-brand-panel::before {
    left: 20px !important;
    right: 20px !important;
  }

  .page-with-sidebar {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 32px var(--page-pad) 72px !important;
  }

  .page-with-sidebar .page-main {
    padding: 0 !important;
  }

  .studio-sidebar {
    position: static !important;
    top: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px;
  }

  .studio-sidebar-nav {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    width: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }

  .studio-sidebar-link {
    padding: 10px 14px;
    border: 1px solid rgba(26, 24, 22, 0.1);
    border-radius: 999px;
    white-space: nowrap;
    color: rgba(26, 24, 22, 0.72);
  }

  .contact-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 24px 20px !important;
  }

  .contact-block {
    padding: 24px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  footer {
    padding: 56px var(--page-pad) 32px !important;
  }

  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 32px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding-top: 24px !important;
  }
}

.footer-social {
  flex-wrap: wrap;
  gap: 12px 18px;
}

.vision-hero {
  min-height: 0 !important;
}

.vision-wrap {
  padding: 48px var(--page-pad) 72px !important;
}

.vision-section {
  margin-bottom: 48px !important;
}

.vision-section-h2 {
  font-size: clamp(36px, 11vw, 64px) !important;
}

.palette-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
}

.shot-pills,
.greece-shots {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.env-card,
.deliverables-block {
  min-height: 0 !important;
}

.home-page .pin-spacer:not(:has(#process.bento-section.carousel-gsap)) {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

.home-page .pin-spacer:has(#process.bento-section.carousel-gsap) {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* height is intentionally NOT overridden — GSAP owns this value */
  background: #ffffff !important;
}

@media (max-width: 900px) {
  .services-page .services-hero-stats {
    flex-direction: column;
    gap: 10px !important;
  }

  .service-acoustic-feature-bar,
  .service-fire-feature-bar {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .vision-hero-line,
  .vision-hero-year,
  .vision-hero-badge {
    display: none !important;
  }
}

/* Desktop interior bento grids restored below 901px block — mobile locks scoped to max-width: 900px. */

/* ═══════════════════════════════════════════════════════════════════
   MOBILE UI/UX — interaction, readability, touch targets
   ═══════════════════════════════════════════════════════════════════ */

body {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  -webkit-font-smoothing: antialiased;
}

#mainNav {
  position: fixed !important;
  top: 0;
  z-index: 200;
  background: rgba(5, 5, 5, 0.55) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: background 0.25s ease, border-color 0.25s ease, padding 0.25s ease;
}

body.home-page #mainNav,
body.home-page #mainNav.scrolled {
  background: rgba(5, 5, 5, 0.72) !important;
  border-bottom-color: rgba(201, 169, 110, 0.14) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22) !important;
}

body.home-page #mainNav.scrolled {
  background: rgba(5, 5, 5, 0.92) !important;
}

body:not(.home-page) #mainNav,
body:not(.home-page) #mainNav.scrolled {
  background: rgba(5, 5, 5, 0.72) !important;
  border-bottom-color: rgba(201, 169, 110, 0.14) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22) !important;
}

body:not(.home-page) #mainNav.scrolled {
  background: rgba(5, 5, 5, 0.92) !important;
}

body.home-page #mainNav .logo-primary,
body.home-page #mainNav.scrolled .logo-primary,
body:not(.home-page) #mainNav .logo-primary,
body:not(.home-page) #mainNav.scrolled .logo-primary {
  color: #f5f3ef !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

body.home-page #mainNav .logo-secondary,
body.home-page #mainNav.scrolled .logo-secondary,
body:not(.home-page) #mainNav .logo-secondary,
body:not(.home-page) #mainNav.scrolled .logo-secondary {
  color: #c9a96e !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

body.home-page #mainNav .nav-mobile-toggle,
body.home-page #mainNav.scrolled .nav-mobile-toggle,
body:not(.home-page) #mainNav .nav-mobile-toggle,
body:not(.home-page) #mainNav.scrolled .nav-mobile-toggle {
  border-color: rgba(201, 169, 110, 0.45) !important;
  background: rgba(201, 169, 110, 0.1) !important;
  color: #e2c58f !important;
}

.nav-mobile-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 14px !important;
  border: 1px solid rgba(201, 169, 110, 0.4) !important;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.45);
  color: #e2c58f !important;
  font-family: "DM Mono", monospace;
  font-size: 10px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

.nav-mobile-toggle:focus-visible {
  outline: 2px solid rgba(201, 169, 110, 0.65);
  outline-offset: 3px;
}

.mobile-menu-backdrop {
  z-index: 9990 !important;
  background: rgba(4, 3, 8, 0.94) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mobile-menu-drawer {
  z-index: 9991 !important;
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  height: 100svh !important;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(var(--page-pad), env(safe-area-inset-right, 0px))
    max(20px, env(safe-area-inset-bottom, 0px))
    max(var(--page-pad), env(safe-area-inset-left, 0px)) !important;
  box-sizing: border-box !important;
  border: none !important;
  color: #f5f3ef !important;
  background: #09080f !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.mobile-menu-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  padding: 8px 0 20px;
  border-bottom: 1px solid rgba(201, 169, 110, 0.16);
}

.mobile-menu-header-start {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.mobile-menu-brand {
  font-family: "Bebas Neue", sans-serif;
  font-size: 28px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #f5f3ef !important;
  text-decoration: none !important;
}

.mobile-menu-brand span {
  color: #c9a96e !important;
}

.mobile-menu-eyebrow {
  margin: 0;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.9) !important;
}

.mobile-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 999px;
  background: rgba(201, 169, 110, 0.08);
  color: #e2c58f !important;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-close:hover {
  border-color: rgba(201, 169, 110, 0.55);
  background: rgba(201, 169, 110, 0.16);
  color: #f5e6c8 !important;
}

.mobile-menu-close:focus {
  outline: none;
}

.mobile-menu-close:focus-visible {
  outline: 2px solid rgba(201, 169, 110, 0.65);
  outline-offset: 3px;
}

.mobile-menu-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0 16px;
}

.mobile-nav-links {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mobile-nav-links li {
  margin: 0 !important;
  padding: 0 !important;
}

.mobile-nav-links a {
  display: flex !important;
  align-items: center;
  min-height: 52px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(201, 169, 110, 0.22) !important;
  border-radius: 12px !important;
  border-bottom: none !important;
  font-family: "DM Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #f5f3ef !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.mobile-nav-links a::after {
  display: none !important;
}

.mobile-nav-links a:hover,
.mobile-nav-links a.is-active {
  color: #ffffff !important;
  background: rgba(201, 169, 110, 0.12) !important;
  border-color: rgba(201, 169, 110, 0.28) !important;
}

.mobile-nav-links a:focus {
  outline: none !important;
}

.mobile-nav-links a:focus-visible {
  outline: 2px solid rgba(201, 169, 110, 0.7) !important;
  outline-offset: 2px !important;
  background: rgba(201, 169, 110, 0.14) !important;
  border-color: rgba(201, 169, 110, 0.35) !important;
  color: #ffffff !important;
}

.mobile-menu-footer {
  flex: 0 0 auto;
  padding-top: 16px;
  border-top: 1px solid rgba(201, 169, 110, 0.16);
}

.mobile-menu-drawer .mobile-nav-cta {
  display: flex !important;
  width: 100% !important;
  min-height: 52px !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 16px 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #d4b87a 0%, #c9a96e 52%, #a8864a 100%) !important;
  color: #1a1206 !important;
  font-family: "DM Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 10px 28px rgba(0, 0, 0, 0.35) !important;
}

.mobile-menu-drawer .mobile-nav-cta:hover {
  filter: brightness(1.05);
  color: #1a1206 !important;
  background: linear-gradient(135deg, #e0c88a 0%, #d4b87a 52%, #b89450 100%) !important;
}

.mobile-menu-drawer .mobile-nav-cta:focus {
  outline: none !important;
}

.mobile-menu-drawer .mobile-nav-cta:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85) !important;
  outline-offset: 3px !important;
}

body.mobile-menu-open {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: none;
  background: #09080f !important;
}

body.mobile-menu-open .sfug-ma-fab {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(12px);
}

#pageProgressTrack {
  top: env(safe-area-inset-top, 0);
  height: 3px;
  z-index: 180;
}

.bento-cell-h2,
.bento-section-header .bento-cell-h2 {
  font-size: clamp(26px, 7.5vw, 40px) !important;
  line-height: 1.02 !important;
  text-wrap: balance;
}

.bento-cell-body,
.bento-section-header .bento-cell-body {
  font-size: 14px !important;
  line-height: 1.65 !important;
  max-width: 62ch;
}

.bento-step-title {
  font-size: clamp(22px, 6vw, 30px) !important;
  line-height: 1.05 !important;
}

.bento-step-desc {
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.bento-marquee .marquee-inner {
  animation-duration: 32s !important;
}

.footer-links a,
.footer-social a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 4px 0;
}

.service-card__title {
  font-size: clamp(22px, 6vw, 28px) !important;
  line-height: 1.08 !important;
}

.service-card__text {
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.services-maint-step h3,
.services-maint-step__head h3,
.timeline-deep-item h3 {
  text-wrap: balance;
}

a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-large:focus-visible,
.btn-outline-large:focus-visible {
  outline: 2px solid rgba(201, 169, 110, 0.75);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .bento-cta-main {
    padding: 28px 22px !important;
  }

  .bento-stat-cell .bento-stat-num {
    font-size: clamp(40px, 14vw, 56px) !important;
  }

  .services-page .services-hero {
    padding-top: calc(var(--nav-offset) + 24px) !important;
    padding-bottom: 24px !important;
  }

  .services-page .services-hero .hero-sub {
    margin-top: 18px !important;
  }

  .services-hero-pills {
    margin-top: 16px !important;
  }

  .services-page .services-hero .contact-cta-actions {
    margin-top: 18px !important;
  }

  .services-page .services-hero-stats,
  .services-hero-stats {
    margin-top: 20px !important;
    padding-top: 16px !important;
  }

  .service-card--wide {
    display: flex !important;
    flex-direction: column !important;
  }

  .service-card--wide .service-card__media {
    min-height: 200px !important;
  }

  .vision-hero-content {
    padding-top: calc(var(--nav-offset) + 24px);
  }

  .vision-prose,
  .objective-card-body {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PERMANENT MOBILE LAYOUT LOCK — all viewport widths, always wins.
   Overrides spacing-fix / main.css / min-width rules from other sheets.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  :root {
    --page-pad: 16px !important;
    --section-space: 48px !important;
  }
}

@media (min-width: 901px) {
  :root {
    --page-pad: max(16px, min(32px, 3vw)) !important;
    --section-space: max(64px, min(96px, 8vh)) !important;
  }
}

html {
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch;
}

@media (hover: none), (pointer: coarse) {
  html {
    scroll-behavior: auto !important;
  }
}

body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100% !important;
  min-height: 100%;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

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

.nav-mobile-toggle {
  display: inline-flex !important;
}

@media (min-width: 901px) {
  .nav-links {
    display: flex !important;
  }

  .nav-cta {
    display: inline-flex !important;
  }

  .nav-mobile-toggle {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP BENTO GRID — restore multi-column layout (901px+)
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
  .bento-grid,
  .bento-grid-12 {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: var(--grid-gap, 34px) !important;
    align-items: stretch !important;
  }

  .bento-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .bento-grid-4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .bento-grid-5 {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  .col-12 { grid-column: span 12 !important; }
  .col-2  { grid-column: span 2 !important; }
  .col-3  { grid-column: span 3 !important; }
  .col-4  { grid-column: span 4 !important; }
  .col-5  { grid-column: span 5 !important; }
  .col-6  { grid-column: span 6 !important; }
  .col-7  { grid-column: span 7 !important; }
  .col-8  { grid-column: span 8 !important; }
  .row-2  { grid-row: span 2 !important; }
  .row-3  { grid-row: span 3 !important; }

  #philosophy.bento-section .bento-grid {
    grid-template-rows: auto auto !important;
  }

  .bento-section {
    padding-left: max(var(--page-pad), 60px) !important;
    padding-right: max(var(--page-pad), 60px) !important;
    padding-top: clamp(64px, 8vh, 96px) !important;
    padding-bottom: clamp(64px, 8vh, 96px) !important;
  }

  .bento-cell {
    padding: var(--cell-pad, 48px 44px) !important;
    min-height: 0 !important;
  }

  body.home-page .bento-project-cell {
    min-height: clamp(440px, 32vw, 580px) !important;
  }

  body.home-page .bento-project-cell.row-2 {
    min-height: clamp(440px, 32vw, 580px) !important;
  }

  /* Projects — simple 3-up row on desktop */
  #projects .bento-grid-12 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #projects .bento-project-cell {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  /* Metrics — 3-up inline row on desktop */
  #metrics .bento-grid-12 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #metrics .bento-stat-cell,
  #metrics .bento-grid-12 .col-4 {
    grid-column: span 1 !important;
  }

  /* Philosophy row 2 — even 3-up */
  #philosophy .bento-grid-12 .bento-cell:not(.philosophy-hero-cell) {
    grid-column: span 4 !important;
  }

  body.home-page .workshop-founder-cell {
    min-height: 640px !important;
  }

  body.home-page .bento-stat-cell {
    min-height: 360px !important;
  }

  .bento-section-h2,
  .bento-cell-h2,
  .bento-section-header .bento-cell-h2 {
    font-size: clamp(52px, 5.5vw, 96px) !important;
  }

  body.home-page #hero,
  #hero,
  .page-hero {
    align-items: flex-start !important;
  }

  body.home-page #hero .hero-sub,
  #hero .hero-sub,
  .page-hero .hero-sub {
    max-width: 480px !important;
    text-align: left !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .hero-actions,
  .bento-cta-actions {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: auto !important;
    align-self: flex-start !important;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-ghost,
  .bento-cta-actions .btn-large,
  .bento-cta-actions .btn-outline-large {
    width: auto !important;
  }
  body.home-page .hero-year,
  body.home-page .hero-line,
  body.home-page .hero-scroll-hint {
    display: block !important;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .bento-grid-12 {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  .col-12 { grid-column: span 6 !important; }
  .col-7,
  .col-8,
  .col-5  { grid-column: span 6 !important; }
  .col-4,
  .col-3,
  .col-2  { grid-column: span 3 !important; }
  .row-2,
  .row-3  { grid-row: span 1 !important; }

  /* Keep simplified 3-up rows intact on medium desktop */
  #projects .bento-grid-12 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #projects .bento-project-cell {
    grid-column: span 1 !important;
  }

  #metrics .bento-grid-12 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #metrics .bento-stat-cell,
  #metrics .bento-grid-12 .col-4 {
    grid-column: span 1 !important;
  }

  #philosophy .bento-grid-12 .bento-cell:not(.philosophy-hero-cell) {
    grid-column: span 2 !important;
  }

  /* Keep complex homepage grids on 12-col at medium desktop */
  body.home-page #philosophy .bento-grid-12,
  body.home-page #workshop .bento-grid-12 {
    grid-template-columns: repeat(12, 1fr) !important;
  }

  body.home-page #philosophy .bento-cell:not(.philosophy-hero-cell) {
    grid-column: span 4 !important;
  }

  body.home-page #workshop .workshop-founder-cell {
    grid-column: span 4 !important;
    grid-row: span 2 !important;
  }

  body.home-page #workshop .bento-cell.glass-purple.col-8 {
    grid-column: span 8 !important;
  }

  body.home-page #workshop .workshop-fr-photo-cell,
  body.home-page #workshop .workshop-theater-photo-cell {
    grid-column: span 4 !important;
  }
}

@media (max-width: 900px) {
  .bento-grid,
  .bento-grid-3,
  .bento-grid-4,
  .bento-grid-5,
  .bento-grid-12,
  .page-grid-2,
  .page-grid-2--wide-left,
  .services-page .page-grid-2,
  .services-page .page-grid-2--wide-left,
  .services-page .service-acoustic-services__grid,
  .services-page .service-fire-services__grid,
  .services-page .timeline-deep,
  .services-maint-grid,
  .acoustic-showcase,
  .fire-showcase,
  .fire-process,
  .fire-materials__grid,
  .objective-grid,
  .env-grid,
  .tech-grid,
  .deliverables-grid,
  .production-cols,
  .service-cards,
  .services-page .service-cards,
  .contact-panel,
  .footer-top,
  .palette-row,
  .page-with-sidebar {
    grid-template-columns: 1fr !important;
  }

  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8 {
    grid-column: span 1 !important;
  }

  .row-2,
  .row-3 {
    grid-row: span 1 !important;
  }

  .services-page .service-card--wide {
    grid-column: 1 / -1 !important;
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

.hero-h1,
.page-hero .hero-h1,
.service-acoustic-hero .hero-h1,
.service-fire-hero .hero-h1,
.vision-hero .hero-h1 {
  max-width: 100% !important;
  white-space: normal !important;
  text-wrap: balance !important;
  overflow-wrap: break-word !important;
  font-size: clamp(36px, 10vw, 48px) !important;
  line-height: 0.95 !important;
}

.bento-section-h2,
.bento-cell-h2,
.bento-section-header .bento-cell-h2 {
  max-width: 100% !important;
  white-space: normal !important;
  text-wrap: balance !important;
  overflow-wrap: break-word !important;
  font-size: clamp(28px, 8.2vw, 42px) !important;
}

.bento-section-kicker {
  max-width: 100% !important;
  white-space: normal !important;
  letter-spacing: 0.22em !important;
}

@media (max-width: 900px) {
  .hero-actions,
  .contact-cta-actions,
  .service-acoustic-hero__ctas,
  .service-acoustic-close__ctas,
  .service-fire-hero__ctas,
  .service-fire-close__ctas,
  .bento-cta-actions,
  .services-page .services-hero-stats,
  .services-hero-stats {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-ghost,
  .contact-cta-actions .btn-large,
  .contact-cta-actions .btn-outline-large,
  .bento-cta-actions .btn-large,
  .bento-cta-actions .btn-outline-large {
    width: 100% !important;
  }
}

body.home-page .hero-year,
body.home-page .hero-line,
body.home-page .hero-scroll-hint,
.page-hero .hero-line,
.page-hero .hero-year,
.vision-hero-line,
.vision-hero-year,
.vision-hero-badge {
  display: none !important;
}

@media (max-width: 900px) {
  .contact-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  .page-with-sidebar {
    grid-template-columns: 1fr !important;
  }

  .studio-sidebar {
    position: static !important;
    top: auto !important;
    max-width: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PROCESS GSAP SCROLL-PIN — restored (361px+; overrides layout lock)
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 361px) {
  #process.bento-section.has-process-carousel,
  #process.bento-section.carousel-gsap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: clamp(64px, 10vh, 128px) !important;
    padding-bottom: clamp(24px, 4vh, 48px) !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
  }

  #process.carousel-gsap .bento-section-header,
  #process.bento-section.has-process-carousel .bento-section-header {
    padding-left: var(--page-pad) !important;
    padding-right: var(--page-pad) !important;
    width: 100% !important;
    max-width: min(var(--content-max), 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #process .process-carousel-section.carousel-gsap {
    position: relative !important;
    flex: 1 1 auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    min-height: clamp(360px, 50vh, 540px) !important;
  }

  #process .process-carousel-section.carousel-gsap .process-carousel-track {
    width: 100% !important;
    overflow: hidden !important;
  }

  #process .process-carousel-section.carousel-gsap .process-carousel-rail {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    width: max-content !important;
    gap: 16px !important;
    padding-left: max(var(--page-pad), 16px) !important;
    padding-right: max(var(--page-pad), 16px) !important;
    will-change: transform;
  }

  #process .process-carousel-section.carousel-gsap .process-carousel-rail .bento-process-cell {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(calc(100vw - (2 * var(--page-pad)) - 32px), 360px) !important;
    min-height: clamp(360px, 52vh, 500px) !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  #process .process-carousel-section.carousel-fallback {
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #process .process-carousel-section.carousel-fallback .process-carousel-rail {
    display: flex !important;
    flex-flow: row nowrap !important;
    width: max-content !important;
    transform: none !important;
  }

  #process .process-carousel-section.carousel-fallback .bento-process-cell {
    scroll-snap-align: start;
  }
}

@media (min-width: 901px) {
  #process .process-carousel-section.carousel-gsap .process-carousel-rail {
    gap: 18px !important;
  }

  #process .process-carousel-section.carousel-gsap .process-carousel-rail .bento-process-cell {
    width: clamp(300px, 28vw, 400px) !important;
    min-height: clamp(400px, 50vh, 500px) !important;
  }
}

/* Mobile menu — theme lock (beats all legacy sheets) */
html body .mobile-menu-backdrop {
  z-index: 9990 !important;
  background: rgba(4, 3, 8, 0.94) !important;
}

html body .mobile-menu-backdrop.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body aside.mobile-menu-drawer {
  z-index: 9991 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  height: 100svh !important;
  transform: translate3d(100%, 0, 0) !important;
  background: #09080f !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body aside.mobile-menu-drawer.open {
  transform: translate3d(0, 0, 0) !important;
}

body.mobile-menu-open .mobile-menu-backdrop,
body.mobile-menu-open .mobile-menu-drawer {
  visibility: visible !important;
  pointer-events: auto !important;
}

body:not(.mobile-menu-open) .mobile-menu-drawer {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.home-page .mobile-menu-drawer,
body.services-page .mobile-menu-drawer,
.mobile-menu-drawer {
  background-color: #09080f !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.home-page .mobile-menu-drawer .mobile-nav-links a,
body.services-page .mobile-menu-drawer .mobile-nav-links a,
.mobile-menu-drawer .mobile-nav-links a,
html body .mobile-menu-drawer .mobile-nav-links a {
  color: #f5f3ef !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(201, 169, 110, 0.22) !important;
}

body.home-page .mobile-menu-drawer .mobile-nav-cta,
body.services-page .mobile-menu-drawer .mobile-nav-cta,
.mobile-menu-drawer .mobile-nav-cta,
html body .mobile-menu-drawer .mobile-nav-cta {
  color: #1a1206 !important;
  background: linear-gradient(135deg, #d4b87a 0%, #c9a96e 52%, #a8864a 100%) !important;
}

/* ─── Global unified footer (all pages) ──────────────────────────── */
html body footer {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-top: 1px solid rgba(26, 24, 22, 0.08) !important;
  color: #1a1814 !important;
  margin-top: 0 !important;
}

html body .footer-links a,
html body .footer-links a:visited {
  color: #1a1814 !important;
  -webkit-text-fill-color: #1a1814 !important;
}

html body .footer-logo .logo-primary {
  color: #1a1814 !important;
  -webkit-text-fill-color: #1a1814 !important;
}

html body .footer-logo .logo-secondary {
  color: #9a7b4a !important;
  -webkit-text-fill-color: #9a7b4a !important;
}

html body .footer-col-title,
html body .footer-col-title-row .footer-col-title {
  color: #9a7b4a !important;
  font-family: "DM Mono", monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
}

html body .footer-tagline,
html body .footer-copy,
html body .footer-social a,
html body .footer-social a:visited {
  color: rgba(26, 24, 22, 0.58) !important;
  -webkit-text-fill-color: rgba(26, 24, 22, 0.58) !important;
}

html body .footer-social a:hover {
  color: #9a7b4a !important;
}

html body .footer-bottom {
  border-top: 1px solid rgba(26, 24, 22, 0.08) !important;
}

html body .footer-title-icon::after {
  background: #9a7b4a !important;
}

html body .footer-links a:hover {
  color: #1a1814 !important;
  opacity: 0.72;
}

html body .footer-social a {
  font-family: "DM Mono", monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

html body .footer-copy {
  font-family: "DM Mono", monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — readability, reduced-motion, homepage nav over video
   ═══════════════════════════════════════════════════════════════════ */

#hero,
.page-hero {
  overflow: visible !important;
}

#hero .hero-tag,
#hero .hero-h1,
#hero .hero-sub,
#hero .hero-actions,
body.home-page #hero .hero-tag,
body.home-page #hero .hero-h1,
body.home-page #hero .hero-sub,
body.home-page #hero .hero-actions,
.services-page .services-hero .services-hero-pills,
.services-page .services-hero .contact-cta-actions,
.services-page .services-hero .services-hero-stats,
.services-page .services-hero .services-hero-stat {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-tag,
  .hero-h1,
  .hero-sub,
  .hero-actions,
  .page-hero .hero-tag,
  .page-hero .hero-h1,
  .page-hero .hero-sub,
  .page-hero .hero-actions,
  .service-acoustic-hero .hero-tag,
  .service-acoustic-hero .hero-h1,
  .service-acoustic-hero .hero-sub,
  .service-fire-hero .hero-tag,
  .service-fire-hero .hero-h1,
  .service-fire-hero .hero-sub {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

#hero .hero-tag,
body.home-page:not(.services-page) #hero .hero-tag {
  font-size: 10px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  color: #d4b87a !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

body.services-page.home-page #hero .hero-tag {
  color: #9a7b4a !important;
  text-shadow: none !important;
}

#hero .hero-h1,
body.home-page:not(.services-page) #hero .hero-h1 {
  color: var(--warm-white) !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

body.services-page.home-page #hero .hero-h1 {
  color: #1a1814 !important;
  text-shadow: none !important;
}

body.services-page.home-page #hero .hero-h1 em {
  color: #9a7b5f !important;
}

#hero .hero-sub,
body.home-page:not(.services-page) #hero .hero-sub {
  color: rgba(245, 243, 239, 0.9) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

body.services-page.home-page #hero .hero-sub {
  color: rgba(26, 24, 22, 0.68) !important;
  text-shadow: none !important;
}

body.services-page.home-page #hero .hero-year {
  color: rgba(26, 24, 22, 0.38) !important;
}

#hero .hero-actions .btn-ghost {
  color: rgba(245, 243, 239, 0.88) !important;
}

body.services-page.home-page #hero .hero-actions .btn-ghost {
  color: rgba(26, 24, 22, 0.52) !important;
}

body.services-page.home-page #hero .hero-actions .btn-ghost:hover {
  color: #1a1814 !important;
}

/* Homepage nav — dark frosted over hero video */
body.home-page nav:not(.scrolled) {
  background: rgba(5, 5, 5, 0.58) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP BENTO SCALE — larger sections, cells, and typography (901px+)
   Loaded last to beat layout-lock font caps.
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
  :root {
    --bento-type-scale: 1;
    --bento-space-scale: 1;
    --header-type-scale: 1;
    --header-space-scale: 1;
    --grid-gap: 48px !important;
    --cell-pad: 64px 56px !important;
    --section-space: clamp(96px, 12vh, 160px) !important;
  }

  .bento-section {
    padding-top: clamp(96px, 12vh, 160px) !important;
    padding-bottom: clamp(96px, 12vh, 160px) !important;
  }

  .bento-section-header {
    margin-bottom: 80px !important;
  }

  .bento-grid,
  .bento-grid-12 {
    gap: 48px !important;
  }

  .bento-cell,
  .bento-project-cell,
  .bento-material-cell {
    border-radius: 24px !important;
  }

  .bento-cell {
    padding: 64px 56px !important;
  }

  #projects .bento-project-cell {
    padding: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .bento-section-h2,
  .bento-section-header .bento-section-h2 {
    font-size: clamp(52px, 5.5vw, 96px) !important;
    line-height: 0.92 !important;
  }

  .bento-cell-h2,
  .bento-section-header .bento-cell-h2 {
    font-size: clamp(44px, 4.5vw, 80px) !important;
    line-height: 0.92 !important;
  }

  .bento-cell-h3 {
    font-size: clamp(28px, 2.8vw, 44px) !important;
    line-height: 0.95 !important;
  }

  .bento-cell-body,
  .bento-section-header .bento-cell-body {
    font-size: 17px !important;
    line-height: 1.75 !important;
  }

  .bento-cell-tag,
  .bento-section-kicker {
    font-size: 11px !important;
    letter-spacing: 0.32em !important;
    margin-bottom: 18px !important;
  }

  .bento-cell-num {
    font-size: clamp(96px, 10vw, 168px) !important;
  }

  .bento-cell-num-label {
    font-size: 12px !important;
    margin-top: 10px !important;
  }

  .bento-project-name {
    font-size: clamp(32px, 2.5vw, 44px) !important;
    margin-bottom: 12px !important;
  }

  .bento-project-cat {
    font-size: 11px !important;
    margin-bottom: 10px !important;
  }

  .bento-project-detail {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .bento-project-body {
    padding: 40px !important;
    width: 100% !important;
    text-align: left !important;
  }

  #projects .bento-project-cat,
  #projects .bento-project-name,
  #projects .bento-project-detail {
    text-align: left !important;
  }

  .bento-icon {
    width: 64px !important;
    height: 64px !important;
    font-size: 18px !important;
    margin-bottom: 20px !important;
  }

  #workshop .workshop-fr-body .bento-icon,
  #workshop .workshop-theater-body .bento-icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 16px !important;
  }

  .bento-pill {
    font-size: 10px !important;
    padding: 8px 16px !important;
  }

  .bento-pills {
    margin-top: 32px !important;
    gap: 8px !important;
  }

  body.home-page .philosophy-hero-cell,
  body.home-page #philosophy .philosophy-hero-cell.bento-cell {
    min-height: 360px !important;
  }

  #philosophy .bento-cell:not(.philosophy-hero-cell) {
    min-height: 240px !important;
  }

  body.home-page .bento-stat-cell {
    min-height: 360px !important;
  }

  body.home-page .bento-project-cell {
    min-height: clamp(440px, 32vw, 580px) !important;
  }

  body.home-page #workshop .workshop-founder-cell.bento-cell {
    min-height: 640px !important;
  }

  #workshop .bento-cell.glass-purple {
    min-height: 320px !important;
  }

  #workshop .workshop-fr-photo-cell,
  #workshop .workshop-theater-photo-cell {
    min-height: 300px !important;
  }

  .bento-cta-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: clamp(80px, 8vw, 120px) 64px !important;
    min-height: 420px !important;
  }

  #cta .bento-grid-12 {
    gap: 48px !important;
  }

  .bento-cta-main .bento-cell-tag,
  .bento-cta-main .bento-cell-h2,
  .bento-cta-main .bento-cell-body {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .bento-cta-main .bento-cell-h2 {
    font-size: clamp(52px, 5vw, 92px) !important;
  }

  .bento-cta-main .bento-cell-body {
    font-size: 18px !important;
    max-width: 58ch !important;
  }

  .bento-cta-main .bento-cta-glow {
    left: 50% !important;
  }

  .bento-cta-actions {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: auto !important;
    margin-top: 32px !important;
    align-self: center !important;
  }

  .bento-cta-actions .btn-large,
  .bento-cta-actions .btn-outline-large {
    font-size: 12px !important;
    padding: 18px 44px !important;
    width: auto !important;
  }

  /* Hero — desktop type */
  .hero-h1,
  .page-hero .hero-h1,
  .service-acoustic-hero .hero-h1,
  .service-fire-hero .hero-h1,
  .vision-hero .hero-h1,
  body.home-page #hero .hero-h1,
  #hero .hero-h1 {
    font-size: clamp(38px, 12vw, 68px) !important;
  }

  .page-hero .hero-h1 {
    font-size: clamp(44px, 7vw, 100px) !important;
  }

  .section-title-page,
  body.interior-page .section-title-page,
  body.services-page .section-title-page {
    font-size: clamp(34px, 4.8vw, 58px) !important;
    line-height: 0.92 !important;
    margin-bottom: 20px !important;
  }

  .page-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  body.interior-page .page-hero,
  body.interior-page .process-hero,
  body.interior-page .contact-hero,
  body.interior-page .studio-hero,
  body.interior-page .team-hero {
    min-height: 0 !important;
    height: auto !important;
    padding-top: calc(var(--nav-offset, 88px) + var(--hero-clearance, 56px)) !important;
    padding-bottom: clamp(40px, 5vh, 64px) !important;
    justify-content: flex-start !important;
  }

  .hero-sub,
  .page-hero .hero-sub,
  .service-acoustic-hero .hero-sub,
  .service-fire-hero .hero-sub,
  body.home-page #hero .hero-sub,
  #hero .hero-sub {
    font-size: 14px !important;
    max-width: min(100%, 30rem) !important;
  }

  #hero .hero-tag,
  body.home-page #hero .hero-tag,
  .page-hero .hero-tag {
    font-size: 10px !important;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-ghost,
  .page-hero .hero-actions .btn-primary,
  .page-hero .hero-actions .btn-ghost {
    font-size: 11px !important;
    padding: 16px 32px !important;
  }

  /* Nav — desktop type */
  html body nav .nav-links a,
  html body nav.scrolled .nav-links a {
    font-size: 14px !important;
    padding: 8px 0 !important;
  }

  html body nav .nav-cta,
  html body nav.scrolled .nav-cta {
    font-size: 13px !important;
    padding: 12px 24px !important;
  }

  html body nav .logo-primary,
  html body nav.scrolled .logo-primary {
    font-size: 18px !important;
  }

  html body nav .logo-secondary,
  html body nav.scrolled .logo-secondary {
    font-size: 11px !important;
  }

  /* Footer — desktop type */
  html body .footer-col-title,
  html body .footer-col-title-row .footer-col-title {
    font-size: 10px !important;
  }

  html body .footer-social a,
  html body .footer-copy {
    font-size: 10px !important;
  }

  html body .footer-tagline {
    font-size: 14px !important;
  }

  /* Section intro headers — centered editorial */
  .bento-section-header {
    align-items: center !important;
    text-align: center !important;
    max-width: 72ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .bento-section-header .bento-cell-body {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Footer — magazine layout */
  .footer-top {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 48px 64px !important;
    max-width: var(--max-w, 1680px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 72px !important;
  }

  .footer-brand {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    margin-bottom: 8px !important;
  }

  .footer-tagline {
    max-width: 52ch !important;
    margin: 12px auto 0 !important;
    text-align: center !important;
  }

  .footer-top > div:not(.footer-brand) {
    text-align: center !important;
  }

  .footer-links {
    display: inline-block !important;
    text-align: left !important;
  }

  .footer-bottom {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: var(--max-w, 1680px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Interior page CTAs — centered editorial */
  .contact-cta-actions,
  .service-acoustic-hero__ctas,
  .service-acoustic-close__ctas,
  .service-fire-hero__ctas,
  .service-fire-close__ctas {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: auto !important;
  }

  .contact-cta-actions .btn-large,
  .contact-cta-actions .btn-outline-large,
  .service-acoustic-hero__ctas .btn-large,
  .service-acoustic-hero__ctas .btn-outline-large,
  .service-acoustic-close__ctas .btn-large,
  .service-acoustic-close__ctas .btn-outline-large,
  .service-fire-hero__ctas .btn-large,
  .service-fire-hero__ctas .btn-outline-large,
  .service-fire-close__ctas .btn-large,
  .service-fire-close__ctas .btn-outline-large {
    width: auto !important;
  }

  .services-cta-panel {
    text-align: center !important;
  }

  .services-cta-panel .section-kicker,
  .services-cta-panel .section-title-page,
  .services-cta-panel .prose,
  .services-cta-panel .prose p {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .services-cta-panel .section-title-page {
    max-width: 52ch !important;
  }

  .services-cta-panel .prose,
  .services-cta-panel .prose p {
    max-width: 58ch !important;
  }

  .services-cta-panel .contact-cta-actions {
    justify-content: center !important;
  }

  .service-close {
    text-align: center !important;
  }

  .service-close .section-kicker,
  .service-close .section-title-page,
  .service-close .prose,
  .service-close .prose p {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .service-close .prose,
  .service-close .prose p {
    max-width: 58ch !important;
  }

  .service-close .contact-cta-actions {
    justify-content: center !important;
  }

  .bento-section-actions,
  .bento-workshop-actions {
    margin-top: 40px !important;
    gap: 18px !important;
  }

  .philosophy-hero-body {
    padding: 64px 56px !important;
  }

  /* Hero copy — left column, not full bleed */
  body.home-page #hero,
  #hero,
  .page-hero {
    align-items: flex-start !important;
  }

  body.home-page #hero .hero-sub,
  #hero .hero-sub,
  .page-hero .hero-sub,
  .service-acoustic-hero .hero-sub,
  .service-fire-hero .hero-sub {
    max-width: 480px !important;
    text-align: left !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  body.home-page #hero .hero-actions,
  #hero .hero-actions,
  .page-hero .hero-actions {
    width: auto !important;
    align-self: flex-start !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  body.home-page #hero .hero-actions .btn-primary,
  body.home-page #hero .hero-actions .btn-ghost,
  #hero .hero-actions .btn-primary,
  #hero .hero-actions .btn-ghost,
  .page-hero .hero-actions .btn-primary,
  .page-hero .hero-actions .btn-ghost {
    width: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP UI/UX POLISH — hero, nav, typography (901px+)
   Overrides broken 5× scale rules. Loads last in cascade.
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
  :root {
    --desktop-type-scale: 2;
    --desktop-space-scale: 1.25;
    --nav-offset: 88px;
    --hero-clearance: 56px;
    --grid-gap: 40px;
    --cell-pad: 48px 44px;
    --section-space: clamp(72px, 8vh, 112px);
    --bento-type-scale: 1;
    --bento-space-scale: 1;
    --header-type-scale: 1;
    --header-space-scale: 1;
  }

  /* ─── HERO — editorial center-left stack ─────────────────────── */
  body.home-page #hero,
  #hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    min-height: 100svh !important;
    height: auto !important;
    padding-top: calc(var(--nav-offset) + var(--hero-clearance)) !important;
    padding-left: max(var(--page-pad), clamp(48px, 5vw, 88px)) !important;
    padding-right: max(var(--page-pad), clamp(48px, 5vw, 88px)) !important;
    padding-bottom: clamp(80px, 9vh, 120px) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #hero .hero-tag,
  body.home-page #hero .hero-tag {
    order: 1;
    margin-bottom: 22px !important;
    font-family: "DM Mono", monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.32em !important;
    line-height: 1.5 !important;
    max-width: none !important;
    white-space: normal !important;
  }

  #hero .hero-h1,
  body.home-page #hero .hero-h1 {
    order: 2;
    font-family: "Bebas Neue", sans-serif !important;
    font-size: clamp(64px, 8vw, 120px) !important;
    line-height: 0.9 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    max-width: min(900px, 78vw) !important;
    width: auto !important;
    margin: 0 !important;
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #hero .hero-h1 em,
  body.home-page #hero .hero-h1 em {
    font-family: "DM Serif Display", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    font-size: 0.88em !important;
  }

  #hero .hero-sub,
  body.home-page #hero .hero-sub {
    order: 3;
    margin-top: 32px !important;
    max-width: min(640px, 58ch) !important;
    width: min(640px, 100%) !important;
    min-width: 0 !important;
    font-size: clamp(18px, 1.35vw, 22px) !important;
    line-height: 1.65 !important;
    text-align: left !important;
    align-self: flex-start !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #hero .hero-actions,
  body.home-page #hero .hero-actions {
    order: 4;
    margin-top: 40px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    width: auto !important;
    align-self: flex-start !important;
  }

  #hero .hero-actions .btn-primary,
  #hero .hero-actions .btn-ghost,
  body.home-page #hero .hero-actions .btn-primary,
  body.home-page #hero .hero-actions .btn-ghost {
    font-size: 11px !important;
    padding: 16px 32px !important;
    width: auto !important;
    min-height: 48px !important;
  }

  /* Interior / page heroes — readable serif scale */
  .page-hero .hero-h1,
  .service-acoustic-hero .hero-h1,
  .service-fire-hero .hero-h1,
  .vision-hero .hero-h1 {
    font-family: "DM Serif Display", Georgia, serif !important;
    font-size: clamp(48px, 6.5vw, 96px) !important;
    max-width: min(820px, 72vw) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  .page-hero .hero-sub,
  .service-acoustic-hero .hero-sub,
  .service-fire-hero .hero-sub,
  .vision-hero .hero-sub {
    max-width: min(600px, 54ch) !important;
    width: min(600px, 100%) !important;
    font-size: clamp(17px, 1.2vw, 20px) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* ─── NAV — comfortable spacing, logo lockup ─────────────────── */
  nav,
  nav.scrolled {
    padding: 18px max(var(--page-pad), clamp(40px, 4vw, 72px)) !important;
    min-height: var(--nav-offset) !important;
    box-sizing: border-box !important;
  }

  .nav-links {
    display: flex !important;
    gap: 32px !important;
    list-style: none !important;
    align-items: center !important;
  }

  html body nav .nav-links a,
  html body nav.scrolled .nav-links a {
    font-family: "DM Mono", monospace !important;
    font-size: 14px !important;
    letter-spacing: 0.2em !important;
    color: rgba(245, 243, 239, 0.85) !important;
    padding: 8px 0 !important;
    white-space: nowrap !important;
  }

  html body nav .nav-links a:hover,
  html body nav .nav-links a.is-active,
  html body nav.scrolled .nav-links a:hover,
  html body nav.scrolled .nav-links a.is-active {
    color: #ffffff !important;
  }

  html body nav .logo-primary,
  html body nav.scrolled .logo-primary {
    font-family: "DM Serif Display", Georgia, serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #f5f3ef !important;
    line-height: 1.1 !important;
  }

  html body nav .logo-secondary,
  html body nav.scrolled .logo-secondary {
    font-family: "DM Serif Display", Georgia, serif !important;
    font-size: 12px !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #c9a96e !important;
    line-height: 1.2 !important;
  }

  html body nav .nav-cta,
  html body nav.scrolled .nav-cta {
    font-family: "DM Mono", monospace !important;
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    padding: 14px 28px !important;
    white-space: nowrap !important;
  }

  /* ─── SECTION HEADERS — logo-matched serif, readable ─────────── */
  .bento-section-h2,
  .bento-section-header .bento-section-h2 {
    font-family: "DM Serif Display", Georgia, serif !important;
    font-size: clamp(36px, 4.2vw, 56px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    max-width: min(900px, 100%) !important;
    margin-bottom: 0 !important;
  }

  body.home-page .bento-section-h2,
  body.home-page .bento-section-header .bento-section-h2 {
    color: #1a1814 !important;
  }

  .bento-cell-h2,
  .bento-section-header .bento-cell-h2,
  .bento-cta-main .bento-cell-h2 {
    font-family: "DM Serif Display", Georgia, serif !important;
    font-size: clamp(32px, 3.6vw, 48px) !important;
    line-height: 1.04 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
  }

  .bento-cell-h3 {
    font-family: "DM Serif Display", Georgia, serif !important;
    font-size: clamp(24px, 2.4vw, 34px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
  }

  .bento-section-h2 em,
  .bento-section-h2 em.em,
  .bento-section-h2 em.gd,
  .bento-cell-h2 em,
  .bento-cell-h2 em.em,
  .bento-cell-h2 em.gd,
  .bento-cell-h3 em {
    font-family: "DM Serif Display", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em !important;
    color: #c9a96e !important;
    text-transform: uppercase !important;
  }

  .bento-section-h2 em.em,
  .bento-cell-h2 em.em {
    color: #9a7b5f !important;
  }

  .section-title-page,
  body.interior-page .section-title-page,
  body.services-page .section-title-page {
    font-family: "DM Serif Display", Georgia, serif !important;
    font-size: clamp(34px, 4vw, 52px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 20px !important;
  }

  .bento-section-kicker,
  .section-kicker,
  .bento-cell-tag {
    font-family: "DM Mono", monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.32em !important;
    margin-bottom: 14px !important;
  }

  .bento-cell-body,
  .bento-section-header .bento-cell-body,
  .bento-project-detail {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  .bento-section-header {
    margin-bottom: 48px !important;
    max-width: min(72ch, 100%) !important;
  }

  /* ─── BENTO GRID — balanced rhythm, 3-up projects ────────────── */
  .bento-section {
    padding-top: var(--section-space) !important;
    padding-bottom: var(--section-space) !important;
  }

  .bento-grid,
  .bento-grid-12 {
    gap: var(--grid-gap) !important;
  }

  .bento-cell {
    padding: var(--cell-pad) !important;
    border-radius: 24px !important;
  }

  body.home-page .bento-project-cell {
    min-height: clamp(420px, 28vw, 540px) !important;
  }

  body.home-page .bento-stat-cell {
    min-height: 360px !important;
  }

  body.home-page .philosophy-hero-cell,
  body.home-page #philosophy .philosophy-hero-cell.bento-cell {
    min-height: 420px !important;
  }

  #philosophy .bento-cell:not(.philosophy-hero-cell) {
    min-height: 280px !important;
  }

  .bento-project-body {
    padding: 36px 32px !important;
    width: 100% !important;
    text-align: left !important;
  }

  #projects .bento-project-cat,
  #projects .bento-project-name,
  #projects .bento-project-detail {
    text-align: left !important;
  }

  .bento-project-name {
    font-size: clamp(26px, 2.2vw, 36px) !important;
    margin-bottom: 10px !important;
  }

  .bento-project-cat {
    font-size: 10px !important;
    margin-bottom: 8px !important;
  }

  .bento-cell-num {
    font-size: clamp(72px, 8vw, 120px) !important;
  }

  .bento-cta-main {
    padding: clamp(64px, 7vw, 96px) 56px !important;
    min-height: 380px !important;
  }

  .bento-cta-main .bento-cell-h2 {
    font-size: clamp(36px, 4vw, 52px) !important;
  }

  .bento-cta-main .bento-cell-body {
    font-size: 20px !important;
    max-width: 58ch !important;
  }

  .bento-cta-actions {
    margin-top: 32px !important;
    gap: 18px !important;
  }

  .bento-cta-actions .btn-large,
  .bento-cta-actions .btn-outline-large {
    font-size: 14px !important;
    padding: 20px 48px !important;
  }

  .philosophy-hero-body {
    padding: 48px 44px !important;
  }

  html body .footer-tagline {
    font-size: 17px !important;
    line-height: 1.75 !important;
  }

  html body .footer-col-title,
  html body .footer-col-title-row .footer-col-title {
    font-size: 12px !important;
  }

  html body .footer-links a {
    font-size: 16px !important;
  }

  html body .footer-copy,
  html body .footer-social a {
    font-size: 11px !important;
  }

  html body .footer-logo .logo-primary {
    font-size: 20px !important;
  }

  html body .footer-logo .logo-secondary {
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   INTERIOR DESKTOP BENTO — sitewide 12-col grid (901px+)
   Restores multi-column layouts after mobile locks. Loads last.
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
  .page-main,
  .services-page .page-main,
  .vision-wrap {
    max-width: var(--max-w, 1680px) !important;
    padding-left: max(var(--h-pad, 100px), 60px) !important;
    padding-right: max(var(--h-pad, 100px), 60px) !important;
    padding-bottom: clamp(96px, 10vh, 132px) !important;
  }

  .page-grid-2,
  .page-grid-2--wide-left {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
    align-items: start !important;
  }

  .page-grid-2 > * {
    grid-column: span 6 !important;
  }

  .page-grid-2--wide-left > *:first-child {
    grid-column: span 7 !important;
  }

  .page-grid-2--wide-left > *:last-child {
    grid-column: span 5 !important;
  }

  .page-with-sidebar {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
    max-width: var(--max-w, 1680px) !important;
    margin: 0 auto !important;
    padding: clamp(56px, 7vh, 80px) max(var(--h-pad, 100px), 60px) clamp(96px, 10vh, 132px) !important;
    align-items: start !important;
  }

  .page-with-sidebar .studio-sidebar {
    grid-column: span 3 !important;
    position: sticky !important;
    top: calc(var(--nav-offset, 88px) + 24px) !important;
  }

  .page-with-sidebar .page-main {
    grid-column: span 9 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  .material-tier-grid,
  .studio-hub-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
  }

  .contact-panel {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
    padding: 0 !important;
    flex-direction: unset !important;
  }

  .contact-block {
    grid-column: span 6 !important;
    width: auto !important;
    padding: 56px 48px !important;
    border-radius: 24px !important;
    min-height: 320px !important;
  }

  .contact-hero + .page-main {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
  }

  .contact-hero + .page-main > .page-section:nth-child(2),
  .contact-hero + .page-main > .page-section:nth-child(3) {
    grid-column: span 6 !important;
  }

  /* Services page — homepage-style bento */
  .services-page .service-cards,
  .service-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
    margin-top: 48px !important;
  }

  .services-page .service-card {
    min-height: clamp(420px, 28vw, 540px) !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 48px rgba(26, 24, 22, 0.1) !important;
  }

  .services-brand-chips {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px !important;
    margin-top: 48px !important;
  }

  .services-maint-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 32px !important;
    margin-top: 48px !important;
  }

  .services-maint-step:last-child {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
  }

  .services-maint-step__head {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 12px !important;
  }

  .services-maint-step__num {
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  body.services-page .timeline-deep {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
  }

  body.services-page .timeline-deep-item {
    grid-column: auto !important;
    border-radius: 18px !important;
    min-height: 0 !important;
  }

  body.interior-page .page-with-sidebar {
    padding-top: clamp(16px, 2vh, 28px) !important;
  }

  body.interior-page .page-with-sidebar .page-section:first-of-type {
    padding-top: 0 !important;
    padding-bottom: clamp(32px, 4vh, 48px) !important;
  }

  body.interior-page .timeline-deep {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 0 !important;
    padding-left: 34px !important;
    border-left: 1px solid rgba(201, 169, 110, 0.28) !important;
  }

  body.interior-page .timeline-deep.reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  body.interior-page .timeline-deep-item {
    grid-column: auto !important;
    min-height: 0 !important;
    margin-bottom: clamp(36px, 4vh, 52px) !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.interior-page .timeline-deep-item:last-child {
    margin-bottom: 0 !important;
  }

  .studio-visit-panel,
  .interior-reading-panel {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
    align-items: center !important;
  }

  .studio-visit-panel__copy {
    grid-column: span 7 !important;
  }

  .studio-visit-panel__list {
    grid-column: span 5 !important;
  }

  .page-section:has(.workshop-visual) {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
  }

  .workshop-visual {
    grid-column: span 4 !important;
    max-width: none !important;
  }

  .workshop-qualities {
    grid-column: span 8 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  /* Service detail pages */
  .service-intro-panel__layout {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
  }

  .service-intro-panel__copy {
    grid-column: span 7 !important;
  }

  .service-intro-aside {
    grid-column: span 5 !important;
  }

  .booth-materials__grid,
  .fire-materials__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
  }

  .acoustic-compare__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 48px !important;
  }

  .booth-showcase,
  .fire-showcase,
  .acoustic-showcase {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
    align-items: center !important;
  }

  .booth-showcase__copy,
  .fire-showcase__copy,
  .acoustic-showcase__copy {
    grid-column: span 5 !important;
  }

  .booth-showcase__figure,
  .fire-showcase__figure,
  .acoustic-showcase__figure {
    grid-column: span 7 !important;
  }

  .fire-process,
  .service-fire-services__grid,
  .service-acoustic-services__grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
  }

  .fire-process__visual {
    grid-column: span 5 !important;
  }

  .fire-process__content,
  .service-fire-services__primary,
  .service-fire-services__secondary,
  .service-acoustic-services__primary,
  .service-acoustic-services__secondary {
    grid-column: span 6 !important;
  }

  .service-booth-feature-bar,
  .service-fire-feature-bar,
  .service-acoustic-feature-bar {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px !important;
    max-width: var(--max-w, 1680px) !important;
    margin: 0 auto !important;
    padding: 32px max(var(--h-pad, 100px), 60px) 48px !important;
  }

  .service-related-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  /* Vision page */
  .objective-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
  }

  .env-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
  }

  .tech-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 32px !important;
  }

  .production-cols {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
  }

  .deliverables-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 32px !important;
  }

  .palette-row {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 48px !important;
  }

  /* Interior bento sections */
  body:not(.home-page) .bento-section {
    max-width: var(--max-w, 1680px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: max(var(--h-pad, 100px), 60px) !important;
    padding-right: max(var(--h-pad, 100px), 60px) !important;
  }

  body.services-page .bento-section .bento-grid-12.service-cards-bento {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
  }

  body.services-page .bento-section .service-bento-cell {
    grid-column: span 1 !important;
    min-height: clamp(420px, 28vw, 540px) !important;
  }

  body.services-page .services-maint-bento {
    grid-template-columns: repeat(12, 1fr) !important;
    gap: var(--grid-gap, 34px) !important;
  }

  body.services-page .services-maint-bento .services-maint-step.col-4 {
    grid-column: span 4 !important;
  }

  body.services-page .services-maint-bento .services-maint-step.col-6 {
    grid-column: span 6 !important;
  }

  body.services-page .services-brand-bento .bento-cell.col-4 {
    grid-column: span 4 !important;
    min-height: 140px !important;
  }

  /* Footer — 4-col magazine on interior pages */
  body:not(.home-page) .footer-top {
    grid-template-columns: 1.6fr 1fr 1fr 1fr !important;
    gap: 56px 72px !important;
    max-width: var(--max-w, 1680px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:not(.home-page) .footer-brand {
    text-align: left !important;
    grid-column: auto !important;
  }

  body:not(.home-page) .footer-tagline {
    text-align: left !important;
    margin-left: 0 !important;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  body.services-page .services-maint-bento {
    grid-template-columns: repeat(12, 1fr) !important;
    gap: var(--grid-gap, 34px) !important;
  }

  body.services-page .services-maint-bento .services-maint-step.col-4 {
    grid-column: span 4 !important;
  }

  body.services-page .services-maint-bento .services-maint-step.col-6 {
    grid-column: span 6 !important;
  }

  .page-with-sidebar .studio-sidebar {
    grid-column: span 4 !important;
  }

  .page-with-sidebar .page-main {
    grid-column: span 8 !important;
  }

  .tech-grid,
  .deliverables-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* SFUG ARIA — desktop-only widget hide fallback */
@media (max-width: 1024px), (pointer: coarse) {
  [data-manifest-widget],
  .manifest-launcher {
    display: none !important;
  }

  body:not(.ai-concierge-page) .sfug-ma-fab,
  body:not(.ai-concierge-page) .sfug-ma-panel,
  body:not(.ai-concierge-page) .sfug-ma-preload-root,
  body:not(.ai-concierge-page) .sfug-ma-permission-gate {
    display: none !important;
  }
}

[data-avatar-content]:empty,
[data-avatar-slot]:empty {
  display: none;
}


/* ---- css/services-page.css ---- */
/* ─── SERVICES OVERVIEW — enhanced layout & polish ───────────────── */

.services-page {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(201, 169, 110, 0.07) 0%, transparent 42%),
    radial-gradient(ellipse at 0% 48%, rgba(154, 123, 95, 0.05) 0%, transparent 38%),
    #faf9f7;
}

.services-page .page-main {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .services-page .page-main {
    max-width: min(1380px, 100%);
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (min-width: 640px) and (max-width: 900px) {
  .services-page .page-main {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .services-page .page-main {
    padding-left: max(24px, var(--site-edge));
    padding-right: max(24px, var(--site-edge));
  }
}

.services-page .page-section {
  padding: 40px 0;
}

@media (min-width: 768px) {
  .services-page .page-section {
    padding: 56px 0;
  }
}

@media (min-width: 1100px) {
  .services-page .page-section {
    padding: 80px 0;
  }
}

/* Mobile-first — was 56px/52px desktop padding causing overflow on phones */
.services-page .page-section--surface,
.services-page .page-section--graphite {
  padding: 24px 16px !important;
  margin-bottom: 20px;
  overflow: visible !important; /* beat spacing-fix card overflow:hidden clip */
  min-width: 0;
}

@media (min-width: 768px) {
  .services-page .page-section--surface,
  .services-page .page-section--graphite {
    padding: 44px 36px !important;
  }
}

@media (min-width: 1100px) {
  .services-page .page-section--surface,
  .services-page .page-section--graphite {
    padding: 56px 52px !important;
    margin-bottom: 32px;
  }
}

.services-page .page-grid-2 {
  gap: 56px 72px;
}

.services-page .page-grid-2--wide-left {
  grid-template-columns: 1.15fr 0.85fr;
}

/* Service detail — intro panel (replaces split column + spec list) */
.services-page .service-intro-section {
  padding-top: 48px;
  padding-bottom: 56px;
}

.service-intro-panel {
  position: relative;
  padding: 28px 20px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 96% 4%, rgba(201, 169, 110, 0.12) 0%, transparent 46%),
    radial-gradient(ellipse at 0% 100%, rgba(154, 123, 95, 0.06) 0%, transparent 42%),
    linear-gradient(160deg, #ffffff 0%, #faf8f4 100%);
  border: 1px solid rgba(26, 24, 22, 0.08);
  box-shadow:
    0 20px 56px rgba(26, 24, 22, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.service-intro-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(
    --intro-accent-bar,
    linear-gradient(90deg, #9a7b5f 0%, #c9a96e 50%, #8a6a47 100%)
  );
}

.service-intro-panel--acoustic {
  --intro-accent: #8a6a47;
  --intro-accent-bar: linear-gradient(90deg, #8a6a47 0%, #c9a96e 100%);
}

.service-intro-panel--fire {
  --intro-accent: #8a5040;
  --intro-accent-bar: linear-gradient(90deg, #8a5040 0%, #c9a96e 100%);
}

.service-intro-panel--booth {
  --intro-accent: #9a7b5f;
  --intro-accent-bar: linear-gradient(90deg, #9a7b5f 0%, #c9a96e 100%);
}

.service-intro-panel--carpet {
  --intro-accent: #9a7b4a;
  --intro-accent-bar: linear-gradient(90deg, #9a7b4a 0%, #c9a96e 100%);
}

.service-intro-panel--pressure {
  --intro-accent: #3d6fa8;
  --intro-accent-bar: linear-gradient(90deg, #3d6fa8 0%, #6a9fd4 100%);
}

.service-intro-panel__head {
  max-width: 680px;
  margin-bottom: 28px;
}

.service-intro-panel__head .section-title-page {
  margin-bottom: 0;
}

.service-intro-panel__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.service-intro-panel__copy.prose p {
  margin-bottom: 16px;
}

.service-intro-panel__copy.prose p:last-child {
  margin-bottom: 0;
}

.service-intro-aside {
  padding: 22px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(26, 24, 22, 0.07);
  box-shadow: 0 8px 22px rgba(26, 24, 22, 0.05);
}

.service-intro-aside__label {
  display: block;
  margin-bottom: 14px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--intro-accent, #9a7b5f);
}

.service-intro-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.service-intro-chips li {
  position: relative;
  padding: 9px 12px 9px 26px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(26, 24, 22, 0.78);
  background: rgba(26, 24, 22, 0.03);
  border: 1px solid rgba(26, 24, 22, 0.05);
}

.service-intro-chips li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--intro-accent, #9a7b5f);
}

@media (min-width: 768px) {
  .service-intro-panel {
    padding: 36px 32px;
  }

  .service-intro-panel::before {
    left: 32px;
    right: 32px;
  }

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

@media (min-width: 900px) {
  .service-intro-panel {
    padding: 44px 48px;
  }

  .service-intro-panel::before {
    left: 48px;
    right: 48px;
  }

  .service-intro-panel__layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 36px 44px;
  }

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

@media (min-width: 1100px) {
  .service-intro-chips {
    grid-template-columns: 1fr 1fr;
  }
}

.services-page .prose.service-lead,
.services-page .service-close {
  max-width: 920px;
}

.services-page .service-close .section-title-page {
  max-width: 100%;
}

@media (min-width: 768px) {
  .services-page .service-close .section-title-page {
    max-width: 18ch;
  }
}

/* Hero */
.services-page .services-hero {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding-bottom: 40px;
  padding-left: max(28px, var(--site-edge));
  padding-right: max(28px, var(--site-edge));
}

@media (max-width: 900px) {
  .services-page .services-hero {
    padding-bottom: 28px;
  }
}

.services-page .services-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26, 24, 22, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 24, 22, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 72%);
  pointer-events: none;
  z-index: 1;
}

.services-page .services-hero .hero-bg,
.services-page .services-hero .hero-noise,
.services-page .services-hero .hero-line,
.services-page .services-hero .hero-year,
.services-page .services-hero .hero-tag,
.services-page .services-hero .hero-h1,
.services-page .services-hero .hero-sub,
.services-page .services-hero .contact-cta-actions {
  position: relative;
  z-index: 2;
}

.services-page .page-hero .hero-sub,
.services-page .services-hero .hero-sub {
  max-width: 780px;
  font-size: 15px;
  line-height: 1.65;
  margin-top: 18px;
}

.services-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(26, 24, 22, 0.08);
  max-width: 820px;
}

.services-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.services-hero-stat {
  flex: 1 1 140px;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(26, 24, 22, 0.07);
  box-shadow: 0 8px 24px rgba(26, 24, 22, 0.05);
  backdrop-filter: blur(8px);
}

.services-hero-stat__val {
  display: block;
  font-family: "Bebas Neue", sans-serif;
  font-size: 34px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #1a1814;
}

.services-hero-stat__val em {
  font-style: normal;
  color: #9a7b5f;
}

.services-hero-stat__lbl {
  display: block;
  margin-top: 6px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26, 24, 22, 0.48);
}

.services-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26, 24, 22, 0.62);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(26, 24, 22, 0.08);
}

.services-hero-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9a7b5f;
  box-shadow: 0 0 0 3px rgba(18, 138, 92, 0.14);
}

/* Brand panel */
.services-brand-section {
  padding-top: 0 !important;
  margin-top: -24px;
}

.services-brand-panel {
  position: relative;
  padding: 52px 56px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 92% 8%, rgba(201, 169, 110, 0.16) 0%, transparent 48%),
    radial-gradient(ellipse at 4% 92%, rgba(154, 123, 95, 0.08) 0%, transparent 44%),
    linear-gradient(155deg, #ffffff 0%, #faf7f2 100%);
  border: 1px solid rgba(26, 24, 22, 0.08);
  box-shadow:
    0 24px 64px rgba(26, 24, 22, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.services-brand-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 56px;
  right: 56px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #9a7b5f 0%, #c9a96e 50%, #8a6a47 100%);
}

.services-brand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.services-brand-chip {
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(26, 24, 22, 0.72);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(26, 24, 22, 0.07);
  box-shadow: 0 4px 14px rgba(26, 24, 22, 0.04);
}

.services-brand-chip strong {
  display: block;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a7b4a;
  margin-bottom: 4px;
  font-weight: 400;
}

/* Service offerings header */
.services-offerings-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 8px;
}

.services-offerings-head::after {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 169, 110, 0.45) 0%, rgba(26, 24, 22, 0.08) 55%, transparent 100%);
}

.services-offerings-count {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(26, 24, 22, 0.42);
  white-space: nowrap;
  padding-bottom: 4px;
}

/* Service cards — image + accent */
.services-page .service-cards {
  gap: 20px;
  margin-top: 36px;
}

.services-page .service-card {
  padding: 0 !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
}

.services-page .service-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
}

.services-page .service-card::before {
  display: none !important;
  content: none !important;
}

.services-page .service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1.02);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.services-page .service-card:hover .service-card__media img {
  transform: scale(1.07);
}

.services-page .service-card__media::after {
  display: none !important;
  content: none !important;
}

.services-page .service-card.reveal.motion-fly,
.services-page .service-card.reveal.motion-fly.visible {
  opacity: 1 !important;
  filter: none !important;
}

.services-page .service-card__media .service-card-num {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 2;
  margin: 0 !important;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
}

.services-page .service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px 30px 32px;
  border-top: 3px solid transparent;
}

.services-page .service-card--booth .service-card__body { border-top-color: #c9a96e; }
.services-page .service-card--fire .service-card__body { border-top-color: #8a5040; }
.services-page .service-card--acoustic .service-card__body { border-top-color: #9a7b5f; }
.services-page .service-card--carpet .service-card__body { border-top-color: #9a7b4a; }
.services-page .service-card--pressure .service-card__body { border-top-color: #3d6fa8; }

.services-page .service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  border-radius: 10px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: #fff;
}

.services-page .service-card--booth .service-card__icon { background: linear-gradient(135deg, #c9a96e, #8a6a33); }
.services-page .service-card--fire .service-card__icon { background: linear-gradient(135deg, #8a5040, #5c3028); }
.services-page .service-card--acoustic .service-card__icon { background: linear-gradient(135deg, #9a7b5f, #6f5630); }
.services-page .service-card--carpet .service-card__icon { background: linear-gradient(135deg, #9a7b4a, #6f5630); }
.services-page .service-card--pressure .service-card__icon { background: linear-gradient(135deg, #3d6fa8, #254870); }

.services-page .service-card h3 {
  font-size: clamp(26px, 2.4vw, 34px) !important;
  margin-bottom: 12px !important;
}

.services-page .service-card p {
  flex: 1;
  margin-bottom: 0;
}

.services-page .service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px !important;
  padding: 11px 0 2px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1a1814 !important;
  border-bottom: 1px solid rgba(26, 24, 22, 0.18) !important;
  transition: gap 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.services-page .service-card__link span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  background: rgba(26, 24, 22, 0.06);
  transition: transform 0.3s ease, background 0.3s ease;
}

.services-page .service-card:hover .service-card__link {
  gap: 14px;
  color: #9a7b5f !important;
  border-bottom-color: rgba(201, 169, 110, 0.45) !important;
}

.services-page .service-card:hover .service-card__link span {
  transform: translateX(2px);
  background: rgba(201, 169, 110, 0.14);
}

.services-page .service-card--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.services-page .service-card--wide .service-card__media {
  aspect-ratio: auto;
  min-height: 240px;
}

@media (max-width: 820px) {
  .services-page .service-card--wide {
    grid-template-columns: 1fr;
  }
}

/* Maintenance program */
.services-page #maintenance-program {
  border-radius: 22px;
  padding: 56px 56px 52px !important;
  background:
    radial-gradient(ellipse at 88% 12%, rgba(201, 169, 110, 0.14) 0%, transparent 46%),
    linear-gradient(160deg, #ffffff 0%, #f5f1ea 100%) !important;
}

.services-maint-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.services-maint-step {
  display: flex;
  flex-direction: column;
  padding: 32px 30px 34px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(26, 24, 22, 0.07);
  box-shadow: 0 12px 32px rgba(26, 24, 22, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.services-maint-step__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}

.services-maint-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(26, 24, 22, 0.08);
}

.services-maint-step__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0;
  border-radius: 50%;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(135deg, #c9a96e, #9a7b4a);
  box-shadow: 0 4px 12px rgba(154, 123, 74, 0.28);
}

.services-maint-step__head .bento-cell-h3,
.services-maint-step__head h3 {
  font-family: "Outfit", sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: #1a1814;
  margin: 0;
  flex: 1;
  min-width: 0;
}

.services-maint-step .bento-cell-body,
.services-maint-step p {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(26, 24, 22, 0.68);
  margin: 0;
}

.services-maint-cta {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.services-maint-cta p {
  margin: 0;
  max-width: 520px;
  font-size: 14px;
  color: rgba(26, 24, 22, 0.62);
}

/* Process timeline — card grid on service pages */
.services-page .page-section--surface .page-grid-2:has(.timeline-deep) {
  grid-template-columns: 1fr;
  gap: 40px;
}

.services-page .timeline-deep {
  margin-top: 0;
  padding-left: 0;
  border-left: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.services-page .timeline-deep-item {
  margin-bottom: 0;
  position: relative;
  padding: 30px 28px 32px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(26, 24, 22, 0.08);
  box-shadow: 0 12px 32px rgba(26, 24, 22, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.services-page .timeline-deep-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(26, 24, 22, 0.09);
}

.services-page .timeline-deep-item::before {
  display: none;
}

.services-page .timeline-deep-item .tl-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #7a6038;
  background: rgba(201, 169, 110, 0.14);
  border: 1px solid rgba(201, 169, 110, 0.22);
}

.services-page .timeline-deep-item h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.services-page .timeline-deep-item p {
  font-size: 14px;
  line-height: 1.75;
  max-width: none;
}

/* Closing CTA */
.services-cta-panel {
  position: relative;
  overflow: hidden;
  padding: 56px 56px 52px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 12% 50%, rgba(154, 123, 95, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 88% 30%, rgba(201, 169, 110, 0.18) 0%, transparent 48%),
    linear-gradient(135deg, #1a1814 0%, #2a2520 52%, #1a1814 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 72px rgba(26, 24, 22, 0.18);
}

.services-cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%);
  pointer-events: none;
}

.services-cta-panel .section-kicker,
.services-page .services-cta-panel .section-kicker {
  color: rgba(201, 169, 110, 0.92) !important;
}

.services-cta-panel .section-title-page,
.services-page .services-cta-panel .section-title-page {
  color: #ffffff !important;
  max-width: 720px;
}

.services-cta-panel .section-title-page em,
.services-page .services-cta-panel .section-title-page em {
  color: #c9a96e !important;
}

.services-cta-panel .prose,
.services-cta-panel .prose p,
.services-page .services-cta-panel .prose,
.services-page .services-cta-panel .prose p {
  color: rgba(255, 255, 255, 0.72) !important;
  max-width: 560px;
}

.services-cta-panel .contact-cta-actions {
  position: relative;
  z-index: 1;
}

.services-page .services-cta-panel .btn-outline-large {
  color: #ffffff !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  box-shadow: none !important;
}

.services-page .services-cta-panel .btn-outline-large:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(201, 169, 110, 0.72) !important;
}

.services-page .spec-list li {
  padding: 20px 0;
  font-size: 15px;
  line-height: 1.55;
}

.services-page .services-brand-panel {
  padding: 52px 56px !important;
}

@media (max-width: 1100px) {
  .services-maint-grid {
    grid-template-columns: 1fr;
  }

  .services-page .timeline-deep {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .services-brand-panel,
  .services-page #maintenance-program,
  .services-cta-panel {
    padding: 36px 28px;
  }

  .services-brand-panel::before {
    left: 28px;
    right: 28px;
  }

  .services-offerings-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .services-page:not(.services-page--acoustic) .page-section--surface,
  .services-page:not(.services-page--acoustic) .page-section--graphite,
  .services-page #maintenance-program,
  .services-cta-panel {
    padding: 32px 24px !important;
  }

  .services-maint-grid {
    grid-template-columns: 1fr;
  }

  .services-hero-stats {
    flex-direction: column;
  }
}

/* ─── ACOUSTIC PANELING — mobile-first (base = phone, min-width scales up) ─ */

html:has(body.services-page--acoustic) {
  overflow-x: hidden;
}

body.services-page--acoustic {
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: hidden;
  width: 100%;
}

.services-page--acoustic {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

.services-page--acoustic nav {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 16px !important;
  box-sizing: border-box;
}

/* Mobile nav — always hamburger (desktop nav disabled site-wide) */
.services-page--acoustic .nav-links,
.services-page--acoustic .nav-cta {
  display: none !important;
}

.services-page--acoustic .nav-mobile-toggle {
  display: inline-flex !important;
}

.services-page--acoustic,
.services-page--acoustic .page-main,
.services-page--acoustic .service-acoustic-hero,
.services-page--acoustic .service-acoustic-hero__inner,
.services-page--acoustic .service-acoustic-hero__copy,
.services-page--acoustic .service-intro-panel,
.services-page--acoustic .service-intro-panel__head,
.service-acoustic-feature-bar,
.service-acoustic-services__grid,
.acoustic-showcase {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

/* Base (phone) — page shell */
.services-page--acoustic .page-main {
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 80px;
  overflow-x: hidden;
}

.services-page--acoustic .page-section {
  padding: 32px 0;
}

@media (min-width: 768px) {
  .services-page--acoustic .page-section {
    padding: 48px 0;
  }
}

@media (min-width: 1100px) {
  .services-page--acoustic .page-section {
    padding: 64px 0;
  }
}

.services-page--acoustic .page-section--surface,
.services-page--acoustic .page-section--graphite {
  padding: 24px 16px !important;
  margin-left: 0;
  margin-right: 0;
}

.services-page--acoustic .section-title-page,
.services-page--acoustic .service-acoustic-hero .hero-h1 {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
  font-size: clamp(28px, 7.5vw, 72px);
  line-height: 0.95;
}

.services-page--acoustic .service-acoustic-services__primary,
.services-page--acoustic .service-acoustic-services__secondary,
.services-page--acoustic .service-intro-panel__layout,
.services-page--acoustic .service-intro-panel__copy,
.services-page--acoustic .service-intro-aside,
.services-page--acoustic .acoustic-showcase__copy,
.services-page--acoustic .service-close,
.services-page--acoustic .prose,
.services-page--acoustic .spec-list,
.services-page--acoustic .spec-list li {
  min-width: 0;
  max-width: 100%;
}

.services-page--acoustic .spec-list li {
  font-size: 14px;
  line-height: 1.55;
  padding: 14px 0;
  overflow-wrap: anywhere;
}

.services-page--acoustic .service-close .section-title-page {
  max-width: 100% !important;
}

/* Neutralize legacy page-hero rules — acoustic uses service-acoustic-hero */
.services-page--acoustic .service-acoustic-hero .hero-tag,
.services-page--acoustic .service-acoustic-hero .hero-h1,
.services-page--acoustic .service-acoustic-hero .hero-sub,
.services-page--acoustic .service-acoustic-hero .services-hero-pills,
.services-page--acoustic .service-acoustic-hero__ctas {
  position: relative;
  z-index: 2;
}

.services-page--acoustic .service-acoustic-hero .hero-tag {
  color: #c5a059;
}

.services-page--acoustic .section-title-page em {
  color: #9a7b5f;
}

/* Hero — stacked copy then image (base = phone) */
.service-acoustic-hero {
  position: relative;
  overflow-x: clip;
  padding:
    calc(var(--nav-height, 72px) + 20px)
    16px
    28px;
  width: 100%;
  box-sizing: border-box;
}

.service-acoustic-hero__bg,
.service-acoustic-hero__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.service-acoustic-hero__bg {
  background:
    radial-gradient(ellipse at 88% 12%, rgba(18, 138, 92, 0.09) 0%, transparent 48%),
    radial-gradient(ellipse at 8% 88%, rgba(201, 169, 110, 0.1) 0%, transparent 44%),
    #faf9f7;
}

.service-acoustic-hero__noise {
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.service-acoustic-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: min(1380px, 100%);
  margin: 0 auto;
}

.service-acoustic-hero__copy {
  min-width: 0;
  width: 100%;
}

.service-acoustic-hero__index {
  display: block;
  margin-bottom: 12px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a7b5f;
}

.services-page--acoustic .service-acoustic-hero .hero-h1 {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(32px, 8.5vw, 72px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: #1a1814;
  margin-bottom: 16px;
  max-width: 100%;
}

.services-page--acoustic .service-acoustic-hero .hero-h1 em {
  font-family: "DM Serif Display", serif;
  font-style: italic;
  color: #9a7b5f;
}

.services-page--acoustic .service-acoustic-hero .hero-sub {
  max-width: 100%;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(26, 24, 22, 0.72);
  margin-bottom: 0;
}

.services-page--acoustic .service-acoustic-hero .services-hero-pills {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}

.services-page--acoustic .service-acoustic-hero .services-hero-pill {
  max-width: 100%;
  white-space: normal;
}

.services-page--acoustic .service-acoustic-hero__ctas,
.services-page--acoustic .service-acoustic-close__ctas {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

/* Beat spacing-fix global btn rules on acoustic CTAs */
.services-page--acoustic .service-acoustic-hero__ctas .btn-large,
.services-page--acoustic .service-acoustic-hero__ctas .btn-outline-large,
.services-page--acoustic .service-acoustic-close__ctas .btn-large,
.services-page--acoustic .service-acoustic-close__ctas .btn-outline-large {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  min-height: 44px !important;
  white-space: normal !important;
  padding: 12px 16px !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  line-height: 1.4 !important;
}

.service-acoustic-hero__visual {
  margin: 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(26, 24, 22, 0.08);
  box-shadow: 0 16px 40px rgba(26, 24, 22, 0.08);
  background: #fff;
  width: 100%;
}

.service-acoustic-hero__visual img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.service-acoustic-hero__caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(26, 24, 22, 0.62);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  max-width: calc(100% - 24px);
  white-space: normal;
}

/* Feature bar — single column base */
.service-acoustic-feature-bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  max-width: min(1380px, 100%);
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(26, 24, 22, 0.08);
}

.service-acoustic-feature-bar__item {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(26, 24, 22, 0.07);
  box-shadow: 0 8px 22px rgba(26, 24, 22, 0.05);
  min-width: 0;
}

.service-acoustic-feature-bar__val {
  display: block;
  font-family: "Bebas Neue", sans-serif;
  font-size: 24px;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #9a7b5f;
}

.service-acoustic-feature-bar__lbl {
  display: block;
  margin-top: 6px;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(26, 24, 22, 0.52);
  overflow-wrap: anywhere;
}

/* Intro panel */
.services-page--acoustic .service-intro-section {
  padding-top: 32px;
  padding-bottom: 40px;
}

.services-page--acoustic .service-intro-panel {
  padding: 20px 16px;
}

/* Proofing vs paneling comparison */
.services-page--acoustic .acoustic-compare-section {
  padding-top: 8px;
  padding-bottom: 40px;
}

.acoustic-compare {
  min-width: 0;
}

.acoustic-compare__head {
  max-width: 720px;
  margin-bottom: 28px;
}

.acoustic-compare__lead {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(26, 24, 22, 0.72);
}

.acoustic-compare__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.acoustic-compare__card {
  padding: 24px 20px;
  border-radius: 16px;
  border: 1px solid rgba(26, 24, 22, 0.08);
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(26, 24, 22, 0.05);
  min-width: 0;
}

.acoustic-compare__card--proofing {
  border-top: 3px solid rgba(26, 24, 22, 0.18);
}

.acoustic-compare__card--paneling {
  border-top: 3px solid rgba(128, 64, 208, 0.55);
  background: linear-gradient(180deg, rgba(128, 64, 208, 0.04) 0%, #ffffff 120px);
}

.acoustic-compare__tag {
  display: inline-block;
  margin-bottom: 12px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(26, 24, 22, 0.52);
}

.acoustic-compare__card--paneling .acoustic-compare__tag {
  color: rgba(128, 64, 208, 0.85);
}

.acoustic-compare__title {
  margin: 0 0 12px;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(28px, 6.5vw, 40px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: #1a1814;
  overflow-wrap: anywhere;
}

.acoustic-compare__title em {
  font-family: "DM Serif Display", serif;
  font-style: italic;
  font-weight: 400;
  color: rgba(128, 64, 208, 0.9);
}

.acoustic-compare__card--proofing .acoustic-compare__title em {
  color: rgba(26, 24, 22, 0.62);
}

.acoustic-compare__body {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(26, 24, 22, 0.72);
}

.acoustic-compare__list {
  margin: 0 0 16px;
  padding-left: 1.1em;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(26, 24, 22, 0.68);
}

.acoustic-compare__list li + li {
  margin-top: 8px;
}

.acoustic-compare__best {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(26, 24, 22, 0.08);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(26, 24, 22, 0.78);
}

.acoustic-compare__best strong {
  color: #1a1814;
}

.acoustic-compare__note {
  padding: 20px 18px;
  border-radius: 14px;
  border: 1px solid rgba(128, 64, 208, 0.14);
  background: rgba(128, 64, 208, 0.05);
}

.acoustic-compare__note-label {
  display: block;
  margin-bottom: 10px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(128, 64, 208, 0.85);
}

.acoustic-compare__note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(26, 24, 22, 0.78);
}

.acoustic-compare__note strong {
  color: #1a1814;
}

/* Services grid — single column base */
.services-page--acoustic .service-acoustic-services.page-section--surface {
  padding: 24px 16px !important;
  margin-left: 0;
  margin-right: 0;
  border-radius: 16px;
}

.service-acoustic-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  min-width: 0;
}

.service-acoustic-services__title {
  font-size: clamp(26px, 7vw, 52px) !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Showcase — stacked base */
.services-page--acoustic .acoustic-showcase-section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.acoustic-showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  min-width: 0;
}

.acoustic-showcase__copy {
  min-width: 0;
}

.acoustic-showcase__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(26, 24, 22, 0.72);
  max-width: 100%;
}

.acoustic-showcase__figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(26, 24, 22, 0.08);
  box-shadow: 0 16px 40px rgba(26, 24, 22, 0.08);
}

.acoustic-showcase__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center center;
}

/* Small tablet — 640px+ */
@media (min-width: 640px) {
  .services-page--acoustic .page-main {
    padding-left: 20px;
    padding-right: 20px;
  }

  .services-page--acoustic .page-section--surface,
  .services-page--acoustic .page-section--graphite {
    padding: 32px 20px !important;
  }

  .service-acoustic-hero {
    padding-left: 20px;
    padding-right: 20px;
  }

  .services-page--acoustic .service-acoustic-hero__ctas,
  .services-page--acoustic .service-acoustic-close__ctas {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .services-page--acoustic .service-acoustic-hero__ctas .btn-large,
  .services-page--acoustic .service-acoustic-hero__ctas .btn-outline-large,
  .services-page--acoustic .service-acoustic-close__ctas .btn-large,
  .services-page--acoustic .service-acoustic-close__ctas .btn-outline-large {
    width: auto !important;
    flex: 1 1 auto;
    min-width: min(100%, 200px);
  }

  .service-acoustic-feature-bar__val {
    font-size: 28px;
  }

  .service-acoustic-feature-bar__lbl {
    font-size: 9px;
  }

  .acoustic-compare__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .acoustic-compare__card {
    padding: 28px 24px;
  }

  .services-page--acoustic .acoustic-compare-section {
    padding-bottom: 48px;
  }
}

/* Tablet — 768px+ */
@media (min-width: 768px) {
  .services-page--acoustic .page-main {
    padding-left: 28px;
    padding-right: 28px;
  }

  .services-page--acoustic .page-section {
    padding: 48px 0;
  }

  .services-page--acoustic .page-section--surface,
  .services-page--acoustic .page-section--graphite {
    padding: 44px 36px !important;
  }

  .service-acoustic-hero {
    padding:
      calc(var(--nav-height, 72px) + 40px)
      28px
      56px;
  }

  .service-acoustic-hero__inner {
    gap: 36px;
  }

  .services-page--acoustic .service-acoustic-hero .hero-h1 {
    font-size: clamp(44px, 6vw, 72px);
    max-width: 14ch;
  }

  .services-page--acoustic .service-acoustic-hero .hero-sub {
    font-size: 15px;
    line-height: 1.75;
  }

  .service-acoustic-feature-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 40px;
    padding-top: 32px;
  }

  .services-page--acoustic .service-acoustic-services.page-section--surface {
    padding: 44px 36px !important;
    border-radius: 22px;
  }

  .service-acoustic-services__grid {
    gap: 48px;
  }

  .services-page--acoustic .service-intro-section {
    padding-top: 48px;
    padding-bottom: 56px;
  }

  .services-page--acoustic .service-intro-panel {
    padding: 36px 32px;
  }

  .services-page--acoustic .acoustic-showcase-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .acoustic-showcase__lead {
    font-size: 15px;
    line-height: 1.75;
    max-width: 42ch;
  }
}

/* Desktop — 1100px+ */
@media (min-width: 1100px) {
  .services-page--acoustic .page-main {
    padding-left: max(28px, var(--site-edge));
    padding-right: max(28px, var(--site-edge));
  }

  .services-page--acoustic .page-section {
    padding: 64px 0;
  }

  .service-acoustic-hero {
    padding:
      calc(var(--nav-height, 72px) + 48px)
      max(28px, var(--site-edge))
      64px;
  }

  .service-acoustic-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: 48px 56px;
    align-items: center;
  }

  .services-page--acoustic .service-acoustic-hero .hero-h1 {
    font-size: clamp(52px, 5vw, 76px);
    max-width: 12ch;
  }

  .service-acoustic-services__grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px 72px;
    align-items: start;
  }

  .acoustic-showcase {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 48px 56px;
    align-items: center;
  }

  .services-page--acoustic .service-acoustic-services.page-section--surface {
    padding: 56px 52px !important;
  }

  .services-page--acoustic .service-acoustic-hero__ctas .btn-large,
  .services-page--acoustic .service-acoustic-hero__ctas .btn-outline-large,
  .services-page--acoustic .service-acoustic-close__ctas .btn-large,
  .services-page--acoustic .service-acoustic-close__ctas .btn-outline-large {
    padding: 14px 28px !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FIRE RETARDANT SERVICE PAGE
   ═══════════════════════════════════════════════════════════════════ */

.services-page--fire .service-fire-hero,
.services-page--fire .service-fire-hero__inner,
.services-page--fire .service-fire-hero__copy,
.services-page--fire .service-fire-feature-bar,
.services-page--fire .service-fire-services__grid,
.services-page--fire .fire-showcase,
.services-page--fire .fire-process,
.services-page--fire .fire-materials {
  max-width: 100%;
  box-sizing: border-box;
}

.service-fire-hero {
  position: relative;
  overflow-x: clip;
  padding:
    calc(var(--nav-height, 72px) + 20px)
    16px
    28px;
  width: 100%;
  box-sizing: border-box;
}

.service-fire-hero__bg,
.service-fire-hero__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.service-fire-hero__bg {
  background:
    radial-gradient(ellipse at 88% 12%, rgba(201, 74, 74, 0.1) 0%, transparent 48%),
    radial-gradient(ellipse at 8% 88%, rgba(201, 169, 110, 0.1) 0%, transparent 44%),
    #faf9f7;
}

.service-fire-hero__noise {
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.service-fire-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: min(1380px, 100%);
  margin: 0 auto;
}

.service-fire-hero__copy {
  min-width: 0;
  width: 100%;
}

.service-fire-hero__index {
  display: block;
  margin-bottom: 12px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a5040;
}

.services-page--fire .service-fire-hero .hero-h1 {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(32px, 8.5vw, 72px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: #1a1814;
  margin-bottom: 16px;
  max-width: 100%;
}

.services-page--fire .service-fire-hero .hero-h1 em {
  font-family: "DM Serif Display", serif;
  font-style: italic;
  color: #8a5040;
}

.services-page--fire .service-fire-hero .hero-sub {
  max-width: 100%;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(26, 24, 22, 0.72);
}

.services-page--fire .service-fire-hero .services-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.services-page--fire .service-fire-hero .services-hero-pill {
  font-size: 10px;
}

.services-page--fire .service-fire-hero__ctas,
.services-page--fire .service-fire-close__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 24px;
}

.services-page--fire .service-fire-hero__ctas .btn-large,
.services-page--fire .service-fire-hero__ctas .btn-outline-large,
.services-page--fire .service-fire-close__ctas .btn-large,
.services-page--fire .service-fire-close__ctas .btn-outline-large {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.service-fire-hero__visual {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(201, 74, 74, 0.12);
  box-shadow: 0 20px 48px rgba(26, 24, 22, 0.1);
}

.service-fire-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.service-fire-hero__caption {
  display: block;
  padding: 12px 16px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26, 24, 22, 0.55);
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid rgba(26, 24, 22, 0.06);
}

.service-fire-feature-bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: min(1380px, 100%);
  margin: 40px auto 0;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(26, 24, 22, 0.08);
  background: rgba(26, 24, 22, 0.08);
}

.service-fire-feature-bar__item {
  padding: 18px 14px;
  text-align: center;
  background: rgba(255, 255, 255, 0.96);
}

.service-fire-feature-bar__val {
  display: block;
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: #8a5040;
}

.service-fire-feature-bar__lbl {
  display: block;
  margin-top: 6px;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(26, 24, 22, 0.52);
  overflow-wrap: anywhere;
}

.services-page--fire .service-intro-section {
  padding-top: 32px;
  padding-bottom: 40px;
}

/* Materials grid */
.services-page--fire .fire-materials-section {
  padding-top: 8px;
  padding-bottom: 40px;
}

.fire-materials__head {
  max-width: 720px;
  margin-bottom: 28px;
}

.fire-materials__lead {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(26, 24, 22, 0.72);
}

.fire-materials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.fire-materials__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(26, 24, 22, 0.08);
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(26, 24, 22, 0.06);
}

.fire-materials__figure {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.fire-materials__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fire-materials__body {
  padding: 22px 20px 24px;
}

.fire-materials__tag {
  display: block;
  margin-bottom: 10px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a5040;
}

.fire-materials__title {
  margin: 0 0 10px;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(22px, 5vw, 28px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #1a1814;
}

.fire-materials__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(26, 24, 22, 0.72);
}

/* Showcase */
.services-page--fire .fire-showcase-section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.fire-showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  min-width: 0;
}

.fire-showcase__lead {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(26, 24, 22, 0.72);
}

.fire-showcase__list {
  margin: 0;
  padding-left: 1.1em;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(26, 24, 22, 0.68);
}

.fire-showcase__list li + li {
  margin-top: 8px;
}

.fire-showcase__figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(26, 24, 22, 0.08);
  box-shadow: 0 16px 40px rgba(26, 24, 22, 0.08);
}

.fire-showcase__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Process */
.services-page--fire .fire-process-section {
  padding: 24px 16px !important;
  margin-left: 0;
  margin-right: 0;
  border-radius: 16px;
}

.fire-process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
  min-width: 0;
}

.fire-process__visual {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(26, 24, 22, 0.08);
  box-shadow: 0 16px 40px rgba(26, 24, 22, 0.08);
}

.fire-process__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.fire-process__caption {
  display: block;
  padding: 12px 16px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26, 24, 22, 0.55);
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid rgba(26, 24, 22, 0.06);
}

.fire-process__lead {
  margin: 12px 0 24px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(26, 24, 22, 0.72);
}

.fire-process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.fire-process__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(26, 24, 22, 0.06);
}

.fire-process__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #8a5040;
  border: 1px solid rgba(201, 74, 74, 0.28);
  background: rgba(201, 74, 74, 0.06);
}

.fire-process__step h3 {
  margin: 0 0 6px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 20px;
  letter-spacing: 0.03em;
  color: #1a1814;
}

.fire-process__step p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(26, 24, 22, 0.68);
}

/* Services grid */
.services-page--fire .service-fire-services.page-section--surface {
  padding: 24px 16px !important;
  margin-left: 0;
  margin-right: 0;
  border-radius: 16px;
}

.service-fire-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  min-width: 0;
}

.service-fire-services__title {
  font-size: clamp(26px, 7vw, 52px) !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 640px) {
  .services-page--fire .page-main {
    padding-left: 20px;
    padding-right: 20px;
  }

  .service-fire-hero {
    padding-left: 20px;
    padding-right: 20px;
  }

  .services-page--fire .service-fire-hero__ctas,
  .services-page--fire .service-fire-close__ctas {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .services-page--fire .service-fire-hero__ctas .btn-large,
  .services-page--fire .service-fire-hero__ctas .btn-outline-large,
  .services-page--fire .service-fire-close__ctas .btn-large,
  .services-page--fire .service-fire-close__ctas .btn-outline-large {
    width: auto !important;
    flex: 1 1 auto;
    min-width: min(100%, 200px);
  }

  .service-fire-feature-bar__val {
    font-size: 28px;
  }

  .service-fire-feature-bar__lbl {
    font-size: 9px;
  }

  .fire-materials__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 768px) {
  .services-page--fire .page-main {
    padding-left: 28px;
    padding-right: 28px;
  }

  .services-page--fire .page-section {
    padding: 48px 0;
  }

  .services-page--fire .page-section--surface,
  .services-page--fire .page-section--graphite {
    padding: 44px 36px !important;
  }

  .service-fire-hero {
    padding:
      calc(var(--nav-height, 72px) + 36px)
      28px
      40px;
  }

  .service-fire-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: 40px 48px;
    align-items: center;
  }

  .services-page--fire .service-fire-hero .hero-h1 {
    font-size: clamp(44px, 5.5vw, 68px);
  }

  .fire-showcase {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 40px 48px;
  }

  .fire-process {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 40px 48px;
    align-items: start;
  }

  .services-page--fire .fire-process-section,
  .services-page--fire .service-fire-services.page-section--surface {
    padding: 44px 36px !important;
    border-radius: 22px;
  }

  .service-fire-services__grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px 56px;
    align-items: start;
  }

  .services-page--fire .service-intro-section {
    padding-top: 48px;
    padding-bottom: 56px;
  }
}

@media (min-width: 1100px) {
  .services-page--fire .page-main {
    padding-left: max(28px, var(--site-edge));
    padding-right: max(28px, var(--site-edge));
  }

  .service-fire-hero {
    padding:
      calc(var(--nav-height, 72px) + 48px)
      max(28px, var(--site-edge))
      64px;
  }

  .services-page--fire .service-fire-hero .hero-h1 {
    font-size: clamp(52px, 5vw, 76px);
    max-width: 12ch;
  }

  .services-page--fire .fire-process-section,
  .services-page--fire .service-fire-services.page-section--surface {
    padding: 56px 52px !important;
  }
}


/* ---- css/services-bento.css ---- */
/*
  SERVICES PAGE — Premium light bento grid system
  Mobile-first · high contrast · conversion-focused
*/

/* ─── Layout tokens ─────────────────────────────────────────────── */
.services-page {
  --svc-bg: #faf9f7;
  --svc-card: #ffffff;
  --svc-charcoal: #1a1814;
  --svc-muted: rgba(26, 24, 22, 0.68);
  --svc-soft: rgba(26, 24, 22, 0.52);
  --svc-gold: #c9a96e;
  --svc-bronze: #9a7b5f;
  --svc-burgundy: #8a5040;
  --svc-border: rgba(26, 24, 22, 0.08);
  --svc-shadow: 0 12px 40px rgba(26, 24, 22, 0.07);
  --svc-shadow-hover: 0 24px 56px rgba(26, 24, 22, 0.12);
  --svc-radius: 22px;
  --svc-radius-sm: 16px;
  --svc-gap: 16px;
  --svc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  .services-page {
    --svc-gap: 20px;
  }
}

@media (min-width: 1100px) {
  .services-page {
    --svc-gap: 24px;
  }
}

/* ─── Section shell ─────────────────────────────────────────────── */
.services-page .page-main {
  max-width: min(1280px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(16px, var(--site-edge, 16px));
  padding-right: max(16px, var(--site-edge, 16px));
  padding-bottom: 48px;
}

@media (min-width: 768px) {
  .services-page .page-main {
    padding-left: max(28px, var(--site-edge, 28px));
    padding-right: max(28px, var(--site-edge, 28px));
    padding-bottom: 64px;
  }
}

@media (min-width: 901px) {
  .services-page .page-main {
    max-width: min(1680px, 100%);
    padding-left: max(60px, var(--h-pad, 100px));
    padding-right: max(60px, var(--h-pad, 100px));
    padding-bottom: clamp(96px, 10vh, 132px);
  }
}

@media (min-width: 1100px) {
  .services-page .page-main {
    max-width: min(1680px, 100%);
    padding-bottom: 80px;
  }
}

.svc-section {
  padding: 48px 0;
  position: relative;
}

@media (min-width: 768px) {
  .svc-section {
    padding: 64px 0;
  }
}

@media (min-width: 1100px) {
  .svc-section {
    padding: 80px 0;
  }
}

.svc-section__header {
  margin-bottom: 28px;
  max-width: 720px;
}

@media (min-width: 768px) {
  .svc-section__header {
    margin-bottom: 36px;
  }
}

.svc-kicker {
  display: block;
  margin-bottom: 12px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--svc-bronze);
}

.svc-title {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 0.92;
  letter-spacing: 0.03em;
  color: var(--svc-charcoal);
}

.svc-title em {
  font-family: "DM Serif Display", serif;
  font-style: italic;
  color: var(--svc-gold);
}

.svc-lead {
  margin: 16px 0 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--svc-muted);
}

/* ─── Hero ──────────────────────────────────────────────────────── */
.svc-hero-section {
  position: relative;
  overflow: hidden;
  padding:
    calc(var(--nav-height, 72px) + 28px)
    max(16px, var(--site-edge, 16px))
    36px;
}

@media (min-width: 901px) {
  .svc-hero-section {
    min-height: 0 !important;
    height: auto !important;
    padding-top: calc(var(--nav-offset, 88px) + 48px) !important;
    padding-bottom: 48px !important;
  }

  .svc-hero-section .hero-h1 {
    font-size: clamp(48px, 5.5vw, 88px) !important;
    max-width: 14ch !important;
  }

  .svc-trust-bar {
    margin-top: 36px;
    max-width: 100%;
  }
}

.svc-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26, 24, 22, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 24, 22, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 72%);
  pointer-events: none;
  z-index: 1;
}

.svc-hero-section .hero-bg,
.svc-hero-section .hero-noise,
.svc-hero-section .hero-line,
.svc-hero-section .hero-year,
.svc-hero-section .hero-tag,
.svc-hero-section .hero-h1,
.svc-hero-section .hero-sub,
.svc-hero-section .svc-hero__meta,
.svc-hero-section .svc-hero__actions {
  position: relative;
  z-index: 2;
}

.svc-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.svc-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 24px;
}

@media (min-width: 640px) {
  .svc-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

.svc-trust-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--svc-border);
  max-width: 900px;
}

@media (min-width: 640px) {
  .svc-trust-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

.svc-trust-stat {
  padding: 16px 18px;
  border-radius: var(--svc-radius-sm);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--svc-border);
  box-shadow: 0 8px 24px rgba(26, 24, 22, 0.05);
  backdrop-filter: blur(8px);
}

.svc-trust-stat__val {
  display: block;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(28px, 4vw, 36px);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--svc-charcoal);
}

.svc-trust-stat__val em {
  font-style: normal;
  color: var(--svc-gold);
}

.svc-trust-stat__lbl {
  display: block;
  margin-top: 6px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--svc-soft);
}

/* ─── Bento grid ────────────────────────────────────────────────── */
.svc-bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--svc-gap);
}

@media (min-width: 640px) {
  .svc-bento-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .svc-bento-grid--12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .svc-span-12 { grid-column: span 12; }
  .svc-span-8 { grid-column: span 8; }
  .svc-span-6 { grid-column: span 6; }
  .svc-span-4 { grid-column: span 4; }
  .svc-span-3 { grid-column: span 3; }
  .svc-row-2 { grid-row: span 2; }
}

@media (min-width: 640px) and (max-width: 899px) {
  .svc-bento-grid--12 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .svc-bento-grid--12 .svc-span-8,
  .svc-bento-grid--12 .svc-row-2 {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 639px) {
  .svc-bento-grid--12 {
    grid-template-columns: 1fr;
  }
}

/* ─── Bento card ────────────────────────────────────────────────── */
.svc-bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 22px;
  border-radius: var(--svc-radius);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(201, 169, 110, 0.1) 0%, transparent 52%),
    linear-gradient(165deg, #ffffff 0%, #faf7f2 100%);
  border: 1px solid var(--svc-border);
  box-shadow: var(--svc-shadow);
  transition:
    transform 0.45s var(--svc-ease),
    box-shadow 0.45s var(--svc-ease),
    border-color 0.35s ease;
}

@media (min-width: 768px) {
  .svc-bento-card {
    padding: 32px 28px;
  }
}

.svc-bento-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--svc-bronze) 0%, var(--svc-gold) 100%);
  opacity: 0.85;
}

@media (min-width: 768px) {
  .svc-bento-card::before {
    left: 28px;
    right: 28px;
  }
}

.svc-bento-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--svc-shadow-hover);
  border-color: rgba(201, 169, 110, 0.22);
}

.svc-bento-card--accent-bronze::before {
  background: linear-gradient(90deg, var(--svc-bronze) 0%, var(--svc-gold) 100%);
}

.svc-bento-card--accent-burgundy::before {
  background: linear-gradient(90deg, var(--svc-burgundy) 0%, var(--svc-gold) 100%);
}

.svc-bento-card--dark {
  background:
    radial-gradient(ellipse at 12% 50%, rgba(154, 123, 95, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 88% 30%, rgba(201, 169, 110, 0.18) 0%, transparent 48%),
    linear-gradient(135deg, #1a1814 0%, #2a2520 52%, #1a1814 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 72px rgba(26, 24, 22, 0.18);
}

.svc-bento-card--dark::before {
  background: linear-gradient(90deg, rgba(201, 169, 110, 0.6) 0%, rgba(154, 123, 95, 0.4) 100%);
}

.svc-bento-card--dark .svc-bento-card__tag,
.svc-bento-card--dark .svc-bento-card__title,
.svc-bento-card--dark .svc-bento-card__body,
.svc-bento-card--dark .svc-bento-card__list li {
  color: rgba(255, 255, 255, 0.88);
}

.svc-bento-card--dark .svc-bento-card__tag {
  color: rgba(201, 169, 110, 0.92);
}

.svc-bento-card--dark .svc-bento-card__body {
  color: rgba(255, 255, 255, 0.72);
}

.svc-bento-card--dark .svc-bento-card__title em {
  color: var(--svc-gold);
}

/* Grid spans — desktop 12-col */
@media (min-width: 900px) {
  .svc-span-12 { grid-column: span 12; }
  .svc-span-8 { grid-column: span 8; }
  .svc-span-6 { grid-column: span 6; }
  .svc-span-4 { grid-column: span 4; }
  .svc-span-3 { grid-column: span 3; }
  .svc-row-2 { grid-row: span 2; }
}

.svc-bento-card__tag {
  display: block;
  margin-bottom: 12px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--svc-bronze);
}

.svc-bento-card__title {
  margin: 0 0 12px;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: var(--svc-charcoal);
}

.svc-bento-card__title em {
  font-family: "DM Serif Display", serif;
  font-style: italic;
  color: var(--svc-gold);
}

.svc-bento-card__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--svc-muted);
}

.svc-bento-card__body + .svc-bento-card__body {
  margin-top: 12px;
}

.svc-bento-card__list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.svc-bento-card__list li {
  position: relative;
  padding: 10px 0 10px 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--svc-muted);
  border-bottom: 1px solid var(--svc-border);
}

.svc-bento-card__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.svc-bento-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--svc-gold);
  transform: translateY(-50%);
}

.svc-bento-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(135deg, var(--svc-gold), #8a6a33);
  box-shadow: 0 6px 18px rgba(201, 169, 110, 0.28);
}

.svc-bento-card__icon--bronze {
  background: linear-gradient(135deg, var(--svc-bronze), #6f5630);
}

.svc-bento-card__icon--burgundy {
  background: linear-gradient(135deg, var(--svc-burgundy), #5c3028);
}

.svc-bento-card__outcome {
  margin-top: auto;
  padding-top: 16px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--svc-bronze);
}

.svc-bento-card__cta {
  margin-top: 20px;
}

/* Compact process chips inside brand row */
.svc-process-chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--svc-gap);
}

.svc-process-chips--spaced {
  margin-top: 24px;
}

@media (min-width: 640px) {
  .svc-process-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.svc-process-chip {
  padding: 22px 20px;
  border-radius: var(--svc-radius-sm);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--svc-border);
  box-shadow: 0 8px 24px rgba(26, 24, 22, 0.05);
  transition: transform 0.35s var(--svc-ease), box-shadow 0.35s var(--svc-ease);
}

.svc-process-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(26, 24, 22, 0.08);
}

.svc-process-chip__num {
  display: block;
  margin-bottom: 8px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--svc-gold);
}

.svc-process-chip__title {
  margin: 0 0 8px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--svc-charcoal);
}

.svc-process-chip__body {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--svc-muted);
}

/* ─── Services grid (image cards) ───────────────────────────────── */
.svc-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--svc-gap);
}

@media (min-width: 900px) {
  .svc-services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

.svc-service-card {
  position: relative;
  min-height: 380px;
  border-radius: var(--svc-radius);
  overflow: hidden;
  border: 1px solid var(--svc-border);
  box-shadow: var(--svc-shadow);
  cursor: pointer;
  transition: transform 0.45s var(--svc-ease), box-shadow 0.45s var(--svc-ease);
}

@media (min-width: 900px) {
  .svc-service-card {
    min-height: clamp(420px, 28vw, 520px);
  }
}

.svc-service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--svc-shadow-hover);
}

.svc-service-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--svc-ease);
}

.svc-service-card:hover img {
  transform: scale(1.06);
}

.svc-service-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 8, 6, 0.08) 0%,
    rgba(10, 8, 6, 0.35) 45%,
    rgba(10, 8, 6, 0.88) 100%
  );
  pointer-events: none;
}

.svc-service-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 24px 22px 26px;
}

@media (min-width: 768px) {
  .svc-service-card__body {
    padding: 28px 28px 32px;
  }
}

.svc-service-card__tag {
  display: block;
  margin-bottom: 8px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.92);
}

.svc-service-card__title {
  display: block;
  margin-bottom: 10px;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(28px, 3.5vw, 38px);
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: #f5f3ef;
}

.svc-service-card__desc {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(245, 243, 239, 0.78);
}

.svc-service-card__outcome {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(201, 169, 110, 0.95);
}

.svc-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: #f5f3ef;
  border-bottom: 1px solid rgba(245, 243, 239, 0.35);
  transition: gap 0.3s ease, border-color 0.3s ease;
}

.svc-service-card:hover .svc-service-card__link {
  gap: 12px;
  border-bottom-color: rgba(201, 169, 110, 0.65);
}

.svc-service-card__arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  transition: transform 0.35s var(--svc-ease), background 0.35s ease;
}

.svc-service-card:hover .svc-service-card__arrow {
  transform: translate(2px, -2px);
  background: rgba(201, 169, 110, 0.28);
}

/* ─── Process steps ─────────────────────────────────────────────── */
.svc-process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--svc-gap);
}

@media (min-width: 640px) {
  .svc-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 901px) {
  .svc-process-grid--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .svc-process-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.svc-process-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  border-radius: var(--svc-radius-sm);
  background: var(--svc-card);
  border: 1px solid var(--svc-border);
  box-shadow: var(--svc-shadow);
  transition: transform 0.35s var(--svc-ease), box-shadow 0.35s var(--svc-ease);
}

.svc-process-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--svc-shadow-hover);
}

.svc-process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(135deg, var(--svc-gold), var(--svc-bronze));
  box-shadow: 0 4px 12px rgba(154, 123, 74, 0.28);
}

.svc-process-step__title {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--svc-charcoal);
}

.svc-process-step__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--svc-muted);
}

/* ─── Proof / stats ─────────────────────────────────────────────── */
.svc-proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--svc-gap);
}

@media (min-width: 640px) {
  .svc-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .svc-proof-quote {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .svc-proof-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .svc-proof-stat { grid-column: span 3; }
  .svc-proof-quote { grid-column: span 6; }
  .svc-proof-trust { grid-column: span 3; }
}

.svc-proof-stat {
  padding: 28px 24px;
  border-radius: var(--svc-radius-sm);
  background: var(--svc-card);
  border: 1px solid var(--svc-border);
  box-shadow: var(--svc-shadow);
  text-align: center;
}

.svc-proof-stat__val {
  display: block;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(36px, 5vw, 48px);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--svc-charcoal);
}

.svc-proof-stat__val em {
  font-style: normal;
  color: var(--svc-gold);
}

.svc-proof-stat__lbl {
  display: block;
  margin-top: 8px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--svc-soft);
}

.svc-proof-stat__note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--svc-muted);
}

.svc-proof-quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 28px;
  border-radius: var(--svc-radius);
  background:
    radial-gradient(ellipse at 0% 100%, rgba(154, 123, 95, 0.08) 0%, transparent 50%),
    linear-gradient(165deg, #ffffff 0%, #f7f3ec 100%);
  border: 1px solid var(--svc-border);
  box-shadow: var(--svc-shadow);
}

.svc-proof-quote blockquote {
  margin: 0;
  font-family: "DM Serif Display", serif;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.45;
  color: var(--svc-charcoal);
}

.svc-proof-quote cite {
  display: block;
  margin-top: 16px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--svc-soft);
}

.svc-proof-trust {
  padding: 28px 24px;
  border-radius: var(--svc-radius-sm);
  background: var(--svc-card);
  border: 1px solid var(--svc-border);
  box-shadow: var(--svc-shadow);
}

.svc-proof-trust__title {
  margin: 0 0 12px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--svc-charcoal);
}

.svc-proof-trust__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-proof-trust__list li {
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--svc-muted);
  border-bottom: 1px solid var(--svc-border);
}

.svc-proof-trust__list li:last-child {
  border-bottom: none;
}

/* ─── Maintenance panel ─────────────────────────────────────────── */
.svc-maint-panel {
  padding: 32px 24px;
  border-radius: var(--svc-radius);
  background:
    radial-gradient(ellipse at 88% 12%, rgba(201, 169, 110, 0.14) 0%, transparent 46%),
    linear-gradient(160deg, #ffffff 0%, #f5f1ea 100%);
  border: 1px solid var(--svc-border);
  box-shadow: var(--svc-shadow);
}

@media (min-width: 768px) {
  .svc-maint-panel {
    padding: 48px 44px;
  }
}

.svc-maint-bento {
  margin-top: 28px;
}

@media (min-width: 901px) {
  .svc-maint-bento {
    gap: clamp(24px, 2.5vw, 34px);
  }

  .svc-maint-bento .svc-span-4 {
    grid-column: span 4;
  }

  .svc-maint-bento .svc-span-6 {
    grid-column: span 6;
  }
}

.svc-maint-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px;
  border-radius: var(--svc-radius-sm);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--svc-border);
  box-shadow: 0 8px 22px rgba(26, 24, 22, 0.05);
  transition: transform 0.35s var(--svc-ease), box-shadow 0.35s var(--svc-ease);
  overflow: hidden;
}

.svc-maint-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--svc-bronze) 0%, var(--svc-gold) 100%);
  opacity: 0.85;
}

.svc-maint-step--emerald::before {
  background: linear-gradient(90deg, #128a5c 0%, #1ab87a 100%);
}

.svc-maint-step--gold::before {
  background: linear-gradient(90deg, var(--svc-bronze) 0%, var(--svc-gold) 100%);
}

.svc-maint-step--purple::before {
  background: linear-gradient(90deg, #5a3d8a 0%, #8040d0 100%);
}

.svc-maint-step__head {
  display: flex;
  align-items: center;
  gap: 18px;
}

.svc-maint-step__head .svc-process-step__num {
  flex-shrink: 0;
  margin: 0;
}

.svc-maint-step__head .svc-process-step__title {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.svc-maint-step .svc-process-step__body {
  margin: 0;
}

.svc-maint-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(26, 24, 22, 0.08);
}

.svc-maint-cta {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.svc-maint-cta p {
  margin: 0;
  max-width: 520px;
  font-size: 14px;
  color: var(--svc-muted);
}

/* ─── Final CTA ─────────────────────────────────────────────────── */
.svc-cta-section {
  padding-bottom: 64px;
}

.svc-cta-panel {
  position: relative;
  overflow: hidden;
  padding: 40px 28px;
  border-radius: var(--svc-radius);
  background:
    radial-gradient(ellipse at 12% 50%, rgba(154, 123, 95, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 88% 30%, rgba(201, 169, 110, 0.18) 0%, transparent 48%),
    linear-gradient(135deg, #1a1814 0%, #2a2520 52%, #1a1814 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 72px rgba(26, 24, 22, 0.18);
}

@media (min-width: 768px) {
  .svc-cta-panel {
    padding: 56px 52px;
  }
}

.svc-cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%);
  pointer-events: none;
}

.svc-cta-panel > * {
  position: relative;
  z-index: 1;
}

.svc-cta-panel .svc-kicker {
  color: rgba(201, 169, 110, 0.92);
}

.svc-cta-panel .svc-title {
  color: #ffffff;
  max-width: 720px;
}

.services-page .svc-cta-panel .svc-lead {
  color: #ffffff;
  max-width: 560px;
}

.svc-cta-panel .contact-cta-actions {
  margin-top: 28px;
}

.services-page .svc-cta-panel .btn-outline-large {
  color: #ffffff !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
}

.services-page .svc-cta-panel .btn-outline-large:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(201, 169, 110, 0.72) !important;
}

/* ─── Override legacy dark bento on services page ───────────────── */
.services-page .bento-section:not(.svc-section) {
  padding-left: 0;
  padding-right: 0;
}

.services-page .svc-section + .svc-section {
  border-top: 1px solid rgba(26, 24, 22, 0.06);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .svc-bento-card,
  .svc-service-card,
  .svc-process-step,
  .svc-process-chip,
  .svc-maint-step {
    transition: none;
  }

  .svc-service-card:hover img {
    transform: none;
  }
}


/* ---- css/site-bento-theme.css ---- */
/*
  SITE BENTO THEME — unified light editorial system
  Extends services-page design tokens to every page
*/

/* ─── Global canvas ─────────────────────────────────────────────── */
body.services-page {
  --svc-bg: #faf9f7;
  --svc-card: #ffffff;
  --svc-charcoal: #1a1814;
  --svc-muted: rgba(26, 24, 22, 0.68);
  --svc-soft: rgba(26, 24, 22, 0.52);
  --svc-gold: #c9a96e;
  --svc-bronze: #9a7b5f;
  --svc-burgundy: #8a5040;
  --svc-border: rgba(26, 24, 22, 0.08);
  --svc-shadow: 0 12px 40px rgba(26, 24, 22, 0.07);
  --svc-shadow-hover: 0 24px 56px rgba(26, 24, 22, 0.12);
  --svc-radius: 22px;
  --svc-radius-sm: 16px;
  --svc-gap: 16px;
  --svc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--svc-charcoal);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(201, 169, 110, 0.07) 0%, transparent 42%),
    radial-gradient(ellipse at 0% 48%, rgba(154, 123, 95, 0.05) 0%, transparent 38%),
    var(--svc-bg);
}

@media (min-width: 768px) {
  body.services-page { --svc-gap: 20px; }
}

@media (min-width: 1100px) {
  body.services-page { --svc-gap: 24px; }
}

/* ─── Legacy typography bridge ──────────────────────────────────── */
.services-page .section-kicker {
  display: block;
  margin-bottom: 12px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--svc-bronze) !important;
}

.services-page .section-title-page {
  margin: 0 0 16px;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 0.92;
  letter-spacing: 0.03em;
  color: var(--svc-charcoal) !important;
}

.services-page .section-title-page em {
  font-family: "DM Serif Display", serif;
  font-style: italic;
  color: var(--svc-gold) !important;
}

.services-page .prose,
.services-page .prose p {
  color: var(--svc-muted) !important;
}

.services-page .prose strong {
  color: var(--svc-charcoal) !important;
}

/* Dark closing CTA panels — white copy on charcoal ground */
.services-page .service-close,
.services-page .service-fire-close,
.services-page .service-acoustic-close {
  padding: 48px 28px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 169, 110, 0.1) 0%, transparent 55%),
    linear-gradient(165deg, rgba(28, 24, 20, 0.94) 0%, rgba(14, 12, 10, 0.97) 100%);
  border: 1px solid rgba(201, 169, 110, 0.14);
}

@media (min-width: 901px) {
  .services-page .service-close,
  .services-page .service-fire-close,
  .services-page .service-acoustic-close {
    padding: 64px 56px;
    border-radius: 24px;
  }
}

.services-page .service-close .section-kicker,
.services-page .service-fire-close .section-kicker,
.services-page .service-acoustic-close .section-kicker {
  color: rgba(201, 169, 110, 0.78) !important;
}

.services-page .service-close .section-title-page,
.services-page .service-fire-close .section-title-page,
.services-page .service-acoustic-close .section-title-page {
  color: #f5f3ef !important;
}

.services-page .service-close .section-title-page em,
.services-page .service-fire-close .section-title-page em,
.services-page .service-acoustic-close .section-title-page em {
  color: #c9a96e !important;
}

.services-page .service-close .prose,
.services-page .service-close .prose p,
.services-page .service-fire-close .prose,
.services-page .service-fire-close .prose p,
.services-page .service-acoustic-close .prose,
.services-page .service-acoustic-close .prose p {
  color: rgba(245, 243, 239, 0.78) !important;
}

.services-page .service-close .prose strong,
.services-page .service-fire-close .prose strong,
.services-page .service-acoustic-close .prose strong {
  color: #f5f3ef !important;
}

.services-page .service-close .btn-outline-large,
.services-page .service-fire-close .btn-outline-large,
.services-page .service-acoustic-close .btn-outline-large {
  color: #f5f3ef !important;
  border-color: rgba(201, 169, 110, 0.55) !important;
}

.services-page .service-close .btn-outline-large:hover,
.services-page .service-fire-close .btn-outline-large:hover,
.services-page .service-acoustic-close .btn-outline-large:hover {
  color: #050505 !important;
  background: #c9a96e !important;
  border-color: #c9a96e !important;
}

/* ─── Light heroes (all interior + home) ──────────────────────── */
.services-page .page-hero,
.services-page .services-hero,
.services-page .process-hero,
.services-page .contact-hero,
.services-page .studio-hero,
.services-page .team-hero,
.services-page #hero {
  background: linear-gradient(165deg, #faf9f7 0%, #ffffff 52%, #f3efe8 100%) !important;
}

.services-page .page-hero .hero-bg,
.services-page .services-hero .hero-bg,
.services-page .process-hero .hero-bg,
.services-page .contact-hero .hero-bg,
.services-page .studio-hero .hero-bg,
.services-page .team-hero .hero-bg,
.services-page #hero .hero-bg {
  background:
    radial-gradient(ellipse at 72% 18%, rgba(201, 169, 110, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse at 10% 88%, rgba(154, 123, 95, 0.08) 0%, transparent 48%),
    linear-gradient(to top, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
}

.services-page .page-hero .hero-line,
.services-page .services-hero .hero-line,
.services-page .process-hero .hero-line,
.services-page .contact-hero .hero-line,
.services-page .studio-hero .hero-line,
.services-page .team-hero .hero-line,
.services-page #hero .hero-line {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201, 169, 110, 0.22) 36%,
    rgba(201, 169, 110, 0.08) 72%,
    transparent 100%
  ) !important;
}

.services-page .hero-year,
.services-page .page-hero .hero-h1,
.services-page #hero .hero-h1 {
  color: var(--svc-charcoal) !important;
}

.services-page .page-hero .hero-h1 em,
.services-page .services-hero .hero-h1 em,
.services-page #hero .hero-h1 em {
  color: var(--svc-bronze) !important;
}

.services-page .hero-tag,
.services-page .page-hero .hero-tag,
.services-page #hero .hero-tag {
  color: #9a7b4a !important;
}

.services-page .hero-sub,
.services-page .page-hero .hero-sub,
.services-page #hero .hero-sub {
  color: var(--svc-muted) !important;
}

.services-page .hero-scroll-hint {
  color: rgba(154, 123, 95, 0.55) !important;
}

.services-page .btn-ghost {
  color: rgba(26, 24, 22, 0.52) !important;
}

.services-page .btn-ghost:hover {
  color: var(--svc-charcoal) !important;
}

/* Hero grid texture */
.services-page .page-hero::before,
.services-page .svc-hero-section::before,
.services-page #hero.svc-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26, 24, 22, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 24, 22, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 72%);
  pointer-events: none;
  z-index: 1;
}

/* ─── Homepage hero — cinematic video (not washed-out light overlay) ─ */
body.services-page.home-page #hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  padding:
    calc(var(--nav-height, 72px) + 28px)
    max(16px, var(--site-edge, 16px))
    36px;
  background: #050505 !important;
}

@media (min-width: 901px) {
  body.services-page.home-page #hero {
    min-height: 100svh !important;
    padding-top: clamp(148px, 15vh, 188px) !important;
    padding-bottom: clamp(108px, 12vh, 148px) !important;
    padding-left: max(60px, var(--h-pad, 100px));
    padding-right: max(60px, var(--h-pad, 100px));
    justify-content: flex-end !important;
  }
}

body.services-page.home-page #hero .hero-video-wrap {
  opacity: 1;
  filter: none;
}

body.services-page.home-page #hero .hero-video-wrap::after {
  content: none;
}

body.services-page.home-page #hero .hero-bg {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(154, 123, 95, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(78, 30, 30, 0.18) 0%, transparent 50%),
    linear-gradient(to top, rgba(5, 5, 5, 0.82) 0%, rgba(5, 5, 5, 0.35) 42%, rgba(5, 5, 5, 0.2) 100%) !important;
}

body.services-page.home-page #hero .hero-noise {
  opacity: 0.6 !important;
}

body.services-page.home-page #hero .hero-line {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201, 169, 110, 0.12) 30%,
    rgba(201, 169, 110, 0.06) 70%,
    transparent 100%
  ) !important;
}

body.services-page.home-page #hero .hero-year {
  color: rgba(245, 243, 239, 0.38) !important;
}

body.services-page.home-page #hero .hero-tag {
  color: #d4b87a !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

body.services-page.home-page #hero .hero-h1 {
  color: var(--warm-white, #f5f3ef) !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

body.services-page.home-page #hero .hero-h1 em {
  color: var(--gold, #c9a96e) !important;
}

body.services-page.home-page #hero .hero-sub {
  color: rgba(245, 243, 239, 0.9) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

body.services-page.home-page #hero .hero-actions .btn-ghost {
  color: rgba(245, 243, 239, 0.88) !important;
}

body.services-page.home-page #hero .hero-actions .btn-ghost:hover {
  color: #f5f3ef !important;
}

body.services-page.home-page #hero .hero-scroll-hint {
  color: rgba(201, 169, 110, 0.55) !important;
}

.services-page.home-page #hero.svc-hero-section::before {
  display: none;
}

/* Section headers on light homepage */
.services-page.home-page .bento-section-kicker {
  color: var(--svc-bronze) !important;
}

.services-page.home-page .bento-section-h2 {
  color: var(--svc-charcoal) !important;
}

.services-page.home-page .bento-section-h2 em {
  color: var(--svc-gold) !important;
}

.services-page.home-page .bento-section-h2 em.em {
  color: var(--svc-bronze) !important;
}

/* CTA card — light editorial (was dark glass-purple) */
.services-page.home-page .bento-cta-main.glass-purple,
.services-page.home-page #cta .bento-cell.glass-purple {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(201, 169, 110, 0.12) 0%, transparent 52%),
    linear-gradient(165deg, #ffffff 0%, #faf7f2 100%) !important;
}

.services-page.home-page .bento-cta-main .bento-cell-tag,
.services-page.home-page .bento-cta-main .bento-cell-h2,
.services-page.home-page .bento-cta-main .bento-cell-body,
.services-page.home-page #cta .bento-cell.glass-purple .bento-cell-tag,
.services-page.home-page #cta .bento-cell.glass-purple .bento-cell-h2,
.services-page.home-page #cta .bento-cell.glass-purple .bento-cell-body {
  color: var(--svc-charcoal) !important;
}

.services-page.home-page .bento-cta-main .bento-cell-h2 em,
.services-page.home-page #cta .bento-cell.glass-purple .bento-cell-h2 em {
  color: var(--svc-gold) !important;
}

.services-page.home-page .bento-cta-main .bento-cell-body,
.services-page.home-page #cta .bento-cell.glass-purple .bento-cell-body {
  color: var(--svc-muted) !important;
}

/* Workshop headline cell — dark cinematic card, light text */
.services-page.home-page #workshop .bento-cell.glass-purple.col-8 {
  background:
    radial-gradient(ellipse at 58% 50%, rgba(154, 123, 95, 0.14) 0%, transparent 52%),
    linear-gradient(165deg, rgba(22, 20, 18, 0.96) 0%, rgba(10, 9, 8, 0.98) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.services-page.home-page #workshop .bento-cell.glass-purple.col-8 .bento-cell-tag,
.services-page.home-page #workshop .bento-cell.glass-purple.col-8 .bento-cell-h2,
.services-page.home-page #workshop .bento-cell.glass-purple.col-8 .bento-cell-body {
  color: #f5f3ef !important;
}

.services-page.home-page #workshop .bento-cell.glass-purple.col-8 .bento-cell-tag.em {
  color: rgba(201, 169, 110, 0.85) !important;
}

.services-page.home-page #workshop .bento-cell.glass-purple.col-8 .bento-cell-h2 em {
  color: var(--svc-gold) !important;
}

.services-page.home-page #workshop .bento-cell.glass-purple.col-8 .bento-cell-body {
  color: rgba(245, 243, 239, 0.72) !important;
}

/* Workshop section — pure black canvas, white action links */
.services-page.home-page #workshop.bento-section {
  background: #000000 !important;
}

.services-page.home-page .bento-workshop-actions .btn-outline-large {
  color: #ffffff !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: none !important;
}

.services-page.home-page .bento-workshop-actions .btn-outline-large:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
}

.services-page.home-page .bento-workshop-actions .btn-ghost {
  color: rgba(255, 255, 255, 0.78) !important;
}

.services-page.home-page .bento-workshop-actions .btn-ghost:hover {
  color: #ffffff !important;
}

/* Project cards — photo fallbacks when video unavailable */
body.home-page .bento-proj-1,
.services-page.home-page .bento-proj-1 {
  background:
    linear-gradient(0deg, rgba(10, 8, 6, 0.55) 0%, rgba(10, 8, 6, 0.12) 100%),
    url("../assets/restaurant-booth-restoration.png") 50% 42% / cover no-repeat !important;
}

body.home-page .bento-proj-2,
.services-page.home-page .bento-proj-2 {
  background:
    linear-gradient(0deg, rgba(10, 8, 6, 0.55) 0%, rgba(10, 8, 6, 0.12) 100%),
    url("../assets/restaurant-booth-interior.png") 50% 40% / cover no-repeat !important;
}

body.home-page .bento-proj-3,
.services-page.home-page .bento-proj-3 {
  background:
    linear-gradient(0deg, rgba(10, 8, 6, 0.55) 0%, rgba(10, 8, 6, 0.12) 100%),
    url("../assets/fire-retardant-theater-curtains.png") 50% 38% / cover no-repeat !important;
}

.services-page.home-page .bento-project-cat {
  color: rgba(201, 169, 110, 0.92) !important;
}

.services-page.home-page .bento-project-cat--bronze {
  color: rgba(201, 169, 110, 0.88) !important;
}

.services-page.home-page .bento-project-name {
  color: #f5f3ef !important;
}

.services-page.home-page .bento-project-detail {
  color: rgba(245, 243, 239, 0.78) !important;
}

.services-page.home-page .bento-project-arrow {
  border-color: rgba(201, 169, 110, 0.35) !important;
  color: rgba(201, 169, 110, 0.9) !important;
}

/* Metrics / stat labels */
.services-page.home-page .bento-stat-cell .bento-cell-tag {
  color: var(--svc-bronze) !important;
}

.services-page.home-page .bento-stat-cell .bento-cell-body {
  color: var(--svc-muted) !important;
}

/* Hide broken video layers — show poster/bg instead */
video.hero-video[data-video-error="true"],
video.bento-card-video[data-video-error="true"] {
  display: none !important;
}

.bento-cell.has-video[data-video-failed="true"] .bento-card-video-overlay {
  opacity: 0 !important;
}


.services-page.home-page #hero .hero-bg,
.services-page.home-page #hero .hero-noise,
.services-page.home-page #hero .hero-line,
.services-page.home-page #hero .hero-year,
.services-page.home-page #hero .hero-tag,
.services-page.home-page #hero .hero-h1,
.services-page.home-page #hero .hero-sub,
.services-page.home-page #hero .hero-actions,
.services-page.home-page #hero .hero-scroll-hint {
  position: relative;
  z-index: 2;
}

/* ─── Homepage bento sections ───────────────────────────────────── */
.services-page.home-page .bento-section {
  background: transparent !important;
  padding: 48px max(16px, var(--site-edge, 16px));
}

@media (min-width: 768px) {
  .services-page.home-page .bento-section {
    padding: 64px max(28px, var(--site-edge, 28px));
  }
}

@media (min-width: 901px) {
  .services-page.home-page .bento-section {
    padding: 80px max(60px, var(--h-pad, 100px));
  }
}

.services-page.home-page .bento-section-kicker {
  color: var(--svc-bronze) !important;
}

.services-page.home-page .bento-section-h2,
.services-page.home-page .bento-cell-h2,
.services-page.home-page .bento-cell-h3 {
  color: var(--svc-charcoal) !important;
}

.services-page.home-page .philosophy-hero-cell .bento-cell-h2,
.services-page.home-page .philosophy-hero-cell .bento-cell-body,
.services-page.home-page .philosophy-hero-cell .bento-cell-tag,
.services-page.home-page #philosophy .bento-cell:not(.philosophy-hero-cell) .bento-cell-h3,
.services-page.home-page #philosophy .bento-cell:not(.philosophy-hero-cell) .bento-cell-body,
.services-page.home-page .bento-project-cell .bento-project-name,
.services-page.home-page .bento-project-cell .bento-project-cat,
.services-page.home-page .bento-project-cell .bento-project-detail,
.services-page.home-page .workshop-fr-photo-cell .bento-cell-h3,
.services-page.home-page .workshop-fr-photo-cell .bento-cell-body,
.services-page.home-page .workshop-theater-photo-cell .bento-cell-h3,
.services-page.home-page .workshop-theater-photo-cell .bento-cell-body,
.services-page.home-page .bento-cell.has-video .bento-texture-label {
  color: #f5f3ef !important;
}

.services-page.home-page .philosophy-hero-cell .bento-cell-h2 em,
.services-page.home-page .bento-project-cell .bento-project-name em {
  color: var(--svc-gold) !important;
}

.services-page.home-page .bento-section-h2 em,
.services-page.home-page .bento-cell-h2 em,
.services-page.home-page .bento-cell-h3 em {
  color: var(--svc-gold) !important;
}

.services-page.home-page .bento-cell-body {
  color: var(--svc-muted) !important;
}

.services-page.home-page .bento-cell-tag {
  color: var(--svc-bronze) !important;
}

.services-page.home-page .bento-cell-num {
  color: var(--svc-charcoal) !important;
}

.services-page.home-page .bento-cell-num-label {
  color: var(--svc-soft) !important;
}

/* Light bento cards (non-image cells) */
.services-page.home-page .bento-cell.glass,
.services-page.home-page .bento-cell.glass-purple,
.services-page.home-page .bento-cell.glass-emerald,
.services-page.home-page .bento-cell.glass-gold,
.services-page.home-page .bento-cell.glass-navy {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(201, 169, 110, 0.1) 0%, transparent 52%),
    linear-gradient(165deg, #ffffff 0%, #faf7f2 100%) !important;
  border: 1px solid var(--svc-border) !important;
  box-shadow: var(--svc-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.services-page.home-page .bento-cell.glass::before,
.services-page.home-page .bento-cell.glass-purple::before,
.services-page.home-page .bento-cell.glass-emerald::before,
.services-page.home-page .bento-cell.glass-gold::before {
  top: 0;
  left: 22px;
  right: 22px;
  height: 3px;
  background: linear-gradient(90deg, var(--svc-bronze) 0%, var(--svc-gold) 100%) !important;
  border-radius: 0 0 4px 4px;
  opacity: 0.85;
}

.services-page.home-page .bento-cell.glass:hover,
.services-page.home-page .bento-cell.glass-purple:hover,
.services-page.home-page .bento-cell.glass-emerald:hover,
.services-page.home-page .bento-cell.glass-gold:hover {
  transform: translateY(-4px);
  filter: none !important;
  box-shadow: var(--svc-shadow-hover) !important;
  border-color: rgba(201, 169, 110, 0.22) !important;
}

/* Homepage — light canvas, no dark section voids */
.services-page.home-page main {
  background: transparent;
}

.services-page.home-page .bento-marquee {
  background: #ffffff !important;
  border-top: 1px solid var(--svc-border);
  border-bottom: 1px solid var(--svc-border);
}

.services-page.home-page #philosophy .philosophy-hero-cell {
  min-height: clamp(320px, 42vw, 480px);
}

.services-page.home-page .bento-grid {
  gap: var(--svc-gap);
}

.services-page.home-page .bento-cell.glass,
.services-page.home-page .bento-cell.glass-purple,
.services-page.home-page .bento-cell.glass-emerald,
.services-page.home-page .bento-cell.glass-gold,
.services-page.home-page .bento-cell.glass-navy {
  min-height: 0;
}

.services-page.home-page .bento-marquee .marquee-item {
  color: rgba(26, 24, 22, 0.45) !important;
}

/* ─── Interior layout ───────────────────────────────────────────── */
.services-page .page-main {
  max-width: min(1280px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(16px, var(--site-edge, 16px));
  padding-right: max(16px, var(--site-edge, 16px));
  padding-bottom: 48px;
}

@media (min-width: 768px) {
  .services-page .page-main {
    padding-left: max(28px, var(--site-edge, 28px));
    padding-right: max(28px, var(--site-edge, 28px));
    padding-bottom: 64px;
  }
}

@media (min-width: 901px) {
  .services-page .page-main {
    max-width: min(1680px, 100%);
    padding-left: max(60px, var(--h-pad, 100px));
    padding-right: max(60px, var(--h-pad, 100px));
    padding-bottom: clamp(96px, 10vh, 132px);
  }
}

.services-page .page-section,
.services-page .svc-section {
  padding: 48px 0;
}

@media (min-width: 768px) {
  .services-page .page-section,
  .services-page .svc-section {
    padding: 64px 0;
  }
}

@media (min-width: 1100px) {
  .services-page .page-section,
  .services-page .svc-section {
    padding: 80px 0;
  }
}

.services-page .page-section:first-of-type {
  padding-top: 48px;
}

.services-page .page-section--surface,
.services-page .page-section--graphite {
  background:
    radial-gradient(ellipse at 96% 4%, rgba(201, 169, 110, 0.1) 0%, transparent 46%),
    linear-gradient(160deg, #ffffff 0%, #faf8f4 100%) !important;
  border: 1px solid var(--svc-border) !important;
  border-radius: var(--svc-radius) !important;
  box-shadow: var(--svc-shadow) !important;
  padding: 32px 28px !important;
  margin-bottom: var(--svc-gap);
  color: var(--svc-charcoal) !important;
}

@media (min-width: 768px) {
  .services-page .page-section--surface,
  .services-page .page-section--graphite {
    padding: 40px 36px !important;
  }
}

/* ─── Studio subnav (horizontal, full-width — matches services layout) ─ */
.svc-studio-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  padding: 16px 18px;
  border-radius: var(--svc-radius-sm);
  background: var(--svc-card);
  border: 1px solid var(--svc-border);
  box-shadow: var(--svc-shadow);
}

.svc-studio-subnav__kicker {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--svc-bronze);
}

.svc-studio-subnav__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--svc-gold);
  flex-shrink: 0;
}

.svc-studio-subnav__link {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--svc-muted);
  text-decoration: none;
  border: 1px solid var(--svc-border);
  background: rgba(255, 255, 255, 0.85);
  transition:
    color 0.3s var(--svc-ease),
    border-color 0.3s var(--svc-ease),
    background 0.3s var(--svc-ease),
    transform 0.3s var(--svc-ease);
}

.svc-studio-subnav__link:hover {
  color: var(--svc-charcoal);
  border-color: rgba(201, 169, 110, 0.35);
  transform: translateY(-1px);
}

.svc-studio-subnav__link.is-current {
  color: var(--svc-charcoal);
  border-color: rgba(201, 169, 110, 0.45);
  background: rgba(201, 169, 110, 0.12);
}

/* Collapse legacy sidebar wrapper to full-width stacked layout */
.services-page .page-with-sidebar {
  display: block;
  max-width: min(1680px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(16px, var(--site-edge, 16px));
  padding-right: max(16px, var(--site-edge, 16px));
  padding-bottom: 48px;
}

@media (min-width: 768px) {
  .services-page .page-with-sidebar {
    padding-left: max(28px, var(--site-edge, 28px));
    padding-right: max(28px, var(--site-edge, 28px));
    padding-bottom: 64px;
  }
}

@media (min-width: 901px) {
  .services-page .page-with-sidebar {
    padding-left: max(60px, var(--h-pad, 100px));
    padding-right: max(60px, var(--h-pad, 100px));
    padding-bottom: clamp(96px, 10vh, 132px);
  }
}

.services-page .page-with-sidebar .page-main {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.services-page .page-with-sidebar .studio-sidebar {
  position: static;
  top: auto;
  min-height: 0;
  max-width: none;
  margin-bottom: var(--svc-gap);
  padding: 16px 18px;
  border: 1px solid var(--svc-border);
  border-right: 1px solid var(--svc-border);
  border-left: 1px solid var(--svc-border);
  border-radius: var(--svc-radius-sm);
  background: var(--svc-card);
  box-shadow: var(--svc-shadow);
}

.services-page .studio-sidebar-nav {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.services-page .studio-sidebar-kicker {
  flex: 0 0 100%;
  margin-bottom: 4px;
  color: var(--svc-bronze) !important;
}

.services-page .studio-sidebar-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--svc-muted) !important;
  border: 1px solid var(--svc-border);
  background: rgba(255, 255, 255, 0.85);
  transition:
    color 0.3s var(--svc-ease),
    border-color 0.3s var(--svc-ease),
    background 0.3s var(--svc-ease),
    transform 0.3s var(--svc-ease);
}

.services-page .studio-sidebar-link:hover,
.services-page .studio-sidebar-link.is-current {
  color: var(--svc-charcoal) !important;
  border-color: rgba(201, 169, 110, 0.45);
  background: rgba(201, 169, 110, 0.12);
  padding-left: 16px;
}

/* ─── Contact blocks → bento cards ──────────────────────────────── */
.services-page .contact-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--svc-gap);
}

@media (min-width: 768px) {
  .services-page .contact-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.services-page .contact-block {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--svc-radius);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(201, 169, 110, 0.1) 0%, transparent 52%),
    linear-gradient(165deg, #ffffff 0%, #faf7f2 100%);
  border: 1px solid var(--svc-border);
  box-shadow: var(--svc-shadow);
}

.services-page .contact-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--svc-bronze) 0%, var(--svc-gold) 100%);
  opacity: 0.85;
}

.services-page .contact-block h3 {
  font-family: "Bebas Neue", sans-serif;
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--svc-charcoal);
  margin-bottom: 12px;
}

.services-page .contact-block p,
.services-page .contact-block a {
  color: var(--svc-muted) !important;
}

.services-page .contact-block a:hover {
  color: var(--svc-bronze) !important;
}

.services-page .contact-block strong {
  color: var(--svc-charcoal) !important;
}

/* ─── Material tier / studio hub → bento cards ──────────────────── */
.services-page .material-tier-grid,
.services-page .studio-hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--svc-gap);
}

@media (min-width: 640px) {
  .services-page .material-tier-grid,
  .services-page .studio-hub-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .services-page .studio-hub-grid a:last-child {
    grid-column: auto !important;
  }
}

.services-page .material-tier {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--svc-radius);
  background: var(--svc-card) !important;
  border: 1px solid var(--svc-border) !important;
  box-shadow: var(--svc-shadow) !important;
  transition: transform 0.35s var(--svc-ease), box-shadow 0.35s var(--svc-ease);
  min-height: 0 !important;
}

.services-page .material-tier::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--svc-bronze) 0%, var(--svc-gold) 100%);
  opacity: 0.85;
}

.services-page .material-tier:hover {
  transform: translateY(-4px);
  box-shadow: var(--svc-shadow-hover);
  border-color: rgba(201, 169, 110, 0.22);
}

.services-page .material-tier h4 {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--svc-gold);
  margin-bottom: 8px;
}

.services-page .material-tier .tier-name {
  font-family: "Bebas Neue", sans-serif;
  font-size: 26px;
  letter-spacing: 0.03em;
  color: var(--svc-charcoal) !important;
  margin-bottom: 10px;
}

.services-page .material-tier p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--svc-muted) !important;
}

/* ─── Timeline → process steps ──────────────────────────────────── */
.services-page .timeline-deep {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--svc-gap);
}

@media (min-width: 640px) {
  .services-page .timeline-deep {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .services-page .timeline-deep--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .services-page .timeline-deep--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.services-page .timeline-deep-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  border-radius: var(--svc-radius-sm);
  background: var(--svc-card);
  border: 1px solid var(--svc-border);
  box-shadow: var(--svc-shadow);
  transition: transform 0.35s var(--svc-ease), box-shadow 0.35s var(--svc-ease);
}

.services-page .timeline-deep-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--svc-shadow-hover);
}

.services-page .timeline-deep-item .tl-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(135deg, var(--svc-gold), var(--svc-bronze));
  box-shadow: 0 4px 12px rgba(154, 123, 74, 0.28);
}

.services-page .timeline-deep-item h3 {
  font-family: "Outfit", sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--svc-charcoal) !important;
  margin: 0;
}

.services-page .timeline-deep-item p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--svc-muted) !important;
  margin: 0;
}

/* ─── Spec list ─────────────────────────────────────────────────── */
.services-page .spec-list li {
  color: var(--svc-muted) !important;
  border-color: var(--svc-border) !important;
}

/* ─── Footer (light) ────────────────────────────────────────────── */
.services-page footer {
  background: #ffffff !important;
  border-top: 1px solid var(--svc-border) !important;
}

.services-page .footer-logo .logo-primary,
.services-page .footer-links a,
.services-page .footer-col-title {
  color: var(--svc-charcoal) !important;
}

.services-page .footer-logo .logo-secondary {
  color: #9a7b4a !important;
}

.services-page .footer-tagline,
.services-page .footer-copy,
.services-page .footer-social a {
  color: var(--svc-soft) !important;
}

.services-page .footer-bottom {
  border-top: 1px solid var(--svc-border) !important;
}

/* ─── Quality items / workshop ──────────────────────────────────── */
.services-page .quality-item .quality-text {
  color: var(--svc-muted) !important;
}

.services-page .quality-dot {
  background: var(--svc-gold) !important;
}

/* ─── Homepage stat cells ───────────────────────────────────────── */
.services-page.home-page .bento-stat-cell {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(201, 169, 110, 0.1) 0%, transparent 52%),
    linear-gradient(165deg, #ffffff 0%, #faf7f2 100%) !important;
  border: 1px solid var(--svc-border) !important;
  box-shadow: var(--svc-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.services-page.home-page .bento-stat-cell .bento-cell-num {
  font-family: "Bebas Neue", sans-serif;
}

.services-page.home-page .bento-stat-cell .bento-cell-num em,
.services-page.home-page .bento-stat-cell .bento-cell-num.gd,
.services-page.home-page .bento-stat-cell .bento-cell-num.em {
  color: var(--svc-gold) !important;
}

/* Icons on light cards */
.services-page.home-page .bento-cell.glass .bento-icon,
.services-page.home-page .bento-cell.glass-purple .bento-icon,
.services-page.home-page .bento-cell.glass-emerald .bento-icon {
  background: linear-gradient(135deg, var(--svc-gold), #8a6a33) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(201, 169, 110, 0.28);
}

.services-page.home-page .bento-pill {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid var(--svc-border) !important;
  color: var(--svc-muted) !important;
}

.services-page.home-page .lux-section-rule {
  background: linear-gradient(90deg, transparent, var(--svc-border), transparent) !important;
}

/* Service detail pages — intro panels */
.services-page .service-intro-panel,
.services-page .service-related-panel {
  background: var(--svc-card) !important;
  border: 1px solid var(--svc-border) !important;
  border-radius: var(--svc-radius) !important;
  box-shadow: var(--svc-shadow) !important;
}

.services-page .page-section {
  padding-left: 0;
  padding-right: 0;
}

/* Interior pages: wider process grids for long-form copy */
.services-page.interior-page .svc-process-grid--5 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .services-page.interior-page .svc-process-grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .services-page.interior-page .svc-process-grid--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .services-page.interior-page .svc-process-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Service detail pages — match svc-section rhythm */
.services-page .page-main > .page-section {
  padding-top: 48px;
  padding-bottom: 48px;
}

@media (min-width: 768px) {
  .services-page .page-main > .page-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

@media (min-width: 1100px) {
  .services-page .page-main > .page-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.services-page .booth-materials__grid,
.services-page .fire-process__steps,
.services-page .acoustic-panel-grid {
  gap: var(--svc-gap);
}

@media (min-width: 768px) {
  .services-page .booth-materials__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ---- css/avatar-page-actions.css ---- */
/* Manifest avatar page actions — panels, content slots, form assist */

#avatar-actions-root {
  position: relative;
  z-index: 2147482000;
  pointer-events: none;
}

#avatar-actions-root > * {
  pointer-events: auto;
}

[data-avatar-content]:empty {
  display: none;
}

[data-avatar-content]:not(:empty) {
  display: block;
  margin: 16px 0 24px;
  padding: 18px 20px;
  border: 1px solid rgba(201, 169, 110, 0.28);
  background:
    linear-gradient(135deg, rgba(201, 169, 110, 0.08) 0%, transparent 55%),
    rgba(5, 5, 5, 0.92);
  color: rgba(245, 243, 239, 0.9);
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

[data-avatar-content].avatar-content--floating:not(:empty) {
  position: fixed;
  bottom: 96px;
  left: max(24px, calc((100vw - var(--sfug-ma-site-col, 100vw)) / 2 + 24px));
  z-index: 2147482500;
  max-width: min(380px, calc(var(--sfug-ma-site-col, 100vw) - 48px));
  margin: 0;
}

html.sfug-ma-split [data-avatar-content].avatar-content--floating:not(:empty) {
  left: 24px;
  max-width: min(380px, calc(var(--sfug-ma-site-col, 60vw) - 48px));
}

[data-avatar-panel] {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2147482600;
  width: min(420px, calc(var(--sfug-ma-site-col, 100vw) - 32px));
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  border-right: 1px solid rgba(201, 169, 110, 0.28);
  background:
    radial-gradient(circle at 0% 0%, rgba(201, 169, 110, 0.1) 0%, transparent 48%),
    rgba(5, 5, 5, 0.97);
  box-shadow: 16px 0 48px rgba(0, 0, 0, 0.42);
  color: rgba(245, 243, 239, 0.9);
  font-family: "Outfit", sans-serif;
  transform: translateX(-110%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

html.sfug-ma-split [data-avatar-panel] {
  width: min(420px, calc(var(--sfug-ma-site-col, 60vw) - 24px));
}

[data-avatar-panel][data-avatar-visible="true"],
[data-avatar-panel]:not(.avatar-panel-hidden):not([hidden]) {
  display: block;
  transform: translateX(0);
}

.avatar-panel-hidden,
[data-avatar-panel][hidden] {
  display: none !important;
  transform: translateX(-110%);
}

.avatar-panel__inner {
  padding: 28px 24px 32px;
}

.avatar-panel__kicker {
  margin: 0 0 8px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.75);
}

.avatar-panel__title {
  margin: 0 0 14px;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  color: #f5f3ef;
}

.avatar-panel__body {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(245, 243, 239, 0.82);
}

.avatar-panel__list {
  margin: 0 0 18px;
  padding-left: 18px;
}

.avatar-panel__list li {
  margin-bottom: 8px;
}

.avatar-panel__close {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: flex-end;
  padding: 12px 12px 0;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.98) 70%, transparent);
}

.avatar-panel__close-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(201, 169, 110, 0.28);
  background: transparent;
  color: rgba(245, 243, 239, 0.75);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.avatar-panel__close-btn:hover {
  border-color: rgba(201, 169, 110, 0.55);
  color: #c9a96e;
}

.avatar-panel__cta {
  display: inline-flex;
  margin-top: 8px;
  padding: 12px 18px;
  border: 1px solid rgba(201, 169, 110, 0.35);
  color: #c9a96e;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.avatar-panel__cta:hover {
  background: #c9a96e;
  color: #050505;
}

.avatar-estimate-form {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}

.avatar-estimate-form label {
  display: grid;
  gap: 6px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.78);
}

.avatar-estimate-form input,
.avatar-estimate-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(201, 169, 110, 0.22);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.04);
  color: #f5f3ef;
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  box-sizing: border-box;
}

.avatar-estimate-form input:focus,
.avatar-estimate-form textarea:focus {
  outline: 2px solid rgba(201, 169, 110, 0.45);
  outline-offset: 2px;
}

.avatar-estimate-form textarea {
  min-height: 120px;
  resize: vertical;
}

.avatar-estimate-form__row {
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .avatar-estimate-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.avatar-estimate-form__toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(245, 243, 239, 0.78);
}

.avatar-estimate-form__toggle input {
  width: auto;
  margin-top: 3px;
}

.avatar-estimate-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.avatar-estimate-form__status {
  margin: 0;
  font-size: 13px;
  color: rgba(201, 169, 110, 0.85);
}

.avatar-estimate-form__status[data-state="error"] {
  color: #e8a0a0;
}

@media (max-width: 1024px) {
  [data-avatar-panel] {
    width: min(420px, calc(100vw - 32px));
  }

  [data-avatar-content].avatar-content--floating:not(:empty) {
    left: 16px;
    right: 16px;
    max-width: none;
  }
}