/* Rethink Africa — master stylesheet
   Extracted verbatim from the Claude-designed standalone prototype
   (RTA Website 2026 V2.0 Standalone.html) and split across pages.
   Do not hand-edit visual rules without checking against the prototype. */

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* Added: the prototype's SPA used <button onclick="showPage(...)"> instead
     of real links, so it never needed an anchor reset. Now that several of
     those elements are real <a href> links (so the site works without JS
     and is crawlable), reset their default underline/color. */
  a { color: inherit; text-decoration: none; }
  button { font: inherit; }

  :root {
    --green:      #3d5c38;
    --green-dark: #2b4127;
    --green-light:#6b8c63;
    --cream:      #f5f1eb;
    --sand:       #d9ccb8;
    --warm-grey:  #b0a898;
    --text:       #1c1c1a;
    --white:      #ffffff;
    /* Fine-tune: only 'Archivo Narrow' and 'Arimo' are actually loaded via
       Google Fonts (see includes/header.php). The original stacks listed
       unlicensed/unavailable 'Arial Nova...' fonts first and put generic
       'Arial'/'Helvetica' BEFORE the real web fonts — since Arial/Helvetica
       are present on virtually every system, the browser always stopped
       there and never reached Archivo Narrow / Arimo. Reordered so the
       loaded web fonts are tried first. */
    --font-display: 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;
    --font-body:    'Arimo', Arial, Helvetica, sans-serif;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--text);
    overflow-x: hidden;
  }

  /* ─── PAGE SYSTEM ─── */
  .page { min-height: 100vh; }
  body.page-home { background: #0d1508; }

  /* ─── NAV ─── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    height: 72px;
    background: transparent;
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
  }
  nav.scrolled {
    background: rgba(245,241,235,0.95);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
  }
  .nav-logo {
    cursor: pointer;
    height: 36px;
  }
  .nav-logo img { height: 100%; filter: brightness(0) invert(1); transition: filter 0.4s; }
  nav.scrolled .nav-logo img { filter: none; }

  .nav-links {
    display: flex;
    gap: 40px;
    list-style: none;
  }
  .nav-links a {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    transition: color 0.3s;
    cursor: pointer;
  }
  nav.scrolled .nav-links a { color: var(--text); }
  .nav-links a:hover { color: var(--green-light); }
  nav.scrolled .nav-links a:hover { color: var(--green); }

  .nav-cta {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--green);
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    transition: background 0.3s;
  }
  .nav-cta:hover { background: var(--green-dark); }

  /* ─── MOBILE NAV BURGER + MENU ─── */
  .nav-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none; border: none; cursor: pointer;
    padding: 8px; margin: -8px;
  }
  .nav-burger span { display:block; width: 26px; height: 2px; background: #fff; transition: transform .3s ease, opacity .3s ease, background .4s ease; }
  nav.scrolled .nav-burger span { background: var(--text); }
  .nav-burger.open span { background: #fff; }
  .nav-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2){ opacity: 0; }
  .nav-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    position: fixed; inset: 0; z-index: 1050;
    background: var(--green-dark);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .35s ease;
  }
  .mobile-menu.open { opacity: 1; pointer-events: auto; }
  .mobile-menu ul { list-style:none; text-align:center; display:flex; flex-direction:column; gap: 2px; }
  .mobile-menu a {
    font-family: var(--font-display); font-weight: 300;
    font-size: 34px; line-height: 1.3; color: #fff;
    cursor: pointer; display:block; padding: 11px 24px; text-decoration:none;
  }
  .mobile-menu a:last-child { margin-top: 18px; font-size: 13px; font-family: var(--font-body); letter-spacing:0.14em; text-transform:uppercase; border:1px solid rgba(255,255,255,0.4); padding: 15px 30px; }
  .mobile-menu-close { position:absolute; top: 20px; right: 24px; background:none; border:none; color:#fff; font-size:42px; line-height:1; cursor:pointer; font-family: var(--font-body); }

  /* ═══════════ HOME — CARDS (EXACT PPTX LAYOUT) ═══════════ */
  .hs-bg { position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
  .hs-overlay { position:absolute; inset:0; z-index:1; }

  /* content fills the card: head group starts ~1/4 down, foot group sits
     directly beneath it (no longer stretched to the card's bottom edge).
     Fine-tune: per the PPT brief (RTA_NEW WEBSITE_MAIN PAGES ONLY.pptx),
     eyebrow starts ~25% down the card and the foot block (statement +
     button) follows immediately after the title with only a small gap —
     not pinned to the bottom of the viewport. The previous `margin-top:auto`
     on .hs-foot stretched it to the bottom of a min-height:100vh box, so on
     any viewport taller than the design's reference frame, a big empty gap
     of background image opened up between the title and the button. */
  .hs-content {
    position: relative; z-index: 2; width: 100%;
    min-height: 100%;
    display: flex; flex-direction: column;
    /* 26% / 14% of the card's height, same percentages as before, but
       clamped to the #stackWindow height range (640-980px) above instead
       of raw vh — keeps the head/foot positions proportional to the
       actual card size at any window height. */
    padding: clamp(166px, 26vh, 255px) clamp(28px,6vw,90px) clamp(90px, 14vh, 137px);
    max-width: 720px;
  }
  .hs-foot { margin-top: 28px; }

  /* vertical index label up the left edge */
  .hs-index {
    position:absolute; left: clamp(12px,2.2vw,28px); top: 50%; z-index: 3;
    writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
    font-family: var(--font-body); font-size: 11px; letter-spacing: 0.26em;
    text-transform: uppercase; color: rgba(255,255,255,0.72);
  }

  .hs-eyebrow { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sand); margin: 0 0 18px; line-height:1.5; }
  .hs-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(34px, 4.1vw, 56px); line-height: 1.04; letter-spacing: 0.005em; color:#fff; margin: 0; }
  .hs-title em { font-style: normal; }
  .hs-statement { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; margin: 0 0 8px; line-height: 1.6; }
  .hs-countries { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.78); line-height: 1.7; margin: 0 0 26px; }
  .hs-tagline { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin: 0 0 26px; line-height:1.6; }
  .hs-sub { font-family: var(--font-body); font-size: 14px; line-height: 1.8; font-weight: 300; color: rgba(255,255,255,0.85); max-width: 440px; margin: 0 0 26px; }
  .hs-cta { display:flex; flex-wrap:wrap; gap: 14px; align-items:center; }

  .btn-ghost { display:inline-flex; align-items:center; gap:12px; font-family: var(--font-body); font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:#fff; background:transparent; border:1px solid rgba(255,255,255,0.55); padding:15px 28px; cursor:pointer; transition: background .3s, border-color .3s; }
  .btn-ghost:hover { background: rgba(255,255,255,0.14); border-color:#fff; }
  .btn-play { display:inline-flex; align-items:center; gap:10px; background:none; border:none; color:#fff; font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; cursor:pointer; padding:15px 6px; }
  .btn-play svg { transition: transform .3s; }
  .btn-play:hover svg { transform: scale(1.08); }

  /* HERO — eyebrow + tagline + headline near the top, paragraph + buttons at the bottom */
  .hs-hero .hs-content { padding-top: clamp(122px, 19vh, 186px); padding-bottom: clamp(102px, 16vh, 157px); max-width: 600px; }
  .hs-hero .hs-eyebrow { margin-bottom: 4px; text-transform: none; font-size: 18px; letter-spacing: 0.01em; color: #fff; font-weight: 400; }
  .hs-hero .hs-tagline { margin: 0 0 28px; text-transform: none; font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.88); }
  .hs-hero .hs-title { font-size: clamp(42px, 5.6vw, 82px); line-height: 0.95; font-weight: 300; margin-bottom: 22px; }

  .scroll-cue { position:absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--font-body); font-size: 10px; letter-spacing:0.24em; text-transform:uppercase; color: rgba(255,255,255,0.6); }
  .scroll-cue span { width:1px; height: 40px; background: linear-gradient(rgba(255,255,255,0.75), transparent); animation: cueMove 2s ease-in-out infinite; }
  @keyframes cueMove { 0%,100%{ transform: scaleY(0.45); transform-origin: top; opacity:.4;} 50%{ transform: scaleY(1); opacity:1;} }

  .hs-hero .hs-cta { flex-wrap: nowrap !important; align-items: center; }
  .hs-hero .hs-cta .btn-primary, .hs-hero .hs-cta .btn-play { width: auto !important; white-space: nowrap !important; }
  .hs-hero .hs-foot { margin-top: 28px; }

  /* CONTACT — fully centered */
  .hs-contact .hs-content { align-items: center; justify-content: center; text-align: center; padding: 0 clamp(28px,6vw,90px); max-width: 720px; margin: 0 auto; }
  .hs-contact .hs-title { font-size: clamp(42px, 5.4vw, 74px); margin: 16px 0; }
  .hs-contact .hs-eyebrow { color: rgba(255,255,255,0.85); margin-bottom: 0; }
  .hs-contact .hs-sub { max-width: 460px; margin: 0 auto 26px; }

  @media (max-width: 768px) {
    .hs-content { padding: clamp(147px, 23vh, 225px) 22px clamp(83px, 13vh, 127px) 34px; max-width: 100%; }
    .hs-hero .hs-content { padding-top: clamp(109px, 17vh, 166px); padding-left: 22px; }
    .hs-index { left: 9px; font-size: 9px; letter-spacing: 0.18em; }
    .hs-sub { max-width: 100%; }
    .hs-cta { width: 100%; }
    .hs-cta .btn-ghost, .hs-cta .btn-primary { width: 100%; justify-content: center; }
    /* Fine-tune: the base rule above (.hs-hero .hs-cta { flex-wrap: nowrap
       !important; }) forces "Explore Our Destinations" + "Watch Our Story"
       onto one non-wrapping row at any width, which is fine on desktop but
       pushes "Watch Our Story" off the right edge of a phone screen. On
       mobile, stack them instead — Watch Our Story moves directly under
       the Explore button. Needs !important to beat the base rule's
       !important (same specificity, this rule is later in the file). */
    .hs-hero .hs-cta { flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 14px; }
    .hs-hero .hs-cta .btn-primary, .hs-hero .hs-cta .btn-play { width: auto; padding: 13px 20px; font-size: 11px; }
    .hs-contact .hs-content { padding: 0 24px; }
    .hs-contact .hs-cta .btn-ghost { width: auto; }
    /* Sticky card-stack effect now runs on mobile too (see #stackWindow /
       #stackDriver / .layer rules below — no longer overridden here).
       Only thing we still need on small screens: a touch-safe driver
       height, since 0.9*vh panels can get tall on short phone viewports
       with on-screen browser chrome. Handled via JS (panelScroll()), so
       no override needed here. */
  }

  /* ─── HOMEPAGE: LAYERED STACKING SECTIONS ─── */
  /* Fine-tune: height was pure 100dvh, so the card (and everything inside
     it) scaled 1:1 with whatever the browser window happened to be. Drag
     the window very short and the head/foot text + padding compressed
     into a sliver; drag it very tall and the same text sat lost in a huge
     box — both read as "pulling out of proportion" on resize. Clamping
     the window's height keeps the card itself within a sane range; the
     .hs-content padding below is clamped to match so the PPT-brief
     proportions hold across that whole range instead of just at one
     viewport height. */
  #stackWindow {
    position: sticky;
    top: 0;
    height: clamp(640px, 100dvh, 980px);
    overflow: hidden;
    z-index: 0;
  }

  #stackScope {
    position: relative;
  }

  #stackDriver {
    height: 480vh; /* scroll distance for 4 panels */
  }

  .layer {
    position: absolute;
    inset: 0;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    will-change: transform;
  }

  .layer-0 { z-index: 1; }
  .layer-1 { z-index: 2; transform: translateY(100%); }
  .layer-2 { z-index: 3; transform: translateY(100%); }
  .layer-3 { z-index: 4; transform: translateY(100%); }
  .layer-4 { z-index: 5; transform: translateY(100%); }
  .layer-5 { z-index: 6; transform: translateY(100%); }

  /* Mobile nav */
  /* Fine-tune: this block sits very early in the stylesheet (verbatim
     prototype source order), but most of the selectors it used to target
     below (.layer-content, .hero-title, .dest-*, .detail-*, .cta-banner,
     .home-intro, footer...) have their unconditional base rule defined
     FURTHER DOWN in the file. Same specificity + later source order means
     the base rule silently wins regardless of the media query matching —
     so those overrides were dead code on every real phone. Only nav (whose
     base rule is above, at line 42) is safe to override here; everything
     else has been moved into the @media block near the end of the file
     (after every base rule it touches), where it actually takes effect. */
  @media (max-width: 768px) {
    nav { padding: 0 20px; }
    .nav-links { display: none; }
    .nav-cta { display: none; }
    .nav-burger { display: flex; }
  }

  .layer-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
  }
  .layer:hover .layer-bg { transform: scale(1.02); }

  .layer-overlay {
    position: absolute;
    inset: 0;
  }

  .layer-content {
    position: relative;
    z-index: 2;
    padding: 64px 80px;
    width: 100%;
  }

  .layer-eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 16px;
  }

  .layer-title {
    font-family: var(--font-display);
    font-size: clamp(52px, 7vw, 96px);
    font-weight: 300;
    line-height: 1;
    color: var(--white);
    margin-bottom: 20px;
  }
  .layer-title em {
    font-style: normal;
    font-weight: 300;
  }

  .layer-sub {
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.8);
    margin-bottom: 32px;
    max-width: 480px;
    line-height: 1.6;
  }

  .layer-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.5);
    padding: 14px 28px;
    cursor: pointer;
    background: transparent;
    transition: background 0.3s, border-color 0.3s;
  }
  .layer-btn:hover { background: rgba(255,255,255,0.15); border-color: white; }
  .layer-btn svg { transition: transform 0.3s; }
  .layer-btn:hover svg { transform: translateX(4px); }

  /* Hero section (first layer) */
  .hero-layer .layer-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 120px 80px 80px;
  }
  .hero-tagline {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 24px;
  }
  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(64px, 9vw, 130px);
    font-weight: 300;
    line-height: 0.95;
    color: var(--white);
    margin-bottom: 32px;
  }
  .hero-title em { font-style: normal; }
  .hero-desc {
    font-family: var(--font-body);
    font-size: 15px;
    color: rgba(255,255,255,0.8);
    max-width: 420px;
    line-height: 1.7;
    margin-bottom: 48px;
    font-weight: 300;
  }
  .hero-cta-row { display: flex; gap: 16px; align-items: center; }
  .btn-primary {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--green);
    border: none;
    padding: 16px 36px;
    cursor: pointer;
    transition: background 0.3s;
  }
  .btn-primary:hover { background: var(--green-dark); }
  /* NOTE: a second, conflicting .btn-ghost rule (border:none, used to live
     here) was removed. It came from a verbatim full-stylesheet copy of the
     prototype and was never actually wired to any element in the split
     PHP build (.btn-ghost is only used on the 4 homepage stacking cards —
     see index.php). Because it shared the same selector/specificity as the
     real .btn-ghost rule above but appeared later in the file, it silently
     won the cascade on every viewport and stripped the border off
     "Discover Destinations" / "Our Services" / "Meet the Tribe". */

  /* Scroll label floating left on layers */
  .layer-index {
    position: absolute;
    left: 32px;
    bottom: 50%;
    transform: translateY(50%) rotate(-90deg);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
  }

  /* ─── DESTINATIONS PAGE ─── */
  .dest-hero {
    height: 60vh;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }
  .dest-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
  }
  .dest-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
  }
  .dest-hero-content {
    position: relative;
    z-index: 1;
    padding: 64px 80px;
    width: 100%;
  }
  .page-label {
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 16px;
  }
  .dest-hero-title {
    font-family: var(--font-display);
    font-size: clamp(48px, 6vw, 80px);
    font-weight: 300;
    color: white;
    line-height: 1;
    margin-bottom: 16px;
  }
  .dest-hero-title em { font-style: normal; }
  .dest-hero-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    max-width: 560px;
    line-height: 1.7;
    font-weight: 300;
  }

  /* Destination intro strip */
  .dest-intro {
    background: var(--white);
    padding: 64px 80px;
    display: flex;
    gap: 80px;
    align-items: flex-start;
  }
  .dest-intro-headline {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 300;
    color: var(--green);
    line-height: 1.1;
    flex: 1;
    max-width: 400px;
  }
  .dest-intro-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    font-weight: 300;
    padding-top: 8px;
  }

  /* Destination grid */
  .dest-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--cream);
    padding: 4px;
    gap: 4px;
  }
  .dest-card {
    position: relative;
    height: 65vh;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
  }
  .dest-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s ease;
  }
  .dest-card:hover .dest-card-bg { transform: scale(1.05); }
  .dest-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
    transition: opacity 0.4s;
  }
  .dest-card:hover .dest-card-overlay { opacity: 0.9; }
  .dest-card-content {
    position: relative;
    z-index: 1;
    padding: 36px 40px;
    width: 100%;
  }
  .dest-card-eyebrow {
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 8px;
  }
  .dest-card-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 400;
    color: white;
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .dest-card-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    font-weight: 300;
    margin-bottom: 20px;
  }
  .dest-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s, transform 0.4s;
  }
  .dest-card:hover .dest-card-link { opacity: 1; transform: translateY(0); }

  /* ─── DESTINATION DETAIL PAGE ─── */
  .detail-hero {
    height: 90vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .detail-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
  }
  .detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  }
  .detail-hero-content {
    position: relative;
    z-index: 1;
    padding: 120px 80px 80px;
    max-width: 640px;
  }
  .detail-eyebrow {
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 20px;
  }
  .detail-title {
    font-family: var(--font-display);
    font-size: clamp(52px, 7vw, 88px);
    font-weight: 300;
    color: white;
    line-height: 1;
    margin-bottom: 8px;
  }
  .detail-title em { font-style: normal; }
  .detail-subtitle {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 300;
    font-style: normal;
    color: rgba(255,255,255,0.75);
    margin-bottom: 32px;
  }
  .detail-desc {
    font-size: 15px;
    color: rgba(255,255,255,0.8);
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 40px;
  }

  /* Detail body */
  .detail-body {
    background: var(--white);
    padding: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .detail-section-title {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 24px;
    font-style: normal;
  }
  .detail-body-text {
    font-size: 15px;
    line-height: 1.9;
    color: #555;
    font-weight: 300;
  }
  .detail-highlights {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .detail-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-size: 14px;
    color: #555;
    font-weight: 300;
    line-height: 1.5;
  }
  .detail-highlights li::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--green);
    flex-shrink: 0;
    margin-top: 10px;
  }

  /* Destinations sub image strip */
  .detail-images {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4px;
    height: 50vh;
  }
  .detail-image {
    background-size: cover;
    background-position: center;
  }

  /* CTA banner */
  .cta-banner {
    background: var(--green);
    padding: 72px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  .cta-banner-text h2 {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 300;
    color: white;
    line-height: 1.1;
    margin-bottom: 12px;
  }
  .cta-banner-text p {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    font-weight: 300;
    max-width: 480px;
    line-height: 1.7;
  }
  .btn-white {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green);
    background: var(--white);
    border: none;
    padding: 18px 40px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s, color 0.3s;
    flex-shrink: 0;
  }
  .btn-white:hover { background: var(--cream); }

  /* ─── FOOTER ─── */
  footer {
    background: var(--text);
    padding: 64px 80px 40px;
    color: rgba(255,255,255,0.6);
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 32px;
  }
  .footer-logo img { height: 32px; filter: brightness(0) invert(0.8); margin-bottom: 16px; }
  .footer-tagline {
    font-family: var(--font-display);
    font-size: 18px;
    font-style: normal;
    color: rgba(255,255,255,0.8);
    line-height: 1.4;
  }
  .footer-col h4 {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 20px;
  }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-col ul li a {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s;
  }
  .footer-col ul li a:hover { color: white; }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255,255,255,0.3);
  }

  /* Fine-tune: on real phone widths the prototype's 4-col footer grid and
     space-between footer-bottom (two long strings side by side) get
     cramped/overlapping. Stack everything in one column instead. This
     override must live AFTER the base .footer-top/.footer-bottom rules
     above (same specificity — later source order wins), otherwise it is
     silently beaten by them regardless of the media query matching. */
  @media (max-width: 768px) {
    .footer-top { grid-template-columns: 1fr; gap: 40px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
  }

  /* ─── BACK BUTTON ─── */
  .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    background: none;
    border: none;
    margin-bottom: 20px;
    transition: color 0.3s;
  }
  .back-btn:hover { color: white; }

  /* ─── SCROLL PROGRESS ─── */
  .scroll-progress {
    position: fixed;
    top: 72px;
    left: 0;
    height: 2px;
    background: var(--green);
    z-index: 999;
    transition: width 0.1s linear;
  }

  /* ─── HOMEPAGE NON-LAYERED SECTIONS ─── */
  /* Fine-tune: per the PPT brief (slide 6 / closing band), the gap above
     this section (right after the stacking cards) is small while the gap
     below (before the footer) is noticeably bigger — not symmetric like
     the old 100px/100px. Padding split accordingly. */
  .home-intro {
    background: var(--white);
    padding: 56px 80px 90px;
    display: flex;
    gap: 80px;
    align-items: center;
  }
  .home-intro-left {
    flex: 1;
  }
  .home-intro-label {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 24px;
  }
  .home-intro-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 300;
    line-height: 1.1;
    color: var(--text);
    margin-bottom: 20px;
  }
  .home-intro-title em { font-style: normal; color: var(--green); }
  .home-intro-text {
    font-size: 15px;
    line-height: 1.9;
    color: #666;
    font-weight: 300;
    margin-bottom: 28px;
    /* Fine-tune: 520px wrapped this onto 5 lines; the brief shows it as
       3 lines. Widening to 620px (still comfortably short of the image
       column) matches the brief's line breaks at this font size. */
    max-width: 620px;
  }
  /* Fine-tune: per brief, the countries list sits below the "Explore Our
     Africa" button with clear breathing room, not crowding straight
     under it. */
  .home-intro-countries {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6a6a64;
    margin: 34px 0 0;
  }
  /* Fine-tune: per the PPT brief, this image is a wide ~1.74:1 rectangle
     (5.89in x 3.38in). A fixed height:480px held that ratio only at the
     specific desktop width the design was eyeballed at — at any narrower
     column width the box got proportionally taller/more square than the
     brief, which read as "the image is too high" and crowded the layout.
     aspect-ratio keeps the brief's proportions at any container width. */
  .home-intro-right {
    flex: 1;
    aspect-ratio: 1.74;
    height: auto;
    max-height: 480px;
    background-size: cover;
    background-position: center top;
  }

  /* ═══════════ SHARED EDITORIAL PAGE HERO ═══════════ */
  .page-hero {
    height: 74vh;
    min-height: 520px;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }
  .page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
  .page-hero-overlay { position: absolute; inset: 0; }
  .page-hero-content { position: relative; z-index: 1; padding: 80px; width: 100%; }
  .page-hero-kicker {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 300;
    font-size: clamp(22px, 2.6vw, 34px);
    color: rgba(255,255,255,0.82);
    margin-top: 10px;
  }
  .page-hero-title {
    font-family: var(--font-display);
    font-size: clamp(48px, 7vw, 100px);
    font-weight: 300;
    color: #fff;
    line-height: 0.98;
  }
  .page-hero-title em { font-style: normal; }

  /* generic editorial section + eyebrow */
  .sec { padding: 110px 80px; }
  .sec-white { background: var(--white); }
  .sec-cream { background: var(--cream); }
  .sec-sand  { background: var(--sand); }
  .eyebrow {
    font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--green); margin-bottom: 22px;
  }
  .sec-head {
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(34px, 4.2vw, 56px); line-height: 1.08; color: var(--text);
    max-width: 18ch;
  }
  .sec-head em { font-style: normal; color: var(--green); }

  /* ═══════════ SERVICES ═══════════ */
  .who-what {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 96px; align-items: start;
  }
  .who-what p.lead {
    font-family: var(--font-display); font-weight: 300; font-style: normal;
    font-size: clamp(26px, 2.8vw, 36px); line-height: 1.3; color: var(--green); margin-bottom: 28px;
  }
  .who-what p.body { font-size: 15px; line-height: 1.9; color: #555; font-weight: 300; }
  .role-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
  .role-chips span {
    font-size: 12px; letter-spacing: 0.04em; color: var(--green);
    border: 1px solid var(--sand); padding: 9px 16px; background: var(--cream);
  }
  .do-list { list-style: none; display: flex; flex-direction: column; }
  .do-list li {
    display: flex; gap: 20px; padding: 20px 0; border-top: 1px solid rgba(0,0,0,0.09);
    font-size: 15px; color: #444; font-weight: 300; line-height: 1.5;
  }
  .do-list li:last-child { border-bottom: 1px solid rgba(0,0,0,0.09); }
  .do-list li .num {
    font-family: var(--font-display); font-size: 18px; color: var(--green-light);
    flex-shrink: 0; width: 28px;
  }

  /* DMC journey timeline */
  .journey { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 64px; }
  .journey-step {
    padding: 32px 0; border-top: 1px solid rgba(255,255,255,0.18);
    display: grid; grid-template-columns: 56px 1fr; gap: 8px 24px; align-items: baseline;
  }
  .journey-num {
    font-family: var(--font-display); font-size: 30px; font-weight: 300;
    color: rgba(255,255,255,0.45); line-height: 1;
  }
  .journey-step h4 {
    font-family: var(--font-display); font-size: 24px; font-weight: 400; color: #fff; line-height: 1.1;
  }
  .journey-step p {
    grid-column: 2; font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.62); font-weight: 300;
  }

  /* ═══════════ TRIBE ═══════════ */
  .story-block {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
  }
  .story-block.reverse .story-text { order: 2; }
  .story-text { padding: 96px 80px; display: flex; flex-direction: column; justify-content: center; }
  .story-text .big {
    font-family: var(--font-display); font-weight: 300; line-height: 1;
    font-size: clamp(44px, 5.5vw, 78px); color: var(--text); margin-bottom: 28px;
  }
  .story-text .big em { font-style: normal; color: var(--green); }
  .story-text p { font-size: 15px; line-height: 1.95; color: #555; font-weight: 300; max-width: 46ch; }
  .story-text p + p { margin-top: 18px; }
  .story-img { min-height: 560px; background-size: cover; background-position: center; }

  .tribe-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 64px;
  }
  .tribe-card { background: var(--cream); }
  .tribe-card .photo { aspect-ratio: 3/4; background-size: cover; background-position: center top; }
  .tribe-card .info { padding: 28px 28px 36px; }
  .tribe-card h3 {
    font-family: var(--font-display); font-size: 30px; font-weight: 400; color: var(--text); line-height: 1;
  }
  .tribe-card .role {
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin: 12px 0 18px;
  }
  .tribe-card .traits { display: flex; flex-wrap: wrap; gap: 8px; }
  .tribe-card .traits span {
    font-size: 12px; color: #6a6a64; border: 1px solid var(--sand); padding: 6px 12px; font-weight: 300;
  }

  .unity {
    background: var(--green); color: #fff; padding: 120px 80px; text-align: center;
    display: flex; flex-direction: column; align-items: center;
  }
  .unity img { height: 120px; margin-bottom: 40px; filter: brightness(0) invert(1); opacity: 0.92; }
  .unity h2 {
    font-family: var(--font-display); font-weight: 300; font-size: clamp(36px, 4.5vw, 60px);
    line-height: 1.1; margin-bottom: 28px;
  }
  .unity h2 em { font-style: normal; }
  .unity p {
    max-width: 620px; font-size: 16px; line-height: 1.9; color: rgba(255,255,255,0.78); font-weight: 300;
  }

  /* ═══════════ CONTACT ═══════════ */
  .contact-wrap {
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 80px;
    background: var(--white); padding: 100px 80px;
  }
  .contact-form { display: flex; flex-direction: column; gap: 24px; }
  .field { display: flex; flex-direction: column; gap: 8px; }
  .field.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .field label, .form-grid label {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green);
  }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .form-cell { display: flex; flex-direction: column; gap: 8px; }
  .form-cell.full { grid-column: 1 / -1; }
  .contact-form input, .contact-form select, .contact-form textarea {
    font-family: var(--font-body); font-size: 15px; color: var(--text);
    border: none; border-bottom: 1px solid var(--sand); background: transparent;
    padding: 12px 2px; outline: none; transition: border-color 0.3s; font-weight: 300; width: 100%;
  }
  .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--green); }
  .contact-form textarea { resize: vertical; min-height: 90px; }
  .contact-form .btn-primary { align-self: flex-start; margin-top: 12px; border: none; }
  .form-thanks {
    display: none; flex-direction: column; gap: 16px; padding: 40px 0;
  }
  .form-thanks.show { display: flex; }
  .form-thanks h3 { font-family: var(--font-display); font-weight: 300; font-size: 40px; color: var(--green); }
  .form-thanks p { font-size: 15px; color: #555; font-weight: 300; line-height: 1.8; max-width: 44ch; }

  .contact-aside { border-left: 1px solid rgba(0,0,0,0.08); padding-left: 80px; }
  .contact-aside h4 {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); margin-bottom: 16px;
  }
  .contact-aside .detail { margin-bottom: 36px; }
  .contact-aside .detail p { font-size: 16px; color: var(--text); font-weight: 300; line-height: 1.6; }
  .contact-aside .detail p.muted { color: #888; font-size: 14px; }
  .socials { display: flex; gap: 14px; }
  .socials a {
    width: 42px; height: 42px; border: 1px solid var(--sand); display: flex; align-items: center; justify-content: center;
    color: var(--green); transition: background 0.3s, color 0.3s; cursor: pointer;
  }
  .socials a:hover { background: var(--green); color: #fff; }
  .socials a svg { width: 18px; height: 18px; }

  /* footer socials */
  .footer-socials { display: flex; gap: 12px; margin-top: 20px; }
  .footer-socials a { color: rgba(255,255,255,0.5); transition: color 0.3s; cursor: pointer; }
  .footer-socials a:hover { color: #fff; }

  @media (max-width: 768px) {
    .page-hero-content { padding: 40px 28px; }
    .sec { padding: 64px 28px; }
    .who-what { grid-template-columns: 1fr; gap: 48px; }
    .journey { grid-template-columns: 1fr; gap: 0; }
    .story-block, .story-block.reverse { grid-template-columns: 1fr; }
    .story-block.reverse .story-text { order: 0; }
    .story-text { padding: 56px 28px; }
    .story-img { min-height: 340px; }
    .tribe-grid { grid-template-columns: 1fr; gap: 24px; }
    .unity { padding: 72px 28px; }
    .contact-wrap { grid-template-columns: 1fr; gap: 48px; padding: 56px 28px; }
    .contact-aside { border-left: none; padding-left: 0; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 40px; }
    .form-grid { grid-template-columns: 1fr; }
    .field.row2 { grid-template-columns: 1fr; }

    /* Rescued from the early nav-area @media block (~line 252) — those
       rules sat BEFORE their unconditional base rule in the file, so the
       base rule (later source order, same specificity) always won and
       silently cancelled every one of these on real phones. This was the
       cause of the "blank white area" on the homepage (the .home-intro
       row was rendering at full desktop padding/row-layout, squeezing its
       text + image into slivers a phone screen barely shows) and of
       several other cramped mobile sections. Placed here, after every
       base rule above, so they actually apply. */
    .layer-content { padding: 40px 28px; }
    .hero-title { font-size: clamp(48px, 12vw, 80px); }
    .layer-title { font-size: clamp(40px, 10vw, 72px); }
    .dest-intro { flex-direction: column; gap: 24px; padding: 40px 28px; }
    .dest-grid { grid-template-columns: 1fr; }
    .dest-card { height: 55vw; min-height: 260px; }
    .dest-hero-content { padding: 40px 28px; }
    .detail-hero-content { padding: 100px 28px 40px; }
    .detail-body { grid-template-columns: 1fr; gap: 40px; padding: 40px 28px; }
    .cta-banner { flex-direction: column; padding: 48px 28px; }
    .home-intro { flex-direction: column; padding: 60px 28px; gap: 32px; }
    .home-intro-right { width: 100%; height: 260px; }
    footer { padding: 48px 28px 32px; }
  }