/* ==========================================================================
   Lionlink Safaris — lionlinksafaris.com
   Hand-written CSS. Every colour is a token in :root so the theme toggle, the
   palette switcher and the later Elementor conversion all keep working.
   Light is the default theme; dark is the toggle.

   Palette read out of the old a3trip theme options (a3trip_theme_options):
   skincolor #f07320, secondarycolor #3b4321, secondary-greycolor #fffef1,
   blackish #050505, link-hover #038014.
   ========================================================================== */

:root {
  /* --- palette-switcher contract ------------------------------------- */
  --color-primary: #F07320;          /* a3trip skincolor, exactly as the old site set it */
  --color-accent: #3B4321;           /* secondarycolor — the logo wordmark */
  --color-bg: #FFFFFF;               /* global_background, as the old site had it */
  --color-surface: #FFFFFF;
  --color-text: #050505;             /* blackish_buttoncolor / every heading colour */
  /* The old site ran body copy at #858585, which is 3.5:1 on white and fails AA.
     Same hue, darkened to 5.6:1 — the only colour on this page not taken literally. */
  --color-text-muted: #6B6459;
  --font-display: 'Yantramanav', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Roboto', 'Segoe UI', Arial, sans-serif;

  /* derived by palette-switch.js when primary changes; defaults here */
  --color-primary-hover: #D45E12;
  --color-primary-soft: rgba(240, 115, 32, 0.13);
  --color-text-on-primary: #FFFFFF;
  /* small orange text only: #F07320 is 2.9:1 on white, this is 4.6:1 */
  --primary-ink: #B85209;

  /* --- brand extensions ---------------------------------------------- */
  --sun: #F07320;                    /* the skincolor exactly — the sun behind the lion */
  --sun-bright: #FF8A3D;             /* the top of the logo's sun gradient */
  --olive: #3B4321;
  --olive-deep: #232A14;             /* full-bleed dark panels */
  --olive-mid: #2F3719;
  /* subheading_font / link-color-hover on the old site — the colour every line of
     its cursive "Seize the moment" script was set in. */
  --script-green: #038014;
  --script-green-soft: #7CCB86;      /* the same green, lifted to read on dark ground */
  --sand: #FFFEF1;                   /* secondary-greycolor, exactly */
  --line: #E8E0CC;
  --line-strong: #D6CBAF;

  --on-dark: #F6F1E2;
  --on-dark-muted: #B6B09C;
  --dark-line: rgba(255, 255, 255, 0.14);

  /* the logo's own sun, lower-left deep orange to upper-right light */
  --brand-gradient: linear-gradient(120deg, #D4600F 0%, #F07320 55%, #FFA65C 100%);
  --font-script: 'Satisfy', cursive;

  /* --- type scale ------------------------------------------------------
     Eight steps, the five largest fluid. Body sits at --step-0. Yantramanav
     has a tall x-height, so 1.0625rem reads as ~17px — inside house rule 11. */
  --step--2: 0.8125rem;                                     /* 13px */
  --step--1: 0.9375rem;                                     /* 15px */
  --step-0:  1.0625rem;                                     /* 17px */
  --step-1:  clamp(1.15rem, 0.6vw + 1rem, 1.32rem);
  --step-2:  clamp(1.45rem, 1vw + 1.1rem, 1.8rem);
  --step-3:  clamp(1.85rem, 1.8vw + 1.2rem, 2.6rem);
  --step-4:  clamp(2.2rem, 3.2vw + 1.2rem, 3.7rem);
  --step-5:  clamp(2.7rem, 5vw + 1rem, 4.9rem);

  --measure: 68ch;

  /* --- spacing --------------------------------------------------------- */
  --sp-1: 0.35rem;  --sp-2: 0.7rem;  --sp-3: 1.1rem;  --sp-4: 1.7rem;
  --sp-5: 2.6rem;   --sp-6: 4rem;    --sp-7: 6rem;    --sp-8: 8.5rem;

  --wrap: 1240px;
  --wrap-narrow: 880px;

  --radius-img: 14px;
  --radius-box: 10px;
  --radius-card: 18px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(26,23,18,0.06), 0 4px 14px rgba(26,23,18,0.05);
  --shadow-2: 0 14px 40px rgba(35,42,20,0.16);
  --shadow-3: 0 30px 70px -24px rgba(35,42,20,0.45);

  --header-h: 78px;
  --ease: cubic-bezier(0.32, 0.72, 0.28, 1);
}

[data-theme="dark"] {
  --color-bg: #14120C;
  --color-surface: #1E1B13;
  --color-text: #F6F1E2;
  --color-text-muted: #ABA492;
  --color-primary: #F5852F;
  --color-primary-hover: #FFA45E;
  --color-primary-soft: rgba(245,133,47,0.16);
  --color-text-on-primary: #17130A;
  --primary-ink: #FFA45E;
  --script-green: #7CCB86;
  --script-green-soft: #9EDCA6;
  --color-accent: #A8BD6A;
  --sand: #1C1912;
  --line: #322D20;
  --line-strong: #46402E;
  --olive-deep: #0E0D08;
  --olive-mid: #181509;
  --on-dark: #F6F1E2;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.4);
  --shadow-2: 0 14px 40px rgba(0,0,0,0.6);
  --shadow-3: 0 30px 70px -24px rgba(0,0,0,0.85);
  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-3);
  color: var(--color-text);
}
h1 { font-size: var(--step-5); font-weight: 900; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 var(--sp-3); max-width: var(--measure); }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--color-text-muted); }
strong { font-weight: 700; }

a { color: var(--primary-ink); text-underline-offset: 3px; }
a:hover { color: var(--color-primary-hover); }
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-img); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }

:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2.6rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.6rem, var(--wrap-narrow)); margin-inline: auto; }
@media (max-width: 640px) { .wrap, .wrap-narrow { width: calc(100% - 2rem); } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-primary); color: var(--color-text-on-primary);
  padding: 0.8rem 1.2rem; border-radius: 0 0 var(--radius-box) 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Pointer language — this site's own: a tracking arrow whose tail extends,
   the way a vehicle pulls away. Not a chevron, not a diagonal departure.
   ========================================================================== */
.track {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-display); font-size: var(--step-0); font-weight: 700;
  letter-spacing: 0.02em; text-decoration: none; color: var(--primary-ink);
  min-height: 44px;
}
.track svg { width: 1.5em; height: 1.1em; flex: none; overflow: visible; }
.track svg .tail { transition: d 0.34s var(--ease), transform 0.34s var(--ease); transform-origin: right center; }
.track:hover svg .tail, .track:focus-visible svg .tail { transform: scaleX(1.55); }
.track:hover svg .head, .track:focus-visible svg .head { transform: translateX(2px); }
.track svg .head { transition: transform 0.34s var(--ease); }
.track--on-dark { color: var(--sun-bright); }
.track--on-dark:hover { color: #fff; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 50px; padding: 0.7rem 1.55rem;
  font-family: var(--font-display); font-size: var(--step-0); font-weight: 700;
  letter-spacing: 0.025em; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-primary); color: var(--color-text-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-text-on-primary); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn--on-dark { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.42); }
.btn--on-dark:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn--lg { min-height: 56px; padding: 0.85rem 1.9rem; font-size: var(--step-1); }

/* ==========================================================================
   Header — this site's composition: a slim amber rule above a single bar,
   the logo left, the enquiry pill right.
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s;
}
.site-header::before { content: ""; display: block; height: 3px; background: var(--brand-gradient); }
.site-header.is-scrolled { box-shadow: var(--shadow-1); }
.header-inner { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); }
.brand { display: flex; align-items: center; flex: none; margin-right: auto; min-height: 44px; }
.brand img { height: 46px; width: auto; border-radius: 0; }
@media (max-width: 640px) { .brand img { height: 38px; } }
.brand .logo-reverse { display: none; }
[data-theme="dark"] .brand .logo-light { display: none; }
[data-theme="dark"] .brand .logo-reverse { display: block; }

.nav { display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: flex; align-items: center; min-height: 44px; padding: 0 0.25rem;
  font-size: var(--step-0); color: var(--color-text); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav-list a:hover { color: var(--color-primary); }
.nav-list a[aria-current="page"] { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 500; }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.theme-toggle, .nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; background: transparent;
  color: var(--color-text); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.theme-toggle:hover, .nav-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
.nav-toggle { display: none; flex-direction: column; gap: 4px; }
.nav-toggle span { width: 19px; height: 2px; background: currentColor; border-radius: 2px;
                   transition: transform .25s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.i-moon { display: none; }
[data-theme="dark"] .i-sun { display: none; }
[data-theme="dark"] .i-moon { display: block; }

@media (max-width: 1040px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .nav {
    position: absolute; inset: 100% 0 auto; display: none;
    background: var(--color-surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2); padding: var(--sp-2) 1.3rem var(--sp-4);
  }
  .nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a { min-height: 54px; font-size: var(--step-1); border-bottom: 1px solid var(--line); }
  .nav-list li:last-child a { border-bottom: 0; }
}

/* ==========================================================================
   Sections and the eyebrow
   ========================================================================== */
.section { padding: var(--sp-7) 0; }
.section--tight { padding: var(--sp-6) 0; }
.section--tint { background: var(--sand); }
.section--dark { background: var(--olive-deep); color: var(--on-dark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p:not(.eyebrow) { color: var(--on-dark-muted); }
.section--dark .lede { color: var(--on-dark-muted); }

.eyebrow {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(1.35rem, 0.5vw + 1.2rem, 1.7rem);
  font-weight: 400; line-height: 1.25;
  letter-spacing: normal; text-transform: none;
  color: var(--script-green);
  margin: 0 0 var(--sp-2);
}
.section--dark .eyebrow { color: var(--script-green-soft); }

.section-head { margin-bottom: var(--sp-6); max-width: 46rem; }
.section-head p:not(.eyebrow) { font-size: var(--step-1); color: var(--color-text-muted); }
.section--dark .section-head p:not(.eyebrow) { color: var(--on-dark-muted); }
.section-foot { margin-top: var(--sp-5); }

/* the script line from the logo — used once or twice a page, never as a heading */
.script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; }

/* ==========================================================================
   Home hero — a three-slide crossfade, as the old WordPress slider had.
   Slides are stacked in one grid cell so the section is as tall as the tallest
   of them and nothing reflows as they change.
   ========================================================================== */
.hero { position: relative; display: grid; isolation: isolate; color: #fff; overflow: hidden; }

.hero-slide {
  grid-area: 1 / 1; position: relative; isolation: isolate;
  display: grid; align-items: center;
}
.hero--slider .hero-slide { min-height: clamp(520px, 78vh, 760px); }
.hero--slider .hero-slide {
  opacity: 0; visibility: hidden;
  transition: opacity .85s var(--ease), visibility 0s linear .85s;
}
.hero--slider .hero-slide.is-active {
  opacity: 1; visibility: visible; z-index: 2;
  transition: opacity .85s var(--ease);
}

.hero-photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.hero-slide::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(20,17,9,.92) 0%, rgba(20,17,9,.78) 38%, rgba(20,17,9,.30) 72%, rgba(20,17,9,.42) 100%),
    linear-gradient(180deg, rgba(20,17,9,.40) 0%, rgba(20,17,9,0) 32%, rgba(20,17,9,.55) 100%);
}

.hero-inner { padding: clamp(4.5rem, 11vw, 9rem) 0 clamp(3rem, 6vw, 5rem); }
.hero--slider .hero-inner { padding-bottom: clamp(5.5rem, 10vw, 8rem); }
.hero-inner > * { max-width: 38rem; }
.hero h1, .hero-h { color: #fff; max-width: 15ch; }
.hero-h {
  font-family: var(--font-display); font-size: var(--step-5); font-weight: 900;
  line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 var(--sp-3);
}
.hero h1 em, .hero-h em { font-style: normal; color: var(--sun-bright); }
.hero .eyebrow {
  /* everywhere else the script line is the old site's green #038014; over a hero
     photograph that is unreadable, so it takes the logo's own orange */
  color: var(--sun-bright); text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.hero .lede { color: rgba(255,255,255,.90); max-width: 40ch; margin-bottom: var(--sp-5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* --- slider controls ---------------------------------------------------- */
.hero-ui { position: absolute; left: 0; right: 0; bottom: clamp(1.1rem, 3vw, 2.2rem); z-index: 5; }
.hero-ui-in { display: flex; align-items: center; gap: var(--sp-3); }
.hero-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; flex: none; cursor: pointer;
  color: #fff; background: rgba(20,17,9,.42);
  border: 1.5px solid rgba(255,255,255,.45); border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.hero-arrow:hover { background: var(--color-primary); border-color: var(--color-primary); }
.hero-arrow svg { width: 22px; height: 22px; }
.hero-dots { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.hero-dot {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.hero-dot::before {
  content: ""; width: 26px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.5);
  transition: background-color .3s var(--ease), width .3s var(--ease);
}
.hero-dot:hover::before { background: rgba(255,255,255,.85); }
.hero-dot.is-on::before { background: var(--sun); width: 42px; }

@media (max-width: 640px) {
  .hero-arrow { width: 44px; height: 44px; }
  .hero-dot { width: 40px; }
  .hero-dot::before { width: 20px; }
  .hero-dot.is-on::before { width: 32px; }
}

/* the destination ticker that runs under the hero */
.ticker {
  background: var(--olive-deep); color: var(--on-dark);
  border-block: 1px solid var(--dark-line); overflow: hidden;
}
.ticker-in {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 56px; font-family: var(--font-display);
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
}
.ticker-label { color: var(--sun-bright); flex: none; font-weight: 700; }
.ticker-list { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.ticker-list li { display: flex; align-items: center; gap: 1.6rem; color: var(--on-dark-muted); }
.ticker-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sun); flex: none; }

/* ==========================================================================
   Figures — the counters, in a bordered row
   ========================================================================== */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
           border: 1px solid var(--line); border-radius: var(--radius-box); overflow: hidden;
           background: var(--color-surface); }
.figure { padding: var(--sp-4) var(--sp-4); border-right: 1px solid var(--line); }
.figure:last-child { border-right: 0; }
.figure b {
  display: block; font-family: var(--font-display); font-weight: 900;
  font-size: var(--step-4); line-height: 1; color: var(--color-primary);
}
.figure span { display: block; margin-top: .45rem; font-size: var(--step--1); color: var(--color-text-muted); }
@media (max-width: 760px) {
  .figure { border-right: 0; border-bottom: 1px solid var(--line); }
  .figure:last-child { border-bottom: 0; }
}

/* ==========================================================================
   Areas — numbered editorial rows, image alternating side to side.
   The main content pattern of the site; not a grid of identical cards.
   ========================================================================== */
.areas { display: grid; gap: var(--sp-5); }
.area {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: var(--sp-5) var(--sp-6); align-items: center;
  padding-top: var(--sp-5); border-top: 1px solid var(--line);
}
.area:nth-child(even) .area-media { order: -1; }
.area-num {
  display: block; margin-bottom: var(--sp-2);
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 700;
  letter-spacing: .06em; color: var(--color-primary);
}
.area h3 { margin-bottom: var(--sp-3); }
.area-media { position: relative; }
.area-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-2); }
.section--dark .area { border-top-color: var(--dark-line); }

/* dash bullets */
.caps { list-style: none; padding: 0; margin: var(--sp-3) 0 var(--sp-4); display: grid; gap: var(--sp-2); }
.caps li { position: relative; padding-left: 1.6rem; margin: 0; color: var(--color-text-muted); }
.caps li::before { content: ""; position: absolute; left: 0; top: .62em; width: 11px; height: 2px;
                   background: var(--brand-gradient); }
.section--dark .caps li { color: var(--on-dark-muted); }

/* ==========================================================================
   Destinations — photograph with the name set into it, counts beneath
   ========================================================================== */
.dests { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .dests { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .dests { grid-template-columns: repeat(3, 1fr); } }
.dest {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius-card); overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dest:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.dest-shot { position: relative; }
.dest-shot img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 0;
                 transition: transform .6s var(--ease); }
.dest:hover .dest-shot img { transform: scale(1.05); }
.dest-shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,17,9,0) 38%, rgba(20,17,9,.78) 100%);
}
.dest-name {
  position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); z-index: 2;
  margin: 0; color: #fff; font-size: var(--step-2); text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.dest-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
             flex: 1; }
.dest-body p { margin: 0; color: var(--color-text-muted); font-size: var(--step--1); }
.dest-counts { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; list-style: none; margin: auto 0 0; padding: var(--sp-3) 0 0;
               border-top: 1px solid var(--line); font-size: var(--step--2);
               letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.dest-counts b { font-family: var(--font-display); font-size: var(--step-0); color: var(--primary-ink); margin-right: .3rem; }

/* ==========================================================================
   Tours — a compact list, name / where / enquiry, hairline between
   ========================================================================== */
.tours { display: grid; gap: 0; max-width: 62rem; }
.tour {
  display: grid; grid-template-columns: 200px minmax(0,1fr) auto;
  gap: var(--sp-4); align-items: center;
  padding: var(--sp-4) 0; border-top: 1px solid var(--line);
  transition: background-color .2s var(--ease);
}
.tour:last-child { border-bottom: 1px solid var(--line); }
.tour img { width: 200px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-box); }
.tour h3 { margin: 0 0 .25rem; font-size: var(--step-1); }
.tour p { margin: 0; color: var(--color-text-muted); font-size: var(--step--1); }
@media (max-width: 720px) {
  .tour { grid-template-columns: 96px minmax(0,1fr); }
  .tour img { width: 96px; }
  .tour .track { grid-column: 2; }
}

/* ==========================================================================
   Experience panel — two wide cards on the dark ground
   ========================================================================== */
.exps { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.exp { display: flex; flex-direction: column; gap: var(--sp-3); }
.exp img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; box-shadow: var(--shadow-3); }
.exp h3 { margin: var(--sp-2) 0 0; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.quotes { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote {
  margin: 0; padding: var(--sp-4); background: var(--color-surface);
  border: 1px solid var(--line); border-radius: var(--radius-box);
  border-top: 3px solid var(--color-primary);
}
.quote blockquote { margin: 0 0 var(--sp-3); }
.quote blockquote p { margin: 0; font-size: var(--step-0); }
.quote figcaption { display: flex; align-items: center; gap: .75rem; }
.quote figcaption b { display: block; font-family: var(--font-display); font-weight: 700; }
.quote figcaption span span { font-size: var(--step--2); color: var(--color-text-muted); letter-spacing: .06em;
                              text-transform: uppercase; }
.avatar {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-pill); background: var(--color-primary-soft);
  color: var(--color-primary); font-family: var(--font-display); font-weight: 700; font-size: var(--step--1);
}
.section--dark .quote { background: rgba(255,255,255,.04); border-color: var(--dark-line); }
.section--dark .quote figcaption b { color: #fff; }

/* ==========================================================================
   Gallery
   ========================================================================== */
/* The ratio sits on the figure, not the image, so every tile fills its grid cell
   edge to edge. With it on the image the small tiles kept 4:3 while the rows were
   sized by the tall feature tile, and each one left a band of dead space beneath it. */
.gal { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
.gal figure {
  margin: 0; overflow: hidden; aspect-ratio: 4 / 3;
  border-radius: var(--radius-img); box-shadow: var(--shadow-1);
}
.gal img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
  transition: transform .6s var(--ease);
}
.gal figure:hover img { transform: scale(1.06); }

@media (min-width: 620px) {
  /* two columns: the feature runs the full width so the remaining eight pair off
     evenly, instead of leaving a lone tile in a half-empty last row */
  .gal { grid-template-columns: repeat(2, 1fr); }
  .gal figure:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
}
@media (min-width: 980px) {
  /* Three across, with one feature tile at twice the size. Nine photographs then fill
     a 3 x 4 grid exactly, with no hole — two feature tiles over four columns could not. */
  .gal { grid-template-columns: repeat(3, 1fr); }
  .gal figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

/* ==========================================================================
   Blog
   ========================================================================== */
.posts { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 620px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post { display: flex; flex-direction: column; gap: var(--sp-3); }
.post img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; box-shadow: var(--shadow-1); }
.post h3 { margin: 0; }
.post h3 a { color: inherit; text-decoration: none; }
.post h3 a:hover { color: var(--color-primary); }
.post p { margin: 0; color: var(--color-text-muted); }
.meta { display: flex; align-items: center; gap: .9rem; margin: 0; font-size: var(--step--2);
        letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.meta .tag { color: var(--primary-ink); font-weight: 700; }
.article { max-width: 44rem; }
.article h2 { margin-top: var(--sp-5); font-size: var(--step-2); }
.article .lede { font-size: var(--step-1); color: var(--color-text); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 0.9fr 1.1fr; } }
.details { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: grid; gap: var(--sp-4); }
.details > li { display: grid; gap: .35rem; }
.detail-k { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display);
            font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
            color: var(--primary-ink); }
.detail-v { font-size: var(--step-1); }
.details ul { list-style: none; margin: 0; padding: 0; }
.details ul a { display: flex; align-items: center; min-height: 44px; text-decoration: none; overflow-wrap: anywhere; }
.details ul a:hover { text-decoration: underline; }
.details ul span { display: block; font-size: var(--step--2); color: var(--color-text-muted); }

.form { background: var(--color-surface); border: 1px solid var(--line);
        border-radius: var(--radius-card); padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--shadow-1); }
.field { display: grid; gap: .35rem; margin-bottom: var(--sp-3); }
.field-2 { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; }
.field label { font-weight: 500; font-size: var(--step--1); }
.field .opt { font-weight: 400; color: var(--color-text-muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .65rem .85rem; font: inherit; font-size: var(--step-0);
  color: var(--color-text); background: var(--color-bg);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-box);
  transition: border-color .2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field :is(input, select, textarea):focus { border-color: var(--color-primary); }
.form-note { font-size: var(--step--1); color: var(--color-text-muted); }

/* ==========================================================================
   CTA band and footer
   ========================================================================== */
.cta-band { background: var(--brand-gradient); color: #fff; }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
             gap: var(--sp-4); padding: var(--sp-6) 0; }
.cta-inner h2 { color: #fff; margin-bottom: .3rem; }
.cta-inner p { margin: 0; color: rgba(255,255,255,.92); }
.cta-inner .btn--primary { background: #fff; color: var(--color-primary); }
.cta-inner .btn--primary:hover { background: var(--sand); color: var(--color-primary-hover); }

.site-footer { background: var(--olive-deep); color: var(--on-dark); padding-top: var(--sp-6); }
.footer-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.footer-grid img { height: 48px; width: auto; border-radius: 0; margin-bottom: var(--sp-3); }
.footer-grid > div > p { color: var(--on-dark-muted); font-size: var(--step--1); }
.footer-h { font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
            letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 var(--sp-3); }
.footer-h + .footer-h, .footer-links + .footer-h { margin-top: var(--sp-4); }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.footer-links a { display: flex; align-items: center; gap: .5rem; min-height: 44px;
                  color: rgba(246,241,226,.85); text-decoration: none; overflow-wrap: anywhere;
                  font-size: var(--step--1); }
.footer-links a:hover { color: var(--sun-bright); }
.footer-links .sub { display: block; font-size: var(--step--2); color: rgba(246,241,226,.48); }
.footer-addr { display: flex; gap: .55rem; color: var(--on-dark-muted); font-size: var(--step--1); }
.footer-bottom { border-top: 1px solid var(--dark-line); margin-top: var(--sp-6); }
.footer-bottom p { margin: 0; padding: var(--sp-4) 0; font-size: var(--step--2); color: rgba(246,241,226,.55); }

/* ==========================================================================
   Icons and motion
   ========================================================================== */
.icon { width: 24px; height: 24px; flex: none; }
.icon-sm { width: 18px; height: 18px; }

@media (prefers-reduced-motion: no-preference) {
  /* the slow push on the photograph and the staggered entrance both restart with
     each slide, because they are keyed to .is-active */
  .hero-slide.is-active .hero-photo img { animation: drift 14s ease-out both; }
  @keyframes drift { from { transform: scale(1); } to { transform: scale(1.08) translate3d(0,-1.4%,0); } }
  .hero-slide.is-active .hero-inner > * { animation: rise .8s var(--ease) both; }
  .hero-slide.is-active .hero-inner > :nth-child(2) { animation-delay: .09s; }
  .hero-slide.is-active .hero-inner > :nth-child(3) { animation-delay: .18s; }
  .hero-slide.is-active .hero-inner > :nth-child(4) { animation-delay: .27s; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .reveal-ready .reveal { opacity: 0; transform: translateY(20px);
                          transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal-ready .reveal.is-in { opacity: 1; transform: none; }
}

/* --- interior page hero: the same composition, less air ----------------- */
.hero--page .hero-inner { padding: clamp(3.2rem, 7vw, 5.4rem) 0; }
.hero--page .hero-h, .hero--page h1 { font-size: var(--step-4); }
.hero--page .hero-inner > * { max-width: 42rem; }
.hero--page h1 { font-size: var(--step-4); }

/* --- why-us: numbered, hairline-separated, no boxes --------------------- */
.reasons { display: grid; gap: var(--sp-5) var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 620px) { .reasons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .reasons { grid-template-columns: repeat(3, 1fr); } }
.reason { padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.reason h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.reason p { margin: 0; color: var(--color-text-muted); }
.section--dark .reason { border-top-color: var(--dark-line); }

/* --- two-column prose --------------------------------------------------- */
.prose-2 { columns: 2; column-gap: var(--sp-6); }
.prose-2 p { max-width: none; break-inside: avoid; }
@media (max-width: 800px) { .prose-2 { columns: 1; } }

/* a section-head sitting directly above a figures row wants less gap */
.section-head + .figures { margin-top: var(--sp-2); }