:root{
  /* ---- theme-independent ---- */
  --wa:        #1FA855;
  --wa-dark:   #189748;
  --danger:    #C6544A;

  /* Photo-led sections (hero, catering, dish cards) keep a dark overlay in BOTH
     themes, so anything sitting on them uses the --on-media tokens below. */
  --scrim:          14 11 9;
  --on-media:       #F4EBE0;
  --on-media-muted: #C3B2A0;
  --on-media-dim:   #9C8B79;
  --on-media-gold:  #D8AE6A;
  --media-tint-50:  rgb(var(--scrim) / .50);
  --media-tint-75:  rgb(var(--scrim) / .75);
  --media-tint-80:  rgb(var(--scrim) / .80);

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  /* DM Sans — the closest freely-licensed match to Uber Move and Pinterest Sans */
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: 1200px;
  --r: 4px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   DARK — Old Hyderabad at night: espresso, gold, candlelight
   ============================================================ */
:root[data-theme="dark"]{
  --bg:        #0F0C0A;
  --bg-2:      #16110E;
  --panel:     #1C1613;
  --panel-2:   #241C17;

  --gold:      #C9A227;
  --gold-2:    #E3C77A;
  --gold-deep: #8F7220;
  --gold-rgb:  201 162 39;
  --on-gold:   #16110B;

  --heading:   #F4EDE3;
  --cream:     #ECE3D7;
  --muted:     #9C8B7A;
  --muted-2:   #94836F;   /* 4.9:1 on panels — was 3.0:1 */

  --line:      rgb(var(--gold-rgb) / .15);
  --line-2:    rgb(var(--gold-rgb) / .30);

  --header-bg: rgb(15 12 10 / .92);
  --nav-bg:    #0F0C0A;
  --sticky-bg: rgb(15 12 10 / .95);
  --badge-bg:  rgb(var(--scrim) / .50);
  --tag-bg:    rgb(var(--scrim) / .80);
  --stat-bg:   rgb(var(--scrim) / .72);

  --shadow-lg:  0 24px 50px -20px rgb(0 0 0 / .72);
  --shadow-nav: 0 20px 40px rgb(0 0 0 / .5);
  --sheen:      rgb(255 255 255 / .5);

  color-scheme: dark;
}

/* ============================================================
   LIGHT — the wedding brochure: warm ivory, deep emerald, gold
   ============================================================ */
:root[data-theme="light"]{
  --bg:        #F7F3EC;
  --bg-2:      #EFE9DE;
  --panel:     #FFFFFF;
  --panel-2:   #FAF6EF;

  --gold:      #8A6620;   /* 4.7:1 on ivory, 5.3:1 on white — was 3.4:1 */
  --gold-2:    #6F521A;
  --gold-deep: #584014;
  --gold-rgb:  138 102 32;
  --on-gold:   #FFFBF2;

  --heading:   #14432A;   /* deep emerald carries the light theme */
  --cream:     #26211C;
  --muted:     #5E5346;
  --muted-2:   #6B6052;   /* 5.1:1 on the tinted band — was 3.9:1 */

  --line:      rgb(20 67 42 / .14);
  --line-2:    rgb(20 67 42 / .28);

  --header-bg: rgb(247 243 236 / .93);
  --nav-bg:    #F7F3EC;
  --sticky-bg: rgb(247 243 236 / .96);
  --badge-bg:  rgb(var(--scrim) / .50);
  --tag-bg:    rgb(var(--scrim) / .80);
  --stat-bg:   rgb(var(--scrim) / .72);

  --shadow-lg:  0 22px 44px -22px rgb(20 67 42 / .30);
  --shadow-nav: 0 20px 40px rgb(20 67 42 / .16);
  --sheen:      rgb(255 255 255 / .65);

  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:74px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.62;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }

/* grid and flex items default to min-width:auto, which lets a wide child push
   its track past the container. Everything here should shrink instead. */
.row2 > *, .form > *, .calc > *, .calc-left > *, .split > *,
.trust-grid > *, .menu-grid > *, .event-grid > *, .contact-inner > *,
.sample-inner > *, .foot-inner > *, .form-foot > *{ min-width:0; }

h1,h2{ font-family:var(--serif); font-weight:400; line-height:1.12; margin:0; letter-spacing:.01em; color:var(--heading); }
h3{ font-family:var(--serif); font-weight:400; line-height:1.12; margin:0; letter-spacing:.01em; }
h2{ font-size:clamp(2rem,6.2vw,3.4rem); }
h3{ font-size:1.05rem; font-family:var(--sans); font-weight:500; letter-spacing:.02em; }
p{ margin:0; }

.eyebrow{
  font-size:.7rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1rem;
}
.sec-lede{ color:var(--muted); font-size:1.02rem; line-height:1.8; max-width:56ch; }
.sec-head{ margin-bottom:3rem; }
.sec-head.center{ text-align:center; }
.sec-head.center .sec-lede{ margin-inline:auto; }

.rule{ display:flex; align-items:center; justify-content:center; gap:.7rem; margin:1.4rem auto; max-width:190px; }
.rule span{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line-2)); }
.rule span:last-child{ background:linear-gradient(270deg,transparent,var(--line-2)); }
.rule i{ width:7px; height:7px; border:1px solid var(--gold); transform:rotate(45deg); }

.section{ padding:clamp(4rem,10vw,7.5rem) 0; position:relative; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.9rem; border:1px solid transparent; border-radius:var(--r);
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  transition:all .35s var(--ease);
  text-align:center; min-width:0; max-width:100%;
}
.btn-gold{ background:var(--gold); color:var(--on-gold); border-color:var(--gold); }
.btn-gold:hover{ background:var(--gold-2); border-color:var(--gold-2); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--cream); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.btn-wa{ background:var(--wa); color:#fff; border-color:var(--wa); }
.btn-wa:hover{ background:var(--wa-dark); border-color:var(--wa-dark); transform:translateY(-2px); }
.btn-sm{ padding:.72rem 1.25rem; font-size:.68rem; white-space:nowrap; }
.btn-lg{ padding:1.15rem 2.6rem; font-size:.82rem; }
.btn-full{ width:100%; }
.arw{ transition:transform .35s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }
.wa-ico{ width:18px; height:18px; fill:currentColor; }

/* ---------------- Header ---------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
}
.site-header.scrolled{
  background:var(--header-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.header-inner{ display:flex; align-items:center; gap:2rem; height:74px; }

.logo{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
/* The supplied logo is a stacked lockup — mark over wordmark. Cropping a
   mark-only version slices the gold arch mid-curve, so the whole lockup is
   used instead; being near-square it is narrower than mark + live text was.
   Two-tone artwork, so each theme gets the variant that reads on its
   background: deep brown on ivory, cream on charcoal. */
.logo-lockup{ height:52px; width:auto; flex:none; display:block; }
[data-theme="dark"]  .logo-lockup-light{ display:none; }
[data-theme="light"] .logo-lockup-dark { display:none; }

.nav{ display:none; gap:2rem; }
.nav.open{
  display:flex; flex-direction:column; gap:0;
  position:absolute; top:100%; left:0; right:0;
  background:var(--nav-bg); /* fully opaque — the page must not read through the menu */
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-nav);
  padding:.6rem 20px 1.4rem;
}
.nav.open a{ padding:.85rem 0; border-bottom:1px solid var(--line); }
.nav.open a:last-child{ border-bottom:none; }
.nav.open a::after{ display:none; }
.nav a{
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  position:relative; padding:.3rem 0; transition:color .3s; white-space:nowrap;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .35s var(--ease);
}
.nav a:hover{ color:var(--cream); }
.nav a:hover::after{ width:100%; }
.header-cta{ display:none; }

.theme-toggle{ margin-left:auto; margin-right:.2rem; }
@media (min-width:900px){ .theme-toggle{ margin-left:.4rem; margin-right:0; } }

.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:0 8px; background:none; border:none; cursor:pointer;
}
.nav-toggle span{ height:1px; background:var(--cream); transition:transform .35s var(--ease), opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------------- Hero ---------------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding-bottom:clamp(3rem,9vw,6rem); padding-top:100px; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
/* oversized and offset so the parallax drift never uncovers an edge */
.hero-media img{ position:absolute; inset:-12% 0; width:100%; height:124%; object-fit:cover; object-position:60% center; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgb(var(--scrim) / .86) 0%, rgb(var(--scrim) / .30) 34%, rgb(var(--scrim) / .86) 78%, var(--bg) 100%),
    linear-gradient(90deg, rgb(var(--scrim) / .88) 0%, rgb(var(--scrim) / .35) 58%, rgb(var(--scrim) / .15) 100%);
}
.hero-inner{ position:relative; z-index:1; }

.hero-title{ font-size:clamp(2.7rem,12vw,6.2rem); font-weight:300; line-height:1.02; letter-spacing:-.01em; }
.hero-title span{ display:block; }
.hero-title .l2{ color:var(--gold); font-style:italic; font-weight:400; }
.hero-title .l3{ font-size:.44em; letter-spacing:.02em; color:var(--cream); margin-top:.45rem; }

.hero-sub{ color:var(--muted); max-width:46ch; margin-top:1.6rem; font-size:1rem; line-height:1.8; }

.hero-badge{
  display:inline-flex; align-items:center; gap:.7rem; margin-top:1.8rem;
  padding:.7rem 1.4rem; border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--badge-bg); backdrop-filter:blur(6px);
}
.hb-num{ font-family:var(--serif); font-size:1.7rem; color:var(--gold); line-height:1; }
.hb-dash{ width:16px; height:1px; background:var(--line-2); }
.hb-label{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-left:.4rem; }

/* The promise, stated above the fold and linked to the section that proves it.
   Sits on the hero image, so it uses the --on-media tokens. */
.hero-promise{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.4rem;
  padding:.62rem 1.05rem; border-radius:999px;
  border:1px solid rgb(216 174 106 / .45); background:rgb(20 16 13 / .48);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-size:.76rem; letter-spacing:.06em; color:var(--on-media);
  text-decoration:none; transition:border-color .35s var(--ease), background .35s var(--ease);
}
.hero-promise:hover{ border-color:var(--on-media-gold); background:rgb(20 16 13 / .68); }
.hero-promise .arw{ color:var(--on-media-gold); }
.hero-promise:hover .arw{ transform:translateX(4px); }
.hp-dot{
  flex:none; width:7px; height:7px; border-radius:50%; background:var(--on-media-gold);
  box-shadow:0 0 0 4px rgb(216 174 106 / .18);
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; }

/* ---------------- Trust strip ---------------- */
.trust{ background:var(--bg-2); border-block:1px solid var(--line); }
.trust-grid{ display:grid; gap:0; }
.trust-item{ display:flex; gap:1rem; padding:1.9rem 0; border-bottom:1px solid var(--line); }
.trust-item:last-child{ border-bottom:none; }
.tico{ width:30px; height:30px; flex:none; fill:none; stroke:var(--gold); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; margin-top:2px; }
.trust-item h3{ color:var(--heading); margin-bottom:.35rem; }
.trust-item p{ color:var(--muted-2); font-size:.86rem; line-height:1.65; }

/* ---------------- Event types ---------------- */
.event-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; }
.event-grid .event-chip:last-child{ grid-column:1 / -1; }
.event-chip{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding:1.5rem .8rem; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer; text-align:center;
  transition:all .35s var(--ease);
}
.event-chip svg{ width:28px; height:28px; fill:none; stroke:var(--gold); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--ease); }
.event-chip span{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); transition:color .3s; }
.event-chip:hover{ border-color:var(--line-2); background:var(--panel-2); transform:translateY(-3px); }
.event-chip:hover svg{ transform:scale(1.08); }
.event-chip:hover span{ color:var(--cream); }
.event-chip.active{ border-color:var(--gold); background:var(--panel-2); }
.event-chip.active span{ color:var(--gold); }

/* ---------------- Menu ---------------- */
.menu-sec{ background:var(--bg-2); }
.menu-grid{ display:grid; gap:1.4rem; }
.dish{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:all .45s var(--ease);
  display:flex; flex-direction:column;
}
/* movement on hover is owned by GSAP (see animations.js) so the two don't fight */
.dish:hover{ border-color:var(--line-2); }
.dish-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.dish-media img{ width:100%; height:100%; object-fit:cover; }
.dish-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgb(var(--scrim) / .75)); }
.dish-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:.35rem .7rem; background:var(--tag-bg); border:1px solid rgb(var(--gold-rgb) / .3);
  border-radius:2px; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.dish-urdu{
  position:absolute; bottom:12px; right:16px; z-index:2;
  font-family:var(--serif); font-size:1.5rem; color:var(--gold-2); opacity:.85;
}
.dish-body{ padding:1.5rem 1.4rem 1.6rem; flex:1; display:flex; flex-direction:column; }
.dish-name{ font-family:var(--serif); font-size:1.5rem; font-weight:500; color:var(--heading); margin-bottom:.6rem; }
.dish-desc{ color:var(--muted-2); font-size:.88rem; line-height:1.7; }
.dish-incl{
  display:flex; align-items:center; gap:.5rem; margin-top:auto; padding-top:1.1rem;
  border-top:1px solid var(--line); font-size:.72rem; letter-spacing:.06em; color:var(--gold);
}
.dish-incl::before{ content:''; width:5px; height:5px; border:1px solid var(--gold); transform:rotate(45deg); flex:none; }
.dish-price{ display:flex; align-items:baseline; gap:.35rem; margin-top:1rem; }
.dish-price strong{ font-family:var(--serif); font-size:1.5rem; font-weight:500; color:var(--gold); }
.dish-price span{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }

/* ---------------- The speciality deck ---------------- */
/* A fanned hand of cards. JS owns each card's transform (x/y/rotate/scale),
   so nothing in here may set `transform` on .deck-card itself — the hover
   lift is delegated to .dc-inner to keep the two off each other's toes. */
.deck{ display:grid; gap:2rem; }
.deck-stage{
  position:relative; height:330px; display:grid; place-items:center;
  perspective:1200px; touch-action:pan-y;
  /* the fan is wider than a phone; clip rather than push the page sideways */
  overflow-x:clip;
}
.deck-card{
  position:absolute; width:186px; height:258px; padding:0; border:none;
  background:none; cursor:pointer; will-change:transform, opacity;
  -webkit-tap-highlight-color:transparent;
}
.dc-inner{
  position:relative; display:block; width:100%; height:100%;
  border-radius:12px; overflow:hidden;
  border:1px solid var(--line-2); background:var(--bg-2);
  box-shadow:0 18px 40px -18px rgb(0 0 0 / .55);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease),
              border-color .45s var(--ease), filter .45s var(--ease);
}
.deck-card:hover .dc-inner{ transform:translateY(-10px); box-shadow:0 26px 54px -20px rgb(0 0 0 / .65); }
/* Cards stay fully opaque — fading them would let the hand read through
   itself. Depth comes from dimming the unselected ones instead. */
.deck-card:not(.is-active) .dc-inner{ filter:brightness(.55) saturate(.8); }
.deck-card:not(.is-active):hover .dc-inner{ filter:brightness(.78) saturate(.9); }
.deck-card.is-active .dc-inner{
  border-color:rgb(var(--gold-rgb) / .55);
  box-shadow:0 26px 60px -22px rgb(0 0 0 / .7), 0 0 0 1px rgb(var(--gold-rgb) / .22);
}
.deck-card:focus-visible .dc-inner{ outline:2px solid var(--gold); outline-offset:3px; }

.dc-media{ position:absolute; inset:0; display:block; }
.dc-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease);
}
.deck-card.is-active .dc-media img{ transform:scale(1.06); }
.dc-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgb(var(--scrim) / .10) 0%, transparent 34%,
             rgb(var(--scrim) / .55) 72%, rgb(var(--scrim) / .88) 100%);
}
.dc-tag{
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.38rem .6rem; border-radius:999px;
  background:rgb(20 16 13 / .62); border:1px solid rgb(216 174 106 / .45);
  color:var(--on-media-gold); backdrop-filter:blur(6px);
}
.dc-foot{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:grid; gap:.25rem; padding:1rem 1.05rem 1.15rem; text-align:left;
}
.dc-urdu{ font-size:.92rem; color:var(--on-media-gold); opacity:.9; }
.dc-name{
  font-family:var(--serif); font-size:1.02rem; font-weight:500;
  line-height:1.25; color:var(--on-media);
}

.deck-panel{ text-align:center; display:grid; gap:.55rem; justify-items:center; }
.deck-urdu{ font-size:1.15rem; color:var(--gold); }
.deck-name{ font-family:var(--serif); font-size:1.75rem; font-weight:500; color:var(--heading); }
.deck-desc{ color:var(--muted); font-size:.95rem; line-height:1.75; max-width:52ch; }
.deck-incl{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}
.deck-price{ display:flex; align-items:baseline; gap:.35rem; margin-top:.3rem; }
.deck-price strong{ font-family:var(--serif); font-size:1.6rem; font-weight:500; color:var(--gold); }
.deck-price span{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }

.deck-nav{ display:flex; align-items:center; justify-content:center; gap:1.1rem; }
.deck-arrow{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); background:transparent; cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.deck-arrow:hover{ border-color:var(--gold); background:rgb(var(--gold-rgb) / .10); }
.deck-arrow svg{
  width:17px; height:17px; fill:none; stroke:var(--gold);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.deck-dots{ display:flex; align-items:center; gap:.5rem; }
.deck-dot{
  width:7px; height:7px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-2); background:transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), width .3s var(--ease);
}
.deck-dot.is-on{ width:22px; border-radius:999px; background:var(--gold); border-color:var(--gold); }

/* ---------------- The mutton guarantee ---------------- */
/* Deliberately the loudest block on the page: it carries the promise the
   business competes on, so it gets the gold frame and the only oversized
   numeral outside the calculator. */
.guarantee{ background:var(--bg-2); border-block:1px solid var(--line); }
.guar-inner{ display:grid; gap:2.5rem; align-items:center; }

.guar-seal{
  position:relative; text-align:center; padding:2.4rem 1.6rem;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:
    radial-gradient(120% 100% at 50% 0%, rgb(var(--gold-rgb) / .10) 0%, transparent 70%),
    var(--bg);
}
.gs-eyebrow{
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.1rem;
}
.gs-ratio{ display:flex; align-items:baseline; justify-content:center; gap:.5rem; }
.gs-num{
  font-family:var(--serif); font-weight:500; font-size:clamp(3.4rem,12vw,5rem);
  line-height:1; color:var(--heading);
}
.gs-num.gs-gold{ color:var(--gold); }
.gs-colon{
  font-family:var(--serif); font-size:clamp(2rem,7vw,3rem);
  line-height:1; color:var(--gold-deep); transform:translateY(-.15em);
}
.gs-legend{
  margin-top:.9rem; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted-2);
}
.gs-rule{ display:block; width:52px; height:1px; margin:1.4rem auto; background:var(--line-2); }
.gs-foot{ font-size:.86rem; line-height:1.7; color:var(--muted); max-width:30ch; margin-inline:auto; }
.gs-foot strong{ font-family:var(--serif); font-size:1.25rem; font-weight:500; color:var(--gold); }

.guar-body .rule{ margin-inline:0; }

.guar-points{ list-style:none; margin:2rem 0; padding:0; display:grid; gap:1.4rem; }
.guar-points li{ display:flex; gap:1rem; align-items:flex-start; }
.gp-tick{
  flex:none; width:26px; height:26px; margin-top:2px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line-2); background:rgb(var(--gold-rgb) / .10);
}
.gp-tick svg{
  width:14px; height:14px; fill:none; stroke:var(--gold);
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
.guar-points h3{ color:var(--heading); margin-bottom:.3rem; }
.guar-points p{ color:var(--muted-2); font-size:.86rem; line-height:1.65; }

/* ---------------- What's included ---------------- */
.split{ display:grid; gap:2.5rem; align-items:center; }
.split-media{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; }
.split-media img{ position:absolute; inset:-5% 0; width:100%; height:110%; object-fit:cover; }
.split-media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line);
  /* bright studio backdrops would otherwise punch a white hole in the page */
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 35%, rgb(var(--scrim) / .55) 100%),
    linear-gradient(180deg, rgb(var(--scrim) / .30) 0%, transparent 25%, transparent 70%, rgb(var(--scrim) / .45) 100%);
  mix-blend-mode:multiply;
}

.incl-list{ list-style:none; margin:2rem 0; padding:0; display:grid; gap:1.4rem; }
.incl-list li{ display:flex; gap:1.1rem; align-items:flex-start; }
.incl-n{
  font-family:var(--serif); font-size:.9rem; color:var(--gold); flex:none;
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%;
}
.incl-list h3{ color:var(--heading); margin-bottom:.3rem; }
.incl-list p{ color:var(--muted-2); font-size:.86rem; line-height:1.65; }

/* ---------------- Calculator ---------------- */
.calc-sec{ background:var(--bg-2); }
.calc{ display:grid; gap:1.6rem; }
.calc-left{ display:grid; gap:1.6rem; }
.calc-block{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:1.7rem 1.4rem; }
.calc-label{ display:block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1.3rem; }

.stepper{ display:flex; align-items:stretch; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; }
.step{
  width:58px; flex:none; background:var(--panel-2); border:none; cursor:pointer;
  font-size:1.5rem; font-weight:300; color:var(--gold); transition:background .3s;
}
.step:hover{ background:rgb(var(--gold-rgb) / .14); }
.step-value{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem .5rem; }
.step-value input{
  width:100%; background:none; border:none; outline:none; text-align:center;
  font-family:var(--serif); font-size:2.6rem; font-weight:500; color:var(--cream); line-height:1;
  -moz-appearance:textfield;
}
.step-value input::-webkit-outer-spin-button,
.step-value input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.step-unit{ font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2); margin-top:.4rem; }

.slider{ -webkit-appearance:none; appearance:none; width:100%; height:2px; margin:1.7rem 0 .5rem; background:var(--line-2); border-radius:2px; outline:none; cursor:pointer; }
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--gold); border:3px solid var(--bg-2); box-shadow:0 0 0 1px var(--gold); cursor:pointer;
}
.slider::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:var(--gold); border:3px solid var(--bg-2); box-shadow:0 0 0 1px var(--gold); cursor:pointer;
}
.slider-ends{ display:flex; justify-content:space-between; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); }

.quick-picks{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.qp{
  padding:.55rem 1rem; background:transparent; border:1px solid var(--line);
  border-radius:var(--r); font-size:.78rem; color:var(--muted); cursor:pointer;
  transition:all .3s var(--ease);
}
.qp:hover{ border-color:var(--line-2); color:var(--cream); }
.qp.active{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); font-weight:500; }
.calc-note{ margin-top:1rem; font-size:.76rem; color:var(--gold); min-height:1.2em; }

.item-picks{ display:grid; gap:.7rem; }
.item-pick{
  display:flex; align-items:center; gap:1rem; padding:.9rem 1rem;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer; transition:all .3s var(--ease); text-align:left;
}
.item-pick:hover{ border-color:var(--line-2); }
.item-pick.active{ border-color:var(--gold); background:rgb(var(--gold-rgb) / .09); }
.ip-box{
  width:20px; height:20px; flex:none; border:1px solid var(--line-2); border-radius:2px;
  display:grid; place-items:center; transition:all .3s;
}
.ip-box svg{ width:12px; height:12px; fill:none; stroke:var(--on-gold); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .2s; }
.item-pick.active .ip-box{ background:var(--gold); border-color:var(--gold); }
.item-pick.active .ip-box svg{ opacity:1; }
.ip-img{ width:46px; height:46px; flex:none; border-radius:2px; object-fit:cover; }
.ip-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.3rem; }
.ip-name{ font-size:.88rem; color:var(--cream); line-height:1.3; }
.ip-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.ip-rate{ font-size:.72rem; color:var(--muted-2); }
.ip-line{ font-family:var(--serif); font-size:1.15rem; color:var(--gold); white-space:nowrap; }

/* Quote card */
.quote-card{
  background:linear-gradient(170deg,var(--panel-2),var(--panel));
  border:1px solid var(--line-2); border-radius:var(--r); padding:1.9rem 1.5rem;
  position:sticky; top:94px;
}
.qc-eyebrow{ font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.qc-total{ display:flex; align-items:baseline; gap:.2rem; margin-top:.9rem; font-family:var(--serif); font-weight:500; color:var(--cream); }
.qc-cur{ font-size:1.6rem; color:var(--gold); }
#qcTotal{ font-size:clamp(2.6rem,10vw,3.4rem); line-height:1; letter-spacing:-.01em; }
.qc-for{ font-size:.78rem; letter-spacing:.1em; color:var(--muted-2); margin-top:.4rem; }

.qc-lines{ margin:1.6rem 0; padding:1.2rem 0; border-block:1px solid var(--line); display:grid; gap:.65rem; }
.qc-line{ display:flex; justify-content:space-between; gap:1rem; font-size:.84rem; }
.qc-line span{ color:var(--muted); }
.qc-line strong{ font-weight:400; color:var(--cream); }
.qc-line.free strong{ color:var(--gold); }
.qc-empty{ font-size:.84rem; color:var(--muted-2); font-style:italic; }

.qc-qty{ margin-bottom:1.5rem; }
.qc-sub{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:.7rem; }
.qc-qty ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.qc-qty li{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--muted); }
.qc-qty li strong{ color:var(--cream); font-weight:400; }

#qcWhatsapp{ margin-top:.7rem; }
.qc-disclaimer{ margin-top:1.1rem; font-size:.7rem; line-height:1.6; color:var(--muted-2); }

/* ---------------- Catering ---------------- */
.catering{ position:relative; overflow:hidden; }
.cat-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.cat-media img{ position:absolute; inset:-15% 0; width:100%; height:130%; object-fit:cover; }
.cat-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,var(--bg) 0%,rgb(var(--scrim) / .82) 30%,rgb(var(--scrim) / .88) 70%,var(--bg) 100%); }
.cat-inner{ position:relative; z-index:1; text-align:center; }
.cat-title{ font-size:clamp(2rem,6.5vw,3.7rem); }
.cat-lede{ color:var(--muted); max-width:60ch; margin:1.6rem auto 0; line-height:1.85; }

.cat-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:3rem 0; background:var(--line); border:1px solid var(--line); }
.cat-stats div{ background:var(--stat-bg); padding:1.6rem .8rem; display:flex; flex-direction:column; gap:.4rem; }
.cat-stats strong{ font-family:var(--serif); font-size:2.4rem; font-weight:500; color:var(--gold); line-height:1; }
.cat-stats span{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); }
.cat-cta{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }

/* ---------------- Story ---------------- */
.story-points{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem 1.2rem; margin-top:2.2rem; }
.story-points h3{ color:var(--gold); font-family:var(--serif); font-size:1.15rem; font-weight:500; margin-bottom:.3rem; }
.story-points p{ font-size:.82rem; color:var(--muted-2); line-height:1.6; }
.about .sec-lede + .sec-lede{ margin-top:1.1rem; }

/* ---------------- Sample ---------------- */
.sample{ background:var(--bg-2); }
.sample-inner{ display:grid; gap:2.5rem; align-items:start; }
.tick-list{ list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:.8rem; }
.tick-list li{ position:relative; padding-left:1.7rem; font-size:.88rem; color:var(--muted); }
.tick-list li::before{
  content:''; position:absolute; left:0; top:.5em; width:8px; height:8px;
  border:1px solid var(--gold); transform:rotate(45deg);
}

/* ---------------- Forms ---------------- */
.form{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:1.8rem 1.4rem; display:grid; gap:1.15rem; }
.quote-form{ max-width:860px; margin-inline:auto; padding:2rem 1.4rem; }
.field{ display:grid; gap:.5rem; }
.field label{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.field label em{ color:var(--gold); font-style:normal; }
.field input,.field select,.field textarea{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  padding:.85rem 1rem; font-size:.92rem; font-weight:300; outline:none;
  transition:border-color .3s, background .3s; width:100%;
}
.field textarea{ resize:vertical; line-height:1.6; }
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-2); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--gold); background:var(--panel-2); }
.field input.invalid,.field select.invalid{ border-color:var(--danger); }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 19px) center,calc(100% - 13px) center;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
}
.field input[type="date"]{ color-scheme:dark; }
.row2{ display:grid; gap:1.15rem; }
.inline-chk{ display:flex !important; align-items:center; gap:.5rem; font-size:.7rem !important; text-transform:none !important; letter-spacing:.04em !important; color:var(--muted-2) !important; cursor:pointer; margin-top:.15rem; }
.inline-chk input{ width:14px; height:14px; accent-color:var(--gold); }

.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  padding:.6rem 1.05rem; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r); font-size:.78rem; color:var(--muted); cursor:pointer;
  transition:all .3s var(--ease);
}
.chip:hover{ border-color:var(--line-2); color:var(--cream); }
.chip.active{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); font-weight:500; }

.chk-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.chk{
  display:flex; align-items:center; gap:.65rem; padding:.8rem .9rem;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  font-size:.82rem; color:var(--muted); cursor:pointer; transition:all .3s var(--ease);
  text-align:left;
}
.chk:hover{ border-color:var(--line-2); }
.chk.active{ border-color:var(--gold); color:var(--cream); background:rgb(var(--gold-rgb) / .09); }
.chk-box{ width:17px; height:17px; flex:none; border:1px solid var(--line-2); border-radius:2px; display:grid; place-items:center; }
.chk-box svg{ width:11px; height:11px; fill:none; stroke:var(--on-gold); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .2s; }
.chk.active .chk-box{ background:var(--gold); border-color:var(--gold); }
.chk.active .chk-box svg{ opacity:1; }

.form-foot{ display:grid; gap:1.1rem; margin-top:.6rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.form-est{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.form-est span{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); }
.form-est strong{ font-family:var(--serif); font-size:1.9rem; font-weight:500; color:var(--gold); }
.form-note{ font-size:.72rem; color:var(--muted-2); }
.form-note.center{ text-align:center; }

/* ---------------- Contact ---------------- */
.contact-inner{ display:grid; gap:2.5rem; align-items:center; }
.contact-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.c-card{
  padding:1.4rem 1.2rem; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); display:grid; gap:.5rem; transition:all .35s var(--ease);
}
a.c-card:hover{ border-color:var(--gold); transform:translateY(-3px); }
.c-label{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.c-card strong{ font-weight:400; font-size:.9rem; color:var(--heading); word-break:break-word; }

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--bg-2); border-top:1px solid var(--line); padding-top:3.5rem; padding-bottom:100px; }
.foot-inner{ display:grid; gap:2.2rem; padding-bottom:2.5rem; }
.foot-logo{ width:auto; height:132px; display:block; margin-left:-6px; }
[data-theme="dark"]  .foot-logo-light{ display:none; }
[data-theme="light"] .foot-logo-dark { display:none; }
.foot-blurb{ color:var(--muted-2); font-size:.84rem; line-height:1.7; margin-top:1rem; max-width:38ch; }
.foot-nav{ display:grid; gap:.7rem; }
.foot-nav a{ font-size:.84rem; color:var(--muted); transition:color .3s; }
.foot-nav a:hover{ color:var(--gold); }
.foot-contact{ display:flex; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; gap:1.4rem; }
.foot-contact a{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); border-bottom:1px solid var(--line-2); padding-bottom:3px; }
.foot-bottom{
  display:grid; gap:.6rem; padding-top:1.8rem; border-top:1px solid var(--line);
  font-size:.72rem; color:var(--muted-2);
}

/* ---------------- Sticky mobile bar ---------------- */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; gap:.6rem; padding:.7rem 16px calc(.7rem + env(safe-area-inset-bottom));
  background:var(--sticky-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.sticky-bar.show{ transform:translateY(0); }
.sb-quote{
  flex:1; display:grid; place-items:center; padding:.95rem;
  background:var(--gold); color:var(--on-gold); border-radius:var(--r);
  font-size:.76rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
}
.sb-wa{ width:52px; flex:none; display:grid; place-items:center; background:var(--wa); border-radius:var(--r); }
.sb-wa svg{ width:24px; height:24px; fill:#fff; }

/* ============================================================
   MOTION
   Initial hidden states live under .anim-pending only, so a failed
   or blocked GSAP never leaves the page empty.
   ============================================================ */

/* generic scroll-reveal targets */
.anim-pending [data-anim]{ opacity:0; }

/* masked line reveals: each line sits in its own clipping box */
.line-mask{ display:block; overflow:hidden; }
.line-inner{ display:block; will-change:transform; }
.anim-pending .line-inner{ transform:translateY(105%); }

/* word reveals */
.word{ display:inline-block; will-change:transform; }
.word-mask{ display:inline-block; overflow:hidden; vertical-align:top; }

/* hero media settles out of a slow push-in */
.anim-pending .hero-media img{ transform:scale(1.14); }

/* parallax layers need room to travel without showing an edge */
.hero-media img, .cat-media img{ will-change:transform; }
.split-media img{ will-change:transform; }

/* --- micro-interactions --- */

/* gold sweep across the primary button */
.btn-gold{ position:relative; overflow:hidden; isolation:isolate; }
.btn-gold::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 20%, var(--sheen) 50%, transparent 80%);
  transform:translateX(-120%);
  transition:transform .75s var(--ease);
}
.btn-gold:hover::before{ transform:translateX(120%); }

/* ghost button fills from the bottom */
.btn-ghost{ position:relative; overflow:hidden; isolation:isolate; }
.btn-ghost::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--gold); transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--ease);
}
.btn-ghost:hover{ color:var(--on-gold); border-color:var(--gold); }
.btn-ghost:hover::before{ transform:scaleY(1); }

/* dish cards lift with a warm rim */
.dish{ will-change:transform; }
.dish:hover{ box-shadow:var(--shadow-lg), 0 0 0 1px var(--line-2); }

/* event chips get a soft gold wash behind the icon */
.event-chip{ position:relative; overflow:hidden; }
.event-chip::before{
  content:''; position:absolute; left:50%; top:38%; width:120px; height:120px;
  margin:-60px 0 0 -60px; border-radius:50%;
  background:radial-gradient(circle, rgb(var(--gold-rgb) / .16), transparent 65%);
  transform:scale(0); transition:transform .55s var(--ease);
}
.event-chip:hover::before, .event-chip.active::before{ transform:scale(1); }

/* the estimate figure flips through digits, so it must not reflow */
#qcTotal{ font-variant-numeric:tabular-nums; }
.cat-stats strong{ font-variant-numeric:tabular-nums; }

/* quick-pick and chip press feedback */
.qp:active, .chip:active, .chk:active, .item-pick:active, .event-chip:active{ transform:scale(.97); }
.qp, .chip, .chk, .item-pick{ will-change:transform; }

/* stepper buttons */
.step{ transition:background .3s, color .2s; }
.step:active{ background:rgb(var(--gold-rgb) / .24); }




/* ============================================================
   SPLASH
   Only ever present when the boot script added .splash-on. The CSS
   keyframe below clears it on its own, so a JavaScript failure can
   never leave a customer staring at a locked screen.
   ============================================================ */
.splash{ display:none; }

.splash-on .splash{
  display:grid; place-items:center;
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  animation:splash-failsafe .6s ease 4.2s forwards;
}
.splash-on{ overflow:hidden; }
.splash-on body{ overflow:hidden; }

@keyframes splash-failsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

.splash-inner{ display:grid; justify-items:center; gap:1.8rem; padding:2rem; }

.splash-mark{
  width:92px; height:115px;
  stroke:var(--gold); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.splash-mark .sp-dot{ fill:var(--gold); stroke:none; }

.splash-word{ display:grid; justify-items:center; gap:.75rem; text-align:center; }
.splash-name{
  font-family:var(--serif); font-size:clamp(1.9rem,7vw,2.7rem); font-weight:500;
  letter-spacing:.06em; color:var(--heading); line-height:1;
}
.splash-rule{ display:block; width:120px; height:1px; background:var(--line-2); position:relative; }
.splash-rule i{
  position:absolute; inset:0 auto 0 0; width:100%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform-origin:center;
}
.splash-tag{
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}

.splash-skip{
  position:absolute; right:20px; bottom:calc(20px + env(safe-area-inset-bottom));
  background:none; border:none; cursor:pointer;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-2); padding:.6rem;
  transition:color .3s;
}
.splash-skip:hover{ color:var(--gold); }

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.theme-toggle{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  background:none; border:1px solid var(--line); border-radius:50%;
  cursor:pointer; padding:0;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.theme-toggle:hover{ border-color:var(--line-2); background:rgb(var(--gold-rgb) / .08); }
.theme-toggle svg{
  width:17px; height:17px; fill:none;
  stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.tt-sun, .tt-moon{ transform-origin:12px 12px; }
[data-theme="dark"]  .tt-sun { display:none; }
[data-theme="light"] .tt-moon{ display:none; }

/* Before it picks up a background the header floats over the dark hero
   photograph, so it must use the media palette — otherwise the light
   theme's emerald wordmark sits unreadable on a dark image. */
.site-header:not(.scrolled) .logo-lockup-light{ display:none; }
.site-header:not(.scrolled) .logo-lockup-dark { display:block; }
.site-header:not(.scrolled) .nav a       { color:var(--on-media-muted); }
.site-header:not(.scrolled) .nav a:hover { color:var(--on-media); }
.site-header:not(.scrolled) .theme-toggle{ border-color:rgb(216 174 106 / .32); }
.site-header:not(.scrolled) .theme-toggle svg{ stroke:var(--on-media-gold); }
.site-header:not(.scrolled) .nav-toggle span { background:var(--on-media); }
.site-header:not(.scrolled) .header-cta{
  background:#D8AE6A; border-color:#D8AE6A; color:#16110B;
}

/* ============================================================
   ON-MEDIA TEXT
   The hero, the catering band and the dish photos keep their dark
   overlay in both themes, so whatever sits on them must stay light
   regardless of which theme is active.
   ============================================================ */
.hero .eyebrow,
.catering .eyebrow          { color:var(--on-media-gold); }
.hero-title,
.hero-title .l1,
.hero-title .l3,
.cat-title                  { color:var(--on-media); }
.hero-title .l2             { color:var(--on-media-gold); }
.hero-sub,
.cat-lede                   { color:var(--on-media-muted); }
.hb-num                     { color:var(--on-media-gold); }
.hb-label                   { color:var(--on-media-dim); }
.hero-badge                 { border-color:rgb(216 174 106 / .34); }
.dish-tag                   { color:var(--on-media-gold); }
.dish-urdu                  { color:var(--on-media-gold); }
.cat-stats                  { background:rgb(216 174 106 / .18); border-color:rgb(216 174 106 / .18); }
.cat-stats strong           { color:var(--on-media-gold); }
.cat-stats span             { color:var(--on-media-dim); }

/* ghost buttons on media need the light treatment too */
.hero-cta .btn-ghost,
.cat-cta .btn-ghost{ color:var(--on-media); border-color:rgb(216 174 106 / .38); }
.hero-cta .btn-ghost:hover,
.cat-cta .btn-ghost:hover{ color:#16110B; border-color:#D8AE6A; }
.hero-cta .btn-ghost::before,
.cat-cta .btn-ghost::before{ background:#D8AE6A; }

/* the gold CTA keeps its warm gold on media even in the light theme */
.hero-cta .btn-gold,
.cat-cta .btn-gold{ background:#D8AE6A; border-color:#D8AE6A; color:#16110B; }
.hero-cta .btn-gold:hover,
.cat-cta .btn-gold:hover{ background:#E9D2A6; border-color:#E9D2A6; }

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (max-width:520px){
  .hero-promise{ font-size:.7rem; padding:.55rem .85rem; line-height:1.45; text-align:left; }
}

@media (max-width:399px){
  .btn{ padding:.9rem 1.2rem; letter-spacing:.1em; }
  .logo{ gap:.5rem; }
  .logo-lockup{ height:44px; }
  .theme-toggle{ width:33px; height:33px; }
  .theme-toggle svg{ width:15px; height:15px; }
  .nav-toggle{ width:34px; padding:0 6px; }
  .btn-lg{ padding:1.05rem 1.2rem; font-size:.76rem; }
  .hero-cta .btn, .cat-cta .btn{ width:100%; }
}

@media (min-width:600px){
  .deck-stage{ height:400px; }
  .deck-card{ width:236px; height:320px; }
  .row2{ grid-template-columns:1fr 1fr; }
  .event-grid{ grid-template-columns:repeat(4,1fr); }
  .event-grid .event-chip:last-child{ grid-column:auto; }
  .menu-grid{ grid-template-columns:repeat(2,1fr); }
  .cat-stats{ grid-template-columns:repeat(4,1fr); }
  .chk-grid{ grid-template-columns:repeat(2,1fr); }
  .form{ padding:2.2rem 2rem; }
  .quote-form{ padding:2.5rem 2.4rem; }
  .foot-bottom{ grid-template-columns:1fr auto; }
}

@media (min-width:900px){
  html{ scroll-padding-top:84px; }
  .header-inner{ height:84px; gap:1.25rem; }
  .logo-lockup{ height:62px; }
  .nav{ display:flex; gap:1.35rem; }
  .nav.open{ position:static; flex-direction:row; gap:1.35rem; padding:0; background:none; border:none; box-shadow:none; }
  .nav.open a{ padding:.3rem 0; border-bottom:none; }
  .nav.open a::after{ display:block; }
  .header-cta{ display:inline-flex; }
  .theme-toggle{ margin-left:.4rem; }
  .nav-toggle{ display:none; }

  .hero{ align-items:center; }
  .hero-inner{ max-width:680px; }
  .hero-media img{ object-position:70% center; }
  .hero-scrim{
    background:
      linear-gradient(90deg, rgb(var(--scrim) / .95) 0%, rgb(var(--scrim) / .72) 42%, rgb(var(--scrim) / .10) 78%),
      linear-gradient(180deg, rgb(var(--scrim) / .55) 0%, transparent 30%, rgb(var(--scrim) / .55) 88%, var(--bg) 100%);
  }

  .trust-grid{ grid-template-columns:repeat(4,1fr); gap:0; }
  .trust-item{ flex-direction:column; padding:2.6rem 1.7rem; border-bottom:none; border-right:1px solid var(--line); }
  .trust-item:first-child{ padding-left:0; }
  .trust-item:last-child{ border-right:none; padding-right:0; }

  .event-grid{ grid-template-columns:repeat(7,1fr); }
  .menu-grid{ grid-template-columns:repeat(4,1fr); gap:1.2rem; }

  .deck-stage{ height:470px; }
  .deck-card{ width:268px; height:368px; }
  .deck{ gap:2.6rem; }
  .guar-inner{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:4rem; }
  .split{ grid-template-columns:1fr 1fr; gap:4.5rem; }
  .split.reverse .split-media{ order:2; }
  .split-media{ aspect-ratio:3/4; }

  .calc{ grid-template-columns:1.25fr .85fr; gap:2rem; align-items:start; }
  .calc-block{ padding:2.2rem 2rem; }
  .quote-card{ padding:2.3rem 2rem; }

  .sample-inner{ grid-template-columns:.9fr 1.1fr; gap:4rem; }
  .contact-inner{ grid-template-columns:1fr 1fr; gap:4rem; }
  .contact-cards{ gap:1rem; }

  .form-foot{ grid-template-columns:1fr auto; align-items:center; }
  .form-est{ justify-content:flex-start; gap:1.2rem; }

  .foot-inner{ grid-template-columns:1.6fr 1fr 1fr; gap:3rem; }
  .site-footer{ padding-bottom:3.5rem; }
  .sticky-bar{ display:none; }
}

@media (min-width:1100px){
  .menu-grid{ gap:1.5rem; }
  .split{ gap:6rem; }
  .nav{ gap:1.9rem; }
  .nav.open{ gap:1.9rem; }
  .nav a{ font-size:.76rem; letter-spacing:.1em; }
  .header-inner{ gap:2rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .anim-pending [data-anim],
  .anim-pending .line-inner,
  .anim-pending .hero-media img{ opacity:1 !important; transform:none !important; }
  .splash-on .splash{ display:none !important; }
  .splash-on, .splash-on body{ overflow:auto; }
}