/* ==========================================================================
   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}

.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. */
.brand-logo{display:block;height:40px;width:auto;max-width:210px;object-fit:contain}
.site-foot .brand-logo{height:44px;max-width:230px}
.drawer-top .brand-logo{height:36px}
@media (max-width:560px){
  .brand-logo{height:34px;max-width:160px}
}
.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%);
}
.hero-body{position:relative;padding-block:clamp(72px,13vw,150px)}
.hero-body .d1{margin-top:16px;max-width:15ch}
.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)}
.site-foot a: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}
.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);
}

/* --- 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)}