/* The typefaces are served from this site (fonts/, SIL Open Font License, the licences beside
   them): nothing is fetched from Google, so no visitor's address goes to Google (Dwight, 21 Oct
   2026, A-T7). Latin only; Inter is one variable file for 400 to 600. */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); }

/* Cavero Tourism. Calm, editorial, photo-led: warm ground, deep sea teal, one sunset accent,
   Instrument Serif over Inter. Rules from rules.md are numbered where they land. */

:root {
  --ground: #faf7f2;
  --ink: #1d2b2c;        /* body type */
  --deep: #0e3a3d;       /* headings, dark blocks */
  --accent: #c4552f;
  --on-accent: #ffffff;
  --sand: #efe6d8;       /* band 1 */
  --sea: #e2eeec;        /* band 2 */
  --foot: #082426;
  --muted: #5b6b6c;
  --line: #9fb7b5;
  --r-photo: 22px;       /* D2: nothing square */
  --r-card: 18px;
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --head-h: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 8px); overflow-x: clip; }
body { margin: 0; font: 400 17px/1.6 var(--body); color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.no-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; border-radius: var(--r-photo); }
picture { display: block; }
h1, h2, h3 { margin: 0; color: var(--deep); }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -0.005em; }
h2 { font-size: clamp(2.3rem, 3.6vw, 3.4rem); line-height: 1.04; margin-bottom: 0.9rem; text-wrap: balance; }
h2 em, h1 em { font-style: italic; }
h3 { font-family: var(--body); font-weight: 600; font-size: 1.06rem; line-height: 1.35; }
p { margin: 0 0 1em; }
a { color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
.muted { color: var(--muted); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.sec { padding: 4rem 0; }                  /* D39 */
.sec--ground { background: var(--ground); }
.sec--sand { background: var(--sand); }    /* D27: no two neighbours share a ground */
.sec--sea { background: var(--sea); }
.sec--deep { background: var(--deep); color: #e9efee; }

.eyebrow { font: 500 0.75rem/1.2 var(--body); text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin: 0 0 1rem; }
.eyebrow--light { color: rgba(255, 255, 255, 0.9); }
.eyebrow--sand { color: #e6d4b8; }

/* Buttons: pills. D15: a small lift, nothing more. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.85em 1.6em; border-radius: 999px; font: 600 0.95rem/1.1 var(--body); letter-spacing: 0.01em; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: transform 0.3s var(--ease), background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; }
.btn--main { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px -12px rgba(196, 85, 47, 0.7); }
.btn--main:hover { background: #b14a26; }
.btn--ghost { border-color: rgba(255, 255, 255, 0.85); color: #fff; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.16); }
.btn--lg { padding: 1em 1.9em; font-size: 1rem; }
.btn:hover { transform: translateY(-2px); }
.text-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; white-space: nowrap; }
.text-link:hover { color: #9f421f; }

/* ---------- The header. D4: see-through over the hero, filled once scrolled.
   D30: the line is there from the start, transparent, so nothing jumps. ---------- */
.top { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--head-h); display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 1.5rem 2.1rem; padding: 0 32px; color: #fff; background: transparent; border-bottom: 2px solid transparent; transition: background-color 0.4s, box-shadow 0.4s; }
.top::before { content: ""; position: absolute; inset: 0 0 -40px; background: linear-gradient(to bottom, rgba(5, 25, 27, 0.38), transparent); pointer-events: none; transition: opacity 0.4s; z-index: -1; }
.top.is-filled { background: var(--ground); color: var(--deep); border-bottom-color: var(--line); box-shadow: 0 10px 30px -12px rgba(14, 58, 61, 0.28); }
.top.is-filled::before { opacity: 0; }
.top.is-filled .brand, .top.is-filled .top__tabs a { color: var(--deep); }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; justify-self: start; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__word { font: 400 1.6rem/1 var(--display); letter-spacing: 0.005em; white-space: nowrap; }
.brand__word em { font-style: italic; }
.top__tabs { display: flex; gap: 2.1rem; }
.top__tabs a { white-space: nowrap; text-decoration: none; font-weight: 500; font-size: 0.94rem; letter-spacing: 0.01em; opacity: 0.92; text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
.top__tabs a:hover { opacity: 1; text-decoration-line: underline; }
@media (min-width: 1101px) { .top .brand { grid-column: 2; margin-right: 1.4rem; } .top__tabs { grid-column: 3; } .top__cta { grid-column: 4; } }
@media (min-width: 1101px) and (max-width: 1239px) { .top { column-gap: 1.3rem; } .top__tabs { gap: 1.4rem; } .top .brand { margin-right: 0.6rem; } }
.top__cta { justify-self: start; }
.top__phone { display: none; gap: 10px; align-items: center; justify-self: end; }
.btn--pill-sm { padding: 0.62em 1.05em; font-size: 0.84rem; }

/* D5, D16: one plain round menu button, lines dead centre. */
.round { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.18); color: #fff; backdrop-filter: blur(8px); transition: background-color 0.4s, color 0.4s; }
.round { transition: background-color 0.4s; }
.round span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.top.is-filled .round { background: var(--deep); color: var(--ground); }

.drawer { position: fixed; inset: 0; z-index: 70; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(4, 22, 24, 0.45); opacity: 0; transition: opacity 0.3s; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(84vw, 360px); background: var(--deep); color: var(--ground); padding: 88px 28px 32px; display: flex; flex-direction: column; gap: 1.2rem; transform: translateX(100%); transition: transform 0.4s var(--ease); border-radius: 22px 0 0 22px; }
.drawer__panel a:not(.btn) { font: 400 1.9rem/1.1 var(--display); text-decoration: none; }
.drawer__panel .btn { margin-top: auto; font-size: 1rem; padding: 1em 1.4em; }
.drawer__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }

/* ---------- 4.1 The hero (D3). The photo eases in once. ---------- */
.hero { position: relative; min-height: max(620px, 100svh); display: grid; align-items: end; align-content: end; color: #fff; overflow: hidden; background: #0d3336; }
.hero__photos { position: absolute; inset: 0; }
.hero__slide, .hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* D9: the pick crossfades in place. The new photo fades in on top; the old one goes once it is covered. */
.hero__slide { opacity: 0; z-index: 0; }
.hero__slide.is-on { opacity: 1; z-index: 1; }
.hero__slide.is-top { z-index: 2; transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1); }
.hero__slide--au img { object-position: 50% 60%; }
.hero__slide--ca img { object-position: 50% 62%; }
.hero__slide--nz img { object-position: 50% 58%; }
/* Banff is bright snow: its own deeper shade on the left, so the words still read. It fades with the photo. */
.hero__slide--ca::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(5, 30, 32, 0.62) 0%, rgba(5, 30, 32, 0.34) 42%, rgba(5, 30, 32, 0.05) 70%), linear-gradient(to top, rgba(5, 30, 32, 0.38), rgba(5, 30, 32, 0) 55%); }
.hero .eyebrow, .hero .lede, .hero__ticks { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28); }
.hero__slide--au img { animation: hero-ease 1.8s cubic-bezier(0.25, 0.6, 0.3, 1) both; transform-origin: 60% 40%; }
@keyframes hero-ease { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero__shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background:
  radial-gradient(120% 90% at 0% 100%, rgba(5, 30, 32, 0.78) 0%, rgba(5, 30, 32, 0.42) 38%, rgba(5, 30, 32, 0) 66%),
  linear-gradient(to top, rgba(5, 30, 32, 0.4), rgba(5, 30, 32, 0) 40%); }
.hero__copy { position: relative; z-index: 4; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px 176px; display: grid; grid-template-columns: minmax(0, 800px); align-items: end; }
.hero h1 { color: #fff; font-size: clamp(2.95rem, min(5.2vw, 8.4vh), 5rem); line-height: 1.02; letter-spacing: -0.014em; -webkit-text-stroke: 0.6px currentColor; margin: 0 0 1.4rem; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.18); }
.hero .lede { font-size: 1.15rem; line-height: 1.6; max-width: 34rem; color: rgba(255, 255, 255, 0.94); margin-bottom: 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 2.1rem 0 2.2rem; }
.hero__ticks { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.92); }
.hero__ticks li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__ticks svg { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; padding: 2px; flex: none; }
.hero__main > *, .hero__pick { animation: rise-in 0.9s var(--ease) both; }
.hero__main > :nth-child(2) { animation-delay: 0.1s; }
.hero__main > :nth-child(3) { animation-delay: 0.2s; }
.hero__main > :nth-child(4) { animation-delay: 0.3s; }
.hero__main > :nth-child(5), .hero__pick { animation-delay: 0.4s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } }

/* The place switcher: a glassy, dark-tinted pill; the pick is filled white. */
/* The one compass. Wide screens: the bottom-left corner of the hero, the compass about 36px
   from the edge, the place name centred under it. Tablet and phone: under the ticks (below). */
.hero__pick { position: absolute; z-index: 5; left: 24px; bottom: 40px; display: grid; grid-template-columns: 11.5rem; justify-items: center; gap: 10px; }
.hero__play-i { fill: currentColor; display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero__place { margin: 0; font-size: 0.8rem; line-height: 1.3; letter-spacing: 0.02em; white-space: nowrap; text-align: center; color: rgba(255, 255, 255, 0.84); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } }

/* ---------- 4.2 Tours. Desktop: a 4 x 2 grid. Below 1000px: a strip snapping on the card. ---------- */
.head-row { display: grid; grid-template-columns: 1fr minmax(0, 25rem); align-items: end; gap: 1rem 3rem; margin-bottom: 2rem; }
.head-row h2 { margin-bottom: 0; }
.head-row__line { color: var(--muted); margin: 0 0 0.35rem; font-size: 1.02rem; }

.strip__track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.strip__arrows { display: none; }
.tour__link { position: relative; display: block; height: 248px; border-radius: var(--r-photo); overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; box-shadow: 0 18px 40px -24px rgba(14, 58, 61, 0.55); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.tour__link picture, .tour__link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.tour__link img { transition: transform 1.1s var(--ease); }
.tour__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 24, 26, 0.72) 0%, rgba(4, 24, 26, 0.28) 34%, rgba(4, 24, 26, 0) 58%); z-index: 1; }
.tour__name { position: absolute; z-index: 2; left: 20px; right: 64px; bottom: 18px; font: 400 1.55rem/1.08 var(--display); text-wrap: balance; }
.tour__chip { position: absolute; z-index: 2; right: 16px; bottom: 16px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.94); color: var(--deep); transition: background-color 0.4s, color 0.4s; }
.tour__chip svg { width: 18px; height: 18px; }
.tour__link:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -24px rgba(14, 58, 61, 0.6); }
.tour__link:hover img { transform: scale(1.04); }
.tour__link:hover .tour__chip { background: var(--accent); color: #fff; }
.tour__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- 4.3 What you get: the collage and the list, centred against each other (D33). ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 4.5rem; align-items: center; }
.collage { position: relative; height: 560px; }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage__big { position: absolute; left: 0; top: 0; width: 76%; height: 92%; }
.collage__big img { border-radius: var(--r-photo); box-shadow: 0 30px 60px -30px rgba(14, 58, 61, 0.45); }
.collage__small { position: absolute; right: 0; bottom: 0; width: 48%; aspect-ratio: 1; }
.collage__small img { border-radius: var(--r-photo); border: 6px solid var(--ground); box-shadow: 30px 30px 70px -18px rgba(14, 58, 61, 0.38), 0 10px 24px -10px rgba(14, 58, 61, 0.3); }
.services h2 { max-width: 13ch; margin-bottom: 1.8rem; }
.gets { display: grid; gap: 0; margin-bottom: 2rem; border-top: 1.5px solid #b6ccc9; }
.gets li { display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem; align-items: start; padding: 1rem 0; border-bottom: 1.5px solid #b6ccc9; }
.gets p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.98rem; line-height: 1.5; }
.gets__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid #b6ccc9; box-shadow: 0 8px 18px -10px rgba(14, 58, 61, 0.35); }
.gets__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 4.3b Automations: the list and a drawn phone, centred against each other (D33). ---------- */
.split--auto { grid-template-columns: minmax(0, 1fr) 340px; }
.autos h2 { margin-bottom: 0.7rem; }
.autos__line { color: var(--muted); font-size: 1.04rem; margin-bottom: 1.4rem; }
.autos__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }
.autos__price { margin: 0; font-size: 0.82rem; color: var(--muted); }
.gets--ground { border-top-color: #c3d3d0; margin-bottom: 2.2rem; }
.gets--ground li { border-bottom-color: #c3d3d0; padding: 1.25rem 0; grid-template-columns: 56px 1fr; gap: 1.3rem; align-items: center; }
.gets--ground .gets__icon { width: 56px; height: 56px; }
.gets--ground .gets__icon svg { width: 26px; height: 26px; }
.gets--ground h3 { font-size: 1.18rem; }
.gets--ground p { font-size: 1.01rem; }
.gets--ground .gets__icon { border-color: #b9cbc8; }
/* The drawn phone: decoration only (aria-hidden), refined, not a cartoon. */
.phone { justify-self: center; width: 300px; height: 590px; padding: 11px; border-radius: 50px; background: linear-gradient(150deg, #20393b 0%, #0a1d1f 55%, #051214 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.1), inset 0 0 0 4px #0b1f21, 0 44px 80px -34px rgba(8, 36, 38, 0.7), 0 18px 36px -20px rgba(8, 36, 38, 0.55); }
.phone__screen { position: relative; height: 100%; border-radius: 40px; overflow: hidden; background-color: #2b5a5c; background-image: linear-gradient(180deg, rgba(8, 36, 38, 0.08) 0%, rgba(8, 36, 38, 0.5) 100%), url("img/boat-1400.jpg"); background-image: linear-gradient(180deg, rgba(8, 36, 38, 0.08) 0%, rgba(8, 36, 38, 0.5) 100%), image-set("img/boat-1400.webp" type("image/webp"), "img/boat-1400.jpg" type("image/jpeg")); background-size: cover; background-position: 50% 50%; }
.phone__notch { position: absolute; top: 12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 999px; background: #061416; }
.phone__cards { position: absolute; left: 12px; right: 12px; top: 112px; display: grid; gap: 10px; }
.note { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 12px; border-radius: 18px; background: rgba(250, 247, 242, 0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.55); color: var(--ink); font-size: 0.78rem; line-height: 1.38; }
.note p { margin: 0; }
.note__icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); }
.note__icon svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.note__top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 1px !important; }
.note__top strong { font-size: 0.8rem; font-weight: 600; color: var(--deep); }
.note__top span { font-size: 0.68rem; color: var(--muted); }
.reveal .note { opacity: 0; transform: translateY(-14px) scale(0.98); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(0.4s + var(--i) * 0.42s); }
.reveal.is-in .note { opacity: 1; transform: none; }

/* ---------- 4.4 The photo ribbon: the breather. Bottoms follow a gentle wave. ---------- */
.ribbon { display: flex; align-items: flex-end; gap: 10px; padding: 26px 10px; background: var(--ground); height: 404px; overflow: hidden; }
.ribbon--sea { background: var(--sea); }
.ribbon picture { flex: 1 1 0; min-width: 0; height: var(--h); margin-bottom: var(--b); }
.ribbon picture:nth-child(2) { flex-grow: 1.12; }
.ribbon picture:nth-child(3) { flex-grow: 0.9; }
.ribbon img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 4.5 How it works. D31: numbered circles joined by arrows; they light up once. ---------- */
.center-head { text-align: center; margin-bottom: 3rem; }
.center-head h2 { margin-bottom: 0; }
.steps { display: grid; grid-template-columns: 1fr 96px 1fr 96px 1fr; align-items: start; max-width: 1040px; margin: 0 auto; }
.step { text-align: center; padding: 0 0.5rem; }
.step h3 { margin: 1.3rem 0 0.4rem; font-size: 1.12rem; color: var(--deep); }
.step p { margin: 0 auto; color: var(--muted); max-width: 17rem; }
.step__num { width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font: 400 1.7rem/1 var(--display); color: var(--deep); background: #fff; border: 2px solid var(--deep); transition: background-color 0.5s, color 0.5s, border-color 0.5s, box-shadow 0.6s; transition-delay: calc(0.35s + var(--i) * 0.5s); }
.step__arrow { height: 56px; display: grid; place-items: center; color: #8aa5a3; transition: color 0.5s; transition-delay: calc(0.6s + var(--i) * 0.5s); }
.step__arrow svg { width: 80px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reveal.is-in .step__num { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 6px rgba(196, 85, 47, 0.16), 0 10px 26px -6px rgba(196, 85, 47, 0.6); }
.reveal.is-in .step__arrow { color: var(--accent); }
.center-act { text-align: center; margin: 2.8rem 0 0; }

/* ---------- 4.5b About us, on pale sea. D33: the photo and the words centred against each
   other. D34: the four points are white tiles with a sea-tone edge and a real shadow. ---------- */
.about { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 4rem; align-items: center; }
.about__photo { height: 560px; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 35%); border-radius: var(--r-photo); box-shadow: 0 30px 60px -28px rgba(14, 58, 61, 0.5), 0 10px 24px -14px rgba(14, 58, 61, 0.3); }
.about__words h2 { margin-bottom: 1.1rem; }
.about__story p { margin: 0 0 0.7rem; color: var(--ink); font-size: 0.99rem; line-height: 1.6; max-width: 36rem; }
.about__story .about__lead { font: 400 1.6rem/1.2 var(--display); color: var(--deep); margin-bottom: 0.6rem; }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 1.3rem 0 1.1rem; }
.ways li { display: grid; grid-template-columns: 34px 1fr; gap: 0.75rem; align-items: start; padding: 0.85rem 0.95rem; background: #fff; border: 1.5px solid #b6ccc9; border-radius: var(--r-card); box-shadow: 0 14px 30px -18px rgba(14, 58, 61, 0.34); }
.ways h3 { font-size: 0.97rem; margin: 0.15rem 0 0.15rem; }
.ways p { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--muted); }
.ways__icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--sea); }
.ways__icon svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.about__where { margin: 0; font-size: 0.86rem; color: var(--muted); }
.reveal .about__photo { opacity: 0; transform: translateX(-44px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: 0.1s; }
.reveal.is-in .about__photo { opacity: 1; transform: none; }
.reveal .ways li { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(0.3s + var(--i) * 0.07s); }
.reveal.is-in .ways li { opacity: 1; transform: none; }

/* ---------- 4.6 FAQ. D34: rows stand off the ground. D35: all closed. ---------- */
.faq-split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4.5rem; align-items: center; }
.faq-intro h2 { margin-bottom: 1rem; }
.faq-intro .muted { max-width: 22rem; }
.faq { display: grid; gap: 12px; align-content: start; }
.faq details { background: #fff; border: 2px solid #8aa6a3; border-radius: var(--r-card); box-shadow: 0 14px 30px -14px rgba(14, 58, 61, 0.4); transition: border-color 0.3s, box-shadow 0.3s; }
.faq details:hover { border-color: #0e3a3d; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.3rem; font-weight: 600; font-size: 1.02rem; color: var(--deep); border-radius: var(--r-card); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pm { position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--sea); }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--accent); transition: transform 0.35s var(--ease); }
.pm::after { transform: rotate(90deg); }
.faq details[open] .pm::after { transform: rotate(0deg); }
.faq__body { padding: 0 1.3rem 1.1rem; color: var(--muted); }
.faq__body p { margin: 0; }
.faq details[open] .faq__body { animation: faq-in 0.4s 0.06s var(--ease) both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- 4.7 Enquire. D33: the words sit level with the enquiry card. ---------- */
.sec--deep { background:
  radial-gradient(60% 80% at 78% 50%, rgba(70, 130, 128, 0.32), rgba(14, 58, 61, 0) 70%),
  var(--deep); }
.enq-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4.5rem; align-items: center; }
.enq-copy h2 { color: var(--ground); font-size: clamp(2.5rem, 4vw, 3.8rem); max-width: 11ch; }
.enq-copy__line { font-size: 1.1rem; color: rgba(233, 239, 238, 0.86); max-width: 24rem; }
.enq-copy__ticks { display: grid; gap: 0.8rem; margin-top: 1.8rem; }
.enq-copy__ticks li { display: flex; align-items: center; gap: 0.7rem; font-weight: 500; color: var(--ground); }
.enq-copy__ticks svg { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; padding: 3px; flex: none; }
/* The enquiry card (D20: nothing is sent). D28: each box is white with a 1.5px edge of #6f8a89
   (about 3.6:1 on white), a slight inner shadow and an accent focus ring. */
.enq { width: 100%; max-width: 600px; justify-self: end; display: grid; gap: 0.95rem; padding: 1.8rem 1.8rem 1.6rem; background: #fff; color: var(--ink); border: 1.5px solid var(--line); border-radius: 26px; box-shadow: 0 40px 80px -24px rgba(2, 16, 18, 0.62), 0 16px 32px -14px rgba(2, 16, 18, 0.4); }
.enq__title { margin: 0 0 0.2rem; font: 400 1.9rem/1.1 var(--display); color: var(--deep); }
.enq__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.95rem; }
.enq__field { display: grid; gap: 0.35rem; min-width: 0; font-weight: 600; font-size: 0.88rem; color: var(--deep); }
.enq__field input { width: 100%; min-width: 0; height: 48px; padding: 0 0.9em; border: 1.5px solid #6f8a89; border-radius: 13px; background: #fff; color: var(--ink); font: 500 1rem var(--body); box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.07); transition: border-color 0.15s, box-shadow 0.15s; }
.enq__field input::placeholder { color: var(--ink); opacity: 0.45; font-weight: 400; }
.enq__field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(196, 85, 47, 0.24); }
.enq__act { margin-top: 0.3rem; }
.enq__send { padding: 1em 1.9em; font-size: 1rem; }
.enq__send:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }
.enq__note { margin: 0; font-size: 0.9rem; color: var(--muted); }
/* What went wrong, under the button: the accent's own red, strong enough to read on white. */
.enq__note.is-error { color: #a83c19; font-weight: 600; }
/* A box the check found wrong: the accent edge, as on focus. */
.enq__field input[aria-invalid="true"] { border-color: var(--accent); }
/* Mobile: the country picker and the number on one line. The picker is a box like the others
   (D28) showing only the code ("+61") and a small chevron; the real select lies over it,
   unseen, so a tap opens the phone's own list with the countries in full. */
.enq__tel { display: flex; gap: 0.5rem; min-width: 0; }
.enq__tel input { flex: 1 1 auto; padding: 0 0.75em; }
/* The "Other" hint fits a 390 phone whole. The box's own type stays 16px, so an iPhone
   does not zoom in. */
.enq__tel input::placeholder { font-size: 0.9em; }
.enq__cc { position: relative; flex: none; display: flex; align-items: center; gap: 0.35em; height: 48px; padding: 0 0.7em 0 0.8em; border: 1.5px solid #6f8a89; border-radius: 13px; background: #fff; color: var(--ink); font: 500 1rem var(--body); box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.07); transition: border-color 0.15s, box-shadow 0.15s; }
.enq__cc::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 0.1em; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: 0.7; }
.enq__cc-show { min-width: 2.2em; white-space: nowrap; }
.enq__cc select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.enq__cc:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(196, 85, 47, 0.24); }
/* The honeypot: in the form, so a bot finds it, but never on screen. */
.enq__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Turnstile's place. Empty for nearly everyone; if its tick box is ever wider than the card,
   it scrolls inside its own row and the page does not move sideways. */
.enq__check { min-width: 0; max-width: 100%; overflow-x: auto; }
.enq__check:empty, .enq__privacy:empty { display: none; }
.enq__privacy { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--muted); }
.enq__privacy a { color: var(--deep); text-decoration: underline; text-underline-offset: 3px; }
/* Sent: the boxes give way to the thanks, in the card's own title type. */
.enq [hidden] { display: none !important; }
.enq__done { margin: 0; font: 400 1.5rem/1.25 var(--display); color: var(--deep); }
.enq__done:focus { outline: none; }

/* ---------- Footer ---------- */
.foot { background: var(--foot); color: #d6e2e0; padding: 3.6rem 0 2.2rem; }
.foot__in { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; padding-bottom: 2.2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.foot .brand { color: var(--ground); }
.foot__line { margin: 0.9rem 0 0; color: rgba(214, 226, 224, 0.8); }
.foot__links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; font-size: 0.94rem; }
.foot__links a { text-decoration: none; color: #e9efee; text-underline-offset: 6px; }
.foot__links a:hover { text-decoration: underline; }
.foot__small { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 2rem; padding-top: 1.4rem; font-size: 0.82rem; color: rgba(214, 226, 224, 0.62); }
.foot__small p { margin: 0; }

/* ---------- The hero's compass. A small round picture of the photo it leads to,
   a see-through needle over it. site.js keeps them clear of the words. ---------- */
.hero__arrow { position: relative; flex: none; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: #0d3336; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.45), 0 12px 28px -8px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.25); transition: transform 0.35s var(--ease), box-shadow 0.35s; }
.hero__arrow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: brightness(0.86) saturate(1.05); }
.hero__arrow .needle { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.needle__swing { transform-box: view-box; transform-origin: 32px 32px; }
.hero__arrow:hover { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7), 0 16px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.25); }
.hero__arrow:hover .needle__swing, .hero__arrow:focus-visible .needle__swing { animation: needle-swing 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) both; }
@keyframes needle-swing { 35% { transform: rotate(7deg); } 70% { transform: rotate(-2deg); } 100% { transform: rotate(0deg); } }
.hero__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ---------- Why: the pain points, on sand. D34: white tiles stand off the band. ---------- */
.center-head--why { max-width: 980px; margin: 0 auto 2rem; }
.center-head__line { margin: 1rem auto 0; max-width: 36rem; color: var(--muted); font-size: 1.06rem; }
/* The stat: two figures in the display face with an arrow between, the sentence beside, the source under. */
.stat { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 1.4rem auto 0; }
.stat__figs { margin: 0; display: inline-flex; align-items: center; gap: 0.7rem; font: 400 2.9rem/1 var(--display); white-space: nowrap; }
.stat__from { color: var(--deep); opacity: 0.5; }
.stat__to { color: var(--accent); }
.stat__figs svg { width: 34px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stat__text { margin: 0; max-width: 21rem; text-align: left; color: var(--deep); font-size: 0.98rem; line-height: 1.45; }
.stat__src { margin: 0.6rem 0 0; font-size: 0.74rem; letter-spacing: 0.02em; color: var(--muted); }
.stat__src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pains { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.pain { background: #fff; border: 1.5px solid #d8c9b0; border-radius: var(--r-card); padding: 1.35rem 1.2rem 1.3rem; box-shadow: 0 14px 34px -14px rgba(14, 58, 61, 0.26), 0 2px 6px -2px rgba(14, 58, 61, 0.08); }
.pain__icon { width: 44px; height: 44px; margin-bottom: 0.9rem; border-radius: 50%; display: grid; place-items: center; background: #f7efe3; border: 1.5px solid #e3d5bd; }
.pain__icon svg { width: 21px; height: 21px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pain h3 { margin-bottom: 0.4rem; font-size: 1.02rem; }
.pain p { margin: 0; color: var(--muted); font-size: 0.93rem; line-height: 1.52; }
.why-close { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem 1.8rem; margin-top: 2.2rem; }
.why-close__line { margin: 0; text-align: center; font: italic 400 1.8rem/1.2 var(--display); color: var(--deep); }
.reveal .pain { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(0.15s + var(--i) * 0.08s); }
.reveal.is-in .pain { opacity: 1; transform: none; }

/* ---------- The AI chat: a drawn demo that sends nothing (D20). One plain circle (D16). ---------- */
.aichat { position: fixed; z-index: 60; right: 24px; bottom: 24px; }
.aichat [hidden] { display: none !important; }
.aichat__btn { width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 12px 28px -10px rgba(14, 58, 61, 0.6); transition: transform 0.3s var(--ease), background-color 0.3s; }
.aichat__btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.aichat__btn:hover { transform: translateY(-2px); background: #b14a26; }
.aichat__btn:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }
.aichat__greet { position: absolute; right: 64px; bottom: 4px; display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 0; background: #fff; border: 1.5px solid #cfdcda; border-radius: 16px; box-shadow: 0 16px 34px -14px rgba(8, 36, 38, 0.45); animation: ai-in 0.5s var(--ease) both; }
.aichat__greet-open { padding: 0.65rem 0.4rem 0.65rem 0.95rem; border: 0; background: none; color: var(--deep); font: 600 0.88rem/1.3 var(--body); text-align: left; white-space: nowrap; cursor: pointer; }
.aichat__greet-x { width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; background: var(--sea); color: var(--deep); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.aichat__panel { position: absolute; right: 0; bottom: 68px; width: 360px; height: min(620px, calc(100vh - 130px)); display: flex; flex-direction: column; background: #fff; border: 1.5px solid #cfdcda; border-radius: 22px; overflow: hidden; box-shadow: 0 34px 80px -26px rgba(8, 36, 38, 0.55), 0 12px 28px -14px rgba(8, 36, 38, 0.3); animation: ai-in 0.4s var(--ease) both; }
@keyframes ai-in { from { opacity: 0; transform: translateY(12px); } }
.aichat__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--accent); color: #fff; }
.aichat__avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--deep); }
.aichat__avatar svg { width: 28px; height: 28px; }
.aichat__who { flex: 1; min-width: 0; }
.aichat__title { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.2; }
.aichat__sub { margin: 2px 0 0; font-size: 0.78rem; opacity: 0.9; }
.aichat__close { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.aichat__close:focus-visible, .aichat__again:focus-visible, .aichat__greet-open:focus-visible, .aichat__greet-x:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
.aichat__close:focus-visible { outline-color: #fff; }
.aichat__thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 10px; background: var(--ground); }
.msg { max-width: 84%; margin: 0; padding: 0.65rem 0.9rem; border-radius: 16px; font-size: 0.9rem; line-height: 1.45; animation: ai-in 0.35s var(--ease) both; }
.msg--guest { align-self: flex-end; background: var(--deep); color: #fff; border-bottom-right-radius: 6px; }
.msg--bot, .msg--typing { align-self: flex-start; background: #fff; color: var(--ink); border: 1.5px solid #dbe5e3; border-bottom-left-radius: 6px; }
.msg--card { align-self: flex-start; display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line); box-shadow: 0 10px 22px -14px rgba(14, 58, 61, 0.45); }
.msg__cal { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sea); }
.msg__cal svg { width: 19px; height: 19px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.msg__card-text strong { display: block; color: var(--deep); font-size: 0.88rem; }
.msg__card-text span { display: block; color: var(--muted); font-size: 0.82rem; }
.msg--book { flex-wrap: wrap; row-gap: 8px; }
.msg--book .msg__card-text { flex: 1; min-width: 7rem; }
.msg__book { padding: 0.55em 1.1em; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: 600 0.84rem/1 var(--body); cursor: pointer; box-shadow: 0 8px 18px -10px rgba(196, 85, 47, 0.7); }
.msg__book:hover { background: #b14a26; }
.msg__book:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
.msg__book-note { flex-basis: 100%; margin: 0; font-size: 0.78rem; color: var(--muted); }
.msg--typing { display: inline-flex; gap: 4px; padding: 0.85rem 0.95rem; }
.msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: #8aa5a3; animation: ai-dot 1s ease-in-out infinite; }
.msg--typing i:nth-child(2) { animation-delay: 0.15s; }
.msg--typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-dot { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
.aichat__again-row { padding: 0 16px 8px; text-align: right; background: var(--ground); min-height: 8px; }
.aichat__again { padding: 4px 2px; border: 0; background: none; color: var(--accent); font: 600 0.84rem/1.2 var(--body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.aichat__foot { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e3ebe9; background: #fff; }
.aichat__input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1.5px solid #b9cbc8; border-radius: 999px; background: #f4f7f6; color: var(--muted); font: 400 0.9rem var(--body); cursor: not-allowed; }
.aichat__input::placeholder { color: #6f8281; }
.aichat__send { width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; opacity: 0.45; cursor: not-allowed; }
.aichat__send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- D13, D14: reveal once at 88% of the viewport. Nothing pins. ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
/* Cards rise in a short stagger. */
.reveal .tour, .reveal .gets li { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(0.12s + var(--i) * 0.07s); }
.reveal.is-in .tour, .reveal.is-in .gets li { opacity: 1; transform: none; }
/* The collage slides in from the left. */
.reveal .collage { opacity: 0; transform: translateX(-44px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: 0.1s; }
.reveal.is-in .collage { opacity: 1; transform: none; }
/* The ribbon: photos rise one after another; the strip itself does not move. */
.ribbon.reveal { opacity: 1; transform: none; }
.ribbon picture { opacity: 0; transform: translateY(40px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i) * 0.11s); }
.ribbon.is-in picture { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; }
  html { scroll-behavior: auto; }
  .hero__slide--au img, .hero__main > *, .hero__pick { animation: none; transform: none; }
  .hero__slide.is-top { transition: none; }
  .reveal, .reveal .tour, .reveal .gets li, .reveal .collage, .ribbon picture, .reveal .note, .reveal .pain, .reveal .about__photo, .reveal .ways li { opacity: 1; transform: none; }
  .needle__swing, .aichat__panel, .aichat__greet, .msg, .msg--typing i { animation: none !important; }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
  .top { grid-template-columns: 1fr auto; }
  .top__tabs, .top__cta { display: none; }
  .top__phone { display: flex; }
  .hero__copy { padding-bottom: 1.6rem; }
  .hero__pick { position: relative; left: auto; bottom: auto; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px clamp(2.4rem, 7vh, 4rem); display: grid; grid-template-columns: 11.5rem; justify-content: start; justify-items: center; gap: 8px; }
  .hero__arrow { width: 56px; height: 56px; }
  .split--auto { grid-template-columns: minmax(0, 1fr) 300px; }
  .split, .faq-split, .enq-split, .about { gap: 3rem; }
}

/* Below 1000px the tours become one sideways strip, snapping each card to the centre (D7, D11). */
@media (max-width: 999px) {
  .strip__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px calc((100vw - 72vw) / 2) 18px; margin: 0 -32px; overscroll-behavior-x: contain; }
  .strip__track::-webkit-scrollbar { display: none; }
  .strip__card { flex: 0 0 72vw; scroll-snap-align: center; scroll-snap-stop: always; }
  .tour__link { height: auto; aspect-ratio: 3 / 4; }
  .strip__arrows { display: flex; justify-content: center; gap: 12px; margin-top: 0.6rem; }
  .strip__arrow { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--deep); background: #fff; color: var(--deep); display: grid; place-items: center; cursor: pointer; transition: background-color 0.3s, color 0.3s, opacity 0.3s; }
  .strip__arrow svg { width: 20px; height: 20px; }
  .strip__arrow:not([disabled]):hover { background: var(--deep); color: #fff; }
  .strip__arrow[disabled] { opacity: 0.35; cursor: default; }
  .head-row { grid-template-columns: 1fr; }
  .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .pain:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --head-h: 64px; }
  .top { grid-template-columns: 1fr auto; padding: 0 16px; gap: 0.6rem; }
  .top__tabs, .top__cta { display: none; }
  .top__phone { display: flex; }
  .brand__mark { width: 30px; height: 30px; }
  .brand__word { font-size: 1.32rem; }
  .split, .faq-split, .enq-split, .about { grid-template-columns: 1fr; gap: 2.4rem; }
  .about__photo { height: 240px; }
  .phone { width: 240px; height: 500px; padding: 9px; border-radius: 42px; }
  .phone__screen { border-radius: 34px; }
  .phone__notch { top: 10px; width: 76px; height: 22px; margin-left: -38px; }
  .phone__cards { left: 9px; right: 9px; top: 82px; gap: 8px; }
  .note { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 9px 10px; border-radius: 15px; font-size: 0.72rem; }
  .note__icon { width: 28px; height: 28px; }
  .note__icon svg { width: 14px; height: 14px; }
  .note__top strong { font-size: 0.74rem; }
  .split--auto { grid-template-columns: 1fr; }
  .collage { height: 320px; max-width: 520px; width: 100%; }
  .collage__big { width: 74%; height: 100%; }
  .collage__small { width: 46%; bottom: -14px; }
  .services h2 { max-width: none; }
  .enq { justify-self: stretch; max-width: none; }
  .enq-copy h2 { max-width: none; }
  .steps { grid-template-columns: 1fr; gap: 0.4rem; justify-items: center; }
  .step__arrow { height: 54px; }
  .step__arrow svg { width: 54px; transform: rotate(90deg); }
  .ribbon { height: auto; padding: 18px 8px; gap: 8px; }
  .ribbon picture:nth-child(n+4) { display: none; }
  .ribbon picture { height: calc(var(--h) * 0.55); margin-bottom: calc(var(--b) * 0.6); }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .sec { padding: 3.4rem 0; }
  .strip__track { margin: 0 -20px; }
  .hero__copy { padding: 0 20px 1.3rem; }
  .hero h1 { font-size: clamp(2.35rem, 10.6vw, 3.05rem); line-height: 1.04; -webkit-text-stroke: 0.4px currentColor; }
  .hero .lede { font-size: 1.04rem; }
  .hero__actions { margin: 1.6rem 0 1.6rem; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__ticks { gap: 0.5rem 1.1rem; font-size: 0.84rem; }
  .hero__copy { gap: 1.3rem; }
  .hero__slide--au img { object-position: 40% 60%; }
  .hero__slide--ca::after { background: linear-gradient(to top, rgba(5, 30, 32, 0.72) 0%, rgba(5, 30, 32, 0.4) 55%, rgba(5, 30, 32, 0.12) 100%); }
  .hero__pick { padding: 0 20px 2.2rem; gap: 8px; }
  .tour__name { font-size: 1.45rem; }
  .foot__in { flex-direction: column; align-items: flex-start; }
  .foot__small { flex-direction: column; padding-top: 1.6rem; }
  .foot { padding-bottom: 6rem; } /* the last lines end above the chat circle */
  .pains { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr; }
  .enq__row { grid-template-columns: 1fr; }
  .enq { padding: 1.4rem 1.2rem 1.3rem; }
  .stat__text { text-align: center; }
  .pain { padding: 1.3rem 1.2rem; }
  .why-close__line { font-size: 1.55rem; }
  .hero__arrow { width: 48px; height: 48px; }
  .aichat { right: 16px; bottom: 16px; }
  .aichat__greet { right: 0; bottom: 62px; }
  .aichat__greet-open { white-space: nowrap; }
  .aichat__panel { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; height: min(560px, calc(100svh - 80px)); border-radius: 22px; }
  .aichat.is-open .aichat__btn, .aichat.is-open .aichat__greet { display: none; }
}

/* ---------- Sending: the button waits, and does not lift. ---------- */
.enq__send:disabled { opacity: 0.75; cursor: progress; transform: none; }

/* ---------- The not-found page (404.html): one dark teal block, the brand and a way home. ---------- */
.lost { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 3rem 0; text-align: center; }
.lost .brand { color: var(--ground); justify-content: center; margin-bottom: 2.4rem; }
.lost h1 { color: var(--ground); font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.05; margin-bottom: 0.9rem; }
.lost p { color: rgba(233, 239, 238, 0.86); font-size: 1.1rem; }

/* The privacy page (privacy.html): Dwight's words, set plainly on the ground colour. */
.legal__top { padding: 1.4rem 0; background: var(--deep); }
.legal__top .brand { color: var(--ground); }
.legal { padding: 3.5rem 0 4.5rem; }
.legal__body { max-width: 46rem; }
.legal h1 { font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 1.05; margin-bottom: 0.8rem; color: var(--deep); }
.legal__lede { font-size: 1.12rem; color: var(--muted); margin-bottom: 2.2rem; }
.legal h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin: 2.2rem 0 0.7rem; color: var(--deep); }
.legal p, .legal li { line-height: 1.65; }
.legal ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.legal a { color: var(--accent); text-underline-offset: 3px; }
.legal__date { margin-top: 2rem; color: var(--muted); }
.legal__back { margin-top: 2.4rem; font-weight: 600; }

/* The hero's words sit high on a wide screen, closer under the header (Reuben, 21 Oct: "the gap
   between the header and the words is too much"). The compass keeps the bottom left corner. */
@media (min-width: 1101px) {
  .hero { align-items: start; align-content: start; }
  .hero__copy { padding-top: clamp(160px, 23vh, 250px); padding-bottom: 150px; }
}

/* "Tour Operators" in the hero's headline in a bright orange, thicker than the rest, so it stands out (Reuben,
   21 Oct). The bright orange was hard to read on the sky ("maybe make it the dark orange"), so it is a deeper orange with a tight dark shadow, and on a wide screen the photo is shaded behind the words. */
.hero h1 em { color: #e0602c; -webkit-text-stroke: 1.2px currentColor; text-shadow: 0 1px 2px rgba(4, 22, 24, 0.55), 0 3px 18px rgba(4, 22, 24, 0.5); }
@media (max-width: 1100px) { .hero h1 em { -webkit-text-stroke: 1px currentColor; } }
/* On a wide screen the words sit high, over the sky: shade the photo behind them, from the left. */
@media (min-width: 1101px) {
  .hero__shade { background:
    linear-gradient(100deg, rgba(5, 30, 32, 0.62) 0%, rgba(5, 30, 32, 0.42) 34%, rgba(5, 30, 32, 0.08) 62%, rgba(5, 30, 32, 0) 75%),
    linear-gradient(to top, rgba(5, 30, 32, 0.4), rgba(5, 30, 32, 0) 40%); }
}

/* The country picker's little flag (img/flags, from flag-icons, MIT licence beside them). */
.enq__cc-flag { flex: none; width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(14, 58, 61, 0.18); }
.enq__cc-flag[hidden] { display: none; }