/* ============================================================
   Samora Ceylon
   main.css — Centralized Design System — Single Source of Truth
   Version: 8.0.0 | www.samoraceylon.com

   Brand: Samora Ceylon · Private Tours, Tea Tourism & Own Fleet Transport
          Est. 2025 | Mathugama, Sri Lanka
   Founder: MK Sameera Madusanka

   Theme: EMERALD ROYALE (white theme)
   Pure white and pearl grounds, Royal Emerald for actions and headings,
   Burnished and Antique Gold for accents, labels and hairlines, Onyx Ink
   for text. All body text is dark on light (at least 4.5:1 contrast).
   Fonts: Cormorant Garamond (display), Cinzel (labels, navigation),
   Mulish (body). Photos and cards are rounded rectangles; no arch frames
   and no dark overlays on photos (light veils only).

   Token names are unchanged from v7 so every child CSS file keeps working:
     --color-navy-*   light surfaces (white, pearl, linen)
     --color-gold-*   accent: Royal Emerald (solid) and Burnished Gold (light/pale)
     --color-gold-rgb Antique Gold, for tints, hairlines and soft shadows
     --color-royal-*  dark text scale (Onyx Ink)
     --color-green-*  secondary text and structure (stone grey)
     --color-white-NN dark ink alpha scale (was light-on-dark)
     --text-white     dark ink (legacy name); --text-on-accent is true white
                      for text on emerald or other filled accents

   ⚠️  DO NOT hardcode colors, fonts, or spacing in any other CSS file.
   ⚠️  ALL values in child CSS files must reference variables defined here.
   ⚠️  DO NOT inline CSS or JS in HTML files.
   ⚠️  ALL company data must come from about-us.json, no fallback hardcoding.
   ============================================================ */

/* ============================================================
   1. GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Cinzel:wght@400;500;600&family=Mulish:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   2. DESIGN TOKENS — BRAND COLORS
   ============================================================ */
:root {

  /* ─── Samora Ceylon EMERALD ROYALE PALETTE ───────────────── */
  /*
     White & pearl  : page, panels and cards (token family --color-navy-*)
     Royal emerald  : primary accent (token family --color-gold-*), buttons, links
     Burnished gold : hairlines, labels and warm detail (--color-gold-light/pale)
     Onyx ink       : body and heading text (token family --color-royal-*)
     Stone grey     : secondary text and structure (--color-green-*)
  */

  /* White and pearl (Primary / Backgrounds): page, panels and cards */
  --color-navy:           #FDFBF6;
  --color-navy-deep:      #F7F4EE;
  --color-navy-abyss:     #FFFFFF;
  --color-navy-card:      #FFFFFF;
  --color-navy-mid:       #F7F4EE;
  --color-navy-light:     #EFEADF;
  --color-navy-soft:      #145040;
  --color-navy-border:    #E3D6BC;
  --color-navy-rgb:       255, 255, 255;

  /* Royal emerald and burnished gold (Primary Accent / CTA). Token names kept as --color-gold-* for structural compatibility. */
  --color-gold:           #0E3B2E;
  --color-gold-light:     #7D6032;
  --color-gold-pale:      #8C6A37;
  --color-gold-dark:      #0A2C22;
  --color-gold-darker:    #7D6032;
  --color-gold-glow:      rgba(168, 131, 74, 0.22);
  --color-gold-glow-sm:   rgba(168, 131, 74, 0.12);
  --color-gold-bg:        rgba(14, 59, 46, 0.06);
  --color-gold-bg-hover:  rgba(14, 59, 46, 0.11);
  --color-gold-rgb:       168, 131, 74;

  /* Pearl (text scale). Token names kept as --color-royal-* for structural compatibility. */
  --color-royal:          #2E3833;
  --color-royal-light:    #121A17;
  --color-royal-pale:     #7D6032;
  --color-royal-dark:     #55605A;
  --color-royal-darker:   #646E68;
  --color-royal-glow:     rgba(18, 26, 23, 0.10);
  --color-royal-glow-sm:  rgba(18, 26, 23, 0.05);
  --color-royal-bg:       rgba(18, 26, 23, 0.035);
  --color-royal-bg-hover: rgba(18, 26, 23, 0.07);
  --color-royal-rgb:      18, 26, 23;

  /* Night grey (tertiary, structure and secondary text). Token names kept as --color-green-* for structural compatibility. */
  --color-green:          #5C6660;
  --color-green-light:    #55605A;
  --color-green-pale:     rgba(100, 110, 104, 0.14);
  --color-green-bg:       rgba(100, 110, 104, 0.06);
  --color-green-dark:     #3E4943;
  --color-green-rgb:      100, 110, 104;


  /* ─── v8.0 EMERALD ROYALE named tokens ─────────────────── */
  --er-white:             #FFFFFF;
  --er-pearl:             #F4EEE2;
  --er-pearl-deep:        #EAE1CE;
  --er-gold-line:         #DCC79E;
  --er-gold-antique:      #B08A4C;
  --er-gold-burnished:    #7D6032;
  --er-emerald:           #0E3B2E;
  --er-emerald-hover:     #145040;
  --er-emerald-mist:      #E1ECE5;
  --er-ink:               #121A17;
  --er-emerald-deep:      #082A20;
  --er-emerald-night:     #051C15;
  --er-gold-bright:       #D9B66E;
  --er-gold-soft:         #EAD3A0;
  --er-scrim-rgb:         5, 28, 21;   /* deep emerald, for text over photographs */
  --er-gold-bright-rgb:   217, 182, 110;
  --er-emerald-rgb:       14, 59, 46;
  --gradient-emerald-rich: linear-gradient(135deg, #082A20 0%, #0E3B2E 55%, #145040 100%);
  --gradient-gold-metal:  linear-gradient(135deg, #B08A4C 0%, #D9B66E 45%, #EAD3A0 60%, #B08A4C 100%);
  --text-on-accent:       #FFFFFF;

  /* ─── WHITE / NEUTRAL SCALE ───────────────────────────────── */
  --color-white:          #ffffff;

  /* v7.0 additions used by child files */
  --color-white-rgb:      18, 26, 23;
  --color-white-85:       rgba(18, 26, 23, 0.86);
  --color-white-55:       rgba(18, 26, 23, 0.66);
  --color-white-45:       rgba(18, 26, 23, 0.60);
  --color-white-25:       rgba(18, 26, 23, 0.26);
  --z-index-40:           40;
  --brand-facebook:       #1877F2;
  --wa-green-bright:      #5FE38A;
  --color-white-95:       rgba(18, 26, 23, 0.95);
  --color-white-90:       rgba(18, 26, 23, 0.90);
  --color-white-80:       rgba(18, 26, 23, 0.82);
  --color-white-75:       rgba(18, 26, 23, 0.78);
  --color-white-70:       rgba(18, 26, 23, 0.74);
  --color-white-65:       rgba(18, 26, 23, 0.70);
  --color-white-60:       rgba(18, 26, 23, 0.68);
  --color-white-50:       rgba(18, 26, 23, 0.64);
  --color-white-40:       rgba(18, 26, 23, 0.50);
  --color-white-35:       rgba(18, 26, 23, 0.40);
  --color-white-30:       rgba(18, 26, 23, 0.32);
  --color-white-20:       rgba(18, 26, 23, 0.18);
  --color-white-18:       rgba(18, 26, 23, 0.16);
  --color-white-12:       rgba(18, 26, 23, 0.11);
  --color-white-10:       rgba(18, 26, 23, 0.09);
  --color-white-08:       rgba(18, 26, 23, 0.07);
  --color-white-05:       rgba(18, 26, 23, 0.045);

  /* Gray Scale — neutral scale, no warm cast (50 = near-white, 900 = near-black) */
  --color-gray-50:        #FAF8F4;
  --color-gray-100:       #F3EFE7;
  --color-gray-200:       #E6E1D6;
  --color-gray-300:       #CFC8BA;
  --color-gray-400:       #9AA19C;
  --color-gray-500:       #646E68;
  --color-gray-600:       #4A5550;
  --color-gray-700:       #2E3833;
  --color-gray-800:       #1B2420;
  --color-gray-900:       #121A17;

  /* Dark Overlay Scale — onyx-based, for photo/hero overlays that still need dark-on-image legibility */
  --color-dark-90:        rgba(255, 255, 255, 0.95);
  --color-dark-80:        rgba(255, 255, 255, 0.90);
  --color-dark-70:        rgba(255, 255, 255, 0.82);
  --color-dark-50:        rgba(255, 255, 255, 0.62);
  --color-dark-30:        rgba(255, 255, 255, 0.38);

  /* ─── SEMANTIC / STATUS COLORS, bright enough to read on the night background ─── */
  --color-success:        #2F7A4E;
  --color-success-light:  rgba(var(--color-success-rgb), 0.16);
  --color-success-dark:   #235E3B;
  --color-success-rgb:    47, 122, 78;

  --color-warning:        #9A6A12;
  --color-warning-light:  rgba(154, 106, 18, 0.10);
  --color-warning-dark:   #7A5410;
  --color-warning-rgb:    154, 106, 18;

  --color-error:          #B23A48;
  --color-error-light:    rgba(var(--color-error-rgb), 0.16);
  --color-error-dark:     #8F2F3A;
  --color-error-text:     #B23A48;
  --color-error-rgb:      178, 58, 72;

  --color-info:           #0E3B2E;
  --color-info-light:     rgba(14, 59, 46, 0.08);
  --color-info-dark:      #0A2C22;
  --color-info-rgb:       14, 59, 46;

  /* ─── BACKGROUND TOKENS, night black with a faint blue cast ────── */
  --bg-primary:           #FDFBF6;
  --bg-secondary:         #F4EEE2;
  --bg-tertiary:          #EAE1CE;
  --bg-dark:              var(--color-navy-abyss);
  --bg-overlay:           rgba(255, 255, 255, 0.86);
  --bg-overlay-light:     rgba(255, 255, 255, 0.55);
  --bg-gold-light:        rgba(168, 131, 74, 0.08);
  --bg-green-light:       rgba(14, 59, 46, 0.05);
  --bg-texture-subtle:    var(--bg-primary);

  /* ─── TEXT TOKENS, warm white and gold on night black for readability ── */
  --text-primary:         var(--color-royal-light);
  --text-secondary:       var(--color-royal);
  --text-muted:           var(--color-green-light);
  --text-light:           var(--color-green);
  --text-lighter:         #5C6660;
  --text-white:           #121A17;
  --text-gold:            var(--color-gold-light);
  --text-navy:            var(--color-navy);
  --text-green:           var(--color-green-dark);

  /* ─── BORDER TOKENS — dark neutral hairlines for the jet-black page ─ */
  --border-primary:       #E6E1D6;
  --border-secondary:     #EFEADF;
  --border-light:         rgba(18, 26, 23, 0.10);
  --border-gold:          rgba(168, 131, 74, 0.45);
  --border-navy:          var(--color-navy-border);
  --border-focus:         var(--color-gold);

  /* ─── "GRADIENT" TOKENS — flattened to solid colors by design. Names kept
     for structural compatibility with every child file that references
     them; nothing in this system renders as an actual gradient. ─── */
  --gradient-primary:     linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --gradient-gold:        linear-gradient(135deg, #145040 0%, #0E3B2E 55%, #082A20 100%);
  --gradient-gold-hover:  linear-gradient(135deg, #1A5E4B 0%, #145040 55%, #0E3B2E 100%);
  --gradient-royal:       var(--color-royal);
  --gradient-royal-hover: var(--color-royal-light);
  --gradient-green:       var(--color-green);
  /* Hero / photo-overlay — a flat scrim, not a fade, over hero images */
  --gradient-hero:        linear-gradient(180deg, #F7F4EE 0%, #F7F4EE 100%);
  --gradient-depth:       linear-gradient(180deg, #FFFFFF 0%, #F7F4EE 100%);
  /* Photo-legibility scrim (top transparent -> bottom dark), used as an
     ::after over every photo card/hero image so the caption stays
     readable. This is a FUNCTIONAL fade, not decorative color styling,
     so it stays a real gradient — flattening it to a flat color darkens
     the whole photo uniformly instead of just the caption band. */
  --gradient-overlay:     linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.94) 100%);
  /* Premium fill — flat elevated dark panel (NOT gold: .pm-cta-band,
     .btn-premium and .divider-waves all pair this with white/gold TEXT
     on top, so it must stay dark or that text becomes unreadable). */
  --gradient-premium:     linear-gradient(160deg, #F7F4EE 0%, #FFFFFF 100%);
  /* Card fill — flat dark surface, one step above the page */
  --gradient-card:        linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  /* Glass effect — flat translucent black, paired with backdrop-filter blur */
  --gradient-glass:       rgba(255, 255, 255, 0.88);
  --gradient-text:        var(--color-gold);
  --gradient-warm:        var(--color-gold);
  --gradient-button:      var(--gradient-gold);

  /* ─── SHADOWS, on night black, elevation reads through opacity + a hairline
     border, not a soft light-theme drop shadow. Kept as pure black at
     higher opacity than the original light-theme values. ─── */
  --shadow-xs:            0 1px 2px rgba(18, 26, 23, 0.06);
  --shadow-sm:            0 1px 3px rgba(18, 26, 23, 0.08);
  --shadow-md:            0 4px 12px rgba(18, 26, 23, 0.08);
  --shadow-lg:            0 10px 24px rgba(18, 26, 23, 0.09);
  --shadow-xl:            0 18px 40px rgba(18, 26, 23, 0.10);
  --shadow-2xl:           0 28px 60px rgba(18, 26, 23, 0.12);
  --shadow-inner:         inset 0 1px 3px rgba(18, 26, 23, 0.06);
  --shadow-premium:       0 30px 60px -30px rgba(14, 59, 46, 0.28);

  /* Brand shadows — thin definition, not glow */
  --shadow-gold:          0 12px 30px -14px rgba(14, 59, 46, 0.45);
  --shadow-gold-lg:       0 16px 40px -14px rgba(14, 59, 46, 0.50);
  --shadow-navy:          0 4px 14px rgba(18, 26, 23, 0.08);
  --shadow-royal:         0 4px 14px rgba(18, 26, 23, 0.08);
  --shadow-green:         0 2px 10px rgba(18, 26, 23, 0.08);

  /* Glow aliases — used sparingly on hover, kept subtle */
  --glow-navy:            0 6px 20px rgba(18, 26, 23, 0.10);
  --glow-gold:            0 0 0 4px rgba(168, 131, 74, 0.18), 0 14px 34px -14px rgba(14, 59, 46, 0.45);
  --glow-royal:           0 6px 20px rgba(18, 26, 23, 0.10);
  --glow-green:           0 6px 18px rgba(18, 26, 23, 0.10);
  --glow-premium:         0 30px 60px -30px rgba(14, 59, 46, 0.30);
  --glow-soft:            0 0 30px -12px rgba(168, 131, 74, 0.45);

  --shadow-luxury:        0 30px 60px -30px rgba(14, 59, 46, 0.25), 0 0 0 1px rgba(168, 131, 74, 0.30);

  /* ─── TYPOGRAPHY ─────────────────────────────────────────── */
  /*
     Display:  Cormorant Garamond (500/600). Headings, package names, quotes.
               Use the italic for the one glowing accent word in a headline.
     Body:     Manrope (400 to 800). Body copy, navigation, labels, buttons.
     Labels:   Manrope uppercase with wide tracking (no separate caps face).
  */
  --font-display:         'Cormorant Garamond', 'Cormorant', 'Georgia', serif;
  --font-primary:         'Mulish', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-elegant:         'Cormorant Garamond', 'Georgia', serif;
  --font-mono:            'Courier New', monospace;

  /* Font-weight tokens */
  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;
  --font-weight-black:    900;

  /* Type scale */
  --text-xs:    0.72rem;
  --text-sm:    0.85rem;
  --text-base:  1rem;
  --text-md:    1.075rem;
  --text-lg:    1.2rem;
  --text-xl:    1.35rem;
  --text-2xl:   1.6rem;
  --text-3xl:   1.95rem;
  --text-4xl:   2.4rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;
  --text-8xl:   5.5rem;
  --text-9xl:   7rem;

  /* Line heights */
  --leading-none:     1;
  --leading-tight:    1.2;
  --leading-snug:     1.35;
  --leading-normal:   1.55;
  --leading-relaxed:  1.70;
  --leading-loose:    1.90;

  /* Letter spacing */
  --ls-tight:    -0.015em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.18em;

  /* ─── SPACING SCALE ──────────────────────────────────────── */
  --spacing-0:     0;
  --spacing-px:    1px;
  --spacing-0-5:   0.125rem;
  --spacing-1:     0.25rem;
  --spacing-1-5:   0.375rem;
  --spacing-2:     0.5rem;
  --spacing-2-5:   0.625rem;
  --spacing-3:     0.75rem;
  --spacing-3-5:   0.875rem;
  --spacing-4:     1rem;
  --spacing-5:     1.25rem;
  --spacing-6:     1.5rem;
  --spacing-7:     1.75rem;
  --spacing-8:     2rem;
  --spacing-9:     2.25rem;
  --spacing-10:    2.5rem;
  --spacing-11:    2.75rem;
  --spacing-12:    3rem;
  --spacing-14:    3.5rem;
  --spacing-16:    4rem;
  --spacing-20:    5rem;
  --spacing-24:    6rem;
  --spacing-28:    7rem;
  --spacing-32:    8rem;
  --spacing-40:    10rem;
  --spacing-48:    12rem;
  --spacing-56:    14rem;
  --spacing-64:    16rem;
  --spacing-72:    18rem;
  --spacing-96:    24rem;
  --spacing-128:   32rem;
  --spacing-144:   36rem;

  /* ─── BORDER RADIUS — kept squarer/finer, more editorial than "app" rounded ─── */
  --radius-none:  0;
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-2xl:   24px;
  --radius-3xl:   28px;
  --radius-4xl:   36px;
  --radius-full:  9999px;

  /* ─── TRANSITIONS ────────────────────────────────────────── */
  --transition-none:      none;
  --transition-fast:      all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:      all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:      all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth:    all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-premium:   all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-silk:            cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition-elegant:   all 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
  --transition-bounce:    all 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-INDEX SCALE ──────────────────────────────────────── */
  --z-index-hide:     -1;
  --z-index-0:         0;
  --z-index-auto:      auto;
  --z-index-base:      0;
  --z-index-10:        10;
  --z-index-20:        20;
  --z-index-30:        30;
  --z-index-50:        50;
  --z-index-docked:    10;
  --z-index-dropdown:  100;
  --z-index-sticky:    200;
  --z-index-fixed:     300;
  --z-index-overlay:   400;
  --z-index-modal:     500;
  --z-index-toast:     600;
  --z-index-tooltip:   700;
  --z-index-max:       9999;
  --z-index-maximum:   9999;

  /* ─── LAYOUT ─────────────────────────────────────────────── */
  --container-max:    1200px;
  --container-wide:   1400px;
  --container-narrow: 900px;

  /* Header */
  --header-height-top:      42px;
  --header-height-nav:      72px;
  --header-height-total:    114px;
  --header-height-scrolled: 60px;

  /* WhatsApp widget tokens */
  --wa-green:         #25d366;
  --wa-green-dark:    #1da851;
  --wa-green-light:   #dcf8c6;
  --wa-green-rgb:     37, 211, 102;
  --wa-bubble-bg:     var(--color-navy);
  --wa-fab-size:      60px;
  --wa-popup-width:   320px;
  --wa-popup-height:  420px;

  /* Slide interval */
  --slide-interval:   5000ms;
}

/* ============================================================
   3. BACKWARD COMPATIBILITY BRIDGE
   Maps ALL legacy variable names used across every child CSS file
   to the new Samora Ceylon brand tokens.
   DO NOT remove these — ALL child CSS files depend on them.
   ============================================================ */
:root {

  /* ── Old "orange" accent → Ceylon Gold ──────────────── */
  --primary-orange:       var(--color-gold);
  --secondary-orange:     var(--color-gold-light);
  --accent-orange:        var(--color-gold-pale);
  --dark-orange:          var(--color-gold-dark);
  --light-orange:         var(--color-gold-bg);
  --orange-50:            rgba(232, 150, 42, 0.04);
  --orange-100:           rgba(232, 150, 42, 0.08);
  --orange-200:           rgba(232, 150, 42, 0.15);
  --orange-300:           var(--color-gold-pale);
  --orange-400:           var(--color-gold-light);
  --orange-500:           var(--color-gold);
  --orange-600:           var(--color-gold-dark);
  --orange-700:           var(--color-gold-dark);
  --orange-800:           var(--color-gold-darker);
  --orange-900:           var(--color-gold-darker);

  /* ── Old "teal" → Safety Navy soft tones ────────────── */
  --primary-teal:         var(--color-navy-soft);
  --secondary-teal:       var(--color-navy-light);
  --accent-teal:          var(--color-navy-border);
  --dark-teal:            var(--color-navy-mid);
  --light-teal:           rgba(110, 100, 85, 0.10);
  --teal-50:              rgba(110, 100, 85, 0.04);
  --teal-100:             rgba(110, 100, 85, 0.08);
  --teal-200:             rgba(110, 100, 85, 0.15);
  --teal-300:             rgba(110, 100, 85, 0.30);
  --teal-400:             var(--color-navy-border);
  --teal-500:             var(--color-navy-soft);
  --teal-600:             var(--color-navy-light);
  --teal-700:             var(--color-navy-mid);
  --teal-800:             var(--color-navy);
  --teal-900:             var(--color-navy-deep);

  /* ── Old "red" → error color ─────────────────────────────── */
  --primary-red:          var(--color-error);
  --secondary-red:        #e8677e;
  --accent-red:           #f0a3b1;
  --dark-red:             var(--color-error-dark);
  --light-red:            var(--color-error-light);
  --red-50:               var(--color-error-light);
  --red-100:              var(--color-error-light);
  --red-200:              rgba(110, 100, 85, 0.20);
  --red-300:              rgba(110, 100, 85, 0.40);
  --red-400:              rgba(110, 100, 85, 0.60);
  --red-500:              var(--color-error);
  --red-600:              var(--color-error);
  --red-700:              var(--color-error-dark);
  --red-800:              var(--color-error-dark);
  --red-900:              var(--color-error-dark);

  /* ── Old "navy / dark" → Safety Navy Deep tones ─────────── */
  --primary-dark:         var(--color-navy);
  --secondary-dark:       var(--color-navy-soft);
  --charcoal:             var(--color-navy);

  /* ── Old neutral names ────────────────────────────────────── */
  --white:                #ffffff;
  --off-white:            #F7F4EE;
  --light-gray:           var(--color-gray-50);
  --lighter-gray:         var(--color-gray-100);
  --medium-gray:          var(--color-gray-200);
  --border-gray:          var(--color-gray-300);
  --divider-gray:         var(--color-gray-400);
  --text-gray:            var(--color-gray-600);
  --dark-gray:            var(--color-gray-700);
  --charcoal-gray:        var(--color-gray-800);
  --almost-black:         var(--color-gray-900);
  --light-bg:             var(--bg-secondary);
  --dark-text-muted:      var(--color-gray-600);

  /* ── Old background names ─────────────────────────────────── */
  --bg-orange:            var(--color-gold);
  --bg-teal:              var(--color-navy-soft);
  --bg-red:               var(--color-error);
  --bg-orange-light:      var(--color-gold-bg);
  --bg-teal-light:        rgba(110, 100, 85, 0.08);
  --bg-red-light:         var(--color-error-light);
  --bg-overlay-orange:    rgba(14, 59, 46, 0.92);
  --bg-overlay-teal:      rgba(var(--color-navy-rgb), 0.92);
  --bg-overlay-red:       rgba(110, 100, 85, 0.92);
  --bg-ocean-light:       rgba(var(--color-navy-rgb), 0.06);
  --bg-emerald-light:     var(--color-green-bg);
  --bg-golden-light:      var(--color-gold-bg);

  /* ── Old text color names ─────────────────────────────────── */
  --text-orange:          var(--color-gold);
  --text-teal:            var(--color-navy-soft);
  --text-red:             var(--color-error);
  --text-dark:            var(--color-navy);

  /* ── Old gradient names ───────────────────────────────────── */
  --gradient-orange:      var(--gradient-gold);
  --gradient-teal:        var(--gradient-primary);
  --gradient-red:         var(--color-error);
  /* NOT gold: company-gallery.css's .cta-card pairs this with white
     h2/p text on top, so it must stay dark to stay readable. */
  --gradient-luxury:      var(--color-navy-mid);
  --gradient-emerald:     var(--gradient-green);
  --gradient-golden:      var(--gradient-gold);

  /* ── Ocean-theme name aliases → Safety Navy equivalents ───── */
  --primary-ocean-blue:            var(--color-navy);
  --primary-ocean-blue-light:      var(--color-navy-light);
  --primary-ocean-blue-dark:       var(--color-navy-mid);
  --primary-ocean-blue-darker:     var(--color-navy-deep);
  --primary-ocean-blue-rgb:        var(--color-navy-rgb);
  --primary-emerald:               var(--color-green);
  --primary-emerald-light:         var(--color-green-light);
  --primary-emerald-dark:          var(--color-green-dark);
  --primary-emerald-rgb:           var(--color-green-rgb);
  --accent-golden:                 var(--color-gold);
  --accent-golden-light:           var(--color-gold-light);
  --accent-golden-dark:            var(--color-gold-dark);
  --accent-golden-darker:          var(--color-gold-darker);
  --accent-golden-rgb:             var(--color-gold-rgb);

  /* Gradient aliases */
  --gradient-ocean:       var(--gradient-primary);
  --gradient-depth:       linear-gradient(180deg, #FFFFFF 0%, #F7F4EE 100%);

  /* Shadow aliases */
  --shadow-ocean:         var(--shadow-navy);
  --shadow-emerald:       var(--shadow-green);
  --shadow-golden:        var(--shadow-gold);
  --shadow-orange:        var(--shadow-gold);
  --shadow-teal:          var(--shadow-navy);
  --shadow-red:           0 4px 20px rgba(110, 100, 85, 0.25);
  --shadow-medium:        var(--shadow-md);
  --shadow-large:         var(--shadow-lg);
  --shadow-brand:         var(--shadow-luxury);

  /* Glow aliases */
  --glow-ocean:           var(--glow-navy);
  --glow-emerald:         var(--glow-green);
  --glow-golden:          var(--glow-gold);
  --glow-orange:          var(--glow-gold);
  --glow-teal:            var(--glow-navy);
  --glow-primary:         var(--glow-premium);

  /* Glass aliases — light frosted glass for white theme */
  --glass-ocean:          rgba(255, 255, 255, 0.85);
  --glass-royal:          rgba(var(--color-royal-rgb), 0.10);
  --glass-emerald:        rgba(110, 100, 85, 0.08);
  --glass-golden:         rgba(168, 131, 74, 0.10);

  /* Old typography name aliases */
  --font-heading:         var(--font-display);
  --font-body:            var(--font-primary);
  --font-serif:           var(--font-display);
  --font-sans:            var(--font-primary);
  --font-luxury:          var(--font-elegant);

  /* Status color aliases */
  --status-success:       var(--color-success);
  --status-success-light: var(--color-success-light);
  --status-success-dark:  var(--color-success-dark);
  --status-success-rgb:   var(--color-success-rgb);
  --status-warning:       var(--color-warning);
  --status-warning-light: var(--color-warning-light);
  --status-warning-rgb:   var(--color-warning-rgb);
  --status-error:         var(--color-error);
  --status-error-light:   var(--color-error-light);
  --status-error-dark:    var(--color-error-dark);
  --status-error-rgb:     var(--color-error-rgb);
  --status-info:          var(--color-info);
  --status-info-light:    var(--color-info-light);
  --status-info-rgb:      var(--color-info-rgb);

  /* Legacy booking.css variables */
  --success-color:        var(--color-success);
  --success-light:        var(--color-success-light);
  --error-color:          var(--color-error);
  --error-light:          var(--color-error-light);
  --warning-color:        var(--color-warning);
  --warning-light:        var(--color-warning-light);
  --info-color:           var(--color-info);
  --info-light:           var(--color-info-light);
  --error-background:     var(--color-error-light);

  /* Old elegant-gray names */
  --elegant-gray-50:      var(--color-gray-50);
  --elegant-gray-100:     var(--color-gray-100);
  --elegant-gray-200:     var(--color-gray-200);
  --elegant-gray-300:     var(--color-gray-300);
  --elegant-gray-400:     var(--color-gray-400);
  --elegant-gray-500:     var(--color-gray-500);
  --elegant-gray-600:     var(--color-gray-600);
  --elegant-gray-700:     var(--color-gray-700);
  --elegant-gray-800:     var(--color-gray-800);
  --elegant-gray-900:     var(--color-gray-900);

  /* Old primary / theme naming */
  --primary-white:        #ffffff;
  --white-color:          #ffffff;
  --dark-color:           var(--color-navy);
  --primary-color:        var(--color-navy);
  --primary-color-rgb:    var(--color-navy-rgb);
  --primary-accent:       var(--color-gold);
  --primary-accent-rgb:   var(--color-gold-rgb);
  --primary-blue:         var(--color-navy);
  --primary-blue-light:   var(--color-navy-light);
  --primary-blue-dark:    var(--color-navy-mid);
  --primary-blue-rgb:     var(--color-navy-rgb);
  --secondary-blue:       var(--color-navy-soft);
  --primary-gold:         var(--color-gold);
  --primary-gold-light:   var(--color-gold-light);
  --primary-gold-dark:    var(--color-gold-dark);
  --primary-gold-rgb:     var(--color-gold-rgb);

  /* Misc old names — repointed from ivory to jet-black equivalents */
  --subtle-texture:       var(--color-navy-card);
  --sophisticated-ivory:  var(--color-navy-mid);
  --elegant-pearl:        var(--bg-primary);
  --luxury-cream:         var(--color-navy-card);
  --luxury-coral:         var(--color-error);
  --premium-charcoal:     var(--color-gray-700);
  --premium-charcoal-light: var(--color-gray-600);
  --premium-charcoal-dark:  var(--color-gray-800);
  --bg-texture-subtle:    var(--bg-primary);

  /* Border aliases */
  --border-color:         var(--border-primary);
  --muted-text:           var(--text-muted);
  --card-background:      var(--bg-primary);

  /* Border radius aliases (--border-radius-* used across child files) */
  --border-radius:        var(--radius-md);
  --border-radius-:       var(--radius-md);
  --border-radius-sm:     var(--radius-sm);
  --border-radius-md:     var(--radius-md);
  --border-radius-lg:     var(--radius-lg);
  --border-radius-xl:     var(--radius-xl);
  --border-radius-2xl:    var(--radius-2xl);
  --border-radius-full:   var(--radius-full);

  /* Font-weight short aliases */
  --fw-light:             var(--font-weight-light);
  --fw-regular:           var(--font-weight-normal);
  --fw-medium:            var(--font-weight-medium);
  --fw-semibold:          var(--font-weight-semibold);
  --fw-bold:              var(--font-weight-bold);

  /* Old font-size short aliases */
  --fs-xs:    var(--text-xs);
  --fs-sm:    var(--text-sm);
  --fs-base:  var(--text-base);
  --fs-md:    var(--text-md);
  --fs-lg:    var(--text-lg);
  --fs-xl:    var(--text-xl);
  --fs-2xl:   var(--text-2xl);
  --fs-3xl:   var(--text-3xl);
  --fs-4xl:   var(--text-4xl);
  --fs-5xl:   var(--text-5xl);
  --fs-6xl:   var(--text-6xl);

  /* Line-height short aliases */
  --lh-tight:    var(--leading-tight);
  --lh-snug:     var(--leading-snug);
  --lh-normal:   var(--leading-normal);
  --lh-relaxed:  var(--leading-relaxed);
  --lh-loose:    var(--leading-loose);

  /* Letter-spacing short aliases */
  --ls-tight:    -0.015em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.18em;

  /* Background texture aliases */
  --bg-texture-ocean: var(--bg-primary);
  --bg-texture-waves: var(--bg-primary);

  /* Text color extras */
  --text-tertiary:        var(--color-gray-600);
  /* Used for text placed over dark photo/hero overlays, not on the white page background */
  --light-text-primary:   rgba(18, 26, 23, 0.86);

  /* Mobile responsive tokens */
  --mobile-text-xs:       0.7rem;
  --mobile-text-sm:       0.8rem;
  --mobile-text-base:     0.875rem;
  --mobile-text-lg:       1rem;
  --mobile-text-xl:       1.125rem;
  --mobile-text-2xl:      1.25rem;
  --mobile-spacing-xs:    var(--spacing-2);
  --mobile-spacing-sm:    var(--spacing-3);
  --mobile-spacing-md:    var(--spacing-4);
  --mobile-spacing-lg:    var(--spacing-6);
  --mobile-spacing-xl:    var(--spacing-8);

  /* Touch / accessibility tokens */
  --touch-target-min:     44px;

  /* Transition aliases */
  --transition-smooth:    all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-premium:   all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-elegant:   all 350ms cubic-bezier(0.165, 0.84, 0.44, 1);

  /* Misc */
  --secondary-purple:     #0E3B2E;
  --slide-interval:       5000ms;

  /* Font accent alias — labels and eyebrows use Manrope uppercase */
  --font-accent:          var(--font-primary);
  --font-label:           'Cinzel', 'Cormorant Garamond', 'Georgia', serif;

  /* Border radius base alias */
  --radius-base:          var(--radius-md);

  /* Short space aliases (--space-* used in some child files) */
  --space-1:              var(--spacing-1);
  --space-2:              var(--spacing-2);
  --space-3:              var(--spacing-3);
  --space-4:              var(--spacing-4);
  --space-5:              var(--spacing-5);
  --space-6:              var(--spacing-6);
  --space-8:              var(--spacing-8);
  --space-10:             var(--spacing-10);
  --space-12:             var(--spacing-12);
  --space-16:             var(--spacing-16);
  --space-20:             var(--spacing-20);
  --space-24:             var(--spacing-24);

  /* Text shadow aliases — for light text placed over photo/hero overlays */
  --text-shadow-soft:     none;
  --text-shadow-medium:   none;
  --text-shadow-strong:   none;

  /* Short z-index aliases */
  --z-below:              -1;
  --z-base:               0;
  --z-raised:             10;
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-fixed:              300;
  --z-modal:              500;
  --z-toast:              600;
}

/* ============================================================
   4. CSS RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  letter-spacing: -0.01em;
}

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

a {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--transition-base);
  position: relative;
}

a:hover {
  color: var(--color-gold-light);
  text-decoration: none;
}

ul, ol { list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ============================================================
   5. TYPOGRAPHY SYSTEM
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-4);
}

h1, .h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl)); }
h2, .h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-5xl)); margin-bottom: var(--spacing-5); }
h3, .h3 { font-size: clamp(var(--text-xl), 3vw, var(--text-4xl)); }
h4, .h4 { font-size: clamp(var(--text-lg), 2.5vw, var(--text-3xl)); }
h5, .h5 { font-size: var(--text-xl); }
h6, .h6 { font-size: var(--text-lg); }

p {
  margin-bottom: var(--spacing-4);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
  letter-spacing: 0;
  text-transform: none;
}
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--spacing-6);
  line-height: var(--leading-relaxed);
  text-transform: none;
  letter-spacing: 0;
}

/* Links */
.link-brand {
  color: var(--color-royal-light);
  font-weight: var(--font-weight-medium);
  position: relative;
}
.link-brand::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-gold);
  transition: width var(--transition-elegant);
}
.link-brand:hover::after { width: 100%; }

.link-gold { color: var(--color-gold); font-weight: var(--font-weight-semibold); }
.link-gold:hover { color: var(--color-gold-light); text-shadow: none; }

/* Ocean / golden compatibility aliases */
.link-ocean  { color: var(--color-royal-light); font-weight: var(--font-weight-medium); }
.link-ocean:hover { color: var(--color-gold); }
.link-golden { color: var(--color-gold); font-weight: var(--font-weight-semibold); }
.link-golden:hover { color: var(--color-gold-light); }

/* ============================================================
   6. SECTION HEADERS
   ============================================================ */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-12);
}

.section-label,
.section-subtitle-above {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  /* v8.0: Burnished Gold #7D6032 reads at about 5.9:1 on white. */
  color: var(--color-gold-light);
  margin-bottom: var(--spacing-3);
  position: relative;
  padding: 0 var(--spacing-6);
}
.section-label::before,
.section-label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--color-gold-rgb), 0.9));
}
.section-label::before { right: 100%; transform: translateX(var(--spacing-6)); }
.section-label::after  { left: 100%; transform: translateX(calc(-1 * var(--spacing-6))); background: linear-gradient(90deg, rgba(var(--color-gold-rgb), 0.9), transparent); }

/* On dark-accent sections, revert the label to full-brightness gold —
   contrast against Deep Navy is already excellent (6.6:1+) there. */
.section-dark .section-label, .section-dark .section-subtitle-above,
.section-navy .section-label, .section-navy .section-subtitle-above,
.section-light .section-label, .section-light .section-subtitle-above,
.card-dark .section-label, .card-dark .section-subtitle-above {
  color: var(--color-gold-light);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-5xl));
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-4);
  letter-spacing: -0.01em;
}
.section-title span,
.section-title em {
  /* v8.0: Burnished Gold italic accent word on white. */
  color: var(--color-gold-light);
  font-style: italic;
}
.section-dark .section-title span, .section-dark .section-title em,
.section-navy .section-title span, .section-navy .section-title em,
.section-light .section-title span, .section-light .section-title em,
.card-dark .section-title span, .card-dark .section-title em {
  color: var(--color-gold-light);
}
.section-title.text-gradient {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
  font-family: var(--font-primary);
  text-transform: none;
  letter-spacing: 0;
}

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  margin: var(--spacing-5) auto;
}
.section-divider span {
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
}
.section-divider span:last-child { background: linear-gradient(90deg, var(--color-gold), transparent); }
.section-divider i { color: var(--color-gold); font-size: var(--text-sm); }

/* Section spacing classes */
.section    { padding: var(--spacing-20) 0; }
.section-sm { padding: var(--spacing-12) 0; }
.section-lg { padding: var(--spacing-24) 0; }
.section-hero         { padding: var(--spacing-32) 0 var(--spacing-24); }
.section-destinations { padding: var(--spacing-20) 0; }
.section-tours        { padding: var(--spacing-24) 0; }
.section-testimonials { padding: var(--spacing-20) 0; }
.section-contact      { padding: var(--spacing-16) 0; }
.section-ocean        { padding: var(--spacing-24) 0; background: var(--bg-texture-subtle); }
.section-emerald      { padding: var(--spacing-20) 0; background: var(--color-green-bg); }
.section-golden       { padding: var(--spacing-16) 0; background: var(--color-gold-bg); }

/* Dark / obsidian section variants */
.section-dark  { background: var(--color-navy-deep);  color: var(--text-white); }
.section-navy  { background: var(--color-navy-abyss); color: var(--text-white); }
.section-light { background: var(--color-navy-mid); }

/* ============================================================
   7. BUTTON SYSTEM
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3-5) var(--spacing-8);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  min-height: 48px;
  transition: var(--transition-elegant);
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Primary: royal emerald pill with a fine gold inner ring; a band of
   light sweeps across on hover. On photographs and emerald panels the
   same button turns metallic gold (section 33). */
.btn-primary,
.btn-gold,
.btn-cta,
.btn-golden {
  background-color: transparent;
  background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.30) 50%, transparent 65%), var(--gradient-gold);
  background-size: 250% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  background-repeat: no-repeat;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(var(--er-gold-bright-rgb), 0.45);
  font-weight: var(--font-weight-bold);
  transition: background-position .9s var(--ease-silk), transform .35s var(--ease-spring), box-shadow .35s ease, color .25s ease;
}
.btn-primary:hover,
.btn-gold:hover,
.btn-cta:hover,
.btn-golden:hover {
  background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.30) 50%, transparent 65%), var(--gradient-gold-hover);
  background-position: -50% 0, 0 0;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: var(--glow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(var(--er-gold-bright-rgb), 0.75);
  color: var(--text-on-accent);
}
.btn-primary:active,
.btn-gold:active { transform: translateY(0); }

/* Secondary — Plantation Forest Green */
.btn-secondary,
.btn-navy,
.btn-ocean,
.btn-blue {
  background: var(--gradient-primary);
  border: none;
  color: var(--text-white);
  box-shadow: var(--shadow-navy);
}
.btn-secondary:hover,
.btn-navy:hover,
.btn-ocean:hover,
.btn-blue:hover {
  background: var(--color-navy-light);
  transform: translateY(-2px);
  box-shadow: var(--glow-navy);
  color: var(--text-white);
}

/* Royal Blue button — secondary accent from the new brand mark's vivid "W" gradient */
.btn-royal {
  background: var(--gradient-royal);
  border: none;
  color: var(--text-on-accent);
  box-shadow: var(--shadow-royal);
}
.btn-royal:hover {
  background: var(--gradient-royal-hover);
  transform: translateY(-2px);
  box-shadow: var(--glow-royal);
  color: var(--text-on-accent);
}

/* Leaf Sage / eco button */
.btn-emerald,
.btn-green,
.btn-teal {
  background: var(--gradient-green);
  border: none;
  color: var(--text-on-accent);
  box-shadow: var(--shadow-green);
}
.btn-emerald:hover,
.btn-green:hover,
.btn-teal:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-green);
  color: var(--text-on-accent);
}

/* Outline variants */
.btn-outline-primary,
.btn-outline-gold {
  background: transparent;
  border: 2px solid var(--color-gold);
  color: var(--color-gold-dark);
}
.btn-outline-primary:hover,
.btn-outline-gold:hover {
  background: var(--gradient-gold);
  border-color: var(--color-gold);
  color: var(--text-on-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.btn-outline-navy,
.btn-outline-ocean,
.btn-outline-primary-navy {
  background: transparent;
  border: 2px solid var(--color-white-30);
  color: var(--color-white-80);
}
.btn-outline-navy:hover,
.btn-outline-ocean:hover {
  background: var(--color-navy-light);
  border-color: var(--color-navy-light);
  color: var(--text-white);
  transform: translateY(-2px);
}

.btn-outline-emerald,
.btn-outline-green {
  background: transparent;
  border: 2px solid var(--color-green);
  color: var(--color-green);
}
.btn-outline-emerald:hover,
.btn-outline-green:hover {
  background: var(--gradient-green);
  border-color: var(--color-green);
  color: var(--text-on-accent);
  transform: translateY(-2px);
}

.btn-outline-royal {
  background: transparent;
  border: 2px solid var(--color-royal);
  color: var(--color-royal);
}
.btn-outline-royal:hover {
  background: var(--gradient-royal);
  border-color: var(--color-royal);
  color: var(--text-on-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-royal);
}

/* White / Ghost button — dark theme version */
.btn-white {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white-90);
  border: 1px solid var(--color-white-18);
}
.btn-white:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--text-white);
}

.btn-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-white-20);
  color: var(--text-white);
  font-weight: var(--font-weight-semibold);
}
.btn-glass:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-2px);
  box-shadow: var(--shadow-premium);
  color: var(--text-white);
}

/* Premium shimmer button */
.btn-premium {
  background: var(--gradient-premium);
  border: none;
  color: var(--text-white);
  font-weight: var(--font-weight-bold);
}
.btn-premium::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.6s ease;
}
.btn-premium:hover::before { left: 100%; }
.btn-premium:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--glow-premium);
  color: var(--text-white);
}

/* Ripple effect */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}
.btn-ripple:active::after { width: 300px; height: 300px; }

/* Button sizes */
.btn-sm  { padding: var(--spacing-2-5) var(--spacing-6); font-size: var(--text-sm); border-radius: var(--radius-lg); min-height: 36px; }
.btn-lg  { padding: var(--spacing-4) var(--spacing-10); font-size: var(--text-lg); border-radius: var(--radius-2xl); min-height: 54px; }
.btn-xl  { padding: var(--spacing-5) var(--spacing-12); font-size: var(--text-xl); border-radius: var(--radius-2xl); min-height: 64px; }

/* ============================================================
   8. CONTAINER & LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}
.container-wide    { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--spacing-8); }
.container-ocean   { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-6); }
.container-premium { max-width: 1600px; margin: 0 auto; padding: 0 var(--spacing-8); }
.container-content { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-5); }

.grid  { display: grid; }
.flex  { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap-2 { gap: var(--spacing-2); }
.flex-gap-3 { gap: var(--spacing-3); }
.flex-gap-4 { gap: var(--spacing-4); }

/* ============================================================
   9. CARD SYSTEM
   ============================================================ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background: var(--gradient-card);
  background-clip: border-box;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-premium);
  overflow: hidden;
  will-change: transform;
}
.card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-premium);
  border-color: var(--border-gold);
}
.card-header {
  padding: var(--spacing-6);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  margin-bottom: 0;
}
.card-body  { flex: 1 1 auto; padding: var(--spacing-6); }
.card-footer {
  padding: var(--spacing-6);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}
.card-title {
  margin-bottom: var(--spacing-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.card-text { color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* Card variants */
.card-premium {
  background: var(--gradient-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-slow);
}
.card-premium:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--color-gold-rgb), 0.5);
}

.card-dark {
  background: var(--color-navy-light);
  border: 1px solid var(--color-navy-border);
  border-radius: var(--radius-lg);
  color: var(--text-white);
  transition: var(--transition-slow);
}
.card-dark:hover { border-color: var(--color-gold); box-shadow: var(--shadow-gold); }
.card-dark .card-title { color: var(--text-white); }
.card-dark .card-text  { color: var(--color-white-80); }

/* Ocean/Navy card (alias) */
.card-ocean,
.card-navy {
  background: var(--gradient-primary);
  border: 2px solid var(--color-navy);
  color: var(--text-white);
  box-shadow: var(--shadow-navy);
}
.card-ocean .card-title, .card-navy .card-title { color: var(--text-white); }
.card-ocean .card-text,  .card-navy .card-text  { color: var(--color-white-90); }
.card-ocean:hover, .card-navy:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--glow-navy);
}

.card-golden {
  background: var(--gradient-gold);
  border: 2px solid var(--color-gold);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-gold);
}
.card-golden .card-title { color: var(--text-on-accent); }
.card-golden .card-text  { color: rgba(255,255,255,0.9); }
.card-golden:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--glow-gold);
}

.card-royal {
  background: var(--gradient-royal);
  border: 2px solid var(--color-royal);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-royal);
}
.card-royal .card-title { color: var(--text-on-accent); }
.card-royal .card-text  { color: rgba(255,255,255,0.9); }
.card-royal:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--glow-royal);
}

.card-emerald {
  background: var(--gradient-green);
  border: 2px solid var(--color-green);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-green);
}
.card-emerald .card-title { color: var(--text-on-accent); }
.card-emerald .card-text  { color: rgba(255,255,255,0.9); }
.card-emerald:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--glow-green);
}

.card-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-white-20);
  box-shadow: var(--shadow-lg);
}
.card-glass:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2xl);
}

/* ============================================================
   10. BADGE SYSTEM
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.badge-gold,
.badge-golden {
  background: var(--color-gold-glow);
  color: var(--color-gold-dark);
  border: 1px solid rgba(var(--color-gold-rgb), 0.35);
}
.badge-navy,
.badge-ocean {
  background: var(--color-navy);
  color: var(--text-white);
}
.badge-royal {
  background: var(--color-royal-glow);
  color: var(--color-royal-dark);
  border: 1px solid rgba(var(--color-royal-rgb), 0.35);
}
.badge-green,
.badge-emerald {
  background: var(--color-green-bg);
  color: var(--color-green);
  border: 1px solid rgba(var(--color-green-rgb), 0.35);
}
.badge-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
  border: 1px solid var(--color-white-20);
}

/* ============================================================
   11. FORM ELEMENTS
   ============================================================ */
.form-control {
  display: block;
  width: 100%;
  padding: var(--spacing-4);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-xl);
  transition: var(--transition-elegant);
}
.form-control:focus {
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border-color: var(--color-gold);
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--color-gold-glow-sm);
}
.form-control::placeholder { color: var(--text-lighter); opacity: 1; }
.form-control:disabled { background-color: var(--bg-secondary); opacity: 0.6; }

.form-label {
  display: block;
  margin-bottom: var(--spacing-2);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.form-label.required::after { content: '*'; color: var(--color-error); margin-left: 4px; }

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23d9b54a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  padding-right: 40px;
}

/* ============================================================
   12. ALERT SYSTEM
   ============================================================ */
.alert {
  position: relative;
  padding: var(--spacing-4) var(--spacing-6);
  margin-bottom: var(--spacing-4);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  border-left: 4px solid;
}
.alert-success {
  color: var(--color-success);
  background: rgba(var(--color-success-rgb), 0.10);
  border-color: rgba(var(--color-success-rgb), 0.20);
  border-left-color: var(--color-success);
}
.alert-warning {
  color: var(--color-gold);
  background: rgba(var(--color-gold-rgb), 0.10);
  border-color: rgba(var(--color-gold-rgb), 0.20);
  border-left-color: var(--color-gold);
}
.alert-danger,
.alert-error {
  color: var(--color-error-text);
  background: rgba(var(--color-error-rgb), 0.10);
  border-color: rgba(var(--color-error-rgb), 0.20);
  border-left-color: var(--color-error);
}
.alert-info {
  color: var(--color-info);
  background: rgba(var(--color-info-rgb), 0.10);
  border-color: rgba(var(--color-info-rgb), 0.20);
  border-left-color: var(--color-info);
}

/* ============================================================
   13. DECORATIVE ELEMENTS
   ============================================================ */
/* Ceylon Amber line separator */
.gold-line { width: 60px; height: 2px; background: var(--color-gold); border-radius: var(--radius-full); }
.gold-line-center { margin: 0 auto; }

.gold-diamond {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-gold);
}
.gold-diamond::before, .gold-diamond::after { content: '◆'; font-size: 6px; opacity: 0.6; }

/* Dividers */
.divider-ocean,
.divider-brand {
  height: 2px;
  background: var(--gradient-primary);
  margin: var(--spacing-8) 0;
  border: none;
  border-radius: var(--radius-full);
  position: relative;
}
.divider-ocean::before, .divider-brand::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 6px;
  background: var(--gradient-gold);
  border-radius: var(--radius-full);
}
.divider-waves {
  height: 4px;
  background: var(--gradient-premium);
  margin: var(--spacing-6) 0;
  border: none;
  border-radius: var(--radius-full);
  animation: waveMotion 6s ease-in-out infinite;
}

/* Gold text (flat — no shimmer/foil animation) */
.text-shimmer {
  color: var(--color-gold);
}

/* ============================================================
   14. NAVIGATION
   ============================================================ */
.navbar-ocean {
  background: var(--gradient-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-white-10);
  transition: var(--transition-elegant);
}

/* ============================================================
   15. HERO SECTIONS
   ============================================================ */
.hero-ocean {
  background: var(--gradient-hero);
  color: var(--text-white);
  padding: var(--spacing-32) 0;
  position: relative;
  overflow: hidden;
}
.hero-ocean::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   16. FOOTER
   ============================================================ */
.footer-ocean {
  background: var(--gradient-depth);
  color: var(--text-primary);
  padding: var(--spacing-16) 0 var(--spacing-8);
  position: relative;
}
.footer-ocean::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gradient-gold);
}

/* ============================================================
   17. PREMIUM COMPONENTS
   ============================================================ */

/* Progress bars */
.progress-modern {
  height: var(--spacing-3);
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: var(--shadow-inner);
}
.progress-bar-ocean,
.progress-bar-brand {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-smooth);
  position: relative;
  overflow: hidden;
}
.progress-bar-gold  { background: var(--gradient-gold); }
.progress-bar-green { background: var(--gradient-green); }
.progress-bar-ocean::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: shimmer 2s infinite;
}

/* Tooltips */
.tooltip-ocean { position: relative; cursor: help; }
.tooltip-ocean::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
  background: var(--color-navy-deep);
  color: var(--text-white);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: var(--transition-elegant);
  z-index: var(--z-index-tooltip);
  box-shadow: var(--shadow-lg);
}
.tooltip-ocean::after {
  content: '';
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%) translateY(1px);
  border: 4px solid transparent;
  border-top-color: var(--color-navy-deep);
  opacity: 0; visibility: hidden;
  transition: var(--transition-elegant);
}
.tooltip-ocean:hover::before,
.tooltip-ocean:hover::after {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(-8px);
}

/* Modals */
.modal-ocean .modal-content {
  border: none;
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-2xl);
  background: var(--gradient-card);
  border: 1px solid var(--border-primary);
  overflow: hidden;
}
.modal-ocean .modal-header {
  background: var(--gradient-primary);
  color: var(--text-white);
  border-bottom: none;
  padding: var(--spacing-6);
}
.modal-ocean .modal-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-2xl);
}
.modal-ocean .modal-body { padding: var(--spacing-8); }
.modal-ocean .modal-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
  padding: var(--spacing-6);
}

/* Badge variants (premium section) */
.badge-ocean { background: var(--gradient-primary); color: var(--text-white); }
.badge-gold, .badge-golden { background: var(--gradient-gold); color: var(--text-on-accent); }
.badge-royal { background: var(--gradient-royal); color: var(--text-on-accent); }
.badge-emerald { background: var(--gradient-green); color: var(--text-on-accent); }
.badge-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
  border: 1px solid var(--color-white-20);
}

/* ============================================================
   18. TOURISM-SPECIFIC COMPONENTS
   ============================================================ */

/* Destination Cards */
.destination-card {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--gradient-card);
  box-shadow: var(--shadow-lg);
  transition: var(--transition-premium);
  border: 1px solid var(--border-light);
}
.destination-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--glow-premium);
  border-color: var(--border-gold);
}
.destination-card .card-image { position: relative; overflow: hidden; height: 250px; }
.destination-card .card-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); }
.destination-card:hover .card-image img { transform: scale(1.1); }
.destination-card .card-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--gradient-overlay);
  opacity: 0; transition: var(--transition-elegant);
  display: flex; align-items: center; justify-content: center;
}
.destination-card:hover .card-overlay { opacity: 1; }
.destination-card .price-badge {
  position: absolute; top: var(--spacing-4); right: var(--spacing-4);
  background: var(--gradient-gold);
  color: var(--text-on-accent);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
}

/* Tour Package Cards */
.tour-package {
  background: var(--gradient-card);
  border-radius: var(--radius-3xl);
  padding: var(--spacing-8);
  box-shadow: var(--shadow-premium);
  transition: var(--transition-premium);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}
.tour-package::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--gradient-gold);
}
.tour-package:hover {
  transform: translateY(-6px);
  box-shadow: var(--glow-premium);
  border-color: var(--border-gold);
}
.tour-package.featured { border-color: var(--color-gold); box-shadow: var(--shadow-gold); }
.tour-package.featured::before { background: var(--gradient-gold); }

/* Testimonial Cards */
.testimonial-card {
  background: var(--gradient-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-8);
  text-align: center;
  position: relative;
  border: 1px solid var(--color-white-20);
  transition: var(--transition-elegant);
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2xl); }
.testimonial-card .quote-icon { font-size: var(--text-4xl); color: var(--color-gold); margin-bottom: var(--spacing-4); }
.testimonial-card .avatar {
  width: 80px; height: 80px;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-gold);
  margin: var(--spacing-6) auto var(--spacing-4);
  box-shadow: var(--shadow-gold);
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-6);
  padding: var(--spacing-8) 0;
}
.gallery-item {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--bg-primary);
  box-shadow: var(--shadow-md);
  transition: var(--transition-premium);
  aspect-ratio: 4/3;
}
.gallery-item:hover { transform: scale(1.03); box-shadow: var(--glow-navy); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item .overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--gradient-overlay);
  opacity: 0; transition: var(--transition-elegant);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-white);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
}
.gallery-item:hover .overlay { opacity: 1; }

/* Booking Form */
.booking-form {
  background: var(--gradient-card);
  border-radius: var(--radius-3xl);
  padding: var(--spacing-10);
  box-shadow: var(--shadow-2xl);
  border: 2px solid var(--border-gold);
}
.booking-form .form-section { margin-bottom: var(--spacing-8); }
.booking-form .form-section:last-child { margin-bottom: 0; }
.booking-form .section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold-dark);
  margin-bottom: var(--spacing-4);
  position: relative;
}
.booking-form .section-title::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 0;
  width: 50px; height: 3px;
  background: var(--gradient-gold);
  border-radius: var(--radius-full);
}

/* Statistics */
.stats-section {
  background: var(--gradient-hero);
  color: var(--text-white);
  padding: var(--spacing-16) 0;
  position: relative;
}
.stat-item { text-align: center; padding: var(--spacing-6); }
.stat-number {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--spacing-2);
  font-family: var(--font-display);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.stat-label {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.9;
}

/* Feature Highlights */
.feature-highlight {
  display: flex;
  align-items: center;
  padding: var(--spacing-6);
  background: var(--gradient-card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  transition: var(--transition-elegant);
  border-left: 4px solid var(--color-gold);
  margin-bottom: var(--spacing-4);
}
.feature-highlight:hover { transform: translateX(8px); box-shadow: var(--shadow-lg); }
.feature-highlight .icon {
  width: 60px; height: 60px;
  background: var(--gradient-primary);
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-white);
  font-size: var(--text-2xl);
  margin-right: var(--spacing-6);
  box-shadow: var(--shadow-navy);
}
.feature-highlight .content h3 { color: var(--color-gold-dark); font-size: var(--text-xl); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-2); }
.feature-highlight .content p  { color: var(--text-secondary); margin: 0; line-height: var(--leading-relaxed); }

/* ============================================================
   19. UTILITY: TEXT
   ============================================================ */
.text-primary   { color: var(--text-primary)   !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted)     !important; }
.text-white     { color: var(--text-white)     !important; }
.text-dark      { color: var(--text-primary) !important; }
.text-navy      { color: var(--text-primary) !important; }
.text-gold      { color: var(--color-gold)     !important; }
.text-royal     { color: var(--color-royal)    !important; }
.text-green     { color: var(--color-green)    !important; }

/* Legacy text aliases */
.text-ocean     { color: var(--text-primary) !important; }
.text-emerald   { color: var(--color-green)      !important; }
.text-golden    { color: var(--color-gold-dark)  !important; }
.text-orange    { color: var(--color-gold)        !important; }
.text-teal      { color: var(--color-navy-soft)  !important; }
.text-blue      { color: var(--text-primary) !important; }
.text-red       { color: var(--color-error)      !important; }
.text-success   { color: var(--color-success)    !important; }
.text-warning   { color: var(--color-warning)    !important; }
.text-danger    { color: var(--color-error)      !important; }
.text-info      { color: var(--color-info)       !important; }
.text-serif     { font-family: var(--font-display) !important; }
.text-elegant   { font-family: var(--font-elegant) !important; }

/* Gradient text */
.text-gradient {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--font-weight-bold);
}
.text-ocean-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--font-weight-bold);
}
.text-golden-gradient {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--font-weight-bold);
}
.text-ocean-glow  { color: var(--text-primary); text-shadow: 0 0 20px rgba(var(--color-navy-rgb), 0.4); }
.text-golden-glow { color: var(--color-gold-pale); text-shadow: none; }

/* Tourism text utilities */
.text-hero {
  font-size: var(--text-6xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-none);
  font-family: var(--font-display);
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-subtitle  { font-size: var(--text-2xl); font-weight: var(--font-weight-light); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.text-price     { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); color: var(--color-gold-dark); }
.text-highlight {
  color: var(--color-gold);
  font-weight: var(--font-weight-semibold);
}
.text-premium-shadow { text-shadow: 2px 2px 8px rgba(var(--color-navy-rgb), 0.3); }

/* ============================================================
   20. UTILITY: BACKGROUND
   ============================================================ */
.bg-primary   { background-color: var(--bg-primary)   !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary  { background-color: var(--bg-tertiary)  !important; }
.bg-dark      { background-color: var(--color-navy)   !important; }
.bg-navy      { background-color: var(--color-navy)   !important; }
.bg-gold      { background-color: var(--color-gold)   !important; color: var(--text-on-accent) !important; }
.bg-royal     { background-color: var(--color-royal)  !important; color: var(--text-on-accent) !important; }
.bg-green     { background-color: var(--color-green)  !important; }

/* Legacy aliases */
.bg-ocean     { background-color: var(--color-navy)      !important; }
.bg-emerald   { background-color: var(--color-green)     !important; }
.bg-golden    { background-color: var(--color-gold)      !important; color: var(--text-on-accent) !important; }
.bg-blue      { background-color: var(--color-navy)      !important; }
.bg-orange    { background-color: var(--color-gold)      !important; color: var(--text-on-accent) !important; }
.bg-teal      { background-color: var(--color-navy-soft) !important; }
.bg-red       { background-color: var(--color-error)     !important; color: var(--text-on-accent) !important; }

.bg-ocean-light   { background-color: var(--bg-ocean-light)   !important; }
.bg-royal-light   { background-color: var(--color-royal-bg)   !important; }
.bg-emerald-light { background-color: var(--color-green-bg)   !important; }
.bg-golden-light  { background-color: var(--color-gold-bg)    !important; }

/* Gradient backgrounds */
.bg-gradient         { background: var(--gradient-primary)  !important; }
.bg-gradient-navy    { background: var(--gradient-primary)  !important; }
.bg-gradient-ocean   { background: var(--gradient-primary)  !important; }
.bg-gradient-gold    { background: var(--gradient-gold)     !important; color: var(--text-on-accent) !important; }
.bg-gradient-golden  { background: var(--gradient-gold)     !important; color: var(--text-on-accent) !important; }
.bg-gradient-emerald { background: var(--gradient-green)    !important; color: var(--text-on-accent) !important; }
.bg-gradient-premium { background: var(--gradient-premium)  !important; }
.bg-gradient-hero    { background: var(--gradient-hero)     !important; }
.bg-gradient-primary { background: var(--gradient-primary)  !important; }
.bg-gradient-blue    { background: var(--gradient-primary)  !important; }
.bg-gradient-orange  { background: var(--gradient-gold)     !important; color: var(--text-on-accent) !important; }
.bg-gradient-teal    { background: var(--gradient-primary)  !important; }

/* Texture backgrounds */
.bg-texture-subtle {
  background: var(--bg-primary);
}
.bg-ocean-pattern {
  background: var(--bg-primary);
}
.bg-waves-pattern {
  background: var(--bg-primary);
}

/* Glass morphism */
.glass-ocean   { background: var(--glass-ocean);   backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(var(--color-gold-rgb), 0.10);  border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.glass-royal   { background: var(--glass-royal);   backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(var(--color-royal-rgb), 0.16);  border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.glass-emerald { background: var(--glass-emerald); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(var(--color-green-rgb), 0.12);  border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.glass-golden  { background: var(--glass-golden);  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(var(--color-gold-rgb), 0.18);  border-radius: var(--radius-2xl); box-shadow: var(--shadow-gold); }

/* Content containers */
.content-ocean {
  max-width: 900px; margin: 0 auto;
  padding: var(--spacing-10);
  background: var(--gradient-card);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-premium);
  border: 1px solid var(--border-gold);
}
.content-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-white-20);
}

/* ============================================================
   21. UTILITY: BORDERS
   ============================================================ */
.border   { border: 1px solid var(--border-primary) !important; }
.border-0 { border: 0 !important; }
.border-2 { border: 2px solid var(--border-primary) !important; }

.border-primary  { border-color: var(--border-primary) !important; }
.border-secondary{ border-color: var(--border-secondary) !important; }
.border-ocean    { border-color: var(--color-navy)  !important; }
.border-royal    { border-color: var(--color-royal) !important; }
.border-emerald  { border-color: var(--color-green) !important; }
.border-golden   { border-color: var(--color-gold)  !important; }
.border-blue     { border-color: var(--color-navy)  !important; }
.border-orange   { border-color: var(--color-gold)  !important; }
.border-teal     { border-color: var(--color-navy-soft) !important; }

.border-modern        { border: 2px solid var(--color-royal) !important; border-radius: var(--radius-xl) !important; }
.border-golden-accent { border: 2px solid var(--color-gold) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-sm) !important; }

/* ============================================================
   22. UTILITY: SHADOWS
   ============================================================ */
.shadow-none { box-shadow: none !important; }
.shadow-xs   { box-shadow: var(--shadow-xs) !important; }
.shadow-sm   { box-shadow: var(--shadow-sm) !important; }
.shadow-md   { box-shadow: var(--shadow-md) !important; }
.shadow-lg   { box-shadow: var(--shadow-lg) !important; }
.shadow-xl   { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl  { box-shadow: var(--shadow-2xl) !important; }

.shadow-ocean  { box-shadow: var(--shadow-navy)  !important; }
.shadow-royal  { box-shadow: var(--shadow-royal) !important; }
.shadow-emerald{ box-shadow: var(--shadow-green) !important; }
.shadow-golden { box-shadow: var(--shadow-gold)  !important; }
.shadow-blue   { box-shadow: var(--shadow-navy)  !important; }
.shadow-orange { box-shadow: var(--shadow-gold)  !important; }
.shadow-teal   { box-shadow: var(--shadow-navy)  !important; }

/* ============================================================
   23. UTILITY: SPACING & MISC
   ============================================================ */
.mt-auto  { margin-top: auto; }
.mb-0     { margin-bottom: 0 !important; }
.p-0      { padding: 0 !important; }
.w-100    { width: 100%; }
.h-100    { height: 100%; }
.overflow-hidden  { overflow: hidden; }
.position-relative{ position: relative; }
.position-absolute{ position: absolute; }
.d-none   { display: none !important; }
.d-block  { display: block; }
.d-flex   { display: flex; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.d-print-none  { display: none !important; }
.d-print-block { display: block !important; }
.no-print      { display: none !important; }

/* Icon boxes */
.icon-ocean {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem;
  background: var(--gradient-primary);
  color: var(--text-white);
  border-radius: var(--radius-2xl);
  font-size: var(--text-xl);
  box-shadow: var(--shadow-navy);
  transition: var(--transition-elegant);
}
.icon-ocean:hover   { transform: scale(1.1) rotate(5deg); box-shadow: var(--glow-navy); }
.icon-royal   { background: var(--gradient-royal);  color: var(--text-on-accent); box-shadow: var(--shadow-royal); }
.icon-royal:hover   { box-shadow: var(--glow-royal); }
.icon-emerald { background: var(--gradient-green);  box-shadow: var(--shadow-green); }
.icon-emerald:hover { box-shadow: var(--glow-green); }
.icon-golden  { background: var(--gradient-gold); color: var(--text-on-accent); box-shadow: var(--shadow-gold); }
.icon-golden:hover  { box-shadow: var(--glow-gold); }
.icon-glass {
  background: var(--gradient-glass); backdrop-filter: blur(12px);
  color: var(--text-primary);
  border: 1px solid var(--color-white-20);
  box-shadow: var(--shadow-md);
}

/* Image effects */
.image-ocean {
  border-radius: var(--radius-2xl); overflow: hidden;
  box-shadow: var(--shadow-lg); transition: var(--transition-premium);
  border: 2px solid transparent;
}
.image-ocean:hover  { transform: scale(1.02) rotate(1deg); box-shadow: var(--glow-navy); border-color: var(--color-navy-light); }
.image-golden {
  border-radius: var(--radius-xl);
  border: 3px solid var(--color-gold);
  box-shadow: var(--shadow-gold);
  transition: var(--transition-elegant);
}
.image-golden:hover { box-shadow: var(--glow-gold); transform: scale(1.02); }

/* Hover helpers */
.hover-lift       { transition: var(--transition-elegant); }
.hover-lift:hover { transform: translateY(-8px); }
.hover-scale      { transition: var(--transition-elegant); }
.hover-scale:hover{ transform: scale(1.05); }
.hover-glow:hover { box-shadow: var(--glow-navy); }

/* Overlay effects */
.overlay-ocean {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--gradient-overlay);
  opacity: 0; transition: var(--transition-premium);
  border-radius: inherit;
}
.overlay-ocean:hover { opacity: 1; }
.overlay-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-white-20);
}

/* Float/parallax */
.float-ocean   { animation: waveMotion 8s ease-in-out infinite; }
.float-emerald { animation: waveMotion 6s ease-in-out infinite reverse; }
.float-golden  { animation: waveMotion 10s ease-in-out infinite; animation-delay: -2s; }
.parallax-ocean {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.parallax-ocean::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--gradient-overlay);
  opacity: 0.7;
}

/* Special */
.floating-cta {
  position: fixed;
  bottom: var(--spacing-8); right: var(--spacing-8);
  z-index: var(--z-index-sticky);
  animation: bounce 2s infinite;
}
.scroll-indicator {
  position: absolute;
  bottom: var(--spacing-8); left: 50%;
  transform: translateX(-50%);
  color: var(--text-white);
  font-size: var(--text-2xl);
  animation: bounce 2s infinite;
}

/* RTL Support */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .section-label::before { right: auto; left: 100%; background: linear-gradient(90deg, var(--color-gold), transparent); }
[dir="rtl"] .section-label::after  { left: auto; right: 100%; background: linear-gradient(90deg, transparent, var(--color-gold)); }

/* ============================================================
   24. ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes waveMotion {
  0%, 100% { transform: translateY(0px)   rotate(0deg); }
  25%       { transform: translateY(-5px) rotate(1deg); }
  75%       { transform: translateY(3px)  rotate(-1deg); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-gold-rgb), 0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(var(--color-gold-rgb), 0); }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
  40%, 43%                 { transform: translate3d(0,-20px,0); }
  70%                      { transform: translate3d(0,-10px,0); }
  90%                      { transform: translate3d(0,-4px,0); }
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes ripple {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}
@keyframes slideIn {
  from { width: 0; }
  to   { width: 80px; }
}
@keyframes autoGrow {
  0%   { width: 10%; }
  50%  { width: 82%; }
  100% { width: 10%; }
}

/* Animation utility classes */
.animate-fade-up      { animation: fadeInUp 0.8s ease-out; }
.animate-fade-down    { animation: fadeInDown 0.8s ease-out; }
.animate-fade-scale   { animation: fadeInScale 0.6s ease-out; }
.animate-slide-left   { animation: slideInLeft 0.7s ease-out; }
.animate-slide-right  { animation: slideInRight 0.7s ease-out; }
.animate-wave         { animation: waveMotion 4s ease-in-out infinite; }
.animate-pulse        { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce       { animation: bounce 1s infinite; }
.animate-rotate       { animation: rotate 2s linear infinite; }
.animate-float        { animation: float 3s ease-in-out infinite; }
.animate-fadeInUp     { animation: fadeInUp 0.6s ease forwards; }
.animate-fadeIn       { animation: fadeInScale 0.4s ease forwards; }
.animate-pulse-gold   { animation: pulse-gold 2s ease infinite; }
.animate-shimmer {
  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ============================================================
   25. PERFORMANCE OPTIMIZATIONS
   ============================================================ */
img { max-width: 100%; height: auto; }

.btn, .card, .animate-wave, .animate-fade-up,
.animate-slide-left, .animate-slide-right, .animate-fade-scale,
.hover-lift, .hover-scale {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ============================================================
   26. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb { background: var(--color-navy-light); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-gold-dark); }

/* ============================================================
   27. SELECTION & FOCUS
   ============================================================ */
::selection      { background: rgba(var(--color-gold-rgb), 0.35); color: var(--text-primary); }
::-moz-selection { background: rgba(var(--color-gold-rgb), 0.35); color: var(--text-primary); }

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

/* ============================================================
   28. RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1200px) {
  :root { --container-max: 100%; }
  :root {
    --text-3xl: 1.6rem;
    --text-4xl: 2rem;
    --text-5xl: 2.5rem;
  }
}

@media (max-width: 992px) {
  :root {
    --text-2xl: 1.3rem;
    --text-3xl: 1.5rem;
    --text-4xl: 1.9rem;
    --text-5xl: 2.2rem;
  }
  .section    { padding: var(--spacing-16) 0; }
  .section-lg { padding: var(--spacing-20) 0; }
  .btn { padding: var(--spacing-3) var(--spacing-6); }
  .card-body  { padding: var(--spacing-5); }
}

@media (max-width: 768px) {
  :root {
    --header-height-top:   0px;
    --header-height-nav:   60px;
    --header-height-total: 60px;
    --text-xl:   1.15rem;
    --text-2xl:  1.3rem;
    --text-3xl:  1.5rem;
    --text-4xl:  1.7rem;
    --text-5xl:  2rem;
  }
  .container  { padding: 0 var(--spacing-4); }
  .section    { padding: var(--spacing-12) 0; }
  .section-sm { padding: var(--spacing-8) 0; }
  .btn {
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--text-sm);
    width: 100%;
    margin-bottom: var(--spacing-2);
  }
  .card { margin-bottom: var(--spacing-4); }
  .card-body { padding: var(--spacing-4); }
}

@media (max-width: 480px) {
  :root {
    --text-lg:   1.05rem;
    --text-xl:   1.15rem;
    --text-2xl:  1.25rem;
    --text-3xl:  1.45rem;
    --text-4xl:  1.65rem;
  }
  .container { padding: 0 var(--spacing-3); }
  .btn-lg { padding: var(--spacing-3) var(--spacing-6); font-size: var(--text-sm); }
}

/* ============================================================
   29. ACCESSIBILITY
   ============================================================ */
@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;
  }
}

@media (prefers-contrast: high) {
  .card      { border: 2px solid var(--color-navy) !important; }
  .form-control, .form-select { border: 2px solid var(--border-primary) !important; }
  .btn       { border: 2px solid currentColor !important; }
}

/* ============================================================
   30. THEME NOTE
   Samora Ceylon is a single dark theme (Emerald Royale) by design and
   does not switch with the visitor's OS light-mode setting. Print styles
   (Section 31) stay black-on-white, as expected for printed output.
   ============================================================ */

/* ============================================================
   31. PRINT STYLES
   ============================================================ */
@media print {
  *, *::before, *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  body { font-size: 12pt; color: #000 !important; background: #fff !important; }
  .btn {
    border: 2px solid #000 !important;
    background: transparent !important;
    color: #000 !important;
  }
  .card { border: 1px solid #000 !important; break-inside: avoid; }
  h1, h2, h3, h4, h5, h6 { color: #000 !important; break-after: avoid; background: none !important; -webkit-text-fill-color: initial !important; }
  .no-print, .d-print-none { display: none !important; }
  .d-print-block { display: block !important; }
}
/* ── WhatsApp & Back-to-Top fixed element safety net ── */
/* z-index 10001 — above loading-overlay(9999) and error-message(10000) */
#tt-wa-widget,
#tt-back-to-top {
    position: fixed !important;
    transform: none !important;
    filter: none !important;
    contain: none !important;
    will-change: auto !important;
}
#tt-wa-widget   { right: 28px !important; bottom: 28px  !important; z-index: 10001 !important; }
#tt-back-to-top { right: 28px !important; bottom: 104px !important; z-index: 10001 !important; }

/* ============================================================
   32. EMERALD ROYALE SKY
   Shared sky utilities used by templates (the starfield of the previous
   theme has been removed).
   ============================================================ */
/* Horizon glow: low warm light along the bottom of a hero or panel */
.tw-sky-glow {
  background-image: var(--gradient-hero);
  background-repeat: no-repeat;
}

/* The one glowing italic word inside a headline */
.tw-glow-word {
  font-family: var(--font-elegant);
  font-style: italic;
  color: var(--color-gold-pale);
  text-shadow: none;
}

/* Premium rounded card: night gradient, hairline border, glow on hover */
.tw-card {
  background: var(--gradient-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  transition: var(--transition-elegant);
}
.tw-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--color-gold-rgb), 0.55);
  box-shadow: var(--shadow-premium);
}

/* Rounded photo frame: whole rectangle visible, no overlay */
.tw-photo {
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .tw-card:hover { transform: none; }
}

/* ============================================================
   33. COMPANY PAGES · PREMIUM TOKENS (v7.2)
   Shared by company.css and every company-<page>.css file.
   Child files reference ONLY these names, never raw values.
   ============================================================ */
:root {
  /* Section rhythm */
  --coy-section-pad:        var(--spacing-24);
  --coy-section-pad-sm:     var(--spacing-16);
  --coy-section-pad-mobile: var(--spacing-16);
  --coy-head-gap:           var(--spacing-14);
  --coy-grid-gap:           var(--spacing-6);
  --coy-measure:            44rem;
  --coy-measure-wide:       58rem;

  /* Surfaces */
  --coy-surface:            var(--gradient-card);
  --coy-surface-raised:     linear-gradient(180deg, #FFFFFF 0%, #FBF9F5 100%);
  --coy-surface-alt:        rgba(168, 131, 74, 0.04);
  --coy-glass:              rgba(255, 255, 255, 0.72);
  --coy-glass-strong:       rgba(255, 255, 255, 0.92);
  --coy-panel-glow:         radial-gradient(ellipse 60% 55% at 50% 0%, rgba(168, 131, 74, 0.08) 0%, transparent 70%);
  --coy-panel-glow-bottom:  radial-gradient(ellipse 70% 45% at 50% 100%, rgba(168, 131, 74, 0.08) 0%, transparent 70%);
  --coy-section-glow:       radial-gradient(ellipse 50% 40% at 85% 0%, rgba(168, 131, 74, 0.05) 0%, transparent 70%);

  /* Lines and borders */
  --coy-border:             var(--border-primary);
  --coy-border-soft:        rgba(18, 26, 23, 0.08);
  --coy-border-gold:        rgba(168, 131, 74, 0.35);
  --coy-border-gold-strong: rgba(168, 131, 74, 0.60);
  --coy-hairline:           linear-gradient(90deg, transparent 0%, rgba(168, 131, 74, 0.70) 50%, transparent 100%);
  --coy-hairline-v:         linear-gradient(180deg, rgba(168, 131, 74, 0.75) 0%, rgba(168, 131, 74, 0.15) 100%);

  /* Shape */
  --coy-radius-card:        var(--radius-3xl);
  --coy-radius-photo:       var(--radius-2xl);
  --coy-radius-chip:        var(--radius-full);
  --coy-icon-size:          3.25rem;
  --coy-icon-size-sm:       2.5rem;

  /* Accent fills */
  --coy-icon-bg:            rgba(14, 59, 46, 0.06);
  --coy-icon-ring:          0 0 0 1px rgba(168, 131, 74, 0.40), 0 10px 26px -14px rgba(14, 59, 46, 0.35);
  --coy-gold-text:          var(--gradient-gold);
  --coy-number-glow:        none;
  --coy-card-shadow:        0 24px 50px -32px rgba(18, 26, 23, 0.22);
  --coy-card-shadow-hover:  0 30px 60px -30px rgba(14, 59, 46, 0.30), 0 0 0 1px rgba(168, 131, 74, 0.35);
  --coy-photo-shadow:       0 30px 60px -34px rgba(18, 26, 23, 0.35), 0 0 0 1px rgba(168, 131, 74, 0.25);

  /* Motion */
  --coy-reveal-shift:       28px;
  --coy-reveal-duration:    750ms;
  --coy-reveal-ease:        cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ============================================================
   END OF MAIN.CSS — Samora Ceylon v7.2.0 (Emerald Royale)
   www.samoraceylon.com
   Brand: Inbound Tour Operator & Tourist Transport · Mathugama, Sri Lanka
   Palette: White · Pearl · Royal emerald · Burnished gold · Onyx ink
   ============================================================ */


/* ============================================================
   33. PHOTO SURFACES (v8.2: + tour hero, day cards, package card images)
   Photographs keep their full colour and opacity. Wherever text
   sits on a photograph (page heroes, the home slider, image cards),
   the shared tokens switch to "text on photo" values: a light deep
   emerald scrim instead of the white wash, white headings, bright
   gold accents. Components keep using the same token names, so no
   component file needs its own colours.
   ============================================================ */
.hero-slideshow,
.fh-hero,
.tour-hero,
.day-card-header,
.day-image-wrap,
.ov-arrow,
.pm-card__img-wrapper,
.fsl-cell,
#featuredPackages .fp-card,
#destinations .dst-card,
.fwb-cell,
.fwb-dest__card,
.attr-detail-hero-wrapper,
.attr-breadcrumb,
.attr-card-img-wrapper,
.attr-card-category,
.pm-card__img-overlay,
.pm-card__img-footer,
.pm-card__duration,
.ov-caption,
.ov-day,
.pm-stats-bar {
  --color-navy-rgb:   var(--er-scrim-rgb);
  --color-white-rgb:  255, 255, 255;
  --text-white:       #FFFFFF;
  --text-primary:     #FFFFFF;
  --text-secondary:   rgba(255, 255, 255, 0.92);
  --text-muted:       rgba(255, 255, 255, 0.84);
  --text-light:       rgba(255, 255, 255, 0.84);
  --text-gold:        var(--er-gold-bright);
  --color-royal:      #F6F1E7;
  --color-royal-light:#FFFFFF;
  --color-gold-light: var(--er-gold-bright);
  --color-gold-pale:  var(--er-gold-soft);
  --color-green-light: var(--er-gold-soft);   /* v8.2: light chip text on photos */
  --color-white-95:   rgba(255, 255, 255, 0.95);
  --color-white-90:   rgba(255, 255, 255, 0.92);
  --color-white-85:   rgba(255, 255, 255, 0.90);
  --color-white-80:   rgba(255, 255, 255, 0.88);
  --color-white-75:   rgba(255, 255, 255, 0.86);
  --color-white-70:   rgba(255, 255, 255, 0.84);
  --color-white-65:   rgba(255, 255, 255, 0.82);
  --color-white-60:   rgba(255, 255, 255, 0.80);
  --color-white-55:   rgba(255, 255, 255, 0.78);
  --color-white-50:   rgba(255, 255, 255, 0.76);
  --color-white-45:   rgba(255, 255, 255, 0.70);
  --color-white-40:   rgba(255, 255, 255, 0.62);
  --color-white-35:   rgba(255, 255, 255, 0.50);
  --color-white-30:   rgba(255, 255, 255, 0.40);
  --color-white-25:   rgba(255, 255, 255, 0.32);
  --color-white-20:   rgba(255, 255, 255, 0.26);
  --color-white-18:   rgba(255, 255, 255, 0.22);
  --color-white-12:   rgba(255, 255, 255, 0.16);
  --color-white-10:   rgba(255, 255, 255, 0.14);
  --color-white-08:   rgba(255, 255, 255, 0.12);
  --color-white-05:   rgba(255, 255, 255, 0.08);
  /* v8.2: the "dark" overlay tokens read as a light wash in the
     daylight palette; on photos they become deep emerald scrims. */
  --color-dark-90:    rgba(var(--er-scrim-rgb), 0.92);
  --color-dark-80:    rgba(var(--er-scrim-rgb), 0.82);
  --color-dark-70:    rgba(var(--er-scrim-rgb), 0.72);
  --color-dark-50:    rgba(var(--er-scrim-rgb), 0.50);
  --color-dark-30:    rgba(var(--er-scrim-rgb), 0.30);
  --border-primary:   rgba(255, 255, 255, 0.22);
  --border-light:     rgba(255, 255, 255, 0.18);
  --border-gold:      rgba(var(--er-gold-bright-rgb), 0.55);
  /* Card surfaces inside a photo component (e.g. the text panel under
     the featured destination photo) become deep emerald, so the white
     text above always has full contrast. */
  --color-navy-card:  var(--er-emerald-deep);
  --color-navy-mid:   rgba(255, 255, 255, 0.08);
  --color-navy-light: rgba(255, 255, 255, 0.12);
  --color-navy-deep:  var(--er-emerald-night);
  --color-navy-abyss: var(--er-emerald-night);
  /* Accent buttons on photos and emerald panels turn metallic gold
     with emerald text, so they never vanish into the green. */
  --color-gold:       var(--er-gold-bright);
  --color-gold-dark:  var(--er-gold-antique);
  --text-on-accent:   var(--er-emerald-night);
  --gradient-gold:       var(--gradient-gold-metal);
  --gradient-gold-hover: var(--gradient-gold-metal);
  --gradient-button:     var(--gradient-gold-metal);
  --gradient-golden:     var(--gradient-gold-metal);
  --gradient-orange:     var(--gradient-gold-metal);
  --gradient-text:       var(--er-gold-bright);
  --gradient-warm:       var(--er-gold-bright);
  --gradient-overlay:    linear-gradient(180deg, rgba(var(--er-scrim-rgb), 0) 40%, rgba(var(--er-scrim-rgb), 0.85) 100%);
  --gradient-card:       var(--gradient-emerald-rich);
  --gradient-premium:    var(--gradient-emerald-rich);
  --gradient-depth:      var(--gradient-emerald-rich);
  --gradient-hero:       var(--gradient-emerald-rich);
  --gradient-glass:      rgba(var(--er-scrim-rgb), 0.55);
}
/* Photo frames sit on deep emerald, never on ivory: while a photo
   loads or two slides cross-fade, the gap reads as rich colour
   instead of a pale wash. */
.fsl-cell,
#featuredPackages .fp-card,
#destinations .dst-card,
.fwb-cell,
.fwb-dest__card,
.attr-card-img-wrapper,
.ov-caption {
  background-color: var(--er-emerald-deep);
}


/* ============================================================
   34. KICKER BAR (breadcrumb + quick links under a page hero)
   Used by contact, booking, online-payments, package-master and
   attr-master. A slim deep emerald band that continues the hero
   down into the page, with gold breadcrumbs and gold pill links.
   ============================================================ */
.coy-kicker {
  position: relative;
  background: linear-gradient(90deg, var(--er-emerald-night) 0%, var(--er-emerald-deep) 50%, var(--er-emerald-night) 100%);
  border-bottom: 1px solid rgba(var(--er-gold-bright-rgb), 0.35);
  box-shadow: 0 14px 30px -22px rgba(var(--er-scrim-rgb), 0.8);
}
.coy-kicker::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--er-gold-bright) 50%, transparent);
  background-size: 200% 100%;
  animation: coyKickerShimmer 7s linear infinite;
}
.coy-kicker-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--spacing-3) var(--spacing-6);
  padding-top: var(--spacing-3); padding-bottom: var(--spacing-3);
}
.coy-crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-2);
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--er-gold-soft);
}
.coy-crumbs a { color: var(--er-emerald-mist); text-decoration: none; transition: color .25s ease; }
.coy-crumbs a:hover { color: var(--er-gold-bright); }
.coy-crumbs i { font-size: .55rem; color: var(--er-gold-antique); }
.coy-crumbs [aria-current] { color: var(--er-gold-bright); }
.coy-kicker-links { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.coy-kicker-link {
  display: inline-flex; align-items: center; gap: var(--spacing-2);
  padding: .45rem 1rem;
  border: 1px solid rgba(var(--er-gold-bright-rgb), 0.45);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
  color: var(--er-pearl); text-decoration: none;
  background: rgba(var(--er-gold-bright-rgb), 0.06);
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .35s var(--ease-spring), box-shadow .3s ease;
}
.coy-kicker-link i { color: var(--er-gold-bright); transition: color .3s ease; }
.coy-kicker-link:hover {
  background: var(--gradient-gold-metal); color: var(--er-emerald-night);
  border-color: var(--er-gold-bright); transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(var(--er-gold-bright-rgb), 0.8);
}
.coy-kicker-link:hover i { color: var(--er-emerald-night); }
@keyframes coyKickerShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (max-width: 640px) {
  .coy-kicker-inner { justify-content: center; text-align: center; }
  .coy-crumbs { justify-content: center; }
  .coy-kicker-links { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .coy-kicker::after { animation: none; }
}

/* ============================================================
   35. MOTION
   Smooth page-to-page transitions (cross-document View
   Transitions, where supported): the page dissolves and rises
   while the header stays perfectly still. Ignored by browsers
   without support.
   ============================================================ */
@view-transition { navigation: auto; }
.tt-shell { view-transition-name: site-header; }
::view-transition-old(root) { animation: er-vt-out .32s var(--ease-silk) both; }
::view-transition-new(root) { animation: er-vt-in .55s var(--ease-silk) both; }
@keyframes er-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes er-vt-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}