/* ==========================================================================
   Home layout — matches 2026-09 mockup.
   Namespaced under .hp3 so nothing collides with style.css.
   ========================================================================== */

.hp3 {
  --ink: #151515;
  --ink-2: #333;
  --muted: #7a7469;
  --paper: #f6f2eb;
  --rule: #e5e0d5;
  --pad-x: clamp(24px, 6.8vw, 128px);
  --gap: 18px;

  /* Marrakech row-1 column rhythm — the section head aligns to these so the
     title sits over image 1 and the caption over image 2. */
  --sm-w: 18.3%;
  --sm-gap: 4.9%;

  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  padding: 0 var(--pad-x) 60px;
}

.hp3 img { display: block; max-width: 100%; }
.hp3 a { color: inherit; text-decoration: none; }

/* ---------- Header ---------- */
.hp3-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 34px 0 0;
  gap: 24px;
}

.hp3-head-left {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.hp3-wordmark {
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}

.hp3-nav-row {
  display: flex;
  gap: 28px;
  font-size: clamp(12px, .95vw, 15px);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.hp3-nav-row a { border-bottom: 1px solid transparent; padding-bottom: 2px; }
.hp3-nav-row a:hover { border-bottom-color: var(--ink); }

/* Signature: large, sitting left of true centre. */
.hp3-signature {
  justify-self: center;
  transform: translateX(-8%);
  margin-top: -18px;
}
.hp3-signature img { height: clamp(64px, 6.5vw, 100px); width: auto; }

/* Services: one line, baseline-aligned with the ABOUT ME row (second row of
   the left stack), not with the wordmark above it. */
.hp3-head-right {
  display: flex;
  justify-content: flex-end;
  padding-top: 52px;
}
.hp3-services {
  display: flex;
  gap: 34px;
  font-size: clamp(12px, .95vw, 15px);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}

/* Header status line — where he is now / where he's next. */
.hp3-head-right { flex-direction: column; align-items: flex-end; gap: 14px; }

.hp3-whereabouts {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: clamp(11px, .85vw, 13px);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.hp3-whereabouts .wa-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}
/* Only pulses while a trip is actually running. */
.hp3-whereabouts .wa-dot[data-live] {
  background: #1f9d55;
  animation: wa-pulse 2.4s ease-in-out infinite;
}
@keyframes wa-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(31,157,85,.45); }
  50%      { opacity: .75; box-shadow: 0 0 0 4px rgba(31,157,85,0); }
}
@media (prefers-reduced-motion: reduce) {
  .hp3-whereabouts .wa-dot[data-live] { animation: none; }
}
.hp3-whereabouts .wa-place { color: var(--ink); font-weight: 600; }
.hp3-whereabouts .wa-meta::before { content: '·'; margin-right: 8px; }

/* ---------- Section wrapper ---------- */
.hp3-sec {
  padding: 0 0 120px;
}
.hp3-sec:first-of-type { padding-top: 250px; }

/* The text row spans exactly image 1's left edge to image 2's right edge, so
   the last item (PG) ends flush with image 2. */
.hp3-sec-head {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: calc(var(--sm-w) * 2 + var(--sm-gap));
  margin-bottom: 100px;
  /* Type is sized in cqw against this span, so the row always ends flush with
     image 2 no matter the viewport width. */
  container-type: inline-size;
}
.hp3-titlecol {
  flex: 0 0 auto;
  padding-right: 3.5cqw;
}

.hp3-title {
  font-size: 6cqw;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  line-height: 1.06;
  margin: 0 0 1.8cqw;
}
/* Place label sits under the title, indented a touch from the title's left. */
.hp3-place {
  font-size: 2.5cqw;
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
  padding-left: 0.9cqw;
}

/* Caption block is bottom-aligned to the title's second line, with PG sitting
   on the same baseline as the caption's last line. */
.hp3-capgroup {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.9cqw;
  padding-top: 6.4cqw;
}
.hp3-cap {
  font-size: 2.05cqw;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.45;
  white-space: nowrap;
}
.hp3-cap.pg { font-weight: 500; }

.hp3-lbl {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.hp3-lbl small {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .18em;
  margin-top: 3px;
}

/* ---------- Card / image helpers ---------- */
.hp3-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: #1a1a1a;
}
.hp3-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.hp3-card:hover img { transform: scale(1.02); }

.hp3-card .play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 70px; height: 70px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  z-index: 2;
}
.hp3-card .play:hover { background: #fff; transform: translate(-50%, -50%) scale(1.08); }
.hp3-card .play svg { width: 26px; height: 26px; }

/* On the Marrakech hero the play sits left of centre, per the mockup. */
.hp3-marra-r1 .big .play { left: 45%; }

/* ==========================================================================
   Section 1 · Marrakech
     Row 1: [small][small]  ...gap...  [ big landscape ]
     Row 2: [ medium landscape ] [ medium landscape ]  (aligned left, ~85%)
   ========================================================================== */
/* Two portraits on the left with a wide gap, pushed DOWN; the big image runs
   full-bleed off the right edge of the viewport and starts higher than them. */
.hp3-marra-r1 {
  display: flex;
  align-items: center;
  margin-bottom: 140px;
}
.hp3-marra-r1 .sm {
  width: var(--sm-w);
  aspect-ratio: 2/3;
  flex: 0 0 auto;
}
.hp3-marra-r1 .sm:first-child { margin-right: var(--sm-gap); }
.hp3-marra-r1 .big {
  flex: 1 1 auto;
  margin-left: 10.7%;
  margin-right: calc(-1 * var(--pad-x));
  aspect-ratio: 3/2;
}
.hp3-marra-r1 .spacer { display: none; }

/* Two labelled project cards; the right one bleeds off the right edge. */
.hp3-marra-r2 {
  display: flex;
  gap: 2%;
  margin-right: calc(-1 * var(--pad-x));
}
.hp3-marra-r2 .col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hp3-marra-r2 .hp3-card { aspect-ratio: 3/2; }
.hp3-marra-r2 .hp3-lbl {
  font-size: clamp(12px, .82vw, 15px);
  font-weight: 600;
  letter-spacing: .03em;
  margin-bottom: 42px;
}

/* ==========================================================================
   Opening film — the first thing on the page, autoplaying muted.
   Full content width so it reads as the site's opener, not one card among
   many. The label links through to its case page.
   ========================================================================== */
.hp3-hero {
  padding-top: 90px;
  padding-bottom: 0;
}
/* Marrakech used to carry the page's opening air; the hero does that now. */
.hp3-sec.hp3-hero + .hp3-sec { padding-top: 160px; }

.hp3-hero .col { display: flex; flex-direction: column; }
.hp3-hero .hp3-lbl {
  font-size: clamp(12px, .82vw, 15px);
  font-weight: 600;
  letter-spacing: .03em;
  margin-bottom: 28px;
}
.hp3-hero .hp3-lbl a { border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.hp3-hero .hp3-lbl a:hover { border-bottom-color: currentColor; }
.hp3-hero .hp3-lbl small {
  display: inline;
  margin-left: 14px;
  font-size: .8em;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: .06em;
}
.hp3-hero-card { aspect-ratio: 16/9; }
.hp3-hero-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

/* ==========================================================================
   Section 2 · Bali (Ulaman + Giovana)
     Two columns, right column offset downward.
   ========================================================================== */
.hp3-bali {
  display: grid;
  grid-template-columns: 1.19fr 1fr;
  gap: 9.8%;
  align-items: start;
}

.hp3-bali-col {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}
/* Giovana sits lower than Ulaman by exactly enough to centre the two images
   on each other. Every dimension in this row scales with viewport width, so a
   plain vw offset holds the centring at any size. */
.hp3-bali-col.offset { padding-top: 8.07vw; }

/* Caption bottom-aligns to the title's last line; the place label drops below
   the whole row so it doesn't pull the caption down with it. */
.hp3-colhead {
  display: flex;
  align-items: flex-end;
}
/* Spacing here mirrors the Nairobi block in absolute terms — the cqw values
   differ only because the Bali columns are narrower containers. */
.hp3-bali-col .hp3-colhead {
  gap: 4.7cqw;
  margin-bottom: 6.4cqw;
}
.hp3-bali-col .hp3-title {
  font-size: 3.46cqw;
  margin: 0;
}
.hp3-bali-col .hp3-place {
  font-size: 1.95cqw;
  padding-left: 0;
  margin-bottom: 2.48cqw;
}
.hp3-bali-col .hp3-capgroup {
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: 6.6cqw;
  padding-top: 0;
}
.hp3-bali-col .hp3-cap { font-size: 1.73cqw; }

/* Giovana has no place label, so its image needs the spacing instead. */
.hp3-bali-col.offset .hp3-colhead { margin-bottom: 2.48cqw; }

.hp3-bali-col .hp3-card { aspect-ratio: 16/9; }
.hp3-bali-col.offset .hp3-card { aspect-ratio: 3/2; }
/* Ulaman runs off the left edge of the viewport. */
.hp3-bali-col.bleed-left .hp3-card { margin-left: calc(-1 * var(--pad-x)); }

/* ==========================================================================
   Section 3 · Nairobi
     Row 1: [big Cultiva] + [ small Nomadic Rasta w/ label ]
     Row 2: [Geco Cafe w/ label] [Cultiva w/ label]
   ========================================================================== */
/* The Nairobi block is indented from the left relative to the other sections. */
.hp3-nairobi-inner {
  margin-left: 9.9%;
  container-type: inline-size;
}
.hp3-nairobi-inner .hp3-title { font-size: 1.88cqw; margin: 0; }
.hp3-nairobi-inner .hp3-colhead { gap: 2.56cqw; margin-bottom: 0; }
.hp3-nairobi-inner .hp3-capgroup {
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: 3.6cqw;
  padding-top: 0;
}
.hp3-nairobi-inner .hp3-cap { font-size: .94cqw; }
.hp3-nairobi-inner .hp3-place {
  font-size: 1.06cqw;
  padding-left: 0;
  margin: 3.44cqw 0 1.38cqw;
}

.hp3-nairobi-r1 {
  display: grid;
  grid-template-columns: 70.5% 23.1%;
  gap: 6.4%;
  margin-bottom: 5cqw;
  align-items: start;
}
.hp3-nairobi-r1 .main { aspect-ratio: 16/9; }
.hp3-nairobi-r1 .side {
  display: flex;
  flex-direction: column;
  padding-top: 1.13cqw;
}
.hp3-nairobi-r1 .side .hp3-card { aspect-ratio: 2/3; }
.hp3-nairobi-r1 .side .hp3-lbl {
  font-size: 1.06cqw;
  font-weight: 500;
  letter-spacing: .03em;
  margin-bottom: .75cqw;
}
.hp3-nairobi-r1 .side .hp3-lbl small {
  font-size: .875cqw;
  letter-spacing: .03em;
  margin-top: .35cqw;
}

.hp3-nairobi-r2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  width: 85%;
}
.hp3-nairobi-r2 .col { display: flex; flex-direction: column; }
.hp3-nairobi-r2 .col .hp3-card { aspect-ratio: 5/3; }

/* ==========================================================================
   Section 4 · Cape Town
     Each item: title/caption row, then medium landscape (not full width).
   ========================================================================== */
/* Cape Town is the most indented block — starts ~21.6% into the content area
   and runs 64.8% of it, so it sits right of centre. */
.hp3-cape-item {
  width: 64.8%;
  margin-left: 21.6%;
  margin-bottom: clamp(60px, 8.35vw, 180px);
  container-type: inline-size;
}
.hp3-cape-item:last-child { margin-bottom: 0; }

.hp3-cape-item .hp3-colhead {
  gap: 3.4cqw;
  margin-bottom: 4.6cqw;
}
.hp3-cape-item .hp3-title { font-size: 3.26cqw; margin: 0; }
.hp3-cape-item .hp3-capgroup {
  flex: 0 0 auto;
  justify-content: flex-start;
  padding-top: 0;
}
.hp3-cape-item .hp3-cap { font-size: 1.9cqw; }
.hp3-cape-item .hp3-card { aspect-ratio: 16/9; }

/* ---------- Footer ---------- */
.hp3-foot {
  padding: clamp(120px, 15vw, 300px) 0 clamp(40px, 4vw, 80px);
  text-align: center;
}
.hp3-foot .kicker {
  font-size: clamp(16px, 1.25vw, 26px);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  margin-bottom: .9em;
}
.hp3-foot .mail {
  font-size: clamp(17px, 1.4vw, 29px);
  font-weight: 400;
  color: var(--ink);
  border-bottom: none;
  letter-spacing: normal;
}
.hp3-foot .mail:hover { border-bottom: 1px solid var(--ink); }
.hp3-foot .socials {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 2vw, 40px);
  margin-top: 1.6em;
}
.hp3-foot .socials a {
  font-size: clamp(13px, .95vw, 18px);
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.hp3-foot .socials a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Credit links stay flat like the rest of the captions until hovered. */
.hp3-cap a,
.hp3-lbl a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.hp3-cap a:hover,
.hp3-lbl a:hover { border-bottom-color: currentColor; }

/* ---------- Reveal on scroll (same system as zelos.studio) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(6px);
  transition: opacity .8s cubic-bezier(.25, .1, .25, 1),
              transform .8s cubic-bezier(.25, .1, .25, 1),
              filter .8s cubic-bezier(.25, .1, .25, 1);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

[data-reveal="fade"] { transform: none; filter: blur(6px); }
[data-reveal="fade"].revealed { opacity: 1; filter: blur(0); }

[data-reveal="scale"] {
  transform: scale(.92);
  transform-origin: center center;
  filter: blur(6px);
}
[data-reveal="scale"].revealed { opacity: 1; transform: scale(1); filter: blur(0); }

[data-reveal-delay="1"] { transition-delay: .15s; }
[data-reveal-delay="2"] { transition-delay: .3s; }
[data-reveal-delay="3"] { transition-delay: .45s; }
[data-reveal-delay="4"] { transition-delay: .6s; }

[data-reveal-stagger] > [data-reveal] { transition-delay: calc(var(--reveal-i, 0) * .12s); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hp3-marra-r1 .sm { margin-top: 70px; }
  .hp3-marra-r1 .big { margin-left: 7%; }
}


/* ==========================================================================
   MOBILE — editorial + minimal, in the spirit of dancarter.co.
   Rows become swipeable slideshows instead of one endless vertical stack.
   ========================================================================== */
@media (max-width: 860px) {
  .hp3 { padding: 0 20px 40px; }

  /* ---------- Header ---------- */
  .hp3-head {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 26px 0 0;
  }
  .hp3-head-left { gap: 16px; }
  .hp3-head-right { justify-content: flex-start; align-items: flex-start; padding-top: 0; gap: 10px; }
  .hp3-whereabouts { font-size: 10px; letter-spacing: .1em; white-space: normal; }
  .hp3-signature { justify-self: flex-start; margin-top: 0; transform: none; }
  .hp3-signature img { height: 56px; }
  .hp3-nav-row { gap: 20px; font-size: 11px; letter-spacing: .12em; }
  .hp3-services {
    flex-wrap: wrap;
    gap: 8px 18px;
    white-space: normal;
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--muted);
  }

  /* ---------- Section rhythm ---------- */
  .hp3-sec { padding: 0 0 88px; }
  .hp3-sec:first-of-type { padding-top: 72px; }

  /* ---------- Heads ----------
     Title on the left, credits in the empty column beside it. The place
     label stays under the title. Bali is excluded — its heads sit inside
     narrow slides where there is no spare width. */
  .hp3-sec-head,
  .hp3-nairobi-inner .hp3-colhead,
  .hp3-cape-item .hp3-colhead {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    container-type: normal;
    margin-bottom: 26px;
  }
  .hp3-bali-col .hp3-colhead {
    display: block;
    width: 100%;
    container-type: normal;
    margin-bottom: 26px;
  }
  .hp3-titlecol { flex: 0 0 auto; padding-right: 0; }

  /* Credits stack under each other in the right-hand column. */
  .hp3-sec-head .hp3-capgroup,
  .hp3-nairobi-inner .hp3-capgroup,
  .hp3-cape-item .hp3-capgroup {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 3px;
  }

  .hp3-title,
  .hp3-bali-col .hp3-title,
  .hp3-nairobi-inner .hp3-title,
  .hp3-cape-item .hp3-title {
    font-size: 27px;
    line-height: 1.08;
    margin: 0 0 10px;
  }
  .hp3-place,
  .hp3-bali-col .hp3-place,
  .hp3-nairobi-inner .hp3-place {
    font-size: 12px;
    letter-spacing: .14em;
    padding-left: 0;
    margin: 0 0 18px;
  }
  .hp3-capgroup,
  .hp3-bali-col .hp3-capgroup,
  .hp3-nairobi-inner .hp3-capgroup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding-top: 14px;
  }
  .hp3-cap,
  .hp3-bali-col .hp3-cap,
  .hp3-nairobi-inner .hp3-cap,
  .hp3-cape-item .hp3-cap {
    font-size: 12px;
    letter-spacing: .1em;
    line-height: 1.55;
    white-space: normal;
    color: var(--muted);
  }
  .hp3-cap.pg,
  .hp3-nairobi-inner .hp3-cap.pg,
  .hp3-cape-item .hp3-cap.pg { font-size: 10.5px; }

  /* ---------- Filmstrip rows ----------
     Horizontal, swipeable AND auto-advancing. Slides keep their natural
     aspect ratio and are sized off one shared height, so portraits come out
     narrow and landscapes wide — varied widths with air between them, the
     way dancarter.co scales its work, rather than uniform full-width blocks.
     ------------------------------------------------------------------ */
  .hp3 { --slide-h: 46vw; }

  .hp3-marra-r1,
  .hp3-marra-r2,
  .hp3-bali,
  .hp3-nairobi-r1,
  .hp3-nairobi-r2 {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 14px;
    width: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 0 20px;
  }
  .hp3-marra-r1::-webkit-scrollbar,
  .hp3-marra-r2::-webkit-scrollbar,
  .hp3-bali::-webkit-scrollbar,
  .hp3-nairobi-r1::-webkit-scrollbar,
  .hp3-nairobi-r2::-webkit-scrollbar { display: none; }

  /* Slide widths derive from --slide-h and each card's native ratio. Written
     at the same specificity as the desktop rules they replace, or those win
     and the strip blows out to several screens wide. */
  .hp3-marra-r1 > *,
  .hp3-marra-r2 > *,
  .hp3-bali > *,
  .hp3-nairobi-r1 > *,
  .hp3-nairobi-r2 > *,
  .hp3-marra-r1 .sm,
  .hp3-marra-r1 .big,
  .hp3-marra-r2 .col,
  .hp3-bali .hp3-bali-col,
  .hp3-nairobi-r1 .main,
  .hp3-nairobi-r1 .side,
  .hp3-nairobi-r2 .col {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    scroll-snap-align: start;
  }

  /* 2:3 portraits */
  .hp3-marra-r1 .sm,
  .hp3-nairobi-r1 .side { width: calc(var(--slide-h) * 2 / 3); }
  /* 3:2 landscape */
  .hp3-marra-r1 .big,
  .hp3-marra-r2 .col,
  .hp3-bali .hp3-bali-col.offset { width: calc(var(--slide-h) * 3 / 2); }
  /* 16:9 */
  .hp3-bali .hp3-bali-col.bleed-left,
  .hp3-nairobi-r1 .main { width: calc(var(--slide-h) * 16 / 9); }
  /* 5:3 */
  .hp3-nairobi-r2 .col { width: calc(var(--slide-h) * 5 / 3); }

  /* One shared image height across every strip. Width is only forced to 100%
     for cards nested inside a wrapper slide — a card that IS the slide already
     carries its own ratio-derived width above, and 100% would clobber it. */
  .hp3-marra-r1 .hp3-card,
  .hp3-marra-r2 .hp3-card,
  .hp3-bali .hp3-card,
  .hp3-nairobi-r1 .hp3-card,
  .hp3-nairobi-r2 .hp3-card {
    height: var(--slide-h);
    aspect-ratio: auto;
    margin: 0;
  }
  .hp3-marra-r2 .col .hp3-card,
  .hp3-bali .hp3-bali-col .hp3-card,
  .hp3-nairobi-r1 .side .hp3-card,
  .hp3-nairobi-r2 .col .hp3-card { width: 100%; }

  /* ---------- Shared slide internals ---------- */
  .hp3-marra-r2 .col,
  .hp3-bali .hp3-bali-col,
  .hp3-nairobi-r1 .side,
  .hp3-nairobi-r2 .col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* A slide's head rides above its own image, clipped to the slide width. */
  .hp3-bali-col .hp3-colhead { margin-bottom: 10px; }
  .hp3-bali-col .hp3-title { font-size: 15px; line-height: 1.15; }
  .hp3-bali-col .hp3-place { font-size: 10px; margin-bottom: 8px; }
  .hp3-bali-col .hp3-capgroup { padding-top: 6px; gap: 2px; }
  .hp3-bali-col .hp3-cap { font-size: 9px; letter-spacing: .1em; }

  /* ---------- Dots / counter ---------- */
  .strip-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
  }
  .strip-nav .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(21,21,21,.22);
    border: none; padding: 0;
    transition: background .3s ease;
  }
  .strip-nav .dot.on { background: var(--ink); }
  .strip-nav .count {
    margin-left: 6px;
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--muted);
  }


  /* Reset the desktop-only offsets that don't belong in a strip */
  .hp3-marra-r1 { margin-bottom: 34px; }
  .hp3-marra-r1 .spacer { display: none; }
  .hp3-marra-r1 .big .play { left: 50%; }
  .hp3-bali-col.offset { padding-top: 0; }
  .hp3-bali-col.bleed-left .hp3-card { margin-left: 0; }
  .hp3-nairobi-inner { margin-left: 0; container-type: normal; }
  .hp3-nairobi-r1 { margin-bottom: 34px; }
  .hp3-nairobi-r1 .side { padding-top: 0; display: block; }

  /* In-strip labels sit above their own slide */
  .hp3-lbl,
  .hp3-marra-r2 .hp3-lbl,
  .hp3-nairobi-r1 .side .hp3-lbl {
    font-size: 10px;
    letter-spacing: .16em;
    margin-bottom: 10px;
  }
  .hp3-nairobi-r1 .side .hp3-lbl small,
  .hp3-lbl small { font-size: 9px; letter-spacing: .12em; }

  /* Bali columns become slides — their head rides above the image */
  .hp3-bali-col { container-type: normal; }
  .hp3-bali-col .hp3-colhead { margin-bottom: 14px; }
  .hp3-bali-col .hp3-title { font-size: 20px; }
  .hp3-bali-col .hp3-place { margin-bottom: 12px; }
  .hp3-bali-col.offset .hp3-colhead { margin-bottom: 14px; }

  /* Opening film on mobile — full width, then the Marrakech head follows. */
  .hp3-hero { padding-top: 44px; padding-bottom: 0; }
  .hp3-hero .hp3-lbl { font-size: 10px; letter-spacing: .16em; margin-bottom: 12px; }
  .hp3-hero .hp3-lbl small { display: block; margin: 3px 0 0; font-size: 9px; }
  .hp3-sec.hp3-hero + .hp3-sec { padding-top: 72px; }

  /* ---------- Cape Town stays stacked (one film each) ---------- */
  .hp3-cape-item {
    width: 100%;
    margin-left: 0;
    margin-bottom: 64px;
    container-type: normal;
  }
  .hp3-cape-item:last-child { margin-bottom: 0; }
  .hp3-cape-item .hp3-colhead { margin-bottom: 20px; }
  .hp3-cape-item .hp3-card { aspect-ratio: 16/9; }

  /* ---------- Controls ---------- */
  .hp3-card .play { width: 52px; height: 52px; }
  .hp3-card .play svg { width: 19px; height: 19px; }

  /* ---------- Footer ---------- */
  .hp3-foot { padding: 96px 0 32px; }
}