/* 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;
    /* All type set to Arial per client decision (2026-07-13), replacing the
       prior Archivo Narrow (display) / Arial Nova (body) pairing. Helvetica
       kept as a fallback for systems without Arial. */
    --font-display: Arial, Helvetica, sans-serif;
    --font-body:    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;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--green);
    border-radius: 4px;
    padding: 10px 26px;
    transition: background 0.3s;
  }
  .nav-logo:hover { background: var(--green-dark); }

  .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: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.85);
    border-radius: 4px;
    padding: 8.5px 24.5px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
  }
  .nav-cta:hover { background: var(--white); color: var(--green-dark); border-color: var(--white); }
  nav.scrolled .nav-cta { color: var(--green); border-color: var(--green); }
  nav.scrolled .nav-cta:hover { background: var(--green); color: var(--white); border-color: var(--green); }

  /* ─── 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;
    /* Slightly transparent (was solid var(--green-dark)) + a touch of blur
       so the page behind shows through faintly instead of a flat panel. */
    background: rgba(43, 65, 39, 0.92);
    backdrop-filter: blur(6px);
    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); }

  /* ─── DESTINATIONS MEGA-MENU (desktop only - hidden with .nav-links
     below 768px, mobile keeps the plain link in .mobile-menu) ───
     Hover or keyboard-focus "Our Destinations" opens a panel with the
     4 destinations on the left and a crossfading photo preview on the
     right. See assets/js/main.js for the open/close/crossfade logic. */
  .has-mega{ position:relative; }

  .mega-trigger{ display:inline-flex; align-items:center; gap:6px; }
  .mega-trigger svg{ transition: transform 0.3s ease; opacity:0.8; }
  .has-mega.is-open .mega-trigger svg{ transform:rotate(180deg); }

  .mega-panel{
    position:absolute;
    top:calc(100% + 18px);
    left:50%;
    transform:translate(-50%,-8px);
    width:max-content;
    max-width:calc(100vw - 48px);
    background:var(--cream);
    border-radius:10px;
    box-shadow:0 24px 48px -12px rgba(20,24,16,0.28), 0 2px 8px rgba(20,24,16,0.08);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.3s;
    z-index:1100;
  }
  .has-mega.is-open .mega-panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0);
    transition:opacity 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0s;
  }
  .mega-panel::before{
    content:"";
    position:absolute;
    top:-7px; left:50%; transform:translateX(-50%) rotate(45deg);
    width:14px; height:14px;
    background:var(--cream);
    border-radius:2px 0 0 0;
  }

  .mega-panel-inner{ display:flex; padding:14px; gap:16px; }

  .mega-list{ list-style:none; width:250px; flex-shrink:0; display:flex; flex-direction:column; }
  .mega-list li{ border-radius:6px; overflow:hidden; }
  .mega-list a{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:3px;
    padding:13px 14px;
    font-family:var(--font-display);
    font-weight:400;
    font-size:16px;
    line-height:1.2;
    color:var(--text);
    border-radius:6px;
    white-space:normal;
    transition:background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
  }
  .mega-list a .mega-list-sub{
    display:block;
    font-family:var(--font-body);
    font-weight:400;
    font-size:11px;
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:var(--warm-grey);
    white-space:normal;
    line-height:1.4;
  }
  .mega-list a:hover,
  .mega-list a:focus-visible,
  .mega-list a.is-active{
    background:rgba(61,92,56,0.08);
    color:var(--green-dark);
    padding-left:18px;
  }
  .mega-list a.is-active .mega-list-sub{ color:var(--green-light); }

  .mega-list-viewall a{
    margin-top:6px;
    padding-top:12px;
    border-top:1px solid var(--sand);
    border-radius:0;
    font-family:var(--font-body);
    font-size:12px;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--green);
    white-space:nowrap;
  }
  .mega-list-viewall a:hover{ background:none; color:var(--green-dark); padding-left:14px; }

  .mega-preview{ position:relative; width:260px; flex-shrink:0; border-radius:8px; overflow:hidden; }
  .mega-preview-frame{ position:relative; width:100%; padding-top:76%; }
  .mega-preview-img{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 0.45s ease;
  }
  .mega-preview-img.is-active{ opacity:1; }
  .mega-preview-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(13,21,8,0) 40%, rgba(13,21,8,0.78) 100%);
  }
  .mega-preview-content{ position:absolute; left:0; right:0; bottom:0; padding:16px; color:#fff; }
  .mega-preview-tag{
    font-family:var(--font-body); font-size:10px; letter-spacing:0.12em;
    text-transform:uppercase; color:rgba(255,255,255,0.8); margin-bottom:4px;
  }
  .mega-preview-title{ font-family:var(--font-display); font-weight:400; font-size:20px; margin-bottom:8px; }
  .mega-preview-link{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--font-body); font-size:11px; font-weight:600;
    letter-spacing:0.1em; text-transform:uppercase; color:#fff;
  }

  /* ═══════════ 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; }
  /* "Meet the Tribe" card background - desktop image lives here (not
     inline) specifically so the mobile media query below can swap it
     cleanly for a different photo with no inline-style specificity
     fights. See the MEET THE TRIBE MOBILE rule for the swap. */
  .hs-bg-tribe { background-image: url("../img/home/card-tribe.webp"); background-position: center 20%; }

  /* Always-on video layer (Destinations card) - fully replaces the static
     still as the card's background. object-fit:cover guarantees it fills
     the card's box edge-to-edge at ANY card size (the box is always
     cropped-to-fill, never letterboxed) - no JS-driven hover/opacity state
     and no corrective scale hack needed. Sits above .hs-bg (z-index: 1 vs
     .hs-bg's 0) - the still shows through only until the video has an
     actual frame to paint, which avoids the <video poster> letterboxing
     bug (a poster image doesn't honour object-fit the way a real video
     frame does, which was the cause of the black side-bars). Flip kept
     for visual consistency with the other (still-image) cards, which are
     also mirrored. */
  .hs-video {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%; object-fit: cover;
    pointer-events: none;
    transform: scaleX(-1);
  }

  .hs-sound-toggle {
    position: absolute; z-index: 4; bottom: 28px; right: 28px;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
  }
  .hs-sound-toggle:hover { background: rgba(0,0,0,0.6); border-color: #fff; }
  .hs-sound-toggle .icon-unmuted { display: none; }
  .hs-sound-toggle.is-unmuted .icon-muted { display: none; }
  .hs-sound-toggle.is-unmuted .icon-unmuted { display: block; }

  /* 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(28px, 3.2vw, 42px); line-height: 1.1; 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; 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.11em; color: rgba(255,255,255,0.7); margin: 0 0 26px; line-height:1.6; }
  .hs-sub { font-family: var(--font-body); font-size: clamp(13px, 0.85vw, 15px); line-height: 1.6; 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: 12px; letter-spacing: 0.11em; color: rgba(255,255,255,0.88); }
  .hs-hero .hs-title { font-size: clamp(36px, 4.6vw, 62px); line-height: 1; 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(32px, 4vw, 50px); 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) {
    /* Mobile: text block for the 3 non-hero, non-contact stacking cards
       (Destinations / Services / "Who We Are" [Tribe]) pushed down so it
       starts below head-height on the Tribe card's 3-person photo, instead
       of overlapping faces. Same padding-top applied to all 3 for visual
       consistency between cards even though Destinations/Services don't
       have a face-overlap problem themselves. Position only - font sizes
       and everything else unchanged. */
    .hs-content { padding: clamp(285px, 44vh, 345px) 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;
    border-radius: 4px;
    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 {
    /* Same fix as .detail-hero / .page-hero: fixed height:60vh +
       overflow:hidden + bottom-anchored content was clipping the top of
       the eyebrow/title/subtitle stack whenever it grew taller than 60vh.
       min-height lets the box grow to fit instead of cutting it off.
       Matched to .page-hero's min-height (56vh/420px floor), plus a
       little extra (62vh/470px) to account for the 2-3 line intro
       paragraph this hero carries that Services' one-line kicker
       doesn't - without the extra room the longer paragraph pushes the
       whole bottom-anchored stack (and the title with it) higher than
       Services, so the copy sits at the same vertical position and
       doesn't jump when flipping between pages. */
    min-height: max(62vh, 470px);
    height: auto;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }
  .dest-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 15%;
  }
  .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: 80px 56px;
    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(40px, 4.6vw, 50px);
    font-weight: 300;
    color: white;
    line-height: 1;
    margin-bottom: 16px;
  }
  .dest-hero-title em { font-style: normal; }
  .dest-hero-sub {
    font-size: clamp(13px, 0.85vw, 15px);
    color: rgba(255,255,255,0.75);
    max-width: 560px;
    line-height: 1.5;
    font-weight: 300;
  }

  /* Destination intro strip */
  .dest-intro {
    background: var(--white);
    padding: 32px 56px;
    display: flex;
    gap: 80px;
    align-items: flex-start;
  }
  .dest-intro-left {
    flex: 1;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .dest-intro-headline {
    font-family: var(--font-display);
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--green);
    line-height: 1.25;
  }
  .dest-intro-tagline {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    font-weight: 300;
  }
  .dest-intro-text {
    flex: 1;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.6;
    color: #555;
    font-weight: 300;
    padding-top: 8px;
  }

  /* Our Africa map section */
  .dest-africa {
    background: var(--cream);
    padding: 32px 56px;
    text-align: center;
  }
  .dest-africa-img {
    width: 100%;
    max-width: 860px;
    height: auto;
    display: inline-block;
    margin: 0 auto;
  }

  /* Video block
     Sized by aspect-ratio (matching the source clips' native 16:9) rather
     than a fixed vh height, so the box's shape equals the video's shape -
     object-fit then has nothing to letterbox/crop, on any screen size.
     Bush and Beach's clip is a different native ratio (1104x720), so that
     page overrides this with an inline style - see its .dest-video div. */
  .dest-video {
    background: #000;
    aspect-ratio: 16 / 9;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .dest-video-player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .dest-video-play {
    position: relative;
    z-index: 2;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.8);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s, opacity 0.3s;
  }
  .dest-video-play svg { margin-left: 4px; }
  .dest-video-play:hover { background: rgba(255,255,255,0.15); transform: scale(1.05); }
  .dest-video.is-playing .dest-video-play {
    opacity: 0;
    pointer-events: none;
  }

  /* 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: 26px;
    font-weight: 400;
    color: white;
    line-height: 1.15;
    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 {
    /* Fine-tune: was a fixed height:60vh with overflow:hidden and content
       bottom-anchored (align-items:flex-end). Titles here are hard-wrapped
       to 2 lines via <br> in the markup, so whenever the eyebrow + 2-line
       title + subtitle + description stack taller than 60vh of the actual
       viewport (shorter windows, or a max-width test squeezing the column),
       the top of that stack got pushed above the box and clipped by
       overflow:hidden - cutting into the title. Switched to min-height so
       the box grows to fit its content instead of clipping it; bumped the
       floor slightly (60vh -> 65vh) since that was the ask (taller hero). */
    min-height: 65vh;
    position: relative;
    display: flex;
    align-items: flex-end;
    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: 80px 56px 53px;
    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(40px, 4vw, 54px);
    font-weight: 300;
    color: white;
    line-height: 1;
    margin-bottom: 8px;
  }
  .detail-title em { font-style: normal; }
  /* Urban Soul, Untamed Spirit - the <br> already forces "Urban Soul,"
     onto its own line; without help, "Untamed Spirit" was itself wrapping
     again inside the 640px column (3 lines total: Urban Soul, / Untamed /
     Spirit). Nowrap on desktop keeps the intended 2 lines; mobile still
     wraps since there's no width to spare there. */
  @media (min-width: 993px) {
    .detail-title-em-nowrap { white-space: nowrap; }
  }
  /* Zambezi Valley - was hardcoded to 2 lines via <br>; now runs as one
     line ("Zambezi Valley") on desktop, which also shortens the whole
     hero content stack (less risk of it needing more height than the
     hero has). Mobile still wraps if it needs to. */
  @media (min-width: 993px) {
    .detail-title-nowrap { white-space: nowrap; }
  }
  .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: clamp(14px, 1vw, 16px);
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    font-weight: 300;
    margin-bottom: 40px;
    /* This block sits inside a bottom-anchored hero (align-items:flex-end),
       so its own height determines how far up the whole eyebrow/title/
       subtitle stack gets pushed. The four destination-detail pages carry
       different-length copy here (some wrap to 3 lines, some to 4), which
       made the title jump between pages. Reserving a consistent 4-line
       min-height keeps every hero's copy at the same vertical position
       regardless of how many lines its own description happens to fill. */
    min-height: 6.4em;
  }

  /* Detail body */
  .detail-body {
    background: var(--white);
    padding: 32px 56px;
    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: clamp(14px, 1vw, 16px);
    line-height: 1.6;
    color: #555;
    font-weight: 300;
  }
  .detail-highlights {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .detail-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-size: 14px;
    color: #555;
    font-weight: 300;
    line-height: 1.3;
  }
  .detail-highlights li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    margin-top: 7px;
  }

  /* Destinations sub image strip */
  .detail-images {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4px;
    aspect-ratio: 3.2 / 1;
  }
  .detail-image {
    background-size: cover;
    background-position: center;
  }
  /* Modifier for image pairs that are both portrait-oriented sources -
     a shorter, evenly-split row crops much less aggressively than the
     default wide 2fr/1fr strip. */
  .detail-images--portrait-pair {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 1.8 / 1;
  }
  /* Modifier for pairs where the right-hand photo needs the wide column
     instead of the left (e.g. a landscape shot paired with a tighter
     close-up on the left). */
  .detail-images--wide-right {
    grid-template-columns: 1fr 2fr;
  }
  /* Modifier for a portrait-oriented pair kept at the default 2fr/1fr
     split - a taller row than the standard strip so neither photo gets
     zoomed in too tight. */
  .detail-images--tall {
    aspect-ratio: 2.9 / 1;
  }

  /* CTA banner */
  .cta-banner {
    background: var(--green);
    padding: 40px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  .cta-banner-text h2 {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 300;
    color: white;
    line-height: 1.15;
    margin-bottom: 12px;
  }
  .cta-banner-text p {
    font-size: clamp(13px, 0.85vw, 15px);
    color: rgba(255,255,255,0.75);
    font-weight: 300;
    max-width: 480px;
    line-height: 1.5;
  }
  .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;
    border-radius: 4px;
    padding: 18px 40px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background 0.3s, color 0.3s, transform 0.25s ease, box-shadow 0.25s ease;
    flex-shrink: 0;
  }
  .btn-white:hover {
    background: var(--cream);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  }
  .btn-white:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  }

  /* ─── VIDEO MODAL ───
     Reusable lightbox for any trigger with [data-video-modal="path.mp4"]
     (optionally data-video-poster="…" too). Markup lives once in
     footer.php and is shared by every page. See main.js for the open/
     close/focus logic. */
  .video-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(12,16,10,0.88);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  .video-modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
  }
  .video-modal-panel {
    position: relative;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    transform: scale(0.94) translateY(10px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .video-modal.is-open .video-modal-panel {
    transform: scale(1) translateY(0);
  }
  .video-modal-panel video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
  }
  .video-modal-close {
    /* Fine-tune: was top:-44px, floating above the panel. .video-modal-panel
       has overflow:hidden (needed to clip the video to its rounded
       corners), which was silently clipping the button too since it sat
       outside the panel's own box - the close button existed in the DOM
       with correct styles but was never actually visible/clickable.
       Moved inside the panel's bounds (matches the mobile treatment this
       rule already had) with a dark backdrop for contrast against bright
       video frames, so it can't be clipped again regardless of viewport. */
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s, border-color 0.25s;
  }
  .video-modal-close:hover { background: var(--green); border-color: var(--green); transform: rotate(90deg); }
  .video-modal-close svg { width: 16px; height: 16px; }

  @media (max-width: 640px) {
    .video-modal { padding: 0; }
    .video-modal-panel { max-width: 100%; border-radius: 0; aspect-ratio: auto; height: 100%; }
    .video-modal-close { top: 12px; right: 12px; }
  }

  /* ─── FOOTER ─── */
  footer {
    background: var(--text);
    padding: 64px 56px 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: 80px; filter: brightness(0) invert(0.8); margin-bottom: 16px; margin-left: -10px; }
  .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;
  }

  /* ─── SITE MAX WIDTH ───
     Fixed 1440px max-width on desktop, chosen after trialling several
     options (2026-07-10). Content stays full-bleed below the breakpoint. */
  @media (min-width: 993px) {
    #mainNav,
    .site-main,
    footer {
      max-width: 1440px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  /* ─── 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: 32px 56px;
    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(28px, 3vw, 38px);
    font-weight: 300;
    line-height: 1.2;
    color: var(--text);
    margin-bottom: 20px;
  }
  .home-intro-title em { font-style: normal; color: var(--green); }
  .home-intro-text {
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.6;
    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 {
    /* Fine-tune: was height:74vh (min-height:520px as a floor only) - too
       tall on Services/Our Tribe. Switched the 74vh down to a min-height
       (like .detail-hero) so it's shorter by default and, same as the
       destination fix, grows instead of clipping if content ever needs
       more room. Matched to .dest-hero's min-height (62vh/470px) so
       Services/Our Tribe are the same height as the Destinations hero. */
    min-height: max(62vh, 470px);
    height: auto;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }
  .page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
  /* Services hero photo: base rule matches the old inline position so
     desktop is unchanged. Position moved out of inline style purely so
     the mobile override below can win without a specificity fight. */
  .svc-hero-bg { background-position: center 4%; }
  .page-hero-overlay { position: absolute; inset: 0; }
  .page-hero-content { position: relative; z-index: 1; padding: 80px 56px; width: 100%; }
  .page-hero-kicker {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 300;
    font-size: clamp(12px, 1.1vw, 15px);
    color: rgba(255,255,255,0.82);
    margin-top: 10px;
    max-width: 480px;
    line-height: 1.5;
  }
  .page-hero-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 4.6vw, 50px);
    font-weight: 300;
    color: #fff;
    line-height: 1.02;
  }
  .page-hero-title em { font-style: normal; }
  /* Wordmark variant - the Tribe page hero uses the deck's literal
     "THE STORY · THE HEART · THE UNITY" line: one bold uppercase row
     instead of the default light, oversized multi-line editorial title
     used on other page-hero instances (Destinations, Services). */
  .page-hero-title--wordmark {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(22px, 3.2vw, 44px);
    letter-spacing: 0.03em;
    line-height: 1.3;
  }
  /* Slim variant - Services hero: the "RE imagine · RE define · RE invent
     · REthink Africa" line, and Tribe's "The Story · The Heart · The
     Unity" line. Layered on top of --wordmark (keeps its uppercase/
     font-family/letter-spacing), overriding weight/size. Font-size kept
     close to .dest-hero-title/.page-hero-title (55px) for visual
     consistency with Destinations/Services/Tribe, but capped 2px lower
     (53px) specifically so the longer "RE imagine..." line still fits on
     one line within the site's 1440px max content width - at 55px it
     measured ~1340px against ~1328px available and would have clipped
     against the hero's overflow:hidden. No width cap - desktop keeps it
     on one line (nowrap below); mobile wraps (see max-width:768px
     block). */
  .page-hero-title--slim {
    font-weight: 400;
    font-size: clamp(40px, 4.6vw, 50px);
  }
  @media (min-width: 993px) {
    .page-hero-title--slim { white-space: nowrap; }
  }

  /* generic editorial section + eyebrow */
  .sec { padding: 32px 56px; }
  .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;
  }
  /* Full-bleed section variant - drops .sec's side padding so a section
     (e.g. a photo grid) spans the full site-main width, matching the
     immersion/cta-banner full-bleed pattern. Text elements need their own
     .sec-full-inner wrapper to keep a readable side margin. Higher
     specificity (.sec.sec-full) so it wins over the mobile .sec padding
     override too. Used by the Services page "RE imagine Meetings" section
     + team gallery (2026-07-12). */
  .sec.sec-full { padding-left: 0; padding-right: 0; }
  /* Left inset matches the standard .sec side padding so the copy lines up
     with every other section's indent; right padding keeps long lines off
     the viewport edge. */
  .sec-full-inner { padding-left: 56px; padding-right: 56px; }
  @media (max-width: 768px) {
    .sec-full-inner { padding-left: 20px; padding-right: 20px; }
  }

  .sec-head {
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(28px, 3.2vw, 42px); line-height: 1.15; color: var(--text);
    max-width: 18ch;
  }
  .sec-head em { font-style: normal; color: var(--green); }
  /* Forces a heading onto one line on desktop (e.g. "RE imagine · Plan ·
     Manage · Deliver" on Services) - shrinks slightly at the low end of its
     own clamp range so long lines still fit, and wraps normally again on
     mobile where there isn't the width to spare. */
  .sec-head--nowrap { font-size: clamp(24px, 2.6vw, 38px); }
  @media (min-width: 993px) {
    .sec-head--nowrap { white-space: nowrap; }
  }

  /* Contact page: the "Every great experience..." quote runs longer than
     other .sec-head usages (Services), so it needs a smaller scale here to
     avoid overwhelming the two-column layout. Scoped to .contact-wrap only. */
  .contact-wrap .sec-head {
    font-size: clamp(26px, 2.6vw, 38px);
    max-width: none;
  }

  /* ═══════════ 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: clamp(14px, 1vw, 16px); line-height: 1.6; 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: clamp(14px, 1vw, 16px); 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: 24px; 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.5; color: rgba(255,255,255,0.62); font-weight: 300;
  }

  /* Intentional African Immersion - full-bleed desert photo, centered
     title/tagline near the top, 4-column process footer pinned to the
     bottom over a darkened gradient for legibility. */
  .immersion {
    position: relative; min-height: 760px;
    display: flex; flex-direction: column; justify-content: space-between;
    overflow: hidden;
  }
  .immersion-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
  .immersion-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .immersion-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(10,12,8,0.32) 0%, rgba(10,12,8,0.12) 35%, rgba(8,10,6,0.82) 76%, rgba(6,8,5,0.93) 100%);
  }
  .immersion-head { position: relative; z-index: 1; padding: 100px 80px 0; text-align: center; }
  .immersion-title {
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(26px, 3.2vw, 40px); color: #fff; line-height: 1.15;
  }
  .immersion-title em { font-style: normal; }
  .immersion-tagline {
    margin-top: 16px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(255,255,255,0.78);
  }
  .immersion-steps {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px;
    padding: 64px 80px 72px;
  }
  .immersion-step { border-top: 1px solid rgba(255,255,255,0.28); padding-top: 20px; }
  .immersion-step .num {
    font-family: var(--font-display); font-size: 13px; color: rgba(255,255,255,0.5); letter-spacing: 0.1em;
  }
  .immersion-step h4 {
    font-family: var(--font-display); font-weight: 500; font-size: 18px; text-transform: uppercase;
    letter-spacing: 0.02em; color: #fff; margin: 10px 0 4px;
  }
  .immersion-step .sub {
    font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); margin-bottom: 14px;
  }
  .immersion-step p {
    font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.72); font-weight: 300;
  }

  /* Team candid-photo gallery (Services page, "Meetings, Conferences and
     Events" section) - edge-to-edge grid, same 4px-gap treatment as
     .dest-grid. */
  .team-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .team-gallery .photo { aspect-ratio: 4 / 3; background-size: cover; background-position: center; }

  @media (max-width: 768px) {
    .immersion-head { padding: 64px 28px 0; }
    .immersion-steps { grid-template-columns: 1fr; gap: 32px; padding: 48px 28px 56px; }
    .team-gallery { grid-template-columns: 1fr 1fr; }
  }

  /* ═══════════ TRIBE ═══════════ */
  /* Fine-tune: align-items was "stretch", so .story-img's rendered height
     matched whatever height .story-text happened to be - and .story-text's
     height changes as its paragraph reflows at different widths. That
     coupling made the cover-cropped photo visibly jump/resize during a
     window drag for reasons that had nothing to do with the image itself.
     align-items:start + a fixed aspect-ratio on .story-img (below) decouples
     the two columns: the image now sizes purely from its own width, so it
     scales smoothly and never jumps when the text reflows. */
  .story-block {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start;
  }
  .story-block.reverse .story-text { order: 2; }
  .story-text { padding: 32px 56px; display: flex; flex-direction: column; justify-content: center; }
  .story-text .big {
    font-family: var(--font-display); font-weight: 300; line-height: 1.1;
    font-size: clamp(32px, 3.6vw, 48px); color: var(--text); margin-bottom: 28px;
  }
  .story-text .big em { font-style: normal; color: var(--green); }
  .story-text p { font-size: clamp(14px, 1vw, 16px); line-height: 1.6; color: #555; font-weight: 300; }
  .story-text p + p { margin-top: 18px; }
  /* aspect-ratio (not min-height) drives the box's height so it's a pure
     function of the column's own width - see .story-block note above. */
  .story-img { aspect-ratio: 6 / 5; background-size: cover; background-position: center; }

  /* 3-column grid, 6 cells: the lead card (logo mark + proverb) fills
     cell 1, the 5 tribe members fill the rest - matches the brief's
     photo-grid layout exactly instead of an open-ended wrapping list. */
  .tribe-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px;
  }
  .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: 24px; font-weight: 400; color: var(--text); line-height: 1.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;
  }
  /* Cards with no doodle asset yet (Werner, Jess) - a quiet dashed-border
     flag so it reads as "placeholder pending a matching graphic", not a
     mistake, without singling the person out with any visible label. */
  .tribe-card--plain .photo { border: 1px dashed var(--sand); }

  /* Lead cell - designed "MEET OUR TRIBE" graphic (tribe-lead-card.webp)
     as a straight background-image, with the proverb as a caption
     underneath, occupying grid cell 1. Was a flex-centered green box with
     the logo mark + typed title/brand text; the new graphic already bakes
     all of that in, so the card is now just an image box. */
  .tribe-lead-card {
    aspect-ratio: 3/4;
    background-color: var(--green);
    background-size: cover;
    background-position: center;
  }
  .tribe-lead-quote {
    margin-top: 24px; padding: 0 28px; font-size: clamp(14px, 1vw, 16px); line-height: 1.5; color: #555; font-weight: 300; font-style: italic;
  }

  /* Icon + content as one centered unit in the middle of the band, not
     icon-left/text-fills-remaining-space (which left the icon stranded at
     the edge with a big gap before the text). */
  .unity {
    background: var(--green); color: #fff; padding: 24px 56px;
    display: flex; align-items: center; justify-content: center; gap: 56px;
    margin-top: 10px;
  }
  .unity-mark { height: 140px; flex-shrink: 0; filter: brightness(0) invert(1); opacity: 0.92; }
  .unity-content { text-align: left; max-width: 640px; }
  .unity h2 {
    font-family: var(--font-body); font-weight: 700; font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.25; margin-bottom: 16px;
  }
  .unity h2 em { font-style: normal; }
  .unity p {
    max-width: 620px; margin: 0; font-size: clamp(14px, 1vw, 16px); line-height: 1.6; color: rgba(255,255,255,0.82); font-weight: 300;
  }

  /* ═══════════ CONTACT ═══════════ */
  .contact-wrap {
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 80px;
    background: var(--white); padding: 32px 56px;
  }
  .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; }

  /* reCAPTCHA v3 is invisible by design - we hide Google's floating badge
     and show this required attribution line instead (Google's ToS require
     one or the other to be visible on the page). */
  .grecaptcha-badge { visibility: hidden; }
  .recaptcha-disclosure { font-size: 12px; color: #999; font-weight: 300; line-height: 1.5; margin-top: 14px; max-width: 44ch; }
  .recaptcha-disclosure a { color: #999; text-decoration: underline; }

  .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: 30px; color: var(--green); }
  .form-thanks p { font-size: clamp(14px, 1vw, 16px); color: #555; font-weight: 300; line-height: 1.6; 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-title--slim { white-space: normal; }
    .page-hero-content { padding: 40px 20px; }
    /* Services hero, mobile: same frame as Our Tribe (base page-hero
       height, cover fill). Position centres the group horizontally and
       keeps faces high in the frame. */
    .svc-hero-bg { background-position: calc(62% - 10px) calc(26% + 40px); }
    .sec { padding: 32px 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: 28px 28px; }
    .story-img { aspect-ratio: 4 / 3; }
    .tribe-grid { grid-template-columns: 1fr; gap: 24px; }
    .unity { flex-direction: column; text-align: center; gap: 24px; padding: 24px 20px; }
    .unity-mark { height: 72px; }
    .unity-content { text-align: center; }
    .contact-wrap { grid-template-columns: 1fr; gap: 48px; padding: 28px 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: 28px 28px; }
    .dest-intro-left { max-width: none; gap: 12px; }
    .dest-grid { grid-template-columns: 1fr; }
    .dest-card { height: 55vw; min-height: 260px; }
    .dest-hero-content { padding: 40px 20px; }
    .dest-africa { padding: 32px 20px; }
    .dest-africa-img { max-width: none; }
    .dest-video-play { width: 64px; height: 64px; }
    .detail-images { grid-template-columns: 1fr; aspect-ratio: auto; }
    .detail-image { aspect-ratio: 4 / 3; }
    .detail-images--portrait-pair { grid-template-columns: 1fr; aspect-ratio: auto; }
    .detail-images--wide-right { grid-template-columns: 1fr; }
    .detail-images--tall { aspect-ratio: auto; }
    .detail-hero-content { padding: 67px 20px 27px; }
    /* Mobile: the destination detail hero (eyebrow + 2-line title +
       subtitle + full description + CTA) was forcing the hero much taller
       than the frame, pushing the button/copy past the image into the
       white section below. Scaled everything down instead of relying on
       the box to keep growing. */
    .back-btn { margin-bottom: 12px; }
    .detail-eyebrow { margin-bottom: 10px; }
    .detail-title { font-size: clamp(30px, 9vw, 38px); margin-bottom: 6px; }
    .detail-subtitle { font-size: 16px; margin-bottom: 16px; }
    .detail-desc { font-size: 14px; line-height: 1.6; margin-bottom: 22px; }
    .detail-body { grid-template-columns: 1fr; gap: 40px; padding: 28px 28px; }
    .cta-banner { flex-direction: column; padding: 32px 20px; }
    .home-intro { flex-direction: column; padding: 28px 28px; gap: 32px; }
    .home-intro-right { width: 100%; height: 260px; }
    footer { padding: 48px 20px 32px; }

    /* MEET THE TRIBE MOBILE - swap in a dedicated portrait-shot photo
       (1023x1537, purpose-shot to fit a tall narrow crop with all 3 women
       in frame) instead of the desktop landscape photo. background-size
       stays the inherited cover (from the base .hs-bg rule) and
       background-position stays the inherited center - at this image's
       aspect ratio that crops only ~8% off each side, comfortably keeping
       all 3 faces in frame. Full background-image replacement, not a
       tweak, which is why the desktop image lives in a CSS rule rather
       than inline (see .hs-bg-tribe above) - no inline style to fight. */
    .hs-bg-tribe {
      background-image: url("../img/home/card-tribe-mobile.webp");
      /* Plain cover has zero vertical slack here (the image's scaled
         height matches the card height exactly), so background-position
         alone can't shift it - a tiny deliberate oversize creates enough
         headroom for the 15px nudge below without changing the horizontal
         crop enough to risk cutting anyone off the sides. */
      background-size: auto 106%;
      background-position: center calc(50% - 15px);
    }
  }

  /* ═══════════ LEGAL PAGES (Terms & Conditions / Privacy Policy) ═══════════
     Added 2026-07-13, reworked 2026-07-15: originally had a solid-colour
     .legal-hero (like every other page's photo hero, just without the
     photo) above a narrow 760px prose column. Client asked to drop the
     hero entirely and widen the copy to at least 1200px on desktop once
     real legal text replaced the draft copy - a long-form legal document
     reads better wide and doesn't need a hero banner. .legal-sec replaces
     the hero's job of clearing the fixed nav (72px) with top padding
     instead of a full-height banner. This site otherwise has no bare
     h2/h3/ul typography since every other page uses custom classed
     headings, so .legal-content still defines its own scoped rules rather
     than leaning on unscoped tag selectors that don't exist elsewhere. */
  .legal-sec {
    /* nav height (72px) + a comfortable gap, standing in for the hero's
       old clearance now that there's no hero pushing content down. */
    padding-top: 132px;
  }
  .legal-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    color: var(--text);
    margin-top: 8px;
  }
  .legal-updated {
    margin-top: 14px;
    font-size: 12px;
    color: var(--warm-grey);
  }

  .legal-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 56px 96px;
    line-height: 1.75;
    font-size: 15px;
    color: var(--text);
  }
  .legal-content h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--green-dark);
    margin-top: 44px;
    margin-bottom: 14px;
  }
  .legal-content p { margin-bottom: 14px; }
  .legal-content ul, .legal-content ol { margin: 0 0 14px 22px; }
  .legal-content li { margin-bottom: 8px; }
  .legal-content a { color: var(--green); text-decoration: underline; }
  .legal-content a:hover { color: var(--green-dark); }
  .legal-content strong { font-weight: 700; }
  .legal-content .legal-copyright { margin-top: 32px; font-size: 12px; color: var(--warm-grey); }

  @media (max-width: 768px) {
    .legal-sec { padding-top: 104px; }
    .legal-content { padding: 0 24px 72px; }
  }

  /* ═══════════ FOOTER LEGAL LINKS ═══════════
     Added 2026-07-13 alongside the cookie banner - extends .footer-bottom
     (base rule above, ~line 1155) with a left-hand group of links so it
     reads as one line: "© year Rethink Africa DMC. All rights reserved. |
     Terms & Conditions | Privacy Policy | Cookie Preferences", tagline
     kept on the right exactly as it was. */
  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
  }
  .footer-legal a,
  .footer-legal button {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s;
  }
  .footer-legal a:hover,
  .footer-legal button:hover { color: #fff; }
  @media (max-width: 768px) {
    .footer-legal { gap: 6px 12px; }
  }

  /* ═══════════ COOKIE CONSENT BANNER ═══════════
     Added 2026-07-13. Deliberately a simple Accept All / Reject
     Non-Essential card (no "customize by category" modal) - see
     assets/js/cookie-consent.js for why the consent record still tracks
     categories under the hood. Reuses .btn-primary/.btn-ghost from the
     hero CTAs so it stays visually consistent with the rest of the site;
     only overrides their padding/size to suit a compact card.
     Fine-tune 2026-07-13: originally a full-width bar pinned to the very
     bottom edge, which blocked the whole footer behind it. Switched to a
     floating, centered card (text stacked above the buttons, not a wide
     row) with margin on every side so the footer stays visible around it. */
  .cookie-consent {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 2000;
    transform: translate(-50%, 130%);
    width: calc(100% - 48px);
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 26px 28px;
    background: var(--text);
    color: rgba(255,255,255,0.75);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    transition: transform 0.5s ease;
  }
  .cookie-consent.is-visible { transform: translate(-50%, 0); }
  .cookie-consent-text { font-size: 13px; line-height: 1.6; }
  .cookie-consent-text a { color: #fff; text-decoration: underline; }
  .cookie-consent-actions { display: flex; gap: 12px; }
  .cookie-consent-actions .btn-primary,
  .cookie-consent-actions .btn-ghost {
    flex: 1;
    justify-content: center;
    padding: 13px 20px;
    font-size: 11px;
  }

  @media (max-width: 560px) {
    .cookie-consent { left: 24px; right: 24px; bottom: 16px; width: auto; max-width: none; transform: translateY(130%); }
    .cookie-consent.is-visible { transform: translateY(0); }
    .cookie-consent-actions { flex-direction: column; }
  }