.elementor-5481 .elementor-element.elementor-element-9b49f54{--display:flex;}.elementor-5481 .elementor-element.elementor-element-cf092b8{--display:flex;}.elementor-5481 .elementor-element.elementor-element-0dbfbb6{--display:flex;}.elementor-5481 .elementor-element.elementor-element-35bd861{--display:flex;}.elementor-5481 .elementor-element.elementor-element-05aab59{--display:flex;}.elementor-5481 .elementor-element.elementor-element-5818b16{--display:flex;}.elementor-5481 .elementor-element.elementor-element-192f085{--display:flex;}.elementor-5481 .elementor-element.elementor-element-1d8cbbc{--display:flex;}.elementor-5481 .elementor-element.elementor-element-1d8cbbc:not(.elementor-motion-effects-element-type-background), .elementor-5481 .elementor-element.elementor-element-1d8cbbc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F5F1;}.elementor-5481 .elementor-element.elementor-element-5e64cf8{--display:flex;}.elementor-5481 .elementor-element.elementor-element-8dbc7a3{--display:flex;}.elementor-5481 .elementor-element.elementor-element-f1d02f3{--display:flex;}.elementor-5481 .elementor-element.elementor-element-1b5d4b3{--display:flex;}.elementor-5481 .elementor-element.elementor-element-0f3a25e{--display:flex;}.elementor-5481 .elementor-element.elementor-element-0195d6c{--display:flex;}.elementor-5481 .elementor-element.elementor-element-5b61112{--display:flex;}.elementor-5481 .elementor-element.elementor-element-20ac9ff{--display:flex;}.elementor-5481 .elementor-element.elementor-element-ebe3713{--display:flex;}.elementor-5481 .elementor-element.elementor-element-4a7da79{--display:flex;}.elementor-5481 .elementor-element.elementor-element-cd7fc18{--display:flex;}.elementor-5481 .elementor-element.elementor-element-3f59004{--display:flex;}.elementor-5481 .elementor-element.elementor-element-77b81a3{--display:flex;}.elementor-5481 .elementor-element.elementor-element-77b81a3:not(.elementor-motion-effects-element-type-background), .elementor-5481 .elementor-element.elementor-element-77b81a3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EAE4DA;}.elementor-5481 .elementor-element.elementor-element-cfb3f0a{--display:flex;}.elementor-5481 .elementor-element.elementor-element-c9578ab{--display:flex;}.elementor-5481 .elementor-element.elementor-element-018a07a{--display:flex;}.elementor-5481 .elementor-element.elementor-element-0e88794{--display:flex;}.elementor-5481 .elementor-element.elementor-element-4b9879f{--display:flex;}.elementor-5481 .elementor-element.elementor-element-61069fe{--display:flex;}.elementor-5481 .elementor-element.elementor-element-c694ff9{--display:flex;}.elementor-5481 .elementor-element.elementor-element-5fc51e6{--display:flex;}.elementor-5481 .elementor-element.elementor-element-8973dc3{--display:flex;}.elementor-5481 .elementor-element.elementor-element-92bf25a{--display:flex;}.elementor-5481 .elementor-element.elementor-element-1fbe3c7{--display:flex;}.elementor-5481 .elementor-element.elementor-element-e6cace9{--display:flex;}.elementor-5481 .elementor-element.elementor-element-05462bf{--display:flex;}.elementor-5481 .elementor-element.elementor-element-b49b69e{--display:flex;}.elementor-5481 .elementor-element.elementor-element-b43687e{--display:flex;}.elementor-5481 .elementor-element.elementor-element-7c90cd7{--display:flex;}.elementor-5481 .elementor-element.elementor-element-c67b569{--display:flex;}.elementor-5481 .elementor-element.elementor-element-30fc2c6{--display:flex;}.elementor-5481 .elementor-element.elementor-element-3482f9b{--display:flex;}.elementor-5481 .elementor-element.elementor-element-82ef273{--display:flex;}.elementor-5481 .elementor-element.elementor-element-06cb74e{--display:flex;}.elementor-5481 .elementor-element.elementor-element-c54c0dd{--display:flex;}.elementor-5481 .elementor-element.elementor-element-139c6c5{--display:flex;}.elementor-5481 .elementor-element.elementor-element-d040b6f{--display:flex;}.elementor-5481 .elementor-element.elementor-element-1ba08e4{--display:flex;}.elementor-5481 .elementor-element.elementor-element-0a4dbfb{--display:flex;}.elementor-5481 .elementor-element.elementor-element-1ca17c6{--display:flex;}.elementor-5481 .elementor-element.elementor-element-61a6836{--display:flex;}.elementor-5481 .elementor-element.elementor-element-9895cf9{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-9b49f54 *//* ============================================================================
READ ME FIRST — Active Kili Top, safari plan / day trip template
----------------------------------------------------------------------------
You do NOT need this CSS for the everyday changes:
- Section background colour -> select the section, Style > Background
- Any heading or paragraph -> click it and type
- A photo -> click the image, choose a new one.
Empty photo slots show their brief ("ADD IMAGE ...") until a photo is set.
- Button label -> click the button, retype it (plain words)
- FAQ -> the Accordion widget, one item per question
- The WordPress map -> the Shortcode widget under "The route"
Kept as HTML widgets on purpose (the standard's escape hatch — they rely on
SVG or on the page script, which a Text Editor would destroy):
- the drawn route map and the day list beside it
- the "Begin here" enquiry form (posts to /send-inquiry.php)
- the page script at the very bottom
Change those only in the source (plans/*.py -> build_itinerary.py) and
re-export, or they drift from the other plans.
Block order in this field is fixed. Nothing goes after GLUE except glue.
1 READ ME 2 ELEMENTOR RESET 3 PALETTE 4 REFERENCE SHEET 5 GLUE
========================================================================== */
/* ============================================================================
2. ELEMENTOR RESET - scoped with :where() so it adds zero specificity.
========================================================================== */
body { margin:0; padding:0; box-sizing:border-box; }
body * { margin:0; padding:0; box-sizing:border-box; }
body .e-con:where(.dst-hero,.dst-jump,.dst-sec,.itn-bk,.dst-cta,.itn-map-sc-wrap),
body :where(.dst-hero,.dst-jump,.dst-sec,.itn-bk,.dst-cta,.itn-map-sc-wrap) .e-con,
body :where(.dst-hero,.dst-jump,.dst-sec,.itn-bk,.dst-cta,.itn-map-sc-wrap) .e-con-inner {
display:block !important;
gap:0 !important;
padding:0 !important;
--content-width:none;
--flex-direction:row !important;
--flex-wrap:nowrap !important;
width:auto !important;
--width:auto;
}
/* playbook 3.12: Elementor caps top-level containers at (0,2,0); roots only */
body .e-con:where(.dst-hero,.dst-jump,.dst-sec,.itn-bk,.dst-cta,.itn-map-sc-wrap) { max-width:none !important; }
body :where(.dst-hero,.dst-jump,.dst-sec,.itn-bk,.dst-cta,.itn-map-sc-wrap) .elementor-widget { position:static; width:auto; max-width:none !important; gap:0; }
body :where(.dst-hero,.dst-jump,.dst-sec,.itn-bk,.dst-cta,.itn-map-sc-wrap) .elementor-widget-container { display:contents !important; }
/* ==========================================================================
3. PALETTE - the -rgb companions every tint is built from. The colours
themselves are the :root tokens at the top of the reference sheet below.
Tints are written rgba(var(--x-rgb), .n) so they follow their colour.
======================================================================== */
body {
--c-000000: #000000;
--c-060a08: #060a08;
--c-0a0c0b: #0a0c0b;
--c-f4f1ec: #f4f1ec;
--c-000000-rgb: 0, 0, 0;
--c-060a08-rgb: 6, 10, 8;
--c-0a0c0b-rgb: 10, 12, 11;
--c-f4f1ec-rgb: 244, 241, 236;
--cream-rgb: 247, 245, 241;
--ink-rgb: 30, 36, 34;
--ocean-rgb: 143, 187, 225;
--paper-rgb: 255, 255, 255;
}
/* ==========================================================================
4. REFERENCE SHEET - the page CSS, every .elementor-5481 .elementor-element.elementor-element-9b49f54 prefixed `body `,
pruned to the rules that can match this markup.
======================================================================== */
:root{
--cream:#F7F5F1;
--paper:#FFFFFF;
--linen:#EAE4DA;
--linen-d:#DCD4C6;
--ink:#1E2422;
--ink-soft:#454E4B;
--stone:#78807C;
--gold:#487848;
--gold-d:#35593A;
--forest: #1C1F1E; --forest-d: #121413; --moss: #3A403D; --sage: #EAE4DA;
--gold-l:#8FB58F;
--olive:#2E3331;
--hair:#D5CDBF;
--mf:'DM Sans',system-ui,sans-serif;
--md:'Playfair Display',Georgia,serif;
--me:cubic-bezier(.16,1,.3,1);
--nh:74px;
--ub:36px;
}body *, body *::before, body *::after{box-sizing:border-box;margin:0;padding:0}body a{text-decoration:none;color:inherit}body img{max-width:100%;display:block}
@media(max-width:720px){:root{--nh:64px}}
@media(max-width:420px){:root{--nh:60px}}:root{
--cream: #F7F5F1;
--paper: #FFFFFF;
--linen: #EAE4DA;
--ink: #1E2422;
--ink-soft: #454E4B;
--stone: #78807C;
/* Brand accent — Active Kili Top forest green (was literal gold #487848)
Variables still named --gold so 48 existing refs work unchanged.
Dark sections (.mk-strip, .mk-cta, .mk-mine) override these
back to real gold below — where gold pops on ink. */
--gold: #487848;
--gold-dark: #35593A;
--gold-tint: #DDE7DC;
--hair: #D5CDBF;
--hair-soft: #E2DBCF;
/* Forest-green structural tokens (v2.0 green-main retrofit) */
--forest: #1C1F1E;
--forest-d: #121413;
--forest-l: #2E3331;
--moss: #3A403D;
--sage: #EAE4DA;
--d: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
--b: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--ease: cubic-bezier(.16,1,.3,1);
}body{
font-family: var(--b);
font-size: 18px;
line-height: 1.75;
color: var(--ink);
background: var(--cream) !important;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
margin: 0;
}
@media (max-width: 680px){body{font-size: 17px}}/* ─────────────────────────────────────────────── */
/* ------------------------------------------------------------------
ACTIVE KILI TOP - ocean blue
Taken from the sky in the badge. Used for the coast: Zanzibar, Pemba and anything on the water. Green stays the land accent.
------------------------------------------------------------------ */
:root{
--ocean: #8FBBE1; /* the brand ocean blue */
--ocean-d: #2F6A9B; /* darker, for text on cream (contrast) */
--ocean-l: #C4DCF0; /* lighter, for washes */
}/* ─────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
ACTIVE KILI TOP — header + explore section
Structure and rhythm after madeforspainandportugal.com:
a fixed translucent bar with a centred logo, a full-bleed hero
with a credential marquee, then a filterable explore block.
Colour is Active Kili's own: forest #487848, ocean #8FBBE1.
══════════════════════════════════════════════════════════════ */
:root{
--ub:0px; /* utility bar retired — folded into the nav */
--nh:78px; /* nav height, incl. the 4px accent rule */
--akt-rule:#487848;
--nv-util-w:308px;
}
@media(max-width:1440px){:root{--nv-util-w:268px}}
@media(max-width:1280px){:root{--nv-util-w:178px}}/* ─────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
ACTIVE KILI TOP — the remaining sections
Same language as the header: section heads after
madeforspainandportugal, dark photo cards after kaer.co, quiet category eyebrows after sabbatical, and the
scroller/counter treatment after 66nord.
Layered over the original markup by document order — the older
rules are left intact so any section can be reverted.
══════════════════════════════════════════════════════════════ */
:root{
--akt-b:'DM Sans',system-ui,sans-serif;
--akt-d:'Playfair Display',Georgia,serif;
--akt-dark:#12100E;
}/* ─────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
FOOTER IN OCEAN BLUE
The client's #8FBBE1 had been scoped to the coast section only.
This gives it the footer too: a deep ocean ground with the blue
as the accent. One variable switches the ground back to basalt
if only the accents are wanted — see --akt-ft-bg below.
══════════════════════════════════════════════════════════════ */
:root{
/* the one dial for the footer ground:
#1E2422 basalt (accents only) · #101E29 deep ocean, near-black
#15323F committed ocean (current) · #1B4257 brighter, more teal */
--akt-ft-bg:#15323F;
--akt-ft-line:rgba(var(--ocean-rgb),.20);
}/* ─────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
TYPEFACES — Cormorant Garamond + Jost
Replaces Playfair Display + DM Sans. Playfair is the default
"elegant" choice and reads a little generic; Cormorant is a
high-contrast old-style with far better italics, which matter
here because every accent on the page is italic. Jost is a
geometric sans whose letterspaced caps carry the eyebrows.
Every face on the page routes through the six vars below.
══════════════════════════════════════════════════════════════ */
:root{
--md:'Cormorant Garamond',Georgia,'Times New Roman',serif;
--mf:'Jost',system-ui,-apple-system,sans-serif;
--d:'Cormorant Garamond',Georgia,'Times New Roman',serif;
--b:'Jost',system-ui,-apple-system,sans-serif;
--akt-d:'Cormorant Garamond',Georgia,'Times New Roman',serif;
--akt-b:'Jost',system-ui,-apple-system,sans-serif;
}/* ══════════════════════════════════════════════════════════════
DESTINATION TEMPLATE
One page shape reused for every destination. Sits on top of
css/site.css and uses the same tokens, faces and devices as the
home page — rule-and-eyebrow heads, dark photo cards, the green
land accent, the ocean blue for coastal destinations.
══════════════════════════════════════════════════════════════ */
/* ── shared shell ── */
body .dst-wrap{max-width:1320px; margin:0 auto; padding:0 clamp(20px,3vw,48px)}body .dst-sec{padding:clamp(56px,6.5vw,104px) 0}body .dst-sec-alt{}body .dst-rule{display:flex; align-items:center; gap:20px; margin-bottom:20px}body .dst-rule::after{content:''; height:1px; flex:1 1 auto; background:var(--hair)}body .dst-rule span{
font-family:var(--akt-b); font-size:11.5px; font-weight:500;
letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft);
white-space:nowrap;
}body .dst-sec h2, body .dst-cta h2{
font-family:var(--akt-d); font-weight:500;
font-size:clamp(28px,4vw,52px); line-height:1.08;
color:var(--ink); margin:0 0 18px;
}body .dst-lead{font-size:17px !important; line-height:1.72; color:var(--ink-soft); margin:0 0 18px}body .dst-sec p{font-family:var(--akt-b); font-size:16px; line-height:1.75; color:var(--ink-soft); margin:0 0 16px}/* ── hero ── */
body .dst-hero{
position:relative; isolation:isolate; overflow:hidden;
min-height:clamp(520px,68vh,760px);
display:flex; flex-direction:column; justify-content:flex-end;
background:#0B0906; color:#fff;
padding-top:var(--nh);
}body .dst-hero-media{position:absolute; inset:0; z-index:-1}body .dst-hero-media img{width:100%; height:100%; object-fit:cover; display:block}body .dst-hero-media::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg,rgba(var(--c-060a08-rgb),.52) 0%,rgba(var(--c-060a08-rgb),.28) 34%,rgba(var(--c-060a08-rgb),.86) 100%);
}body .dst-hero-body{max-width:1320px; width:100%; margin:0 auto; padding:0 clamp(20px,3vw,48px) clamp(26px,3vw,42px)}body .dst-crumb{display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap}body .dst-crumb a, body .dst-crumb em, body .dst-crumb span{
font-family:var(--akt-b); font-size:11px; font-weight:500;
letter-spacing:.2em; text-transform:uppercase; font-style:normal;
}body .dst-crumb a{color:rgba(var(--paper-rgb),.66); transition:color .25s}body .dst-crumb a:hover{color:#fff}body .dst-crumb span{color:rgba(var(--paper-rgb),.32)}body .dst-crumb em{color:var(--gold-l)}body .dst-kicker{
display:block; margin-bottom:14px;
font-family:var(--akt-b); font-size:12px; font-weight:500;
letter-spacing:.3em; text-transform:uppercase; color:var(--gold-l);
}body .dst-hero h1{
font-family:var(--akt-d); font-weight:500;
font-size:clamp(40px,6.4vw,86px); line-height:1; letter-spacing:.005em;
color:#fff; margin:0 0 16px;
}body .dst-hero-body p{
font-family:var(--akt-b); font-size:17px; line-height:1.7;
color:rgba(var(--paper-rgb),.82); max-width:62ch; margin:0;
}/* ── sticky sub-nav ── */
body .dst-jump{
position:sticky; top:var(--nh); z-index:700;
background:rgba(var(--cream-rgb),.94);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
border-bottom:1px solid var(--hair);
}body .dst-jump-in{
max-width:1320px; margin:0 auto; padding:0 clamp(20px,3vw,48px);
display:flex; align-items:center; gap:clamp(14px,1.8vw,30px);
overflow-x:auto; scrollbar-width:none;
}body .dst-jump-in::-webkit-scrollbar{display:none}body .dst-jump a{
padding:15px 0; white-space:nowrap; position:relative;
font-family:var(--akt-b); font-size:11px; font-weight:500;
letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
transition:color .25s;
}body .dst-jump a::after{
content:''; position:absolute; left:0; right:0; bottom:11px; height:1px;
background:var(--gold); opacity:0; transition:opacity .25s;
}body .dst-jump a:hover{color:var(--gold-d)}body .dst-jump a:hover::after{opacity:1}body .dst-jump-cta{
margin-left:auto; flex:0 0 auto;
padding:8px 18px !important; color:#fff !important;
background:var(--gold); border:1px solid var(--gold);
}body .dst-jump-cta::after{display:none !important}body .dst-jump-cta:hover{background:var(--gold-d); border-color:var(--gold-d)}/* ── cta ── */
body .dst-cta{background:var(--forest); color:var(--cream); padding:clamp(52px,6vw,96px) 0}body .dst-cta-in{
max-width:1320px; margin:0 auto; padding:0 clamp(20px,3vw,48px);
display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
gap:clamp(28px,4vw,72px); align-items:center;
}body .dst-cta .dst-rule::after{background:rgba(var(--paper-rgb),.22)}body .dst-cta .dst-rule span{color:rgba(var(--paper-rgb),.66)}body .dst-cta h2{color:var(--cream)}body .dst-cta p{font-family:var(--akt-b); font-size:16px; line-height:1.75; color:rgba(var(--paper-rgb),.76); margin:0; max-width:58ch}body .dst-cta-act{display:flex; flex-direction:column; align-items:flex-start; gap:14px}body .dst-btn, body .dst-btn-ghost{
display:inline-flex; align-items:center; gap:12px;
font-family:var(--akt-b); font-size:11px; font-weight:500;
letter-spacing:.26em; text-transform:uppercase;
padding:17px 34px; transition:background .3s,color .3s,border-color .3s;
}body .dst-btn{background:var(--cream); color:var(--ink); border:1px solid var(--cream)}body .dst-btn:hover{background:var(--gold); border-color:var(--gold); color:#fff}body .dst-btn-ghost{background:transparent; color:var(--cream); border:1px solid rgba(var(--paper-rgb),.34)}body .dst-btn-ghost:hover{background:#25D366; border-color:#25D366; color:#fff}
/* ── narrow ── */
@media(max-width:980px){body .dst-cta-in{grid-template-columns:minmax(0,1fr)}body .dst-hero{min-height:auto; padding-bottom:0}body .dst-hero-body{padding-top:clamp(40px,10vw,70px)}}body .itn-eyebrow{
font-family:var(--akt-b); font-size:10.5px; font-weight:500;
letter-spacing:.24em; text-transform:uppercase; color:var(--stone);
}/* ═══ 1. SECTION HEADS ═════════════════════════════════════════════════════ */
body .itn-shape-head{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,4vw,72px); align-items:end; margin-bottom:clamp(30px,3.6vw,52px)}body .itn-shape-head p{margin:0 !important}/* ═══ 2. THE ROUTE — the map (base styles, used by the route section and cards) */
body .itn-map{background:var(--paper); box-shadow:0 0 0 1px var(--hair); padding:clamp(14px,1.6vw,22px)}body .itn-map svg{display:block; width:100%; height:auto}body .itn-rmap{padding:clamp(16px,2vw,30px); border-radius:18px}
@media (max-width:980px){body .itn-shape-head{grid-template-columns:1fr; align-items:start}}/* Roman numeral in each section eyebrow */
body .itn-rule span{display:inline-flex; align-items:baseline; gap:14px}body .itn-rule span i{font-family:var(--akt-d); font-style:italic; font-weight:500; font-size:20px; letter-spacing:0; text-transform:none; color:var(--gold)}/* ── hero, editorial ── */
body .itn-hero{min-height:clamp(620px,94vh,1040px)}body .itn-hero .dst-hero-media img{animation:itn-kb 22s ease-out both}
@keyframes itn-kb{from{transform:scale(1.08)}to{transform:scale(1)}}body .itn-hero .dst-hero-media::after{background:linear-gradient(180deg,rgba(var(--c-0a0c0b-rgb),.55) 0%,rgba(var(--c-0a0c0b-rgb),.05) 30%,rgba(var(--c-0a0c0b-rgb),.25) 55%,rgba(var(--c-0a0c0b-rgb),.86) 100%) !important}body .itn-hero h1{font-size:clamp(46px,7.4vw,118px) !important; line-height:.96 !important; letter-spacing:-.015em; max-width:11ch}body .itn-hero .dst-hero-body > p, body .itn-hero .dst-hero-body > :where(.elementor-widget) > :where(.elementor-widget-container) > p{max-width:58ch}body .itn-hero-act{display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:30px}body .itn-hero-link{font-family:var(--akt-b); font-size:11.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:#fff; padding-bottom:6px; border-bottom:1px solid rgba(var(--paper-rgb),.5); transition:border-color .25s}body .itn-hero-link:hover{border-color:#fff}
@media (prefers-reduced-motion:reduce){body .itn-hero .dst-hero-media img{animation:none}}
@media (max-width:760px){body .itn-rmap{padding:10px; border-radius:14px}}/* ═══ the route map from a WordPress shortcode ════════════════════════════
The inline script in section III moves the shortcode's output into the
slot and adds .is-embed / .has-embed. The drawn map's legend and hint no
longer describe what is on screen, so they go. */
body .itn-rmap.is-embed{padding:0; overflow:hidden; display:flex; min-height:clamp(320px,40vw,560px)}body .itn-rmap.is-embed > *, body .itn-rmap.is-embed > :where(.elementor-widget) > :where(.elementor-widget-container) > *{flex:1 1 auto; width:100% !important; min-height:inherit}/* the Golden Safari Itinerary map: its block and canvas fill the whole slot (the plugin's own
floor is 360px, which left a dark band under it in a 560px slot) */
body .itn-rmap.is-embed .gsi-block--map{display:flex; flex-direction:column; height:auto}body .itn-rmap.is-embed #routeMap{flex:1 1 auto; height:auto !important; min-height:clamp(320px,40vw,560px) !important}body /* "body .itn-map svg{width:100%;height:auto}" is for the drawn map; on the plugin map it shrank Leaflet's
route layer (an svg in a zero-size pane) to 0x0, so the road route and day line never showed */
.itn-map.is-embed .leaflet-pane svg{width:auto !important; height:auto !important; max-width:none !important; display:inline}body .itn-pb{margin:0 0 18px; padding:14px 0 0; border-top:1px solid var(--hair); font-family:var(--akt-b); color:var(--ink)}body .itn-pb--rates{margin:0 0 16px; padding:0 0 14px; border-top:0; border-bottom:1px solid var(--hair)}/* the extra button pushed the bar past 1320px and it was clipped at "DOWNLOA" — tighter link spacing here */
body .dst-jump-in:has(.itn-pdf-btn--nav){gap:clamp(12px,1.2vw,20px)}body .dst-jump-in:has(.itn-pdf-btn--nav) a{letter-spacing:.15em !important}/* ADD IMAGE — the master prompt's one placeholder. A real URL shows at once;
an empty slot stays a tidy panel with its label. CSS only, never a script. */
body .ph{background:linear-gradient(155deg,#22330f,#0c1408 72%)}body .ph-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block}body .ph-img:not([src="ADD IMAGE"]) ~ .ph-l{display:none}body .ph-l{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:18px; font:500 12px/1.5 var(--akt-b); letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--c-f4f1ec-rgb),.35)}body .dst-hero-media.ph{position:absolute}/* ═══ /safari-plans/ — the hub ═══════════════════════════════════════════ */
body .itn-hub-hero{min-height:clamp(520px,78vh,860px)}body .itn-hub-g h2 em{font-style:italic; color:var(--gold)}body .itn-hub-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(14px,1.6vw,22px)}body .itn-hub-c{display:flex; flex-direction:column; background:var(--paper); box-shadow:0 0 0 1px var(--hair); border-radius:14px; overflow:hidden; color:inherit; text-decoration:none; transition:transform .4s var(--me), box-shadow .3s}body .itn-hub-c:hover{transform:translateY(-4px); box-shadow:0 0 0 1px var(--gold), 0 24px 40px -24px rgba(var(--ink-rgb),.45)}body .itn-hub-m{position:relative; display:block; aspect-ratio:4/3; overflow:hidden}body .itn-hub-m > img:not(.ph-img){width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--me)}body .itn-hub-c:hover .itn-hub-m > img, body .itn-hub-c:hover .itn-hub-m > :where(.elementor-widget) > :where(.elementor-widget-container) > img{transform:scale(1.04)}body .itn-hub-m .ph-l{font-size:11px}body .itn-hub-m b{position:absolute; right:14px; bottom:12px; display:flex; flex-direction:column; align-items:center; font-family:var(--akt-d); font-weight:500; font-size:40px; line-height:.9; color:#fff; text-shadow:0 2px 14px rgba(var(--c-000000-rgb),.5)}body .itn-hub-m b small{font:500 9px/1.4 var(--akt-b); letter-spacing:.24em; text-transform:uppercase}body .itn-hub-b{display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; flex:1}body .itn-hub-b strong{font-family:var(--akt-d); font-weight:500; font-size:23px; line-height:1.15; color:var(--ink)}body .itn-hub-r{font:500 11px/1.6 var(--akt-b); letter-spacing:.14em; text-transform:uppercase; color:var(--stone)}body .itn-hub-r i{font-style:normal; color:var(--gold)}body .itn-hub-w{margin-top:auto; padding-top:10px; border-top:1px dashed var(--hair); font:400 13px/1.5 var(--akt-b); color:var(--ink-soft)}body .itn-hub-w em{font-style:normal; font-weight:500; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-d); margin-right:10px}/* an empty hero photo slot: its brief sits small in the top corner, never across the title */
body .dst-hero-media.ph .ph-l{align-items:flex-start; justify-content:flex-end; text-align:right; padding:calc(var(--nh) + 84px) clamp(20px,3vw,48px) 0 45%; font-size:10px; line-height:1.6; color:rgba(var(--c-f4f1ec-rgb),.4)}
@media (max-width:980px){body .dst-hero-media.ph .ph-l{display:none}}
/* ═══════════════════════════════════════════════════════════════════════════
MOTION — shared by the experience and destination page families.
Both families were readable and completely inert: nothing responded to
scroll, the sticky sub-navs never said where you were, and moving between
pages was a white flash. Three techniques, in order of how new they are:
1. cross-document view transitions @view-transition
2. scroll-driven animations animation-timeline: scroll() / view()
3. IntersectionObserver reveals .mo-rise, driven by js/motion.js
1 and 2 sit behind @supports, so browsers without them get the static page.
3 only ever applies once motion.js sets .js-motion on , which means a
script that fails to load cannot leave content invisible.
Everything is switched off under prefers-reduced-motion except the scroll-spy,
which is navigation rather than decoration and lives in the JS.
Keyframes are shared and prefixed mo-. Family-specific rules are grouped
below; anything generic lives in the EXPERIENCE block only because it was
written there first — .mo-rise, the view transitions, scroll-behavior and
interpolate-size all apply to both.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
MOTION LAYER
The pages were readable and completely inert — nothing responded to scroll,
the sticky sub-nav never said where you were, and moving between pages was a
white flash. Three techniques, in order of how new they are:
1. cross-document view transitions @view-transition
2. scroll-driven animations animation-timeline: scroll() / view()
3. IntersectionObserver reveals .mo-rise, driven by experience.js
1 and 2 are progressive: behind @supports, and absent browsers simply get the
static page. 3 only ever applies once motion.js has set .js-motion, so a
failed script cannot leave content invisible.
Every one of them is switched off under prefers-reduced-motion.
═══════════════════════════════════════════════════════════════════════════ */
/* ── 1. page-to-page transitions ─────────────────────────────────────────
Same-origin navigation between any two pages that load this stylesheet
cross-fades instead of flashing white. The hero image is a named element,
so navigating from a hub card to its page morphs the picture across. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {body ::view-transition-old(root){ animation: mo-vt-out .22s var(--me) both; }body ::view-transition-new(root){ animation: mo-vt-in .38s var(--me) both; }
@keyframes mo-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes mo-vt-in { from { opacity: 0; transform: translateY(14px); } }body ::view-transition-group(page-hero){ animation-duration: .5s; }}
@media (prefers-reduced-motion: reduce) {body ::view-transition-old(root), body ::view-transition-new(root){ animation: none; }}
/* ── 2. scroll-driven, no JavaScript at all ──────────────────────────────*/
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
@keyframes mo-progress { to { transform: scaleX(1); } }
@keyframes mo-hero-drift {
from { transform: scale(1.14) translateY(-1.5%); }
to { transform: scale(1.02) translateY(3.5%); }
}
@keyframes mo-hero-lift { to { opacity: 0; transform: translateY(-26px); } }
@keyframes mo-rail { to { transform: scaleY(1); } }
@keyframes mo-num { from { opacity: 0; transform: translateY(10px); } }}}
/* ── 5. the FAQ opens instead of snapping ────────────────────────────────*/
@supports (interpolate-size: allow-keywords) {
@media (prefers-reduced-motion: no-preference) {:root{ interpolate-size: allow-keywords; }}}
/* ── 6b. the hero arrives, once, on load ─────────────────────────
Staggered rather than all at once, so the eye lands on the kicker, then the
headline, then the standfirst — which is the order it should read in. */
@media (prefers-reduced-motion: no-preference) {
@keyframes mo-enter { from { opacity: 0; transform: translateY(20px); } }}
/* ── 7. anything that scrolls, scrolls smoothly ──────────────────────────*/
@media (prefers-reduced-motion: no-preference) {html{ scroll-behavior: smooth; }}
/* ═══════════════════════════════════════════════════════════════════════════
DESTINATION FAMILY
Same three techniques as above, tuned to the destination tokens. The two
differences that matter: the destination sub-nav sits on cream rather than
near-black, so the active state is gold-on-ink instead of white-on-fire; and
the signature element here is the month strip rather than a time rail.
═══════════════════════════════════════════════════════════════════════════ */
/* ── scroll-driven, no JavaScript ───────────────────────────────────────*/
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {body .dst-jump::after{
content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
background: linear-gradient(90deg, var(--gold-d), var(--gold));
transform: scaleX(0); transform-origin: 0 50%;
animation: mo-progress linear both;
animation-timeline: scroll(root block);
}body .dst-hero-media img{
animation: mo-hero-drift linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}body .dst-hero-body{
animation: mo-hero-lift linear both;
animation-timeline: view();
animation-range: exit 0% exit 78%;
}/* the section rules draw themselves in rather than just being there */
body .dst-rule::before, body .dst-rule::after{
transform-origin: 0 50%;
animation: mo-rule linear both;
animation-timeline: view(); animation-range: entry 10% entry 90%;
}
@keyframes mo-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }}}/* ── the sub-nav actually navigates ─────────────────────────────────────*/
body .dst-jump a{ transition: color .25s; }body .dst-jump{ transition: background .3s var(--me), box-shadow .3s var(--me); }/* the anchor offset has to clear the header and the sub-nav together */
body .dst-sec[id]{ scroll-margin-top: calc(var(--nh) + 58px); }
/* ── hero entrance ──────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: no-preference) {body .dst-crumb, body .dst-kicker, body .dst-hero h1, body .dst-hero-body p{
animation: mo-enter .82s var(--me) both;
}body .dst-crumb{ animation-delay: .04s; }body .dst-kicker{ animation-delay: .13s; }body .dst-hero h1{ animation-delay: .20s; }body .dst-hero-body p{ animation-delay: .32s; }}body .dst-btn, body .dst-jump-cta{ transition: background .25s, color .25s, transform .25s var(--me); }
@media (prefers-reduced-motion: no-preference) {body .dst-btn:hover, body .dst-jump-cta:hover{ transform: translateY(-2px); }}
/* ── cross-page hero morph ──────────────────────────────────────────────
Shares the name with the experience hero, so moving between a destination
and an experience carries the picture across rather than cutting. */
@media (prefers-reduced-motion: no-preference) {body .dst-hero-media img{ view-transition-name: page-hero; }}
/* ============================================================================
5. GLUE - Elementor's widget markup vs what the reference sheet expects.
========================================================================== */
body :where(.elementor-widget-heading) :where(.elementor-heading-title) {
font: inherit; color: inherit; margin: 0; letter-spacing: inherit;
}
body :where(.dst-hero,.dst-jump,.dst-sec,.itn-bk,.dst-cta,.itn-map-sc-wrap) .elementor-widget-heading .elementor-heading-title { line-height: inherit; }
/* Images: the sheet sizes the ![]()
; Elementor's figure/link wrappers vanish */
body :where(.dst-hero,.dst-jump,.dst-sec,.itn-bk,.dst-cta,.itn-map-sc-wrap) .elementor-widget-image,
body :where(.dst-hero,.dst-jump,.dst-sec,.itn-bk,.dst-cta,.itn-map-sc-wrap) .elementor-widget-image figure,
body :where(.dst-hero,.dst-jump,.dst-sec,.itn-bk,.dst-cta,.itn-map-sc-wrap) .elementor-widget-image a { display: contents; }
/* the widget's ![]()
carries no class, so the sizing class on the wrapper is
handed down (playbook section 4) */
body .elementor-widget-image.ph-img img,
body .dst-hero-media .elementor-widget-image img,
body .itn-card-media .elementor-widget-image img,
body .itn-hub-m .elementor-widget-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* ADD IMAGE: the empty slot hides its ![]()
and shows its brief; a real URL
hides the brief. CSS only (master prompt 3.3). */
body .elementor-widget-image img[src="ADD IMAGE"] { display:none !important; }
body :where(.ph, .itn-card-media, .dst-hero-media, .itn-hub-m):has(.elementor-widget-image img:not([src="ADD IMAGE"])) :where(.ph-l, .itn-card-need) { display:none !important; }
/* Buttons: strip Elementor's chrome, let the sheet style the wrapper, and
stretch the anchor over the whole box (playbook 3.6, 3.7) */
body .elementor-widget-button .elementor-button { background-color: transparent; border-radius: 0; box-shadow: none; fill: currentColor; }
body .elementor-widget-button > .elementor-widget-container,
body .elementor-widget-button .elementor-button-wrapper,
body .elementor-widget-button .elementor-button-content-wrapper { display: contents; }
body .elementor-widget-button .elementor-button-text { font: inherit; color: inherit; }
body :where(.dst-hero,.dst-jump,.dst-sec,.itn-bk,.dst-cta,.itn-map-sc-wrap) .elementor-button.elementor-button {
padding: 0; line-height: inherit; font: inherit; color: inherit;
letter-spacing: inherit; text-transform: inherit;
}
body .elementor-widget-button { position: relative; }
body .elementor-widget-button .elementor-button::after { content: ""; position: absolute; inset: 0; }
body .dst-jump-in > .elementor-widget-button { flex: 0 0 auto; }
/* Kit defaults (Global colours/typography) written at (0,3,0) — hand them back */
body.elementor-page .elementor-widget-heading .elementor-heading-title,
body.elementor-page .elementor-widget-text-editor,
body.elementor-page .elementor-widget-icon-list .elementor-icon-list-text {
color: inherit; font-family: inherit; font-weight: inherit;
}
body.elementor-page .elementor-widget-button .elementor-button { background-color: transparent; }
/* the reset forces display with !important; the `hidden` attribute (rate
panels, form steps) must still win */
body [hidden][hidden] { display: none !important; }
/* Text Editors are pass-throughs: the wrapper keeps the class, its container
vanishes from layout */
body .elementor-widget-text-editor > .elementor-widget-container { display: contents; }
/* a pass-through widget is not a box at all: the element inside it is */
body .elementor-widget-text-editor.ba-pass { display: contents !important; }
body :where(.ba-t-span, .ba-t-b, .ba-t-i, .ba-t-em, .ba-t-strong, .ba-t-small,
.ba-t-a, .ba-t-cite, .ba-t-time, .ba-t-abbr, .ba-t-code,
.ba-t-mark, .ba-t-sub, .ba-t-sup) { display: inline; }
/* link containers (hub and related cards) are real elements */
body a.e-con { color: inherit; text-decoration: none; }
/* HTML widgets are pass-throughs too: the markup inside is the design */
body .elementor-widget-html,
body .elementor-widget-html > .elementor-widget-container { display: contents !important; }
/* a subgrid inherits its parent's gap; the reset's gap:0 would stop that */
body .e-con.itn-nstrip { gap: normal !important; }
/* FAQ: Elementor's Accordion restyled to the page's question list */
body .dst-faq .elementor-accordion { border-top: 1px solid var(--hair); }
body .dst-faq .elementor-accordion .elementor-accordion-item { border: 0; border-bottom: 1px solid var(--hair); }
body .dst-faq .elementor-accordion .elementor-tab-title {
padding: 20px 40px 20px 0; border: 0; font-family: var(--akt-d); font-size: 21px;
font-weight: 500; line-height: 1.3; color: var(--ink); cursor: pointer; position: relative;
}
body .dst-faq .elementor-accordion .elementor-tab-title a { color: inherit; }
body .dst-faq .elementor-accordion .elementor-tab-content {
padding: 0 40px 22px 0; border: 0; font-family: var(--akt-b); font-size: 15.5px; line-height: 1.75; color: var(--ink-soft);
}
body .dst-faq .elementor-accordion .elementor-accordion-icon { color: var(--gold); }
/* Rows that are now containers, and so are also `.e-con`. The reset
above neutralises Elementor layout with !important, which would
otherwise beat these plain declarations (standard rule 6). Generated
from the classes actually used as containers - not hand-listed. */
body .dst-wrap:where(.e-con, .elementor-widget){max-width:1320px !important;margin:0 auto !important;padding:0 clamp(20px,3vw,48px) !important;}
body .dst-sec:where(.e-con, .elementor-widget){padding:clamp(56px,6.5vw,104px) 0 !important;}
body .dst-sec h2:where(.elementor-heading-title), body .dst-cta h2:where(.elementor-heading-title){font-family:var(--akt-d) !important;font-weight:500 !important;font-size:clamp(28px,4vw,52px) !important;line-height:1.08 !important;color:var(--ink) !important;margin:0 0 18px !important;}
body .dst-hero:where(.e-con, .elementor-widget){min-height:clamp(520px,68vh,760px) !important;display:flex !important;flex-direction:column !important;justify-content:flex-end !important;color:#fff !important;padding-top:var(--nh) !important;}
body .dst-hero-body:where(.e-con, .elementor-widget){max-width:1320px !important;width:100% !important;margin:0 auto !important;padding:0 clamp(20px,3vw,48px) clamp(26px,3vw,42px) !important;}
body .dst-crumb:where(.e-con, .elementor-widget){display:flex !important;align-items:center !important;gap:10px !important;margin-bottom:20px !important;flex-wrap:wrap !important;}
body .dst-crumb a:where(.e-con), body .dst-crumb span:where(.e-con){font-family:var(--akt-b) !important;font-size:11px !important;font-weight:500 !important;letter-spacing:.2em !important;text-transform:uppercase !important;font-style:normal !important;}
body .dst-crumb a:where(.e-con){color:rgba(var(--paper-rgb),.66) !important;}
body .dst-crumb a:where(.e-con):hover{color:#fff !important;}
body .dst-crumb span:where(.e-con){color:rgba(var(--paper-rgb),.32) !important;}
body .dst-hero h1:where(.elementor-heading-title){font-family:var(--akt-d) !important;font-weight:500 !important;font-size:clamp(40px,6.4vw,86px) !important;line-height:1 !important;letter-spacing:.005em !important;color:#fff !important;margin:0 0 16px !important;}
body .dst-jump-in:where(.e-con, .elementor-widget){max-width:1320px !important;margin:0 auto !important;padding:0 clamp(20px,3vw,48px) !important;display:flex !important;align-items:center !important;gap:clamp(14px,1.8vw,30px) !important;}
body .dst-jump a:where(.e-con){padding:15px 0 !important;font-family:var(--akt-b) !important;font-size:11px !important;font-weight:500 !important;letter-spacing:.2em !important;text-transform:uppercase !important;color:var(--ink-soft) !important;}
body .dst-jump a:where(.e-con):hover{color:var(--gold-d) !important;}
body .dst-cta:where(.e-con, .elementor-widget){color:var(--cream) !important;padding:clamp(52px,6vw,96px) 0 !important;}
body .dst-cta-in:where(.e-con, .elementor-widget){max-width:1320px !important;margin:0 auto !important;padding:0 clamp(20px,3vw,48px) !important;display:grid !important;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) !important;gap:clamp(28px,4vw,72px) !important;align-items:center !important;}
body .dst-cta .dst-rule span:where(.e-con){color:rgba(var(--paper-rgb),.66) !important;}
body .dst-cta h2:where(.elementor-heading-title){color:var(--cream) !important;}
body .dst-cta-act:where(.e-con, .elementor-widget){display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:14px !important;}
/* ── narrow ── */
@media(max-width:980px){
body .dst-cta-in:where(.e-con, .elementor-widget){grid-template-columns:minmax(0,1fr) !important;}
body .dst-hero:where(.e-con, .elementor-widget){min-height:auto !important;padding-bottom:0 !important;}
body .dst-hero-body:where(.e-con, .elementor-widget){padding-top:clamp(40px,10vw,70px) !important;}
}
body .itn-shape-head:where(.e-con, .elementor-widget){display:grid !important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) !important;gap:clamp(24px,4vw,72px) !important;align-items:end !important;margin-bottom:clamp(30px,3.6vw,52px) !important;}
@media (max-width:980px){
body .itn-shape-head:where(.e-con, .elementor-widget){grid-template-columns:1fr !important;align-items:start !important;}
}
body .itn-hero:where(.e-con, .elementor-widget){min-height:clamp(620px,94vh,1040px) !important;}
body .itn-hero h1:where(.elementor-heading-title){font-size:clamp(46px,7.4vw,118px) !important;line-height:.96 !important;letter-spacing:-.015em !important;max-width:11ch !important;}
body .itn-hero-act:where(.e-con, .elementor-widget){display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:14px 28px !important;margin-top:30px !important;}
body .dst-jump-in:has(.itn-pdf-btn--nav):where(.e-con, .elementor-widget){gap:clamp(12px,1.2vw,20px) !important;}
body .dst-jump-in:has(.itn-pdf-btn--nav) a:where(.e-con){letter-spacing:.15em !important;}
body .ph-img:where(.e-con, .elementor-widget){width:100% !important;height:100% !important;display:block !important;}
body .itn-hub-hero:where(.e-con, .elementor-widget){min-height:clamp(520px,78vh,860px) !important;}
body .itn-hub-grid:where(.e-con, .elementor-widget){display:grid !important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important;gap:clamp(14px,1.6vw,22px) !important;}
body .itn-hub-c:where(.e-con, .elementor-widget){display:flex !important;flex-direction:column !important;color:inherit !important;}
body .itn-hub-m:where(.e-con, .elementor-widget){display:block !important;}
body .itn-hub-b:where(.e-con, .elementor-widget){display:flex !important;flex-direction:column !important;gap:8px !important;padding:18px 20px 20px !important;flex:1 !important;}/* End custom CSS */