/* ==========================================================================
   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) + .ev-section,
.ev-section + :is(.ev-section--muted,.ev-section--navy,.ev-section--card){
  padding-top: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:#fff}
.ev-section--navy p{color:var(--text-on-inverse-secondary)}
.ev-section--navy .ev-eyebrow{color:#fff}
.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{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 <em>checkout</em>
   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:1.68;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}
/* 5.38 on navy. The brand orange is 3.96 and may not carry a 14px link. */
.ev-section--navy .ev-textlink{color:var(--accent-on-navy)}


/* ==========================================================================
   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{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:4/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:.6rem;font-weight:var(--fw-bold);letter-spacing:var(--ls-micro);
  text-transform:uppercase;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);backdrop-filter:blur(6px);
  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:.62rem;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:.68rem;font-weight:var(--fw-black);
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink,#9A5A08)}
.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:.72rem;
  font-weight:var(--fw-semi);letter-spacing:.06em;text-transform:uppercase;
  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;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:.62rem;font-weight:var(--fw-black);
  letter-spacing:var(--ls-micro);text-transform:uppercase;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:.7rem;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);box-shadow:var(--shadow-whatsapp);
  transition:transform var(--dur-fast) var(--ease)}
.ev-wa-btn:hover{transform:scale(1.08)}
.ev-wa-btn svg{width:22px;height:22px;fill:#fff}

/* ---------- 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:.64rem;font-weight:var(--fw-black);letter-spacing:.09em;text-transform:uppercase}
.ev-badge--type{background:var(--tourcard-badge-bg);color:var(--tourcard-badge-fg)}
.ev-badge--promo{background:var(--ev-navy);color:#fff;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:.72rem;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:42px;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:#fff}

.ev-tourgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
@media(max-width:1040px){.ev-tourgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ev-tourgrid{grid-template-columns: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: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: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:#fff;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:#fff}
.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:#fff}
.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,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:#fff;
  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:linear-gradient(to top,rgba(17,72,115,.93) 8%,rgba(17,72,115,.52) 48%,rgba(17,72,115,.14))}
.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:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--accent)}
.ev-portal h3{margin-top:9px;font-size:1.5rem;font-weight:var(--fw-bold);color:#fff}
.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:.05em;text-transform:uppercase;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:1fr}
  .ev-portal{min-height:300px}}


/* ==========================================================================
   9. DESTINATION TILES
   ========================================================================== */
.ev-dests{display:grid;grid-template-columns:repeat(5,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:#fff;
  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:.66rem;font-weight:var(--fw-black);letter-spacing:.05em;text-transform:uppercase}
.ev-dest__season svg{width:12px;height:12px}
.ev-dest__body h3{font-size:1.16rem;font-weight:var(--fw-bold);color:#fff}
.ev-dest__tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.ev-dest__tags li{padding:3px 9px;border-radius:5px;background:rgba(255,255,255,.17);
  font-size:.66rem;font-weight:var(--fw-semi);backdrop-filter:blur(3px)}
.ev-dest__count{display:block;margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.24);
  font-size:.72rem;font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent)}
@media(max-width:1100px){.ev-dests{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.ev-dests{grid-template-columns:repeat(2,1fr)}
  .ev-dest{min-height:250px}}
@media(max-width:460px){.ev-dests{grid-template-columns:1fr}}


/* ==========================================================================
   10. WHY BOOK WITH US
   ========================================================================== */
.ev-why{display:grid;grid-template-columns:420px 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);backdrop-filter:blur(8px);
  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,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 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:#fff}
.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:1.62;
  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: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: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,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,decimal-leading-zero);position:absolute;top:0;left:0;
  font-size:1.1rem;font-weight:var(--fw-black);letter-spacing:.04em;color:var(--accent)}
.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:1.62;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,1fr);gap:var(--sp-7)}
  .ev-step::after{display:none}
}
@media(max-width:520px){.ev-how__grid{grid-template-columns: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: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:linear-gradient(to top,rgba(17,72,115,.88),rgba(17,72,115,0));
  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:#fff;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;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* ==========================================================================
   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:1fr 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:"";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:1fr}}

/* ==========================================================================
   The wall
   ========================================================================== */
.ev-rvwall{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;
  align-items:start}
@media(max-width:1040px){.ev-rvwall{grid-template-columns:repeat(2,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: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:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--brand)}
/* 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:1.68;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 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:#fff;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:.73rem;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:1.68;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:.72rem;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:.74rem;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:#fff}
.ev-trust--navy .ev-trust__item span{color:var(--text-on-inverse-muted)}


/* ==========================================================================
   16. BOOK WITH CONFIDENCE  (new)
   ========================================================================== */
.ev-confidence{display:grid;grid-template-columns:repeat(2,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:1fr}}


/* ==========================================================================
   18. JOURNAL / BLOG TEASERS
   ========================================================================== */
.ev-journal{display:grid;grid-template-columns:1.25fr 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:.74rem;color:var(--text-muted)}
.ev-meta__tag{padding:4px 10px;border-radius:5px;background:var(--accent-wash);color:var(--ev-navy);
  font-size:.66rem;font-weight:var(--fw-black);letter-spacing:.07em;text-transform:uppercase}
.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:1.62;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 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%}
@media(max-width:1000px){
  .ev-journal{grid-template-columns:1fr}
  .ev-journal__head{margin-bottom:0}
}
@media(max-width:460px){.ev-read{grid-template-columns:92px 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:"";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:#fff}
.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 <head>. 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:1.68;
  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:.9fr 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:#fff;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,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:.68rem;font-weight:var(--fw-bold);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--text-muted)}
.ev-req{color:#B3261E}
.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{font-size:.74rem;font-weight:var(--fw-semi);color:#B3261E}
.ev-field__error:empty{display:none}
.ev-field.is-invalid .ev-input,
.ev-field.is-invalid .ev-select,
.ev-field.is-invalid .ev-textarea{border-color:#B3261E}

/* 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__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}
@media(max-width:1040px){.ev-inquiry{grid-template-columns:1fr;gap:var(--sp-7)}}
@media(max-width:560px){.ev-form{padding:var(--sp-6) var(--sp-5)}
  .ev-form__grid{grid-template-columns: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)}

/* ---------- 12. ENQUIRY ---------- */
.evt-enquire{background:var(--surface-inverse);color:#fff;padding:var(--sp-10) 0}
.evt-enquire h2{color:#fff;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:#fff}
.evt-enquire .evt-eyebrow::before{background:var(--ev-sky)}
.evt-egrid{display:grid;grid-template-columns:.85fr 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: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,1fr);gap:var(--sp-5);margin-top:var(--sp-7)}
@media(max-width:1080px){.evt-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.evt-cards{grid-template-columns: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.
   ========================================================================== */
.ev-js [data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.ev-js [data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .ev-js [data-reveal]{opacity:1;transform:none;transition: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:1.72}
.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}

/* 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:var(--ls-eyebrow);
  text-transform:uppercase;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 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:#fff}
.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,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:.62rem;font-weight:var(--fw-black);
  letter-spacing:var(--ls-micro);text-transform:uppercase;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);border-left:3px solid var(--accent)}
.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:var(--ls-eyebrow);
  text-transform:uppercase;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:1.65;color:var(--text-secondary)}

@media(max-width:900px){
  .ev-tips{grid-template-columns: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: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,1fr);margin-top:var(--section-head-gap)}
@media(max-width:900px){.ev-why__list--flat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ev-why__list--flat{grid-template-columns:1fr}}

/* the compact platform band: two tiles, no aggregate column */