/* ==========================================================
   Private Tunisia — landing page
   Navy/cyan carried over from the group's identity, warmed with
   a sand accent so it reads as travel rather than car hire.
   Self-hosted, no CDN, no webfont request on the critical path.
   ========================================================== */

:root{
  --navy:#0b1626; --navy-2:#132540; --brand:#1e3a5f;
  --cyan:#06b6d4; --cyan-lt:#67e8f9; --cyan-dk:#0891b2;
  --sand:#f0b429; --sand-lt:#fde68a; --clay:#d97757;
  --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --soft:#f1f5f9;
  --paper:#fff; --bg:#f7f9fc;
  /* A warm ground, for the sections that alternate against --paper. The page
     was navy/white/cyan from top to bottom, which is a software palette; this
     is the sand note the photographs already carry, at a tint low enough
     (#fdf8f0) to leave body text at full contrast. Same tone as the
     by-interest bands, so the two pages feel related. */
  --warm:#fdf8f0; --warm-line:#f0e4d2;
  /* From the logo sheet: deep navy #0D1B2A, subtle gold #C8A66A. The gold is the
     brand note — it belongs on the mark, rules and small flourishes. Cyan keeps
     the ACTIONS (prices, primary buttons), because one accent has to mean
     "click this" and gold cannot do both jobs at once. */
  --gold:#c8a66a; --gold-dk:#a8874c;
  --ok:#059669; --danger:#dc2626;
  --r:14px; --rs:10px;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 24px -12px rgba(15,23,42,.18);
  --shadow-lg:0 24px 60px -24px rgba(11,22,38,.45);
  /* Widened from 1180px. With minmax(290px,1fr) cards that is the difference
     between three and four columns on a laptop — and on a 19-item catalogue
     four columns is what puts a useful number of tours above the fold. */
  --max:1320px;
  /* Prose stays narrow whatever the container does: 1320px of running text is
     unreadable, so intro copy is capped separately. */
  --measure:68ch;
}

/* ── The display face ──────────────────────────────────
   Headings were system-ui, which is why the page read like software rather
   than like a travel brand — the single biggest thing separating it from the
   references Achref keeps pointing at. Playfair was already self-hosted and
   subset for the /tours/?style=b experiment; this promotes it to headings only.

   Deliberately NOT the whole editorial variant: that experiment also inflated
   the type scale, which pushed the desktop card grid from six tours above the
   fold to three. The serif is the part that carries the effect. The scale is
   the part that cost conversions, so the scale stays as it was.

   unicode-range means an EN/FR/IT/DE reader downloads one 38 KB file and never
   touches latin-ext; font-display:swap means the headline is readable before
   it lands. Body copy stays on system-ui — it costs nothing and sets better at
   small sizes. */
@font-face{
  font-family:'Playfair Display';
  font-style:normal;font-weight:500 800;font-display:swap;
  src:url('/assets/fonts/playfair-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;font-weight:500 800;font-display:swap;
  src:url('/assets/fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
                U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
                U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 var(--sans);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
/* The hidden attribute must always win. Any author display rule on the same
   element (.cb-facts div{display:flex}, /* ── My bookings ── */
.my-form{max-width:440px}
.my-list{list-style:none;margin:0;padding:0}
.my-row{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--rs);
  padding:.85rem 1.1rem;margin-bottom:.5rem;
}
.my-off{opacity:.55}
.my-main b{color:var(--navy);display:block}
.my-meta{font-size:.82rem;color:var(--muted)}
.my-ref{color:var(--gold-dk);letter-spacing:.03em}
.my-side{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.my-price{color:var(--navy)}

/* ── Booking form + portal ─────────────────────── */
.bkwrap{max-width:980px}
.bk-grid{display:grid;gap:1.6rem;grid-template-columns:1fr;margin-top:1.6rem}
.bk-form label{display:block;font-size:.74rem;font-weight:800;letter-spacing:.05em;
               text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
.bk-form input,.bk-form select,.bk-form textarea{
  display:block;width:100%;margin-top:.3rem;min-height:46px;padding:.55rem .75rem;
  font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:var(--rs);
}
.bk-form textarea{min-height:80px;resize:vertical}
.bk-form input:focus-visible,.bk-form select:focus-visible,.bk-form textarea:focus-visible{
  outline:2px solid var(--cyan);outline-offset:1px}
.bk-row2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.bk-hp{position:absolute;left:-9999px;top:-9999px}
.bk-sum{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
        padding:1.2rem 1.3rem;align-self:start}
.bk-what{font-weight:700;color:var(--navy);margin:.6rem 0 .9rem}
.bk-err{background:var(--stop-soft,#fbede9);border:1px solid #d9938a;color:#8c3423;
        border-radius:var(--rs);padding:.85rem 1rem;margin:1rem 0}
.bk-err a{font-weight:800}
.bk-flash{border-radius:var(--rs);padding:.85rem 1rem;margin:0 0 1.1rem;font-weight:600}
.bk-ok{background:#e8f8f0;border:1px solid #9bd6b5;color:#1d6b45}
.bk-warn{background:var(--gold-soft,#f7efe0);border:1px solid var(--gold);color:var(--gold-dk)}
.bk-hero-ok{font-size:1.15rem;color:#1d6b45;margin:0 0 .6rem}
.bk-ref{font-size:.72em;color:var(--gold-dk);letter-spacing:.04em;white-space:nowrap}
.bk-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 1rem}
.pill-ghost2{background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.bk-facts{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.2rem}
.bk-notes{background:var(--soft);border-radius:var(--rs);padding:.8rem 1rem;max-width:56ch}
.bk-edit{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem}
.bk-cancel{margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1rem}
.bk-cancel-btn{
  cursor:pointer;font:inherit;font-size:.9rem;font-weight:700;color:#8c3423;
  background:none;border:1.5px solid #d9938a;border-radius:999px;
  padding:.6rem 1.1rem;min-height:44px;
}
.bk-cancel-btn:hover{background:var(--stop-soft,#fbede9)}
@media (min-width:900px){
  .bk-grid{grid-template-columns:minmax(0,1fr) 330px}
  .bk-sum,.bk-edit{position:sticky;top:5.5rem}
}

/* A page-scoped display rule (e.g. .cb-bar{display:flex}) silently beats
   the UA's [hidden]{display:none} on specificity — which is how a "hidden"
   UNESCO ×0 row rendered anyway. One global rule ends the whole bug class. */
[hidden]{display:none!important}
a{color:var(--cyan-dk);text-decoration:none}
h1,h2,h3{margin:0 0 .5em;line-height:1.15;letter-spacing:-.02em;color:var(--navy)}
h1,h2{font-family:var(--display)}
/* The serif needs less negative tracking than the sans did — at display sizes
   Playfair's own fit is already tight, and -.02em closes the counters. */
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:700;letter-spacing:-.012em}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:700;letter-spacing:-.01em}
h3{font-size:1.12rem;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.15rem}
.center{text-align:center}
.lede{font-size:clamp(1rem,1.7vw,1.16rem);color:#475569;max-width:62ch}
.center .lede{margin-left:auto;margin-right:auto}

/* ── Buttons ───────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.6rem;border-radius:999px;border:1.5px solid transparent;
  font-weight:700;font-size:.98rem;cursor:pointer;line-height:1;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,background .18s;
  min-height:52px;font-family:inherit;
}
.btn-primary{background:var(--cyan);color:#04222b;box-shadow:0 10px 26px -10px rgba(6,182,212,.8)}
.btn-primary:hover{background:var(--cyan-lt);transform:translateY(-2px)}
.btn-sand{background:var(--sand);color:#3a2703;box-shadow:0 10px 26px -10px rgba(240,180,41,.8)}
.btn-sand:hover{transform:translateY(-2px);background:var(--sand-lt)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-line{background:var(--paper);border-color:var(--line);color:var(--brand)}
.btn-line:hover{border-color:var(--cyan);transform:translateY(-2px)}
.btn-sm{padding:.6rem 1rem;min-height:44px;font-size:.88rem}

/* ── Header ────────────────────────────────────────── */
.hdr{
  position:fixed;inset:0 0 auto;z-index:60;
  padding:.85rem 0;transition:background .3s,box-shadow .3s,padding .3s;
}
.hdr.stuck{background:rgba(11,22,38,.92);backdrop-filter:blur(14px);
           box-shadow:0 1px 0 rgba(255,255,255,.08);padding:.55rem 0}
/* Pages whose top section is LIGHT (the catalogue, /credits) need the header
   opaque from the first paint. Without this the white logo text sits on a white
   page and the nav is unreadable — invisible on desktop only, because a
   max-width:760px rule already paints the mobile header solid. */
.hdr.hdr-solid{background:rgba(11,22,38,.94);backdrop-filter:blur(14px);
               box-shadow:0 1px 0 rgba(255,255,255,.08)}
.hdr .wrap{display:flex;align-items:center;gap:1.2rem}
/* ── The logo ────────────────────────────────────────
   The doorway is the artwork; the wordmark is LIVE TEXT in Playfair, which is
   the face the brand sheet specifies and which this site already self-hosts for
   its headings. That keeps it crisp at any size and on any screen, selectable,
   readable to Google, and recolourable from a variable — none of which a
   cropped raster of the same words would be.

   The mark is the designer's reversed (white) artwork, because every surface it
   sits on here is dark. */
.logo{display:flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none}
.logo-mark{
  height:34px;width:auto;flex:0 0 auto;display:block;
}
.logo-word{
  font-family:var(--display);font-weight:600;font-size:1.3rem;
  line-height:1;letter-spacing:.004em;white-space:nowrap;
}
.logo:hover{text-decoration:none}
.nav{margin-left:auto;display:flex;align-items:center;gap:.2rem}
/* nowrap is the guarantee: a label may be too long to FIT — which the burger
   breakpoint handles — but it must never break onto a second line and make the
   header two rows tall. French and German were doing exactly that. */
.nav a{
  color:#cbd5e1;padding:.55rem .62rem;border-radius:999px;
  font-size:.9rem;font-weight:600;white-space:nowrap;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
/* ── Header tools: language and currency ─────────────
   Inside .nav on purpose, so on a phone they collapse into the burger rather
   than crowding the logo. Both are small, so both get a 36px minimum and a
   visible focus ring — they are the two controls a foreign visitor reaches for
   first, and they used to be a paragraph buried in the hero. */
.hdr-tools{display:flex;align-items:center;gap:.5rem;margin-left:.3rem}
.langsw,.cursw{
  display:flex;align-items:center;gap:1px;
  background:rgba(255,255,255,.08);border-radius:999px;padding:2px;
}
.langsw a,.cursw button{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;min-height:34px;padding:0 .45rem;border:0;background:none;
  border-radius:999px;cursor:pointer;
  font:inherit;font-size:.74rem;font-weight:800;letter-spacing:.03em;
  color:rgba(255,255,255,.62);transition:background-color .18s,color .18s;
}
.langsw a:hover,.cursw button:hover{color:#fff;background:rgba(255,255,255,.14);text-decoration:none}
.langsw a:focus-visible,.cursw button:focus-visible{outline:2px solid var(--cyan-lt);outline-offset:2px}
.langsw a.on,.cursw button.on{background:var(--cyan);color:#04222b}

/* The fare cells carry the dinar figure as a <small> under the converted one.
   With TND selected that prints the same number twice ("DT70 / 70 TND"), so the
   second copy goes. The switcher stamps data-cur on <html> for exactly this.

   Selector matches `.fares td.num small` (0,2,2) further down the file, which
   sets display:block — equal specificity, and that one is LATER, so it won.
   Naming the same td.num here makes this (0,3,3) and settles it. */
html[data-cur="TND"] .fares td.num small{display:none}

/* ── Travel-guide pages ──────────────────────────────
   The direct answer is the point of the page: it is what a reader reads and
   what an answer engine lifts, so it is set larger than body copy and given
   its own rule above it. */
.g-answer{
  font-size:clamp(1.05rem,1.9vw,1.22rem);line-height:1.6;color:#334155;
  max-width:var(--measure);border-left:3px solid var(--gold);
  padding-left:1.1rem;margin-top:1.2rem;
}
.g-answer b{color:var(--navy)}
/* A table is the most extractable shape there is, so it must not be an image
   and must not need horizontal dragging on a phone. */
.gtable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.6rem 0 .8rem}
.gtable{border-collapse:collapse;width:100%;min-width:420px;background:var(--paper);
        border:1px solid var(--line);border-radius:var(--rs)}
.gtable th,.gtable td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--line);font-size:.94rem}
.gtable th{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:800}
.gtable tr:last-child td{border-bottom:0}
/* ── Trip builder (tailor-made page) ─────────────────
   Hidden entirely without JS: a picker that looks pressable and does nothing
   is the hero-dots mistake again. The prose below it is the no-JS page. */
html:not(.js) .cb,html:not(.js) .cb-bar{display:none}
.cb{margin:2.2rem 0 2.6rem}
.cb-grid{display:grid;gap:1.4rem;grid-template-columns:1fr}
.cb-tools{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
.cb-filter{
  flex:1;min-height:44px;padding:.5rem .9rem;font:inherit;font-size:.95rem;
  border:1.5px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);
}
.cb-filter:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cb-count{font-size:.8rem;font-weight:800;color:var(--muted);white-space:nowrap}
.cb-places{display:grid;gap:.45rem;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.cb-p{
  display:flex;flex-direction:column;gap:.15rem;text-align:left;cursor:pointer;
  padding:.55rem .7rem;min-height:52px;font:inherit;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--rs);
  transition:border-color .15s,background-color .15s;
}
.cb-p:hover{border-color:var(--cyan)}
.cb-p:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cb-p.on{border-color:var(--cyan);background:#ecfbfe;box-shadow:inset 0 0 0 1px var(--cyan)}
.cb-n{font-size:.88rem;font-weight:700;color:var(--navy);line-height:1.25}
.cb-u{
  font-style:normal;font-size:.58rem;font-weight:800;letter-spacing:.06em;
  color:var(--gold-dk);border:1px solid var(--gold);border-radius:4px;
  padding:.05rem .28rem;margin-left:.3rem;vertical-align:2px;white-space:nowrap;
}
.cb-r{font-size:.72rem;color:var(--muted)}
.cb-rail{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.2rem 1.3rem;align-self:start;
}
.cb-rh{margin:0 0 .7rem;font-size:1rem}
.cb-empty{font-size:.9rem;color:var(--muted)}
.cb-route{list-style:none;margin:0 0 1rem;padding:0;font-size:.92rem}
.cb-route li{
  position:relative;padding:.22rem 0 .22rem 1.3rem;color:var(--ink);
}
/* The route thread: dots joined by a line, the visual grammar of an itinerary. */
.cb-route li::before{
  content:'';position:absolute;left:.32rem;top:.72em;width:7px;height:7px;
  border-radius:50%;background:var(--cyan);
}
.cb-route li:not(:last-child)::after{
  content:'';position:absolute;left:.5rem;top:1.15em;bottom:-.35em;width:1.5px;background:var(--line);
}
.cb-route li.cb-rs{font-weight:800;color:var(--navy)}
.cb-route li.cb-rs::before{background:var(--navy)}
.cb-opts{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:0 0 1rem}
.cb-opts label{font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cb-opts select{
  display:block;width:100%;margin-top:.3rem;min-height:44px;padding:.4rem .6rem;
  font:inherit;font-size:.95rem;border:1.5px solid var(--line);border-radius:var(--rs);
  background:var(--paper);color:var(--ink);
}
.cb-facts{margin:0 0 .9rem;display:grid;gap:.45rem}
.cb-facts div{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem}
.cb-facts dt{color:var(--muted)}
.cb-facts dd{margin:0;font-weight:700;color:var(--navy);text-align:right}
.cb-facts .cb-pr dd{font-weight:800;font-size:1.05rem}
.cb-season{
  font-size:.85rem;color:var(--gold-dk);background:var(--gold-soft, #f7efe0);
  border:1px solid var(--gold);border-radius:var(--rs);padding:.6rem .8rem;margin:0 0 1rem;
}
.cb-clear{
  display:block;width:100%;margin:.5rem 0 1rem;min-height:40px;cursor:pointer;
  background:none;border:0;font:inherit;font-size:.85rem;font-weight:700;color:var(--muted);
}
.cb-clear:hover{color:var(--navy)}
[aria-disabled="true"].btn{opacity:.45;pointer-events:none}
/* Builder v2: the map, the preset chips, the comparables, the pulse. */
.cb-ph{font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
       color:var(--gold-dk);margin:0 0 .5rem}
.cb-presets{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.4rem}
.cb-preset{
  cursor:pointer;font:inherit;font-size:.86rem;font-weight:700;color:var(--brand);
  padding:.55rem 1rem;min-height:44px;background:var(--paper);
  border:1.5px solid var(--gold);border-radius:999px;
  transition:background-color .15s,transform .15s;
}
.cb-preset:hover{background:var(--gold-soft,#f7efe0);transform:translateY(-1px)}
.cb-preset:focus-visible{outline:2px solid var(--gold-dk);outline-offset:2px}
.cb-map{
  display:block;width:100%;max-width:230px;margin:0 auto .9rem;
  background:linear-gradient(180deg,#f2f7fb,#fdf8f0);
  border:1px solid var(--line);border-radius:var(--rs);
}
/* The land itself, on both maps. Index: stretched SVG (preserveAspectRatio
   none), so the stroke needs non-scaling or it thickens unevenly. */
.mapland{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mapland path{
  fill:rgba(120,170,200,.10);
  stroke:rgba(151,203,220,.55);stroke-width:1.1;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;
}
.cbm-land{
  fill:rgba(200,166,106,.13);
  stroke:rgba(16,32,47,.38);stroke-width:.55;stroke-linejoin:round;
}
.cbm-b{fill:#a9b9c7}
.cbm-u{fill:var(--gold)}
.cbm-p{fill:var(--cyan);stroke:#fff;stroke-width:.7}
.cbm-s{fill:var(--navy)}
.cbm-line{
  fill:none;stroke:var(--cyan);stroke-width:1.1;stroke-linejoin:round;
  stroke-dasharray:3 2;opacity:.85;
}
.cb-ugold{color:var(--gold-dk)!important}
.cb-ch{margin:0 0 .5rem;font-size:.78rem;font-weight:800;letter-spacing:.06em;
       text-transform:uppercase;color:var(--muted)}
.cb-comps{border-top:1px solid var(--line);padding-top:.9rem;margin:0 0 1rem}
.cb-clist{list-style:none;margin:0 0 .6rem;padding:0}
.cb-clist a{
  display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;
  padding:.45rem 0;font-size:.88rem;color:var(--ink);
}
.cb-clist a span{color:var(--brand);font-weight:600;line-height:1.3}
.cb-clist a b{white-space:nowrap;color:var(--navy)}
.cb-clist a:hover span{color:var(--cyan-dk);text-decoration:underline}
.cb-band{margin:0 0 .4rem;font-size:1.35rem;font-weight:800;color:var(--navy)}
.cb-quote{margin:0 0 .5rem;font-size:.78rem;color:var(--muted);line-height:1.5}
@keyframes cbtick{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
.tk{animation:cbtick .35s cubic-bezier(.2,.8,.3,1);display:inline-block;transform-origin:left center}

.cb-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.6rem 1rem;background:rgba(11,22,38,.96);backdrop-filter:blur(12px);
  color:#e8f3fb;font-size:.86rem;font-weight:700;
}
@media (min-width:900px){
  .cb-grid{grid-template-columns:minmax(0,1fr) 330px}
  .cb-rail{position:sticky;top:5.5rem}
  .cb-bar{display:none}
}

.faqlist details{border:1px solid var(--line);border-radius:var(--rs);background:var(--paper);
                 padding:.9rem 1.1rem;margin-bottom:.5rem}
.faqlist summary{font-weight:700;color:var(--navy);cursor:pointer;min-height:24px}
.faqlist p{margin:.7rem 0 0;color:#475569}

.navtoggle{display:none;background:rgba(255,255,255,.12);border:0;border-radius:11px;
           width:46px;height:46px;cursor:pointer;padding:0;place-items:center}
.navtoggle i,.navtoggle i::before,.navtoggle i::after{
  display:block;width:19px;height:2px;background:#fff;border-radius:2px;content:'';position:relative}
.navtoggle i::before{top:-6px}.navtoggle i::after{top:4px}

/* ── Hero ──────────────────────────────────────────── */
.hero{position:relative;padding:8.5rem 0 3.5rem;color:#fff;isolation:isolate;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background:linear-gradient(150deg,#0b1626 0%,#132540 42%,#1b3a5c 100%);
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60rem 34rem at 78% 8%,rgba(6,182,212,.24),transparent 60%),
    radial-gradient(44rem 30rem at 8% 92%,rgba(240,180,41,.16),transparent 62%);
}
.hero-img{
  position:absolute;inset:0;z-index:-3;object-fit:cover;width:100%;height:100%;
  opacity:.28;filter:saturate(.85);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero h1{color:#fff;margin-bottom:.6rem}
.hero h1 em{font-style:normal;color:var(--cyan-lt)}
.hero p.lede{color:#c7d5e6}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.1rem;
  padding:.42rem .9rem .42rem .5rem;border-radius:999px;font-size:.83rem;font-weight:700;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#e2e8f0;
}
.eyebrow b{background:var(--sand);color:#3a2703;padding:.2rem .55rem;border-radius:999px;font-size:.76rem}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
.hero-trust{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.5rem;
            border-top:1px solid rgba(255,255,255,.14)}
.hero-trust div{font-size:.85rem;color:#9fb3c8}
.hero-trust b{display:block;font-size:1.3rem;color:#fff;font-weight:800;line-height:1.2}
.stars{color:var(--sand);letter-spacing:.06em}

/* ── Price checker ─────────────────────────────────── */
.checker{
  background:var(--paper);border-radius:20px;padding:1.4rem;color:var(--ink);
  box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.6);
}
.checker h2{font-size:1.12rem;margin-bottom:.25rem}
.checker .hint{font-size:.84rem;color:var(--muted);margin-bottom:1rem}
.ck-row{display:grid;gap:.7rem;margin-bottom:.7rem}
.ck-2{grid-template-columns:1fr 1fr}
.field label{display:block;font-size:.74rem;font-weight:700;text-transform:uppercase;
             letter-spacing:.06em;color:var(--muted);margin-bottom:.3rem}
.field select,.field input{
  width:100%;padding:.8rem .85rem;border:1.5px solid var(--line);border-radius:var(--rs);
  font:inherit;font-size:16px;background:var(--paper);color:var(--ink);
  transition:border-color .15s,box-shadow .15s;min-height:50px;
}
.field select:focus,.field input:focus{
  outline:0;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(6,182,212,.14)}
.swap{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--paper);cursor:pointer;
  margin:-.3rem auto;position:relative;z-index:2;transition:transform .3s,border-color .15s;
  font-size:1.05rem;color:var(--brand);
}
.swap:hover{border-color:var(--cyan);transform:rotate(180deg)}
.veh{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.9rem}
.veh label{
  display:flex;flex-direction:column;gap:.15rem;padding:.7rem .8rem;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--rs);transition:all .15s;
}
.veh input{position:absolute;opacity:0;pointer-events:none}
.veh label span{font-weight:700;font-size:.92rem}
.veh label small{color:var(--muted);font-size:.78rem}
.veh input:checked + span{color:var(--cyan-dk)}
.veh label:has(input:checked){border-color:var(--cyan);background:rgba(6,182,212,.07)}
.veh label:hover{border-color:var(--cyan-lt)}

.result{
  margin-top:.4rem;padding:1.05rem 1.15rem;border-radius:var(--rs);
  background:linear-gradient(135deg,var(--navy),var(--brand));color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;
}
.result.show{opacity:1;transform:none}
.result .lbl{font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:#9fb3c8;font-weight:700}
.result .amt{font-size:1.85rem;font-weight:800;line-height:1.1}
.result .amt small{font-size:.85rem;font-weight:600;color:#c7d5e6;display:block;margin-top:.1rem}
.result .none{font-size:.92rem;color:#fde68a;font-weight:600}
.cur-toggle{display:flex;gap:.25rem;background:rgba(255,255,255,.12);padding:.22rem;border-radius:999px}
.cur-toggle button{
  border:0;background:transparent;color:#c7d5e6;font:inherit;font-size:.78rem;font-weight:700;
  padding:.35rem .6rem;border-radius:999px;cursor:pointer;transition:all .15s}
.cur-toggle button.on{background:var(--cyan);color:#04222b}

/* ── Sections ──────────────────────────────────────── */
section{padding:4.5rem 0}
.sec-head{max-width:64ch;margin:0 auto 2.4rem;text-align:center}
.kicker{
  display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan-dk);margin-bottom:.55rem}
.grid{display:grid;gap:1.15rem}
.g3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem;box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s;
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(15,23,42,.3)}
.card .ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:.9rem;
  background:linear-gradient(135deg,rgba(6,182,212,.16),rgba(6,182,212,.06));font-size:1.35rem}
.card.sand .ico{background:linear-gradient(135deg,rgba(240,180,41,.2),rgba(240,180,41,.07))}
.card p{color:#475569;font-size:.95rem;margin-bottom:0}
.card .price-from{margin-top:1rem;font-size:.85rem;color:var(--muted)}
.card .price-from b{font-size:1.4rem;color:var(--navy);font-weight:800}

/* ── Why direct (comparison) ───────────────────────── */
.compare{background:var(--navy);color:#fff;border-radius:20px;padding:2.2rem;overflow:hidden;position:relative}
.compare::after{content:'';position:absolute;inset:0;
  background:radial-gradient(38rem 22rem at 88% 12%,rgba(6,182,212,.2),transparent 62%);pointer-events:none}
.compare h2{color:#fff}
.compare table{width:100%;border-collapse:collapse;margin-top:1.2rem;position:relative}
.compare th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;
            color:#9fb3c8;font-weight:700;padding:.55rem .6rem;border-bottom:1px solid rgba(255,255,255,.16)}
.compare td{padding:.75rem .6rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:.95rem}
.compare td.us{color:var(--cyan-lt);font-weight:800}
.compare td.them{color:#9fb3c8;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.compare .save{background:rgba(16,185,129,.16);color:#6ee7b7;padding:.15rem .5rem;
                border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap}

/* ── Experience cards ──────────────────────────────── */
.chips{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.8rem}
.chip{
  padding:.55rem 1.05rem;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);
  font-size:.9rem;font-weight:700;color:var(--brand);cursor:pointer;transition:all .18s;font-family:inherit}
.chip:hover{border-color:var(--cyan)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}

.tour{
  position:relative;border-radius:var(--r);overflow:hidden;min-height:290px;display:flex;
  align-items:flex-end;color:#fff;box-shadow:var(--shadow);isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.tour:hover{transform:translateY(-5px)}
.tour img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
          transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.tour:hover img{transform:scale(1.06)}
.tour::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(11,22,38,.92) 8%,rgba(11,22,38,.35) 52%,transparent 78%)}
.tour-body{padding:1.3rem}
.tour h3{color:#fff;margin-bottom:.25rem;font-size:1.16rem}
.tour p{font-size:.87rem;color:#c7d5e6;margin:0}
.tour .tag{
  position:absolute;top:.9rem;left:.9rem;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  padding:.3rem .7rem;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.02em}
.tour[hidden]{display:none}

/* ── Fare table ────────────────────────────────────── */
.fares{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.fares table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
.fares th{background:var(--soft);text-align:left;padding:.85rem 1rem;font-size:.74rem;
          text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.fares td{padding:.85rem 1rem;border-top:1px solid var(--soft)}
.fares td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.fares tbody tr:hover{background:var(--bg)}

/* ── Steps ─────────────────────────────────────────── */
.steps{counter-reset:s;display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{position:relative;padding-left:3.4rem}
.step::before{
  counter-increment:s;content:counter(s);position:absolute;left:0;top:-.1rem;
  width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:var(--cyan-lt);font-weight:800;font-size:1rem}

/* ── Reviews ───────────────────────────────────────── */
.rev{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;box-shadow:var(--shadow)}
.rev .q{font-size:.97rem;color:#334155;margin-bottom:1rem}
.rev .who{display:flex;align-items:center;gap:.7rem}
.rev .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;
         background:linear-gradient(135deg,var(--cyan),var(--cyan-dk));color:#04222b;font-size:.92rem}
.rev .who b{display:block;font-size:.92rem}
.rev .who small{color:var(--muted);font-size:.8rem}

/* ── FAQ ───────────────────────────────────────────── */
.faq{max-width:800px;margin:0 auto}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--rs);
             margin-bottom:.7rem;overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:var(--cyan)}
.faq summary{
  padding:1.05rem 1.2rem;cursor:pointer;font-weight:700;font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.4rem;color:var(--cyan-dk);font-weight:400;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 1.2rem 1.15rem;color:#475569;font-size:.95rem}

/* ── CTA + footer ──────────────────────────────────── */
.cta{background:linear-gradient(135deg,var(--navy),var(--brand));color:#fff;border-radius:22px;
     padding:3rem 2rem;text-align:center;position:relative;overflow:hidden}
.cta::after{content:'';position:absolute;inset:0;
  background:radial-gradient(34rem 20rem at 50% 0,rgba(6,182,212,.26),transparent 65%);pointer-events:none}
.cta h2{color:#fff;position:relative}
.cta p{color:#c7d5e6;position:relative;max-width:52ch;margin-left:auto;margin-right:auto}
.cta .hero-cta{justify-content:center;position:relative}

footer{background:var(--navy);color:#94a3b8;padding:3rem 0 2rem;font-size:.9rem}
footer a{color:#cbd5e1}
footer a:hover{color:var(--cyan-lt)}
.f-grid{display:grid;gap:2rem;grid-template-columns:1.6fr 1fr 1fr;margin-bottom:2rem}
footer h4{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 .8rem}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:.45rem}
.f-bot{border-top:1px solid rgba(255,255,255,.1);padding-top:1.4rem;display:flex;
       justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.84rem}

/* ── Sticky mobile bar ─────────────────────────────── */
.mbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;
      background:rgba(11,22,38,.96);backdrop-filter:blur(12px);padding:.6rem .8rem;
      gap:.5rem;border-top:1px solid rgba(255,255,255,.1)}
.mbar .btn{flex:1;min-height:50px;font-size:.92rem}

/* ── Reveal on scroll ────────────────────────────────
   Gated on html.js, which an inline script in <head> sets. Ungated, a JS
   failure (blocked script, old browser, parse error) leaves 23 elements at
   opacity:0 and the landing page renders as an empty column — the content is
   in the HTML, invisible. Hiding content must never be the default state. */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  /* Must match html.js .reveal on specificity or it loses to it and reduced-motion
     visitors wait for the observer anyway — the bare `.reveal` (0,1,0) that used
     to be here stopped winning the moment the base rule gained the html.js gate. */
  html.js .reveal{opacity:1;transform:none}
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .f-grid{grid-template-columns:1fr 1fr}
}
/* ── Header: when the nav no longer fits ──────────────
   The collapse used to sit at 760px, but the nav is six links, four languages,
   four currencies and a CTA — it needs ~1160px including the logo. So between
   761px and ~1160px it overflowed and body{overflow-x:hidden} quietly CLIPPED
   it: at 900px the WhatsApp button sat at x=1041, off-screen and unclickable,
   in every language. German was worst but English was broken too.
   1260 is measured, not guessed: a seventh nav item (Tailor-made) pushed the
   German nav to 1270px, which put the WhatsApp button off-screen at 1200. */
@media (max-width:1260px){
  .nav{display:none;position:absolute;top:100%;left:1.15rem;right:1.15rem;
       flex-direction:column;align-items:stretch;gap:.25rem;padding:.6rem;
       background:rgba(11,22,38,.98);backdrop-filter:blur(14px);border-radius:14px;
       box-shadow:var(--shadow-lg)}
  .nav.open{display:flex}
  .nav a{padding:.85rem 1rem;min-height:48px;display:flex;align-items:center}
  .navtoggle{display:grid;margin-left:auto}
  /* In the burger menu there is room, and 34px thumb targets are not acceptable
     on the control a foreign visitor reaches for first. The language links
     already inherit 48px from .nav a; this brings currency up to match. */
  .hdr-tools{width:100%;justify-content:space-between;margin:.4rem 0 0}
  .langsw,.cursw{flex:1;justify-content:center}
  .langsw a,.cursw button{min-height:44px;min-width:44px;font-size:.82rem}
}

@media (max-width:760px){
  .hdr{background:rgba(11,22,38,.92);backdrop-filter:blur(14px)}
  .hero{padding:6.5rem 0 2.5rem}
  section{padding:3.2rem 0}
  .compare{padding:1.4rem 1.1rem}
  /* The comparison is the page's argument — it must not need sideways dragging.
     Tighter cells bring it inside 375px; the wrapper is insurance for narrower. */
  .compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .compare th,.compare td{padding:.6rem .35rem;font-size:.85rem}
  .compare th{font-size:.66rem}
  .compare .save{font-size:.7rem;padding:.12rem .4rem}

  /* 44px is the accessible minimum — these were 32–38px. */
  .cur-toggle button{min-height:40px;padding:.5rem .7rem}
  .chip{min-height:44px;padding:.6rem 1rem}
  .cta{padding:2.2rem 1.2rem}
  .f-grid{grid-template-columns:1fr}
  .mbar{display:flex}
  body{padding-bottom:70px}
  .ck-2{grid-template-columns:1fr}
  .result{flex-direction:column;align-items:flex-start;gap:.6rem}
}

/* ══════════════════════════════════════════════════
   MAP — 30 sites plotted on real coordinates
   No Leaflet and no tile layer: the pins are absolutely positioned from
   lat/lng, which costs nothing and keeps the page under 50 KB. A tile map
   would add ~40 KB of library plus network round-trips for decoration.
   ══════════════════════════════════════════════════ */
.maprow{display:grid;grid-template-columns:1.05fr .95fr;gap:1.6rem;align-items:start}

.mapwrap{position:sticky;top:5.5rem}
.mapplot{
  position:relative;aspect-ratio:3/4;border-radius:var(--r);
  background:
    radial-gradient(60% 50% at 55% 22%,rgba(6,182,212,.10),transparent 70%),
    linear-gradient(160deg,#0f2337,#152c45 60%,#1b3550);
  border:1px solid rgba(255,255,255,.08);overflow:hidden;
}
/* faint graticule so the plot reads as a map, not a scatter chart */
.mapplot::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:20% 12.5%;
}
.pin{
  position:absolute;transform:translate(-50%,-50%);
  width:13px;height:13px;padding:0;border-radius:50%;cursor:pointer;
  background:var(--cyan);border:2px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 0 rgba(6,182,212,.55);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background .18s;
}
.pin.unesco{background:var(--sand);width:15px;height:15px;border-radius:3px;rotate:45deg}
.pin span{
  position:absolute;left:50%;top:-2.1rem;transform:translateX(-50%);
  background:rgba(11,22,38,.95);color:#fff;font-size:.72rem;font-weight:600;
  padding:.25rem .5rem;border-radius:6px;white-space:nowrap;opacity:0;
  pointer-events:none;transition:opacity .18s;
}
.pin.unesco span{rotate:-45deg}
.pin:hover,.pin:focus-visible{transform:translate(-50%,-50%) scale(1.5);outline:0}
.pin.unesco:hover,.pin.unesco:focus-visible{transform:translate(-50%,-50%) scale(1.4)}
.pin:hover span,.pin:focus-visible span,.pin.on span{opacity:1}
.pin.on{box-shadow:0 0 0 7px rgba(6,182,212,.28);z-index:3}
.pin.unesco.on{box-shadow:0 0 0 7px rgba(240,180,41,.3)}
.pin[hidden]{display:none}
.mapnote{margin:.7rem 0 0;font-size:.8rem;color:var(--muted);text-align:center}

.mapcards{max-height:none}
.lm{
  display:none;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:1.3rem;box-shadow:var(--shadow);
}
.lm.on{display:block;animation:lmin .3s cubic-bezier(.2,.8,.3,1)}
@keyframes lmin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lm-head{margin-bottom:.6rem}
.lm h3{margin-bottom:.15rem;font-size:1.2rem}
.unesco-tag{
  display:inline-block;vertical-align:middle;margin-left:.4rem;background:var(--sand);
  color:#3a2703;font-size:.62rem;font-weight:800;letter-spacing:.06em;
  padding:.15rem .4rem;border-radius:4px}
.lm-cat{font-size:.78rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.lm p{color:#475569;font-size:.95rem;margin-bottom:1rem}
.lm-tours{border-top:1px solid var(--soft);padding-top:.85rem}
.lm-lbl{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
        color:var(--muted);font-weight:700;margin-bottom:.5rem}
.lm-tours a{
  display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding:.6rem .8rem;margin-bottom:.4rem;border-radius:var(--rs);
  background:var(--bg);border:1px solid var(--line);
  font-size:.9rem;font-weight:600;color:var(--brand);transition:all .15s}
.lm-tours a:hover{border-color:var(--cyan);text-decoration:none;transform:translateX(2px)}
.lm-tours a b{color:var(--cyan-dk);white-space:nowrap}

@media (max-width:860px){
  .maprow{grid-template-columns:1fr}
  .mapwrap{position:static}
  .mapplot{aspect-ratio:4/5;max-width:420px;margin:0 auto}
  .pin{width:16px;height:16px}
  .pin.unesco{width:17px;height:17px}
}

/* ══════════════════════════════════════════════════
   TOURS-LED HERO + CATALOGUE
   The page now leads with what it sells. Cyan stays the accent — it is the
   thing that stops this looking like every other beige heritage-tour site.
   ══════════════════════════════════════════════════ */
.hero-mid{max-width:760px;padding:1rem 0 .5rem}
.hero-mid h1{font-size:clamp(2.3rem,6vw,4.1rem);line-height:1.05;margin-bottom:.7rem}
.hero-mid .lede{color:#c7d5e6;max-width:58ch}

/* ── Scroll-driven hero ────────────────────────────
   The section is several viewports tall; the stage inside it sticks to the top
   and the photograph behind it changes as you pass each step. Native scroll all
   the way — nothing here intercepts a swipe, because 70% of this traffic is a
   thumb on a phone and hijacked scrolling is how you lose it.

   --step is how much scrolling one slide costs. Shorter on a phone so four
   slides do not become four screens of nothing before the catalogue.        */
.hero{
  /* ONE viewport. This was height:calc(100svh + (slides-1) * 52svh) — 2405px
     measured, 3.34 screens of scrolling spent before the first content section.
     The photographs now crossfade in place instead of being paid for in scroll,
     so the whole hero costs exactly one screen and the catalogue starts on the
     second. min-height, not height: on a short phone in landscape the content
     must be allowed to make the section taller rather than overflow it. */
  min-height:100svh;
  padding:0;                       /* the stage owns the padding now */
  overflow:hidden;
  display:flex;
}
.hero::before,.hero::after{content:none}   /* the old flat gradient hero */
.hero-stage{
  position:relative;width:100%;overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end;padding:7rem 0 3rem;
}
.hero-bg{position:absolute;inset:0;z-index:-3}
.hs-pic{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hs-pic.on{opacity:1}
.hs-pic img{width:100%;height:100%;object-fit:cover;display:block}

/* The scrim does the legibility work. Heavier at the bottom because that is
   where the text sits on a phone, and the photographs are bright. */
.hero-stage::after{
  content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(11,22,38,.86) 0%,rgba(11,22,38,.42) 32%,rgba(11,22,38,.9) 88%),
    radial-gradient(52rem 30rem at 82% 6%,rgba(6,182,212,.20),transparent 62%);
}

.hero-inner{position:relative;width:100%}
/* One caption, always visible. It used to be four overlaid slides fading in and
   out; the offer and the CTA are the last things that should move. */
.hs-cap{max-width:760px}
.hs-cap h1,.hs-cap h2{
  color:#fff;font-size:clamp(2.1rem,6.4vw,3.8rem);line-height:1.06;
  letter-spacing:-.02em;margin-bottom:.7rem;
}
/* Sits HERE, immediately after the rule it overrides, not in the big
   max-width:760px block earlier in the file. Both selectors are (0,1,1), so the
   later one wins — and from up there this lost silently. Second time today.
   The slot holds "shared with strangers", the longest phrase: at the 2.1rem
   floor it measured 368px against 353px of usable width on a 390px screen, so
   it wrapped and the headline ran to five lines. 8vw is ~31px / 337px here, and
   it keeps scaling on narrower handsets instead of sticking at a floor that no
   longer fits. */
@media (max-width:760px){
  .hs-cap h1,.hs-cap h2{font-size:clamp(1.6rem,8vw,2.1rem)}
}

/* The three destinations the old slides 2-4 carried, as one row. */
.hero-jump{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;
  padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.16);
}
.hero-jump a{
  display:inline-flex;align-items:center;gap:.4rem;min-height:40px;
  padding:.4rem .9rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  color:#e8f3fb;font-size:.86rem;font-weight:700;
  transition:background-color .18s,border-color .18s;
}
.hero-jump a:hover{background:rgba(255,255,255,.12);border-color:var(--cyan-lt);text-decoration:none}
.hs-kicker{
  display:inline-block;margin-bottom:.9rem;color:var(--cyan-lt);
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}

/* Photograph chooser, bottom right. These are real controls now, so they need a
   real hit target (44px) and a visible focus ring. */
.hero-rail{
  position:absolute;right:1.15rem;bottom:1.4rem;display:flex;gap:.2rem;align-items:center;z-index:2;
}
.hs-dot{
  display:flex;align-items:center;gap:.35rem;background:none;border:0;
  padding:.75rem .5rem;min-height:44px;
  color:rgba(255,255,255,.5);font:inherit;font-size:.66rem;font-weight:800;letter-spacing:.1em;
  cursor:pointer;transition:color .3s;
}
.hs-dot i{display:block;width:14px;height:2px;border-radius:2px;background:currentColor;transition:width .3s}
.hs-dot span{display:none}
.hs-dot:hover{color:#fff}
.hs-dot:focus-visible{outline:2px solid var(--cyan-lt);outline-offset:3px;border-radius:6px}
.hs-dot.on{color:var(--cyan-lt)}
.hs-dot.on i{width:26px}
.hs-dot.on span{display:inline}

@media (min-width:760px){
  .hero-stage{align-items:center;padding:7rem 0 4rem}
  .hero-stage::after{
    background:
      linear-gradient(96deg,rgba(11,22,38,.93) 0%,rgba(11,22,38,.72) 46%,rgba(11,22,38,.34) 100%),
      linear-gradient(180deg,rgba(11,22,38,.5) 0%,transparent 30%,rgba(11,22,38,.6) 100%),
      radial-gradient(52rem 30rem at 82% 6%,rgba(6,182,212,.22),transparent 62%);
  }
  .hero-rail{right:2rem;bottom:2.2rem}
}

/* A visitor who asked for less motion: one hero, no stage, no swap. */
@media (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .hero-stage{position:static;height:auto;min-height:100svh}
  .hs-pic{transition:none}
  .hs-cap{transition:none}
  .hs-cap:not(.on){display:none}
}

/* The rotating line — one word doing the work of a carousel, at no weight cost. */
/* Every phrase occupies the same single grid cell, so the box takes the size of
   the LONGEST one and never resizes as they cycle. min-height:1.1em used to be
   the only guard, and it does nothing about a phrase that wraps to two lines —
   which is what shifted the page 34px every rotation. */
.rot{font-style:normal;color:var(--cyan-lt);display:inline-grid;vertical-align:top;text-align:left}
.rot span{grid-area:1/1;visibility:hidden}
.rot span.on{visibility:visible;animation:rotin .5s cubic-bezier(.2,.8,.3,1)}
@keyframes rotin{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}

.hero-facts{list-style:none;display:flex;gap:2.2rem;flex-wrap:wrap;margin:2rem 0 0;padding:1.5rem 0 0;
            border-top:1px solid rgba(255,255,255,.14)}
.hero-facts li{font-size:.84rem;color:#9fb3c8}
.hero-facts b{display:block;font-size:1.6rem;color:#fff;font-weight:800;line-height:1.15}

/* ── Credits list ──────────────────────────────── */
.credits{list-style:none;padding:0;margin:1.6rem 0 2rem;font-size:.9rem;line-height:1.65}
.credits li{padding:.7rem 0;border-bottom:1px solid var(--line);color:#475569}
.credits em{font-style:normal;color:#94a3b8;font-size:.84em}

/* ── Tour cards ────────────────────────────────── */
.tourgrid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.tcard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s,border-color .2s;
}
.tcard:hover{transform:translateY(-5px);box-shadow:0 20px 44px -22px rgba(15,23,42,.34);border-color:var(--cyan-lt)}
.tcard[hidden]{display:none}
.tcard-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.tcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.tcard:hover .tcard-img img{transform:scale(1.07)}
.tbadge{
  position:absolute;top:.7rem;left:.7rem;padding:.28rem .6rem;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  backdrop-filter:blur(6px)}
.tbadge.cyan{background:var(--cyan-lt);color:#04222b}
.tbadge.sand{background:var(--sand);color:#3a2703}
.tdur{
  position:absolute;bottom:.7rem;right:.7rem;padding:.24rem .55rem;border-radius:6px;
  background:rgba(11,22,38,.82);color:#fff;font-size:.72rem;font-weight:600;backdrop-filter:blur(6px)}
.tcard-body{padding:1.05rem 1.1rem 1.1rem;display:flex;flex-direction:column;flex:1}
.tcard h3{font-size:1.04rem;line-height:1.3;margin-bottom:.35rem}
.tstops{font-size:.82rem;color:var(--muted);margin:0 0 1rem;flex:1}
.tcard-foot{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
            padding-top:.85rem;border-top:1px solid var(--soft)}
.tfrom{font-size:.78rem;color:var(--muted);line-height:1.3}
.tfrom b{display:block;font-size:1.3rem;color:var(--navy);font-weight:800}
.tfrom small{display:block;font-size:.72rem}

/* ── Transfers row ─────────────────────────────── */
.trow{display:grid;grid-template-columns:.85fr 1.15fr;gap:1.4rem;align-items:start}
.tsvc{display:grid;gap:.7rem;margin-top:1rem}
.tsvc div{background:var(--paper);border:1px solid var(--line);border-radius:var(--rs);
          padding:.85rem 1rem;font-size:.88rem;color:#475569}
.tsvc b{display:block;color:var(--navy);font-size:.95rem;margin-bottom:.15rem}

@media (max-width:860px){
  .trow{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero-facts{gap:1.4rem}
  .hero-facts b{font-size:1.35rem}
  .tourgrid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════
   GRID OVERFLOW GUARD — the width bug
   Grid and flex items default to min-width:auto, so they refuse to shrink
   below their content. A 520px-wide table inside an overflow-x:auto wrapper
   therefore stretched its whole column, and the page rendered 540px wide on a
   375px screen. min-width:0 lets the wrapper actually do its job.
   ══════════════════════════════════════════════════ */
.grid > *, .trow > *, .maprow > *, .tourgrid > *, .hero-grid > *, .steps > *{min-width:0}
.fares, .tablewrap{max-width:100%}

/* On a phone the fare table is a scroller, not a reason to widen the document. */
@media (max-width:760px){
  .fares table{min-width:420px}
}

/* ══════════════════════════════════════════════════
   ICONIC DESTINATIONS + WHY US
   Written mobile-first: the base rules are the phone layout, and the
   media queries only ADD columns as space appears. 70% of visitors
   arrive on a phone, so that is the case the CSS should state first.
   ══════════════════════════════════════════════════ */
.dest-head{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.5rem}
.dest-head h2{margin-bottom:0}
.dest-link{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:800;
           letter-spacing:.12em;text-transform:uppercase;color:var(--brand);min-height:44px}
.dest-link:hover{color:var(--cyan-dk);text-decoration:none}
.dest-link span{transition:transform .2s}
.dest-link:hover span{transform:translateX(4px)}

/* One column on a phone — a 4-across grid of tall cards is unreadable at 375px. */
.destgrid{display:grid;gap:1rem;grid-template-columns:1fr}
.dcard{
  position:relative;display:block;border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;isolation:isolate;box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s;
}
.dcard:hover{transform:translateY(-4px);box-shadow:0 22px 46px -22px rgba(15,23,42,.4);text-decoration:none}
.dcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
           transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.dcard:hover img{transform:scale(1.07)}
.dcard::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(11,22,38,.93) 6%,rgba(11,22,38,.28) 55%,rgba(11,22,38,.05) 100%)}
.dnum{position:absolute;top:.8rem;left:.8rem;background:var(--navy);color:var(--cyan-lt);
      font-size:.72rem;font-weight:800;letter-spacing:.05em;padding:.25rem .5rem;border-radius:5px}
.dtag{position:absolute;top:.8rem;right:.8rem;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);
      color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
      padding:.28rem .55rem;border-radius:5px}
.dbody{position:absolute;left:1rem;right:3.4rem;bottom:1rem;color:#fff}
.dtitle{display:block;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.dsub{display:block;font-size:.8rem;font-weight:700;color:var(--cyan-lt);margin-top:.15rem}
.darrow{
  position:absolute;right:1rem;bottom:1rem;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  color:#fff;font-size:1rem;transition:background .2s,transform .2s}
.dcard:hover .darrow{background:var(--cyan-lt);color:#04222b;transform:translate(2px,-2px)}

/* ── Why us ─────────────────────────────────────── */
.featgrid{display:grid;gap:1rem;grid-template-columns:1fr}
.feat{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem}
.ficon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;margin-bottom:.8rem;
       background:var(--navy);color:var(--cyan-lt);font-size:1.15rem}
.feat h3{font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
         color:var(--brand);margin-bottom:.5rem}
.feat p{font-size:.9rem;color:#475569;margin:0}

/* ── Then add columns as the screen allows ──────── */
@media (min-width:560px){
  .destgrid,.featgrid{grid-template-columns:1fr 1fr}
  .dcard{aspect-ratio:3/4}
}
@media (min-width:900px){
  .destgrid,.featgrid{grid-template-columns:repeat(4,1fr)}
  .dest-head{flex-direction:row;justify-content:space-between;align-items:flex-end}
}

/* ══════════════════════════════════════════════════
   TOUR PAGES  (tour.php, tours.php)
   Mobile first throughout: base rules are the phone layout, min-width
   queries only ever ADD columns.
   ══════════════════════════════════════════════════ */

/* ── Breadcrumbs ────────────────────────────────── */
.crumbs{display:flex;gap:.45rem;align-items:center;font-size:.78rem;font-weight:700;
        color:rgba(255,255,255,.62);margin-bottom:1rem;flex-wrap:wrap}
.crumbs a{color:inherit}
.crumbs a:hover{color:var(--cyan-lt)}
.listhead .crumbs{color:var(--muted)}

/* ── Tour hero ──────────────────────────────────── */
.thero{position:relative;padding:6.5rem 0 2.2rem;color:#fff;isolation:isolate;overflow:hidden}
.thero-pic{position:absolute;inset:0;z-index:-2}
.thero-pic img{width:100%;height:100%;object-fit:cover;display:block}
.thero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,22,38,.9) 0%,rgba(11,22,38,.6) 40%,rgba(11,22,38,.95) 100%);
}
.thero h1{color:#fff;font-size:clamp(1.85rem,6.4vw,3.1rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:.6rem}
.thero .lede{color:#c7d5e6;max-width:62ch;margin-bottom:1.4rem}

.tbadges{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.9rem}
.pill{display:inline-block;background:var(--cyan);color:#04222b;font-size:.66rem;font-weight:800;
      letter-spacing:.09em;text-transform:uppercase;padding:.3rem .6rem;border-radius:6px}
.pill-gold{background:var(--sand);color:#3a2703}
.pill-ghost{background:rgba(255,255,255,.14);color:#fff;text-transform:none;letter-spacing:.02em}

.tfacts{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.2rem;margin:0;
        padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.16)}
.tfacts dt{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8fa6bd}
.tfacts dd{margin:.15rem 0 0;font-size:1rem;font-weight:700;color:#fff}

/* ── Body + booking rail ────────────────────────── */
.tbody{padding:2.5rem 0}
.tbody-grid{display:grid;gap:2rem;grid-template-columns:1fr;align-items:start}
.tbody-grid > *{min-width:0}
.tmain > p{margin-bottom:1rem;max-width:68ch}
.tmain h2{font-size:1.35rem;margin:2.2rem 0 .9rem}
.tmain h3{font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
          color:var(--brand);margin-bottom:.7rem}

.tlist{list-style:none;padding:0;margin:0}
.tlist li{position:relative;padding:.4rem 0 .4rem 1.6rem;font-size:.94rem;color:#334155;line-height:1.55}
.tlist li::before{position:absolute;left:0;top:.4rem;font-weight:800}
.tlist-check li::before,.tlist-yes li::before{content:'✓';color:var(--cyan-dk)}
.tlist-no li::before{content:'×';color:#94a3b8}

.titin{list-style:none;padding:0;margin:0;position:relative}
.titin li{display:grid;grid-template-columns:3.6rem 1fr;gap:.9rem;padding:.55rem 0;position:relative}
.titin-t{font-size:.78rem;font-weight:800;color:var(--brand);padding-top:.15rem}
.titin-b{position:relative;padding-left:1rem;border-left:2px solid var(--line)}
.titin-b::before{content:'';position:absolute;left:-6px;top:.42rem;width:10px;height:10px;
                 border-radius:50%;background:var(--cyan);border:2px solid var(--bg)}
.titin-b b{display:block;font-size:.96rem;color:#0f172a}
.titin-b span{display:block;font-size:.87rem;color:#64748b;margin-top:.1rem}

.tinex{display:grid;gap:1.4rem;grid-template-columns:1fr;margin-top:2.2rem;
       background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem}

.topts{list-style:none;padding:0;margin:0}
.topts li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
          padding:.65rem 0;border-bottom:1px solid var(--line);font-size:.93rem}
.topts b{white-space:nowrap;color:var(--brand)}

.tstops-grid{display:grid;gap:.9rem;grid-template-columns:1fr}
.tstop{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1rem}
.tstop b{display:block;font-size:1rem;color:#0f172a;margin-bottom:.3rem}
.tstop .u{display:inline-block;background:var(--sand);color:#3a2703;font-size:.58rem;font-weight:800;
          letter-spacing:.1em;padding:.15rem .35rem;border-radius:4px;vertical-align:middle}
.tstop p{font-size:.88rem;color:#475569;margin:0}
.tstop small{display:block;margin-top:.4rem;font-size:.74rem;color:#94a3b8}

/* ── Booking box ────────────────────────────────── */
.tbox{background:var(--navy);color:#fff;border-radius:var(--r);padding:1.3rem;box-shadow:var(--shadow-lg)}
.tprice{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.16)}
.tprice small{display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;
              text-transform:uppercase;color:#8fa6bd}
.tprice b{font-size:2.4rem;font-weight:800;line-height:1.05;letter-spacing:-.03em;color:var(--cyan-lt)}
.tprice span{display:block;font-size:.8rem;color:#9fb3c8;margin-top:.2rem}
.ttiers{list-style:none;padding:0;margin:0 0 1rem}
.ttiers li{display:flex;justify-content:space-between;gap:.8rem;padding:.4rem 0;font-size:.86rem;color:#c7d5e6}
.ttiers b{color:#fff;white-space:nowrap}
.tbook-lead{font-size:.88rem;color:#c7d5e6;margin-bottom:1rem}
.btn-block{display:flex;width:100%;justify-content:center;margin-bottom:.5rem}
.btn-ghost-d{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32)}
.btn-ghost-d:hover{background:rgba(255,255,255,.1);text-decoration:none}
.tnote{font-size:.76rem;color:#8fa6bd;margin:.7rem 0 0;text-align:center}

.tlangs{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:1rem}
.tlangs a{font-size:.78rem;font-weight:700;padding:.42rem .7rem;border-radius:999px;
          border:1px solid var(--line);color:var(--muted);background:var(--paper)}
.tlangs a:hover{border-color:var(--cyan);color:var(--brand);text-decoration:none}
.tlangs a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.tlangs-row{margin-top:1.4rem}

/* ── Catalogue page ─────────────────────────────── */
.listhead{padding:7rem 0 1.5rem;background:var(--paper);border-bottom:1px solid var(--line)}
.listhead h1{font-size:clamp(1.75rem,5.6vw,2.7rem);line-height:1.1;letter-spacing:-.03em;margin-bottom:.7rem}
.listhead .lede{max-width:64ch;color:var(--muted)}
.tcard h2{font-size:1.08rem;line-height:1.3;margin-bottom:.35rem}
.tcard h2 a,.tcard h3 a{color:inherit}
.tcard h2 a:hover,.tcard h3 a:hover{color:var(--brand)}
.tbadge.gold{background:var(--sand);color:#3a2703}

/* ── Then add columns as the screen allows ──────── */
@media (min-width:560px){
  .tstops-grid{grid-template-columns:1fr 1fr}
  .tinex{grid-template-columns:1fr 1fr;gap:1.8rem}
}
@media (min-width:900px){
  .thero{padding:8rem 0 2.8rem}
  .tfacts{grid-template-columns:repeat(4,1fr)}
  .tbody-grid{grid-template-columns:minmax(0,1fr) 340px;gap:3rem}
  .trail{position:sticky;top:5.5rem}
}

/* ══════════════════════════════════════════════════
   FULL-BLEED BAND + GROUP SPLIT
   ══════════════════════════════════════════════════ */

/* ── Full-bleed photographic band ────────────────
   Edge to edge regardless of the container: the section is not inside .wrap,
   so it simply spans the viewport. The inner .wrap keeps the text on the same
   left edge as everything else on the page. */
.band{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  padding:4.5rem 0;margin:0;
  display:flex;align-items:flex-end;min-height:46svh;
}
.band-pic{position:absolute;inset:0;z-index:-2}
.band-pic img{width:100%;height:100%;object-fit:cover;display:block;
               /* The subject of these photographs — a boat, a village roofline — sits
                  low in the frame. A centre crop on a band this wide throws away the
                  bottom third and leaves nothing but sky. */
               object-position:50% 68%}
.band::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,22,38,.32) 0%,rgba(11,22,38,.58) 45%,rgba(11,22,38,.93) 100%);
}
.band-in{position:relative;width:100%}
.band-in .kicker{color:var(--cyan-lt)}
.band-in h2{color:#fff;max-width:26ch;margin-bottom:.6rem}
.band-in p{color:#c7d5e6;max-width:52ch;margin-bottom:1.4rem}
.band-short{min-height:30svh;padding:2.6rem 0}
.band-short h2{font-size:clamp(1.4rem,4vw,2rem);margin-bottom:1.1rem}

/* ── Group switch ────────────────────────────────
   Three real pages, not a JS filter: each one is its own URL, its own title and
   its own hreflang cluster, which a filter can never be. */
.groupsw{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1.5rem}
.groupsw a{
  font-size:.86rem;font-weight:700;padding:.6rem 1rem;border-radius:999px;
  border:1.5px solid var(--line);background:var(--paper);color:var(--brand);
  min-height:44px;display:inline-flex;align-items:center;
}
.groupsw a:hover{border-color:var(--cyan);text-decoration:none}
.groupsw a.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* ── Group headings on the hub ───────────────── */
.grouphead{display:flex;align-items:baseline;gap:.6rem;margin-bottom:1.2rem}
.grouphead span{
  font-size:.8rem;font-weight:800;color:var(--muted);
  background:var(--soft);border-radius:999px;padding:.2rem .6rem;
}
.listnote{font-size:.95rem;color:var(--muted);max-width:var(--measure)}
.listhead .lede{max-width:var(--measure)}

/* ── Cards: four across once there is room for four ── */
.tourgrid{grid-template-columns:1fr}
@media (min-width:560px){
  .tourgrid{grid-template-columns:1fr 1fr}
}
@media (min-width:1100px){
  .tourgrid{grid-template-columns:repeat(4,1fr)}
  .band{padding:6rem 0}
}

/* Two circuits in a four-column grid reads as three empty slots. Cap the
   track count when a group is small so it looks chosen rather than unfinished. */
.tourgrid-few{max-width:780px}
@media (min-width:1100px){
  .tourgrid-few{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════════
   STANDALONE PAGES (page.php)
   ══════════════════════════════════════════════════ */
.prose{max-width:var(--measure)}
.prose p{margin-bottom:1.1rem;font-size:1.02rem;line-height:1.75;color:#334155}

/* About: the figures, stated plainly rather than dressed up */
.abstats{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.abstats li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem}
.abstats b{display:block;font-size:1.9rem;font-weight:800;line-height:1.1;color:var(--brand)}
.abstats span{display:block;font-size:.84rem;color:var(--muted);margin-top:.2rem}

/* Contact: five cards, three of them tappable */
.ctgrid{display:grid;gap:1rem;grid-template-columns:1fr}
.ctcard{
  display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem;color:inherit;transition:border-color .2s,transform .2s;
}
.ctcard:hover{border-color:var(--cyan);transform:translateY(-2px);text-decoration:none}
.ctcard-static:hover{border-color:var(--line);transform:none}
.ctcard h2{font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
           color:var(--muted);margin-bottom:.5rem}
.ctcard b{display:block;font-size:1.16rem;color:var(--brand);word-break:break-word}
.ctcard p{font-size:.88rem;color:var(--muted);margin:.35rem 0 0}

/* Transfers: the airport code beside the origin */
.iata{
  display:inline-block;background:var(--navy);color:var(--cyan-lt);border-radius:4px;
  font-size:.62rem;font-weight:800;letter-spacing:.06em;padding:.1rem .3rem;
  vertical-align:middle;margin:0 .15rem;
}

@media (min-width:640px){
  .ctgrid{grid-template-columns:1fr 1fr}
  .abstats{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1000px){
  .ctgrid{grid-template-columns:repeat(3,1fr)}
}

/* ── Fares table: the TND figure under the euro one ──
   Without display:block these ran together as "€2790 TND". */
.fares td.num small{display:block;font-weight:600;font-size:.76rem;color:var(--muted);margin-top:.1rem}
.cell-lbl{display:none}
/* inline-block so the block-level TND figure stacks under the euro one instead
   of running into it — "€27" + "90 TND" reads as "€2790 TND" otherwise. */
.cell-val{display:inline-block;text-align:right}

/* ── Below 700px the fares table stacks into cards ──
   A three-column price table cannot fit 375px, and horizontal scrolling on the
   most commercial page of a site with 70% mobile traffic is not good enough.
   The <thead> is hidden and each cell carries its own visible label instead. */
@media (max-width:700px){
  .fares{overflow-x:visible;border:0;background:transparent;border-radius:0}
  .fares table{min-width:0;font-size:1rem}
  .fares thead{display:none}
  .fares tbody,.fares tr,.fares td{display:block}
  .fares tr{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
    padding:.95rem 1.05rem;margin-bottom:.7rem;
  }
  .fares tbody tr:hover{background:var(--paper)}
  .fares td{padding:0;border:0}
  .fares td:first-child{
    font-size:.98rem;padding-bottom:.6rem;margin-bottom:.5rem;
    border-bottom:1px solid var(--soft);
  }
  .fares td.num{
    display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    text-align:right;padding:.3rem 0;
  }
  .cell-lbl{
    display:block;font-size:.8rem;font-weight:600;color:var(--muted);
    text-transform:none;letter-spacing:0;text-align:left;
  }
  .cell-val{font-weight:700}
  .fares td.num small{font-size:.8rem}
}

/* ── Transfers page: checker beside the note, fares per airport ── */
.tfhead{display:grid;gap:1.6rem;grid-template-columns:1fr;align-items:start}
.tfhead > *{min-width:0}
.tfnote p{font-size:1rem;line-height:1.7;color:#334155;max-width:44ch}

.apblock{margin-bottom:2.6rem}
.apblock h3{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
            font-size:1.22rem;font-weight:800;color:var(--navy);margin-bottom:.4rem}
.apintro{font-size:.95rem;color:var(--muted);max-width:var(--measure);margin-bottom:1rem}
.apmore{margin-top:.8rem;font-size:.86rem}

/* FAQ: <details> so it works with no JS at all */
.tffaq{max-width:var(--measure)}
.tffaq details{border-bottom:1px solid var(--line);padding:.2rem 0}
.tffaq summary{
  cursor:pointer;padding:1rem 0;font-weight:700;font-size:1.02rem;color:var(--navy);
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;
  min-height:52px;
}
.tffaq summary::-webkit-details-marker{display:none}
.tffaq summary::after{content:'+';font-size:1.4rem;font-weight:400;color:var(--cyan-dk);flex:0 0 auto}
.tffaq details[open] summary::after{content:'−'}
.tffaq details p{margin:0 0 1.1rem;color:#475569;font-size:.96rem;line-height:1.72;max-width:62ch}

@media (min-width:900px){
  /* The checker leads on desktop; the note sits beside it rather than under. */
  .tfhead{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:2.6rem}
}

/* ══════════════════════════════════════════════════
   TRANSFERS PAGE — UI/UX pass
   ══════════════════════════════════════════════════ */

/* ── Trust row under the H1 ──────────────────────
   Absent before. On a page asking a stranger to meet you at an airport, this
   is the element that decides whether the rest gets read. */
.trustrow{
  list-style:none;padding:0;margin:1.3rem 0 0;
  display:flex;flex-wrap:wrap;gap:.5rem .55rem;
}
.trustrow li{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:.44rem .85rem;font-size:.83rem;font-weight:600;color:#334155;
}
.trustrow li::before{content:'✓';color:var(--cyan-dk);font-weight:800}
.trustrow .tr-star{border-color:rgba(240,180,41,.5);background:rgba(240,180,41,.09)}
.trustrow .tr-star::before{content:none}
.trustrow .tr-star b{color:#7a5200;font-weight:800}

/* ── The checker column ──────────────────────────
   Was 420px, which wrapped "FIXED PRICE, ALL INCLUSIVE" onto two lines and
   broke the amount away from its own caption. */
.checker h2{font-size:1.22rem}
.result .lbl{white-space:nowrap}

/* ── Right column: 500px of dead space, now the inclusions ── */
.tfnote h2{font-size:1.05rem;margin-bottom:.9rem}
.tfnote .tlist li{padding-left:1.7rem;font-size:.98rem}
.tfnote-p{
  margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--muted);max-width:46ch;
}

/* ── Jump nav ────────────────────────────────── */
.jumpnav{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin:1.2rem 0 2rem}
.jumpnav span{font-size:.74rem;font-weight:800;letter-spacing:.11em;
              text-transform:uppercase;color:var(--muted);margin-right:.2rem}
.jumpnav a{
  display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:44px;
  background:var(--navy);color:var(--cyan-lt);border-radius:8px;
  font-size:.86rem;font-weight:800;letter-spacing:.06em;
}
.jumpnav a:hover{background:var(--brand);color:#fff;text-decoration:none}

/* Anchored blocks must clear the fixed header when jumped to. */
.apblock{scroll-margin-top:5.5rem}

/* ── Fare tables: scannable, and tappable ────────
   A three-column table across 1320px put the route name a screen away from its
   own price. Constrained, so the eye can track a row. */
.apblock .fares{max-width:820px}
.faresrow{cursor:pointer;transition:background .15s}
.faresrow:hover,.faresrow:focus-visible{background:rgba(6,182,212,.07);outline:none}
.faresrow:focus-visible{box-shadow:inset 0 0 0 2px var(--cyan)}
.faresrow.picked{background:rgba(6,182,212,.12)}
.faresrow td:first-child b{color:var(--brand)}

/* ── Sticky quote bar ───────────────────────────
   The page is ~5600px on desktop and far more on a phone; once the checker
   scrolled away there was nothing to act on. */
.stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;gap:1rem;
  padding:.7rem 1.15rem;padding-bottom:calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(11,22,38,.96);backdrop-filter:blur(14px);
  box-shadow:0 -8px 26px -14px rgba(0,0,0,.6);
}
.stickycta[hidden]{display:none}
.sc-price{flex:1 1 auto;min-width:0;color:#fff;line-height:1.25}
.sc-price span{display:block;font-size:.72rem;color:#9fb3c8;
               white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-price b{font-size:1.32rem;font-weight:800;color:var(--cyan-lt)}
.stickycta .btn{flex:0 0 auto}

@media (min-width:900px){
  /* Wider checker so the result panel stops wrapping, and the inclusions sit
     beside it instead of leaving half the container empty. */
  .tfhead{grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:3rem;align-items:start}
  .trustrow li{font-size:.86rem}
  /* The bar is a mobile affordance; on desktop the checker is rarely far away. */
  .stickycta{display:none}
}

/* ── Founders ────────────────────────────────────
   Named people are the strongest asset an unknown travel brand has. The card
   works with or without a photograph — the initials block is deliberate, so a
   missing photo never becomes an excuse to reach for a stock face. */
.teamgrid{display:grid;gap:1.2rem;grid-template-columns:1fr;margin-top:1.6rem}
.teamcard{
  margin:0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
}
.teamcard img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.teaminit{
  aspect-ratio:1/1;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--navy),var(--brand));
  color:var(--cyan-lt);font-size:2.6rem;font-weight:800;letter-spacing:-.03em;
}
.teamcard figcaption{padding:1.1rem 1.2rem 1.3rem}
.teamcard b{display:block;font-size:1.1rem;color:var(--navy);line-height:1.3}
.teamrole{
  display:block;margin-top:.15rem;font-size:.72rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-dk);
}
.teamcard p{margin:.7rem 0 0;font-size:.93rem;line-height:1.65;color:#475569}

@media (min-width:700px){
  .teamgrid{grid-template-columns:repeat(3,1fr)}
}

/* ── Themes: browse by interest, not by geography ──
   Full-bleed alternating bands. The tint spans the viewport because .thband
   sits outside .wrap; the .wrap inside holds the text to the same left edge as
   the rest of the site. Below 900px the photo stacks under the words. */
.thband{padding:3rem 0 2.4rem;background:var(--bg)}
.thband-alt{background:linear-gradient(180deg,#fdf6e9,#fbf1e0)}
.thband-in{display:grid;gap:1.4rem;grid-template-columns:1fr;align-items:center}

.thband-k{
  display:block;font-size:.82rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cyan-dk);margin-bottom:.5rem;
}
.thband-t{
  font-size:clamp(2rem,6.2vw,3.4rem);line-height:1.02;letter-spacing:-.02em;
  font-style:italic;color:var(--navy);margin:0 0 1rem;
}
.thband-b{list-style:none;padding:0;margin:0 0 1.3rem;max-width:52ch}
.thband-b li{
  position:relative;padding-left:1.1rem;margin-bottom:.5rem;
  color:#475569;line-height:1.55;
}
/* Marker as a pseudo-element, not a list-style: it has to take the accent
   colour independently of the text. */
.thband-b li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--cyan);
}
.thband-cta{
  display:inline-flex;align-items:center;gap:.55rem;min-height:44px;
  font-weight:800;color:var(--navy);font-size:.95rem;
}
.thband-cta:hover{color:var(--cyan-dk);text-decoration:none}
.thband-n{
  background:var(--navy);color:#fff;border-radius:999px;
  padding:.2rem .65rem;font-size:.76rem;font-weight:800;letter-spacing:.03em;
}
.thband-pic img{
  width:100%;border-radius:var(--r);display:block;aspect-ratio:16/10;
  object-fit:cover;box-shadow:var(--shadow-lg);
}

.themelist{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.5rem}
.themelist a{
  display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:baseline;
  padding:.85rem 1rem;min-height:52px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--rs);
  color:inherit;transition:border-color .18s,transform .18s;
}
.themelist a:hover{border-color:var(--cyan);transform:translateX(3px);text-decoration:none}
.tl-name{font-weight:700;color:var(--navy);line-height:1.35}
.tl-price{font-weight:800;color:var(--brand);white-space:nowrap}
.tl-meta{grid-column:1;font-size:.82rem;color:var(--muted)}

@media (min-width:900px){
  /* Text left, photo right — and on the alternating bands the two swap, which
     is the whole visual rhythm of the section. order, not direction, so the
     DOM order (and therefore the reading order) is unchanged. */
  .thband-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3.2rem}
  .thband-alt .thband-txt{order:2}
  .thband-alt .thband-pic{order:1}
  .themelist{grid-template-columns:1fr 1fr}
}
@media (min-width:1200px){
  .themelist{grid-template-columns:repeat(3,1fr)}
}

/* ── Landing conversion elements ───────────────── */
.hero-trustline{margin:.9rem 0 0;font-size:.8rem;font-weight:600;color:#9fb3c8}
.hero-langs{margin:1.6rem 0 0;font-size:.82rem;color:#8fa6bd}
.hero-langs a{color:var(--cyan-lt);font-weight:700}

/* ══════════════════════════════════════════════════
   THE TWO DAYS — coach vs private
   The one comparison the business wins outright, so it gets real estate.
   Mobile stacks (theirs first, so the contrast reads top-down); from 760px
   the two clocks sit side by side and the difference is visible at a glance.
   ══════════════════════════════════════════════════ */
.vsday{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.8rem}
.vsday-col{border-radius:var(--r);padding:1.4rem 1.3rem;border:1px solid var(--line)}
.vsday-col h3{font-size:1.02rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.vsday-col h3::before{
  content:'';width:9px;height:9px;border-radius:50%;flex:0 0 auto;
}
.vsday-col ol{list-style:none;padding:0;margin:0}
.vsday-col li{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;padding:.55rem 0;
              border-top:1px solid var(--line);font-size:.92rem;line-height:1.5}
.vsday-col li:first-child{border-top:0;padding-top:0}
.vsday-col li b{font-variant-numeric:tabular-nums;font-weight:800;font-size:.82rem;
                white-space:nowrap;padding-top:.1rem}

/* Theirs: muted, struck through in spirit — not mocked, just drained. */
.vsday-them{background:var(--soft);border-color:var(--line)}
.vsday-them h3{color:var(--muted)}
.vsday-them h3::before{background:#b6b1a8}
.vsday-them li{color:#6b7280}
.vsday-them li b{color:#9aa3ad}

/* Ours: the page's own colours, so the eye lands here. */
.vsday-us{background:var(--navy);border-color:var(--navy)}
.vsday-us h3{color:#fff}
.vsday-us h3::before{background:var(--cyan)}
.vsday-us li{color:#c7d5e6;border-top-color:rgba(255,255,255,.14)}
.vsday-us li b{color:var(--cyan-lt)}
.vsnote{margin-top:.9rem;font-size:.8rem;color:var(--muted);max-width:var(--measure)}

@media (min-width:760px){
  .vsday{grid-template-columns:1fr 1fr;gap:1.2rem}
  .vsday-col{padding:1.7rem 1.6rem}
}

/* ── Stop cards with a photograph ────────────────
   The image sits flush at the top of the existing card; a stop with no
   photograph keeps the old text-only card and the grid stays even. */
.tstop{padding:0;overflow:hidden;display:flex;flex-direction:column}
.tstop-body{padding:1rem}
.tstop img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.tstop-img .tstop-body{padding-top:.9rem}

/* ── A–M answer sections ── */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tanswer{margin:0 0 1.6rem}
.tanswer-p{font-size:1.06rem;line-height:1.6;color:var(--navy);margin:0;
  padding:.9rem 1.1rem;background:var(--paper);border-left:3px solid var(--cyan,#06b6d4);
  border-radius:0 10px 10px 0}
.tsuits,.twhen{margin:2rem 0 0}
.tseason{display:grid;gap:.5rem;margin:.2rem 0 .7rem}
.tseason div{display:grid;grid-template-columns:minmax(7.5rem,auto) 1fr;gap:.9rem;
  align-items:baseline;padding:.45rem 0;border-bottom:1px solid var(--line)}
.tseason dt{font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted)}
.tseason dd{margin:0;color:var(--navy)}
.tco{border-top:1px solid var(--line);padding:2.2rem 0}
.tfacts-co{max-width:52rem}
.tfacts .tfacts-wide{grid-column:1/-1}
@media(max-width:560px){.tseason div{grid-template-columns:1fr;gap:.15rem}}