/* ============================================================
   Tarawell Travels
   main.css — Centralized Design System — Single Source of Truth
   Version: 7.2.0 | www.tarawelltravels.com

   Brand: Tarawell Travels · Inbound Tour Operator & Tourist Transport
          Est. 2024 | Yatiyanthota, Sri Lanka
   Founder: Nuthara Himanshi

   Theme: GOLDEN NIGHT (dark), v7.1 Sunset Gold accents
   "Tara" means star in Sinhala. The site reads like stars seen on the
   darkest night: a neutral near-black sky, stars and accents in sunset
   gold and burnt orange, warm white text for readability. Photos and cards are
   rounded rectangles; no arch frames and no dark overlays on photos.

   Token names are unchanged from v6 so every child CSS file keeps working:
     --color-navy-*   night backgrounds (near-black with a blue cast)
     --color-gold-*   primary accent, SUNSET GOLD / BURNT ORANGE
     --color-royal-*  pearl text scale
     --color-green-*  muted night blue-grey (structure, secondary text)

   ⚠️  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,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Manrope:wght@300;400;500;600;700;800&display=swap');

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

  /* ─── Tarawell Travels GOLDEN NIGHT PALETTE ───────────────── */
  /*
     Night     : near-black with a faint blue cast, for backgrounds and panels
     Sunset gold: primary accent (token family --color-gold-*), buttons, links, glows
     Burnt orange: deep tone (--color-gold-darker) for gradients and depth
     Pearl     : body and heading text (token family --color-royal-*)
     Night grey: muted blue-grey for structure and secondary text (--color-green-*)
  */

  /* Night (Primary / Backgrounds): near-black with a blue cast, used for page, panels and cards */
  --color-navy:           #070707;
  --color-navy-deep:      #020202;
  --color-navy-abyss:     #000000;
  --color-navy-card:      #0C0C0C;
  --color-navy-mid:       #121212;
  --color-navy-light:     #1A1A1A;
  --color-navy-soft:      #2A3A66;
  --color-navy-border:    #2A2A2A;
  --color-navy-rgb:       7, 7, 7;

  /* Sunset gold and burnt orange (Primary Accent / CTA). Token names kept as --color-gold-* for structural compatibility. */
  --color-gold:           #F2B33D;
  --color-gold-light:     #FFD27A;
  --color-gold-pale:      #FFF0D2;
  --color-gold-dark:      #E8962A;
  --color-gold-darker:    #E07A1F;
  --color-gold-glow:      rgba(232, 150, 42, 0.28);
  --color-gold-glow-sm:   rgba(232, 150, 42, 0.14);
  --color-gold-bg:        rgba(224, 122, 31, 0.12);
  --color-gold-bg-hover:  rgba(224, 122, 31, 0.20);
  --color-gold-rgb:       242, 179, 61;

  /* Pearl (text scale). Token names kept as --color-royal-* for structural compatibility. */
  --color-royal:          #FBF6EE;
  --color-royal-light:    #FFFFFF;
  --color-royal-pale:     #FFF0D2;
  --color-royal-dark:     #CDBFAE;
  --color-royal-darker:   #A2937F;
  --color-royal-glow:     rgba(255, 240, 210, 0.20);
  --color-royal-glow-sm:  rgba(255, 240, 210, 0.10);
  --color-royal-bg:       rgba(255, 240, 210, 0.06);
  --color-royal-bg-hover: rgba(255, 240, 210, 0.12);
  --color-royal-rgb:      251, 246, 238;

  /* Night grey (tertiary, structure and secondary text). Token names kept as --color-green-* for structural compatibility. */
  --color-green:          #6E6455;
  --color-green-light:    #CDBFAE;
  --color-green-pale:     rgba(110, 100, 85, 0.18);
  --color-green-bg:       rgba(110, 100, 85, 0.08);
  --color-green-dark:     #3A4566;
  --color-green-rgb:      110, 100, 85;

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

  /* v7.0 additions used by child files */
  --color-white-rgb:      255, 255, 255;
  --color-white-85:       rgba(255, 255, 255, 0.85);
  --color-white-55:       rgba(255, 255, 255, 0.55);
  --color-white-45:       rgba(255, 255, 255, 0.45);
  --color-white-25:       rgba(255, 255, 255, 0.25);
  --z-index-40:           40;
  --brand-facebook:       #1877F2;
  --wa-green-bright:      #5FE38A;
  --color-white-95:       rgba(255, 255, 255, 0.95);
  --color-white-90:       rgba(255, 255, 255, 0.90);
  --color-white-80:       rgba(255, 255, 255, 0.80);
  --color-white-75:       rgba(255, 255, 255, 0.75);
  --color-white-70:       rgba(255, 255, 255, 0.70);
  --color-white-65:       rgba(255, 255, 255, 0.65);
  --color-white-60:       rgba(255, 255, 255, 0.60);
  --color-white-50:       rgba(255, 255, 255, 0.50);
  --color-white-40:       rgba(255, 255, 255, 0.40);
  --color-white-35:       rgba(255, 255, 255, 0.35);
  --color-white-30:       rgba(255, 255, 255, 0.30);
  --color-white-20:       rgba(255, 255, 255, 0.20);
  --color-white-18:       rgba(255, 255, 255, 0.18);
  --color-white-12:       rgba(255, 255, 255, 0.12);
  --color-white-10:       rgba(255, 255, 255, 0.10);
  --color-white-08:       rgba(255, 255, 255, 0.08);
  --color-white-05:       rgba(255, 255, 255, 0.05);

  /* Gray Scale — neutral scale, no warm cast (50 = near-white, 900 = near-black) */
  --color-gray-50:        #F2F5FC;
  --color-gray-100:       #E2E8F5;
  --color-gray-200:       #C9D2E6;
  --color-gray-300:       #CDBFAE;
  --color-gray-400:       #A2937F;
  --color-gray-500:       #6E6455;
  --color-gray-600:       #3A4566;
  --color-gray-700:       #1E2A47;
  --color-gray-800:       #0C1530;
  --color-gray-900:       #050A1A;

  /* Dark Overlay Scale — onyx-based, for photo/hero overlays that still need dark-on-image legibility */
  --color-dark-90:        rgba(0, 1, 5, 0.90);
  --color-dark-80:        rgba(0, 1, 5, 0.80);
  --color-dark-70:        rgba(0, 1, 5, 0.68);
  --color-dark-50:        rgba(0, 1, 5, 0.48);
  --color-dark-30:        rgba(0, 1, 5, 0.28);

  /* ─── SEMANTIC / STATUS COLORS, bright enough to read on the night background ─── */
  --color-success:        #4C9A5B;
  --color-success-light:  rgba(var(--color-success-rgb), 0.16);
  --color-success-dark:   #3A7645;
  --color-success-rgb:    76, 154, 91;

  --color-warning:        #E0B04A;
  --color-warning-light:  rgba(224, 176, 74, 0.16);
  --color-warning-dark:   #B08A36;
  --color-warning-rgb:    224, 176, 74;

  --color-error:          #C1495A;
  --color-error-light:    rgba(var(--color-error-rgb), 0.16);
  --color-error-dark:     #8F3543;
  --color-error-text:     #C1495A;
  --color-error-rgb:      193, 73, 90;

  --color-info:           #F2B33D;
  --color-info-light:     rgba(242, 179, 61, 0.16);
  --color-info-dark:      #E8962A;
  --color-info-rgb:       242, 179, 61;

  /* ─── BACKGROUND TOKENS, night black with a faint blue cast ────── */
  --bg-primary:           #020202;
  --bg-secondary:         #0C0C0C;
  --bg-tertiary:          #121212;
  --bg-dark:              var(--color-navy-abyss);
  --bg-overlay:           rgba(0, 1, 5, 0.72);
  --bg-overlay-light:     rgba(0, 1, 5, 0.40);
  --bg-gold-light:        rgba(224, 122, 31, 0.08);
  --bg-green-light:       rgba(110, 100, 85, 0.06);
  --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:         #6E6455;
  --text-white:           #ffffff;
  --text-gold:            var(--color-gold);
  --text-navy:            var(--color-navy);
  --text-green:           var(--color-green-dark);

  /* ─── BORDER TOKENS — dark neutral hairlines for the jet-black page ─ */
  --border-primary:       #2A2A2A;
  --border-secondary:     #1E1E1E;
  --border-light:         rgba(var(--color-royal-rgb), 0.12);
  --border-gold:          rgba(232, 150, 42, 0.40);
  --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, #020202 0%, #070707 60%, #0E0E0E 100%);
  --gradient-gold:        linear-gradient(135deg, #FFC24D 0%, #F29A2E 45%, #E07A1F 75%, #B4531A 100%);
  --gradient-gold-hover:  linear-gradient(135deg, #F2B33D 0%, #E8962A 45%, #F29A2E 75%, #E07A1F 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:        radial-gradient(ellipse 70% 32% at 50% 100%, rgba(224, 122, 31, 0.42) 0%, rgba(224, 122, 31, 0.12) 45%, transparent 75%);
  --gradient-depth:       linear-gradient(180deg, #020202 0%, #0E0E0E 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(0, 1, 5, 0) 0%, rgba(0, 1, 5, 0.82) 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, #121212 0%, #0C0C0C 100%);
  /* Card fill — flat dark surface, one step above the page */
  --gradient-card:        linear-gradient(180deg, #121212 0%, #0C0C0C 100%);
  /* Glass effect — flat translucent black, paired with backdrop-filter blur */
  --gradient-glass:       rgba(3, 8, 22, 0.62);
  --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(0, 0, 0, 0.45);
  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.50);
  --shadow-md:            0 2px 8px rgba(0, 0, 0, 0.55);
  --shadow-lg:            0 6px 18px rgba(0, 0, 0, 0.60);
  --shadow-xl:            0 12px 30px rgba(0, 0, 0, 0.65);
  --shadow-2xl:           0 20px 44px rgba(0, 0, 0, 0.70);
  --shadow-inner:         inset 0 1px 4px rgba(0, 0, 0, 0.40);
  --shadow-premium:       0 30px 60px -28px rgba(232, 150, 42, 0.55);

  /* Brand shadows — thin definition, not glow */
  --shadow-gold:          0 10px 34px -12px rgba(232, 150, 42, 0.80);
  --shadow-gold-lg:       0 14px 40px -10px rgba(232, 150, 42, 0.95);
  --shadow-navy:          0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-royal:         0 4px 14px rgba(var(--color-royal-rgb), 0.16);
  --shadow-green:         0 2px 10px rgba(110, 100, 85, 0.25);

  /* Glow aliases — used sparingly on hover, kept subtle */
  --glow-navy:            0 6px 20px rgba(0, 0, 0, 0.65);
  --glow-gold:            0 0 0 6px rgba(232, 150, 42, 0.18), 0 14px 40px -10px rgba(232, 150, 42, 0.90);
  --glow-royal:           0 6px 20px rgba(var(--color-royal-rgb), 0.22);
  --glow-green:           0 6px 18px rgba(110, 100, 85, 0.25);
  --glow-premium:         0 30px 60px -28px rgba(232, 150, 42, 0.65);
  --glow-soft:            0 0 30px -12px rgba(232, 150, 42, 0.70);

  --shadow-luxury:        0 30px 60px -28px rgba(232, 150, 42, 0.60), 0 0 0 1px rgba(232, 150, 42, 0.25);

  /* ─── 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:         'Manrope', '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);
  --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 Tarawell Travels 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:            #FBF6EE;
  --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(224, 122, 31, 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, #020202 0%, #0E0E0E 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.06);
  --glass-royal:          rgba(var(--color-royal-rgb), 0.10);
  --glass-emerald:        rgba(110, 100, 85, 0.08);
  --glass-golden:         rgba(224, 122, 31, 0.12);

  /* 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(255, 255, 255, 0.85);

  /* 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:     #F2B33D;
  --slide-interval:       5000ms;

  /* Font accent alias — labels and eyebrows use Manrope uppercase */
  --font-accent:          var(--font-primary);
  --font-label:           var(--font-primary);

  /* 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:     0 1px 4px rgba(0, 0, 0, 0.35);
  --text-shadow-medium:   0 2px 8px rgba(0, 0, 0, 0.45);
  --text-shadow-strong:   0 4px 16px rgba(0, 0, 0, 0.55);

  /* 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: 0 0 8px var(--color-gold-glow); }

/* 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;
  /* v7.1: sunset gold #F2B33D reads at about 11:1 on night black; no darker
     variant needed now that the whole theme is dark by design. */
  color: var(--color-gold);
  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, var(--color-gold));
}
.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, var(--color-gold), 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);
}

.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 {
  /* v7.1: sunset gold on night black, no light-theme workaround needed. */
  color: var(--color-gold);
  font-style: normal;
}
.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);
}
.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(--color-white); }
.section-navy  { background: var(--color-navy-abyss); color: var(--color-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 — sunset gold gradient pill with a warm glow, dark text */
.btn-primary,
.btn-gold,
.btn-cta,
.btn-golden {
  background: var(--gradient-gold);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  color: var(--color-navy-deep);
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  font-weight: var(--font-weight-bold);
}
.btn-primary:hover,
.btn-gold:hover,
.btn-cta:hover,
.btn-golden:hover {
  background: var(--gradient-gold-hover);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: var(--glow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: var(--color-navy-deep);
}
.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(--color-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(--color-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(--color-white);
  box-shadow: var(--shadow-royal);
}
.btn-royal:hover {
  background: var(--gradient-royal-hover);
  transform: translateY(-2px);
  box-shadow: var(--glow-royal);
  color: var(--color-white);
}

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

/* 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(--color-white);
  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(--color-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(--color-white);
  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(--color-white);
  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(--color-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(--color-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(--color-white);
}

/* Premium shimmer button */
.btn-premium {
  background: var(--gradient-premium);
  border: none;
  color: var(--color-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(--color-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(--color-white);
  transition: var(--transition-slow);
}
.card-dark:hover { border-color: var(--color-gold); box-shadow: var(--shadow-gold); }
.card-dark .card-title { color: var(--color-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(--color-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(--color-white);
  box-shadow: var(--shadow-gold);
}
.card-golden .card-title { color: var(--color-white); }
.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(--color-white);
  box-shadow: var(--shadow-royal);
}
.card-royal .card-title { color: var(--color-white); }
.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-white);
  box-shadow: var(--shadow-green);
}
.card-emerald .card-title { color: var(--color-white); }
.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(--color-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-white);
  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(--color-white); }
.badge-royal { background: var(--gradient-royal); color: var(--color-white); }
.badge-emerald { background: var(--gradient-green); color: var(--text-white); }
.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(--color-white);
  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(--color-navy)     !important; }
.text-navy      { color: var(--color-navy)     !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(--color-navy)       !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(--color-navy)       !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(--color-navy); text-shadow: 0 0 20px rgba(var(--color-navy-rgb), 0.4); }
.text-golden-glow { color: var(--color-gold-pale); text-shadow: 0 0 24px rgba(var(--color-gold-rgb), 0.55); }

/* 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; }
.bg-royal     { background-color: var(--color-royal)  !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; }
.bg-blue      { background-color: var(--color-navy)      !important; }
.bg-orange    { background-color: var(--color-gold)      !important; }
.bg-teal      { background-color: var(--color-navy-soft) !important; }
.bg-red       { background-color: var(--color-error)     !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; }
.bg-gradient-golden  { background: var(--gradient-gold)     !important; }
.bg-gradient-emerald { background: var(--gradient-green)    !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; }
.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(--color-white); 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(--color-white); 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(--color-navy);
  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(--color-navy-deep); }
::-moz-selection { background: rgba(var(--color-gold-rgb), 0.35); color: var(--color-navy-deep); }

: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
   Tarawell Travels is a single dark theme (Golden Night) 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. GOLDEN NIGHT SKY
   The live starfield canvas is created by main.js (one canvas per page,
   fixed behind all content). These rules position it and provide the
   shared sky utilities used by templates.
   ============================================================ */
:root {
  /* Star colours as "r, g, b" triplets, read by main.js for the starfield */
  --star-rgb-1: 255, 246, 228;
  --star-rgb-2: 255, 210, 122;
  --star-rgb-3: 232, 150, 42;
  --star-rgb-4: 224, 122, 31;
  --star-rgb-5: 255, 232, 190;
  --star-shoot-rgb: 255, 236, 200;
  --star-density: 2600;      /* px² of screen per star; lower = more stars */
  --star-shoot-every: 6000;  /* ms between shooting stars */
}

.tw-starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* 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: 0 0 24px rgba(var(--color-gold-rgb), 0.55);
}

/* 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, #161616 0%, #0E0E0E 100%);
  --coy-surface-alt:        rgba(255, 240, 210, 0.025);
  --coy-glass:              rgba(255, 255, 255, 0.035);
  --coy-glass-strong:       rgba(12, 12, 12, 0.72);
  --coy-panel-glow:         radial-gradient(ellipse 60% 55% at 50% 0%, rgba(224, 122, 31, 0.16) 0%, rgba(224, 122, 31, 0.04) 45%, transparent 75%);
  --coy-panel-glow-bottom:  radial-gradient(ellipse 70% 45% at 50% 100%, rgba(224, 122, 31, 0.18) 0%, transparent 70%);
  --coy-section-glow:       radial-gradient(ellipse 50% 40% at 85% 0%, rgba(242, 179, 61, 0.07) 0%, transparent 70%);

  /* Lines and borders */
  --coy-border:             var(--border-primary);
  --coy-border-soft:        rgba(255, 240, 210, 0.08);
  --coy-border-gold:        rgba(242, 179, 61, 0.28);
  --coy-border-gold-strong: rgba(242, 179, 61, 0.55);
  --coy-hairline:           linear-gradient(90deg, transparent 0%, rgba(242, 179, 61, 0.65) 50%, transparent 100%);
  --coy-hairline-v:         linear-gradient(180deg, rgba(242, 179, 61, 0.7) 0%, rgba(242, 179, 61, 0.12) 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(242, 179, 61, 0.10);
  --coy-icon-ring:          0 0 0 1px rgba(242, 179, 61, 0.35), 0 10px 26px -12px rgba(232, 150, 42, 0.75);
  --coy-gold-text:          var(--gradient-gold);
  --coy-number-glow:        0 0 28px rgba(242, 179, 61, 0.35);
  --coy-card-shadow:        0 24px 50px -30px rgba(0, 0, 0, 0.9);
  --coy-card-shadow-hover:  0 30px 60px -28px rgba(232, 150, 42, 0.55), 0 0 0 1px rgba(242, 179, 61, 0.30);
  --coy-photo-shadow:       0 30px 60px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(242, 179, 61, 0.18);

  /* 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 — Tarawell Travels v7.2.0 (Golden Night)
   www.tarawelltravels.com
   Brand: Inbound Tour Operator & Tourist Transport · Yatiyanthota, Sri Lanka
   Palette: Night black · Sunset gold · Burnt orange · Warm white
   ============================================================ */