/* ============================================================
   VIVAH UTSAV EVENTS — Luxury Wedding Atelier
   Storytelling, cinematic, parallax, restraint.
   ============================================================ */

:root{
  /* Palette: warm ivory, saffron, gold, deep maroon, ink */
  --ivory:        #f4ece0;
  --ivory-2:      #ebe0cf;
  --cream:        #fbf6ee;
  --ink:          #0e0a06;
  --ink-2:        #1a130c;
  --ink-soft:     #2a2017;
  --saffron:      #d96f2a;
  --saffron-deep: #b85620;
  --gold:         #c79a4a;
  --gold-soft:    #d9b878;
  --maroon:       #6e1b2d;
  --rose:         #d6a89e;
  --muted:        #8a7e6b;
  --line:         rgba(20,12,4,0.14);
  --line-on-dark: rgba(244,236,224,0.18);

  --serif:  "Fraunces", "Cormorant Garamond", Georgia, serif;
  --serif2: "Cormorant Garamond", Georgia, serif;
  --script: "Tangerine", cursive;
  --sans:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1480px;
  --gutter: clamp(20px, 4vw, 64px);

  --ease: cubic-bezier(.7,.05,.2,1);
  --ease2: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html, body{
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html{ scroll-behavior: auto; } /* let Lenis handle it */
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ background:none; border:0; color:inherit; cursor:pointer; font:inherit; }
::selection{ background: var(--saffron); color: var(--cream); }

/* ===== Type ===== */
h1,h2,h3,h4{ font-family: var(--serif); font-weight:400; letter-spacing:-0.01em; }
em{ font-family: var(--serif); font-style: italic; color: var(--saffron-deep); font-weight: 400; }
i.serif-i{ font-style: italic; }

/* ============================================================
   LOADER
   ============================================================ */
.loader{
  position: fixed; inset:0; z-index:200;
  background: var(--ink);
  color: var(--gold);
  display: flex; align-items:center; justify-content:center;
  flex-direction:column;
}
.loader-inner{ text-align:center; }
.loader-mandala{
  width: 220px; height: 220px; margin: 0 auto;
  color: var(--gold);
  animation: spin 16s linear infinite;
  opacity: .8;
}
.loader-text{
  margin-top: 32px;
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 0.08em;
  color: var(--cream);
}
.loader-text .loader-amp{ color: var(--gold); margin: 0 14px; }
.loader-count{
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.4em;
  color: var(--gold-soft);
  text-transform: uppercase;
}
.loader-count i{ font-style:normal; opacity:.6; }
@keyframes spin{ to{ transform: rotate(360deg); } }

body.loaded .loader{
  opacity: 0; pointer-events:none;
  transition: opacity .8s var(--ease) .2s;
}

/* ============================================================
   CURSOR
   ============================================================ */
.cursor{
  position: fixed; top:0; left:0;
  pointer-events:none; z-index: 250;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .4s ease;
}
body.loaded .cursor{ opacity: 1; }
.cursor-dot{
  position: fixed; width:6px; height:6px; border-radius:50%;
  background: var(--cream);
  transform: translate(-50%,-50%);
  transition: width .25s, height .25s, background .25s;
}
.cursor-ring{
  position: fixed; width: 38px; height: 38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.7);
  transform: translate(-50%,-50%);
  transition: width .35s var(--ease), height .35s var(--ease), border-color .25s;
}
.cursor-label{
  position: fixed; transform: translate(14px, 14px);
  font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform:uppercase;
  color: var(--cream); opacity:0; transition: opacity .25s;
}
.cursor.hovering .cursor-ring{ width: 64px; height: 64px; }
.cursor.viewing .cursor-ring{ width: 90px; height: 90px; background: rgba(217,111,42,.15); border-color: var(--saffron); }
.cursor.viewing .cursor-label{ opacity:1; }
@media (hover:none){ .cursor{ display:none; } }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px var(--gutter);
  color: var(--ink);
  mix-blend-mode: normal;
  transition: background .4s var(--ease), padding .4s var(--ease), color .4s var(--ease);
}
.nav.scrolled{
  background: rgba(244, 236, 224, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.nav.over-dark{ color: var(--cream); }
.nav.over-dark.scrolled{ background: rgba(14,10,6,.7); border-bottom-color: var(--line-on-dark); }

.nav-brand{
  display:flex; align-items:center; gap:12px;
  font-family: var(--serif);
}
.brand-mark{ width:34px; height:34px; color: var(--saffron-deep); }
.brand-mark svg{ width:100%; height:100%; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-size: 18px; letter-spacing: 0.02em; }
.brand-sub{ font-family: var(--sans); font-size: 10px; letter-spacing: .3em; text-transform:uppercase; color: var(--muted); margin-top: 4px; }

.nav-links{
  display:flex; gap: 28px;
  font-family: var(--sans); font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
}
.nav-links a{
  display:inline-flex; align-items:baseline; gap:6px;
  padding: 8px 2px;
  position: relative;
}
.nav-links a span{ font-size: 9px; color: var(--saffron-deep); letter-spacing: .2em; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav-links a:hover::after{ transform: scaleX(1); transform-origin: left; }

.nav-cta{
  justify-self:end;
  display:inline-flex; align-items:center; gap: 10px;
  padding: 12px 22px;
  border: 1px solid currentColor;
  border-radius: 100px;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  transition: background .4s var(--ease), color .4s var(--ease), gap .4s var(--ease);
}
.nav-cta:hover{ background: var(--ink); color: var(--cream); gap: 16px; border-color: var(--ink); }
.nav.over-dark .nav-cta:hover{ background: var(--cream); color: var(--ink); border-color: var(--cream); }

.nav-toggle{ display:none; }

@media (max-width: 1024px){
  .nav-links, .nav-cta{ display:none; }
  .nav{ grid-template-columns: 1fr auto; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px;
    width:46px; height:46px; border:1px solid currentColor; border-radius:50%;
    align-items:center; justify-content:center;
  }
  .nav-toggle span{ width: 18px; height: 1px; background: currentColor; transition: .3s; }
  .nav-toggle.open span:nth-child(1){ transform: translateY(3px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ transform: translateY(-3px) rotate(-45deg); }
}

/* Mobile menu */
.mobile-menu{
  position: fixed; inset:0; z-index: 90;
  background: var(--ink);
  color: var(--cream);
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 100px var(--gutter) 40px;
  clip-path: circle(0% at 95% 5%);
  transition: clip-path .8s var(--ease);
  pointer-events:none;
}
.mobile-menu.open{ clip-path: circle(150% at 95% 5%); pointer-events:auto; }
.mobile-menu-inner{ display:flex; flex-direction:column; gap: 18px; }
.mobile-menu-inner a{
  font-family: var(--serif); font-size: clamp(32px, 7vw, 56px);
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--line-on-dark);
  padding-bottom: 14px;
}
.mobile-menu-foot{
  display:flex; flex-direction:column; gap:8px;
  font-size: 13px; color: var(--gold-soft);
  letter-spacing: .1em;
}
.mobile-menu-foot a{ color: var(--gold-soft); }

/* ============================================================
   TOP RIBBON marquee
   ============================================================ */
.top-ribbon{
  position: fixed; top:0; left:0; right:0;
  z-index: 99;
  background: var(--ink);
  color: var(--gold-soft);
  height: 28px;
  display: none;
  overflow: hidden;
}
/* hidden by default — kept as a decorative element if needed */

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  min-height: 100vh;
  padding: 120px var(--gutter) 60px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 60px;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(180deg, #f7eedf 0%, #f1e3cd 60%, #ecd9bb 100%);
}
/* Desktop: text LEFT (order 1), stage RIGHT (order 2) */
.hero-copy{ order: 1; }
.hero-stage{ order: 2; }
.hero-bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.bg-warm{
  position:absolute; inset: -10%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(217,111,42,.18), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(199,154,74,.22), transparent 55%),
    radial-gradient(ellipse at 60% 10%, rgba(110,27,45,.10), transparent 50%);
}
.bg-grain{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: .55;
}

/* Mandalas */
.float-mandala{
  position: absolute;
  color: var(--saffron-deep);
  opacity: .14;
  pointer-events: none;
}
.float-mandala svg{ width:100%; height:100%; }
.float-mandala-1{ width: 520px; height: 520px; left: -180px; top: -120px; animation: spin 60s linear infinite; }
.float-mandala-2{ width: 360px; height: 360px; right: -80px; bottom: -80px; animation: spin 80s linear infinite reverse; opacity:.1; }

/* Petals */
.petals{ position:absolute; inset:0; }
.petal{
  position:absolute; width: 14px; height: 22px;
  background: radial-gradient(ellipse at 50% 30%, #f1b07a, #d96f2a 60%, transparent 70%);
  border-radius: 70% 70% 30% 30% / 60% 60% 40% 40%;
  opacity: .55;
  filter: blur(.4px);
  transform-origin: center;
}

/* Hero copy */
.hero-copy{
  position: relative; z-index: 4;
  max-width: 720px;
}
.hero-eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family: var(--sans); font-size: 11px; letter-spacing: .35em; text-transform:uppercase;
  color: var(--ink-soft);
  margin-bottom: 32px;
}
.hero-eyebrow .line{ flex:0 0 40px; height:1px; background: var(--ink-soft); opacity:.6; }
.hero-title{
  font-family: var(--serif);
  font-size: clamp(48px, 9.5vw, 156px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  font-weight: 350;
  color: var(--ink);
}
.hero-title i{ font-style: italic; font-family: var(--serif); color: var(--maroon); }
.hero-title em{ font-style: italic; color: var(--saffron-deep); }

.line-mask{
  display:block;
  overflow:hidden;
  padding-bottom: .05em;
}
.line-inner{
  display:block;
  transform: translateY(110%);
  will-change: transform;
}
body.hero-ready .hero-title .line-inner{
  transform: translateY(0);
  transition: transform 1.1s var(--ease);
}
body.hero-ready .hero-title .line-mask:nth-child(2) .line-inner{ transition-delay: .15s; }
body.hero-ready .hero-title .line-mask:nth-child(3) .line-inner{ transition-delay: .30s; }

.hero-sub{
  font-family: var(--serif2);
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 520px;
  margin-top: 32px;
  font-weight: 400;
  letter-spacing: 0.005em;
}
.hero-actions{
  margin-top: 20px;
  display:flex; gap: 18px; flex-wrap: wrap;
}
.btn{
  display:inline-flex; align-items:center; gap: 12px;
  padding: 16px 28px;
  border-radius: 100px;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  transition: all .5s var(--ease);
  border: 1px solid transparent;
}
.btn-primary{
  background: var(--ink);
  color: var(--cream);
}
.btn-primary:hover{ background: var(--saffron); gap: 18px; }
.btn-ghost{
  border-color: var(--ink);
  color: var(--ink);
}
.btn-ghost:hover{ background: var(--ink); color: var(--cream); }

.hero-meta{
  margin-top: 56px;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 30px;
  max-width: 540px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.hero-meta div{ display:flex; flex-direction:column; }
.hero-meta strong{
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 400;
  color: var(--ink);
}
.hero-meta span{
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* Stage */
.hero-stage{
  position: relative;
  z-index: 3;
  height: min(78vh, 720px);
  min-height: 520px;
  perspective: 1600px;
  transform-style: preserve-3d;
  transition: transform .8s var(--ease);
}
.stage-3d{
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
}
.stage-card{
  position:absolute;
  top: 50%; left: 50%;
  width: 62%;
  height: 88%;
  transform: translate(-50%,-50%);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(20,12,4,.5),
              0 10px 40px -20px rgba(20,12,4,.3);
  background: #2a1d12;
  transition: transform 1.1s var(--ease), opacity .8s var(--ease), filter .8s var(--ease);
  will-change: transform, opacity;
}
.stage-card img{
  width:100%; height:100%; object-fit: cover;
  transition: transform 6s var(--ease);
}
.stage-card.active img{ transform: scale(1.05); }
.card-label{
  position:absolute; bottom: 22px; left: 22px;
  background: rgba(14,10,6,.5);
  color: var(--cream);
  backdrop-filter: blur(8px);
  padding: 8px 14px; border-radius: 100px;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
}

/* Card depth positions controlled by JS via classes */
.stage-card[data-pos="center"]{ transform: translate(-50%,-50%) translateZ(0) rotateY(0); opacity:1; z-index:5; filter: brightness(1); }
.stage-card[data-pos="right1"]{ transform: translate(-15%,-50%) translateZ(-220px) rotateY(-22deg); opacity:.55; z-index:4; filter: brightness(.7) saturate(.85); }
.stage-card[data-pos="right2"]{ transform: translate(15%,-50%) translateZ(-440px) rotateY(-32deg); opacity:.25; z-index:3; filter: brightness(.5) saturate(.7); }
.stage-card[data-pos="left1"]{  transform: translate(-85%,-50%) translateZ(-220px) rotateY(22deg);  opacity:.55; z-index:4; filter: brightness(.7) saturate(.85); }
.stage-card[data-pos="left2"]{  transform: translate(-115%,-50%) translateZ(-440px) rotateY(32deg); opacity:.25; z-index:3; filter: brightness(.5) saturate(.7); }
.stage-card[data-pos="hidden"]{ opacity:0; pointer-events:none; transform: translate(-50%,-50%) translateZ(-600px) scale(.8); }

.stage-nav{
  position:absolute; bottom: -10px; z-index: 10;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.stage-nav:hover{ background: var(--ink); color: var(--cream); transform: scale(1.05); }
.stage-nav.prev{ left: 4%; }
.stage-nav.next{ right: 4%; }

/* Scroll cue */
.scroll-cue{
  position: absolute;
  bottom: 30px; left: 50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap: 8px;
  z-index: 6;
  font-size: 10px; letter-spacing: .3em; text-transform:uppercase;
  color: var(--ink-soft);
}
.cue-line{ width:1px; height: 60px; background: linear-gradient(to bottom, var(--ink-soft), transparent); animation: cueMove 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cueMove{
  0%{ transform: scaleY(0); transform-origin: top; }
  50%{ transform: scaleY(1); transform-origin: top; }
  51%{ transform: scaleY(1); transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}

/* Side rails */
.hero-rail{
  position: absolute; top: 50%;
  font-size: 10px; letter-spacing: .4em; text-transform: uppercase;
  color: var(--muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg) translateY(50%);
  z-index: 5;
}
.hero-rail.left{ left: 20px; }
.hero-rail.right{ right: 20px; transform: rotate(0deg) translateY(-50%); writing-mode: vertical-rl; }

/* ============================================================
   Marquee band
   ============================================================ */
.marquee-band{
  background: var(--ink);
  color: var(--cream);
  padding: 28px 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
}
.marquee-track{
  display:inline-flex; align-items:center; gap: 40px;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 52px);
  font-style: italic;
  animation: marquee 32s linear infinite;
  padding-left: 40px;
}
.marquee-track i{ color: var(--saffron); font-style: normal; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ============================================================
   Section heads
   ============================================================ */
.section-head{
  display:flex; flex-direction:column;
  gap: 22px;
  padding: 120px var(--gutter) 60px;
  max-width: var(--container);
  margin: 0 auto;
}
.section-num{
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .35em; text-transform: uppercase;
  color: var(--saffron-deep);
}
.section-title{
  font-family: var(--serif);
  font-size: clamp(40px, 6.5vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 350;
  max-width: 1100px;
}
.section-title em{ color: var(--saffron-deep); }

/* Reveal helpers */
.reveal, .reveal-up{ opacity: 0; }

/* ============================================================
   STORY
   ============================================================ */
.story{
  padding-bottom: 120px;
  background: var(--ivory);
}
.story-grid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.story-text .lead{
  font-family: var(--serif2);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 22px;
  font-weight: 400;
}
.story-text p{
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 18px;
  max-width: 540px;
}
.story-pills{
  list-style:none;
  display:flex; flex-wrap:wrap; gap: 10px;
  margin: 28px 0 36px;
}
.story-pills li{
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 10px 16px; border-radius: 100px;
  color: var(--ink);
  background: rgba(255,255,255,.4);
}
.link-arrow{
  display:inline-flex; align-items:center; gap: 12px;
  font-family: var(--sans);
  font-size: 13px; letter-spacing: .15em; text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 6px;
  transition: gap .4s var(--ease);
}
.link-arrow:hover{ gap: 18px; }

.story-visual{
  position: relative;
  height: 640px;
}
.story-card{
  position:absolute;
  border-radius: 6px;
  overflow:hidden;
  box-shadow: 0 30px 60px -25px rgba(20,12,4,.4);
}
.story-card img{ width:100%; height:100%; object-fit:cover; transition: transform 1.5s var(--ease); }
.story-card:hover img{ transform: scale(1.04); }
.story-card-1{
  width: 70%; height: 70%;
  top: 0; right: 0;
}
.story-card-2{
  width: 50%; height: 55%;
  bottom: 0; left: -10%;
}
.story-stamp{
  position:absolute;
  top: 50%; right: -8%;
  width: 160px; height: 160px;
  color: var(--saffron-deep);
  animation: spin 30s linear infinite;
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{
  background: var(--ink);
  color: var(--cream);
  position: relative;
  padding-bottom: 140px;
  overflow: hidden;
}
.services-head{
  padding: 140px var(--gutter) 80px;
  max-width: var(--container); margin: 0 auto;
}
.services-head .section-num{ color: var(--gold); }
.services-head .section-title{ color: var(--cream); }
.services-head .section-title em{ color: var(--saffron); }

.services-list{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line-on-dark);
}
.service-row{
  padding: 50px 40px 50px 0;
  border-bottom: 1px solid var(--line-on-dark);
  transition: padding .5s var(--ease), background .5s var(--ease);
  cursor: pointer;
  position: relative;
}
.service-row:nth-child(odd){ border-right: 1px solid var(--line-on-dark); padding-right: 60px; }
.service-row:nth-child(even){ padding-left: 60px; }
.service-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width: 2px;
  background: var(--saffron);
  transform: scaleY(0); transform-origin: top;
  transition: transform .6s var(--ease);
}
.service-row:hover::before{ transform: scaleY(1); }
.service-row:nth-child(even)::before{ left: -1px; }

.srv-num{
  font-family: var(--sans); font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.srv-title{
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 14px;
  color: var(--cream);
}
.srv-text{
  font-size: 15px; line-height: 1.65;
  color: rgba(244,236,224,.7);
  max-width: 540px;
  margin-bottom: 16px;
}
.srv-tag{
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold-soft);
}

/* Sticky preview pane removed by default — used on wide screens as floating frame */
.services-preview{ display: none; }
@media (min-width: 1280px){
  .services{ position: relative; }
  .services-list{ position: relative; }
  .services-preview{
    display:block;
    position: fixed;
    right: 7%;
    bottom: 8%;
    width: 280px; height: 360px;
    z-index: 1;
    border-radius: 6px;
    overflow:hidden;
    pointer-events:none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
    box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
  }
  .services.show-preview .services-preview{ opacity:1; transform: translateY(0); }
  .srv-frame{ position:relative; width:100%; height:100%; }
  .srv-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:0; transform: scale(1.05);
    transition: opacity .7s var(--ease), transform 1.5s var(--ease);
  }
  .srv-img.active{ opacity:1; transform: scale(1); }
  .srv-frame-label{
    position:absolute; bottom:14px; left:14px;
    font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
    color: var(--cream); background: rgba(0,0,0,.4); padding:6px 12px; border-radius: 100px;
    backdrop-filter: blur(8px);
  }
}

/* ============================================================
   QUOTE BAND (parallax)
   ============================================================ */
.quote-band{
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display:flex; align-items:center; justify-content:center;
  color: var(--cream);
  text-align: center;
}
.quote-bg{
  position:absolute; inset:-15%;
  z-index:0;
  will-change: transform;
}
.quote-bg img{ width:100%; height:100%; object-fit:cover; }
.quote-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,10,6,.55), rgba(14,10,6,.85));
}
.quote-text{
  position: relative; z-index:2;
  max-width: 1000px;
  padding: 0 var(--gutter);
  font-family: var(--serif);
}
.quote-text .qmark{
  display:block;
  font-family: var(--serif);
  font-size: 140px; line-height: 0.7;
  color: var(--saffron);
  margin-bottom: -20px;
}
.quote-text p{
  font-size: clamp(24px, 3.2vw, 46px);
  font-style: italic;
  line-height: 1.25;
  color: var(--cream);
  margin-bottom: 30px;
  font-weight: 350;
}
.quote-text cite{
  font-family: var(--sans);
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-soft);
  font-style: normal;
}

/* ============================================================
   PORTFOLIO
   ============================================================ */
.portfolio{
  background: var(--ivory);
  padding-bottom: 140px;
}
.portfolio-grid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 320px 320px 380px;
  gap: 20px;
}
.pf-card{
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #1a130c;
  display:block;
  transform-style: preserve-3d;
  will-change: transform;
}
/* Explicit placements — guaranteed no gap/overlap */
/* Row 1: feature card (large) col 1-8 + tall card col 9-12 rows 1-2 */
.pf-large  { grid-column: 1 / 9;  grid-row: 1 / 2; }
.pf-tall   { grid-column: 9 / 13; grid-row: 1 / 3; }
/* Row 2: two equal cards col 1-8 split */
.pf-card:nth-child(2){ grid-column: 1 / 5;  grid-row: 2 / 3; }
.pf-card:nth-child(3){ grid-column: 5 / 9;  grid-row: 2 / 3; }
/* Row 3: two equal cards then .pf-wide fills full width */
.pf-card:nth-child(5){ grid-column: 1 / 7;  grid-row: 3 / 4; }
.pf-wide   { grid-column: 7 / 13; grid-row: 3 / 4; }

.pf-img{
  position:absolute; inset:0;
  overflow: hidden;
}
.pf-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease), filter 1s var(--ease);
  filter: brightness(.95) saturate(1.05);
  transform: scale(1.05);
}
.pf-card:hover .pf-img img{ transform: scale(1.12); filter: brightness(.75); }

.pf-meta{
  position:absolute; inset: auto 0 0 0;
  padding: 28px;
  color: var(--cream);
  background: linear-gradient(180deg, transparent, rgba(14,10,6,.85));
  transform: translateY(20px);
  opacity: .85;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.pf-card:hover .pf-meta{ transform: translateY(0); opacity:1; }
.pf-meta h3{
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 400;
  margin: 6px 0;
}
.pf-place{
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-soft);
}
.pf-when{
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(244,236,224,.7);
}
.portfolio-foot{
  max-width: var(--container);
  margin: 60px auto 0; padding: 0 var(--gutter);
  text-align: center;
}

/* ============================================================
   PROCESS (horizontal scroll)
   ============================================================ */
.process{
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.process-intro{
  padding: 140px var(--gutter) 40px;
  max-width: var(--container); margin: 0 auto;
}
.process-intro .section-num{ color: var(--gold); }
.process-intro .section-title{ color: var(--cream); }
.process-intro .section-title em{ color: var(--saffron); }
.process-lead{
  margin-top: 24px;
  font-family: var(--sans);
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-soft);
}

.process-track-wrap{
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.process-track{
  display:flex;
  gap: 40px;
  padding: 80px var(--gutter);
  height: 100%;
  align-items: center;
  will-change: transform;
}
.step{
  flex: 0 0 460px;
  height: 480px;
  background: linear-gradient(145deg, #1f1710 0%, #15100a 100%);
  border: 1px solid var(--line-on-dark);
  border-radius: 8px;
  padding: 40px 36px;
  position: relative;
  display: flex; flex-direction: column;
  transition: transform .6s var(--ease), border-color .6s var(--ease);
}
.step:hover{ transform: translateY(-8px); border-color: var(--saffron); }
.step::before{
  content:""; position:absolute; top:0; left:0; right:0; height: 2px;
  background: linear-gradient(90deg, var(--saffron), var(--gold), transparent);
  transform-origin: left; transform: scaleX(0);
  transition: transform .8s var(--ease);
}
.step:hover::before{ transform: scaleX(1); }

.step-num{
  font-family: var(--serif);
  font-size: 80px;
  font-style: italic;
  line-height: 1;
  color: var(--saffron);
  opacity: .9;
  margin-bottom: 30px;
}
.step h3{
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 400;
  margin-bottom: 16px;
  color: var(--cream);
}
.step p{
  font-size: 15px;
  line-height: 1.7;
  color: rgba(244,236,224,.7);
  flex: 1;
}
.step-tag{
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold-soft);
  border-top: 1px solid var(--line-on-dark);
  padding-top: 20px;
  margin-top: 20px;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{
  background: var(--cream);
  padding-bottom: 100px;
}
.testi-grid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.testi{
  background: #fff;
  border: 1px solid var(--line);
  padding: 44px 40px;
  border-radius: 8px;
  position: relative;
}
.testi .qicon{
  font-size: 24px; color: var(--saffron-deep);
  margin-bottom: 18px;
  opacity: .7;
}
.testi blockquote{
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 24px;
  font-weight: 350;
  font-style: italic;
}
.testi figcaption{
  display:flex; flex-direction:column; gap:4px;
}
.testi figcaption strong{
  font-family: var(--serif);
  font-size: 17px; font-weight: 500;
}
.testi figcaption span{
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--muted);
}

.press-row{
  max-width: var(--container);
  margin: 80px auto 0;
  padding: 40px var(--gutter) 0;
  border-top: 1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap: 18px;
  justify-content: center;
  font-family: var(--serif);
}
.press-row span{
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted);
  margin-right: 14px;
}
.press-row em{
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--ink);
}
.press-row i{
  color: var(--saffron);
  font-style: normal;
}

/* ============================================================
   STATS
   ============================================================ */
.stats{
  background: var(--maroon);
  color: var(--cream);
  padding: 80px var(--gutter);
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}
.stat strong{
  display:block;
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 400;
  line-height: 1;
  color: var(--gold-soft);
}
.stat span{
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(244,236,224,.8);
  display:block; margin-top: 10px;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  background: var(--ivory);
  padding: 140px var(--gutter) 100px;
}
.contact-grid{
  max-width: var(--container);
  margin: 0 auto;
  display:grid; grid-template-columns: 1fr 1.1fr;
  gap: 100px;
}
.contact-left .contact-title{
  font-family: var(--serif);
  font-size: clamp(46px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 22px 0 30px;
  font-weight: 350;
}
.contact-left .contact-title em{ color: var(--saffron-deep); }
.contact-left p{
  font-family: var(--serif2);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 40px;
}
.contact-meta{
  list-style:none;
  display:flex; flex-direction:column; gap: 14px;
}
.contact-meta li{
  display:flex; align-items:center; gap: 12px;
  font-size: 15px;
  color: var(--ink);
}
.contact-meta li i{ color: var(--saffron-deep); width: 18px; }
.contact-meta a{ border-bottom: 1px solid transparent; transition: border-color .3s; }
.contact-meta a:hover{ border-bottom-color: currentColor; }

/* Form */
.contact-form{
  background: #fff;
  border: 1px solid var(--line);
  padding: 40px;
  border-radius: 8px;
  display:flex; flex-direction:column; gap: 22px;
}
.field{
  display:flex; flex-direction:column; gap:8px;
  flex:1;
}
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field label{
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .field textarea{
  width:100%;
  font-family: var(--sans);
  font-size: 16px;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  outline: none;
  transition: border-color .4s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-bottom-color: var(--saffron); }
.field textarea{ resize: vertical; padding: 14px 0; }

.submit-btn{
  align-self: flex-start;
  margin-top: 8px;
}
.form-note{
  font-size: 13px;
  color: var(--saffron-deep);
  min-height: 18px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  padding: 80px var(--gutter) 40px;
}
.footer-huge{
  font-family: var(--serif);
  font-size: clamp(80px, 18vw, 280px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--cream);
  display:flex; align-items:baseline; gap: 30px;
  margin-bottom: 60px;
  opacity: .95;
}
.footer-huge em{
  font-style: italic;
  color: var(--saffron);
}
.footer-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--line-on-dark);
}
.footer-grid h4{
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 14px;
  font-weight: 500;
}
.footer-grid p{
  font-size: 14px; line-height: 1.7;
  color: rgba(244,236,224,.8);
}
.footer-grid a{
  border-bottom: 1px solid transparent;
  transition: border-color .3s, color .3s;
}
.footer-grid a:hover{ color: var(--gold); border-bottom-color: var(--gold); }

.footer-bottom{
  margin-top: 60px;
  display:flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 30px;
  border-top: 1px solid var(--line-on-dark);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-soft);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px){
  .hero{ grid-template-columns: 1fr; padding-top: 110px; gap: 30px; min-height: auto; }
  /* On mobile/tablet: text on top (order 1), image below (order 2) */
  .hero-copy{ order: 1; }
  .hero-stage{ height: 64vh; min-height: 460px; order: 2; }
  .hero-rail{ display:none; }
  .story-grid{ grid-template-columns: 1fr; gap: 50px; }
  .story-visual{ height: 520px; }
  .contact-grid{ grid-template-columns: 1fr; gap: 60px; }
}
@media (max-width: 900px){
  .services-list{ grid-template-columns: 1fr; }
  .service-row{ padding: 40px 0 !important; border-right: 0 !important; }
  .service-row:nth-child(even){ padding-left: 0; }
  .testi-grid{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .footer-grid{ grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: 280px;
  }
  .pf-large  { grid-column: 1 / 3; grid-row: auto; }
  .pf-tall   { grid-column: 1 / 2; grid-row: auto; }
  .pf-wide   { grid-column: 1 / 3; grid-row: auto; }
  .pf-card   { grid-column: auto;  grid-row: auto; }
  .pf-card:nth-child(2),
  .pf-card:nth-child(3),
  .pf-card:nth-child(5){ grid-column: auto; grid-row: auto; }
}
@media (max-width: 640px){
  .nav{ padding: 14px var(--gutter); }
  .brand-sub{ display:none; }
  .hero-title{ font-size: clamp(46px, 14vw, 80px); }
  .hero-meta{ grid-template-columns: 1fr 1fr; }
  .hero-stage{ height: 56vh; min-height: 380px; }
  .stage-card{ width: 78%; }
  .field-row{ grid-template-columns: 1fr; }
  .contact-form{ padding: 28px 22px; }
  .step{ flex: 0 0 80vw; height: 440px; padding: 32px 26px; }
  .footer-huge{ font-size: clamp(64px, 22vw, 180px); flex-wrap: wrap; gap: 10px; }
  .footer-bottom{ flex-direction: column; }
  .quote-text p{ font-size: clamp(22px, 6vw, 32px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}