/* =========================================================
   ILLUSTHRONE — GLOBAL CSS SYSTEM
========================================================= */

/* ================= RESET ================= */

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


html{
  scroll-behavior:smooth;
}

body{
  background:#050505;
  color:#f4f1ea;
  font-family:Avenir, "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img{
  max-width:100%;
  display:block;
}

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

button{
  font-family:inherit;
}

/* ================= GLOBAL CONTAINER ================= */

.site-container{
  width:100%;
  max-width:1320px;
  margin:0 auto;
}

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

.serif-title{
  font-family:"Cormorant Garamond", serif;
  font-weight:300;
  letter-spacing:-0.4px;
  color:#f4f1ea;
}

.eyebrow{
  margin:0 0 18px;
  font-size:11px;
  letter-spacing:3.2px;
  text-transform:uppercase;
  color:#b29a63;
}

/* ================= BUTTONS ================= */

.primary-button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:0 42px;
  border:1px solid rgba(178,154,99,0.72);
  background:transparent;
  color:#c8ad72;
  font-size:11px;
  font-weight:600;
  letter-spacing:2.2px;
  text-transform:uppercase;
  overflow:hidden;
  cursor:pointer;
  transition:
    background .3s ease,
    border-color .3s ease,
    color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}

.primary-button::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:80%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(234,215,163,0.18) 50%,
    transparent 100%
  );
  transform:skewX(-18deg);
  transition:left .65s ease;
}

.primary-button:hover{
  background:rgba(178,154,99,0.08);
  border-color:rgba(178,154,99,1);
  color:#ead7a3;
  transform:translateY(-1px);
  box-shadow:0 0 28px rgba(178,154,99,0.10);
}

.primary-button:hover::before{
  left:130%;
}

/* ================= GLOBAL HEADER ================= */

.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:9999;
  background:transparent;
}

.site-header.scrolled{
  background:rgba(5,5,5,0.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.header-inner{
  width:100%;
  max-width:1520px;
  margin:0 auto;
  padding:24px 42px 0;
}

/* TOP ROW */

.header-top{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:72px;
}

.site-logo{
  position:absolute;
  left:50%;
  transform:translateX(-50%);

  font-family:"Cormorant Garamond", serif;
  font-size:31px;
  line-height:1;
  font-weight:400;
  letter-spacing:5px;
  text-transform:uppercase;
  color:#b29a63;
  white-space:nowrap;
}

.header-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
}

.header-language{
  font-size:10px;
  line-height:1;
  letter-spacing:1.8px;
  color:rgba(244,241,234,0.60);
}

.header-cta{
  min-height:44px;
  padding:0 24px;
  font-size:10px;
  letter-spacing:1.8px;
}

/* NAVIGATION ROW */

.header-nav-row{
  width:100%;
  display:flex;
  justify-content:center;
  background:transparent;
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.desktop-nav{
  width:min(100%,1288px);
  min-height:58px;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  flex-wrap:nowrap;
  white-space:nowrap;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.desktop-nav a{
  position:relative;
  flex:0 0 auto;
  padding:0 20px;
  font-size:10.1px;
  line-height:1;
  font-weight:500;
  letter-spacing:0.65px;
  text-transform:uppercase;
  color:rgba(244,241,234,0.88);
  text-shadow:0 1px 8px rgba(0,0,0,0.30);
  transition:color 0.28s ease;
}

.desktop-nav a + a::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:18px;
  transform:translateY(-50%);
  background:rgba(178,154,99,0.38);
}

.desktop-nav a:hover{
  color:#c8ad72;
}

/* ================= MOBILE MENU ================= */

.mobile-toggle{
  display:none;
  width:34px;
  height:24px;
  border:0;
  background:transparent;
  cursor:pointer;
  position:relative;
}

.mobile-toggle span{
  display:block;
  width:34px;
  height:1px;
  background:#c8ad72;
  margin:8px 0;
}

.mobile-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(5,5,5,0.97);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s ease, visibility .35s ease;
}

.mobile-overlay.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.mobile-overlay-inner{
  min-height:100vh;
  padding:34px 28px 46px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.mobile-overlay-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.mobile-close{
  border:0;
  background:transparent;
  color:#c8ad72;
  font-size:38px;
  line-height:1;
  cursor:pointer;
}

.mobile-nav{
  display:grid;
  gap:22px;
  margin:70px 0;
  text-align:center;
}

.mobile-nav a{
  font-family:"Cormorant Garamond", serif;
  font-size:34px;
  line-height:1.1;
  font-weight:300;
  color:#f4f1ea;
}

.mobile-overlay-bottom{
  text-align:center;
}

/* ================= GLOBAL FOOTER ================= */

.site-footer{
  position:relative;
  padding:118px 48px 46px;
  background:#050505;
  color:#f4f1ea;
  overflow:hidden;
}

.site-footer::before{
  content:"";
  position:absolute;
  left:48px;
  right:48px;
  top:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(223,201,143,0.18) 50%,
    transparent 100%
  );
}

.footer-inner{
  max-width:1320px;
  margin:0 auto;
}

.footer-top{
  display:grid;
  grid-template-columns:440px 1fr;
  gap:108px;
  align-items:start;
}

.footer-brand{
  max-width:440px;
}

.footer-logo{
  width:400px;
  max-width:100%;
  height:auto;
  margin:0 0 36px;
  display:block;
  Mix-blend-mode:normal;
  Opacity:1;
  filter:drop-shadow(0 0 8px rgba(198,173,114,0.05));
}

.footer-manifest{
  max-width:410px;
  margin:0;
  font-size:15.5px;
  line-height:1.86;
  color:rgba(244,241,234,0.72);
}

.footer-links-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:52px;
}

.footer-column{
  min-width:0;
}

.footer-column-title{
  margin:0 0 24px;
  font-size:11px;
  font-weight:500;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#b29a63;
}

.footer-links{
  display:grid;
  gap:13px;
}

.footer-links a{
  width:fit-content;
  max-width:100%;
  font-size:14px;
  line-height:1.45;
  letter-spacing:.35px;
  color:rgba(244,241,234,0.76);
  transition:color .28s ease, transform .28s ease;
}

.footer-links a:hover{
  color:#ead7a3;
  transform:translateX(2px);
}

.footer-bottom{
  margin-top:84px;
  padding-top:30px;
  border-top:1px solid rgba(223,201,143,0.12);
  display:grid;
  grid-template-columns:1fr auto;
  gap:34px;
  align-items:center;
}

.footer-copyright{
  font-size:12px;
  line-height:1.6;
  color:rgba(244,241,234,0.54);
}

.footer-socials{
  display:flex;
  gap:22px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.footer-socials a{
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:rgba(244,241,234,0.50);
  transition:color .28s ease;
}

.footer-socials a:hover{
  color:#c8ad72;
}

.footer-disclaimer{
  margin-top:44px;
  text-align:center;
  font-size:10.5px;
  line-height:1.7;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:rgba(244,241,234,0.24);
}

/* ================= RESPONSIVE ================= */

@media (max-width:1360px){

  .header-inner{
    padding-left:34px;
    padding-right:34px;
  }

  .desktop-nav{
    gap:16px;
  }

  .desktop-nav a{
    font-size:9.2px;
    letter-spacing:1px;
  }

}

@media (max-width:1180px){

  .header-nav-row{
    display:none;
  }

  .mobile-toggle{
    display:block;
  }

}

@media (max-width:980px){

  .header-inner{
    padding:20px 24px 14px;
  }

  .site-logo{
    font-size:26px;
    letter-spacing:4px;
 position:relative;
  left:auto;
  transform:none;
  }


  .header-language,
  .header-cta{
    display:none;
  }

  .footer-top{
    grid-template-columns:1fr;
    gap:72px;
  }

  .footer-links-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:42px;
  }

  .footer-bottom{
    grid-template-columns:1fr;
    justify-items:start;
  }

  .footer-socials{
    justify-content:flex-start;
  }

}

@media (max-width:600px){

  .site-footer{
    padding:84px 22px 38px;
  }

  .footer-links-grid{
    grid-template-columns:1fr;
    gap:38px;
  }

  .footer-logo{
    width:310px;
  }

  .mobile-nav a{
    font-size:30px;
  }

}

/* ================= MOBILE HEADER FIX ================= */

@media (max-width: 768px){

  .hero-nav-band{
    display:none;
  }

  .desktop-nav{
    display:none;
  }

  .mobile-toggle{
    display:flex;
  }

  .hero-header{
    padding:22px 22px;
    gap:18px;
  }

  .hero-logo,
  .site-logo{
    font-size:20px;
    letter-spacing:3px;
  }

  .hero-actions .cta-button,
  .header-cta{
    min-height:44px;
    padding:0 18px;
    font-size:10px;
    letter-spacing:1.8px;
  }

}

/* ================= ILLUSTHRONE FINAL GLOBAL OVERRIDES ================= */

/* Keep only the actual navigation row as a transparent band. */
.site-header{
  background:transparent !important;
}

.header-inner{
  padding:24px 42px 0 !important;
}

.header-nav-row{
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  display:flex !important;
  justify-content:center !important;
  background:rgba(5,6,7,0.36) !important;
  border:none !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}



/* ================= UNIVERSAL LANDING HERO POSITION STANDARD ================= */
/* Applies to every inner visual hero section; homepage .hero is intentionally excluded. */

section[class$="-hero"],
section[class*="-hero "]{
  padding-top:260px !important;
}

[class$="-hero-inner"],
[class*="-hero-inner "]{
  transform:translateY(110px) !important;
}

@media (max-width:760px){

  section[class$="-hero"],
  section[class*="-hero "]{
    padding-top:150px !important;
  }

  [class$="-hero-inner"],
  [class*="-hero-inner "]{
    transform:translateY(48px) !important;
  }

}

/* ================= ILLUSTHRONE MEGA MENU SYSTEM ================= */

.desktop-nav{
  position:relative;
}

.nav-item{
  position:relative;
  display:flex;
  align-items:center;
  min-height:58px;
}

.nav-item + .nav-item::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:18px;
  transform:translateY(-50%);
  background:rgba(178,154,99,0.38);
}

.desktop-nav .nav-link{
  position:relative;
  flex:0 0 auto;
  padding:0 20px;
  font-size:10.1px;
  line-height:1;
  font-weight:500;
  letter-spacing:0.65px;
  text-transform:uppercase;
  color:rgba(244,241,234,0.88);
  text-shadow:0 1px 8px rgba(0,0,0,0.30);
  transition:color .28s ease;
}

.desktop-nav .nav-link:hover,
.desktop-nav .nav-link:focus-visible{
  color:#c8ad72;
}

.desktop-nav .nav-link + .nav-link::before,
.mega-menu a + a::before,
.mega-menu a::before{
  display:none !important;
  content:none !important;
}

.mega-menu{
  position:fixed;
  top:132px;
  left:50%;
  z-index:9998;
  width:min(980px, calc(100vw - 72px));
  transform:translate(-50%, 8px);
  padding:0;
  background:rgba(5,6,7,0.92);
  border:1px solid rgba(178,154,99,0.18);
  box-shadow:0 32px 80px rgba(0,0,0,0.38);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}

/* Wide invisible hover bridge between the nav band and the panel. */
.mega-menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-86px;
  height:86px;
}

.nav-item.has-mega.mega-open .mega-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%, 0);
}

.mega-menu-large{
  width:min(1060px, calc(100vw - 72px));
}

.mega-menu-compact{
  width:min(760px, calc(100vw - 72px));
}

.mega-menu-small{
  width:min(440px, calc(100vw - 72px));
}

.mega-shell{
  min-height:312px;
}

.mega-tabs{
  position:relative;
  display:grid;
  grid-template-columns:290px 1fr;
  min-height:312px;
}

.mega-tab{
  grid-column:1;
  min-height:44px;
}

.mega-tab-link{
  display:flex !important;
  align-items:center;
  min-height:44px;
  padding:0 28px !important;
  font-size:10.7px !important;
  line-height:1.2 !important;
  letter-spacing:1.9px !important;
  text-transform:uppercase !important;
  font-weight:600 !important;
  color:rgba(244,241,234,0.64) !important;
  border-bottom:1px solid rgba(255,255,255,0.035);
  text-shadow:none !important;
  background:rgba(255,255,255,0.006);
  transition:color .24s ease, background .24s ease, padding-left .24s ease;
}

.mega-tab-link:hover,
.mega-tab:hover > .mega-tab-link,
.mega-tab:focus-within > .mega-tab-link,
.mega-tab.is-active > .mega-tab-link{
  color:#ead7a3 !important;
  background:rgba(178,154,99,0.075);
  padding-left:32px !important;
}

.mega-panel{
  position:absolute;
  left:290px;
  top:0;
  right:0;
  bottom:0;
  padding:34px 38px 36px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 16%, rgba(198,169,107,0.055), transparent 34%),
    rgba(5,6,7,0.04);
  border-left:1px solid rgba(178,154,99,0.12);
  transition:opacity .18s ease, visibility .18s ease;
}

.mega-panel-head{
  margin:0 0 22px;
}

.mega-panel-head a{
  padding:0 !important;
  font-family:"Cormorant Garamond", serif;
  font-size:28px !important;
  line-height:1.05 !important;
  font-weight:300 !important;
  letter-spacing:.2px !important;
  text-transform:none !important;
  color:#f4f1ea !important;
  text-shadow:none !important;
}

.mega-panel-links{
  display:grid;
  grid-template-columns:1fr;
  gap:12px 34px;
}

.mega-panel-links-2{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.mega-panel-links a,
.mega-simple-column a{
  cursor:pointer;
  padding:0 !important;
  font-size:13.2px !important;
  line-height:1.38 !important;
  letter-spacing:.28px !important;
  text-transform:none !important;
  font-weight:400 !important;
  color:rgba(244,241,234,0.72) !important;
  white-space:normal !important;
  text-shadow:none !important;
  transition:color .22s ease, transform .22s ease;
}

.mega-panel-links a:hover,
.mega-simple-column a:hover{
  color:#ead7a3 !important;
  transform:translateX(4px) scale(1.015);
}

.mega-tab.is-active .mega-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.mega-simple-grid{
  display:grid;
  gap:36px;
  padding:32px 34px 34px;
}

.mega-simple-grid-2{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.mega-simple-column{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mega-simple-column .mega-heading{
  margin:0 0 6px;
  padding:0 !important;
  font-size:10.8px !important;
  line-height:1.2 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  font-weight:600 !important;
  color:#c8ad72 !important;
}

.mega-menu-small .mega-simple-column{
  padding:32px 34px 34px;
}

@media (max-width:1360px){

  .desktop-nav .nav-link{
    padding:0 14px;
    font-size:9.2px;
    letter-spacing:.55px;
  }

  .mega-menu{
    top:132px;
    width:min(940px, calc(100vw - 44px));
  }

  .mega-menu-large{
    width:min(1000px, calc(100vw - 44px));
  }

  .mega-tabs{
    grid-template-columns:270px 1fr;
  }

  .mega-panel{
    left:270px;
    padding:32px 32px 34px;
  }

  .mega-panel-links-2{
    grid-template-columns:1fr;
  }
}

@media (max-width:1180px){
  .mega-menu{
    display:none;
  }
}

/* ================= FINAL NAV HOVER SAFETY ================= */

.nav-item.has-mega > .nav-link{
  color:rgba(244,241,234,0.88) !important;
}

.nav-item.has-mega > .nav-link:hover,
.nav-item.has-mega > .nav-link:focus-visible{
  color:#c8ad72 !important;
}

/* ================= FINAL BESPOKE TAB HOVER FIX ================= */

.mega-item-bespoke .mega-tab-link{
  transition:
    color .24s ease,
    background .24s ease,
    transform .24s ease,
    padding-left .24s ease !important;
}

.mega-item-bespoke .mega-tab:hover > .mega-tab-link,
.mega-item-bespoke .mega-tab:focus-within > .mega-tab-link,
.mega-item-bespoke .mega-tab.is-active > .mega-tab-link{
  color:#c8ad72 !important;
  background:rgba(178,154,99,0.085) !important;
  transform:translateX(3px) !important;
  padding-left:32px !important;
}


/* =========================================================
   ILLUSTHRONE — FINAL LAUNCH STABILITY FIXES
   Purpose:
   1) Keep footer links clickable above any accidental overlay.
   2) Make homepage destination cards react across the full card area.
   3) Give Bespoke Journeys inner menu links the same premium hover behavior.
   4) Keep top navigation color changes limited to the actual link hover.
========================================================= */

/* Footer must always sit above page-level decorative layers. */
.site-footer{
  position:relative !important;
  z-index:50 !important;
  pointer-events:auto !important;
}

.site-footer *,
.site-footer a{
  pointer-events:auto !important;
}

/* Homepage destination card full-hit-area safety. */
.destinations-section,
.destinations-grid{
  position:relative !important;
  z-index:2 !important;
}

.destination-card{
  position:relative !important;
  z-index:1 !important;
  isolation:isolate !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

.destination-card img,
.destination-card span,
.destination-card::after{
  pointer-events:none !important;
}

/* Top nav should turn gold only when the actual visible link is hovered/focused. */
.nav-item.has-mega > .nav-link{
  color:rgba(244,241,234,0.88) !important;
}

.nav-item.has-mega > .nav-link:hover,
.nav-item.has-mega > .nav-link:focus-visible{
  color:#c8ad72 !important;
}

/* Remove any accidental gold color caused only by an open panel state. */
.nav-item.has-mega.mega-open > .nav-link:not(:hover):not(:focus-visible){
  color:rgba(244,241,234,0.88) !important;
}

/* Bespoke editorial tab headings: premium hover and active treatment. */
.mega-item-bespoke .mega-tab-link{
  cursor:pointer !important;
  transform:translateX(0) scale(1) !important;
  transition:
    color .24s ease,
    background .24s ease,
    transform .24s ease,
    padding-left .24s ease,
    letter-spacing .24s ease !important;
}

.mega-item-bespoke .mega-tab-link:hover,
.mega-item-bespoke .mega-tab-link:focus-visible,
.mega-item-bespoke .mega-tab.is-active > .mega-tab-link,
.mega-item-bespoke .mega-tab.menu-tab-hovered > .mega-tab-link{
  color:#ead7a3 !important;
  background:rgba(178,154,99,0.095) !important;
  transform:translateX(4px) scale(1.015) !important;
  padding-left:34px !important;
  letter-spacing:2.05px !important;
}

/* Bespoke right-panel heading and links: same tactile behavior as the rest of the menu. */
.mega-item-bespoke .mega-panel-head a,
.mega-item-bespoke .mega-panel-links a{
  cursor:pointer !important;
  display:inline-block !important;
  transform:translateX(0) scale(1) !important;
  transition:
    color .24s ease,
    transform .24s ease,
    letter-spacing .24s ease !important;
}

.mega-item-bespoke .mega-panel-head a:hover,
.mega-item-bespoke .mega-panel-head a:focus-visible,
.mega-item-bespoke .mega-panel-head a.menu-link-hovered,
.mega-item-bespoke .mega-panel-links a:hover,
.mega-item-bespoke .mega-panel-links a:focus-visible,
.mega-item-bespoke .mega-panel-links a.menu-link-hovered{
  color:#ead7a3 !important;
  transform:translateX(4px) scale(1.018) !important;
  letter-spacing:.42px !important;
}

/* Make active mega panels fully interactive. */
.mega-tab.is-active .mega-panel{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}


/* =========================================================
   ILLUSTHRONE — FINAL QA PATCH
   Non-invasive launch fixes:
   - footer clickability
   - homepage destination card full hit-area
   - Bespoke menu hover/active polish
========================================================= */

.site-footer{
  position:relative !important;
  z-index:1000 !important;
  pointer-events:auto !important;
}

.site-footer::before{
  pointer-events:none !important;
}

.site-footer .footer-inner,
.site-footer .footer-links-grid,
.site-footer .footer-column,
.site-footer .footer-links,
.site-footer .footer-links a,
.site-footer .footer-socials,
.site-footer .footer-socials a{
  position:relative !important;
  z-index:2 !important;
  pointer-events:auto !important;
}

.destinations-section,
.destinations-grid{
  position:relative !important;
  z-index:2 !important;
  overflow:visible !important;
}

.destination-card{
  position:relative !important;
  display:block !important;
  height:420px !important;
  min-height:420px !important;
  z-index:1 !important;
  isolation:isolate !important;
  overflow:hidden !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

.destination-card img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  pointer-events:none !important;
}

.destination-card span{
  pointer-events:none !important;
}

.destination-card::after{
  pointer-events:none !important;
}

.mega-item-bespoke .mega-tab-link{
  cursor:pointer !important;
  will-change:transform,color,background,letter-spacing !important;
  transition:
    color .24s ease,
    background .24s ease,
    transform .24s ease,
    padding-left .24s ease,
    letter-spacing .24s ease !important;
}

.mega-item-bespoke .mega-tab-link:hover,
.mega-item-bespoke .mega-tab-link:focus-visible,
.mega-item-bespoke .mega-tab.is-active > .mega-tab-link,
.mega-item-bespoke .mega-tab.menu-tab-hovered > .mega-tab-link{
  color:#ead7a3 !important;
  background:rgba(178,154,99,0.095) !important;
  transform:translateX(4px) scale(1.015) !important;
  padding-left:34px !important;
  letter-spacing:2.05px !important;
}

.mega-item-bespoke .mega-panel-head a,
.mega-item-bespoke .mega-panel-links a{
  cursor:pointer !important;
  display:inline-block !important;
  will-change:transform,color,letter-spacing !important;
  transform:translateX(0) scale(1) !important;
  transition:
    color .24s ease,
    transform .24s ease,
    letter-spacing .24s ease !important;
}

.mega-item-bespoke .mega-panel-head a:hover,
.mega-item-bespoke .mega-panel-head a:focus-visible,
.mega-item-bespoke .mega-panel-head a.menu-link-hovered,
.mega-item-bespoke .mega-panel-links a:hover,
.mega-item-bespoke .mega-panel-links a:focus-visible,
.mega-item-bespoke .mega-panel-links a.menu-link-hovered{
  color:#ead7a3 !important;
  transform:translateX(4px) scale(1.018) !important;
  letter-spacing:.42px !important;
}

.mega-tab.is-active .mega-panel{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}


/* =========================================================
   FINAL LAUNCH STABILITY PATCH — overlay, footer, home cards
========================================================= */

/* A hidden mega menu must never capture page clicks. */
.nav-item.has-mega:not(.mega-open) .mega-menu,
.nav-item.has-mega:not(.mega-open) .mega-menu *,
.nav-item.has-mega:not(.mega-open) .mega-menu::before{
  pointer-events:none !important;
}

.nav-item.has-mega.mega-open .mega-menu{
  pointer-events:auto !important;
}

/* Keep the bridge only for an actually open menu. */
.nav-item.has-mega:not(.mega-open) .mega-menu::before{
  display:none !important;
}

/* Footer should always sit as a clickable layer when reached. */
.site-footer{
  position:relative !important;
  z-index:20 !important;
  pointer-events:auto !important;
}

.site-footer::before{
  pointer-events:none !important;
}

.site-footer .footer-inner,
.site-footer .footer-links-grid,
.site-footer .footer-column,
.site-footer .footer-links,
.site-footer .footer-links a,
.site-footer .footer-socials,
.site-footer .footer-socials a{
  position:relative !important;
  z-index:21 !important;
  pointer-events:auto !important;
}

/* Home destination cards: the entire tile must be hoverable/clickable. */
.destinations-grid .destination-card{
  position:relative !important;
  display:block !important;
  min-height:420px !important;
  height:420px !important;
  overflow:hidden !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  z-index:1 !important;
  isolation:isolate !important;
}

.destinations-grid .destination-card img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  pointer-events:none !important;
  z-index:0 !important;
}

.destinations-grid .destination-card::after{
  pointer-events:none !important;
  z-index:1 !important;
}

.destinations-grid .destination-card span{
  pointer-events:none !important;
  z-index:2 !important;
}

.destinations-grid .destination-card:hover img,
.destinations-grid .destination-card:focus-visible img{
  filter:grayscale(0%) brightness(1) !important;
  transform:scale(1.05) !important;
}

.destinations-grid .destination-card:hover::after,
.destinations-grid .destination-card:focus-visible::after{
  opacity:.42 !important;
}

.destinations-grid .destination-card:hover span,
.destinations-grid .destination-card:focus-visible span{
  transform:translate(-50%, -50%) scale(1.08) !important;
  color:#f4f1ea !important;
  letter-spacing:.16em !important;
}

/* Bespoke panel hover: left tabs, panel titles and inner links. */
.mega-item-bespoke .mega-tab-link,
.mega-item-bespoke .mega-panel-head a,
.mega-item-bespoke .mega-panel-links a{
  cursor:pointer !important;
  will-change:transform,color,background,letter-spacing !important;
}

.mega-item-bespoke .mega-tab-link:hover,
.mega-item-bespoke .mega-tab-link:focus-visible,
.mega-item-bespoke .mega-tab.is-active > .mega-tab-link,
.mega-item-bespoke .mega-tab.menu-tab-hovered > .mega-tab-link{
  color:#ead7a3 !important;
  background:rgba(178,154,99,.095) !important;
  transform:translateX(4px) scale(1.015) !important;
  padding-left:34px !important;
  letter-spacing:2.05px !important;
}

.mega-item-bespoke .mega-panel-head a{
  display:inline-block !important;
  transition:color .24s ease, transform .24s ease, letter-spacing .24s ease !important;
}

.mega-item-bespoke .mega-panel-head a:hover,
.mega-item-bespoke .mega-panel-head a:focus-visible,
.mega-item-bespoke .mega-panel-links a:hover,
.mega-item-bespoke .mega-panel-links a:focus-visible,
.mega-item-bespoke .mega-panel-links a.menu-link-hovered{
  color:#ead7a3 !important;
  transform:translateX(4px) scale(1.018) !important;
  letter-spacing:.42px !important;
}

/* Keep top nav color controlled only by direct link hover/focus. */
.nav-item.has-mega > .nav-link{
  color:rgba(244,241,234,.88) !important;
}

.nav-item.has-mega > .nav-link:hover,
.nav-item.has-mega > .nav-link:focus-visible{
  color:#c8ad72 !important;
}


/* =========================================================
   ILLUSTHRONE — UNIVERSAL HERO IMAGE VISIBILITY BOOST
   Purpose:
   Make landing hero background images significantly more visible
   while preserving premium dark contrast and readable typography.
   Homepage .hero is intentionally not targeted.
========================================================= */

/* Brighten all inner page hero images that use the standard *-hero-media pattern. */
section[class$="-hero"] [class$="-hero-media"] img,
section[class*="-hero "] [class*="-hero-media"] img,
[class$="-hero-media"] img,
[class*="-hero-media"] img{
  filter:grayscale(6%) brightness(0.78) contrast(1.06) !important;
  opacity:1 !important;
}

/* Reduce the heavy dark overlay used on inner landing heroes. */
section[class$="-hero"]::after,
section[class*="-hero "]::after{
  background:
    radial-gradient(circle at center, rgba(198,169,107,0.045), transparent 38%),
    linear-gradient(180deg, rgba(5,5,5,0.14) 0%, rgba(5,5,5,0.40) 58%, #050505 100%),
    linear-gradient(90deg, rgba(5,5,5,0.48) 0%, rgba(5,5,5,0.16) 50%, rgba(5,5,5,0.48) 100%) !important;
}

/* Some simpler pages use only a single vertical overlay; this keeps them consistent. */
section[class$="-hero"]::before,
section[class*="-hero "]::before{
  background:rgba(5,5,5,0.12) !important;
}

/* Keep hero content comfortably readable after brightening the image. */
[class$="-hero-inner"],
[class*="-hero-inner "]{
  text-shadow:0 2px 18px rgba(0,0,0,0.58) !important;
}

/* Mobile needs slightly stronger contrast because text stacks over tighter image areas. */
@media (max-width:760px){

  section[class$="-hero"] [class$="-hero-media"] img,
  section[class*="-hero "] [class*="-hero-media"] img,
  [class$="-hero-media"] img,
  [class*="-hero-media"] img{
    filter:grayscale(8%) brightness(0.70) contrast(1.08) !important;
  }

  section[class$="-hero"]::after,
  section[class*="-hero "]::after{
    background:
      radial-gradient(circle at center, rgba(198,169,107,0.035), transparent 38%),
      linear-gradient(180deg, rgba(5,5,5,0.22) 0%, rgba(5,5,5,0.50) 62%, #050505 100%),
      linear-gradient(90deg, rgba(5,5,5,0.54) 0%, rgba(5,5,5,0.24) 50%, rgba(5,5,5,0.54) 100%) !important;
  }

}

/* ================= GLOBAL HERO IMAGE VISIBILITY BOOST — FINAL ================= */

section[class*="-hero"] [class*="-hero-media"] img,
section[class*="-hero"] img{
  filter:grayscale(8%) brightness(0.78) contrast(1.08) !important;
  opacity:1 !important;
}

section[class*="-hero"]::after{
  background:
    linear-gradient(180deg, rgba(5,5,5,0.08) 0%, rgba(5,5,5,0.36) 58%, #050505 100%),
    linear-gradient(90deg, rgba(5,5,5,0.48) 0%, rgba(5,5,5,0.12) 50%, rgba(5,5,5,0.48) 100%) !important;
}

section[class*="-hero"] [class*="-hero-inner"]{
  text-shadow:0 3px 24px rgba(0,0,0,0.72) !important;
}

/* ================= HEADER WORDMARK IMAGE LOGO ================= */

.site-logo-image{
  width:300px;
  max-width:42vw;
  height:auto;
  display:flex !important;
  align-items:center;
  justify-content:center;
}

.site-logo-image img{
  width:100%;
  height:auto;
  display:block;
}

@media (max-width:980px){
  .site-logo-image{
    width:240px;
    max-width:62vw;
  }
}

/* =========================================================
   ILLUSTHRONE — MOBILE VIEWPORT HARD LOCK + FOOTER SAFETY
   Scope: mobile only. Desktop rules above remain untouched.
   Purpose: prevent iOS horizontal dragging/white gutters, keep
   hamburger inside viewport, keep footer styled if page CSS is late.
========================================================= */

@media (max-width:1180px){

  html,
  body{
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    background:#050505 !important;
  }

  @supports (overflow-x: clip){
    html,
    body{
      overflow-x:clip !important;
    }
  }

  body{
    position:relative !important;
  }

  #global-header,
  #global-footer,
  .site-header,
  .site-footer{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .site-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:99999 !important;
    background:transparent !important;
    overflow:visible !important;
    transform:none !important;
  }

  .site-header.scrolled{
    background:rgba(5,5,5,0.64) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
  }

  .site-header .header-inner{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    padding:22px 18px 0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  .site-header .header-top{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:58px !important;
    min-height:58px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    overflow:visible !important;
  }

  .site-header .site-logo.site-logo-image{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    right:auto !important;
    transform:translate(-50%, -50%) !important;
    width:240px !important;
    max-width:58vw !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .site-header .site-logo.site-logo-image img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    display:block !important;
  }

  .site-header .header-right{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
    min-width:0 !important;
  }

  .site-header .mobile-toggle{
    position:absolute !important;
    right:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    width:42px !important;
    height:42px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    cursor:pointer !important;
    pointer-events:auto !important;
    z-index:100000 !important;
  }

  .site-header .mobile-toggle span{
    display:block !important;
    width:34px !important;
    height:1px !important;
    margin:0 !important;
    background:#c8ad72 !important;
  }

  .site-header .header-language,
  .site-header .header-cta,
  .site-header .header-nav-row,
  .site-header .desktop-nav,
  .site-header .mega-menu,
  .site-header .mega-shell,
  .site-header .mega-tabs,
  .site-header .mega-panel{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    height:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
  }

  #iht-mobile.iht-mobile,
  .iht-mobile{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    left:0 !important;
    right:0 !important;
    overflow:hidden !important;
  }

  #iht-mobile .iht-mobile-inner,
  .iht-mobile-inner{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
  }

  body.illusthrone-mobile-open{
    overflow:hidden !important;
    touch-action:none !important;
  }

  .site-footer{
    clear:both !important;
    display:block !important;
    position:relative !important;
    z-index:50 !important;
    margin:0 !important;
    padding:84px 22px 38px !important;
    background:#050505 !important;
    color:#f4f1ea !important;
    overflow:hidden !important;
    font-family:Avenir, "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  }

  .site-footer *{
    box-sizing:border-box !important;
  }

  .site-footer a{
    color:rgba(244,241,234,.76) !important;
    text-decoration:none !important;
  }

  .footer-inner{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
  }

  .footer-top,
  .footer-links-grid,
  .footer-bottom{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
  }

  .footer-top{
    gap:58px !important;
  }

  .footer-links-grid{
    gap:38px !important;
  }

  .footer-bottom{
    gap:24px !important;
    margin-top:62px !important;
    justify-items:start !important;
  }

  .footer-logo{
    width:min(310px, 82vw) !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 0 30px !important;
  }

  .footer-manifest{
    max-width:100% !important;
    font-size:15.5px !important;
    line-height:1.86 !important;
    color:rgba(244,241,234,.72) !important;
  }

  .footer-column-title{
    margin:0 0 20px !important;
    font-size:11px !important;
    font-weight:500 !important;
    letter-spacing:3px !important;
    text-transform:uppercase !important;
    color:#b29a63 !important;
  }

  .footer-links{
    display:grid !important;
    gap:13px !important;
  }

  .footer-links a{
    width:fit-content !important;
    max-width:100% !important;
    font-size:14px !important;
    line-height:1.45 !important;
    letter-spacing:.35px !important;
  }

  .footer-copyright,
  .footer-disclaimer{
    font-size:12px !important;
    line-height:1.7 !important;
    color:rgba(244,241,234,.54) !important;
  }

  .footer-socials{
    display:flex !important;
    gap:18px !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }

  .footer-socials a{
    font-size:11px !important;
    letter-spacing:1.6px !important;
    text-transform:uppercase !important;
    color:rgba(244,241,234,.50) !important;
  }
}

@media (max-width:420px){
  .site-header .site-logo.site-logo-image{
    width:220px !important;
    max-width:56vw !important;
  }

  .site-header .header-inner{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}


/* =========================================================
   ILLUSTHRONE — MOBILE SAFARI MENU + HERO VISIBILITY FINAL PATCH
   Scope: mobile only. Desktop rules remain untouched.
   Purpose:
   1) Keep hamburger tappable on Safari inner pages.
   2) Prevent invisible hero/overlay layers from blocking the header.
   3) Make inner hero images more visible on mobile without affecting desktop.
========================================================= */

@media (max-width:1180px){

  /* Keep the global header above every page-level layer on iOS Safari. */
  #global-header{
    position:relative !important;
    z-index:2147483000 !important;
    width:100% !important;
    max-width:100% !important;
  }

  #global-header .site-header,
  .site-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
    z-index:2147483000 !important;
    overflow:visible !important;
    pointer-events:auto !important;
    -webkit-transform:translateZ(0) !important;
    transform:translateZ(0) !important;
  }

  #global-header .header-inner,
  .site-header .header-inner{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  #global-header .header-top,
  .site-header .header-top{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  #global-header .mobile-toggle,
  .site-header .mobile-toggle,
  button[data-mobile-open]{
    position:absolute !important;
    right:0 !important;
    top:50% !important;
    transform:translateY(-50%) translateZ(0) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:7px !important;
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    cursor:pointer !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:transparent !important;
    z-index:2147483001 !important;
  }

  #global-header .mobile-toggle span,
  .site-header .mobile-toggle span,
  button[data-mobile-open] span{
    display:block !important;
    width:34px !important;
    height:1px !important;
    margin:0 !important;
    background:#c8ad72 !important;
    pointer-events:none !important;
  }

  #iht-mobile,
  #iht-mobile *,
  .iht-mobile,
  .iht-mobile *{
    box-sizing:border-box !important;
  }

  #iht-mobile.iht-mobile,
  .iht-mobile{
    z-index:2147483647 !important;
  }

  /* Inner page hero visual layers must never steal the hamburger tap. */
  section[class*="-hero"]::before,
  section[class*="-hero"]::after,
  [class*="-hero-media"],
  [class*="-hero-media"] *{
    pointer-events:none !important;
  }

  /* Keep page width stable on mobile Safari without using 100vw. */
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    position:relative !important;
  }
}

@media (max-width:760px){

  /* Mobile inner-page hero background visibility.
     Desktop is untouched. Homepage .hero is intentionally excluded. */
  section[class*="-hero"]:not(.hero) [class*="-hero-media"] img,
  section[class*="-hero"]:not(.hero) picture img{
    filter:grayscale(4%) brightness(0.86) contrast(1.08) saturate(1.04) !important;
    opacity:1 !important;
  }

  section[class*="-hero"]:not(.hero)::before{
    background:rgba(5,5,5,0.04) !important;
  }

  section[class*="-hero"]:not(.hero)::after{
    background:
      radial-gradient(circle at center, rgba(198,169,107,0.025), transparent 42%),
      linear-gradient(180deg, rgba(5,5,5,0.10) 0%, rgba(5,5,5,0.34) 58%, #050505 100%),
      linear-gradient(90deg, rgba(5,5,5,0.34) 0%, rgba(5,5,5,0.08) 50%, rgba(5,5,5,0.34) 100%) !important;
  }

  section[class*="-hero"]:not(.hero) [class*="-hero-inner"]{
    text-shadow:0 3px 24px rgba(0,0,0,0.78) !important;
  }
}

/* =========================================================
   ILLUSTHRONE — SAFARI MOBILE HEADER TAP FINAL LOCK
   Scope: mobile only. Desktop is untouched.
   Purpose: keep hamburger above all inner-page hero layers in Safari
   and prevent invisible page overlays from stealing the tap.
========================================================= */

@media (max-width:1180px){

  #global-header{
    position:relative !important;
    z-index:2147483000 !important;
    width:100% !important;
    max-width:100% !important;
    pointer-events:none !important;
  }

  #global-header .site-header{
    pointer-events:none !important;
    z-index:2147483000 !important;
    isolation:isolate !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
  }

  #global-header .site-logo,
  #global-header .site-logo *,
  #global-header .mobile-toggle,
  #global-header .mobile-toggle *,
  #global-header button[data-mobile-open],
  #global-header button[data-mobile-open] *{
    pointer-events:auto !important;
  }

  #global-header .mobile-toggle,
  #global-header button[data-mobile-open]{
    -webkit-appearance:none !important;
    appearance:none !important;
    position:absolute !important;
    right:0 !important;
    top:50% !important;
    transform:translateY(-50%) translateZ(0) !important;
    -webkit-transform:translateY(-50%) translateZ(0) !important;
    z-index:2147483001 !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  #iht-mobile{
    z-index:2147483647 !important;
    pointer-events:auto !important;
  }

  #iht-mobile:not(.is-open){
    pointer-events:none !important;
  }

  #iht-mobile.is-open{
    pointer-events:auto !important;
  }

  body:not(.illusthrone-mobile-open) #iht-mobile{
    display:none !important;
  }

  body.illusthrone-mobile-open #iht-mobile{
    display:block !important;
  }

  main,
  section,
  [class*="-hero"],
  [class*="-hero"]::before,
  [class*="-hero"]::after,
  [class*="-hero-media"],
  [class*="-hero-media"] *{
    -webkit-tap-highlight-color:transparent !important;
  }

  [class*="-hero"]::before,
  [class*="-hero"]::after,
  [class*="-hero-media"],
  [class*="-hero-media"] *{
    pointer-events:none !important;
  }
}
