/* ==========================================================================
   Dropzone Nepal
   One stylesheet for the public site.
   ========================================================================== */

:root{
  --ink:#15120E;
  --ink-2:#3D3831;
  --mut:#7A736A;
  --line:#DFD9D0;
  --line-2:#EDE9E2;
  --paper:#FBF9F6;
  --card:#FFFFFF;
  --sand:#F3EFE8;

  --accent:#D63A1E;
  --accent-dk:#A82B13;
  --accent-sf:#FDF1ED;

  --ok:#2F6B43;
  --ok-sf:#EDF5EF;
  --warn:#8A5A12;
  --warn-sf:#FBF3E4;

  --shadow:0 1px 2px rgba(21,18,14,.05), 0 8px 24px -12px rgba(21,18,14,.18);
  --shadow-lg:0 2px 4px rgba(21,18,14,.06), 0 24px 56px -24px rgba(21,18,14,.28);

  --gut:clamp(16px, 4vw, 56px);
  --max:1240px;
  --r:3px;
}

*,*::before,*::after{box-sizing:border-box}

/* A class that sets display would otherwise beat the browser's own [hidden]
   rule, which is how an empty panel ends up on screen. This settles it. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;height:auto;display:block}

a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dk)}

h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

button,input,select,textarea{font:inherit;color:inherit}

::selection{background:var(--accent);color:#fff}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* --- type ---------------------------------------------------------------- */

.display{
  font-family:'Anton','Arial Narrow',Impact,sans-serif;
  font-weight:400;
  letter-spacing:.005em;
  line-height:.94;
  text-transform:uppercase;
}
.d1{font-size:clamp(42px,7.4vw,92px)}
.d2{font-size:clamp(32px,4.6vw,58px)}
.d3{font-size:clamp(24px,3vw,38px)}

.kicker{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--mut);
}
.kicker.on-dark{color:rgba(255,255,255,.72)}
.kicker.accent{color:var(--accent)}

.lede{font-size:clamp(16px,1.6vw,19px);line-height:1.65;color:var(--ink-2)}
.small{font-size:14px}
.tiny{font-size:12.5px}
.mut{color:var(--mut)}
.center{text-align:center}
.nowrap{white-space:nowrap}

/* --- layout -------------------------------------------------------------- */

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:820px;margin:0 auto;padding-inline:var(--gut)}

section{padding-block:clamp(48px,7vw,104px)}
section.tight{padding-block:clamp(32px,4.5vw,60px)}
.on-sand{background:var(--sand)}
.on-ink{background:var(--ink);color:#fff}
.on-ink .mut{color:rgba(255,255,255,.62)}
.on-ink a{color:#fff}

.sec-head{margin-bottom:clamp(28px,3.5vw,48px)}
.sec-head .d2{margin-top:12px}
.sec-head p{margin-top:14px;max-width:62ch}

/*
 * A centred section head has to centre the boxes, not just the text in them.
 * Every paragraph here is capped at 62ch, and a capped box with no auto
 * margins sits hard left, so the kicker above a centred heading was centred
 * inside its own narrow box well to the left of the heading under it.
 */
.sec-head.center p,
.sec-head.center .tier-toggle{margin-inline:auto}

.row{display:flex;gap:clamp(16px,2.4vw,32px)}
.row.wrap-r{flex-wrap:wrap}
.row.center-y{align-items:center}
.row.between{justify-content:space-between}
.col{flex:1;min-width:0}

.grid{display:grid;gap:clamp(16px,2.2vw,28px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}

.stack-8 > * + *{margin-top:8px}
.stack-12 > * + *{margin-top:12px}
.stack-16 > * + *{margin-top:16px}
.stack-24 > * + *{margin-top:24px}

.hide{display:none !important}

/* --- buttons ------------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;
  background:var(--accent);color:#fff;
  border:1.5px solid var(--accent);border-radius:var(--r);
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;text-align:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease;
}
.btn:hover{background:var(--accent-dk);border-color:var(--accent-dk);color:#fff}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}

.btn-o{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-o:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.btn-light{background:#fff;color:var(--accent);border-color:#fff}
.btn-light:hover{background:rgba(255,255,255,.88);color:var(--accent-dk);border-color:transparent}

.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

.btn-quiet{background:transparent;color:var(--mut);border-color:var(--line)}
.btn-quiet:hover{background:var(--sand);color:var(--ink);border-color:var(--line)}

.btn-sm{min-height:40px;padding:0 16px;font-size:11px}
.btn-lg{min-height:60px;padding:0 34px;font-size:13px}
.btn-block{width:100%}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1.5px solid currentColor;padding-bottom:3px;
}

/* --- header -------------------------------------------------------------- */

.ticker{
  background:var(--ink);color:rgba(255,255,255,.88);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.ticker .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:10px}
.ticker a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(251,249,246,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding-block:14px}

.brand{display:flex;align-items:center;gap:10px;color:var(--ink);flex:none}
/* inline-block, not inline: the wordmark wraps onto two lines, and an inline
   box draws its border in two broken pieces around them. */
.brand-mark{
  display:inline-block;
  font-family:'Anton','Arial Narrow',sans-serif;font-size:13px;line-height:1.02;
  letter-spacing:.02em;text-transform:uppercase;
  border:2px solid var(--ink);padding:6px 9px;
}

/*
 * An uploaded logo, in place of the wordmark.
 *
 * 4.0.2. The height is a setting now, written into the page as --logo-h and
 * --logo-foot-h. The numbers below are the defaults and are what a page
 * without the variables uses, so nothing moves on a site that never touches
 * the setting.
 *
 * THE WIDTH CEILING IS A MULTIPLE OF THE HEIGHT, not a fixed number. A fixed
 * 210px would mean a wide wordmark hit the ceiling and stopped growing, so
 * turning the size up would do nothing at all for exactly the logos that are
 * hardest to read. 5.25 is the old pair, 210 over 40, so a logo that fitted
 * before still fits.
 *
 * The phone size follows too, at 85 per cent, rather than being pinned at
 * 34px. Somebody who turns the logo up wants it up on a phone as well.
 */
.brand-logo{
  display:block;height:var(--logo-h,40px);width:auto;
  max-width:calc(var(--logo-h,40px) * 5.25);object-fit:contain;
}
.site-foot .brand-logo{
  height:var(--logo-foot-h,44px);
  max-width:calc(var(--logo-foot-h,44px) * 5.25);
}
.drawer-top .brand-logo{height:calc(var(--logo-h,40px) * .9)}
@media (max-width:560px){
  .brand-logo{
    height:calc(var(--logo-h,40px) * .85);
    max-width:calc(var(--logo-h,40px) * 4.7);
  }
  .site-foot .brand-logo{
    height:calc(var(--logo-foot-h,44px) * .85);
    max-width:calc(var(--logo-foot-h,44px) * 4.7);
  }
}
.brand:hover{color:var(--ink)}

.nav{display:flex;align-items:center;gap:clamp(10px,1.5vw,22px);flex:1}
.nav a{
  color:var(--ink-2);font-size:13.5px;font-weight:600;
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;
}
.nav a:hover{color:var(--ink)}
.nav a.is-active{color:var(--accent);border-bottom-color:var(--accent)}

.head-tools{display:flex;align-items:center;gap:12px;flex:none;margin-left:auto}

.burger{
  display:none;width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;
  background:none;border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;
}
.burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{
  content:'';position:absolute;left:0;width:18px;height:2px;background:var(--ink);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}

.drawer{
  position:fixed;inset:0;z-index:70;background:var(--paper);
  padding:20px var(--gut) 40px;overflow-y:auto;
  display:flex;flex-direction:column;
}
.drawer[hidden]{display:none}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.drawer-close{width:44px;height:44px;border:1.5px solid var(--line);background:none;border-radius:var(--r);font-size:22px;line-height:1;cursor:pointer}
.drawer nav a{
  display:flex;justify-content:space-between;align-items:center;
  padding:17px 0;border-bottom:1px solid var(--line);
  font-size:20px;font-weight:600;color:var(--ink);
}
.drawer nav a.is-active{color:var(--accent)}

/* --- currency / tier toggle ---------------------------------------------- */

.tier-toggle{
  display:inline-flex;background:var(--sand);
  border:1.5px solid var(--line);border-radius:var(--r);padding:3px;gap:3px;
}
.tier-toggle button{
  appearance:none;background:none;border:0;border-radius:2px;cursor:pointer;
  padding:9px 15px;font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--mut);white-space:nowrap;transition:background .15s,color .15s;
}
.tier-toggle button:hover{color:var(--ink)}
.tier-toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}
.tier-toggle.compact button{padding:7px 11px;font-size:11px}

.tier-bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  padding:16px 20px;
}

/* --- hero ---------------------------------------------------------------- */

.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.66}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,18,14,.62) 0%,rgba(21,18,14,.34) 42%,rgba(21,18,14,.88) 100%);
}
/* 3.8: taller. Asked for, so the hero covers more of the screen and the
   film has room to read as a film rather than as a strip. */
/*
 * 4.0.3. THE SAME PADDING AS EVERY OTHER PAGE HEADER.
 *
 * 3.8 made this hero taller, which was asked for and went too far: on a
 * normal laptop the front hero was 1042 pixels tall while Tandem was 645,
 * Packages 584 and About 559. It was the odd one out on its own site.
 *
 * It still comes out taller than those, at about 854, and that is
 * arithmetic rather than a choice: this hero carries a kicker, a heading, a
 * paragraph and two buttons, and the others carry a kicker, a heading and
 * one line. The season line under the buttons has gone, which is the only
 * content this release took out of it, and it went because the black bar at
 * the top of the page already says the same sentence.
 */
.hero-body{position:relative;padding-block:clamp(52px,8vw,96px)}
/*
 * 4.0.3: 18ch rather than 15.
 *
 * The measure was set when the headline was "Jump over the Annapurnas",
 * which fitted on two lines at 15ch. "Jump in front of the Himalayas" is six
 * characters longer and fell onto three, which put 86 pixels back into a
 * hero this release is shortening. 18ch holds both on two lines and is still
 * a short enough measure for a headline this size.
 */
.hero-body .d1{margin-top:16px;max-width:18ch}
.hero-body .lede{color:rgba(255,255,255,.86);max-width:52ch;margin-top:20px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-note{margin-top:26px;font-size:12.5px;color:rgba(255,255,255,.68)}

.page-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.page-hero .hero-media img{opacity:.55}
.page-hero-body{position:relative;padding-block:clamp(52px,8vw,96px)}
.page-hero-body .d2{margin-top:14px}
.page-hero-body p{margin-top:14px;max-width:56ch;color:rgba(255,255,255,.82)}

/* --- stat strip ---------------------------------------------------------- */

.stats{background:var(--ink);color:#fff;border-top:1px solid rgba(255,255,255,.1)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-block:26px}
.stat{text-align:center}
.stat b{display:block;font-family:'Anton',sans-serif;font-size:clamp(22px,2.6vw,32px);letter-spacing:.01em}
.stat span{display:block;margin-top:5px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}

/* --- cards --------------------------------------------------------------- */

.card{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
.card-pad{padding:clamp(18px,2.2vw,26px)}
.card-media{aspect-ratio:4/3;background:var(--sand);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-media img{transform:scale(1.045)}

.jump-card{display:flex;flex-direction:column}
.jump-card .card-pad{display:flex;flex-direction:column;flex:1}
.jump-card h3{margin-bottom:10px}
.jump-card .price-line{margin-top:auto;padding-top:16px;font-size:14px}
.jump-card .price-line b{font-size:17px}

/* --- package cards ------------------------------------------------------- */

.pkg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:start}

.pkg{
  position:relative;background:var(--card);
  border:1.5px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.4vw,30px);
  display:flex;flex-direction:column;
}
.pkg.is-featured{border-color:var(--accent);border-width:2px;box-shadow:var(--shadow)}
.pkg-flag{
  position:absolute;top:-12px;left:clamp(20px,2.4vw,30px);
  background:var(--accent);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 11px;border-radius:2px;
}
.pkg h3{font-size:19px;letter-spacing:.1em;text-transform:uppercase}
.pkg .tagline{margin-top:10px;font-size:14px;color:var(--mut);min-height:3.2em}
.pkg-price{border-block:1.5px dashed var(--line);margin:20px 0;padding-block:18px}
.pkg-amount{font-family:'Anton',sans-serif;font-size:clamp(28px,3.4vw,40px);line-height:1}
.pkg-alt{margin-top:7px;font-size:13px;color:var(--mut)}
.pkg-per{margin-top:3px;font-size:12px;color:var(--mut)}
.pkg-feats{flex:1}
.pkg-feats li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;font-size:14px}
.pkg-feats li.off{color:#B4ACA1}
.pkg-feats svg{flex:none;margin-top:3px}
.pkg .btn{margin-top:22px}

/* --- comparison table ---------------------------------------------------- */

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1.5px solid var(--line);border-radius:var(--r);background:var(--card)}
table.cmp{width:100%;border-collapse:collapse;min-width:680px}
table.cmp th,table.cmp td{padding:14px 16px;border-bottom:1px solid var(--line-2);text-align:center;font-size:14px}
table.cmp th:first-child,table.cmp td:first-child{text-align:left;font-weight:500}
table.cmp thead th{
  background:var(--sand);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:2px solid var(--ink);
}
table.cmp thead th.is-featured{background:var(--accent-sf);color:var(--accent)}
table.cmp td.is-featured{background:var(--accent-sf)}
table.cmp tbody tr:last-child td{border-bottom:0}

/* --- steps --------------------------------------------------------------- */

.steps{counter-reset:s}
.step{display:flex;gap:16px;align-items:flex-start}
.step-n{
  flex:none;width:36px;height:36px;border-radius:50%;
  border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
}
.on-ink .step-n{border-color:rgba(255,255,255,.5)}
.step h4{font-size:16px}
.step p{margin-top:7px;font-size:14px;color:var(--mut)}

/* --- timeline ------------------------------------------------------------ */

.timeline li{display:flex;gap:20px;padding:16px 0;border-bottom:1px dashed var(--line)}
.timeline li:last-child{border-bottom:0}
.timeline .t-time{flex:none;width:76px;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--accent)}
.timeline h4{font-size:15px}
.timeline p{margin-top:5px;font-size:14px;color:var(--mut)}

/* --- spec list ----------------------------------------------------------- */

.specs li{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14px}
.specs li:last-child{border-bottom:0}
.specs .k{color:var(--mut)}
.specs .v{font-weight:600;text-align:right}

/* --- gallery ------------------------------------------------------------- */

.filters{display:flex;gap:9px;flex-wrap:wrap}
.chip{
  appearance:none;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  padding:9px 16px;font-size:13px;font-weight:600;color:var(--ink-2);
  transition:background .15s,color .15s,border-color .15s;
}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);background:var(--sand)}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figure.tall{grid-row:span 2}
.gallery figure.tall img{aspect-ratio:1/2.08}
.gallery figure.wide{grid-column:span 2}
.gallery figure.wide img{aspect-ratio:2.08/1}
.gallery .play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(21,18,14,.28);
}
.gallery .play span{
  width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;
}

/* --- reviews ------------------------------------------------------------- */

.stars{display:flex;gap:2px}
.stars svg{fill:var(--ink)}
.on-ink .stars svg{fill:#fff}

.review{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column}
.review blockquote{margin:14px 0 0;font-size:15px;line-height:1.65;flex:1}
.review figcaption{display:flex;align-items:center;gap:12px;margin-top:20px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--sand);border:1.5px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--mut)}

.rating-summary{display:flex;align-items:center;gap:clamp(18px,3vw,34px);flex-wrap:wrap}
.rating-big{font-family:'Anton',sans-serif;font-size:56px;line-height:1}
.bars{width:190px}
.bar-row{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.bar-row span{font-size:11px;color:var(--mut);width:9px}
.bar{flex:1;height:7px;background:var(--line-2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink)}

/* --- accordion ----------------------------------------------------------- */

.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:18px 0;cursor:pointer;list-style:none;font-size:16px;font-weight:600;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';font-size:22px;font-weight:400;color:var(--mut);line-height:1;flex:none}
.acc details[open] summary{color:var(--accent)}
.acc details[open] summary::after{content:'\2212';color:var(--accent)}
.acc .acc-body{padding-bottom:20px;max-width:70ch;color:var(--ink-2);font-size:15px}
.acc .acc-body p + p{margin-top:12px}

/* --- notes --------------------------------------------------------------- */

.note{border:1.5px solid var(--line);background:var(--card);border-radius:var(--r);padding:16px 18px;font-size:14px;line-height:1.6}
.note-accent{border-color:#EFC3B7;background:var(--accent-sf);color:#8C2B12}
.note-ok{border-color:#BFD9C8;background:var(--ok-sf);color:#245234}
.note-warn{border-color:#E4CFA3;background:var(--warn-sf);color:var(--warn)}

/* --- season bar ---------------------------------------------------------- */

.months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.month{
  text-align:center;padding:14px 2px;border:1.5px solid var(--line);border-radius:2px;
  font-size:11px;font-weight:700;letter-spacing:.08em;color:#B4ACA1;background:var(--card);
}
.month.is-open{border-color:var(--accent);background:var(--accent-sf);color:var(--accent)}

/* --- calendar ------------------------------------------------------------ */

.cal{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:18px}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cal-head b{font-size:15px}
.cal-nav{appearance:none;background:none;border:1.5px solid var(--line);border-radius:2px;width:36px;height:36px;cursor:pointer;font-size:16px;line-height:1}
.cal-nav[disabled]{opacity:.35;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal-dow{text-align:center;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding-bottom:5px}
.cal-day{
  aspect-ratio:1;border:1.5px solid var(--line);border-radius:2px;background:var(--card);
  display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;
  transition:border-color .12s,background .12s;
}
.cal-day:hover:not([disabled]){border-color:var(--ink)}
.cal-day[disabled]{cursor:default;color:#C9C2B8;background:var(--paper);border-color:var(--line-2)}
.cal-day.is-limited{border-color:#E0B8A6;background:#FCF4F0;color:#A8542F}
.cal-day.is-full{color:#C9C2B8;background:var(--line-2);border-color:var(--line-2);text-decoration:line-through;cursor:default}
.cal-day.is-selected{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.cal-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.cal-legend span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--mut)}
.cal-legend i{width:13px;height:13px;border:1.5px solid var(--line);border-radius:2px;display:block}

/* --- forms --------------------------------------------------------------- */

.field{display:block}

/* Fields stack with a gap when they follow each other vertically. Inside a
   .field-row they sit side by side and the gap comes from flex, so the
   stacking margin has to be switched off or every field after the first is
   pushed down and the row stops lining up. */
.field + .field{margin-top:18px}
.field-row > .field,
.field-row > .field + .field{margin-top:0}
.label{display:block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.label .req{color:var(--accent)}
.hint{margin-top:6px;font-size:12.5px;color:var(--mut);display:block}
/* An empty error slot takes no space, so a field with one still lines up
   with a field without one. */
.err:empty{display:none}

.input,.select,.textarea{
  width:100%;min-height:52px;padding:13px 15px;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  font-size:15px;color:var(--ink);
  transition:border-color .12s,box-shadow .12s;
}
.input::placeholder,.textarea::placeholder{color:#B4ACA1}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(21,18,14,.07);
}
.textarea{min-height:120px;resize:vertical;line-height:1.6}
.select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A736A' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;
}

.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:var(--accent)}

/* A value the customer does not choose. It looks like a field so the row
   lines up, but it reads as settled rather than editable. */
.input.is-locked{
  background:var(--sand);color:var(--ink);font-weight:700;
  border-style:dashed;cursor:default;display:flex;align-items:center;
}
.input.is-locked.is-empty{color:var(--mut);font-weight:400}
.err{margin-top:7px;font-size:13px;color:var(--accent);font-weight:500}

.field-row{display:flex;gap:18px 14px;flex-wrap:wrap;align-items:flex-start}
.field-row > *{flex:1 1 150px;min-width:0;margin-top:0}
.field-row > .w-sm{flex:0 1 120px}
.field-row > .w-md{flex:0 1 180px}

/* radio / check cards */
.opt-grid{display:grid;gap:12px}
.opt{
  display:flex;gap:13px;align-items:flex-start;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  padding:16px 18px;transition:border-color .12s,background .12s;
}
.opt:hover{border-color:var(--ink-2)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .dot{
  flex:none;width:19px;height:19px;border-radius:50%;border:2px solid var(--mut);margin-top:2px;
  transition:border-color .12s,box-shadow .12s,background .12s;
}
.opt .box{flex:none;width:19px;height:19px;border-radius:3px;border:2px solid var(--mut);margin-top:2px;position:relative}
.opt .box::after{
  content:'';position:absolute;inset:2px;border-radius:1px;background:transparent;
}
.opt b{display:block;font-size:15px}
.opt small{display:block;margin-top:4px;font-size:13px;color:var(--mut)}
.opt:has(input:checked){border-color:var(--accent);border-width:2px;background:var(--accent-sf);padding:15px 17px}
.opt:has(input:checked) .dot{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px #fff}
.opt:has(input:checked) .box{border-color:var(--accent);background:var(--accent)}
.opt:has(input:checked) .box::after{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

.opt-inline{display:flex;gap:10px;flex-wrap:wrap}
.opt-inline .opt{padding:11px 15px;align-items:center}
.opt-inline .opt:has(input:checked){padding:10px 14px}
.opt-inline .dot,.opt-inline .box{margin-top:0}
.opt-inline b{font-size:14px}

.opt-price{margin-left:auto;font-weight:700;font-size:14px;white-space:nowrap}

/* stepper */
/* The number is the thing being read, so it gets the room. The two buttons
   are small controls either side of it, not the other way round. */
.stepper{
  display:flex;flex:none;align-items:stretch;
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--card);
  overflow:hidden;width:172px;
}
.stepper button{
  appearance:none;flex:none;width:42px;min-height:56px;background:none;border:0;cursor:pointer;
  font-size:17px;line-height:1;color:var(--ink-2);transition:background .12s,color .12s;
}
.stepper button:hover{background:var(--sand);color:var(--ink)}
.stepper button[disabled]{opacity:.3;cursor:default}
.stepper output{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton','Arial Narrow',sans-serif;font-size:26px;line-height:1;
  font-variant-numeric:tabular-nums;
  background:var(--paper);border-inline:1.5px solid var(--line);
}

/* --- booking shell ------------------------------------------------------- */

.book-head{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.book-head .wrap{display:flex;align-items:center;gap:16px;padding-block:14px}

.progress{display:flex;background:var(--card);border-bottom:1.5px solid var(--line)}
.progress li{
  flex:1;display:flex;align-items:center;gap:11px;padding:15px clamp(12px,2vw,22px);
  border-right:1.5px solid var(--line);font-size:13.5px;color:var(--mut);
}
.progress li:last-child{border-right:0}
.progress li .n{
  flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;
}
.progress li.is-done{color:var(--ink)}
.progress li.is-done .n{background:var(--accent);border-color:var(--accent);color:#fff}
.progress li.is-now{background:var(--accent-sf);color:var(--accent);font-weight:700}
.progress li.is-now .n{border-color:var(--accent);color:var(--accent)}
.progress .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.book-grid{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start;padding-block:clamp(24px,3.5vw,44px)}

.book-block + .book-block{margin-top:clamp(28px,3.5vw,44px)}
.book-block > h2{font-size:21px;margin-bottom:6px}
.book-block > .sub{font-size:14px;color:var(--mut);margin-bottom:20px}

.summary{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  position:sticky;top:96px;overflow:hidden;
}
.summary-head{padding:14px 18px;background:var(--sand);border-bottom:1.5px solid var(--line)}
.summary-body{padding:18px}
.summary-line{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;padding:5px 0}
.summary-line .k{color:var(--mut)}
.summary-line .v{font-weight:600;text-align:right}
.summary-rule{border-top:1.5px dashed var(--line);margin:14px 0;padding-top:14px}
.summary-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);margin-top:14px;padding-top:14px}
.summary-total b:last-child{font-family:'Anton',sans-serif;font-size:24px}

.jumper-tabs{display:flex;gap:3px;border-bottom:1.5px solid var(--line);margin-bottom:22px;overflow-x:auto}
.jumper-tab{
  appearance:none;background:var(--paper);border:1.5px solid var(--line);border-bottom:0;
  border-radius:var(--r) var(--r) 0 0;padding:11px 20px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--mut);white-space:nowrap;margin-bottom:-1.5px;
}
.jumper-tab[aria-selected="true"]{background:var(--accent-sf);color:var(--accent);border-color:var(--line);border-bottom:1.5px solid var(--accent-sf)}
.jumper-tab.has-error{color:var(--accent)}
.jumper-tab.has-error::after{content:' !';font-weight:700}

.conditional{border-left:3px solid var(--accent);padding-left:clamp(14px,2vw,22px);margin-top:20px}
.conditional[hidden]{display:none}

.places{position:relative}
.places-list{
  position:absolute;left:0;right:0;top:calc(100% - 2px);z-index:30;
  background:var(--card);border:1.5px solid var(--ink);border-top:0;
  max-height:280px;overflow-y:auto;
}
.places-list[hidden]{display:none}
.place{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line-2);cursor:pointer}
.place:last-child{border-bottom:0}
.place:hover,.place.is-active{background:var(--sand)}
.place.is-out{opacity:.4;cursor:not-allowed}
.place svg{flex:none;margin-top:2px}
.place b{display:block;font-size:14px}
.place small{display:block;font-size:12.5px;color:var(--mut);margin-top:2px}
.place .tag-out{margin-left:auto;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line);padding:2px 6px;border-radius:2px;flex:none}

.picked{display:flex;border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);margin-top:14px}
.picked-info{flex:1;padding:16px 18px}
.picked-map{width:200px;flex:none;background:var(--sand);border-left:1.5px solid var(--line)}
.picked-map img{width:100%;height:100%;object-fit:cover}

.mobile-total{display:none}

/* --- success ------------------------------------------------------------- */

.success-icon{
  width:64px;height:64px;border-radius:50%;border:2.5px solid var(--accent);
  display:flex;align-items:center;justify-content:center;margin:0 auto;
}
.ref-box{border:1.5px dashed var(--line);background:var(--sand);border-radius:var(--r);padding:18px;text-align:center;margin-top:24px}
.ref-box b{display:block;font-family:'Anton',sans-serif;font-size:26px;letter-spacing:.06em;margin-top:6px}

/* --- footer -------------------------------------------------------------- */

.site-foot{background:var(--ink);color:rgba(255,255,255,.72);padding-block:clamp(40px,5vw,64px) 0}
.site-foot a{color:rgba(255,255,255,.72)}
/*
 * 4.0.3. NOT BUTTONS.
 *
 * Sagar reported Book a jump in the footer going invisible on hover. It was
 * this line. The ghost button is told to go white with dark text on hover,
 * and this rule said every link in the footer turns white. This one is the
 * more specific of the two, so it won, and the text turned white on a white
 * background.
 *
 * A button is not a plain link and should never have been caught by a rule
 * about link colour. Excluding it here fixes this button and every button
 * anybody puts in the footer afterwards, which is the version worth having.
 */
.site-foot a:not(.btn){color:rgba(255,255,255,.72)}
.site-foot a:not(.btn):hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,40px)}
.foot-grid h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:14px}
.foot-grid li{margin-bottom:9px;font-size:14px}
.foot-brand .brand-mark{border-color:rgba(255,255,255,.75);color:#fff}
/* Contact list: a small icon sits in a fixed column so every line of text
   starts at the same place, however long the number or address is. */
.contact-list li{margin-bottom:11px}
.contact-list a{display:flex;align-items:center;gap:10px;line-height:1.35}
.contact-list .ci{
  flex:none;width:17px;height:17px;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.5);
}
.contact-list .ci svg{width:17px;height:17px}
.contact-list a:hover .ci{color:inherit}
.contact-list a > span:last-child{min-width:0;overflow-wrap:anywhere}

.socials{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.socials a{
  width:38px;height:38px;border:1.5px solid rgba(255,255,255,.28);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
}
.socials a:hover{border-color:#fff;background:#fff;color:var(--ink)}
.socials svg{width:17px;height:17px}
/*
 * 4.0.3: three items now, not two. The copyright, his made in Nepal line and
 * the risk line. space-between with three puts the middle one in the middle,
 * which is exactly where a warm sentence belongs: between the legal one and
 * the careful one.
 */
.foot-bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);margin-top:clamp(28px,3.5vw,44px);padding-block:20px;
  font-size:12.5px;color:rgba(255,255,255,.45);
}
.foot-bottom .foot-made{color:rgba(255,255,255,.62)}
.foot-bottom .foot-heart{color:var(--accent);font-style:normal}

/* --- cta band ------------------------------------------------------------ */

.cta-band{background:var(--accent);color:#fff}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-block:clamp(34px,4.5vw,56px)}
.cta-band .d3{max-width:20ch}
.cta-band p{margin-top:10px;color:rgba(255,255,255,.88);max-width:46ch}
.cta-actions{display:flex;gap:13px;flex-wrap:wrap}

/* --- flash --------------------------------------------------------------- */

.flash{border-radius:var(--r);padding:15px 18px;font-size:14.5px;margin-bottom:22px;border:1.5px solid}
.flash-err{border-color:#EFC3B7;background:var(--accent-sf);color:#8C2B12}
.flash-ok{border-color:#BFD9C8;background:var(--ok-sf);color:#245234}

/* --- skip link ----------------------------------------------------------- */

/* Honeypot: invisible to people, still fillable by bots, and unlike a
   -9999px offset it can never widen the page. */
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0}

.skip{
  position:absolute;top:0;left:0;z-index:100;
  background:var(--ink);color:#fff;padding:12px 18px;
  clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;
}
.skip:focus{clip-path:none;width:auto;height:auto}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
  .foot-grid{grid-template-columns:1fr 1fr}
  .book-grid{grid-template-columns:1fr}
  .summary{position:static}
}

@media (max-width:900px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pkg-grid{grid-template-columns:1fr}
  .pkg .tagline{min-height:0}
  .split{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery figure.wide{grid-column:span 2}
  .stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}

@media (max-width:760px){
  /* On a phone the header keeps the logo and the menu button. The drawer
     carries the price toggle and the book button, so nothing is lost. */
  .head-tools .tier-toggle.compact{display:none}
  .head-tools > .btn{display:none}
}

@media (max-width:680px){
  .g2,.g3{grid-template-columns:1fr}
  .row{flex-direction:column}
  .row.keep{flex-direction:row}
  .ticker .wrap{flex-direction:column;gap:5px;text-align:center;font-size:10.5px}
  .months{grid-template-columns:repeat(6,minmax(0,1fr))}
  .progress li .lbl{display:none}
  .progress li{justify-content:center;padding:13px 6px}
  .foot-grid{grid-template-columns:1fr}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .picked{flex-direction:column}
  .picked-map{width:100%;height:150px;border-left:0;border-top:1.5px solid var(--line)}
  .field-row > *{flex:1 1 100%}
  .field-row > .w-sm,.field-row > .w-md{flex:1 1 100%}
  .rating-big{font-size:44px}

  .book-page{padding-bottom:104px}
  .mobile-total{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;
    background:var(--card);border-top:1.5px solid var(--line);
    padding:12px var(--gut);gap:14px;align-items:center;
    padding-bottom:max(12px,env(safe-area-inset-bottom,12px));
  }
  .mobile-total .mt-info{flex:1;min-width:0}
  .mobile-total .mt-info b{display:block;font-size:17px;font-family:'Anton',sans-serif}
  .mobile-total .btn{flex:0 0 auto}
  .summary.on-mobile-hide{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .card-media img,.gallery img{transition:none}
}

@media print{
  .site-head,.ticker,.site-foot,.cta-band,.mobile-total,.burger{display:none !important}
  body{background:#fff}
}

/* --- blog post body ------------------------------------------------------- */

.post-body{font-size:clamp(16px,1.5vw,17.5px);line-height:1.75;color:var(--ink-2)}
.post-body > * + *{margin-top:1.15em}
.post-body h2,.post-body h3,.post-body h4{
  font-family:'Anton','Arial Narrow',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.1;color:var(--ink);
  margin-top:1.9em;
}
.post-body h2{font-size:clamp(24px,2.8vw,32px)}
.post-body h3{font-size:clamp(20px,2.2vw,25px)}
.post-body h4{font-size:18px}
.post-body p{margin:0}
.post-body strong{color:var(--ink);font-weight:700}
.post-body a{text-decoration:underline;text-underline-offset:3px}
.post-body ul,.post-body ol{padding-left:22px}
.post-body ul{list-style:disc}
.post-body ol{list-style:decimal}
.post-body li{margin-bottom:.5em}
.post-body li::marker{color:var(--accent)}
.post-body blockquote{
  border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin-left:0;
  font-size:1.08em;color:var(--ink);
}
.post-body blockquote p + p{margin-top:.7em}
.post-body hr{border:0;border-top:1px solid var(--line);margin-block:2.2em}
.post-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--sand);padding:2px 6px;border-radius:2px;
}
.post-figure{margin:2em 0}
.post-figure img{width:100%;border-radius:var(--r);background:var(--sand)}
.post-figure figcaption{margin-top:9px;font-size:13px;color:var(--mut)}

/* =========================================================================
   Version 2.1
   ========================================================================= */

/* --- video in a media slot ----------------------------------------------- */

/*
 * A background video has to cover its box whatever shape the box is, and
 * an iframe cannot be object-fit the way an image can. The trick is to
 * size it to the larger of "full width at 16:9" and "full height at 16:9"
 * and centre the overflow, which crops it exactly like object-fit: cover.
 */
/*
 * =========================================================================
 * 4.0.3. A VIDEO KEEPS ITS OWN BOX UNLESS IT IS A HERO BACKGROUND.
 * =========================================================================
 *
 * This rule used to be the other way round, and it was the bug Sagar
 * reported: a video link put into Watch a jump on the Tandem page appeared
 * over the page header and swallowed the black bar at the top.
 *
 * Here is why. The block was written as position:absolute;inset:0, which
 * means "cover my container", because it was built for a hero background
 * where the container is the hero. An absolutely positioned box looks up the
 * page for the nearest POSITIONED ancestor. A hero is positioned, so in a
 * hero it worked. Watch a jump is a plain figure in a plain section, none of
 * which is positioned, so the video kept looking, found nothing, and pinned
 * itself to the top left corner of the whole page.
 *
 * Two rescues existed, for .card and .card-media, which is how nobody hit
 * this for three years: every other place a video could go happened to be a
 * card. 4.0.2 added three places that are not.
 *
 * So the default is now the safe one. A video sits in its own box, sixteen
 * by nine, wherever it is put. Covering the container is the special case,
 * and a hero asks for it by name. A rule that fails by covering the whole
 * page is not a rule that should be the default.
 */
.media-video{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink);
}
.media-video iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;border:0;pointer-events:none;
}
.media-video.is-interactive iframe{pointer-events:auto}
.media-video .media-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

/* The hero background: cover the hero, and crop rather than letterbox. */
.hero-media .media-video,.page-hero .hero-media .media-video{
  position:absolute;inset:0;aspect-ratio:auto;
}
.hero-media .media-video iframe{
  width:100%;height:56.25vw;min-height:100%;min-width:177.78vh;
}

.hero-media .media-video iframe{opacity:.7}
.page-hero .hero-media .media-video iframe{opacity:.55}

/* --- a film file filling a slot. 3.8 -------------------------------------
   No player, no frame, no titles: the page plays the file itself. The video
   covers the box whatever shape the file is, which is what removes the black
   band a YouTube embed left at the top and bottom of the hero. */
.media-film{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;border:0;pointer-events:none;
}
/* 4.0.3: and the film box keeps its own shape outside a hero too, for the
   same reason as the frame above. */
.media-video.is-film{position:relative;aspect-ratio:16/9}
.hero-media .media-video.is-film{position:absolute;inset:0;aspect-ratio:auto}
.hero-media .media-film{opacity:.7}
.page-hero .hero-media .media-film{opacity:.55}
/* 4.0.3: .card and .card-media no longer need a rescue, because the default
   IS the rescue now. Left as a comment rather than deleted so the next person
   reading this file knows the rule moved rather than vanished. */

/* The fade in and out of each pass, driven by site.js from the film's own
   clock so the end of one loop and the start of the next are the same three
   seconds. The starting value is 1 on purpose: a screen where the script did
   not run shows the film rather than a black rectangle for ever. */
.media-video.is-film{transition:none}
@media (prefers-reduced-motion:reduce){
  .media-video.is-film{opacity:1 !important}
}

/* --- jump day steps ------------------------------------------------------ */

.timeline.is-steps .t-time{
  width:auto;min-width:58px;text-transform:uppercase;
}
.timeline .t-dur{
  margin-top:6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);
}

/* --- gallery lightbox ---------------------------------------------------- */

.gallery .gal-open{
  display:block;width:100%;height:100%;padding:0;border:0;cursor:zoom-in;
  background:none;position:relative;
}
.gallery .gal-open:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.gallery .gal-blank{display:block;aspect-ratio:1;background:var(--ink)}

body.lb-open{overflow:hidden}

.lightbox{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(12,10,8,.94);padding:clamp(16px,4vw,56px);
}
.lightbox[hidden]{display:none}

.lb-stage{margin:0;width:100%;max-width:1100px;display:flex;flex-direction:column;gap:14px}
.lb-body{
  display:flex;align-items:center;justify-content:center;
  width:100%;max-height:78vh;
}
.lb-img{max-width:100%;max-height:78vh;width:auto;height:auto;border-radius:var(--r);display:block}
.lb-frame{width:100%;aspect-ratio:16/9;max-height:78vh;border:0;border-radius:var(--r);background:#000}
.lb-cap{color:rgba(255,255,255,.72);font-size:13.5px;text-align:center}

.lightbox button{
  appearance:none;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.26);border-radius:50%;
  display:flex;align-items:center;justify-content:center;line-height:1;
  transition:background .15s,border-color .15s;
}
.lightbox button:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.5)}
.lightbox button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.lb-close{position:absolute;top:14px;right:14px;width:44px;height:44px;font-size:26px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:30px}
.lb-nav[hidden]{display:none}
.lb-prev{left:10px}
.lb-next{right:10px}

@media (max-width:640px){
  .lb-nav{width:40px;height:40px;font-size:24px}
  .lb-prev{left:4px}
  .lb-next{right:4px}
}

/* --- courses ------------------------------------------------------------- */

.course-card{display:flex;flex-direction:column}
.course-card.is-featured{border-color:var(--ink)}
.course-price{text-align:right}
.course-price b{font-family:'Anton',sans-serif;font-size:24px;display:block;line-height:1.1}
.course-price span{display:block;margin-top:3px}

@media (max-width:560px){
  .course-price{text-align:left}
}

/* --- instagram ----------------------------------------------------------- */

.ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.ig-grid .instagram-media{margin:0 !important;min-width:0 !important;width:100% !important;max-width:100% !important}
.ig-embed{min-height:120px}

@media (max-width:900px){ .ig-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .ig-grid{grid-template-columns:minmax(0,1fr)} }

/* A review pulled from Google brings a real profile picture with it. */
img.avatar{object-fit:cover;background:var(--sand)}


/* --- solo jump price list ------------------------------------------------ */

/*
 * These used to sit in the left half of a split, which squeezed four groups
 * of cards into half the page and left the photo floating in the empty half
 * beside them. They get the full width now, one band per group.
 */
.price-group + .price-group{margin-top:clamp(28px,3.4vw,44px)}

.price-group-head{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);padding-bottom:10px;margin-bottom:clamp(14px,1.8vw,20px);
  border-bottom:1px solid var(--line);
}

/*
 * auto-fill rather than auto-fit, so a group holding a single card gets one
 * card of the normal width with empty tracks beside it, instead of one card
 * stretched across the whole row. Every card on the page then reads at the
 * same size whichever group it is in.
 */
.price-cards{
  display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}

.price-card{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  padding:20px;display:flex;flex-direction:column;
}
.price-card h4{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);
}
.price-card-amount{
  font-family:'Anton',sans-serif;font-size:clamp(22px,2.4vw,27px);line-height:1.1;
  margin-top:10px;
}
.price-card-unit{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);
  margin-top:4px;
}
.price-card-note{
  font-size:13px;line-height:1.55;color:var(--mut);margin-top:12px;
  padding-top:12px;border-top:1px dashed var(--line);
}

/*
 * The photo beside an intro fills its half of the split. Without this a
 * placeholder sits at its own small natural size, floating in the middle of
 * an otherwise empty column.
 */
.split-media img,.split-media .media-video{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r);background:var(--sand);
}

@media (max-width:560px){
  .price-cards{grid-template-columns:minmax(0,1fr)}
}

/* The four jump numbers.
   They used to be a two by two block inside the left half of the split,
   which made them uneven with the text above and left the photo floating in
   an otherwise empty column. One row of four, full width, under the split. */
.jump-specs{margin-top:clamp(26px,3.6vw,44px)}
.spec-tile{padding:18px}
.spec-tile b{
  display:block;font-family:'Anton',sans-serif;
  font-size:clamp(20px,2.1vw,26px);line-height:1.05;
}
.spec-tile .kicker{display:block;margin-top:6px}

/* ============================================================
   3.0 — the code box on the booking summary
   ============================================================
   One field for a promo code or a referral code, because the
   customer holding SAGAR-7K2M does not know which it is.

   Full width and 44px tall so it is tappable on a phone, where
   the summary is a sheet rather than a column.
   ============================================================ */
.promo-box{border-top:1.5px dashed var(--line);margin-top:14px;padding-top:14px}
.promo-row{display:flex;gap:8px}
.promo-row .input{flex:1 1 auto;min-width:0;min-height:44px;font-size:14px}
.promo-row .btn{flex:0 0 auto;min-height:44px;padding:0 16px}

.promo-on{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1.5px solid var(--ok,#2F6B43);background:var(--ok-sf,#EDF5EF);
  border-radius:var(--r,3px);padding:10px 12px;
}
.promo-on b{font-size:14px;letter-spacing:.04em}

.btn-link{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--mut);text-decoration:underline;
}
.btn-link:hover{color:var(--accent)}

.promo-msg{margin-top:8px;color:var(--ok,#2F6B43)}
.promo-msg.is-bad{color:var(--accent)}

.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;
}

@media (max-width:640px){
  .promo-row{flex-wrap:wrap}
  .promo-row .input{flex:1 1 100%}
  .promo-row .btn{flex:1 1 100%}
}

/* --- the public Load Board. 3.8 ------------------------------------------
   A phone is tall and narrow and the screen on the wall is wide, so this is
   the same information turned ninety degrees: the countdown filling the top,
   because that is the one thing somebody pulls their phone out to check, and
   one card per load underneath it. */
.lb{background:var(--ink);color:#fff;min-height:70vh;padding-block:22px 40px}
.lb-wrap{max-width:560px}
.lb-clock{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);padding:20px 16px;text-align:center;
}
.lb-clock.is-held{background:rgba(214,58,30,.16);border-color:rgba(214,58,30,.5)}
.lb-k{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin:0;
}
.lb-time{
  font-family:'Anton',sans-serif;font-size:clamp(54px,17vw,84px);line-height:1;
  margin:6px 0 8px;font-variant-numeric:tabular-nums;
}
.lb-clock.is-over .lb-time{color:var(--accent)}
.lb-sound{margin-top:14px;text-align:center}
.lb-sound .btn-o{border-color:rgba(255,255,255,.5);color:#fff}
.lb-sound .btn-o:hover{background:#fff;color:var(--ink)}
.lb-sound .bsound.is-on,.lb-sound .btn-o[aria-pressed="true"]{
  background:#2F6B43;border-color:#2F6B43;color:#fff;
}
.lb-sound .tiny{color:rgba(255,255,255,.55)}

.lb-loads{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.lb-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r);overflow:hidden;
}
.lb-card.is-next{border-color:var(--accent)}
.lb-card-head{
  display:flex;align-items:baseline;gap:10px;padding:11px 13px;
  background:rgba(255,255,255,.06);font-size:13px;
}
.lb-card-head b{font-size:15px}
.lb-when{margin-left:auto;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
.lb-row{
  display:flex;align-items:baseline;gap:10px;padding:9px 13px;
  border-top:1px solid rgba(255,255,255,.08);font-size:14px;
}
.lb-who{font-weight:600;min-width:0;overflow-wrap:anywhere}
/*
 * 4.0.8. The exit weight, beside the name on the public board.
 *
 * margin-left:auto moves to this one, so the weight sits at the right hand
 * end of the free space and the jump type and group stay pinned after it.
 * Tabular figures so a column of weights lines up down the card.
 */
.lb-kg{
  /*
   * The ROW's own colour, faded, not white. A row carries its exit group's
   * background, and those are pale with dark ink on them, so a white weight
   * was invisible on every row that had a group. Caught by looking at the
   * page rather than by reading the stylesheet.
   */
  margin-left:auto;font-size:12.5px;font-variant-numeric:tabular-nums;
  color:inherit;opacity:.72;white-space:nowrap;
}
.lb-what{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.7);white-space:nowrap;
}
.lb-empty{padding:14px 13px;font-size:13px;color:rgba(255,255,255,.55)}
.lb-foot{margin-top:22px;color:rgba(255,255,255,.5);text-align:center}
.lb .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
.lb .card .mut,.lb .card .small{color:rgba(255,255,255,.7)}

/* The exit group colours, in the SAME ORDER the wall uses since 3.6, so a
   jumper reading their phone and a jumper reading the wall see the same group
   in the same colour.

   3.9: THE FULL WASH, exactly as the wall paints it, rather than the thin bar
   down the edge 3.8 used. The six fills and the six text colours below are the
   same six pairs as .bgrp-1 to .bgrp-6 in admin.css, copied rather than
   shared because the two stylesheets are loaded on different pages and one
   importing the other would put the whole dashboard stylesheet on a public
   booking page.

   A group is now a solid block of colour on the card, which is the point: it
   is read across a room, and three names in one colour is the shape somebody
   recognises before they read a word of it. */
.lb-row.bgrp-1{background:#DCEAF7;color:#1B4D77}
.lb-row.bgrp-2{background:#DDF0E2;color:#245B36}
.lb-row.bgrp-3{background:#E8E0F5;color:#4B2D7A}
.lb-row.bgrp-4{background:#FADFDA;color:#95301A}
.lb-row.bgrp-5{background:#FAF0CE;color:#6E5410}
.lb-row.bgrp-6{background:#D9EEEE;color:#0F6E6E}
/* The jump type and group sit on a light row now, so they take the row's own
   colour rather than the white the dark card gave them. Without this they are
   white on pale blue and cannot be read at all. The divider goes dark for the
   same reason. */
.lb-row[class*="bgrp-"] .lb-what{color:inherit;opacity:.68}
.lb-row[class*="bgrp-"]{border-top-color:rgba(21,18,14,.12)}

/* ---- 3.9. THE LOAD STATUS, on the public board -------------------------
   Only from Accepted onward, and in a passenger's words. The list of which
   statuses appear at all, and why, is LOAD_PUBLIC_STATUS in
   includes/manifest.php.

   Each pill is a dark tint of the tone the dashboard gives that status, so a
   load that is blue on the wall is blue here. They carry the word as well as
   the colour, because a colour on its own is no status to somebody who cannot
   tell two of them apart. */
.lb-st{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:3px 6px;border-radius:3px;white-space:nowrap;
}
.lb-st-accepted{background:#1E3A2A;color:#8FD3A6}
.lb-st-boarding{background:#3A2F10;color:#DBC77A}
.lb-st-airborne{background:#15314C;color:#8EC2EE}
.lb-st-landed{background:#22303A;color:#A6C3D4}
.lb-st-completed{background:#26221D;color:#8B8377}

/* ---- 3.9. THREE ACROSS, ON A DESKTOP ONLY ------------------------------
   The phone view is the one he said was already right, so it is untouched:
   everything below only starts at 900px, which no phone reaches in either
   orientation.

   The countdown, the Sound button and the no-loads card keep the old narrow
   width and stay centred. Widening those along with the cards would give a
   countdown the width of the screen and a Sound button a metre long, and the
   countdown is the reason somebody opens this page.

   align-items:start so a load with two names does not stretch to the height of
   a load with five beside it. */
@media (min-width:900px){
  .lb-wrap{max-width:1180px}
  .lb-clock,.lb-sound,.lb .card{max-width:560px;margin-left:auto;margin-right:auto}
  .lb-loads{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:14px}
}

/*
 * 4.0.3. A picture in the Watch a jump row fills its box.
 *
 * The boxes are all sixteen by nine now. A photograph keeps its own
 * proportions inside an img, so without this a tall picture would sit in the
 * middle of a wide box with grey either side, which is the mismatch Sagar
 * photographed in a different form.
 */
.watch-fill{width:100%;height:100%;object-fit:cover;display:block}

/*
 * 4.0.3. A film playing in the lightbox, and a video in the library grid.
 *
 * .lb-frame was written for an iframe; a <video> in the same place needs the
 * same size and a black ground behind it, because a film with a different
 * shape to the panel letterboxes and grey bars look like a fault.
 */
video.lb-frame{background:#000;object-fit:contain}