/* ==========================================================================
EGYVACATIONS — REPEATED SECTIONS · assets/css/sections.css
The section library. Every one of these blocks appears on more than one
page, so each is defined exactly once here and never re-declared in a
template file. This is the file that replaces the old main.css.
1. Section rhythm .ev-section
2. Section heads .ev-head .ev-sec-head .ev-em .ev-textlink
3. (buttons live in components.css — one component, see the note there)
4. Tour card .ev-card .ev-badge .ev-tag .ev-wa-btn
5. Filter row + grid .ev-filters .ev-tourgrid .ev-grid-foot
6. Intro + highlight aside .ev-collapse .ev-highlight
7. Offers band .ev-band
8. Trip-type portals .ev-portals
9. Destination tiles .ev-dests
10. Why book with us .ev-why .ev-value
11. How it works .ev-how__grid .ev-step
12. Photo rail .ev-photorail
13. Reviews .ev-rvbar .ev-rvwall .ev-rv
15. Trust strip .ev-trust
16. Book with confidence .ev-confidence
18. Journal / blog teasers .ev-journal .ev-lead .ev-read .ev-meta
19. FAQ accordion .ev-accordion .ev-faq
20. Enquiry block + form .ev-inquiry .ev-form .ev-field
21. Breadcrumb .evt-crumb
22. Enquiry band (templates) .evt-enquire
23. Related rail .evt-related
========================================================================== */
/* ==========================================================================
1. SECTION RHYTHM
Four surfaces only: white, sunken tint, navy, and a white card floated on
the tint. No other background exists on the site.
========================================================================== */
.ev-section{padding:var(--section-py) 0}
.ev-section--lg{padding:var(--section-py-lg) 0}
.ev-section--tight{padding:var(--section-py-tight) 0}
/* Two sections each bring 40px, so a plain seam would open to 80. Where both
sides are white the upper one's padding is enough — the top padding of the
lower section is dropped and the seam lands on 40px exactly.
A seam that also changes colour keeps the full 80: a tint needs the room,
or the background edge crowds the first line of text. */
.ev-section + .ev-section{padding-top:0}
:is(.ev-section--muted,.ev-section--navy,.ev-section--card,.is-alt) + .ev-section,
.ev-section + :is(.ev-section--muted,.ev-section--navy,.ev-section--card,.is-alt){
padding-top:var(--section-py)}
.ev-section.is-same-bg{padding-top:0}
/* Background alternation (standard): white and sunken alternate section by section (classes set by the page build,
_tools/alternate.py / the theme's render). Inside a sunken section, sunken parts (cards, tiles) turn white so they
stay visible. A section container is painted to the full width of the window. */
.is-alt{background:var(--alt-bg);--surface-sunken:var(--ev-white)}
.evt-container.is-alt{box-shadow:0 0 0 100vmax var(--alt-bg);clip-path:inset(0 -100vmax);
padding-block:var(--section-py);margin-block:var(--section-py)}
.ev-section--muted{background:var(--surface-sunken)}
.ev-section--navy{background:var(--surface-inverse);color:var(--text-on-inverse)}
.ev-section--navy h2,
.ev-section--navy h3,
.ev-section--navy b,
.ev-section--navy strong{color:var(--ev-white)}
.ev-section--navy p{color:var(--text-on-inverse-secondary)}
.ev-section--navy .ev-eyebrow{color:var(--ev-white)}
.ev-section--navy .ev-eyebrow::before{background:var(--info)}
.ev-section--card{background:var(--surface-sunken)}
/* ==========================================================================
2. SECTION HEADS
========================================================================== */
.ev-head{max-width:72ch}
.ev-head > h2,.ev-head > p{max-width:var(--measure-head)}
.ev-head--center > h2,.ev-head--center > p{margin-inline:auto}
.ev-head h2{font-size:var(--fs-h2);font-weight:var(--fw-light)}
.ev-head h2 em,
.ev-em{font-style:normal;font-weight:var(--fw-black);color:var(--ev-navy)}
/* On a navy section that navy accent is invisible. Both spellings of the
accent have to flip, not just .ev-em — "no online checkout
anywhere" was being printed in navy on navy.
--accent-on-navy measures 5.38 on --ev-navy; the brand orange is 3.96 and
would only be legal at display sizes. */
.ev-section--navy :is(.ev-head h2 em,.ev-em){color:var(--accent-on-navy)}
.ev-head > p{margin-top:16px;font-size:var(--fs-lede);line-height:var(--lh-body);color:var(--text-secondary);
font-weight:var(--fw-light);max-width:62ch}
.ev-head--center{margin-inline:auto;text-align:center}
.ev-head--center .ev-eyebrow{justify-content:center}
.ev-head--center > p{margin-inline:auto}
/* the lede has to flip on navy — charcoal at 72% over navy is unreadable,
and .ev-head > p would otherwise beat the section-level rule above */
.ev-section--navy .ev-head > p,
.ev-section--navy .ev-sec-head > div > p{color:var(--text-on-inverse-secondary)}
.ev-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-7);
margin-bottom:var(--section-head-gap)}
.ev-sec-head h2{font-size:var(--fs-h2);font-weight:var(--fw-light)}
.ev-sec-head > div > p{margin-top:14px;font-size:var(--fs-lede);color:var(--text-secondary);
font-weight:var(--fw-light);max-width:58ch}
@media(max-width:820px){.ev-sec-head{flex-direction:column;align-items:flex-start;gap:var(--sp-5)}}
.ev-textlink{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);
font-weight:var(--fw-bold);color:var(--text-link);white-space:nowrap;
transition:gap var(--dur-fast) var(--ease)}
.ev-textlink:hover{gap:12px;text-decoration:underline;text-underline-offset:3px}
.ev-textlink svg{width:16px;height:16px;flex:none}
@media(max-width:700px){.ev-textlink{white-space:normal;max-width:100%;text-align:left}} /* translated link texts are longer than the English ones: on a phone they wrap instead of running off the screen */
/* 5.38 on navy. The brand orange is 3.96 and may not carry a 14px link. */
.ev-section--navy .ev-textlink{color:var(--ev-white)}
/* ==========================================================================
3. BUTTON SIZES (the base lives in chrome.css)
========================================================================== */
/* ==========================================================================
4. TOUR CARD
Rebuilt on the Judy Egypt Tours card: the photo sits inset in a white
frame, the price rides top-left of it and the operator rating bottom-left,
and the body carries a connected list of what is actually in the trip
instead of a row of loose tags. Each row names the thing on the left and
qualifies it on the right, so the card answers "what do I get" before the
visitor has opened anything.
The WhatsApp button stays, because a guest who wants to ask rather than
read should not have to open the page first.
========================================================================== */
.ev-card[hidden]{display:none!important} /* a filtered-out card must really disappear (display:flex below would override the hidden attribute) */
.ev-card{position:relative;display:flex;flex-direction:column;background:var(--card-bg);
border:1px solid var(--card-border);border-radius:var(--r-xl);padding:8px;overflow:hidden;
transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),
border-color var(--dur-base) var(--ease)}
.ev-card:hover{transform:translateY(var(--card-lift));box-shadow:var(--shadow-2);
border-color:var(--border)}
/* ---------- the photo ---------- */
.ev-card__media{position:relative;aspect-ratio:5/3;overflow:hidden;
border-radius:var(--r-lg);background:var(--surface-sunken)}
.ev-card__media img{width:100%;height:100%;object-fit:cover;
transition:transform var(--dur-slow) var(--ease)}
.ev-card:hover .ev-card__media img{transform:scale(1.05)}
/* price, top-left — navy on orange is 3.96:1, which is why it is not white */
.ev-card__from{position:absolute;top:12px;left:12px;z-index:2;
display:inline-flex;align-items:baseline;gap:6px;padding:7px 14px;
border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);
font-size:1rem;font-weight:var(--fw-black);letter-spacing:-.01em;
box-shadow:0 4px 12px rgba(240,144,31,.34)}
.ev-card__from small{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:0;opacity:.82}
/* the promo flag moves to the right so it never collides with the price */
.ev-card__media .ev-badge--promo{position:absolute;top:12px;right:12px;z-index:2}
/* rating, bottom-left. Labelled TripAdvisor because it is the operator's
score, not this tour's — see the README before swapping in per-tour data. */
.ev-card__rating{position:absolute;left:12px;bottom:12px;z-index:2;
display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
border-radius:var(--r-pill);background:rgba(255,255,255,.95);
color:var(--text-heading);font-size:.86rem;font-weight:var(--fw-black);
box-shadow:var(--shadow-1)}
.ev-card__rating svg{width:14px;height:14px;color:var(--accent);fill:currentColor}
.ev-card__rating small{font-size:var(--fs-micro);font-weight:var(--fw-semi);color:var(--text-muted);
letter-spacing:.02em}
/* ---------- the body ---------- */
.ev-card__body{display:flex;flex-direction:column;flex:1;padding:16px 12px 10px}
.ev-card__dur{display:flex;align-items:center;gap:8px;font-size:var(--fs-micro);font-weight:var(--fw-black);
letter-spacing:0;color:var(--accent-ink,var(--accent-ink))}
.ev-card__dur i{font-style:normal;color:var(--text-decorative)}
.ev-card__title{margin-top:7px;font-size:1.14rem;line-height:var(--lh-tight);
font-weight:var(--fw-bold)}
.ev-card__title a{transition:color var(--dur-fast) var(--ease)}
.ev-card__title a:hover{color:var(--action-hover)}
.ev-card__route{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:var(--fs-micro);
font-weight:var(--fw-semi);letter-spacing:0;
color:var(--tourcard-route-fg)}
.ev-card__route svg{width:13px;height:13px;flex:none;color:var(--ev-ocean)}
/* ---------- what is in the trip ---------- */
.ev-card__plan{position:relative;margin-top:16px;padding-top:2px}
.ev-card__plan li{position:relative;display:flex;align-items:baseline;justify-content:space-between;
gap:12px;padding:0 0 0 24px;min-height:30px}
.ev-card__plan li + li{margin-top:9px}
/* the ring */
.ev-card__plan li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;
border-radius:50%;border:2px solid var(--accent);background:var(--surface);z-index:1}
/* the thread between the rings, drawn from each row to the next */
.ev-card__plan li::after{content:"";position:absolute;left:5px;top:16px;bottom:-9px;width:1.5px;
background:var(--border)}
.ev-card__plan li:last-child::after{display:none}
.ev-card__plan b{font-size:.9rem;font-weight:var(--fw-semi);color:var(--text-heading);
line-height:1.35}
.ev-card__plan span{flex:none;font-size:.78rem;color:var(--text-muted);text-align:right;
line-height:1.35}
/* ---------- price and actions ---------- */
.ev-card__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;
margin-top:auto;padding-top:16px;border-top:1px solid var(--border-soft)}
.ev-card__price{position:relative;display:block}
.ev-price__label{display:block;font-size:var(--fs-micro);font-weight:var(--fw-black);
letter-spacing:0;color:var(--text-muted)}
.ev-price__value{display:block;margin-top:1px;font-size:1.5rem;font-weight:var(--fw-black);
color:var(--text-heading);letter-spacing:var(--ls-display);line-height:1.05}
.ev-price__unit{display:block;font-size:.75rem;font-weight:var(--fw-regular);color:var(--text-muted);
letter-spacing:0}
.ev-card__actions{display:flex;align-items:center;gap:8px;flex:none}
.ev-card__actions .ev-btn--sm{height:44px;padding:0 17px;border-radius:var(--r-pill);
font-size:.86rem}
.ev-card__actions .ev-btn--sm svg{width:15px;height:15px;
transition:transform var(--dur-fast) var(--ease)}
.ev-card__actions .ev-btn--sm:hover svg{transform:translateX(2px)}
.ev-wa-btn{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;
background:var(--whatsapp);border:0;color:var(--ev-white);
transition:transform var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease)}
.ev-wa-btn:hover{filter:brightness(1.07)}
.ev-wa-btn svg{width:22px;height:22px;fill:var(--ev-white)}
/* ---------- badges and tags (still used by other templates) ---------- */
.ev-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-sm);
font-size:var(--fs-micro);font-weight:var(--fw-black);letter-spacing:0}
.ev-badge--type{background:var(--tourcard-badge-bg);color:var(--tourcard-badge-fg)}
.ev-badge--promo{background:var(--ev-navy);color:var(--ev-white);box-shadow:var(--shadow-1)}
.ev-tags{display:flex;flex-wrap:wrap;gap:7px}
.ev-tag{padding:5px 11px;border-radius:var(--r-sm);background:var(--tourcard-tag-bg);
color:var(--tourcard-tag-fg);font-size:var(--fs-micro);font-weight:var(--fw-medium)}
@media(max-width:420px){
.ev-card__plan span{display:none} /* the qualifier is the first thing to go */
.ev-card__actions .ev-btn--sm{padding:0 14px}
}
/* ==========================================================================
5. FILTER ROW + GRID
========================================================================== */
.ev-filters{display:flex;flex-wrap:wrap;gap:8px;margin:var(--sp-7) 0 var(--sp-6)}
.ev-filters__btn{height:44px;padding:0 19px;border-radius:var(--r-pill);border:1.5px solid var(--border);
font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-secondary);
transition:all var(--dur-fast) var(--ease)}
.ev-filters__btn:hover{border-color:var(--ev-sky);color:var(--text-heading)}
.ev-filters__btn[aria-pressed="true"],
.ev-filters__btn.is-active{background:var(--action);border-color:var(--action);color:var(--ev-white)}
.ev-tourgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
@media(max-width:1040px){.ev-tourgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ev-tourgrid{grid-template-columns:minmax(0,1fr)}}
.ev-empty{padding:var(--sp-8) 0;text-align:center;color:var(--text-muted);font-weight:var(--fw-light)}
.ev-empty[hidden]{display:none}
.ev-grid-foot{display:flex;justify-content:center;margin-top:var(--sp-7)}
/* ==========================================================================
6. INTRO COLLAPSE + HIGHLIGHT ASIDE
========================================================================== */
.ev-tours__top{display:grid;grid-template-columns:minmax(0,1fr) 364px;gap:var(--sp-9);align-items:start}
/* no side panel — the intro runs at a readable measure instead of full bleed */
.ev-tours__top--solo{grid-template-columns:minmax(0,1fr)}
.ev-tours__top--solo .ev-collapse__body{max-width:78ch}
@media(max-width:1040px){.ev-tours__top{grid-template-columns:minmax(0,1fr);gap:var(--sp-7)}}
.ev-collapse{margin-top:var(--sp-6)}
.ev-collapse__body{position:relative;color:var(--text-secondary);font-weight:var(--fw-light)}
.ev-collapse__toggle{display:none}
/* truncated only when scripting can expand it again */
.ev-js .ev-collapse__body{overflow:hidden;max-height:7.6em;
transition:max-height var(--dur-slow) var(--ease)}
.ev-js .ev-collapse__toggle{display:inline-flex}
.ev-js .ev-collapse__body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.2em;
background:linear-gradient(to top,var(--surface),rgba(255,255,255,0));
transition:opacity var(--dur-base) var(--ease)}
.ev-js .ev-collapse.is-open .ev-collapse__body{max-height:140em}
.ev-js .ev-collapse.is-open .ev-collapse__body::after{opacity:0}
.ev-collapse__body p + p{margin-top:14px}
.ev-collapse__body strong{font-weight:var(--fw-semi);color:var(--text)}
.ev-collapse__body a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px}
.ev-collapse__toggle{margin-top:14px}
/* ==========================================================================
7. OFFERS BAND
========================================================================== */
.ev-band{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);
background:var(--surface-inverse);color:var(--ev-white);padding:var(--sp-8) var(--sp-8)}
.ev-band__motif{position:absolute;z-index:-1;right:-40px;top:-30px;width:300px;height:300px;
opacity:.07;pointer-events:none}
.ev-band__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8)}
.ev-band h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:var(--fw-light);color:var(--ev-white)}
.ev-band h2 em{font-style:normal;font-weight:var(--fw-black);color:var(--accent)}
.ev-band p{margin-top:14px;color:var(--text-on-inverse-secondary);font-weight:var(--fw-light);max-width:52ch}
.ev-band .ev-eyebrow{color:var(--ev-white)}
.ev-band .ev-eyebrow::before{background:var(--accent)}
.ev-band__actions{display:flex;flex-wrap:wrap;gap:12px;flex:none}
@media(max-width:900px){
.ev-band{padding:var(--sp-7) var(--sp-6)}
.ev-band__inner{flex-direction:column;align-items:flex-start;gap:var(--sp-6)}
}
/* ==========================================================================
8. TRIP-TYPE PORTALS
========================================================================== */
.ev-portals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);
margin-top:var(--section-head-gap)}
.ev-portal{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
min-height:376px;padding:var(--sp-7);border-radius:var(--r-xl);overflow:hidden;color:var(--ev-white);
transition:transform var(--dur-base) var(--ease)}
.ev-portal:hover{transform:translateY(-5px)}
.ev-portal img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
transition:transform var(--dur-slow) var(--ease)}
.ev-portal:hover img{transform:scale(1.06)}
.ev-portal::after{content:"";position:absolute;inset:0;z-index:-1;
background:var(--scrim)}
.ev-portal__n{position:absolute;top:22px;left:var(--sp-7);font-size:2.6rem;font-weight:var(--fw-black);
letter-spacing:var(--ls-display);color:rgba(255,255,255,.34);line-height:1}
.ev-portal__kicker{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:0;color:var(--accent)}
.ev-portal h3{margin-top:9px;font-size:1.5rem;font-weight:var(--fw-bold);color:var(--ev-white)}
.ev-portal p{margin-top:10px;font-size:var(--fs-sm);line-height:1.6;color:rgba(255,255,255,.82);
font-weight:var(--fw-light)}
.ev-portal__go{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding-top:16px;
border-top:1px solid rgba(255,255,255,.26);font-size:var(--fs-xs);font-weight:var(--fw-bold);
letter-spacing:0;transition:gap var(--dur-fast) var(--ease)}
.ev-portal:hover .ev-portal__go{gap:14px}
.ev-portal__go svg{width:16px;height:16px}
@media(max-width:1040px){.ev-portals{grid-template-columns:minmax(0,1fr)}
.ev-portal{min-height:300px}}
/* ==========================================================================
9. DESTINATION TILES
========================================================================== */
.ev-dests{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4)}
.ev-dest{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
min-height:320px;padding:18px;border-radius:var(--r-lg);overflow:hidden;color:var(--ev-white);
transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.ev-dest:hover{transform:translateY(-4px);box-shadow:var(--shadow-3)}
.ev-dest img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
transition:transform var(--dur-slow) var(--ease)}
.ev-dest:hover img{transform:scale(1.07)}
.ev-dest::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(to top,rgba(35,39,42,.9) 6%,rgba(35,39,42,.45) 52%,rgba(35,39,42,.1))}
.ev-dest__flag{position:absolute;top:14px;left:14px;width:30px;height:30px;border-radius:50%;
overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.ev-dest__flag svg,
.ev-dest__flag img{width:100%;height:100%;object-fit:cover}
.ev-dest__season{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:6px;
padding:5px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);color:var(--ev-navy);
font-size:var(--fs-micro);font-weight:var(--fw-black);letter-spacing:0}
.ev-dest__season svg{width:12px;height:12px}
.ev-dest__body h3{font-size:1.16rem;font-weight:var(--fw-bold);color:var(--ev-white)}
.ev-dest__tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.ev-dest__tags li{padding:3px 9px;border-radius:var(--r-xs);background:rgba(12,51,82,.62);
font-size:var(--fs-micro);font-weight:var(--fw-semi)}
.ev-dest__count{display:block;margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.24);
font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:0;
color:var(--accent-on-navy)} /* small text over the navy photo veil */
@media(max-width:1100px){.ev-dests{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.ev-dests{grid-template-columns:repeat(2,minmax(0,1fr))}
.ev-dest{min-height:250px}}
@media(max-width:460px){.ev-dests{grid-template-columns:minmax(0,1fr)}}
/* ==========================================================================
10. WHY BOOK WITH US
========================================================================== */
.ev-why{display:grid;grid-template-columns:420px minmax(0,1fr);gap:var(--sp-9);align-items:start}
/* A grid item's automatic minimum is its min-content width, which here was
450px — wider than a phone. min-width:0 lets the column actually shrink;
without it the page scrolls sideways on mobile. */
.ev-why > *{min-width:0}
.ev-why__aside{position:sticky;top:120px}
.ev-why__figure{position:relative;border-radius:var(--r-xl);overflow:hidden}
.ev-why__figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ev-why__stat{position:absolute;left:18px;right:18px;bottom:18px;padding:18px 20px;
border-radius:var(--r-lg);background:rgba(255,255,255,.95);
box-shadow:var(--shadow-2)}
.ev-why__stat b{display:block;font-size:2rem;font-weight:var(--fw-black);color:var(--text-heading);
letter-spacing:var(--ls-display);line-height:1}
.ev-why__stat span{display:block;margin-top:5px;font-size:var(--fs-xs);color:var(--text-secondary)}
.ev-why__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:var(--sp-6)}
/* Each promise is its own tinted card, and the icon sits on the same line as
the heading rather than above it — the eye reads icon and claim as one unit
instead of scanning a column of floating squares. */
.ev-value{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
column-gap:14px;row-gap:9px;align-items:center;
padding:20px;border-radius:var(--r-lg);
background:var(--ev-navy-09);border:1px solid var(--border-soft);
transition:background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),
transform var(--dur-base) var(--ease)}
.ev-value:hover{background:var(--surface);border-color:var(--border);
transform:translateY(-3px);box-shadow:var(--shadow-2)}
.ev-value__icon{grid-row:1;grid-column:1;width:44px;height:44px;display:grid;place-items:center;
border-radius:var(--r-md);background:var(--surface);color:var(--ev-ocean);
box-shadow:var(--shadow-1);
transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.ev-value:hover .ev-value__icon{background:var(--action);color:var(--ev-white)}
.ev-value__icon svg{width:21px;height:21px}
.ev-value h3{grid-row:1;grid-column:2;font-size:1.02rem;font-weight:var(--fw-bold);
line-height:var(--lh-tight)}
.ev-value p{grid-row:2;grid-column:1/-1;font-size:var(--fs-sm);line-height:var(--lh-body);
color:var(--text-secondary);font-weight:var(--fw-light)}
@media(max-width:420px){
.ev-value{padding:16px;column-gap:12px}
.ev-value__icon{width:38px;height:38px}
.ev-value__icon svg{width:18px;height:18px}
}
@media(max-width:1040px){
.ev-why{grid-template-columns:minmax(0,1fr);gap:var(--sp-7)}
.ev-why__aside{position:static;width:100%;max-width:460px}
}
@media(max-width:620px){.ev-why__list{grid-template-columns:minmax(0,1fr)}}
/* ==========================================================================
11. HOW IT WORKS / HOW TO BOOK
Four numbered steps with a connecting rule, the way a booking flow reads.
========================================================================== */
.ev-how__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6);
margin-top:var(--section-head-gap);counter-reset:ev-step}
.ev-step{position:relative;counter-increment:ev-step;padding-top:var(--sp-7)}
.ev-step::before{content:counter(ev-step);position:absolute;top:-4px;left:0;display:grid;place-items:center;
width:28px;height:28px;border-radius:var(--r-pill);border:1.5px solid currentColor;
font-size:.86rem;font-weight:var(--fw-bold);color:var(--accent-ink);font-variant-numeric:tabular-nums} /* the booking order, not a decoration */
.ev-step::after{content:"";position:absolute;top:10px;left:40px;right:-24px;height:1px;
background:rgba(255,255,255,.22)}
.ev-how__grid .ev-step:last-child::after{display:none}
.ev-step h3{font-size:1.08rem;font-weight:var(--fw-bold)}
.ev-step p{margin-top:9px;font-size:var(--fs-sm);line-height:var(--lh-body);font-weight:var(--fw-light)}
.ev-how__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;
margin-top:var(--sp-8);padding-top:var(--sp-7);border-top:1px solid rgba(255,255,255,.18)}
.ev-how__cta p{flex:1;min-width:260px;font-weight:var(--fw-light)}
@media(max-width:900px){
.ev-how__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-7)}
.ev-step::after{display:none}
}
@media(max-width:520px){.ev-how__grid{grid-template-columns:minmax(0,1fr)}}
/* on a white section the connector rule has to flip to the light tint */
.ev-section:not(.ev-section--navy) .ev-step::after{background:var(--border)}
.ev-section--navy .ev-step::before{color:var(--accent-on-navy)}
.ev-section:not(.ev-section--navy) .ev-how__cta{border-top-color:var(--border-soft)}
/* ==========================================================================
12. GUEST GALLERY
A horizontally scrolling masonry, the way a real photo wall reads: two rows
deep, tiles of different widths, some running the full height, the strip
bleeding past both edges so it is obvious there is more to the right.
The shape comes from nth-child, so the rhythm repeats however many photos
the template prints — add or remove images and nothing breaks.
========================================================================== */
.ev-photorail{position:relative;margin-top:var(--section-head-gap)}
.ev-photorail__track{
display:grid;
grid-auto-flow:column;
grid-template-rows:repeat(2, clamp(130px,13vw,185px));
grid-auto-columns:clamp(150px,15vw,215px);
gap:12px;
overflow-x:auto;
padding:2px 2px 10px;
scroll-snap-type:x proximity;
scroll-behavior:smooth;
scrollbar-width:none;
/* the strip runs past the container on both sides */
margin-inline:calc(var(--gutter) * -1);
padding-inline:var(--gutter);
mask-image:linear-gradient(to right,transparent,#000 2.5%,#000 97.5%,transparent);
}
.ev-photorail__track::-webkit-scrollbar{display:none}
.ev-photorail__track figure{position:relative;margin:0;overflow:hidden;
border-radius:var(--r-lg);background:var(--surface-sunken);scroll-snap-align:start;
transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
/* the rhythm: tall · short · short · tall-wide · short · short, repeating */
.ev-photorail__track figure:nth-child(4n+1){grid-row:span 2}
.ev-photorail__track figure:nth-child(4n){grid-row:span 2;grid-column:span 2}
.ev-photorail__track figure:hover{transform:translateY(-3px);box-shadow:var(--shadow-3);z-index:2}
.ev-photorail__track img{width:100%;height:100%;object-fit:cover;
transition:transform var(--dur-slow) var(--ease)}
.ev-photorail__track figure:hover img{transform:scale(1.06)}
/* the caption only appears on hover — the photographs should carry the row */
.ev-photorail__track figure::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;
background:var(--scrim);
opacity:0;transition:opacity var(--dur-base) var(--ease);pointer-events:none}
.ev-photorail__track figure:hover::after{opacity:1}
.ev-photorail__track figcaption{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;
color:var(--ev-white);font-size:var(--fs-xs);font-weight:var(--fw-semi);
opacity:0;transform:translateY(6px);
transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.ev-photorail__track figure:hover figcaption{opacity:1;transform:none}
/* ---------- arrows ---------- */
.ev-photorail__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
background:var(--surface);box-shadow:var(--shadow-3);color:var(--ev-navy);
transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}
.ev-photorail__btn:hover{transform:translateY(-50%) scale(1.08)}
.ev-photorail__btn svg{width:19px;height:19px}
.ev-photorail__btn--prev{left:-10px}
.ev-photorail__btn--next{right:-10px}
@media(max-width:700px){
.ev-photorail__track{grid-template-rows:repeat(2,36vw);grid-auto-columns:40vw;gap:9px}
.ev-photorail__btn{display:none}
.ev-photorail__track figcaption,
.ev-photorail__track figure::after{opacity:1;transform:none}
}
/* ==========================================================================
13-14. REVIEWS
Rebuilt structurally, not recoloured. What changed and why:
· Every review now leads with a HEADLINE taken verbatim from the start of
the traveller's own words. A wall of grey paragraphs gives the eye
nothing to catch; a bold line does, and it is still their sentence.
· The platform is carried by ITS OWN BRAND COLOUR — TripAdvisor green,
Google blue — on the left edge, the avatar, the mark and the rating.
Colour tells you where a review came from before you read a word.
· The rating uses each platform's own idiom: TripAdvisor rates in filled
circles, Google in stars. Drawn in CSS, so no icon request.
· A guide credit appears only where the traveller actually named one.
· The first review is a wide lead card, so the block has a focal point
instead of five identical boxes.
========================================================================== */
/* Brand values, declared once and read by both the band and the cards.
Each platform gets THREE values, not one, and the split matters:
--brand the real brand colour. Edges, logos, fills — never text.
--brand-ink the same hue pushed dark enough to carry text on white.
TripAdvisor green is 3.0:1 and Google blue 3.6:1, so both
fail as type; these measure 5.8 and 6.0.
--brand-mark the colour each platform draws its own rating in — green
bubbles for TripAdvisor, yellow stars for Google.
Using the real colour for a link label would have been the easy thing and
the unreadable one. */
.ev-rvbar,.ev-rvwall{
--ta:#00AA6C; --ta-ink:#00754A; --ta-mark:#34E0A1; --ta-wash:rgba(0,170,108,.07);
--gg:#4285F4; --gg-ink:#1A5FC4; --gg-mark:#FBBC05; --gg-wash:rgba(66,133,244,.07);
}
[data-source="tripadvisor"]{--brand:var(--ta);--brand-ink:var(--ta-ink);
--brand-mark:var(--ta);--brand-wash:var(--ta-wash)}
[data-source="google"]{--brand:var(--gg);--brand-ink:var(--gg-ink);
--brand-mark:var(--gg-mark);--brand-wash:var(--gg-wash)}
/* ---------- the rating marks ----------
TripAdvisor scores in circles and Google in stars; matching each platform's
own shape is the difference between quoting a score and inventing one. */
.ev-rv__rating{display:inline-flex;gap:4px;align-items:center}
.ev-rv__rating i{width:13px;height:13px;flex:none;border-radius:50%;
background:var(--brand-mark,var(--accent))}
[data-source="google"] .ev-rv__rating i{border-radius:0;
-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E") center/contain no-repeat}
/* ==========================================================================
The platform band
========================================================================== */
/* Two tiles, centred over the wall. There is no wider "home page" variant:
the component is the same object on every page, and the only thing that
changes between pages is how many review cards sit under it. */
.ev-rvbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch;
max-width:620px;margin:var(--section-head-gap) auto 0}
.ev-rvbar__plat{position:relative;display:flex;flex-direction:column;gap:9px;
padding:20px;border-radius:var(--r-lg);background:var(--surface);
border:1.5px solid var(--border-soft);overflow:hidden;
transition:border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),
box-shadow var(--dur-base) var(--ease)}
/* the brand signs the tile along its top edge */
.ev-rvbar__plat::before{content:none;position:absolute;inset:0 0 auto 0;height:4px;
background:var(--brand)}
.ev-rvbar__plat:hover{border-color:var(--brand);transform:translateY(-3px);
box-shadow:var(--shadow-2)}
.ev-rvbar__mark{display:inline-flex;align-items:center;gap:9px;margin-top:4px;
font-size:.92rem;font-weight:var(--fw-bold);color:var(--text-heading)}
.ev-rvbar__mark svg{width:22px;height:22px;color:var(--brand)}
.ev-rvbar__plat b{font-size:2.3rem;font-weight:var(--fw-black);line-height:1;
letter-spacing:var(--ls-display);color:var(--text-heading)}
.ev-rvbar__go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;
font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--brand-ink);
transition:gap var(--dur-fast) var(--ease)}
.ev-rvbar__go svg{width:14px;height:14px}
.ev-rvbar__plat:hover .ev-rvbar__go{gap:11px}
@media(max-width:520px){.ev-rvbar{grid-template-columns:minmax(0,1fr)}}
/* ==========================================================================
The wall
========================================================================== */
.ev-rvwall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px;
align-items:start}
@media(max-width:1040px){.ev-rvwall{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* one card per row on a phone — a card at 84% with the next one peeking
made every quote two words narrower for no gain */
@media(max-width:720px){.ev-rvwall{grid-template-columns:minmax(0,1fr)}}
.ev-rv{position:relative;display:flex;flex-direction:column;gap:12px;
padding:20px 22px 18px 26px;border-radius:var(--r-lg);
background:var(--surface);border:1px solid var(--border-soft);overflow:hidden;
transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),
border-color var(--dur-base) var(--ease)}
/* the platform's colour runs the full height of the card */
.ev-rv::before{content:none}
/* and washes the top of it, so the colour reads even at a glance */
.ev-rv::after{content:"";position:absolute;inset:0 0 auto 0;height:96px;z-index:-1;
background:linear-gradient(to bottom,var(--brand-wash),transparent)}
.ev-rv{isolation:isolate}
.ev-rv:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--brand)}
/* ---------- the "read every review" tile ----------
Same card shell, no platform colour of its own, so it reads as the way out
of the set rather than as a sixth quote. */
.ev-rv--all{--brand:var(--ev-navy);--brand-ink:var(--ev-navy);
--brand-wash:rgba(17,72,115,.06);
gap:14px;text-decoration:none}
.ev-rv--all:hover{border-color:var(--ev-navy)}
.ev-rv__allmark{display:inline-flex;align-items:center;gap:12px}
.ev-rv__allmark svg{width:26px;height:26px}
.ev-rv__allmark svg:first-child{color:var(--ta,#00AA6C)}
.ev-rv__alltitle{font-size:1.1rem;font-weight:var(--fw-bold);line-height:1.3;
color:var(--text-heading)}
.ev-rv__alltext{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-secondary);
font-weight:var(--fw-light)}
.ev-rv__allgo{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:14px;
border-top:1px solid var(--border-soft);
font-size:.76rem;font-weight:var(--fw-bold);color:var(--ev-navy);
transition:gap var(--dur-fast) var(--ease)}
.ev-rv__allgo svg{width:13px;height:13px}
.ev-rv--all:hover .ev-rv__allgo{gap:11px}
.ev-rv__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.ev-rv__av{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
background:var(--brand-ink);color:var(--ev-white);font-size:1rem;font-weight:var(--fw-black);line-height:1}
.ev-rv__who{min-width:0}
.ev-rv__who cite{display:block;font-style:normal;font-size:.95rem;font-weight:var(--fw-bold);
color:var(--text-heading);line-height:1.25;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.ev-rv__who > span{display:block;margin-top:1px;font-size:var(--fs-micro);color:var(--text-muted)}
.ev-rv__mark{flex:none;display:grid;place-items:center}
.ev-rv__mark svg{width:26px;height:26px;color:var(--brand)}
/* Every card is the same height, so the row reads as one block instead of a
ragged edge. Two mechanisms do it: the title and the body are each clamped
to two lines, and the card stretches to fill its grid row. "Read more"
un-clamps the body in place — nothing navigates away. */
.ev-rv{height:100%}
.ev-rv__title{font-size:1.1rem;font-weight:var(--fw-bold);line-height:1.3;
color:var(--text-heading);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev-rv__body{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-secondary);
font-weight:var(--fw-light);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev-rv.is-open .ev-rv__body{-webkit-line-clamp:unset;display:block}
.ev-rv.is-open .ev-rv__title{-webkit-line-clamp:unset;display:block}
.ev-rv__expand{align-self:flex-start;margin-top:-4px;font-size:.78rem;
font-weight:var(--fw-bold);color:var(--brand-ink);
display:inline-flex;align-items:center;gap:6px}
.ev-rv__expand svg{width:13px;height:13px;transition:transform var(--dur-base) var(--ease)}
.ev-rv.is-open .ev-rv__expand svg{transform:rotate(180deg)}
.ev-rv__expand:hover{text-decoration:underline;text-underline-offset:3px}
/* without scripting there is nothing to expand, so nothing is clamped */
html:not(.ev-js) .ev-rv__title,
html:not(.ev-js) .ev-rv__body{display:block;-webkit-line-clamp:unset}
html:not(.ev-js) .ev-rv__expand{display:none}
.ev-rv__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--border-soft)}
.ev-rv__guide{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;
border-radius:var(--r-pill);background:var(--brand-wash);color:var(--brand-ink);
font-size:var(--fs-micro);font-weight:var(--fw-bold)}
.ev-rv__guide svg{width:13px;height:13px}
.ev-rv__more{display:inline-flex;align-items:center;gap:7px;margin-left:auto;
font-size:.76rem;font-weight:var(--fw-bold);color:var(--text-muted);
transition:color var(--dur-fast) var(--ease),gap var(--dur-fast) var(--ease)}
.ev-rv__more svg{width:13px;height:13px}
.ev-rv:hover .ev-rv__more{color:var(--brand-ink);gap:10px}
@media(max-width:420px){
.ev-rv{padding:16px 16px 14px 20px}
.ev-rv__title{font-size:1.02rem}
}
/* ==========================================================================
15. AWARD + LICENCE BADGES (new)
A narrow strip of verifiable facts: the licence number, the award years,
the rating. Everything in it is checkable, which is the whole point.
========================================================================== */
.ev-trust{display:flex;flex-wrap:wrap;align-items:stretch;gap:1px;
border:1px solid var(--border-soft);border-radius:var(--r-lg);overflow:hidden;
background:var(--border-soft)}
.ev-trust__item{flex:1 1 200px;display:flex;align-items:center;gap:14px;padding:18px 20px;
background:var(--surface)}
.ev-trust__ic{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:var(--r-md);
background:var(--surface-sunken);color:var(--ev-ocean)}
.ev-trust__ic svg{width:21px;height:21px}
.ev-trust__item b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-heading)}
.ev-trust__item span{display:block;margin-top:2px;font-size:var(--fs-micro);color:var(--text-muted)}
.ev-trust--navy{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.14)}
.ev-trust--navy .ev-trust__item{background:var(--ev-navy)}
.ev-trust--navy .ev-trust__ic{background:rgba(255,255,255,.1);color:var(--ev-sky)}
.ev-trust--navy .ev-trust__item b{color:var(--ev-white)}
.ev-trust--navy .ev-trust__item span{color:var(--text-on-inverse-muted)}
@media(max-width:620px){
/* 2 x 2 on a phone: four facts in one glance, not four full-width rows */
.ev-trust__item{flex:1 1 calc(50% - 1px);flex-direction:column;align-items:flex-start;gap:8px;padding:14px}
.ev-trust__ic{width:34px;height:34px}
.ev-trust__ic svg{width:18px;height:18px}
.ev-trust__item span{font-size:var(--fs-xs)}
}
/* ==========================================================================
16. BOOK WITH CONFIDENCE (new)
========================================================================== */
.ev-confidence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px var(--sp-7);
margin-top:var(--sp-6)}
.ev-confidence li{display:flex;gap:12px;font-size:var(--fs-sm);color:var(--text-secondary)}
.ev-confidence svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--ev-ocean)}
.ev-confidence b{color:var(--text-heading);font-weight:var(--fw-semi)}
.ev-section--navy .ev-confidence li{color:var(--text-on-inverse-secondary)}
.ev-section--navy .ev-confidence svg{color:var(--accent)}
@media(max-width:700px){.ev-confidence{grid-template-columns:minmax(0,1fr)}}
/* ==========================================================================
18. JOURNAL / BLOG TEASERS
========================================================================== */
.ev-journal{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--sp-7);align-items:start}
.ev-journal__head{grid-column:1/-1;margin-bottom:var(--sp-5)}
.ev-journal__head h2{font-size:var(--fs-h2);font-weight:var(--fw-light)}
.ev-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:var(--fs-micro);color:var(--text-muted)}
.ev-meta__tag{padding:4px 10px;border-radius:5px;background:var(--accent-wash);color:var(--ev-navy);
font-size:var(--fs-micro);font-weight:var(--fw-black);letter-spacing:0}
.ev-meta__dot{width:4px;height:4px;border-radius:50%;background:var(--text-decorative)}
.ev-lead{display:block;background:var(--surface);border:1px solid var(--border-soft);
border-radius:var(--r-xl);overflow:hidden;
transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.ev-lead:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.ev-lead__media{aspect-ratio:16/9;overflow:hidden;background:var(--surface-sunken)}
.ev-lead__media img{width:100%;height:100%;object-fit:cover;
transition:transform var(--dur-slow) var(--ease)}
.ev-lead:hover .ev-lead__media img{transform:scale(1.04)}
.ev-lead__panel{padding:var(--sp-6)}
.ev-lead__panel h3{margin-top:13px;font-size:1.3rem;font-weight:var(--fw-bold)}
.ev-lead__panel p{margin-top:10px;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-secondary);
font-weight:var(--fw-light)}
.ev-lead__panel .ev-textlink{margin-top:16px}
.ev-reads{display:flex;flex-direction:column;gap:14px}
.ev-read{display:grid;grid-template-columns:116px minmax(0,1fr);gap:16px;align-items:center;
padding:12px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border-soft);
transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.ev-read:hover{border-color:var(--border);transform:translateX(3px)}
.ev-read__thumb{aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:var(--surface-sunken)}
.ev-read__thumb img{width:100%;height:100%;object-fit:cover}
.ev-read h3{margin-top:8px;font-size:.98rem;line-height:var(--lh-tight);font-weight:var(--fw-semi)}
.ev-reads__foot{margin-top:var(--sp-5)}
.ev-reads__foot .ev-btn{width:100%}
.ev-reads__foot .ev-textlink{white-space:normal;max-width:100%;text-align:left} /* a long translated "read more" link wraps inside the column */
@media(max-width:1000px){
.ev-journal{grid-template-columns:minmax(0,1fr)}
.ev-journal__head{margin-bottom:0}
}
@media(max-width:460px){.ev-read{grid-template-columns:92px minmax(0,1fr);gap:12px}}
/* ==========================================================================
19. FAQ ACCORDION
A button inside the h3 — so the question is a real heading for a screen
reader and a real control for a mouse.
========================================================================== */
/* One column. The side rail that used to sit here was a box of links beside
the answers; it pushed the questions into two thirds of the page and said
nothing the strip under the accordion cannot say in one line. */
.ev-faq{max-width:900px;margin-inline:auto}
.ev-accordion{margin-top:var(--sp-7)}
.ev-accordion__item{background:var(--surface);border:1px solid var(--border-soft);
border-radius:var(--r-lg);margin-bottom:10px;overflow:hidden;position:relative}
.ev-accordion__item::before{content:none;position:absolute;left:0;top:0;bottom:0;width:4px;
background:var(--accent);opacity:0;transition:opacity var(--dur-base) var(--ease)}
.ev-accordion__item.is-open{box-shadow:var(--shadow-2)}
.ev-accordion__item.is-open::before{opacity:1}
.ev-accordion__item h3{font-size:inherit}
.ev-accordion__btn{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;
padding:19px 20px 19px 24px;text-align:left;font-size:var(--fs-sm);font-weight:var(--fw-semi);
color:var(--text-heading)}
/* The sign is an empty span by design — the plus is drawn here as two bars
so there is no icon to download and the open state is a single rotation. */
.ev-accordion__sign{position:relative;width:34px;height:34px;flex:none;border-radius:var(--r-md);
background:var(--surface-sunken);color:var(--text-heading);
transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.ev-accordion__sign::before,
.ev-accordion__sign::after{content:"";position:absolute;top:50%;left:50%;width:13px;height:2px;
border-radius:2px;background:currentColor;transform:translate(-50%,-50%);
transition:transform var(--dur-base) var(--ease),opacity var(--dur-base) var(--ease)}
.ev-accordion__sign::after{transform:translate(-50%,-50%) rotate(90deg)}
.ev-accordion__btn[aria-expanded="true"] .ev-accordion__sign{background:var(--action);color:var(--ev-white)}
.ev-accordion__btn[aria-expanded="true"] .ev-accordion__sign::after{transform:translate(-50%,-50%) rotate(180deg);opacity:0}
/* Collapsed only when scripting is available — .ev-js is set by the inline
snippet in . Without JS every answer is simply open and readable. */
.ev-accordion__panel{display:grid;grid-template-rows:1fr;overflow:hidden;
transition:grid-template-rows var(--dur-base) var(--ease)}
.ev-js .ev-accordion__panel{grid-template-rows:0fr}
.ev-js .ev-accordion__panel.is-open,
.ev-js .ev-accordion__btn[aria-expanded="true"] + .ev-accordion__panel{grid-template-rows:1fr}
.ev-accordion__panel > div{min-height:0;overflow:hidden}
.ev-accordion__panel p{padding:0 24px 22px;font-size:var(--fs-sm);line-height:var(--lh-body);
color:var(--text-secondary);font-weight:var(--fw-light)}
/* the way out, as a line rather than a box */
.ev-faq__after{display:flex;align-items:center;justify-content:center;gap:10px 26px;
flex-wrap:wrap;margin-top:var(--sp-7);padding-top:var(--sp-6);
border-top:1px solid var(--border-soft);
font-size:var(--fs-sm);color:var(--text-secondary);font-weight:var(--fw-light)}
.ev-faq__after .ev-textlink{font-size:var(--fs-sm)}
/* ==========================================================================
20. ENQUIRY BLOCK + FORM
========================================================================== */
.ev-inquiry{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sp-9);align-items:start}
.ev-inquiry__copy h2{font-size:var(--fs-h2);font-weight:var(--fw-light)}
.ev-inquiry__copy > p{margin-top:16px;font-size:var(--fs-lede);color:var(--text-on-inverse-secondary);
font-weight:var(--fw-light);max-width:46ch}
.ev-reassure{display:flex;flex-direction:column;gap:16px;margin-top:var(--sp-7)}
.ev-reassure li{display:flex;gap:13px;font-size:var(--fs-sm);color:var(--text-on-inverse-secondary)}
.ev-reassure li > span{display:block}
.ev-reassure b{display:block;color:var(--ev-white);font-weight:var(--fw-semi);margin-bottom:2px}
.ev-reassure svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--accent)}
.ev-inquiry__alt{display:flex;flex-wrap:wrap;gap:11px;margin-top:var(--sp-7);padding-top:var(--sp-6);
border-top:1px solid rgba(255,255,255,.18)}
.ev-form{background:var(--surface);border-radius:var(--r-xl);padding:var(--sp-7);box-shadow:var(--shadow-3)}
.ev-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.ev-field--full{grid-column:1/-1}
.ev-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ev-field__label{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:0;color:var(--text-muted)}
.ev-req{color:var(--danger)}
.ev-field__control{position:relative}
.ev-input,
.ev-select,
.ev-textarea{width:100%;height:var(--control-h);padding:0 15px;border:1.5px solid var(--control-border);
border-radius:var(--control-radius);background:var(--surface);font-weight:var(--fw-medium);
color:var(--text);
transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.ev-textarea{height:auto;min-height:108px;padding:14px 15px;resize:vertical;line-height:1.6}
.ev-input::placeholder,
.ev-textarea::placeholder{color:var(--control-placeholder);font-weight:var(--fw-regular)}
.ev-input:focus,
.ev-select:focus,
.ev-textarea:focus{outline:0;border-color:var(--control-border-focus);
box-shadow:var(--control-focus-shadow)}
.ev-select{appearance:none;cursor:pointer;padding-right:40px;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323272A' stroke-opacity='.45' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 15px center;background-size:16px}
.ev-field__chev{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;
pointer-events:none;color:var(--text-decorative)}
.ev-field__error{display:block;margin-top:6px;font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--danger)}
.ev-field__error:empty{display:none}
.ev-field.is-invalid .ev-input,
.ev-field.is-invalid .ev-select,
.ev-field.is-invalid .ev-textarea,
.evt-field.is-invalid .evt-input{border-color:var(--danger)}
/* honeypot — present for bots, gone for everyone else */
.ev-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ev-form__foot{margin-top:var(--sp-6)}
.ev-form__status{margin-bottom:14px;padding:13px 16px;border-radius:var(--r-md);
background:var(--surface-sunken);font-size:var(--fs-sm);font-weight:var(--fw-semi);
color:var(--text-heading)}
.ev-form__status[hidden]{display:none}
.ev-form__status.is-error{background:var(--danger-wash);color:var(--danger)}
.evt-railform .ev-form__status{margin:12px 0 0}
.ev-btn[disabled]{opacity:.62;cursor:progress}
.ev-form__consent{margin-top:14px;font-size:.76rem;color:var(--text-muted);text-align:center}
.ev-form__consent a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px}
.ev-section--navy .ev-form__consent{color:var(--text-muted)}
@media(max-width:1040px){.ev-inquiry{grid-template-columns:minmax(0,1fr);gap:var(--sp-7)}}
@media(max-width:560px){.ev-form{padding:var(--sp-6) var(--sp-5)}
.ev-form__grid{grid-template-columns:minmax(0,1fr)}}
/* ==========================================================================
21-23. TEMPLATE-WIDE SECTIONS
Breadcrumb, the dark enquiry band and the related rail. These three appear
on every tour, category, blog and static page.
========================================================================== */
/* ---------- 1. BREADCRUMB ---------- */
.evt-crumb{padding:14px 0;font-size:var(--fs-xs);color:var(--text-muted)}
.evt-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.evt-crumb a{color:var(--text-link)}
.evt-crumb a:hover{text-decoration:underline}
.evt-crumb svg{width:12px;height:12px;color:var(--text-decorative)}
.evt-crumb [aria-current]{color:var(--text-secondary)}
@media (max-width:700px){
/* one line, scrolls sideways (the current page is scrolled into view by chrome.js) instead of wrapping into 4-5 rows */
.evt-crumb{padding:8px 0}
.evt-crumb ol{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;gap:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.evt-crumb ol::-webkit-scrollbar{display:none}
.evt-crumb li{flex:none}
.evt-crumb ol a{min-height:32px}
}
/* ---------- 12. ENQUIRY ---------- */
.evt-enquire{background:var(--surface-inverse);color:var(--ev-white);padding:var(--sp-10) 0}
.evt-enquire h2{color:var(--ev-white);font-size:clamp(1.6rem,2.8vw,2.3rem)}
.evt-enquire .lede{margin-top:16px;color:var(--text-on-inverse-secondary);font-weight:var(--fw-light);max-width:46ch}
.evt-enquire .evt-eyebrow{color:var(--ev-white)}
.evt-enquire .evt-eyebrow::before{background:var(--ev-sky)}
.evt-egrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--sp-9);align-items:start}
.evt-eside li{display:flex;gap:12px;margin-top:16px;font-size:var(--fs-sm);color:var(--text-on-inverse-secondary)}
.evt-eside svg{width:18px;height:18px;flex:none;color:var(--accent);margin-top:2px}
.evt-form{background:var(--surface);border-radius:var(--r-xl);padding:var(--sp-7);box-shadow:var(--shadow-3)}
.evt-form h3{font-size:1.1rem;font-weight:var(--fw-bold)}
.evt-form > p{margin-top:6px;font-size:var(--fs-xs);color:var(--text-muted)}
@media(max-width:1000px){.evt-egrid{grid-template-columns:minmax(0,1fr);gap:var(--sp-7)}}
/* ---------- 13. RELATED ---------- */
.evt-related{padding:var(--sp-10) 0;background:var(--surface-sunken)}
.evt-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5);margin-top:var(--sp-7)}
@media(max-width:1080px){.evt-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.evt-cards{grid-template-columns:minmax(0,1fr)}}
/* ==========================================================================
24. SCROLL REVEAL
A small lift as a block enters the viewport, once. The un-revealed state
only applies when scripting is available, so without JS nothing is ever
left invisible — that is the single most common way a reveal breaks a page.
========================================================================== */
/* Motion (standard): one authored entrance, on the page's hero heading and its lede, exponential ease-out.
No scroll reveal: every section is visible as soon as it is in the page. */
@keyframes ev-hero-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
main h1,main h1 + p,main h1 + .lede{animation:ev-hero-in 900ms var(--ease) both}
main h1 + p,main h1 + .lede{animation-delay:90ms}
@media(prefers-reduced-motion:reduce){
main h1,main h1 + p,main h1 + .lede{animation:none}
}
/* ==========================================================================
25. SEO PROSE INSIDE THE FAQ
The long-form copy and the questions are one section now: prose first,
questions under it, one heading over both. No side rail — the only box in
the column is the "still stuck?" aside the FAQ already had.
========================================================================== */
.ev-seo__prose{margin-top:var(--sp-5);max-width:68ch;margin-inline:auto}
.ev-seo__prose .ev-collapse__body{color:var(--text-secondary);
font-weight:var(--fw-light);line-height:var(--lh-body)}
.ev-js .ev-seo__prose .ev-collapse__body{max-height:13em}
.ev-seo__prose p + p{margin-top:14px}
.ev-seo__prose h3{margin-top:22px;font-size:1.04rem;font-weight:var(--fw-bold);
color:var(--text-heading)}
.ev-seo__prose h3:first-child{margin-top:0}
.ev-seo__prose h3 + p{margin-top:8px}
.ev-seo__prose strong{font-weight:var(--fw-semi);color:var(--text)}
.ev-seo__prose a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px}
.ev-seo__prose a:hover{text-decoration-thickness:2px}
/* ==========================================================================
25b. SEO CONTENT SECTION (hub pages)
Eyebrow with an orange rule, a two-weight H2, a paragraph, and the rest of the copy folded
behind a Read more. Collapsed, the first paragraphs show and the start of the next heading
fades out (mask). The clamp height is set by sections.js (--ev-clamp); without scripting the
whole text is visible and the toggle is hidden. Same .ev-container as the FAQ below it.
========================================================================== */
.ev-section.ev-seosec{padding-block:clamp(56px,7vw,96px)}
/* centred column (reference: a ~900px measure in the middle of the page), text left-aligned inside it */
.ev-seosec__in{max-width:900px;margin-inline:auto}
.ev-seosec__eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:var(--fs-micro);
font-weight:var(--fw-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--text-link)}
.ev-seosec__eyebrow::before{content:"";width:28px;height:2px;flex:none;background:var(--accent)}
.ev-seosec .ev-head{max-width:none}
.ev-seosec .ev-head h2{max-width:none;font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.15}
.ev-seosec .ev-collapse{margin-top:0}
.ev-seosec .ev-head + .ev-collapse,
.ev-seosec__eyebrow + .ev-collapse{margin-top:clamp(16px,2vw,24px)}
.ev-seosec .ev-collapse__body{font-size:clamp(1.0625rem,1.2vw,1.125rem);font-weight:var(--fw-regular);
line-height:1.7;color:var(--text-secondary);overflow-wrap:break-word}
.ev-seosec .ev-collapse__body > * + *{margin-top:18px}
.ev-seosec .ev-collapse__body :is(h2,h3,h4){margin-top:32px;font-size:clamp(1.25rem,2vw,1.5rem);
font-weight:var(--fw-bold);line-height:1.25;color:var(--text-secondary)}
.ev-seosec .ev-collapse__body :is(h2,h3,h4) + *{margin-top:8px}
.ev-seosec .ev-collapse__body > :first-child{margin-top:0}
.ev-seosec .ev-collapse__body :is(ul,ol){padding-left:1.3em}
.ev-seosec .ev-collapse__body ul{list-style:disc}
.ev-seosec .ev-collapse__body ol{list-style:decimal}
.ev-seosec .ev-collapse__body li + li{margin-top:6px}
.ev-seosec .ev-collapse__body table{display:block;width:max-content;max-width:100%;overflow-x:auto;
border-collapse:collapse;font-size:var(--fs-sm)}
.ev-seosec .ev-collapse__body :is(th,td){padding:8px 12px;border:1px solid var(--border);text-align:left;vertical-align:top}
.ev-seosec .ev-collapse__body th{color:var(--text-heading);background:var(--surface-sunken)}
.ev-js .ev-seosec .ev-collapse__body{max-height:var(--ev-clamp,15em);
transition:max-height var(--dur-slow) var(--ease)}
.ev-js .ev-seosec .ev-collapse__body::after{content:none}
.ev-js .ev-seosec .ev-collapse:not(.is-open) .ev-collapse__body{
-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 3.4em),transparent);
mask-image:linear-gradient(to bottom,#000 calc(100% - 3.4em),transparent)}
.ev-js .ev-seosec .ev-collapse.is-open .ev-collapse__body{max-height:240em}
.ev-js .ev-seosec .ev-collapse.is-short .ev-collapse__body{max-height:none;-webkit-mask-image:none;mask-image:none}
.ev-js .ev-seosec .ev-collapse.is-short .ev-collapse__toggle{display:none}
.ev-seosec .ev-collapse__toggle{margin-top:18px;min-height:44px;padding:10px 0 12px;gap:10px;
font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--text-heading);
background:linear-gradient(var(--accent),var(--accent)) 0 calc(100% - 8px)/100% 2px no-repeat}
.ev-seosec .ev-collapse__toggle:hover{gap:10px;text-decoration:none}
.ev-seosec .ev-collapse__toggle svg{width:18px;height:18px;transition:transform var(--dur-base) var(--ease)}
.ev-seosec .ev-collapse.is-open .ev-collapse__toggle svg{transform:rotate(180deg)}
/* 25c. SEO prose and the FAQ below it read as one block: white at the top fading to the sunken tint at the bottom,
one section rhythm between the Read more toggle and the FAQ heading (the page build wraps the pair in .ev-joined). */
.ev-joined{background:linear-gradient(to bottom,var(--ev-white) 0,var(--alt-bg) 100%);--surface-sunken:var(--ev-white)}
.ev-joined > .ev-section{background:none}
.ev-joined .ev-seosec{padding-bottom:0}
.ev-joined .ev-seosec + .ev-section{padding-top:clamp(56px,7vw,88px)}
/* the hinge between the prose and the questions */
.ev-faq__lead{display:flex;align-items:center;gap:14px;margin-top:var(--sp-7);
font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:0;color:var(--text-muted)}
.ev-faq__lead::after{content:"";flex:1;height:1px;background:var(--border-soft)}
/* ==========================================================================
26. TRAVEL TIPS — vertical tabs
The rail asks, the panel answers. Three parts to each answer and each one
earns its place: a photograph, three hard numbers, and the thing we would
actually say on the phone.
The rail is a real tablist with roving tabindex (see sections.js), so the
whole block works from the keyboard. Below 900px it turns into a row of
chips above the panel — a column of five tall buttons on a phone pushes the
answer off the screen, which defeats the point.
========================================================================== */
.ev-tips{display:grid;grid-template-columns:304px minmax(0,1fr);gap:18px;
margin-top:var(--section-head-gap);align-items:start}
.ev-tips > *{min-width:0}
/* ---------- the rail ---------- */
.ev-tips__rail{display:flex;flex-direction:column;gap:8px}
.ev-tips__tab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;
width:100%;padding:14px 16px;text-align:left;
background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);
transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease)}
.ev-tips__tab:hover{border-color:var(--border);transform:translateX(2px)}
.ev-tips__tab[aria-selected="true"]{background:var(--surface-inverse);border-color:transparent}
.ev-tips__ic{width:38px;height:38px;flex:none;display:grid;place-items:center;
border-radius:var(--r-md);background:var(--accent-wash);color:var(--accent-ink);
transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.ev-tips__ic svg{width:19px;height:19px}
.ev-tips__tab[aria-selected="true"] .ev-tips__ic{background:var(--accent);color:var(--on-accent)}
.ev-tips__label{min-width:0}
.ev-tips__label b{display:block;font-size:.96rem;font-weight:var(--fw-bold);
color:var(--text-heading);line-height:1.25}
.ev-tips__label span{display:block;margin-top:2px;font-size:.76rem;color:var(--text-muted)}
.ev-tips__tab[aria-selected="true"] .ev-tips__label b{color:var(--ev-white)}
.ev-tips__tab[aria-selected="true"] .ev-tips__label span{color:var(--text-on-inverse-muted)}
.ev-tips__arrow{width:15px;height:15px;flex:none;color:var(--text-decorative);
transition:transform var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.ev-tips__tab:hover .ev-tips__arrow{transform:translateX(3px)}
.ev-tips__tab[aria-selected="true"] .ev-tips__arrow{color:var(--accent);transform:translateX(3px)}
/* ---------- the panel ---------- */
.ev-tips__panel{background:var(--surface);border:1px solid var(--border-soft);
border-radius:var(--r-xl);overflow:hidden}
.ev-tips__panel[hidden]{display:none}
.ev-tips__media{margin:0;aspect-ratio:16/5;overflow:hidden;background:var(--surface-sunken)}
.ev-tips__media img{width:100%;height:100%;object-fit:cover}
.ev-tips__body{padding:22px}
.ev-tips__body h3{display:flex;align-items:center;gap:13px;font-size:1.3rem;
font-weight:var(--fw-bold);color:var(--text-heading)}
.ev-tips__lead{margin-top:12px;font-size:var(--fs-sm);line-height:1.7;
color:var(--text-secondary);font-weight:var(--fw-light);max-width:68ch}
/* the three numbers */
.ev-tips__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:18px;
border:1px solid var(--border-soft);border-radius:var(--r-lg);overflow:hidden;
background:var(--border-soft)}
.ev-tips__facts > div{padding:14px 16px;background:var(--surface)}
.ev-tips__facts small{display:block;font-size:var(--fs-micro);font-weight:var(--fw-black);
letter-spacing:0;color:var(--text-muted)}
.ev-tips__facts b{display:block;margin-top:4px;font-size:1.08rem;font-weight:var(--fw-bold);
color:var(--text-heading)}
.ev-tips__list{display:flex;flex-direction:column;gap:11px;margin-top:18px}
.ev-tips__list li{display:flex;gap:11px;font-size:var(--fs-sm);line-height:1.6;
color:var(--text-secondary)}
.ev-tips__list svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--ev-ocean)}
/* the one piece of advice */
.ev-tips__tip{margin-top:18px;padding:16px 18px;border-radius:var(--r-lg);
background:var(--accent-wash)}
.ev-tips__tiplab{display:flex;align-items:center;gap:8px;margin-bottom:6px;
font-size:var(--fs-micro);font-weight:var(--fw-black);letter-spacing:0;color:var(--accent-ink)}
.ev-tips__tiplab svg{width:15px;height:15px}
.ev-tips__tip p:last-child{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-secondary)}
@media(max-width:900px){
.ev-tips{grid-template-columns:minmax(0,1fr);gap:14px}
.ev-tips__rail{flex-direction:row;overflow-x:auto;padding-bottom:6px;
scroll-snap-type:x proximity;scrollbar-width:none}
.ev-tips__rail::-webkit-scrollbar{display:none}
.ev-tips__tab{flex:0 0 auto;width:auto;grid-template-columns:auto auto;
padding:10px 15px;scroll-snap-align:start}
.ev-tips__tab .ev-tips__arrow{display:none}
.ev-tips__label span{display:none}
.ev-tips__ic{width:30px;height:30px}
.ev-tips__ic svg{width:16px;height:16px}
.ev-tips__media{aspect-ratio:16/8}
.ev-tips__body{padding:18px}
.ev-tips__facts{grid-template-columns:minmax(0,1fr)}
}
/* ==========================================================================
27. WHY BOOK WITH US — the flat variant used on inner pages
The home page pairs the six promises with a sticky photograph. Every other
page runs them three across with no aside, so the block stays short.
========================================================================== */
.ev-why__list--flat{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--section-head-gap)}
@media(max-width:900px){.ev-why__list--flat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ev-why__list--flat{grid-template-columns:minmax(0,1fr)}}
/* the compact platform band: two tiles, no aggregate column */
/* ==========================================================================
TOUCH TARGETS — on touch screens every tappable thing is at least 44px
tall, by padding the hit area, never by enlarging the type.
========================================================================== */
@media (pointer:coarse),(max-width:700px){
.ev-textlink,.ev-rv__expand,.ev-rv__more,
.evn-channel .lines a{min-height:44px;display:inline-flex;align-items:center}
.evt-crumb a{display:inline-flex;align-items:center;min-height:44px}
.ev-container > p a,.evs-prose a{padding-block:10px;margin-block:-10px}
.ev-footer__legal a,.ev-credit a,.evl-toc a,.evc-moretoggle,.evc-quick a,
.evc-chips button,.evi-cats button,.evt-switch button,.evt-notetabs button,
.ev-skip-link{min-height:44px;display:inline-flex;align-items:center}
.evt-shots__btn{width:44px;height:44px}
h3 > a{display:inline-block;padding-block:12px;margin-block:-12px} /* card titles */
}
/* ==========================================================================
SOCIAL PROOF TOAST — one real review, once per visit (sections.js §9c)
========================================================================== */
.ev-proof{position:fixed;left:20px;bottom:24px;z-index:66;width:min(340px,calc(100vw - 32px));
padding:14px 44px 14px 16px;border-radius:var(--r-lg);background:var(--surface);
border:1px solid var(--border-soft);box-shadow:var(--shadow-3);
opacity:0;transform:translateY(12px);pointer-events:none;
transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.ev-proof.is-on{opacity:1;transform:none;pointer-events:auto}
.ev-proof__stars{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--text-muted)}
.ev-proof__stars svg{width:14px;height:14px;color:var(--accent);fill:currentColor}
.ev-proof__t{margin:4px 0 2px;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-heading);line-height:1.35}
.ev-proof__m{margin:0;font-size:var(--fs-xs);color:var(--text-muted)}
.ev-proof__m a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px}
.ev-proof__x{position:absolute;top:2px;right:2px;width:44px;height:44px;display:grid;place-items:center;
border:0;background:none;color:var(--text-muted);cursor:pointer;border-radius:50%}
.ev-proof__x svg{width:16px;height:16px}
@media(max-width:1080px){.ev-proof{bottom:96px}} /* above the price bar */
@media(max-width:900px){.ev-proof{left:16px;bottom:160px}} /* above bar + app bar */
@media(prefers-reduced-motion:reduce){.ev-proof{transition:opacity 1ms}}
/* ==========================================================================
SPLIT SECTION HEAD — heading left, the one-line why on the right
========================================================================== */
.ev-head--split{max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
gap:var(--sp-6) var(--sp-8);align-items:end}
.ev-head--split > p{margin:0;color:var(--text-secondary);max-width:var(--measure-head);justify-self:end}
@media(max-width:900px){.ev-head--split{grid-template-columns:minmax(0,1fr)}.ev-head--split > p{justify-self:start}}
/* ==========================================================================
CHOOSE YOUR SHIP — vessel cards (home, cruise hubs, "ships on this route")
========================================================================== */
.ev-ships{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5);margin-top:var(--section-head-gap)}
.ev-ship{display:flex;flex-direction:column;border:1px solid var(--border-soft);border-radius:var(--r-lg);
overflow:hidden;background:var(--surface);color:inherit;
transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.ev-ship:hover{box-shadow:var(--shadow-2);transform:translateY(-3px)}
.ev-ship__media{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--surface-sunken)}
.ev-ship__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.ev-ship:hover .ev-ship__media img{transform:scale(1.04)}
.ev-ship__body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;flex:1}
.ev-ship__kind{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:0;color:var(--text-link)}
.ev-ship__name{font-size:1.12rem;font-weight:var(--fw-bold);color:var(--text-heading);letter-spacing:var(--ls-heading)}
.ev-ship__route{font-size:var(--fs-sm);color:var(--text-secondary)}
.ev-ship__foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:auto;
padding-top:12px;border-top:1px solid var(--border-soft)}
.ev-ship__dur{font-size:var(--fs-xs);color:var(--text-muted)}
.ev-ship__price{font-size:1.05rem;font-weight:var(--fw-black);color:var(--text-heading)}
.ev-ship__price small{font-size:var(--fs-micro);font-weight:var(--fw-semi);color:var(--text-muted);letter-spacing:0}
.ev-ships__more{align-items:center}
.ev-ships__more .ev-textlink{margin-left:auto}
@media(max-width:1080px){.ev-ships{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
.ev-ships{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;scrollbar-width:none}
.ev-ships::-webkit-scrollbar{display:none}
.ev-ship{flex:0 0 78%;scroll-snap-align:start}
.ev-ships__more .ev-textlink{margin-left:0}
}
/* the eclipse band — the offers band, carrying three facts */
.ev-band__facts{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin:var(--sp-6) 0 0;padding:0;list-style:none}
.ev-band__facts b{display:block;font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:var(--fw-black);
color:var(--accent-on-navy);letter-spacing:var(--ls-heading);line-height:1.1}
.ev-band__facts span{display:block;margin-top:4px;font-size:var(--fs-xs);color:var(--text-on-inverse-muted)}
.ev-band--eclipse{background:linear-gradient(115deg,var(--ev-navy-deep) 0%,var(--ev-navy) 60%,var(--ev-ocean) 130%)}
/* WHY BOOK — a quiet ruled list, not a wall of icon tiles (category
standard at the A&K / Audley end: proof as text, icons as small marks) */
.ev-value{background:none;border:0;border-top:1px solid var(--border-soft);border-radius:0;
padding:18px 0;column-gap:14px;box-shadow:none}
.ev-value:hover{background:none;border-color:var(--border-soft);box-shadow:none;transform:none}
.ev-value__icon{width:24px;height:24px;background:none;color:var(--ev-ocean);border-radius:0}
.ev-value:hover .ev-value__icon{background:none;color:var(--ev-ocean)}
.ev-value__icon svg{width:22px;height:22px}
.ev-value p{grid-column:2}
@media(max-width:640px){.ev-value{padding:16px 0}.ev-value__icon{width:22px;height:22px}}
/* no coloured glow on navy — depth there comes from contrast, not light */
.ev-section--navy .ev-btn--cta,.ev-band .ev-btn--cta,.ev-section--navy .ev-btn--wa,.ev-band .ev-btn--wa{box-shadow:none}
.ev-why__list,.ev-why__list--flat{gap:0 var(--sp-8)}
/* ==========================================================================
FINISH-REVIEW FIXES (2026-10-20) — the direction contract made literal:
orange only on the primary action; quiet cards (hairline, no fill);
every number printed once.
========================================================================== */
/* orange leaves the headings: emphasis is weight, in the heading's own colour */
h1>span:where(:not([class],[data-ty-name])) em,.ev-em,.ev-head h2 em,.ev-band h2 em,.evt-h2 em{color:inherit}
.ev-section--navy :is(.ev-head h2 em,.ev-em){color:inherit}
.ev-band__facts b{color:var(--ev-white)}
.ev-step::before{color:var(--ev-sky)}
.ev-section:not(.ev-section--navy) .ev-step::before{color:var(--ev-ocean)}
.ev-badge--promo{background:var(--ev-navy);color:var(--ev-white)}
/* quiet cards and panels */
.ev-rv,.ev-rv:hover{background:var(--surface)}
.ev-trust__ic{background:none;width:auto;height:auto}
.ev-trust--navy .ev-trust__ic{background:none}
/* finish-review round 2 */
.ev-card__dur{color:var(--text-link)}
.ev-card__plan li::before{border-color:var(--ev-ocean)}
.ev-faq__lead{font-size:clamp(1.15rem,1.8vw,1.4rem);font-weight:var(--fw-bold);letter-spacing:var(--ls-heading);
text-transform:none;color:var(--text-heading)}
.ev-faq__lead::after{display:none}
/* finish-review round 3: the last orange that was not an action */
.ev-dest__count{color:var(--ev-white)}
.ev-meta__tag{background:color-mix(in srgb,var(--ev-ocean) 10%,var(--surface));color:var(--ev-navy)}
/* DESIGN.md conformance: orange stays on CTA fills, logo mark and stars */
.ev-price__unit{font-size:var(--fs-micro)}
.ev-reassure svg,.evt-eside svg{color:var(--ev-ocean)}
.ev-section--navy .ev-reassure svg{color:var(--ev-sky)}
/* ==========================================================================
ROUND 4 — tour card v2: photograph-led, no box, one quiet action.
Opt in with .ev-tourgrid--v2 on the grid.
========================================================================== */
.ev-tourgrid--v2{gap:clamp(28px,3vw,44px) clamp(20px,2.4vw,32px)}
.ev-tourgrid--v2 .ev-card{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
.ev-tourgrid--v2 .ev-card:hover{transform:none;box-shadow:none}
.ev-tourgrid--v2 .ev-card__media{aspect-ratio:5/3;border-radius:var(--r-lg);margin:0;
box-shadow:0 1px 2px rgba(12,51,82,.08);transition:box-shadow var(--dur-base) var(--ease)}
.ev-tourgrid--v2 .ev-card:hover .ev-card__media{box-shadow:0 18px 40px -14px rgba(12,51,82,.38)}
.ev-tourgrid--v2 .ev-card__media::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;
background:linear-gradient(to top,rgba(12,51,82,.55),transparent);pointer-events:none}
.ev-card__chip{position:absolute;left:14px;bottom:14px;z-index:2;padding:7px 13px;border-radius:var(--r-pill);
background:var(--ev-white);color:var(--ev-navy-deep,#0C3352);font-size:var(--fs-micro);font-weight:var(--fw-bold);
letter-spacing:.02em;box-shadow:0 4px 14px rgba(12,51,82,.2)}
.ev-tourgrid--v2 .ev-card__media .ev-badge--promo{top:14px;right:14px;left:auto;background:rgba(12,51,82,.82)}
.ev-tourgrid--v2 .ev-card__body{padding:18px 2px 0}
.ev-card__kind{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.1em;
color:var(--text-link)}
.ev-tourgrid--v2 .ev-card__title{margin-top:6px;font-size:clamp(1.18rem,1.5vw,1.32rem);line-height:1.25;letter-spacing:-.01em}
.ev-tourgrid--v2 .ev-card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.ev-tourgrid--v2 .ev-card__route{margin-top:8px;font-size:var(--fs-xs);letter-spacing:0;text-transform:none;font-weight:var(--fw-medium,500)}
.ev-tourgrid--v2 .ev-card__plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px;margin-top:16px;padding:16px 0 0;
border-top:1px solid var(--border-soft)}
.ev-tourgrid--v2 .ev-card__plan li{display:flex;gap:8px;align-items:flex-start;padding-left:0;margin:0}
.ev-tourgrid--v2 .ev-card__plan li + li{margin-top:0}
.ev-tourgrid--v2 .ev-card__plan li::after{display:none}
.ev-tourgrid--v2 .ev-card__plan li::before{position:static;flex:none;width:16px;height:16px;margin-top:1px;border:0;border-radius:50%;
background:var(--surface-sunken) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%230478B3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.ev-tourgrid--v2 .ev-card__plan b{font-size:var(--fs-xs);font-weight:var(--fw-medium,500);color:var(--text-secondary);line-height:1.35}
.ev-tourgrid--v2 .ev-card__plan span{display:none}
.ev-tourgrid--v2 .ev-card__foot{margin-top:auto;padding-top:18px;border-top:0;align-items:center}
.ev-tourgrid--v2 .ev-card__plan{margin-bottom:0}
.ev-tourgrid--v2 .ev-card__body > .ev-card__plan{margin-bottom:4px}
/* a card with fewer than two highlights (generated or typed) ends after its price row instead of stretching to the row height */
.ev-card--thin{align-self:start}
.ev-card--thin .ev-card__foot{margin-top:0}
.ev-tourgrid--v2 .ev-price__value{font-size:1.55rem}
.ev-tourgrid--v2 .ev-card__actions{position:relative;z-index:2}
@media(max-width:620px){.ev-tourgrid--v2 .ev-card__plan{grid-template-columns:minmax(0,1fr)}}
/* long listings: cards after the first screens are not rendered until they come near the viewport (all of them stay
in the HTML, so every trip link is still crawlable). Heights measured on staging: phone median 379px, 3-column desktop ~500px. */
.ev-tourgrid--v2 > .ev-card:nth-child(n+7){content-visibility:auto;contain-intrinsic-size:auto 420px}
@media(min-width:1041px){.ev-tourgrid--v2 > .ev-card:nth-child(n+7){contain-intrinsic-size:auto 500px}}
.ev-tourgrid--v2 .ev-card__plan li{justify-content:flex-start;text-align:left}
/* ---- ways to travel: a bento, the cruise tile leads ---- */
.ev-portals--bento{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(270px,auto));gap:var(--sp-5)}
.ev-portals--bento .ev-portal{min-height:0;padding:clamp(24px,3vw,40px);border-radius:var(--r-xl)}
.ev-portals--bento .ev-portal:first-child{grid-column:1;grid-row:1 / span 2}
.ev-portals--bento .ev-portal:first-child h3{font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.025em}
.ev-portals--bento .ev-portal:first-child p{font-size:var(--fs-base,1rem);max-width:38ch}
.ev-portals--bento .ev-portal h3{font-size:clamp(1.5rem,2.2vw,1.9rem);letter-spacing:-.02em}
.ev-portals--bento .ev-portal p{max-width:44ch}
.ev-portals--bento .ev-portal::after{background:var(--scrim)}
.ev-portals--bento .ev-portal__go{border-top:0;padding-top:0;margin-top:16px;align-self:flex-start;
min-height:44px;padding:0 20px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.35);text-transform:none;letter-spacing:0;font-size:var(--fs-sm)}
.ev-portals--bento .ev-portal:hover .ev-portal__go{background:var(--ev-white);color:var(--ev-navy)}
@media(max-width:1040px){.ev-portals--bento{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
.ev-portals--bento .ev-portal:first-child{grid-row:auto;min-height:420px}
.ev-portals--bento .ev-portal{min-height:300px}}
/* six or more tiles (the day-trip destinations): the first three keep the bento, the rest sit in rows of three, a third of the width each */
.ev-portals--bento:has(> .ev-portal:nth-child(6)){grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(270px,auto)}
.ev-portals--bento:has(> .ev-portal:nth-child(6)) > .ev-portal:nth-child(1){grid-column:1 / span 3}
.ev-portals--bento:has(> .ev-portal:nth-child(6)) > .ev-portal:nth-child(n+2):nth-child(-n+3){grid-column:4 / span 3}
.ev-portals--bento:has(> .ev-portal:nth-child(6)) > .ev-portal:nth-child(n+4){grid-column:span 2}
.ev-portals--bento:has(> .ev-portal:nth-child(6)) > .ev-portal:nth-child(n+4) h3{font-size:clamp(1.3rem,1.8vw,1.6rem)}
@media(max-width:1040px){
/* two columns: the first tile across both, then pairs; a tile left alone at the end goes across both too */
.ev-portals--bento:has(> .ev-portal:nth-child(6)){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto}
.ev-portals--bento:has(> .ev-portal:nth-child(6)) > .ev-portal:nth-child(1){grid-column:1 / -1;grid-row:auto}
.ev-portals--bento:has(> .ev-portal:nth-child(6)) > .ev-portal:nth-child(n+2):nth-child(-n+3){grid-column:auto}
.ev-portals--bento:has(> .ev-portal:nth-child(6)) > .ev-portal:nth-child(n+4){grid-column:auto}
.ev-portals--bento:has(> .ev-portal:nth-child(6)) > .ev-portal:last-child:nth-child(even){grid-column:1 / -1}
}
@media(max-width:640px){
.ev-portals--bento:has(> .ev-portal:nth-child(6)){grid-template-columns:minmax(0,1fr)}
.ev-portals--bento:has(> .ev-portal:nth-child(6)) > .ev-portal:last-child:nth-child(even){grid-column:auto}
}
/* ---- tiles: a compact row of image cards (the Nile cruise types, the sub-categories and sibling pages under a listing) ---- */
.ev-portals.ev-portals--tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4);grid-template-columns:none;grid-template-rows:none}
.ev-portals--tiles .ev-portal{flex:0 1 calc((100% - 3 * var(--sp-4)) / 4);min-width:220px;min-height:250px;padding:22px;border-radius:var(--r-lg)}
.ev-portals--tiles .ev-portal h3{margin-top:0;font-size:clamp(1.15rem,1.5vw,1.35rem);letter-spacing:-.01em}
.ev-portals--tiles .ev-portal p{margin-top:8px;font-size:var(--fs-xs);line-height:1.5}
.ev-portals--tiles .ev-portal__go{margin-top:12px;padding-top:12px}
@media(max-width:1040px){.ev-portals--tiles .ev-portal{flex-basis:calc((100% - 2 * var(--sp-4)) / 3);min-height:220px}}
@media(max-width:820px){.ev-portals--tiles .ev-portal{flex-basis:calc((100% - var(--sp-4)) / 2)}}
@media(max-width:640px){.ev-portals--tiles .ev-portal{flex-basis:100%;min-width:0;min-height:190px}}
/* exactly four tiles (the Nile cruise types): 2 x 2 from 768, four across from 1200, tiles about 300px tall (never one per row on a tablet) */
.ev-portals--bento:has(> .ev-portal:nth-child(4)):not(:has(> .ev-portal:nth-child(5))){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(300px,auto)}
.ev-portals--bento:has(> .ev-portal:nth-child(4)):not(:has(> .ev-portal:nth-child(5))) > .ev-portal{grid-column:auto;grid-row:auto;min-height:300px}
.ev-portals--bento:has(> .ev-portal:nth-child(4)):not(:has(> .ev-portal:nth-child(5))) > .ev-portal h3{font-size:clamp(1.3rem,1.8vw,1.6rem)}
.ev-portals--bento:has(> .ev-portal:nth-child(4)):not(:has(> .ev-portal:nth-child(5))) > .ev-portal p{font-size:var(--fs-sm)}
@media(min-width:1200px){.ev-portals--bento:has(> .ev-portal:nth-child(4)):not(:has(> .ev-portal:nth-child(5))){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:767px){.ev-portals--bento:has(> .ev-portal:nth-child(4)):not(:has(> .ev-portal:nth-child(5))){grid-template-columns:minmax(0,1fr)}
.ev-portals--bento:has(> .ev-portal:nth-child(4)):not(:has(> .ev-portal:nth-child(5))) > .ev-portal{min-height:260px}}
/* the compact tiles with exactly four cards (the Nile cruise types): 2 x 2 from 641, four across from 1200 */
@media(min-width:641px){.ev-portals--tiles:has(> .ev-portal:nth-child(4)):not(:has(> .ev-portal:nth-child(5))) .ev-portal{flex:0 0 calc(50% - var(--sp-4) / 2);max-width:none;min-height:250px}}
@media(min-width:1200px){.ev-portals--tiles:has(> .ev-portal:nth-child(4)):not(:has(> .ev-portal:nth-child(5))) .ev-portal{flex:0 0 calc(25% - var(--sp-4) * 3 / 4)}}
/* ---- the eclipse: full-bleed night, a drawn sun behind the moon ---- */
.ev-eclipse{position:relative;isolation:isolate;overflow:hidden;background:#071F33;color:var(--ev-white);
padding:clamp(72px,9vw,128px) 0}
.ev-eclipse__sky{position:absolute;inset:0;z-index:-1;
background:radial-gradient(1200px 600px at 78% 50%,rgba(4,120,179,.35),transparent 60%),
radial-gradient(2px 2px at 12% 22%,rgba(255,255,255,.7),transparent),radial-gradient(1.5px 1.5px at 28% 70%,rgba(255,255,255,.5),transparent),
radial-gradient(1.5px 1.5px at 44% 14%,rgba(255,255,255,.55),transparent),radial-gradient(2px 2px at 58% 84%,rgba(255,255,255,.45),transparent),
radial-gradient(1.5px 1.5px at 92% 18%,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 6% 88%,rgba(255,255,255,.4),transparent)}
.ev-eclipse__sun{position:absolute;right:clamp(-120px,4vw,90px);top:50%;width:clamp(260px,30vw,420px);aspect-ratio:1;
transform:translateY(-50%);border-radius:50%;background:#030D16;
box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 22px 6px rgba(255,255,255,.65),0 0 70px 26px rgba(32,158,218,.45),
0 0 160px 70px rgba(4,120,179,.28),0 0 300px 120px rgba(32,158,218,.12)}
.ev-eclipse__sun::after{content:"";position:absolute;right:9%;top:13%;width:7%;aspect-ratio:1;border-radius:50%;
background:#fff;box-shadow:0 0 18px 8px rgba(255,255,255,.85)} /* the diamond-ring bead */
.ev-eclipse .ev-band{background:none;padding:0;border-radius:0;overflow:visible}
.ev-eclipse .ev-band__inner{flex-direction:column;align-items:flex-start;gap:var(--sp-7);max-width:640px}
.ev-eclipse h2{font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.05;letter-spacing:var(--ls-display)}
.ev-eclipse .ev-band p{font-size:clamp(1rem,1.3vw,1.1rem);color:rgba(255,255,255,.78)}
.ev-eclipse .ev-band__facts{gap:0;margin-top:var(--sp-7);border-top:1px solid rgba(255,255,255,.16);padding-top:var(--sp-6)}
.ev-eclipse .ev-band__facts li{padding-right:clamp(20px,3vw,40px);margin-right:clamp(20px,3vw,40px);border-right:1px solid rgba(255,255,255,.16)}
.ev-eclipse .ev-band__facts li:last-child{border:0;margin:0;padding:0}
.ev-eclipse .ev-band__facts b{font-size:clamp(1.8rem,3.2vw,2.6rem);letter-spacing:var(--ls-display)}
@media(max-width:820px){
.ev-eclipse__sun{top:70px;right:-90px;width:230px;transform:none;opacity:.8}
.ev-eclipse .ev-band__inner{padding-top:150px}
.ev-eclipse .ev-band__facts li{border:0;margin-right:0;padding-right:28px}}
/* ---- ships: tall photographs, the facts set on the picture ---- */
.ev-ships--v2 .ev-ship{position:relative;isolation:isolate;border:0;border-radius:var(--r-xl);overflow:hidden;
aspect-ratio:4/5;justify-content:flex-end;background:var(--ev-navy)}
.ev-ships--v2 .ev-ship__media{position:absolute;inset:0;z-index:-2;aspect-ratio:auto}
.ev-ships--v2 .ev-ship::after{content:"";position:absolute;inset:0;z-index:-1;
background:var(--scrim)}
.ev-ships--v2 .ev-ship__body{flex:none;padding:22px 22px 20px;gap:4px}
.ev-ships--v2 .ev-ship__kind{color:var(--ev-sky)}
.ev-ships--v2 .ev-ship__name{color:var(--ev-white);font-size:1.35rem}
.ev-ships--v2 .ev-ship__route{color:rgba(255,255,255,.78)}
.ev-ships--v2 .ev-ship__foot{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2)}
.ev-ships--v2 .ev-ship__dur{color:rgba(255,255,255,.72)}
.ev-ships--v2 .ev-ship__price{color:var(--ev-white);font-size:1.2rem}
.ev-ships--v2 .ev-ship__price small{color:rgba(255,255,255,.72)}
.ev-ships--v2 .ev-ship:hover{transform:translateY(-4px);box-shadow:0 22px 44px -16px rgba(12,51,82,.5)}
/* ---- how it works: a track with numbered stations ---- */
.ev-how--track{gap:0;margin-top:var(--sp-8)}
.ev-how--track .ev-step{padding:84px 24px 0 0}
.ev-how--track .ev-step::before{width:60px;height:60px;display:grid;place-items:center;border-radius:50%;
border:1.5px solid var(--ev-sky);background:var(--ev-navy);font-size:1.25rem;font-weight:var(--fw-black);letter-spacing:0;color:var(--ev-white)}
.ev-how--track .ev-step::after{top:30px;left:60px;right:0;height:1.5px;background:linear-gradient(90deg,var(--ev-sky),rgba(32,158,218,.25))}
.ev-how--track .ev-step:last-child::after{display:block;right:auto;width:0}
.ev-how--track .ev-step:first-child::before{background:var(--ev-sky);border-color:var(--ev-sky);color:var(--ev-navy-deep)}
.ev-how--track .ev-step h3{font-size:1.2rem}
.ev-how--track .ev-step p{font-size:var(--fs-sm);color:var(--text-on-inverse-secondary)}
@media(max-width:1040px){.ev-how--track{gap:var(--sp-7) var(--sp-5)}}
@media(max-width:520px){
.ev-how--track .ev-step{padding:0 0 0 80px;min-height:60px}
.ev-how--track .ev-step::after{display:block;top:62px;bottom:calc(var(--sp-7) * -1);left:29px;right:auto;width:1.5px;height:auto;background:rgba(32,158,218,.4)}
.ev-how--track .ev-step:last-child::after{display:none}}
.ev-ships--v2 .ev-ship::after{background:var(--scrim)}
.ev-ships--v2 .ev-ship__kind{color:rgba(255,255,255,.85)}
.ev-eclipse .ev-band__inner{max-width:720px}
.ev-eclipse .ev-band__facts{flex-wrap:nowrap}
.ev-eclipse .ev-band__facts b{font-size:clamp(1.6rem,2.6vw,2.2rem);white-space:nowrap}
@media(max-width:620px){.ev-eclipse .ev-band__facts{flex-wrap:wrap;gap:18px 0}}
/* ---- why us (one design on every page): statement + photo with the licence badge, then the six reasons as cards ---- */
.ev-why2__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.ev-why2 .ev-head p{font-size:clamp(1rem,1.3vw,1.12rem);max-width:var(--measure-head)}
.ev-why2__figure{position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:3/2;background:var(--surface-sunken)}
.ev-why2__figure img{width:100%;height:100%;object-fit:cover}
.ev-why2__licence{position:absolute;inset-inline-start:18px;bottom:18px;display:flex;align-items:center;gap:12px;
padding-block:12px;padding-inline:14px 18px;border-radius:var(--r-lg);background:var(--ev-white);box-shadow:0 12px 30px -8px rgba(12,51,82,.35)}
.ev-why2__licence svg{width:30px;height:30px;flex:none;color:var(--ev-ocean)}
.ev-why2__licence b{display:block;font-size:1rem;color:var(--text-heading)}
.ev-why2__licence span{font-size:var(--fs-micro);color:var(--text-muted)}
/* the six reasons: one card each, the icon on the title line, equal heights per row (grid stretch) */
.ev-why2__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(36px,4.5vw,56px)}
.ev-why2 .ev-value{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;align-items:center;align-content:start;
column-gap:14px;row-gap:12px;min-width:0;padding:clamp(20px,2.2vw,28px);border:1px solid var(--border-soft);border-radius:var(--r-lg);
background:var(--ev-navy-05);box-shadow:none;transform:none;
transition:border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.ev-why2 .ev-value:hover{background:var(--ev-navy-05);border-color:var(--border);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.ev-why2 .ev-value__icon{grid-row:1;grid-column:1;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);
background:var(--ev-white);color:var(--ev-ocean);box-shadow:var(--shadow-1);transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.ev-why2 .ev-value:hover .ev-value__icon{background:var(--ev-ocean);color:var(--ev-white)}
.ev-why2 .ev-value__icon svg{width:22px;height:22px}
.ev-why2 .ev-value h3{grid-row:1;grid-column:2;min-width:0;font-size:1.08rem;font-weight:var(--fw-bold);line-height:var(--lh-tight);color:var(--text-heading);
overflow-wrap:break-word;hyphens:auto}
.ev-why2 .ev-value p{grid-row:2;grid-column:1 / -1;align-self:start;min-width:0;margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-secondary);
overflow-wrap:break-word;hyphens:auto}
@media(max-width:900px){
.ev-why2__top{grid-template-columns:minmax(0,1fr)}
.ev-why2__list{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:560px){.ev-why2__list{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.ev-why2 .ev-value,.ev-why2 .ev-value:hover{transition:none;transform:none}}
/* ---- reviews v2: the scores hold the left column, the quotes the right ---- */
.ev-reviews2 .ev-container{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);
grid-template-areas:"head wall" "bar wall";grid-template-rows:auto 1fr;gap:28px clamp(32px,5vw,72px);align-items:start}
.ev-reviews2 .ev-head{grid-area:head;text-align:left;margin:0}
.ev-reviews2 .ev-head p{margin-left:0}
.ev-reviews2 .ev-rvbar{grid-area:bar;grid-template-columns:minmax(0,1fr);margin:0;gap:12px;position:sticky;top:calc(var(--ev-header-h,80px) + 24px)}
.ev-reviews2 .ev-rvbar__plat{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:18px 20px}
.ev-reviews2 .ev-rvbar__plat b{font-size:2.6rem;order:-1}
.ev-reviews2 .ev-rvbar__mark{margin:0}
.ev-reviews2 .ev-rvbar__go{flex-basis:100%;padding-top:4px}
.ev-reviews2 .ev-rvwall{grid-area:wall;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:0;gap:16px}
.ev-reviews2 .ev-rv{border:0;background:var(--surface-sunken);padding:24px 26px}
.ev-reviews2 .ev-rv::after{display:none}
.ev-reviews2 .ev-rv:hover{transform:none;box-shadow:none}
.ev-reviews2 .ev-rv:first-child{grid-column:1 / -1;background:var(--ev-navy);padding:clamp(28px,3.4vw,44px)}
.ev-reviews2 .ev-rv:first-child .ev-rv__title{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.15;color:var(--ev-white);-webkit-line-clamp:unset}
.ev-reviews2 .ev-rv:first-child .ev-rv__title::before{content:"\201C";display:block;font-size:4rem;line-height:.6;margin-bottom:8px;color:var(--ev-sky)}
.ev-reviews2 .ev-rv:first-child .ev-rv__body{font-size:1.05rem;color:rgba(255,255,255,.82);-webkit-line-clamp:unset;display:block}
.ev-reviews2 .ev-rv:first-child .ev-rv__who cite{color:var(--ev-white)}
.ev-reviews2 .ev-rv:first-child .ev-rv__who > span{color:rgba(255,255,255,.7)}
.ev-reviews2 .ev-rv:first-child .ev-rv__more,.ev-reviews2 .ev-rv:first-child .ev-rv__foot{color:var(--ev-white);border-color:rgba(255,255,255,.2)}
.ev-reviews2 .ev-rv:first-child .ev-rv__mark svg{color:var(--ev-white)}
.ev-reviews2 .ev-rv:first-child [data-rv-more],.ev-reviews2 .ev-rv:first-child .ev-rv__toggle{display:none}
.ev-reviews2 .ev-rv--all{grid-column:1 / -1;background:none;border:1.5px dashed var(--border)}
@media(max-width:960px){
.ev-reviews2 .ev-container{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "bar" "wall"}
.ev-reviews2 .ev-rvbar{position:static;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:620px){.ev-reviews2 .ev-rvwall,.ev-reviews2 .ev-rvbar{grid-template-columns:minmax(0,1fr)}}
.ev-reviews2 .ev-rv:first-child .ev-rv__expand{display:none}
/* ---- destinations: a mosaic, Jordan (the usual add-on) leads ---- */
.ev-dests--mosaic{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(260px,auto));gap:var(--sp-4)}
.ev-dests--mosaic .ev-dest{min-height:0;padding:22px;border-radius:var(--r-xl)}
.ev-dests--mosaic .ev-dest:nth-child(2){grid-column:1;grid-row:1 / span 2;order:-1;padding:clamp(24px,3vw,36px)}
.ev-dests--mosaic .ev-dest:nth-child(2) h3{font-size:clamp(2rem,3.4vw,2.8rem);letter-spacing:-.02em}
.ev-dests--mosaic .ev-dest:nth-child(2) .ev-dest__tags li{font-size:var(--fs-xs);padding:5px 12px}
.ev-dests--mosaic .ev-dest h3{font-size:1.5rem}
.ev-dests--mosaic .ev-dest::after{background:var(--scrim)}
.ev-dests--mosaic .ev-dest__count{color:var(--ev-white);text-transform:none;letter-spacing:0;font-size:var(--fs-sm);
display:inline-flex;align-items:center;gap:8px;border-top:0;padding-top:0;margin-top:14px}
.ev-dests--mosaic .ev-dest__count svg{width:15px;height:15px}
.ev-dests--mosaic .ev-dest__season{text-transform:none;letter-spacing:0;font-weight:var(--fw-bold)}
@media(max-width:900px){.ev-dests--mosaic{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none}
.ev-dests--mosaic .ev-dest:nth-child(2){grid-column:1 / -1;grid-row:auto;min-height:360px}
.ev-dests--mosaic .ev-dest{min-height:240px}}
@media(max-width:520px){.ev-dests--mosaic{grid-template-columns:minmax(0,1fr)}}
/* home destinations without Egypt (Egypt is covered by the sections above): five cards, 3 on the first row and 2 wider on the second */
.ev-dests--five{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(280px,auto)}
.ev-dests--five .ev-dest,.ev-dests--five .ev-dest:nth-child(2){grid-column:span 2;grid-row:auto;order:0;padding:22px}
.ev-dests--five .ev-dest:nth-child(2) h3{font-size:1.5rem;letter-spacing:normal}
.ev-dests--five .ev-dest:nth-child(2) .ev-dest__tags li{font-size:var(--fs-micro);padding:3px 9px}
.ev-dests--five .ev-dest:nth-child(n+4){grid-column:span 3}
@media(max-width:900px){.ev-dests--five{grid-template-columns:repeat(2,minmax(0,1fr))}
.ev-dests--five .ev-dest,.ev-dests--five .ev-dest:nth-child(2),.ev-dests--five .ev-dest:nth-child(n+4){grid-column:span 1;min-height:240px}
.ev-dests--five .ev-dest:last-child{grid-column:1 / -1}}
@media(max-width:520px){.ev-dests--five{grid-template-columns:minmax(0,1fr)}.ev-dests--five .ev-dest:last-child{grid-column:auto}}
/* ---- guides: the lead story is a photograph with the title on it ---- */
.ev-journal--v2{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:stretch}
.ev-journal--v2 .ev-lead{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
min-height:480px;border:0;color:var(--ev-white);background:var(--ev-navy)}
.ev-journal--v2 .ev-lead__media{position:absolute;inset:0;z-index:-2;aspect-ratio:auto}
.ev-journal--v2 .ev-lead::after{content:"";position:absolute;inset:0;z-index:-1;
background:var(--scrim)}
.ev-journal--v2 .ev-lead__panel{padding:clamp(24px,3vw,40px)}
.ev-journal--v2 .ev-lead__panel h3{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.15;color:var(--ev-white);letter-spacing:-.02em;max-width:22ch}
.ev-journal--v2 .ev-lead__panel p{color:rgba(255,255,255,.82)}
.ev-journal--v2 .ev-lead .ev-meta{color:rgba(255,255,255,.8)}
.ev-journal--v2 .ev-lead .ev-meta__tag{background:rgba(255,255,255,.16);color:var(--ev-white)}
.ev-journal--v2 .ev-lead .ev-meta__dot{background:rgba(255,255,255,.5)}
.ev-journal--v2 .ev-journal__side{display:flex;flex-direction:column}
.ev-journal--v2 .ev-reads{gap:0;flex:1}
.ev-journal--v2 .ev-read{grid-template-columns:150px minmax(0,1fr);gap:20px;padding:20px 0;border:0;border-radius:0;
background:none;border-bottom:1px solid var(--border)}
.ev-journal--v2 .ev-read:first-child{padding-top:0}
.ev-journal--v2 .ev-read:hover{transform:none}
.ev-journal--v2 .ev-read:hover h3{color:var(--action-hover)}
.ev-journal--v2 .ev-read h3{font-size:1.1rem;font-weight:var(--fw-bold)}
.ev-journal--v2 .ev-reads__foot .ev-btn{width:auto}
@media(max-width:1000px){.ev-journal--v2{grid-template-columns:minmax(0,1fr)}.ev-journal--v2 .ev-lead{min-height:380px}}
@media(max-width:460px){.ev-journal--v2 .ev-read{grid-template-columns:100px minmax(0,1fr);gap:14px}}
/* ---- FAQ: the question list reads like a page, help sits beside it ---- */
.ev-faq--v2{max-width:var(--container,1200px);display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.ev-faq__side{position:sticky;top:calc(var(--ev-header-h,80px) + 24px)}
.ev-faq--v2 .ev-head{margin:0;text-align:left}
.ev-faq__ask{margin-top:28px;padding:24px;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--border);
display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ev-faq__ask p{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.6}
.ev-faq__ask b{display:block;font-size:1.05rem;color:var(--text-heading);margin-bottom:4px}
.ev-faq__ask .ev-textlink{font-size:var(--fs-sm)}
.ev-faq--v2 .ev-faq__lead{margin-top:0;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-muted);
letter-spacing:0}
.ev-faq--v2 .ev-accordion{margin-top:12px;border-top:1px solid var(--border)}
.ev-faq--v2 .ev-accordion__item{border:0;border-bottom:1px solid var(--border);border-radius:0;background:none;box-shadow:none;margin:0}
.ev-faq--v2 .ev-accordion__item + .ev-accordion__item{margin-top:0}
.ev-faq--v2 .ev-accordion__item.is-open{box-shadow:none}
.ev-faq--v2 .ev-accordion__btn{padding:22px 0;font-size:clamp(1.02rem,1.3vw,1.15rem);min-height:64px}
.ev-faq--v2 .ev-accordion__panel p{padding:0 56px 24px 0;font-size:var(--fs-base,1rem);font-weight:var(--fw-regular,400)}
.ev-faq--v2 .ev-accordion__sign{border-radius:50%;background:none;border:1.5px solid var(--border)}
.ev-faq--v2 .ev-accordion__btn[aria-expanded="true"] .ev-accordion__sign{background:var(--ev-navy);border-color:var(--ev-navy)}
.ev-faq--v2 .ev-seo__prose{margin-top:clamp(40px,5vw,64px);max-width:none}
@media(max-width:900px){.ev-faq--v2{grid-template-columns:minmax(0,1fr)}.ev-faq__side{position:static}}
/* ---- enquiry: a named person, not a department ---- */
.ev-person{display:flex;align-items:center;gap:16px;margin:28px 0 0;padding:16px 20px 16px 16px;border-radius:var(--r-xl);
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.ev-person__av,.ev-person img{width:64px;height:64px;flex:none;border-radius:50%;display:grid;place-items:center;object-fit:cover;
background:var(--ev-sky);color:var(--ev-navy-deep);font-size:1.25rem;font-weight:var(--fw-black);box-shadow:0 0 0 3px rgba(255,255,255,.2)}
.ev-person b{display:block;color:var(--ev-white);font-size:1.05rem}
.ev-person span{display:block;margin-top:3px;font-size:var(--fs-sm);color:var(--text-on-inverse-secondary);line-height:1.5}
.ev-person figcaption span{display:block;margin-top:3px;font-size:var(--fs-sm);color:var(--text-on-inverse-secondary);line-height:1.5}
.ev-person span.ev-person__av{display:grid;margin:0;font-size:1.25rem;color:var(--ev-navy-deep);line-height:1}
.ev-journal--v2 .ev-reads{flex:none}
@media(max-width:820px){
.ev-eclipse{padding-top:48px}
.ev-eclipse__sun{top:36px;right:-70px;width:190px}
.ev-eclipse .ev-band__inner{padding-top:190px}}
/* tour card v2, boxed (Megz prefers a border: the grid reads more ordered) */
.ev-tourgrid--v2 .ev-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:10px;
transition:border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.ev-tourgrid--v2 .ev-card:hover{border-color:rgba(17,72,115,.28);box-shadow:0 18px 40px -18px rgba(12,51,82,.35)}
.ev-tourgrid--v2 .ev-card__media,.ev-tourgrid--v2 .ev-card:hover .ev-card__media{box-shadow:none}
.ev-tourgrid--v2 .ev-card__body{padding:16px 10px 8px}
.ev-tourgrid--v2{gap:clamp(20px,2.2vw,28px)}
.ev-tourgrid--v2 .ev-card__excerpt{margin-top:12px;font-size:var(--fs-sm);line-height:1.6;color:var(--text-secondary);
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ev-tourgrid--v2 .ev-card__from{display:none}
/* tips panel: orange stays on buttons (DESIGN.md) */
.ev-tips__ic{background:rgba(4,120,179,.09);color:var(--ev-ocean)}
.ev-tips__tab[aria-selected="true"] .ev-tips__ic{background:rgba(255,255,255,.14);color:var(--ev-white)}
.ev-tips__tab[aria-selected="true"] .ev-tips__arrow{color:var(--ev-white)}
.ev-tips__tip{background:rgba(32,158,218,.1)}
.ev-tips__tiplab{color:var(--ev-ocean)}
.ev-why2 .ev-head p + p{margin-top:12px}
/* ==========================================================================
SYSTEM — one design per job (DESIGN.md › Section System). Everything a
page section needs is here; page stylesheets only lay out what is unique
to that page.
========================================================================== */
/* -- Section title: light, with the bold half in an em. One size. -------- */
.ev-head h2{font-size:var(--fs-h2);font-weight:var(--fw-light);line-height:1.06;letter-spacing:-.025em}
.ev-head h2 em,.ev-head h2 .ev-em{letter-spacing:var(--ls-display)}
.ev-head--split.ev-head--link{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.ev-head--split.ev-head--link > .ev-textlink{justify-self:end;max-width:min(100%,26rem);white-space:normal;text-align:left} /* a long translated link wraps inside its box instead of running off the screen */
.ev-head--split.ev-head--link > div > p{margin-top:14px;font-size:var(--fs-lede);line-height:var(--lh-body);color:var(--text-secondary);max-width:var(--measure-head)}
@media(max-width:900px){.ev-head--split.ev-head--link{grid-template-columns:minmax(0,1fr)}.ev-head--split.ev-head--link > .ev-textlink{justify-self:start}}
.ev-container > .ev-head + *{margin-top:var(--section-head-gap,clamp(28px,3.4vw,44px))}
.ev-reviews2 .ev-container > .ev-head + *{margin-top:0}
/* -- Buttons: one outline. Navy line, navy label; fills navy on hover. --- */
.ev-btn--ghost{background:transparent;color:var(--ev-navy);border:1.5px solid var(--ev-navy);box-shadow:none}
.ev-btn--ghost:hover,
.ev-card:hover .ev-btn--ghost{background:var(--btn-cta-bg);border-color:var(--btn-cta-bg);color:var(--btn-cta-fg)}
.ev-textlink--on-dark{color:var(--ev-white);text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);
text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center;gap:9px;font-weight:var(--fw-semi)}
.ev-textlink--on-dark:hover{color:var(--ev-white);text-decoration-color:var(--ev-white)}
.ev-textlink--on-dark svg{width:20px;height:20px;fill:currentColor}
/* -- Closing band: the last word on every page that has no form. -------- */
.ev-closeband{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);min-height:440px;
display:flex;align-items:flex-end;padding:clamp(28px,5vw,64px);background:var(--ev-navy);color:var(--ev-white)}
.ev-closeband > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.ev-closeband::before{content:"";position:absolute;inset:0;z-index:-1;
background:var(--scrim),
linear-gradient(90deg,rgba(12,51,82,.6),rgba(12,51,82,0) 70%)}
.ev-closeband__in{max-width:680px}
.ev-closeband h2{font-size:var(--fs-h2);font-weight:var(--fw-light);line-height:1.06;letter-spacing:-.025em;color:var(--ev-white)}
.ev-closeband h2 em{font-style:normal;font-weight:var(--fw-black);color:inherit;letter-spacing:var(--ls-display)}
.ev-closeband p{margin-top:16px;font-size:var(--fs-lede);line-height:var(--lh-body);color:rgba(255,255,255,.84);max-width:var(--measure-head)}
.ev-closeband__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-6)}
@media(max-width:620px){.ev-closeband{min-height:400px}.ev-closeband__acts{flex-direction:column;align-items:stretch}}
/* -- Portals (ways to travel): count sits in the button ----------------- */
.ev-portal__n{position:static;font-size:inherit;font-weight:var(--fw-regular,400);color:inherit;opacity:.8;margin-left:6px}
.ev-portal__n::before{content:"· "}
/* -- Chip row (quick links under a section) ----------------------------- */
.ev-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-6)}
.ev-chiprow a:not(.ev-textlink){display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--border);
border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--text-heading);background:var(--surface)}
.ev-chiprow a:not(.ev-textlink):hover{border-color:var(--ev-navy);background:var(--surface-sunken)}
/* -- Ship categories: overlay boxes under the ships row (full-bleed photo, scrim, label, title, one line, ships left and from price right) -- */
.ev-shipcats{margin-top:var(--sp-7)}
.ev-shipcats__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5)}
.ev-shipcats__grid > li{display:flex;min-width:0}
.ev-shipcat{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;width:100%;min-width:0;aspect-ratio:4/5;
border-radius:var(--r-xl);overflow:hidden;background:var(--ev-navy);color:var(--ev-white);
transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.ev-shipcat:hover{transform:translateY(-4px);box-shadow:0 22px 44px -16px rgba(12,51,82,.5);color:var(--ev-white)}
.ev-shipcat:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ev-shipcat__media{position:absolute;inset:0;z-index:-2;display:block;overflow:hidden;background:var(--ev-navy)}
.ev-shipcat__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.ev-shipcat:hover .ev-shipcat__media img{transform:scale(1.04)}
.ev-shipcat::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--scrim)}
.ev-shipcat__body{display:flex;flex-direction:column;gap:4px;min-width:0;padding:22px 22px 20px}
.ev-shipcat__kind{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:0;color:rgba(255,255,255,.85)}
.ev-shipcat__name{font-size:1.35rem;font-weight:var(--fw-bold);color:var(--ev-white);letter-spacing:var(--ls-heading);overflow-wrap:anywhere}
.ev-shipcat__desc{font-size:var(--fs-sm);color:rgba(255,255,255,.78);overflow-wrap:anywhere}
.ev-shipcat__foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2)}
.ev-shipcat__meta{font-size:var(--fs-xs);color:rgba(255,255,255,.72);min-width:0;overflow-wrap:anywhere}
.ev-shipcat__price{font-size:1.1rem;font-weight:var(--fw-black);color:var(--ev-white);text-align:right}
.ev-shipcats__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;margin:var(--sp-7) 0 0}
.ev-shipcats__cta .ev-btn{margin-block:0;padding-block:0}
@media(max-width:1080px){.ev-shipcats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ev-shipcat{aspect-ratio:4/3}}
@media(max-width:560px){
.ev-shipcats__grid{grid-template-columns:minmax(0,1fr);gap:14px}
.ev-shipcat{aspect-ratio:16/10}
.ev-shipcat__body{padding:18px 18px 16px}
.ev-shipcats__cta{justify-content:stretch}
.ev-shipcats__cta .ev-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.ev-shipcat,.ev-shipcat__media img{transition:none}.ev-shipcat:hover{transform:none}.ev-shipcat:hover .ev-shipcat__media img{transform:none}}
/* -- Questions: one look, whether the page uses the accordion or */
.evt-qa{background:none;border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;margin:0}
.evt-qa:first-of-type{border-top:1px solid var(--border)}
.evt-qa[open]{box-shadow:none}
.evt-qa summary{padding:22px 0;min-height:64px;font-size:clamp(1.02rem,1.3vw,1.12rem)}
.evt-qa .chev{border-radius:50%;background:none;border:1.5px solid var(--border)}
.evt-qa[open] .chev{background:var(--ev-navy);border-color:var(--ev-navy);color:var(--ev-white)}
.evt-qa > p,.evt-qa > div{padding:0 56px 24px 0}
.evt-qa + .evt-qa{margin-top:0}
/* WhatsApp round button: the icon is the brand mark, drawn either way */
.ev-wa-btn svg{width:22px;height:22px;fill:currentColor;stroke:none}
.ev-wa-btn svg:not(:has(use)){fill:none;stroke:currentColor}
/* ==========================================================================
Section divider (standard): background alternation separates sections; this 4px rule (short orange, a blue
segment, then the neutral line) only sits between two adjacent sections that share a background. The page
build adds .is-same-bg to the second section; .ev-rule is the same rule as an element.
========================================================================== */
.ev-rule,.is-same-bg::before{display:block;height:4px;border:0;
background:linear-gradient(to right,var(--accent) 0 40px,var(--ev-navy) 40px 104px,var(--border) 104px 100%)}
.ev-rule{max-width:var(--container);margin:50px auto}
.is-same-bg{position:relative}
.is-same-bg::before{content:"";width:min(var(--container),calc(100% - 2 * var(--gutter)));margin:0 auto 50px}
/* -- Hub trust strip (directly under the hub hero): one list, four facts, same facts as the home hero proof line -- */
.ev-proofbar{margin:calc(var(--sp-8) * -1 + var(--sp-6)) 0 clamp(32px,5vw,64px)}
.ev-proofbar ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);margin:0;padding:0;list-style:none}
.ev-proofbar li{display:flex;align-items:center;gap:14px;min-width:0;padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-lg);
background:var(--surface-sunken);font-size:var(--fs-xs);line-height:1.3;color:var(--text-muted)}
.ev-proofbar svg{box-sizing:border-box;width:44px;height:44px;flex:none;padding:11px;border-radius:var(--r-md);background:var(--surface);color:var(--ev-navy)}
.ev-proofbar li:nth-child(2) svg,.ev-proofbar li:nth-child(3) svg{color:var(--ev-orange)}
.ev-proofbar b{display:block;font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--text-heading)}
@media(max-width:900px){
.ev-proofbar ul{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
.ev-proofbar ul{gap:var(--sp-3)}
.ev-proofbar li{gap:10px;padding:var(--sp-3)}
.ev-proofbar svg{width:36px;height:36px;padding:8px}
.ev-proofbar b{font-size:var(--fs-sm)}
}
/* ==========================================================================
HUB LISTING — the one listing of every hub page, with a filter sidebar (.evd-)
Desktop (1024 and up): a sticky sidebar of filters and two cards per row. Up to 1023: the sidebar is a full-height
sheet opened by the Filters button, with "Clear all" and a sticky "Show N trips". category.js (dayList) filters,
sorts and pages; every card stays in the HTML (hidden attribute) so every trip link is crawlable.
========================================================================== */
.evd{margin-top:var(--sp-10)}
.evd .ev-head .ev-textlink{display:inline-flex;align-items:center;min-height:44px}
.evd-layout{display:grid;grid-template-columns:minmax(0,264px) minmax(0,1fr);gap:var(--sp-6);align-items:start;margin-top:var(--sp-6)}
@media(min-width:1200px){.evd-layout{grid-template-columns:minmax(0,288px) minmax(0,1fr);gap:var(--sp-7)}}
.evd-results{min-width:0}
/* sidebar */
.evd-facets{position:sticky;top:calc(var(--ev-header-h,76px) + 16px);max-height:calc(100vh - var(--ev-header-h,76px) - 24px);
overflow-y:auto;overscroll-behavior:contain;padding:6px 20px;background:var(--surface);border:1px solid var(--border-soft);
border-radius:var(--r-lg)}
.evd-facets__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 4px}
.evd-facets__title{font-size:1.05rem;font-weight:var(--fw-bold);color:var(--text-heading)}
.evd-link{min-height:44px;padding:0 4px;border:0;background:none;font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semi);
color:var(--text-link);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.evd-link[hidden]{display:none}
.evd-link:disabled{color:var(--text-muted);cursor:default;text-decoration:none} /* nothing to clear: muted text at full strength (5:1), not a 40% fade */
/* a filter group is an accordion: a header button (name, selected count when closed, chevron) and a panel that opens by
animating grid-template-rows 0fr to 1fr, so nothing jumps */
.evd-facet{margin:0;border-top:1px solid var(--border-soft)}
.evd-facet__h{margin:0;font-size:inherit}
.evd-facet__btn{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0;border:0;background:none;font:inherit;
font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-heading);text-align:left;cursor:pointer}
.evd-facet__btn:focus-visible,.evd-all:focus-visible,.evd-link:focus-visible{outline:2px solid var(--ev-ocean);outline-offset:2px;border-radius:var(--r-sm,6px)}
.evd-facet__t{flex:1;min-width:0}
.evd-facet__n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);
background:var(--action);color:var(--ev-white);font-size:var(--fs-micro);font-weight:var(--fw-bold)}
.evd-facet__n[hidden],.evd-facet.is-open .evd-facet__n{display:none}
.evd-facet__btn svg{flex:none;width:16px;height:16px;color:var(--text-muted);transition:transform var(--dur-base,.2s) var(--ease,ease)}
.evd-facet.is-open .evd-facet__btn svg{transform:rotate(180deg)}
.evd-facet__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base,.2s) var(--ease,ease)}
.evd-facet.is-open .evd-facet__panel{grid-template-rows:1fr}
.evd-facet__in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s var(--dur-base,.2s)}
.evd-facet.is-open .evd-facet__in{visibility:visible;transition-delay:0s;padding-bottom:8px}
@media(prefers-reduced-motion:reduce){.evd-facet__panel,.evd-facet__btn svg{transition:none}}
.evd-opt{display:flex;align-items:center;gap:10px;min-height:38px;font-size:var(--fs-sm);line-height:1.3;color:var(--text);cursor:pointer}
.evd-opt input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--ev-ocean)}
.evd-opt__t{flex:1;min-width:0;overflow-wrap:anywhere}
.evd-opt__n{flex:none;font-size:var(--fs-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}
.evd-opt.is-zero{opacity:.45;cursor:default}
.evd-opt.is-gone{display:none}
.evd-facet.has-more:not(.is-all) .evd-opt.is-more{display:none}
.evd-all{min-height:38px;padding:0;border:0;background:none;font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semi);
color:var(--text-link);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.evd-price__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding-bottom:6px}
.evd-price__f{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);color:var(--text-muted)}
.evd-price__f input{width:100%;min-height:44px;padding:0 12px;border:1.5px solid var(--border);border-radius:var(--r-md);
background:var(--surface);font:inherit;font-size:var(--fs-sm);color:var(--text-heading)}
.evd-sheet__head,.evd-sheet__foot{display:none}
html.evd-lock,html.evd-lock body{overflow:hidden}
/* results bar: Filters button (up to 1023), count, sort */
.evd-bar{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.evd-fbtn{display:none}
.evd-fbtn__n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);
background:var(--action);color:var(--ev-white);font-size:var(--fs-micro);font-weight:var(--fw-bold)}
.evd-fbtn__n[hidden]{display:none}
.evd-count{flex:1;min-width:0;margin:0;font-size:var(--fs-sm);color:var(--text-secondary)}
.evd-count b{color:var(--text-heading)}
.evd-sort{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--text-secondary)}
.evd-sort select{min-height:44px;padding:0 36px 0 14px;border:1.5px solid var(--border);border-radius:var(--r-md);
font:inherit;color:var(--text-heading);background:var(--surface);appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323272A' stroke-opacity='.66' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;background-size:15px}
/* active filters */
.evd-chips{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:var(--sp-4)}
.evd-chips[hidden]{display:none}
.evd-chips__list{display:flex;flex-wrap:wrap;gap:8px}
.evd-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 4px 0 14px;border-radius:var(--r-pill);
background:var(--surface-sunken);font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--text-heading)}
.evd-chip button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;
color:var(--text-muted);font-size:1.15rem;line-height:1;cursor:pointer}
/* grid: two cards per row beside the sidebar; the paging is the [hidden] attribute (.ev-card sets display) */
.evd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);margin-top:var(--sp-5)}
.evd-grid > .ev-card[hidden]{display:none}
.evd-none{margin-top:var(--sp-5);padding:var(--sp-9) var(--sp-6);text-align:center;border:1.5px dashed var(--border);border-radius:var(--r-lg)}
.evd-none[hidden]{display:none}
.evd-none h3{font-size:1.2rem;margin-bottom:8px}
.evd-none p{margin:0 auto 18px;max-width:46ch;color:var(--text-secondary)}
.evd-more{display:flex;justify-content:center;margin-top:var(--sp-7)}
.evd-more[hidden]{display:none}
/* up to 1023: the sidebar is a full-height sheet */
@media(max-width:1023px){
.evd-layout{grid-template-columns:minmax(0,1fr);gap:0}
.evd-fbtn{display:inline-flex;align-items:center;gap:8px}
.evd-fbtn svg{width:18px;height:18px}
.evd-sort select{font-size:16px} /* 16px: iOS does not zoom the page on focus */
.evd-price__f input{font-size:16px}
/* two rows whatever the font: [Filters count] then [Sort], so the grid does not move when the web font arrives */
.evd-bar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3) var(--sp-4)}
.evd-bar .evd-sort{grid-column:1 / -1}
.evd-bar .evd-sort select{flex:1;min-width:0}
.evd-facets{display:none;position:static;max-height:none;padding:0;border:0;border-radius:0}
.evd-facets__top{display:none}
.evd-facets.is-open{display:block}
.evd-facets.is-sheet{--evd-pad:max(18px,calc((100vw - 560px) / 2));display:flex;flex-direction:column;position:fixed;inset:0;z-index:85;
padding:0 var(--evd-pad);background:var(--surface);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.evd-facets.is-sheet .evd-sheet__head{display:flex;position:sticky;top:0;z-index:2;align-items:center;justify-content:space-between;
gap:12px;margin:0 calc(var(--evd-pad) * -1);padding:8px var(--evd-pad);background:var(--surface);border-bottom:1px solid var(--border-soft)}
.evd-sheet__title{font-size:1.1rem;font-weight:var(--fw-bold);color:var(--text-heading)}
.evd-sheet__close{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;
background:var(--surface-sunken);color:var(--text-heading);cursor:pointer}
.evd-sheet__close svg{width:19px;height:19px}
.evd-facets.is-sheet .evd-sheet__foot{display:flex;position:sticky;bottom:0;z-index:2;gap:10px;margin:auto calc(var(--evd-pad) * -1) 0;
padding:12px var(--evd-pad) calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border-soft);
box-shadow:0 -8px 20px rgba(17,72,115,.08)}
.evd-sheet__foot .ev-btn{flex:1 1 0;padding-inline:14px}
.evd-sheet__foot .ev-btn--cta{flex:2 1 0}
.evd-sheet__foot [data-dl-clear][hidden]{display:none}
.evd-facets.is-sheet .evd-opt,.evd-facets.is-sheet .evd-all{min-height:44px}
/* a section on the alternate background clips everything inside it (sections.css .evt-container.is-alt): while the sheet is
open the clip goes, or the fixed sheet is cut to the section and sits under the app bar */
.evt-container.is-alt:has(.evd-facets.is-sheet){clip-path:none}
}
@media(max-width:640px){
.evd-grid{grid-template-columns:minmax(0,1fr)}
}
.evd--solo .evd-layout{grid-template-columns:minmax(0,1fr)}
/* social-proof toast kinds (sections.js 9c): live viewers get a pulsing green dot, activity a plain dot instead of the star */
.ev-proof--live .ev-proof__stars svg,.ev-proof--activity .ev-proof__stars svg{display:none}
.ev-proof--live .ev-proof__stars::before,.ev-proof--activity .ev-proof__stars::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ev-ocean)}
.ev-proof--live .ev-proof__stars::before{background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:ev-proof-pulse 1.8s ease-out infinite}
.ev-proof--live .ev-proof__stars{color:#15803d}
@keyframes ev-proof-pulse{to{box-shadow:0 0 0 8px rgba(22,163,74,0)}}
@media (prefers-reduced-motion:reduce){.ev-proof--live .ev-proof__stars::before{animation:none}}
.ev-proof__m:empty{display:none}
/* live viewer count on the trip page itself (sections.js 9c): under the lead */
.evt-live{display:inline-flex;align-items:center;gap:8px;margin:10px 0 0;padding:6px 12px;border-radius:var(--r-pill);background:rgba(22,163,74,.08);
font-size:var(--fs-xs);font-weight:var(--fw-semi);color:#15803d;line-height:1.35}
.evt-live[hidden]{display:none}
.evt-live::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:ev-proof-pulse 1.8s ease-out infinite}
@media (prefers-reduced-motion:reduce){.evt-live::before{animation:none}}
/* live viewers on a trip card (sections.js 9c2): a pill on the photo, top left */
.ev-card__live{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pill);
background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(12,51,82,.18);font-size:var(--fs-micro);font-weight:var(--fw-bold);color:#15803d;line-height:1.2}
.ev-card__live[hidden]{display:none}
.ev-card__live::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:ev-proof-pulse 1.8s ease-out infinite}
@media (prefers-reduced-motion:reduce){.ev-card__live::before{animation:none}}