/*
 * ╔══════════════════════════════════════════════════════════════════════════╗
 * ║                                                                          ║
 * ║   Exploria — Cinematic Design System All-in-One Travel Platform      ║
 * ║   Version: 2.0.0  |  License: GPL v2+                                    ║
 * ║                                                                          ║
 * ║   Architecture:                                                          ║
 * ║   1. Design Tokens          — All root variables, zero hardcoded values  ║
 * ║   2. Base Layer             — Reset, typography, global primitives       ║
 * ║   3. Component Layer        — Cards, buttons, nav, hero, forms, badges   ║
 * ║   4. Utility Layer          — Animation, glass, blur, layout helpers     ║
 * ║   5. Animation Keyframes    — Cinematic motion library                   ║
 * ║   6. Dark Mode              — Semantic token overrides                   ║
 * ║   7. RTL & Accessibility    — Direction, contrast, reduced-motion        ║
 * ║   8. Responsive Refinements — Mobile-first, performance-aware            ║
 * ║                                                                          ║
 * ╚══════════════════════════════════════════════════════════════════════════╝
 */

/* ════════════════════════════════════════════════════════════════════════════
   §1  DESIGN TOKENS  ─  The Single Source of Truth
       All values in this file reference only these variables.
       No magic numbers. No hardcoded colors. Ever.
   ════════════════════════════════════════════════════════════════════════════ */
:root {

  /* ── 1.1  Brand Palette ─────────────────────────────────────────────────── */
  /* Deep ocean teal — anchors the cinematic identity */
  --clr-brand:          #0A3D4A;
  --clr-brand-mid:      #0F5468;
  --clr-brand-bright:   #1A7A96;
  --clr-brand-glow:     rgba(26, 122, 150, 0.35);

  /* Warm gold — reserved for CTA emphasis and premium signals */
  --clr-gold:           #C9A84C;
  --clr-gold-light:     #E2C87A;
  --clr-gold-dim:       rgba(201, 168, 76, 0.18);
  --clr-gold-glow:      rgba(201, 168, 76, 0.30);

  /* Emerald accent — secondary action, success, nature motifs */
  --clr-emerald:        #1B6B52;
  --clr-emerald-light:  #27956F;

  /* ── 1.2  Surface Palette (light mode default) ──────────────────────────── */
  --clr-bg:             #F7F8FA;
  --clr-surface:        #FFFFFF;
  --clr-surface-raised: #F0F2F5;
  --clr-surface-inset:  #E8EAEE;

  /* ── 1.3  Ink (text) Palette ────────────────────────────────────────────── */
  --clr-ink:            #0C1B26;
  --clr-ink-muted:      #4A5D6E;
  --clr-ink-faint:      #8A9BAA;
  --clr-ink-inverse:    #F7F8FA;

  /* ── 1.4  Border & Divider ──────────────────────────────────────────────── */
  --clr-border:         #DCE1E8;
  --clr-border-strong:  #B8C2CC;

  /* ── 1.5  Glass Surfaces ────────────────────────────────────────────────── */
  --glass-light:        rgba(255, 255, 255, 0.72);
  --glass-light-border: rgba(255, 255, 255, 0.55);
  --glass-dark:         rgba(8, 18, 28, 0.68);
  --glass-dark-border:  rgba(255, 255, 255, 0.09);
  --glass-brand:        rgba(10, 61, 74, 0.55);
  --glass-brand-border: rgba(26, 122, 150, 0.28);

  /* ── 1.6  Cinematic Gradients ───────────────────────────────────────────── */
  --grad-brand:     linear-gradient(140deg, var(--clr-brand) 0%, #0B2D40 100%);
  --grad-depth:     linear-gradient(160deg, #071520 0%, var(--clr-brand) 55%, #071E2C 100%);
  --grad-gold:      linear-gradient(135deg, #A07830 0%, var(--clr-gold) 50%, #D4B060 100%);
  --grad-sunrise:   linear-gradient(135deg, #0A2230 0%, var(--clr-brand) 45%, var(--clr-emerald) 100%);
  --grad-film:      linear-gradient(180deg,
                      rgba(7, 21, 32, 0.08) 0%,
                      rgba(7, 21, 32, 0.55) 55%,
                      rgba(7, 21, 32, 0.92) 100%);
  --grad-hero:      linear-gradient(145deg,
                      rgba(10, 61, 74, 0.62) 0%,
                      rgba(7, 21, 32, 0.88) 100%);
  --grad-card-shine:linear-gradient(
                      105deg,
                      transparent 35%,
                      rgba(255, 255, 255, 0.055) 50%,
                      transparent 65%);
  --grad-subtle-bg: linear-gradient(180deg, var(--clr-bg) 0%, var(--clr-surface-raised) 100%);

  /* ── 1.7  Typography ────────────────────────────────────────────────────── */
  /* Editorial serif headline — authority + wanderlust */
  --ff-display:     'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  /* Geometric sans — clarity in body and UI */
  --ff-body:        'DM Sans', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Monospace — rates, coordinates, technical data */
  --ff-mono:        'DM Mono', 'Fira Code', 'Courier New', monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-2xs:  clamp(0.625rem,  0.58rem  + 0.22vw, 0.75rem);
  --text-xs:   clamp(0.75rem,   0.70rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem,  0.82rem  + 0.28vw, 1rem);
  --text-base: clamp(1rem,      0.95rem  + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem,  1.05rem  + 0.38vw, 1.375rem);
  --text-xl:   clamp(1.25rem,   1.15rem  + 0.50vw, 1.625rem);
  --text-h5:   clamp(1.375rem,  1.20rem  + 0.88vw, 1.875rem);
  --text-h4:   clamp(1.625rem,  1.35rem  + 1.38vw, 2.5rem);
  --text-h3:   clamp(2rem,      1.65rem  + 1.75vw, 3.25rem);
  --text-h2:   clamp(2.5rem,    1.95rem  + 2.75vw, 4.5rem);
  --text-h1:   clamp(3rem,      2.20rem  + 4.00vw, 6rem);
  --text-hero: clamp(3.5rem,    2.50rem  + 5.00vw, 7.5rem);

  /* Line heights */
  --lh-tight:   1.10;
  --lh-snug:    1.30;
  --lh-heading: 1.18;
  --lh-body:    1.72;
  --lh-relaxed: 1.85;

  /* Letter spacing */
  --ls-tight:   -0.03em;
  --ls-snug:    -0.015em;
  --ls-normal:  0em;
  --ls-wide:    0.06em;
  --ls-widest:  0.12em;

  /* Font weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* ── 1.8  Spacing Scale (4px base grid) ─────────────────────────────────── */
  --sp-0:   0;
  --sp-1:   0.25rem;  /* 4px  */
  --sp-2:   0.5rem;   /* 8px  */
  --sp-3:   0.75rem;  /* 12px */
  --sp-4:   1rem;     /* 16px */
  --sp-5:   1.25rem;  /* 20px */
  --sp-6:   1.5rem;   /* 24px */
  --sp-7:   1.75rem;  /* 28px */
  --sp-8:   2rem;     /* 32px */
  --sp-10:  2.5rem;   /* 40px */
  --sp-12:  3rem;     /* 48px */
  --sp-14:  3.5rem;   /* 56px */
  --sp-16:  4rem;     /* 64px */
  --sp-20:  5rem;     /* 80px */
  --sp-24:  6rem;     /* 96px */
  --sp-28:  7rem;     /* 112px */
  --sp-32:  8rem;     /* 128px */
  --sp-40:  10rem;    /* 160px */
  --sp-48:  12rem;    /* 192px */

  /* ── 1.9  Border Radius ─────────────────────────────────────────────────── */
  --r-none:  0;
  --r-xs:    0.1875rem;  /* 3px  */
  --r-sm:    0.375rem;   /* 6px  */
  --r-md:    0.75rem;    /* 12px */
  --r-lg:    1.25rem;    /* 20px */
  --r-xl:    2rem;       /* 32px */
  --r-2xl:   2.5rem;     /* 40px */
  --r-full:  9999px;

  /* ── 1.10  Elevation & Shadow System ────────────────────────────────────── */
  /* Light-mode shadows (subtle, warm-tinted) */
  --shadow-xs:   0 1px 2px rgba(12, 27, 38, 0.04);
  --shadow-sm:   0 2px 6px rgba(12, 27, 38, 0.06),
                 0 1px 2px rgba(12, 27, 38, 0.04);
  --shadow-md:   0 4px 16px rgba(12, 27, 38, 0.09),
                 0 2px 4px  rgba(12, 27, 38, 0.05);
  --shadow-lg:   0 12px 32px rgba(12, 27, 38, 0.12),
                 0 4px  10px rgba(12, 27, 38, 0.06);
  --shadow-xl:   0 24px 56px rgba(12, 27, 38, 0.15),
                 0 8px  18px rgba(12, 27, 38, 0.08);
  --shadow-2xl:  0 40px 80px rgba(12, 27, 38, 0.20),
                 0 16px 32px rgba(12, 27, 38, 0.10);

  /* Cinematic glow shadows */
  --shadow-glow-brand: 0 0 0 1px var(--clr-brand-glow),
                       0 8px 32px  var(--clr-brand-glow),
                       0 24px 64px rgba(10, 61, 74, 0.18);
  --shadow-glow-gold:  0 0 0 1px var(--clr-gold-glow),
                       0 8px 32px  var(--clr-gold-glow),
                       0 24px 64px rgba(201, 168, 76, 0.15);
  --shadow-focus:      0 0 0 3px var(--clr-brand-glow),
                       0 0 0 1px var(--clr-brand-bright);
  --shadow-focus-gold: 0 0 0 3px var(--clr-gold-dim),
                       0 0 0 1px var(--clr-gold);
  --shadow-inset:      inset 0 1px 3px rgba(12, 27, 38, 0.08);
  --shadow-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* ── 1.11  Blur System ──────────────────────────────────────────────────── */
  --blur-xs:  4px;
  --blur-sm:  8px;
  --blur-md:  16px;
  --blur-lg:  24px;
  --blur-xl:  40px;
  --blur-2xl: 64px;

  /* ── 1.12  Motion & Easing ──────────────────────────────────────────────── */
  /* Durations */
  --dur-instant: 80ms;
  --dur-fast:    180ms;
  --dur-normal:  320ms;
  --dur-slow:    540ms;
  --dur-slower:  800ms;
  --dur-cinematic: 1200ms;

  /* Premium cubic-bezier easings */
  --ease-smooth:   cubic-bezier(0.4,  0,    0.2, 1);
  --ease-out:      cubic-bezier(0,    0,    0.2, 1);
  --ease-in:       cubic-bezier(0.4,  0,    1,   1);
  --ease-expo-out: cubic-bezier(0.16, 1,    0.3, 1);     /* cinematic deceleration */
  --ease-expo-in:  cubic-bezier(0.7,  0,    0.84,0);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64,1);
  --ease-spring:   cubic-bezier(0.175,0.885,0.32,1.275);
  --ease-film:     cubic-bezier(0.25, 0.46, 0.45,0.94);  /* signature Exploria ease */

  /* Composed transitions */
  --transition-base:      all var(--dur-normal) var(--ease-smooth);
  --transition-fast:      all var(--dur-fast)   var(--ease-out);
  --transition-transform: transform var(--dur-normal) var(--ease-expo-out);
  --transition-opacity:   opacity   var(--dur-normal) var(--ease-out);
  --transition-color:     color var(--dur-fast) var(--ease-out),
                          background-color var(--dur-fast) var(--ease-out),
                          border-color var(--dur-fast) var(--ease-out);

  /* ── 1.13  3D & Perspective ─────────────────────────────────────────────── */
  --perspective:   1000px;
  --tilt-x:        4deg;
  --tilt-y:        6deg;
  --z-lift:        20px;

  /* ── 1.14  Z-Index Scale ────────────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-backdrop: 400;
  --z-modal:    500;
  --z-popover:  600;
  --z-tooltip:  700;
  --z-cursor:   9999;

  /* ── 1.15  Layout ───────────────────────────────────────────────────────── */
  --container-narrow: 660px;
  --container-text:   780px;
  --container-medium: 1000px;
  --container-wide:   1280px;
  --container-site:   1480px;
  --container-pad-xs: var(--sp-4);
  --container-pad-sm: var(--sp-6);
  --container-pad-md: var(--sp-8);
  --container-pad-xl: var(--sp-10);

  /* ── 1.16  Grain Overlay (SVG Data URI, subtle noise texture) ───────────── */
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}


/* ════════════════════════════════════════════════════════════════════════════
   §2  BASE LAYER  ─  Reset, Global Primitives, Typography Hierarchy
   ════════════════════════════════════════════════════════════════════════════ */
@layer base {

  /* ── 2.1  Box Model Reset ────────────────────────────────────────────────── */
  *, *::before, *::after {
    box-sizing: border-box;
    margin:  0;
    padding: 0;
  }

  /* ── 2.2  Root & Scroll ──────────────────────────────────────────────────── */
  html {
    scroll-behavior: smooth;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Stable scrollbar gutter prevents layout shift */
    scrollbar-gutter: stable;
  }

  /* ── 2.3  Body ───────────────────────────────────────────────────────────── */
  body {
    font-family:      var(--ff-body);
    font-size:        var(--text-base);
    font-weight:      var(--fw-regular);
    line-height:      var(--lh-body);
    color:            var(--clr-ink);
    background-color: var(--clr-bg);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering:          optimizeLegibility;
    overflow-x: hidden;
    transition:
      background-color var(--dur-slow) var(--ease-smooth),
      color            var(--dur-slow) var(--ease-smooth);
  }

  /* ── 2.4  Media ─────────────────────────────────────────────────────────── */
  img, picture, video, canvas, svg {
    display:   block;
    max-width: 100%;
    height:    auto;
  }

  /* ── 2.5  Form Inheritance ──────────────────────────────────────────────── */
  input, button, textarea, select {
    font:  inherit;
    color: inherit;
  }

  button {
    cursor:     pointer;
    background: none;
    border:     none;
  }

  /* ── 2.6  Selection ─────────────────────────────────────────────────────── */
  ::selection {
    background-color: var(--clr-brand-mid);
    color:            var(--clr-ink-inverse);
  }

  /* ── 2.7  Focus States (WCAG AA) ────────────────────────────────────────── */
  :focus-visible {
    outline:        none;
    box-shadow:     var(--shadow-focus);
    border-radius:  var(--r-sm);
  }

  /* ── 2.8  Typography Hierarchy ──────────────────────────────────────────── */
  h1, h2, h3, h4, h5, h6 {
    font-family:    var(--ff-display);
    font-weight:    var(--fw-bold);
    line-height:    var(--lh-heading);
    letter-spacing: var(--ls-tight);
    color:          var(--clr-ink);
    text-wrap:      balance;
  }

  h1 {
    font-size:      var(--text-h1);
    letter-spacing: -0.04em;
    margin-bottom:  var(--sp-7);
  }

  h2 {
    font-size:     var(--text-h2);
    margin-bottom: var(--sp-6);
  }

  h3 {
    font-size:     var(--text-h3);
    margin-bottom: var(--sp-5);
  }

  h4 {
    font-size:     var(--text-h4);
    margin-bottom: var(--sp-4);
  }

  h5 {
    font-size:     var(--text-h5);
    margin-bottom: var(--sp-3);
  }

  h6 {
    font-family:    var(--ff-body);
    font-size:      var(--text-xs);
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color:          var(--clr-brand-bright);
    margin-bottom:  var(--sp-3);
  }

  p {
    margin-bottom: var(--sp-5);
    color:         var(--clr-ink-muted);
    max-width:     72ch;
  }

  /* Paragraph sitting inside constrained content areas */
  .prose p { max-width: 65ch; }

  a {
    color:           var(--clr-brand-bright);
    text-decoration: none;
    transition:      var(--transition-color);
  }

  a:hover { color: var(--clr-brand-mid); }

  /* ── 2.9  Horizontal Rule ───────────────────────────────────────────────── */
  hr {
    border:     none;
    height:     1px;
    background: linear-gradient(
      to right,
      transparent,
      var(--clr-border-strong) 20%,
      var(--clr-border-strong) 80%,
      transparent
    );
    margin-block: var(--sp-12);
    opacity: 0.5;
  }

  /* ── 2.10  Lists ────────────────────────────────────────────────────────── */
  ul, ol {
    list-style: none;
  }

  /* ── 2.11  Screen Reader Utility ────────────────────────────────────────── */
  .sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* ── 2.12  Scrollbar ────────────────────────────────────────────────────── */
  ::-webkit-scrollbar        { width: 6px; }
  ::-webkit-scrollbar-track  { background: var(--clr-surface-raised); }
  ::-webkit-scrollbar-thumb  {
    background:    var(--clr-brand-mid);
    border-radius: var(--r-full);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--clr-brand-bright); }

} /* end @layer base */


/* ════════════════════════════════════════════════════════════════════════════
   §3  COMPONENT LAYER
   ════════════════════════════════════════════════════════════════════════════ */
@layer components {

  /* ┌──────────────────────────────────────────────────────────────────────┐
     │  3.1  CONTAINER & LAYOUT SYSTEM                                      │
     └──────────────────────────────────────────────────────────────────────┘ */
  .container {
    width:          100%;
    max-width:      var(--container-site);
    margin-inline:  auto;
    padding-inline: var(--container-pad-xs);
  }

  @media (min-width: 640px) {
    .container { padding-inline: var(--container-pad-sm); }
  }
  @media (min-width: 1024px) {
    .container { padding-inline: var(--container-pad-md); }
  }
  @media (min-width: 1440px) {
    .container { padding-inline: var(--container-pad-xl); }
  }

  .container--narrow { max-width: var(--container-narrow); }
  .container--text   { max-width: var(--container-text);   }
  .container--medium { max-width: var(--container-medium); }
  .container--wide   { max-width: var(--container-wide);   }

  /* ── Section Spacing ─────────────────────────────────────────────────── */
  .section-sm  { padding-block: var(--sp-16); }
  .section-md  { padding-block: var(--sp-24); }
  .section-lg  { padding-block: var(--sp-32); }
  .section-xl  { padding-block: var(--sp-40); }

  /* ── Grid System ─────────────────────────────────────────────────────── */
  .grid           { display: grid; gap: var(--sp-6); }
  .grid--tight    { gap: var(--sp-4); }
  .grid--loose    { gap: var(--sp-10); }
  .grid-2         { grid-template-columns: repeat(1, 1fr); }
  .grid-3         { grid-template-columns: repeat(1, 1fr); }
  .grid-4         { grid-template-columns: repeat(1, 1fr); }
  .grid-auto      { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }

  @media (min-width: 640px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 768px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); }
                                .grid-4 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); }
                                .grid-2-1 { grid-template-columns: 2fr 1fr; }
                                .grid-1-2 { grid-template-columns: 1fr 2fr; } }

  /* Flex helpers */
  .flex           { display: flex; }
  .flex-col       { flex-direction: column; }
  .flex-wrap      { flex-wrap: wrap; }
  .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-2          { gap: var(--sp-2); }
  .gap-4          { gap: var(--sp-4); }
  .gap-6          { gap: var(--sp-6); }
  .gap-8          { gap: var(--sp-8); }
  .gap-10         { gap: var(--sp-10); }


  /* ┌──────────────────────────────────────────────────────────────────────┐
     │  3.2  BACKGROUND & SURFACE UTILITIES                                 │
     └──────────────────────────────────────────────────────────────────────┘ */
  .bg-surface    { background-color: var(--clr-surface); }
  .bg-raised     { background-color: var(--clr-surface-raised); }
  .bg-brand      { background: var(--grad-brand); color: var(--clr-ink-inverse); }
  .bg-depth      { background: var(--grad-depth); color: var(--clr-ink-inverse); }
  .bg-gradient   { background: var(--grad-brand); }
  .bg-noise      {
    background-image: var(--noise);
    background-repeat: repeat;
    background-size: 256px 256px;
  }

  /* Cinematic section tint — place over background images */
  .bg-film-overlay {
    background: var(--grad-film);
  }


  /* ┌──────────────────────────────────────────────────────────────────────┐
     │  3.3  SITE HEADER  (transparent → frosted on scroll)                 │
     └──────────────────────────────────────────────────────────────────────┘ */
  .site-header {
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    z-index:    var(--z-fixed);
    padding-block: var(--sp-5);
    color:      var(--clr-ink-inverse);
    transition:
      background-color var(--dur-normal) var(--ease-smooth),
      box-shadow       var(--dur-normal) var(--ease-smooth),
      padding-block    var(--dur-normal) var(--ease-smooth);
  }

  /* Frosted glass on scroll — JS adds .is-scrolled */
  .site-header.is-scrolled {
    position:         fixed;
    background:       var(--glass-light);
    backdrop-filter:  blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    box-shadow:       var(--shadow-md);
    padding-block:    var(--sp-3);
    color:            var(--clr-ink);
    border-bottom:    1px solid var(--glass-light-border);
  }

  /* Nav links */
  .nav-link {
    font-family:    var(--ff-body);
    font-size:      var(--text-sm);
    font-weight:    var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color:          inherit;
    opacity:        0.88;
    padding-block:  var(--sp-1);
    position:       relative;
    transition:     opacity var(--dur-fast) var(--ease-out);
  }

  .nav-link::after {
    content:          '';
    position:         absolute;
    bottom:           -2px;
    left:             50%;
    width:            0;
    height:           1.5px;
    background:       var(--clr-gold);
    transform:        translateX(-50%);
    transition:       width var(--dur-normal) var(--ease-expo-out);
    border-radius:    var(--r-full);
  }

  .nav-link:hover,
  .nav-link.is-active {
    opacity: 1;
    color:   inherit;
  }

  .nav-link:hover::after,
  .nav-link.is-active::after {
    width: 100%;
  }

  /* ── Site Footer ─────────────────────────────────────────────────────── */
  .site-footer {
    background:  var(--grad-brand);
    color:       rgba(247, 248, 250, 0.75);
    font-size:   var(--text-sm);
    position:    relative;
    overflow:    hidden;
  }

  /* Subtle noise grain on footer */
  .site-footer::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image: var(--noise);
    background-size:  256px 256px;
    opacity:          0.5;
    pointer-events:   none;
    z-index:          0;
  }

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


  /* ┌──────────────────────────────────────────────────────────────────────┐
     │  3.4  HERO SECTION                                                   │
     └──────────────────────────────────────────────────────────────────────┘ */
  .section-hero {
    position:          relative;
    display:           flex;
    align-items:       center;
    min-height:        92vh;
    background-size:   cover;
    background-position: center;
    background-attachment: fixed; /* parallax */
    color:             var(--clr-ink-inverse);
    overflow:          hidden;
  }

  /* ── Cinematic layered overlay system ────────────────────────────────── */
  /* Layer 1: gradient for narrative depth */
  .hero-overlay {
    position: absolute;
    inset:    0;
    z-index:  var(--z-raised);
    background: var(--grad-hero);
  }

  /* Layer 2: bottom film burn — draws eye to content */
  .hero-overlay::before {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    width:      100%;
    height:     60%;
    background: linear-gradient(
      to top,
      rgba(7, 21, 32, 0.96) 0%,
      transparent 100%
    );
  }

  /* Layer 3: vignette edges */
  .hero-overlay::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(
      ellipse at center,
      transparent 45%,
      rgba(7, 21, 32, 0.45) 100%
    );
  }

  /* ── Hero Content ────────────────────────────────────────────────────── */
  .hero-content {
    position:   relative;
    z-index:    calc(var(--z-raised) + 1);
    max-width:  860px;
  }

  .hero-content h1 {
    font-family:    var(--ff-display);
    font-size:      var(--text-hero);
    font-weight:    var(--fw-bold);
    color:          var(--clr-ink-inverse);
    letter-spacing: -0.04em;
    line-height:    var(--lh-tight);
    margin-bottom:  var(--sp-6);
    text-shadow:    0 4px 40px rgba(0, 0, 0, 0.35);
  }

  /* Italic accent span inside h1 — editorial serif touch */
  .hero-content h1 em {
    font-style: italic;
    font-weight: var(--fw-light);
    color:       var(--clr-gold-light);
  }

  .hero-content p {
    color:         rgba(247, 248, 250, 0.85);
    font-size:     var(--text-lg);
    line-height:   var(--lh-relaxed);
    margin-bottom: var(--sp-10);
    max-width:     58ch;
    text-shadow:   0 1px 12px rgba(0, 0, 0, 0.25);
  }

  /* ── Hero scroll-indicator line ──────────────────────────────────────── */
  .hero-scroll-cue {
    position:    absolute;
    bottom:      var(--sp-8);
    left:        50%;
    transform:   translateX(-50%);
    z-index:     calc(var(--z-raised) + 1);
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         var(--sp-2);
    color:       rgba(247, 248, 250, 0.6);
    font-family: var(--ff-body);
    font-size:   var(--text-2xs);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
  }

  .hero-scroll-cue::after {
    content:    '';
    display:    block;
    width:      1px;
    height:     var(--sp-12);
    background: linear-gradient(to bottom, rgba(247,248,250,0.6), transparent);
    animation:  scroll-cue-pulse 2s var(--ease-smooth) infinite;
  }

  /* ── Ambient floating orbs (decorative, performant) ─────────────────── */
  .hero-orb {
    position:      absolute;
    border-radius: var(--r-full);
    filter:        blur(var(--blur-2xl));
    opacity:       0.18;
    pointer-events:none;
    will-change:   transform;
    animation:     orb-drift 12s var(--ease-film) infinite alternate;
  }

  .hero-orb--1 {
    width:      500px;
    height:     500px;
    background: var(--clr-brand-bright);
    top:        -10%;
    right:      -8%;
    animation-delay: 0s;
  }

  .hero-orb--2 {
    width:      400px;
    height:     400px;
    background: var(--clr-gold);
    bottom:     -5%;
    left:       5%;
    animation-delay: -4s;
    animation-duration: 16s;
  }

  /* ── Fullscreen video hero variant ──────────────────────────────────── */
  .hero-video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    z-index:    0;
    pointer-events: none;
  }


  /* ┌──────────────────────────────────────────────────────────────────────┐
     │  3.5  CARD SYSTEM — Destinations / Hotels / Tours                    │
     └──────────────────────────────────────────────────────────────────────┘ */
  .card {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    background:      var(--clr-surface);
    border-radius:   var(--r-lg);
    overflow:        hidden;
    border:          1px solid var(--clr-border);
    box-shadow:      var(--shadow-sm);
    transition:
      transform    var(--dur-normal) var(--ease-expo-out),
      box-shadow   var(--dur-normal) var(--ease-smooth),
      border-color var(--dur-normal) var(--ease-out);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change:     transform, box-shadow;
  }

  .card:hover {
    transform:    translateY(-10px) scale(1.012);
    box-shadow:   var(--shadow-xl), var(--shadow-glow-brand);
    border-color: var(--clr-brand-bright);
  }

  /* ── Card Shine sweep on hover ───────────────────────────────────────── */
  .card::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     var(--grad-card-shine);
    background-size: 200% 100%;
    background-position: -100% 0;
    transition:     background-position var(--dur-slow) var(--ease-expo-out);
    z-index:        var(--z-raised);
    pointer-events: none;
    border-radius:  inherit;
  }

  .card:hover::after {
    background-position: 100% 0;
  }

  /* ── Card Image ──────────────────────────────────────────────────────── */
  .card-img-wrapper {
    overflow:  hidden;
    position:  relative;
    flex-shrink: 0;
  }

  .card-img {
    width:       100%;
    aspect-ratio: 3 / 2;
    object-fit:  cover;
    transition:  transform var(--dur-slow) var(--ease-expo-out);
    display:     block;
  }

  .card:hover .card-img {
    transform: scale(1.09);
  }

  /* ── Card overlay gradient (image → content) ─────────────────────────── */
  .card-img-wrapper::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    width:      100%;
    height:     55%;
    background: linear-gradient(to top, rgba(12, 27, 38, 0.52), transparent);
    pointer-events: none;
  }

  /* ── Card Body ───────────────────────────────────────────────────────── */
  .card-body {
    display:        flex;
    flex-direction: column;
    flex:           1;
    padding:        var(--sp-7);
    gap:            var(--sp-3);
  }

  /* ── Card Label (eyebrow) ────────────────────────────────────────────── */
  .card-label {
    font-family:    var(--ff-body);
    font-size:      var(--text-2xs);
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color:          var(--clr-brand-bright);
  }

  /* ── Card Title ──────────────────────────────────────────────────────── */
  .card-title {
    font-family:   var(--ff-display);
    font-size:     var(--text-h4);
    font-weight:   var(--fw-bold);
    color:         var(--clr-ink);
    line-height:   var(--lh-snug);
    letter-spacing: var(--ls-tight);
    transition:    color var(--dur-fast) var(--ease-out);
  }

  .card:hover .card-title {
    color: var(--clr-brand-mid);
  }

  /* ── Card Description ────────────────────────────────────────────────── */
  .card-desc {
    font-size:  var(--text-sm);
    color:      var(--clr-ink-muted);
    line-height:var(--lh-body);
    margin:     0;
  }

  /* ── Card Price / Footer ─────────────────────────────────────────────── */
  .card-footer {
    display:        flex;
    justify-content:space-between;
    align-items:    center;
    margin-top:     auto;
    padding-top:    var(--sp-5);
    border-top:     1px solid var(--clr-border);
  }

  .card-price {
    font-family:    var(--ff-mono);
    font-size:      var(--text-xl);
    font-weight:    var(--fw-bold);
    color:          var(--clr-brand-mid);
    letter-spacing: var(--ls-tight);
  }

  .card-price sup {
    font-size:      0.55em;
    vertical-align: super;
    font-weight:    var(--fw-semibold);
  }

  .card-price-note {
    font-size:  var(--text-2xs);
    color:      var(--clr-ink-faint);
    margin-top: var(--sp-1);
  }

  /* ── Card Rating ─────────────────────────────────────────────────────── */
  .card-rating {
    display:     flex;
    align-items: center;
    gap:         var(--sp-2);
    font-size:   var(--text-xs);
    font-weight: var(--fw-semibold);
    color:       var(--clr-gold);
  }

  /* ── Card Floating Badge (position: absolute on image) ───────────────── */
  .card-badge-img {
    position:      absolute;
    top:           var(--sp-4);
    right:         var(--sp-4);
    z-index:       calc(var(--z-raised) + 1);
    background:    var(--glass-dark);
    backdrop-filter: blur(var(--blur-sm));
    border:        1px solid var(--glass-dark-border);
    border-radius: var(--r-full);
    padding:       var(--sp-1) var(--sp-3);
    font-size:     var(--text-2xs);
    font-weight:   var(--fw-semibold);
    letter-spacing:var(--ls-wide);
    text-transform:uppercase;
    color:         var(--clr-ink-inverse);
  }

  /* ── Card Glass Variant (overlay cards) ─────────────────────────────── */
  .card-glass {
    background:         var(--glass-light);
    backdrop-filter:    blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border:             1px solid var(--glass-light-border);
    box-shadow:         var(--shadow-lg);
  }

  .card-glass:hover {
    background: rgba(255,255,255,0.80);
    box-shadow: var(--shadow-2xl);
  }

  /* ── Card Dark Variant ───────────────────────────────────────────────── */
  .card-dark {
    background:  var(--grad-brand);
    border-color:var(--clr-brand-mid);
    color:       var(--clr-ink-inverse);
  }

  .card-dark .card-title { color: var(--clr-ink-inverse); }
  .card-dark .card-desc  { color: rgba(247,248,250,0.75); }
  .card-dark .card-footer{ border-top-color: rgba(255,255,255,0.12); }
  .card-dark .card-price { color: var(--clr-gold-light); }

  .card-dark:hover {
    box-shadow: var(--shadow-xl), var(--shadow-glow-gold);
    border-color: var(--clr-gold);
  }

  /* ── Card Cinematic (full-bleed image, content overlay) ──────────────── */
  .card-cinematic {
    min-height:  380px;
    border:      none;
  }

  .card-cinematic .card-img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    aspect-ratio: unset;
  }

  .card-cinematic .card-body {
    position:   relative;
    z-index:    2;
    background: linear-gradient(to top, rgba(7,21,32,0.96) 0%, rgba(7,21,32,0.60) 50%, transparent 100%);
    margin-top: auto;
    color:      var(--clr-ink-inverse);
    padding:    var(--sp-8) var(--sp-7) var(--sp-7);
  }

  .card-cinematic .card-title { color: var(--clr-ink-inverse); }
  .card-cinematic .card-label { color: var(--clr-gold-light); }
  .card-cinematic .card-desc  { color: rgba(247,248,250,0.80); }


  /* ┌──────────────────────────────────────────────────────────────────────┐
     │  3.6  PREMIUM BUTTON SYSTEM                                          │
     └──────────────────────────────────────────────────────────────────────┘ */
  .btn {
    position:       relative;
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    gap:            var(--sp-3);
    padding:        0.875em 2.25em;
    font-family:    var(--ff-body);
    font-size:      var(--text-sm);
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    line-height:    1;
    border-radius:  var(--r-sm);
    border:         1px solid transparent;
    cursor:         pointer;
    text-decoration:none;
    overflow:       hidden;
    isolation:      isolate;
    white-space:    nowrap;
    transition:
      transform    var(--dur-fast)   var(--ease-expo-out),
      box-shadow   var(--dur-normal) var(--ease-smooth),
      background   var(--dur-fast)   var(--ease-out),
      border-color var(--dur-fast)   var(--ease-out),
      color        var(--dur-fast)   var(--ease-out);
    will-change:    transform, box-shadow;
  }

  /* Inner highlight shimmer */
  .btn::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       -100%;
    width:      100%;
    height:     100%;
    background: linear-gradient(
      100deg,
      transparent 30%,
      rgba(255,255,255,0.18) 50%,
      transparent 70%
    );
    transition: left var(--dur-slow) var(--ease-expo-out);
    pointer-events: none;
    z-index: 1;
  }

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

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

  /* ── Primary ─────────────────────────────────────────────────────────── */
  .btn-primary {
    background: var(--clr-brand-mid);
    color:      var(--clr-ink-inverse);
    box-shadow: var(--shadow-sm);
  }

  .btn-primary:hover {
    background: var(--clr-brand);
    box-shadow: var(--shadow-lg), var(--shadow-glow-brand);
    color:      var(--clr-ink-inverse);
  }

  /* ── Gold (CTA — highest conversion priority) ────────────────────────── */
  .btn-gold {
    background: var(--grad-gold);
    color:      var(--clr-ink);
    box-shadow: var(--shadow-sm);
  }

  .btn-gold:hover {
    box-shadow: var(--shadow-lg), var(--shadow-glow-gold);
    color:      var(--clr-ink);
    filter:     brightness(1.05);
  }

  .btn-gold:focus-visible {
    box-shadow: var(--shadow-focus-gold);
  }

  /* ── Outline ─────────────────────────────────────────────────────────── */
  .btn-outline {
    background:   transparent;
    border-color: var(--clr-border-strong);
    color:        var(--clr-ink);
  }

  .btn-outline:hover {
    border-color: var(--clr-brand-bright);
    color:        var(--clr-brand-mid);
    background:   var(--clr-surface-raised);
    box-shadow:   var(--shadow-md);
  }

  /* ── Ghost (on dark/image backgrounds) ──────────────────────────────── */
  .btn-ghost {
    background: var(--glass-dark);
    backdrop-filter: blur(var(--blur-sm));
    border:     1px solid var(--glass-dark-border);
    color:      var(--clr-ink-inverse);
  }

  .btn-ghost:hover {
    background: rgba(255,255,255,0.15);
    box-shadow: var(--shadow-lg);
    color:      var(--clr-ink-inverse);
  }

  /* ── Glass (frosted) ─────────────────────────────────────────────────── */
  .btn-glass {
    background:          rgba(255,255,255,0.12);
    backdrop-filter:     blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border:              1px solid rgba(255,255,255,0.22);
    color:               var(--clr-ink-inverse);
  }

  .btn-glass:hover {
    background: rgba(255,255,255,0.22);
    box-shadow: var(--shadow-lg);
    color:      var(--clr-ink-inverse);
  }

  /* ── Sizes ───────────────────────────────────────────────────────────── */
  .btn-sm { padding: 0.6em 1.4em;  font-size: var(--text-xs);  }
  .btn-lg { padding: 1.1em 2.75em; font-size: var(--text-base); }
  .btn-xl { padding: 1.3em 3.5em;  font-size: var(--text-lg);  }

  /* ── Icon-only circular ──────────────────────────────────────────────── */
  .btn-icon {
    width:         2.75rem;
    height:        2.75rem;
    padding:       0;
    border-radius: var(--r-full);
  }

  .btn-icon.btn-sm { width: 2.25rem; height: 2.25rem; }
  .btn-icon.btn-lg { width: 3.5rem;  height: 3.5rem;  }


  /* ┌──────────────────────────────────────────────────────────────────────┐
     │  3.7  BADGE SYSTEM                                                   │
     └──────────────────────────────────────────────────────────────────────┘ */
  .badge {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-1);
    padding:        0.25em 0.8em;
    font-family:    var(--ff-body);
    font-size:      var(--text-2xs);
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    border-radius:  var(--r-full);
    border:         1px solid transparent;
    transition:     var(--transition-fast);
  }

  .badge-brand {
    background:   rgba(15, 84, 104, 0.10);
    color:        var(--clr-brand-bright);
    border-color: rgba(15, 84, 104, 0.20);
  }

  .badge-gold {
    background:   var(--clr-gold-dim);
    color:        #8A6820;
    border-color: rgba(201,168,76,0.30);
  }

  .badge-emerald {
    background:   rgba(27, 107, 82, 0.10);
    color:        var(--clr-emerald-light);
    border-color: rgba(27, 107, 82, 0.20);
  }

  .badge-glass {
    background:          var(--glass-dark);
    backdrop-filter:     blur(var(--blur-sm));
    border-color:        var(--glass-dark-border);
    color:               var(--clr-ink-inverse);
  }


  /* ┌──────────────────────────────────────────────────────────────────────┐
     │  3.8  FORM ELEMENTS                                                  │
     └──────────────────────────────────────────────────────────────────────┘ */
  .field-group {
    display:       flex;
    flex-direction:column;
    gap:           var(--sp-2);
    margin-bottom: var(--sp-5);
  }

  .field-label {
    font-size:      var(--text-xs);
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color:          var(--clr-ink-muted);
  }

  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="password"],
  select,
  textarea {
    width:            100%;
    padding:          0.875rem 1.125rem;
    font-family:      var(--ff-body);
    font-size:        var(--text-base);
    color:            var(--clr-ink);
    background-color: var(--clr-surface);
    border:           1px solid var(--clr-border);
    border-radius:    var(--r-md);
    box-shadow:       var(--shadow-inset);
    transition:
      border-color var(--dur-fast) var(--ease-out),
      box-shadow   var(--dur-fast) var(--ease-out),
      background   var(--dur-fast) var(--ease-out);
    appearance: none;
  }

  input:hover,
  select:hover,
  textarea:hover {
    border-color: var(--clr-brand-bright);
  }

  input:focus,
  select:focus,
  textarea:focus {
    outline:      none;
    border-color: var(--clr-brand-bright);
    box-shadow:   var(--shadow-focus);
    background:   var(--clr-surface);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--clr-ink-faint);
  }

  textarea {
    resize:     vertical;
    min-height: 140px;
  }

  /* ── Booking Search Bar (hero mega input) ────────────────────────────── */
  .search-bar {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--sp-1);
    background:    var(--glass-light);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border:        1px solid var(--glass-light-border);
    border-radius: var(--r-xl);
    padding:       var(--sp-2);
    box-shadow:    var(--shadow-2xl);
    max-width:     900px;
  }

  .search-bar__field {
    flex:      1;
    min-width: 180px;
    background:transparent;
    border:    none;
    box-shadow:none;
    border-radius: var(--r-lg);
    padding:   var(--sp-4) var(--sp-5);
    color:     var(--clr-ink);
    font-size: var(--text-base);
  }

  .search-bar__field:hover { border: none; }
  .search-bar__field:focus { border: none; box-shadow: none; background: rgba(0,0,0,0.04); }

  .search-bar__divider {
    width:        1px;
    background:   var(--clr-border);
    margin-block: var(--sp-3);
    flex-shrink:  0;
  }

  .search-bar__submit {
    flex-shrink:  0;
    align-self:   stretch;
  }


  /* ┌──────────────────────────────────────────────────────────────────────┐
     │  3.9  SPLIT SECTION  (content + media)                               │
     └──────────────────────────────────────────────────────────────────────┘ */
  .section-split {
    display:         grid;
    grid-template-columns: 1fr;
    align-items:     center;
    gap:             var(--sp-16);
  }

  @media (min-width: 1024px) {
    .section-split { grid-template-columns: 1fr 1fr; }
    .split-reverse  { direction: rtl; }
    .split-reverse > * { direction: ltr; }
  }

  .split-media {
    position: relative;
  }

  /* Decorative frame behind image */
  .split-media::before {
    content:         '';
    position:        absolute;
    inset:           var(--sp-6);
    background:      var(--grad-brand);
    border-radius:   var(--r-lg);
    transform:       translate(var(--sp-5), var(--sp-5));
    z-index:         0;
    opacity:         0.55;
  }

  .split-media img {
    position:      relative;
    z-index:       1;
    border-radius: var(--r-lg);
    box-shadow:    var(--shadow-2xl);
    transition:
      transform  var(--dur-slow) var(--ease-expo-out),
      box-shadow var(--dur-slow) var(--ease-smooth);
  }

  .split-media img:hover {
    transform:  scale(1.025) translateY(-4px);
    box-shadow: var(--shadow-2xl), var(--shadow-glow-brand);
  }


  /* ┌──────────────────────────────────────────────────────────────────────┐
     │  3.10  CTA SECTION                                                   │
     └──────────────────────────────────────────────────────────────────────┘ */
  .section-cta {
    position:      relative;
    background:    var(--grad-depth);
    border-radius: var(--r-2xl);
    padding:       var(--sp-24) var(--sp-8);
    text-align:    center;
    overflow:      hidden;
    isolation:     isolate;
    box-shadow:    var(--shadow-2xl);
  }

  /* Radial lighting spotlight */
  .section-cta::before {
    content:       '';
    position:      absolute;
    top:           -40%;
    left:          50%;
    transform:     translateX(-50%);
    width:         80%;
    height:        200%;
    background:    radial-gradient(ellipse at top center,
                     var(--clr-brand-glow) 0%,
                     transparent 65%);
    pointer-events:none;
    z-index:       -1;
  }

  /* Gold accent line at top */
  .section-cta::after {
    content:       '';
    position:      absolute;
    top:           0;
    left:          50%;
    transform:     translateX(-50%);
    width:         120px;
    height:        2px;
    background:    var(--grad-gold);
    border-radius: 0 0 var(--r-full) var(--r-full);
  }

  .section-cta h2 {
    color:         var(--clr-ink-inverse);
    margin-bottom: var(--sp-5);
  }

  .section-cta p {
    color:        rgba(247,248,250,0.80);
    max-width:    54ch;
    margin-inline:auto;
    margin-bottom:var(--sp-10);
  }


  /* ┌──────────────────────────────────────────────────────────────────────┐
     │  3.11  GALLERY GRID                                                  │
     └──────────────────────────────────────────────────────────────────────┘ */
  .gallery-item {
    position:      relative;
    overflow:      hidden;
    border-radius: var(--r-lg);
    cursor:        pointer;
  }

  .gallery-item img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-expo-out);
    display:    block;
  }

  .gallery-item:hover img {
    transform: scale(1.08);
  }

  /* Cinematic reveal overlay */
  .gallery-overlay {
    position:   absolute;
    inset:      0;
    background: var(--grad-film);
    opacity:    0;
    transform:  translateY(8px);
    transition:
      opacity   var(--dur-normal) var(--ease-smooth),
      transform var(--dur-normal) var(--ease-expo-out);
    display:    flex;
    align-items:flex-end;
    padding:    var(--sp-7);
    z-index:    var(--z-raised);
  }

  .gallery-item:hover .gallery-overlay {
    opacity:   1;
    transform: translateY(0);
  }

  .gallery-overlay-content {
    color:       var(--clr-ink-inverse);
  }

  .gallery-overlay-content h4 {
    color:         var(--clr-ink-inverse);
    font-size:     var(--text-h5);
    margin-bottom: var(--sp-2);
  }

  .gallery-overlay-content p {
    color:     rgba(247,248,250,0.80);
    font-size: var(--text-sm);
    margin:    0;
    max-width: none;
  }


  /* ┌──────────────────────────────────────────────────────────────────────┐
     │  3.12  SECTION LABEL  (eyebrow above headings)                       │
     └──────────────────────────────────────────────────────────────────────┘ */
  .section-label {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-3);
    font-family:    var(--ff-body);
    font-size:      var(--text-xs);
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color:          var(--clr-brand-bright);
    margin-bottom:  var(--sp-4);
  }

  /* Gold rule on either side */
  .section-label::before,
  .section-label::after {
    content:   '';
    display:   block;
    width:     32px;
    height:    1px;
    background:var(--grad-gold);
    flex-shrink:0;
  }


  /* ┌──────────────────────────────────────────────────────────────────────┐
     │  3.13  STATS / NUMBERS BAR                                           │
     └──────────────────────────────────────────────────────────────────────┘ */
  .stat-item {
    text-align: center;
    padding:    var(--sp-6) var(--sp-8);
    position:   relative;
  }

  .stat-item + .stat-item::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        20%;
    height:     60%;
    width:      1px;
    background: var(--clr-border);
  }

  .stat-number {
    font-family:    var(--ff-display);
    font-size:      var(--text-h2);
    font-weight:    var(--fw-extrabold);
    color:          var(--clr-brand-mid);
    letter-spacing: var(--ls-tight);
    line-height:    1;
    margin-bottom:  var(--sp-2);
  }

  .stat-number em {
    font-style:  normal;
    color:       var(--clr-gold);
  }

  .stat-label {
    font-size:      var(--text-xs);
    font-weight:    var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color:          var(--clr-ink-muted);
  }


  /* ┌──────────────────────────────────────────────────────────────────────┐
     │  3.14  TESTIMONIAL CARD                                              │
     └──────────────────────────────────────────────────────────────────────┘ */
  .testimonial-card {
    background:    var(--clr-surface);
    border-radius: var(--r-lg);
    padding:       var(--sp-8);
    border:        1px solid var(--clr-border);
    box-shadow:    var(--shadow-md);
    position:      relative;
    transition:    var(--transition-base);
  }

  .testimonial-card:hover {
    box-shadow:   var(--shadow-xl);
    border-color: var(--clr-brand-bright);
    transform:    translateY(-4px);
  }

  /* Open-quote decoration */
  .testimonial-card::before {
    content:      '"';
    position:     absolute;
    top:          var(--sp-5);
    right:        var(--sp-7);
    font-family:  var(--ff-display);
    font-size:    5rem;
    line-height:  1;
    color:        var(--clr-gold-dim);
    font-weight:  var(--fw-bold);
    pointer-events:none;
  }

  .testimonial-text {
    font-family:   var(--ff-display);
    font-size:     var(--text-lg);
    font-style:    italic;
    line-height:   var(--lh-relaxed);
    color:         var(--clr-ink);
    margin-bottom: var(--sp-6);
  }

  .testimonial-author {
    display:     flex;
    align-items: center;
    gap:         var(--sp-4);
  }

  .testimonial-avatar {
    width:         48px;
    height:        48px;
    border-radius: var(--r-full);
    object-fit:    cover;
    border:        2px solid var(--clr-gold-dim);
    flex-shrink:   0;
  }

  .testimonial-name {
    font-weight:   var(--fw-semibold);
    font-size:     var(--text-sm);
    color:         var(--clr-ink);
    margin-bottom: var(--sp-1);
  }

  .testimonial-role {
    font-size: var(--text-xs);
    color:     var(--clr-ink-faint);
  }


  /* ┌──────────────────────────────────────────────────────────────────────┐
     │  3.15  TEXT UTILITIES                                                │
     └──────────────────────────────────────────────────────────────────────┘ */
  .text-hero-size  { font-size: var(--text-hero); }
  .text-h1-size    { font-size: var(--text-h1);   }
  .text-h2-size    { font-size: var(--text-h2);   }
  .text-lead       { font-size: var(--text-lg);   color: var(--clr-ink-muted); line-height: var(--lh-relaxed); }
  .text-sm         { font-size: var(--text-sm);   }
  .text-xs         { font-size: var(--text-xs);   }
  .text-muted      { color: var(--clr-ink-muted); }
  .text-faint      { color: var(--clr-ink-faint); }
  .text-brand      { color: var(--clr-brand-mid); }
  .text-gold       { color: var(--clr-gold);      }
  .text-inverse    { color: var(--clr-ink-inverse);}
  .text-serif      { font-family: var(--ff-display); }
  .text-mono       { font-family: var(--ff-mono); }
  .text-center     { text-align: center; }
  .text-balance    { text-wrap: balance; }

} /* end @layer components */


/* ════════════════════════════════════════════════════════════════════════════
   §4  UTILITY LAYER
   ════════════════════════════════════════════════════════════════════════════ */
@layer utilities {

  /* ── 4.1  Scroll-triggered Animation System ──────────────────────────── */
  /*
   * Elements begin invisible / displaced.
   * JavaScript (IntersectionObserver) adds .is-visible to trigger the reveal.
   * Stagger is controlled by CSS custom properties or nth-child delays.
   */
  .anim-fade-up,
  .anim-fade-in,
  .anim-scale-in,
  .anim-slide-right,
  .anim-slide-left,
  .anim-blur-in {
    opacity:    0;
    transition:
      opacity   var(--dur-slow) var(--ease-expo-out),
      transform var(--dur-slow) var(--ease-expo-out),
      filter    var(--dur-slow) var(--ease-expo-out);
    will-change: transform, opacity;
  }

  .anim-fade-up    { transform: translateY(36px);   }
  .anim-scale-in   { transform: scale(0.90);         }
  .anim-slide-right{ transform: translateX(-36px);   }
  .anim-slide-left { transform: translateX(36px);    }
  .anim-blur-in    { transform: translateY(16px); filter: blur(8px); }

  /* Visible state */
  .anim-fade-up.is-visible,
  .anim-fade-in.is-visible,
  .anim-scale-in.is-visible,
  .anim-slide-right.is-visible,
  .anim-slide-left.is-visible,
  .anim-blur-in.is-visible {
    opacity: 1;
    transform: translate(0) scale(1);
    filter: none;
  }

  /* Stagger system — apply .anim-stagger on parent */
  .anim-stagger > *:nth-child(1)  { transition-delay: 0.04s; }
  .anim-stagger > *:nth-child(2)  { transition-delay: 0.09s; }
  .anim-stagger > *:nth-child(3)  { transition-delay: 0.14s; }
  .anim-stagger > *:nth-child(4)  { transition-delay: 0.19s; }
  .anim-stagger > *:nth-child(5)  { transition-delay: 0.24s; }
  .anim-stagger > *:nth-child(6)  { transition-delay: 0.29s; }
  .anim-stagger > *:nth-child(7)  { transition-delay: 0.34s; }
  .anim-stagger > *:nth-child(8)  { transition-delay: 0.39s; }
  .anim-stagger > *:nth-child(9)  { transition-delay: 0.44s; }
  .anim-stagger > *:nth-child(10) { transition-delay: 0.49s; }

  /* ── 4.2  Glass Morphism Utilities ───────────────────────────────────── */
  .glass {
    background:          var(--glass-light);
    backdrop-filter:     blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border:              1px solid var(--glass-light-border);
  }

  .glass-dark {
    background:          var(--glass-dark);
    backdrop-filter:     blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border:              1px solid var(--glass-dark-border);
  }

  .glass-brand {
    background:          var(--glass-brand);
    backdrop-filter:     blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border:              1px solid var(--glass-brand-border);
  }

  /* ── 4.3  Blur Utilities ─────────────────────────────────────────────── */
  .backdrop-blur-xs  { backdrop-filter: blur(var(--blur-xs));  }
  .backdrop-blur-sm  { backdrop-filter: blur(var(--blur-sm));  }
  .backdrop-blur-md  { backdrop-filter: blur(var(--blur-md));  }
  .backdrop-blur-lg  { backdrop-filter: blur(var(--blur-lg));  }
  .backdrop-blur-xl  { backdrop-filter: blur(var(--blur-xl));  }

  /* ── 4.4  3D & Perspective ───────────────────────────────────────────── */
  .perspective     { perspective: var(--perspective); }
  .preserve-3d     { transform-style: preserve-3d; }
  .backface-hidden { backface-visibility: hidden; }

  /* ── 4.5  Gradient Text ──────────────────────────────────────────────── */
  .text-gradient-brand {
    background:              var(--grad-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
  }

  .text-gradient-gold {
    background:              var(--grad-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
  }

  /* ── 4.6  Noise Grain Overlay ────────────────────────────────────────── */
  /* Apply as pseudo-element on a container that has isolation: isolate */
  .grain::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image: var(--noise);
    background-size:  256px 256px;
    background-repeat:repeat;
    opacity:          0.04;
    pointer-events:   none;
    z-index:          1;
    border-radius:    inherit;
  }

  /* ── 4.7  Glow Utilities ─────────────────────────────────────────────── */
  .glow-brand { box-shadow: var(--shadow-glow-brand); }
  .glow-gold  { box-shadow: var(--shadow-glow-gold);  }

  /* ── 4.8  Float Animation ────────────────────────────────────────────── */
  .animate-float      { animation: float 7s var(--ease-film) infinite; }
  .animate-float-slow { animation: float 12s var(--ease-film) infinite; }

  /* ── 4.9  Custom Scrollbar ───────────────────────────────────────────── */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--clr-brand-mid) var(--clr-surface-raised);
  }

  /* ── 4.10  Pointer Cursor Follower ───────────────────────────────────── */
  /* Controlled by JS — see Exploria-cursor.js */
  .cursor-follower {
    width:          28px;
    height:         28px;
    border:         1.5px solid var(--clr-brand-bright);
    border-radius:  var(--r-full);
    position:       fixed;
    pointer-events: none;
    transform:      translate(-50%, -50%);
    transition:
      width    var(--dur-fast)    var(--ease-expo-out),
      height   var(--dur-fast)    var(--ease-expo-out),
      background var(--dur-fast) var(--ease-out),
      transform var(--dur-instant) linear;
    z-index:    var(--z-cursor);
    mix-blend-mode: difference;
  }

  .cursor-follower.is-hovering {
    width:      52px;
    height:     52px;
    background: rgba(255,255,255,0.08);
    border-color: transparent;
  }

  /* ── 4.11  Spacing overrides ─────────────────────────────────────────── */
  .mt-auto  { margin-top: auto; }
  .mb-0     { margin-bottom: 0; }
  .mt-0     { margin-top: 0; }
  .p-0      { padding: 0; }
  .px-4     { padding-inline: var(--sp-4); }
  .py-4     { padding-block:  var(--sp-4); }
  .py-8     { padding-block:  var(--sp-8); }

  /* ── 4.12  Overflow ──────────────────────────────────────────────────── */
  .overflow-hidden { overflow: hidden; }
  .overflow-clip   { overflow: clip;   }

  /* ── 4.13  Aspect Ratios ─────────────────────────────────────────────── */
  .aspect-cinema   { aspect-ratio: 21 / 9;  }
  .aspect-wide     { aspect-ratio: 16 / 9;  }
  .aspect-square   { aspect-ratio: 1 / 1;   }
  .aspect-portrait { aspect-ratio: 3 / 4;   }

  /* ── 4.14  Object Fit ────────────────────────────────────────────────── */
  .object-cover  { object-fit: cover; }
  .object-center { object-position: center; }

  /* ── 4.15  Relative / Absolute Positioning ───────────────────────────── */
  .relative { position: relative; }
  .absolute { position: absolute; }
  .inset-0  { inset: 0; }
  .z-1      { z-index: 1; }
  .z-2      { z-index: 2; }

  /* ── 4.16  Width helpers ─────────────────────────────────────────────── */
  .w-full   { width: 100%; }
  .h-full   { height: 100%; }
  .max-w-text { max-width: var(--container-text); }

} /* end @layer utilities */


/* ════════════════════════════════════════════════════════════════════════════
   §5  ANIMATION KEYFRAMES  ─  The Cinematic Motion Library
       Placed outside @layer so they're globally accessible.
   ════════════════════════════════════════════════════════════════════════════ */

/* Ambient float — used on decorative orbs, icons */
@keyframes float {
  0%,  100% { transform: translateY(0)    rotate(0deg);  }
  33%        { transform: translateY(-14px) rotate(1.5deg);  }
  66%        { transform: translateY(-6px) rotate(-1deg); }
}

/* Scroll-cue vertical pulse */
@keyframes scroll-cue-pulse {
  0%  { opacity: 0.6; transform: scaleY(1);    }
  50% { opacity: 1;   transform: scaleY(1.12); }
  100%{ opacity: 0.6; transform: scaleY(1);    }
}

/* Ambient orb drift */
@keyframes orb-drift {
  from { transform: translate(0,    0);    }
  to   { transform: translate(30px, 20px); }
}

/* Pulsing glow ring — buttons, badges on hover */
@keyframes pulse-glow {
  0%,100% { box-shadow: var(--shadow-md); }
  50%     { box-shadow: var(--shadow-xl), var(--shadow-glow-brand); }
}

/* Shimmer — loading states */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Spin slow — decorative compass / loader rings */
@keyframes spin-slow {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Fade in up — direct animation class (no JS trigger needed) */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Scale in — modal, popover entrance */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Blur reveal — cinematic content entrance */
@keyframes blur-reveal {
  from { opacity: 0; filter: blur(12px); transform: translateY(12px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0);    }
}

/* Gold shimmer sweep — price highlight, badge */
@keyframes gold-sweep {
  0%   { background-position: -150% center; }
  100% { background-position:  150% center; }
}

/* Film strip grain flicker — subtle ambiance */
@keyframes grain-shift {
  0%,100% { transform: translate(0, 0); }
  10%     { transform: translate(-1%, -1%); }
  30%     { transform: translate(1%, 1%);  }
  50%     { transform: translate(-1%, 1%); }
  70%     { transform: translate(1%, -1%); }
  90%     { transform: translate(-1%, 0);  }
}

/* ── Direct animation classes (no JS required) ────────────────────────── */
.animate-fade-in-up   { animation: fade-in-up   var(--dur-slow) var(--ease-expo-out) forwards; }
.animate-scale-in     { animation: scale-in     var(--dur-slow) var(--ease-expo-out) forwards; }
.animate-blur-reveal  { animation: blur-reveal  var(--dur-slow) var(--ease-expo-out) forwards; }
.animate-pulse-glow   { animation: pulse-glow   3s var(--ease-smooth) infinite; }
.animate-spin-slow    { animation: spin-slow    10s linear infinite; }
.animate-shimmer      { animation: shimmer      2.2s linear infinite; }
.animate-float        { animation: float        7s var(--ease-film) infinite; }

/* Animation delay utilities */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }

/* Shimmer skeleton loading state */
.skeleton {
  background: linear-gradient(
    100deg,
    var(--clr-surface-raised) 30%,
    var(--clr-surface-inset)  50%,
    var(--clr-surface-raised) 70%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
  border-radius: var(--r-sm);
  color: transparent;
  user-select: none;
}


/* ════════════════════════════════════════════════════════════════════════════
   §6  DARK MODE  ─  Semantic Token Overrides
       One block, zero duplication. All components inherit automatically.
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {

  /* ── 6.1  Brand Palette — luminous on dark ──────────────────────────── */
  --clr-brand:          #063040;
  --clr-brand-mid:      #0E6B88;
  --clr-brand-bright:   #38B2CC;
  --clr-brand-glow:     rgba(56, 178, 204, 0.30);

  --clr-gold:           #D4A84B;
  --clr-gold-light:     #EDD07E;
  --clr-gold-dim:       rgba(212, 168, 75, 0.15);
  --clr-gold-glow:      rgba(212, 168, 75, 0.25);

  --clr-emerald:        #1A7A5E;
  --clr-emerald-light:  #2FA87D;

  /* ── 6.2  Surface Palette ───────────────────────────────────────────── */
  --clr-bg:             #07111C;
  --clr-surface:        #0D1E2C;
  --clr-surface-raised: #132636;
  --clr-surface-inset:  #1A3040;

  /* ── 6.3  Ink ───────────────────────────────────────────────────────── */
  --clr-ink:         #EDF2F7;
  --clr-ink-muted:   #94A8B8;
  --clr-ink-faint:   #58778A;
  --clr-ink-inverse: #07111C;

  /* ── 6.4  Border ────────────────────────────────────────────────────── */
  --clr-border:        #1E3548;
  --clr-border-strong: #2A4A60;

  /* ── 6.5  Glass ─────────────────────────────────────────────────────── */
  --glass-light:        rgba(13, 30, 44, 0.75);
  --glass-light-border: rgba(255, 255, 255, 0.08);
  --glass-dark:         rgba(4, 12, 20, 0.70);
  --glass-dark-border:  rgba(255, 255, 255, 0.06);
  --glass-brand:        rgba(14, 107, 136, 0.30);
  --glass-brand-border: rgba(56, 178, 204, 0.20);

  /* ── 6.6  Gradients ─────────────────────────────────────────────────── */
  --grad-brand:     linear-gradient(140deg, #063040 0%, #04111C 100%);
  --grad-depth:     linear-gradient(160deg, #040E18 0%, #063040 55%, #040E18 100%);
  --grad-hero:      linear-gradient(145deg, rgba(6,48,64,0.70) 0%, rgba(4,14,24,0.92) 100%);
  --grad-film:      linear-gradient(180deg,
                      rgba(4,14,24,0.06) 0%,
                      rgba(4,14,24,0.62) 55%,
                      rgba(4,14,24,0.95) 100%);

  /* ── 6.7  Shadow intensity increase for dark surfaces ───────────────── */
  --shadow-sm:   0 2px 6px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.50), 0 2px 4px rgba(0,0,0,0.35);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.60), 0 4px 10px rgba(0,0,0,0.40);
  --shadow-xl:   0 24px 56px rgba(0,0,0,0.65), 0 8px 18px rgba(0,0,0,0.50);
  --shadow-2xl:  0 40px 80px rgba(0,0,0,0.72), 0 16px 32px rgba(0,0,0,0.55);
  --shadow-focus:0 0 0 3px var(--clr-brand-glow), 0 0 0 1px var(--clr-brand-bright);
}

/* ── 6.8  Dark Mode Component Adjustments ──────────────────────────────── */

/* Images slightly dimmed — avoids blinding contrast against dark surfaces */
[data-theme="dark"] img {
  opacity: 0.90;
  transition: opacity var(--dur-normal) var(--ease-out);
}
[data-theme="dark"] img:hover { opacity: 1; }

/* Search bar on dark */
[data-theme="dark"] .site-header.is-scrolled {
  background:   rgba(7, 17, 28, 0.90);
  border-bottom-color: rgba(255,255,255,0.06);
  color: var(--clr-ink);
}

/* Badge dark mode text contrast fix */
[data-theme="dark"] .badge-gold {
  color: var(--clr-gold-light);
}

/* Skeleton dark */
[data-theme="dark"] .skeleton {
  background: linear-gradient(
    100deg,
    var(--clr-surface-raised) 30%,
    var(--clr-surface-inset)  50%,
    var(--clr-surface-raised) 70%
  );
  background-size: 200% 100%;
}


/* ════════════════════════════════════════════════════════════════════════════
   §7  RTL & ACCESSIBILITY
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 7.1  RTL Support ───────────────────────────────────────────────────── */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .icon-arrow-right {
  transform: scaleX(-1);
}

/* Flip slide animations for RTL */
[dir="rtl"] .anim-slide-right {
  transform: translateX(36px);
}

[dir="rtl"] .anim-slide-right.is-visible {
  transform: translateX(0);
}

[dir="rtl"] .anim-slide-left {
  transform: translateX(-36px);
}

/* Reverse stagger on RTL grids if needed */
[dir="rtl"] .stat-item + .stat-item::before {
  left:  auto;
  right: 0;
}

/* ── 7.2  Reduced Motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

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

  /* Reveal elements immediately — no layout shift */
  .anim-fade-up,
  .anim-fade-in,
  .anim-scale-in,
  .anim-slide-right,
  .anim-slide-left,
  .anim-blur-in {
    opacity:   1;
    transform: none;
    filter:    none;
  }

  /* Disable float, orb, parallax */
  .hero-orb          { animation: none; }
  .animate-float,
  .animate-float-slow{ animation: none; }

  /* Disable hover lifts */
  .btn:hover,
  .card:hover,
  .card-dark:hover,
  .card-glass:hover {
    transform: none;
  }
}

/* ── 7.3  High Contrast Mode ────────────────────────────────────────────── */
@media (prefers-contrast: high) {
  :root {
    --shadow-sm:  none;
    --shadow-md:  none;
    --shadow-lg:  none;
    --shadow-xl:  none;
    --shadow-2xl: none;
  }

  .card,
  .btn,
  input,
  select,
  textarea {
    border-width: 2px;
  }

  .hero-overlay,
  .bg-film-overlay {
    background: rgba(0,0,0,0.75);
  }
}

/* ── 7.4  Focus management — skip links ─────────────────────────────────── */
.skip-link {
  position:   absolute;
  top:        -100%;
  left:       var(--sp-4);
  padding:    var(--sp-3) var(--sp-5);
  background: var(--clr-brand-mid);
  color:      var(--clr-ink-inverse);
  font-weight:var(--fw-semibold);
  border-radius: var(--r-md);
  z-index:    var(--z-cursor);
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--sp-4);
}


/* ════════════════════════════════════════════════════════════════════════════
   §8  RESPONSIVE REFINEMENTS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Mobile (≤768px) ────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Disable parallax on mobile — causes performance issues */
  .section-hero {
    background-attachment: scroll;
    min-height: 75vh;
  }

  /* Reduce hero orbs on mobile */
  .hero-orb--1 { width: 280px; height: 280px; }
  .hero-orb--2 { width: 220px; height: 220px; }

  /* Simpler card hover on mobile */
  .card:hover {
    transform:  translateY(-5px) scale(1.005);
    box-shadow: var(--shadow-lg);
  }

  /* Reduce animation travel */
  .anim-fade-up    { transform: translateY(20px); }
  .anim-slide-right{ transform: translateX(-20px); }
  .anim-slide-left { transform: translateX(20px);  }

  /* Button full-width on small screens when needed */
  .btn-block-mobile {
    width:           100%;
    justify-content: center;
  }

  /* Section spacing reduction */
  .section-lg { padding-block: var(--sp-24); }
  .section-xl { padding-block: var(--sp-28); }

  /* Split section decorative frame — hide on mobile */
  .split-media::before { display: none; }

  /* Stat bar — remove vertical dividers on mobile */
  .stat-item + .stat-item::before { display: none; }

  /* Search bar stack */
  .search-bar {
    flex-direction: column;
    border-radius: var(--r-lg);
  }
  .search-bar__divider { width: 100%; height: 1px; margin: 0; }
}

/* ── Touch Devices ─────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {

  /* Remove hover lifts — touch has no hover state */
  .btn:hover,
  .card:hover,
  .gallery-item img { transform: none; }

  /* Active feedback for touch */
  .btn:active  { transform: scale(0.97); opacity: 0.88; }
  .card:active { transform: scale(0.98); }

  /* Gallery overlay always visible on touch */
  .gallery-overlay {
    opacity:   0.85;
    transform: translateY(0);
  }

  /* Disable card shine sweep — irrelevant without hover */
  .card::after { display: none; }
}

/* ── Large Screens (≥1440px) ────────────────────────────────────────────── */
@media (min-width: 1440px) {
  .section-xl { padding-block: var(--sp-48); }
}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {

  *,
  *::before,
  *::after {
    background:  transparent !important;
    color:       #000        !important;
    box-shadow:  none        !important;
    text-shadow: none        !important;
  }

  a,
  a:visited { text-decoration: underline; }

  .btn,
  .site-header,
  .site-footer,
  .hero-orb,
  .cursor-follower,
  .anim-fade-up,
  .anim-slide-right,
  .anim-slide-left {
    display: none !important;
  }

  .section-hero { min-height: auto; }
  .hero-content { color: #000; }
}