@charset "utf-8";
/* ==========================================================
   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-quiet{opacity:.8;font-weight:600}
.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}
/* ── Translated tiers get a tighter header ────────────
   Seven nav items, four language pills, four currency pills and a WhatsApp
   button fit a 1320px container in English. No other language's labels do:
   German needs about 1470px, and the WhatsApp button was CLIPPED at the right
   edge by body{overflow-x:hidden} — the same failure the 1260px burger
   breakpoint was introduced to fix at 1200px, still present above it. Measured
   one band above that breakpoint, at 1280px: English fits, French was clipped,
   Italian and German were clipped until this rule.

   :not([lang="en"]) rather than a list of codes, because the cause is that
   every translated label set is wider than the English one it replaces — so a
   tier added later inherits the fix instead of needing its own. Only applies
   where the horizontal nav exists; below 1260px it is all in the burger, which
   has room. */
@media (min-width:1261px){
  html:not([lang="en"]) .nav{gap:0}
  html:not([lang="en"]) .nav a{padding:.55rem .42rem;font-size:.85rem}
  html:not([lang="en"]) .hdr-tools{gap:.35rem;margin-left:.15rem}
  html:not([lang="en"]) .langsw a,
  html:not([lang="en"]) .cursw button{min-width:30px;padding:0 .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}

/* ── Places band: the destination pages as a slow ribbon under the hero ── */
.places{background:var(--navy);color:#efe6d3;overflow:hidden;
  border-top:1px solid rgba(200,166,106,.28);border-bottom:1px solid rgba(200,166,106,.28)}
.places-track{display:flex;width:max-content;animation:places-run 70s linear infinite}
.places:hover .places-track,.places:focus-within .places-track{animation-play-state:paused}
.places-list{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.places-list li{display:flex;align-items:center}
.places-list a{display:block;padding:1.05rem 1.5rem;font-family:'Playfair Display',Georgia,serif;
  font-weight:500;font-size:1.22rem;letter-spacing:.015em;color:inherit;text-decoration:none;white-space:nowrap}
.places-list a:hover,.places-list a:focus-visible{color:#fff;text-decoration:underline;
  text-decoration-color:var(--gold);text-underline-offset:.32em;text-decoration-thickness:1px}
.places-list i{color:var(--gold);font-style:normal;font-size:.72rem;line-height:1}
@keyframes places-run{to{transform:translateX(-50%)}}
@media (max-width:640px){.places-list a{font-size:1.04rem;padding:.85rem 1rem}}
@media (prefers-reduced-motion:reduce){
  .places-track{animation:none;width:auto;justify-content:center}
  .places-list{flex-wrap:wrap;justify-content:center}
  .places-list[aria-hidden]{display:none}
  .places-list li:last-child i{display:none}
}

/* ── 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)}
/* Quatre colonnes pour quatre blocs : avec trois, « Contact » retombait seul
   sur une deuxieme ligne, sous le logo, au lieu de s'aligner avec les autres. */
.f-grid{display:grid;gap:2rem;grid-template-columns:1.6fr 1fr 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}
/* Quatre colonnes rendent la derniere etroite : a 962px l'adresse e-mail
   remplit exactement sa colonne. Sans point de coupure elle deborderait au
   moindre changement de rendu, donc on l'autorise a passer a la ligne. */
footer li a[href^="mailto"]{overflow-wrap:anywhere}
.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}
/* The index the panel opens on: every place as a pill, the same card chrome
   as .lm so the aside keeps one shape whichever state it is in. */
.lm-index{background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;box-shadow:var(--shadow)}
.lm-index[hidden]{display:none}
.lm-i{font:inherit;font-size:.82rem;font-weight:600;line-height:1.2;color:var(--brand);background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:.4rem .7rem;cursor:pointer;transition:border-color .15s,transform .15s}
.lm-i:hover{border-color:var(--cyan);transform:translateY(-1px)}
.lm-i[hidden]{display:none}
.lm-i.hint{border-color:var(--cyan)}
.lm-zone{margin-bottom:.95rem}
.lm-zone:last-child{margin-bottom:0}
.lm-zone[hidden]{display:none}
.lm-zone h4{font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 .45rem}
.lm-pills{display:flex;flex-wrap:wrap;gap:.4rem}
/* A hovered name lights its pin, and the other way round. */
.pin.hint{box-shadow:0 0 0 7px rgba(6,182,212,.28);z-index:3}
.pin.unesco.hint{box-shadow:0 0 0 7px rgba(240,180,41,.3)}
.pin.hint span{opacity:1}
.chip small{font-size:.8em;font-weight:600;opacity:.6;margin-left:.15rem}
.lm-u{color:var(--sand);margin-left:.3rem;font-size:.72em}
.lm-back{font:inherit;font-size:.8rem;font-weight:700;color:var(--cyan-dk);background:none;border:0;
  padding:0;margin:0 0 .6rem;cursor:pointer}
.lm-back:hover{text-decoration:underline}
.lm-back[hidden]{display:none}

@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)}
.rot span[data-p]::before{content:attr(data-p)}
@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.9rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(285px,1fr))}

/* ── Tour card ───────────────────────────────────
   No frame. The photograph carries the card and the type sits on the page
   beneath it, which is what stops this reading like every other tour tile.
   The whole card is one link (see the stretched ::after on the heading), so
   the tap target is the tile rather than a 15px line of text. */
.tcard{
  position:relative;display:flex;flex-direction:column;background:none;border:0;
  border-radius:0;box-shadow:none;overflow:visible;
}
.tcard[hidden]{display:none}

.tcard-img{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy);
  border-radius:14px;
  transition:box-shadow .3s cubic-bezier(.2,.8,.3,1);
}
.tcard-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.3,1);
}
/* A scrim only where the chips sit, so white text stays legible on a pale sky
   without greying down the whole photograph. */
.tcard-img::after{
  content:'';position:absolute;inset:auto 0 0 0;height:45%;pointer-events:none;
  background:linear-gradient(to top,rgba(11,22,38,.55),transparent);
}
.tcard:hover .tcard-img img{transform:scale(1.06)}
.tcard:hover .tcard-img{box-shadow:0 18px 40px -18px rgba(11,22,38,.55)}

/* Chips: small, glassy, and both at the top so the lower half of the picture
   stays a picture. */
.tbadge{
  position:absolute;top:.75rem;left:.75rem;z-index:2;
  padding:.3rem .62rem;border-radius:999px;
  font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.tbadge.cyan{background:var(--cyan-lt);color:#04222b}
.tbadge.sand,.tbadge.gold{background:var(--sand);color:#3a2703}
.tdur{
  position:absolute;top:.75rem;right:.75rem;bottom:auto;z-index:2;
  padding:.3rem .62rem;border-radius:999px;
  background:rgba(11,22,38,.55);color:#fff;font-size:.7rem;font-weight:700;
  letter-spacing:.03em;backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);
}

.tcard-body{padding:.9rem .1rem 0;display:flex;flex-direction:column;flex:1}
.tcard h3{font-size:1.06rem;line-height:1.32;margin-bottom:.3rem;letter-spacing:-.01em}
.tcard h3 a{color:var(--navy)}
/* The stretched link: the heading's anchor covers the whole tile. */
.tcard h3 a::after{content:'';position:absolute;inset:0;z-index:3}
.tcard:hover h3 a{color:var(--cyan-dk)}
/* A day trip lists three stops, a fifteen-day circuit lists thirty. Left
   unbounded the long card drags its whole grid row taller and leaves a band of
   dead space under every short card beside it. Four lines is enough to sell the
   route; the tour page carries the full itinerary, and the text stays in the
   markup, so nothing is hidden from a crawler. */
.tstops{font-size:.82rem;color:var(--muted);margin:0 0 .9rem;flex:1;line-height:1.5;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}

/* The price is the largest thing here on purpose: publishing it is the whole
   argument the site makes. The old filled button competed with it; an arrow
   link does the same job without shouting over the number. */
.tcard-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:.7rem;
  padding-top:0;border-top:0;
}
.tfrom{font-size:.74rem;color:var(--muted);line-height:1.25}
.tfrom b{display:block;font-size:1.5rem;color:var(--navy);font-weight:800;letter-spacing:-.02em}
.tfrom small{display:block;font-size:.71rem}
.tcard-foot .btn{
  position:relative;z-index:4;
  background:none;border:0;box-shadow:none;padding:0;min-height:0;
  color:var(--cyan-dk);font-weight:800;font-size:.84rem;white-space:nowrap;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),color .2s;
}
.tcard-foot .btn:hover{background:none;color:var(--navy);transform:translateX(3px)}
.tcard:hover .tcard-foot .btn{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .tcard-img img,.tcard-foot .btn{transition:none}
  .tcard:hover .tcard-img img{transform:none}
}

/* ── Transfers row ─────────────────────────────── */
.trow{display:grid;grid-template-columns:.8fr 1.2fr;gap:1.4rem;align-items:start}
/* The fare table needs ~520px before its wrapper starts scrolling sideways.
   At .85/1.15 the table's column was 475px at a 900px viewport, so a laptop
   or landscape tablet got a horizontally scrolling price list next to a
   checker with room to spare. Slightly more to the table, and the two
   columns do not form at all until there is width for both. */
.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:1023px){
  .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}
/* A page's OWN h1 inside the band, not a mid-page teaser's h2 — same band,
   used as the page's welcome instead of a cross-sell. Slightly wider measure
   than the h2 rule: a page title runs longer than a teaser line. Most of the
   pills that follow (.trustrow, .groupsw, .tlangs) already render as solid
   white, so they read cleanly here with no override of their own — checked
   by actually loading the page, not assumed from the CSS. */
.band-in h1{color:#fff;max-width:34ch;margin-bottom:.6rem}
/* The one pill that did not already work: .tr-star is a 9%-opacity gold
   TINT, built to sit on the paper-white page the trust row normally lives
   on — against a dark photo that reads as almost see-through, and its dark
   amber text loses the contrast it had on white. An opaque white base fixes
   it and keeps the gold as a border, which is still distinct from its three
   plain siblings without disappearing into the photo behind it. */
.band .trustrow .tr-star{background:#fff;border-color:rgba(240,180,41,.6)}

/* ── 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;
  }
  /* One line per price. The euro figure and the dinar one were stacked, which
     cost ~25px in every price cell and made a single fare row 194px tall — a
     13-route airport ran past 2500px of scrolling. Side by side with a real
     gap they still cannot read as "€2790", which is why they were stacked. */
  .cell-val{display:flex;align-items:baseline;justify-content:flex-end;gap:.5rem;font-weight:700}
  .fares td.num small{display:inline;margin-top:0;font-size:.8rem;white-space:nowrap}
  /* The separator the site already uses between facts. Seven pixels of gap
     alone still let "€21  70 TND" be misread as one number; a middot cannot. */
  .fares td.num small::before{content:'·';margin-right:.5rem;color:var(--line)}
}

/* ── 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}
.bob{margin:2rem 0 0;padding:1.3rem 1.5rem 1.2rem;border:2px solid var(--cyan);border-radius:16px;background:linear-gradient(180deg,#f0fbfd,#fff)}
.bob h2{margin:0 0 .5rem;font-size:1.35rem}
.bob>p{margin:0 0 .9rem;max-width:var(--measure)}
.bob ol{margin:0;padding:0 0 0 1.35rem;max-width:var(--measure)}
.bob ol li{margin:.45rem 0;padding-left:.2rem}
.bob ol li::marker{font-weight:700;color:var(--cyan-dk)}
.bob .bob-small{margin:.9rem 0 0;font-size:.85rem;color:var(--muted)}
.tnote-bob{font-weight:700;color:var(--cyan-lt)}
.bk-port{margin-top:.6rem}
.bk-group{margin:.9rem 0 .4rem;padding:1rem 1.1rem;border:2px solid var(--cyan);border-radius:12px;background:#f0fbfd}
.bk-group h4{margin:0 0 .35rem;font-size:1.02rem;color:var(--navy)}
.bk-group p{margin:0;font-size:.92rem;color:var(--ink)}
.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}
.readfirst{max-width:52rem;margin-top:1.2rem}
.readfirst a{display:block;margin-top:.35rem}
.tfacts-co{max-width:52rem}
/* .tfacts is dressed for the navy hero: white values, slate labels, a faint
   white rule. .tco reuses it on the light page, where white-on-white set the
   whole block in invisible ink — a heading over an apparently empty section.
   Same bug as the booking summary, mirrored. */
.tco .tfacts{border-top-color:var(--line)}
.tco .tfacts dt{color:var(--muted)}
.tco .tfacts dd{color:var(--ink)}
.tfacts .tfacts-wide{grid-column:1/-1}
@media(max-width:560px){.tseason div{grid-template-columns:1fr;gap:.15rem}}

/* ── Hero: one viewport on phones ──
   Measured 914px against an 812px screen, so the photograph was cut off and
   the "one screen" rule the hero was rebuilt for did not hold on mobile.
   Padding and inter-block gaps only — no content dropped, no type shrunk. */
@media (max-width:760px){
  .hero-stage{padding:4.5rem 0 2rem}          /* was 7rem / 3rem */
  .hero .hs-cap .eyebrow{margin-bottom:.7rem}
  .hero .hs-cap .lede{margin-bottom:.8rem}
  .hero-cta{margin-top:1.1rem}
  .hero-trustline{margin-top:.7rem}
  .hero-facts{margin-top:1.2rem;gap:1.1rem}
  .hero-jump{margin-top:1rem}
  .hero-langs{margin-top:1rem}
}
/* A phone in landscape is only ~375px tall: there the hero must be allowed to
   grow again rather than crush the text into an unreadable band. */
@media (max-width:760px) and (max-height:520px){
  .hero{min-height:auto}
  .hero-stage{padding:4rem 0 2rem}
}

/* ── Transfers: airports side by side on wide screens ──
   Each table was capped at 820px inside a 1320px container and the three
   airports stacked, so half the desktop width went unused and the section ran
   ~3500px tall. Columns instead of a wider table: the fare grid stays a
   readable measure and all three airports fit on one or two screens. */
.apgrid{display:grid;gap:2.2rem;grid-template-columns:1fr}
.apgrid > .apblock{margin-bottom:0;min-width:0}
/* 1160, not 1000: two columns need 2x520px for the fare tables plus the gap,
   which a 1000px viewport (963px container) cannot give — it produced 453px
   columns and put a horizontal scrollbar inside each table. */
@media (min-width:1160px){
  .apgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem 2.6rem}
  .apblock .fares{max-width:none}
  /* An odd airport out would leave a hole on the last row; letting the final
     block span keeps the block flush rather than half-empty. */
  .apgrid > .apblock:last-child:nth-child(odd){grid-column:1/-1}
  .apgrid > .apblock:last-child:nth-child(odd) .fares{max-width:820px}
}
/* Three columns was tried and rejected: the fare table needs ~520px before it
   starts scrolling sideways, and a 1320px container splits into 406px thirds.
   Two columns give each table ~640px, which it fits without a scrollbar. */
@media (min-width:1160px){
  .apgrid .fares th:first-child,.apgrid .fares td:first-child{width:54%}
}

/* ── Checker + note: stack until both fit ──
   .tfhead went two-column at exactly 900px with the checker pinned to 470px,
   which left the note 330px — about forty characters a line, beside a widget
   with room to spare. The tfhead needs room for BOTH columns before it forms
   one, the same rule the fare row beside the checker now follows. */
@media (max-width:999px){
  .tfhead{grid-template-columns:1fr;gap:1.6rem}
}

/* ── Guide links under the home page FAQ ──────── */
.guidelinks{margin-top:2.2rem}
.guidelinks h3{font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.8rem}
.guidelinks ul{list-style:none;margin:0 0 1.1rem;padding:0;
  display:grid;gap:.55rem 1.6rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.guidelinks li{position:relative;padding-left:1.05rem;font-size:.93rem;line-height:1.45}
.guidelinks li::before{content:'→';position:absolute;left:0;top:0;color:var(--cyan-dk);font-weight:700}
.guidelinks a{color:var(--navy);text-decoration:none}
.guidelinks a:hover{color:var(--cyan-dk);text-decoration:underline;text-underline-offset:3px}
.guidelinks .btn{color:var(--navy)}

/* Les deux portes de la reservation se ressemblent : le bouton du resultat
   prend la meme forme et la meme taille que « ... sur WhatsApp » juste dessous,
   au lieu d'une petite pastille cyan qui se lisait comme un lien secondaire. */
.bk-go{width:100%;margin-top:.9rem}


/* ── Guide: stop-by-stop lists ───────────────────
   A numbered run of places, each with a paragraph. Numbered because the order
   is the itinerary's order, not an editor's ranking. */
.stoplist{list-style:none;counter-reset:stop;padding:0;margin:1.4rem 0 0}
.stoplist>li{counter-increment:stop;position:relative;padding:0 0 1.5rem 3.1rem;margin:0}
.stoplist>li::before{content:counter(stop);position:absolute;left:0;top:.1rem;
  width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;
  background:var(--sand);color:#3a2703;font-weight:800;font-size:.9rem}
.stoplist>li:not(:last-child)::after{content:'';position:absolute;left:1.1rem;top:2.5rem;
  bottom:.2rem;width:2px;background:var(--line)}
.stoplist h3{margin:0 0 .15rem;font-size:1.06rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.stoplist .stopregion{margin:0 0 .45rem;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
.stoplist p{margin:0}

/* Numbered list inside a guide section (the questions-to-ask checklist). */
.glist{margin:.6rem 0 0 1.1rem;padding:0}
.glist li{margin-bottom:.55rem}

/* The circuit a deep dive is about — a block, not a row in a list. */
.gtour{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:var(--r);
  padding:1.1rem 1.3rem;margin:2rem 0 0;background:var(--paper)}
.gtour h2{margin:0 0 .2rem;font-size:1.14rem}
.gtour .sub{margin:0;font-size:.86rem;color:var(--muted)}
.gtour-act{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.gtour-price{font-weight:700}

/* The link from a tour's itinerary to its written-up companion. */
.titin-more{margin:.9rem 0 0;font-size:.92rem;font-weight:600}


/* ── Cruise page: the two shapes of the same day ──
   The lead card is the version that starts at the terminal; the second is the
   same three sights from a hotel, for readers who are not on a ship. */
.crtours{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:1.4rem 0 0}
.crtour{position:relative;display:flex;flex-direction:column;gap:.35rem;
  border:1px solid var(--line);border-radius:var(--r);padding:1.15rem 1.25rem;
  background:var(--paper);color:inherit;transition:transform .18s,box-shadow .18s,border-color .18s}
.crtour:hover{transform:translateY(-3px);border-color:var(--cyan);text-decoration:none;
  box-shadow:0 14px 34px -18px rgba(15,23,42,.5)}
.crtour-lead{border-left:4px solid var(--sand)}
.crbadge{align-self:flex-start;background:var(--sand);color:#3a2703;border-radius:999px;
  padding:.2rem .6rem;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.crtour h3{margin:.15rem 0 0;font-size:1.06rem}
.crmeta{margin:0;font-size:.8rem;color:var(--muted)}
.crsum{margin:.2rem 0 .5rem;font-size:.9rem}
.crprice{margin-top:auto;font-weight:700}


/* ── Guide index ──────────────────────────────────
   Was a bare list of links. Cards with a picture and the answer in one line, so
   the page is scannable and each guide sells itself before you click it. */
.gstats{display:flex;gap:1.8rem;flex-wrap:wrap;list-style:none;padding:0;margin:1.2rem 0 0}
.gstats li{display:flex;flex-direction:column;line-height:1.15}
.gstats b{font-size:1.5rem;color:var(--cyan)}
.gstats span{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

.gfilterbar{padding:1.4rem 0 .2rem;background:var(--paper);border-bottom:1px solid var(--line)}
.gchips{display:flex;gap:.45rem;flex-wrap:wrap}
.gchip{border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:999px;padding:.5rem .9rem;font:inherit;font-size:.86rem;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  transition:border-color .15s,background .15s,color .15s}
.gchip:hover{border-color:var(--cyan)}
.gchip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gchip-n{font-size:.72rem;opacity:.65;font-weight:700}
.gchip.on .gchip-n{opacity:.8}
.gsearch{display:block;margin:.7rem 0 0}
.gsearch input{width:100%;max-width:420px;border:1px solid var(--line);border-radius:999px;
  padding:.6rem 1rem;font:inherit;font-size:.92rem;background:var(--paper);color:var(--ink)}
.gsearch input:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent}
.gcount{margin:.5rem 0 .6rem;font-size:.82rem;color:var(--muted);min-height:1.1em}

.ggroup{margin-top:2.6rem}
.ggroup-intro{max-width:var(--measure);color:var(--muted);margin:-.2rem 0 1.2rem}
.gcards{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.gcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--paper);color:inherit;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s,border-color .2s}
.gcard:hover{transform:translateY(-4px);border-color:var(--cyan);text-decoration:none;
  box-shadow:0 18px 40px -22px rgba(15,23,42,.55)}
.gcard-img{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--soft)}
.gcard-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.gcard:hover .gcard-img img{transform:scale(1.05)}
.gcard-body{display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.1rem 1.15rem;flex:1}
.gcard-body h3{margin:0;font-size:1.02rem;line-height:1.3}
.gcard-body p{margin:0;font-size:.89rem;color:var(--muted);flex:1}
.gcard-go{font-size:.84rem;font-weight:700;color:var(--cyan-dk,#0891b2)}
.gcard[hidden],.ggroup[hidden]{display:none}

.gempty{margin:2rem 0;color:var(--muted)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--cyan-dk,#0891b2);
  cursor:pointer;text-decoration:underline}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .gcard,.gcard-img img{transition:none}
  .gcard:hover{transform:none}
  .gcard:hover .gcard-img img{transform:none}
}
@media (max-width:600px){ .gcards{grid-template-columns:1fr} }

/* Second line on the contact address card — the zone under the complex name. */
.ctsub{display:block;font-size:.84rem;color:var(--muted);font-weight:400;margin-top:.15rem}


/* ── One transfer route ───────────────────────────
   The fare first, because that is why the page was opened, then the facts that
   let someone judge it: distance, time, where the driver stands. */
.rtgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:1.5rem 0 0}
.rtcard{border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem;background:var(--paper);
  display:flex;flex-direction:column;gap:.25rem}
.rtcard h2{margin:0;font-size:1.05rem}
.rtcap{margin:0;font-size:.82rem;color:var(--muted)}
.stgrid .rtcard h3{font-size:1.02rem;margin:0 0 .4rem;color:var(--navy)}
.stgrid .rtprice{font-size:1.5rem}
.stgrid .rtcap{line-height:1.5}
.bk-stops{margin-top:.9rem}
.bk-form .bk-stops label.bk-radio{margin:.45rem 0}
.rtprice{margin:.5rem 0 0;font-size:1.9rem;font-weight:800;line-height:1}
.rtper{margin:0 0 .9rem;font-size:.8rem;color:var(--muted)}
.rtcard .btn{margin-top:auto;width:100%}

.rtfacts{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:1.2rem 0 0}
.rtfacts>div{border-left:3px solid var(--cyan);padding:.15rem 0 .15rem .9rem}
.rtfacts dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.rtfacts dd{margin:.15rem 0 0;font-weight:600}

.rtsibs{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.rtsibs a{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  border:1px solid var(--line);border-radius:var(--rs);padding:.7rem .9rem;color:inherit;
  transition:border-color .15s,transform .15s}
.rtsibs a:hover{border-color:var(--cyan);text-decoration:none;transform:translateY(-2px)}
.rtsibs b{white-space:nowrap;font-size:.86rem}


/* ── /transfers/ hero: the routes list ───────────
   The right column held 51 words beside a 639px checker, so the roomier half of
   the grid was mostly empty. These fill it with something bookable, and give the
   route pages their only link from this hub. */
.tfpop-h{font-size:1.05rem;margin:1.8rem 0 .2rem}
.tfpop-p{font-size:.9rem;color:var(--muted);margin:0 0 .8rem;max-width:52ch}
.tfpop{list-style:none;padding:0;margin:0;display:grid;gap:.45rem;
       grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.tfpop li{margin:0}
.tfpop a{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  border:1px solid var(--line);border-radius:var(--rs);padding:.6rem .8rem;color:inherit;
  background:var(--paper);transition:border-color .15s,transform .15s,box-shadow .15s}
.tfpop a:hover{border-color:var(--cyan);text-decoration:none;transform:translateY(-2px);
  box-shadow:0 10px 24px -16px rgba(15,23,42,.5)}
.tfpop-r{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.tfpop-r b{font-size:.93rem}
.tfpop-r small{font-size:.73rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tfpop-price{font-weight:800;white-space:nowrap;font-size:.95rem}
@media (prefers-reduced-motion:reduce){ .tfpop a:hover{transform:none} }


/* Hint under the pick-up time on /book/transfer/. */
.bk-hint{display:block;margin-top:.25rem;font-size:.76rem;color:var(--muted);font-weight:400}


/* ── Booking summary: the route on a map ─────────
   Airport names carry no geography for a first-time visitor. The country with
   two points on it answers "how far across Tunisia is this" at a glance, and it
   is inline SVG — no tile server, no third-party request, no API key. */
.bk-map{margin:.9rem 1.15rem 0}
/* Fills the card rather than floating small in the middle of it: at 100px wide
   the coastline was unreadable and the leg was a smudge. */
.bk-map svg{display:block;width:100%;height:auto;border-radius:var(--rs);
            background:#eaf2f7;border:1px solid var(--line)}
.bk-map-land{fill:#dcd3c2;stroke:#c4b8a2;stroke-width:.35;stroke-linejoin:round}
.bk-map-leg{stroke:var(--cyan);stroke-width:1.1;stroke-linecap:round;stroke-dasharray:2.6 2}
.bk-map-a{fill:var(--paper);stroke:var(--ink);stroke-width:1}
.bk-map-b{fill:var(--cyan);stroke:var(--paper);stroke-width:1}
.bk-map-t{font-size:4.6px;font-weight:700;fill:var(--ink);
          paint-order:stroke;stroke:#eaf2f7;stroke-width:1.6;stroke-linejoin:round}
.bk-map-t2{fill:var(--cyan-dk,#0891b2)}
.bk-note{margin:.85rem 1.15rem 0;font-size:.84rem;line-height:1.55;color:var(--muted)}


/* ── Builder: what is standing on the site ───────
   The route used to be a list of names. A name is not an answer to "what will
   I actually see at Dougga", so each surveyed stop opens onto its monuments. */
.cb-mon{margin:0}
.cb-mon>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;
                gap:.45rem;justify-content:space-between}
.cb-mon>summary::-webkit-details-marker{display:none}
.cb-mon>summary::after{content:'+';flex:0 0 auto;font-weight:700;color:var(--cyan-dk,#0891b2);
                       font-size:.95em;line-height:1}
.cb-mon[open]>summary::after{content:'\2212'}
.cb-mon>summary>i{font-style:normal;font-size:.72rem;font-weight:600;white-space:nowrap;
                  color:var(--muted);margin-left:auto;padding-right:.35rem}
.cb-mon>ul{list-style:none;margin:.5rem 0 .2rem;padding:0 0 0 .1rem;
           border-left:2px solid var(--soft)}
.cb-mon>ul>li{margin:0 0 .45rem;padding-left:.6rem;font-size:.78rem;line-height:1.5;
              color:var(--muted)}
.cb-mon>ul>li>b{color:var(--ink);font-weight:700}
.cb-src{margin:.8rem 0 0;font-size:.7rem;line-height:1.5;color:var(--muted);opacity:.85}


/* A thumbnail beside each monument: a name and one line is a lot to ask
   somebody to picture, and these are places people are deciding to visit. */
.cb-mon>ul>li.has-i{display:flex;gap:.55rem;align-items:flex-start}
.cb-mon>ul>li.has-i img{flex:0 0 auto;width:56px;height:42px;object-fit:cover;
                        border-radius:4px;background:var(--soft)}


/* ── Builder: the details popup ──────────────────
   The picker stays a dense scanning grid — 47 photographs would treble its
   height and a third of the places have none — so the picture lives here,
   opened at the moment somebody is deciding whether to go. */
.cb-pw{position:relative;display:flex}
.cb-pw>.cb-p{flex:1;min-width:0}
/* Reserve the corner unconditionally rather than with :has() — a long name
   running under the info button is a real visual bug, and 1.5rem of gap on the
   cards without one is not. */
.cb-pw .cb-n{padding-right:1.5rem}
.cb-i{position:absolute;top:.3rem;right:.3rem;z-index:2;width:22px;height:22px;
      display:flex;align-items:center;justify-content:center;padding:0;
      border:1px solid var(--line);border-radius:50%;background:var(--paper);
      color:var(--muted);font:700 .72rem/1 Georgia,serif;cursor:pointer}
.cb-i:hover{border-color:var(--cyan);color:var(--cyan-dk,#0891b2);background:#fff}
.cb-i:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}

.cb-dlg{border:0;padding:0;background:transparent;max-width:min(30rem,calc(100vw - 1.5rem));
        width:100%;overflow:visible}
.cb-dlg::backdrop{background:rgba(11,22,38,.62)}
.cb-dlg-in{background:var(--paper);border-radius:16px;overflow:hidden;
           max-height:calc(100dvh - 3rem);overflow-y:auto}
.cb-dlg-x{position:absolute;top:.45rem;right:.5rem;z-index:3;width:34px;height:34px;
          border:0;border-radius:50%;background:rgba(11,22,38,.55);color:#fff;
          font-size:1.35rem;line-height:1;cursor:pointer}
.cb-dlg-x:hover{background:rgba(11,22,38,.78)}
.cb-dlg-shot{display:block;margin:0}
.cb-dlg-shot img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.cb-dlg-in h3{margin:1rem 1.15rem .15rem;font-size:1.25rem;line-height:1.2}
.cb-dlg-r{margin:0 1.15rem .85rem;font-size:.82rem;color:var(--muted)}
.cb-dlg-l{list-style:none;margin:0 1.15rem;padding:0;
          border-top:1px solid var(--soft)}
.cb-dlg-l li{display:flex;gap:.65rem;align-items:flex-start;padding:.7rem 0;
             border-bottom:1px solid var(--soft);font-size:.82rem;line-height:1.5;
             color:var(--muted)}
.cb-dlg-l img{flex:0 0 auto;width:72px;height:54px;object-fit:cover;border-radius:5px;
              background:var(--soft)}
.cb-dlg-l b{color:var(--ink);font-weight:700}
.cb-dlg-more{margin:.6rem 1.15rem 0;font-size:.78rem;color:var(--muted)}
.cb-dlg-go{width:calc(100% - 2.3rem);margin:1rem 1.15rem 1.15rem}
@media (max-width:520px){
  .cb-dlg-in h3{font-size:1.12rem}
  .cb-dlg-l img{width:56px;height:42px}
}


/* ── Booking: one way or return ──────────────────
   The competitor charges exactly double and asks for the return first. We ask
   too, and show the saving as money rather than a percentage — "save €3" is a
   thing you can picture. */
.bk-trip{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:0 0 1rem}
.bk-trip-o{display:flex;align-items:center;gap:.5rem;cursor:pointer;
           border:1.5px solid var(--line);border-radius:var(--rs);
           padding:.65rem .8rem;background:var(--paper);transition:border-color .15s,background-color .15s}
.bk-trip-o:hover{border-color:var(--cyan)}
.bk-trip-o.on{border-color:var(--cyan);background:#ecfbfe;box-shadow:inset 0 0 0 1px var(--cyan)}
.bk-trip-o input{margin:0;accent-color:var(--cyan);flex:0 0 auto}
.bk-trip-o span{font-size:.86rem;font-weight:700;color:var(--navy);line-height:1.25}
.bk-trip-o i{display:block;font-style:normal;font-size:.72rem;font-weight:600;color:var(--cyan-dk,#0891b2)}
.bk-trip-o b{margin-left:auto;font-size:.95rem;white-space:nowrap;color:var(--navy)}
@media(max-width:460px){.bk-trip{grid-template-columns:1fr}}

.bk-ret{border:1px dashed var(--line);border-radius:var(--rs);
        padding:.9rem 1rem .3rem;margin:0 0 1.1rem;background:var(--paper)}
.bk-ret h4{margin:0 0 .6rem;font-size:.82rem;text-transform:uppercase;
           letter-spacing:.06em;color:var(--muted)}
.bk-ret-note{margin:.2rem 0 .8rem;font-size:.8rem;line-height:1.5;color:var(--muted)}
.rt-off{font-style:normal;font-size:.7rem;font-weight:700;color:var(--cyan-dk,#0891b2)}


/* ══════════════════════════════════════════════════
   Booking page, second pass
   The summary was a white card wearing a navy hat, so the number people are
   deciding on sat at the same weight as a form label. It is now the navy panel
   the index already uses, with cyan carrying the total — the site's own two
   colours, doing the job the gold does on the rent-car mock-up.
   ══════════════════════════════════════════════════ */

/* The radios were inheriting .bk-form input {min-height:46px;width:100%} and
   rendering as 46px donuts. They are radios. */
.bk-trip-o input[type="radio"]{
  flex:0 0 auto;width:20px;height:20px;min-height:0;margin:0;padding:0;
  display:inline-block;border:0;background:none;border-radius:50%;
  accent-color:var(--cyan);cursor:pointer}

.bk-trip{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:0 0 1.1rem}
/* .bk-form label{display:block} is a class+element and outranks a bare class,
   so these carry the form scope too rather than losing the layout to it. */
.bk-form .bk-trip-o,
.bk-trip-o{position:relative;display:flex;align-items:center;gap:.7rem;
           min-height:76px;padding:.8rem .9rem;cursor:pointer;overflow:hidden;
           border:1.5px solid var(--line);border-radius:var(--rs);
           background:var(--paper);transition:border-color .15s,box-shadow .15s}
.bk-trip-o:hover{border-color:var(--cyan)}
.bk-trip-o.on{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}
.bk-form .bk-trip-tx,
.bk-trip-tx{display:block;flex:1 1 auto;min-width:0;margin:0}
.bk-trip-tx>span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.09em;
                 text-transform:uppercase;color:var(--muted);line-height:1.3}
/* The ribbon sits over the top-right corner, so the label keeps clear of it —
   "Hin- und Rückfahrt" would otherwise run underneath. */
.bk-trip-o:has(.bk-save) .bk-trip-tx>span{padding-right:4.6rem}
.bk-trip-tx>b{display:block;margin-top:.15rem;font-size:1.3rem;line-height:1.15;color:var(--navy)}
/* The saving is the reason to choose this one, so it sits on the corner rather
   than in the small print underneath. */
.bk-save{position:absolute;top:0;right:0;font-style:normal;
         font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
         color:var(--navy);background:var(--cyan);padding:.2rem .5rem;
         border-radius:0 calc(var(--rs) - 2px) 0 9px}
.bk-trip-o.on .bk-trip-tx>b{color:var(--cyan-dk)}
@media(max-width:520px){.bk-trip{grid-template-columns:1fr}.bk-trip-o{min-height:64px}}

/* ── The summary, as a navy panel ───────────────── */
.bk-sum{background:var(--navy);color:#fff;border:0;
        box-shadow:0 18px 40px rgba(11,22,38,.18)}
.bk-sum>.cb-rh{background:transparent;padding:1.05rem 1.15rem .2rem;
               font-size:.72rem;font-weight:700;letter-spacing:.1em;
               text-transform:uppercase;color:#9fb2c8}
.bk-sum>.bk-shot{margin:.7rem 0 0}
.bk-sum>.pill{margin:.9rem 1.15rem 0;background:var(--cyan);color:var(--navy);
              font-weight:800;letter-spacing:.05em}
.bk-sum>.bk-what{margin:.6rem 1.15rem .9rem;color:#fff;font-size:1.05rem;line-height:1.3}
.bk-sum .cb-facts div{border-bottom:1px solid rgba(255,255,255,.1);padding:.62rem 0}
.bk-sum .cb-facts dt{color:#9fb2c8}
.bk-sum .cb-facts dd{color:#fff;font-weight:700}
/* .cb-facts .cb-pr dd sets navy for the light card this panel used to be, and
   matches this one just as specifically — navy on navy is invisible, so the
   leg rows are named at the same depth. */
.bk-sum .cb-facts .cb-pr dd{color:#fff;font-size:1.05rem}
.bk-sum .cb-facts .rt-off{color:var(--cyan-lt)}
/* The total, given the room the decision deserves. */
.bk-sum .cb-facts .cb-total{border-top:1px solid rgba(255,255,255,.22);border-bottom:0;
                            margin-top:.45rem;padding-top:.8rem}
.bk-sum .cb-facts .cb-total dt{color:#fff;font-weight:700;font-size:.95rem}
.bk-sum .cb-facts .cb-total dd{font-size:1.75rem;color:var(--cyan);line-height:1.1}
.bk-sum .bk-map{margin:.2rem 1.15rem 0}
.bk-sum .bk-map svg{border:1px solid rgba(255,255,255,.18)}
.bk-sum .bk-note{margin:.85rem 1.15rem 0;color:#9fb2c8}
.bk-sum .tnote{margin:.9rem 1.15rem 1.15rem;color:#9fb2c8;border-color:rgba(255,255,255,.18)}
.bk-sum .bk-trust{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);
                  color:#9fb2c8;margin:.9rem 1.15rem 1.15rem}
.bk-sum .bk-trust b{color:#fff}

/* The tour and trip-builder panels also carry a route list, which the navy
   treatment above never reached. The stops kept the light card's ink, and the
   departure kept var(--navy) — the panel's own background — so it was set in
   invisible ink. The list and its heading also sat flush against the panel
   edge, because every other child carries its own 1.15rem inset. */
.bk-sum .bk-rh{margin:.2rem 1.15rem .5rem;font-size:.72rem;font-weight:700;
               letter-spacing:.1em;text-transform:uppercase;color:#9fb2c8}
.bk-sum .cb-route{margin:0 1.15rem 1rem}
.bk-sum .cb-route li{color:#dbe4ee}
.bk-sum .cb-route li.cb-rs{color:#fff}
.bk-sum .cb-route li.cb-rs::before{background:var(--cyan-lt)}
.bk-sum .cb-route li:not(:last-child)::after{background:rgba(255,255,255,.22)}

/* ══════════════════════════════════════════════════
   Crafts & workshops
   The destination tiles overlay their text on the photograph, which is right
   for a place name and wrong for a sentence — so these carry the picture above
   a white body. The badge is the whole point of the section: a reader deciding
   between four workshops wants to know which ones will let them touch anything,
   and that answer belongs on the image, not three lines into the copy.
   ══════════════════════════════════════════════════ */
.craftgrid{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:640px){.craftgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.craftgrid{grid-template-columns:repeat(4,1fr)}}

.ccard{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--warm-line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);color:inherit;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,border-color .25s;
}
.ccard:hover{transform:translateY(-4px);border-color:var(--cyan);
             box-shadow:0 22px 46px -22px rgba(15,23,42,.4);text-decoration:none}
.cshot{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--soft)}
.cshot img{width:100%;height:100%;object-fit:cover;display:block;
           transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.ccard:hover .cshot img{transform:scale(1.06)}

/* Cyan means you may touch it — the site's action colour, doing the same job
   here it does on a button. Watch is deliberately quieter. */
.cdo{position:absolute;left:.7rem;bottom:.7rem;font-size:.62rem;font-weight:800;
     letter-spacing:.11em;text-transform:uppercase;padding:.3rem .55rem;border-radius:5px}
.cdo.hands{background:var(--cyan);color:#04222b}
.cdo.watch{background:rgba(11,22,38,.72);backdrop-filter:blur(8px);color:#fff}

.cbody{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.05rem 1.1rem;flex:1}
.cwhere{font-size:.66rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--cyan-dk)}
.ctitle{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.cblurb{font-size:.87rem;line-height:1.5;color:#475569}
/* A workshop with a price: the figure carries data-tnd like every other
   price tag, so the currency switcher repaints it with the cards. */
.cprice{font-size:.8rem;font-weight:700;color:#475569}
.cprice b{font-size:1rem;color:var(--ink);margin-right:.15rem}
/* margin-top:auto pins this to the bottom so four cards of unequal copy still
   line their footers up. */
.ctours{margin-top:auto;padding-top:.8rem;font-size:.74rem;font-weight:800;
        letter-spacing:.02em;color:var(--brand)}
.ccard:hover .ctours{color:var(--cyan-dk)}
.ctours span{display:inline-block;transition:transform .2s}
.ccard:hover .ctours span{transform:translateX(3px)}

/* ══════════════════════════════════════════════════
   Mobile pass (2026-08-31)
   The page measured 22,138px at 375px — 27 screens. Nothing here removes a
   section; the two catalogue grids become swipe rows, the destination tiles
   pair up, and the padding stops pretending a phone is a monitor.
   ══════════════════════════════════════════════════ */

/* The slide pager sat on the language links — two tap targets, same pixels.
   Slides advance themselves; on a phone the pager is decor it cannot afford. */
@media (max-width:600px){
  .hero-rail{display:none}
}

/* A fade the eye keeps catching mid-animation reads as a broken page. */
@media (max-width:760px){
  html.js .reveal{transition-duration:.45s;transform:translateY(12px)}
  section{padding:3.2rem 0}
}

/* ── The two catalogue grids become swipe rows ────
   Stacked, the eight tour cards alone were 4,186px — five screens of thumb
   before the next argument. A snap row shows one card plus the edge of the
   next (the edge IS the swipe hint), and the section costs one screen.
   Scoped to the homepage: on /tours/ the vertical directory is the point. */
@media (max-width:620px){
  #tours .tourgrid,#crafts .craftgrid{
    grid-auto-flow:column;grid-auto-columns:min(80%,320px);
    grid-template-columns:none;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-padding-inline:18px;
    /* bleed to the screen edge so the peeking card is truly cut by it */
    margin-inline:-18px;padding-inline:18px;padding-bottom:.4rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  #tours .tourgrid::-webkit-scrollbar,#crafts .craftgrid::-webkit-scrollbar{display:none}
  #tours .tourgrid>*,#crafts .craftgrid>*{scroll-snap-align:start}
  /* Cards hug their own content: stretched to the tallest neighbour, the
     shorter ones carried a hand-width of blank between subtitle and price. */
  #tours .tourgrid,#crafts .craftgrid{align-items:start}
}

/* ── Destination tiles pair up ────────────────────
   A 4:5 tile full-width is 470px of photograph per place name; at two per
   row the same four names cost half the scroll and read as the set they are. */
@media (max-width:559px){
  .destgrid{grid-template-columns:1fr 1fr;gap:.7rem}
  .dtitle{font-size:.98rem}
  .dsub{font-size:.7rem}
  .dbody{left:.7rem;right:.6rem;bottom:.7rem}
  .dnum,.dtag{top:.55rem}
  .dnum{left:.55rem}.dtag{right:.55rem}
  /* the arrow chip would cover a third of a half-width tile's foot */
  .darrow{display:none}
}

/* ── Map pins are 13px; thumbs are not ──────────── */
@media (pointer:coarse){
  .pin::after{content:'';position:absolute;inset:-11px;border-radius:50%}
  .pin span{white-space:normal;width:max-content;max-width:8.5rem;
            text-align:center;line-height:1.3}
}

/* The card is the tap target (the title link stretches over it); this only
   keeps the visible link from being a 13px sliver under a finger. */
.tcard-foot .btn{padding:.7rem 0 .7rem .7rem;margin:-.7rem 0}

/* 9.9px micro-labels earn one more pixel where they are read at arm's length */
@media (max-width:760px){
  .dtag,.cdo,.unesco-tag{font-size:.68rem}
}

/* -- itinerary steps: bullets, "why" note, photograph (v83) -- */
.titin-pts{list-style:none;margin:.4rem 0 0;padding:0}
.titin-pts li{position:relative;padding:.14rem 0 .14rem 1.05rem;font-size:.87rem;color:#334155}
.titin-pts li::before{content:'';position:absolute;left:.18rem;top:.55rem;width:5px;height:5px;border-radius:50%;background:var(--cyan-dk)}
.titin-b .titin-why{display:block;margin-top:.55rem;font-size:.83rem;line-height:1.5;color:#475569;background:var(--soft);border-left:3px solid var(--sand);border-radius:0 8px 8px 0;padding:.5rem .75rem}
.titin-img{display:block;margin:.7rem 0 .2rem;max-width:430px}
.titin-tx{min-width:0}
@media (min-width:700px){
  .titin-b-media{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.4rem;align-items:start}
  .titin-b-media .titin-img{margin:.3rem 0 0;max-width:none}
  .titin-b-media .titin-img img{aspect-ratio:3/2;object-fit:cover;object-position:50% 30%}
}
.titin-img img{width:100%;height:auto;border-radius:10px;display:block;box-shadow:0 1px 8px rgba(15,23,42,.08)}