/* =====================================================================
   VMS Dhamotharan Thirumana Mandapam
   Stylesheet — design tokens, layout, components, responsive
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --ivory:        #FBF7F0;
  --cream:        #F4EDE1;
  --cream-deep:   #EBE0CD;
  --white:        #FFFFFF;

  --maroon:       #6E1B26;
  --maroon-deep:  #4A1019;
  --maroon-soft:  #8C2C38;

  --gold:         #C29A3C;
  --gold-light:   #E0C177;
  --gold-pale:    #F0E3C4;

  --charcoal:     #1C1714;
  --ink:          #2B2320;
  --muted:        #6E625A;
  --line:         #E3D9C8;

  --wa:           #1FA855;
  --wa-dark:      #168843;

  --shell:        1220px;
  --gutter:       clamp(1.1rem, 4vw, 2.5rem);
  --radius:       14px;
  --radius-lg:    22px;

  --sans: "Outfit", "Noto Sans Tamil", system-ui, -apple-system, sans-serif;
  --serif: "Cormorant Garamond", "Noto Sans Tamil", Georgia, serif;

  --shadow-sm: 0 2px 10px rgba(28, 23, 20, .06);
  --shadow:    0 14px 38px -14px rgba(28, 23, 20, .22);
  --shadow-lg: 0 30px 70px -28px rgba(28, 23, 20, .40);

  --nav-h: 170px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.72;
  color: var(--ink);
  background: var(--ivory);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.14;
  color: var(--charcoal);
  margin: 0 0 .55em;
  letter-spacing: .002em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--maroon); text-decoration: none; }
a:hover { color: var(--maroon-soft); }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

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

.skip-link {
  position: fixed;
  top: -100px; left: 12px;
  z-index: 1000;
  padding: .7rem 1.1rem;
  background: var(--maroon-deep);
  color: var(--gold-light);
  border-radius: 0 0 10px 10px;
  font-weight: 500;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: var(--gold-light); }

/* ---------- 3. Layout primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(4rem, 8vw, 7.5rem); }
.section-cream { background: var(--cream); }

.section-head {
  max-width: 46rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.section-sub { color: var(--muted); font-size: 1.05rem; }

.section-more {
  margin: clamp(2.2rem, 4vw, 3.2rem) 0 0;
  text-align: center;
}

.h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); }
.h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); }

.lede {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem);
  color: var(--ink);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--maroon);
}
.eyebrow-rule {
  width: 34px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.section-head .eyebrow { justify-content: center; }
.eyebrow-light { color: var(--gold-light); }

/* ---------- 4. Buttons (Liquid Fill Effect) ---------- */
.btn {
  --liquid-button-fill-width: -5%;
  --liquid-button-fill-height: 3px;
  --liquid-button-delay: 0s;
  --liquid-button-color: var(--maroon-deep);
  --liquid-button-background-color: var(--maroon);
  --btn-fg: #fff;

  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--btn-fg);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  
  background:
    linear-gradient(var(--liquid-button-color) 0 0) no-repeat calc(200% - var(--liquid-button-fill-width, -5%)) 100% / 250% var(--liquid-button-fill-height, 0.2em);
  background-color: var(--liquid-button-background-color);
  transition: background 0.35s var(--liquid-button-delay, 0s),
              color 0.35s 0.35s,
              background-position 0.35s calc(0.35s - var(--liquid-button-delay, 0s)),
              transform 0.2s var(--ease),
              box-shadow 0.28s var(--ease),
              border-color 0.28s var(--ease);
}

.btn > * { position: relative; z-index: 1; }

.btn:hover {
  --liquid-button-fill-width: 100%;
  --liquid-button-fill-height: 100%;
  --liquid-button-delay: 0.35s;
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
  color: var(--btn-hover-fg, #fff);
  border-color: var(--liquid-button-color);
}

.btn:active {
  transform: scale(0.95);
}

.btn-lg    { padding: 1rem 2rem; font-size: .95rem; }
.btn-block { width: 100%; }

.btn .ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

.btn-gold {
  --btn-fg: var(--maroon-deep);
  --btn-hover-fg: #fff;
  --liquid-button-color: var(--maroon-deep);
  --liquid-button-background-color: var(--gold);
  box-shadow: 0 8px 22px -10px rgba(194, 154, 60, .8);
}

.btn-maroon {
  --btn-fg: #fff;
  --btn-hover-fg: var(--maroon-deep);
  --liquid-button-color: var(--gold-light);
  --liquid-button-background-color: var(--maroon);
}

.btn-whatsapp {
  --btn-fg: #fff;
  --btn-hover-fg: #fff;
  --liquid-button-color: var(--wa-dark);
  --liquid-button-background-color: var(--wa);
}

.btn-ghost {
  --btn-fg: #fff;
  --btn-hover-fg: #fff;
  --liquid-button-color: rgba(255, 255, 255, 0.2);
  --liquid-button-background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn-outline {
  --btn-fg: #fff;
  --btn-hover-fg: #fff;
  --liquid-button-color: var(--maroon);
  --liquid-button-background-color: transparent;
  border-color: rgba(255, 255, 255, .55);
  backdrop-filter: blur(4px);
}
.btn-outline:hover {
  border-color: var(--gold);
}

.btn-outline-dark {
  --btn-fg: var(--charcoal);
  --btn-hover-fg: #fff;
  --liquid-button-color: var(--maroon);
  --liquid-button-background-color: transparent;
  border-color: var(--line);
}
.btn-outline-dark:hover {
  border-color: var(--maroon);
}

.btn-link {
  background: transparent !important;
  color: var(--maroon);
  padding-inline: 0;
  border: none;
  box-shadow: none;
}
.btn-link:hover {
  color: var(--maroon-soft);
  transform: none;
  box-shadow: none;
}
.btn-link .ico { transition: transform .28s var(--ease); }
.btn-link:hover .ico { transform: translateX(4px); }

/* ---------- 5. Header / nav ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: height .32s var(--ease), background-color .32s var(--ease),
              box-shadow .32s var(--ease), backdrop-filter .32s var(--ease);
}
.site-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 12, 10, .62), transparent);
  opacity: 1;
  transition: opacity .32s var(--ease);
  pointer-events: none;
}
.site-header.is-stuck {
  --nav-h: 120px;
  background: #ffffff;
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(28, 23, 20, .5);
}
.site-header.is-stuck::after { opacity: 0; }

body.is-locked .site-header {
  background: var(--white);
  backdrop-filter: none;
  box-shadow: none;
}
body.is-locked .site-header::after { opacity: 0; }
body.is-locked .brand-name { color: var(--charcoal); }
body.is-locked .brand-sub { color: var(--maroon); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

.brand { display: inline-flex; align-items: center; gap: .8rem; color: #fff; }
.brand-mark { display: inline-flex; justify-content: center; align-items: center; }
.brand-logo-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  margin-top: 5px;
  /* Make the logo pure white to contrast perfectly with the dark transparent header */
  filter: brightness(0) invert(1);
  transition: filter 0.3s var(--ease);
}
.site-header.is-stuck .brand-logo-img,
body.is-locked .brand-logo-img {
  /* Revert to original gold/maroon colors when the navbar background is white */
  filter: none;
}
.brand-logo-footer {
  width: 180px;
  height: 180px;
}
.bm-shield { fill: none; stroke: var(--gold); }
.bm-text { fill: var(--gold); font-family: var(--serif); font-size: 14px; font-weight: 800; }

.brand-words { display: none; }
.brand-name {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  color: #fff;
  transition: color .32s var(--ease);
}
.brand-sub {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
  transition: color .32s var(--ease);
}
.site-header.is-stuck .brand-name { color: var(--charcoal); }
.site-header.is-stuck .brand-sub  { color: var(--maroon); }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav-list { display: flex; align-items: center; gap: 1.9rem; }

.nav-link {
  position: relative;
  font-size: .86rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  padding-block: .4rem;
  transition: color .25s var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .32s var(--ease);
}
.nav-link:hover, .nav-link.is-active { color: var(--gold-light); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }

.site-header.is-stuck .nav-link { color: var(--ink); }
.site-header.is-stuck .nav-link:hover,
.site-header.is-stuck .nav-link.is-active { color: var(--maroon); }

.has-dropdown { position: relative; display: flex; align-items: center; }
.dropdown-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  margin-left: 2px;
  cursor: pointer;
  color: inherit;
}
.dropdown-toggle-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform .3s var(--ease);
}
.site-header .dropdown-toggle-btn { color: #fff; }
.site-header.is-stuck .dropdown-toggle-btn { color: var(--ink); }
.has-dropdown:hover .dropdown-toggle-btn svg,
.has-dropdown:focus-within .dropdown-toggle-btn svg {
  transform: rotate(180deg);
}
.has-dropdown::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -20px;
  height: 20px;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 15px 35px -10px rgba(28, 23, 20, 0.15);
  padding: 0.8rem 0;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s var(--ease-out);
  display: flex;
  flex-direction: column;
  z-index: 110;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown-menu li { list-style: none; border-bottom: none; }
.dropdown-menu a {
  display: block;
  padding: 0.6rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--charcoal);
  text-transform: capitalize;
  letter-spacing: 0.03em;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.dropdown-menu a:hover {
  background-color: var(--ivory);
  color: var(--maroon);
}

.nav-cta { padding: .6rem 1.3rem; font-size: .78rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  z-index: 100;
}
.site-header.is-stuck .nav-toggle { border-color: var(--line); }
.nav-toggle[aria-expanded="true"] { border-color: var(--charcoal); }

.nav-toggle-bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle-bars i {
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease), background-color .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i { background: var(--charcoal); }
.nav-toggle-bars i:nth-child(1) { top: 0; }
.nav-toggle-bars i:nth-child(2) { top: 6.25px; }
.nav-toggle-bars i:nth-child(3) { top: 12.5px; }
.site-header.is-stuck .nav-toggle-bars i { background: var(--charcoal); }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(20, 12, 10, .5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.nav-scrim.is-open { opacity: 1; }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--nav-h) + 3rem) 5rem;
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0B0706;
  overflow: hidden;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  /* Safe with the widened desktop source (hero-wide-*): the extra night sky on
     either side absorbs the crop, so the facade itself is never clipped. */
  object-fit: cover;
  object-position: center 20%;
  filter: brightness(1.06) saturate(1.04);
  animation: heroPanSubtle 12s ease-in-out infinite alternate;
}
@keyframes heroPanSubtle {
  from { transform: scale(1.0); }
  to   { transform: scale(1.15); }
}

.hero-video { opacity: 0; transition: opacity 1.1s var(--ease); }
.hero-video.is-live { opacity: 1; }

.hero-veil {
  position: absolute;
  inset: 0;
  background: none;
}
/* The hero copy occupies the left column so the facade is never covered.
   max-width is in ch/rem so the measure stays readable as the column grows,
   rather than the text stretching under the building. */
.hero-inner {
  position: relative;
  text-align: left;
  width: 100%;
}
/* NB: the % resolves against .shell (max 1220px), not the viewport — 52% here
   measured only ~593px and broke the headline onto three lines. 72% leaves the
   headline on two lines at every desktop width while still ending well before
   the veil clears, so the copy never sits on the lit facade. */
.hero-copy { max-width: min(52rem, 72%); }

/* As the viewport narrows there is less bright facade to protect and less room
   for a comfortable measure, so the column widens back out in steps until it
   is full width on phones (where the hero stacks instead of overlaying). */
@media (max-width: 1200px) { .hero-copy { max-width: min(46rem, 80%); } }
@media (max-width: 940px)  { .hero-copy { max-width: min(40rem, 88%); } }
@media (max-width: 760px)  { .hero-copy { max-width: none; } }

.hero .eyebrow {
  /* gold-pale rather than gold-light: at 12.5px this is small text and needs
     4.5:1, which gold-light missed against the lit facade. */
  color: var(--gold-pale);
  justify-content: flex-start;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

.hero-title { margin-bottom: 1.1rem; color: #fff; }
.hero-title-top {
  display: block;
  font-size: clamp(1.8rem, 3vw, 3.5rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .78), 0 6px 34px rgba(0, 0, 0, .68);
}
.hero-title-main {
  display: block;
  font-size: clamp(2.2rem, 4vw, 4.5rem);
  font-weight: 600;
  line-height: 1.1;
  /* gold-light, not gold: the darker gold sat at ~2.6:1 against the lit
     facade behind it. This reads as the same accent but clears AA. */
  color: var(--gold-light);
  letter-spacing: -.01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .78), 0 6px 34px rgba(0, 0, 0, .68);
}

.hero-lede {
  max-width: 33rem;
  margin-inline: 0;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(1rem, .95rem + .32vw, 1.16rem);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7), 0 2px 20px rgba(0, 0, 0, .55);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: .9rem;
  margin-top: 2.2rem;
}

.hero-scroll {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  width: 26px; height: 46px;
  display: grid;
  place-items: center;
}
.hero-scroll-line {
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--gold-light));
  animation: scrollCue 2.1s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollCue {
  0%, 100% { transform: scaleY(.35); opacity: .4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ---------- 6b. Inner-page banner ---------- */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 46vh, 480px);
  padding-block: calc(var(--nav-h) + 3.5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.page-hero-media { position: absolute; inset: 0; z-index: -1; }
.page-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  transform: scale(1.03);
}
.page-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 7, 6, 0.9) 0%, rgba(11, 7, 6, 0.4) 35%, transparent 60%);
}

.page-hero .eyebrow { color: var(--gold-light); }
.page-hero-title {
  margin: 0 0 .5rem;
  color: #fff;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.9rem);
  line-height: 1.06;
  text-shadow: 0 4px 34px rgba(0, 0, 0, .45);
}
.page-hero-lede {
  max-width: 44rem;
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(1rem, .96rem + .28vw, 1.12rem);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.4rem;
  font-size: .8rem;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .62);
}
.crumbs a { color: rgba(255, 255, 255, .82); }
.crumbs a:hover { color: var(--gold-light); }
.crumbs li { display: flex; align-items: center; gap: .5rem; }
.crumbs li + li::before {
  content: '';
  width: 5px; height: 5px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  transform: rotate(45deg);
  opacity: .8;
}
.crumbs [aria-current="page"] { color: var(--gold-light); }

/* ---------- 7. Stats ---------- */
.stats {
  background: var(--maroon-deep);
  color: var(--gold-pale);
  padding-block: clamp(2.2rem, 4vw, 3.4rem);
  position: relative;
}
.stats::before,
.stats::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.stats::before { top: 0; }
.stats::after  { bottom: 0; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.stat {
  text-align: center;
  padding-inline: .5rem;
  position: relative;
}
.stat + .stat::before {
  content: '';
  position: absolute;
  left: 0; top: 18%;
  width: 1px; height: 64%;
  background: rgba(224, 193, 119, .28);
}
.stat-num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  display: block;
  margin-top: .55rem;
  font-size: .74rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(240, 227, 196, .74);
}

/* ---------- 8. Frames (shared image treatment) ---------- */
.frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.frame-gold::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(224, 193, 119, .5);
  border-radius: calc(var(--radius-lg) - 8px);
  pointer-events: none;
}
.frame:hover img { transform: scale(1.045); }

/* ---------- 9. About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about-visual { position: relative; }
.about-visual .frame { aspect-ratio: 1 / 1; }

.about-badge {
  position: absolute;
  right: -14px; bottom: -22px;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.3rem;
  background: var(--maroon-deep);
  color: var(--gold-pale);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 78%;
}
.about-badge-num {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
}
.about-badge-txt { font-size: .78rem; line-height: 1.4; letter-spacing: .04em; }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.6rem 0 1.9rem;
}
.chip {
  padding: .42rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--maroon);
}

.about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }

/* ---------- 10. Feature grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.8rem;
}

@media (min-width: 1150px) {
  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  /* If there are exactly 6 items, center the 5th and 6th in the 4-column grid */
  .feature:nth-child(5):nth-last-child(2) {
    grid-column: 2;
  }
}
.feature {
  background: var(--white);
  padding: clamp(1.8rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.feature:hover { 
  transform: translateY(-6px);
  box-shadow: 0 15px 35px -10px rgba(28, 23, 20, 0.12);
  border-color: transparent;
}

.feature-ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1.1rem;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--gold-pale), #fff);
  border: 1px solid rgba(194, 154, 60, .35);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.feature-ico svg { width: 23px; height: 23px; fill: var(--maroon); transition: fill .35s var(--ease); }
.feature:hover .feature-ico {
  background: linear-gradient(145deg, var(--maroon), var(--maroon-deep));
  transform: rotate(-4deg);
}
.feature:hover .feature-ico svg { fill: var(--gold-light); }

.feature-t { font-size: 1.22rem; margin-bottom: .35rem; }
.feature-d { font-size: .93rem; color: var(--muted); margin: 0; line-height: 1.6; }

/* ---------- 11. Event cards ---------- */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(1.5rem, 2.8vw, 2.5rem);
}
.event-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.event-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }

.event-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.event-link:hover { color: inherit; }

/* Fixed 3:2 aspect-ratio via padding-top for full cross-browser compatibility.
   Images are absolutely positioned inside to fill the box. */
.event-media {
  position: relative;
  width: 100%;
  padding-top: 66.6666%; /* 3:2 Aspect Ratio */
  flex-shrink: 0;
  overflow: hidden;
}
.event-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .85s var(--ease), filter .5s var(--ease);
  filter: saturate(.94) brightness(.94);
}
.event-card:hover .event-media img { transform: scale(1.08); filter: saturate(1.05) brightness(1); }

.event-body {
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.4rem);
  background: transparent;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.event-body::after {
  content: 'Learn more \2192';
  display: inline-flex;
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--maroon);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.event-card:hover .event-body::after {
  color: var(--gold);
  transform: translateX(4px);
}
.event-ico {
  display: none !important;
}
.event-t { 
  color: var(--charcoal); 
  font-size: 1.65rem; 
  font-weight: 500;
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: -0.01em;
}
.event-t::before {
  content: '';
  display: block;
  width: 3px;
  height: 1.2em;
  background: var(--gold);
  border-radius: 2px;
  opacity: 0.8;
  transition: opacity .35s var(--ease), height .35s var(--ease);
}
.event-card:hover .event-t::before {
  opacity: 1;
  height: 1.4em;
}

.event-d {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- 12. Video section ---------- */
.video-sec {
  background:
    linear-gradient(rgba(28, 16, 14, .9), rgba(28, 16, 14, .9)),
    var(--charcoal);
  color: rgba(255, 255, 255, .82);
}
.section-head-light .h2,
.section-head-light .section-sub { color: #fff; }
.section-head-light .section-sub { color: rgba(255, 255, 255, .72); }

.video-frame {
  position: relative;
  max-width: 940px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(224, 193, 119, .28);
  background: #000;
  aspect-ratio: 16 / 9;
}
.video-el { width: 100%; height: 100%; object-fit: cover; }

.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background: rgba(20, 12, 10, .28);
  border: 0;
  cursor: pointer;
  transition: opacity .35s var(--ease), background-color .35s var(--ease);
}
.video-play::before {
  content: '';
  position: absolute;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 0 0 0 rgba(224, 193, 119, .5);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 193, 119, .45); }
  70%  { box-shadow: 0 0 0 26px rgba(224, 193, 119, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 193, 119, 0); }
}
.video-play svg {
  position: relative;
  width: 34px; height: 34px;
  fill: var(--maroon-deep);
  margin-left: 5px;
}
.video-play:hover { background: rgba(20, 12, 10, .12); }
.video-play.is-hidden { opacity: 0; pointer-events: none; }

/* ---------- 13. Facilities ---------- */
.fac-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}
.fac-row:last-child { margin-bottom: 0; }
.fac-row-rev .fac-media { order: 2; }

.fac-media .frame { aspect-ratio: var(--ar, 3 / 2); }

.fac-step {
  display: block;
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(194, 154, 60, .65);
  margin-bottom: .3rem;
}
.fac-body p { color: var(--muted); }

.tick-list { margin-top: 1.4rem; display: grid; gap: .6rem; }
.tick-list li {
  position: relative;
  padding-left: 1.9rem;
  font-size: .95rem;
  color: var(--ink);
}
.tick-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .45em;
  width: 18px; height: 10px;
  border-left: 1.8px solid var(--gold);
  border-bottom: 1.8px solid var(--gold);
  transform: rotate(-45deg) scale(.72);
  transform-origin: left center;
}

/* ---------- 14. Gallery ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
.filter {
  padding: .58rem 1.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  font-size: .86rem;
  letter-spacing: .06em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all .35s var(--ease-out);
}
.filter:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 999px;
}
.filter:hover {
  color: var(--maroon);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(194, 154, 60, 0.15);
}
.filter:active {
  transform: translateY(0) scale(0.96);
}
.filter.is-active {
  background: var(--maroon);
  border-color: var(--maroon);
  color: var(--gold-pale);
  box-shadow: 0 6px 15px rgba(110, 27, 38, 0.25);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  align-items: start;
}

/* ---------- 14b. Animated Marquee Gallery ---------- */
.marquee-wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  padding: 1rem 0 2rem;
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 1.1rem;
}
.gallery-marquee {
  display: flex;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: scrollMarquee 30s linear infinite;
}
.marquee-track:hover .gallery-marquee {
  animation-play-state: paused;
}
@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100% - 1.1rem)); }
}
.gallery-marquee .gal-item {
  width: 320px;
  flex-shrink: 0;
}
.gallery-marquee .gal-wide {
  width: 480px;
}
.gal-wide { grid-column: span 2; }

.gal-item {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(28, 23, 20, 0.04);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.gal-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -10px rgba(28, 23, 20, .16), 0 8px 24px -12px rgba(194, 154, 60, .22);
}
.gal-item.is-hidden { display: none; }
.gal-item.is-entering { opacity: 0; transform: scale(.9) translateY(20px) rotate(1deg); }

.gal-btn {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--cream-deep);
  cursor: pointer;
  aspect-ratio: var(--ar, 3 / 2);
  overflow: hidden;
}
.gal-wide .gal-btn {
  aspect-ratio: var(--ar, 3 / 2);
}
.gal-btn img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out), filter .5s var(--ease);
}
.gal-btn:hover img { transform: scale(1.08); }

.gal-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(74, 16, 25, 0) 10%, rgba(74, 16, 25, 0.5) 60%, rgba(74, 16, 25, 0.85) 100%);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}
.gal-btn:hover .gal-overlay,
.gal-btn:focus-visible .gal-overlay { opacity: 1; }

.gal-view {
  padding: .55rem 1.4rem;
  border: 1px solid var(--gold-light);
  border-radius: 999px;
  color: #fff;
  background: rgba(110, 27, 38, 0.4);
  backdrop-filter: blur(4px);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: translateY(15px);
  opacity: 0;
  transition: transform .45s var(--ease-out), opacity .4s var(--ease);
}
.gal-btn:hover .gal-view {
  transform: translateY(0);
  opacity: 1;
  background: var(--maroon);
  border-color: var(--gold);
}

.gal-empty { text-align: center; color: var(--muted); margin-top: 2rem; }


/* ---------- Service 5-Image Mosaic ---------- */
.service-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}
.service-gallery .gal-item {
  grid-column: span 1;
}
.service-gallery .gal-item.gal-wide {
  grid-column: span 1;
}
.service-gallery .gal-item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}
.service-gallery .gal-btn {
  aspect-ratio: 1;
}
.service-gallery .gal-item:nth-child(1) .gal-btn {
  height: 100%;
  aspect-ratio: auto;
}

@media (max-width: 768px) {
  .service-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .service-gallery .gal-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
  }
  .service-gallery .gal-item:nth-child(1) .gal-btn {
    aspect-ratio: 21/9;
  }
}
@media (max-width: 480px) {
  .service-gallery {
    grid-template-columns: 1fr;
  }
  .service-gallery .gal-item,
  .service-gallery .gal-item:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .service-gallery .gal-btn,
  .service-gallery .gal-item:nth-child(1) .gal-btn {
    aspect-ratio: 4/3;
  }
}

/* 3D Grid-to-Stack Morph Gallery
   Height is driven from JS (initGalleryStack): tight around the collapsed
   deck at rest, expanded to the full grid on hover. overflow keeps the
   off-screen rows of the un-hovered grid from poking past that height. */
.gallery-stack-container {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  margin-block: 2.2rem;
  touch-action: pan-y;
}

#galleryGrid {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1rem, 1.8vw, 1.4rem);
  transform-style: preserve-3d;
  perspective: 1200px;
  cursor: pointer;
}

.gal-item {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  box-shadow: 0 4px 15px rgba(28, 23, 20, 0.04);
  border: 2px solid var(--white);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.gal-item:hover {
  border-color: var(--gold-light);
  box-shadow: 0 20px 45px rgba(28, 23, 20, 0.16), 0 0 20px rgba(194, 154, 60, 0.1);
}

/* ---------- 14b. Booking process ---------- */
.process { background: var(--ivory); }

.proc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
  counter-reset: none;
}
.proc-step {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.1rem) clamp(1.3rem, 2.4vw, 1.8rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.proc-step:hover {
  transform: translateY(-6px);
  border-color: rgba(194, 154, 60, .55);
  box-shadow: var(--shadow);
}
/* connecting rule between steps on wide screens */
.proc-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: clamp(2.4rem, 4vw, 3rem);
  right: calc(-1 * clamp(1.2rem, 2.4vw, 2rem) - 1px);
  width: clamp(1.2rem, 2.4vw, 2rem);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.proc-num {
  display: block;
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(194, 154, 60, .7);
  margin-bottom: .7rem;
  transition: color .35s var(--ease);
}
.proc-step:hover .proc-num { color: rgba(194, 154, 60, .16); }

.proc-t { font-size: 1.22rem; margin-bottom: .35rem; }
.proc-d { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--muted); }

/* ---------- 15. CTA ---------- */
.cta {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8rem);
  text-align: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.cta-bg { position: absolute; inset: 0; z-index: -1; }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(74, 16, 25, .88), rgba(20, 10, 8, .92));
}
.cta-inner { position: relative; max-width: 44rem; }
.cta-h { color: #fff; }
.cta-p { color: rgba(255, 255, 255, .82); font-size: 1.06rem; }
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin-top: 2rem;
}

/* ---------- 16. Enquiry + contact ---------- */
.enquire-sec { background: var(--cream); }

.enquire-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: start;
}

.enquire-form-wrap,
.contact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.8rem);
  box-shadow: var(--shadow-sm);
}

.form-note { font-size: .93rem; color: var(--muted); }

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 1.8rem;
}
.field { display: flex; flex-direction: column; gap: .42rem; min-width: 0; }
.field-full { grid-column: 1 / -1; }

.field label {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.req { color: var(--maroon); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .82rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ivory);
  font-family: inherit;
  font-size: .97rem;
  color: var(--ink);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 118px; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236E625A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(194, 154, 60, .18);
}
.field.has-error input,
.field.has-error select { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179, 38, 30, .1); }

.err { margin: 0; font-size: .8rem; color: #B3261E; }
.form-privacy {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 1rem 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--muted);
}
.form-privacy svg { width: 16px; height: 16px; flex: none; margin-top: .18em; fill: var(--gold); }

.form-privacy {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 1rem 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--muted);
}
.form-privacy svg { width: 16px; height: 16px; flex: none; margin-top: .18em; fill: var(--gold); }

.form-status { margin: .9rem 0 0; font-size: .88rem; color: var(--muted); text-align: center; }
.form-status.is-ok { color: var(--wa-dark); }
.form-status.is-bad { color: #B3261E; }

/* contact card */
.contact-card .h3 { font-size: 1.5rem; }
.contact-list { display: grid; gap: 1.2rem; margin: 1.4rem 0 1.6rem; }
.contact-list li { display: flex; gap: .9rem; align-items: flex-start; }
.contact-ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 11px;
  background: var(--cream);
  border: 1px solid var(--line);
}
.contact-ico svg { width: 19px; height: 19px; fill: var(--maroon); }
.contact-k {
  display: block;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .18rem;
}
.contact-v {
  display: block;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--charcoal);
}
a.contact-v { font-size: 1.15rem; font-weight: 500; color: var(--maroon); }

.contact-actions { display: grid; gap: .6rem; }

.map-wrap {
  margin-top: 1.6rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 11;
  background: var(--cream);
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* ---------- 16b. Page-specific shared components ---------- */

/* contact "three ways to reach us" cards */
.reach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
}
.reach-card {
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.reach-card:hover {
  transform: translateY(-6px);
  border-color: rgba(194, 154, 60, .55);
  box-shadow: var(--shadow);
}
.reach-ico {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-pale), #fff);
  border: 1px solid rgba(194, 154, 60, .4);
}
.reach-ico svg { width: 25px; height: 25px; fill: var(--maroon); }
.reach-t { font-size: 1.4rem; margin-bottom: .3rem; }
.reach-d { font-size: .92rem; color: var(--muted); margin-bottom: 1rem; }
.reach-link {
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--maroon);
  border-bottom: 1px solid rgba(194, 154, 60, .6);
  padding-bottom: 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.reach-link:hover { color: var(--maroon-deep); border-color: var(--maroon); }

/* reversed enquiry-style split (contact page) */
.enquire-grid-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }

/* map sizing variants */
.map-wrap-tall { margin-top: 0; aspect-ratio: 4 / 4.2; }
.map-wrap-page { margin-top: 0; aspect-ratio: 16 / 10; }

/* directions helper box on the contact page */
.landmark-box {
  margin-top: 1.4rem;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.landmark-h { font-size: 1.3rem; margin-bottom: .4rem; }
.landmark-box .tick-list { margin-top: 1rem; }

/* "what to have ready" panel on the enquiry page */
.side-note {
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.side-note-h {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: .4rem;
}

/* per-occasion CTA under a facility row */
.fac-cta { margin-top: 1.7rem; }

/* honest note under the gallery grid */
.gal-note {
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  max-width: 44rem;
  text-align: center;
  font-size: .93rem;
  color: var(--muted);
}

.contact-v-sm { font-size: .93rem; color: var(--muted); line-height: 1.6; }

/* ---------- 17. Footer ---------- */
.site-footer {
  background: var(--charcoal);
  color: rgba(255, 255, 255, .62);
  padding-top: clamp(3rem, 6vw, 5rem);
  font-size: .93rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.25fr;
  gap: clamp(1.8rem, 3.5vw, 3rem);
  padding-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.brand-mark-lg { display: inline-block; margin-bottom: 1rem; max-width: 100%; }

.footer-name {
  font-family: var(--serif);
  font-size: 1.42rem;
  line-height: 1.2;
  color: #fff;
  margin-bottom: .8rem;
}
.footer-name span {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: .3rem;
}
.footer-desc { font-size: .9rem; line-height: 1.7; max-width: 30ch; margin-top: 1rem; }

.footer-h {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.1rem;
}
.footer-col ul { display: grid; gap: .55rem; }
.footer-col a { color: rgba(255, 255, 255, .62); transition: color .25s var(--ease), padding-left .25s var(--ease); }
.footer-col a:hover { color: var(--gold-light); padding-left: 4px; }

.footer-contact li { display: flex; align-items: center; gap: 0.6rem; }
.footer-contact a { font-weight: 500; color: rgba(255, 255, 255, .82); display: block; }
.fc-icon { width: 18px; height: 18px; flex: none; fill: var(--gold-light); }
.footer-addr {
  margin-top: 1.1rem;
  font-size: .86rem;
  line-height: 1.65;
  color: #fff;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}
.footer-addr .fc-icon {
  margin-top: .2rem;
  flex: none;
}
.footer-addr a {
  color: inherit;
  transition: color .3s var(--ease);
}
.footer-addr a:hover {
  color: var(--gold);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  padding-block: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .84rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--gold-light); }

/* ---------- 18. Floating dock + back to top ---------- */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 1px;
  background: rgba(255, 255, 255, .12);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 26px -14px rgba(0, 0, 0, .5);
}
.dock-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem .5rem;
  color: #fff;
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .07em;
}
.dock-btn:hover { color: #fff; }
.dock-btn svg { width: 18px; height: 18px; fill: currentColor; }
.dock-call { background: var(--maroon); }
.dock-wa   { background: var(--wa); }

/* ---------- 19. Lightbox ---------- */
/* When the lightbox carries the HTML `hidden` attribute, ensure it truly
   disappears — `display:grid` on `.lightbox` would otherwise override the
   browser's built-in `[hidden]{display:none}` rule. */
.lightbox[hidden] { display: none !important; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(.4rem, 2vw, 1.5rem);
  padding: clamp(3.6rem, 7vw, 4.5rem) clamp(.6rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
  background: rgba(14, 8, 7, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-out);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lb-figure {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.lb-figure img {
  max-width: min(100%, 940px);
  max-height: calc(100svh - 12rem);
  width: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .95), 0 0 40px rgba(194, 154, 60, 0.05);
  transform: scale(.93) translateY(15px);
  opacity: 0;
  transition: transform .5s var(--ease-spring), opacity .4s var(--ease);
}
.lightbox.is-open .lb-figure img { transform: scale(1) translateY(0); opacity: 1; }
.lb-figure img.is-swapping { opacity: 0; transform: scale(.96) translateY(5px); transition: transform .25s var(--ease), opacity .25s var(--ease); }

.lb-cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .8rem;
  color: rgba(255, 255, 255, .72);
  font-size: .88rem;
  text-align: center;
  max-width: 46rem;
}
.lb-count { color: var(--gold-light); font-size: .78rem; letter-spacing: .12em; }

.lb-nav, .lb-close {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.lb-nav:hover, .lb-close:hover { background: rgba(224, 193, 119, .22); border-color: var(--gold-light); transform: scale(1.05); }
.lb-nav:active, .lb-close:active { transform: scale(0.95); }
.lb-nav svg, .lb-close svg { width: 20px; height: 20px; fill: #fff; }

.lb-close { position: absolute; top: clamp(.8rem, 2.5vw, 1.6rem); right: clamp(.8rem, 3vw, 2rem); }

body.is-locked { overflow: hidden; }

/* ---------- 20. Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--d, 0) * 95ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* =====================================================================
   21. Responsive
   ===================================================================== */

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- tablet / mobile nav --- */
@media (max-width: 940px) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    height: auto;
    max-height: calc(100dvh - var(--nav-h));
    width: 100%;
    z-index: 99;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 1.5rem 1.8rem 2.5rem;
    background: var(--white);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .4);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: transform .3s var(--ease), opacity .3s var(--ease), visibility .3s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li { border-bottom: 1px solid var(--line); }

  .nav-link,
  .site-header .nav-link,
  .site-header.is-stuck .nav-link {
    display: block;
    padding: 1rem 0;
    font-size: 1rem;
    letter-spacing: .08em;
    color: var(--charcoal);
  }
  .nav-link::after { display: none; }
  .site-header .nav-link.is-active,
  .site-header.is-stuck .nav-link.is-active { color: var(--maroon); }

  .nav-cta {
    align-self: center;
    width: auto;
    margin-top: 1.5rem;
    padding: 0.8rem 2.5rem;
  }

  .has-dropdown { display: flex; flex-direction: column; position: relative; align-items: stretch; }
  
  .dropdown-toggle-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    margin: 0;
    z-index: 2;
  }
  .site-header .dropdown-toggle-btn,
  .site-header.is-stuck .dropdown-toggle-btn {
    color: var(--charcoal);
  }
  .dropdown-toggle-btn svg {
    width: 20px;
    height: 20px;
  }
  .has-dropdown.is-expanded .dropdown-toggle-btn svg {
    transform: rotate(180deg);
  }

  .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    padding: 0 0 0.5rem 1rem;
    min-width: 100%;
    z-index: 1;
    background: transparent;
    display: none;
  }
  .has-dropdown.is-expanded .dropdown-menu {
    display: flex;
  }
  
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown:focus-within .dropdown-menu {
    transform: none;
  }
  .dropdown-menu a {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: var(--charcoal);
  }

  .nav-cta { margin-top: 1.8rem; width: 100%; padding: .9rem 1.3rem; font-size: .85rem; }
}

@media (max-width: 900px) {
  .about-grid,
  .fac-row,
  .enquire-grid { grid-template-columns: minmax(0, 1fr); }

  .fac-row-rev .fac-media { order: 0; }
  .about-badge { right: 12px; bottom: -18px; }

  .enquire-grid-rev { grid-template-columns: minmax(0, 1fr); }
  .enquire-grid { gap: 1.6rem; }
  .map-wrap-tall { aspect-ratio: 16 / 11; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
  .stat:nth-child(3)::before { display: none; }

  /* Phones and tablets stack instead of overlaying */
  .hero {
    min-height: 0;
    display: block;
    padding: 0;
    background: var(--charcoal);
    isolation: auto;
  }
  .hero-media {
    position: relative;
    inset: auto;
    z-index: 0;
    padding-top: 0;
    background: #0B0706;
  }
  .hero-img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-position: center bottom;
  }
  .hero-veil {
    inset: auto 0 0 0;
    height: 40%;
    background: none;
  }
  .hero-inner {
    position: relative;
    z-index: 1;
    padding: 3rem 1.8rem;
    background: linear-gradient(180deg, #241D19 0%, var(--charcoal) 100%);
    border-top: 1px solid rgba(194, 154, 60, 0.25);
    border-radius: 2rem 2rem 0 0;
    margin-top: -2.5rem;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.6);
    text-align: center;
  }
  .hero .eyebrow { justify-content: center; }
  .hero-title-main { color: var(--gold-light); }
  .hero-lede { font-size: 1.05rem; line-height: 1.6; margin-inline: auto; color: rgba(255,255,255,0.9); }
  .hero-scroll { display: none; }
  .hero-actions { justify-content: center; margin-top: 2rem; }
}

@media (max-width: 1024px) {
  :root { --nav-h: 150px; }
  .site-header.is-stuck { --nav-h: 100px; }
  .brand-mark { width: 140px; height: 140px; }
  .brand-mark-lg { width: 160px; height: 160px; }
}

@media (max-width: 760px) {
  :root { --nav-h: 120px; }
  .site-header.is-stuck { --nav-h: 90px; }

  .brand-name { font-size: 1.25rem; }
  .brand-sub  { font-size: .65rem; }
  .brand-mark { width: 110px; height: 110px; }
  .brand-mark-lg { width: 120px; height: 120px; }
  .brand-logo-img { width: 100%; height: 100%; }

  /* Phones button stacking */
  .hero-actions { gap: .7rem; margin-top: 1.6rem; }
  .hero-actions .btn { flex: 1 1 auto; min-width: 0; }
  .hero-actions .btn-ghost { flex-basis: 100%; }

  .gal-wide { grid-column: span 1; }
  .gallery-stack-container { height: auto; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  .form { grid-template-columns: minmax(0, 1fr); }

  /* floating dock takes over the bottom edge */
  .dock { display: none !important; }
  /* body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); } */

  .event-d { max-height: 6rem; opacity: 1; }

  .lightbox { grid-template-columns: 1fr; grid-template-areas: 'fig'; }
  .lb-figure { grid-area: fig; }
  .lb-nav {
    position: absolute;
    bottom: calc(1.2rem + env(safe-area-inset-bottom));
    width: 44px; height: 44px;
    background: rgba(255, 255, 255, .1);
  }
  .lb-prev { left: 22%; }
  .lb-next { right: 22%; }
  .lb-figure img { max-height: calc(100svh - 15rem); }
  .lb-cap { font-size: .82rem; }
}

@media (max-width: 480px) {
  .site-header { --nav-h: 110px; }
  .site-header.is-stuck { --nav-h: 80px; }
  .brand-mark { width: 100px; height: 100px; }
  .brand-mark-lg { width: 100px; height: 100px; }
  .brand-name { font-size: 1.2rem; }
  .btn { padding: .78rem 1.15rem; font-size: .82rem; letter-spacing: .04em; }
  .btn-lg { padding: .9rem 1.3rem; font-size: .85rem; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  .stats-grid { gap: 1.4rem .6rem; }
  .stat-label { font-size: .66rem; letter-spacing: .12em; }

  .about-badge {
    position: static;
    margin-top: 1rem;
    max-width: 100%;
    border-radius: var(--radius);
  }

  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { gap: .4rem; }
  .filter { padding: .48rem 1rem; font-size: .78rem; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-desc { max-width: none; }
  .footer-bottom { justify-content: center; text-align: center; }

  .lb-prev { left: 12%; }
  .lb-next { right: 12%; }
}

@media (max-width: 360px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .dock-btn span { font-size: .78rem; }
}

/* --- pointer / hover capability --- */
@media (hover: none) {
  .event-d { max-height: 6rem; opacity: 1; }
  .gal-overlay { opacity: 0; }
}

/* --- reduced motion --- */
@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; transform: none; }
  .hero-img { animation: none; transform: none; }
  .floating-wa { animation: none !important; }
}

/* --- Input Prefix --- */
.input-prefix {
  position: relative;
  display: flex;
  align-items: center;
}
.prefix-txt {
  position: absolute;
  left: 1rem;
  color: var(--text-light);
  pointer-events: none;
  font-weight: 500;
}
.input-prefix input {
  padding-left: 2.8rem;
}

/* --- print --- */
@media print {
  .site-header, .dock, .floating-wa, .hero-scroll, .video-sec, .map-wrap, .lightbox { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .hero { min-height: auto; }
}

@keyframes waBlink {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* =====================================================================
   22. Motion system
   Reveal variants, card craft, hover polish. Everything here is additive:
   remove this block and the site still works, just flatter.
   ===================================================================== */

:root {
  --ease-out:   cubic-bezier(.16, 1, .3, 1);      /* long, settled landing */
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1); /* slight overshoot      */
  --rv-dur: .95s;
}

/* ---------- 22.1 Reveal variants -------------------------------------
   .reveal keeps working as before. Add data-reveal="…" for a different
   entrance; --d (set from data-delay, or auto-staggered by JS) offsets it. */
.reveal {
  --rv-y: 26px;
  --rv-x: 0px;
  --rv-s: 1;
  --rv-rot: 0deg;
  opacity: 0;
  transform: translate3d(var(--rv-x), var(--rv-y), 0) scale(var(--rv-s)) rotate(var(--rv-rot));
  transition:
    opacity   var(--rv-dur) var(--ease-out),
    transform var(--rv-dur) var(--ease-out),
    filter    var(--rv-dur) var(--ease-out),
    clip-path var(--rv-dur) var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
/* the transform hint is only worth carrying while the element is in flight */
.reveal:not(.is-in) { will-change: transform, opacity; }
.reveal.is-in { will-change: auto; }

.reveal[data-reveal="fade"]  { --rv-y: 0px; }
.reveal[data-reveal="up"]    { --rv-y: 44px; }
.reveal[data-reveal="left"]  { --rv-x: -46px; --rv-y: 0px; }
.reveal[data-reveal="right"] { --rv-x: 46px;  --rv-y: 0px; }
.reveal[data-reveal="zoom"]  { --rv-y: 0px; --rv-s: .93; }
/* filter only appears on the variant that needs it — a blur(0px) on every
   revealed element would force needless GPU rasterisation site-wide */
.reveal[data-reveal="blur"] { --rv-y: 20px; filter: blur(14px); }
.reveal[data-reveal="blur"].is-in { filter: blur(0); }
.reveal[data-reveal="rise"]  { --rv-y: 54px; --rv-s: .97; --rv-rot: .6deg; }

/* Curtain: the image is uncovered bottom-to-top instead of sliding in.
   Only ever applied to boxes that already clip their contents (.frame,
   .fac-media) — clip-path on a box with overhanging decoration would cut it. */
.reveal[data-reveal="mask"] {
  --rv-y: 0px;
  --rv-s: 1.06;
  opacity: 1;
  clip-path: inset(0 0 100% 0);
}
.reveal[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }

/* Headline words lifting one after another (built by initSplitHeadings) */
.word-rise { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word-rise > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(105%) rotate(3deg);
  opacity: 0;
  transition: transform .85s var(--ease-out), opacity .6s var(--ease-out);
  transition-delay: calc(var(--w, 0) * 55ms);
}
.is-in .word-rise > i,
.word-rise.is-in > i { transform: none; opacity: 1; }

/* ---------- 22.2 Images: load-in, and never a squashed picture --------
   Each media box takes its --ar from the file's own dimensions, so
   object-fit: cover has nothing left to crop. */
.frame img,
.event-media img,
.gal-btn img { backface-visibility: hidden; }

/* Blur-up: a photo fades and sharpens as it decodes rather than snapping in */
img[data-fade] {
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.03);
  transition: opacity .7s var(--ease-out), filter .7s var(--ease-out), transform .7s var(--ease-out);
}
img[data-fade].is-loaded {
  opacity: 1;
  filter: none;
  transform: none;
  /* hand the transform back to the slow hover zoom once the photo has landed */
  transition: opacity .7s var(--ease-out), filter .7s var(--ease-out), transform .85s var(--ease);
}
/* the card's own hover zoom must win over the load-in transform */
.event-card:hover .event-media img[data-fade].is-loaded,
.gal-btn:hover img[data-fade].is-loaded { transform: scale(1.08); }
.frame:hover img[data-fade].is-loaded { transform: scale(1.045); }

/* ---------- 22.3 Card craft ------------------------------------------
   Tilt is driven by JS (--tx/--ty in degrees, --mx/--my as a 0-1 pointer
   position). The glow and sheen are pure CSS on top of it. */
/* The second selector is not redundant: .reveal.is-in sets `transform: none`,
   and a card that has finished revealing still needs to be tiltable. .tilt is
   only ever added after an element has revealed, so the two never overlap. */
.tilt,
.reveal.is-in.tilt {
  transform-style: preserve-3d;
  transform:
    perspective(900px)
    rotateX(var(--tx, 0deg))
    rotateY(var(--ty, 0deg))
    translateY(var(--lift, 0px))
    scale(var(--tscale, 1));
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.tilt.is-tilting { transition: transform .12s linear, box-shadow .5s var(--ease-out); }

/* Cursor-following highlight — reads as light catching a polished surface */
.sheen { position: relative; }
.sheen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--ease);
  background: radial-gradient(
    340px circle at calc(var(--mx, .5) * 100%) calc(var(--my, .5) * 100%),
    rgba(255, 255, 255, .22),
    rgba(224, 193, 119, .10) 42%,
    transparent 68%);
}
.sheen:hover::before,
.sheen:focus-within::before { opacity: 1; }

/* Gold hairline that draws itself around a card on hover */
.edge-glow { position: relative; }
.edge-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.edge-glow:hover::after,
.edge-glow:focus-within::after {
  border-color: rgba(224, 193, 119, .55);
  box-shadow: inset 0 0 0 1px rgba(224, 193, 119, .16), 0 0 26px -8px rgba(194, 154, 60, .5);
}

.event-card { --lift: 0px; }
.event-card:hover { --lift: -9px; box-shadow: var(--shadow-lg); }
/* the tilt transform owns the element now, so the old translate is retired */
.event-card.tilt:hover,
.reveal.is-in.event-card.tilt:hover { transform:
    perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg))
    translateY(var(--lift)) scale(var(--tscale, 1)); }

.gal-item { --lift: 0px; }
.gal-item:hover { --lift: -8px; }
.gal-item.tilt:hover,
.reveal.is-in.gal-item.tilt:hover { transform:
    perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg))
    translateY(var(--lift)) scale(var(--tscale, 1)); }

/* Feature tiles: icon springs, copy nudges, a gold rail grows on the left */
.feature { position: relative; overflow: hidden; }
.feature::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s var(--ease-out);
}
.feature:hover::before { transform: scaleY(1); }
.feature:hover { transform: translateY(-4px); }
.feature .feature-ico { transition: background .35s var(--ease), transform .5s var(--ease-spring); }
.feature:hover .feature-ico { transform: rotate(-6deg) scale(1.09); }
.feature-t { transition: color .35s var(--ease), transform .45s var(--ease-out); }
.feature:hover .feature-t { color: var(--maroon); transform: translateX(3px); }

/* Chips and tick marks get a little life too */
.chip { transition: transform .35s var(--ease-spring), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.chip:hover { transform: translateY(-3px); background: var(--maroon); border-color: var(--maroon); color: var(--gold-pale); }

/* ---------- 22.4 Buttons: liquid fill animation ---------------- */

/* ---------- 22.5 Section furniture ----------------------------------- */
.eyebrow-rule { transform-origin: left center; transition: transform .8s var(--ease-out) .15s; }
.reveal:not(.is-in) .eyebrow-rule,
.eyebrow.reveal:not(.is-in) .eyebrow-rule { transform: scaleX(0); }

/* Reading-progress hairline under the header */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  z-index: 200;
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--maroon), var(--gold), var(--gold-light));
  pointer-events: none;
}

/* Stat numerals settle in place as they count */
.stat-num { display: inline-block; transition: transform .6s var(--ease-spring); }
.stat:hover .stat-num { transform: translateY(-3px) scale(1.04); }

/* ---------- 22.6 Motion opt-out --------------------------------------
   Reduced motion means no movement — but the content must still be visible,
   so every hidden state is unwound here rather than merely sped up. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .word-rise > i { transform: none !important; opacity: 1 !important; }
  img[data-fade] { opacity: 1 !important; filter: none !important; transform: none !important; }
  .tilt { transform: none !important; }
  .btn::after, .sheen::before { display: none; }
  .scroll-progress { display: none; }
  .eyebrow-rule { transform: none !important; }
  .floating-wa { animation: none !important; }
}

/* =====================================================================
   23. Occasion rows (services.html)
   Alternating image / copy rows built on the existing .fac-row component,
   with the photo and the heading both linking through to that occasion.
   ===================================================================== */
.occasion-rows { margin-top: clamp(2rem, 4vw, 3rem); }

/* .frame is an <a> here, so it needs to lay out as a block */
a.frame {
  display: block;
  color: inherit;
}
a.frame:hover { color: inherit; }

/* a gold wash confirms the photograph is a link, not just decoration */
a.frame::before {
  content: '';
  position: absolute;
  inset: 0;
  /* below .frame-gold::after, so the gold hairline stays visible over the wash */
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(74, 16, 25, 0) 45%, rgba(74, 16, 25, .55));
  opacity: 0;
  transition: opacity .45s var(--ease);
}
a.frame:hover::before,
a.frame:focus-visible::before { opacity: 1; }

.fac-title-link {
  color: inherit;
  transition: color .3s var(--ease);
}
.fac-title-link:hover,
.fac-row:hover .fac-title-link { color: var(--maroon); }

/* the arrow on the Learn More button slides as the row is hovered */
.fac-cta .btn .ico { transition: transform .35s var(--ease); }
.fac-cta .btn:hover .ico,
.fac-row:hover .fac-cta .btn .ico { transform: translateX(4px); }

/* Rows are generously spaced on desktop; on phones the .fac-row rule already
   stacks them to one column, so only the rhythm needs adjusting. */
.occasion-rows .fac-row { margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.occasion-rows .fac-row:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  /* stacked: photo always above its copy, whichever side it took on desktop */
  .occasion-rows .fac-row-rev .fac-media { order: 0; }
  .occasion-rows .fac-row { margin-bottom: clamp(2.5rem, 8vw, 3.5rem); }
  .occasion-rows .fac-cta .btn { width: 100%; justify-content: center; }
}

.floating-wa {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: white;
  transition: transform .3s var(--ease);
  animation: waBlink 2s infinite;
}
.floating-wa.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.floating-wa:hover {
  transform: translateY(-3px);
  animation: none;
}
.floating-wa svg {
  width: 32px; height: 32px; fill: currentColor;
}
@media (max-width: 768px) {
  .floating-wa {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
    bottom: calc(62px + env(safe-area-inset-bottom) + 1rem);
  }
}

/* =====================================================================
   24. Legibility & touch targets
   Two rules drive this section:
   1. No rendered text below 12px — 0.62rem-class labels were computing to
      ~9-11px on phones, which is under the readable floor.
   2. Every interactive element clears 44px in at least one axis and 24px in
      the other on coarse pointers. Footer links were 17-20px tall.
   Sizes are raised here rather than in the original rules so the desktop
   compact rhythm is preserved and only the failing cases change.
   ===================================================================== */

/* ---------- 24.1 Minimum readable type ---------- */
.brand-sub      { font-size: .75rem; letter-spacing: .18em; }
.contact-k      { font-size: .75rem; }
.footer-name span { font-size: .75rem; letter-spacing: .18em; }
.stat-label     { font-size: .75rem; }
.footer-h       { font-size: .78rem; }

/* Below 12px is unreadable, so narrow screens trade letter-spacing — not
   font-size — to keep the brand lockup on one line. */
@media (max-width: 760px) {
  .brand-sub { letter-spacing: .12em; }
}
@media (max-width: 480px) {
  .brand-sub  { letter-spacing: .07em; }
  .stat-label { letter-spacing: .08em; }
}
@media (max-width: 360px) {
  .brand-name { font-size: 1.06rem; }
  .brand-sub  { letter-spacing: .03em; }
}

/* ---------- 24.2 Touch targets ----------
   Scoped to coarse pointers so mouse users keep the tighter desktop rhythm.
   inline-flex keeps the hit box to the text width (always >24px here) while
   the min-height gives the full 44px vertical target. */
@media (pointer: coarse) {
  .footer-col ul { gap: 0; }

  .footer-col a,
  .footer-contact a,
  .footer-bottom a,
  .contact-v,
  .reach-link,
  .fac-title-link,
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* padding, not min-height: these sit inside a fixed-height bar and must
     grow their hit box without changing the bar's layout height. */
  .brand { padding-block: .4rem; }

  .filter { min-height: 44px; padding-block: 0; }

  .dropdown-menu a { padding-block: .8rem; }

  .footer-bottom { gap: .2rem 1rem; }
}