/* ==========================================================================
   INAI Event Management — design system
   --------------------------------------------------------------------------
   Palette and typography are lifted from the printed business card:
   deep navy ground, metallic gold, a Didone serif wordmark and a wide-tracked
   geometric sans beneath it.

   Animation policy: transform and opacity only, so every motion runs on the
   compositor and nothing here costs layout. Everything is disabled wholesale
   under prefers-reduced-motion at the foot of this file.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Navy, sampled from the card artwork */
  --navy-900: #000b22;
  --navy-850: #000e2b;
  --navy-800: #001235;
  --navy-700: #011a45;
  --navy-600: #0a2050;
  --navy-500: #11295e;
  --navy-400: #1d3a76;

  /* Gold, sampled from the logo flourish */
  --gold-400: #f6d368;
  --gold-300: #e8c356;
  --gold-500: #c9a227;
  --gold-600: #a9820d;
  --gold-700: #8c6a08;
  --gold-grad: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-400) 38%, var(--gold-500) 66%, var(--gold-700) 100%);

  /* Cream / beige, the third card colour */
  --cream-50: #fbf8f2;
  --cream-100: #f4efe4;
  --cream-200: #e9e1cf;
  --cream-300: #d8ccb2;

  --ink: var(--navy-800);
  --ink-soft: #43516e;
  --ink-mute: #6b7790;

  /* Semantic roles — light sections */
  --bg: var(--cream-50);
  --bg-alt: var(--cream-100);
  --surface: #ffffff;
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-mute: var(--ink-mute);
  --line: rgba(0, 18, 53, 0.12);
  --line-soft: rgba(0, 18, 53, 0.07);

  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(0, 18, 53, 0.05), 0 2px 8px rgba(0, 18, 53, 0.04);
  --shadow: 0 4px 12px rgba(0, 18, 53, 0.07), 0 14px 40px rgba(0, 18, 53, 0.07);
  --shadow-lg: 0 8px 24px rgba(0, 18, 53, 0.1), 0 32px 70px rgba(0, 18, 53, 0.12);
  --shadow-gold: 0 10px 34px rgba(201, 162, 39, 0.28);

  --font-display: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, serif;
  --font-sans: 'Jost', 'Futura', 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-tamil: 'Noto Sans Tamil', 'Latha', sans-serif;

  --shell: 1240px;
  --shell-narrow: 820px;
  --gut: clamp(1.15rem, 4vw, 2.75rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.6s;

  --head-h: 78px;
}

/* Dark sections invert the semantic roles rather than redefining components.
   The hero, page headers and footer CTA paint their own navy background, so
   they take the token overrides without the background/colour rule below —
   otherwise ghost-button borders and hairlines inherit the light palette and
   vanish against the navy. */
.on-navy, .hero, .page-head, .foot-cta {
  --bg: var(--navy-800);
  --bg-alt: var(--navy-700);
  --surface: rgba(255, 255, 255, 0.045);
  --text: var(--cream-100);
  --text-soft: rgba(244, 239, 228, 0.76);
  --text-mute: rgba(244, 239, 228, 0.55);
  --line: rgba(244, 239, 228, 0.16);
  --line-soft: rgba(244, 239, 228, 0.09);
}
.on-navy {
  color: var(--text);
  background: var(--bg);
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--gold-500); color: var(--navy-900); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold-500); color: var(--navy-900);
  padding: 0.75rem 1.25rem; font-weight: 500; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

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

/* ----------------------------------------------------------- typography -- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.95rem, 4.1vw, 3.05rem); }
h3 { font-size: clamp(1.3rem, 2.3vw, 1.72rem); }
h4 { font-size: 1.12rem; font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Inline rather than flex: the rule is an inline-block so a kicker
   containing mixed scripts wraps as one run of text instead of breaking
   into separate flex items. */
.kicker {
  font-family: var(--font-sans);
  font-size: 0.735rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin: 0 0 1.15rem;
  line-height: 1.7;
}
.kicker::before {
  content: '';
  display: inline-block;
  width: 34px; height: 1px;
  vertical-align: middle;
  margin-right: 0.85rem;
  background: var(--gold-grad);
}
/* Tamil script has no uppercase and reads far too small at the kicker's
   size, so it is set larger, untransformed and in its own face. */
.kicker [lang='ta'] {
  font-family: var(--font-tamil);
  font-size: 1.45em;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
}

.kicker--center { text-align: center; }
.kicker--center::after {
  content: '';
  display: inline-block;
  width: 34px; height: 1px;
  vertical-align: middle;
  margin-left: 0.85rem;
  background: var(--gold-grad);
}

@media (max-width: 560px) {
  .kicker { letter-spacing: 0.17em; }
  .kicker::before, .kicker--center::after { display: none; }
}

.lead {
  font-size: clamp(1.06rem, 1.55vw, 1.24rem);
  line-height: 1.62;
  color: var(--text-soft);
}

.gold { color: var(--gold-500); }

/* Gold gradient text with a slow travelling sheen. */
.gold-text {
  background: linear-gradient(100deg,
    var(--gold-600) 0%, var(--gold-400) 22%, #fff6d8 34%,
    var(--gold-400) 46%, var(--gold-500) 70%, var(--gold-600) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 7s var(--ease-in-out) infinite;
}
@keyframes sheen {
  0%, 100% { background-position: 160% 0; }
  50%      { background-position: -60% 0; }
}

.serif-em { font-style: italic; font-family: var(--font-display); }

/* ------------------------------------------------------------- layout --- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.shell--narrow { max-width: var(--shell-narrow); }

.section { padding-block: clamp(4rem, 9vw, 8.5rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--alt { background: var(--bg-alt); }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }

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

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split--sticky > :first-child { position: sticky; top: calc(var(--head-h) + 2rem); }
}

/* -------------------------------------------------------------- buttons -- */
.btn {
  --btn-bg: var(--gold-grad);
  --btn-fg: var(--navy-900);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.925rem;
  font-weight: 500;
  letter-spacing: 0.035em;
  text-decoration: none;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--btn-fg);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.3s;
  will-change: transform;
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform 0.4s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.btn:hover svg:last-child { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(0.985); }

/* The shine that crosses a button on hover. */
.btn::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }

.btn--sm { padding: 0.68rem 1.3rem; font-size: 0.86rem; }
.btn--lg { padding: 1.1rem 2.2rem; font-size: 1rem; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--gold-500); color: var(--gold-500); }
.btn--ghost::after { display: none; }

.btn--navy { --btn-bg: var(--navy-800); --btn-fg: var(--cream-100); }

/* Text link with a gold rule that wipes in from the left. */
.link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 500; font-size: 0.93rem; letter-spacing: 0.02em;
  color: var(--gold-500); text-decoration: none;
  position: relative; padding-bottom: 2px;
}
.link svg { width: 1.05em; height: 1.05em; transition: transform 0.35s var(--ease); }
.link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.link:hover::after { transform: scaleX(1); transform-origin: left; }
.link:hover svg { transform: translateX(4px); }

/* ----------------------------------------------------------- preloader -- */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-content: center; gap: 1.9rem; justify-items: center;
  background: var(--navy-800);
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.preloader__mark { width: min(300px, 62vw); color: var(--cream-100); }
.preloader__bar {
  width: min(190px, 44vw); height: 2px;
  background: rgba(244, 239, 228, 0.15); overflow: hidden; border-radius: 2px;
}
.preloader__bar i {
  display: block; height: 100%; width: 100%;
  background: var(--gold-grad);
  transform: scaleX(0); transform-origin: left;
  animation: load 1.15s var(--ease) forwards;
}
@keyframes load { to { transform: scaleX(1); } }

.preloader.is-done { opacity: 0; visibility: hidden; }
body.preloading { overflow: hidden; }

/* The flourish draws itself, then the sparkle and orb arrive. */
.preloader .logo__flourish { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.25s var(--ease) 0.15s forwards; }
.preloader .logo__spark { opacity: 0; transform-origin: 187px 54px; animation: pop 0.65s var(--ease) 1.05s forwards; }
.preloader .logo__orb { opacity: 0; transform-origin: 232px 15px; animation: pop 0.6s var(--ease) 0.85s forwards; }
.preloader .logo__word, .preloader .logo__subline { opacity: 0; animation: fade-up 0.8s var(--ease) 0.25s forwards; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop {
  0%   { opacity: 0; transform: scale(0) rotate(-45deg); }
  70%  { opacity: 1; transform: scale(1.22) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------- page transit -- */
.page-wipe {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  background: var(--gold-grad);
  transform: scaleY(0); transform-origin: bottom;
}
.page-wipe.is-out {
  transform: scaleY(1); transform-origin: bottom;
  transition: transform 0.45s var(--ease-in-out);
}

/* -------------------------------------------------------------- header --- */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--head-h);
  display: flex; align-items: center;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease),
              transform 0.45s var(--ease), height 0.4s var(--ease);
  color: var(--cream-100);
}
.site-head::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0,11,34,0.72), transparent);
}
.site-head.is-stuck {
  height: 66px;
  background: rgba(0, 14, 43, 0.86);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(244, 239, 228, 0.1), 0 12px 34px rgba(0, 11, 34, 0.34);
}
.site-head.is-stuck::before { opacity: 0; }
.site-head.is-hidden { transform: translateY(-100%); }

.site-head__inner { display: flex; align-items: center; gap: 1.5rem; width: 100%; }
.site-head__logo { flex: none; display: block; text-decoration: none; color: inherit; }
.site-head__logo .logo { width: 118px; transition: width 0.4s var(--ease); }
.site-head.is-stuck .site-head__logo .logo { width: 104px; }

.site-nav { margin-inline: auto; }
.site-nav__list { display: flex; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.site-nav__item { position: static; }
.site-nav__link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.6rem 0.95rem;
  font-size: 0.905rem; font-weight: 400; letter-spacing: 0.015em;
  text-decoration: none; border-radius: 100px;
  position: relative;
  transition: color 0.3s;
}
.site-nav__link::after {
  content: ''; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.38rem;
  height: 1px; background: var(--gold-grad);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.site-nav__link:hover::after,
.site-nav__link.is-current::after { transform: scaleX(1); transform-origin: left; }
.site-nav__link:hover { color: var(--gold-400); }
.site-nav__chev { display: inline-flex; width: 0.85em; transition: transform 0.35s var(--ease); }
.site-nav__chev svg { width: 100%; }
.site-nav__item--has-mega:hover .site-nav__chev { transform: rotate(180deg); }

.site-head__actions { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.site-head__phone {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; text-decoration: none; letter-spacing: 0.01em;
  transition: color 0.3s;
}
.site-head__phone svg { width: 1.05em; height: 1.05em; color: var(--gold-400); }
.site-head__phone:hover { color: var(--gold-400); }

/* ---------------------------------------------------------- mega menu --- */
.mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(0, 14, 43, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(244, 239, 228, 0.11);
  box-shadow: 0 26px 60px rgba(0, 11, 34, 0.45);
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.mega[hidden] { display: block !important; }
.site-nav__item--has-mega:hover .mega,
.site-nav__item--has-mega:focus-within .mega {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.mega__inner {
  display: grid; gap: 2.5rem; padding-block: 2.1rem 2.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) { .mega__inner { grid-template-columns: 1fr 280px; } }

.mega__services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.mega__card {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1rem; border-radius: var(--radius);
  text-decoration: none; color: var(--cream-100);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.site-nav__item--has-mega:hover .mega__card {
  animation: mega-in 0.42s var(--ease) both;
  animation-delay: calc(var(--i) * 40ms);
}
@keyframes mega-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mega__card:hover { background: rgba(201, 162, 39, 0.12); transform: translateX(4px); }
.mega__icon {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px; color: var(--gold-400);
  background: rgba(201, 162, 39, 0.12);
}
.mega__icon svg { width: 21px; height: 21px; }
.mega__text { display: flex; flex-direction: column; line-height: 1.35; }
.mega__text strong { font-weight: 500; font-size: 0.95rem; }
.mega__text em { font-style: normal; font-size: 0.8rem; color: rgba(244,239,228,0.56); }

.mega__aside {
  padding: 1.5rem; border-radius: var(--radius-lg);
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid rgba(201, 162, 39, 0.2);
}
.mega__kicker {
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-400); margin: 0 0 0.7rem; font-weight: 500;
}
.mega__blurb { font-size: 0.875rem; color: rgba(244,239,228,0.72); margin-bottom: 1.15rem; }

/* --------------------------------------------------------- mobile nav --- */
.burger {
  display: none; width: 42px; height: 42px; padding: 0;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.burger span {
  display: block; width: 21px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.25s;
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 890;
  background: var(--navy-800);
  padding: calc(var(--head-h) + 1.5rem) var(--gut) 2rem;
  overflow-y: auto;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  color: var(--cream-100);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
/* Links rest in their visible state and the animation only plays them in.
   If the animation never runs — throttled tab, animation disabled, CSS partly
   unsupported — the menu is still perfectly usable rather than blank. */
.mobile-nav li a {
  display: block; padding: 0.85rem 0;
  font-family: var(--font-display); font-size: 1.55rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 239, 228, 0.09);
}
.mobile-nav.is-open li a { animation: fade-up 0.5s var(--ease) backwards; }
.mobile-nav.is-open li:nth-child(1) a { animation-delay: 0.06s; }
.mobile-nav.is-open li:nth-child(2) a { animation-delay: 0.1s; }
.mobile-nav.is-open li:nth-child(3) a { animation-delay: 0.14s; }
.mobile-nav.is-open li:nth-child(4) a { animation-delay: 0.18s; }
.mobile-nav.is-open li:nth-child(5) a { animation-delay: 0.22s; }
.mobile-nav.is-open li:nth-child(6) a { animation-delay: 0.26s; }
.mobile-nav.is-open li:nth-child(n+7) a { animation-delay: 0.3s; }
.mobile-nav__rule { height: 1.5rem; }
.mobile-nav__foot { display: grid; gap: 0.7rem; }

@media (max-width: 1080px) {
  .site-nav { display: none; }
  .burger { display: flex; }
  .site-head__phone span { display: none; }
  .site-head__actions .btn { display: none; }
}

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex; align-items: center;
  padding-top: calc(var(--head-h) + clamp(2rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
  background: var(--navy-800);
  color: var(--cream-100);
}

/* Layered depth: radial glows, a drifting gold mesh, and a vignette. */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__glow {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0.5;
  will-change: transform;
}
.hero__glow--1 {
  width: 52vw; height: 52vw; top: -14%; right: -8%;
  background: radial-gradient(circle, rgba(201,162,39,0.42), transparent 68%);
  animation: drift-a 22s var(--ease-in-out) infinite;
}
.hero__glow--2 {
  width: 44vw; height: 44vw; bottom: -18%; left: -10%;
  background: radial-gradient(circle, rgba(29,58,118,0.85), transparent 68%);
  animation: drift-b 27s var(--ease-in-out) infinite;
}
@keyframes drift-a {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(-5%, 6%, 0) scale(1.12); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(7%, -5%, 0) scale(1.09); }
}

.hero__grid {
  position: absolute; inset: -2px; opacity: 0.32;
  background-image:
    linear-gradient(rgba(201,162,39,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,39,0.09) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(ellipse 85% 62% at 50% 42%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 62% at 50% 42%, #000 25%, transparent 78%);
}

.hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, transparent 40%, rgba(0,11,34,0.7) 100%);
}

.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__content { max-width: 62ch; }

.hero h1 { margin-bottom: 0.55em; }
.hero__lead {
  font-size: clamp(1.08rem, 1.75vw, 1.35rem);
  line-height: 1.6;
  color: rgba(244, 239, 228, 0.78);
  max-width: 54ch;
  margin-bottom: 2.4rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 3rem; }

/* Word-by-word entrance for the headline.
   The hidden starting state is gated behind html.js, which is set by an inline
   script in the head. Without JavaScript the class is never added, no content
   is ever hidden, and the page reads normally. */
.reveal-words .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.reveal-words .word > span { display: inline-block; }
.js .reveal-words .word > span {
  transform: translateY(105%);
  opacity: 0;
  transition: transform 0.9s var(--ease), opacity 0.9s var(--ease);
  transition-delay: calc(var(--wi) * 55ms + 0.1s);
}
.js .reveal-words.is-in .word > span { transform: translateY(0); opacity: 1; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.1rem 2.4rem;
  padding-top: 1.9rem;
  border-top: 1px solid rgba(244, 239, 228, 0.14);
}
.hero__meta div { display: flex; flex-direction: column; gap: 0.15rem; }
.hero__meta dt, .hero__meta b {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; color: var(--gold-400);
}
.hero__meta dd, .hero__meta small {
  margin: 0; font-size: 0.78rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: rgba(244,239,228,0.55);
}

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.8rem; z-index: 3;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.6rem;
  font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(244,239,228,0.45);
}
.hero__scroll i {
  display: block; width: 1px; height: 42px;
  background: linear-gradient(to bottom, var(--gold-400), transparent);
  animation: scroll-hint 2.1s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes scroll-hint {
  0%       { transform: scaleY(0); opacity: 0; }
  40%      { transform: scaleY(1); opacity: 1; }
  100%     { transform: scaleY(1) translateY(42px); opacity: 0; }
}

/* Floating service chips in the hero, on large screens. */
.hero__chips { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
@media (min-width: 1180px) { .hero__chips { display: block; } }
.hero__chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 1.1rem;
  border-radius: 100px;
  background: rgba(244, 239, 228, 0.07);
  border: 1px solid rgba(201, 162, 39, 0.3);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  font-size: 0.8rem; letter-spacing: 0.05em;
  color: rgba(244, 239, 228, 0.9);
  animation: float 7s var(--ease-in-out) infinite;
  will-change: transform;
}
.hero__chip svg { width: 16px; height: 16px; color: var(--gold-400); }
.hero__chip:nth-child(1) { top: 21%; right: 6%;  animation-delay: 0s; }
.hero__chip:nth-child(2) { top: 35%; right: 20%; animation-delay: 0.8s; }
.hero__chip:nth-child(3) { top: 50%; right: 3%;  animation-delay: 1.6s; }
.hero__chip:nth-child(4) { top: 64%; right: 17%; animation-delay: 2.4s; }
.hero__chip:nth-child(5) { top: 78%; right: 7%;  animation-delay: 3.2s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}

/* --------------------------------------------------------- scroll reveal -- */
/* Same rule as above: only hide things when JavaScript is present to show
   them again. A crawler, a reader-mode parser or a browser with scripting off
   sees the full page. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  will-change: transform, opacity;
}
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

/* Children of a stagger container reveal one after another. */
.js .stagger > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .stagger.is-in > * { opacity: 1; transform: none; }
.js .stagger.is-in > *:nth-child(1) { transition-delay: 0.05s; }
.js .stagger.is-in > *:nth-child(2) { transition-delay: 0.12s; }
.js .stagger.is-in > *:nth-child(3) { transition-delay: 0.19s; }
.js .stagger.is-in > *:nth-child(4) { transition-delay: 0.26s; }
.js .stagger.is-in > *:nth-child(5) { transition-delay: 0.33s; }
.js .stagger.is-in > *:nth-child(6) { transition-delay: 0.40s; }
.js .stagger.is-in > *:nth-child(7) { transition-delay: 0.47s; }
.js .stagger.is-in > *:nth-child(8) { transition-delay: 0.54s; }

/* ------------------------------------------------------- the gold thread -- */
/* A continuous gold line that draws itself as the page scrolls — the visual
   expression of "inai", to join. Its stroke-dashoffset is driven from JS. */
.thread {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: visible;
}
.thread path {
  fill: none;
  stroke: var(--thread-stroke, #C9A227);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* -------------------------------------------------------------- cards --- */
.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.15rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(150deg, rgba(201,162,39,0.11), transparent 55%);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(201,162,39,0.34); }
.card:hover::before { opacity: 1; }

/* Cursor-following highlight, fed by --mx/--my from JS. */
.card::after {
  content: ''; position: absolute; z-index: -1;
  width: 320px; height: 320px; border-radius: 50%;
  left: var(--mx, 50%); top: var(--my, 50%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201,162,39,0.16), transparent 68%);
  opacity: 0; transition: opacity 0.4s;
}
.card:hover::after { opacity: 1; }

.card__icon {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  border-radius: 15px;
  margin-bottom: 1.4rem;
  color: var(--gold-500);
  background: linear-gradient(140deg, rgba(201,162,39,0.17), rgba(201,162,39,0.05));
  border: 1px solid rgba(201,162,39,0.24);
  transition: transform 0.5s var(--ease), background 0.5s;
}
.card__icon svg { width: 27px; height: 27px; }
.card:hover .card__icon { transform: translateY(-3px) rotate(-5deg) scale(1.06); }

.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--text-soft); font-size: 0.955rem; }
.card__foot { margin-top: auto; padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card__price { font-size: 0.83rem; color: var(--text-mute); letter-spacing: 0.02em; }
.card__price b { font-family: var(--font-display); font-size: 1.22rem; color: var(--gold-500); font-weight: 500; }

.card--link { text-decoration: none; color: inherit; }

/* Numbered process cards. */
.step { position: relative; padding-left: 4.4rem; }
.step__n {
  position: absolute; left: 0; top: -0.35rem;
  font-family: var(--font-display); font-size: 3rem; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-500);
  opacity: 0.62;
}
.step h3 { font-size: 1.22rem; margin-bottom: 0.35rem; }
.step p { color: var(--text-soft); font-size: 0.94rem; margin: 0; }

/* -------------------------------------------------------------- marquee -- */
.marquee {
  position: relative; overflow: hidden;
  padding-block: 1.6rem;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex; width: max-content; gap: 3.4rem;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.6rem);
  white-space: nowrap; color: var(--text-soft);
}
.marquee__item svg { width: 0.78em; height: 0.78em; color: var(--gold-500); flex: none; }

/* --------------------------------------------------------------- stats --- */
.stat { text-align: center; }
.stat b {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1;
  color: var(--gold-500); margin-bottom: 0.45rem;
}
.stat span {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute);
}

/* --------------------------------------------------------------- table --- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: 0.945rem; min-width: 480px; }
th, td { padding: 0.95rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th {
  font-family: var(--font-sans); font-weight: 500; font-size: 0.76rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-mute);
  background: var(--bg-alt); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 0.25s; }
tbody tr:hover { background: rgba(201, 162, 39, 0.055); }
td b, td strong { font-weight: 500; }

/* ---------------------------------------------------------------- lists -- */
.rich-list { margin: 0 0 1.5em; padding-left: 1.35rem; }
.rich-list li { margin-bottom: 0.6em; color: var(--text-soft); }
.rich-list li::marker { color: var(--gold-500); }
.rich-list--num li::marker { font-family: var(--font-display); font-weight: 500; }

.check-list, .cross-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.check-list li, .cross-list li {
  display: flex; gap: 0.8rem; align-items: flex-start;
  font-size: 0.955rem; color: var(--text-soft); line-height: 1.55;
}
.check-list svg, .cross-list svg { width: 18px; height: 18px; flex: none; margin-top: 0.28em; }
.check-list svg { color: var(--gold-500); }
.cross-list svg { color: var(--text-mute); opacity: 0.6; }

/* -------------------------------------------------------------- callout -- */
.callout {
  margin: 2.2rem 0;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  background: linear-gradient(140deg, rgba(201,162,39,0.1), rgba(201,162,39,0.03));
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-left-width: 3px;
}
.callout h4 { color: var(--gold-600); margin-bottom: 0.5rem; }
.on-navy .callout h4 { color: var(--gold-400); }
.callout p { font-size: 0.95rem; color: var(--text-soft); margin: 0; }

/* ------------------------------------------------------------ accordion -- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
  padding: 1.4rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: clamp(1.05rem, 1.7vw, 1.25rem); font-weight: 500;
  line-height: 1.35; color: var(--text);
  transition: color 0.3s;
}
.acc__btn:hover { color: var(--gold-500); }
.acc__sign { position: relative; width: 18px; height: 18px; flex: none; margin-top: 0.32em; }
.acc__sign::before, .acc__sign::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px;
  background: var(--gold-500); border-radius: 2px;
  transition: transform 0.42s var(--ease);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__btn[aria-expanded='true'] .acc__sign::after { transform: rotate(0); }
.acc__panel { overflow: hidden; height: 0; transition: height 0.42s var(--ease); }
.acc__panel > div { padding-bottom: 1.5rem; }
.acc__panel p { color: var(--text-soft); font-size: 0.985rem; max-width: 72ch; }

/* ------------------------------------------------------------- pricing --- */
.price-card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.price-card--featured {
  border-color: rgba(201, 162, 39, 0.5);
  box-shadow: var(--shadow);
}
/* Badge text comes from data-badge, so a card can be visually featured
   without claiming to be the most booked option. */
.price-card[data-badge]::before {
  content: attr(data-badge);
  position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
  padding: 0.32rem 0.95rem; border-radius: 100px;
  background: var(--gold-grad); color: var(--navy-900);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
}
.price-card h3 { margin-bottom: 0.3rem; }
.price-card__tag { font-size: 0.9rem; color: var(--text-mute); margin-bottom: 1.5rem; }
.price-card__amt {
  font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 2.7rem);
  color: var(--gold-500); line-height: 1; margin-bottom: 0.3rem;
}
.price-card__amt small { font-family: var(--font-sans); font-size: 0.8rem; color: var(--text-mute); letter-spacing: 0.09em; text-transform: uppercase; display: block; margin-bottom: 0.4rem; }
.price-card__for { font-size: 0.9rem; color: var(--text-soft); margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-soft); }
.price-card .btn { margin-top: auto; }

/* --------------------------------------------------------------- media --- */
/* Labelled placeholders. Swap each for a real <img> when photos arrive. */
.media {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--navy-700), var(--navy-800));
  border: 1px solid rgba(201, 162, 39, 0.2);
  display: grid; place-items: center;
  aspect-ratio: var(--ar, 4 / 3);
  color: rgba(244, 239, 228, 0.4);
}
.media::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,162,39,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,39,0.07) 1px, transparent 1px);
  background-size: 34px 34px;
}
.media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(201,162,39,0.14) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: shimmer 3.4s var(--ease-in-out) infinite;
}
@keyframes shimmer { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.media__label {
  position: relative; z-index: 1; text-align: center; padding: 1.25rem;
  font-size: 0.73rem; letter-spacing: 0.17em; text-transform: uppercase; line-height: 1.8;
}
.media__label b { display: block; font-family: var(--font-display); font-size: 1.05rem;
  letter-spacing: 0.02em; text-transform: none; color: var(--gold-400); margin-bottom: 0.3rem; }
.media--tall { --ar: 3 / 4; }
.media--wide { --ar: 16 / 9; }
.media--square { --ar: 1; }

/* --------------------------------------------------------------- forms --- */
.field { display: grid; gap: 0.45rem; margin-bottom: 1.15rem; }
.field label { font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-mute); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.85rem 1rem;
  font-family: inherit; font-size: 1rem; font-weight: 300;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
}
.field--row { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .field--row { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: 0.83rem; color: var(--text-mute); margin-top: 1rem; }

/* Chip-style multi-select for services. */
.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.58rem 1.05rem; border-radius: 100px;
  border: 1px solid var(--line); cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.3s var(--ease);
}
.chip span:hover { border-color: var(--gold-500); }
.chip input:checked + span {
  background: var(--gold-grad); color: var(--navy-900);
  border-color: transparent; font-weight: 500;
}
.chip input:focus-visible + span { outline: 2px solid var(--gold-500); outline-offset: 2px; }

/* ------------------------------------------------------------ breadcrumb -- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  font-size: 0.8rem; color: var(--text-mute);
}
.crumbs a { text-decoration: none; transition: color 0.3s; }
.crumbs a:hover { color: var(--gold-500); }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: 0.45rem; opacity: 0.4; }
.crumbs li[aria-current] { color: var(--text-soft); }

/* ----------------------------------------------------------- page header -- */
.page-head {
  position: relative;
  padding-top: calc(var(--head-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  background: var(--navy-800);
  color: var(--cream-100);
  overflow: hidden;
}
.page-head::before {
  content: ''; position: absolute; top: -30%; right: -12%;
  width: 46vw; height: 46vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,0.3), transparent 66%);
  filter: blur(80px);
  animation: drift-a 24s var(--ease-in-out) infinite;
}
.page-head__inner { position: relative; z-index: 1; max-width: 66ch; }
.page-head h1 { margin-bottom: 0.4em; }
.page-head .lead { color: rgba(244, 239, 228, 0.76); }

/* The answer capsule — the block written to be lifted whole by AI assistants. */
.answer-capsule {
  margin-top: 2rem;
  padding: 1.4rem 1.7rem;
  border-radius: var(--radius);
  background: rgba(201, 162, 39, 0.1);
  border: 1px solid rgba(201, 162, 39, 0.3);
  max-width: 70ch;
}
.answer-capsule p { font-size: 1.02rem; line-height: 1.6; margin: 0; color: rgba(244, 239, 228, 0.92); }
.answer-capsule__q {
  display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-400); margin-bottom: 0.7rem; font-weight: 500;
}

/* --------------------------------------------------------------- prose --- */
.prose { max-width: 72ch; }
.prose > h2 { margin-top: 2.6em; }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: 2em; font-size: 1.28rem; }
.prose p, .prose li { color: var(--text-soft); }
.prose strong { color: var(--text); font-weight: 500; }
.prose a { color: var(--gold-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--gold-500); }
.prose .table-wrap, .prose .callout { margin-block: 2rem; }

/* Guide layout: contents rail beside the article on wide screens, and
   collapsed above the article on narrow ones. */
.guide-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .guide-layout { grid-template-columns: 230px minmax(0, 1fr); }
}
@media (max-width: 999px) {
  .toc { position: static; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
  .toc ul { grid-template-columns: 1fr 1fr; display: grid; }
}

/* Sticky contents rail on guide pages. */
.toc { position: sticky; top: calc(var(--head-h) + 2rem); font-size: 0.88rem; }
.toc h4 { font-size: 0.72rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 1rem; }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.toc a {
  display: block; padding: 0.42rem 0 0.42rem 0.95rem;
  text-decoration: none; color: var(--text-mute);
  border-left: 1.5px solid var(--line);
  transition: color 0.3s, border-color 0.3s;
}
.toc a:hover, .toc a.is-active { color: var(--gold-600); border-color: var(--gold-500); }

/* -------------------------------------------------------------- pills --- */
.pill {
  display: inline-flex; align-items: center; gap: 0.42rem;
  padding: 0.34rem 0.85rem; border-radius: 100px;
  font-size: 0.75rem; letter-spacing: 0.055em;
  background: rgba(201, 162, 39, 0.13);
  border: 1px solid rgba(201, 162, 39, 0.28);
  color: var(--gold-600);
}
.on-navy .pill { color: var(--gold-400); }
.pill svg { width: 0.85em; height: 0.85em; }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }

/* ----------------------------------------------------------- foot CTA --- */
.site-foot { background: var(--navy-900); color: var(--cream-100); position: relative; }

.foot-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--navy-700), var(--navy-850));
  padding-block: clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid rgba(244, 239, 228, 0.09);
}
.foot-cta::before {
  content: ''; position: absolute; bottom: -60%; left: 50%; transform: translateX(-50%);
  width: 90vw; height: 90vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,0.18), transparent 62%);
  filter: blur(70px);
}
.foot-cta__inner { position: relative; z-index: 1; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .foot-cta__inner { grid-template-columns: 1.15fr 0.85fr; } }
.foot-cta h2 { margin-bottom: 0.4em; }
.foot-cta .lead { color: rgba(244, 239, 228, 0.74); max-width: 48ch; }
.foot-cta__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
@media (min-width: 900px) { .foot-cta__actions { justify-content: flex-end; } }

.site-foot__grid {
  display: grid; gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .site-foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .site-foot__grid { grid-template-columns: 1.6fr repeat(4, 1fr); } }

.site-foot__brand .logo { width: 210px; color: var(--cream-100); margin-bottom: 1.2rem; }
.site-foot__tamil { font-size: 0.85rem; color: var(--gold-400); margin-bottom: 0.9rem; letter-spacing: 0.04em; }
.site-foot__tamil [lang='ta'] { font-family: var(--font-tamil); font-size: 1.1rem; }
.site-foot__blurb { font-size: 0.88rem; color: rgba(244, 239, 228, 0.58); max-width: 44ch; line-height: 1.65; }

.acronym { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.acronym li { font-size: 0.8rem; color: rgba(244, 239, 228, 0.6); letter-spacing: 0.04em; }
.acronym b { color: var(--gold-400); font-family: var(--font-display); font-size: 1.05rem; margin-right: 0.3rem; font-weight: 500; }

.site-foot__col h3 {
  font-family: var(--font-sans); font-size: 0.73rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 1.15rem;
}
.site-foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-foot__col a {
  font-size: 0.9rem; color: rgba(244, 239, 228, 0.66); text-decoration: none;
  transition: color 0.3s, transform 0.3s var(--ease);
  display: inline-block;
}
.site-foot__col a:hover { color: var(--gold-400); transform: translateX(3px); }

.contact-list li a, .contact-list__plain { display: flex; align-items: center; gap: 0.65rem; }
.contact-list svg { width: 15px; height: 15px; color: var(--gold-400); flex: none; }
.contact-list__plain { font-size: 0.9rem; color: rgba(244, 239, 228, 0.66); }
.site-foot__person { margin-top: 1.2rem; font-size: 0.82rem; color: rgba(244,239,228,0.45); letter-spacing: 0.06em; }

.site-foot__base {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(244, 239, 228, 0.09);
  font-size: 0.8rem; color: rgba(244, 239, 228, 0.42);
}
.site-foot__base ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.site-foot__base a { text-decoration: none; transition: color 0.3s; }
.site-foot__base a:hover { color: var(--gold-400); }

/* ------------------------------------------------------ floating whatsapp -- */
.wa-float {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 800;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.42);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 12px 34px rgba(37, 211, 102, 0.52); }
.wa-float::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25d366; animation: ping 2.4s var(--ease-in-out) infinite;
}
@keyframes ping {
  0%       { transform: scale(1); opacity: 0.65; }
  70%, 100%{ transform: scale(1.55); opacity: 0; }
}

/* ------------------------------------------------------------ utilities -- */
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; }
.max-60 { max-width: 60ch; }
.dim { color: var(--text-mute); font-size: 0.9rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Anything that animates in must be visible with no animation at all. */
  .reveal,
  .stagger > *,
  .reveal-words .word > span,
  .mobile-nav li a,
  .preloader .logo__word,
  .preloader .logo__subline,
  .preloader .logo__spark,
  .preloader .logo__orb {
    opacity: 1 !important;
    transform: none !important;
  }
  .preloader .logo__flourish { stroke-dashoffset: 0 !important; }
  .thread path { stroke-dashoffset: 0 !important; }
  .marquee__track { animation: none !important; }
  .media::after { display: none; }
  .wa-float::before { display: none; }
  .preloader { display: none; }
}