/* ============================================================
   BLESSING GRAND HALL — "Mangalam"
   Bright, gold, auspicious. A wedding invitation that moves.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --pearl:#FDFBF6;
  --sand:#F5EDE0;
  --sand-2:#EFE3D1;
  --emerald:#1E6B3F;
  --emerald-lt:#2E8A54;
  --gold:#C9962F;
  --gold-lt:#F0D389;
  --gold-pale:#F7E9C4;
  --marigold:#F2A21C;
  --kumkum:#B0362B;
  --ink:#2A2419;
  --ink-soft:#6B6152;
  --line:rgba(201,150,47,.28);

  --maxw:1280px;
  --gut:clamp(1.25rem,5vw,4.5rem);
  --r:3px;

  --f-display:"Prata",Georgia,serif;
  --f-tamil:"Hind Madurai",serif;
  --f-body:"Karla",system-ui,sans-serif;

  --foil:linear-gradient(115deg,#B8842B 0%,#E8C56B 22%,#FFF4D2 38%,#E8C56B 54%,#B8842B 72%,#F0D389 90%,#C9962F 100%);
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.4,0,.15,1);

  --sh-1:0 2px 10px rgba(42,36,25,.06);
  --sh-2:0 18px 50px -18px rgba(42,36,25,.28);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);background:var(--pearl);
  font-family:var(--f-body);font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.68;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold-lt);color:var(--ink)}
:focus-visible{outline:2px solid var(--emerald);outline-offset:3px;border-radius:2px}

/* subtle paper warmth behind everything */
body::before{
  content:"";position:fixed;inset:0;z-index:-10;pointer-events:none;
  background:
    radial-gradient(60% 40% at 8% 0%,rgba(242,162,28,.07),transparent 60%),
    radial-gradient(50% 40% at 100% 12%,rgba(30,107,63,.05),transparent 62%);
}

/* ---------- 2. Type ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.14;margin:0;color:var(--ink)}
h1{font-size:clamp(2.4rem,1.5rem + 4.2vw,5.4rem);line-height:1.06}
h2{font-size:clamp(1.9rem,1.35rem + 2.4vw,3.4rem)}
h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.7rem)}
p{margin:0 0 1.1em;max-width:64ch}
.ta{font-family:var(--f-tamil);font-weight:500}
.lede{font-size:clamp(1.05rem,1rem + .5vw,1.28rem);line-height:1.68;color:#544B3D}
.dim{color:var(--ink-soft)}

/* gold foil text */
.foil{
  background:var(--foil);background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:foilmove 7s linear infinite;
}
@keyframes foilmove{to{background-position:280% 0}}

/* ---------- 3. Layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(4.5rem,9vw,8rem);position:relative}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.section--sand{background:var(--sand)}
.section--sand + .section--sand{padding-top:0}

/* ============================================================
   4. CURTAIN OPENING  (effects 1–3)
   ============================================================ */
#curtain{position:fixed;inset:0;z-index:300;pointer-events:none}
#curtain .half{
  position:absolute;top:0;bottom:0;width:51%;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 2px,transparent 2px 13px),
    var(--foil);
  background-size:auto,300% 100%;
  box-shadow:0 0 60px rgba(42,36,25,.35);
  transition:transform 1.5s .9s var(--e-out);
}
#curtain .half.l{left:0}
#curtain .half.r{right:0}
#curtain.open .half.l{transform:translateX(-101%)}
#curtain.open .half.r{transform:translateX(101%)}
#curtain.gone{display:none}

.cstage{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  transition:opacity .7s .9s,visibility .7s .9s;
}
#curtain.open .cstage{opacity:0;visibility:hidden}
.cseal{position:relative;width:clamp(96px,18vw,140px);display:grid;place-items:center}
.cseal img{
  width:100%;position:relative;z-index:2;
  opacity:0;transform:rotate(-160deg) scale(.5);
  animation:sealin 1.15s .15s var(--e-out) forwards;
}
@keyframes sealin{to{opacity:1;transform:none}}
/* shimmer sweep across the metal */
.cseal::after{
  content:"";position:absolute;inset:0;z-index:3;border-radius:50%;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);
  mix-blend-mode:overlay;opacity:0;
  animation:sweep 1.1s .95s var(--e-soft) forwards;
}
@keyframes sweep{0%{opacity:0;transform:translateX(-70%)}
  25%{opacity:1}100%{opacity:0;transform:translateX(70%)}}
/* kolam ring drawing round the seal */
.cring{position:absolute;inset:-26px;z-index:1}
.cring circle{
  fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.4;
  stroke-dasharray:4 9;stroke-linecap:round;
  stroke-dashoffset:520;
  animation:ringdraw 1.4s .5s var(--e-out) forwards,spin 22s 1.9s linear infinite;
}
@keyframes ringdraw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   5. KOLAM SCROLL RAIL  (effect 7)
   ============================================================ */
.rail{position:fixed;left:max(.9rem,2vw);top:0;bottom:0;width:14px;z-index:40;pointer-events:none}
.rail__t{position:absolute;left:6px;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(180deg,var(--line) 0 3px,transparent 3px 10px)}
.rail__lit{position:absolute;left:6px;top:0;width:2px;height:0%;
  background:linear-gradient(180deg,var(--marigold),var(--gold),var(--emerald));
  border-radius:2px;box-shadow:0 0 10px rgba(242,162,28,.55)}
.rail__bead{position:absolute;left:7px;top:0;translate:-50% -50%;width:11px;height:11px;
  background:var(--marigold);border-radius:50%;
  box-shadow:0 0 0 3px rgba(242,162,28,.2),0 0 14px rgba(242,162,28,.6)}
.rail__bead::after{content:"";position:absolute;inset:3px;background:var(--pearl);border-radius:50%}
@media (max-width:960px){.rail{display:none}}

/* ============================================================
   6. NAV — garland ring round the mark
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem var(--gut);
  background:rgba(253,251,246,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:.5s var(--e-soft);
}
.nav.stuck{border-bottom-color:var(--line);box-shadow:var(--sh-1);padding-block:.55rem}
.brand{display:flex;align-items:center;gap:.85rem}
.brand__seal{position:relative;width:48px;height:48px;flex:none;display:grid;place-items:center}
.brand__seal img{width:100%;height:100%;object-fit:contain}
.brand__ring{position:absolute;inset:-7px;animation:spin 26s linear infinite}
.brand__ring circle{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-dasharray:3 7;opacity:.65}
.brand__txt{display:grid;line-height:1.08}
.brand__txt b{font-family:var(--f-display);font-weight:400;font-size:1.08rem;color:var(--emerald)}
.brand__txt span{font-size:.58rem;letter-spacing:.32em;color:var(--gold)}

.menu{display:flex;align-items:center;gap:clamp(.9rem,2.1vw,1.9rem)}
.menu a{position:relative;font-size:.92rem;padding-block:.35rem;color:#5C5344;transition:color .35s}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--foil);background-size:200% 100%;transition:width .45s var(--e-out)}
.menu a:hover,.menu a[aria-current]{color:var(--ink)}
.menu a:hover::after,.menu a[aria-current]::after{width:100%}

.burger{display:none;width:42px;height:42px;position:relative;z-index:70}
.burger span{position:absolute;left:10px;width:22px;height:2px;background:var(--ink);
  border-radius:2px;transition:.4s var(--e-out)}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:24px}
.burger.on span:nth-child(1){top:20px;rotate:45deg}
.burger.on span:nth-child(2){top:20px;rotate:-45deg}
@media (max-width:880px){
  .burger{display:block}
  .menu{display:none}
}

/* ============================================================
   6b. MOBILE MENU — its own overlay, a direct child of <body>.
   It must NOT live inside .nav: backdrop-filter there makes the
   header a containing block for fixed children, so inset:0
   resolves to the navbar box and the panel loses its background.
   ============================================================ */
.mnav{
  position:fixed;inset:0;z-index:120;display:none;
  background:var(--sand);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;
  transition:opacity .32s var(--e-soft),visibility .32s;
}
.mnav.open{opacity:1;visibility:visible}
@media (max-width:880px){.mnav{display:block}}

.mnav__in{
  min-height:100%;display:flex;flex-direction:column;
  padding:5.2rem 1.4rem 2rem;
}
.mnav__links{display:flex;flex-direction:column;gap:0;margin-bottom:auto}
.mnav__links a{
  font-family:var(--f-display);font-size:1.3rem;color:var(--ink);
  padding:.85rem .2rem;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  opacity:0;transform:translateY(14px);
}
.mnav.open .mnav__links a{opacity:1;transform:none;
  transition:opacity .4s var(--e-out),transform .4s var(--e-out)}
.mnav.open .mnav__links a:nth-child(1){transition-delay:.10s}
.mnav.open .mnav__links a:nth-child(2){transition-delay:.15s}
.mnav.open .mnav__links a:nth-child(3){transition-delay:.20s}
.mnav.open .mnav__links a:nth-child(4){transition-delay:.25s}
.mnav.open .mnav__links a:nth-child(5){transition-delay:.30s}
.mnav.open .mnav__links a:nth-child(6){transition-delay:.35s}
.mnav.open .mnav__links a:nth-child(7){transition-delay:.40s}
.mnav__links a[aria-current]{color:var(--emerald)}
.mnav__links a::after{content:"\203A";color:var(--gold);font-size:1.3rem;line-height:1}
.mnav__foot{padding-top:1.6rem;display:grid;gap:.9rem}
.mnav__foot a.tel{font-size:1.05rem;color:var(--emerald);font-weight:500}
.mnav__foot p{font-size:.88rem;color:var(--ink-soft);margin:0;line-height:1.5}
.mnav__foot .soc{margin-top:.2rem}

/* the floating buttons must never sit above the open menu */
body.menu-open .wa,
body.menu-open .mbar,
body.menu-open .rail{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s}

/* ============================================================
   7. HERO  (effects 4–6)
   ============================================================ */
.hero{position:relative;padding-top:clamp(7rem,15vh,10rem);padding-bottom:clamp(3rem,7vw,5rem);
  overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:-1;
  background:linear-gradient(transparent,var(--sand))}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
@media (max-width:980px){.hero__grid{grid-template-columns:1fr;gap:2.5rem}}

.hero__seal{position:relative;width:clamp(70px,8vw,96px);margin-bottom:1.5rem}
.hero__seal img{width:100%;filter:drop-shadow(0 8px 22px rgba(176,54,43,.22))}
.hero__seal svg{position:absolute;inset:-14px;animation:spin 30s linear infinite}
.hero__seal circle{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-dasharray:3 8;opacity:.75}

.hero h1{margin-bottom:1rem}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln i{display:block;font-style:normal;translate:0 108%;
  animation:up 1s var(--e-out) forwards}
@keyframes up{to{translate:0 0}}
.hero h1 .ln:nth-child(1) i{animation-delay:2.15s}
.hero h1 .ln:nth-child(2) i{animation-delay:2.29s}
.hero h1 .ln:nth-child(3) i{animation-delay:2.43s}

.fade{opacity:0;animation:fadeup .9s var(--e-out) forwards}
@keyframes fadeup{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.d1{animation-delay:2.0s}.d2{animation-delay:2.65s}.d3{animation-delay:2.85s}.d4{animation-delay:3.05s}

/* framed hero photo */
.hero__frame{position:relative;padding:12px}
.hero__frame::before{
  content:"";position:absolute;inset:0;border-radius:calc(var(--r) + 10px);
  background:var(--foil);background-size:220% 100%;animation:foilmove 9s linear infinite;
  opacity:0;transition:opacity 1s 2.4s;
}
.hero.go .hero__frame::before{opacity:1}
.hero__frame > div{position:relative;overflow:hidden;border-radius:var(--r);
  aspect-ratio:5/4;box-shadow:var(--sh-2)}
.hero__frame img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.16);animation:kb 26s 2.2s ease-out forwards}
@keyframes kb{to{transform:scale(1.01)}}
.hero__frame .cap{
  position:absolute;left:14px;bottom:14px;z-index:2;
  background:rgba(253,251,246,.93);border:1px solid var(--line);
  padding:.5rem .9rem;border-radius:var(--r);font-size:.82rem;color:#5C5344;
  opacity:0;animation:fadeup .8s 3.2s var(--e-out) forwards;
}

/* marigold petals */
.petals{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.petal{position:absolute;top:-6%;width:13px;height:9px;border-radius:60% 40% 55% 45%;
  background:linear-gradient(140deg,#FFC64D,var(--marigold));opacity:0;
  animation:drop linear infinite}
.petal.b{background:linear-gradient(140deg,#FFE29A,#E8B33A);width:10px;height:7px}
@keyframes drop{
  0%{opacity:0;transform:translateY(0) rotate(0)}
  8%{opacity:.85}
  92%{opacity:.7}
  100%{opacity:0;transform:translateY(112vh) translateX(var(--dx,30px)) rotate(720deg)}
}

/* ---------- 8. Buttons  (effect 13) ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.55rem;
  padding:.9rem 1.7rem;border-radius:var(--r);font-size:.94rem;font-weight:500;
  border:1px solid var(--gold);color:var(--ink);overflow:hidden;isolation:isolate;
  transition:color .4s,border-color .4s,transform .3s var(--e-out),box-shadow .4s;
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--foil);
  background-size:220% 100%;translate:-101% 0;transition:translate .55s var(--e-out)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(201,150,47,.6)}
.btn:hover::before{translate:0 0}
.btn--solid{background:var(--emerald);border-color:var(--emerald);color:#fff}
.btn--solid:hover{color:var(--ink)}
.btn--ghost{border-color:rgba(42,36,25,.2)}
.btn--ghost:hover{border-color:var(--gold)}
/* sparkle burst */
.spark{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold-lt);
  pointer-events:none;z-index:90;animation:sparkle .75s var(--e-out) forwards}
@keyframes sparkle{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0)}
}

/* ============================================================
   9. SECTION HEADS  (effect 8 — shimmer sweep)
   ============================================================ */
.cove{margin-bottom:clamp(2rem,4vw,3rem);position:relative}
.cove .ta{display:block;font-size:1rem;letter-spacing:.05em;color:var(--gold);margin-bottom:.5rem;
  opacity:0;translate:0 10px}
.cove.in .ta{opacity:1;translate:0 0;transition:.7s var(--e-out)}
.cove h2{opacity:0;translate:0 16px;margin-bottom:.9rem;position:relative;overflow:hidden}
.cove.in h2{opacity:1;translate:0 0;transition:opacity .85s .12s,translate .85s .12s var(--e-out)}
.cove.in h2::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,244,210,.95) 50%,transparent 60%);
  animation:shimmer 1.3s .7s var(--e-soft) forwards;
}
@keyframes shimmer{0%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
.cove p{opacity:0;translate:0 16px}
.cove.in p{opacity:1;translate:0 0;transition:opacity .85s .3s,translate .85s .3s var(--e-out)}
.cove--c{text-align:center}
.cove--c p{margin-inline:auto}

/* ---------- 10. Reveal ---------- */
.rv{opacity:0;translate:0 28px}
.rv.in{opacity:1;translate:0 0;transition:opacity .9s var(--e-out),translate .9s var(--e-out)}
.rv[data-d="1"].in{transition-delay:.09s}
.rv[data-d="2"].in{transition-delay:.18s}
.rv[data-d="3"].in{transition-delay:.27s}
.rv[data-d="4"].in{transition-delay:.36s}

/* ============================================================
   11. THORANAM  (effect 9)
   ============================================================ */
.thoranam{position:relative;height:96px;margin-block:.5rem}
.thoranam svg{width:100%;height:100%;display:block;overflow:visible}
.thoranam .cord{fill:none;stroke:var(--gold);stroke-width:1.4;opacity:.75;
  stroke-dasharray:1500;stroke-dashoffset:1500}
.thoranam.in .cord{stroke-dashoffset:0;transition:stroke-dashoffset 1.9s var(--e-out)}
.thoranam .leaf{fill:var(--emerald);opacity:0;transform-origin:top center}
.thoranam.in .leaf{animation:leafdrop .75s var(--e-out) forwards}
.thoranam .bud{fill:var(--marigold);opacity:0;transform-origin:top center}
.thoranam.in .bud{animation:budpop .6s var(--e-out) forwards}
@keyframes leafdrop{from{opacity:0;transform:translateY(-12px) scaleY(.4)}to{opacity:1;transform:none}}
@keyframes budpop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
.thoranam__seal{position:absolute;left:50%;top:34px;translate:-50% 0;width:56px;
  opacity:0;scale:.5;filter:drop-shadow(0 6px 14px rgba(176,54,43,.25))}
.thoranam.in .thoranam__seal{opacity:1;scale:1;
  transition:opacity .7s 1s,scale .7s 1s var(--e-out);animation:sway 6s 1.7s ease-in-out infinite}
@keyframes sway{0%,100%{rotate:-3.5deg}50%{rotate:3.5deg}}

/* ============================================================
   12. STATS  (effect 15)
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:clamp(1rem,3vw,2.5rem)}
.stat{position:relative;padding:1.5rem 1.2rem;background:var(--pearl);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);
  text-align:center;overflow:hidden}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--foil);background-size:200% 100%;transform:scaleX(0);transform-origin:left}
.stat.in::before{transform:scaleX(1);transition:transform .9s var(--e-out)}
.stat b{display:block;font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.1rem,1.6rem + 1.7vw,3.2rem);line-height:1;color:var(--emerald)}
.stat > span{display:block;font-size:.84rem;color:var(--ink-soft);margin-top:.5rem}

/* ============================================================
   13. PHOTO CARDS  (effects 11–12, 10)
   ============================================================ */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(1.2rem,2.6vw,2rem)}
.shot{position:relative;perspective:1100px}
.shot__in{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--pearl);
  box-shadow:var(--sh-2);transform-style:preserve-3d;
  transition:transform .35s var(--e-soft);
}
.shot__pic{position:relative;overflow:hidden;aspect-ratio:4/3}
.shot__pic img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--e-out)}
.shot:hover .shot__pic img{transform:scale(1.07)}
/* gold border drawing on hover */
.shot__b{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:var(--r)}
.shot__b span{position:absolute;background:var(--foil);background-size:200% 100%}
.shot__b span:nth-child(1){top:0;left:0;height:2px;width:0;transition:width .4s var(--e-out)}
.shot__b span:nth-child(2){top:0;right:0;width:2px;height:0;transition:height .4s .35s var(--e-out)}
.shot__b span:nth-child(3){bottom:0;right:0;height:2px;width:0;transition:width .4s .7s var(--e-out)}
.shot__b span:nth-child(4){bottom:0;left:0;width:2px;height:0;transition:height .4s 1.05s var(--e-out)}
.shot:hover .shot__b span:nth-child(1),.shot:hover .shot__b span:nth-child(3){width:100%}
.shot:hover .shot__b span:nth-child(2),.shot:hover .shot__b span:nth-child(4){height:100%}
.shot__txt{padding:1.3rem 1.4rem 1.5rem}
.shot__txt .ta{display:block;color:var(--gold);font-size:.92rem;margin-bottom:.25rem}
.shot__txt h3{margin-bottom:.4rem}
.shot__txt p{font-size:.94rem;color:var(--ink-soft);margin:0}

/* wide feature band */
.band{display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(2rem,5vw,4.5rem)}
.band--flip .band__pic{order:2}
@media (max-width:900px){.band{grid-template-columns:1fr}.band--flip .band__pic{order:0}}
.band__pic{position:relative;padding:10px;background:var(--foil);background-size:220% 100%;
  border-radius:calc(var(--r) + 8px);animation:foilmove 11s linear infinite}
.band__pic > div{overflow:hidden;border-radius:var(--r);aspect-ratio:4/3}
.band__pic img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--e-out)}
.band:hover .band__pic img{transform:scale(1.05)}

/* ============================================================
   14. OCCASION FLIP CARDS  (effect 14)
   ============================================================ */
.occ{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1rem,2.2vw,1.5rem)}
.flip{perspective:1200px;min-height:250px}
.flip__in{position:relative;width:100%;height:100%;min-height:250px;
  transform-style:preserve-3d;transition:transform .85s var(--e-out)}
.flip:hover .flip__in,.flip:focus-within .flip__in{transform:rotateY(180deg)}
.flip__f,.flip__b{position:absolute;inset:0;backface-visibility:hidden;
  border-radius:var(--r);padding:1.6rem 1.5rem;display:grid;align-content:center;gap:.45rem;
  border:1px solid var(--line);box-shadow:var(--sh-1)}
.flip__f{background:var(--pearl)}
.flip__b{background:var(--emerald);color:#fff;transform:rotateY(180deg);border-color:var(--emerald)}
.flip__b h3,.flip__b .ta{color:#fff}
.flip__b p{color:rgba(255,255,255,.86);font-size:.92rem;margin:0}
.flip__f .ta{color:var(--gold);font-size:.98rem}
.flip__f p{font-size:.93rem;color:var(--ink-soft);margin:0}
.flip__b .btn{border-color:rgba(255,255,255,.5);color:#fff;margin-top:.7rem;justify-self:start}
.flip__b .btn:hover{color:var(--ink)}

/* ---------- 15. Marquee ---------- */
.marq{overflow:hidden;background:var(--emerald);padding-block:.95rem}
.marq__t{display:flex;gap:2.8rem;width:max-content;animation:slide 40s linear infinite}
.marq:hover .marq__t{animation-play-state:paused}
.marq__t span{font-family:var(--f-tamil);font-size:clamp(1.05rem,2.2vw,1.5rem);
  color:rgba(255,255,255,.9);white-space:nowrap;display:flex;align-items:center;gap:2.8rem}
.marq__t span::after{content:"✦";color:var(--gold-lt);font-size:.65em}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   16. WHATSAPP GARLAND BUTTON
   ============================================================ */
.wa{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:80;
  display:grid;place-items:center;width:64px;height:64px}
.wa__ring{position:absolute;inset:-9px;animation:spin 14s linear infinite}
.wa__ring circle{fill:none;stroke:var(--marigold);stroke-width:3;stroke-dasharray:2 9;
  stroke-linecap:round;opacity:.85}
.wa__b{position:relative;width:100%;height:100%;border-radius:50%;background:var(--emerald);
  display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(30,107,63,.6);
  transition:transform .4s var(--e-out),box-shadow .4s}
.wa__b svg{width:30px;height:30px;fill:#fff}
.wa:hover .wa__b{transform:scale(1.09);box-shadow:0 14px 34px -8px rgba(30,107,63,.75)}
.wa__b::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--emerald);animation:pulse 2.6s infinite}
@keyframes pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
.wa__tip{position:absolute;right:78px;white-space:nowrap;background:var(--ink);color:var(--pearl);
  padding:.5rem .85rem;border-radius:var(--r);font-size:.82rem;opacity:0;translate:8px 0;
  transition:.4s var(--e-out);pointer-events:none}
.wa:hover .wa__tip{opacity:1;translate:0 0}
@media (max-width:560px){.wa__tip{display:none}}

/* ============================================================
   17. AVAILABILITY
   ============================================================ */
.avail{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
@media (max-width:940px){.avail{grid-template-columns:1fr}}
.card{background:var(--pearl);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.3rem,3vw,2rem);box-shadow:var(--sh-2)}
.avail__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem}
.avail__head b{font-family:var(--f-display);font-weight:400;font-size:1.3rem}
.avail__head small{display:block;font-family:var(--f-tamil);font-size:.82rem;color:var(--gold)}
.avail__nav{display:flex;gap:.4rem}
.avail__nav button{width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r);
  display:grid;place-items:center;transition:.35s}
.avail__nav button:hover{background:var(--emerald);border-color:var(--emerald);color:#fff}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px}
.dow span{text-align:center;font-size:.68rem;letter-spacing:.08em;color:var(--ink-soft)}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.day{aspect-ratio:1;display:grid;place-items:center;font-size:.88rem;border-radius:var(--r);
  border:1px solid transparent;position:relative;transition:.28s}
.day.pad{opacity:0;pointer-events:none}
.day.free{color:var(--ink);border-color:var(--line);background:#fff;cursor:pointer}
.day.free:hover{border-color:var(--gold);background:var(--gold-pale);transform:translateY(-1px)}
.day.sel{background:var(--emerald);border-color:var(--emerald);color:#fff;
  box-shadow:0 6px 14px -6px rgba(30,107,63,.7)}
.day.busy{color:#B6AE9E;background:var(--sand-2);cursor:not-allowed}
.legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.1rem;font-size:.76rem;color:var(--ink-soft)}
.legend i{display:inline-block;width:9px;height:9px;margin-right:.4rem;vertical-align:middle;border-radius:2px}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.5rem}
.chip{padding:.55rem 1.05rem;border:1px solid var(--line);border-radius:var(--r);
  font-size:.88rem;background:var(--pearl);transition:.35s}
.chip:hover{border-color:var(--gold);background:var(--gold-pale)}
.chip.on{background:var(--emerald);border-color:var(--emerald);color:#fff}

/* ---------- 18. Forms ---------- */
.field{display:grid;gap:.38rem;margin-bottom:1.05rem}
.field label{font-size:.82rem;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:var(--r);
  padding:.8rem .9rem;font:inherit;font-size:.95rem;transition:.35s}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,150,47,.15)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
@media (max-width:620px){.two{grid-template-columns:1fr}}
.info{display:grid;gap:1.1rem}
.info__i{background:var(--pearl);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r);padding:1rem 1.2rem}
.info__i b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.05rem;
  color:var(--emerald);margin-bottom:.2rem}
.info__i a,.info__i span{color:#5C5344;font-size:.95rem}
.info__i a:hover{color:var(--gold)}

/* ---------- 19. Gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1rem,2.2vw,1.5rem)}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);
  aspect-ratio:4/3;cursor:zoom-in;box-shadow:var(--sh-2);background:var(--sand)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out)}
.gal figure:hover img{transform:scale(1.07)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.1rem .9rem;
  background:linear-gradient(transparent,rgba(42,36,25,.82));color:#fff;font-size:.9rem;
  translate:0 12px;opacity:0;transition:.5s var(--e-out)}
.gal figure:hover figcaption{translate:0 0;opacity:1}
.gal figure.wide{grid-column:span 2}
@media (max-width:720px){.gal figure.wide{grid-column:span 1}}
.light{position:fixed;inset:0;z-index:150;background:rgba(42,36,25,.93);display:grid;
  place-items:center;padding:2rem;opacity:0;visibility:hidden;transition:.5s}
.light.on{opacity:1;visibility:visible}
.light img{max-width:min(1100px,92vw);max-height:84vh;object-fit:contain;border-radius:var(--r);
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.light button{position:absolute;top:1.3rem;right:1.6rem;font-size:2rem;color:#fff}

/* ---------- 20. Page hero ---------- */
.phero{position:relative;padding-top:clamp(7.5rem,17vh,11rem);padding-bottom:clamp(2.5rem,6vw,4rem);
  background:var(--sand);overflow:hidden}
.phero .ta{display:block;color:var(--gold);font-size:1.02rem;margin-bottom:.5rem}

/* ---------- 21. Footer ---------- */
.foot{position:relative;background:var(--sand);border-top:1px solid var(--line);
  padding-block:clamp(3rem,6vw,5rem) 1.8rem;overflow:hidden}
.foot__mark{position:absolute;right:-3%;bottom:-16%;width:min(360px,48vw);opacity:.08;pointer-events:none}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.4rem;position:relative;z-index:1}
@media (max-width:820px){.foot__grid{grid-template-columns:1fr;gap:1.9rem}}
.foot h4{font-size:.78rem;letter-spacing:.16em;color:var(--gold);margin-bottom:.85rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.93rem}
.foot a{color:#5C5344;transition:color .35s}
.foot a:hover{color:var(--emerald)}
.foot .tag{font-family:var(--f-display);font-size:1.2rem;color:var(--emerald);margin-bottom:.6rem}
.foot__base{margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.8rem;color:var(--ink-soft);position:relative;z-index:1}

/* ---------- 22. Page transition (effect 16) ---------- */
#wipe{position:fixed;inset:0;z-index:250;background:var(--foil);background-size:200% 100%;
  transform:scaleY(0);transform-origin:bottom;pointer-events:none}
#wipe.go{transform:scaleY(1);transform-origin:bottom;transition:transform .55s var(--e-soft)}

/* ---------- 23. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.cove .ta,.cove h2,.cove p,.fade,.hero__frame .cap{opacity:1!important;translate:none!important}
  .hero h1 .ln i{translate:0 0!important}
  .hero__frame img{transform:none!important}
  .petals,#wipe{display:none}
  .hero__frame::before{opacity:1!important}
  .cove.in h2::after{display:none}
}

/* ============================================================
   24. PAGE HERO — rebuilt. No more empty top sections.
   ============================================================ */
.phero{
  position:relative;padding-top:clamp(8rem,17vh,11rem);
  padding-bottom:clamp(3.5rem,8vw,6rem);
  background:linear-gradient(170deg,var(--sand) 0%,var(--sand-2) 55%,var(--sand) 100%);
  overflow:hidden;isolation:isolate;
}
/* ghost Tamil word behind everything */
/* NOTE: needs higher specificity than `.phero .ta`, which otherwise
   shrinks this watermark to eyebrow size and stacks it on the eyebrow. */
.phero .phero__ghost{
  position:absolute;left:calc(var(--gut) - .6rem);top:50%;translate:0 -50%;z-index:-2;
  font-family:var(--f-tamil);font-weight:600;
  font-size:clamp(5rem,14vw,13rem);line-height:.8;
  color:rgba(201,150,47,.10);white-space:nowrap;pointer-events:none;
  max-width:100%;overflow:hidden;
  opacity:0;animation:ghostin 1.6s .3s var(--e-out) forwards;
}
@keyframes ghostin{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
/* kolam dot field */
.phero__dots{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  background-image:radial-gradient(rgba(201,150,47,.30) 1.4px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(75% 90% at 18% 40%,#000,transparent 72%);
  mask-image:radial-gradient(75% 90% at 18% 40%,#000,transparent 72%);
}
/* drawn corner ornaments */
.phero__orn{position:absolute;z-index:-1;width:clamp(90px,11vw,150px);pointer-events:none}
.phero__orn path{fill:none;stroke:var(--gold);stroke-width:1.3;stroke-linecap:round;
  opacity:.55;stroke-dasharray:400;stroke-dashoffset:400;
  animation:orndraw 2s .5s var(--e-out) forwards}
@keyframes orndraw{to{stroke-dashoffset:0}}
.phero__orn.tl{top:clamp(5rem,11vh,7.5rem);left:calc(var(--gut) - 1.5rem)}
.phero__orn.br{bottom:1.3rem;right:calc(var(--gut) - 1rem);rotate:180deg}

.phero__grid{
  position:relative;display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
}
@media (max-width:900px){
  .phero__grid{grid-template-columns:1fr;gap:2rem}
  .phero__orn.br{display:none}
  .phero .phero__ghost{display:none}
}

/* breadcrumb */
.crumb{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--ink-soft);
  margin-bottom:1.1rem;opacity:0;animation:fadeup .8s .25s var(--e-out) forwards}
.crumb a{color:var(--gold);transition:color .3s}
.crumb a:hover{color:var(--emerald)}
.crumb i{width:16px;height:1px;background:var(--line);display:block}

.phero .ta{display:block;color:var(--gold);font-size:1.05rem;margin-bottom:.5rem;
  opacity:0;animation:fadeup .8s .35s var(--e-out) forwards}
.phero h1{opacity:0;animation:fadeup .9s .45s var(--e-out) forwards;margin-bottom:.9rem}
.phero .lede{max-width:52ch;opacity:0;animation:fadeup .9s .58s var(--e-out) forwards}
.phero__acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem;
  opacity:0;animation:fadeup .9s .7s var(--e-out) forwards}

/* gold rule that draws under the heading */
.phero__rule{display:block;height:2px;width:0;background:var(--foil);background-size:200% 100%;
  margin:1.3rem 0 0;animation:rule 1.1s .95s var(--e-out) forwards}
@keyframes rule{to{width:min(210px,45%)}}

/* arch-framed photo */
.phero__arch{
  position:relative;padding:9px;background:var(--foil);background-size:220% 100%;
  border-radius:50% 50% var(--r) var(--r)/28% 28% var(--r) var(--r);
  animation:foilmove 10s linear infinite;
  opacity:0;translate:0 26px;
}
.phero__arch.go{opacity:1;translate:0 0;transition:opacity 1s .55s,translate 1s .55s var(--e-out)}
.phero__arch > div{
  overflow:hidden;aspect-ratio:4/5;
  border-radius:50% 50% var(--r) var(--r)/28% 28% var(--r) var(--r);
}
.phero__arch > div img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);animation:kb 24s 1s ease-out forwards}
.phero__arch::after{
  content:"";position:absolute;inset:9px;pointer-events:none;
  border-radius:50% 50% var(--r) var(--r)/28% 28% var(--r) var(--r);
  background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  opacity:0;animation:sweep 1.4s 1.5s var(--e-soft) forwards;
}
/* small seal pinned to the arch */
.phero__pin{
  position:absolute;left:-22px;bottom:34px;width:70px;z-index:3;
  filter:drop-shadow(0 8px 20px rgba(176,54,43,.28));
  opacity:0;scale:.4;
  animation:pinin .8s 1.35s var(--e-out) forwards;
}
@keyframes pinin{to{opacity:1;scale:1}}
@media (max-width:900px){
  .phero__arch{max-width:380px;margin-inline:auto}
  .phero__arch > div{aspect-ratio:4/3}
  .phero__pin{left:-14px;width:58px}
}

/* ============================================================
   25. FACILITIES — animated line icons
   ============================================================ */
.fac{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(1rem,2.2vw,1.5rem)}
/* eight facilities sit as a clean 4x2 on wide screens, 2x4 on tablets */
@media (min-width:1180px){.fac{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1000px) and (max-width:1179px){.fac{grid-template-columns:repeat(3,1fr)}}
@media (min-width:700px) and (max-width:999px){.fac{grid-template-columns:repeat(2,1fr)}}
.fac__i{
  position:relative;background:var(--pearl);border:1px solid var(--line);
  border-radius:var(--r);padding:1.7rem 1.4rem;overflow:hidden;
  transition:transform .45s var(--e-out),box-shadow .45s,border-color .45s;
}
.fac__i:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--gold)}
.fac__i::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--foil);background-size:200% 100%;
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e-out);
}
.fac__i:hover::before{transform:scaleX(1)}
.fac__ic{width:46px;height:46px;margin-bottom:1rem;display:block}
.fac__ic path,.fac__ic circle,.fac__ic rect,.fac__ic line,.fac__ic polyline{
  fill:none;stroke:var(--emerald);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--dl,180);stroke-dashoffset:var(--dl,180);
}
.fac__i.in .fac__ic path,.fac__i.in .fac__ic circle,.fac__i.in .fac__ic rect,
.fac__i.in .fac__ic line,.fac__i.in .fac__ic polyline{
  stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--e-out);
}
.fac__i:hover .fac__ic path,.fac__i:hover .fac__ic circle,.fac__i:hover .fac__ic rect,
.fac__i:hover .fac__ic line,.fac__i:hover .fac__ic polyline{stroke:var(--gold);transition:stroke .4s}
.fac__i .ta{display:block;color:var(--gold);font-size:.9rem;margin-bottom:.15rem}
.fac__i h3{font-size:1.15rem;margin-bottom:.35rem}
.fac__i p{font-size:.9rem;color:var(--ink-soft);margin:0}

/* ============================================================
   26. SERVICES — bookable, on request
   ============================================================ */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(1rem,2.2vw,1.5rem)}
/* six services sit as 3x2 on desktop */
@media (min-width:1000px){.svc{grid-template-columns:repeat(3,1fr)}}
.svc__i{
  position:relative;background:var(--pearl);border:1px solid var(--line);
  border-radius:var(--r);padding:1.8rem 1.5rem 1.6rem;
  display:grid;align-content:start;gap:.4rem;overflow:hidden;
  transition:transform .45s var(--e-out),box-shadow .45s;
}
.svc__i:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.svc__i::after{
  content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;
  border-radius:50%;background:radial-gradient(circle,rgba(242,162,28,.16),transparent 68%);
  opacity:0;transition:opacity .5s;
}
.svc__i:hover::after{opacity:1}
.svc__tag{position:absolute;top:1rem;right:1.1rem;font-size:.66rem;letter-spacing:.1em;
  color:var(--gold);border:1px solid var(--line);border-radius:99px;padding:.2rem .6rem;
  background:var(--sand)}
.svc__i .ta{color:var(--gold);font-size:.92rem}
.svc__i h3{font-size:1.2rem}
.svc__i p{font-size:.93rem;color:var(--ink-soft);margin:.2rem 0 1rem}
.svc__i .btn{justify-self:start;padding:.65rem 1.2rem;font-size:.86rem}

/* ============================================================
   27. TESTIMONIALS
   ============================================================ */
.tst{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1rem,2.4vw,1.6rem)}
.tst__i{
  position:relative;background:var(--pearl);border:1px solid var(--line);
  border-radius:var(--r);padding:2.4rem 1.6rem 1.6rem;box-shadow:var(--sh-1);
  transition:transform .45s var(--e-out),box-shadow .45s;
}
.tst__i:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.tst__i::before{
  content:"\201C";position:absolute;top:.1rem;left:1.1rem;
  font-family:var(--f-display);font-size:4.5rem;line-height:1;
  color:var(--gold-lt);opacity:.85;
}
.tst__s{display:flex;gap:.18rem;margin-bottom:.8rem}
.tst__s i{width:15px;height:15px;display:block;
  background:var(--marigold);opacity:0;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.tst__i.in .tst__s i{animation:starpop .45s var(--e-out) forwards}
.tst__i.in .tst__s i:nth-child(2){animation-delay:.09s}
.tst__i.in .tst__s i:nth-child(3){animation-delay:.18s}
.tst__i.in .tst__s i:nth-child(4){animation-delay:.27s}
.tst__i.in .tst__s i:nth-child(5){animation-delay:.36s}
@keyframes starpop{from{opacity:0;transform:scale(0) rotate(-40deg)}to{opacity:1;transform:none}}
.tst__i p{font-size:.97rem;color:#544B3D;margin-bottom:1.1rem}
.tst__w{display:flex;align-items:center;gap:.7rem;padding-top:.9rem;
  border-top:1px solid var(--line)}
.tst__w .tst__av{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--gold-pale);border:1px solid var(--line);
  display:grid;place-items:center;font-size:0;
}
.tst__w .tst__av::before{
  content:"";width:19px;height:19px;display:block;background:var(--marigold);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.tst__i:hover .tst__av::before{background:var(--gold);transition:background .4s}
.tst__w b{font-weight:500;font-size:.96rem}
/* scoped to the nested role line only — a bare `.tst__w span` also matches
   .tst__av and strips its colour, size and centring. */
.tst__w > span > span{display:block;font-size:.8rem;color:var(--ink-soft)}

/* ============================================================
   28. SOCIAL ROW
   ============================================================ */
.soc{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.soc a{
  position:relative;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;background:var(--pearl);
  transition:transform .4s var(--e-out),background .4s,border-color .4s;
}
.soc a svg{width:19px;height:19px;fill:var(--emerald);transition:fill .4s}
.soc a:hover{transform:translateY(-4px) scale(1.06);background:var(--emerald);border-color:var(--emerald)}
.soc a:hover svg{fill:#fff}
.soc a::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--gold);opacity:0;transform:scale(.85);
  transition:.45s var(--e-out);
}
.soc a:hover::after{opacity:.8;transform:scale(1)}

/* big social band */
.socband{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:clamp(1.6rem,3.5vw,2.4rem);background:var(--pearl);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.socband .soc a{width:50px;height:50px}
.socband .soc a svg{width:22px;height:22px}

/* ============================================================
   29. STICKY MOBILE CALL BAR
   ============================================================ */
.mbar{display:none}
@media (max-width:760px){
  .mbar{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:85;
    background:var(--pearl);border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(42,36,25,.1);
  }
  .mbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.95rem .5rem;font-size:.92rem;font-weight:500}
  .mbar a svg{width:19px;height:19px}
  .mbar a:first-child{color:var(--emerald);border-right:1px solid var(--line)}
  .mbar a:first-child svg{fill:var(--emerald)}
  .mbar a:last-child{background:var(--emerald);color:#fff}
  .mbar a:last-child svg{fill:#fff}
  body{padding-bottom:56px}
  .wa{bottom:70px}
}

/* ---------- 30. Reduced motion additions ---------- */
@media (prefers-reduced-motion:reduce){
  .phero .phero__ghost,.crumb,.phero .ta,.phero h1,.phero .lede,.phero__acts,
  .phero__arch,.phero__pin{opacity:1!important;translate:none!important;scale:1!important}
  .phero__rule{width:min(210px,45%)!important}
  .phero__orn path{stroke-dashoffset:0!important}
  .phero__arch img{transform:none!important}
  .phero__arch::after{display:none}
  .fac__i .fac__ic *{stroke-dashoffset:0!important}
  .tst__s i{opacity:1!important}
}

/* ============================================================
   31. MOBILE POLISH — overlap fixes and touch sizing
   ============================================================ */
@media (max-width:760px){
  /* the sticky call bar owns the bottom strip; nothing may sit under it */
  body{padding-bottom:60px}
  .wa{bottom:74px;right:1rem;width:56px;height:56px}
  .wa__b svg{width:26px;height:26px}

  /* headline sizes that do not swamp a small screen */
  h1{font-size:clamp(2rem,8vw,2.7rem)}
  h2{font-size:clamp(1.6rem,6vw,2.1rem)}
  .lede{font-size:1rem}

  .section{padding-block:3.2rem}
  .section--tight{padding-block:2.4rem}

  /* hero: the seal and photo frame were colliding with the text */
  .hero{padding-top:6.5rem;padding-bottom:2.5rem}
  .hero__seal{width:62px;margin-bottom:1.1rem}
  .hero__frame{padding:7px;margin-top:2rem}
  .hero__frame > div{aspect-ratio:4/3}
  .hero__frame .cap{left:10px;bottom:10px;font-size:.76rem;padding:.4rem .7rem}

  /* page hero */
  .phero{padding-top:6.5rem;padding-bottom:2.6rem}
  .phero__orn.tl{top:5.2rem;left:.35rem;width:74px}
  .phero__acts{gap:.6rem}

  /* buttons: full-width stacking beats cramped side-by-side */
  .hero__acts .btn,.phero__acts .btn{flex:1 1 100%;justify-content:center}
  .btn{padding:.85rem 1.25rem;font-size:.9rem;min-height:46px}

  /* cards */
  .shot__txt{padding:1.1rem 1.15rem 1.3rem}
  .flip,.flip__in{min-height:220px}
  .fac__i{padding:1.35rem 1.15rem}
  .fac__ic{width:38px;height:38px;margin-bottom:.75rem}
  .svc__i{padding:1.5rem 1.15rem 1.3rem}
  .svc__tag{position:static;display:inline-block;margin-bottom:.5rem}

  /* calendar: bigger tap targets, no cramped cells */
  .card{padding:1.1rem .9rem}
  .grid,.dow{gap:4px}
  .day{font-size:.9rem;border-radius:4px}
  .chip{padding:.6rem .9rem;font-size:.86rem;min-height:44px;display:flex;align-items:center}
  .avail__nav button{width:40px;height:40px}

  /* social band stacks */
  .socband{flex-direction:column;align-items:flex-start;gap:1rem;padding:1.4rem 1.2rem}
  .soc a{width:46px;height:46px}

  /* thoranam shrinks so it does not eat a third of the screen */
  .thoranam{height:58px}
  .thoranam__seal{width:40px;top:20px}

  /* footer */
  .foot__grid{gap:1.7rem}
  .foot__base{flex-direction:column;gap:.5rem}

  /* testimonials */
  .tst__i{padding:2.1rem 1.2rem 1.3rem}

  /* stop long words breaking the layout */
  h1,h2,h3,p,a{overflow-wrap:break-word}
}

@media (max-width:400px){
  .hero__acts .btn,.phero__acts .btn{font-size:.86rem}
  .mnav__links a{font-size:1.15rem;padding:.72rem .2rem}
  .mnav__in{padding-top:4.8rem}
  .stat b{font-size:2rem}
}

/* touch devices: no hover-only reveals, flip cards respond to tap */
@media (hover:none){
  .shot__b span{display:none}
  .gal figcaption{opacity:1;translate:0 0}
  .flip__in{transition:transform .6s var(--e-out)}
  .flip.on .flip__in{transform:rotateY(180deg)}
  .wa__tip{display:none}
}

/* images reserve their space so nothing jumps while loading */
.shot__pic,.band__pic > div,.gal figure,.hero__frame > div,.phero__arch > div{background:var(--sand-2)}

/* ---------- 32. Calendar slot bars ---------- */
.day{flex-direction:column;gap:3px}
.day__n{line-height:1}
.day__bars{display:flex;gap:3px}
.day__bars i{width:10px;height:3px;border-radius:2px;background:#E4D9C0;display:block}
.day__bars i.x{background:var(--gold)}
.day.busy .day__bars i{background:#C4B79C}
.day.sel .day__bars i{background:rgba(255,255,255,.45)}
.day.sel .day__bars i.x{background:var(--gold-lt)}
.day.part{border-color:var(--gold)}
.day.held{border-style:dashed;border-color:var(--gold)}
.slotnote{font-size:.88rem;color:var(--ink-soft);margin:0 0 .6rem}
.chips.slots{margin:0 0 1.2rem}
@media (max-width:760px){.day__bars i{width:9px}}

/* header must stay reachable above the open menu so the X can be tapped */
body.menu-open .nav{z-index:130;background:var(--sand);backdrop-filter:none;border-bottom-color:transparent}
body.menu-open .brand__txt b{color:var(--emerald)}

/* ---------- 33. Calendar legend (slot based) ---------- */
.legend{align-items:center;gap:.75rem 1.15rem}
.legend span{display:inline-flex;align-items:center}
.legend__key{color:var(--ink-soft)}
.legend__key b{display:inline-block;width:10px;height:3px;border-radius:2px;
  background:#E4D9C0;margin-right:3px}
.legend__key b:first-child{background:var(--gold)}
.legend__key b + b{margin-right:.5rem}
.legend i.lg{display:inline-block;margin-right:.42rem;vertical-align:middle}
.lg--taken{width:12px;height:3px;border-radius:2px;background:var(--gold)}
.lg--free{width:12px;height:3px;border-radius:2px;background:#E4D9C0}
.lg--full{width:12px;height:12px;border-radius:3px;background:var(--sand-2)}
.lg--held{width:12px;height:12px;border-radius:3px;background:var(--sand-2);
  border:1px dashed var(--gold)}