/**
 * /home-v2/ — WP2 final fidelity test. Clean-room page CSS (loads with ONLY
 * tokens.css + reset.css; no legacy theme CSS — see inc/enqueue.php
 * cbd_home_v2_cleanroom + ITERATION-LOG.md).
 *
 * Built from Hugo's exact section nodes:
 *   Hero        222:99669 (1440x900) / 753:119883 (1024x780) / 660:75767 (400x840)
 *   Inspiration 222:97453 (1440x1164) / 753:122039 (1024x1182) / 710:87301 (400x966)
 *
 * Mobile-first (matches tokens.css). Breakpoints: mobile <768 / tablet 768-1279 /
 * desktop >=1280.
 *
 * FLUID, NOT PINNED-PX: sections translate Hugo's auto-layout to flex (shrinkable items,
 * aspect-ratio images, % collage children) so they are EXACT at the 400/1024/1440 frames
 * AND adapt at every width between. NEVER reintroduce `left:520px`-style coords pinned to a
 * frame width — that clips at 820 / misaligns at 430 and the 3-frame gate won't catch it.
 * Guard: `node tools/shot/responsive.js` must pass (sweeps 360-1536px). See playbook lesson 13.
 */

/* ============================================================= base = MOBILE (<768) */
body.home-v2 { background: var(--c-sand); color: var(--c-ink); font-family: "Roboto Flex", sans-serif; }

/* ---- HERO ---- */
.v2hero {
  position: relative;
  width: 100%;
  height: 840px;                /* mobile frame height */
  overflow: hidden;
  background: var(--c-ink);
  isolation: isolate;           /* contain the multiply blends to the hero */
}
.v2hero__media, .v2hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Tablet/desktop windows are bottom-anchored cuts of the original (2026-08-17); when the box is
   wider than 1.6:1 (1920, 2560) keep the ground, fire and people and let the sky go. Phones keep
   the fire-anchor script's own positioning. */
@media (min-width: 768px) { .v2hero__media img { object-position: 50% 90%; } }   /* 90% holds the fire ~72-75% down the box on wide screens (1920, 2560, 3840) so the sky stays and the people sit mid-frame; at 1440 the photo fits exactly and this has no effect */
.v2hero__grad-left {            /* node 208:36263 — darkens LEFT (to left: transparent->black) */
  position: absolute; left: 0; top: 0; height: 100%;
  width: 1084px; max-width: 100%;
  background: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  opacity: .45; mix-blend-mode: multiply; z-index: 1; pointer-events: none;   /* Hugo .6; eased 2026-08-17 (Paul: bottom of the photo too dark; trial sheet hero-overlay-trial-2026-08-17) */
}
.v2hero__grad-bottom {         /* node 208:36264 — darkens DOWN */
  position: absolute; left: 0; bottom: 0; width: 100%; height: 300px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  opacity: .25; mix-blend-mode: multiply; z-index: 1; pointer-events: none;   /* Hugo .6; eased 2026-08-17, same trial */
}

/* copy block */
.v2hero__copy {
  position: absolute; z-index: 3;
  left: 24px; right: 24px; top: 195px;   /* mobile: upper third, margin 24 */
  width: auto; max-width: 334px;
  color: #fff;
  display: flex; flex-direction: column; gap: 32px;   /* mobile auto-layout gap is 32 (40 on tablet/desktop) */
}
/* Trim the CSS line-box half-leading so the flex gap (40) is ink-to-ink, matching
   Hugo's auto-layout (which spaces by text bounding box, not line box). Without this
   each gap inherits ~9-13px of leading and the block spreads more than Hugo's. */
.v2hero__eyebrow, .v2hero__title, .v2hero__intro {
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
}
.v2hero__eyebrow {
  font-weight: 400; font-size: 16px; line-height: 26px;
  letter-spacing: 1.92px; text-transform: uppercase; color: #fff;
}
.v2hero__title {
  font-family: "Bebas Neue", sans-serif; font-weight: 400;
  font-size: 80px; line-height: 70px; letter-spacing: 0; color: #fff;
  max-width: 310px;             /* mobile: Hugo's title box is 310 (narrower than copy 334) -> wraps "journeys" / "to africa" */
}
.v2hero__title span { color: var(--c-gold); }
.v2hero__intro {
  font-weight: 300; font-size: 16px; line-height: 28px; color: #fff;
}

/* scroll-to-explore cue (bottom centre) */
.v2hero__scroll {
  position: absolute; z-index: 3; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 252px;                 /* Hugo scroll frame (node 208:36270) is 252 wide, text centred */
  display: flex; flex-direction: column; align-items: center; gap: 32px;   /* Hugo: 32px ink-to-line; cue sits at hero bottom so the line touches §2 */
}
.v2hero__scroll span:first-child {
  width: 100%; text-align: center;
  font-weight: 400; font-size: 12px; line-height: 22px;
  letter-spacing: 1.44px; text-transform: uppercase; color: var(--c-sand);
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
}
.v2hero__scroll-line { width: 1px; height: 40px; background: var(--c-gold); }   /* mobile 40px; tablet+desktop 60px below */

/* optional image caption (gold pin + faint text) */
.v2hero__caption {
  position: absolute; z-index: 3; left: 20px; top: 87px; width: auto;   /* Hugo mobile: icon at 20 (lines up w/ title margin), text at 44, one line */
  display: flex; align-items: flex-start; gap: 8px;
  font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 12px; line-height: 16px;
  color: rgba(255,255,255,.8);   /* Hugo: white @0.8 (was #fff = looked heavier) */
}
.v2hero__caption .ic { width: 16px; height: 16px; color: var(--c-gold); flex: none; }   /* Hugo image-caption gold icon (432:35604) */
/* same gold icon on the §4/5/7/9 image-captions (Hugo image-caption component) */
.v2quote__caption, .v2hiw__caption, .v2whyd__caption, .v2appr__caption { display: inline-flex; align-items: flex-start; gap: 6px; }
.v2quote__caption .ic, .v2hiw__caption .ic, .v2whyd__caption .ic, .v2appr__caption .ic { width: 16px; height: 16px; color: var(--c-gold); flex: none; }

/* ---- NAV (naked over hero) ---- */
.v2nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  height: 64px; display: flex; align-items: center;   /* Hugo: nav 64 on mobile+tablet (82 desktop below); 82 here pushed the header line down into the caption */
  padding: 0 20px 0 24px;   /* Hugo: logo 24 from left, right group 20 from right (was 80 on tablet) */
  border-bottom: 1px solid rgba(255,255,255,.3);   /* Hugo: white stroke @0.30, sw 1 (was 100% = too heavy) */
}
.v2nav__logo { color: #fff; }
.v2nav__logo svg, .v2nav__logo img { height: 17px; width: auto; }
.v2nav__logo svg path { fill: #fff; fill-opacity: 1; }   /* logo SVG ships hardcoded black; nav is naked over the hero */
.v2nav__links, .v2nav__contact { display: none; }   /* burger below 1280 */
.v2nav__mobphone { margin-left: auto; display: flex; align-items: center; }   /* tablet/mobile: gold phone icon before burger (Hugo Frame 160) */
.v2nav__mobphone .ic { width: 24px; height: 24px; color: var(--c-gold); }   /* stroked phone -> colour via currentColor */
.v2nav__burger {
  margin-left: 20px; width: 28px; height: 18px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.v2nav__burger span { display: block; height: 2px; width: 100%; background: #fff; }

/* ---- NAV variant swap (Hugo amendment v2 2026-07-31, supersedes the hero-boundary rule):
   the nav is Naked ONLY at scroll position 0. The instant the page scrolls at all,
   js/home-v2.js adds .is-light and the bar crossfades to the Light component (211:179):
   white bar, black/90 text+logo+burger, rgba(0,0,0,.07) rule; scrolling back to exactly 0
   fades it back to Naked. Identical rule on About Us (.aunav, about-us-v2.css). The CTA is
   gold with a sand label in BOTH variants (211:378 + 211:179) so it never swaps.
   300ms ease-in-out on the colour layers = the same easing as the hide/reveal below. */
.v2nav { transition: background-color .3s ease-in-out, border-color .3s ease-in-out; }
.v2nav__logo svg path { transition: fill .3s ease-in-out; }
.v2nav__burger span { transition: background-color .3s ease-in-out; }
.v2nav__links a, .v2nav__phone { transition: color .3s ease-in-out; }
.v2nav.is-light { background: #fff; border-bottom-color: rgba(0,0,0,.07); }
.v2nav.is-light .v2nav__logo svg path { fill: #000; }   /* Light logotype = the SVG's own black (btnav parity) */
.v2nav.is-light .v2nav__burger span { background: #000; }
.v2nav.is-light .v2nav__links a { color: rgba(0,0,0,.9); }
.v2nav.is-light .v2nav__phone { color: rgba(0,0,0,.9); }

/* ---- Scroll-aware hide/reveal, ALL pages + breakpoints (Hugo 2026-07-31). Past the top of
   the page the bar pins (position:fixed); scrolling down ~90px from the last direction change
   slides it up out of view, ANY scroll up brings it straight back; 300ms ease-in-out (the
   accordion easing convention). js/home-v2.js setupScrollNav() owns the .is-fixed/.is-up
   classes and inserts a spacer for the in-flow .btnav so the page never jumps (.v2nav/.aunav
   are absolute over their heroes and need none). z-index 40 sits above all section content
   but below the #v2menu overlay (50) and the lightbox (9999). */
.btnav.is-fixed, .v2nav.is-fixed, .aunav.is-fixed {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  transition: transform .3s ease-in-out;
}
.v2nav.is-fixed { transition: transform .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out; }
.btnav.is-fixed.is-up, .v2nav.is-fixed.is-up, .aunav.is-fixed.is-up { transform: translateY(-100%); }
.btnav.no-anim, .v2nav.no-anim, .aunav.no-anim { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .btnav, .v2nav, .aunav, .v2nav__logo svg path, .v2nav__burger span, .v2nav__links a, .v2nav__phone { transition: none !important; }
}

/* Tablet/mobile burger menu — REBUILT to Hugo's dropdown-panel designs (QA 2026-07-31
   item 1; tablet 1073:127734/127850/127921/127992, mobile 1073:128696/128987/129098/129185).
   A right-hand DRAWER over a dimmed page (was: full-screen teal overlay): scrim black/20;
   panel 500px on tablet / full-width on mobile, teal rgba(21,41,44,.7) + 40px blur.
   Rows: Bebas 28/28 sand with 1px sand/20 rules between every row; expandable rows carry a
   16x8 gold chevron (rotates 180 open); submenu rows Roboto Flex 400 14/24 +1.68 uppercase
   sand, gap 20, hover/tap = gold + 14x10 double-arrow LEFT. Plain rows hover/tap = gold +
   8px indent + double-arrow at the right edge (state nodes). Phone = full-width gold-outline
   pill, bottom 32, fills gold on hover/tap; ABTOT logo 100x50 sits above it. Close X 22px at
   32/32. TRIGGER RULE (item 1): only the chevron button (16px hit ring) expands a submenu —
   the row text is a plain link to the hub page. Mobile has no hover: JS applies .is-tap on
   touchstart (instant) and fades it ~130ms after touchend. All motion 300ms ease-in-out. */
.v2menu {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.2);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
}
.v2menu.is-open { opacity: 1; visibility: visible; }
.v2menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 100%;
  background: rgba(21,41,44,.7); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  transform: translateX(100%); transition: transform .3s ease-in-out;
  display: flex; flex-direction: column; box-sizing: border-box;
  padding: 80px 32px 32px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.v2menu.is-open .v2menu__panel { transform: none; }
@media (min-width: 768px) { .v2menu__panel { width: 500px; } }
.v2menu__close { position: absolute; top: 32px; right: 32px; width: 22px; height: 22px; background: none; border: 0; padding: 16px; margin: -16px; cursor: pointer; box-sizing: content-box; }
.v2menu__close .nsclose { width: 22px; height: 22px; display: block; }
.v2menu__close .nsclose line { stroke: rgba(255,255,255,.9); stroke-width: 1.6; }
.v2menu__list { display: flex; flex-direction: column; width: 100%; }
.v2menu__group { display: flex; flex-direction: column; }
.v2menu .nsrow {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  border-top: 1px solid rgba(249,245,242,.2);
  height: 24px; padding: 14px 0; box-sizing: content-box;   /* node: 24px row + 14px above/below the rules */
}
.v2menu__list > .nsrow:last-child, .v2menu__list > a.nsrow:last-of-type { border-bottom: 1px solid rgba(249,245,242,.2); }
.v2menu .nsitem {
  display: inline-flex; align-items: center; gap: 12px; min-width: 0;
  font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 28px; line-height: 28px;
  color: #f9f5f2; text-decoration: none; background: none; border: 0; padding: 0;
  text-align: left; transition: color .3s ease-in-out, transform .3s ease-in-out;
}
.v2menu a.nsrow { text-decoration: none; cursor: pointer; }
/* plain-link rows: gold + 8px indent + double-arrow right on hover (tablet) / tap (mobile) */
.v2menu .nsarrows { width: 14px; height: 10px; flex: none; fill: none; stroke: #b19f70; stroke-width: 1.4px;
  opacity: 0; transition: opacity .3s ease-in-out; }
@media (hover: hover) {
  .v2menu a.nsrow:hover .nsitem, .v2menu .nsrow:hover > a.nsitem { color: #b19f70; transform: translateX(8px); }
  .v2menu a.nsrow:hover .nsarrows { opacity: 1; }
}
/* tap state lands INSTANTLY (no transition on the way in — Hugo item 1 timing note);
   the ~130ms fade happens on release via the hover:none duration override below */
.v2menu a.nsrow.is-tap .nsitem, .v2menu .nsrow.is-tap > a.nsitem,
.v2menu .nsrow > a.nsitem.is-tap { color: #b19f70; transform: translateX(8px); transition: none; }
.v2menu a.nsrow.is-tap .nsarrows { opacity: 1; transition: none; }
.v2menu .nssub a.is-tap, .v2menu__phone.is-tap, .v2menu__phone.is-tap .ic { transition: none; }
@media (hover: none) {
  .v2menu .nsitem, .v2menu .nsarrows, .v2menu .nssub a, .v2menu__phone, .v2menu__phone .ic { transition-duration: .13s; }
}
/* the chevron button is the ONLY submenu trigger; 16px invisible hit ring */
.v2menu .nschevbtn { background: none; border: 0; cursor: pointer; padding: 16px; margin: -16px; display: inline-flex; }
.v2menu .nschev { width: 16px; height: 8px; flex: none; display: block; transition: transform .3s ease-in-out; }
.v2menu .nschev polyline { fill: none; stroke: #b19f70; stroke-width: 1.4; }
.v2menu__group.is-expanded .nschev { transform: rotate(180deg); }
.v2menu .nssub { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 20px;   /* node Country Links: gap 20 between trimmed rows */
  transition: max-height .3s ease-in-out, padding .3s ease-in-out; }
.v2menu__group.is-expanded .nssub { max-height: 520px; padding: 8px 0 22px; }
.v2menu .nssub a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 14px; line-height: 24px;
  text-transform: uppercase; letter-spacing: 1.68px; color: #f9f5f2; text-decoration: none;
  transition: color .3s ease-in-out;
}
.v2menu .nssub a span { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2menu .nssub .nsarrows { width: 14px; height: 10px; margin-left: -22px; }   /* arrows slide in LEFT of the text */
.v2menu .nssub a:hover, .v2menu .nssub a.is-tap { color: #b19f70; }
.v2menu .nssub a:hover .nsarrows, .v2menu .nssub a.is-tap .nsarrows { opacity: 1; margin-left: 0; transition: opacity .3s ease-in-out, margin .3s ease-in-out; }
.v2menu__abtot { display: block; width: 100px; height: auto; margin: auto 0 30px; }   /* margin-top auto pins the foot group down */
.v2menu__phone {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  box-sizing: border-box; border: 1px solid #b19f70; background: transparent;
  padding: 16px 40px; text-decoration: none;
  font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 14px; line-height: 24px;
  letter-spacing: 1.68px; text-transform: uppercase; color: rgba(255,255,255,.9);
  transition: background-color .3s ease-in-out;
}
.v2menu__phone .ic { width: 16px; height: 16px; color: #b19f70; flex: none; transition: color .3s ease-in-out; }
.v2menu__phone:hover, .v2menu__phone.is-tap { background: #b19f70; }
.v2menu__phone:hover .ic, .v2menu__phone.is-tap .ic { color: #f9f5f2; }
@media (prefers-reduced-motion: reduce) {
  .v2menu, .v2menu__panel, .v2menu .nsitem, .v2menu .nschev, .v2menu .nssub, .v2menu .nssub a, .v2menu__phone { transition: none !important; }
}

/* ============================================================= TABLET (768-1279) */
@media (min-width: 768px) {
  .v2hero { height: 780px; }
  .v2hero__grad-left { opacity: .6; }   /* tablet/desktop: Hugo's 60% left fade back so the copy stands off the sand (Paul, 17 Aug); phone keeps the eased 45% */
  .v2hero__copy {
    left: 80px; right: auto; top: 50%; transform: translateY(-50%);
    max-width: 376px; gap: 40px;
  }
  .v2hero__title { max-width: none; }   /* tablet/desktop: title fills the copy width */
  .v2hero__scroll { bottom: 0; }   /* Hugo: scroll frame bottom = hero bottom (line touches §2) */
  .v2hero__scroll-line { height: 60px; }   /* Hugo tablet+desktop line = 60px (mobile 40) */
  .v2hero__caption { left: auto; right: 20px; top: auto; bottom: 20px; width: 178px; text-align: left; }   /* node 548:65455: 20px from right AND bottom edges (was 24, off-node) */
}

/* ============================================================= DESKTOP (>=1280) */
@media (min-width: 1280px) {
  /* Hugo's frame is 900px tall (1440x900). Above 1920 wide the hero keeps the SAME proportion a
     1920 screen sees (1920x900 = 2.13:1) instead of flattening into a band, capped at the screen
     height: 2560 -> 1200, 3840 -> 1800 (or 100vh). Nothing changes at 1440 or 1920. Paul, 17 Aug:
     "should the whole picture not be taller on this screen, so it looks the same shape?" */
  .v2hero { height: max(900px, min(100vh, 46.875vw)); }
  .v2hero__copy {
    left: 104px; right: auto; top: 50%; transform: translateY(-50%);
    max-width: 436px; gap: 40px;
  }
  .v2hero__eyebrow { font-size: 18px; line-height: 28px; letter-spacing: 2.16px; }
  .v2hero__title  { font-size: 114px; line-height: 100px; }
  .v2hero__intro  { font-size: 18px; line-height: 30px; max-width: 421px; }

  .v2nav { padding: 0 34px; height: 82px; }
  .v2nav__burger { display: none; }
  .v2nav__mobphone { display: none; }   /* desktop shows the full contact (phone label + CTA) instead */
  .v2nav__links {
    display: flex; align-items: center; gap: 32px; margin: 0 auto;
  }
  .v2nav__links a {
    color: #fff; font-weight: 400; font-size: 12px; line-height: 22px;
    letter-spacing: 1.44px; text-transform: uppercase;
  }
  .v2nav__contact { display: flex; align-items: center; gap: 24px; }
  .v2nav__phone {
    color: #fff; display: flex; align-items: center; gap: 8px;
    font-weight: 400; font-size: 12px; letter-spacing: 1.44px; text-transform: uppercase;
  }
  .v2nav__phone .ic { width: 16px; height: 16px; }
  .v2nav__cta {
    color: var(--c-sand); background: var(--c-gold);   /* sand #f9f5f2 label per node 211:378 base-buttons (was wrongly ink) */
    padding: 13px 24px; font-weight: 400; font-size: 12px;
    letter-spacing: 1.44px; text-transform: uppercase;
  }
  .v2hero__scroll { bottom: 0; }   /* desktop scroll frame y799 h101 -> sits at very bottom */
  /* desktop hero caption ENABLED 2026-07-12 (Hugo: node 548:65455 showImageCaption) — inherits the
     tablet right/bottom-20 rules above; rendered only when the template's $hero_credit is set. */
}

/* ============================================================= INSPIRATION CAROUSEL */
/* base = mobile/tablet (stacked: image on top, info below). Desktop overrides to the
   image-left / info-right featured slide. Built from Hugo nodes 222:97453 / 753:122039 / 710:87301. */
.v2insp {
  position: relative; background: var(--c-sand); overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 72px 0; gap: 56px;          /* mobile: pad 72, gap 56 (tablet 104/64, desktop 144/104) */
}
.v2insp__heading {
  font-family: "Bebas Neue", sans-serif; font-weight: 400; color: var(--c-ink);
  text-align: center; font-size: 36px; line-height: 34px;   /* mobile/tablet; desktop 62/58 */
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  width: calc(100% - 48px);   /* mobile: content-width centred box -> x=margin 24 (Hugo) */
}
.v2insp__carousel { position: relative; width: 100%; }
.v2insp__track { display: flex; align-items: center; justify-content: center; gap: 24px; }
.v2insp__peek { display: none; }            /* peeks: desktop only */
.v2insp__peek img { width: 100%; height: 100%; object-fit: cover; }

.v2trip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.v2trip__media { position: relative; flex: 0 0 auto; overflow: hidden; }   /* P4.6: contain the hover zoom */
.v2trip__media img { display: block; object-fit: cover; transition: transform .45s ease-in-out; }
.v2trip__media:hover img { transform: scale(1.04); }   /* P4.6: subtle contained growth on hover */
.v2trip__viewbtn {
  position: absolute; border-radius: 50%; background: var(--c-sand);
  display: flex; align-items: center; justify-content: center; width: 90px; height: 90px;
  /* P4.5: hidden by default, fades/scales in CENTRED on image hover (Hugo's motion spec;
     the node's bottom-right placement is the static demo state). */
  left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.85); opacity: 0;
  transition: opacity .3s ease-in-out, transform .3s ease-in-out; pointer-events: none;
}
.v2trip__media:hover .v2trip__viewbtn, .v2trip__media:focus-within .v2trip__viewbtn {
  opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.v2trip__viewbtn span { font-weight: 400; font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; color: rgba(0,0,0,.8); }
.v2trip__info { display: flex; flex-direction: column; gap: 40px; }
.v2trip__titlewrap { display: flex; flex-direction: column; gap: 24px; }
/* trim line-box leading so the info column's 40px gaps are ink-to-ink (Hugo auto-layout) */
.v2trip__count, .v2trip__title, .v2trip__desc, .v2trip__col span, .v2trip__cta {
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
}
.v2trip__count { font-weight: 400; font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; color: rgba(0,0,0,.8); }
.v2trip__title { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 50px; line-height: 50px; color: rgba(0,0,0,.8); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2trip__desc { font-weight: 300; font-size: 18px; line-height: 30px; color: rgba(0,0,0,.8); }
.v2trip__details { display: flex; gap: 18px; }
.v2trip__col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; width: 195px; }
.v2trip__col li { height: 48px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(0,0,0,.07); }   /* P4.7: 1px Neutrals/Black 7%, was solid #000 */
.v2trip__col li:last-child { border-bottom: 1px solid rgba(0,0,0,.07); }
.v2trip__col .ic { width: 24px; height: 24px; color: var(--c-gold); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.2px; stroke-linecap: round; stroke-linejoin: round; }
.v2trip__col span { font-weight: 300; font-size: 18px; line-height: 30px; color: rgba(0,0,0,.8); }
.v2trip__cta { display: inline-flex; align-items: center; gap: 0; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: 1.68px; text-transform: uppercase; color: rgba(0,0,0,.8);
  transition: color .3s ease-in-out; }   /* P4.4: default black, no arrow */
.v2trip__cta .ic { width: 0; height: 14px; opacity: 0; transform: translateX(-6px); color: var(--c-gold);
  fill: none; stroke: currentColor; stroke-width: 1.4px; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .3s ease-in-out, transform .3s ease-in-out, width .3s ease-in-out; }
.v2trip__cta:hover { color: var(--c-gold); }
.v2trip__cta:hover .ic { width: 18px; opacity: 1; transform: translateX(6px); }

/* batch2 #1: the old desktop side-arrow set (.v2insp__arrows) is GONE from the design —
   the inspiration carousel's arrows live in the foot stack (.v2insp__arrows-h) at every
   breakpoint now (node 1076:145603: progress on top, arrows 32 beneath, both centred). */
/* Hugo batch2 #2: the component set's exact Arrow asset — 14.85x10.85 gold chevrons in every
   variant (was a 22px white ic-dbl glyph). Back = the same asset rotated 180 (the set's own
   Back variant is the flipped Forward). Applies to every carousel-arrow button site-wide. */
.v2insp__arrows-h button[aria-label^="Previous"] .ic,
.v2dest__arrows button[aria-label^="Previous"] .ic { transform: rotate(180deg); }

.v2insp__progress { display: flex; align-items: center; gap: 24px; width: 300px; }   /* mobile centred */
.v2insp__progress span { font-weight: 400; font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; color: rgba(0,0,0,.8); }
.v2insp__bars { display: flex; gap: 1px; flex: 1; }
.v2insp__bars i { flex: 1 1 0; height: 3px; background: rgba(0,0,0,.1); }
.v2insp__bars i.on { background: var(--c-gold); }

/* ---- DESKTOP featured slide: image LEFT + info RIGHT (the layout the old build got wrong) ---- */
@media (min-width: 1280px) {
  .v2insp { padding: 144px 0; gap: 104px; }
  .v2insp__heading { font-size: 62px; line-height: 58px; }
  .v2insp__carousel { height: 600px; }
  .v2insp__track {
    position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: 2248px; height: 600px; gap: 80px; justify-content: flex-start;
  }
  .v2insp__peek { display: block; }
  .v2insp__peek--l { width: 500px; height: 500px; }
  .v2insp__peek--r { width: 500px; height: 412px; }
  .v2trip { width: 1088px; height: 600px; flex-direction: row; gap: 80px; align-items: center; }
  .v2trip__media { width: 600px; height: 600px; box-shadow: 30px 30px 80px rgba(0,0,0,.15); }
  .v2trip__media img { width: 600px; height: 600px; }
  /* P4.5: desktop position override removed — the button centres over the image (hover state). */
  .v2trip__info { width: 408px; gap: 40px; }
  .v2trip__title { max-width: 342px; }
  .v2insp__heading { align-self: center; padding: 0; }   /* desktop: shrink-wrap centred (Hugo x468 w503) */
  /* batch2 #1: node 1076:145603 — desktop progress bar is 520 wide (was 445), centred */
  .v2insp__progress { align-self: center; width: 520px; padding: 0; }

  /* Hugo QA 2026-07-22 #4: the section's own topographic background + bottom sand gradient
     (node 222:97453 / component 208:27803). Node order bottom->top: Gradient 347:42051
     (1440x334, bottom-anchored, transparent-sand -> sand) UNDER the topo 207:25562
     (1500x1500 square centred = -30,-168 of the 1440x1164 frame, art at 60% opacity,
     vertically flipped, COLOR_BURN on the wrapper) UNDER the content. Verified against the
     node's own render: texture runs to the bottom edge (the gradient does NOT fade it).
     Asset = the node's flattened render of the visible region (1440x1164, flip + 60%
     baked into alpha), so CSS applies blend only. Content lifted to z1. DESKTOP only —
     tablet/mobile inspiration frames (753:122039 / 710:87301) not confirmed to carry the
     layer (asked Hugo 2026-07-22, same question as the big-quote Map layers). */
  .v2insp > * { position: relative; z-index: 1; }
  .v2insp::before {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    left: calc(50% - 720px); bottom: 0; width: 1440px; height: 334px;
    background: linear-gradient(180deg, rgba(249,245,242,0) 0%, #f9f5f2 100%);
  }
  .v2insp::after {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    left: calc(50% - 720px); top: 0; width: 1440px; height: 1164px;
    background: url('../../img/v2/insp-topo.png') center top / 1440px auto no-repeat;
    mix-blend-mode: color-burn;
  }
}

/* ---- TABLET/MOBILE multi-card layout (Hugo 753:122039 / 710:87301) ---- */
.v2insp__featured { display: none; }                /* desktop only */
/* Hugo batch2 #5/#8: scroll-padding must MATCH the padding — without it, mandatory snap
   aligns card 1 to the container edge at load, pre-scrolling the track past its own left
   margin so the row rendered edge-to-edge (measured scrollLeft 24/80 at rest). */
.v2insp__cards { align-self: stretch; display: flex; gap: 8px; padding-left: 24px; scroll-padding-left: 24px; }
.v2card { flex: 0 0 300px; height: 576px; background: #fff; display: flex; flex-direction: column; }   /* mobile fixed card; tablet 712 */
.v2card__media { position: relative; height: 229px; overflow: hidden; }
.v2card__media img { width: 100%; height: 100%; object-fit: cover; }
.v2card__media::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0)); }
.v2card__count { position: absolute; top: 24px; left: 24px; z-index: 1; color: #fff; font-weight: 400; font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; }
.v2card__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 32px 24px; gap: 32px; }
.v2card__top { display: flex; flex-direction: column; gap: 32px; }
.v2card__titlewrap { display: flex; flex-direction: column; gap: 24px; }
.v2card__eyebrow { color: var(--c-gold); font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: 1.68px; text-transform: uppercase; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2card__sub { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 36px; line-height: 34px; color: #000; text-box-trim: trim-both; text-box-edge: cap alphabetic; }   /* mobile 36/34; tablet 32/32 */
.v2card__desc { display: none; font-weight: 300; font-size: 16px; line-height: 28px; color: rgba(0,0,0,.8); text-box-trim: trim-both; text-box-edge: cap alphabetic; }   /* mobile: no description */
.v2card__details { display: flex; gap: 18px; }
.v2card__details .v2trip__col { width: auto; flex: 1; }
.v2card__details .v2trip__col li { height: 48px; }
.v2card__details .v2trip__col span { font-size: 14px; line-height: 24px; }
/* MOBILE details: single column, only Price + Duration (Hugo drops Private group + guests on mobile) */
.v2card__details { flex-direction: column; gap: 0; }
.v2card__details .v2trip__col { flex: none; width: 100%; }
.v2card__details .v2trip__col li:first-child { display: none; }
.v2card__details .v2trip__col:first-child li:last-child { border-bottom: 0; }
.v2card__cta { color: rgba(0,0,0,.8); font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: 1.68px; text-transform: uppercase; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2insp__foot { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 32px; }   /* Hugo groups progress+arrows (gap 32) as one section item */
.v2insp__arrows-h { display: flex; gap: 8px; }
.v2insp__arrows-h button { width: 52px; height: 52px; border-radius: 0; background: var(--c-ink); display: flex; align-items: center; justify-content: center; }
.v2insp__arrows-h .ic { width: 15px; height: 11px; color: var(--c-gold); fill: none; }   /* batch2 #2: node Arrow asset */

@media (min-width: 768px) {
  .v2insp { padding: 104px 0; gap: 64px; }
  .v2insp__heading { width: calc(100% - 160px); }   /* tablet margin 80 -> x80 */
  .v2insp__cards { padding-left: 80px; scroll-padding-left: 80px; }   /* batch2 #5: tablet 80 margin (node 753:120413) */
  .v2card { flex: 0 0 404px; height: 712px; }
  .v2card__media { height: 265px; }
  .v2card__body { padding: 40px 32px; }
  /* tablet restores the full card: description + 2-column 4-stat details + 32px title */
  .v2card__sub { font-size: 32px; line-height: 32px; }
  .v2card__desc { display: block; }
  .v2card__details { flex-direction: row; gap: 18px; }
  .v2card__details .v2trip__col { flex: 1; width: auto; }
  .v2card__details .v2trip__col li:first-child { display: flex; }
  /* Hugo batch2 #7: all six card dividers are the same asset (Vector 18) in the node —
     this one was solid #000 while the rest are Black 7%, so the line under the price
     read darker. Match the shared divider colour. */
  .v2card__details .v2trip__col:first-child li:last-child { border-bottom: 1px solid rgba(0,0,0,.07); }
  .v2insp__progress { width: calc(100% - 160px); }
}

@media (min-width: 1280px) {
  .v2insp__featured { display: block; }
  .v2insp__cards { display: none; }
  /* batch2 #1: the foot arrows now SHOW on desktop too, stacked 32 under the progress bar
     (the .v2insp__foot column gap). They drive the Embla filmstrip via setupInspEmbla. */
  /* These must come AFTER the tablet @768 block in source so they win at >=1280
     (both media queries match there; later source wins). */
  .v2insp { padding: 144px 0; gap: 104px; }
  .v2insp__heading { width: auto; font-size: 62px; line-height: 58px; }   /* desktop: shrink-wrap centred (Hugo x468) */
  .v2insp__progress { width: 520px; }   /* batch2 #1: node 1076:145603 */
}

/* ===== INSPIRATION — Embla centre-mode filmstrip (shared base; data-embla gated) ============
 * Real Embla slide + Scale tween, replacing the old fixed 2248px track + fake fade-nudge.
 * Desktop only (tablet/mobile keep the .v2insp__cards scroll-snap row). Full-bleed so neighbours
 * peek; each slide is a full .v2trip card (image 600 + info 408); active card sits at the node
 * position (measure-0). The Scale tween shrinks peeks toward .83 (node 500/600). The edge MASK
 * dissolves the peeks into the sand (image-left/info-right layout means the left neighbour shows
 * its text edge, not an image; the mask makes it a soft hint, not a cut-off card). Gated to
 * [data-embla] so a non-opted .v2insp page keeps the old track. Engine: setupInspEmbla(). */
@media (min-width: 1280px) {
  .v2insp__featured[data-embla] { position: relative; width: 100%; }
  /* P4 2026-07-12: edge MASK REMOVED (Hugo: peeks are plain images, no overlay). The neighbour
     cards' text columns fade via .is-active instead (design peeks show imagery only). Height
     carries 120px padding so the media drop shadow (30/30/80) is no longer clipped at the bottom;
     the negative margin keeps the section rhythm. */
  .v2insp__featured[data-embla] .emblafs { overflow: hidden; height: 720px; padding-bottom: 120px;
    margin-bottom: -120px; cursor: grab; }
  .v2insp__featured[data-embla] .emblafs:active { cursor: grabbing; }
  .v2insp__featured[data-embla] .emblafs__container { display: flex; align-items: center; height: 600px; }
  .v2insp__featured[data-embla] .emblafs__slide { flex: 0 0 1088px; min-width: 0; margin-right: 80px; display: flex; justify-content: center; }
  .v2insp__featured[data-embla] .emblafs__slide .v2trip { transform-origin: center center; will-change: transform; }
  .v2insp__featured[data-embla] .emblafs__slide .v2trip__media { box-shadow: 30px 30px 80px rgba(0,0,0,.15); }
  .v2insp__featured[data-embla] .emblafs__slide .v2trip__info { transition: opacity .3s ease-in-out; }
  .v2insp__featured[data-embla] .emblafs__slide:not(.is-active) .v2trip__info { opacity: 0; }   /* P4.3: peeks show imagery only, like the node's plain peek images */
  /* P4 follow-up (Paul 2026-07-12): the LEFT neighbour's media glides over its hidden text column
     (info 408 + gap 80) so the left seam peeks an IMAGE like the node's left peek, symmetric with
     the right side. Transitioned so side-changes glide rather than teleport. */
  .v2insp__featured[data-embla] .emblafs__slide .v2trip__media { transition: transform .35s ease-in-out; }
  .v2insp__featured[data-embla] .emblafs__slide.is-left .v2trip__media { transform: translateX(488px); }
  /* batch2 #1: the side-arrow position rule is gone with the side arrows themselves. */
}

/* ============================================================= §2 WHY CHOOSE (light) + collage */
/* reusable gold button (§2, §7) */
.v2btn--gold { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
  background: var(--c-gold); color: var(--c-sand); padding: 18px 26px;
  font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: 1.68px; text-transform: uppercase; }
.v2btn--gold .ic { width: 16px; height: 16px; }
.v2btn--gold span { text-box-trim: trim-both; text-box-edge: cap alphabetic; }   /* button height = pad18 + cap + pad18 = 46 (Hugo), not line-box 60 */

/* base = MOBILE (400x1027): copy on top (left-aligned), single image below + gold label + credit on the right */
.v2why2 { position: relative; background: var(--c-sand); overflow: hidden;
  display: flex; justify-content: center; padding: 104px 24px 24px; }
/* Hugo Vector 29: the scroll-cue line continues 60px DOWN into §2 (all bps), centred so it
   lines up with the hero cue above it -> one continuous line linking the hero to §2. */
.v2why2__line { position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 60px; background: var(--c-gold); z-index: 1; pointer-events: none; }
/* Map layer (node 753:131860, P1 2026-07-12): white topo vector, opacity 0.6 BAKED INTO the SVG
   path (do not add CSS opacity — it would double-apply). Centred horizontally at every breakpoint
   per the three frames; per-breakpoint size/top from the nodes: mobile 728x780 top -69,
   tablet+desktop 1285x1376 top -46 / -204. Section already has overflow:hidden (clipsContent). */
.v2why2__mapwrap { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.v2why2__map { position: absolute; left: 50%;
  width: 728px; height: 780px; top: -69px; margin-left: -364px;
  background: url('../../img/v2/why-map.svg') no-repeat center / 100% 100%; }
.v2why2__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: 1232px; }
.v2why2__copy { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.v2why2__head { display: flex; flex-direction: column; gap: 32px; }
.v2why2__eyebrow { font-weight: 400; font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; color: rgba(0,0,0,.8); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2why2__title { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 40px; line-height: 38px; color: rgba(0,0,0,.8); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2why2__title span { color: var(--c-gold); }
.v2why2__desc { font-weight: 300; font-size: 16px; line-height: 28px; color: var(--c-ink); text-box-trim: trim-both; text-box-edge: cap alphabetic; }   /* mobile/tablet 16/28; desktop 18/30 */

.v2collage { position: relative; display: flex; gap: 12px; align-items: stretch; width: 100%; }
.v2collage__a, .v2collage__b { margin: 0; overflow: hidden; position: relative; }
.v2collage__a img, .v2collage__b img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2collage__a { flex: 1; aspect-ratio: 323 / 409; }
.v2collage__a::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 60%;
  background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0)); pointer-events: none; }
.v2collage__label { position: absolute; top: 24px; left: 24px; z-index: 2; color: #fff;  /* Hugo: whole label white (was gold on mobile) */
  font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 28px; line-height: 28px; }
.v2collage__b { display: none; }   /* mobile: single image */
.v2collage__credit { color: var(--c-ink); font-weight: 300; font-size: 12px; line-height: 16px;
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 16px;
  writing-mode: vertical-rl; transform: rotate(180deg); justify-content: flex-start; }   /* mobile: vertical, right of image */
.v2collage__credit .ic { width: 16px; height: 16px; color: var(--c-gold); transform: rotate(180deg); }   /* counter-rotate: the credit block is flipped for vertical reading, which turned the camera upside down (Paul 2026-07-12) */

/* TABLET (1024x1284): copy centred on top, collage (big Tawi + small overlap) below, credit left */
@media (min-width: 768px) {
  .v2why2 { padding: 104px; }
  .v2why2__inner { align-items: center; gap: 80px; }
  .v2why2__map { width: 1285px; height: 1376px; top: -46px; margin-left: -642px; }
  .v2why2__copy { width: 570px; align-items: stretch; text-align: center; gap: 48px; }   /* tablet copy gap 48 (mobile 40) */
  .v2why2__head { align-items: stretch; }
  .v2why2__copy .v2btn--gold { align-self: center; }   /* tablet: centred copy + centred button */
  .v2collage { position: relative; width: 718px; height: 624px; gap: 0; }
  .v2collage__a { position: absolute; left: 32px; top: 0; width: 494px; height: 624px; flex: none; aspect-ratio: auto; }
  .v2collage__a::after { height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)); }
  .v2collage__label { color: #fff; }
  .v2collage__b { display: block; position: absolute; left: 368px; top: 84px; right: auto; bottom: auto;
    width: 350px; height: 457px; z-index: 1; box-shadow: 40px 40px 100px rgba(0,0,0,.3); }
  .v2collage__credit { position: absolute; left: 0; top: 256px; bottom: auto; height: 368px; width: 16px; }
}

/* DESKTOP (>=1280): collage left + copy right (side by side) */
@media (min-width: 1280px) {
  .v2why2 { padding: 152px 104px; }
  .v2why2__inner { flex-direction: row-reverse; align-items: center; justify-content: center; gap: 104px; }
  .v2why2__map { top: -204px; }
  .v2why2__copy { flex: 0 1 464px; min-width: 0; width: auto; align-items: flex-start; text-align: left; gap: 48px; }
  .v2why2__head { align-items: flex-start; }
  .v2why2__copy .v2btn--gold { align-self: flex-start; }
  .v2why2__title { font-size: 50px; line-height: 50px; }
  .v2why2__desc { font-size: 18px; line-height: 30px; }
  /* FLUID (lesson 13): shrinkable + collage children in % so they scale with it (no overflow < 1440). */
  .v2collage { flex: 0 1 664px; min-width: 0; width: auto; height: auto; aspect-ratio: 1 / 1; gap: 0; justify-content: flex-start; }
  .v2collage__a { position: absolute; left: 0; top: 0; width: 75.30%; height: 100%; flex: none; aspect-ratio: auto; }
  .v2collage__a::after { height: 453px; background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0)); }
  .v2collage__b { display: block; position: absolute; left: 48.80%; top: 16.42%; right: auto; bottom: auto;
    width: 51.20%; height: 67.02%; z-index: 1; box-shadow: 40px 40px 100px rgba(0,0,0,.1); }
  .v2collage__credit { position: absolute; left: -4.97%; top: 44.43%; bottom: auto; height: 55.42%; width: 16px; }
}

/* ============================================================= §3 WHERE WE OPERATE - destinations carousel */
/* base = MOBILE: text on top, card row, progress+arrows foot */
.v2dest { position: relative; background: #fff; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; padding: 72px 0; gap: 56px; }
.v2dest__text { align-self: stretch; padding: 0 24px; display: flex; flex-direction: column; gap: 40px; }
.v2dest__title { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 36px; line-height: 34px; color: #000; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2dest__title span { color: var(--c-gold); }
.v2dest__desc { font-weight: 300; font-size: 14px; line-height: 24px; color: #000; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2dest__carousel { align-self: stretch; position: relative; }
.v2dest__arrows { display: none; }                       /* mobile/tablet: arrows live in the foot */
.v2dest__track { display: flex; gap: 9px; padding-left: 24px; scroll-padding-left: 24px; }   /* batch2 #8: snap must respect the 24 margin (node 710:108406) */
.v2dcard { flex: 0 0 300px; height: 505px; position: relative; overflow: hidden; background: #000; }
.v2dcard__link { position: absolute; inset: 0; z-index: 3; }
.v2dcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2dcard__num { position: absolute; top: 30px; left: 24px; z-index: 1; color: rgba(255,255,255,.8); font-weight: 400; font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; }
.v2dcard__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 24px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 18px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.6)); min-height: 260px; }
.v2dcard__kicker, .v2dcard__sub { font-weight: 400; font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; color: rgba(255,255,255,.8); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2dcard__name { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 28px; line-height: 28px; color: var(--c-sand); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
/* Card hover = the EXACT arcar area-card implementation (area-v2.css, agreed with Paul 2026-06-18/19
   and confirmed as THE reference 2026-07-13): the pulsing gold country map fades in while LIFTING
   (translateY(-20%) scale(.85), .55s — the movement Paul described); the summary expands its grid
   row (0fr->1fr, .5s) so the name lifts as the copy comes in under it; the card darkens by
   animating only ::after's background-color (.55s). WIDTH-gated (>=1280), NOT (hover:hover) —
   that media query falsely reports false in DevTools device mode and some real desktop setups and
   silently killed the arcar reveal once (Paul 2026-06-18). No photo zoom: the arcar cards have none.
   Below 1280 the map + summary stay hidden (the home mobile card shows the name only, per Figma). */
/* The map box fits BOTH constraints (62% height, 78% width) and the img contains within it,
   ratio preserved — on these thinner cards the arcar height-driven sizing overran the width
   and clipped at the edges (Paul 2026-07-13). */
.v2dcard__map { position: absolute; inset: 0; margin: auto; display: block; height: 62%; width: 78%;
  opacity: 0; transition: opacity .55s ease, transform .55s ease; z-index: 1; pointer-events: none; }
.v2dcard__map img { width: 100%; height: 100%; object-fit: contain; }
.v2dcard__text { z-index: 1; }
.v2dcard::after { content: ''; position: absolute; inset: 0; z-index: 0; background-color: transparent;
  transition: background-color .55s ease; pointer-events: none; }
.v2dcard__hovergrid { display: grid; grid-template-rows: 0fr; }
.v2dcard__sum { min-height: 0; overflow: hidden; margin: 0; opacity: 0;
  font-weight: 300; font-size: 14px; line-height: 22px; color: rgba(255,255,255,.92); }
.v2dcard__sum::before { content: ""; display: block; height: 14px; }
@media (min-width: 1280px) {
  .v2dcard__hovergrid { transition: grid-template-rows .5s ease; }
  .v2dcard__sum { transition: opacity .5s ease; }
  .v2dcard:hover::after, .v2dcard:focus-within::after { background-color: rgba(0,0,0,.55); }
  .v2dcard:hover .v2dcard__map, .v2dcard:focus-within .v2dcard__map { opacity: 1; transform: translateY(-20%) scale(0.85); }
  .v2dcard:hover .v2dcard__hovergrid, .v2dcard:focus-within .v2dcard__hovergrid { grid-template-rows: 1fr; }
  .v2dcard:hover .v2dcard__sum, .v2dcard:focus-within .v2dcard__sum { opacity: 1; }
}

.v2dest__foot { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.v2dest__progress { display: flex; align-items: center; gap: 24px; width: 300px; }
.v2dest__progress span { font-weight: 400; font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; color: rgba(0,0,0,.8); }

/* TABLET */
@media (min-width: 768px) {
  .v2dest { padding: 104px 0; gap: 56px; }
  .v2dest__text { padding: 0 80px; }
  .v2dest__track { padding-left: 80px; scroll-padding-left: 80px; }   /* batch2 #5: tablet 80 margin, left-aligned with the heading (node 753:120413) */
  .v2dcard__text { padding: 32px 24px; }
  .v2dest__progress { align-self: stretch; width: auto; padding: 0 80px; }
}

/* DESKTOP: text-left, cards-right (overflow peek), vertical arrows, progress below cards */
@media (min-width: 1280px) {
  .v2dest { display: block; position: relative; height: 900px; padding: 0; }
  .v2dest__text { position: absolute; left: 104px; top: 302px; width: 357px; padding: 0; gap: 48px; }
  .v2dest__title { font-size: 42px; line-height: 42px; }
  .v2dest__desc { font-size: 16px; line-height: 26px; }
  .v2dest__arrows { display: flex; flex-direction: column; gap: 8px; position: absolute; left: 517px; top: 624px; }
  .v2dest__arrows button { width: 52px; height: 52px; border-radius: 0; background: var(--c-ink); display: flex; align-items: center; justify-content: center; }
  .v2dest__arrows .ic { width: 15px; height: 11px; color: var(--c-gold); fill: none; }   /* batch2 #2: node Arrow asset */
  .v2dest__track { position: absolute; left: 593px; top: 164px; gap: 16px; padding: 0; }
  .v2dcard { width: 340px; height: 572px; box-shadow: 30px 30px 80px rgba(0,0,0,.15); }
  .v2dcard__text { padding: 32px; }
  .v2dest__foot { position: absolute; left: 593px; top: 783px; width: 704px; align-self: auto; }
  .v2dest__progress { width: 704px; padding: 0; align-self: auto; }
  .v2dest__foot .v2insp__arrows-h { display: none; }
}

/* ===================== SECTION 4: BIG QUOTE (222:98588) ===================== */
/* FLUID (lesson 13): Hugo auto-layout -> flex, exact at frames + adapts between.
   The rotated label lives INSIDE the figure (overflow:visible) so it tracks the portrait
   and can sit OUTSIDE it on desktop; the pre-cropped image fills the figure exactly. */
/* base = mobile (400x677): quote-text top, landscape portrait below (w/ gradient caption) */
.v2quote { position: relative; isolation: isolate; background: #f9f5f2; overflow: hidden; display: flex; flex-direction: column; gap: 56px; padding: 56px 24px 24px; }
/* Big-quote watermark (P2 2026-07-12, node 208:27820 'Background image'): separate photographic
   asset (misty sunrise, quote-wm.webp = the exact 978x904 window baked from the 4096px source),
   5% opacity, LUMINOSITY blend, frame at 414,48 — LIGHT variant only (Figma Variant=Light;
   .ttquote/.dhquote are the dark usages and the design has no watermark there), DESKTOP only
   (no such layer in the tablet/mobile frames). Content is lifted above it. */
.v2quote > * { position: relative; z-index: 1; }
@media (min-width: 1280px) {
  .v2quote:not(.ttquote):not(.dhquote)::before {
    content: ''; position: absolute; left: calc(50% - 306px); top: 48px; width: 978px; height: 904px;   /* Hugo QA #2 2026-07-21: node x414 of the 1440 frame = 50% - 306px, so the watermark tracks the CENTRED content zone on wide screens instead of the full-bleed section's left edge (was left:414px, which drifts 240px left of design at 1920) */
    background: url('../../img/v2/quote-wm.webp') center / cover no-repeat;
    opacity: .05; mix-blend-mode: luminosity; pointer-events: none; z-index: 0;
  }
  /* Topographic layer (Hugo QA 2026-07-22 #3, node 222:98588 'Topographic Background':
     1244x1244 frame, COLOR_BURN, opacity 0.10, at -774,-122 of the 1440 frame). The asset
     is the node's own flattened render of the VISIBLE region (the square's x 774-1244 /
     y 122-1122 slice = 470x1000 at the section's top-left; the rest is off-frame in the
     design). Anchored to the centred 1440 zone like the watermark above. Sits ABOVE the
     content per the node's layer order (topo = 2nd-from-top child, over photo and text);
     DESKTOP only — the tablet (753:120559) and mobile (660:79119) frames carry an Africa
     'Map' layer instead of this texture (unbuilt, flagged to Hugo 2026-07-22). */
  .v2quote:not(.ttquote):not(.dhquote)::after {
    content: ''; position: absolute; z-index: 2; pointer-events: none;
    left: calc(50% - 720px); top: 0; width: 470px; height: 1000px;
    background: url('../../img/v2/quote-topo.png') left top / 470px auto no-repeat;
    mix-blend-mode: color-burn; opacity: .1;
  }
}
.v2quote__text { order: 1; display: flex; flex-direction: column; gap: 32px; }
.v2quote__marks { display: block; width: 16px; height: 14px; }
.v2quote__marks svg { display: block; width: 100%; height: 100%; }
.v2quote__q { margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 32px; line-height: 32px; letter-spacing: 0; color: rgba(0,0,0,.8); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2quote__gold { color: var(--c-gold); }
.v2quote__author { display: flex; flex-direction: column; gap: 24px; max-width: 313px; }
.v2quote__name { margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 28px; line-height: 28px; color: rgba(0,0,0,.8); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2quote__desc { margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 14px; line-height: 24px; color: rgba(0,0,0,.8); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2quote__portrait { order: 2; position: relative; width: 100%; aspect-ratio: 352 / 235; margin: 0; background: #fff; overflow: visible; }
.v2quote__portrait picture, .v2quote__portrait img { display: block; width: 100%; height: 100%; }
.v2quote__portrait img { object-fit: cover; }
.v2quote__label { display: none; }
/* mobile gradient caption bar */
.v2quote__cap { position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; display: flex; align-items: flex-end; padding: 20px; box-sizing: border-box; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); }
.v2quote__cap-row { display: flex; align-items: center; gap: 8px; }
.v2quote__cap svg { display: block; width: 16px; height: 16px; flex: none; }
.v2quote__caption { font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 12px; line-height: 16px; color: rgba(255,255,255,.8); }

/* TABLET (frame 1024x690): quote-left + portrait-right, white vertical caption over the photo.
   80+392+48+424+80 = 1024. */
@media (min-width: 768px) {
  .v2quote { flex-direction: row; align-items: center; gap: 48px; padding: 64px 80px; }
  .v2quote__text { flex: 1 1 392px; min-width: 0; gap: 32px; }
  .v2quote__marks { width: 22px; height: 19px; }
  .v2quote__q { font-size: 40px; line-height: 38px; }
  .v2quote__portrait { flex: 0 1 424px; width: auto; aspect-ratio: 424 / 562; }
  .v2quote__cap { display: none; }
  .v2quote__label { display: block; position: absolute; left: 16px; bottom: 16px; margin: 0;
    writing-mode: sideways-lr; font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px;
    line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; color: #fff;
    text-box-trim: trim-both; text-box-edge: cap alphabetic; }
}

/* DESKTOP (frame 1440x1000): portrait-left (drop shadow + black vertical caption to its LEFT) + quote-right.
   145+432+96+631+136 = 1440. */
@media (min-width: 1280px) {
  .v2quote { gap: 96px; padding: 214px 136px 214px 145px; }
  .v2quote__portrait { order: 1; flex: 0 1 432px; aspect-ratio: 432 / 572; box-shadow: 40px 40px 100px rgba(0,0,0,.5); }
  .v2quote__text { order: 2; flex: 1 1 631px; gap: 48px; }
  .v2quote__marks { width: 30px; height: 26px; }
  .v2quote__q { font-size: 62px; line-height: 58px; }
  .v2quote__desc { font-size: 16px; line-height: 26px; }
  .v2quote__label { left: -33px; bottom: 0; color: rgba(0,0,0,.6); }
}

/* ===================== SECTION 5: HOW IT WORKS (222:96331) ===================== */
/* FLUID (lesson 13): Hugo auto-layout -> flex, exact at frames + adapts between. */
/* base = mobile (400x878): dark section, left-aligned header + accordion, NO image */
.v2hiw { position: relative; overflow: hidden; isolation: isolate; background: #15292c; display: flex; flex-direction: column; align-items: flex-start; gap: 48px; padding: 120px 24px; }
.v2hiw::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 0; }
.v2hiw__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .36; mix-blend-mode: luminosity; z-index: 0; pointer-events: none; }
/* .v2hiw__tick (Hugo's 1px gold mark at the top centre of this section) REMOVED 2026-08-14
   at Paul's request: on the built page it reads as a stray line above "how it works". The
   markup is gone from page-home-v2.php and page-our-process-v2.php, the only two users. */
.v2hiw__head { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: 48px; text-align: left; }
.v2hiw__eyebrow { margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: 1.92px; text-transform: uppercase; color: var(--c-gold); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2hiw__intro { margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 16px; line-height: 28px; color: #f9f5f2; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2hiw__row { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; }
.v2hiw__acc { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.v2hiw__item--open { display: flex; flex-direction: column; gap: 32px; }
.v2hiw__closed { display: flex; flex-direction: column; gap: 24px; }
.v2hiw__line { display: block; height: 1px; width: 100%; background: rgba(255,255,255,.25); }
.v2hiw__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.v2hiw__lead { display: flex; align-items: center; gap: 16px; }
.v2hiw__num { font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: 1.68px; text-transform: uppercase; color: var(--c-gold); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2hiw__t { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 28px; line-height: 28px; color: #fff; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2hiw__t--dim { color: rgba(255,255,255,.6); }
.v2hiw__chev { display: block; width: 16px; height: 8px; flex: none; }
.v2hiw__body { margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 14px; line-height: 24px; color: rgba(255,255,255,.8); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2hiw__img { display: none; position: relative; margin: 0; overflow: hidden; background: #f9f5f2; }
.v2hiw__img picture, .v2hiw__img img { display: block; width: 100%; height: 100%; }
.v2hiw__img img { object-fit: cover; }
.v2hiw__cap { display: none; position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; padding: 20px; box-sizing: border-box; align-items: flex-end; justify-content: flex-end; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); }
.v2hiw__cap-row { display: flex; align-items: center; gap: 8px; }
.v2hiw__cap svg { display: block; width: 16px; height: 16px; flex: none; }
.v2hiw__caption { font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 12px; line-height: 16px; color: rgba(255,255,255,.8); }

/* TABLET (frame 1024x897): centred header, accordion-left + image-right.
   row 392+48+424 = 864 content. */
@media (min-width: 768px) {
  .v2hiw { align-items: center; gap: 96px; padding: 104px 72px; }
  .v2hiw__head { width: 864px; max-width: 100%; text-align: center; }
  .v2hiw__intro { font-size: 20px; line-height: 32px; }
  .v2hiw__row { width: 864px; max-width: 100%; flex-direction: row; align-items: center; gap: 48px; }
  .v2hiw__acc { flex: 1 1 392px; min-width: 0; width: auto; gap: 40px; }
  .v2hiw__img { display: block; flex: 0 1 424px; width: auto; aspect-ratio: 1 / 1; }
  .v2hiw__cap { display: flex; }
}

/* DESKTOP (frame 1440x1521): accordion 548 + image 580; header centred above the row. */
@media (min-width: 1280px) {
  .v2hiw { gap: 234px; padding: 258px 104px 210px; }
  .v2hiw__head { width: 976px; max-width: 100%; }
  .v2hiw__eyebrow { font-size: 18px; line-height: 28px; letter-spacing: 2.16px; }
  .v2hiw__intro { font-size: 26px; line-height: 40px; }
  .v2hiw__row { width: 1232px; max-width: 100%; gap: 104px; }
  .v2hiw__acc { flex: 1 1 548px; gap: 56px; }
  .v2hiw__body { font-size: 16px; line-height: 26px; }
  .v2hiw__img { flex: 0 1 580px; box-shadow: 40px 40px 100px rgba(0,0,0,.5); }
}

/* ===================== SECTION 7: WHY CHOOSE (dark) staggered grid (222:98555) ===================== */
/* base = mobile (400x1061): full-width image (w/ caption) on top, text below */
/* FLUID (lesson 13): Hugo auto-layout -> flex, exact at frames + adapts between. */
/* base = mobile (400x1061): full-bleed image (caption) top, padded text below */
.v2whyd { overflow: hidden; background: #15292c; display: flex; flex-direction: column; gap: 48px; padding-bottom: 40px; }
.v2whyd__grid { position: relative; width: 100%; aspect-ratio: 400 / 484; }
.v2whyd__img { position: absolute; margin: 0; overflow: hidden; background: #fff; }
.v2whyd__img--chem { inset: 0; }
.v2whyd__img picture, .v2whyd__img img { display: block; width: 100%; height: 100%; }
.v2whyd__img img { object-fit: cover; }
.v2whyd__img--2, .v2whyd__img--3 { display: none; }
.v2whyd__cap { position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; padding: 20px; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: flex-start; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); }
.v2whyd__cap-row { display: flex; align-items: center; gap: 8px; }
.v2whyd__cap svg { display: block; width: 16px; height: 16px; flex: none; }
.v2whyd__caption { font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 12px; line-height: 16px; color: rgba(255,255,255,.8); }
.v2whyd__text { padding: 0 24px; display: flex; flex-direction: column; gap: 48px; }
.v2whyd__title { margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 40px; line-height: 38px; color: #f9f5f2; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2whyd__desc { margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 16px; line-height: 28px; color: #f9f5f2; text-box-trim: trim-both; text-box-edge: cap alphabetic; }

/* TABLET (frame 1024x720): text-left + single Chem image right, centred.
   80+384+56+424+80 = 1024. */
@media (min-width: 768px) {
  .v2whyd { flex-direction: row; align-items: center; gap: 56px; padding: 104px 80px; }
  .v2whyd__text { order: 1; flex: 1 1 384px; min-width: 0; padding: 0; }
  .v2whyd__grid { order: 2; flex: 0 1 424px; width: auto; aspect-ratio: 424 / 512; }
  .v2whyd__img--chem { box-shadow: 60px 60px 120px rgba(0,0,0,.4); }
  .v2whyd__cap { display: none; }
}

/* DESKTOP (frame 1440x993): staggered 3-image collage left + text right.
   104+707+86+439+104 = 1440. Collage children positioned in % so they scale with it. */
@media (min-width: 1280px) {
  .v2whyd { align-items: flex-start; gap: 86px; padding: 102px 104px; }
  .v2whyd__grid { order: 1; flex: 0 1 707px; width: auto; aspect-ratio: 707 / 789; filter: drop-shadow(60px 60px 120px rgba(0,0,0,.4)); }
  .v2whyd__text { order: 2; flex: 1 1 439px; gap: 56px; margin-top: 142px; }   /* Hugo text top 244 = collage 102 + 142 */
  .v2whyd__img--chem { inset: auto; left: 48.80%; top: 44.49%; width: 51.20%; height: 55.51%; box-shadow: none; }
  .v2whyd__img--2 { display: block; left: 0; top: 25.35%; width: 40.17%; height: 46.89%; }
  .v2whyd__img--3 { display: block; left: 44.84%; top: 0; width: 29.56%; height: 32.70%; }
  .v2whyd__title { font-size: 50px; line-height: 50px; }
  .v2whyd__desc { font-size: 18px; line-height: 30px; }
}

/* ===================== SECTION 8: REVIEWS.IO BANNER (497:34486) ===================== */
/* base = mobile (400x425): centred stars + tagline + logo on white */
.v2reviews { background: #fff; display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 120px 24px; }
/* Topographic-map layer (Hugo QA #4 2026-07-21). EVERY reviews-banner instance in the design file
   carries 'Show topographic map' = TRUE (checked all 46 cached instances), so this lives on the
   SHARED component, not the homepage. Node geometry: a 1440x1440 topographic-map-background-1
   frame anchored 502px above the banner top, centred. Light variants only — the dark reuses
   (.ttreviews trip / .artreviews articles / .dereviews destination+lodge) have a photo wash in the
   design instead (not built, flagged to Hugo). CSS opacity is calibrated against the Figma render
   because the baked opmain-topo.webp tile has darker lines than the node's grey vectors (same
   reason opmain runs 0.03 for a 0.05 design). */
.v2reviews { position: relative; overflow: hidden; }
.v2reviews > * { position: relative; z-index: 1; }
.v2reviews:not(.ttreviews):not(.artreviews):not(.dereviews)::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('../../img/v2/opmain-topo.webp');
  background-repeat: repeat; background-size: 1440px auto; background-position: center -502px;
  opacity: .010;   /* calibrated: .03 measured 2.3x the Figma render (White variant @5%); x3/7 matches the render, x4/5 applies the stated 4% -> .010 */
}
/* The whole band is a link to the Fitzroy page on reviews.io (Paul, 2026-08-17). The anchor
   repeats the section's column layout and gap so stars, tagline and logo sit exactly where they
   did; text keeps the section's colour (white on the dark variants). */
.v2reviews__link { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; color: inherit; text-decoration: none; }
.v2reviews__link:hover .v2reviews__tagline, .v2reviews__link:focus-visible .v2reviews__tagline { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.v2reviews__link:focus-visible { outline: 2px solid #b19f70; outline-offset: 6px; }
.v2reviews__stars { display: flex; align-items: center; gap: 10px; }
.v2reviews__star { display: block; width: 48px; height: 48px; fill: #b19f70; }   /* beat reset.css svg{fill:currentColor} */
.v2reviews__tagline { margin: 0; width: 100%; text-align: center; font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: 1.92px; text-transform: uppercase; color: #15292c; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2reviews__logo { display: block; width: 176px; height: 30px; }

/* TABLET (1024x401) */
@media (min-width: 768px) {
  .v2reviews { padding: 104px 168px; }
  .v2reviews__star { width: 56px; height: 56px; }
}

/* DESKTOP (1440x435) */
@media (min-width: 1280px) {
  .v2reviews { padding: 120px 168px; }
  .v2reviews__tagline { font-size: 18px; line-height: 28px; letter-spacing: 2.16px; }
}

/* ===================== SECTION 9: OUR APPROACH (710:52370) ===================== */
/* FLUID: a faithful translation of Hugo's auto-layout (flex), NOT pinned px. Exact at the
   frame widths (400/1024/1440) AND adapts in between — see responsive.js + playbook lesson 13. */
/* base = mobile (400x965): full-bleed image (w/ caption) top, padded text below */
.v2approach { overflow: hidden; background: #f9f5f2; display: flex; flex-direction: column; gap: 40px; padding-bottom: 40px; }
.v2appr__img { position: relative; width: 100%; aspect-ratio: 400 / 400; margin: 0; overflow: hidden; background: #15292c; }
.v2appr__img picture, .v2appr__img img { display: block; width: 100%; height: 100%; }
.v2appr__img img { object-fit: cover; }
.v2appr__cap { position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; padding: 20px; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: flex-start; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); }
.v2appr__cap-row { display: flex; align-items: center; gap: 8px; }
.v2appr__cap svg { display: block; width: 16px; height: 16px; flex: none; }
.v2appr__caption { font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 12px; line-height: 16px; color: rgba(255,255,255,.8); }
.v2appr__text { padding: 0 24px; display: flex; flex-direction: column; gap: 48px; }
.v2appr__head { display: flex; flex-direction: column; gap: 32px; }
.v2appr__subtitle { margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: 1.68px; text-transform: uppercase; color: rgba(0,0,0,.8); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2appr__title { margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 40px; line-height: 38px; color: rgba(0,0,0,.8); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2appr__desc { margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 16px; line-height: 28px; color: rgba(0,0,0,.9); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2appr__desc--d { display: none; }

/* TABLET (frame 1024x620): text-left + image-right, flex row, both vertically centred.
   80+392+48+424+80 = 1024 -> exact at 1024, shrinks proportionally below. */
@media (min-width: 768px) {
  .v2approach { flex-direction: row; align-items: center; gap: 48px; padding: 80px; }
  .v2appr__text { order: 1; flex: 1 1 392px; min-width: 0; padding: 0; }
  .v2appr__img { order: 2; flex: 0 1 424px; width: auto; aspect-ratio: 424 / 460; }
  .v2appr__cap { justify-content: flex-end; }
  .v2appr__desc--d { display: block; }
  .v2appr__desc--m { display: none; }
}

/* Hugo batch2 #3: when Our Approach sits DIRECTLY above the footer (no section between),
   its bottom spacing shrinks: desktop 200-150=50; tablet floors at 0 (the section only had
   80px to give — the remaining 20 of the asked-for 100 would pull the footer's backdrop over
   the section image; the rest of the perceived tablet gap is sky baked into the footer
   artwork, flagged back to Hugo). Elsewhere (another section follows) spacing is unchanged;
   mobile unchanged. The :has(+) condition keys off real DOM adjacency, so it applies itself
   on every template where the composition matches (home, destination, hub, articles hub,
   about, process, area, lodge as of 2026-07-31). */
@media (min-width: 768px) {
  .v2approach:has(+ .opfoot) { padding-bottom: 0; }
}

/* DESKTOP (frame 1440x1064): 104+464+104+664+104 = 1440. */
@media (min-width: 1280px) {
  .v2approach { gap: 104px; padding: 200px 104px; }
  .v2approach:has(+ .opfoot) { padding-bottom: 50px; margin-bottom: 0; }
  .v2appr__text { flex: 1 1 464px; gap: 56px; }
  .v2appr__img { flex: 0 1 664px; aspect-ratio: 664 / 664; box-shadow: 40px 40px 100px rgba(0,0,0,.1); }
  .v2appr__title { font-size: 50px; line-height: 50px; }
  .v2appr__desc { font-size: 18px; line-height: 30px; }
}

/* =====================================================================================
   SHARE POPOVER (batch2 #15, nodes 1083:146023 default / 1083:146008 hover) — the shared
   popup the JS (setupSharePopover in home-v2.js) attaches to EVERY share button site-wide
   (.arhero__share and .ldhero__share). Sand panel, 1px black/20 border, 4px outer pad;
   42px rows, 16px side pad, Uppercase/Small labels; row hover = gold 30% per the node.
   Lives here because home-v2.css loads on every v2 page. */
/* The popover is appended to BODY (an ancestor overflow clipped it inside the hero panel —
   Paul review 2026-08-01); the JS positions it under its button on desktop and switches to
   the centred sheet + backdrop on mobile. */
.sharepop { position: absolute; top: 0; left: 0; z-index: 60;   /* default position: the closed popover must not sit in flow after the footer, where its hidden box adds white space below the page; the JS re-anchors it on open */
  box-sizing: border-box; padding: 4px; background: var(--c-sand);
  border: 1px solid rgba(0,0,0,.2);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s ease-in-out, transform .2s ease-in-out, visibility 0s linear .2s; }
.sharepop::before { content: ''; position: absolute; top: -7px; left: 0; right: 0; height: 7px; }  /* hover bridge over the 6px gap */
.sharepop.is-open { opacity: 1; visibility: visible; transform: none;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out; }
.sharepop--sheet { position: fixed; left: 40px; right: 40px; top: 50%; transform: translateY(calc(-50% - 8px)); }
.sharepop--sheet.is-open { transform: translateY(-50%); }
.sharepop--sheet .sharepop__item { height: 48px; justify-content: center; }   /* roomier tap targets, centred labels */
.sharepop-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(21,41,44,.5);
  opacity: 0; visibility: hidden; transition: opacity .2s ease-in-out, visibility 0s linear .2s; }
.sharepop-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .2s ease-in-out; }
.sharepop__item { display: flex; align-items: center; height: 42px; padding: 0 16px; box-sizing: border-box;
  background: var(--c-sand); text-decoration: none; white-space: nowrap;
  font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px; line-height: 22px;
  letter-spacing: 1.44px; text-transform: uppercase; color: rgba(0,0,0,.9); }
.sharepop__item:hover { background: var(--c-gold-30); }

/* =====================================================================================
   SHARED FOOTER (opfoot*) — lives in home-v2.css (the base CSS loaded on EVERY v2 page),
   so home-v2 / best-time-v2 / about-us-v2 / our-process-v2 all inherit ONE footer
   definition. Ported from the PROVEN our-process-v2 canary (commit 3365731, approved
   PASS-CANARY): the contact-redesign baked-backdrop footer — a SINGLE baked composite
   img/r1/footer-backdrop*.webp per breakpoint (sky + ONE FITZROY wordmark + dune in ONE
   image), the CORRECT r1 assets (abtot.png white-transparent, payment.png transparent,
   footer-logo.svg), the "receive" typo fix, and a static clean-room form. This is the
   fix for the double-wordmark bug that parked the fresh home-v2 footer. Moved here from
   our-process-v2.css 2026-06-13 (footer rollout) so there is ONE definition site-wide.
   The >1440 __inner cap below is de-scoped (was `.op-page .opfoot__inner`) so it applies
   on EVERY page; the footer bg is full-bleed by design at all widths.
   ===================================================================================== */
/* ============================================================= op-footer (CANARY) — Figma Footer 2
   (432:56551 / 753:128273 / 708:53998). Ports the 0-deviation home-v2 `v2footer` text/logo LAYOUT
   but swaps the multi-layer background (gradient + soft-light watermark.svg + desert + blur) for the
   SINGLE baked composite img/r1/footer-backdrop*.webp per breakpoint (sky + ONE FITZROY wordmark +
   dune baked into ONE image — the verified contact-redesign approach). ONE inset:0 bg-image layer
   (L14: no child img/watermark, so no double wordmark and no off-canvas boxes for responsive.js).
   Vertical rhythm pinned in px (L13 is about HORIZONTAL pinning); horizontal layout is fluid flex.
   Form STATIC (clean-room convention). The baked backdrop is sized `100% auto` at `top center` so
   it renders at the Figma frame scale (desktop 1440x1500 1:1) — the dune + wordmark land at Hugo's
   y, and the content padding-top sits the newsletter on the solid dune. */
/* Footer base: CREAM for the top 4px, orange (#ce844c, the dune fade) below. The orange used to be
   a solid base, and at certain widths a sub-pixel of it bled as a gold hairline at the section->footer
   seam (Paul review: shows at 820, gone at 1024 = classic sub-pixel). Keeping the top cream removes the
   orange from the seam entirely; the desert gap below the backdrop image stays orange. */
.opfoot { position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #f9f5f2 0, #f9f5f2 4px, #ce844c 4px); color: var(--c-sand); }
.opfoot__bg { position: absolute; inset: 0; z-index: 0;
  /* MOBILE backdrop — Hugo amendment 6, 2026-08-04: node 708:54046's single image
     fill (imgProperty1Default), dune + ONE baked FITZROY wordmark in one asset, no separate
     logotype layer (the double-wordmark trap stays closed). Asset is Hugo's true-2x
     800x3400 re-export (2026-08-05); CSS-sized 100% auto so intrinsic size never leaks. */
  background-image: url("../../img/v2/footer-mobile-708.webp?v=2x");
  background-repeat: no-repeat; background-position: top center; background-size: 100% auto;
  background-color: transparent;   /* no orange base here; the .opfoot gradient provides the dune colour in the gap */
}
.opfoot__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  /* Same fault the desktop band hit in July (Hugo QA #5, see the max() at min-width:1280),
     never applied to this band. The backdrop is background-size:100% auto, so the baked
     FITZROY wordmark slides DOWN in step with viewport WIDTH, while this top pad was a fixed
     402px tuned at the 375 design frame. The mobile band runs to 767, so by then the wordmark
     had slid 400px and sat straight on top of the newsletter heading and the name fields
     (Paul, 2026-08-11, at 756: "that footer is fucked").
     Measured from the asset itself (tools/shot/_footgeom.py): footer-mobile-708.webp is
     800x3400 and the wordmark's last row is y=834, so its bottom lands at 834/800 = 1.0425x
     the viewport width. Clearing it by the same 11px the 375 frame has gives 104.25vw + 11px.
     max() keeps every width up to 375 byte-identical; 390 moves down 16px, which takes it
     from a 5px kiss to properly clear. */
  padding: max(402px, calc(104.25vw + 11px)) 24px 0; }

/* Hugo batch2 #9 — PARKED, mobile keeps the baked-photo footer (Paul, 2026-08-01).
   Three faithful builds of the node-660:75046 treatment (gradient + dune blob + vector
   wordmark) were rejected on review: the heavy nominal blur reads as mush on a real
   phone, the file's actual near-sharp render reads as a pasted photo, and the design's
   own dune asset has a second FITZROY baked inside it that shows as cropped ghost
   lettering. The ticket ("soft blurred colour blob, not a photographic dune") and the
   file's render contradict each other, so the item went back to Hugo to re-issue with a
   genuinely blurred layer and a cleaned asset. Rebuild from this comment + the probes in
   tools/shot when the design is resolved; the assets (footer-blob.webp,
   footer-wordmark.svg) stay in img/v2/. */

/* newsletter */
.opfoot__news { margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 28px; line-height: 28px;
  text-align: center; color: var(--c-sand); text-box-trim: trim-both; text-box-edge: cap alphabetic; }

/* form (static) */
.opfoot__form { width: 100%; max-width: 352px; margin-top: 48px; display: flex; flex-direction: column; align-items: stretch; }
.opfoot__names { display: flex; flex-direction: column; gap: 44px; }
.opfoot__field { position: relative; display: block; height: 25px; box-sizing: border-box;   /* node field container = 25 (24 text + underline); was 24, which drifted the whole form stack -1..-2.5px (Hugo QA #5, confirmed vs his CURRENT file 2026-07-22) */
  border-bottom: 1px solid rgba(249, 245, 242, .4); }
.opfoot__field--email { margin-top: 44px; }
.opfoot__label { font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 14px; line-height: 24px;
  color: var(--c-sand); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.opfoot__field .opfoot__label { position: absolute; top: 0; left: 4px; }
.opfoot__field input { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent;
  color: var(--c-sand); font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 14px; padding: 0 4px; }
.opfoot__field input:focus { outline: none; }
.opfoot__check { margin-top: 40px; display: flex; align-items: flex-start; gap: 12px; align-self: center; }
.opfoot__box { flex: 0 0 auto; width: 20px; height: 20px; border: 1px solid rgba(249, 245, 242, .6);
  background: rgba(0, 0, 0, .15); box-sizing: border-box; }
.opfoot__submit { align-self: center; margin-top: 40px; display: inline-flex; align-items: center; justify-content: center;
  gap: 12px; background: #fff; color: rgba(0, 0, 0, .9); border: 0; border-radius: 0; cursor: pointer;
  padding: 18px 26px; font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 14px; line-height: 24px;
  letter-spacing: 1.68px; text-transform: uppercase; }
.opfoot__submit span { text-box-trim: trim-both; text-box-edge: cap alphabetic; }

/* WORKING FORM (2026-08-11). The block above draws Hugo's design; these rules are what it
   takes to be a form rather than a picture of one. Nothing above is changed, so the resting
   state measures exactly as it did — see evidence/newsletter-wiring-2026-08-11.
   The label is a fake placeholder sitting UNDER a transparent full-size input, so typed text
   used to render straight on top of it. Each input now carries placeholder=" ", which makes
   :placeholder-shown false as soon as there is real text, and the label steps out of the way.
   The [placeholder] qualifier matters: an input with NO placeholder attribute is never
   :placeholder-shown, so the bare `input:not(:placeholder-shown)` form of this rule hid the
   label on every field of the old decorative markup. Caught by _footsnap.js mid-change. */
.opfoot__field:has(input[placeholder]:not(:placeholder-shown)) .opfoot__label { opacity: 0; }
.opfoot__field:has(input:focus) { border-bottom-color: var(--c-gold); }
.opfoot__field input::placeholder { color: transparent; }

/* the drawn box is the visual; the real checkbox sits behind it, full size, so the whole
   .opfoot__check label is clickable. Hugo's frame shows the UNCHECKED state only, so the
   checked state is the site's gold fill with a cream tick — flagged to Paul as the one
   thing here that is not from the design. */
.opfoot__check { position: relative; cursor: pointer; }
.opfoot__check input[type="checkbox"] { position: absolute; top: 0; left: 0; width: 20px; height: 20px;
  margin: 0; opacity: 0; cursor: pointer; }
.opfoot__box { position: relative; }
.opfoot__check:has(input:checked) .opfoot__box { background: var(--c-gold); border-color: var(--c-gold); }
.opfoot__check:has(input:checked) .opfoot__box::after { content: ""; position: absolute;
  left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--c-sand);
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.opfoot__check:has(input:focus-visible) .opfoot__box { outline: 2px solid var(--c-gold); outline-offset: 2px; }

.opfoot__submit:disabled { opacity: .6; cursor: default; }
.opfoot__status { align-self: center; margin: 20px 0 0; max-width: 352px; text-align: center;
  font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 14px; line-height: 22px;
  color: var(--c-sand); }
.opfoot__status--error { color: #ffd9d0; }

/* country links — DROPPED on mobile */
.opfoot__countries { display: none; }

/* contact */
.opfoot__contact { width: 100%; margin-top: 48px; display: flex; flex-direction: column; align-items: center; }
.opfoot__contact-col { display: flex; }
.opfoot__contact-col--logo { order: 2; justify-content: center; margin-top: 48px; }
.opfoot__contact-col--details { order: 3; justify-content: center; margin-top: 48px; }
.opfoot__divider { order: 1; width: calc(100% - 24px); height: 1px; background: rgba(249, 245, 242, .3); }
.opfoot__logo { display: block; }
.opfoot__logo img { display: block; width: 200px; height: 135px; }
.opfoot__details { margin: 0; width: 241px; max-width: 100%; font-family: "Roboto Flex", sans-serif; font-weight: 300;
  font-size: 14px; line-height: 24px; color: var(--c-sand); text-align: center; }

/* ABTOT */
.opfoot__abtot { display: block; align-self: center; margin-top: 48px; width: 113px; height: 57px; }   /* node 708:54046: gap 48 (was 58 from the old node); tablet/desktop keep their own 80 below */

/* bottom bar — full-bleed (Hugo's bottom frame is x0 full width with its own 32px inner margin) */
.opfoot__bar { width: calc(100% + 48px); margin: 48px -24px 0; padding: 48px 32px 48px; display: flex;
  flex-direction: column; align-items: center; gap: 40px; }
.opfoot__bar-left { display: contents; }
.opfoot__copy, .opfoot__legal a { font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px;
  line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--c-sand); }
.opfoot__copy { margin: 0; align-self: stretch; text-align: center; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.opfoot__pay { display: block; width: 162px; height: 30px; }
.opfoot__legal { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.opfoot__legal a { text-decoration: none; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.opfoot__countries a, .opfoot__copy, .opfoot__details a, .opfoot__logo { text-decoration: none; }
/* trading disclosure line (2026-08-17): same face and colour as the copyright, sentence case for
   readability, one centred paragraph under the bottom bar at every width */
.opfoot__reg { margin: -16px 0 0; padding: 0 0 40px; max-width: 760px; text-align: center;
  font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px; line-height: 20px;
  letter-spacing: .3px; color: var(--c-sand); opacity: .85; }

/* ---------- op-footer TABLET (1024) — its own baked backdrop (2048x3304 = 1024x1652 frame) ---------- */
@media (min-width: 768px) {
  .opfoot__bg { background-image: url("../../img/r1/footer-backdrop-tablet.webp"); }
  .opfoot__inner { padding: 542px 32px 0; }
  .opfoot__form { max-width: 456px; margin-top: 57px; }
  .opfoot__names { flex-direction: row; gap: 16px; }
  .opfoot__names .opfoot__field { flex: 1 1 0; min-width: 0; }
  .opfoot__field--email { margin-top: 35px; }
  .opfoot__check { margin-top: 35px; align-self: center; }
  .opfoot__submit { margin-top: 48px; }

  /* country row reappears, centred — Hugo's row IS centred so gap:40 reproduces every x */
  .opfoot__countries { width: 100%; margin-top: 88px; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
  .opfoot__countries a { font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 16px; line-height: 26px;
    letter-spacing: 1.92px; text-transform: uppercase; color: var(--c-sand); margin-right: -1.3px;
    text-box-trim: trim-both; text-box-edge: cap alphabetic; }

  /* contact: horizontal logo | divider | details, divider at frame centre */
  .opfoot__contact { margin-top: 74px; flex-direction: row; align-items: center; justify-content: center; }
  .opfoot__contact-col { flex: 1 1 0; min-width: 0; align-items: center; }
  .opfoot__contact-col--logo { order: 1; justify-content: flex-end; padding-right: 48px; margin-top: 0; }
  .opfoot__contact-col--details { order: 3; justify-content: flex-start; padding-left: 48px; margin-top: 0; }
  .opfoot__divider { order: 2; width: 1px; height: 213px; flex: 0 0 auto; }
  .opfoot__details { text-align: left; }

  .opfoot__abtot { margin-top: 80px; }

  /* bottom bar: stacked centred (copyright, payment, legal-row) */
  .opfoot__bar { width: 100%; margin: 54px 0 0; padding: 48px 0 48px; gap: 40px;
    border-top: 1px solid rgba(249, 245, 242, .3); }
  .opfoot__legal { flex-direction: row; gap: 24px; }
}

/* ---------- op-footer DESKTOP (1440) — sharp baked backdrop (2880x3000 = 1440x1500 frame, 1:1) ---------- */
@media (min-width: 1280px) {
  .opfoot__bg { background-image: url("../../img/r1/footer-backdrop.webp"); }
  /* Hugo QA #5 stopgap (2026-07-21): the backdrop is baked at 1440x1500 and scales 100vw wide, so
     above 1440 the FITZROY wordmark + dune slide DOWN in the viewport; with a fixed 542px pad the
     wordmark collided with the newsletter heading (clearly visible at 1920). Scaling the top pad
     with the image (542/1440 = 37.6389vw) keeps the content in the designed position relative to
     the sky/wordmark/dune at every width; max() leaves everything <=1440 byte-identical. The
     proper >1440 footer art direction stays an open question for Hugo (H1 family). */
  .opfoot__inner { padding: max(542px, 37.6389vw) 32px 0; }
  .opfoot__form { margin-top: 57px; }
  .opfoot__field--email { margin-top: 34px; }
  .opfoot__check { margin-top: 34px; }
  .opfoot__label { font-size: 16px; line-height: 26px; }
  .opfoot__submit { margin-top: 48px; }

  .opfoot__countries { margin-top: 88px; gap: 40px; }
  .opfoot__countries a { font-size: 18px; line-height: 28px; letter-spacing: 2.16px; margin-right: -1.3px; }

  .opfoot__contact { margin-top: 72px; }   /* node: countries bottom 952 -> contact 1024 = 72; was 75, compensating the old 24px field-height drift (Hugo QA #5, confirmed vs Hugo's current file) */
  .opfoot__details { font-size: 16px; line-height: 26px; }
  .opfoot__abtot { margin-top: 80px; }

  /* bottom bar: row, space-between (copyright+payment left, legal right) */
  .opfoot__bar { width: 100%; margin: 48px 0 0; flex-direction: row; justify-content: space-between; align-items: center;
    padding: 24px 0; border-top: 1px solid rgba(249, 245, 242, .3); gap: 24px; }
  .opfoot__copy { align-self: center; }
  .opfoot__bar-left { display: flex; flex-direction: row; align-items: center; gap: 32px; }
  .opfoot__legal { flex-direction: row; gap: 20px; }
  .opfoot__legal a { margin-right: -1.8px; }
  .opfoot__reg { margin-top: 0; padding-bottom: 28px; }
}

/* >1440 RULE (LESSONS L5) for the shared footer: the baked backdrop (.opfoot__bg, inset:0
   on the width:100% section, background-size:100% auto) is full-bleed edge-to-edge at any
   width — the dune + the SINGLE baked wordmark scale up with the viewport on ultrawide
   (accepted, same as the contact page, parked-for-Hugo like nav/hero; do NOT add a second
   wordmark to fix it). The CONTENT (.opfoot__inner) is capped+centred to the 1440 design
   column so it does not stretch. De-scoped from `.op-page` so it applies on every v2 page. */
@media (min-width: 1441px) {
  .opfoot__inner { max-width: 1440px; margin-left: auto; margin-right: auto; }
}

/* >1440 CONTENT CONTAINMENT (LESSONS L5, Paul 2026-06-15): full-bleed section BACKGROUNDS,
   content held in a centred 1440 column. Back-ported from best-time (.bt-page) to the homepage.
   Each flat-bg content section keeps its desktop side padding INSIDE a centred 1440 frame via
   symmetric calc padding, so the bg stays edge-to-edge and the content stops growing past 1440.
   Scoped to .home-v2 so other pages' shared classes are untouched. Nav + hero stay parked (H1). */
@media (min-width: 1441px) {
  /* .v2why2 is homepage-ONLY, so it stays scoped here. .v2quote + .v2whyd are SHARED
     (quote: home/destination-hub/our-process; why-choose-dark: home/destination-hub),
     so their >1440 containment moved to the unscoped base block below (L26). */
  .home-v2 .v2why2     { padding-left: calc((100% - 1440px)/2 + 104px); padding-right: calc((100% - 1440px)/2 + 104px); }
}

/* >1440 CONTAINMENT FOR THE SHARED our-approach COMPONENT — UNSCOPED ON PURPOSE.
   This lives on the BASE .v2approach so EVERY page that reuses the component gets it
   automatically (Paul, 2026-06-16: "that is the way pages will be built"). Do NOT
   re-add a per-page copy. Above 1440 the flex row (text 464 + gap 104 + image 664 =
   1232) would grow unbounded and stretch the image too wide; growing the section side
   padding symmetrically keeps the inner at 1232 centred and caps the image at 664,
   while the cream section background stays full-bleed. home-v2.css is loaded on every
   v2 page, and every approach section carries the .v2approach class, so this reaches
   all of them. (LESSONS L5 + L26.) */
@media (min-width: 1441px) {
  .v2approach { padding-left: calc((100% - 1440px)/2 + 104px); padding-right: calc((100% - 1440px)/2 + 104px); }
  /* SHARED big-quote (.v2quote: home/destination-hub/our-process) and why-choose-dark
     (.v2whyd: home/destination-hub) — contained on the BASE so they are consistent on
     every page that reuses them (Paul, 2026-06-16). The quote keeps its asymmetric design
     padding (145/136); why-choose-dark uses 104/104. (L26.) */
  .v2quote    { padding-left: calc((100% - 1440px)/2 + 145px); padding-right: calc((100% - 1440px)/2 + 136px); }
  .v2whyd     { padding-left: calc((100% - 1440px)/2 + 104px); padding-right: calc((100% - 1440px)/2 + 104px); }
}

/* how-it-works accordion — interactive open/closed states (interactivity phase, Paul 2026-06-16).
   The shared engine (home-v2.js) toggles .is-open on each .v2hiw__item, animates .v2hiw__body
   max-height and rotates the chevron; these rules drive the number/title appearance off .is-open. */
.v2hiw__item { display: flex; flex-direction: column; }
.v2hiw__bar { width: 100%; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.v2hiw__line { margin-bottom: 20px; }
.v2hiw__num { display: none; }
.v2hiw__item.is-open .v2hiw__num { display: inline-flex; }
.v2hiw__t { color: rgba(255,255,255,.6); transition: color .2s ease; }
.v2hiw__item.is-open .v2hiw__t { color: #fff; }
.v2hiw__item.is-open .v2hiw__body { padding-top: 20px; }

/* Fixed CTA banner — Hugo's mobile/tablet sticky bottom bar (Figma 786:102165 / 786:101929).
   Two gold buttons (Contact Us + phone). Injected by the engine; hidden on desktop. */
.v2cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; gap: 8px;
  padding: 12px 16px; background: #15292c; }
@media (min-width: 1280px) { .v2cta { display: none; } }
.v2cta__btn { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;
  gap: 8px; height: 48px; background: var(--c-gold); color: #f9f5f2;
  font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; }
.v2cta__btn .ic { width: 16px; height: 16px; color: #f9f5f2; flex: none; }   /* node icon = 16x16 (786:102168 base-buttons) */

/* Desktop nav dropdown panels — REBUILT to Hugo's real designs (QA 2026-07-31 item 2,
   replacing the teal approximation from Q-NAV-1 days).
   Destinations = "Drop-down-menu" 1075:122645 (hover) / 1075:126109 (default): 620x294,
   drop shadow 0 4 4 rgba(0,0,0,.2); LEFT 310 = sand #f9f5f2 list, padding 40, row gap 24,
   rows Roboto Flex 400 14/24 +1.68 uppercase black/80; hovered row gold + 14x10 double-arrow
   right; RIGHT 310x294 = image panel, white bg, 4px sand border, cover image that crossfades
   to the hovered country's live page hero (default = the node's own planning photo,
   img/v2/navdd-default.webp).
   Ideas & Inspiration = 1075:129620/1075:129612: 310-wide sand text panel only, same rows.
   TRIGGER (item 1, all breakpoints): only the chevron arrow opens a panel — .v2dd-arrow is
   the sole trigger with a 16px invisible hit ring (padding 16 / margin -16); the item TEXT
   is a plain link to its hub page. Panels are appended to the NAV element (its positioned
   box = the bar in both natural and pinned states) so top:100% sits flush under the bar;
   JS centres each panel under its item and closes on a 200ms grace timer, Esc, or outside
   click. 300ms ease-in-out = the established easing. */
.v2dd-wrap { position: static; display: inline-flex; align-items: center; gap: 10px; }
.v2dd-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  padding: 16px; margin: -16px;              /* the 16px hit ring, no visual footprint */
  color: inherit;
}
.v2dd-arrow svg { width: 8px; height: 4px; display: block; fill: none; stroke: currentColor; stroke-width: 1.2px; }
/* the arrow inherits each nav variant's link colour (and crossfades with the Light swap) */
.btnav__links .v2dd-arrow { color: rgba(0,0,0,.9); }
.v2nav__links .v2dd-arrow { color: #fff; transition: color .3s ease-in-out; }
.v2nav.is-light .v2nav__links .v2dd-arrow { color: rgba(0,0,0,.9); }
.aunav__links .v2dd-arrow { color: var(--c-gold); transition: color .3s ease-in-out; }
.aunav.is-light .aunav__links .v2dd-arrow { color: rgba(0,0,0,.9); }
.v2dd {
  position: absolute; top: calc(100% + 1px); z-index: 60;   /* +1: sit below the bar's 1px rule */
  display: flex; align-items: stretch;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.2));
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out, visibility .3s ease-in-out;
}
.v2dd.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
/* desktop-only: below 1280 the bar links are hidden (burger world) but the invisible
   620px panel boxes still create document overflow — remove them from layout entirely */
@media (max-width: 1279.98px) { .v2dd, .v2dd-arrow { display: none; } }
.v2dd__list {
  box-sizing: border-box; width: 310px; background: #f9f5f2; padding: 40px;
  display: flex; flex-direction: column; gap: 24px; justify-content: center;
}
.v2dd__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: rgba(0,0,0,.8); font-family: "Roboto Flex", sans-serif; font-weight: 400;
  font-size: 14px; line-height: 24px; letter-spacing: 1.68px; text-transform: uppercase;
  white-space: nowrap; text-decoration: none; transition: color .3s ease-in-out;
}
/* the node's 294 height = 40 pad + 7 CAP-TRIMMED rows (~10px) + 6x24 gaps + 40 pad —
   without the trim the list runs 392 and the image panel misaligns */
.v2dd__list a span { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2dd__list a .v2dd__arrows { width: 14px; height: 10px; flex: none; fill: none; stroke: #b19f70;
  stroke-width: 1.4px; opacity: 0; transition: opacity .3s ease-in-out; }
.v2dd__list a:hover, .v2dd__list a:focus-visible { color: #b19f70; }
.v2dd__list a:hover .v2dd__arrows, .v2dd__list a:focus-visible .v2dd__arrows { opacity: 1; }
.v2dd__media {
  position: relative; box-sizing: border-box; width: 310px; height: 294px;
  background: #fff; border: 4px solid #f9f5f2; overflow: hidden;
}
.v2dd__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2dd__img--hover { opacity: 0; transition: opacity .3s ease-in-out; }
.v2dd__img--hover.is-showing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .v2dd, .v2dd__list a, .v2dd__arrows, .v2dd__img--hover { transition: none !important; } }

/* INLINE PULL-QUOTE — STRUCTURAL (Paul 2026-06-29). A bare <blockquote> embedded in a v2 body-copy
   wysiwyg is the pull-quote scroll-stopper; it must be Bebas, not the body font. It was styled per
   container (.armain__desc blockquote, area-v2.css), so a bare quote in a container WITHOUT that rule
   (the read-more .arexp__text / .deexp__text) fell back to Roboto Flex (Ndali Lodge read-more). Styling
   the UNCLASSED blockquote across every v2 body container (__desc / __text) here in the always-loaded
   base makes it permanent: a new body container can never miss it. Structured quotes carry their own
   class (.arexp__quote, .deexp__quote, .v2quote__*, .lomain__quote) and are excluded by :not([class]). */
[class*="__desc"] blockquote:not([class]),
[class*="__text"] blockquote:not([class]) { margin: 30px 0; max-width: 432px; }
/* tablet band: the stacked single column runs ~700px wide while the quote stayed capped at
   the 432px desktop-column width, cramped against the left edge with dead space beside it
   (Paul 2026-07-11, Legendary Lodge at iPad width). Give it the column's measure at tablet
   only; desktop (two columns) and phone keep the design values. Lives HERE with the
   structural quote rule it modifies - one home, matching specificity. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  [class*="__desc"] blockquote:not([class]),
  [class*="__text"] blockquote:not([class]) { max-width: 600px; }
}
[class*="__desc"] blockquote:not([class]) :is(p, span),
[class*="__text"] blockquote:not([class]) :is(p, span) { margin: 0; font-family: "Bebas Neue", sans-serif;
  font-weight: 400; font-size: 36px; line-height: 40px; letter-spacing: 0; color: #000; text-transform: none; }
[class*="__desc"] blockquote:not([class])::before,
[class*="__text"] blockquote:not([class])::before { content: ""; display: block; width: 16px; height: 14px;
  margin-bottom: 10px; background: #b19f70;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2014'%3E%3Cpath%20d='M0%200L6.89231%200L5.23077%2014L1.6%2014L0%200ZM9.10769%200L16%200L14.3385%2014L10.7077%2014L9.10769%200Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2014'%3E%3Cpath%20d='M0%200L6.89231%200L5.23077%2014L1.6%2014L0%200ZM9.10769%200L16%200L14.3385%2014L10.7077%2014L9.10769%200Z'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ============================================================================
   v2fold — viewport-fit subpage hero, SITE-WIDE (Hugo + Paul, canaried on the
   Tanzania migration trip then approved 2026-07-12). Wraps nav + subpage-hero
   on every template that carries the photo+info-column header (arhero/bthero
   families incl. dehero/lohero/tthero/ldhero/ophero/dhhero/ihhero variants).
   DESKTOP (>=1280) ONLY:
   - the fold is exactly one viewport tall with a 24px clear bottom, so the
     image visibly ends above the window edge (no false floor);
   - the nav is measured by the layout itself (a hardcoded 82px overshot on
     machines whose nav renders taller);
   - the photos' tablet aspect-ratios are neutralised inside the fold (a
     width-proportional height floor overflowed short viewports, the
     1920x900 bug); photos stretch to the row and cover-crop;
   - min-height:auto keeps content the floor: a very short window scrolls,
     never clips. body.admin-bar compensates for the WP toolbar.
   >=1441 the info panel is 30% of the viewport (image 70%), per Hugo.
   Tablet/mobile: no rules below 1280 — block layout, fully unchanged.
   Selectors are body-prefixed so they outrank the per-page 520px/aspect
   re-assertions (e.g. .lodge-page) regardless of stylesheet order.
   ============================================================================ */
@media (min-width: 1280px) {
  body .v2fold { display: flex; flex-direction: column; box-sizing: border-box;
    min-height: 100vh; min-height: 100svh; padding-bottom: 24px; background: #fff; }
  body .v2fold > .btnav { flex: 0 0 auto; }
  body .v2fold > .arhero, body .v2fold > .bthero { flex: 1 1 auto; min-height: auto; }
  body .v2fold > .arhero .arhero__photo, body .v2fold > .bthero .bthero__photo { aspect-ratio: auto; }
  body.admin-bar .v2fold { min-height: calc(100vh - 32px); min-height: calc(100svh - 32px); }
}
@media (min-width: 1441px) {
  body .v2fold > .arhero .arhero__panel, body .v2fold > .bthero .bthero__panel { flex: 0 0 30%; }
}

/* ===================== FIXED CTA BANNER (Hugo annotation B12, 2026-07-22) ===================== */
/* base = mobile node 786:102168: full-width fixed bar, 78 tall (16 padding + 42 buttons + slack,
   centred), backdrop blur 30, gap 8. Tablet (>=768) = node 786:101932: floating centred 600px bar,
   bottom 16, no padding, blur 15. Hidden >=1280: the design has NO desktop frame for this
   (annotation "Updated 'fixed' CTA banner" sits on the tablet/mobile homepage frames only).
   z 40: above page content, below the menu overlay (z 50). Safe-area padding for iOS bars. */
.v2cta {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 40;
  width: 100%; min-height: 78px; box-sizing: border-box;
  padding: 16px; padding-bottom: max(16px, calc(16px + env(safe-area-inset-bottom, 0px)));
  display: flex; align-items: center; gap: 8px;
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  pointer-events: none;   /* Hugo amendment 7, 2026-08-04: the bar must not swallow taps on
    content scrolled behind it (carousel arrows etc); only the buttons themselves are tappable */
}
.v2cta__btn {
  pointer-events: auto;   /* Hugo amendment 7: the CTAs stay fully tappable */
  flex: 1 1 0; min-width: 1px; height: 42px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 26px;
  background: var(--c-gold); border: 1px solid rgba(255,255,255,.3);
  font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px; line-height: 22px;
  letter-spacing: 1.44px; text-transform: uppercase; color: var(--c-sand);
  white-space: nowrap; text-decoration: none;
}
.v2cta__btn span { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.v2cta__btn .ic { width: 16px; height: 16px; color: var(--c-sand); flex: none; }
/* TABLET REMOVED (Hugo QA 2026-07-31 item 5, superseding the earlier "wanted for launch"
   decision, which now applies to MOBILE ONLY): the fixed CTA banner renders below 768 only.
   Desktop never had it; the old >=768 floating-600px restyle is retired with the change. */
@media (min-width: 768px) { .v2cta { display: none; } }

/* ---------------------------------------------------------------------------
   .arhero__strip — native scroll-snap photo strip (canary 2026-08-15, rolled
   out same day). Serves the lodge hero, the trip hero and the daily galleries;
   wired by wireStrip()/setupHeroStrip() in home-v2.js. The old pattern swapped
   img.src on touch RELEASE: nothing moved under the finger and the next photo
   only started downloading at that moment. The strip hands the gesture to the
   browser's own scroll physics (1:1 finger tracking, momentum, mandatory snap)
   and JS hydrates neighbouring slides ahead of use. Overlays (arrows, "more
   photos", captions) sit later in the DOM, so they still paint on top.
   --------------------------------------------------------------------------- */
.arhero__strip { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; }
.arhero__strip::-webkit-scrollbar { display: none; }
.arhero__slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always;
  background: #0a1416; /* the lightbox backdrop tone — only ever visible for a frame if a swipe outruns hydration */ }

/* Cross-page transitions (Paul approved 2026-08-15): browsers that support cross-document
   view transitions (Chrome/Edge, newer Safari) get a subtle crossfade between pages instead
   of a white flash; everything else ignores this entirely. The global reduced-motion rule in
   reset.css flattens the transition's pseudo-element animations, so motion-sensitive visitors
   effectively skip it. */
@view-transition { navigation: auto; }