/* ==========================================================================
   KAILASA KALADHARA — GLOBAL DESIGN SYSTEM
   A sacred cultural institution. Natyashastra meets Bloomberg Philanthropies.
   Deep violet-indigo ground, temple gold accents. Typography as ritual.
   ========================================================================== */

/* ==========================================================================
   1. GOOGLE FONTS IMPORT
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Jost:wght@300;400;500;600&family=Noto+Serif+Kannada:wght@300;400;500;600;700&display=swap');


/* ==========================================================================
   2. CSS CUSTOM PROPERTIES — THE ENTIRE DESIGN LANGUAGE
   ========================================================================== */

:root {

  /* --- Color Palette --- */
  --color-bg:           #0D0818;   /* deep indigo-violet */
  --color-surface:      #130D24;   /* slightly lighter violet surface */
  --color-surface-2:    #1C1535;   /* elevated surface */
  --color-surface-3:    #231B42;   /* highest elevation */
  --color-border:       #2D1F4E;   /* violet border */
  --color-border-dim:   #1E1538;   /* subtle border */
  --color-text:         #F2E8D5;   /* warm ivory */
  --color-text-dim:     #C8B89A;   /* dimmed ivory */
  --color-muted:        #9B8EC4;   /* muted violet-grey */
  --color-muted-dim:    #6A5A90;   /* deeper muted */
  --color-accent:       #C4882A;   /* temple gold */
  --color-accent-light: #D9A04A;   /* lighter gold */
  --color-accent-dim:   #C4882A18;
  --color-accent-glow:  rgba(196, 136, 42, 0.12);
  --color-violet:       #7B5EA7;   /* mid violet for gradients */
  --color-violet-light: #A67DD4;   /* light violet accent */
  --color-red:          #7A1818;   /* classical red */
  --color-red-light:    #9A2020;
  --color-red-dim:      #7A181815;
  --color-white:        #FFFFFF;

  /* --- Typography Families --- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', sans-serif;
  --font-kannada: 'Noto Serif Kannada', serif;

  /* --- Type Scale --- */
  --text-xs:   0.75rem;      /*  12px */
  --text-sm:   0.875rem;     /*  14px */
  --text-base: 1rem;         /*  16px */
  --text-lg:   1.125rem;     /*  18px */
  --text-xl:   1.5rem;       /*  24px */
  --text-2xl:  2rem;         /*  32px */
  --text-3xl:  3rem;         /*  48px */
  --text-4xl:  4.5rem;       /*  72px */
  --text-5xl:  7rem;         /* 112px */

  /* --- Font Weights --- */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* --- Line Heights --- */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.9;

  /* --- Letter Spacing --- */
  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.06em;
  --tracking-wider:     0.12em;
  --tracking-widest:    0.2em;

  /* --- Spacing Scale --- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */
  --space-48: 12rem;     /* 192px */

  /* --- Border Radius --- */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:      0 8px 40px rgba(0, 0, 0, 0.7);
  --shadow-xl:      0 16px 64px rgba(0, 0, 0, 0.8);
  --shadow-gold:    0 0 24px rgba(196, 136, 42, 0.15);
  --shadow-gold-md: 0 0 48px rgba(196, 136, 42, 0.20);
  --shadow-inset:   inset 0 1px 0 rgba(196, 136, 42, 0.08);

  /* --- Layout --- */
  --container-xs:  480px;
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1440px;

  /* --- Z-index Scale --- */
  --z-below:   -1;
  --z-base:     0;
  --z-above:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-loading:  1000;

  /* --- Transitions --- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
  --duration-slower: 900ms;

  /* --- Texture --- */
  --grain-opacity: 0.035;
  --gold-divider: 1px solid rgba(196, 136, 42, 0.2);
  --border-subtle: 1px solid var(--color-border);
  --border-dim:    1px solid var(--color-border-dim);
}


/* ==========================================================================
   3. CSS RESET — OPINIONATED, MINIMAL
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: linear-gradient(-45deg, #0D0818, #1a0f35, #130D24, #160b2e, #0f0620, #130D24, #0D0818);
  background-size: 400% 400%;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  animation: bgBreath 14s ease infinite;
}

/* Particle canvas — fixed full-page layer behind all content */
#particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* Lift main content and footer above the particle canvas */
main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* Full-width gold gradient divider between sections */
.gold-divider {
  width: 70%;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(to right, transparent, rgba(196, 136, 42, 0.6), transparent);
}

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

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

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  outline: none;
  appearance: none;
}

button {
  cursor: pointer;
}

svg {
  display: block;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

::selection {
  background: var(--color-accent-dim);
  color: var(--color-accent-light);
}


/* ==========================================================================
   4. GRAIN TEXTURE OVERLAY — Atmospheric depth on dark backgrounds
   Applied via body::after pseudo-element; SVG noise, no external file needed
   ========================================================================== */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-toast);
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}


/* ==========================================================================
   5. TYPOGRAPHY — The voice of the institution
   ========================================================================== */

/* --- Display Headings (Cormorant Garamond) --- */
.display-1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.display-2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

h6, .h6 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* --- Body Copy --- */
p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  line-height: var(--leading-loose);
  color: var(--color-text-dim);
}

p + p {
  margin-top: var(--space-4);
}

.lead {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: var(--leading-loose);
  font-style: italic;
  color: var(--color-text-dim);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* --- Kannada script elements --- */
.kannada {
  font-family: var(--font-kannada);
  font-weight: var(--weight-regular);
}

/* --- Accent / Gold text --- */
.text-accent    { color: var(--color-accent); }
.text-muted     { color: var(--color-muted); }
.text-dim       { color: var(--color-text-dim); }
.text-italic    { font-style: italic; }

/* --- Section labels (small gold eyebrow text above headings) --- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.eyebrow::before {
  content: '— ';
  opacity: 0.6;
}

.eyebrow::after {
  content: ' —';
  opacity: 0.6;
}


/* ==========================================================================
   6. LAYOUT — Containers, grids, sections
   ========================================================================== */

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.container-sm  { max-width: var(--container-sm); }
.container-md  { max-width: var(--container-md); }
.container-lg  { max-width: var(--container-lg); }
.container-2xl { max-width: var(--container-2xl); }

/* --- Section Spacing --- */
.section {
  padding-block: var(--space-32);
}

.section-sm {
  padding-block: var(--space-16);
}

.section-lg {
  padding-block: var(--space-48);
}

/* --- Flex utilities --- */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }

/* --- Grid utilities --- */
.grid          { display: grid; }
.grid-2        { grid-template-columns: repeat(2, 1fr); }
.grid-3        { grid-template-columns: repeat(3, 1fr); }
.grid-4        { grid-template-columns: repeat(4, 1fr); }
.grid-auto-sm  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-auto-md  { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

/* --- Split layout (image + text) --- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.split-wide {
  grid-template-columns: 3fr 2fr;
}

.split-reverse {
  direction: rtl;
}

.split-reverse > * {
  direction: ltr;
}

/* --- Centered text block --- */
.section-header {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
}

.section-header h2,
.section-header h1 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-6);
}

.section-header p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
}

/* --- Asymmetric / editorial offset --- */
.offset-right {
  margin-left: var(--space-16);
}

.offset-left {
  margin-right: var(--space-16);
}


/* ==========================================================================
   7. NAVIGATION
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding: var(--space-6) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background var(--duration-slow) var(--ease-out),
              padding var(--duration-base) var(--ease-out),
              border-color var(--duration-slow) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.nav.nav--scrolled {
  background: rgba(13, 8, 24, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-block: var(--space-4);
  border-bottom-color: var(--color-border);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.nav-logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: brightness(0.95) saturate(1.1);
}

.nav-logo-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  line-height: 1.2;
}

.nav-logo-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-muted);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-links a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color var(--duration-base) var(--ease-out);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--duration-base) var(--ease-out);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-text);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-cta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent) !important;
  border: 1px solid rgba(196, 136, 42, 0.4);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-sm);
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out) !important;
}

.nav-cta:hover {
  background: var(--color-accent-dim) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent-light) !important;
}

.nav-cta::after {
  display: none !important;
}

/* --- Mobile hamburger --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--space-2);
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-text);
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Mobile nav drawer --- */
.nav-drawer {
  display: none;
  position: fixed;
  inset: 0;
  top: 0;
  background: var(--color-bg);
  z-index: calc(var(--z-sticky) - 1);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
}

.nav-drawer.open {
  transform: translateX(0);
}

.nav-drawer a {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  color: var(--color-text);
  transition: color var(--duration-base) var(--ease-out);
}

.nav-drawer a:hover {
  color: var(--color-accent);
}


/* ==========================================================================
   8. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-8);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* Subtle shimmer on hover via pseudo-element */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  transition: left var(--duration-slow) var(--ease-out);
}

.btn:hover::before {
  left: 100%;
}

/* Primary — Gold filled */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border: 1px solid var(--color-accent);
  box-shadow: 0 0 20px rgba(196, 136, 42, 0.2);
}

.btn-primary:hover {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
  box-shadow: 0 0 32px rgba(196, 136, 42, 0.35);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Secondary — Ghost outlined */
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: var(--shadow-gold);
}

/* Ghost — Subtle text */
.btn-ghost {
  background: transparent;
  color: var(--color-muted);
  border: 1px solid transparent;
  padding-inline: var(--space-4);
}

.btn-ghost:hover {
  color: var(--color-text);
  border-color: var(--color-border);
}

/* Sizes */
.btn-sm {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-6);
}

.btn-lg {
  font-size: var(--text-base);
  padding: var(--space-6) var(--space-12);
}

/* Icon arrow helper */
.btn-arrow::after {
  content: '→';
  margin-left: var(--space-2);
  transition: transform var(--duration-base) var(--ease-out);
}

.btn-arrow:hover::after {
  transform: translateX(4px);
}


/* ==========================================================================
   9. GOLD DIVIDERS — The sacred horizontal line
   ========================================================================== */

/* Full-width gold rule between sections */
.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(196, 136, 42, 0.3) 20%,
    rgba(196, 136, 42, 0.5) 50%,
    rgba(196, 136, 42, 0.3) 80%,
    transparent 100%
  );
  border: none;
  margin-block: var(--space-1);
}

/* Short centered decorative divider */
.divider-short {
  width: 80px;
  height: 1px;
  background: var(--color-accent);
  border: none;
  margin: var(--space-6) auto;
  opacity: 0.5;
}

/* Ornamental divider with center diamond */
.divider-ornament {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-8);
}

.divider-ornament::before,
.divider-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(196, 136, 42, 0.3)
  );
}

.divider-ornament::after {
  background: linear-gradient(
    90deg,
    rgba(196, 136, 42, 0.3),
    transparent
  );
}

.divider-ornament-icon {
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  transform: rotate(45deg);
  opacity: 0.6;
  flex-shrink: 0;
}


/* ==========================================================================
   10. CARDS
   ========================================================================== */

/* Base card */
.card {
  background: var(--color-surface);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.card:hover {
  border-color: rgba(196, 136, 42, 0.25);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

/* Elevated card */
.card-elevated {
  background: var(--color-surface-2);
  box-shadow: var(--shadow-md);
}

/* Gold left-border card (testimonials) */
.card-testimonial {
  background: var(--color-surface);
  border: var(--border-subtle);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-8) var(--space-10);
}

/* Stat/number card */
.card-stat {
  background: var(--color-surface);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  text-align: center;
}

.card-stat-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  color: var(--color-accent);
  line-height: 1;
  display: block;
  margin-bottom: var(--space-2);
}

.card-stat-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-muted);
}


/* ==========================================================================
   11. IMAGE TREATMENTS
   ========================================================================== */

/* Dramatic image frame */
.img-frame {
  position: relative;
  overflow: hidden;
}

.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85) saturate(0.9);
  transition: filter var(--duration-slow) var(--ease-out),
              transform var(--duration-slower) var(--ease-out);
}

.img-frame:hover img {
  filter: brightness(0.9) saturate(1.0);
  transform: scale(1.02);
}

/* Gold corner accent on images */
.img-frame::before {
  content: '';
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: 40px;
  height: 40px;
  border-top: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
  z-index: 2;
  opacity: 0.6;
  transition: opacity var(--duration-base) var(--ease-out);
}

.img-frame::after {
  content: '';
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border-bottom: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
  z-index: 2;
  opacity: 0.6;
  transition: opacity var(--duration-base) var(--ease-out);
}

.img-frame:hover::before,
.img-frame:hover::after {
  opacity: 1;
}

/* Overlay gradient for image text legibility */
.img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 8, 4, 0.95) 0%,
    rgba(10, 8, 4, 0.4) 50%,
    transparent 100%
  );
  z-index: 1;
}

.img-overlay-center {
  background: rgba(10, 8, 4, 0.55);
}

/* Image aspect ratios */
.ratio-16-9   { aspect-ratio: 16 / 9; }
.ratio-4-3    { aspect-ratio: 4 / 3; }
.ratio-3-2    { aspect-ratio: 3 / 2; }
.ratio-1-1    { aspect-ratio: 1 / 1; }
.ratio-golden { aspect-ratio: 1.618 / 1; }


/* ==========================================================================
   12. FORM ELEMENTS
   ========================================================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
}

.form-input,
.form-select,
.form-textarea {
  background: var(--color-surface);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  color: var(--color-text);
  width: 100%;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-muted-dim);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: rgba(196, 136, 42, 0.4);
  box-shadow: 0 0 0 3px var(--color-accent-dim);
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: var(--leading-normal);
}

.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239A8A72' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

.form-select option {
  background: var(--color-surface);
  color: var(--color-text);
}


/* ==========================================================================
   13. BADGES & TAGS
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}

.badge-gold {
  background: var(--color-accent-dim);
  color: var(--color-accent);
  border: 1px solid rgba(196, 136, 42, 0.2);
}

.badge-red {
  background: var(--color-red-dim);
  color: var(--color-red-light);
  border: 1px solid rgba(122, 24, 24, 0.2);
}

.badge-muted {
  background: rgba(154, 138, 114, 0.1);
  color: var(--color-muted);
  border: 1px solid rgba(154, 138, 114, 0.15);
}


/* ==========================================================================
   14. HERO SECTION BASE
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.35) saturate(0.7);
}

/* Radial gold glow behind hero text */
.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60vw;
  height: 60vw;
  background: radial-gradient(
    circle at center,
    rgba(196, 136, 42, 0.08) 0%,
    transparent 65%
  );
  pointer-events: none;
}

/* Bottom gradient fade into site */
.hero-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  z-index: 1;
}


/* ==========================================================================
   15. PAGE HEADER (inner pages)
   ========================================================================== */

.page-header {
  padding-top: calc(var(--space-32) + 80px);
  padding-bottom: var(--space-8);
  border-bottom: var(--gold-divider);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-accent) 30%,
    var(--color-accent) 70%,
    transparent
  );
  opacity: 0.2;
}

.page-header-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(196, 136, 42, 0.06) 0%,
    transparent 60%
  );
}


/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.footer {
  background: var(--color-surface);
  border-top: var(--gold-divider);
  padding-block: var(--space-16) var(--space-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  margin-bottom: var(--space-8);
  border-bottom: var(--border-subtle);
}

.footer-brand-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.footer-brand-sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-6);
}

.footer-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-muted);
  font-weight: var(--weight-light);
  max-width: 280px;
}

.footer-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-6);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-links a {
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  color: var(--color-muted);
  transition: color var(--duration-base) var(--ease-out);
}

.footer-links a:hover {
  color: var(--color-text);
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  color: var(--color-muted);
  line-height: var(--leading-normal);
}

.footer-contact-item svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-accent);
  opacity: 0.7;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.footer-copy {
  font-size: var(--text-xs);
  color: var(--color-muted-dim);
  letter-spacing: var(--tracking-wide);
}

.footer-social {
  display: flex;
  gap: var(--space-4);
}

.footer-social a {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  transition: color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out);
}

.footer-social a:hover {
  color: var(--color-accent);
  border-color: rgba(196, 136, 42, 0.3);
  background: var(--color-accent-dim);
}


/* ==========================================================================
   17. SCROLL REVEAL — JS will toggle .revealed
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }
.reveal-delay-6 { transition-delay: 600ms; }

.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}


/* ==========================================================================
   18. UTILITY CLASSES
   ========================================================================== */

/* Display */
.hidden          { display: none; }
.block           { display: block; }
.inline-block    { display: inline-block; }
.inline-flex     { display: inline-flex; }

/* Positioning */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }

/* Width / Height */
.w-full   { width: 100%; }
.h-full   { height: 100%; }
.max-w-sm { max-width: var(--container-sm); }
.max-w-md { max-width: var(--container-md); }
.max-w-lg { max-width: var(--container-lg); }
.min-h-screen { min-height: 100svh; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Margin utilities */
.mx-auto     { margin-inline: auto; }
.mt-4        { margin-top: var(--space-4); }
.mt-6        { margin-top: var(--space-6); }
.mt-8        { margin-top: var(--space-8); }
.mt-12       { margin-top: var(--space-12); }
.mt-16       { margin-top: var(--space-16); }
.mb-4        { margin-bottom: var(--space-4); }
.mb-6        { margin-bottom: var(--space-6); }
.mb-8        { margin-bottom: var(--space-8); }
.mb-12       { margin-bottom: var(--space-12); }
.mb-16       { margin-bottom: var(--space-16); }

/* Padding utilities */
.p-4         { padding: var(--space-4); }
.p-6         { padding: var(--space-6); }
.p-8         { padding: var(--space-8); }
.px-4        { padding-inline: var(--space-4); }
.px-6        { padding-inline: var(--space-6); }
.px-8        { padding-inline: var(--space-8); }
.py-4        { padding-block: var(--space-4); }
.py-6        { padding-block: var(--space-6); }
.py-8        { padding-block: var(--space-8); }

/* Opacity */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }

/* Pointer events */
.pointer-none { pointer-events: none; }


/* ==========================================================================
   19. GOLD PARTICLE BACKGROUND (canvas fallback via CSS pattern)
   ========================================================================== */

/* Used on hero as fallback when no canvas/image is present */
.bg-particle {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(196, 136, 42, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(122, 24, 24, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(196, 136, 42, 0.02) 0%, transparent 60%);
}

/* Surface variants */
.bg-surface   { background-color: var(--color-surface); }
.bg-surface-2 { background-color: var(--color-surface-2); }
.bg-surface-3 { background-color: var(--color-surface-3); }


/* ==========================================================================
   20. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet: 1024px and below */
@media (max-width: 1024px) {
  :root {
    --text-5xl: 5rem;
    --text-4xl: 3.5rem;
    --text-3xl: 2.5rem;
  }

  .container {
    padding-inline: var(--space-6);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .split {
    gap: var(--space-10);
  }

  .nav-links {
    gap: var(--space-6);
  }

  .section {
    padding-block: var(--space-24);
  }
}

/* Mobile: 768px and below */
@media (max-width: 768px) {
  :root {
    --text-5xl: 3.5rem;
    --text-4xl: 2.5rem;
    --text-3xl: 2rem;
    --text-2xl: 1.625rem;
  }

  .container {
    padding-inline: var(--space-4);
  }

  /* Navigation collapses to drawer */
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-drawer {
    display: flex;
  }

  /* Layout adjustments */
  .split,
  .split-wide {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .split-reverse {
    direction: ltr;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .grid-auto-sm,
  .grid-auto-md {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-desc {
    max-width: 100%;
  }

  .section {
    padding-block: var(--space-16);
  }

  .section-lg {
    padding-block: var(--space-24);
  }

  .section-header {
    margin-bottom: var(--space-10);
  }

  .offset-right,
  .offset-left {
    margin: 0;
  }

  .btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-sm);
  }
}

/* Small mobile: 480px and below */
@media (max-width: 480px) {
  :root {
    --text-5xl: 2.75rem;
    --text-4xl: 2rem;
    --text-3xl: 1.75rem;
  }

  .container {
    padding-inline: var(--space-4);
  }

  .card {
    padding: var(--space-6);
  }

  .card-testimonial {
    padding: var(--space-6);
  }

  .nav {
    padding: var(--space-4);
  }
}


/* ==========================================================================
   CINEMATIC HERO-CAROUSEL — index.html
   The carousel IS the hero. Performance images fill 100svh.
   Heading, rule, CTAs, particles float above as overlay content.
   Captions bottom-left. Arrows mid-sides. Dots bottom-centre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section container — the single full-viewport opening frame
   -------------------------------------------------------------------------- */
.cinematic-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Image layer — slides stacked absolutely, z 0–2
   -------------------------------------------------------------------------- */
.carousel-track {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
}

.carousel-slide.is-active {
  opacity: 1;
  z-index: 1;
  transition: opacity 0.9s ease;
}

.carousel-slide.is-leaving {
  opacity: 0;
  z-index: 2;           /* above incoming so it fades over it */
  transition: opacity 0.9s ease;
  pointer-events: none;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform;
}

/* Ken Burns slow zoom while slide is active */
.carousel-slide.is-active .carousel-img {
  animation: ken-burns 9s linear forwards;
}

@keyframes ken-burns {
  from { transform: scale(1);    }
  to   { transform: scale(1.08); }
}

/* Slow violet drift for section backgrounds */
@keyframes violetDrift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Background breathing gradient — shifts position across the 400% wide gradient */
@keyframes bgBreath {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --------------------------------------------------------------------------
   Gradient overlay layer — z 3
   Three gradients: top band, centre veil, bottom vignette
   -------------------------------------------------------------------------- */
.carousel-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    /* Top dark band — topbar legibility */
    linear-gradient(180deg,
      rgba(13, 8, 24, 0.78) 0%,
      rgba(13, 8, 24, 0.18) 18%,
      transparent           28%),
    /* Centre veil — keeps heading readable over any image */
    linear-gradient(180deg,
      transparent           16%,
      rgba(13, 8, 24, 0.44) 33%,
      rgba(13, 8, 24, 0.44) 64%,
      transparent           76%),
    /* Bottom vignette — caption / dots legibility */
    linear-gradient(0deg,
      rgba(13, 8, 24, 0.92) 0%,
      rgba(13, 8, 24, 0.55) 26%,
      transparent           50%);
}

/* --------------------------------------------------------------------------
   Gold particle canvas — z 4
   -------------------------------------------------------------------------- */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

/* --------------------------------------------------------------------------
   Centre overlay — rule + heading + subheading + location — z 5
   position: relative so it participates in the flex centering of the section
   -------------------------------------------------------------------------- */
.hero-overlay {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 820px;
  width: 100%;
  padding: 0 var(--space-8);
  /* Shift slightly above mathematical centre — cinematic convention */
  margin-bottom: var(--space-16);
}

/* Gold ornamental rule */
.hero-rule {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 260px;
  margin-bottom: var(--space-8);
  animation: hero-fade-up 0.9s var(--ease-out) 2.9s both;
}

.hero-rule-arm {
  flex: 1;
  display: block;
  height: 1px;
  opacity: 0.5;
}

.hero-rule-arm--left  { background: linear-gradient(to right, transparent, var(--color-accent)); }
.hero-rule-arm--right { background: linear-gradient(to left,  transparent, var(--color-accent)); }

.hero-rule-gem {
  color: var(--color-accent);
  font-size: 0.42rem;
  line-height: 1;
  flex-shrink: 0;
  display: block;
  opacity: 0.85;
}

/* Main heading */
.hero-heading {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-light);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  text-shadow: 0 2px 48px rgba(13, 8, 24, 0.7);
  animation: hero-fade-up 1s var(--ease-out) 3.1s both;
}

.hero-heading em {
  font-style: italic;
  color: var(--color-accent-light);
  display: block;
}

/* Subheading */
.hero-sub {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  letter-spacing: 0.09em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  animation: hero-fade-up 0.9s var(--ease-out) 3.5s both;
}

/* Location / provenance line — below subheading */
.hero-location {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0;
  animation: hero-fade-up 0.9s var(--ease-out) 3.7s both;
}

/* --------------------------------------------------------------------------
   CTA buttons — centered below hero heading, inside hero-overlay flow
   -------------------------------------------------------------------------- */
.hero-ctas {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  animation: hero-fade-up 0.9s var(--ease-out) 3.9s both;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color            var(--duration-base) var(--ease-out),
    box-shadow       var(--duration-base) var(--ease-out),
    transform        var(--duration-fast) var(--ease-out);
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-gold {
  background: var(--color-accent);
  color: var(--color-bg);
}

.btn-gold:hover {
  background: var(--color-accent-light);
  box-shadow: 0 0 36px rgba(196, 136, 42, 0.35);
}

.btn-ghost {
  background: transparent;
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.btn-ghost:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-accent), 0 0 36px rgba(196, 136, 42, 0.35);
}

/* --------------------------------------------------------------------------
   Captions — stacked bottom-left, JS toggles is-active — z 5
   -------------------------------------------------------------------------- */
.carousel-captions {
  position: absolute;
  bottom: var(--space-16);
  left: var(--space-12);
  z-index: 5;
  /* Height set by the tallest caption; stacking context for absolute children */
  height: 60px;
  width: 520px;
  max-width: calc(60vw - var(--space-12));
}

.carousel-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  opacity: 0;
  transform: translateY(7px);
  transition:
    opacity   0.65s ease,
    transform 0.65s ease;
  pointer-events: none;
}

.carousel-caption.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  /* Delay so it appears after the image cross-fade begins */
  transition:
    opacity   0.65s ease 0.35s,
    transform 0.65s ease 0.35s;
}

/* Gold vertical accent bar */
.carousel-caption-bar {
  display: block;
  width: 2px;
  height: 42px;
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 3px;
  opacity: 0.8;
}

.carousel-caption-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.carousel-caption-event {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.carousel-caption-meta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.carousel-caption-dot {
  color: var(--color-accent);
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Navigation arrows — mid-sides, z 6
   -------------------------------------------------------------------------- */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 8, 24, 0.38);
  border: 1px solid rgba(196, 136, 42, 0.16);
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius-sm);
  opacity: 0.5;
  transition:
    background    var(--duration-base) var(--ease-out),
    border-color  var(--duration-base) var(--ease-out),
    color         var(--duration-base) var(--ease-out),
    opacity       var(--duration-base) var(--ease-out);
}

.cinematic-hero:hover .carousel-arrow,
.carousel-arrow:focus-visible {
  opacity: 1;
}

.carousel-arrow:hover {
  background: rgba(13, 8, 24, 0.75);
  border-color: rgba(196, 136, 42, 0.45);
  color: var(--color-accent);
}

.carousel-arrow--prev { left: var(--space-6); }
.carousel-arrow--next { right: var(--space-6); }

.carousel-arrow svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* --------------------------------------------------------------------------
   Dot indicators — bottom-centre, z 6
   -------------------------------------------------------------------------- */
.carousel-dots {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(242, 232, 213, 0.28);
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    background var(--duration-base) var(--ease-out),
    width      var(--duration-base) var(--ease-out);
}

.carousel-dot.is-active {
  background: var(--color-accent);
  width: 22px;
  border-radius: 3px;
}

.carousel-dot:hover:not(.is-active) {
  background: rgba(242, 232, 213, 0.55);
}

/* --------------------------------------------------------------------------
   Progress bar — bottom edge, z 6
   -------------------------------------------------------------------------- */
.carousel-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(196, 136, 42, 0.08);
  z-index: 6;
}

.carousel-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  opacity: 0.55;
  transition: width 0s linear;
}

.carousel-progress-fill.is-running {
  transition: width var(--carousel-duration, 4000ms) linear;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Entrance animation — used by all overlay elements
   -------------------------------------------------------------------------- */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-heading { font-size: var(--text-4xl); }
}

@media (max-width: 768px) {
  .hero-heading { font-size: var(--text-3xl); }

  .hero-overlay { margin-bottom: var(--space-12); }

  .hero-rule { width: 200px; }

  .hero-ctas {
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .carousel-captions {
    bottom: var(--space-12);
    left: var(--space-6);
    width: auto;
    max-width: calc(100vw - var(--space-16));
    height: auto;
    min-height: 56px;
  }

  .carousel-caption { position: relative; inset: auto; }
  .carousel-caption:not(.is-active) { display: none; }

  .carousel-caption-event { font-size: var(--text-lg); }

  .carousel-arrow {
    width: 40px;
    height: 40px;
    opacity: 0.9;
  }

  .carousel-arrow svg { width: 16px; height: 16px; }
  .carousel-arrow--prev { left: var(--space-3); }
  .carousel-arrow--next { right: var(--space-3); }
}

@media (max-width: 480px) {
  .hero-heading  { font-size: var(--text-2xl); }

  .hero-sub {
    font-size: var(--text-base);
    letter-spacing: 0.05em;
  }

  .carousel-caption-event {
    font-size: var(--text-base);
    font-style: normal;
  }

  .carousel-arrow { display: none; }

  .carousel-captions {
    bottom: var(--space-10);
    left: var(--space-4);
  }
}


/* ==========================================================================
   SHARED SECTION STYLES
   Reused across approach, about, testimonials sections
   ========================================================================== */

.section-container {
  max-width: 1160px;
  margin: 0 auto;
  padding-inline: var(--space-8);
}

.approach-section,
.testimonials-section {
  padding-block: var(--space-32);
  background: linear-gradient(135deg, #0D0818 0%, #1C1535 25%, #2D1F4E 50%, #1C1535 75%, #0D0818 100%);
  background-size: 400% 400%;
  animation: violetDrift 12s ease infinite;
  position: relative;
}

.about-section {
  padding-block: var(--space-32);
  background: linear-gradient(135deg, #0D0818 0%, #1C1535 25%, #2D1F4E 50%, #1C1535 75%, #0D0818 100%);
  background-size: 400% 400%;
  animation: violetDrift 12s ease infinite;
  position: relative;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.section-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.section-title em {
  font-style: italic;
  color: var(--color-accent-light);
}

.section-divider {
  width: 60px;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.4;
  margin: 0 auto;
}

/* Scroll-reveal — IntersectionObserver adds .is-visible */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Sections with animated gradients must stay fully opaque so violetDrift
   is always visible — only the content inside them should reveal on scroll */
.approach-section.reveal,
.about-section.reveal,
.testimonials-section.reveal {
  opacity: 1;
}


/* ==========================================================================
   APPROACH SECTION
   ========================================================================== */

.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.approach-card {
  background: var(--color-surface-2);
  border-top: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.approach-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-gold);
}

.approach-card-icon {
  width: 48px;
  height: 48px;
  color: var(--color-accent);
  margin-bottom: var(--space-6);
}

.approach-card-icon svg {
  width: 100%;
  height: 100%;
}

.approach-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-normal);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}

.approach-card-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-muted);
}


/* ==========================================================================
   ABOUT SUMMARY SECTION
   ========================================================================== */

.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10) var(--space-6);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: radial-gradient(ellipse 80% 60% at 30% 40%, rgba(123,94,167,0.12) 0%, transparent 70%);
}

.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  color: var(--color-accent-light);
  line-height: 1;
  letter-spacing: -0.04em;
}

.stat-plus {
  font-size: var(--text-2xl);
  vertical-align: super;
  color: var(--color-accent);
}

.stat-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

.about-text .section-eyebrow {
  text-align: left;
}

.about-heading {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  margin-top: var(--space-3);
}

.about-heading em {
  font-style: italic;
  color: var(--color-accent-light);
}

.about-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--color-text-dim);
  margin-bottom: var(--space-6);
}

.btn-about {
  margin-top: var(--space-2);
}


/* ==========================================================================
   TESTIMONIALS SECTION
   ========================================================================== */

.testimonials-stage {
  max-width: 800px;
  margin: 0 auto var(--space-10);
}

/* CSS grid stacking — all cards share cell 1/1; track height = tallest card */
.testimonials-track {
  display: grid;
  grid-template-columns: 1fr;
}

.testimonial-card {
  grid-area: 1 / 1;
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-12);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}

.testimonial-card.is-active {
  opacity: 1;
  visibility: visible;
}

.testimonial-quote-mark {
  position: absolute;
  top: var(--space-4);
  right: var(--space-8);
  font-family: var(--font-display);
  font-size: 9rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

.testimonial-quote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: var(--weight-light);
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: var(--space-8);
  position: relative;
  z-index: 1;
}

.testimonial-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.testimonial-name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.testimonial-role {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

/* Controls row */
.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.testimonials-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.testimonials-arrow:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

.testimonials-arrow svg {
  width: 18px;
  height: 18px;
}

.testimonials-dots {
  display: flex;
  gap: var(--space-2);
}

.testimonials-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  border: none;
  background: var(--color-muted);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, width 0.25s;
}

.testimonials-dot.is-active {
  background: var(--color-accent);
  width: 22px;
}


/* ==========================================================================
   SITE FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  gap: var(--space-12);
}

/* Brand column */
.footer-logo-link {
  display: inline-block;
  margin-bottom: var(--space-4);
}

.footer-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.footer-brand-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-normal);
  color: var(--color-text);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-1);
}

.footer-brand-tagline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.footer-brand-script {
  font-family: var(--font-kannada);
  font-size: var(--text-base);
  color: var(--color-muted);
  margin-bottom: var(--space-4);
}

.footer-brand-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-muted);
  max-width: 280px;
}

/* Nav column */
.footer-nav-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-nav-list a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav-list a:hover {
  color: var(--color-text);
}

/* Contact column */
.footer-contact {
  font-style: normal;
}

.footer-contact-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-muted);
}

.footer-contact-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-accent);
}

.footer-contact-item a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-contact-item a:hover {
  color: var(--color-accent-light);
}

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid var(--color-border);
}

.footer-bottom-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.footer-copyright {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-muted-dim);
}

.social-links {
  display: flex;
  gap: var(--space-3);
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.social-link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-light);
}

.social-link svg {
  width: 16px;
  height: 16px;
}


/* ==========================================================================
   RESPONSIVE — Approach, About, Testimonials, Footer
   ========================================================================== */

@media (max-width: 960px) {
  .approach-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }

  .about-split {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .stats-grid {
    max-width: 440px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .approach-section,
  .about-section,
  .testimonials-section {
    padding-block: var(--space-8);
  }

  .section-title {
    font-size: var(--text-2xl);
  }

  .stat-number {
    font-size: var(--text-3xl);
  }

  .testimonial-card {
    padding: var(--space-8);
  }

  .testimonial-quote {
    font-size: var(--text-lg);
  }

  .testimonial-quote-mark {
    font-size: 6rem;
  }

  .testimonials-controls {
    gap: var(--space-3);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }
}



/* ==========================================================================
   PAGE INTRO OVERLAY (inner pages)
   ========================================================================== */

#page-intro {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9998;
  background: #0D0818;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
}

#page-intro.page-intro-exit {
  transform: translateY(-100%);
}

#page-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.45;
}

.page-intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  padding-inline: var(--space-8);
}

.page-intro-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-4) 0;
  opacity: 0;
  animation: pi-fade-up 0.5s ease 0.15s forwards;
}

.page-intro-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 820px;
  opacity: 0;
  animation: pi-fade-up 0.6s ease 0.3s forwards;
}

.page-intro-title em {
  font-style: italic;
  color: var(--color-accent-light);
}

.page-intro-line {
  width: 0;
  height: 1px;
  background: var(--color-accent);
  margin-top: var(--space-6);
  animation: pi-line-grow 0.4s ease 0.75s forwards;
}

@keyframes pi-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pi-line-grow {
  from { width: 0; }
  to   { width: 80px; }
}

@media (max-width: 640px) {
  .page-intro-title {
    font-size: var(--text-3xl);
    letter-spacing: -0.01em;
  }
}


/* ==========================================================================
   MOBILE RESPONSIVENESS — Tablet 768 px | Mobile 480 px
   Additive only. No rules above are modified.
   ========================================================================== */

/* --------------------------------------------------------------------------
   768 px and below — Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Nav — collapse to hamburger drawer */
  .nav-links  { display: none; }
  .nav-toggle { display: flex; }
  .nav-drawer { display: flex; }

  /* Hero heading — fluid scale */
  .hero-heading { font-size: clamp(2rem, 8vw, 4.5rem); }

  /* Section headings — 30 % reduction from 3 rem desktop base */
  .section-title,
  .about-heading { font-size: 2.1rem; }

  /* Section container horizontal padding */
  .section-container { padding-inline: var(--space-4); }

  /* 3-column grids → single column */
  .approach-grid { grid-template-columns: 1fr; }

  /* 2-column grids → single column */
  .about-split,
  .stats-grid { grid-template-columns: 1fr; gap: var(--space-8); }

  /* Footer single column */
  .footer-grid { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   480 px and below — Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

  /* Hero heading — fluid scale */
  .hero-heading { font-size: clamp(1.5rem, 7vw, 3rem); }

  /* Section padding-block — ~40 % reduction from desktop values */
  .approach-section,
  .about-section,
  .testimonials-section { padding-block: var(--space-8); }

  .section { padding-block: var(--space-12); }

  /* Loading screen title */
  .loading-title { font-size: var(--text-2xl); }

  /* Images — responsive containment */
  img { max-width: 100%; height: auto; }

  /* Buttons — full width, stacked */
  .btn { width: 100%; justify-content: center; }

  .hero-ctas,
  .btn-group { flex-direction: column; align-items: stretch; }

  /* Contact / donate form inputs — full width */
  .form-input,
  .form-select,
  .form-textarea { width: 100%; box-sizing: border-box; }
}