/* ===========================================================================
   landing-v2.css — Landing Page (long-form editorial article), clean-room build.
   Figma: desktop 214:670 / tablet 753:140595 / mobile 694:89639.
   Reuses .btnav/.bthero/.btform (best-time-v2.css), .artcard (articles-v2.css),
   .v2reviews/.v2approach/opfoot* (home-v2.css); this file holds ONLY the NEW
   editorial article body (.ldbody) + the embedded banners (pull-quote,
   simple-table, get-in-touch, newsletter, inline-article-carousel).
   =========================================================================== */

body.landing-v2 {
  font-family: "Roboto Flex", system-ui, sans-serif;
  background: #fff;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   ld-hero: reuses .bthero (best-time-v2.css) verbatim. Two overrides:
   (1) per-bp PHOTO (cropped from shutterstock_1717836628 → ldhero-*.webp),
   (2) DESKTOP title diverges per page instance: Bebas 62/58 (vs the .bthero
   default 50/50). Tablet/mobile masters match the .bthero default (46/42) so
   no override there. Mirrors the op-hero approach.
   --------------------------------------------------------------------------- */
/* Demo photo is DEMO-PAGE-ONLY (live pages inline-style their own image; see the
   wrong-lodge-flash fix 2026-07-08). */
.page-template-page-landing-v2 .ldhero .bthero__photo { background-image: url('../../img/v2/ldhero-mobile.webp'); }
@media (min-width: 768px) {
  .page-template-page-landing-v2 .ldhero .bthero__photo { background-image: url('../../img/v2/ldhero-tablet.webp'); }
}
@media (min-width: 1280px) {
  .page-template-page-landing-v2 .ldhero .bthero__photo { background-image: url('../../img/v2/ldhero-desktop.webp'); }
  .ldhero .bthero__title { font-size: 62px; line-height: 58px; }
}
/* subpage-hero extras the bare .bthero shell was missing (node 214:615 / 753:139451 / 694:103255):
   image-caption (top-left), gallery UI (arrows + more photos) on the photo, and a SHARE ARTICLE
   button in the panel. Insets: gallery 24 (tablet/mobile) / 32 (desktop); caption 20. */
.ldhero .bthero__photo { position: relative; }
@media (min-width: 768px) { .ldhero .bthero__photo { aspect-ratio: 1024 / 680; } }   /* node photo 680 (bthero base is 824) */
.ldhero__caption { position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box; display: flex;
  align-items: center; gap: 8px; padding: 20px; pointer-events: none;
  background: linear-gradient(0deg, 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,.9); }
.ldhero__capic { width: 16px; height: 16px; flex: none; color: rgba(255,255,255,.9); }
.ldhero__gallery { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; align-items: center; justify-content: space-between; }
.ldhero__arrows { display: inline-flex; }
.ldhero__arrow { width: 42px; height: 42px; margin-left: -1px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.1); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.ldhero__arrow:first-child { margin-left: 0; }
/* batch2 #2 sweep completion (2026-08-01): hero gallery arrows onto the shared Arrow asset
   (white via currentColor on these photo controls); prev = rotated 180. */
.ldhero__arrow .ic { width: 15px; height: 11px; fill: none; }
.ldhero__arrow[aria-label^="Previous"] .ic { transform: rotate(180deg); }
.ldhero__more { display: inline-flex; align-items: center; padding: 16px 22px; background: #fff; text-decoration: none;
  font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: 1.44px; text-transform: uppercase; color: rgba(0,0,0,.8); }
.ldhero__share { display: inline-flex; align-items: center; margin-top: 32px; text-decoration: none; }
.ldhero__share-icbox { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,.2); }
/* #ic-share is circles + line connectors; the connectors need stroke (the global reset only sets
   fill), else they vanish and the icon looks like 3 stray dots (L28). Stroke it, in gold per the node. */
.ldhero__share-ic { width: 18px; height: 18px; fill: none; stroke: #b19f70; stroke-width: 1.6px; }
.ldhero__share-labelbox { display: inline-flex; align-items: center; height: 42px; padding: 0 22px; border: 1px solid rgba(0,0,0,.2); border-left: 0;
  font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: 1.44px; text-transform: uppercase; color: rgba(0,0,0,.8); }
@media (min-width: 1280px) { .ldhero__gallery { left: 32px; right: 32px; bottom: 32px; } }

/* ===========================================================================
   ld-body: the editorial article column (Contents frame 214:14306). A centred
   text column (desktop col 816, pad 312; tablet col 816, pad 104; mobile col
   352, pad 24). Vertical gap 48 desktop/tablet, 40 mobile; top pad 112/104/72.
   Every text block is a FULL-WIDTH centred-text box (Figma layoutAlign STRETCH,
   node x = column left edge per L4) EXCEPT the read-time chip (left-aligned).
   Colours: headings/body #000@0.9, read-time @0.8, pull-desc @0.7.
   =========================================================================== */
.ldbody { background: #fff; }
.ldbody__col {
  box-sizing: border-box; max-width: 400px; margin: 0 auto;
  padding: 72px 24px 0; display: flex; flex-direction: column; align-items: center;
  gap: 40px;
}
.ldbody__col > * { width: 100%; }

/* read time — full-width row, content LEFT-aligned (clock at the column edge) */
.ldbody__readtime { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.ldbody__clock { width: 16px; height: 16px; flex: none; color: rgba(0,0,0,.8); }
.ldbody__readtxt { 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; }

/* headings — full-width centred text */
.ldbody__h1 { 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,.9); text-align: center;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.ldbody__h2 { margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 28px;
  line-height: 28px; letter-spacing: 0; color: rgba(0,0,0,.9); text-align: center; text-transform: none;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }

/* body paragraphs — full-width centred text */
/* left-aligned editorial variant (previewing for Paul, 2026-07-14): body copy + section heads go
   left, pull quotes / captions / voice attribution stay as designed. Opt-in per article via the
   model's 'align' => 'left'. */
.ldbody--left .ldbody__p, .ldbody--left .ldbody__h1, .ldbody--left .ldbody__h2 { text-align: left; }
.ldbody__p { margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 14px;
  line-height: 24px; letter-spacing: 0; color: rgba(0,0,0,.9); text-align: center;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }

/* blockquote — gold 2px left border, 48px left pad, left-aligned, attribution */
.ldquote { box-sizing: border-box; margin: 0; padding: 0 0 0 48px;
  border-left: 2px solid #b19f70; display: flex; flex-direction: column; gap: 40px; text-align: left; }
.ldquote__text { margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 300;
  font-size: 14px; line-height: 24px; color: rgba(0,0,0,.9);
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.ldquote__attr { display: flex; align-items: center; gap: 16px; }
.ldquote__avatar { width: 59px; height: 59px; flex: none; border-radius: 50%;
  background: #d8d2c4 url('../../img/v2/auteam-paul.webp') center/cover no-repeat; }
.ldquote__who { font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 14px;
  line-height: 24px; color: rgba(0,0,0,.9); }
.ldquote__role { color: rgba(0,0,0,.7); }

/* pull-quote (centred Bebas quote with a gold quotemark; author/desc centred narrower).
   NOTE: do NOT add .v2quote__text to the <p> — that class is display:flex column and stacks the
   inline gold spans onto their own lines. The quote is a normal block paragraph. */
.ldbody__pull { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.ldpull__mark { display: block; margin-bottom: 8px; }
.ldpull__mark svg { display: block; width: 30px; height: 26px; }
.ldpull__text { margin: 0; width: 736px; max-width: 100%; font-family: "Bebas Neue", sans-serif;
  font-weight: 400; font-size: 36px; line-height: 34px; letter-spacing: 0; color: #000; text-align: center;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.ldpull__author { margin: 0; width: 440px; max-width: 100%; font-family: "Bebas Neue", sans-serif;
  font-weight: 400; font-size: 28px; line-height: 28px; color: #000; text-align: center;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.ldpull__desc { margin: 0; width: 440px; max-width: 100%; font-family: "Roboto Flex", sans-serif;
  font-weight: 300; font-size: 14px; line-height: 24px; color: rgba(0,0,0,.8); text-align: center;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }

/* inline image placeholder (CMS slot, Figma black box) */
.ldbody__img { background: #000; display: flex; align-items: center; justify-content: center; }
.ldbody__img--492 { aspect-ratio: 816 / 492; }
.ldbody__imglabel { font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 14px;
  color: rgba(255,255,255,.6); }

/* TABLET (>=768): column 816, pad 104, top 104, gap 48 */
@media (min-width: 768px) {
  .ldbody__col { max-width: 1024px; padding: 104px 104px 0; gap: 48px; }
}
/* DESKTOP (>=1280): column 816, pad 312, top 112; H1 36/40, body 16/26, pull 42/44 */
@media (min-width: 1280px) {
  .ldbody__col { max-width: 1440px; padding: 112px 312px 0; gap: 48px; }
  .ldbody__h1 { font-size: 36px; line-height: 40px; }
  .ldbody__p { font-size: 16px; line-height: 26px; }
  .ldpull__text { font-size: 42px; line-height: 42px; }
  .ldquote__text { font-size: 16px; line-height: 26px; }
  .ldquote__who { font-size: 16px; }
  .ldpull__desc { font-size: 16px; line-height: 26px; }
}

/* ===========================================================================
   ld-table: desktop-simple-table 356:27343. A 4-col data <table> the width of
   the article column (816). Dark-teal header, white bold cells; 7 body rows
   alternating #fff / #f9f5f2; black 1px divider above each body row + below the
   last (Figma Vector strokes). Cells pad 16, col gap 24. Roboto-300 16/26 body.
   =========================================================================== */
/* The Figma table keeps FIXED text-box widths (100/140/140/332) at every breakpoint — on the
   400/1024 mobile/tablet frames the table is the full 816 wide (it overflows the column), so on
   narrow real devices it scrolls horizontally. Fixed px widths at all breakpoints match the spec
   AND give the conventional wide-data-table-on-mobile pattern (horizontal scroll). */
.ldtable { width: 816px; border-collapse: collapse; table-layout: fixed; text-align: left; }
.ldtable__hr { background: #15282c; }
.ldtable__h { box-sizing: border-box; font-family: "Roboto Flex", sans-serif;
  font-weight: 700; font-size: 14px; line-height: 24px; letter-spacing: 0; color: #fff;
  vertical-align: top; }
.ldtable tbody tr { border-top: 1px solid #000; }
.ldtable tbody tr:last-child { border-bottom: 1px solid #000; }
.ldtable__alt { background: #f9f5f2; }
.ldtable__c { box-sizing: border-box; font-family: "Roboto Flex", sans-serif;
  font-weight: 300; font-size: 14px; line-height: 24px; letter-spacing: 0; color: rgba(0,0,0,.9);
  vertical-align: top; }
@media (min-width: 1280px) {
  .ldtable__h, .ldtable__c { font-size: 16px; line-height: 26px; }
}
/* Figma: cell frame pad 16 top/bottom + outer left/right, 24px inter-column gutter (via right pad
   on cols 1-3), text-box widths 100/140/140/332. */
.ldtable__h, .ldtable__c { padding-top: 16px; padding-bottom: 16px; }
.ldtable__h:nth-child(1), .ldtable__c:nth-child(1) { padding-left: 16px; padding-right: 24px; width: 140px; }
.ldtable__h:nth-child(2), .ldtable__c:nth-child(2) { padding-right: 24px; width: 164px; }
.ldtable__h:nth-child(3), .ldtable__c:nth-child(3) { padding-right: 24px; width: 164px; }
.ldtable__h:nth-child(4), .ldtable__c:nth-child(4) { padding-right: 16px; width: 348px; }
/* horizontal-scroll wrapper for narrow viewports; full width inside the article column */
.ldtable__wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 816x816 + 816x600 inline image placeholders (CMS slots, Figma black box @0.07/0.10) */
.ldbody__img--816 { aspect-ratio: 1 / 1; }
.ldbody__img--600 { aspect-ratio: 816 / 600; }

/* ===========================================================================
   ld-git: get-in-touch-banner 355:40506 (rebuilt locally). 920px breakout dark-teal
   banner; a luminosity-blended safari photo over #15282c (L16); centred cream title
   + two gold pill buttons. Breaks out of the 816 article column to 920 (centred).
   =========================================================================== */
.ldgit { position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  background: #15282c; width: 100%; min-height: 380px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 48px 24px; }
/* git + news break out of the article column. Mobile = full-bleed to the column edges
   (banner 400, col pad 24 → -24 each side). Tablet + desktop = 920 (breakout -52 each side).
   The .ldbody__col > * rule pins children to width:100%; override with symmetric negative margins. */
.ldbody__col > .ldgit, .ldbody__col > .ldnews {
  width: calc(100% + 48px); margin-left: -24px; margin-right: -24px;
}
@media (min-width: 768px) {
  .ldbody__col > .ldgit, .ldbody__col > .ldnews {
    width: calc(100% + 104px); margin-left: -52px; margin-right: -52px;
  }
}
.ldgit__photo { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('../../img/v2/opgit-mobile.webp'); background-size: cover;
  background-position: center; mix-blend-mode: luminosity; opacity: .36; }
.ldgit__inner { position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 40px; width: 100%; }
.ldgit__title { margin: 0; max-width: 336px; text-align: center; font-family: "Bebas Neue", sans-serif;
  font-weight: 400; font-size: 32px; line-height: 32px; letter-spacing: 0; color: #f9f5f2;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.ldgit__btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ldgit__btn { box-sizing: border-box; display: inline-flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 26px; background: #b19f70; border-radius: 0;
  text-decoration: none; }
/* fill for solid glyphs (mail) AND color for stroked glyphs (#ic-phone is a stroke handset whose
   stroke is currentColor) — without the color, the phone inherited the button's black currentColor. */
.ldgit__ic { flex: 0 0 auto; width: 16px; height: 16px; fill: #f9f5f2; color: #f9f5f2; }
/* Hugo batch2 #13: the shared button text style is Uppercase/Base — render uppercase via CSS
   regardless of how the source copy is typed (was forced lowercase). All breakpoints. */
.ldgit__btntxt { font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 14px;
  line-height: 24px; letter-spacing: 1.68px; text-transform: uppercase; color: #f9f5f2; white-space: nowrap; }
@media (min-width: 768px) {
  .ldgit__title { max-width: 372px; }   /* tablet 32/auto, width 372 */
}
@media (min-width: 1280px) {
  .ldgit { min-height: 380px; }
  .ldgit__title { max-width: 388px; font-size: 36px; line-height: 40px; }  /* desktop 36, width 388 */
}

/* ===========================================================================
   ld-news: newsletter-banner 355:40650 (rebuilt locally). 920px breakout cream banner
   with a faint topographic map bg, centred Bebas-28 title + body, and a gold-bordered
   email field with a gold arrow-forward button.
   =========================================================================== */
.ldnews { position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  background: #f9f5f2; width: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 40px; padding: 72px 24px; }
.ldnews__topo { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('../../img/v2/opmain-topo.webp') center/cover no-repeat; opacity: .05; }
.ldnews__inner { position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 40px; width: 100%; max-width: 400px; }
.ldnews__head { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.ldnews__title { margin: 0; width: 100%; max-width: 336px; text-align: center;
  font-family: "Bebas Neue", sans-serif; font-weight: 400;
  font-size: 32px; line-height: 32px; letter-spacing: 0; color: #000;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.ldnews__sub { margin: 0; width: 100%; max-width: 336px; text-align: center;
  font-family: "Roboto Flex", sans-serif; font-weight: 300;
  font-size: 14px; line-height: 24px; letter-spacing: 0; color: #000; }
@media (min-width: 768px) {
  .ldnews__title { font-size: 28px; line-height: 28px; max-width: 400px; }
  .ldnews__sub { max-width: 400px; }
  .ldnews__inner { max-width: 400px; }
}
@media (min-width: 1280px) {
  .ldnews__sub { font-size: 16px; line-height: 26px; }
}
.ldnews__form { display: flex; align-items: center; width: 100%; box-sizing: border-box;
  background: #f9f5f2; border: 1px solid #b19f70; padding-left: 18px; height: 48px; }
.ldnews__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 16px; line-height: 26px;
  color: rgba(0,0,0,.9); }
.ldnews__input::placeholder { color: rgba(0,0,0,.3); }
.ldnews__send { flex: 0 0 auto; width: 48px; height: 48px; margin: -1px -1px -1px 0; border: 0;
  background: #b19f70; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ldnews__send svg { width: 16px; height: 10px; }

/* ===========================================================================
   ld-car: inline-article-carousel 548:65806 (rebuilt locally). Full-bleed white section
   (breaks out of the article column to the section width). Centred title, a row of 3
   image-fill cards (340x572) with bottom-anchored kicker/Bebas title/subtitle + a number
   top-left, then a progress bar + teal back/forward arrows. STATIC.
   =========================================================================== */
.ldcar { background: #fff; box-sizing: border-box; width: 100%; padding: 80px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 32px; }
.ldcar__title { margin: 0; text-align: center; font-family: "Bebas Neue", sans-serif; font-weight: 400;
  font-size: 32px; line-height: 32px; letter-spacing: 0; color: rgba(0,0,0,.9);
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
@media (min-width: 1280px) {
  .ldcar__title { font-size: 36px; line-height: 40px; }
}
/* 'safe center': sparse carousels (e.g. two Akagera camps) centre in the row; the moment
   the track overflows (the full carousels) it behaves as flex-start, so scrolling pages are
   untouched. Browsers without 'safe' ignore the line and keep the default start. Paul 2026-07-14. */
.ldcar__row { justify-content: safe center; }
.ldcar__row { display: flex; gap: 16px; overflow-x: auto; max-width: 100%; scrollbar-width: none;
  scroll-snap-type: x mandatory; }
.ldcar__row::-webkit-scrollbar { display: none; }
.ldcar__card { position: relative; flex: 0 0 280px; aspect-ratio: 340 / 572; scroll-snap-align: start;
  background-size: cover; background-position: center; overflow: hidden; }
.ldcar__card::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%); }
.ldcar__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; color: rgba(255,255,255,.8); }
.ldcar__cardtext { position: absolute; left: 32px; right: 32px; bottom: 32px; z-index: 1;
  display: flex; flex-direction: column; gap: 12px; }
.ldcar__cardtitle { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 28px;
  line-height: 28px; letter-spacing: 0; color: #f9f5f2; }
.ldcar__cardsub { 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); }
/* lodge-card hover: the arcar treatment (photo darkens, gold country map fades in + lifts,
   description reveals under name+location), ported onto the article carousel (Paul 2026-07-14).
   Map box = explicit 62% x 78% + object-fit contain (the 2026-07-13 fix: size-less map svgs
   collapse to 0 width under width:auto). Darken animates ONLY background-color so the constant
   gradient never flips mid-fade. */
.ldcar__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; }
.ldcar__card::after { transition: background-color .55s ease; }
.ldcar__hovergrid { display: grid; grid-template-rows: 0fr; }
.ldcar__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); }
.ldcar__hovertext::before { content: ""; display: block; height: 2px; }
/* DESKTOP (>=1280) only, WIDTH-gated not (hover:hover)-gated (the hover media query lies in
   DevTools device mode and some desktops — Paul 2026-06-18). Below 1280 the map + description
   stay hidden: name + location only, as on the arcar cards. */
@media (min-width: 1280px) {
  .ldcar__hovergrid { transition: grid-template-rows .5s ease; }
  .ldcar__hovertext { transition: opacity .5s ease; }
  .ldcar__card:has(.ldcar__map):hover::after, .ldcar__card:has(.ldcar__map):focus-visible::after,
  .ldcar__card:has(.ldcar__hovergrid):hover::after, .ldcar__card:has(.ldcar__hovergrid):focus-visible::after { background-color: rgba(0,0,0,.55); }
  .ldcar__card:hover .ldcar__map, .ldcar__card:focus-visible .ldcar__map { opacity: 1; transform: translateY(-20%) scale(0.85); }
  .ldcar__card:hover .ldcar__hovergrid, .ldcar__card:focus-visible .ldcar__hovergrid { grid-template-rows: 1fr; }
  .ldcar__card:hover .ldcar__hovertext, .ldcar__card:focus-visible .ldcar__hovertext { opacity: 1; }
}
.ldcar__progress { display: flex; align-items: center; gap: 24px; width: 100%; max-width: 704px; }
.ldcar__pval { flex: 0 0 auto; font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 12px;
  line-height: 22px; letter-spacing: 1.44px; color: rgba(0,0,0,.8); }
.ldcar__pbar { flex: 1 1 auto; display: flex; gap: 0; }
.ldcar__pseg { flex: 1 1 0; height: 3px; background: rgba(0,0,0,.1); }
.ldcar__pseg--on { background: #b19f70; }
.ldcar__arrows { display: flex; gap: 0; }
.ldcar__arrow { width: 42px; height: 42px; box-sizing: border-box; border: 1px solid #fff;
  background: var(--c-ink); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;   /* was #15282c — Hugo QA #1 2026-07-21: carousel arrows are #15292c (primary/dark-teal-1) site-wide */
  display: inline-flex; align-items: center; justify-content: center; }
.ldcar__arrow + .ldcar__arrow { margin-left: -1px; }
/* Hugo batch2 #2: the shared Arrow asset (gold chevrons, 14.85x10.85) replaces the &#8249;/&#8250;
   text glyphs; Back = rotated 180. */
.ldcar__arrow .ic { width: 15px; height: 11px; color: var(--c-gold); fill: none; }
.ldcar__arrow[aria-label^="Previous"] .ic { transform: rotate(180deg); }
@media (min-width: 768px) {
  /* full-bleed carousel inset to the article margin so card 01 starts aligned, then scrolls (Embla). */
  .ldcar { padding: 80px 104px; }
  .ldcar__card { flex-basis: 320px; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  /* Hugo amendment 3, 2026-08-04, built to node 753:145505's RENDER (the ticket says "704px
     track" but the node's 704 element is the PROGRESS BAR, which already caps at 704): the
     card row is CENTRED with symmetric 52px side space, three ~300px cards visible, gap 10.
     Replaces the old 104px inset. Desktop (1280+) keeps the block above. */
  .ldcar { padding-left: 52px; padding-right: 52px; }
  .ldcar__card { flex-basis: 300px; }
  .ldcar__row { gap: 10px; }
}
@media (min-width: 1280px) {
  .ldcar__card { flex-basis: 340px; }
  .ldcar__row { overflow: visible; }
}

/* the article column resumes after the full-bleed carousel (same column rules). It is the LAST block
   before the contact-form banner, so it carries the Contents bottom padding (node 214:14306 pad-bottom
   112) — without it the final paragraph sits flush against the form. */
.ldbody__col--cont { padding-top: 0; padding-bottom: 72px; }
@media (min-width: 768px)  { .ldbody__col--cont { padding-bottom: 104px; } }
@media (min-width: 1280px) { .ldbody__col--cont { padding-bottom: 112px; } }

/* blockquote variant 2 carries a photo avatar (Paul Callcutt). Same .ldquote base. */
.ldquote--img .ldquote__avatar { background: #d8d2c4 url('../../img/v2/auteam-paul.webp') center/cover no-repeat; }

/* ===========================================================================
   ld-traffic: monthly-traffic-light-table (Frame 27). 12 rows + a Key legend. Each row
   white@0.95, a coloured dot + bold month + description. 4px row gap (Figma itemSpacing 4).
   =========================================================================== */
.ldtraffic { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.ldtraffic__row { display: flex; align-items: flex-start; gap: 24px; box-sizing: border-box;
  background: rgba(255,255,255,.95); padding: 16px; }
/* Figma row = the status COLOUR under a #fff @0.95 wash (Frame 4/16/17… fills: [statusColour,
   #ffffff@0.95]) → a barely-perceptible coloured tint per row. Layer the white wash over the
   status colour so 5% of the colour reads through (matches the spec's row fillHex). */
.ldtraffic__row--rec { background: linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)), #53AB40; }
.ldtraffic__row--tra { background: linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)), #C4A717; }
.ldtraffic__row--cha { background: linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)), #CE5C41; }
.ldtraffic__mon { flex: 0 0 64px; display: inline-flex; align-items: center; gap: 12px; }
.ldtraffic__dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; }
.ldtraffic__dot--rec { background: #53AB40; }
.ldtraffic__dot--tra { background: #C4A717; }
.ldtraffic__dot--cha { background: #CE5C41; }
.ldtraffic__m { font-family: "Roboto Flex", sans-serif; font-weight: 700; font-size: 14px;
  line-height: 22px; letter-spacing: 0; color: rgba(0,0,0,.9); white-space: nowrap; }
/* Hugo batch2 #16: FIXED description column width per breakpoint (mobile 210 / tablet+desktop
   660) so every row wraps at the same point instead of running to its own natural length.
   The max-width guard stops the fixed basis overflowing where the article column is narrower
   than 748px (64 month + 24 gap + 660): rows then all wrap at the container edge, still a
   single consistent point. */
.ldtraffic__desc { flex: 0 0 210px; max-width: calc(100% - 88px); font-family: "Roboto Flex", sans-serif; font-weight: 300;
  font-size: 14px; line-height: 22px; letter-spacing: 0; color: rgba(0,0,0,.9); }
.ldtraffic__key { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box;
  background: rgba(255,255,255,.95); padding: 16px; }     /* mobile: stack the 3 keys (no 2+1 wrap) */
.ldtraffic__keyitem { display: inline-flex; align-items: center; gap: 12px; }
@media (min-width: 768px) {
  .ldtraffic__key { flex-direction: row; flex-wrap: wrap; gap: 24px; }   /* one row where it fits */
  .ldtraffic__desc { flex-basis: 600px; }   /* Hugo amendment 5, 2026-08-04: 600 on tablet so it
    fits the article column without capping at the edge; desktop restores 660 below */
}
@media (min-width: 1280px) {
  .ldtraffic__m, .ldtraffic__desc { font-size: 16px; line-height: 26px; }
  .ldtraffic__desc { flex-basis: 660px; }
}

/* ===========================================================================
   ld-related: related-articles 368:43561 ("Continue reading"). Cream section, centred
   Bebas-42 header + sub, a row of 3 cards: image (400x400) with a date tag overlaid top-
   left + a white text panel (read-time row, Bebas-28 title, Roboto-300 excerpt). Rebuilt
   locally as .ldrel (image-top / text-below layout, distinct from the .artcard overlay).
   =========================================================================== */
.ldrelated { background: #f9f5f2; }
.ldrel__inner { box-sizing: border-box; max-width: 1440px; margin: 0 auto; padding: 80px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 48px; }
.ldrel__head { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
/* title = FULL-WIDTH centred-text box (Figma node spans the container, text centred). */
.ldrel__title { margin: 0; width: 100%; text-align: center; font-family: "Bebas Neue", sans-serif;
  font-weight: 400; font-size: 32px; line-height: 32px; letter-spacing: 0; color: #15292c;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.ldrel__sub { margin: 0; width: 100%; max-width: 352px; text-align: center;
  font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 14px; line-height: 24px;
  letter-spacing: 0; color: rgba(0,0,0,.6); }
@media (min-width: 768px) {
  .ldrel__title { font-size: 36px; line-height: 34px; }
  .ldrel__sub { max-width: 406px; }
}
@media (min-width: 1280px) {
  .ldrel__title { font-size: 42px; line-height: 42px; }
  .ldrel__sub { max-width: 460px; font-size: 16px; line-height: 26px; }
}
.ldrel__row { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 400px; }
.ldrel__card { display: flex; flex-direction: column; text-decoration: none; background: #fff; }
.ldrel__img { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
  background-size: cover; background-position: center; }
.ldrel__date { position: absolute; top: 24px; left: 24px; font-family: "Roboto Flex", sans-serif;
  font-weight: 400; font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: lowercase;
  color: rgba(255,255,255,.85); }
/* image-caption overlay (368:43561 instance, visible:true): gold #ic-credit glyph + white@0.8
   caption text over a bottom transparent->black@0.6 gradient, 20px insets. Same component as the
   articles-hub mobile card caption. */
.ldrel__caption { display: flex; align-items: center; gap: 8px; position: absolute;
  left: 0; right: 0; bottom: 0; z-index: 2; padding: 64px 20px 20px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); }
.ldrel__capicon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--c-gold, #b19f70); }
.ldrel__captxt { font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 12px;
  line-height: 16px; color: rgba(255,255,255,.8); }
.ldrel__text { box-sizing: border-box; display: flex; flex-direction: column; gap: 24px;
  padding: 32px 32px 40px; }
.ldrel__read { display: inline-flex; align-items: center; gap: 8px; color: rgba(0,0,0,.6); }
.ldrel__clock { width: 16px; height: 16px; flex: none; }
.ldrel__readtxt { 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,.6); }
.ldrel__cardtitle { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 28px;
  line-height: 28px; letter-spacing: 0; color: #000; }
.ldrel__desc { font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 16px;
  line-height: 26px; letter-spacing: 0; color: #000; }
@media (min-width: 768px) and (max-width: 1279px) {
  /* TABLET: ONE column of HORIZONTAL cards (image 272 square left + text right) — node 753:145824.
     (Desktop is the 3-column grid below; mobile is 1-col vertical.) */
  .ldrel__inner { padding: 120px 96px; gap: 80px; }
  .ldrel__row { flex-direction: column; max-width: none; gap: 16px; margin-left: 8px; margin-right: 8px; }
  .ldrel__card { flex-direction: row; }
  .ldrel__img { width: 272px; flex: 0 0 272px; aspect-ratio: 1 / 1; }
  .ldrel__text { flex: 1 1 0; min-width: 0; justify-content: center; }
}
@media (min-width: 1280px) {
  /* DESKTOP: 3-column grid of vertical cards */
  .ldrel__inner { padding: 120px 104px; gap: 80px; }
  .ldrel__row { flex-direction: row; max-width: none; gap: 16px; align-items: stretch; margin-left: 0; margin-right: 0; }
  .ldrel__card { flex: 1 1 0; min-width: 0; flex-direction: column; }
}

/* ===========================================================================
   v2 ARTICLE additions (single-post.php real content, 2026-07-11): real <img>
   elements in the CMS image slots (image-search SEO, same geometry), image
   captions, a 5-column simple-table variant for content that carries five
   columns, and the .ldmap embed (Mapbox static + SVG overlay, project-maps.md).
   Component geometry (column, slots, type) is unchanged from the measured build.
   =========================================================================== */
.ldbody__imgfig { margin: 0; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.ldbody__img--real { overflow: hidden; }
.ldbody__img--real img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ldbody__imgcap { display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 12px; line-height: 16px;
  color: rgba(0,0,0,.55); }
.ldbody__imgcapic { width: 14px; height: 14px; flex: 0 0 14px; color: #b19f70; }

/* 5-column variant of the simple table (content-driven; same paddings/typography;
   widths sum to the node's 816 column) */
.ldtable--5 .ldtable__h:nth-child(1), .ldtable--5 .ldtable__c:nth-child(1) { padding-left: 16px; padding-right: 16px; width: 128px; }
.ldtable--5 .ldtable__h:nth-child(2), .ldtable--5 .ldtable__c:nth-child(2) { padding-right: 16px; width: 208px; }
.ldtable--5 .ldtable__h:nth-child(3), .ldtable--5 .ldtable__c:nth-child(3) { padding-right: 16px; width: 160px; }
.ldtable--5 .ldtable__h:nth-child(4), .ldtable--5 .ldtable__c:nth-child(4) { padding-right: 16px; width: 160px; }
.ldtable--5 .ldtable__h:nth-child(5), .ldtable--5 .ldtable__c:nth-child(5) { padding-right: 16px; width: 160px; }

/* ldmap: the static-map embed (basemap image + SVG label overlay; no map JS) */
.ldmap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ldmap__title { margin: 0; text-align: center; font-family: "Bebas Neue", sans-serif; font-weight: 400;
  font-size: 28px; line-height: 30px; letter-spacing: 3px; color: rgba(0,0,0,.9); }
.ldmap__sub { margin: 0 0 8px; text-align: center; font-family: "Roboto Flex", sans-serif; font-weight: 300;
  font-size: 13px; line-height: 20px; letter-spacing: 1px; color: rgba(0,0,0,.55); }
.ldmap__frame { position: relative; width: 100%; overflow: hidden; }
.ldmap__brand { margin: 4px 0 0; text-align: center; font-family: "Roboto Flex", sans-serif; font-size: 10px;
  letter-spacing: 2px; color: #b19f70; opacity: .55; }
/* migration month overlay (bottom-left of the map frame) */
.ldmap__month { position: absolute; bottom: 16px; left: 16px; pointer-events: none; }
.ldmap__month #ftz-mname { font-family: "Bebas Neue", sans-serif; font-size: 28px; color: #363839;
  letter-spacing: 2px; line-height: 1; text-shadow: 0 0 8px rgba(255,255,255,.9); }
.ldmap__month #ftz-mphase { font-family: "Roboto Flex", sans-serif; font-size: 11px; font-weight: 600;
  color: #b19f70; letter-spacing: 1.5px; margin-top: 2px; text-shadow: 0 0 6px rgba(255,255,255,.9); }
.ldmap__month #ftz-mdesc { font-family: "Roboto Flex", sans-serif; font-size: 9px; color: #666;
  margin-top: 4px; max-width: 260px; text-shadow: 0 0 4px rgba(255,255,255,.9); }
.ldmap__month #ftz-prog { display: flex; gap: 3px; margin-top: 8px; }
.ldmap__month #ftz-prog span { display: block; width: 18px; height: 4px; border-radius: 2px; background: rgba(200,200,200,.4); }
.ldmap__month #ftz-prog span.on { background: #b19f70; }
@media (max-width: 560px) {
  .ldmap__month #ftz-mname { font-size: 20px; }
  .ldmap__month #ftz-mdesc { max-width: 180px; }
  .ldmap__month #ftz-prog span { width: 10px; }
}
/* the article single sets its hero photo inline per article (no template default) */
.article-v2 .ldhero .bthero__photo { background-size: cover; background-position: center; }