:root{
  /* palette: Ghost White, Sunflower Gold, Blue Bell, Raspberry Red, Onyx */
  --ghost:#F7F7FF; --gold:#FFBC42; --blue:#279AF1; --rasp:#D81159; --onyx:#131112;
  --bg:var(--ghost); --surface:#ffffff; --ink:var(--onyx); --muted:#5c5a66; --line:#e3e2ee;
  /* gold and blue fail as text on light backgrounds, so they are only ever fills with onyx on top;
     --accent is the text accent (raspberry 4.75:1 on ghost white, gold 11:1 on onyx) */
  --accent:var(--rasp); --err:var(--rasp); --on-fill:var(--onyx);
  /* WhatsApp's signature green; white text on it is only 2:1, so it carries onyx (9.5:1) */
  --wa:#25D366; --wa-edge:#1a9e4b;
  --btn-edge:#dcdbe6; --btn-hi:rgba(255,255,255,.9);
  /* soft tactile buttons: top inner highlight, bottom inner shade, small drop shadow */
  --press:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(19,17,18,.10),0 1px 2px rgba(19,17,18,.10),0 4px 14px rgba(19,17,18,.08);
  --focus:var(--onyx); --shadow:0 12px 32px rgba(19,17,18,.08);
  /* frosted glass: see-through surface, blurred backdrop, bright top edge */
  --glass:rgba(255,255,255,.55); --glass-edge:rgba(19,17,18,.09); --glass-blur:blur(16px) saturate(1.6);
  --glass-sh:inset 0 1px 0 rgba(255,255,255,.95),0 8px 24px rgba(19,17,18,.06);
  --orb:rgba(255,255,255,.5); --orb-edge:rgba(255,255,255,.85); --glow:.5;
  --dlg-glass:rgba(255,255,255,.74);
  --radius:16px; --max:1040px;
  --font:system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#131112; --surface:#1d1a1c; --ink:#F7F7FF; --muted:#b8b6c4; --line:#2f2b2e;
    --accent:#FFBC42; --err:#ff6b9a; --focus:#FFBC42; --shadow:0 12px 32px rgba(0,0,0,.4);
    --btn-edge:#3a3538; --btn-hi:rgba(255,255,255,.06);
    --glass:rgba(255,255,255,.05); --glass-edge:rgba(255,255,255,.11);
    --glass-sh:inset 0 1px 0 rgba(255,255,255,.09),0 8px 24px rgba(0,0,0,.35);
    --orb:rgba(255,255,255,.1); --orb-edge:rgba(255,255,255,.22); --glow:.3;
    --dlg-glass:rgba(29,26,28,.74);
  }
}
:root[data-theme="dark"]{
  --bg:#131112; --surface:#1d1a1c; --ink:#F7F7FF; --muted:#b8b6c4; --line:#2f2b2e;
    --accent:#FFBC42; --err:#ff6b9a; --focus:#FFBC42; --shadow:0 12px 32px rgba(0,0,0,.4);
    --btn-edge:#3a3538; --btn-hi:rgba(255,255,255,.06);
    --glass:rgba(255,255,255,.05); --glass-edge:rgba(255,255,255,.11);
    --glass-sh:inset 0 1px 0 rgba(255,255,255,.09),0 8px 24px rgba(0,0,0,.35);
    --orb:rgba(255,255,255,.1); --orb-edge:rgba(255,255,255,.22); --glow:.3;
    --dlg-glass:rgba(29,26,28,.74);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-text-size-adjust:100%}
h1,h2,h3{line-height:1.15;font-weight:600;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
svg{display:block}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--surface);color:var(--ink);padding:10px 16px;border-radius:10px;box-shadow:var(--shadow);font-weight:600}
.skip:focus{top:16px}
.todo{background:#fff1a6;color:#4a3a00;padding:0 .35em;border-radius:4px;font-weight:600}
main{overflow-x:clip}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:14px;border:1px solid transparent;cursor:pointer;font-weight:600;transition:transform .15s var(--ease),box-shadow .15s,filter .15s;touch-action:manipulation}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 2px 3px rgba(19,17,18,.18)}
.btn svg{width:20px;height:20px}
.btn-wa{background:var(--wa);color:var(--onyx);border-color:var(--wa-edge);box-shadow:var(--press),0 4px 14px rgba(37,211,102,.22)}
.btn-line{background:var(--surface);color:var(--ink);border-color:var(--btn-edge);box-shadow:inset 0 1px 0 var(--btn-hi),inset 0 -2px 0 rgba(19,17,18,.05),0 1px 2px rgba(19,17,18,.08)}

/* header */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
header.scrolled{border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem}
.logo img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#fff;border:1px solid var(--line)}
.wm-a{color:var(--ink)}.wm-b{color:var(--accent)}
.nav ul{display:flex;gap:4px;list-style:none}
.nav ul a{display:block;padding:10px 14px;border-radius:999px;color:var(--muted);font-weight:500;transition:color .2s,background .2s}
.nav ul a:hover{color:var(--ink);background:var(--surface)}
.nav .btn{min-height:42px;padding:8px 16px;font-size:.95rem;border-radius:12px}
@media (max-width:760px){.nav ul{display:none}}
@media (max-width:480px){.nav .btn{display:none}}  /* the floating WhatsApp button covers it */

/* hero */
.hero{padding:44px 0 64px;text-align:center}
.hero-logo{width:min(180px,48vw);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;background:#fff;margin:0 auto 28px;box-shadow:var(--shadow)}
.tagline{font-size:.82rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.hero h1{font-size:clamp(2.2rem,6vw,3.6rem);margin:12px auto 14px;max-width:16ch;text-wrap:balance}
.hero p.sub{color:var(--muted);font-size:1.1rem;max-width:44ch;margin:0 auto 28px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* sections */
.section{padding:64px 0;border-top:1px solid var(--line)}
@media (max-width:600px){.section{padding:48px 0}}
.head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.head h2{font-size:clamp(1.7rem,3.4vw,2.3rem)}
.head p{color:var(--muted);max-width:52ch}
.hint{font-size:.9rem;color:var(--muted)}
.head-c{flex-direction:column;align-items:center;text-align:center;gap:6px}

/* trips */
.trips{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;list-style:none}
.trip{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.trip:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.trip:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.trip .sw{aspect-ratio:16/9;position:relative;overflow:hidden}
.trip .sw-ic{position:absolute;inset:0;display:grid;place-items:center;opacity:.85}
.trip .sw-ic svg{width:44px;height:44px}
.trip .sw img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.trip:hover .sw img{transform:scale(1.04)}
.trip .flag{position:absolute;top:10px;left:10px;font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--ghost);color:var(--onyx)}
.trip .tb{padding:14px 16px 16px;display:grid;gap:2px}
.trip b{font-weight:600;font-size:1.05rem}
.trip small{color:var(--muted);font-size:.9rem}
.trip .pr{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:.92rem}
.trip .pr strong{font-weight:600}
.trip .pr span{color:var(--accent);font-weight:600}
.more-row{margin-top:18px;text-align:center}

/* hero: two equal doors */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:640px;margin:36px auto 0;list-style:none;text-align:left}
@media (max-width:520px){.doors{grid-template-columns:1fr}}
.door{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:var(--gold);color:var(--on-fill);border:1px solid #d99a2b;box-shadow:var(--press);transition:transform .15s var(--ease),box-shadow .15s}
.door.med{background:var(--blue);border-color:#1b7fcb}
.door:hover{transform:translateY(-2px);box-shadow:var(--press),0 10px 24px rgba(19,17,18,.14)}
.door:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(19,17,18,.22)}
.door b{display:block;font-weight:600;font-size:1.05rem}
.door small{display:block;font-size:.9rem;color:color-mix(in srgb,var(--onyx) 80%,transparent)}
.door .tx{flex:1}
.door .ic,.door.med .ic{background:transparent;color:inherit;border:1.5px solid currentColor;border-radius:50%;width:40px;height:40px;transition:background-color .35s ease,color .35s ease,border-color .35s ease}
.door .ic svg{width:20px;height:20px}
.door [data-icon] svg{width:22px;height:22px;transition:transform .15s var(--ease)}
.door:hover [data-icon] svg{transform:translateX(3px)}
.ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--gold);color:var(--on-fill)}
.ic svg{width:22px;height:22px}
.med .ic{background:var(--blue)}
.row .ic{background:transparent;border:1px solid var(--line);color:var(--ink)}  /* list icons stay neutral */

/* services: two sides, side by side */
.sides{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}  /* panel edges always line up */
@media (max-width:820px){.sides{grid-template-columns:1fr}}
.side{--sub:1.45rem;border:1.5px solid var(--blue);border-radius:var(--radius);background:var(--surface);padding:22px}
@media (max-width:600px){.side{padding:18px 14px}}
.side.med{border-color:var(--gold)}
.side-k,.side h3,.side .panel-intro{text-align:center}
.side-k{margin:0;font-size:calc(var(--sub) * 1.61);line-height:1.1;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}  /* title = 1.61 × subtitle */
.side h3{font-size:var(--sub);margin:8px 0 6px}
.panel-intro{color:var(--muted);margin-bottom:16px}
.rows{display:grid;gap:8px;list-style:none}
.side .more-row{margin-top:12px;text-align:left}
.side .more-row .btn{min-height:44px;padding:8px 16px;font-size:.95rem}
.together{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:22px;border-radius:var(--radius);border:1px solid var(--line);background:var(--onyx);color:var(--ghost)}
.together b{display:block;font-size:1.15rem;font-weight:600}
.together p{color:#b8b6c4;max-width:60ch}
.together :focus-visible{outline-color:var(--gold)}
.row{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;cursor:pointer;transition:border-color .2s,transform .2s var(--ease)}
.row:hover{border-color:var(--ink)}
.row:active{transform:scale(.99)}
.row:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.row .tx{flex:1;min-width:0}
.row b{display:block;font-weight:600}
.row small{display:block;color:var(--muted);font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .chev{color:var(--muted);flex:none}
.how{margin-top:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.how summary{cursor:pointer;padding:14px 16px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px}
.how summary::-webkit-details-marker{display:none}
.how summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--muted);transition:transform .25s}
.how[open] summary::after{transform:rotate(45deg)}
.how ol{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:4px 16px 18px;counter-reset:s}
.how li{counter-increment:s;font-size:.95rem;color:var(--muted)}
.how li::before{content:counter(s,decimal-leading-zero);display:block;font-weight:700;color:var(--accent);margin-bottom:2px}
.how li b{display:block;color:var(--ink);font-weight:600}

/* contact */
.contacts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none}
@media (max-width:860px){.contacts{grid-template-columns:1fr 1fr}}
/* each card: a soft glow of its colour behind, a two-tone pill under a glass icon disc on the top edge */
.contacts > li{position:relative;padding-top:30px;--c:var(--blue)}
.contacts > li.c-wa{--c:var(--wa)}.contacts > li.c-em{--c:var(--gold)}.contacts > li.c-ig{--c:var(--rasp)}
.contacts > li::before{content:"";position:absolute;left:12%;right:30%;bottom:-6%;height:55%;border-radius:50%;background:var(--c);opacity:.28;filter:blur(36px);pointer-events:none}
.contacts > li::after{content:"";position:absolute;top:6px;left:calc(50% - 44px);width:50px;height:50px;border-radius:50%;pointer-events:none;
  background:color-mix(in srgb,var(--c) 70%,#fff);box-shadow:38px 0 0 color-mix(in srgb,var(--c) 78%,var(--onyx));filter:blur(10px)}
.ct{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;height:100%;padding:42px 16px 20px;border:1px solid var(--glass-edge);border-radius:20px;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-sh);transition:transform .2s var(--ease),border-color .2s}
.ct .ci{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:var(--orb);border:1px solid var(--orb-edge);-webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px rgba(19,17,18,.12);color:color-mix(in srgb,var(--c) 70%,var(--onyx))}
:root[data-theme="dark"] .ct .ci{color:var(--ghost)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct .ci{color:var(--ghost)}}
.ct .ci svg{width:26px;height:26px}
.ct b{font-weight:600;font-size:1.1rem}
.ct small,.ct small a{color:var(--muted);font-size:.92rem;overflow-wrap:anywhere}
.ct small a{text-decoration:underline;text-underline-offset:3px}
.visit{margin-top:14px;display:flex;align-items:center;gap:10px;color:var(--muted)}
.visit svg{width:20px;height:20px;flex:none;color:var(--accent)}
.visit b{color:var(--ink);font-weight:600}

.enq{margin-top:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.enq>summary{cursor:pointer;padding:16px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:52px}
.enq>summary::-webkit-details-marker{display:none}
.enq>summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--muted);transition:transform .25s}
.enq[open]>summary::after{transform:rotate(45deg)}
form{display:grid;gap:14px;padding:0 18px 20px;max-width:640px}
fieldset{border:0}
legend{font-weight:600;margin-bottom:8px;font-size:.95rem}
.toggle{display:inline-grid;grid-template-columns:1fr 1fr;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px}
.toggle label{text-align:center;padding:8px 18px;border-radius:999px;cursor:pointer;font-weight:600;font-size:.95rem;position:relative;color:var(--muted)}
.toggle input{position:absolute;opacity:0;inset:0;cursor:pointer}
.toggle label:has(input:checked){background:var(--ink);color:var(--bg)}
.toggle label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.field{display:grid;gap:6px;font-weight:600;font-size:.92rem}
.field .opt{font-weight:400;color:var(--muted)}
form input[type=text],form select,form textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:inherit;font:inherit;font-size:1rem;font-weight:400}
form textarea{min-height:96px;resize:vertical}
form ::placeholder{color:var(--muted)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--muted)}
.consent input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--rasp)}
.consent a{text-decoration:underline;color:var(--accent)}
.form-note{font-size:.85rem;color:var(--muted)}
.req{color:var(--err)}
.err{color:var(--err);font-weight:600;font-size:.9rem;margin-top:6px}
.err:empty{display:none}
form [aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}

footer{padding:40px 0 110px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot .logo{color:var(--ink);margin-bottom:10px}
.foot ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;align-content:start}
.foot ul a{text-decoration:underline;text-underline-offset:3px}
.disclaimer{margin-top:24px;font-size:.82rem;max-width:90ch}

/* floating WhatsApp */
.fab{position:fixed;right:20px;bottom:20px;z-index:70;width:58px;height:58px;border-radius:50%;background:var(--wa);color:var(--onyx);border:1px solid var(--wa-edge);display:grid;place-items:center;box-shadow:var(--press),0 10px 28px rgba(37,211,102,.35);transition:transform .2s var(--ease)}
.fab:hover{transform:scale(1.06)}
.fab svg{width:30px;height:30px}
.fab:not([href]){display:none}

/* detail pop-up */
html.dlg-open{overflow:hidden}
/* pop-up: a frosted glass sheet like the contact cards, with a soft glow of the item's colour
   (gold travel, blue medical, the trip's colour) and the item's icon in a glass disc on a two-tone pill */
#dlg{--c:var(--blue);border:1px solid var(--glass-edge);padding:0;margin:auto;width:min(720px,calc(100% - 32px));max-height:min(88vh,900px);border-radius:24px;
  background:var(--dlg-glass);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 30px 80px rgba(0,0,0,.35);overflow:hidden;isolation:isolate}
#dlg::before,#dlg::after{content:"";position:absolute;z-index:-1;border-radius:50%;background:var(--c);filter:blur(70px);pointer-events:none}
#dlg::before{left:-10%;top:-18%;width:65%;height:300px;opacity:.38}
#dlg::after{right:-12%;bottom:-20%;width:50%;height:240px;opacity:.2}
#dlg[open]{display:flex;flex-direction:column;animation:dlgIn .35s var(--ease)}
#dlg::backdrop{background:rgba(19,17,18,.42);backdrop-filter:blur(4px)}
@keyframes dlgIn{from{opacity:0;transform:translateY(24px) scale(.98)}}
.dlg-head{position:relative;padding:26px 72px 18px 26px}
.dlg-mark{position:relative;display:block;width:110px;height:60px;margin:0 0 14px -2px}
.dlg-mark::before{content:"";position:absolute;left:0;top:5px;width:50px;height:50px;border-radius:50%;background:color-mix(in srgb,var(--c) 70%,#fff);box-shadow:38px 0 0 color-mix(in srgb,var(--c) 78%,var(--onyx));filter:blur(10px)}
.dlg-orb{position:absolute;left:13px;top:0;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--orb);border:1px solid var(--orb-edge);
  -webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px rgba(19,17,18,.12);color:color-mix(in srgb,var(--c) 70%,var(--onyx))}
:root[data-theme="dark"] .dlg-orb{color:var(--ghost)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dlg-orb{color:var(--ghost)}}
.dlg-orb svg{width:26px;height:26px}
.dlg-img{display:block;width:100%;height:auto;aspect-ratio:16/6;max-height:220px;object-fit:cover;flex:none}
@media (max-width:600px){.dlg-img{aspect-ratio:16/7}}
.dlg-kicker{font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dlg-head h2{font-size:clamp(1.6rem,4vw,2.1rem);margin:6px 0 6px}
.dlg-sub{max-width:58ch;color:var(--muted)}
.dlg-x{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:1px solid var(--glass-edge);background:var(--orb);color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transition:transform .45s var(--spring),border-color .3s}
.dlg-x:hover{transform:rotate(90deg) scale(1.08);border-color:var(--ink)}
.dlg-x svg{width:20px;height:20px}
.dlg-x:focus-visible{outline-color:currentColor}
.dlg-body{padding:22px 26px;overflow-y:auto;overscroll-behavior:contain}
.dlg-body h3{font-size:1rem;font-weight:600;margin:22px 0 10px;display:flex;align-items:center;gap:8px}
.dlg-body h3:first-child{margin-top:0}
.dlg-body .count{font-size:.8rem;background:var(--blue);color:var(--on-fill);border-radius:999px;padding:2px 9px}
.procs{display:grid;gap:8px}
.proc{border:1px solid var(--glass-edge);border-radius:12px;background:var(--glass)}
.proc[open]{border-color:var(--blue)}
.proc summary{list-style:none;cursor:pointer;padding:12px 46px 12px 14px;position:relative;border-radius:12px}
.proc summary::-webkit-details-marker{display:none}
.proc summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:1.4rem;line-height:1;color:var(--ink);transition:transform .25s}
.proc[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.proc summary b{display:block;font-weight:600}
.proc-body{padding:0 14px 14px}
.proc-body p{color:var(--muted);font-size:.95rem}
.proc-body .label{font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;list-style:none}
.chips li{font-size:.82rem;padding:4px 10px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-edge);color:var(--muted)}
.link-btn{margin-top:12px;background:none;border:0;padding:6px 0;font-weight:600;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:600px){.cols{grid-template-columns:1fr;gap:0}.cols>div+div h3{margin-top:22px}}
.ticks,.dots,.crosses{list-style:none;display:grid;gap:8px}
.ticks li,.dots li,.crosses li{position:relative;padding-left:26px}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--ink);font-weight:700}
.crosses li::before{content:"✕";position:absolute;left:0;color:var(--accent);font-weight:700}
.dots li::before{content:"";position:absolute;left:6px;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--muted)}
.dlg-body .note{margin-top:22px;padding:14px 16px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-sh)}
.dlg-body .note ul{margin-top:8px}
.fine{margin-top:16px;font-size:.85rem;color:var(--muted)}
.fine a{color:var(--accent);text-decoration:underline}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.facts div{background:var(--glass);border:1px solid var(--glass-edge);border-radius:12px;padding:10px 12px}
.facts dt{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.facts dd{font-weight:600;margin-top:2px}
@media (max-width:600px){.facts{grid-template-columns:1fr 1fr}}
.days{list-style:none;display:grid;position:relative}
.days li{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:7px 0;position:relative}
.days li::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;background:var(--line)}
.days li:first-child::before{top:50%}.days li:last-child::before{bottom:50%}
.days .day{font-size:.8rem;font-weight:600;color:var(--ink);padding-left:18px;position:relative;align-self:center}
.days .day::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--gold)}
.dlg-foot{display:flex;gap:10px;flex-wrap:wrap;padding:14px 26px;border-top:1px solid var(--glass-edge);background:transparent}
@media (max-width:600px){
  #dlg{width:calc(100% - 24px);max-height:86vh;border-radius:20px}
  @keyframes dlgIn{from{opacity:0;transform:translateY(32px)}}
  .dlg-head{padding:22px 64px 18px 18px}.dlg-body{padding:18px}.dlg-foot{padding:12px 18px}
  .dlg-foot{gap:8px}
  .dlg-foot .btn{flex:1;padding:10px 12px;gap:8px;font-size:.92rem;white-space:nowrap}
  .dlg-foot .btn svg{width:18px;height:18px}
}

/* ---- intro: pinned while you scroll; JS sets --m (move left), --l (line), --n (node 0..1), --e (ending),
   --ny / --ex (node and line offsets in px) on .stage, and --k (shown) / --d (done) on each card and box
   layer. Everything moves with transform/opacity only. Scrolling up plays it backwards. ---- */
.intro{position:relative;height:480vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--g:0;--tt:0;--bk:0;--m:0;--l:0;--n:0;--e:0;--ny:0px;--ex:0px}
.iwrap{position:relative;max-width:var(--max);height:100%;margin:0 auto}
.ibox-wrap{position:absolute;left:50%;top:50%;width:min(260px,58vw);text-align:center;will-change:transform,opacity;
  transform:translate(-50%,-58%) translateX(calc(var(--m) * -1 * min(27vw,290px))) scale(calc(1 - var(--e) * .45));opacity:clamp(0, 1 - var(--e) * 1.4, 1)}
.ibox{position:relative;aspect-ratio:1;background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);--big:2.1;transform:scale(calc(1 + (var(--big) - 1) * (1 - var(--g))));will-change:transform;animation:ibox-in .6s ease-out both}
@keyframes ibox-in{from{opacity:0}}
.br{position:absolute;width:20px;height:20px;border:0 solid var(--accent);opacity:var(--bk);transform:scale(calc(2.2 - 1.2 * var(--bk)))}
.br.tl{top:-8px;left:-8px;border-width:2px 0 0 2px}.br.tr{top:-8px;right:-8px;border-width:2px 2px 0 0}
.br.bl{bottom:-8px;left:-8px;border-width:0 0 2px 2px}.br.br-{bottom:-8px;right:-8px;border-width:0 2px 2px 0}
.ilayer{position:absolute;inset:12px;display:grid;place-items:center;border-radius:4px;backface-visibility:hidden;
  opacity:var(--k,1);transform:perspective(700px) rotateY(var(--r,0deg))}
.ilayer.logo img{width:90%;height:auto;aspect-ratio:1;border-radius:50%;background:#fff}
.ilayer svg{width:50%;height:50%}
.ititle{margin-top:24px;font-weight:700;letter-spacing:.16em;font-size:1.3rem;min-height:1.5em;white-space:pre}
.isub{margin-top:2px;font-size:.9rem;color:var(--muted);opacity:var(--tt)}
.iline{position:absolute;top:16%;height:68%;left:56%;width:2px;background:var(--line);transform:translateX(calc(var(--ex) * -1)) scaleY(var(--l));transform-origin:top;will-change:transform}
.ifill{position:absolute;inset:0;background:var(--rasp);transform:scaleY(var(--n));transform-origin:top;box-shadow:0 0 10px var(--rasp);will-change:transform}
.inode{position:absolute;left:56%;top:16%;width:12px;height:12px;margin:-6px 0 0 -5px;background:var(--rasp);border-radius:2px;will-change:transform;
  transform:translate(calc(var(--ex) * -1),var(--ny)) rotate(45deg) scale(calc(1 + var(--e) * .6));opacity:var(--l);box-shadow:0 0 0 4px color-mix(in srgb,var(--rasp) 22%,transparent),0 0 22px var(--rasp)}
.icards{list-style:none;position:absolute;left:calc(56% + 34px);top:16%;height:68%;width:min(360px,38%)}
.icard{position:absolute;left:0;right:0;top:calc(var(--i) * 25%);padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  opacity:calc(var(--k,0) * (1 - var(--d,0) * .65) * clamp(0, 1 - var(--e) * 1.5, 1));transform:translateX(calc((1 - var(--k,0)) * 48px))}
.icard::before{content:"";position:absolute;right:100%;top:24px;width:28px;height:1px;background:var(--line)}
.icard .num{display:block;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.icard b{display:block;font-size:1.05rem;margin:2px 0 4px}
.icard p{font-size:.88rem;color:var(--muted);line-height:1.5}
.idots{display:none}
.iend{position:absolute;left:50%;top:87%;transform:translate(-50%,-50%);width:92%;text-align:center;opacity:var(--e)}
.iend-t{font-weight:700;letter-spacing:.16em;font-size:clamp(1.15rem,3vw,1.7rem);min-height:1.4em;white-space:pre}
.iend-s{color:var(--muted);font-size:.92rem;margin-top:4px}
/* scroll instruction at the bottom of the intro; fades away as soon as scrolling starts */
.ihint{position:absolute;bottom:calc(24px + 68px);left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font-size:.92rem;font-weight:600;color:var(--ink);white-space:nowrap;pointer-events:none;opacity:clamp(0, 1 - var(--g) * 3, 1)}
.ih-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--rasp);color:#fff}
.ih-ic svg{width:16px;height:16px;animation:hint-bob 1.4s ease-in-out infinite}
@keyframes hint-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media (max-width:700px){
  .intro{height:400vh}
  /* opening sits in the middle of the screen; while the box slides aside on desktop (--m),
     on phones it glides up to its spot near the top (11% from the top) to make room for the cards */
  .ibox-wrap{top:50%;width:calc(100% - 40px);
    transform:translate(-50%, calc((1 - var(--m)) * -50% - var(--m) * 39vh)) scale(calc(1 - var(--e) * .4));
    transform:translate(-50%, calc((1 - var(--m)) * -50% - var(--m) * 39svh)) scale(calc(1 - var(--e) * .4))}
  .ibox{width:min(170px,46vw);margin:0 auto;--big:1.6}
  .ihint{bottom:calc(20px + 60px)}  /* grows downward, clear of the header */
  .ititle{font-size:1.05rem;margin-top:18px}
  .iline,.inode{display:none}
  .icards{left:20px;right:20px;width:auto;height:auto;top:calc(11% + min(170px,46vw) + 118px)}
  /* one card at a time: the old one is gone before the new one fades in */
  .icard{top:0;opacity:calc(clamp(0, var(--k,0) * 2 - 1, 1) * clamp(0, 1 - var(--d,0) * 2, 1) * clamp(0, 1 - var(--e) * 1.5, 1));transform:translateY(calc((1 - var(--k,0)) * 28px - var(--d,0) * 20px))}
  .icard::before{display:none}
  .idots{display:flex;gap:8px;position:absolute;left:50%;transform:translateX(-50%);top:calc(11% + min(170px,46vw) + 96px);opacity:calc(var(--l) * clamp(0, 1 - var(--e) * 2, 1))}
  .idots span{width:22px;height:4px;border-radius:2px;background:var(--line)}
  .idots span.on{background:var(--rasp)}
  .iend{top:50%}
}
/* reduced motion: a plain, still version of the same content */
.intro.static{height:auto}
.intro.static .stage{position:static;height:auto;overflow:visible;padding:40px 20px 8px}
.intro.static .iwrap{height:auto;display:grid;justify-items:center;gap:24px}
.intro.static .ibox-wrap,.intro.static .icards,.intro.static .iend{position:static;transform:none;opacity:1;width:min(520px,100%)}
.intro.static .ibox-wrap{width:min(220px,60vw)}
.intro.static .icard{position:relative;top:auto;opacity:1;transform:none;margin-bottom:10px}
.intro.static .ibox,.intro.static .br,.intro.static .isub{transform:none;opacity:1}
.intro.static .icard::before,.intro.static .iline,.intro.static .inode,.intro.static .ihint,.intro.static .idots{display:none}

/* ---- motto before Contact: "Beyond Travel" fades in, crossfades to "Beyond Ordinary", then scrolls away.
   JS sets --o (opacity), --y (offset) and --b (blur) on each line from scroll position. ---- */
.motto{position:relative;height:240vh}
.motto-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.motto-t{grid-area:1/1;padding:0 20px;text-align:center;font-weight:700;letter-spacing:-.02em;line-height:1.05;font-size:clamp(2.6rem,9vw,6.5rem);
  opacity:var(--o,0);transform:translateY(var(--y,0px));filter:blur(var(--b,0px));will-change:transform,opacity}
.motto-t span{color:var(--rasp)}   /* raspberry in both themes (3.4:1 on onyx, fine for text this large) */
.motto.static{height:auto}
.motto.static .motto-stage{position:static;height:auto;padding:64px 0;gap:4px}
.motto.static .motto-t{grid-area:auto;opacity:1;transform:none;filter:none}

/* scroll reveal: items roll up into place (tilting forward from below) as they enter the screen.
   The class is added by script only, so nothing stays hidden without JS or with reduced motion. */
.roll{opacity:0;transform:perspective(900px) translateY(36px) rotateX(-22deg);transform-origin:50% 100%;transition:opacity .6s ease-out,transform .8s cubic-bezier(.2,.8,.25,1);transition-delay:var(--rd,0s)}
.roll.in{opacity:1;transform:none}

/* background: faint medical + transport icons; each drifts and wiggles on its own timing */
/* sky: starry night in dark theme, pale blue day with blurred clouds in light theme */
.bg-sky{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.bg-sky .night,.bg-sky .day{position:absolute;inset:0;transition:opacity .6s ease}
.bg-sky .day{background:linear-gradient(to bottom,color-mix(in srgb,var(--blue) 30%,var(--ghost)) 0%,color-mix(in srgb,var(--blue) 12%,var(--ghost)) 55%,var(--ghost) 100%)}
.bg-sky .night{opacity:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--blue) 16%,#07070d) 0%,color-mix(in srgb,var(--blue) 6%,var(--onyx)) 60%,var(--onyx) 100%)}
:root[data-theme="dark"] .bg-sky .night{opacity:1}:root[data-theme="dark"] .bg-sky .day{opacity:0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bg-sky .night{opacity:1}:root:not([data-theme="light"]) .bg-sky .day{opacity:0}}
.bg-sky .stars{position:absolute;left:0;top:0;width:1px;height:1px;border-radius:50%;animation:twinkle var(--tw) ease-in-out var(--td) infinite alternate}
@keyframes twinkle{from{opacity:1}to{opacity:.35}}
.bg-sky .cloud{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:calc(var(--w) * .3);border-radius:50%;background:rgba(255,255,255,.85);filter:blur(22px);animation:cloud-drift var(--cd) ease-in-out var(--cdl) infinite alternate}
.bg-sky .cloud::before,.bg-sky .cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.bg-sky .cloud::before{width:45%;height:150%;left:18%;bottom:30%}
.bg-sky .cloud::after{width:35%;height:120%;left:50%;bottom:25%}
@keyframes cloud-drift{from{transform:translateX(-6vw)}to{transform:translateX(6vw)}}
@media (max-width:700px){.bg-sky .cloud{width:calc(var(--w) * .6);height:calc(var(--w) * .18)}.bg-sky .wide-only{display:none}}
.bg-deco{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg-deco span{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);color:var(--c);opacity:var(--o);animation:deco-drift var(--fd) ease-in-out var(--dl) infinite alternate;will-change:transform}
.bg-deco i{display:block;width:100%;height:100%;animation:deco-wiggle var(--wd) ease-in-out var(--dl) infinite}
.bg-deco svg{width:100%;height:100%}
/* strength per colour, so gold (pale on light) and raspberry (dark on onyx) read as clearly as blue */
.bg-deco [data-c=gold]{--o:.55}.bg-deco [data-c=blue]{--o:.36}.bg-deco [data-c=rasp]{--o:.32}
:root[data-theme="dark"] .bg-deco [data-c=gold]{--o:.34}:root[data-theme="dark"] .bg-deco [data-c=blue]{--o:.4}:root[data-theme="dark"] .bg-deco [data-c=rasp]{--o:.5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bg-deco [data-c=gold]{--o:.34}:root:not([data-theme="light"]) .bg-deco [data-c=blue]{--o:.4}:root:not([data-theme="light"]) .bg-deco [data-c=rasp]{--o:.5}}
@keyframes deco-drift{from{transform:translate(0,0)}to{transform:translate(var(--dx),var(--dy))}}
@keyframes deco-wiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@media (max-width:600px){
  .bg-deco .wide-only{display:none}
  .bg-deco span{width:calc(var(--s) * .62);height:calc(var(--s) * .62);opacity:calc(var(--o) * .85)}
}

/* ---- phones: more breathing room, smaller pieces, nothing edge to edge ---- */
@media (max-width:600px){
  .wrap{padding:0 20px}
  .nav{height:60px}
  .hero{padding:24px 0 40px}
  .hero-logo{width:120px;margin-bottom:18px}
  .tagline{font-size:.72rem;letter-spacing:.14em}
  .hero h1{font-size:2rem;margin:10px auto 10px}
  .hero p.sub{font-size:1rem;margin-bottom:22px;max-width:34ch}
  .doors{max-width:380px;margin-top:24px;gap:10px}
  .door{padding:12px 14px;gap:12px}
  .door b{font-size:1rem}.door small{font-size:.84rem}
  .door .ic{width:36px;height:36px}
  .section{padding:40px 0}
  .head{margin-bottom:16px}
  .head h2{font-size:1.6rem}
  .side{padding:16px}
  .side{--sub:1.25rem}
  .panel-intro{font-size:.95rem;margin-bottom:12px}
  .together{padding:18px;margin-top:14px}
  .together b{font-size:1.05rem}
  .together p{font-size:.92rem}
  /* trips become compact rows: small photo on the left, text on the right */
  .trips{grid-template-columns:1fr;gap:10px}
  .trip{flex-direction:row;align-items:stretch}
  .trip .sw{aspect-ratio:auto;width:104px;min-height:92px;flex:none}
  .trip .sw-ic svg{width:28px;height:28px}
  .trip .flag{top:6px;left:6px;font-size:.62rem;padding:2px 6px}
  .trip .tb{flex:1;min-width:0;padding:10px 12px;align-content:center}
  .trip b{font-size:1rem}
  .trip small{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .trip .pr{margin-top:4px;font-size:.84rem}
  .contacts{gap:12px 10px}
  .contacts > li{padding-top:26px}
  .contacts > li::after{top:4px;left:calc(50% - 36px);width:42px;height:42px;box-shadow:30px 0 0 color-mix(in srgb,var(--c) 78%,var(--onyx))}
  .ct{padding:34px 8px 14px}
  .ct small,.ct small a{font-size:.78rem}   /* keeps the email address on one line */
  .ct .ci{top:-26px;width:50px;height:50px}
  .ct .ci svg{width:22px;height:22px}
  .ct b{font-size:1rem}
  .fab{right:16px;bottom:16px;width:52px;height:52px}
  .fab svg{width:26px;height:26px}
}

/* glass: panels, list rows, cards and outline buttons are frosted, see-through surfaces */
.btn-line,.row,.how,.enq,.trip,.side,.ct,.icard,.together{background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-sh)}
.btn-line,.row,.how,.enq,.trip,.icard,.together{border-color:var(--glass-edge)}
.together{color:var(--ink)}
.together p{color:var(--muted)}
.together :focus-visible{outline-color:var(--focus)}
.row:hover,.btn-line:hover{border-color:color-mix(in srgb,var(--ink) 45%,transparent)}
.doors > li::before{content:"";position:absolute;left:4%;top:12%;width:46%;height:76%;border-radius:50%;background:var(--c);opacity:var(--glow);filter:blur(24px);pointer-events:none}
/* coloured buttons keep their fill but get a glassy edge and sheen */
.btn-wa,.door,.fab{-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4)}
.btn-wa,.fab{background:color-mix(in srgb,var(--wa) 88%,transparent)}
.doors > li{position:relative;--c:var(--gold)}
.doors > li:has(.med){--c:var(--blue)}
.doors > li::before{left:6%;top:30%;width:88%;height:90%;opacity:.45;filter:blur(28px)}
.door,.door.med{position:relative;z-index:1;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 62%,#fff) 0%,color-mix(in srgb,var(--c) 88%,transparent) 45%,color-mix(in srgb,var(--c) 85%,var(--onyx)) 100%);border-color:color-mix(in srgb,var(--c) 60%,#fff)}
.btn-wa,.door{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.18),inset 0 -2px 0 rgba(19,17,18,.1),0 6px 18px rgba(19,17,18,.12)}
.fab{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.18),0 10px 28px rgba(37,211,102,.35)}

/* intro: no box around the logo; the logo and the flipping icon faces sit directly on the sky */
.ibox{background:none;border:0;box-shadow:none}
.ibox .br{display:none}

/* plane cursor (mouse and trackpad only), black in light theme and white in dark: the nose sits on the pointer and turns to face the movement */
html.plane-on,html.plane-on *{cursor:none}
html.plane-on :is(input,textarea,select,[contenteditable]){cursor:auto}
html.plane-on:has(dialog[open]),html.plane-on:has(dialog[open]) *{cursor:auto}   /* pop-ups sit above everything, so use the normal cursor there */
.plane-cur{position:fixed;left:0;top:0;z-index:2147483647;pointer-events:none;will-change:transform;transform:translate(-100px,-100px)}
.plane-cur svg{position:absolute;left:-27px;top:-14px;width:28px;height:28px;fill:var(--ink);stroke:var(--bg);stroke-width:3;stroke-linejoin:round;paint-order:stroke;filter:drop-shadow(0 1px 2px rgba(19,17,18,.3));transform-origin:27px 14px;transition:transform .15s var(--ease)}
.plane-cur.hot svg{transform:scale(1.2)}
.plane-cur.off,html:not(.plane-on) .plane-cur,html:has(dialog[open]) .plane-cur{visibility:hidden}
/* the on/off switch reuses the theme switch's look; the plane in the knob tilts up when on */
.cur-switch .tt-knob svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.cur-switch[aria-checked="true"] .tt-knob svg{transform:rotate(-45deg)}
@media (hover:none),(pointer:coarse){.cur-switch{display:none}}

/* hover: things grow with a soft, slightly springy ease instead of a stiff nudge */
:root{--spring:cubic-bezier(.34,1.45,.64,1)}
.btn,.door,.row,.trip,.ct,.fab,.nav ul a{transition:transform .45s var(--spring),box-shadow .35s ease,border-color .3s ease,color .35s ease,background-color .3s ease}
.trip .sw img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
/* buttons: a tilted ink wipe with a soft, feathered edge sweeps across left to right on hover
   (black in light theme, white in dark) and slides back out when the pointer leaves.
   The layer is wider than the button: solid ink on the left, a slanted fade, then clear. */
.btn,.door{position:relative}
/* contact cards grow as one piece (card, icon disc, colour pill and glow together) and the glow
   brightens; uses the separate scale property so it doesn't fight the roll-in transform */
.contacts > li{transition:opacity .6s ease-out,transform .8s cubic-bezier(.2,.8,.25,1),scale .45s var(--spring);transition-delay:var(--rd,0s),var(--rd,0s),0s}
.contacts > li::before{transition:opacity .4s ease}
@media (hover:hover){
  .contacts > li:hover .ct{border-color:color-mix(in srgb,var(--c) 55%,transparent)}
  .contacts > li:hover::before{opacity:.45}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.contacts > li:hover{scale:1.05}}
.btn,.door,.fab{overflow:hidden;isolation:isolate;background-clip:padding-box}   /* .fab stays position:fixed; padding-box stops the fill peeking out under the border during the wipe */
.btn::before,.door::before,.fab::before{content:"";position:absolute;top:0;bottom:0;left:0;width:240%;z-index:-1;background:linear-gradient(112deg,var(--ink) 0 52%,transparent 66%);transform:translateX(-68%);transition:transform .6s cubic-bezier(.65,0,.35,1);pointer-events:none}
@media (hover:hover){
  .btn:hover::before,.door:hover::before,.fab:hover::before{transform:translateX(0)}
  .btn:hover,.door:hover,.fab:hover{color:var(--bg);border-color:var(--ink)}
  /* drop the green glow and edge while the ink covers a WhatsApp button */
  .btn-wa:hover,.fab:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 18px rgba(19,17,18,.18)}
  .door:hover small{color:color-mix(in srgb,var(--bg) 80%,transparent)}
  /* icon disc flips to the opposite colour so it stays visible on the ink */
  .door:hover .ic,.door.med:hover .ic{background:var(--bg);border-color:var(--bg);color:var(--ink)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn:hover{transform:scale(1.07)}
  .nav .btn:hover{transform:scale(1.05)}
  .door:hover{transform:scale(1.045)}
  .row:hover{transform:scale(1.03)}
  .trip:hover{transform:scale(1.04)}
  .trip:hover .sw img{transform:scale(1.08)}
  .fab:hover{transform:scale(1.14)}
  .nav ul a:hover{transform:scale(1.08)}
  .btn:active,.door:active,.row:active,.trip:active,.fab:active{transform:scale(.97);transition-duration:.12s}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}