/* =========================================================
   KEERTHI SHIKARA
   GLOBAL THEME
   BLACK × RED × GOLD × DEEP GREEN × IVORY
========================================================= */

:root {

   /* =====================================================
       KEERTHI SHIKARA
       BOAT INSPIRED GLOBAL COLOR SYSTEM
       BLACK × RED × GOLD × GREEN × IVORY
    ===================================================== */


   /* =====================================================
       BLACK
    ===================================================== */

   --color-black: #080A08;
   --color-black-soft: #111411;
   --color-black-deep: #050605;


   /* =====================================================
       DEEP GREEN
    ===================================================== */

   --color-backwater: #244D36;
   --color-green: #2E5E3F;
   --color-green-deep: #173C2B;
   --color-teal: var(--color-red);


   /* =====================================================
       RED
    ===================================================== */

   --color-red: #C72C1C;
   --color-red-dark: #8E1E16;
   --color-red-soft: #E04A2A;


   /* =====================================================
       GOLD
    ===================================================== */

   --color-gold: #D8A928;
   --color-gold-bright: #F0C94A;
   --color-gold-soft: #E4BD45;


   /* =====================================================
       IVORY / WHITE
    ===================================================== */

   --color-ivory: #F6F1E5;
   --color-white: #FFFDF8;
   --color-ivory-muted: #D8D1C2;


   /* =====================================================
       OLD VARIABLE COMPATIBILITY
       
       Your existing style.css uses these names.
       We keep them so we DON'T have to redesign
       or rewrite the entire style.css.
    ===================================================== */

   --color-sand: #CFC2A3;

   --color-charcoal: #080A08;

   --color-muted: #AAA69B;

   --color-green-soft: var(--color-green);
   --color-sage: #547357;

   --color-light-sage: #E1DCCF;


   /* =====================================================
       TYPOGRAPHY
    ===================================================== */

   --font-display: "Cormorant Garamond", Georgia, serif;
   --font-body: "Manrope", Arial, sans-serif;


   /* =====================================================
       SPACING
    ===================================================== */

   --space-xs: 0.5rem;
   --space-sm: 1rem;
   --space-md: 2rem;
   --space-lg: 4rem;
   --space-xl: 7rem;


   /* =====================================================
       TRANSITIONS
    ===================================================== */

   --transition-fast: 250ms cubic-bezier(.22, 1, .36, 1);
   --transition-smooth: 700ms cubic-bezier(.22, 1, .36, 1);
   --transition-cinematic: 1200ms cubic-bezier(.22, 1, .36, 1);


   /* =====================================================
       LAYOUT
    ===================================================== */

   --container-width: 1400px;
   --header-height: 100px;


   /* =====================================================
       SEMANTIC BACKGROUNDS
    ===================================================== */

   --bg-primary: var(--color-black);

   --bg-secondary: var(--color-green-deep);

   --bg-tertiary: var(--color-backwater);

   --bg-dark: var(--color-black-deep);

   --bg-green: var(--color-green);

   --bg-red: var(--color-red);

   --bg-light: var(--color-sand);

   --bg-white: var(--color-sand);


   /* =====================================================
       SEMANTIC TEXT
    ===================================================== */

   --text-primary: var(--color-ivory);

   --text-white: var(--color-white);

   --text-secondary: var(--color-ivory-muted);

   --text-muted: var(--color-muted);

   --text-gold: var(--color-gold);

   --text-red: var(--color-red-soft);

   --text-green: var(--color-teal);


   /* =====================================================
       ACCENTS
    ===================================================== */

   --accent-gold: var(--color-gold);

   --accent-gold-bright: var(--color-gold-bright);

   --accent-red: var(--color-red);

   --accent-red-dark: var(--color-red-dark);

   --accent-green: var(--color-backwater);


   /* =====================================================
       BORDERS
    ===================================================== */

   --border-light:
      rgba(247, 244, 236, 0.16);

   --border-white:
      rgba(255, 253, 248, 0.22);

   --border-gold:
      rgba(216, 169, 40, 0.48);

   --border-gold-strong:
      rgba(240, 201, 74, 0.72);

   --border-red:
      rgba(155, 41, 41, 0.55);

   --border-green:
      rgba(46, 94, 63, 0.55);


   /* =====================================================
       SHADOWS
    ===================================================== */

   --shadow-soft:
      0 10px 40px rgba(0, 0, 0, 0.22);

   --shadow-dark:
      0 20px 60px rgba(0, 0, 0, 0.45);

   --shadow-gold:
      0 10px 35px rgba(216, 169, 40, 0.14);

   --shadow-red:
      0 10px 35px rgba(155, 41, 41, 0.18);
}


/* =========================================================
   GLOBAL RESET SUPPORT
========================================================= */

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


/* =========================================================
   BODY
========================================================= */

html {
   scroll-behavior: smooth;
}

body {
   margin: 0;

   background: var(--bg-primary);
   color: var(--text-primary);

   font-family: var(--font-body);

   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0;

   font-family: var(--font-display);
   font-weight: 400;

   color: var(--text-primary);
}

p {
   margin: 0;

   font-family: var(--font-body);
   color: var(--text-muted);
}

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


/* =========================================================
   BUTTONS / FORM ELEMENTS
========================================================= */

button,
input,
textarea,
select {
   font: inherit;
}

button {
   border: 0;
   outline: none;
}


/* =========================================================
   SELECTION
========================================================= */

::selection {
   background: var(--color-gold);
   color: var(--color-black);
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
   width: 8px;
}

::-webkit-scrollbar-track {
   background: var(--color-black-deep);
}

::-webkit-scrollbar-thumb {
   background: var(--color-green-soft);
}

::-webkit-scrollbar-thumb:hover {
   background: var(--color-gold);
}


/* =========================================================
   UTILITY — DISPLAY FONT
========================================================= */

.font-display {
   font-family: var(--font-display);
}


/* =========================================================
   UTILITY — BODY FONT
========================================================= */

.font-body {
   font-family: var(--font-body);
}


/* =========================================================
   UTILITY — GOLD
========================================================= */

.text-gold {
   color: var(--color-gold);
}


/* =========================================================
   UTILITY — BRIGHT GOLD
========================================================= */

.text-gold-bright {
   color: var(--color-gold-bright);
}


/* =========================================================
   UTILITY — IVORY
========================================================= */

.text-ivory {
   color: var(--color-ivory);
}


/* =========================================================
   UTILITY — WHITE
========================================================= */

.text-white {
   color: var(--color-white);
}


/* =========================================================
   UTILITY — MUTED
========================================================= */

.text-muted {
   color: var(--color-muted);
}


/* =========================================================
   UTILITY — RED
========================================================= */

.text-red {
   color: var(--color-red-soft);
}


/* =========================================================
   UTILITY — GREEN
========================================================= */

.text-green {
   color: var(--color-green-soft);
}


/* =========================================================
   UTILITY — BLACK
========================================================= */

.bg-black {
   background: var(--color-black);
}


/* =========================================================
   UTILITY — DEEP BLACK
========================================================= */

.bg-black-deep {
   background: var(--color-black-deep);
}


/* =========================================================
   UTILITY — BACKWATER GREEN
========================================================= */

.bg-backwater {
   background: var(--color-backwater);
}


/* =========================================================
   UTILITY — DEEP GREEN
========================================================= */

.bg-green-deep {
   background: var(--color-green-deep);
}


/* =========================================================
   UTILITY — RED
========================================================= */

.bg-red {
   background: var(--color-red);
}


/* =========================================================
   UTILITY — GOLD
========================================================= */

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


/* =========================================================
   UTILITY — IVORY
========================================================= */

.bg-ivory {
   background: var(--color-ivory);
}


/* =========================================================
   UTILITY — WHITE
========================================================= */

.bg-white {
   background: var(--color-white);
}


/* =========================================================
   BOAT THEME
   ---------------------------------------------------------
   Kept as semantic aliases so existing Boat Collection
   styles continue working without modification.
========================================================= */

.backwaters-section {

   --boat-black: var(--color-black);
   --boat-black-soft: var(--color-black-soft);

   --boat-green: var(--color-green);
   --boat-green-deep: var(--color-green-deep);

   --boat-red: var(--color-red);
   --boat-red-dark: var(--color-red-dark);

   --boat-gold: var(--color-gold);
   --boat-gold-soft: var(--color-gold-soft);

   --boat-ivory: var(--color-ivory);
   --boat-ivory-muted: var(--color-ivory-muted);
}


/* =========================================================
   RESPONSIVE ROOT ADJUSTMENTS
========================================================= */

@media (max-width: 768px) {

   :root {
      --space-lg: 3rem;
      --space-xl: 5rem;

      --header-height: 80px;
   }
}


@media (max-width: 480px) {

   :root {
      --space-md: 1.5rem;
      --space-lg: 2.5rem;
      --space-xl: 4rem;
   }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

   html {
      scroll-behavior: auto;
   }

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

/* =========================================================
   FINAL BOAT COLOR PALETTE LOCK
   Derived from the Keerthi Shikara boat photo:
   BLACK HULL / RED BODY / GOLD-YELLOW TRIM /
   DEEP GREEN ROOF / IVORY-WHITE DETAILS
========================================================= */
:root {
   --color-black: #0A0A09;
   --color-black-soft: #121310;
   --color-black-deep: #050504;

   --color-backwater: #244D36;
   --color-green: #2E5E3F;
   --color-green-deep: #173C2B;
   --color-green-soft: #3F7650;

   --color-red: #C72C1C;
   --color-red-dark: #8E1E16;
   --color-red-soft: #E04A2A;

   --color-gold: #D8A928;
   --color-gold-bright: #F0C94A;
   --color-gold-soft: #E4BD45;

   --color-ivory: #F6F1E5;
   --color-white: #FFFDF8;
   --color-ivory-muted: #D8D1C2;

   --color-sand: #CFC2A3;
   --color-charcoal: #0A0A09;
   --color-muted: #AAA69B;
   --color-sage: #547357;
   --color-light-sage: #E1DCCF;

   --bg-primary: #0A0A09;
   --bg-secondary: #173C2B;
   --bg-tertiary: #244D36;
   --bg-dark: #050504;
   --bg-green: #2E5E3F;
   --bg-red: #C72C1C;
   --bg-light: #F1E9D8;
   --bg-white: #FFFDF8;

   --text-primary: #F6F1E5;
   --text-white: #FFFDF8;
   --text-secondary: #D8D1C2;
   --text-muted: #AAA69B;
   --text-gold: #D8A928;
   --text-red: #E04A2A;
   --text-green: #2E5E3F;

   --accent-gold: #D8A928;
   --accent-gold-bright: #F0C94A;
   --accent-red: #C72C1C;
   --accent-red-dark: #8E1E16;
   --accent-green: #244D36;

   --border-light: rgba(246,241,229,.16);
   --border-white: rgba(255,253,248,.22);
   --border-gold: rgba(216,169,40,.52);
   --border-gold-strong: rgba(240,201,74,.76);
   --border-red: rgba(199,44,28,.58);
   --border-green: rgba(46,94,63,.58);
}


/* KEERTHI SHIKARA — MAP VISIBILITY FIX */
.contact-map {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    background: #dfe5df;
}
.keerti-location-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 420px;
    z-index: 1;
    background: #dfe5df;
}
.keerti-location-map .leaflet-pane,
.keerti-location-map .leaflet-control-container {
    z-index: 400;
}
.keerti-location-map .leaflet-tile-pane {
    z-index: 200;
}
.map-location-card {
    z-index: 1000 !important;
}
@media (max-width: 768px) {
    .contact-map,
    .keerti-location-map {
        min-height: 300px;
    }
}