/* Look: Aleo headings, Merriweather body, Alegreya Sans SC labels. Palette: cream + deep ink + gold. */
:root{--font-display:'Aleo',Georgia,serif;--font-body:'Merriweather',Georgia,serif;--font-label:'Alegreya Sans SC','Trebuchet MS',sans-serif;--font-type:'Courier Prime','Courier New',monospace;
 --calm-bg:#f3ecd8;--calm-deep:#16232e;--calm-card:#fffaf0;--calm-ink:#2a2523;--calm-mar:#7a5c17;--calm-cor:#c9a24d;--calm-line:#e3d5a9;--calm-tip:#f7f0dc;--calm-ok:#3f6f4a;--calm-warn:#b4532a}
h1,h2,h3,h4{font-weight:600;letter-spacing:0}
.nav-links a,.nav-dropdown-toggle,.nav-cta,.btn,.chapter-cta,.hero-eyebrow,.page-eyebrow,.stage-kicker,.callout-label,.partner-tag,.route-progress a,.route-progress span,.next-step small,.footer-grid h4,.mobile-menu-links a,.route-table th,.skip-link,.back-to-top,.breadcrumb,.soon,.mobile-guide-cta,.scroll-cue,.chapter-index,.hero-video-play{font-family:var(--font-label)}
.nav-links a,.nav-dropdown-toggle{font-size:15px;font-weight:700;letter-spacing:.05em}
.btn,.nav-cta,.chapter-cta,.mobile-guide-cta{font-size:15px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.hero-eyebrow,.page-eyebrow,.stage-kicker{font-size:14px;font-weight:700}
.callout-label,.partner-tag,.next-step small,.route-table th{font-size:13px;font-weight:700}
.breadcrumb{font-size:15px}
.mobile-menu-links a{font-size:17px}
/* ---- Calm pages: slate page, cream panel, maroon headings, coral step numbers ---- */
body.theme-calm{background:var(--calm-bg);color:var(--calm-ink)}
.theme-calm .breadcrumb,.theme-calm .breadcrumb a{color:var(--calm-deep)}
.theme-calm .page-header{margin-top:14px;background:var(--calm-deep);border-bottom:0}
.theme-calm .page-header h1{color:var(--calm-card)}
.theme-calm .page-header .lede{color:rgba(251,249,244,.86)}
.theme-calm .page-header .page-eyebrow{color:#e0c477}
.theme-calm .post-body{background:var(--calm-bg);padding:28px 0 56px}
.theme-calm .post-body>.wrap{max-width:min(880px,94vw);padding:clamp(22px,4vw,44px);background:var(--calm-card);border:1px solid var(--calm-line)}
.theme-calm .post-body h2,.theme-calm .post-body h3{color:var(--calm-mar)}
.theme-calm .post-body a:not(.btn):not(.next-step){color:var(--calm-mar)}
.theme-calm .route-steps>li::before{background:var(--calm-cor);color:var(--calm-deep);font-family:var(--font-display)}
.theme-calm .route-steps>li::after{background:var(--calm-line)}
.theme-calm .route-progress a,.theme-calm .route-progress span{background:var(--calm-card);border-color:var(--calm-line);color:var(--calm-mar)}
.theme-calm .route-progress [aria-current="step"]{background:var(--calm-mar);border-color:var(--calm-mar);color:var(--calm-card)}
.theme-calm .callout{background:var(--calm-card);border:1px solid var(--calm-line);border-left:4px solid var(--calm-mar)}
.theme-calm .callout-label{color:var(--calm-mar)}
.theme-calm .callout-warn{border-left-color:var(--calm-warn)}
.theme-calm .callout-info{background:var(--calm-tip);border-color:var(--calm-line);border-left-color:var(--calm-cor)}
.theme-calm .callout-ok{background:#eef5ef;border-color:#c5dccb;border-left-color:var(--calm-ok)}
.theme-calm .callout-draft{background:#fff4e5;border:2px dashed var(--calm-cor)}
.theme-calm .route-table th{background:var(--calm-tip);color:var(--calm-mar)}
.theme-calm .route-table th,.theme-calm .route-table td{border-color:var(--calm-line)}
.theme-calm .partner-box{background:var(--calm-card);border:1px dashed var(--calm-cor)}
.theme-calm .partner-tag{background:transparent;border-color:var(--calm-cor);color:var(--calm-mar)}
.theme-calm .btn-primary{background:var(--calm-cor);border-color:var(--calm-cor);color:var(--calm-deep)}
.theme-calm .btn-primary:hover{background:#b8923a;border-color:#b8923a}
.theme-calm .guide-cta{background:var(--calm-deep);border-left:4px solid var(--calm-cor);color:var(--calm-card)}
.theme-calm .guide-cta h2{color:var(--calm-card)}
.theme-calm .guide-cta p{color:rgba(251,249,244,.88)}
.theme-calm .guide-cta .btn-primary{background:var(--calm-cor);border-color:var(--calm-cor);color:var(--calm-deep)}
.theme-calm .next-step{background:var(--calm-card);border:2px solid var(--calm-mar)}
.theme-calm .next-step:hover{background:var(--calm-tip)}
.theme-calm .next-step strong{color:var(--calm-mar);font-family:var(--font-display)}
.theme-calm .next-step small,.theme-calm .next-step .arrow{color:var(--calm-mar)}
.theme-calm .page-disclaimer{border-top-color:var(--calm-line);color:#5a4f3c}
.theme-calm .check-list li::before{border-color:var(--calm-mar)}
.theme-calm .section-tight .btn-outline-light{color:var(--calm-deep);border-color:var(--calm-deep)}
/* ---- Homepage: journey map band and trust block ---- */
.trust-block{background:var(--calm-deep)}
.flow{background:var(--calm-bg)}
.flow .booking-heading h2,.flow .booking-heading p{color:var(--calm-deep)}
.flow .page-eyebrow{color:var(--calm-deep)}
.flow-stage{background:var(--calm-card);border-color:var(--calm-line)}
.flow-links a{background:#fff;border-color:var(--calm-line)}
.flow-links a:hover{background:var(--calm-tip);border-color:var(--calm-mar)}
.flow-links b{color:var(--calm-mar);font-family:var(--font-display);font-weight:600}
.stage-kicker{color:var(--calm-mar)}
.stage-body h3{color:var(--calm-mar)}
/* ---- Hero typewriter: copy types in, buttons arrive, then the words step aside so the film is clear ---- */
.hero-main [data-type]{display:grid;max-height:420px;font-family:var(--font-type)}
.hero-main [data-type]>*{grid-area:1/1}
.hero-main h1[data-type]{font-size:clamp(26px,4.6vw,54px);font-weight:700;line-height:1.2}
.hero-main p[data-type]{font-size:clamp(15px,1.9vw,19px);line-height:1.65}
.tw .hero-main .tw-ghost{opacity:0}
.tw-active .tw-live::after{content:"";display:inline-block;width:.5ch;height:1em;margin-left:3px;vertical-align:-.14em;background:currentColor;animation:tw-blink 1s steps(1) infinite}
@keyframes tw-blink{50%{opacity:0}}
.tw .hero-actions{opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .8s ease,transform .8s ease}
.tw .hero-actions.is-in{opacity:1;transform:none;pointer-events:auto}
.hero-main.text-quiet [data-type]{opacity:0;max-height:0;margin:0;overflow:hidden;transition:opacity 1.1s ease,max-height 1.3s ease .7s,margin 1.3s ease .7s}
@media (prefers-reduced-motion:reduce){.tw .hero-actions{transition:none}.hero-main.text-quiet [data-type]{transition:none}}

/* ---- Phone performance: keep the hero looking the same, but remove the effects that make video lag ---- */
@media (max-width:900px),(pointer:coarse){
  .journey-picker{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(13,25,34,.84)}
  .hero-intro{transition:opacity 1.2s ease,transform 1.2s ease,max-height 1.3s ease,margin 1.3s ease}
  .hero-intro.is-dismissed{filter:none}
  .hero video{transform:translateZ(0);backface-visibility:hidden}
  .chapter .bg img{filter:none}
}

/* ---- Story chapters: words on the right-hand side, typed in as each scene arrives ---- */
.ctw{display:grid}
.ctw>*{grid-area:1/1}
.ctw-ghost{opacity:0}
.ctw-live.is-typing::after{content:"";display:inline-block;width:.5ch;height:1em;margin-left:3px;vertical-align:-.12em;background:var(--gold);animation:tw-blink 1s steps(1) infinite}
.chapter .chapter-index,.chapter .chapter-cta,.chapter .final-ctas{opacity:1}
@media (min-width:1100px){
  .chapter{justify-content:flex-end}
  .chapter::after{background:
    linear-gradient(270deg,rgba(13,25,34,.74) 0%,rgba(13,25,34,.42) 46%,rgba(13,25,34,.04) 100%),
    linear-gradient(0deg,rgba(13,25,34,.28),transparent 42%)}
  .chapter-inner{width:min(100%,560px);margin:0 6vw 0 0;text-align:left}
  .chapter h2{max-width:15ch}
}
@media (prefers-reduced-motion:reduce){.ctw-live.is-typing::after{animation:none}}

/* ---- Hero layout fix: stack the copy in a column (it was sitting in a sideways row and spilling off-screen) ---- */
.hero-content{flex-direction:column}
.hero-main .journey-picker{pointer-events:auto}
@media (max-width:760px){
  /* Words sit low, so the sky and the film stay clear; after the typing fades, only the actions remain. */
  .hero-content{justify-content:flex-end;padding:0 5vw calc(62px + env(safe-area-inset-bottom));text-align:center}
  .hero-main .hero-eyebrow{margin-bottom:8px;font-size:11px}
  .hero-main h1[data-type]{font-size:clamp(23px,7vw,29px);line-height:1.22;max-width:19ch;margin-inline:auto;margin-bottom:10px}
  .hero-main p[data-type]{font-size:13.5px;line-height:1.55;max-width:32ch;margin:0 auto 12px}
  .hero-actions{width:100%}
  .hero-ctas{position:static;width:100%;max-width:none;flex-direction:row;align-items:stretch;gap:8px;margin:0}
  .hero-ctas .btn{flex:1 1 0;width:auto;min-width:0;min-height:46px;padding:10px 8px;font-size:12.5px;letter-spacing:.05em;animation:none;opacity:1}
  .journey-picker{margin:10px 0 0;max-width:none;width:100%;padding:10px 12px 12px}
  .journey-picker label{font-size:14.5px;margin-bottom:8px}
  .jp-row{flex-wrap:nowrap;gap:8px}
  .jp-row select{flex:1 1 0;min-width:0;min-height:44px;font-size:14px}
  .jp-row .btn{min-height:44px;padding:0 12px;font-size:12.5px;white-space:nowrap}
}
@media (max-width:900px){
  .chapter-inner,.chapter.in-view .chapter-inner,.chapter.is-past .chapter-inner{filter:none}
}

/* ---- Hero actions: one tidy block in the lower-right (desktop) / along the bottom edge (phone), clear of the film ---- */
@media (min-width:761px){
  .hero-main .hero-actions{position:absolute;right:clamp(20px,5vw,72px);bottom:clamp(40px,7vh,72px);display:flex;flex-direction:column;align-items:flex-end;gap:12px;width:min(400px,44vw)}
  .hero-main .hero-ctas{position:static;align-items:flex-end;width:100%;max-width:none}
  .hero-main .journey-picker{margin:0;width:100%;max-width:none;padding:12px 14px 14px;text-align:left}
  .hero-main .journey-picker label{font-size:16px;margin-bottom:8px}
  .hero-main .jp-row{flex-wrap:nowrap;gap:8px}
  .hero-main .jp-row select{flex:1 1 0;min-width:0;min-height:44px;font-size:14px}
  .hero-main .jp-row .btn{min-height:44px;padding:0 14px;font-size:13px;white-space:nowrap}
}
@media (max-width:760px){
  .hero-content{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .hero .scroll-cue{display:none}
  .hero-main .hero-eyebrow{font-size:10px;margin-bottom:6px}
  .hero-ctas{gap:6px}
  .hero-ctas .btn{min-height:40px;padding:6px 6px;font-size:11.5px}
  .journey-picker{margin-top:8px;padding:8px 10px 10px}
  .journey-picker label{font-size:13px;margin-bottom:6px}
  .jp-row{gap:6px}
  .jp-row select{min-height:40px;font-size:13px}
  .jp-row .btn{min-height:40px;padding:0 10px;font-size:11.5px}
}

/* ---- Desktop: the "Cape Town International · CPT" label leaves the centre and signs off the lower-right block ---- */
@media (min-width:761px){
  .hero-main .hero-actions{bottom:clamp(58px,9vh,88px)}
  .hero-main .hero-eyebrow{position:absolute;right:clamp(20px,5vw,72px);bottom:clamp(22px,4vh,38px);margin:0;display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
  .hero-main .hero-eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
}

/* ---- Keep the typed words clear of the lower-right block (desktop) ---- */
@media (min-width:761px){
  .hero-content{padding-right:calc(min(400px,44vw) + clamp(20px,5vw,72px) + 28px)}
}
/* ---- Gentle "go here" cue on the hero buttons: a steady button, a small arrow that nudges, a quiet label ---- */
.hero-ctas .btn{animation:none;opacity:1}
.hero-ctas .btn::after{content:"\2192";display:inline-block;margin-left:8px;animation:cta-nudge 2.8s ease-in-out infinite}
.hero-ctas .btn:nth-child(2)::after{animation-delay:.5s}
.hero-ctas .btn:hover::after,.hero-ctas .btn:focus-visible::after{animation:none;transform:translateX(5px)}
@keyframes cta-nudge{0%,55%,100%{transform:translateX(0)}28%{transform:translateX(5px)}}
@media (min-width:761px){
  .hero-main .hero-ctas::before{content:"Start here";align-self:flex-end;margin-bottom:2px;font-family:var(--font-label);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#e6c97a;background:rgba(13,25,34,.62);padding:4px 10px}
}
@media (prefers-reduced-motion:reduce){.hero-ctas .btn::after{animation:none}}