/* Scoped reset. The prototype's global reset lived in its review shell, so the
   theme needs its own or every width and padding is computed differently. */
.site,.site *,.site *::before,.site *::after{box-sizing:border-box}
.site img,.site svg{max-width:100%}

/* Licensed Arpona / ArponaSans, served from the theme */
@font-face{font-family:Arpona;src:url("../fonts/arpona-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Arpona;src:url("../fonts/arpona-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Arpona;src:url("../fonts/arpona_600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:ArponaSans;src:url("../fonts/arponasans-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:ArponaSans;src:url("../fonts/arponasans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:ArponaSans;src:url("../fonts/aproasans-700.woff2") format("woff2");font-weight:700;font-display:swap}

/* ===== LICENSED FONTS ===== */

/* ===== TOKENS — OOO brand guide p.11 ===== */
/* Custom properties live on :root, not .site.
   The drawer is rendered outside .site so it can be position:fixed against
   the viewport; with the variables scoped to .site it inherited none of them
   and rendered as unstyled browser-default links. :root is deliberately NOT
   given container-type — that would make it a containing block for fixed
   elements and reintroduce the very bug moving the drawer solved. */
/* --gut uses vw rather than cqi. Container units resolve against the nearest
   ancestor container, so a cqi value declared on the container itself (.site) is
   circular and the whole declaration is dropped — which collapsed .wrap padding to
   zero and let cards run to the screen edge. vw is equivalent here because .site is
   full width. */
:root{
  --teal:#2B5E68;
  --teal-deep:#245862;
  --sand:#FCF7F2;
  --white:#fff;
  --grey:#5c6d71; /* was #66777b: 4.39:1 on sand; now 5.08 (F03) */
  --bronze:#C1916D;
  --bronze-deep:#8e5d37; /* was #A06E45: 4.10:1 on sand; now 5.23 (F03) */
  --bronze-soft:#e8d5c4;
  --ink:#1c3336;
  --hair:rgba(43,94,104,.13);
  --r:8px; /* was 14px; agreed September 2026 */
  --r-lg:18px;
  --lift:0 20px 40px -18px rgba(0,0,0,.4);
  --head:Arpona,Georgia,serif;
  --body:ArponaSans,"Helvetica Neue",Arial,sans-serif;
  --out:url("../img/out-graphic.svg");
  --gut:clamp(20px,4.6vw,78px);
  --max:1320px;
}

.site{
  container-type:inline-size;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:17.5px;
  line-height:1.78;
  overflow-x:clip;
}

.site h1,.site h2,.site h3{font-family:var(--head);font-weight:300;color:var(--teal);margin:0;letter-spacing:-.024em;line-height:1.08}
.site h1{font-size:clamp(34px,4.6cqi,68px)}
.site h2{font-size:clamp(27px,3.1cqi,46px)}
.site h3{font-size:clamp(20px,1.85cqi,27px);font-weight:400;letter-spacing:-.014em;line-height:1.24}
.site p{margin:0 0 1.15em;max-width:60ch}
.site p:last-child{margin-bottom:0}
.site a{color:inherit;text-decoration:none}
.site button,.site input,.site select,.site textarea{font:inherit;color:inherit}
.site button{border:0;background:none;cursor:pointer}
.site img{display:block;max-width:100%}
.site [hidden]{display:none!important}
.site :focus-visible{outline:3px solid var(--bronze);outline-offset:3px}

.im{display:block;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}
.l50>.im,.l23>.im{aspect-ratio:4/3;height:auto}
/* centred intro band carrying the brand graphic, per the live Japan page */
.mission-sec{background:var(--sand);overflow:hidden;text-align:center}
.mission-sec p{margin-inline:auto}
.intro-band{background:var(--white);overflow:hidden;border-top:1px solid var(--hair)}
.intro-band .om{width:min(96%,1280px);left:50%;top:50%;transform:translate(-50%,-50%);background:var(--teal);opacity:.07}
.qi{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;
  font-family:var(--body);font-weight:700;font-size:12px;vertical-align:middle;margin-left:6px}
.lead-p{font-family:var(--head);font-weight:400;font-size:clamp(19px,1.8cqi,24px);color:var(--teal);line-height:1.38;margin-bottom:20px}
/* Moments — DND's tall hero cards, excerpt beneath */
.moments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2cqi,32px)}
.moment .card{position:relative;height:clamp(420px,46cqi,600px);overflow:hidden;border-radius:var(--r);display:flex;align-items:flex-end}
.moment .card .im{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.moment:hover .card .im{transform:scale(1.04)}
.moment .card .v{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,38,41,0) 40%,rgba(20,38,41,.82) 100%)}
.moment .cap{position:relative;z-index:2;width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:24px}
.moment .cap h3{color:#fff;margin:0 0 5px}
.moment .cap em{color:rgba(255,255,255,.88);font-style:normal;font-family:var(--head);font-weight:300;font-size:17px}
.moment .cap .ar{flex:none;width:52px;height:52px;background:var(--bronze);color:#fff;display:grid;place-items:center;font-size:17px}
.moment>p{font-size:15px;color:var(--grey);margin-top:18px;max-width:40ch}
@media (prefers-reduced-motion:reduce){.moment .card .im,.moment:hover .card .im{transition:none;transform:none}}
/* navigation demo chrome */
.navdemo{border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:var(--white)}
.navbar{background:var(--teal);color:#fff;display:flex;align-items:center;gap:24px;padding:0 24px;min-height:72px}
.navbar .lg{font-family:var(--head);font-weight:300;font-size:19px;letter-spacing:.06em}
.navbar .lg sup{font-size:9px;vertical-align:6px}
.navbar .items{display:flex;gap:18px;font-size:13.5px;font-weight:300}
.navbar .items b{font-weight:300;padding:6px 0;border-bottom:1px solid transparent}
.navbar .items b.open{border-bottom-color:var(--bronze)}
.navbar .util{margin-left:auto;display:flex;align-items:center;gap:14px}
.navbar .util .s{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:9px 16px;font-size:12.5px;color:rgba(255,255,255,.75)}
.navbar .util .cta{background:var(--bronze);color:#fff;padding:12px 20px;font-size:12.5px;font-weight:400;letter-spacing:.09em;text-transform:uppercase}
.drawer{border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;max-width:390px;background:var(--white)}
.drawer .dtop{background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:18px 20px}
.drawer .dtop .lg{font-family:var(--head);font-weight:300;font-size:18px;letter-spacing:.06em}
.drawer .dtop .lg sup{font-size:9px;vertical-align:5px}
.drawer .dtop .x{font-size:24px;line-height:1}
.drawer .dsearch{background:var(--sand);padding:15px 20px;color:var(--grey);font-size:14.5px;border-bottom:1px solid var(--hair)}
.drawer .dlist{list-style:none;margin:0;padding:0}
.drawer .dlist a{display:flex;justify-content:space-between;align-items:center;padding:17px 20px;
  border-bottom:1px solid var(--hair);font-family:var(--head);font-weight:300;font-size:20px;color:var(--teal)}
.drawer .dlist i{font-style:normal;color:var(--bronze)}
.drawer .dfoot{padding:20px}
.drawer .dfoot .tel{display:block;margin-top:14px;font-family:var(--head);font-weight:300;font-size:18px;color:var(--teal)}
.drawer .cur{display:flex;align-items:center;gap:6px;margin-top:18px;padding-top:16px;border-top:1px solid var(--hair);font-size:13px;color:var(--grey);flex-wrap:wrap}
.drawer .cur button{border:1px solid var(--hair);border-radius:999px;padding:5px 11px;font-size:12px;color:var(--grey)}
.drawer .cur button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff}
/* Equaldex rights panel */
.rights{border:1px solid var(--hair);background:var(--white);border-radius:var(--r)}
.rights .h{padding:16px 20px;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap}
.rights .rs{display:grid;grid-template-columns:1fr}
.rights .r{padding:13px 20px;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;gap:16px;font-size:14.5px}
.rights .r .k{color:var(--grey)}
.rights .r .v{text-align:right;font-weight:400}
.rights .r .v em{display:block;font-style:normal;font-size:12.5px;color:var(--grey);margin-top:2px}
.rights .r .v.ok{color:#2F6E4F}.rights .r .v.mid{color:#B07A18}.rights .r .v.no{color:#9B3A2E}
.rights .f{padding:13px 20px;font-size:13px;color:var(--grey);line-height:1.55}
.vid{position:relative;aspect-ratio:16/9;background:var(--teal-deep);overflow:hidden;border-radius:var(--r);display:grid;place-items:center}
.vid .im{position:absolute;inset:0;opacity:.5}
.vid .play{position:relative;z-index:2;width:72px;height:72px;border-radius:50%;border:1px solid rgba(255,255,255,.8);
  display:grid;place-items:center;color:#fff;font-size:19px;padding-left:4px}
.i-ph-mv-family{background-position:50% 46%}
.i-ph-sant-family{background-position:46% 40%}
.i-ph-mv-women{background-position:55% 38%}
.i-ph-sant-terrace{background-position:48% 34%}
.i-ph-sant-steps{background-position:44% 52%}
.i-ph-sant-alley{background-position:50% 40%}
.i-ph-mv-men{background-position:52% 34%}
.i-ph-train{background-position:50% 44%}
.i-ph-mv-women2{background-position:52% 38%}
.rule{width:130px;height:1px;background:var(--bronze);margin:26px 0}
.lbl{font-family:var(--head);font-weight:300;font-size:16px;color:var(--grey);display:block}
.lbl.b{color:var(--bronze)}
.strap{font-family:var(--head);font-weight:300;font-size:clamp(19px,1.65cqi,24px);color:var(--grey);line-height:1.5;max-width:56ch}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
/* more breathing than v3 — DND runs py-20 to py-40 */
.sec{padding-block:clamp(58px,7cqi,138px);position:relative}
.sec.line{border-top:1px solid var(--hair)}
.sec.white{background:var(--white)}
.sec.tight{padding-block:clamp(42px,4.6cqi,84px)}
.sec>.wrap{position:relative;z-index:1}
.shead{margin-bottom:clamp(30px,4cqi,64px)}
.shead.centered{text-align:center}
.shead.centered .rule{margin-inline:auto}
.viewall{display:flex;justify-content:center;margin-top:clamp(26px,3cqi,46px)}
.shead.row{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.shead .rule{margin-bottom:0}
.site h2 em{font-style:normal;color:var(--bronze)}

/* buttons */
.site .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:16px 34px;
  background:var(--teal);border:1px solid var(--teal);color:#fff;font-family:var(--body);font-weight:400;font-size:14px;
  letter-spacing:.11em;text-transform:uppercase;transition:background .3s ease,border-color .3s ease,color .3s ease;overflow:hidden}
.site .btn .t{transition:transform .3s ease}
.site .btn .a{position:absolute;right:18px;opacity:0;transition:opacity .3s ease,right .3s ease;font-size:15px;line-height:1}
.site .btn:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
.site .btn:hover .t{transform:translateX(-11px)}
.site .btn:hover .a{opacity:1;right:15px}
.site .btn-b{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.96);color:var(--teal-deep)}
.site .btn-b:hover{background:#fff;border-color:#fff;color:var(--teal)}
.site .btn-2{background:none;border-color:var(--bronze);color:var(--teal)}
.site .btn-2:hover{background:var(--teal);color:#fff}
.site .btn-l{background:none;border-color:rgba(255,255,255,.55);color:#fff}
.site .btn-l:hover{background:#fff;border-color:#fff;color:var(--teal)}
.tl{font-family:var(--head);font-weight:300;font-size:16.5px;color:var(--teal);border-bottom:1px solid var(--bronze);padding-bottom:2px;display:inline-block}

/* 'Out' graphic */
.oc{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.om{position:absolute;aspect-ratio:2.313;-webkit-mask-image:var(--out);mask-image:var(--out);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}

/* slim utility line: tagline left, search right, so the nav row can breathe */
.util{background:var(--teal-deep);color:#cfe0e2}
.util-in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.util .tag{font-family:var(--head);font-weight:300;font-size:14.5px;color:#bcd3d6}
.util-r{display:flex;align-items:center;gap:20px}
.util .hdr-tel{font-size:14px;color:#dbe8ea}
/* ===== HEADER — search is now the utility, not currency.
   Currency moves to the footer where it belongs. Compacts on scroll. ===== */
.hdr{position:sticky;top:0;z-index:60;background:var(--teal);color:#fff;transition:box-shadow .25s ease}

/* Out of the way while the enquiry form owns the screen.
   The band is the one place on the site with nothing to navigate to: every link in
   the header is a way of not filling the form in, and on a laptop the header is
   the difference between the submit button being on screen and being below the
   fold. It returns the moment the band is no longer filling the view, and
   immediately if anything inside the header takes focus, so keyboard users are
   never chasing an element they cannot see. */
.hdr.hdr-away{transform:translateY(-100%)}
@media (prefers-reduced-motion:no-preference){
  .hdr{transition:box-shadow .25s ease,transform .32s ease}
}
.hdr.compact{box-shadow:0 2px 18px rgba(9,28,31,.28)}
.hdr-in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);min-height:82px;display:flex;align-items:center;
  gap:clamp(14px,2cqi,30px);transition:min-height .25s ease}
.hdr.compact .hdr-in{min-height:62px}
.hdr-logo img{width:154px;height:auto;transition:width .25s ease}
.hdr.compact .hdr-logo img{width:126px}
.hdr-nav{display:flex;gap:clamp(16px,2.4cqi,38px);font-size:15px;font-weight:400;white-space:nowrap}
.hdr-nav a{padding:10px 0;border-bottom:1px solid transparent;letter-spacing:.005em}
.hdr-nav a:hover,.hdr-nav a.open{border-bottom-color:var(--bronze)}
.hdr-nav a.has-panel::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:2px;
  border-right:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.7);transform:rotate(45deg)}
.hdr-act{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.4cqi,20px)}
.hdr-search{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:0 15px;height:32px;min-width:clamp(200px,22cqi,320px);transition:background .2s}
.hdr-search:focus-within{background:rgba(255,255,255,.2);border-color:var(--bronze)}
.hdr-search .mag{color:rgba(255,255,255,.8);display:flex}
.hdr-search input{background:none;border:0;color:#fff;font-size:13px;width:100%;outline:none}
.hdr-search input::placeholder{color:rgba(255,255,255,.62)}
.hdr-tel{font-family:var(--head);font-weight:300;font-size:15px;color:rgba(255,255,255,.9)}
.hdr-act .btn{min-height:44px;padding:12px 22px;font-size:12.5px;letter-spacing:.09em;background:var(--bronze);border-color:var(--bronze);color:#fff}
.hdr-act .btn:hover{background:#b07f58;border-color:#b07f58}
.hdr-burger{display:none;color:#fff}
.hdr-burger .bars{display:block;width:21px}
.hdr-burger .bars i{display:block;height:1.5px;background:#fff;margin:5px 0;border-radius:2px}
.mbar{display:none}
.mbar .mb{display:flex;align-items:center;justify-content:center;min-height:54px;background:var(--teal-deep);
  color:#fff;border-right:1px solid rgba(255,255,255,.16)}
.mbar .mb .bars{display:block;width:20px}
.mbar .mb .bars i{display:block;height:1.6px;background:#fff;margin:4px 0;border-radius:2px}
.mbar .mb .ic{display:flex}

.mbar .mb.enq{background:var(--bronze);border-right:0;
  font-family:var(--body);font-weight:400;font-size:14px;letter-spacing:.11em;text-transform:uppercase}

/* mega panels */
.panel-nav{position:absolute;left:0;right:0;top:100%;background:var(--white);color:var(--ink);
  box-shadow:0 24px 40px -24px rgba(9,28,31,.4);border-top:1px solid var(--hair)}
.panel-in{max-width:var(--max);margin:0 auto;padding:clamp(26px,3.2cqi,46px) var(--gut);
  display:grid;grid-template-columns:2.5fr 1fr;gap:clamp(26px,3.4cqi,52px)}
.panel-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 34px}
.panel-cols h4{font-family:var(--head);font-weight:300;font-size:16px;color:var(--bronze);margin:0 0 12px}
.panel-cols ul{margin:0;padding:0;list-style:none}
.panel-cols li{margin-bottom:8px;font-size:14.5px}
.panel-cols a:hover{color:var(--teal);border-bottom:1px solid var(--bronze)}
.panel-feat{display:grid;grid-template-columns:1fr;gap:18px;align-content:start}
.worldmap{position:relative;border-radius:12px;overflow:hidden;background:var(--teal);aspect-ratio:1250/751}
.worldmap .im{position:absolute;inset:0;opacity:.9}
.worldmap b{position:absolute;transform:translate(-50%,-50%);font-family:var(--head);font-weight:300;
  font-size:12.5px;color:#fff;white-space:nowrap;cursor:pointer;padding:3px 7px;border-radius:20px}
.worldmap b:hover{background:var(--bronze)}
.panel-feat .f{display:block}
.panel-feat .im{aspect-ratio:16/10;height:auto;border-radius:12px;overflow:hidden}
.panel-feat h3{font-size:17px;margin-top:10px}
.panel-feat p{font-size:13px;color:var(--grey);margin:4px 0 0}
.panel-foot{grid-column:1/-1;border-top:1px solid var(--hair);padding-top:16px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ===== HERO — ported from the approved quote portal =====
   Bottom-anchored, gradient weighted to the lower third only so the
   photograph stays vibrant, white Arpona title directly on the image,
   and a floating white facts card overlapping the hero's lower edge. */
.hero{position:relative;height:74cqi;min-height:480px;max-height:680px;display:flex;align-items:flex-end;overflow:hidden;background:var(--teal-deep)}
/* Articles were getting the shortest hero on the site while carrying the largest
   headlines, so a two-line title filled it and the photograph barely showed. It
   now sits between the homepage and an inner page rather than below both. */
.hero.short{height:66cqi;min-height:460px;max-height:620px}
.hero.inner{height:56cqi;min-height:400px;max-height:540px}
.hero.inner .hero-in{padding-bottom:clamp(36px,4cqi,56px)}
.hero>.im{position:absolute;inset:0;z-index:0}
.hero .veil{position:absolute;inset:0;z-index:1;background:
  /* copy scrim: anchored bottom-left, gone by mid-frame */
  linear-gradient(105deg,rgba(14,32,36,.72) 0%,rgba(14,32,36,.52) 28%,rgba(14,32,36,.12) 52%,rgba(14,32,36,0) 68%),
  /* keeps the base readable whatever the photograph does there */
  linear-gradient(180deg,rgba(14,32,36,.28) 0%,rgba(14,32,36,0) 26%,rgba(14,32,36,0) 46%,rgba(14,32,36,.62) 100%)}
.hero .oc{z-index:2}
.hero .om{width:min(86%,1050px);left:50%;top:46%;transform:translate(-50%,-50%);background:#fff;opacity:.2}
.hero-in{position:relative;z-index:3;max-width:var(--max);margin:0 auto;width:100%;padding:60px var(--gut) clamp(46px,5cqi,72px)}
.eyebrow{color:var(--bronze-soft);font-family:var(--body);font-weight:700;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 12px;text-shadow:0 1px 3px rgba(10,26,30,.8),0 1px 12px rgba(10,26,30,.6)}
.hero-in h1 .yr{display:block;font-size:.52em;color:rgba(255,255,255,.72);letter-spacing:0;margin-top:8px}
.hero-in h1{color:#fff;font-weight:400;max-width:18ch;line-height:1.08;text-shadow:0 1px 2px rgba(10,26,30,.5),0 2px 22px rgba(10,26,30,.45);margin:0}
.hsub{color:rgba(255,255,255,.96);font-family:var(--head);font-weight:300;font-size:clamp(17px,1.5cqi,21px);
  max-width:46ch;margin:16px 0 0;text-shadow:0 1px 2px rgba(10,26,30,.55),0 2px 18px rgba(10,26,30,.45)}
.hero-in .acts{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:30px}
.herotel b{font-weight:400;border-bottom:1px solid var(--bronze);padding-bottom:2px}
.hero-below{display:none}
.hmeta-wrap{position:relative;z-index:5;max-width:var(--max);margin:0 auto;padding-inline:var(--gut);padding-bottom:clamp(26px,3cqi,46px)}
.hmeta{display:inline-flex;flex-wrap:wrap;background:rgba(255,255,255,.97);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--lift);margin-top:clamp(-56px,-4.4cqi,-40px)}
.hmeta .item{padding:16px 30px;border-right:1px solid var(--hair)}
.hmeta .item:last-child{border-right:0}
.hmeta .lbl2{font-family:var(--body);font-weight:700;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--bronze);display:block}
.hmeta .val{font-family:var(--head);font-weight:300;font-size:19px;color:var(--teal-deep);margin-top:4px;display:block}
.hmeta.search{display:flex;align-items:flex-end;gap:22px;padding:18px 24px;width:100%}
.hmeta.search .f1{flex:1;min-width:0}
.hmeta.search input{width:100%;border:0;border-bottom:1px solid var(--hair);background:none;padding:6px 0 10px;
  font-family:var(--head);font-weight:300;font-size:clamp(18px,1.7cqi,24px)}
.hmeta.search input::placeholder{color:#aab8ba}
.hmeta.search input:focus{border-bottom-color:var(--bronze);outline:none}
.bc{position:absolute;z-index:4;left:var(--gut);top:26px;font-family:var(--head);font-weight:300;font-size:14px;color:rgba(255,255,255,.9)}
.bc s{text-decoration:none;color:rgba(255,255,255,.5);padding:0 8px}
.bc{text-shadow:0 1px 3px rgba(10,26,30,.85),0 1px 14px rgba(10,26,30,.6)}
.hero-anim{opacity:0;transform:translateY(14px);animation:u .95s cubic-bezier(.16,.84,.3,1) .08s forwards}
@keyframes u{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero-anim{animation:none;opacity:1;transform:none}}

/* reassurance strip under the hero */
.reas{background:var(--teal);color:#fff}
.reas-in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.reas .i{padding:clamp(22px,2.4cqi,34px) clamp(14px,1.8cqi,28px);border-left:1px solid rgba(255,255,255,.16)}
.reas.compact .reas-in{grid-template-columns:repeat(3,minmax(0,1fr))}
.reas.compact .i{padding-block:16px}
.reas.compact .t{font-size:15.5px;min-height:0;margin-bottom:3px}
.reas.compact p{font-size:13px;min-height:0}
.reas .i:first-child{border-left:0;padding-left:0}
/* margin:0 0 8px, not just margin-bottom. This was an <h3> and is now a <p>, and
   a paragraph inherits the theme's top margin — which pushed each label down by a
   different amount depending on how its box wrapped, so the five sat at five
   different heights. */
/* min-height:0 matters more than the margin here.
   The label used to be an <h3>. As a <p> it matches .reas .i p, which carries a
   min-height of 3.1em to keep the descriptions level — so the label became 53px
   tall for a 20px line and opened a gap under every heading. */
.reas .i .t{color:#fff;font-size:17px;font-weight:400;margin:0 0 6px;white-space:nowrap;
  font-family:var(--head);line-height:1.2;min-height:0}

/* 34ch, not 26. At five columns every description is 54 to 58 characters, and a
   26ch measure broke all but the shortest onto a third line — so one box showed
   two lines and four showed three. 34ch fits every one of them in two. */
.reas .i p{font-size:13.5px;color:rgba(255,255,255,.74);margin:0;line-height:1.55;
  max-width:34ch;min-height:3.1em}

/* press strip */
.press{background:var(--white);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.press-in{max-width:var(--max);margin:0 auto;padding:clamp(22px,2.4cqi,34px) var(--gut);display:flex;gap:clamp(22px,3.2cqi,54px);align-items:center;justify-content:center;flex-wrap:wrap}
.press .pl{position:static;height:auto;background-size:contain;background-position:center;object-fit:contain;flex:0 0 auto;opacity:.8;transition:opacity .2s}
.press .pl:hover{opacity:1}
.press .i-press-times{width:132px;aspect-ratio:506/60}
.press .i-press-nyt{width:118px;aspect-ratio:423/60}
.press .i-press-bbc{width:40px;aspect-ratio:74/60}
.press .i-press-nbc{width:42px;aspect-ratio:79/60}
.press .i-press-natgeo{width:98px;aspect-ratio:204/60}
.press .i-press-cnt{width:80px;aspect-ratio:163/60}
.press .i-press-cnn{width:60px;aspect-ratio:129/60}
.press .lbl{margin-right:8px;color:var(--bronze)}

/* layouts */
.l50{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5.4cqi,104px);align-items:center}
.l50.flip .copy{order:2}
.l23{display:grid;grid-template-columns:1fr 2fr;gap:clamp(28px,4cqi,76px);align-items:center}
.l23.flip .copy{order:2}
.lsb{display:grid;grid-template-columns:66% 30%;gap:4%;align-items:start}
.lsb .main{border-right:1px solid var(--hair);padding-right:clamp(28px,4cqi,76px)}
.picks{margin-top:20px}
.picks a{display:flex;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid var(--hair)}
.picks .n{font-family:var(--head);font-weight:300;font-size:15px;color:var(--bronze);min-width:16px}
.picks h3{font-size:20px;margin:0}
.picks .ar{margin-left:auto;color:var(--bronze);font-size:15px}
.sidecards{margin-top:14px}
.sidecards a{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--hair)}
.sidecards .im{aspect-ratio:4/3;height:auto;border-radius:8px}
.sidecards h3{font-size:18px;margin:0}
.sidecards p{font-size:13px;color:var(--grey);margin:4px 0 0}

/* cards */
/* minmax(0,1fr), not 1fr.
   A bare 1fr is minmax(auto,1fr), and auto means the track cannot shrink below
   its content's minimum width. An image that has fallen back to its intrinsic
   800px because a rule lost the cascade then widens the column instead of
   overflowing it, and the whole row spills past the page — which is exactly what
   the hotel cards did. minmax(0,1fr) makes the grid authoritative about its own
   width, so a content problem stays inside its card. */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6cqi,40px)}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8cqi,26px)}
.g3>*,.g4>*{min-width:0}
.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:clamp(14px,1.8cqi,26px);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.scroller>*{scroll-snap-align:start}
.scrollhint{font-size:13px;color:var(--grey);margin-top:10px}
.tcard{display:flex;flex-direction:column;background:var(--white);height:100%;border-radius:var(--r);overflow:hidden}
.tcard .shot{overflow:hidden;background:#e9e3dc;aspect-ratio:4/2.7}
.tcard>.im{aspect-ratio:4/2.7;height:auto;flex:none}
.tcard .shot .im{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.tcard:hover .shot .im{transform:scale(1.035)}
.tcard .b{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.tcard h3{margin-bottom:6px;font-size:clamp(19px,1.7cqi,24px);min-height:2.48em;display:flex;align-items:flex-start}
.tcard .kind{font-family:var(--head);font-weight:300;font-size:15px;color:var(--bronze);margin-bottom:14px;display:block;min-height:1.5em}
.tcard p{font-size:15px;line-height:1.58;color:var(--grey);margin:0 0 22px;max-width:44ch;min-height:3.16em}
.lead-story h3{min-height:0;-webkit-line-clamp:none;display:block}
.lead-story p{min-height:0;-webkit-line-clamp:none;display:block}
.tcard .pr{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid var(--hair)}
.tcard .pr .line{font-size:14px;color:var(--grey);line-height:1.4}
.tcard .pr .line b{font-family:var(--head);font-weight:400;font-size:19px;color:var(--teal);display:block;margin-top:2px}
.tcard .pr .enq{font-family:var(--head);font-weight:300;font-size:18px;color:var(--teal)}
.tcard .cta{margin-top:0;flex:none;border:1px solid var(--bronze);color:var(--teal);padding:12px 18px;
  font-family:var(--body);font-weight:400;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;transition:background .2s,color .2s}
.tcard:hover .cta{background:var(--teal);color:#fff}
@media (prefers-reduced-motion:reduce){.tcard .shot .im,.tcard:hover .shot .im{transition:none;transform:none}}

.dtile{border-radius:var(--r);position:relative;aspect-ratio:3/3.6;overflow:hidden;display:flex;align-items:flex-end;background:var(--teal-deep)}
.site .dtile img.im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.dtile .v{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(9,28,31,.78),rgba(9,28,31,.03) 62%)}
.dtile:hover .im{transform:scale(1.045)}
.dtile .t{position:relative;z-index:2;padding:22px;color:#fff}
.dtile .t .lbl{color:rgba(255,255,255,.72);font-size:14.5px;margin-bottom:4px}
.dtile .t h3{color:#fff}
@media (prefers-reduced-motion:reduce){.dtile .im,.dtile:hover .im{transition:none;transform:none}}

/* full-bleed band */
.band{position:relative;min-height:min(48cqi,470px);display:flex;align-items:center;overflow:hidden;background:var(--teal-deep)}
.band>.im{position:absolute;inset:0;z-index:0;background-position:70% 22%}
.band .v{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(9,28,31,.82) 0%,rgba(9,28,31,.62) 38%,rgba(9,28,31,.22) 66%,rgba(9,28,31,.06) 100%)}
.band .oc{z-index:2}
.band .om{width:min(80%,900px);left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;opacity:.13}
.band-in{position:relative;z-index:3;max-width:var(--max);margin:0 auto;width:100%;padding:clamp(42px,5.6cqi,88px) var(--gut);color:#fff}
.band-in .band-t{color:#fff;max-width:17ch;text-wrap:balance;
  font-family:var(--head);font-weight:300;line-height:1.12;letter-spacing:-.015em;
  font-size:clamp(26px,3.2cqi,42px);margin:0}
.band-in p{color:rgba(255,255,255,.9);max-width:46ch}
/* The attribution the design puts under the quote, in white rather than the
   body's 90%, so the name reads as a signature and not as more copy. */
.band-in .attrib{color:#fff;margin-top:8px;font-family:var(--head);font-weight:300}
.mission{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.24);max-width:46ch}

/* ===== ENQUIRY BLOCK — on every template ===== */
.enqb{position:relative;overflow:hidden;background:var(--teal-deep);display:flex;align-items:center;min-height:min(46cqi,560px)}
.enqb>.im{position:absolute;inset:0;z-index:0;background-position:58% 26%}
.enqb .v{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(9,28,31,.58) 0%,rgba(9,28,31,.3) 40%,rgba(9,28,31,.06) 68%,rgba(9,28,31,0) 84%)}
.enqb .oc{z-index:2}
.enqb .om{display:none}
.enqb-in{position:relative;z-index:3;max-width:var(--max);margin:0 auto;width:100%;padding:clamp(40px,5cqi,80px) var(--gut)}
.epanel{background:rgba(252,247,242,.97);border-radius:var(--r-lg);padding:clamp(26px,3.2cqi,46px);max-width:min(560px,48cqi)}
.epanel h2{font-size:clamp(24px,2.5cqi,36px)}
.epanel .rule{margin:20px 0 22px}
.epanel .intro{font-size:16px;color:#3d5257;max-width:52ch;margin-bottom:24px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.frow.one{grid-template-columns:1fr}
.frow+.frow{margin-top:14px}
.f label,.f .fl{display:block;font-size:12.5px;color:#4a5f63;margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;background:var(--white);border:1px solid var(--hair);border-radius:8px;padding:13px 14px;font-size:15.5px;font-weight:300;min-height:50px}
.f textarea{min-height:168px;resize:vertical;line-height:1.6}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--bronze);outline:none}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chips button{display:flex;align-items:center;gap:8px;border:1px solid var(--hair);background:var(--white);border-radius:999px;padding:10px 15px;font-size:13.5px;min-height:42px;color:var(--grey)}
.chips button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff}
.esubmit{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:24px;padding-top:22px;border-top:1px solid var(--hair)}
.fgroup{display:block;font-family:var(--head);font-weight:300;font-size:16px;color:var(--bronze);
  margin:26px 0 14px;padding-top:18px;border-top:1px solid var(--hair)}
.f .epanel>.fgroup:first-of-type,.epanel .fgroup:first-of-type{margin-top:22px}
.f label i{font-style:normal;color:var(--bronze)}
.f label em,.f .fl em{font-style:normal;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-left:7px}

.f textarea.tall{min-height:150px}
.tznote{font-size:12.5px;line-height:1.55;color:var(--grey);margin:10px 0 0;max-width:52ch}
.tznote b{font-weight:400;color:var(--teal)}
.esubmit .fine{font-size:12.5px;color:var(--grey);margin:0;max-width:32ch}

/* sub-nav */
.snav{position:sticky;top:var(--hdr-h,82px);z-index:50;background:var(--white);border-bottom:1px solid var(--hair);
  box-shadow:0 1px 0 var(--hair),0 10px 24px -22px rgba(9,28,31,.5)}
.snav a{position:relative}
.snav a.on{background:var(--sand)}
.snav-in{max-width:var(--max);margin:0 auto;padding:0 calc(var(--gut) - 14px);display:flex;overflow:visible;scrollbar-width:none}
.snav-in::-webkit-scrollbar{display:none}
.snav a{padding:20px clamp(14px,1.9cqi,26px);font-size:14.5px;color:var(--grey);white-space:nowrap;border-bottom:3px solid transparent;border-right:1px solid var(--hair)}

.snav a:last-child{border-right:0}
.snav a.on{color:var(--teal);border-bottom-color:var(--bronze);font-weight:400}
.snav a:hover{color:var(--teal);background:rgba(43,94,104,.05)}
.snav .has{position:relative;display:flex;align-items:stretch;border-right:1px solid var(--hair)}
.snav .has>a{border-right:0}
.snav .has:hover>a{background:rgba(43,94,104,.05)}
.snav .has>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;vertical-align:2px;
  border-right:1px solid var(--bronze);border-bottom:1px solid var(--bronze);transform:rotate(45deg)}
.snav .drop{position:absolute;left:0;top:100%;min-width:230px;background:var(--white);border:1px solid var(--hair);
  border-top:0;box-shadow:0 18px 32px -20px rgba(9,28,31,.4);opacity:0;visibility:hidden;transition:opacity .16s ease;z-index:20}
.snav .has:hover .drop,.snav .has:focus-within .drop{opacity:1;visibility:visible}
.snav .drop a{display:block;padding:13px 18px;border-right:0;border-bottom:1px solid var(--hair);white-space:nowrap}
.snav .drop a:last-child{border-bottom:0}

/* accordion */
.acc details{border-bottom:1px solid var(--hair)}
.acc details:first-child{border-top:1px solid var(--hair)}
.more{margin-top:14px}
.more summary{list-style:none;cursor:pointer;display:inline-block;font-family:var(--head);font-weight:300;font-size:16.5px;
  color:var(--teal);border-bottom:1px solid var(--bronze);padding-bottom:2px}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:" \002B"}
.more[open] summary::after{content:" \2212"}
.more[open] summary{margin-bottom:14px}
.acc summary{padding:22px 0;cursor:pointer;list-style:none;display:flex;gap:18px;align-items:baseline;
  font-family:var(--head);font-weight:300;font-size:22px;color:var(--teal)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";margin-left:auto;color:var(--bronze)}
.acc details[open] summary::after{content:"–"}
.acc .ab{padding:0 0 24px;max-width:64ch}
.imgacc .ab{display:grid;grid-template-columns:260px 1fr;gap:26px;max-width:none;align-items:start}
.imgacc .ab .shot{aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:#e9e3dc}
.acc .ab.accimg{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:start;max-width:none}
.acc .ab.accimg .im{aspect-ratio:4/3;height:auto;border-radius:10px}
.acc.on-teal details{border-color:rgba(255,255,255,.18)}
.acc.on-teal summary{color:#fff;font-size:20px}
.acc.on-teal .ab{color:rgba(255,255,255,.78)}

/* day rows */
.day{display:grid;grid-template-columns:340px 1fr;gap:clamp(24px,3.4cqi,60px);align-items:start;
  padding:clamp(26px,3.4cqi,50px) 0;border-top:1px solid var(--hair)}
.day:last-of-type{border-bottom:1px solid var(--hair)}
.day .shot{aspect-ratio:4/3;overflow:hidden;background:#e9e3dc;border-radius:12px}
.day .shot .im{width:100%;height:100%;object-fit:cover}
.day h3{margin-bottom:12px}

.hl{margin:0;padding:0;list-style:none;max-width:76ch}
.hl li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid var(--hair);font-size:16.5px;line-height:1.6}
.hl li:first-child{border-top:1px solid var(--hair)}
.hl li::before{content:"";position:absolute;left:4px;top:24px;width:6px;height:6px;background:var(--bronze);border-radius:50%}
.ie ul{margin:0;padding:0;list-style:none}
.ie li{padding:13px 0;border-bottom:1px solid var(--hair);font-size:15.5px;display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.ie{align-self:start}
.ie ul{border-top:1px solid var(--hair)}
.ie li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:9px;border-radius:50%;background:var(--bronze)}
.ie.no li::before{background:var(--hair)}
.ie.no li{color:var(--grey)}

.qnote{display:flex;gap:12px;align-items:flex-start;border-left:2px solid var(--bronze);padding:14px 18px;margin:0 0 30px;max-width:76ch;background:rgba(194,145,110,.06)}
.qnote .q{font-family:var(--head);font-weight:300;color:var(--bronze);font-size:18px;flex:none}
.qnote p{font-size:14.5px;color:var(--grey);margin:0;max-width:none}

.g4meet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4cqi,38px)}
.g4meet .mt{border-top:2px solid var(--bronze);padding-top:16px}
.g4meet h3{font-size:19px;margin:8px 0 10px}
.g4meet p{font-size:14.5px;color:var(--grey);margin:0 0 14px}
.specintro{display:grid;grid-template-columns:210px 1fr;gap:clamp(22px,3cqi,44px);align-items:start}
.specintro .port{aspect-ratio:4/5;background:var(--sand);border:1px solid var(--hair);display:grid;place-items:center;overflow:hidden}
.specintro .port .ph{font-family:var(--head);font-weight:300;font-size:44px;color:var(--bronze)}
.specintro .port img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.specintro blockquote{margin:0;font-family:var(--head);font-weight:300;font-size:clamp(20px,1.9cqi,26px);line-height:1.42;color:var(--teal)}
.timeline2{border-top:1px solid var(--hair);margin-top:18px}
.tl2{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--hair)}
.tl2 .when{font-family:var(--head);font-weight:300;font-size:15px;color:var(--bronze);padding-top:3px}
.tl2 h3{font-size:19px;margin:0 0 6px}
.tl2 p{font-size:14.5px;color:var(--grey);margin:0}
.speccard{background:var(--sand);border:1px solid var(--hair);border-radius:var(--r-lg);padding:22px;margin-top:14px}
.speccard p{font-size:14.5px;color:var(--grey);margin:0}
.deptable{border-top:1px solid var(--hair)}
.dr{display:grid;grid-template-columns:1.1fr .8fr .9fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--hair)}
.dr .d{font-family:var(--head);font-weight:400;font-size:19px;color:var(--teal)}
.dr .p{font-variant-numeric:tabular-nums;font-size:16px}
.dr .s{font-size:14px}
.dr .s.ok{color:var(--ok,#2F6E4F)}.dr .s.out{color:#9B3A2E}
.dr.sold .d,.dr.sold .p{color:var(--grey);text-decoration:line-through}
.cta2{font-family:var(--body);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);
  border:1px solid var(--bronze);padding:11px 18px;display:inline-block}
.cta2:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.srchbar{display:flex;align-items:center;gap:14px;margin-top:26px;border:1px solid var(--hair);border-radius:999px;padding:6px 6px 6px 22px;background:var(--sand);max-width:760px}
.srchbar .mag{color:var(--bronze);display:flex}
.srchbar input{flex:1;min-width:0;background:none;border:0;outline:none;font-family:var(--head);font-weight:300;font-size:clamp(18px,1.7cqi,23px)}
.srchbar .btn{min-height:48px;padding:14px 26px;border-radius:999px}
.hero .srchbar{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.6);margin-top:22px;max-width:640px}
.pager{display:flex;gap:7px;justify-content:center;margin-top:clamp(26px,3cqi,44px)}
.pager button{border:1px solid var(--hair);background:var(--white);padding:11px 17px;font-size:14px;color:var(--grey)}
.pager button[aria-current=true]{background:var(--teal);border-color:var(--teal);color:#fff}
.thx-hero{position:relative;height:min(34cqi,320px);overflow:hidden;display:grid;place-items:center;background:var(--teal-deep)}
.thx-hero .im{position:absolute;inset:0}
.thx-hero .v{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,32,36,.3),rgba(14,32,36,.45))}
.thx-hero{height:min(42cqi,420px)}
.thx-in{position:relative;z-index:2;text-align:center;padding-inline:var(--gut)}
.thx-in .tick{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);color:#fff;font-size:22px;margin-bottom:20px}
.thx-in h1{color:#fff;font-weight:400;margin:0;text-shadow:0 1px 3px rgba(10,26,30,.6),0 2px 22px rgba(10,26,30,.5)}
.thx-in p{color:rgba(255,255,255,.92);font-family:var(--head);font-weight:300;font-size:clamp(17px,1.5cqi,21px);
  margin:14px auto 0;max-width:40ch;text-shadow:0 1px 3px rgba(10,26,30,.6)}
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.6cqi,40px)}
.steps4 .st{border-top:2px solid var(--bronze);padding-top:18px}
.steps4 .n{font-family:var(--head);font-weight:300;font-size:15px;color:var(--bronze);display:block;margin-bottom:10px}
.steps4 h3{font-size:19px;margin:0 0 10px}
.steps4 p{font-size:14.5px;color:var(--grey);margin:0}
.qarow{display:grid;grid-template-columns:1fr 2.4fr;align-items:center;border-top:1px solid var(--hair)}
.qarow:last-child{border-bottom:1px solid var(--hair)}
.qarow>h2{text-align:center;font-size:clamp(23px,2.6cqi,36px);padding:clamp(28px,3.6cqi,56px) clamp(18px,2.4cqi,40px);
  align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0}
.qarow>div{border-left:1px solid var(--hair);padding:clamp(28px,3.6cqi,56px) 0 clamp(28px,3.6cqi,56px) clamp(22px,3cqi,52px);align-self:stretch}
.qarow p{max-width:68ch}
.lead-story{display:grid;grid-template-columns:1.25fr 1fr;align-items:stretch}
.lead-story>.im{aspect-ratio:auto;height:100%;min-height:clamp(260px,26cqi,360px)}
.lead-story .b{padding:clamp(24px,3cqi,44px)}
.lead-story h3{font-size:clamp(23px,2.4cqi,32px);min-height:0}
.lead-story p{min-height:0}
.lead-story p{font-size:16px;max-width:52ch}
.destgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.2cqi,56px)}
.dcol h3{display:flex;align-items:baseline;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--hair);margin-bottom:14px}
.dcol h3 span{font-family:var(--body);font-weight:400;font-size:12.5px;letter-spacing:.08em;color:var(--bronze)}
.dcol ul{list-style:none;margin:0 0 16px;padding:0;columns:2;column-gap:20px}
.dcol li{margin-bottom:8px;font-size:15px;break-inside:avoid}
.dcol a:hover{color:var(--teal);border-bottom:1px solid var(--bronze)}
.legal{display:grid;grid-template-columns:260px 1fr;gap:clamp(30px,4.4cqi,80px);align-items:start}
.lnav{position:sticky;top:120px;border-top:1px solid var(--hair);padding-top:14px}
.lnav ol{list-style:none;margin:12px 0 0;padding:0;counter-reset:l}
.lnav li{counter-increment:l;margin-bottom:2px}
.lnav a{display:grid;grid-template-columns:24px 1fr;gap:6px;padding:8px 0;font-size:14.5px;color:var(--grey);line-height:1.35}
.lnav a::before{content:counter(l);font-family:var(--head);font-size:13px;color:var(--bronze)}
.lnav a.on,.lnav a:hover{color:var(--teal)}
.lbody{max-width:72ch}
.lbody h2{font-size:clamp(21px,1.9cqi,26px);margin:36px 0 14px;padding-top:26px;border-top:1px solid var(--hair)}
.lbody h2:first-child{margin-top:0;padding-top:0;border-top:0}
.lbody p{font-size:16.5px;line-height:1.75}
.g4.five{grid-template-columns:repeat(5,minmax(0,1fr))}
/* The contents row is laid out further down this file, in the block that also
   sets .sec.tight. That block re-declares .toc, .toc ol and .toc li in full, so
   only the anchor styling is still wanted here.
   What was here before was a second, complete counter: counter-reset:t on the ol,
   counter-increment:t on the li, and content:counter(t) on the anchor. The later
   block declares .toc li{counter-increment:toc} with the identical selector, so it
   won — and counter `t` was therefore never incremented, sat at its reset value
   and printed "00" beside every item. That is where "01 00 Best Destinations"
   came from. Two counters, one of them frozen at zero. */
.toc a{display:inline-flex;gap:8px;font-size:15px;color:var(--grey)}
.toc a:hover{color:var(--teal)}
.ifeat{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(26px,3.6cqi,64px);align-items:center;
  padding:clamp(26px,3.4cqi,52px) 0;border-top:1px solid var(--hair)}
.ifeat:last-child{border-bottom:1px solid var(--hair)}
.ifeat.rev>.im{order:2}
.ifeat>.im{aspect-ratio:4/2.8;height:auto;border-radius:var(--r)}
.ifeat h3{font-size:clamp(22px,2.2cqi,30px);margin:10px 0 0}
.ifeat p{font-size:16px;color:var(--grey);max-width:44ch}
.ifeat .tl{margin-top:18px}
.supcard{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;background:var(--white);
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.supcard>.im{aspect-ratio:4/3;height:100%}
.supcard div{padding:20px 22px 20px 0}
.supcard h3{font-size:20px;margin:8px 0 6px}
.supcard p{font-size:14px;color:var(--grey);margin:0}
.supcard .tl{margin-top:12px;font-size:15px}
.teamgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2cqi,28px)}
.tm .port{aspect-ratio:4/5;background:var(--sand);border:1px solid var(--hair);display:grid;place-items:center;margin-bottom:14px}
.tm .port .ph{font-family:var(--head);font-weight:300;font-size:30px;color:var(--bronze)}
.tm .port img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.tm b{font-family:var(--head);font-weight:400;font-size:18px;color:var(--teal);display:block}
.tm span{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--bronze)}
.experts2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.6cqi,64px);align-items:stretch}
.ex{align-items:stretch}
.ex{display:grid;grid-template-columns:158px 1fr;gap:clamp(18px,2.4cqi,34px);align-items:start}
.ex .port{aspect-ratio:4/5;background:var(--sand);border:1px solid var(--hair);display:grid;place-items:center;overflow:hidden}
.ex .port .ph{font-family:var(--head);font-weight:300;font-size:34px;color:var(--bronze)}
.ex .port img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.ex .body{border-top:1px solid var(--hair);padding-top:16px;display:flex;flex-direction:column;height:100%}
.ex blockquote{margin:0;font-family:var(--head);font-weight:300;font-size:clamp(18px,1.6cqi,22px);line-height:1.45;color:var(--teal);min-height:4.35em;min-height:4.35em}
.ex .foot{margin-top:auto;padding-top:22px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ex .foot b{font-family:var(--head);font-weight:400;font-size:18px;color:var(--teal);display:block}
.ex .foot span{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--bronze)}
.ex .foot .btn{min-height:46px;padding:12px 22px;font-size:12.5px}
.expert{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:start}
.expert .mono{width:84px;height:84px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-family:var(--head);font-weight:300;font-size:27px}
.expert .q2{min-width:0}
.expert blockquote{margin:0 0 16px;font-family:var(--head);font-weight:300;font-size:clamp(21px,2.1cqi,30px);line-height:1.4;color:var(--teal);max-width:30ch}
.expert .who{font-size:14px;color:var(--grey)}
.expert .who b{font-family:var(--head);font-weight:400;font-size:18px;color:var(--teal);display:block}

/* trustpilot */
.tpw{border:1px solid var(--hair);background:var(--white);border-radius:var(--r);padding:16px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:clamp(24px,3cqi,42px)}
.sec.white .tpw{background:var(--sand)}
.tpw .brand{display:flex;align-items:center;gap:8px;font-family:var(--head);font-weight:400;font-size:18px;color:var(--ink)}
.tpw .st{width:24px;height:24px;background:#00B67A;display:inline-grid;place-items:center;color:#fff;font-size:14px}
.tpw .row{display:flex;gap:3px}
.tpw .row i{width:28px;height:28px;background:#00B67A;display:inline-grid;place-items:center;color:#fff;font-style:normal;font-size:16px}
.tpw .meta{font-size:13.5px;color:var(--grey)}
.tpw .lnk{margin-left:auto}
.tpbar{display:flex;gap:clamp(18px,2.6cqi,40px);align-items:center;flex-wrap:wrap;margin-bottom:clamp(26px,3cqi,44px)}
.tpbar .score{font-family:var(--head);font-weight:300;font-size:clamp(24px,2.2cqi,32px);color:var(--teal)}
.tpbar .stars{color:#3d7a5c;letter-spacing:.1em;font-size:17px}
.tpbar .n{font-size:14px;color:var(--grey)}
.tpwidget{margin-top:26px;border:1px solid var(--hair);background:var(--white);border-radius:var(--r);
  padding:18px 22px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.tpwidget .brand{display:flex;align-items:center;gap:9px;font-family:var(--head);font-weight:400;font-size:19px;color:var(--ink)}
.tpwidget .star{width:22px;height:22px;background:#00B67A;display:inline-grid;place-items:center;color:#fff;font-size:13px}
.tpwidget .row{display:flex;gap:3px}
.tpwidget .row i{width:26px;height:26px;background:#00B67A;display:inline-grid;place-items:center;color:#fff;font-style:normal;font-size:15px}
.tpwidget .wjs{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--bronze);border:1px dashed var(--hair);padding:4px 8px;border-radius:3px}
.tpwidget .meta{font-size:13.5px;color:var(--grey)}
.tpwidget .lnk{margin-left:auto}
.revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.2cqi,56px)}
.revs q{font-family:var(--head);font-weight:300;font-size:19px;color:var(--teal);display:block;line-height:1.48}
.revs .n{font-size:13.5px;color:var(--grey);margin-top:14px}

.gal{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:clamp(10px,1.4cqi,20px)}
.gal .a{grid-column:1;grid-row:1/3;aspect-ratio:4/4.1}
.gal .b{aspect-ratio:4/3}
.gal5{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2cqi,14px)}
.gal5 a{position:relative;overflow:hidden;border-radius:12px;background:#e9e3dc;aspect-ratio:4/3;display:block}
.gal5 .g-lead{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gal5 .g-more .n{position:absolute;inset:0;display:grid;place-items:center;background:rgba(14,32,36,.6);color:#fff;font-family:var(--head);font-weight:300;font-size:26px}
.gal .more{position:relative;display:grid;place-items:center}
.gal .more .cnt{position:relative;z-index:2;color:#fff;font-family:var(--head);font-weight:300;font-size:21px;text-align:center}
.gal .more::after{content:"";position:absolute;inset:0;background:rgba(14,32,36,.55)}
.gal .s{overflow:hidden;background:#e9e3dc;border-radius:12px}
.gal .s .im{width:100%;height:100%;object-fit:cover}

.gal .b{aspect-ratio:4/2.6}

.art{max-width:62ch;font-size:19px;line-height:1.8}
.art p{max-width:none}
.inline-card{display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:center;margin:34px 0;
  background:var(--white);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.sec.white .inline-card{background:var(--sand)}
.inline-card .im{aspect-ratio:4/3;height:auto}
.inline-card .c{padding:20px 24px 20px 0;display:block}
.inline-card strong{display:block;font-family:var(--head);font-weight:400;font-size:21px;color:var(--teal);margin:8px 0 6px;line-height:1.24}
.inline-card .m{display:block;font-size:14px;color:var(--grey)}
.inline-card .cta{display:inline-block;margin-top:14px;font-family:var(--body);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal);border-bottom:1px solid var(--bronze);padding-bottom:3px}
.ed-oo{background:var(--sand);border-left:2px solid var(--bronze);padding:clamp(22px,2.6cqi,34px);margin:32px 0}
.sec.white .ed-oo{background:#faf6f1}
.ed-oo p{font-size:16px;max-width:52ch}
.pull{font-family:var(--head);font-weight:300;font-size:clamp(23px,2.5cqi,32px);line-height:1.34;color:var(--teal);
  border-top:1px solid rgba(194,145,110,.5);border-bottom:1px solid rgba(194,145,110,.5);padding:26px 0;margin:36px 0;max-width:24ch}

.csr{background:var(--sand);border-top:1px solid var(--hair);padding-block:clamp(34px,4cqi,66px)}
.csr-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2cqi,32px)}
.csr-card{position:relative;overflow:hidden;border-radius:var(--r);min-height:clamp(300px,26cqi,360px);display:flex;align-items:stretch}
.csr-card .im{position:absolute;inset:0}
.csr-card .v{position:absolute;inset:0;background:linear-gradient(to right,rgba(31,74,82,.96) 0%,rgba(31,74,82,.9) 48%,rgba(31,74,82,.25) 100%)}
.csr-card .c{position:relative;z-index:2;padding:clamp(22px,2.6cqi,38px);max-width:68%;color:#fff;align-self:center}
.csr-card h3{color:#fff;font-size:clamp(21px,1.9cqi,27px);margin:10px 0 10px}
.csr-card p{color:rgba(255,255,255,.85);font-size:14.5px;margin:0;max-width:42ch}
.csr-card .acts{display:flex;align-items:center;gap:20px;margin-top:24px;flex-wrap:wrap}
.csr-card .plogo{position:static;flex:0 0 auto;height:auto;background-size:contain;background-position:left center}
.csr-card .i-logo-ecologi{width:86px;aspect-ratio:380/194}
.csr-card .i-logo-rr{width:132px;aspect-ratio:520/164}
.ftr{background:var(--teal-deep);color:#cfe0e2;position:relative;overflow:hidden;font-size:14.5px}
.ftr .om{width:min(72%,860px);left:50%;top:56%;transform:translate(-50%,-50%);background:var(--bronze);opacity:.14}
.ftr-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:clamp(46px,5cqi,80px) var(--gut) 26px}
.ftr-news{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3cqi,56px);align-items:center;
  padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid rgba(255,255,255,.16)}
.ftr-news p{font-size:14px;color:#a9c1c5;margin:0;max-width:44ch}
.nl{display:flex;gap:10px;flex-wrap:wrap}
.nl input{flex:1;min-width:200px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.26);
  color:#fff;padding:14px 16px;font-size:15px;min-height:54px;border-radius:8px}
.nl input::placeholder{color:rgba(255,255,255,.5)}
.nl input:focus{border-color:var(--bronze);outline:none;background:rgba(255,255,255,.12)}
.nl .btn{flex:0 0 auto;background:var(--bronze);border-color:var(--bronze);color:#fff}
.nl .btn:hover{background:#b07f58;border-color:#b07f58}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ftr-g{display:grid;grid-template-columns:1.2fr repeat(3,minmax(0,1fr));gap:clamp(22px,3.2cqi,52px);padding-bottom:34px}
.ftr-g img{width:142px;margin-bottom:18px}
.ftr h4{font-family:var(--head);font-weight:300;font-size:17px;color:var(--bronze);margin:0 0 14px}
.ftr ul{margin:0;padding:0;list-style:none}
.ftr li{margin-bottom:9px}
.ftr a:hover{color:#fff}
.ftr-proof{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:clamp(22px,3cqi,50px);align-items:start;
  padding:26px 0;border-top:1px solid rgba(255,255,255,.16)}
.ftr-proof p{font-size:13.5px;color:#a9c1c5;margin:8px 0 0;max-width:44ch;line-height:1.6}
.plogos img{width:min(100%,250px)}
.plogos .abtot{display:inline-block;margin-top:10px;font-size:11px;letter-spacing:.1em;color:#8fadb1;
  border:1px solid rgba(255,255,255,.24);padding:5px 10px;border-radius:3px}
.ftr-l{display:flex;gap:20px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);font-size:12.5px;color:#8fadb1}


/* Real <img> elements carry .im in the theme, not only background spans, so
   they need object-fit. Declared BEFORE the container queries so the mobile
   overrides further down still win — appending these at the end of the file
   was what collapsed the mobile hero. */
/* The baseline for every content image. Card rules that need the picture to fill
   a fixed box must beat this on specificity — .site img.im is (0,2,1), so a rule
   written as .thing .im at (0,2,0) loses and the image keeps its own proportions.
   That is what stretched the hotel cards and pushed the page out of shape. */
.site img.im{width:100%;height:auto;object-fit:cover;display:block}
/* height:auto, not 100%. A universal height:100% on every .im forced editorial
   images to their container height regardless of their own ratio, which is the
   most likely cause of the distorted and wrongly-sized mobile images Lighthouse
   reported. Components that genuinely need a filled box set their own height. */
.l50>img.im,.l23>img.im{aspect-ratio:4/3;height:auto}
.tcard .shot img.im{width:100%;height:100%}
.ifeat>img.im{aspect-ratio:4/2.8;height:auto;border-radius:var(--r)}
.hero>img.im,.band>img.im,.enqb>img.im,.csr-card>img.im,.thx-hero>img.im{position:absolute;inset:0;width:100%;height:100%}
.sidecards img.im{aspect-ratio:4/3;height:auto;border-radius:8px}
.dtile>img.im{position:absolute;inset:0}
.hdr-nav .sub-menu,.hdr-nav .sub-menu li{display:block}
.day-extras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.day-extras img{aspect-ratio:4/3;object-fit:cover;border-radius:8px;width:100%}
.gal-rest{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2cqi,14px);margin-top:clamp(8px,1.2cqi,14px)}
.gal-more{margin-top:18px}
.gal-more>summary{list-style:none;cursor:pointer;display:inline-block;font-family:var(--head);font-weight:300;
  font-size:16.5px;color:var(--teal);border-bottom:1px solid var(--bronze);padding-bottom:2px}
.gal-more>summary::-webkit-details-marker{display:none}

@container (max-width:1080px){
  /* minmax(0,1fr): a bare 1fr column grows to fit its widest child (a 1400px
     figure, a wide table) instead of the screen. */
  .l50,.l23,.lsb,.g3{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4cqi,48px)}
  .l50.flip .copy,.l23.flip .copy{order:0}
  .lsb .main{border-right:0;padding-right:0;border-bottom:1px solid var(--hair);padding-bottom:36px}
  .g4{grid-template-columns:1fr 1fr}
  .moments{grid-template-columns:1fr 1fr}
  .reas-in{grid-template-columns:1fr 1fr 1fr}
  .reas .i{border-left:1px solid rgba(255,255,255,.16);padding-left:clamp(14px,1.8cqi,28px)}
  .reas .i:first-child,.reas .i:nth-child(4){border-left:0;padding-left:0}
  .hdr-nav{display:none}
  .util .hdr-tel{font-size:13px}
  .hdr-burger,.util{display:none}
  .hdr-in{min-height:64px;gap:14px}
  .hdr-logo{margin-inline:auto}
  .hdr-act{display:none}
  .hdr-in{justify-content:center;min-height:58px}
  .mbar{display:grid;grid-template-columns:62px 62px 62px 1fr}
  .util .tag{display:none}
  .util-in{min-height:0;padding-block:8px}
  .hdr-search{min-width:0;width:100%}
  .snav{top:var(--hdr-h,112px)}
  .snav-in{overflow-x:auto}
  .snav .drop{display:none}
  .epanel{max-width:none}
  .revs,.experts2{grid-template-columns:1fr}
  .steps4{grid-template-columns:1fr 1fr}
  .teamgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4.five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .destgrid{grid-template-columns:1fr 1fr}
  .g4meet{grid-template-columns:1fr 1fr}
  .csr-in,.ftr-proof{grid-template-columns:1fr 1fr}
  .csr .act{grid-column:1/-1}
}
@container (max-width:760px){
  .gal5{grid-template-columns:1fr 1fr}
  .gal5 .g-lead{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
  .g4{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);scrollbar-width:none}
  .g4::-webkit-scrollbar{display:none}
  .g4>*{flex:0 0 72%;scroll-snap-align:start}
  .site{font-size:16.5px}
  .hero,.hero.short{height:auto;min-height:0;max-height:none;display:block;background:none}
  /* the photograph gets its own clean band; only the title sits on it, over a
     short gradient. Strap, CTAs and the facts card move below onto sand, so the
     image is never buried under four stacked elements. */
  .hero>.im{position:relative;aspect-ratio:3/3.4;height:auto}
  .hero .veil{top:auto;bottom:0;height:58%;
    background:linear-gradient(180deg,rgba(14,32,36,0) 0%,rgba(14,32,36,.5) 46%,rgba(14,32,36,.82) 78%,rgba(14,32,36,.9) 100%)}
  .hero .oc{display:none}
  .hero-in{position:absolute;bottom:0;left:0;right:0;padding:0 var(--gut) 20px}
  .hero-in h1{font-size:clamp(30px,9.2cqi,40px);max-width:none}
  .hero-in{padding-bottom:26px}
  /* Previously these were hidden on the assumption that a .hero-below block would
     repeat them beneath the image. No template emits that block, so the strapline,
     article subtitles, offer notes and the local CTA simply vanished on mobile.
     Keeping them in place avoids losing the copy and avoids duplicating it for
     screen readers; the gradient below carries the contrast. */
  .eyebrow{font-size:11px;letter-spacing:.14em;margin-bottom:6px}
  .hsub{font-size:15px;line-height:1.5;margin-top:10px;max-width:38ch;
    text-shadow:0 1px 3px rgba(10,26,30,.7)}
  .hero-in .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .hero-in .acts .btn{min-height:44px;padding:12px 20px;font-size:12px}
  .hero-in{padding-bottom:30px}
  .hero .v{background:linear-gradient(180deg,rgba(14,32,36,.18) 0%,rgba(14,32,36,.42) 42%,rgba(14,32,36,.88) 100%)}
  .hero-wrap{position:relative}
  .hero-below{background:var(--sand);padding:26px var(--gut) 0;display:block}
  .hero-below .hsub{display:block;color:var(--ink);text-shadow:none;margin:0 0 22px;font-size:17.5px;max-width:none}
  .hero-below .acts{display:flex;flex-direction:column;gap:10px}
  .hero-below .acts .btn{width:100%}
  .hero-below{padding-bottom:0}
  .hmeta-wrap{padding-top:18px}
  .hmeta{display:flex;flex-wrap:wrap;width:100%;margin-top:0;box-shadow:0 10px 24px -14px rgba(0,0,0,.28)}
  .hmeta .item{flex:1 1 50%;padding:13px 16px;border-bottom:1px solid var(--hair)}
  .hmeta .item:nth-child(2n){border-right:0}
  .hmeta .item:nth-last-child(-n+2){border-bottom:0}
  .hmeta .val{font-size:16px}
  .hmeta.search{flex-direction:column;align-items:stretch;gap:14px}
  .hmeta.search .btn{width:100%}
  .reas-in,.reas.compact .reas-in{grid-template-columns:1fr}
  .reas .i,.reas.compact .i{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .reas .i:first-child{border-top:0}
  .g4,.gal,.frow,.moments{grid-template-columns:1fr}
  .moment .card{height:clamp(360px,88cqi,460px)}
  .gal .a{grid-column:auto;grid-row:auto;aspect-ratio:4/2.8}
  .day,.inline-card,.imgacc .ab{grid-template-columns:1fr;gap:0}
  .imgacc .ab .shot{margin-bottom:14px}
  .inline-card .c{padding:18px 20px}
  .enqb{display:block;min-height:0}
  .enqb>.im{position:relative;height:200px}
  .enqb .v,.enqb .oc{display:none}
  .enqb-in{padding:0 0 clamp(40px,6cqi,60px)}
  .epanel{margin-inline:var(--gut);margin-top:-30px;background:var(--sand)}
  .band{min-height:0}
  .expert,.specintro,.tl2,.qarow,.dr,.lead-story,.legal,.ifeat,.supcard{grid-template-columns:1fr}
  .ifeat.rev>.im{order:0}
  .supcard div{padding:0 20px 20px}
  .lnav{position:static}
  .lead-story>.im{aspect-ratio:4/2.7;min-height:0}
  .qarow>h2{justify-content:flex-start;padding:26px 0 0}
  .qarow>div{border-left:0;padding:14px 0 28px}
  .dr{gap:8px;padding:20px 0}
  .srchbar{flex-wrap:wrap;border-radius:var(--r);padding:14px}
  .srchbar .btn{width:100%;border-radius:var(--r)}
  .specintro .port{max-width:170px}
  .ex{grid-template-columns:110px 1fr}
  .ftr-g,.csr-in,.ftr-proof,.ftr-news{grid-template-columns:1fr;gap:26px}
  .acc summary{flex-wrap:wrap;gap:6px;font-size:19px}
}

/* ── Theme-only additions ─────────────────────────────────────────────────
   Classes the prototype rendered inline and the PHP now emits as real
   elements. Kept at the end so the extracted prototype CSS above stays a
   clean diff against the design file. */

.brandnotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3cqi,48px);margin-top:clamp(26px,3cqi,44px)}
.brandnotes p{font-size:15px;color:var(--grey);margin:0}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:#245862;color:#fff;padding:12px 20px}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* WordPress nav menus render as ul/li; the prototype used bare anchors. */
.hdr-nav ul{display:flex;gap:inherit;list-style:none;margin:0;padding:0}
.hdr-nav li{position:relative}
.hdr-nav .sub-menu{position:absolute;left:0;top:100%;min-width:220px;background:var(--white);
  border:1px solid var(--hair);box-shadow:0 18px 32px -20px rgba(9,28,31,.4);
  opacity:0;visibility:hidden;transition:opacity .16s ease;z-index:30;padding:6px 0;list-style:none;margin:0}
.hdr-nav li:hover>.sub-menu,.hdr-nav li:focus-within>.sub-menu{opacity:1;visibility:visible}
.hdr-nav .sub-menu a{display:block;padding:10px 18px;color:var(--ink);border:0;font-size:14.5px}
.hdr-nav .sub-menu a:hover{color:var(--teal);background:var(--sand)}
.ftr ul{list-style:none;margin:0;padding:0}

/* Chips are links in the theme, not buttons. */
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair);background:var(--white);
  border-radius:999px;padding:10px 16px;font-size:13.5px;min-height:42px;color:var(--grey)}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff}
.chip b{font-weight:400;opacity:.75}

/* Highlights arrive as a WYSIWYG list rather than a built array. */
.hl-wrap ul{margin:0;padding:0;list-style:none;max-width:76ch}
.hl-wrap li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid var(--hair);font-size:16.5px;line-height:1.6}
.hl-wrap li:first-child{border-top:1px solid var(--hair)}
.hl-wrap li::before{content:"";position:absolute;left:4px;top:24px;width:6px;height:6px;background:var(--bronze);border-radius:50%}

/* Trip card badge, from the repurposed offer field. */
.tcard .shot{position:relative}
.tcard .badge{position:absolute;left:14px;top:14px;z-index:2;background:rgba(252,247,242,.95);color:var(--teal);
  font-family:var(--body);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:3px}

/* Core pagination markup. */
.nav-links{display:flex;gap:7px;justify-content:center;margin-top:clamp(26px,3cqi,44px);flex-wrap:wrap}
.nav-links .page-numbers{border:1px solid var(--hair);background:var(--white);padding:11px 17px;font-size:14px;color:var(--grey)}
.nav-links .page-numbers.current{background:var(--teal);border-color:var(--teal);color:#fff}

/* Equaldex iframe sits inside the rights panel. */
.rights iframe{display:block}

/* CF7 fields inherit the form styling. */
.epanel .wpcf7-form-control-wrap{display:block}
.epanel input[type=text],.epanel input[type=email],.epanel input[type=tel],
.epanel select,.epanel textarea{width:100%}
.epanel .wpcf7-not-valid-tip{color:#9B3A2E;font-size:12.5px;margin-top:5px}
.epanel .wpcf7-response-output{border:1px solid var(--hair);padding:12px 14px;font-size:14px;margin:18px 0 0}
.epanel .wpcf7-submit{all:unset;cursor:pointer}

/* Mobile: the hero and enquiry photographs are in flow and supply the layout
   height, so they must override the absolute desktop rule above. */
@container (max-width:760px){
  .hero>img.im{position:relative;inset:auto;aspect-ratio:3/3.4;height:auto;width:100%}
  .enqb>img.im{position:relative;inset:auto;height:200px;width:100%}
  .csr-grid{grid-template-columns:1fr}
  .gal-rest{grid-template-columns:1fr 1fr}
  .day-extras{grid-template-columns:1fr 1fr}
}

/* ===== ENQUIRY FORM (CF7) =====
   One step, sized to fit the panel without scrolling: paired fields on one row,
   budget as a single chip row, and the optional extras behind a disclosure.
   CF7 wraps every control in .wpcf7-form-control-wrap, which is why the chip
   styling hangs off .wpcf7-list-item rather than the input. */
.eform{--fgap:12px}
.eform .erow{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.eform .f{display:block;margin:0 0 var(--fgap)}
.eform label{display:block;font-size:13px;margin-bottom:5px;color:var(--ink)}
.eform label .opt,.eform .opt{color:var(--grey);font-size:12px;font-weight:400}
.eform .wpcf7-form-control-wrap{display:block}
.eform input[type=text],.eform input[type=email],.eform input[type=tel],
.eform select,.eform textarea{width:100%;padding:10px 12px;font-family:var(--body);font-size:14.5px;
  color:var(--ink);background:#fff;border:1px solid var(--hair);border-radius:8px;outline:none;
  appearance:auto}
.eform input:focus,.eform select:focus,.eform textarea:focus{border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(43,94,104,.12)}
.eform textarea{resize:vertical;min-height:62px}
.eform .fine{display:block;margin-top:5px;font-size:12px;color:var(--grey);line-height:1.4}

/* Budget chips. The container must stay transparent — CF7's own wrapper picking up
   a background is what produced the white pill behind the row. */
.eform .fchips .chips,
.eform .fchips .wpcf7-form-control-wrap,
.eform .fchips .wpcf7-radio{display:flex;flex-wrap:wrap;gap:6px;background:none;border:0;padding:0}
.eform .chips .wpcf7-list-item{margin:0;display:inline-flex}
.eform .chips .wpcf7-list-item label{margin:0;cursor:pointer;display:inline-flex}
.eform .chips input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.eform .chips .wpcf7-list-item-label{display:inline-block;padding:8px 13px;font-size:13px;
  white-space:nowrap;border:1px solid var(--hair);border-radius:999px;background:#fff;color:var(--ink);
  transition:background .15s,border-color .15s,color .15s}
.eform .chips input[type=radio]:checked + .wpcf7-list-item-label{background:var(--teal);
  border-color:var(--teal);color:#fff}
.eform .chips input[type=radio]:focus-visible + .wpcf7-list-item-label{box-shadow:0 0 0 3px rgba(43,94,104,.25)}

/* Optional extras, collapsed so the form fits the panel. */
.eform .emore{margin:2px 0 var(--fgap);border-top:1px solid var(--hair);padding-top:10px}
.eform .emore summary{cursor:pointer;font-size:13px;color:var(--teal);list-style:none}
.eform .emore summary::-webkit-details-marker{display:none}
.eform .emore summary::before{content:"+ ";font-weight:400}
.eform .emore[open] summary::before{content:"– "}
.eform .emore > .erow{margin-top:10px}

.eform .enav{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:14px 0 0}
.eform .wpcf7-not-valid-tip{color:#b3261e;font-size:12px;margin-top:4px}
.eform .wpcf7-spinner{margin-left:10px}
.eform .wpcf7-response-output{margin:10px 0 0;padding:10px 12px;font-size:13px;border-radius:8px}

@container (max-width:640px){
  .eform .erow{grid-template-columns:1fr}
  .eform .chips .wpcf7-list-item-label{font-size:12.5px;padding:7px 11px}
}

/* ===== MEGA PANELS — runtime state =====
   The panel-nav / panel-cols / panel-feat styling already exists above; this only
   adds what the live markup needs on top of it. */
/* No position here: .hdr is position:sticky further up, and re-declaring it as
   relative silently stopped the header sticking. Sticky already establishes a
   containing block for the absolutely positioned panels. */
.panel-nav[hidden]{display:none}
.hdr-nav a.has-panel{position:relative}
.hdr-nav a.has-panel.open{border-bottom-color:var(--bronze)}
.panel-cols ul{margin:0;padding:0;list-style:none}
.panel-cols a{display:block;padding:2px 0}
.panel-foot .tl{font-size:13.5px}

/* ===== MOBILE DRAWER =====
   Second level pushes across rather than accordions open, so the first screen
   stays short however many destinations exist. */
/* Resets max-width and border from the prototype's static .drawer illustration
   further up this file, which would otherwise cap the real drawer at 390px. */
.drawer{position:fixed;inset:0;z-index:120;max-width:none;border:0;
  background:var(--teal-deep);color:#fff;
  transform:translateX(-100%);transition:transform .28s ease;overflow:hidden;display:none}
.drawer.on{transform:translateX(0)}
.drawer .dtop{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px var(--gut);border-bottom:1px solid rgba(255,255,255,.16)}
.drawer .dtop .lg img{width:132px;height:auto}
.drawer .d-close,.drawer .dback{background:none;border:0;color:#fff;font-size:26px;line-height:1;padding:4px 8px}
.drawer .dttl{font-family:var(--head);font-weight:300;font-size:17px}
.drawer .dsearch{padding:14px var(--gut);border-bottom:1px solid rgba(255,255,255,.16)}
.drawer .dsearch input{width:100%;padding:12px 13px;border:1px solid rgba(255,255,255,.28);
  border-radius:8px;background:rgba(255,255,255,.08);color:#fff;font-size:15px;outline:none}
.drawer .dsearch input::placeholder{color:rgba(255,255,255,.6)}
.drawer .dlist{list-style:none;margin:0;padding:6px 0;overflow-y:auto}
.drawer .dlist a{display:flex;align-items:center;justify-content:space-between;
  padding:15px var(--gut);font-size:16.5px;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer .dlist a i{font-style:normal;opacity:.7;font-size:20px}
.drawer .dfoot{position:absolute;bottom:0;left:0;right:0;padding:16px var(--gut);
  background:var(--teal-deep);border-top:1px solid rgba(255,255,255,.16);display:grid;gap:12px}
.drawer .dfoot .tel{font-family:var(--head);font-weight:300;font-size:16px;text-align:center;color:#fff}
.drawer .dsub{position:absolute;inset:0;background:var(--teal-deep);
  transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column}
.drawer .dsub.on{transform:translateX(0)}
.drawer .dsub-in{padding:6px var(--gut) 90px;overflow-y:auto}
.drawer .dsub-in h4{font-family:var(--head);font-weight:300;font-size:15px;color:var(--bronze);
  margin:20px 0 8px;letter-spacing:.02em}
.drawer .dsub-in ul{list-style:none;margin:0;padding:0}
.drawer .dsub-in a{display:block;padding:11px 0;font-size:15.5px;border-bottom:1px solid rgba(255,255,255,.1)}

/* Media query, not container: the drawer now lives outside .site so a container
   query has no container to resolve against and would never match. */
@media (max-width:1080px){
  .drawer{display:block}
}

/* Prominent index CTA under a card grid. A text link at the foot of six cards is
   missed, and the index is the page that ranks. */
.more-cta{display:flex;justify-content:center;margin-top:clamp(22px,2.6cqi,36px)}
.more-cta .btn{background:var(--teal);border-color:var(--teal);color:#fff;
  padding:14px 28px;font-size:13px;letter-spacing:.09em}
.more-cta .btn:hover{background:var(--teal-deep);border-color:var(--teal-deep)}

/* ===== HOMEPAGE HERO =====
   The homepage H1 is a short brand line, not a long editorial title, so the 18ch
   clamp that stops country headlines running wide just breaks it over two lines
   here. Widen it and let the type scale down slightly so it holds one line, which
   also gives the photograph back the vertical space the second line was taking. */
.home .hero-in h1{max-width:26ch;font-size:clamp(28px,4.4cqi,56px);text-wrap:balance}
.home .hero-in{padding-bottom:clamp(30px,3.2cqi,44px)}
.home .hero-in .hsub{max-width:56ch}

/* More of the photograph, and the scrim lightened so it reads as an image rather
   than a tinted panel. */
/* Relative to the viewport, not absolute.
   A flat 560px minimum beat every max-height the design and the script set, so on
   a laptop the search card sat below the fold. Tying the floor to the viewport
   means the card is visible on the first paint, before heroFit() measures. */
.home .hero{min-height:min(560px,52vh)}  /* desktop only; overridden below 760px */
.home .hero .veil{background:
  linear-gradient(105deg,rgba(14,32,36,.62) 0%,rgba(14,32,36,.40) 30%,rgba(14,32,36,.08) 56%,rgba(14,32,36,0) 72%),
  linear-gradient(180deg,rgba(14,32,36,.22) 0%,rgba(14,32,36,0) 28%,rgba(14,32,36,0) 52%,rgba(14,32,36,.52) 100%)}

@container (max-width:780px){
  .home .hero-in h1{max-width:18ch}
}

/* Authored nav: current-page underline, which wp_nav_menu used to give us free. */
.hdr-nav a.current{border-bottom-color:var(--bronze)}

/* ===== EDITORIAL SIDEBAR =====
   Contents first, then destinations, then further reading. Sticky so it stays
   usable through a long article, with its own scroll when the list is long. */
/* Scrolls with the page. A sticky column with its own scrollbar competes with the
   page scroll and is more irritating than useful on a long read. */
.artside{align-self:start}
.toc-side{margin:0 0 26px;border-bottom:1px solid var(--hair);padding-bottom:18px}
.toc-side summary{cursor:pointer;list-style:none;font-family:var(--body);font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--bronze);margin-bottom:12px}
.toc-side summary::-webkit-details-marker{display:none}
.toc-side summary::after{content:" –";}
.toc-side:not([open]) summary::after{content:" +";}
.toc-side ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc-side li{margin-bottom:8px;font-size:13.5px;line-height:1.35;
  display:grid;grid-template-columns:20px 1fr;gap:6px}
/* Only top-level entries are counted. Incrementing on every row while showing a
   dash for sub-entries made the visible numbers skip — 2, then 6. */
.toc-side li.l2{counter-increment:toc}
.toc-side li.l2::before{content:counter(toc);color:var(--bronze);font-size:11.5px;padding-top:3px}
.toc-side li.l3{padding-left:12px;font-size:13px}
.toc-side li.l3::before{content:"";border-top:1px solid var(--hair);margin-top:10px;height:0}
.toc-side a{color:var(--ink)}
.toc-side a:hover{color:var(--teal);border-bottom:1px solid var(--bronze)}
html{scroll-behavior:smooth}
.art h2[id],.art h3[id]{scroll-margin-top:calc(var(--hdr-h,112px) + 20px)}



/* World map hotspots are links, not decoration. */
.worldmap b a{color:#fff;border:0}
.worldmap b:hover a{color:#fff}
.worldmap .im{width:100%;height:auto;object-fit:contain;opacity:.9}

/* ===== MEGA PANEL — density =====
   The design's Destinations panel had six columns, so repeat(3,minmax(0,1fr)) wrapped to two
   tidy rows. The live list is nine columns, which in a 3-wide grid becomes three
   rows, each as tall as Europe's seventeen entries — a panel taller than the
   viewport. Pack columns by available width instead, and tighten the list. */
.panel-in{grid-template-columns:minmax(0,3fr) minmax(220px,1fr);align-items:start}
.panel-cols{grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:18px 22px;align-content:start}
.panel-cols>div{min-width:0}
.panel-cols h4{font-size:14px;margin:0 0 8px;letter-spacing:.01em}
.panel-cols li{margin-bottom:4px;font-size:13.5px;line-height:1.3}
.panel-cols a{padding:1px 0}

/* Keep the whole panel inside the viewport whatever the destination count. */
.panel-nav{max-height:calc(100vh - var(--hdr-h,112px));overflow-y:auto;overscroll-behavior:contain}
.panel-in{padding-block:clamp(20px,2.4cqi,32px)}

/* The featured column is secondary to the links: smaller, and never wider than
   its track, which is what let the images ride over the text. */
.panel-feat{gap:12px;min-width:0}
.panel-feat .im,.panel-feat img{max-width:100%;height:auto;border-radius:10px}
.panel-feat img{display:block;aspect-ratio:16/10;object-fit:cover}
.panel-feat h3{font-size:15px;margin-top:7px}
.panel-feat p{font-size:12.5px}
.worldmap{margin-bottom:2px}
.worldmap b{font-size:11.5px;padding:2px 6px}

@container (max-width:1280px){
  /* Below this the featured column costs more than it gives; the map carries it. */
  .panel-feat .f:nth-of-type(2){display:none}
}

/* Index intro: a lede rather than body copy, so the page opens on the content. */
.lede{font-family:var(--head);font-weight:300;font-size:clamp(16.5px,1.5cqi,19px);
  line-height:1.55;color:var(--ink);margin:0}

/* ===== ENQUIRY FORM — density and controls =====
   Tighter throughout, one type scale, and a submit that reads as a button. CF7
   renders submit as <input>, which cannot carry the .btn span children the rest of
   the site uses, so it needs its own rule or it renders as plain text. */
.eform{--fgap:10px}
.eform .erow{gap:0 12px}
.eform label{font-size:12.5px;margin-bottom:4px;letter-spacing:.01em}
.eform input[type=text],.eform input[type=email],.eform input[type=tel],
.eform select,.eform textarea{padding:9px 11px;font-size:14px;border-radius:7px}
.eform textarea{min-height:54px}
.eform .fine{margin-top:4px;font-size:11.5px;line-height:1.4}
.eform p{margin:0 0 var(--fgap)}

/* Budget chips sit tighter and never wrap to three rows. */
.eform .fchips{margin-bottom:12px}
.eform .chips .wpcf7-list-item-label{padding:7px 11px;font-size:12.5px}

/* Phone: flag and dial code inside the field. */
.eform .telwrap{position:relative;display:block}
/* The dialling code is a real control now, not a label: it sits inside the field
   but takes pointer events, because a visitor whose country we guessed wrong has
   to be able to change it. Borderless and transparent so it still reads as part of
   the input rather than as a second field. */
.eform .telcc{position:absolute;left:1px;top:1px;bottom:1px;width:86px;
  appearance:none;-webkit-appearance:none;border:0;border-right:1px solid var(--hair);
  background:transparent;padding:0 6px 0 10px;margin:0;min-height:0;
  font-family:var(--body);font-size:13px;color:var(--ink);cursor:pointer;
  border-radius:7px 0 0 7px}
.eform .telcc:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.eform .telcc i{font-style:normal;font-size:14px;line-height:1}
.eform .telwrap input[type=tel]{padding-left:96px}

/* Submit. */
/* line-height:1 is the whole answer to why this was so tall. .epanel .wpcf7-submit
   further up sets all:unset, which resolves line-height to `inherit` — 1.78 from
   .site — so a 12.5px label was laying out in a 22px line box, and 14px of padding
   top and bottom made a 53px button out of it. Stated explicitly, the box is the
   height it says it is. */
.eform input[type=submit],.eform .wpcf7-submit{
  display:inline-block;width:auto;min-height:46px;padding:0 30px;line-height:1;
  font-family:var(--body);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:var(--bronze);border:1px solid var(--bronze);
  cursor:pointer;transition:background .2s,border-color .2s;-webkit-appearance:none;appearance:none}
.eform input[type=submit]:hover,.eform .wpcf7-submit:hover{background:#b07f58;border-color:#b07f58}
/* Submit and the spam widget share a row. Turnstile renders at 300x65, which sits
   beside a 46px button inside the field column without another row's worth of
   height. Both of Cloudflare's wrapper classes are matched because CF7 emits one
   and the Turnstile script the other, depending on how it was added. */
.eform .enav{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;
  gap:8px 16px;margin-top:12px}
.eform .enav .fine{margin:0;max-width:34ch;flex:1 1 200px}

/* Turnstile. With interaction-only appearance this collapses to nothing on almost
   every visit; these rules are for the times it does draw itself, so that when it
   appears it appears beside the button rather than shoving the row apart. */
.eform .enav .wpcf7-turnstile,.eform .enav .cf-turnstile,
.eform .wpcf7-turnstile,.eform .cf-turnstile{flex:0 0 auto;line-height:0}
.eform .wpcf7-turnstile:empty,.eform .cf-turnstile:empty{display:none}
.eform .wpcf7-turnstile iframe,.eform .cf-turnstile iframe{display:block}

/* Optgroup labels in the destination select. */
.eform optgroup{font-family:var(--body);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bronze);font-style:normal}
.eform optgroup option{font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink)}

/* The reassurance line under the form is outside .eform, so it never picked up the
   small type and rendered at body size. */
.epanel > .fine,.epanel .intro + .fine,.enqb .epanel .fine{font-size:11.5px;line-height:1.45;color:var(--grey)}
.epanel .intro{font-size:13.5px;line-height:1.5;margin-bottom:14px}
.epanel h2{margin-bottom:6px}

/* ===== EDITORIAL — reading width =====
   66/30 suits a destination page with cards, but an article is a single column of
   prose and was coming out too narrow to read comfortably. */
.art-layout.lsb{grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4cqi,64px)}
.art-layout .art{max-width:none}
.art-layout .art p{max-width:none}

@container (max-width:1000px){
  .art-layout.lsb{grid-template-columns:minmax(0,1fr)}
}

/* ===== EDITORIAL BODY =====
   Headings ran straight into the paragraph below, and inline links were the same
   colour as the prose, so they read as emphasis rather than links. */
.art h2{margin:clamp(30px,3.2cqi,46px) 0 12px}
.art h3{margin:clamp(24px,2.6cqi,34px) 0 10px}
.art h2 + p,.art h3 + p{margin-top:0}
.art p{margin:0 0 18px;line-height:1.72}
.art p a:not(.btn):not(.tl):not(.button){color:var(--teal);border-bottom:1px solid rgba(43,94,104,.35)}
.art p a:not(.btn):not(.tl):not(.button):hover{border-bottom-color:var(--bronze);color:var(--bronze)}
.art ul,.art ol{margin:0 0 18px;padding-left:20px}
.art li{margin-bottom:7px;line-height:1.6}
.art > *:first-child{margin-top:0}

/* ===== RIGHTS PANEL — index score =====
   The score is meaningless without its scale: "8" reads as a rating out of ten
   when it is 8 out of 100. Show the denominator and a bar, so a low number reads
   as low at a glance rather than needing to be interpreted. */
.rights .ei{display:flex;align-items:baseline;gap:1px;font-family:var(--head);font-weight:300}
.rights .ei b{font-weight:400;font-size:20px;color:var(--teal)}
.rights .ei s{text-decoration:none;font-size:13px;color:var(--grey)}
.rights .eibar{height:4px;background:var(--hair);position:relative;overflow:hidden}
.rights .eibar span{position:absolute;inset:0 auto 0 0;background:var(--teal)}
.rights .rs .r:last-child{border-bottom:0}
.rights .r .k{flex:0 0 auto;max-width:48%}
.rights .r .v{flex:1 1 auto;min-width:0}
.rights .f a{display:inline-block;margin-left:4px;color:var(--teal);border-bottom:1px solid var(--hair)}
.rights .f a:hover{border-bottom-color:var(--bronze)}

/* ===== INSPIRATION =====
   Recommended-reading card, the SEO link tiles and the labelled image slide. */
.readcard{display:block;margin-top:10px;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:var(--white)}
.readcard .im{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.readcard .c{display:block;padding:14px 16px}
.readcard strong{display:block;font-family:var(--head);font-weight:400;font-size:16px;line-height:1.3;color:var(--teal)}
.readcard .x{display:block;margin-top:7px;font-size:13.5px;line-height:1.5;color:var(--grey)}
.readcard .cta{display:inline-block;margin-top:10px;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--bronze);border-bottom:1px solid var(--bronze)}
.readcard:hover strong{color:var(--bronze)}

/* Inspiration SEO tiles. Deliberately NOT .dtile: reusing that class overrode the
   destination-tile component further up this file — display:block killed its
   align-items:flex-end and dropped every caption to the top of the card. */
.seotile{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:3/3.6}
.site .seotile img.im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.seotile:hover .im{transform:scale(1.04)}
.seotile .v{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,32,36,0) 38%,rgba(14,32,36,.72) 100%)}
.seotile .c{position:absolute;left:0;right:0;bottom:0;padding:18px;color:#fff;z-index:2}
.seotile .c .lbl{color:rgba(255,255,255,.82)}
.seotile .c h3{color:#fff;font-size:19px;margin:4px 0 0;line-height:1.2}

.imgslide{position:relative;display:block;border-radius:var(--r);overflow:hidden}
.imgslide .im{display:block;width:100%;height:auto}
.imgslide .c{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2.4cqi,34px);color:#fff;
  background:linear-gradient(180deg,rgba(14,32,36,0) 0%,rgba(14,32,36,.7) 100%)}
.imgslide .c .lbl{color:rgba(255,255,255,.85)}
.imgslide .c h3{color:#fff;font-size:clamp(20px,2.4cqi,30px);margin:6px 0 0}
.sidenote{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--grey)}

/* ===== WPML LANGUAGE SWITCHER =====
   The flag comes from WPML's own menu-item markup, which ships an unconstrained
   <img>. Inside our footer list it rendered at natural size — a flag several times
   the height of the text beside it. */
.wpml-ls-item,.wpml-ls-menu-item{list-style:none}
.wpml-ls-item a,.wpml-ls-menu-item a{display:inline-flex;align-items:center;gap:8px}
.wpml-ls-flag,.wpml-ls-item img,.wpml-ls-menu-item img{
  width:20px !important;height:14px !important;object-fit:cover;border-radius:2px;
  display:inline-block;vertical-align:middle;flex:0 0 auto}
.wpml-ls-native,.wpml-ls-display{font-size:inherit}

/* ===== COUNTRY INTRO =====
   Term descriptions run long and were set at hero scale, so the page opened on a
   wall of oversized text before any content. Body scale, measured line length,
   and the rest behind a disclosure. */
.cintro{max-width:72ch}
.cintro p{font-size:15.5px;line-height:1.7;margin:0 0 16px}
/* Lead paragraph only — scoped to a direct child, because :first-of-type also
   matched the first paragraph inside the <details>, so the type jumped back up
   after "More about Greece". */
.cintro > p:first-of-type{font-family:var(--head);font-weight:300;font-size:clamp(17px,1.6cqi,20px);line-height:1.55}
.cintro details p{font-size:15.5px;font-family:var(--body);font-weight:400;line-height:1.7}
.cintro details{margin-top:2px}
.cintro summary{cursor:pointer;list-style:none;font-size:13px;letter-spacing:.02em;color:var(--teal);
  border-bottom:1px solid var(--bronze);display:inline-block;padding-bottom:2px}
.cintro summary::-webkit-details-marker{display:none}
.cintro details[open] summary{margin-bottom:14px}

/* ===== TRAVEL INFORMATION — vertical tabs ===== */
.vtabs{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);
  gap:clamp(24px,3.4cqi,56px);border-top:1px solid var(--hair);padding-top:clamp(22px,2.6cqi,34px)}
.vt-nav{display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--hair);padding-right:clamp(14px,1.8cqi,26px)}
.vt-nav button{text-align:left;background:none;border:0;padding:11px 0;cursor:pointer;
  font-family:var(--head);font-weight:300;font-size:15.5px;line-height:1.3;color:var(--grey);
  display:flex;align-items:baseline;gap:10px;transition:color .18s}
.vt-nav button::before{content:"";flex:0 0 0;height:1px;background:var(--bronze);transition:flex-basis .22s ease}
.vt-nav button:hover{color:var(--teal)}
.vt-nav button.on{color:var(--teal)}
.vt-nav button.on::before{flex-basis:34px}
.vt-panel{display:none}
.vt-panel.on{display:block}
.vt-panel h3{font-size:clamp(20px,2cqi,26px);margin:0 0 16px;font-weight:300}
.vt-panel h4{font-family:var(--head);font-weight:400;font-size:16.5px;margin:22px 0 8px;color:var(--teal)}
.vt-panel p{margin:0 0 14px;line-height:1.7}
.vt-intro{color:var(--grey)}

/* Weather: month, range, icons, note. */
.wx{display:grid;gap:0}
.wx-row{display:grid;grid-template-columns:96px 104px auto;gap:10px 14px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--hair)}
.wx-row:last-child{border-bottom:0}
.wx-m{font-family:var(--head);font-weight:400;font-size:15px;color:var(--teal)}
.wx-t{font-size:13.5px;color:var(--grey);white-space:nowrap}
.wx-i{display:flex;gap:3px;flex-wrap:wrap}
.wx-i .wi{font-size:13px;line-height:1}
.wx-i .sun{color:#C9922F}
.wx-i .rain{color:#6E93A6}
.wx-i .snow{color:#8FB4C4}
.wx-b{grid-column:1/-1;font-size:13.5px;color:var(--grey);line-height:1.55;margin-top:2px}

@container (max-width:860px){
  .vtabs{grid-template-columns:1fr;gap:18px}
  .vt-nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--hair);
    padding:0 0 4px;gap:18px;scrollbar-width:none}
  .vt-nav::-webkit-scrollbar{display:none}
  .vt-nav button{white-space:nowrap;padding:8px 0;font-size:14.5px}
  .vt-nav button::before{display:none}
  .vt-nav button.on{border-bottom:2px solid var(--bronze)}
  .wx-row{grid-template-columns:84px 96px auto}
}

/* ===== LIGHTBOX ===== */
.zoomable{cursor:zoom-in}
.lbx{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  gap:clamp(8px,2cqi,26px);background:rgba(9,20,22,.94);padding:clamp(12px,3cqi,44px)}
.lbx.on{display:flex}
.lbx figure{margin:0;max-width:min(1200px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:10px}
.lbx img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:6px;display:block;margin:0 auto}
.lbx figcaption{color:rgba(255,255,255,.76);font-size:13px;text-align:center}
.lbx button{background:none;border:0;color:#fff;cursor:pointer;line-height:1;padding:10px}
.lbx-x{position:absolute;top:14px;right:18px;font-size:34px}
.lbx-p,.lbx-n{font-size:46px;opacity:.72;flex:0 0 auto}
.lbx-p:hover,.lbx-n:hover,.lbx-x:hover{opacity:1}
@container (max-width:640px){
  .lbx-p,.lbx-n{position:absolute;bottom:14px;font-size:38px}
  .lbx-p{left:20px} .lbx-n{right:20px}
}

/* FAQs: teal band with the on-teal accordion, per the design. */
.faqs{background:var(--teal);color:#fff}
.faqs .shead h2{color:#fff}
.faqs .shead .rule{background:rgba(255,255,255,.4)}
.faqs .acc{margin-top:26px}
.faqs .acc summary::after,.faqs .acc summary span{color:#fff}
.faqs a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45)}
.faqs a:hover{border-bottom-color:#fff}

/* Destination reveal on continent pages. */
.dmore{display:none}
.dmore.on{display:block}
.btn.ghost{background:none;border-color:var(--hair);color:var(--ink)}
.btn.ghost:hover{border-color:var(--teal);color:var(--teal)}

/* ===== SHORTCODE BLOCKS INSIDE ARTICLE BODY =====
   [ts-wesuggest] and friends output a full-width <section class="sec"> with a
   three-column grid. Dropped into the article column that becomes three cards in
   roughly 600px, which is the squashed "We Suggest" rendering. Inside .art they
   become a single stacked list with a horizontal card, matching the design's
   inline-card. */
.art .sec{padding:0;margin:26px 0}
.art .sec .wrap{padding:0;max-width:none}
.art .g3,.art .g4{grid-template-columns:1fr;gap:14px}

.art .tcard{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0;
  background:var(--sand);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;align-items:stretch}
.art .tcard .shot{position:relative;margin:0;height:100%;min-height:150px}
.art .tcard .shot .im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art .tcard .b{padding:18px 20px;display:flex;flex-direction:column;justify-content:center}
.art .tcard h3{font-size:19px;line-height:1.24;margin:0 0 6px}
.art .tcard p{font-size:14px;line-height:1.55;margin:0 0 10px;color:var(--grey)}
.art .tcard .kind{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--bronze);margin-bottom:6px}
.art .tcard .pr{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:1px solid var(--hair);padding-top:10px;margin-top:auto}
.art .tcard .line{font-size:13px;color:var(--grey)}
.art .tcard .cta{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--bronze);white-space:nowrap}

/* The heading the shortcode prints above the cards. */
.art .sec .rule{margin:8px 0 16px}
.art .sec h2{margin-top:0}

@container (max-width:620px){
  .art .tcard{grid-template-columns:1fr}
  .art .tcard .shot{min-height:0;aspect-ratio:16/10}
}

/* Enquiry form: with CF7's autop disabled the markup is exactly what we wrote, so
   spacing is now set here rather than fighting injected <br> tags. */
.eform br{display:none}
.eform .wpcf7-form-control-wrap{margin:0}
.eform p.f,.eform p.f2{margin:0 0 10px}
.eform .erow p.f{margin-bottom:10px}
.eform textarea{min-height:104px}
.eform .fchips .chips{margin-top:2px}
.eform label{margin-bottom:3px}

/* ===== LEGACY BUILDER CONTENT =====
   Pages that were built in Elementor carry alignment and sizing in the content
   itself — centred headings, inline font sizes, builder wrappers. Once the page
   renders through a theme template that markup is no longer serving a layout, it
   is just overriding ours. Reset it inside the content columns only, so anything
   deliberately centred elsewhere is untouched. */
.lbody [style*="text-align:center"],
.lbody [style*="text-align: center"],
.art [style*="text-align:center"],
.art [style*="text-align: center"]{text-align:left !important}

.lbody h1,.lbody h2,.lbody h3,.lbody h4,
.art h1,.art h2,.art h3,.art h4{text-align:left}

/* Inline font sizes and colours from the builder, which fight the type scale. */
.lbody [style*="font-size"],
.art [style*="font-size"]{font-size:inherit !important}
.lbody [style*="font-family"],
.art [style*="font-family"]{font-family:inherit !important}

/* Builder section wrappers collapse to plain flow. */
.lbody .elementor-section,.lbody .elementor-container,.lbody .elementor-widget-wrap,
.lbody .elementor-column,.lbody .panel-grid,.lbody .panel-grid-cell,
.art .elementor-section,.art .elementor-container,.art .elementor-widget-wrap,
.art .elementor-column,.art .panel-grid,.art .panel-grid-cell{
  display:block;width:auto;max-width:none;padding:0;margin:0}

/* Country intro image sits beside the copy. */
.cintro-im{border-radius:var(--r);width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* Weather, made to read at a glance rather than as a table of numbers. */
.wx-intro{color:var(--grey);margin-bottom:14px}
.wx-row{background:var(--white);border:1px solid var(--hair);border-bottom:0;padding:10px 14px}
.wx-row:first-child{border-radius:var(--r) var(--r) 0 0}
.wx-row:last-child{border-bottom:1px solid var(--hair);border-radius:0 0 var(--r) var(--r)}
.wx-t{font-family:var(--head);font-weight:400;font-size:14.5px;color:var(--ink)}
.wx-i .wi{font-size:14px}
.wx-note{margin-top:10px;font-size:12.5px;color:var(--grey)}

/* Rights panel: match the height of the copy beside it, and reveal the rest. */
.rights{align-self:start}

/* Mega panel: the featured column was taking more width than the links it sits
   beside, and its images ran tall enough to push the panel past the viewport. */
.panel-in{grid-template-columns:minmax(0,3.4fr) minmax(190px,0.9fr)}
.panel-feat img,.panel-feat .im{aspect-ratio:16/11;max-height:132px;width:100%;object-fit:cover}
.panel-feat .f{display:block;min-width:0}
.panel-feat h3{font-size:14.5px;margin-top:6px;line-height:1.25}
.panel-feat p{font-size:12px;margin-top:2px}
.worldmap{aspect-ratio:1250/751;max-height:170px}
.worldmap b{font-size:11px;padding:2px 5px}

@container (max-width:1180px){
  .panel-feat{display:none}   /* links matter more than imagery at this width */
  .panel-in{grid-template-columns:1fr}
}

/* ===== MISSION BAND =====
   The design opens on a larger statement and steps down for the supporting
   paragraphs. Rendering every paragraph at body size lost that, and the block read
   as a flat wall of centred text. */
.mission-copy p{font-size:16px;line-height:1.7;margin:0 auto 16px;max-width:64ch}
.mission-copy > p:first-of-type{font-family:var(--head);font-weight:300;
  font-size:clamp(21px,2.3cqi,29px);line-height:1.35;color:var(--teal);
  margin-top:14px;margin-bottom:22px;max-width:30ch}
.mission-copy .lbl.b{color:var(--bronze)}

/* Phone prefix sits inside the field; the input needs room for it.

   This block used to redeclare .telcc at the same specificity as the rule 330
   lines above it and, being later, quietly won — including pointer-events:none,
   which is correct for a label and fatal for the select it has become. Only the
   width is set here now; the control itself is defined once, up there. */
.eform .telwrap{position:relative;display:block}
.eform .telwrap input[type=tel]{padding-left:96px;width:100%}

/* ===== MOBILE SEARCH =====
   A real form, collapsed by default, so it still works with JS disabled. */
.msearch{display:none;gap:8px;padding:10px var(--gut) 12px;background:var(--teal-deep);
  border-top:1px solid rgba(255,255,255,.14)}
.msearch input[type=search]{flex:1 1 auto;min-width:0;padding:11px 12px;font-size:15px;
  color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);
  border-radius:8px;outline:none}
.msearch input[type=search]::placeholder{color:rgba(255,255,255,.62)}
.msearch input[type=search]:focus{border-color:#fff;background:rgba(255,255,255,.16)}
.msearch button{flex:0 0 auto;padding:11px 18px;font-family:var(--body);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--bronze);
  border:0;border-radius:8px;cursor:pointer}
.msearch[hidden]{display:none}
.mbar [data-search][aria-expanded="true"]{background:rgba(255,255,255,.1)}

@media (max-width:1080px){
  .msearch:not([hidden]){display:flex}
}

/* Components that do need a filled box declare it, now the global rule does not.
   Each selector must out-specify `.site img.im` (0,2,1) or it loses and the image
   falls back to height:auto — which is what left tiles half-filled with the card
   background showing beneath. Hence .site and img in every one. */
.site .dtile img.im,
.site .seotile img.im,
.site .gal img.im,
.site .hero > img.im,
.site .enqb > img.im,
.site .worldmap img.im,
.site .readcard img.im,
.site .tcard .shot img.im,
.site .day .shot img.im,
.site .vfacade img.im,
.site .imgslide img.im,
.site .mt img.im{height:100%}

/* ===== VIDEO FACADE ===== */
.vfacade{position:relative;border-radius:var(--r);overflow:hidden;background:var(--teal-deep);
  aspect-ratio:16/9;display:block}
.site .vfacade img.im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vfacade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vplay{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;
  background:rgba(255,255,255,.92);border:0;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:transform .2s,background .2s}
.vplay:hover{transform:scale(1.06);background:#fff}
.vplay .tri{width:0;height:0;margin-left:5px;border-left:20px solid var(--teal);
  border-top:13px solid transparent;border-bottom:13px solid transparent}
.vtitle{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;color:#fff;
  font-family:var(--head);font-weight:300;font-size:17px;
  background:linear-gradient(180deg,rgba(14,32,36,0),rgba(14,32,36,.72))}
.vfacade.playing .vplay,.vfacade.playing .vtitle{display:none}

/* Card extras: town, free-text badge and hotel tier. */
.tcard .town{display:block;font-size:12.5px;color:var(--grey);margin:-2px 0 6px;letter-spacing:.01em}

/* ===== NEWSLETTER ===== */
.nl-t{font-family:var(--head);font-weight:300;font-size:18px;color:var(--bronze);margin:0 0 6px}
.nl-n{font-size:13.5px;line-height:1.55;margin:0 0 14px;color:inherit;opacity:.85;max-width:52ch}
.nl-f{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;max-width:520px}
.nl-f input[type=email]{flex:1 1 220px;min-width:0;padding:12px 13px;font-size:15px;
  color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  border-radius:8px;outline:none}
.nl-f input[type=email]::placeholder{color:rgba(255,255,255,.6)}
.nl-f input[type=email]:focus{border-color:#fff;background:rgba(255,255,255,.16)}
.nl-f button{flex:0 0 auto;padding:12px 22px;font-family:var(--body);font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--bronze);
  border:1px solid var(--bronze);border-radius:8px;cursor:pointer;transition:background .2s}
.nl-f button:hover{background:#b07f58;border-color:#b07f58}
.nl-p{margin:10px 0 0;font-size:11.5px;opacity:.7}
.nl-p a{color:inherit;border-bottom:1px solid currentColor}
.nl-compact .nl-n{display:none}

/* On a light background the field needs the opposite treatment. */
.sec.white .nl-f input[type=email],.nl-light .nl-f input[type=email]{
  color:var(--ink);background:#fff;border-color:var(--hair)}
.sec.white .nl-f input[type=email]::placeholder,.nl-light .nl-f input[type=email]::placeholder{color:var(--grey)}

/* The drawer sits outside .site, so it inherits none of the body typography that
   .site sets. Declared here rather than moving it back inside, because inside a
   container-type element a fixed drawer is sized against the page, not the viewport. */
.drawer{font-family:var(--body);font-weight:300;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
.drawer a{color:#fff;text-decoration:none}
.drawer a:hover{color:#fff}
.drawer .dlist a{text-decoration:none}
.drawer *,.drawer *::before,.drawer *::after{box-sizing:border-box}

/* Nothing may push the page sideways on mobile. */
html,body{overflow-x:clip}

/* ===== MOBILE FIXES =====
   Appended last deliberately: these must win over both the design's original
   drawer illustration styles and the component rules above. */

/* 1. Drawer text. The drawer sits outside .site, so `.site a{color:inherit}` never
      reaches it and links fell back to the browser's default link colour. */
.drawer,
.drawer .dlist a,
.drawer .dsub-in a,
.drawer .dtop,
.drawer .dfoot,
.drawer .dttl{color:#fff}
.drawer .dlist a,
.drawer .dsub-in a{color:#fff !important}
.drawer .dlist a i{color:var(--bronze);opacity:1}
.drawer .dsearch input[type=search]{color:#fff}

/* 2. Destination cards. At <=760px .g4 becomes a horizontal scroller, which is the
      design's intent, but it carried no inline padding so the first card sat flush
      against the screen edge. The later 640px rule set grid-template-columns, which
      does nothing to a flex container, so it never took effect either. */
@media (max-width:760px){
  .wrap > .g4{
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
    scroll-padding-inline:var(--gut);
    padding-bottom:4px;
  }
  .wrap > .g4 > *{flex:0 0 78%;scroll-snap-align:start}
  .wrap > .g4::-webkit-scrollbar{display:none}
  .wrap > .g4{scrollbar-width:none}
}

/* 3. Hero scrim. Two overlapping gradients — the existing .veil plus the .v layer I
      added for the mobile copy fix — stacked into a heavy black wash. The veil
      alone carries enough contrast. */
@media (max-width:760px){
  .hero .v{background:linear-gradient(180deg,rgba(14,32,36,0) 0%,rgba(14,32,36,.10) 55%,rgba(14,32,36,.34) 100%)}
  .hero .veil{height:66%;
    background:linear-gradient(180deg,rgba(14,32,36,0) 0%,rgba(14,32,36,.30) 45%,rgba(14,32,36,.74) 100%)}
}

/* ===== MOBILE HERO — restore the design's portrait treatment =====
   At <=760px the design puts the hero image in flow as a 3:3.4 portrait block,
   with the copy overlaid on its lower part. My height:100% compensating rule for
   the image-sizing fix lives in a max-width:1080px query, so it also landed here
   and overrode that — leaving the image the wrong height and the veil drawing a
   hard grey edge across the gap. Scoped back out. */
@media (max-width:760px){
  .site .hero > img.im,
  .site .hero > .im{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    aspect-ratio:3/3.4;
    max-height:none;
    object-fit:cover;
    display:block;
  }

  /* The hero is then as tall as its image, not a fixed box. */
  /* .home .hero (0,2,0) beats a bare .hero (0,1,0), so the homepage kept a 560px
     minimum while its portrait image is ~442px tall on a 390px screen — leaving a
     band of empty background under the photo with the veil drawn across it. */
  /* Height comes from the image, which is a 3:3.4 portrait — about 113vw. The
     floor below is deliberately smaller than that, so it never creates a gap when
     an image is present, but still gives a usable hero on pages that pass none
     (the editorials index, search, 404), which otherwise collapsed to nothing. */
  .hero,.hero.short,.hero.inner,
  .home .hero,.home .hero.short{height:auto;min-height:72vw;max-height:none}
  .hero:has(> img.im){min-height:0}

  /* Copy sits over the lower part of the photograph. */
  .hero-in{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gut) 24px}

  /* One scrim only, fading in from nothing so there is no visible edge. */
  .hero .veil{top:auto;bottom:0;height:60%;
    background:linear-gradient(180deg,rgba(14,32,36,0) 0%,rgba(14,32,36,.34) 48%,rgba(14,32,36,.78) 100%)}
  .hero .v{background:none}
}

/* Drawer search bar. The design's static drawer illustration styled this as a light
   card — background:var(--sand) — and my later rule set padding but not background,
   so the cream bar survived into the real drawer. */
.drawer .dsearch{background:transparent;color:#fff;padding:14px var(--gut)}
.drawer .dtop{background:transparent;border-bottom:1px solid rgba(255,255,255,.16)}
.drawer{border:0;border-radius:0}

/* ===== HERO SUBTITLE AND CTA =====
   One block, repositioned rather than duplicated. Desktop: over the foot of the
   image as before. Mobile: in flow on sand, as the design has it — which is what
   stops the copy competing with the photograph and removes the need for a heavy
   scrim over the lower half. */
.hero-wrap{position:relative}

/* display:block is required here. The design's base stylesheet sets
   .hero-below{display:none} globally and only turns it on inside the narrow
   container query, so without this the subtitle and the Request a quote button
   are absent from every desktop page. Stacking was never the problem. */
.hero-below{display:block;position:absolute;left:0;right:0;bottom:0;z-index:6;
  background:none;pointer-events:none}
.hero-below-in{max-width:var(--max);margin:0 auto;width:100%;
  padding:0 var(--gut) clamp(46px,5cqi,72px)}
.hero-below .hsub{color:#fff;max-width:46ch;margin:0 0 18px;
  font-size:clamp(15px,1.5cqi,18px);line-height:1.55;
  text-shadow:0 1px 3px rgba(10,26,30,.6)}
.hero-below .acts{display:flex;gap:10px;flex-wrap:wrap;pointer-events:auto}

@media (max-width:760px){
  /* In flow, on sand, beneath the photograph. */
  .hero-below{position:static;background:var(--sand);pointer-events:auto}
  .hero-below-in{padding:22px var(--gut) 26px}
  .hero-below .hsub{color:var(--ink);text-shadow:none;max-width:none;
    font-size:15.5px;line-height:1.6;margin-bottom:16px}
  .hero-below .acts .btn{width:100%;justify-content:center;min-height:50px}

  /* With the copy out of the image, the scrim only needs to protect the H1. */
  .hero .veil{top:auto;bottom:0;height:42%;
    background:linear-gradient(180deg,rgba(14,32,36,0) 0%,rgba(14,32,36,.30) 55%,rgba(14,32,36,.62) 100%)}
  .hero-in{padding-bottom:20px}
  .hero-in h1{max-width:none}
}

/* ===== MOBILE HERO SCRIM — final approach =====
   The veil is an absolutely positioned box sized with a percentage height. Since
   the mobile hero is height:auto, that percentage has no definite parent height to
   resolve against, so the box lands somewhere arbitrary and draws a hard edge
   across the photograph. Three attempts at re-tuning the gradient could not fix
   that, because the problem was the box, not the colours.

   So on mobile the scrim is dropped entirely and the gradient is carried by the
   element that actually holds the heading. It is then sized by its own content and
   padding, and the fade always sits exactly behind the text. */
@media (max-width:760px){
  .hero .veil,
  .hero .v{display:none !important}

  .hero-in{
    background:linear-gradient(to top,
      rgba(14,32,36,.86) 0%,
      rgba(14,32,36,.66) 42%,
      rgba(14,32,36,.28) 74%,
      rgba(14,32,36,0) 100%);
    padding-top:clamp(56px,16vw,96px);
    padding-bottom:22px;
  }
}

/* ===== EDITORIAL INDEX — destination chips ===== */
.chipfilter{width:min(320px,100%);padding:10px 13px;margin:0 0 14px;font-size:14.5px;
  color:var(--ink);background:#fff;border:1px solid var(--hair);border-radius:999px;outline:none}
.chipfilter:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(43,94,104,.12)}
.chips .chip b{font-weight:400;margin-left:6px;font-size:11.5px;color:var(--grey)}
.chips .chip.on b,.chips .chip:hover b{color:inherit;opacity:.8}
.chips .cmore{display:none}
.chips .cmore.on,.chips .cmore.shown{display:inline-flex}
.chips .chip-more{cursor:pointer;border-style:dashed;background:none}
.chips .chip[hidden]{display:none}

/* A hero with no image needs a solid ground for the copy, not a gradient over
   nothing. */
@media (max-width:760px){
  .hero:not(:has(> img.im)){background:var(--teal-deep)}
  .hero:not(:has(> img.im)) .hero-in{background:none;padding-top:34px}
  .hero:not(:has(> img.im)) .hero-in h1{color:#fff}
}

/* Destination chips: one consistent resting state. Only the active filter is
   filled — previously any chip carrying .on from other contexts read as selected. */
.chips .chip{background:#fff;border:1px solid var(--hair);color:var(--ink)}
.chips .chip:hover{border-color:var(--teal);color:var(--teal)}
.chips .chip.on{background:var(--teal);border-color:var(--teal);color:#fff}
.chips .chip.on b{color:rgba(255,255,255,.8)}

/* ===== DESKTOP HERO — room for the heading =====
   With the subtitle and CTA moved into .hero-below, both that block and .hero-in
   are anchored to the bottom of the hero, so they overlapped and the H1 was forced
   to the very bottom edge — below the fold on a laptop.

   .hero-in now reserves exactly the height .hero-below occupies (measured in JS,
   same approach as the sticky header offset), and the hero is capped against the
   viewport as well as in pixels so the heading is always visible on landing. */
@media (min-width:761px){
  .hero{max-height:min(680px,68vh)}
  .hero.short{max-height:min(620px,64vh)}
  .hero.inner{max-height:min(540px,58vh)}
  /* .home only. This applied to every hero, so every inner page reserved room
     for a block that is not on top of it. */
  .home .hero-in{padding-bottom:calc(var(--hero-below-h,var(--hero-below-fallback)) + 14px)}
}

/* Article standfirst: the subtitle, set as the opening paragraph rather than
   overlaid on the hero, matching the live site. */
.art .standfirst{font-family:var(--head);font-weight:300;
  font-size:clamp(17px,1.7cqi,21px);line-height:1.55;color:var(--teal);
  margin:0 0 22px;padding-bottom:20px;border-bottom:1px solid var(--hair)}

/* ===== IN-ARTICLE TRIP CARDS — containment =====
   .shot is a <span>. Setting position:relative and height:100% on an inline
   element gives neither a reliable containing block nor a height, so the
   absolutely positioned image inside it escaped the 200px column and covered the
   card's text. It has to be a block first. */
.art .tcard{overflow:hidden;align-items:stretch}
.art .tcard .shot{display:block;position:relative;overflow:hidden;
  width:100%;height:100%;min-height:160px;margin:0}
.art .tcard .shot img,
.art .tcard .shot .im{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;display:block}
.art .tcard .b{min-width:0}
.art .tcard h3,.art .tcard p{overflow-wrap:anywhere}

/* Any image inside article content stays inside it. */
.art img{max-width:100%;height:auto}
.art .tcard img{height:100%}

/* ===== HERO SUBTITLE BLOCK — stacking =====
   .hero-below sits at z-index 3 while the homepage search card is 5, so the
   subtitle and CTA were being painted underneath it and the heading was left
   pressed against the card. Raise it above, and give the homepage hero enough
   room below the heading for the block plus the card's overlap. */
@media (min-width:761px){
  .hero-below{z-index:6}
  .home .hero-in{padding-bottom:calc(var(--hero-below-h,var(--hero-below-fallback)) + 34px)}
  .home .hero-below{bottom:14px}
}

/* ===== .button IN CONTENT =====
   Editors use class="button" for calls to action throughout the site — the
   honeymoon links in editorials, and the calendar link on the group tours page.
   It was inheriting plain link styling, so every one of those read as body text. */
.art a.button,
.lbody a.button,
.cintro a.button,
.vt-panel a.button,
.acc a.button,
a.button{
  display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:13px 26px;margin:6px 0;
  font-family:var(--body);font-weight:400;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  color:#fff;background:var(--bronze);border:1px solid var(--bronze);
  border-radius:999px;transition:background .2s,border-color .2s;
  overflow-wrap:normal;
}
.art a.button:hover,.lbody a.button:hover,a.button:hover{
  background:var(--bronze-deep);border-color:var(--bronze-deep);color:#fff}
.art a.button::after,a.button::after{content:"\2192";font-size:14px;line-height:1}

/* A second .button next to the first should not collide. */
.art a.button + a.button{margin-left:8px}

/* Inside a teal band it needs the reverse treatment. */
.faqs a.button,.enqb a.button,.band a.button{
  background:#fff;border-color:#fff;color:var(--teal)}
.faqs a.button:hover,.enqb a.button:hover,.band a.button:hover{
  background:var(--sand);border-color:var(--sand);color:var(--teal)}

/* ===== ENQUIRY VALIDATION TIMING =====
   CF7 validates the whole form on every field change, so choosing a budget first
   immediately flagged Destination as missing — telling someone off for not having
   done something yet. Messages and invalid styling are held back until a submit
   has actually been attempted. */
.eform .wpcf7-form:not(.ooo-tried) .wpcf7-not-valid-tip,
form:not(.ooo-tried) .eform .wpcf7-not-valid-tip{display:none}
form:not(.ooo-tried) .eform .wpcf7-not-valid{border-color:var(--hair)}
form:not(.ooo-tried) .eform .wpcf7-not-valid:focus{border-color:var(--teal)}
form.ooo-tried .eform .wpcf7-not-valid{border-color:#b3261e}

/* Embedded video from oEmbed, wherever it appears in content. */
.art iframe,.vt-panel iframe,.acc iframe,.cintro iframe,.lbody iframe,.main iframe{
  max-width:100%;aspect-ratio:16/9;height:auto;width:100%;border:0;border-radius:var(--r);display:block;margin:22px 0}
.wp-embed-aspect-16-9 .wp-block-embed__wrapper,
.wp-video,.wp-video-shortcode{max-width:100%}

/* ===== COUNTRY SUB-NAV — regions dropdown =====
   Was hover-only, and hidden outright below the desktop breakpoint, so on a phone
   tapping Regions did nothing at all. */
.snav .has .dropbtn{display:inline-flex;align-items:center;gap:6px;background:none;
  border:0;cursor:pointer;font-family:var(--body);font-size:14.5px;color:var(--grey);
  padding:20px clamp(14px,1.9cqi,26px);white-space:nowrap}
.snav .has .dropbtn i{font-style:normal;font-size:10px;transition:transform .2s}
.snav .has .dropbtn[aria-expanded="true"]{color:var(--teal)}
.snav .has .dropbtn[aria-expanded="true"] i{transform:rotate(180deg)}
.snav .has.open > .dropbtn{background:rgba(43,94,104,.05)}

@media (min-width:1081px){
  .snav .has.open .drop{opacity:1;visibility:visible;display:block}
}

@media (max-width:1080px){
  /* In flow beneath the bar rather than an overlay, which has nowhere to go on a
     narrow screen. */
  .snav{position:relative}
  .snav .has{position:static}
  .snav .drop{display:none;position:absolute;left:0;right:0;top:100%;
    opacity:1;visibility:visible;background:var(--white);
    border-top:1px solid var(--hair);box-shadow:0 18px 32px -20px rgba(0,0,0,.3);
    max-height:60vh;overflow-y:auto;z-index:40}
  .snav .has.open .drop{display:block}
  .snav .drop a{padding:14px var(--gut);white-space:normal}
}

/* ===== SUB-NAV ON MOBILE =====
   Sticky works on desktop where it sits neatly under the header. On a phone it
   overlays whatever is scrolling past, so a white tab bar appears to cut the
   reassurance band in half. It scrolls with the page instead. */
@media (max-width:1080px){
  .snav{position:static;top:auto}
}

/* ===== HORIZONTAL CARD SCROLLER — homepage only =====
   Swiping through eight destinations is pleasant. Swiping through a hundred hotels
   is not, and that is what an index page can hold, so the scroller is limited to
   the homepage and index pages keep a normal grid. */
@media (max-width:760px){
  .wrap > .g4{
    margin-inline:0;
    padding-inline:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .wrap > .g4 > *{flex:none}

  .home .wrap > .g4{
    display:flex;
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
    scroll-padding-inline:var(--gut);
    gap:12px;
  }
  .home .wrap > .g4 > *{flex:0 0 78%;scroll-snap-align:start}
}

/* ===== BREADCRUMBS =====
   The full path is useful on desktop — Home > Destinations > Europe > Greece — and
   it also matches the structured data. On a phone it wraps to two or three lines
   over the hero image, so the middle is collapsed to an ellipsis and the last two
   steps are kept, which is the part that tells you where you are. */
.bc{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bc s{text-decoration:none;opacity:.6}

@media (max-width:760px){
  .bc{flex-wrap:nowrap;overflow:hidden;font-size:12.5px;gap:4px}

  /* Separators are markup siblings, so hiding by position dropped the one between
     the first and last visible steps — "Home Blog" with nothing between them.
     Hide them all and draw the separator on the visible links instead, which ties
     it to what is actually shown rather than to sibling position. */
  .bc > s{display:none}
  .bc > a,.bc > span{display:none}
  .bc > a:first-child,
  .bc > a:nth-last-of-type(-n+2),
  .bc > span:nth-last-of-type(-n+2){display:inline-flex;align-items:center;gap:4px}

  .bc > a:not(:first-child)::before,
  .bc > span:not(:first-child)::before{content:"\203A";opacity:.55;margin-right:2px}
  /* No trailing mark here: the link after it draws its own leading separator, and
     both together rendered "Home … › › Europe". */
}

/* ===== SHORT HERO — long editorial titles =====
   Editorial titles run to three lines. In a fixed-height short hero with the copy
   bottom-aligned, that content overflows upward and sits level with the
   breadcrumb, so the trail and the eyebrow appear side by side. Smaller type on
   this variant, and the trail gets a reserved band it cannot be crowded out of. */
/* Editorial titles in the same family as everything else.
   Blogs and travel guides were capped at 44px while moments, hotels and trips ran
   to 68px — so the pages with the longest titles got the smallest type, which is
   exactly backwards. Slightly under the others because an editorial headline is a
   sentence rather than a name, and a wider measure so it wraps to two lines
   rather than four. */
.hero.short .hero-in h1{font-size:clamp(32px,4.2cqi,60px);max-width:24ch}
.hero.short .hero-in{padding-top:clamp(64px,7cqi,92px)}

/* The title sits the same distance off the foot of the hero on every template.
   A moment has a standfirst and no facts card, a hotel and a trip have a facts
   card and no standfirst, and each was setting its own bottom padding — so the
   headline landed at a different height depending on which page you were on. */
/* No reservation on an inner page.
   --hero-below-h exists because the homepage overlays its standfirst and button
   on the hero. Everywhere else the block is position:static and sits under the
   hero on sand — so reserving its height inside .hero-in pushed the headline up
   by the height of a block that was never on top of it. That is why the moment
   title would not move down however the padding was adjusted. */
.hero.inner .hero-in,.hero.short .hero-in{padding-bottom:clamp(40px,4.4cqi,64px)}
.home .hero-in{padding-bottom:calc(var(--hero-below-h,var(--hero-below-fallback)) + 34px)}
.hero .bc{z-index:6}

@media (min-width:761px){
  /* Grow for a long title rather than clipping, still capped against the fold. */
  /**
   * min-height matches what .hero.inner resolves to.
   *
   * This was a 420px floor, and because it sits later in the file than the 66cqi
   * rule above it, it won — so an article hero collapsed to about 420px while a
   * moment, a hotel and a trip all sat around 520. That is why the blog still
   * looked shallow after its type was fixed.
   */
  .hero.short{height:auto;min-height:min(520px,58vh);max-height:min(620px,72vh)}
}

/* The homepage hero is sized in JS against the real header and search-card
   heights (see heroFit). This is the pre-script value, chosen so the card is
   visible on a typical laptop even before the measurement runs. */
@media (min-width:761px){
  .home .hero{max-height:min(680px,58vh)}
}

/* At-a-glance lead copy, now that it renders as markup rather than plain text. */
.lead-copy p{font-size:clamp(16.5px,1.7cqi,19.5px);line-height:1.6;margin:0 0 16px}
.lead-copy p:last-child{margin-bottom:0}
.lead-copy a{color:var(--teal);border-bottom:1px solid rgba(43,94,104,.35)}
.lead-copy a:hover{color:var(--bronze);border-bottom-color:var(--bronze)}
.lead-copy ul,.lead-copy ol{margin:0 0 16px;padding-left:20px}

/* Side-list variants, driven by side_list_type. */
.picks-checklist{counter-reset:none}
.picks-checklist li::before{content:"\2713";color:var(--bronze);font-size:13px;
  counter-increment:none}
.picks-text li::before{content:"";display:none}
.picks-text li{grid-template-columns:1fr;padding-left:0}
.picks-text li a{border-bottom:0;color:var(--ink)}
.picks-text li a:hover{color:var(--teal)}
.lede p{font-family:var(--head);font-weight:300;font-size:clamp(16.5px,1.5cqi,19px);
  line-height:1.55;margin:0 0 14px}
.lede p:last-child{margin-bottom:0}
.lede a{color:var(--teal);border-bottom:1px solid rgba(43,94,104,.35)}

/* ===== TOUR CALENDAR ===== */
.cal-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cal-filters .sel{min-width:190px;padding:11px 13px;font-size:14.5px;
  border:1px solid var(--hair);border-radius:8px;background:#fff;color:var(--ink)}
.cal-count{margin:0 0 0 auto;font-size:13px;color:var(--grey)}

.cal-h{font-size:clamp(19px,1.9cqi,24px);margin:0 0 16px;font-weight:300;color:var(--teal)}
.cal-rows{display:grid;gap:10px}
.cal-row{display:grid;grid-template-columns:72px 92px minmax(0,1fr) auto auto;gap:18px;
  align-items:center;padding:14px 18px;background:var(--white);
  border:1px solid var(--hair);border-radius:var(--r);transition:border-color .2s,transform .2s}
.cal-row:hover{border-color:var(--teal);transform:translateY(-1px)}

.cal-date{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--sand);border-radius:10px;padding:8px 0}
.cal-date b{font-family:var(--head);font-weight:400;font-size:21px;line-height:1;color:var(--teal)}
.cal-date s{text-decoration:none;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey);margin-top:3px}

.cal-body{min-width:0}
.cal-body strong{display:block;font-family:var(--head);font-weight:400;font-size:16.5px;
  line-height:1.3;color:var(--ink)}
.cal-row:hover .cal-body strong{color:var(--teal)}
.cal-dest{display:block;font-size:12.5px;color:var(--grey);margin-top:3px}

.cal-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.cal-dur{font-size:12.5px;color:var(--grey)}
.cal-price{font-family:var(--head);font-weight:400;font-size:16px;color:var(--ink)}
.cal-cta{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--bronze);white-space:nowrap}

.cal-month[hidden]{display:none}
.cal-row[hidden]{display:none}

@media (max-width:760px){
  .cal-filters .sel{flex:1 1 100%;min-width:0}
  .cal-count{margin:4px 0 0}
  .cal-row{grid-template-columns:56px 64px minmax(0,1fr);gap:12px;padding:12px 14px}
  .cal-shot{height:52px}
  .cal-meta{grid-column:2;flex-direction:row;align-items:baseline;gap:10px;
    justify-content:flex-start;margin-top:4px}
  .cal-cta{grid-column:2;margin-top:6px}
  .cal-date b{font-size:18px}
}

/* ===== HERO CTA — stop overlaying on inner pages =====
   Overlaying the subtitle and button on the image works on the homepage, where the
   hero is tall and the H1 is one controlled line. On inner pages the H1 runs to two
   or three lines inside a shorter hero, so the absolutely positioned block lands on
   top of the heading — which is what the Request a quote button is doing on
   inspiration, hotel and itinerary pages.
   Reserving space could not fix it: the content was already taller than the box.
   So only the homepage overlays; everywhere else the block sits below the image
   where it cannot collide with anything. */
@media (min-width:761px){
  .hero-below{position:static;background:var(--sand);pointer-events:auto}
  .hero-below-in{padding:22px var(--gut) 24px}
  .hero-below .hsub{color:var(--ink);text-shadow:none;max-width:70ch;margin-bottom:16px}

  /* The homepage keeps the designed overlay. */
  .home .hero-below{position:absolute;left:0;right:0;bottom:0;background:none;
    pointer-events:none;z-index:6}
  .home .hero-below-in{padding:0 var(--gut) clamp(46px,5cqi,72px)}
  .home .hero-below .hsub{color:#fff;text-shadow:0 1px 3px rgba(10,26,30,.6);max-width:46ch}
  .home .hero-below .acts{pointer-events:auto}

  /* With nothing overlaid, inner heroes no longer need to reserve space. */
  .hero-in{padding-bottom:clamp(30px,3.4cqi,48px)}
  .home .hero-in{padding-bottom:calc(var(--hero-below-h,var(--hero-below-fallback)) + 34px)}
}

/* A hero-below with no subtitle is just a button; keep it tight. */
.hero-below.no-sub .hero-below-in{padding-top:16px;padding-bottom:18px}

/* ===== IMAGE FILL — every aspect-ratio container =====
   Removing the blanket height:100% on .im (it was distorting editorial images) left
   each component to declare its own. That list was incomplete: .gal5, the accordion
   image, day-by-day shots, the specialist and team portraits and several others were
   missed, so their images sat at natural height with the container's background
   showing beneath — the grey band under gallery and month images.
   These are containers that set an aspect-ratio, so their image is meant to fill. */
.site .gal5 a img.im,
.site .gal5 .g-lead img.im,
.site .acc .ab.accimg img.im,
.site .imgacc .ab .shot img.im,
.site .day .shot img.im,
.site .day-extras img,
.site .ex .port img.im,
.site .tm .port img.im,
.site .specintro .port img.im,
.site .ifeat > img.im,
.site .l23 > img.im,
.site .l50 > img.im,
.site .lead-story > img.im,
.site .sidecards img.im,
.site .supcard > img.im,
.site .tcard > img.im,
.site .inline-card img.im,
.site .vid img.im,
.site .cintro-im{height:100%;object-fit:cover}

/* Containers that were relying on the image to give them height keep working. */
.site .gal5 a,.site .gal .a,.site .gal .b,.site .day .shot,
.site .imgacc .ab .shot,.site .acc .ab.accimg{overflow:hidden;display:block}

/* The height change when compacting is what the sub-nav offset tracks; transition
   it so the shift reads as motion rather than a jump. */
.hdr,.hdr-in{transition:box-shadow .25s ease,padding .2s ease}

/* ===== INSPIRATION — spacing and layout =====
   The gap under the reassurance band came from a section that stacks its own top
   padding on the band's bottom padding, then an empty contents row on top of that.
   Collapse the first section's padding, and give the contents row its own tight
   rhythm rather than a full section's worth. */
.sec.tight{padding-block:clamp(18px,2cqi,28px)}
/* The band's class is .reas — see template-parts/components/reassurance.php.
   This rule was written against .reassure, which exists nowhere in the theme, so
   it has never matched a single element and the gap it was added to close was
   still there. */
.reas + .sec,.reas + section{padding-top:clamp(20px,2.4cqi,34px)}

/* And the second half of the same gap: a tight contents row still stacks its own
   bottom padding on the next section's full top padding, which at a wide viewport
   is 28px on top of 138px. Pull the section that follows the contents up. */
.toc-sec + .sec,.toc-sec + section{padding-top:clamp(24px,2.8cqi,46px)}
.toc{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;
  padding:16px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.toc .lbl{flex:0 0 auto;margin:0}
.toc ol{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0;list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;font-size:14.5px}
.toc li::before{content:counter(toc,decimal-leading-zero);color:var(--bronze);
  font-size:11.5px;margin-right:6px}

/* The lead tile in a five-item band. */
.gal5 .seotile.g-lead{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gal5 .seotile{aspect-ratio:4/3}

/* Text-only content sections: stop them running the full width with the image
   stranded beneath. Copy takes a readable column and the image sits beside it. */
.sec .wrap:not(.lsb) > .main + .imgslide,
.wrap > .imgslide{margin-top:clamp(20px,2.4cqi,32px)}
/* The copy column is set by its own measure rather than a share of the grid.
   .site p caps at 60ch, so a 1.1fr column left roughly 70px of its width
   permanently unusable and took that width away from the picture beside it.
   Sizing the text column in ch and giving the remainder to the aside makes the
   image substantially larger at every viewport without the copy changing at all. */
.insp-split{display:grid;
  grid-template-columns:minmax(0,clamp(340px,58ch,560px)) minmax(0,1fr);
  gap:clamp(24px,3.4cqi,56px);align-items:start}

/* Sticky moved from the picture to a wrapper, so the picture and the enquiry
   prompt beneath it travel down the page as one unit. */
.insp-aside{position:sticky;top:calc(var(--hdr-h,112px) + 20px)}
/* relative, not static.
   .imgslide holds an absolutely positioned caption — the label and heading over
   the gradient. Forcing it static took away their containing block, so they
   resolved against the page instead and painted a full-width band of "Greece /
   Athens" straight across the article text. The static came from when .imgslide
   itself was the sticky element; the sticky now lives on .insp-aside, so there is
   nothing left for it to undo. */
.insp-split .imgslide{margin-top:0;position:relative}

/* Pin the shape. Without this the card is whatever proportion the served file
   happens to be, which differs page to page. 4:3 is the ratio the inline cards,
   side cards, accordion images and gallery already use.
   Specificity: .site .imgslide img.im up the file is (0,3,1) and sets
   height:100%, so a bare .insp-split .imgslide .im at (0,3,0) would lose. This
   selector is (0,4,1). */
.site .insp-split .imgslide img.im{aspect-ratio:4/3;height:auto;object-fit:cover}

/* Alternate the side down the page so six of these do not drum. */
.insp-split.rev{grid-template-columns:minmax(0,1fr) minmax(0,clamp(340px,58ch,560px))}
.insp-split.rev .col{order:2}
.insp-split.rev .insp-aside{order:1}

@container (max-width:900px){
  .insp-split,.insp-split.rev{grid-template-columns:1fr}
  .insp-aside{position:static}
  .insp-split.rev .col,.insp-split.rev .insp-aside{order:0}
}

/* ===== TRIP CARD — fill the space =====
   Summaries were trimmed to a fixed word count, so a short one left a gap while
   the card beside it filled. Clamp by lines instead: every card uses the same
   number of lines, and the text runs to the end of them. */
.tcard .b{display:flex;flex-direction:column;height:100%}
.tcard .sum{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:14px}
.tcard .pr{margin-top:auto}
.g3 > .tcard,.g3 > div > .tcard,.g4 > .tcard,.g4 > div > .tcard{height:100%}
.g3,.g4{align-items:stretch}

@container (max-width:760px){
  .tcard .sum{-webkit-line-clamp:3}
}

/* ===== FOOTER LOGO =====
   Was inheriting a square-ish box; the mark is wide, so it was being squashed. */
.foot .flogo,.foot-logo,.foot img.logo{width:auto;max-width:210px;height:38px;
  object-fit:contain;display:block}

/* ===== LEGAL CONTENTS =====
   The generated 1..12 sat beside real clause numbers in the headings ("27.
   Financial Protection"), so the column read as two competing numbering systems.
   Dropped: the headings carry their own numbering where it matters. */
/* The number was never on the li — .lnav a::before carries it, 1600 lines up.
   So li::before{content:none} removed nothing, while counter-increment:none stopped
   the counter advancing, leaving counter(l) stuck at its reset value and printing
   "0" in front of every entry. Same shape as the "01 00" bug on the inspiration
   contents: a rule written to switch a counter off, pointed at the wrong element. */
.legal .lnav ol{counter-reset:none;list-style:none}
.legal .lnav li{grid-template-columns:1fr;padding-left:0}
.legal .lnav a::before{content:none}
.legal .lnav a{grid-template-columns:1fr;gap:0}
.legal .lnav li a{display:block;padding:7px 0;border-bottom:1px solid transparent}
.legal .lnav li a:hover{border-bottom-color:var(--bronze)}

/* ===== LEGACY IN-CONTENT BLOCKS =====
   Sections like "About Out Of Office" come from the post's own copy and carry no
   rhythm of their own once the builder wrappers are stripped, so the heading sat
   hard against the body. */
.art h4{margin:clamp(26px,3cqi,40px) 0 12px;font-family:var(--head);font-weight:400;
  font-size:17px;color:var(--teal)}
.art h4 + p,.art h4 + em,.art h4 + i{margin-top:0}
.art p em,.art p i{color:var(--grey)}

/* A bare "Trustpilot" link in legacy content reads as a stray word. The real widget
   is rendered by the trustpilot component; this at least makes the inline mention
   look deliberate where the old copy still carries one. */
.art a[href*="trustpilot"]{display:inline-flex;align-items:center;gap:6px;
  color:var(--teal);border-bottom:1px solid rgba(43,94,104,.35)}
.art a[href*="trustpilot"]::before{content:"\2605";color:#00B67A;font-size:13px}
.art a[href*="trustpilot"]:hover{color:var(--bronze);border-bottom-color:var(--bronze)}

/* ===== TOUR CALENDAR — opening rhythm ===== */
.cal-intro{max-width:66ch}
.cal-intro p{margin:0 0 14px;line-height:1.7}
.cal-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(26px,3.6cqi,56px);align-items:start}
.cal-side{position:sticky;top:calc(var(--hdr-h,112px) + 20px)}

@container (max-width:1000px){
  .cal-layout{grid-template-columns:1fr}
  .cal-side{position:static}
}

/* ===== ABOUT PAGE — reading width =====
   The intro was rendering in a narrow column with the rest of the page around it,
   which reads as untouched builder output rather than a designed page. */
.about-intro{max-width:74ch;margin-inline:auto}
.about-intro p{font-size:clamp(16px,1.6cqi,18.5px);line-height:1.72;margin:0 0 18px}
.about-intro p:first-of-type{font-family:var(--head);font-weight:300;
  font-size:clamp(18px,1.9cqi,23px);line-height:1.5;color:var(--teal)}
.about-intro h2,.about-intro h3{margin:clamp(28px,3cqi,42px) 0 12px}
.about-intro img{border-radius:var(--r);margin:22px 0}

/* ===== ENQUIRY PROMPTS =====
   Four treatments so a page can ask more than once without looking like it is
   asking the same way twice. Copy rotates from the pool in inc/cta.php; every
   one of them points at #ooo-enquire. */
.ctab .q{font-family:var(--head);font-weight:300;color:var(--teal);line-height:1.34}
.sec.ctas{padding-block:clamp(30px,3.6cqi,58px)}

/* The second clause of a headline. DND sets it in italic; the theme has no
   Arpona italic file, so a font-style:italic here would be a browser-synthesised
   oblique — a slanted roman, which on a display serif looks like a mistake. The
   theme's own device for the same job is .site h2 em, normal weight in bronze,
   so the prompts follow that. Swap to italic the day an Arpona Italic woff2 is
   licensed and added to assets/fonts.
   .site h2 em up the file is (0,1,2); this is (0,2,2) and wins. */
.ctab .q em{font-style:normal;color:var(--bronze-deep)}
.site .cta-panel h2 em{font-style:normal;color:var(--bronze-soft)}

/* Even out the lines rather than filling the first and leaving two words on the
   second. Rewriting the one line that did it only fixes that line; the pool is
   meant to be edited, and any replacement can orphan its own tail at some width.
   text-wrap:balance is the fix that holds for copy nobody has written yet.
   Unsupported browsers ignore it and wrap as they do now. */
.ctab .q,.cta-panel h2{text-wrap:balance}

/* aside — the compact card under the picture in the sticky column */
.cta-aside{margin-top:clamp(16px,1.8cqi,24px);background:var(--white);
  border:1px solid var(--hair);border-radius:var(--r);padding:clamp(20px,2.2cqi,30px)}
.sec.white .cta-aside{background:var(--sand)}
.cta-aside .q{font-size:clamp(19px,1.62cqi,23px);max-width:26ch;margin:9px 0 20px}
.cta-aside .btn{width:100%}

/* strip — quiet full-width row between two sections */
.cta-strip{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(22px,2.6cqi,34px) clamp(22px,3cqi,44px);display:flex;align-items:center;
  justify-content:space-between;gap:clamp(20px,2.6cqi,44px);flex-wrap:wrap}
.sec.white .cta-strip{background:var(--sand)}
.cta-strip .cta-t{min-width:0}
.cta-strip .q{font-size:clamp(20px,2cqi,28px);max-width:34ch;margin:7px 0 0}
.cta-strip .btn{flex:0 0 auto}

/* panel — the heavy one. At most one per page; see ooo_cta_slot(). */
.cta-panel{position:relative;overflow:hidden;background:var(--teal-deep);color:#fff;
  border-radius:var(--r-lg);padding:clamp(40px,5cqi,76px) clamp(26px,3.6cqi,60px);
  text-align:center}
.cta-panel .cta-bg{position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center}
.cta-panel .cta-v{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(9,28,31,.66) 0%,rgba(9,28,31,.58) 46%,rgba(9,28,31,.74) 100%)}

/* The brand mark bleeds off both edges rather than sitting inside them, clipped
   by .oc. At 132% of the panel only the middle of the wordmark is visible, which
   is the intended treatment — a contained mark reads as a logo dropped on top. */
.cta-panel .oc{z-index:2}
.cta-panel .om{width:min(146%,1650px);left:50%;top:50%;transform:translate(-50%,-50%);
  background:#fff;opacity:.12}

/* The mark drifts as the panel crosses the screen, so the block without a
   photograph still has depth.
   This cannot be background-attachment, which is how the photograph version
   works: the mark is a mask over a flat colour, and a flat colour has nothing to
   hold still against. The element itself has to move, which means a timeline.
   Scroll-driven CSS animation rather than a scroll listener: no JavaScript, no
   work on the main thread, and browsers without it simply show the mark at rest,
   which is exactly where it is today. The travel is deliberately small — 8% of
   the mark's own height. On a photograph parallax reads as depth because the
   detail shifts against a fixed frame; on a flat wordmark, anything faster reads
   as a logo sliding around. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .cta-panel{view-timeline-name:--ooo-cta-panel;view-timeline-axis:block}
    .cta-panel .om{animation:ooo-mark-drift linear both;
      animation-timeline:--ooo-cta-panel;animation-range:entry 0% exit 100%}
  }
}

@keyframes ooo-mark-drift{
  from{transform:translate(-50%,-46%)}
  to{transform:translate(-50%,-54%)}
}

/* The inset hairline, as on the DND band. */
.cta-panel::after{content:"";position:absolute;inset:clamp(8px,0.9cqi,13px);z-index:3;
  border:1px solid rgba(255,255,255,.34);border-radius:calc(var(--r-lg) - 6px);pointer-events:none}

.cta-panel .cta-in{position:relative;z-index:4;max-width:52ch;margin-inline:auto}
.cta-panel .lbl{color:var(--bronze-soft)}
.cta-panel h2{color:#fff;font-size:clamp(25px,2.7cqi,40px)}
.cta-panel .rule{background:rgba(255,255,255,.45);margin:22px auto}
.cta-panel p{color:rgba(255,255,255,.88);margin:0 auto 28px;max-width:48ch}
.cta-panel .cta-acts{justify-content:center}

/* Parallax hold. background-attachment is the version with no JavaScript and no
   scroll listener, but iOS ignores it and Android repaints badly, so it is asked
   for only on a device with a real pointer and only where motion is welcome.
   Everywhere else the photograph is simply a static cover image, which is the
   correct degradation rather than a broken effect. */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .cta-panel.has-img .cta-bg{background-attachment:fixed}
}

/* actions row — button, then the call route for anyone who would rather phone */
.cta-acts{display:flex;align-items:center;gap:clamp(16px,2.2cqi,32px);flex-wrap:wrap}
.cta-tel{display:block;line-height:1.35;text-align:left}
.cta-tel .lbl{font-size:13px}
.cta-tel a{font-family:var(--head);font-weight:300;font-size:clamp(17px,1.5cqi,20px);
  color:var(--teal);border-bottom:1px solid var(--bronze);padding-bottom:1px}
.cta-panel .cta-tel .lbl{color:rgba(255,255,255,.72)}
.cta-panel .cta-tel a{color:#fff;border-bottom-color:rgba(255,255,255,.5)}

/* inline — a rule-and-link prompt for the middle of a column of copy */
.cta-inline{border-top:1px solid rgba(194,145,110,.5);
  border-bottom:1px solid rgba(194,145,110,.5);padding:24px 0;margin:34px 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cta-inline .q{font-size:clamp(19px,1.9cqi,25px);max-width:28ch;margin:0}

@container (max-width:900px){
  /* The picture already divides the page here, so the prompt reduces to the one
     thing worth tapping. The line stays in the markup for the wider layouts.
     Both selectors are needed: .sec.white .cta-aside up the file is (0,3,0) and
     a bare .cta-aside at (0,1,0) would lose to it inside a white section, which
     left a sand block sitting behind the button. */
  .sec .cta-aside,.sec.white .cta-aside{
    background:none;border:0;padding:0;margin-top:clamp(16px,3vw,22px)}
  .cta-aside .lbl,.cta-aside .q{display:none}
  .cta-strip{display:block}
  .cta-strip .q{max-width:none}
  .cta-strip .cta-acts{margin-top:22px;gap:18px}
  .cta-strip .btn,.cta-panel .btn{width:100%}
  .cta-panel .cta-acts,.cta-tel{text-align:center;justify-content:center}
  .cta-tel{width:100%}
  .cta-inline{display:block}
  .cta-inline .tl{margin-top:14px}
}

/* A 4:3 picture plus its prompt is roughly 650px tall. On a short window that is
   taller than the space between the header and the fold, so sticky would pin it
   with its bottom clipped for the whole scroll. Below that height, let it scroll
   normally. Viewport height cannot be asked for in a container query, so this is
   a media query by design. */
@media (max-height:760px){
  .insp-aside{position:static}
}

/* ===== INSPIRATION INTRO SIDEBAR =====
   The intro copy runs to eight or nine paragraphs while the recommended-reading
   card is about 320px tall, so the card scrolled out of sight within the first
   screen and the column sat empty for the rest. Same treatment as the paired
   image: hold it while the copy moves.
   .lsb already carries align-items:start, so the grid area stays the full row
   height and the card has somewhere to travel. */
.insp-read{position:sticky;top:calc(var(--hdr-h,112px) + 20px)}

@container (max-width:900px){
  .insp-read{position:static}
}

/* No short-window guard here. That guard exists for the paired image, which is a
   4:3 photograph plus a prompt and can easily be taller than a laptop viewport.
   The recommended-reading card is about 320px: it always fits, so releasing it on
   a short window only broke the behaviour on exactly the screens where holding the
   card is most useful. */

/* ===== ENQUIRY PANEL — two columns so the form fits a screen =====
   Stacked, the panel ran heading, rule, invitation, nine fields and a submit down
   one narrow column: past the fold on every laptop, and on a 900px window the
   submit button was never on screen at the same time as the first field. Splitting
   it puts the whole form in view.

   1080px is a container query on .site, so it follows the panel's own width rather
   than the device. Below it the panel stacks exactly as before. */
@container (min-width:1080px){
  .enqb-in{padding-block:clamp(22px,2.4cqi,40px)}

  /* The panel is capped against the viewport, not at a fixed pixel width, so the
     photograph's share cannot be squeezed out at any size: 54cqi leaves a little
     under half the band to the picture wherever the cap bites. The whole point of
     this block is the couple beside the form. */
  .epanel{max-width:min(800px,54cqi);
    display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);
    gap:clamp(18px,2cqi,28px);align-items:start;
    padding:clamp(22px,2.4cqi,34px)}
  .epanel .ehead{min-width:0}
  .epanel .ebody{min-width:0}
  .epanel .intro{margin-bottom:14px;max-width:none;font-size:14.5px;line-height:1.6}
  .epanel .rule{margin:12px 0 14px}
  .epanel h2{font-size:clamp(22px,2cqi,28px)}
  .epanel .ehead .fine{font-size:12px;line-height:1.5}

  /* Field metrics for this layout.
     .f input/.f select set min-height:50px at (0,1,1) up the file, which the
     compact padding further down never overrode — so every control was 50px tall
     and eight of them plus their labels is most of a laptop screen on its own.
     Every number here is measured against the fold, not guessed. */
  .eform .f input,.eform .f select{min-height:42px;padding:8px 11px;font-size:14px}
  .eform .f textarea{padding:8px 11px;font-size:14px}
  .eform label{font-size:12px;margin-bottom:3px}
  .eform .f{margin-bottom:10px}
  .eform .erow{gap:14px}

  /* Five bands, five columns, no wrapping — whatever the labels say. Letting them
     flex-wrap is what produced four chips and a lonely fifth on its own line. */
  .eform .fchips .wpcf7-radio{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .eform .fchips .wpcf7-list-item,
  .eform .fchips .wpcf7-list-item label{display:block;width:100%}
  .eform .fchips .wpcf7-list-item-label{display:block;text-align:center;
    padding:8px 6px;font-size:12px;white-space:nowrap}

  /* The two optional questions share a row. Pairing one of them with the submit
     button, as this did before, put a demographic question level with the primary
     action and made the button look like a field that had gone wrong. */
  .eform .eopt{align-items:start}
  .eform .enav{margin-top:4px}

  /* The hints under the two optional questions. At body size they were three lines
     each and cost more height than the fields they explain. */
  .eform .fhint{font-size:11.5px;line-height:1.4;margin-top:4px}

  /* Each of these was measured against the fold rather than chosen. Together with
     the header stepping out of the way, the privacy line moving up beside the
     button and Turnstile no longer taking a row of its own, they are what fits the
     whole form into a 700px-tall window — which is what a 1080p screen with a
     bookmarks bar actually leaves. */
  .eform .f textarea{min-height:64px}
  .eform .fchips{margin-bottom:8px}
  .eform .f{margin-bottom:9px}
  .epanel{padding:clamp(20px,2.2cqi,30px)}
  .epanel .ehead .fine{margin-top:10px}
  .enqb-in{padding-block:clamp(18px,2cqi,32px)}

  /* The message field does not need five rows to invite a sentence. */
  .eform textarea{min-height:74px}
}

/* ===== ENQUIRY FORM — optional questions and hints =====
   Three rules were setting the submit button's height: 48px at line 1153, then 56
   and then 44 further down, each one added to fix the look of the previous. The
   later two are gone. Line 1153 already describes a button — auto width, 48px,
   14/30 padding — which is the same shape as .btn elsewhere, just a size down
   because it sits in a row of form controls rather than on a page.

   Both optional questions carry the marker, so neither looks like a condition of
   sending the form. */
.eform .eopt label .opt{color:var(--bronze-deep)}

/* The local time under the time-zone select. It is the whole point of the field:
   a consultant in London needs to know that "this morning" is the middle of the
   night in California, and the enquirer needs to see that the guess is right. */
.eform .fhint{display:block;margin-top:5px;font-size:11.5px;color:var(--grey);
  line-height:1.4;min-height:1.4em}
.eform .efine{margin-top:10px}


/* ===== ENQUIRY PANEL — the short-window ladder =====
   Browser zoom at 90% made this fit and, more to the point, look right: the whole
   panel shrinks together, so the proportions between type, controls and spacing
   are the ones that were designed rather than a set of individually nudged
   numbers. `zoom` does exactly that, and unlike transform:scale it affects layout,
   so the panel genuinely occupies less of the page rather than being drawn
   smaller over the same footprint.

   Keyed to viewport height, because that is the constraint: a 1500x900 window has
   never had a problem. Width is in the query too so a phone — which is short by
   nature — is never caught by it.

   Firefox supported zoom from 126. Anything older ignores these and gets exactly
   what it gets today, which is the layout that was already shipping. */
@media (min-width:1080px) and (max-height:900px){
  .epanel{zoom:.95}
}
@media (min-width:1080px) and (max-height:800px){
  .epanel{zoom:.9}
}
@media (min-width:1080px) and (max-height:700px){
  .epanel{zoom:.85}
}

/* The honeypot is meant to be invisible to people and plausible to a bot. The
   plugin hides it inline, but a stray theme rule resetting display on form
   controls would expose it, and a visible "checking" field on a luxury enquiry
   form is worse than the spam. Belt and braces. */
.eform .wpcf7-form-control-wrap.checking,
.eform [data-name="checking"]{position:absolute!important;left:-9999px!important;
  width:1px!important;height:1px!important;overflow:hidden!important}


/* The dialling code's closed state.
   Windows ships no flag glyphs, so a regional-indicator pair renders there as two
   small letters — "US" rather than a flag. That is fine and legible, but only if
   the control is sized for flag-plus-code and nothing else: at 96px it was showing
   "US +1 United", a country name sliced mid-word. text-overflow does not apply to
   a select, so the width has to do the work. */
.eform .telcc{text-overflow:ellipsis}


/* ===== TOUR CALENDAR — spacing =====
   The month heading and the first departure were near enough touching, so a long
   calendar read as one unbroken list rather than as months. */
.cal-month .shead,.cal-month > .wrap > h2{margin-bottom:clamp(18px,2.2cqi,30px)}
.cal-month + .cal-month{padding-top:clamp(20px,2.6cqi,38px)}

/* A section's "see them all" control.
   It was a .tl text link sitting beside an h2 and above a grid of cards, which
   made it the quietest thing on a busy row — Darren's word was "lost", and he was
   right. A button, but the secondary one: it must not out-shout the trip cards
   underneath it or the enquiry prompt further down. */


/* ===== HOMEPAGE HERO — the jump on load =====
   .hero-below is absolutely positioned over the bottom of the hero, and the space
   for it is reserved with --hero-below-h, which ooo.js measures and sets. Until
   that runs there is only the 132px fallback, and the real block is taller than
   that the moment the subtitle wraps to two lines — so the first paint drew the
   subtitle and button on top of the H1, and the text appeared to jump once the
   script caught up.

   Two changes. The fallback is now generous enough to cover a two-line subtitle
   plus the button, so the worst case is a little too much space rather than an
   overlap; and the reservation is expressed in cqi so it scales with the hero
   instead of being one number for every width. JavaScript still refines it, but
   it is now correcting a near-miss rather than repairing a collision. */
:root{--hero-below-fallback:clamp(150px,13cqi,196px)}

/* ===== VIDEO FACADES RECOVERED FROM THE BUILDER =====
   Elementor's lightbox widgets were inline, so a page could carry seven of them
   in a single paragraph. Rebuilt as facades they need a grid, or the press page
   is a column of seven stacked 16:9 videos and nothing else. */
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(14px,2cqi,26px);margin:clamp(20px,2.6cqi,34px) 0}
.vgrid.one{grid-template-columns:minmax(0,1fr);max-width:820px}
.vgrid .vfacade{margin:0}

/* Layout tables recovered from the old site.
   The "About Out Of Office" panel on every article was a one-row table holding a
   button and a Trustpilot widget. A table cannot wrap, so in a narrow column the
   two were pressed together. As a flex row they sit apart and stack on a phone. */
.legacy-row{display:flex;align-items:center;gap:clamp(16px,2.4cqi,32px);
  flex-wrap:wrap;margin:clamp(18px,2.2cqi,28px) 0}
/* The first cell holds a button and sizes to it. The second holds the Trustpilot
   widget, which asks for width:100% of a flex item that was free to collapse to
   nothing — so it rendered about forty pixels wide, showed its fallback link
   squeezed to "See …", and the script never drew the stars because there was no
   room to draw them in. It gets a floor and the right to grow. */
.legacy-row > div{min-width:0;flex:0 1 auto}
.legacy-row > div + div{flex:1 1 240px;min-width:240px}
.legacy-row .trustpilot-widget{width:100%;min-width:240px}
.legacy-row .btn{white-space:nowrap}

/* The block these sit in is injected by a plugin with its own inline margin and a
   rule above and below. Give the heading and the rules sensible spacing rather
   than the plugin's 8px. */
.art .code-block{margin:clamp(30px,3.4cqi,52px) 0}
.art .code-block hr{border:0;border-top:1px solid var(--hair);margin:0}
.art .code-block h4{margin:clamp(20px,2.2cqi,30px) 0 12px}
.art .code-block > p:last-of-type{margin-bottom:clamp(18px,2cqi,26px)}
@container (max-width:620px){
  .legacy-row{display:block}
  .legacy-row > div + div{margin-top:16px}
}

/* An article opens on its standfirst, not on a button.
   With the hero CTA switched off there is nothing under the photograph, so the
   band that held it should not still reserve its height. */
/* Deliberately not display:none.
   The block is only rendered at all when it has a standfirst or a button in it,
   so hiding it whenever the button is off would have taken the homepage's
   standfirst with it — and every article's, had they had one. .hero-wrap.bare
   below covers the genuinely empty case. */
.hero-wrap.bare + .sec{padding-top:clamp(28px,3.2cqi,52px)}


/* The trip's photograph in a calendar row.
   A list of dates and titles reads as a spreadsheet; the picture is what makes it
   a trip. Kept small and square-ish so the row height barely moves — the reason
   for choosing a list over cards was that it fits a month on one screen. */
.cal-shot{display:block;align-self:stretch;width:100%;min-height:64px;
  border-radius:8px;overflow:hidden;background:var(--sand)}
.cal-shot .im{width:100%;height:100%;object-fit:cover;display:block}

/* ===== FOOTER MAILING LIST =====
   The subscribe button sat under the field at full call-to-action size, which
   made a newsletter signup the most prominent control in the footer. It is not
   the conversion on this site and should not look like it: beside the field,
   aligned to it, and a size down. */
.ftr-news form,.ftr-news .wpcf7-form,.ftr-news .nlform{
  display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.ftr-news form p,.ftr-news .wpcf7-form p{margin:0;flex:1 1 220px;min-width:0}
.ftr-news input[type=email],.ftr-news input[type=text]{width:100%;min-height:44px;
  padding:10px 14px;font-size:14.5px}
.ftr-news input[type=submit],.ftr-news .wpcf7-submit,.ftr-news button[type=submit]{
  flex:0 0 auto;width:auto;min-height:44px;padding:0 20px;line-height:1;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);
  cursor:pointer;transition:background .2s,border-color .2s}
.ftr-news input[type=submit]:hover,.ftr-news .wpcf7-submit:hover,
.ftr-news button[type=submit]:hover{background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.8)}
.ftr-news .wpcf7-response-output{flex:1 0 100%;margin:10px 0 0;font-size:12.5px}

@container (max-width:560px){
  .ftr-news form,.ftr-news .wpcf7-form,.ftr-news .nlform{display:block}
  .ftr-news input[type=submit],.ftr-news .wpcf7-submit,
  .ftr-news button[type=submit]{width:100%;margin-top:10px}
}

/* ===== SPECIAL OFFER STRIP =====
   special_offer is a sentence of editorial rather than a discount — "our
   most-booked Japan itinerary", "new for 2027" — so it is framed as a note worth
   reading, not a sale sticker. Teal, because that is the colour the site uses when
   it is speaking in its own voice rather than describing a trip. */
.offer-sec{padding-block:0}
.offer-strip{display:flex;align-items:baseline;gap:clamp(14px,2cqi,28px);flex-wrap:wrap;
  background:var(--teal);color:#fff;border-radius:var(--r);
  padding:clamp(18px,2.2cqi,28px) clamp(20px,2.6cqi,36px)}
.offer-strip .lbl{color:var(--bronze-soft);flex:0 0 auto}
.offer-strip p{margin:0;max-width:64ch;color:#fff;
  font-family:var(--head);font-weight:300;font-size:clamp(17px,1.7cqi,22px);line-height:1.4}

/* ===== THE SPECIALIST GRID =====
   Portraits are the point, so they lead and the grid reflows from six across to
   two rather than shrinking the faces. Every portrait is cropped around the
   detected face at a fixed share of the frame, so a set shot on a bridge and a
   set shot against a wall still read as one set. */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:clamp(14px,2cqi,26px)}
.team-intro{max-width:62ch;margin-bottom:clamp(22px,2.8cqi,38px)}
.mem{display:block;color:var(--ink)}
.mem .ph{display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
  background:var(--sand);margin-bottom:12px}
.mem .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
/* .mem, not a.mem. Until Specialist pages exist the tile renders as a span, so a
   rule keyed to the anchor matched nothing and the zoom silently did not happen —
   which is exactly the state the site is in today. */
.mem:hover .ph img{transform:scale(1.04)}
a.mem:hover .nm{color:var(--bronze-deep)}
.mem .nm{display:block;font-family:var(--head);font-weight:400;font-size:17px;
  line-height:1.25;color:var(--teal);transition:color .2s}
.mem .rl{display:block;font-size:12.5px;color:var(--grey);margin-top:3px}

/* ===== PRESS COVERAGE =====
   A list, not cards. There is no photograph for a Guardian article, and a stock
   travel shot beside a headline is filler — it makes the page look thinner, not
   richer. A list also scales to fifty entries without a redesign, and reads the
   way a journalist expects a press index to read. */
.coverage{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.coverage li{border-bottom:1px solid var(--hair)}
.coverage a{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr) auto;
  gap:clamp(14px,2.4cqi,36px);align-items:baseline;
  padding:clamp(14px,1.8cqi,22px) 0;color:var(--ink)}
.coverage .outlet{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bronze-deep)}
.coverage .hl{font-family:var(--head);font-weight:300;font-size:clamp(17px,1.7cqi,21px);
  line-height:1.35;color:var(--teal);border-bottom:1px solid transparent;transition:border-color .2s}
.coverage a:hover .hl{border-bottom-color:var(--bronze)}
.coverage .yr{font-size:13px;color:var(--grey)}
@container (max-width:700px){
  .coverage a{grid-template-columns:1fr;gap:5px}
  .coverage .yr{order:-1}
}

/* Clippings: the scans we own. A magazine spread proves coverage in a way a link
   does not, so these get pictures where the coverage list does not. Anchored to
   the top of the crop because the masthead and headline are the part worth
   showing. */
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(14px,2cqi,26px)}
.clip{display:block;position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--sand)}
.clip .im{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;display:block;
  transition:transform .4s ease}
.clip:hover .im{transform:scale(1.03)}
.clip .c{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;
  line-height:1.4;background:linear-gradient(180deg,rgba(14,32,36,0),rgba(14,32,36,.85))}
.clip .c b{display:block;font-family:var(--head);font-weight:300;font-size:16px}
.clip .c span{opacity:.8;font-size:12px}

/* ===== LEGAL PAGES =====
   Terms are written in two levels — sections, and the clauses given their own
   heading — so the contents index is too. Listed flat it read as three sections
   and six apparently random numbers, because clauses 2 to 26 are paragraphs
   rather than headings in the source. */
.lnav ol.sub{margin:6px 0 10px 0;padding-left:14px;border-left:1px solid var(--hair)}
.lnav ol.sub li{margin:0}
.lnav ol.sub a{font-size:13px;color:var(--grey)}
.lnav ol.sub a:hover{color:var(--teal)}

/* Less air. A contract page is read, not browsed, so the opening gap that suits a
   marketing section just pushes the first clause off the screen. */
.legal{padding-top:0}
.hero-wrap.bare + .sec .legal{margin-top:0}
body.page .sec:has(> .wrap.legal){padding-block:clamp(26px,3cqi,44px)}
.lbody > :first-child{margin-top:0}

/* ===== FOOTER FIXES =====
   The logo rule was scoped to .foot and the wrapper is .ftr, so it never applied
   and the mark rendered at whatever the surrounding rules left it. Scoped to the
   class that is actually there, with width:auto so the 261x47 ratio holds however
   the height is constrained. */
.ftr .flogo{display:block;width:auto;height:auto;max-width:190px;margin-bottom:14px}

/* The subscribe button sits beside the field.
   Contact Form 7 wraps every control in its own paragraph, including the submit,
   and my earlier rule gave every one of those paragraphs the same 220px flex
   basis — so in a column narrower than 440px the button wrapped underneath. The
   paragraph holding the submit is sized to its content instead. */
.ftr-news form p:has(input[type=submit]),
.ftr-news form p:has(.wpcf7-submit),
.ftr-news form p:has(button[type=submit]){flex:0 0 auto}
.ftr-news .nl-f{max-width:none}

.team-more{margin-top:clamp(22px,2.6cqi,36px)}

/* The dial control. Wide enough for a flag and a four-character code without an
   ellipsis — "+1 United States" truncated to "+1 U…" was the whole problem. */
.eform .telcc{width:96px}

/* ===== MOBILE DRAWER: SCROLLING =====
   Destinations and Inspiration are the longest panels, which is why they were the
   ones going off screen — but the cause is the same on both levels of the drawer.

   .dlist and .dsub-in were given overflow-y:auto without anything to bound their
   height. .drawer was display:block, so .dlist's height was simply its content
   and there was nothing to scroll; .dsub is a flex column, but .dsub-in had no
   flex basis, so it grew past the panel and .drawer's overflow:hidden clipped
   whatever did not fit. Either way the last few links were unreachable.

   The drawer becomes a flex column so the list is the part that flexes and
   scrolls, with the header and search fixed above it. Both scrolling areas clear
   the absolutely positioned footer and the phone's home indicator. */
@media (max-width:1080px){
  .drawer{display:flex;flex-direction:column}
}
.drawer .dtop,.drawer .dsearch{flex:0 0 auto}
.drawer .dlist{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
.drawer .dsub .dtop{flex:0 0 auto}
.drawer .dsub-in{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
.drawer .dfoot{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.drawer .dtop{padding-top:calc(14px + env(safe-area-inset-top,0px))}

/* ===== FOOTER ORDER ON MOBILE =====
   Stacked, the mailing list landed immediately under the enquiry form: two email
   fields and two buttons in a row, with nothing between them to say the second
   one is not part of the first. People were being asked to type an address twice.

   The brand block and the link columns move above it, so the logo and the
   navigation separate the two forms — and the newsletter ends up at the foot,
   which is where a newsletter belongs. Desktop keeps its existing order, where
   the two sit side by side in different columns and never read as one thing. */
@media (max-width:860px){
  .ftr-in{display:flex;flex-direction:column}
  /* Every child needs an explicit order. A flex item without one sits at 0, so
     naming only some of them would have thrown the proof strip and the legal
     line above everything else. */
  .ftr-g{order:1;padding-bottom:26px}
  .ftr-proof{order:2}
  .ftr-news{order:3;padding-top:28px;border-top:1px solid rgba(255,255,255,.16)}
  .ftr-l{order:4}
}

/* ===== BRAND CARDS ON CAREERS =====
   These were destination tiles with no photograph behind them: 3:3.6 teal
   rectangles over 500px tall with one line of text at the bottom, which read as
   three images that had failed to load. A brand with only a name gets a card
   sized for a name, and a logo when one is supplied. */
.brandcard{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  min-height:clamp(150px,16cqi,200px);padding:clamp(22px,2.4cqi,32px);
  border-radius:var(--r);background:var(--teal-deep);color:#fff;
  transition:background .25s ease}
.brandcard:hover{background:var(--teal)}
.brandcard .lg{display:block;margin-bottom:auto}
.brandcard .lg img{max-width:150px;height:auto;display:block}
.brandcard .lbl{color:rgba(255,255,255,.72);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase}
.brandcard h3{color:#fff;font-size:clamp(20px,2cqi,26px);margin:0;line-height:1.2}
.brandcard .go{margin-top:10px;font-size:12.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--bronze-soft)}
.brandcard:hover .go .a{margin-left:4px}

/* A picks row with no destination. Same rhythm as the linked rows, without the
   arrow or the hover that promises somewhere to go. */
.picks .pick.static{cursor:default}
.picks .pick.static:hover h3{color:inherit}

/* A section head followed straight by body copy, rather than by a grid. The
   64px that suits a heading above cards leaves a hole above a paragraph when the
   strap has already bridged the gap. */
.shead:has(.strap) + p{margin-top:0}
.shead .strap{margin:14px 0 0}
.lsb .main .shead:has(.strap){margin-bottom:clamp(18px,2.2cqi,30px)}


/* The band under the homepage H1 holds only the standfirst now, so it should not
   still reserve room for a button as well. Without this the H1 and the standfirst
   are pushed apart by the space a removed control used to occupy. */
/* Removed: this outranked .hero.inner .hero-in and put the reservation back.
   It was written for the homepage, where the block really is overlaid. On an
   inner page the block sits under the hero, so reserving its height only pushed
   the headline up — and because :has() is more specific than .hero.inner, the
   rule that was supposed to fix it never took effect. The homepage case is
   handled by .home .hero-in below. */

/* ===== INSPIRATION HUB =====
   Three ways in, because people arrive knowing different things: the kind of trip,
   the place, or only roughly when. A flat list of thirty tiles is a wall. */
.hub-intro{max-width:66ch;font-size:clamp(16px,1.5cqi,18px)}
.hub-intro p:last-child{margin-bottom:0}
.hub-more{margin-top:clamp(24px,2.8cqi,40px)}

/* The tile grid was replaced by full sections — see templates/inspiration-hub.php.
   Its rules are deleted rather than left behind, or the next person greps for
   .hubtile and finds styling for markup that no longer exists. */

/* Destinations as columns of links rather than tiles: at this point in the page a
   visitor is scanning for a name, and thirty photographs slow that down. */
.hubdest{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(20px,2.6cqi,40px)}
.hubdest-col h3{font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bronze-deep);margin:0 0 12px;padding-bottom:10px;
  border-bottom:1px solid var(--hair)}
.hubdest-col ul{list-style:none;margin:0;padding:0}
.hubdest-col li{margin-bottom:9px}
.hubdest-col a{color:var(--teal);font-size:15.5px;
  border-bottom:1px solid transparent;transition:border-color .2s}
.hubdest-col a:hover{border-bottom-color:var(--bronze)}

/* The trust band sits in the page container rather than bleeding edge to edge.
   Full width, five columns and a 1900px screen gave each box a very short measure
   and its own line count, so the five descriptions ran to two, three and four
   lines and nothing aligned. Bounded, they are all two. */
/* --max, the site container, not an invented variable. */
.reas-in{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
/* Not text-wrap:balance. It evens line lengths, which meant a description that
   fitted on two lines was broken onto three so the lines would match — the
   opposite of what is wanted in a fixed five-column band. */

/* The destinations index intro. .strap is display type sized for a single
   standfirst line; several paragraphs in it were set at heading size. */
.dest-intro{max-width:70ch;margin-bottom:clamp(20px,2.4cqi,32px)}
.dest-intro p{font-size:clamp(16px,1.5cqi,17.5px);line-height:1.72}
.dest-intro p:last-child{margin-bottom:0}

/* Three columns whose headings run to different line counts left the body copy
   starting at three different heights. The heading row is its own grid track, so
   every body paragraph begins on the same line whatever the heading does. */
/* Subgrid, not a grid per column.
   My previous attempt made each .qa its own two-row grid — which aligns the two
   rows within a column and does nothing at all across columns, because each grid
   sizes its rows to its own content. A one-line heading beside a two-line heading
   still pushed its body copy up. With subgrid the columns share the parent's
   rows, so every heading occupies the same band and every paragraph starts on the
   same line. */
.g3:has(.qa){align-items:start;grid-template-rows:auto auto}
.g3 .qa{display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:0}
.g3 .qa h3{margin:0 0 10px;align-self:start}
.g3 .qa p{margin:0}

/* Where subgrid is unavailable, reserve two lines for the heading instead. Less
   precise, but it fails to "slightly too much space" rather than to misalignment. */
@supports not (grid-template-rows: subgrid){
  .g3 .qa{display:block}
  .g3 .qa h3{min-height:2.4em}
}

/* One column: nothing to align against, so the reservation would only add a gap. */
@container (max-width:700px){
  .g3 .qa{display:block}
  .g3 .qa h3{min-height:0}
}

/* Compatibility anchors for enquiry links in authored content from the old
   theme. Zero-size, but offset upward so the sticky header does not cover the
   top of the form when the browser jumps to them. */
.anchor-compat{display:block;height:0;overflow:hidden;
  scroll-margin-top:calc(var(--hdr-h,112px) + 24px)}


/* Alternating sides on the inspiration hub.
   The template has been writing .rev on every second section since the hub was
   built, and nothing defined it — so all nine ran copy-left, image-right. Order
   rather than direction:rtl, which would also flip the punctuation. */
.l50.rev > :first-child{order:2}

/* The footer mailing list, decisively on one line.
   flex-wrap:wrap plus a 220px basis meant the field and the button could not both
   fit a 410px column, so the button dropped below. nowrap removes the choice; the
   field shrinks instead, which is what should give. */
.ftr-news .nl-f{display:flex;flex-wrap:nowrap;align-items:stretch;gap:8px;max-width:none}
.ftr-news .nl-f input[type=email]{flex:1 1 auto;min-width:0;width:auto}
.ftr-news .nl-f button{flex:0 0 auto;width:auto;white-space:nowrap}
@container (max-width:560px){
  .ftr-news .nl-f{flex-wrap:wrap}
  .ftr-news .nl-f button{width:100%}
}

/* ===== RELATED READING, TWO ACROSS =====
   Two portrait cards in a three-column grid leave an empty third column, and the
   gap is the loudest thing in the section — it reads as an item that failed to
   load. Laid on their sides, two fill the row honestly. */
.readrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.6cqi,40px)}

.tcard-wide{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  align-items:stretch;gap:0;overflow:hidden;border-radius:var(--r)}
.tcard-wide .shot{aspect-ratio:auto;height:100%;border-radius:0}
.tcard-wide .shot .im{width:100%;height:100%;object-fit:cover}
.tcard-wide .b{padding:clamp(18px,2.2cqi,26px);display:flex;flex-direction:column}
.tcard-wide h3{font-size:clamp(17px,1.7cqi,20px)}
.tcard-wide .pr{margin-top:auto}

@container (max-width:820px){
  .readrow{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:520px){
  /* Below this the picture column is too narrow to show anything, so the card
     goes back to picture above words. */
  .tcard-wide{grid-template-columns:minmax(0,1fr)}
  .tcard-wide .shot{aspect-ratio:16/10}
}

/* ===== COUNT-AWARE PRODUCT GRID =====
   M02. One or two cards in a three-column grid leave empty columns, and an empty
   column reads as an item that failed to load. The count picks the layout.

   Deliberately scoped to .pgrid: the shared .tcard style is not touched, so this
   cannot restyle cards anywhere else on the site. */
.pgrid{display:grid;gap:clamp(18px,2.6cqi,40px)}

/* One: a feature at the content width, not a card stretched across the page. */
.pgrid-one{grid-template-columns:minmax(0,1fr);max-width:820px}

/* Two: side by side, filling the row honestly. */
.pgrid-two{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Three or more: the ordinary responsive grid. */
.pgrid-many{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

@container (max-width:820px){
  .pgrid-two{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:520px){
  /* Below this the picture column is too narrow to show anything, so the wide
     card returns to picture above words rather than a sliver beside them. */
  .pgrid .tcard-wide{grid-template-columns:minmax(0,1fr)}
  .pgrid .tcard-wide .shot{aspect-ratio:16/10}
}

/* ===== PRODUCT BROWSER =====
   M04/M05. Filters above the results they control, an honest count, and paging
   that is made of links so it works without script and can be crawled. */
.pbrowse{container-type:inline-size}

.pfilters{margin-bottom:clamp(22px,2.8cqi,38px)}
.pf-row{display:grid;grid-template-columns:minmax(200px,1.4fr) repeat(auto-fit,minmax(150px,1fr)) auto;
  gap:12px;align-items:end}
.pf{display:block;min-width:0}
.pf-l{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--bronze-deep);margin-bottom:6px}
.pf input,.pf select{width:100%;min-height:46px;padding:10px 13px;font-size:15px;
  border:1px solid var(--hair);border-radius:var(--r-s,8px);background:var(--white);color:var(--ink)}
.pf input:focus-visible,.pf select:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.pf-go{min-height:46px;white-space:nowrap}

.pf-state{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:14px}
.pf-count{margin:0;font-size:14px;color:var(--grey)}
.pf-reset{font-size:14px;color:var(--teal);border-bottom:1px solid var(--bronze)}

.pf-empty{padding:clamp(28px,3.4cqi,48px);background:var(--sand);border-radius:var(--r);
  text-align:center}
.pf-empty p{max-width:52ch;margin:0 auto}
.pf-empty-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

.pnav{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2cqi,28px);
  flex-wrap:wrap;margin-top:clamp(26px,3cqi,44px)}
.pnav-c{font-size:14px;color:var(--grey)}
.pnav-l{font-size:14px;color:var(--teal);border-bottom:1px solid transparent}
.pnav-l:hover{border-bottom-color:var(--bronze)}

@container (max-width:720px){
  .pf-row{grid-template-columns:minmax(0,1fr)}
  .pf-go{width:100%}
}

/* An expanding block beside a picture.
   "More about Greece" opens an accordion in the left column, and because .l50
   centres its items the photograph grew with it — a 400px image stretching to
   900px as text appears. The picture keeps its own height and stays put. */
.l50 > img.im,.l50 > picture,.l50 > .im{align-self:start}
.l50:has(.js-more,[data-more],details){align-items:start}

/* ===== HOTEL CARD =====
   The shared tile was 3:3.6 with the name over a gradient covering most of the
   lower half. Wrong for a hotel twice over: the portrait crop reads small in a
   four-column row, and the gradient darkens the part of the picture a hotel is
   actually sold on — the pool, the terrace, the view.

   4:3 so the property has room, the picture at full brightness, and the name on
   cream underneath. Only the rating stays on the image, bottom left, where there
   is usually sky or water. */
.hcard{display:block;color:var(--ink)}
.hcard-ph{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r);
  overflow:hidden;background:var(--sand)}
/* .site img.im sets height:auto at (0,2,1) and beat .hcard-ph .im at (0,2,0), so
   the picture sized itself by its own proportions instead of filling the card —
   a 2048x1366 photograph in a column that expected a 4:3 crop, which stretched
   the row and pushed everything below it out of place. Matched on specificity,
   the same way .dtile and .tcard do it further up. */
.site .hcard-ph img.im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.site .hcard:hover .hcard-ph img.im{transform:scale(1.045)}

/* A small scrim behind the stars only, not across the whole picture. */
.hcard-stars{position:absolute;left:12px;bottom:12px;padding:5px 10px;border-radius:999px;
  background:rgba(14,32,36,.55);color:#fff;font-size:12px;letter-spacing:.14em;line-height:1}

/* A block with the arrow taken out of flow, not a two-track grid.
   The grid version had a spanned row, baseline alignment and a flex heading all
   interacting, and any one of them changing broke the other two. Nothing here can
   push anything else around. */
.hcard-b{position:relative;display:block;padding:14px 30px 14px 2px;
  border-bottom:1px solid var(--hair)}
.hcard-b h3{margin:0 0 3px;font-size:clamp(17px,1.6cqi,20px);line-height:1.25;
  color:var(--teal);transition:color .2s}
.hcard:hover .hcard-b h3{color:var(--bronze-deep)}
.hcard-place{display:block;font-size:13px;color:var(--grey)}
.hcard-go{position:absolute;right:2px;top:50%;transform:translateY(-50%);
  color:var(--bronze-deep);font-size:18px;line-height:1;transition:transform .2s}
.hcard:hover .hcard-go{transform:translateY(-50%) translateX(3px)}

/* ===== MOMENT CARD =====
   The bolder treatment: full bleed image, large title over it, whole tile
   clickable. The gradient only darkens where the words are, rather than the
   lower half of the picture.

   There is no category field on moments, so the subtitle carries the supporting
   line — on hover where there is a pointer, always where there is not. */
.mcard{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r);
  overflow:hidden;background:var(--teal-deep);color:#fff}
/* Same guard as the hotel card: .site img.im would otherwise set height:auto. */
.site .mcard img.mcard-im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.site .mcard:hover img.mcard-im{transform:scale(1.05)}
.mcard-v{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(9,28,31,.86) 0%,rgba(9,28,31,.34) 34%,rgba(9,28,31,0) 62%)}
.mcard-c{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(18px,2.2cqi,28px);display:flex;flex-direction:column;gap:4px}
.mcard h3{margin:0;color:#fff;font-size:clamp(19px,2cqi,25px);line-height:1.18;text-wrap:balance}
.mcard-s{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.84);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .35s ease,opacity .3s ease,margin-top .35s ease}
.mcard:hover .mcard-s,.mcard:focus-visible .mcard-s{max-height:6em;opacity:1;margin-top:4px}
.mcard-go{position:absolute;right:clamp(16px,2cqi,24px);top:clamp(16px,2cqi,24px);z-index:2;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.36);color:#fff;
  transition:background .25s ease,border-color .25s ease}
.mcard:hover .mcard-go{background:var(--bronze);border-color:var(--bronze)}

@media (hover:none){
  /* No hover to reveal it, so the supporting line is simply always there. */
  .mcard-s{max-height:none;opacity:1;margin-top:4px}
}

/* ===== GROUP TRIPS, DELIBERATELY SECONDARY =====
   Tailor-made is the speciality and the better margin, so fixed departures should
   not be the loudest thing on a country page. The count-aware grid was giving two
   group trips two half-width cards, which made them more prominent than the six
   tailor-made cards above. Three across at a smaller size, whatever the count. */
.gcompact{grid-template-columns:repeat(3,minmax(0,1fr))}
.gcompact .tcard .shot{aspect-ratio:16/10}
.gcompact .tcard h3{font-size:clamp(16px,1.5cqi,18px)}
.gcompact .tcard .sm{display:none}
#group-trips{padding-block:clamp(38px,4.4cqi,72px)}
@container (max-width:820px){.gcompact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:560px){.gcompact{grid-template-columns:minmax(0,1fr)}}

/* Three across on inspiration, not four.
   auto-fill with a 260px minimum gave four columns on a wide screen, which is
   tighter than every other grid on the site and makes the cards look cramped. */
.pgrid-many{grid-template-columns:repeat(3,minmax(0,1fr))}
@container (max-width:900px){.pgrid-many{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:560px){.pgrid-many{grid-template-columns:minmax(0,1fr)}}

/* Hotel names of one and two lines in the same row.
   Two lines reserved so the place, the rule and the arrow align across the row
   however long the property name is. Plain min-height — the display:flex here was
   turning the heading into a flex container inside a grid that also used baseline
   alignment, and the three together were what broke the card body. */
.hcard-b h3{min-height:2.5em}

/* The charity cards do not need that much height. */
.csr-card{min-height:clamp(200px,18cqi,250px)}

/* (3.34: the gallery's small-count fallback, a row of equal cells, is replaced by
   the count-aware mosaic — see .mosaic at the end of this file.) */

/* The mobile action bar steps aside at the enquiry form too.
   Hiding the header alone still left a strip across the top of the panel, which
   is what was cropping the image on a phone. */
.mbar{transition:transform .28s ease}
.mbar.hdr-away{transform:translateY(-100%)}

/* The index page intro.
   .lede is display type sized for a one-line standfirst. On the generated index
   pages it wraps a full paragraph of editorial, which set eight lines of body
   copy at heading size — it reads as a mistake rather than emphasis. */
.ooo-index .lede,body.ooo-index .lede{font-family:var(--body);font-weight:400;
  font-size:clamp(16px,1.5cqi,17.5px);line-height:1.72;color:var(--ink);
  max-width:72ch;letter-spacing:0}
/* .lede p is set at (0,1,1) further up, so a rule on .lede alone loses to it —
   the paragraph has to be targeted as specifically. */
.ooo-index .lede p{font-family:var(--body);font-weight:400;
  font-size:clamp(16px,1.5cqi,17.5px);line-height:1.72;color:var(--ink);margin-bottom:1em}
.ooo-index .lede p:last-child{margin-bottom:0}

/* A hero with a standfirst and no button.
   Moments and any page that suppresses the CTA still render the block, so the
   spacing sized for a standfirst plus a button left a band of empty page under a
   single line of text. The block is sized to its own content and the section
   below opens closer. */
.hero-wrap.sub-only .hero-below-in{padding-top:14px;padding-bottom:16px}
.hero-wrap.sub-only + .sec{padding-top:clamp(26px,3cqi,48px)}
.hero-wrap.sub-only .hsub{margin-top:0}

/* The standfirst below the hero reads like an article's opening line.
   It was set at body size in near-black, which made a moment's introduction look
   like a caption while a blog's sat in teal display type. Same treatment as .lede,
   because it is doing the same job. */
.hero-below .hsub{font-family:var(--head);font-weight:300;color:var(--teal);
  font-size:clamp(17px,1.7cqi,22px);line-height:1.5;max-width:60ch}

/* ===== MOMENTS RAIL =====
   A moment is sold on its photograph, and four to a row makes each one too small
   to do that. Three at a size worth looking at, the rest scrolling sideways.

   Scroll rather than a scripted carousel: it works without JavaScript, with a
   trackpad, with a touch swipe and with the keyboard, and there is no state to
   get out of step with the content. */
.mrail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * clamp(14px,1.8cqi,26px)) / 3);
  gap:clamp(14px,1.8cqi,26px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-left:0;padding-bottom:14px;
  scrollbar-width:thin;scrollbar-color:var(--hair) transparent;
  /* The card's hover lift is clipped by the scroll container otherwise. */
  padding-top:4px}
.mrail > *{scroll-snap-align:start;min-width:0}

/* A rail that fits entirely on screen should not look scrollable. */
.mrail::-webkit-scrollbar{height:6px}
.mrail::-webkit-scrollbar-thumb{background:var(--hair);border-radius:999px}
.mrail::-webkit-scrollbar-track{background:transparent}

@container (max-width:900px){
  .mrail{grid-auto-columns:calc((100% - clamp(14px,1.8cqi,26px)) / 2)}
}
@container (max-width:560px){
  .mrail{grid-auto-columns:82%}
}

/* The country sub-navigation steps aside at the enquiry form.
   It is sticky at the header's height, so hiding the header alone left it
   floating where the header had been — still covering the top of the form, now
   with a gap above it. Moved by its own height plus the header's, so it clears
   the viewport rather than sliding to the top. */
.snav{transition:transform .28s ease}
.snav.hdr-away{transform:translateY(calc(-100% - var(--hdr-h,82px)))}

/* ==========================================================================
   3.23.0
   ========================================================================== */

/* Rights: the answer under the question, and its source directly beneath. */
#rights .rights-answer{font-family:var(--head);font-weight:300;font-size:clamp(18px,1.6cqi,21px);line-height:1.5;color:var(--teal);max-width:62ch;margin:0 0 8px}
#rights .rights-src{font-size:13px;color:var(--grey);margin:0 0 clamp(22px,2.6cqi,32px)}
#rights .rights-src a{color:var(--teal);border-bottom:1px solid var(--hair)}
#rights .rights-src a:hover{border-bottom-color:var(--bronze)}


/* Footer headings are h2 for the outline; they keep the h4 look. (0,2,0) beats
   .site h2 (0,1,1) and .site h1,.site h2,.site h3. */
.ftr .ftr-h{font-family:var(--head);font-weight:300;font-size:17px;line-height:1.3;letter-spacing:normal;color:var(--bronze);margin:0 0 14px}

/* Footer social links. Each item carries its network as a class for icons. */
.ftr .ftr-social{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ftr .ftr-social a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:inherit;opacity:.85;transition:opacity .2s ease,color .2s ease}
.ftr .ftr-social a:hover,.ftr .ftr-social a:focus-visible{opacity:1;color:var(--bronze)}
.ftr .ftr-soc-i{width:18px;height:18px;display:block}

/* Group trips. The summary was meant to be hidden on these cards, but the rule
   targeted .sm and the summary is .sum. One or two trips: horizontal cards,
   centred, never as large as a tailor-made card. */
.gcompact .tcard .sum{display:none}
.gcompact.gc-n1{grid-template-columns:minmax(0,560px);justify-content:center}
.gcompact.gc-n2{grid-template-columns:repeat(2,minmax(0,480px));justify-content:center}
.gcompact.gc-n1 .tcard-wide,.gcompact.gc-n2 .tcard-wide{grid-template-columns:minmax(0,150px) minmax(0,1fr)}
@container (max-width:820px){.gcompact.gc-n2{grid-template-columns:minmax(0,560px)}}
@container (max-width:560px){.gcompact.gc-n1,.gcompact.gc-n2{grid-template-columns:minmax(0,1fr)}}

/* Product browser: the count line above results. */
.pbrowse .pcount{font-size:13.5px;color:var(--grey);margin:0 0 14px}
.pbrowse{scroll-margin-top:calc(var(--hdr-h,72px) + 16px)}

/* Buttons never wrap. On honeymoon pages the long label gives way to the short
   one where it would not fit on a line. */
.site .btn .t{white-space:nowrap}
.site .btn .cl-s{display:none}
@media (max-width:640px){.site .btn .cl-l{display:none}.site .btn .cl-s{display:inline}}

/* About: an action under each way to reach us. */
.qa .qa-link{margin-top:10px;font-size:14px}
.qa .qa-link a{color:var(--teal);border-bottom:1px solid var(--hair)}
.qa .qa-link a:hover{border-bottom-color:var(--bronze)}

/* ==========================================================================
   3.23.1
   ========================================================================== */

/* Homepage hero (desktop): heading, standfirst and search card, sized as one.

   1. The standfirst clears the search card. `.hero-wrap.sub-only .hero-below-in`
      (a standfirst with no button — written for moments) also matches the
      homepage, and at (0,3,0) it cut the space under the standfirst to 16px while
      the search card rose up to 56px into the hero, covering the second line.
   2. The card rises less far into the image: 28-40px instead of 40-56px. Scoped
      to the homepage search card; .hmeta is also the facts card on trip pages.
   3. The heading sits close above the standfirst. It was held 34px above the
      block plus the block's own 14px top padding — a 48px gap before leading,
      which is what read as a hole between the H1 and the paragraph.

   Net on a laptop: the text block sits about 60px lower, so less of the image is
   covered, and the heading and paragraph read as one unit. The card overlap and
   the standfirst clearance use the same clamp, so they cannot drift apart
   (test-structure.php). */
@media (min-width:761px){
  .home .hmeta.search{margin-top:calc(-1 * clamp(28px,3cqi,40px))}
  .home .hero-wrap.sub-only .hero-below-in{padding-top:0;padding-bottom:calc(clamp(28px,3cqi,40px) + 8px)}
  .home .hero-wrap .hero-in{padding-bottom:calc(var(--hero-below-h,var(--hero-below-fallback)) + 12px)}
}

/* The enquiry band fills the screen on desktop, so the newsletter sign-up in the
   footer is not in view beside the form. The header steps aside once the band is
   in view (ooo.js, headerAwayOnEnquiry), so the whole viewport is the band. */
@media (min-width:761px){
  .site .enqb{min-height:100vh}
}
/* The small-viewport unit where supported, so mobile browser chrome is not counted. */
@supports (min-height:100svh){
  @media (min-width:761px){ .site .enqb{min-height:100svh} }
}

/* Sticky header (desktop, compact on scroll): menu items give way to search and
   phone; a labelled menu button opens the drawer. */
.hdr-csearch,.hdr-ctel,.hdr-burger .bl{display:none}
@container (min-width:1081px){
  .hdr.compact .hdr-nav{display:none}
  .hdr.compact .hdr-burger{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:8px 6px;margin-right:6px;color:#fff;font:inherit;cursor:pointer}
  .hdr.compact .hdr-burger .bl{display:inline;font-size:14px;letter-spacing:.04em}
  .hdr.compact .hdr-csearch{display:flex;width:clamp(220px,22cqi,320px)}
  .hdr.compact .hdr-ctel{display:inline-block;color:#fff;font-size:14.5px;white-space:nowrap}
  .hdr.compact .hdr-ctel:hover{color:var(--bronze)}
}
/* The drawer only existed below 1080px. On desktop it is a side panel, opened
   from the compact header's menu button. */
@media (min-width:1081px){
  .drawer{display:flex;flex-direction:column;right:auto;width:min(420px,100vw);box-shadow:0 0 48px rgba(9,28,31,.35)}
}

/* ==========================================================================
   3.23.3
   ========================================================================== */

/* Logo at the top of the enquiry panel, in brand teal. Drawn from the header's
   own logo file (white on transparent) through a mask, so the colour is exactly
   --teal and there is no second logo file to keep in step. */
.epanel .elogo{display:block;width:clamp(120px,10cqi,150px);aspect-ratio:261/47;
  margin:0 0 clamp(14px,1.6cqi,20px);background-color:var(--teal);
  -webkit-mask:url(../img/logo.png) no-repeat left center/contain;
  mask:url(../img/logo.png) no-repeat left center/contain}


/* ==========================================================================
   3.24.0
   ========================================================================== */

/* Horizontal (wide) trip cards: the picture stays inside its column. A grid item
   will not shrink below its content's natural width unless told to, so the image
   (800px wide) overflowed the 150-180px track and covered the title, facts and
   button — group cards on the Tours page showed a picture and nothing else. */
.tcard-wide > *{min-width:0}
.tcard-wide .shot{width:100%;min-height:100%}
.tcard-wide .shot .im{display:block;max-width:100%}

/* Moments rail: arrows instead of a scrollbar. The rail still scrolls by swipe,
   trackpad and keyboard; the scrollbar is hidden, and the arrows page by one
   screenful. At either end the matching arrow is disabled. */
.mrail-wrap{position:relative}
.mrail-wrap .mrail{scrollbar-width:none}
.mrail-wrap .mrail::-webkit-scrollbar{display:none}
/* Rail controls, beneath the rail beside its "all" button: square outline buttons
   in the site's outline-button style, with the same thin arrows the hotel cards
   use. Scoped under .site so the theme's button reset (.site button, 0,1,1) cannot
   strip them. At either end the matching arrow is shown faded and inactive, so the
   row does not jump. */
.rail-foot{display:flex;align-items:stretch;justify-content:space-between;gap:18px;margin-top:clamp(22px,2.6cqi,34px)}
.rail-nav{display:flex;gap:10px}
.rail-nav .mrail-btn{height:auto;min-height:48px;width:56px}
.site .mrail-btn{position:static;width:48px;height:48px;border:1px solid var(--bronze);border-radius:0;
  background:transparent;color:var(--teal);font-size:22px;line-height:1;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease}
.site .mrail-btn:hover,.site .mrail-btn:focus-visible{background:var(--teal);border-color:var(--teal);color:#fff}
.site .mrail-btn:disabled{opacity:.35;cursor:default;background:transparent;color:var(--teal);border-color:var(--bronze)}
@media (max-width:760px){.rail-nav{display:none}.mrail-wrap .mrail{scrollbar-width:auto}}

/* The "About Out Of Office" block Ad Inserter adds to blog posts.
   Its markup is <hr><h4>…</h4><br><p>…</p><table><tr><td>button</td><td>TrustBox</td></tr></table>.
   The <br> after the heading doubled the gap under it. The table shrank to its
   content, so the TrustBox — set to 100% width — got 100% of a cell a few pixels
   wide and showed as "See o… 75…". The table now spans the column, and the widget
   cell takes the remaining width. */
.code-block h4{margin:0 0 10px}
.code-block h4 + br{display:none}
.code-block table{width:100%;border:0;border-collapse:collapse;margin:18px 0 4px}
.code-block td{border:0;padding:0;vertical-align:middle}
.code-block td:first-child{width:1%;white-space:nowrap;padding-right:22px}
.code-block td:last-child{width:auto;min-width:220px}
.code-block .trustpilot-widget{min-width:220px}
@media (max-width:560px){
  .code-block table,.code-block tbody,.code-block tr,.code-block td{display:block;width:100%}
  .code-block td:first-child{padding:0 0 14px}
}

/* The [phonetext] flag field (Country & Phone Field Contact Form 7), when the form
   uses it: the plugin's wrapper takes the field's full width, like every input. */
.eform .iti{display:block;width:100%}
.eform .iti input.wpcf7-phonetext{width:100%}


/* ==========================================================================
   3.25.0
   ========================================================================== */

/* Two-column images keep their shape when the text beside them grows.
   `.site .l50 > img.im` and `.site .cintro-im` set height:100%, so opening
   "More about Greece" on a country page, or "Read more" in an itinerary's At a
   glance, stretched the photo to the height of the text — 4:3 became portrait.
   Same specificity as that rule and later, so it wins; the other members of that
   rule (cards, sidecards, galleries) keep height:100%. */
.site .l50 > img.im,
.site .l23 > img.im,
.site .cintro-im{height:auto;aspect-ratio:4/3;align-self:start}

/* Index introductions: a lead sentence, then body paragraphs (ooo_intro_block). */
.intro-block{max-width:72ch}
.intro-block .intro-lead{font-family:var(--head);font-weight:300;font-size:clamp(20px,1.9cqi,26px);
  line-height:1.4;color:var(--teal);margin:0 0 16px}
.intro-block p{font-size:16px;line-height:1.7;color:var(--ink);margin:0 0 14px}
.intro-block p:last-child{margin-bottom:0}
.intro-block a{color:var(--teal);border-bottom:1px solid rgba(43,94,104,.35)}


/* Search suggestions (WP Search with Algolia). The results panel grew past the
   bottom of the screen and could not be scrolled, in the drawer and the header
   alike: nothing bounded its height. It now stops short of the viewport's edge
   and scrolls inside itself, without scrolling the page behind it.
   !important because the plugin positions the panel with inline styles. */
.aa-dropdown-menu,
.aa-Panel{max-height:calc(100vh - 150px) !important;overflow-y:auto !important;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@supports (max-height:100dvh){
  .aa-dropdown-menu,.aa-Panel{max-height:calc(100dvh - 150px) !important}
}
.aa-Panel .aa-PanelLayout{max-height:none}

/* Country intro: the text under "More about…" matches the paragraphs above it.
   `.cintro details p` set weight 400 against 300 for the visible paragraphs, so
   the expanded text read as bold. */
.cintro details p{font-weight:inherit}

/* The foot of a blog post: "New to Out Of Office?" and "Where exclusivity meets
   inclusivity" side by side, as the design has them. Nothing laid the two out, so
   they stacked with no space between. */
.whowe .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5.4cqi,104px);align-items:start}
.whowe h3{margin:0}
.whowe p{margin:0}
.whowe .acts{margin-top:22px}
@container (max-width:760px){.whowe .cols{grid-template-columns:minmax(0,1fr);gap:36px}}

/* Blog sidebar: the column spans the article's height, so its last block can
   stick while the reader scrolls a long piece — the contents and the button stay
   in view after the destinations, journeys and reading have scrolled away. */
.art-layout > .artside{align-self:stretch}
.artside .side-sticky{position:sticky;top:calc(var(--hdr-h,72px) + 24px);margin-top:34px;padding-top:4px}
.artside .side-sticky .toc-side{margin-bottom:18px}
.artside .side-sticky .toc-side ol{max-height:calc(100vh - var(--hdr-h,72px) - 190px);overflow-y:auto;overscroll-behavior:contain}
.artside .side-cta{margin:0}
@media (max-width:760px){.artside .side-sticky{position:static}}


/* ==========================================================================
   3.26.0
   ========================================================================== */

/* Inspiration "We suggest", on a phone: the lead tile is one 4:3 tile across the
   full width. `.gal5 .seotile.g-lead` (0,3,0, no breakpoint) made it span two rows
   with no aspect ratio; on a phone nothing else sits in those rows and the image
   is absolutely positioned, so the rows collapsed and the lead became a strip. */
@container (max-width:760px){
  .gal5 .seotile.g-lead{grid-row:auto;aspect-ratio:4/3}
}

/* The menu drawer answers the pointer, as the main menu does: links turn bronze.
   The drawer's links are white with !important (so .site a rules cannot dim
   them), so the hover state has to match that weight. */
.drawer .dlist a,.drawer .dsub-in a{transition:color .18s ease}
.drawer .dlist a:hover,.drawer .dlist a:focus-visible,
.drawer .dsub-in a:hover,.drawer .dsub-in a:focus-visible{color:var(--bronze) !important}
.drawer .dlist a:hover i{color:var(--bronze)}
.drawer .d-close:hover,.drawer .dback:hover,.drawer .dfoot .tel:hover{color:var(--bronze) !important}

/* "All Greece hotels" and the like: a button below the section, where someone who
   has reached the end of the cards wants more — not beside the heading, where it
   read as part of the title and did not line up. */
.sec-more{display:flex;justify-content:center;margin-top:clamp(26px,3cqi,40px)}

/* Homepage on a phone: photograph with the heading at its foot, the search card
   overlapping the photograph's bottom edge, then the standfirst.

   Before: `.home .hero-in` reserved the standfirst's height (+34px) inside the
   photograph — right on desktop, where the standfirst overlays the image, wrong on
   a phone, where it sits below it — so the heading floated mid-image; and the
   hero was tall enough that the search card started below the first screen.

   The order changes visually only: .site becomes a flex column on the homepage,
   .hero-wrap steps aside (display:contents) so its photograph and standfirst are
   flex items, and the standfirst is ordered after the search card. The reading
   order in the document is unchanged. */
@media (max-width:760px){
  /* The page's sections live in <main id="main"> inside .site. (3.26.0 aimed at
     .site itself, which only matched a simplified test page: on the real page the
     order never changed and the search card slid up over the standfirst.) */
  .home .site > main{display:flex;flex-direction:column}
  .home .site > main > .hero-wrap{display:contents}
  .home .site > main > .hero-wrap > .hero-below{order:1}
  .home .site > main > .hmeta-wrap ~ *{order:2}
  /* In a flex column, anything centred with auto margins shrinks to its content. */
  .home .site > main > *{width:100%;max-width:none;box-sizing:border-box}

  /* Taller than any other hero on a phone (a blog's is ~440-490px). */
  .home .site .hero{height:clamp(460px,70svh,600px);min-height:0;max-height:none}
  /* The photograph fills the taller box (the phone hero rule sizes it by ratio). */
  .home .site .hero>.im{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .home .site .hero-in{padding-bottom:62px}
  .home .site .hmeta-wrap{position:relative;z-index:3;padding-top:0;margin-top:-44px}
  .home .site .hero-below{position:static;padding-top:26px}
  .home .site .hero-below .hero-below-in{padding-top:0}
}

/* Breadcrumb on a phone.
   1. The middle steps are simply left out on a phone: "Home › Asia › The
      Maldives". The ellipsis that stood in for them added nothing a reader would
      tap, and its extra separator left a gap after "Home".
   2. Legibility. On a phone the veil only darkens the lower part of the photo, so
      the trail sat on bright, unshaded sky, and its heavy blurred shadow showed as
      a grey box. A soft shade now runs down from the top of the photo under the
      trail, and the shadow is a light one. */
@media (max-width:760px){
  .hero::before{content:"";position:absolute;left:0;right:0;top:0;height:110px;z-index:2;pointer-events:none;
    background:linear-gradient(to bottom,rgba(10,26,30,.55),rgba(10,26,30,0))}
  .hero .bc{font-size:13px;color:#fff;text-shadow:0 1px 2px rgba(10,26,30,.55)}
}

/* ==========================================================================
   3.27.0
   ========================================================================== */

/* Tours: "Start here / Featured Tours in Greece" — a centred heading over the
   recommended trips, in the same feature-row style as the legacy index pages. */
.tours-featured .shead.ctr{text-align:center;justify-content:center}
.tours-featured .shead.ctr .rule{margin-left:auto;margin-right:auto}
.tours-featured .ifeat + .ifeat{margin-top:clamp(28px,3.4cqi,48px)}
.ifeat .ifeat-facts{font-size:14px;color:var(--grey);margin:14px 0 16px;font-style:italic}

/* Moments between the rows of the first page of tours. */
.pb-insert{margin:clamp(30px,3.6cqi,52px) 0;padding:clamp(24px,2.8cqi,38px) 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.pb-insert .shead{margin-bottom:clamp(16px,2cqi,24px)}
.pb-insert .shead h3{font-family:var(--head);font-weight:300;font-size:clamp(22px,2.2cqi,30px);margin:4px 0 0;color:var(--teal)}

/* Copper buttons keep white text, by decision (24 Sep 2026): dark text on copper
   was tried for the audit's contrast point (T07) and rejected on brand grounds.
   The menu drawer's button now matches the header's: copper, white text, the same
   darker copper on hover. The drawer sits outside .site, and every button rule is
   scoped to .site, so this button had never been styled at all — it rendered as
   a plain link. The full button treatment is repeated here. */
.drawer .dfoot .btn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;
  padding:14px 28px;background:var(--bronze);border:1px solid var(--bronze);color:#fff;font-family:var(--body);
  font-weight:400;font-size:13px;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;overflow:hidden;
  transition:background .3s ease,border-color .3s ease}
.drawer .dfoot .btn .t{transition:transform .3s ease}
.drawer .dfoot .btn .a{position:absolute;right:18px;opacity:0;transition:opacity .3s ease,right .3s ease;font-size:15px;line-height:1}
.drawer .dfoot .btn:hover,.drawer .dfoot .btn:focus-visible{background:#b07f58;border-color:#b07f58;color:#fff}
.drawer .dfoot .btn:hover .t{transform:translateX(-11px)}
.drawer .dfoot .btn:hover .a{opacity:1;right:15px}

/* ==========================================================================
   3.28.0
   ========================================================================== */

/* Index intro with a recommended article beside it (components/intro-read.php). */
.intro-with-read{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(32px,5cqi,88px);align-items:start}
.rec-read{background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:0 10px 30px -22px rgba(10,26,30,.35)}
.rec-read .rr-im{display:block;aspect-ratio:16/10;overflow:hidden;background:#e9e3dc}
.site .rec-read .rr-im img.im{width:100%;height:100%;object-fit:cover;display:block}
.rec-read .rr-c{padding:clamp(18px,2cqi,26px)}
.rec-read h3{font-family:var(--head);font-weight:300;font-size:clamp(19px,1.7cqi,23px);line-height:1.3;margin:6px 0 10px}
.rec-read h3 a{color:var(--teal)}
.rec-read p{font-size:14.5px;line-height:1.6;color:var(--grey);margin:0 0 14px}
@container (max-width:760px){.intro-with-read{grid-template-columns:minmax(0,1fr)}}


/* ==========================================================================
   3.29.0 — continent pages
   ========================================================================== */

/* Content blocks: text in two-thirds, its image (or the intro's reading) in the
   right-hand third, instead of a full-width image band between every section. */
.cb-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(32px,4.6cqi,80px);align-items:start}
.cb-solo .cb-main{max-width:860px}
.cb-aside{display:flex;flex-direction:column;gap:clamp(20px,2.4cqi,32px);position:sticky;top:calc(var(--hdr-h,72px) + 24px)}
.cb-fig{display:block;border-radius:var(--r);overflow:hidden;background:#e9e3dc;color:inherit}
.site .cb-fig img.im{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.cb-fig .cb-cap{display:block;padding:14px 16px 16px;background:var(--white)}
.cb-fig .cb-cap-t{display:block;font-family:var(--head);font-weight:300;font-size:19px;line-height:1.3;color:var(--teal);margin-top:4px}
a.cb-fig:hover .cb-cap-t{color:var(--bronze)}
@container (max-width:760px){
  .cb-split{grid-template-columns:minmax(0,1fr)}
  .cb-aside{position:static}
  .site .cb-fig img.im{aspect-ratio:4/3}
}

/* Rhythm inside the text: room under the heading, between sub-heads and their
   paragraphs, and between paragraphs. The sub-heads sat tight on the text. */
.cb-sec.sec{padding-block:clamp(44px,5cqi,88px)}
.cb-main .shead{margin-bottom:clamp(20px,2.2cqi,30px)}
.cb-main h2,.cb-main h3,.cb-main h4{margin:clamp(26px,2.8cqi,36px) 0 12px}
.cb-main .shead h2{margin:0}
.cb-main > h2:first-child,.cb-main > h3:first-child,.cb-main .shead + h3{margin-top:0}
.cb-main p{margin:0 0 16px}
.cb-main p:last-child{margin-bottom:0}
.cb-main ul,.cb-main ol{margin:0 0 18px;padding-left:1.2em}
.cb-main li{margin-bottom:6px}

/* ==========================================================================
   3.33.0 — FAQs in two columns
   ========================================================================== */
.faqs .fcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4.4cqi,72px);margin-top:26px;align-items:start}
.faqs .fcols .acc,.faqs .fcol-one .acc{margin-top:0}
.faqs .fcol-one{margin-top:26px}
.faqs .fcol-h{font-family:var(--head);font-weight:300;font-size:clamp(20px,1.8cqi,24px);line-height:1.3;color:#fff;margin:0;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.35)}
.faqs .fcols .acc summary{font-size:18px}
@container (max-width:760px){.faqs .fcols{grid-template-columns:minmax(0,1fr)}}


/* ==========================================================================
   3.34.0 — gallery mosaic (components/gallery.php)
   One lead image, a layout per count, no holes.
   ========================================================================== */
.mosaic{display:grid;gap:clamp(8px,1.1cqi,14px);grid-auto-rows:clamp(140px,14cqi,240px)}
.mosaic > a{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:#e9e3dc;min-height:0}
.site .mosaic > a img.im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.mosaic > a:hover img.im{transform:scale(1.03)}
.mos-1{grid-template-columns:minmax(0,1fr);grid-auto-rows:clamp(260px,32cqi,480px)}
.mos-2{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.mos-2 > a{grid-row:span 2}
.mos-3{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.mos-3 > a:first-child{grid-row:span 2}
.mos-4{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.mos-4 > a:first-child{grid-row:span 2}
.mos-4 > a:nth-child(2){grid-column:span 2}
.mos-5{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.mos-5 > a:first-child{grid-row:span 2}
.mos-6{grid-template-columns:repeat(3,minmax(0,1fr))}
.mos-6 > a:first-child{grid-column:span 2;grid-row:span 2}
.mos-7{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.mos-7 > a:first-child{grid-row:span 2}
.mos-7 > a:nth-child(7){grid-column:span 2}
.mos-8{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.mos-8 > a:first-child{grid-row:span 2}
@container (max-width:760px){
  .site .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(110px,34cqi,200px)}
  .site .mosaic > a{grid-column:auto;grid-row:auto}
  .site .mosaic > a:first-child{grid-column:1 / -1;grid-row:span 2}
  .site .mosaic.mos-odd > a:last-child{grid-column:1 / -1}
}

/* 3.35.0 — continent names in the Destinations menu link to their continent pages. */
.panel-cols h4 a,.drawer .dsub-in h4 a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.panel-cols h4 a:hover,.panel-cols h4 a:focus-visible,.drawer .dsub-in h4 a:hover{border-bottom-color:currentColor}

/* 3.36.0 — a continent's Destinations dropdown with many countries: columns
   instead of one column running off the screen; scrolls within itself if need
   be. On a phone it opens as a sheet from the bottom of the screen. */
.snav .drop.drop-cols{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--rows,8),auto);
  grid-auto-columns:minmax(0,1fr);width:min(820px,calc(100vw - 48px));
  max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain}
/* Down each column, as an alphabetical list is read. */
.snav .drop.drop-cols a{white-space:normal;border-bottom:1px solid var(--hair);break-inside:avoid}
@container (max-width:980px){.snav .drop.drop-cols{grid-template-rows:repeat(var(--rows-m,15),auto)}}
@container (max-width:760px){
  .snav .drop.drop-cols{position:fixed;left:12px;right:12px;bottom:12px;top:auto;width:auto;
    grid-template-rows:repeat(var(--rows-m,15),auto);max-height:60vh;border-radius:var(--r);box-shadow:0 18px 50px -18px rgba(10,26,30,.45);z-index:60}
  /* Opened on a phone: a grid (not newspaper columns, which overflow sideways in
     a height-capped box), scrolling vertically. */
  .snav .has.open .drop.drop-cols{display:grid}
}

/* 3.36.1 — "FAQs" in the country and continent bars jumps here; stop below the
   sticky header and bar rather than under them. */
#faqs{scroll-margin-top:calc(var(--hdr-h,72px) + 64px)}

/* ==========================================================================
   3.38.x — homepage hero on desktop: the image takes the window, the heading
   ("Luxury gay travel agency" and the H1) sits on it, the search card sits on
   its lower edge, and the strapline follows below the card — the same order as a
   phone. The order changes visually only; the document order is unchanged.
   ========================================================================== */
@container (min-width:761px){
  .home .site > main{display:flex;flex-direction:column}
  .home .site > main > .hero-wrap{display:contents}
  .home .site > main > .hero-wrap > .hero-below{order:1}
  .home .site > main > .hmeta-wrap ~ *{order:2}
  .home .site > main > *{width:100%;max-width:none;box-sizing:border-box}
  /* …except the search card, which keeps the heading's column on desktop. */
  .home .site > main > .hmeta-wrap{max-width:var(--max);margin-left:auto;margin-right:auto}

  .home .hero{min-height:560px}
  /* Pulled up onto the image, and the same space given back below, so what
     follows starts exactly where the photograph ends. */
  .home .site .hmeta-wrap{margin-top:calc(-1 * var(--home-card-h, 74px) - clamp(28px, 3cqi, 44px));margin-bottom:clamp(28px, 3cqi, 44px);padding-bottom:0}
  /* Above the older .home .hero-wrap .hero-in rule, which reserved room for a
     strapline on the photo. */
  .home .site .hero-wrap .hero-in{padding-bottom:calc(var(--home-card-h, 74px) + clamp(28px, 3cqi, 44px) + clamp(40px, 4cqi, 64px))}
  .home .site .hero-in h1{font-size:clamp(34px, 4.9cqi, 66px)}

  /* The strapline, below the card, on sand, in teal display type. */
  .home .site .hero-wrap .hero-below{position:static;bottom:auto;background:var(--sand);pointer-events:auto;
    padding:clamp(24px, 2.6cqi, 36px) 0 clamp(30px, 3.2cqi, 46px)}
  .home .site .hero-below .hero-below-in{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
  .home .site .hero-below .hsub{color:var(--teal);text-shadow:none;max-width:70ch;margin:0}
}

/* 3.38.1 — itinerary day rows on a phone: the image and the heading below it had
   no space between them (the stacked row shared gap:0 with two other blocks). */
@container (max-width:760px){
  .site .day{row-gap:clamp(18px, 5cqi, 24px)}
  .site .day h3{margin-top:0}
}

/* ==========================================================================
   3.39.0 — "View our UK version?" (inc/country-prompt.php). Printed outside
   .site, so it carries its own button styles, like the menu drawer.
   ========================================================================== */
.cprompt[hidden]{display:none}
.cprompt{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(14,32,36,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cprompt-in{position:relative;background:#fff;max-width:480px;width:100%;border-radius:12px;padding:42px 36px 34px;
  text-align:center;box-shadow:0 24px 70px -20px rgba(10,26,30,.5);font-family:var(--body)}
.cprompt-in h2{font-family:var(--head);font-weight:300;font-size:clamp(24px,5vw,30px);line-height:1.2;color:var(--teal);margin:0 0 14px}
.cprompt-in p{font-size:15px;line-height:1.55;color:var(--ink);margin:0 0 8px}
.cprompt-x{position:absolute;top:10px;right:12px;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:var(--ink);padding:6px 8px}
.cprompt-acts{display:flex;gap:14px;margin-top:26px}
.cprompt-go,.cprompt-stay{flex:1;min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;
  font-family:var(--body);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background .25s ease,color .25s ease}
.cprompt-go{background:var(--teal);color:#fff;border:1px solid var(--teal)}
.cprompt-go:hover,.cprompt-go:focus-visible{background:var(--teal-deep,#1f4a52);border-color:var(--teal-deep,#1f4a52);color:#fff}
.cprompt-stay{background:#fff;color:var(--teal);border:1px solid var(--teal)}
.cprompt-stay:hover,.cprompt-stay:focus-visible{background:rgba(43,94,104,.06)}
html.cprompt-open{overflow:hidden}
@media (max-width:600px){.cprompt-in{padding:38px 22px 26px}.cprompt-acts{flex-direction:column}}

/* ==========================================================================
   3.40.0
   ========================================================================== */

/* Destinations menu: continents packed into newspaper columns (each kept whole)
   rather than one per grid cell, which pushed South America, North America, the
   South Pacific and Australasia onto a second row below the fold. The footer
   ("View all destinations") stays pinned to the bottom of the panel. */
.panel-cols{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:0 26px;align-items:start}
.panel-cols .pgroup + .pgroup{margin-top:22px}
.panel-foot{position:sticky;bottom:0;background:var(--white);z-index:2}

/* Filters: one row on desktop (the old grid mixed an auto-fitting repeat with a
   flexible column and an auto one — invalid, so every field stacked). On a phone
   they fold behind one button, open when a filter is already in use. */
.pf-row{display:flex;gap:12px;align-items:flex-end}
.pf-row > .pf{flex:1 1 0;min-width:0}
.pf-row > .pf:first-child{flex:1.6 1 0}
.pf-row > .pf-go{flex:0 0 auto}
/* One height for every control in the row (the button otherwise takes the
   standard 56px, and a search input sits a few pixels taller than a select). */
.pf-row .pf input,.pf-row .pf select{height:46px;min-height:46px;box-sizing:border-box}
.site .pf-row > .pf-go{height:46px;min-height:46px;padding-top:0;padding-bottom:0}
.pf-toggle{display:none}
@container (max-width:680px){
  .pf-row{flex-wrap:wrap}
  .pf-row > .pf,.pf-row > .pf:first-child{flex:1 1 100%}
  .pf-row > .pf-go{flex:1 1 100%}
  html.ooo-js .pfilters .pf-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:46px;
    padding:10px 14px;border:1px solid var(--hair);border-radius:var(--r-s,8px);background:var(--white);color:var(--teal);
    font-family:var(--body);font-size:14px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
  html.ooo-js .pfilters .pf-toggle::after{content:"+";font-size:18px;line-height:1}
  html.ooo-js .pfilters.is-open .pf-toggle::after{content:"\2212"}
  html.ooo-js .pfilters:not(.is-open) .pf-row{display:none}
  html.ooo-js .pfilters.is-open .pf-row{margin-top:12px}
}

/* Inner heroes (countries, continents, trips, index pages): lighter, so more of
   the photograph shows, and the H1 on one line where there is room. Their height
   is the original (56cqi, capped at 540px and 58% of the window) — 3.40 raised it
   to 640px, which on a laptop filled the whole first screen. */
@container (min-width:761px){
  .hero.inner .veil{background:
    linear-gradient(105deg,rgba(14,32,36,.58) 0%,rgba(14,32,36,.32) 30%,rgba(14,32,36,0) 56%),
    linear-gradient(180deg,rgba(14,32,36,.2) 0%,rgba(14,32,36,0) 22%,rgba(14,32,36,0) 56%,rgba(14,32,36,.5) 100%)}
  .hero.inner .hero-in h1{max-width:32ch;font-size:clamp(32px,4.2cqi,60px);text-wrap:balance}
}

/* ==========================================================================
   3.40.1 — images in rich content stay inside their column.
   Classic-editor captions arrive as <figure class="wp-caption" style="width:
   1400px"> — the image's file width, inline — and only the <img> was capped,
   so the figure pushed out of the article column. On a phone the article grid's
   bare 1fr column also grew to fit its widest child. Every image, figure,
   caption, gallery, embed and table in authored content is now held to its
   column, wherever the content appears.
   ========================================================================== */
.site :is(.art,.main,.cb-main,.ab,.lbody,.cintro,.day,.acc,.intro-block) :is(figure,.wp-caption,.wp-block-image,.wp-block-gallery,.gallery){
  max-width:100%;box-sizing:border-box}
.site :is(.art,.main,.cb-main,.ab,.lbody,.cintro,.day,.acc,.intro-block) img{max-width:100%;height:auto}
.site :is(.art,.main,.cb-main,.ab,.lbody,.cintro,.day,.acc,.intro-block) table{display:block;max-width:100%;overflow-x:auto}
.site .art{display:flow-root;min-width:0}
.site .wp-caption{margin:clamp(20px,2.4cqi,32px) 0}
.site .wp-caption img{display:block;border-radius:var(--r)}
.site .wp-caption-text,.site figcaption{font-size:13.5px;line-height:1.5;color:var(--grey);margin-top:8px}
.site .aligncenter{display:block;margin-left:auto;margin-right:auto}
.site .alignleft{float:left;margin:6px 24px 14px 0;max-width:50%}
.site .alignright{float:right;margin:6px 0 14px 24px;max-width:50%}
@container (max-width:600px){
  .site .alignleft,.site .alignright{float:none;max-width:100%;margin:16px 0}
}


/* 3.40.2 — accordion questions on a phone: the + stays beside the question,
   level with its first line. The row was allowed to wrap, so a long question
   pushed the + onto a line of its own underneath. Now the question wraps within
   its own space and the + keeps its column. */
@container (max-width:760px){
  .site .acc summary{flex-wrap:nowrap;align-items:flex-start;gap:16px}
  .site .acc summary::after{flex:0 0 auto;align-self:flex-start;margin-left:auto;line-height:inherit;min-width:1ch;text-align:right}
}

/* ==========================================================================
   3.41.0 — the destination a search names, above the results
   ========================================================================== */
.sdest{position:relative;display:flex;align-items:flex-end;min-height:clamp(280px,30cqi,400px);border-radius:var(--r);
  overflow:hidden;background:var(--teal-deep,#1f4a52)}
.site .sdest > img.im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sdest-veil{position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(14,32,36,.78) 0%,rgba(14,32,36,.55) 38%,rgba(14,32,36,.1) 70%,rgba(14,32,36,0) 85%),
  linear-gradient(0deg,rgba(14,32,36,.45) 0%,rgba(14,32,36,0) 55%)}
.sdest-c{position:relative;z-index:2;padding:clamp(24px,3.4cqi,48px);max-width:820px;color:#fff}
.sdest-c .lbl{color:#f1dcc9;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.sdest-c .lbl a{color:inherit;border-bottom:1px solid currentColor}
.sdest-c h2{margin:8px 0 10px;font-size:clamp(34px,4.4cqi,58px);line-height:1.05}
.sdest-c h2 a{color:#fff}
.sdest-c p{margin:0 0 20px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.9);max-width:60ch}
.sdest-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sdest-go{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 22px;background:var(--bronze);color:#fff;
  font-size:12.5px;letter-spacing:.09em;text-transform:uppercase}
.sdest-go:hover{background:#b07f58;color:#fff}
.sdest-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.55);
  color:#fff;font-size:13.5px;border-radius:999px}
.sdest-chip:hover{background:rgba(255,255,255,.14);color:#fff}
.sdest-also{margin:14px 0 0;font-size:14.5px;color:var(--grey)}
.sdest-also a{color:var(--teal);border-bottom:1px solid var(--bronze);margin-left:8px}
@container (max-width:640px){
  .sdest{min-height:360px}
  .sdest-c p{font-size:15px}
}

/* 3.41.1 — beside a short intro, a thin reading card (thumbnail and title, as
   in a blog's sidebar); the full card only beside a long intro. */
.intro-with-read.is-thin{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);align-items:start}
.rec-read.rec-thin{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;box-shadow:none;border:1px solid var(--hair)}
.rec-read.rec-thin .rr-im{aspect-ratio:1;height:100%}
.rec-read.rec-thin .rr-c{padding:14px 18px}
.rec-read.rec-thin h3{font-size:18px;margin:4px 0 0}
@container (max-width:760px){.intro-with-read.is-thin{grid-template-columns:minmax(0,1fr)}}


/* ==========================================================================
   3.43.2
   ========================================================================== */

/* A continent's Destinations dropdown on a phone: closed until tapped. The
   columned list's grid display (3.40) outranked the phone rule that hides
   dropdowns, so it sat open over the page. */
@container (max-width:760px){
  .site .snav .drop.drop-cols{display:none}
  .site .snav .has.open .drop.drop-cols{display:grid}
}

/* The search's destination card on a phone: photograph on top, words below on
   teal — nothing laid over the image, which was unreadable across a bright photo
   at full width. */
@container (max-width:640px){
  .site .sdest{display:block;min-height:0}
  .site .sdest > img.im{position:static;display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
  .site .sdest-veil{display:none}
  .site .sdest-c{padding:22px 20px 24px;max-width:none}
  .site .sdest-c h2{font-size:34px}
}

/* 3.43.3 — the Out watermark on phone heroes too. It was hidden below 760px by
   the original build; now it shows as on desktop, sized for the narrower screen
   and sitting above the heading at the foot of the photograph. */
@container (max-width:760px){
  .site .hero .oc{display:block}
  /* Wider than the hero, so it bleeds slightly off both edges (the box clips it). */
  .site .hero .om{width:122%;max-width:none;left:50%;top:38%;opacity:.2}
}

/* 3.44.0 — the group tour calendar: under Gay Group Tours in the phone drawer,
   and a strip under the hero of the group tours pages. */
.drawer .dlist .d-sublink{display:block;margin:-6px 0 12px 16px;font-size:15px;color:rgba(255,255,255,.78)}
.drawer .dlist .d-sublink::before{content:"\21B3";margin-right:8px;opacity:.7}
.drawer .dlist .d-sublink:hover{color:var(--bronze)}
.cal-strip.sec{padding-block:clamp(16px,2cqi,24px)}
.cal-strip p{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:0;font-size:16px;color:var(--ink)}

/* ==========================================================================
   3.46.0 — the honeymoon bar (layout/honeymoon-nav.php)
   Desktop: a wide panel of continent groups under "Destinations". Phone: closed
   until tapped, then a sheet from the bottom that scrolls, with a pinned close
   header; the page behind stops scrolling (html.snav-sheet).
   ========================================================================== */
.snav .drop .drop-head{display:none}
.hm-groups h4{margin:0 0 8px;font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze)}
.hm-groups h4 a{color:inherit;border-bottom:1px solid transparent}
.hm-groups h4 a:hover{border-bottom-color:currentColor}
.hm-groups ul{list-style:none;margin:0;padding:0}
.snav .drop.drop-groups a,.hm-groups .hm-label{display:block;padding:5px 0;border:0;font-size:14.5px;line-height:1.35;white-space:normal}
.hm-groups .hm-label{color:var(--grey)}
.hm-groups .hm-regions{padding-left:12px;margin:0 0 4px;border-left:1px solid var(--hair)}
.snav .drop.drop-groups .hm-regions a{font-size:13.5px;padding:3px 0;color:var(--grey)}
@container (min-width:761px){
  .snav .drop.drop-groups{width:min(920px,calc(100vw - 48px));max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain;padding:20px 24px}
  .hm-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;align-items:start}
  .hm-col .hm-group + .hm-group{margin-top:20px}
}
@container (max-width:760px){
  .site .snav .drop.drop-groups{display:none}
  .site .snav .has.open .drop.drop-groups,
  .site .snav .has.open .drop.drop-cols{position:fixed;left:10px;right:10px;bottom:10px;top:auto;width:auto;max-height:74vh;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:1;visibility:visible;z-index:60;
    border-radius:var(--r);box-shadow:0 18px 50px -18px rgba(10,26,30,.45);background:var(--white)}
  .site .snav .has.open .drop.drop-groups{display:block;padding:0 18px 18px}
  .site .snav .has.open .drop .drop-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:2;
    background:var(--white);padding:14px 0;margin-bottom:8px;border-bottom:1px solid var(--hair);grid-column:1 / -1;
    font-family:var(--head);font-size:18px;color:var(--teal)}
  .site .snav .has.open .drop.drop-cols .drop-head{padding:14px 18px;margin:0}
  /* The open continent list fills row by row on a phone, so its header spans cleanly. */
  .site .snav .has.open .drop.drop-cols{display:grid;grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr))}
  .snav .drop .drop-x{border:0;background:none;font-size:28px;line-height:1;padding:0 4px;color:var(--ink);cursor:pointer}
  /* Phone: the groups flow into two newspaper columns. The sheet scrolls, not
     this block, so the columns balance rather than overflow sideways. */
  .hm-groups{display:block;columns:2;column-gap:18px}
  .hm-col{display:contents}
  .hm-group{break-inside:avoid;display:inline-block;width:100%;margin:0 0 16px}
  html.snav-sheet{overflow:hidden}
}

/* 3.47.0 — F03: footer text meets 4.5:1 on its teal (#245862). Headings were
   bronze at 2.85:1, the company label grey at 1.70, the legal line 3.32 and the
   accreditation copy 4.20. Decorative bronze elsewhere is unchanged. */
.ftr .ftr-h{color:#e2bf9f}                 /* 4.60 */
.ftr .lbl{color:#b7cccf}                   /* 4.74 */
.ftr .ftr-proof p,.ftr .ftr-l,.ftr .plogos .abtot,.ftr .ftr-news p{color:#b7cccf}
.ftr .nl-p{opacity:1;color:#b7cccf}          /* was #cfe0e2 at 70% opacity: 2.89 */
.ftr .paddr .lbl{color:#d3e2e4}              /* on the lighter address box (#3a6064): 5.19 */

/* Bronze text labels on light backgrounds use the deeper bronze (5.57 on white);
   bronze stays for decoration and on dark grounds. */
.site .lbl.b,.press .lbl,.tcard .kind,.art .tcard .kind{color:var(--bronze-deep)}

/* 3.47.2 — the footer's language link, in the bottom row. */
.ftr .ftr-lang{color:#b7cccf;border-bottom:1px solid rgba(183,204,207,.5)}
.ftr .ftr-lang:hover{color:#fff;border-bottom-color:#fff}

/* 3.50.1 — no layout shift on the desktop homepage. The hero's final size comes
   from CSS at first paint: the window below the header (the hero starts 128px
   down), 560 to 960px. It used to be 560px until ooo.js measured the window and
   stretched it, pushing everything down (a shift score of 0.10–0.12). The card
   offset defaults to the card's real height (74px, was 118px) for the same reason. */
@container (min-width:761px){
  .home .site .hero{height:clamp(560px, calc(100svh - 128px), 960px);min-height:0;max-height:none}
}

/* ==========================================================================
   3.50.2
   ========================================================================== */

/* The flag phone field's "+44" inherited a large size and covered the arrow. */
/* Both versions of the widget: the current one (.iti__…) and the older one the
   Country & Phone Field plugin ships on production (.intl-tel-input, 3.50.5). */
.eform .iti__selected-dial-code,
.eform .intl-tel-input .selected-dial-code{font-size:14px;line-height:1;color:var(--ink)}
/* Spacing: the current widget gets a little air; the older one keeps its own
   fixed-width layout (its arrow is positioned absolutely, so extra padding
   pushed the dial code into it — 3.50.6). */
.eform .iti__selected-flag{gap:6px;padding:0 10px 0 12px}
.eform .iti__arrow{margin-left:6px;border-top-color:var(--grey)}
.eform .iti__arrow--up{border-bottom-color:var(--grey)}
.eform .intl-tel-input .iti-arrow{border-top-color:var(--grey)}
/* The older widget's fixed flag-box widths (by dial-code length: iti-sdc-2 for
   "+1" … iti-sdc-5 for "+1684") left the arrow touching the code; 12px more each,
   and the typing position moved to match so the number never runs under it. */
.eform .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag{width:82px}
.eform .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input{padding-left:92px}
.eform .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag{width:90px}
.eform .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input{padding-left:100px}
.eform .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag{width:98px}
.eform .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input{padding-left:108px}
.eform .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag{width:106px}
.eform .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input{padding-left:116px}
.eform .intl-tel-input .iti-arrow.up{border-bottom-color:var(--grey)}
.eform .intl-tel-input{display:block;width:100%}
.eform .intl-tel-input input.wpcf7-phonetext{width:100%}

/* The About film. */
.about-film .vid{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0b1f24}
.about-film .vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ResponseIQ's call-back pop-up stays out of the way while someone is on the
   enquiry form (html.ooo-enquiring, set by ooo.js while the form is in view or
   in use). It comes back as soon as they move on. */
html.ooo-enquiring iframe[src*="responseiq" i],
html.ooo-enquiring iframe[title*="responseiq" i],
html.ooo-enquiring [id*="responseiq" i],
html.ooo-enquiring [class*="responseiq" i],
html.ooo-enquiring [id^="riq" i],
html.ooo-enquiring [class^="riq" i],
html.ooo-enquiring [class*=" riq" i]{display:none !important}

/* 3.50.3 — About films side by side; LiveChat (Commversion) quiet on the form. */
.about-film .films{display:grid;gap:clamp(18px,2.4cqi,32px)}
.about-film .films.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (max-width:760px){ .about-film .films.two{grid-template-columns:minmax(0,1fr)} }
.about-film .film{margin:0}
.about-film .film figcaption{margin-top:10px;font-family:var(--head);font-size:clamp(18px,1.6cqi,22px);color:var(--teal)}
html.ooo-enquiring #chat-widget-container,
html.ooo-enquiring #livechat-compact-container,
html.ooo-enquiring #livechat-full,
html.ooo-enquiring iframe[src*="livechatinc" i],
html.ooo-enquiring [id*="commversion" i],
html.ooo-enquiring [class*="commversion" i],
html.ooo-enquiring iframe[src*="commversion" i]{display:none !important}

/* 3.50.6 ------------------------------------------------------------------ */

/* The enquiry form goes to the thank-you page, so CF7's green "sent" note
   would only flash for a moment first. */
#ooo-enquire .wpcf7 form.sent .wpcf7-response-output{display:none !important}

/* The founder film: a portrait card beside the band's text. */
.band-film{position:absolute;z-index:3;top:50%;transform:translateY(-50%);
  right:max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)));
  width:clamp(200px, 20cqi, 290px);aspect-ratio:9/16;padding:0;border:0;cursor:pointer;
  border-radius:16px;overflow:hidden;background:#0b1f24;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.site .band-film img{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover}
.band-film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55))}
.band-film .play{position:absolute;z-index:1;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 6px 20px rgba(0,0,0,.3);transition:transform .2s}
.band-film .play::before{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent var(--teal)}
.band-film:hover .play,.band-film:focus-visible .play{transform:scale(1.08)}
.band-film:focus-visible{outline:3px solid #fff;outline-offset:3px}
.band-film .cap{position:absolute;z-index:1;left:0;right:0;bottom:16px;text-align:center;color:#fff;font-size:14px;letter-spacing:.02em}
@container (max-width:900px){
  .band.has-film{flex-direction:column;align-items:stretch}
  .band-film{position:relative;top:auto;right:auto;transform:none;margin:0 auto clamp(36px,8cqi,56px);width:min(300px, 72%);aspect-ratio:4/5}
}

/* The film lightbox. */
.film-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,48px);background:rgba(8,20,24,.9)}
.film-modal .fm-in{position:relative;width:min(1100px,100%);aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.film-modal iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-modal .fm-x{position:absolute;top:clamp(8px,2vw,20px);right:clamp(8px,2vw,20px);width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.95);color:var(--teal);font-size:26px;line-height:44px;cursor:pointer}
html.film-open{overflow:hidden}