/* ============================================================
PEOPLE & PLACES TOURS — style.css
Brand: pap-yellow #FFB81C | pap-charcoal #1A1A1A | pap-grey #F5F5F7
Headers: Archivo Black | Body: Inter
============================================================ */
/* 1. Fonts — Archivo Black (headers) + Inter (body) */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@300;400;500;600;700&display=swap');
/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
/* Brand palette */
--pap-yellow: #FFB81C;
--pap-charcoal: #1A1A1A;
--pap-grey: #F5F5F7;
/* UI v2 complementary palette: extends the brand without replacing it. */
--pap-forest: #123F35;
--pap-forest-deep: #0B2E27;
--pap-terracotta: #C2553D;
--pap-cream: #FFF7E8;
--pap-soft-gold: #F2D27A;
/* Aliases kept for backward compatibility with existing rules */
--yellow: var(--pap-yellow);
--yellow-dark: #D9960A;
/* Brand yellow as text on white fails WCAG AA badly (1.73:1). Use this
deepened amber wherever yellow carries words on a light surface;
--yellow stays the accent/fill colour on dark. 4.69:1 on white. */
--yellow-on-light: #9C6A00;
--yellow-glow: rgba(255,184,28,.15);
--black: var(--pap-charcoal);
--black-2: #111111;
--black-3: #0d0d0d;
--black-card: #1e1e1e;
--border: #2a2a2a;
--border-yellow: rgba(255,184,28,.3);
--white: #FFFFFF;
--gray: var(--pap-grey);
--muted: rgba(255,255,255,.6);
--muted-dark: #666666;
--gray-2: rgba(255,255,255,.55);
--gray-3: rgba(255,255,255,.4);
/* Secondary brand accents — terracotta (badges/hover) */
--terracotta: #C2553D;
--terracotta-dark: #A2422F;
/* Alternate-dark sections — slightly deeper than --pap-charcoal so they
still read as a visually distinct band when next to the main black.
(Variable kept named "forest" for backward compatibility; actual hue is off-black.) */
--forest: #0d0d0d;
--forest-card: #1e1e1e;
/* ── LIGHT SURFACES ──────────────────────────────────────────
The homepage's cream sections carried their palette as loose hex.
Each token below is the exact value already in use, grouped by role
so Phase 2 can retheme the light side without hunting. */
--light-surface: #FBFAF6;
--light-surface-alt: #ece8dc;
--light-surface-mute: #f0f0ee;
--light-border: #ddd6c2;
--light-text: #3f4644;
--light-text-muted: #5b6068;
--light-text-subtle: #6B7280;
/* ── SEMANTIC LAYER ──────────────────────────────────────────
Names describe role, not appearance, so Phase 2 can retheme by
changing these rather than hunting hex values. Every one aliases a
value already in use: adding this layer changed no pixels. */
--color-primary: var(--pap-yellow);
--color-primary-deep: var(--yellow-dark);
--color-on-primary: var(--pap-charcoal);
--color-accent: var(--terracotta);
--color-success: #22c55e;
--color-error: #ef4444;
--color-whatsapp: #25D366;
--color-surface: var(--black-card);
--color-surface-alt: var(--black-2);
--color-border: var(--border);
--color-text-muted: var(--gray-2);
--color-text-subtle: var(--gray-3);
/* Brand yellow as text on a light surface; --color-primary fails AA there. */
/* 2. Typography */
--font-display: 'Archivo Black', sans-serif; /* headers — bold */
--font-body: 'Inter', sans-serif; /* body — clean, modern */
/* ── TYPE SCALE ──────────────────────────────────────────────
49 distinct font sizes collapsed to 16 steps, fitted to what the
site actually uses rather than imposed from a ratio: dense through
the small sizes where labels, captions and meta live, sparse at
display sizes. Every step is in use. Largest single shift was 1.6px.
Fluid display type (clamp) is deliberately untouched — see
docs/design-system.md. */
--text-3xs: 0.625rem; /* 10px */
--text-2xs: 0.6875rem; /* 11px */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.8125rem; /* 13px */
--text-base: 0.875rem; /* 14px */
--text-md: 0.9375rem; /* 15px */
--text-lg: 1rem; /* 16px */
--text-xl: 1.125rem; /* 18px */
--text-2xl: 1.25rem; /* 20px */
--text-3xl: 1.375rem; /* 22px */
--text-4xl: 1.5rem; /* 24px */
--text-5xl: 1.75rem; /* 28px */
--text-6xl: 2rem; /* 32px */
--text-7xl: 2.5rem; /* 40px */
--text-8xl: 3rem; /* 48px */
--text-9xl: 3.5rem; /* 56px */
/* 3. Global border-radius — rounded-2xl = 16px */
--radius-sm: 8px;
--radius-md: 16px; /* global default */
--radius-lg: 24px;
--radius-xl: 40px;
/* Fully-rounded. 50px and 100px were both in use meaning the same thing;
any control on this site is far shorter than either, so they rendered
identically. */
--radius-pill: 100px;
--radius-circle: 50%;
--radius: 16px; /* shorthand alias */
/* ── MOTION ──────────────────────────────────────────────────
Four durations (260/280/300/320ms) were doing one job. Consolidated
to a base step; a 40ms difference on a hover is not perceptible, and
one value is far easier to retune for Phase 2. Easing was the same
curve written two ways. */
--motion-instant: 120ms;
--motion-fast: 200ms;
--motion-base: 300ms;
--motion-slow: 560ms;
--motion-reveal: 620ms;
--ease-out: cubic-bezier(0.16,1,0.3,1);
--ease-standard: cubic-bezier(0.4,0,0.2,1);
/* ── ELEVATION ───────────────────────────────────────────────
35 distinct shadows across 39 declarations, which is to say almost
every one was unique. Grouped by role rather than forced onto one
ladder: dark surfaces need a stronger shadow than the cream
sections, a brand glow is not elevation, and a focus ring is not a
shadow at all. Each step is anchored on the most common existing
geometry so the drift stays small. */
--elevation-1: 0 8px 20px rgba(0,0,0,.20);
--elevation-2: 0 16px 40px rgba(0,0,0,.32);
--elevation-3: 0 24px 56px rgba(0,0,0,.34);
/* Cream sections: forest-tinted and far softer, because a black shadow
on cream reads as dirt. */
--elevation-light-1: 0 12px 30px rgba(18,63,53,.06);
--elevation-light-2: 0 16px 34px rgba(18,63,53,.12);
--elevation-light-3: 0 22px 44px rgba(18,63,53,.17);
/* Brand glows carry the primary colour; they signal interactivity. */
--glow-primary: 0 6px 18px rgba(255,184,28,.32);
--glow-primary-lift: 0 10px 24px rgba(255,184,28,.4);
--glow-primary-soft: 0 8px 20px rgba(255,171,0,.16);
--glow-accent: 0 4px 14px rgba(194,85,61,.32);
/* The primary button pairs a glow with a one-pixel inset highlight.
Kept whole: flattening it would quietly change every CTA. */
--shadow-button: var(--glow-primary), 0 1px 0 rgba(0,0,0,.08) inset;
--shadow-button-lift: var(--glow-primary-lift), 0 1px 0 rgba(0,0,0,.08) inset;
/* Rings are not elevation. */
--ring-focus: 0 0 0 3px var(--yellow-glow);
--ring-error: 0 0 0 3px rgba(239,68,68,.18);
--ring-photo: 0 0 0 6px rgba(18,63,53,.07);
--shadow: 0 20px 60px rgba(0,0,0,.3);
--transition: 0.3s cubic-bezier(0.4,0,0.2,1);
--container: 1200px;
/* ── 8px spacing scale ─────────────────────────────────────── */
/* Base unit: 8px. All layout spacing derives from multiples. */
--sp-1: 0.5rem; /* 8px */
--sp-2: 1rem; /* 16px */
--sp-3: 1.5rem; /* 24px */
--sp-4: 2rem; /* 32px */
--sp-5: 2.5rem; /* 40px */
--sp-6: 3rem; /* 48px */
--sp-7: 3.5rem; /* 56px */
--sp-8: 4rem; /* 64px */
--sp-10: 5rem; /* 80px */
--sp-12: 6rem; /* 96px */
/* Half-steps (4px grid) for fine UI spacing */
--sp-0-5: 0.25rem; /* 4px */
--sp-1-5: 0.75rem; /* 12px */
--sp-2-5: 1.25rem; /* 20px */
--sp-3-5: 1.75rem; /* 28px */
--sp-4-5: 2.25rem; /* 36px */
}
/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* 4. Default background: white | Default text: pap-charcoal */
body {
font-family: var(--font-body);
background: var(--white);
color: var(--pap-charcoal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
/* Lets keyboard and screen-reader users jump the nav, which repeats on all
21 pages. Off-screen until focused, then anchored top-left. */
.skip-link {
position: absolute;
top: -100px;
left: var(--sp-2);
z-index: 10001;
padding: var(--sp-1-5) var(--sp-3);
border-radius: var(--radius-sm);
background: var(--color-primary);
color: var(--black);
font-size: var(--text-base);
font-weight: 700;
transition: top var(--motion-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-2); }
/* A visible, consistent keyboard focus indicator. Components may customize
color/offset, but must not remove this without an equivalent replacement. */
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
h1, h2, h3, h4,
[class*="section-title"],
[class*="-headline"],
[class*="-title"],
.eyebrow,
.font-display { font-style: normal; }
/* ── UTILITIES ───────────────────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-4); }
.section-pad { padding: var(--sp-12) 0; }
.section-title {
font-family: var(--font-display);
font-size: clamp(2.2rem, 5vw, 4rem);
line-height: 1.0;
letter-spacing: 0.02em;
color: var(--white);
}
.section-sub { color: var(--muted); line-height: 1.7; max-width: 560px; }
.section-center { text-align: center; }
.section-center .section-sub { margin: 0 auto; }
.eyebrow {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: var(--sp-1-5);
}
.eyebrow-dark { color: var(--color-primary); }
/* WHITE LIFT — sections that "lift" with rounded top on dark bg */
.white-lift {
background: var(--white);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
color: var(--black);
}
.white-lift .section-title { color: var(--black); }
.white-lift .section-sub { color: var(--light-text-subtle); }
.white-lift .eyebrow { color: var(--color-primary-deep); }
/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-1);
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-base);
letter-spacing: 0.06em;
text-transform: uppercase;
transition: all var(--transition);
white-space: nowrap;
}
.btn-primary {
background: var(--color-primary);
color: var(--color-on-primary);
}
.btn-primary:hover { background: var(--color-primary-deep); transform: translateY(-2px); }
.btn-outline-white {
background: transparent;
color: var(--white);
border: 2px solid rgba(255,255,255,.35);
}
.btn-outline-white:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
.btn-outline-dark {
background: transparent;
color: var(--black);
border: 2px solid var(--black);
}
.btn-outline-dark:hover { background: var(--black); color: var(--white); }
.btn-secondary {
background: var(--color-accent);
color: var(--white);
}
.btn-secondary:hover { background: var(--terracotta-dark); transform: translateY(-2px); }
.v-btn-lg { padding: var(--sp-2) var(--sp-5); font-size: var(--text-md); }
/* ── PAGE TRANSITIONS ────────────────────────────────────────── */
@keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-fade-out { from { opacity: 1; } to { opacity: 0; } }
body.page-leaving {
opacity: 0;
transition: opacity var(--motion-fast) ease;
}
body.page-entering {
animation: page-fade-in var(--motion-base) ease both;
}
@media (prefers-reduced-motion: reduce) {
body.page-leaving, body.page-entering { animation: none; transition: none; }
}
/* ── REVEAL — drift-up (matches Framer Motion spring feel) ───── */
.reveal { opacity: 1; transform: none; }
.reveal-ready .reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity var(--motion-slow) var(--ease-out),
transform var(--motion-slow) var(--ease-out);
}
.reveal-ready .reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: var(--motion-instant); }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }
.reveal-delay-5 { transition-delay: 0.60s; }
.reveal-delay-6 { transition-delay: 0.72s; }
.reveal-delay-7 { transition-delay: 0.84s; }
/* Above-the-fold reveals skip the stagger so they fade in immediately on load */
.reveal.reveal-no-stagger { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
/* !important is deliberate, and it is the only place in this stylesheet that
should need it.
This rule is a guarantee, not a style: a visitor who has asked their
device for less motion must never be left looking at content stuck at
opacity 0. Written as an ordinary rule it lost on source order to any
later decorative rule with equal specificity — `.reveal-ready
.process-connector` at ~1200 did exactly that, so the connectors in the
planning section stayed invisible for reduced-motion visitors until they
happened to scroll past. It was found by the responsive suite only after
an unrelated change shifted load timing, which is to say it survived a
long time by luck.
Marking it !important means the next decorative rule someone adds cannot
silently reintroduce the same bug. */
.reveal-ready .reveal,
.reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ── ASYMMETRIC SECTION SPLIT (60 / 40) ──────────────────────── */
.section-split {
display: grid;
grid-template-columns: 60fr 40fr;
gap: var(--sp-8);
align-items: start;
}
.split-body {
padding-top: var(--sp-1);
font-size: var(--text-xl);
line-height: 1.8;
color: inherit;
}
/* Section descriptive paragraphs — airy Travelmo scale */
.section-sub,
.why-intro,
.process-content p {
font-size: var(--text-xl);
line-height: 1.8;
}
@media (max-width: 768px) {
.section-split { grid-template-columns: 1fr; gap: var(--sp-3); }
.split-body { padding-top: 0; }
}
/* ────────────────────────────────────────────────────────────── */
/* NAV — floating pill */
/* */
/* Note: nav markup is identical across all 20 HTML files */
/* (top-level + every tour-detail page). To update the nav, */
/* either: (a) edit one file's block */
/* and use a small script to propagate, or (b) keep markup */
/* uniform and only change appearance via this file. */
/* ────────────────────────────────────────────────────────────── */
.nav {
position: fixed;
top: 1.25rem;
left: 50%;
/* translateX(-50%) centers horizontally; translateY is animated by JS
for the hide-on-scroll-down / show-on-scroll-up behavior. */
transform: translate3d(-50%, 0, 0);
opacity: 1;
width: auto;
max-width: calc(100% - 2rem);
z-index: 200;
transition: transform 0.28s var(--ease-standard),
opacity var(--motion-fast) ease;
will-change: transform, opacity;
}
.nav.nav--hidden {
transform: translate3d(-50%, -130%, 0);
opacity: 0;
pointer-events: none;
}
.nav-inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sp-3);
padding: 0.45rem 0.65rem 0.45rem 1.2rem;
height: 68px;
/* Frosted-glass capsule — semi-transparent dark + backdrop blur so
content behind the pill blurs through it rather than being blocked. */
background: rgba(10,18,16,0.38);
backdrop-filter: blur(18px) saturate(145%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
border: 1px solid rgba(255,255,255,0.13);
border-radius: var(--radius-pill);
box-shadow:
0 14px 34px rgba(0,0,0,0.18),
0 3px 10px rgba(0,0,0,0.1),
0 1px 0 rgba(255,255,255,0.07) inset;
transition: height var(--motion-base) ease-out, padding var(--motion-base) ease-out, background-color var(--motion-base) ease-out, border-color var(--motion-base) ease-out, box-shadow var(--motion-base) ease-out, backdrop-filter var(--motion-base) ease-out;
}
/* Older browsers (no backdrop-filter): fall back to a slightly more
opaque dark so contrast still holds. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.nav-inner { background: rgba(15,15,15,0.92); }
}
.nav-cta { justify-self: end; }
.nav-logo {
display: flex;
align-items: center;
gap: var(--sp-1-5);
flex-shrink: 0;
padding: 0 0.35rem;
}
.nav-logo img { height: 36px; width: auto; max-width: none; display: block; transition: height var(--motion-base) ease-out, transform var(--motion-base) ease-out; }
.nav-logo-text { display: flex; flex-direction: column; }
.logo-main {
font-family: var(--font-display);
font-size: var(--text-2xl);
color: var(--color-primary);
letter-spacing: 0.05em;
line-height: 1;
}
.logo-sub {
font-size: var(--text-3xs);
color: rgba(255,255,255,.45);
letter-spacing: 0.2em;
text-transform: uppercase;
margin-top: 1px;
}
.nav-links {
--nav-active-x: 0px;
--nav-active-width: 0px;
--nav-active-height: 0px;
--nav-active-y: 0px;
position: relative;
display: flex;
align-items: center;
gap: 0.15rem;
justify-self: center;
}
.nav-links.has-active-indicator::before {
content: '';
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: var(--nav-active-width);
height: var(--nav-active-height);
border-radius: var(--radius-pill);
background: var(--color-primary);
box-shadow: var(--shadow-button);
opacity: 1;
transform: translate3d(var(--nav-active-x), var(--nav-active-y), 0);
transition: transform var(--motion-base) ease-out, width var(--motion-base) ease-out, height var(--motion-base) ease-out, opacity var(--motion-fast) ease-out;
pointer-events: none;
}
.nav-links li { position: relative; z-index: 1; }
.nav-links a {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,.92);
padding: 0.65rem 1.15rem;
border-radius: var(--radius-pill);
transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
white-space: nowrap;
}
.nav-links a:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.nav-links a.active {
background: var(--color-primary);
color: var(--black);
box-shadow: var(--shadow-button);
}
.nav-links a.active:hover { background: var(--color-primary); color: var(--black); }
.nav-links.has-active-indicator a.active,
.nav-links.has-active-indicator a.active:hover { background: transparent; box-shadow: none; }
.nav-cta {
display: flex;
align-items: center;
gap: 0.85rem;
}
.nav-phone {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.12em;
color: rgba(255,255,255,.65);
transition: color var(--transition);
padding-left: 1.15rem;
border-left: 1px solid rgba(255,255,255,0.16);
white-space: nowrap;
}
.nav-phone:hover { color: var(--color-primary); }
.nav .btn-primary,
.nav .nav-cta .btn {
padding: var(--sp-1-5) 1.4rem;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.16em;
box-shadow: var(--shadow-button);
}
.nav .btn-primary:hover,
.nav .nav-cta .btn:hover {
background: #ffc54f;
transform: translateY(-2px);
box-shadow: var(--shadow-button-lift);
}
.nav-toggle {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
border-radius: var(--radius-circle);
background: rgba(255,255,255,0.06);
transition: background var(--transition);
}
.nav-toggle:hover { background: rgba(255,255,255,0.1); }
.nav-toggle span {
display: block;
width: 18px;
height: 2px;
background: var(--white);
border-radius: 2px;
transition: all var(--transition);
}
/* Mobile drawer — its own floating pill that drops below the nav */
.nav-mobile {
display: none;
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
flex-direction: column;
padding: var(--sp-2) var(--sp-2-5) var(--sp-2-5);
gap: var(--sp-0-5);
background: rgba(15,15,15,0.92);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-lg);
box-shadow: var(--elevation-2);
}
.nav-mobile a {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,.85);
padding: 0.85rem var(--sp-2);
border-radius: var(--radius-pill);
transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.nav-mobile a:hover,
.nav-mobile a.active {
background: var(--color-primary);
color: var(--black);
}
.nav-mobile-cta { margin-top: var(--sp-1); align-self: flex-start; }
.nav-mobile.open { display: flex; }
/* ────────────────────────────────────────────────────────────── */
/* HERO — VIDEO */
/* ────────────────────────────────────────────────────────────── */
.v-hero {
position: relative;
height: 100svh;
min-height: 640px;
overflow: hidden;
}
.v-hero-video-wrap,
.v-hero-content { transition: opacity 700ms ease-out, transform 850ms ease-out; }
.v-hero-video-wrap {
position: absolute;
inset: 0;
z-index: 0;
background: var(--pap-charcoal);
}
.v-hero-video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Legibility scrim — keeps the photograph the main visual while guaranteeing
the headline and subheading stay readable over it.
Tuned for a still photograph rather than the darker video this hero used to
carry. Measured against the current image, the previous gradient left 24% of
the headline's area below 3:1 and 12% of the subheading below 4.5:1, which
breaks the one design-system rule that cannot be amended. The scrim is the
sanctioned tool for this ("where text must sit on an image, the treatment is
a legibility scrim") — the alternative, moving text off the subject, is not
available when the subject is a person standing where the text goes.
Deliberately still a gradient, not a flat wash: the top two-thirds of the
photograph stay untouched. Re-measure if the hero image changes. */
.v-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(0,0,0,0.76) 0%, rgba(0,0,0,0.62) 26%, rgba(0,0,0,0.44) 48%, rgba(0,0,0,0.14) 66%, transparent 80%),
linear-gradient(to right, rgba(0,0,0,0.46) 0%, rgba(0,0,0,0.16) 42%, transparent 64%);
}
/* Lower-third placement: sits above the bottom edge, breathing room on all sides */
.v-hero-content {
position: absolute;
inset: auto 0 0 0;
z-index: 10;
color: var(--white);
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--sp-6) 8rem;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
/* Hero entrance — replaces a 70KB CDN animation library that did three fades.
Timings and offsets are carried over from it unchanged; the easing is now
the house curve (--ease-out) rather than the library's own, which is a
marginally different acceleration and one fewer thing to keep in sync.
The .v-hero-entrance class is added by script.js. It is deliberately not on
the markup: without it, the headline, subheading and button render at full
opacity in their final positions. A blocked or failed script therefore costs
the animation, never the content. Anything that starts an element at
opacity 0 in the stylesheet is one script error away from an invisible
homepage. */
@media (prefers-reduced-motion: no-preference) {
@keyframes v-hero-rise {
from { opacity: 0; transform: translateY(var(--hero-rise, 26px)); }
to { opacity: 1; transform: none; }
}
.v-hero-entrance .v-hero-headline,
.v-hero-entrance .v-hero-sub,
.v-hero-entrance .v-hero-cta-link {
animation: v-hero-rise var(--hero-duration, 850ms) var(--ease-out) var(--hero-delay, 200ms) both;
}
.v-hero-entrance .v-hero-sub {
--hero-rise: 18px; --hero-duration: 650ms; --hero-delay: 500ms;
}
.v-hero-entrance .v-hero-cta-link {
--hero-rise: 14px; --hero-duration: 550ms; --hero-delay: 700ms;
}
}
.v-hero-headline {
font-family: var(--font-display);
font-size: clamp(2.4rem, 5vw, 4.4rem);
line-height: 1.02;
letter-spacing: -0.03em;
color: var(--white);
margin: 0 0 var(--sp-3-5);
max-width: 22ch;
text-shadow: 0 1px 28px rgba(0,0,0,0.38);
}
.v-hero-sub {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--text-lg);
line-height: 1.7;
color: rgba(255,255,255,0.78);
max-width: 44ch;
margin: 0 0 2.75rem;
}
.v-hero-cta-link {
display: inline-flex;
align-items: center;
min-height: 44px;
gap: 0.85rem;
font-family: var(--font-body);
font-weight: 500;
font-size: var(--text-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--white);
transition: gap var(--transition), color var(--transition);
}
.v-hero-cta-link:hover {
color: var(--color-primary);
gap: 1.1rem;
}
/* ── HERO SEARCH BAR ─────────────────────────────────────────── */
.hero-search {
width: 100%;
max-width: 800px;
}
.hero-search-inner {
display: flex;
align-items: center;
background: rgba(255,255,255,.13);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border: 1px solid rgba(255,255,255,.22);
border-radius: var(--radius-pill);
padding: 6px 6px 6px 8px;
box-shadow:
0 24px 64px rgba(0,0,0,.45),
0 1px 0 rgba(255,255,255,.12) inset;
gap: 0;
}
.hs-group {
display: flex;
flex: 1;
align-items: center;
min-width: 0;
overflow: hidden;
}
.hs-field {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.85rem var(--sp-2-5);
flex: 1;
min-width: 0;
cursor: text;
}
.hs-field:focus-within { background: rgba(255,255,255,.06); border-radius: var(--radius-pill); }
.hs-icon {
width: 17px;
height: 17px;
color: var(--color-primary);
flex-shrink: 0;
display: flex;
}
.hs-icon svg { width: 100%; height: 100%; }
.hs-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.hs-label {
font-size: var(--text-3xs);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,.45);
white-space: nowrap;
}
.hs-input {
background: none;
border: none;
outline: none;
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 500;
color: var(--white);
width: 100%;
padding: 0;
caret-color: var(--color-primary);
}
.hs-input::placeholder { color: rgba(255,255,255,.45); }
.hs-sep {
width: 1px;
height: 32px;
background: rgba(255,255,255,.18);
flex-shrink: 0;
}
.hs-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0 var(--sp-3-5);
height: 52px;
background: var(--color-primary);
color: var(--pap-charcoal);
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-base);
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
border: none;
flex-shrink: 0;
transition: background var(--motion-fast) ease, transform 0.15s ease, box-shadow var(--motion-fast) ease;
box-shadow: var(--glow-primary);
}
.hs-btn:hover {
background: var(--color-primary-deep);
transform: scale(1.03);
box-shadow: var(--glow-primary-lift);
}
.hs-btn-icon {
width: 15px;
height: 15px;
flex-shrink: 0;
}
/* ────────────────────────────────────────────────────────────── */
/* WHY US */
/* ────────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────── */
/* SECTION IMAGE HEADER (full-bleed bg + gradient overlay) */
/* ────────────────────────────────────────────────────────────── */
.sec-img-head {
position: relative;
min-height: 340px;
display: flex;
align-items: flex-end;
background-color: var(--black);
background-size: cover;
background-position: center;
overflow: hidden;
padding-bottom: var(--sp-7);
}
.sec-img-head-media {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sec-img-head::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
to top,
rgba(5,5,5,0.92) 0%,
rgba(5,5,5,0.55) 45%,
rgba(5,5,5,0.15) 75%,
transparent 100%
);
}
.sec-img-head .container {
position: relative;
z-index: 2;
width: 100%;
}
.sec-img-head .section-title { color: var(--white); }
.sec-img-head .eyebrow { color: var(--color-primary); }
.sec-img-head .section-sub,
.sec-img-head .why-intro,
.sec-img-head .email-sub { color: rgba(255,255,255,0.72); }
.why-section {
background: #fff;
padding: 7rem 0 8rem;
}
.why-editorial {
display: grid;
grid-template-columns: 5fr 7fr;
gap: var(--sp-12);
align-items: flex-start;
}
.why-editorial-head {
position: sticky;
top: 7rem;
}
.why-editorial-head .eyebrow {
color: var(--color-primary-deep);
margin-bottom: var(--sp-2);
}
.why-editorial-title {
font-family: var(--font-display);
font-size: clamp(1.85rem, 3.1vw, 2.6rem);
color: var(--black);
line-height: 1.04;
letter-spacing: -0.025em;
margin-bottom: var(--sp-3);
}
.why-editorial-intro {
color: var(--light-text-subtle);
font-size: var(--text-lg);
line-height: 1.75;
max-width: 380px;
margin-bottom: var(--sp-4-5);
}
/* Guide quote — fills the dead space below the intro */
.why-quote {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--sp-2) 1.1rem;
align-items: start;
margin: 0;
padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-2-5);
background: var(--light-surface);
border-left: 3px solid var(--color-primary);
border-radius: 4px 14px 14px 4px;
max-width: 420px;
}
.why-quote-avatar {
grid-row: span 2;
width: 56px;
height: 56px;
border-radius: var(--radius-circle);
object-fit: cover;
margin-top: 0.15rem;
}
.why-quote-text {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-lg);
line-height: 1.4;
color: var(--black);
letter-spacing: -0.01em;
}
.why-quote-author {
display: flex;
flex-direction: column;
gap: 0.1rem;
font-style: normal;
color: var(--light-text-subtle);
}
.why-quote-author strong {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-sm);
color: var(--black);
letter-spacing: 0.01em;
}
.why-quote-author span {
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8a8678;
}
.why-editorial-list {
list-style: none;
margin: 0;
padding: 0;
}
.why-row {
display: grid;
grid-template-columns: 56px 1fr;
gap: var(--sp-3-5);
padding: 1.85rem 0;
border-top: 1px solid var(--light-surface-alt);
align-items: start;
}
.why-row:last-child { border-bottom: 1px solid var(--light-surface-alt); }
/* Icon chip — gold line icon in a soft tinted square */
.why-row-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: #FEF6E0;
border-radius: var(--radius-md);
color: var(--color-primary-deep);
margin-top: 0.1rem;
}
.why-row-icon svg { width: 22px; height: 22px; }
.why-row-content h3 {
font-family: var(--font-display);
font-size: var(--text-4xl);
color: var(--black);
margin: 0 0 0.55rem;
letter-spacing: -0.015em;
line-height: 1.2;
}
.why-row-content p {
font-size: var(--text-md);
color: var(--light-text-muted);
line-height: 1.7;
max-width: 540px;
margin: 0;
}
/* Feature row — first item gets visual weight as the lead point */
.why-row-feature {
padding: var(--sp-5) 0;
border-top: 2px solid var(--black);
}
.why-row-feature .why-row-icon {
width: 56px;
height: 56px;
background: var(--color-primary);
color: var(--black);
}
.why-row-feature .why-row-icon svg { width: 26px; height: 26px; }
.why-row-feature .why-row-content h3 {
font-size: var(--text-5xl);
margin-bottom: 0.7rem;
}
.why-row-feature .why-row-content p {
font-size: var(--text-lg);
color: #3f4348;
}
@media (max-width: 900px) {
.why-editorial { grid-template-columns: 1fr; gap: var(--sp-6); }
.why-editorial-head { position: static; }
.why-editorial-title { max-width: none; }
.why-quote { max-width: none; }
}
@media (max-width: 600px) {
.why-row { grid-template-columns: 44px 1fr; gap: var(--sp-2-5); padding: var(--sp-3) 0; }
.why-row-icon { width: 44px; height: 44px; }
.why-row-feature { padding: 1.85rem 0; }
.why-row-feature .why-row-icon { width: 44px; height: 44px; }
.why-row-feature .why-row-content h3 { font-size: var(--text-4xl); }
}
/* ────────────────────────────────────────────────────────────── */
/* SECTION RHYTHM & TRANSITIONS */
/* ────────────────────────────────────────────────────────────── */
/* Consistent padding for process section (matches 7/8rem of other white sections) */
.process-section {
padding-top: 7rem !important;
padding-bottom: 8rem !important;
}
/* Tours → Why Us: both white — thin rule prevents the sections merging visually */
.why-section {
border-top: 1px solid var(--light-surface-mute);
}
/* ── Booking card instalment block (tour pages) ── */
.booking-instalment {
margin: 0.9rem 0 var(--sp-2-5);
padding: 0.85rem var(--sp-2);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-md);
}
.instalment-row {
display: flex;
align-items: center;
gap: var(--sp-1);
margin-bottom: 0.6rem;
}
.instalment-cell {
flex: 1;
text-align: center;
}
.instalment-cell-label {
display: block;
font-size: var(--text-3xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin-bottom: 0.15rem;
}
.instalment-cell-value {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-lg);
color: var(--color-primary, var(--pap-yellow));
line-height: 1.2;
}
.instalment-arrow {
color: rgba(255,255,255,0.2);
font-size: var(--text-sm);
flex-shrink: 0;
}
.payment-methods-mini {
font-size: var(--text-3xs);
color: rgba(255,255,255,0.3);
text-align: center;
letter-spacing: 0.04em;
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: var(--sp-1);
margin-top: 0;
}
/* Stats bar: slightly more air and a faint lift shadow */
.stats-bar {
padding: var(--sp-8) 0;
box-shadow: var(--elevation-light-1);
}
/* Process → Testimonials: white-to-dark — yellow accent line marks the boundary */
.testimonials-section {
border-top: 3px solid var(--color-primary);
}
/* Testimonials → Email: both dark — no border needed, same bg flows naturally */
/* ────────────────────────────────────────────────────────────── */
/* SECTION LAYERING */
/* ────────────────────────────────────────────────────────────── */
.why-section,
.process-section {
position: relative;
overflow: hidden;
}
.why-section > .container,
.process-section > .container {
position: relative;
z-index: 1;
}
/* ────────────────────────────────────────────────────────────── */
/* STATS BAR */
/* ────────────────────────────────────────────────────────────── */
.stats-bar {
background: var(--color-primary);
padding: var(--sp-6) 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
text-align: center;
}
.stat-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-0-5); }
.stat-figure { display: flex; align-items: baseline; gap: 0.05em; }
.stat-num {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
color: var(--black);
line-height: 1;
}
.stat-suffix {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.5rem);
color: var(--black);
line-height: 1;
}
.stat-label {
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(10,10,10,.65);
margin-top: var(--sp-0-5);
}
/* ────────────────────────────────────────────────────────────── */
/* PROCESS */
/* ────────────────────────────────────────────────────────────── */
.process-section {
background: #fff;
}
.process-title {
color: var(--black);
font-size: clamp(2.2rem, 4.4vw, 3.4rem);
letter-spacing: -0.025em;
line-height: 1.02;
max-width: 14ch;
}
.process-heading { margin-bottom: var(--sp-10); }
.process-sub { color: #5f646b; margin: 0; max-width: 440px; line-height: 1.75; }
.process-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-7);
margin-top: 0;
}
.process-step {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.15rem;
min-height: 250px;
padding: var(--sp-4) 0 0;
border-top: 1px solid #ded9ca;
transition: transform var(--home-motion-duration) var(--home-motion-ease), border-color var(--home-motion-duration) ease-out;
}
.reveal-ready .process-step.visible:hover,
.reveal-ready .process-step.visible:focus-within {
transform: translateY(-3px);
border-color: rgba(222,156,0,0.7);
transition-delay: 0s;
}
.process-connector {
position: absolute;
z-index: 2;
top: -1px;
left: 100%;
width: 3.5rem;
height: 1px;
background: linear-gradient(90deg, rgba(222,156,0,0.7), rgba(222,156,0,0.18));
transform-origin: left center;
pointer-events: none;
}
.reveal-ready .process-connector {
opacity: 0;
transform: scaleX(0);
transition: opacity 0.5s ease-out, transform 0.65s var(--ease-out);
}
.reveal-ready .process-connector.visible { opacity: 1; transform: scaleX(1); }
.process-step-num {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-2xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-primary-deep);
margin: 0;
transition: color 0.35s ease-out, letter-spacing 0.35s ease-out;
}
.process-step:hover .process-step-num { color: var(--black); letter-spacing: 0.25em; }
.process-step-num::before { content: 'Step '; }
.process-content h3 {
font-family: var(--font-display);
font-size: var(--text-3xl);
color: var(--black);
margin-bottom: 0.6rem;
letter-spacing: -0.015em;
line-height: 1.2;
}
.process-content p { font-size: var(--text-md); color: var(--light-text-muted); line-height: 1.72; }
.process-step-link {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--black);
text-decoration: none;
border-bottom: 1px solid var(--color-primary);
padding-bottom: var(--sp-0-5);
transition: color var(--transition), border-color var(--transition);
}
.process-step-link:hover { color: var(--color-primary-deep); border-color: var(--color-primary-deep); }
/* ────────────────────────────────────────────────────────────── */
/* TESTIMONIALS */
/* ────────────────────────────────────────────────────────────── */
.testimonials-section {
background: var(--forest);
position: relative;
overflow: hidden;
}
.testimonials-section > .sec-img-head,
.testimonials-section > .container {
position: relative;
z-index: 1;
}
.testimonials-section .sec-img-head { background-color: var(--forest); }
.testimonials-section .sec-img-head { min-height: clamp(440px, 48vw, 620px); }
.testimonials-section .sec-img-head .section-split { align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.testimonials-section .sec-img-head .section-title { font-size: clamp(3rem, 5.2vw, 5rem); line-height: 0.98; }
/* Scoped to this section only — .sec-img-head is shared with other pages.
The shared scrim is transparent where this section's intro paragraph sits,
which put light grey type straight over faces and a white bag. */
.testimonials-section .sec-img-head::before {
background: linear-gradient(
to top,
rgba(5,5,5,0.94) 0%,
rgba(5,5,5,0.82) 40%,
rgba(5,5,5,0.62) 70%,
rgba(5,5,5,0.42) 100%
);
}
.testimonials-section .sec-img-head .split-body { color: rgba(255,255,255,0.82); }
.testimonials-body { padding-top: clamp(4.5rem, 7vw, 6.5rem); padding-bottom: clamp(6rem, 9vw, 9rem); }
.testimonials-wrap { margin-top: clamp(3.5rem, 6vw, 5rem); }
/* Three reviews, three columns — a 2-up grid orphaned the third card beside
a column of dead space. Below 900px this becomes a real swipe rail; the
dots only exist there, where they have something to control. */
.testimonials-track {
display: grid;
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 2.5rem) / 3);
gap: var(--sp-2-5);
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scrollbar-width: none;
cursor: grab;
touch-action: pan-y;
}
.testimonials-track::-webkit-scrollbar { display: none; }
.testimonials-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.testimonials-track.is-auto-scrolling { scroll-snap-type: none; }
.testimonial-slide { display: flex; scroll-snap-align: start; }
.testimonial-card {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-sm);
padding: var(--sp-4) var(--sp-3-5);
min-height: 370px;
transition: transform var(--home-motion-duration) var(--home-motion-ease), box-shadow var(--home-motion-duration) ease-out, border-color var(--home-motion-duration) ease-out, background var(--home-motion-duration) ease-out;
}
.testimonial-card:hover {
transform: translateY(-4px);
border-color: rgba(255,184,28,0.38);
background: rgba(255,255,255,0.04);
box-shadow: var(--elevation-3);
}
.testimonial-card-feature {
background: rgba(255,184,28,0.04);
border-color: rgba(255,184,28,0.18);
}
.testi-stars {
display: inline-flex;
align-items: center;
gap: 0.18rem;
color: var(--color-primary);
margin-bottom: var(--sp-2-5);
}
.testi-stars svg { width: 14px; height: 14px; }
.testi-quote {
position: relative;
flex: 1;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-family: var(--font-body);
font-size: clamp(1.02rem, 1.15vw, 1.12rem);
font-weight: 400;
color: rgba(255,255,255,.92);
line-height: 1.65;
font-style: normal;
margin: 0 0 var(--sp-3);
letter-spacing: 0;
}
.testi-quote.is-expanded { display: block; overflow: visible; }
/* One set of quote marks only — this replaces the oversized decorative glyph
that used to sit clipped in the card's top-right corner. */
.testi-quote::before { content: '“'; margin-right: 0.05em; color: var(--color-primary); }
.testi-quote::after { content: '”'; margin-left: 0.05em; color: var(--color-primary); }
.testi-author {
display: flex;
align-items: center;
gap: 0.9rem;
padding-top: var(--sp-2-5);
border-top: 1px solid rgba(255,255,255,0.06);
}
.testi-author img {
width: 42px;
height: 42px;
border-radius: var(--radius-circle);
object-fit: cover;
border: 1px solid rgba(255,255,255,0.12);
}
.testi-author-fallback {
display: inline-flex;
width: 42px;
height: 42px;
flex: 0 0 42px;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,184,28,0.28);
border-radius: var(--radius-circle);
background: rgba(255,184,28,0.08);
color: var(--color-primary);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.04em;
}
.testi-read-more {
align-self: flex-start;
margin: -0.65rem 0 var(--sp-2-5);
display: inline-flex;
min-height: 44px;
align-items: center;
padding: 0.65rem 0;
border-bottom: 1px solid rgba(255,184,28,0.5);
color: var(--color-primary);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.04em;
}
.testi-read-more:hover,
.testi-read-more:focus-visible { border-bottom-color: var(--color-primary); color: var(--white); }
.testi-author div { display: flex; flex-direction: column; gap: 0.1rem; }
.testi-author strong {
font-size: var(--text-sm);
font-weight: 600;
color: var(--white);
letter-spacing: 0.01em;
}
.testi-author span {
font-size: var(--text-xs);
color: rgba(255,255,255,0.45);
letter-spacing: 0.04em;
}
/* Hidden at grid widths where every review is already on screen. */
.testimonials-dots {
display: flex;
justify-content: center;
gap: var(--sp-1);
margin-top: var(--sp-3);
}
.testimonials-dot {
width: 44px;
height: 44px;
position: relative;
border-radius: var(--radius-circle);
background: transparent;
}
.testimonials-dot::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
border-radius: var(--radius-circle);
background: rgba(255,255,255,.18);
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
transition: background var(--transition), transform var(--transition);
}
.testimonials-dot.active::after {
background: var(--color-primary);
transform: translate(-50%, -50%) scale(1.5);
}
@media (max-width: 900px) {
.testimonials-track {
/* Fixed, not minmax(0, …) — a zero min lets the tracks shrink to fit the
scrollport instead of overflowing it, and the rail never scrolls. */
grid-auto-columns: 76%;
-webkit-overflow-scrolling: touch;
}
.testimonials-track::-webkit-scrollbar { display: none; }
.testimonial-slide { scroll-snap-align: start; }
.testimonials-dots { display: flex; }
}
@media (max-width: 600px) {
.testimonials-track { grid-auto-columns: 90%; }
.testimonial-card { min-height: 350px; }
}
/* ────────────────────────────────────────────────────────────── */
/* NEWSLETTER */
/* ────────────────────────────────────────────────────────────── */
.newsletter-section {
background: var(--light-surface);
border-top: 1px solid var(--light-surface-alt);
border-bottom: 1px solid var(--light-surface-alt);
padding: var(--sp-10) 0;
}
.newsletter-inner {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--sp-6);
max-width: 980px;
margin: 0 auto;
}
.newsletter-text { max-width: 480px; }
.newsletter-text .eyebrow { margin-bottom: 0.6rem; }
.newsletter-title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
color: var(--black);
line-height: 1.15;
letter-spacing: -0.015em;
margin-bottom: 0.6rem;
}
.newsletter-sub {
color: var(--light-text-subtle);
font-size: var(--text-md);
line-height: 1.65;
margin: 0;
}
.newsletter-form {
display: flex;
align-items: center;
background: var(--white);
border: 1px solid var(--light-border);
border-radius: var(--radius-pill);
padding: 0.35rem 0.35rem 0.35rem var(--sp-2-5);
min-width: 360px;
transition: border-color var(--transition), box-shadow var(--transition);
}
.newsletter-form:focus-within {
border-color: var(--black);
box-shadow: var(--elevation-light-1);
}
.newsletter-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--black);
padding: 0.65rem 0;
}
.newsletter-input::placeholder { color: #a8a496; }
.newsletter-submit {
flex-shrink: 0;
background: var(--black);
color: var(--white);
border: none;
border-radius: var(--radius-pill);
padding: 0.7rem var(--sp-3);
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: background var(--transition);
}
.newsletter-submit:hover { background: var(--color-primary-deep); color: var(--black); }
@media (max-width: 768px) {
.newsletter-inner { grid-template-columns: 1fr; gap: var(--sp-3-5); }
.newsletter-form { min-width: 0; width: 100%; }
}
@media (max-width: 480px) {
.newsletter-form {
flex-direction: column;
background: transparent;
border: none;
padding: 0;
gap: 0.6rem;
}
.newsletter-input {
background: var(--white);
border: 1px solid var(--light-border);
border-radius: var(--radius-md);
padding: 0.85rem 1.1rem;
width: 100%;
}
.newsletter-submit { width: 100%; border-radius: var(--radius-md); padding: 0.95rem; }
}
/* ────────────────────────────────────────────────────────────── */
/* FOOTER */
/* ────────────────────────────────────────────────────────────── */
.footer {
background: #050505;
padding: var(--sp-8) 0 0;
border-top: 1px solid var(--color-border);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr 1fr;
gap: var(--sp-6);
padding-bottom: var(--sp-6);
}
.footer-brand p {
color: var(--color-text-muted);
font-size: var(--text-base);
line-height: 1.7;
margin-top: var(--sp-2);
max-width: 260px;
}
.footer-logo-link { display: inline-block; }
.footer-logo-link img { height: 44px; width: auto; }
.footer-social {
display: flex;
gap: var(--sp-1-5);
margin-top: var(--sp-2-5);
}
.footer-social a {
width: 36px;
height: 36px;
border-radius: var(--radius-circle);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.5);
transition: transform var(--motion-base) ease-out, background-color var(--motion-base) ease-out, border-color var(--motion-base) ease-out, color var(--motion-base) ease-out, box-shadow var(--motion-base) ease-out;
}
.footer-social a svg { width: 16px; height: 16px; }
.footer-social a:hover,
.footer-social a:focus-visible {
transform: translateY(-2px);
border-color: rgba(255,171,0,0.72);
background: rgba(255,171,0,0.08);
color: var(--color-primary);
box-shadow: var(--elevation-1);
}
.footer-col h2,
.footer-col h4 {
font-size: var(--text-2xs);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: var(--sp-2-5);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-1-5); }
.footer-col a {
font-size: var(--text-base);
color: var(--color-text-muted);
transition: color var(--motion-base) ease-out, transform var(--motion-base) ease-out;
}
.footer-col a:hover,
.footer-col a:focus-visible { color: var(--white); transform: translateX(2px); }
.footer-col li { font-size: var(--text-base); color: rgba(255,255,255,.35); }
.footer-bottom {
border-top: 1px solid var(--color-border);
padding: var(--sp-3) 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--text-sm);
color: var(--color-text-muted);
flex-wrap: wrap;
gap: var(--sp-1);
}
.footer-col h2 {
font-size: var(--text-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: var(--sp-2);
}
/* ────────────────────────────────────────────────────────────── */
/* ABOUT PAGE */
/* ────────────────────────────────────────────────────────────── */
.page-hero {
background: var(--black);
padding: var(--sp-10) var(--sp-4) var(--sp-8);
text-align: center;
}
.page-hero .eyebrow { margin-bottom: var(--sp-2); }
.page-hero h1 {
font-family: var(--font-display);
font-size: clamp(3rem, 7vw, 6rem);
color: var(--white);
line-height: 1;
margin-bottom: var(--sp-2);
}
.page-hero p { color: var(--muted); max-width: 520px; margin: 0 auto; font-size: var(--text-lg); line-height: 1.7; }
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-8);
align-items: center;
}
.about-grid img { border-radius: var(--radius-lg); width: 100%; }
.about-text h2 {
font-family: var(--font-display);
font-size: var(--text-7xl);
color: var(--black);
margin-bottom: var(--sp-2);
line-height: 1.05;
}
.about-text p { color: #555; line-height: 1.8; margin-bottom: var(--sp-2); font-size: var(--text-md); }
.why-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-3);
margin-top: var(--sp-5);
}
.why-card-2 {
background: var(--gray);
border-radius: var(--radius-md);
padding: var(--sp-3-5);
}
.why-card-2 .icon { font-size: var(--text-5xl); margin-bottom: var(--sp-1-5); }
.why-card-2 h3 { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--black); margin-bottom: var(--sp-1); }
.why-card-2 p { font-size: var(--text-base); color: #666; line-height: 1.7; }
.stats-grid-about {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-3);
text-align: center;
}
.stat-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--sp-4) var(--sp-2);
}
.stat-card .num {
font-family: var(--font-display);
font-size: var(--text-8xl);
color: var(--color-primary);
line-height: 1;
}
.stat-card .lbl { font-size: var(--text-xs); color: var(--muted); margin-top: var(--sp-0-5); letter-spacing: 0.1em; text-transform: uppercase; }
/* ────────────────────────────────────────────────────────────── */
/* PACKAGES PAGE */
/* ────────────────────────────────────────────────────────────── */
.packages-list { display: flex; flex-direction: column; gap: 0; }
.pkg-item {
display: grid;
grid-template-columns: 1fr;
border-bottom: 1px solid #eee;
padding: var(--sp-6) 0;
}
.pkg-item-img {
width: 100%;
aspect-ratio: 16/7;
object-fit: cover;
border-radius: var(--radius-lg);
margin-bottom: var(--sp-3);
}
.pkg-item-img-wrap { position: relative; margin-bottom: var(--sp-3); }
.pkg-item-img-wrap img { width: 100%; aspect-ratio: 16/7; object-fit: cover; border-radius: var(--radius-lg); }
.pkg-tags { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-1-5); }
.pkg-tag {
font-size: var(--text-2xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-primary-deep);
background: rgba(255,171,0,.1);
border: 1px solid rgba(255,171,0,.25);
padding: var(--sp-0-5) var(--sp-1-5);
border-radius: var(--radius-pill);
}
.pkg-title {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.2rem);
color: var(--black);
line-height: 1.0;
margin-bottom: 0.6rem;
}
.pkg-desc { color: #555; font-size: var(--text-md); line-height: 1.7; margin-bottom: var(--sp-2-5); max-width: 700px; }
.pkg-footer { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pkg-price { font-size: var(--text-base); color: #888; }
.pkg-price strong { font-size: var(--text-3xl); color: var(--black); font-weight: 700; }
/* ────────────────────────────────────────────────────────────── */
/* CONTACT PAGE */
/* ────────────────────────────────────────────────────────────── */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--sp-8);
align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: var(--sp-3); }
.contact-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--sp-3);
display: flex;
gap: var(--sp-2);
align-items: flex-start;
}
.contact-icon { font-size: var(--text-4xl); flex-shrink: 0; }
.contact-card h4 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--white); margin-bottom: var(--sp-0-5); }
.contact-card p, .contact-card a { font-size: var(--text-base); color: var(--muted); line-height: 1.6; }
.contact-card a:hover { color: var(--color-primary); }
.contact-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-honeypot {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
.form-privacy-note {
margin: 0;
color: var(--color-text-subtle);
font-size: var(--text-sm);
line-height: 1.6;
}
.form-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.form-error { color: var(--color-error); font-size: var(--text-sm); margin-bottom: 0; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.form-input, .form-select, .form-textarea {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--white);
font-family: var(--font-body);
font-size: var(--text-base);
padding: 0.85rem 1.1rem;
outline: none;
transition: border-color var(--transition);
width: 100%;
}
.form-input::placeholder, .form-textarea::placeholder { color: rgba(255,255,255,.25); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-primary); }
.form-select { appearance: none; cursor: pointer; }
.form-select option { background: var(--black); color: var(--white); }
.form-textarea { resize: vertical; min-height: 130px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.whatsapp-cta {
background: var(--color-whatsapp);
color: var(--white);
border-radius: var(--radius-md);
padding: var(--sp-2-5) var(--sp-3);
display: flex;
align-items: center;
gap: var(--sp-2);
margin-top: var(--sp-2);
transition: opacity var(--transition);
}
.whatsapp-cta:hover { opacity: 0.9; }
.whatsapp-cta span { font-weight: 600; font-size: var(--text-base); }
/* ────────────────────────────────────────────────────────────── */
/* TRIP DETAIL PAGES (shared) */
/* ────────────────────────────────────────────────────────────── */
.trip-hero-page {
background: var(--black);
padding: var(--sp-8) var(--sp-4) var(--sp-6);
}
.trip-hero-page .back-link {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
color: rgba(255,255,255,.5);
font-size: var(--text-sm);
margin-bottom: var(--sp-4);
transition: color var(--transition);
}
.trip-hero-page .back-link:hover { color: var(--color-primary); }
.trip-hero-page h1 {
font-family: var(--font-display);
font-size: clamp(2.5rem, 6vw, 5rem);
color: var(--white);
line-height: 1;
margin-bottom: var(--sp-2);
}
.trip-hero-img {
width: 100%;
height: 440px;
object-fit: cover;
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
display: block;
}
.trip-content-wrap {
max-width: var(--container);
margin: 0 auto;
padding: var(--sp-8) var(--sp-4);
display: grid;
grid-template-columns: 1fr 320px;
gap: var(--sp-8);
align-items: start;
}
.trip-content-wrap .section-label {
font-size: var(--text-2xs);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-primary-deep);
margin-bottom: var(--sp-1-5);
}
.trip-content-left h2 {
font-family: var(--font-display);
font-size: var(--text-6xl);
color: var(--black);
margin-bottom: var(--sp-2);
}
.trip-content-left p { color: #555; line-height: 1.8; margin-bottom: var(--sp-3); font-size: var(--text-md); }
.booking-sidebar { position: sticky; top: 88px; }
.booking-box {
background: var(--black);
border-radius: var(--radius-lg);
padding: var(--sp-4);
color: var(--white);
margin-bottom: var(--sp-3);
}
.booking-box .price-lbl { font-size: var(--text-xs); letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.booking-box .price-big {
font-family: var(--font-display);
font-size: var(--text-9xl);
color: var(--color-primary);
line-height: 1;
margin-bottom: var(--sp-0-5);
}
.booking-box .price-note { font-size: var(--text-xs); color: var(--color-text-subtle); margin-bottom: var(--sp-3); }
.booking-box .deposit-box {
background: rgba(255,171,0,.1);
border: 1px solid rgba(255,171,0,.2);
border-radius: var(--radius-sm);
padding: var(--sp-2);
margin-bottom: var(--sp-3);
font-size: var(--text-sm);
color: rgba(255,255,255,.65);
line-height: 1.6;
}
.booking-box .deposit-box strong { color: var(--color-primary); }
.booking-btns-stack { display: flex; flex-direction: column; gap: var(--sp-1-5); }
.booking-btns-stack a { text-align: center; }
.details-box {
background: var(--gray);
border-radius: var(--radius-lg);
padding: var(--sp-3);
}
.details-box h4 { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--black); margin-bottom: var(--sp-2); }
.details-row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid #e8e8e0; font-size: var(--text-sm); }
.details-row:last-child { border-bottom: none; }
.details-row span:first-child { color: #888; }
.details-row span:last-child { font-weight: 600; color: var(--black); }
.inc-exc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: var(--sp-5) 0; }
.inc-exc-grid h3 { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--black); margin-bottom: var(--sp-2); }
.check-list, .x-list { list-style: none; }
.check-list li, .x-list li {
padding: var(--sp-1) 0;
font-size: var(--text-base);
color: #555;
display: flex;
align-items: flex-start;
gap: var(--sp-1-5);
border-bottom: 1px solid #f0f0f0;
}
.check-list li::before { content: '✓'; color: var(--color-primary); font-weight: 700; flex-shrink: 0; }
.x-list li::before { content: '✗'; color: #ccc; font-weight: 700; flex-shrink: 0; }
.fun-facts-box {
background: var(--gray);
border-radius: var(--radius-md);
padding: var(--sp-3-5);
margin: var(--sp-4) 0;
}
.fun-facts-box h3 { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--black); margin-bottom: var(--sp-2); }
.fun-facts-box ol { padding-left: var(--sp-2-5); }
.fun-facts-box li { color: #555; font-size: var(--text-base); line-height: 1.8; margin-bottom: var(--sp-1); }
.accordion { margin: var(--sp-4) 0; }
.acc-item { border-bottom: 1px solid #eee; }
.acc-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem 0;
cursor: pointer;
font-weight: 600;
font-size: var(--text-md);
color: var(--black);
transition: color var(--transition);
}
.acc-header:hover { color: var(--color-primary-deep); }
.acc-arrow { color: #bbb; font-size: var(--text-base); transition: transform var(--transition); flex-shrink: 0; }
.acc-body { display: none; padding-bottom: var(--sp-2-5); font-size: var(--text-base); color: #666; line-height: 1.8; }
.acc-item.open .acc-arrow { transform: rotate(180deg); }
.acc-item.open .acc-body { display: block; }
.testi-section-light { background: var(--gray); border-radius: var(--radius-lg); padding: var(--sp-4); margin: var(--sp-5) 0; }
.testi-light { padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid #e0e0d8; }
.testi-light:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.testi-light p { color: #444; font-size: var(--text-md); line-height: 1.8; font-style: italic; margin-bottom: var(--sp-1); }
.testi-light strong { font-size: var(--text-sm); color: var(--black); font-style: normal; }
.also-section {
background: var(--forest);
padding: var(--sp-8) var(--sp-4);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.also-section h2 { font-family: var(--font-display); font-size: var(--text-7xl); color: var(--white); text-align: center; margin-bottom: var(--sp-4); }
.also-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); max-width: var(--container); margin: 0 auto; }
.also-card {
background: var(--forest-card);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-md);
overflow: hidden;
text-decoration: none;
transition: all var(--transition);
display: block;
}
.also-card:hover { border-color: var(--color-primary); transform: translateY(-4px); }
.also-card-img { height: 170px; background: linear-gradient(135deg,#1a3a2a,#2d5a3d); display: flex; align-items: center; justify-content: center; }
.also-card-img span { font-family: var(--font-display); font-size: var(--text-8xl); color: rgba(255,171,0,.2); }
.also-card-body { padding: var(--sp-2-5); }
.also-card-body h3 { font-family: var(--font-display); font-size: var(--text-xl); color: var(--white); margin: var(--sp-1) 0 var(--sp-0-5); }
.also-price { color: var(--color-primary); font-size: var(--text-sm); font-weight: 600; }
/* ────────────────────────────────────────────────────────────── */
/* RESPONSIVE */
/* ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.why-grid { grid-template-columns: repeat(2, 1fr); }
.why-grid:has(> .why-item) { grid-template-columns: repeat(2, 1fr) !important; }
.why-section { padding-bottom: var(--sp-10); }
.why-section .sec-img-head { padding: var(--sp-10) 0 var(--sp-6); }
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.section-pad { padding: var(--sp-8) 0; }
.process-section { padding-top: 4.5rem !important; padding-bottom: var(--sp-10) !important; }
.nav { top: 0.85rem; max-width: calc(100% - 1.5rem); }
.nav-inner { padding: 0.35rem var(--sp-1) 0.35rem 0.85rem; height: 56px; grid-template-columns: auto 1fr auto; gap: var(--sp-1); }
.nav-logo img { height: 32px; }
.nav-links { display: none; }
.nav-phone { display: none; }
.nav .nav-cta .btn-primary { display: none; }
.nav-toggle { display: flex; }
.hero-search-inner { border-radius: var(--radius-lg); padding: var(--sp-1-5); }
.hs-group { flex-direction: column; gap: 0; }
.hs-sep { width: 100%; height: 1px; margin: 0 var(--sp-2); width: auto; }
.hs-field { padding: 0.65rem var(--sp-2); }
.hs-btn { width: 100%; border-radius: var(--radius-md); margin-top: var(--sp-0-5); }
.v-hero-cta-link { padding: 0.85rem 0; }
/* Breadcrumb links — bigger tap target on touch screens */
.breadcrumb { gap: var(--sp-1-5); }
.breadcrumb a, .breadcrumb-current { padding: 0.65rem var(--sp-0-5); display: inline-block; min-height: 32px; }
/* Tour-page "back to all tours" link — comfortable tap target */
.back-link { padding: 0.6rem 0; min-height: 32px; align-items: center; }
/* Packages tour-card book button + card link */
.tour-card-book-btn { padding: var(--sp-1-5) var(--sp-2-5) !important; min-height: 40px; }
/* Packages "Custom Itinerary" CTA collapses to single column on mobile */
.packages-custom-cta {
grid-template-columns: 1fr !important;
padding: var(--sp-4) var(--sp-3) !important;
gap: var(--sp-3) !important;
}
.packages-custom-cta h3 { font-size: 1.6rem !important; }
.packages-custom-cta .btn-primary { justify-self: start; white-space: normal !important; }
.why-grid { grid-template-columns: 1fr; }
/* Higher-specificity About why-grid (uses :has()) also collapses */
.why-grid:has(> .why-item) { grid-template-columns: 1fr !important; gap: var(--sp-2); }
/* About "Why" outline watermark must not overflow its section */
.why-section-asym { overflow: hidden; }
.why-watermark { font-size: clamp(6rem, 28vw, 12rem) !important; right: -1.5rem !important; }
.why-section { padding-bottom: var(--sp-8); }
.why-section .sec-img-head { padding: var(--sp-8) 0 var(--sp-5); }
.process-heading { margin-bottom: var(--sp-7); }
.process-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
.process-step { min-height: 0; padding: var(--sp-3-5) 0 var(--sp-2-5); }
.process-connector {
top: 100%;
left: 50%;
width: 1px;
height: 2.5rem;
background: linear-gradient(180deg, rgba(222,156,0,0.65), rgba(222,156,0,0.18));
transform-origin: center top;
}
.reveal-ready .process-connector { transform: scaleY(0); }
.reveal-ready .process-connector.visible { transform: scaleY(1); }
/* .testimonials-track is a swipe rail below 900px — see the testimonials
block above. A 1fr override here would collapse it back to a column. */
.about-grid { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.trip-content-wrap { grid-template-columns: 1fr; }
.booking-sidebar { position: static; }
.inc-exc-grid { grid-template-columns: 1fr; }
.also-grid { grid-template-columns: 1fr; }
.stats-grid-about { grid-template-columns: repeat(2,1fr); }
.form-row { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: repeat(2,1fr); }
.why-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.container { padding: 0 var(--sp-2-5); }
.nav-inner { padding: 0 var(--sp-3); }
.nav-mobile { padding-left: var(--sp-3); padding-right: var(--sp-3); }
.v-hero-content { padding: 0 var(--sp-3) 4.5rem; }
.v-hero-headline { font-size: clamp(2rem, 8vw, 2.8rem); max-width: 14ch; margin-bottom: var(--sp-2-5); }
.v-hero-sub { font-size: var(--text-md); max-width: 36ch; margin-bottom: var(--sp-4); }
.v-hero-cta-link { font-size: var(--text-xs); letter-spacing: 0.2em; }
.trips-header { flex-direction: column; }
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; text-align: center; }
.stats-grid { grid-template-columns: repeat(2,1fr); gap: var(--sp-2); }
}
/* ────────────────────────────────────────────────────────────── */
/* SHARED UTILITIES (about / packages / contact pages) */
/* ────────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.section-header { margin-bottom: var(--sp-6); }
.section-subtitle {
color: var(--muted);
line-height: 1.7;
max-width: 560px;
margin-top: var(--sp-1-5);
}
.section-header.text-center .section-subtitle { margin-left: auto; margin-right: auto; }
.divider-bar { height: 1px; background: var(--color-border); }
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-8);
}
.logo-accent {
font-size: var(--text-3xs);
color: rgba(255,255,255,.45);
letter-spacing: 0.2em;
text-transform: uppercase;
margin-top: 1px;
}
.arrow-icon {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
vertical-align: middle;
flex-shrink: 0;
}
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-1);
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-base);
letter-spacing: 0.06em;
text-transform: uppercase;
transition: all var(--transition);
background: transparent;
color: var(--white);
border: 2px solid rgba(255,255,255,.25);
}
.btn-ghost:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); }
/* Active nav link */
.nav-links a.active { background: var(--color-primary); color: var(--black); }
/* ────────────────────────────────────────────────────────────── */
/* PAGE HERO (about / packages / contact) */
/* ────────────────────────────────────────────────────────────── */
.page-hero {
position: relative;
min-height: 480px;
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--black);
/* override the simple padding-only rule from earlier */
padding: 0;
text-align: left;
}
.page-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.25;
}
.page-hero-content {
position: relative;
z-index: 1;
padding-top: 8rem;
padding-bottom: var(--sp-8);
width: 100%;
}
.breadcrumb {
display: flex;
align-items: center;
gap: var(--sp-1);
font-size: var(--text-xs);
color: var(--color-text-subtle);
margin-bottom: var(--sp-3);
}
.breadcrumb a { color: var(--color-text-subtle); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb-sep { opacity: 0.4; }
.breadcrumb-current { color: var(--muted); }
.page-hero-title {
font-family: var(--font-display);
font-size: clamp(3.5rem, 9vw, 7rem);
color: var(--white);
line-height: 0.95;
letter-spacing: 0.02em;
margin-bottom: var(--sp-3);
text-shadow: 0 4px 40px rgba(0,0,0,.4);
}
.page-hero-subtitle {
font-size: var(--text-lg);
color: rgba(255,255,255,.65);
max-width: 520px;
line-height: 1.7;
margin: 0;
}
/* Override old .page-hero h1 specificity for the new hero structure */
.page-hero .page-hero-title {
font-size: clamp(3.5rem, 9vw, 7rem);
line-height: 0.95;
margin-bottom: var(--sp-3);
}
.page-hero .page-hero-subtitle { margin: 0; }
/* Experiences hero: same page-hero composition, with a CMS-replaceable media
layer and the quieter motion language established on the homepage. */
.experiences-hero {
min-height: clamp(540px, 68svh, 680px);
isolation: isolate;
}
.experience-hero-media {
position: absolute;
z-index: 0;
inset: 0;
overflow: hidden;
background: var(--pap-charcoal);
}
.experience-hero-asset {
width: 100%;
height: 100%;
opacity: 1;
object-fit: cover;
object-position: center;
display: block;
animation: experience-hero-zoom 18s ease-out both;
transform-origin: center;
}
.experiences-hero::after {
content: '';
position: absolute;
z-index: 1;
inset: 0;
background:
linear-gradient(to top, rgba(7,18,15,0.88) 0%, rgba(7,18,15,0.48) 52%, rgba(7,18,15,0.24) 100%),
linear-gradient(to right, rgba(7,18,15,0.48) 0%, rgba(7,18,15,0.08) 64%, transparent 100%);
pointer-events: none;
}
.experiences-hero .page-hero-content {
z-index: 2;
padding-top: 9rem;
padding-bottom: 4.5rem;
}
.experiences-hero .breadcrumb {
animation: experience-copy-in 650ms var(--ease-out) 80ms both;
}
.experiences-hero .page-hero-title {
max-width: 12ch;
font-size: clamp(3.4rem, 7.5vw, 6.4rem);
letter-spacing: -0.035em;
animation: experience-copy-in 720ms var(--ease-out) 160ms both;
}
.experiences-hero .page-hero-title span { color: var(--color-primary); }
.experiences-hero .page-hero-subtitle {
max-width: 54ch;
color: rgba(255,255,255,0.82);
font-size: clamp(1.05rem,1.35vw,1.2rem);
line-height: 1.72;
animation: experience-copy-in 680ms var(--ease-out) var(--motion-base) both;
}
.experience-scroll-indicator {
display: inline-flex;
align-items: center;
gap: 0.85rem;
min-height: 44px;
margin-top: var(--sp-4);
color: rgba(255,255,255,0.72);
font-size: var(--text-2xs);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
animation: experience-copy-in var(--motion-reveal) var(--ease-out) 440ms both;
transition: color var(--motion-base) ease-out;
}
.experience-scroll-indicator i {
display: block;
width: 38px;
height: 1px;
background: currentColor;
transform-origin: left center;
transition: transform var(--motion-base) var(--ease-out);
}
.experience-scroll-indicator:hover,
.experience-scroll-indicator:focus-visible { color: var(--color-primary); }
.experience-scroll-indicator:hover i,
.experience-scroll-indicator:focus-visible i { transform: scaleX(1.18); }
@keyframes experience-copy-in {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes experience-hero-zoom {
from { transform: scale(1); }
to { transform: scale(1.025); }
}
@media (max-width: 768px) {
.experiences-hero { min-height: 620px; }
.experiences-hero .page-hero-content { padding-top: 7rem; padding-bottom: var(--sp-7); }
.experiences-hero .page-hero-title { font-size: clamp(2.8rem,12vw,4.2rem); }
}
@media (prefers-reduced-motion: reduce) {
.experience-hero-asset,
.experiences-hero .breadcrumb,
.experiences-hero .page-hero-title,
.experiences-hero .page-hero-subtitle,
.experience-scroll-indicator { animation: none; }
}
/* ────────────────────────────────────────────────────────────── */
/* ABOUT — STORY figure caption */
/* ────────────────────────────────────────────────────────────── */
.about-story-figure { position: relative; margin: 0; }
.about-story-figure figcaption {
position: absolute;
bottom: 1.25rem;
left: 1.25rem;
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-2xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--white);
background: rgba(0,0,0,0.55);
padding: 0.55rem 0.95rem;
border-radius: var(--radius-pill);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
}
/* ────────────────────────────────────────────────────────────── */
/* ABOUT — WHY ITEMS */
/* ────────────────────────────────────────────────────────────── */
/* About page has 6 why-items → 3-column grid */
.why-grid:has(> .why-item) {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-3);
}
.why-item {
background: var(--forest-card);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-md);
padding: var(--sp-5) var(--sp-4);
position: relative;
transition: border-color var(--transition), transform var(--transition);
}
.why-item:hover { border-color: var(--color-primary); transform: translateY(-4px); }
.why-number {
font-family: var(--font-display);
font-size: var(--text-9xl);
color: rgba(255,171,0,.12);
line-height: 1;
position: absolute;
top: 1.25rem;
right: 1.25rem;
}
.why-item .why-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: rgba(212,160,23,0.12); border-radius: var(--radius-md); margin-bottom: var(--sp-2); }
.why-item .why-icon svg { width: 24px; height: 24px; stroke: #D4A017; }
.why-title {
font-family: var(--font-display);
font-size: var(--text-3xl);
color: var(--white);
margin-bottom: 0.6rem;
letter-spacing: 0.02em;
}
.why-text { font-size: var(--text-base); color: var(--muted); line-height: 1.7; }
/* ────────────────────────────────────────────────────────────── */
/* ABOUT — STATS SECTION */
/* ────────────────────────────────────────────────────────────── */
.stats-section { background: var(--color-primary); padding: var(--sp-6) 0; }
.stat-block { display: flex; flex-direction: column; align-items: center; gap: var(--sp-0-5); }
.stat-lbl {
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(10,10,10,.65);
margin-top: var(--sp-0-5);
}
/* ────────────────────────────────────────────────────────────── */
/* ABOUT — TEAM (asymmetric: feature portrait + stack of 3) */
/* ────────────────────────────────────────────────────────────── */
.team-asym-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-8);
align-items: end;
margin-bottom: var(--sp-6);
}
.team-asym-head .section-subtitle {
margin: 0;
max-width: 38ch;
}
.team-asym-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: var(--sp-4);
align-items: stretch;
}
.team-asym-grid > * { min-width: 0; }
.team-feature .team-photo {
aspect-ratio: 4/5;
height: 100%;
position: relative;
overflow: hidden;
}
.team-feature .team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-feature .team-name { font-size: var(--text-4xl); margin-top: var(--sp-2-5); }
.team-feature .team-role { font-size: var(--text-sm); }
.team-feature-tag {
position: absolute;
top: 1rem;
left: 1rem;
background: var(--color-accent);
color: var(--white);
font-family: var(--font-body);
font-size: var(--text-3xs);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 0.4rem 0.8rem;
border-radius: 4px;
box-shadow: var(--glow-accent);
}
.team-asym-stack {
display: flex;
flex-direction: column;
gap: var(--sp-2-5);
align-content: start;
}
.team-asym-stack .team-card {
text-align: left;
display: grid;
grid-template-columns: 130px 1fr;
gap: var(--sp-3);
align-items: center;
padding-bottom: var(--sp-2-5);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.team-asym-stack .team-card:last-child { border-bottom: none; padding-bottom: 0; }
.team-asym-stack .team-photo {
aspect-ratio: 1/1;
margin-bottom: 0;
border-radius: var(--radius-md);
}
.team-asym-stack .team-name { margin-bottom: var(--sp-0-5); font-size: var(--text-xl); }
.team-asym-stack .team-role { font-size: var(--text-xs); }
@media (max-width: 900px) {
.team-asym-head { grid-template-columns: 1fr; gap: var(--sp-2-5); }
.team-asym-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.team-asym-stack .team-card { grid-template-columns: 90px 1fr; gap: var(--sp-2); }
}
.team-founders-grid { grid-template-columns: 1fr 1fr; align-items: start; }
.team-founders-grid .team-photo { height: auto; }
.team-photo-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--pap-charcoal);
color: var(--color-primary);
font-family: var(--font-display);
font-size: clamp(2.5rem, 6vw, 4rem);
letter-spacing: 0.05em;
}
/* ── ABOUT PAGE ────────────────────────────────────────────────
.team-card and .stats-section appear only on about.html, so these
additions cannot reach the frozen pages. Same tokens, easing and reveal
language as the rest of the site; no new visual vocabulary. */
.team-bio {
max-width: 34ch;
margin: var(--sp-1-5) auto 0;
color: var(--color-text-muted);
font-size: var(--text-base);
line-height: 1.75;
}
/* Until the real photographs land, a full 3:4 portrait frame filled with two
letters reads as a failed image rather than a deliberate placeholder. A card
that has an approved photo keeps the portrait frame; only the initials
fallback collapses to an avatar. */
.team-founders-grid .team-photo:not(.has-photo) { aspect-ratio: auto; overflow: visible; }
.team-founders-grid .team-photo.has-photo {
/* Two founders in a two-column grid means each frame is ~550px wide, so an
uncapped 3:4 portrait runs over 700px tall and swamps the section. Cap it
so the photographs read as portraits rather than billboards. */
max-width: 340px;
margin: 0 auto var(--sp-2);
aspect-ratio: 3/4;
overflow: hidden;
border-radius: var(--radius-lg);
}
.team-founders-grid .team-photo.has-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.team-founders-grid .team-photo-placeholder {
width: 96px;
height: 96px;
margin: 0 auto;
border: 1px solid var(--border-yellow);
border-radius: var(--radius-circle);
background: var(--color-surface-alt);
font-size: var(--text-5xl);
}
.about-final-cta { background: var(--color-surface-alt); }
.about-final-cta .section-title { margin-bottom: var(--sp-2); }
.about-final-cta .section-subtitle { max-width: 56ch; }
.about-final-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-1-5);
margin-top: var(--sp-5);
}
.about-final-note {
max-width: 48ch;
margin: var(--sp-3) auto 0;
color: var(--color-text-muted);
font-size: var(--text-sm);
line-height: 1.6;
}
@media (max-width: 640px) {
.about-final-actions { flex-direction: column; align-items: stretch; }
.about-final-actions .btn { justify-content: center; }
.team-bio { max-width: none; }
}
.team-placeholder-note {
margin-top: var(--sp-3);
font-size: var(--text-xs);
color: var(--color-text-subtle);
text-align: center;
}
@media (max-width: 600px) {
.team-founders-grid { grid-template-columns: 1fr; }
}
/* ────────────────────────────────────────────────────────────── */
/* ABOUT — WHY CHOOSE US asymmetric header + watermark */
/* ────────────────────────────────────────────────────────────── */
.why-section-asym { position: relative; overflow: hidden; }
.why-section-asym > .container { position: relative; z-index: 1; }
.why-watermark {
position: absolute;
font-family: var(--font-display);
font-size: clamp(10rem, 26vw, 24rem);
line-height: 0.78;
color: rgba(255,255,255,0.04);
letter-spacing: -0.04em;
top: 50%;
right: -3rem;
transform: translateY(-50%);
pointer-events: none;
user-select: none;
z-index: 0;
}
.why-asym-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-8);
align-items: end;
margin-bottom: var(--sp-7);
}
.why-asym-head .section-title { color: var(--white); }
.why-asym-head .section-subtitle {
margin: 0;
max-width: 44ch;
color: rgba(255,255,255,0.65);
}
@media (max-width: 900px) {
.why-asym-head { grid-template-columns: 1fr; gap: var(--sp-2-5); }
.why-watermark { font-size: clamp(7rem, 30vw, 14rem); }
}
/* Legacy team-grid kept for tour-page usage if any */
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-3);
margin-top: var(--sp-6);
}
.team-card { text-align: center; }
.team-photo {
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--sp-2);
aspect-ratio: 3/4;
}
.team-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.team-card:hover .team-photo img { transform: scale(1.05); }
.team-name {
font-family: var(--font-display);
font-size: var(--text-2xl);
color: var(--white);
margin-bottom: var(--sp-0-5);
letter-spacing: 0.02em;
}
.team-role {
font-size: var(--text-xs);
color: var(--color-primary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* ────────────────────────────────────────────────────────────── */
/* FAQ */
/* ────────────────────────────────────────────────────────────── */
.faq-section { background: var(--black); }
.faq-grid {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: var(--sp-10);
align-items: start;
}
.faq-sidebar { position: sticky; top: 88px; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.4rem 0;
font-size: var(--text-lg);
font-weight: 600;
color: var(--white);
cursor: pointer;
background: none;
border: none;
text-align: left;
gap: var(--sp-2);
transition: color var(--transition);
font-family: var(--font-body);
}
.faq-question:hover { color: var(--color-primary); }
.faq-q-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border: 1px solid currentColor;
border-radius: var(--radius-circle);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
}
.faq-q-icon svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2;
transition: transform var(--transition);
}
.faq-item.open .faq-q-icon {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--black);
}
.faq-item.open .faq-q-icon svg { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item.open .faq-answer { max-height: 500px; }
.faq-answer-inner {
padding: 0 0 var(--sp-3);
font-size: var(--text-lg);
color: var(--muted);
line-height: 1.8;
}
/* ────────────────────────────────────────────────────────────── */
/* PACKAGES PAGE — FILTER TABS + TOUR CARDS */
/* ────────────────────────────────────────────────────────────── */
.packages-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-4);
}
.experience-filter-nav {
position: sticky;
z-index: 20;
top: 86px;
display: grid;
grid-template-columns: minmax(170px,0.55fr) minmax(0,2fr) auto;
align-items: center;
gap: 0.9rem;
margin: -1rem -1.25rem var(--sp-6);
padding: 0.9rem var(--sp-2-5);
background: rgba(24,24,24,0.94);
border-bottom: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(18px) saturate(135%);
-webkit-backdrop-filter: blur(18px) saturate(135%);
}
.experience-filter-prompt {
margin: 0;
color: rgba(255,255,255,0.86);
font-size: var(--text-md);
line-height: 1.45;
}
.filter-tabs {
display: flex;
gap: 0.4rem;
min-width: 0;
overflow-x: auto;
padding: 0.2rem 0.2rem 0.35rem;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
flex: 0 0 auto;
min-height: 40px;
padding: var(--sp-1) 0.85rem;
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
background: transparent;
color: rgba(255,255,255,.5);
border: 2px solid var(--color-border);
transition: transform var(--motion-base) ease-out, background-color var(--motion-base) ease-out, color var(--motion-base) ease-out, border-color var(--motion-base) ease-out, box-shadow var(--motion-base) ease-out;
font-family: var(--font-body);
cursor: pointer;
}
.filter-tab:hover {
transform: translateY(-2px);
border-color: rgba(255,171,0,0.62);
background: rgba(255,171,0,0.08);
color: var(--color-primary);
}
.filter-tab.active {
background: var(--color-primary);
color: var(--black);
border-color: var(--color-primary);
box-shadow: var(--glow-primary-soft);
}
.destination-filter {
display: flex;
align-items: center;
gap: 0.45rem;
color: rgba(255,255,255,0.45);
font-size: var(--text-2xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.destination-filter select {
min-height: 42px;
max-width: 138px;
padding: var(--sp-1) 2.2rem var(--sp-1) 0.9rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-alt);
color: rgba(255,255,255,0.82);
font: 600 0.8rem var(--font-body);
letter-spacing: 0.02em;
cursor: pointer;
}
.destination-filter select:hover,
.destination-filter select:focus-visible {
border-color: rgba(255,171,0,0.65);
outline: none;
}
.packages-grid.is-filtering .tour-card {
opacity: 0;
transform: translateY(10px);
}
.tour-card.filter-enter {
animation: experience-card-filter-in var(--motion-slow) var(--ease-out) both;
animation-delay: calc(var(--filter-index,0) * 70ms);
}
@keyframes experience-card-filter-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.experience-filter-nav {
position: relative;
top: auto;
display: grid;
grid-template-columns: 1fr;
gap: 0.8rem;
margin: -1rem -1.25rem var(--sp-4-5);
padding: 1.2rem 0 var(--sp-2);
}
.experience-filter-prompt { margin: 0 var(--sp-2-5); }
.filter-tabs { padding-left: var(--sp-2-5); padding-right: var(--sp-2-5); }
.destination-filter { margin: 0 var(--sp-2-5); }
.destination-filter select { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.filter-tab,
.tour-card.filter-enter { animation: none; transition: none; }
.filter-tab:hover { transform: none; }
.tour-card,
.tour-card-img img,
.tour-card-price,
.tour-card-book-btn,
.tour-card-highlight { transition: none; }
.tour-card:hover,
.tour-card:hover .tour-card-img img,
.tour-card:hover .tour-card-price,
.tour-card:hover .tour-card-book-btn { transform: none; }
}
.tour-card {
display: flex;
flex-direction: column;
min-height: 100%;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.tour-card[hidden] { display: none; }
/* .reveal-ready .reveal.visible sets a transform at (0,3,0) and outranks a
plain .tour-card:hover, so this lift never applied. Match its context. */
.tour-card:hover,
.reveal-ready .tour-card.reveal.visible:hover {
transform: translateY(-5px);
box-shadow: var(--elevation-3);
border-color: var(--color-primary);
}
.tour-card-img {
position: relative;
aspect-ratio: 3/2;
overflow: hidden;
}
.tour-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--motion-slow) ease;
}
.tour-card:hover .tour-card-img img { transform: scale(1.04); }
.tour-card-badge {
position: absolute;
top: 1rem;
left: 1rem;
background: var(--color-primary);
color: var(--black);
font-size: var(--text-3xs);
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.3rem var(--sp-1-5);
border-radius: var(--radius-pill);
}
.tour-card-price {
color: var(--color-primary);
font-family: var(--font-display);
font-size: var(--text-2xl);
line-height: 1.1;
transition: transform var(--motion-base) var(--ease-out), color var(--motion-base) ease-out;
}
.tour-card-price span {
font-family: var(--font-body);
font-size: var(--text-3xs);
color: rgba(255,255,255,.5);
display: block;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.tour-card-price small {
font: 400 0.62rem var(--font-body);
color: rgba(255,255,255,0.42);
}
.tour-card:hover .tour-card-price { transform: translateY(-2px); color: #ffc85a; }
.tour-card-body {
display: flex;
flex: 1;
flex-direction: column;
padding: var(--sp-3);
}
.tour-card-meta {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
margin-bottom: 1.1rem;
}
.tour-meta-item {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: var(--text-xs);
color: rgba(255,255,255,.45);
}
.tour-meta-item svg {
width: 13px;
height: 13px;
stroke: currentColor;
fill: none;
stroke-width: 2;
flex-shrink: 0;
}
.tour-vibe-tags {
position: absolute;
right: 0.9rem;
bottom: 0.9rem;
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
}
.tour-vibe-tag {
font-size: var(--text-3xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
background: rgba(10,10,10,0.68);
border: 1px solid rgba(255,255,255,0.16);
backdrop-filter: blur(8px);
padding: 0.18rem 0.55rem;
border-radius: var(--radius-pill);
}
.tour-card-title {
font-family: var(--font-display);
font-size: var(--text-3xl);
color: var(--white);
margin-bottom: 0.65rem;
line-height: 1.1;
letter-spacing: 0.02em;
}
.tour-card-desc {
font-size: var(--text-base);
color: rgba(255,255,255,.5);
line-height: 1.7;
display: -webkit-box;
min-height: calc(1.7em * 2);
margin-bottom: var(--sp-2);
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.tour-card-highlight {
margin: -0.2rem 0 var(--sp-2);
color: rgba(255,200,90,0.86);
font-size: var(--text-xs);
line-height: 1.45;
opacity: 0;
transform: translateY(5px);
transition: opacity var(--motion-base) ease-out, transform var(--motion-base) ease-out;
}
.tour-card:hover .tour-card-highlight,
.tour-card:focus-within .tour-card-highlight { opacity: 1; transform: translateY(0); }
.tour-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: var(--sp-2);
border-top: 1px solid var(--color-border);
}
.tour-stars { color: var(--color-primary); font-size: var(--text-base); letter-spacing: 0.05em; }
.tour-card-link {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
transition: gap var(--transition);
}
.tour-card-link:hover { gap: 0.7rem; }
.tour-card-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Stretched link — makes the whole card clickable */
.tour-card { position: relative; }
.tour-card-stretched-link { color: inherit; }
.tour-card-stretched-link::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
border-radius: var(--radius-lg);
}
.tour-card-stretched-link:hover { color: var(--color-primary); }
/* Keep footer interactive above the stretched overlay */
.tour-card-footer { position: relative; z-index: 1; }
.tour-card-book-btn {
background: var(--color-primary);
color: var(--black);
padding: 0.45rem 1.1rem;
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: background var(--motion-base) ease-out, box-shadow var(--motion-base) ease-out, transform var(--motion-base) ease-out;
white-space: nowrap;
display: inline-block;
}
.tour-card:hover .tour-card-book-btn,
.tour-card-book-btn:hover,
.tour-card-book-btn:focus-visible {
background: #ffc34a;
box-shadow: var(--glow-primary-soft);
transform: translateY(-1px);
}
/* Experiences page — custom invitation */
.packages-custom-cta {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
align-items: center;
gap: clamp(2.5rem,6vw,5rem);
margin-top: clamp(5rem,8vw,7rem);
padding: clamp(3.25rem,6vw,4.5rem);
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.packages-custom-label { margin-bottom: var(--sp-2); }
.packages-custom-title {
max-width: 18ch;
margin-bottom: var(--sp-2-5);
color: var(--white);
font-family: var(--font-display);
font-size: clamp(2rem,3.2vw,2.7rem);
line-height: 1.05;
}
.packages-custom-text {
max-width: 62ch;
color: var(--color-text-subtle);
font-size: var(--text-lg);
line-height: 1.75;
}
.packages-custom-action {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.85rem;
max-width: 250px;
}
.packages-custom-action .btn-primary { white-space: nowrap; }
.packages-custom-action p {
margin: 0;
color: rgba(255,255,255,0.48);
font-size: var(--text-xs);
line-height: 1.55;
}
.reveal-ready .packages-custom-cta .packages-custom-title,
.reveal-ready .packages-custom-cta .packages-custom-text,
.reveal-ready .packages-custom-cta .packages-custom-action {
opacity: 0;
transform: translateY(12px);
transition: opacity var(--motion-reveal) var(--ease-out), transform var(--motion-reveal) var(--ease-out);
}
.reveal-ready .packages-custom-cta.visible .packages-custom-title,
.reveal-ready .packages-custom-cta.visible .packages-custom-text,
.reveal-ready .packages-custom-cta.visible .packages-custom-action {
opacity: 1;
transform: translateY(0);
}
.reveal-ready .packages-custom-cta.visible .packages-custom-text { transition-delay: 100ms; }
.reveal-ready .packages-custom-cta.visible .packages-custom-action { transition-delay: var(--motion-fast); }
@media (prefers-reduced-motion: reduce) {
.reveal-ready .packages-custom-cta .packages-custom-title,
.reveal-ready .packages-custom-cta .packages-custom-text,
.reveal-ready .packages-custom-cta .packages-custom-action {
opacity: 1;
transform: none;
transition: none;
}
}
/* ────────────────────────────────────────────────────────────── */
/* CONTACT PAGE */
/* ────────────────────────────────────────────────────────────── */
.contact-info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-3);
margin-bottom: var(--sp-8);
}
.contact-info-grid .contact-card {
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--sp-4) var(--sp-3);
}
.contact-card-icon {
width: 56px;
height: 56px;
background: rgba(255,171,0,.1);
border: 1px solid rgba(255,171,0,.25);
border-radius: var(--radius-circle);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--sp-2-5);
}
.contact-card-icon svg {
width: 22px;
height: 22px;
stroke: var(--color-primary);
fill: none;
stroke-width: 2;
}
.contact-card-label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: var(--sp-1);
}
.contact-card-value {
font-family: var(--font-display);
font-size: var(--text-3xl);
color: var(--white);
margin-bottom: 0.35rem;
line-height: 1.1;
}
.contact-card-sub { font-size: var(--text-sm); color: var(--color-text-subtle); line-height: 1.5; }
/* Contact cards had no hover state at all, which made them the only cards on
the site that did not respond. Same lift, shadow and yellow border as
.tour-card on Experiences, so the behaviour is borrowed rather than
invented. focus-within covers keyboard users reaching the card's link. */
.contact-card {
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
/* The reveal system sets a transform on .visible at (0,3,0), which outranks a
plain .contact-card:hover and silently cancels the lift. Match its context so
the hover actually wins. */
.contact-card:hover,
.contact-card:focus-within,
.reveal-ready .contact-card.reveal.visible:hover,
.reveal-ready .contact-card.reveal.visible:focus-within {
transform: translateY(-4px);
border-color: var(--color-primary);
box-shadow: var(--elevation-3);
}
.contact-card-icon {
transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.contact-card:hover .contact-card-icon,
.contact-card:focus-within .contact-card-icon {
transform: scale(1.06);
background: rgba(255,171,0,.16);
border-color: rgba(255,171,0,.45);
}
/* .contact-card-sub is decorative-weight text on a card that can now lift;
.4 alpha sits under 4.5:1 against --black-card. */
.contact-card-sub { color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) {
.contact-card,
.contact-card-icon { transition: none; }
.contact-card:hover,
.contact-card:focus-within,
.reveal-ready .contact-card.reveal.visible:hover,
.reveal-ready .contact-card.reveal.visible:focus-within,
.contact-card:hover .contact-card-icon,
.contact-card:focus-within .contact-card-icon { transform: none; }
}
.contact-form-section {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--sp-8);
align-items: start;
margin-top: var(--sp-4);
}
.contact-sidebar {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--sp-4);
position: sticky;
top: 88px;
}
.contact-sidebar-title {
font-family: var(--font-display);
font-size: var(--text-3xl);
color: var(--white);
margin-bottom: var(--sp-1-5);
letter-spacing: 0.02em;
}
.contact-sidebar > p { font-size: var(--text-base); color: rgba(255,255,255,.5); margin-bottom: var(--sp-3); line-height: 1.7; }
.form-label {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
}
/* ────────────────────────────────────────────────────────────── */
/* BOOKING FLOW (contact page) */
/* */
/* A two-step, progressively disclosed inquiry built on the same */
/* tokens, easing and reveal language as the homepage and */
/* Experiences page. Step 1 asks only about the trip and requires */
/* nothing; step 2 collects the minimum needed to write back. */
/* */
/* Progressive enhancement contract: without JavaScript both */
/* fieldsets render as one continuous form and the native POST */
/* still works, so the step chrome (progress, Continue, Back) is */
/* hidden until script.js adds .booking-flow-ready. Step */
/* visibility is then driven entirely by [data-booking-current] */
/* on the form — no DOM moves, so nothing reflows unexpectedly. */
/* ────────────────────────────────────────────────────────────── */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
/* Matches .contact-sidebar so the flow and the "what happens next" panel
read as one pair of surfaces rather than two unrelated treatments. */
.booking-panel {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: clamp(1.5rem, 4vw, 3rem);
}
/* Clears the floating pill nav when linked to as #booking-flow or scrolled
to on a step change. */
#booking-flow { scroll-margin-top: 110px; }
.booking-flow-label { margin-bottom: var(--sp-1-5); }
.booking-flow-title {
max-width: 20ch;
margin-bottom: var(--sp-1-5);
color: var(--white);
font-family: var(--font-display);
font-size: clamp(1.85rem, 3.2vw, 2.6rem);
line-height: 1.08;
letter-spacing: -0.02em;
}
.booking-flow-intro {
max-width: 56ch;
margin-bottom: var(--sp-4);
color: var(--color-text-muted);
font-size: var(--text-lg);
line-height: 1.75;
}
.contact-form.booking-flow { gap: var(--sp-3); }
/* ── Progress ─────────────────────────────────────────────────── */
/* Hidden until JS confirms the flow is stepped. */
.booking-progress { display: none; }
.booking-flow-ready .booking-progress {
display: flex;
flex-direction: column;
gap: var(--sp-1-5);
}
.booking-progress-steps {
display: flex;
gap: var(--sp-3);
margin: 0;
padding: 0;
list-style: none;
}
.booking-progress-step {
display: flex;
align-items: center;
gap: var(--sp-1);
color: rgba(255,255,255,.5);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: color var(--motion-base) var(--ease-out);
}
.booking-progress-num {
display: grid;
place-items: center;
width: 26px;
height: 26px;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,.3);
border-radius: var(--radius-circle);
font-family: var(--font-display);
font-size: var(--text-2xs);
transition: background var(--motion-base) var(--ease-out),
border-color var(--motion-base) var(--ease-out),
color var(--motion-base) var(--ease-out);
}
.booking-progress-step.is-complete { color: var(--color-text-muted); }
.booking-progress-step.is-complete .booking-progress-num {
border-color: var(--color-primary);
color: var(--color-primary);
}
.booking-progress-step[aria-current="step"] { color: var(--white); }
.booking-progress-step[aria-current="step"] .booking-progress-num {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--black);
}
.booking-progress-track {
height: 2px;
border-radius: 2px;
background: rgba(255,255,255,.09);
overflow: hidden;
}
.booking-progress-track > span {
display: block;
height: 100%;
background: var(--color-primary);
transform: scaleX(0.5);
transform-origin: left center;
transition: transform 560ms var(--ease-out);
}
/* ── Steps ────────────────────────────────────────────────────── */
/* Explicit margins rather than flex gap: a