/* Chiang Mai Taxi
   ----------------------------------------------------------------------
   The old page sold "CNX Airport Transfer Service" in its title, its H1, its
   meta description and eleven keyword slots, and the fare table it was built
   around contained no CNX row at all — the only airport fare is Bangkok, seven
   hundred kilometres away. The owner's decision was to take the sign down.

   What is actually sold here is two things, and the page is built as that
   choice: a one-way run out of the valley (Pai, Chiang Rai, Bangkok), or the
   car and driver kept for ten hours. Everything worth going to is thirty
   minutes to three hours UP a mountain and back, which is why the road, not
   the distance, decides which car you want. Pai is a hundred and thirty
   kilometres and seven hundred and sixty-two curves.

   The palette is one hue: the indigo the north dyes its cotton with, from the
   near-black of the dark bands to the blue the figures are set in, on
   unbleached cloth. Fraunces for headings, Hanken Grotesk for text, Anuphan on
   the Thai side.

   No Tabler, no Bootstrap. Every class here is this site's. */

:root {
  --paper:  #f1ece0;   /* unbleached cotton */
  --paper-2:#f8f5ec;
  --deep:   #0f1830;   /* indigo at its darkest, for the bands */
  --ink:    #17233f;
  --ink-2:  #55607a;
  --rule:   #d5cebd;
  --rule-2: #2b3554;   /* the same rule, drawn on the dark bands */
  --blue:   #2743c4;   /* the figures: curves, metres, minutes, baht */
  --on-deep:#e6e1d3;
  --on-deep-2: #9aa2b8;
  --pad:    clamp(1rem, 4vw, 2.75rem);
  --wrap:   70rem;
  --text:   "Hanken Grotesk", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --disp:   "Fraunces", Georgia, "Times New Roman", serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.62;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.sideways { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------------- ridge */
.ridge { background: var(--deep); color: var(--on-deep); }
.ridge .wrap { display: flex; align-items: center; gap: 1rem; min-height: 58px; }
.ridge-brand { display: flex; align-items: center; gap: .55rem; text-decoration: none;
  color: inherit; margin-right: auto; }
.ridge-brand img { height: 26px; width: auto; }
.ridge-brand b { font-family: var(--disp); font-weight: 600; font-size: 1.12rem;
  white-space: nowrap; }
.ridge-nav { display: flex; align-items: center; gap: .1rem; min-width: 0; }
.ridge-nav a { font-size: .95rem; text-decoration: none; padding: .35rem .6rem;
  white-space: nowrap; color: var(--on-deep-2); }
.ridge-nav a:hover { color: var(--on-deep); }
.ridge-nav a.at { color: var(--on-deep); box-shadow: inset 0 -2px 0 currentColor; }
.ridge-nav a.ride { color: var(--deep); }
.tongues { display: flex; gap: .35rem; padding-left: .6rem; margin-left: .3rem;
  border-left: 1px solid var(--rule-2); }
.tongues a { padding: .25rem; line-height: 0; }
.tongues img { width: 22px; height: 15px; opacity: .45; }
.tongues a.at img { opacity: 1; outline: 2px solid var(--on-deep); outline-offset: 1px; }

/* ------------------------------------------------------------------ valley */
.valley { background: var(--deep); color: var(--on-deep); padding-block: clamp(2rem, 6vw, 3.6rem); }
.valley h1 {
  font-family: var(--disp); font-weight: 600; font-size: clamp(2rem, 1.1rem + 3.6vw, 3.3rem);
  line-height: 1.06; letter-spacing: -.015em; margin: 0; max-width: 19ch; text-wrap: balance;
}
.valley > .wrap > p { max-width: 56ch; color: var(--on-deep-2); margin: 1rem 0 0; font-size: 1.05rem; }
.rides { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }

/* the two ways to buy, stated as the choice they are */
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px; margin-top: 2.2rem; background: var(--rule-2); border: 1px solid var(--rule-2); }
.way { background: var(--deep); padding: 1.1rem 1.2rem; min-width: 0; }
.way b { font-family: var(--disp); font-weight: 600; font-size: 1.25rem; display: block;
  margin-bottom: .2rem; }
.way p { margin: 0; font-size: .93rem; color: var(--on-deep-2); }
.way .from { display: block; margin-top: .6rem; font-family: var(--disp); font-weight: 600;
  font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--on-deep); }
.way .from small { font-family: var(--text); font-weight: 400; font-size: .8rem;
  color: var(--on-deep-2); }

/* ---------------------------------------------------------------- buttons */
.ride, .ride-2 {
  display: inline-block; font-family: var(--disp); font-weight: 600; font-size: 1rem;
  padding: .6rem 1.2rem; text-decoration: none; border: 1px solid transparent;
}
.ride { background: var(--on-deep); color: var(--deep); }
.ride:hover { background: #fff; }
.ride-2 { border-color: currentColor; }
.ride-2:hover { color: var(--blue); }
.valley .ride-2:hover, .band-deep .ride-2:hover { color: #fff; }

/* --------------------------------------------------------------- sections */
.part { padding-block: clamp(2.4rem, 6vw, 4rem); border-top: 1px solid var(--rule); }
.band-deep { background: var(--deep); color: var(--on-deep); border-top: 0;
  --ink: var(--on-deep); --ink-2: var(--on-deep-2); --rule: var(--rule-2); --paper-2: #16203c; }
.partno { font-family: var(--disp); font-weight: 600; font-size: .95rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue); margin: 0 0 .3rem; }
.band-deep .partno { color: #93a4ee; }
.part h2 { font-family: var(--disp); font-weight: 600; letter-spacing: -.015em;
  font-size: clamp(1.55rem, 1.1rem + 2vw, 2.4rem); line-height: 1.1; margin: 0 0 .6rem;
  text-wrap: balance; }
.part > .wrap > p { max-width: 60ch; }
.dim { color: var(--ink-2); }
.part > .wrap > p.dim { margin: 0 0 1.8rem; }
.fig { color: var(--blue); font-variant-numeric: tabular-nums; }
.band-deep .fig { color: #93a4ee; }

/* ------------------------------------------------------------------- roads
   Three ways out of the valley. The payload of each row is not the distance —
   it is which car the road wants, which is the question nobody was answering. */
.roads { display: grid; gap: 1.2rem; }
.road { border: 1px solid var(--rule); background: var(--paper-2); min-width: 0; }
.road-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--rule); }
.road-h h3 { font-family: var(--disp); font-weight: 600; font-size: 1.35rem; margin: 0; }
.road-h .way-of { font-size: .88rem; color: var(--ink-2); }
.road-b { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem; padding: 1rem 1.1rem; }
.road-b > div { min-width: 0; }
.road-b dt { font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: .2rem; }
.road-b dd { margin: 0; font-family: var(--disp); font-weight: 600; font-size: 1.3rem;
  line-height: 1.15; font-variant-numeric: tabular-nums; }
.road-b dd small { display: block; font-family: var(--text); font-weight: 400;
  font-size: .82rem; color: var(--ink-2); margin-top: .15rem; }
.road-note { border-top: 1px solid var(--rule); padding: .8rem 1.1rem; font-size: .93rem;
  color: var(--ink-2); }
.road-note b { color: var(--ink); }

/* ------------------------------------------------------------------- fares
   #price-tbody is a contract with functions/_middleware.js, which
   server-renders these rows. Six columns, no more, no fewer. */
.fares { border: 1px solid var(--rule); background: var(--paper-2); }
.fares table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.fares thead th { background: var(--deep); color: var(--on-deep); text-align: left;
  font-family: var(--disp); font-weight: 600; font-size: .88rem; padding: .6rem .8rem;
  white-space: nowrap; }
.fares thead th small { display: block; font-family: var(--text); font-weight: 400;
  font-size: .7rem; color: var(--on-deep-2); }
.fares tbody td { padding: .6rem .8rem; border-top: 1px solid var(--rule); }
.fr-p { text-align: right; font-family: var(--disp); font-weight: 600; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.fr-b { text-align: right; white-space: nowrap; }
.fr-b a { font-family: var(--disp); font-weight: 600; font-size: .88rem; text-decoration: none;
  padding: .25rem .65rem; border: 1px solid var(--ink); display: inline-block; }
.fr-b a:hover { background: var(--ink); color: var(--paper); }
.fr-msg { padding: 1.6rem .8rem; text-align: center; color: var(--ink-2); }
.fares-foot { display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; align-items: center;
  justify-content: space-between; margin-top: 1.1rem; }
.fares-foot p { margin: 0; font-size: .9rem; color: var(--ink-2); max-width: 48ch; }

/* --------------------------------------------------------------- the day */
.tenhr { border: 1px solid var(--rule-2); background: #16203c; padding: 1.2rem 1.3rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 1.4rem;
  margin-bottom: 2rem; }
.tenhr > div { min-width: 0; }
.tenhr dt { font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--on-deep-2); margin-bottom: .2rem; }
.tenhr dd { margin: 0; font-family: var(--disp); font-weight: 600; font-size: 1.45rem;
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.tenhr dd small { display: block; font-family: var(--text); font-weight: 400; font-size: .8rem;
  color: var(--on-deep-2); margin-top: .15rem; }

/* what is up there, grouped by how long the climb takes */
.stint { margin-top: 1.8rem; }
.stint > h3 { font-family: var(--disp); font-weight: 600; font-size: 1.05rem; margin: 0 0 .1rem;
  padding-top: .8rem; border-top: 1px solid var(--rule); }
.stint > p { margin: 0 0 .9rem; font-size: .86rem; color: var(--ink-2); }
.spots { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem 1.4rem; }
.spot { min-width: 0; }
.spot b { font-family: var(--disp); font-weight: 600; font-size: 1.05rem; display: block; }
.spot p { margin: .15rem 0 0; font-size: .9rem; color: var(--ink-2); }

/* ----------------------------------------------------------------- the car */
.rigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem;
  margin-bottom: 1.6rem; }
.rig { border: 1px solid var(--rule); background: var(--paper-2); padding: .85rem 1rem; min-width: 0; }
.rig b { font-family: var(--disp); font-weight: 600; font-size: 1.25rem; display: block; }
.rig dl { margin: .45rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .05rem .7rem;
  font-size: .9rem; }
.rig dt { color: var(--ink-2); }
.rig dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.adds { border-top: 1px solid var(--ink); }
.add { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; align-items: baseline;
  padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.add h3 { font-family: var(--disp); font-weight: 600; font-size: 1.05rem; margin: 0; }
.add p { grid-column: 1 / -1; margin: 0; font-size: .91rem; color: var(--ink-2); max-width: 62ch; }
.add .fee { font-family: var(--disp); font-weight: 600; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.manners { margin-top: 1.3rem; font-size: .91rem; color: var(--ink-2); }
.manners ul { margin: .3rem 0 0; padding-left: 1.05rem; }

/* ------------------------------------------------------------------ roots */
.roots { background: var(--deep); color: var(--on-deep-2); padding-block: 2.2rem; }
.roots a { color: var(--on-deep); }
.roots-top { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center;
  justify-content: space-between; }
.roots-nav { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .95rem; }
.roots-nav a { text-decoration: none; }
.roots-nav a:hover { color: #93a4ee; }
.roots-say { margin: 1.4rem 0 0; font-size: .88rem; max-width: 64ch; }
.roots-say a { text-decoration: underline; }
.roots-end { margin: 1rem 0 0; font-size: .8rem; color: #7f879c; }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 44rem) {
  body { font-size: 16px; }
  .ridge .wrap { flex-wrap: wrap; padding-block: .5rem; gap: .5rem; }
  .ridge-nav { width: 100%; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

:lang(th) { line-height: 1.85; }
:lang(th) .valley h1, :lang(th) .part h2 { line-height: 1.35; letter-spacing: 0; }

/* =====================================================================
   Compatibility layer — booking, contact, tour and 404
   ---------------------------------------------------------------------
   Those four pages are the booking application, embedded here as it is on
   every site in this network: one form, one submit handler, element ids
   and class names its own inline JavaScript queries by. They came off
   Tabler and carry its utility classes.

   The names are inherited; every value below is this site's — unbleached
   paper, indigo ink, Fraunces headings, one-pixel rules. Tabler is no
   longer loaded anywhere.
   ===================================================================== */

.page { min-height: 100%; }
.container-xl { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

.row { display: flex; flex-wrap: wrap; margin-inline: -.5rem; }
.row > [class*="col-"] { padding-inline: .5rem; width: 100%; min-width: 0; }
.g-2 { row-gap: .5rem; } .g-3 { row-gap: 1rem; } .g-4 { row-gap: 1.5rem; }
.col-6 { width: 50%; } .col-12 { width: 100%; }
@media (min-width: 768px) {
  .col-md-3 { width: 25%; } .col-md-4 { width: 33.3333%; }
  .col-md-6 { width: 50%; } .col-md-8 { width: 66.6667%; }
  .text-md-start { text-align: left; } .text-md-end { text-align: right; }
  .mb-md-0 { margin-bottom: 0; } .d-md-inline { display: inline; } .d-md-block { display: block; }
}
@media (min-width: 992px) {
  .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.3333%; } .col-lg-5 { width: 41.6667%; }
  .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.3333%; } .col-lg-8 { width: 66.6667%; }
  .col-lg-10 { width: 83.3333%; }
  .order-lg-1 { order: 1; } .order-lg-2 { order: 2; }
}
@media (min-width: 576px) { .flex-sm-row { flex-direction: row; } .d-sm-inline { display: inline; } }
.mx-auto { margin-inline: auto; }

.d-flex { display: flex; } .d-block { display: block; } .d-none { display: none; }
.d-grid { display: grid; }
.flex-row { flex-direction: row; } .flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; } .flex-fill { flex: 1 1 auto; }
.align-items-center { align-items: center; } .align-items-start { align-items: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.ms-auto { margin-left: auto; } .me-auto { margin-right: auto; }
.w-100 { width: 100%; } .h-100 { height: 100%; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; }
.order-1 { order: 1; } .order-2 { order: 2; }
[hidden] { display: none !important; }

.m-0{margin:0}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:3rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.mt-5{margin-top:3rem}.me-1{margin-right:.25rem}.me-2{margin-right:.5rem}.me-3{margin-right:1rem}
.ms-1{margin-left:.25rem}.ms-2{margin-left:.5rem}.my-3{margin-block:1rem}
.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:1rem}.p-4{padding:1.5rem}
.px-3{padding-inline:1rem}.py-1{padding-block:.25rem}.py-2{padding-block:.5rem}
.py-3{padding-block:1rem}.py-4{padding-block:1.5rem}.py-5{padding-block:clamp(2.2rem,5vw,3.4rem)}
.pt-0{padding-top:0}.pt-2{padding-top:.5rem}.pt-3{padding-top:1rem}.pb-0{padding-bottom:0}

.text-center { text-align: center; } .text-end { text-align: right; } .text-start { text-align: left; }
.text-muted { color: var(--ink-2); }
.text-white, .text-dark { color: var(--ink); }
.text-decoration-none { text-decoration: none; }
.fw-bold { font-weight: 600; } .fw-medium { font-weight: 500; } .fw-normal { font-weight: 400; }
.small, small { font-size: .86em; }
.lead { font-size: 1.08rem; } .opacity-90 { opacity: .9; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
h1, h2, h3, h4, .h4, .h5, .h6 {
  font-family: var(--disp); font-weight: 600; letter-spacing: -.015em; line-height: 1.12; margin: 0 0 .5rem;
}
.h4 { font-size: 1.45rem; } .h5 { font-size: 1.22rem; } .h6 { font-size: 1.05rem; }
.display-1 { font-family: var(--disp); font-weight: 600; font-size: clamp(4rem, 12vw, 7.5rem); line-height: .95; }

.card { background: var(--paper-2); border: 1px solid var(--rule); }
.card-header { background: var(--deep); color: var(--on-deep); padding: .7rem 1rem;
  font-family: var(--disp); font-weight: 600; }
.card-header h1, .card-header h2, .card-header h3 { margin: 0; color: inherit; }
.card-body { padding: 1rem; }
.card-title { font-family: var(--disp); font-weight: 600; }
.border-0 { border: 0; } .shadow-sm, .shadow, .shadow-lg { box-shadow: none; } .rounded { border-radius: 0; }
.border-top { border-top: 1px solid var(--rule); }
.bg-white { background: var(--paper-2); }
.bg-green, .bg-azure, .bg-teal, .bg-azure-lt { background: var(--deep); }
.text-green-fg, .text-azure-fg, .text-teal-fg { color: var(--on-deep); }

.btn {
  display: inline-block; font-family: var(--disp); font-weight: 600; font-size: .98rem;
  text-align: center; padding: .55rem 1.1rem; border: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; line-height: 1.35;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: transparent; color: var(--ink); }
.btn-lg { font-size: 1.08rem; padding: .68rem 1.35rem; }
.btn-sm { font-size: .86rem; padding: .3rem .65rem; }
.btn-taxi, .btn-ocean, .btn-primary, .btn-warning, .btn-dark, .btn-success, .btn-light {
  background: var(--deep); border-color: var(--deep); color: var(--on-deep);
}
.btn-taxi:hover, .btn-ocean:hover, .btn-primary:hover, .btn-warning:hover,
.btn-dark:hover, .btn-success:hover, .btn-light:hover {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.btn-outline-ocean, .btn-outline-dark, .btn-outline-light,
.btn-outline-secondary, .btn-outline-success { background: transparent; }
.btn-group { display: inline-flex; }
.btn-group > .btn + .btn { margin-left: -1px; }

.form-label { display: block; font-family: var(--disp); font-weight: 600; font-size: .9rem;
  margin-bottom: .25rem; }
.form-control, .form-select {
  display: block; width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: 0; padding: .5rem .65rem;
}
.form-select { appearance: none; padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.form-control::placeholder { color: var(--ink-2); }
.form-control:focus, .form-select:focus { outline: 2px solid var(--blue); outline-offset: 1px;
  border-color: var(--blue); }
.form-check { display: flex; align-items: flex-start; gap: .5rem; }
.form-check-input { margin-top: .3rem; accent-color: var(--blue); }
.form-check-label { font-size: .94rem; }
textarea.form-control { min-height: 6rem; resize: vertical; }
.input-group { display: flex; }
.input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; width: 1%; }
.input-group > * + * { margin-left: -1px; }

.alert { border: 1px solid var(--rule); border-left-width: 5px; border-left-color: var(--ink);
  background: var(--paper-2); padding: .75rem 1rem; }
.alert-danger, .alert-warning { border-left-color: var(--blue); }
.text-danger { color: #a3241f; } .text-success, .text-warning { color: var(--ink); }
.badge { display: inline-block; font-family: var(--disp); font-weight: 600; font-size: .78rem;
  padding: .1rem .45rem; border: 1px solid var(--rule); }
.spinner-border { display: inline-block; width: 1.3rem; height: 1.3rem; vertical-align: -.2em;
  border: 3px solid var(--rule); border-right-color: var(--blue); border-radius: 50%;
  animation: cm-spin .7s linear infinite; }
.spinner-border-sm { width: .9rem; height: .9rem; border-width: 2px; }
@keyframes cm-spin { to { transform: rotate(360deg); } }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .5rem .7rem; border-bottom: 1px solid var(--rule); text-align: left; }
.table-responsive { overflow-x: auto; }

.car-type-btn { display: block; width: 100%; text-align: center; cursor: pointer;
  border: 1px solid var(--rule); background: #fff; color: var(--ink); padding: .55rem .4rem;
  font-family: var(--disp); font-weight: 600; }
.car-type-btn:hover { border-color: var(--ink); }
.car-type-btn.active { background: var(--deep); border-color: var(--deep); color: var(--on-deep); }
.route-card, .route-grid-card { display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--rule); background: var(--paper-2); color: inherit;
  padding: .6rem .8rem; margin-bottom: .45rem; }
.route-card:hover, .route-grid-card:hover { border-color: var(--ink); }
.route-card.selected, .route-grid-card.selected { border-color: var(--blue); background: #fff; }
.route-from-to { font-family: var(--disp); font-weight: 600; font-size: 1.05rem; }
.route-price { font-family: var(--disp); font-weight: 600; color: var(--blue);
  font-variant-numeric: tabular-nums; }
.booking-summary { border: 1px solid var(--blue); background: #fff; padding: .8rem 1rem; }
.booking-summary-item { display: flex; justify-content: space-between; gap: 1rem; padding: .18rem 0; }
.booking-summary-total { display: flex; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--rule); margin-top: .5rem; padding-top: .5rem;
  font-family: var(--disp); font-weight: 600; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.step-indicator { display: flex; align-items: center; gap: .5rem; padding: .4rem .9rem;
  border: 1px solid var(--rule); color: var(--ink-2); }
.step-indicator.active { border-color: var(--blue); color: var(--ink); }
.step-number { font-family: var(--disp); font-weight: 600; width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center; background: var(--rule); color: var(--ink); flex: 0 0 auto; }
.step-indicator.active .step-number { background: var(--blue); color: #fff; }
.step-label { font-family: var(--disp); font-weight: 600; font-size: .95rem; }
.step-line { flex: 1 1 auto; min-width: 14px; height: 1px; background: var(--rule); }
.tour-card { background: var(--paper-2); border: 1px solid var(--rule); height: 100%;
  display: flex; flex-direction: column; }
.tour-card-header { background: var(--deep); color: var(--on-deep); padding: .85rem 1.1rem; }
.tour-card-header h3 { color: var(--on-deep); margin: 0 0 .15rem; font-size: 1.2rem; }
.tour-card-body { padding: 1.1rem; flex: 1; display: flex; flex-direction: column; }
.tour-info { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tour-info-item { display: flex; align-items: center; gap: .45rem; font-size: .92rem; color: var(--ink-2); }
.tour-info-item svg { color: var(--blue); }
.tour-includes { background: #fff; border-left: 3px solid var(--rule); padding: .7rem .8rem;
  margin-bottom: 1rem; font-size: .92rem; color: var(--ink-2); }
.tour-includes strong { color: var(--ink); }
.tour-prices { margin-top: auto; }
.tour-price-row { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem 1rem;
  align-items: center; padding: .55rem 0; border-top: 1px solid var(--rule); }
.tour-price-type { font-family: var(--disp); font-weight: 600; }
.tour-price-value { font-family: var(--disp); font-weight: 600; color: var(--blue);
  font-variant-numeric: tabular-nums; }
.tour-price-book { justify-self: end; }
.feature-card { border-top: 1px solid var(--rule); padding-top: .8rem; }
.feature-icon { display: none; }
.feature-title { font-family: var(--disp); font-weight: 600; font-size: 1.1rem; margin: 0 0 .2rem; }
.hero-section { padding-block: clamp(1.8rem, 5vw, 3rem); }
.hero-title { font-family: var(--disp); font-weight: 600; letter-spacing: -.015em;
  font-size: clamp(1.85rem, 1.1rem + 3vw, 2.9rem); line-height: 1.08; margin: 0 0 .6rem; }
.hero-subtitle { color: var(--ink-2); margin: 0 0 1.2rem; }
.cta-section { background: var(--deep); color: var(--on-deep); }
.cta-section h1, .cta-section h2, .cta-section h3 { color: var(--on-deep); }
.cta-section p, .cta-section .text-muted { color: var(--on-deep-2); }
.cta-section .btn { border-color: var(--on-deep); color: var(--on-deep); }
.cta-section .btn:hover { background: var(--on-deep); color: var(--deep); }
.nf-link { border-top: 1px solid var(--rule); padding: .65rem .2rem; }
.nf-link:hover { color: var(--blue); }
/* Turnstile ships a fixed 300px iframe; without this it pushes phones sideways. */
.cf-turnstile { max-width: 100%; overflow-x: auto; }

/* The FAQ, converted from a Bootstrap collapse accordion to native <details>. */
.qa-list { border-top: 1px solid var(--rule); }
.qa { border-bottom: 1px solid var(--rule); }
.qa > summary { list-style: none; cursor: pointer; padding: .85rem 2rem .85rem 0; position: relative; }
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after { content: "+"; position: absolute; right: .2rem; top: .75rem;
  font-family: var(--disp); font-weight: 600; font-size: 1.3rem; color: var(--blue); line-height: 1; }
.qa[open] > summary::after { content: "\2212"; }
.qa > summary:hover h3 { color: var(--blue); }
.qa > summary h3 { font-family: var(--disp); font-weight: 600; font-size: 1.05rem; margin: 0; }
.qa-body { padding: 0 2rem 1rem 0; color: var(--ink-2); font-size: .96rem; }

/* The old palette names still appear in inline styles inside JS template
   literals on booking.html and tour.html. Editing those strings by hand is how
   a booking page breaks, so the names survive and point at this site's ink. */
:root {
  --taxi-yellow: #2743c4; --taxi-yellow-dark: #17233f; --taxi-yellow-light: #4a63d8;
  --taxi-yellow-warm: #2743c4;
  --taxi-black: #0f1830; --taxi-dark: #0f1830;
  --taxi-white: #f1ece0; --taxi-off-white: #f8f5ec;
  --taxi-gray: #55607a; --taxi-gray-dark: #17233f; --taxi-gray-light: #d5cebd;
  --mountain-purple: #17233f; --mountain-purple-dark: #0f1830; --mountain-purple-light: #4a63d8;
  --doi-mist: #d5cebd; --forest-green: #17233f; --temple-gold: #2743c4;
  --ocean-blue: #2743c4; --ocean-blue-dark: #17233f; --ocean-blue-light: #4a63d8;
}