/* Phuket Taxi
   ----------------------------------------------------------------------
   The old page advertised nineteen destinations with drive times and could
   price five route pairs. Its own H1 sold "Phuket to Krabi" while the word
   Krabi matched nothing in the fare feed — the nearest thing sold is Ao Nang
   Beach — and the client-side filter searched for it anyway, matching zero
   rows. That is a wider gap than any sibling site had.

   So this page is built the other way round: it says what it prices, plainly
   and briefly, and then spends its length on the thing that is actually worth
   knowing and was buried in a machine-readable file no customer opens — how
   far each beach is from the airport, and which pier serves which islands.

   Phuket has one road off it, the Sarasin Bridge, and one airport at the top
   of the island. Everything else is either DOWN the west coast, OUT through a
   pier, or OFF the island altogether. The page is those three directions.

   The palette is limestone: a cool chalk ground, dark stone ink, and the
   oxblood of an Old Town shophouse door for the figures. Familjen Grotesk and
   Manrope; Bai Jamjuree on the Thai side.

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

:root {
  --chalk:  #e4e6e0;   /* limestone, cool — not the cream of a sibling site */
  --chalk-2:#eef0eb;
  --stone:  #1b211f;
  --stone-2:#55645f;   /* darkened: #5f6f6b measured 4.20:1 on the chalk */
  --rule:   #c6cac2;
  --rule-2: #364240;
  --blood:  #8c2f3d;   /* the figures: minutes, kilometres, baht */
  --on-dark:#e8eae4;
  --on-dark-2: #97a3a0;
  --pad:    clamp(1rem, 4vw, 2.75rem);
  --wrap:   70rem;
  --text:   "Manrope", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --disp:   "Familjen Grotesk", ui-sans-serif, system-ui, "Segoe UI", Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--chalk);
  color: var(--stone);
  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); }
.slide { overflow-x: auto; -webkit-overflow-scrolling: touch; }

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

/* ---------------------------------------------------------------- landfall */
.landfall { background: var(--stone); color: var(--on-dark); padding-block: clamp(2rem, 6vw, 3.6rem); }
.landfall h1 {
  font-family: var(--disp); font-weight: 600; font-size: clamp(2rem, 1.1rem + 3.8vw, 3.4rem);
  line-height: 1.04; letter-spacing: -.02em; margin: 0; max-width: 18ch; text-wrap: balance;
}
.landfall > .wrap > p { max-width: 56ch; color: var(--on-dark-2); margin: 1rem 0 0; font-size: 1.05rem; }
.hires { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }

/* the run this site is actually built on, stated once, in full */
.headline {
  margin-top: 2.2rem; border: 1px solid var(--rule-2);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px;
  background: var(--rule-2);
}
.headline > div { background: var(--stone); padding: 1rem 1.2rem; min-width: 0; }
.headline dt { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark-2); margin: 0 0 .3rem; }
.headline dd { margin: 0; font-family: var(--disp); font-weight: 600; font-size: 1.6rem;
  line-height: 1.1; font-variant-numeric: tabular-nums; }
.headline dd small { display: block; font-family: var(--text); font-weight: 400;
  font-size: .8rem; color: var(--on-dark-2); margin-top: .2rem; }

/* --------------------------------------------------------------- buttons */
.hire, .hire-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;
}
.hire { background: var(--on-dark); color: var(--stone); }
.hire:hover { background: #fff; }
.hire-2 { border-color: currentColor; }
.hire-2:hover { color: var(--blood); }
.landfall .hire-2:hover, .stretch-dark .hire-2:hover { color: #fff; }

/* -------------------------------------------------------------- sections */
.stretch { padding-block: clamp(2.4rem, 6vw, 4rem); border-top: 1px solid var(--rule); }
/* The ground is written as a literal, not var(--stone): this rule remaps
   --stone to the light ink on the next line, and a background reading the
   remapped value paints the band light under light text. */
.stretch-dark { background: #1b211f; color: var(--on-dark); border-top: 0;
  --stone: var(--on-dark); --stone-2: var(--on-dark-2); --rule: var(--rule-2); --chalk-2: #232a28; }
.stretchno { font-family: var(--disp); font-weight: 600; font-size: .95rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blood); margin: 0 0 .3rem; }
.stretch-dark .stretchno { color: #e5899a; }
.stretch h2 { font-family: var(--disp); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(1.55rem, 1.1rem + 2vw, 2.4rem); line-height: 1.1; margin: 0 0 .6rem;
  text-wrap: balance; }
.stretch > .wrap > p { max-width: 60ch; }
.faint { color: var(--stone-2); }
.stretch > .wrap > p.faint { margin: 0 0 1.8rem; }
.num { color: var(--blood); font-variant-numeric: tabular-nums; }
.stretch-dark .num { color: #e5899a; }

/* --------------------------------------------------------------- down the
   island — the drive-time list that lived only in llms-full.txt */
.drops { border-top: 1px solid var(--rule); }
.drop {
  display: grid; grid-template-columns: minmax(9rem, 1.5fr) 6rem 6rem minmax(5rem, auto);
  gap: .15rem 1rem; align-items: baseline; padding: .75rem 0;
  border-bottom: 1px solid var(--rule);
}
.drop-n { font-family: var(--disp); font-weight: 600; font-size: 1.08rem; }
.drop-n span { display: block; font-family: var(--text); font-weight: 400; font-size: .82rem;
  color: var(--stone-2); }
.drop-t, .drop-k { font-family: var(--disp); font-size: .98rem; color: var(--stone-2);
  font-variant-numeric: tabular-nums; }
.drop-p { font-family: var(--disp); font-weight: 600; font-size: 1.05rem; text-align: right;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.drop-p.listed { color: var(--blood); }
.drop-p.ask { color: var(--stone-2); font-weight: 400; font-size: .92rem; }

/* --------------------------------------------------------- out through a
   pier — the lookup that is the most useful thing this operator knows */
.piers { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; }
.pier { border: 1px solid var(--rule); background: var(--chalk-2); min-width: 0; }
.pier-h { padding: .8rem 1rem; border-bottom: 1px solid var(--rule); }
.pier-h b { font-family: var(--disp); font-weight: 600; font-size: 1.2rem; display: block; }
.pier-h span { font-size: .84rem; color: var(--stone-2); }
.pier ul { margin: 0; padding: .8rem 1rem .9rem 2rem; font-size: .95rem; }
.pier li { margin-bottom: .2rem; }
.pier-note { border-top: 1px solid var(--rule); padding: .7rem 1rem; font-size: .88rem;
  color: var(--stone-2); }
.ends-here { margin-top: 1.5rem; border: 1px solid var(--rule); border-left: 6px solid var(--blood);
  background: var(--chalk-2); padding: .95rem 1.1rem; }
.ends-here h3 { font-family: var(--disp); font-weight: 600; font-size: 1.15rem; margin: 0 0 .3rem; }
.ends-here p { margin: 0; font-size: .95rem; color: var(--stone-2); }

/* ------------------------------------------------------ off the island */
.aways { border-top: 1px solid var(--rule); }
.away { display: grid; grid-template-columns: minmax(9rem, 1.4fr) 6rem 6rem minmax(5rem, auto);
  gap: .15rem 1rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.away-n { font-family: var(--disp); font-weight: 600; font-size: 1.08rem; }
.away-n span { display: block; font-family: var(--text); font-weight: 400; font-size: .82rem;
  color: var(--stone-2); }
.away-t, .away-k { font-family: var(--disp); font-size: .98rem; color: var(--stone-2);
  font-variant-numeric: tabular-nums; }
.away-p { font-family: var(--disp); font-weight: 600; font-size: 1.05rem; text-align: right;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.away-p.listed { color: var(--blood); }
.away-p.ask { color: var(--stone-2); font-weight: 400; font-size: .92rem; }

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

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

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

/* --------------------------------------------------------------- narrow */
@media (max-width: 46rem) {
  body { font-size: 16px; }
  .bridge .wrap { flex-wrap: wrap; padding-block: .5rem; gap: .5rem; }
  .bridge-nav { width: 100%; overflow-x: auto; }
  .drop, .away { grid-template-columns: 1fr auto; }
  .drop-t, .drop-k, .away-t, .away-k { grid-column: 1; font-size: .85rem; }
  .drop-k, .away-k { grid-row: 3; }
  .drop-p, .away-p { grid-row: 1; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

:lang(th) { line-height: 1.85; }
:lang(th) .landfall h1, :lang(th) .stretch 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 on every
   site in this network: one form, one submit handler, element ids and
   class names its own inline JavaScript queries by, and two scripts that
   talk to each other through globals in load order. They came off Tabler
   and carry its utility classes.

   The names are inherited; every value below is this site's — chalk
   ground, stone ink, oxblood figures, hairline 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; }
/* Every column selector below is written as a child of .row so it matches the
 * base rule's specificity (0,2,0) and wins on source order. Written as bare
 * `.col-md-3` they are (0,1,0), the base rule's width:100% outranks them, and
 * every grid on the site silently collapses to one column at every width. */
.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; }
.row > .col-6 { width: 50%; } .row > .col-12 { width: 100%; }
@media (min-width: 768px) {
  .row > .col-md-3 { width: 25%; } .row > .col-md-4 { width: 33.3333%; }
  .row > .col-md-6 { width: 50%; } .row > .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) {
  .row > .col-lg-3 { width: 25%; } .row > .col-lg-4 { width: 33.3333%; } .row > .col-lg-5 { width: 41.6667%; }
  .row > .col-lg-6 { width: 50%; } .row > .col-lg-7 { width: 58.3333%; } .row > .col-lg-8 { width: 66.6667%; }
  .row > .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(--stone-2); }
.text-white, .text-dark { color: var(--stone); }
.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: 700; font-size: clamp(4rem, 12vw, 7.5rem); line-height: .95; }

.card { background: var(--chalk-2); border: 1px solid var(--rule); }
.card-header { background: var(--stone); color: var(--on-dark); 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(--chalk-2); }
.bg-green, .bg-azure, .bg-teal, .bg-azure-lt { background: var(--stone); }
.text-green-fg, .text-azure-fg, .text-teal-fg { color: var(--on-dark); }

.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(--stone); border-radius: 0;
  background: transparent; color: var(--stone); text-decoration: none; cursor: pointer; line-height: 1.35;
}
.btn:hover { background: var(--stone); color: var(--chalk); }
.btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: transparent; color: var(--stone); }
.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(--stone); border-color: var(--stone); color: var(--on-dark);
}
.btn-taxi:hover, .btn-ocean:hover, .btn-primary:hover, .btn-warning:hover,
.btn-dark:hover, .btn-success:hover, .btn-light:hover {
  background: var(--blood); border-color: var(--blood); 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(--stone);
  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(--stone) 50%),
                    linear-gradient(135deg, var(--stone) 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(--stone-2); }
.form-control:focus, .form-select:focus { outline: 2px solid var(--blood); outline-offset: 1px;
  border-color: var(--blood); }
.form-check { display: flex; align-items: flex-start; gap: .5rem; }
.form-check-input { margin-top: .3rem; accent-color: var(--blood); }
.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(--stone);
  background: var(--chalk-2); padding: .75rem 1rem; }
.alert-danger, .alert-warning { border-left-color: var(--blood); }
.text-danger { color: var(--blood); } .text-success, .text-warning { color: var(--stone); }
.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(--blood); border-radius: 50%;
  animation: pk-spin .7s linear infinite; }
.spinner-border-sm { width: .9rem; height: .9rem; border-width: 2px; }
@keyframes pk-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(--stone); padding: .55rem .4rem;
  font-family: var(--disp); font-weight: 600; }
.car-type-btn:hover { border-color: var(--stone); }
.car-type-btn.active { background: var(--stone); border-color: var(--stone); color: var(--on-dark); }
.route-card, .route-grid-card { display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--rule); background: var(--chalk-2); color: inherit;
  padding: .6rem .8rem; margin-bottom: .45rem; }
.route-card:hover, .route-grid-card:hover { border-color: var(--stone); }
.route-card.selected, .route-grid-card.selected { border-color: var(--blood); 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(--blood);
  font-variant-numeric: tabular-nums; }
.booking-summary { border: 1px solid var(--blood); 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(--stone-2); }
.step-indicator.active { border-color: var(--blood); color: var(--stone); }
.step-indicator.completed { border-color: var(--stone); color: var(--stone); }
.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(--stone); flex: 0 0 auto; }
.step-indicator.active .step-number, .step-indicator.completed .step-number {
  background: var(--blood); 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(--chalk-2); border: 1px solid var(--rule); height: 100%;
  display: flex; flex-direction: column; }
.tour-card-header { background: var(--stone); color: var(--on-dark); padding: .85rem 1.1rem; }
.tour-card-header h3 { color: var(--on-dark); 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(--stone-2); }
.tour-info-item svg { color: var(--blood); }
.tour-includes { background: #fff; border-left: 3px solid var(--rule); padding: .7rem .8rem;
  margin-bottom: 1rem; font-size: .92rem; color: var(--stone-2); }
.tour-includes strong { color: var(--stone); }
.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(--blood);
  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: -.02em;
  font-size: clamp(1.85rem, 1.1rem + 3vw, 2.9rem); line-height: 1.08; margin: 0 0 .6rem; }
.hero-subtitle { color: var(--stone-2); margin: 0 0 1.2rem; }
.cta-section { background: #1b211f; color: var(--on-dark); }
.cta-section h1, .cta-section h2, .cta-section h3 { color: var(--on-dark); }
.cta-section p, .cta-section .text-muted { color: var(--on-dark-2); }
.cta-section .btn { border-color: var(--on-dark); color: var(--on-dark); background: transparent; }
.cta-section .btn:hover { background: var(--on-dark); color: #1b211f; }
.nf-link { border-top: 1px solid var(--rule); padding: .65rem .2rem; }
.nf-link:hover { color: var(--blood); }
/* 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>.
   Seven items, of which exactly one was readable if the Tabler CDN failed. */
.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(--blood); line-height: 1; }
.qa[open] > summary::after { content: "\2212"; }
.qa > summary:hover h3 { color: var(--blood); }
.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(--stone-2); font-size: .96rem; }

/* The old palette names still appear in inline styles inside JS template
   literals on booking.html and tour.html — var(--andaman-teal) among them.
   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: #8c2f3d; --taxi-yellow-dark: #1b211f; --taxi-yellow-light: #a84453;
  --taxi-yellow-warm: #8c2f3d;
  --taxi-black: #1b211f; --taxi-dark: #1b211f;
  --taxi-white: #e4e6e0; --taxi-off-white: #eef0eb;
  --taxi-gray: #55645f; --taxi-gray-dark: #1b211f; --taxi-gray-light: #c6cac2;
  --andaman-teal: #1b211f; --andaman-teal-dark: #0f1412; --andaman-teal-light: #55645f;
  --coral-sunset: #8c2f3d; --palm-green: #55645f; --sand-beige: #eef0eb;
  --ocean-blue: #1b211f; --ocean-blue-dark: #0f1412; --ocean-blue-light: #55645f;
}