/* ==========================================================================
   Byaah by CircusINC — "शुभ विवाह · The Invitation"

   The site is built as a wedding invitation, not a portfolio. Handmade ivory
   paper, letterpress ink, gold foil. Two scripts carry equal weight: every
   title is set in Devanagari and Latin together, the way a real Indian
   invitation is printed.

   The one structural idea: THE ACCENT COLOUR TRAVELS THE WEDDING WEEK.
   Each section declares a rite — हल्दी, मेहंदी, संगीत, विवाह, आशीर्वाद — and
   the whole page's accent moves with it as you scroll. The palette is the
   ceremony order.

   Geometry comes from kolam: a lattice of dots with loops drawn around them.
   The dots are the grid, the loops are the ornament, and the opening
   animation draws one in front of you.
   ========================================================================== */

/* ---------- 1. The travelling accent ------------------------------------- */
/* Registered so it can interpolate — this is what lets the whole page glide
   from marigold to henna to vermilion instead of snapping between them. */
@property --rite {
  syntax: '<color>';
  inherits: true;
  initial-value: #f0568c;
}
@property --rite-soft {
  syntax: '<color>';
  inherits: true;
  initial-value: #fde4ee;
}

:root{
  /* The theme is the logo's pink. The rites still move the accent as you
     scroll, but they now travel WITHIN the pink family — light rose through
     to deep magenta — so the whole site reads as one brand colour rather
     than changing hue under you. Gold foil is the only companion. */
  --haldi:      #f2789f;
  --haldi-soft: #fdeaf1;
  --mehendi:    #ec5f92;
  --mehendi-soft:#fde4ee;
  --sangeet:    #e0407a;
  --sangeet-soft:#fbdce9;
  --vivah:      #d12d6b;
  --vivah-soft: #f9d4e2;
  --aashirvaad: #f0568c;
  --aashirvaad-soft:#fde4ee;

  /* brand constants, straight off the logo's lotus */
  --lotus:      #f0568c;
  --lotus-deep: #e0407a;
  --lotus-lt:   #f79cc6;   /* the outer, paler petals — blossoms and buds */
  --lotus-soft: #fde4ee;

  /* Handmade paper, tinted with the logo's own lotus rather than left a
     neutral cream — the whole sheet should read as a blush, not a grey. */
  --paper:      #fdf6f4;
  --paper-2:    #fbecea;
  --paper-3:    #f7dedb;
  --paper-4:    #eecbc6;

  /* letterpress ink, warmed the same way */
  --ink:        #2b1f21;
  --ink-2:      #61504f;
  --ink-3:      #907b78;
  --ink-4:      #bda6a1;

  /* gold foil */
  --foil:       #a8862f;
  --foil-lt:    #d4b869;
  --foil-pale:  #ecdcb0;

  --wa:         #25d366;

  --line:       rgba(42,33,26,.14);
  --line-2:     rgba(42,33,26,.07);
  --foil-line:  rgba(168,134,47,.36);
  --line-pink:  rgba(240,86,140,.34);
  --branch:     #7c5b50;

  --shadow:     0 20px 44px -26px rgba(58,42,26,.34);
  --shadow-lg:  0 40px 84px -40px rgba(58,42,26,.44);
  --press:      inset 0 1px 0 rgba(255,255,255,.7);

  /* type */
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --deva:    "Rozha One", "Instrument Serif", Georgia, serif;
  --body:    "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --deva-body: "Mukta", "Jost", system-ui, sans-serif;

  /* metrics */
  --wrap: 1240px;
  --gut:  clamp(20px, 5vw, 64px);
  --pad:  clamp(76px, 10vh, 148px);
  --r:    3px;              /* letterpress cards are barely rounded */

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --spring:   cubic-bezier(.34,1.4,.64,1);

  --rite: var(--lotus);
  --rite-soft: var(--lotus-soft);
  transition: --rite 1.1s var(--ease), --rite-soft 1.1s var(--ease);
}

/* each band declares its rite; the root mirrors the one in view (set in JS) */
[data-rite="haldi"]     { --rite:var(--haldi);      --rite-soft:var(--haldi-soft); }
[data-rite="mehendi"]   { --rite:var(--mehendi);    --rite-soft:var(--mehendi-soft); }
[data-rite="sangeet"]   { --rite:var(--sangeet);    --rite-soft:var(--sangeet-soft); }
[data-rite="vivah"]     { --rite:var(--vivah);      --rite-soft:var(--vivah-soft); }
[data-rite="aashirvaad"]{ --rite:var(--aashirvaad); --rite-soft:var(--aashirvaad-soft); }
[data-rite="lotus"]     { --rite:var(--lotus-deep); --rite-soft:var(--lotus-soft); }

/* ---------- 2. Base ------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--paper); }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--body);
  font-size:16.5px;
  font-weight:350;
  line-height:1.74;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden; }
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{
  font-family:var(--display); font-weight:400; line-height:1.04;
  letter-spacing:-.01em; margin:0; color:var(--ink);
}
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
address{ font-style:normal; }
::selection{ background:var(--rite); color:var(--paper); }
:focus-visible{ outline:2px solid var(--rite); outline-offset:3px; border-radius:2px; }

.container{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--pad); position:relative; }
.section.tight{ padding-block:calc(var(--pad) * .6); }
.text-center{ text-align:center; }
.sand{ background:var(--paper-2); }
.paper{ background:var(--paper-2); }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:9999;
  background:var(--ink); color:var(--paper);
  padding:12px 20px; border-radius:2px; font-weight:500; transition:top .2s;
}
.skip-link:focus{ top:16px; }

/* ---------- 3. Paper, kolam lattice, deckle ------------------------------ */
/* the kolam pulli — the dot grid an artist lays down before drawing. It is
   the page's underlying grid, printed faintly. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(224,64,122,.16) 1px, transparent 1px);
  background-size:34px 34px;
  opacity:.55;
}
/* Paper fibre. This multiplies over everything, so it has to stay faint —
   at .42 it was pulling the whole sheet ~15 RGB points down and turning the
   blush into a flat grey. */
.grain{
  position:fixed; inset:-100%; z-index:9000; pointer-events:none; opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  animation:grainShift 8s steps(5) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
}
main, .nav-wrap, .foot{ position:relative; z-index:1; }

/* torn/deckled edge between bands, cut from a kolam loop */
.deckle{
  display:block; width:100%; height:clamp(18px,2.4vw,30px);
  color:var(--paper-2); position:relative; z-index:1;
}
.deckle svg{ width:100%; height:100%; display:block; }
.deckle path{ fill:currentColor; }
.deckle.up{ color:var(--paper); }

/* petals drifting — now released from the branch above them */
.petals{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* पुष्प वर्षा — the blossom branch the petals fall from */
.branch{
  position:absolute; top:0; z-index:1; pointer-events:none;
  width:clamp(210px,26vw,380px); aspect-ratio:360/260;
  /* anchored at the corner it grows from, so the far end is what sways */
  transform-origin:0% 0%;
  animation:sway 9s ease-in-out infinite alternate;
}
.branch.left{ left:0; }
.branch.right{ right:0; transform:scaleX(-1); transform-origin:100% 0%; animation-name:swayR; animation-delay:-3.5s; }
.branch svg{ width:100%; height:100%; overflow:visible; }
.branch .tw{
  fill:none; stroke:var(--branch); stroke-opacity:.55;
  stroke-width:2.6; stroke-linecap:round;
}
.branch .bud{ fill:var(--lotus-lt); opacity:.85; }
.branch .bl{ transform-box:fill-box; transform-origin:50% 50%; }

@keyframes sway{
  from{ transform:rotate(-.7deg); }
  to  { transform:rotate(.7deg); }
}
@keyframes swayR{
  from{ transform:scaleX(-1) rotate(-.7deg); }
  to  { transform:scaleX(-1) rotate(.7deg); }
}

/* the hero carries the full branch; quieter bands get a smaller, fainter one */
.branch.soft{ width:clamp(160px,18vw,260px); opacity:.5; }
.branch.soft .tw{ stroke-opacity:.26; }
@media (max-width:860px){
  .branch{ width:clamp(150px,42vw,230px); opacity:.75; }
  .branch.right{ display:none; }
}

/* ---------- 4. The opening: a kolam being drawn -------------------------- */
/* A kolam is begun by laying a lattice of dots, then drawing loops around
   them. That is exactly the sequence here: pulli, then loops, then the name.
   The whole thing is driven by CSS animation with a `forwards` fill, so if
   the script never runs the invitation still opens on its own and can never
   trap the page. Script only adds skip-on-input and DOM cleanup. */
.intro{
  position:fixed; inset:0; z-index:9500;
  display:grid; place-items:center; overflow:hidden;
  animation:introGone .01s linear 2.65s forwards;
}
.intro-leaf{
  position:absolute; top:0; bottom:-1px; width:50.6%;
  background:var(--paper); z-index:1;
}
.intro-leaf.l{ left:0; animation:leafL .85s var(--ease-out) 1.85s forwards; }
.intro-leaf.r{ right:0; animation:leafR .85s var(--ease-out) 1.85s forwards; }
@keyframes leafL{ to{ transform:translateX(-100.5%); } }
@keyframes leafR{ to{ transform:translateX(100.5%); } }
@keyframes introGone{ to{ visibility:hidden; } }

/* the art lifts away as the leaves part, rather than just cutting out */
.intro-art{
  position:relative; z-index:3; width:min(66vw,272px); text-align:center;
  animation:introArtOut .7s var(--ease-out) 1.75s forwards;
}
@keyframes introArtOut{ to{ opacity:0; transform:scale(1.09); } }
.intro-art svg{ width:100%; height:auto; overflow:visible; }

/* the pulli — dots first, exactly as a kolam is begun */
.intro .k-dot{ fill:var(--ink-4); opacity:0; animation:kDot .3s var(--ease-out) forwards; }
/* then the loops drawn around them, filling with colour as they close */
.intro .k-line{
  fill:var(--lotus); fill-opacity:0;
  stroke:var(--lotus); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:260; stroke-dashoffset:260;
  animation:kDraw .8s var(--ease) forwards, kBloom .5s var(--ease-out) 1.25s forwards;
}
.intro .k-ring{
  fill:none; stroke:var(--foil); stroke-width:.9;
  stroke-dasharray:560; stroke-dashoffset:560;
  animation:kDraw .9s var(--ease) .35s forwards;
}
.intro .k-core{ fill:var(--foil); opacity:0; animation:kDot .4s var(--ease-out) 1.15s forwards; }
@keyframes kDot{ to{ opacity:1; } }
@keyframes kDraw{ to{ stroke-dashoffset:0; } }
@keyframes kBloom{ to{ fill-opacity:.14; } }

.intro-word{
  margin-top:20px; font-family:var(--deva); font-size:clamp(38px,8vw,56px);
  color:var(--ink); line-height:1; opacity:0;
  animation:introWord .6s var(--ease-out) 1.2s forwards;
}
.intro-sub{
  margin-top:9px; font-size:9.6px; letter-spacing:.44em; text-transform:uppercase;
  color:var(--ink-3); opacity:0;
  animation:introWord .6s var(--ease-out) 1.36s forwards;
}
@keyframes introWord{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.intro-skip{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:4;
  font-size:9.6px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-4);
  opacity:0; animation:introWord .5s var(--ease-out) .9s forwards;
}
.intro-skip:hover{ color:var(--ink); }

/* skipped: collapse everything at once */
.intro.skip{ animation:introGone .01s linear forwards; }
.intro.skip .intro-leaf,.intro.skip .intro-art,.intro.skip .intro-skip{ animation:none; opacity:0; }

/* ---------- 5. Bilingual type — the core device -------------------------- */
/* Devanagari and Latin set as one lockup. Not a translation bolted on; the
   two scripts share the line, the way an invitation prints them. */
.rite-mark{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  color:var(--rite);
}
.rite-mark .dev{
  font-family:var(--deva); font-size:clamp(21px,2.5vw,27px);
  line-height:1; letter-spacing:.01em;
}
.rite-mark .rom{
  font-size:10.6px; letter-spacing:.34em; text-transform:uppercase;
  font-weight:500; color:var(--ink-3);
}
.rite-mark::after{
  content:""; height:1px; flex:1; min-width:30px;
  background:linear-gradient(90deg, var(--rite), transparent);
  opacity:.5; align-self:center;
}
.rite-mark.center{ justify-content:center; }
.rite-mark.center::after,.rite-mark.center::before{
  content:""; height:1px; width:44px; flex:none;
  background:linear-gradient(90deg, transparent, var(--rite));
}
.rite-mark.center::after{ background:linear-gradient(90deg, var(--rite), transparent); }

/* a huge ghosted Devanagari word behind the band, pulled from data-deva */
.section[data-deva]{ overflow:hidden; }
.section[data-deva]::before{
  content:attr(data-deva);
  position:absolute; top:50%; right:-.14em; transform:translateY(-50%);
  font-family:var(--deva); font-size:clamp(180px,30vw,420px); line-height:.8;
  color:var(--rite); opacity:.05; pointer-events:none; user-select:none;
  z-index:0; white-space:nowrap;
}
.section[data-deva].left::before{ right:auto; left:-.14em; }
.section > .container{ position:relative; z-index:1; }

/* ---------- 6. Section headings ------------------------------------------ */
.s-head{ max-width:820px; }
.s-head.center{ margin-inline:auto; text-align:center; }
.s-head h2{
  font-size:clamp(40px,6.4vw,78px); margin-top:22px; letter-spacing:-.018em;
}
.s-head h2 .dev{
  display:block; font-family:var(--deva); font-size:.52em;
  color:var(--rite); letter-spacing:0; margin-bottom:.1em; font-weight:400;
}
.s-head p{ margin-top:24px; color:var(--ink-2); font-size:17.2px; max-width:60ch; }
.s-head.center p{ margin-inline:auto; }

/* legacy eyebrow kept for inner pages */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:10.6px; letter-spacing:.34em; text-transform:uppercase;
  font-weight:500; color:var(--rite);
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--rite); opacity:.6; flex:none; }
.eyebrow.center::before{ display:none; }

/* gold foil rule with a kolam dot at its centre */
.foil-rule{
  display:flex; align-items:center; justify-content:center; gap:12px;
  color:var(--foil); margin-block:clamp(28px,4vh,46px);
}
.foil-rule::before,.foil-rule::after{
  content:""; height:1px; flex:1;
  background:linear-gradient(90deg, transparent, var(--foil-line));
}
.foil-rule::after{ background:linear-gradient(90deg, var(--foil-line), transparent); }
.foil-rule i{ width:5px; height:5px; border-radius:50%; background:var(--foil); flex:none; }

/* ---------- 7. Nav ------------------------------------------------------- */
.nav-wrap{
  position:fixed; inset:0 0 auto; z-index:1100;
  transition:transform .45s var(--ease), background .35s, box-shadow .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.nav-wrap.solid{
  background:rgba(250,245,236,.88);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-2);
}
.nav-wrap.hide{ transform:translateY(-104%); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:84px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand img{ height:40px; width:auto; }
.brand b{
  font-family:var(--display); font-size:26px; font-weight:400;
  color:var(--ink); line-height:1;
}
.brand i{
  display:block; font-style:normal; font-size:8.4px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-top:3px;
}
.brand.mark img{ height:48px; }
.brand.mark i{ margin-top:0; padding-bottom:2px; }
@media (max-width:860px){ .brand.mark img{ height:40px; } }

.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{
  font-size:12.4px; letter-spacing:.12em; text-transform:uppercase; font-weight:400;
  color:var(--ink-2); position:relative; padding-block:6px; transition:color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--rite); transition:width .32s var(--ease-out);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }

.nav-toggle{ display:none; width:44px; height:44px; place-items:center; margin-right:-10px; }
.nav-toggle i{
  display:block; width:22px; height:1.4px; background:var(--ink); position:relative;
  transition:background .2s;
}
.nav-toggle i::before,.nav-toggle i::after{
  content:""; position:absolute; left:0; width:22px; height:1.4px; background:var(--ink);
  transition:transform .34s var(--ease-out);
}
.nav-toggle i::before{ top:-7px; }
.nav-toggle i::after{ top:7px; }
.nav-toggle.open i{ background:transparent; }
.nav-toggle.open i::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open i::after{ transform:translateY(-7px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:1050;
  background:var(--paper);
  display:grid; place-items:center; text-align:center;
  clip-path:circle(0% at calc(100% - 44px) 42px);
  transition:clip-path .66s var(--ease-out);
  visibility:hidden;
}
.menu::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(42,33,26,.15) 1px, transparent 1px);
  background-size:34px 34px; opacity:.5;
}
.menu.open{ clip-path:circle(150% at calc(100% - 44px) 42px); visibility:visible; }
.menu ul{ display:grid; gap:6px; position:relative; }
.menu a{
  font-family:var(--display); font-size:clamp(34px,9vw,54px); color:var(--ink);
  line-height:1.2; display:block; opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .25s;
}
.menu a .dev{
  font-family:var(--deva); font-size:.48em; color:var(--rite);
  margin-right:.5em; vertical-align:.06em;
}
.menu.open a{ opacity:1; transform:none; }
.menu.open li:nth-child(1) a{ transition-delay:.12s }
.menu.open li:nth-child(2) a{ transition-delay:.17s }
.menu.open li:nth-child(3) a{ transition-delay:.22s }
.menu.open li:nth-child(4) a{ transition-delay:.27s }
.menu.open li:nth-child(5) a{ transition-delay:.32s }
.menu.open li:nth-child(6) a{ transition-delay:.37s }
.menu a:hover{ color:var(--rite); }
.menu .menu-foot{
  margin-top:40px; color:var(--ink-3); font-size:13.4px; display:grid; gap:6px; position:relative;
}
.menu .menu-foot a{ font-family:var(--body); font-size:15px; color:var(--rite); }

/* ---------- 8. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; border-radius:2px;
  font-size:11.8px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  transition:transform .3s var(--ease-out), box-shadow .3s, background .3s, color .3s, border-color .3s;
}
.btn svg{ width:14px; height:14px; flex:none; transition:transform .3s var(--ease-out); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover svg{ transform:translateX(3px); }

/* the primary action carries the brand colour, not the ink */
.btn-primary{
  background:var(--rite); color:#fff;
  box-shadow:0 16px 34px -18px rgba(240,86,140,.7);
}
.btn-primary:hover{ background:var(--lotus-deep); box-shadow:0 20px 40px -18px rgba(224,64,122,.8); }
.btn-ghost{ border:1px solid var(--line-pink); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--rite); color:var(--rite); background:var(--rite-soft); }
.btn-wa{ background:var(--wa); color:#04361a; }
.btn-wa:hover{ background:#1fbf5b; }
.btn-lg{ padding:19px 30px; font-size:12.2px; letter-spacing:.13em; }
.btn-sm{ padding:11px 20px; font-size:10.8px; }
.btn[disabled]{ opacity:.4; pointer-events:none; }

.tlink{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.8px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  color:var(--ink); padding-bottom:5px; position:relative;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--rite); transform-origin:right; transition:transform .4s var(--ease-out);
}
.tlink:hover::after{ transform:scaleX(0); }
.tlink svg{ width:13px; height:13px; transition:transform .3s var(--ease-out); }
.tlink:hover svg{ transform:translateX(4px); }

/* ---------- 9. Hero ------------------------------------------------------ */
.hero{
  position:relative; overflow:hidden;
  padding-top:clamp(126px,16vh,168px); padding-bottom:clamp(56px,8vh,96px);
}
.hero .container{ position:relative; z-index:2; }
.hero-grid{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,5vw,68px); align-items:center;
}

/* the invitation's opening line, set as a real invitation sets it */
.hero-invite{
  font-family:var(--deva); font-size:clamp(15px,1.6vw,18px);
  color:var(--rite); letter-spacing:.02em; margin-bottom:20px;
}
.hero-copy h1{
  font-size:clamp(48px,7.4vw,96px); line-height:.98; letter-spacing:-.028em;
  color:var(--ink);
}
/* the Devanagari is the headline's equal, not a subtitle */
.hero-copy h1 .dev{
  display:block; font-family:var(--deva); font-size:.56em; line-height:1;
  color:var(--rite); letter-spacing:0; margin-bottom:.12em;
}
.hero-copy .lede{
  margin-top:30px; font-size:clamp(16.5px,1.5vw,18.5px); color:var(--ink-2); max-width:44ch;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

/* the photograph inside a lotus arch, with a foil rule set outside it */
.petal-arch{ clip-path:url(#byaahArch); }
.petal-shape{ clip-path:url(#byaahPetal); }
.hero-art{ position:relative; }
.arch-main{ position:relative; aspect-ratio:3/4; margin:0; }
.arch-main img{ width:100%; height:100%; object-fit:cover; }
.arch-frame{ position:absolute; inset:-14px; pointer-events:none; z-index:2; color:var(--line-pink); }
.arch-frame svg{ width:100%; height:100%; display:block; }
.arch-frame path{ fill:none; stroke:currentColor; stroke-width:1; vector-effect:non-scaling-stroke; }
.arch-glow{ display:none; }
.arch-mini{
  position:absolute; left:-12%; bottom:6%; width:43%; aspect-ratio:4/3; margin:0;
  overflow:hidden; border:6px solid var(--paper); box-shadow:var(--shadow); background:var(--paper-3);
}
.arch-mini img{ width:100%; height:100%; object-fit:cover; }
.hero-seal{ position:absolute; right:-7%; top:4%; }

/* the panchang strip — a wedding almanac, not a stat counter */
.panchang{
  margin-top:clamp(46px,7vh,80px); padding-top:32px;
  border-top:1px solid var(--line-2);
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.panchang div{ display:grid; gap:8px; }
.panchang .dev{
  font-family:var(--deva); font-size:19px; color:var(--rite); line-height:1;
}
.panchang b{
  font-family:var(--display); font-size:clamp(30px,4vw,44px);
  font-weight:400; color:var(--ink); line-height:1;
}
/* only the caption span — not the Devanagari label, and not the counter span
   inside <b>, which would otherwise be shrunk and letter-spaced apart */
.panchang > div > span:not(.dev){
  font-size:10.4px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}

/* ---------- 10. Ceremony marquee ----------------------------------------- */
/* the thing that worked: Devanagari and Latin sharing the line */
.ribbon{
  background:var(--rite); color:#fff;
  padding-block:20px; overflow:hidden; position:relative;
}
.ribbon::before,.ribbon::after{
  content:""; position:absolute; top:0; bottom:0; width:110px; z-index:2; pointer-events:none;
}
.ribbon::before{ left:0; background:linear-gradient(90deg, var(--rite), transparent); }
.ribbon::after{ right:0; background:linear-gradient(270deg, var(--rite), transparent); }
.ribbon-track{ display:flex; width:max-content; animation:marquee 46s linear infinite; }
.ribbon-track span{
  font-family:var(--deva); font-size:clamp(21px,2.6vw,31px);
  padding-inline:28px; white-space:nowrap; display:flex; align-items:center; gap:28px;
}
.ribbon-track span::after{ content:""; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.72); }
.ribbon:hover .ribbon-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- 11. Spotlight copy ------------------------------------------- */
.spot-copy{
  font-family:var(--display); font-size:clamp(28px,4.1vw,50px); line-height:1.22;
  color:var(--ink); max-width:19ch;
}
.spot-copy .w{ opacity:.2; transition:opacity .5s var(--ease); }
.spot-copy .w.on{ opacity:1; }

.promise{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(34px,6vw,84px); align-items:center; }
.promise-notes{ display:grid; gap:0; }
.promise-notes .note{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start;
  padding-block:26px; border-bottom:1px solid var(--line-2);
}
.promise-notes .note:first-child{ border-top:1px solid var(--line-2); }
/* Devanagari numerals, not 01/02/03 */
.promise-notes .note b{
  font-family:var(--deva); font-size:30px; color:var(--rite); font-weight:400;
  line-height:1; padding-top:4px; min-width:26px;
}
.promise-notes .note h3{ font-size:25px; }
.promise-notes .note p{ margin-top:8px; color:var(--ink-2); font-size:15.6px; }

/* ---------- 12. Services -------------------------------------------------- */
.svc-grid{
  margin-top:clamp(44px,6vh,72px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px);
}
.svc{
  position:relative; background:var(--paper); border:1px solid var(--line-2);
  border-radius:var(--r); overflow:hidden;
  transition:transform .45s var(--ease-out), box-shadow .45s, border-color .45s;
}
.svc:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line-pink); }
.svc-img{ aspect-ratio:4/3; overflow:hidden; position:relative; }
.svc-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.svc:hover .svc-img img{ transform:scale(1.06); }
.svc-no{
  position:absolute; top:12px; left:14px; z-index:2;
  font-family:var(--deva); font-size:21px; color:var(--paper);
  text-shadow:0 2px 10px rgba(42,33,26,.6);
}
.svc-body{ padding:26px 26px 30px; }
.svc-body h3{ font-size:27px; }
.svc-body h3 .dev{
  display:block; font-family:var(--deva); font-size:.62em; color:var(--rite); margin-bottom:.12em;
}
.svc-body p{ margin-top:11px; color:var(--ink-2); font-size:15.4px; }
.svc-body ul{ margin-top:18px; display:flex; flex-wrap:wrap; gap:7px; }
.svc-body li{
  font-size:10.8px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); border-radius:999px; padding:5px 12px;
}

/* ---------- 13. Ceremonies filmstrip ------------------------------------- */
.cer-scroll{
  margin-top:clamp(40px,5vh,64px);
  display:grid; grid-auto-flow:column; grid-auto-columns:clamp(252px,26vw,326px);
  gap:20px; overflow-x:auto; padding-bottom:16px;
  scroll-snap-type:x mandatory; scrollbar-width:thin;
  scrollbar-color:var(--foil-line) transparent;
}
.cer-scroll::-webkit-scrollbar{ height:3px; }
.cer-scroll::-webkit-scrollbar-thumb{ background:var(--foil-line); }
.cer{
  scroll-snap-align:start; position:relative; overflow:hidden;
  aspect-ratio:3/4; background:var(--paper-3); margin:0; border-radius:var(--r);
}
.cer img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out); }
.cer:hover img{ transform:scale(1.05); }
.cer::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(42,33,26,0) 34%, rgba(42,33,26,.86) 100%);
}
.cer figcaption{ position:absolute; inset:auto 0 0; z-index:2; padding:24px 22px; color:var(--paper); }
.cer figcaption b{
  display:block; font-family:var(--deva); font-size:34px; font-weight:400; line-height:1;
}
.cer figcaption i{
  display:block; font-style:normal; font-size:10.4px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--foil-pale); margin-top:9px;
}
.cer figcaption p{ margin-top:11px; font-size:13.8px; color:rgba(250,245,236,.76); }

/* ---------- 14. The eight-petal process ---------------------------------- */
.lotus-proc{
  margin-top:clamp(46px,6vh,76px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,80px); align-items:center;
}
.lotus-dial{ position:relative; width:100%; max-width:500px; aspect-ratio:1; margin-inline:auto; }
.lotus-dial svg{ width:100%; height:100%; overflow:visible; }
.lp-petal{
  cursor:pointer; transform-box:fill-box; transform-origin:50% 100%;
  transition:transform .5s var(--spring), fill .4s var(--ease), stroke .4s var(--ease);
  fill:transparent; stroke:var(--line); stroke-width:.9; stroke-linejoin:round;
}
.lp-petal:hover,.lp-petal.on{ fill:var(--rite-soft); stroke:var(--rite); transform:scale(1.06); }
.lp-num{
  font-family:var(--deva); font-size:15px; fill:var(--ink-4);
  text-anchor:middle; pointer-events:none; transition:fill .35s;
}
.lp-num.on{ fill:var(--rite); }
.lp-core{ fill:var(--paper); stroke:var(--foil-line); stroke-width:1; }
.lp-core-glow{ display:none; }
.lp-dot{ fill:var(--ink); opacity:.22; }

.lotus-detail{ min-height:270px; }
.lotus-detail .lp-step{ display:none; }
.lotus-detail .lp-step.on{ display:block; animation:petalIn .5s var(--ease-out); }
@keyframes petalIn{ from{ opacity:0; transform:translateY(14px); } }
.lotus-detail .lp-no{
  font-family:var(--deva); font-size:19px; color:var(--rite);
}
.lotus-detail h3{ font-size:clamp(30px,3.8vw,44px); margin-top:12px; }
.lotus-detail p{ margin-top:16px; color:var(--ink-2); font-size:16.2px; max-width:44ch; }
.lotus-detail .lp-meta{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line-2);
  font-size:10.6px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}

/* vertical step list — inner pages */
.proc{ display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(32px,6vw,86px); align-items:start; }
.proc-sticky{ position:sticky; top:124px; }
.proc-steps{ display:grid; gap:0; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start;
  padding-block:30px; border-bottom:1px solid var(--line-2);
  transition:padding-left .4s var(--ease-out);
}
.step:first-child{ border-top:1px solid var(--line-2); }
.step:hover{ padding-left:10px; }
.step-no{
  font-family:var(--deva); font-size:30px; color:var(--rite); line-height:1; padding-top:4px;
  min-width:30px;
}
.step h3{ font-size:27px; }
.step p{ margin-top:10px; color:var(--ink-2); font-size:15.6px; }
.step .step-meta{
  margin-top:14px; font-size:10.6px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}

/* ---------- 15. Gallery -------------------------------------------------- */
/* A 12-column editorial grid on a fixed row unit. Items span both columns and
   rows, so every row closes at exactly 12 and the tops and bottoms line up —
   the previous spans summed to 10 and left ragged gaps. */
.gal{
  margin-top:clamp(40px,6vh,66px);
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(92px,9vw,128px);
  gap:clamp(12px,1.6vw,20px);
}
.gal button{
  position:relative; overflow:hidden; border-radius:var(--r); background:var(--paper-3);
  display:block; width:100%; height:100%; padding:0;
}
.gal button img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out); }
.gal button:hover img{ transform:scale(1.05); }
.gal button::after{
  content:""; position:absolute; inset:0; background:rgba(42,33,26,0); transition:background .4s;
}
.gal button:hover::after{ background:rgba(42,33,26,.12); }
.gal .g-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px 18px;
  color:var(--paper); text-align:left;
  background:linear-gradient(0deg, rgba(42,33,26,.86), transparent);
  opacity:0; transform:translateY(10px); transition:opacity .4s, transform .4s var(--ease-out);
}
.gal button:hover .g-cap{ opacity:1; transform:none; }
.gal .g-cap b{ display:block; font-family:var(--display); font-size:21px; font-weight:400; }
.gal .g-cap span{ font-size:10.4px; letter-spacing:.2em; text-transform:uppercase; color:var(--foil-pale); }
/* each row block closes at 12 columns: 4+8 · 6+6 · 4+4+4 · 12 */
.gal .tall { grid-column:span 4; grid-row:span 4; }
.gal .wide { grid-column:span 8; grid-row:span 4; }
.gal .half { grid-column:span 6; grid-row:span 3; }
.gal .third{ grid-column:span 4; grid-row:span 3; }
.gal .full { grid-column:span 12; grid-row:span 3; }
.gal .arch{ clip-path:url(#byaahArch); border-radius:0 !important; }

/* ---------- 16. Stats ---------------------------------------------------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden;
  background:var(--paper);
}
.stat{ padding:42px 26px; text-align:center; border-right:1px solid var(--line-2); }
.stat:last-child{ border-right:0; }
.stat b{
  display:block; font-family:var(--display); font-size:clamp(42px,5.6vw,66px);
  font-weight:400; color:var(--rite); line-height:1;
}
.stat span{
  display:block; margin-top:14px; font-size:10.6px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink);
}
.stat p{ margin-top:8px; font-size:13.6px; color:var(--ink-3); }

/* ---------- 17. Destinations --------------------------------------------- */
.dest-grid{
  margin-top:clamp(40px,6vh,66px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,30px);
}
.dest{
  position:relative; overflow:hidden; aspect-ratio:4/5;
  background:var(--paper-3); display:block; clip-path:url(#byaahArch);
  transition:transform .5s var(--ease-out);
}
.dest:hover{ transform:translateY(-6px); }
.dest img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.dest:hover img{ transform:scale(1.06); }
.dest::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(42,33,26,.04) 36%, rgba(42,33,26,.88) 100%);
}
.dest-body{ position:absolute; inset:auto 0 0; z-index:2; padding:26px 24px; color:var(--paper); }
.dest-body b{ font-family:var(--display); font-size:30px; font-weight:400; display:block; }
.dest-body i{
  font-style:normal; font-size:10.2px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--foil-pale); display:block; margin-top:7px;
}
.dest-body p{
  margin-top:12px; font-size:14px; color:rgba(250,245,236,.78);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s var(--ease-out), opacity .4s;
}
.dest:hover .dest-body p{ max-height:140px; opacity:1; }

/* ---------- 18. Testimonials --------------------------------------------- */
.quotes{
  margin-top:clamp(40px,6vh,66px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,32px);
}
.quote{
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r);
  padding:36px 32px 32px; position:relative;
  transition:transform .45s var(--ease-out), box-shadow .45s, border-color .45s;
}
.quote:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--line-pink); }
.quote blockquote{
  margin:0; font-family:var(--display); font-size:23px; line-height:1.4; color:var(--ink);
}
.quote-by{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line-2); }
.quote-by b{ display:block; font-size:14.6px; font-weight:500; color:var(--ink); }
.quote-by span{ font-size:10.8px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.stars{ display:flex; gap:3px; margin-bottom:18px; color:var(--rite); }
.stars svg{ width:14px; height:14px; }

/* ---------- 19. Enquiry: the guided flow --------------------------------- */
.enquire{ background:var(--paper-2); position:relative; overflow:hidden; }
.enq-grid{
  margin-top:clamp(40px,6vh,64px);
  display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(32px,5vw,72px); align-items:start;
}
.enq-info{ display:grid; gap:0; }
.enq-info .row{ display:grid; gap:6px; padding-block:22px; border-bottom:1px solid var(--line-2); }
.enq-info .row:first-child{ border-top:1px solid var(--line-2); }
.enq-info .row i{
  font-style:normal; font-size:10.2px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--rite);
}
.enq-info .row a,.enq-info .row p{
  font-family:var(--display); font-size:22px; color:var(--ink); line-height:1.35;
}
.enq-info .row a:hover{ color:var(--rite); }
.enq-info .row.small p{ font-family:var(--body); font-size:15.2px; color:var(--ink-2); line-height:1.65; }

/* the form is a card of pressed paper */
.form{
  background:var(--paper); border:1px solid var(--line-2);
  border-radius:var(--r); padding:clamp(26px,3.4vw,42px);
  box-shadow:var(--shadow-lg), var(--press); position:relative;
}
.form::before{
  content:""; position:absolute; inset:8px; border:1px solid var(--foil-line);
  pointer-events:none; opacity:.5;
}
.form > *{ position:relative; }

.flow-head{
  display:flex; align-items:center; gap:16px;
  padding-bottom:22px; margin-bottom:26px; border-bottom:1px solid var(--line-2);
}
.flow-meter{ width:46px; height:46px; flex:none; }
.flow-meter svg{ width:100%; height:100%; overflow:visible; }
.flow-meter .fm-petal{
  fill:none; stroke:var(--line); stroke-width:1.2; stroke-linejoin:round;
  transform-box:fill-box; transform-origin:50% 100%; transform:scale(.55);
  transition:transform .5s var(--spring), stroke .4s, fill .4s;
}
.flow-meter .fm-petal.on{ stroke:var(--rite); fill:var(--rite-soft); transform:scale(1); }
.flow-meter .fm-core{ fill:var(--ink-4); transition:fill .4s; }
.flow-meter.done .fm-core{ fill:var(--foil); }
.flow-label b{
  display:block; font-family:var(--deva); font-size:21px; color:var(--ink);
  font-weight:400; line-height:1.2;
}
.flow-label span{
  display:block; font-size:10.2px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); margin-top:5px;
}

.js .fstep{ display:none; }
.js .fstep.on{ display:block; animation:stepIn .45s var(--ease-out); }
.fstep{ border:0; padding:0; margin:0; min-inline-size:0; }
@keyframes stepIn{ from{ opacity:0; transform:translateY(16px); } }
.fstep legend{
  padding:0; font-family:var(--display); font-size:clamp(26px,3.2vw,36px);
  color:var(--ink); line-height:1.16; margin-bottom:8px;
}
.fstep legend .dev{
  display:block; font-family:var(--deva); font-size:.56em; color:var(--rite); margin-bottom:.1em;
}
.fstep .fhint{ font-size:14.4px; color:var(--ink-3); margin-bottom:22px; }

.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  border:1px solid var(--line); border-radius:999px; padding:12px 20px;
  font-size:14.2px; color:var(--ink-2); background:var(--paper);
  transition:border-color .3s, background .3s, color .3s, transform .3s var(--ease-out);
}
.chip:hover{ border-color:var(--rite); color:var(--ink); transform:translateY(-2px); }
.chip[aria-pressed="true"]{ background:var(--rite); border-color:var(--rite); color:var(--paper); }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:grid; gap:8px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:10.2px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
.field input,.field select,.field textarea{
  font:inherit; font-size:15.4px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:2px; padding:14px 16px; width:100%;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.field textarea{ resize:vertical; min-height:104px; }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-4); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--rite); background:var(--paper);
  box-shadow:0 0 0 3px var(--rite-soft);
}
.field input:user-invalid{ border-color:#c0392b; }
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235f5346' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:38px;
}
.field input[type="date"]::-webkit-calendar-picker-indicator{ cursor:pointer; }

.flow-nav{
  margin-top:28px; padding-top:22px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}
.flow-nav .spacer{ flex:1; }
.flow-back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.8px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); transition:color .3s;
}
.flow-back:hover{ color:var(--ink); }
.flow-back svg{ width:13px; height:13px; }

.flow-review-head{
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line-2);
  font-size:10.2px; letter-spacing:.24em; text-transform:uppercase; color:var(--rite);
}
.flow-review{ display:grid; gap:11px; margin-top:16px; }
.fstep:has(.flow-review:empty) .flow-review-head{ display:none; }
.flow-review .rrow{
  display:grid; grid-template-columns:130px 1fr; gap:14px; align-items:baseline;
  font-size:15px; padding-bottom:10px; border-bottom:1px solid var(--line-2);
}
.flow-review .rrow i{
  font-style:normal; font-size:10.2px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.flow-review .rrow b{ font-weight:400; color:var(--ink); }

.form-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.form-note{ margin-top:16px; font-size:13.4px; color:var(--ink-2); min-height:20px; line-height:1.55; }
.form-note.err{ color:#c0392b; }
.form-fallback{
  margin-bottom:26px; padding:16px 18px; border-radius:2px;
  background:var(--rite-soft); border:1px solid var(--line);
  font-size:14.4px; color:var(--ink); line-height:1.6;
}
.form-fallback a{ color:var(--rite); text-decoration:underline; }

html:not(.js) .flow-head,
html:not(.js) .flow-nav .flow-back,
html:not(.js) .flow-next{ display:none; }
html:not(.js) .fstep{ margin-bottom:32px; }

/* ---------- 20. CTA band -------------------------------------------------- */
.cta-band{
  position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(80px,11vh,148px);
}
.cta-band img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cta-band::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(42,33,26,.66), rgba(42,33,26,.86));
}
.cta-band .petals{ z-index:2; }
.cta-band .container{ position:relative; z-index:3; }
.cta-band h2{ font-size:clamp(40px,6.6vw,84px); color:var(--paper); }
.cta-band h2 .dev{
  display:block; font-family:var(--deva); font-size:.5em; color:var(--foil-lt); margin-bottom:.1em;
}
.cta-band p{ margin:24px auto 0; max-width:54ch; color:rgba(250,245,236,.8); font-size:17px; }
.cta-band .btns{ margin-top:38px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.cta-band .btn-primary{ background:var(--paper); color:var(--ink); }
.cta-band .btn-primary:hover{ background:var(--foil-lt); }
.cta-band .btn-ghost{ border-color:rgba(250,245,236,.42); color:var(--paper); }
.cta-band .btn-ghost:hover{ border-color:var(--paper); color:var(--paper); background:rgba(250,245,236,.1); }

/* ---------- 21. Footer --------------------------------------------------- */
.foot{ background:var(--ink); color:rgba(250,245,236,.62); padding-block:clamp(58px,7vh,90px) 0; }
.foot-top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,52px);
  padding-bottom:52px; border-bottom:1px solid rgba(250,245,236,.13);
}
.foot .brand b{ color:var(--paper); }
.foot .brand i{ color:var(--foil-lt); }
.foot-blurb{ margin-top:20px; font-size:15px; max-width:34ch; line-height:1.65; }
.foot h4{
  font-family:var(--deva); font-size:19px; letter-spacing:0; text-transform:none;
  color:var(--lotus); font-weight:400; margin-bottom:18px;
}
.foot ul{ display:grid; gap:11px; }
.foot ul a,.foot address a{ font-size:15px; transition:color .25s; }
.foot ul a:hover,.foot address a:hover{ color:var(--lotus); }
.foot address{ font-size:15px; line-height:1.7; display:grid; gap:12px; }
.socials{ display:flex; gap:10px; margin-top:22px; }
.socials a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(250,245,236,.22); color:rgba(250,245,236,.68);
  transition:background .3s, color .3s, border-color .3s, transform .3s var(--ease-out);
}
.socials a:hover{ background:var(--lotus); color:#fff; border-color:var(--lotus); transform:translateY(-3px); }
.socials svg{ width:16px; height:16px; }
.foot-bot{
  padding-block:26px; display:flex; flex-wrap:wrap; gap:14px 26px;
  justify-content:space-between; align-items:center; font-size:13px;
  color:rgba(250,245,236,.45);
}
.foot-bot nav{ display:flex; flex-wrap:wrap; gap:22px; }
.foot-bot a:hover{ color:var(--lotus); }

.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:1000;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--wa); color:#04361a; box-shadow:0 14px 30px -12px rgba(37,211,102,.7);
  transition:transform .3s var(--ease-out);
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:27px; height:27px; }
.back-top{
  position:fixed; right:20px; bottom:86px; z-index:1000;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); color:var(--rite); border:1px solid var(--line-pink);
  box-shadow:var(--shadow); opacity:0; pointer-events:none;
  transition:opacity .35s, transform .35s var(--ease-out);
  transform:translateY(10px);
}
.back-top.on{ opacity:1; pointer-events:auto; transform:none; }
.back-top svg{ width:16px; height:16px; }

/* ---------- 22. Scroll meter: a kolam that completes --------------------- */
.scroll-lotus{
  position:fixed; left:clamp(14px,2.2vw,26px); bottom:clamp(14px,2.2vw,26px);
  z-index:1200; width:52px; height:52px; pointer-events:none;
  opacity:0; transform:translateY(10px); transition:opacity .5s, transform .5s var(--ease-out);
}
.scroll-lotus.on{ opacity:1; transform:none; }
.scroll-lotus svg{ width:100%; height:100%; overflow:visible; }
.scroll-lotus .sl-petal{
  fill:none; stroke:var(--line); stroke-width:1.1; stroke-linejoin:round;
  transform-box:fill-box; transform-origin:50% 100%; transform:scale(.6);
  transition:stroke .45s var(--ease), fill .45s var(--ease), transform .55s var(--spring);
}
.scroll-lotus .sl-petal.on{ stroke:var(--rite); fill:var(--rite-soft); transform:scale(1); }
.scroll-lotus .sl-core{ fill:var(--ink-4); transition:fill .4s; }
.scroll-lotus.full .sl-core{ fill:var(--foil); }
.scroll-lotus .sl-pct{
  font-family:var(--body); font-size:8.2px; letter-spacing:.14em; font-weight:500;
  fill:var(--ink-3); text-anchor:middle;
}
@media (max-width:640px){ .scroll-lotus{ display:none; } }

/* ---------- 23. Cursor --------------------------------------------------- */
.cursor-ring,.cursor-dot{
  position:fixed; top:0; left:0; z-index:1300; pointer-events:none;
  border-radius:50%; opacity:0; transition:opacity .3s;
}
.cursor-dot{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:var(--rite); }
.cursor-ring{
  width:32px; height:32px; margin:-16px 0 0 -16px; border:1px solid var(--rite);
  display:grid; place-items:center; opacity:0;
  transition:opacity .3s, width .35s var(--ease-out), height .35s var(--ease-out), background .35s;
}
.cursor-ring span{
  font-size:9.4px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); opacity:0; transition:opacity .25s; white-space:nowrap; font-weight:500;
}
body.cursor-on .cursor-ring,body.cursor-on .cursor-dot{ opacity:1; }
body.cursor-hot .cursor-ring{ width:86px; height:86px; margin:-43px 0 0 -43px; background:var(--rite); }
body.cursor-hot .cursor-ring span{ opacity:1; }
body.cursor-hot .cursor-dot{ opacity:0; }
@media (pointer:coarse){ .cursor-ring,.cursor-dot{ display:none; } }

/* ---------- 24. Lightbox ------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:1400; display:none; place-items:center;
  background:rgba(42,33,26,.94); padding:clamp(16px,4vw,56px);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.lightbox.on{ display:grid; }
.lightbox figure{ margin:0; max-width:min(1080px,100%); max-height:100%; display:grid; gap:16px; }
.lightbox img{
  max-width:100%; max-height:calc(100vh - 190px); object-fit:contain;
  margin-inline:auto; animation:lbIn .45s var(--ease-out);
}
@keyframes lbIn{ from{ opacity:0; transform:scale(.97) } }
.lightbox figcaption{ color:rgba(250,245,236,.86); text-align:center; font-size:15px; }
.lb-count{ text-align:center; font-size:10.8px; letter-spacing:.22em; color:var(--foil-lt); }
.lb-close,.lb-prev,.lb-next{
  position:absolute; width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(250,245,236,.28); color:var(--paper);
  transition:background .3s, border-color .3s;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ background:rgba(250,245,236,.14); border-color:var(--paper); }
.lb-close{ top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); }
.lb-prev{ left:clamp(10px,2.4vw,28px); top:50%; margin-top:-24px; }
.lb-next{ right:clamp(10px,2.4vw,28px); top:50%; margin-top:-24px; }
.lb-close svg,.lb-prev svg,.lb-next svg{ width:18px; height:18px; }

/* ---------- 25. Inner page header ---------------------------------------- */
.page-head{
  padding-top:clamp(140px,17vh,192px); padding-bottom:clamp(48px,6vh,78px);
  position:relative; overflow:hidden;
}
.page-head .container{ position:relative; z-index:2; }
.page-head h1{ font-size:clamp(46px,7.8vw,96px); margin-top:20px; letter-spacing:-.024em; }
.page-head h1 .dev{
  display:block; font-family:var(--deva); font-size:.52em; color:var(--rite); margin-bottom:.1em;
}
.page-head p{ margin-top:24px; color:var(--ink-2); font-size:17.2px; max-width:58ch; }
.crumbs{
  display:flex; gap:9px; align-items:center; font-size:10.8px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:26px;
}
.crumbs a:hover{ color:var(--rite); }

/* ---------- 26. Misc blocks ---------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,76px); align-items:center; }
.split.rev .split-art{ order:-1; }
.split-art{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); position:relative; }
.split-art.arch{ clip-path:url(#byaahArch); border-radius:0; overflow:visible; box-shadow:none; }
.split-art img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.split-copy h2{ font-size:clamp(34px,4.8vw,60px); }
.split-copy h2 .dev{
  display:block; font-family:var(--deva); font-size:.5em; color:var(--rite); margin-bottom:.1em;
}
.split-copy p{ margin-top:20px; color:var(--ink-2); font-size:16.4px; }
.split-copy p + p{ margin-top:14px; }
.split-copy .btn,.split-copy .tlink{ margin-top:30px; }

.checklist{ margin-top:26px; display:grid; gap:13px; }
.checklist li{
  display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start;
  font-size:15.6px; color:var(--ink-2);
}
.checklist svg{ width:16px; height:16px; color:var(--rite); margin-top:5px; flex:none; }

.faq{ margin-top:clamp(34px,5vh,56px); display:grid; gap:0; border-top:1px solid var(--line-2); }
.faq details{ border-bottom:1px solid var(--line-2); }
.faq summary{
  list-style:none; cursor:pointer; padding:28px 46px 28px 0; position:relative;
  font-family:var(--display); font-size:clamp(21px,2.5vw,28px); color:var(--ink);
  transition:color .3s;
}
.faq summary:hover{ color:var(--rite); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:24px; color:var(--rite); font-family:var(--body); font-weight:300;
  transition:transform .3s var(--ease-out);
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq p{ padding:0 46px 30px 0; color:var(--ink-2); font-size:16px; max-width:78ch; }

.team-grid{
  margin-top:clamp(38px,5vh,60px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.2vw,30px);
}
.member{ text-align:center; }
.member img{
  width:100%; aspect-ratio:1/1; object-fit:cover; clip-path:url(#byaahArch);
  transition:transform .45s var(--ease-out);
}
.member:hover img{ transform:translateY(-6px); }
.member b{ display:block; margin-top:18px; font-family:var(--display); font-size:22px; color:var(--ink); font-weight:400; }
.member span{ display:block; margin-top:4px; font-size:10.4px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }

/* seal */
.seal{ width:126px; height:126px; position:relative; color:var(--foil); }
.seal svg{ width:100%; height:100%; }
.seal .seal-spin{ animation:spin 28s linear infinite; transform-origin:50% 50%; }
.seal .seal-text{
  font-family:var(--body); font-size:9.4px; letter-spacing:.24em;
  font-weight:500; fill:currentColor; text-transform:uppercase;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.rule{ display:flex; align-items:center; justify-content:center; gap:14px; color:var(--foil); }
.rule::before,.rule::after{
  content:""; height:1px; flex:1; max-width:120px;
  background:linear-gradient(90deg, transparent, var(--foil-line));
}
.rule::after{ background:linear-gradient(90deg, var(--foil-line), transparent); }
.rule svg{ width:22px; height:22px; flex:none; }

/* ---------- 27. Reveal --------------------------------------------------- */
.js [data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js [data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.09s }
[data-reveal][data-delay="2"]{ transition-delay:.18s }
[data-reveal][data-delay="3"]{ transition-delay:.27s }
[data-reveal][data-delay="4"]{ transition-delay:.36s }
[data-reveal][data-delay="5"]{ transition-delay:.45s }

[data-split] .ln{ display:block; overflow:hidden; }
.js [data-split] .ln > span{
  display:block; transform:translateY(102%);
  transition:transform 1s var(--ease-out);
}
[data-split].in .ln > span{ transform:none; }
[data-split].in .ln:nth-child(2) > span{ transition-delay:.09s }
[data-split].in .ln:nth-child(3) > span{ transition-delay:.18s }
[data-split].in .ln:nth-child(4) > span{ transition-delay:.27s }

/* ---------- 28. Responsive ----------------------------------------------- */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; gap:54px; }
  .hero-art{ max-width:520px; margin-inline:auto; width:100%; }
  .hero-seal{ right:-2%; top:2%; }
  .seal{ width:100px; height:100px; }
  .svc-grid,.dest-grid,.quotes{ grid-template-columns:repeat(2,1fr); }
  .proc{ grid-template-columns:1fr; gap:44px; }
  .proc-sticky{ position:static; }
  .lotus-proc{ grid-template-columns:1fr; gap:42px; }
  .lotus-dial{ max-width:400px; }
  .lotus-detail{ min-height:0; text-align:center; }
  .lotus-detail p{ margin-inline:auto; }
  .promise{ grid-template-columns:1fr; gap:44px; }
  .spot-copy{ max-width:26ch; }
  .enq-grid{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .section[data-deva]::before{ font-size:clamp(150px,34vw,300px); opacity:.045; }
}
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-cta .btn{ display:none; }
  .nav-toggle{ display:grid; }
  .nav{ height:72px; }
  .split{ grid-template-columns:1fr; gap:34px; }
  .split.rev .split-art{ order:0; }
  .gal .tall,.gal .wide,.gal .half,.gal .third,.gal .full{ grid-column:span 6; grid-row:span 3; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line-2); }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .hero{ padding-top:116px; }
  .panchang{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
  .svc-grid,.dest-grid,.quotes{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; gap:38px; }
  .step{ grid-template-columns:auto 1fr; gap:16px; }
  .arch-mini{ left:-4%; width:46%; }
  .hero-seal{ right:0; top:-3%; }
  .seal{ width:82px; height:82px; }
  .gal{ grid-auto-rows:clamp(84px,22vw,120px); }
  .gal .tall,.gal .wide,.gal .half,.gal .third,.gal .full{ grid-column:span 12; grid-row:span 3; }
  .gal .tall{ grid-row:span 4; }
  .lb-prev,.lb-next{ top:auto; bottom:14px; margin-top:0; }
  .lb-prev{ left:calc(50% - 58px); }
  .lb-next{ right:calc(50% - 58px); }
  .wa-float{ width:48px; height:48px; }
  .back-top{ bottom:78px; }
  .flow-review .rrow{ grid-template-columns:1fr; gap:3px; }
  .form-actions .btn{ width:100%; justify-content:center; }
  .section[data-deva]::before{ display:none; }
}

/* ---------- 29. Motion & print ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{ opacity:1; transform:none; }
  .js [data-split] .ln > span{ transform:none; }
  .grain,.petals{ display:none; }
  .spot-copy .w{ opacity:1; }
  .intro{ display:none !important; }
  .scroll-lotus .sl-petal,.flow-meter .fm-petal,.lp-petal{ transform:none; }
}
@media print{
  .nav-wrap,.wa-float,.back-top,.grain,.petals,.scroll-lotus,.intro,
  .cursor-ring,.cursor-dot,.lightbox{ display:none !important; }
  body::before{ display:none; }
  body{ background:#fff; color:#000; }
  .foot,.ribbon,.cta-band{ background:#fff !important; color:#000 !important; }
  .js .fstep{ display:block !important; }
}