/* Aarav Kapoor Photography - sample demo
   Near-black canvas, champagne gold, editorial serif + thin sans */

:root {
  --bg: #0b0a09;
  --bg2: #12100e;
  --bg3: #1a1713;
  --line: rgba(239, 233, 223, 0.14);
  --ink: #efe9df;
  --muted: #a8a095;
  --muted2: #8f877c;
  --gold: #c9a46a;
  --gold2: #e6c994;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --grain: 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: italic; }

:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--gold); color: var(--bg); padding: .7rem 1.1rem;
  font-weight: 500; font-size: .85rem;
}
.skip:focus { top: 1rem; }

.container { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 10, 9, 0.82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar {
  width: min(1180px, 100% - 2.5rem); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem;
}
.brand { display: flex; flex-direction: column; line-height: 1; margin-right: auto; }
.brand-name { font-family: var(--serif); font-size: 1.65rem; font-weight: 500; letter-spacing: .03em; }
.brand-sub { margin-top: .3rem; font-size: .6rem; letter-spacing: .5em; text-transform: uppercase; color: var(--gold); font-weight: 400; }
.nav { display: flex; gap: 2rem; }
.nav a {
  font-size: .74rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); padding: .4rem 0; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav a:hover { color: var(--ink); border-color: var(--gold); }
.show-sm { display: none; }

.menu-btn {
  display: none; width: 2.75rem; height: 2.75rem; padding: 0;
  background: transparent; border: 1px solid var(--line); color: var(--ink); cursor: pointer;
  position: relative;
}
.menu-btn span { position: absolute; left: 25%; right: 25%; height: 1px; background: var(--ink); transition: transform .25s, top .25s; }
.menu-btn span:first-child { top: 38%; }
.menu-btn span:last-child { top: 60%; }
.open .menu-btn span:first-child { top: 50%; transform: rotate(45deg); }
.open .menu-btn span:last-child { top: 50%; transform: rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 1.9rem; border: 1px solid transparent; border-radius: 0;
  font: 500 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn-sm { padding: .85rem 1.2rem; font-size: .68rem; }
.btn-gold { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold2); border-color: var(--gold2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(239, 233, 223, 0.4); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold2); }

/* ---------- Type helpers ---------- */
.kicker {
  display: flex; align-items: center; gap: .9rem;
  font: 400 .72rem/1.3 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 1.4rem;
}
.kicker::before { content: ""; width: 2.4rem; height: 1px; background: var(--gold); flex: none; }
h2 {
  font: 300 clamp(2.3rem, 5.2vw, 4rem)/1.04 var(--serif);
  letter-spacing: -.005em; margin-bottom: 1.3rem;
}
h2 em, h1 em { color: var(--gold2); font-weight: 300; }
.hero h1 em { display: block; }
.price, .hero-stats dd, .svc-no, .step-no { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
h3 { font-family: var(--serif); font-weight: 400; }
.lede { color: var(--muted); font-size: 1.05rem; max-width: 34rem; }
.fine { margin-top: 2rem; font-size: .8rem; color: var(--muted2); letter-spacing: .04em; }
.fine.center { text-align: center; }

.section { padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; }
.section-alt { background: var(--bg2); border-block: 1px solid var(--line); }
.sec-head { margin-bottom: clamp(2.2rem, 5vw, 4rem); }
.sec-head.center { text-align: center; }
.sec-head.center .kicker { justify-content: center; }
.sec-head.center .kicker::after { content: ""; width: 2.4rem; height: 1px; background: var(--gold); }
.sec-head.center .lede { margin-inline: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(700px, calc(100svh - 4.5rem), 920px);
  display: flex; flex-direction: column;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg .sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #06050a 0%, #150f26 18%, #3a1b3b 40%, #93405a 58%, #e2815a 72%, #f6bd7c 84%, #f6bd7c 100%);
}
.skyline {
  position: absolute; right: 0; bottom: 0;
  height: 62%; width: auto; min-width: 100%; aspect-ratio: 1600 / 480;
  overflow: visible;
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain); opacity: .16; mix-blend-mode: overlay; pointer-events: none;
}
.hero-bg .shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 6, 10, .78) 0%, rgba(8, 6, 10, .45) 38%, rgba(8, 6, 10, 0) 68%),
    linear-gradient(180deg, rgba(8, 6, 10, .4) 0%, rgba(8, 6, 10, 0) 30%),
    linear-gradient(0deg, rgba(8, 6, 10, .78) 0%, rgba(8, 6, 10, .4) 12%, rgba(8, 6, 10, 0) 24%);
}
.hero-inner { padding-top: clamp(3rem, 9vh, 6.5rem); max-width: 100%; }
.hero-inner > * { max-width: 44rem; }
.hero h1 {
  font: 300 clamp(2.7rem, 6.4vw, 5.6rem)/.98 var(--serif);
  letter-spacing: -.012em; margin-bottom: 1.6rem;
}
.hero-sub { color: #d6cfc3; font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 31rem; margin-bottom: 2.2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-foot {
  margin-top: auto; padding: 2rem 0 2.2rem;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem;
}
.hero-stats {
  display: grid; grid-template-columns: repeat(4, auto); gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
  border-top: 1px solid rgba(239, 233, 223, .22); padding-top: 1.2rem;
}
.hero-stats div { display: flex; flex-direction: column-reverse; }
.hero-stats dt { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: #cfc7ba; }
.hero-stats dd { font: 300 clamp(1.8rem, 3vw, 2.5rem)/1 var(--sans); color: var(--gold2); margin-bottom: .3rem; }
.hero-stats small { font-size: .5em; color: #cfc7ba; margin-left: .15em; }
.season { display: flex; align-items: center; gap: .7rem; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: #ece3d3; }
.season .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold2); box-shadow: 0 0 0 4px rgba(230, 201, 148, .22); }

/* ---------- Strip ---------- */
.strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem;
  padding: 1.5rem 1.25rem; background: var(--bg); border-bottom: 1px solid var(--line);
  font: italic 300 clamp(1.1rem, 2vw, 1.5rem)/1.2 var(--serif); color: var(--muted);
}
.strip i { width: 6px; height: 6px; rotate: 45deg; background: var(--gold); align-self: center; }

/* ---------- Mosaic ---------- */
.mosaic {
  --u: 26px; --gap: 10px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--u); gap: var(--gap); grid-auto-flow: dense;
}
.tile {
  position: relative; overflow: hidden; isolation: isolate; background: #000;
  grid-row: span var(--s); min-height: 0;
}
.t1 { --s: 8; } .t2 { --s: 5; } .t3 { --s: 7; } .t4 { --s: 5; } .t5 { --s: 8; }
.t6 { --s: 5; } .t7 { --s: 5; } .t8 { --s: 8; } .t9 { --s: 5; }

.tile::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .25) 30%, rgba(0, 0, 0, 0) 55%);
}
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: var(--grain); opacity: .22; mix-blend-mode: overlay;
}
.scene { position: absolute; inset: 0; overflow: hidden; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.scene i { position: absolute; display: block; }
.tile:hover .scene { transform: scale(1.06); }

.tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: .8rem .8rem .9rem; display: flex; flex-direction: column; gap: .2rem;
}
.tile figcaption strong { font: 400 1.05rem/1.1 var(--serif); letter-spacing: .01em; transition: color .3s; }
.tile figcaption span { font: 400 .6rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(239, 233, 223, .85); }
.tile:hover figcaption strong { color: var(--gold2); }
.chip {
  position: absolute; top: .6rem; left: .6rem; z-index: 3;
  font: 400 .54rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  padding: .38rem .5rem; border: 1px solid rgba(239, 233, 223, .5); background: rgba(11, 10, 9, .4);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.idx { display: none; position: absolute; top: .95rem; right: .95rem; z-index: 3; font: 300 .66rem/1 var(--sans); letter-spacing: .2em; color: rgba(239, 233, 223, .85); }

/* scene: palace arch + couple */
.s-arch { background: linear-gradient(180deg, #140a0e 0%, #3a191b 36%, #9c4526 74%, #d68a4a 100%); }
.s-arch .arch {
  left: 50%; bottom: 0; width: 64%; height: 76%; transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  background: radial-gradient(ellipse at 50% 85%, #fff1cc 0%, #f8c377 28%, #d47c36 60%, #7c3319 100%);
  box-shadow: 0 0 0 7px rgba(20, 8, 8, .6), 0 0 0 8px rgba(226, 196, 143, .4), 0 0 90px 18px rgba(255, 160, 70, .35);
}
.s-arch .couple {
  position: absolute; left: 50%; bottom: 5%; width: 38%; transform: translateX(-50%);
  fill: #0b0505; filter: drop-shadow(0 0 5px rgba(255, 205, 130, .45));
}
.s-arch .floor { left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(0deg, #0f0605, transparent); }

/* scene: sangeet bokeh */
.s-bokeh {
  background:
    radial-gradient(circle at 14% 20%, rgba(255, 208, 140, .4) 0 14px, rgba(255, 208, 140, .78) 15px 16px, transparent 17px),
    radial-gradient(circle at 34% 12%, rgba(255, 182, 120, .38) 0 8px, rgba(255, 182, 120, .7) 9px 10px, transparent 11px),
    radial-gradient(circle at 58% 24%, rgba(255, 220, 160, .42) 0 20px, rgba(255, 220, 160, .8) 21px 22px, transparent 23px),
    radial-gradient(circle at 80% 14%, rgba(255, 170, 120, .4) 0 12px, rgba(255, 170, 120, .75) 13px 14px, transparent 15px),
    radial-gradient(circle at 90% 40%, rgba(255, 210, 150, .38) 0 16px, rgba(255, 210, 150, .72) 17px 18px, transparent 19px),
    radial-gradient(circle at 8% 52%, rgba(255, 200, 140, .36) 0 11px, rgba(255, 200, 140, .7) 12px 13px, transparent 14px),
    radial-gradient(circle at 24% 36%, rgba(255, 150, 170, .34) 0 22px, rgba(255, 150, 170, .7) 23px 24px, transparent 25px),
    radial-gradient(circle at 70% 46%, rgba(255, 225, 170, .4) 0 9px, rgba(255, 225, 170, .72) 10px 11px, transparent 12px),
    radial-gradient(circle at 44% 6%, rgba(255, 230, 180, .4) 0 7px, rgba(255, 230, 180, .75) 8px 9px, transparent 10px),
    radial-gradient(circle at 18% 78%, rgba(255, 190, 130, .3) 0 12px, rgba(255, 190, 130, .6) 13px 14px, transparent 15px),
    radial-gradient(circle at 88% 74%, rgba(255, 160, 150, .3) 0 15px, rgba(255, 160, 150, .6) 16px 17px, transparent 18px),
    radial-gradient(ellipse at 50% 105%, rgba(255, 120, 150, .5), transparent 62%),
    linear-gradient(165deg, #15081f, #38113a 52%, #6a2139);
}
.s-bokeh .fig {
  left: 44%; bottom: -8%; width: 30%; height: 58%;
  border-radius: 46% 46% 8% 8% / 30% 30% 0 0;
  background: linear-gradient(180deg, #0b0412, #1a0a22); filter: blur(2px);
}
.s-bokeh .fig::before {
  content: ""; position: absolute; left: 50%; top: -30%; width: 46%; aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%; background: #0b0412;
}

/* scene: Aravalli ridges */
.s-ridge { background: linear-gradient(180deg, #524c86 0%, #b9809a 34%, #f4bf98 62%, #fbdcb4 100%); }
.s-ridge .glow {
  left: 50%; top: 38%; width: 80%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 244, 214, .95) 0, rgba(255, 214, 160, .5) 30%, transparent 62%);
}
.s-ridge .r { left: 0; right: 0; bottom: 0; }
.s-ridge .r1 { height: 60%; background: linear-gradient(180deg, #8d6f94, #5f4c78); clip-path: polygon(0 36%, 12% 18%, 26% 34%, 40% 8%, 58% 30%, 72% 14%, 88% 28%, 100% 16%, 100% 100%, 0 100%); }
.s-ridge .r2 { height: 44%; background: linear-gradient(180deg, #4d3e66, #2d2342); clip-path: polygon(0 42%, 16% 18%, 30% 38%, 46% 12%, 62% 40%, 80% 20%, 100% 36%, 100% 100%, 0 100%); }
.s-ridge .mist { left: 0; right: 0; bottom: 22%; height: 26%; background: linear-gradient(180deg, transparent, rgba(255, 232, 214, .32), transparent); filter: blur(5px); }
.s-ridge .r3 { height: 26%; background: linear-gradient(180deg, #261c35, #0e0a15); clip-path: polygon(0 48%, 18% 24%, 36% 46%, 55% 16%, 75% 44%, 100% 26%, 100% 100%, 0 100%); }

/* scene: Pichola dusk */
.s-lake { background: linear-gradient(180deg, #171f45 0%, #65497b 34%, #e18d6c 54%, #f6c68c 60%, #3a2b4b 60.2%, #161022 100%); }
.s-lake .sunc {
  left: 64%; top: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #fff6da 0 24%, rgba(255, 220, 160, .75) 38%, transparent 70%);
}
.s-lake .ridge {
  left: 0; right: 0; top: 42%; height: 18.2%; background: #150f1d;
  clip-path: polygon(0 70%, 6% 66%, 14% 72%, 22% 56%, 28% 50%, 32% 56%, 34% 38%, 36% 56%, 44% 60%, 52% 48%, 56% 42%, 60% 48%, 68% 62%, 76% 54%, 84% 64%, 92% 58%, 100% 68%, 100% 100%, 0 100%);
}
.s-lake .refl { left: 64%; top: 60%; width: 14%; height: 40%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(255, 210, 140, .75), transparent); filter: blur(5px); }
.s-lake .boat { left: 26%; top: 64%; width: 22%; height: 3.2%; background: #0a070d; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); }

/* scene: window-light portrait */
.s-portrait { background: radial-gradient(ellipse at 74% 22%, #b48a63 0%, #6a4a35 30%, #271a13 62%, #0a0706 100%); }
.s-portrait .shoulders {
  left: 50%; top: 62%; width: 88%; height: 62%; transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 46% 46% 0 0;
  background: radial-gradient(ellipse at 76% 6%, #5a3b29, #1a100b 62%, #0c0706);
  box-shadow: inset 12px 8px 26px rgba(255, 196, 140, .26);
}
.s-portrait .head {
  left: 50%; top: 28%; width: 30%; aspect-ratio: .8; transform: translateX(-50%);
  border-radius: 50% 50% 48% 48%;
  background: radial-gradient(circle at 72% 32%, #9a6c4b, #3a261b 62%, #1a100b);
  box-shadow: 7px 0 18px rgba(255, 196, 140, .32);
}
.s-portrait .head::after {
  content: ""; position: absolute; left: 28%; top: 86%; width: 44%; height: 36%;
  background: linear-gradient(180deg, #3a261b, #1a100b);
}
.s-portrait .shoulders { z-index: 0; }
.s-portrait .hair {
  z-index: 1; left: 50%; top: 22%; width: 40%; height: 46%; transform: translateX(-50%);
  border-radius: 50% 50% 34% 34% / 42% 42% 22% 22%;
  background: linear-gradient(160deg, #2c1b12, #070403);
  box-shadow: 6px -2px 20px rgba(255, 196, 140, .22);
}
.s-portrait .head { z-index: 2; }
.s-portrait .head::before {
  content: ""; position: absolute; left: -3%; right: -3%; top: -7%; height: 36%;
  border-radius: 55% 55% 40% 40% / 90% 90% 35% 35%; background: linear-gradient(160deg, #2c1b12, #070403);
}

/* scene: gala stage */
.s-stage {
  background: radial-gradient(ellipse at 50% 108%, rgba(128, 104, 255, .55), transparent 58%), linear-gradient(180deg, #04061a, #0b0f33 62%, #191245);
}
.s-stage .beams {
  inset: -4% 0 0 0; filter: blur(3px);
  background: conic-gradient(from 142deg at 50% -4%, transparent 0 3deg, rgba(150, 185, 255, .34) 4deg 7deg, transparent 8deg 15deg, rgba(255, 140, 215, .3) 16deg 19deg, transparent 20deg 26deg, rgba(160, 190, 255, .32) 27deg 30deg, transparent 31deg 37deg, rgba(255, 200, 130, .3) 38deg 41deg, transparent 42deg 50deg, rgba(255, 140, 215, .28) 51deg 54deg, transparent 55deg 62deg, rgba(150, 185, 255, .32) 63deg 66deg, transparent 67deg 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 95%); mask-image: linear-gradient(180deg, #000 40%, transparent 95%);
}
.s-stage .heads {
  left: 0; right: 0; bottom: 0; height: 36%;
  background:
    radial-gradient(circle at 6% 24%, #04030a 0 11px, transparent 12px),
    radial-gradient(circle at 17% 14%, #04030a 0 12px, transparent 13px),
    radial-gradient(circle at 29% 26%, #04030a 0 11px, transparent 12px),
    radial-gradient(circle at 41% 12%, #04030a 0 13px, transparent 14px),
    radial-gradient(circle at 53% 24%, #04030a 0 11px, transparent 12px),
    radial-gradient(circle at 65% 14%, #04030a 0 12px, transparent 13px),
    radial-gradient(circle at 77% 26%, #04030a 0 11px, transparent 12px),
    radial-gradient(circle at 89% 16%, #04030a 0 12px, transparent 13px),
    radial-gradient(ellipse 30px 26px at 6% 62%, #04030a 0 96%, transparent 100%),
    radial-gradient(ellipse 32px 28px at 17% 52%, #04030a 0 96%, transparent 100%),
    radial-gradient(ellipse 30px 26px at 29% 64%, #04030a 0 96%, transparent 100%),
    radial-gradient(ellipse 34px 30px at 41% 50%, #04030a 0 96%, transparent 100%),
    radial-gradient(ellipse 30px 26px at 53% 62%, #04030a 0 96%, transparent 100%),
    radial-gradient(ellipse 32px 28px at 65% 52%, #04030a 0 96%, transparent 100%),
    radial-gradient(ellipse 30px 26px at 77% 64%, #04030a 0 96%, transparent 100%),
    radial-gradient(ellipse 32px 28px at 89% 54%, #04030a 0 96%, transparent 100%),
    linear-gradient(#04030a, #04030a) bottom / 100% 40% no-repeat;
}

/* scene: baraat monochrome */
.s-mono { background: radial-gradient(circle at 50% 36%, #fafaf8 0, #c9c9c6 10%, #7a7a78 30%, #262626 62%, #0a0a0a 100%); filter: grayscale(1) contrast(1.12); }
.s-mono .rays {
  inset: 0;
  background: repeating-conic-gradient(from 0deg at 50% 36%, rgba(255, 255, 255, .16) 0 3deg, transparent 3deg 9deg);
  -webkit-mask-image: radial-gradient(circle at 50% 36%, #000 0, transparent 72%); mask-image: radial-gradient(circle at 50% 36%, #000 0, transparent 72%);
}
.s-mono .crowd {
  left: 0; right: 0; bottom: 0; height: 42%;
  background:
    radial-gradient(circle at 7% 28%, #050505 0 11px, transparent 12px),
    radial-gradient(circle at 19% 20%, #050505 0 13px, transparent 14px),
    radial-gradient(circle at 32% 30%, #050505 0 11px, transparent 12px),
    radial-gradient(circle at 46% 18%, #050505 0 14px, transparent 15px),
    radial-gradient(circle at 60% 28%, #050505 0 11px, transparent 12px),
    radial-gradient(circle at 73% 20%, #050505 0 13px, transparent 14px),
    radial-gradient(circle at 87% 30%, #050505 0 11px, transparent 12px),
    radial-gradient(ellipse 30px 26px at 7% 64%, #050505 0 96%, transparent 100%),
    radial-gradient(ellipse 34px 30px at 19% 58%, #050505 0 96%, transparent 100%),
    radial-gradient(ellipse 30px 26px at 32% 66%, #050505 0 96%, transparent 100%),
    radial-gradient(ellipse 36px 32px at 46% 56%, #050505 0 96%, transparent 100%),
    radial-gradient(ellipse 30px 26px at 60% 64%, #050505 0 96%, transparent 100%),
    radial-gradient(ellipse 34px 30px at 73% 58%, #050505 0 96%, transparent 100%),
    radial-gradient(ellipse 30px 26px at 87% 66%, #050505 0 96%, transparent 100%),
    linear-gradient(#050505, #050505) bottom / 100% 40% no-repeat;
}

/* scene: haldi marigolds */
.s-haldi {
  background:
    radial-gradient(circle at 20% 80%, rgba(255, 236, 160, .6) 0 8px, rgba(255, 220, 120, .2) 9px 22px, transparent 23px),
    radial-gradient(circle at 55% 70%, rgba(255, 240, 180, .55) 0 6px, rgba(255, 220, 120, .2) 7px 17px, transparent 18px),
    radial-gradient(circle at 38% 90%, rgba(255, 200, 100, .5) 0 10px, rgba(255, 190, 90, .18) 11px 26px, transparent 27px),
    linear-gradient(145deg, #ffd54f 0%, #f7a11a 38%, #d4600f 72%, #7a2c0c 100%);
}
.s-haldi .m {
  width: 26%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #ffb800 0 18%, #ff9a00 19% 34%, #ee7600 35% 52%, #ffab1f 53% 66%, #d45a00 67% 82%, rgba(120, 40, 0, 0) 83%);
}
.s-haldi .m1 { left: -6%; top: -6%; width: 36%; }
.s-haldi .m2 { left: 26%; top: 2%; }
.s-haldi .m3 { left: 52%; top: -3%; width: 32%; }
.s-haldi .m4 { left: 78%; top: 5%; width: 28%; }
.s-haldi .m5 { left: 8%; top: 26%; width: 22%; filter: blur(2px); }
.s-haldi .m6 { left: 62%; top: 52%; width: 48%; filter: blur(8px); opacity: .85; }
.s-haldi .leak { inset: 0; background: radial-gradient(circle at 0 0, rgba(255, 255, 255, .5), transparent 45%), radial-gradient(circle at 100% 100%, rgba(100, 20, 0, .55), transparent 55%); }

/* scene: rings */
.s-rings {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 240, 200, .5) 0 5px, rgba(255, 230, 170, .16) 6px 16px, transparent 17px),
    radial-gradient(circle at 80% 22%, rgba(255, 240, 200, .45) 0 7px, rgba(255, 230, 170, .15) 8px 20px, transparent 21px),
    radial-gradient(circle at 70% 82%, rgba(255, 240, 200, .35) 0 6px, rgba(255, 230, 170, .12) 7px 18px, transparent 19px),
    radial-gradient(circle at 50% 46%, #236652 0, #0e3a30 46%, #05171a 100%);
}
.s-rings::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(255, 240, 200, .32), transparent 55%); }
.s-rings .ring {
  top: 38%; width: 44%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 20deg, #fbe6a8, #b9873a, #fff0c2, #9a6d2a, #fbe6a8);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%);
}
.s-rings .r-a { left: 11%; }
.s-rings .r-b { left: 41%; transform: rotate(30deg); top: 33%; }

/* ---------- Services ---------- */
.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.split .sec-head { margin-bottom: 0; }
.split .btn { margin-top: 2rem; }
.sticky { position: sticky; top: 7rem; }
.svc { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 1.5rem; padding: 2.2rem 0; border-top: 1px solid var(--line); transition: padding-left .3s; }
.svc:last-child { border-bottom: 1px solid var(--line); }
.svc:hover { padding-left: .6rem; }
.svc-no { font: italic 300 1.7rem/1.1 var(--serif); color: var(--gold); }
.svc h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.1; margin-bottom: .7rem; transition: color .3s; }
.svc:hover h3 { color: var(--gold2); }
.svc p { color: var(--muted); max-width: 34rem; }
.svc .svc-meta { margin-top: .9rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted2); }
.svc-price { font: 400 .78rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold2); white-space: nowrap; padding-top: .55rem; }

/* ---------- Story ---------- */
.story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.portrait-frame { max-width: 30rem; width: 100%; margin-inline: auto; }
.arch-frame { aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; padding: 12px; border: 1px solid rgba(201, 164, 106, .55); }
.arch-inner {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 999px 999px 0 0;
  background: radial-gradient(ellipse at 66% 24%, #c19366 0, #6e4a33 32%, #26180f 68%, #0e0907 100%);
}
.arch-inner::before {
  content: ""; position: absolute; left: 50%; top: 22%; width: 30%; aspect-ratio: .8; transform: translateX(-50%);
  border-radius: 50% 50% 48% 48%;
  background:
    linear-gradient(170deg, #2c1b12 0 26%, transparent 27%),
    radial-gradient(circle at 70% 30%, #a67852, #3a261b 62%, #1a100b);
  box-shadow: 8px 0 22px rgba(255, 196, 140, .3), -14px 10px 0 -2px #120a07, 14px 10px 0 -2px #120a07;
}
.arch-inner::after {
  content: ""; position: absolute; left: 50%; top: 52%; width: 80%; height: 70%; transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: radial-gradient(ellipse at 74% 6%, #5a3b29, #1a100b 62%, #0c0706);
  box-shadow: inset 12px 8px 26px rgba(255, 196, 140, .24);
}
.mono { position: absolute; left: 0; right: 0; bottom: 9%; z-index: 2; text-align: center; font: italic 300 2.2rem/1 var(--serif); letter-spacing: .12em; color: var(--gold2); }
.portrait-frame figcaption { margin-top: 1.1rem; text-align: center; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted2); }
.story-text p { color: var(--muted); max-width: 36rem; margin-bottom: 1.2rem; }
.pull { font: italic 300 clamp(1.5rem, 2.6vw, 2.2rem)/1.3 var(--serif); color: var(--gold2); border-left: 1px solid var(--gold); padding-left: 1.5rem; margin: 2.2rem 0; max-width: 36rem; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.principles strong { display: block; font: 400 1.35rem/1.2 var(--serif); margin-bottom: .4rem; color: var(--ink); }
.principles span { font-size: .88rem; color: var(--muted); line-height: 1.55; display: block; }

/* ---------- Packages ---------- */
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.pack { position: relative; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); padding: 2.6rem 2rem 2rem; }
.pack.featured { border-color: var(--gold); background: linear-gradient(180deg, #1c160d, #0e0c09); transform: translateY(-14px); padding-bottom: calc(2rem + 14px); }
.pack h3 { font-size: 2rem; line-height: 1.1; }
.pack-for { color: var(--muted); font-size: .92rem; margin: .4rem 0 1.4rem; min-height: 3em; }
.price { font: 300 3rem/1 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.price span { font-size: 1.5rem; vertical-align: top; margin-right: .25rem; color: var(--gold); position: relative; top: .5rem; }
.pack ul { margin: 1.6rem 0 2rem; flex: 1; }
.pack li { padding: .65rem 0 .65rem 1.4rem; border-top: 1px solid var(--line); font-size: .92rem; color: #cfc7ba; position: relative; }
.pack li::before { content: ""; position: absolute; left: 0; top: 1.3rem; width: .7rem; height: 1px; background: var(--gold); }
.badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--gold); color: var(--bg); font: 500 .64rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; padding: .55rem 1rem; white-space: nowrap; }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.steps li { border-top: 1px solid var(--gold); padding-top: 1.4rem; }
.step-no { display: block; font: italic 300 2.6rem/1 var(--serif); color: var(--gold); margin-bottom: 1rem; }
.steps h3 { font-size: 1.6rem; margin-bottom: .5rem; }
.steps p { color: var(--muted); font-size: .95rem; }

/* ---------- Quotes ---------- */
.quotes { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-areas: "big a" "big b"; gap: 1.5rem; }
.quote { display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem; padding: 2.2rem; background: var(--bg); border: 1px solid var(--line); border-top: 1px solid var(--gold); }
.quote.big { grid-area: big; padding: clamp(2rem, 4vw, 3.4rem); }
.quote:nth-child(2) { grid-area: a; }
.quote:nth-child(3) { grid-area: b; }
.quote blockquote { font: italic 300 1.35rem/1.45 var(--serif); color: var(--ink); }
.quote.big blockquote { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.35; }
.quote figcaption strong { display: block; font: 500 .78rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold2); }
.quote figcaption span { font-size: .85rem; color: var(--muted); }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.info { margin: 2rem 0; display: grid; gap: 1.2rem; }
.info div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.info dt { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); padding-top: .25rem; }
.info dd { color: #d6cfc3; }
.info a:hover { color: var(--gold2); }
.map {
  position: relative; margin-top: 2rem; height: 15rem; border: 1px solid var(--line); overflow: hidden;
  display: flex; align-items: flex-end;
  background:
    linear-gradient(115deg, transparent 44%, rgba(201, 164, 106, .22) 44.4% 45.6%, transparent 46%),
    linear-gradient(28deg, transparent 58%, rgba(201, 164, 106, .16) 58.4% 59.4%, transparent 60%),
    radial-gradient(ellipse at 78% 74%, rgba(80, 110, 170, .38), transparent 52%),
    linear-gradient(rgba(239, 233, 223, .06) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(239, 233, 223, .06) 1px, transparent 1px) 0 0 / 34px 34px,
    var(--bg2);
}
.map svg { position: absolute; left: 46%; top: 24%; width: 2.4rem; fill: var(--gold); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
.map span { position: relative; padding: .8rem 1rem; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.form { position: sticky; top: 6.5rem; background: var(--bg2); border: 1px solid var(--line); padding: clamp(1.6rem, 4vw, 2.8rem); display: grid; gap: 1.4rem; }
.form h3 { font-size: 2rem; line-height: 1.1; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field label { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: 300 1rem/1.5 var(--sans); color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid rgba(239, 233, 223, .32); border-radius: 0; padding: .6rem 0; color-scheme: dark;
}
.field textarea { resize: vertical; min-height: 6rem; }
.field select option { background: #1a1713; color: #efe9df; }
.field input::placeholder { color: #8b8378; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--gold2); outline-offset: 4px; border-bottom-color: var(--gold2); }
.form .btn { justify-self: start; }
.form-status { min-height: 1.4em; font-size: .88rem; color: var(--gold2); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 3.5rem 0 2rem; background: #070605; }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.foot-mark { font: 400 clamp(1.7rem, 3vw, 2.3rem)/1 var(--serif); }
.foot-mark em { color: var(--gold2); font-weight: 300; }
.foot-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.8rem; }
.foot-nav a { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.foot-nav a:hover { color: var(--gold2); }
.foot-soc { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted2); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.5rem; font-size: .78rem; color: var(--muted2); }
.sample-note { font-style: italic; }

/* ---------- Responsive ---------- */
@media (min-width: 600px) {
  .mosaic { --u: 44px; --gap: 14px; }
  .tile figcaption { padding: 1.1rem 1.2rem 1.2rem; }
  .tile figcaption strong { font-size: 1.4rem; }
  .tile figcaption span { font-size: .66rem; }
  .chip { top: .9rem; left: .9rem; font-size: .6rem; padding: .4rem .6rem; }
  .idx { display: block; }
}
@media (min-width: 960px) {
  .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); --u: 50px; --gap: 12px; grid-auto-flow: row; }
  .t1 { grid-column: 1; grid-row: 1 / span 8; }
  .t4 { grid-column: 1; grid-row: 9 / span 5; }
  .t7 { grid-column: 1; grid-row: 14 / span 5; }
  .t2 { grid-column: 2; grid-row: 1 / span 5; }
  .t5 { grid-column: 2; grid-row: 6 / span 7; }
  .t8 { grid-column: 2; grid-row: 13 / span 6; }
  .t3 { grid-column: 3; grid-row: 1 / span 6; }
  .t6 { grid-column: 3; grid-row: 7 / span 5; }
  .t9 { grid-column: 3; grid-row: 12 / span 7; }
}
@media (max-width: 1020px) {
  .menu-btn { display: block; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: #0b0a09; border-bottom: 1px solid var(--line); padding: .6rem 1.25rem 1.2rem; z-index: 2;
  }
  .open .nav { display: flex; }
  .nav a { font: 300 1.7rem/1 var(--serif); letter-spacing: .02em; text-transform: none; padding: 1rem 0; border-bottom: 1px solid var(--line); color: var(--ink); }
  .site-header { position: sticky; }
}
@media (max-width: 960px) {
  .split, .story, .contact { grid-template-columns: 1fr; }
  .sticky, .form { position: static; }
  .packs { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; }
  .pack.featured { transform: none; padding-bottom: 2rem; margin-block: 1rem; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: 1fr; grid-template-areas: "big" "a" "b"; }
  .hero-foot { align-items: flex-start; }
}
@media (max-width: 600px) {
  .hide-sm { display: none; }
  .show-sm { display: inline; }
  .bar { gap: .8rem; }
  .brand-name { font-size: 1.4rem; }
  .brand-sub { letter-spacing: .4em; }
  .hero-cta .btn { flex: 1 1 100%; }
  .svc { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .svc-price { grid-column: 2; padding-top: 0; }
  .principles { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form .row { grid-template-columns: 1fr; }
  .info div { grid-template-columns: 1fr; gap: .2rem; }
  .kicker { font-size: .66rem; letter-spacing: .2em; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}
@media (max-width: 1020px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 0; background: #0b0a09; }
  .hero-bg { grid-row: 1 / 2; grid-column: 1 / 2; }
  .hero-inner { grid-row: 1; grid-column: 1; padding-bottom: calc(23vw + 2rem); width: min(1180px, 100% - 2.5rem); }
  .hero-foot { grid-row: 2; grid-column: 1; margin-top: 0; padding: 1.6rem 0 2.2rem; }
  .skyline { width: 100%; height: auto; min-width: 0; right: 0; }
  .hero-bg .shade { background: linear-gradient(180deg, rgba(8, 6, 10, .55) 0%, rgba(8, 6, 10, .2) 45%, rgba(8, 6, 10, 0) 70%); }
}
@media (max-width: 700px) {
  .hero-inner { padding-bottom: calc(50vw + 1.5rem); }
  .skyline { width: 215%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene, .svc, .btn { transition: none; }
}