/* ==========================================================================
   Home page
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6.5rem); overflow: hidden; }
.hero__paisley { position: absolute; width: min(720px, 90vw); left: -12%; top: -8%; color: var(--gold); opacity: .22; pointer-events: none; animation: spin 140s linear infinite; }
.hero__grid { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__copy h1 { margin: 1.4rem 0 1.5rem; }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 2.2rem; }
.hero__stats { display: flex; gap: clamp(1.5rem, 4vw, 3.2rem); margin: 3.2rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.hero__stats dt { font: 500 clamp(2rem, 3.4vw, 2.8rem)/1 var(--serif); color: var(--maroon); }
.hero__stats dd { margin: .45rem 0 0; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.hero-in { opacity: 0; transform: translateY(26px); animation: heroIn 1.1s var(--ease) forwards; animation-delay: calc(var(--i) * .12s + .15s); }
@keyframes heroIn { to { opacity: 1; transform: none; } }

.arch { margin: 0; overflow: hidden; border-radius: var(--arch); background: var(--paper); }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.hero__art { position: relative; min-height: clamp(460px, 62vw, 700px); }
.arch--main { position: absolute; right: 0; top: 0; width: 76%; height: 100%; border-radius: 999px 999px 0 0; animation: archIn 1.6s var(--ease) both .1s; }
.arch--main img { animation: kenburns 22s ease-in-out infinite alternate; }
.arch--small { position: absolute; left: 0; bottom: 8%; width: 38%; aspect-ratio: 3/4.2; border-radius: 999px 999px 0 0; border: 8px solid var(--ivory); box-shadow: 0 30px 60px -30px rgba(34,23,22,.5); animation: archIn 1.6s var(--ease) both .45s; }
@keyframes archIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.badge { position: absolute; left: 12%; top: 4%; width: clamp(110px, 12vw, 150px); aspect-ratio: 1; display: grid; place-items: center; background: var(--maroon); color: var(--gold-2); border-radius: 50%; z-index: 2; animation: fadeUp 1s var(--ease) both 1s; }
.badge svg { position: absolute; inset: 0; animation: spin 26s linear infinite; }
.badge text { font: 500 13.2px var(--sans); letter-spacing: 3.1px; fill: currentColor; }
.badge .deva { font-size: clamp(.95rem, 1.3vw, 1.2rem); line-height: 1.3; white-space: nowrap; padding-top: .15em; }
.hero__tag { position: absolute; right: 4%; bottom: 7%; z-index: 2; display: flex; gap: .8rem; align-items: center; background: rgba(248,243,234,.92); backdrop-filter: blur(8px); padding: .8rem 1.1rem; font-size: .8rem; line-height: 1.35; box-shadow: 0 20px 40px -20px rgba(0,0,0,.4); animation: fadeUp 1s var(--ease) both 1.3s; transition: transform .4s var(--ease); }
.hero__tag:hover { transform: translateY(-4px); }
.hero__tag strong { font: 500 1.02rem var(--serif); }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sindoor); position: relative; flex: none; }
.dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--sindoor); animation: ping 2s infinite; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { min-height: 0; aspect-ratio: 1 / 1.15; order: -1; }
  .hero__stats { margin-top: 2.2rem; }
}

/* ---------- Marquee ---------- */
.marquee { background: var(--maroon); color: var(--gold-2); overflow: hidden; padding: 1.3rem 0; transform: rotate(-1.2deg) scale(1.02); margin-block: 1rem; }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee__track span { font: italic 400 clamp(1.8rem, 3.6vw, 3rem)/1 var(--serif); padding: 0 2.2rem; display: inline-flex; align-items: center; gap: 4.4rem; white-space: nowrap; }
.marquee__track span::after { content: '✦'; font-style: normal; font-size: .5em; color: var(--gold); margin-left: 2.2rem; }

/* ---------- Categories ---------- */
.cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.8rem, 2vw, 1.8rem); }
.cat { display: block; }
.cat__img { aspect-ratio: 3 / 4.3; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--paper); position: relative; }
.cat__img::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(248,243,234,.6); border-radius: 999px 999px 0 0; opacity: 0; transition: opacity .6s var(--ease), inset .6s var(--ease); }
.cat:hover .cat__img::after { opacity: 1; inset: 14px; }
.cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.cat:hover .cat__img img { transform: scale(1.08); }
.cat__label { text-align: center; padding-top: 1.1rem; }
.cat__label h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.cat__label span { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 800px) { .cats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; } }

/* ---------- Rail ---------- */
.rail-section { background: var(--paper); }
.rail__nav { display: flex; gap: .6rem; align-items: center; }
.rail__nav .link-arrow { margin-left: 1rem; }
.rail__btn { width: 50px; height: 50px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; transition: background .3s, color .3s; }
.rail__btn:hover { background: var(--ink); color: var(--ivory); }
.rail__btn svg { width: 20px; }
.rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 23vw, 320px); gap: clamp(1rem, 2vw, 1.6rem); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 1rem; scrollbar-width: none; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track .card { scroll-snap-align: start; }
@media (max-width: 720px) { .rail__track { grid-auto-columns: 68vw; } .rail__btn { display: none; } }

/* ---------- Weaves ---------- */
.weaves { background: var(--maroon); color: var(--ivory); position: relative; overflow: hidden; }
.weaves::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 10%, rgba(216,188,135,.18), transparent 45%), radial-gradient(circle at 5% 95%, rgba(179,32,42,.45), transparent 40%); pointer-events: none; }
.weaves .wrap { position: relative; }
.weaves h2 em { color: var(--gold-2); }
.weaves .lead { color: rgba(248,243,234,.72); }
.weaves__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.weaves__list { display: flex; flex-direction: column; justify-content: center; }
.weave { display: grid; grid-template-columns: 3.2rem 1fr; grid-template-rows: auto auto; text-align: left; padding: 1.5rem 0; border-bottom: 1px solid rgba(248,243,234,.16); color: rgba(248,243,234,.45); transition: color .5s var(--ease), padding .5s var(--ease); position: relative; }
.weave::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--gold-2); transition: width .8s var(--ease); }
.weave.is-active, .weave:hover { color: var(--ivory); }
.weave.is-active { padding-left: .8rem; }
.weave.is-active::after { width: 100%; }
.weave__no { grid-row: span 2; font-size: .75rem; letter-spacing: .15em; color: var(--gold); padding-top: .9rem; }
.weave__name { font: 400 clamp(2rem, 4vw, 3.4rem)/1 var(--serif); }
.weave.is-active .weave__name { font-style: italic; }
.weave__place { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; margin-top: .5rem; color: var(--gold-2); opacity: 0; transform: translateY(-6px); transition: opacity .5s, transform .5s var(--ease); }
.weave.is-active .weave__place { opacity: 1; transform: none; }
.weaves__stage { position: relative; min-height: clamp(420px, 44vw, 600px); }
.weave-panel { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility .8s; }
.weave-panel.is-active { opacity: 1; visibility: visible; }
.weave-panel img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 2.5s var(--ease); }
.weave-panel.is-active img { transform: scale(1); }
.weave-panel figcaption { position: absolute; left: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); background: rgba(34,23,22,.72); backdrop-filter: blur(10px); padding: 1.5rem 1.6rem; transform: translateY(20px); opacity: 0; transition: all .8s var(--ease) .2s; }
.weave-panel.is-active figcaption { transform: none; opacity: 1; }
.weave-panel p { margin: 0 0 1rem; color: rgba(248,243,234,.88); }
.weave-panel .link-arrow { color: var(--gold-2); }
@media (max-width: 900px) { .weaves__grid { grid-template-columns: 1fr; } .weaves__stage { min-height: 460px; } }

/* ---------- Bridal ---------- */
.bridal__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.ticks { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .8rem; }
.ticks li { display: flex; gap: .8rem; align-items: center; }
.ticks li::before { content: '✦'; color: var(--gold); font-size: .8rem; }
.bridal__mosaic { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(8, clamp(44px, 5.4vw, 74px)); gap: clamp(.6rem, 1.2vw, 1rem); }
.bridal__mosaic figure { margin: 0; overflow: hidden; background: var(--paper); }
.bridal__mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.bridal__mosaic figure:hover img { transform: scale(1.06); }
.m1 { grid-column: 1 / 4; grid-row: 1 / 7; border-radius: 999px 999px 0 0; }
.m2 { grid-column: 4 / 7; grid-row: 2 / 5; }
.m3 { grid-column: 4 / 6; grid-row: 5 / 9; }
.m4 { grid-column: 1 / 4; grid-row: 7 / 9; }
.m4 img { object-position: center 30%; }
.bridal__quote { position: absolute; right: 0; bottom: -3.2rem; margin: 0; font-size: clamp(2.6rem, 5vw, 4.4rem); color: var(--maroon-2); transform: rotate(-8deg); text-shadow: 0 0 20px var(--ivory), 0 0 6px var(--ivory); pointer-events: none; }
@media (max-width: 900px) { .bridal__grid { grid-template-columns: 1fr; } .bridal__mosaic { grid-template-rows: repeat(8, 11vw); } }

/* ---------- Story ---------- */
.story { background: var(--paper); }
.story__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.story__art { position: relative; padding: 0 8% 8% 0; }
.story__art .arch { aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; }
.story__art::before { content: ''; position: absolute; inset: 8% 0 0 8%; border: 1px solid var(--gold); border-radius: 999px 999px 0 0; }
.story__stamp { position: absolute; right: 0; bottom: 14%; width: 110px; height: 110px; border-radius: 50%; background: var(--ivory); display: grid; place-content: center; text-align: center; box-shadow: 0 20px 40px -20px rgba(0,0,0,.35); }
.story__stamp strong { font: italic 400 1rem var(--serif); color: var(--ink-3); }
.story__stamp span { font: 500 1.9rem/1 var(--serif); color: var(--maroon); }
.signature { margin-top: 2.2rem; display: grid; }
.signature .script { font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--maroon); line-height: 1.1; }
.signature small { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 900px) { .story__grid { grid-template-columns: 1fr; } }

/* ---------- Promise ---------- */
.promise { border-block: 1px solid var(--line); }
.promise__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.promise__grid > div { padding: 2.6rem 1.5rem; text-align: center; border-left: 1px solid var(--line); }
.promise__grid > div:first-child { border-left: 0; }
.promise svg { width: 40px; height: 40px; fill: none; stroke: var(--gold); stroke-width: 1.3; margin: 0 auto 1rem; }
.promise h4 { font-size: 1.35rem; }
.promise p { margin: .3rem 0 0; font-size: .85rem; color: var(--ink-3); }
@media (max-width: 800px) { .promise__grid { grid-template-columns: repeat(2, 1fr); } .promise__grid > div:nth-child(3) { border-left: 0; } .promise__grid > div { border-top: 1px solid var(--line); } }

/* ---------- Quotes ---------- */
.quotes__stage { display: grid; max-width: 980px; margin: 2rem auto 0; text-align: center; }
.quote { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none; }
.quote.is-active { opacity: 1; transform: none; pointer-events: auto; }
.quote p { font: italic 400 clamp(1.6rem, 3.3vw, 2.7rem)/1.3 var(--serif); margin: 0 0 1.6rem; }
.quote footer { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; }
.quote footer span { color: var(--ink-3); }
.quotes__dots { display: flex; gap: .6rem; justify-content: center; margin-top: 2.2rem; }
.quotes__dots button { width: 30px; height: 2px; background: var(--line); transition: background .4s, width .4s var(--ease); }
.quotes__dots button.is-active { background: var(--maroon); width: 56px; }

/* ---------- Insta ---------- */
.insta { padding-bottom: clamp(4rem, 8vw, 6rem); }
.insta__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.insta__grid a { position: relative; aspect-ratio: 1; overflow: hidden; }
.insta__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s; }
.insta__grid a:hover img { transform: scale(1.08); filter: brightness(.8); }
@media (max-width: 800px) { .insta__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Nakshatra lookbook ---------- */
.lookbook { background: var(--ink); color: var(--ivory); position: relative; overflow: hidden; }
.lookbook::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 90% 0%, rgba(216,188,135,.14), transparent 40%), radial-gradient(circle at 0% 100%, rgba(122,26,43,.5), transparent 45%); pointer-events: none; }
.lookbook .wrap { position: relative; }
.lookbook h2 em { color: var(--gold-2); }
.lookbook .lead { color: rgba(248,243,234,.7); }
.lookbook__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.lookbook__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.5rem; counter-reset: look; }
.lookbook__list li { break-inside: avoid; counter-increment: look; }
.lookbook__list button { width: 100%; display: flex; align-items: baseline; gap: .9rem; text-align: left; padding: .62rem 0; border-bottom: 1px solid rgba(248,243,234,.12); color: rgba(248,243,234,.5); font: 400 clamp(1.25rem, 1.9vw, 1.7rem)/1.15 var(--serif); transition: color .4s, padding .4s var(--ease); }
.lookbook__list button::before { content: counter(look, decimal-leading-zero); font: .66rem var(--sans); letter-spacing: .12em; color: var(--gold); min-width: 1.4rem; }
.lookbook__list button:hover, .lookbook__list button.is-on { color: var(--ivory); padding-left: .5rem; }
.lookbook__list button.is-on { font-style: italic; }
.lookbook__stage { position: sticky; top: calc(var(--header-h) + 2rem); }
.lookbook__card { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 0 0; background: #2d201e; }
.lookbook__card img { width: 100%; height: 100%; object-fit: cover; transition: opacity .45s var(--ease), transform 1.2s var(--ease); }
.lookbook__card img.is-swapping { opacity: 0; transform: scale(1.04); }
.lookbook__card::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(to top, rgba(20,12,11,.9), transparent); }
.lookbook__cap { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 1.5rem; z-index: 1; }
.lookbook__name { font: italic 400 clamp(1.8rem, 3vw, 2.5rem)/1 var(--serif); margin: 0 0 .5rem; color: var(--ivory); }
.lookbook__cap p:not(.lookbook__name) { margin: 0 0 .9rem; font-size: .9rem; color: rgba(248,243,234,.8); }
.lookbook__cap .link-arrow { color: var(--gold-2); }
@media (max-width: 900px) {
  .lookbook__grid { grid-template-columns: 1fr; }
  .lookbook__stage { position: relative; top: 0; order: -1; max-width: 420px; margin: 0 auto; width: 100%; }
  .lookbook__list { columns: 1; }
  .lookbook__list li:nth-child(n+9) { display: none; }
  .lookbook__list.is-all li { display: block; }
}
.lookbook__more { display: none; margin-top: 1.2rem; color: var(--gold-2); }
@media (max-width: 900px) { .lookbook__more { display: inline-flex; } }

/* ---------- How to order ---------- */
.steps { background: var(--paper); }
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); counter-reset: step; }
.step { position: relative; background: var(--ivory); padding: clamp(1.8rem, 3vw, 2.6rem); border-top: 2px solid var(--maroon); }
.step__no { font: italic 400 3.2rem/1 var(--serif); color: var(--gold); }
.step h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin: .8rem 0 .6rem; }
.step p { margin: 0; color: var(--ink-2); }
.steps__cta { display: flex; gap: 1.5rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 800px) { .steps__grid { grid-template-columns: 1fr; } }

/* ---------- Story collage ---------- */
.story__collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; background: var(--ivory); }
.story__collage img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.story__stamp span { font-size: 1.35rem; }

/* ---------- Studio ---------- */
.studio { background: var(--ink); color: var(--ivory); padding: clamp(3.5rem, 7vw, 5.5rem) 0; position: relative; overflow: hidden; }
.studio::after { content: 'सोनालिका'; position: absolute; left: 50%; bottom: 50%; transform: translate(-50%, 50%); font: 400 clamp(5rem, 13vw, 11rem)/1.4 var(--deva); color: rgba(216,188,135,.05); white-space: nowrap; pointer-events: none; }
.studio__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center; position: relative; z-index: 1; }
.studio h2 em { color: var(--gold-2); }
.studio .lead { color: rgba(248,243,234,.75); margin-top: 1rem; }
.studio__actions { display: grid; gap: .8rem; }
@media (max-width: 800px) { .studio__grid { grid-template-columns: 1fr; } }