/* ═══════════════════════════════════════════════════
   Saraswati Interior Studio — main.css
   ═══════════════════════════════════════════════════ */

:root {
  --bg:         #F5EFE7;
  --cream:      #FFF8EF;
  --beige:      #D8C3A5;
  --beige-deep: #C2A983;
  --brown:      #3A2C24;
  --gold:       #B8955B;
  --gold-soft:  #C9A86A;
  --soft-black: #141414;
  --ink:        #1C1612;
  --display:   "Cormorant Garamond", "Times New Roman", serif;
  --body:      "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:      "JetBrains Mono", ui-monospace, monospace;

  /* ── Aliases for consistency across all page templates ── */
  --font-display:  var(--display);
  --font-primary:  var(--body);
  --font-body:     var(--body);
  --font-mono:     var(--mono);

  /* ── Shared colour tokens used in page templates ── */
  --black:        #141414;
  --gold-light:   #C9A86A;
  --gold-dark:    #8a6835;
  --gold-subtle:  rgba(184,149,91,.08);
  --border:       rgba(58,44,36,.14);
  --border-gold:  rgba(184,149,91,.25);
  --bg-card:      #FFF8EF;
  --bg-alt:       #F0E8DA;
  --text-primary: #1C1612;
  --text-body:    #1C1612;
  --text-muted:   rgba(28,22,18,.45);
  --radius-md:    12px;
  --radius-sm:    8px;
  --radius-lg:    20px;
  --t-fast:       .18s ease;
  --t-mid:        .32s ease;
  --t-slow:       .55s ease;
  --nav-h:        72px;
  --pad:          clamp(1.5rem, 5vw, 5rem);
  --container:    1200px;
  --shadow-md:    0 4px 24px rgba(58,44,36,.10);
  --shadow-lg:    0 8px 40px rgba(58,44,36,.15);
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: auto;
}

html {
  overflow-x: clip; /* 'clip' preserves vertical scroll on iOS, unlike 'hidden' */
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.5;
  overscroll-behavior: none;
}

::selection { background: var(--gold); color: var(--cream); }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(58,44,36,0.25); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Typography ─────────────────────────────── */
.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.04;
}
.display em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
  text-shadow: 0 0 28px rgba(184,149,91,0.5);
}
.lead {
  font-size: 17px;
  line-height: 1.68;
  opacity: 1;
  max-width: 52ch;
}
.micro {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.7;
}
.nav-bar.scrolled .logo-dark  { display: none; }
.nav-bar.scrolled .logo-light { display: block !important; }

/* ── Eyebrow ────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  opacity: 0.95;
}
.eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.eyebrow.no-rule::before { display: none; }

/* ── Navigation ─────────────────────────────── */
.nav-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 44px 22px 28px;
  color: var(--cream);
  transition: background 400ms ease, color 400ms ease, padding 300ms ease, backdrop-filter 400ms ease;
}
.nav-bar.dark { color: var(--ink); }
.nav-bar.scrolled {
  padding: 14px 44px 14px 28px;
  background: rgba(245, 239, 231, 0.85);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  color: var(--ink);
  border-bottom: 1px solid rgba(58,44,36,0.08);
}
.nav-mark {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.nav-mark .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-3px);
}
.nav-mark small {
  font-family: var(--body);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.7;
  font-weight: 500;
}
.nav-links {
  display: flex;
  gap: 34px;
  font-size: 15px;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.nav-links a {
  opacity: 0.85;
  transition: opacity 200ms;
}
.nav-links a:hover { opacity: 1; }
.nav-links a.nav-active { opacity: 1; color: var(--gold); }
.nav-cta {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.nav-cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--cream);
}

/* ── Buttons ────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 240ms ease;
  cursor: pointer;
}
.btn .arr {
  width: 18px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width 240ms;
  flex-shrink: 0;
}
.btn .arr::after {
  content: "";
  position: absolute;
  right: 0; top: -3px;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
}
.btn:hover .arr { width: 26px; }
.btn-gold  { background: var(--gold); color: var(--cream); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-ghost {
  background: rgba(255,248,239,0.08);
  color: var(--cream);
  border-color: rgba(255,248,239,0.80);
}
.btn-ghost:hover {
  background: rgba(255,248,239,0.12);
  border-color: var(--cream);
}
.btn-outline-dark {
  background: transparent;
  color: var(--brown);
  border-color: var(--brown);
}
.btn-outline-dark:hover {
  background: var(--brown);
  color: var(--cream);
  border-color: var(--brown);
}

/* ── Feature pills ──────────────────────────── */
.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.feature-pill {
  border: 1px solid rgba(255,248,239,0.25);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--cream);
  background: rgba(255,248,239,0.06);
  transition: background 200ms, border-color 200ms;
}
.feature-pill:hover {
  background: rgba(255,248,239,0.14);
  border-color: rgba(255,248,239,0.5);
}
.feature-pill.warm {
  border-color: rgba(58,44,36,0.2);
  color: var(--ink);
  background: rgba(58,44,36,0.06);
}

/* ── Glass cards ────────────────────────────── */
.glass {
  background: linear-gradient(135deg, rgba(20,16,12,0.62), rgba(20,16,12,0.48));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255,248,239,0.10);
  border-radius: 20px;
  color: var(--cream);
  box-shadow: 0 24px 80px -32px rgba(0,0,0,0.55);
}

/* ── Cinema Stage ───────────────────────────── */
#cinema-stage {
  position: -webkit-sticky; /* iOS Safari fallback */
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  z-index: 0;
  overflow: hidden;
  background: #0a0806;
  /* REMOVED transform:translateZ(0) — it creates a new stacking context
     which breaks position:sticky on iOS Safari/mobile browsers */
  /* REMOVED isolation:isolate — also breaks sticky on iOS Safari */
}
#cinema-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── Mobile: strip heavy GPU hints from videos to stop iPhone jitter ── */
@media (max-width: 760px) {
  #cinema-stage video {
    will-change: opacity !important;   /* opacity-only compositing — no transform layer */
    transform: none !important;        /* remove translateZ — causes scroll vibration on iOS */
    -webkit-transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
  }
}
#cinema-stage .vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(10,8,6,0.55) 100%);
  pointer-events: none;
}
#cinema-stage .grain {
  position: absolute;
  inset: 0;
  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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.45;
}

/* ── Cinematic text shades ──────────────────── */
.text-shade-left {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,8,6,0.82) 0%, rgba(10,8,6,0.50) 40%, rgba(10,8,6,0.10) 70%, rgba(10,8,6,0) 100%);
  pointer-events: none;
}
.text-shade-right {
  position: absolute; inset: 0;
  background: linear-gradient(270deg, rgba(10,8,6,0.55) 0%, rgba(10,8,6,0.30) 35%, rgba(10,8,6,0) 65%);
  pointer-events: none;
}
.text-shade-center {
  position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 50%, rgba(10,8,6,0.55) 0%, rgba(10,8,6,0.20) 50%, rgba(10,8,6,0) 80%);
  pointer-events: none;
}
.cinema-text {
  color: var(--cream);
  text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 4px 40px rgba(0,0,0,0.6);
}

/* ── Cinematic act ──────────────────────────── */
#cinematic-act {
  position: relative;
  z-index: 1;
  /* overflow-x:clip intentionally removed — any overflow on a sticky ancestor
     breaks position:sticky on iOS Safari. html overflow-x:clip handles this. */
}

.cinema-sticky {
  position: -webkit-sticky; /* iOS Safari fallback */
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 2;
  overflow: hidden;
}

.cinema-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 60px;
}

/* ── Progress Rail ──────────────────────────── */
.progress-rail {
    display: none;

  position: fixed;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.progress-rail .tick {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  opacity: 0.35;
  transition: opacity 300ms ease;
}
.progress-rail .tick.active { opacity: 1; }
.progress-rail .tick .bar {
  width: 20px;
  height: 1px;
  background: var(--cream);
  display: block;
  transition: width 300ms ease;
}
.progress-rail .tick.active .bar { width: 32px; background: var(--gold); }
.progress-rail .tick span:last-child {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
}

/* ── Scroll hint ────────────────────────────── */
.scroll-hint {
  position: absolute;
  bottom: 48px;
  left: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--cream);
  opacity: 0.55;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.scroll-hint .bar {
  width: 40px;
  height: 1px;
  background: var(--cream);
  display: block;
  animation: scroll-bar 2s ease-in-out infinite;
}
@keyframes scroll-bar {
  0%, 100% { width: 40px; opacity: 0.55; }
  50% { width: 16px; opacity: 0.25; }
}

/* ── Scene overlays (hero / center / card) ── */
.scene-hero {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 60px;
}
.scene-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 60px;
}
.scene-left, .scene-right {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 60px;
}
.scene-left  { justify-content: flex-start; }
.scene-right { justify-content: flex-end; }

/* ══════════════════════════════════════════════════
   PROCESS SECTION — 3D PREMIUM REDESIGN
   ══════════════════════════════════════════════════ */
#process-section {
  position: relative;
  background: linear-gradient(180deg,
    var(--bg) 0%,
    #100d09 12%,
    #080604 35%,
    #0a0806 65%,
    #100d09 88%,
    var(--bg) 100%
  );
}

/* Ambient floating orbs in the background */
#process-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 30% at 15% 25%, rgba(184,149,91,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 70%, rgba(184,149,91,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 20% at 50% 50%, rgba(216,195,165,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.process-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  color: var(--cream);
  overflow: hidden;
  perspective: 1200px;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Header bar with gold accent underline */
.process-header {
  position: absolute;
  top: 88px;
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 80px 22px;
  z-index: 10;
  color: var(--cream);
}

/* Bigger OUR PROCESS label */
.process-header .eyebrow {
  font-size: 17px;
  letter-spacing: 0.34em;
}


/* Step counter pill */
.process-header-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(184,149,91,0.1);
  border: 1px solid rgba(184,149,91,0.2);
  padding: 6px 16px;
  border-radius: 999px;
}

/* Each process step — absolute, full viewport */
.process-step {
    transition: opacity 80ms linear;

  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 200px 80px 80px;
  pointer-events: none;
  transform-style: preserve-3d;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.process-step.active { pointer-events: auto; }

/* ── 3D GRAPHIC FRAME — the main visual upgrade ── */
.process-graphic-frame {
  flex: 1.1 1 0;
  aspect-ratio: 16 / 10;
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  transform-style: preserve-3d;

  /* Deep layered background */
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(184,149,91,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 80% at 80% 85%, rgba(58,44,36,0.7) 0%, transparent 60%),
    linear-gradient(145deg, #1e1710 0%, #150f0a 40%, #0e0a07 100%);

  /* Multi-layer 3D shadow system */
  box-shadow:
    0 0 0 1px rgba(184,149,91,0.15),
    0 2px 4px rgba(0,0,0,0.4),
    0 8px 16px rgba(0,0,0,0.35),
    0 24px 48px rgba(0,0,0,0.4),
    0 60px 100px -20px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,248,239,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.3);

  /* JS drives transform every RAF frame — no CSS transition on transform */
  transform: perspective(900px) rotateY(-4deg) rotateX(2deg) translateZ(0);
  transition: box-shadow 300ms ease;
  will-change: transform, opacity;
}

.process-step.active .process-graphic-frame {
  box-shadow:
    0 0 0 1px rgba(184,149,91,0.28),
    0 2px 4px rgba(0,0,0,0.4),
    0 12px 24px rgba(0,0,0,0.4),
    0 32px 64px rgba(0,0,0,0.45),
    0 80px 120px -20px rgba(0,0,0,0.55),
    0 0 80px -30px rgba(184,149,91,0.18),
    inset 0 1px 0 rgba(255,248,239,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.4);
}

/* Perspective floor grid inside frame */
.process-graphic-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.process-graphic-grid::before {
  content: '';
  position: absolute;
  left: -20%; right: -20%;
  bottom: -10%; top: 30%;
  background-image:
    linear-gradient(rgba(184,149,91,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,149,91,0.12) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(300px) rotateX(50deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 70%);
  mask-image: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 70%);
}
.process-graphic-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(184,149,91,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,149,91,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 85%);
}

/* Film-grain texture */
.process-graphic-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.6;
  pointer-events: none;
}

/* Gloss highlight on top edge of frame */
.process-graphic-frame::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,248,239,0.45) 50%, transparent);
  z-index: 10;
}
/* Left edge light strip */
.process-graphic-frame::after {
  content: '';
  position: absolute;
  top: 8%; bottom: 8%; left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(184,149,91,0.35) 50%, transparent);
  z-index: 10;
}

/* Corner crosshair markers */
.process-corner {
  position: absolute;
  width: 22px; height: 22px;
  pointer-events: none;
  z-index: 5;
}
.process-corner.tl { top: 16px; left: 16px; border-top: 1.5px solid rgba(184,149,91,0.55); border-left: 1.5px solid rgba(184,149,91,0.55); border-radius: 2px 0 0 0; }
.process-corner.tr { top: 16px; right: 16px; border-top: 1.5px solid rgba(184,149,91,0.55); border-right: 1.5px solid rgba(184,149,91,0.55); border-radius: 0 2px 0 0; }
.process-corner.bl { bottom: 16px; left: 16px; border-bottom: 1.5px solid rgba(184,149,91,0.55); border-left: 1.5px solid rgba(184,149,91,0.55); border-radius: 0 0 0 2px; }
.process-corner.br { bottom: 16px; right: 16px; border-bottom: 1.5px solid rgba(184,149,91,0.55); border-right: 1.5px solid rgba(184,149,91,0.55); border-radius: 0 0 2px 0; }

/* Step label tag inside frame */
.process-step-label {
  position: absolute;
  left: 20px; bottom: 20px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(184,149,91,0.25);
  padding: 5px 12px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 6;
  backdrop-filter: blur(4px);
}

.process-svg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Content side ──────────────────────────── */
.process-content {
  flex: 1 1 0;
  max-width: 460px;
  position: relative;
}

/* Number — giant ghost behind text */
.process-number {
  font-family: var(--display);
  font-size: clamp(80px, 9vw, 120px);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(184,149,91,0.7);
  margin-bottom: 16px;
  letter-spacing: -0.03em;
  position: relative;
}
.process-number::after {
  content: attr(data-n);
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--gold) 0%, rgba(184,149,91,0.5) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  filter: blur(0px);
  text-decoration: none;
}

.process-title {
  font-family: var(--display);
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.06;
  margin: 0 0 20px;
  color: var(--cream);
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.process-title em {
  font-style: italic;
  color: var(--gold);
}

.process-body {
  color: rgba(255,248,239,0.96);
  line-height: 1.70;
  max-width: 42ch;
  margin: 0;
  font-size: 16px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}

/* Animated progress bar below text */
.process-step-of {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,248,239,0.80);
}
.process-step-of .progress-track {
  flex: 1;
  height: 2px;
  background: rgba(255,248,239,0.1);
  border-radius: 999px;
  overflow: hidden;
  max-width: 120px;
}
.process-step-of .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), rgba(184,149,91,0.6));
  border-radius: 999px;
  transition: width 400ms ease;
}



/* Background canvas */
.process-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.process-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(184,149,91,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,149,91,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 20%, black 80%, transparent 100%);
}

/* Floating orb lights in background */
.process-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.process-bg-orb-1 {
  width: 400px; height: 300px;
  top: 10%; left: -5%;
  background: radial-gradient(circle, rgba(184,149,91,0.12) 0%, transparent 70%);
}
.process-bg-orb-2 {
  width: 500px; height: 400px;
  bottom: 5%; right: -10%;
  background: radial-gradient(circle, rgba(58,44,36,0.4) 0%, transparent 70%);
}

/* ══════════════════════════════════════════════════
   MATERIALS SECTION — PREMIUM REDESIGN
   ══════════════════════════════════════════════════ */

/* ── Static sections (light bg) ─────────────── */
.section-wrap {
  position: relative;
  z-index: 10;
  background: var(--bg);
  isolation: isolate;
}
.container-1280 {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 60px;
}
.section-head {
  max-width: 680px;
  margin-bottom: 60px;
}
.section-head h2 {
  font-family: var(--display);
  font-size: clamp(38px, 4.2vw, 62px);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.04;
  margin: 18px 0 22px;
}
.section-head .lead { font-size: 17px; }

/* Room sections */
.room-section { padding: 80px 0; }
.room-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.room-grid.reverse { direction: rtl; }
.room-grid.reverse > * { direction: ltr; }
.room-image-ph {
  aspect-ratio: 5 / 6;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: #2d231d;
}
.room-image-ph img { width: 100%; height: 100%; object-fit: cover; }
.room-content h2 {
  font-family: var(--display);
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.04;
  margin: 18px 0 16px;
}
.room-content .lead { margin-bottom: 26px; }

/* ══════════════════════════════════════════════════
   MATERIALS SECTION — 3D CARD GRID
   ══════════════════════════════════════════════════ */
#materials-section {
  position: relative;
  overflow: hidden;
}
#materials-section::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,149,91,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.material-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.material-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(58,44,36,0.08);
  transition: transform 400ms cubic-bezier(0.23,1,0.32,1), box-shadow 400ms cubic-bezier(0.23,1,0.32,1);
  transform: perspective(800px) rotateY(0deg) rotateX(0deg) translateZ(0);
  box-shadow:
    0 1px 2px rgba(58,44,36,0.06),
    0 4px 12px rgba(58,44,36,0.06),
    0 16px 32px rgba(58,44,36,0.06);
}
.material-card:hover {
  transform: perspective(800px) rotateY(-2deg) rotateX(2deg) translateZ(16px);
  box-shadow:
    0 2px 4px rgba(58,44,36,0.08),
    0 8px 20px rgba(58,44,36,0.10),
    0 28px 56px rgba(58,44,36,0.12),
    0 0 0 1px rgba(184,149,91,0.15);
}

/* Textured swatch with 3D depth */
.material-card .swatch {
  height: 160px;
  position: relative;
  overflow: hidden;
}
.material-card:nth-child(1) .swatch { background: linear-gradient(145deg, #c8a882, #a07850, #8a5e38); }
.material-card:nth-child(2) .swatch { background: linear-gradient(145deg, #d4c4b0, #b8a088, #9a7e60); }
.material-card:nth-child(3) .swatch { background: linear-gradient(145deg, #e0d0bc, #c4aa90, #a88868); }
.material-card:nth-child(4) .swatch { background: linear-gradient(145deg, #b0a098, #907870, #705855); }
.material-card:nth-child(5) .swatch { background: linear-gradient(145deg, #d8c8b8, #bca898, #a08880); }
.material-card:nth-child(6) .swatch { background: linear-gradient(145deg, #c4b0a0, #a89080, #8a7060); }
/* ── Material card image slideshow ───────────── */
.mat-img-box {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}
.mat-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.mat-slide--active { opacity: 1; }

/* Inner texture on swatch */
.material-card .swatch::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}
/* Swatch gloss highlight */
.material-card .swatch::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 100%);
}

/* Icon badge on swatch */
.material-card .swatch-icon {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.material-card .card-body {
  padding: 22px 24px 26px;
}
.material-card .card-title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.material-card .card-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.68;
  margin: 0;
}

/* Gold accent bar at bottom */
.material-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(184,149,91,0.3) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms cubic-bezier(0.23,1,0.32,1);
}
.material-card:hover::after { transform: scaleX(1); }

/* ══════════════════════════════════════════════════
   TESTIMONIALS SECTION
   ══════════════════════════════════════════════════ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testi-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
  position: relative;
  overflow: hidden;
}
.testi-card::before {
  content: '\201C';
  position: absolute;
  top: -10px; right: 20px;
  font-family: var(--display);
  font-size: 120px;
  color: var(--gold);
  opacity: 0.08;
  line-height: 1;
  pointer-events: none;
}
.testi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(58,44,36,0.12);
  border-color: var(--border-gold);
}
.testi-stars {
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 2px;
}
.testi-quote {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
  flex: 1;
  font-style: italic;
}
.testi-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.testi-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--beige-deep));
  color: #fff;
  font-family: var(--display);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 500;
}
.testi-name {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.testi-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
}

/* ══════════════════════════════════════════════════
   PORTFOLIO SECTION — PREMIUM MASONRY-STYLE
   ══════════════════════════════════════════════════ */
#portfolio-section {
  position: relative;
  background: var(--bg);
}
#portfolio-section::before {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,149,91,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.portfolio-card {
  border-radius: 20px;
  overflow: hidden;
  background: white;
  position: relative;
  transition: transform 450ms cubic-bezier(0.23,1,0.32,1), box-shadow 450ms cubic-bezier(0.23,1,0.32,1);
  box-shadow:
    0 2px 4px rgba(58,44,36,0.05),
    0 8px 24px rgba(58,44,36,0.08);
  transform: translateY(0) translateZ(0);
}
.portfolio-card:hover {
  transform: translateY(-8px) translateZ(0);
  box-shadow:
    0 4px 8px rgba(58,44,36,0.06),
    0 16px 40px rgba(58,44,36,0.12),
    0 40px 80px rgba(58,44,36,0.10),
    0 0 0 1px rgba(184,149,91,0.12);
}

/* First card spans 2 columns for visual interest */
.portfolio-card:first-child {
  grid-column: span 2;
}
.portfolio-card:first-child .card-img {
  aspect-ratio: 16/9;
}

.portfolio-card .card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}
.portfolio-card .card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.23,1,0.32,1);
}
.portfolio-card:hover .card-img img { transform: scale(1.06); }

/* Overlay gradient on image */
.portfolio-card .card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20,16,12,0.35) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 400ms ease;
}
.portfolio-card:hover .card-img::after { opacity: 1; }

/* Full-image overlay style */
.portfolio-card {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.portfolio-card .card-img {
  aspect-ratio: 4/3;
  width: 100%;
  height: 100%;
  position: relative;
}
.portfolio-card .card-img img,
.portfolio-card .card-img > div {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.23,1,0.32,1);
  display: block;
}
.portfolio-card:hover .card-img img { transform: scale(1.06); }

.portfolio-card .card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,8,6,0.88) 0%, rgba(10,8,6,0.35) 50%, rgba(10,8,6,0.10) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 24px 26px;
  transition: background 400ms ease;
}
.portfolio-card:hover .card-overlay {
  background: linear-gradient(0deg, rgba(10,8,6,0.92) 0%, rgba(10,8,6,0.50) 60%, rgba(10,8,6,0.18) 100%);
}

.portfolio-card .card-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(184,149,91,0.9);
  align-self: flex-start;
  background: rgba(184,149,91,0.15);
  border: 1px solid rgba(184,149,91,0.35);
  padding: 4px 10px;
  border-radius: 999px;
}

.portfolio-card .card-overlay-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portfolio-card .card-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(184,149,91,0.9);
  margin: 0 0 4px;
}
.portfolio-card .card-name {
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  margin: 0 0 4px;
  color: var(--cream);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.portfolio-card .card-sub {
  font-size: 12px;
  color: rgba(255,248,239,0.6);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}
.portfolio-card .card-explore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.portfolio-card:hover .card-explore {
  opacity: 1;
  transform: translateY(0);
}
.portfolio-card .card-explore .arr {
  width: 18px;
  height: 1px;
  background: var(--gold);
  position: relative;
  display: inline-block;
  transition: width 240ms;
}
.portfolio-card .card-explore .arr::after {
  content: "";
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  transform: rotate(45deg) translate(-1px, 1px);
}
.portfolio-card:hover .card-explore .arr { width: 26px; }

/* ══════════════════════════════════════════════════
   CTA SECTION — DRAMATIC DARK PREMIUM
   ══════════════════════════════════════════════════ */
.cta-section {
  position: relative;
  padding: 120px 0;
  text-align: center;
  background: var(--bg);
  color: var(--text-primary);
  overflow: hidden;
  isolation: isolate;
}

/* Atmospheric background layers */
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(184,149,91,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 40% 80% at 20% 30%, rgba(184,149,91,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 80% at 80% 70%, rgba(184,149,91,0.04) 0%, transparent 60%);
  z-index: 0;
}

/* Subtle grid pattern */
.cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(184,149,91,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,149,91,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 80%);
  z-index: 0;
}

.cta-section .container-1280 { position: relative; z-index: 2; }

/* Gold horizontal divider lines */
.cta-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 40px;
}
.cta-divider-line {
  height: 1px;
  width: 80px;
  background: linear-gradient(90deg, transparent, rgba(184,149,91,0.5));
}
.cta-divider-line:last-child {
  background: linear-gradient(90deg, rgba(184,149,91,0.5), transparent);
}
.cta-divider-diamond {
  width: 8px; height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: 0.8;
}

.cta-section h2 {
  font-family: var(--display);
  font-size: clamp(48px, 6.5vw, 96px);
  font-weight: 400;
  line-height: 1.02;
  margin: 0 auto 24px;
  max-width: 14ch;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.cta-section h2 em {
  font-style: italic;
  color: var(--gold);
}

.cta-section .lead {
  margin: 0 auto 48px;
  opacity: 1;
  color: var(--text-muted);
  font-size: 17px;
  max-width: 52ch;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Trust indicators below CTA */
.cta-trust {
  margin-top: 52px;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cta-trust-item .trust-num {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
}
.cta-trust-item .trust-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cta-trust-sep {
  width: 1px;
  height: 40px;
  background: var(--border);
  align-self: center;
}

/* Footer */
.site-footer {
  background: #0e0a07;
  color: var(--cream);
  padding: 0 0 0;
  border-top: 1px solid rgba(255,248,239,0.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 56px;
  padding: 64px 0 48px;
  border-bottom: 1px solid rgba(255,248,239,0.07);
}
.footer-brand p {
  opacity: 0.55;
  font-size: 13.5px;
  line-height: 1.75;
  max-width: 28ch;
  margin-bottom: 22px;
}
.footer-social {
  display: flex;
  gap: 14px;
  margin-top: 4px;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,248,239,0.15);
  border-radius: 50%;
  color: var(--cream);
  opacity: 0.6;
  transition: opacity 200ms, border-color 200ms;
}
.footer-social a:hover { opacity: 1; border-color: var(--gold-light); }
.footer-col h4 {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 1;
  margin: 0 0 20px;
}
.footer-col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.footer-col ul a {
  font-size: 14px;
  opacity: 0.65;
  transition: opacity 200ms, color 200ms;
  color: var(--cream);
}
.footer-col ul a:hover { opacity: 1; color: var(--gold-light); }
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  opacity: 0.65;
  color: var(--cream);
}
.footer-contact-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.7;
}
.footer-contact-list li a,
.footer-contact-list li span {
  opacity: 1;
  font-size: 13.5px;
  transition: color 200ms;
  color: var(--cream);
}
.footer-contact-list li:hover { opacity: 1; }
.footer-contact-list li a:hover,
.footer-contact-list li:hover span { color: var(--gold-light); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  opacity: 0.7;
}

/* Consultation modal */
.consult-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,8,6,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.consult-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.consult-modal {
  background: var(--cream);
  border-radius: 24px;
  padding: 48px 52px;
  max-width: 520px;
  width: 92%;
  position: relative;
  transform: translateY(20px);
  transition: transform 300ms ease;
  color: var(--ink);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.4);
}
.consult-modal-backdrop.open .consult-modal {
  transform: translateY(0);
}
.consult-modal h3 {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 400;
  margin: 0 0 8px;
}
.consult-modal p {
  font-size: 14px;
  opacity: 0.65;
  margin: 0 0 30px;
}
.consult-modal .close-btn {
  position: absolute;
  top: 20px; right: 20px;
  background: none;
  border: none;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.4;
  font-size: 18px;
  transition: opacity 200ms;
}
.consult-modal .close-btn:hover { opacity: 0.9; }
.consult-form .field {
  margin-bottom: 16px;
}
.consult-form label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 6px;
  font-family: var(--mono);
}
.consult-form input,
.consult-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(58,44,36,0.18);
  border-radius: 10px;
  background: white;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 200ms;
}
.consult-form input:focus,
.consult-form textarea:focus {
  border-color: var(--gold);
}
.consult-form textarea { resize: vertical; min-height: 90px; }
.consult-success {
  text-align: center;
  padding: 20px 0;
}
.consult-success .check {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(184,149,91,0.12);
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-size: 24px;
}

/* ── Forminator form inside consultation modal ── */
.consult-forminator-wrap .forminator-custom-form {
  margin: 0 !important;
}
/* Remove Forminator's default outer padding/shadow */
.consult-forminator-wrap .forminator-ui,
.consult-forminator-wrap .forminator-custom-form.forminator-design--default {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Row spacing */
.consult-forminator-wrap .forminator-row {
  margin-bottom: 16px !important;
}
/* Labels */
.consult-forminator-wrap .forminator-label,
.consult-forminator-wrap label {
  display: block !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  opacity: 0.5 !important;
  margin-bottom: 6px !important;
  font-weight: 400 !important;
}
/* Inputs & textarea */
.consult-forminator-wrap .forminator-input,
.consult-forminator-wrap .forminator-textarea,
.consult-forminator-wrap input[type="text"],
.consult-forminator-wrap input[type="email"],
.consult-forminator-wrap input[type="tel"],
.consult-forminator-wrap textarea {
  width: 100% !important;
  padding: 13px 16px !important;
  border: 1px solid rgba(58,44,36,0.18) !important;
  border-radius: 10px !important;
  background: white !important;
  font-family: var(--body) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 200ms !important;
  -webkit-appearance: none !important;
}
.consult-forminator-wrap .forminator-input:focus,
.consult-forminator-wrap .forminator-textarea:focus,
.consult-forminator-wrap input:focus,
.consult-forminator-wrap textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(184,149,91,0.12) !important;
}
.consult-forminator-wrap .forminator-textarea,
.consult-forminator-wrap textarea {
  resize: vertical !important;
  min-height: 90px !important;
}
/* Character counter */
.consult-forminator-wrap .forminator-description,
.consult-forminator-wrap .forminator-field--helper,
.consult-forminator-wrap .forminator-input-limit-wrap {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--ink) !important;
  opacity: 0.4 !important;
}
/* Submit button — match .btn.btn-gold */
.consult-forminator-wrap .forminator-btn,
.consult-forminator-wrap .forminator-btn-submit,
.consult-forminator-wrap .forminator-button,
.consult-forminator-wrap button[type="submit"],
.consult-forminator-wrap input[type="submit"] {
  display: block !important;
  width: 100% !important;
  padding: 15px 28px !important;
  background: var(--gold) !important;
  background-color: var(--gold) !important;
  color: var(--ink) !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: opacity 200ms, transform 120ms !important;
  box-shadow: none !important;
  margin-top: 8px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.consult-forminator-wrap .forminator-btn:hover,
.consult-forminator-wrap .forminator-btn-submit:hover,
.consult-forminator-wrap button[type="submit"]:hover,
.consult-forminator-wrap input[type="submit"]:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
  background: var(--gold) !important;
  background-color: var(--gold) !important;
}

/* Hide ALL Forminator inline error messages — red border signals the error */
.consult-forminator-wrap .forminator-error-message,
.consult-forminator-wrap .forminator-has-error .forminator-error-message,
.consult-forminator-wrap .forminator-field--error .forminator-error-message,
.consult-forminator-wrap span.forminator-error-message,
.consult-forminator-wrap li.forminator-error-message {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Hide Forminator branding / pagination dots / edit form link */
.consult-forminator-wrap .forminator-pagination,
.consult-forminator-wrap .forminator-powered-by,
.consult-forminator-wrap .forminator-edit-form,
.consult-forminator-wrap a.forminator-edit-form,
.consult-forminator-wrap [class*="forminator-edit"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Compact row spacing */
.consult-forminator-wrap .forminator-row {
  margin-bottom: 10px !important;
}

/* Smaller inputs */
.consult-forminator-wrap .forminator-input,
.consult-forminator-wrap .forminator-textarea,
.consult-forminator-wrap input[type="text"],
.consult-forminator-wrap input[type="email"],
.consult-forminator-wrap input[type="tel"],
.consult-forminator-wrap textarea {
  padding: 10px 14px !important;
  font-size: 13px !important;
}
.consult-forminator-wrap .forminator-textarea,
.consult-forminator-wrap textarea {
  min-height: 72px !important;
}

/* Fix error message styling — override Forminator pink */
.consult-forminator-wrap .forminator-error-message,
.consult-forminator-wrap .forminator-field--error .forminator-error-message,
.consult-forminator-wrap span.forminator-error-message {
  display: block !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 3px 0 0 !important;
  margin: 0 !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: #c0392b !important;
  opacity: 1 !important;
}
/* Success/thank-you message */
.consult-forminator-wrap .forminator-response-output,
.consult-forminator-wrap .forminator-success {
  font-family: var(--body) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  background: rgba(184,149,91,0.08) !important;
  border: 1px solid rgba(184,149,91,0.3) !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  text-align: center !important;
  margin-top: 8px !important;
}
/* Error messages */
.consult-forminator-wrap .forminator-error-message,
.consult-forminator-wrap .forminator-field--error .forminator-label {
  color: #c0392b !important;
  opacity: 1 !important;
  font-size: 11px !important;
  margin-top: 4px !important;
}
.consult-forminator-wrap .forminator-field--error .forminator-input,
.consult-forminator-wrap .forminator-field--error input,
.consult-forminator-wrap .forminator-field--error textarea {
  border-color: #c0392b !important;
}
/* Mobile font-size fix (prevents iOS zoom) */
@media (max-width: 640px) {
  .consult-forminator-wrap .forminator-input,
  .consult-forminator-wrap .forminator-textarea,
  .consult-forminator-wrap input,
  .consult-forminator-wrap textarea {
    font-size: 16px !important;
  }
}

/* ── Loading screen ─────────────────────────── */
#saraswati-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #0a0806;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  transition: opacity 600ms ease;
}
#saraswati-loader.done { opacity: 0; pointer-events: none; visibility: hidden; }
#saraswati-loader .loader-mark {
  font-family: var(--display);
  font-size: 32px;
  color: var(--cream);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
#saraswati-loader .loader-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: rgba(255,248,239,0.5);
  text-transform: uppercase;
}
#saraswati-loader .loader-bar-wrap {
  width: 180px;
  height: 1px;
  background: rgba(255,248,239,0.15);
  position: relative;
  overflow: hidden;
  margin-top: 8px;
}
#saraswati-loader .loader-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--gold);
  transition: width 200ms ease;
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 1024px) {
  .process-step { padding: 148px 40px 80px; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .material-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-card:first-child { grid-column: span 2; }
}

@media (max-width: 760px) {
  .nav-bar { padding: 16px 20px; }
  .nav-bar.scrolled { padding: 12px 20px; }
  .nav-links { display: none; }
  .cinema-container { padding: 0 24px; }
  .progress-rail { display: none; }
  .process-step {
    flex-direction: column;
    padding: 100px 24px 24px;
    gap: 28px;
  }
  .process-graphic-frame {
    min-height: 220px;
    transform: none !important;
  }
  .process-graphic-frame::after { display: none; }
  .process-header { padding: 0 24px 20px; }
  .process-header-counter { display: none; }
  .container-1280 { padding: 0 24px; }
  .room-grid, .room-grid.reverse { grid-template-columns: 1fr; direction: ltr; }
  .room-grid.reverse { direction: ltr; }
  .material-grid, .portfolio-grid, .testimonial-grid { grid-template-columns: 1fr; }
  .portfolio-card:first-child { grid-column: span 1; }
  .portfolio-card:first-child .card-img { aspect-ratio: 4/3; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .cta-section { padding: 80px 0; }
  .cta-trust { gap: 20px; }
  .cta-trust-sep { display: none; }
  .consult-modal { padding: 32px 24px; }
  .scene-left, .scene-right { padding: 0 16px; justify-content: flex-start; }
  .scene-center { padding: 0 20px; }
  .scene-hero { padding: 0 24px; }
}


/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — COMPLETE OVERHAUL
   ═══════════════════════════════════════════════════ */

/* ── Hamburger menu button ────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 200ms;
  z-index: 70;
  color: inherit;
}
.nav-hamburger:hover { background: rgba(255,255,255,0.08); }
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 280ms ease, opacity 280ms ease, width 280ms ease;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile nav drawer ────────────────────────── */
.nav-mobile-drawer {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 55;
  background: rgba(245,239,231,0.97);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  padding: 88px 28px 40px;
  transform: translateY(-100%);
  transition: transform 360ms cubic-bezier(0.4,0,0.2,1);
  border-bottom: 1px solid rgba(58,44,36,0.10);
  box-shadow: 0 20px 60px rgba(58,44,36,0.12);
}
.nav-mobile-drawer.open {
  transform: translateY(0);
}
.nav-mobile-drawer a {
  display: block;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px solid rgba(58,44,36,0.08);
  letter-spacing: -0.01em;
  transition: color 200ms, padding-left 200ms;
}
.nav-mobile-drawer a:last-of-type { border-bottom: none; }
.nav-mobile-drawer a:hover { color: var(--gold); padding-left: 6px; }
.nav-mobile-cta {
  margin-top: 28px;
  width: 100%;
  justify-content: center;
}

/* ─────────────────────────────────────────────────
   BREAKPOINT: max-width 1024px (tablet)
   ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav-bar {
    padding: 18px 28px;
  }
  .nav-bar .nav-logo img {
    height: 46px !important;
  }
  /* Fix logo left margin on tablet */
  .nav-bar .nav-logo {
    margin-left: 0 !important;
  }
  .process-header {
    padding: 0 40px 20px;
    top: 76px;
  }
  .scene-hero, .scene-left, .scene-right, .scene-center {
    padding: 0 40px;
  }
  .scroll-hint { left: 40px; }
  .glass { padding: 32px 30px !important; }
  .cta-section h2 { font-size: clamp(40px, 5.5vw, 72px); }
  .container-1280 { padding: 0 40px; }
  .section-head h2 { font-size: clamp(34px, 4vw, 52px); }
}

/* ─────────────────────────────────────────────────
   BREAKPOINT: max-width 760px (mobile)
   ───────────────────────────────────────────────── */
@media (max-width: 760px) {

  /* ── Nav ────────────────────────────────────── */
  .nav-bar {
    padding: 14px 20px;
    justify-content: space-between;
  }
  .nav-bar.scrolled {
    padding: 12px 20px;
  }
  .nav-logo {
    margin-left: 0 !important;
  }
  .nav-bar .nav-logo img {
    height: 42px !important;
  }
  .nav-links { display: none !important; }
  .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile-drawer { display: block; }

  /* ── Hero scene ─────────────────────────────── */
  .scene-hero {
    padding: 0 20px;
    align-items: flex-end;
    padding-bottom: 100px;
  }
  .scene-hero > div {
    max-width: 100% !important;
  }
  .scene-hero h1 {
    font-size: clamp(34px, 9vw, 54px) !important;
    margin: 16px 0 16px !important;
  }
  .scene-hero .lead {
    font-size: 15px !important;
    max-width: 100% !important;
  }
  /* Stack hero buttons vertically on very small screens */
  .scene-hero div[style*="display:flex"][style*="gap:14px"] {
    flex-direction: column;
    gap: 10px !important;
  }
  .scene-hero .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Cinema scenes ──────────────────────────── */
  .scene-center {
    padding: 0 20px;
    align-items: flex-end;
    padding-bottom: 100px;
  }
  /* Hide lead text and feature pills in hero scene cards on mobile */
  .scene-left .glass .lead,
  .scene-right .glass .lead,
  .scene-left .glass .feature-list,
  .scene-right .glass .feature-list {
    display: none !important;
  }
  
  .scene-center > div {
    text-align: left !important;
  }
  .scene-center h2 {
    font-size: clamp(28px, 8vw, 44px) !important;
    margin: 16px 0 16px !important;
  }
  .scene-left, .scene-right {
    padding: 0 20px;
    align-items: flex-end !important;
    padding-bottom: 60px;
    justify-content: flex-start !important;
  }
  .scene-left .glass, .scene-right .glass {
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 20px !important;
  }
  .glass h2 {
    font-size: clamp(24px, 6.5vw, 34px) !important;
    margin: 12px 0 12px !important;
  }
  .glass .lead { font-size: 14px !important; }
  .glass .btn {
    width: 100%;
    justify-content: center;
  }
  .feature-list { gap: 6px; }
  .feature-pill { font-size: 11px; padding: 5px 11px; }

  /* Scroll hint */
  .scroll-hint { left: 20px; bottom: 32px; }
  .progress-rail { display: none !important; }

  /* ── Process section ────────────────────────── */
  .process-sticky {
    perspective: none;
  }
  .process-header {
    top: 72px;
    padding: 0 20px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .process-header .eyebrow { font-size: 13px; }
  .process-header-counter { display: none !important; }

  .process-step {
    flex-direction: column;
    padding: 110px 20px 30px;
    gap: 24px;
    align-items: stretch;
  }
  .process-graphic-frame {
    flex: none !important;
    width: 100%;
    min-height: 200px !important;
    aspect-ratio: 16/10;
    transform: none !important;
  }
  .process-graphic-frame::after { display: none; }
  .process-content {
    max-width: 100% !important;
    flex: none !important;
  }
  .process-number {
    font-size: clamp(64px, 16vw, 100px) !important;
    margin-bottom: 10px;
  }
  .process-title {
    font-size: clamp(28px, 7vw, 44px) !important;
    margin: 0 0 14px !important;
  }
  .process-body { font-size: 15px !important; max-width: 100% !important; }
  .process-step-of { margin-top: 20px; }

  /* ── Section containers ─────────────────────── */
  .container-1280 { padding: 0 20px; }

  /* Portfolio header row: stack on mobile */
  #portfolio-section .section-head[style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px;
    margin-bottom: 36px !important;
  }
  #portfolio-section .btn.btn-outline-dark {
    width: 100%;
    justify-content: center;
  }
  .portfolio-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .portfolio-card:first-child {
    grid-column: span 1 !important;
  }
  .portfolio-card:first-child .card-img {
    aspect-ratio: 4/3 !important;
  }

  /* Materials */
  .material-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px;
  }
  .material-card .card-body { padding: 16px 18px 20px; }
  .material-card .card-title { font-size: 16px; }

  /* Testimonials — single col, scrollable */
  .testimonial-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .testi-card { padding: 24px 22px 22px; }
  .testi-quote { font-size: 15px; }

  /* Room sections */
  .room-grid, .room-grid.reverse {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    gap: 32px;
  }
  .room-section { padding: 48px 0; }
  .room-content h2 { font-size: clamp(28px, 7vw, 42px) !important; }

  /* Section head */
  .section-head { margin-bottom: 36px; }
  .section-head h2 { font-size: clamp(32px, 8vw, 48px); }
  .section-head .lead { font-size: 15px; }

  /* CTA section */
  .cta-section { padding: 64px 0 72px; }
  .cta-section h2 {
    font-size: clamp(36px, 9vw, 60px) !important;
    max-width: 18ch !important;
  }
  .cta-section .lead { font-size: 15px !important; margin-bottom: 32px !important; }
  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0 24px;
  }
  .cta-buttons .btn {
    width: 100%;
    justify-content: center;
    font-size: 13px !important;
    padding: 16px 24px !important;
  }
  .cta-trust { gap: 16px; flex-wrap: wrap; }
  .cta-trust-item .trust-num { font-size: 26px; }
  .cta-trust-sep { display: none; }
  .cta-divider { margin-bottom: 28px; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
    padding: 48px 0 36px;
  }
  .footer-brand p { max-width: 100%; }
  .site-footer .container-1280 { padding: 0 20px; }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 20px 0;
  }

  /* Consultation modal */
  .consult-modal {
    padding: 32px 20px 28px !important;
    border-radius: 20px;
    max-height: 90vh;
    overflow-y: auto;
  }
  .consult-modal h3 { font-size: 28px !important; }
  .consult-form input,
  .consult-form textarea {
    font-size: 16px !important; /* Prevents iOS zoom on input focus */
  }
  .consult-modal-backdrop {
    align-items: flex-end !important;
    padding: 0;
  }
  .consult-modal {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* NOTE: -webkit-overflow-scrolling:touch intentionally removed —
     it creates a new scroll container which breaks position:sticky
     on all child elements in iOS Safari */

  /* ── General padding/sizing helpers ────────── */
  .eyebrow { font-size: 11px; letter-spacing: 0.22em; }
  section[style*="padding:80px"] { padding: 52px 0 !important; }
  section[style*="padding:80px 0 110px"] { padding: 52px 0 72px !important; }
}

/* ─────────────────────────────────────────────────
   BREAKPOINT: max-width 420px (very small phones)
   ───────────────────────────────────────────────── */
@media (max-width: 420px) {
  .material-grid { grid-template-columns: 1fr !important; }
  .nav-bar .nav-logo img { height: 36px !important; }
  .process-header { top: 66px; }
  .scene-hero h1 { font-size: clamp(30px, 9.5vw, 44px) !important; }
  .cta-section h2 { font-size: clamp(32px, 10vw, 50px) !important; }
  .glass h2 { font-size: clamp(22px, 7vw, 32px) !important; }
}



/* ═══════════════════════════════════════════════════
   OVERFLOW / VIEWPORT WIDTH FIX
   Prevents horizontal scroll WITHOUT killing vertical scroll.
   KEY: overflow-x:hidden on BOTH html+body together kills
   iOS/mobile vertical scrolling entirely. Use overflow-x:clip
   on html only — clip does NOT create a scroll container so
   vertical scroll is fully preserved.
   ═══════════════════════════════════════════════════ */

html {
  overflow-x: clip; /* 'clip' not 'hidden' — never blocks vertical scroll */
}

/* Do NOT set any overflow on body — it breaks sticky + iOS scroll */
body {
  width: 100%;
  max-width: 100vw;
}

/* Clip overflow at the section level instead */
/* NOTE: #cinematic-act and .cinema-sticky are intentionally EXCLUDED here.
   Any overflow value on an ancestor of position:sticky breaks sticky on iOS Safari.
   Horizontal overflow for those sections is handled by the html overflow-x:clip above. */
#cinema-stage,
#process-section,
.process-sticky {
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
}
.section-wrap {
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
  position: relative;
  z-index: 10;
  isolation: isolate;
  background: var(--bg);
}

/* All absolute-positioned scene overlays must stay inside viewport */
.scene-hero,
.scene-center,
.scene-left,
.scene-right {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

/* Glass cards: never wider than their parent */
.glass {
  max-width: min(520px, calc(100vw - 40px)) !important;
  box-sizing: border-box;
}
/* footer-links-row: transparent on desktop, acts as 2 cols inside footer-grid */
.footer-links-row {
  display: contents;
}
@media (max-width: 760px) {
  .footer-links-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media (max-width: 760px) {
  /* Force all scene text containers to stay within screen */
  .scene-hero > div,
  .scene-center > div,
  .scene-left > div,
  .scene-right > div {
    width: 100%;
    max-width: calc(100vw - 40px);
    box-sizing: border-box;
  }
  

  /* Glass cards go full width on mobile */
  .glass {
    max-width: calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
  }

  /* Process section: ensure content fits */
  .process-step {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .process-content,
  .process-graphic-frame {
    width: 100%;
    max-width: calc(100vw - 40px);
    box-sizing: border-box;
  }

  /* Prevent any grid or section from creating overflow */
  .container-1280,
  .portfolio-grid,
  .material-grid,
  .testimonial-grid,
  .room-grid,
  .footer-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Fix nav so it never pushes wider than screen */
  .nav-bar {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Mobile drawer full width */
  .nav-mobile-drawer {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }
}
/* Show View All button after cards on mobile only */
@media (max-width: 760px) {
  .portfolio-viewall-mobile {
    display: block !important;
  }
}

@media (min-width: 761px) {
  .portfolio-viewall-mobile {
    display: none !important;
  }
}
/* Hide mobile button on desktop */
.mobile-viewall-container {
  display: none;
}

/* Hide desktop button on mobile */
@media (max-width: 760px) {
  .desktop-viewall {
    display: none !important;
  }
  .mobile-viewall-container {
    display: block !important;
  }
}

/* Keep desktop button visible on desktop */
@media (min-width: 761px) {
  .desktop-viewall {
    display: inline-flex !important;
  }
}
/* ═══════════════════════════════════════════════════
   MOBILE PERFORMANCE — targeted fixes only
   ═══════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /* 1. Kill film-grain mix-blend-mode overlay — forces compositor on every
        frame because it sits on top of a video layer */
  #cinema-stage .grain {
    display: none !important;
  }

  /* 2. Kill 3D perspective on process section — preserve-3d + perspective
        forces every card into its own GPU layer on mobile */
  .process-sticky {
    perspective: none !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
  .process-step {
    transform-style: flat !important;
    -webkit-transform-style: flat !important;
    will-change: opacity !important;
  }
  .process-graphic-frame {
    transform: none !important;
    will-change: opacity !important;
    /* flatten the multi-layer box-shadow to single shadow on mobile */
    box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important;
  }
  .process-step.active .process-graphic-frame {
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  }

  /* 3. Remove will-change from scene overlays — too many promoted GPU layers
        causes memory pressure on low-RAM phones */
  .scene-hero, .scene-center, .scene-left, .scene-right {
    will-change: auto !important;
  }
}

/* ═══════════════════════════════════════════════════
   MOBILE VIDEO — iOS + Android comprehensive fix
   All rules scoped to max-width:760px so desktop
   is completely untouched.
   ═══════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /*
   * Remove will-change:transform from video elements.
   * On Android/iOS, this hint promotes each <video> into its own
   * compositor layer. When currentTime is scrubbed during touch-scroll,
   * the GPU re-composites every layer on every frame → jitter/vibration.
   * Switching to will-change:opacity keeps the opacity transition
   * GPU-accelerated without the scrubbing penalty.
   */
  #cinema-stage video {
    will-change: opacity !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  /*
   * Remove will-change from scene text overlays — each one promoted
   * to its own GPU layer exhausts RAM on 3-4 GB phones (Redmi etc.)
   */
  .scene-hero, .scene-center, .scene-left, .scene-right {
    will-change: auto !important;
  }

  /*
   * Disable Ken-Burns on mobile (also done in JS, this is CSS safety net).
   * The scale animation forces a repaint on every frame on mobile.
   */
  #cinema-stage video {
    animation: none !important;
  }
}