/* Visit Locals — Cinematic Motion System v1 */
:root { --vl-ease: cubic-bezier(.22,1,.36,1); --vl-ink:#03002e; --vl-gold:#c7a852; }
html { scroll-behavior:smooth; }
body { overflow-x:hidden; }

/* Smooth page entrance */
body.vl-ready main { opacity:1; }
body:not(.vl-ready) main { opacity:0; }
body.vl-ready main { transition:opacity .65s ease; }

/* Header glass movement */
header { transition: background-color .45s ease, box-shadow .45s ease, backdrop-filter .45s ease, transform .45s var(--vl-ease); }
header.vl-scrolled { background:rgba(255,249,232,.82)!important; box-shadow:0 10px 35px rgba(3,0,46,.09)!important; backdrop-filter:blur(18px) saturate(1.15)!important; }
header.vl-scrolled img { transform:scale(.94); transition:transform .45s var(--vl-ease); }

/* Scroll reveal */
.vl-reveal { opacity:0; transform:translate3d(0,28px,0); transition:opacity .8s ease, transform .9s var(--vl-ease); }
.vl-reveal.vl-visible { opacity:1; transform:none; }
.vl-reveal.vl-delay-1 { transition-delay:.08s; }
.vl-reveal.vl-delay-2 { transition-delay:.16s; }
.vl-reveal.vl-delay-3 { transition-delay:.24s; }

/* Cinematic sections */
.vl-cinematic { position:relative!important; isolation:isolate; overflow:hidden!important; background:#03002e!important; }
.vl-cinematic::before { content:""; position:absolute; inset:-2.5%; z-index:1; background-image:var(--vl-bg); background-size:cover; background-position:center; transform:translate3d(var(--vl-move-x,0px),var(--vl-move-y,0px),0) scale(1.065); transform-origin:center; transition:transform 1.2s var(--vl-ease), filter 1s ease; filter:saturate(1.02) contrast(1.04); will-change:transform; pointer-events:none; }
.vl-cinematic::after { content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(110deg, rgba(3,0,46,.86) 0%, rgba(3,0,46,.62) 42%, rgba(3,0,46,.30) 100%); pointer-events:none; }
.vl-cinematic > :not(.absolute) { position:relative; z-index:3; }
.vl-cinematic.vl-light::after { background:linear-gradient(110deg,rgba(3,0,46,.82),rgba(3,0,46,.55) 55%,rgba(3,0,46,.28)); }
.vl-cinematic.vl-business::after { background:linear-gradient(110deg,rgba(3,0,46,.90) 0%,rgba(3,0,46,.72) 48%,rgba(3,0,46,.42) 100%); }
.vl-cinematic.vl-business h1, .vl-cinematic.vl-business h2, .vl-cinematic.vl-business p, .vl-cinematic.vl-business .text-primary, .vl-cinematic.vl-business .text-on-surface-variant { color:#fff!important; }
.vl-cinematic.vl-business .border-surface-container-highest { border-color:rgba(255,255,255,.22)!important; }
.vl-cinematic.vl-business .text-tertiary { color:#ffe08e!important; }
.vl-cinematic.vl-business a.border { color:#fff!important; border-color:rgba(255,255,255,.42)!important; }
.vl-cinematic.vl-visible::before { transform:translate3d(var(--vl-move-x,0px),var(--vl-move-y,0px),0) scale(1.035); }

/* Background visual depth on selected content sections */
.vl-atmospheric { position:relative!important; isolation:isolate; overflow:hidden!important; }
.vl-atmospheric::before { content:""; position:absolute; inset:0; z-index:-2; background-image:var(--vl-bg); background-size:cover; background-position:center; opacity:.11; transform:scale(1.03); transition:transform 1.6s var(--vl-ease), opacity .8s ease; }
.vl-atmospheric::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(255,249,232,.88),rgba(255,249,232,.97)); }
.vl-atmospheric.vl-visible::before { transform:scale(1); opacity:.17; }

/* Hero carousel */
.vl-hero-carousel { position:absolute; inset:0; z-index:0; overflow:hidden; background:#03002e; }
.vl-hero-slide { position:absolute; inset:0; opacity:0; transform:scale(1.06); transition:opacity 1.25s ease, transform 7s var(--vl-ease); background-size:cover; background-position:center; }
.vl-hero-slide.is-active { opacity:1; transform:scale(1); }
.vl-hero-carousel::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,0,46,.88),rgba(3,0,46,.42) 52%,rgba(3,0,46,.18)),linear-gradient(0deg,rgba(3,0,46,.82),rgba(3,0,46,.08) 62%); }
.vl-carousel-controls { position:absolute; right:clamp(18px,4vw,64px); bottom:clamp(20px,4vw,54px); z-index:3; display:flex; align-items:center; gap:10px; }
.vl-carousel-btn { width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.11);color:#fff;backdrop-filter:blur(10px);display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--vl-ease),background .3s ease,border-color .3s ease; }
.vl-carousel-btn:hover { transform:translateY(-2px) scale(1.04); background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.65); }
.vl-carousel-progress { min-width:96px;height:3px;background:rgba(255,255,255,.25);overflow:hidden;border-radius:99px; }
.vl-carousel-progress span { display:block;height:100%;width:0;background:#ffe08e;animation:vl-progress 6.5s linear infinite; }
@keyframes vl-progress { from{width:0} to{width:100%} }
.vl-carousel-label { color:rgba(255,255,255,.86);font:600 10px/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase; }

/* Home visual journal */
.vl-visual-journal { position:relative; overflow:hidden; background:#03002e; color:#fff; }
.vl-visual-journal::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 15%,rgba(199,168,82,.22),transparent 30%),radial-gradient(circle at 85% 80%,rgba(26,108,57,.24),transparent 34%); }
.vl-journal-track { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:rgba(255,224,142,.65) rgba(255,255,255,.10); padding:8px 2px 18px; }
.vl-journal-track::-webkit-scrollbar { display:block; height:7px; }
.vl-journal-track::-webkit-scrollbar-track { background:rgba(255,255,255,.10); border-radius:999px; }
.vl-journal-track::-webkit-scrollbar-thumb { background:rgba(255,224,142,.65); border-radius:999px; }
.vl-journal-card { flex:0 0 min(74vw,420px); height:440px; scroll-snap-align:start; border-radius:20px; overflow:hidden; position:relative; background:#111; box-shadow:0 18px 55px rgba(0,0,0,.25); }
.vl-journal-card img { width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--vl-ease),filter .6s ease; }
.vl-journal-card::after { content:""; position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,0,46,.92),rgba(3,0,46,.02) 65%); }
.vl-journal-card:hover img { transform:scale(1.065); filter:saturate(1.08); }
.vl-journal-copy { position:absolute;left:24px;right:24px;bottom:24px;z-index:2; }
.vl-journal-copy span { font:600 10px/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#ffe08e; }
.vl-journal-copy h3 { margin:.5rem 0 0;font:400 32px/1.08 'Newsreader',serif; }
.vl-journal-copy p { margin:.65rem 0 0;color:rgba(255,255,255,.75);font:400 13px/1.65 'Plus Jakarta Sans',sans-serif; }
.vl-journal-nav { display:flex;gap:8px; }

/* Buttons/cards feel more alive */
.vl-hover-panel,.vl-hover-card,.vl-hover-mini { transition:transform .55s var(--vl-ease),box-shadow .55s ease,background-color .45s ease,border-color .45s ease; }
.vl-hover-panel:hover { transform:translateY(-8px); }
.vl-hover-card:hover { transform:translateY(-8px) scale(1.008); }

/* Image micro motion */
main img:not(.vl-static) { transition:transform .8s var(--vl-ease),filter .5s ease; }
.vl-image-hover:hover { transform:scale(1.035); filter:saturate(1.06); }


/* Visible site scrollbar — the original prototype globally hid it. */
html { scrollbar-width:thin; scrollbar-color:#8f7b3b #eee8d4; }
body { scrollbar-gutter:stable; }
::-webkit-scrollbar { display:block!important; width:10px; height:10px; }
::-webkit-scrollbar-track { background:#eee8d4; }
::-webkit-scrollbar-thumb { background:#8f7b3b; border-radius:999px; border:2px solid #eee8d4; }
::-webkit-scrollbar-thumb:hover { background:#6f5c22; }

/* Respect reduced-motion */
@media (prefers-reduced-motion:reduce) {
  html{scroll-behavior:auto}.vl-reveal{opacity:1;transform:none;transition:none}.vl-cinematic::before,.vl-atmospheric::before{transform:none;transition:none}.vl-hero-slide{transition:none}.vl-journal-card img{transition:none}.vl-carousel-progress span{animation:none;width:100%}
}

@media (max-width:768px) {
  .vl-journal-card { flex-basis:82vw;height:380px; }
  .vl-carousel-controls { right:18px;bottom:18px; }
  .vl-carousel-label { display:none; }
}


/* V5 — editorial polish: luminous navigation + richer light surfaces */
:root {
  --vl-paper: #f3efe5;
  --vl-paper-2: #ebe6d8;
  --vl-paper-3: #faf7ef;
  --vl-line: rgba(116,91,7,.68);
  --vl-line-glow: rgba(228,195,106,.72);
}

/* Luminous menu-line interaction inspired by the reference site's hover language. */
header nav a {
  position:relative;
  isolation:isolate;
  padding-left:.15rem!important;
  padding-right:.15rem!important;
  transition:color .35s ease, transform .35s var(--vl-ease), text-shadow .35s ease!important;
}
header nav a::before {
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:0;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#ffe08e 20%,#fff6c7 50%,#ffe08e 80%,transparent);
  box-shadow:0 0 7px rgba(255,224,142,.75),0 0 15px rgba(255,224,142,.34);
  transform:translateX(-50%);
  transition:width .45s var(--vl-ease), opacity .35s ease;
  opacity:0;
}
header nav a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#fff9df,transparent);
  filter:blur(.35px);
  opacity:0;
  transform:translateX(-115%);
  pointer-events:none;
}
header nav a:hover,
header nav a:focus-visible {
  color:#745b07!important;
  transform:translateY(-1px);
  text-shadow:0 0 12px rgba(228,195,106,.22);
}
header nav a:hover::before,
header nav a:focus-visible::before,
header nav a.active::before,
header nav a[aria-current="page"]::before {
  width:100%;
  opacity:1;
}
header nav a:hover::after,
header nav a:focus-visible::after {
  width:58%;
  opacity:1;
  animation:vl-nav-light-sweep .72s var(--vl-ease) forwards;
}
@keyframes vl-nav-light-sweep {
  0% { transform:translateX(-115%); opacity:0; }
  18% { opacity:1; }
  100% { transform:translateX(190%); opacity:0; }
}

/* More premium paper tones: warm, layered, not a flat #fff9e8 field. */
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.72), transparent 30%),
    linear-gradient(135deg,var(--vl-paper),#f6f2e8 46%,var(--vl-paper-2));
  color:#25231c;
}
main.bg-background, main.w-full.bg-background { background:transparent!important; }
main > div > section.vl-soft-surface-a { background:linear-gradient(135deg,#f8f5ed 0%,#eee9dc 100%)!important; }
main > div > section.vl-soft-surface-b { background:linear-gradient(135deg,#ebe6d9 0%,#f6f2e9 100%)!important; }
.vl-soft-surface-a::after,.vl-soft-surface-b::after { opacity:.92; }

/* Give white cards a little separation from the paper instead of letting them disappear. */
.vl-page-explore .bg-surface,
.vl-page-experience .bg-surface,
.vl-page-insight .bg-surface,
.vl-page-partner .bg-surface,
.vl-page-business .bg-surface {
  box-shadow:0 12px 35px rgba(54,44,20,.075);
}

/* Explore V5: stronger hierarchy and a more editorial hero/search tray. */
.vl-page-explore .vl-explore-hero {
  min-height:680px;
  box-shadow:0 24px 70px rgba(3,0,46,.18);
}
.vl-page-explore .vl-explore-hero > div {
  position:relative;
}
.vl-page-explore .vl-explore-hero .rounded-xl.shadow-xl {
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 22px 55px rgba(3,0,46,.24)!important;
}
.vl-page-explore .vl-explore-hero h1 {
  text-shadow:0 5px 28px rgba(0,0,0,.24);
}
.vl-page-explore .vl-explore-hero + section,
.vl-page-explore .vl-explore-hero ~ section {
  scroll-margin-top:100px;
}

/* Make the long Explore page feel intentionally layered. */
.vl-page-explore main section:not(.vl-explore-hero) {
  border-top:1px solid rgba(116,91,7,.07);
}

@media (max-width: 1279px) {
  header nav a::before, header nav a::after { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  header nav a::after { animation:none!important; }
}


/* V6 — richer chromatic paper + Explore motion correction */
:root {
  --vl-navy: #050040;
  --vl-blue: #173d68;
  --vl-blue-glow: #3d6f9f;
  --vl-rose: #c98791;
  --vl-coral: #d98262;
  --vl-saffron: #e5b94d;
  --vl-paper-warm: #f2ecdf;
}

/* Replace flat light fields with restrained geometric color compositions.
   Inspired by tactile editorial paper blocks, but kept within the Visit Locals palette. */
main > div > section.vl-soft-surface-a,
main > div > section.vl-soft-surface-b {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#f2ecdf!important;
}
main > div > section.vl-soft-surface-a::before,
main > div > section.vl-soft-surface-b::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(148deg, rgba(229,185,77,.24) 0 23%, transparent 23% 100%),
    linear-gradient(32deg, transparent 0 63%, rgba(201,135,145,.18) 63% 82%, transparent 82%),
    linear-gradient(118deg, transparent 0 72%, rgba(23,61,104,.10) 72% 100%),
    radial-gradient(circle at 8% 88%, rgba(217,130,98,.12), transparent 25%),
    linear-gradient(135deg,#f8f4eb 0%,#eee7d9 100%);
  transform:scale(1.03);
}
main > div > section.vl-soft-surface-b::before {
  background:
    linear-gradient(28deg, rgba(23,61,104,.12) 0 19%, transparent 19% 100%),
    linear-gradient(156deg, transparent 0 57%, rgba(229,185,77,.22) 57% 78%, transparent 78%),
    linear-gradient(92deg, transparent 0 73%, rgba(201,135,145,.16) 73% 100%),
    radial-gradient(circle at 88% 12%, rgba(217,130,98,.13), transparent 24%),
    linear-gradient(135deg,#eee8dc 0%,#f8f3e9 100%);
}
main > div > section.vl-soft-surface-a::after,
main > div > section.vl-soft-surface-b::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.30),transparent 58%);
}

/* Subtle paper grain without an external image. */
main > div > section.vl-soft-surface-a,
main > div > section.vl-soft-surface-b {
  background-image:
    radial-gradient(rgba(5,0,64,.035) .7px, transparent .7px),
    linear-gradient(135deg,#f6f0e5,#ece5d8);
  background-size:9px 9px,100% 100%;
}

/* Explore: use the sharper local 16:9 image layer and visibly animate it. */
.vl-page-explore .vl-explore-hero::before { background-image:none!important; }
.vl-page-explore .vl-explore-hero .vl-explore-bg {
  z-index:1!important;
  opacity:1!important;
  background-size:cover!important;
  background-position:center!important;
  transform:translate3d(var(--vl-explore-x,0px),var(--vl-explore-y,0px),0) scale(1.09)!important;
  filter:saturate(1.08) contrast(1.05);
  animation:vl-explore-drift 15s ease-in-out infinite alternate;
  transition:transform 1s var(--vl-ease),filter .7s ease;
  will-change:transform;
}
.vl-page-explore .vl-explore-hero .vl-explore-bg::after { content:""; position:absolute; inset:0; }
@keyframes vl-explore-drift {
  0% { background-position:47% 50%; }
  100% { background-position:53% 48%; }
}
.vl-page-explore .vl-explore-hero:hover .vl-explore-bg { filter:saturate(1.12) contrast(1.07); }

/* V6 header light sweep — deep navy instead of gold. */
header nav a::before {
  background:linear-gradient(90deg,transparent,#173d68 20%,#315d86 50%,#173d68 80%,transparent)!important;
  box-shadow:0 0 7px rgba(23,61,104,.62),0 0 15px rgba(23,61,104,.24)!important;
}
header nav a::after {
  background:linear-gradient(90deg,transparent,#173d68,#6f98bd,transparent)!important;
  box-shadow:0 0 7px rgba(23,61,104,.45)!important;
}
header nav a:hover,
header nav a:focus-visible { color:#173d68!important; text-shadow:0 0 12px rgba(23,61,104,.20)!important; }

@media (prefers-reduced-motion:reduce) {
  .vl-page-explore .vl-explore-hero .vl-explore-bg { animation:none!important; transform:scale(1.05)!important; }
}

/* V7 — Warm Sage / Lightweight Editorial Backgrounds
   Replace the V6 geometric paper compositions with solid, warm surfaces.
   Keep cinematic photography only where it adds real visual value (hero/image sections). */
:root {
  --vl-sage: #e5eadb;
  --vl-sage-2: #edf0e4;
  --vl-ivory: #f7f4ea;
  --vl-warm: #f2e7d5;
  --vl-navy: #050040;
  --vl-deep-blue: #173d68;
  --vl-sage-border: rgba(67,82,52,.14);
}

html { background:var(--vl-ivory)!important; }
body {
  background:var(--vl-sage)!important;
  color:#25251f;
}

/* Solid light sections — no layered gradients or geometric pseudo artwork. */
main > div > section.vl-soft-surface-a,
main > div > section.vl-soft-surface-b,
main section.vl-soft-surface-a,
main section.vl-soft-surface-b {
  background:var(--vl-sage)!important;
  background-image:none!important;
  border-top:1px solid var(--vl-sage-border);
}

main > div > section.vl-soft-surface-b,
main section.vl-soft-surface-b {
  background:var(--vl-ivory)!important;
}

/* Remove the decorative image/shape layers that made V6 heavier. */
main > div > section.vl-soft-surface-a::before,
main > div > section.vl-soft-surface-a::after,
main > div > section.vl-soft-surface-b::before,
main > div > section.vl-soft-surface-b::after {
  display:none!important;
}

/* Atmospheric imagery is disabled on ordinary content sections. */
.vl-atmospheric:not(.vl-cinematic)::before,
.vl-atmospheric:not(.vl-cinematic)::after {
  display:none!important;
}
.vl-atmospheric:not(.vl-cinematic) {
  background:var(--vl-sage)!important;
}

/* Cards stay light but gain a little definition against the sage canvas. */
.vl-page-explore .bg-surface,
.vl-page-experience .bg-surface,
.vl-page-insight .bg-surface,
.vl-page-partner .bg-surface,
.vl-page-business .bg-surface {
  background:#fbf8ef!important;
  border:1px solid rgba(67,82,52,.10);
  box-shadow:0 10px 30px rgba(40,50,28,.055)!important;
}

/* Warm orange is reserved as a restrained accent rather than a full background. */
.vl-page-explore .vl-explore-hero + section,
.vl-page-experience .vl-explore-hero + section {
  border-top-color:rgba(205,126,69,.18);
}

/* Keep the dark-blue navigation light sweep from V6. */
header nav a::before {
  background:linear-gradient(90deg,transparent,#173d68 20%,#315d86 50%,#173d68 80%,transparent)!important;
  box-shadow:0 0 7px rgba(23,61,104,.48),0 0 13px rgba(23,61,104,.18)!important;
}
header nav a::after {
  background:linear-gradient(90deg,transparent,#173d68,#6f98bd,transparent)!important;
  box-shadow:0 0 7px rgba(23,61,104,.35)!important;
}
header nav a:hover,
header nav a:focus-visible {
  color:#173d68!important;
  text-shadow:0 0 10px rgba(23,61,104,.14)!important;
}

/* Use a calmer scrollbar that belongs to the new palette. */
html { scrollbar-color:#708061 #dfe5d5!important; }
::-webkit-scrollbar-track { background:#dfe5d5!important; }
::-webkit-scrollbar-thumb { background:#708061!important; border-color:#dfe5d5!important; }
::-webkit-scrollbar-thumb:hover { background:#536544!important; }

/* Reduce non-essential visual work on light sections. */
.vl-page-explore .vl-explore-hero .vl-explore-bg {
  animation-duration:20s!important;
}

@media (prefers-reduced-motion:reduce) {
  .vl-atmospheric:not(.vl-cinematic)::before,
  .vl-atmospheric:not(.vl-cinematic)::after { display:none!important; }
}

/* V9 — Mobile reliability + carousel control correction */
@media (max-width: 768px) {
  /* Never let the cinematic entrance animation leave mobile looking blank if
     JavaScript is delayed by the browser/network. */
  body main,
  body:not(.vl-ready) main {
    opacity: 1 !important;
    transition: none !important;
  }

  /* Mobile should reveal cards immediately; IntersectionObserver is a nice
     enhancement on desktop, not a prerequisite for seeing the content. */
  main .vl-reveal,
  main .vl-reveal.vl-delay-1,
  main .vl-reveal.vl-delay-2,
  main .vl-reveal.vl-delay-3 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Keep the Home hero controls entirely inside the viewport. */
  .vl-hero-carousel .vl-carousel-controls {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    width: auto !important;
    transform: none !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  .vl-hero-carousel .vl-carousel-progress {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 120px !important;
  }

  .vl-hero-carousel .vl-carousel-btn {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
  }

  /* Cards must be visibly and directly tappable. */
  .experience-card {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .experience-card .group-hover\\:scale-105,
  .experience-card img {
    transform: none !important;
  }

  /* Give mobile cards a comfortable tap target without relying on hover. */
  .experience-card button {
    min-height: 44px;
  }
}