@charset "UTF-8";
/* ==========================================================================
   SAMA TRAVEL — Design System
   v1.1  ·  Static build  ·  No framework, no build step, no third-party CDN
   Brand: logo blue #1B95D5 + logo amber #FBB614.
   Fonts are self-hosted: no request leaves the site to render text.
   ========================================================================== */

/* ---------------------------------------------------------------- 00. FONTS */
@font-face {
  font-family: "Jakarta";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/jakarta-var.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "InterVar";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {
  /* Brand colour — sampled from the official Sama Travel logo artwork.
   --blue and --amber are the exact logo values. The darker siblings share the
   same hue and exist because the logo blue is 2.3:1 on white: fine for a logo,
   nowhere near enough for text or icons. */
  --blue:       #53B0DF;   /* LOGO BLUE, exact. Decorative and on dark only */
  --blue-mid:   #1B95D5;   /* icons and borders on light (3.18:1) */
  --blue-dk:    #0D6FA4;   /* text, links, focus rings on light (5.20:1) */
  --blue-xdk:   #0A5580;
  --blue-lt:    #8FCDEE;   /* tint for dark surfaces */
  --blue-pale:  #E8F4FB;

  --amber:      #EBA410;   /* LOGO AMBER, exact. Always with ink text (6.95:1) */
  --amber-dk:   #8A5F00;   /* amber-family text on light (5.35:1) */
  --amber-lt:   #F7C55A;
  --amber-pale: #FEF4DD;

  --ink:        #062A42;   /* deep navy drawn from the brand blue */
  --ink-2:      #0B3E60;
  --ink-3:      #12557E;

  --paper:      #F6FAFC;   /* page background */
  --white:      #FFFFFF;
  --sand:       #E9F2F9;   /* alternating section band */
  --sand-2:     #D9E8F3;
  --line:       #DDE7EF;
  --line-2:     #C6D6E3;
  --body:       #3C4F5C;   /* 8.07:1 on paper */
  --body-soft:  #55697A;   /* 5.02:1 on the sand band */
  --ok:         #1F7A5A;
  --err:        #B3261E;

  /* Ink-surface text */
  --on-ink:       #EAF2F8;
  --on-ink-soft:  #B7CBDA;   /* 8.86:1 on ink */

  /* Type */
  --font-display: "Jakarta", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "InterVar", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-xs:   clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.94rem);
  --fs-base: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  --fs-lg:   clamp(1.09rem, 1.03rem + 0.30vw, 1.28rem);
  --fs-xl:   clamp(1.30rem, 1.18rem + 0.55vw, 1.65rem);
  --fs-h4:   clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
  --fs-h3:   clamp(1.50rem, 1.30rem + 0.95vw, 2.15rem);
  --fs-h2:   clamp(1.95rem, 1.55rem + 1.85vw, 3.30rem);
  --fs-h1:   clamp(2.45rem, 1.70rem + 3.35vw, 5.10rem);
  --fs-mega: clamp(3.10rem, 1.90rem + 5.20vw, 7.00rem);

  /* Space */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 40px;  --s-8: 48px;
  --s-9: 64px;  --s-10: 80px; --s-11: 96px; --s-12: 120px; --s-13: 160px;

  --section-y: clamp(64px, 8vw, 128px);
  --section-y-lg: clamp(80px, 10vw, 168px);

  /* Structure */
  --container: 1240px;
  --container-wide: 1480px;
  --container-text: 760px;
  --gutter: clamp(20px, 4vw, 48px);

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(6,42,66,.05), 0 2px 8px rgba(6,42,66,.05);
  --shadow:    0 2px 6px rgba(6,42,66,.06), 0 12px 32px rgba(6,42,66,.09);
  --shadow-lg: 0 4px 12px rgba(6,42,66,.08), 0 28px 68px rgba(6,42,66,.16);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .45s;

  --header-h: 80px;
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
/* Photographs get a placeholder tint while they load. SVG assets are
   transparent by design, so they must not pick it up. */
img:not([src$=".svg"]) { background-color: var(--sand-2); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-8) 0; }

::selection { background: var(--amber); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--blue-dk);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-ink :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.topbar :focus-visible,
.pilgrim :focus-visible,
.cta-band :focus-visible,
.page-hero :focus-visible,
.site-header.is-overlay:not(.is-stuck) :focus-visible {
  outline-color: var(--amber-lt);
}

.skip-link {
  position: absolute; top: -100px; left: var(--s-4); z-index: 999;
  background: var(--ink); color: var(--on-ink);
  padding: 12px 20px; border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s-4); }

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.03; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -0.024em; }
h4 { font-size: var(--fs-h4); line-height: 1.26; font-weight: 700; }
h5 { font-size: var(--fs-lg); line-height: 1.34; font-weight: 700; }

p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { color: var(--blue-dk); }

strong, b { font-weight: 700; color: var(--ink); }
small { font-size: var(--fs-xs); }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-dk);
  margin: 0 0 var(--s-4);
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--amber);
  flex: 0 0 28px;
}
.eyebrow.is-center { justify-content: center; }
.on-ink .eyebrow { color: var(--amber-lt); }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.62;
  color: var(--body);
  max-width: 62ch;
}
.on-ink .lead { color: var(--on-ink-soft); }

.display-serif { font-family: var(--font-display); font-weight: 520; }
.italic-accent { color: var(--blue-dk); }
.on-ink .italic-accent { color: var(--amber-lt); }

.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-9); }
.prose h3 { margin-top: var(--s-7); }
.prose ul, .prose ol { padding-left: 1.15em; margin: var(--s-4) 0; }
.prose li { margin-bottom: var(--s-2); }
.prose li::marker { color: var(--amber-dk); }
.prose blockquote {
  margin: var(--s-7) 0; padding: var(--s-2) 0 var(--s-2) var(--s-5);
  border-left: 2px solid var(--amber);
  font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.4;
  color: var(--ink);
}

/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
.container-text { width: 100%; max-width: var(--container-text); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); position: relative; }
.section-lg { padding-block: var(--section-y-lg); }
.section-tight { padding-block: clamp(48px, 6vw, 88px); }

.bg-cream { background: var(--paper); }
.bg-sand  { background: var(--sand); }
.bg-white { background: var(--white); }
.bg-ink   { background: var(--ink); }

.on-ink { color: var(--on-ink-soft); }
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4, .on-ink h5 { color: var(--white); }
.on-ink a { color: var(--white); }
.on-ink strong { color: var(--white); }

.section-head { max-width: 660px; margin-bottom: clamp(36px, 4.5vw, 64px); }
.section-head.is-center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--body-soft); font-size: var(--fs-lg); line-height: 1.6; }
.on-ink .section-head p { color: var(--on-ink-soft); }

.head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.head-row .section-head { margin-bottom: 0; }

.grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.split.is-wide-left  { grid-template-columns: 1.12fr .88fr; }
.split.is-wide-right { grid-template-columns: .88fr 1.12fr; }
.split.is-top { align-items: start; }
/* Both columns end on the same line. With align-items:center the shorter column
   floats and the section closes on a ragged edge; letting the media take the
   text column's height makes the boundary into the next section a single line.
   Scoped to the two-column state — once the split stacks the media keeps its
   own aspect ratio, or an unconstrained portrait image runs to 1,100px tall. */
@media (min-width: 1025px) {
  .split.is-stretch { align-items: stretch; }
  .split.is-stretch > * { min-width: 0; }
  .split.is-stretch .framed { display: flex; }
  .split.is-stretch .framed > .media { flex: 1; aspect-ratio: auto; min-height: 420px; }
}

/* Framed image — signature offset gold frame */
.framed { position: relative; }
.framed::before {
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--amber);
  transform: translate(18px, 18px);
  pointer-events: none; z-index: 0;
  transition: transform var(--dur) var(--ease);
}
.framed.is-left::before { transform: translate(-18px, 18px); }
.framed > img, .framed > .media { position: relative; z-index: 1; }
.framed:hover::before { transform: translate(12px, 12px); }
.framed.is-left:hover::before { transform: translate(-12px, 12px); }

.media { overflow: hidden; border-radius: var(--radius-sm); background: var(--sand-2); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media.r-1x1 { aspect-ratio: 1/1; }
.media.r-4x3 { aspect-ratio: 4/3; }
.media.r-3x2 { aspect-ratio: 3/2; }
.media.r-16x9 { aspect-ratio: 16/9; }
.media.r-3x4 { aspect-ratio: 3/4; }
.media.r-4x5 { aspect-ratio: 4/5; }

.media-zoom img { transition: transform 1.1s var(--ease-out); }
.media-zoom:hover img { transform: scale(1.05); }

/* ==========================================================================
   05. BUTTONS & LINKS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .015em;
  text-decoration: none; border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  white-space: nowrap; text-align: center;
  min-height: 48px;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: 0 0 17px; }

.btn-primary { background: var(--amber); color: var(--ink); border-color: var(--amber); }
/* On a dark field ".on-ink a { color: #fff }" outranks the button's own colour
   (0-1-1 beats 0-1-0) and turned the amber CTA into white-on-amber at 2.13:1.
   It went unreported for as long as the button sat over a photograph, because
   an automated checker cannot resolve the background there and returns
   "incomplete" rather than a failure. Ink on amber is 8.45:1. */
.on-ink .btn-primary, .on-ink .btn-primary:hover { color: var(--ink); }
.btn-primary:hover { background: var(--amber-lt); border-color: var(--amber-lt); color: var(--ink); box-shadow: 0 10px 26px rgba(235,164,16,.44); }

.btn-ink { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-ink:hover { background: var(--ink-3); border-color: var(--ink-3); color: var(--white); box-shadow: 0 10px 26px rgba(6,42,66,.24); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

.btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.42); }
.btn-ghost-light:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

.btn-wa { background: #0E7365; color: #fff; border-color: #0E7365; }
.btn-wa:hover { background: #0A5A50; border-color: #0A5A50; color: #fff; }

.btn-sm { padding: 11px 22px; min-height: 42px; font-size: var(--fs-xs); }
.btn-lg { padding: 18px 38px; min-height: 56px; font-size: var(--fs-base); }
.btn-block { display: flex; width: 100%; }

.btn-group { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Arrow link */
.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .01em;
  color: var(--ink); text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--amber);
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.link-arrow:hover { gap: 14px; color: var(--blue-dk); }
.link-arrow:hover svg { transform: translateX(2px); }
.on-ink .link-arrow { color: #fff; border-bottom-color: var(--amber); }
.on-ink .link-arrow:hover { color: var(--amber-lt); }

/* ==========================================================================
   06. FORMS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .field-label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--body-soft);
}
.field .req { color: var(--err); }

.input, .select, .textarea {
  width: 100%;
  padding: 13px 15px;
  min-height: 50px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--ink);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 118px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: #96A0AA; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--blue-mid); }
/* :focus-within is required for <input type="date"> — Chromium focuses a
   segment inside the input's shadow tree, so :focus never matches the host. */
.input:focus, .select:focus, .textarea:focus,
.input:focus-within, .select:focus-within {
  outline: none; border-color: var(--blue-dk);
  box-shadow: 0 0 0 3px rgba(13,111,164,.20);
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355697A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
input[type="date"].input { cursor: pointer; }

.field-error {
  font-size: var(--fs-xs); color: var(--err); font-weight: 600;
  display: none; align-items: center; gap: 5px;
}
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--err); }
.field.has-error .field-error { display: flex; }

.form-note { font-size: var(--fs-xs); color: var(--body-soft); line-height: 1.55; }
.form-note a { color: var(--amber-dk); }

.checkbox {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: var(--fs-xs); line-height: 1.55; color: var(--body-soft);
  cursor: pointer;
}
.checkbox input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--blue-dk); cursor: pointer; }

.form-status {
  display: none; padding: 14px 18px; border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.5;
}
.form-status.is-shown { display: block; }
.form-status.is-ok { background: #E7F3EE; color: var(--ok); border: 1px solid #BFE0D3; }
.form-status.is-err { background: #FBEAE9; color: var(--err); border: 1px solid #F0C8C5; }

/* ==========================================================================
   07. HEADER & NAVIGATION
   ========================================================================== */
.topbar {
  background: var(--ink);
  color: #90A6B8;
  font-size: .76rem;
  letter-spacing: .002em;
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative; z-index: 60;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 36px; flex-wrap: wrap;
}
.topbar-inner > * { margin: 0; }
.topbar-note { display: flex; align-items: center; gap: 8px; margin: 0; line-height: 1.2; }
.topbar-note svg { width: 13px; height: 13px; color: var(--blue-lt); flex: 0 0 13px; opacity: .9; }
.topbar-links { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; line-height: 1.2; }
.topbar-links a {
  color: var(--on-ink-soft); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .25s var(--ease);
}
.topbar-links a:hover { color: #fff; }
.topbar-links a:hover svg { opacity: 1; color: var(--amber); }
.topbar-links svg { width: 13px; height: 13px; flex: 0 0 13px; opacity: .85; }
.topbar-sep { width: 1px; height: 12px; background: rgba(255,255,255,.15); }

.site-header {
  position: sticky; top: 0; z-index: 70;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* Overlay variant: stays in flow but pulls the next section up underneath it,
   so it floats over the hero without ever colliding with the top bar. */
.site-header.is-overlay {
  background: transparent;
  border-bottom-color: transparent;
  margin-bottom: calc(-1 * var(--header-h) - 1px);
}
/* The nav sits over photography — this keeps it legible whatever is behind it. */
.site-header.is-overlay::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -44px;
  background: linear-gradient(180deg, rgba(6,42,66,.62) 0%, rgba(6,42,66,.34) 55%, rgba(6,42,66,0) 100%);
  pointer-events: none; z-index: -1;
  transition: opacity .35s var(--ease);
}
.site-header.is-overlay.is-stuck::before { opacity: 0; }
.site-header.is-overlay.is-stuck {
  background: rgba(246,250,252,.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(6,42,66,.07);
}

.header-inner {
  display: flex; align-items: center;
  gap: var(--s-5); min-height: var(--header-h);
  transition: min-height .3s var(--ease);
}
/* Compacts on scroll so the sticky bar takes less of the screen. */
.site-header.is-stuck .header-inner { min-height: 64px; }

/* Logo — referenced as files so the official artwork is a drop-in replacement.
   Two images per location; CSS shows whichever suits the surface behind it. */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.logo-img { height: 54px; width: auto; display: block; }
.logo .is-dark { display: none; }

.site-header .logo-img { height: 42px; transition: height .3s var(--ease); }
.site-header.is-stuck .logo-img { height: 34px; }
.site-footer .logo-img { height: 58px; }
.drawer-head .logo-img { height: 32px; }

/* Dark surfaces take the white lockup */
.site-header.is-overlay:not(.is-stuck):not(.has-open-menu) .logo .is-light,
.site-footer .logo .is-light { display: none; }
.site-header.is-overlay:not(.is-stuck):not(.has-open-menu) .logo .is-dark,
.site-footer .logo .is-dark { display: block; }

/* Primary nav */
.nav { display: flex; align-items: center; gap: 2px; margin-left: clamp(16px, 3vw, 44px); }
.nav-item { position: relative; }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 14px;
  font-size: .905rem; font-weight: 600; letter-spacing: -0.004em;
  color: var(--ink); text-decoration: none;
  transition: color .25s var(--ease);
  white-space: nowrap;
}
.nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--amber);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s var(--ease);
}
.nav-link:hover::after,
.nav-item.is-open > .nav-link::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link .caret { width: 11px; height: 11px; opacity: .55; transition: transform .3s var(--ease); }
.nav-link:hover, .nav-item.is-open > .nav-link { color: var(--blue-dk); }
.nav-item.is-open > .nav-link .caret { transform: rotate(180deg); }
.nav-link[aria-current="page"] { color: var(--blue-dk); }
.is-overlay:not(.is-stuck) .nav-link { color: rgba(255,255,255,.92); }
.is-overlay:not(.is-stuck) .nav-link:hover,
.is-overlay:not(.is-stuck) .nav-item.is-open > .nav-link { color: var(--amber-lt); }
.is-overlay:not(.is-stuck) .nav-link[aria-current="page"] { color: var(--amber-lt); }

/* Dropdown — compact, for shallow menus */
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translate(-50%, 8px);
  min-width: 560px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s-5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility 0s linear .26s;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5);
  z-index: 76;
}
.nav-item.is-open > .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility 0s;
}
.dropdown::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }

.dd-col { display: flex; flex-direction: column; gap: 3px; }
.dd-title {
  font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-dk); padding: 0 12px 8px; margin: 0;
}
.dd-link {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; border-radius: var(--radius);
  text-decoration: none; transition: background-color .22s var(--ease);
}
.dd-link:hover { background: var(--blue-pale); }
.dd-link b { font-size: .875rem; font-weight: 700; color: var(--ink); }
.dd-link span { font-size: .78rem; color: var(--body-soft); line-height: 1.45; }

/* ==========================================================================
   MEGA PANEL — full-bleed, for the two deep sections
   ========================================================================== */
.nav-item.has-mega { position: static; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 28px 56px rgba(6,42,66,.16);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
  z-index: 75;
}
.nav-item.is-open > .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s;
}

.mega-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) clamp(280px, 24vw, 350px);
  gap: clamp(24px, 3vw, 52px);
  padding-block: clamp(28px, 3vw, 42px);
  align-items: start;
}
.mega.is-narrow .mega-inner {
  grid-template-columns: repeat(2, minmax(0, 1fr)) clamp(300px, 26vw, 380px);
  max-width: 1180px;
}
.mega-col { min-width: 0; }
.mega-title {
  font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-dk); margin: 0 0 14px;
}
/* Negative inline margin keeps the text on the page grid while letting the
   hover background breathe past it. */
.mega-link {
  display: block; padding: 9px 12px; margin-inline: -12px;
  border-radius: var(--radius);
  text-decoration: none; transition: background-color .2s var(--ease);
}
.mega-link:hover { background: var(--blue-pale); }
.mega-link b {
  display: block; font-size: .89rem; font-weight: 700; color: var(--ink);
  line-height: 1.3; letter-spacing: -0.006em;
}
.mega-link span {
  display: block; font-size: .765rem; color: var(--body-soft);
  line-height: 1.45; margin-top: 2px;
}
.mega-col .link-arrow { margin: 14px 0 0; font-size: .8rem; }

/* Featured card */
.mega-feature {
  position: relative; display: block; text-decoration: none;
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4/3; background: var(--ink); isolation: isolate;
}
.mega-feature img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform 1s var(--ease-out);
}
.mega-feature::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,42,66,.08) 0%, rgba(6,42,66,.30) 45%, rgba(6,42,66,.88) 100%);
}
.mega-feature:hover img { transform: scale(1.05); }
.mega-feature-body { position: absolute; inset: auto 0 0 0; padding: var(--s-5); color: #fff; }
.mega-feature-tag {
  display: inline-block; font-size: .58rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); background: var(--amber);
  padding: 5px 10px; border-radius: var(--radius-pill); margin-bottom: 10px;
}
.mega-feature-body h3 { color: #fff; font-size: 1.22rem; margin: 0 0 3px; letter-spacing: -0.02em; }
.mega-feature-body p { font-size: .78rem; color: rgba(255,255,255,.82); margin: 0; }

/* Panel footer strip */
.mega-foot { background: var(--sand); border-top: 1px solid var(--line); }
.mega-foot-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); padding-block: 16px; flex-wrap: wrap;
}
.mega-foot p { margin: 0; font-size: .845rem; color: var(--body); }
.mega-foot p b { color: var(--ink); }
.mega-foot .mega-foot-links { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.mega-foot .mega-foot-links a {
  font-size: .8rem; font-weight: 700; color: var(--blue-dk); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.mega-foot .mega-foot-links a:hover { color: var(--ink); }
.mega-foot .mega-foot-links svg { width: 14px; height: 14px; }

/* An open panel forces the header solid — a transparent bar above a white
   panel reads as a rendering fault. */
.site-header.is-overlay.has-open-menu {
  background: rgba(246,250,252,.98);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
}
.site-header.is-overlay.has-open-menu::before { opacity: 0; }
.site-header.is-overlay.has-open-menu .nav-link { color: var(--ink); }
.site-header.is-overlay.has-open-menu .nav-link:hover,
.site-header.is-overlay.has-open-menu .nav-item.is-open > .nav-link { color: var(--blue-dk); }
.site-header.is-overlay.has-open-menu .header-phone { color: var(--ink); }
.site-header.is-overlay.has-open-menu .header-phone svg { color: var(--blue-dk); }
.site-header.is-overlay.has-open-menu .header-phone .hp-label { color: var(--body-soft); }
.site-header.is-overlay.has-open-menu .burger { border-color: var(--line-2); }
.site-header.is-overlay.has-open-menu .burger span,
.site-header.is-overlay.has-open-menu .burger span::before,
.site-header.is-overlay.has-open-menu .burger span::after { background: var(--ink); }

/* Backdrop behind an open panel */
.nav-scrim {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(6,42,66,.34);
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s;
  pointer-events: none;
}
.nav-scrim.is-shown { opacity: 1; visibility: visible; }

.header-actions { display: flex; align-items: center; gap: var(--s-4); flex: 0 0 auto; margin-left: auto; }
.header-phone {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.header-phone svg { width: 17px; height: 17px; color: var(--blue-dk); flex: 0 0 17px; }
.header-phone .hp-text { display: flex; flex-direction: column; line-height: 1.15; }
.header-phone .hp-label {
  font-size: .58rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--body-soft);
}
.header-phone .hp-num { font-size: .93rem; font-weight: 700; letter-spacing: -0.01em; }
.header-phone:hover .hp-num { color: var(--blue-dk); }
.site-header.is-stuck .header-phone .hp-label { display: none; }
.is-overlay:not(.is-stuck) .header-phone { color: #fff; }
.is-overlay:not(.is-stuck) .header-phone .hp-label { color: rgba(255,255,255,.66); }
.is-overlay:not(.is-stuck) .header-phone:hover .hp-num { color: var(--amber-lt); }
.is-overlay:not(.is-stuck) .header-phone svg { color: var(--amber-lt); }
.is-overlay:not(.is-stuck) .btn-outline { color: #fff; border-color: rgba(255,255,255,.5); }
.is-overlay:not(.is-stuck) .btn-outline:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* Burger */
.burger {
  display: none; width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  flex: 0 0 46px;
}
.burger span {
  display: block; position: relative; width: 19px; height: 1.6px;
  background: var(--ink); border-radius: 2px;
  transition: background-color .2s var(--ease), transform .3s var(--ease);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 1.6px;
  background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.is-overlay:not(.is-stuck) .burger { border-color: rgba(255,255,255,.42); }
.is-overlay:not(.is-stuck) .burger span,
.is-overlay:not(.is-stuck) .burger span::before,
.is-overlay:not(.is-stuck) .burger span::after { background: #fff; }
.burger[aria-expanded="true"] span { background: transparent !important; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 80;
  background: var(--paper);
  transform: translateX(100%);
  transition: transform .42s var(--ease-out);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
  visibility: hidden;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h); padding-inline: var(--gutter);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--paper); z-index: 2;
}
.drawer-close {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--radius);
}
.drawer-close svg { width: 19px; height: 19px; }
.drawer-body { padding: var(--s-5) var(--gutter) var(--s-9); flex: 1; }
.m-nav { list-style: none; margin: 0; padding: 0; }
.m-nav > li { border-bottom: 1px solid var(--line); }
.m-nav > li > a, .m-acc-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 17px 0;
  font-family: var(--font-display); font-weight: 540;
  font-size: 1.32rem; color: var(--ink); text-decoration: none; text-align: left;
}
.m-acc-btn svg { width: 17px; height: 17px; color: var(--amber-dk); transition: transform .3s var(--ease); flex: 0 0 17px; }
.m-acc-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-acc-panel { display: none; padding: 0 0 var(--s-4) var(--s-4); }
.m-acc-panel.is-open { display: block; }
.m-acc-title {
  font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-dk); margin: 18px 0 4px;
}
.m-acc-panel > a:first-child b { color: var(--ink); }
.m-acc-panel a {
  display: block; padding: 10px 0; font-size: var(--fs-sm); font-weight: 600;
  color: var(--body); text-decoration: none;
}
.m-acc-panel a:hover { color: var(--blue-dk); }
.drawer-cta { margin-top: var(--s-7); display: grid; gap: var(--s-3); }
.drawer-contact {
  margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--body-soft);
}
.drawer-contact a { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--ink); text-decoration: none; font-weight: 600; }
.drawer-contact svg { width: 16px; height: 16px; color: var(--blue-dk); flex: 0 0 16px; }

/* ==========================================================================
   08. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(86vh, 790px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: clamp(72px, 8vw, 132px);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenburns 26s ease-in-out infinite alternate;
  transform-origin: 58% 45%;
}
@keyframes kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.14); }
}

/* --------------------------------------------------------------------------
   Hero slideshow — four photographs, 7s each, slow zoom under a long crossfade.

   Slide one is a plain <img> in the markup and the only one preloaded, so with
   JavaScript off the hero is a single photograph exactly as before. The others
   stack on top at opacity 0 and are only revealed by the script, which also
   un-hides the controls: no JavaScript, no controls that do nothing.

   The zoom runs once per slide rather than looping, and restarts when the slide
   becomes active, so every photograph gets the same movement from the same
   start point instead of joining a shared animation part-way through.
   -------------------------------------------------------------------------- */
[data-hero-slides] .hero-slide {
  position: absolute; inset: 0;
  opacity: 0; animation: none;
  transition: opacity 1.5s var(--ease);
  will-change: opacity;
}
[data-hero-slides] .hero-slide.is-on {
  opacity: 1;
  animation: kenburns-slide 9s ease-out forwards;
}
@keyframes kenburns-slide {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12); }
}

/* In the hero's bottom row, not floated over it: the enquiry console is pulled
   up into the foot of the hero and was sitting on top of an absolutely
   positioned control, so the pause button could not be clicked at all. */
.hero-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5) var(--s-6); flex-wrap: wrap;
}
.hero-foot .hero-trust { flex: 1 1 auto; }
.hero-controls {
  display: flex; align-items: center; gap: 14px;
  flex: 0 0 auto; padding-bottom: 2px;
}
.hero-controls[hidden] { display: none; }

.hero-play {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  background: rgba(6,42,66,.42); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.hero-play:hover { background: rgba(6,42,66,.72); border-color: #fff; }
.hero-play-pause {
  width: 9px; height: 11px;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.hero-play-go { display: none; }
.hero-play-go svg { width: 15px; height: 15px; }
.hero-play.is-paused .hero-play-pause { display: none; }
.hero-play.is-paused .hero-play-go { display: inline-flex; }

.hero-dots { list-style: none; display: flex; gap: 7px; margin: 0; padding: 0; }
.hero-dots button {
  display: block; width: 26px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.36); border: 0; padding: 0;
  transition: background-color .3s var(--ease), width .3s var(--ease);
}
.hero-dots button:hover { background: rgba(255,255,255,.7); }
.hero-dots button[aria-current="true"] { background: var(--amber); width: 34px; }
/* The bar itself is 3px, which is below the 24px target minimum, so the
   hit area is extended without changing what is drawn. */
.hero-dots li { display: flex; align-items: center; }
.hero-dots button { position: relative; }
.hero-dots button::after { content: ""; position: absolute; inset: -12px -4px; }
/* Two jobs, kept separate: hold the text column readable, and settle the
   foot of the image into the enquiry console. The right two-fifths of the
   photograph is left alone — it is the reason anyone stops scrolling. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(101deg,
      rgba(6,42,66,.90) 0%,
      rgba(6,42,66,.74) 26%,
      rgba(6,42,66,.42) 48%,
      rgba(6,42,66,.10) 70%,
      rgba(6,42,66,0)   84%),
    linear-gradient(180deg,
      rgba(6,42,66,.30) 0%,
      rgba(6,42,66,0)   20%,
      rgba(6,42,66,0)   58%,
      rgba(6,42,66,.42) 88%,
      rgba(6,42,66,.62) 100%);
}
.hero-inner { position: relative; width: 100%; }
.hero-content { max-width: 800px; color: #fff; }
.hero .eyebrow { margin-bottom: var(--s-3); }
.hero h1 {
  color: #fff;
  font-size: var(--fs-mega);
  line-height: .96;
  letter-spacing: -0.038em;
  margin-bottom: var(--s-4);
  text-shadow: 0 2px 40px rgba(0,0,0,.30);
}
.hero .eyebrow { color: var(--amber-lt); }
.hero .eyebrow::before { background: var(--amber-lt); }
.hero-sub {
  font-size: clamp(1.04rem, .96rem + .42vw, 1.28rem);
  line-height: 1.56; color: rgba(255,255,255,.9);
  max-width: 46ch;                 /* Bringhurst measure, and it breaks cleanly */
  margin-bottom: clamp(28px, 3.4vw, 44px);
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Sits outside the text column so the three items stay on one line and the
   rule spans the hero, grounding the composition. */
.hero-trust {
  list-style: none; margin: clamp(30px, 3.8vw, 48px) 0 0; padding: var(--s-5) 0 0;
  border-top: 1px solid rgba(255,255,255,.20);
  display: flex; flex-wrap: wrap; gap: 10px clamp(26px, 3.4vw, 56px);
}
/* One line each. Two-line items wrapped raggedly and read as clutter. */
.hero-trust-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .875rem; font-weight: 600; letter-spacing: -0.004em;
  color: #fff; line-height: 1.3; white-space: nowrap;
}
.hero-trust-item svg { width: 17px; height: 17px; color: var(--amber); flex: 0 0 17px; }

/* Page hero (inner pages) */
.page-hero {
  position: relative; overflow: hidden; background: var(--ink);
  padding-top: calc(var(--header-h) + clamp(64px, 8vw, 112px));
  padding-bottom: clamp(56px, 7vw, 104px);
  isolation: isolate;
}
.page-hero .hero-media { z-index: -2; }
.page-hero .hero-media img { animation: kenburns 34s ease-in-out infinite alternate; }
.page-hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(101deg, rgba(6,42,66,.88) 0%, rgba(6,42,66,.66) 42%, rgba(6,42,66,.34) 74%, rgba(6,42,66,.18) 100%),
    linear-gradient(180deg, rgba(6,42,66,.46) 0%, rgba(6,42,66,.14) 42%, rgba(6,42,66,.52) 100%);
}
.page-hero h1 { color: #fff; max-width: 17ch; margin-bottom: var(--s-4); }
.page-hero .lead { color: rgba(255,255,255,.86); max-width: 60ch; }
.page-hero .eyebrow { color: var(--amber-lt); }
.page-hero .eyebrow::before { background: var(--amber-lt); }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-xs); margin-bottom: var(--s-5); }
.breadcrumb a { color: rgba(255,255,255,.72); text-decoration: none; }
.breadcrumb a:hover { color: var(--amber-lt); }
.breadcrumb span[aria-current] { color: #fff; font-weight: 600; }
.breadcrumb .sep { color: rgba(255,255,255,.35); }

/* ==========================================================================
   09. ENQUIRY CONSOLE
   The primary conversion element on the homepage. Everything here serves one
   job: start an enquiry in about fifteen seconds.
   ========================================================================== */
.console-wrap { position: relative; z-index: 20; margin-top: clamp(-76px, -6vw, -52px); }
.console {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(6,42,66,.05), 0 22px 54px rgba(6,42,66,.14);
  overflow: hidden;
}

/* --- tab strip ------------------------------------------------------------ */
.console-tabs {
  display: flex; align-items: stretch;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}
.console-tablist {
  display: flex; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.console-tablist::-webkit-scrollbar { display: none; }

.console-tab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 16px 24px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--body-soft);
  white-space: nowrap; position: relative; min-height: 56px;
  /* The active tab must read as owning the panel below it, so the accent sits
     on top and the shared border is knocked out at the bottom. */
  border-top: 3px solid transparent;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.console-tab svg { width: 17px; height: 17px; flex: 0 0 17px; }
.console-tab:hover { color: var(--ink); background: rgba(255,255,255,.62); }
.console-tab[aria-selected="true"] {
  color: var(--ink); background: var(--white);
  border-top-color: var(--amber);
  border-bottom-color: var(--white);
}

/* WhatsApp lives here rather than in the footer row: it fills otherwise dead
   space and gives the channel the prominence it earns in Kerala. */
.console-wa {
  display: inline-flex; align-items: center; gap: 9px;
  padding-inline: clamp(16px, 2vw, 26px);
  font-size: var(--fs-xs); font-weight: 700; color: #0E7365;
  text-decoration: none; white-space: nowrap;
  border-left: 1px solid var(--line);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.console-wa svg { width: 17px; height: 17px; flex: 0 0 17px; }
.console-wa:hover { background: rgba(14,115,101,.07); color: #0A5A50; }

/* --- panel ---------------------------------------------------------------- */
.console-panel { padding: clamp(22px, 2.6vw, 30px) clamp(22px, 3vw, 32px) clamp(18px, 2vw, 24px); }
.console-panel[hidden] { display: none; }

.console-grid {
  display: grid; gap: var(--s-4);
  /* Weighted by how much each field actually needs, not evenly. */
  grid-template-columns: 1.45fr 1fr .82fr minmax(190px, auto);
  align-items: end;
}
.console-grid .btn { width: 100%; min-height: 50px; box-shadow: 0 6px 18px rgba(235,164,16,.32); }
/* The flights panel carries a fourth field. */
.console-grid.is-wide { grid-template-columns: 1.15fr 1.15fr .95fr .8fr minmax(180px, auto); }

/* Fields read as a search tool at a glance */
.input-icon { position: relative; display: block; }
.input-icon > svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--blue-dk);
  pointer-events: none; z-index: 1;
}
.input-icon .input,
.input-icon .select { padding-left: 44px; }
/* One calendar glyph, not two: the native indicator becomes an invisible
   full-field hit area so clicking anywhere opens the picker. */
.input-icon input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}

.console-foot {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  font-size: var(--fs-xs); color: var(--body-soft);
}
.console-foot .console-quick { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.console-foot .console-quick > span { font-weight: 600; }
/* Blue for navigation, amber reserved for action — otherwise the accent
   stops meaning anything. */
.console-foot a {
  color: var(--blue-dk); font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.console-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.console-foot svg { width: 14px; height: 14px; }
.console-note { display: inline-flex; align-items: center; gap: 7px; }
.console-note svg { color: var(--blue-dk); flex: 0 0 14px; }

/* ==========================================================================
   10. CARDS & RAILS
   ========================================================================== */
/* Pillar card */
.pillar {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: clamp(24px, 3vw, 34px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  height: 100%;
}
.pillar:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--amber); }
.pillar-icon {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-pale); color: var(--blue-dk);
  transition: background-color .35s var(--ease), color .35s var(--ease);
  flex: 0 0 50px;
}
.pillar-icon svg { width: 23px; height: 23px; }
.pillar:hover .pillar-icon { background: var(--amber); color: var(--ink); }
.pillar h3 { font-size: var(--fs-h4); margin: 0; }
.pillar p { font-size: var(--fs-sm); color: var(--body-soft); line-height: 1.6; margin: 0; flex: 1; }
.pillar .link-arrow { align-self: flex-start; }

/* ==========================================================================
   SERVICE MOSAIC — "what we do"
   Six identical white boxes gave the six service lines equal weight and no
   colour. This is a bento: the flagship gets a photographic tile at double
   width, the rest carry a tinted wash keyed to the service, and a dark tile
   closes the row with an action. Colour is never the only signal — every card
   also has its own icon and label.
   ========================================================================== */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
}

.svc {
  --tone-bg: var(--white);
  --tone-line: var(--line);
  --tone-ink: var(--blue-dk);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 13px;
  padding: clamp(22px, 2.2vw, 28px);
  border-radius: 16px;
  background: var(--tone-bg);
  border: 1px solid var(--tone-line);
  text-decoration: none;
  transition: transform .38s var(--ease), box-shadow .38s var(--ease);
}
.svc:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(6,42,66,.12); }

.svc-icon {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tone-ink); color: #fff;
}
.svc-icon svg { width: 22px; height: 22px; }

.svc h3 { font-size: var(--fs-h4); margin: 0; }
.svc p { font-size: var(--fs-sm); line-height: 1.6; color: var(--body); margin: 0; flex: 1; }
.svc .link-arrow {
  align-self: flex-start; margin-top: 2px;
  color: var(--tone-ink); border-bottom-color: var(--tone-ink);
}
.svc:hover .link-arrow { gap: 14px; }

/* Tints. Each is checked for body text at 7:1 or better, and each icon chip
   carries white at 5.6:1 or better. */
.svc[data-tone="sky"]   { --tone-bg:#E4F1FA; --tone-line:#C9E2F4; --tone-ink:#0D6FA4; }
.svc[data-tone="green"] { --tone-bg:#E3F0E9; --tone-line:#C6E0D2; --tone-ink:#1F6B4D; }
.svc[data-tone="amber"] { --tone-bg:#FDF1DA; --tone-line:#F2DDB4; --tone-ink:#8A5F00; }
.svc[data-tone="slate"] { --tone-bg:#E9EDF2; --tone-line:#D2DAE4; --tone-ink:#3C5570; }
.svc[data-tone="teal"]  { --tone-bg:#E1F0EF; --tone-line:#C3E0DD; --tone-ink:#146A66; }

/* Flagship: double width, photographic */
.svc-feature {
  grid-column: span 2;
  min-height: 316px;
  justify-content: flex-end;
  background: var(--ink); border-color: var(--ink);
  overflow: hidden;
}
.svc-feature img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.svc-feature::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(158deg, rgba(6,42,66,.30) 0%, rgba(6,42,66,.58) 44%, rgba(6,42,66,.90) 100%);
}
.svc-feature:hover img { transform: scale(1.05); }
.svc-feature h3 { color: #fff; font-size: var(--fs-h3); }
.svc-feature p { color: rgba(255,255,255,.88); flex: 0 1 auto; max-width: 46ch; }
.svc-feature .svc-icon { background: var(--amber); color: var(--ink); }
.svc-feature .link-arrow { color: #fff; border-bottom-color: var(--amber); }

/* Closing tile: an action, not a seventh service */
.svc-cta { background: var(--ink); border-color: var(--ink); }
.svc-cta h3 { color: #fff; }
.svc-cta p { color: var(--on-ink-soft); }
.svc-cta .svc-icon { background: rgba(255,255,255,.13); color: var(--amber); }
.svc-cta .link-arrow { color: var(--amber); border-bottom-color: var(--amber); }
.svc-cta:hover { box-shadow: 0 16px 34px rgba(6,42,66,.28); }

@media (max-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-feature { grid-column: span 2; min-height: 280px; }
}
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-feature { grid-column: span 1; min-height: 260px; }
}

/* --------------------------------------------------------------------------
   The atlas — sixteen destinations grouped by region.

   Deliberately not another photo-card grid: the region name and the
   destination names carry the section, and the photograph is a panel beside
   them rather than a slab behind them. Nothing is hidden behind a scroller,
   so every name is on the page for a visitor scanning for one country.

   The card is not a link. The region heading is, and each destination name
   is, which keeps the click target unambiguous and the anchor text useful.
   -------------------------------------------------------------------------- */
.atlas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  margin-top: clamp(32px, 4vw, 52px);
}
.atlas-card {
  display: grid;
  grid-template-columns: 38% 1fr;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.atlas-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }

.atlas-media { position: relative; overflow: hidden; background: var(--sand-2); min-height: 258px; }
.atlas-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.atlas-card:hover .atlas-media img { transform: scale(1.06); }

/* A hairline of brand colour down the join, so the panel reads as part of
   the card rather than a photograph parked next to it. */
.atlas-media::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 3px;
  background: var(--amber);
}

.atlas-body { padding: clamp(22px, 2.4vw, 30px); }
.atlas-count {
  font-family: var(--font-display);
  font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--blue-dk); margin: 0 0 8px;
}
.atlas-body h3 { font-size: 1.32rem; line-height: 1.25; margin: 0 0 10px; }
.atlas-body h3 a { color: var(--ink); text-decoration: none; }
.atlas-body h3 a:hover { color: var(--blue-dk); }
.atlas-note {
  font-size: var(--fs-sm); color: var(--body-soft); margin: 0 0 16px;
  max-width: 40ch;
}
/* One name per line in two columns, not a run-on with separators: a visitor
   is scanning for one country, and a wrapped list makes that a slow read. */
.atlas-list {
  list-style: none; margin: 0; padding: 16px 0 0;
  border-top: 1px solid var(--line);
  column-count: 2; column-gap: 20px;
}
.atlas-list li { break-inside: avoid; margin-bottom: 7px; }
.atlas-list li:last-child { margin-bottom: 0; }
.atlas-list a {
  position: relative; display: inline-block; padding-left: 14px;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--body); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
/* Blue, not amber: these markers sit in front of links, and blue carries
   structure on this site while amber is kept for action and accent rules. */
.atlas-list a::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--blue-mid);
}
.atlas-list a:hover { color: var(--blue-dk); border-bottom-color: var(--blue-dk); }

.atlas-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px 32px;
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding-top: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid var(--line);
}
.atlas-foot p { margin: 0; font-size: var(--fs-sm); color: var(--body-soft); max-width: 62ch; }

@media (max-width: 1100px) {
  .atlas-card { grid-template-columns: 34% 1fr; }
  .atlas-media { min-height: 230px; }
}
@media (max-width: 860px) {
  .atlas { grid-template-columns: 1fr; }
  .atlas-card { grid-template-columns: 38% 1fr; }
}
/* Kept side by side on the phone rather than stacked: four stacked cards with
   a banner photo each turns this section into a very long scroll, and the
   photograph is supporting evidence here, not the point. */
@media (max-width: 620px) {
  .atlas-card { grid-template-columns: 116px 1fr; }
  .atlas-media { min-height: 100%; }
  .atlas-body { padding: 18px; }
  .atlas-body h3 { font-size: 1.12rem; }
  .atlas-note { font-size: var(--fs-xs); margin-bottom: 14px; }
  .atlas-list { column-count: 1; padding-top: 13px; }
  .atlas-list li { margin-bottom: 6px; }
}

/* Destination card — the tall photo tiles on the region pages. */
.dest-card {
  position: relative; display: block; text-decoration: none;
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3/4; background: var(--ink);
  isolation: isolate;
}
.dest-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
  z-index: -2;
}
.dest-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,42,66,.05) 0%, rgba(6,42,66,.12) 42%, rgba(6,42,66,.82) 100%);
  transition: opacity .4s var(--ease);
}
.dest-card:hover img { transform: scale(1.07); }
.dest-body {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-5); color: #fff;
}
.dest-body h3 { color: #fff; font-size: 1.45rem; margin: 0 0 5px; }
.dest-body p { font-size: var(--fs-xs); color: rgba(255,255,255,.78); margin: 0; }

/* --------------------------------------------------------------------------
   Journey card.

   The old card ended on a footer reading "Price / On request" beside a
   "View details" button — a label announcing the absence of a number, next to
   a CTA that repeated the link already on the title. Both are gone. The card
   now ends on the one line a browser actually wants next: where the journey
   goes. The title link is stretched across the card, so there is one link,
   one target, and the anchor text is the journey name.
   -------------------------------------------------------------------------- */
.pkg {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden; height: 100%;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.pkg:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--line-2); }
.pkg:focus-within { border-color: var(--blue-dk); box-shadow: var(--shadow); }
.pkg-media { position: relative; aspect-ratio: 16/11; overflow: hidden; background: var(--sand-2); }
.pkg-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.pkg:hover .pkg-media img { transform: scale(1.06); }

/* Ink glass, not amber. Amber is the action colour on this site; a passive
   label wearing it competes with the buttons that actually do something. */
.pkg-badge {
  position: absolute; top: 14px; left: 14px;
  font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(6,42,66,.78); color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}

.pkg-body { padding: clamp(20px, 2.4vw, 26px); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.pkg-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: var(--fs-xs); color: var(--body-soft); font-weight: 600;
}
.pkg-meta span { display: inline-flex; align-items: center; gap: 6px; }
.pkg-meta svg { width: 14px; height: 14px; color: var(--blue-dk); flex: 0 0 14px; }
.pkg h3 { font-size: var(--fs-h4); margin: 0; }
.pkg h3 a { text-decoration: none; }
.pkg h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pkg:hover h3 a { color: var(--blue-dk); }
.pkg-desc { font-size: var(--fs-sm); color: var(--body-soft); line-height: 1.6; margin: 0; flex: 1; }

.pkg-where {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink);
  margin: 0; padding-top: var(--s-4); margin-top: auto;
  border-top: 1px solid var(--line);
}
.pkg-where svg { width: 14px; height: 14px; color: var(--amber-dk); flex: 0 0 14px; margin-top: 1px; }

/* An affordance, not a second link — the whole card already goes there. */
.pkg-cue {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--blue-dk);
  opacity: 0; transform: translateX(-5px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.pkg-cue svg { width: 15px; height: 15px; }
.pkg:hover .pkg-cue, .pkg:focus-within .pkg-cue { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Lead journey — one flagship route given the room a card cannot give it.
   Six equal cards gave six unequal journeys equal weight and left the twelve
   stop route squeezed into four lines of 12px type. Here it is legible.
   -------------------------------------------------------------------------- */
.pkg-lead {
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: clamp(32px, 4vw, 52px);
}
.pkg-lead-media { position: relative; overflow: hidden; background: var(--sand-2); min-height: 380px; }
.pkg-lead-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.pkg-lead:hover .pkg-lead-media img { transform: scale(1.04); }

.pkg-lead-body {
  padding: clamp(28px, 3.4vw, 48px);
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: var(--s-4);
}
.pkg-lead-body h3 { font-size: var(--fs-h3); margin: 0; }
.pkg-lead-desc { font-size: var(--fs-base); color: var(--body); margin: 0; max-width: 52ch; }
.pkg-lead-route {
  width: 100%; padding: var(--s-4) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pkg-lead-route .label {
  font-family: var(--font-display);
  font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--blue-dk); margin: 0 0 7px;
}
.pkg-lead-route .route {
  font-size: var(--fs-sm); color: var(--body-soft); line-height: 1.75; margin: 0;
}
.pkg-lead .btn-group { margin: 0; }

/* --------------------------------------------------------------------------
   Pricing note. Not an alert — nothing has gone wrong. It is the reason a
   number is missing, which is a trust statement, so it is set as one.
   -------------------------------------------------------------------------- */
.pricing-note {
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: clamp(24px, 2.6vw, 32px);
  border-top: 1px solid var(--line-2);
  display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: 10px clamp(24px, 4vw, 64px);
}
.pricing-note-h {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700;
  color: var(--ink); margin: 0;
}
.pricing-note-h svg { width: 18px; height: 18px; color: var(--amber-dk); flex: 0 0 18px; margin-top: 3px; }
.pricing-note p:last-child { margin: 0; font-size: var(--fs-sm); color: var(--body-soft); max-width: 74ch; }

@media (max-width: 980px) {
  .pkg-lead { grid-template-columns: 1fr; }
  .pkg-lead-media { min-height: 0; aspect-ratio: 2/1; max-height: 340px; }
  .pricing-note { grid-template-columns: 1fr; }
}

/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 9px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-2); background: transparent;
  font-size: var(--fs-xs); font-weight: 700; color: var(--body);
  transition: all .25s var(--ease); min-height: 40px;
  display: inline-flex; align-items: center;
}
.chip:hover { border-color: var(--blue-mid); color: var(--blue-dk); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ==========================================================================
   BLEED SPLIT — the "why us" argument
   One composition, not a stack. The photograph is structural: it fills half
   the section and runs off the edge of the viewport, so it holds the layout
   instead of sitting between the argument and the proof as a slab. The three
   operating promises are a numbered list on hairlines — no cards, no chips.
   ========================================================================== */
.bleed-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }

.bleed-media { position: relative; overflow: hidden; min-height: 460px; background: var(--sand-2); }
.bleed-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bleed-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,42,66,.22) 0%, rgba(6,42,66,0) 38%, rgba(6,42,66,0) 100%);
}

.bleed-body {
  display: flex; align-items: center;
  padding-block: clamp(44px, 5.5vw, 92px);
  padding-inline: clamp(28px, 4.5vw, 72px) var(--gutter);
}
.bleed-body-inner { max-width: 620px; }
.bleed-body h2 { margin-bottom: var(--s-4); }
.bleed-body > .bleed-body-inner > p { color: var(--body); font-size: var(--fs-lg); line-height: 1.6; }

/* Promises — content, not decoration */
.promises { margin-top: clamp(26px, 3vw, 38px); border-top: 1px solid var(--line-2); }
.promise-row {
  display: grid; grid-template-columns: 52px 1fr; gap: 16px;
  padding: clamp(16px, 1.8vw, 22px) 0;
  border-bottom: 1px solid var(--line-2);
}
.promise-row .n {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.3rem; letter-spacing: -0.03em; line-height: 1.25;
  color: var(--amber-dk);
}
.promise-row b {
  display: block; font-size: var(--fs-base); font-weight: 700;
  color: var(--ink); line-height: 1.35; margin-bottom: 4px;
}
.promise-row span { font-size: var(--fs-sm); line-height: 1.6; color: var(--body-soft); display: block; }
.bleed-body .link-arrow { margin-top: clamp(24px, 2.6vw, 34px); }

@media (max-width: 940px) {
  .bleed-split { grid-template-columns: 1fr; }
  .bleed-media { min-height: 0; aspect-ratio: 16 / 9; }
  .bleed-body { padding-inline: var(--gutter); padding-block: clamp(36px, 7vw, 56px); }
  .bleed-body-inner { max-width: none; }
}

/* Numbers */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.stat { text-align: left; }
.stat-num {
  font-family: var(--font-display); font-weight: 460;
  font-size: clamp(2.6rem, 1.8rem + 3.2vw, 4.4rem);
  line-height: 1; color: var(--amber); font-weight: 800;
  letter-spacing: -.03em; display: block; margin-bottom: 10px;
}
.stat-label { font-size: var(--fs-sm); color: var(--on-ink-soft); line-height: 1.45; }
.stat-label b { display: block; color: #fff; font-weight: 700; margin-bottom: 2px; }

/* Steps */
.steps { counter-reset: step; display: grid; gap: var(--s-6); }
.step { position: relative; padding-left: 68px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -4px;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 500;
  color: var(--amber); width: 48px;
}
.step::after {
  content: ""; position: absolute; left: 21px; top: 34px; bottom: -34px;
  width: 1px; background: var(--line-2);
}
.step:last-child::after { display: none; }
.step h3 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.26; letter-spacing: -0.012em; margin: 0 0 6px; }
.step p { font-size: var(--fs-sm); color: var(--body-soft); margin: 0; }

/* Track variant — a sequence read left to right rather than down a rail.
   One hairline runs the width of the section (the cells butt together, so the
   four top borders form a single rule) with the numerals hanging beneath it.
   Used where the steps are the section rather than a column beside something. */
.steps.is-track {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(28px, 3.5vw, 44px);
}
.is-track .step {
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.6vw, 40px) 0 0;
  border-top: 1px solid var(--line-2);
}
.is-track .step::before {
  position: static; display: block;
  width: auto; margin-bottom: 12px; font-size: 1.5rem;
}
.is-track .step::after { display: none; }
.is-track .step h3 { font-size: 1.22rem; margin-bottom: 8px; }
/* Four columns, four different title lengths: without a floor the one title
   that wraps drops its paragraph a line below the other three. */
@media (min-width: 1025px) {
  .is-track .step h3 { min-height: calc(2 * 1.26em); }
}

@media (max-width: 1024px) {
  .steps.is-track { grid-template-columns: 1fr 1fr; row-gap: clamp(26px, 3vw, 38px); }
}
@media (max-width: 600px) {
  .steps.is-track { grid-template-columns: 1fr; row-gap: var(--s-5); }
  .is-track .step { padding-right: 0; }
}

/* Feature list */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.feature-list li { display: flex; gap: 14px; align-items: flex-start; }
.feature-list .tick {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px; margin-top: 2px;
  background: var(--blue-pale); color: var(--blue-dk);
  display: flex; align-items: center; justify-content: center;
}
.on-ink .feature-list .tick { background: rgba(255,255,255,.12); color: var(--amber); }
.feature-list .tick svg { width: 12px; height: 12px; }
.feature-list b { display: block; color: var(--ink); font-size: var(--fs-sm); font-weight: 700; margin-bottom: 2px; }
.on-ink .feature-list b { color: #fff; }
.feature-list span { font-size: var(--fs-sm); color: var(--body-soft); line-height: 1.6; }
.on-ink .feature-list span { color: var(--on-ink-soft); }

/* Office card */
.office {
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); height: 100%;
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.office:hover { border-color: var(--amber); box-shadow: var(--shadow-sm); }
.office-tag {
  font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber-dk);
}
.office h3 { font-size: var(--fs-xl); margin: 0; }
.office address { font-style: normal; font-size: var(--fs-sm); color: var(--body-soft); line-height: 1.6; }
.office-links { display: flex; flex-direction: column; gap: 7px; margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.office-links a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink); text-decoration: none;
}
.office-links a:hover { color: var(--blue-dk); }
.office-links svg { width: 15px; height: 15px; color: var(--blue-dk); flex: 0 0 15px; }

/* --------------------------------------------------------------------------
   Office directory — the compact homepage listing.

   Seven cards ran to a thousand pixels, repeated the word "Branch" six times
   and set three lines of address where one reads fine. A visitor here is
   looking for their own city and the number next to it; rows on hairlines find
   that faster than cards to hunt through. Only the head office is labelled,
   because that is the only label carrying information.
   -------------------------------------------------------------------------- */
.dir {
  list-style: none; margin: clamp(28px, 3.5vw, 44px) 0 0; padding: 0;
  border-top: 1px solid var(--line-2);
}
.dir-row {
  display: grid;
  grid-template-columns: minmax(150px, .82fr) minmax(0, 2.15fr) minmax(0, .95fr) minmax(0, 1.1fr);
  gap: 6px clamp(20px, 2.6vw, 40px);
  align-items: baseline;
  padding: clamp(16px, 1.8vw, 22px) 0;
  /* The two wrappers dissolve at this width so all four fields sit directly in
     the four-column grid; below the breakpoint they become the two stacks. */
  border-bottom: 1px solid var(--line);
  transition: background-color .25s var(--ease);
}
.dir-row:hover { background: var(--sand); }
.dir-place, .dir-reach { display: contents; }
.dir-city {
  font-size: 1.16rem; margin: 0; line-height: 1.3;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px;
}
.dir-tag {
  font-family: var(--font-body);
  font-size: .6rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--amber-dk); white-space: nowrap;
}
.dir-addr {
  font-style: normal; font-size: var(--fs-sm); color: var(--body-soft); line-height: 1.55;
}
.dir-tel, .dir-mail { margin: 0; font-size: var(--fs-sm); line-height: 1.55; }
/* Stacked, never inline: two numbers side by side in this column break in the
   middle of a number, which is worse than useless on a page people call from. */
.dir-tel { display: flex; flex-direction: column; gap: 3px; }
.dir-tel a { white-space: nowrap; align-self: flex-start; }
.dir-tel a, .dir-mail a {
  color: var(--ink); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.dir-tel a:hover, .dir-mail a:hover { color: var(--blue-dk); border-bottom-color: var(--blue-dk); }
.dir-mail a { font-weight: 500; }

/* Two columns, paired by what a visitor does with them: the city and its
   address on the left, the ways to reach it on the right. */
@media (max-width: 1100px) {
  .dir-row { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
  .dir-place, .dir-reach { display: flex; flex-direction: column; gap: 6px; }
}
@media (max-width: 560px) {
  .dir-row { grid-template-columns: 1fr; row-gap: 10px; }
}

/* Article card */
.article {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.article:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.article-media { aspect-ratio: 16/10; overflow: hidden; background: var(--sand-2); }
.article-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.article:hover .article-media img { transform: scale(1.06); }
.article-body { padding: clamp(20px, 2.4vw, 26px); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.article-cat {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-dk);
}
.article h3 { font-size: var(--fs-xl); margin: 0; }
.article p { font-size: var(--fs-sm); color: var(--body-soft); margin: 0; flex: 1; }
.article-meta { font-size: var(--fs-xs); color: var(--body-soft); padding-top: var(--s-3); border-top: 1px solid var(--line); }

/* Accordion */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; padding: 22px 0; text-align: left;
  font-family: var(--font-display); font-weight: 520;
  font-size: var(--fs-h4); color: var(--ink); line-height: 1.3;
  transition: color .25s var(--ease);
}
.acc-btn:hover { color: var(--blue-dk); }
.acc-icon {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.acc-icon svg { width: 14px; height: 14px; color: var(--amber-dk); transition: transform .3s var(--ease); }
.acc-btn[aria-expanded="true"] .acc-icon { background: var(--amber); border-color: var(--amber); }
.acc-btn[aria-expanded="true"] .acc-icon svg { transform: rotate(180deg); color: var(--ink); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); }
.acc-panel.is-open { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel .acc-inner { padding-bottom: 24px; max-width: 68ch; font-size: var(--fs-sm); color: var(--body-soft); line-height: 1.7; }
.acc-panel .acc-inner p + p { margin-top: var(--s-3); }
.acc-panel .acc-inner ul { padding-left: 1.1em; margin: var(--s-3) 0 0; }
.acc-panel .acc-inner li { margin-bottom: 6px; }
.acc-panel .acc-inner li::marker { color: var(--amber-dk); }

/* Itinerary */
.itinerary { display: grid; gap: 0; }
.itin-day {
  display: grid; grid-template-columns: 118px 1fr; gap: var(--s-6);
  padding: var(--s-6) 0; border-bottom: 1px solid var(--line);
}
.itin-day:first-child { border-top: 1px solid var(--line); }
.itin-num {
  font-family: var(--font-display); font-weight: 620;
  font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber-dk); padding-top: 6px;
}
.itin-num b { display: block; font-size: 2.05rem; letter-spacing: -.02em; color: var(--ink); font-weight: 400; margin-top: 3px; text-transform: none; }
.itin-body h3 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.26; letter-spacing: -0.012em; margin: 0 0 8px; }
.itin-body p { font-size: var(--fs-sm); color: var(--body-soft); margin: 0; }
.itin-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--s-3); }
.itin-tags span {
  font-size: .68rem; font-weight: 700; padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--sand); color: var(--body); border: 1px solid var(--line);
}

/* Info callout */
.callout {
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--sand); border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  font-size: var(--fs-sm); line-height: 1.65; color: var(--body);
}
.callout b { display: block; color: var(--ink); margin-bottom: 5px; font-size: var(--fs-base); }
.callout.is-note { border-left-color: var(--ink-3); }

/* Sticky sidebar */
.sticky-card {
  position: sticky; top: calc(var(--header-h) + 24px);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: clamp(22px, 2.6vw, 30px);
}
.sticky-card h3 { font-size: var(--fs-xl); margin-bottom: var(--s-2); }
.sticky-card .sc-note { font-size: var(--fs-sm); color: var(--body-soft); margin-bottom: var(--s-5); }
.sticky-card .form-grid { display: grid; gap: var(--s-4); }
.sc-divider { display: flex; align-items: center; gap: 12px; margin: var(--s-5) 0; font-size: var(--fs-xs); color: var(--body-soft); }
.sc-divider::before, .sc-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }

/* Table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
/* Scrollable regions must be reachable by keyboard (WCAG 2.1.1) */
.table-wrap:focus-visible { outline: 2px solid var(--blue-dk); outline-offset: 2px; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 520px; }
table.data th, table.data td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th {
  background: var(--sand); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--paper); }
table.data td b { color: var(--ink); }

/* CTA band */
.cta-band { position: relative; overflow: hidden; background: var(--ink); isolation: isolate; }
.cta-band .hero-media { position: absolute; inset: 0; z-index: -2; }
.cta-band .hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .30; }
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(6,42,66,.95) 0%, rgba(6,42,66,.72) 55%, rgba(6,42,66,.88) 100%);
}
.cta-inner { text-align: center; max-width: 720px; margin-inline: auto; }
.cta-inner h2 { color: #fff; margin-bottom: var(--s-4); }
.cta-inner p { color: var(--on-ink-soft); font-size: var(--fs-lg); margin-bottom: var(--s-7); }
.cta-inner .btn-group { justify-content: center; }

/* Notice / info-required flag */
.notice {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 18px; border-radius: var(--radius);
  background: var(--blue-pale); border: 1px solid #B9DFF5;
  font-size: var(--fs-xs); line-height: 1.6; color: #0B4E75;
}
.notice svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 2px; color: var(--blue-dk); }
.notice b { color: #073A58; }

/* Logo strip */
.trust-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(20px, 4vw, 56px);
  padding: var(--s-6) 0;
}
.trust-strip-item {
  display: flex; align-items: center; gap: 11px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--body-soft);
}
.trust-strip-item svg { width: 21px; height: 21px; color: var(--blue-dk); flex: 0 0 21px; }
.trust-strip-item b { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   11. SECTIONS — special
   ========================================================================== */
/* --------------------------------------------------------------------------
   Hajj & Umrah.

   This was a full-bleed photograph with the copy laid over it. To keep white
   text legible the scrim had to sit at 86-96% opacity across the whole left
   half — which meant the one photograph on this page carrying real weight was
   reduced to a navy texture, while the half that stayed visible held nothing
   but empty sky. The composition was backwards.

   The photograph is now a panel of its own at full strength, with no scrim on
   it at all, and the words sit on solid ink beside it (15.9:1, no compromise).
   Cropped tall, the frame also suits a subject shot looking upward far better
   than a letterbox did. The four commitments moved from a four-deep list with
   tick chips to a two-by-two grid on hairlines — the stacked, labelled list is
   already the device carrying "Why people come back" further up the page.
   -------------------------------------------------------------------------- */
.pilgrim { background: var(--ink); overflow: hidden; }
.pilgrim-inner {
  display: grid; grid-template-columns: 1fr minmax(0, 42%);
  align-items: stretch;
}
/* The left edge lines up with .container-wide, so the section shares the page
   grid instead of floating its own margin. */
.pilgrim-say {
  padding-block: clamp(56px, 6.5vw, 100px);
  padding-left: max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter)));
  padding-right: clamp(24px, 4.5vw, 76px);
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: var(--s-5);
}
.pilgrim-say h2 { margin: 0; max-width: 15ch; }
.pilgrim-say .lead { margin: 0; max-width: 56ch; }

/* A quadrant on hairlines. Four amber rules here would have put the accent on
   the page four more times alongside the eyebrow and the primary button — the
   accent is a seasoning, so the structure is carried by lines and space. */
.pilgrim-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; max-width: 760px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.pilgrim-grid > div { padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 30px) 0; }
.pilgrim-grid > div:nth-child(2n) {
  padding-right: 0; padding-left: clamp(22px, 2.6vw, 34px);
  border-left: 1px solid rgba(255,255,255,.14);
}
.pilgrim-grid > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
.pilgrim-grid b {
  display: block; color: #fff; font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; margin-bottom: 5px;
}
.pilgrim-grid span {
  display: block; font-size: var(--fs-xs); line-height: 1.65; color: var(--on-ink-soft);
}

.pilgrim-media { position: relative; min-height: 100%; background: #04202f; }
.pilgrim-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Only enough of a wash on the inner edge to stop the photograph ending on a
   hard vertical seam against the ink. */
.pilgrim-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,42,66,.72) 0%, rgba(6,42,66,.12) 22%, rgba(6,42,66,0) 46%);
}

@media (max-width: 1080px) {
  .pilgrim-inner { grid-template-columns: 1fr; }
  .pilgrim-say { max-width: 100%; margin-left: 0; order: 2; }
  .pilgrim-media { order: 1; min-height: 0; aspect-ratio: 16/9; max-height: 420px; }
  .pilgrim-media::after {
    background: linear-gradient(0deg, rgba(6,42,66,.72) 0%, rgba(6,42,66,.10) 26%, rgba(6,42,66,0) 52%);
  }
}
@media (max-width: 620px) {
  .pilgrim-grid { grid-template-columns: 1fr; }
  .pilgrim-grid > div { padding: 22px 0; }
  .pilgrim-grid > div:nth-child(2n) { padding-left: 0; border-left: 0; }
  .pilgrim-grid > div:nth-child(n+2) { border-top: 1px solid rgba(255,255,255,.14); }
}

.quote-block {
  max-width: 840px; margin-inline: auto; text-align: center;
}
.quote-block .q-mark {
  font-family: var(--font-display); font-size: 4.5rem; line-height: 1;
  color: var(--amber); display: block; margin-bottom: -12px;
}
.quote-block p {
  font-family: var(--font-display); font-weight: 460;
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.05rem);
  line-height: 1.32; color: var(--ink); font-weight: 700; letter-spacing: -0.02em;
}
.quote-cite { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--body-soft); margin-top: var(--s-5); }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer { background: var(--ink); color: var(--on-ink-soft); font-size: var(--fs-sm); }
.footer-top { padding-block: clamp(56px, 7vw, 96px); border-bottom: 1px solid rgba(255,255,255,.09); }
.footer-grid {
  display: grid; grid-template-columns: 1.55fr 1fr 1fr 1.25fr;
  gap: clamp(32px, 4vw, 56px);
}
.footer-brand .logo-name { color: #fff; font-size: 1.45rem; }
.footer-brand .logo-sub { color: var(--amber-lt); }
.footer-brand .logo-mark .mark-ring { stroke: rgba(255,255,255,.5); }
.footer-brand .logo-mark .mark-body { fill: #fff; }
.footer-about { margin-top: var(--s-5); color: var(--on-ink-soft); line-height: 1.7; max-width: 40ch; }
.footer-social { display: flex; gap: 10px; margin-top: var(--s-5); }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  color: var(--on-ink-soft);
  transition: background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.footer-social a:hover { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.footer-social svg { width: 17px; height: 17px; }

.footer-col h2 {
  font-family: var(--font-body); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  margin-bottom: var(--s-5);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a { color: var(--on-ink-soft); text-decoration: none; transition: color .25s var(--ease); }
.footer-col a:hover { color: var(--amber-lt); }

.footer-contact { display: grid; gap: var(--s-4); }
.footer-contact-item { display: flex; gap: 12px; align-items: flex-start; }
.footer-contact-item svg { width: 17px; height: 17px; color: var(--blue-lt); flex: 0 0 17px; margin-top: 3px; }
.footer-contact-item b { display: block; color: #fff; font-weight: 700; margin-bottom: 2px; }
.footer-contact-item a { color: var(--on-ink-soft); text-decoration: none; }
.footer-contact-item a:hover { color: var(--amber-lt); }

.footer-branches { padding-block: var(--s-7); border-bottom: 1px solid rgba(255,255,255,.09); }
.footer-branch-list { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.footer-branch-list .fb-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber-lt); margin-right: var(--s-3);
}
.footer-branch-list a {
  font-size: var(--fs-xs); font-weight: 600; color: var(--on-ink-soft); text-decoration: none;
  padding: 7px 15px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-pill);
  transition: all .25s var(--ease);
}
.footer-branch-list a:hover { border-color: var(--amber); color: var(--amber-lt); }

.footer-bottom { padding-block: var(--s-6); }
.footer-bottom-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4);
  font-size: var(--fs-xs); color: #8A98A5;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer-legal a { color: #8A98A5; text-decoration: none; }
.footer-legal a:hover { color: var(--amber-lt); }

/* Floating WhatsApp */
.float-wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  width: 54px; height: 54px; border-radius: 50%;
  background: #0E7365; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(14,115,101,.42);
  transition: transform .3s var(--ease);
}
.float-wa:hover { transform: scale(1.07); color: #fff; }
.float-wa svg { width: 27px; height: 27px; }

/* ==========================================================================
   13. UTILITIES
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); } .mt-9 { margin-top: var(--s-9); }
.maxw-text { max-width: var(--container-text); }
.is-hidden { display: none !important; }

/* ==========================================================================
   14. MOTION
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
html.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-media img { animation: none !important; transform: scale(1.04); }
  [data-hero-slides] .hero-slide { transition: none; }
  .btn:hover, .pkg:hover, .pillar:hover, .article:hover { transform: none; }
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 1280px) {
  .nav { margin-left: 20px; }
  .nav-link { padding: 9px 11px; font-size: .865rem; }
  .nav-link::after { left: 11px; right: 11px; }
  .header-phone .hp-label { display: none; }
}
@media (max-width: 1140px) {
  .header-phone { display: none; }
  .dropdown { min-width: 540px; }
}

@media (max-width: 1024px) {
  .nav, .header-actions .btn { display: none; }
  .burger { display: flex; }
  .header-actions { gap: var(--s-2); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .footer-brand { grid-column: 1 / -1; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-7); }
  .split, .split.is-wide-left, .split.is-wide-right { grid-template-columns: 1fr; gap: var(--s-7); }
  /* A portrait crop earns its shape beside a text column. Once the split stacks
     it spans the full container, and 4:5 at 940px is a 1,175px-tall image the
     visitor has to scroll past. Landscape below the breakpoint. */
  .split .media.r-4x5, .split .media.r-3x4 { aspect-ratio: 3/2; }
  .split .order-first-mobile { order: -1; }
  .framed::before { transform: translate(12px, 12px); }
  .framed.is-left::before { transform: translate(-12px, 12px); }
  .sticky-card { position: static; }
}

/* Three columns hold until 1000px, not 860: below that a journey card is under
   260px wide and every title breaks across three lines. */
@media (max-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 860px) {
  :root { --header-h: 68px; }
  .topbar-note { display: none; }
  .topbar-inner { justify-content: center; }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 72px); }
  .hero-trust { gap: 12px var(--s-5); }
  .hero-trust-item { white-space: normal; flex: 1 1 100%; }
  .itin-day { grid-template-columns: 1fr; gap: var(--s-3); }
  .itin-num b { display: inline; margin-left: 8px; font-size: 1.5rem; }
  .console-wrap { margin-top: -44px; }
  .console-grid { grid-template-columns: 1fr 1fr; }
  .console-grid .field-submit { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .btn { width: 100%; }
  .btn-group { flex-direction: column; align-items: stretch; }
  .btn-group .btn { width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions .btn { width: 100%; }
  .head-row { flex-direction: column; align-items: flex-start; }
  .console-tab { padding: 14px 16px; font-size: var(--fs-xs); }
  .console-wa { display: none; }
  .console-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .step { padding-left: 54px; }
  .step::before { font-size: 1.35rem; width: 40px; }
  .step::after { left: 16px; }
  .float-wa { right: 14px; bottom: 14px; width: 50px; height: 50px; }
  .trust-strip { gap: var(--s-5); }
  .trust-strip-item { flex: 1 1 100%; }
}

@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .site-header, .topbar, .drawer, .float-wa, .console-wrap, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .page-hero { background: #fff; padding-top: 0; }
  .hero-media, .hero-scrim, .page-hero-scrim, .hero-controls { display: none; }
  .hero h1, .page-hero h1, .hero-sub, .page-hero .lead { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}