/* GNH Hospitality — design tokens (from the design system) */

/* ============================================================
   GNH Hospitality — Color Tokens
   Derived from the official brand palettes (PPTX theme + swatch
   sheets). The brand is anchored in a deep architectural navy,
   supported by steel & royal blues and a cool slate-gray ramp.
   ============================================================ */

:root {
  /* ---- Brand blues (base scale) ---- */
  --gnh-navy-900: #00152B;  /* deepest — backgrounds, footers */
  --gnh-navy-800: #001F3F;  /* PRIMARY brand navy (logo DarkBlue) */
  --gnh-navy-700: #042B52;  /* hover/raised navy */
  --gnh-indigo:   #000080;  /* deep indigo accent */
  --gnh-steel-600:#34638F;  /* steel, darker */
  --gnh-steel-500:#4682B4;  /* SECONDARY brand steel (logo Blue) */
  --gnh-royal:    #4169E1;  /* punchy royal-blue accent */
  --gnh-sky-400:  #79CBEC;  /* light sky accent */
  --gnh-sky-200:  #BCE0E4;  /* pale aqua wash */

  /* ---- Cool neutral / slate ramp ---- */
  --gnh-gray-50:  #F5F7F9;
  --gnh-gray-100: #ECEFF2;
  --gnh-gray-150: #E7E6E6;  /* official brand light gray */
  --gnh-gray-200: #D7DDE3;
  --gnh-gray-300: #BCC5CE;
  --gnh-gray-400: #94A1AD;
  --gnh-gray-500: #6A7B8D;  /* official slate */
  --gnh-gray-600: #51606E;
  --gnh-gray-700: #36454F;  /* official charcoal */
  --gnh-gray-800: #24303A;
  --gnh-gray-900: #141C24;
  --gnh-white:    #FFFFFF;

  /* ---- Semantic status (cool-compatible) ---- */
  --gnh-success: #1E8A6E;
  --gnh-success-bg: #E3F3EE;
  --gnh-warning: #C9871F;
  --gnh-warning-bg: #FBF0DC;
  --gnh-danger:  #C0392B;
  --gnh-danger-bg: #FBE7E4;
  --gnh-info:    #34638F;
  --gnh-info-bg: #E5EEF6;

  /* ============================================================
     Semantic aliases — reference these in product code
     ============================================================ */

  /* Surfaces & backgrounds */
  --surface-page:    var(--gnh-white);
  --surface-subtle:  var(--gnh-gray-50);
  --surface-card:    var(--gnh-white);
  --surface-sunken:  var(--gnh-gray-100);
  --surface-inverse: var(--gnh-navy-800);
  --surface-inverse-deep: var(--gnh-navy-900);
  --surface-brand:   var(--gnh-navy-800);

  /* Text */
  --text-strong:  var(--gnh-navy-900);
  --text-body:    var(--gnh-gray-800);
  --text-muted:   var(--gnh-gray-600);
  --text-subtle:  var(--gnh-gray-500);
  --text-on-dark: var(--gnh-white);
  --text-on-dark-muted: #A9B7C5;
  --text-brand:   var(--gnh-navy-800);
  --text-accent:  var(--gnh-steel-500);
  --text-link:    var(--gnh-steel-600);

  /* Borders & dividers */
  --border-subtle:  var(--gnh-gray-200);
  --border-default: var(--gnh-gray-300);
  --border-strong:  var(--gnh-gray-400);
  --border-on-dark: rgba(255,255,255,0.16);

  /* Interactive (primary = navy) */
  --action-primary:        var(--gnh-navy-800);
  --action-primary-hover:  var(--gnh-navy-700);
  --action-primary-active: var(--gnh-navy-900);
  --action-accent:         var(--gnh-steel-500);
  --action-accent-hover:   var(--gnh-steel-600);

  /* Focus ring */
  --focus-ring: var(--gnh-royal);
}

/* ============================================================
   GNH Hospitality — Typography Tokens
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:    700;  /* @kind font */
  --fw-extrabold:800; /* @kind font */
  --fw-black:   900;  /* @kind font */

  /* Fluid type scale (1.250 major-third-ish, capped) */
  --fs-2xs:  0.6875rem;  /* 11px — eyebrow caps, legal */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.375rem;   /* 22px */
  --fs-xl:   1.75rem;    /* 28px */
  --fs-2xl:  2.25rem;    /* 36px */
  --fs-3xl:  3rem;       /* 48px */
  --fs-4xl:  4rem;       /* 64px */
  --fs-5xl:  5.25rem;    /* 84px — hero display */

  /* Line heights */
  --lh-tight:   1.05;  /* @kind other */
  --lh-snug:    1.18;  /* @kind other */
  --lh-heading: 1.25;  /* @kind other */
  --lh-body:    1.6;   /* @kind other */
  --lh-relaxed: 1.75;  /* @kind other */

  /* Letter spacing */
  --ls-tighter: -0.03em; /* @kind other */
  --ls-tight:   -0.015em; /* @kind other */
  --ls-normal:  0;       /* @kind other */
  --ls-wide:    0.04em;  /* @kind other */
  --ls-eyebrow: 0.16em;  /* @kind other */

  /* ---- Semantic roles ---- */
  --text-display:  var(--fw-extrabold) var(--fs-5xl)/var(--lh-tight) var(--font-display);
  --text-h1:       var(--fw-extrabold) var(--fs-3xl)/var(--lh-snug) var(--font-display);
  --text-h2:       var(--fw-bold) var(--fs-2xl)/var(--lh-heading) var(--font-display);
  --text-h3:       var(--fw-bold) var(--fs-xl)/var(--lh-heading) var(--font-display);
  --text-h4:       var(--fw-semibold) var(--fs-lg)/var(--lh-heading) var(--font-display);
  --text-body-lg:  var(--fw-regular) var(--fs-md)/var(--lh-body) var(--font-body);
  --text-body-md:  var(--fw-regular) var(--fs-base)/var(--lh-body) var(--font-body);
  --text-body-sm:  var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--font-body);
}

/* Convenience utility classes (optional, for specimens) */
.gnh-eyebrow {
  font: var(--fw-bold) var(--fs-xs)/1.2 var(--font-display);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* ============================================================
   GNH Hospitality — Spacing, Radius, Shadow, Motion Tokens
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-9: 4rem;      /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7rem;     /* 112 */

  /* Container widths */
  --container-narrow: 720px;
  --container-base:   1100px;
  --container-wide:   1320px;
  --gutter:           clamp(1.25rem, 4vw, 4rem); /* @kind spacing */

  /* Radii — restrained & architectural (squared-off brand) */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1px;          /* @kind other */
  --border-width-strong: 2px;   /* @kind other */

  /* Shadows — soft, cool-tinted (navy cast, never neutral black) */
  --shadow-xs: 0 1px 2px rgba(0, 31, 63, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 31, 63, 0.08), 0 1px 2px rgba(0, 31, 63, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 31, 63, 0.10), 0 2px 4px rgba(0, 31, 63, 0.06);
  --shadow-lg: 0 12px 28px rgba(0, 31, 63, 0.14), 0 4px 10px rgba(0, 31, 63, 0.08);
  --shadow-xl: 0 24px 56px rgba(0, 31, 63, 0.18);
  --ring-focus: 0 0 0 3px rgba(65, 105, 225, 0.40);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);   /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);        /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur-base: 200ms;  /* @kind other */
  --dur-slow: 320ms;  /* @kind other */

  /* Z-index */
  --z-base: 1;        /* @kind other */
  --z-sticky: 100;    /* @kind other */
  --z-overlay: 1000;  /* @kind other */
  --z-modal: 1100;    /* @kind other */
  --z-toast: 1200;    /* @kind other */
}

/* ══════════════════════════════════════════════════════════════════════
   Base
   ══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
:root { --header-h: 73px; }   /* nav row + 1px border; kept in sync below */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: var(--text-body-md);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { margin: 0; color: var(--text-strong); font-family: var(--font-display);
             letter-spacing: var(--ls-tight); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; display: block; }
a { color: var(--text-link); text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px;
                 border-radius: var(--radius-sm); }
::selection { background: var(--gnh-sky-200); color: var(--gnh-navy-900); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; }
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gnh-navy-800); color: #fff; padding: 12px 18px;
  font: 700 14px var(--font-display); border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

.container { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: var(--container-base); }
/* Tighter vertical rhythm — the sections used to sit far enough apart that
   scrolling felt like stepping between separate pages. */
.section { padding: clamp(44px, 5.5vw, 80px) 0; }

/* Blocks ease in as they scroll into view, so the page reads as one
   continuous scroll rather than a series of hard cuts.

   Deliberately built so content is NEVER hidden by default: the element is
   fully visible with no class, and .is-in merely plays an entrance
   animation. If the observer never fires — JS blocked, an old browser, a
   throttled background tab — every section still shows normally. Hiding
   first and revealing via JS would risk a blank page. */
.reveal.is-in { animation: gnhReveal 620ms var(--ease-out) both; }
@keyframes gnhReveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.is-in { animation: none; }
}
.section--subtle { background: var(--surface-subtle); border-top: 1px solid var(--border-subtle); }
.section--dark { background: var(--gnh-navy-900); color: #fff; }
.section--dark h2 { color: #fff; }
:where(#track, #hotels, #leadership, #culture, #contact) { scroll-margin-top: 96px; }

/* ══════════════════════════════════════════════════════════════════════
   Pieces carried over from the design system
   ══════════════════════════════════════════════════════════════════════ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 12px var(--font-display); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-accent);
}
.eyebrow--sky { color: var(--gnh-sky-400); }
.eyebrow--muted { color: var(--text-subtle); }
.eyebrow .rule { width: 28px; height: 2px; background: currentColor; opacity: .7; flex: none; }

.badge {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; padding: 4px 10px;
  background: var(--gnh-navy-800); color: #fff;
  font: 700 11px var(--font-display); letter-spacing: .04em; text-transform: uppercase;
  line-height: 1; border-radius: var(--radius-pill); white-space: nowrap;
}

.card {
  background: var(--surface-card); color: var(--text-body);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; font-family: var(--font-display); font-weight: 700;
  letter-spacing: .005em; line-height: 1; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn--sm { gap: 6px;  padding: 8px 16px;  font-size: 13px; border-radius: var(--radius-sm); }
.btn--md { gap: 8px;  padding: 12px 24px; font-size: 15px; border-radius: var(--radius-md); }
.btn--lg { gap: 10px; padding: 16px 32px; font-size: 16px; border-radius: var(--radius-md); }
.btn--block { display: flex; width: 100%; }
.btn--primary { background: var(--action-primary); color: var(--text-on-dark);
                border-color: var(--action-primary); }
.btn--primary:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover);
                      color: var(--text-on-dark); }
.btn--on-dark { background: var(--gnh-white); color: var(--gnh-navy-800); border-color: var(--gnh-white); }
.btn--on-dark:hover { background: var(--gnh-gray-100); border-color: var(--gnh-gray-100);
                      color: var(--gnh-navy-800); }
.textlink {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 4px;
  color: #fff; font: 700 16px var(--font-display); letter-spacing: .01em;
}
.textlink:hover { color: #fff; opacity: .82; }
.textlink span { font-size: 19px; line-height: 1; }

/* ══════════════════════════════════════════════════════════════════════
   Header
   ══════════════════════════════════════════════════════════════════════ */
/* Solid is the default state, so if the script never runs the header stays
   readable over white content. app.js adds .is-top while the hero is still
   under it, which lifts the bar away and lets the hero run full-bleed. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-slow) var(--ease-standard),
              border-color var(--dur-slow) var(--ease-standard),
              box-shadow var(--dur-slow) var(--ease-standard);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,31,63,.07); }
.site-header.is-top {
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
.site-header.is-top .nav-links a { color: rgba(233,240,247,.86); }
.site-header.is-top .nav-links a:hover { color: #fff; background: rgba(255,255,255,.12); }
.site-header.is-top .nav-links a.is-current { color: #fff; }
.site-header.is-top .nav-links a.is-current::after { background: var(--gnh-sky-400); }
.site-header.is-top .lang-switch { border-color: rgba(255,255,255,.32); }
.site-header.is-top .lang-btn { color: rgba(233,240,247,.72); }
.site-header.is-top .lang-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.site-header.is-top .lang-btn.is-active { background: #fff; color: var(--gnh-navy-800); }
.site-header.is-top .nav-end .btn--primary {
  background: #fff; color: var(--gnh-navy-800); border-color: #fff;
}
.site-header.is-top .nav-end .btn--primary:hover {
  background: var(--gnh-gray-100); border-color: var(--gnh-gray-100);
}
/* Three columns rather than a flex row: the outer two flex evenly, so the
   links sit dead-centre in the ribbon regardless of how wide the logo or the
   button/language group happen to be. */
.nav-inner {
  max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter);
  height: 72px; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
}
/* Columns are assigned explicitly: below 720px the links are display:none,
   which drops them out of the grid entirely, and without this the button and
   language switch would auto-place into column 2 and float mid-ribbon
   instead of sitting flush right. */
/* Both marks are stacked and cross-faded, so the logo stays legible whether
   the bar is transparent over the navy hero or solid over white. */
.nav-logo { position: relative; display: block; grid-column: 1; justify-self: start; }
.nav-logo img { height: 30px; width: auto; display: block;
                transition: opacity var(--dur-slow) var(--ease-standard); }
.nav-logo .logo-light { position: absolute; left: 0; top: 0; opacity: 0; }
.site-header.is-top .nav-logo .logo-dark { opacity: 0; }
.site-header.is-top .nav-logo .logo-light { opacity: 1; }

.nav-links { display: flex; gap: 2px; grid-column: 2; justify-self: center; }
.nav-links a {
  position: relative;
  font: 600 14px var(--font-body); color: var(--text-muted);
  padding: 9px 12px; border-radius: var(--radius-sm); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.nav-links a:hover { color: var(--gnh-navy-800); background: var(--gnh-gray-50); }
/* Underline marks whichever section is currently in view. */
.nav-links a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  border-radius: 2px; background: var(--gnh-steel-500);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-base) var(--ease-emphasized);
}
.nav-links a.is-current { color: var(--gnh-navy-800); }
.nav-links a.is-current::after { transform: scaleX(1); }
.nav-end { display: flex; align-items: center; gap: 12px; grid-column: 3; justify-self: end; }
.lang-switch {
  display: flex; align-items: center; border: 1px solid var(--border-default);
  border-radius: var(--radius-pill); overflow: hidden; flex: none;
}
.lang-btn {
  padding: 7px 13px; font: 700 12px var(--font-display); letter-spacing: .04em;
  color: var(--text-muted); background: transparent;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.lang-btn:hover { background: var(--gnh-gray-50); color: var(--gnh-navy-800); }
.lang-btn.is-active { background: var(--gnh-navy-800); color: #fff; }

/* ── Mobile menu ─────────────────────────────────────────────────────
   The ribbon links collapse below 720px, so a drawer carries them instead.
   Hidden by default and opened by a class: if the script never runs the
   button simply does nothing, and the footer still lists every page. */
.nav-toggle {
  display: none; width: 38px; height: 38px; padding: 0; flex: none;
  align-items: center; justify-content: center; gap: 4px; flex-direction: column;
  background: transparent; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.nav-toggle .bar { display: block; width: 16px; height: 2px; border-radius: 2px;
                   background: var(--gnh-navy-800); transition: background var(--dur-fast) var(--ease-standard); }
.nav-toggle:hover { background: var(--gnh-gray-50); }
.site-header.is-top .nav-toggle { border-color: rgba(255,255,255,.32); }
.site-header.is-top .nav-toggle .bar { background: #fff; }

.nav-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.nav-drawer.is-open { visibility: visible; }
.nav-drawer-scrim {
  position: absolute; inset: 0; background: rgba(0,21,43,.55); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.nav-drawer.is-open .nav-drawer-scrim { opacity: 1; }
.nav-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 84vw); padding: 20px 22px 28px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-page); box-shadow: -18px 0 44px rgba(0,21,43,.22);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-emphasized);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.nav-drawer.is-open .nav-drawer-panel { transform: none; }
.nav-drawer-close {
  align-self: flex-end; width: 38px; height: 38px; display: grid; place-items: center;
  background: transparent; border: none; cursor: pointer; color: var(--text-muted);
  border-radius: var(--radius-sm);
}
.nav-drawer-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
                        stroke-width: 2; stroke-linecap: round; }
.nav-drawer-close:hover { background: var(--gnh-gray-50); color: var(--gnh-navy-800); }
.nav-drawer-links { display: flex; flex-direction: column; margin: 6px 0 20px; }
.nav-drawer-links a {
  font: 700 18px var(--font-display); letter-spacing: -.01em;
  color: var(--text-strong); padding: 15px 4px;
  border-bottom: 1px solid var(--border-subtle);
}
.nav-drawer-links a:hover { color: var(--gnh-steel-600); }
.nav-drawer-panel .btn { margin-top: auto; }
@media (prefers-reduced-motion: reduce) {
  .nav-drawer-panel, .nav-drawer-scrim { transition: none; }
}
/* Stops the page behind the drawer from scrolling with it. */
body.nav-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════
   Hero
   ══════════════════════════════════════════════════════════════════════ */
/* Pulled up by the header's own height so the artwork runs edge-to-edge
   beneath the transparent bar; the inner padding puts the copy back below it. */
.hero {
  position: relative; background: var(--gnh-navy-900); color: #fff;
  overflow: hidden; margin-top: calc(var(--header-h) * -1);
}
/* Overhangs top and bottom so app.js can drift it on scroll without ever
   exposing an edge. With no JS it simply sits still. */
.hero-bg {
  position: absolute; left: 0; top: -70px; width: 100%; height: calc(100% + 140px);
  object-fit: cover; object-position: center 30%; opacity: .42;
  will-change: transform;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,21,43,.97) 0%, rgba(0,21,43,.80) 46%, rgba(0,21,43,.36) 100%);
}
.hero-inner { position: relative;
              padding-top: calc(var(--header-h) + clamp(48px, 7vw, 120px));
              padding-bottom: clamp(52px, 7vw, 92px); }
.hero-inner > * { max-width: 800px; }
.hero h1 {
  font: 900 clamp(34px, 6vw, 82px)/1.02 var(--font-display);
  letter-spacing: -.03em; color: #fff; margin: 22px 0 0;
}
.hero-sub {
  font: 400 clamp(16px, 1.5vw, 20px)/1.6 var(--font-body);
  color: rgba(233,240,247,.88); margin: 24px 0 0; max-width: 640px;
}
.hero-actions { display: flex; gap: 18px; align-items: center; margin-top: 36px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════
   Track record
   ══════════════════════════════════════════════════════════════════════ */
.track-grid { display: grid; grid-template-columns: 1.05fr 1fr;
              gap: clamp(36px, 6vw, 88px); align-items: center; }
.track-copy h2 { font: 800 clamp(27px, 4vw, 46px)/1.08 var(--font-display);
                 letter-spacing: -.025em; margin: 18px 0 0; }
.body-copy { font: 400 16px/1.65 var(--font-body); color: var(--text-muted);
             margin: 18px 0 0; max-width: 540px; }
.track-side { display: grid; gap: var(--space-4); align-content: start; }

/* ── Portfolio slideshow ─────────────────────────────────────────────── */
.slideshow {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--gnh-navy-900); box-shadow: var(--shadow-md);
  aspect-ratio: 3 / 2;
}
.slides { position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden;
  transition: opacity 700ms var(--ease-standard), visibility 0s linear 700ms;
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 700ms var(--ease-standard); }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 5px;
  padding: 44px 22px 18px;
  background: linear-gradient(180deg, rgba(0,21,43,0) 0%, rgba(0,21,43,.86) 72%);
  color: #fff; pointer-events: none;
}
.slide-name { font: 700 17px/1.25 var(--font-display); letter-spacing: -.01em; }
.slide-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
              font: 600 11px var(--font-display); letter-spacing: .09em;
              text-transform: uppercase; color: rgba(233,240,247,.82); }
.slide-status {
  padding: 3px 9px; border-radius: var(--radius-pill); line-height: 1;
  background: rgba(121,203,236,.18); color: var(--gnh-sky-400);
  border: 1px solid rgba(121,203,236,.35); letter-spacing: .06em;
}
.slide-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.86); color: var(--gnh-navy-800);
  box-shadow: var(--shadow-sm); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.slide-arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor;
                   stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.slide-arrow.prev { left: 12px; }
.slide-arrow.next { right: 12px; }
.slideshow:hover .slide-arrow, .slide-arrow:focus-visible { opacity: 1; }
.slide-arrow:hover { background: #fff; }
.slide-dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
  display: flex; justify-content: center; gap: 7px;
}
.dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
  cursor: pointer; background: rgba(255,255,255,.42);
  transition: background var(--dur-fast) var(--ease-standard),
              width var(--dur-base) var(--ease-standard);
}
.dot.is-active { background: #fff; width: 20px; border-radius: var(--radius-pill); }

/* ── Supporting stats — deliberately small next to the slideshow ─────── */
.stat-chips { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.stat-chip {
  display: flex; align-items: baseline; gap: 9px;
  padding: 12px 16px; border-radius: var(--radius-md);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
}
.stat-v { font: 600 22px/1 var(--font-mono); letter-spacing: -.02em; color: var(--gnh-steel-500); }
.stat-l { font: 700 11px var(--font-display); letter-spacing: .07em; text-transform: uppercase;
          color: var(--text-subtle); }

/* ══════════════════════════════════════════════════════════════════════
   Hotels
   ══════════════════════════════════════════════════════════════════════ */
.section-head { max-width: 660px; }
.section-head h2 { font: 800 clamp(27px, 4vw, 46px)/1.08 var(--font-display);
                   letter-spacing: -.025em; margin: 18px 0 0; }
.lede { font: 400 17px/1.6 var(--font-body); color: var(--text-muted); margin: 18px 0 0; }
.city-tabs {
  display: inline-flex; gap: 4px; padding: 6px; margin: var(--space-7) 0;
  background: var(--surface-page); border: 1px solid var(--border-default);
  border-radius: var(--radius-pill); max-width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.city-tabs::-webkit-scrollbar { display: none; }
.city-tab {
  border: none; cursor: pointer; padding: 10px 22px; border-radius: var(--radius-pill);
  font: 700 14px var(--font-display); letter-spacing: .01em; white-space: nowrap;
  background: transparent; color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.city-tab:hover { color: var(--gnh-navy-800); }
.city-tab.is-active { background: var(--gnh-navy-800); color: #fff; }
.hotel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
              gap: var(--space-6); }
.hotel-grid[hidden] { display: none; }
.hotel-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm); border-radius: var(--radius-lg);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.hotel-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.hotel-media { position: relative; height: 252px; overflow: hidden; flex: none; }
.hotel-media img { width: 100%; height: 100%; object-fit: cover; }
.hotel-body { padding: 26px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.hotel-body h3 { font: 700 23px var(--font-display); letter-spacing: -.01em; }
.hotel-body > p { font: 400 15px/1.55 var(--font-body); color: var(--text-muted); margin: 10px 0 0; }
.hotel-meta { display: flex; gap: 32px; margin-top: 22px; padding-top: 22px;
              border-top: 1px solid var(--border-subtle); }
.meta-v { display: block; font: 600 23px var(--font-mono); letter-spacing: -.02em;
          color: var(--gnh-steel-500); }
.meta-l { display: block; font: 700 10px var(--font-display); letter-spacing: .06em;
          text-transform: uppercase; color: var(--text-subtle); margin-top: 6px; }
.hotel-body .btn--block { margin-top: auto; }
.hotel-meta + .btn--block { margin-top: var(--space-6); }

/* ══════════════════════════════════════════════════════════════════════
   Leadership
   ══════════════════════════════════════════════════════════════════════ */
.leadership-grid { display: grid; grid-template-columns: 1fr 1fr;
                   gap: clamp(36px, 6vw, 72px); align-items: stretch; }
.leadership-copy { display: flex; flex-direction: column; justify-content: center; }
.leadership-copy h2 { font: 800 clamp(25px, 3.4vw, 42px)/1.1 var(--font-display);
                      letter-spacing: -.025em; margin: 18px 0 0; }
.leadership-copy > p { font: 400 17px/1.65 var(--font-body);
                       color: rgba(233,240,247,.80); margin: 18px 0 0; max-width: 520px; }
.stat-box {
  margin-top: 32px; align-self: flex-start; padding: 24px 30px;
  border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg);
  background: rgba(255,255,255,.03);
}
.stat-box-v { display: block; font: 600 clamp(36px, 4vw, 52px)/1 var(--font-mono);
              letter-spacing: -.02em; color: var(--gnh-sky-400); }
.stat-box-l { display: block; font: 600 15px/1.55 var(--font-body);
              color: rgba(233,240,247,.86); margin-top: 12px; }
.leadership-media { position: relative; min-height: 460px; border-radius: var(--radius-lg);
                    overflow: hidden; border: 1px solid var(--border-on-dark); }
.leadership-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.leadership-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,21,43,0) 55%, rgba(0,21,43,.55) 100%);
}

/* ══════════════════════════════════════════════════════════════════════
   Mission & values
   ══════════════════════════════════════════════════════════════════════ */
.mission-text {
  font: 800 clamp(25px, 3.6vw, 50px)/1.16 var(--font-display); letter-spacing: -.022em;
  color: var(--text-strong); margin: 22px 0 0; max-width: 20ch; text-wrap: balance;
}
.values { margin-top: clamp(40px, 6vw, 72px); }
.values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px;
  margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border-default);
}
.values-grid li { display: flex; align-items: baseline; gap: 14px; padding: 22px 0;
                  border-bottom: 1px solid var(--border-subtle); }
.value-n { font: 600 16px var(--font-mono); color: var(--gnh-steel-500); flex: none; }
.value-l { font: 700 19px var(--font-display); color: var(--text-strong); letter-spacing: -.01em; }

/* ══════════════════════════════════════════════════════════════════════
   Contact
   ══════════════════════════════════════════════════════════════════════ */
/* The closing section carries the most weight, so it gets the brand navy and
   a soft steel glow rather than the same grey as everything else — the white
   form card then reads as the focal point of the page. */
.section--contact {
  position: relative; overflow: hidden;
  background: var(--gnh-navy-900); color: #fff;
  border-top: 1px solid var(--border-subtle);
}
.section--contact::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 12% 8%, rgba(70,130,180,.30) 0%, rgba(70,130,180,0) 62%),
    radial-gradient(55% 65% at 92% 100%, rgba(121,203,236,.18) 0%, rgba(121,203,236,0) 60%);
}
.section--contact > .container { position: relative; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr;
                gap: clamp(36px, 6vw, 72px); align-items: center; }
.contact-copy h2 { font: 800 clamp(25px, 3.4vw, 44px)/1.1 var(--font-display);
                   letter-spacing: -.025em; margin: 18px 0 0; color: #fff; }
.contact-copy .lede { max-width: 460px; color: rgba(233,240,247,.82); }

.contact-details {
  list-style: none; margin: clamp(28px, 4vw, 40px) 0 0; padding: 0;
  display: grid; gap: 14px;
}
.contact-details li {
  display: grid; grid-template-columns: 84px 1fr; align-items: baseline; gap: 14px;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14);
}
.cd-label { font: 700 10px var(--font-display); letter-spacing: .12em;
            text-transform: uppercase; color: var(--gnh-sky-400); }
.contact-details a, .contact-details span:not(.cd-label) {
  font: 500 15px var(--font-body); color: rgba(233,240,247,.92); word-break: break-word;
}
.contact-details a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.contact-card {
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 26px 60px rgba(0,10,25,.45);
  border-color: transparent;
}
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font: 600 13px var(--font-display); color: var(--text-strong); letter-spacing: .005em; }
.field .req { color: var(--gnh-danger); margin-left: 3px; }
.field input, .field textarea {
  font: 15px/1.4 var(--font-body); color: var(--text-body); background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 11px 14px; outline: none; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.field textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus {
  border-color: var(--gnh-steel-500); box-shadow: 0 0 0 3px rgba(70,130,180,.14);
}
.field input:user-invalid { border-color: var(--gnh-danger); }
.botcheck { position: absolute; left: -9999px; width: 1px; height: 1px;
            opacity: 0; pointer-events: none; }
.form-error {
  margin: 0; font: 500 14px/1.5 var(--font-body); color: var(--gnh-danger);
  background: var(--gnh-danger-bg); border-radius: var(--radius-md); padding: 10px 14px;
}
.form-success { text-align: center; padding: 54px 16px; }
.form-success .thanks { font: 800 26px var(--font-display); color: var(--gnh-navy-800); }
.form-success p + p { margin-top: 12px; font: 400 16px var(--font-body); color: var(--text-muted); }
.contact-form.is-sending button { opacity: .6; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════════════════════════════ */
.site-footer { background: var(--gnh-navy-900); color: rgba(233,240,247,.70); padding: 60px 0 30px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start;
              flex-wrap: wrap; gap: 36px; }
.footer-brand { max-width: 340px; }
.footer-brand img { height: 28px; width: auto; }
.footer-brand p { margin: 18px 0 0; font: 400 14px/1.65 var(--font-body); color: rgba(233,240,247,.66); }
.site-footer h2 { font: 700 12px var(--font-display); letter-spacing: .1em; text-transform: uppercase;
                  color: #fff; margin: 0 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { font: 400 14px var(--font-body); padding: 5px 0; color: rgba(233,240,247,.72); }
.site-footer li a { color: rgba(233,240,247,.72); }
.site-footer li a:hover { color: #fff; }
.footer-nav, .footer-contact { min-width: 160px; }
.footer-bottom {
  margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font: 400 12px var(--font-body); color: rgba(233,240,247,.6);
}
.footer-bottom a { color: rgba(233,240,247,.75); text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom a:hover { color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   Legal pages
   ══════════════════════════════════════════════════════════════════════ */
/* ── Services ────────────────────────────────────────────────────────── */
.services-intro h1 { font: 800 clamp(30px, 4.2vw, 50px)/1.08 var(--font-display);
                     letter-spacing: -.028em; margin: 16px 0 0; max-width: 18ch; }
.services-intro .lede { max-width: 68ch; margin-top: 20px; }
.services-hero {
  margin-top: clamp(34px, 5vw, 52px); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 21 / 9;
}
.services-hero img { width: 100%; height: 100%; object-fit: cover; }

/* Why owners trust us — photographic band, so the section carries weight
   rather than reading as another block of grey. */
.trust {
  position: relative; isolation: isolate; color: #fff;
  background-color: var(--gnh-navy-900);
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
}
.trust::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,21,43,.90) 0%, rgba(0,21,43,.82) 100%);
}
.trust-head { font: 800 clamp(24px, 3vw, 36px)/1.14 var(--font-display);
              letter-spacing: -.022em; margin: 16px 0 0; max-width: 24ch; color: #fff; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr);
              gap: clamp(14px, 1.8vw, 20px); margin-top: clamp(30px, 4vw, 44px); }
.trust-card { padding: clamp(20px, 2.4vw, 26px); border-radius: var(--radius-lg);
              background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
              backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.trust-card h3 { font: 700 16px/1.35 var(--font-display); letter-spacing: -.01em;
                 margin: 0; color: #fff; }
.trust-card p { font: 400 14px/1.6 var(--font-body); color: rgba(233,240,247,.82);
                margin-top: 10px; }

/* Each service is its own band, numbered and alternating, so the two read as
   separate offerings rather than one continuous list. */
.service .service-top { display: grid; grid-template-columns: 1fr 1fr;
                        gap: clamp(28px, 4vw, 48px); align-items: center; }
.service h2 { font: 800 clamp(26px, 3.2vw, 38px)/1.12 var(--font-display);
              letter-spacing: -.024em; margin: 14px 0 0; }
.service-lede { font: 400 17px/1.65 var(--font-body); color: var(--text-muted); margin-top: 14px; }
.service-media { border-radius: var(--radius-lg); overflow: hidden;
                 box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; }
.service-media img { width: 100%; height: 100%; object-fit: cover; }

.caps { display: grid; grid-template-columns: repeat(3, 1fr);
        gap: clamp(14px, 1.8vw, 20px); margin-top: clamp(30px, 4vw, 44px); }
.cap { padding: 20px; background: var(--surface-page);
       border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
       border-top: 3px solid var(--gnh-steel-500);
       transition: box-shadow var(--dur-base) var(--ease-standard),
                   transform var(--dur-base) var(--ease-standard); }
.section--subtle .cap { background: var(--surface-card); }
.cap:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cap h4 { font: 700 15px/1.35 var(--font-display); letter-spacing: -.005em;
          margin: 0; color: var(--text-strong); }
.cap p { font: 400 13.5px/1.6 var(--font-body); color: var(--text-muted); margin-top: 8px; }

.services-cta { padding-top: clamp(40px, 5vw, 64px); }

@media (max-width: 1024px) {
  .caps, .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .service .service-top { grid-template-columns: 1fr; }
  .service-media { order: -1; aspect-ratio: 16 / 9; }
  .services-hero { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .caps, .trust-grid { grid-template-columns: 1fr; }
  .services-hero { aspect-ratio: 4 / 3; }
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq-item { margin-top: clamp(30px, 4vw, 44px); padding-top: clamp(26px, 3.5vw, 36px);
            border-top: 1px solid var(--border-subtle); }
.faq-item:first-of-type { border-top: none; }
.faq h2 { font: 700 clamp(19px, 2.2vw, 25px)/1.3 var(--font-display);
          letter-spacing: -.015em; margin: 0; color: var(--text-strong); }
.faq .faq-item p { margin-top: 14px; }
.faq .faq-item p strong { color: var(--text-strong); font-weight: 700; }
.faq-cta { margin-top: clamp(44px, 6vw, 64px); padding-top: clamp(28px, 4vw, 40px);
           border-top: 1px solid var(--border-default); }

.legal h1 { font: 800 clamp(30px, 4vw, 46px)/1.1 var(--font-display); letter-spacing: -.025em; }
.legal-updated { font: 400 14px var(--font-body); color: var(--text-subtle); margin-top: 10px; }
.legal .lede { max-width: 68ch; }
.legal h2 { font: 700 clamp(19px, 2vw, 23px) var(--font-display); margin: 40px 0 0; }
.legal p { font: 400 16px/1.7 var(--font-body); color: var(--text-muted); margin-top: 12px; max-width: 68ch; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════
   Responsive — tablet
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hotel-media { height: 220px; }
  .leadership-media { min-height: 380px; }
  .contact-card { padding: var(--space-6); }
}

@media (max-width: 900px) {
  /* One column everywhere. The side imagery leads on tablet/phone so the
     page still opens with something visual above the fold. */
  .track-grid, .leadership-grid, .contact-grid { grid-template-columns: 1fr; }
  /* Slideshow leads on tablet/phone so the section opens on imagery. */
  .track-side { order: -1; }
  .slideshow { aspect-ratio: 16 / 10; }
  .body-copy, .contact-copy .lede, .leadership-copy > p { max-width: none; }
  .leadership-media { min-height: 300px; order: -1; }
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 0 28px; }
  .mission-text { max-width: 26ch; }
}

/* Section links fold away only once they genuinely stop fitting — an iPad in
   portrait still has room for them. Below this the CTA and language switch
   are what matter; every section is still reachable by scrolling, and the
   footer repeats the same links. */
/* Perfect centring needs the two outer columns to balance the links, which
   with five items (and longer Spanish labels) only holds around 1000px and up.
   Below that, spread the three groups instead — evenly spaced reads as
   deliberate, where a centred row nudged 100px off does not. */
@media (max-width: 1000px) {
  .nav-inner { display: flex; justify-content: space-between; gap: 16px; }
  .nav-links a { padding: 9px 9px; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

/* ══════════════════════════════════════════════════════════════════════
   Responsive — phone
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root { --header-h: 65px; }
  .nav-inner { height: 64px; gap: 12px; }
  .nav-logo img { height: 26px; }
  .nav-end { gap: 8px; }
  .lang-btn { padding: 6px 10px; font-size: 11px; }
  .btn--sm { padding: 8px 12px; font-size: 12px; }
  .btn--lg { padding: 15px 24px; font-size: 15px; }
  :where(#track, #hotels, #leadership, #culture, #contact) { scroll-margin-top: 76px; }

  .hero-actions { gap: 10px; }
  .hero-actions .btn { width: 100%; }
  .textlink { padding: 4px; }

  .slideshow { aspect-ratio: 4 / 3; }
  .slide-arrow { opacity: 1; width: 34px; height: 34px; background: rgba(255,255,255,.78); }
  .slide figcaption { padding: 38px 16px 16px; }

  .hotel-body { padding: 22px 22px 26px; }
  .hotel-meta { gap: 24px; }
  /* Tighten the pills so all three cities fit a 390px screen without the
     strip needing to scroll. */
  .city-tabs { width: 100%; justify-content: flex-start; padding: 5px; }
  .city-tab { padding: 9px 13px; font-size: 13px; }

  .values-grid { grid-template-columns: 1fr; }
  .mission-text { max-width: none; }

  .contact-card { padding: 22px; }
  .footer-top { gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* iOS zooms the page in when a focused input is under 16px. */
@media (max-width: 480px) {
  .field input, .field textarea { font-size: 16px; }
}