/* ==========================================================================
   CHROME — the global shell
   1. Preloader (gate doors)         4. Mobile menu
   2. Scroll-progress bar            5. Floating WhatsApp button
   3. Header (plate, brand, nav)     6. Custom cursor · 7. Reduced motion
   Everything here is prefixed (.preloader / .site-* / .menu-toggle /
   .mobile-menu / .wa-fab / .lga-cursor / .scroll-progress) so it never
   collides with a section. Colours come from tokens (color-mix for tints).
   ========================================================================== */

/* ==========================================================================
   1. PRELOADER
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  overflow: hidden;
  color: var(--white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Last-resort safety net: if scripting dies mid-intro the doors can never trap the page. */
  animation: chrome-pl-failsafe 0.01s linear 9s forwards;
}
@keyframes chrome-pl-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
/* scroll is locked only while the doors are shut (class set/removed by chrome.js) */
html.is-preloading {
  overflow: hidden;
}

/* --- doors --- */
.preloader__door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.15%; /* a hair of overlap: no sub-pixel seam while idle */
  background: var(--grad-navy);
  will-change: transform;
}
.preloader__door--l {
  left: 0;
  /* soft inner glow where the doors meet (the gold edge itself is the ::after below) */
  box-shadow: inset -60px 0 80px -50px color-mix(in srgb, var(--gold) 20%, transparent);
}
.preloader__door--r {
  right: 0;
  box-shadow: inset 60px 0 80px -50px color-mix(in srgb, var(--gold) 20%, transparent);
}
/* gold edge: bright at the top and bottom, nearly gone behind the lockup so it never cuts through the text */
.preloader__door::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--gold) 0%,
    color-mix(in srgb, var(--gold) 14%, transparent) 26%,
    color-mix(in srgb, var(--gold) 8%, transparent) 62%,
    color-mix(in srgb, var(--gold) 75%, transparent) 90%,
    var(--gold) 100%
  );
}
.preloader__door--l::after {
  right: 0;
}
.preloader__door--r::after {
  left: 0;
}
.preloader__gate {
  position: absolute;
  bottom: 0;
  width: clamp(160px, 44vw, 460px);
  height: auto;
  aspect-ratio: 200 / 220;
  fill: color-mix(in srgb, var(--white) 6%, transparent);
  pointer-events: none;
}
.preloader__door--l .preloader__gate {
  right: 0;
}
.preloader__door--r .preloader__gate {
  left: 0;
}

/* golden light that spills out of the seam as the doors part */
.preloader__light {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform-origin: 50% 50%;
  background: radial-gradient(
    ellipse 9% 62% at 50% 46%,
    color-mix(in srgb, var(--gold-soft) 95%, transparent) 0%,
    color-mix(in srgb, var(--gold) 45%, transparent) 38%,
    transparent 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

/* --- stage: logo + wordmark --- */
.preloader__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vh, 22px);
  padding: 0 var(--gutter) clamp(36px, 9vh, 90px);
  text-align: center;
  pointer-events: none;
}
.preloader__glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(120vw, 820px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--blue-500) 34%, transparent),
    color-mix(in srgb, var(--blue-600) 12%, transparent) 55%,
    transparent 100%
  );
}
.preloader__mark {
  position: relative;
  width: clamp(104px, min(42vw, 26vh), 220px);
  height: auto;
  overflow: visible;
}

/* logo parts, light-on-navy */
.pl-book__page {
  fill: var(--sky-100);
}
.pl-book__cover {
  fill: var(--blue-300);
}
.pl-globe__lines {
  fill: none;
  stroke: var(--sky-100);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.95;
}
.pl-globe__rim {
  fill: none;
  stroke: var(--blue-300);
  stroke-width: 3;
  opacity: 0.8;
}
.pl-cap__under {
  fill: var(--blue-400);
}
.pl-cap__edge {
  fill: var(--blue-300);
}
.pl-spark {
  fill: none;
  stroke: var(--gold-soft);
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0;
}
.pl-cap__cord {
  fill: none;
  stroke: var(--gold);
  stroke-width: 4;
  stroke-linecap: round;
}
.pl-cap__knot {
  fill: var(--gold);
}

/* initial (pre-animation) states: only when JS is on; a fail-safe hides the whole preloader anyway */
html.js .preloader__mark > g,
html.js .preloader__ch,
html.js .preloader__sub,
html.js .preloader__tag,
html.js .preloader__hello,
html.js .preloader__glow,
html.js .preloader__meter {
  opacity: 0;
}
html.js .pl-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* --- wordmark (poster lockup: LUDWIG / GLOBAL ACADEMY PVT LTD. / LEARN | GROW | GLOBAL) --- */
.preloader__word {
  position: relative;
  min-width: min(86vw, 22rem);
  display: grid;
  justify-items: center;
  gap: clamp(6px, 1.2vh, 10px);
  margin: 0;
}
.preloader__name {
  display: inline-flex;
  overflow: hidden; /* masks the letters as they rise */
  padding: 0 0.04em 0.1em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.3rem, min(11.5vw, 8vh), 4.6rem);
  line-height: 1;
  letter-spacing: 0.045em;
  color: var(--white);
}
.preloader__ch {
  display: inline-block;
}
.preloader__sub,
.preloader__tag {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  white-space: nowrap;
}
.preloader__sub {
  padding-top: clamp(6px, 1vh, 10px);
  border-top: 1px solid color-mix(in srgb, var(--white) 26%, transparent);
  font-weight: 600;
  font-size: clamp(0.62rem, 1.5vw, 0.86rem);
  letter-spacing: 0.3em;
  color: var(--on-dark);
}
.preloader__tag {
  font-weight: 500;
  font-size: clamp(0.6rem, 1.35vw, 0.78rem);
  letter-spacing: 0.4em;
  color: var(--blue-300);
}
.preloader__tag i {
  margin: 0 0.9em;
  font-style: normal;
  font-weight: 300;
  color: var(--gold);
}
.preloader__hello {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1;
  color: var(--gold);
  transform: rotate(-3deg);
}

/* --- meter: motto, counter and tricolour sliver --- */
.preloader__meter {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(20px, 5vh, 46px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  row-gap: 12px;
  pointer-events: none;
}
.preloader__motto {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.preloader__count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.2vw, 3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.preloader__num {
  min-width: 2.15ch;
  text-align: right;
}
.preloader__pct {
  font-size: 0.45em;
  font-weight: 700;
  color: var(--gold);
}
.preloader__track {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--white) 15%, transparent);
  overflow: hidden;
}
.preloader__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--grad-flag);
  transform-origin: 0 50%;
}

/* ==========================================================================
   2. SCROLL-PROGRESS BAR  (tricolour, scaleX driven by chrome.js)
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
}
.scroll-progress__bar {
  display: block;
  height: 100%;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--grad-flag);
  transform-origin: 0 50%;
  transform: scaleX(0);
  /* a gold glint so the leading edge stays visible over navy sections */
  box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 70%, transparent);
}

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.site-header {
  /* tone variables — "light" (default) and "dark" (set by chrome.js per section underneath) */
  --hd-fg: var(--ink);
  --hd-fg-strong: var(--navy-800);
  --hd-fg-soft: var(--ink-mute);
  --hd-accent: var(--blue-600);
  --hd-plate-bg: color-mix(in srgb, var(--white) 80%, transparent);
  --hd-plate-line: color-mix(in srgb, var(--white) 75%, transparent);
  --hd-plate-shadow: 0 1px 0 color-mix(in srgb, var(--white) 70%, transparent) inset, var(--shadow-md);
  --hd-pill: color-mix(in srgb, var(--blue-600) 11%, transparent);
  --hd-toggle-bg: color-mix(in srgb, var(--navy-800) 8%, transparent);
  --hd-plate-x: 16px;
  /* logo-mark colours (light surface) */
  --mk-book: var(--navy-800);
  --mk-cap-under: var(--navy-900);
  --mk-cap-edge: var(--navy-900);
  --mk-tassel: var(--navy-800);
  --mk-lines: var(--sky-100);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding-top: env(safe-area-inset-top, 0px);
  pointer-events: none; /* only the bar is interactive, so the strip beside it never blocks clicks */
  transition: transform 0.7s var(--ease-out);
}
.site-header[data-tone="dark"],
.site-header.is-menu-open {
  --hd-fg: var(--on-dark);
  --hd-fg-strong: var(--white);
  --hd-fg-soft: var(--on-dark-soft);
  --hd-accent: var(--gold);
  --hd-plate-bg: color-mix(in srgb, var(--navy-900) 74%, transparent);
  --hd-plate-line: var(--line-on-dark);
  --hd-plate-shadow: 0 1px 0 color-mix(in srgb, var(--white) 10% , transparent) inset, 0 10px 36px color-mix(in srgb, var(--navy-950) 55%, transparent);
  --hd-pill: color-mix(in srgb, var(--white) 13%, transparent);
  --hd-toggle-bg: color-mix(in srgb, var(--white) 12%, transparent);
  --mk-book: var(--sky-100);
  --mk-cap-under: var(--blue-400);
  --mk-cap-edge: var(--blue-300);
  --mk-tassel: var(--gold);
}
.site-header.is-hidden {
  transform: translateY(-140%);
}
/* a keyboard user tabbing into a hidden header brings it back */
.site-header.is-hidden:focus-within {
  transform: none;
}
.site-header.is-menu-open {
  z-index: calc(var(--z-menu) + 1);
}
.site-header[data-tone="dark"] :focus-visible,
.site-header.is-menu-open :focus-visible,
.mobile-menu :focus-visible {
  outline-color: var(--gold);
}

.site-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 28px);
  width: min(100% - 2 * var(--gutter), var(--container));
  height: var(--header-h);
  margin-inline: auto;
  pointer-events: auto;
}
/* Entrance: before the doors open the bar's children wait just above their resting place
   (`is-intro`, set by chrome.js — JS only); while `is-entering` they drop in, staggered by --i. */
.site-header.is-intro .site-brand,
.site-header.is-intro .site-nav__list > li,
.site-header.is-intro .site-header__cta,
.site-header.is-intro .menu-toggle {
  opacity: 0;
  transform: translateY(-18px);
  transition: none;
}
.site-header.is-entering .site-brand,
.site-header.is-entering .site-nav__list > li,
.site-header.is-entering .site-header__cta,
.site-header.is-entering .menu-toggle {
  transition: opacity 0.8s ease calc(var(--i, 0) * 60ms), transform 1s var(--ease-out) calc(var(--i, 0) * 60ms);
}

/* The glass pill. It sits behind the bar content; at the top of the page it is invisible
   and the content aligns with the page grid, on scroll it fades/grows into a floating pill. */
.site-header__plate {
  position: absolute;
  inset: 0 calc(-1 * var(--hd-plate-x));
  z-index: -1;
  border-radius: 0;
  background: var(--hd-plate-bg);
  border: 1px solid var(--hd-plate-line);
  box-shadow: var(--hd-plate-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out), inset 0.6s var(--ease-out), border-radius 0.6s var(--ease-out),
    background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.site-header.is-scrolled .site-header__plate {
  inset: 8px calc(-1 * var(--hd-plate-x));
  border-radius: var(--r-pill);
  opacity: 1;
}
.site-header.is-menu-open .site-header__plate {
  opacity: 0;
}

/* --- brand lockup --- */
.site-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  flex: none;
  min-height: 48px;
  color: var(--hd-fg-strong);
  transition: color 0.35s ease;
}
.site-brand__mark {
  width: 46px;
  height: auto;
  flex: none;
  overflow: visible;
}
.site-brand__text {
  display: grid;
  gap: 0.38rem;
  line-height: 1;
}
.site-brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: 0.035em;
}
.site-brand__sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--hd-fg-soft);
  white-space: nowrap;
  transition: color 0.35s ease;
}
/* mark colours */
.site-brand__book {
  fill: var(--mk-book);
}
.site-brand__lines {
  fill: none;
  stroke: var(--mk-lines);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.95;
}
.site-brand__cap-under {
  fill: var(--mk-cap-under);
}
.site-brand__cap-edge {
  fill: var(--mk-cap-edge);
}
.site-brand__cap-top {
  fill: url(#lga-navy);
}
.site-brand__cord {
  fill: none;
  stroke: var(--mk-tassel);
  stroke-width: 4;
  stroke-linecap: round;
}
.site-brand__knot {
  fill: var(--mk-tassel);
}
.site-header[data-tone="dark"] .site-brand__cap-top,
.site-header.is-menu-open .site-brand__cap-top {
  fill: var(--white);
}
.site-brand__book,
.site-brand__cap-under,
.site-brand__cap-edge,
.site-brand__cap-top,
.site-brand__cord,
.site-brand__knot {
  transition: fill 0.35s ease, stroke 0.35s ease;
}
/* micro-interaction: the cap tips on hover */
.site-brand__cap {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--ease-spring);
}
.site-brand:hover .site-brand__cap,
.site-brand:focus-visible .site-brand__cap {
  transform: translateY(-6px) rotate(-7deg);
}

/* --- desktop nav --- */
.site-nav {
  position: relative;
  display: none;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
}
.site-nav__link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 clamp(10px, 1.15vw, 16px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.005em;
  white-space: nowrap;
  color: var(--hd-fg);
  transition: color 0.3s ease;
}
.site-nav__link:hover,
.site-nav__link[aria-current="location"] {
  color: var(--hd-accent);
}
.site-nav__pill {
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 40px;
  margin-top: -20px;
  border-radius: var(--r-pill);
  background: var(--hd-pill);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.65s var(--ease-out), width 0.65s var(--ease-out), opacity 0.3s ease,
    background-color 0.4s ease;
}
.site-nav__pill.is-instant {
  transition: opacity 0.3s ease, background-color 0.4s ease;
}
.site-nav__pill.is-on {
  opacity: 1;
}
/* a small tricolour dash under the label — the poster's brush strokes, miniaturised */
.site-nav__pill::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 20px;
  height: 3px;
  margin-left: -10px;
  border-radius: 2px;
  background: var(--grad-flag);
}

/* --- actions --- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.site-header__cta {
  display: none;
  min-height: 46px;
  padding-inline: 1.15rem;
  transition: opacity 0.3s ease, transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-menu-open .site-header__cta {
  opacity: 0;
  visibility: hidden;
}

/* hamburger -> X */
.menu-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--hd-fg-strong);
  background: var(--hd-toggle-bg);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.35s ease, color 0.35s ease, transform var(--dur-base) var(--ease-out);
}
.menu-toggle:active {
  transform: scale(0.94);
}
.menu-toggle__bars {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}
.menu-toggle__bars span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.55s var(--ease-out), opacity 0.25s ease, width 0.4s var(--ease-out);
}
.menu-toggle__bars span:nth-child(1) {
  top: 0;
}
.menu-toggle__bars span:nth-child(2) {
  top: 7px;
  width: 68%;
  left: auto;
  right: 0;
}
.menu-toggle__bars span:nth-child(3) {
  top: 14px;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* no JS: no hamburger — show the links as a wrapping row, and let the header scroll away instead of covering content */
html.no-js .site-header {
  position: absolute;
}
html.no-js .site-header__bar {
  flex-wrap: wrap;
  height: auto;
  padding-block: 8px;
}
html.no-js .menu-toggle {
  display: none;
}
html.no-js .site-nav {
  display: block;
  order: 3;
  width: 100%;
}
html.no-js .site-nav__list {
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .site-header__cta {
    display: inline-flex;
  }
}
@media (min-width: 1080px) {
  .site-nav {
    display: block;
  }
  .menu-toggle {
    display: none;
  }
}
@media (max-width: 1240px) {
  .site-header {
    --hd-plate-x: 14px;
  }
}
@media (max-width: 720px) {
  .site-header {
    --hd-plate-x: 12px;
  }
  .site-brand__mark {
    width: 40px;
  }
  .site-brand__name {
    font-size: 1.18rem;
  }
  .site-brand__sub {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
  }
}

/* ==========================================================================
   4. MOBILE / TABLET MENU
   ========================================================================== */
html.menu-open {
  overflow: hidden;
}
.mobile-menu {
  --mm-x: calc(100% - var(--gutter) - 24px); /* centre of the hamburger button: the reveal circle grows from here */
  --mm-y: calc(var(--header-h) / 2 + env(safe-area-inset-top, 0px));
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  overflow: hidden;
  color: var(--on-dark);
  background: var(--grad-night);
  color-scheme: dark;
  visibility: hidden;
  pointer-events: none;
  clip-path: circle(0 at var(--mm-x) var(--mm-y));
  transition: clip-path 0.7s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s linear 0.7s;
}
.mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
  clip-path: circle(135vmax at var(--mm-x) var(--mm-y));
  transition: clip-path 0.95s cubic-bezier(0.65, 0, 0.15, 1), visibility 0s;
}
@media (min-width: 1080px) {
  .mobile-menu {
    display: none;
  }
}

.mobile-menu__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mobile-menu__glow {
  position: absolute;
  right: -30%;
  top: -18%;
  width: 120vmin;
  aspect-ratio: 1;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--blue-500) 30%, transparent),
    transparent 72%
  );
}
.mobile-menu__gate {
  position: absolute;
  right: -10%;
  bottom: 0;
  width: min(130vw, 980px);
  height: auto;
  fill: color-mix(in srgb, var(--white) 5%, transparent);
}
.mobile-menu__flag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--grad-flag);
}

.mobile-menu__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(8px, 3vh, 28px)) var(--gutter)
    calc(28px + env(safe-area-inset-bottom, 0px));
}
.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 4vh, 40px);
  min-height: 100%;
  width: min(100%, 720px);
  margin-inline: auto;
}
.mobile-menu__kicker {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--on-dark-soft);
}
.mobile-menu__kicker .script {
  font-size: 1.8rem;
}
.mobile-menu__list {
  display: grid;
}
.mobile-menu__list li {
  overflow: hidden; /* mask: the links rise out of it */
  border-bottom: 1px solid var(--line-on-dark);
}
.mobile-menu__link {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: baseline;
  gap: 0.4rem;
  min-height: 56px;
  padding: clamp(10px, 1.8vh, 16px) 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw + 0.9rem, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--white);
  transform: translateY(105%);
  transition: transform 0.45s var(--ease-in-out), color 0.3s ease;
}
.mobile-menu.is-open .mobile-menu__link {
  transform: none;
  transition: transform 1s var(--ease-out) calc(0.3s + var(--i, 0) * 0.075s), color 0.3s ease;
}
.mobile-menu__num {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  transform: translateY(-0.5em);
}
.mobile-menu__de {
  display: none;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: 0;
  padding-right: 0.45rem; /* the script's italic swashes overhang their box */
  color: var(--blue-300);
}
.mobile-menu__link:hover,
.mobile-menu__link[aria-current="location"] {
  color: var(--gold);
}
@media (min-width: 480px) {
  .mobile-menu__de {
    display: block;
  }
}

.mobile-menu__foot {
  display: grid;
  gap: clamp(14px, 2.4vh, 22px);
  justify-items: start;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu.is-open .mobile-menu__foot {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease 0.75s, transform 1s var(--ease-out) 0.75s;
}
.mobile-menu__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 5.4vw, 2.1rem);
  letter-spacing: -0.02em;
  color: var(--white);
}
.mobile-menu__phone .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--gold);
}
.mobile-menu__cta {
  width: min(100%, 420px);
}
.mobile-menu__motto {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

/* ==========================================================================
   5. FLOATING WHATSAPP BUTTON
   ========================================================================== */
.wa-fab {
  position: fixed;
  right: max(24px, env(safe-area-inset-right, 0px));
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  gap: 12px;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.7s var(--ease-spring), opacity 0.35s ease, visibility 0s;
}
.wa-fab.is-away {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(26px) scale(0.6);
  transition: transform 0.45s var(--ease-in-out), opacity 0.3s ease, visibility 0s linear 0.45s;
}
html.reveal-failsafe .wa-fab.is-away {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
html.menu-open .wa-fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.wa-fab__label {
  order: -1;
  padding: 0.7rem 1.05rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1;
  white-space: nowrap;
  color: var(--navy-800);
  background: var(--white); /* reads on light skies (shadow) and on navy sections alike */
  box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--navy-800) 8%, transparent);
  opacity: 0;
  transform: translateX(16px) scale(0.9);
  transform-origin: right center;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.5s var(--ease-out);
}
.wa-fab:hover .wa-fab__label,
.wa-fab:focus-visible .wa-fab__label,
.wa-fab.is-peek .wa-fab__label {
  opacity: 1;
  transform: none;
}
.wa-fab__btn {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: var(--navy-950);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--wa) 78%, var(--white)) 0%,
    var(--wa) 52%,
    color-mix(in srgb, var(--wa) 72%, var(--navy-800)) 100%
  );
  box-shadow: 0 12px 30px color-mix(in srgb, var(--wa) 48%, transparent), 0 2px 6px color-mix(in srgb, var(--navy-900) 22%, transparent);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) ease;
}
.wa-fab:hover .wa-fab__btn {
  transform: scale(1.08) rotate(-6deg);
}
.wa-fab:active .wa-fab__btn {
  transform: scale(0.95);
}
.wa-fab__icon {
  position: relative;
  width: 30px;
  height: 30px;
}
.wa-fab__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--wa);
  opacity: 0;
  pointer-events: none;
  animation: chrome-pulse 3s var(--ease-out) infinite;
}
.wa-fab__pulse--b {
  animation-delay: 1.5s;
}
@keyframes chrome-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@media (max-width: 720px) {
  .wa-fab {
    right: max(18px, env(safe-area-inset-right, 0px));
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
  }
  .wa-fab__btn {
    width: 48px;
    height: 48px;
  }
  .wa-fab__icon {
    width: 24px;
    height: 24px;
  }
}
/* pinned journey (desktop): keep the rail clear of the label */
html.in-journey .wa-fab__label {
  display: none;
}
/* landscape phones: the menu is a two-column list so all six links + CTA fit */
@media (max-height: 520px) {
  .mobile-menu__list {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
  .mobile-menu__link {
    min-height: 48px;
    padding-block: 6px;
    font-size: 1.5rem;
  }
}
.lga-cursor.is-quiet .lga-cursor__ring-in {
  background: transparent;
  box-shadow: none;
}
.lga-cursor.is-quiet .lga-cursor__label {
  opacity: 0;
}

/* ==========================================================================
   6. CUSTOM CURSOR  (fine pointers only; created by chrome.js)
   ========================================================================== */
.lga-cursor {
  --cur-dot: var(--blue-600);
  --cur-halo: var(--white);
  --cur-ring: color-mix(in srgb, var(--navy-800) 42%, transparent);
  --cur-fill: color-mix(in srgb, var(--blue-500) 14%, transparent);
  --cur-solid: var(--navy-800);
  --cur-solid-fg: var(--white);
  --ring: 38px;
  position: fixed;
  inset: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  overflow: clip;
  contain: layout style;
}
.lga-cursor.is-dark {
  --cur-dot: var(--gold);
  --cur-halo: var(--navy-900);
  --cur-ring: color-mix(in srgb, var(--white) 55%, transparent);
  --cur-fill: color-mix(in srgb, var(--white) 14%, transparent);
  --cur-solid: var(--gold);
  --cur-solid-fg: var(--navy-900);
}
.lga-cursor__dot,
.lga-cursor__ring {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
}
.lga-cursor.is-on .lga-cursor__dot,
.lga-cursor.is-on .lga-cursor__ring {
  opacity: 1;
}
.lga-cursor.is-text .lga-cursor__dot,
.lga-cursor.is-text .lga-cursor__ring {
  opacity: 0;
}
.lga-cursor__dot-in {
  display: block;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--cur-dot);
  box-shadow: 0 0 0 2px var(--cur-halo);
  transition: transform 0.35s var(--ease-out), background-color 0.3s ease, box-shadow 0.3s ease;
}
.lga-cursor__ring-in {
  display: grid;
  place-items: center;
  width: var(--ring);
  height: var(--ring);
  margin: calc(var(--ring) / -2) 0 0 calc(var(--ring) / -2);
  border-radius: 50%;
  border: 1.5px solid var(--cur-ring);
  transition: width 0.45s var(--ease-out), height 0.45s var(--ease-out), margin 0.45s var(--ease-out),
    background-color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-out);
}
.lga-cursor__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cur-solid-fg);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease, transform 0.4s var(--ease-out);
}
.lga-cursor.is-link {
  --ring: 62px;
}
.lga-cursor.is-link .lga-cursor__ring-in {
  background: var(--cur-fill);
  border-color: transparent;
}
.lga-cursor.is-link .lga-cursor__dot-in {
  transform: scale(0.5);
}
.lga-cursor.is-label {
  --ring: 84px;
}
.lga-cursor.is-label .lga-cursor__ring-in {
  background: var(--cur-solid);
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--cur-halo), 0 8px 24px color-mix(in srgb, var(--navy-950) 25%, transparent);
}
.lga-cursor.is-label .lga-cursor__dot-in {
  transform: scale(0);
}
.lga-cursor.is-label .lga-cursor__label {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}
.lga-cursor.is-down .lga-cursor__ring-in {
  transform: scale(0.82);
}
/* hide the native cursor while ours is active (stacked classes = specificity without !important);
   form fields keep the text caret */
html.has-lga-cursor.has-lga-cursor.has-lga-cursor,
html.has-lga-cursor.has-lga-cursor.has-lga-cursor * {
  cursor: none;
}
html.has-lga-cursor.has-lga-cursor.has-lga-cursor :is(input, textarea, select, [contenteditable="true"]) {
  cursor: auto;
}
html.has-lga-cursor.has-lga-cursor.has-lga-cursor :is(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, [contenteditable="true"]) {
  cursor: text;
}

/* ==========================================================================
   Fallbacks: browsers without color-mix() get solid plates (the tint variables above would
   otherwise compute to "transparent" and the header would lose its backing); print hides the shell.
   ========================================================================== */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .site-header {
    --hd-plate-bg: var(--white);
    --hd-plate-line: var(--line);
    --hd-plate-shadow: var(--shadow-md);
    --hd-pill: var(--sky-100);
    --hd-toggle-bg: var(--sky-100);
  }
  .site-header[data-tone="dark"],
  .site-header.is-menu-open {
    --hd-plate-bg: var(--navy-900);
    --hd-plate-line: var(--line-on-dark);
    --hd-plate-shadow: none;
    --hd-pill: var(--navy-700);
    --hd-toggle-bg: var(--navy-700);
  }
  .lga-cursor {
    --cur-ring: var(--blue-500);
    --cur-fill: var(--sky-200);
  }
  .lga-cursor.is-dark {
    --cur-ring: var(--white);
    --cur-fill: var(--navy-700);
  }
}
@media print {
  .preloader,
  .scroll-progress,
  .site-header,
  .mobile-menu,
  .wa-fab,
  .lga-cursor {
    display: none;
  }
}

/* ==========================================================================
   7. REDUCED MOTION — calm & instant
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .preloader {
    display: none;
  }
  .wa-fab__pulse {
    display: none;
  }
  .site-header,
  .site-header__bar {
    transition: none;
  }
  .mobile-menu,
  .mobile-menu.is-open {
    clip-path: none;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  .mobile-menu.is-open {
    opacity: 1;
    transition: opacity 0.2s ease, visibility 0s;
  }
  .mobile-menu__link,
  .mobile-menu__foot {
    transform: none;
    opacity: 1;
  }
}