/* =========================================================
   TAD EVENTS INDIA — Design System
   Jaipur · Heirloom Weddings
   ========================================================= */

:root{
  /* palette */
  --ink:        #0c0907;     /* near-black bordeaux base */
  --paper:      #f3ece1;     /* warm ivory */
  --paper-2:    #e8dec9;
  --gold:       #c9a35d;
  --gold-deep:  #a07a36;
  --maroon:     #6e1f25;
  --maroon-2:   #4a141a;
  --marigold:   #e7902c;
  --rust:       #b85a2a;
  --line:       rgba(243,236,225,0.14);
  --line-ink:   rgba(12,9,7,0.12);

  /* type */
  --f-serif:  'Cormorant Garamond', serif;
  --f-sans:   'Inter', system-ui, sans-serif;
  --f-script: 'Italianno', cursive;

  /* radius / motion */
  --r-sm: 6px;
  --r-md: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ scroll-behavior: auto; }
body{
  font-family: var(--f-sans);
  color: var(--paper);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "ss01","liga","kern";
  line-height: 1.5;
}
img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; }

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

/* Lenis */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: clip; }

/* ============== PRELOADER ============== */
#preloader{
  position: fixed; inset:0; z-index: 9999;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  transition: opacity .9s var(--ease), visibility .9s var(--ease);
}
#preloader.is-done{ opacity:0; visibility:hidden; }
.pre-inner{ width: min(520px, 80vw); text-align:center; }
.pre-mark{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:36px; }
.pre-mono{
  font-size: 11px; letter-spacing: .35em; text-transform: uppercase;
  color: rgba(243,236,225,.55);
}
.pre-tag{ color: var(--gold); }
.pre-logo{
  font-family: var(--f-serif);
  font-size: clamp(72px, 14vw, 140px);
  letter-spacing: .04em; line-height: 1;
  color: var(--paper);
  display:flex; gap: 6px;
}
.pre-logo span{ display:inline-block; transform: translateY(28px); opacity:0; animation: preLetter .8s var(--ease) forwards; }
.pre-logo span:nth-child(1){ animation-delay:.05s; }
.pre-logo span:nth-child(2){ animation-delay:.15s; }
.pre-logo span:nth-child(3){ animation-delay:.25s; }
@keyframes preLetter{ to{ transform: translateY(0); opacity:1; } }

.pre-bar{
  width:100%; height: 1px; background: rgba(243,236,225,.12); overflow:hidden;
  position: relative;
}
.pre-bar span{
  position:absolute; inset:0 100% 0 0; background: var(--gold);
  animation: preBar 2.2s var(--ease) forwards;
}
@keyframes preBar{ to{ right:0; } }
.pre-count{
  margin-top: 14px;
  font-family: var(--f-serif); font-size: 14px; letter-spacing: .2em;
  color: rgba(243,236,225,.6);
}
.pre-count i{ font-style: normal; }

/* ============== 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: 22px 36px;
  transition: background .4s var(--ease), padding .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.is-stuck{
  background: rgba(12,9,7,0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  padding: 14px 36px;
  border-bottom: 1px solid var(--line);
}
.nav-logo{
  display:flex; align-items: baseline; gap:8px;
  font-family: var(--f-serif);
}
.logo-mark{ font-size: 26px; letter-spacing: .04em; color: var(--paper); }
.logo-sub{
  font-family: var(--f-sans);
  font-size: 9px; letter-spacing: .35em; text-transform: uppercase;
  color: rgba(243,236,225,.55);
}
.nav-links{
  display:flex; gap: 34px; justify-self: center;
}
.nav-links a{
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(243,236,225,.78);
  position: relative; padding: 6px 0;
  transition: color .3s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom: 0; width: 0; height: 1px;
  background: var(--gold);
  transition: width .45s var(--ease);
}
.nav-links a:hover{ color: var(--paper); }
.nav-links a:hover::after{ width: 100%; }

.nav-cta{
  justify-self: end;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); background: var(--paper);
  padding: 12px 18px; border-radius: 999px;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.nav-cta:hover{ background: var(--gold); transform: translateY(-2px); }
.nav-cta i{ font-size: 10px; transition: transform .35s var(--ease); }
.nav-cta:hover i{ transform: translateX(4px); }

.nav-burger{ display:none; background:none; border:0; padding: 8px; }
.nav-burger span{
  display:block; width:24px; height: 1.5px; background: var(--paper);
  margin: 5px 0; transition: transform .35s var(--ease), opacity .25s;
}

/* Drawer */
.drawer{
  position: fixed; inset: 0; z-index: 90;
  background: var(--ink);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
  display:flex; align-items:center; justify-content:center;
}
.drawer.is-open{ opacity:1; visibility:visible; }
.drawer-inner{
  text-align:center; display:flex; flex-direction:column; gap:18px;
  padding: 100px 24px 40px;
}
.drawer-inner a{
  font-family: var(--f-serif); font-size: 34px; letter-spacing: .02em;
  color: var(--paper);
}
.drawer-cta{
  margin-top: 12px;
  font-family: var(--f-sans) !important;
  font-size: 12px !important; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold) !important;
}
.drawer-meta{
  margin-top: 28px; display:flex; flex-direction:column; gap:6px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(243,236,225,.5);
}
.drawer-meta a{ font-size: 12px !important; color: var(--paper) !important; }

/* ============== BUTTONS ============== */
.btn{
  display: inline-flex; align-items:center; gap: 12px;
  padding: 16px 26px; border-radius: 999px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), background .35s, color .35s, border-color .35s;
}
.btn i{ transition: transform .35s var(--ease); font-size: 11px; }
.btn:hover i{ transform: translateX(4px); }
.btn-primary{ background: var(--paper); color: var(--ink); }
.btn-primary:hover{ background: var(--gold); transform: translateY(-2px); }
.btn-ghost{ background: transparent; color: var(--paper); border-color: rgba(243,236,225,.25); }
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }
.btn-outline{ background: transparent; color: var(--paper); border-color: rgba(243,236,225,.3); }
.btn-outline:hover{ background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-block{ width:100%; justify-content:center; padding: 18px; }

/* ============== HERO ============== */
.hero{
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr minmax(0, 620px) 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 0 40px;
  padding: 110px 48px 60px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(110,31,37,.45) 0%, transparent 58%),
    radial-gradient(ellipse at 20% 80%, rgba(201,163,93,.08) 0%, transparent 50%),
    linear-gradient(180deg, #120c08 0%, #0c0907 100%);
}
.hero-canvas{
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

/* ---- Side columns with client photos ---- */
.hero-col{
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  gap: 18px;
  align-self: stretch;
  padding: 20px 0;
}
.hero-col-left{ align-items: flex-end; }
.hero-col-right{ align-items: flex-start; }

.hc-card{
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(0,0,0,.6), 0 0 0 1px rgba(243,236,225,.07) inset;
  flex-shrink: 0;
  will-change: transform;
}
.hc-card img{
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.82) saturate(1.08) contrast(1.04);
  transition: transform 1.2s var(--ease), filter .8s var(--ease);
}
.hc-card:hover img{
  transform: scale(1.06);
  filter: brightness(.95) saturate(1.15);
}
.hc-card::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(12,9,7,.7) 100%);
  pointer-events: none; z-index: 1;
  transition: opacity .5s;
}
/* card sizes - base rotations via data-tilt attribute handled by JS */
.hc-card-1{ width: clamp(160px, 17vw, 240px); aspect-ratio: 3/4; }
.hc-card-2{ width: clamp(130px, 13vw, 200px); aspect-ratio: 4/5; }
.hc-card-3{ width: clamp(130px, 13vw, 200px); aspect-ratio: 4/5; }
.hc-card-4{ width: clamp(160px, 17vw, 240px); aspect-ratio: 3/4; }

.hc-label{
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(243,236,225,.75);
  z-index: 2;
}

/* ---- Center text block ---- */
.hero-center{
  position: relative; z-index: 5;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  /* solid dark pill behind all text for guaranteed readability */
  padding: 40px 32px 36px;
}
/* subtle dark vignette behind center text */
.hero-center::before{
  content:"";
  position: absolute; inset: -20px -10px;
  background: radial-gradient(ellipse at 50% 50%, rgba(12,9,7,.88) 30%, rgba(12,9,7,.6) 60%, transparent 100%);
  pointer-events: none; z-index: -1;
  border-radius: 50%;
}

.hero-overline{
  display: inline-flex; align-items:center; gap: 14px;
  font-size: 10px; letter-spacing: .35em; text-transform: uppercase;
  color: rgba(243,236,225,.5);
  margin-bottom: 24px;
}
.hero-overline .dot{
  width: 4px; height: 4px; background: var(--gold); border-radius: 50%;
  flex-shrink: 0;
}

.hero-title{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(54px, 8.5vw, 140px);
  line-height: .92;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--paper);
  text-shadow: 0 2px 40px rgba(12,9,7,.8);
}
.hero-title .line{ display: block; overflow: hidden; }
.hero-title .ch{ display: inline-block; transform: translateY(110%); opacity:0; }
.hero-title .script{
  font-family: var(--f-script);
  font-size: 1.35em;
  color: var(--gold);
  font-style: normal;
  letter-spacing: 0;
  line-height: .85;
  margin: -.04em 0;
}

.hero-sub{
  margin: 22px auto 0;
  max-width: 480px;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.65;
  color: rgba(243,236,225,.8);
}
.hero-sub span{ display:block; }
.hero-sub em{ color: var(--gold); font-style: italic; font-family: var(--f-serif); }

.hero-cta{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-top: 32px;
}

/* stats row inside hero center */
.hero-stats-row{
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(243,236,225,.12);
  display: flex; align-items: center; gap: 20px;
  width: 100%;
  justify-content: center;
}
.hs-item{ display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hs-num{
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--paper); line-height: 1;
}
.hs-num em{ font-style: normal; color: var(--gold); font-size: .65em; margin-left: 2px; }
.hs-lbl{
  font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(243,236,225,.45);
}
.hs-sep{
  color: rgba(243,236,225,.2); font-size: 24px; line-height: 1;
  margin: 0 4px;
}

/* scroll cue — absolute bottom center */
.hero-scroll-cue{
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(243,236,225,.45);
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  transition: color .3s;
}
.hero-scroll-cue:hover{ color: var(--gold); }
.hsc-line{
  width: 1px; height: 44px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollLine 2s var(--ease) infinite;
  transform-origin: top;
}
.hsc-txt{ order: -1; }
@keyframes scrollLine{
  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; }
}

/* ============== TICKER ============== */
.ticker{
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  border-top: 1px solid rgba(12,9,7,.1);
  border-bottom: 1px solid rgba(12,9,7,.1);
  padding: 18px 0;
}
.ticker-track{
  display: flex; gap: 36px;
  white-space: nowrap;
  animation: tickerScroll 42s linear infinite;
  font-family: var(--f-serif);
  font-size: clamp(20px, 2.6vw, 32px);
  font-style: italic;
}
.ticker-track .dot{ color: var(--gold); font-style: normal; }
@keyframes tickerScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ============== STORY ============== */
.story{
  background: var(--paper);
  color: var(--ink);
  padding: clamp(80px, 12vh, 160px) 36px;
}
.story-grid{
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: start;
}
.story-left{ position: sticky; top: 120px; }
.kicker{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 36px;
}
.kdot{ width: 6px; height: 6px; border-radius:50%; background: var(--maroon); }
.story-stamp{
  position: relative;
  width: 280px;
  aspect-ratio: 3/4;
  margin-top: 20px;
  transform: rotate(-3deg);
}
.story-stamp img{
  width:100%; height:100%; object-fit:cover;
  filter: sepia(.15) contrast(1.05);
  border-radius: 2px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.35), 0 0 0 6px var(--paper) inset, 0 0 0 7px rgba(12,9,7,.08) inset;
}
.stamp-cap{
  position: absolute; left: 10px; bottom: -28px;
  font-family: var(--f-script);
  font-size: 26px;
  color: var(--maroon);
  transform: rotate(-1deg);
}

.story-overline{
  font-size: 11px; letter-spacing: .35em; text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 24px;
}
.story-h{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 78px);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
  max-width: 18ch;
}
.story-h em{
  font-style: italic; color: var(--maroon);
  position: relative;
}
.story-body{
  margin-top: 50px; max-width: 540px;
}
.story-body p{
  font-size: 16px; line-height: 1.75;
  color: rgba(12,9,7,.75);
  margin: 0 0 18px;
}
.story-sign{
  margin-top: 40px;
  border-top: 1px solid var(--line-ink);
  padding-top: 28px;
  display:flex; flex-direction:column; gap: 4px;
}
.sig{ font-family: var(--f-script); font-size: 44px; color: var(--maroon); }
.sig-sub{ font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(12,9,7,.55); }

/* ============== SECTION HEADS ============== */
.sec-head{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 36px;
}
.sec-head-center{ text-align:center; }
.sec-head-center .kicker{ justify-content:center; }
.sec-title{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0;
}
.sec-title em{ font-style: italic; color: var(--gold); }
.sec-sub{
  max-width: 560px;
  margin: 24px auto 0;
  font-size: 15px; line-height: 1.7;
  color: rgba(243,236,225,.65);
}

/* ============== SERVICES ============== */
.services{
  background: var(--ink);
  padding: clamp(80px, 14vh, 180px) 0;
  position: relative;
}
.services .sec-head{ margin-bottom: 80px; }
.services .sec-title em{ color: var(--gold); }
.svc-wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 36px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: start;
}
.svc-images{
  position: sticky; top: 120px;
  aspect-ratio: 4/5;
  border-radius: 4px;
  overflow: hidden;
  background: var(--maroon-2);
}
.svc-img{
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s var(--ease), transform 1.4s var(--ease);
}
.svc-img.active{ opacity: 1; transform: scale(1); }
.svc-img img{ width:100%; height:100%; object-fit: cover; filter: brightness(.85); }
.svc-img::after{
  content:""; position: absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,9,7,0) 50%, rgba(12,9,7,.7) 100%);
}

.svc-list{ display: flex; flex-direction: column; }
.svc-row{
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 28px;
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: padding .4s var(--ease);
}
.svc-row:first-child{ border-top: 1px solid var(--line); }
.svc-row.is-active{ padding: 50px 0; }
.svc-num{
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
  padding-top: 4px;
}
.svc-row h3{
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 1.05;
  margin: 0 0 12px;
  color: var(--paper);
  transition: color .35s var(--ease), transform .5s var(--ease);
}
.svc-row.is-active h3{ color: var(--gold); }
.svc-row p{
  margin: 0;
  font-size: 14px; line-height: 1.7;
  color: rgba(243,236,225,.65);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .55s var(--ease), opacity .45s var(--ease), margin .35s;
}
.svc-row.is-active p{ max-height: 200px; opacity: 1; margin: 8px 0 0; }
.svc-tags{
  list-style:none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .55s var(--ease), opacity .45s var(--ease), margin .35s;
}
.svc-row.is-active .svc-tags{ max-height: 100px; opacity: 1; margin-top: 18px; }
.svc-tags li{
  font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: rgba(243,236,225,.6);
}
.svc-arrow{
  align-self: center;
  font-size: 14px;
  color: rgba(243,236,225,.4);
  transition: transform .4s var(--ease), color .4s var(--ease);
}
.svc-row.is-active .svc-arrow{ color: var(--gold); transform: translateX(8px); }

/* ============== MARQUEE QUOTE ============== */
.quote-marq{
  background: var(--maroon);
  color: var(--paper);
  padding: 36px 0;
  overflow: hidden;
  border-top: 1px solid rgba(243,236,225,.06);
  border-bottom: 1px solid rgba(243,236,225,.06);
}
.qm-track{
  display:flex; gap: 40px; white-space: nowrap;
  font-family: var(--f-serif);
  font-size: clamp(34px, 6vw, 90px);
  line-height: 1;
  animation: tickerScroll 38s linear infinite;
}
.qm-item.script{ font-family: var(--f-script); color: var(--gold); font-size: 1.5em; }
.qm-sep{ color: var(--gold); }

/* ============== PORTFOLIO ============== */
.portfolio{
  background: var(--ink);
  padding: clamp(80px, 14vh, 180px) 0;
}
.portfolio .sec-head{ margin-bottom: 70px; }

/* Two-column masonry approach — no broken grid rows */
.folio{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.folio-col{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Alternate offset for visual rhythm */
.folio-col-b{
  margin-top: 60px;
}

.folio-card{
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  background: var(--maroon-2);
}
/* Default card height */
.folio-card .folio-media{
  position: relative;
  width: 100%;
  padding-bottom: 72%; /* 4:3 ish */
  overflow: hidden;
}
/* Tall cards */
.folio-card.folio-tall .folio-media{
  padding-bottom: 130%;
}

.folio-media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease), filter .8s var(--ease);
  filter: brightness(.78) saturate(1.06);
}
.folio-card:hover .folio-media img{
  transform: scale(1.07);
  filter: brightness(.92) saturate(1.12);
}
.folio-media::after{
  content:""; position: absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,9,7,0) 30%, rgba(12,9,7,.88) 100%);
  pointer-events: none;
  z-index: 1;
}
.folio-cap{
  position: absolute;
  left: 22px; bottom: 20px; right: 22px;
  z-index: 2;
  color: var(--paper);
  transform: translateY(6px);
  transition: transform .55s var(--ease);
}
.folio-card:hover .folio-cap{ transform: translateY(0); }
.fc-no{
  display: block;
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}
.folio-cap h3{
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(18px, 1.8vw, 26px); line-height: 1.1;
  margin: 0 0 5px;
}
.folio-cap h3 em{
  color: var(--gold); font-style: italic;
  font-family: var(--f-script); font-size: 1.35em;
  margin: 0 3px;
}
.fc-meta{
  display: block;
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(243,236,225,.55);
}
.folio-cta{ text-align:center; margin-top: 56px; }

/* ============== PROCESS ============== */
.process{
  background: var(--paper);
  color: var(--ink);
  padding: clamp(80px, 14vh, 180px) 0;
}
.process .kicker{ color: var(--maroon); }
.process .kdot{ background: var(--maroon); }
.process .sec-title em{ color: var(--maroon); font-style: italic; }
.process .sec-head{ margin-bottom: 100px; }
.proc-rail{
  max-width: 920px;
  margin: 0 auto;
  padding: 0 36px;
  position: relative;
}
.proc-line{
  position: absolute;
  left: 70px;
  top: 0; bottom: 0; width: 1px;
  background: rgba(12,9,7,.12);
}
.proc-line-fill{
  display:block; width: 100%; height: 0;
  background: var(--maroon);
  transform-origin: top;
}
.proc-step{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 30px;
  padding: 32px 0;
  align-items: start;
  position: relative;
}
.proc-step::before{
  content:""; position: absolute; left: 64px; top: 44px;
  width: 13px; height: 13px;
  background: var(--paper); border: 2px solid var(--maroon); border-radius: 50%;
  z-index: 2;
}
.ps-num{
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(34px, 4vw, 54px);
  color: var(--maroon);
  line-height: 1;
}
.ps-body h3{
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(24px, 2.5vw, 36px);
  margin: 4px 0 10px;
}
.ps-body p{
  margin: 0;
  font-size: 15px; line-height: 1.7;
  color: rgba(12,9,7,.7);
  max-width: 52ch;
}

/* ============== STATS ============== */
.stats{
  background: var(--ink);
  padding: clamp(60px, 10vh, 120px) 36px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats-grid{
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat{
  text-align: left;
  padding: 30px 24px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.stat:last-child{ border-right: none; }
.stat-num{
  font-family: var(--f-serif);
  font-size: clamp(56px, 7vw, 110px);
  line-height: .9;
  color: var(--paper);
  font-weight: 400;
}
.stat-suf{
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--gold);
  font-size: clamp(22px, 2.4vw, 36px);
  margin-top: -8px;
  display: inline-block;
}
.stat-lbl{
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(243,236,225,.55);
  margin-top: 10px;
}

/* ============== VOICES ============== */
.voices{
  background: var(--ink);
  padding: clamp(80px, 14vh, 180px) 0;
  overflow: hidden;
}
.voices .sec-head{ margin-bottom: 80px; }
.voices-track-wrap{
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.voices-track{
  display: flex; gap: 28px;
  width: max-content;
  animation: voicesScroll 55s linear infinite;
}
.voices-track:hover{ animation-play-state: paused; }
.voice{
  flex: 0 0 460px;
  background: linear-gradient(180deg, rgba(243,236,225,.04), rgba(243,236,225,.02));
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 40px 32px;
  position: relative;
  margin: 0;
}
.vq{
  position: absolute; top: 24px; right: 28px;
  color: var(--gold);
  font-size: 20px;
  opacity: .35;
}
.voice blockquote{
  font-family: var(--f-serif);
  font-size: 20px; line-height: 1.45;
  font-style: italic;
  color: var(--paper);
  margin: 0 0 24px;
}
.voice figcaption{
  display: flex; flex-direction:column; gap: 4px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.voice figcaption strong{
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--gold);
  letter-spacing: .04em;
}
.voice figcaption span{
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(243,236,225,.5);
}
@keyframes voicesScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ============== CTA / CONTACT ============== */
.cta{
  background:
    radial-gradient(ellipse at 80% 30%, rgba(110,31,37,.6), transparent 60%),
    radial-gradient(ellipse at 10% 90%, rgba(201,163,93,.18), transparent 50%),
    var(--ink);
  padding: clamp(80px, 14vh, 180px) 36px;
}
.cta-inner{
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.cta-title{
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(44px, 5.5vw, 88px);
  line-height: 1;
  letter-spacing: -.01em;
  margin: 0 0 50px;
  color: var(--paper);
}
.cta-title em{ font-style: italic; color: var(--gold); }
.cta-meta{ display: flex; flex-direction: column; gap: 18px; }
.cm-row{
  display: grid; grid-template-columns: 100px 1fr; gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.cm-lbl{
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(243,236,225,.5);
}
.cm-val{ font-size: 15px; color: var(--paper); }
a.cm-val:hover{ color: var(--gold); }

.cta-form{
  background: rgba(243,236,225,.03);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 40px;
  display: flex; flex-direction: column; gap: 20px;
}
.field{ display: flex; flex-direction: column; gap: 8px; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label{
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(243,236,225,.55);
}
.field label .opt{ color: rgba(243,236,225,.35); text-transform: none; letter-spacing: .05em; }
.field input, .field select, .field textarea{
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  padding: 12px 0;
  font: inherit;
  color: var(--paper);
  font-size: 15px;
  border-radius: 0;
  transition: border-color .35s var(--ease);
  font-family: var(--f-sans);
}
.field input::placeholder, .field textarea::placeholder{
  color: rgba(243,236,225,.3);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-bottom-color: var(--gold);
}
.field select{ appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 14px) 22px, calc(100% - 8px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.field select option{ background: var(--ink); color: var(--paper); }
.field textarea{ resize: vertical; min-height: 80px; }
.form-note{
  margin: 0;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
  min-height: 16px;
}
.form-note.error{ color: var(--rust); }

/* ============== FOOTER ============== */
.foot{
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--line);
}
.foot-top{
  max-width: 1280px; margin: 0 auto;
  padding: 80px 36px 60px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
}
.foot-mark{ display: flex; flex-direction: column; }
.fm-lg{
  font-family: var(--f-serif);
  font-size: clamp(80px, 12vw, 180px); line-height: .85;
  letter-spacing: -.01em;
}
.fm-sm{
  font-size: 11px; letter-spacing: .35em; text-transform: uppercase;
  color: rgba(243,236,225,.6); margin-top: 8px;
}
.fm-tag{
  margin-top: 24px;
  font-family: var(--f-script);
  font-size: 32px;
  color: var(--gold);
}
.foot-cols{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  padding-top: 14px;
}
.foot-cols h5{
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(243,236,225,.5); margin: 0 0 18px;
  font-weight: 500;
}
.foot-cols a{
  display: block;
  font-size: 14px; line-height: 1.5;
  color: var(--paper);
  margin-bottom: 8px;
  transition: color .3s var(--ease), transform .35s var(--ease);
}
.foot-cols a:hover{ color: var(--gold); transform: translateX(4px); }

.foot-marq{
  background: var(--paper);
  color: var(--ink);
  padding: 24px 0;
  overflow: hidden;
}
.fm-track{
  display: flex; gap: 50px; white-space: nowrap;
  animation: tickerScroll 50s linear infinite;
  font-family: var(--f-serif);
  font-size: clamp(48px, 9vw, 130px);
  line-height: 1;
  letter-spacing: -.01em;
}
.fm-track .dot{ color: var(--gold); }

.foot-bot{
  max-width: 1280px; margin: 0 auto;
  padding: 24px 36px;
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: .15em;
  color: rgba(243,236,225,.5);
}

/* ============== REVEAL HELPERS ============== */
[data-reveal]{
  opacity: 0; transform: translateY(40px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-in{ opacity: 1; transform: none; }

.split-line{ overflow: hidden; display: block; }
.split-line > span{ display: inline-block; transform: translateY(110%); }

/* ============== RESPONSIVE ============== */
@media (max-width: 1200px){
  .hero{ grid-template-columns: 1fr minmax(0, 520px) 1fr; gap: 0 28px; padding: 110px 32px 60px; }
  .hc-card-1, .hc-card-4{ width: clamp(140px, 15vw, 200px); }
  .hc-card-2, .hc-card-3{ width: clamp(110px, 11vw, 165px); }
}

@media (max-width: 1100px){
  .story-grid{ grid-template-columns: 1fr; gap: 60px; }
  .story-left{ position: static; }
  .svc-wrap{ grid-template-columns: 1fr; gap: 40px; }
  .svc-images{ position: relative; top: 0; aspect-ratio: 16/10; }
  .cta-inner{ grid-template-columns: 1fr; gap: 50px; }
  .foot-top{ grid-template-columns: 1fr; gap: 50px; }
}

@media (max-width: 900px){
  /* Hero: collapse to single column, hide side cards */
  .hero{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 110px 24px 70px;
    justify-items: center;
  }
  .hero-col{ display: none; }
  .hero-center{ padding: 36px 24px 30px; }
  .hero-center::before{
    background: radial-gradient(ellipse at 50% 50%, rgba(12,9,7,.92) 40%, rgba(12,9,7,.75) 70%, transparent 100%);
  }
  .hero-title{ font-size: clamp(50px, 12vw, 90px); }
  .hero-stats-row{ gap: 14px; }
  .hs-sep{ margin: 0; }
}

@media (max-width: 860px){
  .nav{ padding: 16px 22px; grid-template-columns: auto 1fr auto; }
  .nav.is-stuck{ padding: 12px 22px; }
  .nav-links{ display: none; }
  .nav-cta{ display: none; }
  .nav-burger{ display: block; justify-self: end; }
  .nav-burger.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .nav-burger.is-open span:nth-child(2){ transform: translateY(-7px) rotate(-45deg); }

  .story, .services, .portfolio, .process, .voices, .cta, .stats{ padding-left: 22px; padding-right: 22px; }
  .sec-head{ padding: 0; }

  /* Portfolio: single column on mobile */
  .folio{ grid-template-columns: 1fr; padding: 0; gap: 14px; }
  .folio-col{ gap: 14px; }
  .folio-col-b{ margin-top: 0; }
  .folio-card.folio-tall .folio-media{ padding-bottom: 100%; }

  .stats-grid{ grid-template-columns: 1fr 1fr; }
  .stat{ border-right: none; border-bottom: 1px solid var(--line); }
  .stat:last-child, .stat:nth-last-child(2){ border-bottom: none; }

  .proc-rail{ padding: 0; }
  .proc-step{ grid-template-columns: 90px 1fr; gap: 18px; }
  .proc-step::before{ left: 38px; }
  .proc-line{ left: 44px; }

  .cta-form{ padding: 28px 22px; }
  .field-row{ grid-template-columns: 1fr; gap: 18px; }
  .foot-cols{ grid-template-columns: 1fr 1fr; }
  .foot-bot{ flex-direction: column; gap: 8px; text-align: center; }

  .voice{ flex-basis: 300px; padding: 26px 20px; }
  .voice blockquote{ font-size: 16px; }
}

@media (max-width: 580px){
  .hero-title{ font-size: clamp(42px, 13vw, 70px); }
  .hero-stats-row{ flex-wrap: wrap; gap: 16px 10px; }
  .hs-sep{ display: none; }
  .folio{ grid-template-columns: 1fr; }
  .foot-cols{ grid-template-columns: 1fr; }
}

/* ============== Reduce motion ============== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .ticker-track, .qm-track, .voices-track, .fm-track{ animation: none !important; }
}