/* ============================================================================
   Velan Sweets & Bakery - Design System
   velansweets.in | hand-rolled, dependency-free, fully responsive
   ---------------------------------------------------------------------------
   01 Reset & tokens      06 Hero            11 Coffee Works
   02 Typography          07 Trust strip     12 Locations
   03 Layout              08 About           13 Contact & map
   04 Buttons & atoms     09 Menu            14 Footer & floating actions
   05 Header & nav        10 Gallery         15 Motion & responsive
   ========================================================================= */

/* ==========================================================================
   01 - RESET & TOKENS
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  /* The closed drawer is position:fixed and parked at translateX(100%),
     i.e. fully outside the viewport. overflow-x on <body> alone does NOT
     clip fixed-position descendants, so the document grew ~310px wider than
     a phone screen, the page panned sideways and the header was cut off.
     Clipping at the root element fixes it.
     `hidden` first as a fallback for Safari 15 and older, which do not
     understand `clip`; `clip` is preferred because it does not turn the
     root into a scroll container, so position:sticky keeps working. */
  overflow-x: hidden;
  overflow-x: clip;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

ul[class], ol[class] { list-style: none; padding: 0; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a { color: inherit; text-decoration: none; }

:root {
  /* ------------------------------------------------------------------
     Palette sampled straight out of the logo artwork:
       #ba0707  the red field behind both the deity mark and the wordmark
       #f8f002  the yellow of the "Sweets & Bakery" lettering
       #e6b269  the gold of the jewellery in the deity portrait
     Everything below is a tint or shade of those three.
     ------------------------------------------------------------------ */
  --red-900: #7d0404;
  --red-800: #960606;
  --red-700: #ab0707;
  --red-600: #ba0707;   /* BRAND RED - the exact value inside both logo PNGs */
  --red-500: #d81414;
  --red-400: #f02020;
  --red-300: #ff3b3b;

  --amber-600: #d99a06;
  --amber-500: #f5b513;
  --amber-400: #ffc933;
  --yellow-500: #ffe100;
  --yellow-400: #f8f002; /* BRAND YELLOW */

  /* Deep surfaces are now red, not coffee */
  --ink:          #ba0707;
  --ink-soft:     #c81010;
  --ink-raise:    #d81414;
  --ink-line:     rgba(255, 233, 112, .34);

  --crimson:      var(--red-600);
  --crimson-deep: var(--red-800);
  --crimson-lit:  var(--red-500);

  --gold:         #e6b269;
  --gold-soft:    #f8c667;
  --gold-glow:    rgba(248, 198, 103, .34);

  --cream:        #fff9ec;
  --sand:         #ffeccb;
  --sand-deep:    #f7d9a6;

  /* Text */
  --text:          #4a1203;
  --text-muted:    #8a4a2a;
  --on-dark:       #fff3d6;
  --on-dark-muted: #f3cfa2;

  /* Type */
  --font-display: "Cormorant Garamond", "Noto Serif Tamil", Georgia, "Times New Roman", serif;
  --font-body:    "Manrope", "Noto Sans Tamil", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-hero:    clamp(2.35rem, 6.4vw, 5rem);
  --fs-h1:      clamp(2rem, 4.4vw, 3.3rem);
  --fs-h2:      clamp(1.7rem, 3.3vw, 2.5rem);
  --fs-h3:      clamp(1.2rem, 1.9vw, 1.55rem);
  --fs-lead:    clamp(1.02rem, 1.4vw, 1.2rem);
  --fs-body:    clamp(0.975rem, 0.94rem + 0.18vw, 1.0625rem);
  --fs-sm:      0.875rem;
  --fs-xs:      0.78rem;
  --fs-eyebrow: 0.75rem;

  /* Space & shape */
  --container:  1280px;
  --gutter:     clamp(1.15rem, 4vw, 2.75rem);
  --section-y:  clamp(4rem, 8.5vw, 7.5rem);

  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   26px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(122, 20, 6, .06), 0 4px 14px rgba(122, 20, 6, .08);
  --sh-2: 0 10px 30px rgba(122, 20, 6, .14), 0 2px 6px rgba(122, 20, 6, .07);
  --sh-3: 0 26px 60px rgba(92, 12, 4, .26), 0 6px 18px rgba(122, 20, 6, .14);
  --sh-gold: 0 10px 34px rgba(186, 7, 7, .34);

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --t-fast:    .18s var(--ease);
  --t-base:    .35s var(--ease);
  --t-slow:    .7s var(--ease-out);

  --header-h: 76px;

  /* Tamil sets taller and wider - nudged per language below */
  --i18n-scale: 1;
}

html[lang="ta"] {
  --font-display: "Noto Serif Tamil", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Noto Sans Tamil", "Manrope", -apple-system, "Segoe UI", sans-serif;
  --i18n-scale: .88;
  --fs-hero: clamp(1.8rem, 4.6vw, 3.5rem);
  --fs-h1:   clamp(1.55rem, 3.3vw, 2.45rem);
  --fs-h2:   clamp(1.38rem, 2.6vw, 1.95rem);
  --fs-h3:   clamp(1.05rem, 1.55vw, 1.28rem);
  --fs-lead: clamp(.95rem, 1.2vw, 1.08rem);
}

/* ==========================================================================
   02 - TYPOGRAPHY
   ========================================================================= */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 8% 0%, #fff6e0 0%, transparent 55%),
    radial-gradient(1000px 700px at 100% 18%, #ffe9c4 0%, transparent 52%),
    linear-gradient(180deg, var(--cream) 0%, #fff2dc 48%, var(--cream) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

html[lang="ta"] body { line-height: 1.95; }

/* Sprite icons inherit their size from the surrounding text unless a
   component rule overrides it - stops an unstyled <use> from falling back
   to the SVG default of 300x150. */
svg[aria-hidden="true"] {
  width: 1em;
  height: 1em;
  flex: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
html[lang="ta"] h1,
html[lang="ta"] h2,
html[lang="ta"] h3,
html[lang="ta"] h4 { line-height: 1.4; letter-spacing: 0; }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; }

p { text-wrap: pretty; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-body);
  font-size: calc(var(--fs-eyebrow) * var(--i18n-scale));
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--crimson);
  line-height: 1.5;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.eyebrow--start::before { display: none; }
.section--dark .eyebrow { color: var(--gold); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--text-muted);
}
.section--dark .lead { color: var(--on-dark-muted); }

.script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

.text-gold { color: var(--gold); }
.text-crimson { color: var(--crimson); }

/* Gold rule with a centre diamond */
.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
}
.rule::before,
.rule::after {
  content: "";
  height: 1px;
  width: clamp(36px, 8vw, 78px);
  background: linear-gradient(90deg, transparent, var(--gold));
}
.rule::after { background: linear-gradient(90deg, var(--gold), transparent); }
.rule i {
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.rule--start { justify-content: flex-start; }
.rule--start::before { display: none; }

/* ==========================================================================
   03 - LAYOUT
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}
.container--narrow { max-width: 920px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
/* Light bands: cream lifted with amber, so the red sections read as the
   deep end of one continuous warm ramp rather than a separate theme. */
.section--cream {
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(255, 201, 51, .22), transparent 60%),
    radial-gradient(700px 500px at 5% 110%, rgba(186, 7, 7, .07), transparent 60%),
    linear-gradient(180deg, #fffaf0 0%, var(--cream) 100%);
}
.section--sand {
  background:
    radial-gradient(900px 540px at 12% -15%, rgba(255, 225, 0, .30), transparent 58%),
    radial-gradient(800px 560px at 92% 108%, rgba(186, 7, 7, .10), transparent 60%),
    linear-gradient(160deg, var(--sand) 0%, #ffe0ae 55%, #ffeccb 100%);
}

.section--dark {
  background:
    radial-gradient(1200px 680px at 8% -14%, rgba(255, 59, 59, .55), transparent 60%),
    radial-gradient(900px 600px at 96% 110%, rgba(255, 225, 0, .28), transparent 58%),
    radial-gradient(760px 540px at 60% 46%, rgba(216, 20, 20, .70), transparent 72%),
    linear-gradient(165deg, var(--red-600) 0%, var(--red-700) 52%, var(--red-600) 100%);
  color: var(--on-dark);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--cream); }
.section--dark p { color: var(--on-dark); }
.section--dark + .section:not(.section--dark),
.section:not(.section--dark) + .section--dark { border-top: 1px solid rgba(230, 178, 105, .24); }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .85rem;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.6rem);
}
.section-head p { max-width: 64ch; }
.section-head--start { align-items: flex-start; text-align: start; }

.grid { display: grid; gap: clamp(1.1rem, 2.4vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }

.split {
  display: grid;
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 920px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-first .split__media { order: -1; }
  /* For splits where one column is much taller, top-align instead of
     centring - otherwise the shorter column floats in dead space. */
  .split--top { align-items: start; }
  /* ...and let the shorter media column ride along with the long copy */
  .split--sticky .split__media {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

.stack > * + * { margin-top: 1.05rem; }
.stack-sm > * + * { margin-top: .5rem; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -200px;
  left: 1rem;
  z-index: 3000;
  padding: .75rem 1.25rem;
  border-radius: var(--r-pill);
  background: var(--crimson);
  color: #fff;
  font-weight: 700;
  transition: top var(--t-base);
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   04 - BUTTONS & ATOMS
   ========================================================================= */
.btn {
  --btn-bg: var(--crimson);
  --btn-fg: #fff;
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .92em 1.9em;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: calc(var(--fs-sm) * var(--i18n-scale));
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-base), box-shadow var(--t-base),
              background-color var(--t-base), color var(--t-base), border-color var(--t-base);
}
html[lang="ta"] .btn { text-transform: none; letter-spacing: 0; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .28), transparent 80%);
  transform: translateX(-120%);
  transition: transform .65s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-gold); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--gold  { --btn-bg: linear-gradient(135deg, var(--gold), #b98f36); --btn-fg: #241a0a; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: rgba(74, 18, 3, .3); }
.btn--ghost:hover { --btn-bg: var(--text); --btn-fg: var(--cream); --btn-bd: var(--text); }
.section--dark .btn--ghost,
.hero .btn--ghost { --btn-fg: var(--cream); --btn-bd: rgba(255, 243, 214, .45); }
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-bd: var(--cream); }
.btn--sm { padding: .68em 1.3em; font-size: calc(var(--fs-xs) * var(--i18n-scale)); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .45em 1em;
  border-radius: var(--r-pill);
  background: rgba(230, 178, 105, .14);
  border: 1px solid rgba(230, 178, 105, .34);
  color: var(--crimson);
  font-size: calc(var(--fs-xs) * var(--i18n-scale));
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.5;
  text-transform: uppercase;
}
html[lang="ta"] .chip { text-transform: none; letter-spacing: 0; }
.section--dark .chip { color: var(--gold-soft); }

.card {
  background: #fff;
  border: 1px solid var(--sand-deep);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: rgba(230, 178, 105, .5); }
.section--dark .card {
  background: rgba(123, 4, 4, .42);
  border-color: var(--ink-line);
}

/* ==========================================================================
   05 - HEADER & NAVIGATION
   ========================================================================= */
/* The topbar lives inside the fixed header so the two can never overlap.
   It collapses away once the page is scrolled, leaving a compact bar. */
.topbar {
  background: linear-gradient(90deg, var(--red-700), var(--red-500) 50%, var(--red-700));
  color: #fff;
  font-size: calc(var(--fs-xs) * var(--i18n-scale));
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  overflow: hidden;
  max-height: 72px;
  transition: max-height var(--t-base), opacity var(--t-fast);
}
.site-header.is-stuck .topbar {
  max-height: 0;
  opacity: 0;
  border-bottom-color: transparent;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  padding-block: .3rem;
}
.topbar__note {
  display: flex;
  align-items: center;
  gap: .5em;
  letter-spacing: .04em;
  opacity: .95;
}
.topbar__note svg { width: 1em; height: 1em; flex: none; color: var(--gold-soft); }
.topbar__links { display: flex; align-items: center; gap: 1.15rem; }
.topbar__links a {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  opacity: .92;
  transition: opacity var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.topbar__links a:hover { opacity: 1; color: var(--gold-soft); }
.topbar__links svg { width: 1em; height: 1em; }

@media (max-width: 720px) {
  .topbar__note { display: none; }
  .topbar__inner { justify-content: center; }
  .topbar__links { gap: 1.4rem; }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background-color var(--t-base), box-shadow var(--t-base),
              border-color var(--t-base), backdrop-filter var(--t-base);
  background: linear-gradient(180deg,
      rgba(186, 7, 7, .70) 0%,
      rgba(150, 6, 6, .36) 62%,
      rgba(123, 4, 4, 0) 100%);
  border-bottom: 1px solid transparent;
}
/* Red is the primary accent: once the header leaves the hero it becomes a
   deep crimson bar finished with a gold hairline, matching the topbar. */
.site-header.is-stuck {
  background:
    linear-gradient(180deg, rgba(202, 16, 16, .97) 0%, rgba(173, 8, 8, .97) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(230, 178, 105, .5);
  box-shadow: 0 12px 38px rgba(70, 10, 10, .45), 0 1px 0 rgba(255, 255, 255, .06) inset;
}
/* Opaque whenever the hero is not behind it */
.site-header.is-solid {
  background:
    linear-gradient(180deg, rgba(202, 16, 16, .99) 0%, rgba(173, 8, 8, .99) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(230, 178, 105, .5);
}
/* Thin gold filament under the bar - reads as a gilded edge, not a border */
.site-header.is-stuck::after,
.site-header.is-solid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold-soft) 50%, var(--gold) 82%, transparent);
  opacity: .75;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  transition: min-height var(--t-base);
}
.site-header.is-stuck .nav { min-height: 64px; }

/* --------------------------------------------------------------------------
   Brand lockup
   The deity mark is masked into a gold-ringed medallion; the wordmark stays
   the customer's own artwork (eng_logo.png / tamil_logo.png), swapped by the
   i18n layer. Both PNGs carry a #ba0707 field, which is exactly why the header
   red is tuned to that value - the artwork then sits flush with the bar
   instead of reading as a pasted-on rectangle.
   -------------------------------------------------------------------------- */
.brand {
  display: flex;
  align-items: center;
  gap: .72rem;
  flex: none;
  padding-block: .4rem;
}

.brand__crest {
  position: relative;
  width: var(--crest, 54px);
  height: var(--crest, 54px);
  flex: none;
  padding: 2px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #8a6a24, var(--gold-soft) 22%, var(--gold) 42%, #7d5f20 62%, var(--gold-soft) 84%, #8a6a24);
  box-shadow:
    0 6px 18px rgba(74, 2, 2, .45),
    0 0 0 1px rgba(248, 198, 103, .5),
    0 0 22px rgba(255, 225, 0, .22);
  transition: width var(--t-base), height var(--t-base), box-shadow var(--t-base);
}
.brand__crest::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(255, 244, 222, .5);
  pointer-events: none;
  z-index: 2;
}
.brand__crest img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  transform: scale(1.12);
  display: block;
}
.brand:hover .brand__crest {
  box-shadow: 0 8px 24px rgba(74, 2, 2, .55), 0 0 0 1px var(--gold-soft), 0 0 30px rgba(255, 225, 0, .4);
}

/* The customer's wordmark, kept as supplied */
.brand__word {
  display: block;
  height: var(--word-h, 46px);
  width: auto;
  /* Both PNGs have a solid red field baked in, but not quite the same red
     (eng #ba0707, tamil #b51f20). Feathering the outer edge lets either one
     dissolve into the bar instead of showing a mismatched rectangle. The
     lettering sits well inside the solid part of the mask. */
  -webkit-mask-image: radial-gradient(125% 150% at 50% 50%, #000 66%, transparent 100%);
  mask-image: radial-gradient(125% 150% at 50% 50%, #000 66%, transparent 100%);
  transition: height var(--t-base), filter var(--t-base);
}
.brand:hover .brand__word { filter: brightness(1.08); }

/* compact state once the page scrolls */
.site-header.is-stuck .brand { --crest: 44px; --word-h: 36px; }

@media (max-width: 560px) { .brand { --crest: 42px; --word-h: 34px; gap: .55rem; } }

.nav__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.15rem, 1vw, .6rem);
}
.nav__link {
  position: relative;
  display: block;
  padding: .55rem .72rem;
  font-size: calc(.84rem * var(--i18n-scale));
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 243, 214, .82);
  white-space: nowrap;
  border-radius: var(--r-xs);
  transition: color var(--t-fast);
}
html[lang="ta"] .nav__link { text-transform: none; letter-spacing: 0; font-size: calc(.92rem * var(--i18n-scale)); }
.nav__link::after {
  content: "";
  position: absolute;
  left: .72rem;
  right: .72rem;
  bottom: .25rem;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}
.nav__link:hover { color: #fff; }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--gold-soft); }

/* Language switch */
.lang {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid rgba(248, 198, 103, .55);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(78, 11, 11, .6), rgba(44, 6, 6, .6));
  backdrop-filter: blur(6px);
  flex: none;
}
.lang__btn {
  min-width: 42px;
  padding: .32rem .62rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: rgba(255, 243, 214, .78);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.lang__btn:hover { color: #fff; }
.lang__btn[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--gold), #b58c33);
  color: #241a0a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* Burger - a gilded medallion that unwinds into a close icon */
.burger {
  display: none;
  position: relative;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(from 140deg,
      var(--gold-soft) 0%, var(--gold) 22%, var(--red-800) 46%,
      var(--gold) 70%, var(--gold-soft) 100%);
  box-shadow: 0 6px 20px rgba(40, 2, 2, .55);
  cursor: pointer;
  place-items: center;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.burger:hover { transform: scale(1.06); box-shadow: 0 10px 26px rgba(40, 2, 2, .65); }
.burger:active { transform: scale(.97); }

/* soft halo that breathes, so the control reads as interactive */
.burger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: burgerPulse 3.2s ease-out infinite;
}
@keyframes burgerPulse {
  0%        { box-shadow: 0 0 0 0 rgba(248, 198, 103, .5); }
  70%, 100% { box-shadow: 0 0 0 13px rgba(248, 198, 103, 0); }
}

.burger__box {
  position: relative;
  display: block;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  border-radius: 50%;
  background: linear-gradient(160deg, var(--red-600) 0%, var(--red-900) 100%);
}
.burger__box span {
  position: absolute;
  left: 50%;
  height: 2.5px;
  border-radius: 3px;
  background: var(--gold-soft);
  transition: width var(--t-base), top var(--t-base),
              transform var(--t-base), opacity var(--t-fast), background-color var(--t-fast);
}
.burger__box span:nth-child(1) { top: 34%; width: 24px; transform: translateX(-50%); }
.burger__box span:nth-child(2) { top: 50%; width: 16px; transform: translateX(-50%); }
.burger__box span:nth-child(3) { top: 66%; width: 24px; transform: translateX(-50%); }
.burger:hover .burger__box span:nth-child(2) { width: 24px; }

.burger[aria-expanded="true"] .burger__box span:nth-child(1) { top: 50%; transform: translateX(-50%) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box span:nth-child(2) { opacity: 0; transform: translateX(-50%) scaleX(.2); }
.burger[aria-expanded="true"] .burger__box span:nth-child(3) { top: 50%; transform: translateX(-50%) rotate(-45deg); }
.burger[aria-expanded="true"]::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .burger::after { animation: none; }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(380px, 86vw);
  z-index: 200;
  padding: 1.5rem var(--gutter) 2.5rem;
  background:
    radial-gradient(600px 320px at 100% 0%, rgba(186, 7, 7, .5), transparent 60%),
    var(--ink);
  border-left: 1px solid rgba(230, 178, 105, .3);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .5);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .45s var(--ease-out), visibility .45s;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.drawer__close {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(230, 178, 105, .4);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: background-color var(--t-fast);
}
.drawer__close:hover { background: rgba(230, 178, 105, .18); }
.drawer__close svg { width: 18px; height: 18px; }
.drawer__list { display: flex; flex-direction: column; }
.drawer__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem .25rem;
  border-bottom: 1px solid rgba(248, 198, 103, .14);
  font-family: var(--font-display);
  font-size: calc(1.4rem * var(--i18n-scale));
  font-weight: 600;
  color: var(--cream);
  transition: color var(--t-fast), padding-left var(--t-base);
}
html[lang="ta"] .drawer__list a { font-size: calc(1.12rem * var(--i18n-scale)); }
.drawer__list a::after { content: "\2192"; color: var(--gold); opacity: 0; transition: opacity var(--t-fast); }
.drawer__list a:hover { color: var(--gold-soft); padding-left: .7rem; }
.drawer__list a:hover::after { opacity: 1; }
.drawer__foot { margin-top: auto; display: grid; gap: .7rem; }
.drawer__foot .btn { width: 100%; }

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(40, 2, 2, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}
.backdrop.is-open { opacity: 1; visibility: visible; }

body.is-locked { overflow: hidden; }

@media (max-width: 1140px) {
  .nav__list { display: none; }
  .burger { display: grid; }
}

/* ==========================================================================
   06 - HERO
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  /* Deliberately darker than the rest of the page: the carousel needs a deep
     ground for the crossfade to register. Still red, not black. */
  background:
    radial-gradient(900px 620px at 18% 8%, #7d0404 0%, transparent 62%),
    linear-gradient(165deg, #5c0303 0%, #2a0101 100%);
  color: var(--cream);
  isolation: isolate;
}
@media (max-width: 700px) { .hero { min-height: 92svh; } }

.hero__stage { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
}
.hero__slide.is-active img { animation: kenburns 9s var(--ease-out) forwards; }
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.2%, -1.2%, 0); }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Dark enough on the left for white text to pass contrast, light enough
     on the right that the food photography still reads. */
  background:
    linear-gradient(180deg, rgba(61, 2, 2, .92) 0%, rgba(61, 2, 2, .28) 30%, rgba(45, 1, 1, .34) 62%, rgba(40, 1, 1, .94) 100%),
    linear-gradient(90deg, rgba(45, 1, 1, .90) 0%, rgba(61, 2, 2, .34) 46%, rgba(61, 2, 2, 0) 100%);
}

/* Clears the fixed header plus the topbar sitting inside it. */
.hero__inner {
  padding-top: calc(var(--header-h) + 5.5rem);
  padding-bottom: clamp(5rem, 11vw, 8rem);
  max-width: 920px;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .45em 1.05em;
  border: 1px solid rgba(230, 178, 105, .55);
  border-radius: var(--r-pill);
  background: rgba(58, 4, 4, .45);
  backdrop-filter: blur(6px);
  color: var(--gold-soft);
  font-size: calc(var(--fs-xs) * var(--i18n-scale));
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.6;
}
html[lang="ta"] .hero__badge { letter-spacing: .04em; text-transform: none; }
.hero__badge svg { width: 1em; height: 1em; }

.hero__title {
  margin-top: 1.4rem;
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 1.04;
  color: #fff;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .5);
}
html[lang="ta"] .hero__title { line-height: 1.35; }
.hero__title em {
  display: block;
  font-style: italic;
  color: var(--gold-soft);
}

/* All taglines occupy the same grid cell, so the box is as tall as the
   longest one and nothing below it shifts when the slide changes. */
.hero__tagline {
  display: grid;
  margin-top: 1.3rem;
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: rgba(255, 248, 238, .95);
  text-shadow: 0 2px 14px rgba(58, 4, 4, .85), 0 1px 3px rgba(58, 4, 4, .7);
}
.hero__tagline span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.hero__tagline span.is-active { opacity: 1; transform: none; }

.hero__cta { margin-top: 2rem; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  margin-top: 2.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(248, 198, 103, .22);
  font-size: calc(var(--fs-sm) * var(--i18n-scale));
  color: rgba(252, 243, 232, .92);
  text-shadow: 0 2px 12px rgba(58, 4, 4, .85);
}
.hero__meta div { display: flex; align-items: center; gap: .55em; }
.hero__meta svg { width: 1.05em; height: 1.05em; color: var(--gold); flex: none; }

/* Hero controls */
.hero__dots {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.6rem, 4vw, 2.6rem);
  z-index: 3;
  display: flex;
  gap: .55rem;
  align-items: center;
}
.hero__dot {
  width: 32px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 243, 214, .3);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: background-color var(--t-base), width var(--t-base);
}
.hero__dot:hover { background: rgba(255, 243, 214, .55); }
.hero__dot[aria-selected="true"] { width: 56px; background: rgba(255, 243, 214, .28); }
.hero__dot[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: left;
  animation: dotfill var(--hero-duration, 6s) linear forwards;
}
@keyframes dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero__arrows {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.4rem, 4vw, 2.4rem);
  z-index: 3;
  display: flex;
  gap: .5rem;
}
.hero__arrow {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 243, 214, .3);
  border-radius: var(--r-pill);
  background: rgba(58, 4, 4, .38);
  backdrop-filter: blur(6px);
  color: var(--cream);
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.hero__arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: scale(1.06); }
.hero__arrow svg { width: 18px; height: 18px; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 4vw, 2.4rem);
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: .4rem;
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(255, 243, 214, .6);
}
.hero__scroll i {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollcue 2.1s var(--ease) infinite;
}
@keyframes scrollcue {
  0%   { transform: scaleY(0); transform-origin: top; }
  48%  { transform: scaleY(1); transform-origin: top; }
  52%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 860px) { .hero__scroll { display: none; } }

/* ==========================================================================
   07 - TRUST STRIP
   ========================================================================= */
.trust {
  background: linear-gradient(100deg, var(--red-700) 0%, var(--red-500) 48%, var(--red-600) 100%);
  border-block: 1px solid rgba(248, 198, 103, .4);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
}
/* amber sheen sweeping the strip */
.trust::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 220px at 50% 120%, rgba(255, 225, 0, .3), transparent 70%);
  pointer-events: none;
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.trust__item {
  display: grid;
  justify-items: center;
  gap: .3rem;
  text-align: center;
  padding: clamp(1.4rem, 3vw, 2.2rem) 1rem;
  border-right: 1px solid rgba(248, 198, 103, .12);
}
.trust__item:last-child { border-right: 0; }
.trust__item svg { width: 26px; height: 26px; color: var(--gold); margin-bottom: .35rem; }
.trust__num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold-soft);
}
.trust__label {
  font-size: calc(var(--fs-xs) * var(--i18n-scale));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  line-height: 1.5;
}
html[lang="ta"] .trust__label { letter-spacing: 0; text-transform: none; }

/* ==========================================================================
   08 - ABOUT
   ========================================================================= */
.about__media {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.6rem, 1.6vw, 1rem);
}
.about__media figure { position: relative; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--sh-2); }
.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out);
}
.about__media figure:hover img { transform: scale(1.07); }
.about__media figure:nth-child(1) { grid-row: span 2; aspect-ratio: 3 / 4.4; }
.about__media figure:nth-child(2) { aspect-ratio: 4 / 3; }
.about__media figure:nth-child(3) { aspect-ratio: 4 / 3; }

.about__stamp {
  position: absolute;
  right: -10px;
  bottom: -14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(88px, 14vw, 122px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--crimson), var(--crimson-deep));
  border: 2px solid var(--gold);
  box-shadow: var(--sh-3);
  text-align: center;
  color: var(--gold-soft);
  font-family: var(--font-display);
  line-height: 1.05;
  padding: .5rem;
}
.about__stamp b { display: block; font-size: clamp(1.4rem, 2.6vw, 2rem); color: #fff; font-weight: 700; }
.about__stamp span { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font-body); }

.about__body p { color: var(--text-muted); }
.about__body p strong { color: var(--crimson); font-weight: 700; }

/* Branch list */
.branches { display: grid; gap: .7rem; margin-top: 1.6rem; }
.branch {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--sand-deep);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  background: #fff;
  transition: transform var(--t-base), box-shadow var(--t-base), border-left-color var(--t-base);
}
.branch:hover { transform: translateX(4px); box-shadow: var(--sh-1); border-left-color: var(--crimson); }
.branch svg { width: 20px; height: 20px; color: var(--crimson); flex: none; margin-top: .22em; }
.branch b { display: block; font-weight: 700; font-size: calc(var(--fs-sm) * var(--i18n-scale)); }
.branch span { font-size: calc(var(--fs-sm) * var(--i18n-scale)); color: var(--text-muted); line-height: 1.6; }
.section--dark .branch { background: rgba(123, 4, 4, .42); border-color: var(--ink-line); }
.section--dark .branch span { color: var(--on-dark-muted); }
.section--dark .branch svg { color: var(--gold); }

/* ==========================================================================
   09 - MENU
   ========================================================================= */
.menu-tabs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .4rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.menu-tabs::-webkit-scrollbar { display: none; }
/* Tamil labels are longer than the English ones; from tablet up let the
   strip wrap onto a second line rather than clipping at the container edge. */
@media (min-width: 900px) {
  .menu-tabs {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    row-gap: .6rem;
  }
}
.menu-tab {
  flex: none;
  scroll-snap-align: center;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .72em 1.3em;
  border: 1px solid rgba(248, 198, 103, .28);
  border-radius: var(--r-pill);
  background: rgba(123, 4, 4, .42);
  color: var(--on-dark-muted);
  font-size: calc(var(--fs-sm) * var(--i18n-scale));
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-base), color var(--t-base),
              border-color var(--t-base), transform var(--t-base);
}
.menu-tab svg { width: 1.15em; height: 1.15em; }
.menu-tab:hover { color: var(--cream); border-color: rgba(248, 198, 103, .55); transform: translateY(-2px); }
.menu-tab[aria-selected="true"] {
  background: linear-gradient(135deg, var(--gold), #b58c33);
  border-color: transparent;
  color: #241a0a;
  box-shadow: 0 8px 22px rgba(230, 178, 105, .3);
}

.menu-panel { display: none; animation: fadeUp .5s var(--ease-out) both; }
.menu-panel.is-active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.menu-panel__grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2.4rem) clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}

.menu-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-md);
  background: rgba(123, 4, 4, .42);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.menu-card__title {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-bottom: .9rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid rgba(248, 198, 103, .2);
}
.menu-card__title svg {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(248, 198, 103, .28), rgba(186, 7, 7, .55));
  border: 1px solid rgba(248, 198, 103, .5);
  color: var(--gold-soft);
  flex: none;
}
.menu-card__title h3 { color: var(--cream); margin: 0; }

.menu-item {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .62rem 0;
  font-size: calc(var(--fs-body) * var(--i18n-scale));
  color: var(--on-dark);
  transition: color var(--t-fast), padding-left var(--t-base);
}
.menu-item:hover { color: var(--gold-soft); padding-left: .4rem; }
.menu-item__dots {
  flex: 1;
  height: 1px;
  margin-bottom: .25em;
  background-image: linear-gradient(90deg, rgba(248, 198, 103, .45) 35%, transparent 0);
  background-size: 7px 1px;
  background-repeat: repeat-x;
}
.menu-item__note {
  font-size: calc(var(--fs-xs) * var(--i18n-scale));
  color: var(--gold);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
html[lang="ta"] .menu-item__note { letter-spacing: 0; text-transform: none; }

/* ==========================================================================
   10 - GALLERY
   ========================================================================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(.65rem, 1.6vw, 1.1rem);
}
@media (min-width: 1000px) {
  .gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 15.5rem; }
  .gallery__tile--wide { grid-column: span 2; }
  .gallery__tile--tall { grid-row: span 2; }
}

.gallery__tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ink-soft);
  box-shadow: var(--sh-1);
  min-height: 15.5rem;
  cursor: zoom-in;
  isolation: isolate;
}
.gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out), filter .5s var(--ease);
}
.gallery__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(58, 4, 4, 0) 36%, rgba(58, 4, 4, .88) 100%);
  transition: opacity var(--t-base);
}
.gallery__tile:hover img { transform: scale(1.08); }
.gallery__tile:hover::after { opacity: .92; }

.gallery__cap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.1rem 1.25rem;
  color: var(--cream);
  transform: translateY(8px);
  transition: transform var(--t-base);
}
.gallery__tile:hover .gallery__cap { transform: none; }
.gallery__cap h3 { color: #fff; font-size: calc(1.3rem * var(--i18n-scale)); }
.gallery__cap p {
  margin-top: .2rem;
  font-size: calc(var(--fs-xs) * var(--i18n-scale));
  line-height: 1.55;
  color: rgba(255, 243, 214, .82);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--t-base), opacity var(--t-base), margin var(--t-base);
}
.gallery__tile:hover .gallery__cap p { max-height: 6em; opacity: 1; }
.gallery__count {
  position: absolute;
  top: .85rem;
  right: .85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .3em .75em;
  border-radius: var(--r-pill);
  background: rgba(58, 4, 4, .62);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(248, 198, 103, .3);
  color: var(--gold-soft);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.6;
}
.gallery__count svg { width: .9em; height: .9em; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(40, 2, 2, .96);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  color: var(--on-dark-muted);
  font-size: var(--fs-sm);
}
.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 clamp(.6rem, 4vw, 4.5rem);
  min-height: 0;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: lbIn .4s var(--ease-out);
}
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 243, 214, .25);
  border-radius: var(--r-pill);
  background: rgba(255, 243, 214, .07);
  color: var(--cream);
  cursor: pointer;
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.lightbox__nav:hover { background: var(--gold); color: var(--ink); }
.lightbox__nav--prev { left: clamp(.4rem, 2vw, 1.4rem); }
.lightbox__nav--next { right: clamp(.4rem, 2vw, 1.4rem); }
.lightbox__nav svg { width: 20px; height: 20px; }
.lightbox__foot {
  padding: 1rem var(--gutter) 1.6rem;
  text-align: center;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
}
.lightbox__close {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 243, 214, .25);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  flex: none;
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.lightbox__close:hover { background: var(--crimson); transform: rotate(90deg); }
.lightbox__close svg { width: 18px; height: 18px; }

/* ==========================================================================
   11 - RESTAURANT & COFFEE WORKS
   ========================================================================= */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.5rem);
}
.filter {
  padding: .6em 1.3em;
  border: 1px solid var(--sand-deep);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--text-muted);
  font-size: calc(var(--fs-sm) * var(--i18n-scale));
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: all var(--t-base);
}
.filter:hover { border-color: var(--gold); color: var(--text); transform: translateY(-2px); }
.filter[aria-pressed="true"] {
  background: var(--crimson);
  border-color: var(--crimson);
  color: #fff;
  box-shadow: var(--sh-gold);
}

.dishes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: clamp(.8rem, 2vw, 1.4rem);
}
.dish {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--sh-1);
  transition: transform var(--t-base), box-shadow var(--t-base), opacity .4s var(--ease), scale .4s var(--ease);
}
.dish.is-hidden { display: none; }
.dish.is-entering { animation: fadeUp .45s var(--ease-out) both; }
.dish__img { aspect-ratio: 4 / 3; overflow: hidden; }
.dish__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.dish:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.dish:hover .dish__img img { transform: scale(1.1); }
.dish__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .85rem 1rem 1rem;
}
.dish__body h3 { font-size: calc(1.22rem * var(--i18n-scale)); margin: 0; }
.dish__tag {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(230, 178, 105, .45);
  border-radius: var(--r-pill);
  padding: .25em .7em;
  white-space: nowrap;
  line-height: 1.6;
}
html[lang="ta"] .dish__tag { letter-spacing: 0; text-transform: none; font-size: .68rem; }

/* Coffee slideshow */
.coffee-show {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-3);
  aspect-ratio: 4 / 3;
  background: var(--ink-soft);
  border: 1px solid rgba(230, 178, 105, .25);
}
.coffee-show__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--ease-out);
}
.coffee-show__slide.is-active { opacity: 1; }
.coffee-show__slide img { width: 100%; height: 100%; object-fit: cover; }
.coffee-show__ui {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.5rem 1.1rem 1.1rem;
  background: linear-gradient(180deg, transparent, rgba(58, 4, 4, .85));
}
.coffee-show__dots { display: flex; gap: .4rem; }
.coffee-show__dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 243, 214, .4);
  cursor: pointer;
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.coffee-show__dots button[aria-selected="true"] { background: var(--gold); transform: scale(1.4); }
.coffee-show__arrows { display: flex; gap: .4rem; }
.coffee-show__arrows button {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 243, 214, .3);
  border-radius: var(--r-pill);
  background: rgba(58, 4, 4, .4);
  color: var(--cream);
  cursor: pointer;
  transition: background-color var(--t-fast);
}
.coffee-show__arrows button:hover { background: var(--gold); color: var(--ink); }
.coffee-show__arrows svg { width: 16px; height: 16px; }

.pillars { display: grid; gap: .9rem; margin-top: 1.8rem; }
.pillar {
  display: flex;
  gap: .95rem;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  border-radius: var(--r-sm);
  background: rgba(123, 4, 4, .42);
  border: 1px solid var(--ink-line);
}
.pillar svg { width: 24px; height: 24px; color: var(--gold); flex: none; margin-top: .15em; }
.pillar b { display: block; color: var(--cream); font-size: calc(var(--fs-body) * var(--i18n-scale)); }
.pillar span { font-size: calc(var(--fs-sm) * var(--i18n-scale)); color: var(--on-dark-muted); line-height: 1.65; }

/* ==========================================================================
   12 - LOCATIONS
   ========================================================================= */
.locations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(1rem, 2.2vw, 1.6rem); }
.location {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.3rem, 2.6vw, 1.8rem);
  background: #fff;
  border: 1px solid var(--sand-deep);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.location:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--gold); }
.location__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: calc(1.35rem * var(--i18n-scale));
  font-weight: 700;
  color: var(--crimson);
  line-height: 1.25;
}
.location__brand svg { width: 22px; height: 22px; flex: none; color: var(--gold); }
.location__addr { font-size: calc(var(--fs-sm) * var(--i18n-scale)); color: var(--text-muted); line-height: 1.7; flex: 1; }
.location__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }

.map-frame {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--sand-deep);
  box-shadow: var(--sh-2);
  background: var(--sand-deep);
  aspect-ratio: 21 / 9;
  min-height: 300px;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.92); }

/* ==========================================================================
   13 - CONTACT
   ========================================================================= */
.contact-grid {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1.15fr .85fr; } }

.form-card,
.info-card {
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--ink-line);
  background: rgba(123, 4, 4, .42);
  backdrop-filter: blur(6px);
}
.info-card { background: linear-gradient(160deg, rgba(150, 6, 6, .55), rgba(123, 4, 4, .35)); }

.field { display: grid; gap: .4rem; margin-bottom: 1rem; }
.field label {
  font-size: calc(var(--fs-xs) * var(--i18n-scale));
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-soft);
  line-height: 1.6;
}
html[lang="ta"] .field label { letter-spacing: 0; text-transform: none; font-size: calc(var(--fs-sm) * var(--i18n-scale)); }
.field input,
.field textarea {
  width: 100%;
  padding: .85rem 1.05rem;
  border: 1px solid rgba(248, 198, 103, .25);
  border-radius: var(--r-sm);
  background: rgba(58, 4, 4, .45);
  color: var(--cream);
  font-size: var(--fs-body);
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(243, 207, 162, .6); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(58, 4, 4, .7);
  box-shadow: 0 0 0 3px rgba(230, 178, 105, .18);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #e06b6b; box-shadow: 0 0 0 3px rgba(224, 107, 107, .16); }
.field__error { font-size: var(--fs-xs); color: #f0a0a0; min-height: 1.2em; line-height: 1.5; }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.form-status {
  margin-top: .9rem;
  padding: .8rem 1rem;
  border-radius: var(--r-sm);
  font-size: calc(var(--fs-sm) * var(--i18n-scale));
  font-weight: 600;
  display: none;
  line-height: 1.6;
}
.form-status.is-ok   { display: block; background: rgba(86, 160, 102, .16); border: 1px solid rgba(86, 160, 102, .5); color: #a7dcb4; }
.form-status.is-err  { display: block; background: rgba(224, 107, 107, .14); border: 1px solid rgba(224, 107, 107, .45); color: #f3b4b4; }
.form-status.is-busy { display: block; background: rgba(230, 178, 105, .14); border: 1px solid rgba(230, 178, 105, .4); color: var(--gold-soft); }

.contact-line {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(248, 198, 103, .16);
}
.contact-line:last-of-type { border-bottom: 0; }
.contact-line__ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  flex: none;
  border-radius: var(--r-pill);
  background: rgba(230, 178, 105, .16);
  border: 1px solid rgba(230, 178, 105, .35);
  color: var(--gold-soft);
}
.contact-line__ico svg { width: 19px; height: 19px; }
.contact-line small {
  display: block;
  font-size: calc(var(--fs-xs) * var(--i18n-scale));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  line-height: 1.6;
}
html[lang="ta"] .contact-line small { letter-spacing: 0; text-transform: none; }
.contact-line b {
  display: block;
  font-size: calc(1.05rem * var(--i18n-scale));
  color: var(--cream);
  font-weight: 700;
  word-break: break-word;
}
.contact-line a:hover b { color: var(--gold-soft); }

.socials { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.3rem; }
.socials a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid rgba(248, 198, 103, .3);
  background: rgba(123, 4, 4, .42);
  color: var(--gold-soft);
  transition: all var(--t-base);
}
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-3px); }
.socials svg { width: 19px; height: 19px; }

/* ==========================================================================
   14 - FOOTER & FLOATING ACTIONS
   ========================================================================= */
.site-footer {
  background:
    radial-gradient(900px 440px at 15% 0%, rgba(240, 32, 32, .55), transparent 62%),
    linear-gradient(180deg, var(--red-700) 0%, var(--red-900) 100%);
  color: var(--on-dark-muted);
  border-top: 1px solid rgba(230, 178, 105, .25);
  padding-block: clamp(2.6rem, 6vw, 4.5rem) 1.5rem;
  font-size: calc(var(--fs-sm) * var(--i18n-scale));
}
.footer-grid {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  padding-bottom: clamp(1.8rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(248, 198, 103, .14);
}
.footer-grid h4 {
  color: var(--gold-soft);
  font-family: var(--font-body);
  font-size: calc(var(--fs-xs) * var(--i18n-scale));
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  line-height: 1.6;
}
html[lang="ta"] .footer-grid h4 { letter-spacing: .04em; text-transform: none; font-size: calc(var(--fs-sm) * var(--i18n-scale)); }
.footer-grid ul { display: grid; gap: .55rem; }
.footer-grid a { transition: color var(--t-fast), padding-left var(--t-base); }
.footer-grid a:hover { color: var(--gold-soft); padding-left: .25rem; }
/* Larger lockup for the footer and the mobile drawer head */
.brand--lg {
  --crest: 64px;
  --word-h: 58px;
  margin-bottom: 1.1rem;
}
.footer-brand p { color: var(--on-dark-muted); line-height: 1.75; max-width: 34ch; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-top: 1.5rem;
  font-size: calc(var(--fs-xs) * var(--i18n-scale));
  line-height: 1.7;
}
.footer-bottom a { color: var(--gold-soft); }
.footer-bottom a:hover { text-decoration: underline; }

.fab-stack {
  position: fixed;
  right: clamp(.85rem, 2.5vw, 1.6rem);
  bottom: clamp(.85rem, 2.5vw, 1.6rem);
  z-index: 120;
  display: grid;
  gap: .6rem;
  justify-items: center;
}
.fab {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  color: #fff;
  box-shadow: var(--sh-2);
  cursor: pointer;
  transition: transform var(--t-base), box-shadow var(--t-base), opacity var(--t-base), visibility var(--t-base);
}
.fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: var(--sh-3); }
.fab svg { width: 24px; height: 24px; }
.fab--wa   { background: linear-gradient(135deg, #25d366, #14a94c); }
.fab--call { background: linear-gradient(135deg, var(--crimson-lit), var(--crimson-deep)); }
.fab--top  {
  background: linear-gradient(135deg, rgba(126, 21, 21, .95), rgba(74, 10, 10, .95));
  border: 1px solid rgba(248, 198, 103, .55);
  color: var(--gold-soft);
  opacity: 0;
  visibility: hidden;
}
.fab--top.is-visible:hover { border-color: var(--gold-soft); }
.fab--top.is-visible { opacity: 1; visibility: visible; }
@media (max-width: 480px) { .fab { width: 48px; height: 48px; } .fab svg { width: 21px; height: 21px; } }

/* ---- menu: two-column layout with a standing order panel ---------------- */
.menu-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .55;
}

.menu-layout {
  display: grid;
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1080px) {
  /* Stretch, not start: the menu cards grow to the height of the order
     panel so any slack sits inside a bordered card instead of leaving a
     bare patch of background under the shorter column. */
  .menu-layout {
    grid-template-columns: minmax(0, 1fr) clamp(290px, 24vw, 350px);
    align-items: stretch;
  }
  .menu-main { display: flex; flex-direction: column; }
  .menu-panel.is-active { display: flex; flex-direction: column; flex: 1; }
  .menu-panel__grid { flex: 1; }
  .menu-card { height: 100%; }
}

.menu-aside {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--r-lg);
  border: 1px solid rgba(248, 198, 103, .42);
  background:
    linear-gradient(165deg, rgba(255, 225, 0, .20) 0%, rgba(110, 3, 3, .62) 45%, rgba(150, 6, 6, .48) 100%);
  box-shadow: var(--sh-2);
}
.menu-aside > .menu-aside__art {
  position: absolute;
  top: -16px;
  right: -20px;
  width: 132px;
  height: 132px;
  opacity: .17;
  pointer-events: none;
}
.menu-aside h3 { color: var(--cream); margin: .75rem 0 .45rem; }
.menu-aside > p { color: var(--on-dark-muted); font-size: calc(var(--fs-sm) * var(--i18n-scale)); }
.menu-aside__list { display: grid; gap: .55rem; margin: 1.15rem 0 1.35rem; }
.menu-aside__list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: calc(var(--fs-sm) * var(--i18n-scale));
  color: var(--on-dark);
}
.menu-aside__list svg { color: var(--gold-soft); }
.menu-aside__cta { display: grid; gap: .55rem; }
.menu-aside__note {
  margin-top: 1.1rem;
  font-size: calc(var(--fs-xs) * var(--i18n-scale));
  line-height: 1.65;
  color: var(--on-dark-muted);
  opacity: .9;
}

/* ---- coffee: founding seal + gilded pillar icons ------------------------ */
.coffee-seal {
  position: absolute;
  z-index: 3;
  top: clamp(.8rem, 2vw, 1.4rem);
  left: clamp(.8rem, 2vw, 1.4rem);
  display: grid;
  place-items: center;
  width: clamp(74px, 9vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, var(--red-500), var(--red-800) 70%);
  border: 2px solid var(--gold-soft);
  box-shadow: var(--sh-3);
  color: var(--gold-soft);
  text-align: center;
  font-family: var(--font-display);
  line-height: 1.05;
}
.coffee-seal b { display: block; font-size: clamp(1.15rem, 2.2vw, 1.65rem); color: #fff; font-weight: 700; }
.coffee-seal span {
  font-family: var(--font-body);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
html[lang="ta"] .coffee-seal span { letter-spacing: .02em; text-transform: none; font-size: .56rem; }

.pillar svg {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(248, 198, 103, .28), rgba(186, 7, 7, .55));
  border: 1px solid rgba(248, 198, 103, .5);
  color: var(--gold-soft);
  flex: none;
  margin-top: 0;
}

/* ---- contact: gilded edge + quick actions ------------------------------- */
.form-card,
.info-card { position: relative; overflow: hidden; }
.form-card::before,
.info-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--yellow-500) 50%, var(--gold));
}
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin: 1.2rem 0 .4rem;
}
.quick-actions .btn { padding: .8em 1em; }
@media (max-width: 400px) { .quick-actions { grid-template-columns: 1fr; } }

/* ---- FAQ ---------------------------------------------------------------
   Built on <details>/<summary>: open/close works with zero JavaScript and
   stays keyboard accessible, and crawlers read the answers either way.
   ------------------------------------------------------------------------ */
.faq { display: grid; gap: .7rem; }

.faq__item {
  border: 1px solid var(--sand-deep);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: border-left-color var(--t-base), box-shadow var(--t-base);
}
.faq__item[open] { border-left-color: var(--crimson); box-shadow: var(--sh-2); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: calc(1.22rem * var(--i18n-scale));
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  transition: color var(--t-fast);
}
html[lang="ta"] .faq__item summary { font-size: calc(1.05rem * var(--i18n-scale)); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--crimson); }

/* chevron drawn in CSS so it needs no icon */
.faq__item summary i {
  position: relative;
  width: 11px;
  height: 11px;
  flex: none;
  border-right: 2px solid var(--crimson);
  border-bottom: 2px solid var(--crimson);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-base);
}
.faq__item[open] summary i { transform: rotate(-135deg) translate(-2px, -2px); }

.faq__answer { padding: 0 1.25rem 1.2rem; }
.faq__answer p {
  color: var(--text-muted);
  font-size: calc(var(--fs-body) * var(--i18n-scale));
  line-height: 1.75;
  border-top: 1px dashed var(--sand-deep);
  padding-top: .9rem;
}

@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__answer { animation: fadeUp .35s var(--ease-out) both; }
}

/* ==========================================================================
   16 - ILLUSTRATED FLOATING SWEETS
   A decorative layer of hand-drawn SVG sweets that drift slowly behind the
   content. Purely ornamental: aria-hidden, pointer-events none, and parked
   completely when the visitor prefers reduced motion.
   ========================================================================= */
/* NOTE: deliberately no overflow:hidden here. The .floaties layer already
   clips its own children, and an overflow:hidden ancestor would disable
   position:sticky on the media columns inside these sections. */
.has-floaties { position: relative; }

.floaties {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.floatie {
  position: absolute;
  width: var(--s, 72px);
  height: var(--s, 72px);
  opacity: var(--o, .14);
  animation: drift var(--d, 20s) ease-in-out var(--dl, 0s) infinite alternate;
  will-change: transform;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) rotate(var(--r0, -7deg)); }
  to   { transform: translate3d(var(--dx, 18px), var(--dy, -30px), 0) rotate(var(--r1, 11deg)); }
}

/* Hero: a real composition filling the space beside the headline */
.floaties--hero .floatie {
  --o: .72;
  filter: drop-shadow(0 12px 26px rgba(40, 2, 2, .6));
}
/* The layer is a column to the RIGHT of the headline. Its left edge is
   derived from the text column, not from the viewport: the container is
   1280px max and .hero__inner is 920px, so the copy always ends before
   50% + 380px. Below 1280px there is no spare column, so the artwork is
   either hidden or moved to a clear band under the content. */
.floaties--hero {
  left: calc(50% + 380px);
  right: 0;
  width: auto;
  top: calc(var(--header-h) + 3rem);
  bottom: 5rem;
}
.floaties--hero .fl-1 { top: 2%;  right: 6%;  --s: clamp(78px, 9vw, 128px);   --d: 19s; --dx: -20px; --dy: 24px;  --r0: -9deg; --r1: 8deg; }
.floaties--hero .fl-2 { top: 34%; left: 6%;   --s: clamp(54px, 6vw, 84px);    --d: 23s; --dx: 18px;  --dy: -20px; --dl: -4s;  --r0: 6deg;  --r1: -10deg; }
.floaties--hero .fl-3 { top: 54%; right: 4%;  --s: clamp(64px, 7.5vw, 104px); --d: 17s; --dx: -14px; --dy: -24px; --dl: -2s;  --r0: 10deg; --r1: -6deg; }
.floaties--hero .fl-4 { top: 14%; left: 22%;  --s: clamp(44px, 5vw, 66px);    --d: 26s; --dx: 14px;  --dy: 22px;  --dl: -8s;  --r0: -12deg; --r1: 10deg; }
.floaties--hero .fl-5 { bottom: 4%; left: 14%; --s: clamp(50px, 5.6vw, 80px); --d: 21s; --dx: -16px; --dy: 18px;  --dl: -6s;  --r0: 8deg;  --r1: -12deg; }
.floaties--hero .fl-6 { top: 72%; left: 40%;  --s: clamp(40px, 4.4vw, 58px);  --d: 29s; --dx: 12px;  --dy: 24px;  --dl: -11s; --r0: -6deg; --r1: 14deg; }

/* Deep-red sections: large, slow, low-contrast texture */
.floaties--soft .fs-1 { top: 6%;  left: 3%;   --s: clamp(90px, 11vw, 150px); --o: .12; --d: 27s; --dx: 20px;  --dy: 26px;  --r1: 12deg; }
.floaties--soft .fs-2 { top: 58%; left: 11%;  --s: clamp(62px, 7vw, 98px);   --o: .10; --d: 22s; --dx: -18px; --dy: -24px; --dl: -6s; --r1: -14deg; }
.floaties--soft .fs-3 { top: 16%; right: 5%;  --s: clamp(80px, 9.5vw, 130px);--o: .13; --d: 25s; --dx: -22px; --dy: 22px;  --dl: -3s; --r1: -9deg; }
.floaties--soft .fs-4 { bottom: 8%; right: 16%; --s: clamp(66px, 8vw, 108px);--o: .11; --d: 20s; --dx: 16px;  --dy: -26px; --dl: -9s; --r1: 13deg; }
.floaties--soft .fs-5 { top: 42%; left: 47%;  --s: clamp(48px, 5.5vw, 74px); --o: .08; --d: 31s; --dx: -14px; --dy: 24px;  --dl: -14s; --r1: 16deg; }

/* Light sections need a touch more presence to read at all */
.floaties--warm .floatie { --o: .18; }

/* No spare column between 681px and 1279px - the copy uses the full width */
@media (max-width: 1279px) and (min-width: 681px) {
  .floaties--hero { display: none; }
}
/* Phones: a shallow band along the bottom of the hero, under the copy */
@media (max-width: 680px) {
  /* There is no spare band on a phone - the copy fills the hero. So the
     artwork drops behind the content as low-contrast texture instead of
     fighting the meta rows for the same strip of pixels. */
  .floaties--hero {
    inset: calc(var(--header-h) + 2rem) 0 4.5rem 0;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
  }
  .floaties--hero .floatie { --o: .2; }
  .floaties--hero .fl-2,
  .floaties--hero .fl-5 { display: none; }
  .floaties--hero .fl-1 { top: 4%;   right: 4%;  left: auto; --s: 84px; }
  .floaties--hero .fl-3 { top: auto; bottom: 2%; right: 6%;  left: auto; --s: 76px; }
  .floaties--hero .fl-4 { top: 38%;  right: 8%;  left: auto; --s: 54px; }
  .floaties--hero .fl-6 { top: auto; bottom: 20%; left: 4%;  --s: 58px; }
  .floaties--soft .fs-2,
  .floaties--soft .fs-5 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .floatie { animation: none !important; transform: none !important; }
}

/* ==========================================================================
   15 - MOTION & RESPONSIVE REFINEMENTS
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal--left  { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--zoom  { transform: scale(.94); }
.reveal--left.is-in,
.reveal--right.is-in,
.reveal--zoom.is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__slide.is-active img { animation: none; transform: scale(1.02); }
}

@media (max-width: 760px) {
  .about__media { grid-template-columns: 1fr 1fr; }
  .about__media figure:nth-child(1) { grid-row: span 1; aspect-ratio: 1; grid-column: span 2; }
  .hero__dots { bottom: 1.1rem; }
  .hero__arrows { display: none; }
  .trust__item { border-right: 0; border-bottom: 1px solid rgba(248, 198, 103, .12); }
  .map-frame { aspect-ratio: 4 / 3; }
}

@media (max-width: 420px) {
  .hero__meta { gap: .45rem 1.1rem; }
  .btn { padding: .85em 1.45em; }
  .btn-row > .btn { flex: 1 1 100%; }
}

/* Small phones: shrink the header furniture so the brand, language pill
   and menu button always fit side by side. Must live AFTER the base .lang
   and .burger rules or they would win the cascade on equal specificity. */
@media (max-width: 420px) {
  .brand { --crest: 38px; --word-h: 28px; gap: .45rem; }
  .nav { gap: .5rem; }
  .nav__actions { gap: .4rem; }
  .lang__btn { min-width: 34px; padding: .3rem .45rem; font-size: .76rem; }
  .burger { width: 48px; height: 48px; }
  .burger__box span:nth-child(1),
  .burger__box span:nth-child(3) { width: 21px; }
  .burger__box span:nth-child(2) { width: 14px; }
}

@media print {
  .site-header, .topbar, .fab-stack, .hero__dots, .hero__arrows,
  .hero__scroll, .drawer, .backdrop, .lightbox, .map-frame { display: none !important; }
  body { background: #fff; color: #000; }
  .section--dark { background: #fff !important; color: #000 !important; }
  .section--dark h1, .section--dark h2, .section--dark h3, .section--dark p { color: #000 !important; }
  .hero { min-height: auto; }
}