/* ===========================================================================
   area-v2.css — page-unique styles for the clean-room /area-v2/ build
   (WP6 Area, Figma 235:119656 desktop / 755:112260 tablet / 710:111716 mobile,
   1440x9153). FULLY designed at all 3 breakpoints, so every section gates at all 3.

   Reuse (defined elsewhere, loaded ahead via the clean-room allow-list — do NOT
   redefine here, only override/hook):
     - .btnav / .bthero / .btseasonal  -> best-time-v2.css
     - .v2reviews / .v2approach        -> home-v2.css

   NEW page-unique sections (built here, namespaced ar*):
     - ar-maincontent (.armain)  : two stacked basic-text-and-image instances
                                   (alternating) + breadcrumbs over a faint topo bg.
     - ar-carousel1 / ar-carousel2 (.arcarousel) : simple-carousel-1 — text panel +
                                   horizontal card carousel + progress bar + arrows.
                                   ONE shared class; static scroll-snap default state.
     - ar-furtherinfo (.arfurther) : a 3-card further-information row.

   >1440 RULE (LESSONS L5): full-bleed BACKGROUNDS, content centred <=1440. ONE
   `@media (min-width:1441px)` block scoped under `.ar-page` (mirrors `.au-page` /
   `.op-page` / `.bt-page`). nav + hero PARKED for Hugo (H1) re wide-screen behaviour.
   =========================================================================== */

/* Page base font — set up-front so reused components (e.g. the .v2btn--gold label)
   do not fall back to Times New Roman. Mirrors body.home-v2 / body.best-time-v2 /
   body.our-process-v2 / body.about-us-v2; the op-approach gate caught this exact base. */
body.area-v2 {
  font-family: "Roboto Flex", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===========================================================================
   ar-hero — subpage-hero-1, FULL component (real Area content). Two-column on
   desktop (photo LEFT 920 / cream panel RIGHT 520), stacked photo-on-top on
   tablet/mobile. Fresh classes (richer than .bthero: fact panel + share + gallery).
   PHOTO = CSS bg-image (L14). Fluid per the Cardinal Rule. =================== */
.arhero { display: flex; flex-direction: column; background: #fff; overflow: hidden; }

/* photo (mobile: full-width square on top) */
.arhero__photo { position: relative; width: 100%; aspect-ratio: 400 / 400; flex: none;
  background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Area demo photos are DEMO-PAGE-ONLY (live pages inline-style their own image; unscoped these
   painted under real images while they downloaded - the wrong-lodge flash, 2026-07-08). */
.page-template-page-area-v2 .arhero__photo { background-image: url('../../img/v2/arhero-mobile.webp'); }
/* image caption (bottom-left over a darkening gradient) */
.arhero__caption { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; padding: 24px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%);
  font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 12px; line-height: 16px;
  color: rgba(255,255,255,.8); }
.arhero__pin { width: 14px; height: 14px; fill: #b19f70; flex: none; }
/* gallery UI (arrows + more photos) sits at the bottom of the photo on desktop; hidden on mobile/tablet
   stacked frames carry their own — render it desktop-only to avoid clutter, flagged static */
.arhero__gallery { display: none; }
.arhero__arrows { display: inline-flex; gap: 0; }
.arhero__arrow { width: 42px; height: 42px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.10); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center; }
.arhero__arrow + .arhero__arrow { border-left: none; }
/* batch2 #2 follow-up (Paul review 2026-08-01): these hero photo arrows swapped to the shared
   Arrow glyph with the rest, but this class never got the icon sizing or the prev rotation,
   so both arrows rendered oversized pointing right. White via currentColor (photo controls). */
.arhero__arrow .ic { width: 15px; height: 11px; fill: none; }
.arhero__arrow[aria-label^="Previous"] .ic { transform: rotate(180deg); }
/* more photos = WHITE filled button, dark uppercase label */
.arhero__more { display: inline-flex; align-items: center; height: 42px; box-sizing: border-box;
  padding: 0 22px; background: #fff; 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);
  text-decoration: none; }

.arhero__panel { flex: 1 1 auto; min-width: 0; box-sizing: border-box; background: #f9f5f2; }
.arhero__inner { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start;
  padding: 46px 24px 64px; }
.arhero__eyebrow { 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: #b19f70;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.arhero__title { margin: 28px 0 0; font-family: "Bebas Neue", sans-serif; font-weight: 400;
  font-size: 46px; line-height: 44px; letter-spacing: 0; color: #000; text-transform: uppercase;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.arhero__body { margin: 24px 0 0; font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 16px;
  line-height: 26px; letter-spacing: 0; color: rgba(0,0,0,.8); align-self: stretch;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
/* fact panel: faint #000@0.07 divider lines above each stat + below the last (Figma Vector 18-21, L19;
   Paul 2026-06-16). The gate only checks the stats' x, so the missing dividers + their 16px spacing went
   uncaught. cap-trim so the line<->text gaps are a clean 16px. */
.arhero__facts { margin: 16px 0 0; display: flex; flex-direction: column; gap: 0; align-self: stretch;
  border-top: 1px solid rgba(0,0,0,.07); }
.arhero__fact { font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 16px;
  line-height: 26px; letter-spacing: 0; color: #000;
  padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,.07);
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.arhero__fact:nth-child(2), .arhero__fact:nth-child(3) { line-height: 28px; }
.arhero__share { margin: 24px 0 0; display: inline-flex; align-items: stretch; text-decoration: none; }
/* two bordered cells: [icon box 42] [label box], each 1px #000 @0.20 border (L19 frame strokes) */
.arhero__share-icbox { display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.20); }
.arhero__share-ic { width: 24px; height: 24px; fill: none; stroke: #b19f70; stroke-width: 1.4px;
  color: #b19f70; }
.arhero__share-labelbox { display: inline-flex; align-items: center; box-sizing: border-box;
  height: 42px; padding: 0 16px; border: 1px solid rgba(0,0,0,.20); border-left: none; }
/* Hugo batch2 #14: style the label by its BOX, not by [data-key] — the live templates emit a
   plain span (no data-key), which left the label unstyled lowercase (seen on /zimbabwe/).
   Uppercase comes from CSS, never from how the source copy is typed. */
.arhero__share-labelbox span { 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);
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }

/* TABLET (>=768): stacked, photo on top (1024-wide region), pad-x 160. */
@media (min-width: 768px) {
  .arhero__photo { aspect-ratio: 1024 / 824; }
  .page-template-page-area-v2 .arhero__photo { background-image: url('../../img/v2/arhero-tablet.webp'); }
  .arhero__inner { padding: 88px 160px 80px; }
  .arhero__title { font-size: 58px; line-height: 54px; }
}

/* DESKTOP (>=1280): two-column, photo LEFT 920 / cream panel RIGHT 520. */
@media (min-width: 1280px) {
  .arhero { flex-direction: row; align-items: stretch; min-height: 740px; }
  .arhero__photo { flex: 1 1 920px; width: auto; aspect-ratio: auto; align-self: stretch; }
  .page-template-page-area-v2 .arhero__photo { background-image: url('../../img/v2/arhero-desktop.webp'); }   /* grow into extra width on wide screens — the landscape hero takes the space (Paul 2026-06-18; >1440 was undecided by Hugo) */
  .arhero__gallery { display: flex; align-items: center; justify-content: space-between; position: absolute;
    left: 32px; bottom: 32px; right: 32px; }
  .arhero__panel { flex: 0 0 520px; display: flex; flex-direction: column; justify-content: center; }   /* fixed: all extra width goes to the photo, not the panel */
  .arhero__inner { padding: 0 80px 0 64px; }
  .arhero__title { font-size: 62px; line-height: 58px; }
}

/* ===== ar-besttime — reuse .btseasonal (best-time-v2.css); one colour override:
   the Area "see more detail" link is pure #fff (Hugo), not the cream the bt-seasonal
   "see a month..." link uses. Scoped to .arbesttime so /best-time-v2/ is untouched. */
.arbesttime .btseasonal__moretxt { color: #ffffff; }

/* ===========================================================================
   >1440 RULE (LESSONS L5): full-bleed BACKGROUNDS, content centred <=1440.
   Scoped under .ar-page so the shared .v2approach (also on /home-v2/) is untouched.
   nav + hero PARKED for Hugo (H1) — not included. =========================== */
@media (min-width: 1441px) {
  /* ar-approach (.v2approach .arapproach): cream/sand bg full-bleed (on the section). The
     text + square-image flex ROW grows unbounded above 1440 (text far-left, image far-right).
     Pin the CONTENT row to a centred 1440 column via symmetric side padding: inner width =
     1440 - 2*104 = 1232 = text 464 + gap 104 + image 664 (exact). Mirrors op/au-approach L5. */
  .ar-page .arapproach {
    padding-left: calc((100% - 1440px) / 2 + 104px);
    padding-right: calc((100% - 1440px) / 2 + 104px);
  }
}

/* ===========================================================================
   ar-maincontent (.armain) — Main Container: 2 stacked basic-text-and-image
   instances (alternating) + breadcrumbs, over a faint topo bg @0.05. The
   op-maincontent / au-commitment bti method, rebuilt fresh (area does not load
   our-process-v2.css). Fluid per the Cardinal Rule. ========================= */
.armain { position: relative; background: #fff; overflow: hidden; }
/* topo texture, full-bleed, faint */
.armain__topo { position: absolute; inset: 0; z-index: 0;
  background-image: url('../../img/v2/opmain-topo.webp');
  background-repeat: repeat; background-size: 1440px auto; opacity: .03; pointer-events: none; }   /* fainter to match the design (Figma topo @0.05 but a lighter texture; this inverted-black tile reads stronger) — Paul 2026-06-16 */
.armain__inner { position: relative; z-index: 1; box-sizing: border-box; max-width: 1440px;
  margin: 0 auto; padding: 56px 24px 64px; }

/* breadcrumbs */
.armain__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px; line-height: 22px;
  letter-spacing: 1.44px; text-transform: uppercase; }
.armain__crumbs a { color: rgba(0,0,0,.30); text-decoration: none; }
.armain__crumb-cur { color: rgba(0,0,0,.60); }
.armain__sep { color: rgba(0,0,0,.30); }

/* bti block — base (mobile): stacked, image on top */
.armain__bti { display: flex; flex-direction: column; gap: 32px; margin-top: 48px; }
.armain__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.armain__kicker { margin: 0 0 16px; 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; }
.armain__title { margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 40px;
  line-height: 42px; letter-spacing: 0; color: rgba(0,0,0,.8); text-transform: none;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.armain__title--sm { font-size: 32px; line-height: 36px; }
.armain__desc { margin: 20px 0 0; font-family: "Roboto Flex", sans-serif; font-weight: 300;
  font-size: 16px; line-height: 28px; letter-spacing: 0; color: rgba(0,0,0,.9);
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.armain__title + .armain__desc { margin-top: 56px; }   /* design itemSpacing title->body = 56 (Paul: too tight) */
/* paragraph spacing inside the body copy. reset.css zeroes every <p> margin, and the writer emits
   multi-<p> bodies, so without this the paragraphs butt together (Paul caught it 2026-06-19). Scoped
   to consecutive paragraphs so it never double-spaces the lodge body-2 <blockquote> (which keeps its
   own .lomain__text2 margin). 1.5em scales with the responsive 16->18px font (24px base / 27px desktop,
   matching the read-more .arexp__text gap). Applies to lodge + area + destination (shared component). */
.armain__desc p + p { margin-top: 1.5em; }
/* main-body pull-quote written inline in a main_body wysiwyg as a <blockquote> (scroll-stopper pulled
   from the copy, Paul). Matches the design's .lomain__quote: Bebas 36/40 black + gold quotemark.
   GENERALISED 2026-06-19 from .lomain__text2 (lodge body-2 only) to any .armain__desc blockquote, so
   the AREA + DESTINATION main sections get the same styled pull-quote (Paul: "a pull quote on each
   section"). Shared across lodge + area + destination. Here in area-v2.css = the stylesheet they load. */
.armain__desc blockquote { margin: 30px 0; max-width: 432px; }
.armain__desc blockquote p,
.armain__desc blockquote 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; }
.armain__desc blockquote::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; }
.armain__btn { margin: 28px 0 0; display: inline-flex; align-items: center; height: 46px;
  padding: 0 26px; background: #b19f70; font-family: "Roboto Flex", sans-serif; font-weight: 400;
  font-size: 14px; line-height: 24px; letter-spacing: 1.68px; text-transform: uppercase;
  color: #f9f5f2; text-decoration: none; }
/* square photos (CSS bg, L14) */
.armain__img { position: relative; width: 100%; aspect-ratio: 1 / 1; margin: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.page-template-page-area-v2 .armain__img--1 { background-image: url('../../img/v2/armain-img1.webp'); }
.page-template-page-area-v2 .armain__img--2 { background-image: url('../../img/v2/armain-img2.webp'); }
.armain__cap { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; padding: 24px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%);
  font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 12px; line-height: 16px;
  color: rgba(255,255,255,.8); }
.armain__pin { width: 14px; height: 14px; fill: #b19f70; flex: none; }

/* TABLET (>=768): wider padding, still stacked image-on-top */
@media (min-width: 768px) {
  .armain__inner { padding: 64px 160px 80px; }
  .armain__title { font-size: 50px; line-height: 50px; }
}

/* DESKTOP (>=1280): two-column bti, base 1232 = 464 + gap104 + 664 */
@media (min-width: 1280px) {
  .armain__inner { padding: 56px 104px 80px; }
  .armain__bti { flex-direction: row; align-items: center; gap: 104px; }   /* text vertically CENTRED beside the image (Paul: copy sits equally over/under, design counterAxisAlignItems=CENTER) */
  .armain__bti--textleft { margin-top: 122px; }
  .armain__bti--imgleft { margin-top: 200px; }
  .armain__bti--imgleft { flex-direction: row; }
  .armain__text { flex: 1 1 464px; min-width: 0; }
  .armain__img { flex: 0 1 664px; width: auto; align-self: center; }
  .armain__title { font-size: 50px; line-height: 50px; }
  .armain__title--sm { font-size: 36px; line-height: 40px; }
  .armain__desc { font-size: 18px; line-height: 30px; }
}

/* ===========================================================================
   ar-carousel1 / ar-carousel2 (.arcar) — simple-carousel-1: text panel LEFT +
   horizontal card carousel RIGHT + up/down arrows + progress bar. STATIC default
   state (clean-room). Shared class; carousel2 reuses it. Fluid. ============= */
.arcar { background: #fff; overflow: hidden; }
.arcar__inner { box-sizing: border-box; max-width: 1440px; margin: 0 auto; padding: 56px 24px 64px;
  display: flex; flex-direction: column; gap: 40px; }
/* text panel */
.arcar__panel { flex: none; max-width: 357px; }
.arcar__title { margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 36px;
  line-height: 38px; letter-spacing: 0; color: #000; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.arcar__desc { margin: 24px 0 0; font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 16px;
  line-height: 26px; color: #000; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
/* stage = arrows + track + progress */
.arcar__stage { position: relative; }
.arcar__arrows { display: none; }
.arcar__arrow { width: 52px; height: 52px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.2);
  background: #fff; color: rgba(0,0,0,.7); font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
/* Hugo batch2 #2: the shared Arrow asset (gold chevrons, 14.85x10.85) replaces the &#171;/&#187;
   text glyphs; Back = rotated 180. Glyph gold in every variant per the component set. */
.arcar__arrow .ic { width: 15px; height: 11px; color: var(--c-gold); fill: none; }
.arcar__arrow[aria-label^="Previous"] .ic { transform: rotate(180deg); }
/* card track — horizontal scroll-snap row (overflow whitelisted in responsive.js) */
.arcar__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.arcar__track::-webkit-scrollbar { display: none; }
.arcar__track { scrollbar-width: none; }
.arcar__card { position: relative; flex: 0 0 280px; aspect-ratio: 340 / 572; scroll-snap-align: start;
  background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; }
.arcar__card::after { content: ""; position: absolute; inset: 0; background-color: transparent;
  background-image: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%); }
.arcar__num { position: absolute; top: 24px; left: 24px; z-index: 1; font-family: "Roboto Flex", sans-serif;
  font-weight: 400; font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase;
  color: rgba(255,255,255,.8); }
.arcar__cardtext { position: absolute; left: 32px; right: 24px; bottom: 24px; z-index: 1;
  display: flex; flex-direction: column; }
.arcar__cardkicker { margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px;
  line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; color: rgba(255,255,255,.8); }
.arcar__cardtitle { margin: 6px 0 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 28px;
  line-height: 28px; letter-spacing: 0; color: #f9f5f2; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.arcar__cardsub { margin: 10px 0 0; font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px;
  line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; color: rgba(255,255,255,.8); }
/* country-map hover overlay (agreed on a call; restored from the live site). The gold country SVG
   fades in over a darkened photo on hover and carries its own pulse animation. */
/* Explicit box + object-fit contain (2026-07-13): several map svgs (e.g. Botswana) carry only a
   viewBox with no width/height attributes, so `width:auto` collapsed the img to 0 width = the
   hover map was INVISIBLE on those countries; wide-aspect maps also overran max-width and
   distorted. The contained box fixes both, ratio preserved, no other behaviour change. */
.arcar__map { position: absolute; inset: 0; margin: auto; display: block; height: 62%; width: 78%;
  object-fit: contain; opacity: 0; transition: opacity .55s ease, transform .55s ease; z-index: 1; pointer-events: none; }
.arcar__card::after { transition: background-color .55s ease; }   /* animate only the colour; the gradient image stays constant so there is no discrete gradient->solid flip mid-fade */
/* description sits inside the bottom text block, under the name+location; collapsed by default and
   expands the block UPWARD on hover so the name+location lift and the copy comes in under them (Paul).
   grid-rows 0fr->1fr grows to the EXACT content height over one transition, so the name/location lift
   and the copy fade in together and stop together (no clamp creep, no leaked gap). Collapses to true
   zero by default. The 14px gap is a clipped inner spacer (not padding/margin, which would leak). */
/* MOBILE / tablet base: description HIDDEN — name + location only. Paul 2026-06-18: the card's bottom
   gradient only makes the BOTTOM legible, not the middle, so showing the description would push text
   into the un-darkened middle. (This deliberately diverges from the mobile Figma node, which shows the
   description; Paul's call, for legibility.) The country map stays hidden too (desktop-hover flourish). */
.arcar__hovergrid { display: grid; grid-template-rows: 0fr; }
.arcar__hovertext { min-height: 0; overflow: hidden; margin: 0; opacity: 0;
  font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 14px; line-height: 22px;
  color: rgba(255,255,255,.92); }
.arcar__hovertext::before { content: ""; display: block; height: 14px; }
/* DESKTOP (>=1280, the side-by-side panel+stage layout) ONLY: collapse the description by default and
   reveal it WITH the country map + darken on hover. WIDTH-gated, NOT (hover:hover)-gated — the hover
   media query falsely reports false in DevTools device mode AND in some real desktop setups, which
   silently killed the hover reveal everywhere (Paul 2026-06-18). Mobile + tablet (<1280, touch
   carousels) show the description statically, matching the mobile/tablet design (no hover on touch). */
@media (min-width: 1280px) {
  .arcar__hovergrid { grid-template-rows: 0fr; transition: grid-template-rows .5s ease; }
  .arcar__hovertext { opacity: 0; transition: opacity .5s ease; }
  /* darken any card that has something to reveal on hover — a country map OR a hover description — so the
     overlay shows on ALL carousels, not only the map ones (Paul 2026-06-19). Was gated to :has(.arcar__map),
     which silently dropped the overlay whenever a country map failed to resolve. */
  .arcar__card:has(.arcar__map):hover::after, .arcar__card:has(.arcar__map):focus-within::after,
  .arcar__card:has(.arcar__hovergrid):hover::after, .arcar__card:has(.arcar__hovergrid):focus-within::after { background-color: rgba(0,0,0,.55); }
  /* the map fades in, lifts and shrinks; the description fades in below it */
  .arcar__card:hover .arcar__map, .arcar__card:focus-within .arcar__map { opacity: 1; transform: translateY(-20%) scale(0.85); }
  .arcar__card:hover .arcar__hovergrid, .arcar__card:focus-within .arcar__hovergrid { grid-template-rows: 1fr; }
  .arcar__card:hover .arcar__hovertext, .arcar__card:focus-within .arcar__hovertext { opacity: 1; }
}
/* progress bar */
.arcar__progress { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.arcar__pstart, .arcar__pend { 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,.8); }
.arcar__pbar { flex: 1 1 auto; height: 1px; background: rgba(0,0,0,.15); position: relative; }
.arcar__pfill { position: absolute; left: 0; top: 0; height: 1px; width: 33%; background: #b19f70; }

/* TABLET (>=768) */
@media (min-width: 768px) {
  .arcar__inner { padding: 64px 80px 80px; }   /* Hugo amendment 3, 2026-08-04: the shared
    tablet-carousels spec (node 755:119612) is 80px side padding, not this component's own 160 */
  .arcar__card { flex-basis: 320px; }
}
/* DESKTOP (>=1280): panel LEFT + stage RIGHT, side by side */
@media (min-width: 1280px) {
  .arcar__inner { flex-direction: row; align-items: flex-start; gap: 56px; padding: 56px 0 64px 104px;
    max-width: none; }
  .arcar__panel { flex: 0 0 357px; padding-top: 117px; }
  .arcar__title { font-size: 42px; line-height: 42px; }
  .arcar__stage { flex: 1 1 auto; min-width: 0; position: relative; padding-left: 76px; }
  .arcar__arrows { display: flex; flex-direction: column; gap: 8px; position: absolute; left: 0; top: 460px; z-index: 2; }
  .arcar__card { flex-basis: 340px; }
  .arcar__progress { max-width: 704px; }
}

/* ===== ar-carousel2 is a DARK section (#15282c) with white/cream text — same .arcar
   LAYOUT as carousel1 but inverted colours. Scoped to .arcar2. =============== */
.arcar2 { background: #15282c; }
.arcar2 .arcar__title { color: #ffffff; }
.arcar2 .arcar__desc { color: #ffffff; }
.arcar2 .arcar__pstart, .arcar2 .arcar__pend { color: rgba(255,255,255,.8); }
.arcar2 .arcar__pbar { background: rgba(255,255,255,.15); }
.arcar2 .arcar__arrow { border-color: rgba(255,255,255,.3); background: transparent; color: rgba(255,255,255,.8); }

/* ===========================================================================
   ar-furtherinfo (.arfi) — further-information. THREE designed layouts (Paul review
   2026-06-15, verified vs Figma desktop 419:62655 / tablet 755:117480 / mobile 755:118287):
     DESKTOP (>=1280): 3 photo-cards in a row; number top-left; white kicker/title/subtitle
       OVERLAID at the card bottom over a gradient (no body, no caption).
     TABLET (768-1279): 3 text+image blocks, alternating sides; gold kicker + black Bebas title
       + black body beside a photo with an image-caption (no number, no subtitle).
     MOBILE (<768): 3 stacked cards; photo on top (with caption) + gold kicker / black title /
       black body / "15 min read" below (no number, no subtitle).
   measure gates DESKTOP only; tab/mob are designed-but-not-keyed (verified visually + responsive). */
.arfi { background: #f9f5f2; overflow: hidden; }
.arfi__inner { box-sizing: border-box; max-width: 1440px; margin: 0 auto; padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 40px; }   /* Figma mobile: pad 40/24, gap 40 */
.arfi__card { position: relative; width: 100%; max-width: 352px; display: flex; flex-direction: column; }
.arfi__photo { position: relative; margin: 0; width: 100%; aspect-ratio: 352 / 300;
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.arfi__num { display: none; }                       /* number = desktop overlay only */
.arfi__cap { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; padding: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%);
  font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 12px; line-height: 16px;
  color: rgba(255,255,255,.8); }
.arfi__pin { width: 14px; height: 14px; color: #b19f70; flex: none; }
.arfi__body { display: flex; flex-direction: column; padding-top: 24px; }
.arfi__kicker { margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px;
  line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; color: #b19f70; }
.arfi__title { margin: 8px 0 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 28px;
  line-height: 28px; letter-spacing: 0; color: #000; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.arfi__sub { display: none; }                       /* subtitle = desktop overlay only */
.arfi__descgrid { display: contents; }              /* transparent on mobile/tablet; becomes the reveal grid on desktop */
.arfi__desc { margin: 16px 0 0; font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 14px;
  line-height: 24px; letter-spacing: 0; color: #000; }
.arfi__readtime { margin: 16px 0 0; 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,.6); }

/* TABLET (768-1279): text + image, alternating sides */
@media (min-width: 768px) and (max-width: 1279px) {
  .arfi__inner { padding: 120px 104px; gap: 96px; }   /* Figma tablet: pad 120/104, gap 96 */
  /* Figma tablet (755:117480): text column 352 + a SQUARE image (visible slot 408x408 — the image-caption
     is 408 wide and the card is 408 tall; the 676x450 'Olmara Camp' is the SOURCE fill cover-cropped into
     the square). CONTAINED (no bleed). Alternation: text-left / image-left / text-left. */
  .arfi__card { max-width: none; flex-direction: row-reverse; align-items: center; gap: 56px; }  /* odd: text LEFT */
  .arfi__card:nth-child(even) { flex-direction: row; }                                            /* even: image LEFT */
  .arfi__body { flex: 0 1 352px; min-width: 0; padding-top: 0; }
  .arfi__photo { flex: 1 1 408px; min-width: 0; aspect-ratio: 1 / 1; }
  .arfi__readtime { display: none; }                /* read-time = mobile only */
}

/* DESKTOP (>=1280): 3 photo-cards in a row; text OVERLAID white at the card bottom */
@media (min-width: 1280px) {
  .arfi__inner { flex-direction: row; flex-wrap: nowrap; justify-content: center;
    padding: 120px 104px; gap: 16px; }   /* Figma desktop: pad 120/104 */
  .arfi__card { flex: 0 0 400px; max-width: 400px; aspect-ratio: 400 / 620; overflow: hidden;
    box-shadow: 0 24px 48px rgba(0,0,0,.18); }
  .arfi__photo { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; }
  .arfi__photo::after { content: ""; position: absolute; inset: 0;
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 52%, rgba(0,0,0,.62) 100%); }
  .arfi__num { display: block; position: absolute; top: 24px; left: 24px; z-index: 2;
    font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px; line-height: 22px;
    letter-spacing: 1.44px; text-transform: uppercase; color: rgba(255,255,255,.8); }
  .arfi__cap { display: none; }                      /* desktop overlay has no caption strip */
  .arfi__body { position: absolute; left: 32px; right: 24px; bottom: 24px; z-index: 2; padding-top: 0; }
  .arfi__kicker { color: rgba(255,255,255,.8); }
  .arfi__title { margin: 6px 0 0; color: #f9f5f2; }
  .arfi__sub { display: block; margin: 12px 0 0; font-family: "Roboto Flex", sans-serif; font-weight: 400;
    font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; color: rgba(255,255,255,.8); }
  .arfi__readtime { display: none; }                 /* desktop uses subtitle, not body */

  /* ===== Further-info HOVER state — Hugo "desktop-further-information-card" Hover variant
     (lodge node 235:124116, area node 419:62655 — same shared component). Applies to BOTH the
     lodge (.lofi .arfi) and area (.arfi) pages. DEFAULT: kicker + title pinned at the node
     position (kicker y541), subtitle + description hidden. HOVER/focus: the whole card darkens to
     black 80%, the block lifts to kicker y266, and the subtitle line + description paragraph
     (16/26 white, max-width 300) reveal. Margins set to hit the node baselines: title +5, sub +18
     (Bebas title trims to 20px cap height), desc +0. ===== */
  .arfi__card { cursor: pointer; }
  /* content pinned to the BOTTOM (Paul 2026-06-18). Default: kicker + title at the bottom. On
     hover the card darkens and the description reveals below the title, growing upward — NOT lifted
     to the middle. */
  .arfi__body { top: auto; bottom: 32px; }
  .arfi__title { margin-top: 5px; }
  .arfi__sub { display: none; }
  /* Darken: keep the gradient constant and animate ONLY a separate colour, so there is no
     discrete gradient->solid flip mid-transition (matches the .arcar cards, Paul 2026-06-18). */
  .arfi__photo::after { transition: background-color .5s ease; }
  .arfi__card:hover .arfi__photo::after,
  .arfi__card:focus-within .arfi__photo::after { background-color: rgba(0,0,0,.55); }
  /* subtitle line intentionally not revealed (Paul 2026-06-18): hover shows kicker + title + paragraph only.
     The paragraph reveals by GROWING smoothly (grid-rows 0fr->1fr) + fading, identical timing to the
     .arcar cards — not the old instant display toggle. */
  .arfi__descgrid { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s ease; }
  .arfi__desc { min-height: 0; overflow: hidden; margin: 0; opacity: 0; max-width: 300px;
    font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 16px; line-height: 26px;
    letter-spacing: 0; color: #fff; transition: opacity .5s ease; }
  .arfi__desc::before { content: ""; display: block; height: 18px; }   /* title->desc gap, clipped until reveal */
  .arfi__card:hover .arfi__descgrid,
  .arfi__card:focus-within .arfi__descgrid { grid-template-rows: 1fr; }
  .arfi__card:hover .arfi__desc,
  .arfi__card:focus-within .arfi__desc { opacity: 1; }
}

/* ============================================================ Area desktop review 2026-06-15 (Paul)
   Scoped to body.area-v2 so the shared .arhero/.armain (also used by Destination/Lodge) are untouched
   on pages not yet reviewed (LESSONS: fix the class, sweep only when verified per page). */
/* Hero image caption sits at the TOP of the photo, not the bottom — it was overlapping the gallery
   arrows pinned at the bottom (Paul review 2026-06-15). Flip the gradient so the dark wash is at the
   top behind the text. Verified against the Area hero node (image-caption at y=8708 = photo top). */
body.area-v2 .arhero__caption { top: 0; bottom: auto;
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%); }
/* Caption icon = gold OUTLINE camera (#ic-camera-line, swapped in the markup) on the hero + both
   maincontent photos. It is a STROKE icon (fill:none; stroke:currentColor) so it needs `color` set
   gold, not `fill`. Keeps the Figma 14px box (gates the caption text x). */
body.area-v2 .arhero__pin,
body.area-v2 .armain__pin { color: #b19f70; }

/* "see more detail" is a BORDERED BOX button (miscellaneous-buttons: 1px white @30% stroke, square),
   not the plain text+chevron of the best-time page (Paul review 2026-06-15). Verified vs the Area
   besttime node 235:119707 (stroke rgba(255,255,255,.30) 1px, box 157x42). Scoped to .arbesttime. */
body.area-v2 .arbesttime .btseasonal__more { flex-direction: row; align-items: center;
  justify-content: center; gap: 0; height: 42px; padding: 0 18px;
  border: 1px solid rgba(255,255,255,.3); border-radius: 0; align-self: center; }
body.area-v2 .arbesttime .btseasonal__chev { display: none; }

/* >1440: keep the cream panel fixed at 520 and let the extra width go to the landscape hero PHOTO, so
   the Area/Destination headers scale EXACTLY like the signed-off Accommodation hero (Paul 2026-06-19:
   "quite clearly a different size" — area/dest were growing the panel, lodge grew the photo). The photo
   grows (flex 1 1 920) to fill the left, so there is no white gutter either; the hero gets taller on
   wide screens, matching the lodge. */
@media (min-width: 1441px) {
  body.area-v2 .arhero__panel { flex: 0 0 520px; }
  .lodge-page .arhero .arhero__panel { flex: 0 0 520px; }
  /* match the lodge/destination: give the area photo the 1024/680 aspect so it grows TALLER as it
     widens (the plain .arhero photo was aspect-ratio:auto, capped at the 740 min-height) — Paul 2026-06-19 */
  body.area-v2 .arhero__photo { aspect-ratio: 1024 / 680; }
}

/* ============================================================ Area TABLET/MOBILE review 2026-06-15 (Paul)
   Scoped to body.area-v2. */
/* Carousel text panel: capped at 357px at all widths, so below desktop (where the layout stacks the text
   ABOVE the cards) the copy was cramped at 357px. Drop the cap so it spans the column (Paul: accommodation
   + other-areas copy "wrong width", same as Destination issues 2+3). */
@media (max-width: 1279px) {
  body.area-v2 .arcar1 .arcar__panel, body.area-v2 .arcar2 .arcar__panel { max-width: none; }
}
/* Hero gallery (prev/next arrows + "more photos") was display:none below desktop, so on tablet/mobile the
   arrows + "more photos" were MISSING (Paul). Hugo shows them at every breakpoint; render them at the
   bottom of the photo per bp (mirrors Destination's .dehero fix). */
body.area-v2 .arhero__gallery { display: flex; align-items: center; justify-content: space-between;
  position: absolute; left: 16px; right: 16px; bottom: 16px; }
@media (min-width: 768px)  { body.area-v2 .arhero__gallery { left: 24px; right: 24px; bottom: 24px; } }
@media (min-width: 1280px) { body.area-v2 .arhero__gallery { left: 32px; right: 32px; bottom: 32px; } }

/* Maincontent bti-1 below desktop: image ON TOP (Paul review 2026-06-15). The mobile/tablet
   basic-text-and-image (710:111719 / 755:112263) stacks the Square Image ABOVE the title; the build
   had text-then-image (image below). bti-1 markup is text-then-figure, so column-reverse lifts the
   image above the text. bti-2 (imgleft) already has the figure first = image on top, so it's left as-is. */
@media (max-width: 1279px) {
  body.area-v2 .armain__bti--textleft,
  body.destination-v2 .armain__bti--textleft { flex-direction: column-reverse; }   /* destination matches area + lodge: bti-1 image on top on mobile (Paul 2026-06-20) */
}

/* READ MORE / SHOW LESS (as per Destination, Paul 2026-06-15): both main blocks show in full; a centred
   boxed toggle reveals .armain__extra — a NEW block (text + gold pull-quote + button beside a stacked
   portrait+landscape image pair). Placeholder content (Area has no Figma Page-2 frame); photos reuse
   existing Area crops. On tablet/mobile the images SLOT INTO the copy. */
.armain__extra { display: block; }
.armain__extra[hidden] { display: none; }
.armain__togglewrap { margin-top: 48px; text-align: center; position: relative; z-index: 1; }
.armain__more { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 24px; box-sizing: border-box; border: 1px solid #15292c; background: none;
  color: #15292c; font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px;
  line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase; cursor: pointer; border-radius: 0;
  transition: background .15s, color .15s; }
.armain__more:hover { background: #15292c; color: #f9f5f2; }
.armain__morechev { width: 14px; height: 7px; flex: none; transition: transform .2s; }
.armain__more.is-open .armain__morechev { transform: rotate(180deg); }

.arexp { margin-top: 48px; position: relative; z-index: 1; }
.arexp__title { margin: 0 0 28px; }
.arexp__cols { display: flex; flex-direction: column; gap: 32px; }
.arexp__text { display: flex; flex-direction: column; gap: 24px; }
/* read-more body paragraphs (the generated wysiwyg is unclassed) must match the main body
   (Roboto Flex 300, 16/28 -> 18/30 desktop). Direct children only, so the pull-quote is untouched. */
.arexp__text > p { margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 16px;
  line-height: 28px; letter-spacing: 0; color: rgba(0,0,0,.9); }
.arexp__imgs { display: flex; flex-direction: column; gap: 24px; }
/* tablet/mobile: images slot INTO the copy (desc1 -> portrait -> quote -> desc2 -> landscape -> button) */
@media (max-width: 1279px) {
  .arexp__text, .arexp__imgs { display: contents; }
  .arexp__text > p:nth-of-type(1), .arexp__text > p:nth-of-type(2) { order: 1; }
  .arexp__img--portrait { order: 2; }
  .arexp__text > p:nth-of-type(3) { order: 3; }   /* a paragraph between the image and the quote on mobile (Paul 2026-06-18) */
  .arexp__text > .arexp__quote { order: 4; }
  .arexp__text > p:nth-of-type(4), .arexp__text > p:nth-of-type(5),
  .arexp__text > p:nth-of-type(6) { order: 5; }
  .arexp__img--landscape { order: 6; }
  .arexp__text > .armain__btn { order: 7; }
}
.arexp__img { position: relative; margin: 0; width: 100%; background-size: cover; background-position: center; }
.arexp__img--portrait { aspect-ratio: 599 / 798; }
.arexp__img--landscape { aspect-ratio: 1174 / 784; }
.page-template-page-area-v2 .arexp__img--portrait { background-image: url('../../img/v2/arcar1-1.webp'); }
.page-template-page-area-v2 .arexp__img--landscape { background-image: url('../../img/v2/arfi-1.webp'); }
.arexp__quote { margin: 8px 0; display: flex; gap: 12px; }   /* no gold left border (not in the design, Paul 2026-06-15) */
.arexp__quote p { margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 24px;
  line-height: 28px; letter-spacing: 0; color: #15292c; text-transform: uppercase; }
.arexp__quotemark { flex: none; width: 16px; height: 14px; color: #b19f70; }
/* gold quotemark for the inline read-more quote (wysiwyg blockquote, which can't carry the SVG) */
.arexp__quote:not(:has(.arexp__quotemark))::before { content: ""; flex: none; width: 16px; height: 14px;
  margin-top: 4px; 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; }
.arexp .armain__btn { margin-top: 8px; align-self: flex-start; }
@media (min-width: 1280px) {
  .arexp { margin-top: 96px; }
  .arexp__cols { flex-direction: row; gap: 104px; align-items: center; }   /* centre the shorter column so when the copy runs longer than the image pair the overflow splits evenly top + bottom, not all at the bottom (Paul 2026-06-19). Shared lodge+area+dest read-more. */
  .arexp__text { flex: 1 1 600px; min-width: 0; gap: 28px; }
  .arexp__text > p { font-size: 18px; line-height: 30px; }   /* match main body on desktop */
  .arexp__imgs { flex: 0 1 600px; min-width: 0; gap: 32px; }
  .arexp__quote p { font-size: 28px; line-height: 32px; }
}

/* card → page links (interactivity phase): the whole carousel card is clickable. */
.arcar__card { position: relative; }
.arcar__cardlink { position: absolute; inset: 0; z-index: 3; }