/* =============================================================
ORN Holidays — customer-facing design system
Mobile-first. Two breakpoints (768, 1280). No third-party CSS.
============================================================= */
/* Marketing fonts — hoisted from ornholidays-marketing.css (@import must lead the file). */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');
:root {
/* ---- Colours (ORN red brand v2) ----------------------------- */
/* Semantic name kept as --orn-navy for backward compat — values
repointed to the red brand palette. Every downstream rule that
used var(--orn-navy) now paints in brand red. */
--orn-navy: #ff000f; /* brand red — hero top + header */
--orn-navy-2: rgb(201, 10, 18); /* brand red mid — gradient stop */
--orn-navy-3: rgb(158, 8, 16); /* brand red deep — gradient end */
--orn-navy-ink: rgb(14, 26, 43); /* actual navy — used by marketing surfaces (.orn-mh, .orn-mk-*) */
--orn-gold: rgb(20, 20, 20); /* dark CTA pill fill (black on white bg) */
--orn-gold-2: rgb(0, 0, 0); /* CTA hover */
--orn-gold-3: rgb(242, 13, 22); /* accent/eyebrow — HIGHLIGHTS in red */
--orn-cream: rgb(244, 244, 244); /* page background (light gray) */
--orn-cream-2: rgb(255, 255, 255); /* card paper — white */
--orn-cream-3: rgb(232, 232, 232); /* subtle borders */
--orn-paper: #ffffff;
--orn-ink: rgb(20, 35, 59); /* primary text */
--orn-ink-2: rgb(58, 70, 84); /* secondary text on cream */
/* Canonical body-text token — use this in place of hard-coded #000 /
raw rgb() blacks whenever a component needs the primary reading colour.
Aliased to --orn-ink so any future re-tint changes both together. */
--orn-text: rgb(21, 21, 21);
--orn-text-muted: rgb(107, 114, 128); /* secondary meta text (used in TM meta line etc.) */
--orn-mute: rgb(110, 110, 110); /* warm muted (on cream) */
--orn-mute-2: rgba(255, 255, 255, 0.72); /* cool muted (on navy) */
--orn-mute-3: rgb(195, 204, 214); /* light cool muted (nav links / lede) */
--orn-text-light: rgba(255, 255, 255, 0.9); /* warm light text on red */
--orn-line: rgba(20, 35, 59, 0.10);
--orn-line-2: rgba(20, 35, 59, 0.18);
/* accent palette — colour-coded tiers, families, results */
--orn-blue: rgb(47, 128, 237); /* Early-bird */
--orn-amber: rgb(199, 122, 43); /* Filling fast */
--orn-red: rgb(190, 63, 57); /* Final seats / Italy */
--orn-green: rgb(22, 160, 133);
--orn-purple: #6a4ba6;
--orn-orange: #c2682a;
--orn-teal: #2c8d8a;
/* ---- Typography (fluid) -------------------------------------- */
--orn-font-body: Archivo, sans-serif;
--orn-font-display: Archivo, sans-serif;
--orn-font-heading: Anton, sans-serif;
--orn-font-heading-serif: 'Playfair Display', 'Times New Roman', Times, serif;
--orn-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Type scale (aligned to ORN Booking Home reference) */
--orn-fs-hero: 62px; /* hero title */
--orn-fs-pass-city: 40px; /* boarding-pass city */
--orn-fs-h1: 32px; /* section title (Departures filling / All Europe / ORN Specials / Beyond Europe heads) */
--orn-fs-h2: 22px; /* sub section title */
--orn-fs-h3: 18px; /* card / rung title */
--orn-fs-lede: 16px; /* hero lede */
--orn-fs-body: 15px; /* main body / nav */
--orn-fs-stat: 28px; /* big stat number */
--orn-fs-small: 13px; /* small body / pass meta value */
--orn-fs-tiny: 12px; /* fine print, pass tag */
--orn-fs-eyebrow: 11px; /* eyebrow mono labels */
/* ---- Spacing (4-pt grid) ------------------------------------- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 80px;
--sp-10: 112px;
/* ---- Radius / shadow ---------------------------------------- */
--r-card: 18px;
--r-soft: 12px;
--r-pill: 999px;
--r-tile: 14px;
--sh-card: 0 1px 2px rgba(10, 24, 55, 0.04), 0 4px 16px rgba(10, 24, 55, 0.06);
--sh-raised: 0 8px 32px rgba(10, 24, 55, 0.14);
--sh-sheet: -8px -8px 32px rgba(10, 24, 55, 0.18);
/* ---- Container ---------------------------------------------- */
--orn-container: 1250px;
--orn-gutter: 28px;
/* ---- Radius --------------------------------------------------
button-radius-primary → hero/CTA/nav pill buttons (tight)
button-radius-card → depcards, jrycards, spcl, poster, gallery tiles */
--button-radius-primary: 5px;
--button-radius-card: 10px;
}
/* =============================================================
Red-brand overrides — variable repoint alone leaves some dark
CTAs with red text (because color: var(--orn-navy) is now red).
Force them back to white here. Kept small + selector-list so
later additions can be tacked on without touching the palette.
============================================================= */
.orn-btn--primary,
.orn-depcard__cta,
.orn-jrycard__view,
.orn-sum__cta,
.orn-sum__cta:hover:not(:disabled),
.orn-promo__strip-card-cta,
.orn-filhead__cta,
.orn-mk-btn--gold,
.trpPymtActCtr .ui-button { color: #fff !important; }
.orn-btn--primary:hover, .orn-depcard__cta:hover, .orn-promo__strip-card-cta:hover, .orn-mk-btn--gold:hover { color: #fff !important; }
/* Hero surfaces: gradient across the three brand stops instead of
a flat brand-red fill (which is what would happen after the
variable swap in isolation). */
body:not(.orn-hero-immersive) .orn-hero,
.orn-promo__hero { background: linear-gradient(160deg, var(--orn-navy) 0%, var(--orn-navy-2) 58%, var(--orn-navy-3) 100%) !important; }
.orn-mk-hero { background: linear-gradient(160deg, var(--orn-text) 0%, var(--orn-navy-ink) 100%) !important; }
.orn-pay-hero,
.orn-wallet-hero { background: transparent !important; }
/* Footer stays near-black on the red brand. Upper linkband slightly
darker (#0B0B0B), lower legal strip a hair lighter (#0F0F0F) for
soft separation. Overrides the navy-turned-red background that
would otherwise inherit from the variable swap. */
.orn-footer { background: rgb(11, 11, 11) !important; color: rgba(255, 255, 255, 0.72) !important; }
.orn-footer-linkband { background: rgb(11, 11, 11) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; }
.orn-footer__legalstrip { background: rgb(15, 15, 15) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.5) !important; }
/* Logo image (new markup) — sized to match the old wordmark height.
Neither dimension is pinned. --orn-logo-h (the partner config's "custom logo
height", emitted by head_assets.jsp) is an upper bound and the var() fallback
is the height this surface has always used. Keeping height:auto is what stops
wide partner lockups from looking stretched: when the flex row runs out of
space the image's width shrinks and its height follows the aspect ratio,
whereas a pinned height would have squashed it horizontally. */
.orn-header__logo-img { display: block; height: auto; max-height: var(--orn-logo-h, 40px); width: auto; max-width: 100%; min-width: 0; object-fit: contain; object-position: left center; }
.orn-mh__brand-img { display: block; height: auto; max-height: var(--orn-logo-h, 35px); width: auto; max-width: 100%; min-width: 0; object-fit: contain; object-position: left center; }
/* =============================================================
Reset / base
============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--orn-font-body); font-size: var(--orn-fs-body); line-height: 1.55; color: var(--orn-ink); background: var(--orn-cream); text-align: left; /* override b2c-v*.css default body { text-align: center } */ -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C7BFAE; border-radius: 8px; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--orn-font-display); font-weight: 800; line-height: 1.1; color: rgb(15, 15, 15); text-align: left; }
/* Defensive override — tf-main's global styles.css ships rules that
center text inside section containers for some legacy partner
themes. The ornholidays skin is always left-aligned by default;
opt back into centering explicitly via .orn-text-center. */
.orn-page, .orn-page p, .orn-page h1, .orn-page h2, .orn-page h3, .orn-page h4, .orn-page h5, .orn-page h6 { text-align: left; }
.orn-eyebrow { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--orn-navy); }
.orn-container { max-width: var(--orn-container); margin-inline: auto; padding-inline: var(--orn-gutter); }
.orn-section { padding-block: 40px; }
@media (max-width: 900px) { .orn-section { padding-block: 30px; } }
.orn-section--cream { background: var(--orn-cream); }
.orn-section--black { background: var(--orn-text); color: var(--orn-text-light); }
.orn-section--black .orn-secthead__eyebrow { display: none; }
.orn-section--paper { background: var(--orn-paper); }
.orn-section--navy { background: var(--orn-navy); color: #f0e6c8; }
.orn-section--dark { background: #0a1221; color: #f0e6c8; }
.orn-section--dark .orn-secthead__eyebrow { color: rgba(240, 230, 200, 0.75); }
.orn-section--dark .orn-secthead__title { color: #fff; }
.orn-section--dark .orn-secthead__title em { font-style: italic; font-weight: 600; color: var(--orn-navy); }
.orn-b2b .orn-secthead__eyebrow { color: rgba(255, 255, 255, 0.7); }
.orn-b2b .orn-secthead__title { color: #fff; }
/* ── Europe ka Maths · single stacked ledger ─────────────────────── */
.orn-mkmaths { }
.orn-mkmaths__ledger { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.orn-mkmaths__head { text-align: left; margin-bottom: 20px; }
.orn-mkmaths__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; }
.orn-mkmaths__row-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.orn-mkmaths__row-lbl { font-family: var(--orn-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.10em; color: var(--orn-navy); text-transform: uppercase; }
.orn-mkmaths__row-sub { font-family: var(--orn-font-body); font-size: 14px; color: #fff; }
.orn-mkmaths__row-amt { font-family: var(--orn-font-mono); font-size: 26px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.orn-mkmaths__row-amt--strike { color: rgba(255, 255, 255, 0.55); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.4); }
.orn-mkmaths__op { display: flex; align-items: center; justify-content: center; font-family: var(--orn-font-mono); font-size: 26px; font-weight: 800; color: #fff; padding: 0; }
.orn-mkmaths__pay { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 26px; background: #fff; color: var(--orn-text); border-radius: 16px; text-decoration: none; transition: transform 0.16s ease, box-shadow 0.16s ease; }
.orn-mkmaths__pay:hover, .orn-mkmaths__pay:focus { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255, 0, 15, 0.18); }
.orn-mkmaths__pay-copy { display: flex; flex-direction: column; gap: 4px; }
.orn-mkmaths__pay-lbl { font-family: var(--orn-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--orn-text); text-transform: uppercase; }
.orn-mkmaths__pay-sub { font-family: var(--orn-font-body); font-size: 14px; color: var(--orn-text-muted); }
.orn-mkmaths__pay-amt { font-family: var(--orn-font-mono); font-size: 34px; font-weight: 800; color: var(--orn-navy); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.orn-mkmaths__pay-star { font-size: 0.55em; vertical-align: super; }
@media (max-width: 640px) {
.orn-mkmaths__row { padding: 16px 18px; }
.orn-mkmaths__row-amt { font-size: 22px; }
.orn-mkmaths__pay { padding: 20px 20px; }
.orn-mkmaths__pay-amt { font-size: 28px; }
}
.orn-secthead__title em { font-style: italic; font-weight: 600; color: var(--orn-navy); }
/* =============================================================
Header
============================================================= */
.orn-header { background: var(--orn-text); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--orn-text-light); position: relative; z-index: 50; border-bottom: 0; }
/* Immersive hero — transparent header floats over a full-bleed photo hero.
Pages opt in via body.orn-hero-immersive and set --orn-hero-image on body. */
body.orn-hero-immersive .orn-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; position: absolute; left: 0; right: 0; top: 0; }
body.orn-hero-immersive .orn-hero { position: relative; background: rgb(15, 15, 15) var(--orn-hero-image) center 100%/cover no-repeat !important; color: #fff; margin-top: 0; padding-top: 120px; overflow: hidden; }
/* Split hero — media on top, copy below on mobile. Desktop uses the immersive
bg-image on .orn-hero (unchanged) and hides the ![]()
media panel. */
.orn-hero--split .orn-hero__media { display: none; }
.orn-hero--split .orn-hero__media-img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
body.orn-hero-immersive .orn-hero--split { background: none !important; padding-top: 0 !important; overflow: visible; }
body.orn-hero-immersive .orn-hero--split::before { display: none; }
.orn-hero--split .orn-hero__media { display: block; }
.orn-hero--split .orn-hero__media-img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 75% -100px; }
.orn-hero--split .orn-hero__inner { padding: 24px 20px 8px !important; background: transparent; margin-top: -225px; position: relative; z-index: 2; }
body.orn-hero-immersive .orn-hero--split .orn-hero__title { color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55); }
.orn-hero--split .orn-hero--with-finder .orn-mkfind-section,
.orn-hero--with-finder.orn-hero--split .orn-mkfind-section { margin-top: -10px; }
}
body.orn-page--group-tours.orn-hero-immersive .orn-hero { padding-top: 140px; }
@media (max-width: 900px) {
body.orn-page--group-tours.orn-hero-immersive .orn-hero { padding-top: 150px; background-position: 70% 60% !important; }
}
body.orn-hero-immersive .orn-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(15, 15, 15, 0.75) 0%, rgba(15, 15, 15, 0.55) 30%, rgba(15, 15, 15, 0.15) 60%, rgba(15, 15, 15, 0) 100%); pointer-events: none; z-index: 1; }
body.orn-hero-immersive .orn-hero__inner { position: relative; z-index: 2; padding-top: 20px; padding-bottom: 0; }
@media (max-width: 900px) {
body.orn-hero-immersive .orn-hero__inner { padding-top: 10px; padding-bottom: 40px; }
}
body.orn-hero-immersive .orn-hero__eyebrow { color: #fff; }
body.orn-hero-immersive .orn-hero__title { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); font-size: clamp(50px, 4vw, 168px); font-family: var(--orn-font-heading); margin-bottom: 15px; }
body.orn-hero-immersive .orn-hero__lede { color: rgba(255, 255, 255, 0.9); }
.orn-hero__offer { display: inline-flex; align-items: center; gap: 24px; padding: 14px 22px; margin-top: 18px; background: rgba(20, 30, 46, 0.72); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; backdrop-filter: blur(6px); text-decoration: none; color: #fff; max-width: 640px; transition: transform 0.16s ease, background 0.16s ease; }
.orn-hero__offer:hover, .orn-hero__offer:focus { background: rgba(20, 30, 46, 0.88); transform: translateY(-2px); }
.orn-hero__offer-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.orn-hero__offer-line { font-family: var(--orn-font-body); font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.9); }
.orn-hero__offer-sub { font-family: var(--orn-font-body); font-size: 13px; color: rgba(255, 255, 255, 0.65); }
.orn-hero__offer-price { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.orn-hero__offer-lbl { font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.55); }
.orn-hero__offer-amt { font-family: var(--orn-font-display); font-size: 28px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
.orn-hero--split .orn-hero__offer { display: none; }
}
body.orn-hero-immersive .orn-hero__stats { color: #fff; }
body.orn-page--group-tours .orn-hero__stats { padding-top: var(--sp-4); }
body.orn-hero-immersive .orn-hero__stat-n { color: #fff; }
body.orn-hero-immersive .orn-hero__stat-l { color: rgba(255, 255, 255, 0.7); }
.orn-hero__badges { display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; gap: 0; margin-top: 34px; padding: 12px 8px; background: rgba(15, 15, 15, 0.55); border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
.orn-hero__badges::-webkit-scrollbar { display: none; }
.orn-hero__badge-pill { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.15; white-space: normal; max-width: 125px; flex: 0 0 auto; }
.orn-hero__badge-pill + .orn-hero__badge-pill { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.orn-hero__badge-ic { color: #fff; flex-shrink: 0; }
@media (max-width: 900px) {
.orn-hero__badges { padding: 10px 6px; }
.orn-hero__badge-pill { padding: 4px 14px; font-size: 12.5px; }
}
body.orn-hero-immersive .orn-pass { max-width: 440px; transform: none; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
body.orn-hero-immersive .orn-hero__pass { align-self: flex-start; justify-self: end; margin-bottom: 40px; }
.orn-header__inner { max-width: var(--orn-container); margin-inline: auto; padding: 10px var(--orn-gutter); display: flex; align-items: center; gap: 20px; }
.orn-header__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--orn-text-light); cursor: pointer; flex: 0 1 auto; min-width: 0; }
.orn-header__logo { height: auto; max-height: var(--orn-logo-h, 36px); width: auto; max-width: 100%; min-width: 0; object-fit: contain; object-position: left center; }
/* Gold disc with the ORN leaf glyph — matches the mockup's circular brand
mark. Sized to align with the wordmark + eyebrow at 36px tall. */
.orn-header__logo-disc { width: 36px; height: 36px; border-radius: 50%; background: var(--orn-gold); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; }
.orn-header__logo-disc svg { display: block; }
.orn-header__logo-mark { display: inline-block; color: #fff; font-family: var(--orn-font-display); font-weight: 800; font-size: 21px; letter-spacing: 0.04em; }
/* Brand eyebrow ("EUROPE JOURNEYS") shown next to the wordmark on
desktop — adopted from the mockup. Hidden on mobile to keep the
header height tight. */
.orn-header__brand-eyebrow { display: none; font-family: var(--orn-font-body); font-size: 13.5px; letter-spacing: 0.26em; text-transform: uppercase; color: #fff; font-weight: 700; padding-left: 14px; margin-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.4); align-self: center; height: 42px; line-height: 42px; }
.orn-header__eyebrow { display: none; font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 230, 200, 0.65); }
.orn-header__nav { display: none; justify-content: flex-end; align-items: center; gap: 26px; margin-left: auto; font-weight: 600; }
.orn-header__nav-link { font-size: 15px; color: #fff; padding-block: var(--sp-2); position: relative; }
.orn-header__nav-link:hover { color: #fff; }
.orn-header__actions { display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; flex: 0 0 auto; }
.orn-header__currency { display: none; align-items: center; gap: 7px; padding: 5px 14px; border: 1px solid #fff; border-radius: var(--r-pill); color: #fff; font-size: 13.5px; cursor: pointer; }
.orn-header__currency-globe { color: var(--orn-gold-3); font-size: 1rem; }
.orn-header__currency-icon { display: inline-block; vertical-align: middle; }
.orn-header__currency-label { font-size: 14px; font-weight: bold}
.orn-header__currency-caret { color: var(--orn-mute-2); font-size: 11px; }
.orn-header__region { position: relative; display: inline-block; }
.orn-header__region-popover { position: absolute; top: calc(100% + 10px); right: 0; min-width: 380px; max-width: 440px; background: #ffffff; border-radius: 18px; padding: 20px 22px 18px; box-shadow: 0 24px 60px rgba(10, 24, 55, 0.28), 0 6px 18px rgba(10, 24, 55, 0.14); z-index: 60; }
.orn-header__region-popover[hidden] { display: none; }
.orn-header__region-eyebrow { color: var(--orn-navy); letter-spacing: 0.14em; text-transform: uppercase; font-size: 11.5px; font-weight: 700; margin-bottom: 12px; }
.orn-header__region-eyebrow + .orn-header__region-eyebrow, .orn-header__region-grid + .orn-header__region-eyebrow { margin-top: 18px; }
.orn-header__region-grid { display: flex; flex-wrap: wrap; gap: 10px 10px; }
.orn-header__region-chip { display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid #14233B; border-radius: 12px; background: #ffffff; color: #14233B; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; }
.orn-header__region-chip:hover { background: #14233B; color: #ffffff; }
.orn-header__region-chip.is-active { background: #14233B; color: #ffffff; }
.orn-header__region-note { margin-top: 16px; color: #6b6455; font-size: 13px; line-height: 1.5; }
@media screen and (max-width: 640px) {
.orn-header__region-popover { position: fixed; top: auto; bottom: 0; left: 0; right: 0; min-width: 0; max-width: none; border-radius: 18px 18px 0 0; padding: 20px 18px 24px; }
}
.orn-header__profile { position: relative; display: inline-block; }
.orn-header__rewards { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; margin-right: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: var(--orn-text); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; text-decoration: none; box-shadow: 0 2px 6px rgba(10, 24, 55, 0.14); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.orn-header__rewards:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(10, 24, 55, 0.22); color: var(--orn-text); }
.orn-header__rewards-label { font-family: var(--orn-font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--orn-navy); }
.orn-header__rewards-value { font-weight: 800; font-size: 14px; }
.orn-header__avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: none; background: #fff; color: var(--orn-navy, rgb(14, 26, 43)); font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 2px 6px rgba(10, 24, 55, 0.18); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.orn-header__avatar:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(10, 24, 55, 0.24); }
.orn-header__avatar-letter { line-height: 1; }
.orn-header__profile-popover { position: absolute; top: calc(100% + 10px); right: 0; min-width: 260px; max-width: 320px; background: #ffffff; border-radius: 16px; padding: 14px 12px; box-shadow: 0 24px 60px rgba(10, 24, 55, 0.28), 0 6px 18px rgba(10, 24, 55, 0.14); z-index: 60; }
.orn-header__profile-popover[hidden] { display: none; }
.orn-header__profile-user { display: flex; align-items: center; gap: 12px; padding: 8px 10px 12px; }
.orn-header__profile-user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--orn-gold, rgb(193, 142, 69)); color: var(--orn-navy, rgb(14, 26, 43)); font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; }
.orn-header__profile-user-name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; color: var(--orn-text); }
.orn-header__profile-divider { height: 1px; background: rgba(20, 35, 59, 0.10); margin: 4px 6px; }
.orn-header__profile-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; color: var(--orn-text); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; transition: background 0.12s ease; }
.orn-header__profile-item:hover { background: rgba(20, 35, 59, 0.06); }
.orn-header__profile-icon { color: var(--orn-gold-2, rgb(169, 124, 60)); flex-shrink: 0; }
.orn-header__profile-item--logout { color: #B4432B; }
.orn-header__profile-item--logout .orn-header__profile-icon { color: #B4432B; }
@media screen and (max-width: 640px) {
.orn-header__profile-popover { position: fixed; top: auto; bottom: 0; left: 0; right: 0; min-width: 0; max-width: none; border-radius: 18px 18px 0 0; padding: 20px 14px 24px; }
}
.orn-header__login, .orn-header__signup, .orn-header__cta, .orn-header__user-pill, .orn-header__talk { display: inline-flex; align-items: center; padding: 7px 20px 9px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--orn-fs-body); white-space: nowrap; text-decoration: none; cursor: pointer; border: none; font-family: inherit; font-size:14px}
.orn-header__talk { background: #fff; color: var(--orn-navy); margin-left: 8px; }
.orn-header__talk:hover { background: rgba(255, 255, 255, 0.9); color: var(--orn-navy); }
.orn-header__talk-red { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--color-primary, #E4002B); color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary, #E4002B) 28%, transparent); }
.orn-header__talk-red:hover { background: var(--color-primary-light, #b8001f); color: #fff; }
.orn-header__talk-red--mobile { margin-left: auto; }
.orn-header__talk-red--desktop { display: none; padding: 9px 18px; font-size: 14px; margin-left: -12px; }
@media (min-width: 768px) {
.orn-header__talk-red--mobile { display: none; }
.orn-header__talk-red--desktop { display: inline-flex; }
}
.orn-header__signup { background: var(--orn-gold, rgb(193, 142, 69)); color: #ffffff; margin-right: 6px; }
.orn-header__signup:hover { background: var(--orn-gold-2, rgb(169, 124, 60)); color: #ffffff; }
.orn-header__login { font-family: Anton, sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 0.04em; color: #E4002B; background: #fff; padding: 7px 20px; text-decoration: none; white-space: nowrap; border-radius: 0; }
.orn-header__login:hover { background: #F7F4EF; color: #E4002B; }
.orn-header__user-pill { background: rgba(193, 142, 69, 0.15); color: var(--orn-gold-3); border: 1px solid rgba(193, 142, 69, 0.35); font-weight: 500; }
.orn-header__cta { background: var(--orn-gold); color: var(--orn-navy); }
.orn-header__cta:hover { background: var(--orn-gold-2); }
.orn-header__nav-mobile { display: flex; gap: var(--sp-4); padding: var(--sp-3) var(--orn-gutter) var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; border-top: 1px solid rgba(240, 230, 200, 0.10); }
.orn-header__nav-mobile::-webkit-scrollbar { display: none; }
.orn-header__nav-mobile .orn-header__nav-link { scroll-snap-align: start; white-space: nowrap; font-size: 0.92rem; }
@media (min-width: 768px) {
.orn-header__eyebrow { display: inline; }
.orn-header__brand-eyebrow { display: inline-flex; align-items: center; }
.orn-header__nav { display: flex; }
.orn-header__currency { display: inline-flex; }
.orn-header__nav-mobile { display: none; }
.orn-header__login { background: var(--orn-text); color: #ffffff; border: none; }
.orn-header__login:hover { color: #ffffff; background: var(--orn-text); }
}
/* Utility (secondary) nav row inside the header — sits to the right of
the brand on the top row. Uses a subtler size + colour than the
primary nav below. */
.orn-header__utility { display: none; align-items: center; gap: 22px; margin-left: auto; font-size: 14px; color: rgb(195, 204, 214); }
.orn-header__util-link { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; text-decoration: none; }
.orn-header__util-link:hover { color: #fff; }
.orn-header__util-icon { display: inline-block; vertical-align: middle; }
.orn-header__util-cta { display: inline-flex; align-items: center; padding: 9px 20px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--orn-fs-body); white-space: nowrap; text-decoration: none; background: var(--orn-gold); color: var(--orn-navy); }
.orn-header__util-cta:hover { background: var(--orn-gold-2); }
/* Primary nav row — the second header tier that carries Journeys /
Departures / Van Tours / Worldwide / Promotions / Specials + My
bookings. On desktop it's a horizontal row under the brand row; on
mobile it becomes a horizontally-scrollable strip. */
.orn-header__nav-primary { display: none; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; align-items: center; }
.orn-header__nav-primary::-webkit-scrollbar { display: none; }
.orn-header__nav-primary .orn-header__nav-link { scroll-snap-align: start; white-space: nowrap; font-weight: 600; font-size: 15px; }
.orn-header__nav-link.is-active { color: #fff; }
.orn-header__nav-find.is-active { color: var(--orn-gold-2); }
.orn-header__nav-find { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--orn-gold); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.orn-header__nav-find:hover { color: var(--orn-gold-2); }
/* Mobile hamburger + slide-in nav drawer. Burger + drawer show below
768px; the desktop utility row and primary nav are hidden there and
restored (with the burger/drawer hidden) at >=768 further below. */
.orn-header__burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 42px; padding: 9px; border-radius: 10px; background: transparent; border: 1px solid rgba(240, 230, 200, 0.22); cursor: pointer; flex: 0 0 auto; }
.orn-header__burger span { display: block; height: 2px; width: 100%; background: var(--orn-text-light); border-radius: 2px; }
.orn-drawer-backdrop { position: fixed; inset: 0; background: rgba(10, 18, 33, 0.55); z-index: 1200; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; }
.orn-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
/* Drawer body is near-black with a red ORN header strip on top — the brand
pops at the top and the light nav/menu text reads cleanly on black. */
.orn-drawer { position: fixed; top: 0; left: 0; height: 100%; width: min(84vw, 340px); background: #0F0F0F; color: var(--orn-text-light); z-index: 1210; transform: translateX(-100%); transition: transform 0.28s ease; display: flex; flex-direction: column; box-shadow: var(--sh-raised); overflow-y: auto; }
.orn-drawer.is-open { transform: translateX(0); }
.orn-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: var(--color-primary, #E4002B); border-bottom: 0; }
.orn-drawer__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--orn-font-display); font-weight: 800; font-size: 20px; color: #fff; letter-spacing: 0.04em; text-decoration: none; }
.orn-drawer__logo-img { display: block; height: 32px; width: auto; }
.orn-drawer__close { font-size: 28px; line-height: 1; color: var(--orn-text-light); background: transparent; border: 0; cursor: pointer; padding: 0 4px; }
.orn-drawer__nav { display: flex; flex-direction: column; padding: 8px 0; }
/* Typography mirrors the marketing drawer (.orn-mh__drawer-link): uppercase
mono, letter-spaced, light text with a thin divider under each row. */
/* ---------------------------------------------------------------------------------
Staff nav in the ORN header (item H). header_new.jsp hands staff this header on
ORN, and the ORN header renders NavMenuBuilder's menu in place of the consumer
primary nav. The staff menu is deeply nested, so a top-level entry that has
children reveals them on hover OR keyboard focus - :focus-within means the menu is
reachable by tab, with no JS to load or keep in sync.
--------------------------------------------------------------------------------- */
/* The consumer strip is a horizontally-scrolling row (overflow-x:auto), which CLIPS an
absolutely-positioned dropdown - that is why the staff sub-menus never appeared on hover. The
staff variant drops the scroll and handles width by moving overflow into a "..." menu instead,
which is what the header script does. */
.orn-header__nav-primary--staff { overflow: visible; scroll-snap-type: none; }
.orn-header__navitem { position: relative; display: inline-flex; align-items: center; white-space: nowrap; }
.orn-header__navitem[hidden] { display: none !important; }
/* The overflow bucket hangs off the right end, so it opens leftwards or it would run off the
viewport on a narrow window. */
.orn-header__navmenu--more { left: auto; right: 0; max-height: 70vh; overflow-y: auto; }
.orn-header__navmenu-link--head { font-weight: 700; }
.orn-header__navmenu-link--sub { padding-left: 30px; color: #B9C0CA; }
.orn-header__nav-caret { margin-left: 4px; font-size: 9px; opacity: 0.75; }
.orn-header__navmenu { display: none; position: absolute; top: 100%; left: 0; z-index: 1200; min-width: 210px; padding: 6px 0; background: #14233b; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32); }
.orn-header__navitem:hover .orn-header__navmenu,
.orn-header__navitem:focus-within .orn-header__navmenu { display: block; }
.orn-header__navmenu-link { display: block; padding: 8px 16px; font-size: 14px; line-height: 1.35; color: #E6E9EE; white-space: nowrap; text-decoration: none; }
.orn-header__navmenu-link:hover, .orn-header__navmenu-link:focus { background: rgba(255, 255, 255, 0.08); color: #fff; }
/* Drawer: the same menu flattened, because a hover dropdown is no use on touch. */
.orn-drawer__navgroup { padding: 14px 22px 6px; font-family: "IBM Plex Mono", "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8A919B; }
.orn-drawer__link--sub { padding-left: 34px; text-transform: none; letter-spacing: 0.03em; font-size: 13px; }
.orn-drawer__link { display: flex; align-items: center; gap: 10px; padding: 15px 22px; font-family: "IBM Plex Mono", "JetBrains Mono", monospace; font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #C9CDD3; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.orn-drawer__link:hover { color: #F3EFE6; }
/* The last primary link sits right above .orn-drawer__section, whose own
border-top already separates the two — drop the link's rule so the
drawer doesn't show a double line there. */
.orn-drawer__nav > .orn-drawer__link:last-child { border-bottom: 0; }
/* Active nav item. --orn-gold is rgb(20,20,20) (a dark CTA fill), which is
near-invisible on the dark drawer — so use the drawer's real gold accent
(matches the REWARDS pill) and a slight weight bump to mark the current page. */
.orn-drawer__link.is-active { color: #E4C88C; font-weight: 600; }
.orn-drawer__section { padding: 10px 0; border-top: 1px solid rgba(240, 230, 200, 0.12); display: flex; flex-direction: column; }
.orn-drawer__section a { padding: 11px 22px; font-size: 14px; color: rgb(195, 204, 214); }
.orn-drawer__section a:hover { color: var(--orn-gold); }
.orn-drawer__foot { margin-top: auto; padding: 18px 22px; border-top: 1px solid rgba(240, 230, 200, 0.12); display: flex; flex-direction: column; gap: 12px; }
.orn-drawer__foot .orn-header__signup, .orn-drawer__foot .orn-header__login { justify-content: center; width: 100%; margin: 0; }
/* Logged-in account block in the mobile drawer — mirrors the desktop profile
popover (rewards balance + account links). Light text on the red drawer,
matching the drawer nav links; the desktop popover's dark-on-white styling
would be invisible here. */
.orn-drawer__profile-top { padding: 14px 0 6px; border-bottom: 1px solid rgba(240, 230, 200, 0.12); }
.orn-drawer__account { gap: 2px; }
.orn-drawer__user { display: flex; align-items: center; gap: 12px; padding: 4px 22px 12px; }
.orn-drawer__user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--orn-navy); font-weight: 800; font-size: 17px; flex: 0 0 auto; }
.orn-drawer__user-name { font-size: 17px; font-weight: 700; color: #fff; }
/* Gold rewards pill — gold-tinted fill + gold border, with the drawer's mono
uppercase typography. */
.orn-drawer__rewards { display: flex; align-items: center; justify-content: space-between; margin: 0 22px 12px; padding: 12px 16px; border-radius: 12px; background: linear-gradient(180deg, rgba(193, 142, 69, 0.18), rgba(193, 142, 69, 0.10)); border: 1px solid rgba(193, 142, 69, 0.55); text-decoration: none; }
.orn-drawer__rewards-label { font-family: "IBM Plex Mono", "JetBrains Mono", monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #E4C88C; }
.orn-drawer__rewards-value { font-family: "IBM Plex Mono", "JetBrains Mono", monospace; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; color: #F6E7C1; }
.orn-drawer__link svg { width: 16px; height: 16px; flex: 0 0 auto; }
.orn-drawer__link--logout { border-bottom: 0; }
@media (min-width: 768px) {
.orn-header__utility { display: flex; }
.orn-header__nav-primary { display: flex; justify-content: flex-end; }
.orn-header__burger { display: none; }
.orn-drawer, .orn-drawer-backdrop { display: none; }
}
/* =============================================================
Hero — boarding pass
============================================================= */
.orn-hero { background: linear-gradient(165deg, var(--orn-navy) 0%, var(--orn-navy-2) 60%, var(--orn-navy-3) 100%); color: var(--orn-text-light); }
.orn-hero__inner { max-width: var(--orn-container); margin-inline: auto; padding: 70px var(--orn-gutter) 78px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
@media (min-width: 1024px) {
.orn-hero__inner { grid-template-columns: minmax(340px, 620px) 1fr; }
}
.orn-hero__copy { max-width: 820px; padding-bottom: 60px; }
.orn-hero__crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: rgba(244, 239, 227, 0.72); text-decoration: none; margin-bottom: 22px; }
.orn-hero__crumb:hover { color: var(--orn-white, rgb(201, 164, 92)); }
.orn-hero__crumb-arrow { font-size: 15px; line-height: 1; }
.orn-hero__eyebrow { font-family: var(--orn-body); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--orn-white); font-weight: 600; margin-bottom: 18px; }
.orn-hero__badge { display: inline-flex; align-items: center; gap: 11px; background: linear-gradient(100deg, rgb(228, 0, 43) 0%, rgb(255, 61, 46) 100%); padding: 9px 18px 9px 14px; border-radius: var(--r-pill); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 0.01em; margin-bottom: 16px; box-shadow: rgba(228, 0, 43, 0.34) 0 10px 26px; }
.orn-hero__badge strong { font-family: var(--orn-font-mono); letter-spacing: 0.14em; text-transform: uppercase; font-size: var(--orn-fs-eyebrow); font-weight: 700; background: rgba(255, 255, 255, 0.2); border-radius: var(--r-pill); padding: 4px 9px; }
.orn-hero__title { font-family: var(--orn-font-display); font-size: var(--orn-fs-hero); font-weight: 800; color: #fff; line-height: 1.02; margin-top: 16px; margin-bottom: 2px; }
.orn-hero__lede { color: #fff; max-width: 480px; margin-bottom: 30px; font-size: var(--orn-fs-lede); line-height: 1.5; }
.orn-hero__pillars { font-family: Anton, sans-serif; font-weight: 400; color: #fff; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: 0.01em; margin: 18px 0 22px; }
.orn-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.orn-hero__ctas .orn-btn--primary { background: var(--orn-navy) !important; color: #fff !important; }
.orn-hero__ctas .orn-btn--primary:hover { background: var(--orn-navy-2) !important; color: #fff !important; }
.orn-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 25px; border-radius: var(--button-radius-primary); font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; }
.orn-btn:hover { text-decoration: none; }
.orn-btn--primary { background: var(--orn-gold); color: var(--orn-navy); }
.orn-btn--primary:hover { background: var(--orn-gold-2); }
.orn-btn--ghost { background: var(--orn-text); color: var(--orn-text-light); border: 1px solid var(--orn-text); }
.orn-btn--ghost:hover { background: var(--orn-text); }
.orn-btn--dark { background: var(--orn-text); color: #fff; }
.orn-btn--dark:hover { background: var(--orn-text); }
.orn-btn--block { width: 100%; }
.orn-hero__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-top: var(--sp-6); font-family: var(--orn-font-mono); }
.orn-hero__stat-n { font-family: var(--orn-font-body); font-weight: 800; font-size: 32px; color: #fff; }
.orn-hero__stat-l { font-family: var(--orn-font-body); font-size: 13px; color: var(--orn-mute-2); margin-top: 2px; }
/* Boarding pass card */
.orn-pass { background: var(--orn-cream-2); color: var(--orn-navy); border-radius: 18px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.34) 0 30px 70px; width: 100%; max-width: 464px; margin-inline: auto; transform: rotate(1.3deg); }
.orn-pass__top { display: flex; align-items: center; justify-content: space-between; padding: 13px 22px; background: var(--orn-navy); color: var(--orn-text-light); }
.orn-pass__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--orn-font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.02em; color: #fff; }
.orn-pass__brand-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--orn-navy); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.orn-pass__brand-mark img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.orn-pass__brand-name { color: #fff; font-weight: 800; font-size: 20px; letter-spacing: 0.02em; }
.orn-pass__brand-divider { color: rgba(255, 255, 255, 0.3); font-weight: 400; margin: 0 2px; }
.orn-pass__brand-label { color: rgba(255, 255, 255, 0.65); font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; }
.orn-pass__badge { color: var(--orn-navy); font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; }
.orn-pass__route { position: relative; display: grid; grid-template-columns: 1fr; align-items: end; padding: 10px 24px 6px; gap: 2px; overflow: hidden; }
.orn-pass__route-cities { display: flex; justify-content: flex-start; gap: 18px; margin-top: 5px; grid-column: 1 / -1; }
.orn-pass__route::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 55%; background-image: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0.75) 22%, rgba(255, 255, 255, 0.4) 55%), url('https://cdn.yourholiday.me/static/img/backgrounds/orn-coach.jpg'); background-position: right center; background-size: cover; background-repeat: no-repeat; pointer-events: none; }
.orn-pass__route > * { position: relative; z-index: 1; }
.orn-pass__route-label { font-family: var(--orn-font-mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--orn-navy); font-weight: 700; grid-column: 1 / -1; }
.orn-pass__city { font-family: var(--orn-font-display); font-weight: 800; font-size: var(--orn-fs-pass-city); line-height: 0.9; }
.orn-pass__arrow { color: var(--orn-gold); font-size: 1.5rem; padding-bottom: 0.3rem; }
.orn-pass__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); padding: 14px 24px 8px; }
.orn-pass__meta-label { font-family: var(--orn-font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--orn-mute); font-weight: 600; margin-bottom: var(--sp-1); }
.orn-pass__meta-value { font-family: var(--orn-font-body); font-weight: 700; font-size: 13px; }
.orn-pass__tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0px 18px 4px; }
.orn-tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid rgb(238, 201, 198); color: var(--orn-ink-2); font-size: 11px; }
.orn-pass__bottom { border-top: 2px dashed rgb(218, 206, 180); margin-top: 10px; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.orn-pass__barcode { height: 36px; flex: 1; background: repeating-linear-gradient(90deg, var(--orn-navy) 0 2px, transparent 2px 4px, var(--orn-navy) 4px 5px, transparent 5px 9px); border-radius: 2px; }
.orn-pass__board { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--orn-navy); color: #fff; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); font-weight: 600; font-size: var(--orn-fs-small); }
/* Boarding pass — black override (hero card only) */
.orn-pass { color: rgb(15, 15, 15); }
.orn-pass__top { background: rgb(15, 15, 15); }
.orn-pass__city { color: rgb(15, 15, 15); }
.orn-pass__arrow { color: var(--orn-navy); }
.orn-pass__meta-value { color: rgb(15, 15, 15); }
.orn-pass__barcode { background: repeating-linear-gradient(90deg, rgb(15, 15, 15) 0 2px, transparent 2px 4px, rgb(15, 15, 15) 4px 5px, transparent 5px 9px); }
.orn-pass__board { background: rgb(15, 15, 15); }
/* =============================================================
Mobile — home hero + boarding pass (<= 640px)
The stacked hero column uses minmax(0,1fr) so it can shrink below
the boarding pass's intrinsic min-content width; without this the
pass (route cities + 3-col meta) props the whole page open and
every section reads clipped on a phone. Here we also scale the
title and pass to the viewport and let the pass fill the column.
============================================================= */
@media (max-width: 640px) {
/* Guard against phantom horizontal scroll on phones: the fixed drawer
backdrop (position:fixed; inset:0) stretches to any residual overflow
area, so clip the root on x. Inner scroll strips (.orn-depstrip,
.orn-jrygrid) keep their own overflow-x:auto and are unaffected. */
html, body { overflow-x: clip; }
/* Compact the header on phones — the 30px block padding + 50px logo made
it oversized. Tighten padding, shrink the logo, and align the burger. */
.orn-header__inner { padding: 14px 16px; gap: 12px; }
/* Ceiling only — the row shrinks a wide lockup on its own, proportionally,
because the height is auto rather than pinned. */
.orn-header__logo-img { max-height: var(--orn-logo-h, 35px); }
.orn-hero__inner { padding-top: 36px; padding-bottom: 48px; gap: 32px; }
.orn-hero__copy, .orn-hero__pass { min-width: 0; }
.orn-hero__title { font-size: clamp(34px, 11vw, 46px); }
.orn-hero__lede { font-size: 15px; margin-bottom: 24px; }
.orn-hero__ctas .orn-btn { flex: 1 1 auto; }
/* Keep the year range ("2026–27") on one line in its 3-col cell so it
doesn't break to "2026–" / "27"; scale the stat number to fit. */
.orn-hero__stats { gap: 14px; }
.orn-hero__stat-n { font-size: clamp(21px, 6.4vw, 30px); white-space: nowrap; }
.orn-hero__pass { justify-self: stretch; width: 100%; margin-bottom: 8px; }
.orn-pass { max-width: 100%; transform: none; }
.orn-pass__city { font-size: clamp(26px, 9vw, 40px); }
/* Badges: the single horizontal capsule overflows on phones and each
pill wraps to three lines. Reflow into a 2-column chip grid so all
four badges are visible without horizontal scroll; drop the vertical
row dividers and give each chip a subtle fill instead. */
.orn-hero__badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 100%; margin-top: 24px; padding: 10px; border-radius: 18px; overflow: visible; }
.orn-hero__badge-pill { max-width: none; padding: 9px 10px; gap: 8px; background: rgba(255, 255, 255, 0.06); border-radius: 12px; font-size: 12px; }
.orn-hero__badge-pill + .orn-hero__badge-pill { border-left: 0; }
.orn-hero__badge-ic { width: 16px; height: 16px; }
}
/* =============================================================
Section heads
============================================================= */
.orn-secthead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; text-align: left; }
.orn-secthead__title { font-family: var(--orn-font-display); font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; text-align: left; }
.orn-secthead__lede { color: rgb(92, 92, 92); flex: 1 1 320px; font-size: 16px; line-height: 1.5; text-align: left; margin-bottom: 0; }
.orn-secthead__eyebrow { font-family: var(--orn-font-mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--orn-navy); font-size: var(--orn-fs-tiny); font-weight: 700; display: block; margin-bottom: var(--sp-3); }
/* Small compact section head — used by the "Offers move with the seats"
strip that sits above the bigger "Departures filling now" grid. */
.orn-secthead--compact { margin-bottom: 18px; }
.orn-secthead--compact .orn-secthead__title { font-size: 22px; line-height: 1.2; }
.orn-secthead--compact .orn-secthead__lede { font-size: 14px; }
/* Stacked section head — title on its own line, lede beneath with
8px gap. Used for "All Europe journeys" / "Departures filling now"
where the lede is long. Reference data-dc-tpl="175"/"176":
16px lede, 8px margin-top, full width. */
.orn-secthead--stack { display: block; }
.orn-secthead--stack .orn-secthead__lede { margin-top: 8px; font-size: 16px; line-height: 1.5; flex: none; max-width: none; }
/* Row layout: title+lede on the left, scroll-nav arrows on the right, single line. */
.orn-secthead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.orn-secthead-row .orn-secthead { flex: 1 1 auto; margin-bottom: 0; }
.orn-secthead-row .orn-scroll-nav { flex: 0 0 auto; margin: 0; }
@media (max-width: 720px) {
.orn-secthead-row { flex-direction: column; align-items: stretch; gap: 12px; }
.orn-secthead-row .orn-scroll-nav { align-self: flex-end; }
}
/* Horizontal-scroll nudge arrows for card strips (Departures / Journeys /
Specials). Right-aligned circular buttons on a white ground with a soft
shadow. Wired to their target grid via data-orn-scroll-target + JS. */
.orn-scroll-nav { display: flex; justify-content: flex-end; gap: 10px; margin: 0 0 12px; }
.orn-scroll-nav__btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; color: rgb(20, 35, 59); font-family: Archivo, sans-serif; font-size: 18px; line-height: 1; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(10, 24, 55, 0.10), 0 1px 2px rgba(10, 24, 55, 0.06); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.orn-scroll-nav__btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(10, 24, 55, 0.14), 0 2px 4px rgba(10, 24, 55, 0.08); }
.orn-scroll-nav__btn:active:not(:disabled) { transform: translateY(0); }
.orn-scroll-nav__btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
@media (max-width: 900px) { .orn-scroll-nav { display: none; } }
/* =============================================================
Card grid — auto-fit reflow
============================================================= */
.orn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.orn-grid--2 { --orn-min: 320px; grid-template-columns: repeat(auto-fit, minmax(min(var(--orn-min), 100%), 1fr)); }
.orn-grid--3 { --orn-min: 260px; grid-template-columns: repeat(auto-fit, minmax(min(var(--orn-min), 100%), 1fr)); }
.orn-grid--4 { --orn-min: 240px; grid-template-columns: repeat(auto-fit, minmax(min(var(--orn-min), 100%), 1fr)); }
/* Generic card */
.orn-card { background: var(--orn-paper); border-radius: var(--r-card); box-shadow: var(--sh-card); overflow: hidden; border-top: 4px solid transparent; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.orn-card:hover { transform: translateY(-2px); box-shadow: var(--sh-raised); }
.orn-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.orn-card__eyebrow { font-family: var(--orn-font-mono); letter-spacing: 0.16em; text-transform: uppercase; font-size: var(--orn-fs-tiny); font-weight: 700; }
.orn-card__title { font-size: var(--orn-fs-h3); font-weight: 800; }
.orn-card__lede { color: var(--orn-ink-2); font-size: var(--orn-fs-small); }
.orn-card__footer { padding: var(--sp-5); padding-top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.orn-card--accent-red { border-top-color: var(--orn-red); }
.orn-card--accent-amber { border-top-color: var(--orn-amber); }
.orn-card--accent-green { border-top-color: var(--orn-green); }
.orn-card--accent-blue { border-top-color: var(--orn-blue); }
.orn-card--accent-purple { border-top-color: var(--orn-purple); }
.orn-card--accent-orange { border-top-color: var(--orn-orange); }
.orn-card--accent-teal { border-top-color: var(--orn-teal); }
.orn-card-save-chip { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: #E9F5EE; color: #1F7A3D; font-family: var(--orn-font-body); font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; }
.orn-price { display: flex; flex-direction: column; }
.orn-price__label { font-family: var(--orn-font-mono); font-size: var(--orn-fs-tiny); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orn-mute); }
.orn-price__amount { font-family: var(--orn-font-display); font-weight: 800; font-size: 26px; color: var(--orn-text); }
/* Tier counter cards — Offers move with the seats. Matches reference
data-dc-tpl="124" exactly: white paper, thick top border in the
tier's tone colour, thin cream side+bottom borders, 14px corners,
18x20 padding, flex column with 8px gap between rows. */
.orn-tier { background: var(--orn-paper); border-radius: 14px; padding: 18px 20px; border: 1px solid rgb(228, 221, 205); display: flex; flex-direction: column; gap: 8px; }
/* The eyebrow + count sit on one row, space-between. */
.orn-tier__topline { display: flex; align-items: center; justify-content: space-between; }
.orn-tier__eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--orn-navy); }
.orn-tier--amber .orn-tier__eyebrow, .orn-tier--amber .orn-tier__count { color: var(--orn-navy); }
.orn-tier--red .orn-tier__eyebrow, .orn-tier--red .orn-tier__count { color: var(--orn-red); }
.orn-tier__count { font-family: var(--orn-font-mono); font-weight: 600; font-size: 24px; line-height: 1; color: var(--orn-blue); }
.orn-tier__title { font-family: var(--orn-font-display); font-weight: 700; font-size: 18px; color: var(--orn-text); line-height: 1.2; margin: 0; }
.orn-tier__lede { color: rgb(90, 101, 115); font-size: 13.5px; line-height: 1.5; margin: 0; }
/* =============================================================
Sell-through bar
============================================================= */
.orn-bar { height: 8px; background: var(--orn-cream-2); border-radius: var(--r-pill); overflow: hidden; }
.orn-bar__fill { height: 100%; background: var(--orn-blue); border-radius: var(--r-pill); transition: width 0.4s ease; }
.orn-bar--green .orn-bar__fill { background: var(--orn-green); }
.orn-bar--amber .orn-bar__fill { background: var(--orn-amber); }
.orn-bar--red .orn-bar__fill { background: var(--orn-red); }
.orn-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 10px 0; font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orn-mute); }
.orn-legend__sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: var(--sp-2); vertical-align: middle; }
/* Section header for "Departures filling now" — title/lede on the left,
"View all promotions →" on the right. Same shape as .orn-rgnhead but
without the eyebrow line. */
.orn-filhead { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.orn-filhead__copy { flex: 1 1 320px; max-width: 640px; }
.orn-filhead__cta { color: var(--orn-red); font-family: var(--orn-font-body); font-weight: 700; font-size: 15px; white-space: nowrap; text-decoration: none; }
.orn-filhead__cta:hover { color: var(--orn-navy); }
/* Horizontal scroll strip — ~3.5 cards visible per viewport width, scrolls
horizontally with snap. Cards shrink to fit; nights suffix stripped so
the route label reads "Munich → Vienna" not "Munich 1N → Vienna 2N". */
.orn-depstrip { display: flex; gap: 16px; margin-top: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 4px; padding: 4px 4px 12px; -webkit-overflow-scrolling: touch; }
.orn-depstrip::-webkit-scrollbar { height: 8px; }
.orn-depstrip::-webkit-scrollbar-thumb { background: rgba(20, 35, 59, 0.18); border-radius: 6px; }
.orn-depstrip::-webkit-scrollbar-track { background: transparent; }
.orn-depstrip > .orn-depcard { flex: 0 0 300px; min-width: 240px; max-width: 300px; scroll-snap-align: start; }
@media (max-width: 768px) {
.orn-depstrip > .orn-depcard { flex: 0 0 calc((100% - 16px) / 1.4); }
}
/* Phones: show one big departure card (plus a peek of the next) instead of
~1.4 cramped cards, so the price + "Select seats" footer has room. The
strip goes full-bleed past the container gutter with a small inset so the
card can grow wider than the gutter-boxed width. Placed after the <=768
rule so it wins the cascade at narrow widths. */
@media (max-width: 640px) {
.orn-depstrip { scroll-padding-left: 16px; }
.orn-depstrip > .orn-depcard { flex: 0 0 100%; max-width: 280px; }
}
/* Shrink card typography slightly since cards are narrower in the strip. */
.orn-depstrip .orn-depcard__route { font-size: 18px; }
.orn-depstrip .orn-depcard__body { padding: 0px 18px 20px; }
.orn-depstrip .orn-depcard__price-amount { font-size: 20px; }
/* =============================================================
Departure card — "Departures filling now" grid.
Matches reference data-dc-tpl="146"–"173" exactly:
white paper, 1px cream border, 18px radius, soft shadow,
7px tier-tone strip at top, 20×22 padding, internal flex column.
============================================================= */
.orn-depcard { background: var(--orn-paper); border: 0; border-radius: var(--button-radius-card); overflow: hidden; box-shadow: rgba(20, 35, 59, 0.06) 0 10px 28px; display: flex; flex-direction: column; }
.orn-depcard__media { position: relative; aspect-ratio: 16 / 8; background: rgb(230, 226, 216) center/cover no-repeat; }
.orn-depcard__media--placeholder { background: linear-gradient(135deg, rgb(230, 226, 216), rgb(210, 204, 190)); }
.orn-depcard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.orn-depcard__code { position: absolute; top: 12px; left: 12px; font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.16em; font-weight: 700; color: rgb(15, 15, 15); background: rgba(255, 255, 255, 0.94); text-transform: uppercase; border-radius: 6px; padding: 5px 10px; box-shadow: rgba(15, 15, 15, 0.15) 0 2px 6px; }
.orn-flight-pill,
.orn-jrycard > .orn-flight-pill { position: absolute; display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--orn-navy); color: white; font-family: var(--orn-font-body); font-size: 10.5px; font-weight: 700; text-transform: uppercase; box-shadow: 0 2px 6px rgba(15, 15, 15, 0.18); z-index: 3; }
.orn-flight-pill--top-left { top: 12px; left: 12px; }
.orn-flight-pill--top-right { top: 12px; right: 12px; }
/* Mode badge (find-journey wizard) — mirrors flight-pill scaffolding; anchored
top-right so it clears the top-left Early-bird pill. */
.orn-find__mode-badge { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font-family: var(--orn-font-body); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; box-shadow: 0 2px 6px rgba(15, 15, 15, 0.18); z-index: 3; }
.orn-find__mode-badge--group { background: rgba(15, 15, 15, 0.82); color: #fff; }
.orn-find__mode-badge--private { background: #E4002B; color: #fff; }
/* Mode pill — universal for any surface showing depcards (idea/journey strips,
wizard grid). Anchored top-right so it clears the top-left Flights-Free pill.
Red for private, dark for group. */
.orn-mode-pill { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-family: var(--orn-font-body); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; box-shadow: 0 2px 6px rgba(15, 15, 15, 0.18); z-index: 3; }
.orn-mode-pill--private { background: #E4002B; color: #fff; }
.orn-mode-pill--group { background: rgba(15, 15, 15, 0.82); color: #fff; }
/* Inline pill inside the depcard meta row (Days · Countries · Flights Free) */
.orn-flight-pill--meta { position: static; margin-left: auto; align-self: center; box-shadow: none; }
.orn-depcard__chip { position: absolute; top: 12px; right: 12px; font-size: 12px; font-weight: 700; color: rgb(190, 63, 57); background: rgba(253, 233, 231, 0.96); border-radius: var(--r-pill); padding: 5px 12px; white-space: nowrap; box-shadow: rgba(15, 15, 15, 0.12) 0 2px 6px; }
.orn-depcard--amber .orn-depcard__chip { color: rgb(199, 122, 43); background: rgba(252, 240, 224, 0.96); }
.orn-depcard--green .orn-depcard__chip { color: rgb(14, 124, 134); background: rgba(224, 240, 242, 0.96); }
.orn-depcard--red .orn-depcard__chip { color: rgb(190, 63, 57); background: rgba(252, 232, 230, 0.96); }
.orn-depcard__route { display: flex; align-items: center; gap: 11px; margin-top: 14px; font-family: var(--orn-font-display); font-weight: 700; font-size: 24px; color: rgb(15, 15, 15); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.orn-depcard__route-arrow { color: var(--orn-gold); }
.orn-depcard__sub { font-size: 13px; color: rgb(90, 101, 115); margin-top: 3px; }
.orn-depcard__chain { font-size: 14px; color: rgb(90, 101, 115); margin-top: 6px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orn-depcard__desc { font-size: 13px; color: rgb(90, 101, 115); margin-top: 10px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.orn-depcard--journey .orn-depcard__route { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 20px; }
/* ── Journey poster card — full-bleed image with title/itinerary/price overlaid.
Applied on the journeys-home strip cards so a journey reads as an image the
way experience posters do. Mirrors .orn-jrycard's width + scrim treatment. */
.orn-depstrip > .orn-depcard--journey { flex: 0 0 240px; min-width: 240px; max-width: 240px; min-height: 360px; padding: 0; border-radius: var(--button-radius-card); overflow: hidden; position: relative; color: #fff; background: rgb(15, 15, 15) center/cover no-repeat; display: flex; flex-direction: column; box-shadow: rgba(0, 0, 0, 0.25) 0 12px 28px; }
.orn-depstrip > .orn-depcard--journey::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 78%); pointer-events: none; z-index: 0; }
.orn-depstrip > .orn-depcard--journey > * { position: relative; z-index: 1; }
/* Media is only used to hoist top pills — no visual box, no height. */
.orn-depcard--journey .orn-depcard__media { position: static; aspect-ratio: auto; background: transparent; padding: 0; height: 0; flex: 0 0 auto; }
.orn-depcard--journey .orn-depcard__media--placeholder { background: transparent; }
/* Move mode pill (PRIVATE / GROUP) into top-right instead of top-left. */
.orn-depcard--journey .orn-mode-pill { position: absolute; top: 14px; right: 14px; left: auto; white-space: nowrap; }
.orn-depcard--journey .orn-flight-pill--top-left { position: absolute; top: 14px; left: 14px; right: auto; width: auto; max-width: none; white-space: nowrap; }
/* Body pinned to bottom via margin-top:auto — sits over the darkest scrim area. */
.orn-depcard--journey .orn-depcard__body { padding: 22px; background: transparent; color: #fff; margin-top: auto; display: flex; flex-direction: column; }
.orn-depcard--journey .orn-depcard__route { font-family: var(--orn-font-heading-serif); font-weight: 500; font-size: 20px; line-height: 1.15; color: #fff; margin: auto 0 8px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
/* The city chain is the card's real differentiator, so it shows here too. Light over the
image scrim, matching the meta line below it rather than the light-background grey. */
.orn-depcard--journey .orn-depcard__chain { display: block; font-size: 12px; margin: 4px 0;
color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
/* Flat one-line meta ("9 Days · 13 countries") — mono, subtle. */
.orn-depcard--journey .orn-depcard__meta { margin: 0 0 8px; padding: 0; background: transparent; border: 0; font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
/* Price footer overlaid — no border-top, no white bg. */
.orn-depcard--journey .orn-depcard__foot { padding: 0; margin: 0; background: transparent; border-top: 0; }
.orn-depcard--journey .orn-depcard__price-label { display: none; }
.orn-depcard--journey .orn-depcard__price-amount { font-family: var(--orn-font-mono); font-size: 22px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
.orn-depcard--journey .orn-depcard__price-gross { font-family: var(--orn-font-mono); font-size: 12px; color: rgba(255, 255, 255, 0.7); text-decoration: line-through; }
.orn-depcard--journey .orn-depcard__cta { display: none; }
@media (max-width: 640px) {
.orn-depstrip > .orn-depcard--journey { flex: 0 0 78vw; max-width: 240px; }
}
.orn-depcard__meta { display: flex; gap: 10px; margin-top: 10px; padding: 10px 0; border-top: 1px solid rgb(237, 231, 218); border-bottom: 1px solid rgb(237, 231, 218); }
.orn-depcard__stat-k { font-family: var(--orn-font-body); font-size: 11px; letter-spacing: 0.06em; color: rgb(122, 133, 147); }
.orn-depcard__stat-v { font-family: var(--orn-font-body); font-size: 16px; font-weight: 600; color: rgb(15, 15, 15); margin-top: 3px; line-height: 1.1; }
.orn-depcard__date { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-family: var(--orn-font-mono); font-size: 13px; font-weight: 600; color: rgb(15, 15, 15); }
.orn-depcard__date-icon { color: rgb(242, 13, 22); }
.orn-depcard__bar-wrap { margin-top: 12px; }
.orn-depcard__bar { height: 9px; border-radius: 6px; background: rgb(237, 231, 218); overflow: hidden; }
.orn-depcard__bar-fill { height: 100%; border-radius: 6px; background: rgb(245, 138, 130); transition: width 0.4s ease; }
.orn-depcard--amber .orn-depcard__bar-fill { background: rgb(199, 122, 43); }
.orn-depcard--green .orn-depcard__bar-fill { background: rgb(14, 124, 134); }
.orn-depcard--red .orn-depcard__bar-fill { background: rgb(190, 63, 57); }
.orn-depcard__seats { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12.5px; color: rgb(122, 133, 147); font-family: var(--orn-font-mono); }
.orn-depcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-top: auto; padding-top: 10px; }
.orn-depcard__price-label { font-size: 12px; color: rgb(154, 138, 110); text-transform: none; letter-spacing: 0; }
.orn-depcard__price-amount { font-family: var(--orn-font-mono); font-size: 18px; font-weight: 600; color: rgb(15, 15, 15); line-height: 1.1; }
.orn-depcard__price-gross { font-family: var(--orn-font-mono); font-size: 13px; color: rgb(140, 140, 140); text-decoration: line-through; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.orn-depcard__savings-text { color: #1F7A3D; font-family: var(--orn-font-body); font-size: 12px; font-weight: 600; margin-top: 2px; line-height: 1.2; }
.orn-depcard__cta { display: inline-flex; align-items: center; background: rgb(15, 15, 15); color: var(--orn-text-light); font-weight: 700; font-size: 14px; border-radius: var(--button-radius-primary); padding: 12px 18px; white-space: nowrap; }
.orn-depcard__cta:hover { background: rgb(0, 0, 0); color: #fff; }
/* =============================================================
Journey card — "All Europe journeys" grid (8 master routes).
Matches reference data-dc-tpl="179"–"189" exactly:
white paper, 1px cream border + 5px LEFT accent in family colour,
16px radius, soft shadow, 20×20 padding, min-height 188, flex
column with price + family-coloured "View →" at the bottom.
============================================================= */
.orn-jrygrid { display: flex; gap: 20px; margin-top: 28px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; }
.orn-jrygrid::-webkit-scrollbar { display: none; }
.orn-jrycard { position: relative; flex: 0 0 240px; scroll-snap-align: start; cursor: pointer; background: rgb(15, 15, 15) center/cover no-repeat; padding: 26px; border-radius: var(--button-radius-card); display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px; color: #fff; text-decoration: none; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.25) 0 12px 28px; transition: transform 0.14s ease, box-shadow 0.14s ease; }
.orn-jrycard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 75%); pointer-events: none; }
.orn-jrycard > * { position: relative; z-index: 1; }
.orn-jrycard--image { background-color: rgb(15, 15, 15); }
.orn-jrycard:hover { transform: translateY(-2px); box-shadow: rgba(20, 35, 59, 0.1) 0 14px 28px; }
.orn-jrycard--blue { border-left-color: rgb(47, 128, 237); }
.orn-jrycard--blue2 { border-left-color: rgb(31, 111, 178); }
.orn-jrycard--red { border-left-color: rgb(192, 57, 43); }
.orn-jrycard--amber { border-left-color: var(--orn-amber); }
.orn-jrycard--green { border-left-color: var(--orn-green); }
.orn-jrycard--orange { border-left-color: var(--orn-orange); }
.orn-jrycard--purple { border-left-color: var(--orn-purple); }
.orn-jrycard--teal { border-left-color: var(--orn-teal); }
.orn-jrycard__chip { display: inline-flex; align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--orn-navy); color: #fff; font-family: var(--orn-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.orn-jrycard__title { font-family: var(--orn-font-display); font-weight: 800; font-size: 20px; line-height: 1.1; color: #fff; margin: 0 0 8px; }
.orn-jrycard__sub { font-size: 14px; color: rgba(255, 255, 255, 0.75); margin: 0 0 14px; line-height: 1.4; }
.orn-jrycard__pricerow { display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: 4px; color: rgba(255, 255, 255, 0.8); }
.orn-jrycard__price-label { font-family: var(--orn-font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }
.orn-jrycard__price-amount { font-family: var(--orn-font-display); font-size: 20px; font-weight: 800; color: #fff; }
.orn-jrycard__view { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 700; color: #fff; }
.orn-jrycard--blue .orn-jrycard__view { color: rgb(47, 128, 237); }
.orn-jrycard--blue2 .orn-jrycard__view { color: rgb(31, 111, 178); }
.orn-jrycard--red .orn-jrycard__view { color: rgb(192, 57, 43); }
.orn-jrycard--amber .orn-jrycard__view { color: var(--orn-amber); }
.orn-jrycard--green .orn-jrycard__view { color: var(--orn-green); }
.orn-jrycard--orange .orn-jrycard__view { color: var(--orn-orange); }
.orn-jrycard--purple .orn-jrycard__view { color: var(--orn-purple); }
.orn-jrycard--teal .orn-jrycard__view { color: var(--orn-teal); }
/* =============================================================
Wizard
============================================================= */
/* =============================================================
Wizard column — focused narrow column per ORN Find Your Trip mockup.
Container is 880px (not the 1200px site-wide container) so the
wizard reads as a guided flow, not a marketing page.
============================================================= */
.orn-wizard { background: var(--orn-cream); min-height: 100dvh; padding: var(--sp-6) 0 var(--sp-9); position: relative; }
/* Full-viewport wait overlay while narrow / must-see / results calls are in
flight. Keeps the flow honest — no "0 products" flash between commit and
response. */
.orn-wizard__wait { position: fixed; inset: 0; background: rgba(15, 15, 15, 0.35); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.orn-wizard__wait[hidden] { display: none; }
.orn-wizard__wait-inner { background: #fff; border-radius: 20px; padding: 28px 32px; box-shadow: 0 24px 60px rgba(15, 15, 15, 0.25); display: flex; align-items: center; gap: 16px; max-width: 320px; }
.orn-wizard__wait-spin { width: 24px; height: 24px; border-radius: 50%; border: 3px solid rgba(20, 35, 59, 0.15); border-top-color: var(--orn-red, #F20D16); animation: orn-wizard-spin 0.7s linear infinite; flex: 0 0 auto; }
.orn-wizard__wait-text { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15px; color: var(--orn-ink, rgb(20, 35, 59)); line-height: 1.4; }
@keyframes orn-wizard-spin { to { transform: rotate(360deg); } }
.orn-wizard__top { display: flex; align-items: center; justify-content: space-between; max-width: 1175px; margin-inline: auto; padding: 0 28px; font-size: 14px; }
.orn-wizard__back { color: var(--orn-ink-2); font-weight: 600; display: inline-flex; gap: var(--sp-2); }
.orn-wizard__counter { font-family: var(--orn-font-mono); font-size: 13px; color: rgb(122, 133, 147); letter-spacing: 0.08em; }
.orn-wizard__progress { height: 5px; background: rgb(224, 217, 201); /* warm-cream track — matches mockup */ max-width: 1175px; margin: 14px auto 0; border-radius: 4px; overflow: hidden; }
.orn-wizard__progress-fill { height: 100%; background: var(--orn-gold); border-radius: 4px; transition: width 0.25s ease; }
.orn-wizard__pillrow { max-width: 1175px; margin: 22px auto 0; padding: 0 28px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.orn-wizard__matchpill { background: rgb(251, 238, 237); color: rgb(201, 10, 18); border-radius: var(--r-pill); padding: 6px 14px; font-family: var(--orn-font-mono); font-size: 15px; font-weight: 600; }
.orn-wizard__hint { color: var(--orn-mute); font-size: 13.5px; }
.orn-wizard__card { max-width: 1175px; margin: 18px auto 0; border-radius: 20px; min-height: 300px; display: flex; flex-direction: column; }
/* CRITICAL: the wizard JS toggles steps via `el.hidden = true/false`. The
user-agent stylesheet applies `[hidden] { display: none }` at the lowest
specificity (0,0,0,1), and the rule above sets `display: flex` at class
specificity (0,0,1,0) — which wins, leaving every step rendered. Without
this override every step card stacks vertically and Continue appears to
do nothing. Scope to wizstep so it can't accidentally affect any
non-wizard element that happens to be hidden + .orn-wizard__card. */
.orn-wizstep[hidden] { display: none !important; }
@media (max-width: 640px) {
/* The card carried no horizontal padding, so step content (eyebrow,
question, lede, options) sat flush against the screen edge and the
sticky nav — whose negative margins already assume a var(--sp-5)
gutter — overflowed. Give the card that gutter and align the top /
progress / pill rows to the same 24px so everything lines up. */
.orn-wizard__card { border-radius: 16px; padding-inline: var(--sp-5); }
.orn-wizard__top, .orn-wizard__pillrow { padding-left: var(--sp-5); padding-right: var(--sp-5); }
.orn-wizard__progress { margin-inline: var(--sp-5); }
}
.orn-wizard__step-eyebrow { font-family: var(--orn-font-mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(242, 13, 22); /* darker gold — mockup */ font-weight: 600; margin-bottom: 0; }
.orn-wizard__question { font-family: var(--orn-font-display); font-weight: 800; font-size: 34px; line-height: 1.1; margin: 10px 0 8px; }
.orn-wizard__lede { color: rgb(90, 101, 115); font-size: 15.5px; margin-bottom: 0; }
/* Options are a chip-wrap (flex), not a column grid — matches mockup */
.orn-wizard__options { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.orn-wizard__option { text-align: left; cursor: pointer; background: var(--orn-paper); border: 2px solid rgb(243, 243, 243); color: var(--orn-text); border-radius: 14px; padding: 16px 22px; min-width: 190px; display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: 17px; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.orn-wizard__option:hover { border-color: var(--orn-gold); }
.orn-wizard__option[aria-pressed="true"], .orn-wizard__option.is-selected { border-color: var(--orn-navy); }
.orn-wizard__option-title { font-family: var(--orn-font-body); font-weight: 600; font-size: 17px; color: var(--orn-text); }
.orn-wizard__option-sub { color: rgb(154, 138, 110); font-size: 12.5px; font-weight: 500; }
.orn-wizard__option--coming { opacity: 0.6; cursor: not-allowed; }
.orn-wizard__option--coming:hover { border-color: rgb(243, 243, 243); }
.orn-wizard__option-badge { display: inline-block; margin-top: 6px; font-family: var(--orn-font-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orn-navy); background: rgb(253, 240, 239); border: 1px solid rgb(246, 203, 199); padding: 3px 8px; border-radius: 999px; align-self: flex-start; }
.orn-wizard__nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: 30px; }
.orn-wizard__nav .orn-btn { min-height: 48px; border-radius: 11px; font-size: 15px; font-weight: 700; padding: 13px 30px; }
/* Disabled Continue — warm-stone fill with white text, per mockup. Scoped
to wizard nav so site-wide .orn-btn--dark[disabled] isn't affected. */
.orn-wizard__nav .orn-btn--dark[disabled], .orn-wizard__nav .orn-btn--dark:disabled { background: rgb(201, 194, 178); color: #ffffff; cursor: not-allowed; border-color: rgb(201, 194, 178); box-shadow: none; }
.orn-wizard__skip { color: var(--orn-mute); text-decoration: none; font-size: 13px; }
.orn-wizard__counter { margin-left: auto; color: var(--orn-mute); font-family: var(--orn-font-mono); font-size: 13px; }
/* Mobile step-content overrides. Placed AFTER the base .orn-wizard__question /
__options / __option rules above so they win on equal specificity: scale the
heading down for phones and let options fill the column instead of holding a
190px min-width. */
@media (max-width: 640px) {
.orn-wizard__question { font-size: clamp(24px, 6.8vw, 30px); }
.orn-wizard__options { margin-top: 20px; gap: 10px; }
.orn-wizard__option { min-width: 0; width: 100%; padding: 14px 16px; }
}
@media (max-width: 767px) {
.orn-wizard__nav { position: sticky; bottom: 0; background: var(--orn-paper); margin: var(--sp-6) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--orn-line); z-index: 5; }
.orn-wizard__nav .orn-btn--primary { flex: 1; }
}
/* Result cards (wizard step 4 results + departures-filling-now).
Numbers pin to ~/Downloads/Results Listing.html so the live render
matches the design mockup exactly. Card is a wrapping flex row (not
grid) so columns stack cleanly at narrow widths; the 5px LEFT border
carries the tone accent while the other sides stay warm-cream. */
.orn-result { background: var(--orn-paper); border: 1px solid rgb(243, 243, 243); border-radius: 16px; padding: 20px 24px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; box-shadow: none; }
.orn-result--green { border-left-color: rgb(30, 122, 78); }
.orn-result--amber { border-left-color: var(--orn-amber); }
.orn-result--red { border-left-color: var(--orn-red); }
/* Left column — route + sub + Includes pill */
.orn-result > div:first-child { min-width: 190px; flex: 1 1 0; }
.orn-result__route { display: flex; align-items: center; gap: 10px; font-family: var(--orn-font-display); font-weight: 800; font-size: 21px; color: var(--orn-text); line-height: 1; }
.orn-result__route-arrow { display: inline-block; vertical-align: middle; color: #F20D16; }
.orn-result__sub { font-size: 13.5px; color: rgb(90, 101, 115); /* slate, NOT warm-mute */ margin-top: 4px; }
.orn-result__tag { display: inline-flex; align-items: center; gap: 7px; background: rgb(251, 238, 237); color: rgb(27, 94, 60); padding: 5px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; margin-top: 10px; }
/* Middle column — date + fill bar + sell label */
.orn-result__date { font-family: var(--orn-font-mono); font-size: 15px; font-weight: 600; color: var(--orn-text); }
.orn-result__sell { font-family: var(--orn-font-mono); font-size: 12px; font-weight: 700; margin-top: 5px; color: var(--orn-mute); /* mockup uses Hanken-cased "Selling well" — NOT uppercase */ text-transform: none; letter-spacing: 0; }
.orn-result__sell--green { color: rgb(30, 122, 78); }
.orn-result__sell--amber { color: var(--orn-amber); }
.orn-result__sell--red { color: var(--orn-red); }
.orn-result__sell--blue { color: rgb(224, 106, 97); }
/* Right column — price + Select seats CTA */
.orn-price { text-align: right; min-width: 100px; display: flex; flex-direction: column; }
.orn-price__label { font-family: var(--orn-font-body); /* NOT mono caps */ font-size: 11px; color: rgb(154, 138, 110); letter-spacing: 0; text-transform: none; /* lowercase "per person" */ }
.orn-price__amount { font-family: var(--orn-font-mono); font-size: 22px; font-weight: 600; color: var(--orn-text); }
.orn-result .orn-btn--dark { background: rgb(20, 35, 59); color: rgb(244, 239, 227); border-radius: 10px; padding: 13px 22px; font-weight: 700; font-size: 14px; white-space: nowrap; }
/* Scoped fill-bar override for the result card — match Results Listing.html
exactly (8px tall, warmer track, fixed 160px width on the middle column). */
.orn-result .orn-bar { height: 8px; width: 160px; background: rgb(237, 231, 218); border-radius: 6px; margin-top: 8px; }
.orn-result .orn-bar__fill { background: rgb(37, 99, 168); border-radius: 6px; }
.orn-result .orn-bar--green .orn-bar__fill { background: rgb(30, 122, 78); }
/* =============================================================
Journey detail — header card + rung cards + tabs
============================================================= */
.orn-journey-hero { background: var(--orn-navy); color: #f0e6c8; border-radius: var(--r-card); padding: clamp(1.5rem, 4vw, 3rem); border-left: 5px solid var(--orn-red); margin-block: clamp(1.5rem, 4vw, 2.5rem); }
.orn-journey-hero__title { font-size: var(--orn-fs-hero); color: #fff; margin-bottom: var(--sp-3); }
.orn-journey-hero__sub { color: rgb(195, 204, 214); margin-bottom: var(--sp-5); }
.orn-journey-hero__copy { color: rgba(240, 230, 200, 0.72); margin-bottom: var(--sp-5); max-width: 56ch; }
.orn-journey-hero__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.orn-journey-hero__chip { padding: var(--sp-2) var(--sp-4); border: 1px solid rgba(240, 230, 200, 0.28); border-radius: var(--r-pill); font-family: var(--orn-font-mono); font-size: var(--orn-fs-small); color: rgba(240, 230, 200, 0.85); }
.orn-journey-hero__strip { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); background: rgba(255, 255, 255, 0.05); border-radius: var(--r-soft); padding: var(--sp-4); border: 1px solid rgba(240, 230, 200, 0.10); }
@media (min-width: 768px) {
.orn-journey-hero__strip { grid-template-columns: auto 1fr; align-items: center; }
}
.orn-journey-hero__strip-eyebrow { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--orn-blue); }
/* Rung cards */
.orn-rungs { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-block: clamp(1rem, 3vw, 2.5rem); }
@media (min-width: 768px) {
.orn-rungs { grid-template-columns: repeat(3, 1fr); }
}
.orn-rung { position: relative; background: var(--orn-paper); border-radius: var(--r-card); padding: var(--sp-6); box-shadow: var(--sh-card); border: 2px solid transparent; display: flex; flex-direction: column; gap: var(--sp-3); cursor: pointer; }
.orn-rung--selected { border-color: var(--orn-red); }
.orn-rung--recommended { box-shadow: var(--sh-raised); }
.orn-rung__recommended-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--orn-gold); color: var(--orn-navy); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
.orn-rung__topline { display: flex; align-items: center; justify-content: space-between; font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; }
.orn-rung__tier { color: var(--orn-red); }
.orn-rung__code { color: var(--orn-mute); }
.orn-rung__title { font-family: var(--orn-font-display); font-weight: 800; font-size: var(--orn-fs-h2); color: var(--orn-navy); }
.orn-rung__route { color: var(--orn-ink-2); font-size: var(--orn-fs-body); }
.orn-rung__lede { color: var(--orn-ink-2); flex: 1; }
.orn-rung__price-row { display: flex; align-items: end; justify-content: space-between; margin-top: var(--sp-4); }
.orn-rung__price-row .orn-price__amount { font-size: 1.75rem; }
.orn-rung__select-link { font-family: var(--orn-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--orn-gold); font-size: var(--orn-fs-small); }
.orn-rung--selected .orn-rung__select-link { color: var(--orn-red); }
/* Tabs */
.orn-tabs { display: flex; gap: var(--sp-2); overflow-x: auto; padding-block: var(--sp-3); }
.orn-tabs::-webkit-scrollbar { display: none; }
.orn-tab { padding: var(--sp-3) var(--sp-5); border: 1px solid var(--orn-line); background: var(--orn-paper); border-radius: var(--r-pill); font-weight: 500; white-space: nowrap; color: var(--orn-ink); }
.orn-tab--active { background: rgb(15, 15, 15); color: #fff; border-color: rgb(15, 15, 15); }
.orn-tabpanel { display: none; }
.orn-tabpanel--active { display: block; }
/* Detail blocks */
.orn-info-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-5); }
@media (min-width: 768px) {
.orn-info-grid { grid-template-columns: repeat(2, 1fr); }
}
.orn-info-row { padding: var(--sp-4) 0; border-top: 1px solid var(--orn-line); }
.orn-info-row__label { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orn-gold); margin-bottom: var(--sp-1); }
.orn-info-row__value { font-weight: 600; }
/* Itinerary timeline */
.orn-itinerary { padding-left: var(--sp-5); position: relative; margin-top: var(--sp-5); }
.orn-itinerary::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 1px; background: var(--orn-line-2); }
.orn-itinerary__day { position: relative; padding-block: var(--sp-4); padding-left: var(--sp-5); }
.orn-itinerary__day::before { content: ""; position: absolute; left: -2px; top: var(--sp-5); width: 14px; height: 14px; border-radius: 50%; background: var(--orn-gold); border: 3px solid var(--orn-cream); }
.orn-itinerary__day-eyebrow { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--orn-gold); }
.orn-itinerary__day-title { font-size: var(--orn-fs-h3); margin-block: var(--sp-2); }
.orn-itinerary__day-desc { color: var(--orn-ink-2); font-size: var(--orn-fs-small); }
.orn-itinerary__meals { display: inline-flex; gap: var(--sp-1); margin-top: var(--sp-2); }
.orn-itinerary__meal { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: rgba(47, 122, 79, 0.12); color: var(--orn-green); font-size: 0.7rem; font-weight: 700; font-family: var(--orn-font-mono); }
/* Calendar (dates tab) */
.orn-cal { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin-top: var(--sp-5); }
@media (min-width: 768px) {
.orn-cal { grid-template-columns: repeat(2, 1fr); }
}
.orn-cal__month { background: var(--orn-paper); border: 1px solid var(--orn-line); border-radius: var(--r-card); padding: var(--sp-5); }
.orn-cal__month-title { font-family: var(--orn-font-display); font-size: 1.2rem; margin-bottom: var(--sp-3); }
.orn-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-family: var(--orn-font-mono); font-size: 0.78rem; }
.orn-cal__dow { text-align: center; color: var(--orn-mute); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; padding-block: var(--sp-2); }
.orn-cal__cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--r-tile); background: var(--orn-cream-2); color: var(--orn-mute); }
.orn-cal__cell--best { background: var(--orn-green); color: #fff; }
.orn-cal__cell--good { background: var(--orn-amber); color: #fff; }
.orn-cal__cell--rising { background: var(--orn-orange); color: #fff; }
.orn-cal__cell--last { background: var(--orn-red); color: #fff; }
/* Included tiles */
.orn-incl { background: var(--orn-paper); border-radius: var(--r-card); padding: var(--sp-5); box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: var(--sp-2); }
.orn-incl__check { color: var(--orn-green); font-weight: 700; display: inline-flex; gap: var(--sp-2); align-items: center; }
.orn-incl__title { font-family: var(--orn-font-display); font-size: 1.05rem; color: var(--orn-navy); }
.orn-incl__lede { color: var(--orn-ink-2); font-size: var(--orn-fs-small); }
/* Tour manager card */
.orn-tm { background: var(--orn-navy); color: #f0e6c8; border-radius: var(--r-card); padding: clamp(1.5rem, 4vw, 2.5rem); margin-top: clamp(1.5rem, 4vw, 2.5rem); display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6); align-items: start; }
.orn-tm__avatar { width: 96px; height: 96px; border-radius: 50%; background: var(--orn-gold); color: var(--orn-navy); display: grid; place-items: center; font-family: var(--orn-font-display); font-weight: 900; font-size: 1.5rem; }
.orn-tm__eyebrow { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--orn-gold); }
.orn-tm__name { color: #fff; font-size: var(--orn-fs-h2); margin: var(--sp-2) 0; }
.orn-tm__role { color: rgba(240, 230, 200, 0.72); margin-bottom: var(--sp-4); }
.orn-tm__bio { color: rgba(240, 230, 200, 0.82); margin-bottom: var(--sp-4); max-width: 64ch; }
.orn-tm__quote { border-left: 3px solid var(--orn-gold); padding-left: var(--sp-4); margin: var(--sp-4) 0; color: #f0e6c8; font-style: italic; }
.orn-tm__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid rgba(240, 230, 200, 0.10); }
.orn-tm__stat-n { font-family: var(--orn-font-display); font-size: 1.6rem; color: #fff; }
.orn-tm__stat-l { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240, 230, 200, 0.55); margin-top: var(--sp-1); }
@media (max-width: 640px) {
.orn-tm { grid-template-columns: 1fr; text-align: center; }
.orn-tm__avatar { margin-inline: auto; }
.orn-tm__quote { text-align: left; }
}
/* Floating WhatsApp / Co-pilot CTAs */
.orn-wa { position: fixed; bottom: var(--sp-5); right: var(--sp-5); width: 52px; height: 52px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: var(--sh-raised); z-index: 30; }
.orn-copilot-fab { position: fixed; bottom: calc(var(--sp-5) + 64px); right: var(--sp-5); background: var(--orn-navy); color: var(--orn-gold); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); box-shadow: var(--sh-raised); z-index: 30; display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--orn-font-mono); font-size: var(--orn-fs-small); letter-spacing: 0.12em; text-transform: uppercase; }
@media (min-width: 1024px) {
.orn-copilot-fab { display: none; } /* desktop uses the panel below */
}
/* Hide the floating co-pilot pill on phones — it overlaps page content. The
co-pilot is still reachable via the inline .orn-jd__copilot-card, which
opens the same panel. */
@media (max-width: 767px) {
.orn-copilot-fab { display: none; }
}
/* Co-pilot side panel (desktop) */
.orn-copilot-panel { display: none; background: var(--orn-navy); color: #f0e6c8; border-radius: var(--r-card); padding: var(--sp-5); box-shadow: var(--sh-raised); }
@media (min-width: 1024px) {
.orn-copilot-panel { display: flex; flex-direction: column; gap: var(--sp-3); position: sticky; top: 100px; }
}
.orn-copilot-panel__eyebrow { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--orn-gold); }
.orn-copilot-panel__title { color: #fff; font-size: var(--orn-fs-h3); }
.orn-copilot-panel__lede { color: rgb(195, 204, 214); font-size: 0.95rem; }
.orn-copilot-panel__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.orn-copilot-panel__chip { padding: var(--sp-2) var(--sp-4); border: 1px solid rgba(240, 230, 200, 0.28); border-radius: var(--r-pill); font-size: var(--orn-fs-small); color: rgba(240, 230, 200, 0.85); }
.orn-copilot-panel__cta { background: var(--orn-gold); color: var(--orn-navy); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-pill); font-weight: 700; text-align: center; margin-top: var(--sp-3); }
/* =============================================================
Co-pilot modal / bottom-sheet
============================================================= */
.orn-copilot { position: fixed; inset: 0; background: rgba(10, 24, 55, 0.55); backdrop-filter: blur(4px); z-index: 100; display: none; align-items: end; }
.orn-copilot.is-open { display: flex; }
@media (min-width: 1024px) {
.orn-copilot { align-items: center; justify-content: center; }
}
.orn-copilot__panel { background: #0a0f1f; color: #f0e6c8; width: 100%; max-height: 92dvh; border-radius: 24px 24px 0 0; box-shadow: var(--sh-sheet); display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 1024px) {
.orn-copilot__panel { max-width: 720px; max-height: 80vh; border-radius: var(--r-card); }
}
.orn-copilot__handle { width: 36px; height: 4px; background: rgba(240, 230, 200, 0.25); border-radius: 2px; margin: var(--sp-3) auto var(--sp-2); }
@media (min-width: 1024px) {
.orn-copilot__handle { display: none; }
}
.orn-copilot__top { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid rgba(240, 230, 200, 0.10); }
.orn-copilot__title { color: #fff; font-size: var(--orn-fs-h3); }
.orn-copilot__price { font-family: var(--orn-font-display); color: var(--orn-gold); font-size: 1.4rem; text-align: right; line-height: 1.1; }
.orn-copilot__price-meta { font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240, 230, 200, 0.55); }
.orn-copilot__close { color: rgba(240, 230, 200, 0.7); font-size: 1.5rem; padding: var(--sp-2); }
.orn-copilot__topics { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid rgba(240, 230, 200, 0.10); }
.orn-copilot__topics::-webkit-scrollbar { display: none; }
.orn-copilot__topic { padding: var(--sp-2) var(--sp-4); border: 1px solid rgba(240, 230, 200, 0.28); border-radius: var(--r-pill); color: rgb(195, 204, 214); white-space: nowrap; font-size: var(--orn-fs-small); }
.orn-copilot__topic--active { background: rgba(200, 156, 80, 0.16); color: var(--orn-gold); border-color: rgba(200, 156, 80, 0.4); }
.orn-copilot__stream { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.orn-copilot__msg { color: rgba(240, 230, 200, 0.85); }
.orn-copilot__chips { padding: var(--sp-3) var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2); border-top: 1px solid rgba(240, 230, 200, 0.10); }
.orn-copilot__chip { padding: var(--sp-3) var(--sp-4); border: 1px solid rgba(240, 230, 200, 0.28); border-radius: var(--r-pill); color: rgba(240, 230, 200, 0.92); font-size: var(--orn-fs-small); }
.orn-copilot__inputbar { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5) var(--sp-5); border-top: 1px solid rgba(240, 230, 200, 0.10); }
.orn-copilot__input { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(240, 230, 200, 0.10); border-radius: var(--r-pill); color: #f0e6c8; padding: var(--sp-3) var(--sp-5); font-family: var(--orn-font-body); font-size: var(--orn-fs-small); }
.orn-copilot__input::placeholder { color: rgba(240, 230, 200, 0.4); font-style: italic; }
.orn-copilot__send { width: 44px; height: 44px; border-radius: 50%; background: rgba(200, 156, 80, 0.16); color: var(--orn-gold); display: grid; place-items: center; border: 1px solid rgba(200, 156, 80, 0.4); font-size: 1.2rem; }
/* Lock body scroll when sheet is open */
body.orn-no-scroll { overflow: hidden; touch-action: none; }
/* =============================================================
Specials / Beyond Europe / Van tours promo
============================================================= */
/* ORN Specials — small cards: 4px tone top + 1px cream sides+bottom,
16px radius, 20×20×18 padding, 190 min-height, soft shadow.
Reference data-dc-tpl="195"–"199". */
.orn-spcl-grid { display: flex; gap: 20px; margin-top: 28px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; }
.orn-spcl-grid::-webkit-scrollbar { display: none; }
.orn-spcl { position: relative; flex: 0 0 340px; scroll-snap-align: start; cursor: pointer; background: rgb(15, 15, 15) center/cover no-repeat; border: none; border-radius: var(--button-radius-card); padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; color: #fff; text-decoration: none; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.25) 0 12px 28px; transition: transform 0.14s ease, box-shadow 0.14s ease; }
.orn-spcl::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 75%); pointer-events: none; }
.orn-spcl > * { position: relative; z-index: 1; }
.orn-spcl:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.4) 0 18px 36px; }
.orn-spcl__chip { display: inline-flex; align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--orn-navy); color: #fff; font-family: var(--orn-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.orn-spcl__title { font-family: var(--orn-font-display); font-weight: 800; font-size: 26px; line-height: 1.1; color: #fff; margin: 0 0 8px; }
.orn-spcl__lede { font-size: 14px; color: rgba(255, 255, 255, 0.75); margin: 0 0 14px; line-height: 1.4; }
.orn-spcl__view { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 700; color: #fff; }
/* Legacy alias for older markup emitted by cached JS */
.orn-spcl__eyebrow { font-family: var(--orn-font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: #fff; }
.orn-spcl__explore { font-size: 14px; font-weight: 700; margin-top: auto; padding-top: 12px; color: #fff; }
/* ============================================================
Beyond Europe (worldwide) section
Reference: data-dc-tpl="200"–"216". Section head is a flex row
with "ORN Worldwide · Launching 2026–27" eyebrow + "Beyond Europe"
title + lede on the left, and a navy "Find your region →" CTA on
the right (flex-end aligned). Card grid is 3-col.
============================================================ */
.orn-rgnhead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.orn-rgnhead__copy { flex: 1 1 320px; }
.orn-rgnhead__eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.22em; color: var(--orn-navy); font-weight: 600; text-transform: uppercase; }
.orn-rgnhead__title { font-family: var(--orn-font-display); font-weight: 800; font-size: 34px; color: rgb(15, 15, 15); line-height: 1.05; margin: 10px 0 0; }
.orn-rgnhead__lede { font-size: 16px; color: rgb(90, 101, 115); margin: 8px 0 0; max-width: 640px; line-height: 1.5; }
.orn-rgnhead__cta { display: inline-flex; align-items: center; background: rgb(15, 15, 15); color: #fff; font-weight: 700; font-size: 15px; border-radius: 12px; padding: 13px 22px; white-space: nowrap; }
.orn-rgnhead__cta:hover { background: rgb(0, 0, 0); color: #fff; }
.orn-rgngrid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
@media (min-width: 768px) {
.orn-rgngrid { grid-template-columns: repeat(3, 1fr); }
}
.orn-rgn { cursor: pointer; background: var(--orn-paper); border: 1px solid rgb(228, 221, 205); border-radius: 0; padding: 20px 20px 18px; display: flex; flex-direction: column; min-height: 166px; box-shadow: rgba(20, 35, 59, 0.05) 0 8px 22px; transition: transform 0.14s ease, box-shadow 0.14s ease; }
.orn-rgn:hover { transform: translateY(-2px); box-shadow: rgba(20, 35, 59, 0.1) 0 14px 28px; }
.orn-rgn__topline { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.orn-rgn__title { font-family: var(--orn-font-display); font-weight: 700; font-size: 21px; color: rgb(15, 15, 15); line-height: 1.15; margin: 0; }
.orn-rgn__soon { font-family: var(--orn-font-mono); font-size: 10.5px; letter-spacing: 0.1em; border: 1px solid rgb(211, 84, 0); color: rgb(211, 84, 0); border-radius: var(--r-pill); padding: 4px 9px; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.orn-rgn--green .orn-rgn__soon { border-color: rgb(39, 174, 96); color: rgb(39, 174, 96); }
.orn-rgn--purple .orn-rgn__soon { border-color: rgb(142, 68, 173); color: rgb(142, 68, 173); }
.orn-rgn--red .orn-rgn__soon { border-color: var(--orn-red); color: var(--orn-red); }
.orn-rgn--teal .orn-rgn__soon { border-color: var(--orn-teal); color: var(--orn-teal); }
.orn-rgn__lede { font-size: 14px; color: rgb(90, 101, 115); margin: 6px 0 0; line-height: 1.45; }
.orn-rgn__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 16px; }
.orn-rgn__tag { font-size: 12px; color: rgb(58, 70, 84); background: rgb(243, 243, 243); border-radius: var(--r-pill); padding: 5px 11px; }
/* Van Tours promo — reference data-dc-tpl="217"–"235":
2-col flex card on navy with rounded 22px corners; image on the
left (no padding, object-fit cover), body on the right with 42×46
padding. Title 40px Archivo 800; gold CTA pill; 3 mono stats below. */
.orn-van { background: #fff; color: var(--orn-text-light); border-radius: 22px; overflow: hidden; display: flex; flex-wrap: wrap; }
.orn-van__image { flex: 1 1 300px; position: relative; min-height: 360px; background-size: cover; background-position: 50% 42%; background-repeat: no-repeat; background-color: var(--orn-navy); }
.orn-van__body { flex: 2 1 440px; padding: 42px 46px; display: flex; flex-direction: column; justify-content: center; gap: 0; }
/* Immersive private-vans card — dark bg with full-bleed van photo on the right,
left copy pane with red-outline chip, big title, small "FROM · PP" price, red CTA. */
.orn-van--immersive { position: relative; background: rgb(15, 15, 15) var(--orn-van-image) center right / cover no-repeat; border-radius: 22px; overflow: hidden; min-height: 440px; padding: 48px 52px; display: block; }
.orn-van--immersive::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(15, 15, 15) 0%, rgba(15, 15, 15, 0.9) 32%, rgba(15, 15, 15, 0.35) 55%, rgba(15, 15, 15, 0) 78%); pointer-events: none; z-index: 1; }
.orn-van--immersive .orn-van__body { position: relative; z-index: 2; max-width: 52%; padding: 0; flex: none; gap: 0; }
.orn-van--immersive .orn-van__chip { display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; gap: 8px; padding: 8px 18px; border: 1px solid rgba(242, 13, 22, 0.7); border-radius: 999px; color: #fff; font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; margin-bottom: 22px; }
.orn-van--immersive .orn-van__chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orn-navy); flex-shrink: 0; }
.orn-van--immersive .orn-van__eyebrow { color: var(--orn-navy); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; margin: 0 0 12px; }
.orn-van--immersive .orn-van__title { color: #fff; font-family: var(--orn-font-display); font-size: 56px; line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 20px; }
.orn-van--immersive .orn-van__title-line { display: block; font-family: var(--orn-font-heading); }
.orn-van--immersive .orn-van__lede { color: rgba(255, 255, 255, 0.78); font-size: 16px; line-height: 1.6; max-width: 460px; margin: 0 0 28px; }
.orn-van--immersive .orn-van__price { margin-bottom: 24px; }
.orn-van--immersive .orn-van__price-k { font-family: var(--orn-font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--orn-navy); margin-bottom: 4px; }
.orn-van--immersive .orn-van__price-v { font-family: var(--orn-font-display); font-size: 20px; font-weight: 800; color: #fff; }
.orn-van--immersive .orn-van__cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; background: var(--orn-navy); color: #fff; border: none; border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none; margin: 0; box-shadow: 0 10px 26px rgba(242, 13, 22, 0.28); }
.orn-van--immersive .orn-van__cta:hover { background: var(--orn-navy-2); }
.orn-van__stats--hidden { display: none !important; }
@media (max-width: 900px) {
.orn-van--immersive { padding: 36px 28px; min-height: 380px; }
.orn-van--immersive .orn-van__body { max-width: 100%; }
.orn-van--immersive .orn-van__title { font-size: 40px; }
.orn-van--immersive::before { background: linear-gradient(to bottom, rgba(15, 15, 15, 0.4) 0%, rgba(15, 15, 15, 0.9) 65%); }
}
.orn-van__eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.24em; color: var(--orn-navy); font-weight: 600; text-transform: uppercase; }
.orn-van__title { font-family: var(--orn-font-display); font-weight: 800; color: rgb(15, 15, 15); font-size: 40px; line-height: 1.04; margin: 12px 0 0; }
.orn-van__lede { color: rgb(92, 92, 92); font-size: 17px; line-height: 1.55; max-width: 520px; margin: 12px 0 0; }
.orn-van__cta { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 22px; background: #fff; color: var(--orn-navy); border: 1px solid var(--orn-navy); font-weight: 700; font-size: 16px; border-radius: 12px; padding: 14px 26px; }
.orn-van__cta:hover { background: var(--orn-cream); }
.orn-van__stats { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 30px; font-family: var(--orn-font-mono); }
.orn-van__stat-n { font-size: 32px; font-weight: 600; color: #111; line-height: 1; }
.orn-van__stat-l { font-size: 12px; color: rgb(92, 92, 92); letter-spacing: 0.06em; margin-top: 3px; text-transform: uppercase; }
/* =============================================================
Why ORN — "Europe on ORN wheels" section.
Reference data-dc-tpl="236"–"295": deeper navy bg, 74px/80px
padding, gold-mono eyebrow, 46px Archivo title, 18px lede with
inline white-bold emphasis span. Below: 2-col grid where LEFT is
a 2×2 grid of small navy pillar cards (gold left-border) and
RIGHT is a tall photo with a bottom-anchored stat strip on a
gradient overlay.
============================================================= */
/* ORN coach gallery — panoramic auto-advancing slideshow above WHY ORN.
* One image at a time fills the frame; each slide crossfades to the next
* every 4.5s via a JS-driven .is-active class swap. */
.orn-bus-slideshow { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: rgb(220, 216, 205); box-shadow: 0 12px 28px rgba(20, 35, 59, 0.14); }
.orn-bus-slideshow__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease-in-out; }
.orn-bus-slideshow__img.is-active { opacity: 1; }
@media (max-width: 640px) {
.orn-bus-slideshow { aspect-ratio: 4 / 3; }
}
.orn-why { background: var(--orn-cream); color: rgb(15, 15, 15); padding: 74px 0 80px; }
.orn-why__inner { max-width: var(--orn-container); margin-inline: auto; padding-inline: var(--orn-gutter); }
.orn-why__eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.24em; color: var(--orn-navy); font-weight: 600; text-transform: uppercase; }
.orn-why__title { font-family: var(--orn-font-heading); font-weight: 400; color: rgb(15, 15, 15); font-size: 46px; line-height: 1.04; margin: 12px 0 0; max-width: 760px; }
.orn-why__lede { font-size: 18px; color: rgb(92, 92, 92); line-height: 1.55; margin: 14px 0 0; max-width: 720px; }
.orn-why__lede strong { color: rgb(15, 15, 15); font-weight: 600; }
.orn-why__split { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 38px; align-items: stretch; }
@media (min-width: 1024px) {
.orn-why__split { grid-template-columns: 1.05fr 0.95fr; }
}
.orn-why__pillars { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) {
.orn-why__pillars { grid-template-columns: 1fr 1fr; }
}
.orn-why__pillar { background: #fff; border: 1px solid rgb(228, 221, 205); border-radius: 16px; padding: 22px; }
.orn-why__pillar-icon { color: var(--orn-navy); width: 26px; height: 26px; display: inline-block; }
.orn-why__pillar-title { font-family: var(--orn-font-display); font-weight: 700; font-size: 19px; color: rgb(15, 15, 15); margin: 14px 0 0; line-height: 1.2; }
.orn-why__pillar-lede { font-size: 14px; color: rgb(92, 92, 92); line-height: 1.5; margin: 7px 0 0; }
.orn-why__photo { position: relative; border-radius: 18px; overflow: hidden; min-height: 340px; box-shadow: rgba(0, 0, 0, 0.34) 0 24px 50px; background-size: cover; background-position: 46% 52%; background-repeat: no-repeat; background-color: var(--orn-navy); }
.orn-why__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 26, 43, 0.86) 0%, rgba(14, 26, 43, 0.1) 50%, transparent 72%); pointer-events: none; }
.orn-why__photo-stats { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; z-index: 1; }
.orn-why__photo-stat-n { font-family: var(--orn-font-display); font-weight: 800; font-size: 34px; line-height: 1; color: #fff; }
.orn-why__photo-stat-l { font-size: 13px; color: var(--orn-mute-3); margin-top: 3px; }
.orn-why__photo-divider { width: 1px; height: 38px; background: rgba(255, 255, 255, 0.22); }
.orn-why__promises { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 26px; }
@media (min-width: 900px) {
.orn-why__promises { grid-template-columns: 1fr 1fr 1fr; }
}
.orn-why__promise { background: #F20D16; color: #fff; border-radius: 14px; padding: 24px 26px 26px; box-shadow: 0 10px 24px rgba(242, 13, 22, 0.18); }
.orn-why__promise-title { font-family: var(--orn-font-display); font-weight: 800; font-size: 21px; line-height: 1.15; margin: 0; color: #fff; }
.orn-why__promise-lede { font-size: 14.5px; color: rgba(255, 255, 255, 0.94); line-height: 1.5; margin: 10px 0 0; }
/* =============================================================
Footer
============================================================= */
.orn-footer { background: var(--orn-navy); color: rgb(195, 204, 214); padding-bottom: 0; }
.orn-page--how-rewards-work .orn-footer { margin-top: 0; }
/* ─── Brand + EXPLORE / COMPANY link band ────────────────────── */
.orn-footer-linkband { background: rgb(12, 20, 32); color: rgb(143, 160, 180); border-top: 1px solid rgb(27, 40, 56); }
.orn-footer-linkband__inner { max-width: var(--orn-container); margin: 0 auto; padding: 34px var(--orn-gutter) 40px; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; justify-content: space-between; }
.orn-footer-linkband__brand { max-width: 320px; }
.orn-footer-linkband__brand-mark { display: flex; align-items: center; gap: 11px; }
.orn-footer-linkband__brand-logo { display: block; height: auto; max-height: var(--orn-logo-h, 36px); width: auto; max-width: 100%; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
.orn-footer-linkband__brand-disc { width: 30px; height: 30px; border-radius: 50%; background: var(--orn-navy); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.orn-footer-linkband__brand-wordmark { font-family: var(--orn-font-display, Archivo, sans-serif); font-weight: 800; font-size: 19px; letter-spacing: 0.03em; color: rgb(244, 239, 227); }
.orn-footer-linkband__brand-eyebrow { font-size: 11px; letter-spacing: 0.24em; color: rgb(110, 130, 152); font-weight: 600; padding-left: 4px; }
.orn-footer-linkband__brand-lede { font-size: 13.5px; line-height: 1.6; margin-top: 14px; color: rgb(138, 138, 138); }
.orn-footer-linkband__socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.orn-footer-linkband__social { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); color: #fff !important; border-radius: 8px; transition: background 200ms ease; }
.orn-footer-linkband__social:hover { background: var(--orn-navy); color: #fff !important; }
.orn-footer-linkband__cols { display: flex; gap: 52px; flex-wrap: wrap; }
.orn-footer-linkband__col { display: flex; flex-direction: column; gap: 11px; }
.orn-footer-linkband__col-title { font-family: var(--orn-font-mono, "JetBrains Mono", monospace); font-size: 10.5px; letter-spacing: 0.2em; color: var(--orn-navy); font-weight: 700; text-transform: uppercase; }
.orn-footer-linkband__col-title--sub { margin-top: 18px; }
.orn-footer-linkband__link { font-size: 14px; font-weight: 600; color: rgb(199, 210, 223); text-decoration: none; }
@media (max-width: 700px) {
/* Named groups placed by identity, not position - Explore (logged in)
and Partners (logged out) are mutually exclusive, always the only
one of the two present, so both can safely share the same slot.
A positional (nth-child) rule would silently grab the wrong column
the moment a sibling like Explore is conditionally absent. */
.orn-footer-linkband__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 8vw, 56px); row-gap: 20px; }
.orn-footer-linkband__col-title[aria-hidden="true"] { display: none; }
/* Company top-left, Resources top-right, Explore/Partners bottom-left. */
.orn-footer-linkband__col--company { grid-column: 1; grid-row: 1; }
.orn-footer-linkband__col--resources { grid-column: 2; grid-row: 1; }
.orn-footer-linkband__col--explore, .orn-footer-linkband__col--partners { grid-column: 1; grid-row: 2; }
.orn-footer-linkband__col--region { grid-column: 1 / -1; }
}
.orn-footer-linkband__talk { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 10px 18px 10px 14px; background: var(--orn-navy); color: #fff; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 8px 22px rgba(242, 13, 22, 0.24); }
.orn-footer-linkband__talk:hover { background: var(--orn-navy-2); }
.orn-footer-linkband__col--region { max-width: 300px; }
.orn-footer-linkband__region-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.orn-footer-linkband__region-chip { background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); color: rgb(199, 210, 223); border-radius: 999px; padding: 7px 14px; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.orn-footer-linkband__region-chip:hover { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.orn-footer-linkband__region-chip.is-active { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.45); color: #fff; }
/* Thin legal strip under the peace band — Terms + Privacy only. */
.orn-footer__legalstrip { max-width: var(--orn-container); margin: 0 auto; padding: 14px var(--orn-gutter); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: rgba(240, 230, 200, 0.55); border-top: 1px solid rgba(240, 230, 200, 0.08); }
.orn-footer__legalstrip-links a { color: rgb(138, 138, 138); text-decoration: none; margin: 0 4px; }
.orn-footer__legalstrip-links span { margin: 0 4px; opacity: 0.5; }
/* ─── Peace-of-mind band ─────────────────────────────────────── */
.orn-footer-peace { background: rgb(11, 11, 11); color: rgb(245, 245, 245); border-top: 1px solid rgb(38, 38, 38); }
.orn-footer-peace__inner { max-width: 1200px; margin: 0 auto; padding: 56px 28px 60px; }
.orn-footer-peace__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 52px; align-items: center; }
@media (max-width: 900px) {
.orn-footer-peace__grid { grid-template-columns: 1fr; gap: 40px; }
.orn-footer-peace__inner { padding: 44px 20px 48px; }
}
.orn-footer-peace__eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.24em; color: var(--orn-navy); font-weight: 600; }
.orn-footer-peace__title { margin: 13px 0 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 34px; line-height: 1.06; color: rgb(244, 239, 227); }
@media (max-width: 700px) {
.orn-footer-peace__title { font-size: 26px; }
}
.orn-footer-peace__lede { margin-top: 15px; max-width: 440px; font-size: 16px; color: rgb(175, 192, 210); line-height: 1.6; }
.orn-footer-peace__stats { display: flex; gap: 30px; margin-top: 26px; font-family: 'JetBrains Mono', ui-monospace, monospace; flex-wrap: wrap; }
.orn-footer-peace__stat-v { font-size: 26px; font-weight: 600; color: rgb(244, 239, 227); }
.orn-footer-peace__stat-k { margin-top: 3px; font-size: 11.5px; color: rgb(159, 176, 196); letter-spacing: 0.06em; }
/* Photo cluster — main hero + inset */
.orn-footer-peace__photo { position: relative; height: 360px; }
@media (max-width: 900px) {
.orn-footer-peace__photo { height: 300px; }
}
.orn-footer-peace__photo-main { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 26px 55px rgba(0, 0, 0, 0.45); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%); mask-image: linear-gradient(to right, transparent 0%, #000 18%); }
.orn-footer-peace__photo-img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 58%; display: block; }
.orn-footer-peace__photo-scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(14, 26, 43, 0.92) 0%, rgba(14, 26, 43, 0.28) 32%, rgba(14, 26, 43, 0) 62%), linear-gradient(to top, rgba(14, 26, 43, 0.72) 0%, rgba(14, 26, 43, 0) 42%); }
.orn-footer-peace__photo-caption { position: absolute; left: 24px; bottom: 20px; }
.orn-footer-peace__photo-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.20em; color: rgb(201, 164, 92); font-weight: 600; }
.orn-footer-peace__photo-headline { margin-top: 5px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 18px; color: rgb(244, 239, 227); line-height: 1.2; }
.orn-footer-peace__photo-inset { position: absolute; right: 20px; bottom: -20px; width: 150px; height: 198px; border-radius: 14px; overflow: hidden; border: 4px solid rgb(14, 26, 43); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.orn-footer-peace__photo-inset .orn-footer-peace__photo-img { object-position: 60% 40%; }
.orn-footer-peace__photo-inset .orn-footer-peace__photo-scrim { background: linear-gradient(to top, rgba(14, 26, 43, 0.60), rgba(14, 26, 43, 0) 55%); }
.orn-footer-peace__photo-inset-label { position: absolute; left: 11px; bottom: 9px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.12em; color: rgb(228, 218, 198); font-weight: 600; }
@media (max-width: 700px) {
.orn-footer-peace__photo-inset { width: 120px; height: 158px; right: 12px; bottom: -14px; }
}
/* Bases chip list */
.orn-footer-peace__bases { margin-top: 48px; }
.orn-footer-peace__bases-title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; color: rgb(138, 138, 138); font-weight: 600; }
.orn-footer-peace__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.orn-footer-peace__chip { display: inline-flex; align-items: center; gap: 9px; background: rgb(21,21,21); border: 1px solid rgb(43, 43, 43); border-radius: 11px; padding: 11px 16px; font-size: 14.5px; font-weight: 600; color: rgb(244, 239, 227); }
.orn-footer-peace__chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orn-navy); flex-shrink: 0; }
.orn-footer-peace__chip--soon { background: transparent; border: 1px dashed rgb(70, 88, 111); color: rgb(159, 176, 196); }
.orn-footer-peace__chip-soon { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.10em; font-weight: 700; color: var(--orn-navy); background: rgba(201, 164, 92, 0.14); border-radius: 999px; padding: 2px 7px; margin-left: 6px; }
.orn-footer-peace__bases-note { margin-top: 16px; font-size: 12.5px; color: rgb(138, 138, 138); line-height: 1.5; }
.orn-footer__inner { max-width: var(--orn-container); margin-inline: auto; padding-inline: var(--orn-gutter); display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 768px) {
.orn-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.orn-footer__brand { display: flex; flex-direction: column; gap: var(--sp-4); }
.orn-footer__logo-mark { display: inline-block; color: #fff; font-family: var(--orn-font-display); font-weight: 900; font-size: 1.8rem; letter-spacing: 0.04em; }
.orn-footer__tagline { max-width: 32ch; }
.orn-footer__col-title { color: #fff; font-family: var(--orn-font-mono); font-size: var(--orn-fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.orn-footer__col { display: flex; flex-direction: column; gap: var(--sp-3); }
.orn-footer__link { color: rgba(240, 230, 200, 0.72); cursor: pointer; }
.orn-footer__link:hover { color: var(--orn-gold); }
.orn-footer__user { color: var(--orn-gold); font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.08em; }
.orn-footer__base { max-width: var(--orn-container); margin: var(--sp-7) auto 0; padding: var(--sp-5) var(--orn-gutter) 0; border-top: 1px solid rgba(240, 230, 200, 0.10); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; font-size: var(--orn-fs-small); color: rgba(240, 230, 200, 0.5); }
/* =============================================================
Utility
============================================================= */
.orn-hide { display: none !important; }
.orn-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.orn-mt-6 { margin-top: var(--sp-6); }
.orn-mt-7 { margin-top: var(--sp-7); }
.orn-text-mute { color: var(--orn-mute); }
.orn-text-center { text-align: center; }
/* Type-scale utilities — mirror the sizes used across ORN components. */
.orn-text-xs { font-size: 12px; line-height: 1.5; }
.orn-text-sm { font-size: 14px; line-height: 1.55; }
.orn-text-md { font-size: 16px; line-height: 1.6; }
.orn-text-lg { font-size: 20px; line-height: 1.45; }
.orn-text-xl { font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; }
.orn-text-xxl { font-size: 40px; line-height: 1.08; letter-spacing: -0.015em; }
.orn-text-xxxl { font-size: 56px; line-height: 1.04; letter-spacing: -0.02em; }
@media (max-width: 767px) {
.orn-text-xl { font-size: 22px; }
.orn-text-xxl { font-size: 30px; }
.orn-text-xxxl { font-size: 40px; }
}
/* =============================================================
Journey-detail customer skin — overlay applied to the cockpit
DOM when selling_room.jsp is rendered with `orn.skin == customer`.
Body class chain: body.srBody.orn-jd.orn-skin-customer.
Strategy: hide the agent-facing chrome (region picker, inputs
column, agent-only controls), keep the cockpit's data DOM
(#srBrainPanel, #srCockpit, rungs, calendar, itinerary), and
restyle the visible surfaces to match the ORN customer mockup.
============================================================= */
body.orn-jd { background: var(--orn-cream); color: var(--orn-ink); font-family: var(--orn-font-body); }
/* Agent-only chrome — hide on the customer skin */
body.orn-skin-customer .srTopBar, /* region picker strip */ body.orn-skin-customer .srRegionsBar, body.orn-skin-customer .srRegionTopBtn, body.orn-skin-customer .srInputsCol, /* left inputs column */ body.orn-skin-customer .srInputsReopen, body.orn-skin-customer .srAgentInput, body.orn-skin-customer .srBrainLang, /* output-language dropdown */ body.orn-skin-customer #srBrainLang, body.orn-skin-customer .srWhatsAppPreview, body.orn-skin-customer #srCopyWhatsApp, body.orn-skin-customer #srDownloadFlyer, body.orn-skin-customer #srDownloadBrochure, body.orn-skin-customer #srDownloadReel, body.orn-skin-customer .srFamilyList-wrapper, /* family picker (customer arrives pre-selected) */ body.orn-skin-customer #srFamilyList, body.orn-skin-customer .srObjectionChips, body.orn-skin-customer .srWizard, body.orn-skin-customer .srFoldBtn { display: none !important; }
/* Cockpit container — drop the cockpit's own padding/border so the
customer skin chrome (navy hero, container max-width) drives the
layout. */
body.orn-skin-customer #srCockpit { background: transparent; box-shadow: none; border: 0; padding: 0; max-width: var(--orn-container); margin-inline: auto; padding-inline: var(--orn-gutter); }
/* Brain panel — re-skin to match the ORN customer co-pilot card.
Cockpit defaults to a tall sidebar; on customer we keep the
sidebar position on desktop but restyle the background to the
navy-on-gold ORN mockup palette. */
body.orn-skin-customer #srBrainPanel { background: var(--orn-navy); border-radius: var(--r-card); color: var(--orn-text-light); box-shadow: var(--sh-raised); }
body.orn-skin-customer #srBrainPanel #srBrainEyebrow { color: var(--orn-gold-3); font-family: var(--orn-font-mono); letter-spacing: 0.18em; text-transform: uppercase; font-size: var(--orn-fs-eyebrow); }
body.orn-skin-customer #srBrainPanel #srBrainBody { background: transparent; }
body.orn-skin-customer #srBrainPanel .srBrainMsg { color: rgb(195, 204, 214); }
/* Family card — visible to agents only; customer skin already hid
#srFamilyList above. No styling needed for customer. */
/* Rung cards — cockpit's ladder renders into #srLadder. Restyle each
rung card to the ORN customer rung mockup: white paper, 16px
radius, tone-coloured top border to match the family palette,
"RECOMMENDED" badge absolute-positioned. The cockpit DOM marks the
recommended rung with .is-recommended; we leverage that. */
body.orn-skin-customer #srLadder .srRungCard { background: var(--orn-paper); border: 2px solid rgb(228, 221, 205); border-radius: 16px; padding: 20px; position: relative; box-shadow: rgba(20, 35, 59, 0.05) 0 8px 22px; }
body.orn-skin-customer #srLadder .srRungCard .srRung__tier,
body.orn-skin-customer #srLadder .srRungCard .srRung__lane,
body.orn-skin-customer #srLadder .srRungCard .srRung__eyebrow { color: var(--orn-navy) !important; }
body.orn-skin-customer #srLadder .srRungCard.is-recommended { border-color: var(--orn-navy); box-shadow: rgba(0, 0, 0, 0.12) 0 14px 32px; }
body.orn-skin-customer #srLadder .srRungCard.is-recommended::before { content: "RECOMMENDED"; position: absolute; top: -11px; left: 20px; background: var(--orn-navy); color: #fff; font-family: var(--orn-font-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; border-radius: var(--r-pill); padding: 4px 12px; }
/* Tabs row (Map / Detail / Itinerary / Dates / Included) — cockpit
uses .srTab buttons inside a tab bar. Restyle to the ORN customer
pill row: cream pill bar with navy active tab. */
body.orn-skin-customer .srTab { padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); background: var(--orn-paper); border: 1px solid var(--orn-line); font-size: 14px; font-weight: 600; color: var(--orn-ink); white-space: nowrap; }
body.orn-skin-customer .srTab.is-active { background: rgb(15, 15, 15); color: #fff; border-color: rgb(15, 15, 15); }
/* Page wrapper around the cockpit — give the customer skin a top
hero strip without rewriting the cockpit DOM. The ORN customer
header already lands above #srCockpit (via the body-level
header.jsp include in selling_room.jsp when orn.skin == customer). */
body.orn-skin-customer .srCenterEmpty { background: transparent; color: var(--orn-ink-2); }
/* =============================================================
Journey-detail page (Results.html layout). Uses
ornholidays-journey.js for data; this section is purely the
customer skin styling that wraps the rendered content.
Page body class is `orn-page orn-page--journey orn-jd` and the
JS sets familyId/slug attributes on body. Sections render under
the standard .orn-container max-width.
============================================================= */
.orn-jd__main { padding-block: clamp(1.5rem, 4vw, 1rem); }
.orn-jd__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgb(90, 101, 115); margin-bottom: 16px; }
.orn-jd__back:hover { color: var(--orn-navy); }
/* ---------------- Hero card ---------------- */
.orn-jd__hero { background: var(--orn-navy); color: var(--orn-text-light); border-radius: 20px; padding: 34px 38px; }
.orn-jd__hero--image { position: relative; overflow: hidden; padding: 0; min-height: 340px; background-color: rgb(21, 21, 21); background-image: var(--orn-jd-hero-image); background-position: center right; background-size: cover; background-repeat: no-repeat; }
.orn-jd__hero--image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(21, 21, 21) 0%, rgba(21, 21, 21, 0.85) 30%, rgba(21, 21, 21, 0.4) 55%, rgba(21, 21, 21, 0) 80%); pointer-events: none; z-index: 1; }
.orn-jd__hero--image .orn-jd__hero-body { position: relative; z-index: 2; padding: 40px 44px; max-width: 55%; }
@media (max-width: 720px) {
.orn-jd__hero--image .orn-jd__hero-body { max-width: 100%; padding: 32px 24px; }
.orn-jd__hero--image::before { background: linear-gradient(to bottom, rgba(21, 21, 21, 0.3) 0%, rgba(21, 21, 21, 0.85) 100%); }
}
.orn-jd__hero-title { font-family: var(--orn-font-display); font-weight: 800; font-size: 38px; line-height: 1.05; color: #fff; margin: 0; }
.orn-jd__hero-sub { font-size: 16px; color: var(--orn-mute-3); margin: 8px 0 0; }
.orn-jd__hero-copy { font-size: 16px; color: var(--orn-mute-2); line-height: 1.5; margin: 16px 0 0; max-width: 820px; }
.orn-jd__hero-chips { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px; }
/* USP strip — sits right below the hero, above the tabs. */
.orn-jd-usps { margin: 0; }
.orn-jd-usps__inner { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; background: #fff; border: 1px solid #eceff3; border-radius: 14px; padding: 14px 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.orn-jd-usp { display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px; flex: 1 1 160px; min-width: 0; }
.orn-jd-usp + .orn-jd-usp { border-left: 1px solid #eceff3; }
.orn-jd-usp__icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; color: #E4002B; }
.orn-jd-usp__icon svg { width: 22px; height: 22px; display: block; }
.orn-jd-usp__label { font-family: var(--orn-font-body); font-size: 13px; font-weight: 700; color: #14233b; letter-spacing: 0.01em; line-height: 1.25; }
@media (max-width: 860px) {
.orn-jd-usps__inner { padding: 10px 12px; gap: 6px; }
.orn-jd-usp { flex: 1 1 45%; padding: 6px; }
.orn-jd-usp + .orn-jd-usp { border-left: 0; }
.orn-jd-usp__label { font-size: 12px; }
}
.orn-vhero__price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-top: 12px; color: #fff; }
.orn-vhero__price-label { font-size: 13px; color: rgba(255,255,255,0.75); }
.orn-vhero__price-gross { font-family: var(--orn-font-mono); font-size: 16px; color: rgba(255,255,255,0.6); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.orn-vhero__price-gross:empty { display: none; }
.orn-vhero__price-net { font-family: var(--orn-font-mono); font-size: 28px; font-weight: 700; color: #fff; line-height: 1.05; font-variant-numeric: tabular-nums; }
.orn-vhero__price-net > span { font-family: inherit; }
.orn-vhero__price.is-loading { opacity: 0.5; }
/* Layout A breakdown: Market − Savings − Rewards = Starting Price */
.orn-vhero__price-breakdown { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 14px; width: 100%; }
.orn-vhero__price-term { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
/* a term the band leaves out (e.g. no ORN Savings) - display:flex above would otherwise beat [hidden] */
.orn-vhero__price-term[hidden], .orn-vhero__price-op[hidden] { display: none; }
.orn-vhero__price-term-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.orn-vhero__price-term-val { font-family: var(--orn-font-mono); font-size: 20px; font-weight: 600; color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums; }
.orn-vhero__price-term--final .orn-vhero__price-term-val { font-size: 30px; font-weight: 700; color: #fff; }
.orn-vhero__price-op { font-family: var(--orn-font-mono); font-size: 20px; font-weight: 400; color: rgba(255,255,255,0.65); align-self: center; padding-bottom: 2px; }
.orn-vhero__price-op--eq { color: #fff; }
@media (max-width: 640px) {
/* Receipt stack — one term per row, right-aligned amounts, big final. */
.orn-vhero__price-breakdown {
flex-direction: column;
align-items: stretch;
gap: 4px;
width: 100%;
max-width: 320px;
}
.orn-vhero__price-op { display: none; }
.orn-vhero__price-term {
flex-direction: row;
align-items: baseline;
justify-content: space-between;
gap: 12px;
width: 100%;
}
.orn-vhero__price-term-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.75);
}
.orn-vhero__price-term-val {
font-family: var(--orn-font-mono);
font-size: 18px;
font-weight: 600;
color: #fff;
}
/* Prepend minus for deducted terms so the arithmetic stays visible. */
.orn-vhero__price-term[data-orn-hero-price-term-sav] .orn-vhero__price-term-val::before,
.orn-vhero__price-term[data-orn-hero-price-term-rew] .orn-vhero__price-term-val::before {
content: "− ";
margin-right: 2px;
}
.orn-vhero__price-term--final {
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.25);
}
.orn-vhero__price-term--final .orn-vhero__price-term-label { font-size: 12px; }
.orn-vhero__price-term--final .orn-vhero__price-term-val {
font-size: 26px;
font-weight: 700;
}
}
.orn-jd__hero-chip { font-family: var(--orn-font-mono); font-size: 13px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--r-pill); padding: 7px 14px; color: rgb(230, 236, 242); }
.orn-jd__hero-chip--lead { background: #E4002B; border-color: #E4002B; color: #fff; box-shadow: 0 4px 12px rgba(228, 0, 43, 0.35); }
.orn-jd__hero-strip { display: flex; align-items: center; gap: 14px; margin-top: 22px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 13px; padding: 15px 18px; }
.orn-jd__hero-strip-eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.14em; font-weight: 700; color: rgba(255, 255, 255, 0.9); white-space: nowrap; }
.orn-jd__hero-strip-divider { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.16); }
.orn-jd__hero-strip-text { font-size: 15px; color: rgb(230, 236, 242); line-height: 1.4; }
/* ---------------- Section heads ---------------- */
.orn-jd__sec-title { font-family: var(--orn-font-display); font-weight: 800; font-size: 24px; color: rgb(15, 15, 15); margin: 36px 0 0; }
.orn-jd__sec-sub { font-size: 15px; color: rgb(90, 101, 115); margin: 6px 0 0; }
/* ---------------- Idea mode: hero eyebrow + represents/why sections ---------------- */
.orn-jd__hero-eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.18em; font-weight: 700; color: var(--orn-navy); text-transform: uppercase; margin: 0 0 12px; }
.orn-jd__section { margin-top: 32px; }
.orn-jd__represents { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 720px) {
.orn-jd__represents { grid-template-columns: 1fr; }
}
.orn-jd__represents-item { background: var(--orn-paper); border-radius: 12px; padding: 14px 18px 14px 42px; font-size: 15px; color: var(--orn-text); box-shadow: rgba(20, 35, 59, 0.04) 0 4px 12px; position: relative; line-height: 1.4; }
.orn-jd__represents-item::before { content: "✓"; position: absolute; left: 18px; top: 14px; color: var(--orn-navy); font-weight: 800; font-size: 15px; }
/* Why travellers choose this — big rounded card + icon column + prose */
.orn-jd__why { background: var(--orn-paper); border-radius: 20px; padding: 28px; box-shadow: rgba(20, 35, 59, 0.05) 0 8px 22px; display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: start; }
@media (max-width: 720px) {
.orn-jd__why { grid-template-columns: 1fr; }
}
.orn-jd__why::before { content: ""; display: block; background: var(--orn-idea-accent, var(--orn-gold)); border-radius: 14px; aspect-ratio: 1 / 1; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 46%; }
.orn-jd__why-copy { min-width: 0; }
.orn-jd__why-eyebrow { font-family: var(--orn-font-mono); font-size: 12px; letter-spacing: 0.18em; font-weight: 700; color: var(--orn-idea-accent, var(--orn-gold)); text-transform: uppercase; margin: 0 0 10px; }
.orn-jd__why .orn-jd__sec-title { margin: 0 0 12px; }
.orn-jd__why-list { list-style: none; padding: 0; margin: 0; font-size: 15px; color: rgb(74, 84, 100); line-height: 1.6; }
.orn-jd__why-list li { display: inline; }
.orn-jd__why-list li:not(:last-child)::after { content: " "; }
/* ---------------- Rungs ---------------- */
/* Rung ladder — horizontal scroll strip, ~3.5 cards visible per row.
Same scroll-snap idiom as the departures/promotions strips. */
.orn-jd__rungs { display: flex; flex-wrap: nowrap; gap: 16px; margin-top: 20px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding-left: 4px; padding: 22px 4px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.orn-jd__rungs::-webkit-scrollbar { display: none; width: 0; height: 0; }
.orn-jd__rungs > .orn-jd__rung { flex: 0 0 calc((100% - 3 * 16px) / 3.2); min-width: 260px; max-width: 400px; scroll-snap-align: start; }
@media (max-width: 768px) {
.orn-jd__rungs > .orn-jd__rung { flex: 0 0 calc((100% - 16px) / 1.05); }
}
.orn-jd__rung-placeholder { flex: 1 1 100%; background: var(--orn-paper); border: 1px dashed var(--orn-line-2); border-radius: 16px; padding: 24px; color: var(--orn-ink-2); text-align: center; }
.orn-jd__rung { cursor: pointer; background: var(--orn-paper); border: 2px solid rgb(243, 243, 243); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; position: relative; box-shadow: rgba(20, 35, 59, 0.05) 0 8px 22px; text-align: left; font: inherit; color: inherit; transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; }
.orn-jd__rung:hover { transform: translateY(-2px); box-shadow: rgba(20, 35, 59, 0.12) 0 14px 32px; }
.orn-jd__rung--recommended { box-shadow: rgba(20, 35, 59, 0.12) 0 14px 32px; }
.orn-jd__rung--selected { border-color: var(--orn-green); }
.orn-jd__rung-badge { position: absolute; top: -11px; left: 20px; background: var(--orn-gold); color: var(--orn-navy); font-family: var(--orn-font-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; border-radius: var(--r-pill); padding: 4px 12px; }
.orn-jd__rung-flightpill {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: var(--orn-navy);
color: #ffffff;
font-family: var(--orn-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: var(--r-pill);
padding: 5px 14px;
box-shadow: 0 4px 10px rgba(20, 35, 59, 0.18);
white-space: nowrap;
}
.orn-jd__rung-topline { display: flex; align-items: center; justify-content: space-between; }
.orn-jd__rung-tier { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orn-green); }
.orn-jd__rung-tier--grand { color: var(--orn-red); }
.orn-jd__rung-tier--starter { color: rgb(90, 101, 115); }
.orn-jd__rung-tier--classic { color: var(--orn-blue); }
.orn-jd__rung-tier--highlights { color: var(--orn-blue); }
.orn-jd__rung-code { font-family: var(--orn-font-mono); font-size: 13px; color: rgb(154, 138, 110); }
.orn-jd__rung-name { font-family: var(--orn-font-display); font-weight: 700; font-size: 20px; color: rgb(15, 15, 15); margin-top: 4px; line-height: 1.15; }
.orn-jd__rung-meta { font-size: 14px; color: rgb(90, 101, 115); margin-top: 4px; }
.orn-jd__rung-blurb { font-size: 13.5px; color: rgb(110, 117, 133); line-height: 1.4; margin: 5px 0 0; }
.orn-jd__rung-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: 12px; }
.orn-jd__rung-price-label { font-size: 11px; color: rgb(154, 138, 110); }
.orn-jd__rung-price { font-family: var(--orn-font-mono); font-size: 23px; font-weight: 600; color: var(--orn-text); line-height: 1.1; }
.orn-jd__rung-savings { color: #1F7A3D; font-family: var(--orn-font-body); font-size: 12px; font-weight: 600; margin-top: 2px; line-height: 1.2; }
.orn-jd__rung-select { font-size: 13px; font-weight: 700; color: rgb(154, 138, 110); }
.orn-jd__rung--selected .orn-jd__rung-select { color: var(--orn-green); }
/* ---------------- Tabs ---------------- */
/* Tabs — separated pills (Results.html shape). White card with cream
border for the inactive state; solid navy fill for the active.
Margin-top=0 because the new orn-jd__body wrapper sets the gap from
the rungs grid. Doubling it produced a yawning gap. */
/* Single row that scrolls horizontally when it can't fit (mobile) instead of
wrapping to multiple lines. Scrollbar hidden for a clean look; pills don't
shrink. On desktop the row fits so no scroll appears. */
.orn-jd__tabs { display: flex; gap: 10px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 0; padding: 0; background: transparent; width: auto; }
.orn-jd__tabs::-webkit-scrollbar { display: none; }
.orn-jd__tab { flex: 0 0 auto; padding: 10px 22px; border-radius: var(--r-pill); background: #fff; border: 1px solid #E4DDCD; font-family: Archivo, sans-serif; font-size: 14px; font-weight: 600; color: #3A4654; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.orn-jd__tab:hover { border-color: #c9a45c; }
.orn-jd__tab--active { background: #14233B; color: #F4EFE3; border-color: #14233B; }
.orn-jd__tabbar { scroll-margin-top: 16px; } /* breathing room when a tab switch scrolls here */
.orn-jd__panels { margin-top: 20px; }
.orn-jd__panel { display: none; }
.orn-jd__panel--active { display: block; }
.orn-jd__panel-empty { background: var(--orn-paper); border: 1px dashed var(--orn-line-2); border-radius: 16px; padding: 36px 24px; color: var(--orn-ink-2); text-align: left; font-size: 15px; }
/* ============================================================================
MOBILE: continuous-scroll + scrollspy tour-detail tabs (design parity).
On mobile the tabs stop being a one-panel-at-a-time switcher and become a
sticky pill bar over a SINGLE continuous page: every content section is
stacked & visible, tapping a pill smooth-scrolls to that section, and the
active pill follows scroll position (scrollspy, driven by JS). Desktop keeps
the classic switcher untouched. Applies to BOTH van & FD flows.
NOTE: this block MUST come AFTER the base .orn-jd__panel rules above — media
queries add no specificity, so equal-specificity selectors resolve by source
order; the continuous-scroll display:block only wins if it's declared later.
============================================================================ */
@media (max-width: 640px) {
/* The Pricing (Dates) tab is redundant on mobile — the booking flow is
reached via the sticky "Check dates & prices" button, the only
full-screen entry point. Hide the pill AND keep its panel out of the
continuous scroll (but NOT while the full-screen overlay is open, when
body.orn-jd-dates-open promotes it to a fixed layer). */
.orn-jd__tab[data-orn-tab="dates"] { display: none; }
body:not(.orn-jd-dates-open) .orn-jd__panel[data-orn-panel="dates"] { display: none; }
/* The sticky pill bar itself is the .orn-jd__tabbar wrapper (see the
max-width:900px block below); the inner .orn-jd__tabs stays a plain
horizontal-scroll track (base rule: flex-nowrap + overflow-x:auto). */
/* All content sections stacked & visible — override the switcher's
display:none so the page becomes one continuous scroll. scroll-margin-top
lets pill taps land just below the pinned bar. */
.orn-jd__panels { margin-top: 14px; }
.orn-jd__panel { display: block; scroll-margin-top: 64px; margin-bottom: 26px; }
/* Visa & Terms are conditional — their panels stay hidden until the server
confirms the product has them. JS stamps orn-has-visa / orn-has-terms on
, mirroring the pill's hidden state. */
.orn-jd__panel[data-orn-panel="visa"],
.orn-jd__panel[data-orn-panel="terms"] { display: none; }
body.orn-has-visa .orn-jd__panel[data-orn-panel="visa"] { display: block; }
body.orn-has-terms .orn-jd__panel[data-orn-panel="terms"] { display: block; }
}
/* ---------------- Detail tab ----------------
Two-card layout matching the design mockup:
LEFT — "Why this journey" (white card, 6 info-meta tiles in 2-col grid)
RIGHT — "Good to know" (cream-tinted card with + bullet list from
the inclusions' whatToExpect[] roll-up)
------------------------------------------- */
.orn-jd__detail { display: flex; flex-direction: column; gap: 20px; }
.orn-jd__detail-card { border-radius: 20px; padding: 32px; }
.orn-jd__detail-card--why { background: #fff; box-shadow: rgba(20, 35, 59, 0.05) 0 8px 24px; }
.orn-jd__detail-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.orn-jd__detail-titlerow .orn-jd__detail-title { margin: 0; }
.orn-jd__brochure-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--button-radius-primary); background: rgb(20, 35, 59); color: #fff; font-family: Archivo, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background 160ms ease, transform 160ms ease; }
.orn-jd__brochure-btn:hover { background: rgb(30, 50, 80); transform: translateY(-1px); color: #fff; text-decoration: none; }
.orn-jd__brochure-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Same button on the published-journey page is a