/* Base, fonts, and global background */
:root{
    --stone-50:#FAFAF9;
    --stone-100:#F5F5F4;
    --stone-200:#E7E5E4;
    --stone-300:#D6D3D1;
    --gray-700:#374151;
    --gray-800:#1F2937;
    --teal-800:#115E59;
    --teal-900:#0F3F3A;
    --teal-950:#062925;
    --green-500:#22C55E;
    --green-600:#16A34A;
    --white:#ffffff;
    --black:#000000;
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background-color:var(--stone-50);
    color:var(--gray-800);
    line-height:1.55;
  }
  
  /* Typography utilities */
  .font-display{font-family:'Playfair Display', serif}
  .font-bold{font-weight:700}
  .font-medium{font-weight:500}
  .italic{font-style:italic}
  .text-sm{font-size:.875rem}
  .text-lg{font-size:1.125rem}
  .text-xl{font-size:1.25rem}
  .text-2xl{font-size:1.5rem}
  .text-3xl{font-size:1.875rem}
  .text-4xl{font-size:2.25rem}
  .text-gray-800{color:var(--gray-800)}
  .text-gray-700{color:var(--gray-700)}
  .text-white{color:var(--white)}
  .text-stone-200{color:var(--stone-200)}
  .text-stone-400{color:#a8a29e}
  .text-teal-800{color:var(--teal-800)}
  .uppercase{text-transform:uppercase}
  .tracking-wider{letter-spacing:.06em}
  .tracking-widest{letter-spacing:.15em}
  .text-center{text-align:center}
  
  /* Spacing utilities */
  .mx-auto{margin-left:auto;margin-right:auto}
  .my-0{margin-top:0;margin-bottom:0}
  .mt-4{margin-top:1rem}
  .mb-2{margin-bottom:.5rem}
  .mb-4{margin-bottom:1rem}
  .mb-6{margin-bottom:1.5rem}
  .mb-8{margin-bottom:2rem}
  .p-2{padding:.5rem}
  .p-3{padding:.75rem}
  .p-6{padding:1.5rem}
  .p-8{padding:2rem}
  .px-3{padding-left:.75rem;padding-right:.75rem}
  .px-6{padding-left:1.5rem;padding-right:1.5rem}
  .py-1{padding-top:.25rem;padding-bottom:.25rem}
  .py-2{padding-top:.5rem;padding-bottom:.5rem}
  .py-3{padding-top:.75rem;padding-bottom:.75rem}
  .py-4{padding-top:1rem;padding-bottom:1rem}
  .py-8{padding-top:2rem;padding-bottom:2rem}
  .py-16{padding-top:4rem;padding-bottom:4rem}
  .py-24{padding-top:6rem;padding-bottom:6rem}
  
  /* Layout utilities */
  .container{max-width:1200px;margin-left:auto;margin-right:auto}
  .hidden{display:none}
  .block{display:block}
  .flex{display:flex}
  .grid{display:grid}
  .items-center{align-items:center}
  .justify-between{justify-content:space-between}
  .space-x-8 > * + *{margin-left:2rem}
  .gap-2{gap:.5rem}
  .gap-4{gap:1rem}
  .gap-6{gap:1.5rem}
  .gap-8{gap:2rem}
  .gap-12{gap:3rem}
  .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-2{grid-template-columns:1fr}
  .md\:grid-cols-3{grid-template-columns:1fr}
  .col-span-2{grid-column:span 2}
  .col-span-3{grid-column:span 3}
  .row-span-2{grid-row:span 2}
  
  /* Position and sizing */
  .relative{position:relative}
  .absolute{position:absolute}
  .top-0{top:0}
  .left-0{left:0}
  .right-0{right:0}
  .inset-0{top:0;left:0;right:0;bottom:0}
  .z-10{z-index:10}
  .z-20{z-index:20}
  .z-50{z-index:50}
  .w-5{width:1.25rem}
  .h-5{height:1.25rem}
  .w-6{width:1.5rem}
  .h-6{height:1.5rem}
  .w-full{width:100%}
  .h-full{height:100%}
  .h-64{height:16rem}
  .h-96{height:24rem}
  .h-auto{height:auto}
  .h-screen{height:100vh}
  .max-w-2xl{max-width:42rem}
  .max-w-3xl{max-width:48rem}
  .max-w-6xl{max-width:72rem}
  
  /* Backgrounds and colors */
  .bg-white{background-color:var(--white)}
  .bg-white\/90{background-color:rgba(255,255,255,0.9)}
  .bg-black{background-color:var(--black)}
  .bg-opacity-20{opacity:0.2}
  .bg-opacity-50{opacity:0.5}
  .bg-opacity-90{opacity:0.9}
  .bg-stone-50{background-color:var(--stone-50)}
  .bg-stone-100{background-color:var(--stone-100)}
  .bg-teal-950{background-color:var(--teal-950)}
  .bg-green-500{background-color:var(--green-500)}
  .hover\:bg-green-600:hover{background-color:var(--green-600)}
  .hover\:bg-teal-800:hover{background-color:var(--teal-800)}
  .hover\:text-stone-300:hover{color:var(--stone-300)}
  
  /* Borders and radius */
  .rounded{border-radius:.25rem}
  .rounded-sm{border-radius:.2rem}
  .rounded-md{border-radius:.375rem}
  .rounded-lg{border-radius:.5rem}
  .border-b{border-bottom:1px solid rgba(107,114,128,.7)}
  .border-gray-700{border-color:#374151}
  
  /* Shadows */
  .shadow-md{box-shadow:0 4px 10px rgba(0,0,0,.12)}
  .shadow-lg{box-shadow:0 10px 20px rgba(0,0,0,.15)}
  .shadow-2xl{box-shadow:0 25px 40px rgba(0,0,0,.2)}
  
  /* Object-fit and transforms */
  .object-cover{object-fit:cover}
  .transform{transform:translateZ(0)}
  .transition{transition:all .2s ease}
  .transition-transform{transition:transform .3s ease}
  .duration-300{transition-duration:.3s}
  .hover\:scale-\[1\.02\]:hover{transform:scale(1.02)}
  
  /* Text helpers */
  .text-white{text-align:inherit}
  .text-center{text-align:center}
  
  /* Opacity utility */
  .opacity-50{opacity:.5}
  
  /* Backdrop blur (fallback: subtle translucent look) */
  .backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  
  /* Visibility toggles for scroll animation */
  .fade-in{opacity:0;transform:translateY(10px);transition:opacity .4s ease-out, transform .4s ease-out;will-change:opacity,transform}
  .fade-in.visible{opacity:1;transform:translateY(0)}
  @media (prefers-reduced-motion:reduce){
    .fade-in{opacity:1;transform:none;transition:none}
  }
  
  /* Mobile-first improvements from your original inline CSS */
  #itinerary-result{white-space:pre-wrap}
  .loader{
    border:4px solid #f3f3f3;border-top:4px solid #104c45;border-radius:50%;
    width:40px;height:40px;animation:spin 1s linear infinite;margin:20px auto;
  }
  @keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
  
  /* Utility buttons and links */
  a,button{cursor:pointer}
  .btn{display:inline-flex;align-items:center;justify-content:center}
  
  /* Header link styles */
  nav a{color:#fff;text-decoration:none}
  
  /* Hero text sizing on larger screens */
  .lg\:text-7xl{font-size:4.5rem}
  
  /* Responsive breakpoints (md >= 768px) */
  @media (min-width:768px){
    .md\:flex{display:flex}
    .md\:hidden{display:none}
    .md\:block{display:block}
    .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .md\:text-left{text-align:left}
    .md\:text-xl{font-size:1.25rem}
    .md\:text-2xl{font-size:1.5rem}
    .md\:text-4xl{font-size:2.25rem}
    .md\:text-6xl{font-size:3.75rem}
    .md\:py-24{padding-top:6rem;padding-bottom:6rem}
  }
  
  /* Small-screen ergonomics */
  @media (max-width:768px){
    a,button{padding:.5rem;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
    p{font-size:16px !important;line-height:1.5 !important}
    img{max-width:100%;height:auto}
    .container{width:100%;overflow-x:hidden}
  }
  
  /* Utility widths */
  .w-full{width:100%}
  /* Top contact bar alignment */
.topbar { width: 100%; }
.topbar .container {
  display: flex;                 /* Make container flex */
  justify-content: space-between; /* Push items to edges */
  align-items: center;           /* Vertically center */
  width: 100%;
}

/* Ensure container stretches full width but keeps centered content */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
/* Header readability: background only is translucent, text stays solid */
/* Height of the top contact bar on desktop */
:root { --topbar-h: 48px; }  /* tweak to 44–56px if your bar is taller/shorter */

.site-header{
  position: absolute;
  left: 0; width: 100%;
  z-index: 20;
  background: rgba(0,0,0,0.35);
  top: 0; /* default for mobile where the top bar is hidden */
}

/* On desktop (md and up), offset header by the contact bar height */
@media (min-width: 768px){
  .site-header{ top: var(--topbar-h); }
}

/* Keep the mobile slide-down menu dark */
.mobile-menu-panel{ background: rgba(0,0,0,0.9); }

  
  /* Force white text in header and links */
  .site-header, .site-header a, .site-header h1 { color: #fff !important; }
  .nav-link:hover { color: #d6d3d1 !important; } /* subtle hover */
  
  /* Mobile menu keeps a darker backdrop */
  .mobile-menu-panel{
    background: rgba(0,0,0,0.9);
  }
  
  /* Undo the old utility that faded the whole header, if it exists */
  .bg-opacity-20{ opacity: 1 !important; }   /* neutralize global opacity on header */