/* ============================================================
   Shree Vishal Travels — public website
   assets/css/style.css   ·   one stylesheet for every page
   Palette locked to the company logo: deep navy + gold.
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root{
  --navy:#0e2a47;   --navy-d:#0a1f36;   --navy-l:#16385c;   --navy-x:#1e4a75;
  --gold:#c9a227;   --gold-l:#e8c96a;   --gold-d:#a8861c;   --gold-f:#f3e7c2;
  --blue:#2b52a0;   --red:#d8382b;
  --ink:#1c2b3a;    --mut:#5b6b7d;      --mut-l:#8899aa;
  --paper:#f6f8fb;  --cream:#fbf8f1;    --card:#ffffff;     --line:#e3eaf2;

  --shell:1200px;
  --r:14px;   --r-s:9px;
  --sh-1:0 2px 10px rgba(14,42,71,.06);
  --sh-2:0 10px 34px rgba(14,42,71,.10);
  --sh-3:0 22px 60px rgba(14,42,71,.16);
  --ease:cubic-bezier(.22,.75,.3,1);

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* per-destination tints — the soft panel each tour card sits on */
[data-theme]{--t1:#eef3f8;--t2:#dfe8f2;--t3:#4b6a8a}
[data-theme="kerala"]     {--t1:#eaf6ee;--t2:#cfe9d8;--t3:#2f7d54}
[data-theme="goa"]        {--t1:#fff4e6;--t2:#ffe3c2;--t3:#c97a2c}
[data-theme="bali"]       {--t1:#e8f7f6;--t2:#c9ecea;--t3:#1f8b86}
[data-theme="singapore"]  {--t1:#eaf1fb;--t2:#d3e2f7;--t3:#2f5da8}
[data-theme="malaysia"]   {--t1:#eeeafb;--t2:#dcd4f5;--t3:#5442a8}
[data-theme="dubai"]      {--t1:#fdf3e3;--t2:#f7e3bd;--t3:#b4832c}
[data-theme="thailand"]   {--t1:#e6f6fb;--t2:#c5e9f4;--t3:#1d7f9c}
[data-theme="vietnam"]    {--t1:#e9f5ec;--t2:#cde9d5;--t3:#2b7a4b}
[data-theme="srilanka"]   {--t1:#f0f6e6;--t2:#dcebc4;--t3:#5c7d24}
[data-theme="kashmir"]    {--t1:#eaf1f8;--t2:#d3e3f2;--t3:#356089}
[data-theme="himachal"]   {--t1:#edf2f7;--t2:#d8e3ee;--t3:#456079}
[data-theme="uttarakhand"]{--t1:#eaf4f2;--t2:#cfe7e2;--t3:#2e7268}
[data-theme="rajasthan"]  {--t1:#fdf0e5;--t2:#f8dcc2;--t3:#c0642b}
[data-theme="varanasi"]   {--t1:#fdf1e0;--t2:#f8ddb6;--t3:#b8722a}
[data-theme="amritsar"]   {--t1:#fdf6e0;--t2:#f6e7b4;--t3:#a8861c}
[data-theme="fareast"]    {--t1:#f2edfa;--t2:#e0d6f4;--t3:#5b46a0}

/* ---------- 2. reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* the hidden attribute always wins — class display rules (flex/grid/inline-flex)
   must never resurrect an element that markup or JS has hidden */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.18;color:var(--navy)}
::selection{background:var(--gold-f);color:var(--navy)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ---------- 3. layout helpers ---------- */
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 22px}
.sec{padding:86px 0}
.sec.tight{padding:58px 0}
.sec.cream{background:var(--cream)}
.sec.white{background:#fff}
.sec.navy{background:var(--navy);color:#dbe6f2}
.sec.navy h2,.sec.navy h3{color:#fff}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;
  color:var(--gold-d);margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.sec.navy .eyebrow{color:var(--gold-l)}

.h-sec{font-size:clamp(27px,4.2vw,42px);letter-spacing:-.01em}
.h-sec em{font-style:italic;color:var(--gold-d)}
.sec.navy .h-sec em{color:var(--gold-l)}
.lead{color:var(--mut);font-size:17px;max-width:62ch;margin-top:14px}
.sec.navy .lead{color:#b9cade}
.head-c{text-align:center;max-width:730px;margin:0 auto 52px}
.head-c .lead{margin-left:auto;margin-right:auto}

.orn{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0 0}
.orn::before,.orn::after{content:"";height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--gold))}
.orn::after{background:linear-gradient(270deg,transparent,var(--gold))}
.orn i{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);display:block}

/* ---------- 4. buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:100px;border:1.5px solid transparent;cursor:pointer;
  font-size:14px;font-weight:700;letter-spacing:.03em;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s;
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 8px 22px rgba(201,162,39,.32)}
.btn-gold:hover{background:var(--gold-l);transform:translateY(-2px);box-shadow:0 14px 30px rgba(201,162,39,.42)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-l);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-line{border-color:rgba(255,255,255,.55);color:#fff}
.btn-line:hover{background:#fff;color:var(--navy);transform:translateY(-2px)}
.btn-lineink{border-color:var(--line);color:var(--navy);background:#fff}
.btn-lineink:hover{border-color:var(--gold);color:var(--gold-d);transform:translateY(-2px)}
.btn-sm{padding:10px 20px;font-size:13px}

/* ============================================================
   5. INTRO — large place-photographs sweep in from every side and
   pour into the emblem; the emblem zooms out into the brand card;
   the whole panel then turns away like a page and the site is there.
   ============================================================ */
.intro{position:fixed;inset:0;z-index:300;background:radial-gradient(ellipse at 50% 45%,#123a61 0%,#0a1f36 62%,#06172a 100%);overflow:hidden}
.intro[hidden]{display:none}
html.intro-on,html.intro-on body{overflow:hidden}

.intro .sky{position:absolute;inset:0;opacity:.5}
.intro .sky i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.6;
  animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.18}50%{opacity:.75}}

/* the flying place-photographs — large, so you can see where you are going */
.intro .swarm{position:absolute;inset:0}
.intro .tile{
  --w:clamp(210px,28vw,470px);
  position:absolute;left:50%;top:50%;width:var(--w);aspect-ratio:4/3;
  margin:calc(var(--w) * -0.375) 0 0 calc(var(--w) / -2);
  border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5);
  border:3px solid rgba(255,255,255,.8);
  transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1);
  opacity:0;animation:flyIn 2.9s cubic-bezier(.28,.04,.22,1) var(--del) forwards;
}
.intro .tile img{width:100%;height:100%;object-fit:cover}
@keyframes flyIn{
  0%   {opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1.14)}
  16%  {opacity:1}
  70%  {opacity:1;transform:translate(calc(var(--dx) * .13),calc(var(--dy) * .13)) rotate(calc(var(--rot) * .3)) scale(.5)}
  100% {opacity:0;transform:translate(0,0) rotate(0) scale(.06)}
}

/* the emblem everything pours into, which then zooms out */
.intro .core{
  position:absolute;left:50%;top:50%;width:clamp(124px,19vw,196px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.2);opacity:0;z-index:4;
  border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 0 rgba(232,201,106,.55),0 22px 60px rgba(0,0,0,.5);
  animation:coreIn 1.5s var(--ease) 2.1s forwards, coreOut 1.2s var(--ease) 5.7s forwards;
}
.intro .core img{width:72%;height:72%;border-radius:50%}
@keyframes coreIn{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.2)}
  58% {opacity:1;transform:translate(-50%,-50%) scale(1.16)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes coreOut{
  0%  {opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(3.2)}
}
.intro .ring{
  position:absolute;left:50%;top:50%;width:clamp(124px,19vw,196px);aspect-ratio:1;z-index:3;
  transform:translate(-50%,-50%) scale(.4);border-radius:50%;
  border:2px solid rgba(232,201,106,.65);opacity:0;
  animation:ringOut 1.6s ease-out 5.4s forwards;
}
@keyframes ringOut{0%{opacity:.9;transform:translate(-50%,-50%) scale(.4)}
                   100%{opacity:0;transform:translate(-50%,-50%) scale(3.6)}}

/* the brand card that lands last */
.intro .card9{
  position:absolute;left:50%;top:50%;z-index:6;text-align:center;width:min(92vw,620px);
  transform:translate(-50%,-46%);opacity:0;
  animation:cardIn 1.1s var(--ease) 6.2s forwards;
}
.intro .card9 .plate{
  width:clamp(84px,12vw,116px);aspect-ratio:1;margin:0 auto 22px;border-radius:50%;
  background:#fff;display:grid;place-items:center;box-shadow:0 20px 50px rgba(0,0,0,.45)
}
.intro .card9 .plate img{width:74%;height:74%;border-radius:50%}
.intro .ttl{font-family:var(--serif);font-weight:700;line-height:1.14;
  font-size:clamp(28px,6vw,54px);color:#fff;letter-spacing:.01em}
.intro .tag{margin-top:14px;font-size:clamp(9.5px,1.5vw,12.5px);letter-spacing:.44em;
  text-transform:uppercase;color:var(--gold-l);font-weight:600}
.intro .rule{width:min(280px,62vw);height:2px;margin:26px auto 0;background:rgba(255,255,255,.16);
  border-radius:2px;overflow:hidden}
.intro .rule i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-l));
  animation:introBar 1.3s ease-out 6.6s forwards}
@keyframes cardIn{0%{opacity:0;transform:translate(-50%,-42%) scale(.88)}
                  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes introBar{to{width:100%}}

.intro .skip{
  position:absolute;right:20px;bottom:20px;z-index:8;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.28);color:#e6eef7;border-radius:100px;
  padding:9px 20px;font-size:12.5px;font-weight:600;cursor:pointer;letter-spacing:.06em;
  transition:background .2s
}
.intro .skip:hover{background:rgba(255,255,255,.2)}

/* a clean lift — no page flip */
.intro.out{animation:introFade .85s var(--ease) forwards;pointer-events:none}
@keyframes introFade{to{opacity:0;transform:scale(1.05)}}

/* ---------- 6. page-change curtain ---------- */
.leave{
  position:fixed;inset:0;z-index:250;background:var(--navy-d);
  display:grid;place-items:center;opacity:0;pointer-events:none;
}
.leave.on{opacity:1;pointer-events:all;transition:opacity .28s var(--ease)}
.leave .mk{
  width:96px;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 18px 44px rgba(0,0,0,.45);transform:translateY(90px) scale(.55);opacity:0;
}
.leave.on .mk{animation:riseUp .62s var(--ease) forwards}
.leave .mk img{width:74%;height:74%;border-radius:50%}
@keyframes riseUp{
  0%  {opacity:0;transform:translateY(90px) scale(.55)}
  55% {opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:1;transform:translateY(-6px) scale(1.5)}
}

/* ============================================================
   7. HEADER — a floating glass capsule with a sliding marker
   ============================================================ */
.nav{position:sticky;top:0;z-index:80;padding:14px 0;transition:padding .3s var(--ease)}
.nav .shell{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:16px;height:74px;padding:0 14px 0 20px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);border-radius:100px;
  box-shadow:0 10px 34px rgba(14,42,71,.10),inset 0 1px 0 rgba(255,255,255,.9);
  transition:height .3s var(--ease),box-shadow .3s,background .3s;
}
/* a faint line of world monuments along the base of the capsule.
   The svg fills the capsule; the artwork's aspect is drawn close to the
   capsule's, so slice shows whole monuments instead of cropped bases. */
.nav .skyline{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  color:var(--navy);opacity:.08;pointer-events:none;
}
.nav.stuck .skyline{opacity:.06}
.nav .shell > *:not(.skyline){position:relative;z-index:1}
.nav.stuck{padding:8px 0}
.nav.stuck .shell{height:64px;background:rgba(255,255,255,.94);
  box-shadow:0 14px 40px rgba(14,42,71,.16),inset 0 1px 0 rgba(255,255,255,.9)}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{height:46px;width:auto;max-width:184px;object-fit:contain;transition:height .3s}
.nav.stuck .brand img{height:40px}

.links{position:relative;display:flex;align-items:center;gap:2px;margin-left:auto;padding:0 4px}
.links .ind{
  position:absolute;left:0;top:7px;bottom:7px;width:0;border-radius:100px;z-index:0;
  background:linear-gradient(180deg,var(--cream),#fff);border:1px solid var(--gold-f);
  box-shadow:0 3px 10px rgba(201,162,39,.16);
  transform:translateX(0);opacity:0;
  transition:transform .38s var(--ease),width .38s var(--ease),opacity .25s;
}
.links a{
  position:relative;z-index:1;padding:11px 16px;border-radius:100px;
  font-size:14.5px;font-weight:600;color:var(--navy);transition:color .22s;white-space:nowrap;
}
.links a:hover,.links a.on{color:var(--gold-d)}
.links a.on{font-weight:700}

.burger{display:none;width:46px;height:46px;border:1px solid var(--line);background:#fff;border-radius:50%;
  cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;margin-left:auto;
  box-shadow:var(--sh-1)}
.burger i{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s}
.burger.x i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.scrim{position:fixed;inset:0;background:rgba(8,20,35,.55);opacity:0;visibility:hidden;transition:.3s;z-index:90}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(88vw,340px);background:#fff;z-index:95;
  transform:translateX(105%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column;padding:22px;overflow-y:auto;box-shadow:-20px 0 60px rgba(8,20,35,.25)}
.drawer.on{transform:none}
.drawer .dhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.drawer .dhead img{height:42px;width:auto;max-width:150px;object-fit:contain}
.dclose{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:9px;
  cursor:pointer;font-size:17px;color:var(--navy);line-height:1}
.drawer nav{display:flex;flex-direction:column;margin-top:14px}
.drawer nav a{padding:15px 6px;border-bottom:1px solid var(--line);font-weight:600;font-size:16px;
  color:var(--navy);display:flex;align-items:center;justify-content:space-between}
.drawer nav a.on{color:var(--gold-d)}
.drawer nav a span{color:var(--gold);font-size:14px}
.dfoot{margin-top:auto;padding-top:22px;font-size:13.5px;color:var(--mut);line-height:1.9}
.dfoot b{color:var(--navy);display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}

/* The capsule floats, so the hero picture has to start above it and run
   underneath. The scrim and drawer sit between the header and the hero in
   the markup, so this cannot be a sibling selector. */
.reel,.phero{margin-top:-102px}

/* ---------- 8. hero reel (home) ---------- */
.reel{position:relative;height:min(94vh,800px);min-height:520px;overflow:hidden;background:var(--navy-d);isolation:isolate}
/* the cross-fade lives on the PHOTOGRAPH only — the caption text must paint
   in its final color at once, never fade in with the image (a pane-level
   opacity fade also drops the text under the ::after wash mid-transition) */
.reel .pane{position:absolute;inset:0}
.reel .pane i{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.01);display:block;opacity:0;transition:opacity 1.6s var(--ease)}
.reel .pane.on i{opacity:1;animation:ken 7.5s linear forwards}
.reel .pane .hinfo{visibility:hidden}
.reel .pane.on .hinfo{visibility:visible}
@keyframes ken{from{transform:scale(1.01)}to{transform:scale(1.08)}}
/* the wash is light on purpose — the photograph stays BRIGHT; the info text
   carries its own shadows, and only the very bottom deepens for the caption */
.reel::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,22,38,.42) 0%,rgba(8,22,38,.08) 34%,rgba(8,22,38,.22) 68%,rgba(8,22,38,.66) 100%)}
/* only the pane on screen is clickable */
.reel .pane{pointer-events:none}
.reel .pane.on{pointer-events:auto}

/* the tour's own details, bottom-left over its photograph */
.reel .hinfo{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:0 clamp(18px,4vw,56px) clamp(78px,11vh,110px);
  max-width:880px;color:#fff;
}
/* no boxes, no pills — just type over the photograph */
.reel .hkind{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
  color:var(--gold-l);font-size:clamp(10px,1.3vw,12px);font-weight:800;
  letter-spacing:.28em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.reel .hkind::before{content:"";width:34px;height:2px;background:var(--gold-l);border-radius:2px;flex:none}
.reel .hkind .trend{font-style:normal;color:#fff;letter-spacing:.14em}
.reel .hinfo h2{
  color:#fff;font-size:clamp(21px,4.4vw,44px);line-height:1.14;letter-spacing:-.01em;
  text-shadow:0 4px 26px rgba(0,0,0,.5);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.reel .hroute{
  display:flex;align-items:flex-start;gap:7px;margin-top:10px;
  font-size:clamp(12.5px,1.5vw,14.5px);color:#e6eef7;text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.reel .hroute svg{width:15px;height:15px;color:var(--gold-l);flex:none;margin-top:2px}
.reel .hroute span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.reel .hmeta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:13px;
  color:#fff;font-size:clamp(13px,1.7vw,16.5px);font-weight:600;
  text-shadow:0 2px 14px rgba(0,0,0,.65);
}
.reel .hmeta b{font-weight:800;color:#fff;letter-spacing:.03em}
.reel .hmeta em{font-style:normal;color:var(--gold-l);font-weight:700}
.reel .hmeta .sep{width:7px;height:7px;background:var(--gold-l);transform:rotate(45deg);
  display:inline-block;flex:none;box-shadow:0 1px 6px rgba(0,0,0,.5)}
.reel .say{position:absolute;inset:auto 0 0 0;z-index:3;padding:0 22px 74px;text-align:center}
.reel .say .in{max-width:900px;margin:0 auto}
.reel h1{font-size:clamp(30px,5.6vw,60px);color:#fff;letter-spacing:-.01em;line-height:1.1;
  text-shadow:0 4px 30px rgba(0,0,0,.45)}
.reel h1 em{font-style:italic;color:var(--gold-l);display:block}
.reel .tag{margin-top:16px;font-size:clamp(10px,1.5vw,12.5px);letter-spacing:.4em;text-transform:uppercase;
  color:#dbe6f2;font-weight:600}
.reel .where{position:absolute;left:0;right:0;bottom:22px;z-index:4;display:flex;align-items:center;
  justify-content:center;flex-wrap:wrap;gap:10px 14px;padding:0 18px;max-width:100%}
.reel .cap{font-size:clamp(9.5px,1.3vw,11.5px);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);display:flex;align-items:center;gap:8px;min-width:0;max-width:min(72vw,560px)}
.reel .cap b{color:var(--gold-l);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.reel .pips{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.reel .pips i{width:20px;height:3px;border-radius:3px;background:rgba(255,255,255,.28);cursor:pointer;
  display:block;transition:background .35s,transform .35s}
.reel .pips i.on{background:var(--gold-l);transform:scaleY(1.6)}

/* ---------- 9. marquee rails ---------- */
.strip{padding:76px 0;overflow:hidden}
.strip .top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  max-width:var(--shell);margin:0 auto 34px;padding:0 22px}
.strip .top .lead{margin-top:9px;font-size:15.6px}
.strip .top .btn{flex:none}

/* the rail is a real scroller now (22 Aug 2026): the frame loop in main.js nudges it
   along, and every ordinary gesture — grab, flick, wheel, the two arrows — just works. */
.railwrap{position:relative}
.rail{position:relative;overflow:hidden;padding:8px 0 16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
/* the row is moved by TRANSFORM — the browser composites that on its own layer, which
   is what makes it glide; scrollLeft dragged layout and paint along every frame. */
.rail .run{display:flex;gap:20px;width:max-content;transform:translate3d(0,0,0)}
/* the two arrows — classic, quiet, and out of the way on a phone */
.rarr{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.94);color:var(--navy);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(14,42,71,.14);
  transition:.22s var(--ease);opacity:0}
.railwrap:hover .rarr,.rarr:focus-visible{opacity:1}
.rarr:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);transform:translateY(-50%) scale(1.07)}
.rarr svg{width:17px;height:17px}
.rarr.prev{left:6px}
.rarr.prev svg{transform:rotate(180deg)}
.rarr.next{right:6px}
@media (max-width:760px){.rarr{opacity:1;width:36px;height:36px}.rarr svg{width:15px;height:15px}}
@media (hover:none){.rarr{opacity:1}}

/* the themed panel each card sits on */
.slot{
  position:relative;flex:none;width:clamp(238px,24vw,296px);padding:13px;border-radius:20px;
  background:linear-gradient(150deg,var(--t1),var(--t2));overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.slot:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(14,42,71,.16)}
.slot .motif{position:absolute;right:-16%;bottom:-8%;width:78%;color:var(--t3);opacity:.16;z-index:0;pointer-events:none}
.slot .who{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 4px 10px;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);
}

/* ---------- 10. tour card (rails) ---------- */
.tcard{position:relative;z-index:1;background:var(--card);border-radius:var(--r);overflow:hidden;
  box-shadow:0 6px 18px rgba(14,42,71,.10);display:block}
.tcard .pic{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy-l)}
.tcard .pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.slot:hover .tcard .pic img{transform:scale(1.07)}
.tcard .pic::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,31,54,0) 48%,rgba(10,31,54,.66))}
.tcard .dur{position:absolute;right:11px;bottom:10px;z-index:2;color:var(--gold-l);
  font-size:11.5px;font-weight:700;letter-spacing:.05em}
.tcard .body{padding:15px 16px 17px}
.tcard h3{font-size:16.5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tcard .rte{margin-top:6px;font-size:12.2px;color:var(--mut);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.tcard .days{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--t3);letter-spacing:.03em}

/* ---------- 11. page hero (inner pages) ---------- */
.phero{position:relative;overflow:hidden;background:var(--navy);isolation:isolate}
.phero .bg{position:absolute;inset:0;z-index:-2}
.phero .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,31,54,.90),rgba(10,31,54,.74))}
.phero .shell{padding:158px 22px 74px;text-align:center}
.phero h1{font-size:clamp(30px,5.2vw,50px);color:#fff}
.phero h1 em{font-style:italic;color:var(--gold-l)}
.phero p{color:#c8d8e8;max-width:62ch;margin:16px auto 0;font-size:16.5px}
.crumb{display:flex;justify-content:center;gap:9px;font-size:12.5px;color:#9db3c9;margin-bottom:16px;letter-spacing:.04em}
.crumb a:hover{color:var(--gold-l)}
.crumb i{font-style:normal;color:var(--gold)}

/* ============================================================
   12. TOUR PAGE — alternating rows, each with a pile of three
   photographs that shuffles every five seconds
   ============================================================ */
.trow{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,4.4vw,64px);align-items:center;
  padding:44px clamp(20px,3vw,40px);margin-bottom:22px;border-radius:26px;
  scroll-margin-top:130px;
  /* rows slide in from the side; clip that travel so it never widens the page.
     overflow-x:clip (not hidden) leaves the vertical axis alone. */
  overflow-x:clip;
}
/* the whole row is washed in its destination's colours */
.trow::before{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:26px;
  background:linear-gradient(102deg,var(--t2),var(--t1) 46%,#fff 88%);
}
.trow.alt::before{background:linear-gradient(258deg,var(--t2),var(--t1) 46%,#fff 88%)}
.trow .motif{
  position:absolute;right:1.5%;bottom:-2%;width:min(300px,27%);z-index:-1;
  color:var(--t3);opacity:.14;pointer-events:none;
}
.trow.alt .motif{right:auto;left:1.5%;transform:scaleX(-1)}
.trow.alt .pile{order:2}
.js .trow .pile,.js .trow .said{opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .trow .pile{transform:translateX(-60px)}
.js .trow .said{transform:translateX(40px)}
.js .trow.alt .pile{transform:translateX(60px)}
.js .trow.alt .said{transform:translateX(-40px)}
.js .trow.in .pile,.js .trow.in .said{opacity:1;transform:none}

/* The tilted back layers are transforms, so they paint outside the grid cell.
   width:100% matters — a grid item with auto side margins is sized to its
   content, and every layer here is absolutely positioned, so it would
   collapse to nothing (which is exactly what happened on phones). */
.pile{position:relative;width:100%;aspect-ratio:4/3.1;margin:6px 46px 30px}
.pile .sh{
  position:absolute;inset:0;border-radius:16px;overflow:hidden;background:var(--navy-l);
  box-shadow:0 18px 44px rgba(14,42,71,.20);transition:transform .6s var(--ease),opacity .6s;
}
.pile .sh img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  opacity:0;transition:opacity .9s var(--ease)}
.pile .sh img.on{opacity:1}
.pile .sh:nth-child(1){transform:translate(11%,15%) rotate(6.5deg) scale(.93);opacity:.62;z-index:1}
.pile .sh:nth-child(2){transform:translate(5.5%,7.5%) rotate(3.2deg) scale(.965);opacity:.85;z-index:2}
.pile .sh:nth-child(3){transform:none;z-index:3}
.pile .badge9{
  position:absolute;left:-14px;bottom:-16px;z-index:5;background:#fff;border-radius:14px;
  box-shadow:var(--sh-2);padding:13px 18px;border:1px solid var(--line);text-align:center
}
.pile .badge9 b{display:block;font-family:var(--serif);font-size:24px;color:var(--t3);line-height:1}
.pile .badge9 span{display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mut);margin-top:5px;font-weight:700}
.pile .dots9{position:absolute;right:12px;bottom:12px;z-index:5;display:flex;gap:5px}
.pile .dots9 i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);display:block;transition:.4s}
.pile .dots9 i.on{background:var(--gold-l);width:18px;border-radius:100px}

.said .kind{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--t3);
  background:linear-gradient(150deg,var(--t1),var(--t2));border:1px solid var(--t2);
  padding:6px 14px;border-radius:100px;margin-bottom:14px}
.said h3{font-size:clamp(21px,2.7vw,29px);line-height:1.22}
.said .meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:13.4px;color:var(--mut)}
.said .meta span{display:inline-flex;align-items:center;gap:7px}
.said .meta svg{width:15px;height:15px;color:var(--t3);flex:none}
.said .meta b{color:var(--navy);font-weight:700}
.said p{color:var(--mut);font-size:15px;margin-top:14px;max-width:56ch}
.said .dep{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.said .dep i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--navy-l);background:var(--cream);
  border:1px solid var(--gold-f);padding:5px 11px;border-radius:100px}
.said .dep i.sold{color:var(--mut-l);background:var(--paper);border-color:var(--line);text-decoration:line-through}
.said .go{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:12px 24px;border-radius:100px;
  background:var(--navy);color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.03em;cursor:pointer;
  border:0;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
}
.said .go:hover{background:var(--navy-l);transform:translateY(-2px);box-shadow:var(--sh-2)}
.said .go svg{width:16px;height:16px}

/* ---------- 13. detail window ---------- */
.win{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:22px;
  opacity:0;visibility:hidden;transition:.3s var(--ease)}
.win.on{opacity:1;visibility:visible}
.win .dim{position:absolute;inset:0;background:rgba(8,20,35,.66);backdrop-filter:blur(3px)}
.win .box{position:relative;z-index:2;background:#fff;border-radius:18px;width:min(920px,100%);
  max-height:88vh;overflow:auto;box-shadow:var(--sh-3);transform:translateY(24px) scale(.98);
  transition:transform .35s var(--ease)}
.win.on .box{transform:none}
.win .hd{position:relative;aspect-ratio:21/8;overflow:hidden;background:var(--navy)}
.win .hd img{width:100%;height:100%;object-fit:cover}
.win .hd::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,31,54,.24),rgba(10,31,54,.86))}
.win .hd .t{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 30px;color:#fff}
.win .hd .t h3{color:#fff;font-size:clamp(20px,3vw,30px)}
.win .hd .t .m{margin-top:9px;font-size:13px;color:#c8d8e8;display:flex;flex-wrap:wrap;gap:6px 18px}
.win .x{position:absolute;top:14px;right:14px;z-index:4;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);border:0;cursor:pointer;font-size:18px;color:var(--navy);line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.2)}
.win .bd{padding:28px 30px 34px}
.win .bd h4{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-d);font-weight:800;margin:26px 0 12px}
.win .bd h4:first-child{margin-top:0}
.win .bd p{color:var(--mut);font-size:15px}
.win .bd ul{display:grid;gap:9px}
.win .bd ul li{display:flex;gap:10px;font-size:14.4px;color:var(--ink)}
.win .bd ul li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--gold);margin-top:9px}
.win .bd .two{display:grid;grid-template-columns:1fr 1fr;gap:8px 30px}
.win .day{border-left:2px solid var(--gold-f);padding:0 0 16px 18px;position:relative}
.win .day::before{content:"";position:absolute;left:-6px;top:5px;width:10px;height:10px;
  border-radius:50%;background:#fff;border:2px solid var(--gold)}
.win .day b{display:block;color:var(--navy);font-size:15px;margin-bottom:5px}
.win .day span{display:block;color:var(--mut);font-size:14px}

/* ---------- 14. cards & grids ---------- */
.grid{display:grid;gap:24px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:#d6e2ee}

.svc{padding:32px 28px;position:relative;overflow:hidden}
.svc::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-l));transition:width .4s var(--ease)}
.svc:hover::before{width:100%}
.svc .ic{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(150deg,var(--navy),var(--navy-x));color:var(--gold-l);
  box-shadow:0 8px 20px rgba(14,42,71,.20);transition:transform .35s var(--ease)}
.svc:hover .ic{transform:rotate(-6deg) scale(1.05)}
.svc .ic svg{width:27px;height:27px}
.svc h3{font-size:20px;margin-bottom:9px}
.svc p{color:var(--mut);font-size:14.6px}
.svc .more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:13px;
  font-weight:700;color:var(--gold-d);letter-spacing:.04em}
.svc .more svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.svc:hover .more svg{transform:translateX(4px)}

/* ---------- 15. split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.split.flip .fig{order:2}
.fig{position:relative}
.fig .frame{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-3);position:relative;z-index:2;background:var(--navy)}
.fig .frame img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.fig::before{content:"";position:absolute;inset:-16px -16px 22px 22px;border:2px solid var(--gold);
  border-radius:var(--r);z-index:1;opacity:.55}
.fig .badge{position:absolute;right:-14px;bottom:-22px;z-index:3;background:#fff;border-radius:var(--r);
  box-shadow:var(--sh-2);padding:16px 20px;border:1px solid var(--line);text-align:center;min-width:132px}
.fig .badge b{display:block;font-family:var(--serif);font-size:29px;color:var(--gold-d);line-height:1}
.fig .badge span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);margin-top:6px;font-weight:600}

.ticks{margin-top:26px;display:grid;gap:14px}
.ticks li{display:flex;gap:13px;align-items:flex-start;font-size:15px;color:var(--ink)}
.ticks li svg{width:21px;height:21px;flex:none;color:var(--gold-d);margin-top:2px}
.ticks li b{display:block;color:var(--navy);font-weight:700;margin-bottom:2px}
.ticks li p{color:var(--mut);font-size:14.3px;margin:0}

.feat{display:grid;grid-template-columns:1fr 1fr;gap:13px 26px;margin-top:22px}
.feat li{display:flex;gap:11px;align-items:flex-start;font-size:14.6px;color:var(--ink)}
.feat li svg{width:18px;height:18px;color:var(--gold-d);flex:none;margin-top:3px}
.note{margin-top:24px;padding:15px 18px;border-left:3px solid var(--gold);background:var(--cream);
  border-radius:0 var(--r-s) var(--r-s) 0;font-size:14px;color:var(--mut)}
.note b{color:var(--navy)}

/* ---------- 16. ribbon / steps / timeline ---------- */
.ribbon{background:var(--navy)}
.ribbon .shell{display:grid;grid-template-columns:repeat(var(--stat-n,4),1fr);gap:2px}
.ribbon .r{padding:32px 16px;text-align:center;position:relative}
.ribbon .r + .r::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:rgba(255,255,255,.13)}
.ribbon b{display:block;font-family:var(--serif);font-size:clamp(26px,3.4vw,36px);color:var(--gold-l);line-height:1}
.ribbon span{display:block;margin-top:9px;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:#a9bed4;font-weight:600}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:s}
.step{position:relative;padding-top:8px}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--serif);font-size:44px;color:var(--gold);opacity:.30;line-height:1;display:block;margin-bottom:12px}
.step h3{font-size:19px;margin-bottom:8px}
.step p{color:var(--mut);font-size:14.4px}
.step::after{content:"";position:absolute;top:22px;left:calc(100% - 6px);width:calc(100% - 46px);height:1px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 12px);opacity:.5}
.steps .step:last-child::after{display:none}

.tline{position:relative;padding-left:34px}
.tline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--gold),rgba(201,162,39,.15))}
.tline .ev{position:relative;padding-bottom:32px}
.tline .ev:last-child{padding-bottom:0}
.tline .ev::before{content:"";position:absolute;left:-33px;top:5px;width:18px;height:18px;
  border-radius:50%;background:#fff;border:3px solid var(--gold)}
.tline .yr{font-family:var(--serif);font-size:20px;color:var(--gold-d);font-weight:700}
.tline h3{font-size:18px;margin:2px 0 6px}
.tline p{color:var(--mut);font-size:14.5px}

/* ---------- 17. accordion ---------- */
.acc{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;box-shadow:var(--sh-1)}
.acc .it + .it{border-top:1px solid var(--line)}
.acc .q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:16px;font-weight:600;color:var(--navy);font-family:var(--serif);transition:color .2s}
.acc .q:hover{color:var(--gold-d)}
.acc .q i{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--gold);
  display:grid;place-items:center;color:var(--gold-d);font-style:normal;font-size:16px;line-height:1;
  transition:transform .3s var(--ease),background .25s}
.acc .it.on .q i{transform:rotate(45deg);background:var(--gold);color:#fff}
.acc .a{max-height:0;overflow:hidden;transition:max-height .38s var(--ease)}
.acc .a p{padding:0 24px 22px;color:var(--mut);font-size:15px}

/* ---------- 18. filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:14px}
.filters button{padding:10px 21px;border-radius:100px;border:1.5px solid var(--line);background:#fff;
  font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;transition:.25s var(--ease)}
.filters button:hover{border-color:var(--gold);color:var(--gold-d)}
.filters button.on{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:var(--sh-1)}
.no-hit{display:none;text-align:center;color:var(--mut);padding:36px 0;font-size:15px}
.no-hit.on{display:block}

/* ---------- 19. credits table ---------- */
.creds{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;box-shadow:var(--sh-1)}
.creds .row{display:grid;grid-template-columns:1.6fr 1fr auto;gap:18px;padding:15px 22px;font-size:14px;align-items:center}
.creds .row + .row{border-top:1px solid var(--line)}
.creds .row.hd{background:var(--cream);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--navy)}
.creds .row b{font-weight:600;color:var(--navy);overflow-wrap:anywhere}
.creds .row span{color:var(--mut);overflow-wrap:anywhere}
.creds .row em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--gold-d);
  background:var(--cream);border:1px solid var(--gold-f);padding:4px 10px;border-radius:100px;white-space:nowrap}

/* ---------- 20. footer ---------- */
.foot{background:var(--navy-d);color:#a9bed4;padding-top:66px}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:40px;padding-bottom:50px}
.foot h4{color:#fff;font-family:var(--sans);font-size:12px;letter-spacing:.17em;text-transform:uppercase;
  margin-bottom:20px;font-weight:800}
.foot h4::after{content:"";display:block;width:32px;height:2px;background:var(--gold);margin-top:9px;border-radius:2px}
.fbrand b{display:block;font-family:var(--serif);font-size:23px;color:#fff;letter-spacing:.01em}
.fbrand span{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-l);
  margin-top:5px;font-weight:600}
.fbrand p{font-size:14px;line-height:1.85;margin-top:18px;max-width:33ch}
.foot ul li{margin-bottom:11px}
.foot ul a{font-size:14.5px;transition:color .2s,padding-left .2s;display:inline-block}
.foot ul a:hover{color:var(--gold-l);padding-left:5px}
.fcon li{display:flex;gap:12px;margin-bottom:16px;font-size:14.4px;line-height:1.7}
.fcon li > span,.fcon li > a{min-width:0;overflow-wrap:anywhere}
.fcon svg{width:17px;height:17px;color:var(--gold);flex:none;margin-top:4px}
.fcon a:hover{color:var(--gold-l)}
.fcon b{color:#fff;font-weight:600}
/* the office address is a Google Maps link — a dotted gold underline says "tappable"
   without shouting; the small arrow marks that it leaves the site. Same treatment in
   the mobile drawer. */
.fmap{text-decoration:none;border-bottom:1px dotted rgba(232,201,106,.5);transition:color .16s,border-color .16s}
.fmap:hover{color:var(--gold-l);border-bottom-color:var(--gold-l)}
.fmapi{font-size:.85em;opacity:.75;white-space:nowrap}
.dfoot .fmap{color:inherit;border-bottom-color:rgba(201,162,39,.45)}
.dfoot .fmap:hover{color:var(--gold-d);border-bottom-color:var(--gold-d)}
.social{display:flex;gap:10px;margin-top:22px}
.social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;transition:.25s var(--ease)}
.social a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);transform:translateY(-3px)}
.social svg{width:16px;height:16px}
.fbase{border-top:1px solid rgba(255,255,255,.10);padding:20px 0;font-size:13px}
.fbase .shell{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.fbase a:hover{color:var(--gold-l)}

.totop{position:fixed;right:22px;bottom:22px;z-index:70;width:44px;height:44px;border-radius:50%;
  background:var(--navy);color:#fff;display:grid;place-items:center;border:0;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s var(--ease);box-shadow:var(--sh-2)}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop svg{width:18px;height:18px}

/* ---------- 21. reveal on scroll ---------- */
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}
.js .rv.d3{transition-delay:.24s}.js .rv.d4{transition-delay:.32s}

/* ---------- 22. responsive ---------- */
@media (max-width:1140px){
  .links a{padding:11px 12px;font-size:13.8px}
  .brand img{height:42px;max-width:158px}
  .split{gap:40px}
}
@media (max-width:1010px){
  .links{display:none}
  .burger{display:flex}
  .brand img{height:44px;max-width:180px}
  .sec{padding:68px 0}
  .strip{padding:60px 0}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:34px 26px}
  .step::after{display:none}
  .split{grid-template-columns:1fr;gap:52px}
  .split.flip .fig{order:0}
  .fig::before{inset:-12px -12px 18px 18px}
  .trow{grid-template-columns:1fr;gap:30px;padding:32px 22px}
  .trow.alt .pile{order:0}
  .trow.alt::before{background:linear-gradient(168deg,var(--t2),var(--t1) 52%,#fff 92%)}
  .trow::before{background:linear-gradient(168deg,var(--t2),var(--t1) 52%,#fff 92%)}
  .trow .motif,.trow.alt .motif{right:-4%;left:auto;bottom:-3%;width:min(220px,40%);transform:none}
  .js .trow .pile,.js .trow .said,.js .trow.alt .pile,.js .trow.alt .said{transform:translateY(34px)}
  .pile{width:auto;max-width:560px;margin:6px 34px 30px}
  .foot .cols{grid-template-columns:1.4fr 1fr 1.4fr;gap:34px}
  .foot .cols > div:nth-child(3){display:none}
}
@media (max-width:760px){
  .g-3,.g-2{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr;gap:12px}
  .win .bd .two{grid-template-columns:1fr}
  .ribbon .shell{grid-template-columns:repeat(2,1fr)}
  .ribbon .r:nth-child(2n+1)::before{display:none}
  .ribbon .r:nth-child(n+3){border-top:1px solid rgba(255,255,255,.13)}
  .strip .top{flex-direction:column;align-items:flex-start;gap:14px}
  .reel{height:min(84vh,640px)}
  .reel .say{padding-bottom:84px}
  .phero .shell{padding:132px 22px 54px}
  .nav + .reel,.nav + .phero,.nav.stuck + .reel,.nav.stuck + .phero{margin-top:-96px}
  .foot .cols{grid-template-columns:1fr 1fr;gap:32px}
  .foot .cols > div:nth-child(3){display:block}
  .fbrand,.fcon{grid-column:1/-1}
  .creds .row{grid-template-columns:1fr;gap:6px}
  .creds .row.hd{display:none}
  .creds .row em{justify-self:start}
  .win .hd{aspect-ratio:16/9}
  .win .bd{padding:22px 20px 28px}
  .win .hd .t{padding:18px 20px}
}
@media (max-width:560px){
  .shell{padding:0 15px}
  .nav{padding:10px 0}
  .nav .shell{height:66px;padding:0 10px 0 14px}
  .sec{padding:56px 0}
  .strip{padding:48px 0}
  .g-4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:28px}
  .foot .cols{grid-template-columns:1fr}
  .fbase .shell{justify-content:center;text-align:center}
  .tline{padding-left:28px}
  .tline .ev::before{left:-27px;width:15px;height:15px}
  .totop{right:16px;bottom:16px;width:40px;height:40px}
  .reel .where{flex-direction:column;gap:10px;bottom:18px}
  .rail{-webkit-mask-image:none;mask-image:none}
  .trow{padding:26px 16px;border-radius:20px;margin-bottom:16px}
  .trow::before{border-radius:20px}
  .pile{margin:6px 26px 26px}
  .pile .sh:nth-child(1){transform:translate(9%,12%) rotate(5.5deg) scale(.94)}
  .pile .sh:nth-child(2){transform:translate(4.5%,6%) rotate(2.8deg) scale(.97)}
  .pile .badge9{left:-8px;bottom:-14px;padding:10px 14px}
  .said h3{font-size:22px}
  .win{padding:0}
  .win .box{max-height:100vh;border-radius:0;width:100%}
}
@media (max-width:380px){
  .brand img{height:36px;max-width:132px}
  .btn{padding:12px 20px;font-size:13.5px}
  .h-sec{font-size:25px}
}

/* ============================================================
   24. NEW COMPONENTS — search, scroll cue, sketch hero, tour
   cards, full-screen detail window, auth page
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- the scroll-down cue, home page only ---- */
.scue{
  position:fixed;left:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;
  align-items:center;gap:8px;opacity:1;transition:opacity .4s,transform .4s;
}
.scue.off{opacity:0;pointer-events:none;transform:translateY(14px)}
.scue .ring{
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,31,54,.6);border:2px solid var(--gold-l);
  box-shadow:0 10px 26px rgba(0,0,0,.4);transition:background .25s,transform .25s var(--ease);
}
.scue:hover .ring{background:var(--gold);transform:translateY(2px)}
.scue:hover .ring svg{color:var(--navy)}
.scue .ring svg{width:22px;height:22px;color:var(--gold-l);animation:cueDip 1.5s ease-in-out infinite}
@keyframes cueDip{0%,100%{transform:translateY(-3px);opacity:.55}50%{transform:translateY(4px);opacity:1}}
.scue .txt{font-size:9px;letter-spacing:.26em;text-transform:uppercase;font-weight:800;
  color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.65)}

/* ---- header search + auth links ---- */
.hsearch{
  display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 auto;max-width:250px;
  background:var(--paper);border:1.5px solid var(--line);border-radius:100px;
  padding:0 8px 0 14px;height:44px;transition:border-color .25s,box-shadow .25s;
}
.hsearch:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.14)}
.hsearch svg{width:17px;height:17px;color:var(--gold-d);flex:none}
.hsearch input{
  border:0;background:none;outline:none;min-width:0;flex:1;font-size:13.5px;color:var(--navy);
  height:100%;
}
.hsearch input::placeholder{color:var(--mut-l);font-weight:500}
.hsearch{min-width:120px}
.asign{white-space:nowrap}
@media (max-width:1240px){
  .asign{display:none}
  .links a{padding:11px 11px;font-size:13.5px}
}
@media (max-width:1010px){
  .hsearch{max-width:none}
}
@media (max-width:560px){
  .hsearch{height:40px;padding:0 6px 0 12px}
  .hsearch input{font-size:12.5px}
  .scue{left:12px;bottom:14px}
}

/* ---- the tour-page hero: paper, ink, animated sketches ---- */
.thero{
  position:relative;overflow:hidden;isolation:isolate;margin-top:-102px;
  background:linear-gradient(180deg,#faf7ef,#f2ede0);
}
.thero .sk{position:absolute;inset:auto 0 -2% 0;height:88%;width:100%;z-index:-1;color:#24364d;opacity:.5}
.thero .sk .dr{
  fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:skdraw 12s ease-in-out infinite;
}
.thero .sk .dr:nth-of-type(3n){animation-delay:.9s}
.thero .sk .dr:nth-of-type(3n+1){animation-delay:2s}
.thero .sk .dr:nth-of-type(5n){animation-delay:3.2s}
@keyframes skdraw{0%{stroke-dashoffset:100;opacity:0}12%{opacity:1}
  42%,78%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
/* the dotted flight line drifts forever; the little plane holds its point */
.thero .sk .fl{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:3 9;
  opacity:.6;animation:flmove 26s linear infinite}
@keyframes flmove{to{stroke-dashoffset:-240}}
.thero .sk .pl{fill:currentColor;opacity:.75}

/* auth art is a STILL hand-drawn collage — ink lines, a few coloured pieces */
.aart .ln{fill:none;stroke:#243750;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.aart .lnr{fill:none;stroke:#b2443a;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.aart .lng{fill:none;stroke:#a8861c;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.aart .dot{fill:none;stroke:#243750;stroke-width:2;stroke-dasharray:3 9;opacity:.6}
.aart .ink{fill:#243750}
.thero .shell{padding:150px 22px 118px;text-align:center}
.thero h1{font-size:clamp(30px,5.2vw,50px);color:var(--navy)}
.thero h1 em{font-style:italic;color:var(--gold-d)}
.thero p{color:var(--mut);max-width:62ch;margin:14px auto 0;font-size:16.5px}
.thero .crumb{color:var(--mut-l)}
.thero .crumb a:hover{color:var(--gold-d)}

/* the search + tabs that drive the grid */
.tsearch{
  display:flex;align-items:center;gap:10px;max-width:620px;margin:0 auto 22px;
  background:#fff;border:1.5px solid var(--line);border-radius:100px;padding:0 10px 0 18px;
  height:52px;box-shadow:var(--sh-1);transition:border-color .25s,box-shadow .25s;
}
.tsearch:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.14)}
.tsearch svg{width:19px;height:19px;color:var(--gold-d);flex:none}
.tsearch input{border:0;background:none;outline:none;flex:1;min-width:0;font-size:15px;color:var(--navy)}

/* ---- the tour card grid ---- */
.cardgrid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:32px}
.gcard{
  position:relative;isolation:isolate;border-radius:22px;padding:12px;overflow:hidden;
  background:linear-gradient(160deg,var(--t1),var(--t2));
  border:1px solid rgba(255,255,255,.7);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease);
}
.gcard:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(14,42,71,.18)}
.gcard .gc{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;
  background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 16px rgba(14,42,71,.08)}
.gcard .pic{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy-l)}
.gcard .pic .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--ease)}
.gcard .pic .ph.on{opacity:1}
.gcard .pic::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,31,54,.06) 0%,rgba(10,31,54,0) 40%,rgba(10,31,54,.62) 100%)}
.gcard .ktag{position:absolute;top:11px;left:11px;z-index:2;background:rgba(255,255,255,.95);color:var(--t3);
  font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:5px 11px;border-radius:100px;
  box-shadow:0 3px 10px rgba(0,0,0,.15)}
.gcard .trnd{position:absolute;top:11px;right:11px;z-index:2;background:var(--gold);color:var(--navy);
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:100px}
.gcard .dur{position:absolute;right:12px;bottom:10px;z-index:2;color:var(--gold-l);
  font-size:12px;font-weight:800;letter-spacing:.06em;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.gcard .pdots{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;gap:5px}
.gcard .pdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);display:block;transition:.4s}
.gcard .pdots i.on{background:var(--gold-l);width:17px;border-radius:100px}
.gcard .cbody{display:flex;flex-direction:column;flex:1;padding:16px 17px 18px}
.gcard h3{font-size:17.5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard .grout{display:flex;gap:7px;font-size:12.8px;color:var(--mut);margin-top:8px;line-height:1.55}
.gcard .grout svg{width:14px;height:14px;color:var(--t3);flex:none;margin-top:2px}
.gcard .grout span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard .cmeta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 14px;margin-top:11px;
  padding-top:11px;border-top:1px dashed var(--line);font-size:12.6px;color:var(--mut)}
.gcard .cmeta b{color:var(--navy);font-weight:800}
.gcard .gdep{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.gcard .gdep i{font-style:normal;font-size:11px;font-weight:700;color:var(--navy-l);background:var(--cream);
  border:1px solid var(--gold-f);padding:4px 11px;border-radius:100px}
.gcard .gdep i.sold{color:var(--mut-l);background:var(--paper);border-color:var(--line);text-decoration:line-through}
.gcard .gbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:100px;border:0;cursor:pointer;margin-top:auto;
  background:var(--navy);color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;
  transition:background .25s,transform .25s var(--ease);
}
.gcard .cbody > .gbtn{margin-top:16px}
.gcard .gbtn:hover{background:var(--navy-l);transform:translateY(-2px)}
.gcard .gbtn svg{width:14px;height:14px}

/* ---- the detail window, full screen ----
   The BOX is full-bleed (so the hero photograph runs edge to edge), but the
   reading matter inside — thumbnails, info boxes, body, even the hero's own
   caption — sits on ONE centred ~980px column, so the view is perfectly
   centred on a wide screen instead of hugging the left edge. */
.win{padding:0}
.win .box{
  width:100%;height:100%;max-height:none;border-radius:0;
  transform:translateY(30px);
}
.win.on .box{transform:none}
.win .hd{aspect-ratio:auto;height:min(44vh,440px)}
.win .hd .t{padding:22px clamp(18px,4vw,44px) 20px;max-width:980px;margin:0 auto}
.win .hd .t .chip{
  display:inline-flex;padding:6px 14px;border-radius:100px;margin-bottom:11px;
  background:var(--gold);color:var(--navy);
  font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.win .strip{
  display:flex;flex-wrap:wrap;gap:9px;padding:14px clamp(18px,4vw,44px) 6px;
  max-width:980px;margin:0 auto;width:100%;
}
.win .strip button{
  flex:none;width:86px;aspect-ratio:4/3;border-radius:9px;overflow:hidden;cursor:pointer;
  border:2.5px solid transparent;padding:0;background:var(--paper);transition:border-color .25s;
}
.win .strip button.on{border-color:var(--gold)}
.win .strip img{width:100%;height:100%;object-fit:cover}
.win .boxes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  padding:12px clamp(18px,4vw,44px) 0;max-width:980px;margin:0 auto;width:100%;
}
.win .ib{background:var(--cream);border:1px solid var(--gold-f);border-radius:12px;padding:13px 16px}
.win .ib em{display:block;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-d)}
.win .ib b{display:block;margin-top:5px;color:var(--navy);font-size:15px}
/* bottom padding clears the sticky quote bar, so the last line of the
   itinerary is never trapped underneath it */
.win .bd{padding:10px clamp(18px,4vw,44px) 96px;max-width:980px;margin:0 auto;width:100%}
.win .bd .dep{display:flex;flex-wrap:wrap;gap:8px}
.win .bd .dep i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--navy-l);background:var(--cream);
  border:1px solid var(--gold-f);padding:6px 14px;border-radius:100px}
.win .bd .dep i.sold{color:var(--mut-l);background:var(--paper);border-color:var(--line);text-decoration:line-through}
@media (max-width:760px){
  .win .boxes{grid-template-columns:1fr 1fr}
  .win .hd{height:min(36vh,320px)}
}
@media (max-width:460px){
  .win .boxes{grid-template-columns:1fr}
}

@media (max-width:760px){
  .thero .shell{padding:126px 18px 82px}
}
/* one full card per row on phones */
@media (max-width:700px){
  .cardgrid{grid-template-columns:1fr;gap:20px}
}
@media (max-width:560px){
  .reel,.phero,.thero,.auth{margin-top:-88px}
  .thero .shell{padding:114px 16px 70px}
}

/* ---- the auth page: golden ground, art panel + forms ---- */
.auth{
  min-height:100vh;min-height:100dvh;display:grid;place-items:center;
  background:linear-gradient(158deg,#f8eed2 0%,#eed9a0 42%,#d9b657 78%,#c9a227 100%);
  padding:132px 18px 60px;margin-top:-102px;
}
.apanel{
  display:flex;flex-direction:column;width:min(540px,100%);
  background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(90,66,10,.35);
  position:relative;isolation:isolate;
}
.aart{position:relative;background:linear-gradient(170deg,#fbf8f1,#f2e9d2);overflow:hidden;min-height:340px}
.aart svg{position:absolute;inset:6% 5%;width:90%;height:88%}
.aart .aq{position:absolute;left:26px;right:26px;bottom:22px;font-family:var(--serif);
  font-style:italic;color:var(--navy);font-size:16.5px;line-height:1.5}
.aart .aq span{display:block;margin-top:6px;font-family:var(--sans);font-style:normal;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d);font-weight:700}
.aform{padding:38px clamp(22px,4vw,46px) 42px}
.atabs{display:flex;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:5px;margin-bottom:26px}
.atabs button{flex:1;padding:11px 10px;border-radius:100px;border:0;background:none;cursor:pointer;
  font-size:14px;font-weight:700;color:var(--mut);transition:.25s}
.atabs button.on{background:var(--navy);color:#fff;box-shadow:var(--sh-1)}
.afld{margin-bottom:16px}
.afld label{display:block;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy);margin-bottom:7px}
.afld input,.afld select{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r-s);
  background:#fdfefe;font-size:15px;transition:border-color .22s,box-shadow .22s;
}
.afld input:focus,.afld select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.14)}
/* a select still sitting on its "Select…" placeholder reads grey, like an empty input */
.afld select:required:invalid{color:var(--mut)}
.afld select option{color:var(--navy)}
.arow{display:grid;grid-template-columns:118px 1fr;gap:10px}
.averify{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:100px;border:1.5px solid var(--gold);background:var(--cream);
  color:var(--gold-d);font-size:13px;font-weight:700;cursor:pointer;margin:-4px 0 16px;transition:.25s;
}
.averify:hover{background:var(--gold-f)}
.ago{width:100%;justify-content:center;margin-top:6px}
.anote{
  margin-top:16px;padding:12px 16px;border-radius:12px;background:var(--cream);
  border:1px solid var(--gold-f);color:var(--gold-d);font-size:13px;font-weight:600;text-align:center;
}
.aterms{margin-top:14px;font-size:12px;color:var(--mut);text-align:center}
@media (max-width:880px){
  .apanel{grid-template-columns:1fr;max-width:520px}
  .aart{position:absolute;inset:0;z-index:0;min-height:0;opacity:.16;pointer-events:none;background:none}
  .aart .aq{display:none}
  .aform{position:relative;z-index:1}
  .auth{padding:120px 14px 44px}
}
@media (max-width:460px){
  .arow{grid-template-columns:100px 1fr}
  .aform{padding:28px 18px 32px}
}

/* ============================================================
   25. ACCOUNT ROUND — real auth, profile, detail landing,
   sticky quote bar, quote window, header profile chip
   ============================================================ */

/* ---- header profile chip (replaces Log in / Sign up when signed in) ---- */
.asign.aprof{
  background:#fff;border:1.5px solid var(--gold-f);color:var(--navy);
  padding:5px 16px 5px 6px;box-shadow:var(--sh-1);gap:9px;
}
.asign.aprof:hover{border-color:var(--gold);background:var(--cream);transform:translateY(-2px)}
.asign.aprof img,.asign.aprof .pdefi{
  width:32px;height:32px;border-radius:50%;flex:none;object-fit:cover;
  background:linear-gradient(150deg,var(--navy),var(--navy-x));
}
.asign.aprof .pdefi{display:grid;place-items:center;color:var(--gold-l)}
.asign.aprof .pdefi svg{width:17px;height:17px}
.asign.aprof span{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- the same account row inside the mobile drawer ---- */
.drawer nav a .dwho{display:flex;align-items:center;gap:11px;min-width:0;color:var(--navy);font-size:16px}
.drawer nav a .dwho img,.drawer nav a .dwho .pdefi{
  width:32px;height:32px;border-radius:50%;flex:none;object-fit:cover;
  background:linear-gradient(150deg,var(--navy),var(--navy-x));
}
.drawer nav a .dwho .pdefi{display:grid;place-items:center;color:var(--gold-l);font-style:normal}
.drawer nav a .dwho .pdefi svg{width:16px;height:16px}
.drawer nav a .dwho b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- inline field messages ---- */
.amsg{margin-top:8px;font-size:12.8px;font-weight:600;color:var(--red);line-height:1.55}
.amsg.good{color:#2f7d54}
.amsg.soft{color:var(--mut)}
.amsg a{color:inherit;text-decoration:underline;font-weight:700}
.amsg .soft{display:block;margin-top:4px;color:var(--mut);font-weight:500}

/* ---- verified fields ---- */
.alab{display:flex;align-items:center;gap:12px}
.alab label{margin-bottom:7px}
.aok{display:inline-flex;align-items:center;gap:5px;margin-bottom:7px;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#2f7d54}
.aok svg{width:14px;height:14px}
.afld input:disabled,.afld select:disabled{background:var(--cream);color:var(--navy);opacity:1;-webkit-text-fill-color:var(--navy)}

/* ---- the six OTP boxes ---- */
.aotp{margin:-4px 0 18px;padding:14px;border:1.5px dashed var(--gold);border-radius:12px;background:var(--cream)}
.ahint{font-size:12.5px;color:var(--mut);font-weight:600;margin-bottom:10px;text-align:center}
.obox{display:flex;gap:8px;justify-content:center}
.obox input{
  width:44px;height:52px;text-align:center;font-size:21px;font-weight:800;color:var(--navy);
  border:1.5px solid var(--line);border-radius:10px;background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.obox input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.16)}

/* ---- password field with the eye ---- */
.apass{position:relative}
.apass input{padding-right:46px}
.aeye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  border:0;background:none;cursor:pointer;color:var(--mut-l);display:grid;place-items:center;border-radius:8px}
.aeye:hover{color:var(--gold-d)}
.aeye.on{color:var(--gold-d)}
.aeye svg{width:19px;height:19px}

/* ---- little text links + intro line on the auth forms ---- */
.alink{display:block;margin:16px auto 0;border:0;background:none;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--navy-l)}
.alink:hover{color:var(--gold-d);text-decoration:underline}
.aintro{font-size:13.5px;color:var(--mut);margin-bottom:18px;line-height:1.6}

/* ---- the success moment ---- */
.asucc{text-align:center;padding:26px 0 12px}
.asucc .stick,.qsucc .stick{
  width:76px;height:76px;margin:0 auto 18px;border-radius:50%;color:var(--navy);
  background:linear-gradient(150deg,var(--gold),var(--gold-l));display:grid;place-items:center;
  box-shadow:0 14px 34px rgba(201,162,39,.45);animation:stickIn .5s var(--ease) both;
}
.asucc .stick svg,.qsucc .stick svg{width:38px;height:38px}
@keyframes stickIn{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.asucc h2{font-size:26px}
.asucc p{margin-top:10px;color:var(--mut);font-size:14.5px}

/* ---- detail window: landing presentation ---- */
.win .hd .t .m span{display:inline-flex;align-items:flex-start;gap:7px}
.win .hd .t .m svg{width:15px;height:15px;color:var(--gold-l);flex:none;margin-top:2px}
.win .boxes{grid-template-columns:repeat(4,1fr)}
.win .ib .bdep{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.win .ib .bdep i{font-style:normal;font-size:11px;font-weight:700;color:var(--navy-l);background:#fff;
  border:1px solid var(--gold-f);padding:3px 9px;border-radius:100px}
.win .ib .bdep i.sold{color:var(--mut-l);background:var(--paper);border-color:var(--line);text-decoration:line-through}
.win .rchips{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px}
.win .rchips .stop{background:var(--cream);border:1px solid var(--gold-f);border-radius:100px;
  padding:7px 15px;font-size:12.6px;font-weight:700;color:var(--navy-l)}
.win .rchips .sep2{color:var(--gold);font-weight:800;font-size:13px}
.win .tgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.win .tgrid li{display:flex;gap:9px;font-size:14.2px;color:var(--ink);align-items:flex-start}
.win .tgrid li::before{display:none}
.win .tgrid svg{width:17px;height:17px;color:var(--gold-d);flex:none;margin-top:3px}
.win .xchips{display:flex;flex-wrap:wrap;gap:8px}
.win .xchips i{font-style:normal;background:linear-gradient(150deg,var(--gold),var(--gold-l));color:var(--navy);
  border-radius:100px;padding:7px 15px;font-size:12.4px;font-weight:700;box-shadow:0 4px 12px rgba(201,162,39,.28)}
.win .itin{position:relative;margin-top:4px}
.win .itin::before{content:"";position:absolute;left:21px;top:10px;bottom:26px;width:2px;
  background:linear-gradient(180deg,var(--gold),var(--gold-f))}
.win .iday{position:relative;padding:0 0 20px 62px}
.win .iday:last-child{padding-bottom:0}
.win .iday .dnum{
  position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(150deg,var(--gold),var(--gold-l));color:var(--navy);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 6px 16px rgba(201,162,39,.4);border:3px solid #fff;
}
.win .iday .dnum em{font-style:normal;font-size:7.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.win .iday .dnum b{font-family:var(--serif);font-size:17px;margin-top:1px}
.win .iday .icard{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:15px 18px;box-shadow:var(--sh-1)}
.win .iday .icard > b{display:block;color:var(--navy);font-size:15px;margin-bottom:6px;font-weight:700}
.win .iday .icard span{display:block;color:var(--mut);font-size:13.8px;line-height:1.6;padding-left:14px;position:relative}
.win .iday .icard span::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--gold)}
@media (max-width:860px){.win .boxes{grid-template-columns:1fr 1fr}}
@media (max-width:460px){
  /* this 1-column rule must live AFTER the 860px two-column one — the two
     rules tie on specificity, so on a phone the later one would win */
  .win .boxes{grid-template-columns:1fr}
  .win .tgrid{grid-template-columns:1fr}
  .win .iday{padding-left:52px}
  .win .itin::before{left:17px}
  .win .iday .dnum{width:38px;height:38px}
  .win .iday .dnum b{font-size:15px}
}

/* ---- the sticky generate-quote bar inside the detail window ---- */
.win .qbar{
  position:sticky;bottom:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:14px;
  /* the bar itself is full-bleed, but its contents line up with the same
     centred ~980px column the rest of the window reads on */
  padding:13px max(clamp(18px,4vw,44px),calc((100% - 980px)/2 + 44px));
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px) saturate(150%);border-top:1px solid var(--gold-f);
  box-shadow:0 -12px 34px rgba(14,42,71,.12);
}
.win .qbar[hidden]{display:none}
.win .qbar .qmeta{min-width:0}
.win .qbar .qmeta b{display:block;color:var(--navy);font-size:14.5px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win .qbar .qmeta span{display:block;font-size:11.5px;color:var(--mut);margin-top:1px}
.win .qbar .btn{flex:none;padding:12px 22px;font-size:13px}
@media (max-width:460px){
  .win .qbar{padding:11px 14px}
  .win .qbar .btn{padding:11px 16px;font-size:12px}
}

/* ---- the quote window ---- */
.qwin{padding:18px}
.qwin .qbox{
  position:relative;z-index:2;width:min(500px,100%);max-height:92vh;max-height:92dvh;overflow:auto;
  background:#fff;border-radius:20px;padding:30px 28px 32px;box-shadow:var(--sh-3);
  transform:translateY(24px) scale(.98);transition:transform .35s var(--ease);
}
.qwin.on .qbox{transform:none}
.qwin .qkick{display:inline-flex;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-d);background:var(--cream);border:1px solid var(--gold-f);
  padding:5px 13px;border-radius:100px;margin-bottom:12px}
.qwin h3{font-size:21px;line-height:1.25;padding-right:34px}
.qwin .qsub{color:var(--mut);font-size:13.6px;margin-top:8px}
.qwin .qcnts{margin-top:18px}
.qcnt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;
  border-bottom:1px dashed var(--line)}
.qcnt .ql b{display:block;font-size:14.4px;color:var(--navy);font-weight:700}
.qcnt .ql span{display:block;font-size:11.8px;color:var(--mut);margin-top:1px}
.qstep{display:flex;align-items:center;gap:13px;flex:none}
.qstep button{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--gold);background:var(--cream);
  color:var(--gold-d);font-size:17px;font-weight:800;cursor:pointer;line-height:1;
  display:grid;place-items:center;transition:background .2s,transform .2s}
.qstep button:hover{background:var(--gold-f)}
.qstep button:active{transform:scale(.92)}
.qstep button:disabled{opacity:.32;cursor:default;background:var(--paper);border-color:var(--line);color:var(--mut)}
.qstep b{min-width:22px;text-align:center;font-size:16px;color:var(--navy)}
.qwin .afld{margin-top:16px;margin-bottom:0}
.qwin .qhint{margin-top:16px;padding:11px 14px;border-left:3px solid var(--gold);background:var(--cream);
  border-radius:0 9px 9px 0;font-size:12.4px;color:var(--mut);line-height:1.6}
.qwin .ago{margin-top:20px}
.qwin .qsucc{text-align:center;padding:14px 0 4px}
.qwin .qsucc h3{padding:0;font-size:22px}
.qwin .qsucc p{color:var(--mut);font-size:14px;margin-top:10px;line-height:1.7}
.qwin .qsucc p b{color:var(--navy)}
.qwin .qref{display:inline-block;background:var(--cream);border:1.5px dashed var(--gold);border-radius:10px;
  padding:8px 20px;font-weight:800;color:var(--navy);letter-spacing:.05em;margin-top:14px;font-size:14px}
.qwin .qsucc .btn{margin-top:18px}
.qwin .qoffer{margin-top:16px;padding:11px 14px;border-radius:10px;background:var(--cream);
  border:1px solid var(--gold-f);font-size:12.6px;color:var(--mut)}
.qwin .qoffer b{color:var(--gold-d)}

/* ---- the tour-request window: date picker, choice rows, helper ---- */
.qdate{position:relative}
.qdfield{width:100%;display:flex;align-items:center;gap:10px;padding:12px 46px 12px 14px;
  border:1.5px solid var(--line);border-radius:var(--r-s);background:#fdfefe;cursor:pointer;
  font-size:15px;color:var(--navy);text-align:left;transition:border-color .22s,box-shadow .22s}
.qdfield:hover,.qdfield:focus-visible{border-color:var(--gold)}
.qdfield svg{width:17px;height:17px;color:var(--gold-d);flex:none}
.qdfield .ph{color:var(--mut-l);font-weight:500}
.qdclear{position:absolute;right:7px;top:7px;width:33px;height:33px;border:0;border-radius:50%;
  background:var(--paper);color:var(--mut);cursor:pointer;font-size:13px;line-height:1;
  display:grid;place-items:center;transition:background .2s,color .2s}
.qdclear:hover{background:var(--gold-f);color:var(--navy)}
.qcal{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;background:#fff;
  border:1.5px solid var(--gold-f);border-radius:16px;box-shadow:var(--sh-3);padding:14px}
.qcalhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.qcalhd b{font-family:var(--serif);font-size:16.5px;color:var(--navy)}
.qcalhd button{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--gold);
  background:var(--cream);color:var(--gold-d);font-size:17px;font-weight:800;cursor:pointer;
  line-height:1;display:grid;place-items:center;transition:background .2s}
.qcalhd button:hover{background:var(--gold-f)}
.qcalhd button:disabled{opacity:.35;cursor:default;border-color:var(--line);
  color:var(--mut);background:var(--paper)}
.qcaldow,.qcalgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.qcaldow span{text-align:center;font-size:9.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);padding:4px 0 6px}
.qcalgrid button{aspect-ratio:1;border:0;border-radius:50%;background:none;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--navy);display:grid;place-items:center;
  transition:background .15s}
.qcalgrid button:hover:not(:disabled){background:var(--gold-f)}
.qcalgrid button:disabled{color:var(--mut-l);opacity:.4;cursor:default;background:none}
.qcalgrid button.today{box-shadow:inset 0 0 0 1.5px var(--gold)}
.qcalgrid button.sel{background:var(--gold);color:var(--navy);font-weight:800}
/* on a phone the calendar folds down as a bottom sheet instead */
@media (max-width:560px){
  .qcal{position:fixed;left:12px;right:12px;bottom:12px;top:auto;z-index:40;
    border-radius:18px;box-shadow:0 -18px 60px rgba(8,20,35,.4)}
}
.qrad{display:flex;gap:9px;flex-wrap:wrap}
.qrad label{flex:1 1 45%;display:flex;align-items:center;gap:9px;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:12px;cursor:pointer;
  font-size:13.4px;font-weight:600;color:var(--navy);transition:border-color .2s,background .2s}
.qrad input{accent-color:var(--gold-d);width:16px;height:16px;flex:none;margin:0}
.qrad label:has(input:checked){border-color:var(--gold);background:var(--cream)}
.qhelp{display:block;margin-top:7px;font-size:12px;color:var(--mut)}

/* ---- the nationality box: free text + quick-fill chips (book-site style) ---- */
.qnat{border:2px solid var(--gold-f);background:var(--cream);border-radius:12px;padding:12px 14px 13px}
.qnat label i{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--mut)}
.qnat input{background:#fff}
.qnatchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.qnatchips button{cursor:pointer;border-radius:999px;padding:6px 15px;font-size:13px;font-weight:600;
  border:1.5px solid var(--line);background:#fff;color:var(--navy);transition:border-color .2s,background .2s}
.qnatchips button:hover{border-color:var(--gold)}
.qnatchips button.on{border-color:var(--gold);background:var(--gold-f);font-weight:800}

/* ---- the profile page ---- */
.prof{
  margin-top:-102px;min-height:100vh;min-height:100dvh;
  background:linear-gradient(180deg,var(--cream),var(--paper) 420px);
  padding:150px 0 90px;
}
.pcard{
  max-width:680px;margin:0 auto;background:#fff;border-radius:24px;overflow:hidden;
  box-shadow:var(--sh-2);border:1px solid var(--line);
}
.phead{display:flex;align-items:center;gap:20px;padding:30px clamp(20px,4vw,36px);
  background:linear-gradient(150deg,var(--navy),var(--navy-x));color:#fff;flex-wrap:wrap}
.pavwrap{position:relative;flex:none}
.pava{position:relative;width:88px;height:88px;border-radius:50%;border:3px solid var(--gold-l);
  background:var(--navy-l);cursor:pointer;overflow:visible;padding:0;display:block}
.pava img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.pava .pdef{position:absolute;inset:0;margin:auto;width:40px;height:40px;color:var(--gold-l)}
.pava .pcam{position:absolute;right:-3px;bottom:-3px;width:29px;height:29px;border-radius:50%;
  background:var(--gold);color:var(--navy);display:grid;place-items:center;border:2.5px solid #fff;
  box-shadow:0 4px 10px rgba(0,0,0,.3)}
.pava .pcam svg{width:13px;height:13px}
.pava:hover .pcam{background:var(--gold-l)}
.pwho{min-width:0;flex:1}
.pwho h1{color:#fff;font-size:clamp(22px,3.4vw,30px);line-height:1.2}
.pwho p{color:#b9cade;font-size:13px;margin-top:6px;overflow-wrap:anywhere}
.plogout{flex:none;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.plogout:hover{background:#fff;color:var(--navy);border-color:#fff}
.ptop{margin:16px clamp(20px,4vw,36px) 0;padding:11px 15px;border-radius:10px;
  background:#eaf6ee;border:1px solid #cfe9d8;font-size:13px}
.psec{padding:26px clamp(20px,4vw,36px) 30px}
.psec + .psec{border-top:1px solid var(--line)}
.ph2{font-size:13px;font-family:var(--sans);font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-d);margin-bottom:16px}
.prow{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:11px 0;border-bottom:1px dashed var(--line);
  font-size:14.5px;align-items:baseline}
.prow em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.prow b{color:var(--navy);font-weight:600;overflow-wrap:anywhere}
#pView .btn{margin-top:20px}
.pbtns{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
#pPass .btn{margin-top:16px}
@media (max-width:560px){
  .prof{margin-top:-88px;padding:126px 0 60px}
  .phead{gap:16px}
  .pava{width:74px;height:74px}
  .prow{grid-template-columns:1fr;gap:2px;padding:9px 0}
  .plogout{order:3}
}

/* ============================================================
   26. YOUR DIARIES — the traveller's history of queries and
   quotations, plus the signed-in header/drawer doors to it
   ============================================================ */

/* ---- the header "Your diaries" chip (signed-in only; JS unhides it) ---- */
.adiary{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none;
  padding:10px 16px;border-radius:100px;border:1.5px solid var(--gold-f);background:#fff;
  color:var(--navy);font-size:13px;font-weight:700;box-shadow:var(--sh-1);
  transition:transform .25s var(--ease),border-color .25s,background .25s;
}
.adiary svg{width:16px;height:16px;color:var(--gold-d);flex:none}
.adiary[data-on],.adiary:hover{border-color:var(--gold);background:var(--cream)}
.adiary:hover{transform:translateY(-2px)}
@media (max-width:1240px){.adiary{display:none}}

/* ---- the page ---- */
.dy{
  margin-top:-102px;min-height:100vh;min-height:100dvh;
  background:linear-gradient(180deg,var(--cream),var(--paper) 420px);
  padding:150px 0 90px;
}
.dy .shell{max-width:860px}
.dyhead{text-align:center;margin-bottom:30px}
.dyhead .lead{margin-left:auto;margin-right:auto}

.dytabs{display:flex;gap:8px;background:#fff;border:1px solid var(--line);border-radius:100px;
  padding:5px;margin:0 auto 26px;max-width:520px;box-shadow:var(--sh-1)}
.dytabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 10px;border-radius:100px;border:0;background:none;cursor:pointer;
  font-size:14px;font-weight:700;color:var(--mut);transition:.25s}
.dytabs button.on{background:var(--navy);color:#fff;box-shadow:var(--sh-1)}
.dytabs button i{font-style:normal;min-width:22px;padding:1px 8px;border-radius:100px;
  background:var(--gold-f);color:var(--gold-d);font-size:11.5px;font-weight:800;line-height:1.5}
.dytabs button.on i{background:var(--gold);color:var(--navy)}

/* ---- the search pill — one box filters both tabs live ---- */
.dysearch{
  display:flex;align-items:center;gap:10px;max-width:520px;margin:0 auto 26px;
  background:#fff;border:1.5px solid var(--line);border-radius:100px;padding:0 8px 0 18px;
  height:48px;box-shadow:var(--sh-1);transition:border-color .25s,box-shadow .25s;
}
.dysearch:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.14)}
.dysearch svg{width:17px;height:17px;color:var(--gold-d);flex:none}
.dysearch input{border:0;background:none;outline:none;flex:1;min-width:0;font-size:15px;color:var(--navy)}
.dysearch input::placeholder{color:var(--mut-l);font-weight:500}
.dysearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.dysearch button{flex:none;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:var(--cream);color:var(--mut);
  font-size:14px;line-height:1;transition:background .2s,color .2s}
.dysearch button:hover{background:var(--gold-f);color:var(--navy)}

/* nothing survives the search — say so, with a one-tap way back */
.dynohit{text-align:center;padding:38px 18px;background:#fff;border:1.5px dashed var(--line);border-radius:18px}
.dynohit p{color:var(--mut);font-size:14.5px;max-width:46ch;margin:0 auto 16px}

/* ---- loading shimmer + honest failure ---- */
.dyloadnote{text-align:center;color:var(--mut);font-size:13.5px;font-weight:600}
.dysk{height:104px;border-radius:18px;margin-top:14px;border:1px solid var(--line);
  background:linear-gradient(100deg,#fff 40%,var(--cream) 50%,#fff 60%);
  background-size:200% 100%;animation:dysk 1.3s linear infinite}
@keyframes dysk{to{background-position:-200% 0}}
.dyfail{text-align:center;padding:38px 18px;background:#fff;border:1.5px dashed var(--line);border-radius:18px}
.dyfail p{color:var(--red);font-weight:600;font-size:14px;max-width:52ch;margin:0 auto 16px}

/* ---- the diary cards ---- */
.dylist{display:flex;flex-direction:column;gap:14px}
.dycard{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:20px clamp(16px,3vw,26px);box-shadow:var(--sh-1);scroll-margin:130px}
.dytop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.dyt{min-width:0;flex:1 1 300px}
.dyt h3{font-size:19px;line-height:1.3}
.dymeta{display:flex;flex-wrap:wrap;gap:5px 16px;margin-top:8px;font-size:12.8px;color:var(--mut);align-items:baseline}
.dymeta b{color:var(--navy);font-weight:700}
.dyref{font-weight:800;letter-spacing:.05em;color:var(--navy);background:var(--cream);
  border:1px dashed var(--gold);border-radius:8px;padding:1px 9px;font-size:12px}

/* the status tag — one colour per state */
.dytag{flex:none;align-self:flex-start;display:inline-flex;align-items:center;max-width:100%;
  padding:6px 13px;border-radius:100px;font-size:11.6px;font-weight:800;line-height:1.4;
  letter-spacing:.02em;border:1.5px solid transparent}
.tg-gold  {background:var(--gold-f);color:var(--gold-d);border-color:var(--gold)}
.tg-navy  {background:var(--navy);color:#fff}
.tg-green {background:#eaf6ee;color:#2f7d54;border-color:#7dbb96}
.tg-greenf{background:#2f7d54;color:#fff}
.tg-amber {background:#fff4e6;color:#c97a2c;border-color:#e5aa63}
.tg-grey  {background:var(--paper);color:var(--mut);border-color:var(--line)}

/* the fold-open preference set on a query card */
.dyx{display:inline-flex;align-items:center;gap:8px;margin-top:14px;border:0;background:none;cursor:pointer;
  font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-d)}
.dyx i{font-style:normal;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--gold);
  display:grid;place-items:center;font-size:13px;line-height:1;background:var(--cream);transition:background .2s}
.dyx:hover i{background:var(--gold-f)}
.dyxb{margin-top:12px;border-top:1px dashed var(--line);padding-top:3px}
.dyrow{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:9px 0;
  border-bottom:1px dashed var(--line);font-size:13.8px;align-items:baseline}
.dyrow:last-child{border-bottom:0}
.dyrow em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.dyrow b{color:var(--navy);font-weight:600;overflow-wrap:anywhere}

/* the quotation card's money-and-button base line */
.dyfoot{display:flex;align-items:center;justify-content:space-between;gap:12px 14px;flex-wrap:wrap;
  margin-top:14px;border-top:1px dashed var(--line);padding-top:14px}
.dysum em{display:block;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut)}
.dysum b{font-family:var(--serif);font-size:22px;color:var(--navy);line-height:1.2}

/* nothing yet — an honest empty page, not a blank one */
.dyempty{text-align:center;padding:44px 18px;background:#fff;border:1.5px dashed var(--line);border-radius:18px}
.dyempty p{color:var(--mut);font-size:14.5px;max-width:46ch;margin:0 auto 18px}

/* the See-here landing: a gold ring that fades away */
.dycard.hi{animation:dyhi 2.6s var(--ease) both}
@keyframes dyhi{
  0%  {box-shadow:0 0 0 4px var(--gold),0 14px 40px rgba(201,162,39,.35);border-color:var(--gold)}
  55% {box-shadow:0 0 0 4px var(--gold),var(--sh-1);border-color:var(--gold)}
  100%{box-shadow:var(--sh-1);border-color:var(--line)}
}

@media (max-width:560px){
  .dy{margin-top:-88px;padding:126px 0 60px}
  .dytabs button{font-size:13px;padding:10px 6px}
  .dyrow{grid-template-columns:1fr;gap:2px;padding:8px 0}
  .dysum b{font-size:20px}
  .dyfoot .btn{width:100%;justify-content:center}
}

/* ---------- 23. motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv,.js .trow .pile,.js .trow .said{opacity:1;transform:none}
  .rail .run{animation:none}
  .rail{overflow-x:auto}
}
@media print{
  .nav,.drawer,.scrim,.totop,.intro,.leave,.reel,.win{display:none!important}
  body{background:#fff}
  .sec{padding:20px 0}
}

/* ── the country-code picker on the account forms (flag + dial, searchable list).
   The native <select> stays in the DOM as the answer and is merely hidden, so every
   piece of script that reads it keeps working. ── */
.cchide{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.ccbtn{flex:none;display:flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:#fff;
  border-radius:12px;padding:0 12px;min-height:48px;cursor:pointer;font:inherit;font-size:15px;font-weight:600;
  color:var(--navy);white-space:nowrap}
.ccbtn:hover{border-color:var(--gold)}
.ccbtn:disabled{opacity:.6;cursor:default}
.ccbtn em{font-style:normal;font-size:10px;color:var(--mut)}
.ccfl{position:relative;width:22px;height:16px;border-radius:3px;overflow:hidden;flex:none;background:#e8eef6;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(14,42,71,.14)}
.ccfl i{font-style:normal;font-size:8.5px;font-weight:800;color:#5b6b7d}
.ccfl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ccpop{position:fixed;z-index:9999;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 50px rgba(8,20,35,.26);overflow:hidden}
.ccsr{padding:10px;border-bottom:1px solid #eef2f7;background:#f8fafc}
.ccsr input{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:9px;padding:9px 11px;
  font:inherit;font-size:14px;outline:none;color:var(--navy)}
.ccsr input:focus{border-color:var(--navy)}
.cclist{max-height:290px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ccrow{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;border:0;background:none;
  width:100%;text-align:left;font:inherit;color:var(--ink)}
.ccrow:hover{background:#eef4fb}
.ccrow.on{background:#fdf6e0}
.ccrow b{flex:1;min-width:0;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccrow span{flex:none;font-size:13px;font-weight:700;color:var(--mut)}
.ccsep{padding:8px 12px 5px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);background:#fbfcfe}
.ccnone{padding:18px 14px;text-align:center;font-size:14px;color:var(--mut)}

/* ---- sold out (item 4, 22 Aug 2026) — the same red the landing page wears ---- */
.gcard .sold9{position:absolute;top:16px;right:-40px;z-index:3;transform:rotate(38deg);
  background:#b3261e;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;padding:6px 46px;box-shadow:0 3px 10px rgba(0,0,0,.28)}
.win .sbar9{grid-column:1/-1;background:#fdecec;border:1px solid #f3c2c2;color:#8a1d16;
  border-radius:12px;padding:11px 15px;font-size:13.2px;font-weight:600;line-height:1.5}
.win .sbar9 b{font-weight:800;letter-spacing:.06em}
.win .qbar .btn.off9{background:var(--paper);color:var(--mut-l);border:1px solid var(--line);
  cursor:not-allowed;box-shadow:none}
.win .qbar .btn.off9:hover{background:var(--paper);transform:none}

/* ═══════════════════════════════════════════════════════════════════════════
   22 August 2026 — the footer's office strip (item 3), the Contact Us page
   (item 2) and the visa inquiry wizard (item 9).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- footer, rebuilt 22 Aug 2026 evening: shorter, four tighter columns ---- */
.foot{padding-top:46px}
.foot .cols{grid-template-columns:1.05fr 1.45fr .85fr .75fr;gap:30px;padding-bottom:34px}
.foot h4{margin-bottom:14px;font-size:11.5px}
.foot h4::after{margin-top:7px}
.fbrand b{font-size:20px}
.fbrand p{font-size:13.4px;line-height:1.75;margin-top:13px;max-width:32ch}
.foot ul li{margin-bottom:8px}
.foot ul a{font-size:13.8px}
.foot ul.two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.social{margin-top:16px;gap:9px}
.social a{width:34px;height:34px}
.social svg{width:15px;height:15px}
.fr-h{margin-top:22px}
.fcon li{margin-bottom:10px;font-size:13.6px;line-height:1.65}
.fcon svg{width:15px;height:15px;margin-top:3px}

/* the office swiper — turns itself, or by the arrows, the dots or a finger */
.fswipe{min-width:0}
.fsw{position:relative;display:flex;align-items:center;gap:9px}
.fswv{flex:1;min-width:0;overflow:hidden;border-radius:12px}
.fswt{display:flex;width:100%;transition:transform .5s var(--ease)}
.fofc{flex:0 0 100%;min-width:100%;box-sizing:border-box;padding:2px 2px 2px 0}
.fofc b{display:block;color:#fff;font-size:13.8px;font-weight:700;margin-bottom:7px}
.fofc p{font-size:13.4px;line-height:1.7;margin:0 0 8px;color:#a9bed4}
.fofl{display:flex;gap:9px;font-size:13.4px;line-height:1.65;margin-top:5px;min-width:0}
/* a long address must wrap inside the card, never run out of it */
.fofl > span,.fofl > a{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.fofl svg{width:15px;height:15px;color:var(--gold);flex:none;margin-top:3px}
.fofl a:hover{color:var(--gold-l)}
/* classic round arrows, sitting level with the card rather than towering over it */
.fswb{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.05);color:#a9bed4;cursor:pointer;display:grid;place-items:center;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)}
.fswb:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);transform:scale(1.08)}
.fswb:active{transform:scale(.94)}
.fswb svg{width:13px;height:13px}
.fswb.prev svg{transform:rotate(180deg)}
.fswd{display:flex;gap:6px;margin-top:12px;padding-left:39px}
.fswd i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.28);display:block;
  cursor:pointer;transition:.3s var(--ease)}
.fswd i.on{background:var(--gold-l);width:18px;border-radius:100px}
.fbase{padding:15px 0;font-size:12.5px}

@media (max-width:1040px){
  .foot .cols{grid-template-columns:1.2fr 1fr;gap:30px 34px}
  .foot .cols > div:nth-child(3){display:block}
}
@media (max-width:620px){
  .foot{padding-top:36px}
  .foot .cols{grid-template-columns:1fr;gap:26px;padding-bottom:26px}
  .foot ul.two{grid-template-columns:1fr 1fr}
  .fswd{padding-left:0;justify-content:center}
}

/* ---- Contact Us ---- */
.afld textarea{
  width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:12px;
  padding:12px 14px;font:inherit;font-size:15px;color:var(--navy);background:#fff;
  resize:vertical;min-height:110px;transition:border-color .2s,box-shadow .2s;
}
.afld textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.14)}
.afld label i{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--mut)}
.csplit{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start}
.cform form{margin-top:24px}
.cform .btn{width:100%;justify-content:center;margin-top:4px}
.cdone{background:var(--cream);border:1px solid var(--gold-f);border-radius:16px;padding:26px 24px;text-align:center;margin-top:24px}
.cdone .cd-ic{width:52px;height:52px;border-radius:50%;background:var(--gold);color:var(--navy);
  display:grid;place-items:center;margin:0 auto 14px}
.cdone .cd-ic svg{width:26px;height:26px}
.cdone b{display:block;font-family:var(--serif);font-size:19px;color:var(--navy);line-height:1.4}
.cdone span{display:block;font-size:14px;color:var(--mut);margin-top:8px;line-height:1.7}
.cdone a{color:var(--gold-d);font-weight:700}
.cside{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:30px 28px}
.cside .h-sec{font-size:26px;margin-top:4px}
.coff{margin-top:22px;display:grid;gap:20px}
.coc{padding-bottom:20px;border-bottom:1px dashed var(--line)}
.coc:last-child{padding-bottom:0;border-bottom:0}
.coc b{display:block;color:var(--navy);font-size:15px;font-weight:800;margin-bottom:7px}
.coc p{font-size:14.2px;line-height:1.75;color:var(--mut);margin:0 0 8px}
.cocl{display:flex;gap:11px;font-size:14.2px;line-height:1.7;color:var(--t3);margin-top:6px}
.cocl svg{width:16px;height:16px;color:var(--gold-d);flex:none;margin-top:3px}
.cocl a{color:var(--t3)}
.cocl a:hover{color:var(--gold-d)}
.cocl b{color:var(--navy);font-weight:700}
.cmeta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.csoc{display:flex;gap:10px;margin-top:22px}
.csoc a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;color:var(--navy);transition:.25s var(--ease)}
.csoc a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);transform:translateY(-3px)}
.csoc svg{width:17px;height:17px}
@media (max-width:940px){.csplit{grid-template-columns:1fr;gap:34px}}
@media (max-width:520px){.cside{padding:24px 20px}}

/* ---- the visa inquiry wizard ---- */
.vlead{text-align:center;max-width:720px;margin:0 auto}
.vhow{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto 40px;
  counter-reset:vhow}
.vhow li{list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:22px 22px 24px;position:relative}
.vhow li span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--navy);color:var(--gold-l);font-size:14px;font-weight:800;margin-bottom:13px}
.vhow li b{display:block;color:var(--navy);font-size:16px;font-weight:800;margin-bottom:7px}
.vhow li i{font-style:normal;display:block;font-size:14px;line-height:1.75;color:var(--mut)}
.vhow li i b{display:inline;font-size:inherit;color:var(--navy);margin:0}
@media (max-width:880px){.vhow{grid-template-columns:1fr;gap:16px;margin-bottom:32px}}

.vwiz{max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:0 14px 40px rgba(14,42,71,.07);overflow:hidden}
.vbar{display:flex;align-items:center;gap:14px;padding:18px 26px;background:var(--paper);
  border-bottom:1px solid var(--line)}
.vstep{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--mut-l);white-space:nowrap}
.vstep span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:#fff;border:1.5px solid var(--line);font-size:12.5px;font-weight:800;color:var(--mut-l)}
.vstep.on{color:var(--navy)}
.vstep.on span{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.vstep.done span{background:var(--navy);border-color:var(--navy);color:#fff}
.vline{flex:1;min-width:20px}
.vline i{display:block;height:2px;background:var(--line);border-radius:2px}
.vbody{padding:28px 30px 30px}
.vload{padding:44px 30px;text-align:center;color:var(--mut);font-size:14.5px}
.vnote{max-width:900px;margin:26px auto 0}

.vlab{display:block;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--t3);margin:0 0 10px}
.vlab i{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--mut)}
.vsearch{position:relative;margin-bottom:14px}
.vsearch input{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:12px;
  padding:12px 14px 12px 42px;font:inherit;font-size:15px;color:var(--navy)}
.vsearch input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.14)}
.vsearch svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--mut-l)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px;
  max-height:340px;overflow:auto;padding:3px;margin-bottom:6px}
.vc{cursor:pointer;display:flex;align-items:center;gap:11px;text-align:left;border:1.5px solid var(--line);
  background:#fff;border-radius:12px;padding:11px 13px;font-size:14.4px;font-weight:600;color:var(--navy);
  transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.vc:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 18px rgba(14,42,71,.09)}
.vc.on{border-color:var(--gold);background:var(--cream);font-weight:800;box-shadow:0 0 0 3px rgba(201,162,39,.14)}
.vc > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the flag chip: a real flag over the two letters, so a blocked or missing image
   still reads (flag EMOJI stay out — Windows draws them as two grey boxes) */
.vflag{position:relative;flex:none;width:34px;height:24px;border-radius:5px;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);display:grid;place-items:center}
.vflag i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--mut-l)}
.vflag img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vnone{padding:26px 4px;color:var(--mut);font-size:14.5px}
.vchips{display:flex;gap:9px;flex-wrap:wrap}
.vchips button{cursor:pointer;border-radius:999px;padding:8px 17px;font-size:13.5px;font-weight:600;
  border:1.5px solid var(--line);background:#fff;color:var(--t3);transition:.18s}
.vchips button:hover{border-color:var(--gold)}
.vchips button.on{border-color:var(--gold);background:var(--gold-f);color:var(--navy);font-weight:800}

.vpax{display:grid;gap:14px;margin-bottom:8px}
.vpc{border:1.5px solid var(--line);border-radius:16px;padding:18px 18px 6px;background:var(--paper);position:relative}
.vpc .vpn{position:absolute;top:-11px;left:16px;background:var(--navy);color:#fff;font-size:11px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:100px}
.vpc .vprm{position:absolute;top:12px;right:12px;border:0;background:transparent;color:var(--mut-l);
  cursor:pointer;font-size:18px;line-height:1;padding:4px 7px;border-radius:8px}
.vpc .vprm:hover{background:#fdecec;color:#b3261e}
.vprow{display:grid;grid-template-columns:1fr 118px;gap:14px}
@media (max-width:520px){.vprow{grid-template-columns:1fr}}
.vadd{cursor:pointer;width:100%;border:1.5px dashed var(--line);background:#fff;border-radius:14px;
  padding:13px;font-size:14px;font-weight:700;color:var(--t3);transition:.2s}
.vadd:hover{border-color:var(--gold);color:var(--navy);background:var(--cream)}
.vact{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--line)}
.vact .btn{flex:none}
.vback{cursor:pointer;border:0;background:transparent;color:var(--mut);font-size:14px;font-weight:600;padding:10px 4px}
.vback:hover{color:var(--navy)}
.vpick{margin-left:auto;font-size:13.5px;color:var(--mut);text-align:right;line-height:1.6}
.vpick b{color:var(--navy)}
@media (max-width:600px){.vbody{padding:22px 18px 24px}.vbar{padding:14px 16px;gap:9px}
  .vstep{font-size:12px}.vpick{margin-left:0;width:100%;text-align:left}}

/* the finish panel — the reference, and what happens next */
.vdone{text-align:center;padding:8px 4px 4px}
.vdone .vd-ic{width:64px;height:64px;border-radius:50%;background:var(--gold);color:var(--navy);
  display:grid;place-items:center;margin:0 auto 18px}
.vdone .vd-ic svg{width:32px;height:32px}
.vdone h3{font-family:var(--serif);font-size:25px;color:var(--navy);line-height:1.3}
.vdone p{font-size:14.8px;color:var(--mut);line-height:1.8;margin-top:12px;max-width:520px;margin-left:auto;margin-right:auto}
.vref{display:inline-block;margin-top:18px;background:var(--navy);color:#fff;border-radius:12px;
  padding:12px 22px;font-size:16px;font-weight:800;letter-spacing:.06em}
.vref small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--gold-l);
  text-transform:uppercase;margin-bottom:4px}
.vdone .vlinks{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}

/* ---- the visa wizard, step 2 (22 Aug 2026 evening) ---- */
.vpickbar{display:flex;align-items:center;gap:14px;background:var(--cream);border:1px solid var(--gold-f);
  border-radius:14px;padding:12px 14px}
.vpickbar .vflag{width:44px;height:31px}
.vpickbar .vflag i{font-size:11.5px}
.vpb{min-width:0;flex:1}
.vpb b{display:block;font-size:16.5px;color:var(--navy);font-weight:800;line-height:1.3}
.vpb span{display:block;font-size:13px;color:var(--gold-d);font-weight:600;margin-top:2px}
.vchg{flex:none;cursor:pointer;border:1.5px solid var(--line);background:#fff;color:var(--t3);
  border-radius:100px;padding:8px 16px;font-size:13px;font-weight:700;transition:.2s}
.vchg:hover{border-color:var(--gold);color:var(--navy)}
.vtwo{display:grid;grid-template-columns:210px 1fr;gap:16px;margin-top:22px}
.vtwo input{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:12px;
  padding:11px 13px;font:inherit;font-size:14.5px;color:var(--navy);background:#fff}
.vtwo input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.14)}
.vhint{margin-top:16px;font-size:13.6px;color:var(--mut);line-height:1.75}
@media (max-width:620px){
  .vtwo{grid-template-columns:1fr;gap:14px}
  .vpickbar{gap:11px;padding:11px 12px}
  .vchg{padding:7px 13px;font-size:12.5px}
  .vgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;max-height:none}
}

/* what is included — one long line, printed as written, across the whole window */
.win .inclbox{display:flex;gap:13px;align-items:flex-start;width:100%;box-sizing:border-box;
  background:var(--cream);border:1px solid var(--gold-f);border-radius:14px;padding:16px 18px}
.win .inclbox svg{width:18px;height:18px;color:var(--gold-d);flex:none;margin-top:4px}
.win .inclbox p{margin:0;color:var(--ink);font-size:14.6px;line-height:1.9;text-align:left}
@media (max-width:520px){.win .inclbox{padding:14px 15px;gap:10px}.win .inclbox p{font-size:14px;line-height:1.85}}

/* the WhatsApp door on the Contact page */
.cwa{display:flex;align-items:center;gap:13px;margin-top:22px;padding:13px 16px;border-radius:14px;
  background:#128C46;color:#fff;text-decoration:none;transition:.22s var(--ease);
  box-shadow:0 8px 20px rgba(18,140,70,.24)}
.cwa:hover{background:#0f7a3c;color:#fff;transform:translateY(-2px)}
.cwa svg{width:24px;height:24px;flex:none}
.cwa span{display:block;font-size:13.5px;line-height:1.45;opacity:.92}
.cwa b{display:block;font-size:14.6px;font-weight:800;opacity:1}

/* ---- the header folds its search when the capsule runs out of room (22 Aug 2026) ----
   Driven by measurement in main.js, not by a guessed breakpoint: the moment the row
   would overflow, .tight lands on the nav. Your diaries keeps its own button. */
.nav.tight .hsearch{max-width:46px;min-width:46px;flex:0 0 46px;padding:0;justify-content:center;cursor:pointer}
.nav.tight .hsearch input{width:0;flex:0 0 0;opacity:0;pointer-events:none;padding:0}
.nav.tight .hsearch.open{
  position:absolute;left:20px;right:16px;max-width:none;min-width:0;flex:none;z-index:6;
  padding:0 8px 0 14px;justify-content:flex-start;background:#fff;cursor:auto;
  box-shadow:0 10px 30px rgba(14,42,71,.16);
}
.nav.tight .hsearch.open input{width:auto;flex:1;opacity:1;pointer-events:auto}

/* ---- the visa quotation wizard: the priced type cards, the total, the waiting ring ---- */
.vtlist{display:grid;gap:10px;margin-top:4px}
.vt{cursor:pointer;display:flex;align-items:center;gap:16px;text-align:left;width:100%;
  border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:15px 18px;
  transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.vt:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 18px rgba(14,42,71,.09)}
.vt.on{border-color:var(--gold);background:var(--cream);box-shadow:0 0 0 3px rgba(201,162,39,.14)}
.vtn{flex:1;min-width:0;font-size:15.5px;font-weight:700;color:var(--navy);line-height:1.35}
.vt.on .vtn{font-weight:800}
.vtp{flex:none;text-align:right;font-size:17px;font-weight:800;color:var(--gold-d);white-space:nowrap;line-height:1.2}
.vtp small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut-l);margin-top:3px}
.vfine{margin-top:14px;font-size:12.6px;color:var(--mut);line-height:1.7}
.vsum{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:20px;padding:14px 16px;
  background:var(--cream);border:1px solid var(--gold-f);border-radius:14px}
.vsum span{font-size:14px;color:var(--t3)}
.vsum b{margin-left:auto;font-size:21px;font-weight:800;color:var(--navy)}
.vsum i{flex-basis:100%;font-style:normal;font-size:12.2px;color:var(--mut)}
.vpc .afld select{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:12px;
  padding:11px 13px;font:inherit;font-size:15px;color:var(--navy);background:#fff}
.vpc .afld select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.14)}
@media (max-width:560px){
  .vt{flex-direction:column;align-items:flex-start;gap:6px}
  .vtp{text-align:left}
  .vsum b{margin-left:0}
}

/* the house's own waiting ring — the same one the landing page turns */
#vwait{position:fixed;inset:0;z-index:9600;display:none;background:rgba(8,20,35,.86);backdrop-filter:blur(4px)}
#vwait.on{display:block}
#vwait .mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;
  padding:0 20px;width:100%;max-width:420px}
#vwait .genring{position:relative;width:118px;height:118px;margin:0 auto;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 20px 55px rgba(0,0,0,.5)}
#vwait .genring img{width:80px;height:auto;border-radius:8px}
#vwait .genring::before{content:"";position:absolute;inset:-12px;border-radius:50%;
  border:3.5px solid rgba(201,162,39,.22);border-top-color:var(--gold-l);animation:genspin 1.05s linear infinite}
#vwait .genring::after{content:"";position:absolute;inset:-24px;border-radius:50%;
  border:2px solid rgba(201,162,39,.12);border-bottom-color:rgba(232,201,106,.55);animation:genspin 2.6s linear infinite reverse}
@keyframes genspin{to{transform:rotate(360deg)}}
#vwait .t1{margin-top:22px;color:#fff;font-weight:800;font-size:16.5px}
#vwait .t2{margin-top:8px;color:#c9d6e4;font-size:12.8px;line-height:1.75}

/* ---- one open file per country: the window that says so (23 Aug 2026) ---- */
#vdup{position:fixed;inset:0;z-index:9700;display:none;background:rgba(8,20,35,.62);
  backdrop-filter:blur(4px);padding:20px;overflow:auto}
#vdup.on{display:grid;place-items:center}
#vdup .vdbox{background:#fff;border-radius:20px;padding:32px 30px 26px;width:min(470px,100%);
  text-align:center;box-shadow:0 30px 70px rgba(8,20,35,.38)}
#vdup .vd-ic{width:58px;height:58px;border-radius:50%;background:var(--gold);color:var(--navy);
  display:grid;place-items:center;margin:0 auto 16px}
#vdup .vd-ic svg{width:29px;height:29px}
#vdup h3{font-family:var(--serif);font-size:22px;color:var(--navy);line-height:1.3}
#vdup p{font-size:14.4px;color:var(--mut);line-height:1.75;margin-top:10px}
#vdup .vdref{display:inline-block;margin-top:16px;background:var(--navy);color:#fff;border-radius:12px;
  padding:11px 22px;font-size:15.5px;font-weight:800;letter-spacing:.06em}
#vdup .vdref small{display:block;font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--gold-l);
  text-transform:uppercase;margin-bottom:3px}
#vdup .vdwho{margin-top:12px;font-size:13.6px;color:var(--t3)}
#vdup .vdwho b{color:var(--navy)}
#vdup .vdacts{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:22px}
#vdup .vdfine{font-size:12.6px;color:var(--mut-l);margin-top:18px;line-height:1.7}
#vdup .vdfine a{color:var(--gold-d);font-weight:700}

/* ---- who is looking after a quotation, on its diary card ---- */
.dywho{display:flex;align-items:flex-start;gap:9px;margin:12px 0 0;padding:10px 13px;
  background:var(--cream);border:1px solid var(--gold-f);border-radius:12px;
  font-size:13.2px;color:var(--t3);line-height:1.65}
.dywho svg{width:16px;height:16px;color:var(--gold-d);flex:none;margin-top:2px}
.dywho b{color:var(--navy);font-weight:800}
.dywho a{color:var(--gold-d);font-weight:700;white-space:nowrap}
@media (max-width:520px){.dywho{font-size:12.6px}.dywho a{white-space:normal}}