/* Visit Locals — Home v15 visual layer
   Loaded last on the home page only. Pure CSS: nothing here blocks content from showing. */
:root{
  --vl-ink:#03002e; --vl-ink-2:#0b0a45; --vl-gold:#c7a852; --vl-gold-2:#e4c36a; --vl-gold-3:#ffe08e;
  --vl-green:#1a6c39; --vl-mint:#88d899; --vl-ease:cubic-bezier(.22,1,.36,1);
  --vl-card-shadow:0 1px 2px rgba(3,0,46,.06),0 12px 32px -12px rgba(3,0,46,.18);
  --vl-card-shadow-hover:0 2px 6px rgba(3,0,46,.08),0 28px 60px -18px rgba(3,0,46,.32);
}

/* ---------- Speed: never hide the page while scripts load ---------- */
body:not(.vl-ready) main, body.vl-ready main{opacity:1!important;transition:none!important}

/* ---------- Header ---------- */
header.fixed{background:rgba(255,249,232,.86)!important;border-bottom:1px solid rgba(3,0,46,.06)}
@media (min-width:640px){header .font-display-lg{letter-spacing:.06em}}

/* ---------- Hero ---------- */
.vl-hero{isolation:isolate;background:var(--vl-ink)}
.vl-hero-inner{min-height:min(860px,calc(100svh - 80px));min-height:max(640px,min(860px,calc(100svh - 80px)))}
.vl-hero .vl-hero-carousel{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--vl-ink)}
.vl-hero .vl-hero-slide{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.08);transition:opacity 1.4s ease,transform 8s var(--vl-ease)}
.vl-hero .vl-hero-slide.is-active{opacity:1;transform:scale(1)}
.vl-hero .vl-hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block}
.vl-hero .vl-hero-carousel::after{content:"";position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(120% 90% at 0% 100%,rgba(3,0,46,.92) 0%,rgba(3,0,46,.55) 45%,rgba(3,0,46,0) 75%),
    linear-gradient(90deg,rgba(3,0,46,.78) 0%,rgba(3,0,46,.38) 48%,rgba(3,0,46,.08) 100%),
    linear-gradient(0deg,rgba(3,0,46,.85) 0%,rgba(3,0,46,0) 40%),
    linear-gradient(180deg,rgba(3,0,46,.45) 0%,rgba(3,0,46,0) 22%)}
.vl-hero-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vl-hero h1{font-size:clamp(44px,7.2vw,96px)!important;line-height:.98!important;letter-spacing:-.025em!important;text-shadow:0 8px 40px rgba(3,0,46,.35)}
.vl-hero h1 .italic{display:inline-block;padding-right:.08em;
  background:linear-gradient(100deg,#f4e3a8 0%,#e4c36a 35%,#a3f5b4 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.vl-hero .vl-hero-copy p{font-size:clamp(17px,1.5vw,21px)!important;line-height:1.6!important;color:rgba(255,249,232,.86)!important;max-width:38rem}
.vl-hero .vl-hero-copy a{border-radius:999px!important;padding:1rem 1.6rem!important}
.vl-hero .vl-hero-copy a:first-child{background:linear-gradient(135deg,#1f8046,#1a6c39)!important;box-shadow:0 12px 30px -10px rgba(26,108,57,.75),inset 0 1px 0 rgba(255,255,255,.18)!important}
.vl-hero .vl-hero-copy a:first-child:hover{box-shadow:0 18px 40px -12px rgba(26,108,57,.9),inset 0 1px 0 rgba(255,255,255,.2)!important}
.vl-hero .vl-hero-copy a:last-child{border:1px solid rgba(255,249,232,.38)}
.vl-hero .vl-hero-copy a:last-child:hover{border-color:rgba(255,249,232,.7)}

/* Entrance — CSS only, plays once, starts with first paint */
@keyframes vl-rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .vl-hero .vl-hero-copy>*{animation:vl-rise .9s var(--vl-ease) both}
  .vl-hero .vl-hero-copy>*:nth-child(2){animation-delay:.12s}
  .vl-hero .vl-hero-copy>*:nth-child(3){animation-delay:.22s}
  .vl-hero .vl-hero-stats{animation:vl-rise 1s var(--vl-ease) .34s both}
}

/* Trust bar: glass panel with hairline dividers */
.vl-hero .vl-hero-stats{background:linear-gradient(135deg,rgba(255,249,232,.12),rgba(255,249,232,.05))!important;border:1px solid rgba(255,249,232,.16);
  border-radius:20px!important;padding:1.1rem 1.25rem!important;box-shadow:0 20px 50px -20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);margin-bottom:3.25rem}
.vl-hero .vl-hero-stats>div{padding:.25rem .5rem}
@media (min-width:640px){.vl-hero .vl-hero-stats>div+div{border-left:1px solid rgba(255,249,232,.14);padding-left:1.25rem}}
.vl-hero .vl-hero-stats .material-symbols-outlined{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:22px!important;
  background:rgba(136,216,153,.12);border:1px solid rgba(136,216,153,.22);color:#a3f5b4!important}
.vl-hero .vl-hero-stats .font-headline-sm{font-family:Newsreader,Georgia,serif;font-size:26px!important;line-height:1.1!important;font-weight:500!important}
.vl-hero .vl-hero-stats .text-surface-variant{color:rgba(255,249,232,.66)!important;letter-spacing:.1em!important}

@media (max-width:639px){
  .vl-hero .vl-hero-stats{gap:.9rem 1rem!important;padding:1rem!important}
  .vl-hero .vl-hero-stats>div{padding:0;gap:.6rem!important}
  .vl-hero .vl-hero-stats .material-symbols-outlined{width:34px;height:34px;border-radius:10px;font-size:18px!important;flex:0 0 34px}
  .vl-hero .vl-hero-stats .font-headline-sm{font-size:19px!important}
  .vl-hero .vl-hero-stats .text-surface-variant{font-size:9px!important;letter-spacing:.08em!important}
  .vl-hero .vl-hero-copy a{padding:.85rem 1.3rem!important}
}
/* Carousel controls — above the copy layer so they are actually clickable */
.vl-hero-controls{position:absolute;z-index:20;--vl-pad:1.5rem;left:calc(max(0px,(100% - 80rem)/2) + var(--vl-pad));bottom:52px;display:flex;align-items:center;gap:10px}
.vl-hero-caption{order:5;display:inline-flex;align-items:center;gap:8px;margin-left:8px;color:rgba(255,249,232,.9);font:500 12px/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.06em}
.vl-hero-caption [data-vl-caption]{display:inline-block}
.vl-hero-caption [data-vl-caption].is-in{animation:vl-rise .6s var(--vl-ease) both}
.vl-hero-caption-dot{width:7px;height:7px;border-radius:50%;background:var(--vl-gold-3);box-shadow:0 0 0 4px rgba(255,224,142,.18)}
.vl-hero-controls .vl-carousel-label{order:-2;color:rgba(255,255,255,.7);font:600 10px/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em}
.vl-hero-controls .vl-carousel-progress{order:-1;width:96px;height:2px;background:rgba(255,255,255,.22);overflow:hidden;border-radius:99px}
.vl-hero-controls .vl-carousel-progress span{display:block;height:100%;width:0;background:var(--vl-gold-3);animation:vl-progress 6.5s linear infinite}
.vl-hero-controls .vl-carousel-btn{width:40px;height:40px}
.vl-hero-controls .vl-carousel-btn .material-symbols-outlined{font-size:20px}
@media (max-width:640px){
  .vl-hero-controls{bottom:46px}
  .vl-hero-controls .vl-carousel-label{display:none}
  .vl-hero-controls .vl-carousel-progress{width:56px}
  .vl-hero .vl-hero-stats{margin-bottom:3.5rem}
}
@media (min-width:768px){.vl-hero-controls{--vl-pad:3rem}}
@media (min-width:1024px){.vl-hero-controls{--vl-pad:6rem}}
@media (prefers-reduced-motion:reduce){.vl-hero .vl-hero-slide{transition:opacity .4s ease;transform:none!important}.vl-hero-controls .vl-carousel-progress span{animation:none;width:100%}}

/* ---------- Section rhythm ---------- */
.vl-eyebrow{display:inline-flex!important;align-items:center;gap:.75rem;color:#7a5f0c!important;letter-spacing:.2em!important}
.vl-eyebrow::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--vl-gold),rgba(199,168,82,.2))}
main h2.font-display-md{font-size:clamp(32px,4.2vw,52px)!important;line-height:1.06!important;letter-spacing:-.02em!important}
section#sovereign-business .vl-eyebrow, .bg-primary .vl-eyebrow{color:var(--vl-gold-3)!important}

/* ---------- Gateway cards (travel / business) ---------- */
.vl-gate{border:1px solid rgba(3,0,46,.07);box-shadow:var(--vl-card-shadow)!important;transition:transform .5s var(--vl-ease),box-shadow .5s ease!important;border-radius:24px!important}
.vl-gate:hover{transform:translateY(-6px);box-shadow:var(--vl-card-shadow-hover)!important}
.vl-gate-media{position:relative;height:210px;margin:-2rem -2rem 1.75rem;overflow:hidden}
@media (min-width:768px){.vl-gate-media{margin:-2.5rem -2.5rem 2rem;height:240px}}
.vl-gate-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--vl-ease)}
.vl-gate:hover .vl-gate-media img{transform:scale(1.06)}
.vl-gate-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,0,46,0) 45%,rgba(255,249,232,.95) 100%)}
.vl-gate-dark .vl-gate-media::after{background:linear-gradient(180deg,rgba(3,0,46,.05) 35%,var(--vl-ink) 100%)}
.vl-gate h2{font-size:clamp(30px,3vw,40px)!important;line-height:1.1!important}
.vl-gate-dark{background:radial-gradient(120% 80% at 100% 100%,rgba(26,108,57,.28),transparent 55%),var(--vl-ink)!important}

/* ---------- Search tray ---------- */
#guide-search-input{border:1px solid rgba(3,0,46,.1);border-radius:999px!important;padding-top:.95rem!important;padding-bottom:.95rem!important;box-shadow:inset 0 1px 2px rgba(3,0,46,.05)!important;transition:box-shadow .3s ease,border-color .3s ease}
#guide-search-input:focus{border-color:rgba(26,108,57,.5);box-shadow:0 0 0 4px rgba(136,216,153,.25)!important}
#home-archive-search{border-radius:999px!important;padding-left:1.75rem!important;padding-right:1.75rem!important}
#home-archive-search + * , #guide-search-input{font-size:15px}
section button[onclick^="filterByTag"]{border:1px solid rgba(3,0,46,.08);background:rgba(255,255,255,.65)!important;transition:all .25s ease}
section button[onclick^="filterByTag"]:hover{background:var(--vl-ink)!important;color:#fff!important;transform:translateY(-1px)}

/* ---------- Experience cards ---------- */
#experiences .category-btn{border-radius:999px!important}
#experiences .category-btn.bg-primary{box-shadow:0 6px 16px -6px rgba(3,0,46,.6)}
#experiences .flex.flex-wrap.items-center.gap-2.p-1\.5{border-radius:999px!important;background:rgba(255,255,255,.6)!important;border:1px solid rgba(3,0,46,.07)}
.experience-card{border-radius:22px!important;border-color:rgba(3,0,46,.07)!important;box-shadow:var(--vl-card-shadow)!important;transition:transform .5s var(--vl-ease),box-shadow .5s ease!important}
@media (hover:hover){.experience-card:hover{transform:translateY(-6px)!important;box-shadow:var(--vl-card-shadow-hover)!important}}
.experience-card>div:first-child{position:relative;border-radius:22px 22px 0 0!important}
.experience-card>div:first-child::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,0,46,.18) 0%,rgba(3,0,46,0) 30%,rgba(3,0,46,0) 62%,rgba(3,0,46,.42) 100%)}
.experience-card>div:first-child>.absolute{z-index:2}
.experience-card img{transition:transform 1.1s var(--vl-ease)!important}
@media (hover:hover){.experience-card:hover img{transform:scale(1.07)!important}}
.experience-card h3{font-size:23px!important;line-height:1.2!important;letter-spacing:-.01em}
.experience-card button{border-radius:999px!important;padding-left:1.1rem!important;padding-right:1.1rem!important}
.experience-card .pt-4{border-top:1px dashed rgba(3,0,46,.12);margin-top:.5rem}
@media (max-width:767px){
  #experiences .flex.flex-wrap.items-center.gap-2.p-1\.5{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-right:-1.5rem;border-radius:999px 0 0 999px!important}
  #experiences .flex.flex-wrap.items-center.gap-2.p-1\.5::-webkit-scrollbar{display:none!important}
  #experiences .category-btn{white-space:nowrap;flex:0 0 auto}
}
#experience-show-more{border-radius:999px!important;border:1px solid rgba(3,0,46,.12)}

/* ---------- Destinations bento ---------- */
.vl-dest{border-radius:24px!important;border:0!important;box-shadow:var(--vl-card-shadow)!important;transition:transform .55s var(--vl-ease),box-shadow .55s ease!important}
.vl-dest:hover{box-shadow:var(--vl-card-shadow-hover)!important}
.vl-dest>img{position:absolute;inset:0;transition:transform 1.4s var(--vl-ease)!important}
.vl-dest:hover>img{transform:scale(1.07)!important}
.vl-dest>.bg-gradient-to-t{background:linear-gradient(0deg,rgba(3,0,46,.92) 0%,rgba(3,0,46,.45) 42%,rgba(3,0,46,0) 72%)!important}
.vl-dest h3{font-size:30px!important;line-height:1.1!important}
.vl-dest-feature h3{font-size:clamp(36px,4vw,56px)!important}
.vl-dest-feature p{-webkit-line-clamp:3!important;max-width:30rem;font-size:15px!important;line-height:1.6!important}
.vl-dest-wide h3{font-size:clamp(34px,3.6vw,48px)!important}
.vl-dest-wide p{max-width:36rem}
.vl-dest .text-secondary-fixed .material-symbols-outlined{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,249,232,.14);border:1px solid rgba(255,249,232,.25)}
.vl-dest:hover .text-secondary-fixed .material-symbols-outlined{background:var(--vl-gold-3);color:var(--vl-ink)}
@media (min-width:1024px){.vl-dest-feature{min-height:calc(48rem + 1.5rem)}}

/* ---------- Pillars / how it works ---------- */
.vl-hover-card.bg-surface-container{background:rgba(255,255,255,.72)!important;border:1px solid rgba(3,0,46,.06);border-radius:22px!important;box-shadow:var(--vl-card-shadow)!important}
.vl-hover-card .w-12.h-12{border-radius:14px!important;background:linear-gradient(135deg,#e7f6e9,#c9ecd1)!important;box-shadow:inset 0 0 0 1px rgba(26,108,57,.12)}
.vl-hover-panel.bg-surface-container-low{background:rgba(255,255,255,.66)!important;border:1px solid rgba(3,0,46,.06);border-radius:24px!important}
.vl-hover-mini .w-9.h-9{background:linear-gradient(135deg,#0b0a45,#03002e)!important;box-shadow:0 0 0 4px rgba(199,168,82,.18)}

/* ---------- Business section: depth on navy ---------- */
#sovereign-business{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(60% 50% at 0% 0%,rgba(199,168,82,.16),transparent 60%),radial-gradient(50% 50% at 100% 100%,rgba(26,108,57,.22),transparent 60%),var(--vl-ink)!important}
#sovereign-business::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.07;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffe08e' stroke-width='1'%3E%3Cpath d='M32 4l28 28-28 28L4 32z'/%3E%3Ccircle cx='32' cy='32' r='9'/%3E%3Cpath d='M32 0v8M32 56v8M0 32h8M56 32h8'/%3E%3C/g%3E%3C/svg%3E");background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
#sovereign-business .business-service-card{border-radius:22px!important;background:linear-gradient(180deg,#fbf6e6,#efe7d0)!important;border:1px solid rgba(255,249,232,.6)}
#sovereign-business .lg\:col-span-5.bg-primary-container{border:1px solid rgba(255,249,232,.1);border-radius:24px!important;background:linear-gradient(160deg,#1c1a5c,#0b0a45)!important}

/* ---------- Inquiry ---------- */
#inquiry form, #inquiry .rounded-xl.shadow-xl, #inquiry .bg-surface-container-lowest{border-radius:24px!important}
#inquiry input, #inquiry select, #inquiry textarea{border-radius:12px!important}

/* ---------- Visual journal ---------- */
.vl-journal-card{border-radius:24px}

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible{outline:2px solid var(--vl-gold);outline-offset:3px;border-radius:8px}

/* ---------- Mobile corrections ---------- */
@media (max-width:639px){
  header .font-display-lg{font-size:18px!important;white-space:nowrap}
  header .font-label-md.text-\[10px\]{font-size:9px!important}
}
/* The older V9 mobile rule forced every experience card visible, which broke the
   "show 10 + Show more" logic and the category filters on phones. Respect the JS state again. */
@media (max-width:768px){
  .experience-card[style*="display: none"]{display:none!important}
}

/* Smoother page-to-page navigation (Chrome/Edge/Safari 18+) */
html{scroll-padding-top:96px}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}