/*
 * One stylesheet for the whole public site, built on the Diego brand
 * guide: ink and mist do most of the work, ember is the single bright
 * note (the button, the ridge), tide and ridge support it.
 *
 * Ember text on white is only about 2.8:1, so ember is never used for
 * small text on a light ground. Links on white use a deeper tide.
 */

:root {
  --ink: #12161b;
  --ink-2: #1b2128;
  --mist: #f4f5f6;
  --mist-2: #e9ebee;
  --white: #ffffff;
  --slate: #5d6975;          /* secondary text, 5.6:1 on white */
  --ridge: #3b4a5a;
  --ember: #ff6a3d;
  --ember-dark: #ff8a5c;     /* ember when it sits on ink */
  --tide: #1b8f9a;
  --tide-ink: #13707a;       /* tide dark enough for small text on white */
  --line: #dde1e6;
  --on-ink: #f4f5f6;
  --on-ink-soft: #aab4bf;
  --error: #b3261e;

  --radius: 14px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(18, 22, 27, .05), 0 6px 20px rgba(18, 22, 27, .06);
  --shadow-up: 0 2px 4px rgba(18, 22, 27, .07), 0 14px 32px rgba(18, 22, 27, .10);

  --font-display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1140px;
  --gutter: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--tide-ink); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

/* Headlines: Unbounded ExtraBold, sentence case, tight. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 7vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.5rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }

p { margin: 0 0 1em; }

/* Place lines and small labels: uppercase, wide tracking. */
.eyebrow {
  display: block;
  font-size: .78rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 14px;
}

:focus-visible { outline: 3px solid var(--tide); outline-offset: 3px; border-radius: 6px; }
.on-ink :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: var(--ember-dark); }

.skip {
  position: absolute; left: var(--gutter); top: -100px;
  background: var(--ember); color: var(--ink);
  padding: 10px 16px; border-radius: 999px; font-weight: 700; z-index: 100;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 32px; } }

.section { padding: 64px 0; }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: var(--on-ink); }
@media (min-width: 720px) { .section { padding: 96px 0; } }

.section-head { max-width: 680px; margin-bottom: 36px; }
.lede { font-size: 1.125rem; color: var(--slate); max-width: 62ch; }
.section--ink .lede { color: var(--on-ink-soft); }

/* Section headings carry a short ridgeline, the mountain from the logo,
   that draws in from the left once. */
.section-title { position: relative; padding-bottom: 22px; }
.section-title::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 64px; height: 12px;
  background: no-repeat left center / 64px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 12'%3E%3Cpolyline points='2,10 16,3 26,8 40,1 50,6 62,10' fill='none' stroke='%23ff6a3d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  clip-path: inset(0 0 0 0);
  transition: clip-path .7s var(--ease);
}
.section-title.is-pending::after { clip-path: inset(0 100% 0 0); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px;
  border-radius: 999px; border: 1.5px solid transparent;
  font: 500 1rem/1 var(--font-body); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s var(--ease), background-color .2s, box-shadow .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--ember); color: var(--ink); font-weight: 700; }
.btn-primary:hover { background: var(--ember-dark); color: var(--ink); box-shadow: 0 6px 18px rgba(255, 106, 61, .3); }
.btn-secondary { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--mist); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--on-ink); border-color: rgba(244, 245, 246, .45); }
.btn-ghost:hover { background: rgba(244, 245, 246, .08); color: var(--on-ink); }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: .95rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Cards ---------- */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }

.grid { display: grid; gap: 20px; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 24px; } .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* ---------- Chips ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .82rem; font-weight: 500; line-height: 1.5;
  background: var(--mist-2); color: var(--ink);
}
.chip--ok { background: #e1f2f3; color: var(--tide-ink); }
.chip--no { background: var(--mist-2); color: var(--slate); }
.chip--todo { background: #fff0ea; color: #8a3414; border: 1px dashed #ffb59c; }

/* Owner placeholders: obvious on purpose, so nothing invented ships. */
.todo { background: #fff0ea; color: #8a3414; border-radius: 4px; padding: 0 4px; font-weight: 500; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 66px; }
.logo { display: inline-flex; flex: none; }
.logo img { height: 30px; width: auto; }
.nav { display: none; margin-left: auto; gap: 4px; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; padding: 10px 12px; border-radius: 8px; }
.nav a:hover { background: var(--mist); }
.site-header .btn { margin-left: auto; }
@media (min-width: 860px) { .nav { display: flex; } .site-header .btn { margin-left: 8px; } }

/* ---------- Hero ---------- */

.hero { background: var(--ink); color: var(--on-ink); padding: 48px 0 56px; overflow: hidden; }
.hero-grid { display: grid; gap: 36px; align-items: center; }
.hero .eyebrow { color: var(--on-ink-soft); }
.hero h1 { color: var(--white); margin-bottom: 18px; }
.hero h1 .kicker {
  display: block; margin-top: 14px;
  font-family: var(--font-body); font-weight: 500; letter-spacing: 0;
  font-size: clamp(1.15rem, 2.6vw, 1.4rem); line-height: 1.35; color: var(--on-ink);
}
.hero .sub { font-size: 1.1rem; color: var(--on-ink-soft); max-width: 46ch; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trust { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 10px; }
.trust li { display: flex; align-items: center; gap: 10px; color: var(--on-ink); font-weight: 500; }
.trust li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tide); flex: none; box-shadow: 0 0 0 4px rgba(27, 143, 154, .22); }
.hero-photo { position: relative; margin: 0; }
.hero-photo .photo { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background-color: var(--ink-2); }
.hero-photo img { object-position: 50% 62%; }
.hero-photo figcaption {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(18, 22, 27, .78); color: var(--on-ink);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  padding: 8px 12px; border-radius: 999px;
}
@media (min-width: 640px) { .trust { display: flex; flex-wrap: wrap; gap: 10px 28px; } .trust li { white-space: nowrap; } }
@media (min-width: 960px) {
  .hero { padding: 80px 0 88px; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 56px; }
  .hero-photo .photo { aspect-ratio: 4 / 5; }
}

/* ---------- How it works ---------- */

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.step { position: relative; }
.step-num {
  font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1;
  color: var(--ink); display: block; margin-bottom: 16px; letter-spacing: -.03em;
}
.step-num::after { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tide); margin-left: 6px; vertical-align: super; }
.step p { color: var(--slate); margin: 0; }

/* ---------- Bags ---------- */

.bag { display: flex; flex-direction: column; gap: 18px; }
.bag-photos { display: grid; grid-template-columns: 1fr; gap: 8px; }
.bag-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bag-head h3 { margin: 0; }
.bag .meta { color: var(--slate); margin: -10px 0 0; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: .98rem; }
.specs dt { color: var(--slate); }
.specs dd { margin: 0; font-weight: 500; }
.prices { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.prices div { padding: 12px 10px; text-align: center; }
.prices div + div { border-left: 1px solid var(--line); }
.prices b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.prices span { font-size: .82rem; color: var(--slate); }

/* Sixty days of availability as a strip of small squares: dates only,
   never who has the bag. */
.avail-label { display: flex; justify-content: space-between; font-size: .85rem; color: var(--slate); margin-bottom: 8px; }
.avail { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; }
.avail i { aspect-ratio: 1; border-radius: 3px; background: #bfe3e6; }
.avail i.no { background: var(--mist-2); background-image: linear-gradient(135deg, transparent 45%, #b6bec7 45%, #b6bec7 55%, transparent 55%); }
.legend { display: flex; gap: 16px; font-size: .82rem; color: var(--slate); margin-top: 8px; }
.legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: #bfe3e6; }
.legend span.no::before { background: var(--mist-2); background-image: linear-gradient(135deg, transparent 45%, #b6bec7 45%, #b6bec7 55%, transparent 55%); }

/* ---------- Photos ---------- */

.photo {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--radius);
  background: linear-gradient(100deg, var(--mist) 30%, var(--mist-2) 50%, var(--mist) 70%);
  background-size: 300% 100%;
  animation: shimmer 1.6s linear infinite;
}
.photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.photo img.is-loaded { opacity: 1; }
.photo.is-done { animation: none; }
.photo--empty {
  animation: none; background: var(--mist);
  display: grid; place-items: center; text-align: center;
  border: 1.5px dashed #c5ccd3; color: var(--slate); font-weight: 500;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Booking ---------- */

.book { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) { .book { grid-template-columns: 1fr 1fr; gap: 32px; } }

.bag-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; border: 0; padding: 0; }
.bag-pick legend { font-weight: 500; margin-bottom: 8px; padding: 0; }
.seg { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  border: 1.5px solid var(--line); border-radius: 999px; font-weight: 500; cursor: pointer; background: var(--white);
}
.seg input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--white); }
.seg input:focus-visible + span { outline: 3px solid var(--tide); outline-offset: 2px; }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-head h3 { margin: 0; font-size: 1.05rem; }
.cal-nav { display: flex; gap: 6px; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--white);
  display: grid; place-items: center; cursor: pointer; color: var(--ink); font-size: 1.1rem;
}
.icon-btn:hover { border-color: var(--ink); }
.cal { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.cal th { font-size: .75rem; font-weight: 500; color: var(--slate); letter-spacing: .08em; text-transform: uppercase; padding: 6px 0; }
.cal td { padding: 0; }
.day {
  width: 100%; aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 10px;
  background: transparent; font: 500 .98rem var(--font-body); color: var(--ink); cursor: pointer;
}
.day:hover { background: var(--mist); }
.day[aria-disabled='true'] { color: #9aa4ae; text-decoration: line-through; cursor: not-allowed; background: transparent; }
.day.past { color: #c2c8cf; text-decoration: none; }
.day.in-range { background: #e1f2f3; border-radius: 0; }
.day.start, .day.end { background: var(--ink); color: var(--white); border-radius: 10px; }
.day.today { box-shadow: inset 0 0 0 1.5px var(--tide); }
.cal-summary { margin-top: 14px; padding: 14px 16px; background: var(--mist); border-radius: var(--radius); font-size: .98rem; }
.cal-summary b { font-weight: 700; }

.form { display: grid; gap: 16px; }
.form-row { display: grid; gap: 16px; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-weight: 500; margin-bottom: 6px; }
.field .hint { font-weight: 400; color: var(--slate); font-size: .9rem; }
.field input:not([type=checkbox]):not([type=radio]):not([type=range]), .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1.5px solid #c9d0d7; border-radius: 12px; background: var(--white);
  font: 400 1rem var(--font-body); color: var(--ink);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--tide); box-shadow: 0 0 0 3px rgba(27, 143, 154, .2); }
.check { display: flex; gap: 12px; align-items: flex-start; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--ink); flex: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .92rem; color: var(--slate); margin: 0; }

/* The live calendar (book.js) */
.book-cal, .book .form { padding: 22px; }
.cal-mount { min-height: 320px; }
.cal-hint { color: var(--slate); padding: 40px 0; text-align: center; }
.cal-title { margin: 0; font-weight: 700; font-size: 1.02rem; }
.cal-months { display: grid; gap: 20px; }
@media (min-width: 640px) { .cal-months { grid-template-columns: 1fr 1fr; } }
.cal-month-name { margin: 0 0 4px; font-weight: 500; color: var(--slate); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.cal-months .cal-month:only-child .cal-month-name { display: none; }
.day.taken { color: #9aa4ae; text-decoration: line-through; cursor: not-allowed; background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(93, 105, 117, .08) 5px 7px); }
.day.out { color: #b6bec7; cursor: not-allowed; }
.day.past { color: #c9cfd5; cursor: default; }
.day.taken:hover, .day.out:hover, .day.past:hover { background-color: transparent; }
.day.start, .day.end { background: var(--ink) !important; color: var(--white) !important; text-decoration: none; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: .82rem; color: var(--slate); }
.cal-legend span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--line); }
.cal-legend .lg-taken::before { background: repeating-linear-gradient(135deg, var(--white) 0 3px, #c5ccd3 3px 4px); }
.cal-legend .lg-sel::before { background: var(--ink); border-color: var(--ink); }
.cal-summary .est { margin-top: 4px; color: var(--slate); }
.link-btn { display: inline-block; margin-top: 6px; background: none; border: 0; padding: 6px 0; color: var(--tide-ink); font: 500 .95rem var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.form-error { background: #fdecea; color: var(--error); border-radius: 12px; padding: 12px 14px; font-weight: 500; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--error); }
.field-msg { color: var(--error); font-size: .9rem; margin: 6px 0 0; }
.done { text-align: center; padding: 40px 24px; grid-column: 1 / -1; }
.done h3 { font-size: 1.6rem; }
.done-dates { color: var(--slate); }
.nojs-dates { margin-top: 12px; }

.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.thumbs .photo { aspect-ratio: 1; border-radius: 8px; }
.bag-desc { margin: -6px 0 0; }
.avail-text { font-size: .88rem; color: var(--slate); margin: 8px 0 0; }
.pricing-note { margin-top: 22px; }
.pickup-areas { color: var(--on-ink-soft); }

/* Plain pages: terms, privacy, thanks, not found */
.doc { padding: 56px 0 80px; }
.doc-wrap { max-width: 760px; }
.doc-body h3 { margin-top: 1.8em; }
.doc-body ul, .doc-body ol { padding-left: 1.3em; }
.notice { text-align: center; padding-top: 40px; padding-bottom: 40px; }
.notice .lede { margin: 0 auto 28px; }

/* Brand colours allowed in rich text */
.c-ink { color: var(--ink); } .c-ember { color: #c2410c; } .c-tide { color: var(--tide-ink); } .c-ridge { color: var(--ridge); } .c-slate { color: var(--slate); }

/* ---------- Weight calculator ---------- */

.calc { --z-ok: #bfe6d9; --z-close: #ffe0a8; --z-over: #ffc2ad; --z-no: #f2a8a2; padding: 22px; }
.calc-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .calc-grid { grid-template-columns: 1.15fr .85fr; align-items: start; } .calc-result { position: sticky; top: 90px; } }
.calc-inputs { display: grid; gap: 16px; }
.calc-src { font-size: .9rem; color: var(--slate); margin: 6px 0 0; }
.slider { width: 100%; }
.gear { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.gear legend { font-weight: 500; margin-bottom: 8px; padding: 0; }
.gear .check { min-height: 32px; align-items: center; }
.units { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; }
.calc-result { background: var(--mist); border-radius: var(--radius-lg); padding: 22px; }
.calc-label { margin: 0; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--slate); font-weight: 500; }
.calc-total { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 8vw, 3.4rem); letter-spacing: -.03em; line-height: 1.05; margin: 6px 0 4px; }
.calc-status { display: inline-block; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--mist-2); margin: 0 0 16px; }
.calc-status.z-ok { background: #d5efe6; color: #0f5e4f; }
.calc-status.z-close { background: #ffeccc; color: #7a4a00; }
.calc-status.z-over { background: #ffe1d6; color: #8a3414; }
.calc-status.z-no { background: #fdd9d6; color: var(--error); }
.meter { position: relative; height: 16px; border-radius: 999px; overflow: visible; }
.meter-zones { position: absolute; inset: 0; border-radius: 999px; }
.meter-mark { position: absolute; top: -6px; width: 4px; height: 28px; margin-left: -2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--white); transition: left .35s var(--ease); }
.meter-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: .78rem; color: var(--slate); }
.meter-key span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.k-ok::before { background: #bfe6d9; } .k-close::before { background: #ffe0a8; } .k-over::before { background: #ffc2ad; } .k-no::before { background: #f2a8a2; }
.calc-msg { margin: 16px 0 10px; }
.calc-note { font-size: .88rem; color: var(--slate); margin: 0; }

/* ---------- Flying with a bike ---------- */

.hero--short { padding: 48px 0 56px; }
.hero--short h1 { max-width: 18ch; }
.hero--short .sub p { margin: 0 0 .8em; }
.airline-table .hint { display: block; font-size: .85rem; color: var(--slate); font-weight: 400; }
.airline-table .checked { font-size: .78rem; }
.airline-table td, .airline-table th { font-size: .98rem; }
/* On a phone each airline becomes a small card instead of a wide row. */
@media (max-width: 760px) {
  .table-wrap.airline-table { border: 0; background: none; overflow: visible; border-radius: 0; }
  .airline-table thead { display: none; }
  .airline-table table, .airline-table tbody, .airline-table tr, .airline-table th, .airline-table td { display: block; width: 100%; }
  .airline-table tr { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
  .airline-table th, .airline-table td { border: 0; padding: 4px 0; }
  .airline-table th { font-size: 1.1rem; font-weight: 700; }
  .airline-table td::before { content: attr(data-label); display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); font-weight: 500; }
}

/* ---------- Pricing ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); font-weight: 500; background: var(--mist); }
.table tr:last-child td, .table tr:last-child th { border-bottom: 0; }
.table td:last-child { font-weight: 500; }
.included { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.included li { padding-left: 28px; position: relative; }
.included li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 12px; height: 7px; border-left: 2.5px solid var(--tide); border-bottom: 2.5px solid var(--tide); transform: rotate(-45deg); }

/* ---------- Packing tips ---------- */

.tips { counter-reset: tip; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .tips { grid-template-columns: 1fr 1fr; } }
.tips li { counter-increment: tip; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 18px 64px; position: relative; }
.tips li::before {
  content: counter(tip, decimal-leading-zero); position: absolute; left: 18px; top: 16px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ridge);
}
.tips b { display: block; margin-bottom: 2px; }
.tips p { margin: 0; color: var(--slate); font-size: .98rem; }

/* ---------- Pickup ---------- */

.pickup { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .pickup { grid-template-columns: 1fr 1fr; gap: 56px; } }
.cities { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cities li { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(244, 245, 246, .22); font-size: .92rem; color: var(--on-ink); }
.cities li.home { background: var(--ember); border-color: var(--ember); color: var(--ink); font-weight: 700; }
.pickup-note { background: var(--ink-2); border: 1px solid rgba(244, 245, 246, .1); border-radius: var(--radius-lg); padding: 24px; }
.pickup-note p { color: var(--on-ink-soft); }
.pickup-note p:last-child { margin: 0; }
.pickup-note strong { color: var(--white); }

/* ---------- FAQ ---------- */

.faq { max-width: 820px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  font-weight: 700; font-size: 1.08rem; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 10px; top: 50%; width: 12px; height: 12px; margin-top: -9px;
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq .answer { padding: 0 0 22px; color: var(--slate); max-width: 68ch; }
.faq .answer p:last-child { margin: 0; }

/* ---------- Final call ---------- */

.cta { text-align: center; }
.cta h2 { margin-bottom: 12px; }
.cta p { color: var(--on-ink-soft); margin-bottom: 26px; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: var(--on-ink-soft); padding: 56px 0 32px; font-size: .95rem; border-top: 1px solid rgba(244, 245, 246, .08); }
.site-footer a { color: var(--on-ink); }
.site-footer a:hover { color: var(--ember-dark); }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; align-items: start; } }
.footer-logo img { width: 200px; height: auto; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.footer-links a { display: inline-block; padding: 8px 0; }
.footer-base { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(244, 245, 246, .1); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .88rem; }

/* ---------- Scroll progress ---------- */

.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: var(--ember); transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ---------- Reveal on scroll ---------- */

/* Only elements that start below the fold are ever hidden, and the
   script decides that before they are seen, so nothing visible on load
   disappears and comes back. */
.is-pending[data-reveal] { opacity: 0; transform: translateY(16px); }
[data-reveal] { transition: opacity .5s var(--ease), transform .5s var(--ease); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Everything that moves, stopped for visitors who ask. */
/* ---------- Movement ----------
   The hero arrives in a short sequence, the ridgeline draws itself, and
   things respond under the finger or pointer. Everything here is turned
   off by the reduced-motion block below. */

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes zoomIn { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(27, 143, 154, .25); } 50% { box-shadow: 0 0 0 9px rgba(27, 143, 154, 0); } }
@keyframes pop { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hero { position: relative; }
.hero .eyebrow, .hero h1 > span, .hero .sub, .hero-actions, .trust li { animation: rise .8s var(--ease) both; }
.hero h1 > span:first-child { animation-delay: .08s; }
.hero h1 > .kicker { animation-delay: .2s; }
.hero .sub { animation-delay: .3s; }
.hero-actions { animation-delay: .4s; }
.trust li:nth-child(1) { animation-delay: .5s; }
.trust li:nth-child(2) { animation-delay: .6s; }
.trust li:nth-child(3) { animation-delay: .7s; }
.hero-photo { animation: rise .9s var(--ease) .25s both; }
.hero-photo img.is-loaded { animation: zoomIn 2.4s var(--ease) both; }
.trust li::before { animation: pulse 2.8s ease-in-out infinite; }
.trust li:nth-child(2)::before { animation-delay: .9s; }
.trust li:nth-child(3)::before { animation-delay: 1.8s; }

.ridge-line { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 56px; pointer-events: none; }
.ridge-line polyline { fill: none; stroke: var(--ember); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; opacity: .55; vector-effect: non-scaling-stroke; stroke-dasharray: 1500; stroke-dashoffset: 1500; animation: draw 2.6s var(--ease) .6s forwards; }

/* A light sweep across the main button on hover. */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after { content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); z-index: -1; }
.btn-primary:hover::after, .btn-primary:focus-visible::after { left: 130%; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.96); }

/* Cards lift, their photos lean in. */
.photo img { transition: opacity .6s var(--ease), transform .7s var(--ease); }
.card:hover .photo img.is-loaded { transform: scale(1.05); }
.card:hover { transform: translateY(-5px); }

/* Steps and tips arrive from the side they sit on. */
.tips li:nth-child(odd).is-pending[data-reveal] { transform: translateX(-28px); }
.tips li:nth-child(even).is-pending[data-reveal] { transform: translateX(28px); }
.step.is-pending[data-reveal] { transform: translateY(28px) scale(.97); }
.step-num { transition: color .3s; }
.step:hover .step-num { color: var(--ember); }
.tips li { transition: transform .5s var(--ease), opacity .5s var(--ease), border-color .2s, box-shadow .2s; }
.tips li:hover { border-color: #c5ccd3; box-shadow: var(--shadow); }

/* Lede lines fade up just after their heading. */
.section-head .lede { transition: opacity .6s var(--ease) .15s, transform .6s var(--ease) .15s; }
.section-head.is-pending .lede { opacity: 0; transform: translateY(12px); }

/* The calculator's verdict pops when it changes. */
.calc-status.changed { animation: pop .35s var(--ease); }
.calc-total { transition: color .3s; }

/* FAQ answers open smoothly (motion.js animates the height). */
.faq details .answer { overflow: hidden; }
.faq summary:hover { color: var(--tide-ink); }

/* Service-area cities drifting past, under the pickup text. Decoration:
   the same cities are named in the paragraph above for readers and Google. */
.ticker { margin-top: 26px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker-track { display: flex; width: max-content; gap: 10px; animation: ticker 40s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span { flex: none; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(244, 245, 246, .22); color: var(--on-ink); font-size: .92rem; white-space: nowrap; }
.ticker span.home { background: var(--ember); border-color: var(--ember); color: var(--ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .ridge-line polyline { stroke-dashoffset: 0; }
  .section-head.is-pending .lede { opacity: 1; transform: none; }
  .ticker-track { flex-wrap: wrap; width: auto; }
  .card:hover, .btn:hover { transform: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .is-pending[data-reveal] { opacity: 1; transform: none; }
  .section-title.is-pending::after { clip-path: inset(0 0 0 0); }
  .progress { display: none; }
  .card:hover { transform: none; }
  .btn:active { transform: none; }
}

/* Calculator weights: drag the slider or type the number. Big thumbs
   for fingers, the box wide enough for "102.5". */
.wpair { display: flex; align-items: center; gap: 12px; }
.wpair .slider { flex: 1; min-width: 0; }
.wnum { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.wnum input { width: 92px; min-height: 48px; padding: 10px; border: 1.5px solid #c9d0d7; border-radius: 12px; font: 700 1.05rem var(--font-body); text-align: right; color: var(--ink); background: var(--white); }
.wnum input:focus { outline: none; border-color: var(--tide); box-shadow: 0 0 0 3px rgba(27, 143, 154, .2); }
.wnum span { color: var(--slate); font-weight: 500; min-width: 18px; }
.slider { -webkit-appearance: none; appearance: none; background: transparent; height: 44px; cursor: pointer; }
.slider::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--mist-2); }
.slider::-moz-range-track { height: 8px; border-radius: 999px; background: var(--mist-2); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--ink); border: 4px solid var(--white); box-shadow: 0 1px 4px rgba(18, 22, 27, .35); }
.slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); border: 4px solid var(--white); box-shadow: 0 1px 4px rgba(18, 22, 27, .35); }
.slider:focus-visible { outline: 3px solid var(--tide); outline-offset: 2px; }
.calc-mode { background: var(--mist); border-radius: 12px; padding: 12px 14px; }
.units .seg span { min-height: 40px; }
.calc-parts { display: grid; gap: 16px; }
.wfield label { margin-bottom: 2px; }
.calc .field .wnum input[type=number] { width: 96px; flex: none; text-align: right; font-weight: 700; }
.gear .check { gap: 12px; }
.pickup > div { min-width: 0; }

/* The wordmark alone reads as a name; the place line says what it is. */
.logo { align-items: center; gap: 10px; text-decoration: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; border-left: 1.5px solid var(--line); padding-left: 10px; }
.logo-text b { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); font-weight: 700; }
.logo-text span { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); font-weight: 500; }
@media (max-width: 600px) { .logo-text span { display: none; } }
@media (max-width: 400px) { .logo img { height: 24px; } .logo-text b { font-size: .64rem; letter-spacing: .14em; } }

/* Airline table: compact rows, A to Z, details folded under each. */
.air-table th, .air-table td { padding: 12px 14px; vertical-align: middle; }
.air-table thead th { white-space: nowrap; }
.air-row th { font-weight: 700; }
.air-row .tag { display: inline-block; margin-left: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); background: var(--mist-2); border-radius: 4px; padding: 1px 6px; vertical-align: 2px; }
.air-table .num { white-space: nowrap; }
.air-table .num b { font-weight: 700; }
.air-table .kg { display: block; font-size: .8rem; color: var(--slate); }
.air-table .na { color: var(--slate); font-size: .9rem; }
.air-table td:last-child { font-weight: 400; }
.more-cell { text-align: right; width: 1%; }
.more-btn { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); font: 500 .9rem var(--font-body); cursor: pointer; white-space: nowrap; color: var(--ink); }
.more-btn::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); }
.more-btn[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
.more-btn:hover { border-color: var(--ink); }
.air-row:hover th, .air-row:hover td { background: #fafbfc; }
.air-more td { background: var(--mist); padding: 14px 18px 18px; }
.air-more[hidden] { display: none; }
.air-dl { display: grid; gap: 10px; margin: 0; }
@media (min-width: 760px) { .air-dl { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.air-dl dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); font-weight: 500; margin-bottom: 2px; }
.air-dl dd { margin: 0; font-size: .95rem; }
.air-links { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-weight: 500; }
.air-links .hint { font-size: .82rem; color: var(--slate); font-weight: 400; }
.mobile-max { display: none; }
@media (max-width: 600px) {
  .air-table .col-max { display: none; }
  .mobile-max { display: block; }
  .air-table th, .air-table td { padding: 10px 10px; font-size: .92rem; }
  .more-btn { padding: 6px 10px; font-size: 0; min-width: 40px; }
  .more-btn::after { margin-left: 0; }
}

/* Airline pick: hard to miss until chosen, then a clear verdict. */
.airline-pick.unpicked { border-color: var(--ember) !important; box-shadow: 0 0 0 3px rgba(255, 106, 61, .18); font-weight: 500; }
.calc-src { display: flex; gap: 10px; align-items: flex-start; }
.calc-src.is-ok, .calc-src.is-warn { padding: 10px 12px; border-radius: 12px; color: var(--ink); }
.calc-src.is-ok { background: #e3f4ea; }
.calc-src.is-warn { background: #fff4d6; }
.src-mark, .fee-icon { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 800; font-size: .8rem; line-height: 1; }
.src-mark.ok, .fee-icon.ok { background: #1e8c4e; color: #fff; }
.src-mark.warn, .fee-icon.warn { background: #f2b705; color: var(--ink); }
.fee-icon { width: 18px; height: 18px; font-size: .7rem; margin-right: 8px; vertical-align: -3px; }
.calc-bag { margin: 0; font-size: .92rem; color: var(--slate); }
.bike-note { display: block; margin: 8px 0 0; font-size: .9rem; color: var(--slate); background: var(--mist); border-radius: 10px; padding: 8px 10px; }

/* =====================================================================
   The ride. One idea carried through the page: the logo's wheel, the
   ridge inside it, and the road from Leucadia to the airport. Movement
   either belongs to that idea or answers a touch; everything generic
   from earlier passes is switched off here.
   ===================================================================== */

/* Generic effects retired */
.btn-primary::after { display: none; }
.card:hover, .btn:hover { transform: none; }
.card:hover { box-shadow: var(--shadow); }
.card:hover .photo img.is-loaded { transform: none; }
.is-pending[data-reveal], .tips li.is-pending[data-reveal], .step.is-pending[data-reveal] { opacity: 1; transform: none; }
.section-head.is-pending .lede { opacity: 1; transform: none; }
.progress { display: none; }

/* Sentence case for small labels; caps stay for the brand's place line only */
.calc-label, .table thead th, .air-dl dt, .cal-month-name, .cal th { text-transform: none; letter-spacing: 0; }
.calc-label { font-size: .9rem; }

/* ---------- The living mark ---------- */
@keyframes roll { to { transform: translateX(-13.334px); } }
@keyframes ridgeDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes glow { 50% { transform: scale(1.3); } }
.logo-mark { height: 30px; width: auto; display: block; }
.lg-ridge { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ---------- Hero: a window through the wheel ---------- */
@keyframes rollIn { from { opacity: 0; transform: translateX(14%) rotate(10deg); } to { opacity: 1; transform: none; } }
@keyframes sunrise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero { padding: 48px 0 150px; }
.hero h1 > span:first-child { display: block; font-size: clamp(3.1rem, 11vw, 6.8rem); line-height: .9; letter-spacing: -.04em; }
.hero h1 .kicker { margin-top: 20px; }
.hero-grid { gap: 28px; }
@media (min-width: 960px) { .hero { padding: 72px 0 170px; } .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 40px; } }
.wheel { position: relative; width: min(520px, 88vw); aspect-ratio: 1; margin: 0 auto; animation: rollIn 1.2s var(--ease) .15s both; }
.wheel-photo { position: absolute; inset: 12%; border-radius: 50%; overflow: hidden; background: var(--ink-2); }
.wheel-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.wheel-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.w-ridge { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ridgeDraw 1.8s var(--ease) .8s forwards; }
.w-waves { animation: roll 4.2s linear infinite; opacity: .9; }
.w-sun { animation: sunrise 1.2s var(--ease) 1.4s both; }
.wheel figcaption { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); background: var(--ember); color: var(--ink); font-weight: 700; font-size: .85rem; padding: 7px 16px; border-radius: 999px; white-space: nowrap; }

.live { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 9px 16px; border-radius: 999px; background: rgba(244, 245, 246, .08); border: 1px solid rgba(244, 245, 246, .14); color: var(--on-ink); font-weight: 500; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #45d483; box-shadow: 0 0 0 0 rgba(69, 212, 131, .6); animation: livePulse 2.2s ease-out infinite; }
.live.is-busy .live-dot { background: var(--ember-dark); animation: none; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 9px rgba(69, 212, 131, 0); } 100% { box-shadow: 0 0 0 0 rgba(69, 212, 131, 0); } }

/* ---------- The road between sections ---------- */
.route { position: relative; height: 96px; pointer-events: none; }
.route svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero > .route { position: absolute; left: 0; right: 0; bottom: 18px; }
.has-route { position: relative; padding-top: 136px; }
.has-route > .route { position: absolute; top: 18px; left: 0; right: 0; }
@media (min-width: 720px) { .has-route { padding-top: 150px; } }
.r-area { fill: rgba(18, 22, 27, .035); }
.route--dark .r-area { fill: rgba(244, 245, 246, .035); }
.r-track { fill: none; stroke: rgba(18, 22, 27, .16); stroke-width: 1.5; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; }
.route--dark .r-track { stroke: rgba(244, 245, 246, .18); }
.r-line { fill: none; stroke: var(--ember); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1000; stroke-dashoffset: var(--off, 1000); }
.r-mark { position: absolute; transform: translate(-50%, -100%); padding-bottom: 12px; font-size: .78rem; font-weight: 500; color: var(--slate); white-space: nowrap; opacity: .4; transition: opacity .4s, color .4s; }
.r-mark::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 1px; height: 9px; background: currentColor; }
.r-mark.passed { opacity: 1; color: var(--ink); }
.route--dark .r-mark { color: var(--on-ink-soft); }
.route--dark .r-mark.passed { color: var(--white); }
.r-rider { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ember); border: 3px solid var(--white); box-shadow: 0 2px 8px rgba(18, 22, 27, .35); }
.route--dark .r-rider { border-color: var(--ink); }
@media (max-width: 600px) { .r-mark { font-size: .7rem; } }

/* ---------- How it works: waypoints on one road ---------- */
.steps { position: relative; }
@media (min-width: 760px) { .steps::before { content: ''; position: absolute; left: 24px; right: 24px; top: 24px; border-top: 2px dashed #c5ccd3; } }
.step-num { width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; font-size: 1.15rem; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--white); }
.step-num::after { display: none; }
.step:hover .step-num { color: var(--ember-dark); }

/* ---------- Bags: a tag on each, photos that lean with you ---------- */
.bag { position: relative; overflow: visible; }
.bag-tag { position: absolute; top: -12px; right: 22px; z-index: 2; width: 72px; padding: 22px 8px 10px; background: var(--ink); color: var(--white); border-radius: 12px; text-align: center; transform: rotate(5deg); transform-origin: 50% -14px; box-shadow: 0 8px 18px rgba(18, 22, 27, .28); }
.bag-tag::before { content: ''; position: absolute; top: -16px; left: 50%; width: 2px; height: 24px; margin-left: -1px; background: #9aa4ae; border-radius: 1px; }
.tag-hole { position: absolute; top: 8px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--mist); }
.tag-mark { width: 40px; height: 40px; display: block; margin: 0 auto; }
.bag-tag b { display: block; margin-top: 6px; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.bag:hover .bag-tag, .bag-tag.swing { animation: swing 1.6s cubic-bezier(.3, .7, .4, 1); }
@keyframes swing { 0% { transform: rotate(5deg); } 15% { transform: rotate(-14deg); } 32% { transform: rotate(10deg); } 50% { transform: rotate(-6deg); } 68% { transform: rotate(4deg); } 84% { transform: rotate(-1deg); } 100% { transform: rotate(5deg); } }
.bag-photos { transition: transform .5s var(--ease); will-change: transform; }
.bag-photos .photo { box-shadow: 0 10px 30px rgba(18, 22, 27, .12); }

/* ---------- Packing tips: the ridge as the bullet ---------- */
.tips li { padding-left: 64px; }
.tips li::before { content: ''; left: 18px; top: 22px; width: 30px; height: 11px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpolyline points='2,19 16,7 26,14 40,2 50,10 62,19' fill='none' stroke='%23ff6a3d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---------- The luggage scale ---------- */
.scale svg { display: block; width: 100%; max-width: 320px; margin: 4px auto 0; overflow: visible; }
.scale .needle line { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.scale .needle circle { fill: var(--ink); }
.scale .needle .hub { fill: var(--ember); }
.scale .needle { transform-box: view-box; transform-origin: 130px 136px; }
.scale .tick { stroke: #9aa4ae; stroke-width: 1.5; }
.scale .tick-label { font: 500 10px var(--font-body); fill: var(--slate); text-anchor: middle; }
.scale .limit-line { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 3; }

@media (prefers-reduced-motion: reduce) {
  .wheel, .w-sun { animation: none !important; opacity: 1; transform: none; }
  .w-ridge { stroke-dashoffset: 0; }
  .r-line { stroke-dashoffset: 0 !important; }
  .r-mark { opacity: 1; }
  .bag-photos { transform: none !important; }
}

/* Nothing decorative may widen the page on a phone. clip (not hidden)
   keeps the sticky header working. */
body { overflow-x: clip; }
.hero > .route, .has-route > .route { left: 12px; right: 12px; }
.scale .tick-label { paint-order: stroke; stroke: var(--mist); stroke-width: 3px; }

/* =====================================================================
   Tighter. Less air between and inside sections, so a phone shows
   content, not padding.
   ===================================================================== */
.section { padding: 44px 0; }
@media (min-width: 720px) { .section { padding: 64px 0; } }
.section-head { margin-bottom: 20px; }
.section-title { padding-bottom: 16px; margin-bottom: 12px; }
.lede { margin-bottom: 0; }
.has-route { padding-top: 92px; }
@media (min-width: 720px) { .has-route { padding-top: 104px; } }
.route { height: 64px; }
.has-route > .route { top: 10px; }
.hero { padding: 32px 0 104px; }
@media (min-width: 960px) { .hero { padding: 56px 0 120px; } }
.hero .sub { margin-bottom: 20px; }
.trust { margin-top: 20px; gap: 6px 22px; }
.live { margin-top: 16px; }
.wheel { width: min(460px, 82vw); }
.grid { gap: 16px; }
.card { padding: 18px; }
.bag { gap: 12px; }
.specs { gap: 4px 14px; }
.tips { gap: 10px; }
.tips li { padding: 14px 14px 14px 58px; }
.tips li::before { top: 19px; }
.faq summary { padding: 15px 40px 15px 0; }
.faq .answer { padding-bottom: 16px; }
.pickup { gap: 20px; }
.pickup-note { padding: 18px; }
.ticker { margin-top: 16px; }
.cta p { margin-bottom: 18px; }
.site-footer { padding: 40px 0 26px; }
.footer-base { margin-top: 24px; }
.book { gap: 16px; }
.book-cal, .book .form { padding: 16px; }
.form { gap: 12px; }
.form-row { gap: 12px; }

/* =====================================================================
   The weight calculator, compact. On a phone the scale and the verdict
   sit side by side and stay pinned at the top of the card while the
   sliders scroll under them, so every change shows straight away.
   ===================================================================== */
.calc { padding: 14px; }
.calc-grid { gap: 14px; }
.calc-inputs { gap: 12px; }
.calc-inputs .field label { margin-bottom: 4px; }
.calc-result { display: grid; grid-template-columns: minmax(130px, 42%) 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius); background: var(--mist); position: sticky; top: 70px; z-index: 5; box-shadow: 0 6px 16px rgba(18, 22, 27, .08); }
.calc-read { min-width: 0; }
.calc-total { font-size: clamp(1.9rem, 7vw, 2.6rem); margin: 0; }
.calc-status { margin: 4px 0 0; font-size: .85rem; padding: 3px 10px; }
.calc-msg { margin: 6px 0 0; font-size: .86rem; line-height: 1.4; color: var(--ink-soft, var(--slate)); }
.scale svg { max-width: 220px; margin: 0; }
.calc-note { font-size: .8rem; margin: 0; }
.calc-src { margin-top: 6px; font-size: .86rem; }
.calc-src.is-ok, .calc-src.is-warn { padding: 8px 10px; }
.calc-mode { padding: 8px 12px; font-size: .95rem; }
.calc-parts { gap: 12px; }
.calc-bag { font-size: .82rem; }
.wpair { gap: 10px; }
.calc .field .wnum input[type=number] { width: 78px; min-height: 42px; padding: 8px; }
.slider { height: 36px; }

/* Limit and max side by side, always */
.limits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.limit-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; min-height: 26px; }
.limit-head label { margin: 0 !important; }
.limits input { min-height: 44px !important; }

/* The small lb / kg switch beside the limit */
.unit-toggle { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; }
.unit-toggle label { position: relative; margin: 0 !important; cursor: pointer; }
.unit-toggle input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.unit-toggle span { display: block; padding: 2px 9px; font-size: .78rem; font-weight: 700; color: var(--slate); line-height: 20px; }
.unit-toggle input:checked + span { background: var(--ink); color: var(--white); }
.unit-toggle input:focus-visible + span { outline: 2px solid var(--tide); outline-offset: -2px; }

/* Packed gear as a tap-to-open list */
.gear-pick { border: 1.5px solid #c9d0d7; border-radius: 12px; background: var(--white); }
.gear-pick summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 40px 11px 12px; position: relative; font-weight: 500; min-height: 46px; }
.gear-pick summary::-webkit-details-marker { display: none; }
.gear-pick summary::after { content: ''; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .2s; }
.gear-pick[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.gear-sum { font-size: .85rem; color: var(--slate); font-weight: 400; white-space: nowrap; }
.gear-list { display: grid; gap: 2px; padding: 0 12px 10px; border-top: 1px solid var(--line); }
.gear-list .check { min-height: 40px; align-items: center; gap: 12px; }
.gear-list .co2 { color: var(--slate); cursor: not-allowed; }
.gear-list .co2 input { opacity: .5; }
.gear-list .co2 s { text-decoration-thickness: 2px; text-decoration-color: var(--error); }

@media (min-width: 900px) {
  .calc { padding: 22px; }
  .calc-grid { grid-template-columns: 1.1fr .9fr; gap: 24px; }
  .calc-result { order: 2; grid-template-columns: 1fr; text-align: center; top: 90px; padding: 18px; }
  .calc-result .scale svg { max-width: 280px; margin: 0 auto; }
  .calc-status { display: inline-block; }
}

/* Booking add-ons */
.addons { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.addons legend { font-weight: 500; margin-bottom: 6px; padding: 0; }
.addon { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--white); }
.addon:has(input:checked) { border-color: var(--ink); background: var(--mist); }
.addon input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--ink); }
.addon-text b { display: block; }
.addon-text .hint { display: block; font-size: .88rem; color: var(--slate); line-height: 1.4; }
.addon-price { font-weight: 700; white-space: nowrap; }

/* The owner's note under prices, e.g. a discount for Venmo or Zelle */
.price-note { margin: 8px 0 0; font-size: .9rem; color: var(--tide-ink); font-weight: 500; }

/* Credit for the ride drawn down the page */
.ride-credit { margin: 22px auto 0; max-width: 46ch; font-size: .85rem; color: var(--on-ink-soft); }

/* The Double Peak stretch gets room to look like the climb it is */
.route--tall { height: 132px; }
.has-route:has(> .route--tall) { padding-top: 160px; }
@media (min-width: 720px) { .route--tall { height: 170px; } .has-route:has(> .route--tall) { padding-top: 200px; } }
.route--tall .r-mark { font-size: .8rem; }

@media (prefers-reduced-motion: reduce) { .r-line { stroke-dasharray: none !important; } }

/* Heroes that end in the tall Double Peak line keep the line clear of the buttons */
.hero.hero--short { padding-bottom: 168px; }
@media (min-width: 720px) { .hero.hero--short { padding-bottom: 214px; } }
.hero > .route--tall { bottom: 12px; }

/* Whole-loop line in the heroes */
.hero:has(> .route--tall) { padding-bottom: 168px; }
@media (min-width: 720px) { .hero:has(> .route--tall) { padding-bottom: 214px; } }
.r-mark.at-start { transform: translate(-8px, -100%); }
.r-mark.at-start::after { left: 8px; }
.r-mark.at-end { transform: translate(calc(-100% + 8px), -100%); }
.r-mark.at-end::after { left: auto; right: 8px; }
@media (max-width: 700px) { .r-mark.minor { display: none; } }

.hero:has(> .route--tall), .hero.hero--short { padding-bottom: 196px; }
@media (min-width: 720px) { .hero:has(> .route--tall), .hero.hero--short { padding-bottom: 250px; } }

/* Lifted names keep their tick reaching the line; crowded minor names step aside */
.r-mark { transform: translate(-50%, calc(-100% - var(--lift, 0px))); }
.r-mark::after { height: calc(9px + var(--lift, 0px)); bottom: calc(0px - var(--lift, 0px)); }
.r-mark.at-start { transform: translate(-8px, calc(-100% - var(--lift, 0px))); }
.r-mark.at-end { transform: translate(calc(-100% + 8px), calc(-100% - var(--lift, 0px))); }
.r-mark.crowded { display: none; }

/* Shorter tag: number and colour only */
.bag-tag { width: 64px; padding: 18px 6px 8px; }
.tag-mark { width: 30px; height: 30px; }
.bag-tag b { margin-top: 5px; font-size: .58rem; }
.tag-colour { display: block; margin-top: 2px; font-size: .52rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-dark); font-weight: 700; }

/* Bag photos open large */
.photo-link { display: block; cursor: zoom-in; border-radius: var(--radius); }
.photo-link:focus-visible { outline: 3px solid var(--tide); outline-offset: 3px; }
.thumbs { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
.thumbs .photo-link .photo { aspect-ratio: 1; border-radius: 8px; }
.photo-link:hover .photo img.is-loaded { transform: scale(1.03); }
.lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(18, 22, 27, .94); padding: 56px 12px; touch-action: pan-y; }
.lightbox.open { display: flex; animation: lbIn .2s ease; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lb-lock { overflow: hidden; }
.lb-figure { margin: 0; max-width: min(1200px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lb-figure img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: 10px; user-select: none; -webkit-user-drag: none; }
.lb-figure figcaption { display: flex; gap: 14px; color: var(--on-ink-soft); font-size: .92rem; text-align: center; }
.lb-count { color: var(--on-ink); font-weight: 700; white-space: nowrap; }
.lightbox button { position: absolute; border: 0; background: rgba(244, 245, 246, .12); color: var(--white); width: 48px; height: 48px; border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lightbox button:hover { background: rgba(244, 245, 246, .22); }
.lb-close { top: 12px; right: 12px; font-size: 1.1rem !important; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox.single .lb-prev, .lightbox.single .lb-next { display: none; }
@media (max-width: 600px) { .lb-prev, .lb-next { top: auto; bottom: 14px; transform: none; } .lb-prev { left: calc(50% - 60px); } .lb-next { right: calc(50% - 60px); } }
@media (prefers-reduced-motion: reduce) { .lightbox.open { animation: none; } }