/* ═══════════════════════════════════════════════════════════════════════════════
   ELYSIUM TERRIGAL — MASTER DESIGN SYSTEM
   SP99580 · 156 Terrigal Drive, Terrigal NSW 2260
   
   Inspired by: the beachfront where the lagoon meets the ocean at Terrigal,
   warm timber-grained architecture, golden evening light, luxury coastal living.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

/* ─── CSS CUSTOM PROPERTIES ──────────────────────────────────────────────────── */
:root {
  /* COLOUR PALETTE — drawn from Terrigal's landscape */
  --e-midnight:    #0D1F2D;   /* deep ocean at night — primary dark */
  --e-navy:        #1A3347;   /* ocean depth — headers, nav */
  --e-ocean:       #2C5F7A;   /* mid ocean — accents, links */
  --e-lagoon:      #4A8FA3;   /* lagoon water — interactive states */
  --e-sky:         #A8CDD8;   /* pale sky — light accents */
  --e-foam:        #E8F3F6;   /* sea foam — light backgrounds */

  --e-gold:        #B8975A;   /* warm champagne gold — primary accent */
  --e-gold-light:  #D4B87A;   /* lighter gold — hover states */
  --e-gold-pale:   #F0E6C8;   /* pale gold — backgrounds */

  --e-sand:        #F5F0E4;   /* warm sand — page background */
  --e-stone:       #E8E0D0;   /* stone — borders, dividers */
  --e-driftwood:   #C4A882;   /* driftwood — secondary accents */
  --e-timber:      #8B6B4A;   /* timber grain — warm details */

  --e-white:       #FDFCF9;   /* warm white — cards */
  --e-offwhite:    #F7F3EC;   /* off white — subtle backgrounds */
  --e-text:        #1A1A18;   /* near black — body text */
  --e-muted:       #6B6455;   /* warm grey — secondary text */
  --e-subtle:      #9B9180;   /* subtle — placeholder, captions */
  --e-rule:        #DDD5C4;   /* warm rule/border colour */

  /* STATUS COLOURS — tinted to match the palette */
  --e-ok:          #2D7A52;
  --e-ok-bg:       #E8F5EE;
  --e-ok-mid:      #A8D4B8;
  --e-warn:        #8B6B1A;
  --e-warn-bg:     #FDF4DC;
  --e-warn-mid:    #D4B84A;
  --e-alert:       #8B2A2A;
  --e-alert-bg:    #F5E8E8;
  --e-alert-mid:   #D48A8A;

  /* TYPOGRAPHY */
  --font-display:  'Cormorant Garamond', 'Georgia', serif;
  --font-body:     'Jost', 'Helvetica Neue', sans-serif;

  /* SIZING */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 999px;

  /* SHADOWS */
  --shadow-sm:  0 1px 4px rgba(13,31,45,.06), 0 1px 2px rgba(13,31,45,.04);
  --shadow-md:  0 4px 16px rgba(13,31,45,.08), 0 2px 6px rgba(13,31,45,.05);
  --shadow-lg:  0 12px 40px rgba(13,31,45,.12), 0 4px 12px rgba(13,31,45,.06);
  --shadow-gold:0 4px 20px rgba(184,151,90,.25);

  /* TRANSITIONS */
  --t-fast:   0.15s ease;
  --t-mid:    0.25s ease;
  --t-slow:   0.4s cubic-bezier(0.25, 0.1, 0.25, 1);

  /* SPACING SCALE */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10:64px; --sp-11:80px; --sp-12:96px;
}

/* ─── BASE RESET ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  background: var(--e-sand);
  color: var(--e-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────────── */
.e-display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--e-midnight);
}
.e-display-xl  { font-size: clamp(40px, 6vw, 72px); }
.e-display-lg  { font-size: clamp(32px, 4.5vw, 54px); }
.e-display-md  { font-size: clamp(26px, 3.5vw, 42px); }
.e-display-sm  { font-size: clamp(20px, 2.5vw, 32px); }

.e-heading {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.25;
  color: var(--e-midnight);
}
.e-heading-lg { font-size: 24px; letter-spacing: 0.01em; }
.e-heading-md { font-size: 18px; letter-spacing: 0.01em; }
.e-heading-sm { font-size: 15px; }

.e-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--e-muted);
}
.e-label-gold { color: var(--e-gold); }
.e-label-light { color: rgba(255,255,255,.65); }

.e-body-lg { font-size: 17px; font-weight: 300; line-height: 1.75; }
.e-body    { font-size: 15px; font-weight: 300; line-height: 1.7; }
.e-body-sm { font-size: 13px; font-weight: 300; line-height: 1.65; }
.e-caption { font-size: 12px; font-weight: 300; color: var(--e-subtle); line-height: 1.5; }

/* ─── LAYOUT ─────────────────────────────────────────────────────────────────── */
.e-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
.e-container-narrow { max-width: 860px; margin: 0 auto; padding: 0 var(--sp-6); }
.e-container-wide   { max-width: 1440px; margin: 0 auto; padding: 0 var(--sp-6); }

/* ─── NAVIGATION ─────────────────────────────────────────────────────────────── */
.e-nav {
  background: rgba(13,31,45,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(184,151,90,.2);
  position: sticky;
  top: 0;
  z-index: 200;
  padding: 0 var(--sp-7);
  display: flex;
  align-items: center;
  height: 68px;
}
.e-nav-brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  margin-right: var(--sp-8);
}
.e-nav-brand .wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0.28em;
  color: var(--e-white);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.e-nav-brand .wordmark .wm-s {
  font-size: 1.72em;
  font-weight: 300;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.28em;
  margin-top: 0.13em;
}
.e-nav-brand .sub {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--e-gold);
  font-weight: 400;
  margin-top: 2px;
}
.e-nav-divider {
  width: 1px;
  height: 28px;
  background: rgba(184,151,90,.3);
  margin-right: var(--sp-7);
}
.e-nav-links { display: flex; gap: 0; flex: 1; }
.e-nav-link {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 var(--sp-4);
  height: 68px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  transition: all var(--t-fast);
}
.e-nav-link:hover { color: white; }
.e-nav-link.active { color: var(--e-gold-light); border-bottom-color: var(--e-gold); }
.e-nav-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
.e-nav-user {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  letter-spacing: 0.05em;
}
.e-nav-user strong { color: rgba(255,255,255,.85); font-weight: 400; }

/* ─── HERO HEADER ────────────────────────────────────────────────────────────── */
.e-hero {
  background: linear-gradient(160deg, var(--e-midnight) 0%, var(--e-navy) 45%, var(--e-ocean) 100%);
  position: relative;
  overflow: hidden;
  padding: var(--sp-10) var(--sp-7) var(--sp-12);
}
.e-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(74,143,163,.15) 0%, transparent 60%),
    radial-gradient(ellipse 40% 80% at 10% 80%, rgba(184,151,90,.08) 0%, transparent 50%);
  pointer-events: none;
}
.e-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: var(--e-sand);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.e-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}
.e-hero-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--e-gold);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.e-hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--e-gold);
  opacity: .6;
}
.e-hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 300;
  color: var(--e-white);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: var(--sp-4);
}
.e-hero-subtitle {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.6);
  letter-spacing: 0.05em;
}

/* ─── SECTION DIVIDER ────────────────────────────────────────────────────────── */
.e-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-7) 0;
}
.e-divider::before, .e-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--e-rule);
}
.e-divider-icon {
  width: 6px; height: 6px;
  border: 1px solid var(--e-gold);
  border-radius: 50%;
  flex-shrink: 0;
}
.e-divider-text {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--e-subtle);
  font-weight: 500;
  flex-shrink: 0;
}
.e-rule { height: 1px; background: var(--e-rule); margin: var(--sp-6) 0; }
.e-rule-gold { background: linear-gradient(90deg, transparent, var(--e-gold), transparent); height: 1px; margin: var(--sp-6) 0; opacity: .4; }

/* ─── CARDS ──────────────────────────────────────────────────────────────────── */
.e-card {
  background: var(--e-white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.e-card-elevated {
  background: var(--e-white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.e-card-dark {
  background: var(--e-navy);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  color: white;
}
.e-card-body { padding: var(--sp-6) var(--sp-6); }
.e-card-body-lg { padding: var(--sp-7) var(--sp-7); }

/* Panel with accent header */
.e-panel {
  background: var(--e-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.e-panel-header {
  background: linear-gradient(135deg, var(--e-midnight) 0%, var(--e-navy) 100%);
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(184,151,90,.25);
}
.e-panel-header h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--e-white);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.e-panel-header .meta {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  letter-spacing: 0.08em;
}
.e-panel-header .gold-dot {
  width: 5px; height: 5px;
  background: var(--e-gold);
  border-radius: 50%;
}

/* ─── STAT / SUMMARY CARDS ───────────────────────────────────────────────────── */
.e-stat {
  background: var(--e-white);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.e-stat::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--e-rule);
}
.e-stat.accent::after { background: linear-gradient(180deg, var(--e-gold), var(--e-driftwood)); }
.e-stat.ok::after     { background: var(--e-ok); }
.e-stat.warn::after   { background: var(--e-warn-mid); }
.e-stat.alert::after  { background: var(--e-alert-mid); }
.e-stat .stat-label   { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--e-subtle); margin-bottom: var(--sp-2); }
.e-stat .stat-value   { font-family: var(--font-display); font-size: 32px; font-weight: 400; color: var(--e-midnight); line-height: 1; margin-bottom: var(--sp-1); }
.e-stat .stat-sub     { font-size: 12px; color: var(--e-muted); font-weight: 300; }
.e-stat-dark {
  background: linear-gradient(135deg, var(--e-midnight), var(--e-navy));
  color: white;
}
.e-stat-dark .stat-label { color: rgba(255,255,255,.5); }
.e-stat-dark .stat-value { color: var(--e-white); }
.e-stat-dark .stat-sub   { color: rgba(255,255,255,.55); }

/* ─── BUTTONS ────────────────────────────────────────────────────────────────── */
.e-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--t-mid);
  white-space: nowrap;
  border-radius: var(--r-sm);
}
.e-btn-primary {
  background: linear-gradient(135deg, var(--e-gold) 0%, var(--e-gold-light) 100%);
  color: var(--e-midnight);
  font-size: 11px;
  padding: 13px 28px;
  box-shadow: var(--shadow-gold);
}
.e-btn-primary:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(184,151,90,.35); }
.e-btn-secondary {
  background: transparent;
  color: var(--e-gold);
  font-size: 11px;
  padding: 12px 26px;
  border: 1px solid rgba(184,151,90,.5);
}
.e-btn-secondary:hover { background: rgba(184,151,90,.08); border-color: var(--e-gold); }
.e-btn-ghost {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
  font-size: 11px;
  padding: 8px 18px;
}
.e-btn-ghost:hover { background: rgba(255,255,255,.2); }
.e-btn-dark {
  background: var(--e-midnight);
  color: white;
  font-size: 11px;
  padding: 13px 28px;
}
.e-btn-dark:hover { background: var(--e-navy); transform: translateY(-1px); }

/* ─── FORM ELEMENTS ──────────────────────────────────────────────────────────── */
.e-label-field {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--e-muted);
  display: block;
  margin-bottom: var(--sp-2);
}
.e-input, .e-select, .e-textarea {
  width: 100%;
  background: var(--e-offwhite);
  border: 1px solid var(--e-stone);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--e-text);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.e-input:focus, .e-select:focus, .e-textarea:focus {
  outline: none;
  border-color: var(--e-lagoon);
  background: var(--e-white);
  box-shadow: 0 0 0 3px rgba(74,143,163,.1);
}
.e-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

/* ─── STATUS BADGES ──────────────────────────────────────────────────────────── */
.e-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.e-badge::before { content: '●'; font-size: 6px; }
.e-badge-ok     { background: var(--e-ok-bg);    color: var(--e-ok);    border: 1px solid var(--e-ok-mid); }
.e-badge-warn   { background: var(--e-warn-bg);   color: var(--e-warn);  border: 1px solid var(--e-warn-mid); }
.e-badge-alert  { background: var(--e-alert-bg);  color: var(--e-alert); border: 1px solid var(--e-alert-mid); }
.e-badge-gold   { background: var(--e-gold-pale); color: var(--e-timber);border: 1px solid rgba(184,151,90,.3); }
.e-badge-ocean  { background: var(--e-foam);      color: var(--e-ocean); border: 1px solid var(--e-sky); }

/* ─── TABLES ─────────────────────────────────────────────────────────────────── */
.e-table { width: 100%; border-collapse: collapse; }
.e-table thead th {
  background: var(--e-offwhite);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--e-subtle);
  padding: 11px 16px;
  text-align: left;
  border-bottom: 1px solid var(--e-stone);
}
.e-table tbody tr { border-bottom: 1px solid var(--e-stone); transition: background var(--t-fast); }
.e-table tbody tr:last-child { border-bottom: none; }
.e-table tbody tr:hover { background: var(--e-offwhite); }
.e-table tbody td { padding: 13px 16px; font-size: 13px; font-weight: 300; vertical-align: middle; }
.e-table tbody td strong { font-weight: 500; }

/* ─── LOGIN CARD ─────────────────────────────────────────────────────────────── */
.e-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: 
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(44,95,122,.3) 0%, transparent 55%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(184,151,90,.12) 0%, transparent 50%),
    linear-gradient(160deg, var(--e-midnight) 0%, var(--e-navy) 55%, #1C3D52 100%);
  padding: var(--sp-6);
  position: relative;
  overflow: hidden;
}
.e-login-wrap::before {
  content: 'ELYSIUM';
  position: absolute;
  font-family: var(--font-display);
  font-size: 20vw;
  font-weight: 300;
  color: rgba(255,255,255,.02);
  letter-spacing: 0.4em;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.e-login-card {
  background: var(--e-white);
  border-radius: var(--r-xl);
  padding: var(--sp-9) var(--sp-8);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.e-login-logo {
  text-align: center;
  margin-bottom: var(--sp-7);
}
.e-login-logo .wordmark {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.35em;
  color: var(--e-midnight);
  text-transform: uppercase;
  display: block;
}
.e-login-logo .sub {
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--e-gold);
  font-weight: 500;
  margin-top: 4px;
  display: block;
}
.e-login-rule {
  width: 40px;
  height: 1px;
  background: var(--e-gold);
  margin: var(--sp-4) auto var(--sp-5);
  opacity: .5;
}

/* ─── UPLOAD ZONES ───────────────────────────────────────────────────────────── */
.e-upload-zone {
  border: 1.5px dashed var(--e-stone);
  border-radius: var(--r-md);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  cursor: pointer;
  transition: all var(--t-mid);
  background: var(--e-offwhite);
}
.e-upload-zone:hover, .e-upload-zone.drag-over {
  border-color: var(--e-lagoon);
  background: var(--e-foam);
}
.e-upload-zone .upload-icon { font-size: 28px; margin-bottom: var(--sp-3); opacity: .6; }
.e-upload-zone .upload-text { font-size: 13px; font-weight: 400; color: var(--e-ocean); letter-spacing: 0.05em; }
.e-upload-zone .upload-sub  { font-size: 11px; color: var(--e-subtle); margin-top: var(--sp-1); }

/* ─── ALERTS / BANNERS ───────────────────────────────────────────────────────── */
.e-alert-banner {
  padding: 12px 18px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 300;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  line-height: 1.5;
}
.e-alert-ok     { background: var(--e-ok-bg);    color: var(--e-ok);    border: 1px solid var(--e-ok-mid); }
.e-alert-warn   { background: var(--e-warn-bg);   color: var(--e-warn);  border: 1px solid var(--e-warn-mid); }
.e-alert-danger { background: var(--e-alert-bg);  color: var(--e-alert); border: 1px solid var(--e-alert-mid); }
.e-alert-info   { background: var(--e-foam);      color: var(--e-ocean); border: 1px solid var(--e-sky); }
.e-alert-gold   { background: var(--e-gold-pale); color: var(--e-timber);border: 1px solid rgba(184,151,90,.35); }

/* ─── FOOTER ─────────────────────────────────────────────────────────────────── */
.e-footer {
  background: var(--e-midnight);
  color: rgba(255,255,255,.4);
  padding: var(--sp-7) var(--sp-7);
  text-align: center;
  border-top: 1px solid rgba(184,151,90,.15);
}
.e-footer .footer-brand {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.e-footer .footer-brand .wm-s {
  font-size: 1.72em;
  font-weight: 300;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.28em;
  margin-top: 0.13em;
}
.e-footer .footer-rule {
  width: 32px; height: 1px;
  background: var(--e-gold);
  opacity: .3;
  margin: var(--sp-3) auto;
}
.e-footer p { font-size: 11px; letter-spacing: 0.06em; line-height: 1.8; }

/* ─── ANIMATIONS ─────────────────────────────────────────────────────────────── */
@keyframes e-fadein { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes e-shimmer { 0%,100% { opacity:.4; } 50% { opacity:.8; } }
.e-fadein { animation: e-fadein 0.5s ease forwards; }
.e-fadein-1 { animation: e-fadein 0.5s 0.1s ease both; }
.e-fadein-2 { animation: e-fadein 0.5s 0.2s ease both; }
.e-fadein-3 { animation: e-fadein 0.5s 0.3s ease both; }
.e-fadein-4 { animation: e-fadein 0.5s 0.4s ease both; }

/* ─── UTILITY CLASSES ────────────────────────────────────────────────────────── */
.e-text-gold    { color: var(--e-gold); }
.e-text-muted   { color: var(--e-muted); }
.e-text-subtle  { color: var(--e-subtle); }
.e-text-white   { color: white; }
.e-text-navy    { color: var(--e-navy); }
.e-bg-sand      { background: var(--e-sand); }
.e-bg-offwhite  { background: var(--e-offwhite); }
.e-bg-navy      { background: var(--e-navy); }
.e-bg-dark      { background: var(--e-midnight); }
.e-mt-auto      { margin-top: auto; }
.e-flex         { display: flex; }
.e-flex-center  { display: flex; align-items: center; }
.e-flex-between { display: flex; align-items: center; justify-content: space-between; }
.e-gap-sm       { gap: var(--sp-3); }
.e-gap-md       { gap: var(--sp-5); }
.e-gap-lg       { gap: var(--sp-6); }
.e-grid-2       { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.e-grid-3       { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
.e-grid-4       { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-5); }
.e-grid-auto    { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: var(--sp-5); }
@media(max-width:768px) {
  .e-grid-2,.e-grid-3,.e-grid-4 { grid-template-columns:1fr; }
}